/* ═══════════════════════════════════════════════════════════════ SAYDALE DESKTOP · saydale-v3.css Desktop /ai/ page — 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 ══════════════════════════════════════════════════════════════ */ .saydale-advisor-wrapper { --saydale-teal: #10847E; --saydale-teal-dark: #0c6b66; --saydale-teal-mid: #13a89f; --saydale-yellow: #ffb63d; --saydale-yellow-dark: #e8a02a; --saydale-mint: #eff4f5; --saydale-mint-dark: #e2ecee; --saydale-bg-page: #ffffff; --saydale-bg-surface: #e8eef0; --saydale-bg-card: #ffffff; --saydale-border: #dde8e9; --saydale-border-strong: #b4cfd0; --saydale-grad-primary: linear-gradient(135deg, #10847E 0%, #0fa89f 100%); --saydale-grad-yellow: linear-gradient(135deg, #ffb63d 0%, #f59e0b 100%); --saydale-grad-hero: linear-gradient(135deg, #0c6b66 0%, #10847E 50%, #13a89f 100%); --saydale-text-1: #1a2e2e; --saydale-text-2: #2d4a4a; --saydale-text-3: #5a7a7a; --saydale-text-muted: #8aabab; --saydale-radius-sm: 8px; --saydale-radius: 10px; --saydale-radius-lg: 16px; --saydale-shadow-btn: 0 4px 14px rgba(16,132,126,0.2); --saydale-shadow-hover: 0 8px 24px rgba(16,132,126,0.12); --saydale-ease: cubic-bezier(0.2, 0.8, 0.2, 1); --saydale-font: 'Inter', -apple-system, sans-serif; --saydale-font-display: 'Inter', -apple-system, sans-serif; } /* ═══════════════════════════════════════════════════════════════ RESET (scoped) ══════════════════════════════════════════════════════════════ */ .saydale-advisor-wrapper *, .saydale-advisor-wrapper *::before, .saydale-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 (.saydale-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. ══════════════════════════════════════════════════════════════ */ .saydale-advisor-wrapper { font-family: var(--saydale-font); font-size: 16px; line-height: 1.6; color: var(--saydale-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(--saydale-header-h, 155px) - var(--saydale-bottom-h, 0px)); min-height: 650px; 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. ────────────────────────────────────────────────────────────── */ .saydale-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; } .saydale-quiz-header-inner { max-width: 760px; margin: 0 auto; } .saydale-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. IMPORTANT: Use :not(#saydale-mobile-overlay) > .saydale-advisor-wrapper or scope via body > .saydale-advisor-wrapper to avoid matching the overlay's copy on non-AI pages. The overlay injects its own .saydale-advisor-wrapper inside #saydale-mobile-overlay on EVERY page. ────────────────────────────────────────────────────────────── */ /* Lock viewport scroll on html ONLY on the dedicated AI page. The :not(#saydale-mobile-overlay) guard prevents this from firing on shop/product/home pages where the overlay copy lives. */ html:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) { overflow: hidden; } /* Kill content layout padding (vertical only — preserve horizontal) */ body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-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(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .wd-page-content, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .site-content, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .content-area, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) #content, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .entry-content, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .page-content, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .hentry, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .post, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) article, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .wd-single-product-page, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-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; box-shadow: none !important; border: none !important; background: transparent !important; max-width: 100% !important; width: 100% !important; } /* Hide footer — AI is an app-like experience on mobile */ body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .site-footer, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) footer.site-footer, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) #colophon { display: none !important; } /* ── 1. Hide ALL site chrome — header, admin bar, footer, WhatsApp, any theme ── */ body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .whb-header, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .site-header, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) header.whb-header, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) header, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .wd-header-clone, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .wd-sticky-holder, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) #wpadminbar, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .wa__btn_popup, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .wa__popup_chat_window, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) #mobnav-bar, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) footer, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .site-footer, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) #colophon, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .page-title, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .entry-title, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) h1.entry-title, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .wp-block-post-title, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) nav, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .navigation-top, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .site-branding, /* Twenty Twenty-Five block theme */ body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .wp-block-template-part, /* Twenty Twenty-Five block theme specific */ body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .wp-block-template-part, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .wp-block-post-content > *:not(.saydale-advisor-wrapper):not(:has(.saydale-advisor-wrapper)), body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .wp-block-group:not(:has(.saydale-advisor-wrapper)) { display: none !important; } /* ── 2. Reset body: no scroll, no margin, edge gradient ── */ html:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)), body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) { overflow: hidden !important; height: 100dvh !important; margin: 0 !important; padding: 0 !important; background: #ffffff !important; background-image: radial-gradient(ellipse at 0% 100%, rgba(255,182,61,0.12) 0%, transparent 50%), radial-gradient(ellipse at 100% 0%, rgba(16,132,126,0.10) 0%, transparent 50%) !important; } /* ── 3. Kill ALL theme wrapper padding/margin ── */ body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .wd-content-layout, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .wd-page-content, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .site-content, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .content-area, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) #content, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .entry-content, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .page-content, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .elementor-section-wrap, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .elementor-widget-wrap, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) article, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .hentry, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .post { padding: 0 !important; margin: 0 !important; min-height: 0 !important; max-width: 100% !important; width: 100% !important; } /* ── 4. AI wrapper — full viewport, kill breakout hack ── */ body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-advisor-wrapper { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; max-width: 100% !important; height: 100dvh !important; margin: 0 !important; padding: 0 !important; z-index: 99998 !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; background: transparent !important; } /* ── 5. Shared header — always visible white bar ── */ body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) #saydale-shared-hd { flex-shrink: 0 !important; min-height: 56px !important; height: 56px !important; padding: 0 16px !important; background: #ffffff !important; background-color: #ffffff !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-bottom: 1px solid rgba(0,0,0,0.07) !important; box-shadow: 0 1px 6px rgba(0,0,0,0.05) !important; z-index: 100 !important; position: relative !important; display: flex !important; align-items: center !important; width: 100% !important; box-sizing: border-box !important; } /* Header buttons — positioned within a centered 640px zone */ body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-chat-hd-back { position: absolute !important; left: max(20px, calc(50% - 280px)) !important; } body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-hd-right-wrap { position: absolute !important; right: max(20px, calc(50% - 280px)) !important; top: 50% !important; transform: translateY(-50%) !important; display: flex !important; align-items: center !important; gap: 8px !important; } body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-chat-hd-brand { position: absolute !important; left: 50% !important; transform: translateX(-50%) !important; } /* ── 6. All screens — flex items, NOT absolute ── */ body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-screen { position: relative !important; inset: auto !important; flex: 1 1 0 !important; min-height: 0 !important; width: 100% !important; display: none !important; } body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-screen--active { display: flex !important; flex-direction: column !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } /* ── 7. Intro screen — centered, tight column ── */ body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-screen--intro.saydale-screen--active { background: transparent !important; overflow: hidden !important; } body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-screen--intro .saydale-intro-inner { flex: 1 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; padding: 30px 20px 90px !important; text-align: center !important; max-width: 820px !important; width: 100% !important; margin: 0 auto !important; box-sizing: border-box !important; gap: 0 !important; } /* ── Reorder: chips → chat → or → CTA (matches desktop) ── */ body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-intro-inner .saydale-advisor-mark { order: 1; } body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-intro-inner .saydale-intro-question { order: 2; } body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-intro-inner .saydale-intro-hint { order: 3; } body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-intro-inner .saydale-concern-grid { order: 4; } body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-intro-inner .saydale-chat-wrap { order: 5; width: 100% !important; max-width: 776px !important; margin: 8px auto 4px !important; } body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-intro-inner .saydale-intro-divider { order: 6; } body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-intro-inner .saydale-intro-cta { order: 7; width: 100% !important; max-width: 440px !important; } body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-intro-inner .saydale-intro-note { order: 8; margin-top: auto !important; padding-bottom: 8px !important; } /* Intro text */ body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-intro-question { font-size: clamp(22px, 5.5vw, 28px) !important; font-weight: 500 !important; text-align: center !important; line-height: 1.2 !important; margin-bottom: 16px !important; } body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-intro-hint { text-align: center !important; font-size: 14px !important; margin-bottom: 12px !important; color: #6B7280 !important; } /* Concern chips — 3-col grid, compact */ body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-concern-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; margin-bottom: 8px !important; max-width: 440px !important; width: 100% !important; } body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-concern-chip { padding: 32px 16px !important; border-radius: 14px !important; min-height: 0 !important; gap: 6px !important; font-size: 13px !important; font-weight: 500 !important; background: rgba(255,255,255,0.85) !important; border: 1px solid rgba(16,132,126,0.15) !important; box-shadow: 0 1px 4px rgba(0,0,0,0.04) !important; } body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-concern-chip-icon svg { width: 24px !important; height: 24px !important; } /* CTA row */ body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-intro-cta { text-align: center !important; } /* OR divider */ body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-intro-divider { margin: 6px 0 !important; max-width: 420px !important; width: 100% !important; font-size: 12px !important; color: #9CA3AF !important; } /* Assessment button — outline secondary (same size as scan) */ body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) #saydale-start-btn { font-size: 14px !important; font-weight: 600 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; padding: 14px 24px !important; height: 56px !important; background: transparent !important; border: 1.5px solid rgba(16,132,126,0.25) !important; border-radius: 100px !important; color: #10847E !important; text-decoration: none !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; flex: 1 1 0 !important; width: auto !important; box-shadow: none !important; box-sizing: border-box !important; transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important; order: 1 !important; } body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) #saydale-start-btn:hover { background: rgba(16,132,126,0.06) !important; border-color: rgba(16,132,126,0.40) !important; } body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) #saydale-start-btn svg { width: 22px !important; height: 22px !important; } /* Scan button — teal gradient primary (same size as assessment) */ body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-btn-scan { padding: 14px 24px !important; height: 56px !important; gap: 10px !important; border-radius: 100px !important; background: linear-gradient(135deg, #10847E 0%, #0fa89f 100%) !important; border: none !important; box-shadow: 0 2px 8px rgba(16,132,126,0.25) !important; font-size: 14px !important; font-weight: 600 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; color: #ffffff !important; display: flex !important; align-items: center !important; justify-content: center !important; flex: 1 1 0 !important; width: auto !important; max-width: none !important; margin: 0 !important; text-decoration: none !important; box-sizing: border-box !important; transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease !important; order: 2 !important; } body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-btn-scan:hover { box-shadow: 0 4px 16px rgba(16,132,126,0.35) !important; transform: translateY(-1px) !important; } body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-btn-scan .saydale-scan-icon-wrap { width: 28px !important; height: 28px !important; min-width: 28px !important; } body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-btn-scan .saydale-scan-icon { width: 24px !important; height: 24px !important; } body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-btn-scan .saydale-scan-icon rect, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-btn-scan .saydale-scan-icon circle:not(:last-of-type), body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-btn-scan .saydale-scan-icon rect:last-of-type { stroke: #ffffff !important; } body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-btn-scan .saydale-scan-arrow { display: none !important; } /* CTA row — vertical stack */ body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-cta-row { display: flex !important; flex-direction: column !important; gap: 10px !important; width: 100% !important; align-items: center !important; } /* ── 8. Intro chat — seamless, no dock styling ── */ body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-screen--intro .saydale-chat-wrap { flex-shrink: 0 !important; padding: 0 !important; background: transparent !important; border-top: none !important; box-shadow: none !important; border-radius: 0 !important; } body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-chat-box { margin: 0 !important; border-radius: 16px !important; padding: 0 14px !important; min-height: 48px !important; } body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-chat-input { font-size: 15px !important; min-height: 24px !important; } /* ── 9. Chat screen — flex layout ── */ body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-screen--chat.saydale-screen--active { overflow: hidden !important; } body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-screen--chat .saydale-chat-thread { flex: 1 1 0 !important; min-height: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; padding: 16px 16px 12px !important; } body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-screen--chat .saydale-chat-bar { flex-shrink: 0 !important; padding: 8px 16px max(10px, env(safe-area-inset-bottom)) !important; } /* ── 10. Quiz screen — flex layout ── */ body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-screen--quiz.saydale-screen--active { overflow: hidden !important; } /* ── 11. Results screen — scrollable ── */ body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-screen--results.saydale-screen--active, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-screen--no-results.saydale-screen--active { overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; } /* ── 12. Preloader — hide ── */ body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-preloader { display: none !important; } /* ── 13. Background floor ── */ body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-bg-floor { background: transparent !important; } /* ── 14. Intro note / disclaimer ── */ body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-intro-note, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-chat-disclaimer.saydale-intro-footer-note { font-size: 10px !important; margin-top: auto !important; padding: 6px 0 max(8px, env(safe-area-inset-bottom)) !important; text-align: center !important; color: #B0B8C1 !important; flex-shrink: 0 !important; } /* end full-page takeover — no closing media query needed */ /* ── Chat screen active (MOBILE ONLY): absolute fill + internal scroll ── */ @media (max-width: 768px) { .saydale-advisor-wrapper:has(.saydale-screen--chat.saydale-screen--active) { overflow: hidden; } .saydale-screen--chat.saydale-screen--active { position: absolute !important; inset: 0 !important; height: 100% !important; min-height: unset !important; } .saydale-screen--chat.saydale-screen--active .saydale-chat-thread { flex: 1 !important; overflow-y: auto !important; height: auto !important; min-height: 0 !important; } .saydale-screen--chat.saydale-screen--active .saydale-chat-bar { position: relative; bottom: unset; z-index: 2; } } /* end mobile chat screen */ /* ═══════════════════════════════════════════════════════════════ SCREEN SWITCHER ══════════════════════════════════════════════════════════════ */ /* Screens fill the wrapper exactly via inset:0. No overflow beyond the wrapper — overflow:hidden never clips them. */ .saydale-screen { position: absolute; inset: 0; /* top:0 left:0 right:0 bottom:0 — fills wrapper */ background: transparent; 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. --saydale-header-h is the real measured header offset set by JS. Fallback 80px covers most collapsed mobile headers. */ .saydale-advisor-wrapper { height: calc(100dvh - var(--saydale-header-h, 80px) - var(--saydale-bottom-h, 0px)); overflow-x: hidden; } } .saydale-screen--active { visibility: visible; opacity: 1; pointer-events: auto; z-index: 2; transform: translateZ(0); transition: none !important; } .saydale-screen--quiz.saydale-screen--active { display: flex !important; flex-direction: column; } .saydale-screen--loading.saydale-screen--active { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; } /* Intro: stack from top so header is always flush at the top */ .saydale-screen--intro.saydale-screen--active { display: flex !important; flex-direction: column !important; align-items: stretch; justify-content: flex-start; } /* Results screens scroll internally */ .saydale-screen--results, .saydale-screen--no-results { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; } /* ── Preloader ── */ @keyframes saydale-spin { to { transform: rotate(360deg); } } /* ═══════════════════════════════════════════════════════════════ PRELOADER — full-screen overlay, dissolves into the page ════════════════════════════════════════════════════════════ */ .saydale-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; /* Never block clicks — page content is interactive immediately */ pointer-events: none; } .saydale-preloader.saydale-preloader--hidden { opacity: 0; pointer-events: none; display: none !important; } /* Inner content fades out slightly ahead for a layered dissolve */ .saydale-preloader.saydale-preloader--hidden .saydale-preloader-inner { opacity: 0; transition: opacity 0.25s ease; } /* ── Inner content — no card, just centred elements ── */ .saydale-preloader-inner { display: flex; flex-direction: column; align-items: center; gap: 28px; width: min(320px, 88vw); transition: opacity 0s; /* overridden when hidden */ } /* ── Logo ── */ .saydale-preloader-logo { display: none; } /* replaced by orb */ .saydale-preloader-svg { display: none; } /* Preloader orb = same conic gradient spinner as loading screen */ .saydale-preloader-orb { margin-bottom: 4px; } /* ── Phrase ── */ .saydale-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; } .saydale-pl-phrase.saydale-phrase--fade { opacity: 0; } /* Hide old progress/step elements */ .saydale-preloader-progress-wrap, .saydale-preloader-progress-bar, .saydale-preloader-steps, .saydale-pl-step { display: none !important; } /* ═══════════════════════════════════════════════════════════════ ① INTRO SCREEN ══════════════════════════════════════════════════════════════ */ .saydale-screen--intro { background: transparent !important; padding: 0 0 32px; position: absolute; overflow: hidden; } .saydale-screen--intro, .saydale-screen--intro * { box-sizing: border-box; } /* ── Edge gradient background — white center, soft glows from corners ── */ .saydale-screen--intro::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 0% 100%, rgba(255,182,61,0.06) 0%, transparent 50%), radial-gradient(ellipse at 100% 0%, rgba(16,132,126,0.05) 0%, transparent 50%); pointer-events: none; z-index: 0; } .saydale-screen--intro::after { display: none; } /* Centred content shell — inline with .saydale-intro-inner above */ /* Brand mark */ .saydale-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; } .saydale-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; } .saydale-screen--intro .saydale-intro-question { font-family: 'Inter', -apple-system, sans-serif !important; font-size: clamp(22px, 5.5vw, 28px) !important; font-weight: 500 !important; color: #10847E !important; line-height: 1.2; margin-bottom: 16px; letter-spacing: -0.4px; text-align: center; } .saydale-screen--intro .saydale-intro-hint { font-size: 14.5px; color: #5a7a7a !important; margin-bottom: 28px; line-height: 1.5; } /* ── Concern grid ── */ .saydale-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) { .saydale-concern-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; } } .saydale-screen--intro .saydale-concern-chip { background: rgba(255,255,255,0.7) !important; border: 1.5px solid rgba(16,132,126,0.15) !important; border-radius: 20px !important; padding: 16px 10px 14px !important; font-family: 'Inter', sans-serif !important; font-size: 13px !important; font-weight: 500 !important; color: #10847E !important; letter-spacing: -0.01em !important; text-transform: none !important; cursor: pointer; transition: transform 0.4s var(--saydale-ease), background 0.3s var(--saydale-ease), box-shadow 0.4s var(--saydale-ease), border-color 0.3s var(--saydale-ease), color 0.3s var(--saydale-ease); will-change: transform, box-shadow; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; line-height: 1.25; } .saydale-screen--intro .saydale-concern-chip-icon { display: flex; align-items: center; justify-content: center; line-height: 1; } .saydale-screen--intro .saydale-concern-chip-icon svg, .saydale-screen--intro .saydale-concern-chip-icon .saydale-lc-icon { width: 28px; height: 28px; flex-shrink: 0; stroke: #10847E; transition: filter 0.25s ease; } @media (max-width: 600px) { .saydale-screen--intro .saydale-concern-chip { padding: 14px 8px 12px !important; gap: 6px !important; font-size: 13px !important; } .saydale-screen--intro .saydale-concern-chip-icon svg { width: 24px !important; height: 24px !important; } } .saydale-screen--intro .saydale-concern-chip:hover, .saydale-screen--intro .saydale-concern-chip:focus-visible { background: #10847E !important; border-color: #10847E !important; color: #ffffff !important; box-shadow: var(--saydale-shadow-hover); } /* Desktop Noli layout: rainbow shimmer only — no lift, no shadow, no color change */ body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-screen--intro .saydale-concern-chip:hover, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-screen--intro .saydale-concern-chip:focus-visible { background: linear-gradient(135deg, rgba(255,255,255,0) 0%, rgba(255,182,61,0.06) 18%, rgba(255,255,255,0) 35%, rgba(99,179,237,0.05) 65%, rgba(255,255,255,0) 82%, rgba(216,112,147,0.05) 100% ) !important; border-color: #f3f4f6 !important; color: #1a3330 !important; transform: none !important; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important; } body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-screen--intro .saydale-concern-chip:hover .saydale-concern-chip-icon svg, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-screen--intro .saydale-concern-chip:focus-visible .saydale-concern-chip-icon svg { filter: none !important; } .saydale-screen--intro .saydale-concern-chip:active { transition-duration: 0.1s; } /* ═══════════════════════════════════════════════════════════════ AI CHAT INPUT — hero-sized on desktop ══════════════════════════════════════════════════════════════ */ .saydale-chat-wrap { width: 100%; margin: 16px 0 4px; } .saydale-chat-box { display: flex !important; align-items: center !important; gap: 0 !important; background: #ffffff !important; border: 1.5px solid rgba(16,132,126,0.12) !important; border-radius: 28px !important; padding: 0 16px !important; box-shadow: 0 6px 28px rgba(16,132,126,0.07), 0 2px 6px rgba(0,0,0,0.03); transition: border-color 0.2s ease, box-shadow 0.2s ease; cursor: text !important; position: relative !important; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; min-height: 72px !important; } .saydale-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 icon — hidden, no left padding offset needed */ .saydale-chat-spark { display: none !important; } .saydale-chat-box:focus-within .saydale-chat-spark { opacity: 0.9; transform: translateY(-50%) scale(1.12) rotate(18deg); } /* ── Textarea ── */ .saydale-advisor-wrapper .saydale-chat-box .saydale-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: 18px !important; line-height: 1.5 !important; color: #1a2e2e !important; resize: none !important; min-height: 32px !important; max-height: 140px !important; height: auto !important; overflow-y: auto !important; padding: 6px 6px 6px 16px !important; margin: 0 !important; width: 100% !important; scrollbar-width: thin; scrollbar-color: #dde8e9 transparent; word-break: break-word; letter-spacing: -0.01em; } .saydale-advisor-wrapper .saydale-chat-box .saydale-chat-input::placeholder { color: #a8c4c4 !important; font-style: normal !important; transition: opacity 0.15s; } .saydale-advisor-wrapper .saydale-chat-box .saydale-chat-input:focus::placeholder { opacity: 0.5; } .saydale-advisor-wrapper .saydale-chat-box .saydale-chat-input::-webkit-scrollbar { width: 4px; } .saydale-advisor-wrapper .saydale-chat-box .saydale-chat-input::-webkit-scrollbar-thumb { background: #dde8e9; border-radius: 4px; } /* Animated typing-cursor placeholder */ .saydale-placeholder-cursor { display: inline-block; width: 2px; height: 1em; background: var(--saydale-teal); margin-left: 1px; vertical-align: text-bottom; border-radius: 1px; animation: saydale-cursor-blink 0.9s step-end infinite; } @keyframes saydale-cursor-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* ── Send button — bigger for hero input ── */ .saydale-advisor-wrapper .saydale-chat-box .saydale-chat-send { flex-shrink: 0 !important; width: 50px !important; height: 50px !important; min-width: 50px !important; border-radius: 16px !important; border: none !important; background: #10847e !important; color: #ffffff !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; box-shadow: 0 3px 12px 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; } .saydale-advisor-wrapper .saydale-chat-box .saydale-chat-send:hover:not(:disabled) { background: #0d7a74 !important; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(16,132,126,0.38) !important; } .saydale-advisor-wrapper .saydale-chat-box .saydale-chat-send:active:not(:disabled) { transform: scale(0.93); transition-duration: 0.08s; } .saydale-advisor-wrapper .saydale-chat-box .saydale-chat-send:disabled { background: #c8dddd !important; color: #8ab0b0 !important; box-shadow: none !important; cursor: default !important; transform: none; } .saydale-advisor-wrapper .saydale-chat-box .saydale-chat-send svg { display: block !important; width: 17px !important; height: 17px !important; flex-shrink: 0; } .saydale-chat-hint { font-size: 11.5px; color: var(--saydale-text-muted); text-align: center; margin-top: 7px; letter-spacing: 0.01em; transition: opacity 0.3s ease; } /* ── Chat message thread (intro inline version) ── */ .saydale-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; } .saydale-chat-messages--active { opacity: 1; height: auto; overflow-y: auto; } .saydale-chat-messages::-webkit-scrollbar { width: 4px; } .saydale-chat-messages::-webkit-scrollbar-thumb { background: #dde8e9; border-radius: 4px; } /* Message row */ .saydale-chat-msg { display: flex; gap: 8px; animation: saydale-msg-in 0.28s cubic-bezier(0.34,1.56,0.64,1) both; } @keyframes saydale-msg-in { from { opacity: 0; transform: translateY(10px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } .saydale-chat-msg--ai { align-items: flex-start; } .saydale-chat-avatar { width: 28px; height: 28px; border-radius: 50%; background: transparent; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; box-shadow: none; } .saydale-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(--saydale-text-1); line-height: 1.55; max-width: 78%; box-shadow: 0 1px 6px rgba(0,0,0,0.05); } .saydale-chat-msg--user { flex-direction: row-reverse; } .saydale-chat-bubble--user { background: var(--saydale-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 */ .saydale-chat-typing { display: flex; align-items: center; gap: 8px; } .saydale-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); } .saydale-typing-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--saydale-teal); opacity: 0.4; animation: saydale-bounce 1.2s ease-in-out infinite; } .saydale-typing-dots span:nth-child(2) { animation-delay: 0.2s; } .saydale-typing-dots span:nth-child(3) { animation-delay: 0.4s; } @keyframes saydale-bounce { 0%, 80%, 100% { transform: scale(0.7); opacity: 0.4; } 40% { transform: scale(1.1); opacity: 1; } } /* ── Divider ── */ .saydale-intro-divider { display: flex; align-items: center; gap: 16px; margin: 4px 0 14px; color: #10847E !important; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; width: 100%; max-width: 580px; } .saydale-intro-divider::before, .saydale-intro-divider::after { content: ''; flex: 1; height: 1px; background: #dde8e9; } /* ── Full assessment button ── */ #saydale-start-btn { background: rgba(255,255,255,0.7) !important; border: 1.5px solid rgba(16,132,126,0.15) !important; border-radius: 100px !important; color: #10847E !important; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500; letter-spacing: -0.01em; text-transform: none !important; text-decoration: none !important; padding: 11px 26px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: all 0.18s ease; } #saydale-start-btn:hover { background: rgba(16,132,126,0.06) !important; border-color: #10847E !important; color: #10847E !important; transform: translateY(-1px); } #saydale-start-btn:active { transform: scale(0.97); transition-duration: 0.1s; } .saydale-intro-note { margin-top: 14px; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 400; color: #8aabab !important; letter-spacing: 0; } /* ── Legacy aliases ── */ .saydale-chip { /* JS hook only */ } .saydale-btn { display: inline-flex; align-items: center; gap: 8px; border: none; border-radius: 100px; font-family: var(--saydale-font); font-weight: 600; cursor: pointer; transition: all 0.18s var(--saydale-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: ┌─────────────────┐ ← .saydale-chat-hd (flex-shrink:0) │ Header │ ├─────────────────┤ │ Thread │ ← .saydale-chat-thread (flex:1, scroll here) │ (scrollable) │ ├─────────────────┤ │ Input bar │ ← .saydale-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. ══════════════════════════════════════════════════════════════ */ .saydale-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 .saydale-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 ── */ .saydale-chat-hd { display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-bottom: none; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; transition: background 0.3s ease, backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease, box-shadow 0.3s ease; flex-shrink: 0; z-index: 2; width: 100%; box-sizing: border-box; } /* ── Chat Header — scrolled: glassmorphism white ── */ .saydale-chat-hd.saydale-chat-hd--scrolled { background: rgba(255,255,255,0.82) !important; backdrop-filter: blur(20px) saturate(180%) !important; -webkit-backdrop-filter: blur(20px) saturate(180%) !important; box-shadow: 0 1px 8px rgba(0,0,0,0.05) !important; } /* ── Back button ── */ .saydale-chat-hd-back { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; min-width: 72px; white-space: nowrap; background: rgba(16,132,126,0.06); color: #10847e; border-radius: 100px; font-size: 13px; font-weight: 500; padding: 7px 14px; border: 1px solid rgba(16,132,126,0.12); cursor: pointer; transition: background 0.15s, border-color 0.15s; font-family: inherit; box-shadow: none; line-height: 1; letter-spacing: -0.01em; } .saydale-chat-hd-back svg { width: 15px; height: 15px; flex-shrink: 0; stroke-width: 2.5; stroke: currentColor; } .saydale-chat-hd-back:hover { background: rgba(16,132,126,0.14); color: #0c6b66; transform: translateX(-1px); } .saydale-chat-hd-back:active { transform: scale(0.95); transition-duration: 0.08s; } .saydale-chat-hd-brand { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; justify-content: center; } .saydale-chat-hd-icon { width: 32px; height: 32px; border-radius: 50%; background: none; color: var(--saydale-teal); font-size: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } @keyframes saydale-spin-idle { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .saydale-chat-hd-name { font-family: 'Inter', -apple-system, sans-serif; font-size: 18px; font-weight: 600; color: #10847e; margin: 0; line-height: 1.2; } /* ── New Chat button ── */ .saydale-chat-hd-new { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; min-width: 80px; white-space: nowrap; background: rgba(16,132,126,0.06); color: #10847e; border-radius: 100px; font-size: 13px; font-weight: 500; padding: 7px 14px; border: 1px solid rgba(16,132,126,0.12); cursor: pointer; transition: background 0.15s, border-color 0.15s; font-family: inherit; box-shadow: none; line-height: 1; letter-spacing: -0.01em; } .saydale-chat-hd-new svg { width: 13px; height: 13px; flex-shrink: 0; stroke-width: 2.5; stroke: currentColor; } .saydale-chat-hd-new:hover { background: rgba(16,132,126,0.12); border-color: rgba(16,132,126,0.28); } .saydale-chat-hd-new:active { transform: scale(0.95); transition-duration: 0.08s; } /* ── Message thread ── */ .saydale-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; } .saydale-chat-thread::-webkit-scrollbar { width: 4px; } .saydale-chat-thread::-webkit-scrollbar-thumb { background: #dde8e9; border-radius: 4px; } /* ── Message rows ── */ .saydale-chat-msg { display: flex; gap: 10px; animation: saydale-msg-in 0.22s ease both; max-width: 100%; } @keyframes saydale-msg-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* AI message: no border, just clean text */ .saydale-chat-msg--ai { align-items: flex-start; margin-bottom: 16px; } .saydale-chat-avatar { width: 28px; height: 28px; border-radius: 50%; background: transparent; color: #fff; font-size: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; } .saydale-chat-bubble--ai { background: transparent; border: none; border-radius: 0; padding: 0; font-size: 14.5px; color: var(--saydale-text-1); line-height: 1.65; max-width: calc(100% - 38px); } /* Paragraph spacing inside AI bubbles */ .saydale-chat-bubble--ai p { margin: 0 0 8px; } .saydale-chat-bubble--ai p:last-child { margin-bottom: 0; } .saydale-chat-bubble--ai ul { margin: 4px 0 8px 16px; padding: 0; } .saydale-chat-bubble--ai li { margin-bottom: 4px; } /* User message: clean right-aligned pill */ .saydale-chat-msg--user { flex-direction: row-reverse; margin-bottom: 6px; } .saydale-chat-bubble--user { background: var(--saydale-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 */ .saydale-chat-typing { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; } .saydale-typing-dots { display: flex; gap: 5px; padding: 10px 4px; align-items: center; } .saydale-typing-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--saydale-teal); opacity: 0.25; animation: saydale-bounce 1.4s ease-in-out infinite; } .saydale-typing-dots span:nth-child(2) { animation-delay: 0.2s; } .saydale-typing-dots span:nth-child(3) { animation-delay: 0.4s; } @keyframes saydale-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 ── */ .saydale-chat-suggestions { display: flex; flex-wrap: wrap; gap: 7px; margin: 4px 0 18px 38px; animation: saydale-msg-in 0.3s 0.1s ease both; } .saydale-chat-suggestion { background: #ffffff; border: 1.5px solid #d8ecec; border-radius: 100px; padding: 6px 14px; font-size: 12.5px; font-weight: 500; color: var(--saydale-teal); cursor: pointer; transition: background 0.15s, border-color 0.15s, transform 0.15s; white-space: nowrap; font-family: var(--saydale-font); line-height: 1; } .saydale-chat-suggestion:hover { background: rgba(16,132,126,0.06); border-color: var(--saydale-teal); transform: translateY(-1px); } /* ══ Chat screen input bar ══════════════════════════════════════════ All rules scoped under .saydale-advisor-wrapper to beat WoodMart theme. Hard-coded values instead of var() where theme can redefine variables. ══════════════════════════════════════════════════════════════════ */ .saydale-advisor-wrapper .saydale-chat-bar { flex-shrink: 0 !important; padding: 10px 16px 10px !important; background: #ffffff !important; border-top: none !important; box-shadow: none !important; } .saydale-advisor-wrapper .saydale-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; } .saydale-advisor-wrapper .saydale-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 */ .saydale-advisor-wrapper .saydale-chat-bar-inner .saydale-chat-main-input, .saydale-advisor-wrapper #saydale-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; } .saydale-advisor-wrapper .saydale-chat-bar-inner .saydale-chat-main-input::placeholder { color: #a8c4c4 !important; font-style: normal !important; transition: opacity 0.15s; } .saydale-advisor-wrapper .saydale-chat-bar-inner .saydale-chat-main-input:focus::placeholder { opacity: 0.5; } /* Send button */ .saydale-advisor-wrapper .saydale-chat-bar-inner .saydale-chat-main-send { width: 40px !important; height: 40px !important; min-width: 40px !important; border-radius: 50% !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; } .saydale-advisor-wrapper .saydale-chat-bar-inner .saydale-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; } .saydale-advisor-wrapper .saydale-chat-bar-inner .saydale-chat-main-send:active:not(:disabled) { transform: scale(0.93); transition-duration: 0.08s; } .saydale-advisor-wrapper .saydale-chat-bar-inner .saydale-chat-main-send:disabled { background: #10847e !important; color: #ffffff !important; box-shadow: 0 2px 8px rgba(16,132,126,0.25) !important; cursor: default !important; transform: none; } .saydale-advisor-wrapper .saydale-chat-bar-inner .saydale-chat-main-send svg { display: block !important; width: 17px !important; height: 17px !important; flex-shrink: 0; } .saydale-advisor-wrapper .saydale-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; } .saydale-advisor-wrapper .saydale-chat-bar-inner:focus-within + .saydale-chat-bar-hint { opacity: 1; } .saydale-chat-msg--products { flex-direction: column; align-items: stretch; gap: 0; max-width: 100% !important; padding-left: 0; margin-left: 0; } /* ══ Chat product container ══ */ .saydale-chat-products-wrap { margin: 6px 0 4px; border: 1.5px solid var(--saydale-border); border-radius: 12px; overflow: hidden; background: #ffffff; box-shadow: 0 2px 8px rgba(0,0,0,0.05); width: 100%; } /* ── Filter strip ── */ .saydale-chat-product-filters { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--saydale-border); background: var(--saydale-mint); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .saydale-chat-product-filters::-webkit-scrollbar { display: none; } /* Left group: toggle filter chips */ .saydale-pf-left { display: flex; gap: 6px; align-items: center; flex-shrink: 0; } /* Toggle chips — ghost style, active = teal fill */ .saydale-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(--saydale-border); background: #ffffff; color: var(--saydale-text-3); white-space: nowrap; transition: all 0.15s ease; font-family: var(--saydale-font); flex-shrink: 0; user-select: none; } .saydale-pf-chip:hover { border-color: var(--saydale-teal); color: var(--saydale-teal); } .saydale-pf-chip--active { background: var(--saydale-teal); border-color: var(--saydale-teal); color: #ffffff; } .saydale-pf-chip--active:hover { background: var(--saydale-teal-dark); border-color: var(--saydale-teal-dark); color: #ffffff; } /* ── Footer: Add All to Cart sits below the products grid ── */ .saydale-pf-footer { display: flex; justify-content: flex-end; align-items: center; padding: 8px 10px; border-top: 1px solid var(--saydale-border); background: var(--saydale-mint); } .saydale-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: 600; letter-spacing: 0.01em; cursor: pointer; border: none; background: var(--saydale-teal); color: #ffffff; white-space: nowrap; transition: background 0.15s ease, transform 0.1s ease, opacity 0.15s; font-family: var(--saydale-font); flex-shrink: 0; box-shadow: 0 1px 4px rgba(16,132,126,0.2); } .saydale-pf-add-all svg { flex-shrink: 0; } .saydale-pf-add-all:hover { background: var(--saydale-teal-dark); transform: translateY(-1px); box-shadow: 0 3px 8px rgba(16,132,126,0.28); } .saydale-pf-add-all:active { transform: scale(0.96); } .saydale-pf-add-all--loading { background: var(--saydale-text-muted) !important; cursor: wait; transform: none !important; box-shadow: none !important; opacity: 0.75; } .saydale-pf-add-all--done { background: #16a34a !important; cursor: default; transform: none !important; } .saydale-pf-add-all--done:hover { background: #16a34a !important; transform: none !important; box-shadow: none !important; } /* On Sale empty state */ .saydale-pf-empty { grid-column: 1 / -1; text-align: center; padding: 20px 12px; font-size: 12px; color: var(--saydale-text-muted); font-style: italic; background: var(--saydale-mint); border-top: 1px solid var(--saydale-border); } /* Individual chat card Add: AJAX states */ .saydale-chat-product-btn.saydale-cpb--loading { opacity: 0.65; cursor: wait; pointer-events: none; } .saydale-chat-product-btn.saydale-cpb--done { background: #16a34a; pointer-events: none; min-width: 32px; justify-content: center; } /* ── Desktop: adaptive multi-column grid (3–4 cols depending on count) ── */ .saydale-chat-products { display: grid; /* auto-fill: packs as many 200px columns as fit; max 4 so cards never shrink too far */ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0; width: 100%; } .saydale-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-right: 1px solid rgba(221,232,233,0.7); border-radius: 0; box-shadow: none; transition: background 0.15s ease; animation: saydale-msg-in 0.22s cubic-bezier(0.34,1.56,0.64,1) both; min-width: 0; /* prevent flex children from overflowing grid cell */ } /* Remove right border on the last card in each row using :last-of-type cascade — auto-fill makes nth-child column math unreliable, so we just suppress the rightmost edge globally and let the wrap border handle the outer edge. */ .saydale-chat-product-card:last-child { border-right: none; border-bottom: none; } .saydale-chat-product-card:hover { background: rgba(16,132,126,0.03); } /* ── Thumbnail ── */ .saydale-chat-product-img-wrap { display: block; width: 52px; height: 52px; flex-shrink: 0; border-radius: 8px; overflow: hidden; background: var(--saydale-mint); text-decoration: none; } .saydale-chat-product-thumb { width: 100%; height: 100%; object-fit: contain; padding: 4px; display: block; transition: transform 0.25s ease; } .saydale-chat-product-card:hover .saydale-chat-product-thumb { transform: scale(1.06); } .saydale-chat-product-thumb-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 20px; } /* ── Info ── */ .saydale-chat-product-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 0; } .saydale-chat-product-name { font-size: 12.5px; font-weight: 600; color: var(--saydale-text-1); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .saydale-chat-product-price { font-size: 12px; color: var(--saydale-teal); font-weight: 600; letter-spacing: -0.1px; display: flex; align-items: baseline; gap: 4px; } .saydale-chat-product-old-price { font-size: 10px; color: var(--saydale-text-muted); font-weight: 400; } /* ── Actions ── */ .saydale-chat-product-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .saydale-chat-product-view { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border: 1.5px solid var(--saydale-border); border-radius: 100px; font-size: 10.5px; font-weight: 600; color: var(--saydale-text-3); text-decoration: none; white-space: nowrap; transition: all 0.15s ease; } .saydale-chat-product-view:hover { border-color: var(--saydale-teal); color: var(--saydale-teal); } .saydale-chat-product-btn { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; background: var(--saydale-teal); color: #ffffff !important; text-decoration: none; font-size: 10.5px; font-weight: 600; border-radius: 100px; border: none; white-space: nowrap; transition: background 0.15s ease, transform 0.1s ease; } .saydale-chat-product-btn:hover { background: var(--saydale-teal-dark); color: #ffffff !important; } .saydale-chat-product-btn:active { transform: scale(0.96); } /* ── Toggle ── */ .saydale-chat-products-toggle { grid-column: 1 / -1; /* span both columns */ width: 100%; background: var(--saydale-mint); border: none; border-top: 1px solid var(--saydale-border); border-radius: 0; color: var(--saydale-teal); font-size: 11.5px; font-weight: 600; padding: 9px 12px; cursor: pointer; text-align: center; font-family: var(--saydale-font); transition: background 0.15s ease; display: block; } .saydale-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 */ .saydale-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 */ .saydale-chat-product-filters { padding: 6px 10px !important; } .saydale-pf-chip[data-sort="price"] { display: none !important; } /* Footer: full-width prominent Add All CTA */ .saydale-pf-footer { padding: 0 !important; border-top: 1px solid var(--saydale-border) !important; background: transparent !important; } .saydale-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; } .saydale-pf-add-all:hover { transform: none !important; } /* Product grid: 2-col card tiles */ .saydale-chat-products-wrap { border-radius: 14px !important; } .saydale-chat-products { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; padding: 8px !important; background: var(--saydale-mint) !important; } .saydale-chat-product-card { flex-direction: column !important; border: 1.5px solid var(--saydale-border) !important; border-radius: 10px !important; padding: 0 !important; gap: 0 !important; background: #ffffff !important; } .saydale-chat-product-img-wrap { width: 100% !important; height: auto !important; aspect-ratio: 1 / 1 !important; border-radius:10px 10px 0 0 !important; } .saydale-chat-product-body { padding: 6px 8px 2px !important; } .saydale-chat-product-name { -webkit-line-clamp: 2 !important; font-size: 11px !important; } .saydale-chat-product-price { font-size: 13px !important; font-weight: 600 !important; } .saydale-chat-product-actions { padding: 4px 8px 10px !important; flex-direction: column !important; } .saydale-chat-product-view { display: none !important; } .saydale-chat-product-btn { width: 100% !important; justify-content: center !important; height: 32px !important; font-size: 10px !important; } } @media (max-width: 480px) { .saydale-chat-thread { padding: 14px 12px 10px; gap: 11px; } .saydale-chat-hd { padding: 10px 14px; } .saydale-chat-bar { padding: 10px 12px 8px; } .saydale-chat-bubble--ai, .saydale-chat-bubble--user { font-size: 13px; max-width: 90%; } } /* ── Search bar: hide when AI chat screen is open ── */ body.saydale-chat-open .wd-header-search, body.saydale-chat-open .wd-search-full-screen, body.saydale-chat-open .wd-header-search-full-screen, body.saydale-chat-open [class*="header-search"], body.saydale-chat-open .site-search, body.saydale-chat-open #searchform-header, body.saydale-chat-open .wp-block-search, body.saydale-chat-open .wd-mobile-search { display: none !important; } /* ═══════════════════════════════════════════════════════════════ ③ QUIZ SCREEN ══════════════════════════════════════════════════════════════ */ .saydale-screen--quiz { background: var(--saydale-bg-page); flex-direction: column; height: 100%; /* fills the wrapper's fixed height */ min-height: 480px; border-top: 1px solid var(--saydale-border); border-bottom: 1px solid var(--saydale-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) */ .saydale-quiz-header { display: none !important; } .saydale-quiz-header-inner { display: none !important; } .saydale-progress-bar-wrap { display: none !important; } .saydale-progress-bar-wrap { height: 4px; background: var(--saydale-mint-dark); border-radius:100px; overflow: hidden; margin-bottom:9px; } .saydale-progress-bar { height: 100%; background: var(--saydale-grad-primary) !important; border-radius:100px; transition: width 0.4s var(--saydale-ease); width: 10%; } .saydale-progress-label { font-size: 11.5px; font-weight: 600; color: var(--saydale-text-muted); text-align: right; letter-spacing:0.06em; text-transform:uppercase; } /* Steps: flex column so content can stretch */ .saydale-steps { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 32px 12px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--saydale-border) transparent; display: flex; flex-direction: column; } .saydale-steps::-webkit-scrollbar { width: 4px; } .saydale-steps::-webkit-scrollbar-track { background: transparent; } .saydale-steps::-webkit-scrollbar-thumb { background: var(--saydale-border); border-radius: 4px; } /* Steps: hidden / active */ .saydale-step { display: none; flex-direction: column; flex: 1; } .saydale-step--active { display: flex; flex-direction: column; flex: 1; max-width: 720px; width: 100%; margin: 0 auto; animation: saydale-step-in 0.38s var(--saydale-ease) forwards; will-change: transform, opacity; } @keyframes saydale-step-in { from { opacity:0; transform:translateX(18px); } to { opacity:1; transform:translateX(0); } } @keyframes saydale-step-in-rev { from { opacity:0; transform:translateX(-18px); } to { opacity:1; transform:translateX(0); } } .saydale-step-header { margin-bottom: 20px; text-align: center; } .saydale-step-icon { display: inline-flex; align-items: center; justify-content:center; width: 38px; height: 38px; background: var(--saydale-mint); border-radius: 10px; font-size: 18px; margin-bottom: 12px; border: 1px solid var(--saydale-border); } .saydale-step-header h2 { font-family: var(--saydale-font-display); font-size: clamp(16px, 2.5vw, 22px); font-weight: 600; color: var(--saydale-text-1); margin-bottom:5px; letter-spacing:-0.2px; text-align: center; } .saydale-step-header p { font-size: 13.5px; color: var(--saydale-text-3); line-height:1.5; } /* Frozen nav footer */ .saydale-nav-row { flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 14px max(20px, calc(50% - 670px)); background: var(--saydale-mint); border-top: 1px solid var(--saydale-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; } .saydale-nav-inner { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 720px; } .saydale-btn-skip { margin-left: auto; margin-right: auto; background: none !important; border: none !important; padding: 6px 10px; font-family: var(--saydale-font, 'Inter', sans-serif); font-size: 12px; font-weight: 500; color: var(--saydale-text-3, #5a7a7a) !important; cursor: pointer; text-decoration:underline; text-underline-offset: 2px; transition: color 0.3s var(--saydale-ease), transform 0.3s var(--saydale-ease); white-space: nowrap; will-change: transform, color; } .saydale-btn-skip:hover { color: var(--saydale-teal, #10847E) !important; } .saydale-btn-skip:active { transform: scale(0.97); transition-duration: 0.1s; } .saydale-btn--back { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; background: #f4f6f6; border: 1.5px solid #c8d8d8; border-radius:100px; color: #1a2e2e; font-size: 13.5px; font-weight: 600; cursor: pointer; font-family: var(--saydale-font); transition: all 0.18s var(--saydale-ease); } .saydale-btn--back:hover { background: #e8f0f0; border-color: var(--saydale-teal); color: var(--saydale-teal); } .saydale-btn--back:active { transform: scale(0.97); transition-duration: 0.1s; } .saydale-btn--primary { display: inline-flex; align-items: center; gap: 7px; padding: 12px 26px; background: var(--saydale-teal) !important; color: #fff !important; border: none; border-radius:100px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: var(--saydale-font); transition: all 0.3s var(--saydale-ease); box-shadow: var(--saydale-shadow-btn); will-change: transform, box-shadow; } .saydale-btn--primary:hover:not(:disabled) { background: var(--saydale-teal-dark) !important; box-shadow: var(--saydale-shadow-hover); transform: translateY(-1px); } .saydale-btn--primary:active:not(:disabled) { transform: scale(0.97); transition-duration: 0.1s; } .saydale-btn--submit { display: inline-flex; align-items: center; gap: 7px; padding: 12px 28px; background: var(--saydale-grad-yellow); color: #1a2e2e; border: none; border-radius:100px; font-size: 14.5px; font-weight: 600; cursor: pointer; font-family: var(--saydale-font); transition: all 0.3s var(--saydale-ease); box-shadow: 0 4px 18px rgba(255,182,61,0.42); will-change: transform, box-shadow; } .saydale-btn--submit:hover:not(:disabled) { box-shadow: 0 8px 24px rgba(255,182,61,0.55); transform: translateY(-1px); } .saydale-btn--submit:active:not(:disabled) { transform: scale(0.97); transition-duration: 0.1s; } #saydale-prev-btn { display: none; } @media (max-width: 680px) { .saydale-quiz-header { padding: 14px 16px 10px; } .saydale-steps { padding: 16px 16px 10px; } .saydale-nav-row { padding: 10px 16px; } .saydale-screen--intro{ padding: 0 0 16px; } } /* ═══════════════════════════════════════════════════════════════ FORM ELEMENTS ══════════════════════════════════════════════════════════════ */ .saydale-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; } .saydale-grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; } .mt-20 { margin-top: 18px; } @media (max-width:580px) { .saydale-grid-2, .saydale-grid-3 { grid-template-columns:1fr; } } .saydale-field { display:flex; flex-direction:column; gap:7px; } .saydale-field label { font-size: 11px; font-weight: 600; color: var(--saydale-text-3); text-transform: uppercase; letter-spacing: 0.08em; } .saydale-input { width: 100%; padding: 11px 14px; background: var(--saydale-bg-card); border: 1.5px solid var(--saydale-border); border-radius:var(--saydale-radius); color: var(--saydale-text-1); font-size: 14.5px; font-family: var(--saydale-font); transition: border-color 0.3s var(--saydale-ease), box-shadow 0.3s var(--saydale-ease); outline: none; } .saydale-input:focus { border-color: var(--saydale-teal); box-shadow: 0 0 0 3px rgba(16,132,126,0.1); } .saydale-input::placeholder { color: var(--saydale-text-muted); } /* ── Step 2 pills: taller, bolder, better use of screen ── */ .saydale-field-label-text { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--saydale-text-3); margin-bottom: 8px; display: block; } .saydale-field-group { margin-bottom: 4px; } .saydale-field-group--mt { margin-top: 20px; } .saydale-option-pills { display:flex; flex-wrap:wrap; gap:8px; } .saydale-option-pills--col { flex-direction:column; flex-wrap:nowrap; gap:6px; } .saydale-option-pills--large .saydale-pill { font-size:13.5px; padding:11px 18px; } .saydale-pill { display: inline-flex; align-items: center; gap: 5px; padding: 11px 18px; background: var(--saydale-bg-card); border: 1.5px solid var(--saydale-border); border-radius:100px; color: var(--saydale-text-2); font-size: 13.5px; font-weight: 500; cursor: pointer; transition: all 0.25s var(--saydale-ease); font-family: var(--saydale-font); will-change: transform, border-color; flex: 1; min-width: 80px; justify-content: center; text-align: center; } .saydale-pill:hover { border-color:var(--saydale-teal); color:var(--saydale-teal); background:rgba(16,132,126,0.04); transform:translateY(-1px); } .saydale-pill:active { transform:scale(0.97); transition-duration:0.1s; } .saydale-pill--active { background: var(--saydale-teal) !important; border-color: var(--saydale-teal) !important; color: #fff !important; box-shadow: 0 2px 12px rgba(16,132,126,0.30) !important; font-weight: 600 !important; } /* Skin cards */ .saydale-skin-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; } @media (max-width:560px) { .saydale-skin-cards { grid-template-columns:1fr 1fr; } } .saydale-skin-card { cursor:pointer; } .saydale-skin-card input[type="radio"] { display:none; } .saydale-skin-card-inner { padding: 13px 10px; background: var(--saydale-bg-card); border: 1.5px solid var(--saydale-border); border-radius: var(--saydale-radius); text-align: center; transition: all 0.3s var(--saydale-ease); will-change: transform, border-color, box-shadow; display: flex; flex-direction: column; align-items: center; gap: 5px; height: 100%; } .saydale-skin-card-inner:hover { border-color:var(--saydale-teal); background:rgba(16,132,126,0.03); transform:translateY(-1px); } .saydale-skin-card-inner:active { transform:scale(0.98); transition-duration:0.1s; } .saydale-skin-card input:checked + .saydale-skin-card-inner { border-color:var(--saydale-teal); background: rgba(16,132,126,0.06); box-shadow: 0 0 0 2px rgba(16,132,126,0.16); } .saydale-skin-icon { display:flex; align-items:center; justify-content:center; min-height:32px; } .saydale-skin-card-inner strong { font-size:12.5px; font-weight: 600; color:var(--saydale-text-1); } .saydale-skin-card-inner p { font-size:11px; color:var(--saydale-text-3); line-height:1.4; } /* ── Category selection grid (Step 1 — single-select, fills screen) ── */ .saydale-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 */ .saydale-category-card input[type="radio"], .saydale-category-card input[type="checkbox"] { display:none; } .saydale-category-card { cursor:pointer; display:flex; } .saydale-category-inner { flex: 1; padding: 18px 14px 16px; background: var(--saydale-bg-card); border: 1.5px solid var(--saydale-border); border-radius: var(--saydale-radius); text-align: center; transition: all 0.25s var(--saydale-ease); will-change: transform, border-color, box-shadow; display: flex; flex-direction: column; align-items: center; justify-content:center; gap: 6px; min-height: 90px; } .saydale-category-inner:hover { border-color:var(--saydale-teal); background:rgba(16,132,126,0.04); transform:translateY(-1px); } .saydale-category-inner:active { transform:scale(0.98); transition-duration:0.1s; } .saydale-category-card input:checked + .saydale-category-inner { border-color: var(--saydale-teal); background: rgba(16,132,126,0.09); box-shadow: 0 0 0 2.5px rgba(16,132,126,0.20); } .saydale-category-icon { font-size:26px; margin-bottom:1px; } .saydale-category-inner strong { font-size:13px; font-weight: 600; color:var(--saydale-text-1); line-height:1.3; } .saydale-category-inner p { font-size:11px; color:var(--saydale-text-3); line-height:1.4; margin:0; } /* Checkbox grid */ .saydale-checkbox-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; } @media (max-width:580px) { .saydale-checkbox-grid { grid-template-columns:1fr 1fr; } } @media (max-width:380px) { .saydale-checkbox-grid { grid-template-columns:1fr; } } .saydale-check-card { cursor:pointer; } .saydale-check-card input[type="checkbox"] { display:none; } .saydale-check-inner { padding: 10px 12px; background: var(--saydale-bg-card); border: 1.5px solid var(--saydale-border); border-radius: var(--saydale-radius); transition: all 0.3s var(--saydale-ease); will-change: transform, border-color, box-shadow; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; height: 100%; } .saydale-check-inner:hover { border-color:var(--saydale-teal); background:rgba(16,132,126,0.03); transform:translateY(-1px); } .saydale-check-inner:active { transform:scale(0.98); transition-duration:0.1s; } .saydale-check-card input:checked + .saydale-check-inner { border-color:var(--saydale-teal); background: rgba(16,132,126,0.06); box-shadow: 0 0 0 2px rgba(16,132,126,0.16); } .saydale-check-inner > span { display:flex; align-items:center; justify-content:center; min-height:28px; } .saydale-check-inner strong { font-size:12px; font-weight: 600; color:var(--saydale-text-1); line-height:1.3; } .saydale-check-inner small { font-size:10.5px; color:var(--saydale-text-3); line-height:1.3; } .saydale-check-card--goal .saydale-check-inner { flex-direction:row; align-items:center; gap:9px; } .saydale-check-card--goal .saydale-check-inner::before { content:'○'; font-size:15px; color:var(--saydale-text-muted); flex-shrink:0; transition:color 0.15s; } .saydale-check-card--goal input:checked + .saydale-check-inner::before { content:'✓'; color:var(--saydale-teal); font-weight: 600; } .saydale-check-card--goal .saydale-check-inner strong { font-size:12.5px; } /* ═══════════════════════════════════════════════════════════════ ④ LOADING SCREEN — minimal, confident ══════════════════════════════════════════════════════════════ */ .saydale-screen--loading { background: #ffffff; align-items: center; justify-content: center; text-align: center; flex-direction: column; overflow: hidden; height: 100%; } .saydale-loading-content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 24px; } /* ── Logo — breathes, no ring ── */ .saydale-loading-logo { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; } .saydale-loading-logo img { width: 100%; height: 100%; object-fit: contain; animation: saydale-load-breathe 3s ease-in-out infinite; } @keyframes saydale-load-breathe { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.93); } } /* ── Single crossfading phrase ── */ .saydale-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; } .saydale-loading-phrase.saydale-phrase--fade { opacity: 0; } /* ── Three calm pulse dots ── */ .saydale-loading-dots { display: flex; gap: 6px; align-items: center; } .saydale-loading-dots span { width: 5px; height: 5px; border-radius: 50%; background: var(--saydale-teal, #10847e); opacity: 0.2; animation: saydale-dot-pulse 1.6s ease-in-out infinite; } .saydale-loading-dots span:nth-child(2) { animation-delay: 0.25s; } .saydale-loading-dots span:nth-child(3) { animation-delay: 0.5s; } @keyframes saydale-dot-pulse { 0%, 100% { opacity: 0.2; transform: scale(1); } 50% { opacity: 0.7; transform: scale(1.25); } } /* ── Conic-gradient spinning orb + logo ── */ .saydale-loading-orb { width: 88px; height: 88px; border-radius: 50%; position: relative; flex-shrink: 0; background: conic-gradient(from 0deg, var(--saydale-teal), #14b8a6, #facc15, #14b8a6, var(--saydale-teal)); animation: saydale-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 saydale-load-spin { to { transform: rotate(360deg); } } /* White inner circle — logo sits here */ .saydale-orb-inner { position: absolute; inset: 9px; border-radius: 50%; background: #ffffff; display: flex; align-items: center; justify-content: center; overflow: hidden; } .saydale-orb-inner img { width: 36px; height: 36px; object-fit: contain; } /* Hide unused elements */ .saydale-loading-steps, .saydale-load-step, .saydale-loading-track, .saydale-loading-fill, .saydale-loading-sub { display: none !important; } /* ═══════════════════════════════════════════════════════════════ ⑤ RESULTS SCREEN ══════════════════════════════════════════════════════════════ */ .saydale-screen--results { background: var(--saydale-bg-page); display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; } .saydale-results-header { background: var(--saydale-mint); text-align: center; padding: 20px 24px 16px; border-bottom: 1px solid var(--saydale-border); flex-shrink: 0; } .saydale-results-header-inner { max-width: 700px; margin: 0 auto; } .saydale-results-icon { font-size: 22px; color: var(--saydale-teal); } .saydale-results-header h1 { font-family: 'Inter', -apple-system, sans-serif; font-size: clamp(18px, 2.2vw, 24px); font-weight: 600; color: var(--saydale-text-1); margin: 4px 0 3px; letter-spacing:-0.4px; } .saydale-results-header h1 span { color: var(--saydale-teal); } .saydale-results-header p { font-size: 12.5px; color: var(--saydale-text-3); margin: 0; } .saydale-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; } .saydale-pick-card { flex: 1; min-width: 0; background: var(--saydale-bg-card); border: 1.5px solid var(--saydale-border); border-radius: 14px; overflow: hidden; text-decoration:none; display: flex; flex-direction: column; transition: transform 0.4s var(--saydale-ease), border-color 0.4s var(--saydale-ease), box-shadow 0.4s var(--saydale-ease); will-change: transform, box-shadow, border-color; } .saydale-pick-card:hover { transform: translateY(-2px); border-color: var(--saydale-teal); box-shadow: var(--saydale-shadow-hover); } .saydale-pick-card:active { transform: scale(0.98); transition-duration: 0.1s; } .saydale-pick-img-wrap { width: 100%; aspect-ratio: 1 / 1; background: var(--saydale-mint); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; } .saydale-pick-img { width: 100%; height: 100%; object-fit: cover; } .saydale-pick-img-placeholder { font-size: 28px; opacity: .5; } .saydale-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 ─ */ .saydale-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); } .saydale-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; } .saydale-badge-sale-tag { flex-shrink: 0; margin-left: 8px; font-size: 8.5px; font-weight: 600; 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 */ .saydale-pick-labels { display: none; } /* Legacy overlay — no longer rendered */ .saydale-badge-overlay, .saydale-badge--outcome, .saydale-badge--offer { display: none; } /* Legacy match badge */ .saydale-pick-badge { font-size:9.5px; font-weight: 600; padding:2px 7px; border-radius:100px; align-self:flex-start; white-space:nowrap; } .saydale-badge--perfect { background:rgba(16,132,126,0.12); color:var(--saydale-teal); } .saydale-badge--great { background:rgba(234,179,8,0.14); color:#92710b; } .saydale-badge--good { background:rgba(100,116,139,0.1); color:var(--saydale-text-3); } .saydale-pick-title { font-size: 13px; font-weight: 600; color: var(--saydale-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 ── */ .saydale-pick-footer { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; } .saydale-pick-price-row { display: flex; align-items: baseline; gap: 4px; } .saydale-pick-price { font-size: 13px; font-weight: 600; color: var(--saydale-text-1); } .saydale-pick-old-price { font-size: 10.5px; color: var(--saydale-text-muted); } /* ── Individual Add to Cart: full-width, inherits WoodMart site theme button ── */ .saydale-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; } .saydale-pick-atc .wd-action-icon { display: flex; flex-shrink: 0; } .saydale-pick-atc .wd-action-text { font-size: 12px; line-height: var(--btn-height, 34px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; } .saydale-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); } .saydale-pick-atc:active { transition-duration: 0.08s; } .saydale-pick-atc--loading { opacity: 0.7; pointer-events: none; } .saydale-pick-atc--done { background-color: #16a34a; pointer-events: none; } /* Toast */ .saydale-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(--saydale-teal); flex-shrink: 0; } .saydale-cart-toast--visible { display: flex; } .saydale-cart-toast--error { background: rgba(220,38,38,0.07); color: #dc2626; border-top-color: rgba(220,38,38,0.2); } .saydale-toast-link { font-weight: 600; color:var(--saydale-teal); text-decoration:underline; white-space:nowrap; } /* Actions bar */ .saydale-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(--saydale-border); background: var(--saydale-mint); flex-shrink: 0; } .saydale-btn--add-all { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 36px; background: var(--saydale-teal); color: #fff; border: none; border-radius: 100px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: var(--saydale-font); transition: all 0.3s var(--saydale-ease); box-shadow: var(--saydale-shadow-btn); will-change: transform, box-shadow; white-space: nowrap; max-width: 320px; width: 100%; } .saydale-btn--add-all:hover:not(:disabled) { background: var(--saydale-teal-dark); box-shadow: var(--saydale-shadow-hover); transform: translateY(-1px); } .saydale-btn--add-all:active:not(:disabled) { transform: scale(0.97); transition-duration: 0.1s; } .saydale-btn--add-all:disabled { opacity: 0.65; cursor: not-allowed; transform: none; } .saydale-btn--ghost { display: inline-flex; align-items: center; gap: 5px; padding: 10px 20px; background: transparent; border: 1.5px solid var(--saydale-border); border-radius:100px; color: var(--saydale-text-3); font-size: 13px; font-weight: 600; cursor: pointer; font-family: var(--saydale-font); transition: all 0.3s var(--saydale-ease); white-space: nowrap; } .saydale-btn--ghost:hover { border-color: var(--saydale-teal); color: var(--saydale-teal); } .saydale-btn--ghost:active { transform: scale(0.97); transition-duration: 0.1s; } /* Mobile: stack cards */ @media (max-width: 600px) { .saydale-top-picks-grid { flex-wrap: wrap; } .saydale-pick-card { flex: 1 1 calc(50% - 5px); max-width: calc(50% - 5px); } .saydale-pick-card:last-child:nth-child(odd) { flex: 1 1 100%; max-width: 100%; flex-direction: row; } .saydale-pick-card:last-child:nth-child(odd) .saydale-pick-img-wrap { width: 90px; aspect-ratio: 1; flex-shrink: 0; } } /* ═══════════════════════════════════════════════════════════════ ⑥ NO-RESULTS SCREEN ══════════════════════════════════════════════════════════════ */ .saydale-screen--no-results { text-align:center; padding:60px 40px; background:var(--saydale-bg-page); } .saydale-no-results-header { margin-bottom:44px; } .saydale-no-results-icon { display:block; font-size:56px; margin-bottom:18px; } .saydale-no-results-header h1 { font-family:var(--saydale-font-display); font-size:28px; color:var(--saydale-text-1); margin-bottom:10px; } .saydale-no-results-header p { font-size:15px; color:var(--saydale-text-3); max-width:480px; margin:0 auto; line-height:1.65; } .saydale-fallback-recs { margin-top:44px; padding-top:44px; border-top:1px solid var(--saydale-border); } .saydale-fallback-title { font-size:17px; color:var(--saydale-text-2); margin-bottom:24px; } .saydale-screen--no-results .saydale-products-grid { max-width:900px; margin:0 auto 44px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); } .saydale-restart-row { margin-top: 32px; display: flex; justify-content: center; } .saydale-no-results { text-align:center; padding:48px 20px; color:var(--saydale-text-3); } .saydale-no-results h3 { font-size:18px; font-weight: 600; color:var(--saydale-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 ── */ .saydale-step-icon { display: none !important; } /* ── Step heading: Outfit display, strong hierarchy ── */ .saydale-step-header { margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--saydale-border); } .saydale-step-header h2 { font-family: 'Inter', -apple-system, sans-serif; font-size: clamp(18px, 2.4vw, 23px); font-weight: 600; color: var(--saydale-text-1); letter-spacing: -0.5px; line-height: 1.15; margin-bottom: 4px; text-align: center; } .saydale-step-header p { font-size: 13px; color: var(--saydale-text-3); line-height:1.5; margin: 0; } /* ── Progress bar: teal gradient, subtle glow ── */ .saydale-progress-bar, #saydale-progress { background: linear-gradient(90deg, var(--saydale-teal) 0%, var(--saydale-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 ── */ .saydale-input { padding: 13px 16px !important; background: #ffffff !important; border: 1.5px solid var(--saydale-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; } .saydale-input:focus { border-color: var(--saydale-teal) !important; box-shadow: 0 0 0 3.5px rgba(16,132,126,0.12) !important; outline: none !important; } /* ── Age input: jumbo display number ── */ .saydale-input--age { text-align: center !important; font-family: 'Inter', -apple-system, sans-serif !important; font-size: clamp(28px, 8vw, 42px) !important; font-weight: 600 !important; letter-spacing: -2px !important; color: var(--saydale-text-1) !important; padding: 22px 16px !important; appearance: textfield !important; -moz-appearance: textfield !important; } .saydale-input--age::placeholder { font-size: clamp(18px, 5vw, 26px) !important; font-weight: 500 !important; letter-spacing: 0 !important; color: var(--saydale-text-muted) !important; } /* Hide number input arrows */ .saydale-input--age::-webkit-outer-spin-button, .saydale-input--age::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* ── Segmented control (gender) ── */ .saydale-option-pills--segmented { display: flex !important; gap: 0 !important; flex-wrap: nowrap !important; border: 1.5px solid var(--saydale-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; } .saydale-option-pills--segmented .saydale-pill { flex: 1 !important; border: none !important; border-right: 1.5px solid var(--saydale-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; } .saydale-option-pills--segmented .saydale-pill:last-child { border-right: none !important; } .saydale-option-pills--segmented .saydale-pill:hover:not(.saydale-pill--active) { background: rgba(16,132,126,0.06) !important; color: var(--saydale-teal) !important; transform: none !important; border-color:transparent !important; } .saydale-option-pills--segmented .saydale-pill--active { background: var(--saydale-teal) !important; color: #ffffff !important; box-shadow: none !important; } /* ── Cards: white surface, subtle shadow ── */ .saydale-check-inner { background: #ffffff !important; box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important; } .saydale-skin-card-inner { background: #ffffff !important; box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important; } .saydale-category-inner { background: #ffffff !important; box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important; } /* Regular pills ── white surface */ .saydale-pill { background: #ffffff !important; box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important; } /* Don't double-shadow segmented control children */ .saydale-option-pills--segmented .saydale-pill { box-shadow: none !important; } /* ── Field labels: tighter, more refined ── */ .saydale-field label { font-size: 10px !important; font-weight: 600 !important; letter-spacing: 0.12em !important; color: var(--saydale-text-muted) !important; text-transform: uppercase !important; } /* ── Nav row: white footer, clear border ── */ .saydale-nav-row { background: #ffffff !important; border-top: 1px solid var(--saydale-border) !important; } /* ── Steps area: white content well ── */ .saydale-steps { background: transparent !important; } /* ── Quiz header: subtle mint strip ── */ .saydale-quiz-header { background: var(--saydale-mint) !important; } /* ═══════════════════════════════════════════════════════════════ UTILITY & STATES ══════════════════════════════════════════════════════════════ */ .saydale-indexing-box { text-align:center; padding:52px 20px; background:var(--saydale-mint); border-radius:var(--saydale-radius-lg); border:1.5px dashed var(--saydale-border-strong); } .saydale-indexing-spinner { width:40px; height:40px; border:3px solid var(--saydale-border); border-top:3px solid var(--saydale-teal); border-radius:50%; margin:0 auto 18px; animation:saydale-spin 1s linear infinite; } .saydale-hidden { display:none !important; } /* Keyboard focus rings */ .saydale-btn:focus-visible, .saydale-pill:focus-visible, .saydale-tab:focus-visible, .saydale-chip:focus-visible, .saydale-check-card input:focus-visible + .saydale-check-inner, .saydale-skin-card input:focus-visible + .saydale-skin-card-inner { outline: 2px solid var(--saydale-teal); outline-offset: 2px; } /* Hidden by default — shown by JS */ #saydale-submit-btn { display: none; } #saydale-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 { --saydale-header-h: 80px; } /* ── Respect user motion preference — battery + accessibility ── */ @media (prefers-reduced-motion: reduce) { .saydale-screen--intro::before, .saydale-screen--intro::after, .saydale-chat-hd-icon { animation: none !important; } .saydale-loading-orb { animation: saydale-spin 3s linear infinite !important; } .saydale-advisor-wrapper *, .saydale-advisor-wrapper *::before, .saydale-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. */ .saydale-screen--intro { padding: 0 0 16px !important; justify-content: center !important; overflow-y: auto !important; overflow-x: hidden; -webkit-overflow-scrolling: touch; } .saydale-advisor-mark { display: none !important; } .saydale-screen--intro .saydale-intro-question { font-size: clamp(22px, 5.5vw, 28px) !important; font-weight: 500 !important; margin-bottom: 16px !important; text-align: center !important; } .saydale-screen--intro .saydale-intro-hint { font-size: 13px !important; margin-bottom: 12px !important; } /* Concern grid — 3 columns */ .saydale-concern-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; margin-bottom: 14px !important; } .saydale-screen--intro .saydale-concern-chip { padding: 14px 8px 12px !important; font-size: 13px !important; font-weight:500 !important; min-height: 0 !important; gap: 6px !important; border-radius: 14px !important; background: rgba(255,255,255,0.85) !important; border: 1px solid rgba(16,132,126,0.15) !important; } .saydale-screen--intro .saydale-concern-chip-icon { font-size: 22px !important; } .saydale-screen--intro .saydale-concern-chip-icon svg { width: 24px !important; height: 24px !important; } .saydale-chat-wrap { margin: 8px 0 4px !important; } .saydale-intro-divider { margin: 0 0 8px !important; } #saydale-start-btn { padding: 10px 20px !important; font-size: 13px !important; } .saydale-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) ── */ .saydale-chat-hd { padding: 8px 12px !important; min-height: 54px; } .saydale-chat-hd-back, .saydale-chat-hd-new { min-height: 38px !important; min-width: auto !important; padding: 6px 12px !important; } /* Icon-only back button on small screens — disabled so text "Back" is shown */ /* .saydale-chat-hd-back span { display: none; } */ /* ── Thread — breathing room on sides ── */ .saydale-chat-thread { padding: 14px 14px 10px !important; } /* ── Message bubbles — wider on mobile ── */ .saydale-chat-bubble--user { max-width: 85% !important; font-size: 14px !important; } .saydale-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. */ .saydale-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; } .saydale-chat-suggestions::-webkit-scrollbar { display: none !important; } .saydale-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. */ .saydale-chat-msg--products { max-width: 100% !important; margin: 0 !important; padding: 0 !important; } .saydale-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 */ .saydale-chat-product-img-wrap { aspect-ratio: 1 / 1 !important; } .saydale-chat-product-price { font-size: 14px !important; } .saydale-chat-product-btn { font-size: 10px !important; padding: 8px 6px !important; } /* ── Chat input bar — safe area + mobile-appropriate sizing ── */ .saydale-advisor-wrapper .saydale-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 */ .saydale-chat-bar-hint { display: none !important; } .saydale-advisor-wrapper .saydale-chat-bar-inner { padding: 8px 8px 8px 14px !important; min-height: 50px !important; } /* Send button — 44px minimum touch target */ .saydale-advisor-wrapper .saydale-chat-bar-inner .saydale-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) { .saydale-screen--quiz { overflow: hidden !important; } /* Progress: bar only, zero padding above */ .saydale-quiz-header { padding: 0 12px 0 !important; min-height: 0 !important; } .saydale-quiz-progress-wrap { margin: 0 !important; } .saydale-quiz-progress-bar { height: 3px !important; } .saydale-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 */ .saydale-steps { padding: 8px 12px 4px !important; flex: 1 1 0 !important; min-height: 0 !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; } .saydale-quiz-header { flex-shrink: 0 !important; } .saydale-nav-row { flex-shrink: 0 !important; } /* Step icon: gone */ .saydale-step-icon { display: none !important; } /* Heading: 14px, single line with ellipsis */ .saydale-step-header { margin-bottom: 7px !important; } .saydale-step-header h2 { font-size: 14px !important; font-weight: 600 !important; line-height: 1.2 !important; margin-bottom: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; text-align: center !important; } /* Subtitle: REMOVED — saves 28px */ .saydale-step-header p { display: none !important; } /* Category cards: 48px target */ .saydale-category-grid { grid-template-columns: 1fr 1fr !important; gap: 6px !important; margin-bottom: 0 !important; } .saydale-category-inner { padding: 8px 6px 7px !important; gap: 3px !important; min-height: 0 !important; border-radius: 10px !important; } .saydale-category-icon, .saydale-category-inner > span:first-child { font-size: 19px !important; line-height: 1 !important; } .saydale-category-inner strong { font-size: 11px !important; font-weight: 600 !important; line-height: 1.2 !important; } .saydale-category-inner p { display: none !important; } /* Other step types */ .saydale-checkbox-grid { grid-template-columns: 1fr 1fr !important; gap: 6px !important; } .saydale-skin-cards { grid-template-columns: 1fr 1fr !important; gap: 6px !important; } .saydale-grid-3 { grid-template-columns: 1fr !important; } .saydale-pill { min-height: 38px !important; font-size: 12px !important; padding: 0 10px !important; } .saydale-check-inner { min-height: 40px !important; padding: 6px 10px !important; font-size: 12px !important; } .saydale-skin-card-inner { min-height: 40px !important; } /* Nav: single row, 36px buttons, border-top divider */ .saydale-nav-row { padding: 5px 12px !important; flex-shrink: 0 !important; border-top: 1px solid var(--saydale-border) !important; } .saydale-nav-inner { flex-direction: row !important; align-items: center !important; gap: 6px !important; max-width: 100% !important; } .saydale-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; } .saydale-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; } .saydale-btn--primary, .saydale-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) { .saydale-screen--intro { padding: 0 16px 70px !important; justify-content: center !important; } .saydale-advisor-mark { display: none !important; } .saydale-screen--intro .saydale-intro-question { font-size: clamp(20px, 5vw, 26px) !important; font-weight: 500 !important; line-height: 1.2 !important; margin-bottom: 14px !important; text-align: center !important; } .saydale-screen--intro .saydale-intro-hint { font-size: 12px !important; line-height: 1.3 !important; margin-bottom: 10px !important; } .saydale-concern-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; margin-bottom: 10px !important; } .saydale-screen--intro .saydale-concern-chip { padding: 12px 6px 10px !important; min-height: 0 !important; font-size: 11.5px !important; font-weight: 500 !important; gap: 5px !important; border-radius: 12px !important; } .saydale-screen--intro .saydale-concern-chip-icon { font-size: 18px !important; } .saydale-screen--intro .saydale-concern-chip-icon svg { width: 22px !important; height: 22px !important; } .saydale-chat-wrap { margin: 8px 0 4px !important; } .saydale-intro-divider { margin: 4px 0 6px !important; font-size: 11px !important; } #saydale-start-btn { padding: 12px 20px !important; font-size: 13px !important; background: linear-gradient(135deg, #10847E 0%, #0fa89f 100%) !important; color: #ffffff !important; border: none !important; box-shadow: 0 2px 8px rgba(16,132,126,0.25) !important; } .saydale-btn-scan { padding: 12px 20px !important; font-size: 13px !important; } .saydale-intro-note { margin-top: auto !important; font-size: 10px !important; color: #B0B8C1 !important; } } /* ═══════════════════════════════════════════════════════════════ RESULTS SCREEN — mobile ══════════════════════════════════════════════════════════════ */ @media (max-width: 680px) { /* Screen scrolls as a whole — not the grid */ .saydale-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 */ .saydale-results-header { padding: 12px 14px 10px !important; } .saydale-results-header h1 { font-size: clamp(15px, 4.5vw, 20px) !important; margin: 2px 0 2px !important; } .saydale-results-icon { font-size: 18px !important; } /* Grid: switch from horizontal flex to 2-col CSS grid, visible overflow */ .saydale-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 */ .saydale-pick-card, .saydale-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; } .saydale-pick-img-wrap { width: 100% !important; aspect-ratio: 1 / 1 !important; flex-shrink: 0 !important; height: auto !important; } .saydale-pick-body { padding: 8px 10px 10px !important; } .saydale-pick-title { -webkit-line-clamp: 2 !important; font-size: 12px !important; } .saydale-pick-price { font-size: 14px !important; font-weight: 600 !important; color: var(--saydale-teal) !important; } /* Action buttons: stacked, full-width */ .saydale-results-actions { flex-direction: column !important; gap: 8px !important; padding: 10px 14px 16px !important; } .saydale-btn--add-all, .saydale-btn--ghost { width: 100% !important; justify-content: center !important; min-height: 46px !important; } } /* ═══════════════════════════════════════════════════════════════ LOADING SCREEN — mobile ══════════════════════════════════════════════════════════════ */ @media (max-width: 680px) { .saydale-loading-orb { width: 72px !important; height: 72px !important; } .saydale-orb-inner { inset: 8px !important; } .saydale-loading-phrase { font-size: 13px !important; } } /* ═══════════════════════════════════════════════════════════════ NO-RESULTS SCREEN — mobile ══════════════════════════════════════════════════════════════ */ @media (max-width: 680px) { .saydale-screen--no-results { padding: 32px 20px !important; } .saydale-no-results-icon { font-size: 40px !important; } .saydale-no-results-header h1{ font-size: 22px !important; } .saydale-no-results-header p { font-size: 13.5px !important; } .saydale-screen--no-results .saydale-products-grid { grid-template-columns: 1fr 1fr !important; } } /* ═══════════════════════════════════════════════════════════════ QUIZ REDESIGN — NEW COMPONENTS v4 ══════════════════════════════════════════════════════════════ */ /* ── Quiz screen layout ── */ .saydale-screen--quiz { overflow: hidden; } .saydale-quiz-header { flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:10px 16px 6px; } /* ── Progress dots ── */ .saydale-progress-dots { display:flex; gap:6px; align-items:center; } .saydale-dot { width:6px; height:6px; border-radius:50%; background:#D1D5DB; transition:width .3s,background .3s,border-radius .3s; flex-shrink:0; } .saydale-dot--active { width:18px; border-radius:3px; background:#10847E; } .saydale-dot--done { background:rgba(16,132,126,0.4); } /* ── Steps container ── */ .saydale-steps { flex:1; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; padding:12px 16px 0; scrollbar-width:thin; } /* ── Step visibility ── */ .saydale-step { display:none; } /* NOTE: display:flex is applied by global auto-layout block below */ .saydale-step--active { display:flex; flex-direction:column; flex:1; animation:saydale-step-in .3s cubic-bezier(.2,.8,.2,1) both; } @keyframes saydale-step-in { from{opacity:0;transform:translateX(24px)} to{opacity:1;transform:none} } @keyframes saydale-step-in-rev { from{opacity:0;transform:translateX(-24px)} to{opacity:1;transform:none} } /* ── Step header ── */ .saydale-step-hd { margin-bottom:14px; } .saydale-step-hd h2 { font-family:'Inter', -apple-system, sans-serif; font-size:18px; font-weight: 600; color:#111827; letter-spacing:-.02em; margin-bottom:3px; } .saydale-step-hd p { font-size:13px; color:#6B7280; } /* ── Goal grid (Step A) ── */ .saydale-goal-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px; } .saydale-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; } .saydale-goal-card input[type="checkbox"] { position:absolute; opacity:0; pointer-events:none; } .saydale-goal-inner { display:flex; align-items:center; gap:9px; font-size:13px; font-weight:600; color:#374151; line-height:1.2; flex:1; } .saydale-goal-icon { width:26px; height:26px; flex-shrink:0; color:#6B7280; transition:color .2s; } .saydale-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; } .saydale-goal-check svg { width:10px; height:10px; display:none; } /* Selected via :has */ .saydale-goal-card:has(input:checked) { border-color:#10847E; background:#F0FAFA; } .saydale-goal-card:has(input:checked) .saydale-goal-inner { color:#10847E; } .saydale-goal-card:has(input:checked) .saydale-goal-icon { color:#10847E; } .saydale-goal-card:has(input:checked) .saydale-goal-check { background:#10847E; border-color:#10847E; } .saydale-goal-card:has(input:checked) .saydale-goal-check svg { display:block; } /* JS fallback (iOS <15.4) */ .saydale-goal-card.saydale-selected { border-color:#10847E!important; background:#F0FAFA!important; } .saydale-goal-card.saydale-selected .saydale-goal-inner { color:#10847E!important; } .saydale-goal-card.saydale-selected .saydale-goal-icon { color:#10847E!important; } .saydale-goal-card.saydale-selected .saydale-goal-check { background:#10847E!important; border-color:#10847E!important; } .saydale-goal-card.saydale-selected .saydale-goal-check svg { display:block!important; } .saydale-goal-card:not(:has(input:checked)):not(.saydale-selected):hover { border-color:#A7C4C3; background:#FAFFFE; transform:translateY(-1px); } /* ── Other expand ── */ .saydale-other-expand { max-height:0; overflow:hidden; transition:max-height .3s,opacity .3s; opacity:0; } .saydale-other-expand--open { max-height:120px; opacity:1; margin-bottom:12px; } .saydale-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; } .saydale-other-input:focus { border-color:#10847E; } /* ── Profile basics ── */ .saydale-profile-basics { border-top:1px solid #F3F4F6; margin-top:14px; padding-top:14px; display:flex; flex-direction:column; gap:10px; padding-bottom:16px; } .saydale-basics-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .saydale-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 ── */ .saydale-skin-type-row { display:flex; gap:6px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; } .saydale-skin-type-row::-webkit-scrollbar { display:none; } .saydale-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; } .saydale-skin-pill.saydale-pill--active { border-color:#10847E; background:#10847E; color:#fff; font-weight:600; } .saydale-skin-pill:not(.saydale-pill--active):hover { border-color:#10847E; color:#10847E; } /* ── Field layout ── */ .saydale-field { display:flex; flex-direction:column; gap:8px; } .saydale-field--mt { margin-top:16px; } .saydale-field-label { font-size:11px; font-weight:600; color:#9CA3AF; text-transform:uppercase; letter-spacing:.06em; } .saydale-field-label small { font-size:10px; color:#D1D5DB; text-transform:none; letter-spacing:0; margin-left:4px; } /* ── Concern chip grid 3-col ── */ .saydale-chip-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; } .saydale-chip-grid--sm { grid-template-columns:repeat(2,1fr); } .saydale-chip-item { display:block; cursor:pointer; position:relative; } .saydale-chip-item input { position:absolute; opacity:0; pointer-events:none; } .saydale-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; } .saydale-chip-ico { font-size:15px; line-height:1; } .saydale-chip-lbl { font-size:11px; font-weight:500; color:#374151; line-height:1.2; } .saydale-chip-item:has(input:checked) .saydale-chip-inner, .saydale-chip-item.saydale-chip-selected .saydale-chip-inner { border-color:#10847E; background:#F0FAFA; } .saydale-chip-item:has(input:checked) .saydale-chip-lbl, .saydale-chip-item.saydale-chip-selected .saydale-chip-lbl { color:#10847E; } .saydale-chip-item:not(:has(input:checked)):not(.saydale-chip-selected):hover .saydale-chip-inner { border-color:#A7C4C3; } .saydale-chip-item--none:has(input:checked) .saydale-chip-inner { border-color:#10B981; background:#ECFDF5; } .saydale-chip-item--none:has(input:checked) .saydale-chip-lbl { color:#10B981; } /* ── Slim nav footer ── */ .saydale-nav-row { flex-shrink:0; border-top:1px solid #F3F4F6; background:#fff; padding:8px 16px; padding-bottom:max(8px,env(safe-area-inset-bottom)); } .saydale-nav-inner { display:flex; align-items:center; gap:8px; max-width:480px; margin:0 auto; } .saydale-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; } .saydale-nav-btn--back { color: #1a2e2e; background: #f4f6f6; border: 1.5px solid #c8d8d8; border-radius: 100px; padding: 8px 14px; font-weight: 600; } .saydale-nav-btn--back:hover { background: #e8f0f0; color: var(--saydale-teal); border-color: var(--saydale-teal); } .saydale-nav-btn--skip { color:#9CA3AF; background:transparent; padding:8px 6px; font-weight:400; font-size:12.5px; margin-left:auto; } .saydale-nav-btn--skip:hover { color:#6B7280; } .saydale-nav-btn--continue { background:#10847E; color:#fff; padding:10px 20px; box-shadow:0 4px 14px rgba(16,132,126,.25); } .saydale-nav-btn--continue:hover { background:#0c6b66; transform:translateY(-1px); } .saydale-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; } .saydale-nav-btn--submit:hover { background:#0c6b66; transform:translateY(-1px); } /* ── Results screen ── */ .saydale-results-hd { padding:20px 16px 12px; text-align:center; flex-shrink:0; } .saydale-results-spark { font-size:22px; color:#10847E; display:block; margin-bottom:6px; } .saydale-results-hd h1 { font-family:'Inter', -apple-system, sans-serif; font-size:20px; font-weight: 600; color:#111827; letter-spacing:-.02em; margin-bottom:6px; } .saydale-results-summary { font-size:13px; color:#6B7280; line-height:1.5; max-width:320px; margin:0 auto; } /* ── Category tabs ── */ .saydale-category-tabs { display:flex; gap:6px; padding:0 16px 12px; flex-wrap:wrap; flex-shrink:0; } .saydale-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; } .saydale-cat-tab--active,.saydale-cat-tab:hover { border-color:#10847E; background:#F0FAFA; color:#10847E; font-weight:600; } /* ── Horizontal result card ── */ .saydale-result-cards { display:flex; flex-direction:column; gap:10px; padding:0 16px; } .saydale-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; } .saydale-result-card:hover { border-color:#A7C4C3; box-shadow:0 4px 16px rgba(16,132,126,.08); } .saydale-result-img { width:68px; height:68px; border-radius:10px; object-fit:cover; flex-shrink:0; border:1px solid #F3F4F6; } .saydale-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; } .saydale-result-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; } .saydale-result-brand { font-size:10px; font-weight:600; color:#9CA3AF; text-transform:uppercase; letter-spacing:.05em; } .saydale-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; } .saydale-result-match { font-size:11px; font-weight:600; color:#10847E; display:flex; align-items:center; gap:3px; } .saydale-result-match::before { content:'●'; font-size:7px; } .saydale-result-price-row { display:flex; align-items:center; gap:6px; margin-top:2px; } .saydale-result-price { font-size:14px; font-weight: 600; color:#111827; } .saydale-result-old-price { font-size:12px; color:#9CA3AF; text-decoration:line-through; } .saydale-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; } .saydale-result-atc:hover { background:#0c6b66; } .saydale-result-atc--done { background:#10B981!important; } .saydale-result-atc--loading { opacity:.7; cursor:default; } /* ── Results actions ── */ .saydale-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; } .saydale-add-all-btn { flex:1; justify-content:center; } /* ═══════════════════════════════════════════════════════════════ ADAPTIVE QUIZ — new component styles ══════════════════════════════════════════════════════════════ */ /* Priority grid (single-select version of category grid) */ .saydale-priority-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 8px; } .saydale-priority-card input[type=radio] { display:none; } .saydale-priority-card input[type=radio]:checked + .saydale-category-inner { border-color: var(--saydale-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 */ .saydale-card-disabled { opacity: 0.38; pointer-events: none; } .saydale-limit-reached .saydale-check-card:not(.saydale-card-disabled) {} /* Fix-what section labels */ .saydale-fix-section-label { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--saydale-text-3); margin: 16px 0 6px; } .saydale-fix-grid { margin-bottom: 4px; } .saydale-fix-card input[type=radio] { display:none; } .saydale-fix-card input[type=radio]:checked + .saydale-check-inner { border-color: var(--saydale-teal); background: rgba(16,132,126,0.08); box-shadow: 0 0 0 2px rgba(16,132,126,0.16); } /* Grouped results section header */ .saydale-result-section-hd { font-size: 13px; font-weight: 600; color: var(--saydale-text-1); padding: 14px 0 6px; border-bottom:1px solid var(--saydale-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 ─────────────────────────────────────────────────── */ .saydale-screen--quiz { display: flex !important; flex-direction: column !important; overflow: hidden !important; } .saydale-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; } .saydale-nav-row { flex-shrink: 0 !important; } /* ── Active step: flex column filling all available space ─── */ .saydale-step { display: none !important; } .saydale-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: saydale-step-in 0.35s var(--saydale-ease) forwards !important; } /* ── Step header: compact and pinned ─────────────────────── */ .saydale-step-header { flex: 0 0 auto !important; margin-bottom: clamp(10px, 2.2vh, 22px) !important; } .saydale-step-header .saydale-step-icon { margin-bottom: 8px !important; } .saydale-step-header h2 { font-size: clamp(15px, 3.5vw, 21px) !important; margin-bottom: 3px !important; } .saydale-step-header p { font-size: clamp(12px, 2vw, 14px) !important; margin: 0 !important; } /* ── Stretch the direct-child content grid/group ─────────── */ /* Category grid (Step 1) */ .saydale-step--active > .saydale-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) */ .saydale-step--active > .saydale-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 .saydale-checkbox-grid) */ .saydale-step[data-step="skin-type"].saydale-step--active > .saydale-checkbox-grid { grid-template-columns: repeat(2, 1fr) !important; grid-auto-rows: 1fr !important; } /* ── Card interiors: viewport-relative min-height ─────────── */ .saydale-category-inner { min-height: clamp(80px, 12.5vh, 130px) !important; justify-content:center !important; } .saydale-check-inner { min-height: clamp(58px, 9vh, 96px) !important; } .saydale-skin-card-inner { min-height: clamp(72px, 11vh, 110px) !important; } /* Cards must be display:flex so they can stretch */ .saydale-category-card { display: flex !important; } .saydale-check-card { display: flex !important; } .saydale-skin-card { display: flex !important; } .saydale-category-inner, .saydale-check-inner, .saydale-skin-card-inner { flex: 1 !important; } /* ── Profile step: distribute age + gender evenly ────────── */ .saydale-step[data-step="profile"].saydale-step--active { justify-content: space-evenly !important; gap: clamp(16px, 4vh, 40px) !important; } .saydale-step[data-step="profile"] .saydale-field-group { flex: 0 0 auto !important; } /* Age + gender pill rows: equal-width pills, fill full row */ .saydale-step[data-step="profile"] .saydale-option-pills { gap: clamp(6px,1.2vh,10px) !important; } .saydale-step[data-step="profile"] .saydale-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 ─ */ .saydale-step[data-step="fix-what"].saydale-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 */ .saydale-step[data-step="fix-what"] .saydale-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 ────── */ .saydale-other-expand { flex: 0 0 auto !important; } /* ── Short screens (< 640px tall): tighten everything ─────── */ @media (max-height: 640px) { .saydale-steps { padding: clamp(8px,1.5vh,14px) clamp(14px,3vw,20px) 6px !important; } .saydale-step-header { margin-bottom: 8px !important; } .saydale-step-header p { display: none !important; } .saydale-category-inner { min-height: clamp(64px, 10.5vh, 90px) !important; padding: 10px 8px !important; } .saydale-check-inner { min-height: clamp(46px, 7.5vh, 72px) !important; padding: 7px 9px !important; } .saydale-skin-card-inner{ min-height: clamp(54px, 8.5vh, 80px) !important; } .saydale-category-inner p { display: none !important; } .saydale-step[data-step="profile"].saydale-step--active { justify-content: flex-start !important; gap: 16px !important; } } /* ── Tall screens (≥ 812px tall): more breathing room ─────── */ @media (min-height: 812px) { .saydale-category-inner { min-height: clamp(96px, 13.5vh, 145px) !important; } .saydale-check-inner { min-height: clamp(70px, 10.5vh, 108px) !important; } .saydale-step-header { margin-bottom: clamp(14px, 2.8vh, 28px) !important; } } /* ── Content-heavy steps: cap card size so screen stays scannable */ .saydale-step[data-step="skin-concern"].saydale-step--active > .saydale-checkbox-grid, .saydale-step[data-step="supp-goal"].saydale-step--active > .saydale-checkbox-grid, .saydale-step[data-step="body-goal"].saydale-step--active > .saydale-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 */ .saydale-step[data-step="profile"].saydale-step--active { justify-content: flex-start !important; gap: clamp(20px, 4vh, 48px) !important; } /* Each section (age / gender) fills available space equally */ .saydale-profile-section { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; justify-content:center; } /* Section label */ .saydale-profile-label { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--saydale-text-3); margin-bottom: clamp(8px, 1.4vh, 14px); } /* Option grid containers */ .saydale-profile-select { display: grid; gap: clamp(8px, 1.4vh, 14px); } .saydale-profile-select--4 { grid-template-columns: repeat(4, 1fr); } .saydale-profile-select--gender { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; } /* Each label acts as the card */ .saydale-profile-opt { cursor: pointer; display: flex; } /* Hide the real radio */ .saydale-profile-opt input[type="radio"] { display: none; } /* The visible card surface */ .saydale-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(--saydale-bg-card, #ffffff); border: 1.5px solid var(--saydale-border, #e5e7eb); border-radius: 12px; font-size: clamp(13px, 2vw, 15px); font-weight: 600; color: var(--saydale-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; } .saydale-profile-opt-inner:hover { border-color: var(--saydale-teal, #10847E); background: rgba(16, 132, 126, 0.05); color: var(--saydale-teal, #10847E); } /* SELECTED STATE — :checked sibling, unbeatable specificity */ .saydale-profile-opt input[type="radio"]:checked + .saydale-profile-opt-inner { background: var(--saydale-teal, #10847E) !important; border-color: var(--saydale-teal, #10847E) !important; color: #ffffff !important; box-shadow: 0 4px 16px rgba(16, 132, 126, 0.38) !important; font-weight: 600 !important; } /* "Prefer not to say" — spans both columns */ .saydale-profile-opt--wide { grid-column: 1 / -1; } /* Short screens: reduce card height */ @media (max-height: 640px) { .saydale-profile-opt-inner { min-height: clamp(42px, 7vh, 62px) !important; padding: clamp(10px, 1.8vh, 16px) 8px !important; font-size: 12.5px !important; } .saydale-step[data-step="profile"].saydale-step--active { gap: 16px !important; } } /* ═══════════════════════════════════════════════════════════════ TARGETED FIXES — Issues 1, 2, 3 ══════════════════════════════════════════════════════════════ */ /* ── Issue 1: Step 1 grid — 8 cards, 2-col, equal rows ─────── */ .saydale-step[data-step="intent"].saydale-step--active > .saydale-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) ── */ .saydale-profile-opt.is-selected .saydale-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: 600 !important; } /* Keep :checked as secondary signal in case JS fires late */ .saydale-profile-opt input[type="radio"]:checked ~ .saydale-profile-opt-inner, .saydale-profile-opt input[type="radio"]:checked + .saydale-profile-opt-inner { background: #10847E !important; border-color: #10847E !important; color: #ffffff !important; font-weight: 600 !important; } /* Force text visibility inside all states */ .saydale-profile-opt-inner, .saydale-profile-opt.is-selected .saydale-profile-opt-inner, .saydale-profile-opt input[type="radio"]:checked + .saydale-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) ─── */ .saydale-step[data-step="profile"].saydale-step--active { justify-content: flex-start !important; gap: clamp(16px, 3vh, 32px) !important; } .saydale-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 ─────────────────────────────────────────── */ .saydale-screen--results { display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; background: var(--saydale-bg,#f8f8f6); padding-bottom: 24px; } .saydale-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; } .saydale-results-hd-inner { margin-bottom: 12px; } .saydale-results-hd-inner .saydale-results-spark { font-size: 18px; opacity: 0.85; display: block; margin-bottom: 4px; } #saydale-results-title { font-size: clamp(17px,4.5vw,22px) !important; font-weight: 600 !important; color: #fff !important; margin: 0 0 6px !important; line-height: 1.2 !important; } .saydale-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 */ .saydale-strategy-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .saydale-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 ────────────────────────────────────── */ .saydale-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); } .saydale-best-start-label { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: #10847E; text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 10px; } .saydale-best-start-cards { display: flex; flex-direction: column; gap: 8px; } .saydale-start-card { display: flex; gap: 12px; align-items: center; text-decoration: none; color: inherit; padding: 8px 0; border-bottom: 1px solid #f0f0f0; } .saydale-start-card:last-child { border-bottom: none; } .saydale-start-img { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; flex-shrink: 0; background: #f5f5f3; } .saydale-start-body { flex: 1; min-width: 0; } .saydale-start-name { font-size: 13px; font-weight: 600; color: #111827; line-height: 1.3; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .saydale-start-atc { margin-top: 6px; font-size: 11px; padding: 5px 12px; background: #10847E; color: #fff; border: none; border-radius: 20px; cursor: pointer; font-weight: 600; } /* ── Product groups ─────────────────────────────────────────── */ .saydale-product-groups { display: flex; flex-direction: column; gap: 0; padding: 12px 0 0; } .saydale-product-group { padding: 0 14px 16px; } .saydale-group-label { font-size: 10px; font-weight: 600; 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; } .saydale-group-cards { display: flex; flex-direction: column; gap: 10px; } /* ── Product card — horizontal layout ──────────────────────── */ .saydale-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; } .saydale-result-card:hover { border-color: #10847E; box-shadow: 0 3px 18px rgba(16,132,126,0.14); } .saydale-result-card--start { border-color: rgba(16,132,126,0.4); box-shadow: 0 2px 14px rgba(16,132,126,0.15); } .saydale-result-img { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; flex-shrink: 0; background: #f5f5f3; } .saydale-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; } .saydale-result-body { flex: 1; min-width: 0; } /* Badges row */ .saydale-result-badges { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; } .saydale-priority-badge { font-size: 9.5px; font-weight: 600; letter-spacing:0.05em; color: #fff; border-radius: 20px; padding: 2px 9px; line-height: 1.4; white-space: nowrap; } .saydale-confidence-badge { font-size: 9.5px; font-weight: 600; color: #6b7280; background: #f3f4f6; border-radius: 20px; padding: 2px 8px; white-space: nowrap; } .saydale-result-brand { font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #9ca3af; margin-bottom: 2px; } .saydale-result-name { font-size: 13.5px; font-weight: 600; color: #111827; line-height: 1.3; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .saydale-match-reason { font-size: 11.5px; color: #6b7280; font-style: italic; line-height: 1.35; margin-bottom: 3px; } .saydale-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; } .saydale-result-price-row { margin-bottom: 8px; } .saydale-result-price { font-size: 14px; font-weight: 600; color: #10847E; } .saydale-result-old-price { font-size: 11px; color: #9ca3af; text-decoration: line-through; margin-left: 5px; } /* Card action row */ .saydale-result-card-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .saydale-result-atc { flex: 0 0 auto; background: #10847E; color: #fff; border: none; border-radius: 20px; font-size: 11.5px; font-weight: 600; padding: 7px 16px; cursor: pointer; white-space: nowrap; transition: background 0.2s, transform 0.15s; } .saydale-result-atc:hover { background: #0f766e; } .saydale-result-atc:active { transform: scale(0.95); } .saydale-result-atc--loading{ background: #9ca3af; pointer-events: none; } .saydale-result-atc--done { background: #059669; pointer-events: none; } /* Why this? toggle */ .saydale-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 */ .saydale-why-body { margin-top: 8px; padding-top: 8px; border-top: 1px dashed #e5e7eb; } .saydale-why-p { font-size: 12px; color: #374151; line-height: 1.5; margin: 0 0 6px; } .saydale-why-tip { font-size: 11.5px; color: #6b7280; font-style: italic; margin: 0; line-height: 1.45; } /* ── How to use section ─────────────────────────────────────── */ .saydale-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); } .saydale-htu-title { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #10847E; text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 10px; } .saydale-htu-row { display: flex; align-items: baseline; gap: 8px; padding: 6px 0; border-bottom: 1px solid #f0f0f0; font-size: 12.5px; } .saydale-htu-row:last-child { border-bottom: none; } .saydale-htu-num { color: #10847E; font-weight: 600; font-size: 13px; min-width: 18px; } .saydale-htu-step { font-weight: 600; color: #111827; min-width: 90px; flex-shrink: 0; } .saydale-htu-names{ color: #6b7280; font-size: 11.5px; line-height: 1.4; } /* ── Choice guidance strip ──────────────────────────────────── */ .saydale-choice-guide { margin: 12px 14px 0; display: flex; flex-direction: column; gap: 6px; } .saydale-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); } .saydale-guide-icon { font-size: 13px; color: #10847E; flex-shrink: 0; min-width: 16px; text-align: center; line-height: 1.4; } .saydale-guide-item--budget .saydale-guide-icon { color: #d97706; } .saydale-guide-item--skip .saydale-guide-icon { color: #9ca3af; } /* ═══════════════════════════════════════════════════════════════ CHAT PRODUCT CARDS — match advisor results card style Cards keep .saydale-chat-product-card for JS filter/sort compat but use .saydale-result-card visual structure ══════════════════════════════════════════════════════════════ */ /* ── Chat product container ── */ .saydale-chat-products { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important; gap: 16px !important; max-width: 100% !important; padding: 4px 0 !important; } /* Product cards - vertical layout on desktop & mobile */ .saydale-chat-product-card.saydale-result-card { display: flex !important; flex-direction: column !important; justify-content: space-between !important; background: #ffffff !important; border: 1px solid #f0f0f0 !important; border-radius: 12px !important; padding: 16px !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important; gap: 12px !important; margin: 0 0 12px 0 !important; height: 100% !important; box-sizing: border-box !important; position: relative !important; } .saydale-chat-product-card.saydale-result-card:hover { transform: translateY(-4px) !important; box-shadow: 0 8px 20px rgba(16, 132, 126, 0.08) !important; border-color: rgba(16, 132, 126, 0.25) !important; } /* Heart wishlist icon top right */ .saydale-result-heart { position: absolute !important; top: 12px !important; right: 12px !important; z-index: 10 !important; cursor: pointer !important; color: #333333 !important; transition: color 0.2s ease, transform 0.2s ease !important; background: transparent !important; border: none !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 24px !important; height: 24px !important; } .saydale-result-heart:hover { color: #e11d48 !important; transform: scale(1.1) !important; } /* Badge overlay top left */ .saydale-result-badge-overlay { position: absolute !important; top: 12px !important; left: 12px !important; z-index: 10 !important; padding: 4px 8px !important; border-radius: 4px !important; font-family: 'Inter', sans-serif !important; font-size: 9.5px !important; font-weight: 700 !important; text-transform: uppercase !important; color: #ffffff !important; letter-spacing: 0.05em !important; line-height: 1.2 !important; } /* Inner layout top container */ .saydale-chat-product-card.saydale-result-card .saydale-rc-top { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 12px !important; margin-bottom: 0 !important; flex: 1 !important; text-align: left !important; width: 100% !important; } /* Centered product images */ .saydale-chat-product-card.saydale-result-card .saydale-result-img, .saydale-chat-product-card.saydale-result-card .saydale-result-img-ph { width: 100% !important; height: 180px !important; object-fit: contain !important; border-radius: 8px !important; border: none !important; background: #ffffff !important; flex-shrink: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 32px !important; margin: 0 auto !important; } /* Body content */ .saydale-chat-product-card.saydale-result-card .saydale-result-body { display: flex !important; flex-direction: column !important; align-items: flex-start !important; text-align: left !important; flex: 1 !important; min-width: 0 !important; width: 100% !important; } .saydale-chat-product-card.saydale-result-card .saydale-result-name { font-family: 'Inter', sans-serif !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.4 !important; color: #1e293b !important; margin: 4px 0 2px 0 !important; min-height: 40px !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; text-overflow: ellipsis !important; width: 100% !important; } .saydale-chat-product-card.saydale-result-card .saydale-result-name a { color: inherit !important; text-decoration: none !important; } .saydale-chat-product-card.saydale-result-card .saydale-result-brand { font-family: 'Inter', sans-serif !important; font-size: 11px !important; color: #94a3b8 !important; font-weight: 500 !important; margin-bottom: 8px !important; line-height: 1.2 !important; } .saydale-chat-product-card.saydale-result-card .saydale-result-reason { font-family: 'Inter', sans-serif !important; font-size: 11px !important; color: #64748b !important; margin-top: 4px !important; line-height: 1.3 !important; } /* Price & points meta row */ .saydale-result-meta-row { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; margin-top: auto !important; padding-top: 6px !important; margin-bottom: 8px !important; } .saydale-chat-product-card.saydale-result-card .saydale-result-price-row { display: flex !important; align-items: center !important; gap: 6px !important; margin-top: 0 !important; } .saydale-chat-product-card.saydale-result-card .saydale-result-price { font-family: 'Inter', sans-serif !important; font-size: 16px !important; font-weight: 700 !important; color: #10847e !important; } .saydale-chat-product-card.saydale-result-card .saydale-result-old-price { font-family: 'Inter', sans-serif !important; font-size: 12px !important; text-decoration: line-through !important; color: #94a3b8 !important; margin-left: 4px !important; font-weight: 400 !important; } /* SLP Rewards Points Badge next to Price */ .saydale-result-points { display: inline-flex !important; align-items: center !important; gap: 4px !important; font-family: 'Inter', sans-serif !important; font-size: 11px !important; font-weight: 600 !important; color: #10847e !important; } .saydale-points-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 14px !important; height: 14px !important; } .saydale-points-text { font-family: 'Inter', sans-serif !important; } /* Full-width Solid Premium ADD TO CART Pill Button */ .saydale-chat-product-card.saydale-result-card .saydale-result-atc { width: 100% !important; padding: 11px 0 !important; background: #10847e !important; color: #ffffff !important; border: none !important; border-radius: 100px !important; font-family: 'Inter', sans-serif !important; font-size: 12px !important; font-weight: 700 !important; cursor: pointer !important; transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease !important; text-align: center !important; flex-shrink: 0 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; margin-top: 4px !important; } .saydale-chat-product-card.saydale-result-card .saydale-result-atc:hover { background: #0c635e !important; box-shadow: 0 4px 12px rgba(16, 132, 126, 0.25) !important; } .saydale-chat-product-card.saydale-result-card .saydale-result-atc:active { transform: scale(0.98) !important; } .saydale-chat-product-card.saydale-result-card .saydale-result-atc.saydale-cpb--loading { background: #94a3b8 !important; color: #ffffff !important; cursor: wait !important; box-shadow: none !important; } .saydale-chat-product-card.saydale-result-card .saydale-result-atc.saydale-cpb--done { background: #10847e !important; color: #ffffff !important; pointer-events: none !important; box-shadow: none !important; } /* Mobile responsive styles (Stack on mobile, keep clean card shape) */ @media (max-width: 600px) { .saydale-chat-products { display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; } .saydale-chat-product-card.saydale-result-card { flex-direction: column !important; align-items: stretch !important; padding: 14px !important; gap: 12px !important; border-radius: 12px !important; } .saydale-chat-product-card.saydale-result-card .saydale-rc-top { flex-direction: column !important; align-items: stretch !important; gap: 12px !important; } .saydale-chat-product-card.saydale-result-card .saydale-result-img, .saydale-chat-product-card.saydale-result-card .saydale-result-img-ph { width: 100% !important; height: 150px !important; font-size: 28px !important; } .saydale-chat-product-card.saydale-result-card .saydale-result-name { font-size: 13.5px !important; } .saydale-chat-product-card.saydale-result-card .saydale-result-atc { width: 100% !important; margin-top: 6px !important; } } /* "More" toggle button — spans all columns */ .saydale-chat-products-toggle { grid-column: 1 / -1; /* span all columns regardless of count */ display: block; width: 100%; margin-top: 0; background: none; border: none; border-top: 1.5px solid #dde8e9; border-radius: 0; padding: 9px 0; font-size: 12px; font-weight: 600; color: #10847E; cursor: pointer; text-align: center; } .saydale-chat-products-toggle:hover { background: rgba(16,132,126,0.05); } /* Mobile: revert to simple vertical list so cards are full-width */ @media (max-width: 680px) { .saydale-chat-products { display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; padding: 8px !important; background: var(--saydale-mint) !important; } .saydale-chat-product-card.saydale-result-card { border-radius: 12px !important; border: 1px solid #f0f0f0 !important; flex-direction: column !important; height: auto !important; } } /* ── Results header — restore clean original style (no green bg) ── */ .saydale-results-hd { background: transparent !important; padding: clamp(18px,4vw,28px) clamp(16px,4vw,24px) clamp(10px,2vw,16px) !important; color: #111827 !important; border-bottom: 1px solid rgba(0,0,0,0.07) !important; flex-shrink: 0 !important; } #saydale-results-title { color: #111827 !important; } .saydale-results-summary { color: #6b7280 !important; } /* Strategy pills — keep but teal on white bg */ .saydale-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 */ #saydale-best-start, #saydale-how-to-use { display: none !important; } /* Center results header text */ .saydale-results-hd, .saydale-results-hd-inner { text-align: center !important; } .saydale-results-hd .saydale-results-spark { display: block !important; text-align: center !important; } .saydale-strategy-pills { justify-content: center !important; } /* Grid of cards on desktop */ @media (min-width: 681px) { .saydale-chat-products { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 16px !important; padding: 4px 0 !important; } .saydale-chat-products[data-count="1"] { grid-template-columns: 1fr !important; } .saydale-chat-products[data-count="2"] { grid-template-columns: repeat(2, 1fr) !important; } .saydale-chat-products[data-count="3"] { grid-template-columns: repeat(3, 1fr) !important; } .saydale-chat-products[data-count="4"] { grid-template-columns: repeat(2, 1fr) !important; } .saydale-chat-products[data-count="5"] { grid-template-columns: repeat(3, 1fr) !important; } .saydale-chat-products[data-count="5"] .saydale-chat-product-card:nth-child(5) { grid-column: span 2 !important; } .saydale-chat-products[data-count="6"] { grid-template-columns: repeat(3, 1fr) !important; } } @media (max-width: 680px) { .saydale-chat-products { display: flex !important; flex-direction: column !important; gap: 12px !important; } } /* Hide legacy sections and properties */ .saydale-result-card .saydale-result-badges, .saydale-result-card .saydale-priority-badge, .saydale-result-card .saydale-confidence-badge, .saydale-result-card .saydale-match-reason, .saydale-result-card .saydale-benefit-line, .saydale-result-card .saydale-result-card-actions, .saydale-result-card .saydale-why-toggle, .saydale-result-card .saydale-why-body, #saydale-best-start, #saydale-how-to-use, #saydale-choice-guide, #saydale-strategy-pills, .saydale-product-group .saydale-group-label { display: none !important; } /* Badge overlay text color (white) */ .saydale-result-card .saydale-result-badge-overlay { color: #ffffff !important; } /* Wishlist Heart Active state */ .saydale-result-heart.saydale-heart--active svg { fill: #e11d48 !important; stroke: #e11d48 !important; } /* Unified Vertical Layout styling for both Chat & Report cards */ .saydale-result-card { display: flex !important; flex-direction: column !important; justify-content: space-between !important; background: #ffffff !important; border: 1px solid #e5e7eb !important; border-radius: 12px !important; padding: 16px !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important; gap: 12px !important; height: 100% !important; box-sizing: border-box !important; position: relative !important; max-width: 380px !important; width: 100% !important; margin: 0 auto !important; text-decoration: none !important; color: inherit !important; cursor: pointer !important; } .saydale-result-card:hover { transform: translateY(-4px) !important; box-shadow: 0 8px 20px rgba(16, 132, 126, 0.08) !important; border-color: rgba(16, 132, 126, 0.25) !important; } /* Top container inside vertical card */ .saydale-result-card .saydale-rc-top { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 12px !important; margin-bottom: 0 !important; flex: 1 !important; text-align: left !important; width: 100% !important; } /* Image styling */ .saydale-result-card .saydale-result-img, .saydale-result-card .saydale-result-img-ph { width: 100% !important; height: 180px !important; object-fit: contain !important; border-radius: 8px !important; border: none !important; background: #ffffff !important; flex-shrink: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 32px !important; margin: 0 auto !important; } /* Body content styling */ .saydale-result-card .saydale-result-body { display: flex !important; flex-direction: column !important; align-items: flex-start !important; text-align: left !important; flex: 1 !important; min-width: 0 !important; width: 100% !important; } /* Name */ .saydale-result-card .saydale-result-name { font-family: 'Inter', sans-serif !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.4 !important; color: #1e293b !important; margin: 4px 0 2px 0 !important; min-height: 40px !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; text-overflow: ellipsis !important; width: 100% !important; } .saydale-result-card .saydale-result-name a { color: inherit !important; text-decoration: none !important; } /* Brand */ .saydale-result-card .saydale-result-brand { font-family: 'Inter', sans-serif !important; font-size: 11px !important; color: #94a3b8 !important; font-weight: 500 !important; margin-bottom: 8px !important; line-height: 1.2 !important; text-transform: none !important; } /* Price & points meta row */ .saydale-result-card .saydale-result-meta-row { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; margin-top: auto !important; padding-top: 6px !important; margin-bottom: 8px !important; } .saydale-result-card .saydale-result-price-row { display: flex !important; align-items: center !important; gap: 6px !important; margin-top: 0 !important; } .saydale-result-card .saydale-result-price { font-family: 'Inter', sans-serif !important; font-size: 16px !important; font-weight: 700 !important; color: #10847e !important; } .saydale-result-card .saydale-result-old-price { font-family: 'Inter', sans-serif !important; font-size: 12px !important; text-decoration: line-through !important; color: #94a3b8 !important; margin-left: 4px !important; font-weight: 400 !important; } .saydale-result-card .saydale-result-points { display: inline-flex !important; align-items: center !important; gap: 4px !important; font-family: 'Inter', sans-serif !important; font-size: 11px !important; font-weight: 600 !important; color: #10847e !important; } /* ADD TO CART button styling */ .saydale-result-card .saydale-result-atc { display: block !important; width: 100% !important; box-sizing: border-box !important; margin: 4px 0 0 0 !important; padding: 11px 0 !important; background: #10847e !important; color: #ffffff !important; border: none !important; border-radius: 100px !important; font-family: 'Inter', sans-serif !important; font-size: 12px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; cursor: pointer !important; transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease !important; text-align: center !important; flex-shrink: 0 !important; } .saydale-result-card .saydale-result-atc:hover { background: #0c635e !important; box-shadow: 0 4px 12px rgba(16, 132, 126, 0.25) !important; } .saydale-result-card .saydale-result-atc:active { transform: scale(0.98) !important; } .saydale-result-card .saydale-result-atc.saydale-cpb--loading, .saydale-result-card .saydale-result-atc.saydale-atc--loading { background: #94a3b8 !important; color: #ffffff !important; cursor: wait !important; box-shadow: none !important; } .saydale-result-card .saydale-result-atc.saydale-cpb--done, .saydale-result-card .saydale-result-atc.saydale-atc--done { background: #10847e !important; color: #ffffff !important; pointer-events: none !important; box-shadow: none !important; } .saydale-intro-inner { flex: 1 0 auto !important; height: 100% !important; } /* ═══════════════════════════════════════════════════════════════ RESPONSIVE — min-width: 769px Basic centering and natural page flow for wider screens. Same screens, same logic, same components as mobile. ═══════════════════════════════════════════════════════════════ */ @media (min-width: 769px) { /* ══════════════════════════════════════════════════════════════ NUCLEAR BOX KILL — page-id-795008 = the AI advisor page only. Uses body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) (WordPress body class) so these rules ONLY apply on the /ai/ page and nowhere else on the site. This catches every possible source of the white/grey card box: WoodMart wrappers, Elementor containers, and the advisor itself. ══════════════════════════════════════════════════════════════ */ /* Layer 1 — WoodMart page wrappers: make fully transparent. .wd-page-content { background: var(--wd-main-bgcolor) } creates the white bg. .wd-content-layout { padding-block: 40px } creates dead space above/below. .container { max-width: var(--wd-container-w); padding-inline:15px } constrains width. */ body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .wd-page-content, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .wd-page-wrapper, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .website-wrapper { background: transparent !important; background-color: transparent !important; border-radius: 0 !important; box-shadow: none !important; } body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) main.wd-content-layout, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .content-layout-wrapper { background: transparent !important; background-color: transparent !important; border-radius: 0 !important; box-shadow: none !important; padding-top: 0 !important; padding-bottom: 0 !important; max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; height: 100dvh !important; min-height: 100dvh !important; overflow: hidden !important; } /* Layer 1b — Elementor e-con + widget parents: fill viewport, no padding */ body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .elementor-element-9658dc9, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .elementor-element-3d9ebfc, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .elementor-widget-container, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .elementor-795008 { height: 100% !important; min-height: 0 !important; max-height: none !important; padding: 0 !important; margin: 0 !important; border: none !important; overflow: hidden !important; } /* Layer 2 — Elementor elements: transparent throughout */ body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .elementor-795008, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .elementor-element-9658dc9, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .elementor-element-3d9ebfc, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .elementor-widget-container, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .e-con, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .e-con-inner, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .e-flex { background: transparent !important; background-color: transparent !important; border-radius: 0 !important; box-shadow: none !important; } /* Layer 3 — Exact Elementor specificity match (3-class, beats post-795008.css). Elementor's auto-generated CSS uses these 3-class rules with no !important: .elementor-795008 .elementor-element.elementor-element-3d9ebfc .saydale-advisor-wrapper { background:#fff } .elementor-795008 .elementor-element.elementor-element-3d9ebfc .saydale-screen { background:#fff } */ .elementor-795008 .elementor-element.elementor-element-3d9ebfc .saydale-advisor-wrapper, .elementor-795008 .elementor-element.elementor-element-3d9ebfc .saydale-screen, .elementor-795008 .elementor-element.elementor-element-3d9ebfc .saydale-screen--active, .elementor-795008 .elementor-element.elementor-element-3d9ebfc .saydale-screen--intro, .elementor-795008 .elementor-element.elementor-element-3d9ebfc .saydale-screen--quiz, .elementor-795008 .elementor-element.elementor-element-3d9ebfc .saydale-screen--chat, .elementor-795008 .elementor-element.elementor-element-3d9ebfc .saydale-screen--results, .elementor-795008 .elementor-element.elementor-element-3d9ebfc .saydale-screen--no-results { background: transparent !important; background-color: transparent !important; --background-color: transparent; --background-background: initial; border-radius: 0 !important; box-shadow: none !important; } /* A — Wrapper: FIXED position app shell — AI PAGE ONLY. Pins to viewport edges. Full-screen app experience. No dependency on parent padding, margin, or min-height. Scoped to page-id-795008 so the overlay wrapper on other pages is unaffected. */ body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-advisor-wrapper { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; z-index: 10000 !important; width: auto !important; max-width: none !important; height: 100% !important; min-height: 100dvh !important; margin: 0 !important; margin-left: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; /* ── APP SHELL ── */ display: flex !important; flex-direction: column !important; overflow: hidden !important; } /* ── Hide site header, footer, page title — AI PAGE ONLY (page-id-795008) ── */ body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .wd-header, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .whb-header, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) #masthead, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .site-footer, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) footer.site-footer, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) #colophon, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .wd-footer-area, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .whb-footer, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .wd-prefooter, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .page-title, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .wd-page-title { display: none !important; } /* ── Nuclear kill: ALL WoodMart/theme fixed/sticky bottom bars — AI PAGE ONLY ── */ body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .wd-toolbar, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .wd-sticky-btn, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .wd-header-mobile-nav, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .wd-mobile-nav, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .wd-cookies-popup, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .wd-sticky-holder, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .wd-header-clone, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .wa__btn_popup, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .wa__popup_chat_window, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) #mobnav-bar, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) #wpadminbar, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .whb-sticked, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .wd-close-side, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .wd-search-full-screen, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .woodmart-cookies-popup, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .woodmart-toolbar { display: none !important; visibility: hidden !important; height: 0 !important; min-height: 0 !important; overflow: hidden !important; pointer-events: none !important; } /* ── Starter Mobile Menu (smm) — fixed bars that overlay the AI page ── */ body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .smm-mob-close-fixed, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .smm-mob-tabbar, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .smm-mobile-overlay, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .smm-mobile-panel, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .smm-page-overlay, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) [class*="smm-mob"], body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) [class*="smm-mobile"], body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) [class*="smm-page"] { display: none !important; visibility: hidden !important; height: 0 !important; min-height: 0 !important; overflow: hidden !important; pointer-events: none !important; position: absolute !important; top: -9999px !important; } /* ── Click-to-Chat WhatsApp widget ── */ body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .ht-ctc, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) [class*="ht-ctc"], body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) [class*="ht_ctc"] { display: none !important; } /* ── Prevent body/html scroll — AI page only ── */ body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)), html:has(body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper))) { overflow: hidden !important; height: 100dvh !important; background: #ffffff !important; } /* E — Elementor parent containers: strip card styling (generic fallback) */ .elementor-widget-saydale_advisor > .elementor-widget-container { background: transparent !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; } .elementor-widget-saydale_advisor { background: transparent !important; border-radius: 0 !important; box-shadow: none !important; } /* Target the e-con flex container wrapping the widget */ .e-con:has(.saydale-advisor-wrapper), .e-con:has(.saydale-advisor-wrapper) > .e-con-inner { background-color: transparent !important; background: transparent !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; min-height: 0 !important; height: auto !important; overflow: visible !important; } /* ── ALL ancestor containers: strip height/padding so the app shell is the sole height owner ── */ body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .wd-page-content, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .wd-content-layout, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .content-layout-wrapper, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .site-content, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .content-area, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) #content, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .entry-content, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .page-content, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) article, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .hentry, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .post, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) main { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; min-height: 0 !important; } /* Elementor page container + sections: no extra height */ body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .elementor, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .elementor-section-wrap, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .elementor-section, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .e-con, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .e-con-inner, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .elementor-widget-container { min-height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* B — Screen background: transparent on desktop so page bg shows through. Base: .saydale-screen { background: #eff4f5 } — grey tinted. This shows as a grey box on desktop since the screen fills the wrapper which is now auto-height. Active screens should be transparent (page bg shows). */ .saydale-screen--active { background: transparent !important; } /* Chat, quiz, intro screens: also transparent so no grey box */ .saydale-screen--intro.saydale-screen--active, .saydale-screen--quiz.saydale-screen--active, .saydale-screen--chat.saydale-screen--active { background: transparent !important; } /* C — Chat thread: transparent background so page shows through, removing the "white box floating on grey" appearance. */ .saydale-screen--chat.saydale-screen--active .saydale-chat-thread { background: transparent !important; } /* D — (removed: dead .saydale-chat-hd reference + height:auto override — wrapper is now flex shell) */ /* 2 — Inactive screens: hidden. Active: flex child filling remaining wrapper space. */ .saydale-screen { display: none !important; position: static !important; inset: auto !important; } .saydale-screen.saydale-screen--active { display: flex !important; flex-direction: column !important; flex: 1 1 0 !important; min-height: 0 !important; overflow: hidden !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; background: #ffffff !important; padding-top: 0 !important; /* header is sticky flex child — no offset needed */ } /* 3 — Intro screen: content centered */ .saydale-screen--intro.saydale-screen--active { align-items: center !important; } .saydale-screen--intro .saydale-intro-inner { flex: 1 0 auto !important; height: 100% !important; min-height: min-content !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; max-width: 820px !important; width: 100% !important; margin: 0 auto !important; padding: 20px 24px 80px !important; box-sizing: border-box !important; overflow-y: auto !important; } /* ── Desktop header — absolutely positioned over the screen ── */ body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) #saydale-shared-hd { background: #ffffff !important; background-color: #ffffff !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-bottom: 1px solid rgba(0,0,0,0.06) !important; box-shadow: 0 1px 6px rgba(0,0,0,0.05) !important; position: sticky !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 56px !important; min-height: 56px !important; z-index: 100 !important; flex-shrink: 0 !important; transition: box-shadow 0.3s ease !important; } body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) #saydale-shared-hd.saydale-hd--scrolled { background: #ffffff !important; background-color: #ffffff !important; box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important; border-bottom: 1px solid rgba(0,0,0,0.07) !important; } body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-chat-hd-back { position: absolute !important; left: 24px !important; } body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-hd-right-wrap { position: absolute !important; right: 24px !important; top: 50% !important; transform: translateY(-50%) !important; display: flex !important; align-items: center !important; gap: 8px !important; } body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-chat-hd-brand { position: absolute !important; left: 50% !important; transform: translateX(-50%) !important; } /* ── Desktop intro text ── */ body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-intro-question { font-size: clamp(28px, 3.5vw, 36px) !important; font-weight: 400 !important; margin-bottom: 40px !important; order: 1 !important; } body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-intro-hint { font-size: 16px !important; margin-bottom: 16px !important; color: #6B7280 !important; order: 2 !important; } /* ── Desktop element ordering: heading → chips → chat → or → CTA ── */ body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-advisor-mark { order: 0 !important; } body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-screen--intro .saydale-chat-wrap { order: 4 !important; } body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-concern-grid { order: 3 !important; } body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-intro-divider { order: 5 !important; } body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-intro-cta { order: 6 !important; } body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-intro-note { order: 7 !important; } /* ── Desktop chat input — centered, seamless ── */ body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-screen--intro .saydale-chat-wrap { border-top: none !important; box-shadow: none !important; border-radius: 0 !important; background: transparent !important; padding: 0 !important; max-width: 776px !important; width: 100% !important; margin: 0 auto 16px !important; } body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-chat-box { margin: 0 !important; border-radius: 100px !important; padding: 10px 10px 10px 20px !important; min-height: 60px !important; } body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-chat-input { font-size: 17px !important; } /* ── Desktop concern grid — 3-col, compact ── */ body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-concern-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; margin-bottom: 8px !important; max-width: 600px !important; width: 100% !important; } body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-concern-chip { padding: 32px 16px !important; border-radius: 14px !important; gap: 8px !important; font-size: 14px !important; background: rgba(255,255,255,0.7) !important; border: 1px solid rgba(16,132,126,0.10) !important; box-shadow: 0 1px 3px rgba(0,0,0,0.03) !important; } body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-concern-chip-icon svg { width: 26px !important; height: 26px !important; } /* ── Desktop OR divider ── */ body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-intro-divider { margin: 10px 0 !important; max-width: 580px !important; width: 100% !important; font-size: 13px !important; } /* ── Desktop CTA row ── */ body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-intro-cta { max-width: 580px !important; width: 100% !important; } body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-cta-row { display: flex !important; flex-direction: row !important; gap: 10px !important; width: 100% !important; align-items: stretch !important; } /* ── Desktop SCAN button — teal gradient PRIMARY ── */ body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-btn-scan { max-width: none !important; margin: 0 !important; padding: 16px 28px !important; height: 56px !important; gap: 10px !important; border-radius: 100px !important; background: linear-gradient(135deg, #10847E 0%, #0fa89f 100%) !important; border: none !important; box-shadow: 0 2px 8px rgba(16,132,126,0.25) !important; font-size: 15px !important; font-weight: 600 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; color: #ffffff !important; display: flex !important; align-items: center !important; justify-content: center !important; flex: 1 1 0 !important; width: auto !important; cursor: pointer !important; text-decoration: none !important; box-sizing: border-box !important; transition: box-shadow 0.25s ease, transform 0.15s ease !important; order: 2 !important; } body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-btn-scan:hover { box-shadow: 0 4px 16px rgba(16,132,126,0.35) !important; transform: translateY(-1px) !important; } body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-btn-scan .saydale-scan-icon-wrap { width: 28px !important; height: 28px !important; min-width: 28px !important; } body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-btn-scan .saydale-scan-icon { width: 24px !important; height: 24px !important; } body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-btn-scan .saydale-scan-icon rect, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-btn-scan .saydale-scan-icon circle:not(:last-of-type) { stroke: #ffffff !important; } body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-btn-scan .saydale-scan-arrow { display: none !important; } body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-btn-scan .saydale-scan-label { color: #ffffff !important; } /* ── Desktop BEGIN ASSESSMENT — outline SECONDARY ── */ body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) #saydale-start-btn { max-width: none !important; margin: 0 !important; padding: 16px 28px !important; height: 56px !important; gap: 10px !important; border-radius: 100px !important; background: transparent !important; border: 1.5px solid rgba(16,132,126,0.25) !important; box-shadow: none !important; font-size: 15px !important; font-weight: 600 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; color: #10847E !important; display: flex !important; align-items: center !important; justify-content: center !important; flex: 1 1 0 !important; width: auto !important; cursor: pointer !important; text-decoration: none !important; box-sizing: border-box !important; transition: background 0.25s ease, border-color 0.25s ease !important; order: 1 !important; } body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) #saydale-start-btn:hover { background: rgba(16,132,126,0.06) !important; border-color: rgba(16,132,126,0.40) !important; } body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) #saydale-start-btn svg { width: 22px !important; height: 22px !important; } /* ── (Desktop assessment — handled above in CTA row section) ── */ /* ── Desktop intro note ── */ body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-intro-note { font-size: 12px !important; margin-top: 6px !important; color: #9CA3AF !important; } /* ── Footer disclaimer — pinned to bottom of intro screen ── */ .saydale-intro-footer-note { flex-shrink: 0 !important; text-align: center !important; font-size: 11px !important; color: #9CA3AF !important; padding: 8px 16px !important; margin: 0 !important; width: 100% !important; order: 99 !important; } /* 4 — Quiz screen: steps scroll, nav row anchored at bottom. Height inherited from wrapper flex shell — no per-screen viewport calc. */ .saydale-screen--quiz.saydale-screen--active { /* inherits flex column + flex:1 from .saydale-screen--active */ } /* Steps: flex:1, scrolls internally — Fix #3: hide scrollbar */ .saydale-steps { flex: 1 1 0 !important; min-height: 0 !important; display: block !important; overflow-y: auto !important; overflow-x: hidden !important; padding: 0 !important; scrollbar-width: none !important; -ms-overflow-style: none !important; } .saydale-steps::-webkit-scrollbar { display: none !important; } .saydale-step { display: none !important; } .saydale-step.saydale-step--active { display: block !important; flex: none !important; min-height: 0 !important; width: 100% !important; max-width: 680px !important; margin: 0 auto !important; padding: 28px 24px !important; box-sizing: border-box !important; animation: none !important; } /* Fix #15: quiz header — white on desktop (mint was leaking from mobile rule) */ .saydale-quiz-header { background: #ffffff !important; border-bottom: 1px solid rgba(0,0,0,0.06) !important; } /* Fix #18: steps background matches quiz screen — unified grey */ .saydale-steps { background: transparent !important; } /* Fix #16: progress dots — centered on desktop */ .saydale-progress-dots { display: flex !important; justify-content: center !important; align-items: center !important; gap: 6px !important; } /* Fix #1+#2+#4: Nav row — single definitive desktop rule. Resolves the 4-way conflict (lines 1646, 2512, 2978, 4273 base). Uses padding centering so no inner max-width is needed. */ .saydale-nav-row { display: flex !important; align-items: center !important; position: relative !important; /* flex child at bottom — not sticky */ flex-shrink: 0 !important; z-index: 10 !important; background: #ffffff !important; border-top: 1px solid rgba(0,0,0,0.06) !important; box-shadow: 0 -2px 12px rgba(0,0,0,0.04) !important; max-width: none !important; width: 100% !important; margin: 0 !important; padding: 12px calc(50% - 340px) !important; box-sizing: border-box !important; gap: 10px !important; justify-content: unset !important; } /* Fix #4: nav-inner — clear its own max-width; parent padding centers everything */ .saydale-nav-inner { display: flex !important; align-items: center !important; gap: 10px !important; width: 100% !important; max-width: none !important; /* Fix #4: was 720px then 480px — both gone */ margin: 0 !important; } /* 5 — Results screens: scroll internally within the flex shell */ .saydale-screen--results.saydale-screen--active, .saydale-screen--no-results.saydale-screen--active { overflow-y: auto !important; overflow-x: hidden !important; } /* 6 — Results header & content: centered */ .saydale-results-hd { text-align: center !important; } .saydale-results-hd-inner { max-width: 640px !important; margin-left: auto !important; margin-right: auto !important; } .saydale-results-summary { margin-left: auto !important; margin-right: auto !important; } .saydale-product-groups, .saydale-results-actions, .saydale-best-start, .saydale-category-tabs, .saydale-how-to-use, .saydale-choice-guide { max-width: 680px !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; } /* 7 — Chat screen: Gemini-style layout. Fills viewport below site header as a flex column. Thread scrolls internally. Input bar is always pinned at the bottom. NOT an iframe — the screen is in normal page flow, just tall enough to fill the viewport. Only the thread scrolls, not the page itself. */ .saydale-screen--chat.saydale-screen--active { /* inherits flex column + flex:1 from .saydale-screen--active */ background: #f5f7f7 !important; } /* Thread: takes all available space, scrolls internally */ /* Suggestions bar: HIDDEN */ #saydale-screen-chat #saydale-suggestions-bar { display: none !important; } /* Chat bar: flex child at bottom of screen — no sticky needed */ #saydale-screen-chat .saydale-chat-bar { position: relative !important; /* flex child at bottom */ flex-shrink: 0 !important; z-index: 10 !important; background: #ffffff !important; max-width: none !important; width: 100% !important; margin: 0 !important; padding: 10px calc(50% - 340px) 12px !important; box-sizing: border-box !important; border-top: none !important; box-shadow: none !important; } /* Chat bar inner: full width — centered by parent padding */ #saydale-screen-chat .saydale-chat-bar-inner { width: 100% !important; max-width: none !important; /* parent padding handles centering */ margin: 0 !important; } /* Disclaimer inside chat bar: full width, inherits centering */ #saydale-screen-chat .saydale-chat-bar .saydale-chat-disclaimer { width: 100% !important; max-width: none !important; margin: 0 !important; text-align: center !important; } /* (removed: dead #saydale-screen-chat .saydale-chat-hd — header is now shared #saydale-shared-hd) */ /* 8 — Suggestions bar + chat composer: centered on desktop */ #saydale-chat-box, .saydale-chat-box, .saydale-chat-disclaimer { max-width: 776px !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; } /* Intro suggestions bar: centered, horizontal scroll */ .saydale-intro-suggestions-bar { display: none !important; } .saydale-intro-suggestions-bar::-webkit-scrollbar { display: none !important; } /* Intro composer dock — no separator */ #saydale-screen-intro .saydale-chat-wrap { border-top: none !important; box-shadow: none !important; padding-top: 4px !important; } /* Fix #11: concern chip grid — center within 680px column */ .saydale-concern-grid { max-width: 776px !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; } /* 9 — Chat header: match mobile overlay #saydale-app-bar appearance */ #saydale-screen-chat .saydale-chat-hd { display: flex !important; max-width: none !important; width: 100% !important; background: rgba(249,250,251,0.96) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; border-bottom: 1px solid rgba(0,0,0,0.07) !important; box-shadow: none !important; padding: 8px 16px !important; box-sizing: border-box !important; margin-left: 0 !important; margin-right: 0 !important; } /* Fix #7: Back button min-width so brand stays centered */ #saydale-screen-chat .saydale-chat-hd-back { min-width: 72px !important; flex: 0 0 72px !important; } /* Fix #8: re-show status subtitle on desktop (shows Thinking… state). We only hide the New button. Subtitle is useful for status display. */ #saydale-screen-chat .saydale-chat-hd-brand { justify-content: center !important; flex: 1 !important; } #saydale-screen-chat .saydale-chat-hd-new, #saydale-screen-chat #saydale-chat-new { display: inline-flex !important; } /* Fix #14: suggestions bar — top border to separate from thread messages */ #saydale-screen-chat #saydale-suggestions-bar { border-top: 1px solid rgba(0,0,0,0.05) !important; } /* 10 — "Begin Assessment" button: text-link style matching mobile overlay */ #saydale-start-btn { background: none !important; border: none !important; box-shadow: none !important; color: #10847E !important; font-size: 13.5px !important; font-weight: 600 !important; width: auto !important; padding: 6px 0 !important; text-decoration: underline !important; text-decoration-color: #10847E !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; transform: none !important; } /* Fix #13: hover — color change, not just opacity */ #saydale-start-btn:hover { background: none !important; border-color: none !important; transform: none !important; color: #0c6b66 !important; text-decoration-color: #0c6b66 !important; opacity: 1 !important; } /* 11 — Send button: always a grey circle when disabled, teal when active. User wants a permanent visible arrow button (grey = no text, teal = text typed). */ .saydale-advisor-wrapper .saydale-chat-box .saydale-chat-send { width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; border-radius: 50% !important; align-self: center !important; background: #10847e !important; color: #ffffff !important; box-shadow: 0 2px 8px rgba(16, 132, 126, 0.2) !important; } /* Disabled = teal arrow, always visible, pointer-events none */ .saydale-advisor-wrapper .saydale-chat-box .saydale-chat-send:disabled { opacity: 1 !important; pointer-events: none !important; background: #10847e !important; color: #ffffff !important; box-shadow: 0 2px 8px rgba(16, 132, 126, 0.2) !important; transform: none !important; } /* Active = teal arrow */ .saydale-advisor-wrapper .saydale-chat-box .saydale-chat-send:not(:disabled) { background: #10847e !important; color: #ffffff !important; opacity: 1 !important; } /* 12 — Chat spark ✦: hidden — mobile overlay hides it (line 31). On /ai page the base CSS shows it absolutely positioned inside the box. */ .saydale-chat-spark { display: none !important; } /* 13 — Intro question: clamp font + left-align — matches mobile overlay. Mobile: font-size: clamp(20px,7vw,26px); text-align: left. Desktop base: fixed larger size, may be centered via flex parent. */ .saydale-intro-question { font-size: clamp(20px, 4vw, 26px) !important; /* 4vw = sensible on desktop */ text-align: left !important; } /* 14 — Suggestion bar chips: base styles for /ai page (overlay CSS is scoped). These have no advisor-v3.css base styles — only mobile-overlay-ui.css scoped rules. */ .saydale-bar-chip { display: inline-flex !important; align-items: center !important; flex-shrink: 0 !important; white-space: nowrap !important; font-family: 'Inter', -apple-system, sans-serif !important; font-size: 13px !important; font-weight: 400 !important; line-height: 1.3 !important; letter-spacing: 0 !important; text-transform: none !important; color: #1a2e2e !important; background: #ffffff !important; border: 1px solid #cfdede !important; border-radius: 100px !important; padding: 7px 14px !important; cursor: pointer !important; outline: none !important; box-shadow: none !important; -webkit-appearance: none !important; transition: background 0.14s, border-color 0.14s, color 0.14s !important; } .saydale-bar-chip:hover, .saydale-bar-chip:active { background: rgba(16,132,126,0.07) !important; border-color: rgba(16,132,126,0.40) !important; color: #10847E !important; } /* 15 — Disclaimer: match mobile overlay styling. Mobile: 10.5px, #B0B8C4, padding 5px 16px 8px. Desktop base: likely unstyled on /ai page. */ .saydale-chat-disclaimer { display: block !important; font-size: 10.5px !important; color: #B0B8C4 !important; text-align: center !important; line-height: 1.45 !important; padding: 5px 16px 8px !important; margin: 0 !important; font-weight: 400 !important; letter-spacing: 0 !important; } /* 16 — Intro note: tighter margin + matching color */ .saydale-intro-note { margin-top: 6px !important; color: #9CA3AF !important; } /* Fix #17: unify header height variables — alias old --saydale-header-h to new --saydale-above-fold */ :root { --saydale-header-h: var(--saydale-above-fold, 130px); } /* Fix #9: submit button — teal to match theme, not yellow */ .saydale-btn--submit { background: var(--saydale-teal, #10847E) !important; color: #ffffff !important; box-shadow: 0 4px 18px rgba(16,132,126,0.35) !important; } .saydale-btn--submit:hover:not(:disabled) { background: #0d7a74 !important; box-shadow: 0 8px 24px rgba(16,132,126,0.45) !important; } /* Chat box in intro: inset margin */ #saydale-screen-intro .saydale-chat-box { margin: 10px 0 6px !important; } /* Chat input box: remove the visible teal-grey border on desktop. Replace with a very subtle shadow ring so it looks clean/borderless. Focus state keeps the teal ring for accessibility. */ .saydale-chat-box { border: 1px solid rgba(0,0,0,0.08) !important; /* barely visible */ box-shadow: 0 1px 6px rgba(0,0,0,0.06) !important; } .saydale-chat-box:focus-within { border-color: rgba(16,132,126,0.5) !important; box-shadow: 0 0 0 3px rgba(16,132,126,0.1), 0 2px 12px rgba(16,132,126,0.08) !important; } /* 17 — Loading screen: centered within the flex shell. Height inherited from wrapper — no per-screen viewport calc needed. */ .saydale-screen--loading.saydale-screen--active { /* inherits flex column + flex:1 from .saydale-screen--active */ align-items: center !important; justify-content: center !important; background: #ffffff !important; } /* 18 — Quiz concern grid: auto-fill on desktop so no empty ghost slots. Base: repeat(3,1fr) always creates 3 columns even if items don't fill the row, leaving visible empty bordered boxes in the last row. auto-fill + minmax lets items fill naturally — no empty spaces. */ .saydale-concern-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important; } /* Hide any genuinely empty check-card elements (no input child) */ .saydale-check-card:empty, .saydale-concern-grid .saydale-check-card:not(:has(input)) { display: none !important; } /* ══════════════════════════════════════════════════════════════ DESKTOP CHAT UI REDESIGN v2 Polished, connected, pharmacy-appropriate chat experience. All rules scoped to desktop breakpoint (already inside media query). ══════════════════════════════════════════════════════════════ */ /* ── R1: Chat Screen — white card feel with max-width centering ── */ .saydale-screen--chat.saydale-screen--active { background: #f5f7f7 !important; } /* ── R2: Chat Header — stronger, with branded pill ── */ #saydale-screen-chat .saydale-chat-hd { background: #ffffff !important; border-bottom: 1px solid rgba(0,0,0,0.07) !important; box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 2px 12px rgba(0,0,0,0.05) !important; padding: 10px 24px !important; min-height: 58px !important; align-items: center !important; } /* AI identity badge — pill containing logo + name + subtitle as a unit */ #saydale-screen-chat .saydale-chat-hd-brand { display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; flex: 1 !important; background: transparent !important; } /* Identity pill — subtle teal-tinted background */ #saydale-screen-chat .saydale-chat-hd-icon { width: 40px !important; height: 40px !important; border-radius: 50% !important; background: linear-gradient(135deg, rgba(16,132,126,0.10), rgba(16,132,126,0.05)) !important; border: 1.5px solid rgba(16,132,126,0.15) !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; flex-shrink: 0 !important; } #saydale-screen-chat .saydale-chat-hd-icon img { width: 26px !important; height: 26px !important; object-fit: contain !important; } /* Name: strong and on-brand */ #saydale-screen-chat .saydale-chat-hd-name { font-size: 20px !important; font-weight: 600 !important; color: #0f2424 !important; margin: 0 !important; line-height: 1.2 !important; letter-spacing: -0.01em !important; } /* Subtitle: clear and readable */ /* ── R3: Online status dot on header ── */ #saydale-screen-chat .saydale-chat-hd-brand::after { display: none !important; /* No dot — keep it clean */ } /* ── R4: Back button — subtle, consistent ── */ #saydale-screen-chat .saydale-chat-hd-back { background: rgba(16,132,126,0.06) !important; color: #10847e !important; border-radius: 100px !important; font-size: 13px !important; font-weight: 500 !important; padding: 7px 14px 7px 10px !important; border: 1px solid rgba(16,132,126,0.12) !important; min-width: 72px !important; flex: 0 0 72px !important; transition: background 0.15s, border-color 0.15s, transform 0.12s !important; } #saydale-screen-chat .saydale-chat-hd-back:hover { background: rgba(16,132,126,0.12) !important; border-color: rgba(16,132,126,0.25) !important; transform: translateX(-2px) !important; } /* ── R5: Thread — centered, breathing room, no excess gap ── */ .saydale-screen--chat.saydale-screen--active .saydale-chat-thread { max-width: 100% !important; width: 100% !important; margin: 0 !important; padding: 28px 0 16px !important; background: transparent !important; gap: 0 !important; } .saydale-screen--chat.saydale-screen--active .saydale-chat-msg { max-width: 776px !important; margin: 0 auto !important; width: 100% !important; box-sizing: border-box !important; padding-left: 32px !important; padding-right: 32px !important; } /* ── R6: AI messages — grouped avatar (first only), better bubbles ── */ /* Show avatar on every AI message (it's rendered per-message in JS) */ .saydale-chat-msg--ai .saydale-chat-avatar { width: 34px !important; height: 34px !important; border-radius: 50% !important; background: transparent !important; box-shadow: none !important; flex-shrink: 0 !important; margin-top: 1px !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* Hide the avatar on consecutive AI messages — CSS-only grouping. The JS always outputs an avatar per message. We use adjacent sibling: if an AI message immediately follows another AI message, hide its avatar and add indent instead (via margin). */ .saydale-chat-msg--ai + .saydale-chat-msg--ai .saydale-chat-avatar { visibility: hidden !important; } /* Consecutive AI message has smaller gap above */ .saydale-chat-msg--ai { margin-bottom: 10px !important; align-items: flex-start !important; } .saydale-chat-msg--ai + .saydale-chat-msg--ai { margin-top: -4px !important; /* tighten consecutive messages */ } /* ── R7: AI bubble — clear contrast, readable, not flat ── */ .saydale-chat-bubble--ai { background: #ffffff !important; border: 1px solid #e2eded !important; border-radius: 4px 16px 16px 16px !important; padding: 13px 17px !important; font-size: 14.5px !important; color: #1a2e2e !important; line-height: 1.65 !important; max-width: calc(100% - 44px) !important; box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04) !important; font-weight: 400 !important; letter-spacing: 0 !important; } /* Consecutive AI bubbles: slightly tighter top radius to imply continuation */ .saydale-chat-msg--ai + .saydale-chat-msg--ai .saydale-chat-bubble--ai { border-radius: 4px 14px 14px 14px !important; } .saydale-chat-msg--user { margin-bottom: 10px !important; } .saydale-chat-bubble--user { background: linear-gradient(135deg, #10847e, #0d9488) !important; border-radius: 16px 4px 16px 16px !important; padding: 12px 17px !important; font-size: 14px !important; color: #ffffff !important; line-height: 1.6 !important; max-width: 62% !important; box-shadow: 0 2px 8px rgba(16,132,126,0.25) !important; font-weight: 400 !important; } .saydale-chat-bubble--user-image { max-width: 62% !important; border-radius: 16px 4px 16px 16px !important; overflow: hidden !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12) !important; } .saydale-chat-bubble--user-image img { width: 100% !important; display: block !important; border-radius: inherit !important; } .saydale-chat-typing { margin-bottom: 12px !important; } .saydale-typing-dots { background: #ffffff !important; border: 1px solid #e2eded !important; border-radius: 4px 16px 16px 16px !important; padding: 13px 17px !important; box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important; } /* ── R10: Suggestions bar — connected to last message ── */ #saydale-screen-chat #saydale-suggestions-bar { max-width: 840px !important; margin: 0 auto !important; width: 100% !important; padding: 0 32px 10px !important; border-top: none !important; background: transparent !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; gap: 8px !important; } /* Primary chips row (direct answer chips) */ .saydale-chips-primary { display: flex !important; flex-wrap: wrap !important; gap: 7px !important; padding: 0 !important; margin: 0 !important; } /* Secondary chips row (follow-up action chips) */ .saydale-chips-secondary { display: flex !important; flex-wrap: wrap !important; gap: 7px !important; padding: 0 !important; margin: 0 !important; opacity: 0.85 !important; } /* Primary chip — bold, teal tinted, direct answer style */ .saydale-bar-chip--primary { font-size: 13px !important; font-weight: 600 !important; color: #10847e !important; background: rgba(16,132,126,0.07) !important; border: 1.5px solid rgba(16,132,126,0.25) !important; border-radius: 100px !important; padding: 7px 16px !important; cursor: pointer !important; transition: background 0.15s, border-color 0.15s, transform 0.12s, box-shadow 0.15s !important; font-family: 'Inter', -apple-system, sans-serif !important; white-space: nowrap !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; } .saydale-bar-chip--primary:hover { background: rgba(16,132,126,0.14) !important; border-color: rgba(16,132,126,0.45) !important; transform: translateY(-1px) !important; box-shadow: 0 3px 10px rgba(16,132,126,0.15) !important; color: #0b6b66 !important; } .saydale-bar-chip--primary:active { transform: scale(0.97) !important; transition-duration: 0.08s !important; } .saydale-bar-chip--primary:focus-visible { outline: 2px solid rgba(16,132,126,0.7) !important; outline-offset: 2px !important; } /* Primary chip selected state (can be toggled by JS adding class) */ .saydale-bar-chip--primary.saydale-chip--selected { background: #10847e !important; border-color: #10847e !important; color: #ffffff !important; } /* Secondary chip — quieter, neutral style */ .saydale-bar-chip--secondary { font-size: 12.5px !important; font-weight: 400 !important; color: #3d5c5c !important; background: #ffffff !important; border: 1px solid #ccdede !important; border-radius: 100px !important; padding: 6px 14px !important; cursor: pointer !important; transition: background 0.15s, border-color 0.15s, transform 0.12s !important; font-family: 'Inter', -apple-system, sans-serif !important; white-space: nowrap !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; } .saydale-bar-chip--secondary:hover { background: rgba(16,132,126,0.05) !important; border-color: rgba(16,132,126,0.35) !important; color: #10847e !important; transform: translateY(-1px) !important; } .saydale-bar-chip--secondary:focus-visible { outline: 2px solid rgba(16,132,126,0.5) !important; outline-offset: 2px !important; } /* Flat chips (standard, non-aging topics) */ .saydale-bar-chip:not(.saydale-bar-chip--primary):not(.saydale-bar-chip--secondary) { font-size: 13px !important; font-weight: 400 !important; color: #3d5c5c !important; background: #ffffff !important; border: 1px solid #d4e5e5 !important; border-radius: 100px !important; padding: 7px 15px !important; cursor: pointer !important; transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.12s !important; font-family: 'Inter', -apple-system, sans-serif !important; white-space: nowrap !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important; } .saydale-bar-chip:not(.saydale-bar-chip--primary):not(.saydale-bar-chip--secondary):hover { background: rgba(16,132,126,0.07) !important; border-color: rgba(16,132,126,0.35) !important; color: #10847e !important; transform: translateY(-1px) !important; } /* ── R11: Input bar — prominent, interactive, wider ── */ #saydale-screen-chat .saydale-chat-bar { padding: 12px 24px 14px !important; background: #ffffff !important; border-top: none !important; box-shadow: none !important; max-width: none !important; } #saydale-screen-chat .saydale-chat-bar-inner { max-width: 776px !important; margin: 0 auto !important; width: 100% !important; background: #ffffff !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; border-radius: 100px !important; padding: 10px 10px 10px 20px !important; transition: border-color 0.2s, box-shadow 0.2s, background 0.2s !important; min-height: 60px !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05), 0 2px 6px rgba(0, 0, 0, 0.02) !important; gap: 12px !important; } #saydale-screen-chat .saydale-chat-bar-inner:focus-within { border-color: #10847e !important; background: #ffffff !important; box-shadow: 0 0 0 3px rgba(16,132,126,0.12), 0 2px 12px rgba(16,132,126,0.08) !important; } #saydale-screen-chat .saydale-chat-bar-inner .saydale-chat-logo { display: flex !important; align-items: center !important; justify-content: center !important; width: 28px !important; height: 28px !important; flex-shrink: 0 !important; margin: 0 !important; } #saydale-screen-chat .saydale-chat-bar-inner .saydale-chat-main-input { background: transparent !important; border: none !important; outline: none !important; color: #1a2e2e !important; font-family: 'Inter', -apple-system, sans-serif !important; font-size: 16px !important; font-weight: 400 !important; flex: 1 !important; resize: none !important; padding: 0 !important; min-height: 24px !important; line-height: 1.5 !important; } /* Placeholder — much higher contrast */ #saydale-screen-chat .saydale-chat-bar-inner .saydale-chat-main-input::placeholder { color: #9ca3af !important; font-style: normal !important; opacity: 1 !important; } #saydale-screen-chat .saydale-chat-bar-inner .saydale-chat-main-input:focus::placeholder { color: #9ca3af !important; opacity: 1 !important; } /* ── R12: Send button — clear enabled/disabled distinction ── */ /* Disabled state — clearly inactive but visible */ #saydale-screen-chat .saydale-chat-bar-inner .saydale-chat-main-send:disabled { background: #10847e !important; color: #ffffff !important; box-shadow: 0 2px 8px rgba(16, 132, 126, 0.2) !important; cursor: default !important; transform: none !important; border-radius: 50% !important; opacity: 1 !important; pointer-events: none !important; } /* Enabled state — confident teal */ #saydale-screen-chat .saydale-chat-bar-inner .saydale-chat-main-send:not(:disabled) { background: #10847e !important; color: #ffffff !important; box-shadow: 0 2px 8px rgba(16,132,126,0.20) !important; border-radius: 50% !important; opacity: 1 !important; cursor: pointer !important; } #saydale-screen-chat .saydale-chat-bar-inner .saydale-chat-main-send:not(:disabled):hover { background: #0c7a74 !important; transform: scale(1.05) !important; box-shadow: 0 4px 14px rgba(16,132,126,0.38) !important; } #saydale-screen-chat .saydale-chat-bar-inner .saydale-chat-main-send:not(:disabled):active { transform: scale(0.95) !important; transition-duration: 0.08s !important; } #saydale-screen-chat .saydale-chat-bar-inner .saydale-chat-main-send:focus-visible { outline: 2px solid rgba(16,132,126,0.8) !important; outline-offset: 2px !important; } /* ── R13: Disclaimer — readable and subtle ── */ #saydale-screen-chat .saydale-chat-bar .saydale-chat-disclaimer { max-width: 840px !important; margin: 6px auto 0 !important; font-size: 11px !important; color: #8da8a8 !important; text-align: center !important; line-height: 1.5 !important; padding: 0 4px !important; font-weight: 400 !important; letter-spacing: 0 !important; } /* ── R14: Error message state ── */ .saydale-chat-bubble--ai.saydale-bubble--error { background: #fff8f8 !important; border-color: #f8d7d7 !important; color: #8b3030 !important; } /* ── R15: Typing indicator dots — match bubble style ── */ .saydale-chat-typing .saydale-typing-dots span { background: #10847e !important; opacity: 0.3 !important; } /* ══════════════════════════════════════════════════════════════ DESKTOP CHAT UI — FINAL REFINEMENTS v3 Aligns Back / Brand / New chat to same 840px column as content. Shows the "New chat" button. Improves header hierarchy. ══════════════════════════════════════════════════════════════ */ /* ── Constrain header to the 840px content column ── */ #saydale-screen-chat .saydale-chat-hd { position: sticky !important; top: 0 !important; z-index: 10 !important; background: #ffffff !important; padding-left: max(16px, calc(50% - 420px)) !important; padding-right: max(16px, calc(50% - 420px)) !important; padding-top: 20px !important; padding-bottom: 14px !important; justify-content: space-between !important; gap: 12px !important; border-bottom: 1px solid rgba(0,0,0,0.06) !important; box-shadow: 0 1px 8px rgba(0,0,0,0.04) !important; } /* Brand unit sits in center of the flex row */ #saydale-screen-chat .saydale-chat-hd-brand { flex: 1 !important; justify-content: center !important; gap: 10px !important; } /* Back button: fixed width so brand stays centered */ #saydale-screen-chat .saydale-chat-hd-back { flex: 0 0 auto !important; min-width: 72px !important; white-space: nowrap !important; } /* New chat button — now visible; mirror Back button proportions */ #saydale-screen-chat .saydale-chat-hd-new, #saydale-screen-chat #saydale-chat-new { display: inline-flex !important; align-items: center !important; gap: 5px !important; flex: 0 0 auto !important; min-width: 80px !important; white-space: nowrap !important; background: rgba(16,132,126,0.06) !important; color: #10847e !important; border-radius: 100px !important; font-size: 13px !important; font-weight: 500 !important; padding: 7px 14px !important; border: 1px solid rgba(16,132,126,0.12) !important; cursor: pointer !important; transition: background 0.15s, border-color 0.15s !important; font-family: inherit !important; } #saydale-screen-chat .saydale-chat-hd-new:hover, #saydale-screen-chat #saydale-chat-new:hover { background: rgba(16,132,126,0.12) !important; border-color: rgba(16,132,126,0.28) !important; } /* Name: slightly larger, darker */ #saydale-screen-chat .saydale-chat-hd-name { font-size: 20px !important; font-weight: 600 !important; color: #0e2020 !important; letter-spacing: -0.02em !important; margin: 0 !important; line-height: 1.2 !important; } /* Subtitle: "Personalised skincare & wellness guidance" */ /* When AI is "Thinking..." the status label color changes */ #saydale-screen-chat #saydale-chat-status-label.saydale-status--thinking { color: #10847e !important; font-style: italic !important; } /* Suggestions bar — add subtle top border that visually connects chips to thread */ #saydale-screen-chat #saydale-suggestions-bar:not(:empty) { padding-top: 8px !important; } /* Primary chips — slightly larger on desktop for easy click targets */ .saydale-bar-chip--primary { padding: 8px 17px !important; font-size: 13px !important; } /* Secondary chips — de-emphasized but readable */ .saydale-bar-chip--secondary { padding: 6px 14px !important; font-size: 12.5px !important; } /* Selected chip — instant visual feedback before message sends */ .saydale-bar-chip.saydale-chip--selected, .saydale-bar-chip--primary.saydale-chip--selected, .saydale-bar-chip--secondary.saydale-chip--selected { background: #10847e !important; border-color: #10847e !important; color: #ffffff !important; transform: scale(0.96) !important; } /* Disclaimer — matches 840px centering, refined copy */ #saydale-screen-chat .saydale-chat-disclaimer { font-size: 11px !important; color: #96b4b4 !important; text-align: center !important; line-height: 1.5 !important; margin-top: 7px !important; letter-spacing: 0 !important; } /* Thread — threads, suggestions, and composer grid start flush */ #saydale-screen-chat .saydale-chat-thread, #saydale-screen-chat #saydale-suggestions-bar { margin-left: auto !important; margin-right: auto !important; } } /* end @media (min-width: 769px) */ /* ══════════════════════════════════════════════════════════════ MESSAGE ALIGNMENT — applies at all breakpoints Ensures user bubbles are right-aligned and AI bubbles left. ══════════════════════════════════════════════════════════════ */ /* AI message row: flex left with avatar gap */ .saydale-chat-msg.saydale-chat-msg--ai { display: flex !important; flex-direction: row !important; align-items: flex-start !important; gap: 8px !important; justify-content: flex-start !important; } /* User message row: push bubble to the right */ .saydale-chat-msg.saydale-chat-msg--user { display: flex !important; flex-direction: row !important; align-items: flex-end !important; justify-content: flex-end !important; } /* User bubble: cap width and remove any auto left margin */ .saydale-chat-bubble--user { margin-left: auto !important; } /* ── Broad action chips (when AI is NOT asking a question) ── These show after a factual AI response, as next-step shortcuts. Styled slightly differently from direct-answer chips. */ .saydale-chips-primary .saydale-bar-chip--primary { /* Direct answer chips: teal tinted */ background: rgba(16,132,126,0.07) !important; border-color: rgba(16,132,126,0.25) !important; color: #10847e !important; font-weight: 600 !important; } /* ── Merged preamble + question bubble ───────────────────────── When the AI sends a context sentence followed by a question, both appear in ONE bubble with clear visual hierarchy. */ /* Context (preamble) paragraph — subtle, smaller */ .saydale-chat-bubble--ai.saydale-bubble--merged .saydale-bubble-context { font-size: 13.5px; color: #5a7d7d; line-height: 1.55; margin: 0 0 10px 0; padding: 0; } /* Question paragraph — prominent, full weight */ .saydale-chat-bubble--ai.saydale-bubble--merged .saydale-bubble-question { font-size: 14.5px; color: #1a2e2e; font-weight: 500; line-height: 1.55; margin: 0; padding: 10px 0 0 0; border-top: 1px solid rgba(0,0,0,0.07); } /* ── Loading screen: center content (header is now shared, outside screen) ── */ .saydale-screen--loading .saydale-loading-content { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; } /* ── All screens: same Back + New Chat style as chat screen ─────────── */ #saydale-advisor .saydale-chat-hd-back, #saydale-advisor .saydale-hd-back-trigger { display: inline-flex !important; align-items: center !important; gap: 5px !important; flex: 0 0 auto !important; min-width: 72px !important; white-space: nowrap !important; background: rgba(16,132,126,0.06) !important; color: #10847e !important; border-radius: 100px !important; font-size: 13px !important; font-weight: 500 !important; padding: 7px 14px !important; border: 1px solid rgba(16,132,126,0.12) !important; cursor: pointer !important; transition: background 0.15s, border-color 0.15s !important; font-family: inherit !important; box-shadow: none !important; } #saydale-advisor .saydale-chat-hd-back:hover, #saydale-advisor .saydale-hd-back-trigger:hover { background: rgba(16,132,126,0.12) !important; border-color: rgba(16,132,126,0.28) !important; } #saydale-advisor .saydale-chat-hd-new, #saydale-advisor .saydale-hd-new-trigger { display: inline-flex !important; align-items: center !important; gap: 5px !important; flex: 0 0 auto !important; min-width: 80px !important; white-space: nowrap !important; background: rgba(16,132,126,0.06) !important; color: #10847e !important; border-radius: 100px !important; font-size: 13px !important; font-weight: 500 !important; padding: 7px 14px !important; border: 1px solid rgba(16,132,126,0.12) !important; cursor: pointer !important; transition: background 0.15s, border-color 0.15s !important; font-family: inherit !important; box-shadow: none !important; } #saydale-advisor .saydale-chat-hd-new:hover, #saydale-advisor .saydale-hd-new-trigger:hover { background: rgba(16,132,126,0.12) !important; border-color: rgba(16,132,126,0.28) !important; } /* Hide back/new chat button on intro screen — disabled to keep them persistent */ /* ── Shared header: flex child at top of wrapper (flex-shrink:0) ────── */ #saydale-shared-hd { display: flex !important; position: relative !important; z-index: 50 !important; width: 100% !important; max-width: none !important; background: #ffffff !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-bottom: 1px solid rgba(0,0,0,0.07) !important; box-shadow: 0 1px 6px rgba(0,0,0,0.05) !important; padding: 8px 16px !important; box-sizing: border-box !important; margin: 0 !important; flex-shrink: 0 !important; } /* ── Intro content: top breathing room now that header is flush ─────── */ #saydale-screen-intro .saydale-intro-inner { padding-top: 24px !important; } /* ── Strip Elementor container padding/height around the AI widget ────── */ .elementor-element-9658dc9, .elementor-element-9658dc9.e-con, .elementor-element-3d9ebfc, .elementor-element-3d9ebfc .elementor-widget-container { padding: 0 !important; margin: 0 !important; gap: 0 !important; min-height: 0 !important; height: auto !important; } /* ── Prevent Elementor from forcing container-widget-height on the wrapper ── */ .elementor-element-3d9ebfc { --container-widget-height: auto !important; } /* ═══════════════════════════════════════════════════════════════ SKIN SCAN — CTA ROW ══════════════════════════════════════════════════════════════ */ .saydale-cta-row { display: flex; flex-direction: row; align-items: stretch; gap: 10px; width: 100%; max-width: 580px; } /* Assessment button — pill shape, flex half-width */ .saydale-btn--assessment { background: #ffffff !important; border: 1.5px solid rgba(16,132,126,0.20) !important; border-radius: 100px !important; color: #10847E !important; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase !important; text-decoration: none !important; padding: 16px 28px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; transition: all 0.18s ease; white-space: nowrap; flex: 1 1 0; width: auto; box-shadow: 0 1px 4px rgba(0,0,0,0.04) !important; } .saydale-btn--assessment:hover { background: rgba(16,132,126,0.06) !important; border-color: #10847E !important; transform: translateY(-1px); } .saydale-btn--assessment:active { transform: scale(0.97); } /* ── SCAN MY SKIN — full-width white pill (matches assessment) ── */ .saydale-btn-scan { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; flex: 1 1 0 !important; width: auto !important; padding: 16px 28px !important; border: 1.5px solid rgba(16,132,126,0.20) !important; border-radius: 100px !important; cursor: pointer !important; background: #ffffff !important; color: #10847E !important; font-family: 'Inter', sans-serif !important; font-size: 14px !important; font-weight: 600 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; white-space: nowrap !important; box-shadow: 0 1px 4px rgba(0,0,0,0.04) !important; transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important; text-decoration: none !important; text-align: center !important; } .saydale-btn-scan:hover { background: rgba(16,132,126,0.12) !important; border-color: rgba(16,132,126,0.28) !important; } .saydale-btn-scan:active { transform: scale(0.97); transition-duration: 0.08s; } /* Camera icon — small inline */ .saydale-scan-icon-wrap { display: flex !important; align-items: center !important; justify-content: center !important; width: 24px !important; height: 24px !important; min-width: 24px !important; border-radius: 50% !important; background: transparent !important; box-shadow: none !important; flex-shrink: 0 !important; } .saydale-scan-icon { width: 18px !important; height: 18px !important; } /* Title — inherits font from parent .saydale-btn-scan */ .saydale-scan-label { font-family: inherit !important; font-size: inherit !important; font-weight: inherit !important; color: inherit !important; line-height: 1.2 !important; letter-spacing: inherit !important; text-transform: inherit !important; } /* Arrow circle — hidden for inline style */ .saydale-scan-arrow { display: none !important; } .saydale-scan-arrow svg { width: 18px !important; height: 18px !important; color: #ffffff !important; } .saydale-btn-scan:hover .saydale-scan-arrow { background: #0c6b66 !important; } /* Mobile: stack buttons vertically, assessment on top */ @media (max-width: 480px) { .saydale-cta-row { flex-direction: column; gap: 10px; width: 100%; } .saydale-btn--assessment { width: 100% !important; justify-content: center !important; padding: 14px 24px !important; border-radius: 100px !important; order: 1 !important; } .saydale-btn-scan { width: 100% !important; padding: 14px 24px !important; border-radius: 100px !important; order: 2 !important; } .saydale-scan-icon-wrap { width: 24px !important; height: 24px !important; min-width: 24px !important; } .saydale-scan-icon { width: 18px !important; height: 18px !important; } .saydale-scan-label { font-size: 13px !important; } .saydale-scan-arrow { display: none !important; } } /* ═══════════════════════════════════════════════════════════════ SKIN SCAN MODAL ══════════════════════════════════════════════════════════════ */ .saydale-scan-modal { /* HIDDEN: display:none removes it from touch entirely (pointer-events:none is unreliable on fixed full-screen overlays in iOS Safari / mobile Chrome) */ display: none; position: fixed; inset: 0; z-index: 999999; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.32s cubic-bezier(0.32,0,0.67,0); } /* Step 1 — show the container (still invisible, but in layout) */ .saydale-scan-modal.saydale-scan-modal--visible { display: flex; } /* Step 2 — animate in */ .saydale-scan-modal.saydale-scan-modal--open { display: flex; opacity: 1; transition: opacity 0.36s cubic-bezier(0.33,1,0.68,1); } /* Backdrop */ .saydale-scan-modal-backdrop { position: absolute; inset: 0; background: rgba(8,30,30,0.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* Panel */ .saydale-scan-modal-panel { position: relative; z-index: 1; width: min(480px, calc(100vw - 32px)); max-height: calc(100dvh - 60px); background: #ffffff; border-radius: 24px; box-shadow: 0 32px 80px rgba(0,0,0,0.28), 0 8px 24px rgba(16,132,126,0.15); overflow: hidden; display: flex; flex-direction: column; transform: scale(0.93) translateY(16px); transition: transform 0.36s cubic-bezier(0.33,1,0.68,1); will-change: transform; } .saydale-scan-modal--open .saydale-scan-modal-panel { transform: scale(1) translateY(0); } /* Close button */ .saydale-scan-close { position: absolute; top: 14px; right: 14px; z-index: 10; width: 34px; height: 34px; border-radius: 50%; border: none; background: rgba(26,46,46,0.08); color: #2d4a4a; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s ease, transform 0.15s ease; } .saydale-scan-close:hover { background: rgba(26,46,46,0.15); transform: scale(1.1); } /* States */ .saydale-scan-state { padding: 32px 28px 28px; display: flex; flex-direction: column; align-items: center; gap: 18px; animation: saydale-state-in 0.32s cubic-bezier(0.33,1,0.68,1) both; } @keyframes saydale-state-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .saydale-scan-state--hidden { display: none !important; } /* ── State 1: Preview ── */ .saydale-scan-preview-wrap { position: relative; width: 100%; max-width: 280px; border-radius: 18px; overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,0.18); flex-shrink: 0; } .saydale-scan-preview-img { width: 100%; display: block; aspect-ratio: 1; object-fit: cover; } /* Scan frame overlay */ .saydale-scan-preview-overlay { position: absolute; inset: 0; border: 2px solid rgba(16,132,126,0.5); border-radius: 18px; pointer-events: none; } /* Corner accents */ .saydale-scan-preview-overlay::before, .saydale-scan-preview-overlay::after { content: ''; position: absolute; width: 28px; height: 28px; border-color: #10847E; border-style: solid; } .saydale-scan-preview-overlay::before { top: -2px; left: -2px; border-width: 3px 0 0 3px; border-radius: 18px 0 0 0; } .saydale-scan-preview-overlay::after { bottom: -2px; right: -2px; border-width: 0 3px 3px 0; border-radius: 0 0 18px 0; } /* Laser scan line */ .saydale-scan-laser { position: absolute; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(16,132,126,0.8), rgba(255,182,61,0.9), rgba(16,132,126,0.8), transparent); animation: saydale-laser-scan 2s ease-in-out infinite; box-shadow: 0 0 8px rgba(16,132,126,0.6), 0 0 20px rgba(16,132,126,0.3); } @keyframes saydale-laser-scan { 0% { top: 0%; } 50% { top: calc(100% - 2px); } 100% { top: 0%; } } .saydale-scan-preview-info { text-align: center; } .saydale-scan-preview-info h3 { font-family: 'Inter', -apple-system, sans-serif; font-size: 18px; font-weight: 600; color: #1a2e2e; margin-bottom: 6px; letter-spacing: -0.3px; } .saydale-scan-preview-info p { font-size: 13.5px; color: #5a7a7a; line-height: 1.5; } /* ── Action buttons ── */ .saydale-scan-preview-actions { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 320px; } .saydale-scan-action-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 13px 24px; border-radius: 100px; border: none; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; width: 100%; } .saydale-scan-action-btn--primary { background: linear-gradient(135deg, #0c6b66, #10847E, #13a89f); color: #ffffff; box-shadow: 0 4px 16px rgba(16,132,126,0.35); } .saydale-scan-action-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(16,132,126,0.45); } .saydale-scan-action-btn--glow { background: linear-gradient(135deg, #0c6b66 0%, #10847E 50%, #13a89f 100%); box-shadow: 0 4px 20px rgba(16,132,126,0.45), 0 0 40px rgba(16,132,126,0.2); animation: saydale-btn-glow 2.5s ease-in-out infinite; } @keyframes saydale-btn-glow { 0%, 100% { box-shadow: 0 4px 20px rgba(16,132,126,0.45), 0 0 30px rgba(16,132,126,0.15); } 50% { box-shadow: 0 6px 28px rgba(16,132,126,0.60), 0 0 50px rgba(16,132,126,0.30); } } .saydale-scan-action-btn--secondary { background: rgba(16,132,126,0.08); color: #10847E; border: 1.5px solid rgba(16,132,126,0.2); } .saydale-scan-action-btn--secondary:hover { background: rgba(16,132,126,0.14); border-color: rgba(16,132,126,0.35); } .saydale-scan-action-btn:active { transform: scale(0.97); } /* ── State 2: Scanning ── */ .saydale-scan-orb-wrap { position: relative; width: 140px; height: 140px; display: flex; align-items: center; justify-content: center; } .saydale-scan-orb { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } /* Pulsing background glow */ .saydale-scan-orb-pulse { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(16,132,126,0.25) 0%, transparent 70%); animation: saydale-orb-pulse 1.8s ease-in-out infinite; } @keyframes saydale-orb-pulse { 0%, 100% { transform: scale(1); opacity: 0.6; } 50% { transform: scale(1.15); opacity: 1; } } /* Rotating rings */ .saydale-scan-orb-ring { position: absolute; border-radius: 50%; border: 2px solid transparent; } .saydale-scan-orb-ring--1 { inset: 10px; border-color: rgba(16,132,126,0.5) rgba(16,132,126,0.1) rgba(16,132,126,0.1) rgba(16,132,126,0.5); animation: saydale-ring-cw 1.6s linear infinite; } .saydale-scan-orb-ring--2 { inset: 22px; border-color: rgba(255,182,61,0.6) rgba(255,182,61,0.1) rgba(255,182,61,0.1) rgba(255,182,61,0.6); animation: saydale-ring-ccw 1.2s linear infinite; } .saydale-scan-orb-ring--3 { inset: 36px; border-color: rgba(16,132,126,0.35) transparent transparent rgba(16,132,126,0.35); animation: saydale-ring-cw 2s linear infinite; } @keyframes saydale-ring-cw { to { transform: rotate(360deg); } } @keyframes saydale-ring-ccw { to { transform: rotate(-360deg); } } /* Core icon circle */ .saydale-scan-orb-core { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, #0c6b66, #13a89f); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(16,132,126,0.5); animation: saydale-orb-core-breathe 2s ease-in-out infinite; } @keyframes saydale-orb-core-breathe { 0%, 100% { transform: scale(1); box-shadow: 0 4px 20px rgba(16,132,126,0.5); } 50% { transform: scale(1.07); box-shadow: 0 6px 28px rgba(16,132,126,0.7); } } .saydale-scan-scanning-label { font-family: 'Inter', -apple-system, sans-serif; font-size: 20px; font-weight: 600; color: #1a2e2e; margin: 0; letter-spacing: -0.3px; } .saydale-scan-scanning-sub { font-size: 13px; color: #8aabab; margin: 0; transition: opacity 0.3s ease; min-height: 1.5em; } /* Progress bar */ .saydale-scan-progress-bar { width: 100%; max-width: 280px; height: 4px; background: rgba(16,132,126,0.12); border-radius: 100px; overflow: hidden; } .saydale-scan-progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #10847E, #13a89f, #ffb63d); border-radius: 100px; transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1); background-size: 200% 100%; animation: saydale-progress-shimmer 1.5s linear infinite; } @keyframes saydale-progress-shimmer { 0% { background-position: 200% 50%; } 100% { background-position: 0% 50%; } } /* ── State 3: Results ── */ .saydale-scan-results-header { text-align: center; padding-top: 4px; } .saydale-scan-results-icon { font-size: 28px; color: #10847E; margin-bottom: 8px; display: inline-block; animation: saydale-results-pop 0.5s cubic-bezier(0.34,1.56,0.64,1) both; } @keyframes saydale-results-pop { from { opacity: 0; transform: scale(0.5) rotate(-20deg); } to { opacity: 1; transform: scale(1) rotate(0deg); } } .saydale-scan-results-title { font-family: 'Inter', -apple-system, sans-serif; font-size: 20px; font-weight: 600; color: #1a2e2e; letter-spacing: -0.4px; margin-bottom: 3px; } .saydale-scan-results-sub { font-size: 12px; color: #8aabab; font-weight: 500; letter-spacing: 0.03em; } /* Results chip row */ .saydale-scan-chips-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; width: 100%; } .saydale-scan-chip { display: inline-flex; align-items: center; gap: 5px; padding: 6px 13px; border-radius: 100px; font-size: 12px; font-weight: 600; letter-spacing: 0.01em; animation: saydale-chip-in 0.4s cubic-bezier(0.34,1.56,0.64,1) both; } .saydale-scan-chip--type { background: rgba(16,132,126,0.1); border: 1.5px solid rgba(16,132,126,0.25); color: #10847E; } .saydale-scan-chip--concern { background: rgba(255,182,61,0.1); border: 1.5px solid rgba(255,182,61,0.35); color: #c47d00; } .saydale-scan-chip--positive { background: rgba(34,197,94,0.08); border: 1.5px solid rgba(34,197,94,0.25); color: #15803d; } @keyframes saydale-chip-in { from { opacity: 0; transform: scale(0.8) translateY(4px); } to { opacity: 1; transform: scale(1) translateY(0); } } .saydale-scan-chip:nth-child(1) { animation-delay: 0.05s; } .saydale-scan-chip:nth-child(2) { animation-delay: 0.10s; } .saydale-scan-chip:nth-child(3) { animation-delay: 0.15s; } .saydale-scan-chip:nth-child(4) { animation-delay: 0.20s; } .saydale-scan-chip:nth-child(5) { animation-delay: 0.25s; } /* Results body */ .saydale-scan-results-body { width: 100%; background: #f5f9f9; border-radius: 14px; padding: 16px 18px; font-size: 13.5px; color: #2d4a4a; line-height: 1.65; border: 1px solid rgba(16,132,126,0.1); max-height: 180px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #dde8e9 transparent; } .saydale-scan-results-body p { margin: 0 0 8px; } .saydale-scan-results-body p:last-child { margin-bottom: 0; } .saydale-scan-results-body strong { color: #10847E; } .saydale-scan-results-actions { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 320px; padding-bottom: 4px; } /* ── State 4: Error ── */ .saydale-scan-error-icon { font-size: 40px; margin: 0; } .saydale-scan-state#saydale-scan-state-error h3 { font-family: 'Inter', -apple-system, sans-serif; font-size: 18px; font-weight: 600; color: #1a2e2e; text-align: center; margin: 0; } .saydale-scan-state#saydale-scan-state-error p { font-size: 13.5px; color: #5a7a7a; text-align: center; margin: 0; } /* ═══════════════════════════════════════════════════════════════ MOBILE OVERLAY STYLES Fullscreen overlay experience — loaded on all non-AI pages. Strategy: double-ID selectors beat main CSS !important rules. ═══════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════ SAYDALE MOBILE OVERLAY — merged into saydale.css Mobile overlay experience — fullscreen app launched from nav bar Strategy: double-ID selectors beat advisor-v3.css !important rules ═══════════════════════════════════════════════════════════════════ */ /* ── Pointer events ── */ #saydale-mobile-overlay:not(.saydale-overlay--open) *, #saydale-mobile-overlay.saydale-overlay--closing * { pointer-events: none !important; } #saydale-mobile-overlay.saydale-overlay--open * { pointer-events: auto; } /* ── Bulletproof tap targets: no 300ms delay, no highlight flicker ── */ #saydale-mobile-overlay button, #saydale-mobile-overlay a, #saydale-mobile-overlay [role="button"], #saydale-mobile-overlay label, #saydale-mobile-overlay .saydale-chip, #saydale-mobile-overlay .saydale-pill, #saydale-mobile-overlay .saydale-category-card, #saydale-mobile-overlay .saydale-skin-card, #saydale-mobile-overlay .saydale-check-card, #saydale-mobile-overlay .saydale-bar-chip { touch-action: manipulation !important; -webkit-tap-highlight-color: transparent !important; user-select: none !important; -webkit-user-select: none !important; } /* ── Spark icons — HIDE everything inside overlay ── */ #saydale-mobile-overlay .mobnav-spark, #saydale-mobile-overlay .saydale-chat-spark { display: none !important; } /* ── Direct hide for mobnav-spark SVG only (core stays white) ── */ #mobnav-spark { display: none !important; visibility: hidden !important; } /* Keep #mobnav-ring-core white — only the SVG star inside is hidden */ /* ═══════════════════════════════════════════════════════════════════ OVERLAY CONTAINER ═══════════════════════════════════════════════════════════════════ */ #saydale-mobile-overlay { display: flex !important; flex-direction: column !important; position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; height: 100% !important; height: 100dvh !important; z-index: 100000 !important; background: #F9FAFB !important; opacity: 0; pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease !important; transform: translateY(16px); font-family: -apple-system, 'Inter', 'Helvetica Neue', sans-serif !important; } #saydale-mobile-overlay.saydale-overlay--open { opacity: 1 !important; pointer-events: auto !important; transform: translateY(0) !important; } /* ═══════════════════════════════════════════════════════════════════ APP BAR (top) — fix #4, #12 ═══════════════════════════════════════════════════════════════════ */ #saydale-app-bar { position: relative !important; flex-shrink: 0 !important; z-index: 200 !important; height: calc(52px + env(safe-area-inset-top, 0px)) !important; padding-top: env(safe-area-inset-top, 0px) !important; padding-left: 0 !important; padding-right: 8px !important; display: flex !important; align-items: center !important; background: rgba(249,250,251,0.96) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; border-bottom: 1px solid rgba(0,0,0,0.07) !important; } /* ── Back & Close shared base ── */ #saydale-app-back, #saydale-app-close { display: flex !important; align-items: center !important; justify-content: center !important; background: none !important; border: none !important; cursor: pointer !important; flex-shrink: 0 !important; -webkit-tap-highlight-color: transparent !important; touch-action: manipulation !important; } /* ── Back button: full-height pill, wide tap zone ── */ #saydale-app-back { /* Stretch to full bar height minus safe-area padding */ align-self: stretch !important; height: 100% !important; /* Wide enough to tap comfortably */ padding: 0 14px 0 8px !important; margin-left: 0 !important; border-radius: 0 100px 100px 0 !important; gap: 4px !important; color: #10847E !important; font-size: 15px !important; font-weight: 600 !important; letter-spacing: -0.01em !important; min-width: 72px !important; } #saydale-app-back span { font-family: -apple-system, 'Inter', sans-serif !important; font-size: 15px !important; font-weight: 600 !important; color: inherit !important; line-height: 1 !important; display: block !important; } #saydale-app-back svg { flex-shrink: 0 !important; display: block !important; } #saydale-app-back:active { background: rgba(16,132,126,0.1) !important; } /* ── Close button: mirrors Back — full-height pill on the right ── */ #saydale-app-close { align-self: stretch !important; height: 100% !important; padding: 0 8px 0 14px !important; margin-right: 0 !important; border-radius: 100px 0 0 100px !important; gap: 4px !important; color: #6B7280 !important; font-size: 15px !important; font-weight: 600 !important; letter-spacing: -0.01em !important; min-width: 72px !important; } #saydale-app-close span { font-family: -apple-system, 'Inter', sans-serif !important; font-size: 15px !important; font-weight: 600 !important; color: inherit !important; line-height: 1 !important; display: block !important; } #saydale-app-close svg { flex-shrink: 0 !important; display: block !important; } #saydale-app-close:active { background: rgba(0,0,0,0.07) !important; color: #111827 !important; } /* Back button always visible — contextual action handled by JS */ #saydale-app-back { display: flex !important; pointer-events: auto !important; color: #10847E !important; } /* On chat screen: teal (back to intro). On all other screens: grey (close overlay) */ #saydale-mobile-overlay:not(:has(#saydale-screen-chat.saydale-screen--active)) #saydale-app-back { color: #6B7280 !important; } #saydale-app-title { flex: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; font-size: 17px !important; font-weight: 600 !important; color: #10847e !important; letter-spacing: -0.01em !important; font-family: -apple-system, 'Inter', sans-serif !important; } #saydale-app-title svg { display: none !important; } /* ═══════════════════════════════════════════════════════════════════ ADVISOR WRAPPER — flex column container, screens are flex items ═══════════════════════════════════════════════════════════════════ */ #saydale-mobile-overlay .saydale-advisor-wrapper { position: relative !important; flex: 1 1 0 !important; min-height: 0 !important; display: flex !important; /* wrapper is a flex column */ flex-direction: column !important; /* screens stack vertically inside */ width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; background: #F9FAFB !important; overflow: hidden !important; border-radius: 0 !important; z-index: 1 !important; box-sizing: border-box !important; } #saydale-mobile-overlay .saydale-preloader { display: none !important; } #saydale-mobile-overlay .saydale-bg-floor { background: #F9FAFB !important; } /* Hide shared desktop header inside mobile overlay — #saydale-app-bar is used instead */ #saydale-mobile-overlay #saydale-shared-hd { display: none !important; } /* ═══════════════════════════════════════════════════════════════════ INTRO SCREEN — flex item in wrapper column ═══════════════════════════════════════════════════════════════════ */ #saydale-mobile-overlay #saydale-screen-intro { display: flex !important; flex-direction: column !important; position: relative !important; /* flex item, NOT absolute */ inset: auto !important; flex: 1 1 0 !important; min-height: 0 !important; width: 100% !important; box-sizing: border-box !important; background: #F9FAFB !important; padding: 0 !important; overflow: hidden !important; } /* CRITICAL: hide inactive screens — our display:flex !important was overriding the base plugin’s display:none, causing both screens to render simultaneously */ #saydale-mobile-overlay #saydale-screen-intro:not(.saydale-screen--active), #saydale-mobile-overlay #saydale-screen-chat:not(.saydale-screen--active) { display: none !important; flex: 0 0 0 !important; } #saydale-mobile-overlay .saydale-intro-inner { display: flex !important; flex-direction: column !important; align-items: center !important; flex: 1 !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; padding: 0 !important; text-align: center !important; max-width: 100% !important; margin: 0 !important; min-height: 0 !important; } /* Side padding to all children except the dock */ #saydale-mobile-overlay .saydale-intro-inner > *:not(.saydale-chat-wrap) { padding-left: 20px !important; padding-right: 20px !important; box-sizing: border-box !important; } /* Gradient pseudo-elements — not needed, overlay has its own bg */ #saydale-mobile-overlay .saydale-screen--intro::before, #saydale-mobile-overlay .saydale-screen--intro::after { display: none !important; } /* Greeting — hide on mobile overlay */ #saydale-mobile-overlay .saydale-greeting { display: none !important; } /* Headline */ #saydale-mobile-overlay .saydale-intro-question { font-size: clamp(22px, 5.5vw, 28px) !important; font-weight: 500 !important; color: #10847E !important; letter-spacing: -0.02em !important; line-height: 1.22 !important; margin: auto 0 20px 0 !important; text-align: center !important; } /* Chips — 3-column grid */ #saydale-mobile-overlay .saydale-concern-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; justify-content: center !important; margin-bottom: 16px !important; flex-shrink: 0 !important; max-width: 100% !important; width: 100% !important; } #saydale-mobile-overlay .saydale-concern-chip { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 6px !important; padding: 14px 4px 12px !important; border-radius: 14px !important; font-size: 12px !important; font-weight: 500 !important; color: #10847E !important; background: rgba(255,255,255,0.85) !important; border: 1px solid rgba(16,132,126,0.15) !important; box-shadow: none !important; cursor: pointer !important; -webkit-tap-highlight-color: transparent !important; text-transform: none !important; text-align: center !important; line-height: 1.2 !important; } #saydale-mobile-overlay .saydale-concern-chip:active { background: #F0FDFA !important; } #saydale-mobile-overlay .saydale-concern-chip-icon svg { width: 22px !important; height: 22px !important; } /* OR divider */ #saydale-mobile-overlay .saydale-intro-divider { display: block !important; font-size: 10px !important; color: #B0B8C1 !important; text-align: center !important; font-weight: 500 !important; text-transform: uppercase !important; margin: 0 0 12px !important; letter-spacing: 0.05em !important; } /* CTA wrapper */ #saydale-mobile-overlay .saydale-intro-cta { display: flex !important; flex-direction: column !important; align-items: center !important; padding-left: 20px !important; padding-right: 20px !important; box-sizing: border-box !important; width: 100% !important; } /* CTA row — stacked vertically on mobile */ #saydale-mobile-overlay .saydale-cta-row { display: flex !important; flex-direction: column !important; gap: 10px !important; width: 100% !important; margin-bottom: 16px !important; } /* BEGIN ASSESSMENT — primary position on mobile (top) */ #saydale-mobile-overlay #saydale-start-btn { background: transparent !important; border: 1.5px solid rgba(16,132,126,0.25) !important; box-shadow: none !important; color: #10847E !important; font-size: 13px !important; font-weight: 600 !important; width: 100% !important; padding: 14px 24px !important; height: 50px !important; text-decoration: none !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; border-radius: 100px !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; box-sizing: border-box !important; order: 1 !important; } /* SCAN YOUR SKIN — secondary position on mobile (bottom) */ #saydale-mobile-overlay .saydale-btn-scan { background: linear-gradient(135deg, #10847E 0%, #0fa89f 100%) !important; border: none !important; box-shadow: 0 2px 8px rgba(16,132,126,0.25) !important; color: #ffffff !important; font-size: 13px !important; font-weight: 600 !important; width: 100% !important; padding: 14px 24px !important; height: 50px !important; text-decoration: none !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; border-radius: 100px !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; box-sizing: border-box !important; cursor: pointer !important; order: 2 !important; } #saydale-mobile-overlay .saydale-btn-scan .saydale-scan-icon-wrap { display: flex !important; align-items: center !important; } #saydale-mobile-overlay .saydale-btn-scan .saydale-scan-icon { width: 20px !important; height: 20px !important; } #saydale-mobile-overlay .saydale-btn-scan .saydale-scan-icon rect, #saydale-mobile-overlay .saydale-btn-scan .saydale-scan-icon circle:not(:last-of-type), #saydale-mobile-overlay .saydale-btn-scan .saydale-scan-icon rect:last-of-type { stroke: #ffffff !important; } #saydale-mobile-overlay .saydale-btn-scan .saydale-scan-label { font-size: 13px !important; font-weight: 600 !important; color: #ffffff !important; letter-spacing: 0.04em !important; } #saydale-mobile-overlay .saydale-btn-scan .saydale-scan-arrow { display: none !important; } #saydale-mobile-overlay .saydale-intro-note { display: block !important; font-size: 10px !important; color: #B0B8C1 !important; margin-top: auto !important; text-align: center !important; padding: 8px 0 max(8px, env(safe-area-inset-bottom)) !important; } /* ═══════════════════════════════════════════════════════════════════ INTRO COMPOSER DOCK (white, sticky bottom) ═══════════════════════════════════════════════════════════════════ */ #saydale-mobile-overlay #saydale-screen-intro .saydale-chat-wrap { flex-shrink: 0 !important; margin-top: auto !important; width: 100% !important; max-width: 100% !important; padding: 0 !important; align-self: stretch !important; box-sizing: border-box !important; background: #F9FAFB !important; border-radius: 24px 24px 0 0 !important; border-top: 1px solid rgba(0,0,0,0.05) !important; box-shadow: 0 -4px 12px rgba(0,0,0,0.04) !important; overflow: hidden !important; z-index: 10 !important; } /* Suggestions strip */ #saydale-mobile-overlay #saydale-screen-intro .saydale-chat-messages { display: flex !important; align-items: center !important; gap: 8px !important; padding: 12px 16px 4px !important; min-height: 50px !important; overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: none !important; -ms-overflow-style: none !important; } #saydale-mobile-overlay #saydale-screen-intro .saydale-chat-messages::-webkit-scrollbar { display: none !important; } #saydale-mobile-overlay #saydale-screen-intro .saydale-chat-messages:empty { min-height: 6px !important; padding: 0 !important; } /* Input row in intro */ #saydale-mobile-overlay .saydale-chat-box { display: flex !important; align-items: center !important; border-radius: 100px !important; padding: 10px 10px 10px 20px !important; margin: 10px 16px 6px !important; background: #ffffff !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05), 0 2px 6px rgba(0, 0, 0, 0.02) !important; gap: 12px !important; } #saydale-mobile-overlay .saydale-chat-box:focus-within { border-color: #10847E !important; box-shadow: 0 0 0 3px rgba(16,132,126,0.1) !important; } #saydale-mobile-overlay .saydale-chat-box .saydale-chat-logo { display: flex !important; align-items: center !important; justify-content: center !important; width: 28px !important; height: 28px !important; flex-shrink: 0 !important; margin: 0 !important; } /* Intro textarea */ #saydale-mobile-overlay #saydale-chat-input { flex: 1 !important; background: transparent !important; border: none !important; outline: none !important; font-size: 16px !important; font-family: -apple-system, 'Inter', sans-serif !important; color: #1a2e2e !important; line-height: 1.5 !important; resize: none !important; padding: 0 !important; min-height: 26px !important; max-height: 140px !important; -webkit-appearance: none !important; } #saydale-mobile-overlay #saydale-chat-input:focus { background: transparent !important; outline: none !important; box-shadow: none !important; } #saydale-mobile-overlay #saydale-chat-input::placeholder { color: #9CA3AF !important; } /* Intro send button — visible by default; hidden only when disabled */ #saydale-mobile-overlay #saydale-chat-send { width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; aspect-ratio: 1 / 1 !important; border-radius: 50% !important; background: #10847E !important; border: none !important; color: #ffffff !important; flex-shrink: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 2px 8px rgba(16,132,126,0.2) !important; cursor: pointer !important; -webkit-tap-highlight-color: transparent !important; touch-action: manipulation !important; transition: transform 0.1s, opacity 0.2s !important; align-self: center !important; opacity: 1 !important; pointer-events: auto !important; } #saydale-mobile-overlay #saydale-chat-send svg { width: 16px !important; height: 16px !important; transform: none !important; } #saydale-mobile-overlay #saydale-chat-send:active { transform: scale(0.88) !important; } #saydale-mobile-overlay #saydale-chat-send:disabled { opacity: 0 !important; pointer-events: none !important; cursor: default !important; } /* ═══════════════════════════════════════════════════════════════════ CHAT SCREEN — structural layout fix ═══════════════════════════════════════════════════════════════════ */ /* Chat screen: flex item in the wrapper column — starts AFTER app bar, guaranteed */ #saydale-mobile-overlay #saydale-screen-chat { background: #F9FAFB !important; display: flex !important; flex-direction: column !important; position: relative !important; /* flex item, NOT absolute — no overlap with app bar */ inset: auto !important; flex: 1 1 0 !important; min-height: 0 !important; width: 100% !important; overflow: hidden !important; box-sizing: border-box !important; } /* Internal chat header: detached via JS, but belt+suspenders CSS nuke */ #saydale-mobile-overlay #saydale-screen-chat .saydale-chat-hd { display: none !important; height: 0 !important; min-height: 0 !important; max-height: 0 !important; overflow: hidden !important; padding: 0 !important; margin: 0 !important; border: none !important; opacity: 0 !important; pointer-events: none !important; visibility: hidden !important; flex-shrink: 0 !important; position: absolute !important; top: -9999px !important; } #saydale-mobile-overlay #saydale-screen-chat .saydale-chat-hd-new, #saydale-mobile-overlay #saydale-screen-chat #saydale-chat-new, #saydale-mobile-overlay #saydale-chat-new { display: none !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; position: absolute !important; top: -9999px !important; } /* ─── THREAD (conversation area) ─────────────────────────────────── box-sizing: border-box is CRITICAL — prevents padding from adding to the flex-stretched width and causing right-side overflow clipping. ─────────────────────────────────────────────────────────────────── */ #saydale-mobile-overlay #saydale-screen-chat #saydale-chat-thread { box-sizing: border-box !important; flex: 1 1 0 !important; min-height: 0 !important; width: 100% !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; padding: 20px 16px 12px !important; display: flex !important; flex-direction: column !important; gap: 14px !important; background: #F9FAFB !important; scroll-behavior: smooth !important; } /* ─── MESSAGE ROWS ──────────────────────────────────────────────── */ #saydale-mobile-overlay #saydale-screen-chat .saydale-chat-msg { box-sizing: border-box !important; display: flex !important; width: 100% !important; gap: 10px !important; } /* AI: left-aligned row */ #saydale-mobile-overlay #saydale-screen-chat .saydale-chat-msg--ai { flex-direction: row !important; align-items: flex-start !important; justify-content: flex-start !important; } /* User: right-aligned row — justify-content:flex-end is the safe approach, no row-reverse which caused overflow on mobile Safari */ #saydale-mobile-overlay #saydale-screen-chat .saydale-chat-msg--user { flex-direction: row !important; align-items: flex-end !important; justify-content: flex-end !important; } /* ─── AI AVATAR ─────────────────────────────────────────────────── */ #saydale-mobile-overlay #saydale-screen-chat .saydale-chat-avatar { width: 28px !important; height: 28px !important; border-radius: 50% !important; background-color: #ffffff !important; background-image: url('https://summerlandplus.com/wp-content/uploads/SAYDALE.svg') !important; background-size: 16px !important; background-repeat: no-repeat !important; background-position: center !important; border: 1px solid rgba(0,0,0,0.08) !important; flex-shrink: 0 !important; overflow: hidden !important; font-size: 0 !important; color: transparent !important; display: block !important; } /* ─── BUBBLES ────────────────────────────────────────────────────── */ /* Target BOTH base class and modifier-only class (SAYDALE Desktop JS omits base) */ #saydale-mobile-overlay #saydale-screen-chat .saydale-chat-bubble, #saydale-mobile-overlay #saydale-screen-chat .saydale-chat-bubble--ai, #saydale-mobile-overlay #saydale-screen-chat .saydale-chat-bubble--user { box-sizing: border-box !important; display: block !important; font-family: -apple-system, 'Inter', sans-serif !important; font-size: 15px !important; line-height: 1.55 !important; padding: 10px 14px !important; word-break: break-word !important; max-width: 78% !important; min-width: 0 !important; } #saydale-mobile-overlay #saydale-screen-chat .saydale-chat-bubble--ai { background: #ffffff !important; color: #111827 !important; border: 1px solid rgba(0,0,0,0.08) !important; box-shadow: 0 1px 4px rgba(0,0,0,0.05) !important; border-radius: 4px 18px 18px 18px !important; } #saydale-mobile-overlay #saydale-screen-chat .saydale-chat-bubble--user { background: #10847E !important; color: #ffffff !important; border-radius: 18px 18px 4px 18px !important; border: none !important; box-shadow: 0 2px 8px rgba(16,132,126,0.18) !important; } /* ═══════════════════════════════════════════════════════════════════ BOTTOM COMPOSER DOCK Three-piece flex column inside .saydale-screen--chat: 1. #saydale-suggestions-bar ← sibling ABOVE the bar (not inside) 2. .saydale-chat-bar ← white dock: input + disclaimer only ═══════════════════════════════════════════════════════════════════ */ #saydale-mobile-overlay #saydale-screen-chat .saydale-chat-bar { box-sizing: border-box !important; flex-shrink: 0 !important; width: 100% !important; background: #ffffff !important; /* border-top removed — inner pill has its own border */ border-top: none !important; box-shadow: none !important; padding: 10px 16px 6px !important; display: flex !important; flex-direction: column !important; gap: 0 !important; } /* Inner pill: matches intro .saydale-chat-box exactly */ #saydale-mobile-overlay #saydale-screen-chat .saydale-chat-bar-inner, #saydale-mobile-overlay #saydale-screen-chat .saydale-advisor-wrapper .saydale-chat-bar-inner { box-sizing: border-box !important; background: #ffffff !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; border-radius: 100px !important; padding: 10px 10px 10px 20px !important; margin: 0 !important; display: flex !important; align-items: center !important; gap: 12px !important; min-height: 60px !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05), 0 2px 6px rgba(0, 0, 0, 0.02) !important; transition: border-color 0.2s ease, box-shadow 0.2s ease !important; position: relative !important; } #saydale-mobile-overlay #saydale-screen-chat .saydale-chat-bar-inner .saydale-chat-logo { display: flex !important; align-items: center !important; justify-content: center !important; width: 28px !important; height: 28px !important; flex-shrink: 0 !important; margin: 0 !important; } #saydale-mobile-overlay #saydale-screen-chat .saydale-chat-bar-inner:focus-within { border-color: #10847e !important; box-shadow: 0 0 0 3px rgba(16,132,126,0.1), 0 2px 16px rgba(16,132,126,0.12) !important; } /* Input field */ #saydale-mobile-overlay #saydale-screen-chat .saydale-chat-main-input, #saydale-mobile-overlay #saydale-screen-chat #saydale-chat-main-input { flex: 1 !important; background: transparent !important; border: none !important; outline: none !important; box-shadow: none !important; resize: none !important; font-family: -apple-system, 'Inter', sans-serif !important; font-size: 16px !important; color: #111827 !important; line-height: 1.5 !important; padding: 8px 0 8px 4px !important; min-height: 24px !important; max-height: 120px !important; height: auto !important; overflow-y: auto !important; -webkit-appearance: none !important; align-self: center !important; } #saydale-mobile-overlay #saydale-screen-chat .saydale-chat-main-input::placeholder, #saydale-mobile-overlay #saydale-screen-chat #saydale-chat-main-input::placeholder { color: #9CA3AF !important; } /* Send button */ #saydale-mobile-overlay #saydale-screen-chat .saydale-chat-bar-inner .saydale-chat-main-send, #saydale-mobile-overlay #saydale-screen-chat #saydale-chat-main-send { box-sizing: border-box !important; width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; aspect-ratio: 1 / 1 !important; border-radius: 50% !important; background: #10847E !important; color: #ffffff !important; border: none !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; cursor: pointer !important; transition: transform 0.12s, opacity 0.2s, background 0.15s !important; align-self: center !important; padding: 0 !important; box-shadow: 0 2px 8px rgba(16,132,126,0.25) !important; } #saydale-mobile-overlay #saydale-screen-chat #saydale-chat-main-send:disabled { background: #10847E !important; color: #ffffff !important; box-shadow: 0 2px 8px rgba(16, 132, 126, 0.2) !important; } #saydale-mobile-overlay #saydale-screen-chat #saydale-chat-main-send:active { transform: scale(0.9) !important; } #saydale-mobile-overlay #saydale-screen-chat .saydale-chat-bar-inner .saydale-chat-main-send svg { display: block !important; width: 16px !important; height: 16px !important; } /* Hide old keyboard hint — replaced by disclaimer */ #saydale-mobile-overlay #saydale-screen-chat .saydale-chat-bar-hint { display: none !important; } /* ── AI Disclaimer ─────────────────────────────────────────────── */ #saydale-mobile-overlay .saydale-chat-disclaimer { display: block !important; font-size: 10.5px !important; color: #B0B8C4 !important; text-align: center !important; line-height: 1.45 !important; padding: 5px 16px 8px !important; margin: 0 !important; font-weight: 400 !important; letter-spacing: 0 !important; } /* ── Suggestion chips bar ───────────────────────────────────────── Used in TWO places: 1. #saydale-suggestions-bar ← chat screen (flex sibling of .saydale-chat-bar) 2. #saydale-intro-suggestions ← intro screen (above .saydale-chat-box) Always a single horizontal-scroll row — never wraps, never clips. ──────────────────────────────────────────────────────────────── */ /* ── Hide ALL suggestion bars on mobile ── */ #saydale-mobile-overlay .saydale-suggestions-bar { display: none !important; } #saydale-mobile-overlay .saydale-suggestions-bar::-webkit-scrollbar { display: none !important; } /* Hide suggestion bar when it has no chips (before first AI response) */ #saydale-mobile-overlay .saydale-suggestions-bar:empty { display: none !important; padding: 0 !important; } /* ── Intro screen: tighten bottom gap above the chat box ── */ #saydale-mobile-overlay .saydale-intro-suggestions-bar { padding-bottom: 2px !important; padding-top: 8px !important; } /* ── Suggestion bar chip ───────────────────────────────────────── */ #saydale-mobile-overlay .saydale-bar-chip { /* Layout */ display: inline-flex !important; align-items: center !important; flex-shrink: 0 !important; white-space: nowrap !important; /* Typography — sentence case, normal weight, never uppercase */ font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; font-size: 13px !important; font-weight: 400 !important; line-height: 1.3 !important; letter-spacing: 0 !important; text-transform: none !important; /* override any WoodMart button uppercase */ /* Colours — light pill with teal hint */ color: #1a2e2e !important; background: #ffffff !important; border: 1px solid #cfdede !important; border-radius: 100px !important; /* Spacing */ padding: 7px 14px !important; /* No clipping */ max-width: none !important; overflow: visible !important; text-overflow: clip !important; /* Interaction */ cursor: pointer !important; -webkit-tap-highlight-color: transparent !important; transition: background 0.14s, border-color 0.14s, color 0.14s !important; /* Reset any inherited button weirdness */ outline: none !important; box-shadow: none !important; appearance: none !important; -webkit-appearance: none !important; } #saydale-mobile-overlay .saydale-bar-chip:hover, #saydale-mobile-overlay .saydale-bar-chip:active { background: rgba(16,132,126,0.07) !important; border-color: rgba(16,132,126,0.40) !important; color: #10847E !important; } /* ── Legacy thread suggestion chips (backward compat) ─────────── */ #saydale-mobile-overlay .saydale-chat-suggestions { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; gap: 7px !important; padding: 4px 0 10px 38px !important; margin: 0 !important; } #saydale-mobile-overlay .saydale-chat-suggestion { display: inline-flex !important; align-items: center !important; flex-shrink: 0 !important; white-space: nowrap !important; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1.3 !important; letter-spacing: 0 !important; text-transform: none !important; color: #10847E !important; background: rgba(16,132,126,0.06) !important; border: 1px solid rgba(16,132,126,0.20) !important; border-radius: 100px !important; padding: 6px 12px !important; cursor: pointer !important; -webkit-tap-highlight-color: transparent !important; transition: background 0.14s, border-color 0.14s !important; max-width: none !important; overflow: visible !important; text-overflow: clip !important; outline: none !important; box-shadow: none !important; appearance: none !important; -webkit-appearance: none !important; } #saydale-mobile-overlay .saydale-chat-suggestion:active, #saydale-mobile-overlay .saydale-chat-suggestion:hover { background: rgba(16,132,126,0.14) !important; border-color: rgba(16,132,126,0.40) !important; } /* ═══════════════════════════════════════════════════════════════════ QUIZ / RESULTS / LOADING screens ═══════════════════════════════════════════════════════════════════ */ #saydale-mobile-overlay #saydale-screen-quiz, #saydale-mobile-overlay #saydale-screen-results, #saydale-mobile-overlay #saydale-screen-no-results { background: #F9FAFB !important; } #saydale-mobile-overlay .saydale-quiz-header, #saydale-mobile-overlay .saydale-results-header { background: #F9FAFB !important; } #saydale-mobile-overlay .saydale-chat-product-card { background: #ffffff !important; border-radius: 16px !important; border: 1px solid rgba(0,0,0,0.07) !important; box-shadow: 0 1px 6px rgba(0,0,0,0.05) !important; } /* ═══════════════════════════════════════════════════════════════════ DESKTOP — hide overlay entirely ═══════════════════════════════════════════════════════════════════ */ @media (min-width: 769px) { #saydale-mobile-overlay, #saydale-app-bar { display: none !important; } } /* ─── Nuclear nav-bar hide: three selectors, zero chance of showing through ─── */ body.saydale-is-open #mobnav-bar, body:has(#saydale-mobile-overlay.saydale-overlay--open) #mobnav-bar, #saydale-mobile-overlay.saydale-overlay--open ~ #mobnav-bar { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* ═══════════════════════════════════════════════════════════════════ NOLI-INSPIRED UI — Saydale brand colors (teal #10847E + gold #FDB602) Layout: noli.com aesthetic — soft warm gradient bg, serif heading, horizontal chip row, dark pill input, no OR/CTA buttons ═══════════════════════════════════════════════════════════════════ */ /* ── Google Fonts: Outfit and Inter sans-serif ── */ @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=Inter:wght@300;400;500;600&display=swap'); /* ── 1. Background: warm cream with soft teal radial glow (Noli layout, Saydale palette) ── */ html:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)), body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) { background: #f4f8f7 !important; background-image: radial-gradient(ellipse 65% 65% at 5% 95%, rgba(16, 132, 126, 0.18) 0%, transparent 60%), radial-gradient(ellipse 55% 55% at 95% 5%, rgba(253, 182, 2, 0.12) 0%, transparent 55%), radial-gradient(ellipse 45% 45% at 50% 100%, rgba(16, 132, 126, 0.08) 0%, transparent 50%) !important; } body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-advisor-wrapper { background: transparent !important; } body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-bg-floor { background: transparent !important; } /* ── 2. Shared header — visible white bar with Summerland AI brand ── */ body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) #saydale-shared-hd { display: flex !important; } /* ── 3. Intro screen — centered column, vertically centered ── */ body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-screen--intro.saydale-screen--active { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; background: transparent !important; overflow-y: auto !important; padding: 48px 24px 32px !important; } body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-intro-inner { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 820px !important; margin: 0 auto !important; text-align: center !important; gap: 0 !important; } /* ── 4. Eyebrow text ── */ body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-intro-eyebrow { display: block !important; font-family: 'Inter', -apple-system, sans-serif !important; font-size: 15px !important; font-weight: 500 !important; color: #2d7a74 !important; margin: 0 0 14px !important; letter-spacing: 0.01em !important; } /* ── 5. Main heading — large serif, Playfair Display ── */ body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-intro-question { font-family: 'Inter', -apple-system, sans-serif !important; font-size: clamp(28px, 3.5vw, 36px) !important; font-weight: 500 !important; line-height: 1.25 !important; color: #10847E !important; text-align: center !important; margin: 0 0 32px !important; letter-spacing: -0.02em !important; } /* ── 6. Italic accent word ("out") — Saydale teal ── */ body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-intro-accent { font-style: italic !important; color: #10847E !important; font-weight: 400 !important; } /* ── 7. Subtitle / hint ── */ body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-intro-hint { font-family: 'Inter', -apple-system, sans-serif !important; font-size: 15px !important; font-weight: 400 !important; color: #5a6e6c !important; line-height: 1.6 !important; text-align: center !important; max-width: 520px !important; margin: 0 auto 36px !important; } /* ── 8. Concern chip grid — exact Noli: always a single horizontal row (yqi7ix3 + yqi7ix5) ── */ body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-concern-grid { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: space-evenly !important; align-items: stretch !important; gap: 8px !important; margin: 0 0 8px !important; max-width: 776px !important; width: 100% !important; padding-bottom: 0 !important; } /* ── 9. Each chip — tall Noli-style vertical card ── */ body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-concern-chip { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 20px !important; padding: 32px 16px !important; background: #ffffff !important; border: 1px solid #f3f4f6 !important; border-radius: 8px !important; font-family: 'Inter', -apple-system, sans-serif !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1.2 !important; color: #1a3330 !important; cursor: pointer !important; transition: background 0.15s ease !important; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important; text-align: center !important; white-space: normal !important; flex: 1 1 0 !important; min-width: 0 !important; flex-shrink: 1 !important; position: relative !important; opacity: 1 !important; } body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-concern-chip:hover { background: linear-gradient(135deg, rgba(255,255,255,0) 0%, rgba(255,182,61,0.06) 18%, rgba(255,255,255,0) 35%, rgba(99,179,237,0.05) 65%, rgba(255,255,255,0) 82%, rgba(216,112,147,0.05) 100% ) !important; } body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-concern-chip:active { box-shadow: none !important; transform: none !important; } /* ── 10. Chip icon — large, top-left aligned ── */ body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-concern-chip-icon { display: flex !important; width: auto !important; align-items: center !important; justify-content: center !important; color: #10847E !important; flex-shrink: 0 !important; } body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-concern-chip-icon svg { width: 32px !important; height: 32px !important; } /* ── 11. Dark pill chat input box — Noli style ── */ body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-chat-wrap { width: 100% !important; max-width: 776px !important; margin: 0 auto !important; padding: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; } body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-chat-box { display: flex !important; align-items: center !important; background: #ffffff !important; border-radius: 100px !important; padding: 10px 10px 10px 20px !important; min-height: 60px !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05), 0 2px 6px rgba(0, 0, 0, 0.02) !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; gap: 12px !important; margin: 0 !important; } body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-chat-logo { display: flex !important; align-items: center !important; justify-content: center !important; width: 28px !important; height: 28px !important; flex-shrink: 0 !important; margin: 0 !important; } /* ── 12. Spark icon — teal/gold ── */ body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-chat-spark { display: none !important; } /* ── 13. Text input ── */ body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-chat-input { background: transparent !important; border: none !important; outline: none !important; color: #1a2e2e !important; font-family: 'Inter', -apple-system, sans-serif !important; font-size: 16px !important; font-weight: 400 !important; flex: 1 !important; resize: none !important; padding: 0 !important; min-height: 24px !important; line-height: 1.5 !important; } body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-chat-input::placeholder { color: #9ca3af !important; } /* ── 14. Send button ── */ body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-chat-send { display: flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; min-width: 40px !important; border-radius: 50% !important; background: #10847E !important; border: none !important; color: #ffffff !important; cursor: pointer !important; transition: background 0.15s, transform 0.15s, box-shadow 0.15s !important; flex-shrink: 0 !important; box-shadow: 0 2px 8px rgba(16, 132, 126, 0.2) !important; } body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-chat-send:hover { background: #0d7a74 !important; color: #ffffff !important; } body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-chat-send:disabled { background: #10847E !important; color: #ffffff !important; opacity: 1 !important; cursor: default !important; box-shadow: 0 2px 8px rgba(16, 132, 126, 0.2) !important; } /* ── 15. Disclaimer ── */ body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-intro-footer-note, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-chat-disclaimer { font-family: 'Inter', -apple-system, sans-serif !important; font-size: 12px !important; color: rgba(30, 70, 65, 0.5) !important; text-align: center !important; margin: 16px auto 0 !important; padding: 0 !important; } /* ── 16. Hide old OR divider + Begin Assessment + Scan Your Skin (not in Noli layout) ── */ body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-intro-divider, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-intro-cta, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-cta-row, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-btn-scan, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) #saydale-start-btn { display: none !important; } /* ── 17. Mobile — chips scroll horizontally, don't wrap ── */ @media (max-width: 640px) { body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-screen--intro.saydale-screen--active { padding: 32px 16px 24px !important; justify-content: flex-start !important; padding-top: 48px !important; } body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-intro-question { font-size: clamp(22px, 6vw, 28px) !important; } body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-intro-inner { max-width: 100% !important; } /* Mobile: chips scroll horizontally */ body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-concern-grid { flex-wrap: nowrap !important; overflow-x: auto !important; justify-content: flex-start !important; padding-bottom: 0 !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; gap: 8px !important; } /* ═══════════════════════════════════════════════════ CHAT DISCLAIMER — center aligned ═══════════════════════════════════════════════════ */ .saydale-chat-disclaimer, body:has(.saydale-advisor-wrapper) .saydale-chat-disclaimer, #saydale-screen-chat .saydale-chat-disclaimer { text-align: center !important; margin-left: auto !important; margin-right: auto !important; } body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-concern-grid::-webkit-scrollbar { display: none !important; } body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-concern-chip { flex: 1 1 0 !important; min-width: 80px !important; padding: 12px !important; font-size: 12px !important; white-space: normal !important; } body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-chat-box { border-radius: 100px !important; padding: 10px 10px 10px 16px !important; } body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-chat-wrap { max-width: 100% !important; } } /* ══════════════════════════════════════════════════════════════ SCAN SOURCE CHOOSER — Camera vs. Photo Library bottom sheet ══════════════════════════════════════════════════════════════ */ .saydale-source-chooser { position: fixed; inset: 0; z-index: 99999; display: none; align-items: flex-end; justify-content: center; } .saydale-source-chooser-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(2px); opacity: 0; transition: opacity 0.3s ease; } .saydale-source-chooser--open .saydale-source-chooser-backdrop { opacity: 1; } .saydale-source-chooser-sheet { position: relative; z-index: 1; background: #ffffff; border-radius: 24px 24px 0 0; padding: 12px 20px 36px; width: 100%; max-width: 480px; transform: translateY(100%); transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1); box-shadow: 0 -8px 40px rgba(0,0,0,0.18); } .saydale-source-chooser--open .saydale-source-chooser-sheet { transform: translateY(0); } .saydale-source-chooser-handle { width: 40px; height: 4px; background: #e0e0e0; border-radius: 99px; margin: 0 auto 20px; } .saydale-source-chooser-title { font-family: 'Inter', -apple-system, sans-serif; font-size: 17px; font-weight: 600; color: #0d1117; text-align: center; margin: 0 0 6px; } .saydale-source-chooser-sub { font-family: 'Inter', sans-serif; font-size: 13px; color: #6b7280; text-align: center; margin: 0 0 24px; } .saydale-source-chooser-options { display: flex; gap: 12px; margin-bottom: 16px; } .saydale-source-opt { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 12px; background: #f8fafb; border: 1.5px solid #e5e9ed; border-radius: 16px; cursor: pointer; transition: background 0.18s, border-color 0.18s, transform 0.14s; font-family: 'Inter', sans-serif; -webkit-tap-highlight-color: transparent; } .saydale-source-opt:hover, .saydale-source-opt:focus-visible { background: #fffbeb; border-color: #ffb63d; outline: none; } .saydale-source-opt:active { transform: scale(0.97); } .saydale-source-opt-icon { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, #ffb63d 0%, #f59e0b 100%); color: #fff; } .saydale-source-opt-label { font-size: 14px; font-weight: 600; color: #0d1117; } .saydale-source-opt-sub { font-size: 12px; color: #6b7280; } .saydale-source-cancel { display: block; width: 100%; padding: 14px; background: none; border: 1.5px solid #e5e9ed; border-radius: 100px; font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 600; color: #6b7280; cursor: pointer; transition: background 0.18s, color 0.18s; -webkit-tap-highlight-color: transparent; } .saydale-source-cancel:hover { background: #f5f5f5; color: #0d1117; } /* ── Desktop: centered modal instead of bottom sheet ── */ @media (min-width: 768px) { .saydale-source-chooser { align-items: center; justify-content: center; } .saydale-source-chooser-sheet { border-radius: 24px; max-width: 440px; width: calc(100% - 48px); transform: scale(0.92) translateY(12px); opacity: 0; transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.24s ease; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22), 0 4px 16px rgba(0, 0, 0, 0.10); padding: 20px 24px 28px; } .saydale-source-chooser--open .saydale-source-chooser-sheet { transform: scale(1) translateY(0); opacity: 1; } .saydale-source-chooser-handle { display: none; } .saydale-source-chooser-options { gap: 16px; } .saydale-source-opt { padding: 24px 16px; } } /* ═══════════════════════════════════════════════════════════════ BATCH 40-FIX PATCHES ════════════════════════════════════════════════════════════ */ /* Fix #21: chip active-state scale has smooth transition */ .saydale-screen--intro .saydale-concern-chip { transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease !important; } .saydale-screen--intro .saydale-concern-chip:active { transform: scale(0.96) !important; transition-duration: 0.08s !important; } /* Fix #22: product result card focus-visible outline (WCAG AA) */ .saydale-result-card:focus-visible, a.saydale-result-card:focus-visible { outline: 2px solid #10847E !important; outline-offset: 2px !important; } /* Fix #23: chat bar inner handles its own max-width — bar stays full width */ /* Fix #24: suggestion chips — cap width, truncate long text */ .saydale-bar-chip { max-width: 240px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } /* Fix #25: reduced-motion guard for loading orb */ @media (prefers-reduced-motion: reduce) { .saydale-loading-orb, .saydale-orb-inner, .saydale-scan-orb-pulse, .saydale-scan-orb-ring { animation: none !important; } } /* Fix #26: scan source chooser z-index above scan modal */ .saydale-source-chooser { z-index: 100000 !important; } /* Fix #27: remove bottom margin from last

in AI bubble */ .saydale-chat-bubble--ai p:last-child { margin-bottom: 0 !important; } /* Fix #28: 2-column product grid on tablet (640-1023px) */ @media (min-width: 640px) and (max-width: 1023px) { .saydale-result-cards, #saydale-products-grid.saydale-result-cards { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; } } /* Fix #29: no-results icon consistent font-size */ .saydale-no-results-icon { font-size: 56px !important; line-height: 1 !important; } /* Fix #30: quiz screen overflow fix for iOS Safari sticky nav */ .saydale-screen--quiz, .saydale-screen--quiz.saydale-screen--active, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-screen--quiz.saydale-screen--active { overflow-y: auto !important; overflow-x: hidden !important; } /* ── Unified background: all screens share the same ambient gradient ── */ body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-screen--quiz.saydale-screen--active, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-screen--chat.saydale-screen--active, body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-screen--results.saydale-screen--active { background-color: #ffffff !important; background-image: radial-gradient(ellipse at 0% 100%, rgba(255,182,61,0.10) 0%, transparent 55%), radial-gradient(ellipse at 100% 0%, rgba(16,132,126,0.08) 0%, transparent 55%) !important; } /* Fix #40: intro footer disclaimer layout */ .saydale-intro-footer-note, .saydale-chat-disclaimer.saydale-intro-footer-note { margin-top: auto !important; padding: 10px 16px 0 !important; text-align: center !important; font-size: 11px !important; line-height: 1.4 !important; } /* Fix #37: brand header link — remove inline style dependency */ .saydale-chat-hd-brand-link { text-decoration: none !important; color: inherit !important; } /* Fix #38: quiz step icons — hide from screen readers via CSS */ .saydale-step-icon, .saydale-category-icon { /* aria-hidden added via PHP; font-size kept consistent */ font-size: 28px; line-height: 1; display: block; margin-bottom: 4px; } /* ═══════════════════════════════════════════════════ ALL CHIP ICONS — uniform teal green ═══════════════════════════════════════════════════ */ .saydale-concern-chip .saydale-concern-chip-icon svg { stroke: #10847E !important; color: #10847E !important; } .saydale-concern-chip .saydale-concern-chip-icon .saydale-lc-icon { stroke: #10847E !important; color: #10847E !important; } .saydale-concern-chip .saydale-concern-chip-icon circle[fill="currentColor"] { fill: #10847E !important; stroke: none !important; } /* ═══════════════════════════════════════════════════════════ LUCIDE ICONS — professional icon library Lucide replaces with So the SVG IS .saydale-lc-icon — NOT a child of it. ══════════════════════════════════════════════════════════ */ .saydale-lc-icon { display: block; width: 32px; height: 32px; flex-shrink: 0; stroke: #10847E; /* Summerland brand green */ fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; overflow: visible; } /* Check-card & category-card icons */ .saydale-check-inner .saydale-lc-icon, .saydale-category-inner .saydale-lc-icon { width: 36px; height: 36px; } /* Step-header icons */ .saydale-step-icon .saydale-lc-icon { width: 34px; height: 34px; } /* Skin-type cards — largest */ .saydale-skin-icon .saydale-lc-icon { width: 40px; height: 40px; } /* Intro concern chips */ .saydale-concern-chip-icon .saydale-lc-icon { width: 36px; height: 36px; } /* ═══════════════════════════════════════════════════════════════ CART BUTTON — shared header (desktop) & mobile app bar ════════════════════════════════════════════════════════════ */ /* Right-side wrapper that holds "New chat" + Cart together */ .saydale-hd-right-wrap { display: flex !important; align-items: center !important; gap: 8px !important; position: absolute !important; right: 16px !important; top: 50% !important; transform: translateY(-50%) !important; } /* Cart icon-button */ .saydale-cart-btn { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; background: transparent !important; border: none !important; cursor: pointer !important; width: 44px !important; height: 44px !important; border-radius: 0 !important; padding: 0 !important; margin-right: 2px !important; color: #10847e !important; transition: color 0.15s, transform 0.15s !important; -webkit-tap-highlight-color: transparent !important; touch-action: manipulation !important; text-decoration: none !important; } .saydale-cart-btn:hover, .saydale-cart-btn:focus-visible { background: transparent !important; border-color: transparent !important; color: #0c6b66 !important; outline: none !important; } .saydale-cart-btn:active { background: transparent !important; transform: translateY(1px) !important; } .saydale-cart-btn svg, .saydale-cart-icon { width: 32px !important; height: 32px !important; display: block !important; stroke: currentColor !important; fill: none !important; flex-shrink: 0 !important; } /* Cart badge counter */ .saydale-cart-badge { position: absolute !important; top: 1px !important; right: 1px !important; min-width: 17px !important; height: 17px !important; border-radius: 100px !important; background: #FFB63D !important; color: #1a1a1a !important; font-size: 10px !important; font-weight: 700 !important; line-height: 17px !important; text-align: center !important; padding: 0 4px !important; box-sizing: border-box !important; display: none !important; animation: saydale-badge-pop 0.25s cubic-bezier(0.175,0.885,0.32,1.275) !important; font-family: -apple-system, 'Inter', sans-serif !important; box-shadow: 0 0 0 1.5px #ffffff !important; } .saydale-cart-badge.saydale-cart-badge--visible { display: block !important; } @keyframes saydale-badge-pop { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* Mobile app bar: cart button sits to the left of #saydale-app-close */ #saydale-app-bar .saydale-cart-btn { color: #10847e !important; width: 40px !important; height: 40px !important; margin-right: 2px !important; } /* Responsive: shrink gap on very narrow viewports */ @media (max-width: 360px) { .saydale-hd-right-wrap { gap: 4px !important; right: 8px !important; } .saydale-chat-hd-new { font-size: 11px !important; padding: 6px 10px !important; } } /* Icon containers — ensure adequate space */ .saydale-skin-icon { display: flex; align-items: center; justify-content: center; min-height: 48px; } .saydale-check-inner > span { display: flex; align-items: center; justify-content: center; min-height: 44px; } .saydale-category-icon { display: flex; align-items: center; justify-content: center; min-height: 44px; } /* Selected state — swap to gold accent */ .saydale-skin-card input:checked ~ .saydale-skin-card-inner .saydale-lc-icon, .saydale-check-card.saydale-check-card--selected .saydale-lc-icon, .saydale-category-card.saydale-category-card--selected .saydale-lc-icon { stroke: #FFB63D; } /* ═══════════════════════════════════════════════════ RESULTS ACTIONS BAR — sticky bottom, full-width ═══════════════════════════════════════════════════ */ body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-results-actions { position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; background: #ffffff !important; border-top: 1px solid rgba(0,0,0,0.07) !important; box-shadow: 0 -4px 20px rgba(0,0,0,0.08) !important; padding: 10px 20px max(10px, env(safe-area-inset-bottom)) !important; box-sizing: border-box !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; flex-shrink: 0 !important; z-index: 100 !important; } /* Contain Add to Cart — centred, not full-width */ body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-btn--add-all { max-width: 280px !important; width: auto !important; flex: 0 0 auto !important; } /* Start over stays compact */ body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) #saydale-restart-btn { flex: 0 0 auto !important; width: auto !important; } /* Push content above fixed bar so it doesn't overlap */ body:has(.saydale-advisor-wrapper):not(:has(#saydale-mobile-overlay .saydale-advisor-wrapper)) .saydale-screen--results { padding-bottom: 80px !important; } /* ═══════════════════════════════════════════════════ ACTIVE / CHECKED STATE — filled glow, not outline ═══════════════════════════════════════════════════ */ /* Category cards */ .saydale-category-card input:checked + .saydale-category-inner { border-color: #10847E !important; background: linear-gradient(135deg, rgba(16,132,126,0.10) 0%, rgba(16,132,126,0.06) 100%) !important; box-shadow: inset 0 0 0 1.5px #10847E, 0 4px 14px rgba(16,132,126,0.18) !important; } /* Checkbox preference cards */ .saydale-check-card input:checked + .saydale-check-inner { border-color: #10847E !important; background: linear-gradient(135deg, rgba(16,132,126,0.10) 0%, rgba(16,132,126,0.05) 100%) !important; box-shadow: inset 0 0 0 1.5px #10847E, 0 3px 10px rgba(16,132,126,0.16) !important; } /* Concern chips active */ .saydale-concern-chip.saydale-chip--active, .saydale-concern-chip[aria-pressed="true"], body:has(.saydale-advisor-wrapper) .saydale-concern-chip.saydale-chip--active { border-color: #10847E !important; background: linear-gradient(135deg, rgba(16,132,126,0.11) 0%, rgba(16,132,126,0.05) 100%) !important; box-shadow: inset 0 0 0 1.5px #10847E, 0 3px 10px rgba(16,132,126,0.15) !important; } /* Remove old plain :active outline on hover */ .saydale-category-inner:hover, .saydale-check-inner:hover { transform: none !important; } /* ═══════════════════════════════════════════════════ CHAT DISCLAIMER — center aligned ═══════════════════════════════════════════════════ */ .saydale-chat-disclaimer, body:has(.saydale-advisor-wrapper) .saydale-chat-disclaimer, #saydale-screen-chat .saydale-chat-disclaimer { text-align: center !important; margin-left: auto !important; margin-right: auto !important; } /* ═══════════════════════════════════════════════════ SCAN SOURCE CHOOSER ICONS — match landing screen chips Both Camera & Library icons are brand green/teal (#10847E) No solid background circles, clean stroke icons. ═══════════════════════════════════════════════════ */ .saydale-source-opt-icon { display: flex !important; align-items: center !important; justify-content: center !important; width: auto !important; height: auto !important; background: none !important; border-radius: 0 !important; box-shadow: none !important; margin-bottom: 8px !important; } .saydale-source-opt-icon svg { width: 28px !important; height: 28px !important; stroke-width: 2px !important; transition: transform 0.2s ease !important; } #saydale-source-camera .saydale-source-opt-icon svg, #saydale-source-library .saydale-source-opt-icon svg { stroke: #10847E !important; color: #10847E !important; } /* Hover & Focus overrides to match brand green system */ #saydale-source-camera:hover, #saydale-source-camera:focus-visible, #saydale-source-library:hover, #saydale-source-library:focus-visible { background: rgba(16, 132, 126, 0.04) !important; border-color: #10847E !important; } #saydale-source-camera:hover .saydale-source-opt-icon svg, #saydale-source-library:hover .saydale-source-opt-icon svg { transform: scale(1.1) !important; } /* ═══════════════════════════════════════════════════ SOURCE CHOOSER — orbit animation orb above title ═══════════════════════════════════════════════════ */ .saydale-source-orb-wrap { position: relative; width: 140px; height: 140px; margin: 8px auto 20px; display: flex; align-items: center; justify-content: center; } /* Reuse all .saydale-scan-orb-* styles — rings, pulse, core already defined */ .saydale-source-orb-wrap .saydale-scan-orb-pulse, .saydale-source-orb-wrap .saydale-scan-orb-ring, .saydale-source-orb-wrap .saydale-scan-orb-core { position: absolute; } .saydale-source-orb-wrap .saydale-scan-orb-core { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, #0c6b66, #10847E, #13a89f); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(16,132,126,0.5); animation: saydale-orb-core-breathe 2s ease-in-out infinite; z-index: 2; } .saydale-source-orb-wrap .saydale-scan-orb-pulse { inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(16,132,126,0.25) 0%, transparent 70%); animation: saydale-orb-pulse 1.8s ease-in-out infinite; } .saydale-source-orb-wrap .saydale-scan-orb-ring { border-radius: 50%; border: 2px solid transparent; } .saydale-source-orb-wrap .saydale-scan-orb-ring--1 { inset: 10px; border-color: rgba(16,132,126,0.5) rgba(16,132,126,0.1) rgba(16,132,126,0.1) rgba(16,132,126,0.5); animation: saydale-ring-cw 1.6s linear infinite; } .saydale-source-orb-wrap .saydale-scan-orb-ring--2 { inset: 22px; border-color: rgba(255,182,61,0.6) rgba(255,182,61,0.1) rgba(255,182,61,0.1) rgba(255,182,61,0.6); animation: saydale-ring-ccw 1.2s linear infinite; } .saydale-source-orb-wrap .saydale-scan-orb-ring--3 { inset: 36px; border-color: rgba(16,132,126,0.35) transparent transparent rgba(16,132,126,0.35); animation: saydale-ring-cw 2s linear infinite; } /* ═══════════════════════════════════════════════════ PREVIEW STATE — laser scan line over uploaded photo The .saydale-scan-laser already exists in the CSS but only renders when .saydale-scan-preview-wrap has position:relative (it does). Force it visible. ═══════════════════════════════════════════════════ */ .saydale-scan-state-preview .saydale-scan-preview-wrap, #saydale-scan-state-scanning .saydale-scan-preview-wrap { position: relative !important; overflow: hidden !important; margin: 0 auto 20px !important; } .saydale-scan-state-preview .saydale-scan-laser, #saydale-scan-state-scanning .saydale-scan-laser { display: block !important; z-index: 3 !important; } /* ══════════════════════════════════════════════════════════════ SCAN RESULT CHIPS — color-coded by type ═══════════════════════════════════════════════════════════ */ .saydale-scan-chip { display: inline-flex; align-items: center; gap: 5px; padding: 6px 14px; border-radius: 100px; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; background: rgba(16,132,126,0.10); color: #0d6b66; border: 1px solid rgba(16,132,126,0.20); white-space: nowrap; } .saydale-scan-chip--concern { background: rgba(239,68,68,0.08); color: #b91c1c; border-color: rgba(239,68,68,0.20); } .saydale-scan-chip--positive { background: rgba(22,163,74,0.08); color: #15803d; border-color: rgba(22,163,74,0.20); } .saydale-scan-chips-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 16px; justify-content: center; } .saydale-scan-summary, .saydale-scan-advice { font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.65; color: #374151; margin: 0 0 12px; text-align: center; } .saydale-scan-advice { font-size: 13px; color: #6b7280; font-style: italic; } /* ── AI Typing: Spinning Ring Logo on Send Button ── */ .saydale-send-spinner { display: flex; align-items: center; justify-content: center; } .saydale-spinning-ring { animation: saydale-spin-ring 1.1s linear infinite; display: block; } @keyframes saydale-spin-ring { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* ── Ring Logo Transition on Answering ── */ .saydale-chat-bar .saydale-chat-logo { transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important; opacity: 1 !important; transform: scale(1) !important; } .saydale-chat-bar.saydale-is-answering .saydale-chat-logo { opacity: 0 !important; transform: scale(0.8) !important; pointer-events: none !important; } /* Make send button transparent/shadowless when answering (for both desktop and mobile overlay) */ #saydale-screen-chat .saydale-chat-bar.saydale-is-answering .saydale-chat-bar-inner .saydale-chat-main-send, #saydale-mobile-overlay #saydale-screen-chat .saydale-chat-bar.saydale-is-answering .saydale-chat-bar-inner #saydale-chat-main-send, #saydale-mobile-overlay #saydale-screen-chat .saydale-chat-bar.saydale-is-answering .saydale-chat-bar-inner .saydale-chat-main-send { background: transparent !important; box-shadow: none !important; border: none !important; cursor: default !important; pointer-events: none !important; } /* ═══════════════════════════════════════════════════════════════ SKIN ANALYSIS REPORT DASHBOARD ═══════════════════════════════════════════════════════════════ */ .saydale-chat-msg--report { max-width: 100% !important; } .saydale-skin-report { background: #ffffff; border: 1px solid rgba(16,132,126,0.12); border-radius: 20px; padding: 24px; box-shadow: 0 4px 20px rgba(0,0,0,0.04), 0 10px 40px rgba(16,132,126,0.04); width: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 20px; margin-bottom: 12px; } .saydale-report-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(0,0,0,0.06); padding-bottom: 12px; } .saydale-report-header h3 { margin: 0; font-size: 18px; font-weight: 700; color: #1a2e2e; font-family: var(--saydale-font); } .saydale-report-confidence { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: 4px 10px; border-radius: 100px; background: rgba(16,132,126,0.08); color: #10847e; } .saydale-report-grid { display: grid; grid-template-columns: 240px 1fr; gap: 24px; } .saydale-report-visualizer { width: 100%; } .saydale-visualizer-container { position: relative; width: 100%; border-radius: 12px; overflow: hidden; border: 1px solid rgba(0,0,0,0.06); } .saydale-visualizer-image { width: 100%; height: auto; display: block; object-fit: cover; transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), transform-origin 0.1s ease; } .saydale-visualizer-overlay { position: absolute; border: 2px solid rgba(20,184,166,0.8); box-shadow: 0 0 12px rgba(20,184,166,0.4), inset 0 0 12px rgba(20,184,166,0.2); border-radius: 8px; transition: all 0.25s ease; cursor: pointer; z-index: 5; } .saydale-visualizer-overlay:hover, .saydale-visualizer-overlay.saydale-active-highlight { border-color: #facc15; box-shadow: 0 0 20px rgba(250,204,21,0.8), inset 0 0 12px rgba(250,204,21,0.4); z-index: 10; } .saydale-overlay-tag { position: absolute; bottom: 4px; left: 4px; background: rgba(26,46,46,0.85); color: #ffffff; font-size: 9px; font-weight: 600; padding: 2px 6px; border-radius: 4px; white-space: nowrap; pointer-events: none; transition: background 0.2s; } .saydale-visualizer-overlay:hover .saydale-overlay-tag, .saydale-visualizer-overlay.saydale-active-highlight .saydale-overlay-tag { background: #facc15; color: #1a2e2e; } .saydale-report-details { display: flex; flex-direction: column; gap: 16px; } .saydale-report-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .saydale-metric-item { background: #f8fafc; border: 1px solid rgba(0,0,0,0.04); padding: 10px 14px; border-radius: 12px; display: flex; flex-direction: column; gap: 2px; } .saydale-metric-label { font-size: 11px; color: #64748b; font-weight: 500; text-transform: uppercase; letter-spacing: 0.02em; } .saydale-metric-value { font-size: 15px; font-weight: 700; color: #1e293b; } .saydale-report-hydration { background: #f8fafc; border: 1px solid rgba(0,0,0,0.04); padding: 12px 14px; border-radius: 12px; display: flex; flex-direction: column; gap: 8px; } .saydale-hydration-header { display: flex; justify-content: space-between; align-items: center; } .saydale-hydration-status { font-size: 13px; font-weight: 700; color: #10847e; } .saydale-hydration-bar-container { width: 100%; height: 8px; background: #e2e8f0; border-radius: 100px; overflow: hidden; } .saydale-hydration-bar { height: 100%; border-radius: 100px; transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1); } .saydale-hydration-bar.hydration-low { background: linear-gradient(90deg, #ef4444, #f97316); } .saydale-hydration-bar.hydration-medium { background: linear-gradient(90deg, #facc15, #10847e); } .saydale-hydration-bar.hydration-high { background: linear-gradient(90deg, #10847e, #0d9488); } .saydale-report-concerns-header { font-size: 13px; font-weight: 700; color: #1e293b; margin-top: 4px; border-bottom: 1px solid rgba(0,0,0,0.04); padding-bottom: 6px; } .saydale-report-concerns-list { display: flex; flex-direction: column; gap: 8px; } .saydale-concern-row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 10px; background: #ffffff; border: 1px solid rgba(16,132,126,0.08); transition: all 0.2s ease; cursor: pointer; } .saydale-concern-row:hover, .saydale-concern-row.saydale-row-highlight { border-color: rgba(16,132,126,0.3); background: rgba(16,132,126,0.02); transform: translateX(2px); } .saydale-concern-thumbnail-container { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; border: 2px solid #ffffff; box-shadow: 0 2px 8px rgba(0,0,0,0.08); background: #f1f5f9; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .saydale-concern-thumbnail { width: 100%; height: 100%; background-size: cover; background-position: center; opacity: 0; transition: opacity 0.3s; } .saydale-concern-thumbnail.saydale-cropped { opacity: 1; } .saydale-default-concern-icon { color: #94a3b8; } .saydale-concern-info { display: flex; flex-direction: column; } .saydale-concern-name { font-size: 13.5px; font-weight: 600; color: #334155; } .saydale-report-positives { display: flex; flex-direction: column; gap: 6px; } .saydale-report-positives-header { font-size: 12px; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: 0.02em; } .saydale-positives-tags { display: flex; flex-wrap: wrap; gap: 6px; } .saydale-positive-tag { font-size: 12px; font-weight: 600; background: rgba(34,197,94,0.08); color: #15803d; padding: 4px 10px; border-radius: 100px; display: flex; align-items: center; gap: 4px; } .saydale-positive-tag svg { width: 12px; height: 12px; } .saydale-report-summary { border-top: 1px solid rgba(0,0,0,0.06); padding-top: 16px; display: flex; flex-direction: column; gap: 14px; } .saydale-report-summary-text { font-size: 14.5px; line-height: 1.6; color: #334155; margin: 0; } .saydale-report-advice { background: rgba(16,132,126,0.04); border-left: 4px solid #10847e; padding: 12px 16px; border-radius: 0 12px 12px 0; } .saydale-report-advice strong { font-size: 13.5px; color: #10847e; display: block; margin-bottom: 4px; } .saydale-report-advice p { font-size: 13.5px; line-height: 1.5; color: #475569; margin: 0; } /* Mobile responsive dashboard */ @media (max-width: 600px) { .saydale-skin-report { padding: 16px; gap: 16px; } .saydale-report-grid { grid-template-columns: 1fr; gap: 16px; } .saydale-report-visualizer { max-width: 280px; margin: 0 auto; } } /* ========================================== SAYDALE STANDALONE WORDPRESS STYLING FIXES ========================================== */ /* Fix quiz screen cards clipping/scrolling */ .saydale-step--active { flex: 1 1 auto !important; min-height: auto !important; } .saydale-category-grid { grid-template-rows: auto !important; } /* selected card icon strokes: gold accent */ .saydale-category-card input:checked + .saydale-category-inner .saydale-lc-icon, .saydale-check-card input:checked + .saydale-check-inner .saydale-lc-icon, .saydale-skin-card input:checked + .saydale-skin-card-inner .saydale-lc-icon { stroke: #FFB63D !important; } /* Compact styling for small viewport heights to prevent clipping */ @media (max-height: 800px) { .saydale-steps { padding: 12px 16px 8px !important; } .saydale-step-header { margin-bottom: 12px !important; } .saydale-step-header h2 { font-size: 20px !important; } .saydale-step-header p { font-size: 12px !important; margin-bottom: 0 !important; } .saydale-category-inner, .saydale-skin-card-inner, .saydale-check-inner { padding: 12px 8px !important; } .saydale-category-inner .saydale-lc-icon, .saydale-skin-card-inner .saydale-lc-icon, .saydale-check-inner .saydale-lc-icon { width: 24px !important; height: 24px !important; } .saydale-category-inner strong, .saydale-skin-card-inner strong, .saydale-check-inner strong { font-size: 13px !important; margin-top: 4px !important; } .saydale-category-inner p, .saydale-skin-card-inner p, .saydale-check-inner small { font-size: 10.5px !important; line-height: 1.2 !important; margin-top: 2px !important; } } /* ── Product Recommendations in Skin Report ── */ .saydale-report-recs { margin-top: 20px !important; border-top: 1px solid rgba(0,0,0,0.06) !important; padding-top: 16px !important; width: 100% !important; box-sizing: border-box !important; } .saydale-report-recs-header { font-size: 15px !important; font-weight: 600 !important; color: #10847e !important; margin-bottom: 12px !important; font-family: inherit !important; } @media (min-width: 601px) { .saydale-report-recs .saydale-chat-products { border: none !important; background: transparent !important; padding: 0 !important; } } @media (max-width: 600px) { .saydale-report-recs .saydale-chat-products { border: none !important; background: transparent !important; padding: 0 !important; } } /* ══════════════════════════════════════════════════════════════ INLINE CHAT PRODUCT CARDS — like Gemini search results Products appear inside the AI bubble, as a horizontal scroll strip ══════════════════════════════════════════════════════════════ */ .slai-products-bubble { max-width: min(520px, 90vw) !important; padding: 0 !important; overflow: hidden; background: var(--slai-bubble-ai-bg, #f0faf9) !important; border-radius: 18px 18px 18px 4px !important; } .slai-reply-text { padding: 14px 16px 10px; font-size: 14px; line-height: 1.55; color: var(--slai-text, #1a2e2e); } .slai-reply-text p { margin: 0 0 6px; } .slai-reply-text p:last-child { margin-bottom: 0; } /* Horizontal scrollable strip */ .slai-inline-products { display: flex; flex-direction: row; gap: 10px; overflow-x: auto; padding: 8px 16px 12px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .slai-inline-products::-webkit-scrollbar { display: none; } /* Individual product card */ .slai-ip-card { flex: 0 0 160px; scroll-snap-align: start; background: #fff; border-radius: 12px; border: 1px solid rgba(16,132,126,0.12); overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 1px 4px rgba(0,0,0,0.06); transition: box-shadow 0.2s, transform 0.2s; } .slai-ip-card:hover { box-shadow: 0 4px 12px rgba(16,132,126,0.18); transform: translateY(-2px); } .slai-ip-img-link { display: block; text-decoration: none; } .slai-ip-img { width: 100%; aspect-ratio: 1 / 1; overflow: hidden; background: #f8fffe; display: flex; align-items: center; justify-content: center; } .slai-ip-img img { width: 100%; height: 100%; object-fit: contain; padding: 6px; } .slai-ip-ph { font-size: 36px; } .slai-ip-body { padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; flex: 1; } .slai-ip-name { font-size: 12px; font-weight: 600; color: #1a2e2e; text-decoration: none; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .slai-ip-name:hover { color: #10847E; } .slai-ip-brand { font-size: 10px; color: #8a9a9a; font-weight: 500; text-transform: uppercase; letter-spacing: 0.03em; } .slai-ip-reason { font-size: 10.5px; color: #10847E; line-height: 1.3; font-style: italic; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; } .slai-ip-footer { margin-top: auto; padding-top: 6px; display: flex; flex-direction: column; gap: 5px; } .slai-ip-price { font-size: 13px; font-weight: 700; color: #10847E; } .slai-ip-price.slai-ip-sale { color: #e11d48; } .slai-ip-old { font-size: 10px; color: #9ca3af; text-decoration: line-through; margin-left: 4px; } .slai-ip-atc { width: 100%; padding: 5px 0; font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; background: #10847E; color: #fff; border: none; border-radius: 6px; cursor: pointer; transition: background 0.18s; } .slai-ip-atc:hover { background: #0d6b67; } /* Add All row */ .slai-ip-add-all-wrap { padding: 6px 16px 14px; } .slai-ip-add-all { width: 100%; padding: 9px 0; font-size: 12px; font-weight: 600; background: transparent; border: 1.5px solid #10847E; color: #10847E; border-radius: 8px; cursor: pointer; transition: background 0.18s, color 0.18s; } .slai-ip-add-all:hover { background: #10847E; color: #fff; } /* Mobile: slightly narrower cards */ @media (max-width: 480px) { .slai-products-bubble { max-width: 92vw !important; } .slai-ip-card { flex: 0 0 140px; } } /* ══════════════════════════════════════════════════════════════ PER-PRODUCT CHAT MESSAGE CARDS Each product appears as its own chat message row ══════════════════════════════════════════════════════════════ */ /* The message row wrapping each card — no avatar after first */ .saydale-chat-msg--product-item { align-items: flex-start; gap: 10px; margin-top: 6px !important; margin-bottom: 0 !important; } .saydale-chat-msg--product-item + .saydale-chat-msg--product-item { margin-top: 4px !important; } /* Avatar spacer — same width as real avatar so cards align */ .saydale-chat-avatar-spacer { width: 32px; flex-shrink: 0; } /* The product card itself sits next to the avatar */ .slai-msg-product-card.saydale-result-card { max-width: min(320px, 80vw); min-width: 220px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.07); overflow: hidden; flex-shrink: 0; } /* "Add All" final row */ .saydale-chat-msg--addall { display: flex; align-items: center; gap: 10px; margin-top: 8px !important; padding-bottom: 4px; } .slai-standalone-addall { padding: 10px 20px; font-size: 13px; font-weight: 600; background: transparent; border: 1.5px solid #10847E; color: #10847E; border-radius: 20px; cursor: pointer; transition: background 0.18s, color 0.18s; white-space: nowrap; } .slai-standalone-addall:hover { background: #10847E; color: #fff; } @media (max-width: 480px) { .slai-msg-product-card.saydale-result-card { max-width: 85vw; min-width: 180px; } } /* ══════════════════════════════════════════════════════════════ GEMINI-STYLE CHAT UX — thinking bubble, streaming, actions ══════════════════════════════════════════════════════════════ */ /* ── Message entrance animation ── */ .slai-msg--entering { opacity: 0; transform: translateY(6px); transition: opacity 0.28s ease, transform 0.28s ease; } .slai-msg--visible { opacity: 1 !important; transform: translateY(0) !important; } /* ── Streaming text cursor ── */ .slai-msg--entering:not(.slai-msg--done) .slai-stream-text::after, .saydale-chat-bubble--ai:has(.slai-stream-text:not(:empty)):not(.slai-msg--done *) .slai-stream-text::after { content: ''; display: inline-block; width: 2px; height: 1em; background: #10847E; margin-left: 2px; vertical-align: text-bottom; animation: slai-cursor-blink 0.9s step-end infinite; } @keyframes slai-cursor-blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } } /* ── "Thinking…" bubble ── */ .slai-thinking-bubble { background: rgba(16,132,126,0.06); border: 1px solid rgba(16,132,126,0.14); border-radius: 18px 18px 18px 4px; padding: 12px 18px; display: flex; align-items: center; min-width: 120px; } .slai-thinking-label { display: flex; align-items: center; gap: 10px; } /* Spinning gradient ring */ .slai-thinking-dot-ring { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid transparent; border-top-color: #10847E; border-right-color: #edcb1d; animation: slai-spin 0.9s linear infinite; flex-shrink: 0; } @keyframes slai-spin { to { transform: rotate(360deg); } } .slai-thinking-text { font-size: 13px; color: #6b7280; font-style: italic; letter-spacing: 0.01em; animation: slai-thinking-pulse 1.6s ease-in-out infinite; } @keyframes slai-thinking-pulse { 0%,100% { opacity: 0.7; } 50% { opacity: 1; } } /* Avatar pulsing ring while thinking */ .slai-avatar--thinking svg { animation: slai-avatar-pulse 1.2s ease-in-out infinite; } @keyframes slai-avatar-pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.8; } } /* ── Message action buttons (copy / thumbs) ── */ .slai-msg-actions { display: flex; align-items: center; gap: 4px; opacity: 0; margin-top: 8px; transition: opacity 0.18s; pointer-events: none; } /* Show on hover of the parent message OR when streaming is done */ .saydale-chat-msg--ai:hover .slai-msg-actions, .slai-msg--done .slai-msg-actions { opacity: 1; pointer-events: auto; } .slai-action-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; border: 1px solid transparent; background: transparent; color: #9ca3af; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; padding: 0; } .slai-action-btn:hover { background: rgba(16,132,126,0.08); color: #10847E; border-color: rgba(16,132,126,0.2); } .slai-action-btn--done { color: #10847E !important; background: rgba(16,132,126,0.1) !important; border-color: rgba(16,132,126,0.25) !important; } .slai-action-btn--liked { color: #10847E !important; background: rgba(16,132,126,0.1) !important; } .slai-action-btn--liked svg { fill: rgba(16,132,126,0.4); } .slai-action-btn--disliked { color: #ef4444 !important; background: rgba(239,68,68,0.08) !important; } .slai-action-btn--disliked svg { fill: rgba(239,68,68,0.3); } /* ── User message entrance from right ── */ .saydale-chat-msg--user.slai-msg--entering { transform: translateX(8px); } .saydale-chat-msg--user.slai-msg--visible { transform: translateX(0) !important; } /* Mobile adjustments */ @media (max-width: 480px) { .slai-thinking-bubble { min-width: 100px; padding: 10px 14px; } .slai-msg-actions { margin-top: 6px; } } /* ══════════════════════════════════════════════════════════════ FIX: Use animation instead of class-toggle for message entrance (More reliable across browsers, no rAF timing issues) ══════════════════════════════════════════════════════════════ */ @keyframes slai-msg-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @keyframes slai-msg-in-right { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: translateX(0); } } /* Override the class-toggle approach with pure animation */ .saydale-chat-msg--ai { animation: slai-msg-in 0.28s ease both; } .saydale-chat-msg--user { animation: slai-msg-in-right 0.22s ease both; } /* Reset opacity so old JS class-toggle doesn't conflict */ .slai-msg--entering { opacity: 1 !important; transform: none !important; } .slai-msg--visible { opacity: 1 !important; transform: none !important; } /* Message actions: show after animation completes */ .slai-msg-actions { opacity: 0; transition: opacity 0.2s; pointer-events: none; } .saydale-chat-msg--ai:hover .slai-msg-actions, .slai-msg--done .slai-msg-actions { opacity: 1; pointer-events: auto; } /* ══════════════════════════════════════════════════════ THINKING BUBBLE v2 — white bg, ring left of text ══════════════════════════════════════════════════════ */ .slai-thinking-bubble { display: inline-flex; align-items: center; gap: 10px; background: #ffffff; border: 1px solid rgba(16,132,126,0.14); border-radius: 18px 18px 18px 4px; padding: 10px 18px 10px 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.07); } /* Spin the gradient ring SVG inside the bubble */ .slai-thinking-ring-svg { flex-shrink: 0; animation: slai-ring-spin 1.1s linear infinite; } @keyframes slai-ring-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .slai-thinking-text { font-size: 13.5px; font-weight: 500; color: #374151; font-style: normal; letter-spacing: 0.01em; animation: slai-thinking-pulse 1.6s ease-in-out infinite; } @keyframes slai-thinking-pulse { 0%,100% { opacity: 0.65; } 50% { opacity: 1; } } /* Hide the old spinner dot ring (replaced by SVG ring) */ .slai-thinking-dot-ring { display: none; } /* Hide the old label wrapper if it still renders */ .slai-thinking-label { display: contents; } /* Hide action buttons entirely */ .slai-msg-actions { display: none !important; } /* ══════════════════════════════════════════════════════ CHAT PRODUCT CARDS — 3-column layout (like screenshot) ══════════════════════════════════════════════════════ */ /* Bubble wrapping the grid (sits right of avatar) */ .slai-products-bubble { max-width: min(680px, calc(100vw - 80px)); width: 100%; } /* Grid */ .slai-product-grid { display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); } .slai-product-grid--1 { grid-template-columns: 1fr; max-width: 220px; } .slai-product-grid--2 { grid-template-columns: repeat(2, 1fr); max-width: 440px; } /* Card */ .slai-pc { background: #fff; border: 1px solid #ebebeb; border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow 0.2s, transform 0.2s; } .slai-pc:hover { box-shadow: 0 6px 22px rgba(0,0,0,0.10); transform: translateY(-2px); } /* Image section */ .slai-pc-img-wrap { background: #f5f5f5; height: 160px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .slai-pc-img { width: 100%; height: 100%; object-fit: contain; padding: 10px; } .slai-pc-img-ph { font-size: 42px; line-height: 1; } /* Body */ .slai-pc-body { padding: 12px 12px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; } .slai-pc-brand { font-size: 11.5px; color: #6b7280; font-weight: 400; text-transform: uppercase; letter-spacing: 0.04em; } .slai-pc-name { font-size: 13px; font-weight: 700; color: #111827; line-height: 1.35; } .slai-pc-volume { font-size: 12px; color: #6b7280; } /* Price row */ .slai-pc-price-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; margin-bottom: 8px; } .slai-pc-price { font-size: 14px; font-weight: 700; color: #111827; } .slai-pc-price--sale { color: #e11d48; } .slai-pc-price-old { font-size: 12px; color: #9ca3af; text-decoration: line-through; } .slai-pc-badge { background: #e11d48; color: #fff; font-size: 10px; font-weight: 700; padding: 2px 5px; border-radius: 4px; letter-spacing: 0.02em; } /* Add to Cart — black full-width */ .slai-pc-atc { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; padding: 9px 0; background: #111827; color: #fff; border: none; border-radius: 9px; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background 0.18s; margin-top: auto; } .slai-pc-atc:hover { background: #1f2937; } .slai-pc-atc--loading { background: #374151; opacity: 0.8; } .slai-pc-atc--done { background: #10847E; } /* Learn more — outline full-width */ .slai-pc-learn { display: block; width: 100%; text-align: center; padding: 8px 0; margin-top: 6px; border: 1.5px solid #d1d5db; border-radius: 9px; font-size: 12.5px; font-weight: 500; color: #374151; text-decoration: none; transition: border-color 0.18s, background 0.18s; } .slai-pc-learn:hover { border-color: #10847E; background: #f0fdf9; color: #10847E; } /* Mobile: stack to 1 or 2 columns */ @media (max-width: 520px) { .slai-product-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } .slai-product-grid--1 { grid-template-columns: 1fr; } .slai-pc-img-wrap { height: 120px; } } /* ══════════════════════════════════════════════════════ OVERRIDES — v2 tweaks per user request ══════════════════════════════════════════════════════ */ /* 1. Add to Cart button — Summerland green */ .slai-pc-atc { background: #10847E !important; } .slai-pc-atc:hover { background: #0c6e69 !important; } .slai-pc-atc--loading { background: #0d7570 !important; } .slai-pc-atc--done { background: #087066 !important; } /* 2. Cart badge — pop animation when item added */ .saydale-cart-badge { transition: transform 0.2s cubic-bezier(0.175,0.885,0.32,1.275) !important; } .saydale-cart-badge.saydale-cart-badge--bump { animation: slai-badge-bump 0.35s cubic-bezier(0.175,0.885,0.32,1.275) forwards !important; } @keyframes slai-badge-bump { 0% { transform: scale(1); } 40% { transform: scale(1.55); } 70% { transform: scale(0.9); } 100% { transform: scale(1); } } /* 3. Spacing between user chat bubbles */ .saydale-chat-msg--user { margin-bottom: 10px !important; } .saydale-chat-msg--ai { margin-bottom: 10px !important; } /* Slightly tighter gap between consecutive user messages */ .saydale-chat-msg--user + .saydale-chat-msg--user { margin-top: -4px !important; } /* 4-column grid for when Gemini returns 4 products */ .slai-product-grid--4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 680px) { .slai-product-grid--4 { grid-template-columns: repeat(2, 1fr); } } /* ══════════════════════════════════════════════════════ THINKING BUBBLE v3 — dots only, no duplicate ring ══════════════════════════════════════════════════════ */ /* Override v2 ring styles — ring SVG is gone */ .slai-thinking-ring-svg { display: none !important; } /* Bubble: white pill, sits right of the (already spinning) avatar */ .slai-thinking-bubble { display: inline-flex !important; align-items: center !important; gap: 6px !important; background: #ffffff !important; border: 1px solid rgba(16,132,126,0.13) !important; border-radius: 18px 18px 18px 4px !important; padding: 11px 18px !important; box-shadow: 0 2px 10px rgba(0,0,0,0.07) !important; } /* "Thinking" label */ .slai-thinking-text { font-size: 14px !important; font-weight: 500 !important; color: #374151 !important; font-style: normal !important; animation: none !important; opacity: 1 !important; } /* Three bouncing dots */ .slai-thinking-dots { display: inline-flex; align-items: center; gap: 3px; } .slai-thinking-dots span { display: block; width: 5px; height: 5px; border-radius: 50%; background: #10847E; animation: slai-dot-bounce 1.2s ease-in-out infinite; } .slai-thinking-dots span:nth-child(2) { animation-delay: 0.2s; } .slai-thinking-dots span:nth-child(3) { animation-delay: 0.4s; } @keyframes slai-dot-bounce { 0%, 80%, 100% { transform: translateY(0); opacity: 0.4; } 40% { transform: translateY(-5px); opacity: 1; } } /* ══════════════════════════════════════════════════════ PRODUCT GRID FIXES — 4-col glitch + white image bg ══════════════════════════════════════════════════════ */ /* White image background (was #f5f5f5) */ .slai-pc-img-wrap { background: #ffffff !important; border-bottom: 1px solid #f0f0f0 !important; } /* 4 products → 2×2 grid so it fits in the chat bubble */ .slai-product-grid--4 { grid-template-columns: repeat(2, 1fr) !important; } /* Widen bubble slightly for 2-col so cards aren't squeezed */ .slai-products-bubble { max-width: min(520px, calc(100vw - 72px)) !important; } /* 3 items — keep 3 cols but constrain width */ .slai-product-grid--3 { grid-template-columns: repeat(3, 1fr) !important; } /* Restore normal bubble width for 1 and 2 */ .slai-product-grid--1, .slai-product-grid--2 { max-width: 440px; } /* Slightly taller image area so products breathe */ .slai-pc-img-wrap { height: 150px !important; } /* ══════════════════════════════════════════════════════ SKIN SCORE RING ══════════════════════════════════════════════════════ */ .slai-score-row { display: flex; align-items: center; gap: 16px; background: linear-gradient(135deg, #f0fdf8 0%, #e6f7ff 100%); border: 1px solid #d1f0e8; border-radius: 14px; padding: 14px 16px; margin-bottom: 14px; } .slai-score-ring-wrap { position: relative; width: 80px; height: 80px; flex-shrink: 0; } .slai-score-svg { width: 80px; height: 80px; display: block; } .slai-score-inner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; } .slai-score-num { font-size: 22px; font-weight: 800; color: #0f172a; line-height: 1; font-variant-numeric: tabular-nums; } .slai-score-label { font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #64748b; } .slai-score-meta { flex: 1; min-width: 0; } .slai-score-title { font-size: 13px; font-weight: 700; color: #0f172a; margin-bottom: 4px; } .slai-score-potential { font-size: 11.5px; color: #64748b; margin-bottom: 8px; line-height: 1.4; } .slai-score-potential strong { color: #10847E; font-weight: 700; } .slai-score-bar-wrap { height: 5px; background: #e2e8f0; border-radius: 99px; overflow: hidden; } .slai-score-bar { height: 100%; border-radius: 99px; transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1); } /* ══════════════════════════════════════════════════════ FACIAL ZONE MAP — organic SVG overlays ══════════════════════════════════════════════════════ */ /* SVG overlay sits perfectly on top of the face image */ .slai-zone-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; border-radius: inherit; } /* Zone concern row — replaces thumbnail row */ .slai-zone-row { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 10px; transition: background 0.2s; } .slai-zone-row:hover { background: #f8fafc; } /* The zone colour indicator chip */ .slai-zone-chip { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .slai-zone-chip-dot { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; } /* Zone label beneath the concern name */ .slai-zone-name { display: block; font-size: 10px; color: #94a3b8; margin-top: 1px; letter-spacing: 0.2px; } /* Smooth dashed stroke animation on the SVG blobs */ .slai-zone-svg path { animation: slaiZonePulse 3s ease-in-out infinite; } @keyframes slaiZonePulse { 0%, 100% { fill-opacity: 0.35; } 50% { fill-opacity: 0.50; } }