/* ========================================
   MOBILE RESPONSIVE PRO — Nexus ZG  
   Prevents ALL overlapping on mobile
   
   ACTUAL HTML IDs:
     #app-mount    → main grid container
     #server-list  → left rail (guild icons)
     #sidebar      → channel list + user panel
     #chat-area    → center (header + messages + composer)
     #member-list  → right panel (members)
     #chat-header  → header bar
     #composer-area→ message input area
     #user-panel   → bottom bar in sidebar
   ======================================== */

/* ==========================================
   0) DESKTOP: Hide mobile-only elements
   ========================================== */
@media (min-width: 1025px) {

    .mobile-menu-btn,
    .mobile-members-btn,
    .mobile-backdrop,
    .mobile-only {
        display: none !important;
    }
}

/* ==========================================
   1) MOBILE LAYOUT (≤1024px) — Core resets
   ========================================== */
@media (max-width: 1024px) {

    /* ——— Full-viewport single-column grid ——— */
    #app-mount {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        grid-template-rows: none !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        overflow: hidden !important;
    }

    /* ——— Chat Area: fills entire viewport, column flex ——— */
    #chat-area {
        display: flex !important;
        flex-direction: column !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        min-height: 0 !important;
        flex: 1 !important;
        overflow: hidden !important;
        position: relative !important;
    }

    /* ——— Chat Header: fixed height, no overlap ——— */
    #chat-header {
        flex-shrink: 0 !important;
        height: 56px !important;
        min-height: 56px !important;
        padding: 0 60px !important;
        display: flex !important;
        align-items: center !important;
        position: relative !important;
        z-index: 100 !important;
        box-sizing: border-box !important;
    }

    #chat-header .header-left {
        overflow: hidden !important;
        flex: 1 !important;
        min-width: 0 !important;
    }

    #chat-header .header-left #channel-name {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    #chat-header .mobile-toggle {
        display: none !important;
    }

    /* ——— Messages: flexible, scrollable, fills remaining space ——— */
    #messages {
        flex: 1 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        min-height: 0 !important;
        padding: 8px 12px !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* ——— Composer: stays at bottom, never overlaps messages ——— */
    #composer-area {
        flex-shrink: 0 !important;
        position: relative !important;
        z-index: 50 !important;
        padding: 8px 12px !important;
        padding-bottom: 12px !important;
        box-sizing: border-box !important;
        min-height: auto !important;
    }

    #composer-inner {
        height: auto !important;
        min-height: 44px !important;
        max-height: 120px !important;
        border-radius: 22px !important;
        padding: 0 12px !important;
    }

    #msg-input {
        font-size: 16px !important;
        /* Prevents iOS zoom on focus */
    }

    /* ——— Server List: off-screen left, overlay ——— */
    #server-list {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 72px !important;
        height: 100vh !important;
        height: 100dvh !important;
        z-index: 960 !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        background: rgba(10, 10, 12, 0.97) !important;
        backdrop-filter: blur(20px) !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* ——— Sidebar: off-screen left, overlay ——— */
    #sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 72px !important;
        width: calc(100vw - 72px) !important;
        max-width: 280px !important;
        height: 100vh !important;
        height: 100dvh !important;
        z-index: 955 !important;
        transform: translateX(calc(-100% - 72px)) !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        background: rgba(18, 20, 28, 0.98) !important;
        backdrop-filter: blur(20px) !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    /* Sidebar inner layout — prevent overlap */
    #sidebar #sidebar-header {
        flex-shrink: 0 !important;
    }

    #sidebar #channel-list {
        flex: 1 !important;
        overflow-y: auto !important;
        min-height: 0 !important;
        -webkit-overflow-scrolling: touch !important;
    }

    #sidebar #user-panel {
        flex-shrink: 0 !important;
        position: relative !important;
        z-index: 10 !important;
    }

    /* ——— Member List: off-screen right, overlay ——— */
    #member-list {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        width: 85vw !important;
        max-width: 320px !important;
        height: 100vh !important;
        height: 100dvh !important;
        z-index: 960 !important;
        transform: translateX(100%) !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        background: rgba(14, 18, 28, 0.98) !important;
        backdrop-filter: blur(20px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        display: block !important;
        padding-top: 16px !important;
    }

    /* ——— OPEN states ——— */
    body.mobile-sidebar-open #server-list {
        transform: translateX(0) !important;
    }

    body.mobile-sidebar-open #sidebar {
        transform: translateX(0) !important;
    }

    body.mobile-members-open #member-list {
        transform: translateX(0) !important;
    }

    /* ——— Hide buttons when panels are open ——— */
    body.mobile-sidebar-open .mobile-menu-btn {
        opacity: 0 !important;
        pointer-events: none !important;
        transform: scale(0.5) !important;
    }

    body.mobile-members-open .mobile-members-btn {
        opacity: 0 !important;
        pointer-events: none !important;
        transform: scale(0.5) !important;
    }

    /* ——— ☰ Hamburger Button ——— */
    .mobile-menu-btn {
        display: flex !important;
        position: fixed !important;
        top: 8px !important;
        left: 8px !important;
        width: 40px !important;
        height: 40px !important;
        background: linear-gradient(145deg, rgba(14, 24, 44, 0.96), rgba(8, 14, 30, 0.98)) !important;
        backdrop-filter: blur(20px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
        border: 1px solid rgba(139, 123, 255, 0.2) !important;
        border-radius: 12px !important;
        z-index: 9999 !important;
        cursor: pointer !important;
        align-items: center !important;
        justify-content: center !important;
        color: rgba(232, 240, 255, 0.92) !important;
        font-size: 18px !important;
        pointer-events: all !important;
        box-shadow:
            0 4px 14px rgba(0, 0, 0, 0.4),
            0 0 0 1px rgba(139, 123, 255, 0.08),
            inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
        padding: 0 !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }

    .mobile-menu-btn:active {
        transform: scale(0.88) !important;
        background: linear-gradient(145deg, rgba(139, 123, 255, 0.3), rgba(14, 24, 44, 0.96)) !important;
        border-color: rgba(139, 123, 255, 0.4) !important;
    }

    /* ——— 👥 Members Button ——— */
    .mobile-members-btn {
        display: flex !important;
        position: fixed !important;
        top: 8px !important;
        right: 8px !important;
        width: 40px !important;
        height: 40px !important;
        background: linear-gradient(145deg, rgba(14, 24, 44, 0.96), rgba(8, 14, 30, 0.98)) !important;
        backdrop-filter: blur(20px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
        border: 1px solid rgba(139, 123, 255, 0.2) !important;
        border-radius: 12px !important;
        z-index: 9999 !important;
        cursor: pointer !important;
        align-items: center !important;
        justify-content: center !important;
        color: rgba(232, 240, 255, 0.92) !important;
        font-size: 16px !important;
        pointer-events: all !important;
        box-shadow:
            0 4px 14px rgba(0, 0, 0, 0.4),
            0 0 0 1px rgba(139, 123, 255, 0.08),
            inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
        padding: 0 !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }

    .mobile-members-btn:active {
        transform: scale(0.88) !important;
        background: linear-gradient(145deg, rgba(45, 228, 198, 0.25), rgba(14, 24, 44, 0.96)) !important;
        border-color: rgba(45, 228, 198, 0.35) !important;
    }

    /* ——— Backdrop ——— */
    .mobile-backdrop {
        display: none !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        background: rgba(0, 0, 0, 0.6) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        z-index: 940 !important;
        opacity: 0;
        transition: opacity 0.3s ease !important;
    }

    body.mobile-sidebar-open .mobile-backdrop,
    body.mobile-members-open .mobile-backdrop {
        display: block !important;
        opacity: 1 !important;
    }

    /* ——— Lock body scroll when panels are open ——— */
    body.mobile-sidebar-open,
    body.mobile-members-open {
        overflow: hidden !important;
    }
}

/* ==========================================
   2) SMALL SCREENS (≤768px) — Tighter spacing
   ========================================== */
@media (max-width: 768px) {

    #chat-header {
        padding: 0 54px !important;
        height: 50px !important;
        min-height: 50px !important;
    }

    #chat-header .header-right .search-bar {
        display: none !important;
    }

    #channel-name {
        font-size: 14px !important;
    }

    /* Composer optimization */
    #composer-area {
        padding: 6px 10px 10px 10px !important;
    }

    #composer-inner {
        gap: 6px !important;
    }

    .composer-icons {
        gap: 4px !important;
    }

    /* Messages */
    .message-row {
        padding: 6px 8px !important;
        gap: 10px !important;
    }

    .message-row .avatar-img,
    .message-avatar {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
    }

    .msg-text {
        font-size: 14px !important;
    }

    /* Members sidebar */
    #member-list {
        width: 90vw !important;
        max-width: 320px !important;
    }
}

