@media (max-width: 700px) {
            .msg-actions {
                position: absolute;
                top: auto;
                bottom: calc(100% + 6px);
                transform: none;
            }
            .msg-row.other .msg-actions { left: 0; }
            .msg-row.me .msg-actions { right: 0; }
            .msg-row:hover .msg-actions { opacity: 0; visibility: hidden; pointer-events: none; }
            .msg-row.msg-active .msg-actions { opacity: 1; visibility: visible; pointer-events: auto; }
        }


        @media (max-width: 768px) {
            /* Mobile app-like viewport: keep the chat composer above the bottom navigation.
               Do not use position:fixed on html/body because it breaks iOS/Android visual viewport + keyboard resizing. */
            html, body {
                width: 100%;
                height: 100%;
                min-height: 100%;
                overflow: hidden;
                overscroll-behavior: none;
            }
            body {
                flex-direction: column;
                height: 100dvh;
                min-height: 100dvh;
                padding-bottom: 0;
            }
            
            .sidebar-icon {
                width: 100vw !important;
                height: 60px !important;
                flex-direction: row !important;
                justify-content: space-around !important;
                padding: 0 10px !important;
                border-right: none !important;
                border-top: 1px solid var(--border-color);
                background: var(--bg-icon-bar);
                position: fixed;
                bottom: 0;
                left: 0;
                z-index: 100;
                box-shadow: 0 -4px 15px rgba(0,0,0,0.3);
            }
            .sidebar-top { flex-direction: row !important; gap: 20px !important; align-items: center !important; }
            .sidebar-bottom { flex-direction: row !important; gap: 20px !important; align-items: center !important; }
            .nav-icons { flex-direction: row !important; gap: 20px !important; }

            .settings-popup-menu {
                bottom: 65px !important;
                left: auto !important;
                right: 10px !important;
                top: auto !important;
            }

            .sidebar-menu {
                position: absolute;
                top: 0;
                left: 0;
                width: 100vw !important;
                height: calc(100dvh - 60px) !important;
                bottom: 60px;
                z-index: 90;
                background: var(--bg-sidebar);
                transform: translateX(0);
                transition: transform 0.25s ease;
            }
            .sidebar-menu.collapsed { transform: translateX(-100%); }

            .chat-main {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 60px;
                width: 100vw !important;
                height: auto !important;
                min-height: 0 !important;
                z-index: 95;
                background: var(--bg-main);
                display: flex;
                flex-direction: column;
                transform: translateX(100%);
                transition: transform 0.25s ease;
            }
            .chat-main.mobile-active { transform: translateX(0) !important; }

            #mobileBackBtn { display: flex !important; }

            .right-info-panel {
                position: absolute;
                right: 0;
                top: 0;
                bottom: 60px;
                height: auto !important;
                width: 100vw !important;
                z-index: 110;
            }
            .msg-search-wrapper { display: none; }
            .admin-modal-content {
                width: 100vw !important;
                height: 100vh !important;
                max-width: 100vw !important;
                max-height: 100vh !important;
                border-radius: 0 !important;
            }
            .msg-actions { opacity: 1 !important; }
        }

@media(max-width:700px){
  .mention-suggestions{left:8px;bottom:84px;width:calc(100% - 16px);max-height:240px;border-radius:12px}
}

@media (max-width: 768px) {
    html, body {
        width: 100%;
        height: 100%;
        min-height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
        overscroll-behavior: none;
        -webkit-user-select: none;
        user-select: none;
    }
    body {
        min-height: 100svh;
        height: 100svh;
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }
    .chat-main, .sidebar-menu, .right-info-panel {
        min-height: 0 !important;
    }
    .sidebar-icon {
        height: calc(60px + env(safe-area-inset-bottom)) !important;
        padding-bottom: env(safe-area-inset-bottom) !important;
    }
    .chat-main {
        bottom: calc(60px + env(safe-area-inset-bottom)) !important;
    }
    .right-info-panel {
        bottom: calc(60px + env(safe-area-inset-bottom)) !important;
    }
    .chat-window {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    #messageInput {
        -webkit-user-select: text;
        user-select: text;
    }
    .emoji-cell {
        font-size: 22px !important;
        min-width: 36px;
        min-height: 36px;
    }
    .msg-bubble.emoji-only {
        font-size: 40px !important;
        line-height: 1.05 !important;
    }
    .sticker-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        max-height: min(42vh, 320px) !important;
    }
    .sticker-item {
        height: 82px !important;
    }
}

