/* ═══════════════════════════════════════════════════════════════════
   Summerland AI — Mobile Overlay UI  v4.0
   Fixes: wrapper breakout, height calc, text-align, composer layout
   ═══════════════════════════════════════════════════════════════════ */

/* ── pointer-events: kill all when closed ── */
#slai-mobile-overlay:not(.slai-overlay--open) *,
#slai-mobile-overlay.slai-overlay--closing * { pointer-events: none !important; }
#slai-mobile-overlay.slai-overlay--open * { pointer-events: auto; }

/* ═══════════════════════════════════════════════════════════════════
   APP BAR
   ═══════════════════════════════════════════════════════════════════ */
#slai-app-bar {
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    z-index: 200 !important;
    height: calc(52px + env(safe-area-inset-top, 0px)) !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
    padding-left: 4px !important; padding-right: 8px !important;
    display: flex !important;
    align-items: center !important;
    background: rgba(249,250,251,0.96) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(0,0,0,0.08) !important;
}

#slai-app-back, #slai-app-close {
    display: flex !important; align-items: center !important; justify-content: center !important;
    width: 44px !important; height: 44px !important;
    border-radius: 50% !important; background: none !important; border: none !important;
    cursor: pointer !important; flex-shrink: 0 !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: background 0.15s !important;
    font-size: 18px !important;
    line-height: 1 !important;
    font-family: -apple-system, system-ui, sans-serif !important;
}
#slai-app-back  { color: #10847E !important; font-size: 22px !important; }
#slai-app-close { color: #6B7280 !important; font-weight: 400 !important; }
#slai-app-back:active  { background: rgba(16,132,126,0.1) !important; }
#slai-app-close:active { background: rgba(0,0,0,0.06) !important; }
#slai-app-back.slai-app-back--hidden { visibility: hidden !important; pointer-events: none !important; }

#slai-app-title {
    flex: 1 !important; text-align: center !important;
    font-size: 15px !important; font-weight: 600 !important;
    color: #111827 !important; letter-spacing: -0.01em !important;
    font-family: -apple-system, 'Inter', sans-serif !important;
}

/* ═══════════════════════════════════════════════════════════════════
   ADVISOR WRAPPER
   Fix: original CSS has width:100vw + margin-left:calc(50%-50vw)
        which overflows the overlay. Override all three properties.
   Fix: original height:calc(100dvh - var(--slai-header-h) - ...)
        is wrong inside overlay. Use absolute inset instead.
   ═══════════════════════════════════════════════════════════════════ */
#slai-mobile-overlay .slai-advisor-wrapper {
    position: absolute !important;
    top: calc(52px + env(safe-area-inset-top, 0px)) !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important;
    /* Kill the 100vw full-width breakout */
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    /* Kill the JS-measured height calc */
    height: auto !important;
    min-height: 0 !important;
    background: #F9FAFB !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    /* Reset z-index from original (was 10, fine) */
    z-index: 1 !important;
}

/* Preloader hidden — ring is the loader */
#slai-mobile-overlay .slai-preloader { display: none !important; }
#slai-mobile-overlay .slai-bg-floor  { background: #F9FAFB !important; }

/* ═══════════════════════════════════════════════════════════════════
   INTRO SCREEN — flex column, content scrolls, composer pinned bottom
   ═══════════════════════════════════════════════════════════════════ */
#slai-mobile-overlay #slai-screen-intro {
    display: flex !important;
    flex-direction: column !important;
    position: absolute !important;
    inset: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
    background: #F9FAFB !important;
}

/* Scrollable content */
#slai-mobile-overlay .slai-intro-inner {
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 30px 20px 24px !important;
    /* Fix original: text-align:center, max-width:860px, margin:auto */
    text-align: left !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    /* Reset original position:relative z-index:2 — OK to keep */
}

/* Heading */
#slai-mobile-overlay .slai-intro-question {
    font-size: 26px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    letter-spacing: -0.025em !important;
    line-height: 1.22 !important;
    margin: 0 0 10px !important;
    text-align: left !important;
}

/* Subtitle */
#slai-mobile-overlay .slai-intro-hint {
    font-size: 14px !important;
    color: #6B7280 !important;
    line-height: 1.55 !important;
    margin: 0 0 24px !important;
    font-weight: 400 !important;
    text-align: left !important;
}

/* Suggestion chips — horizontal scrolling pills */
#slai-mobile-overlay .slai-concern-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 8px !important;
    padding-bottom: 4px !important;
    margin-bottom: 20px !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}