/* ==========================================
   3) EXTRA SMALL (≤480px)
   ========================================== */
@media (max-width: 480px) {

    .mobile-menu-btn,
    .mobile-members-btn {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        top: 6px !important;
    }

    .mobile-menu-btn {
        left: 6px !important;
    }

    .mobile-members-btn {
        right: 6px !important;
    }

    #chat-header {
        padding: 0 46px !important;
        height: 46px !important;
        min-height: 46px !important;
    }

    .message-row {
        padding: 4px 6px !important;
        gap: 8px !important;
    }

    .msg-text {
        font-size: 13px !important;
    }

    .msg-author {
        font-size: 13px !important;
    }

    #composer-area {
        padding: 4px 8px 8px 8px !important;
    }
}

/* ==========================================
   4) MODALS — FULLSCREEN ON MOBILE
   ========================================== */
@media (max-width: 1024px) {

    .modal-content,
    .overlay-panel,
    [class*="modal"] .modal-body {
        max-width: 100vw !important;
        max-height: 100vh !important;
        width: 100% !important;
        border-radius: 0 !important;
        margin: 0 !important;
    }
}

/* ==========================================
   5) iOS SAFE AREA — Prevent notch/bar overlap
   ========================================== */
@supports (padding-top: env(safe-area-inset-top)) {
    @media (max-width: 1024px) {

        .mobile-menu-btn,
        .mobile-members-btn {
            top: calc(8px + env(safe-area-inset-top)) !important;
        }

        #chat-header {
            padding-top: env(safe-area-inset-top) !important;
            height: calc(56px + env(safe-area-inset-top)) !important;
            min-height: calc(56px + env(safe-area-inset-top)) !important;
        }

        #composer-area {
            padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
        }

        /* Sidebar safe areas */
        #server-list {
            padding-top: calc(12px + env(safe-area-inset-top)) !important;
        }

        #sidebar #sidebar-header {
            padding-top: env(safe-area-inset-top) !important;
        }
    }
}

