/* ═══════════════════════════════════════════════════════════════
   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
   Mobile-only: overlay never shows on desktop, so these resets
   must never touch the desktop layout. Wrapped in max-width:768px.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

/* Lock viewport scroll on html ONLY while overlay is open.
   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. html overflow:hidden is enough. */
html:has(.slai-advisor-wrapper) {
    overflow: hidden;
}

/* 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 is an app-like experience on mobile */
body:has(.slai-advisor-wrapper) .site-footer,
body:has(.slai-advisor-wrapper) footer.site-footer,
body:has(.slai-advisor-wrapper) #colophon {
    display: none !important;
}

} /* end @media (max-width: 768px) */

/* ── Chat screen active: fixed height wrapper, thread scrolls internally. ── */
.slai-advisor-wrapper:has(.slai-screen--chat.slai-screen--active) {
    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);
}

/* Progress header — hidden (replaced by step context in card titles) */
.slai-quiz-header {
    display:     none !important;
}
.slai-quiz-header-inner { display: none !important; }
.slai-progress-bar-wrap  { display: none !important; }
.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;
}

/* Steps: flex column so content can stretch */
.slai-steps {
    flex:        1;
    min-height:  0;
    overflow-y:  auto;
    padding:     20px 32px 12px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--slai-border) transparent;
    display:     flex;
    flex-direction: column;
}
.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: hidden / active */
.slai-step { display: none; flex-direction: column; flex: 1; }
.slai-step--active {
    display:    flex;
    flex-direction: column;
    flex:       1;
    max-width:  720px;
    width:      100%;
    margin:     0 auto;
    animation:  slai-step-in 0.38s var(--slai-ease) forwards;
    will-change: transform, opacity;
}
@keyframes slai-step-in {
    from { opacity:0; transform:translateX(18px); }
    to   { opacity:1; transform:translateX(0); }
}
@keyframes slai-step-in-rev {
    from { opacity:0; transform:translateX(-18px); }
    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); }

/* ── Step 2 pills: taller, bolder, better use of screen ── */
.slai-field-label-text {
    font-size:      11px;
    font-weight:    700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          var(--slai-text-3);
    margin-bottom:  8px;
    display:        block;
}
.slai-field-group        { margin-bottom: 4px; }
.slai-field-group--mt   { margin-top: 20px; }
.slai-option-pills { display:flex; flex-wrap:wrap; gap:8px; }
.slai-option-pills--col { flex-direction:column; flex-wrap:nowrap; gap:6px; }
.slai-option-pills--large .slai-pill { font-size:13.5px; padding:11px 18px; }

.slai-pill {
    display:      inline-flex;
    align-items:  center;
    gap:          5px;
    padding:      11px 18px;
    background:   var(--slai-bg-card);
    border:       1.5px solid var(--slai-border);
    border-radius:100px;
    color:        var(--slai-text-2);
    font-size:    13.5px;
    font-weight:  500;
    cursor:       pointer;
    transition:   all 0.25s var(--slai-ease);
    font-family:  var(--slai-font);
    will-change:  transform, border-color;
    flex:         1;
    min-width:    80px;
    justify-content: center;
    text-align:   center;
}
.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 12px rgba(16,132,126,0.30) !important;
    font-weight:  700 !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 — single-select, fills screen) ── */
.slai-category-grid {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows:        1fr;      /* equal-height rows */
    gap:                   10px;
    flex:                  1;        /* stretch to fill step height */
    align-content:         stretch;
}
/* Hide radio input — styled by card */
.slai-category-card input[type="radio"],
.slai-category-card input[type="checkbox"] { display:none; }
.slai-category-card { cursor:pointer; display:flex; }
.slai-category-inner {
    flex:           1;
    padding:        18px 14px 16px;
    background:     var(--slai-bg-card);
    border:         1.5px solid var(--slai-border);
    border-radius:  var(--slai-radius);
    text-align:     center;
    transition:     all 0.25s var(--slai-ease);
    will-change:    transform, border-color, box-shadow;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    justify-content:center;
    gap:            6px;
    min-height:     90px;
}
.slai-category-inner:hover  { border-color:var(--slai-teal); background:rgba(16,132,126,0.04); 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.09);
    box-shadow:   0 0 0 2.5px rgba(16,132,126,0.20);
}
.slai-category-icon { font-size:26px; margin-bottom:1px; }
.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; }
}


/* ═══════════════════════════════════════════════════════════════
   QUIZ REDESIGN — NEW COMPONENTS  v4
   ══════════════════════════════════════════════════════════════ */

/* ── Quiz screen layout ── */
.slai-screen--quiz { overflow: hidden; }
.slai-quiz-header  { flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:10px 16px 6px; }

