/* ═══════════════════════════════════════════════════════════════════
   Summerland AI — Mobile Overlay UI  v5.0
   COMPLETE REWRITE — fixes all 14 identified issues
   Strategy: double-ID selectors beat advisor-v3.css !important rules
   ═══════════════════════════════════════════════════════════════════ */

/* ── Pointer events ── */
#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; }

/* ── Bulletproof tap targets: no 300ms delay, no highlight flicker ── */
#slai-mobile-overlay button,
#slai-mobile-overlay a,
#slai-mobile-overlay [role="button"],
#slai-mobile-overlay label,
#slai-mobile-overlay .slai-chip,
#slai-mobile-overlay .slai-pill,
#slai-mobile-overlay .slai-category-card,
#slai-mobile-overlay .slai-skin-card,
#slai-mobile-overlay .slai-check-card,
#slai-mobile-overlay .slai-bar-chip {
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

/* ── Spark icons — HIDE everything inside overlay ── */
#slai-mobile-overlay .mobnav-spark,
#slai-mobile-overlay .slai-chat-spark { display: none !important; }

/* ── Direct hide for mobnav-spark SVG only (core stays white) ── */
#mobnav-spark { display: none !important; visibility: hidden !important; }
/* Keep #mobnav-ring-core white — only the SVG star inside is hidden */

/* ═══════════════════════════════════════════════════════════════════
   OVERLAY CONTAINER
   ═══════════════════════════════════════════════════════════════════ */
#slai-mobile-overlay {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    height: 100% !important;
    height: 100dvh !important;
    z-index: 100000 !important;
    background: #F9FAFB !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease !important;
    transform: translateY(16px);
    font-family: -apple-system, 'Inter', 'Helvetica Neue', sans-serif !important;
}
#slai-mobile-overlay.slai-overlay--open {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   APP BAR (top) — fix #4, #12
   ═══════════════════════════════════════════════════════════════════ */
#slai-app-bar {
    position: relative !important;
    flex-shrink: 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: 0 !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.07) !important;
}
/* ── Back & Close shared base ── */
#slai-app-back, #slai-app-close {
    display: flex !important; align-items: center !important; justify-content: center !important;
    background: none !important; border: none !important;
    cursor: pointer !important; flex-shrink: 0 !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
}

/* ── Back button: full-height pill, wide tap zone ── */
#slai-app-back {
    /* Stretch to full bar height minus safe-area padding */
    align-self: stretch !important;
    height: 100% !important;
    /* Wide enough to tap comfortably */
    padding: 0 14px 0 8px !important;
    margin-left: 0 !important;
    border-radius: 0 100px 100px 0 !important;
    gap: 4px !important;
    color: #10847E !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    min-width: 72px !important;
}
#slai-app-back span {
    font-family: -apple-system, 'Inter', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: inherit !important;
    line-height: 1 !important;
    display: block !important;
}
#slai-app-back svg {
    flex-shrink: 0 !important;
    display: block !important;
}
#slai-app-back:active  { background: rgba(16,132,126,0.1) !important; }

/* ── Close button: mirrors Back — full-height pill on the right ── */
#slai-app-close {
    align-self: stretch !important;
    height: 100% !important;
    padding: 0 8px 0 14px !important;
    margin-right: 0 !important;
    border-radius: 100px 0 0 100px !important;
    gap: 4px !important;
    color: #6B7280 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    min-width: 72px !important;
}
#slai-app-close span {
    font-family: -apple-system, 'Inter', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: inherit !important;
    line-height: 1 !important;
    display: block !important;
}
#slai-app-close svg {
    flex-shrink: 0 !important;
    display: block !important;
}
#slai-app-close:active { background: rgba(0,0,0,0.07) !important; color: #111827 !important; }

/* Back button always visible — contextual action handled by JS */
#slai-app-back {
    display: flex !important;
    pointer-events: auto !important;
    color: #10847E !important;
}
/* On chat screen: teal (back to intro). On all other screens: grey (close overlay) */
#slai-mobile-overlay:not(:has(#slai-screen-chat.slai-screen--active)) #slai-app-back {
    color: #6B7280 !important;
}
#slai-app-title {
    flex: 1 !important; text-align: center !important;
    font-size: 17px !important; font-weight: 600 !important;
    color: #111827 !important; letter-spacing: -0.01em !important;
    font-family: -apple-system, 'Inter', sans-serif !important;
}