@media (max-width: 600px) {
    .message-info-modal {
        align-items: flex-end;
    }
    .message-info-card {
        width: 100%;
        max-height: 78vh;
        border-radius: 20px 20px 0 0;
        padding-bottom: calc(14px + env(safe-area-inset-bottom));
    }
}
/* Mobile <= 767px - app/PWA layout */
@media (max-width:767px){
  html,body{width:100%;max-width:100%;overflow:hidden;}
  body{height:100dvh;height:calc(var(--app-vh, 100dvh));}
  .chat-window{min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;}
  .chat-input-zone{padding-bottom:env(safe-area-inset-bottom,0px);}
}


/* V5.1 responsive coverage: phone */
@media (max-width:767px){
  .chat-header{height:54px!important;padding:0 8px!important;gap:6px!important}.chat-header-left{max-width:calc(100% - 44px)}.chat-header-name{font-size:14px}.chat-header-status{font-size:10px}
  .chat-window{padding:10px 8px!important;gap:10px}.msg-row{max-width:92%!important}.msg-bubble{padding:9px 11px;font-size:13px}.msg-bubble img{width:min(240px,72vw)}
  .chat-input-zone{width:100%;min-width:0}.chat-input-main{padding:7px!important;gap:5px!important}.message-input-wrapper{min-width:0}.message-input{font-size:16px!important}
  .right-info-panel.show{display:flex!important;position:fixed!important;inset:0 0 calc(60px + env(safe-area-inset-bottom,0px)) 0!important;width:100%!important;height:auto!important;z-index:1200!important}
  .admin-modal{padding:0!important;align-items:stretch!important}.admin-modal-content{width:100%!important;height:100dvh!important;max-height:100dvh!important;border:0!important;border-radius:0!important}.admin-modal-body{padding:8px!important;gap:8px!important}.admin-tabs{display:flex!important;overflow-x:auto!important;flex-wrap:nowrap!important;padding-bottom:3px}.atab-btn{flex:0 0 auto;white-space:nowrap;padding:8px 10px!important;font-size:11px!important}
  .panel-section-box{padding:10px!important}.table-responsive{overflow:auto!important;-webkit-overflow-scrolling:touch}.admin-table{min-width:680px}.msg-mgmt-container{height:calc(100dvh - 125px)!important;flex-direction:column!important}.msg-mgmt-sidebar{width:100%!important;height:96px!important;display:flex!important;overflow-x:auto!important;overflow-y:hidden!important;border-right:0!important;border-bottom:1px solid var(--border-color)}.msg-mgmt-room-item{min-width:150px;max-width:200px;border-bottom:0!important;border-right:1px solid var(--border-color)}.msg-mgmt-content>div:first-child{padding:8px!important;gap:6px!important;flex-wrap:wrap!important}.msg-mgmt-content #admMsgSearchInput{width:100%!important}
  .account-modal{width:calc(100% - 16px)!important;max-height:92dvh!important}.account-modal-body{padding:12px!important}.account-grid{grid-template-columns:1fr!important}
  .sub-modal{padding:8px!important}.sub-modal-box{width:100%!important;max-width:100%!important}
}


/* ============================================================
   MOBILE APP SHELL V2 - iPhone / Android
   Final layout pass: larger bottom navigation, equal spacing,
   safe-area aware viewport, no dead space below navigation.
   ============================================================ */