/* ── Progress dots ── */
.slai-progress-dots { display:flex; gap:6px; align-items:center; }
.slai-dot { width:6px; height:6px; border-radius:50%; background:#D1D5DB; transition:width .3s,background .3s,border-radius .3s; flex-shrink:0; }
.slai-dot--active { width:18px; border-radius:3px; background:#10847E; }
.slai-dot--done   { background:rgba(16,132,126,0.4); }

/* ── Steps container ── */
.slai-steps { flex:1; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; padding:12px 16px 0; scrollbar-width:thin; }

/* ── Step visibility ── */
.slai-step { display:none; }
/* NOTE: display:flex is applied by global auto-layout block below */
.slai-step--active { display:flex; flex-direction:column; flex:1; animation:slai-step-in .3s cubic-bezier(.2,.8,.2,1) both; }
@keyframes slai-step-in     { from{opacity:0;transform:translateX(24px)} to{opacity:1;transform:none} }
@keyframes slai-step-in-rev { from{opacity:0;transform:translateX(-24px)} to{opacity:1;transform:none} }

/* ── Step header ── */
.slai-step-hd { margin-bottom:14px; }
.slai-step-hd h2 { font-family:'Outfit','Inter',sans-serif; font-size:18px; font-weight:700; color:#111827; letter-spacing:-.02em; margin-bottom:3px; }
.slai-step-hd p  { font-size:13px; color:#6B7280; }

/* ── Goal grid (Step A) ── */
.slai-goal-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px; }
.slai-goal-card { position:relative; display:flex; align-items:center; border:1.5px solid #E5E7EB; border-radius:12px; background:#fff; padding:11px 12px; cursor:pointer; gap:10px; transition:border-color .2s,background .2s,transform .15s; min-height:68px; }
.slai-goal-card input[type="checkbox"] { position:absolute; opacity:0; pointer-events:none; }
.slai-goal-inner { display:flex; align-items:center; gap:9px; font-size:13px; font-weight:600; color:#374151; line-height:1.2; flex:1; }
.slai-goal-icon  { width:26px; height:26px; flex-shrink:0; color:#6B7280; transition:color .2s; }
.slai-goal-check { position:absolute; top:6px; right:6px; width:18px; height:18px; border-radius:50%; background:transparent; display:flex; align-items:center; justify-content:center; border:1.5px solid #E5E7EB; transition:all .2s; }
.slai-goal-check svg { width:10px; height:10px; display:none; }
/* Selected via :has */
.slai-goal-card:has(input:checked) { border-color:#10847E; background:#F0FAFA; }
.slai-goal-card:has(input:checked) .slai-goal-inner { color:#10847E; }
.slai-goal-card:has(input:checked) .slai-goal-icon  { color:#10847E; }
.slai-goal-card:has(input:checked) .slai-goal-check { background:#10847E; border-color:#10847E; }
.slai-goal-card:has(input:checked) .slai-goal-check svg { display:block; }
/* JS fallback (iOS <15.4) */
.slai-goal-card.slai-selected { border-color:#10847E!important; background:#F0FAFA!important; }
.slai-goal-card.slai-selected .slai-goal-inner { color:#10847E!important; }
.slai-goal-card.slai-selected .slai-goal-icon  { color:#10847E!important; }
.slai-goal-card.slai-selected .slai-goal-check { background:#10847E!important; border-color:#10847E!important; }
.slai-goal-card.slai-selected .slai-goal-check svg { display:block!important; }
.slai-goal-card:not(:has(input:checked)):not(.slai-selected):hover { border-color:#A7C4C3; background:#FAFFFE; transform:translateY(-1px); }

/* ── Other expand ── */
.slai-other-expand { max-height:0; overflow:hidden; transition:max-height .3s,opacity .3s; opacity:0; }
.slai-other-expand--open { max-height:120px; opacity:1; margin-bottom:12px; }
.slai-other-input { width:100%; border:1.5px solid #D1D5DB; border-radius:10px; padding:10px 12px; font-size:13.5px; font-family:inherit; color:#374151; resize:none; outline:none; background:#fff; margin-top:8px; transition:border-color .2s; }
.slai-other-input:focus { border-color:#10847E; }

/* ── Profile basics ── */
.slai-profile-basics { border-top:1px solid #F3F4F6; margin-top:14px; padding-top:14px; display:flex; flex-direction:column; gap:10px; padding-bottom:16px; }
.slai-basics-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.slai-basics-label { font-size:11px; font-weight:600; color:#9CA3AF; text-transform:uppercase; letter-spacing:.06em; min-width:72px; flex-shrink:0; }

/* ── Skin type row ── */
.slai-skin-type-row { display:flex; gap:6px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
.slai-skin-type-row::-webkit-scrollbar { display:none; }
.slai-skin-pill { flex-shrink:0; height:36px; padding:0 14px; border-radius:100px; border:1.5px solid #E5E7EB; background:#fff; font-size:13px; font-weight:500; color:#374151; cursor:pointer; transition:all .18s; font-family:inherit; white-space:nowrap; }
.slai-skin-pill.slai-pill--active { border-color:#10847E; background:#10847E; color:#fff; font-weight:600; }
.slai-skin-pill:not(.slai-pill--active):hover { border-color:#10847E; color:#10847E; }

/* ── Field layout ── */
.slai-field { display:flex; flex-direction:column; gap:8px; }
.slai-field--mt { margin-top:16px; }
.slai-field-label { font-size:11px; font-weight:600; color:#9CA3AF; text-transform:uppercase; letter-spacing:.06em; }
.slai-field-label small { font-size:10px; color:#D1D5DB; text-transform:none; letter-spacing:0; margin-left:4px; }

/* ── Concern chip grid 3-col ── */
.slai-chip-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.slai-chip-grid--sm { grid-template-columns:repeat(2,1fr); }
.slai-chip-item { display:block; cursor:pointer; position:relative; }
.slai-chip-item input { position:absolute; opacity:0; pointer-events:none; }
.slai-chip-inner { display:flex; align-items:center; justify-content:center; flex-direction:column; gap:4px; border:1.5px solid #E5E7EB; border-radius:10px; background:#fff; padding:8px 6px; transition:all .18s; min-height:44px; text-align:center; }
.slai-chip-ico { font-size:15px; line-height:1; }
.slai-chip-lbl { font-size:11px; font-weight:500; color:#374151; line-height:1.2; }
.slai-chip-item:has(input:checked) .slai-chip-inner,
.slai-chip-item.slai-chip-selected .slai-chip-inner { border-color:#10847E; background:#F0FAFA; }
.slai-chip-item:has(input:checked) .slai-chip-lbl,
.slai-chip-item.slai-chip-selected .slai-chip-lbl  { color:#10847E; }
.slai-chip-item:not(:has(input:checked)):not(.slai-chip-selected):hover .slai-chip-inner { border-color:#A7C4C3; }
.slai-chip-item--none:has(input:checked) .slai-chip-inner { border-color:#10B981; background:#ECFDF5; }
.slai-chip-item--none:has(input:checked) .slai-chip-lbl  { color:#10B981; }

/* ── Slim nav footer ── */
.slai-nav-row { flex-shrink:0; border-top:1px solid #F3F4F6; background:#fff; padding:8px 16px; padding-bottom:max(8px,env(safe-area-inset-bottom)); }
.slai-nav-inner { display:flex; align-items:center; gap:8px; max-width:480px; margin:0 auto; }
.slai-nav-btn { border:none; font-family:inherit; cursor:pointer; border-radius:100px; display:inline-flex; align-items:center; gap:5px; transition:all .18s; white-space:nowrap; font-size:13px; font-weight:600; }
.slai-nav-btn--back     { color:#6B7280; background:transparent; padding:8px 10px; }
.slai-nav-btn--back:hover { color:#374151; }
.slai-nav-btn--skip     { color:#9CA3AF; background:transparent; padding:8px 6px; font-weight:400; font-size:12.5px; margin-left:auto; }
.slai-nav-btn--skip:hover { color:#6B7280; }
.slai-nav-btn--continue { background:#10847E; color:#fff; padding:10px 20px; box-shadow:0 4px 14px rgba(16,132,126,.25); }
.slai-nav-btn--continue:hover { background:#0c6b66; transform:translateY(-1px); }
.slai-nav-btn--submit   { background:linear-gradient(135deg,#10847E,#0fa89f); color:#fff; padding:10px 18px; font-size:13px; box-shadow:0 4px 14px rgba(16,132,126,.3); flex:1; justify-content:center; }
.slai-nav-btn--submit:hover { background:#0c6b66; transform:translateY(-1px); }

/* ── Results screen ── */
.slai-results-hd { padding:20px 16px 12px; text-align:center; flex-shrink:0; }
.slai-results-spark { font-size:22px; color:#10847E; display:block; margin-bottom:6px; }
.slai-results-hd h1 { font-family:'Outfit','Inter',sans-serif; font-size:20px; font-weight:700; color:#111827; letter-spacing:-.02em; margin-bottom:6px; }
.slai-results-summary { font-size:13px; color:#6B7280; line-height:1.5; max-width:320px; margin:0 auto; }

/* ── Category tabs ── */
.slai-category-tabs { display:flex; gap:6px; padding:0 16px 12px; flex-wrap:wrap; flex-shrink:0; }
.slai-cat-tab { height:32px; padding:0 14px; border-radius:100px; border:1.5px solid #E5E7EB; background:#fff; font-size:12.5px; font-weight:500; color:#6B7280; cursor:pointer; transition:all .18s; font-family:inherit; }
.slai-cat-tab--active,.slai-cat-tab:hover { border-color:#10847E; background:#F0FAFA; color:#10847E; font-weight:600; }

/* ── Horizontal result card ── */
.slai-result-cards { display:flex; flex-direction:column; gap:10px; padding:0 16px; }
.slai-result-card { display:flex; gap:12px; align-items:flex-start; border:1px solid #E5E7EB; border-radius:14px; padding:12px; background:#fff; text-decoration:none; color:inherit; transition:border-color .2s,box-shadow .2s; }
.slai-result-card:hover { border-color:#A7C4C3; box-shadow:0 4px 16px rgba(16,132,126,.08); }
.slai-result-img { width:68px; height:68px; border-radius:10px; object-fit:cover; flex-shrink:0; border:1px solid #F3F4F6; }
.slai-result-img-ph { width:68px; height:68px; border-radius:10px; background:#F3F4F6; display:flex; align-items:center; justify-content:center; font-size:24px; flex-shrink:0; }
.slai-result-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.slai-result-brand { font-size:10px; font-weight:600; color:#9CA3AF; text-transform:uppercase; letter-spacing:.05em; }
.slai-result-name  { font-size:13px; font-weight:600; color:#111827; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.slai-result-match { font-size:11px; font-weight:600; color:#10847E; display:flex; align-items:center; gap:3px; }
.slai-result-match::before { content:'●'; font-size:7px; }
.slai-result-price-row { display:flex; align-items:center; gap:6px; margin-top:2px; }
.slai-result-price { font-size:14px; font-weight:700; color:#111827; }
.slai-result-old-price { font-size:12px; color:#9CA3AF; text-decoration:line-through; }
.slai-result-atc { margin-top:8px; width:100%; height:34px; border-radius:8px; background:#10847E; color:#fff; border:none; font-size:12.5px; font-weight:600; cursor:pointer; font-family:inherit; transition:background .18s; display:flex; align-items:center; justify-content:center; }
.slai-result-atc:hover { background:#0c6b66; }
.slai-result-atc--done { background:#10B981!important; }
.slai-result-atc--loading { opacity:.7; cursor:default; }

/* ── Results actions ── */
.slai-results-actions { display:flex; gap:8px; padding:12px 16px; padding-bottom:max(12px,env(safe-area-inset-bottom)); border-top:1px solid #F3F4F6; background:#fff; flex-shrink:0; }
.slai-add-all-btn { flex:1; justify-content:center; }

/* ═══════════════════════════════════════════════════════════════
   ADAPTIVE QUIZ — new component styles
   ══════════════════════════════════════════════════════════════ */

/* Priority grid (single-select version of category grid) */
.slai-priority-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap:                   10px;
    margin-bottom:         8px;
}
.slai-priority-card input[type=radio] { display:none; }
.slai-priority-card input[type=radio]: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);
}

/* Max-select chip limiter */
.slai-card-disabled { opacity: 0.38; pointer-events: none; }
.slai-limit-reached .slai-check-card:not(.slai-card-disabled) {}

/* Fix-what section labels */
.slai-fix-section-label {
    font-size:    11px;
    font-weight:  700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color:        var(--slai-text-3);
    margin:       16px 0 6px;
}
.slai-fix-grid { margin-bottom: 4px; }
.slai-fix-card input[type=radio] { display:none; }
.slai-fix-card input[type=radio]:checked + .slai-check-inner {
    border-color: var(--slai-teal);
    background:   rgba(16,132,126,0.08);
    box-shadow:   0 0 0 2px rgba(16,132,126,0.16);
}

/* Grouped results section header */
.slai-result-section-hd {
    font-size:    13px;
    font-weight:  700;
    color:        var(--slai-text-1);
    padding:      14px 0 6px;
    border-bottom:1px solid var(--slai-border);
    margin-bottom:8px;
    display:      flex;
    align-items:  center;
    gap:          6px;
}

/* ═══════════════════════════════════════════════════════════════
   GLOBAL QUIZ AUTO-LAYOUT SHELL
   Every step behaves like a Figma Auto Layout frame:
   header pinned top · content fills middle · footer pinned bottom
   ══════════════════════════════════════════════════════════════ */

/* ── Shell ─────────────────────────────────────────────────── */
.slai-screen--quiz {
    display:        flex !important;
    flex-direction: column !important;
    overflow:       hidden !important;
}
.slai-steps {
    flex:           1 1 0 !important;
    min-height:     0 !important;
    overflow-y:     auto !important;
    display:        flex !important;
    flex-direction: column !important;
    padding:        clamp(14px,3vh,28px) clamp(16px,4vw,36px) clamp(10px,2vh,18px) !important;
}
.slai-nav-row { flex-shrink: 0 !important; }

/* ── Active step: flex column filling all available space ─── */
.slai-step { display: none !important; }
.slai-step--active {
    display:        flex !important;
    flex-direction: column !important;
    flex:           1 1 0 !important;
    min-height:     0 !important;
    width:          100% !important;
    max-width:      720px !important;
    margin:         0 auto !important;
    animation:      slai-step-in 0.35s var(--slai-ease) forwards !important;
}

/* ── Step header: compact and pinned ─────────────────────── */
.slai-step-header {
    flex:           0 0 auto !important;
    margin-bottom:  clamp(10px, 2.2vh, 22px) !important;
}
.slai-step-header .slai-step-icon { margin-bottom: 8px !important; }
.slai-step-header h2 {
    font-size:      clamp(15px, 3.5vw, 21px) !important;
    margin-bottom:  3px !important;
}
.slai-step-header p {
    font-size:      clamp(12px, 2vw, 14px) !important;
    margin:         0 !important;
}

/* ── Stretch the direct-child content grid/group ─────────── */
/* Category grid (Step 1) */
.slai-step--active > .slai-category-grid {
    flex:           1 1 0 !important;
    min-height:     0 !important;
    grid-auto-rows: 1fr !important;
    gap:            clamp(7px, 1.5vh, 14px) !important;
    align-content:  stretch !important;
}
/* Checkbox / check-card grids (concerns, hair, body, supps, restrictions) */
.slai-step--active > .slai-checkbox-grid {
    flex:           1 1 0 !important;
    min-height:     0 !important;
    grid-auto-rows: 1fr !important;
    gap:            clamp(6px, 1.2vh, 10px) !important;
    align-content:  stretch !important;
}
/* Skin-type grid (also uses .slai-checkbox-grid) */
.slai-step[data-step="skin-type"].slai-step--active > .slai-checkbox-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-rows:        1fr !important;
}

/* ── Card interiors: viewport-relative min-height ─────────── */
.slai-category-inner {
    min-height:     clamp(80px, 12.5vh, 130px) !important;
    justify-content:center !important;
}
.slai-check-inner {
    min-height:     clamp(58px, 9vh, 96px) !important;
}
.slai-skin-card-inner {
    min-height:     clamp(72px, 11vh, 110px) !important;
}

/* Cards must be display:flex so they can stretch */
.slai-category-card { display: flex !important; }
.slai-check-card    { display: flex !important; }
.slai-skin-card     { display: flex !important; }
.slai-category-inner,
.slai-check-inner,
.slai-skin-card-inner { flex: 1 !important; }

/* ── Profile step: distribute age + gender evenly ────────── */
.slai-step[data-step="profile"].slai-step--active {
    justify-content: space-evenly !important;
    gap:             clamp(16px, 4vh, 40px) !important;
}
.slai-step[data-step="profile"] .slai-field-group {
    flex: 0 0 auto !important;
}
/* Age + gender pill rows: equal-width pills, fill full row */
.slai-step[data-step="profile"] .slai-option-pills { gap: clamp(6px,1.2vh,10px) !important; }
.slai-step[data-step="profile"] .slai-pill {
    flex:           1 1 0 !important;
    min-width:      64px !important;
    padding:        clamp(10px,2vh,14px) 10px !important;
    font-size:      clamp(12.5px,2vw,14px) !important;
    justify-content:center !important;
}

/* ── Fix-what step: has groups + section labels, allow scroll ─ */
.slai-step[data-step="fix-what"].slai-step--active {
    flex:       1 1 auto !important;
    overflow-y: auto !important;
    min-height: 0 !important;
    gap:        0 !important;
}
/* Shrink the fix-what sub-grids to a comfortable card size */
.slai-step[data-step="fix-what"] .slai-checkbox-grid {
    grid-auto-rows: minmax(52px, auto) !important;
    align-content:  start !important;
    flex:           0 0 auto !important;
}

/* ── "Other" expand: always at bottom, never stretches ────── */
.slai-other-expand { flex: 0 0 auto !important; }

/* ── Short screens (< 640px tall): tighten everything ─────── */
@media (max-height: 640px) {
    .slai-steps          { padding: clamp(8px,1.5vh,14px) clamp(14px,3vw,20px) 6px !important; }
    .slai-step-header    { margin-bottom: 8px !important; }
    .slai-step-header p  { display: none !important; }
    .slai-category-inner { min-height: clamp(64px, 10.5vh, 90px) !important; padding: 10px 8px !important; }
    .slai-check-inner    { min-height: clamp(46px,  7.5vh, 72px) !important; padding: 7px 9px !important; }
    .slai-skin-card-inner{ min-height: clamp(54px,  8.5vh, 80px) !important; }
    .slai-category-inner p { display: none !important; }
    .slai-step[data-step="profile"].slai-step--active {
        justify-content: flex-start !important;
        gap:             16px !important;
    }
}

/* ── Tall screens (≥ 812px tall): more breathing room ─────── */
@media (min-height: 812px) {
    .slai-category-inner  { min-height: clamp(96px, 13.5vh, 145px) !important; }
    .slai-check-inner     { min-height: clamp(70px, 10.5vh, 108px)  !important; }
    .slai-step-header     { margin-bottom: clamp(14px, 2.8vh, 28px)  !important; }
}

/* ── Content-heavy steps: cap card size so screen stays scannable */
.slai-step[data-step="skin-concern"].slai-step--active > .slai-checkbox-grid,
.slai-step[data-step="supp-goal"].slai-step--active > .slai-checkbox-grid,
.slai-step[data-step="body-goal"].slai-step--active > .slai-checkbox-grid {
    grid-auto-rows: minmax(clamp(50px, 8vh, 80px), auto) !important;
    align-content:  start !important;
    flex:           1 1 auto !important;
    overflow-y:     auto !important;
}


/* ═══════════════════════════════════════════════════════════════
   PROFILE STEP — Age + Gender premium selection cards
   Uses label+radio so :checked handles selected state in CSS.
   No JS class-toggling = no disappearing bug.
   ══════════════════════════════════════════════════════════════ */

/* Profile step: header pinned, two sections fill the rest evenly */
.slai-step[data-step="profile"].slai-step--active {
    justify-content: flex-start !important;
    gap:             clamp(20px, 4vh, 48px) !important;
}

/* Each section (age / gender) fills available space equally */
.slai-profile-section {
    flex:           1 1 0;
    min-height:     0;
    display:        flex;
    flex-direction: column;
    justify-content:center;
}

/* Section label */
.slai-profile-label {
    font-size:      11px;
    font-weight:    700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          var(--slai-text-3);
    margin-bottom:  clamp(8px, 1.4vh, 14px);
}

/* Option grid containers */
.slai-profile-select {
    display: grid;
    gap:     clamp(8px, 1.4vh, 14px);
}
.slai-profile-select--4 {
    grid-template-columns: repeat(4, 1fr);
}
.slai-profile-select--gender {
    grid-template-columns: 1fr 1fr;
    grid-template-rows:    auto auto;
}

/* Each label acts as the card */
.slai-profile-opt {
    cursor:  pointer;
    display: flex;
}
/* Hide the real radio */
.slai-profile-opt input[type="radio"] { display: none; }

/* The visible card surface */
.slai-profile-opt-inner {
    flex:            1;
    display:         flex;
    align-items:     center;
    justify-content: center;
    text-align:      center;
    padding:         clamp(14px, 2.6vh, 24px) 10px;
    min-height:      clamp(54px, 9vh, 88px);
    background:      var(--slai-bg-card, #ffffff);
    border:          1.5px solid var(--slai-border, #e5e7eb);
    border-radius:   12px;
    font-size:       clamp(13px, 2vw, 15px);
    font-weight:     600;
    color:           var(--slai-text-2, #374151);
    line-height:     1.3;
    transition:      background 0.2s ease, border-color 0.2s ease,
                     color 0.2s ease, box-shadow 0.2s ease;
    white-space:     normal;
    word-break:      break-word;
}
.slai-profile-opt-inner:hover {
    border-color: var(--slai-teal, #10847E);
    background:   rgba(16, 132, 126, 0.05);
    color:        var(--slai-teal, #10847E);
}

/* SELECTED STATE — :checked sibling, unbeatable specificity */
.slai-profile-opt input[type="radio"]:checked + .slai-profile-opt-inner {
    background:   var(--slai-teal, #10847E) !important;
    border-color: var(--slai-teal, #10847E) !important;
    color:        #ffffff !important;
    box-shadow:   0 4px 16px rgba(16, 132, 126, 0.38) !important;
    font-weight:  700 !important;
}

/* "Prefer not to say" — spans both columns */
.slai-profile-opt--wide {
    grid-column: 1 / -1;
}

/* Short screens: reduce card height */
@media (max-height: 640px) {
    .slai-profile-opt-inner {
        min-height: clamp(42px, 7vh, 62px) !important;
        padding:    clamp(10px, 1.8vh, 16px) 8px !important;
        font-size:  12.5px !important;
    }
    .slai-step[data-step="profile"].slai-step--active {
        gap: 16px !important;
    }
}


/* ═══════════════════════════════════════════════════════════════
   TARGETED FIXES — Issues 1, 2, 3
   ══════════════════════════════════════════════════════════════ */

/* ── Issue 1: Step 1 grid — 8 cards, 2-col, equal rows ─────── */
.slai-step[data-step="intent"].slai-step--active > .slai-category-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows:    repeat(4, 1fr) !important;
    align-content:         stretch !important;
}

/* ── Issue 2: Profile selected state via JS class (immune to
   cascade fights — .is-selected added by JS on radio change) ── */
.slai-profile-opt.is-selected .slai-profile-opt-inner {
    background:   #10847E !important;
    border-color: #10847E !important;
    color:        #ffffff !important;
    box-shadow:   0 4px 16px rgba(16,132,126,0.38) !important;
    font-weight:  700 !important;
}
/* Keep :checked as secondary signal in case JS fires late */
.slai-profile-opt input[type="radio"]:checked ~ .slai-profile-opt-inner,
.slai-profile-opt input[type="radio"]:checked + .slai-profile-opt-inner {
    background:   #10847E !important;
    border-color: #10847E !important;
    color:        #ffffff !important;
    font-weight:  700 !important;
}
/* Force text visibility inside all states */
.slai-profile-opt-inner,
.slai-profile-opt.is-selected .slai-profile-opt-inner,
.slai-profile-opt input[type="radio"]:checked + .slai-profile-opt-inner {
    display:         flex !important;
    visibility:      visible !important;
    opacity:         1 !important;
    white-space:     normal !important;
    overflow:        visible !important;
    text-overflow:   unset !important;
}

/* ── Issue 3: Profile layout — stack naturally from top,
   sections take only their natural height (not flex:1 which
   was centering content mid-screen causing "too low" look) ─── */
.slai-step[data-step="profile"].slai-step--active {
    justify-content: flex-start !important;
    gap:             clamp(16px, 3vh, 32px) !important;
}
.slai-profile-section {
    flex:            0 0 auto !important;  /* only as tall as content needs */
    justify-content: flex-start !important;
    min-height:      0 !important;
}


/* ═══════════════════════════════════════════════════════════════
   SMART RESULTS PAGE — Advisor experience styles
   ══════════════════════════════════════════════════════════════ */

/* ── Results header ─────────────────────────────────────────── */
.slai-screen--results {
    display:        flex;
    flex-direction: column;
    overflow-y:     auto;
    overflow-x:     hidden;
    -webkit-overflow-scrolling: touch;
    background:     var(--slai-bg,#f8f8f6);
    padding-bottom: 24px;
}
.slai-results-hd {
    background:  linear-gradient(135deg, #10847E 0%, #0f766e 100%);
    padding:     clamp(18px,4vw,28px) clamp(16px,4vw,24px) clamp(14px,3vw,20px);
    color:       #fff;
    flex-shrink: 0;
}
.slai-results-hd-inner { margin-bottom: 12px; }
.slai-results-hd-inner .slai-results-spark {
    font-size: 18px;
    opacity:   0.85;
    display:   block;
    margin-bottom: 4px;
}
#slai-results-title {
    font-size:      clamp(17px,4.5vw,22px) !important;
    font-weight:    800 !important;
    color:          #fff !important;
    margin:         0 0 6px !important;
    line-height:    1.2 !important;
}
.slai-results-summary {
    font-size:   clamp(12px,3.5vw,14px) !important;
    color:       rgba(255,255,255,0.88) !important;
    line-height: 1.45 !important;
    margin:      0 !important;
}

/* Strategy pills */
.slai-strategy-pills {
    display:   flex;
    flex-wrap: wrap;
    gap:       6px;
    margin-top: 4px;
}
.slai-strategy-pill {
    background:    rgba(255,255,255,0.18);
    border:        1px solid rgba(255,255,255,0.3);
    border-radius: 20px;
    padding:       4px 10px;
    font-size:     11px;
    font-weight:   600;
    color:         #fff;
    white-space:   nowrap;
}

/* ── Best starting point ────────────────────────────────────── */
.slai-best-start {
    background:  #fff;
    border-left: 3px solid #10847E;
    margin:      12px 14px 0;
    border-radius: 14px;
    padding:     14px 14px 10px;
    box-shadow:  0 2px 12px rgba(16,132,126,0.10);
}
.slai-best-start-label {
    display:     flex;
    align-items: center;
    gap:         6px;
    font-size:   11px;
    font-weight: 700;
    color:       #10847E;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 10px;
}
.slai-best-start-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.slai-start-card {
    display:       flex;
    gap:           12px;
    align-items:   center;
    text-decoration: none;
    color:         inherit;
    padding:       8px 0;
    border-bottom: 1px solid #f0f0f0;
}
.slai-start-card:last-child { border-bottom: none; }
.slai-start-img {
    width:         56px;
    height:        56px;
    object-fit:    cover;
    border-radius: 10px;
    flex-shrink:   0;
    background:    #f5f5f3;
}
.slai-start-body { flex: 1; min-width: 0; }
.slai-start-name {
    font-size:   13px;
    font-weight: 700;
    color:       #111827;
    line-height: 1.3;
    margin-bottom: 3px;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}
.slai-start-atc {
    margin-top: 6px;
    font-size:  11px;
    padding:    5px 12px;
    background: #10847E;
    color:      #fff;
    border:     none;
    border-radius: 20px;
    cursor:     pointer;
    font-weight: 700;
}

/* ── Product groups ─────────────────────────────────────────── */
.slai-product-groups {
    display:        flex;
    flex-direction: column;
    gap:            0;
    padding:        12px 0 0;
}
.slai-product-group { padding: 0 14px 16px; }
.slai-group-label {
    font-size:      10px;
    font-weight:    700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          #10847E;
    background:     rgba(16,132,126,0.07);
    border-radius:  6px;
    padding:        4px 10px;
    display:        inline-block;
    margin-bottom:  10px;
}
.slai-group-cards { display: flex; flex-direction: column; gap: 10px; }

/* ── Product card — horizontal layout ──────────────────────── */
.slai-result-card {
    display:        flex;
    gap:            12px;
    align-items:    flex-start;
    background:     #fff;
    border-radius:  14px;
    padding:        12px;
    text-decoration:none;
    color:          inherit;
    box-shadow:     0 1px 8px rgba(0,0,0,0.07);
    border:         1.5px solid transparent;
    transition:     border-color 0.2s, box-shadow 0.2s;
    cursor:         pointer;
}
.slai-result-card:hover  { border-color: #10847E; box-shadow: 0 3px 18px rgba(16,132,126,0.14); }
.slai-result-card--start { border-color: rgba(16,132,126,0.4); box-shadow: 0 2px 14px rgba(16,132,126,0.15); }
.slai-result-img {
    width:         72px;
    height:        72px;
    object-fit:    cover;
    border-radius: 10px;
    flex-shrink:   0;
    background:    #f5f5f3;
}
.slai-result-img-ph {
    width:          72px;
    height:         72px;
    border-radius:  10px;
    background:     #f5f5f3;
    display:        flex;
    align-items:    center;
    justify-content:center;
    font-size:      24px;
    flex-shrink:    0;
}
.slai-result-body { flex: 1; min-width: 0; }

/* Badges row */
.slai-result-badges {
    display:     flex;
    align-items: center;
    gap:         6px;
    flex-wrap:   wrap;
    margin-bottom: 4px;
}
.slai-priority-badge {
    font-size:     9.5px;
    font-weight:   700;
    letter-spacing:0.05em;
    color:         #fff;
    border-radius: 20px;
    padding:       2px 9px;
    line-height:   1.4;
    white-space:   nowrap;
}
.slai-confidence-badge {
    font-size:     9.5px;
    font-weight:   600;
    color:         #6b7280;
    background:    #f3f4f6;
    border-radius: 20px;
    padding:       2px 8px;
    white-space:   nowrap;
}

.slai-result-brand {
    font-size:      10px;
    font-weight:    600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color:          #9ca3af;
    margin-bottom:  2px;
}
.slai-result-name {
    font-size:   13.5px;
    font-weight: 700;
    color:       #111827;
    line-height: 1.3;
    margin-bottom: 4px;
    display:     -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:    hidden;
}
.slai-match-reason {
    font-size:   11.5px;
    color:       #6b7280;
    font-style:  italic;
    line-height: 1.35;
    margin-bottom: 3px;
}
.slai-benefit-line {
    font-size:   11.5px;
    color:       #374151;
    line-height: 1.35;
    margin-bottom: 6px;
    display:     -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:    hidden;
}
.slai-result-price-row { margin-bottom: 8px; }
.slai-result-price     { font-size: 14px; font-weight: 800; color: #10847E; }
.slai-result-old-price { font-size: 11px; color: #9ca3af; text-decoration: line-through; margin-left: 5px; }

/* Card action row */
.slai-result-card-actions {
    display:     flex;
    align-items: center;
    gap:         8px;
    flex-wrap:   wrap;
}
.slai-result-atc {
    flex:          0 0 auto;
    background:    #10847E;
    color:         #fff;
    border:        none;
    border-radius: 20px;
    font-size:     11.5px;
    font-weight:   700;
    padding:       7px 16px;
    cursor:        pointer;
    white-space:   nowrap;
    transition:    background 0.2s, transform 0.15s;
}
.slai-result-atc:hover   { background: #0f766e; }
.slai-result-atc:active  { transform: scale(0.95); }
.slai-result-atc--loading{ background: #9ca3af; pointer-events: none; }
.slai-result-atc--done   { background: #059669; pointer-events: none; }

/* Why this? toggle */
.slai-why-toggle {
    background:  none;
    border:      none;
    font-size:   11px;
    color:       #10847E;
    font-weight: 600;
    cursor:      pointer;
    padding:     0;
    line-height: 1;
}
/* Why this? expanded panel */
.slai-why-body {
    margin-top:   8px;
    padding-top:  8px;
    border-top:   1px dashed #e5e7eb;
}
.slai-why-p {
    font-size:   12px;
    color:       #374151;
    line-height: 1.5;
    margin:      0 0 6px;
}
.slai-why-tip {
    font-size:   11.5px;
    color:       #6b7280;
    font-style:  italic;
    margin:      0;
    line-height: 1.45;
}

/* ── How to use section ─────────────────────────────────────── */
.slai-how-to-use {
    margin:        12px 14px 0;
    background:    #fff;
    border-radius: 14px;
    padding:       14px;
    box-shadow:    0 1px 8px rgba(0,0,0,0.06);
}
.slai-htu-title {
    display:     flex;
    align-items: center;
    gap:         6px;
    font-size:   12px;
    font-weight: 700;
    color:       #10847E;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 10px;
}
.slai-htu-row {
    display:     flex;
    align-items: baseline;
    gap:         8px;
    padding:     6px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size:   12.5px;
}
.slai-htu-row:last-child { border-bottom: none; }
.slai-htu-num  { color: #10847E; font-weight: 800; font-size: 13px; min-width: 18px; }
.slai-htu-step { font-weight: 700; color: #111827; min-width: 90px; flex-shrink: 0; }
.slai-htu-names{ color: #6b7280; font-size: 11.5px; line-height: 1.4; }

/* ── Choice guidance strip ──────────────────────────────────── */
.slai-choice-guide {
    margin:  12px 14px 0;
    display: flex;
    flex-direction: column;
    gap:     6px;
}
.slai-guide-item {
    display:     flex;
    align-items: flex-start;
    gap:         8px;
    background:  #fff;
    border-radius: 10px;
    padding:     10px 12px;
    font-size:   12px;
    color:       #374151;
    line-height: 1.4;
    box-shadow:  0 1px 4px rgba(0,0,0,0.05);
}
.slai-guide-icon {
    font-size:   13px;
    color:       #10847E;
    flex-shrink: 0;
    min-width:   16px;
    text-align:  center;
    line-height: 1.4;
}
.slai-guide-item--budget .slai-guide-icon { color: #d97706; }
.slai-guide-item--skip   .slai-guide-icon { color: #9ca3af; }


/* ═══════════════════════════════════════════════════════════════
   CHAT PRODUCT CARDS — match advisor results card style
   Cards keep .slai-chat-product-card for JS filter/sort compat
   but use .slai-result-card visual structure
   ══════════════════════════════════════════════════════════════ */

/* Chat product grid — vertical stack inside chat bubble */
.slai-chat-products {
    display:        flex;
    flex-direction: column;
    gap:            10px;
    padding:        4px 0 0;
}

/* When a chat card also has .slai-result-card, apply chat-specific overrides */
.slai-chat-product-card.slai-result-card {
    /* Slightly more compact than the full results page card */
    padding:   10px !important;
    gap:       10px !important;
    border-radius: 12px !important;
}
.slai-chat-product-card.slai-result-card .slai-result-img {
    width:  60px !important;
    height: 60px !important;
}
.slai-chat-product-card.slai-result-card .slai-result-img-ph {
    width:  60px !important;
    height: 60px !important;
    font-size: 20px !important;
}
.slai-chat-product-card.slai-result-card .slai-result-name {
    font-size: 12.5px !important;
}
.slai-chat-product-card.slai-result-card .slai-result-atc {
    font-size: 11px !important;
    padding:   6px 12px !important;
}

/* "More" toggle button */
.slai-chat-products-toggle {
    display:       block;
    width:         100%;
    margin-top:    6px;
    background:    none;
    border:        1.5px solid #dde8e9;
    border-radius: 20px;
    padding:       8px 0;
    font-size:     12px;
    font-weight:   600;
    color:         #10847E;
    cursor:        pointer;
    text-align:    center;
}
.slai-chat-products-toggle:hover { background: rgba(16,132,126,0.05); }


/* ── Results header — restore clean original style (no green bg) ── */
.slai-results-hd {
    background:  #ffffff !important;
    padding:     clamp(18px,4vw,28px) clamp(16px,4vw,24px) clamp(10px,2vw,16px) !important;
    color:       #111827 !important;
    border-bottom: 1px solid #f0f0f0 !important;
    flex-shrink: 0 !important;
}
#slai-results-title {
    color:       #111827 !important;
}
.slai-results-summary {
    color:       #6b7280 !important;
}
/* Strategy pills — keep but teal on white bg */
.slai-strategy-pill {
    background:    rgba(16,132,126,0.08) !important;
    border:        1px solid rgba(16,132,126,0.2) !important;
    color:         #10847E !important;
}
/* Hide the panels we removed from JS just in case */
#slai-best-start,
#slai-how-to-use {
    display: none !important;
}


/* ═══════════════════════════════════════════════════════════════
   CLASSIC CARD LAYOUT — match original "Your personalised picks"
   screenshot exactly: image-left top row + full-width ATC button
   ══════════════════════════════════════════════════════════════ */

/* Results screen — clean light bg */
.slai-screen--results {
    background: #f5f5f3 !important;
}

/* Product grid — vertical stack */
#slai-products-grid.slai-result-cards,
.slai-product-groups {
    display:        flex !important;
    flex-direction: column !important;
    gap:            10px !important;
    padding:        14px !important;
}

/* Card shell */
.slai-result-card {
    display:        flex !important;
    flex-direction: column !important;     /* stack top-row + button vertically */
    gap:            0 !important;
    background:     #ffffff !important;
    border-radius:  16px !important;
    padding:        14px 14px 0 !important;
    border:         1.5px solid rgba(16,132,126,0.18) !important;
    box-shadow:     0 1px 6px rgba(0,0,0,0.05) !important;
    text-decoration:none !important;
    color:          inherit !important;
    cursor:         pointer !important;
    transition:     box-shadow 0.2s !important;
    overflow:       hidden !important;
}
.slai-result-card:hover { box-shadow: 0 3px 14px rgba(16,132,126,0.14) !important; }
.slai-result-card--start { border-color: #10847E !important; }

/* Top row: image + info */
.slai-rc-top {
    display:     flex !important;
    gap:         12px !important;
    align-items: flex-start !important;
    margin-bottom: 12px !important;
}

/* Product image */
.slai-result-card .slai-result-img {
    width:         72px !important;
    height:        72px !important;
    object-fit:    cover !important;
    border-radius: 10px !important;
    flex-shrink:   0 !important;
    background:    #f5f5f3 !important;
}
.slai-result-card .slai-result-img-ph {
    width:          72px !important;
    height:         72px !important;
    border-radius:  10px !important;
    background:     #f5f5f3 !important;
    display:        flex !important;
    align-items:    center !important;
    justify-content:center !important;
    font-size:      26px !important;
    flex-shrink:    0 !important;
}

/* Info column */
.slai-result-card .slai-result-body {
    flex:       1 !important;
    min-width:  0 !important;
    display:    flex !important;
    flex-direction: column !important;
    gap:        3px !important;
}
.slai-result-card .slai-result-brand {
    font-size:      9.5px !important;
    font-weight:    600 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    color:          #9ca3af !important;
}
.slai-result-card .slai-result-name {
    font-size:   13.5px !important;
    font-weight: 700 !important;
    color:       #111827 !important;
    line-height: 1.3 !important;
    display:     -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow:    hidden !important;
}

/* "● AI Matched" label */
.slai-result-match {
    display:     flex !important;
    align-items: center !important;
    gap:         5px !important;
    font-size:   11.5px !important;
    font-weight: 600 !important;
    color:       #10847E !important;
}
.slai-result-match::before {
    content:       '●' !important;
    font-size:     8px !important;
    color:         #10847E !important;
    flex-shrink:   0 !important;
}

/* Price */
.slai-result-card .slai-result-price-row { margin-top: 2px !important; }
.slai-result-card .slai-result-price {
    font-size:   15px !important;
    font-weight: 800 !important;
    color:       #111827 !important;
}
.slai-result-card .slai-result-old-price {
    font-size:       12px !important;
    color:           #9ca3af !important;
    text-decoration: line-through !important;
    margin-left:     6px !important;
}

/* Full-width ADD TO CART button at card bottom */
.slai-result-card .slai-result-atc {
    display:       block !important;
    width:         100% !important;
    box-sizing:    border-box !important;
    background:    #f3f4f6 !important;
    color:         #374151 !important;
    border:        none !important;
    border-top:    1px solid #e5e7eb !important;
    border-radius: 0 0 14px 14px !important;
    padding:       13px 0 !important;
    font-size:     11.5px !important;
    font-weight:   700 !important;
    letter-spacing:0.06em !important;
    text-transform:uppercase !important;
    cursor:        pointer !important;
    text-align:    center !important;
    transition:    background 0.18s !important;
    margin:        0 -14px !important;          /* bleed to card edges */
    width:         calc(100% + 28px) !important;/* compensate bleed */
}
.slai-result-card .slai-result-atc:hover   { background: #e5e7eb !important; }
.slai-result-card .slai-result-atc--loading { background: #e5e7eb !important; color: #9ca3af !important; }
.slai-result-card .slai-result-atc--done    { background: #10847E !important; color: #ffffff !important; }

/* Hide advisor-era elements inside the classic card */
.slai-result-card .slai-result-badges,
.slai-result-card .slai-priority-badge,
.slai-result-card .slai-confidence-badge,
.slai-result-card .slai-match-reason,
.slai-result-card .slai-benefit-line,
.slai-result-card .slai-result-card-actions,
.slai-result-card .slai-why-toggle,
.slai-result-card .slai-why-body {
    display: none !important;
}

/* Hide advisor sections */
#slai-best-start,
#slai-how-to-use,
#slai-choice-guide,
#slai-strategy-pills,
.slai-product-group .slai-group-label {
    display: none !important;
}


/* ═══════════════════════════════════════════════════════════════
   FIX: Results header text centering + chat cards single-column
   ══════════════════════════════════════════════════════════════ */

/* 1. Center the results header text */
.slai-results-hd,
.slai-results-hd-inner {
    text-align:  center !important;
}
.slai-results-hd .slai-results-spark {
    display:     block !important;
    text-align:  center !important;
}
.slai-strategy-pills {
    justify-content: center !important;
}

/* 2. Chat products — force single-column stack, kill old 2-col grid */
.slai-chat-products {
    display:        flex !important;
    flex-direction: column !important;
    grid-template-columns: unset !important;
    gap:            10px !important;
    padding:        4px 0 2px !important;
}

/* 3. Chat card — when it has .slai-result-card, use the horizontal layout.
   Kill ALL the old 2-column grid card overrides for these cards. */
.slai-chat-product-card.slai-result-card {
    display:        flex !important;
    flex-direction: column !important;
    gap:            0 !important;
    padding:        12px 12px 0 !important;
    border:         1.5px solid rgba(16,132,126,0.18) !important;
    border-bottom:  1.5px solid rgba(16,132,126,0.18) !important;
    border-right:   1.5px solid rgba(16,132,126,0.18) !important;
    border-radius:  14px !important;
    box-shadow:     0 1px 6px rgba(0,0,0,0.05) !important;
    background:     #ffffff !important;
    width:          100% !important;
    box-sizing:     border-box !important;
    animation:      slai-msg-in 0.22s cubic-bezier(0.34,1.56,0.64,1) both;
}
/* Kill odd/even grid dividers for new cards */
.slai-chat-product-card.slai-result-card:nth-child(odd) {
    border-right: 1.5px solid rgba(16,132,126,0.18) !important;
}
.slai-chat-product-card.slai-result-card:last-child { border-bottom: 1.5px solid rgba(16,132,126,0.18) !important; }

/* 4. Top row inside chat card */
.slai-chat-product-card.slai-result-card .slai-rc-top {
    display:       flex !important;
    gap:           12px !important;
    align-items:   flex-start !important;
    margin-bottom: 10px !important;
}

/* 5. Image in chat card */
.slai-chat-product-card.slai-result-card .slai-result-img {
    width:         64px !important;
    height:        64px !important;
    object-fit:    cover !important;
    border-radius: 10px !important;
    flex-shrink:   0 !important;
    background:    #f5f5f3 !important;
}
.slai-chat-product-card.slai-result-card .slai-result-img-ph {
    width:          64px !important;
    height:         64px !important;
    border-radius:  10px !important;
    background:     #f5f5f3 !important;
    display:        flex !important;
    align-items:    center !important;
    justify-content:center !important;
    font-size:      22px !important;
    flex-shrink:    0 !important;
}

/* 6. Body column in chat card */
.slai-chat-product-card.slai-result-card .slai-result-body {
    flex:       1 !important;
    min-width:  0 !important;
    display:    flex !important;
    flex-direction: column !important;
    gap:        3px !important;
}
.slai-chat-product-card.slai-result-card .slai-result-name {
    font-size:   13px !important;
    font-weight: 700 !important;
    color:       #111827 !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    overflow:    hidden !important;
    display:     -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
}
.slai-chat-product-card.slai-result-card .slai-result-match {
    display:     flex !important;
    align-items: center !important;
    gap:         5px !important;
    font-size:   11.5px !important;
    font-weight: 600 !important;
    color:       #10847E !important;
}
.slai-chat-product-card.slai-result-card .slai-result-price {
    font-size:   14px !important;
    font-weight: 800 !important;
    color:       #111827 !important;
}
.slai-chat-product-card.slai-result-card .slai-result-old-price {
    font-size:       11px !important;
    color:           #9ca3af !important;
    text-decoration: line-through !important;
    margin-left:     5px !important;
}

/* 7. Full-width ADD TO CART at bottom of chat card */
.slai-chat-product-card.slai-result-card .slai-result-atc {
    display:       block !important;
    width:         calc(100% + 24px) !important;
    box-sizing:    border-box !important;
    margin:        0 -12px !important;
    background:    #f3f4f6 !important;
    color:         #374151 !important;
    border:        none !important;
    border-top:    1px solid #e5e7eb !important;
    border-radius: 0 0 12px 12px !important;
    padding:       12px 0 !important;
    font-size:     11px !important;
    font-weight:   700 !important;
    letter-spacing:0.06em !important;
    text-transform:uppercase !important;
    cursor:        pointer !important;
    text-align:    center !important;
    transition:    background 0.15s !important;
}
.slai-chat-product-card.slai-result-card .slai-result-atc:hover   { background: #e5e7eb !important; }
.slai-chat-product-card.slai-result-card .slai-result-atc--done    { background: #10847E !important; color: #fff !important; }
.slai-chat-product-card.slai-result-card .slai-result-atc--loading { background: #e5e7eb !important; color: #9ca3af !important; }

/* 8. Hide advisor-era elements from chat cards too */
.slai-chat-product-card.slai-result-card .slai-result-badges,
.slai-chat-product-card.slai-result-card .slai-priority-badge,
.slai-chat-product-card.slai-result-card .slai-confidence-badge,
.slai-chat-product-card.slai-result-card .slai-match-reason,
.slai-chat-product-card.slai-result-card .slai-benefit-line,
.slai-chat-product-card.slai-result-card .slai-result-card-actions,
.slai-chat-product-card.slai-result-card .slai-why-toggle,
.slai-chat-product-card.slai-result-card .slai-why-body {
    display: none !important;
}




/* ── Desktop-only brand panel: hidden by default (mobile), shown on desktop ── */
.slai-desktop-brand-panel { display: none; }

/* ═══════════════════════════════════════════════════════════════
   DESKTOP LAYOUT — @media (min-width: 769px)
   True desktop-native rebuild. Mobile rules above are untouched.
   This is NOT a scaled-up mobile layout. It is a purpose-built
   desktop experience that shares the mobile product logic.
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {

/* ── 1. Body scroll — desktop must allow normal page scroll ────
   On mobile the advisor is a full-screen overlay that locks scroll.
   On desktop it's a fixed-height shell inside the page flow. */
html:has(.slai-advisor-wrapper) { overflow: auto !important; }
body:has(.slai-advisor-wrapper) { overflow: auto !important; }

/* ── 2. Wrapper — full-width, fixed viewport height ─────────────
   Fills the full viewport width, height = viewport minus the theme
   header. --slai-header-h is measured by JS after the page loads.
   Fallback 120px covers most desktop headers gracefully. */
.slai-advisor-wrapper {
    max-width:     100% !important;
    width:         100% !important;
    margin-left:   0 !important;
    margin-right:  0 !important;
    height:        calc(100vh - var(--slai-header-h, 120px)) !important;
    min-height:    unset !important;
    border-radius: 0 !important;
    overflow:      hidden !important;
    box-shadow:    none !important;
    position:      relative !important;
}

/* ── 3. Screens — visibility/opacity system (matches base CSS) ──
   Base CSS uses visibility:hidden/opacity:0 for inactive screens.
   We reinforce here. The JS showScreen() clears inline styles
   but the class-based rules survive. */
.slai-screen {
    position:       absolute !important;
    inset:          0 !important;
    visibility:     hidden !important;
    opacity:        0 !important;
    pointer-events: none !important;
    z-index:        1 !important;
}
.slai-screen--active {
    visibility:     visible !important;
    opacity:        1 !important;
    pointer-events: auto !important;
    z-index:        2 !important;
}

/* ── 4. INTRO SCREEN — HIDDEN on desktop ────────────────────────
   Desktop skips the intro chat landing entirely.
   JS (slaiDesktopInit) calls showScreen('quiz') immediately.
   We also force display:none as an extra guard so even if it
   briefly has slai-screen--active the user never sees it. */
.slai-screen--intro {
    display: none !important;
}

/* ── 5. QUIZ SCREEN — two-column desktop layout ─────────────────
   DOM structure:
     .slai-screen--quiz
       ├── .slai-desktop-brand-panel   ← LEFT: brand context
       ├── .slai-steps                 ← RIGHT: quiz steps
       └── .slai-nav-row               ← BOTTOM: navigation bar

   Layout: CSS Grid — 2 columns + 1 bottom row for nav.
   Brand panel: col 1, row 1.
   Steps: col 2, row 1.
   Nav: col 1/-1, row 2 (spans full width).
   ─────────────────────────────────────────────────────────────── */
.slai-screen--quiz.slai-screen--active {
    display:               grid !important;
    grid-template-columns: minmax(300px, 380px) 1fr !important;
    grid-template-rows:    1fr auto !important;
    background:            #f5f7f7 !important;
    overflow:              hidden !important;
    visibility:            visible !important;
    opacity:               1 !important;
    pointer-events:        auto !important;
    z-index:               2 !important;
}

/* Desktop brand panel — left column */
.slai-desktop-brand-panel {
    grid-column:     1 !important;
    grid-row:        1 !important;
    display:         flex !important;
    flex-direction:  column !important;
    justify-content: center !important;
    background:      #ffffff !important;
    border-right:    1px solid #e8eeee !important;
    overflow:        hidden !important;
    position:        relative !important;
    z-index:         1 !important;
}
.slai-dbp-inner {
    padding:        44px 44px !important;
    display:        flex !important;
    flex-direction: column !important;
    gap:            0 !important;
}

/* Brand logo row */
.slai-dbp-logo {
    display:       flex !important;
    align-items:   center !important;
    gap:           10px !important;
    margin-bottom: 28px !important;
}
.slai-dbp-brand {
    font-family:   'Outfit', 'Inter', sans-serif !important;
    font-size:     17px !important;
    font-weight:   700 !important;
    color:         #10847E !important;
    letter-spacing:-0.2px !important;
}

/* Headline */
.slai-dbp-headline {
    font-family:   'Outfit', 'Inter', sans-serif !important;
    font-size:     clamp(22px, 2.2vw, 30px) !important;
    font-weight:   800 !important;
    line-height:   1.18 !important;
    color:         #0a1a1a !important;
    letter-spacing:-0.5px !important;
    margin:        0 0 14px !important;
}

/* Subheadline */
.slai-dbp-sub {
    font-size:   14px !important;
    line-height: 1.55 !important;
    color:       #5a7a7a !important;
    margin:      0 0 24px !important;
}

/* Trust bullets */
.slai-dbp-bullets {
    list-style:     none !important;
    padding:        0 !important;
    margin:         0 0 32px !important;
    display:        flex !important;
    flex-direction: column !important;
    gap:            10px !important;
}
.slai-dbp-bullets li {
    display:     flex !important;
    align-items: center !important;
    gap:         9px !important;
    font-size:   13.5px !important;
    color:       #2d4a4a !important;
    font-weight: 500 !important;
}
.slai-dbp-bullets li svg { flex-shrink: 0 !important; }

/* "Chat instead" link */
.slai-dbp-chat-link {
    display:      inline-flex !important;
    align-items:  center !important;
    gap:          7px !important;
    background:   none !important;
    border:       1.5px solid #dde8e9 !important;
    border-radius:10px !important;
    padding:      10px 16px !important;
    font-size:    13px !important;
    font-weight:  600 !important;
    color:        #10847E !important;
    cursor:       pointer !important;
    transition:   border-color 0.18s, background 0.18s !important;
    letter-spacing:-0.01em !important;
    align-self:   flex-start !important;
}
.slai-dbp-chat-link:hover {
    border-color: #10847E !important;
    background:   rgba(16,132,126,0.05) !important;
}

/* Quiz steps area — right column */
.slai-screen--quiz .slai-steps {
    grid-column:     2 !important;
    grid-row:        1 !important;
    overflow-y:      auto !important;
    overflow-x:      hidden !important;
    display:         flex !important;
    flex-direction:  column !important;
    align-items:     stretch !important;
    padding:         0 !important;
    background:      #f5f7f7 !important;
    scrollbar-width: thin !important;
    scrollbar-color: #dde8e9 transparent !important;
}

/* Nav row spans full width — below both columns */
.slai-screen--quiz .slai-nav-row {
    grid-column: 1 / -1 !important;
    grid-row:    2 !important;
    background:  #ffffff !important;
    border-top:  1px solid #e8eeee !important;
    padding:     14px 24px !important;
}
.slai-screen--quiz .slai-nav-inner {
    max-width:       1100px !important;
    margin:          0 auto !important;
    display:         flex !important;
    align-items:     center !important;
    justify-content: space-between !important;
}

/* Steps on desktop */
.slai-screen--quiz .slai-step {
    display:        none !important;
    flex-direction: column !important;
    padding:        40px 48px 28px !important;
    min-height:     0 !important;
}
.slai-screen--quiz .slai-step.slai-step--active {
    display: flex !important;
}

/* Step header */
.slai-screen--quiz .slai-step-header {
    margin-bottom: 28px !important;
    text-align:    left !important;
}
.slai-screen--quiz .slai-step-header h2 {
    font-size:     clamp(20px, 2.2vw, 28px) !important;
    font-weight:   800 !important;
    color:         #0a1a1a !important;
    margin-bottom: 6px !important;
    letter-spacing:-0.3px !important;
}
.slai-screen--quiz .slai-step-header p {
    font-size: 14px !important;
    color:     #5a7a7a !important;
    margin:    0 !important;
}

/* ── INTENT GRID — 8 options, 4 columns on desktop ──────────── */
.slai-screen--quiz .slai-category-grid {
    display:               grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap:                   12px !important;
    width:                 100% !important;
}
.slai-screen--quiz .slai-category-card {
    aspect-ratio:   auto !important;
    height:         88px !important;
    padding:        0 16px !important;
    display:        flex !important;
    align-items:    center !important;
    gap:            12px !important;
    flex-direction: row !important;
    border-radius:  12px !important;
    cursor:         pointer !important;
    transition:     background 0.18s, border-color 0.18s, transform 0.15s !important;
}
.slai-screen--quiz .slai-category-card:hover { transform: translateY(-1px) !important; }
.slai-screen--quiz .slai-category-card .slai-cat-icon {
    font-size:   26px !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}
.slai-screen--quiz .slai-category-card .slai-cat-label {
    font-size:   14px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    text-align:  left !important;
}

/* ── Fix-concern category grid — 3 columns ── */
.slai-screen--quiz .slai-fix-cat-grid {
    display:               grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap:                   12px !important;
}

/* ── Condition checkbox grids ── */
.slai-screen--quiz .slai-checkbox-grid {
    display:               grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap:                   10px !important;
}
.slai-screen--quiz .slai-checkbox-grid.slai-grid-4 {
    grid-template-columns: repeat(4, 1fr) !important;
}

/* ── Skin type — 4 options ── */
.slai-screen--quiz .slai-skin-cards {
    display:               grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap:                   12px !important;
}

/* ── Profile step: age + gender side-by-side ── */
.slai-screen--quiz .slai-profile-grid {
    display:               grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap:                   32px !important;
    align-items:           start !important;
}
.slai-screen--quiz .slai-profile-section label {
    font-size:      13px !important;
    color:          #5a7a7a !important;
    font-weight:    600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    margin-bottom:  10px !important;
    display:        block !important;
}
.slai-screen--quiz .slai-option-pills {
    display:   flex !important;
    flex-wrap: wrap !important;
    gap:       8px !important;
}
.slai-screen--quiz .slai-pill {
    padding:   8px 16px !important;
    font-size: 13.5px !important;
}

/* ── Quiz progress header (inside steps) ── */
.slai-quiz-header {
    padding:       14px 48px 10px !important;
    background:    #ffffff !important;
    border-bottom: 1px solid #e8eeee !important;
    display:       flex !important;
    align-items:   center !important;
    gap:           12px !important;
    flex-shrink:   0 !important;
}

/* ── 6. CHAT SCREEN — desktop layout ─────────────────────────── */
.slai-screen--chat.slai-screen--active {
    display:        flex !important;
    flex-direction: column !important;
    overflow:       hidden !important;
    background:     #f5f7f7 !important;
}
.slai-screen--chat .slai-chat-hd {
    background:    #ffffff !important;
    border-bottom: 1px solid #e8eeee !important;
    padding:       16px 32px !important;
    flex-shrink:   0 !important;
}
.slai-screen--chat .slai-chat-thread {
    flex:       1 !important;
    overflow-y: auto !important;
    padding:    28px 0 !important;
}
.slai-chat-thread-inner {
    max-width: 900px !important;
    margin:    0 auto !important;
    padding:   0 40px !important;
}
.slai-chat-bubble--ai  { max-width: 680px !important; }
.slai-chat-bubble--user { max-width: 520px !important; }
.slai-screen--chat .slai-chat-bar {
    background:  #ffffff !important;
    border-top:  1px solid #e8eeee !important;
    padding:     16px 40px 20px !important;
    flex-shrink: 0 !important;
}
.slai-screen--chat .slai-chat-bar-inner {
    max-width: 900px !important;
    margin:    0 auto !important;
}

/* Chat product grid in thread */
.slai-chat-product-grid {
    display:               grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap:                   12px !important;
    margin:                10px 0 0 !important;
    max-width:             none !important;
}
@media (min-width: 1100px) {
    .slai-chat-product-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* ── 7. LOADING SCREEN ── */
.slai-screen--loading.slai-screen--active {
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    background:      #f5f7f7 !important;
}

/* ── 8. NO-RESULTS SCREEN ── */
.slai-screen--no-results.slai-screen--active {
    display:    block !important;
    max-width:  900px !important;
    margin:     0 auto !important;
    overflow-y: auto !important;
    padding:    48px 32px !important;
}

/* ── 9. RESULTS SCREEN — spacious desktop grid ───────────────── */
.slai-screen--results.slai-screen--active {
    display:    block !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: #f5f7f7 !important;
}

/* Results header */
.slai-results-hd {
    background:    #ffffff !important;
    padding:       40px 48px 28px !important;
    border-bottom: 1px solid #e8eeee !important;
}
.slai-results-hd-inner {
    max-width: 900px !important;
    margin:    0 auto !important;
}
#slai-results-title { font-size: clamp(22px, 2.5vw, 32px) !important; }
.slai-strategy-pills {
    max-width: 900px !important;
    margin:    12px auto 0 !important;
    padding:   0 48px !important;
}

/* Content sections — centered, generous padding */
.slai-best-start,
.slai-category-tabs,
.slai-product-groups,
.slai-how-to-use,
.slai-choice-guide,
.slai-results-actions {
    max-width: 1200px !important;
    margin:    0 auto !important;
    padding:   24px 48px !important;
}

/* Product grid — 2 columns */
.slai-products-grid {
    display:               grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap:                   16px !important;
}

/* Product card desktop layout */
.slai-result-card {
    display:        flex !important;
    flex-direction: row !important;
    align-items:    flex-start !important;
    gap:            16px !important;
    padding:        20px !important;
    min-height:     auto !important;
}
.slai-result-card .slai-card-img-wrap {
    width:         88px !important;
    height:        88px !important;
    flex-shrink:   0 !important;
    border-radius: 10px !important;
    overflow:      hidden !important;
}
.slai-result-card .slai-card-img-wrap img {
    width: 100% !important; height: 100% !important; object-fit: cover !important;
}
.slai-result-card .slai-card-body   { flex: 1 !important; min-width: 0 !important; }
.slai-result-card .slai-card-actions { margin-top: 12px !important; }
.slai-result-card .slai-add-btn { width: 100% !important; max-width: none !important; }

/* Guide strip */
.slai-guide-items {
    display:   flex !important;
    flex-wrap: wrap !important;
    gap:       10px !important;
    padding:   0 48px 24px !important;
    margin:    0 !important;
}
.slai-guide-item {
    flex:      1 1 auto !important;
    min-width: 200px !important;
}

/* Category tabs */
.slai-category-tabs { padding: 0 48px !important; }

} /* end @media (min-width: 769px) */