#slai-mobile-overlay .slai-concern-grid::-webkit-scrollbar { display: none !important; }

#slai-mobile-overlay .slai-concern-chip {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    padding: 9px 14px !important;
    border-radius: 100px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #374151 !important;
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.09) !important;
    min-height: auto !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: border-color 0.15s, transform 0.1s !important;
}
#slai-mobile-overlay .slai-concern-chip:active {
    border-color: #10847E !important;
    background: #F0FDFA !important;
    transform: scale(0.95) !important;
}
#slai-mobile-overlay .slai-concern-chip-icon {
    width: 18px !important; height: 18px !important;
}
#slai-mobile-overlay .slai-concern-chip-icon svg { width: 18px !important; height: 18px !important; }

/* Divider */
#slai-mobile-overlay .slai-intro-divider {
    font-size: 11px !important; color: #9CA3AF !important;
    text-align: center !important; font-weight: 500 !important;
    letter-spacing: 0.06em !important; text-transform: uppercase !important;
    margin: 16px 0 14px !important;
}
#slai-mobile-overlay .slai-intro-divider::before,
#slai-mobile-overlay .slai-intro-divider::after { display: none !important; }

/* Assessment CTA — subtle text link */
#slai-mobile-overlay #slai-start-btn {
    background: none !important; border: none !important; box-shadow: none !important;
    color: #10847E !important; font-size: 13.5px !important; font-weight: 500 !important;
    width: auto !important; padding: 6px 0 !important;
    text-decoration: underline !important; text-underline-offset: 3px !important;
    text-decoration-color: rgba(16,132,126,0.4) !important;
    display: inline-flex !important; align-items: center !important; gap: 6px !important;
    -webkit-tap-highlight-color: transparent !important;
}
#slai-mobile-overlay .slai-intro-note {
    font-size: 11px !important; color: #9CA3AF !important;
    margin-top: 8px !important; text-align: left !important;
}

/* ═══════════════════════════════════════════════════════════════════
   BOTTOM COMPOSER DOCK
   Structure: white dock attached to bottom, rounded top corners,
   flat bottom corners. Two zones: suggestions strip + input row.
   NO pill-inside-a-box. The dock IS the surface.
   ═══════════════════════════════════════════════════════════════════ */

/* The dock shell — white sheet, FULL WIDTH, rising from bottom */
#slai-mobile-overlay #slai-screen-intro .slai-chat-wrap {
    flex-shrink: 0 !important;
    position: static !important;
    /* Force full width — overrides any parent max-width or margin constraints */
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    align-self: stretch !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    /* Rounded top corners only — attached to screen bottom */
    border-radius: 20px 20px 0 0 !important;
    border: none !important;
    border-top: 1px solid rgba(0,0,0,0.07) !important;
    box-shadow:
        0 -8px 32px rgba(0,0,0,0.08),
        0 -2px 8px rgba(0,0,0,0.04) !important;
    padding: 0 !important;
    overflow: hidden !important;
    backdrop-filter: none !important;
}

/* Zone 1: Suggestions strip — reserved space above input */
#slai-mobile-overlay #slai-screen-intro .slai-chat-messages {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 16px 4px !important;
    min-height: 50px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}
#slai-mobile-overlay #slai-screen-intro .slai-chat-messages::-webkit-scrollbar {
    display: none !important;
}
/* Empty suggestions placeholder */
#slai-mobile-overlay #slai-screen-intro .slai-chat-messages:empty {
    min-height: 6px !important;
    padding: 0 !important;
}

/* Zone 2: Input row — transparent, sits directly on white dock */
#slai-mobile-overlay .slai-chat-box {
    display: flex !important;
    align-items: flex-end !important;
    gap: 12px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 14px 16px !important;
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    margin: 0 !important;
    transition: none !important;
}
#slai-mobile-overlay .slai-chat-box:focus-within {
    border: none !important;
    box-shadow: none !important;
}
#slai-mobile-overlay .slai-chat-spark { display: none !important; }

/* Textarea — transparent, ONE color, sits on the white dock */
#slai-mobile-overlay #slai-chat-input {
    flex: 1 !important;
    background: transparent !important;   /* no dual-color, dock is the surface */
    border: none !important;
    border-radius: 0 !important;
    outline: none !important;
    font-size: 16px !important;
    font-family: -apple-system, 'Inter', sans-serif !important;
    color: #111827 !important;
    line-height: 1.5 !important;
    resize: none !important;
    padding: 0 !important;
    min-height: 26px !important;
    max-height: 140px !important;
    transition: none !important;          /* no background flash on focus */
    -webkit-appearance: none !important;
}
#slai-mobile-overlay #slai-chat-input:focus {
    background: transparent !important;   /* stays same color — no dual-color */
    outline: none !important;
    box-shadow: none !important;
}
#slai-mobile-overlay #slai-chat-input::placeholder { color: #9CA3AF !important; }

