/* ============================================================
   SNACKIT — Snacky chatbot mobile dimension fix
   Loaded after pages.css / mobile.css. Desktop unchanged.
   Does not edit shared company stylesheets.
   ============================================================ */

@media (max-width: 768px) {
    /* Above site nav (900) + drawer (860) — close was hidden under header */
    .chat,
    .chat.is-open {
        z-index: 1100 !important;
    }

    /* Full-screen sheet — pinned, no sideways drift */
    .chat {
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        height: 100dvh !important;
        max-height: none !important;
        display: flex !important;
        flex-direction: column !important;
        border-radius: 0;
        border: 0;
        border-top: 1px solid rgba(212, 175, 55, 0.2);
        transform: translate3d(0, 28px, 0) scale(0.98);
        transform-origin: bottom center;
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        padding-left: env(safe-area-inset-left, 0px);
        padding-right: env(safe-area-inset-right, 0px);
        box-shadow: none;
        overflow: hidden;
        overscroll-behavior: contain;
        touch-action: manipulation;
    }

    .chat.is-open {
        transform: none !important;
    }

    .chat__head {
        position: sticky;
        top: 0;
        z-index: 5;
        padding: calc(env(safe-area-inset-top, 0px) + 0.7rem) 0.65rem 0.7rem 0.85rem;
        border-radius: 0;
        gap: 0.5rem;
        min-width: 0;
        overflow: visible;
        background: linear-gradient(180deg, #0c0b09 0%, #0c0b09 72%, rgba(12, 11, 9, 0.92) 100%);
        border-bottom: 1px solid rgba(212, 175, 55, 0.12);
    }

    .chat__head-id {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* Keep close visible — 3×44px buttons overflow narrow heads */
    .chat__head-actions {
        flex: none;
        gap: 0.25rem;
        margin-left: auto;
    }

    .chat__icon-btn,
    .chat__close {
        width: 40px !important;
        height: 40px !important;
        flex: none;
        background: rgba(0, 0, 0, 0.16);
    }

    .chat__icon-btn svg,
    .chat__close svg {
        width: 18px;
        height: 18px;
    }

    /* Close is the primary dismiss control on phones */
    .chat__close {
        position: relative;
        z-index: 3;
        background: #0a0a0a !important;
        color: #f5d67a !important;
        box-shadow: 0 0 0 1.5px rgba(10, 10, 10, 0.35);
        order: 2;
    }

    .chat__close svg {
        width: 18px !important;
        height: 18px !important;
    }

    .chat__close svg path {
        stroke: currentColor;
        stroke-width: 2.6;
    }

    .chat__icon-btn#chatClear {
        order: 1;
    }

    /* Drop minimize on small screens — frees space for close */
    #chatMin {
        display: none !important;
    }

    /* Send arrow must stay icon-sized (SVG has no width attrs) */
    .chat__send svg {
        width: 18px !important;
        height: 18px !important;
        flex: none;
        display: block;
    }

    .chat__avatar {
        width: 38px;
        height: 38px;
        font-size: 1.05rem;
    }

    .chat__head-meta strong {
        font-size: 1rem;
    }

    .chat__head-meta span {
        font-size: 0.68rem;
    }

    .chat__body {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden;
    }

    .chat__scroll {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
        touch-action: pan-y;
        padding: 0.85rem 0.75rem 0.85rem 0.9rem;
        scrollbar-gutter: auto;
    }

    .chat__scroll::-webkit-scrollbar {
        width: 0;
        height: 0;
    }

    .chat__welcome {
        padding: 1rem 0.25rem 1.25rem;
    }

    .chat__welcome h3 {
        font-size: 1.2rem;
    }

    .chat__welcome p {
        font-size: 0.84rem;
        max-width: 32ch;
    }

    .chat__welcome-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }

    .chat__welcome-card {
        padding: 0.7rem 0.75rem;
        min-height: 44px;
    }

    .chat__bubble-wrap {
        max-width: 92%;
    }

    .chat__msg {
        font-size: 0.9rem;
        padding: 0.7rem 0.85rem;
    }

    .chat__quick {
        flex-shrink: 0;
        overflow-x: auto !important;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        touch-action: pan-x;
        padding: 0.45rem 0.75rem 0.55rem;
        gap: 0.35rem;
    }

    .chat__chip {
        font-size: 0.74rem;
        padding: 0.45rem 0.7rem;
        min-height: 36px;
    }

    .chat__input {
        padding: 0.55rem 0.75rem 0.7rem;
    }

    .chat__input-wrap {
        padding: 0.3rem 0.3rem 0.3rem 0.9rem;
    }

    .chat__input input {
        font-size: 16px; /* prevent iOS zoom */
    }

    .chat__footnote {
        margin-top: 0.35rem;
        font-size: 0.68rem;
    }

    /* Hide dock + sticky CTA while Snacky is open */
    body.chat-open .dock,
    body.chat-open .mobile-cta,
    body.chat-open .nav,
    body.chat-open .nav__overlay,
    body.chat-open .nav__mobile,
    body:has(.chat.is-open) .dock,
    body:has(.chat.is-open) .mobile-cta,
    body:has(.chat.is-open) .nav,
    body:has(.chat.is-open) .nav__overlay,
    body:has(.chat.is-open) .nav__mobile {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* Lock page behind chat — never touch-action:none (blocks chat scroll on mobile) */
    body.chat-open,
    body:has(.chat.is-open) {
        overflow: hidden;
    }
}

/* Very short screens (landscape phones, small devices) */
@media (max-width: 768px) and (max-height: 520px) {
    .chat__welcome-icon {
        width: 36px;
        height: 36px;
        margin-bottom: 0.5rem;
    }

    .chat__welcome h3 {
        font-size: 1.05rem;
        margin-bottom: 0.25rem;
    }

    .chat__welcome p {
        margin-bottom: 0.65rem;
    }

    .chat__welcome-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.4rem;
    }

    .chat__head {
        padding: 0.55rem 0.7rem;
    }

    .chat__avatar {
        width: 34px;
        height: 34px;
    }
}

/* Fallback when :has() is unavailable — still size the panel correctly */
@supports not selector(body:has(.chat.is-open)) {
    @media (max-width: 768px) {
        .chat.is-open {
            z-index: 1100 !important;
        }
    }
}