/* Mobile chat shell: keyboard-safe composer and non-shifting main navigation. */
@media (max-width: 768px) {
    /* The primary navigation is an overlay, so opening it never resizes the chat. */
    body .sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        right: auto !important;
        width: min(82vw, 320px) !important;
        min-width: min(82vw, 320px) !important;
        max-width: 320px !important;
        height: 100dvh !important;
        transform: translate3d(-105%, 0, 0) !important;
        border-right: 0 !important;
        border-left: 0 !important;
        border-right: 1px solid var(--border-color) !important;
        box-shadow: 14px 0 34px rgba(0, 0, 0, 0.34) !important;
        transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1) !important;
        will-change: transform;
    }

    body.sidebar-open .sidebar {
        transform: translate3d(0, 0, 0) !important;
    }

    /* Do not inherit the collapsed desktop content state on a mobile overlay. */
    body.sidebar-open .sidebar .logo,
    body.sidebar-open .sidebar .logo-text,
    body.sidebar-open .sidebar .tool-btn span,
    body.sidebar-open .sidebar .sidebar-btn span,
    body.sidebar-open .sidebar .sidebar-footer,
    body.sidebar-open .sidebar .sidebar-footer .footer-actions,
    body.sidebar-open .sidebar .chat-history-section,
    body.sidebar-open .sidebar .search-container,
    body.sidebar-open .sidebar .chat-history-label,
    body.sidebar-open .sidebar .chat-history-list {
        display: flex !important;
    }

    body.sidebar-open .sidebar .logo {
        align-items: center;
    }

    body.sidebar-open .sidebar .tool-btn,
    body.sidebar-open .sidebar .sidebar-btn {
        width: 100% !important;
        justify-content: flex-start !important;
    }

    body.sidebar-open .sidebar .sidebar-footer {
        flex-direction: column !important;
    }

    /* In chat, keep the primary-menu trigger beside the existing overflow menu. */
    body:has(#chatView:not([style*="display: none"])) .mobile-sidebar-btn,
    body:has(#chatView:not([style*="display:none"])) .mobile-sidebar-btn {
        display: flex !important;
        position: fixed !important;
        top: 12px !important;
        left: 12px !important;
        right: auto !important;
        z-index: 3050 !important;
        width: 32px !important;
        height: 32px !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 8px !important;
        background: transparent !important;
        box-shadow: none !important;
        color: var(--text-secondary) !important;
    }

    body:has(#chatView:not([style*="display: none"])) .mobile-sidebar-btn:hover,
    body:has(#chatView:not([style*="display:none"])) .mobile-sidebar-btn:focus-visible {
        background: var(--bg-hover) !important;
        color: var(--text-primary) !important;
    }

    body.sidebar-open .mobile-sidebar-btn {
        display: none !important;
    }

    /* Make the main composer follow the visual viewport while the keyboard is open. */
    #chatView .input-container,
    #chatView .chat-main-area.is-empty .input-container {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: calc(var(--keyboard-offset, 0px) + env(safe-area-inset-bottom, 0px) + 8px) !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
        z-index: 3100 !important;
        transform: translateZ(0) !important;
    }

    #chatView .chat-messages,
    #chatView .chat-main-area.is-empty .chat-messages {
        padding-bottom: calc(172px + var(--keyboard-offset, 0px) + env(safe-area-inset-bottom, 0px)) !important;
        scroll-padding-bottom: calc(172px + var(--keyboard-offset, 0px) + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Avoid a second visual layer fighting the keyboard-safe composer. */
    #chatView .input-container,
    #chatView .input-container:hover,
    #chatView .input-container:focus-within {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body .sidebar,
    body .mobile-sidebar-backdrop {
        transition-duration: 1ms !important;
    }
}