:root { --bg-0: #06050c; --fg-0: #f7f5ff; --fg-mute: #8e88a9; --fg-dim: #5b5577; --rim: #fda4af; --bg-gradient: radial-gradient(85% 60% at 50% -10%, #1a1138 0%, transparent 70%), radial-gradient(60% 50% at 90% 100%, #2a1138 0%, transparent 70%), radial-gradient(50% 40% at 10% 90%, #142036 0%, transparent 70%); } /* Light mode — default. Toggled via `data-theme="dark"` on . Variables * cover anything the landing / Eva chat consume; the dashboard already lives * inside `.db-root` which is opinionated about its own palette. */ :root[data-theme="light"], :root:not([data-theme]) { --bg-0: #f7f8fa; --fg-0: #0f172a; --fg-mute: #6a6f7e; --fg-dim: #9aa0ad; --rim: #6366f1; --bg-gradient: radial-gradient(80% 60% at 50% -10%, rgba(196, 181, 253, 0.20) 0%, transparent 60%), radial-gradient(50% 50% at 100% 100%, rgba(125, 211, 252, 0.16) 0%, transparent 65%), radial-gradient(50% 40% at 0% 90%, rgba(244, 114, 182, 0.10) 0%, transparent 70%); /* Build 223 — unified border palette. The dashboard's many panels * used to mix #e6e7ec / #ececf2 / #d8dbe4 / #eef0f4; sweep them * onto these variables so the entire app shares one card-border * tone. Existing literals stay until the next theme refresh. */ --db-border: #e6e7ec; /* panel outlines */ --db-border-soft: #eef0f4; /* row dividers, sub-grid */ --db-border-strong: #d8dbe4; /* form-control outline */ } :root[data-theme="dark"] { --db-border: #2a2f3e; --db-border-soft: #1f2433; --db-border-strong: #353b4d; } * { box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Respect prefers-reduced-motion — collapse all animations and transitions to * near-instant. The VoiceBlob has a JS-driven render loop; that's gated in * voice-blob.js separately. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } html, body, #root { margin: 0; padding: 0; height: 100%; overflow: hidden; } body { background: var(--bg-gradient), var(--bg-0); color: var(--fg-0); font: 15px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Helvetica Neue", sans-serif; letter-spacing: -0.012em; user-select: none; -webkit-user-select: none; touch-action: manipulation; } button { border: 0; background: transparent; cursor: pointer; padding: 0; color: inherit; font: inherit; } /* ── Material Symbols (build 230) ────────────────────────────────────────── * Single base rule for every Material Symbol the app renders. Loaded as a * Google Fonts variable font in index.html. Variation axes pinned here so * every icon picks up the same outlined, 400-weight, optical-size-20 look * regardless of which sidebar / page renders it. * * `font-variation-settings` is the modern way to drive Material Symbols — * the four axes are FILL (0=outline, 1=filled), wght (300-700 stroke), * GRAD (-50..200 emphasis), opsz (20..48 optical size). We pick a clean * outlined 400/0/20 default and let component-level overrides tune. * `user-select:none` so the icon ligature text never appears in a copy. */ .material-symbols-outlined { font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; font-feature-settings: 'liga'; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20; user-select: none; -webkit-user-select: none; vertical-align: middle; } /* The wrapper component sets font-size inline; this guards width * from a stretched cap-height in flex layouts. */ .sxai-micon { flex-shrink: 0; } /* ── stage ─────────────────────────────────────────────────────────────── */ .stage { /* Only mounted in call view now. Landing renders the orb inside .lp. */ position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } /* the blob is the only interactive surface */ .blob-tap { appearance: none; background: transparent; border: 0; cursor: pointer; border-radius: 999px; position: relative; outline: none; transition: transform 0.5s cubic-bezier(.2, .9, .3, 1), filter 0.4s ease; } .blob-tap:active { transform: scale(0.985); } .blob-tap:focus-visible::after { content: ""; position: absolute; inset: -12px; border: 1px solid rgba(244, 114, 182, 0.4); border-radius: 999px; } /* ── voice blob component ──────────────────────────────────────────────── */ .vb-wrap { position: relative; display: block; } .vb-halo { position: absolute; inset: 0; border-radius: 50%; filter: blur(36px); transition: opacity 0.2s ease, transform 0.2s ease; pointer-events: none; } .vb-svg, .vb-spark, .vb-waves { position: absolute; inset: 0; pointer-events: none; } .vb-spark { mix-blend-mode: screen; } /* Light theme: screen-blend makes the violet motes wash into the cream bg. * Multiply lets the same canvas TINT the page underneath — sparks become * brand-violet pinpricks instead of vanishing. */ :root[data-theme="light"] .vb-spark, :root:not([data-theme]) .vb-spark { mix-blend-mode: multiply; } .vb-waves { /* The rings extend BEYOND the wrap's bounding box; we need overflow:visible * on the SVG itself (inline) AND no clipping on the container. Screen-blend * keeps them feeling like glowing light rather than opaque ink. */ overflow: visible; mix-blend-mode: screen; /* A soft glow on the strokes themselves — feels like the rings are made * of light rather than lines drawn on glass. */ filter: drop-shadow(0 0 6px rgba(244, 114, 182, 0.35)); } /* ── brand splash (first-load only) ───────────────────────────────────── */ .brandsplash { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--bg-0); z-index: 100; opacity: 1; transition: opacity 0.6s ease; pointer-events: none; } .brandsplash.gone { opacity: 0; } .brandsplash .brandmark { /* Real SVG logo — white wordmark + red X. Aspect ratio ~5.5:1, so we set * height and let width auto-scale. Subtle glow makes it feel embedded in * the dark gradient rather than pasted on top. 2x'd to 60px — the splash * is a one-second moment that should land confidently before the orb * takes over the landing surface. */ height: 60px; width: auto; display: block; opacity: 0; animation: bsfade 1.6s ease forwards; filter: drop-shadow(0 0 24px rgba(244, 114, 182, 0.22)); } @keyframes bsfade { 0% { opacity: 0; transform: translateY(2px); } 35% { opacity: 1; transform: translateY(0); } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(-2px); } } /* ── landing page — Apple-styled hero + CTA ─────────────────────────────── * * The landing is a 3-row flex column that fills the viewport so the hero / * orb / CTA share the screen with predictable spacing at any aspect ratio. * Earlier we used absolute positioning for hero (top:14%) + cta (bottom:11%) * with the orb floating in the middle — at tall viewports the hero would * overflow into the orb and the bottom would stay empty. The flex layout * fixes that: each row gets its share, the orb sits in the middle row, and * the rows can't visually collide. */ .lp { position: fixed; inset: 0; z-index: 4; display: flex; flex-direction: column; /* Centred column with explicit gaps. The orb now lives INSIDE this flex * flow as a sibling between hero and cta — so it can never crash into * either. Used to be `space-between` with the orb absolutely positioned; * that left them touching on short / tall viewports depending on padding. */ justify-content: center; align-items: center; gap: clamp(20px, 3.5vh, 40px); padding: clamp(48px, 7vh, 96px) 24px clamp(40px, 6vh, 80px); pointer-events: none; overflow: hidden; } .lp-orb { display: flex; align-items: center; justify-content: center; pointer-events: auto; opacity: 0; animation: lpfadein 0.9s ease 0.3s forwards; } /* ─── Landing prompt composer ───────────────────────────────────────────── * The textarea + Submit/Mic row that replaced the voice-only orb hero. * Designed to look like an inviting first message — soft border, comfy * height, primary submit on the right, secondary mic on the left. * Width caps at 640px so the textarea doesn't sprawl on wide monitors. */ .lp-composer { pointer-events: auto; width: min(640px, calc(100vw - 48px)); display: flex; flex-direction: column; background: #ffffff; border: 1px solid #e5e7ec; border-radius: 16px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06); overflow: hidden; opacity: 0; animation: lpfadein 0.7s ease 0.18s forwards; transition: border-color 0.15s ease, box-shadow 0.18s ease; } .lp-composer:focus-within { border-color: #c2c7d4; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 10px 28px rgba(15, 23, 42, 0.10); } .lp-composer-input { width: 100%; border: 0; outline: 0; resize: none; background: transparent; font-family: inherit; font-size: 15.5px; line-height: 1.5; color: #1a1a1a; padding: 16px 18px 6px; min-height: 96px; } .lp-composer-input::placeholder { color: #a3a8b8; } .lp-composer-actions { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px 10px 14px; gap: 12px; } /* The Mic-instead button — secondary affordance, lives on the left. Subtle by default so it doesn't compete with Submit; activates a soft warm glow on hover so the path is still discoverable. */ .lp-composer-mic { display: inline-flex; align-items: center; gap: 6px; font-family: inherit; font-size: 13.5px; font-weight: 500; color: #5a606e; background: transparent; border: 1px solid transparent; padding: 6px 10px 6px 8px; border-radius: 999px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .lp-composer-mic:hover { background: #fff4e0; border-color: #f3d88a; color: #9a5b00; } .lp-composer-mic svg { opacity: 0.9; } /* Primary submit. Brand-coloured pill — clearly the "go" affordance. */ .lp-composer-submit { display: inline-flex; align-items: center; gap: 8px; font-family: inherit; font-size: 14px; font-weight: 600; letter-spacing: 0.005em; color: #ffffff; background: linear-gradient(135deg, #1f2937, #374151); border: 0; padding: 9px 16px 9px 18px; border-radius: 999px; cursor: pointer; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18); transition: transform 0.12s ease, box-shadow 0.18s ease, background 0.18s ease; } .lp-composer-submit:hover { background: linear-gradient(135deg, #111827, #1f2937); box-shadow: 0 2px 6px rgba(15, 23, 42, 0.22); } .lp-composer-submit:active { transform: translateY(1px); } .lp-composer-submit:disabled { background: #cdd1db; color: #ffffff; cursor: not-allowed; box-shadow: none; } /* ─── Starter-prompt chips ─────────────────────────────────────────────── * Quick-pick suggestions under the composer. Click → opens the chat * surface with the prompt pre-filled as turn 1. Designed to look like * gentle "or try one of these" cards — not so loud they steal focus * from the composer above. */ /* ─── Industry preset selector ──────────────────────────────────────────── * A compact "I'm building for [Any industry ▾]" row above the composer. * Picking an industry reskins the hero + presets the build's industry * context. Styled as an inline pill so it reads like a sentence, not a form. */ .lp-industry { pointer-events: auto; display: inline-flex; align-items: center; gap: 8px; margin-bottom: -6px; opacity: 0; animation: lpfadein 0.7s ease 0.14s forwards; } .lp-industry-label { font-size: 13.5px; font-weight: 500; color: #6b7280; letter-spacing: 0.01em; } .lp-industry-field { position: relative; display: inline-flex; align-items: center; gap: 6px; background: #ffffff; border: 1px solid #e5e7ec; border-radius: 999px; padding: 5px 30px 5px 11px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .lp-industry-field:hover { border-color: #c2c7d4; } .lp-industry-field:focus-within { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15); } .lp-industry-emoji { font-size: 15px; line-height: 1; } .lp-industry-select { appearance: none; -webkit-appearance: none; font-family: inherit; font-size: 13.5px; font-weight: 600; color: #1f2937; background: transparent; border: 0; outline: none; cursor: pointer; padding: 0; margin: 0; } .lp-industry-chev { position: absolute; right: 11px; color: #9aa0ad; pointer-events: none; } :root[data-theme="dark"] .lp-industry-label { color: #9aa0ad; } :root[data-theme="dark"] .lp-industry-field { background: #131722; border-color: #262b3a; } :root[data-theme="dark"] .lp-industry-field:hover { border-color: #3a4054; } :root[data-theme="dark"] .lp-industry-select { color: #e7e9ee; } :root[data-theme="dark"] .lp-industry-select option { background: #131722; color: #e7e9ee; } .lp-starters { pointer-events: auto; width: min(640px, calc(100vw - 48px)); margin-top: -4px; opacity: 0; animation: lpfadein 0.7s ease 0.25s forwards; } .lp-starters-label { font-size: 12.5px; color: #8a8e9c; margin-bottom: 8px; letter-spacing: 0.01em; } .lp-starters-chips { display: flex; flex-wrap: wrap; gap: 6px 8px; } .lp-starter-chip { display: inline-flex; align-items: center; gap: 6px; font-family: inherit; font-size: 13.5px; font-weight: 500; color: #1f2937; background: #ffffff; border: 1px solid #e5e7ec; border-radius: 999px; padding: 6px 12px 6px 8px; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease; } .lp-starter-chip:hover { background: #f4f5f8; border-color: #c2c7d4; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06); } .lp-starter-chip:active { transform: scale(0.97); } .lp-starter-emoji { font-size: 14px; line-height: 1; display: inline-flex; align-items: center; } :root[data-theme="dark"] .lp-starters-label { color: #8a8e9c; } :root[data-theme="dark"] .lp-starter-chip { background: #131722; color: #e7e9ee; border-color: #262b3a; } :root[data-theme="dark"] .lp-starter-chip:hover { background: #1c2030; border-color: #3a4054; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); } /* "Open your agents" tertiary link below the composer (returning users). */ .lp-altrow { pointer-events: auto; display: flex; justify-content: center; opacity: 0; animation: lpfadein 0.7s ease 0.32s forwards; } .lp-alt { display: inline-flex; align-items: center; gap: 8px; font-family: inherit; font-size: 13.5px; font-weight: 500; color: #4a5063; background: transparent; border: 0; padding: 4px 6px; cursor: pointer; border-radius: 6px; transition: color 0.15s ease, background 0.15s ease; } .lp-alt:hover { color: #1a1a1a; background: rgba(15, 23, 42, 0.04); } /* Dark-theme overrides for the composer + alt link. */ :root[data-theme="dark"] .lp-composer { background: #131722; border-color: #262b3a; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 10px 28px rgba(0, 0, 0, 0.35); } :root[data-theme="dark"] .lp-composer:focus-within { border-color: #404656; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 14px 36px rgba(0, 0, 0, 0.45); } :root[data-theme="dark"] .lp-composer-input { color: #e7e9ee; } :root[data-theme="dark"] .lp-composer-input::placeholder { color: #6a6f7e; } :root[data-theme="dark"] .lp-composer-mic { color: #b3b8c5; } :root[data-theme="dark"] .lp-composer-mic:hover { background: rgba(245, 158, 11, 0.10); border-color: rgba(245, 158, 11, 0.35); color: #f5c97a; } :root[data-theme="dark"] .lp-composer-submit { background: linear-gradient(135deg, #4a5063, #5b6173); color: #ffffff; } :root[data-theme="dark"] .lp-composer-submit:hover { background: linear-gradient(135deg, #5b6173, #6c7387); } :root[data-theme="dark"] .lp-composer-submit:disabled { background: #2a2e44; color: #6a6f7e; } :root[data-theme="dark"] .lp-alt { color: #b3b8c5; } :root[data-theme="dark"] .lp-alt:hover { color: #f5f7fb; background: rgba(255, 255, 255, 0.04); } /* ─── Landing chat view ────────────────────────────────────────────────── * Text-first build surface (LandingChatView). Mounts when the operator * submits a prompt on the landing composer. Looks and feels like a * modern AI chat product — header strip with connection state + voice * toggle, scrollable thread, composer pinned at the bottom. */ .lp-chat { position: fixed; inset: 0; z-index: 5; display: flex; flex-direction: column; /* Transparent so the home ambient art (LandingArt, rendered behind at z:1) + the page gradient show through around the centred chat card — the chat with Eva gets the exact same backdrop as the landing page. The card stack (head / thread / qcard / composer) stays opaque, so readability is unaffected; the art only fills the margins. */ background: transparent; padding: clamp(48px, 7vh, 88px) 16px 16px; align-items: center; pointer-events: auto; animation: lp-chat-in 0.32s cubic-bezier(.2,.9,.3,1); } @keyframes lp-chat-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .lp-chat-head { width: min(720px, calc(100vw - 32px)); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 14px; background: #ffffff; border: 1px solid #e5e7ec; border-radius: 14px 14px 0 0; border-bottom: 0; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); } .lp-chat-head-left { display: flex; align-items: center; gap: 10px; min-width: 0; } .lp-chat-head-right { display: flex; align-items: center; gap: 6px; } .lp-chat-dot { width: 8px; height: 8px; border-radius: 50%; background: #c5c8d4; flex: 0 0 8px; } .lp-chat-dot-connecting { background: #f5b342; animation: lp-chat-pulse 1.2s ease infinite; } .lp-chat-dot-ready { background: #16a34a; } .lp-chat-dot-error { background: #dc2626; } .lp-chat-dot-ended { background: #c5c8d4; } @keyframes lp-chat-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } .lp-chat-title { font-size: 14.5px; font-weight: 600; color: #1a1a1a; letter-spacing: -0.005em; } .lp-chat-state { font-size: 12.5px; color: #7a7e88; margin-left: 4px; } .lp-chat-eta { font-size: 12px; color: #2563eb; margin-left: 4px; font-weight: 500; } /* Thin progress bar slotted between the header and the thread. Fills as the operator answers template questions. */ .lp-chat-progress { width: min(720px, calc(100vw - 32px)); height: 3px; background: #e5e7ec; border-left: 1px solid #e5e7ec; border-right: 1px solid #e5e7ec; overflow: hidden; } .lp-chat-progress-fill { height: 100%; background: linear-gradient(90deg, #6366f1, #2563eb); border-radius: 0 2px 2px 0; transition: width 0.45s cubic-bezier(.2,.9,.3,1); } :root[data-theme="dark"] .lp-chat-progress { background: #1c2030; border-color: #262b3a; } :root[data-theme="dark"] .lp-chat-eta { color: #93c5fd; } /* Confetti — pure-CSS sprites that drop from the top with a soft tumble. Mounted only when celebrate=true (~900ms), then unmounted along with the chat surface as the reveal animation kicks in. */ .lp-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 6; } .lp-confetti-piece { position: absolute; top: -16px; width: 8px; height: 14px; border-radius: 2px; opacity: 0.92; animation-name: lp-confetti-fall; animation-timing-function: cubic-bezier(.2,.7,.5,1); animation-fill-mode: forwards; transform-origin: center; } .lp-confetti-c0 { background: #f59e0b; } .lp-confetti-c1 { background: #ef4444; } .lp-confetti-c2 { background: #6366f1; } .lp-confetti-c3 { background: #10b981; } .lp-confetti-c4 { background: #ec4899; } @keyframes lp-confetti-fall { 0% { transform: translateY(-20px) rotate(0deg); opacity: 0; } 10% { opacity: 0.95; } 100% { transform: translateY(72vh) rotate(540deg); opacity: 0; } } .lp-chat-mic, .lp-chat-close { display: inline-flex; align-items: center; gap: 6px; font-family: inherit; font-size: 13px; font-weight: 500; color: #5a606e; background: transparent; border: 1px solid transparent; padding: 6px 10px; border-radius: 999px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .lp-chat-mic:hover { background: #fff4e0; border-color: #f3d88a; color: #9a5b00; } .lp-chat-close { padding: 6px 8px; } .lp-chat-close:hover { background: rgba(15, 23, 42, 0.06); color: #1a1a1a; } .lp-chat-thread { width: min(720px, calc(100vw - 32px)); flex: 1; min-height: 0; overflow-y: auto; padding: 18px 22px; background: #ffffff; border-left: 1px solid #e5e7ec; border-right: 1px solid #e5e7ec; display: flex; flex-direction: column; gap: 14px; scroll-behavior: smooth; } .lp-chat-msg { display: flex; gap: 10px; max-width: 100%; } .lp-chat-msg-eva { justify-content: flex-start; } .lp-chat-msg-user { justify-content: flex-end; } .lp-chat-msg-system { justify-content: center; } .lp-chat-avatar { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; background: linear-gradient(135deg, #ff8a3d, #ff5b8a); color: #ffffff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; letter-spacing: 0; margin-top: 2px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12); } .lp-chat-bubble { font-size: 14.5px; line-height: 1.55; padding: 10px 14px; border-radius: 14px; max-width: 540px; white-space: pre-wrap; word-wrap: break-word; } .lp-chat-msg-eva .lp-chat-bubble { background: #f4f5f8; color: #1a1a1a; border-bottom-left-radius: 4px; } .lp-chat-msg-user .lp-chat-bubble { background: linear-gradient(135deg, #1f2937, #374151); color: #ffffff; border-bottom-right-radius: 4px; } .lp-chat-msg-system .lp-chat-bubble { background: #fff4f4; color: #b91c1c; border: 1px solid #fecaca; font-size: 13px; max-width: 480px; } .lp-chat-caret { display: inline-block; margin-left: 2px; color: rgba(15, 23, 42, 0.45); animation: lp-chat-caret-blink 1s steps(2) infinite; } @keyframes lp-chat-caret-blink { to { opacity: 0; } } /* "Eva is thinking…" typing indicator — three pulsing dots. */ .lp-chat-msg-typing .lp-chat-bubble { background: #f4f5f8; padding: 12px 16px; display: inline-flex; align-items: center; gap: 5px; } .lp-chat-typing-dot { width: 6px; height: 6px; border-radius: 50%; background: #9aa0ad; animation: lp-chat-typing 1.2s ease infinite; } .lp-chat-typing-dot:nth-child(2) { animation-delay: 0.15s; } .lp-chat-typing-dot:nth-child(3) { animation-delay: 0.30s; } @keyframes lp-chat-typing { 0%, 60%, 100% { transform: scale(1); opacity: 0.45; } 30% { transform: scale(1.4); opacity: 1; } } /* ─── Question card (template-driven, structured) ──────────────────────── * Surfaces above the composer whenever a template_question event is * pending. Matches the screenshot reference: blue-tinted banner row, * white card body with progress + prompt + chips, soft outline. */ .lp-chat-qcard { width: min(720px, calc(100vw - 32px)); background: #ffffff; border: 1px solid #c8dbff; border-left-width: 2px; border-right-width: 2px; border-top: 0; margin-top: -1px; /* tuck under the thread's bottom border */ box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); overflow: hidden; } .lp-chat-qcard-banner { display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: #eef4ff; color: #1e4ed8; font-size: 13.5px; font-weight: 600; border-bottom: 1px solid #d6e3ff; } .lp-chat-qcard-banner-icon { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; background: #ffffff; color: #2563eb; border-radius: 50%; border: 1px solid #c8dbff; flex: 0 0 22px; } .lp-chat-qcard-body { padding: 14px 18px 16px; background: #f7f8fa; } .lp-chat-qcard-progress { font-size: 13.5px; font-weight: 700; color: #1a1a1a; margin-bottom: 4px; } .lp-chat-qcard-prompt { font-size: 15px; line-height: 1.5; color: #1a1a1a; } .lp-chat-qcard-hint { margin-top: 4px; font-size: 12.5px; color: #6a6f7e; line-height: 1.45; } .lp-chat-qcard-chips { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px 8px; } .lp-chat-qcard-chip { display: inline-flex; align-items: center; padding: 6px 12px; font-family: inherit; font-size: 13.5px; font-weight: 500; color: #1f2937; background: #ffffff; border: 1px solid #d6dae3; border-radius: 999px; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease; } .lp-chat-qcard-chip:hover { background: #eef4ff; border-color: #2563eb; color: #1e4ed8; box-shadow: 0 1px 2px rgba(37, 99, 235, 0.12); } .lp-chat-qcard-chip:active { transform: scale(0.96); } /* Locked state — after the operator clicks one chip, all chips dim so subsequent clicks are visibly inert. Cursor stays default (not not-allowed) to avoid a jarring red ⊘ for what's just a brief in-flight pause. */ .lp-chat-qcard-chip:disabled, .lp-chat-qcard-chip-locked { background: #f4f5f8; color: #a3a8b8; border-color: #e5e7ec; box-shadow: none; cursor: default; pointer-events: none; } /* Primary chip — the seeded suggestion (e.g. agent_name PROPOSE NAME). Reads as "this is the recommended pick" without being a hard CTA. */ .lp-chat-qcard-chip-primary { background: #1f2937; color: #ffffff; border-color: #1f2937; } .lp-chat-qcard-chip-primary:hover { background: #111827; border-color: #111827; color: #ffffff; } /* Waiting indicator strip — when QuestionCard renders showWaiting=true it appears inside the card footer, not as a separate element. Standalone class kept for backwards-compat. */ .lp-chat-waiting, .lp-chat-qcard-waiting { display: flex; align-items: center; gap: 8px; padding: 8px 18px; background: #eef4ff; border-top: 1px solid #c8dbff; font-size: 12.5px; font-weight: 500; color: #1e4ed8; } .lp-chat-waiting { width: min(720px, calc(100vw - 32px)); border: 1px solid #c8dbff; border-top: 0; } .lp-chat-waiting-dot { width: 8px; height: 8px; border-radius: 50%; background: #2563eb; animation: lp-chat-pulse 1.2s ease infinite; } /* Validation error banner — sits inside the card body, between the prompt/hint and the chip row. Soft red so it reads as "try again" rather than "fatal", with a small icon for at-a-glance recognition. */ .lp-chat-qcard-error { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding: 8px 12px; background: #fff4f4; border: 1px solid #fecaca; border-radius: 8px; color: #b91c1c; font-size: 12.5px; line-height: 1.45; animation: lp-chat-qcard-shake 0.32s cubic-bezier(.36,.07,.19,.97); } .lp-chat-qcard-error svg { flex: 0 0 13px; } @keyframes lp-chat-qcard-shake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); } 30%, 50%, 70% { transform: translateX(-3px); } 40%, 60% { transform: translateX(3px); } } /* Skip row — pinned below the chips on optional questions. Ghost link styling so it doesn't compete with the primary chips for attention, but still clearly clickable. */ .lp-chat-qcard-skiprow { margin-top: 10px; display: flex; justify-content: flex-end; } .lp-chat-qcard-skip { display: inline-flex; align-items: center; gap: 4px; font-family: inherit; font-size: 12.5px; font-weight: 500; color: #6a6f7e; background: transparent; border: 0; padding: 4px 6px; border-radius: 6px; cursor: pointer; transition: color 0.15s ease, background 0.15s ease; } .lp-chat-qcard-skip:hover { color: #1a1a1a; background: rgba(15, 23, 42, 0.05); } /* Compact variant — used when the card overlays inside the call view (between captions and the type rail). Tighter padding, smaller fonts, fixed max-width centred over the call chrome. */ .lp-chat-qcard-compact { width: min(560px, calc(100vw - 32px)); border-radius: 14px; border: 1px solid #c8dbff; box-shadow: 0 6px 24px rgba(15, 23, 42, 0.14); } .lp-chat-qcard-compact .lp-chat-qcard-banner { padding: 8px 14px; font-size: 12.5px; } .lp-chat-qcard-compact .lp-chat-qcard-body { padding: 12px 14px 14px; } .lp-chat-qcard-compact .lp-chat-qcard-progress { font-size: 12px; } .lp-chat-qcard-compact .lp-chat-qcard-prompt { font-size: 14px; } .lp-chat-qcard-compact .lp-chat-qcard-hint { font-size: 11.5px; } .lp-chat-qcard-compact .lp-chat-qcard-chip { padding: 5px 10px; font-size: 12.5px; } /* Call-view overlay positioner. Centres the compact card horizontally above the type rail, semi-transparent backdrop so the orb behind it stays visible. */ .callchrome-qcard { position: fixed; left: 50%; bottom: 140px; transform: translateX(-50%); z-index: 7; pointer-events: auto; animation: lp-chat-in 0.28s cubic-bezier(.2,.9,.3,1); } :root[data-theme="dark"] .lp-chat-qcard-error { background: rgba(220, 38, 38, 0.12); border-color: rgba(220, 38, 38, 0.35); color: #fca5a5; } :root[data-theme="dark"] .lp-chat-qcard-skip { color: #b3b8c5; } :root[data-theme="dark"] .lp-chat-qcard-skip:hover { color: #f5f7fb; background: rgba(255, 255, 255, 0.06); } :root[data-theme="dark"] .lp-chat-qcard-compact { border-color: rgba(96, 165, 250, 0.30); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45); } :root[data-theme="dark"] .lp-chat-waiting, :root[data-theme="dark"] .lp-chat-qcard-waiting { background: rgba(59, 130, 246, 0.10); border-top-color: rgba(96, 165, 250, 0.30); color: #93c5fd; } /* Dark-theme card. */ :root[data-theme="dark"] .lp-chat-qcard { background: #131722; border-color: rgba(96, 165, 250, 0.35); } :root[data-theme="dark"] .lp-chat-qcard-banner { background: rgba(59, 130, 246, 0.12); color: #93c5fd; border-bottom-color: rgba(96, 165, 250, 0.30); } :root[data-theme="dark"] .lp-chat-qcard-banner-icon { background: #131722; color: #60a5fa; border-color: rgba(96, 165, 250, 0.35); } :root[data-theme="dark"] .lp-chat-qcard-body { background: #1a1f2e; } :root[data-theme="dark"] .lp-chat-qcard-progress { color: #e7e9ee; } :root[data-theme="dark"] .lp-chat-qcard-prompt { color: #e7e9ee; } :root[data-theme="dark"] .lp-chat-qcard-hint { color: #8a8e9c; } :root[data-theme="dark"] .lp-chat-qcard-chip { background: #1c2030; color: #e7e9ee; border-color: #2c3349; } :root[data-theme="dark"] .lp-chat-qcard-chip:hover { background: rgba(59, 130, 246, 0.18); border-color: #60a5fa; color: #dbeafe; box-shadow: none; } :root[data-theme="dark"] .lp-chat-qcard-chip-primary { background: #e7e9ee; color: #131722; border-color: #e7e9ee; } :root[data-theme="dark"] .lp-chat-qcard-chip-primary:hover { background: #ffffff; color: #0b0d14; border-color: #ffffff; } :root[data-theme="dark"] .lp-chat-waiting { background: rgba(59, 130, 246, 0.10); border-color: rgba(96, 165, 250, 0.30); color: #93c5fd; } :root[data-theme="dark"] .lp-chat-waiting-dot { background: #60a5fa; } .lp-chat-composer { width: min(720px, calc(100vw - 32px)); display: flex; align-items: flex-end; gap: 8px; padding: 12px 14px; background: #ffffff; border: 1px solid #e5e7ec; border-top: 0; border-radius: 0 0 14px 14px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06); } .lp-chat-composer-input { flex: 1; border: 0; outline: 0; background: transparent; resize: none; font-family: inherit; font-size: 15px; line-height: 1.5; color: #1a1a1a; max-height: 180px; padding: 6px 4px; } .lp-chat-composer-input::placeholder { color: #a3a8b8; } .lp-chat-composer-input:disabled { color: #a3a8b8; } .lp-chat-composer-submit { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #1f2937, #374151); color: #ffffff; border: 0; border-radius: 50%; cursor: pointer; transition: transform 0.12s ease, background 0.18s ease; flex: 0 0 40px; } .lp-chat-composer-submit:hover { background: linear-gradient(135deg, #111827, #1f2937); } .lp-chat-composer-submit:active { transform: scale(0.95); } .lp-chat-composer-submit:disabled { background: #cdd1db; cursor: not-allowed; transform: none; } /* Dark-theme chat surface. */ :root[data-theme="dark"] .lp-chat-head, :root[data-theme="dark"] .lp-chat-thread, :root[data-theme="dark"] .lp-chat-composer { background: #131722; border-color: #262b3a; box-shadow: 0 1px 2px rgba(0,0,0,0.45), 0 10px 28px rgba(0,0,0,0.35); } :root[data-theme="dark"] .lp-chat-title { color: #e7e9ee; } :root[data-theme="dark"] .lp-chat-state { color: #8a8e9c; } :root[data-theme="dark"] .lp-chat-mic, :root[data-theme="dark"] .lp-chat-close { color: #b3b8c5; } :root[data-theme="dark"] .lp-chat-mic:hover { background: rgba(245, 158, 11, 0.10); border-color: rgba(245, 158, 11, 0.35); color: #f5c97a; } :root[data-theme="dark"] .lp-chat-close:hover { background: rgba(255, 255, 255, 0.06); color: #f5f7fb; } :root[data-theme="dark"] .lp-chat-msg-eva .lp-chat-bubble { background: #1c2030; color: #e7e9ee; } :root[data-theme="dark"] .lp-chat-msg-user .lp-chat-bubble { background: linear-gradient(135deg, #4a5063, #5b6173); } :root[data-theme="dark"] .lp-chat-msg-system .lp-chat-bubble { background: rgba(220, 38, 38, 0.12); color: #fca5a5; border-color: rgba(220, 38, 38, 0.35); } :root[data-theme="dark"] .lp-chat-composer-input { color: #e7e9ee; } :root[data-theme="dark"] .lp-chat-composer-input::placeholder { color: #6a6f7e; } :root[data-theme="dark"] .lp-chat-composer-submit:disabled { background: #2a2e44; color: #6a6f7e; } /* ───────────────────────────────────────────────────────────────────────── * EmbedView — the minimal call surface served at /embed/, loaded * inside an iframe via /static/embed.js. No brandbar, no nav, no landing * art — just orb + agent name + CTA + tiny "powered by" footer. The frame * background matches the host site's surrounding chrome from the iframe * (#0f1119 default, with the orb being the visual centerpiece). * ───────────────────────────────────────────────────────────────────────── */ .embed-shell { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 22px 18px; background: radial-gradient(75% 60% at 50% 30%, rgba(196, 181, 253, 0.16) 0%, transparent 65%), var(--bg-0); text-align: center; overflow: hidden; } .embed-orb { display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .embed-meta { display: flex; flex-direction: column; gap: 4px; } .embed-name { font-size: 20px; font-weight: 700; letter-spacing: -0.015em; color: var(--fg-0); } .embed-sub { font-size: 13px; color: var(--fg-mute); max-width: 280px; line-height: 1.45; } .embed-cta { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 22px; border-radius: 999px; background: linear-gradient(135deg, #a855f7, #ec4899); color: #ffffff; font: inherit; font-size: 14px; font-weight: 600; letter-spacing: -0.005em; border: 0; cursor: pointer; box-shadow: 0 8px 22px rgba(168, 85, 247, 0.28); transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease; } .embed-cta:hover { transform: translateY(-1px); filter: brightness(1.05); } .embed-cta:active { transform: translateY(0.5px); } .embed-brand { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); font-size: 11px; color: var(--fg-dim); text-decoration: none; letter-spacing: 0.02em; } .embed-brand:hover { color: var(--fg-mute); } .embed-loading, .embed-err { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--fg-mute); background: var(--bg-0); } .embed-err { color: #fb7185; } /* ───────────────────────────────────────────────────────────────────────── * Go-live page — side-by-side channels (embed left, phone number right). * Both panels are equal-height so the preview iframe lines up with the * phone-number form. Stacks on narrow viewports. * ───────────────────────────────────────────────────────────────────────── */ .db-channels { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: stretch; } @media (max-width: 820px) { .db-channels { grid-template-columns: 1fr; } } .db-panel-tall { display: flex; flex-direction: column; gap: 14px; /* Grid children default to min-content sizing — let them shrink so 1fr * columns can actually be equal, snippet block respects overflow-x. */ min-width: 0; } .db-channel-head { display: flex; align-items: flex-start; gap: 12px; } .db-channel-head svg { color: #6366f1; flex: 0 0 22px; margin-top: 2px; } .db-channel-head .db-panel-title { margin: 0; } .db-channel-head .db-panel-sub { margin: 4px 0 0; } /* ─── Singular Phone-number flow (build 253) ────────────────────────────── * Two-mode picker → selected-mode content. No parallel panels. The picker * tiles are stacked vertically (one decision per row); the back-link in * the header is the only way to return to the picker once a mode is * chosen — operator's explicit click is needed to switch, page state * doesn't reset on auto-refetch. */ .golive-mode-back { font: inherit; font-size: 12.5px; font-weight: 600; color: #6366f1; background: transparent; border: 1px solid transparent; border-radius: 8px; padding: 4px 10px; cursor: pointer; align-self: center; white-space: nowrap; } .golive-mode-back:hover { background: #eef2ff; border-color: #c7d2fe; } .golive-mode-picker { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; } .golive-mode-option { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; background: #ffffff; border: 1px solid #e6e7ec; border-radius: 12px; cursor: pointer; text-align: left; font: inherit; transition: border-color 0.15s ease, background 0.15s ease, transform 0.06s ease; } .golive-mode-option:hover { border-color: #a5b4fc; background: #f8faff; } .golive-mode-option:active { transform: translateY(1px); } .golive-mode-icon { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 10px; background: linear-gradient(135deg, #eef2ff 0%, #faf5ff 100%); color: #6366f1; display: inline-flex; align-items: center; justify-content: center; } .golive-mode-body { flex: 1; min-width: 0; } .golive-mode-title { font-size: 14.5px; font-weight: 650; color: #1f2230; margin-bottom: 2px; } .golive-mode-sub { font-size: 12.5px; line-height: 1.45; color: #6a6f7d; } .golive-mode-go { flex: 0 0 24px; color: #9ca3af; font-size: 18px; font-weight: 400; } .golive-mode-option:hover .golive-mode-go { color: #6366f1; } /* Selected-mode body — drops the inner card chrome since the outer * phoneCard already owns the box. Just give it some breathing room * from the header. */ .golive-mode-content { margin-top: 18px; display: flex; flex-direction: column; gap: 18px; } .golive-mode-content > .db-panel, .golive-mode-content > .tel-card, .golive-mode-content > .sip-card, .golive-mode-content > .managed-fallback { border: 1px solid #eef0f4; box-shadow: none; } /* Dark mode */ :root[data-theme="dark"] .golive-mode-option { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.10); } :root[data-theme="dark"] .golive-mode-option:hover { background: rgba(99,102,241,0.10); border-color: rgba(165,180,252,0.40); } :root[data-theme="dark"] .golive-mode-icon { background: linear-gradient(135deg, rgba(99,102,241,0.15) 0%, rgba(168,85,247,0.10) 100%); color: #a5b4fc; } :root[data-theme="dark"] .golive-mode-title { color: #e8e9ef; } :root[data-theme="dark"] .golive-mode-sub { color: #a4a8b8; } :root[data-theme="dark"] .golive-mode-back:hover { background: rgba(99,102,241,0.15); border-color: rgba(165,180,252,0.40); } .db-embed-preview-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; } .db-embed-preview { position: relative; width: 100%; height: 280px; border-radius: 12px; overflow: hidden; background: #0f1119; border: 1px solid #e6e7ec; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04); } .db-embed-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } .db-embed-caption { font-size: 11.5px; color: #6a6a6a; } .db-embed-snippet { padding: 10px 12px; border-radius: 8px; background: #f5f6f8; border: 1px solid #e6e7ec; font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; font-size: 11.5px; color: #1a1a1a; overflow-x: auto; white-space: nowrap; } .db-embed-snippet code { background: transparent; padding: 0; } /* ── Embed customisation controls ── */ .db-embed-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 18px; padding: 14px 16px; background: #fafbfd; border: 1px solid #e6e8ef; border-radius: 10px; } .db-embed-control { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .db-embed-control-label { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #6b7080; } .db-embed-segment { display: inline-flex; background: #fff; border: 1px solid #d8dbe4; border-radius: 8px; padding: 2px; } .db-embed-seg-btn { flex: 1; background: transparent; border: 0; font: inherit; font-size: 12.5px; color: #4b5263; padding: 6px 10px; border-radius: 6px; cursor: pointer; white-space: nowrap; } .db-embed-seg-btn:hover { color: #1a1d2b; } .db-embed-seg-btn.active { background: #1a1d2b; color: #fff; font-weight: 600; } .db-embed-input { width: 100%; background: #fff; border: 1px solid #d8dbe4; border-radius: 8px; padding: 7px 10px; font: inherit; font-size: 13px; color: #1a1d2b; box-sizing: border-box; } .db-embed-input:focus { outline: 0; border-color: #a78bfa; box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.18); } .db-embed-swatches { display: flex; flex-wrap: wrap; gap: 6px; } .db-embed-swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #d8dbe4; cursor: pointer; padding: 0; transition: box-shadow 0.15s ease, transform 0.12s ease; } .db-embed-swatch:hover { transform: scale(1.08); } .db-embed-swatch.active { box-shadow: 0 0 0 2px #1a1d2b; } .db-embed-swatch-custom { position: relative; width: 28px; height: 28px; border-radius: 50%; border: 1px dashed #aab1c0; background: #fff; color: #6b7080; font-size: 14px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; } .db-embed-swatch-custom input[type="color"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; border: 0; padding: 0; } :root[data-theme="dark"] .db-embed-controls { background: #15182a; border-color: #2a2e44; } :root[data-theme="dark"] .db-embed-control-label { color: #8a91a4; } :root[data-theme="dark"] .db-embed-segment { background: #1b1f33; border-color: #2a2e44; } :root[data-theme="dark"] .db-embed-seg-btn { color: #b4b9c7; } :root[data-theme="dark"] .db-embed-seg-btn:hover { color: #e7e9ee; } :root[data-theme="dark"] .db-embed-seg-btn.active { background: #e7e9ee; color: #15182a; } :root[data-theme="dark"] .db-embed-input { background: #1b1f33; border-color: #2a2e44; color: #e7e9ee; } :root[data-theme="dark"] .db-embed-swatch { border-color: #15182a; box-shadow: 0 0 0 1px #2a2e44; } :root[data-theme="dark"] .db-embed-swatch.active { box-shadow: 0 0 0 2px #e7e9ee; } :root[data-theme="dark"] .db-embed-swatch-custom { background: #1b1f33; border-color: #3a3f52; color: #8a91a4; } /* ── Business profile accordions ── */ .db-profile-accords { display: flex; flex-direction: column; gap: 10px; } .db-accord { background: #fff; border: 1px solid #e6e8ef; border-radius: 12px; overflow: hidden; } .db-accord-head { list-style: none; display: flex; align-items: center; gap: 12px; padding: 16px 18px; cursor: pointer; user-select: none; } .db-accord-head::-webkit-details-marker { display: none; } .db-accord-title { font-size: 14.5px; font-weight: 600; color: #1a1d2b; flex: 1; min-width: 0; letter-spacing: -0.005em; } .db-accord-pill { font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; color: #6b7080; background: #f3f4f8; border: 1px solid #e6e8ef; padding: 2px 8px; border-radius: 99px; white-space: nowrap; } .db-accord-chev { color: #6b7080; transition: transform 0.18s ease; flex-shrink: 0; } .db-accord[open] > .db-accord-head .db-accord-chev { transform: rotate(180deg); } .db-accord[open] > .db-accord-head { border-bottom: 1px solid #eef0f5; } .db-accord-body { padding: 16px 18px 20px; } .db-accord-sub { font-size: 13px; color: #6b7080; line-height: 1.5; margin: 0 0 14px; } .db-accord-sub .db-link-btn, .db-link-btn { font: inherit; background: transparent; border: 0; padding: 0; color: #1a1d2b; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } .db-link-btn:hover { color: #000; } .db-accord:hover { border-color: #d8dbe4; } .db-accord[open] { border-color: #d8dbe4; } :root[data-theme="dark"] .db-accord { background: #15182a; border-color: #2a2e44; } :root[data-theme="dark"] .db-accord:hover { border-color: #3a3f52; } :root[data-theme="dark"] .db-accord[open] { border-color: #3a3f52; } :root[data-theme="dark"] .db-accord-title { color: #e7e9ee; } :root[data-theme="dark"] .db-accord-pill { background: #1b1f33; border-color: #2a2e44; color: #8a91a4; } :root[data-theme="dark"] .db-accord-chev { color: #8a91a4; } :root[data-theme="dark"] .db-accord[open] > .db-accord-head { border-bottom-color: #2a2e44; } :root[data-theme="dark"] .db-accord-sub { color: #8a91a4; } :root[data-theme="dark"] .db-link-btn { color: #e7e9ee; } /* ── Beta tag — used on shipped-but-not-promised features so users don't * judge quality unfairly. Warm amber to read as "early access". ── */ .db-beta-tag { display: inline-block; margin-left: 8px; vertical-align: middle; font-size: 10.5px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: #b45309; background: #fef3c7; border: 1px solid #fcd34d; padding: 1px 7px; border-radius: 99px; } :root[data-theme="dark"] .db-beta-tag { color: #fbbf24; background: rgba(251, 191, 36, 0.10); border-color: rgba(252, 211, 77, 0.30); } .db-btn-primary.is-copied { background: #10b981; } /* Dark-mode tuning for the channel panels */ :root[data-theme="dark"] .db-channel-head svg { color: #a78bfa; } :root[data-theme="dark"] .db-embed-preview { border-color: #1f2230; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04); } :root[data-theme="dark"] .db-embed-caption { color: #8a8a8a; } :root[data-theme="dark"] .db-embed-snippet { background: #14171f; border-color: #2a2d3c; color: #cbd5e1; } /* ───────────────────────────────────────────────────────────────────────── * Billing — plan cards grid, toast, current-plan progress. * ───────────────────────────────────────────────────────────────────────── */ .billing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; } .billing-card { position: relative; display: flex; flex-direction: column; background: #ffffff; border: 1px solid #e6e7ec; border-radius: 14px; padding: 22px 20px 20px; transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; } .billing-card:hover { border-color: #c5c8d4; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06); } .billing-card-featured { border-color: #6366f1; box-shadow: 0 0 0 1px #6366f1 inset, 0 12px 28px rgba(99, 102, 241, 0.10); } .billing-card-current { border-color: #10b981; box-shadow: 0 0 0 1px #10b981 inset; } .billing-card-flag { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #6366f1, #ec4899); color: #ffffff; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px; white-space: nowrap; } .billing-card-label { font-size: 14px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #6a6f7e; margin-bottom: 8px; } .billing-card-price { display: flex; align-items: baseline; gap: 4px; } .billing-card-amount { font-size: 30px; font-weight: 700; letter-spacing: -0.025em; color: #1a1a1a; } .billing-card-period { font-size: 13px; color: #6a6f7e; } .billing-card-tagline { font-size: 13px; color: #4a4a4a; margin: 12px 0 14px; min-height: 36px; line-height: 1.5; } .billing-card-features { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; gap: 7px; flex: 1; } .billing-card-features li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: #2a2a2a; line-height: 1.45; } .billing-card-tick { flex: 0 0 16px; width: 16px; height: 16px; border-radius: 50%; background: #ecfdf5; color: #047857; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; } .billing-card-cta { width: 100%; justify-content: center; margin-top: auto; } .billing-card-cta-current { background: #ecfdf5 !important; color: #047857 !important; box-shadow: none !important; cursor: default !important; } .billing-toast { padding: 10px 14px; border-radius: 10px; font-size: 13px; font-weight: 500; } .billing-toast-ok { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; } .billing-toast-err { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; } /* Dark-mode plan cards */ :root[data-theme="dark"] .billing-card { background: #14171f; border-color: #1f2230; } :root[data-theme="dark"] .billing-card:hover { border-color: #3a3f52; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); } :root[data-theme="dark"] .billing-card-featured { border-color: #6366f1; box-shadow: 0 0 0 1px #6366f1 inset, 0 12px 28px rgba(99, 102, 241, 0.22); } :root[data-theme="dark"] .billing-card-current { border-color: #10b981; box-shadow: 0 0 0 1px #10b981 inset; } :root[data-theme="dark"] .billing-card-label { color: #9aa0ad; } :root[data-theme="dark"] .billing-card-amount { color: #f5f7fb; } :root[data-theme="dark"] .billing-card-period { color: #9aa0ad; } :root[data-theme="dark"] .billing-card-tagline { color: #b4b9c7; } :root[data-theme="dark"] .billing-card-features li { color: #cbd5e1; } :root[data-theme="dark"] .billing-card-tick { background: rgba(16, 185, 129, 0.18); color: #6ee7b7; } :root[data-theme="dark"] .billing-card-cta-current { background: rgba(16, 185, 129, 0.18) !important; color: #6ee7b7 !important; } :root[data-theme="dark"] .billing-toast-ok { background: rgba(16, 185, 129, 0.14); color: #6ee7b7; border-color: rgba(16, 185, 129, 0.3); } :root[data-theme="dark"] .billing-toast-err { background: rgba(248, 113, 113, 0.14); color: #fca5a5; border-color: rgba(248, 113, 113, 0.3); } /* ───────────────────────────────────────────────────────────────────────── * Onboarding banner — appears on the overview when an agent is <24h old * and has zero calls. Subtle glow card with three numbered steps + dismiss. * Stored per-agent in localStorage as `sxai.onboarded.`. * ───────────────────────────────────────────────────────────────────────── */ .db-onboard { position: relative; display: flex; gap: 14px; padding: 18px 20px; border-radius: 14px; background: linear-gradient(135deg, rgba(99, 102, 241, 0.07), rgba(236, 72, 153, 0.05)); border: 1px solid rgba(99, 102, 241, 0.22); overflow: hidden; } .db-onboard-glow { position: absolute; inset: -40px; background: radial-gradient(40% 60% at 0% 50%, rgba(168, 85, 247, 0.18), transparent 70%); pointer-events: none; filter: blur(20px); } .db-onboard-body { position: relative; display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; } .db-onboard-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; color: #6366f1; } .db-onboard-spark { font-size: 12px; } .db-onboard-title { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.012em; color: #1a1a1a; } .db-onboard-steps { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 8px; } .db-onboard-steps li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(15, 23, 42, 0.06); backdrop-filter: blur(4px); } .db-onboard-num { flex: 0 0 26px; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; background: #1a1a1a; color: #ffffff; font-size: 12px; font-weight: 700; border-radius: 999px; } .db-onboard-steps li > div { flex: 1; min-width: 0; } .db-onboard-step-title { font-size: 13.5px; font-weight: 600; color: #1a1a1a; letter-spacing: -0.005em; } .db-onboard-step-sub { font-size: 12.5px; color: #6a6f7e; margin-top: 2px; line-height: 1.4; } .db-onboard-close { position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; background: transparent; border: 0; color: #6a6f7e; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; z-index: 1; } .db-onboard-close:hover { background: rgba(15, 23, 42, 0.06); color: #1a1a1a; } /* "New" badge on freshly-built agent cards (< 1h old) */ .db-card-fresh { display: inline-flex; align-items: center; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: linear-gradient(135deg, #10b981, #06b6d4); color: #ffffff; font-size: 10.5px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; vertical-align: 2px; } /* Dark-mode tuning */ :root[data-theme="dark"] .db-onboard { background: linear-gradient(135deg, rgba(99, 102, 241, 0.14), rgba(236, 72, 153, 0.08)); border-color: rgba(99, 102, 241, 0.35); } :root[data-theme="dark"] .db-onboard-eyebrow { color: #a5b4fc; } :root[data-theme="dark"] .db-onboard-title { color: #f5f7fb; } :root[data-theme="dark"] .db-onboard-steps li { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.08); } :root[data-theme="dark"] .db-onboard-num { background: #ffffff; color: #1a1a1a; } :root[data-theme="dark"] .db-onboard-step-title { color: #f5f7fb; } :root[data-theme="dark"] .db-onboard-step-sub { color: #9aa0ad; } :root[data-theme="dark"] .db-onboard-close { color: #b4b9c7; } :root[data-theme="dark"] .db-onboard-close:hover { background: rgba(255, 255, 255, 0.07); color: #f5f7fb; } /* ───────────────────────────────────────────────────────────────────────── * Recent activity preview on the overview — slim 3-row list, links to the * full call log. Empty state nudges to the test call. * ───────────────────────────────────────────────────────────────────────── */ .db-recent-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; } .db-recent-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; background: #fafbfd; border: 1px solid #f0f0f3; } .db-recent-summary { font-size: 13px; color: #1a1a1a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .db-recent-meta { font-size: 12px; color: #6a6f7e; font-variant-numeric: tabular-nums; } .db-recent-empty { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; background: #fafbfd; border: 1px dashed #d8dae3; border-radius: 10px; flex-wrap: wrap; } .db-recent-empty-sub { font-size: 13px; color: #4a4a4a; flex: 1; min-width: 0; } :root[data-theme="dark"] .db-recent-item { background: #0f1119; border-color: #1f2230; } :root[data-theme="dark"] .db-recent-summary { color: #e7e9ee; } :root[data-theme="dark"] .db-recent-meta { color: #9aa0ad; } :root[data-theme="dark"] .db-recent-empty { background: #0f1119; border-color: #2a2d3c; } :root[data-theme="dark"] .db-recent-empty-sub { color: #b4b9c7; } /* ───────────────────────────────────────────────────────────────────────── * Guardrails — rule rows with on/off toggles. Three sections share styling: * always-on defaults (shield icon + "Locked" tag), do's, don'ts. * ───────────────────────────────────────────────────────────────────────── */ .db-guardrails-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; } .db-guardrails-cols > .db-panel { margin: 0; } @media (max-width: 1080px) { .db-guardrails-cols { grid-template-columns: 1fr; } } .db-rules { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 6px; } .db-rules li { display: grid; grid-template-columns: 44px 1fr auto; align-items: start; gap: 12px; padding: 12px 14px; border-radius: 10px; background: #fafbfd; border: 1px solid #f0f0f3; transition: background 0.15s ease, border-color 0.15s ease; } .db-rules li.is-on { background: #eff6ff; border-color: #dbeafe; } .db-rules-locked li { background: rgba(16, 185, 129, 0.06); border-color: rgba(16, 185, 129, 0.18); } .db-rule-body { min-width: 0; } .db-rule-label { font-size: 13.5px; font-weight: 600; color: #1a1a1a; letter-spacing: -0.005em; } .db-rule-help { font-size: 12.5px; color: #6a6f7e; margin-top: 3px; line-height: 1.45; } .db-rule-tick { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: rgba(16, 185, 129, 0.16); font-size: 16px; } .db-rule-locked { font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #047857; background: rgba(16, 185, 129, 0.16); padding: 4px 9px; border-radius: 999px; align-self: center; } /* iOS-style toggle */ .db-rule-toggle { width: 40px; height: 24px; border-radius: 999px; background: #d8dae3; border: 0; cursor: pointer; padding: 0; position: relative; transition: background 0.18s ease; flex: 0 0 40px; align-self: center; } .db-rule-toggle .db-rule-toggle-thumb { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #ffffff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); transition: transform 0.18s ease; } .db-rules li.is-on .db-rule-toggle { background: #3b82f6; } .db-rules li.is-on .db-rule-toggle .db-rule-toggle-thumb { transform: translateX(16px); } .db-rule-toggle:focus-visible { outline: 2px solid rgba(59, 130, 246, 0.55); outline-offset: 3px; } /* Dark-mode guardrails */ :root[data-theme="dark"] .db-rules li { background: #0f1119; border-color: #1f2230; } :root[data-theme="dark"] .db-rules li.is-on { background: rgba(59, 130, 246, 0.12); border-color: rgba(59, 130, 246, 0.30); } :root[data-theme="dark"] .db-rules-locked li { background: rgba(16, 185, 129, 0.10); border-color: rgba(16, 185, 129, 0.30); } :root[data-theme="dark"] .db-rule-label { color: #f5f7fb; } :root[data-theme="dark"] .db-rule-help { color: #9aa0ad; } :root[data-theme="dark"] .db-rule-tick { background: rgba(16, 185, 129, 0.22); } :root[data-theme="dark"] .db-rule-locked { color: #6ee7b7; background: rgba(16, 185, 129, 0.20); } :root[data-theme="dark"] .db-rule-toggle { background: #2a2d3c; } :root[data-theme="dark"] .db-rule-toggle .db-rule-toggle-thumb { background: #cbd5e1; } :root[data-theme="dark"] .db-rules li.is-on .db-rule-toggle { background: #4d83ff; } :root[data-theme="dark"] .db-rules li.is-on .db-rule-toggle .db-rule-toggle-thumb { background: #ffffff; } /* ───────────────────────────────────────────────────────────────────────── * CookieNotice — landing-only consent banner. Region-aware copy keyed off * the detected locale.country. Renders fixed bottom-centre, slides up on * mount, persists choice in localStorage so it never reappears in-session. * ───────────────────────────────────────────────────────────────────────── */ .cookie-notice { position: fixed; left: 50%; bottom: 0; /* flush-anchored to the screen bottom */ transform: translateX(-50%); z-index: 8; display: flex; align-items: center; gap: 14px; width: min(680px, 100vw); padding: 8px 10px 8px 16px; border-radius: 12px 12px 0 0; /* rounded top only — it sits on the edge */ background: rgba(255, 255, 255, 0.9); border: 1px solid #e6e7ec; border-bottom: 0; box-shadow: 0 -4px 18px rgba(15, 23, 42, 0.07); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-family: inherit; animation: cookie-rise 0.4s cubic-bezier(.2,.9,.3,1) 0.6s both; } @keyframes cookie-rise { from { opacity: 0; transform: translateX(-50%) translateY(100%); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } .cookie-body { flex: 1; min-width: 0; /* Title + text read as one compact line; text truncates to 2 lines so the bar stays slim even with the longer region copy. */ display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 7px; } .cookie-title { font-size: 12px; font-weight: 650; letter-spacing: -0.005em; color: #0f172a; } .cookie-text { margin: 0; font-size: 11.5px; line-height: 1.4; color: #5b6070; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cookie-lawnote { flex-basis: 100%; margin-top: 1px; font-size: 9px; letter-spacing: 0.07em; text-transform: uppercase; color: #9aa0ad; } .cookie-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .cookie-btn { height: 30px; padding: 0 12px; border-radius: 7px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; border: 0; transition: background 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease; } .cookie-btn-primary { background: #1e1b4b; color: #ffffff; box-shadow: 0 2px 8px rgba(30, 27, 75, 0.18); } .cookie-btn-primary:hover { background: #312e81; } .cookie-btn-primary:active { transform: translateY(0.5px); } .cookie-btn-secondary { background: transparent; color: #1a1a1a; border: 1px solid #d8dae3; } .cookie-btn-secondary:hover { background: #f5f6f8; border-color: #1a1a1a; } .cookie-btn:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; } @media (max-width: 640px) { .cookie-notice { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 14px; } .cookie-actions { justify-content: flex-end; } } /* Dark-mode banner */ :root[data-theme="dark"] .cookie-notice { background: rgba(20, 23, 31, 0.96); border-color: #2a2d3c; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.40), 0 4px 12px rgba(0, 0, 0, 0.20); } :root[data-theme="dark"] .cookie-title { color: #f5f7fb; } :root[data-theme="dark"] .cookie-text { color: #b4b9c7; } :root[data-theme="dark"] .cookie-lawnote { color: #6a6f7e; } :root[data-theme="dark"] .cookie-btn-primary { background: linear-gradient(135deg, #6366f1, #818cf8); box-shadow: 0 4px 14px rgba(99, 102, 241, 0.28); } :root[data-theme="dark"] .cookie-btn-primary:hover { filter: brightness(1.08); } :root[data-theme="dark"] .cookie-btn-secondary { background: transparent; color: #cbd5e1; border-color: #2a2d3c; } :root[data-theme="dark"] .cookie-btn-secondary:hover { background: #1a1e2b; border-color: #3a3f52; } /* ───────────────────────────────────────────────────────────────────────── * WizardView — the DEFAULT build surface. A two-column card (left rail = * persona + marketing + step progress; right = the form) floating over the * landing art. Mirrors the reference UI. * ───────────────────────────────────────────────────────────────────────── */ .wiz { position: fixed; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; padding: clamp(16px, 4vh, 48px) 16px; pointer-events: auto; overflow-y: auto; animation: lp-chat-in 0.32s cubic-bezier(.2,.9,.3,1); } .wiz-shell { width: min(1040px, 100%); display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); background: rgba(255, 255, 255, 0.96); border: 1px solid #e6e7ec; border-radius: 22px; box-shadow: 0 24px 70px rgba(15, 23, 42, 0.16), 0 6px 18px rgba(15, 23, 42, 0.06); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); overflow: hidden; min-height: min(620px, 86vh); } /* Left rail */ .wiz-rail { position: relative; padding: 34px 30px; display: flex; flex-direction: column; gap: 22px; background: radial-gradient(120% 90% at 0% 0%, rgba(196, 181, 253, 0.28), transparent 60%), radial-gradient(120% 90% at 100% 100%, rgba(125, 211, 252, 0.22), transparent 62%), linear-gradient(160deg, #faf7ff, #eef4ff); border-right: 1px solid #ececf2; } .wiz-persona { display: inline-flex; align-items: center; gap: 12px; background: #ffffff; border: 1px solid #eceef4; border-radius: 16px; padding: 10px 16px 10px 10px; box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06); align-self: flex-start; } .wiz-persona-avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, #ff8a3d, #ff5b8a 55%, #9b5bff); color: #fff; font-weight: 800; font-size: 18px; display: flex; align-items: center; justify-content: center; } .wiz-persona-name { font-size: 17px; font-weight: 750; color: #0f172a; letter-spacing: -0.01em; } .wiz-persona-role { font-size: 12.5px; color: #6a6f7e; margin-top: 1px; } .wiz-rail-headline { font-size: clamp(24px, 2.5vw, 32px); line-height: 1.12; font-weight: 800; letter-spacing: -0.02em; color: #0f172a; margin: 6px 0 0; } .wiz-rail-headline em { font-style: normal; background: linear-gradient(110deg, #7c3aed, #db2777 55%, #2563eb); -webkit-background-clip: text; background-clip: text; color: transparent; } .wiz-rail-sub { font-size: 14px; line-height: 1.55; color: #565b6b; margin: 0; max-width: 36ch; } .wiz-rail-steps { margin-top: auto; } .wiz-rail-steplabel { font-size: 12px; font-weight: 600; color: #6a6f7e; margin-bottom: 8px; } .wiz-rail-dots { display: flex; gap: 7px; align-items: center; } .wiz-dot { width: 22px; height: 6px; border-radius: 999px; background: #d8dbe6; transition: background 0.2s ease, width 0.2s ease; } .wiz-dot-on { width: 34px; background: linear-gradient(90deg, #6366f1, #818cf8); } .wiz-dot-done { background: #a5b4fc; } /* Right panel */ .wiz-main { padding: 26px clamp(24px, 3vw, 40px) 30px; display: flex; flex-direction: column; overflow-y: auto; } .wiz-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; } .wiz-pill { font-size: 12px; font-weight: 700; letter-spacing: 0.02em; color: #4338ca; background: #eef2ff; border: 1px solid #e0e7ff; border-radius: 999px; padding: 4px 12px; } .wiz-head-alts { display: flex; align-items: center; gap: 6px; } .wiz-head-altlabel { font-size: 12px; color: #9aa0ad; margin-right: 2px; } .wiz-altbtn { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: #475569; background: #f6f7fa; border: 1px solid #e6e7ec; border-radius: 999px; padding: 5px 11px; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .wiz-altbtn:hover { background: #eef0f5; border-color: #c8cdda; color: #1f2937; } .wiz-close { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; color: #6a6f7e; cursor: pointer; background: transparent; border: 0; } .wiz-close:hover { background: rgba(15, 23, 42, 0.06); color: #1a1a1a; } .wiz-title { font-size: clamp(20px, 2.2vw, 27px); font-weight: 800; letter-spacing: -0.02em; color: #0f172a; margin: 0 0 6px; } .wiz-intro { font-size: 14px; color: #6a6f7e; margin: 0 0 18px; line-height: 1.5; } .wiz-fields { display: flex; flex-direction: column; gap: 18px; margin-top: 6px; } .wiz-field { display: flex; flex-direction: column; gap: 6px; } .wiz-label { font-size: 13.5px; font-weight: 650; color: #0f172a; } .wiz-req { color: #ef4444; } .wiz-prompt { font-size: 12.5px; color: #8a8f9e; margin-top: -2px; } .wiz-input { width: 100%; font: inherit; font-size: 15px; color: #0f172a; background: #fff; border: 1px solid #d8dae3; border-radius: 12px; padding: 12px 14px; outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .wiz-input::placeholder { color: #aeb3c0; } .wiz-input:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15); } .wiz-input-err { border-color: #ef4444; } .wiz-input-err:focus { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15); } .wiz-chips { display: flex; flex-wrap: wrap; gap: 8px; } .wiz-chip { font: inherit; font-size: 13.5px; font-weight: 600; color: #374151; background: #fff; border: 1px solid #d8dae3; border-radius: 999px; padding: 8px 16px; cursor: pointer; transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease, box-shadow 0.14s ease; } .wiz-chip:hover { border-color: #b9bed0; background: #f7f8fb; } .wiz-chip-on { background: #1e1b4b; color: #fff; border-color: #1e1b4b; box-shadow: 0 3px 10px rgba(30, 27, 75, 0.22); } .wiz-suggests { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; } .wiz-suggest { font: inherit; font-size: 12px; font-weight: 600; color: #6366f1; background: #eef2ff; border: 1px solid #e0e7ff; border-radius: 999px; padding: 4px 10px; cursor: pointer; transition: background 0.14s ease; } .wiz-suggest:hover { background: #e0e7ff; } .wiz-suggest-on { background: #6366f1; color: #fff; border-color: #6366f1; } .wiz-field-err { font-size: 12px; color: #dc2626; } .wiz-prefill-badge { margin-left: 8px; font-size: 10.5px; font-weight: 600; color: #7c3aed; background: #f5f0ff; border: 1px solid #ece2ff; border-radius: 999px; padding: 1px 8px; vertical-align: middle; } .wiz-input-prefilled { border-color: #c4b5fd; background: #fbf9ff; } .wiz-input-prefilled:focus { border-color: #6366f1; background: #fff; } /* URL pull / knowledge preview card on wizard step 1 */ .wiz-knowledge { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 16px; padding: 14px 14px 12px; background: linear-gradient(180deg, #f7f5ff 0%, #fbfaff 100%); border: 1px solid #ece2ff; border-radius: 14px; } .wiz-knowledge-head { display: flex; align-items: flex-start; gap: 10px; } .wiz-knowledge-emoji { font-size: 18px; line-height: 1.2; margin-top: 2px; } .wiz-knowledge-meta { flex: 1; min-width: 0; } .wiz-knowledge-title { font-size: 13.5px; font-weight: 650; color: #0f172a; } .wiz-knowledge-sub { font-size: 12.5px; line-height: 1.45; color: #6a6f7e; margin-top: 2px; } .wiz-knowledge-link { color: #6366f1; text-decoration: none; font-weight: 600; } .wiz-knowledge-link:hover { text-decoration: underline; } .wiz-knowledge-discard { font: inherit; font-size: 12px; font-weight: 600; color: #b91c1c; background: transparent; border: 1px solid transparent; border-radius: 8px; padding: 4px 10px; cursor: pointer; } .wiz-knowledge-discard:hover { background: #fff1f1; border-color: #fecdd3; } .wiz-knowledge-row { display: flex; gap: 8px; align-items: stretch; } .wiz-knowledge-input { flex: 1; } .wiz-knowledge-go { white-space: nowrap; padding: 0 16px; font-size: 13.5px; display: inline-flex; align-items: center; gap: 6px; } .wiz-knowledge-err { font-size: 12.5px; color: #b91c1c; background: #fff4f4; border: 1px solid #fecaca; border-radius: 10px; padding: 7px 10px; } .wiz-knowledge-foot { font-size: 11.5px; color: #8a8f9e; } /* Build 248 — loading variant. Slim banner over the URL panel that reads as a background task; the form below stays fully interactive so the operator can keep filling while the scrape resolves. */ .wiz-knowledge-loading { background: linear-gradient(180deg, #eef2ff 0%, #f5f7ff 100%); border-color: #c7d2fe; } .wiz-knowledge-spin { margin-top: 4px; } /* Discreet text-button "view source data" — sits inline under the success header, NOT a big blocky toggle that fights the form for the operator's eye. */ .wiz-knowledge-srclink { font: inherit; font-size: 12.5px; font-weight: 600; color: #6366f1; background: transparent; border: 0; padding: 0; cursor: pointer; line-height: 1.45; } .wiz-knowledge-srclink:hover { text-decoration: underline; } :root[data-theme="dark"] .wiz-knowledge-loading { background: linear-gradient(180deg, #1a1f3a 0%, #1a1a2e 100%); border-color: #3b4275; } .wiz-knowledge-yaml { width: 100%; box-sizing: border-box; font: 12.5px/1.55 ui-monospace, SF Mono, Menlo, monospace; color: #1f2937; background: #ffffff; border: 1px solid #d8dae3; border-radius: 10px; padding: 10px 12px; outline: none; resize: vertical; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .wiz-knowledge-yaml:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15); } :root[data-theme="dark"] .wiz-knowledge { background: linear-gradient(180deg, #1a1730 0%, #15171f 100%); border-color: #2e2842; } :root[data-theme="dark"] .wiz-knowledge-title { color: #f1f3f8; } :root[data-theme="dark"] .wiz-knowledge-sub, :root[data-theme="dark"] .wiz-knowledge-foot { color: #9aa0ad; } :root[data-theme="dark"] .wiz-knowledge-yaml { background: #14171f; border-color: #2a2f3e; color: #f1f3f8; } :root[data-theme="dark"] .wiz-knowledge-discard:hover { background: #2a1a1f; border-color: #6b2a36; } :root[data-theme="dark"] .wiz-knowledge-err { background: #2a1a1f; border-color: #6b2a36; color: #fca5a5; } /* "Picking up where you left off" strip — shows the original prompt the visitor typed before login so they know what triggered the wizard. */ .wiz-resume { display: flex; align-items: flex-start; gap: 12px; margin: 4px 0 16px; padding: 12px 14px; background: linear-gradient(180deg, #f0f8ff 0%, #f7fbff 100%); border: 1px solid #d5e7fb; border-radius: 12px; } .wiz-resume-emoji { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: #4f46e5; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; margin-top: 1px; } .wiz-resume-body { flex: 1; min-width: 0; } .wiz-resume-title { font-size: 12px; font-weight: 700; color: #4f46e5; text-transform: uppercase; letter-spacing: 0.04em; } .wiz-resume-quote { margin-top: 4px; font-size: 13.5px; line-height: 1.5; color: #1f2937; font-style: italic; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .wiz-resume-dismiss { flex: 0 0 auto; font: inherit; font-size: 14px; line-height: 1; color: #6a6f7e; background: transparent; border: 0; cursor: pointer; padding: 4px 6px; border-radius: 6px; } .wiz-resume-dismiss:hover { background: rgba(15, 23, 42, 0.06); color: #1f2937; } :root[data-theme="dark"] .wiz-resume { background: linear-gradient(180deg, #1c2030 0%, #181b26 100%); border-color: #2a3550; } :root[data-theme="dark"] .wiz-resume-title { color: #c4b5fd; } :root[data-theme="dark"] .wiz-resume-quote { color: #e7e9ee; } :root[data-theme="dark"] .wiz-resume-dismiss:hover { background: rgba(255,255,255,0.06); color: #f1f3f8; } /* Collapsed knowledge card after a successful pull — emphasises the "Filled N fields" pill, hides raw YAML behind a toggle. */ .wiz-knowledge-filled { background: linear-gradient(180deg, #f0fdf4 0%, #f7fbf9 100%); border-color: #c5ead5; } :root[data-theme="dark"] .wiz-knowledge-filled { background: linear-gradient(180deg, #14241c 0%, #131a16 100%); border-color: #2a4a3a; } .wiz-knowledge-toggle { align-self: flex-start; font: inherit; font-size: 12px; font-weight: 600; color: #4f46e5; background: transparent; border: 0; border-radius: 6px; padding: 2px 6px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; } .wiz-knowledge-toggle:hover { color: #312e81; background: rgba(99, 102, 241, 0.08); } .wiz-knowledge-toggle-caret { transition: transform 0.15s ease; display: inline-block; } .wiz-knowledge-toggle-caret.open { transform: rotate(180deg); } :root[data-theme="dark"] .wiz-knowledge-toggle { color: #a5b4fc; } :root[data-theme="dark"] .wiz-knowledge-toggle:hover { color: #c7d2fe; background: rgba(165, 180, 252, 0.1); } .wiz-knowledge-err { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .wiz-knowledge-skip { font: inherit; font-size: 12px; font-weight: 600; color: #4f46e5; background: transparent; border: 0; border-radius: 6px; padding: 4px 8px; cursor: pointer; white-space: nowrap; } .wiz-knowledge-skip:hover { background: rgba(99, 102, 241, 0.08); } :root[data-theme="dark"] .wiz-knowledge-skip { color: #a5b4fc; } /* "from website" badge — emerald, distinct from the violet "from your prompt" badge so the operator can see at a glance which source filled each field. */ .wiz-prefill-badge-url { color: #047857; background: #ecfdf5; border-color: #b9ead5; } :root[data-theme="dark"] .wiz-prefill-badge-url { color: #6ee7b7; background: #11281f; border-color: #1c3d2d; } .wiz-input-prefilled.wiz-input-prefilled-url, .wiz-input.wiz-input-prefilled.wiz-input-prefilled-url { border-color: #6ee7b7; background: #f6fdf9; } .wiz-prefilling { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: #7c3aed; font-weight: 600; background: #f5f0ff; border: 1px solid #ece2ff; border-radius: 999px; padding: 5px 12px; margin: 0 0 14px; } .wiz-spinner-sm { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #d8c9ff; border-top-color: #7c3aed; animation: wiz-spin 0.8s linear infinite; } .wiz-submit-err { margin-top: 16px; font-size: 13px; color: #b91c1c; background: #fff4f4; border: 1px solid #fecaca; border-radius: 10px; padding: 9px 12px; } .wiz-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 26px; } .wiz-btn-primary { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 14.5px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #4f46e5, #6366f1); border: 0; border-radius: 11px; padding: 12px 22px; cursor: pointer; box-shadow: 0 6px 18px rgba(79, 70, 229, 0.28); transition: filter 0.15s ease, transform 0.12s ease, opacity 0.15s ease; margin-left: auto; } .wiz-btn-primary:hover { filter: brightness(1.06); } .wiz-btn-primary:active { transform: translateY(0.5px); } .wiz-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; } .wiz-btn-secondary { font: inherit; font-size: 14px; font-weight: 600; color: #475569; background: #fff; border: 1px solid #d8dae3; border-radius: 11px; padding: 11px 18px; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; } .wiz-btn-secondary:hover { background: #f5f6f8; border-color: #b9bed0; } .wiz-state { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; min-height: 280px; } .wiz-state-err { color: #b91c1c; font-size: 14px; text-align: center; } .wiz-state-msg { color: #6b5bd0; font-size: 14px; font-weight: 600; text-align: center; max-width: 30ch; } :root[data-theme="dark"] .wiz-state-msg { color: #c4b5fd; } .wiz-spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid #e5e7ec; border-top-color: #6366f1; animation: wiz-spin 0.8s linear infinite; } @keyframes wiz-spin { to { transform: rotate(360deg); } } @media (max-width: 800px) { .wiz-shell { grid-template-columns: 1fr; min-height: 0; } .wiz-rail { border-right: 0; border-bottom: 1px solid #ececf2; padding: 24px 22px; gap: 16px; } .wiz-rail-headline { font-size: 22px; } .wiz-rail-sub { display: none; } .wiz-head-altlabel { display: none; } } /* Wizard — dark mode */ :root[data-theme="dark"] .wiz-shell { background: rgba(17, 20, 28, 0.97); border-color: #262b3a; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5); } :root[data-theme="dark"] .wiz-rail { background: radial-gradient(120% 90% at 0% 0%, rgba(99, 102, 241, 0.18), transparent 60%), radial-gradient(120% 90% at 100% 100%, rgba(56, 189, 248, 0.12), transparent 62%), linear-gradient(160deg, #15171f, #11151d); border-right-color: #242838; } :root[data-theme="dark"] .wiz-persona { background: #1a1e29; border-color: #2a2f3e; } :root[data-theme="dark"] .wiz-persona-name { color: #f1f3f8; } :root[data-theme="dark"] .wiz-persona-role { color: #9aa0ad; } :root[data-theme="dark"] .wiz-rail-headline { color: #f1f3f8; } :root[data-theme="dark"] .wiz-rail-sub { color: #aab0c0; } :root[data-theme="dark"] .wiz-rail-steplabel { color: #9aa0ad; } :root[data-theme="dark"] .wiz-dot { background: #2f3445; } :root[data-theme="dark"] .wiz-dot-done { background: #4f46e5; } :root[data-theme="dark"] .wiz-pill { color: #c7d2fe; background: #1e2233; border-color: #2f3550; } :root[data-theme="dark"] .wiz-altbtn { background: #1a1e29; border-color: #2a2f3e; color: #cbd5e1; } :root[data-theme="dark"] .wiz-altbtn:hover { background: #222736; border-color: #3a4054; color: #f1f3f8; } :root[data-theme="dark"] .wiz-close:hover { background: rgba(255,255,255,0.06); color: #f1f3f8; } :root[data-theme="dark"] .wiz-title { color: #f1f3f8; } :root[data-theme="dark"] .wiz-intro, :root[data-theme="dark"] .wiz-prompt { color: #9aa0ad; } :root[data-theme="dark"] .wiz-label { color: #e7e9ee; } :root[data-theme="dark"] .wiz-input { background: #14171f; border-color: #2a2f3e; color: #f1f3f8; } :root[data-theme="dark"] .wiz-input::placeholder { color: #5f6577; } :root[data-theme="dark"] .wiz-chip { background: #14171f; border-color: #2a2f3e; color: #cbd5e1; } :root[data-theme="dark"] .wiz-chip:hover { background: #1c2030; border-color: #3a4054; } :root[data-theme="dark"] .wiz-chip-on { background: linear-gradient(135deg, #6366f1, #818cf8); border-color: #6366f1; color: #fff; } :root[data-theme="dark"] .wiz-suggest { background: #1e2233; border-color: #2f3550; color: #c7d2fe; } :root[data-theme="dark"] .wiz-btn-secondary { background: #14171f; border-color: #2a2f3e; color: #cbd5e1; } :root[data-theme="dark"] .wiz-btn-secondary:hover { background: #1c2030; border-color: #3a4054; } :root[data-theme="dark"] .wiz-prefill-badge { color: #c4b5fd; background: #221b3a; border-color: #332b52; } :root[data-theme="dark"] .wiz-prefilling { color: #c4b5fd; background: #221b3a; border-color: #332b52; } :root[data-theme="dark"] .wiz-input-prefilled { border-color: #6d5bd0; background: #1a1730; } :root[data-theme="dark"] .wiz-input-prefilled:focus { background: #14171f; } /* ───────────────────────────────────────────────────────────────────────── * LandingArt — ambient AI-art layer behind the landing. Pure CSS: * - 3 drifting aural discs (radial gradients, heavy blur) * - Pinpoint grid that fades at the edges (Linear/Vercel-style) * - Aurora streak across the top * - Faint SVG noise overlay for analog texture * Sits between body bg (z:0) and .lp (z:4). pointer-events: none. * Drift animations gated by prefers-reduced-motion (global media query). * ───────────────────────────────────────────────────────────────────────── */ .lp-art { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; opacity: 0; animation: lpfadein 1.2s ease 0.1s forwards; } .lp-art-aurora { position: absolute; top: -30%; left: -10%; right: -10%; height: 80%; background: radial-gradient(60% 50% at 30% 50%, rgba(196, 181, 253, 0.30), transparent 70%), radial-gradient(50% 50% at 75% 40%, rgba(125, 211, 252, 0.20), transparent 75%); filter: blur(40px); } .lp-art-grid { position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(15, 23, 42, 0.10) 1px, transparent 1.4px); background-size: 28px 28px; background-position: center center; -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 35%, transparent 85%); mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 35%, transparent 85%); } .lp-art-blob { position: absolute; border-radius: 50%; filter: blur(90px); will-change: transform; } .lp-art-blob-1 { width: 520px; height: 520px; top: -12%; left: -10%; background: radial-gradient(circle, rgba(192, 132, 252, 0.55) 0%, transparent 65%); animation: lp-drift-1 26s ease-in-out infinite alternate; } .lp-art-blob-2 { width: 460px; height: 460px; top: 25%; right: -12%; background: radial-gradient(circle, rgba(244, 114, 182, 0.45) 0%, transparent 65%); animation: lp-drift-2 32s ease-in-out infinite alternate; } .lp-art-blob-3 { width: 620px; height: 620px; bottom: -22%; left: 32%; background: radial-gradient(circle, rgba(125, 211, 252, 0.40) 0%, transparent 65%); animation: lp-drift-3 38s ease-in-out infinite alternate; } @keyframes lp-drift-1 { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(60px, 80px, 0) scale(1.08); } } @keyframes lp-drift-2 { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-90px, 50px, 0) scale(1.06); } } @keyframes lp-drift-3 { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(40px, -70px, 0) scale(1.05); } } /* Faint film-grain noise — keeps the cream from feeling flat / digital. * Generated SVG so no extra asset to load. */ .lp-art-noise { position: absolute; inset: 0; background-image: url("data:image/svg+xml;utf8,"); opacity: 0.06; mix-blend-mode: multiply; } /* Dark-theme tuning — discs glow more saturated against deep navy; grid * dots are white-on-black; noise blend lifts to overlay so it adds glitter * rather than darkens. */ :root[data-theme="dark"] .lp-art-aurora { background: radial-gradient(60% 50% at 30% 50%, rgba(124, 58, 237, 0.32), transparent 70%), radial-gradient(50% 50% at 75% 40%, rgba(56, 189, 248, 0.22), transparent 75%); } :root[data-theme="dark"] .lp-art-grid { background-image: radial-gradient(circle, rgba(255, 255, 255, 0.07) 1px, transparent 1.4px); } :root[data-theme="dark"] .lp-art-blob-1 { background: radial-gradient(circle, rgba(168, 85, 247, 0.40) 0%, transparent 65%); } :root[data-theme="dark"] .lp-art-blob-2 { background: radial-gradient(circle, rgba(236, 72, 153, 0.32) 0%, transparent 65%); } :root[data-theme="dark"] .lp-art-blob-3 { background: radial-gradient(circle, rgba(56, 189, 248, 0.28) 0%, transparent 65%); } :root[data-theme="dark"] .lp-art-noise { opacity: 0.04; mix-blend-mode: overlay; } .lp-locale-wrap { position: relative; pointer-events: auto; opacity: 0; animation: lpfadein 0.7s ease 0.05s forwards; margin-bottom: 6px; /* The headline's gradient `em` uses a filter which creates a stacking * context — without our own z-index here the dropdown would be painted * BEHIND the headline. Bump the wrap into its own context above the hero. */ z-index: 30; } .lp-locale { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.10); color: rgba(255, 255, 255, 0.86); font: inherit; font-size: 12.5px; letter-spacing: 0.005em; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; } .lp-locale:hover { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.20); } .lp-locale:focus-visible { outline: 2px solid rgba(125, 211, 252, 0.6); outline-offset: 3px; } .lp-locale-flag { font-size: 14px; line-height: 1; } .lp-locale-text { font-weight: 500; } .lp-locale-chev { opacity: 0.7; } .lp-locale-menu { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); list-style: none; padding: 6px; margin: 0; min-width: 240px; border-radius: 12px; background: rgba(20, 20, 30, 0.96); border: 1px solid rgba(255, 255, 255, 0.10); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4); backdrop-filter: blur(10px); z-index: 10; } .lp-locale-menu li { margin: 0; } .lp-locale-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px; border-radius: 8px; background: transparent; border: 0; color: rgba(255, 255, 255, 0.92); font: inherit; font-size: 13px; text-align: left; cursor: pointer; transition: background 0.12s ease; } .lp-locale-item:hover { background: rgba(255, 255, 255, 0.06); } .lp-locale-item.active { background: rgba(125, 211, 252, 0.10); } .lp-locale-item-label { flex: 1; min-width: 0; font-weight: 500; } .lp-locale-item-lang { font-size: 12px; color: rgba(255, 255, 255, 0.55); } .lp-locale-item-tick { color: #7dd3fc; margin-left: 4px; } /* Light-mode locale chip + popover */ :root[data-theme="light"] .lp-locale, :root:not([data-theme]) .lp-locale { background: rgba(255, 255, 255, 0.85); border-color: #d8dae3; color: #0f172a; backdrop-filter: blur(4px); } :root[data-theme="light"] .lp-locale:hover, :root:not([data-theme]) .lp-locale:hover { background: #ffffff; border-color: #9aa0ad; } :root[data-theme="light"] .lp-locale-menu, :root:not([data-theme]) .lp-locale-menu { background: #ffffff; border-color: #e6e7ec; box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12); backdrop-filter: none; } :root[data-theme="light"] .lp-locale-item, :root:not([data-theme]) .lp-locale-item { color: #1a1a1a; } :root[data-theme="light"] .lp-locale-item:hover, :root:not([data-theme]) .lp-locale-item:hover { background: #f5f6f8; } :root[data-theme="light"] .lp-locale-item.active, :root:not([data-theme]) .lp-locale-item.active { background: #eff6ff; } :root[data-theme="light"] .lp-locale-item-lang, :root:not([data-theme]) .lp-locale-item-lang { color: #6a6f7e; } :root[data-theme="light"] .lp-locale-item-tick, :root:not([data-theme]) .lp-locale-item-tick { color: #2563eb; } /* Trust microcopy beneath the CTA */ .lp-trustrow { /* No top margin — the parent `.lp-cta-row` already supplies a 10px gap. */ display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; font-size: 12px; color: rgba(255, 255, 255, 0.62); letter-spacing: 0.005em; pointer-events: auto; } .lp-trust { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .lp-trust-dot { width: 6px; height: 6px; border-radius: 50%; background: #10b981; box-shadow: 0 0 6px rgba(16, 185, 129, 0.6); } .lp-trust-sep { color: rgba(255, 255, 255, 0.30); } :root[data-theme="light"] .lp-trustrow, :root:not([data-theme]) .lp-trustrow { color: #4a5063; } :root[data-theme="light"] .lp-trust-sep, :root:not([data-theme]) .lp-trust-sep { color: #c5c8d4; } .lp-hero { /* Wider hero so a 14"+ MacBook doesn't feel zoomed-out. Caps at 720px so * ultrawide doesn't sprawl, floors at 100% so phone wraps cleanly. */ max-width: 720px; width: 100%; text-align: center; opacity: 0; animation: lpfadein 0.9s ease 0.2s forwards; } .lp-title { margin: 0 0 14px; /* Scales with viewport: 32px floor on phones (punchy), 4.6vw fluid, 60px * cap so a 27" iMac doesn't get a billboard. Bumped from prior 44px cap * which read as undersized on MacBook screens. */ font-size: clamp(32px, 4.6vw, 60px); line-height: 1.05; letter-spacing: -0.035em; font-weight: 600; color: var(--fg-0); background: linear-gradient(180deg, #ffffff 0%, #d8d4f5 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* "Phone AI" — the product moniker — gets the brand-iridescent treatment so * the eye lands on it. Italic stripped, kept as a chromatic accent. */ .lp-title em { font-style: normal; background: linear-gradient(135deg, #fbcfe8 0%, #c4b5fd 45%, #a5f3fc 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; /* A whisper of the orb's glow underneath, so the words feel lit-from-within * rather than just coloured. */ filter: drop-shadow(0 0 14px rgba(244, 114, 182, 0.22)); } .lp-sub { margin: 0 auto; max-width: 440px; font-size: clamp(13px, 1.2vw, 14.5px); line-height: 1.55; letter-spacing: -0.005em; color: var(--fg-mute); } /* ── Light-mode overrides for the landing surface ─────────────────────── * The dark landing was designed for glow-on-black: white gradient headline, * iridescent CTA, ghost secondary on transparent purple. In light mode we * keep the orb's own color but switch the chrome to ink-on-paper, with * AA-passing contrast (panel review: pastel-on-cream measured 1.4:1). */ :root[data-theme="light"] .lp-title, :root:not([data-theme]) .lp-title { background: linear-gradient(180deg, #0f172a 0%, #1e1b4b 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* `Phone AI` accent — deeper, saturated gradient. Dropped the white drop- * shadow glow (built for black; halos on cream). */ :root[data-theme="light"] .lp-title em, :root:not([data-theme]) .lp-title em { background: linear-gradient(135deg, #7c3aed 0%, #db2777 55%, #0891b2 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; filter: none; } :root[data-theme="light"] .lp-sub, :root:not([data-theme]) .lp-sub { color: #374151; font-size: clamp(14px, 1.2vw, 15px); /* floor 14 for AA-at-distance */ } /* CTA in light mode — ink fill, white label. The dark-mode CTA is iridescent * because it glows on black; on cream that pastel cloud reads decorative. * Make the primary action unambiguous. */ :root[data-theme="light"] .lp-cta, :root:not([data-theme]) .lp-cta { background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%); color: #ffffff; box-shadow: 0 10px 28px rgba(30, 27, 75, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.05) inset; } :root[data-theme="light"] .lp-cta:hover, :root:not([data-theme]) .lp-cta:hover { filter: brightness(1.08); box-shadow: 0 14px 36px rgba(30, 27, 75, 0.36), 0 0 0 1px rgba(255, 255, 255, 0.08) inset; } :root[data-theme="light"] .lp-cta-arrow, :root:not([data-theme]) .lp-cta-arrow, :root[data-theme="light"] .lp-cta-spark, :root:not([data-theme]) .lp-cta-spark { color: #ffffff; } :root[data-theme="light"] .lp-locale, :root:not([data-theme]) .lp-locale { background: rgba(255, 255, 255, 0.7); border-color: #e6e7ec; color: #4a5063; backdrop-filter: blur(4px); } :root[data-theme="light"] .lp-secondary, :root:not([data-theme]) .lp-secondary { color: #4a5063; } :root[data-theme="light"] .lp-secondary:hover, :root:not([data-theme]) .lp-secondary:hover { color: #0f172a; } /* Brandsplash + brandbar — swap the white logo for the dark one in light. */ :root[data-theme="light"] .brandsplash .brandmark, :root:not([data-theme]) .brandsplash .brandmark, :root[data-theme="light"] .brandbar img, :root:not([data-theme]) .brandbar img { filter: none; } :root[data-theme="dark"] .brandsplash .brandmark, :root[data-theme="dark"] .brandbar img { /* The SVG is already brand-coloured; in dark mode it sits on near-black * so leave as is. */ filter: none; } .lp-cta-row { display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; opacity: 0; animation: lpfadein 0.9s ease 0.4s forwards; } .lp-cta { pointer-events: auto; display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 26px 0 22px; font-size: 15.5px; font-weight: 550; letter-spacing: -0.01em; color: #1a0f2e; background: linear-gradient(135deg, #fbcfe8 0%, #ddd6fe 50%, #bae6fd 100%); border: 0; border-radius: 999px; cursor: pointer; box-shadow: 0 12px 40px rgba(244, 114, 182, 0.32), 0 0 0 1px rgba(255, 255, 255, 0.18) inset, 0 -1px 0 rgba(0, 0, 0, 0.05) inset; transition: transform 0.18s ease, box-shadow 0.2s ease, filter 0.2s ease; } .lp-cta:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 16px 50px rgba(244, 114, 182, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.24) inset; } .lp-cta:active { transform: translateY(0.5px); } .lp-cta-spark { font-size: 16px; line-height: 1; filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.65)); } .lp-cta-arrow { width: 18px; height: 18px; margin-left: 2px; color: #1a0f2e; transition: transform 0.2s ease; } .lp-cta:hover .lp-cta-arrow { transform: translateX(2px); } .lp-secondary { pointer-events: auto; font-size: 12.5px; letter-spacing: 0.01em; color: var(--fg-mute); background: transparent; border: 0; cursor: pointer; padding: 6px 8px; transition: color 0.2s ease; } .lp-secondary:hover { color: var(--fg-0); } @keyframes lpfadein { /* Vertical fade-in only — earlier this used translate(-50%, …) to pair * with the absolute-positioned `left: 50%` centring trick. Now the flex * layout handles centring; if we keep the X transform, the hero / CTA * shift 50% of their own width off-screen to the left. Just translateY. */ 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: translateY(0); } } @media (max-width: 540px) { .lp-hero { top: 11%; } .lp-cta-row { bottom: 7%; } .lp-cta { height: 52px; font-size: 15px; padding: 0 22px 0 18px; } } /* ── brand bar (top-left, persistent) ───────────────────────────────────── * * The logo lives in the top-left corner of every screen — landing, call, * reveal — as a quiet anchor. Mirrors the dots menu on the right so the * frame feels balanced. Dimmed by default so it never competes with the * orb, brightens on hover to signal "click to go home". */ .brandbar { position: fixed; top: 22px; left: 22px; /* 88 → 66 → 59 → 53 → 48. Approaching half the original; corner anchor * is now restrained to the level of a favicon-with-wordmark, not a * brand statement. */ height: 48px; display: inline-flex; align-items: center; opacity: 0; animation: bbfade 0.7s ease 0.2s forwards; z-index: 9; text-decoration: none; outline: none; -webkit-tap-highlight-color: transparent; } /* Brandbar carries the inline SVG. The wordmark inside uses * `currentColor`, so we set `color: var(--fg-0)` on the parent — light theme * gets a dark wordmark, dark theme gets a white one. Red X stays #df3739. */ .brandbar { color: var(--fg-0); } .brandbar svg { height: 100%; width: auto; display: block; transition: transform 0.2s ease; } .brandbar:hover svg, .brandbar:focus-visible svg { transform: translateY(-0.5px); } @keyframes bbfade { to { opacity: 0.78; } } .brandbar:hover, .brandbar:focus-visible { opacity: 1; } @media (max-width: 520px) { /* Mobile mirrors the desktop step ratio: 56 → 42 → 38 → 34 → 31. */ .brandbar { top: 16px; left: 16px; height: 31px; } .brandbar-wordmark { font-size: 28px; } .brandsplash .brandmark { height: 56px; } } /* ── progress hint (tiny, only when needed) ───────────────────────────── */ .hint { position: fixed; bottom: 110px; left: 0; right: 0; text-align: center; font-size: 12.5px; color: var(--fg-mute); letter-spacing: 0.02em; pointer-events: none; animation: rise 0.45s ease; } @keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* ── tweaks affordance + drawer ──────────────────────────────────────── */ .tweaks-toggle { position: fixed; top: 22px; right: 22px; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.07); color: rgba(255, 255, 255, 0.45); opacity: 0; animation: cmfade 0.8s ease 1.8s forwards; transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease; z-index: 7; } .tweaks-toggle:hover { background: rgba(255, 255, 255, 0.1); color: var(--fg-0); border-color: rgba(255, 255, 255, 0.18); } .tweaks-toggle:active { transform: scale(0.95); } .tweaks-toggle svg { width: 16px; height: 16px; stroke-width: 1.6; } .tweaks-scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity 0.28s ease; z-index: 18; } .tweaks-scrim.open { opacity: 1; pointer-events: auto; } .tweaks-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(760px, 100%); background: linear-gradient(180deg, rgba(10, 7, 22, 0.96), rgba(10, 7, 22, 0.98)); backdrop-filter: blur(28px) saturate(140%); border-left: 1px solid rgba(255, 255, 255, 0.06); transform: translateX(100%); transition: transform 0.34s cubic-bezier(.2, .9, .3, 1); z-index: 19; display: flex; flex-direction: column; } .tweaks-drawer .body { padding: 18px 32px 40px; } .tweaks-drawer.open { transform: translateX(0); } .tweaks-drawer header { padding: 22px 24px 14px; display: flex; align-items: center; justify-content: space-between; } .tweaks-drawer header h2 { margin: 0; font-size: 17px; font-weight: 500; letter-spacing: -0.015em; } .tweaks-drawer header .x { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: rgba(255, 255, 255, 0.04); color: var(--fg-mute); border: 1px solid rgba(255, 255, 255, 0.06); } .tweaks-drawer header .x:hover { background: rgba(255, 255, 255, 0.08); color: var(--fg-0); } .tweaks-drawer .tabs { display: flex; gap: 4px; padding: 4px 20px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .tweaks-drawer .tab { flex: 1; height: 32px; border-radius: 8px; font-size: 12.5px; color: var(--fg-mute); letter-spacing: 0.005em; transition: background 0.14s ease, color 0.14s ease; } .tweaks-drawer .tab.active { background: rgba(255, 255, 255, 0.06); color: var(--fg-0); } .tweaks-drawer .body { padding: 18px 24px 32px; overflow-y: auto; flex: 1; } .tw-section-title { font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-dim); margin: 22px 0 10px; display: flex; align-items: center; gap: 8px; } .tw-section-title:first-child { margin-top: 6px; } .tw-section-pill { font-size: 10px; letter-spacing: 0.04em; text-transform: none; background: rgba(167, 139, 250, 0.18); color: #a78bfa; padding: 1px 7px; border-radius: 99px; font-weight: 600; } .tw-help-top { font-size: 12px; color: var(--fg-mute); line-height: 1.5; margin-bottom: 8px; } .tw-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; } .tw-grid-2 .tw-field { border-bottom: 1px solid rgba(255, 255, 255, 0.04); } .tw-grid-2 .tw-field:nth-last-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, 0.04); } .tw-grid-2 .tw-field:last-child { border-bottom: 0; } .tw-grid-2 .tw-field:nth-last-child(2):nth-child(odd) { border-bottom: 0; } .tw-field.tw-field-empty .name { color: var(--fg-mute); } .tw-field-tick { color: #6ee7b7; font-size: 12px; font-weight: 600; } @media (max-width: 720px) { .tw-grid-2 { grid-template-columns: 1fr; } } .tw-field { padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.04); } .tw-field:last-child { border-bottom: 0; } .tw-field .label-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; } .tw-field .name { font-size: 13.5px; color: var(--fg-0); font-weight: 500; } .tw-field .val { font-size: 12.5px; color: var(--fg-1); font-variant-numeric: tabular-nums; } .tw-field .help { font-size: 12px; color: var(--fg-mute); line-height: 1.45; margin-bottom: 8px; } .tw-select, .tw-range { width: 100%; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 10px; padding: 9px 11px; outline: 0; font-size: 13px; } .tw-select { appearance: none; -webkit-appearance: none; cursor: pointer; } .tw-select:focus, .tw-range:focus { border-color: rgba(192, 132, 252, 0.55); } .tw-range { -webkit-appearance: none; appearance: none; height: 28px; padding: 0; background: transparent; border: 0; } .tw-range::-webkit-slider-runnable-track { height: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); } .tw-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: linear-gradient(180deg, #fde7f3, #c4b5fd); border: 0; margin-top: -6px; box-shadow: 0 4px 14px rgba(192, 132, 252, 0.5); cursor: pointer; } /* iOS-style toggle */ .tw-toggle { position: relative; width: 38px; height: 22px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); transition: background 0.18s ease; cursor: pointer; flex-shrink: 0; } .tw-toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform 0.2s cubic-bezier(.2, .9, .3, 1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } .tw-toggle.on { background: linear-gradient(135deg, #c4b5fd, #f0abfc); } .tw-toggle.on::after { transform: translateX(16px); } .tw-callout { background: rgba(192, 132, 252, 0.06); border: 1px solid rgba(192, 132, 252, 0.18); border-radius: 10px; padding: 11px 13px; font-size: 12.5px; color: var(--fg-1); line-height: 1.5; margin: 12px 0 6px; } /* agent cards in tweaks */ .tw-agent { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 14px; background: rgba(255, 255, 255, 0.025); margin-bottom: 8px; } .tw-agent .thumb { width: 38px; height: 38px; border-radius: 999px; background: radial-gradient(circle at 35% 30%, #fde7f3, #a78bfa 55%, #fb7185 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 6px 14px -6px rgba(244, 114, 182, 0.5); flex-shrink: 0; } .tw-agent .meta { flex: 1; min-width: 0; } .tw-agent .meta .name { font-weight: 500; font-size: 14px; } .tw-agent .meta .sub { font-size: 11.5px; color: var(--fg-mute); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tw-agent .call { height: 30px; padding: 0 13px; border-radius: 999px; background: linear-gradient(135deg, #f0abfc, #c4b5fd); color: #1a0f2e; font-weight: 600; font-size: 12px; letter-spacing: -0.005em; } .tw-agent .call:hover { filter: brightness(1.06); } .tw-agent .del { width: 30px; height: 30px; border-radius: 999px; background: rgba(244, 63, 94, 0.1); color: #fda4af; font-size: 16px; line-height: 1; border: 1px solid rgba(244, 63, 94, 0.25); margin-left: 6px; } .tw-agent .del:hover { background: rgba(244, 63, 94, 0.18); } .tw-empty { font-size: 12.5px; color: var(--fg-mute); padding: 18px 14px; border: 1px dashed rgba(255, 255, 255, 0.08); border-radius: 12px; text-align: center; } .tw-snapshot { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 12px; padding: 12px 14px; margin-top: 6px; } .tw-snapshot dl { margin: 0; } .tw-snapshot dt { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-dim); margin-top: 8px; } .tw-snapshot dt:first-child { margin-top: 0; } .tw-snapshot dd { margin: 2px 0 0 0; font-size: 13px; color: var(--fg-0); } /* agent edit view */ .tw-editor { display: flex; flex-direction: column; gap: 0; } .tw-editor .back { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--fg-mute); padding: 6px 0 14px; cursor: pointer; background: transparent; border: 0; } .tw-editor .back:hover { color: var(--fg-0); } .tw-editor .back svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.8; fill: none; } .tw-editor .heading { display: flex; align-items: center; gap: 14px; padding-bottom: 14px; margin-bottom: 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .tw-editor .heading .thumb { width: 44px; height: 44px; border-radius: 999px; background: radial-gradient(circle at 35% 30%, #fde7f3, #a78bfa 55%, #fb7185 100%); flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 6px 14px -6px rgba(244, 114, 182, 0.5); } .tw-editor .heading .name { font-size: 17px; font-weight: 500; letter-spacing: -0.015em; } .tw-editor .heading .sub { font-size: 12px; color: var(--fg-mute); margin-top: 2px; } .tw-input, .tw-textarea { width: 100%; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 10px; padding: 10px 12px; outline: 0; font-size: 13.5px; color: var(--fg-0); transition: border-color 0.15s ease, background 0.15s ease; } .tw-input:focus, .tw-textarea:focus { border-color: rgba(192, 132, 252, 0.55); background: rgba(255, 255, 255, 0.06); } .tw-textarea { min-height: 96px; resize: vertical; line-height: 1.5; } .tw-actions { display: flex; gap: 10px; margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.05); } .tw-actions .save { flex: 1; height: 40px; border-radius: 999px; background: linear-gradient(135deg, #f0abfc, #c4b5fd 50%, #a5f3fc); color: #1a0f2e; font-weight: 600; font-size: 13.5px; box-shadow: 0 12px 32px -12px rgba(192, 132, 252, 0.55); transition: filter 0.18s ease, transform 0.15s ease; } .tw-actions .save:hover { filter: brightness(1.06); } .tw-actions .save:active { transform: translateY(1px); } .tw-actions .save:disabled { opacity: 0.45; cursor: not-allowed; } .tw-actions .cancel { height: 40px; padding: 0 18px; border-radius: 999px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); color: var(--fg-0); font-size: 13px; } .tw-actions .cancel:hover { background: rgba(255, 255, 255, 0.08); } .tw-savehint { font-size: 12px; color: var(--fg-mute); margin-top: 8px; text-align: center; } .tw-savehint.ok { color: #86efac; } .tw-savehint.err { color: #fda4af; } /* ── Edit drawer: hint banner + collapsible Advanced section ── */ .tw-jump { font-size: 12.5px; line-height: 1.5; color: var(--fg-mute); background: rgba(167, 139, 250, 0.10); border: 1px solid rgba(167, 139, 250, 0.22); border-radius: 10px; padding: 10px 12px; margin: 6px 0 14px; } /* ── Light-theme overrides for the Edit drawer ── */ :root[data-theme="light"] .tweaks-scrim, :root:not([data-theme]) .tweaks-scrim { background: rgba(15, 17, 28, 0.32); } :root[data-theme="light"] .tweaks-drawer, :root:not([data-theme]) .tweaks-drawer { background: linear-gradient(180deg, #ffffff 0%, #f7f8fc 100%); border-left: 1px solid #e6e8ef; color: #1a1d2b; } :root[data-theme="light"] .tweaks-drawer header h2, :root:not([data-theme]) .tweaks-drawer header h2 { color: #1a1d2b; } :root[data-theme="light"] .tweaks-drawer header .x, :root:not([data-theme]) .tweaks-drawer header .x { background: #f3f4f8; color: #6b7080; border-color: #e6e8ef; } :root[data-theme="light"] .tweaks-drawer header .x:hover, :root:not([data-theme]) .tweaks-drawer header .x:hover { background: #ecedf3; color: #1a1d2b; } :root[data-theme="light"] .tw-editor .heading .name, :root:not([data-theme]) .tw-editor .heading .name { color: #1a1d2b; } :root[data-theme="light"] .tw-editor .heading .sub, :root:not([data-theme]) .tw-editor .heading .sub { color: #6b7080; } :root[data-theme="light"] .tw-editor .back, :root:not([data-theme]) .tw-editor .back { color: #6b7080; } :root[data-theme="light"] .tw-editor .back:hover, :root:not([data-theme]) .tw-editor .back:hover { color: #1a1d2b; } :root[data-theme="light"] .tw-section-title, :root:not([data-theme]) .tw-section-title { color: #6b7080; } :root[data-theme="light"] .tw-help-top, :root:not([data-theme]) .tw-help-top { color: #6b7080; } :root[data-theme="light"] .tw-field .name, :root:not([data-theme]) .tw-field .name { color: #1a1d2b; } :root[data-theme="light"] .tw-field.tw-field-empty .name, :root:not([data-theme]) .tw-field.tw-field-empty .name { color: #8a91a4; } :root[data-theme="light"] .tw-field .help, :root:not([data-theme]) .tw-field .help { color: #6b7080; } :root[data-theme="light"] .tw-field .val, :root:not([data-theme]) .tw-field .val { color: #1a1d2b; } :root[data-theme="light"] .tw-grid-2 .tw-field, :root:not([data-theme]) .tw-grid-2 .tw-field { border-bottom-color: #eef0f5; } :root[data-theme="light"] .tw-field, :root:not([data-theme]) .tw-field { border-bottom-color: #eef0f5; } :root[data-theme="light"] .tw-input, :root[data-theme="light"] .tw-textarea, :root[data-theme="light"] .tw-select, :root:not([data-theme]) .tw-input, :root:not([data-theme]) .tw-textarea, :root:not([data-theme]) .tw-select { background: #ffffff; border-color: #d8dbe4; color: #1a1d2b; } :root[data-theme="light"] .tw-input:focus, :root[data-theme="light"] .tw-textarea:focus, :root[data-theme="light"] .tw-select:focus, :root:not([data-theme]) .tw-input:focus, :root:not([data-theme]) .tw-textarea:focus, :root:not([data-theme]) .tw-select:focus { background: #ffffff; border-color: #a78bfa; box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.18); } :root[data-theme="light"] .tw-input::placeholder, :root[data-theme="light"] .tw-textarea::placeholder, :root:not([data-theme]) .tw-input::placeholder, :root:not([data-theme]) .tw-textarea::placeholder { color: #aab1c0; } :root[data-theme="light"] .tw-range::-webkit-slider-runnable-track, :root:not([data-theme]) .tw-range::-webkit-slider-runnable-track { background: #d8dbe4; } :root[data-theme="light"] .tw-actions, :root:not([data-theme]) .tw-actions { border-top-color: #eef0f5; } :root[data-theme="light"] .tw-actions .cancel, :root:not([data-theme]) .tw-actions .cancel { background: #fff; border-color: #d8dbe4; color: #1a1d2b; } :root[data-theme="light"] .tw-actions .cancel:hover, :root:not([data-theme]) .tw-actions .cancel:hover { background: #f3f4f8; } :root[data-theme="light"] .tw-savehint, :root:not([data-theme]) .tw-savehint { color: #6b7080; } :root[data-theme="light"] .tw-savehint.ok, :root:not([data-theme]) .tw-savehint.ok { color: #047857; } :root[data-theme="light"] .tw-savehint.err, :root:not([data-theme]) .tw-savehint.err { color: #b91c1c; } :root[data-theme="light"] .tw-field-tick, :root:not([data-theme]) .tw-field-tick { color: #047857; } :root[data-theme="light"] .tw-jump, :root:not([data-theme]) .tw-jump { background: #f5f3ff; border-color: #ddd6fe; color: #4338ca; } :root[data-theme="light"] .tw-editor .heading .thumb, :root:not([data-theme]) .tw-editor .heading .thumb { box-shadow: 0 8px 20px -8px rgba(167, 139, 250, 0.4); } /* ── call chrome ─────────────────────────────────────────────────────── */ .callchrome-top { position: fixed; top: 28px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 10px 18px; background: rgba(0, 0, 0, 0.45); border: 1px solid rgba(255, 255, 255, 0.08); backdrop-filter: blur(14px); border-radius: 999px; font-size: 13px; letter-spacing: -0.005em; color: var(--fg-0); animation: rise 0.4s ease; z-index: 8; } .callchrome-top .pulse { width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 12px rgba(52, 211, 153, 0.7); animation: pulsedot 1.4s ease-in-out infinite; } .callchrome-top .pulse.calling { background: #fbbf24; box-shadow: 0 0 12px rgba(251, 191, 36, 0.7); } .callchrome-top .pulse.ending { background: #fb7185; box-shadow: 0 0 12px rgba(251, 113, 133, 0.7); } @keyframes pulsedot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(0.7); } } .callchrome-top .who { font-weight: 500; } .callchrome-top .state { color: var(--fg-mute); font-size: 12px; letter-spacing: 0.04em; text-transform: lowercase; } .callchrome-top .timer { font-variant-numeric: tabular-nums; color: var(--fg-mute); font-size: 12.5px; letter-spacing: 0.02em; padding-left: 10px; margin-left: 4px; border-left: 1px solid rgba(255, 255, 255, 0.1); } .callchrome-bottom { position: fixed; bottom: 40px; left: 50%; transform: translateX(-50%); display: flex; gap: 12px; align-items: center; z-index: 8; animation: rise 0.45s ease; } .callchrome-bottom .pill { height: 44px; padding: 0 18px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; letter-spacing: -0.005em; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--fg-0); backdrop-filter: blur(12px); transition: background 0.18s ease, transform 0.15s ease, border-color 0.18s ease; } .callchrome-bottom .pill:hover { background: rgba(255, 255, 255, 0.1); } .callchrome-bottom .pill:active { transform: translateY(1px); } .callchrome-bottom .pill svg { width: 16px; height: 16px; stroke-width: 1.7; fill: none; stroke: currentColor; } .callchrome-bottom .pill.muted { background: rgba(192, 132, 252, 0.12); border-color: rgba(192, 132, 252, 0.3); color: #ddd6fe; } .callchrome-bottom .pill.hangup { background: rgba(244, 63, 94, 0.18); border-color: rgba(244, 63, 94, 0.5); color: #fecaca; padding: 0 22px; } .callchrome-bottom .pill.hangup:hover { background: rgba(244, 63, 94, 0.28); } /* Light theme — the moody glass pills disappear against a white landing * surface (especially End call, where pink text on a pink-tint background * has near-zero contrast). Re-skin all three pill variants with proper * light-mode chrome: solid surfaces for the destructive action, subtle * neutral surfaces for the rest. */ :root[data-theme="light"] .callchrome-bottom .pill, :root:not([data-theme]) .callchrome-bottom .pill { background: #ffffff; border-color: #d8dbe4; color: #1a1d2b; box-shadow: 0 2px 12px rgba(15, 17, 28, 0.08); } :root[data-theme="light"] .callchrome-bottom .pill:hover, :root:not([data-theme]) .callchrome-bottom .pill:hover { background: #f3f4f8; } :root[data-theme="light"] .callchrome-bottom .pill.muted, :root:not([data-theme]) .callchrome-bottom .pill.muted { background: #ede9fe; border-color: #c4b5fd; color: #5b21b6; } :root[data-theme="light"] .callchrome-bottom .pill.hangup, :root:not([data-theme]) .callchrome-bottom .pill.hangup { background: #ef4444; border-color: #dc2626; color: #ffffff; font-weight: 600; box-shadow: 0 6px 20px rgba(239, 68, 68, 0.30); } :root[data-theme="light"] .callchrome-bottom .pill.hangup:hover, :root:not([data-theme]) .callchrome-bottom .pill.hangup:hover { background: #dc2626; border-color: #b91c1c; box-shadow: 0 8px 24px rgba(239, 68, 68, 0.38); } /* ── live captions ─────────────────────────────────────────────────────── * * Two-line caption rail that sits between the blob and the type-rail. The * blob remains the centre of gravity; captions exist to *clarify* what was * just said (acting subtitles), not to lead the eye. Hence the soft glass * pill backgrounds, the small/dim user line, the slightly larger agent line, * and the gentle ascender animation when a new line arrives. */ .captions { position: fixed; left: 50%; transform: translateX(-50%); bottom: 172px; width: min(640px, calc(100% - 32px)); display: flex; flex-direction: column; align-items: center; gap: 6px; z-index: 5; pointer-events: none; } .cap { display: inline-flex; align-items: flex-start; gap: 10px; max-width: 100%; padding: 8px 16px 9px; border-radius: 20px; background: rgba(0, 0, 0, 0.42); border: 1px solid rgba(255, 255, 255, 0.07); backdrop-filter: blur(14px); animation: caprise 0.32s cubic-bezier(.2,.9,.3,1); } .cap-tag { flex-shrink: 0; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: rgba(255, 255, 255, 0.45); margin-top: 2px; } .cap-text { font-size: 14px; letter-spacing: -0.005em; line-height: 1.45; color: var(--fg-0); word-break: break-word; /* Cap any single utterance to ~3 lines so the rail never towers; longer * lines get truncated with a fade so the focus stays on the blob. */ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* The user's own line: smaller and dimmer — it's "what the orb heard". */ .cap-user .cap-text { font-size: 13px; color: rgba(255, 255, 255, 0.72); } .cap-user .cap-tag { color: rgba(125, 211, 252, 0.7); } /* The agent's line: clean, brighter — what they're saying. */ .cap-agent .cap-tag { color: rgba(244, 114, 182, 0.85); } .cap-agent .cap-text { font-weight: 450; } @keyframes caprise { 0% { opacity: 0; transform: translateY(6px); } 100% { opacity: 1; transform: translateY(0); } } @media (max-width: 520px) { .captions { bottom: 156px; gap: 5px; } .cap { padding: 7px 13px 8px; border-radius: 18px; } .cap-tag { font-size: 10px; } .cap-text { font-size: 13px; } .cap-user .cap-text { font-size: 12px; } } /* ── "View full chat" affordance (sits above the caption stack) ──────── */ .cap-history-btn { pointer-events: auto; display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 10px; font-size: 11px; letter-spacing: 0.02em; color: rgba(244, 114, 182, 0.85); background: rgba(244, 114, 182, 0.08); border: 1px solid rgba(244, 114, 182, 0.22); border-radius: 999px; backdrop-filter: blur(10px); transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.15s ease; margin-bottom: 2px; } .cap-history-btn svg { width: 13px; height: 13px; stroke-width: 1.7; flex-shrink: 0; } .cap-history-btn:hover { background: rgba(244, 114, 182, 0.16); border-color: rgba(244, 114, 182, 0.4); color: #fbcfe8; } .cap-history-btn:active { transform: translateY(0.5px); } /* ── full conversation panel ───────────────────────────────────────────── * * Half-height glass card rising from the bottom. The blob still breathes * above it (intentional — you can see Eva "thinking" while reading back). * Auto-scrolls to latest turn. */ .chatpanel-scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.18); backdrop-filter: blur(2px); z-index: 14; animation: scrimfade 0.25s ease; } @keyframes scrimfade { from { opacity: 0; } to { opacity: 1; } } .chatpanel { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); width: min(680px, 100%); max-height: 62vh; display: flex; flex-direction: column; background: linear-gradient(180deg, rgba(20, 14, 38, 0.82), rgba(14, 10, 26, 0.92)); border: 1px solid rgba(255, 255, 255, 0.08); border-bottom: 0; border-radius: 22px 22px 0 0; backdrop-filter: blur(24px) saturate(140%); z-index: 15; animation: chatpanelrise 0.32s cubic-bezier(.2,.9,.3,1); box-shadow: 0 -18px 60px rgba(0, 0, 0, 0.55); } @keyframes chatpanelrise { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } } .chatpanel-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); flex-shrink: 0; } .chatpanel-head .title { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--fg-0); letter-spacing: -0.005em; } .chatpanel-head .title svg { width: 16px; height: 16px; color: rgba(244, 114, 182, 0.85); } .chatpanel-head .count { margin-left: 4px; font-size: 11px; letter-spacing: 0.04em; color: var(--fg-mute); font-weight: 400; } .chatpanel-head .x { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--fg-mute); transition: background 0.18s ease, color 0.18s ease; } .chatpanel-head .x:hover { background: rgba(255, 255, 255, 0.08); color: var(--fg-0); } .chatpanel-head .x svg { width: 16px; height: 16px; } .chatpanel-body { flex: 1; overflow-y: auto; padding: 14px 16px 18px; /* Subtle gradient masks at top/bottom so messages fade as they scroll * under the header rather than cutting off harshly. */ mask-image: linear-gradient(180deg, transparent 0, #000 14px, #000 calc(100% - 8px), transparent 100%); -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14px, #000 calc(100% - 8px), transparent 100%); } .chatpanel-empty { text-align: center; color: var(--fg-mute); font-size: 13px; padding: 32px 12px; } .chatmsg { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; max-width: 86%; } .chatmsg .who { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: 0.04em; color: var(--fg-mute); } .chatmsg .who .role { font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } .chatmsg .who .ts { font-variant-numeric: tabular-nums; color: var(--fg-dim); } .chatmsg .text { padding: 9px 14px 10px; border-radius: 14px; font-size: 13.5px; line-height: 1.5; color: var(--fg-0); background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.06); letter-spacing: -0.005em; word-break: break-word; } /* User turns: right-aligned, cyan-tinted (matches caption palette) */ .chatmsg-user { align-self: flex-end; align-items: flex-end; } .chatmsg-user .who .role { color: rgba(125, 211, 252, 0.85); } .chatmsg-user .text { background: rgba(56, 189, 248, 0.10); border-color: rgba(56, 189, 248, 0.22); } /* Agent turns: left-aligned, magenta-tinted */ .chatmsg-agent { align-self: flex-start; align-items: flex-start; } .chatmsg-agent .who .role { color: rgba(244, 114, 182, 0.85); } .chatmsg-agent .text { background: rgba(244, 114, 182, 0.07); border-color: rgba(244, 114, 182, 0.18); } @media (max-width: 520px) { .chatpanel { width: 100%; border-radius: 18px 18px 0 0; max-height: 68vh; } .chatmsg { max-width: 92%; } .chatmsg .text { font-size: 13px; } } /* Light-mode overrides: the call view stays "moody" (the blob is the star), * but the conversation panel needs to look at home in light mode too — the * dark glass surface clashes with a bright landing. */ :root[data-theme="light"] .chatpanel-scrim, :root:not([data-theme]) .chatpanel-scrim { background: rgba(15, 17, 28, 0.10); } :root[data-theme="light"] .chatpanel, :root:not([data-theme]) .chatpanel { background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 249, 252, 0.98)); border-color: rgba(15, 17, 28, 0.08); box-shadow: 0 -18px 60px rgba(15, 17, 28, 0.12); } :root[data-theme="light"] .chatpanel-head, :root:not([data-theme]) .chatpanel-head { border-bottom-color: rgba(15, 17, 28, 0.06); } :root[data-theme="light"] .chatpanel-head .title, :root:not([data-theme]) .chatpanel-head .title { color: #1a1d2b; } :root[data-theme="light"] .chatpanel-head .title svg, :root:not([data-theme]) .chatpanel-head .title svg { color: #a78bfa; } :root[data-theme="light"] .chatpanel-head .count, :root:not([data-theme]) .chatpanel-head .count { color: #6b7080; } :root[data-theme="light"] .chatpanel-head .x, :root:not([data-theme]) .chatpanel-head .x { color: #6b7080; } :root[data-theme="light"] .chatpanel-head .x:hover, :root:not([data-theme]) .chatpanel-head .x:hover { background: rgba(15, 17, 28, 0.06); color: #1a1d2b; } :root[data-theme="light"] .chatpanel-empty, :root:not([data-theme]) .chatpanel-empty { color: #6b7080; } :root[data-theme="light"] .chatmsg .who, :root:not([data-theme]) .chatmsg .who { color: #6b7080; } :root[data-theme="light"] .chatmsg .who .ts, :root:not([data-theme]) .chatmsg .who .ts { color: #9aa0ad; } :root[data-theme="light"] .chatmsg .text, :root:not([data-theme]) .chatmsg .text { color: #1a1d2b; background: #f3f4f8; border-color: #e6e8ef; } :root[data-theme="light"] .chatmsg-user .who .role, :root:not([data-theme]) .chatmsg-user .who .role { color: #0284c7; } :root[data-theme="light"] .chatmsg-user .text, :root:not([data-theme]) .chatmsg-user .text { background: rgba(56, 189, 248, 0.10); border-color: rgba(56, 189, 248, 0.28); } :root[data-theme="light"] .chatmsg-agent .who .role, :root:not([data-theme]) .chatmsg-agent .who .role { color: #be185d; } :root[data-theme="light"] .chatmsg-agent .text, :root:not([data-theme]) .chatmsg-agent .text { background: rgba(244, 114, 182, 0.08); border-color: rgba(244, 114, 182, 0.28); } /* Call chrome top pill (the "Eva · on the line · 00:27" badge) also needs * a light-mode read. Same idea: the rest of the scene stays moody, this * little widget catches the eye. */ :root[data-theme="light"] .callchrome-top, :root:not([data-theme]) .callchrome-top { background: rgba(255, 255, 255, 0.92); border-color: rgba(15, 17, 28, 0.08); box-shadow: 0 6px 22px rgba(15, 17, 28, 0.10); color: #1a1d2b; } :root[data-theme="light"] .callchrome-top .who, :root:not([data-theme]) .callchrome-top .who { color: #1a1d2b; } :root[data-theme="light"] .callchrome-top .state, :root:not([data-theme]) .callchrome-top .state { color: #6b7080; } :root[data-theme="light"] .callchrome-top .timer, :root:not([data-theme]) .callchrome-top .timer { color: #6b7080; } /* type-to-Eva fallback input (always visible during a call) */ .type-rail { position: fixed; bottom: 110px; left: 50%; transform: translateX(-50%); width: min(560px, calc(100% - 32px)); z-index: 6; animation: rise 0.45s ease; } .type-rail form { display: flex; gap: 8px; align-items: center; } .type-rail input { flex: 1; height: 44px; background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 999px; padding: 0 18px; color: var(--fg-0); font-size: 14px; letter-spacing: -0.005em; backdrop-filter: blur(14px); outline: 0; transition: border-color 0.18s ease, background 0.18s ease; } .type-rail input::placeholder { color: rgba(196, 181, 253, 0.5); } .type-rail input:focus { border-color: rgba(192, 132, 252, 0.55); background: rgba(0, 0, 0, 0.6); } .type-rail button { height: 44px; padding: 0 18px; border-radius: 999px; background: linear-gradient(135deg, #f0abfc, #c4b5fd); color: #1a0f2e; font-weight: 600; font-size: 13.5px; border: 0; cursor: pointer; } .type-rail button:disabled { opacity: 0.4; cursor: not-allowed; } /* ── agent cockpit (post-build) ─────────────────────────────────────────── * * What the user sees the moment Eva hands off. Multi-card dashboard that * sets up the next step (test / go live) and surfaces the bells-and-whistles * for ops/team handoff. The shell is a fixed full-screen overlay with a * scrim; the inner shell sits in the centre and scrolls if content overflows. */ .cockpit { position: fixed; inset: 0; z-index: 12; display: flex; align-items: flex-start; justify-content: center; padding: 32px 24px 48px; overflow-y: auto; animation: cockpitfade 0.5s cubic-bezier(.2,.9,.3,1); } .cockpit-bg { position: fixed; inset: 0; /* Single deep-tinted scrim — no backdrop-filter on the cockpit's inner * cards because stacking many of them tanks headless Chrome's renderer. * The orb behind is already kept calm (audio-reactive only) so a solid * scrim is enough to focus attention on the cockpit content. */ background: linear-gradient(180deg, rgba(8, 5, 18, 0.92) 0%, rgba(2, 1, 8, 0.96) 100%); z-index: -1; } .cockpit-shell { width: min(900px, 100%); margin: auto; display: flex; flex-direction: column; gap: 20px; position: relative; } @keyframes cockpitfade { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: translateY(0); } } /* ── cockpit: head — identity block ──────────────────────────────────── */ .cockpit-head { position: relative; background: linear-gradient(180deg, rgba(28, 19, 52, 0.92), rgba(18, 13, 32, 0.95)); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 24px; padding: 26px 28px 22px; } .cockpit-eyebrow { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-dim); margin-bottom: 12px; } .cockpit-id { display: flex; align-items: flex-start; gap: 18px; } .cockpit-thumb { width: 60px; height: 60px; border-radius: 50%; flex-shrink: 0; background: radial-gradient(circle at 35% 28%, #fde7f3 0%, #c4b5fd 40%, #a5f3fc 75%, #0e0a1a 100%); box-shadow: 0 6px 24px rgba(244, 114, 182, 0.28), inset -3px -4px 8px rgba(0, 0, 0, 0.28); position: relative; } .cockpit-thumb::after { content: ""; position: absolute; top: 12%; left: 22%; width: 36%; height: 22%; border-radius: 50%; background: rgba(255, 255, 255, 0.45); filter: blur(4px); } .cockpit-name { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 4px; } .cockpit-tagline { font-size: 14px; color: var(--fg-mute); margin: 0 0 12px; } .cockpit-pills { display: flex; flex-wrap: wrap; gap: 6px; } .cockpit-pills .pill { display: inline-flex; align-items: center; padding: 4px 10px; font-size: 11.5px; letter-spacing: 0.01em; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 999px; color: var(--fg-0); } .cockpit-pills .pill.accent { background: rgba(244, 114, 182, 0.12); border-color: rgba(244, 114, 182, 0.32); color: #fbcfe8; } .cockpit-close { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--fg-mute); transition: background 0.2s ease, color 0.2s ease; } .cockpit-close:hover { background: rgba(255, 255, 255, 0.08); color: var(--fg-0); } .cockpit-close svg { width: 16px; height: 16px; } /* ── cockpit: hero CTAs ──────────────────────────────────────────────── */ .cockpit-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .ck-cta { /* Cockpit-namespaced — `.cta` is already taken by the landing CTA, which * is `position: fixed; bottom: 56px; ...`. Reusing the class name would * make these buttons render as fixed-position floaters over the cards. */ display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: 18px; cursor: pointer; text-align: left; font-family: inherit; transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(28, 19, 52, 0.85); color: var(--fg-0); } .ck-cta:hover { transform: translateY(-1px); } .ck-cta:active { transform: translateY(0.5px); } .ck-cta svg { width: 22px; height: 22px; flex-shrink: 0; } .ck-cta-body { display: flex; flex-direction: column; min-width: 0; } .ck-cta-title { font-size: 15.5px; font-weight: 550; letter-spacing: -0.01em; } .ck-cta-sub { font-size: 12.5px; color: var(--fg-mute); margin-top: 2px; } .ck-cta-primary { background: linear-gradient(135deg, rgba(244, 114, 182, 0.22), rgba(192, 132, 252, 0.18)); border-color: rgba(244, 114, 182, 0.45); box-shadow: 0 8px 28px rgba(244, 114, 182, 0.18); } .ck-cta-primary .ck-cta-title { color: #fbcfe8; } .ck-cta-primary svg { color: #fbcfe8; } .ck-cta-primary:hover { background: linear-gradient(135deg, rgba(244, 114, 182, 0.3), rgba(192, 132, 252, 0.24)); border-color: rgba(244, 114, 182, 0.6); } .ck-cta-secondary:hover { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.16); } @media (max-width: 540px) { .cockpit-hero { grid-template-columns: 1fr; } } /* ── cockpit: context grid ───────────────────────────────────────────── */ .cockpit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } @media (max-width: 880px) { .cockpit-grid { grid-template-columns: 1fr; } } .ck-card { background: rgba(28, 19, 52, 0.78); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 18px; padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 12px; } .ck-card header h3 { font-size: 13px; font-weight: 550; letter-spacing: 0.02em; text-transform: uppercase; color: var(--fg-mute); margin: 0; } .ck-row { display: flex; flex-direction: column; gap: 6px; } .ck-row-thin { flex-direction: row; flex-wrap: wrap; gap: 6px; } .ck-label { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-dim); } .ck-quote { margin: 0; padding: 10px 12px; background: rgba(244, 114, 182, 0.06); border-left: 2px solid rgba(244, 114, 182, 0.4); border-radius: 10px; font-size: 13.5px; line-height: 1.45; color: var(--fg-0); font-style: italic; } .ck-chips { display: flex; flex-wrap: wrap; gap: 4px; } .ck-chip { font-size: 11px; padding: 3px 8px; border-radius: 8px; background: rgba(125, 211, 252, 0.10); border: 1px solid rgba(125, 211, 252, 0.22); color: rgba(186, 230, 253, 0.95); text-transform: capitalize; } .ck-mini { font-size: 11px; color: var(--fg-mute); padding: 3px 8px; border-radius: 8px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.06); } .ck-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .ck-list li { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--fg-0); } .ck-list svg { width: 13px; height: 13px; color: rgba(110, 231, 183, 0.9); flex-shrink: 0; } .ck-list-aux { color: var(--fg-mute) !important; font-size: 12px !important; } .ck-list-aux code { background: rgba(255, 255, 255, 0.06); padding: 1px 5px; border-radius: 4px; font-size: 11px; } .ck-empty { font-size: 12.5px; color: var(--fg-mute); margin: 0; } .ck-lede { font-size: 12.5px; line-height: 1.5; color: var(--fg-mute); margin: 0; } .ck-handoffs { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; } .ck-handoff { display: flex; align-items: center; justify-content: space-between; padding: 7px 11px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 11px; } .ck-handoff-title { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--fg-0); } .ck-handoff-title svg { width: 13px; height: 13px; color: var(--fg-mute); } .ck-handoff-status { font-size: 11px; } .ck-handoff-status .ok { color: #86efac; } .ck-handoff-status .muted { color: var(--fg-dim); } .ck-handoff-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); font-size: 12.5px; color: var(--fg-0); align-self: flex-start; transition: background 0.18s ease; } .ck-handoff-btn:hover { background: rgba(255, 255, 255, 0.08); } .ck-handoff-btn svg { width: 13px; height: 13px; } /* ── cockpit: footer ─────────────────────────────────────────────────── */ .cockpit-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; } .cockpit-link { font-size: 12.5px; color: var(--fg-mute); letter-spacing: 0.01em; transition: color 0.18s ease; } .cockpit-link:hover { color: var(--fg-0); } .cockpit-foot-id { font-size: 11px; color: var(--fg-dim); letter-spacing: 0.04em; } /* ── /agents — full-page agent list ──────────────────────────────────── * * Replaces the old tweaks-drawer "Your agents" tab. A real page reachable at * /agents, opened from the top-right dots menu or the landing's secondary * link. Grid of agent cards; click → /agent/; "Build new" → /build. */ .agents-page { position: fixed; inset: 0; z-index: 11; overflow-y: auto; padding: 80px 36px 56px; background: linear-gradient(180deg, rgba(8, 5, 18, 0.96), rgba(2, 1, 8, 0.99)); animation: agentsfade 0.4s cubic-bezier(.2,.9,.3,1); } @keyframes agentsfade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .agents-head { max-width: 1080px; margin: 0 auto 28px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .agents-eyebrow { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--fg-dim); margin-bottom: 8px; } .agents-title { margin: 0; font-size: clamp(28px, 3.4vw, 38px); font-weight: 600; letter-spacing: -0.022em; background: linear-gradient(180deg, #ffffff, #d8d4f5); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .agents-actions { display: flex; align-items: center; gap: 10px; } .agents-search { height: 40px; padding: 0 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); color: var(--fg-0); font: inherit; font-size: 13px; width: 240px; outline: 0; } .agents-search::placeholder { color: var(--fg-dim); } .agents-search:focus { border-color: rgba(244, 114, 182, 0.4); } .agents-new { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 999px; background: linear-gradient(135deg, #fbcfe8, #ddd6fe 50%, #bae6fd); color: #1a0f2e; font: inherit; font-size: 13.5px; font-weight: 550; letter-spacing: -0.005em; border: 0; cursor: pointer; box-shadow: 0 6px 18px rgba(244, 114, 182, 0.2); transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease; } .agents-new:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 10px 26px rgba(244, 114, 182, 0.28); } .agents-new-spark { filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.6)); } .agents-grid { max-width: 1080px; margin: 0 auto; list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; } .agent-card { position: relative; background: rgba(28, 19, 52, 0.72); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 18px; transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease; } .agent-card:hover { transform: translateY(-2px); border-color: rgba(244, 114, 182, 0.32); background: rgba(36, 24, 64, 0.82); } .agent-card-tap { width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 18px 18px 16px; background: transparent; border: 0; cursor: pointer; text-align: left; color: inherit; font: inherit; } .agent-card-thumb { width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fde7f3 0%, #c4b5fd 45%, #a5f3fc 80%, #0e0a1a 100%); box-shadow: 0 4px 16px rgba(244, 114, 182, 0.22), inset -2px -3px 6px rgba(0, 0, 0, 0.25); } .agent-card-meta { display: flex; flex-direction: column; gap: 4px; } .agent-card-name { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--fg-0); } .agent-card-sub { font-size: 12px; letter-spacing: 0.005em; color: var(--fg-mute); } .agent-card-greet { font-size: 12.5px; line-height: 1.45; color: rgba(255, 255, 255, 0.62); font-style: italic; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .agent-card-del { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: transparent; border: 0; cursor: pointer; color: var(--fg-dim); opacity: 0; transition: background 0.18s ease, color 0.18s ease, opacity 0.18s ease; } .agent-card:hover .agent-card-del { opacity: 1; } .agent-card-del:hover { background: rgba(244, 63, 94, 0.16); color: #fda4af; } .agent-card-del svg { width: 14px; height: 14px; } .agents-empty { max-width: 520px; margin: 48px auto 0; text-align: center; padding: 36px 28px; } .agents-empty-orb { width: 92px; height: 92px; margin: 0 auto 16px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fde7f3, #c4b5fd 50%, #a5f3fc 88%, #0e0a1a); box-shadow: 0 10px 40px rgba(244, 114, 182, 0.2), inset -3px -4px 8px rgba(0, 0, 0, 0.28); opacity: 0.86; } .agents-empty-title { font-size: 18px; font-weight: 550; letter-spacing: -0.012em; margin-bottom: 6px; } .agents-empty-sub { font-size: 13.5px; color: var(--fg-mute); line-height: 1.55; margin-bottom: 18px; } .agents-empty-cta { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 22px; border-radius: 999px; background: linear-gradient(135deg, #fbcfe8, #ddd6fe 50%, #bae6fd); color: #1a0f2e; font: inherit; font-size: 13.5px; font-weight: 550; border: 0; cursor: pointer; box-shadow: 0 8px 24px rgba(244, 114, 182, 0.22); } /* ── theatrical unveal ────────────────────────────────────────────────── * * Three-second curtain between Eva's "she's all set" and the cockpit. Beats: * 0.0–0.6s Curtain darkens, a soft spotlight glows in the centre. * 0.6–1.4s "— meet —" eyebrow fades up. * 1.0+ +0.06s per letter Agent name flips in letter-by-letter with a * chromatic shimmer (iridescent gradient). * ~2.0s Sector / locale / voice tagline settles in below. * 3.3s onDone() — cockpit takes over. */ .unveal { position: fixed; inset: 0; z-index: 16; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: rgba(2, 1, 8, 0.85); overflow: hidden; animation: unveal-fade 0.6s ease; } @keyframes unveal-fade { from { opacity: 0; } to { opacity: 1; } } .unveal-curtain { position: absolute; inset: 0; background: radial-gradient(60% 50% at 50% 45%, rgba(244, 114, 182, 0.18) 0%, rgba(0, 0, 0, 0) 60%); pointer-events: none; opacity: 0; animation: unveal-curtain-in 1.2s cubic-bezier(.2,.9,.3,1) 0.2s forwards; } .unveal-spot { position: absolute; left: 50%; top: 45%; width: 320px; height: 320px; margin: -160px 0 0 -160px; border-radius: 50%; background: radial-gradient(circle, rgba(244, 114, 182, 0.32), rgba(192, 132, 252, 0.18) 45%, rgba(0, 0, 0, 0) 75%); filter: blur(30px); pointer-events: none; opacity: 0; animation: unveal-spot-pulse 2.4s cubic-bezier(.2,.9,.3,1) 0.3s forwards; } @keyframes unveal-curtain-in { to { opacity: 1; } } @keyframes unveal-spot-pulse { 0% { opacity: 0; transform: scale(0.7); } 60% { opacity: 1; transform: scale(1.08); } 100% { opacity: 0.78; transform: scale(1); } } /* Light SpiderX logo pinned near the top of the dark reveal canvas. The SVG wordmark is `currentColor`, so forcing color:#fff here makes it read as the light/white variant against the near-black bg; the red X accent (hardcoded fill) stays as the brand pop. */ .unveal-brand { position: absolute; top: clamp(28px, 6vh, 64px); left: 50%; transform: translateX(-50%); color: #ffffff; opacity: 0; animation: unveal-fadein 0.8s ease 0.15s forwards; pointer-events: none; } .unveal-eyebrow { position: relative; font-size: 11px; letter-spacing: 0.36em; text-transform: uppercase; color: rgba(244, 114, 182, 0.85); opacity: 0; animation: unveal-fadein 0.7s ease 0.7s forwards; } .unveal-name { position: relative; margin: 6px 0 4px; font-size: clamp(48px, 8.2vw, 96px); font-weight: 600; letter-spacing: -0.04em; line-height: 1; display: inline-flex; gap: 0; } .unveal-ch { display: inline-block; opacity: 0; transform: translateY(14px) scale(0.96); background: linear-gradient(135deg, #fbcfe8 0%, #c4b5fd 50%, #a5f3fc 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; filter: drop-shadow(0 0 18px rgba(244, 114, 182, 0.28)); animation: unveal-letter 0.55s cubic-bezier(.2,.9,.3,1) forwards; } @keyframes unveal-letter { to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes unveal-fadein { to { opacity: 1; } } .unveal-tagline { position: relative; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; letter-spacing: 0.01em; color: rgba(255, 255, 255, 0.6); opacity: 0; animation: unveal-fadein 0.7s ease 2.0s forwards; } .unveal-tagline .dot { color: var(--fg-dim); } .unveal-skip { position: absolute; right: 22px; bottom: 22px; font-size: 12px; letter-spacing: 0.02em; color: var(--fg-mute); background: transparent; border: 0; cursor: pointer; padding: 6px 12px; opacity: 0; animation: unveal-fadein 0.6s ease 1.8s forwards; transition: color 0.18s ease; } .unveal-skip:hover { color: var(--fg-0); } /* ── cockpit additions: step rail + step card + plan badge ─────────────── */ .cockpit-eyebrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-dim); } .cockpit-plan { display: inline-flex; align-items: center; gap: 6px; letter-spacing: 0.04em; text-transform: none; font-size: 11.5px; color: rgba(125, 211, 252, 0.85); padding: 4px 10px; background: rgba(56, 189, 248, 0.08); border: 1px solid rgba(56, 189, 248, 0.22); border-radius: 999px; } .cockpit-plan svg { width: 12px; height: 12px; } .cockpit-rail { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 4px; background: rgba(28, 19, 52, 0.6); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 14px; } .rail-step { flex: 1; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: transparent; border: 0; font-family: inherit; font-size: 12px; letter-spacing: 0.01em; color: var(--fg-mute); cursor: pointer; transition: background 0.18s ease, color 0.18s ease; justify-content: center; } .rail-step:hover { background: rgba(255, 255, 255, 0.04); color: var(--fg-0); } .rail-step.active { background: linear-gradient(135deg, rgba(244, 114, 182, 0.18), rgba(192, 132, 252, 0.14)); color: var(--fg-0); } .rail-step.done { color: rgba(110, 231, 183, 0.85); } .rail-dot { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); font-size: 10.5px; font-weight: 600; letter-spacing: 0; flex-shrink: 0; } .rail-step.active .rail-dot { background: linear-gradient(135deg, #fbcfe8, #c4b5fd); color: #1a0f2e; } .rail-step.done .rail-dot { background: rgba(110, 231, 183, 0.18); color: rgba(110, 231, 183, 0.95); } @media (max-width: 720px) { .rail-step .rail-label { display: none; } .rail-step { padding: 8px; } } .cockpit-step { background: rgba(28, 19, 52, 0.78); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 18px; padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 18px; min-height: 280px; } .step-head h2 { margin: 0 0 6px; font-size: 21px; font-weight: 600; letter-spacing: -0.018em; } .step-head p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--fg-mute); max-width: 60ch; } .step-options { display: flex; flex-direction: column; gap: 12px; } .step-body { display: flex; flex-direction: column; gap: 12px; } .step-tools { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .step-tools li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--fg-0); padding: 10px 14px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 12px; } .step-tools li code { font-size: 12px; background: rgba(255, 255, 255, 0.06); padding: 1px 5px; border-radius: 4px; } .tool-check { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; font-size: 11px; background: rgba(110, 231, 183, 0.16); color: rgba(110, 231, 183, 0.95); flex-shrink: 0; } .step-skip { align-self: flex-start; padding: 8px 14px; font-size: 12.5px; letter-spacing: 0.005em; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 999px; color: var(--fg-0); cursor: pointer; transition: background 0.18s ease; } .step-skip:hover { background: rgba(255, 255, 255, 0.08); } .step-dropzone { display: flex; align-items: center; gap: 14px; padding: 22px; border-radius: 14px; border: 1px dashed rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.02); } .step-dropzone svg { width: 28px; height: 28px; color: var(--fg-mute); flex-shrink: 0; } .dz-title { font-size: 14px; color: var(--fg-0); margin-bottom: 2px; } .dz-sub { font-size: 12px; color: var(--fg-mute); } /* ── phone-test mini-form ─────────────────────────────────────────────── */ .phone-test { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 16px; } .phone-test-head { display: flex; align-items: center; gap: 12px; } .phone-test-head svg { width: 22px; height: 22px; color: rgba(125, 211, 252, 0.9); flex-shrink: 0; } .pt-title { font-size: 14px; color: var(--fg-0); font-weight: 500; } .pt-sub { font-size: 12px; color: var(--fg-mute); margin-top: 2px; } .phone-test-row { display: flex; gap: 8px; } .pt-input { flex: 1; height: 40px; padding: 0 14px; border-radius: 999px; background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--fg-0); font: inherit; font-size: 13.5px; outline: 0; transition: border-color 0.18s ease; } .pt-input::placeholder { color: rgba(255, 255, 255, 0.32); } .pt-input:focus { border-color: rgba(125, 211, 252, 0.5); } .pt-go { height: 40px; padding: 0 18px; border-radius: 999px; background: rgba(125, 211, 252, 0.16); border: 1px solid rgba(125, 211, 252, 0.32); color: #bae6fd; font: inherit; font-size: 13.5px; font-weight: 550; cursor: pointer; transition: background 0.18s ease; } .pt-go:hover:not(:disabled) { background: rgba(125, 211, 252, 0.24); } .pt-go:disabled { opacity: 0.45; cursor: not-allowed; } /* ── go-live cards (region-aware + embed) ─────────────────────────────── */ .live-card { padding: 18px 20px 20px; background: linear-gradient(135deg, rgba(244, 114, 182, 0.08), rgba(192, 132, 252, 0.06)); border: 1px solid rgba(244, 114, 182, 0.22); border-radius: 16px; display: flex; flex-direction: column; gap: 8px; } .live-card-secondary { background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.08); } .live-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; } .live-tag { font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(244, 114, 182, 0.9); padding: 3px 8px; background: rgba(244, 114, 182, 0.1); border: 1px solid rgba(244, 114, 182, 0.3); border-radius: 6px; } .live-provider { font-size: 12px; letter-spacing: 0.04em; color: var(--fg-mute); text-transform: uppercase; } .live-card-title { font-size: 17px; font-weight: 550; letter-spacing: -0.012em; color: var(--fg-0); } .live-card-sub { font-size: 13px; color: var(--fg-mute); margin-bottom: 6px; } .live-card-cta { align-self: flex-start; margin-top: 4px; padding: 0 18px; height: 44px; } .live-alts { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 10px; font-size: 12px; color: var(--fg-dim); } .live-alt { font-size: 12px; color: var(--fg-mute); padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); cursor: pointer; transition: background 0.18s ease, color 0.18s ease; } .live-alt:hover { background: rgba(255, 255, 255, 0.06); color: var(--fg-0); } .live-safety { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; margin-top: 4px; background: rgba(125, 211, 252, 0.04); border: 1px solid rgba(125, 211, 252, 0.10); border-radius: 12px; } .live-safety-icon { flex: 0 0 auto; width: 22px; height: 22px; color: rgb(125, 211, 252); margin-top: 2px; } .live-safety-icon svg { width: 100%; height: 100%; } .live-safety-body { min-width: 0; } .live-safety-title { font-size: 13px; font-weight: 600; color: var(--fg-0); margin-bottom: 2px; } .live-safety-rules { font-size: 12.5px; line-height: 1.55; color: var(--fg-dim); } .live-safety-link { font-size: 12px; color: var(--fg-mute); background: none; border: none; padding: 0; margin-left: 4px; cursor: pointer; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.18); text-underline-offset: 2px; } .live-safety-link:hover { color: var(--fg-0); } /* ── performance step (call log + outcome tiles) ──────────────────────── */ .perf-outcomes { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; } .perf-outcome { padding: 12px 14px; background: linear-gradient(135deg, rgba(125, 211, 252, 0.06), rgba(244, 114, 182, 0.04)); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 12px; text-align: center; } .perf-outcome-count { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--fg-0); } .perf-outcome-label { font-size: 11px; letter-spacing: 0.04em; text-transform: capitalize; color: var(--fg-mute); margin-top: 2px; } .perf-empty { padding: 28px 22px; border: 1px dashed rgba(255, 255, 255, 0.12); border-radius: 14px; text-align: center; } .perf-empty-title { font-size: 14px; color: var(--fg-0); margin-bottom: 6px; } .perf-empty-sub { font-size: 12.5px; color: var(--fg-mute); line-height: 1.55; } .perf-empty-sub b { color: rgba(244, 114, 182, 0.85); font-weight: 500; } .call-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .call-row { padding: 10px 14px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 12px; } .call-row-head { display: flex; align-items: center; gap: 10px; font-size: 11.5px; } .call-outcome { font-size: 11px; letter-spacing: 0.05em; text-transform: capitalize; padding: 3px 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.05); color: var(--fg-mute); } .call-outcome-booked, .call-outcome-resolved, .call-outcome-qualified, .call-outcome-intake_complete { background: rgba(110, 231, 183, 0.14); color: rgba(110, 231, 183, 0.95); } .call-outcome-callback_requested, .call-outcome-rescheduled, .call-outcome-info_only { background: rgba(125, 211, 252, 0.14); color: rgba(125, 211, 252, 0.95); } .call-outcome-not_interested, .call-outcome-wrong_number, .call-outcome-voicemail { background: rgba(244, 114, 182, 0.1); color: rgba(244, 114, 182, 0.85); } .call-time { color: var(--fg-dim); font-variant-numeric: tabular-nums; } .call-dur { margin-left: auto; color: var(--fg-mute); } .call-summary { font-size: 13px; color: var(--fg-0); margin-top: 6px; line-height: 1.45; } /* ── cockpit footer (Back / Next nav row) ─────────────────────────────── */ .cockpit-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; gap: 12px; } .cockpit-next { padding: 8px 18px; height: 38px; border-radius: 999px; background: linear-gradient(135deg, rgba(244, 114, 182, 0.18), rgba(192, 132, 252, 0.14)); border: 1px solid rgba(244, 114, 182, 0.32); color: #fbcfe8; font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; transition: background 0.18s ease; } .cockpit-next:hover { background: linear-gradient(135deg, rgba(244, 114, 182, 0.26), rgba(192, 132, 252, 0.22)); } /* ── agent reveal (post-build) — legacy, kept for the type-rail style ─ */ .reveal { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 12; padding: 32px 24px; animation: revealfade 0.55s cubic-bezier(.2, .9, .3, 1); } @keyframes revealfade { 0% { opacity: 0; transform: translateY(8px) scale(0.985); } 100% { opacity: 1; transform: translateY(0) scale(1); } } .reveal-card { width: min(560px, 100%); background: linear-gradient(180deg, rgba(20, 14, 38, 0.7), rgba(14, 10, 26, 0.78)); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 28px; backdrop-filter: blur(28px) saturate(140%); box-shadow: 0 40px 80px -20px rgba(192, 132, 252, 0.32), 0 0 0 1px rgba(255, 255, 255, 0.04) inset; padding: 36px 36px 28px; text-align: center; } .reveal-eyebrow { font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--fg-dim); margin-bottom: 18px; } .reveal-thumb { width: 96px; height: 96px; border-radius: 999px; margin: 0 auto 22px; background: radial-gradient(circle at 35% 30%, #fde7f3, #a78bfa 50%, #fb7185 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25), 0 18px 48px -18px rgba(244, 114, 182, 0.65); position: relative; animation: reveal-pop 0.7s cubic-bezier(.2, .9, .3, 1); } @keyframes reveal-pop { 0% { transform: scale(0.6); opacity: 0; } 60% { transform: scale(1.04); } 100% { transform: scale(1); opacity: 1; } } .reveal-thumb::after { content: ""; position: absolute; top: 18%; left: 22%; width: 18px; height: 12px; border-radius: 50%; background: rgba(255, 255, 255, 0.55); filter: blur(3px); } .reveal-name { font-size: clamp(28px, 4.5vw, 36px); font-weight: 500; letter-spacing: -0.025em; background: linear-gradient(180deg, #ffffff 30%, #d0c8f0 95%); -webkit-background-clip: text; background-clip: text; color: transparent; margin: 0 0 8px; } .reveal-tagline { font-size: 14px; color: var(--fg-mute); letter-spacing: -0.005em; margin: 0 0 18px; } .reveal-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 22px; } .reveal-pill { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); font-size: 12px; color: var(--fg-1); letter-spacing: -0.005em; } .reveal-pill.accent { background: rgba(192, 132, 252, 0.12); border-color: rgba(192, 132, 252, 0.32); color: #e9d5ff; } .reveal-greeting { font-size: 15px; font-style: italic; color: var(--fg-0); line-height: 1.55; letter-spacing: -0.005em; padding: 16px 18px; border-radius: 16px; background: rgba(255, 255, 255, 0.025); border: 1px solid rgba(255, 255, 255, 0.05); margin: 0 0 22px; } .reveal-greeting::before { content: "\201C"; color: var(--accent-2); margin-right: 4px; } .reveal-greeting::after { content: "\201D"; color: var(--accent-2); margin-left: 4px; } .reveal-section-label { font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-dim); margin-bottom: 8px; } .reveal-connectors { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 26px; } .reveal-cx { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 999px; background: rgba(56, 189, 248, 0.08); border: 1px solid rgba(56, 189, 248, 0.25); color: #bae6fd; font-size: 11.5px; letter-spacing: -0.005em; } .reveal-actions { display: flex; gap: 10px; margin-top: 8px; } .reveal-actions .a { flex: 1; height: 48px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; letter-spacing: -0.005em; transition: filter 0.18s ease, transform 0.15s ease, background 0.18s ease; } .reveal-actions .a.secondary { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--fg-0); } .reveal-actions .a.secondary:hover { background: rgba(255, 255, 255, 0.09); } .reveal-actions .a.primary { background: linear-gradient(135deg, #f0abfc, #c4b5fd 50%, #a5f3fc); color: #1a0f2e; font-weight: 600; box-shadow: 0 18px 40px -16px rgba(192, 132, 252, 0.6); } .reveal-actions .a.primary:hover { filter: brightness(1.06); } .reveal-actions .a.primary:active { transform: translateY(1px); } .reveal-actions .a svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.7; } .reveal-skip { display: block; margin: 18px auto 0; font-size: 12px; color: var(--fg-dim); background: transparent; cursor: pointer; transition: color 0.15s ease; } .reveal-skip:hover { color: var(--fg-mute); } /* go-live modal */ .golive-modal { position: fixed; inset: 0; z-index: 25; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(6px); animation: revealfade 0.3s ease; } .golive-card { width: min(540px, calc(100% - 32px)); background: linear-gradient(180deg, rgba(20, 14, 38, 0.95), rgba(14, 10, 26, 0.95)); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 22px; padding: 28px 30px; } .golive-card h2 { margin: 0 0 4px; font-size: 20px; font-weight: 500; letter-spacing: -0.015em; } .golive-card .lede { color: var(--fg-mute); font-size: 14px; margin: 0 0 18px; } .golive-step { margin: 16px 0; padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.025); border: 1px solid rgba(255, 255, 255, 0.06); } .golive-step .num { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-dim); margin-bottom: 4px; } .golive-step .text { font-size: 13.5px; color: var(--fg-0); line-height: 1.5; } .golive-step .text code { background: rgba(255, 255, 255, 0.06); padding: 2px 6px; border-radius: 6px; font-size: 12px; user-select: all; display: inline-block; word-break: break-all; } .golive-actions { display: flex; gap: 10px; margin-top: 22px; } .golive-actions button { flex: 1; height: 42px; border-radius: 999px; font-size: 13.5px; } .golive-actions .close { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--fg-0); } .golive-actions .copy { background: linear-gradient(135deg, #f0abfc, #c4b5fd); color: #1a0f2e; font-weight: 600; } .golive-actions button:disabled { opacity: 0.55; cursor: not-allowed; } .golive-actions-compact { margin-top: 14px; } .golive-actions-compact button { flex: 0 0 auto; padding: 0 18px; } /* Phase 1: friendly number-request form */ .golive-form { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; } .golive-field { display: flex; flex-direction: column; gap: 6px; } .golive-label { font-size: 12.5px; font-weight: 500; color: var(--fg-dim); } .golive-label .golive-opt { font-weight: 400; color: var(--fg-mute); margin-left: 4px; } .golive-input, .golive-select { width: 100%; height: 42px; padding: 0 14px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.10); color: var(--fg-0); font-size: 14px; font-family: inherit; outline: none; transition: border-color 0.18s ease, background 0.18s ease; } .golive-input:focus, .golive-select:focus { border-color: rgba(192, 132, 252, 0.55); background: rgba(255, 255, 255, 0.06); } .golive-select { appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; padding-right: 36px; } .golive-select option { background: #1a1023; color: var(--fg-0); } .golive-help { font-size: 12px; color: var(--fg-mute); } .golive-error { padding: 10px 12px; border-radius: 10px; background: rgba(248, 113, 113, 0.10); border: 1px solid rgba(248, 113, 113, 0.30); color: #fecaca; font-size: 13px; } .golive-manual-toggle { margin-top: 16px; background: none; border: none; padding: 0; font-size: 12.5px; color: var(--fg-mute); cursor: pointer; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.18); text-underline-offset: 2px; } .golive-manual-toggle:hover { color: var(--fg-0); } .golive-manual { margin-top: 12px; padding: 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.02); border: 1px dashed rgba(255, 255, 255, 0.10); } .golive-manual .golive-step { margin-bottom: 14px; } .golive-manual .golive-step:last-of-type { margin-bottom: 0; } .golive-success { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; padding: 14px 16px; border-radius: 12px; background: rgba(125, 211, 252, 0.05); border: 1px solid rgba(125, 211, 252, 0.14); } .golive-success-row { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--fg-0); line-height: 1.5; } .golive-success-icon { flex: 0 0 18px; color: rgb(125, 211, 252); font-size: 14px; line-height: 1.4; } .golive-link { color: rgb(196, 181, 253); text-decoration: underline; text-underline-offset: 2px; } .golive-link:hover { color: #fff; } /* ───────────────────────────────────────────────────────────────────────── * Dashboard shell — white-theme page chrome for /agents, /agent//... * The landing splash, /build, and the dark cockpit modal keep the original * dark theme. This scope only applies under
. * ───────────────────────────────────────────────────────────────────────── */ .db-root { position: fixed; inset: 0; z-index: 11; display: flex; flex-direction: column; background: #f7f8fa; color: #1a1a1a; /* Build 230 — body settles at iOS HIG default 17 px / 1.6 (was * 16.5 / 1.6). Sits well above the 16 px accessibility floor and * matches the modern consumer-grade dashboard density. Pills + * chips + status badges keep their own smaller sizes via their * own rules (e.g. .db-status-pill is 11.5px on purpose). */ font: 17px/1.6 -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Helvetica Neue", sans-serif; letter-spacing: -0.005em; overflow: hidden; user-select: text; -webkit-user-select: text; animation: dbfade 0.3s cubic-bezier(.2,.9,.3,1); } @keyframes dbfade { from { opacity: 0; } to { opacity: 1; } } /* Top bar — brand + global context + account */ .db-topbar { flex: 0 0 56px; display: flex; align-items: center; padding: 0 20px; background: #ffffff; border-bottom: 1px solid #e6e7ec; gap: 12px; z-index: 3; } .db-topbar-brand { display: flex; align-items: center; gap: 14px; /* The brand block now also carries the agent-switcher (which lived in * the centre before). Lift the flex constraint so it can size to its * own contents — the switcher's max-width keeps the row reasonable. */ flex: 0 1 auto; padding-right: 16px; min-width: 0; } /* SVG logo lock-up. The brand is now the inline SVG (matches * the landing brandbar). currentColor on the wordmark glyph flips with * theme; the red X is hard-coded inside the SVG path. */ .db-topbar-logo { display: inline-flex; align-items: center; color: var(--fg-0); line-height: 0; } .db-topbar-logo svg { display: block; } .db-topbar-brand-link { text-decoration: none; -webkit-tap-highlight-color: transparent; transition: opacity 0.15s ease; } .db-topbar-brand-link:hover { opacity: 0.78; } /* ─── Pinned Dashboard nav item (build 234) ──────────────────────────── Sits between the agent switcher and the first section group. Same base shape as a .db-nav-item but with a touch more weight and a bottom divider so it reads as a top-level pin rather than a misplaced group child. */ .db-nav-pinned { margin: 6px 0 8px; font-weight: 600; } .db-nav-pinned + .db-nav-group { border-top: 1px solid var(--db-border-soft, #eef0f4); padding-top: 6px; } :root[data-theme="dark"] .db-nav-pinned + .db-nav-group { border-top-color: #1f2433; } /* ─── WorkspaceSelector (build 222) ─────────────────────────────────── Soft pill in the topbar with the active workspace name + member count. Click to open a popover that lists every org the user belongs to. Single-workspace users just see the static chip. */ .db-topbar-ws { position: relative; flex: 0 0 auto; } .db-topbar-ws-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px 6px 12px; background: #f5f6fa; border: 1px solid #e6e7ec; border-radius: 999px; font: inherit; cursor: pointer; transition: background 0.12s ease, border-color 0.12s ease; max-width: 240px; } .db-topbar-ws-pill:hover { background: #eef0f5; border-color: #d8dbe4; } .db-topbar-ws-pill.has-many::after { content: ""; } .db-topbar-ws-name { font-size: 13px; font-weight: 600; color: #1f2230; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; } .db-topbar-ws-meta { font-size: 11px; color: #6a6f7d; padding-left: 8px; border-left: 1px solid #d8dbe4; white-space: nowrap; } .db-topbar-ws-chev { color: #6a6f7d; } .db-topbar-ws-menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 280px; background: #ffffff; border: 1px solid #e6e7ec; border-radius: 12px; box-shadow: 0 12px 36px rgba(15, 23, 42, 0.12); padding: 8px 0; z-index: 50; } .db-topbar-ws-menu-head { padding: 6px 14px 8px; font-size: 11px; font-weight: 600; color: #6a6f7d; text-transform: uppercase; letter-spacing: 0.06em; } .db-topbar-ws-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; background: transparent; border: 0; text-align: left; cursor: pointer; font: inherit; } .db-topbar-ws-item:hover { background: #f4f5f9; } .db-topbar-ws-item.is-current { background: #eef0ff; } .db-topbar-ws-item-name { font-size: 13.5px; font-weight: 600; color: #1f2230; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .db-topbar-ws-item-meta { font-size: 11.5px; color: #6a6f7d; } .db-topbar-ws-menu-foot { border-top: 1px solid #e6e7ec; margin-top: 6px; padding: 6px; } .db-topbar-ws-foot-btn { width: 100%; padding: 8px 10px; background: transparent; border: 0; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 500; color: #4338ca; text-align: left; } .db-topbar-ws-foot-btn:hover { background: #f4f5f9; border-radius: 6px; } :root[data-theme="dark"] .db-topbar-ws-pill { background: #1f2433; border-color: #2a2f3e; } :root[data-theme="dark"] .db-topbar-ws-pill:hover { background: #262c3e; } :root[data-theme="dark"] .db-topbar-ws-name { color: #f1f3f8; } :root[data-theme="dark"] .db-topbar-ws-meta { color: #9aa0ad; border-left-color: #2a2f3e; } :root[data-theme="dark"] .db-topbar-ws-menu { background: #14171f; border-color: #2a2f3e; box-shadow: 0 12px 36px rgba(0,0,0,0.5); } :root[data-theme="dark"] .db-topbar-ws-item:hover { background: #1f2433; } :root[data-theme="dark"] .db-topbar-ws-item.is-current { background: #1e2233; } :root[data-theme="dark"] .db-topbar-ws-item-name { color: #f1f3f8; } :root[data-theme="dark"] .db-topbar-ws-item-meta, :root[data-theme="dark"] .db-topbar-ws-menu-head { color: #9aa0ad; } :root[data-theme="dark"] .db-topbar-ws-menu-foot { border-top-color: #2a2f3e; } /* ─── Breadcrumb (build 222) ───────────────────────────────────────────── Lightweight text crumb between the workspace pill and the right cluster. Hidden on narrow widths so the topbar stays usable on small screens. */ .db-topbar-crumb { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; font-size: 12.5px; color: #6a6f7d; margin-left: 4px; } .db-topbar-crumb-sep { color: #c8ccd6; user-select: none; } .db-topbar-crumb-link { background: transparent; border: 0; padding: 2px 4px; font: inherit; font-size: 12.5px; color: #6a6f7d; cursor: pointer; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; } .db-topbar-crumb-link:hover { background: #f4f5f9; color: #1f2230; } .db-topbar-crumb-now { color: #1f2230; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; } :root[data-theme="dark"] .db-topbar-crumb { color: #9aa0ad; } :root[data-theme="dark"] .db-topbar-crumb-sep { color: #4b4f5e; } :root[data-theme="dark"] .db-topbar-crumb-link:hover { background: #1f2433; color: #f1f3f8; } :root[data-theme="dark"] .db-topbar-crumb-now { color: #f1f3f8; } @media (max-width: 820px) { .db-topbar-crumb { display: none; } .db-topbar-ws-meta { display: none; } } /* Legacy text-wordmark styles kept as fallback (unused in the topbar; the * landing splash still references them). */ .db-topbar-wordmark { display: inline-flex; align-items: baseline; font-size: 25.5px; font-weight: 700; letter-spacing: -0.022em; line-height: 1; color: var(--fg-0); } .db-topbar-wordmark .db-topbar-wm-spider { color: inherit; } .db-topbar-wordmark .db-topbar-wm-x { color: #df3739; } .db-topbar-wordmark .db-topbar-wm-ai { color: inherit; } .db-topbar-tag { font-size: 11.5px; font-weight: 500; color: #6a6a6a; padding: 2px 7px; border-radius: 4px; background: #f0eef9; } /* Thin vertical separator between the brand block and the switcher. */ .db-topbar-switcher-sep { width: 1px; height: 22px; background: #d8dbe4; flex-shrink: 0; } /* Agent switcher — now lives next to the wordmark, not in the centre. * Styled as a pill containing icon + native select + custom chevron, so * it looks bespoke without giving up the OS-rendered popup list. */ .db-topbar-switcher { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px 0 12px; background: linear-gradient(180deg, #f7f8fc 0%, #eef0f5 100%); border: 1px solid #d8dbe4; border-radius: 10px; box-shadow: 0 1px 0 rgba(15, 17, 28, 0.02) inset; transition: border-color 0.15s ease, background 0.15s ease; min-width: 0; } .db-topbar-switcher:hover { background: #ffffff; border-color: #c4b5fd; } .db-topbar-switcher:focus-within { background: #ffffff; border-color: #a78bfa; box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.18); } .db-topbar-switcher-icon { color: #6b7080; flex-shrink: 0; } .db-topbar-switcher-chev { color: #6b7080; flex-shrink: 0; pointer-events: none; } .db-topbar-switcher .db-topbar-select { /* The native select sits flush inside the styled shell — strip its own * borders and chevron-bg; the wrapper carries those. */ height: 36px; min-width: 180px; max-width: 280px; padding: 0 4px; border-radius: 0; background: transparent; border: 0; font: inherit; font-size: 13.5px; font-weight: 500; color: #1a1d2b; cursor: pointer; appearance: none; background-image: none; text-overflow: ellipsis; outline: 0; } .db-topbar-switcher .db-topbar-select option { background: #ffffff; color: #1a1d2b; } :root[data-theme="dark"] .db-topbar-switcher-sep { background: #2a2e44; } :root[data-theme="dark"] .db-topbar-switcher { background: linear-gradient(180deg, #1b1f33 0%, #15182a 100%); border-color: #2a2e44; } :root[data-theme="dark"] .db-topbar-switcher:hover { background: #1b1f33; border-color: rgba(167,139,250,0.45); } :root[data-theme="dark"] .db-topbar-switcher:focus-within { background: #1b1f33; border-color: rgba(167,139,250,0.55); } :root[data-theme="dark"] .db-topbar-switcher-icon, :root[data-theme="dark"] .db-topbar-switcher-chev { color: #8a91a4; } :root[data-theme="dark"] .db-topbar-switcher .db-topbar-select { color: #e7e9ee; } :root[data-theme="dark"] .db-topbar-switcher .db-topbar-select option { background: #15182a; color: #e7e9ee; } /* Legacy .db-topbar-center is no longer rendered — block kept harmless if any * page still emits it temporarily during dev. */ .db-topbar-center { flex: 1; display: flex; justify-content: center; min-width: 0; } /* Plain .db-topbar-select fallback (outside the switcher shell) — kept * intact for any other surface that uses the native dropdown directly. */ .db-topbar-select:not(.db-topbar-switcher *) { height: 36px; min-width: 280px; max-width: 420px; padding: 0 14px; border-radius: 8px; background: #ffffff; border: 1px solid #d8dae3; font: inherit; font-size: 13.5px; color: #1a1a1a; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 12px center; background-size: 14px; padding-right: 36px; } .db-topbar-right { display: flex; align-items: center; gap: 12px; /* Push the right cluster (support · minutes · theme · avatar) all the way * to the far right of the topbar. Without this they sit flush against the * brand block because we removed the centre flex spacer when we moved the * switcher into the sidebar. */ margin-left: auto; } .db-topbar-support { font-size: 13px; font-weight: 500; color: #2563eb; background: #ffffff; border: 1px solid #cfddff; padding: 7px 14px; border-radius: 8px; cursor: pointer; } .db-topbar-support:hover { background: #f0f5ff; } .db-topbar-minutes { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: #2a2a2a; background: #eef5ff; padding: 7px 12px; border-radius: 999px; } .db-topbar-minutes::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #3b82f6; } .db-topbar-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #c4b5fd, #f0abfc); color: #1a0f2e; font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center; } .db-body { flex: 1; display: flex; min-height: 0; } .db-nav { /* Build 225 — widened from 232 → 264 to match the Vani reference's * roomier sidebar. Group labels + nav items breathe instead of * truncating; "Voice & behaviour" no longer brushes the right edge. */ flex: 0 0 264px; background: #ffffff; border-right: 1px solid var(--db-border, #e6e7ec); display: flex; flex-direction: column; padding: 16px 14px; overflow-y: auto; } .db-nav-primary { /* Build 242 — toned down. Was a saturated blue→indigo gradient with a heavy box-shadow that competed with the actual active nav item (pink/purple gradient on the page you're on). The agent picker is a SELECTOR, not the loudest thing on the sidebar — quiet it down to a neutral surface so the eye finds the active page first and uses this only when it's looking to switch agents. */ display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 12px; border-radius: 8px; background: #f4f5f9; color: #1f2230; font: inherit; font-size: 13.5px; font-weight: 600; border: 1px solid #e3e5ec; cursor: pointer; margin-bottom: 14px; transition: background 0.15s ease, border-color 0.15s ease; } .db-nav-primary:hover { background: #eceef4; border-color: #d8dbe4; } .db-nav-primary svg { width: 16px; height: 16px; flex: 0 0 16px; color: #6a6f7d; } :root[data-theme="dark"] .db-nav-primary { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); color: #e8e9ef; } :root[data-theme="dark"] .db-nav-primary:hover { background: rgba(255,255,255,0.07); } :root[data-theme="dark"] .db-nav-primary svg { color: #a4a8b8; } /* AgentSwitcher — custom dropdown component. The trigger looks identical * to the old big-blue primary tile (we reuse .db-nav-primary). The menu * below has a scrollable agent list + a sticky footer with "All agents" * and "Build new" buttons that stay visible regardless of scroll. */ .db-switcher-root { position: relative; margin-bottom: 14px; } .db-switcher-trigger { margin-bottom: 0; /* root handles spacing */ display: flex; align-items: center; gap: 9px; } .db-switcher-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; } .db-switcher-chev { width: 14px; height: 14px; opacity: 0.85; flex-shrink: 0; transition: transform 0.18s ease; } .db-switcher-root.is-open .db-switcher-chev { transform: rotate(180deg); } /* Pop-out menu — anchored under the trigger, full width of the sidebar * column. The list-area scrolls internally; the footer is sticky. */ .db-switcher-menu { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20; display: flex; flex-direction: column; max-height: 420px; background: #ffffff; border: 1px solid #e6e8ef; border-radius: 12px; box-shadow: 0 12px 32px rgba(15, 17, 28, 0.18); overflow: hidden; animation: switcherIn 0.14s cubic-bezier(.2,.9,.3,1); } @keyframes switcherIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .db-switcher-current { display: flex; align-items: center; gap: 8px; padding: 11px 14px; background: #ede9fe; border-bottom: 1px solid #e6e8ef; flex-shrink: 0; } .db-switcher-current-tag { font-size: 10px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: #5b21b6; background: #fff; border: 1px solid #c4b5fd; padding: 1px 6px; border-radius: 99px; } .db-switcher-current-name { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; color: #1a1d2b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .db-switcher-tick { color: #5b21b6; flex-shrink: 0; } .db-switcher-header { font-size: 10px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: #6b7080; padding: 10px 14px 6px; flex-shrink: 0; } .db-switcher-list { flex: 1 1 auto; overflow-y: auto; padding: 2px 6px 6px; /* Custom scrollbar — restrained, only when scrolling */ scrollbar-width: thin; scrollbar-color: #d8dbe4 transparent; } .db-switcher-list::-webkit-scrollbar { width: 8px; } .db-switcher-list::-webkit-scrollbar-thumb { background: #d8dbe4; border-radius: 4px; } .db-switcher-list::-webkit-scrollbar-track { background: transparent; } .db-switcher-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; background: transparent; border: 0; border-radius: 6px; cursor: pointer; font: inherit; text-align: left; color: #1a1d2b; transition: background 0.12s ease; } .db-switcher-item:hover { background: #f3f4f8; } .db-switcher-item-dot { width: 6px; height: 6px; border-radius: 50%; background: #d8dbe4; flex-shrink: 0; } .db-switcher-item-name { flex: 1; min-width: 0; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .db-switcher-item-pill { font-size: 10px; font-weight: 600; letter-spacing: 0.04em; padding: 1px 7px; border-radius: 99px; flex-shrink: 0; } .db-switcher-item-pill.is-live { background: #ecfdf5; color: #047857; border: 1px solid #6ee7b7; } .db-switcher-item-pill.is-draft { background: #f3f4f8; color: #6b7080; border: 1px solid #e6e8ef; } .db-switcher-empty { padding: 14px; font-size: 12.5px; color: #6b7080; text-align: center; font-style: italic; } /* Sticky footer — stacked vertically so each label fits on one line at the * sidebar's narrow width. Primary action ("Build new") goes on top, the * secondary "All agents" sits below — a clean, scannable CTA pair. */ .db-switcher-footer { flex-shrink: 0; display: flex; flex-direction: column; gap: 6px; padding: 8px; background: #fafbfd; border-top: 1px solid #eef0f5; } .db-switcher-foot-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 12px; background: #fff; border: 1px solid #d8dbe4; border-radius: 8px; font: inherit; font-size: 13px; font-weight: 600; color: #1a1d2b; cursor: pointer; white-space: nowrap; transition: background 0.12s ease, border-color 0.12s ease, filter 0.15s ease; } .db-switcher-foot-btn:hover { background: #f3f4f8; } .db-switcher-foot-btn.is-primary { background: linear-gradient(135deg, #3b82f6, #6366f1); color: #fff; border-color: transparent; box-shadow: 0 2px 6px rgba(59, 130, 246, 0.25); } .db-switcher-foot-btn.is-primary:hover { filter: brightness(1.05); } /* Dark theme */ :root[data-theme="dark"] .db-switcher-menu { background: #15182a; border-color: #2a2e44; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5); } :root[data-theme="dark"] .db-switcher-current { background: rgba(167,139,250,0.10); border-bottom-color: #2a2e44; } :root[data-theme="dark"] .db-switcher-current-tag { background: #15182a; border-color: rgba(167,139,250,0.40); color: #c4b5fd; } :root[data-theme="dark"] .db-switcher-current-name { color: #e7e9ee; } :root[data-theme="dark"] .db-switcher-tick { color: #c4b5fd; } :root[data-theme="dark"] .db-switcher-header { color: #8a91a4; } :root[data-theme="dark"] .db-switcher-item { color: #e7e9ee; } :root[data-theme="dark"] .db-switcher-item:hover { background: #1b1f33; } :root[data-theme="dark"] .db-switcher-item-dot { background: #3a3f52; } :root[data-theme="dark"] .db-switcher-item-pill.is-live { background: rgba(16,185,129,0.10); color: #6ee7b7; border-color: rgba(110,231,183,0.30); } :root[data-theme="dark"] .db-switcher-item-pill.is-draft { background: #1b1f33; color: #8a91a4; border-color: #2a2e44; } :root[data-theme="dark"] .db-switcher-empty { color: #8a91a4; } :root[data-theme="dark"] .db-switcher-footer { background: #1b1f33; border-top-color: #2a2e44; } :root[data-theme="dark"] .db-switcher-foot-btn { background: #15182a; border-color: #2a2e44; color: #e7e9ee; } :root[data-theme="dark"] .db-switcher-foot-btn:hover { background: #1b1f33; } :root[data-theme="dark"] .db-switcher-list { scrollbar-color: #3a3f52 transparent; } :root[data-theme="dark"] .db-switcher-list::-webkit-scrollbar-thumb { background: #3a3f52; } .db-nav-group { margin-bottom: 4px; } .db-nav-group-head { display: flex; align-items: center; gap: 9px; width: 100%; /* Build 231 — group heads now read as filled pills (reference design). * Subtle grey background + generous padding + rounded corners * make the group anchor a deliberate "section marker" rather than * a stray uppercase label. Each group gets visible breathing room * via margin-top instead of giant padding-top. */ padding: 11px 14px; margin-top: 10px; background: #f3f4f7; border: 0; color: #4b5563; font: inherit; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; cursor: pointer; border-radius: 10px; text-align: left; } .db-nav-group:first-child .db-nav-group-head { margin-top: 0; } .db-nav-group-head:hover { background: #ecedf2; color: #1f2230; } :root[data-theme="dark"] .db-nav-group-head { background: #1f2433; color: #c8ccd9; } :root[data-theme="dark"] .db-nav-group-head:hover { background: #262c3e; color: #f1f3f8; } /* Build 230 — group icons are now Material Symbols spans (not SVGs). Same target dimensions; selectors cover both for back-compat. */ .db-nav-group-head .db-nav-group-icon { flex: 0 0 18px; color: #4a4a4a; line-height: 1; } .db-nav-group-head svg.db-nav-group-icon { width: 17px; height: 17px; flex: 0 0 17px; color: #4a4a4a; stroke-width: 1.7; } .db-nav-group-head .db-nav-group-chev { margin-left: auto; color: #8a8a8a; transition: transform 0.2s ease; } .db-nav-group-head svg.db-nav-group-chev { width: 12px; height: 12px; margin-left: auto; color: #8a8a8a; transition: transform 0.18s ease; } .db-nav-group.open .db-nav-group-head .db-nav-group-chev, .db-nav-group.open .db-nav-group-head svg.db-nav-group-chev { transform: rotate(180deg); } .db-nav-group-items { display: flex; flex-direction: column; /* Build 230 — items now carry their own Material Symbol icon, so drop the left-rail indent that previously substituted for one. The icon column establishes its own visual hierarchy. */ padding: 2px 4px 6px 4px; gap: 2px; position: relative; } /* No more left guide-line — the icon column already groups items. */ .db-nav-item { display: flex; align-items: center; gap: 10px; /* Slightly taller hit-target + larger label — 13px was too dense for a top-level navigation that's used dozens of times per session. */ padding: 9px 12px; border-radius: 8px; font-size: 14px; line-height: 1.35; color: #4a4a4a; cursor: pointer; background: transparent; border: 0; text-align: left; width: 100%; font-family: inherit; transition: background 0.15s ease, color 0.15s ease; position: relative; } .db-nav-item:hover { background: #f5f6f8; color: #1a1a1a; } /* Build 230 — match the admin shell's pink → purple gradient on active. Same visual language as /admin so the operator's eye learns ONE active state across both sidebars. Icon + label go to white via currentColor. */ .db-nav-item.active { background: linear-gradient(135deg, #ec4899 0%, #a855f7 100%); color: #ffffff; font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); } .db-nav-item.active:hover { background: linear-gradient(135deg, #ec4899 0%, #a855f7 100%); color: #ffffff; } .db-nav-item.active .db-nav-item-icon { color: #ffffff; } .db-nav-item-icon { flex: 0 0 18px; color: #6a6f7d; line-height: 1; } .db-nav-item-label { flex: 1; min-width: 0; } /* "Go live" gets a green treatment so it pops in the menu as the money-moment action — green text + a small pulsing dot, deeper green tint when it's the active page. */ .db-nav-item-golive { color: #16a34a; font-weight: 600; } .db-nav-item-golive:hover { background: #e9f9ef; color: #15803d; } .db-nav-item-golive.active { background: #dcfce7; color: #15803d; } .db-nav-golive-dot { width: 7px; height: 7px; border-radius: 50%; background: #16a34a; flex: 0 0 7px; box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.5); animation: db-golive-pulse 2s ease-in-out infinite; } @keyframes db-golive-pulse { 0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.45); } 70% { box-shadow: 0 0 0 6px rgba(22, 163, 74, 0); } 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); } } :root[data-theme="dark"] .db-nav-item-golive { color: #4ade80; } :root[data-theme="dark"] .db-nav-item-golive:hover { background: rgba(34,197,94,0.12); color: #6ee7a0; } :root[data-theme="dark"] .db-nav-item-golive.active { background: rgba(34,197,94,0.18); color: #86efac; } .db-nav-item-badge { margin-left: auto; font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em; padding: 2px 7px; border-radius: 999px; } .db-nav-item-badge.is-live { background: #16a34a; color: #ffffff; } .db-nav-item-badge.is-draft { background: #e6e8ef; color: #6b7080; } :root[data-theme="dark"] .db-nav-item-badge.is-draft { background: #2a2e44; color: #8a91a4; } .db-nav-foot { margin-top: auto; /* Build 243 — make the plan footer ALWAYS VISIBLE inside the sidebar's scroll. `position: sticky; bottom: 0;` pins the row to the bottom of the visible viewport regardless of how many nav groups are expanded above. The negative horizontal margin + matching padding bleed the footer's background out to the sidebar's edges so a scrolling nav item can't peek through the gap between footer and aside border. A solid bg + top border keep the boundary visible when content scrolls underneath. */ position: sticky; bottom: 0; z-index: 5; background: #ffffff; margin-left: -14px; /* cancels .db-nav padding-left */ margin-right: -14px; /* cancels .db-nav padding-right */ padding: 12px 24px 10px; /* 10 base + 14 to replace what we cancelled */ border-top: 1px solid #eaebef; display: flex; align-items: center; justify-content: space-between; gap: 10px; /* Slightly larger label to keep proportion with the bumped nav-item font size (14px). 11.5px felt orphaned. */ font-size: 12.5px; color: #7a7e88; letter-spacing: 0.005em; } .db-nav-upgrade { /* Tone the call-out from a saturated billboard into a soft accent. The old gradient (#fde68a → #fbbf24) had two problems against the muted-gray sidebar: (1) the high-saturation amber clashed with the rest of the nav's whisper-quiet palette, and (2) the heavy fill made the pill the visual centre of the entire sidebar — a status badge shouldn't outweigh the actual menu items. Solution: a barely-there cream wash + thin warm border. Reads as "premium" without yelling. The lightning icon does the persuasion work; the colour just supports it. */ display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.01em; padding: 4px 10px 4px 8px; border-radius: 999px; background: #fef6e0; color: #9a5b00; border: 1px solid #f3d88a; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; white-space: nowrap; } .db-nav-upgrade:hover { background: #fdedc7; border-color: #e7c46c; box-shadow: 0 1px 2px rgba(163, 95, 0, 0.08); } .db-nav-upgrade svg { width: 10px; height: 10px; opacity: 0.85; } /* Build 237 — the paid-plan variant. No saturated wash; quiet text link that says "Manage" so the operator can reach billing without the visual nag the gold pill carried. */ .db-nav-foot-plan { /* Stretch so the Manage link drifts to the right via margin-left:auto in the parent flex — matches the old "label + pill" rhythm. */ flex: 1; min-width: 0; } .db-nav-foot-link { font: inherit; font-size: 11.5px; font-weight: 500; color: #7a7e88; background: transparent; border: 0; padding: 4px 6px; border-radius: 6px; cursor: pointer; } .db-nav-foot-link:hover { background: #f0f1f4; color: #1f2230; } :root[data-theme="dark"] .db-nav-foot-link { color: #a4a8b8; } :root[data-theme="dark"] .db-nav-foot-link:hover { background: rgba(255,255,255,0.06); color: #e8e9ef; } .db-main { flex: 1; min-width: 0; overflow-y: auto; /* Build 232 — stabilize the scrollbar gutter so navigating between pages of different heights doesn't snap the content sideways by ~15 px (the scrollbar width) when the scrollbar appears or disappears. `stable` reserves space for the scrollbar ALWAYS, even on short pages; nothing visually present until needed. */ scrollbar-gutter: stable; display: flex; flex-direction: column; background: #f7f8fa; } .db-main-wide .db-pageheader, .db-main-wide .db-content { max-width: 1200px; width: 100%; margin-left: auto; margin-right: auto; } .db-pageheader { padding: 24px 32px 16px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .db-pageheader-title { margin: 0; /* Build 230 — bumped to 24 (was 23). iOS HIG Title-1 territory. */ font-size: 24px; font-weight: 700; letter-spacing: -0.015em; color: #1a1a1a; } .db-pageheader-sub { margin: 4px 0 0; /* Build 230 — bumped to 15 (was 14). Matches iOS Subhead. */ font-size: 15px; color: #6a6a6a; } .db-pageheader-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .db-content { padding: 8px 32px 40px; flex: 1; } .db-search { height: 36px; padding: 0 12px; border-radius: 8px; background: #ffffff; border: 1px solid #d8dae3; font: inherit; font-size: 13px; color: #1a1a1a; outline: 0; width: 240px; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .db-search::placeholder { color: #9a9a9a; } .db-search:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12); } .db-btn-primary { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 16px; border-radius: 8px; background: #2563eb; color: #ffffff; font: inherit; font-size: 13px; font-weight: 600; border: 0; cursor: pointer; transition: background 0.15s ease, box-shadow 0.15s ease; box-shadow: 0 2px 6px rgba(37, 99, 235, 0.20); } .db-btn-primary:hover { background: #1d4fd7; box-shadow: 0 4px 10px rgba(37, 99, 235, 0.30); } .db-btn-ghost { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 8px; background: #ffffff; color: #2a2a2a; font: inherit; font-size: 13px; border: 1px solid #d8dae3; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; } .db-btn-ghost:hover { background: #f5f6f8; border-color: #bcc0ce; } .db-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; } .db-card { position: relative; background: #ffffff; border: 1px solid #e6e7ec; border-radius: 10px; transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; } .db-card:hover { border-color: #c5c8d4; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06); transform: translateY(-1px); } .db-card-tap { width: 100%; display: flex; flex-direction: column; gap: 10px; padding: 16px; background: transparent; border: 0; cursor: pointer; text-align: left; color: inherit; font: inherit; } .db-card-row { display: flex; align-items: flex-start; gap: 12px; } .db-card-thumb { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fde7f3 0%, #c4b5fd 45%, #a5f3fc 80%, #1a1a1a 100%); margin-top: 2px; } .db-card-headblock { flex: 1; min-width: 0; } .db-card-name { font-size: 15px; font-weight: 600; letter-spacing: -0.005em; color: #1a1a1a; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; line-height: 1.25; } .db-card-agent-name { color: #1a1d2b; } .db-card-name-sep { color: #c5c8d4; font-weight: 400; } .db-card-business { font-weight: 500; color: #4b5263; font-size: 14px; letter-spacing: 0; } .db-card-sub { font-size: 12px; color: #6b7080; margin-top: 3px; } .db-card-pills { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .db-card-pill { font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; padding: 2px 8px; border-radius: 99px; text-transform: uppercase; } .db-card-pill.is-live { background: #ecfdf5; color: #047857; border: 1px solid #6ee7b7; } .db-card-pill.is-draft { background: #f3f4f8; color: #6b7080; border: 1px solid #e6e8ef; } .db-card-pill.is-fresh { background: #ede9fe; color: #5b21b6; border: 1px solid #c4b5fd; } .db-card-greet { font-size: 12.5px; line-height: 1.45; color: #4b5263; font-style: italic; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .db-card-foot { display: flex; align-items: center; gap: 12px; padding-top: 10px; border-top: 1px solid #eef0f5; font-size: 12px; color: #6b7080; } .db-card-stat { display: inline-flex; align-items: center; gap: 5px; color: #4b5263; } .db-card-stat svg { color: #6b7080; } .db-card-stat.db-card-stat-quiet { color: #9aa0ad; font-style: italic; } .db-card-foot-spacer { flex: 1; } .db-card-open { font-weight: 600; color: #1a1d2b; font-size: 12px; opacity: 0; transition: opacity 0.18s ease; } .db-card:hover .db-card-open { opacity: 1; } :root[data-theme="dark"] .db-card-agent-name { color: #e7e9ee; } :root[data-theme="dark"] .db-card-name-sep { color: #3a3f52; } :root[data-theme="dark"] .db-card-business { color: #b4b9c7; } :root[data-theme="dark"] .db-card-sub { color: #8a91a4; } :root[data-theme="dark"] .db-card-greet { color: #b4b9c7; } :root[data-theme="dark"] .db-card-foot { border-top-color: #2a2e44; color: #8a91a4; } :root[data-theme="dark"] .db-card-stat { color: #b4b9c7; } :root[data-theme="dark"] .db-card-stat svg { color: #8a91a4; } :root[data-theme="dark"] .db-card-stat.db-card-stat-quiet { color: #6b7080; } :root[data-theme="dark"] .db-card-open { color: #e7e9ee; } :root[data-theme="dark"] .db-card-pill.is-live { background: rgba(16,185,129,0.10); color: #6ee7b7; border-color: rgba(110,231,183,0.30); } :root[data-theme="dark"] .db-card-pill.is-draft { background: #1b1f33; color: #8a91a4; border-color: #2a2e44; } :root[data-theme="dark"] .db-card-pill.is-fresh { background: rgba(167,139,250,0.16); color: #c4b5fd; border-color: rgba(167,139,250,0.30); } .db-card-del { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; background: transparent; border: 0; cursor: pointer; color: #9a9a9a; opacity: 0; transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease; } .db-card:hover .db-card-del { opacity: 1; } .db-card-del:hover { background: #fee2e2; color: #b91c1c; } .db-card-del svg { width: 13px; height: 13px; } .db-overview { display: flex; flex-direction: column; gap: 16px; } .db-hero { display: flex; gap: 20px; background: #ffffff; border: 1px solid #e6e7ec; border-radius: 12px; padding: 20px 22px; } .db-hero-thumb { flex: 0 0 60px; width: 60px; height: 60px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fde7f3 0%, #c4b5fd 45%, #a5f3fc 80%, #1a1a1a 100%); box-shadow: 0 4px 14px rgba(196, 181, 253, 0.32); } .db-hero-body { flex: 1; min-width: 0; } .db-hero-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; color: #6a6a6a; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; } .db-hero-mode { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: none; background: rgba(110, 231, 183, 0.16); color: #047857; border: 1px solid rgba(110, 231, 183, 0.40); padding: 2px 8px; border-radius: 999px; } :root[data-theme="dark"] .db-hero-mode { background: rgba(110, 231, 183, 0.10); color: #6ee7b7; border-color: rgba(110, 231, 183, 0.28); } .db-hero-name { margin: 0; /* Build 230 — bumped to 24 to match the page title. */ font-size: 24px; font-weight: 700; letter-spacing: -0.015em; color: #1a1a1a; } .db-hero-tagline { margin: 4px 0 10px; /* Build 230 — bumped to 15. */ font-size: 15px; color: #4a4a4a; line-height: 1.5; } .db-hero-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; } .db-pill { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 500; padding: 3px 10px; border-radius: 999px; background: #f3f4f8; color: #2a2a2a; } .db-pill-accent { background: linear-gradient(135deg, #ede9fe, #fce7f3); color: #5b21b6; } .db-hero-greeting { margin-top: 10px; padding: 10px 12px; border-left: 3px solid #d8dae3; background: #f7f8fa; border-radius: 0 8px 8px 0; font-size: 13px; font-style: italic; color: #4a4a4a; } .db-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; } .db-stat { background: #ffffff; border: 1px solid #e6e7ec; border-radius: 10px; padding: 14px 16px; } .db-stat-blue { background: #eff6ff; border-color: #dbeafe; } .db-stat-green { background: #ecfdf5; border-color: #d1fae5; } .db-stat-pink { background: #fdf2f8; border-color: #fce7f3; } .db-stat-yellow { background: #fefce8; border-color: #fef3c7; } .db-stat-purple { background: #faf5ff; border-color: #ede9fe; } .db-stat-value-sm { font-size: 18px; line-height: 1.2; } .db-stat-sub { font-size: 11.5px; color: #6a6f7e; margin-top: 4px; } .db-stats-5 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } /* Clickable Overview stat tiles (drill into Call logs / outcomes) */ button.db-stat { font: inherit; color: inherit; text-align: left; cursor: pointer; display: block; width: 100%; transition: transform 0.12s ease, box-shadow 0.15s ease, border-color 0.15s ease; } button.db-stat:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(15, 23, 42, 0.07); border-color: #c2c7d4; } button.db-stat:active { transform: translateY(0); } button.db-stat:disabled { cursor: default; opacity: 0.7; } :root[data-theme="dark"] .db-stat-sub { color: #9aa0ad; } /* Overview headline — one warm, status-aware sentence above the stat tiles. */ .db-headline { margin: 8px 0 14px; padding: 16px 18px; background: linear-gradient(180deg, #fafbff 0%, #f7f7fd 100%); border: 1px solid #ececf2; border-radius: 12px; } .db-headline-text { /* Build 230 — bumped to 19 to keep matching the .db-panel-title * benchmark. */ margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; color: #0f172a; line-height: 1.3; } .db-headline-sub { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; color: #6a6f7e; } :root[data-theme="dark"] .db-headline { background: linear-gradient(180deg, #14171f 0%, #11141b 100%); border-color: #2a2f3e; } :root[data-theme="dark"] .db-headline-text { color: #f1f3f8; } :root[data-theme="dark"] .db-headline-sub { color: #9aa0ad; } .db-table-wrap { background: #ffffff; border: 1px solid #e6e7ec; border-radius: 12px; overflow: hidden; } .db-table { width: 100%; border-collapse: collapse; font-size: 13px; } .db-table thead th { text-align: left; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #6a6a6a; background: #eff4fb; padding: 12px 16px; border-bottom: 1px solid #dde3ec; } .db-table-th-right, .db-table-td-right { text-align: right; } .db-table tbody td { padding: 14px 16px; border-top: 1px solid #f0f0f3; color: #1a1a1a; vertical-align: middle; } .db-table tbody tr:first-child td { border-top: 0; } .db-table tbody tr:hover { background: #f9fafc; } .db-table-summary { color: #4a4a4a; max-width: 380px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .db-tag { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 500; text-transform: capitalize; letter-spacing: 0.01em; } .db-tag-green { background: #d1fae5; color: #065f46; } .db-tag-blue { background: #dbeafe; color: #1e40af; } .db-tag-purple { background: #ede9fe; color: #5b21b6; } .db-tag-grey { background: #f1f3f6; color: #5a5a5a; } .db-tag-red { background: #fee2e2; color: #991b1b; } .db-tag-yellow { background: #fef3c7; color: #92400e; } .db-tag-amber { background: #fef3c7; color: #92400e; } .db-btn-sm { height: 28px; padding: 0 10px; font-size: 12px; } /* Per-agent focused page primitives — forms, voice picker, save pill */ .db-form { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; } .db-form-field { display: flex; flex-direction: column; gap: 6px; } .db-form-label { /* Build 230 — bumped to 14. */ font-size: 14px; font-weight: 500; color: #4a4a4a; } .db-form-label .db-form-opt { font-weight: 400; color: #8a8a8a; margin-left: 4px; } /* Build 230 — bumped to 13.5. Help text stays the muted tier * BELOW labels — readable but visually subordinate. */ .db-form-help { font-size: 13.5px; color: #6a6a6a; } .db-input, .db-textarea { width: 100%; border-radius: 8px; background: #ffffff; border: 1px solid #d8dae3; color: #1a1a1a; font: inherit; font-size: 14px; outline: none; padding: 9px 12px; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .db-input { height: 38px; } .db-textarea { line-height: 1.5; resize: vertical; min-height: 60px; } /* Master-prompt editor — slightly larger line-height + a monospace-ish stack so multi-paragraph instructions are comfortable to read/scan, and a roomy min-height so the operator sees plenty of context. */ .db-textarea-prompt { min-height: 320px; line-height: 1.6; font-size: 13.5px; font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; } /* "Where things live" mini-legend — disambiguates the four teach-the-agent surfaces (Business profile / Core purpose / Additional info / Knowledge base) so a new operator knows where to put what. */ .db-whatgoeswhere { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; padding: 10px 14px; margin-bottom: 16px; background: #f7f8fa; border: 1px solid #eceef3; border-radius: 10px; font-size: 12.5px; color: #6a6f7e; line-height: 1.5; } .db-whatgoeswhere-label { font-weight: 600; color: #4a4f5e; } .db-whatgoeswhere b { color: #1a1a1a; font-weight: 600; } :root[data-theme="dark"] .db-whatgoeswhere { background: #131722; border-color: #262b3a; color: #9aa0ad; } :root[data-theme="dark"] .db-whatgoeswhere-label { color: #c7ccd6; } :root[data-theme="dark"] .db-whatgoeswhere b { color: #e7e9ee; } /* ─── Additional Info accordion (industry-adaptive field groups) ─────────── */ .db-info-groups { display: flex; flex-direction: column; gap: 10px; } .db-info-group { background: #ffffff; border: 1px solid #e5e7ec; border-radius: 12px; overflow: hidden; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .db-info-group.is-open { border-color: #c2c7d4; box-shadow: 0 1px 3px rgba(15,23,42,0.06); } .db-info-group-head { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 14px 16px; background: transparent; border: 0; cursor: pointer; text-align: left; font: inherit; } .db-info-group-head:hover { background: #fafbfc; } .db-info-group-icon { width: 34px; height: 34px; flex: 0 0 34px; display: inline-flex; align-items: center; justify-content: center; background: #f1f3f7; border-radius: 9px; font-size: 17px; margin-top: 1px; } .db-info-group-meta { flex: 1; min-width: 0; } .db-info-group-title { font-size: 15px; font-weight: 600; color: #1a1a1a; display: flex; align-items: center; gap: 7px; } .db-info-group-count { font-size: 13px; font-weight: 600; color: #a3a8b8; } .db-info-group-count.is-filled { color: #16a34a; } .db-info-group-desc { font-size: 13px; color: #6a6f7e; margin-top: 2px; line-height: 1.45; } .db-info-group-note { font-size: 12px; color: #a3a8b8; margin-top: 3px; font-style: italic; } .db-info-group-chev { color: #9aa0ad; margin-top: 8px; flex: 0 0 16px; transition: transform 0.18s ease; } .db-info-group.is-open .db-info-group-chev { transform: rotate(180deg); } .db-info-group-body { padding: 0 16px 16px 62px; } .db-info-progress { font-size: 12.5px; color: #7a7e88; margin-right: 10px; align-self: center; } :root[data-theme="dark"] .db-info-group { background: #131722; border-color: #262b3a; } :root[data-theme="dark"] .db-info-group.is-open { border-color: #3a4054; } :root[data-theme="dark"] .db-info-group-head:hover { background: #1a1f2e; } :root[data-theme="dark"] .db-info-group-icon { background: #1c2030; } :root[data-theme="dark"] .db-info-group-title { color: #e7e9ee; } :root[data-theme="dark"] .db-info-group-desc { color: #9aa0ad; } :root[data-theme="dark"] .db-info-group-note { color: #6a6f7e; } :root[data-theme="dark"] .db-info-progress { color: #8a8e9c; } /* Native +. */ .hc-toggle { position: relative; display: inline-block; width: 38px; height: 22px; flex-shrink: 0; } .hc-toggle input { opacity: 0; width: 0; height: 0; } .hc-toggle-slider { position: absolute; cursor: pointer; inset: 0; background: #d1d5db; border-radius: 22px; transition: background 0.16s ease; } .hc-toggle-slider::before { content: ""; position: absolute; height: 18px; width: 18px; left: 2px; top: 2px; background: #ffffff; border-radius: 50%; transition: transform 0.16s ease; box-shadow: 0 1px 2px rgba(0,0,0,0.18); } .hc-toggle input:checked + .hc-toggle-slider { background: linear-gradient(135deg, #ec4899 0%, #a855f7 100%); } .hc-toggle input:checked + .hc-toggle-slider::before { transform: translateX(16px); } /* Status dots for the agent list. */ .hc-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; } .hc-dot-up { background: #10b981; } .hc-dot-degraded { background: #f59e0b; } .hc-dot-down { background: #ef4444; } .hc-dot-never { background: #9ca3af; } .hc-dot-unknown { background: #9ca3af; } .hc-status-table { margin: 0; } .hc-status-table th { font-size: 11px; } .hc-msg { font-size: 12.5px; padding: 8px 14px; background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 8px; color: #312e81; margin-bottom: 14px; } :root[data-theme="dark"] .hc-card { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.08); } :root[data-theme="dark"] .hc-card-head { border-bottom-color: rgba(255,255,255,0.06); } :root[data-theme="dark"] .hc-card-head h2 { color: #e8e9ef; } :root[data-theme="dark"] .hc-row { border-bottom-color: rgba(255,255,255,0.05); } :root[data-theme="dark"] .hc-row-label { color: #e8e9ef; } :root[data-theme="dark"] .hc-toggle-slider { background: rgba(255,255,255,0.18); } :root[data-theme="dark"] .hc-msg { background: rgba(99, 102, 241, 0.12); border-color: rgba(99, 102, 241, 0.3); color: #c7d2fe; } /* Status pill row — reference-style */ .ax-statusrow { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; } .ax-stat-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; background: #ffffff; border: 1px solid #e6e7ec; border-radius: 999px; font-size: 13px; font-weight: 500; color: #1f2230; } .ax-stat-pill.ax-stat-total { background: #0f172a; border-color: #0f172a; color: #ffffff; font-weight: 700; } .ax-stat-dot { width: 7px; height: 7px; border-radius: 50%; } .ax-stat-dot.stat-sent { background: #10b981; } .ax-stat-dot.stat-deduped { background: #9095a3; } .ax-stat-dot.stat-failed { background: #ef4444; } /* Toolbar — search + 2 dropdowns + count */ .ax-toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; background: #ffffff; border: 1px solid #e6e7ec; border-radius: 12px; padding: 10px 14px; margin-bottom: 18px; } .ax-search { flex: 1; min-width: 200px; border: 0; background: transparent; font: inherit; font-size: 14px; padding: 8px 4px; outline: none; color: #1f2230; } .ax-search::placeholder { color: #9095a3; } .ax-select { font: inherit; font-size: 13px; padding: 7px 28px 7px 12px; background: #ffffff; border: 1px solid #d8dbe4; border-radius: 8px; color: #1f2230; cursor: pointer; } .ax-toolbar-count { font-size: 12.5px; color: #6a6f7d; white-space: nowrap; padding-left: 4px; } /* ─── AdminFilterBar (build 202) ─────────────────────────────────────── Unified filter row on every super-admin page. Visually echoes the `.ax-toolbar` chip-and-pill aesthetic but with paired label + control "fields" so the operator can scan org / agent / phone / range at a glance without reading microcopy. Layout: horizontal flex that wraps at narrow widths — each field keeps its label + control together. Apply / Reset live in a small action group on the right. ──────────────────────────────────────────────────────────────────── */ .ax-filterbar { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; background: #ffffff; border: 1px solid #e6e7ec; border-radius: 12px; padding: 12px 14px; margin-bottom: 18px; } .ax-fb-field { display: flex; flex-direction: column; gap: 4px; min-width: 140px; } .ax-fb-field-grow { flex: 1; min-width: 220px; } .ax-fb-label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #6a6f7d; } .ax-fb-select, .ax-fb-input { font: inherit; font-size: 13.5px; padding: 7px 12px; background: #ffffff; border: 1px solid #d8dbe4; border-radius: 8px; color: #1f2230; outline: none; height: 36px; box-sizing: border-box; } .ax-fb-select { padding-right: 28px; cursor: pointer; } .ax-fb-input:focus, .ax-fb-select:focus { border-color: #a855f7; box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.16); } .ax-fb-input-date { min-width: 140px; } .ax-fb-actions { display: flex; gap: 8px; align-items: center; margin-left: auto; /* push to the right edge */ padding-bottom: 1px; /* baseline-align with input bottoms */ } .ax-fb-apply { font: inherit; font-size: 13px; font-weight: 600; padding: 8px 18px; border: 0; border-radius: 8px; background: linear-gradient(135deg, #ec4899 0%, #a855f7 100%); color: #ffffff; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,0.08); } .ax-fb-apply:hover { filter: brightness(1.05); } .ax-fb-apply:active { transform: translateY(1px); } .ax-fb-reset { font: inherit; font-size: 13px; padding: 8px 14px; border: 1px solid #d8dbe4; border-radius: 8px; background: #ffffff; color: #1f2230; cursor: pointer; } .ax-fb-reset:hover { background: #f4f5f9; } .ax-fb-badge { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: linear-gradient(135deg, rgba(236, 72, 153, 0.12), rgba(168, 85, 247, 0.12)); color: #a21caf; border: 1px solid rgba(168, 85, 247, 0.28); } /* Dark-theme overrides — match the existing .ax-toolbar dark rules */ :root[data-theme="dark"] .ax-filterbar { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.08); } :root[data-theme="dark"] .ax-fb-select, :root[data-theme="dark"] .ax-fb-input { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.14); color: #e8e9ef; } :root[data-theme="dark"] .ax-fb-label { color: #a1a4ad; } :root[data-theme="dark"] .ax-fb-reset { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.14); color: #e8e9ef; } :root[data-theme="dark"] .ax-fb-reset:hover { background: rgba(255, 255, 255, 0.08); } @media (max-width: 700px) { .ax-filterbar { flex-direction: column; align-items: stretch; } .ax-fb-field { min-width: 0; } .ax-fb-actions { margin-left: 0; justify-content: flex-end; } } /* Sub-tabs — Live feed / Schedulers / Pricing */ .ax-subtabs { display: flex; gap: 4px; border-bottom: 1px solid #e6e7ec; margin-bottom: 18px; } .ax-subtab { padding: 9px 16px; background: transparent; border: 0; border-bottom: 2px solid transparent; font: inherit; font-size: 13px; font-weight: 500; color: #6a6f7d; cursor: pointer; margin-bottom: -1px; } .ax-subtab:hover { color: #1f2230; } .ax-subtab.is-active { color: #1f2230; border-bottom-color: #1f2230; font-weight: 600; } /* Data table — reference aesthetic */ .ax-table-wrap { background: #ffffff; border: 1px solid #e6e7ec; border-radius: 12px; overflow: hidden; } .ax-table { width: 100%; border-collapse: collapse; font-size: 13.5px; } .ax-table thead th { text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; color: #6a6f7d; padding: 14px 16px; border-bottom: 1px solid #eef0f4; background: #fafbff; } .ax-th-right { text-align: right !important; } .ax-table tbody td { padding: 14px 16px; border-top: 1px solid #eef0f4; vertical-align: middle; color: #1f2230; } .ax-table tbody tr.ax-row { cursor: pointer; transition: background 0.1s ease; } .ax-table tbody tr.ax-row:hover { background: #fafbff; } /* Left-edge severity rail — sits on the first td via box-shadow inset */ .ax-table tbody tr.ax-row-warning td:first-child { box-shadow: inset 3px 0 0 #f59e0b; } .ax-table tbody tr.ax-row-error td:first-child { box-shadow: inset 3px 0 0 #ef4444; } .ax-table tbody tr.ax-row-critical td:first-child { box-shadow: inset 3px 0 0 #dc2626; } .ax-table tbody tr.ax-row.is-resolved td { opacity: 0.55; } .ax-cell-when { color: #1f2230; white-space: nowrap; font-variant-numeric: tabular-nums; } .ax-cell-title { color: #1f2230; } .ax-empty-cell { text-align: center; color: #9095a3; padding: 36px 16px !important; } /* Kind chip — reference's coloured pill, prefix-based palette */ .ax-kind-chip { display: inline-flex; padding: 4px 10px; border-radius: 6px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11.5px; font-weight: 500; background: #f3f4f9; color: #4a4f5e; white-space: nowrap; } .ax-kind-chip.ax-kind-agent { background: #ede9fe; color: #6d28d9; } .ax-kind-chip.ax-kind-call { background: #dbeafe; color: #1d4ed8; } .ax-kind-chip.ax-kind-cost { background: #fef3c7; color: #92400e; } .ax-kind-chip.ax-kind-pricing { background: #fce7f3; color: #9d174d; } .ax-kind-chip.ax-kind-notify { background: #dcfce7; color: #166534; } .ax-kind-chip.ax-kind-quality { background: #cffafe; color: #155e75; } .ax-kind-chip.ax-kind-system { background: #fee2e2; color: #991b1b; } /* Status pill — SENT / FAILED / RESOLVED */ .ax-status-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; } .ax-status-pill.ax-status-sent { background: #dcfce7; color: #166534; } .ax-status-pill.ax-status-failed { background: #fee2e2; color: #991b1b; } .ax-status-pill.ax-status-resolved { background: #e5e7eb; color: #4b5563; } .ax-view { background: transparent; border: 0; color: #6d28d9; font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; padding: 4px 6px; } .ax-view:hover { color: #4c1d95; text-decoration: underline; } /* ─── Event detail drawer ─────────────────────────────────────────── */ .ax-drawer-backdrop { position: fixed; inset: 0; background: rgba(15, 17, 28, 0.4); z-index: 80; display: flex; justify-content: flex-end; animation: axfade 0.18s ease; } @keyframes axfade { from { opacity: 0; } to { opacity: 1; } } .ax-drawer { width: min(540px, 100vw); background: #ffffff; height: 100%; display: flex; flex-direction: column; box-shadow: -16px 0 48px rgba(15, 17, 28, 0.18); animation: axslide 0.22s cubic-bezier(.2,.9,.3,1); } @keyframes axslide { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } .ax-drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 22px 14px; border-bottom: 1px solid #e6e7ec; background: #fafbff; } .ax-drawer-eyebrow { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: #6a6f7d; font-weight: 600; } .ax-drawer-title { margin: 4px 0 0; font-size: 16px; font-weight: 700; color: #0f172a; line-height: 1.4; } .ax-drawer-close { background: transparent; border: 0; font-size: 22px; line-height: 1; cursor: pointer; color: #9095a3; padding: 0 4px; } .ax-drawer-close:hover { color: #1f2230; } .ax-drawer-body { flex: 1; min-height: 0; padding: 18px 22px; overflow-y: auto; } .ax-kv { display: grid; grid-template-columns: 100px 1fr; row-gap: 8px; column-gap: 14px; margin: 0 0 18px; font-size: 13px; } .ax-kv dt { color: #6a6f7d; font-weight: 500; } .ax-kv dd { color: #1f2230; margin: 0; } .ax-kv code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12px; background: #f3f4f9; padding: 2px 6px; border-radius: 4px; } .ax-drawer-section { margin-bottom: 16px; } .ax-drawer-label { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: #6a6f7d; font-weight: 700; margin-bottom: 6px; } .ax-drawer-msg { font-size: 13px; background: #f5f6fa; padding: 10px 12px; border-radius: 8px; border: 1px solid #e6e7ec; color: #1f2230; line-height: 1.5; } .ax-drawer-json { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11.5px; background: #f5f6fa; border: 1px solid #e6e7ec; border-radius: 8px; padding: 12px; overflow-x: auto; line-height: 1.5; color: #1f2230; } .ax-drawer-foot { border-top: 1px solid #e6e7ec; padding: 14px 22px; background: #fafbff; display: flex; gap: 8px; justify-content: flex-end; } @media (max-width: 600px) { .ax-drawer { width: 100vw; } .ax-kv { grid-template-columns: 1fr; row-gap: 4px; } .ax-kv dt { margin-top: 6px; font-size: 11px; } } /* Dark-theme parity */ :root[data-theme="dark"] .ax-stat-pill { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); color: #e8e9ef; } :root[data-theme="dark"] .ax-stat-pill.ax-stat-total { background: #f8fafc; color: #0f172a; border-color: #f8fafc; } :root[data-theme="dark"] .ax-toolbar { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); } :root[data-theme="dark"] .ax-search { color: #e8e9ef; } :root[data-theme="dark"] .ax-select { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); color: #e8e9ef; } :root[data-theme="dark"] .ax-subtab.is-active { color: #e8e9ef; border-bottom-color: #e8e9ef; } :root[data-theme="dark"] .ax-table-wrap { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.08); } :root[data-theme="dark"] .ax-table thead th { background: rgba(255,255,255,0.04); color: #a4a8b8; border-bottom-color: rgba(255,255,255,0.07); } :root[data-theme="dark"] .ax-table tbody td { color: #e8e9ef; border-top-color: rgba(255,255,255,0.07); } :root[data-theme="dark"] .ax-table tbody tr.ax-row:hover { background: rgba(255,255,255,0.04); } :root[data-theme="dark"] .ax-drawer { background: #16181f; } :root[data-theme="dark"] .ax-drawer-head { background: rgba(255,255,255,0.03); border-bottom-color: rgba(255,255,255,0.07); } :root[data-theme="dark"] .ax-drawer-title { color: #f8fafc; } :root[data-theme="dark"] .ax-drawer-msg, :root[data-theme="dark"] .ax-drawer-json { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.07); color: #e8e9ef; } :root[data-theme="dark"] .ax-drawer-foot { background: rgba(255,255,255,0.03); border-top-color: rgba(255,255,255,0.07); } /* ═══════════════════════════════════════════════════════════════════════════ * CALL DETAILS MODAL (build 188) * * Opened from any row's "Details" button on the Call log page. Layout mirrors * the reference design: metadata 4-up grid (Date/Phone/Duration/Recording), * summary block, extracted-entity chips, then a chat-style transcript with * agent bubbles right-aligned (green) and caller bubbles left-aligned (blue). * Audio playback is currently disabled with a "coming soon" note — the * column + button shape are in place so wiring real recordings is a * data-only swap once capture lands. * ═══════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ * VOICE SETTINGS — reference adaptation (build 195) * * Replaces the old hero + 8-card grid with a cleaner CEO-approved layout: * two dropdowns up top (language / voice), a single voice preview card * with avatar + tags + Play Sample, then the greeting textarea with a * character counter. The 8-card explorer still exists, folded into a *
below for operators who want to compare side-by-side. * ═══════════════════════════════════════════════════════════════════════════ */ .vs-panel { padding: 18px 20px; } .vs-twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; } .vs-select { width: 100%; } .vs-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; background: #ffffff; border: 1px solid #e6e7ec; border-radius: 14px; } .vs-card-left { display: flex; align-items: center; gap: 14px; min-width: 0; } .vs-avatar { width: 52px; height: 52px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #ffffff; font-size: 22px; font-weight: 700; flex: 0 0 52px; letter-spacing: -0.01em; } .vs-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .vs-name { font-size: 18px; font-weight: 700; color: #1f2230; letter-spacing: -0.005em; } .vs-meta { font-size: 13px; color: #6a6f7d; } .vs-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .vs-tag { display: inline-flex; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 500; background: #e0e7ff; color: #1e3a8a; } .vs-vibe { margin: 6px 0 0; font-size: 12.5px; color: #6a6f7d; font-style: italic; } .vs-play { display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px; border-radius: 999px; font-size: 14.5px; font-weight: 600; flex-shrink: 0; } .vs-warn { margin-top: 10px; padding: 8px 12px; border-radius: 8px; background: #fef3c7; border: 1px solid #fde68a; color: #92400e; font-size: 12.5px; } .vs-reset { margin-top: 10px; } .vs-greeting-field { margin-top: 16px; } .vs-greeting { resize: vertical; min-height: 80px; font-size: 14px; line-height: 1.5; padding: 12px 14px; } .vs-counter { display: block; margin-top: 6px; font-size: 12px; color: #9095a3; } .vs-explore { padding: 14px 18px; } .vs-explore > summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-weight: 600; font-size: 14px; color: #1f2230; padding: 4px 0; list-style: none; } .vs-explore > summary::-webkit-details-marker { display: none; } .vs-explore > summary svg { transition: transform 0.18s ease; } .vs-explore[open] > summary svg { transform: rotate(180deg); } /* Phone reflow — stack the two dropdowns + collapse the card. */ @media (max-width: 720px) { .vs-twocol { grid-template-columns: 1fr; gap: 10px; } .vs-card { flex-direction: column; align-items: stretch; } .vs-play { width: 100%; justify-content: center; } } /* Dark theme */ :root[data-theme="dark"] .vs-card { background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.08); } :root[data-theme="dark"] .vs-name { color: #e8e9ef; } :root[data-theme="dark"] .vs-meta { color: #a4a8b8; } :root[data-theme="dark"] .vs-tag { background: rgba(99, 102, 241, 0.18); color: #c7d2fe; } :root[data-theme="dark"] .vs-vibe { color: #a4a8b8; } :root[data-theme="dark"] .vs-warn { background: rgba(245, 158, 11, 0.14); border-color: rgba(245, 158, 11, 0.32); color: #fde68a; } :root[data-theme="dark"] .vs-counter { color: #6a6f7d; } :root[data-theme="dark"] .vs-explore > summary { color: #e8e9ef; } /* Specificity bump: the base .db-modal.db-modal-wide pair (which the * JSX still applies for theme/spacing inheritance) caps width at 720px. * Compound selector outscores it so build-191's 1040px target wins. */ .db-modal.db-modal-wide.call-detail-modal { width: min(1040px, calc(100vw - 32px)); max-width: min(1040px, calc(100vw - 32px)); padding: 0; overflow: hidden; } .call-detail-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px 14px; border-bottom: 1px solid #e6e7ec; background: #fafbff; } .call-detail-title { margin: 0; font-size: 18px; font-weight: 700; color: #1f2230; letter-spacing: -0.005em; } .call-detail-body { padding: 18px 22px 8px; max-height: calc(90vh - 140px); overflow-y: auto; } .call-detail-meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; margin-bottom: 18px; } .call-detail-meta-cell { display: flex; flex-direction: column; gap: 4px; } .call-detail-meta-label { font-size: 12px; color: #6a6f7d; letter-spacing: 0.01em; } .call-detail-meta-value { font-size: 14.5px; color: #1f2230; font-weight: 500; } .call-detail-rec-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 22px; font-size: 14.5px; font-weight: 600; width: max-content; border-radius: 8px; } .call-detail-rec-btn:disabled { cursor: not-allowed; opacity: 0.55; } .call-detail-rec-btn > span:first-child { font-size: 11px; } .call-detail-audio { width: 100%; max-width: 320px; } /* Build 208 — single stereo playback. Caller mixed onto the LEFT channel, agent on the RIGHT — the operator gets one