/* ═══════════════════════════════════════════════════════════════════
   ADVISOR WRAPPER — flex column container, screens are flex items
   ═══════════════════════════════════════════════════════════════════ */
#slai-mobile-overlay .slai-advisor-wrapper {
    position: relative !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    display: flex !important;          /* wrapper is a flex column */
    flex-direction: column !important; /* screens stack vertically inside */
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #F9FAFB !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    z-index: 1 !important;
    box-sizing: border-box !important;
}

#slai-mobile-overlay .slai-preloader { display: none !important; }
#slai-mobile-overlay .slai-bg-floor  { background: #F9FAFB !important; }

/* ═══════════════════════════════════════════════════════════════════
   INTRO SCREEN — flex item in wrapper column
   ═══════════════════════════════════════════════════════════════════ */
#slai-mobile-overlay #slai-screen-intro {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;  /* flex item, NOT absolute */
    inset: auto !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: #F9FAFB !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* CRITICAL: hide inactive screens — our display:flex !important was overriding
   the base plugin’s display:none, causing both screens to render simultaneously */
#slai-mobile-overlay #slai-screen-intro:not(.slai-screen--active),
#slai-mobile-overlay #slai-screen-chat:not(.slai-screen--active) {
    display: none !important;
    flex: 0 0 0 !important;
}

#slai-mobile-overlay .slai-intro-inner {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    overflow-y: auto !important;     /* scrollable so all chips + CTA visible */
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 14px 0 0 !important;
    text-align: left !important;
    max-width: 100% !important;
    margin: 0 !important;
    min-height: 0 !important;
}

/* Side padding to all children except the dock */
#slai-mobile-overlay .slai-intro-inner > *:not(.slai-chat-wrap) {
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
}

/* Warm gradient decoration */
#slai-mobile-overlay .slai-screen--intro::before,
#slai-mobile-overlay .slai-screen--intro::after { display: block !important; }

/* Greeting */
#slai-mobile-overlay .slai-greeting {
    font-size: 15px !important; font-weight: 400 !important;
    color: #6B7280 !important; margin: 0 0 3px !important;
    line-height: 1.4 !important; text-align: left !important;
}

/* Headline — responsive font so iPhone 5 (320px) doesn’t wrap too much */
#slai-mobile-overlay .slai-intro-question {
    font-size: clamp(20px, 7vw, 26px) !important;
    font-weight: 700 !important;
    color: #111827 !important; letter-spacing: -0.02em !important;
    line-height: 1.22 !important; margin: 0 0 14px !important;
    text-align: left !important;
}

/* Chips */
#slai-mobile-overlay .slai-concern-grid {
    display: flex !important; flex-direction: row !important;
    flex-wrap: wrap !important; gap: 7px !important;
    margin-bottom: 0 !important;
    flex-shrink: 0 !important;
}
#slai-mobile-overlay .slai-concern-chip {
    display: inline-flex !important; flex-direction: row !important;
    align-items: center !important; gap: 7px !important;
    padding: 8px 13px !important; border-radius: 100px !important;
    font-size: 12.5px !important; font-weight: 500 !important;
    color: #374151 !important; background: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
    cursor: pointer !important; -webkit-tap-highlight-color: transparent !important;
    text-transform: none !important;
}
#slai-mobile-overlay .slai-concern-chip:active { background: #F0FDFA !important; }
#slai-mobile-overlay .slai-concern-chip-icon svg {
    width: 22px !important; height: 22px !important;
}

/* OR divider — very tight */
#slai-mobile-overlay .slai-intro-divider {
    display: block !important; font-size: 11px !important; color: #9CA3AF !important;
    text-align: center !important; font-weight: 500 !important;
    text-transform: uppercase !important; margin: 10px 0 8px !important;
}

/* CTA wrapper — centred, always visible */
#slai-mobile-overlay .slai-intro-cta {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
}

/* Assessment CTA */
#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: 600 !important;
    width: auto !important; padding: 6px 0 !important;
    text-decoration: underline !important;
    display: inline-flex !important; align-items: center !important; gap: 6px !important;
}
#slai-mobile-overlay .slai-intro-note {
    display: block !important; font-size: 11px !important;
    color: #9CA3AF !important; margin-top: 6px !important; text-align: center !important;
}

/* ═══════════════════════════════════════════════════════════════════
   INTRO COMPOSER DOCK (white, sticky bottom)
   ═══════════════════════════════════════════════════════════════════ */