/* Send button — teal circle, vertically aligned to bottom of textarea */
#slai-mobile-overlay #slai-chat-send {
    width: 44px !important; height: 44px !important;
    border-radius: 50% !important;
    background: #10847E !important; border: none !important;
    color: #fff !important; flex-shrink: 0 !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    box-shadow: 0 2px 10px rgba(16,132,126,0.30) !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: transform 0.1s, opacity 0.15s !important;
    align-self: flex-end !important;
    margin-bottom: 1px !important;
}
#slai-mobile-overlay #slai-chat-send:active  { transform: scale(0.88) !important; }
#slai-mobile-overlay #slai-chat-send:disabled { background: #D1D5DB !important; box-shadow: none !important; opacity: 0.6 !important; }


/* ═══════════════════════════════════════════════════════════════════
   CHAT SCREEN
   ═══════════════════════════════════════════════════════════════════ */
#slai-mobile-overlay #slai-screen-chat { background: #F9FAFB !important; }
#slai-mobile-overlay .slai-chat-hd     { display: none !important; }
#slai-mobile-overlay #slai-chat-thread { background: #F9FAFB !important; }

#slai-mobile-overlay .slai-chat-bubble--ai {
    background: #ffffff !important;
    border-radius: 4px 18px 18px 18px !important;
    border: 1px solid rgba(0,0,0,0.07) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
    color: #111827 !important;
}
#slai-mobile-overlay .slai-chat-bubble--user {
    background: #10847E !important; color: #fff !important;
    border-radius: 18px 18px 4px 18px !important; border: none !important;
}

/* Chat bar */
#slai-mobile-overlay .slai-chat-bar {
    background: rgba(249,250,251,0.98) !important;
    backdrop-filter: blur(16px) !important;
    border-top: 1px solid rgba(0,0,0,0.08) !important;
    padding: 12px 16px !important;
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.04) !important;
}
#slai-mobile-overlay .slai-chat-bar-inner {
    background: #ffffff !important;
    border: 1.5px solid #E5E7EB !important;
    border-radius: 22px !important;
    padding: 8px 8px 8px 16px !important;
    display: flex !important; align-items: flex-end !important; gap: 8px !important;
    transition: border-color 0.18s, box-shadow 0.18s !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
}
#slai-mobile-overlay .slai-chat-bar-inner:focus-within {
    border-color: #10847E !important;
    box-shadow: 0 0 0 3px rgba(16,132,126,0.12) !important;
}
#slai-mobile-overlay .slai-chat-main-input {
    background: transparent !important; border: none !important;
    font-size: 15px !important; color: #111827 !important; padding: 4px 0 !important;
}
#slai-mobile-overlay .slai-chat-main-input::placeholder { color: #9CA3AF !important; }
#slai-mobile-overlay .slai-chat-main-send {
    width: 38px !important; height: 38px !important; border-radius: 50% !important;
    background: #10847E !important; border: none !important;
    color: #fff !important; flex-shrink: 0 !important;
    box-shadow: 0 2px 8px rgba(16,132,126,0.25) !important;
    transition: transform 0.1s !important;
}
#slai-mobile-overlay .slai-chat-main-send:active  { transform: scale(0.88) !important; }
#slai-mobile-overlay .slai-chat-main-send:disabled { background: #D1D5DB !important; box-shadow: none !important; }
#slai-mobile-overlay .slai-chat-bar-hint { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════
   QUIZ / RESULTS
   ═══════════════════════════════════════════════════════════════════ */
#slai-mobile-overlay #slai-screen-quiz,
#slai-mobile-overlay #slai-screen-results,
#slai-mobile-overlay #slai-screen-no-results { background: #F9FAFB !important; }
#slai-mobile-overlay .slai-quiz-header,
#slai-mobile-overlay .slai-results-header { background: #F9FAFB !important; }

#slai-mobile-overlay .slai-chat-product-card {
    background: #ffffff !important;
    border-radius: 16px !important;
    border: 1px solid rgba(0,0,0,0.07) !important;
    box-shadow: 0 1px 6px rgba(0,0,0,0.05) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   DESKTOP — hide
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
    #slai-mobile-overlay, #slai-app-bar { display: none !important; }
}