/* V24.15 TARGETED: one iPhone bottom-edge layout.
 *
 * Older mobile rules calculate the safe-area in several places. On iPhone
 * that leaves one strip between the conversation list and navigation, plus a
 * second strip below the navigation. This final mobile-only layer gives the
 * bottom inset a single owner: the visible bar (or, when a conversation is
 * open, the composer background). No chat/Firebase/message logic is changed.
 */
@media (max-width: 768px){
  :root{
    /* User-selected edge-to-edge mobile mode: do not reserve an iPhone
       bottom inset. The navigation/composer background now reaches the
       physical bottom of the viewport. */
    --v2415-safe-bottom:0px;
    --v2415-nav-content:68px;
    --v2415-nav-height:calc(var(--v2415-nav-content) + var(--v2415-safe-bottom));
    --v2415-shell-height:100vh;

    /* Keep the shared variables aligned with the final shell geometry. */
    --mobile-nav-content:var(--v2415-nav-content);
    --mobile-nav-height:var(--v2415-nav-height);
  }

  /* responsive.js supplies the visible viewport while the virtual keyboard
     is open, which keeps the composer from being obscured on older iOS. */
  html.keyboard-open{
    --v2415-shell-height:var(--app-vh, 100dvh);
  }

  html,
  body{
    width:100% !important;
    min-height:var(--v2415-shell-height) !important;
    height:var(--v2415-shell-height) !important;
    max-height:var(--v2415-shell-height) !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
  }

  body{
    position:fixed !important;
    top:0 !important;
    right:0 !important;
    bottom:0 !important;
    left:0 !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    background:var(--bg-main) !important;
  }

  /* Only while the software keyboard is shown do we constrain the fixed
     shell to VisualViewport's measured height. */
  html.keyboard-open body{
    bottom:auto !important;
    min-height:var(--app-vh, 100dvh) !important;
    height:var(--app-vh, 100dvh) !important;
    max-height:var(--app-vh, 100dvh) !important;
  }

  /* The navigation bar itself paints all the way to the physical bottom.
     Its content remains above the Home Indicator via the padding. */
  .sidebar-icon{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    top:auto !important;
    bottom:0 !important;
    width:100% !important;
    height:var(--v2415-nav-height) !important;
    min-height:var(--v2415-nav-height) !important;
    max-height:var(--v2415-nav-height) !important;
    margin:0 !important;
    padding:0 6px var(--v2415-safe-bottom) !important;
    box-sizing:border-box !important;
    background:var(--bg-icon-bar) !important;
    z-index:3000 !important;
  }

  .sidebar-icon .avatar,
  .sidebar-icon .nav-icon,
  .sidebar-icon .icon-btn{
    height:var(--v2415-nav-content) !important;
    min-height:var(--v2415-nav-content) !important;
    max-height:var(--v2415-nav-content) !important;
  }

  /* The list ends at the exact top edge of the bar—no duplicated safe inset. */
  .sidebar-menu{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    top:0 !important;
    bottom:var(--v2415-nav-height) !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    margin:0 !important;
    padding-bottom:0 !important;
    box-sizing:border-box !important;
  }

  /* Closed chat shares the list/navigation boundary. */
  .chat-main,
  #chatMainContainer{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    top:0 !important;
    bottom:var(--v2415-nav-height) !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    margin:0 !important;
    box-sizing:border-box !important;
  }

  /* A selected conversation is a full mobile page. The composer background
     reaches the bottom edge while its controls remain clear of the indicator. */
  body:has(#chatMainContainer.mobile-active) .sidebar-icon,
  body.mobile-chat-focus .sidebar-icon{
    display:none !important;
  }

  body:has(#chatMainContainer.mobile-active) .chat-main,
  body:has(#chatMainContainer.mobile-active) #chatMainContainer,
  body.mobile-chat-focus .chat-main,
  body.mobile-chat-focus #chatMainContainer,
  .chat-main.mobile-active,
  #chatMainContainer.mobile-active{
    /* Do not combine a fixed height with top/bottom. iOS can resolve 100vh
       shorter than the rendered viewport, which was the dark strip below the
       composer. A true inset fills the exact visible edge. */
    inset:0 !important;
    width:auto !important;
    min-height:0 !important;
    height:auto !important;
    max-height:none !important;
    margin:0 !important;
    display:flex !important;
    flex-direction:column !important;
    overflow:hidden !important;
  }

  .chat-main.mobile-active .chat-window,
  body.mobile-chat-focus .chat-window{
    flex:1 1 auto !important;
    min-height:0 !important;
    height:auto !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }

  .chat-main.mobile-active .chat-input-zone,
  #chatMainContainer.mobile-active .chat-input-zone,
  body.mobile-chat-focus .chat-input-zone{
    flex:0 0 auto !important;
    min-height:0 !important;
    height:auto !important;
    margin-top:auto !important;
    margin-right:0 !important;
    margin-bottom:0 !important;
    margin-left:0 !important;
    padding:0 !important;
    box-sizing:border-box !important;
  }

  .chat-main.mobile-active .zalo-input-area,
  #chatMainContainer.mobile-active .zalo-input-area,
  body.mobile-chat-focus .zalo-input-area{
    margin:0 !important;
    padding-bottom:calc(8px + var(--v2415-safe-bottom)) !important;
    box-sizing:border-box !important;
  }

  /* Keyboard open: VisualViewport gives the only intentional height limit.
     In the normal state the active chat remains edge-to-edge via inset:0. */
  html.keyboard-open .chat-main.mobile-active,
  html.keyboard-open #chatMainContainer.mobile-active,
  html.keyboard-open body.mobile-chat-focus .chat-main,
  html.keyboard-open body.mobile-chat-focus #chatMainContainer{
    top:0 !important;
    right:0 !important;
    bottom:auto !important;
    left:0 !important;
    width:100% !important;
    min-height:var(--app-vh,100dvh) !important;
    height:var(--app-vh,100dvh) !important;
    max-height:var(--app-vh,100dvh) !important;
  }
}

