/* ================================================================
   MOBILE CHAT FIX - True Full Screen
   WhatsApp-style layout: Header | Messages | Footer
   ================================================================ */

@media (max-width: 768px) {

    /* Step 1: AGGRESSIVE BODY LOCK - With Scroll Preservation Support */
    html.chat-is-open,
    body.chat-is-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
        height: 100dvh !important;
        margin: 0 !important;
        padding: 0 !important;
        /* top: 0 !important; <--- REMOVED to allow JS to set negative top for scroll preservation */
        left: 0 !important;
        right: 0 !important;
        overscroll-behavior: none !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: none !important;
    }

    /* Lock all body children except chat widget on MOBILE ONLY */
    body.chat-is-open>*:not(#chat-widget-container):not(#chat-toggle-btn):not(#chat-overlay):not(style):not(script) {
        visibility: hidden !important;
        opacity: 0 !important;
    }

    /* Step 1.5: Ensure chat toggle button is hidden when chat is open on mobile */
    body.chat-is-open #chat-toggle-btn {
        display: none !important;
    }

    /* Step 2: TRUE Full Screen Chat - CONSISTENT SIZE to prevent glitching */
    #chat-widget-container {
        /* Force fixed positioning and full size on mobile ALWAYS (open or closed) */
        position: fixed !important;
        top: 0 !important;
        /* Default anchor */
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;

        /* KEY CHANGE: Use 100% height to respect the inline style set by JS (visualViewport) */
        /* This allows the JS to "shrink" the container when keyboard opens */
        height: 100% !important;
        max-height: 100% !important;

        width: 100vw !important;
        width: 100dvw !important;
        max-width: 100vw !important;

        border-radius: 0 !important;
        display: flex !important;
        flex-direction: column !important;

        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        z-index: 999999 !important;

        /* Animation Base State (Closed) */
        /* CHANGED: From fully off-screen (110%) to subtle offset (20px) */
        /* This creates a "Fade In" feel instead of "Slide Up" */
        transform: translateY(20px) scale(0.98) !important;
        opacity: 0 !important;
        visibility: hidden !important;

        /* Smooth unified transition */
        transition:
            transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
            opacity 0.35s ease-out,
            visibility 0.35s !important;

        /* Performance */
        will-change: transform, opacity !important;
    }

    body.chat-is-open #chat-widget-container {
        /* Open State - Reset transform */
        transform: translateY(0) scale(1) !important;
        opacity: 1 !important;
        visibility: visible !important;

        overflow: hidden !important;
        overscroll-behavior: contain !important;
        touch-action: pan-y !important;

        /* Force on top */
        isolation: isolate !important;
    }

    /* Step 3: Header - Won't shrink, NO CORNERS */
    body.chat-is-open #chat-widget-header {
        flex-shrink: 0 !important;
        width: 100% !important;
        background: white !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
        border-radius: 0 !important;
        /* NO CORNERS */
        z-index: 10 !important;
        padding: 12px 16px !important;
        /* Increase padding for mobile */
    }

    /* Close button - Ensure proper touch target on mobile */
    body.chat-is-open .chat-close-button {
        min-width: 44px !important;
        min-height: 44px !important;
        width: 44px !important;
        height: 44px !important;
        touch-action: manipulation !important;
        pointer-events: auto !important;
        flex-shrink: 0 !important;
        margin-left: auto !important;
        /* Push to right */
    }

    /* Step 4: Messages - Grows & Scrolls (ONLY THIS AREA) */
    body.chat-is-open #chat-widget-body {
        flex: 1 1 auto !important;
        width: 100% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
        /* Prevent scroll chaining */
        min-height: 0 !important;
        /* Critical for flex scrolling */
        padding: 16px !important;
        touch-action: pan-y !important;
        /* Only allow vertical scrolling */
        position: relative !important;
    }

    /* Ensure messages are non-interactive */
    body.chat-is-open #chat-widget-body .chat-message {
        pointer-events: none !important;
        user-select: none !important;
        -webkit-user-select: none !important;
        touch-action: none !important;
    }

    /* Step 5: Footer - Won't shrink, always visible, NO CORNERS, NO SCROLL */
    body.chat-is-open #chat-widget-footer {
        flex-shrink: 0 !important;
        width: 100% !important;
        background: white !important;
        border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
        border-radius: 0 !important;
        /* NO CORNERS */
        z-index: 10 !important;
        padding: 12px 16px !important;
        padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
        touch-action: manipulation !important;
        /* Allow only taps, no scroll */
        overscroll-behavior: none !important;
        position: relative !important;
    }

    /* Step 6: Input - Prevent iOS zoom and allow only typing */
    body.chat-is-open #chat-widget-input {
        font-size: 16px !important;
        min-height: 44px !important;
        touch-action: manipulation !important;
        user-select: text !important;
        /* Allow text selection in input */
        -webkit-user-select: text !important;
    }

    /* Step 7: Send button - Always accessible, no scroll */
    body.chat-is-open #chat-widget-send {
        min-width: 44px !important;
        min-height: 44px !important;
        flex-shrink: 0 !important;
        touch-action: manipulation !important;
        pointer-events: auto !important;
        /* Ensure button is clickable */
    }

    /* Step 8: Hide chat overlay on mobile (not needed) */
    body.chat-is-open #chat-overlay {
        display: none !important;
    }
}