/* ============================================================ SPROUT.CSS — Sprout chat widget styles. Source: Sprout-Chatbot-Widget.zip / sprout-chatbot-widget.html, split into sprout.css + sprout.js for the YLPP integration (see the header comment in sprout.js for why splitting the original single-file snippet was appropriate here). Everything below #ylpp-sprout-root is scoped to that ID -- no selector in this file targets anything outside it. The original snippet left 16 selector lines unscoped (bare .sp-row / .sp-bubble / .sp-chip* / .sp-chiprow / .sp-typing rules with no #ylpp-sprout- root ancestor); this integration adds that scoping throughout so nothing here can ever collide with an unrelated class elsewhere on the site, now or in the future. ============================================================ */ :where(#ylpp-sprout-root, #ylpp-sprout-root *){box-sizing:border-box;margin:0;padding:0;} #ylpp-sprout-root{ --sp-navy:#0F2D52; --sp-teal:#107C8C; --sp-teal-lt:#5FB9C4; --sp-gold:#D9A441; --sp-grey:#6B7280; --sp-ink:#16233A; --sp-cream:#F7F3EA; --sp-cream-alt:#F0EAD9; --sp-cream-text:#F2ECDD; --sp-white:#FFFFFF; --sp-line:#E4DAC2; --sp-r-lg:8px; --sp-r-sm:3px; --sp-sans:'Space Grotesk','Neue Montreal',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --sp-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; /* Responsive-shell measurements (read by sprout.js syncShell): --sp-root-bottom launcher/root offset from the viewport bottom (raised at <=640px for the site's sticky CTA) --sp-top-gap breathing room kept above a floating panel (0 in fullscreen) The two minimums below are the message log's USABLE CONTENT AREA: its inner height excluding its own padding and border -- the space in which messages actually render. (Round 6: Round 5 declared them as the total log box and then fell 1-2px short of even that; the definition is now explicit and syncShell adds the log's padding and border on top.) --sp-log-content-min NORMAL layout: a comfortable multi-message view (128px; the same intent as Round 5's 160px box minus its 32px padding). --sp-log-content-min-compact COMPACT layout: one single-line reply bubble (20.25px text line + 20px bubble padding = 40.25px), rounded up to 44px. Below this the chat is not considered usable and the fallback card is shown instead. */ --sp-root-bottom:20px; --sp-top-gap:8px; --sp-log-content-min:128px; --sp-log-content-min-compact:44px; position:fixed; right:20px; bottom:var(--sp-root-bottom); z-index:2147483000; font-family:var(--sp-sans); line-height:1.5; -webkit-font-smoothing:antialiased; } /* ---- open floating root follows the visible band (Round 6) ---- While Sprout is open, the root's bottom offset is lifted by however much of the layout viewport lies below the visual viewport (e.g. an on-screen keyboard), so a floating panel is anchored to what is actually visible. sprout.js keeps --sp-vv-bottom-inset live (0 when the whole layout viewport is visible, or without VisualViewport). The closed launcher is unaffected. The <=480px fullscreen rule overrides this with the band's own top/height. */ #ylpp-sprout-root.sp-open{ bottom:calc(var(--sp-root-bottom) + var(--sp-vv-bottom-inset, 0px)); } /* ---- P3-1 (Round 2 correction): fail-closed on blocked JS ---- Reviewer finding: if the widget's JS is blocked/fails, the launcher markup was still visible and inert -- a misleading, dead-looking "chat button" with no working behaviour. The root is now hidden by default and revealed only by adding .sp-ready, which the guarded initializer in sprout.js applies once (and only once) init() has completed successfully. If JS never runs, .sp-ready is never added, the root stays display:none, and visitors simply see the normal YLP site with no dead control. This does not affect the CSS-blocked case (P3-1's other half): that is handled in sprout.js via an inline-style hide, since an unavailable stylesheet cannot be relied on to hide anything itself. */ #ylpp-sprout-root{display:none;} #ylpp-sprout-root.sp-ready{display:block;} #ylpp-sprout-root .sp-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;} /* ---- proactive teaser bubble ---- NOTE (Round 2 correction): the teaser markup is two sibling