/* Design tokens: the volkcell.com palette (canvas, ink, teal accent, void navy). --cv-label is a darker faint (#8a8a8a fails 4.5:1) for small technical labels. */
body.cv-chat-page, .cv-layout {
  --cv-canvas:#f8f8f7; --cv-bg:#ffffff; --cv-soft:#f2f1f0; --cv-side:#f2f1f0; --cv-user:#f2f1f0;
  --cv-ink:#1a1a1a; --cv-ink-strong:#101010; --cv-muted:#5c5c5c; --cv-faint:#8a8a8a; --cv-label:#666666; --cv-line:#e4e3e1; --cv-line-strong:#d3d2cf;
  --cv-accent:#1f6b7a; --cv-accent-2:#14525e; --cv-accent-bright:#7fb8c2; --cv-accent-soft:#c2dfe5; --cv-on-accent:#ffffff; --cv-accent-tint:rgba(31,107,122,0.09);
  --cv-void:#070b1c; --cv-btn:#070b1c; --cv-btn-hover:#14525e; --cv-on-btn:#ffffff; --cv-header-bg:rgba(248,248,247,0.86);
  --cv-on-danger:#ffffff; --cv-danger:#b42318; --cv-danger-2:#8f1c13; --cv-danger-tint:#fdecea; --cv-focus:#14525e; --cv-shadow:0 1px 3px rgba(16,16,16,0.08); --cv-shadow-focus:0 4px 24px rgba(16,16,16,0.1); --cv-amber:#b45309;
  --cv-r-sm:8px; --cv-r-md:12px; --cv-r-lg:16px; --cv-r-xl:24px; --cv-pill:9999px;
  /* Website editorial type system: Geist headings/wordmark, Inter body, Geist
     Mono technical labels. Served locally by conversation-fonts.css. */
  --font-heading:"VC Geist", ui-sans-serif, system-ui, sans-serif;
  --font-body:"VC Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono:"VC Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-brand:"VC Geist", ui-sans-serif, system-ui, sans-serif;
  --font-logo:var(--font-brand);
  --cv-font-head:var(--font-heading); --cv-font-mono:var(--font-mono);
}
html[data-theme="dark"] body.cv-chat-page, html[data-theme="dark"] .cv-layout {
  --cv-canvas:#070b1c; --cv-bg:#0f1428; --cv-soft:#151b33; --cv-side:#0b1024; --cv-user:#171d36;
  --cv-ink:#ffffff; --cv-ink-strong:#ffffff; --cv-muted:#b4b7c3; --cv-faint:#9a9eae; --cv-label:#a3a7b6; --cv-line:rgba(255,255,255,0.16); --cv-line-strong:rgba(255,255,255,0.3);
  --cv-accent:#7fb8c2; --cv-accent-2:#c2dfe5; --cv-on-accent:#070b1c; --cv-accent-tint:rgba(127,184,194,0.14);
  --cv-btn:#7fb8c2; --cv-btn-hover:#c2dfe5; --cv-on-btn:#070b1c; --cv-header-bg:rgba(7,11,28,0.82);
  --cv-on-danger:#2b0c08; --cv-danger:#f97066; --cv-danger-2:#fda29b; --cv-danger-tint:rgba(249,112,102,0.12); --cv-focus:#c2dfe5; --cv-shadow:0 1px 3px rgba(0,0,0,0.4); --cv-shadow-focus:0 4px 24px rgba(0,0,0,0.45); --cv-amber:#f5a524;
}

/* Chat pages draw their own sidebar or header, so the page is one viewport-high app and only #cv-scroll and the sidebar list scroll. */
body.vc-shell.cv-chat-page { display:block; height:100vh; height:100dvh; min-height:0; margin:0; overflow:hidden; background:var(--cv-canvas); color:var(--cv-ink); }
body.cv-chat-page::before { display:none; }
body.cv-chat-page > div[data-auth-background]:not(.vc-tour-invite), body.cv-chat-page > div[data-auth-background]:not(.vc-tour-invite) > main.vc-main { height:100%; min-height:0; margin-block:0; margin-right:0; padding:0; }
body.cv-chat-page > div[data-auth-background]:not(.vc-main-area):not(.vc-tour-invite) { margin-left:0; }