/* ==========================================
   6) TOUCH IMPROVEMENTS
   ========================================== */
@media (max-width: 1024px) {
    .channel-item {
        padding: 10px 12px !important;
        min-height: 38px !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    .guild-item {
        -webkit-tap-highlight-color: transparent !important;
    }

    .member-item {
        padding: 10px 12px !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    .icon-btn {
        min-width: 36px !important;
        min-height: 36px !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    /* Momentum scrolling */
    #messages,
    #channel-list,
    #member-list,
    #server-list {
        -webkit-overflow-scrolling: touch !important;
    }
}

/* ==========================================
   7) LANDSCAPE MODE
   ========================================== */
@media (max-height: 480px) and (orientation: landscape) {

    .mobile-menu-btn,
    .mobile-members-btn {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
        top: 4px !important;
    }

    #chat-header {
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 42px !important;
    }

    #sidebar {
        max-width: 240px !important;
    }

    #composer-area {
        padding: 4px 8px !important;
    }
}

/* ==========================================
   8) DESKTOP: HIDE MOBILE-ONLY (duplicate safety)
   ========================================== */
@media (min-width: 1025px) {

    .mobile-menu-btn,
    .mobile-members-btn,
    .mobile-backdrop,
    .mobile-only {
        display: none !important;
    }
}

