/* * Cardiosense Chatbot widget styles. * * Brand token source of truth: docs/plans/2026-05-12-branding-evolution-design.md * Vitality Red brand-primary, dual light/dark surfaces via [data-theme="dark"] cascade. * 3-color palette only: Lifesaving Blue #0e244f · Vitality Red #b90f18 · Clinical Frost #f8fafc. * * Inter (body), Manrope (heading) — both already in cardiosense.css @font-face. */ /* * Bottom-right corner offset. * * Tunable via --cs-chatbot-bottom-offset so we can clear other corner * widgets (accessibility FAB, cookie-consent revoke button, scroll-to-top * arrows, etc.) without editing this rule. Default 5.5rem (~88px) leaves * room for a single ~60px button beneath the chatbot's own ~56px launcher. * Bump to 10rem if a second widget shares the corner. * * Set the override at :root in a child stylesheet or via inline style * on body / html to apply it site-wide: * * :root { --cs-chatbot-bottom-offset: 8rem; } */ :root { --cs-chatbot-bottom-offset: 5.5rem; --cs-chatbot-right-offset: 1.5rem; } /* * Brand tokens — locally scoped to the chatbot widget so updates to the * site-wide tokens in cardiosense.css can propagate but the chatbot * remains operable even on pages that don't load cardiosense.css. * * Source of truth: docs/plans/2026-05-12-branding-evolution-design.md */ /* Root is anchored bottom-right of the viewport and stays fixed during scroll. !important defends against parent themes (Elementor especially) that try to reset .position on everything inside their wrappers. */ #cs-chatbot-root { --cs-brand-primary: #b90f18; --cs-brand-primary-hover: #8a0c12; --cs-surface: #f8fafc; --cs-on-surface: #0e244f; --cs-surface-dark: #0e244f; --cs-on-surface-dark: #f8fafc; --cs-border: #e2e8f0; --cs-subtle-bg: #f1f5f9; position: fixed !important; inset: auto var(--cs-chatbot-right-offset, 1.5rem) var(--cs-chatbot-bottom-offset, 5.5rem) auto !important; z-index: 999999; font-family: Inter, system-ui, -apple-system, sans-serif; font-size: 14px; line-height: 1.5; color: var(--cs-on-surface); } /* * Page-level dark mode — when the page sets [data-theme="dark"] on * or , re-map surface tokens so every reference downstream * picks up the dark palette. The chatbot widget never independently * picks dark mode; it follows whatever the surrounding page declares. */ [data-theme="dark"] #cs-chatbot-root { --cs-surface: var(--cs-surface-dark); --cs-on-surface: var(--cs-on-surface-dark); --cs-border: #1e293b; /* slate-800 — darker border for dark mode */ --cs-subtle-bg: #112146; /* lifted dark surface for user-bubble contrast */ } /* Visually-hidden helper — keeps content in the a11y tree, invisible on screen. */ #cs-chatbot-root .cs-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* HTML's `hidden` attribute normally renders as display:none, but some themes ship `display: block !important` rules on broad selectors that override it. This explicit rule restores the intended behavior. */ #cs-chatbot-window[hidden], #cs-chatbot-launcher[hidden] { display: none !important; } /* Circular floating launcher — the SVG inside is the speech-bubble glyph. The button is visible on page load and remains until clicked. */ #cs-chatbot-launcher { background: var(--cs-brand-primary); color: #fff; border: none; border-radius: 9999px; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; box-shadow: 0 8px 24px rgb(185 15 24 / 0.32); transition: background-color 150ms ease, transform 150ms ease, box-shadow 150ms ease; } #cs-chatbot-launcher svg { width: 28px; height: 28px; display: block; pointer-events: none; /* clicks on the SVG bubble through to the button */ } #cs-chatbot-launcher:hover { background: var(--cs-brand-primary-hover); transform: translateY(-2px); box-shadow: 0 12px 32px rgb(185 15 24 / 0.40); } #cs-chatbot-launcher:focus-visible { outline: 2px solid var(--cs-surface); outline-offset: 3px; } #cs-chatbot-window { width: 360px; max-width: calc(100vw - 3rem); height: 540px; max-height: calc(100vh - 4rem); background: var(--cs-surface); border-radius: 16px; box-shadow: 0 16px 48px rgb(0 0 0 / 0.18); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--cs-border); } .cs-chatbot-header { background: var(--cs-surface-dark); color: var(--cs-on-surface-dark); padding: 0.875rem 1rem; display: flex; align-items: center; justify-content: space-between; } .cs-chatbot-title { display: flex; align-items: center; gap: 0.5rem; } .cs-chatbot-title-text { display: flex; flex-direction: column; line-height: 1.15; } .cs-chatbot-title-brand { font-family: Inter, system-ui, sans-serif; font-weight: 400; font-size: 14px; letter-spacing: 1.5px; line-height: 1; } .cs-chatbot-title-sub { font-family: Inter, system-ui, sans-serif; font-weight: 500; font-size: 12px; letter-spacing: 0.04em; line-height: 1; opacity: 0.75; } /* * Close pill — secondary CTA on the Lifesaving-Blue header. * default : transparent fill, Clinical-Frost outline + text * hover/focus : fills Vitality Red, keeps Clinical-Frost text * Pattern mirrors the site-wide "Contact Us" outline-pill but inverted * for the dark surface (white-on-navy → red-on-fill). White text on * navy is ~16:1 contrast; red on navy is only ~3.7:1, hence outline- * not-filled in the resting state. */ .cs-chatbot-close { background: transparent; border: 1px solid var(--cs-on-surface-dark); color: var(--cs-on-surface-dark); font-family: inherit; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; line-height: 1; border-radius: 9999px; padding: 0.4rem 0.95rem; cursor: pointer; transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease; } .cs-chatbot-close:hover, .cs-chatbot-close:focus-visible { background: var(--cs-brand-primary); border-color: var(--cs-brand-primary); color: var(--cs-on-surface-dark); } .cs-chatbot-close:focus-visible { outline: 2px solid var(--cs-on-surface-dark); outline-offset: 2px; } #cs-chatbot-messages { flex: 1; overflow-y: auto; padding: 1rem; background: var(--cs-surface); display: flex; flex-direction: column; gap: 0.5rem; } .cs-msg { max-width: 80%; padding: 0.5rem 0.75rem; border-radius: 12px; white-space: pre-wrap; word-wrap: break-word; font-size: 14px; line-height: 1.5; } .cs-msg-user { align-self: flex-end; background: var(--cs-subtle-bg); color: var(--cs-on-surface); border-bottom-right-radius: 4px; } .cs-msg-bot { align-self: flex-start; background: var(--cs-surface); color: var(--cs-on-surface); border: 1px solid var(--cs-border); border-bottom-left-radius: 4px; } /* Dark-mode bot bubble needs visible separation from the (also-dark) messages background — lift the bot bubble slightly. */ [data-theme="dark"] #cs-chatbot-root .cs-msg-bot { background: var(--cs-subtle-bg); } .cs-typing { padding: 0.5rem 0.75rem; } .cs-typing-dot { display: inline-block; width: 6px; height: 6px; margin: 0 2px; border-radius: 50%; background: var(--cs-on-surface); animation: cs-typing-pulse 1.2s infinite ease-in-out; } .cs-typing-dot:nth-child(2) { animation-delay: 0.15s; } .cs-typing-dot:nth-child(3) { animation-delay: 0.30s; } @keyframes cs-typing-pulse { 0%, 60%, 100% { opacity: 0.3; } 30% { opacity: 1; } } #cs-chatbot-form { display: flex; gap: 0.5rem; padding: 0.75rem; background: var(--cs-surface); border-top: 1px solid var(--cs-border); } #cs-chatbot-input { flex: 1; padding: 0.5rem 0.75rem; border: 1px solid var(--cs-border); border-radius: 8px; font-family: inherit; font-size: 14px; color: var(--cs-on-surface); background: var(--cs-surface); } #cs-chatbot-input:focus { outline: none; border-color: var(--cs-brand-primary); box-shadow: 0 0 0 3px rgb(185 15 24 / 0.16); } .cs-chatbot-send:disabled { opacity: 0.5; cursor: not-allowed; } /* ───────────────────────────────────────────────────────────────────────── * Mobile overrides (≤ 767 px) * * Three goals: * 1. Pull the bottom offset down to clear iOS Safari's dynamic toolbar + * home indicator via env(safe-area-inset-bottom). * 2. Shrink the right gutter slightly so the launcher doesn't crowd the * screen edge on narrow phones. * 3. Make the chat window expand to near-full-width so users don't have * to scroll left/right while typing. * * 100dvh (dynamic viewport height) is used instead of 100vh because on * iOS Safari `100vh` includes the retractable browser toolbar area, which * means the window can be obscured. dvh always reflects the actually-usable * visible area. A 100vh fallback is provided for older browsers. * ───────────────────────────────────────────────────────────────────────── */ @media (max-width: 767px) { :root { /* Increase bottom offset: base 4rem + OS-reported home-indicator height. On devices without a home indicator env() returns 0px so behaviour is identical to the desktop default on those devices. */ --cs-chatbot-bottom-offset: calc(4rem + env(safe-area-inset-bottom, 0px)); --cs-chatbot-right-offset: 1rem; } #cs-chatbot-window { /* Near-full-width on phones: leaves 1 rem margin on each side. */ width: calc(100vw - 2rem); max-width: calc(100vw - 2rem); /* Dynamic viewport height keeps the window clear of the iOS toolbar. Subtract the launcher height (4rem), bottom offset, and a little breathing room so the input field is never hidden behind the keyboard. */ height: min(520px, calc(100dvh - 7rem - env(safe-area-inset-bottom, 0px))); max-height: min(520px, calc(100dvh - 7rem - env(safe-area-inset-bottom, 0px))); /* Slightly tighter corner radius on small screens. */ border-radius: 12px; /* 100vh fallback for browsers without dvh support (iOS < 15.4). */ /* stylelint-disable-next-line declaration-block-no-duplicate-properties */ height: min(520px, calc(100vh - 7rem)); max-height: min(520px, calc(100vh - 7rem)); } } /* Engagement-trigger pulse — added by JS via .cs-chatbot-launcher--pulse. Three-beat scale animation; JS removes the class after 1.3 s. */ @keyframes cs-launcher-pulse { 0%, 100% { transform: translateY(0) scale(1); box-shadow: 0 8px 24px rgb(185 15 24 / 0.32); } 33% { transform: translateY(-2px) scale(1.14); box-shadow: 0 12px 32px rgb(185 15 24 / 0.55); } 66% { transform: translateY(-1px) scale(1.07); box-shadow: 0 10px 28px rgb(185 15 24 / 0.44); } } .cs-chatbot-launcher--pulse { will-change: transform, box-shadow; animation: cs-launcher-pulse 1.3s ease-in-out; }