/*
 * home-landscape-chatbot.css — HOME PAGE ONLY.
 *
 * Paired with public/js/home-landscape-chatbot.js. When a phone is in
 * landscape (short viewport + coarse pointer) AND the JS has added
 * `body.lsch-takeover`, the Talia chatbot overlay is full-bleed'd to fill the
 * screen BELOW the header, the header is kept visible above it, and the
 * floating launcher is hidden. The chatbot overlay itself is defined inline in
 * resources/views/partials/chatbot-widget.blade.php (#chatbotOverlay,
 * .chatbot-overlay @ z-index 10120).
 *
 * The same media query gates everything, so none of this applies in portrait
 * or on desktop even though the class/markup is present.
 */
@media (orientation: landscape) and (max-height: 600px) and (pointer: coarse) {

    /* Overlay fills from just below the header to the bottom of the screen. */
    body.lsch-takeover .chatbot-overlay.open {
        top: var(--lsch-header-h, 0px);
        padding: 0;
        align-items: stretch;
        justify-content: stretch;
    }

    /* Full-bleed the chat card into that space. */
    body.lsch-takeover .chatbot-overlay.open .chatbot-container {
        width: 100%;
        max-width: 100%;
        height: auto;          /* stretch to fill the overlay (viewport - header) */
        min-height: 0;
        max-height: none;
        border-radius: 0;
    }

    /* Keep the header (and its sign-up / account controls) visible ON TOP of
       the overlay. Overlay sits at z-index 10120, so the header must beat it. */
    body.lsch-takeover [data-header-v2] {
        position: relative;
        z-index: 10130;
    }

    /* No floating launcher/teaser while the chat has taken over. */
    body.lsch-takeover #chatbotToggle,
    body.lsch-takeover #chatbotBubble {
        display: none !important;
    }
}