#slai-mobile-overlay #slai-screen-intro .slai-chat-wrap {
    flex-shrink: 0 !important;
    margin-top: auto !important;     /* push composer to absolute bottom of flex column */
    width: 100% !important; max-width: 100% !important;
    padding: 0 !important; align-self: stretch !important;
    box-sizing: border-box !important;
    background: #F9FAFB !important;
    border-radius: 24px 24px 0 0 !important;
    border-top: 1px solid rgba(0,0,0,0.05) !important;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.04) !important;
    overflow: hidden !important;
    z-index: 10 !important;
}

/* Suggestions strip */
#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; }
#slai-mobile-overlay #slai-screen-intro .slai-chat-messages:empty {
    min-height: 6px !important; padding: 0 !important;
}

/* Input row in intro */
#slai-mobile-overlay .slai-chat-box {
    display: flex !important; align-items: flex-end !important; gap: 12px !important;
    background: #F9FAFB !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    border-radius: 14px !important;
    padding: 10px 10px 10px 16px !important;
    margin: 10px 16px 6px !important;
}
#slai-mobile-overlay .slai-chat-box:focus-within {
    border-color: rgba(16,132,126,0.25) !important;
    box-shadow: none !important;
}

/* Intro textarea */
#slai-mobile-overlay #slai-chat-input {
    flex: 1 !important;
    background: transparent !important;
    border: none !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;
    -webkit-appearance: none !important;
}
#slai-mobile-overlay #slai-chat-input:focus { background: transparent !important; outline: none !important; box-shadow: none !important; }
#slai-mobile-overlay #slai-chat-input::placeholder { color: #9CA3AF !important; }

/* Intro send button — visible by default; hidden only when disabled */
#slai-mobile-overlay #slai-chat-send {
    width: 36px !important; height: 36px !important;
    min-width: 36px !important; min-height: 36px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important; background: #10847E !important;
    border: none !important; color: #ffffff !important; flex-shrink: 0 !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    box-shadow: 0 2px 8px rgba(16,132,126,0.25) !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
    transition: transform 0.1s, opacity 0.2s !important;
    align-self: center !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}
#slai-mobile-overlay #slai-chat-send svg {
    width: 16px !important; height: 16px !important;
    transform: none !important;
}
#slai-mobile-overlay #slai-chat-send:active { transform: scale(0.88) !important; }
#slai-mobile-overlay #slai-chat-send:disabled {
    opacity: 0 !important; pointer-events: none !important; cursor: default !important;
}

/* ═══════════════════════════════════════════════════════════════════
   CHAT SCREEN — structural layout fix
   ═══════════════════════════════════════════════════════════════════ */

/* Chat screen: flex item in the wrapper column — starts AFTER app bar, guaranteed */
#slai-mobile-overlay #slai-screen-chat {
    background: #F9FAFB !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;  /* flex item, NOT absolute — no overlap with app bar */
    inset: auto !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Internal chat header: detached via JS, but belt+suspenders CSS nuke */
#slai-mobile-overlay #slai-screen-chat .slai-chat-hd {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
    flex-shrink: 0 !important;
    position: absolute !important;
    top: -9999px !important;
}
#slai-mobile-overlay #slai-screen-chat .slai-chat-hd-new,
#slai-mobile-overlay #slai-screen-chat #slai-chat-new,
#slai-mobile-overlay #slai-chat-new {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    position: absolute !important;
    top: -9999px !important;
}

/* ─── THREAD (conversation area) ───────────────────────────────────
   box-sizing: border-box is CRITICAL — prevents padding from adding
   to the flex-stretched width and causing right-side overflow clipping.
   ─────────────────────────────────────────────────────────────────── */
#slai-mobile-overlay #slai-screen-chat #slai-chat-thread {
    box-sizing: border-box !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 20px 16px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    background: #F9FAFB !important;
    scroll-behavior: smooth !important;
}

/* ─── MESSAGE ROWS ──────────────────────────────────────────────── */
#slai-mobile-overlay #slai-screen-chat .slai-chat-msg {
    box-sizing: border-box !important;
    display: flex !important;
    width: 100% !important;
    gap: 10px !important;
}
/* AI: left-aligned row */
#slai-mobile-overlay #slai-screen-chat .slai-chat-msg--ai {
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
}
/* User: right-aligned row — justify-content:flex-end is the safe approach,
   no row-reverse which caused overflow on mobile Safari */
#slai-mobile-overlay #slai-screen-chat .slai-chat-msg--user {
    flex-direction: row !important;
    align-items: flex-end !important;
    justify-content: flex-end !important;
}

