/* ============================================================
   RESPONSIVE FINAL PASS
   - One mobile shell boundary
   - Admin center becomes a true mobile screen
   - iPhone safe-area aware
   - Tablet/PC retain centered admin workspace
   ============================================================ */

:root{
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* Labels for mobile navigation are rendered by the current language.
   This avoids hard-coded Vietnamese pseudo-elements. */
@media (max-width: 767px){
  .sidebar-icon .avatar::after,
  .sidebar-icon .nav-icon::after,
  .sidebar-icon .icon-btn::after{
    content: attr(data-mobile-label) !important;
  }
}

/* =========================
   MOBILE: 0-767px
   ========================= */
@media (max-width: 767px){
  html, body{
    width:100% !important;
    max-width:100% !important;
    overflow:hidden !important;
  }

  body{
    height:var(--app-vh, 100dvh) !important;
    min-height:var(--app-vh, 100dvh) !important;
    max-height:var(--app-vh, 100dvh) !important;
    padding:0 !important;
  }

  /* Main shell: exactly one bottom-nav boundary. */
  .sidebar-menu,
  .chat-main{
    top:var(--safe-top) !important;
    bottom:var(--mobile-nav-height) !important;
  }

  .sidebar-menu{
    height:auto !important;
    max-height:none !important;
    padding-bottom:0 !important;
  }

  .sidebar-scroll-content{
    padding-bottom:10px !important;
  }

  .search-box-area{
    padding-top:max(9px, var(--safe-top)) !important;
  }

  /* Bottom navigation is balanced and uses the whole width. */
  .sidebar-icon{
    height:var(--mobile-nav-height) !important;
    min-height:var(--mobile-nav-height) !important;
    max-height:var(--mobile-nav-height) !important;
    padding:0 6px var(--safe-bottom) !important;
    box-sizing:border-box !important;
  }

  .sidebar-icon .avatar,
  .sidebar-icon .nav-icon,
  .sidebar-icon .icon-btn{
    height:68px !important;
    min-height:68px !important;
  }

  .sidebar-icon .avatar::before,
  .sidebar-icon .avatar img{
    top:5px !important;
    width:42px !important;
    height:42px !important;
  }

  .sidebar-icon .nav-icon svg,
  .sidebar-icon .icon-btn svg{
    width:27px !important;
    height:27px !important;
    margin-bottom:5px !important;
  }

  .sidebar-icon .avatar::after,
  .sidebar-icon .nav-icon::after,
  .sidebar-icon .icon-btn::after{
    bottom:4px !important;
    font-size:9px !important;
  }

  /* =========================
     ADMIN CENTER — MOBILE
     ========================= */
  body.admin-open .sidebar-icon{
    display:none !important;
  }

  body.admin-open .sidebar-menu,
  body.admin-open .chat-main,
  body.admin-open .right-info-panel{
    visibility:hidden !important;
    pointer-events:none !important;
  }

  .admin-modal{
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    height:100dvh !important;
    max-height:none !important;
    padding:0 !important;
    margin:0 !important;
    align-items:stretch !important;
    justify-content:stretch !important;
    background:var(--bg-main) !important;
    z-index:10000 !important;
  }

  .admin-modal-content{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    top:var(--safe-top) !important;
    bottom:var(--safe-bottom) !important;
    width:100% !important;
    height:auto !important;
    max-width:none !important;
    max-height:none !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    overflow:hidden !important;
  }

  .admin-modal-header{
    height:52px !important;
    min-height:52px !important;
    padding:0 12px !important;
    font-size:14px !important;
    position:relative !important;
    flex:0 0 52px !important;
  }

  .admin-modal-header > span:first-child{
    max-width:calc(100% - 48px) !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  .admin-modal-header > span:last-child{
    width:38px !important;
    height:38px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:12px !important;
    background:var(--hover-bg) !important;
    font-size:27px !important;
    line-height:1 !important;
    flex:0 0 38px !important;
    cursor:pointer !important;
  }

  .admin-modal-body{
    padding:8px !important;
    gap:8px !important;
    overflow:hidden !important;
    min-height:0 !important;
    height:auto !important;
  }

  .admin-tabs{
    flex:0 0 auto !important;
    display:flex !important;
    flex-wrap:nowrap !important;
    gap:6px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    padding:0 0 6px !important;
    border-bottom:1px solid var(--border-color) !important;
    scrollbar-width:none !important;
  }
  .admin-tabs::-webkit-scrollbar{display:none;}

  .atab-btn{
    flex:0 0 auto !important;
    min-height:38px !important;
    padding:8px 11px !important;
    border-radius:10px !important;
    font-size:11px !important;
    white-space:nowrap !important;
  }

  .atab-pane{
    flex:1 1 auto !important;
    min-height:0 !important;
    overflow:hidden !important;
    gap:8px !important;
  }

  .panel-section-box{
    padding:9px !important;
    border-radius:10px !important;
  }

  /* Users / Groups / Login logs: compact mobile cards + horizontal table scroll. */
  .table-responsive{
    width:100% !important;
    max-width:100% !important;
    min-height:0 !important;
    overflow:auto !important;
    -webkit-overflow-scrolling:touch !important;
    border-radius:10px !important;
  }

  .admin-table{
    min-width:620px !important;
    font-size:11px !important;
  }

  .admin-table th,
  .admin-table td{
    padding:8px 9px !important;
  }

  #usersPane .panel-section-box > div[style*="display:flex"],
  #roomsPane .panel-section-box > div[style*="display:flex"],
  #logsPane .panel-section-box > div[style*="display:flex"]{
    gap:6px !important;
  }

  #usersPane .add-input,
  #roomsPane .add-input,
  #logsPane .add-input{
    min-height:40px !important;
    font-size:14px !important;
  }

  .add-btn{
    min-height:40px !important;
    padding:8px 12px !important;
    border-radius:9px !important;
  }

  /* Message management: real mobile two-level layout. */
  .msg-mgmt-container{
    flex:1 1 auto !important;
    min-height:0 !important;
    height:auto !important;
    width:100% !important;
    flex-direction:column !important;
    border-radius:10px !important;
  }

  .msg-mgmt-sidebar{
    flex:0 0 74px !important;
    width:100% !important;
    height:74px !important;
    max-height:74px !important;
    border-right:0 !important;
    border-bottom:1px solid var(--border-color) !important;
    display:flex !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
  }

  .msg-mgmt-room-item{
    min-width:145px !important;
    max-width:190px !important;
    padding:9px 11px !important;
    border-right:1px solid var(--border-color) !important;
    border-bottom:0 !important;
    flex:0 0 auto !important;
  }

  .msg-mgmt-content{
    flex:1 1 auto !important;
    min-height:0 !important;
    overflow:hidden !important;
  }

  .msg-mgmt-content > div:first-child{
    flex:0 0 auto !important;
    padding:8px !important;
    gap:7px !important;
    flex-wrap:wrap !important;
  }

  .msg-mgmt-content #admMsgSearchInput{
    width:100% !important;
    min-height:40px !important;
    font-size:14px !important;
  }

  .msg-mgmt-content .table-responsive{
    flex:1 1 auto !important;
    min-height:0 !important;
  }

  /* Settings/account modals also stay inside the mobile viewport. */
  .account-modal-backdrop{
    padding:var(--safe-top) 8px var(--safe-bottom) !important;
    align-items:stretch !important;
  }

  .account-modal{
    width:100% !important;
    max-width:100% !important;
    max-height:none !important;
    height:auto !important;
    margin:0 !important;
    border-radius:16px !important;
    align-self:center !important;
  }

  .account-modal-body{
    max-height:calc(var(--app-vh, 100dvh) - 120px) !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }

  .sub-modal{
    padding:var(--safe-top) 8px var(--safe-bottom) !important;
  }
}