.cv-layout { display:flex; height:100%; min-height:0; overflow:hidden; background:var(--cv-canvas); color:var(--cv-ink);
  font-family:var(--font-body, "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif); font-size:16px; line-height:1.5; }
:is(.cv-layout, .vc-sidebar--chats) *, :is(.cv-layout, .vc-sidebar--chats) *::before, :is(.cv-layout, .vc-sidebar--chats) *::after { box-sizing:border-box; }
:is(.cv-layout, .vc-sidebar--chats) [hidden] { display:none !important; }
.cv-sr { position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; padding:0; margin:-1px; }

/* The 840px reading column is a gutter on every direct child, so the scroll area itself spans the pane. */
.cv-chat { --cv-gutter:max(14px, calc((100% - 840px) / 2));
  flex:1 1 auto; min-width:0; height:100%; display:flex; flex-direction:column; background:var(--cv-canvas); }
.cv-chat > * { margin-inline:var(--cv-gutter); }
.cv-chat > .cv-scroll { margin-inline:0; padding-inline:var(--cv-gutter); }
.cv-chat > .cv-toolbar { margin-inline:0; padding-inline:var(--cv-gutter); }
.cv-chat > .cv-dialog, .cv-chat > .cv-dialog-backdrop { margin:0; }

.cv-guest .cv-toolbar { display:none; }
.cv-guest .cv-has-chat > .cv-toolbar { display:flex; }
.cv-toolbar { flex:0 0 auto; display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; min-height:60px; padding-block:8px;
  border-bottom:1px solid var(--cv-line); background:var(--cv-canvas); }
.cv-title { flex:1 1 140px; min-width:0; margin:0; font-family:var(--cv-font-head); font-size:1.0625rem; font-weight:500; letter-spacing:-0.02em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cv-header-actions { display:flex; gap:8px; align-items:center; margin-left:auto; }

.cv-btn { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 16px; border:1px solid var(--cv-line-strong);
  border-radius:var(--cv-pill); background:transparent; color:var(--cv-ink-strong); font:inherit; font-size:0.9375rem; font-weight:500; cursor:pointer; text-decoration:none;
  transition:background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.15s; }
.cv-btn:hover { background:var(--cv-accent-tint); }
:is(.cv-layout, .vc-sidebar--chats) :is(button, a, input, textarea, summary, select):focus-visible { outline:3px solid var(--cv-focus); outline-offset:2px; }
.cv-layout .cv-input:focus-visible { outline:none; }
.cv-btn[disabled] { opacity:0.55; cursor:not-allowed; }
.cv-btn-primary { background:var(--cv-btn); border-color:var(--cv-btn); color:var(--cv-on-btn); }
.cv-btn-primary:hover { background:var(--cv-btn-hover); border-color:var(--cv-btn-hover); transform:translateY(-1px); }
.cv-btn-primary[disabled]:hover { transform:none; }
.cv-btn-danger { background:var(--cv-danger); border-color:var(--cv-danger); color:var(--cv-on-danger); }
.cv-btn-danger:hover { background:var(--cv-danger-2); border-color:var(--cv-danger-2); }
.cv-btn-quiet { border-color:transparent; background:transparent; }
.cv-btn-outline { border-color:var(--cv-line-strong); background:transparent; color:var(--cv-ink-strong); }
.cv-chat a.cv-btn-outline { color:var(--cv-ink-strong); }
.cv-btn-outline:hover { border-color:var(--cv-ink-strong); }
.cv-btn[aria-pressed="true"] { background:var(--cv-danger-tint); border-color:var(--cv-danger); }

/* Circular 40px icon buttons (composer, conversation menu). */
.cv-icon-circle { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; padding:0; border:0; border-radius:50%;
  background:transparent; color:var(--cv-ink); font:inherit; cursor:pointer; transition:background-color 0.15s, color 0.15s, opacity 0.15s; }
.cv-icon-circle:hover { background:var(--cv-soft); }
.cv-icon-circle[aria-pressed="true"] { background:var(--cv-danger-tint); color:var(--cv-danger); }
.cv-icon-circle[disabled] { opacity:0.45; cursor:not-allowed; }
.cv-icon-circle[disabled]:hover { background:transparent; }
.cv-icon { display:block; flex:0 0 auto; width:20px; height:20px; }
.cv-icon-circle.cv-send { background:var(--cv-btn); color:var(--cv-on-btn); }
.cv-icon-circle.cv-send:hover { background:var(--cv-btn-hover); }
.cv-icon-circle.cv-send[disabled] { opacity:1; background:var(--cv-line-strong); color:#ffffff; cursor:not-allowed; }
.cv-icon-circle.cv-send[disabled]:hover { background:var(--cv-line-strong); }

/* Conversation menu: Rename and Delete chat. */
.cv-menu-wrap { position:relative; }
.cv-menu-btn { border:1px solid var(--cv-line-strong); }
.cv-menu { position:absolute; right:0; top:calc(100% + 6px); z-index:30; min-width:180px; display:flex; flex-direction:column; padding:4px; border:1px solid var(--cv-line);
  border-radius:var(--cv-r-md); background:var(--cv-bg); box-shadow:var(--cv-shadow-focus); }
.cv-menu-item { min-height:44px; padding:0 12px; border:0; border-radius:var(--cv-r-sm); background:transparent; color:var(--cv-ink); font:inherit; font-size:0.9375rem; text-align:left; cursor:pointer; }
.cv-menu-item:hover { background:var(--cv-soft); }
.cv-menu-item[disabled] { opacity:0.55; cursor:not-allowed; }
.cv-menu-danger { color:var(--cv-danger); }
.cv-menu-danger:hover { background:var(--cv-danger-tint); }

.cv-notice { margin-top:10px; padding:2px 4px; background:transparent; border:0; color:var(--cv-muted); font-size:0.875rem; text-align:center; }
.cv-check { margin-top:10px; padding:10px 14px; border-radius:12px; background:var(--cv-soft); border:1px solid var(--cv-line); font-size:0.9375rem; }
.cv-check-text { margin:0 0 8px; }
.cv-check-widget { min-height:65px; }
.cv-guest-allowance { margin-block:6px 0; text-align:center; }
.cv-guest-keep { margin:8px 0 0; }
.cv-panel { margin-top:12px; padding:16px 18px; border:1px solid var(--cv-line); border-radius:16px; background:var(--cv-bg); box-shadow:var(--cv-shadow); }
.cv-panel p { margin:0 0 8px; }
.cv-panel-title { margin:0 0 6px; font-size:1.0625rem; font-weight:650; }
.cv-panel-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.cv-list { margin:0 0 4px; padding-left:20px; }
.cv-chat a { color:var(--cv-accent); text-decoration:underline; }
.cv-chat a.cv-btn { text-decoration:none; }
.cv-chat a.cv-btn-primary { color:var(--cv-on-btn); }
.cv-chat a.cv-btn-danger { color:var(--cv-on-danger); }

/* Delete confirmation: one centred dialog shared by the toolbar and history rows. */
.cv-dialog-backdrop { position:fixed; inset:0; z-index:99; background:rgba(23,22,20,0.5); }
.cv-dialog { position:fixed; z-index:100; top:50%; left:50%; transform:translate(-50%, -50%); width:min(440px, calc(100vw - 28px));
  max-height:calc(100vh - 28px); max-height:calc(100dvh - 28px); overflow-y:auto; margin:0; padding:22px; border-radius:18px; box-shadow:0 24px 64px rgba(0,0,0,0.28); }
.cv-dialog .cv-panel-title { font-size:1.25rem; }
.cv-delete-name { font-weight:650; overflow-wrap:anywhere; }
.cv-dialog .cv-panel-actions { justify-content:flex-end; margin-top:18px; }

.cv-scroll { flex:1 1 auto; min-height:0; overflow-y:auto; padding-block:20px; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
.cv-intro { padding:9vh 0 20px; text-align:center; }
.cv-intro-title { margin:0 0 10px; font-family:var(--cv-font-head); font-size:1.875rem; font-weight:500; letter-spacing:-0.02em; }
.cv-intro-text { margin:0 auto 24px; max-width:34em; color:var(--cv-muted); font-size:1.0625rem; }
.cv-free-line { margin:0 0 8px; font-size:0.9375rem; font-weight:500; color:var(--cv-accent); }
.cv-examples-label, .cv-history-title, .cv-steps-label, .cv-result dt, .cv-facts dt { font-family:var(--cv-font-mono); text-transform:uppercase; letter-spacing:0.08em; color:var(--cv-label); }
.cv-examples-label { margin:0 0 10px; font-size:0.75rem; }
.cv-examples { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; max-width:640px; margin:0 auto; }
.cv-chip { min-height:56px; padding:10px 16px; border:1px solid var(--cv-line); border-radius:16px; background:var(--cv-bg); font:inherit; font-size:0.9375rem;
  text-align:left; cursor:pointer; color:var(--cv-ink); box-shadow:var(--cv-shadow); transition:background-color 0.15s, border-color 0.15s; }
.cv-chip:hover { background:var(--cv-accent-tint); border-color:var(--cv-accent); }
@media (prefers-reduced-motion:reduce) { .cv-chip, .cv-btn { transition:none !important; } .cv-btn-primary:hover { transform:none; } }
.cv-messages { display:flex; flex-direction:column; gap:18px; }
.cv-msg { max-width:100%; white-space:pre-wrap; overflow-wrap:anywhere; }
.cv-bubble { padding:10px 16px; border-radius:18px; }
.cv-msg-user { align-self:flex-end; max-width:75%; background:var(--cv-user); color:var(--cv-ink); }
.cv-msg-assistant { align-self:flex-start; width:100%; max-width:720px; padding:0; background:transparent; border:0; color:var(--cv-ink); line-height:1.6; }
.cv-msg-pending { opacity:0.7; }
.cv-msg-actions { display:flex; gap:2px; margin-top:4px; white-space:normal; opacity:0; transition:opacity 0.18s; }
.cv-msg-assistant:hover .cv-msg-actions, .cv-msg-assistant:focus-within .cv-msg-actions { opacity:1; }
.cv-msg-action { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; padding:0; border:0; border-radius:50%; background:transparent; color:var(--cv-muted); cursor:pointer; transition:background-color 0.15s, color 0.15s; }
.cv-msg-action:hover { background:var(--cv-soft); color:var(--cv-ink); }
.cv-msg-action.is-copied { color:var(--cv-accent); }
@media (hover:none) { .cv-msg-actions { opacity:1; } .cv-msg-action { width:44px; height:44px; } }
.cv-msg-notice { align-self:flex-start; max-width:100%; padding:8px 12px; border-left:3px solid #b45309; background:#fffbeb; color:#78350f; font-size:0.9375rem; border-radius:6px; }

.cv-chat details > summary { cursor:pointer; }

.cv-card { margin-top:12px; padding:14px 16px; border:1px solid var(--cv-line); border-radius:12px; background:var(--cv-bg); }
.cv-card-title { margin:0 0 4px; font-size:1.0625rem; font-weight:600; overflow-wrap:anywhere; }
.cv-badge { display:inline-block; padding:2px 10px; border-radius:999px; background:#fff7e0; border:1px solid #f0d78a; color:#5c4400; font-size:0.8125rem; font-weight:600; margin-bottom:6px; }
html[data-theme="dark"] .cv-badge { background:rgba(240,215,138,0.14); border-color:rgba(240,215,138,0.4); color:#f3dc9b; }
.cv-card p { margin:4px 0; }
.cv-result { margin-top:12px; padding:14px 16px; border:1px solid var(--cv-line); border-radius:var(--cv-r-md); background:var(--cv-bg); }
.cv-result-body { display:flex; align-items:flex-start; gap:16px; margin-top:10px; }
.cv-result-main { flex:1 1 0; min-width:0; }
.cv-result-thumb { flex:0 0 112px; display:block; width:112px; height:112px; border:1px solid var(--cv-line); border-radius:var(--cv-r-md); overflow:hidden; background:var(--cv-soft); transition:border-color 0.15s, box-shadow 0.15s; }
.cv-result-thumb:hover { border-color:var(--cv-line-strong); box-shadow:var(--cv-shadow); }
.cv-result-thumb img { display:block; width:100%; height:100%; object-fit:contain; }
.cv-metrics { display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); gap:12px 20px; margin:0; padding:0; }
.cv-metric { min-width:0; }
.cv-result dt { margin:0 0 2px; font-size:0.6875rem; }
.cv-result dd { margin:0; overflow-wrap:anywhere; font-family:var(--cv-font-head); font-size:1.75rem; font-weight:500; line-height:1.15; letter-spacing:-0.02em; font-variant-numeric:tabular-nums; }
.cv-result dd.cv-withheld { font-size:1rem; font-weight:500; letter-spacing:0; color:var(--cv-muted); }
.cv-result dd.cv-metric-text { font-family:var(--cv-font-body, inherit); font-size:1rem; font-weight:500; line-height:1.35; letter-spacing:0; overflow-wrap:normal; word-break:normal; hyphens:none; }
.cv-result-name { font-family:var(--cv-font-mono); font-size:0.8125rem; font-weight:500; color:var(--cv-ink); overflow-wrap:anywhere; }
.cv-review { margin:12px 0 0; padding:0; background:transparent; border:0; color:var(--cv-muted); font-size:0.875rem; font-weight:400; overflow-wrap:anywhere; }
.cv-review strong { font-weight:500; }
.cv-dot { display:inline-block; width:8px; height:8px; margin-right:8px; border-radius:50%; background:var(--cv-amber); vertical-align:middle; }
.cv-links { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.cv-links .cv-btn { min-height:40px; }
.cv-progress { width:100%; height:8px; accent-color:var(--cv-accent); }

.cv-error { margin-block:6px; padding:10px 14px; border-radius:12px; background:#fdecea; border:1px solid #f4b8b2; color:#7a1710; }
.cv-job-error { padding:8px 10px; border-radius:8px; background:#fdecea; border:1px solid #f4b8b2; color:#7a1710; }
.cv-failed-title { font-weight:600; margin-top:8px; }
.cv-condition-summary { margin:12px 0 4px; padding-bottom:12px; border-bottom:1px solid var(--cv-line); }
.cv-condition-title { font-size:0.8125rem; font-weight:600; margin:0 0 6px; color:var(--cv-ink); }
.cv-failed { color:#7a1710; overflow-wrap:anywhere; }
.cv-steps-label { font-size:0.75rem; font-weight:500; margin:8px 0 2px; }
.cv-steps { margin:0 0 6px; padding-left:22px; }
.cv-steps li { margin:2px 0; overflow-wrap:anywhere; }
.cv-facts { display:grid; grid-template-columns:max-content 1fr; gap:2px 12px; margin:4px 0; }
.cv-facts dt { font-size:0.75rem; }
.cv-facts dd { margin:0; overflow-wrap:anywhere; }
.cv-muted { color:var(--cv-muted); font-size:0.875rem; }
@media (max-width:480px) { .cv-facts { grid-template-columns:1fr; } .cv-result-thumb { flex-basis:96px; width:96px; height:96px; } .cv-result-body { gap:12px; } }
.cv-step-caution { display:block; color:var(--cv-muted); font-size:0.875rem; }
.cv-workplan-steps { list-style:none; margin:8px 0 0; padding:0; }
.cv-workplan-step { margin:0 0 10px; padding:8px 0 0; border-top:1px solid var(--cv-line); }
.cv-workplan-step-head { display:flex; flex-wrap:wrap; gap:4px 10px; justify-content:space-between; align-items:baseline; }
.cv-workplan-step-title { font-weight:600; overflow-wrap:anywhere; }
.cv-step-status { color:var(--cv-muted); font-size:0.875rem; text-transform:capitalize; }
.cv-step-caution-line { color:var(--cv-muted); font-size:0.875rem; overflow-wrap:anywhere; }
.cv-step-job { margin-left:0; background:var(--cv-soft); }
.cv-status { text-transform:capitalize; }
.cv-tool-text, .cv-plan-summary { overflow-wrap:anywhere; }
.cv-references { margin-top:12px; font-size:0.875rem; color:var(--cv-muted); }
.cv-references summary { cursor:pointer; min-height:24px; }
.cv-links a { overflow-wrap:anywhere; }
@media (max-width:480px) { .cv-workplan-step-head { flex-direction:column; } .cv-workplan .cv-btn { width:100%; } }
.cv-pending-note { margin:6px 0 0; }
.cv-handoff { margin:0 0 16px; padding:14px 16px; border:1px solid #f0d78a; border-radius:12px; background:#fff7e0; color:#111827; }
.cv-handoff-title { margin:0 0 4px; font-size:1.0625rem; font-weight:600; }
.cv-handoff p { margin:4px 0; overflow-wrap:anywhere; white-space:pre-wrap; }
.cv-handoff-note { color:#5b6472; font-size:0.9375rem; }

/* --vc-cookie-h lifts the composer above the cookie banner while it shows, so Send stays reachable (set in base.html). */
.cv-composer { flex:0 0 auto; padding-top:10px; padding-bottom:max(12px, env(safe-area-inset-bottom)); margin-bottom:var(--vc-cookie-h, 0px); }
.cv-dropzone { border:1px solid var(--cv-line-strong); border-radius:24px; padding:12px 12px 10px 16px; background:var(--cv-bg); box-shadow:var(--cv-shadow); transition:box-shadow 0.18s, border-color 0.18s; }
.cv-dropzone.cv-dragover { border-color:var(--cv-accent); background:var(--cv-accent-tint); }
.cv-dropzone:focus-within { border-color:var(--cv-ink-strong); box-shadow:var(--cv-shadow-focus); }
.cv-input { display:block; width:100%; border:0; resize:none; padding:2px 4px 8px 0; font:inherit; font-size:1rem; line-height:1.5; min-height:calc(1.5em + 10px); max-height:min(212px, 30vh); overflow-y:hidden; background:transparent; color:var(--cv-ink); }
.cv-input::placeholder { color:var(--cv-muted); opacity:1; }
.cv-composer-row { display:flex; align-items:center; gap:4px; flex-wrap:wrap; margin-left:-6px; }
.cv-composer-row .cv-send { margin-left:0; }
.cv-spacer { flex:1 1 auto; }
.cv-mic-note { font-size:0.8125rem; color:var(--cv-muted); }
.cv-attachments { list-style:none; margin:0 0 8px; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.cv-attachments:empty { display:none; }
.cv-attachment { position:relative; display:flex; align-items:center; max-width:100%; min-height:56px; border:1px solid var(--cv-line); border-radius:var(--cv-r-md); background:var(--cv-soft); }
.cv-attachment-thumb { display:block; width:56px; height:56px; border-radius:calc(var(--cv-r-md) - 1px); object-fit:cover; }
.cv-file-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:46vw; padding:0 8px 0 12px; font-size:0.875rem; }
.cv-remove { display:inline-flex; align-items:center; justify-content:center; padding:0; border:0; background:transparent; color:var(--cv-ink); cursor:pointer; }
.cv-attachment-thumb + .cv-remove { position:absolute; top:-8px; right:-8px; width:24px; height:24px; border:1px solid var(--cv-line-strong); border-radius:50%; background:var(--cv-bg); }
.cv-attachment-thumb + .cv-remove .cv-icon { width:14px; height:14px; }
.cv-file-name + .cv-remove { width:40px; height:40px; border-radius:50%; }
.cv-remove[disabled] { opacity:0.5; cursor:not-allowed; }
@media (prefers-reduced-motion:reduce) { .cv-dropzone, .cv-icon-circle, .cv-msg-actions, .cv-msg-action, .cv-result-thumb, .cv-history-menu-btn, .cv-history-item { transition:none !important; } }

@media (max-width:600px) {
  .cv-chat { --cv-gutter:12px; }
  .cv-msg-user { max-width:88%; }
  .cv-intro { padding-top:3vh; }
  .cv-intro-title { font-size:1.5rem; }
  .cv-examples { grid-template-columns:1fr; }
  .cv-metrics { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .cv-dialog .cv-panel-actions .cv-btn { flex:1 1 auto; }
}
/* Smooth scrolling would make programmatic jumps look like the user scrolling up. */

/* Sidebar (signed in): brand, New chat, search, history, collapsible workspace links, account. */

.cv-history-toggle, .cv-history-close { display:none; }
.cv-layout a.cv-brand { display:inline-flex; align-items:center; gap:10px; min-height:44px; color:var(--cv-ink-strong); text-decoration:none; font-family:var(--cv-font-head); font-size:1.125rem; font-weight:500; letter-spacing:-0.02em; }
.cv-brand-mark { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:var(--cv-r-sm); background:var(--cv-accent); color:var(--cv-on-accent); font-size:0.9375rem; }
.cv-history-new { width:100%; }
.cv-history-search { display:block; width:100%; min-height:44px; padding:0 14px; border:1px solid var(--cv-line-strong); border-radius:var(--cv-pill); background:var(--cv-bg); color:var(--cv-ink); font:inherit; font-size:0.9375rem; }
.cv-history-search::placeholder { color:var(--cv-muted); }
.cv-history-nav { flex:1 1 160px; min-height:120px; overflow-y:auto; padding:3px; }
.cv-history-title { margin:4px 4px 6px; font-size:0.75rem; font-weight:500; }
.cv-history-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.cv-history-empty { margin:6px 4px; }
.cv-history-group { margin:12px 4px 4px; font-family:var(--cv-font-mono); font-size:0.6875rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--cv-label); }
.cv-history-group:first-child { margin-top:2px; }
.cv-history-item { position:relative; display:flex; flex-wrap:wrap; align-items:center; border-radius:12px; transition:background-color 0.15s; }
.cv-history-item:hover { background:var(--cv-accent-tint); }
.cv-history-item.is-current { background:var(--cv-bg); box-shadow:inset 3px 0 0 var(--cv-accent), var(--cv-shadow); }
.cv-history-open { flex:1 1 0; min-width:0; min-height:44px; padding:4px 10px; border:0; background:transparent; font:inherit; font-size:0.9375rem;
  color:var(--cv-ink); text-align:left; cursor:pointer; display:flex; align-items:center; border-radius:12px; }
.cv-history-open[disabled] { cursor:not-allowed; opacity:0.6; }
.cv-history-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cv-history-menu-btn { flex:0 0 44px; display:inline-flex; align-items:center; justify-content:center; width:44px; min-height:44px; padding:0; border:0; background:transparent; color:var(--cv-muted); cursor:pointer; border-radius:12px; opacity:0; transition:opacity 0.15s, background-color 0.15s, color 0.15s; }
.cv-history-item:hover .cv-history-menu-btn, .cv-history-item:focus-within .cv-history-menu-btn, .cv-history-item.is-current .cv-history-menu-btn, .cv-history-menu-btn[aria-expanded="true"] { opacity:1; }
@media (hover:none) { .cv-history-menu-btn { opacity:1; } }
.cv-history-menu-btn:hover, .cv-history-menu-btn[aria-expanded="true"] { color:var(--cv-ink); background:var(--cv-soft); }
/* The menu sits in the row's own flow, so the scrolling list can never clip it. */
.cv-history-menu { flex:0 0 100%; display:flex; flex-direction:column; margin:2px 6px 6px; padding:4px; border:1px solid var(--cv-line); border-radius:12px; background:var(--cv-bg); }
.cv-history-menu button { min-height:44px; padding:0 12px; border:0; background:transparent; font:inherit; font-size:0.9375rem; text-align:left; cursor:pointer; color:var(--cv-ink); border-radius:8px; }
.cv-history-menu button:hover { background:var(--cv-soft); }
.cv-history-menu .cv-history-delete { color:var(--cv-danger); }
.cv-history-rename { flex:1 1 auto; min-width:0; min-height:44px; margin:0 4px; padding:0 10px; border:1px solid var(--cv-accent); border-radius:10px; font:inherit; font-size:0.9375rem; background:var(--cv-bg); color:var(--cv-ink); }

@media (max-width:768px) {
  .cv-history-toggle, .cv-history-close { display:inline-flex; }
}
/* The sidebar already carries New chat on wide screens. */
/* Phone/tablet signed-in bar: menu icon, centred title, compose icon. */
@media (max-width:768px) {
  .cv-with-history .cv-toolbar { flex-wrap:nowrap; gap:8px; }
  .cv-with-history .cv-history-toggle, .cv-with-history #cv-new-chat { width:40px; min-width:40px; min-height:40px; height:40px; padding:0; border-radius:50%; flex:0 0 40px; }
  .cv-with-history .cv-history-toggle .cv-btn-label, .cv-with-history #cv-new-chat .cv-btn-label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .cv-with-history .cv-toolbar .cv-title { flex:1 1 0; text-align:center; }
  .cv-with-history .cv-header-actions { margin-left:0; gap:4px; }
}
@media (min-width:769px) {
  .cv-with-history #cv-new-chat { display:none; }
  .cv-history-toggle .cv-icon, .cv-new-chat-icon { display:none; }
}
.cv-guest .cv-new-chat-icon { display:none; }

/* Signed-out page: the volkcell.com frosted header (wordmark, site links, Log in as the void pill). */
.cv-chat > .cv-site-header { flex:0 0 auto; display:flex; align-items:center; gap:4px 16px; min-height:60px; margin:10px var(--cv-gutter) 0; padding:6px 8px 6px 20px;
  border:1px solid var(--cv-line); border-radius:var(--cv-pill); background:var(--cv-header-bg); -webkit-backdrop-filter:blur(18px) saturate(140%); backdrop-filter:blur(18px) saturate(140%); }
.cv-site-title { margin:0; min-width:0; font-family:var(--cv-font-head); font-size:1.25rem; font-weight:500; letter-spacing:-0.02em; line-height:1.2; }
.cv-chat a.cv-site-brand { display:inline-flex; align-items:center; gap:10px; min-width:0; min-height:44px; color:var(--cv-ink-strong); text-decoration:none; }
.cv-site-header .cv-brand-lockup { min-width:0; }
.cv-site-nav { display:flex; align-items:center; gap:2px; margin-inline:auto; }
.cv-chat .cv-site-nav a { display:inline-flex; align-items:center; min-height:44px; padding:0 14px; border-radius:var(--cv-pill); color:var(--cv-muted); font-size:0.9375rem; font-weight:500; text-decoration:none; }
.cv-chat .cv-site-nav a:hover { color:var(--cv-ink-strong); background:var(--cv-accent-tint); }
/* Theme + Log in travel together at the trailing edge, so they cannot wrap
   apart from each other on a 375px phone. */
.cv-header-end { display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.cv-site-header .cv-nav-cta { padding-inline:20px; }
@media (max-width:719px) { .cv-site-nav { display:none; } .cv-chat > .cv-site-header { padding-left:16px; } .cv-header-end { margin-left:auto; } }
.cv-site-footer { flex:0 0 auto; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:4px 18px; padding:8px 0 10px; margin-top:6px;
  border-top:1px solid var(--cv-line); font-size:0.8125rem; color:var(--cv-muted); }
.cv-site-footer nav { display:flex; flex-wrap:wrap; gap:4px; }
.cv-chat .cv-site-footer a { display:inline-flex; align-items:center; min-height:44px; padding:0 8px; color:var(--cv-muted); text-decoration:none; }
.cv-chat .cv-site-footer a:hover { color:var(--cv-accent); text-decoration:underline; }

/* ============================================================
   VolkCell editorial-laboratory treatment for the chat workspace.
   Scoped to .cv-layout / .cv-chat-page so the legacy application font and
   form rules never leak in. Mirrors the marketing site: Geist headings,
   Inter body, Geist Mono technical labels, warm-grey canvas, single cyan
   accent, hairline borders, controlled radii, no glows or gradients.
   ============================================================ */
.cv-layout { letter-spacing:-0.015em; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body.cv-chat-page .font-sans { font-family:var(--font-body) !important; }
body.cv-chat-page .font-mono { font-family:var(--font-mono) !important; }
:is(.cv-layout, .vc-sidebar--chats) :is(.cv-examples-label, .cv-intro-eyebrow, .cv-brand-byline, .cv-history-group, .cv-history-title, .cv-workspace-eyebrow) {
  font-family:var(--cv-font-mono) !important; }
.cv-layout :is(h1, h2, h3, h4, .cv-card-title, .cv-workspace-title, .cv-intro-title, .cv-result dd, .cv-metric dd, .cv-site-title) {
  font-family:var(--cv-font-head); }

/* ── Chat entry: a compact workspace introduction, not a template hero.
      On wide screens it reads as two balanced columns -- restrained
      heading/description beside the starter rows -- so all four starters
      and the composer fit above the fold. Narrow screens fall back to one
      concise column. */
.cv-intro { position:relative; display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr);
  align-items:start; gap:18px clamp(28px, 5vw, 64px);
  padding:clamp(18px, 3.4vh, 34px) 0 clamp(18px, 2.8vh, 28px); text-align:left; }
.cv-intro-lead, .cv-intro-start { display:grid; gap:12px; align-content:start; min-width:0; }
.cv-intro-start { gap:8px; }
.cv-intro-eyebrow { display:flex; align-items:center; gap:12px; margin:0; color:var(--cv-accent);
  font-size:0.6875rem; font-weight:400; letter-spacing:0.1em; text-transform:uppercase; }
.cv-intro-eyebrow::before { content:""; width:28px; height:1px; background:var(--cv-accent-line, var(--cv-accent)); opacity:0.6; }
.cv-intro-eyebrow span { margin-inline:2px; color:var(--cv-muted); }
.cv-intro-title { margin:0; font-size:clamp(1.4rem, 1.9vw, 1.75rem); font-weight:500;
  line-height:1.2; letter-spacing:-0.025em; color:var(--cv-ink-strong); text-wrap:balance; }
.cv-intro-dim { color:var(--cv-muted); }
.cv-intro-text { margin:0; max-width:min(46ch, 100%); font-size:0.9375rem; line-height:1.6; color:var(--cv-muted); }
.cv-forms-line { margin:0; font-size:0.8125rem; color:var(--cv-label); }
.cv-forms-line a { color:var(--cv-accent); text-decoration:underline; text-underline-offset:2px; }
.cv-free-line { display:inline-flex; align-items:center; gap:8px; margin:0; font-family:var(--cv-font-mono);
  font-size:0.75rem; font-weight:400; letter-spacing:0.01em; color:var(--cv-accent); }
.cv-examples-label { margin:0; font-size:0.6875rem; font-weight:400; letter-spacing:0.1em; color:var(--cv-label); }

.cv-examples { display:grid; grid-template-columns:1fr; margin:0; gap:0; }
.cv-chip { position:relative; display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%;
  min-height:44px; padding:9px 2px 9px 0; border:0; border-bottom:1px solid var(--cv-line); border-radius:0;
  background:transparent; box-shadow:none; color:var(--cv-accent); font-size:0.875rem; font-weight:400;
  letter-spacing:-0.005em; text-align:left; cursor:pointer; transition:color 0.15s, border-color 0.15s, padding-left 0.15s; }
.cv-chip::before { content:""; position:absolute; left:0; bottom:-1px; width:0; height:1px; background:var(--cv-accent); transition:width 0.18s ease; }
.cv-question-arrow { flex:0 0 auto; font-family:var(--cv-font-head); font-size:1.0625rem; line-height:1; color:var(--cv-muted); transition:color 0.15s, transform 0.15s; }
.cv-chip:hover { background:transparent; color:var(--cv-ink-strong); border-color:var(--cv-line); padding-left:8px; }
.cv-chip:hover::before { width:calc(100% - 8px); }
.cv-chip:hover .cv-question-arrow { color:var(--cv-accent); transform:translate(2px, -2px); }

/* Below the two-column breakpoint the intro stacks: lead first, then starters. */
@media (max-width:760px) {
  .cv-intro { display:block; padding-top:clamp(16px, 2.6vh, 26px); }
  .cv-intro-lead { gap:10px; margin-bottom:18px; }
  .cv-intro-title { font-size:clamp(1.375rem, 5vw, 1.625rem); }
  .cv-examples-label { margin-bottom:6px; }
}

/* ── Sidebar / history ── */

.cv-brand-lockup { display:flex; flex-direction:column; gap:4px; }
.cv-layout a.cv-brand { font-size:1.375rem; letter-spacing:-0.03em; }
.cv-layout .vc-product-wordmark, .cv-layout .cv-brand-name { font-family:var(--font-brand) !important; font-weight:600;
  letter-spacing:-0.02em; line-height:1; text-transform:none; color:currentColor; white-space:nowrap; }
.cv-brand-byline { font-size:0.6rem; font-weight:400; letter-spacing:0.16em; text-transform:uppercase; color:var(--cv-muted); }
.cv-history-new { min-height:44px; border-radius:var(--cv-r-sm); }
.cv-history-search { border:1px solid transparent; border-radius:var(--cv-r-sm); background:var(--cv-soft); font-size:0.875rem; }
.cv-history-search:focus-visible { border-color:var(--cv-accent); }
.cv-history-title { font-weight:400; color:var(--cv-label); }
.cv-history-group { margin-top:20px; font-weight:400; color:var(--cv-label); }
.cv-history-item, .cv-history-open { border-radius:var(--cv-r-sm); }
.cv-history-item.is-current { background:var(--cv-soft); box-shadow:inset 2px 0 0 var(--cv-accent); }

/* ── Toolbar / workspace chrome ── */
.cv-toolbar { border-bottom:1px solid var(--cv-line); min-height:64px; }
.cv-title { font-size:1.125rem; }
.cv-menu-btn { border-color:transparent; }
.cv-workspace-bar { min-height:52px; }

/* ── Cards, plans and tool suggestions ── */
.cv-panel-title, .cv-card-title, .cv-handoff-title { font-family:var(--cv-font-head); font-weight:500; letter-spacing:-0.015em; }
.cv-card { border-radius:var(--cv-r-md); }
.cv-badge { display:inline-block; margin-bottom:8px; padding:3px 10px; border:1px solid var(--cv-accent-line, var(--cv-line-strong));
  border-radius:var(--cv-pill); background:var(--cv-accent-tint); color:var(--cv-accent); font-family:var(--cv-font-mono);
  font-size:0.6875rem; font-weight:400; letter-spacing:0.06em; text-transform:uppercase; }
html[data-theme="dark"] .cv-badge { background:var(--cv-accent-tint); border-color:var(--cv-line-strong); color:var(--cv-accent); }
.cv-result { padding:20px; border-radius:var(--cv-r-lg); }
.cv-result dd { font-size:2rem; font-weight:450; }
.cv-result dt, .cv-steps-label { color:var(--cv-label); font-weight:400; letter-spacing:0.08em; text-transform:uppercase; font-size:0.6875rem; }
.cv-review { color:var(--cv-muted); }

/* ── Composer / uploads ── */
.cv-composer { padding-top:12px; }
.cv-dropzone { border:1px solid var(--cv-line-strong); border-radius:var(--cv-r-lg); box-shadow:none; padding:14px 16px 12px; transition:border-color 0.18s, box-shadow 0.18s; }
.cv-dropzone:focus-within { border-color:var(--cv-accent); box-shadow:0 0 0 3px var(--cv-accent-tint); }
.cv-attachment { border-radius:var(--cv-r-sm); }
.cv-attachment-thumb { border-radius:calc(var(--cv-r-sm) - 1px); }
.cv-icon-circle.cv-send { background:var(--cv-btn); }
.cv-icon-circle.cv-send:hover { background:var(--cv-btn-hover); }

/* Defeat the older application-wide dark form rules inside this chat only. */
body.cv-chat-page .cv-input { background:transparent !important; color:var(--cv-ink) !important; border:0 !important; }
body.cv-chat-page .cv-input::placeholder, body.cv-chat-page .cv-history-search::placeholder {
  color:var(--cv-muted) !important; opacity:1;
}
body.cv-chat-page .cv-history-search { background:var(--cv-soft) !important; color:var(--cv-ink) !important; }

/* ── Guest header: the marketing site's frosted hairline bar ── */
.cv-chat > .cv-site-header { margin:16px max(24px, calc((100% - 1240px) / 2)) 0;
  border-radius:var(--cv-r-md); padding:8px 8px 8px 18px; border-color:var(--cv-line); }
.cv-site-title { font-size:1.375rem; font-weight:600; }
.cv-chat a.cv-site-brand { gap:12px; }
.cv-chat .cv-site-nav a { font-family:var(--cv-font-mono); font-size:0.8125rem; font-weight:400; letter-spacing:-0.005em; }
.cv-site-header .cv-nav-cta { border-radius:var(--cv-pill); min-height:40px; }
.cv-site-footer { font-family:var(--cv-font-mono); font-size:0.625rem; letter-spacing:0.04em; border:0; }
.cv-stream-label { margin-bottom:8px; color:var(--cv-muted); font-family:var(--cv-font-mono); font-size:0.6875rem; }
.cv-stream-text { white-space:pre-wrap; overflow-wrap:anywhere; }

/* ── Reduced motion ── */
@media (prefers-reduced-motion:reduce) {
  .cv-chip, .cv-chip::before, .cv-question-arrow, .cv-dropzone, .cv-btn, .cv-icon-circle, .cv-history-item { transition:none !important; }
  .cv-chip:hover { padding-left:2px; }
  .cv-chip:hover::before { width:0; }
  .cv-chip:hover .cv-question-arrow { transform:none; }
}

/* Guest theme. A first-time guest starts on the marketing site's dark canvas
   (set before paint in base.html), but the guest shell follows the explicit
   light/dark choice through the first message and every later turn. Light uses
   the standard warm-grey tokens above; dark overrides them here. There is no
   microscopy hero image. */
html[data-theme="dark"] .cv-guest {
  --cv-canvas:#090c11;
  --cv-ink:#ffffff; --cv-ink-strong:#ffffff; --cv-muted:rgba(255,255,255,0.72); --cv-label:#c2dfe5;
  --cv-accent:#c2dfe5; --cv-accent-tint:rgba(255,255,255,0.08); --cv-line:rgba(255,255,255,0.16);
  --cv-line-strong:rgba(255,255,255,0.3); --cv-soft:rgba(255,255,255,0.06); --cv-user:#171d36;
  --cv-bg:#0f1428; --cv-btn:#ffffff; --cv-on-btn:#070b1c; --cv-btn-hover:#c2dfe5; --cv-focus:#c2dfe5;
  --cv-danger:#f97066; --cv-danger-2:#fda29b; --cv-on-danger:#2b0c08;
  --cv-danger-tint:rgba(249,112,102,0.12);
  background-color:#090c11;
}
html[data-theme="dark"] .cv-guest .cv-chat > .cv-site-header {
  background:transparent; border-color:transparent; -webkit-backdrop-filter:none; backdrop-filter:none;
}
html[data-theme="dark"] .cv-guest .cv-chat .cv-nav-cta {
  background:rgba(255,255,255,0.12); border-color:rgba(255,255,255,0.2); color:var(--cv-ink);
}
html[data-theme="dark"] .cv-guest .cv-chat .cv-nav-cta:hover { background:rgba(255,255,255,0.2); }
html[data-theme="dark"] .cv-guest .cv-chat .cv-dropzone {
  background:rgba(5,7,15,0.72); border-color:var(--cv-line-strong);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
}
html[data-theme="dark"] .cv-guest .cv-chat .cv-dropzone:focus-within { border-color:var(--cv-accent); box-shadow:0 0 0 3px var(--cv-accent-tint); }
html[data-theme="dark"] .cv-guest .cv-chat .cv-chip { color:#c2dfe5; }
html[data-theme="dark"] .cv-guest .cv-chat .cv-chip::before { background:#c2dfe5; }
html[data-theme="dark"] .cv-guest .cv-chat .cv-chip:hover { color:#ffffff; }
html[data-theme="dark"] .cv-guest .cv-chat .cv-notice { color:#c2dfe5; font-size:0.8125rem; }
html[data-theme="dark"] .cv-guest .cv-chat .cv-icon-circle.cv-send[disabled] {
  color:#070b1c; background:#c2dfe5; opacity:0.5;
}
html[data-theme="dark"] .cv-guest .cv-intro-eyebrow::before { background:var(--cv-accent); opacity:0.7; }

/* Guest theme control: a quiet 44px icon button that reuses the existing
   vc-theme key and the .vc-theme-icon-sun/moon swap from site.css. */
.cv-site-header .cv-theme-toggle {
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; padding:0; border:1px solid var(--cv-line-strong); border-radius:var(--cv-pill);
  background:transparent; color:var(--cv-muted); cursor:pointer;
}
.cv-site-header .cv-theme-toggle:hover { color:var(--cv-ink-strong); border-color:var(--cv-ink-strong); background:var(--cv-accent-tint); }
html[data-theme="dark"] .cv-site-header .cv-theme-toggle { color:var(--cv-ink); border-color:var(--cv-line-strong); }
@media (prefers-reduced-motion:no-preference) { .cv-site-header .cv-theme-toggle { transition:color 0.15s, border-color 0.15s, background-color 0.15s; } }

/* "Why sign in?" guest benefit comparison. The trigger is a quiet text button
   that collapses to a 44px "?" circle on phones so the four header items still
   fit at 375px. The dialog reuses the shared .cv-dialog lifecycle. */
.cv-site-header .cv-why-signin {
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:44px; padding:0 10px; border:1px solid transparent; border-radius:var(--cv-pill);
  background:transparent; color:var(--cv-muted); font:inherit; font-size:0.875rem; font-weight:500;
  letter-spacing:-0.01em; white-space:nowrap; cursor:pointer;
  transition:color 0.15s, border-color 0.15s, background-color 0.15s;
}
.cv-site-header .cv-why-signin:hover { color:var(--cv-ink-strong); background:var(--cv-accent-tint); }
.cv-why-signin-mark { display:none; font-family:var(--cv-font-head); font-size:0.9375rem; font-weight:600; line-height:1; }
html[data-theme="dark"] .cv-site-header .cv-why-signin { color:var(--cv-ink); }
html[data-theme="dark"] .cv-site-header .cv-why-signin:hover { color:#ffffff; background:var(--cv-accent-tint); }
@media (max-width:719px) {
  .cv-site-header .cv-why-signin { width:44px; padding:0; border-color:var(--cv-line-strong); }
  .cv-why-signin-label { display:none; }
  .cv-why-signin-mark { display:block; }
}

.cv-why-dialog { width:min(620px, calc(100vw - 28px)); }
.cv-why-lead { margin:0 0 14px; color:var(--cv-muted); font-size:0.9375rem; }
.cv-why-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.cv-why-col { min-width:0; padding:14px 16px; border:1px solid var(--cv-line); border-radius:var(--cv-r-md); background:var(--cv-soft); }
.cv-why-col-account { border-color:var(--cv-line-strong); background:var(--cv-bg); }
.cv-why-col-title { margin:0 0 8px; font-family:var(--cv-font-mono); font-size:0.6875rem; font-weight:400;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--cv-label); }
.cv-why-list { margin:0; padding-left:18px; display:grid; gap:6px; font-size:0.875rem; line-height:1.5; color:var(--cv-ink); }
.cv-why-unavailable { margin:0 0 8px; color:var(--cv-ink); font-size:0.9375rem; font-weight:500; }
.cv-why-note { margin:14px 0 0; color:var(--cv-muted); font-size:0.8125rem; }
.cv-why-dialog .cv-panel-actions { justify-content:flex-end; margin-top:16px; }
@media (max-width:560px) {
  .cv-why-grid { grid-template-columns:1fr; gap:12px; }
  .cv-why-dialog .cv-panel-actions .cv-btn { flex:1 1 auto; }
}
@media (prefers-reduced-motion:reduce) { .cv-site-header .cv-why-signin { transition:none; } }

@media (max-width:600px) {
  .cv-intro { padding-top:18px; }
  .cv-intro-lead { margin-bottom:16px; }
  .cv-intro-eyebrow { font-size:0.6875rem; }
  .cv-intro-title { font-size:clamp(1.375rem, 6vw, 1.625rem); letter-spacing:-0.02em; }
  .cv-intro-text { font-size:0.9375rem; }
  .cv-examples { grid-template-columns:1fr; margin-top:0; }
  .cv-chip { min-height:44px; font-size:0.875rem; }
  .cv-chat > .cv-site-header { margin:8px 12px 0; padding-left:14px; }
  .cv-site-title { font-size:1.3rem; }
  .cv-site-footer { gap:0; padding-block:0; margin-top:0; }
  .cv-site-footer nav { margin-left:auto; }
  .cv-site-footer a { font-size:0.6875rem; }
  .cv-result { padding:16px; }
  .cv-result dd { font-size:1.75rem; }
  .cv-result .cv-metrics { grid-template-columns:1fr; gap:12px; }
}

/* Keep the product lockup and sign-in action readable on narrow phones: the
   wordmark truncates before the theme control or Log in can wrap or overflow. */
.cv-site-header .cv-nav-cta { flex-shrink:0; white-space:nowrap; }
.cv-site-header .cv-site-title, .cv-site-header .cv-site-brand { min-width:0; max-width:100%; overflow:hidden; }
.cv-site-header .cv-brand-lockup { min-width:0; max-width:100%; }
.cv-site-header .cv-brand-name { overflow:hidden; text-overflow:ellipsis; }
@media (max-width:359px) { .cv-site-title { font-size:1.25rem; } }

/* ============================================================
   Cohesive working layout: a compact composer, orderly tool/plan
   suggestions and readable result cards. Presentation only, scoped
   to .cv-layout so the shared shell is untouched.
   ============================================================ */

/* ── Compact, cohesive composer ── */
.cv-composer { padding-top:10px; }
.cv-dropzone { padding:10px 12px 8px 14px; }
.cv-input { padding:6px 4px 8px 0; }
.cv-composer-row { gap:2px; margin-left:-4px; padding-top:2px; }
.cv-composer-row .cv-icon-circle { width:38px; height:38px; }
.cv-composer-row .cv-icon-circle .cv-icon { width:19px; height:19px; }
.cv-composer-row .cv-send { width:40px; height:40px; }
.cv-attachment { background:var(--cv-bg); }

/* ── Plan and tool suggestions: numbered steps, clear single action ── */
.cv-card { padding:18px; }
.cv-card-title { font-size:1.125rem; }
.cv-card .cv-steps { counter-reset:cv-step; list-style:none; padding-left:0; }
.cv-card .cv-steps > li { position:relative; padding-left:34px; margin:10px 0; }
.cv-card .cv-steps > li::before { counter-increment:cv-step; content:counter(cv-step);
  position:absolute; left:0; top:0; display:flex; align-items:center; justify-content:center;
  width:22px; height:22px; border:1px solid var(--cv-line-strong); border-radius:50%;
  color:var(--cv-label); font-family:var(--cv-font-mono); font-size:0.6875rem; }
.cv-card .cv-panel-actions { margin-top:16px; align-items:center; }
.cv-plan-line { border-style:dashed; background:transparent; }
.cv-plan-text { margin:0; font-family:var(--cv-font-mono); font-size:0.8125rem; color:var(--cv-muted); }
.cv-tool .cv-facts { margin-top:10px; }

/* ── Readable results and output ── */
.cv-result { background:var(--cv-bg); }
.cv-result-name { color:var(--cv-ink-strong); }
.cv-result-thumb { flex-basis:120px; width:120px; height:120px; background:var(--cv-soft); }
.cv-links .cv-btn { font-size:0.875rem; }
.cv-review strong { color:var(--cv-ink); }
.cv-output-preview .cv-card-title { font-size:1.0625rem; }

@media (max-width:600px) {
  .cv-composer-row .cv-icon-circle, .cv-composer-row .cv-send { width:44px; height:44px; }
  .cv-result-thumb { flex-basis:104px; width:104px; height:104px; }
}

/* ── Tool suggestions: an orderly label/value list, scan-friendly and quiet.
   The plan steps keep the numbered rail; this table-look is read-only. ── */
.cv-tool .cv-facts { grid-template-columns:minmax(0, 1fr) auto; gap:0; margin-top:12px; border-top:1px solid var(--cv-line); }
.cv-tool .cv-facts dt { padding:9px 12px 9px 0; border-bottom:1px solid var(--cv-line); font-family:var(--cv-font-mono);
  font-size:0.8125rem; letter-spacing:0; text-transform:none; color:var(--cv-label); }
.cv-tool .cv-facts dd { padding:9px 0 9px 12px; border-bottom:1px solid var(--cv-line); text-align:right; font-size:0.875rem; color:var(--cv-ink); }
.cv-tool .cv-facts dd:last-of-type { border-bottom:0; }
.cv-tool .cv-links { margin-top:14px; }

/* ── Output: clear section hierarchy. Headers sit on a hairline, actions line
   up right, and download rows read as full-width controls rather than pills. ── */
.cv-output-section { gap:10px; }
.cv-output-section-head { padding-bottom:8px; border-bottom:1px solid var(--cv-line); }
.cv-output-section-head h3 { font-size:1.0625rem; }
.cv-output-section > a.cv-btn { justify-content:flex-start; width:100%; min-height:44px; padding-inline:14px; border-radius:var(--cv-r-sm); }
.cv-output-empty + .cv-btn { align-self:start; }
.cv-output-method .cv-btn { align-self:start; }

/* ============================================================
   Sidebar polish (2026-10-06). Presentation only.
   The selected workspace link and the current chat previously used a hard
   cyan inset bar on the left edge, which read as a clipped bracket/tab next
   to a filled row. Replace it with a single soft, on-brand tint pill -- the
   same quiet treatment the marketing-site navigation uses -- and give the
   lists enough room that filled rows never touch. No layout or behaviour
   change: same elements, same order, same touch targets.
   ============================================================ */

.cv-history-item.is-current {
  background: var(--cv-accent-tint);
  box-shadow: none;
}
.cv-history-item.is-current .cv-history-name { font-weight: 500; color: var(--cv-ink-strong); }

/* Row rhythm: the 2px gaps made selected rows look stacked together. */
.cv-history-list { gap: 6px; }

/* Sidebar labels and helper copy sit a little looser so text is not cramped. */

.cv-history-open { line-height: 1.4; }
.cv-muted { line-height: 1.55; }

/* Quiet, consistent hover feedback on the sidebar rows. */
@media (prefers-reduced-motion:no-preference) {
  .cv-history-item { transition: background-color 0.18s ease, color 0.18s ease; }
}

/* ============================================================
   Tier 1 polish (2026-10-06). Presentation only. Brings small
   controls in line with the volkcell.com editorial system: a
   site-matching focus ring, minimal scrollbars, a quieter mono
   workspace toggle, and one transition timing across controls.
   ============================================================ */

/* Focus ring matches the marketing site (2px accent, offset 3px). Element
   rules with higher specificity (tabs, panels) keep their own treatment. */
:is(.cv-layout, .vc-sidebar--chats) :is(button, a, input, textarea, summary, select):focus-visible {
  outline: 2px solid var(--cv-focus);
  outline-offset: 3px;
}

/* One motion timing across the shared controls, matching the site's 0.18s. */
@media (prefers-reduced-motion:no-preference) {
  .cv-btn, .cv-icon-circle, .cv-menu-item {
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
  }
}

/* Minimal scrollbars in the scrolling chat surfaces and dialogs. */
:is(.cv-layout, .vc-sidebar--chats) :is(.cv-scroll, .cv-history-nav, .cv-dialog, .cv-menu, .cv-history-menu, .cv-workflows-list) {
  scrollbar-width: thin;
  scrollbar-color: var(--cv-line-strong) transparent;
}
:is(.cv-layout, .vc-sidebar--chats) :is(.cv-scroll, .cv-history-nav, .cv-dialog, .cv-menu, .cv-history-menu, .cv-workflows-list)::-webkit-scrollbar {
  width: 10px; height: 10px;
}
:is(.cv-layout, .vc-sidebar--chats) :is(.cv-scroll, .cv-history-nav, .cv-dialog, .cv-menu, .cv-history-menu, .cv-workflows-list)::-webkit-scrollbar-track { background: transparent; }
:is(.cv-layout, .vc-sidebar--chats) :is(.cv-scroll, .cv-history-nav, .cv-dialog, .cv-menu, .cv-history-menu, .cv-workflows-list)::-webkit-scrollbar-thumb {
  background: var(--cv-line-strong); border-radius: 999px; border: 3px solid transparent; background-clip: content-box;
}
:is(.cv-layout, .vc-sidebar--chats) :is(.cv-scroll, .cv-history-nav, .cv-dialog, .cv-menu, .cv-history-menu, .cv-workflows-list)::-webkit-scrollbar-thumb:hover {
  background: var(--cv-muted); background-clip: content-box;
}

/* The workspace <details> toggle reads as a quiet mono section label with a
   chevron, instead of a heavy +/- glyph (matches the sidebar's "Your chats").
   Prefixed with .cv-layout so it also outranks the earlier ::after rules. */


/* ============================================================
   Tier 2 polish (2026-10-06). Presentation only. Align the
   shared button language with volkcell.com: 8px radius and Geist
   Mono labels (the site's nav/auth CTAs), keeping the app's
   touch-friendly 44px height. Icon-only controls stay circular.
   ============================================================ */
:is(.cv-layout, .vc-sidebar--chats) .cv-btn {
  border-radius: var(--cv-r-sm);
  font-family: var(--cv-font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* Guest header "Log in" CTA follows the site's 8px nav button, not the pill. */
.cv-site-header .cv-nav-cta { border-radius: var(--cv-r-sm); }

/* Sidebar navigation (workspace + account) uses the same Geist Mono micro
   label as the marketing-site nav, so the two surfaces share one language. */


/* Chat attached to an experiment: what it works on, in one quiet line under the toolbar. */
/* Its own row under the tabs, in the reading column (the .cv-chat child selector beats the generic gutter rule). */
.cv-chat > .cv-attached { flex:0 0 auto; box-sizing:border-box; width:calc(100% - 2 * var(--cv-gutter, 16px)); margin:12px auto 4px;
  padding:9px 14px; border:1px solid var(--cv-line-strong); border-color:color-mix(in srgb, var(--cv-accent) 45%, transparent); border-radius:var(--cv-r-sm);
  background:var(--cv-accent-tint); color:var(--cv-ink); font-size:0.875rem; line-height:1.45; }
.cv-chat > .cv-attached[hidden] { display:none; }
.cv-attached a { color:var(--cv-accent); text-decoration:underline; margin-left:4px; }

/* Software version + "How to cite" in the chat footer (partials/software_version.html). */
.cv-site-footer .vc-software-version { display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; color:var(--cv-muted); }
.cv-site-footer .vc-cite summary { cursor:pointer; min-height:44px; display:inline-flex; align-items:center; text-decoration:underline; }
.cv-site-footer .vc-cite[open] { flex-basis:100%; }
.cv-site-footer .vc-cite-text { margin:0 0 6px; user-select:all; overflow-wrap:anywhere; }

/* Upgrade prompt and post-result sign-up card (BGV review 2026-10-16). */
.cv-upsell-dialog { max-width:460px; }
.cv-upsell-text { margin:0 0 12px; color:var(--cv-muted); line-height:1.55; }
.cv-upsell-list { margin:0 0 16px; }
.cv-upsell-signin { margin:12px 0 0; font-size:0.875rem; color:var(--cv-muted); text-align:right; }
.cv-link-btn { padding:0; border:0; background:none; color:var(--cv-accent); font:inherit; text-decoration:underline; cursor:pointer; }
.cv-guest-keep { display:grid; gap:6px; justify-items:start; margin:12px 0 0; padding:16px 18px; border:1px solid var(--cv-accent);
  border-radius:var(--cv-r-lg); background:var(--cv-accent-tint); }
.cv-guest-keep p { margin:0; }
.cv-guest-keep-title { font-weight:500; color:var(--cv-ink-strong); }
.cv-guest-keep-text { color:var(--cv-muted); font-size:0.9375rem; }
.cv-guest-keep .cv-btn { margin-top:6px; }