/* ─── AI AVATAR ─────────────────────────────────────────────────── */
#slai-mobile-overlay #slai-screen-chat .slai-chat-avatar {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background-color: #ffffff !important;
    background-image: url('https://summerlandplus.com/wp-content/uploads/SLAI.svg') !important;
    background-size: 16px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
    font-size: 0 !important;
    color: transparent !important;
    display: block !important;
}

/* ─── BUBBLES ────────────────────────────────────────────────────── */
/* Target BOTH base class and modifier-only class (advisor-v3.js omits base) */
#slai-mobile-overlay #slai-screen-chat .slai-chat-bubble,
#slai-mobile-overlay #slai-screen-chat .slai-chat-bubble--ai,
#slai-mobile-overlay #slai-screen-chat .slai-chat-bubble--user {
    box-sizing: border-box !important;
    display: block !important;
    font-family: -apple-system, 'Inter', sans-serif !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
    padding: 10px 14px !important;
    word-break: break-word !important;
    max-width: 78% !important;
    min-width: 0 !important;
}
#slai-mobile-overlay #slai-screen-chat .slai-chat-bubble--ai {
    background: #ffffff !important;
    color: #111827 !important;
    border-radius: 4px 18px 18px 18px !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05) !important;
}
#slai-mobile-overlay #slai-screen-chat .slai-chat-bubble--user {
    background: #10847E !important;
    color: #ffffff !important;
    border-radius: 18px 18px 4px 18px !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(16,132,126,0.18) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   BOTTOM COMPOSER DOCK
   Three-piece flex column inside .slai-screen--chat:
     1. #slai-suggestions-bar  ← sibling ABOVE the bar (not inside)
     2. .slai-chat-bar          ← white dock: input + disclaimer only
   ═══════════════════════════════════════════════════════════════════ */
#slai-mobile-overlay #slai-screen-chat .slai-chat-bar {
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    width: 100% !important;
    background: #ffffff !important;
    /* border-top removed — inner pill has its own border */
    border-top: none !important;
    box-shadow: none !important;
    padding: 10px 16px 6px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}


/* Inner pill: matches intro .slai-chat-box exactly */
#slai-mobile-overlay #slai-screen-chat .slai-chat-bar-inner,
#slai-mobile-overlay #slai-screen-chat .slai-advisor-wrapper .slai-chat-bar-inner {
    box-sizing: border-box !important;
    background: #ffffff !important;
    border: 1.5px solid #dde8e9 !important;
    border-radius: 16px !important;
    padding: 0 10px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 54px !important;
    box-shadow: 0 2px 12px rgba(16,132,126,0.06), 0 1px 3px rgba(0,0,0,0.04) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    position: relative !important;
}
#slai-mobile-overlay #slai-screen-chat .slai-chat-bar-inner:focus-within {
    border-color: #10847e !important;
    box-shadow: 0 0 0 3px rgba(16,132,126,0.1), 0 2px 16px rgba(16,132,126,0.12) !important;
}


/* Input field */
#slai-mobile-overlay #slai-screen-chat .slai-chat-main-input,
#slai-mobile-overlay #slai-screen-chat #slai-chat-main-input {
    flex: 1 !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    resize: none !important;
    font-family: -apple-system, 'Inter', sans-serif !important;
    font-size: 16px !important;
    color: #111827 !important;
    line-height: 1.5 !important;
    padding: 0 !important;
    min-height: 24px !important;
    max-height: 120px !important;
    height: auto !important;
    overflow-y: auto !important;
    -webkit-appearance: none !important;
    align-self: center !important;
}
#slai-mobile-overlay #slai-screen-chat .slai-chat-main-input::placeholder,
#slai-mobile-overlay #slai-screen-chat #slai-chat-main-input::placeholder {
    color: #9CA3AF !important;
}

/* Send button */
#slai-mobile-overlay #slai-screen-chat .slai-chat-bar-inner .slai-chat-main-send,
#slai-mobile-overlay #slai-screen-chat #slai-chat-main-send {
    box-sizing: border-box !important;
    width: 36px !important; height: 36px !important;
    min-width: 36px !important; min-height: 36px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    background: #10847E !important;
    color: #ffffff !important;
    border: none !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    transition: transform 0.12s, opacity 0.2s, background 0.15s !important;
    align-self: center !important;
    padding: 0 !important;
    box-shadow: 0 2px 8px rgba(16,132,126,0.25) !important;
}
#slai-mobile-overlay #slai-screen-chat #slai-chat-main-send:disabled {
    background: #D1D5DB !important;
    color: #9CA3AF !important;
    box-shadow: none !important;
}
#slai-mobile-overlay #slai-screen-chat #slai-chat-main-send:active {
    transform: scale(0.9) !important;
}
#slai-mobile-overlay #slai-screen-chat .slai-chat-bar-inner .slai-chat-main-send svg {
    display: block !important; width: 16px !important; height: 16px !important;
}

