/* ═══════════════════════════════════════════════════════════════
   SUMMERLAND AIPLUS  ·  advisor.css  v3.0.0
   Rebuilt from scratch — stable flex layout, single scroll owner
   Full-width · brand-perfect · #10847E · #ffb63d · #eff4f5
   ══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Outfit:wght@400;600;700;800&display=swap');

/* ═══════════════════════════════════════════════════════════════
   DESIGN TOKENS
   ══════════════════════════════════════════════════════════════ */
.slai-advisor-wrapper {
    --slai-teal:          #10847E;
    --slai-teal-dark:     #0c6b66;
    --slai-teal-mid:      #13a89f;
    --slai-yellow:        #ffb63d;
    --slai-yellow-dark:   #e8a02a;
    --slai-mint:          #eff4f5;
    --slai-mint-dark:     #e2ecee;

    --slai-bg-page:       #eff4f5;
    --slai-bg-surface:    #e8eef0;
    --slai-bg-card:       #ffffff;
    --slai-border:        #dde8e9;
    --slai-border-strong: #b4cfd0;

    --slai-grad-primary:  linear-gradient(135deg, #10847E 0%, #0fa89f 100%);
    --slai-grad-yellow:   linear-gradient(135deg, #ffb63d 0%, #f59e0b 100%);
    --slai-grad-hero:     linear-gradient(135deg, #0c6b66 0%, #10847E 50%, #13a89f 100%);

    --slai-text-1:        #1a2e2e;
    --slai-text-2:        #2d4a4a;
    --slai-text-3:        #5a7a7a;
    --slai-text-muted:    #8aabab;

    --slai-radius-sm:     8px;
    --slai-radius:        10px;
    --slai-radius-lg:     16px;
    --slai-shadow-btn:    0 4px 14px rgba(16,132,126,0.2);
    --slai-shadow-hover:  0 8px 24px rgba(16,132,126,0.12);
    --slai-ease:          cubic-bezier(0.2, 0.8, 0.2, 1);
    --slai-font:          'Inter', -apple-system, sans-serif;
    --slai-font-display:  'Outfit', 'Inter', sans-serif;
}

/* ═══════════════════════════════════════════════════════════════
   RESET (scoped)
   ══════════════════════════════════════════════════════════════ */
.slai-advisor-wrapper *,
.slai-advisor-wrapper *::before,
.slai-advisor-wrapper *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ═══════════════════════════════════════════════════════════════
   WRAPPER  —  normal document flow, full-width breakout
   ─────────────────────────────────────────────────────────────
   The wrapper has NO fixed height. Each screen (.slai-screen)
   has its own controlled height so it fills the visible viewport
   exactly. The wrapper just clips them and provides the breakout.
   This is the only approach that guarantees zero page scroll:
   the wrapper is exactly as tall as the visible screen inside it.
   ══════════════════════════════════════════════════════════════ */
.slai-advisor-wrapper {
    font-family:  var(--slai-font);
    font-size:    16px;
    line-height:  1.6;
    color:        var(--slai-text-1);

    /* Full-width breakout */
    width:        100vw;
    max-width:    100vw;
    margin-left:  calc(50% - 50vw);
    margin-bottom: 0;

    /* Height = viewport minus header AND any fixed bottom nav.
       Both vars are measured by JS on load + resize. */
    height: calc(100dvh - var(--slai-header-h, 155px) - var(--slai-bottom-h, 0px));

    position:     relative;
    z-index:      10;
    overflow:     hidden;
    overflow-anchor: none;
}


/* ──────────────────────────────────────────────────────────────
   CONTENT WIDTH CONSTRAINT
   Inner containers: the wrapper is already max-width:1100px,
   so inner content just needs small horizontal padding.
   No margin-auto centering needed — wrapper handles that.
   ────────────────────────────────────────────────────────────── */
.slai-intro-inner {
    /* Match the site nav container width — content stays within menu edges */
    max-width:     860px;
    width:         100%;
    text-align:    center;
    position:      relative;
    z-index:       2;
    padding:       0 20px;
    box-sizing:    border-box;
    margin-left:   auto;
    margin-right:  auto;
}
.slai-quiz-header-inner {
    max-width:     760px;
    margin:        0 auto;
}
.slai-results-header-inner {
    max-width:     700px;
    margin:        0 auto;
}

/* ──────────────────────────────────────────────────────────────
   THEME OVERRIDES
   ────────────────────────────────────────────────────────────── */

/* Lock viewport scroll on html ONLY.
   IMPORTANT: do NOT put overflow:hidden on body — body overflow:hidden
   creates a new BFC that clips the 100vw breakout and left-aligns
   all content (the bug the user reported). html overflow:hidden is
   enough to prevent page scroll without affecting body layout. */
html:has(.slai-advisor-wrapper) {
    overflow: hidden;
}

/* Chat screen is always a fixed-height flex column — page NEVER scrolls.
   The thread scrolls internally; header and input bar are fixed rows. */

/* Kill content layout padding (vertical only — preserve horizontal) */
body:has(.slai-advisor-wrapper) .wd-content-layout {
    padding-top:    0 !important;
    padding-bottom: 0 !important;
    margin-top:     0 !important;
    margin-bottom:  0 !important;
}

/* Strip theme content wrappers of extra vertical space —
   Covers WoodMart, Elementor, and core WordPress page wrappers.
   Any residual padding pushes the wrapper below the html clip boundary. */
body:has(.slai-advisor-wrapper) .wd-page-content,
body:has(.slai-advisor-wrapper) .site-content,
body:has(.slai-advisor-wrapper) .content-area,
body:has(.slai-advisor-wrapper) #content,
body:has(.slai-advisor-wrapper) .entry-content,
body:has(.slai-advisor-wrapper) .page-content,
body:has(.slai-advisor-wrapper) .hentry,
body:has(.slai-advisor-wrapper) .post,
body:has(.slai-advisor-wrapper) article,
body:has(.slai-advisor-wrapper) .wd-single-product-page,
body:has(.slai-advisor-wrapper) .elementor-section-wrap {
    min-height:     0 !important;
    padding-top:    0 !important;
    padding-bottom: 0 !important;
    margin-top:     0 !important;
    margin-bottom:  0 !important;
}

/* Hide footer — advisor page is an app-like experience */
body:has(.slai-advisor-wrapper) .site-footer,
body:has(.slai-advisor-wrapper) footer.site-footer,
body:has(.slai-advisor-wrapper) #colophon {
    display: none !important;
}

/* ── Chat screen active: fixed height wrapper, thread scrolls internally.
   The wrapper keeps its fixed calc() height — no page scroll needed.
   Header and input bar are flex-shrink:0 rows; only .slai-chat-thread
   scrolls. No sticky, no position changes needed. ── */
.slai-advisor-wrapper:has(.slai-screen--chat.slai-screen--active) {
    /* keep the fixed height — do NOT set to auto */
    overflow: hidden;
}
.slai-screen--chat.slai-screen--active {
    /* stay inside the absolute/fixed stack — fills wrapper exactly */
    position:  absolute !important;
    inset:     0 !important;
    height:    100% !important;
    min-height: unset !important;
}
/* Thread scrolls internally — flex:1 takes all remaining space */
.slai-screen--chat.slai-screen--active .slai-chat-thread {
    flex:       1 !important;
    overflow-y: auto !important;
    height:     auto !important;
    min-height: 0 !important;
}
/* Header and input bar: no overrides needed — base rules already correct */
.slai-screen--chat.slai-screen--active .slai-chat-hd {
    position:   relative;
    top:        unset;
    z-index:    2;
    margin-top: 10px;
}
.slai-screen--chat.slai-screen--active .slai-chat-bar {
    position: relative;
    bottom:   unset;
    z-index:  2;
}

/* ═══════════════════════════════════════════════════════════════
   SCREEN SWITCHER
   ══════════════════════════════════════════════════════════════ */
/* Screens fill the wrapper exactly via inset:0.
   No overflow beyond the wrapper — overflow:hidden never clips them. */
.slai-screen {
    position:       absolute;
    inset:          0;  /* top:0 left:0 right:0 bottom:0 — fills wrapper */
    background:     #eff4f5;
    visibility:     hidden;
    opacity:        0;
    pointer-events: none;
    z-index:        1;
    transform:      translateZ(0);
    transition:     none !important;
}
@media (max-width: 680px) {
    /* Mobile: dvh shrinks dynamically when browser chrome appears/changes.
       --slai-header-h is the real measured header offset set by JS.
       Fallback 80px covers most collapsed mobile headers. */
    .slai-advisor-wrapper {
        height: calc(100dvh - var(--slai-header-h, 80px) - var(--slai-bottom-h, 0px));
        overflow-x: hidden;
    }
}
.slai-screen--active {
    visibility:     visible;
    opacity:        1;
    pointer-events: auto;
    z-index:        2;
    transform:      translateZ(0);
    transition:     none !important;
}

.slai-screen--quiz.slai-screen--active    { display: flex !important; flex-direction: column; }
.slai-screen--loading.slai-screen--active { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; }
/* Intro: vertically centred with space-evenly so content fills the wrapper
   height gracefully instead of packing against the top. */
.slai-screen--intro.slai-screen--active   { display: flex !important; flex-direction: column;
                                             align-items: center; justify-content: center; }

/* Results screens scroll internally */
.slai-screen--results,
.slai-screen--no-results {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

/* ── Preloader ── */
@keyframes slai-spin {
    to { transform: rotate(360deg); }
}
/* ═══════════════════════════════════════════════════════════════
   PRELOADER — full-screen overlay, dissolves into the page
   ════════════════════════════════════════════════════════════ */
.slai-preloader {
    position:        fixed;
    inset:           0;
    z-index:         9999;
    /* Same white as the intro screen — dissolve is invisible */
    background:      #ffffff;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             32px;
    /* Pure dissolve — no movement */
    transition:      opacity 0.5s ease;
    will-change:     opacity;
}
.slai-preloader.slai-preloader--hidden {
    opacity:        0;
    pointer-events: none;
}
/* Inner content fades out slightly ahead for a layered dissolve */
.slai-preloader.slai-preloader--hidden .slai-preloader-inner {
    opacity:    0;
    transition: opacity 0.25s ease;
}

/* ── Inner content — no card, just centred elements ── */
.slai-preloader-inner {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            28px;
    width:          min(320px, 88vw);
    transition:     opacity 0s; /* overridden when hidden */
}

/* ── Logo ── */
.slai-preloader-logo { display: none; } /* replaced by orb */
.slai-preloader-svg  { display: none; }

/* Preloader orb = same conic gradient spinner as loading screen */
.slai-preloader-orb {
    margin-bottom: 4px;
}

/* ── Phrase ── */
.slai-pl-phrase {
    font-family:    'Inter', -apple-system, sans-serif;
    font-size:      14px;
    font-weight:    500;
    color:          #8aabab;
    letter-spacing: -0.1px;
    margin:         0;
    text-align:     center;
    transition:     opacity 0.3s ease;
}
.slai-pl-phrase.slai-phrase--fade { opacity: 0; }

/* Hide old progress/step elements */
.slai-preloader-progress-wrap,
.slai-preloader-progress-bar,
.slai-preloader-steps,
.slai-pl-step { display: none !important; }


/* ═══════════════════════════════════════════════════════════════
   ①  INTRO SCREEN
   ══════════════════════════════════════════════════════════════ */
.slai-screen--intro {
    background: #ffffff !important;
    /* padding: generous top/bottom, zero sides (inner handles that) */
    padding:    40px 24px 32px;
    position:   absolute;
    overflow:   hidden;
}
.slai-screen--intro,
.slai-screen--intro * { box-sizing: border-box; }

/* ── Animated gradient background ── */
.slai-screen--intro::before {
    content: '';
    position: absolute;
    width: 820px; height: 820px;
    top: 50%; left: 50%;
    background: conic-gradient(
        from 0deg,
        rgba(239,244,245,0.95)      0%,
        rgba(16,132,126,0.10)       20%,
        rgba(239,244,245,0.85)      40%,
        rgba(255,182,61,0.08)       60%,
        rgba(16,132,126,0.07)       80%,
        rgba(239,244,245,0.95)      100%
    );
    border-radius: 50%;
    animation: slai-intro-spin 14s linear infinite;
    pointer-events: none;
    z-index: 0;  /* behind content — cannot push layout */
    -webkit-mask-image: radial-gradient(ellipse 55% 55% at 50% 50%, #000 40%, transparent 70%);
            mask-image: radial-gradient(ellipse 55% 55% at 50% 50%, #000 40%, transparent 70%);
}
@keyframes slai-intro-spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}
.slai-screen--intro::after {
    content: '';
    display: block;
    position: absolute;
    width: 420px; height: 420px;
    bottom: -80px; right: -60px;
    background: radial-gradient(ellipse, rgba(255,182,61,0.12) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;  /* behind content */
}

/* Centred content shell — inline with .slai-intro-inner above */

/* Brand mark */
.slai-advisor-mark {
    display:         inline-flex;
    width:  46px; height: 46px;
    align-items:     center;
    justify-content: center;
    background:      #10847E !important;
    border:          none !important;
    border-radius:   13px;
    font-size:       20px;
    color:           #fff !important;
    margin-bottom:   18px;
    box-shadow:      0 6px 20px rgba(16,132,126,0.28);
    overflow:        hidden;
}
.slai-advisor-mark-img {
    width:      32px !important;
    height:     32px !important;
    object-fit: contain !important;
    display:    block !important;
    border:     none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding:    0 !important;
    margin:     0 !important;
}

.slai-screen--intro .slai-intro-question {
    font-family:    'Outfit', 'Inter', sans-serif !important;
    font-size:      clamp(22px, 2.6vw, 32px) !important;
    font-weight:    700 !important;
    color:          #1a2e2e !important;
    line-height:    1.2;
    margin-bottom:  10px;
    letter-spacing: -0.4px;
}
.slai-screen--intro .slai-intro-hint {
    font-size:     14.5px;
    color:         #5a7a7a !important;
    margin-bottom: 28px;
    line-height:   1.5;
}

/* ── Concern grid ── */
.slai-concern-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   10px;
    margin-bottom:         24px;
    max-width:             580px;
    margin-left:           auto;
    margin-right:          auto;
}
@media (max-width: 600px) {
    .slai-concern-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        margin-bottom: 16px;
    }
}

.slai-screen--intro .slai-concern-chip {
    background:     #ffffff82 !important;
    border:         1.5px solid rgba(16,132,126,0.18) !important;
    border-radius:  14px !important;
    padding:        16px 10px 14px !important;
    font-family:    'Inter', sans-serif !important;
    font-size:      12.5px !important;
    font-weight:    600 !important;
    color:          #10847E !important;
    cursor:         pointer;
    transition:     transform 0.4s var(--slai-ease), background 0.3s var(--slai-ease),
                    box-shadow 0.4s var(--slai-ease), border-color 0.3s var(--slai-ease), color 0.3s var(--slai-ease);
    will-change:    transform, box-shadow;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            8px;
    text-align:     center;
    line-height:    1.25;
}
.slai-screen--intro .slai-concern-chip-icon {
    display:     flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.slai-screen--intro .slai-concern-chip-icon svg {
    width:      28px;
    height:     28px;
    flex-shrink: 0;
    transition: filter 0.25s ease;
}
@media (max-width: 600px) {
    .slai-screen--intro .slai-concern-chip {
        padding: 10px 8px 9px !important;
        gap: 5px !important;
    }
    .slai-screen--intro .slai-concern-chip-icon { font-size: 18px; }
}
.slai-screen--intro .slai-concern-chip:hover,
.slai-screen--intro .slai-concern-chip:focus-visible {
    background:   #10847E !important;
    border-color: #10847E !important;
    color:        #ffffff !important;
    transform:    translateY(-3px);
    box-shadow:   var(--slai-shadow-hover);
}
.slai-screen--intro .slai-concern-chip:hover   .slai-concern-chip-icon svg,
.slai-screen--intro .slai-concern-chip:focus-visible .slai-concern-chip-icon svg {
    filter: brightness(0) invert(1);
}
.slai-screen--intro .slai-concern-chip:active {
    transform:    scale(0.96);
    transition-duration: 0.1s;
}

/* ═══════════════════════════════════════════════════════════════
   AI CHAT INPUT — intro box
   ══════════════════════════════════════════════════════════════ */
.slai-chat-wrap {
    width:  100%;
    margin: 12px 0 4px;   /* was 20px — tightened */
}

.slai-chat-box {
    display:          flex         !important;
    align-items:      center       !important;
    gap:              0            !important; /* icon is abs-pos, no gap needed */
    background:       #ffffff      !important;
    border:           1.5px solid #dde8e9 !important;
    border-radius:    16px         !important;
    /* Symmetric padding — icon positioned absolutely, so left == right */
    padding:          0 10px       !important;
    box-shadow:       0 2px 12px rgba(16,132,126,0.06), 0 1px 3px rgba(0,0,0,0.04);
    transition:       border-color 0.2s ease, box-shadow 0.2s ease;
    cursor:           text         !important;
    position:         relative     !important; /* needed for abs-pos spark */
    font-family:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    min-height:       54px         !important;
}
.slai-chat-box: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;
}

/* Spark: absolute-positioned and perfectly centered — immune to flex issues */
.slai-chat-spark {
    position:       absolute      !important;
    left:           14px          !important;
    top:            50%           !important;
    transform:      translateY(-50%) !important;
    font-size:      16px;
    color:          #10847e;
    line-height:    1;
    opacity:        0.6;
    transition:     opacity 0.2s ease, transform 0.3s ease;
    user-select:    none          !important;
    pointer-events: none          !important; /* clicks pass through to textarea */
    z-index:        1;
}
.slai-chat-box:focus-within .slai-chat-spark {
    opacity:   0.9;
    transform: translateY(-50%) scale(1.12) rotate(18deg);
}

/* ── Textarea ── */
.slai-advisor-wrapper .slai-chat-box .slai-chat-input {
    flex:           1           !important;
    align-self:     center      !important;
    border:         none        !important;
    outline:        none        !important;
    box-shadow:     none        !important;
    background:     transparent !important;
    font-family:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-size:      16px        !important;
    line-height:    1.5         !important;
    color:          #1a2e2e     !important;
    resize:         none        !important;
    /* Natural 1-row height. Box is 54px tall; flex centers this smaller element.
       DO NOT set min-height: 54px — that makes textarea fill the container
       and text always appears top-pinned. */
    min-height:     28px        !important;
    max-height:     140px       !important;
    height:         auto        !important;
    overflow-y:     auto        !important;
    /* 38px left = 14px (box left) + 16px (icon) + 8px (gap to text) */
    padding:        4px 4px 4px 38px !important;
    margin:         0           !important;
    width:          100%        !important;
    scrollbar-width: thin;
    scrollbar-color: #dde8e9 transparent;
    word-break:     break-word;
    letter-spacing: -0.01em;
}

.slai-advisor-wrapper .slai-chat-box .slai-chat-input::placeholder {
    color:      #a8c4c4 !important;
    font-style: normal  !important;
    transition: opacity 0.15s;
}
.slai-advisor-wrapper .slai-chat-box .slai-chat-input:focus::placeholder { opacity: 0.5; }
.slai-advisor-wrapper .slai-chat-box .slai-chat-input::-webkit-scrollbar { width: 4px; }
.slai-advisor-wrapper .slai-chat-box .slai-chat-input::-webkit-scrollbar-thumb { background: #dde8e9; border-radius: 4px; }

/* Animated typing-cursor placeholder */
.slai-placeholder-cursor {
    display:          inline-block;
    width:            2px;
    height:           1em;
    background:       var(--slai-teal);
    margin-left:      1px;
    vertical-align:   text-bottom;
    border-radius:    1px;
    animation:        slai-cursor-blink 0.9s step-end infinite;
}
@keyframes slai-cursor-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

/* ── Send button: MUST beat WoodMart button{} with wrapper specificity + !important ── */
.slai-advisor-wrapper .slai-chat-box .slai-chat-send {
    flex-shrink:     0           !important;
    width:           40px        !important;
    height:          40px        !important;
    min-width:       40px        !important;
    border-radius:   10px        !important;
    border:          none        !important;
    background:      #10847e     !important;  /* hard-coded — var() can be eaten by theme */
    color:           #ffffff     !important;
    display:         flex        !important;
    align-items:     center      !important;
    justify-content: center      !important;
    cursor:          pointer     !important;
    box-shadow:      0 2px 8px rgba(16,132,126,0.3) !important;
    transition:      background 0.18s, transform 0.12s, box-shadow 0.18s !important;
    padding:         0           !important;
    margin:          0           !important;
    line-height:     1           !important;
    opacity:         1           !important;
}
.slai-advisor-wrapper .slai-chat-box .slai-chat-send:hover:not(:disabled) {
    background:  #0d7a74 !important;
    transform:   translateY(-1px);
    box-shadow:  0 4px 14px rgba(16,132,126,0.38) !important;
}
.slai-advisor-wrapper .slai-chat-box .slai-chat-send:active:not(:disabled) {
    transform: scale(0.93);
    transition-duration: 0.08s;
}
.slai-advisor-wrapper .slai-chat-box .slai-chat-send:disabled {
    background:  #c8dddd !important;
    color:       #8ab0b0 !important;
    box-shadow:  none    !important;
    cursor:      default !important;
    transform:   none;
}
.slai-advisor-wrapper .slai-chat-box .slai-chat-send svg {
    display:  block !important;
    width:    17px  !important;
    height:   17px  !important;
    flex-shrink: 0;
}

.slai-chat-hint {
    font-size:   11.5px;
    color:       var(--slai-text-muted);
    text-align:  center;
    margin-top:  7px;
    letter-spacing: 0.01em;
    transition:  opacity 0.3s ease;
}

/* ── Chat message thread (intro inline version) ── */
.slai-chat-messages {
    display:        flex;
    flex-direction: column;
    gap:            10px;
    max-height:     280px;
    overflow-y:     auto;
    padding:        4px 2px 12px;
    margin-bottom:  8px;
    opacity:        0;
    height:         0;
    overflow:       hidden;
    transition:     opacity 0.3s ease, height 0.35s ease;
    scrollbar-width: thin;
    scrollbar-color: #dde8e9 transparent;
}
.slai-chat-messages--active {
    opacity:    1;
    height:     auto;
    overflow-y: auto;
}
.slai-chat-messages::-webkit-scrollbar { width: 4px; }
.slai-chat-messages::-webkit-scrollbar-thumb { background: #dde8e9; border-radius: 4px; }

/* Message row */
.slai-chat-msg {
    display:   flex;
    gap:       8px;
    animation: slai-msg-in 0.28s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes slai-msg-in {
    from { opacity: 0; transform: translateY(10px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.slai-chat-msg--ai  { align-items: flex-start; }
.slai-chat-avatar {
    width:           28px;
    height:          28px;
    border-radius:   50%;
    background:      linear-gradient(135deg, var(--slai-teal), #0d9488);
    color:           #fff;
    font-size:       12px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    margin-top:      2px;
    box-shadow:      0 2px 8px rgba(16,132,126,0.25);
}
.slai-chat-bubble--ai {
    background:    #ffffff;
    border:        1.5px solid #e8f0f0;
    border-radius: 4px 16px 16px 16px;
    padding:       10px 14px;
    font-size:     13.5px;
    color:         var(--slai-text-1);
    line-height:   1.55;
    max-width:     78%;
    box-shadow:    0 1px 6px rgba(0,0,0,0.05);
}

.slai-chat-msg--user { flex-direction: row-reverse; }
.slai-chat-bubble--user {
    background:    var(--slai-teal);
    border-radius: 16px 4px 16px 16px;
    padding:       10px 14px;
    font-size:     13.5px;
    color:         #fff;
    line-height:   1.55;
    max-width:     78%;
}

/* Typing indicator */
.slai-chat-typing  { display: flex; align-items: center; gap: 8px; }
.slai-typing-dots {
    display:        flex;
    gap:            4px;
    padding:        10px 14px;
    background:     #ffffff;
    border:         1.5px solid #e8f0f0;
    border-radius:  4px 16px 16px 16px;
    box-shadow:     0 1px 6px rgba(0,0,0,0.05);
}
.slai-typing-dots span {
    width:            6px;
    height:           6px;
    border-radius:    50%;
    background:       var(--slai-teal);
    opacity:          0.4;
    animation:        slai-bounce 1.2s ease-in-out infinite;
}
.slai-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.slai-typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes slai-bounce {
    0%, 80%, 100% { transform: scale(0.7); opacity: 0.4; }
    40%            { transform: scale(1.1); opacity: 1;   }
}

/* ── Divider ── */
.slai-intro-divider {
    display:        flex;
    align-items:    center;
    gap:            12px;
    margin:         0 0 12px;   /* was 20px — tightened for compact layout */
    color:          #b4cfd0 !important;
    font-size:      10.5px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.slai-intro-divider::before,
.slai-intro-divider::after { content: ''; flex: 1; height: 1px; background: #dde8e9; }

/* ── Full assessment button ── */
#slai-start-btn {
    background:    #ffffffc9 !important;
    border:        1.5px solid rgba(16,132,126,0.35) !important;
    border-radius: 100px !important;
    color:         #10847E !important;
    font-family:   'Inter', sans-serif;
    font-size:     13.5px;
    font-weight:   600;
    padding:       11px 26px;
    cursor:        pointer;
    display:       inline-flex;
    align-items:   center;
    gap:           8px;
    transition:    all 0.18s ease;
}
#slai-start-btn:hover {
    background:   rgba(16,132,126,0.06) !important;
    border-color: #10847E !important;
    color:        #10847E !important;
    transform:    translateY(-1px);
}
#slai-start-btn:active {
    transform:    scale(0.97);
    transition-duration: 0.1s;
}
.slai-intro-note {
    margin-top:     14px;
    font-size:      11px;
    color:          #8aabab !important;
    letter-spacing: 0.02em;
}

/* ── Legacy aliases ── */
.slai-chip { /* JS hook only */ }
.slai-btn {
    display:         inline-flex; align-items: center; gap: 8px;
    border:          none; border-radius: 100px; font-family: var(--slai-font);
    font-weight:     600; cursor: pointer; transition: all 0.18s var(--slai-ease);
    text-decoration: none; white-space: nowrap; line-height: 1;
}


/* ═══════════════════════════════════════════════════════════════
   ②  DEDICATED CHAT SCREEN
   ─────────────────────────────────────────────────────────────
   WHY this layout is stable:
   The chat screen is a three-row flex column that fills the
   wrapper's fixed height exactly:

       ┌─────────────────┐  ← .slai-chat-hd   (flex-shrink:0)
       │   Header        │
       ├─────────────────┤
       │   Thread        │  ← .slai-chat-thread (flex:1, scroll here)
       │   (scrollable)  │
       ├─────────────────┤
       │   Input bar     │  ← .slai-chat-bar  (flex-shrink:0)
       └─────────────────┘

   Because the screen is position:absolute with top/left/right/
   bottom:0, it always fills the wrapper precisely. The thread
   row gets exactly the remaining space and scrolls internally.
   The page NEVER scrolls. No sticky positioning is needed.
   ══════════════════════════════════════════════════════════════ */
.slai-screen--chat {
    /* Flex column that fills the fixed-height wrapper */
    display:        flex;
    flex-direction: column;
    /* Overflow hidden on the container — ONLY the thread scrolls */
    overflow:       hidden;
    background:     #f8fafa;

    /* IMPORTANT: position is NOT overridden here.
       The base .slai-screen rule sets position:absolute.
       This screen stays in the absolute stacking context at all
       times — active or not. This is the fix for the empty-space
       and position-change bugs. */
}

/* ── Chat Header ── */
.slai-chat-hd {
    display:         flex;
    align-items:     center;
    gap:             10px;
    padding:         8px max(15px, calc(50% - 670px));
    background:      #ffffff;
    border-bottom:   1px solid #edf2f2;
    box-shadow:      0 1px 0 #edf2f2, 0 2px 8px rgba(0,0,0,0.04);
    flex-shrink:     0;
    z-index:         2;
    width:           100%;
    box-sizing:      border-box;
    min-height:      52px;
}

/* ── Apple-style Back button ── */
.slai-chat-hd-back {
    display:       inline-flex;
    align-items:   center;
    gap:           4px;
    background:    rgba(16,132,126,0.07);
    border:        none;
    border-radius: 100px;
    cursor:        pointer;
    color:         var(--slai-teal);
    font-size:     13px;
    font-weight:   500;
    font-family:   var(--slai-font);
    padding:       6px 13px 6px 10px;
    letter-spacing: -0.01em;
    transition:    background 0.15s ease, color 0.15s ease, transform 0.12s ease;
    flex-shrink:   0;
    white-space:   nowrap;
    line-height:   1;
}
.slai-chat-hd-back svg {
    width:  15px;
    height: 15px;
    flex-shrink: 0;
    stroke-width: 2.5;
    stroke: currentColor;
}
.slai-chat-hd-back:hover {
    background: rgba(16,132,126,0.14);
    color:      #0c6b66;
    transform:  translateX(-1px);
}
.slai-chat-hd-back:active { transform: scale(0.95); transition-duration: 0.08s; }

.slai-chat-hd-brand {
    display:     flex;
    align-items: center;
    gap:         8px;
    flex:        1;
    min-width:   0;
}
.slai-chat-hd-icon {
    width:           32px;
    height:          32px;
    border-radius:   50%;
    background:      none;
    color:           var(--slai-teal);
    font-size:       13px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
}
@keyframes slai-spin-idle {
    0%   { transform: rotate(0deg);   }
    100% { transform: rotate(360deg); }
}
.slai-chat-hd-name {
    font-size:   13.5px;
    font-weight: 700;
    color:       var(--slai-text-1);
    margin:      0;
    line-height: 1.2;
}
.slai-chat-hd-sub {
    font-size:  11px;
    color:      var(--slai-text-muted);
    margin:     0;
    line-height: 1.2;
}
/* ── Apple-style New button ── */
.slai-chat-hd-new {
    display:       inline-flex;
    align-items:   center;
    gap:           4px;
    background:    var(--slai-teal);
    border:        none;
    border-radius: 100px;
    padding:       6px 13px 6px 10px;
    font-size:     13px;
    font-weight:   600;
    font-family:   var(--slai-font);
    color:         #ffffff;
    cursor:        pointer;
    letter-spacing: -0.01em;
    transition:    background 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
    flex-shrink:   0;
    white-space:   nowrap;
    line-height:   1;
    box-shadow:    0 2px 8px rgba(16,132,126,0.28);
}
.slai-chat-hd-new svg {
    width:  14px;
    height: 14px;
    flex-shrink: 0;
    stroke-width: 2.5;
    stroke: currentColor;
}
.slai-chat-hd-new:hover {
    background:  #0d7a74;
    box-shadow:  0 4px 14px rgba(16,132,126,0.38);
    transform:   translateY(-1px);
    color:       #ffffff;
}
.slai-chat-hd-new:active { transform: scale(0.95); transition-duration: 0.08s; }

/* ── Message thread ── */
.slai-chat-thread {
    flex:       1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding:    24px max(20px, calc(50% - 670px)) 8px;
    display:    flex;
    flex-direction: column;
    gap:        0;  /* spacing handled by margin-bottom on each message row */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #dde8e9 transparent;
    background: #f9fafa;
}
.slai-chat-thread::-webkit-scrollbar { width: 4px; }
.slai-chat-thread::-webkit-scrollbar-thumb { background: #dde8e9; border-radius: 4px; }

/* ── Message rows ── */
.slai-chat-msg {
    display:   flex;
    gap:       10px;
    animation: slai-msg-in 0.22s ease both;
    max-width: 100%;
}
@keyframes slai-msg-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0);   }
}

/* AI message: no border, just clean text */
.slai-chat-msg--ai {
    align-items: flex-start;
    margin-bottom: 16px;
}
.slai-chat-avatar {
    width:           28px;
    height:          28px;
    border-radius:   50%;
    background:      linear-gradient(135deg, var(--slai-teal), #0d9488);
    color:           #fff;
    font-size:       11px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    margin-top:      2px;
}
.slai-chat-bubble--ai {
    background:    transparent;
    border:        none;
    border-radius: 0;
    padding:       0;
    font-size:     14.5px;
    color:         var(--slai-text-1);
    line-height:   1.65;
    max-width:     calc(100% - 38px);
}
/* Paragraph spacing inside AI bubbles */
.slai-chat-bubble--ai p { margin: 0 0 8px; }
.slai-chat-bubble--ai p:last-child { margin-bottom: 0; }
.slai-chat-bubble--ai ul { margin: 4px 0 8px 16px; padding: 0; }
.slai-chat-bubble--ai li { margin-bottom: 4px; }

/* User message: clean right-aligned pill */
.slai-chat-msg--user {
    flex-direction: row-reverse;
    margin-bottom: 6px;
}
.slai-chat-bubble--user {
    background:    var(--slai-teal);
    border-radius: 18px 18px 4px 18px;
    padding:       10px 16px;
    font-size:     14px;
    color:         #fff;
    line-height:   1.55;
    max-width:     72%;
}

/* Typing indicator — minimal dots */
.slai-chat-typing  { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.slai-typing-dots {
    display:        flex;
    gap:            5px;
    padding:        10px 4px;
    align-items:    center;
}
.slai-typing-dots span {
    width:            7px;
    height:           7px;
    border-radius:    50%;
    background:       var(--slai-teal);
    opacity:          0.25;
    animation:        slai-bounce 1.4s ease-in-out infinite;
}
.slai-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.slai-typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes slai-bounce {
    0%, 80%, 100% { transform: scale(0.8); opacity: 0.25; }
    40%           { transform: scale(1.2); opacity: 1;    }
}

/* ── Follow-up suggestion chips — appear after AI reply ── */
.slai-chat-suggestions {
    display:         flex;
    flex-wrap:       wrap;
    gap:             7px;
    margin:          4px 0 18px 38px;
    animation:       slai-msg-in 0.3s 0.1s ease both;
}
.slai-chat-suggestion {
    background:    #ffffff;
    border:        1.5px solid #d8ecec;
    border-radius: 100px;
    padding:       6px 14px;
    font-size:     12.5px;
    font-weight:   500;
    color:         var(--slai-teal);
    cursor:        pointer;
    transition:    background 0.15s, border-color 0.15s, transform 0.15s;
    white-space:   nowrap;
    font-family:   var(--slai-font);
    line-height:   1;
}
.slai-chat-suggestion:hover {
    background:    rgba(16,132,126,0.06);
    border-color:  var(--slai-teal);
    transform:     translateY(-1px);
}

/* ══ Chat screen input bar ══════════════════════════════════════════
   All rules scoped under .slai-advisor-wrapper to beat WoodMart theme.
   Hard-coded values instead of var() where theme can redefine variables.
   ══════════════════════════════════════════════════════════════════ */
.slai-advisor-wrapper .slai-chat-bar {
    flex-shrink:   0             !important;
    padding:       10px max(15px, calc(50% - 670px)) 10px !important;
    background:    #ffffff       !important;
    border-top:    1px solid #edf2f2 !important;
}

.slai-advisor-wrapper .slai-chat-bar-inner {
    display:       flex          !important;
    align-items:   center        !important; /* center for single-line; grows to flex-end on multiline via JS if needed */
    gap:           8px           !important;
    background:    #f4fafa       !important;
    border:        1.5px solid #dce9e9 !important;
    border-radius: 14px          !important;
    padding:       10px 10px 10px 16px !important;
    transition:    border-color 0.2s, box-shadow 0.2s, background 0.2s;
    font-family:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    min-height:    54px          !important;
}
.slai-advisor-wrapper .slai-chat-bar-inner:focus-within {
    border-color:  #10847e       !important;
    box-shadow:    0 0 0 3px rgba(16,132,126,0.1) !important;
    background:    #ffffff       !important;
}

/* Textarea */
.slai-advisor-wrapper .slai-chat-bar-inner .slai-chat-main-input,
.slai-advisor-wrapper #slai-chat-main-input {
    flex:          1             !important;
    align-self:    center        !important;
    background:    transparent   !important;
    border:        none          !important;
    outline:       none          !important;
    box-shadow:    none          !important;
    resize:        none          !important;
    font-family:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-size:     16px          !important;
    color:         #1a2e2e       !important;
    line-height:   1.5           !important;
    padding:       4px 4px 4px 2px !important;
    margin:        0             !important;
    min-height:    26px          !important;
    max-height:    140px         !important;
    height:        auto          !important;
    width:         100%          !important;
    overflow-y:    auto          !important;
    field-sizing:  content;
    word-break:    break-word;
    letter-spacing: -0.01em;
    scrollbar-width: thin;
    scrollbar-color: #dde8e9 transparent;
}
.slai-advisor-wrapper .slai-chat-bar-inner .slai-chat-main-input::placeholder {
    color:      #a8c4c4 !important;
    font-style: normal  !important;
    transition: opacity 0.15s;
}
.slai-advisor-wrapper .slai-chat-bar-inner .slai-chat-main-input:focus::placeholder { opacity: 0.5; }

/* Send button */
.slai-advisor-wrapper .slai-chat-bar-inner .slai-chat-main-send {
    width:           40px        !important;
    height:          40px        !important;
    min-width:       40px        !important;
    border-radius:   10px        !important;
    border:          none        !important;
    background:      #10847e     !important;
    color:           #ffffff     !important;
    display:         flex        !important;
    align-items:     center      !important;
    justify-content: center      !important;
    flex-shrink:     0           !important;
    cursor:          pointer     !important;
    box-shadow:      0 2px 8px rgba(16,132,126,0.25) !important;
    transition:      background 0.18s, transform 0.12s, box-shadow 0.18s !important;
    padding:         0           !important;
    margin:          0           !important;
    opacity:         1           !important;
    line-height:     1           !important;
}
.slai-advisor-wrapper .slai-chat-bar-inner .slai-chat-main-send:hover:not(:disabled) {
    background:  #0d7a74 !important;
    transform:   scale(1.06);
    box-shadow:  0 4px 14px rgba(16,132,126,0.35) !important;
}
.slai-advisor-wrapper .slai-chat-bar-inner .slai-chat-main-send:active:not(:disabled) { transform: scale(0.93); transition-duration: 0.08s; }
.slai-advisor-wrapper .slai-chat-bar-inner .slai-chat-main-send:disabled {
    background:  #c8dddd !important;
    color:       #8ab0b0 !important;
    box-shadow:  none    !important;
    cursor:      default !important;
    transform:   none;
}
.slai-advisor-wrapper .slai-chat-bar-inner .slai-chat-main-send svg { display: block !important; width: 17px !important; height: 17px !important; flex-shrink: 0; }

.slai-advisor-wrapper .slai-chat-bar-hint {
    font-size: 10px; color: #b4cfd0; text-align: center; margin: 4px 0 0;
    opacity: 0; transition: opacity 0.2s; height: 14px; line-height: 14px;
    user-select: none; pointer-events: none;
}
.slai-advisor-wrapper .slai-chat-bar-inner:focus-within + .slai-chat-bar-hint { opacity: 1; }

.slai-chat-msg--products {
    flex-direction: column; align-items: stretch; gap: 0;
    max-width: 100% !important; padding-left: 0; margin-left: 0;
}

/* ══ Chat product container ══ */
.slai-chat-products-wrap {
    margin:        6px 0 4px;
    border:        1.5px solid var(--slai-border);
    border-radius: 12px;
    overflow:      hidden;
    background:    #ffffff;
    box-shadow:    0 2px 8px rgba(0,0,0,0.05);
    width:         100%;
}

/* ── Filter strip ── */
.slai-chat-product-filters {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             8px;
    padding:         8px 12px;
    border-bottom:   1px solid var(--slai-border);
    background:      var(--slai-mint);
    flex-wrap:       nowrap;
    overflow-x:      auto;
    scrollbar-width: none;
}
.slai-chat-product-filters::-webkit-scrollbar { display: none; }

/* Left group: toggle filter chips */
.slai-pf-left { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }

/* Toggle chips — ghost style, active = teal fill */
.slai-pf-chip {
    display:        inline-flex;
    align-items:    center;
    height:         26px;
    padding:        0 11px;
    border-radius:  100px;
    font-size:      10.5px;
    font-weight:    600;
    cursor:         pointer;
    border:         1.5px solid var(--slai-border);
    background:     #ffffff;
    color:          var(--slai-text-3);
    white-space:    nowrap;
    transition:     all 0.15s ease;
    font-family:    var(--slai-font);
    flex-shrink:    0;
    user-select:    none;
}
.slai-pf-chip:hover         { border-color: var(--slai-teal); color: var(--slai-teal); }
.slai-pf-chip--active       { background: var(--slai-teal); border-color: var(--slai-teal); color: #ffffff; }
.slai-pf-chip--active:hover { background: var(--slai-teal-dark); border-color: var(--slai-teal-dark); color: #ffffff; }

/* ── Footer: Add All to Cart sits below the products grid ── */
.slai-pf-footer {
    display:         flex;
    justify-content: flex-end;
    align-items:     center;
    padding:         8px 10px;
    border-top:      1px solid var(--slai-border);
    background:      var(--slai-mint);
}
.slai-pf-add-all {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    height:          30px;
    padding:         0 14px;
    border-radius:   100px;
    font-size:       10.5px;
    font-weight:     700;
    letter-spacing:  0.01em;
    cursor:          pointer;
    border:          none;
    background:      var(--slai-teal);
    color:           #ffffff;
    white-space:     nowrap;
    transition:      background 0.15s ease, transform 0.1s ease, opacity 0.15s;
    font-family:     var(--slai-font);
    flex-shrink:     0;
    box-shadow:      0 1px 4px rgba(16,132,126,0.2);
}
.slai-pf-add-all svg { flex-shrink: 0; }
.slai-pf-add-all:hover                { background: var(--slai-teal-dark); transform: translateY(-1px); box-shadow: 0 3px 8px rgba(16,132,126,0.28); }
.slai-pf-add-all:active               { transform: scale(0.96); }
.slai-pf-add-all--loading             { background: var(--slai-text-muted) !important; cursor: wait; transform: none !important; box-shadow: none !important; opacity: 0.75; }
.slai-pf-add-all--done                { background: #16a34a !important; cursor: default; transform: none !important; }
.slai-pf-add-all--done:hover          { background: #16a34a !important; transform: none !important; box-shadow: none !important; }

/* On Sale empty state */
.slai-pf-empty {
    grid-column:  1 / -1;
    text-align:   center;
    padding:      20px 12px;
    font-size:    12px;
    color:        var(--slai-text-muted);
    font-style:   italic;
    background:   var(--slai-mint);
    border-top:   1px solid var(--slai-border);
}

/* Individual chat card Add: AJAX states */
.slai-chat-product-btn.slai-cpb--loading { opacity: 0.65; cursor: wait; pointer-events: none; }
.slai-chat-product-btn.slai-cpb--done   { background: #16a34a; pointer-events: none; min-width: 32px; justify-content: center; }


/* ── Desktop: 2-column compact grid ── */
.slai-chat-products {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   0;
    width:                 100%;
}
.slai-chat-product-card {
    display:        flex;
    flex-direction: row;
    align-items:    center;
    gap:            10px;
    padding:        9px 12px;
    background:     #ffffff;
    border:         none;
    border-bottom:  1px solid rgba(221,232,233,0.7);
    border-radius:  0;
    box-shadow:     none;
    transition:     background 0.15s ease;
    animation:      slai-msg-in 0.22s cubic-bezier(0.34,1.56,0.64,1) both;
    min-width:      0;   /* prevent flex children from overflowing grid cell */
}
/* Right border on odd (left-column) cards to separate columns */
.slai-chat-product-card:nth-child(odd)  { border-right: 1px solid rgba(221,232,233,0.7); }
/* Remove bottom border from the last row */
.slai-chat-product-card:last-child      { border-bottom: none; }
.slai-chat-product-card:nth-last-child(2):nth-child(odd) { border-bottom: none; }
.slai-chat-product-card:hover      { background: rgba(16,132,126,0.03); }

/* ── Thumbnail ── */
.slai-chat-product-img-wrap {
    display:         block;
    width:           52px;
    height:          52px;
    flex-shrink:     0;
    border-radius:   8px;
    overflow:        hidden;
    background:      var(--slai-mint);
    text-decoration: none;
}
.slai-chat-product-thumb {
    width:      100%;
    height:     100%;
    object-fit: contain;
    padding:    4px;
    display:    block;
    transition: transform 0.25s ease;
}
.slai-chat-product-card:hover .slai-chat-product-thumb { transform: scale(1.06); }
.slai-chat-product-thumb-ph {
    width:           100%;
    height:          100%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       20px;
}

/* ── Info ── */
.slai-chat-product-body {
    flex:           1;
    min-width:      0;
    display:        flex;
    flex-direction: column;
    gap:            2px;
    padding:        0;
}
.slai-chat-product-name {
    font-size:          12.5px;
    font-weight:        600;
    color:              var(--slai-text-1);
    line-height:        1.3;
    display:            -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow:           hidden;
}
.slai-chat-product-price {
    font-size:      12px;
    color:          var(--slai-teal);
    font-weight:    700;
    letter-spacing: -0.1px;
    display:        flex;
    align-items:    baseline;
    gap:            4px;
}
.slai-chat-product-old-price { font-size: 10px; color: var(--slai-text-muted); font-weight: 400; }

/* ── Actions ── */
.slai-chat-product-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.slai-chat-product-view {
    display:         inline-flex;
    align-items:     center;
    height:          28px;
    padding:         0 10px;
    border:          1.5px solid var(--slai-border);
    border-radius:   100px;
    font-size:       10.5px;
    font-weight:     600;
    color:           var(--slai-text-3);
    text-decoration: none;
    white-space:     nowrap;
    transition:      all 0.15s ease;
}
.slai-chat-product-view:hover { border-color: var(--slai-teal); color: var(--slai-teal); }
.slai-chat-product-btn {
    display:         inline-flex;
    align-items:     center;
    height:          28px;
    padding:         0 12px;
    background:      var(--slai-teal);
    color:           #ffffff !important;
    text-decoration: none;
    font-size:       10.5px;
    font-weight:     700;
    border-radius:   100px;
    border:          none;
    white-space:     nowrap;
    transition:      background 0.15s ease, transform 0.1s ease;
}
.slai-chat-product-btn:hover  { background: var(--slai-teal-dark); color: #ffffff !important; }
.slai-chat-product-btn:active { transform: scale(0.96); }

/* ── Toggle ── */
.slai-chat-products-toggle {
    grid-column: 1 / -1;   /* span both columns */
    width:       100%;
    background:  var(--slai-mint);
    border:      none;
    border-top:  1px solid var(--slai-border);
    border-radius: 0;
    color:       var(--slai-teal);
    font-size:   11.5px;
    font-weight: 600;
    padding:     9px 12px;
    cursor:      pointer;
    text-align:  center;
    font-family: var(--slai-font);
    transition:  background 0.15s ease;
    display:     block;
}
.slai-chat-products-toggle:hover { background: rgba(16,132,126,0.08); }

/* ── Mobile: message-like attachment with clean product grid ── */
@media (max-width: 680px) {
    /* Wrap feels like a WhatsApp link-preview card, connected to the chat thread */
    .slai-chat-products-wrap {
        border-radius: 14px !important;
        margin:        4px 0 4px 0 !important;
        box-shadow:    0 2px 12px rgba(0,0,0,0.08) !important;
    }

    /* Filter bar: minimal — show only On Sale chip, hide Price sort */
    .slai-chat-product-filters {
        padding: 6px 10px !important;
    }
    .slai-pf-chip[data-sort="price"] {
        display: none !important;
    }

    /* Footer: full-width prominent Add All CTA */
    .slai-pf-footer {
        padding:    0 !important;
        border-top: 1px solid var(--slai-border) !important;
        background: transparent !important;
    }
    .slai-pf-add-all {
        width:         100% !important;
        height:        44px !important;
        border-radius: 0 0 14px 14px !important;
        font-size:     13px !important;
        justify-content: center !important;
        box-shadow:    none !important;
        letter-spacing: 0.04em !important;
    }
    .slai-pf-add-all:hover { transform: none !important; }

    /* Product grid: 2-col card tiles */
    .slai-chat-products-wrap  { border-radius: 14px !important; }
    .slai-chat-products {
        display:               grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap:                   8px !important;
        padding:               8px !important;
        background:            var(--slai-mint) !important;
    }
    .slai-chat-product-card {
        flex-direction: column !important;
        border:         1.5px solid var(--slai-border) !important;
        border-radius:  10px !important;
        padding:        0 !important;
        gap:            0 !important;
        background:     #ffffff !important;
    }
    .slai-chat-product-img-wrap {
        width:        100% !important;
        height:       auto !important;
        aspect-ratio: 1 / 1 !important;
        border-radius:10px 10px 0 0 !important;
    }
    .slai-chat-product-body    { padding: 6px 8px 2px !important; }
    .slai-chat-product-name    { -webkit-line-clamp: 2 !important; font-size: 11px !important; }
    .slai-chat-product-price   { font-size: 13px !important; font-weight: 800 !important; }
    .slai-chat-product-actions { padding: 4px 8px 10px !important; flex-direction: column !important; }
    .slai-chat-product-view    { display: none !important; }
    .slai-chat-product-btn     { width: 100% !important; justify-content: center !important; height: 32px !important; font-size: 10px !important; }
}

@media (max-width: 480px) {
    .slai-chat-thread  { padding: 14px 12px 10px; gap: 11px; }
    .slai-chat-hd      { padding: 10px 14px; }
    .slai-chat-hd-sub  { display: none; }
    .slai-chat-bar     { padding: 10px 12px 8px; }
    .slai-chat-bubble--ai,
    .slai-chat-bubble--user { font-size: 13px; max-width: 90%; }
}

/* ── Search bar: hide when AI chat screen is open ── */
body.slai-chat-open .wd-header-search,
body.slai-chat-open .wd-search-full-screen,
body.slai-chat-open .wd-header-search-full-screen,
body.slai-chat-open [class*="header-search"],
body.slai-chat-open .site-search,
body.slai-chat-open #searchform-header,
body.slai-chat-open .wp-block-search,
body.slai-chat-open .wd-mobile-search {
    display: none !important;
}


/* ═══════════════════════════════════════════════════════════════
   ③  QUIZ SCREEN
   ══════════════════════════════════════════════════════════════ */
.slai-screen--quiz {
    background:     var(--slai-bg-page);
    flex-direction: column;
    height:         100%;    /* fills the wrapper's fixed height */
    min-height:     480px;
    border-top:     1px solid var(--slai-border);
    border-bottom:  1px solid var(--slai-border);
    overflow:       hidden;
    /* Ensure the flex column never hides the nav row at the bottom */
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Frozen progress header */
.slai-quiz-header {
    flex-shrink: 0;
    padding:     20px max(20px, calc(50% - 670px)) 14px;
    background:  var(--slai-mint);
    border-bottom: 1px solid var(--slai-border);
}
.slai-quiz-header-inner {
    max-width: 760px;
    margin:    0 auto;
}
.slai-progress-bar-wrap {
    height:       4px;
    background:   var(--slai-mint-dark);
    border-radius:100px;
    overflow:     hidden;
    margin-bottom:9px;
}
.slai-progress-bar {
    height:       100%;
    background:   var(--slai-grad-primary) !important;
    border-radius:100px;
    transition:   width 0.4s var(--slai-ease);
    width:        10%;
}
.slai-progress-label {
    font-size:   11.5px;
    font-weight: 700;
    color:       var(--slai-text-muted);
    text-align:  right;
    letter-spacing:0.06em;
    text-transform:uppercase;
}

/* Scrollable step content */
.slai-steps {
    flex:        1;
    min-height:  0;          /* required for flex child overflow to work */
    overflow-y:  auto;
    padding:     28px 40px 16px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--slai-border) transparent;
}
.slai-steps::-webkit-scrollbar { width: 4px; }
.slai-steps::-webkit-scrollbar-track { background: transparent; }
.slai-steps::-webkit-scrollbar-thumb { background: var(--slai-border); border-radius: 4px; }

/* Steps */
.slai-step { display: none; }
.slai-step--active {
    display:   block;
    max-width: 720px;
    margin:    0 auto;
    animation: slai-step-in 0.4s var(--slai-ease) forwards;
    will-change: transform, opacity;
}
@keyframes slai-step-in {
    from { opacity:0; transform:translateX(20px); }
    to   { opacity:1; transform:translateX(0); }
}
@keyframes slai-step-in-rev {
    from { opacity:0; transform:translateX(-20px); }
    to   { opacity:1; transform:translateX(0); }
}

.slai-step-header { margin-bottom: 20px; }
.slai-step-icon {
    display:       inline-flex;
    align-items:   center;
    justify-content:center;
    width:  38px; height: 38px;
    background:    var(--slai-mint);
    border-radius: 10px;
    font-size:     18px;
    margin-bottom: 12px;
    border:        1px solid var(--slai-border);
}
.slai-step-header h2 {
    font-family:  var(--slai-font-display);
    font-size:    clamp(16px, 2.5vw, 22px);
    font-weight:  700;
    color:        var(--slai-text-1);
    margin-bottom:5px;
    letter-spacing:-0.2px;
}
.slai-step-header p {
    font-size:  13.5px;
    color:      var(--slai-text-3);
    line-height:1.5;
}

/* Frozen nav footer */
.slai-nav-row {
    flex-shrink:     0;
    display:         flex;
    align-items:     center;
    gap:             10px;
    padding:         14px max(20px, calc(50% - 670px));
    background:      var(--slai-mint);
    border-top:      1px solid var(--slai-border);
    margin-top:      0 !important;
    justify-content: center;
    /* Never let the nav bar get clipped — stick to the bottom of the quiz flex column */
    position:        sticky;
    bottom:          0;
    z-index:         3;
}
.slai-nav-inner {
    display:     flex;
    align-items: center;
    gap:         10px;
    width:       100%;
    max-width:   720px;
}

.slai-btn-skip {
    margin-left:    auto;
    margin-right:   auto;
    background:     none !important;
    border:         none !important;
    padding:        6px 10px;
    font-family:    var(--slai-font, 'Inter', sans-serif);
    font-size:      12px;
    font-weight:    500;
    color:          var(--slai-text-3, #5a7a7a) !important;
    cursor:         pointer;
    text-decoration:underline;
    text-underline-offset: 2px;
    transition:     color 0.3s var(--slai-ease), transform 0.3s var(--slai-ease);
    white-space:    nowrap;
    will-change:    transform, color;
}
.slai-btn-skip:hover  { color: var(--slai-teal, #10847E) !important; }
.slai-btn-skip:active { transform: scale(0.97); transition-duration: 0.1s; }

.slai-btn--back {
    display:      inline-flex;
    align-items:  center;
    gap:          6px;
    padding:      10px 18px;
    background:   transparent;
    border:       1.5px solid var(--slai-border);
    border-radius:100px;
    color:        var(--slai-text-3);
    font-size:    13.5px;
    font-weight:  600;
    cursor:       pointer;
    font-family:  var(--slai-font);
    transition:   all 0.18s var(--slai-ease);
}
.slai-btn--back:hover  { border-color: var(--slai-teal); color: var(--slai-teal); }
.slai-btn--back:active { transform: scale(0.97); transition-duration: 0.1s; }

.slai-btn--primary {
    display:      inline-flex;
    align-items:  center;
    gap:          7px;
    padding:      12px 26px;
    background:   var(--slai-teal) !important;
    color:        #fff !important;
    border:       none;
    border-radius:100px;
    font-size:    14px;
    font-weight:  700;
    cursor:       pointer;
    font-family:  var(--slai-font);
    transition:   all 0.3s var(--slai-ease);
    box-shadow:   var(--slai-shadow-btn);
    will-change:  transform, box-shadow;
}
.slai-btn--primary:hover:not(:disabled)  { background: var(--slai-teal-dark) !important; box-shadow: var(--slai-shadow-hover); transform: translateY(-1px); }
.slai-btn--primary:active:not(:disabled) { transform: scale(0.97); transition-duration: 0.1s; }

.slai-btn--submit {
    display:      inline-flex;
    align-items:  center;
    gap:          7px;
    padding:      12px 28px;
    background:   var(--slai-grad-yellow);
    color:        #1a2e2e;
    border:       none;
    border-radius:100px;
    font-size:    14.5px;
    font-weight:  700;
    cursor:       pointer;
    font-family:  var(--slai-font);
    transition:   all 0.3s var(--slai-ease);
    box-shadow:   0 4px 18px rgba(255,182,61,0.42);
    will-change:  transform, box-shadow;
}
.slai-btn--submit:hover:not(:disabled)  { box-shadow: 0 8px 24px rgba(255,182,61,0.55); transform: translateY(-1px); }
.slai-btn--submit:active:not(:disabled) { transform: scale(0.97); transition-duration: 0.1s; }

#slai-prev-btn { display: none; }

@media (max-width: 680px) {
    .slai-quiz-header  { padding: 14px 16px 10px; }
    .slai-steps        { padding: 16px 16px 10px; }
    .slai-nav-row      { padding: 10px 16px; }
    .slai-screen--intro{ padding: 20px 16px 16px; }
}


/* ═══════════════════════════════════════════════════════════════
   FORM ELEMENTS
   ══════════════════════════════════════════════════════════════ */
.slai-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.slai-grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
.mt-20 { margin-top: 18px; }
@media (max-width:580px) { .slai-grid-2, .slai-grid-3 { grid-template-columns:1fr; } }

.slai-field { display:flex; flex-direction:column; gap:7px; }
.slai-field label {
    font-size:      11px;
    font-weight:    700;
    color:          var(--slai-text-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.slai-input {
    width:        100%;
    padding:      11px 14px;
    background:   var(--slai-bg-card);
    border:       1.5px solid var(--slai-border);
    border-radius:var(--slai-radius);
    color:        var(--slai-text-1);
    font-size:    14.5px;
    font-family:  var(--slai-font);
    transition:   border-color 0.3s var(--slai-ease), box-shadow 0.3s var(--slai-ease);
    outline:      none;
}
.slai-input:focus {
    border-color: var(--slai-teal);
    box-shadow:   0 0 0 3px rgba(16,132,126,0.1);
}
.slai-input::placeholder { color: var(--slai-text-muted); }

/* Pills */
.slai-option-pills { display:flex; flex-wrap:wrap; gap:7px; }
.slai-option-pills--col { flex-direction:column; flex-wrap:nowrap; gap:5px; }
.slai-option-pills--large .slai-pill { font-size:13.5px; padding:10px 16px; }

.slai-pill {
    display:      inline-flex;
    align-items:  center;
    gap:          5px;
    padding:      9px 15px;
    background:   var(--slai-bg-card);
    border:       1.5px solid var(--slai-border);
    border-radius:100px;
    color:        var(--slai-text-2);
    font-size:    13px;
    font-weight:  500;
    cursor:       pointer;
    transition:   all 0.3s var(--slai-ease);
    font-family:  var(--slai-font);
    will-change:  transform, border-color, background, color;
}
.slai-pill:hover  { border-color:var(--slai-teal); color:var(--slai-teal); background:rgba(16,132,126,0.04); transform:translateY(-1px); }
.slai-pill:active { transform:scale(0.97); transition-duration:0.1s; }
.slai-pill--active {
    background:   var(--slai-teal) !important;
    border-color: var(--slai-teal) !important;
    color:        #fff !important;
    box-shadow:   0 2px 10px rgba(16,132,126,0.28) !important;
}

/* Skin cards */
.slai-skin-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
@media (max-width:560px) { .slai-skin-cards { grid-template-columns:1fr 1fr; } }

.slai-skin-card { cursor:pointer; }
.slai-skin-card input[type="radio"] { display:none; }
.slai-skin-card-inner {
    padding:        13px 10px;
    background:     var(--slai-bg-card);
    border:         1.5px solid var(--slai-border);
    border-radius:  var(--slai-radius);
    text-align:     center;
    transition:     all 0.3s var(--slai-ease);
    will-change:    transform, border-color, box-shadow;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            5px;
    height:         100%;
}
.slai-skin-card-inner:hover  { border-color:var(--slai-teal); background:rgba(16,132,126,0.03); transform:translateY(-1px); }
.slai-skin-card-inner:active { transform:scale(0.98); transition-duration:0.1s; }
.slai-skin-card input:checked + .slai-skin-card-inner {
    border-color:var(--slai-teal);
    background:  rgba(16,132,126,0.06);
    box-shadow:  0 0 0 2px rgba(16,132,126,0.16);
}
.slai-skin-icon { font-size:22px; }
.slai-skin-card-inner strong { font-size:12.5px; font-weight:700; color:var(--slai-text-1); }
.slai-skin-card-inner p      { font-size:11px; color:var(--slai-text-3); line-height:1.4; }

/* Category selection grid (Step 1) */
.slai-category-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   10px;
    margin-bottom:         8px;
}
@media (max-width:560px) { .slai-category-grid { grid-template-columns:1fr 1fr; } }

.slai-category-card { cursor:pointer; }
.slai-category-card input[type="checkbox"] { display:none; }
.slai-category-inner {
    padding:        16px 14px;
    background:     var(--slai-bg-card);
    border:         1.5px solid var(--slai-border);
    border-radius:  var(--slai-radius);
    text-align:     center;
    transition:     all 0.3s var(--slai-ease);
    will-change:    transform, border-color, box-shadow;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            6px;
    height:         100%;
}
.slai-category-inner:hover  { border-color:var(--slai-teal); background:rgba(16,132,126,0.03); transform:translateY(-1px); }
.slai-category-inner:active { transform:scale(0.98); transition-duration:0.1s; }
.slai-category-card input:checked + .slai-category-inner {
    border-color: var(--slai-teal);
    background:   rgba(16,132,126,0.08);
    box-shadow:   0 0 0 2.5px rgba(16,132,126,0.18);
}
.slai-category-icon { font-size:28px; margin-bottom:2px; }
.slai-category-inner strong { font-size:13px; font-weight:700; color:var(--slai-text-1); line-height:1.3; }
.slai-category-inner p      { font-size:11px; color:var(--slai-text-3); line-height:1.4; margin:0; }

/* Checkbox grid */
.slai-checkbox-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
@media (max-width:580px) { .slai-checkbox-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:380px) { .slai-checkbox-grid { grid-template-columns:1fr; } }

.slai-check-card { cursor:pointer; }
.slai-check-card input[type="checkbox"] { display:none; }
.slai-check-inner {
    padding:        10px 12px;
    background:     var(--slai-bg-card);
    border:         1.5px solid var(--slai-border);
    border-radius:  var(--slai-radius);
    transition:     all 0.3s var(--slai-ease);
    will-change:    transform, border-color, box-shadow;
    display:        flex;
    flex-direction: column;
    gap:            3px;
    height:         100%;
}
.slai-check-inner:hover  { border-color:var(--slai-teal); background:rgba(16,132,126,0.03); transform:translateY(-1px); }
.slai-check-inner:active { transform:scale(0.98); transition-duration:0.1s; }
.slai-check-card input:checked + .slai-check-inner {
    border-color:var(--slai-teal);
    background:  rgba(16,132,126,0.06);
    box-shadow:  0 0 0 2px rgba(16,132,126,0.16);
}
.slai-check-inner > span  { font-size:18px; }
.slai-check-inner strong  { font-size:12px; font-weight:700; color:var(--slai-text-1); line-height:1.3; }
.slai-check-inner small   { font-size:10.5px; color:var(--slai-text-3); line-height:1.3; }

.slai-check-card--goal .slai-check-inner { flex-direction:row; align-items:center; gap:9px; }
.slai-check-card--goal .slai-check-inner::before {
    content:'○'; font-size:15px; color:var(--slai-text-muted); flex-shrink:0; transition:color 0.15s;
}
.slai-check-card--goal input:checked + .slai-check-inner::before { content:'✓'; color:var(--slai-teal); font-weight:700; }
.slai-check-card--goal .slai-check-inner strong { font-size:12.5px; }


/* ═══════════════════════════════════════════════════════════════
   ④  LOADING SCREEN  — minimal, confident
   ══════════════════════════════════════════════════════════════ */
.slai-screen--loading {
    background:      #ffffff;
    align-items:     center;
    justify-content: center;
    text-align:      center;
    flex-direction:  column;
    overflow:        hidden;
    height:          100%;
}

.slai-loading-content {
    position:       relative;
    z-index:        1;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            24px;
}

/* ── Logo — breathes, no ring ── */
.slai-loading-logo {
    width:  72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.slai-loading-logo img {
    width:  100%;
    height: 100%;
    object-fit: contain;
    animation: slai-load-breathe 3s ease-in-out infinite;
}
@keyframes slai-load-breathe {
    0%, 100% { opacity: 1;   transform: scale(1);    }
    50%       { opacity: 0.5; transform: scale(0.93); }
}

/* ── Single crossfading phrase ── */
.slai-loading-phrase {
    font-family:    'Inter', -apple-system, sans-serif;
    font-size:      15px;
    font-weight:    500;
    color:          #8aabab;
    letter-spacing: -0.1px;
    line-height:    1;
    margin:         0;
    transition:     opacity 0.3s ease;
}
.slai-loading-phrase.slai-phrase--fade {
    opacity: 0;
}

/* ── Three calm pulse dots ── */
.slai-loading-dots {
    display: flex;
    gap:     6px;
    align-items: center;
}
.slai-loading-dots span {
    width:         5px;
    height:        5px;
    border-radius: 50%;
    background:    var(--slai-teal, #10847e);
    opacity:       0.2;
    animation:     slai-dot-pulse 1.6s ease-in-out infinite;
}
.slai-loading-dots span:nth-child(2) { animation-delay: 0.25s; }
.slai-loading-dots span:nth-child(3) { animation-delay: 0.5s;  }
@keyframes slai-dot-pulse {
    0%, 100% { opacity: 0.2; transform: scale(1);    }
    50%       { opacity: 0.7; transform: scale(1.25); }
}

/* ── Conic-gradient spinning orb + logo ── */
.slai-loading-orb {
    width:         88px;
    height:        88px;
    border-radius: 50%;
    position:      relative;
    flex-shrink:   0;
    background:    conic-gradient(from 0deg, var(--slai-teal), #14b8a6, #facc15, #14b8a6, var(--slai-teal));
    animation:     slai-load-spin 1.2s linear infinite;
    box-shadow:    0 0 36px rgba(16,132,126,0.28), 0 0 12px rgba(250,204,21,0.15);
}
@keyframes slai-load-spin { to { transform: rotate(360deg); } }

/* White inner circle — logo sits here */
.slai-orb-inner {
    position:        absolute;
    inset:           9px;
    border-radius:   50%;
    background:      #ffffff;
    display:         flex;
    align-items:     center;
    justify-content: center;
    overflow:        hidden;
}
.slai-orb-inner img {
    width:      36px;
    height:     36px;
    object-fit: contain;
}

/* Hide unused elements */
.slai-loading-steps, .slai-load-step,
.slai-loading-track, .slai-loading-fill,
.slai-loading-sub { display: none !important; }



/* ═══════════════════════════════════════════════════════════════
   ⑤  RESULTS SCREEN
   ══════════════════════════════════════════════════════════════ */
.slai-screen--results {
    background:     var(--slai-bg-page);
    display:        flex;
    flex-direction: column;
    overflow-y:     auto;
    overflow-x:     hidden;
    -webkit-overflow-scrolling: touch;
}

.slai-results-header {
    background:  var(--slai-mint);
    text-align:  center;
    padding:     20px 24px 16px;
    border-bottom: 1px solid var(--slai-border);
    flex-shrink: 0;
}
.slai-results-header-inner { max-width: 700px; margin: 0 auto; }
.slai-results-icon { font-size: 22px; color: var(--slai-teal); }
.slai-results-header h1 {
    font-family:   'Outfit', 'Inter', sans-serif;
    font-size:     clamp(18px, 2.2vw, 24px);
    font-weight:   800;
    color:         var(--slai-text-1);
    margin:        4px 0 3px;
    letter-spacing:-0.4px;
}
.slai-results-header h1 span { color: var(--slai-teal); }
.slai-results-header p { font-size: 12.5px; color: var(--slai-text-3); margin: 0; }

.slai-top-picks-grid {
    display:   flex;
    gap:       10px;
    /* Match site nav 1340px column on wide monitors */
    padding:   16px max(15px, calc(50% - 670px));
    flex:      1;
    align-items: stretch;
    overflow:  hidden;
}

.slai-pick-card {
    flex:           1;
    min-width:      0;
    background:     var(--slai-bg-card);
    border:         1.5px solid var(--slai-border);
    border-radius:  14px;
    overflow:       hidden;
    text-decoration:none;
    display:        flex;
    flex-direction: column;
    transition:     transform 0.4s var(--slai-ease), border-color 0.4s var(--slai-ease), box-shadow 0.4s var(--slai-ease);
    will-change:    transform, box-shadow, border-color;
}
.slai-pick-card:hover  { transform: translateY(-2px); border-color: var(--slai-teal); box-shadow: var(--slai-shadow-hover); }
.slai-pick-card:active { transform: scale(0.98); transition-duration: 0.1s; }

.slai-pick-img-wrap {
    width:        100%;
    aspect-ratio: 1 / 1;
    background:   var(--slai-mint);
    display:      flex;
    align-items:  center;
    justify-content: center;
    overflow:     hidden;
    flex-shrink:  0;
}
.slai-pick-img { width: 100%; height: 100%; object-fit: cover; }
.slai-pick-img-placeholder { font-size: 28px; opacity: .5; }

.slai-pick-body {
    padding: 8px 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
}

/* ── Structural badge bar — full-width top strip of every card ─ */
.slai-pick-badge-bar {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           100%;
    height:          30px;
    padding:         0 12px;
    background:      #eef6f5;
    flex-shrink:     0;
    border-bottom:   1px solid rgba(16,132,126,0.10);
}
.slai-badge-label {
    flex:           0 1 auto;
    min-width:      0;
    font-size:      12px;
    font-weight:    600;
    letter-spacing: 0.075em;
    text-transform: uppercase;
    color:          #0a5853;
    white-space:    nowrap;
    overflow:       hidden;
    text-overflow:  ellipsis;
    line-height:    1;
    text-align:     center;
}
.slai-badge-sale-tag {
    flex-shrink:    0;
    margin-left:    8px;
    font-size:      8.5px;
    font-weight:    700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color:          #8a4100;
    background:     rgba(220,110,0,0.12);
    padding:        3px 7px;
    border-radius:  3px;
    line-height:    1;
}

/* Legacy label row — no longer rendered */
.slai-pick-labels { display: none; }

/* Legacy overlay — no longer rendered */
.slai-badge-overlay,
.slai-badge--outcome,
.slai-badge--offer  { display: none; }

/* Legacy match badge */
.slai-pick-badge   { font-size:9.5px; font-weight:700; padding:2px 7px; border-radius:100px; align-self:flex-start; white-space:nowrap; }
.slai-badge--perfect { background:rgba(16,132,126,0.12); color:var(--slai-teal); }
.slai-badge--great   { background:rgba(234,179,8,0.14);  color:#92710b; }
.slai-badge--good    { background:rgba(100,116,139,0.1); color:var(--slai-text-3); }

.slai-pick-title {
    font-size:   13px;
    font-weight: 600;
    color:       var(--slai-text-1);
    line-height: 1.35;
    display:     -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow:    hidden;
}

/* ── Footer: price left, ATC button right ── */
.slai-pick-footer {
    margin-top:     8px;
    display:        flex;
    flex-direction: column;
    gap:            8px;
}
.slai-pick-price-row { display: flex; align-items: baseline; gap: 4px; }
.slai-pick-price     { font-size: 13px; font-weight: 800; color: var(--slai-text-1); }
.slai-pick-old-price { font-size: 10.5px; color: var(--slai-text-muted); }

/* ── Individual Add to Cart: full-width, inherits WoodMart site theme button ── */
.slai-pick-atc {
    width:           100%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    height:          var(--btn-height, 34px);
    padding:         0 14px;
    background-color: var(--btn-accented-bgcolor, #10847E);
    color:           var(--btn-accented-color, #ffffff);
    border-radius:   var(--btn-accented-brd-radius, 4px);
    box-shadow:      var(--btn-accented-box-shadow, none);
    font-size:       12px;
    font-weight:     var(--btn-accented-font-weight, var(--btn-font-weight, 600));
    font-family:     var(--btn-accented-font-family, var(--btn-font-family, inherit));
    text-transform:  var(--btn-accented-transform, var(--btn-transform, uppercase));
    letter-spacing:  0.04em;
    white-space:     nowrap;
    overflow:        hidden;
    border:          none;
    cursor:          pointer;
    transition:      background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    flex-shrink:     0;
}
.slai-pick-atc .wd-action-icon {
    display:    flex;
    flex-shrink: 0;
}
.slai-pick-atc .wd-action-text {
    font-size:     12px;
    line-height:   var(--btn-height, 34px);
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    display:       block;
}
.slai-pick-atc:hover:not(:disabled) {
    background-color: var(--btn-accented-bgcolor-hover, #0c6b66);
    color:            var(--btn-accented-color-hover, #ffffff);
    box-shadow:       var(--btn-accented-box-shadow-hover, none);
}
.slai-pick-atc:active { transition-duration: 0.08s; }
.slai-pick-atc--loading { opacity: 0.7; pointer-events: none; }
.slai-pick-atc--done    { background-color: #16a34a; pointer-events: none; }


/* Toast */
.slai-cart-toast {
    display:        none;
    align-items:    center;
    justify-content:center;
    gap:            12px;
    padding:        10px 20px;
    background:     rgba(16,132,126,0.08);
    border-top:     1px solid rgba(16,132,126,0.2);
    font-size:      13px;
    color:          var(--slai-teal);
    flex-shrink:    0;
}
.slai-cart-toast--visible { display: flex; }
.slai-cart-toast--error   { background: rgba(220,38,38,0.07); color: #dc2626; border-top-color: rgba(220,38,38,0.2); }
.slai-toast-link { font-weight:700; color:var(--slai-teal); text-decoration:underline; white-space:nowrap; }

/* Actions bar */
.slai-results-actions {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             12px;
    /* Match site nav 1340px column on wide monitors */
    padding:         40px max(15px, calc(50% - 670px));
    border-top:      1.5px solid var(--slai-border);
    background:      var(--slai-mint);
    flex-shrink:     0;
}
.slai-btn--add-all {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    padding:         11px 28px;
    background:      var(--slai-teal);
    color:           #fff;
    border:          none;
    border-radius:   100px;
    font-size:       14px;
    font-weight:     700;
    cursor:          pointer;
    font-family:     var(--slai-font);
    transition:      all 0.3s var(--slai-ease);
    box-shadow:      var(--slai-shadow-btn);
    will-change:     transform, box-shadow;
    white-space:     nowrap;
}
.slai-btn--add-all:hover:not(:disabled)  { background: var(--slai-teal-dark); box-shadow: var(--slai-shadow-hover); transform: translateY(-1px); }
.slai-btn--add-all:active:not(:disabled) { transform: scale(0.97); transition-duration: 0.1s; }
.slai-btn--add-all:disabled              { opacity: 0.65; cursor: not-allowed; transform: none; }

.slai-btn--ghost {
    display:     inline-flex;
    align-items: center;
    gap:         5px;
    padding:     10px 20px;
    background:  transparent;
    border:      1.5px solid var(--slai-border);
    border-radius:100px;
    color:       var(--slai-text-3);
    font-size:   13px;
    font-weight: 600;
    cursor:      pointer;
    font-family: var(--slai-font);
    transition:  all 0.3s var(--slai-ease);
    white-space: nowrap;
}
.slai-btn--ghost:hover  { border-color: var(--slai-teal); color: var(--slai-teal); }
.slai-btn--ghost:active { transform: scale(0.97); transition-duration: 0.1s; }

/* Mobile: stack cards */
@media (max-width: 600px) {
    .slai-top-picks-grid { flex-wrap: wrap; }
    .slai-pick-card { flex: 1 1 calc(50% - 5px); max-width: calc(50% - 5px); }
    .slai-pick-card:last-child:nth-child(odd) { flex: 1 1 100%; max-width: 100%; flex-direction: row; }
    .slai-pick-card:last-child:nth-child(odd) .slai-pick-img-wrap { width: 90px; aspect-ratio: 1; flex-shrink: 0; }
}


/* ═══════════════════════════════════════════════════════════════
   ⑥  NO-RESULTS SCREEN
   ══════════════════════════════════════════════════════════════ */
.slai-screen--no-results { text-align:center; padding:60px 40px; background:var(--slai-bg-page); }
.slai-no-results-header  { margin-bottom:44px; }
.slai-no-results-icon    { display:block; font-size:56px; margin-bottom:18px; }
.slai-no-results-header h1 { font-family:var(--slai-font-display); font-size:28px; color:var(--slai-text-1); margin-bottom:10px; }
.slai-no-results-header p  { font-size:15px; color:var(--slai-text-3); max-width:480px; margin:0 auto; line-height:1.65; }
.slai-fallback-recs       { margin-top:44px; padding-top:44px; border-top:1px solid var(--slai-border); }
.slai-fallback-title      { font-size:17px; color:var(--slai-text-2); margin-bottom:24px; }
.slai-screen--no-results .slai-products-grid { max-width:900px; margin:0 auto 44px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.slai-restart-row { margin-top: 32px; display: flex; justify-content: center; }

.slai-no-results  { text-align:center; padding:48px 20px; color:var(--slai-text-3); }
.slai-no-results h3 { font-size:18px; font-weight:700; color:var(--slai-text-2); margin-bottom:8px; }


/* ═══════════════════════════════════════════════════════════════
   DESIGN SYSTEM v4.0 — Premium Upgrade
   All components elevated: white cards on mint, display typography,
   segmented controls, gradient progress, shadow hierarchy
   ══════════════════════════════════════════════════════════════ */

/* ── Step icon: hidden everywhere ── */
.slai-step-icon { display: none !important; }

/* ── Step heading: Outfit display, strong hierarchy ── */
.slai-step-header {
    margin-bottom:  20px;
    padding-bottom: 14px;
    border-bottom:  1px solid var(--slai-border);
}
.slai-step-header h2 {
    font-family:     'Outfit', 'Inter', sans-serif;
    font-size:       clamp(18px, 2.4vw, 23px);
    font-weight:     800;
    color:           var(--slai-text-1);
    letter-spacing:  -0.5px;
    line-height:     1.15;
    margin-bottom:   4px;
}
.slai-step-header p {
    font-size:  13px;
    color:      var(--slai-text-3);
    line-height:1.5;
    margin:     0;
}

/* ── Progress bar: teal gradient, subtle glow ── */
.slai-progress-bar,
#slai-progress {
    background:  linear-gradient(90deg, var(--slai-teal) 0%, var(--slai-teal-mid) 100%) !important;
    box-shadow:  0 0 8px rgba(16,132,126,0.3) !important;
    border-radius: 4px !important;
    transition:  width 0.4s cubic-bezier(0.2,0.8,0.2,1) !important;
}

/* ── Input: elevated, cleaner focus ring ── */
.slai-input {
    padding:      13px 16px !important;
    background:   #ffffff !important;
    border:       1.5px solid var(--slai-border) !important;
    border-radius:12px !important;
    font-size:    15px !important;
    box-shadow:   inset 0 1px 3px rgba(0,0,0,0.04) !important;
    transition:   border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.slai-input:focus {
    border-color: var(--slai-teal) !important;
    box-shadow:   0 0 0 3.5px rgba(16,132,126,0.12) !important;
    outline:      none !important;
}

/* ── Age input: jumbo display number ── */
.slai-input--age {
    text-align:      center !important;
    font-family:     'Outfit', 'Inter', sans-serif !important;
    font-size:       clamp(28px, 8vw, 42px) !important;
    font-weight:     800 !important;
    letter-spacing:  -2px !important;
    color:           var(--slai-text-1) !important;
    padding:         22px 16px !important;
    appearance:      textfield !important;
    -moz-appearance: textfield !important;
}
.slai-input--age::placeholder {
    font-size:      clamp(18px, 5vw, 26px) !important;
    font-weight:    500 !important;
    letter-spacing: 0 !important;
    color:          var(--slai-text-muted) !important;
}
/* Hide number input arrows */
.slai-input--age::-webkit-outer-spin-button,
.slai-input--age::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ── Segmented control (gender) ── */
.slai-option-pills--segmented {
    display:       flex !important;
    gap:           0    !important;
    flex-wrap:     nowrap !important;
    border:        1.5px solid var(--slai-border) !important;
    border-radius: 12px !important;
    overflow:      hidden !important;
    background:    #ffffff !important;
    padding:       0 !important;
    box-shadow:    inset 0 1px 3px rgba(0,0,0,0.04) !important;
}
.slai-option-pills--segmented .slai-pill {
    flex:            1 !important;
    border:          none !important;
    border-right:    1.5px solid var(--slai-border) !important;
    border-radius:   0 !important;
    background:      transparent !important;
    justify-content: center !important;
    padding:         14px 8px !important;
    font-size:       13px !important;
    font-weight:     600 !important;
    box-shadow:      none !important;
    transform:       none !important;
    transition:      background 0.18s ease, color 0.18s ease !important;
}
.slai-option-pills--segmented .slai-pill:last-child {
    border-right: none !important;
}
.slai-option-pills--segmented .slai-pill:hover:not(.slai-pill--active) {
    background:  rgba(16,132,126,0.06) !important;
    color:       var(--slai-teal) !important;
    transform:   none !important;
    border-color:transparent !important;
}
.slai-option-pills--segmented .slai-pill--active {
    background:  var(--slai-teal) !important;
    color:       #ffffff !important;
    box-shadow:  none !important;
}

/* ── Cards: white surface, subtle shadow ── */
.slai-check-inner {
    background: #ffffff !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}
.slai-skin-card-inner {
    background: #ffffff !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}
.slai-category-inner {
    background: #ffffff !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}
/* Regular pills ── white surface */
.slai-pill {
    background: #ffffff !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}
/* Don't double-shadow segmented control children */
.slai-option-pills--segmented .slai-pill {
    box-shadow: none !important;
}

/* ── Field labels: tighter, more refined ── */
.slai-field label {
    font-size:      10px !important;
    font-weight:    800 !important;
    letter-spacing: 0.12em !important;
    color:          var(--slai-text-muted) !important;
    text-transform: uppercase !important;
}

/* ── Nav row: white footer, clear border ── */
.slai-nav-row {
    background:  #ffffff !important;
    border-top:  1px solid var(--slai-border) !important;
}

/* ── Steps area: white content well ── */
.slai-steps { background: #ffffff !important; }

/* ── Quiz header: subtle mint strip ── */
.slai-quiz-header { background: var(--slai-mint) !important; }

/* ═══════════════════════════════════════════════════════════════
   UTILITY & STATES
   ══════════════════════════════════════════════════════════════ */
.slai-indexing-box {
    text-align:center; padding:52px 20px;
    background:var(--slai-mint);
    border-radius:var(--slai-radius-lg);
    border:1.5px dashed var(--slai-border-strong);
}
.slai-indexing-spinner {
    width:40px; height:40px;
    border:3px solid var(--slai-border);
    border-top:3px solid var(--slai-teal);
    border-radius:50%;
    margin:0 auto 18px;
    animation:slai-spin 1s linear infinite;
}

.slai-hidden { display:none !important; }

/* Keyboard focus rings */
.slai-btn:focus-visible,
.slai-pill:focus-visible,
.slai-tab:focus-visible,
.slai-chip:focus-visible,
.slai-check-card input:focus-visible + .slai-check-inner,
.slai-skin-card input:focus-visible + .slai-skin-card-inner {
    outline:        2px solid var(--slai-teal);
    outline-offset: 2px;
}

/* Hidden by default — shown by JS */
#slai-submit-btn { display: none; }
#slai-prev-btn   { display: none; }


/* ═══════════════════════════════════════════════════════════════
   MOBILE-FIRST REFINEMENTS  v3.1.0
   Native app-like experience for touch devices.
   All rules use media queries + !important to safely override
   the specificity-heavy desktop rules above.
   Organized: Root → Motion → Wrapper → Intro → Chat → Quiz →
              Results → Loading → No-results
   ══════════════════════════════════════════════════════════════ */

/* ── CSS variable updated by JS after measuring real header ── */
:root { --slai-header-h: 80px; }

/* ── Respect user motion preference — battery + accessibility ── */
@media (prefers-reduced-motion: reduce) {
    .slai-screen--intro::before,
    .slai-screen--intro::after,
    .slai-chat-hd-icon {
        animation: none !important;
    }
    .slai-loading-orb {
        animation: slai-spin 3s linear infinite !important;
    }
    .slai-advisor-wrapper *,
    .slai-advisor-wrapper *::before,
    .slai-advisor-wrapper *::after {
        animation-duration:   0.01ms !important;
        transition-duration:  0.01ms !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   INTRO SCREEN — small devices
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 680px) {
    /* Allow scroll if content is taller than viewport.
       Critical on iPhone SE (568px usable) where intro content
       can reach ~530px — without this it's clipped with no escape. */
    .slai-screen--intro {
        padding:         20px 16px 16px !important;
        justify-content: flex-start    !important; /* don't centre — let scroll happen naturally */
        overflow-y:      auto          !important;
        overflow-x:      hidden;
        -webkit-overflow-scrolling: touch;
    }
    .slai-advisor-mark {
        width: 40px  !important;
        height: 40px !important;
        margin-bottom: 12px !important;
        border-radius: 11px !important;
    }
    .slai-advisor-mark .slai-advisor-mark-img {
        width:  28px !important;
        height: 28px !important;
    }
    .slai-screen--intro .slai-intro-question {
        font-size:     clamp(18px, 5.5vw, 26px) !important;
        margin-bottom: 6px !important;
    }
    .slai-screen--intro .slai-intro-hint {
        font-size:     13px !important;
        margin-bottom: 14px !important;
    }
    /* Concern grid chips — tighter but still tappable (60px tall) */
    .slai-concern-grid {
        gap:           8px  !important;
        margin-bottom: 14px !important;
    }
    .slai-screen--intro .slai-concern-chip {
        padding:   12px 8px !important;
        font-size: 11.5px  !important;
        min-height: 60px   !important;
        gap:        6px     !important;
    }
    .slai-screen--intro .slai-concern-chip-icon { font-size: 20px !important; }
    .slai-chat-wrap   { margin: 8px 0 4px !important; }
    .slai-intro-divider { margin: 0 0 8px  !important; }
    #slai-start-btn   { padding: 10px 20px !important; font-size: 13px !important; }
    .slai-intro-note  { margin-top: 10px   !important; font-size: 10.5px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   CHAT SCREEN — header, thread, suggestions, input bar
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 680px) {
    /* ── Header — larger touch targets (Apple HIG: 44×44px min) ── */
    .slai-chat-hd {
        padding:    8px 12px  !important;
        min-height: 54px;
    }
    .slai-chat-hd-back,
    .slai-chat-hd-new {
        min-height: 44px !important;
        min-width:  44px !important;
        padding:    10px 10px !important;
    }
    /* Icon-only back button on small screens — saves ~40px horizontal space */
    .slai-chat-hd-back span { display: none; }

    /* ── Thread — breathing room on sides ── */
    .slai-chat-thread { padding: 14px 14px 10px !important; }

    /* ── Message bubbles — wider on mobile ── */
    .slai-chat-bubble--user {
        max-width: 85%  !important;
        font-size: 14px !important;
    }
    .slai-chat-bubble--ai {
        font-size: 14px !important;
        max-width: calc(100% - 38px) !important;
    }

    /* ── Suggestion chips — horizontal scroll strip instead of wrap ──
       WHY: 38px left-indent + 3 ×~120px chips = 398px on 375px screen
       = horizontal overflow. Strip scrolls; chips never wrap/clip. */
    .slai-chat-suggestions {
        margin:      4px 0 14px 0 !important;  /* remove 38px left-indent */
        flex-wrap:   nowrap        !important;
        overflow-x:  auto          !important;
        overflow-y:  hidden;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none      !important;
        padding-bottom: 4px;
        gap:         6px           !important;
    }
    .slai-chat-suggestions::-webkit-scrollbar { display: none !important; }
    .slai-chat-suggestion {
        flex-shrink: 0;  /* prevent natural-width chips from collapsing */
        min-height:  36px;
    }

    /* ── Product cards — New Arrivals 2-col layout on mobile ──
       Grid is now full-width (no avatar column) so 2 cards fit
       comfortably: 347px available ÷ 2 = ~168px per card,
       matching the New Arrivals tile width on site. */
    .slai-chat-msg--products {
        max-width: 100%  !important;
        margin:    0     !important;
        padding:   0     !important;
    }
    .slai-chat-products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap:       8px !important;
        max-width: 100% !important;
        margin:    8px 0 6px !important;
    }
    /* Square image auto-sizes from aspect-ratio — no fixed height needed */
    .slai-chat-product-img-wrap { aspect-ratio: 1 / 1 !important; }
    .slai-chat-product-price    { font-size: 14px !important; }
    .slai-chat-product-btn      { font-size: 10px !important; padding: 8px 6px !important; }


    /* ── Chat input bar — safe area + mobile-appropriate sizing ── */
    .slai-advisor-wrapper .slai-chat-bar {
        /* env() provides home-indicator clearance on iPhone X+ */
        padding: 8px 12px max(10px, env(safe-area-inset-bottom)) !important;
    }
    /* Desktop hint "Enter to send · Shift+Enter" is meaningless on mobile */
    .slai-chat-bar-hint { display: none !important; }

    .slai-advisor-wrapper .slai-chat-bar-inner {
        padding:    8px 8px 8px 14px !important;
        min-height: 50px             !important;
    }
    /* Send button — 44px minimum touch target */
    .slai-advisor-wrapper .slai-chat-bar-inner .slai-chat-main-send {
        width:     44px !important;
        height:    44px !important;
        min-width: 44px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   QUIZ — ruthless mobile density
   Budget: header 20 + heading 22 + grid 170 + nav 42 = ~254px
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 680px) {

    .slai-screen--quiz { overflow: hidden !important; }

    /* Progress: bar only, zero padding above */
    .slai-quiz-header         { padding: 0 12px 0 !important; min-height: 0 !important; }
    .slai-quiz-progress-wrap  { margin: 0 !important; }
    .slai-quiz-progress-bar   { height: 3px !important; }
    .slai-quiz-step-label     { font-size: 9px !important; padding: 3px 0 3px !important; letter-spacing: 0.08em !important; }

    /* Step area — min-height:0 is CRITICAL for flex+overflow to work */
    .slai-steps { padding: 8px 12px 4px !important; flex: 1 1 0 !important; min-height: 0 !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; }
    .slai-quiz-header { flex-shrink: 0 !important; }
    .slai-nav-row     { flex-shrink: 0 !important; }

    /* Step icon: gone */
    .slai-step-icon { display: none !important; }

    /* Heading: 14px, single line with ellipsis */
    .slai-step-header    { margin-bottom: 7px !important; }
    .slai-step-header h2 { font-size: 14px !important; font-weight: 700 !important; line-height: 1.2 !important; margin-bottom: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }

    /* Subtitle: REMOVED — saves 28px */
    .slai-step-header p  { display: none !important; }

    /* Category cards: 48px target */
    .slai-category-grid  { grid-template-columns: 1fr 1fr !important; gap: 6px !important; margin-bottom: 0 !important; }
    .slai-category-inner { padding: 8px 6px 7px !important; gap: 3px !important; min-height: 0 !important; border-radius: 10px !important; }
    .slai-category-icon,
    .slai-category-inner > span:first-child { font-size: 19px !important; line-height: 1 !important; }
    .slai-category-inner strong { font-size: 11px !important; font-weight: 700 !important; line-height: 1.2 !important; }
    .slai-category-inner p      { display: none !important; }

    /* Other step types */
    .slai-checkbox-grid   { grid-template-columns: 1fr 1fr !important; gap: 6px !important; }
    .slai-skin-cards      { grid-template-columns: 1fr 1fr !important; gap: 6px !important; }
    .slai-grid-3          { grid-template-columns: 1fr !important; }
    .slai-pill            { min-height: 38px !important; font-size: 12px !important; padding: 0 10px !important; }
    .slai-check-inner     { min-height: 40px !important; padding: 6px 10px !important; font-size: 12px !important; }
    .slai-skin-card-inner { min-height: 40px !important; }

    /* Nav: single row, 36px buttons, border-top divider */
    .slai-nav-row  { padding: 5px 12px !important; flex-shrink: 0 !important; border-top: 1px solid var(--slai-border) !important; }
    .slai-nav-inner { flex-direction: row !important; align-items: center !important; gap: 6px !important; max-width: 100% !important; }
    .slai-btn--back  { order: 1 !important; flex: 0 0 auto !important; width: auto !important; min-width: 40px !important; min-height: 36px !important; font-size: 11.5px !important; padding: 0 10px !important; }
    .slai-btn-skip   { order: 2 !important; flex: 1 1 auto !important; text-align: center !important; font-size: 10px !important; padding: 2px 4px !important; margin: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
    .slai-btn--primary,
    .slai-btn--submit { order: 3 !important; flex: 0 0 auto !important; width: auto !important; min-width: 100px !important; min-height: 36px !important; font-size: 12.5px !important; padding: 0 14px !important; }
}

/* ══════════════════════════════════════════════════════════════
   INTRO — compact
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 680px) {
    .slai-screen--intro { padding: 14px 12px 10px !important; }
    .slai-advisor-mark  { width: 34px !important; height: 34px !important; margin-bottom: 8px !important; border-radius: 9px !important; }
    .slai-advisor-mark .slai-advisor-mark-img { width: 22px !important; height: 22px !important; }
    .slai-screen--intro .slai-intro-question { font-size: clamp(15px, 4.5vw, 20px) !important; line-height: 1.2 !important; margin-bottom: 3px !important; }
    .slai-screen--intro .slai-intro-hint     { font-size: 11px !important; line-height: 1.3 !important; margin-bottom: 8px !important; }
    .slai-concern-grid  { gap: 6px !important; margin-bottom: 8px !important; }
    .slai-screen--intro .slai-concern-chip      { padding: 8px 4px !important; min-height: 50px !important; font-size: 10.5px !important; gap: 3px !important; }
    .slai-screen--intro .slai-concern-chip-icon { font-size: 17px !important; }
    .slai-chat-wrap     { margin: 6px 0 3px !important; }
    .slai-intro-divider { margin: 0 0 6px !important; }
    #slai-start-btn     { padding: 8px 16px !important; font-size: 12.5px !important; }
    .slai-intro-note    { margin-top: 6px !important; font-size: 10px !important; }
}



/* ═══════════════════════════════════════════════════════════════
   RESULTS SCREEN — mobile
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 680px) {
    /* Screen scrolls as a whole — not the grid */
    .slai-screen--results {
        overflow-y:  auto     !important;
        overflow-x:  hidden   !important;
        -webkit-overflow-scrolling: touch !important;
        display:     block    !important; /* Override any flex that breaks scroll */
    }

    /* Header: compact */
    .slai-results-header    { padding: 12px 14px 10px !important; }
    .slai-results-header h1 { font-size: clamp(15px, 4.5vw, 20px) !important; margin: 2px 0 2px !important; }
    .slai-results-icon      { font-size: 18px !important; }

    /* Grid: switch from horizontal flex to 2-col CSS grid, visible overflow */
    .slai-top-picks-grid {
        display:               grid             !important;
        grid-template-columns: repeat(2, 1fr)  !important;
        gap:                   10px             !important;
        padding:               12px 12px 16px  !important;
        flex:                  unset            !important;
        overflow:              visible          !important;
        width:                 auto            !important;
    }

    /* Cards: vertical layout */
    .slai-pick-card,
    .slai-pick-card:last-child:nth-child(odd) {
        flex:           none   !important;
        width:          100%   !important;
        max-width:      none   !important;
        flex-direction: column !important;
        min-height:     auto   !important;
    }
    .slai-pick-img-wrap {
        width:        100%  !important;
        aspect-ratio: 1 / 1 !important;
        flex-shrink:  0     !important;
        height:       auto  !important;
    }
    .slai-pick-body  { padding: 8px 10px 10px !important; }
    .slai-pick-title { -webkit-line-clamp: 2 !important; font-size: 12px !important; }
    .slai-pick-price { font-size: 14px !important; font-weight: 800 !important; color: var(--slai-teal) !important; }

    /* Action buttons: stacked, full-width */
    .slai-results-actions {
        flex-direction: column !important;
        gap:            8px    !important;
        padding:        10px 14px 16px !important;
    }
    .slai-btn--add-all,
    .slai-btn--ghost {
        width:           100%   !important;
        justify-content: center !important;
        min-height:      46px   !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   LOADING SCREEN — mobile
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 680px) {
    .slai-loading-orb  { width: 72px !important; height: 72px !important; }
    .slai-orb-inner    { inset: 8px !important; }
    .slai-loading-phrase { font-size: 13px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   NO-RESULTS SCREEN — mobile
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 680px) {
    .slai-screen--no-results  { padding: 32px 20px  !important; }
    .slai-no-results-icon     { font-size: 40px     !important; }
    .slai-no-results-header h1{ font-size: 22px     !important; }
    .slai-no-results-header p { font-size: 13.5px   !important; }
    .slai-screen--no-results .slai-products-grid { grid-template-columns: 1fr 1fr !important; }
}