/* V24.15 MOBILE VISUAL POLISH — Zalo-inspired list shell.
 * This is intentionally CSS-only: existing search, tabs, rooms, contacts,
 * presence and click handlers retain their current behavior.
 */
@media (max-width: 768px){
  :root{
    /* These are aliases, never hard-coded accent values. app-core updates
       --primary and --primary-contrast immediately after an admin chooses a
       color, so every mobile highlight below follows that one setting. */
    --v2415-zalo-blue:var(--primary,#087cff);
    --v2415-zalo-blue-deep:color-mix(in srgb,var(--primary,#087cff) 82%,#000);
    --v2415-accent-contrast:var(--primary-contrast,#fff);
    --v2415-accent-ink:color-mix(in srgb,var(--primary,#087cff) 82%,var(--primary-contrast,#fff));
    --v2415-list-bg:#f7f9fc;
    --v2415-list-surface:#ffffff;
    --v2415-list-text:#182433;
    --v2415-list-muted:#7b8999;
    --v2415-list-divider:#e9eef4;
    --v2415-list-selected:color-mix(in srgb,var(--primary,#087cff) 12%,#fff);
    --v2415-accent-pressed:color-mix(in srgb,var(--primary,#087cff) 18%,#fff);
    --v2415-accent-border:color-mix(in srgb,var(--primary,#087cff) 30%,#fff);
    --v2415-accent-control:color-mix(in srgb,var(--primary-contrast,#fff) 16%,transparent);
    --v2415-accent-control-border:color-mix(in srgb,var(--primary-contrast,#fff) 30%,transparent);
  }

  /* The top search area owns the status-bar background, as on a native app. */
  .sidebar-menu{
    background:var(--v2415-list-bg) !important;
    border:0 !important;
  }

  .sidebar-menu .search-box-area,
  .sidebar-menu .search-box-area.v3-search-area{
    min-height:calc(58px + env(safe-area-inset-top, 0px)) !important;
    padding:calc(9px + env(safe-area-inset-top, 0px)) 14px 9px !important;
    gap:10px !important;
    background:linear-gradient(135deg,var(--v2415-zalo-blue),var(--v2415-zalo-blue-deep)) !important;
    border:0 !important;
    box-shadow:0 1px 0 rgba(0,74,169,.18) !important;
  }

  /* V3 made this input icon-only. Restore a recognisable, Zalo-like search
     field on phones while preserving its existing focus/typing behavior. */
  .sidebar-menu .search-box-area.v3-search-area::before,
  .sidebar-menu .search-box-area.v3-search-area.v3-search-expanded::before{
    left:27px !important;
    opacity:1 !important;
    transform:translateY(-50%) !important;
    color:var(--v2415-accent-contrast) !important;
    font-size:22px !important;
  }

  .sidebar-menu .search-box-area.v3-search-area .v3-search-input,
  .sidebar-menu .search-box-area.v3-search-area.v3-search-expanded .v3-search-input,
  .sidebar-menu .search-box-area.v3-search-area .v3-search-input:focus{
    flex:1 1 auto !important;
    width:100% !important;
    min-width:0 !important;
    height:40px !important;
    min-height:40px !important;
    padding:0 14px 0 42px !important;
    border:1px solid var(--v2415-accent-control-border) !important;
    border-radius:12px !important;
    background:var(--v2415-accent-control) !important;
    color:var(--v2415-accent-contrast) !important;
    -webkit-text-fill-color:var(--v2415-accent-contrast) !important;
    font-size:15px !important;
    cursor:text !important;
    box-shadow:none !important;
  }

  .sidebar-menu .search-box-area.v3-search-area .v3-search-input::placeholder,
  .sidebar-menu .search-box-area.v3-search-area.v3-search-expanded .v3-search-input::placeholder{
    color:color-mix(in srgb,var(--v2415-accent-contrast) 78%,transparent) !important;
    opacity:1 !important;
  }

  .sidebar-menu .search-box-area.v3-search-area .v3-search-input:focus{
    background:color-mix(in srgb,var(--primary-contrast,#fff) 24%,transparent) !important;
    border-color:color-mix(in srgb,var(--primary-contrast,#fff) 52%,transparent) !important;
    box-shadow:0 0 0 3px color-mix(in srgb,var(--primary-contrast,#fff) 14%,transparent) !important;
  }

  .sidebar-menu .create-btn{
    width:40px !important;
    min-width:40px !important;
    height:40px !important;
    border:1px solid var(--v2415-accent-control-border) !important;
    border-radius:12px !important;
    background:var(--v2415-accent-control) !important;
    color:var(--v2415-accent-contrast) !important;
    box-shadow:none !important;
    font-size:25px !important;
    line-height:1 !important;
  }

  .sidebar-menu .create-btn:active{
    background:color-mix(in srgb,var(--primary-contrast,#fff) 24%,transparent) !important;
    transform:scale(.96);
  }

  .sidebar-menu .filter-tabs{
    min-height:46px !important;
    padding:6px 16px 0 !important;
    gap:26px !important;
    background:var(--v2415-list-surface) !important;
    border-bottom:1px solid var(--v2415-list-divider) !important;
    color:var(--v2415-list-muted) !important;
  }

  .sidebar-menu .filter-tab{
    position:relative !important;
    min-height:39px !important;
    padding:9px 2px 10px !important;
    color:inherit !important;
    font-size:14px !important;
    font-weight:600 !important;
  }

  .sidebar-menu .filter-tab.active{
    color:var(--v2415-accent-ink) !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    font-weight:750 !important;
  }

  .sidebar-menu .filter-tab.active::after{
    content:"";
    position:absolute;
    right:0;
    bottom:0;
    left:0;
    height:3px;
    border-radius:3px 3px 0 0;
    background:var(--v2415-accent-ink);
  }

  .sidebar-menu .sidebar-scroll-content{
    padding:7px 0 10px !important;
    background:var(--v2415-list-bg) !important;
  }

  .sidebar-menu .section-header{
    padding:13px 16px 6px !important;
    color:#718096 !important;
    font-size:11px !important;
    font-weight:750 !important;
    letter-spacing:.55px !important;
  }

  .sidebar-menu .room-item{
    min-height:68px !important;
    margin:0 8px 1px !important;
    padding:9px 8px !important;
    gap:11px !important;
    border:1px solid transparent !important;
    border-radius:12px !important;
    color:var(--v2415-list-text) !important;
    background:transparent !important;
    transition:background .14s ease,border-color .14s ease,transform .14s ease !important;
  }

  .sidebar-menu .room-item:active{
    transform:scale(.992);
    background:var(--v2415-accent-pressed) !important;
  }

  .sidebar-menu .room-item.active{
    background:var(--v2415-list-selected) !important;
    border-color:var(--v2415-accent-border) !important;
    color:var(--v2415-list-text) !important;
    box-shadow:none !important;
  }

  .sidebar-menu .room-info{min-width:0 !important;}

  .sidebar-menu .room-title{
    color:var(--v2415-list-text) !important;
    font-size:15px !important;
    font-weight:650 !important;
    line-height:1.25 !important;
  }

  .sidebar-menu .room-sub,
  .sidebar-menu .room-item.active .room-sub{
    margin-top:2px !important;
    color:var(--v2415-list-muted) !important;
    font-size:12px !important;
    line-height:1.25 !important;
  }

  .sidebar-menu .room-avt{
    width:46px !important;
    height:46px !important;
    box-shadow:none !important;
  }

  .sidebar-menu .room-avt.is-group,
  .sidebar-menu .group-grid-avt{
    border-radius:13px !important;
    background:#edf2f7 !important;
  }

  .sidebar-menu .room-avt.is-private{
    background:linear-gradient(135deg,color-mix(in srgb,var(--primary,#087cff) 72%,#fff),var(--v2415-zalo-blue-deep)) !important;
    color:var(--v2415-accent-contrast) !important;
  }

  .sidebar-menu .group-grid-cell{background:#8798aa !important;}
  .sidebar-menu .group-grid-cell.more-count{background:rgba(15,35,55,.76) !important;}
  .sidebar-menu .unread-badge{background:var(--v2415-zalo-blue) !important;color:var(--v2415-accent-contrast) !important;box-shadow:none !important;}
  .sidebar-menu .presence-dot{border-color:var(--v2415-list-bg) !important;}

  /* A quiet, white bottom tab bar makes the selected blue icon the focus. */
  .sidebar-icon{
    background:var(--v2415-list-surface) !important;
    border-top:1px solid var(--v2415-list-divider) !important;
    box-shadow:0 -2px 12px rgba(15,23,42,.06) !important;
  }

  .sidebar-icon .nav-icon,
  .sidebar-icon .icon-btn{
    color:#7a8796 !important;
  }

  .sidebar-icon .nav-icon::after,
  .sidebar-icon .icon-btn::after{
    color:currentColor !important;
    font-weight:650 !important;
  }

  .sidebar-icon .nav-icon.active,
  .sidebar-icon #adminPanelBtn{
    color:var(--v2415-accent-ink) !important;
  }

  .sidebar-icon .nav-icon.active::before{
    display:none !important;
  }

  .sidebar-icon .nav-icon.active svg{
    filter:none !important;
  }

  /* Chat keeps a clean canvas. Outgoing bubbles and the composer share the
     selected global accent so an accent change cannot leave two blue tones. */
  .chat-main,
  .chat-main .chat-window{background:#f4f7fb !important;}
  .chat-main .chat-header{background:#fff !important;}
  .chat-main .chat-input-zone,
  .chat-main .zalo-toolbar,
  .chat-main .zalo-input-area{background:var(--primary,#087cff) !important;}
  .chat-main .chat-header{border-bottom-color:#e7edf4 !important;}
  .chat-main .chat-input-zone{border-top-color:color-mix(in srgb,var(--primary-contrast,#fff) 35%,transparent) !important;}
  .chat-main .zalo-toolbar{border-bottom-color:color-mix(in srgb,var(--primary-contrast,#fff) 24%,transparent) !important;}
  .chat-main .z-tool-icon{color:var(--primary-contrast,#fff) !important;}
  .chat-main .zalo-input-box{
    background:var(--primary,#087cff) !important;
    border-color:color-mix(in srgb,var(--primary-contrast,#fff) 48%,transparent) !important;
    box-shadow:none !important;
  }
  .chat-main .chat-input,
  .chat-main .chat-input:focus{
    color:var(--primary-contrast,#fff) !important;
    -webkit-text-fill-color:var(--primary-contrast,#fff) !important;
    caret-color:var(--primary-contrast,#fff) !important;
  }
  .chat-main .chat-input::placeholder{color:color-mix(in srgb,var(--primary-contrast,#fff) 78%,transparent) !important;opacity:1 !important;}
  .chat-main .msg-row.me .msg-bubble{background:var(--primary,#087cff) !important;color:var(--primary-contrast,#fff) !important;}

  /* This file loads after the previous focus rule. Re-declare the rainbow
     here so the normal composer background can never hide it. */
  .chat-main .zalo-input-box.v2415-rainbow-input,
  .chat-main .zalo-input-box:focus-within{
    position:relative !important;
    border:2px solid transparent !important;
    border-radius:22px !important;
    background:
      linear-gradient(var(--primary,#087cff),var(--primary,#087cff)) padding-box,
      linear-gradient(90deg,#ff3b30,#ff9500,#ffcc00,#34c759,#00c7be,#007aff,#5856d6,#af52de,#ff2d55) border-box !important;
    background-clip:padding-box,border-box !important;
    box-shadow:0 0 10px color-mix(in srgb,var(--primary,#087cff) 28%,transparent) !important;
  }
  .chat-main .collapse-circle-btn{color:var(--v2415-accent-ink) !important;background:var(--v2415-list-selected) !important;border-color:var(--v2415-accent-border) !important;}
  .chat-main .send-submit-btn{background:var(--v2415-zalo-blue) !important;color:var(--v2415-accent-contrast) !important;box-shadow:none !important;}

  :root[data-theme="dark"]{
    --v2415-list-bg:#151b22;
    --v2415-list-surface:#1b232d;
    --v2415-list-text:#f3f7fb;
    --v2415-list-muted:#94a1b1;
    --v2415-list-divider:#2b3744;
    --v2415-list-selected:color-mix(in srgb,var(--primary,#087cff) 21%,#1b232d);
    --v2415-accent-pressed:color-mix(in srgb,var(--primary,#087cff) 29%,#1b232d);
    --v2415-accent-border:color-mix(in srgb,var(--primary,#087cff) 42%,#2b3744);
  }

  :root[data-theme="dark"] .sidebar-menu .search-box-area,
  :root[data-theme="dark"] .sidebar-menu .search-box-area.v3-search-area{
    background:linear-gradient(135deg,color-mix(in srgb,var(--primary,#087cff) 78%,#fff),var(--v2415-zalo-blue-deep)) !important;
    box-shadow:0 1px 0 rgba(0,0,0,.28) !important;
  }

  :root[data-theme="dark"] .sidebar-menu .room-item:active{
    background:var(--v2415-accent-pressed) !important;
  }

  :root[data-theme="dark"] .sidebar-menu .room-item.active{
    background:var(--v2415-list-selected) !important;
    border-color:var(--v2415-accent-border) !important;
    color:var(--v2415-list-text) !important;
  }

  :root[data-theme="dark"] .sidebar-menu .room-title,
  :root[data-theme="dark"] .sidebar-menu .room-item.active .room-title{
    color:#f3f7fb !important;
  }

  :root[data-theme="dark"] .sidebar-menu .room-sub,
  :root[data-theme="dark"] .sidebar-menu .room-item.active .room-sub,
  :root[data-theme="dark"] .sidebar-menu .section-header{
    color:#98a7b8 !important;
  }

  :root[data-theme="dark"] .sidebar-menu .room-avt.is-group,
  :root[data-theme="dark"] .sidebar-menu .group-grid-avt{
    background:#263442 !important;
  }

  :root[data-theme="dark"] .sidebar-menu .room-avt.is-private{
    background:linear-gradient(135deg,color-mix(in srgb,var(--primary,#087cff) 72%,#fff),var(--v2415-zalo-blue-deep)) !important;
  }

  :root[data-theme="dark"] .sidebar-menu .presence-dot{border-color:var(--v2415-list-bg) !important;}

  :root[data-theme="dark"] .sidebar-icon{
    background:#1b232d !important;
    border-top-color:#2b3744 !important;
    box-shadow:0 -2px 12px rgba(0,0,0,.20) !important;
  }

  :root[data-theme="dark"] .sidebar-icon .nav-icon,
  :root[data-theme="dark"] .sidebar-icon .icon-btn{
    color:#9ba9b8 !important;
  }

  :root[data-theme="dark"] .sidebar-icon .nav-icon.active,
  :root[data-theme="dark"] .sidebar-icon #adminPanelBtn{
    color:var(--v2415-accent-ink) !important;
  }

  :root[data-theme="dark"] .chat-main,
  :root[data-theme="dark"] .chat-main .chat-window{background:#141a20 !important;}
  :root[data-theme="dark"] .chat-main .chat-header{background:#1b232d !important;border-color:#2b3744 !important;}
  :root[data-theme="dark"] .chat-main .collapse-circle-btn{color:var(--v2415-accent-ink) !important;background:var(--v2415-list-selected) !important;border-color:var(--v2415-accent-border) !important;}
}