/* Hide old keyboard hint — replaced by disclaimer */
#slai-mobile-overlay #slai-screen-chat .slai-chat-bar-hint { display: none !important; }

/* ── AI Disclaimer ─────────────────────────────────────────────── */
#slai-mobile-overlay .slai-chat-disclaimer {
    display: block !important;
    font-size: 10.5px !important;
    color: #B0B8C4 !important;
    text-align: center !important;
    line-height: 1.45 !important;
    padding: 5px 16px 8px !important;
    margin: 0 !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
}

/* ── Suggestion chips bar ─────────────────────────────────────────
   Used in TWO places:
     1. #slai-suggestions-bar   ← chat screen (flex sibling of .slai-chat-bar)
     2. #slai-intro-suggestions  ← intro screen (above .slai-chat-box)
   Always a single horizontal-scroll row — never wraps, never clips.
   ──────────────────────────────────────────────────────────────── */
#slai-mobile-overlay .slai-suggestions-bar {
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;          /* single row — horizontal scroll if needed */
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 16px 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    width: 100% !important;
    /* flex-shrink:0 so it never collapses in the parent flex column */
    flex-shrink: 0 !important;
}
#slai-mobile-overlay .slai-suggestions-bar::-webkit-scrollbar { display: none !important; }

/* Hide suggestion bar when it has no chips (before first AI response) */
#slai-mobile-overlay .slai-suggestions-bar:empty {
    display: none !important;
    padding: 0 !important;
}

/* ── Intro screen: tighten bottom gap above the chat box ── */
#slai-mobile-overlay .slai-intro-suggestions-bar {
    padding-bottom: 2px !important;
    padding-top: 8px !important;
}


/* ── Suggestion bar chip ───────────────────────────────────────── */
#slai-mobile-overlay .slai-bar-chip {
    /* Layout */
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    /* Typography — sentence case, normal weight, never uppercase */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;  /* override any WoodMart button uppercase */
    /* Colours — light pill with teal hint */
    color: #1a2e2e !important;
    background: #ffffff !important;
    border: 1px solid #cfdede !important;
    border-radius: 100px !important;
    /* Spacing */
    padding: 7px 14px !important;
    /* No clipping */
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    /* Interaction */
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: background 0.14s, border-color 0.14s, color 0.14s !important;
    /* Reset any inherited button weirdness */
    outline: none !important;
    box-shadow: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}
#slai-mobile-overlay .slai-bar-chip:hover,
#slai-mobile-overlay .slai-bar-chip:active {
    background: rgba(16,132,126,0.07) !important;
    border-color: rgba(16,132,126,0.40) !important;
    color: #10847E !important;
}

/* ── Legacy thread suggestion chips (backward compat) ─────────── */
#slai-mobile-overlay .slai-chat-suggestions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
    padding: 4px 0 10px 38px !important;
    margin: 0 !important;
}
#slai-mobile-overlay .slai-chat-suggestion {
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: #10847E !important;
    background: rgba(16,132,126,0.06) !important;
    border: 1px solid rgba(16,132,126,0.20) !important;
    border-radius: 100px !important;
    padding: 6px 12px !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: background 0.14s, border-color 0.14s !important;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    outline: none !important;
    box-shadow: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}
#slai-mobile-overlay .slai-chat-suggestion:active,
#slai-mobile-overlay .slai-chat-suggestion:hover {
    background: rgba(16,132,126,0.14) !important;
    border-color: rgba(16,132,126,0.40) !important;
}




/* ═══════════════════════════════════════════════════════════════════
   QUIZ / RESULTS / LOADING screens
   ═══════════════════════════════════════════════════════════════════ */
#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 overlay entirely
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
    #slai-mobile-overlay, #slai-app-bar { display: none !important; }
}



/* ─── Nuclear nav-bar hide: three selectors, zero chance of showing through ─── */
body.slai-is-open #mobnav-bar,
body:has(#slai-mobile-overlay.slai-overlay--open) #mobnav-bar,
#slai-mobile-overlay.slai-overlay--open ~ #mobnav-bar {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}