/* =========================
   TABLET: 768-1023px
   ========================= */
@media (min-width:768px) and (max-width:1023px){
  .admin-modal{
    padding:12px !important;
  }

  .admin-modal-content{
    width:min(96vw, 980px) !important;
    height:min(90dvh, 860px) !important;
    max-height:90dvh !important;
  }

  .admin-tabs{
    overflow-x:auto !important;
    flex-wrap:nowrap !important;
  }

  .atab-btn{white-space:nowrap !important;}

  .msg-mgmt-container{
    height:min(62dvh, 560px) !important;
  }
}

/* =========================
   PC: >=1024px
   ========================= */
@media (min-width:1024px){
  .admin-modal-content{
    width:min(1100px, calc(100vw - 40px)) !important;
    height:min(85vh, 900px) !important;
  }
}

/* Accessibility / touch */
@media (max-width:767px){
  button, .nav-icon, .icon-btn, .create-btn, .atab-btn{
    -webkit-tap-highlight-color:transparent;
  }
}


/* V5 visual system: warm orange accent + larger mobile admin/person control. */
:root { --accent:var(--primary); --accent-strong:color-mix(in srgb, var(--primary) 85%, #000); --accent-soft:color-mix(in srgb, var(--primary) .12, transparent); }
@media (max-width:767px){
  .sidebar-icon .nav-icon svg, .sidebar-icon .icon-btn svg { width:26px !important; height:26px !important; }
  .sidebar-icon #adminPanelBtn svg { width:27px !important; height:27px !important; }
  .sidebar-icon #adminPanelBtn { color:var(--accent-strong) !important; }
  .sidebar-icon .nav-icon.active::before { background:var(--accent-soft) !important; }
}


/* ============================================================
   V7.7 MOBILE-ONLY STABILITY PATCH
   Scope: mobile layout only. No chat/data/function changes.
   ============================================================ */
@media (max-width:767px){
  /* Keep the app below the iPhone/Android safe area instead of letting the
     chat/list shell slide underneath the status bar when a room is opened. */
  .sidebar-menu{
    top:env(safe-area-inset-top, 0px) !important;
    bottom:var(--mobile-nav-height) !important;
    height:auto !important;
    max-height:none !important;
  }

  .sidebar-menu .search-box-area{
    padding-top:10px !important;
  }

  /* Chat stays full-screen between the safe top area and bottom navigation.
     The back button remains inside the tappable header so the user can return
     to Search / + without the header being pushed under the status bar. */
  .chat-main{
    top:env(safe-area-inset-top, 0px) !important;
    bottom:var(--mobile-nav-height) !important;
    height:auto !important;
    max-height:none !important;
  }

  .chat-header{
    flex:0 0 60px !important;
    height:60px !important;
    min-height:60px !important;
    padding:0 10px !important;
    box-sizing:border-box !important;
  }

  #mobileBackBtn{
    display:flex !important;
    width:38px !important;
    min-width:38px !important;
    height:38px !important;
    min-height:38px !important;
    margin:0 !important;
    touch-action:manipulation !important;
  }

  .chat-header-left{
    min-width:0 !important;
    flex:1 1 auto !important;
    max-width:calc(100% - 44px) !important;
  }

  .chat-header-right{
    flex:0 0 auto !important;
  }

  /* Never let the keyboard/viewport resize push the composer or header out
     of the visible mobile shell. */
  .chat-window{
    min-height:0 !important;
    height:auto !important;
  }

  .chat-input-zone{
    flex:0 0 auto !important;
    min-height:0 !important;
  }
}

/* V7.9 - requested chat readability only. No layout/behavior changes. */
@media (min-width: 768px) {
  .msg-bubble { font-size: 16px !important; line-height: 1.5 !important; }
  .msg-sender { font-size: 14px !important; }
  .msg-time { font-size: 12px !important; }
}
@media (max-width: 767px) {
  .msg-bubble { font-size: 16px !important; line-height: 1.5 !important; }
  .msg-sender { font-size: 14px !important; }
  .msg-time { font-size: 12px !important; }
}
.unread-focus-message { outline: 2px solid color-mix(in srgb, var(--primary) .55, transparent); outline-offset: 3px; border-radius: 12px; }