/* Vita Chat Widget — Phase 4.0 floating-launcher redesign (shadow-DOM isolated).
*
* Loaded TWICE per page:
* 1. As in the document via wp_enqueue_style. Styles the host
* mount element from outside (sizing, palette tokens). Most rules don't
* match anything else in the document because the rest of the widget
* lives in a shadow root.
* 2. As a cloned inside the shadow root attached by vita-chat-widget
* .js. The shadow root contains the launcher, panel, intake form, and
* conversation. These rules are scoped to the shadow tree and impervious
* to host-theme CSS (Bootstrap reboot, .btn overrides, etc.).
*
* All previously-locked class names are preserved (.vita-chat-bubble,
* .vita-chat-vita, .vita-chat-user, .vita-chat-system, .vita-chat-emergency
* with role="alert", .vita-chat-log, .vita-chat-input, .vita-chat-send,
* .vita-chat-cta, .vita-chat-next, .vita-chat-status, .vita-chat-footer,
* .vita-chat-disclaimer, .vita-chat-turnstile, .vita-chat-turnstile-failed)
* so the test:chat-widget + accessibility contracts continue to hold.
*
* Coexistence: the JS sets --vc-launcher-bottom on the host when an existing
* fixed-position floating CTA (e.g. .floating-button "Tap to Call") is on the
* page, so our launcher stacks above it instead of overlapping.
*/
/* ── Palette + reset, defined on both host targets ──────────────────────── */
:host,
.vita-chat-mount {
--vc-bg: #fbfaf6;
--vc-bg-input: #ffffff;
--vc-bg-panel-header: #fbfaf6;
--vc-fg: #1b2630;
--vc-fg-soft: #4a5562;
--vc-muted: #8a8576;
--vc-accent: #2d6a5f;
--vc-accent-hover: #235650;
--vc-accent-active: #1c4540;
--vc-accent-fg: #fbfaf6;
--vc-accent-soft-bg: rgba(45, 106, 95, 0.08);
--vc-bubble-user: #dfe9e3;
--vc-bubble-user-fg: #1f3a33;
--vc-bubble-vita: #f3efe7;
--vc-bubble-vita-fg: #1b2630;
--vc-bubble-system: #efeae0;
--vc-bubble-system-fg: #5a5448;
--vc-emergency-bg: #fef4f2;
--vc-emergency-bd: #e7c4bf;
--vc-emergency-fg: #7f1d1d;
--vc-emergency-rule: #c0392b;
--vc-border: #e6ddc9;
--vc-border-soft: #ede5d4;
--vc-shadow-launcher: 0 6px 18px rgba(27, 38, 48, 0.18), 0 2px 4px rgba(27, 38, 48, 0.10);
--vc-shadow-panel: 0 16px 48px -12px rgba(27, 38, 48, 0.28), 0 4px 12px rgba(27, 38, 48, 0.08);
--vc-shadow-focus: 0 0 0 3px rgba(45, 106, 95, 0.22);
--vc-radius-panel: 20px;
--vc-radius-bubble: 18px;
--vc-radius-input: 14px;
--vc-radius-cta: 999px;
--vc-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
--vc-z: 2147483600;
--vc-launcher-bottom: 24px;
--vc-launcher-right: 24px;
--vc-panel-bottom: 24px;
--vc-panel-right: 24px;
}
/* ── Host element: zero-size anchor; resets that defeat inherited theme CSS
* (font, color, line-height, text-transform, letter-spacing all cross
* the shadow boundary by default — we re-set them on the host). ─────── */
:host {
all: initial;
display: block;
position: static;
height: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
font-family: var(--vc-font) !important;
font-size: 15px !important;
font-weight: 400 !important;
font-style: normal !important;
line-height: 1.5 !important;
color: var(--vc-fg) !important;
text-align: left !important;
text-transform: none !important;
letter-spacing: 0 !important;
word-spacing: 0 !important;
white-space: normal !important;
direction: ltr !important;
text-shadow: none !important;
cursor: auto !important;
}
/* Same posture for the host element when viewed from the OUTSIDE
* (document stylesheet still loaded). */
.vita-chat-mount {
position: static;
min-height: 0 !important;
height: 0;
margin: 0;
padding: 0;
border: 0;
background: transparent;
font-family: var(--vc-font);
color: var(--vc-fg);
box-sizing: border-box;
}
/* Box-sizing for shadow descendants AND legacy non-shadow descendants. */
:host *, :host *::before, :host *::after,
.vita-chat-mount *,
.vita-chat-mount *::before,
.vita-chat-mount *::after {
box-sizing: border-box;
}
/* Visually-hidden utility — keeps role labels for screen readers. */
.vita-chat-sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* ── Launcher (closed state) ────────────────────────────────────────────── */
.vita-chat-launcher {
position: fixed;
right: var(--vc-launcher-right, 24px);
bottom: var(--vc-launcher-bottom, 24px);
z-index: var(--vc-z);
width: 60px;
height: 60px;
min-width: 60px;
min-height: 60px;
max-width: 60px;
max-height: 60px;
border-radius: 999px;
border: 0;
outline: none;
cursor: pointer;
background: linear-gradient(135deg, #2d6a5f 0%, #1c4540 100%);
color: #fbfaf6;
box-shadow: var(--vc-shadow-launcher);
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
margin: 0;
font-family: var(--vc-font);
font-size: 0;
line-height: 0;
text-transform: none;
letter-spacing: 0;
text-decoration: none;
-webkit-appearance: none;
appearance: none;
-webkit-tap-highlight-color: transparent;
transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, opacity 0.16s ease;
}
.vita-chat-launcher:hover {
transform: translateY(-1px);
box-shadow: 0 8px 22px rgba(27, 38, 48, 0.22), 0 3px 6px rgba(27, 38, 48, 0.12);
}
.vita-chat-launcher:active {
transform: translateY(0);
}
.vita-chat-launcher:focus-visible {
outline: none;
box-shadow: var(--vc-shadow-launcher), var(--vc-shadow-focus);
}
.vita-chat-launcher-icon {
width: 26px;
height: 26px;
display: block;
fill: currentColor;
}
/* Subtle one-time pulse on first paint to draw the eye without being annoying. */
.vita-chat-launcher::after {
content: "";
position: absolute;
inset: -4px;
border-radius: 999px;
border: 2px solid rgba(45, 106, 95, 0.45);
opacity: 0;
animation: vita-chat-pulse 2.4s ease-out 0.4s 2;
pointer-events: none;
}
@keyframes vita-chat-pulse {
0% { transform: scale(0.9); opacity: 0.6; }
100% { transform: scale(1.25); opacity: 0; }
}
.vita-chat-launcher[aria-expanded="true"]::after {
animation: none;
}
/* Hide the launcher when the panel is open. */
.vita-chat-launcher[aria-expanded="true"] {
transform: scale(0.9);
opacity: 0;
pointer-events: none;
}
/* ── Panel (open state) ─────────────────────────────────────────────────── */
.vita-chat-panel {
position: fixed;
right: var(--vc-panel-right, 24px);
bottom: var(--vc-panel-bottom, 24px);
z-index: var(--vc-z);
width: 400px;
max-width: calc(100vw - 32px);
height: 640px;
max-height: calc(100vh - 48px);
margin: 0;
background: var(--vc-bg);
border: 1px solid var(--vc-border-soft);
border-radius: var(--vc-radius-panel);
box-shadow: var(--vc-shadow-panel);
display: flex;
flex-direction: column;
overflow: hidden;
transform: translateY(12px) scale(0.98);
opacity: 0;
transform-origin: bottom right;
transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
opacity 0.18s ease-out;
font-family: var(--vc-font);
font-size: 15px;
line-height: 1.55;
color: var(--vc-fg);
text-align: left;
}
.vita-chat-panel[data-open="true"] {
transform: translateY(0) scale(1);
opacity: 1;
pointer-events: auto;
}
.vita-chat-panel[data-open="false"] {
pointer-events: none;
}
/* ── Panel header ───────────────────────────────────────────────────────── */
.vita-chat-panel-header {
display: flex;
align-items: center;
gap: 14px;
padding: 18px 20px 16px;
border-bottom: 1px solid var(--vc-border-soft);
background: var(--vc-bg-panel-header);
}
.vita-chat-avatar {
flex: 0 0 auto;
width: 36px;
height: 36px;
border-radius: 999px;
background: linear-gradient(135deg, #2d6a5f 0%, #1c4540 100%);
color: #fbfaf6;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 14px;
letter-spacing: 0.02em;
position: relative;
}
.vita-chat-avatar::after {
content: "";
position: absolute;
right: -1px;
bottom: -1px;
width: 10px;
height: 10px;
border-radius: 999px;
background: #6ec984;
border: 2px solid var(--vc-bg-panel-header);
}
.vita-chat-header {
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.vita-chat-title {
font-weight: 600;
font-size: 14.5px;
letter-spacing: -0.005em;
color: var(--vc-fg);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.vita-chat-subtitle {
color: var(--vc-fg-soft);
font-size: 12.5px;
line-height: 1.4;
}
.vita-chat-close {
flex: 0 0 auto;
width: 32px;
height: 32px;
min-width: 32px;
min-height: 32px;
border-radius: 999px;
border: 0;
outline: none;
background: transparent;
color: var(--vc-fg-soft);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
margin: 0;
font: inherit;
-webkit-appearance: none;
appearance: none;
-webkit-tap-highlight-color: transparent;
transition: background 0.15s ease, color 0.15s ease;
}
.vita-chat-close:hover,
.vita-chat-close:focus-visible {
background: var(--vc-accent-soft-bg);
color: var(--vc-fg);
outline: none;
}
.vita-chat-close svg {
width: 16px;
height: 16px;
fill: currentColor;
}
/* ── Panel body — host for intake form OR chat log ──────────────────────── */
.vita-chat-panel-body {
flex: 1 1 auto;
overflow-y: auto;
overflow-x: hidden;
display: flex;
flex-direction: column;
scrollbar-width: thin;
scrollbar-color: var(--vc-border) transparent;
}
.vita-chat-panel-body::-webkit-scrollbar { width: 6px; }
.vita-chat-panel-body::-webkit-scrollbar-track { background: transparent; }
.vita-chat-panel-body::-webkit-scrollbar-thumb { background: var(--vc-border); border-radius: 999px; }
/* ── Intake form (pre-chat) ─────────────────────────────────────────────── */
.vita-chat-intake {
display: flex;
flex-direction: column;
gap: 16px;
padding: 24px 22px 22px;
}
.vita-chat-intake-greeting {
font-size: 18px;
line-height: 1.4;
font-weight: 600;
color: var(--vc-fg);
letter-spacing: -0.01em;
margin: 0;
}
.vita-chat-intake-blurb {
margin: 0;
font-size: 14px;
line-height: 1.55;
color: var(--vc-fg-soft);
}
.vita-chat-intake-form {
display: flex;
flex-direction: column;
gap: 14px;
margin-top: 4px;
}
.vita-chat-field {
display: flex;
flex-direction: column;
gap: 5px;
}
.vita-chat-field-label {
font-size: 12.5px;
font-weight: 500;
color: var(--vc-fg-soft);
letter-spacing: 0.01em;
}
.vita-chat-field-input {
width: 100%;
min-width: 0;
max-width: none;
margin: 0;
padding: 13px 14px;
font-family: inherit;
font-size: 15px;
font-weight: 400;
line-height: 1.4;
letter-spacing: 0;
text-transform: none;
text-align: left;
color: var(--vc-fg);
background: var(--vc-bg-input);
border: 1px solid var(--vc-border);
border-radius: var(--vc-radius-input);
outline: none;
box-shadow: none;
display: block;
-webkit-appearance: none;
appearance: none;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.vita-chat-field-input::placeholder {
color: var(--vc-muted);
opacity: 1;
}
.vita-chat-field-input:focus {
outline: none;
border-color: var(--vc-accent);
box-shadow: var(--vc-shadow-focus);
}
.vita-chat-field-input[aria-invalid="true"] {
border-color: var(--vc-emergency-rule);
}
.vita-chat-field-error {
font-size: 12.5px;
color: var(--vc-emergency-fg);
min-height: 0;
}
.vita-chat-intake-cta {
margin: 6px 0 0;
width: 100%;
min-width: 0;
max-width: none;
padding: 14px 18px;
background: var(--vc-accent);
color: var(--vc-accent-fg);
border: 1px solid var(--vc-accent);
border-radius: var(--vc-radius-input);
outline: none;
font-family: inherit;
font-size: 15px;
font-weight: 600;
letter-spacing: 0.01em;
line-height: 1.2;
text-transform: none;
text-decoration: none;
text-align: center;
cursor: pointer;
display: block;
-webkit-appearance: none;
appearance: none;
-webkit-tap-highlight-color: transparent;
box-shadow: none;
transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}
.vita-chat-intake-cta:hover,
.vita-chat-intake-cta:focus-visible {
background: var(--vc-accent-hover);
border-color: var(--vc-accent-hover);
outline: none;
box-shadow: var(--vc-shadow-focus);
}
.vita-chat-intake-cta:active {
background: var(--vc-accent-active);
transform: translateY(1px);
}
.vita-chat-intake-cta:disabled {
opacity: 0.55;
cursor: not-allowed;
}
.vita-chat-privacy {
margin: 6px 0 0;
font-size: 11.5px;
line-height: 1.5;
color: var(--vc-muted);
text-align: center;
}
.vita-chat-privacy a {
color: var(--vc-fg-soft);
text-decoration: underline;
text-decoration-color: var(--vc-border);
text-underline-offset: 2px;
}
/* ── Conversation log (chat state) ──────────────────────────────────────── */
.vita-chat-log {
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 12px;
min-height: 0;
padding: 18px 18px 8px;
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
scrollbar-color: var(--vc-border) transparent;
}
.vita-chat-log::-webkit-scrollbar { width: 6px; }
.vita-chat-log::-webkit-scrollbar-track { background: transparent; }
.vita-chat-log::-webkit-scrollbar-thumb { background: var(--vc-border); border-radius: 999px; }
/* ── Bubbles ────────────────────────────────────────────────────────────── */
.vita-chat-bubble {
border-radius: var(--vc-radius-bubble);
padding: 12px 16px;
max-width: 84%;
word-wrap: break-word;
overflow-wrap: anywhere;
line-height: 1.5;
font-size: 14.75px;
position: relative;
}
.vita-chat-user {
align-self: flex-end;
background: var(--vc-bubble-user);
color: var(--vc-bubble-user-fg);
border-bottom-right-radius: 6px;
}
.vita-chat-vita {
align-self: flex-start;
background: var(--vc-bubble-vita);
color: var(--vc-bubble-vita-fg);
border-bottom-left-radius: 6px;
}
.vita-chat-system {
align-self: center;
background: var(--vc-bubble-system);
color: var(--vc-bubble-system-fg);
font-size: 13px;
text-align: center;
padding: 9px 14px;
max-width: 90%;
}
/* Emergency — preserved class + role="alert" (functional contract). */
.vita-chat-emergency {
background: var(--vc-emergency-bg);
border: 1px solid var(--vc-emergency-bd);
color: var(--vc-emergency-fg);
box-shadow: inset 4px 0 0 var(--vc-emergency-rule);
padding-left: 16px;
}
.vita-chat-emergency .vita-chat-text {
color: var(--vc-emergency-fg);
font-weight: 500;
}
/* Role labels — sr-only by default; visible only in debug mode. */
.vita-chat-role {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
:host(.vita-chat-debug) .vita-chat-role,
.vita-chat-mount.vita-chat-debug .vita-chat-role {
position: static !important;
width: auto !important;
height: auto !important;
margin: 0 0 4px 0 !important;
overflow: visible !important;
clip: auto !important;
white-space: normal !important;
font-weight: 600;
font-size: 10.5px;
color: var(--vc-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.vita-chat-text {
white-space: pre-wrap;
}
/* CTA — pill, deep jade. */
.vita-chat-cta {
display: inline-block;
margin-top: 10px;
padding: 8px 16px;
background: var(--vc-accent);
color: var(--vc-accent-fg);
text-decoration: none;
border-radius: var(--vc-radius-cta);
font-weight: 500;
font-size: 13.5px;
transition: background 0.15s ease, box-shadow 0.15s ease;
}
.vita-chat-cta:hover { background: var(--vc-accent-hover); }
.vita-chat-cta:focus-visible {
background: var(--vc-accent-hover);
outline: none;
box-shadow: var(--vc-shadow-focus);
}
.vita-chat-next {
margin-top: 8px;
font-size: 13px;
color: var(--vc-fg-soft);
font-style: italic;
line-height: 1.5;
}
/* ── Typing indicator ───────────────────────────────────────────────────── */
.vita-chat-typing {
align-self: flex-start;
background: var(--vc-bubble-vita);
border-radius: var(--vc-radius-bubble);
border-bottom-left-radius: 6px;
padding: 12px 14px;
display: inline-flex;
gap: 4px;
}
.vita-chat-typing span {
width: 6px;
height: 6px;
background: var(--vc-muted);
border-radius: 999px;
animation: vita-chat-typing-bounce 1.2s infinite ease-in-out;
}
.vita-chat-typing span:nth-child(2) { animation-delay: 0.15s; }
.vita-chat-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes vita-chat-typing-bounce {
0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
30% { transform: translateY(-3px); opacity: 1; }
}
/* ── Composer (chat input row) ──────────────────────────────────────────── */
.vita-chat-composer {
flex: 0 0 auto;
display: flex;
align-items: flex-end;
gap: 10px;
padding: 14px 18px 16px;
border-top: 1px solid var(--vc-border-soft);
background: var(--vc-bg);
}
.vita-chat-input-row {
/* Legacy alias for tests/fixtures that referenced the old class name. */
flex: 1 1 auto;
display: flex;
align-items: flex-end;
gap: 8px;
}
.vita-chat-input {
flex: 1 1 auto;
width: 100%;
min-width: 0;
resize: none;
min-height: 46px;
max-height: 140px;
margin: 0;
padding: 13px 16px;
border: 1px solid var(--vc-border);
border-radius: var(--vc-radius-input);
outline: none;
font-family: inherit;
font-size: 15px;
font-weight: 400;
line-height: 1.45;
letter-spacing: 0;
text-transform: none;
text-align: left;
color: var(--vc-fg);
background: var(--vc-bg-input);
box-shadow: none;
-webkit-appearance: none;
appearance: none;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.vita-chat-input::placeholder {
color: var(--vc-muted);
opacity: 1;
}
.vita-chat-input:focus {
outline: none;
border-color: var(--vc-accent);
box-shadow: var(--vc-shadow-focus);
}
.vita-chat-input:disabled {
background: #f5f1ea;
color: var(--vc-muted);
cursor: not-allowed;
}
.vita-chat-send {
flex: 0 0 auto;
width: 46px;
height: 46px;
min-width: 46px;
min-height: 46px;
max-width: 46px;
max-height: 46px;
padding: 0;
margin: 0;
background: var(--vc-accent);
color: var(--vc-accent-fg);
border: 1px solid var(--vc-accent);
border-radius: 999px;
outline: none;
font: inherit;
font-size: 0;
line-height: 0;
text-transform: none;
letter-spacing: 0;
text-decoration: none;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
-webkit-appearance: none;
appearance: none;
-webkit-tap-highlight-color: transparent;
box-shadow: none;
transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}
.vita-chat-send svg {
width: 18px;
height: 18px;
fill: currentColor;
}
.vita-chat-send:hover,
.vita-chat-send:focus-visible {
background: var(--vc-accent-hover);
border-color: var(--vc-accent-hover);
outline: none;
box-shadow: var(--vc-shadow-focus);
}
.vita-chat-send:active {
background: var(--vc-accent-active);
transform: translateY(1px);
}
.vita-chat-send:disabled {
opacity: 0.55;
cursor: not-allowed;
}
/* ── Status + footer ────────────────────────────────────────────────────── */
.vita-chat-status {
font-size: 11.5px;
color: var(--vc-muted);
min-height: 0;
padding: 0 18px;
letter-spacing: 0.01em;
}
.vita-chat-status:empty { padding: 0; }
.vita-chat-status-ok { color: var(--vc-fg-soft); }
.vita-chat-status-error { color: var(--vc-emergency-fg); }
.vita-chat-status-busy { color: var(--vc-fg-soft); font-style: italic; }
.vita-chat-footer {
font-size: 11.5px;
color: var(--vc-muted);
text-align: center;
padding: 8px 18px 14px;
letter-spacing: 0.01em;
}
/* ── Turnstile ──────────────────────────────────────────────────────────── */
.vita-chat-turnstile {
display: flex;
justify-content: center;
min-height: 0;
padding: 0;
}
.vita-chat-turnstile[aria-hidden="true"] {
display: none;
}
.vita-chat-intake .vita-chat-turnstile {
padding-top: 2px;
}
.vita-chat-turnstile-failed {
font-size: 12.5px;
color: var(--vc-emergency-fg);
padding: 8px 12px;
text-align: center;
background: var(--vc-emergency-bg);
border: 1px solid var(--vc-emergency-bd);
border-radius: 10px;
}
/* Turnstile host — light-DOM element appended to document.body for Cloudflare
* to render into. Cloudflare's silent-pass-detection observers do not traverse
* shadow-root boundaries, so the container must live in light DOM. Positioned
* fixed to overlay the panel's slot area visually. */
.vita-chat-turnstile-host {
position: fixed !important;
right: 42px; /* panel right 24px + panel inner pad 18px */
bottom: 110px; /* above the composer area inside the panel */
width: 296px; /* fits inside panel inner width (400 - 36) */
max-width: calc(100vw - 32px);
z-index: 2147483600;
display: none;
background: transparent;
border: 0;
padding: 0;
margin: 0;
box-sizing: border-box;
}
.vita-chat-turnstile-host[data-visible="true"] {
display: block;
}
@media (max-width: 480px) {
.vita-chat-turnstile-host {
right: 16px;
left: 16px;
width: auto;
bottom: 90px;
}
}
/* Busy state — used during session start + sending. */
.vita-chat-busy { opacity: 0.96; }
/* ── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
/* Defer right/bottom to the host-set CSS variables so the JS coexistence
* lift (adjustForExistingFloatingButton) carries through on mobile. Literal
* values here previously overrode the lift and collided with the
* .floating-button "Tap to Call" CTA. 16px is the mobile fallback when no
* floating CTA is detected. */
.vita-chat-launcher {
right: var(--vc-launcher-right, 16px);
bottom: var(--vc-launcher-bottom, 16px);
width: 56px;
height: 56px;
}
.vita-chat-panel {
right: 0;
bottom: 0;
width: 100vw;
max-width: 100vw;
height: 100dvh;
max-height: 100dvh;
border-radius: 0;
border: 0;
}
.vita-chat-panel-header {
padding-top: max(16px, env(safe-area-inset-top));
}
.vita-chat-composer {
padding-bottom: max(14px, env(safe-area-inset-bottom));
}
.vita-chat-bubble { max-width: 88%; }
}
/* ── Dark mode ──────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
:host,
.vita-chat-mount {
--vc-bg: #16191e;
--vc-bg-input: #1d2128;
--vc-bg-panel-header: #1a1d23;
--vc-fg: #ecebe7;
--vc-fg-soft: #c0c0b9;
--vc-muted: #8a857a;
--vc-accent: #6ec5b3;
--vc-accent-hover: #84d1c2;
--vc-accent-active: #5db2a0;
--vc-accent-fg: #0c1416;
--vc-accent-soft-bg: rgba(110, 197, 179, 0.12);
--vc-bubble-user: #233a35;
--vc-bubble-user-fg: #d8e8e3;
--vc-bubble-vita: #20242b;
--vc-bubble-vita-fg: #ecebe7;
--vc-bubble-system: #26241e;
--vc-bubble-system-fg: #c0bba9;
--vc-emergency-bg: #2a1414;
--vc-emergency-bd: #4a1f1f;
--vc-emergency-fg: #fca5a5;
--vc-emergency-rule: #ef4444;
--vc-border: #2c2f37;
--vc-border-soft: #232730;
--vc-shadow-launcher: 0 6px 18px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.30);
--vc-shadow-panel: 0 16px 48px -12px rgba(0, 0, 0, 0.65), 0 4px 12px rgba(0, 0, 0, 0.35);
--vc-shadow-focus: 0 0 0 3px rgba(110, 197, 179, 0.28);
}
}
/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.vita-chat-launcher,
.vita-chat-panel,
.vita-chat-launcher::after,
.vita-chat-typing span,
:host *, :host *::before, :host *::after,
.vita-chat-mount *,
.vita-chat-mount *::before,
.vita-chat-mount *::after {
transition: none !important;
animation: none !important;
}
}