@media (max-width: 767px) {
  :root {
    --mobile-nav-content: 68px;
    --mobile-nav-height: calc(68px + env(safe-area-inset-bottom, 0px));
  }

  html,
  body {
    width: 100%;
    max-width: 100%;
    height: var(--app-vh, 100dvh) !important;
    min-height: var(--app-vh, 100dvh) !important;
    max-height: var(--app-vh, 100dvh) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  body {
    position: relative;
    display: block !important;
    background: var(--bg-main);
  }

  /* Main list occupies exactly the viewport above the bottom bar. */
  .sidebar-menu {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: var(--mobile-nav-height) !important;
    width: 100vw !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: hidden !important;
    z-index: 90;
  }

  .sidebar-scroll-content {
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 12px !important;
  }

  /* Search area is comfortably tappable on phones. */
  .search-box-area {
    min-height: 58px !important;
    padding: 10px 14px !important;
    gap: 8px !important;
    padding-top: max(10px, env(safe-area-inset-top, 0px)) !important;
  }

  .search-input {
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 13px !important;
    border-radius: 12px !important;
    font-size: 15px !important;
  }

  .create-btn {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 12px !important;
    font-size: 24px !important;
    line-height: 1 !important;
    box-shadow: 0 3px 10px color-mix(in srgb, var(--primary) .22, transparent);
  }

  .filter-tabs {
    min-height: 44px !important;
    padding: 8px 16px 7px !important;
    gap: 22px !important;
  }

  /* Bottom navigation: Zalo-like, larger icons and equal touch targets. */
  .sidebar-icon {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100vw !important;
    height: var(--mobile-nav-height) !important;
    min-height: var(--mobile-nav-height) !important;
    max-height: var(--mobile-nav-height) !important;
    padding: 0 8px env(safe-area-inset-bottom, 0px) !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    justify-content: space-between !important;
    gap: 0 !important;
    background: var(--bg-icon-bar) !important;
    border: 0 !important;
    border-top: 1px solid var(--border-color) !important;
    box-shadow: 0 -3px 14px rgba(15,23,42,.10) !important;
    z-index: 2000 !important;
  }

  .sidebar-top,
  .sidebar-bottom {
    display: contents !important;
  }

  .nav-icons {
    display: contents !important;
  }

  .sidebar-icon .avatar,
  .sidebar-icon .nav-icon,
  .sidebar-icon .icon-btn {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: var(--mobile-nav-content) !important;
    min-height: var(--mobile-nav-content) !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 7px 4px 5px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    background: transparent !important;
    color: var(--text-sub) !important;
    box-shadow: none !important;
  }

  /* Avatar becomes a larger, balanced profile button. */
  .sidebar-icon .avatar {
    width: auto !important;
    height: var(--mobile-nav-content) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  .sidebar-icon .avatar::before {
    content: "";
    width: 40px;
    height: 40px;
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-hover, var(--primary)));
    z-index: 0;
    opacity: .98;
  }

  .sidebar-icon .avatar img {
    position: absolute !important;
    top: 7px !important;
    left: 50% !important;
    width: 40px !important;
    height: 40px !important;
    transform: translateX(-50%) !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    z-index: 1 !important;
  }

  .sidebar-icon .avatar {
    z-index: 0 !important;
  }

  .sidebar-icon .avatar::after {
    content: "Cá nhân";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 5px;
    font-size: 9px;
    line-height: 12px;
    font-weight: 600;
    color: var(--text-sub);
    pointer-events: none;
    z-index: 2;
  }

  .sidebar-icon .nav-icon {
    cursor: pointer;
  }

  .sidebar-icon .nav-icon svg,
  .sidebar-icon .icon-btn svg {
    width: 25px !important;
    height: 25px !important;
    margin: 0 0 6px !important;
    flex: 0 0 auto;
  }

  .sidebar-icon .nav-icon::after,
  .sidebar-icon .icon-btn::after {
    font-size: 9px;
    line-height: 12px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--text-sub);
    pointer-events: none;
  }

  .sidebar-icon .nav-icons > .nav-icon:nth-child(1)::after {
    content: "Tin nhắn";
  }

  .sidebar-icon .nav-icons > .nav-icon:nth-child(2)::after {
    content: "Danh bạ";
  }

  .sidebar-icon #adminPanelBtn::after {
    content: "Quản trị";
  }

  .sidebar-icon .icon-btn::after {
    content: "Cài đặt";
  }

  .sidebar-icon .nav-icon.active {
    color: var(--active-bg) !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .sidebar-icon .nav-icon.active::before {
    content: "";
    position: absolute;
    top: 6px;
    width: 50px;
    height: 40px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--primary) .10, transparent);
    z-index: -1;
  }

  .sidebar-icon .nav-icon.active svg {
    filter: drop-shadow(0 2px 5px color-mix(in srgb, var(--primary) .18, transparent));
  }

  /* Admin button remains hidden unless the application enables it. */
  .sidebar-icon #adminPanelBtn[style*="display:none"] {
    display: none !important;
  }

  .settings-popup-menu {
    position: fixed !important;
    left: auto !important;
    right: 10px !important;
    bottom: calc(var(--mobile-nav-height) + 8px) !important;
    width: min(260px, calc(100vw - 20px)) !important;
    max-height: calc(var(--app-vh, 100dvh) - var(--mobile-nav-height) - 20px) !important;
    overflow-y: auto !important;
    z-index: 2500 !important;
  }

  /* Chat page uses the exact same bottom navigation boundary. */
  .chat-main {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: var(--mobile-nav-height) !important;
    width: 100vw !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  .right-info-panel {
    bottom: var(--mobile-nav-height) !important;
  }

  /* Keep content clear of the navigation without creating a second blank area. */
  .chat-window {
    min-height: 0 !important;
  }

  .chat-input-zone {
    padding-bottom: max(6px, env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Very small phones: retain large enough touch targets, reduce labels only. */
@media (max-width: 360px) {
  .sidebar-icon {
    padding-left: 3px !important;
    padding-right: 3px !important;
  }

  .sidebar-icon .nav-icon svg,
  .sidebar-icon .icon-btn svg {
    width: 24px !important;
    height: 24px !important;
  }

  .sidebar-icon .avatar::before {
    width: 38px;
    height: 38px;
  }

  .sidebar-icon .avatar::after,
  .sidebar-icon .nav-icon::after,
  .sidebar-icon .icon-btn::after {
    font-size: 8px;
  }
}