/* ==========================================
   9) CHAT AREA — Mobile message enhancements
   ========================================== */
@media (max-width: 768px) {

    /* Message actions — always visible on touch devices */
    .msg-actions,
    .message-actions {
        opacity: 1 !important;
        gap: 4px !important;
    }

    .msg-actions button,
    .message-actions button {
        min-width: 32px;
        min-height: 32px;
        -webkit-tap-highlight-color: transparent;
    }

    /* Composer — touch friendly */
    #composer input,
    #composer textarea,
    #msgInput,
    #msg-input {
        font-size: 16px !important;
        min-height: 44px !important;
        border-radius: 22px !important;
        padding: 10px 16px !important;
    }

    /* Composer buttons */
    #composer button,
    .composer-btn {
        min-width: 40px !important;
        min-height: 40px !important;
        -webkit-tap-highlight-color: transparent;
    }

    /* Context menu — bottom sheet style on mobile */
    .context-menu,
    .friend-context-menu {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        max-width: 100% !important;
        width: 100% !important;
        border-radius: 16px 16px 0 0 !important;
        max-height: 60vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        animation: slideUpMenu 0.2s ease;
    }

    .context-menu-item,
    .friend-context-menu-item {
        min-height: 48px !important;
        padding: 12px 20px !important;
        font-size: 15px !important;
        -webkit-tap-highlight-color: transparent;
    }
}

@keyframes slideUpMenu {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ==========================================
   10) SCROLL-TO-BOTTOM BUTTON (Mobile)
   ========================================== */
@media (max-width: 768px) {
    .scroll-to-bottom-btn {
        bottom: 80px !important;
        right: 16px !important;
        width: 44px !important;
        height: 44px !important;
        border-radius: 50% !important;
        -webkit-tap-highlight-color: transparent;
    }
}

/* ==========================================
   11) GLOBAL TOUCH — Disable hover effects
   ========================================== */
@media (hover: none) and (pointer: coarse) {

    .message-row:hover,
    .friend-row:hover,
    .friend-card:hover,
    .ss-card:hover,
    .notification-item:hover {
        transform: none !important;
    }

    * {
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0.05);
    }
}

/* ==========================================
   12) FIX INLINE STYLE CONFLICTS from app.html
   These override the conflicting media queries
   inside app.html's <style> block
   ========================================== */
@media (max-width: 1024px) {

    /* Override app.html inline grid that sets 3-column at 1024px */
    #app-mount {
        display: flex !important;
        flex-direction: column !important;
    }

    /* Override app.html inline #member-list display:none */
    #member-list {
        display: block !important;
        transform: translateX(100%) !important;
    }

    body.mobile-members-open #member-list {
        transform: translateX(0) !important;
    }
}

@media (max-width: 768px) {

    /* Override app.html inline grid-template-columns: 1fr */
    #app-mount {
        display: flex !important;
        flex-direction: column !important;
    }

    /* Override app.html inline #server-list display:none */
    #server-list {
        display: flex !important;
        transform: translateX(-100%) !important;
    }

    body.mobile-sidebar-open #server-list {
        transform: translateX(0) !important;
    }

    /* Override app.html inline #sidebar fixed positioning */
    #sidebar {
        position: fixed !important;
        left: 72px !important;
        transform: translateX(calc(-100% - 72px)) !important;
    }

    body.mobile-sidebar-open #sidebar {
        transform: translateX(0) !important;
    }
}