/* One chat experience (George, 2026-10-20). Loaded last for guests and signed-in users alike, so the composer,
   primary action, start screen and chat frame are the same component everywhere. The guest landing keeps its
   larger hero framing (conversation-landing.css); everything inside the conversation is defined here once. */

/* --- Composer ------------------------------------------------------------------------------------------- */
html .cv-layout .cv-chat > .cv-composer:not(.cv-docked) .cv-dropzone {
  border:0; border-radius:28px; padding:14px 14px 12px 20px; background:var(--cv-bg);
  box-shadow:0 0 0 1px var(--cv-line), 0 12px 36px rgba(16,24,32,0.07);
  -webkit-backdrop-filter:none; backdrop-filter:none; transition:box-shadow 0.18s; }
html .cv-layout .cv-chat > .cv-composer:not(.cv-docked) .cv-dropzone:focus-within {
  box-shadow:0 0 0 1px var(--cv-accent), 0 0 0 4px var(--cv-accent-tint), 0 12px 36px rgba(16,24,32,0.08); }
html .cv-layout .cv-chat > .cv-composer:not(.cv-docked) .cv-dropzone.cv-dragover {
  box-shadow:0 0 0 2px var(--cv-accent), 0 12px 36px rgba(16,24,32,0.08); background:var(--cv-accent-tint); }
html[data-theme="dark"] .cv-layout .cv-chat > .cv-composer:not(.cv-docked) .cv-dropzone {
  background:var(--cv-bg); box-shadow:0 0 0 1px var(--cv-line), 0 16px 48px rgba(0,0,0,0.4); }
html[data-theme="dark"] .cv-layout .cv-chat > .cv-composer:not(.cv-docked) .cv-dropzone:focus-within {
  box-shadow:0 0 0 1px var(--cv-accent), 0 0 0 4px var(--cv-accent-tint), 0 16px 48px rgba(0,0,0,0.45); }
html .cv-layout .cv-chat .cv-input { font-size:1.0625rem; }
@media (max-width: 600px) { html .cv-layout .cv-chat .cv-input { font-size:1rem; } }

/* One primary action: Send uses the same teal as New chat, Sign in and Confirm. */
html .cv-layout .cv-chat .cv-icon-circle.cv-send:not([disabled]) { background:var(--cv-btn); color:var(--cv-on-btn); }
html .cv-layout .cv-chat .cv-icon-circle.cv-send:not([disabled]):hover { background:var(--cv-btn-hover); }
html .cv-layout .cv-chat .cv-icon-circle.cv-send[disabled] { opacity:1; background:var(--cv-line-strong); color:#ffffff; }
html[data-theme="dark"] .cv-layout .cv-chat .cv-icon-circle.cv-send[disabled] { background:rgba(255,255,255,0.14); color:rgba(255,255,255,0.6); }

/* The + reads "Attach image" on every start screen, then becomes an icon once the conversation starts. */
.cv-attach-labelled .cv-attach-label { display:none; }
.cv-chat:has(.cv-intro:not([hidden])) .cv-composer:not(.cv-docked) .cv-attach-labelled {
  width:auto; padding:0 12px 0 8px; gap:6px; border-color:transparent; background:transparent; border-radius:var(--cv-pill); }
.cv-chat:has(.cv-intro:not([hidden])) .cv-composer:not(.cv-docked) .cv-attach-labelled:hover { background:var(--cv-accent-tint); color:var(--cv-ink-strong); }
.cv-chat:has(.cv-intro:not([hidden])) .cv-composer:not(.cv-docked) .cv-attach-labelled .cv-attach-label { display:inline; font-size:0.875rem; }

/* --- Start screen (signed in): the landing's headline, example sets and "Try" prompts, sized for the app ---- */
.cv-intro.cv-intro-app { display:grid; grid-template-columns:minmax(0, 1fr); justify-items:center; gap:0; max-width:760px; margin:0 auto;
  padding:clamp(28px, 9vh, 96px) 0 24px; text-align:center; }
.cv-intro-app .cv-intro-title { margin:0 0 10px; font-size:clamp(1.875rem, 3.4vw, 2.625rem); font-weight:500;
  letter-spacing:-0.035em; line-height:1.08; text-wrap:balance; }
.cv-intro-app .cv-intro-title .vc-title-soft { color:color-mix(in srgb, var(--cv-ink-strong) 55%, transparent); }
.cv-intro-app .cv-intro-text { margin:0 auto 28px; max-width:46ch; font-size:1rem; line-height:1.55; color:var(--cv-muted); }
.cv-try { display:grid; justify-items:center; gap:12px; width:100%; }
.cv-try + .cv-try { margin-top:24px; }
.cv-try-label { margin:0; font-family:var(--cv-font-mono); font-size:0.8125rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--cv-label); }

/* Example sets: the same cards as the guest deck (image, label on a dark chip), laid flat. */
.cv-try-cards { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; width:100%; max-width:620px; }
.cv-try-card { position:relative; display:block; overflow:hidden; aspect-ratio:4 / 3; padding:0; border:0; border-radius:18px;
  background:var(--cv-soft); box-shadow:0 0 0 1px var(--cv-line), 0 8px 24px rgba(16,24,32,0.08); cursor:pointer;
  transition:transform 0.18s ease, box-shadow 0.18s ease; }
.cv-try-card img { display:block; width:100%; height:100%; object-fit:cover; transition:transform 0.4s ease; }
.cv-try-card:hover, .cv-try-card:focus-visible { transform:translateY(-3px);
  box-shadow:0 0 0 2px var(--cv-accent), 0 16px 36px rgba(16,24,32,0.16); outline:none; }
.cv-try-card:hover img, .cv-try-card:focus-visible img { transform:scale(1.04); }
.cv-try-card[aria-busy="true"] { opacity:0.6; cursor:progress; }
.cv-try-card-label { position:absolute; left:8px; right:8px; bottom:8px; display:flex; align-items:baseline; justify-content:space-between;
  gap:8px; padding:7px 10px; border-radius:10px; background:rgba(9,12,20,0.72); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  color:#ffffff; font-size:0.8125rem; font-weight:500; text-align:left; }
.cv-try-card-label small { font-family:var(--cv-font-mono); font-size:0.8125rem; font-weight:400; color:rgba(255,255,255,0.72); white-space:nowrap; }

/* "Try ..." prompts: the landing's placeholder wording as pills. */
.cv-try-prompts { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; max-width:680px; }
html .cv-layout .cv-try-prompts .cv-chip { width:auto; min-height:38px; padding:8px 16px; border:1px solid var(--cv-line);
  border-radius:var(--cv-pill); background:var(--cv-bg); color:var(--cv-ink); font-size:0.875rem; justify-content:center; }
html .cv-layout .cv-try-prompts .cv-chip::before, html .cv-layout .cv-try-prompts .cv-question-arrow { display:none; }
html .cv-layout .cv-try-prompts .cv-chip:hover, html .cv-layout .cv-try-prompts .cv-chip:focus-visible {
  padding-left:16px; border-color:var(--cv-accent); background:var(--cv-accent-tint); color:var(--cv-ink-strong); }
.cv-try-prompts .cv-chip { gap:0; }
.cv-try-prompts .cv-chip q { margin-left:0.3em; quotes:"\2018" "\2019"; }
.cv-intro-app .cv-forms-line { margin-top:28px; }

@media (max-width: 600px) {
  .cv-intro.cv-intro-app { padding-top:clamp(12px, 3vh, 28px); }
  .cv-intro-app .cv-intro-text { margin-bottom:20px; }
  .cv-try-cards { gap:8px; }
  .cv-try-card { border-radius:14px; }
  .cv-try-card-label { left:5px; right:5px; bottom:5px; padding:5px 7px; font-size:0.8125rem; }
  .cv-try-card-label small { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  .cv-try-card, .cv-try-card img, html .cv-layout .cv-chat > .cv-composer .cv-dropzone { transition:none; }
  .cv-try-card:hover, .cv-try-card:focus-visible { transform:none; }
  .cv-try-card:hover img, .cv-try-card:focus-visible img { transform:none; }
}

/* --- Landing header: logo | nav | account actions, with the nav on the page's true centre ------------------
   As a flex row the nav sat between unequal neighbours (a short logo, two wide buttons), 83px left of centre. */
@media (min-width: 720px) {
  .cv-guest .cv-chat:has(.cv-intro-center:not([hidden])) > .cv-site-header {
    display:grid; grid-template-columns:1fr auto 1fr; align-items:center; column-gap:16px; padding-inline:18px; }
  .cv-guest .cv-chat:has(.cv-intro-center:not([hidden])) > .cv-site-header .cv-site-title { justify-self:start; }
  .cv-guest .cv-chat:has(.cv-intro-center:not([hidden])) > .cv-site-header .cv-site-nav { margin-inline:0; }
  .cv-guest .cv-chat:has(.cv-intro-center:not([hidden])) > .cv-site-header .cv-header-end { justify-self:end; }
}

/* --- Guest chat frame: once a conversation starts it is the app, not the website ----------------------- */
/* Dark canvas: the landing keeps its marketing #05070f; a started guest chat uses the app's #070b1c. */
html[data-theme="dark"] .cv-guest:has(.cv-intro[hidden]),
html[data-theme="dark"] .cv-guest .cv-chat:has(.cv-intro[hidden]) { --cv-canvas:#070b1c; --cv-bg:#0f1428; --cv-soft:#151b33;
  --cv-line:rgba(255,255,255,0.16); background:#070b1c; }
/* The website navigation and footer give way to a slim app bar: brand, a note on keeping the chat, theme,
   and the account actions. Signing up then only adds the sidebar. */
.cv-guest .cv-chat:has(.cv-intro[hidden]) > .cv-site-footer { display:none; }
html .cv-guest .cv-chat:has(.cv-intro[hidden]) > .cv-site-header { display:flex; align-items:center; gap:8px; width:auto;
  min-height:56px; margin:0; padding:8px clamp(16px, 2.4vw, 28px); border:0; border-bottom:1px solid var(--cv-line);
  border-radius:0; background:var(--cv-header-bg); box-shadow:none;
  -webkit-backdrop-filter:blur(14px) saturate(1.3); backdrop-filter:blur(14px) saturate(1.3); }
html .cv-guest .cv-chat:has(.cv-intro[hidden]) > .cv-site-header .cv-header-end { display:flex; align-items:center; gap:6px; margin-left:auto; }
html .cv-guest .cv-chat:has(.cv-intro[hidden]) > .cv-site-header .cv-btn.cv-nav-signin,
html .cv-guest .cv-chat:has(.cv-intro[hidden]) > .cv-site-header .cv-btn.cv-nav-signup { min-height:38px; padding-inline:16px; font-size:0.9375rem; }
.cv-guest .cv-chat:has(.cv-intro[hidden]) > .cv-site-header .cv-site-nav { display:none; }
.cv-guest .cv-site-header .cv-header-keep { display:none; }
.cv-guest .cv-chat:has(.cv-intro[hidden]) > .cv-site-header .cv-header-keep { display:inline; margin:0 6px 0 0;
  color:var(--cv-muted); font-size:0.9375rem; }
@media (max-width: 900px) { .cv-guest .cv-chat:has(.cv-intro[hidden]) > .cv-site-header .cv-header-keep { display:none; } }
@media (max-width: 600px) {
  html .cv-guest .cv-chat:has(.cv-intro[hidden]) > .cv-site-header { gap:4px; padding-inline:12px; }
  html .cv-guest .cv-chat:has(.cv-intro[hidden]) > .cv-site-header .cv-site-title { flex:0 0 auto; }
  html .cv-guest .cv-chat:has(.cv-intro[hidden]) > .cv-site-header .cv-header-end { gap:4px; }
  html .cv-guest .cv-chat:has(.cv-intro[hidden]) > .cv-site-header .cv-btn.cv-nav-signin,
  html .cv-guest .cv-chat:has(.cv-intro[hidden]) > .cv-site-header .cv-btn.cv-nav-signup { min-height:40px; padding-inline:11px; font-size:0.9375rem; }
  /* Touch targets: the landing's example controls and the "Try" prompts are at least 44px tall on phones. */
  .vc-hero-ctrl { width:44px; height:44px; }
  html .cv-layout .cv-try-prompts .cv-chip { min-height:44px; }
}

/* --- Theme controls: one icon everywhere (George, 2026-10-20) ----------------------------------------------
   The icon shows the theme the control switches to (moon in light, sun in dark); base.html keeps its label and
   tooltip ("Switch to dark theme" / "Switch to light theme") in step. */
[data-theme-control] .cv-theme-ic { display:none; }
html:not([data-theme="dark"]) [data-theme-control] .cv-theme-ic-moon { display:block; }
html[data-theme="dark"] [data-theme-control] .cv-theme-ic-sun { display:block; }
.cv-header-theme, .cv-theme-icon-btn { display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
  width:40px; height:40px; padding:0; border:1px solid var(--cv-line); border-radius:var(--cv-pill); background:transparent;
  color:var(--cv-muted); cursor:pointer; transition:color 0.15s, border-color 0.15s, background-color 0.15s; }
.cv-header-theme:hover, .cv-theme-icon-btn:hover { color:var(--cv-ink-strong); border-color:var(--cv-line-strong); background:var(--cv-accent-tint); }
.cv-header-theme:focus-visible, .cv-theme-icon-btn:focus-visible { outline:2px solid var(--cv-focus); outline-offset:2px; }
.cv-site-footer .cv-theme-icon-btn { width:44px; height:44px; }
.cv-guest .cv-site-header .cv-header-theme { display:none; }
/* "Back to site": back to the landing page, fresh. Only in a guest chat, where the logo used to reopen the same chat (2026-10-24). */
.cv-header-home { display:none; align-items:center; gap:6px; flex:0 0 auto; min-height:38px; padding:0 14px 0 11px; margin-left:4px;
  border:1px solid var(--cv-line); border-radius:var(--cv-pill); background:transparent; color:var(--cv-ink-strong);
  font:inherit; font-size:0.9375rem; cursor:pointer; transition:border-color 0.15s, background-color 0.15s; }
.cv-header-home:hover { border-color:var(--cv-line-strong); background:var(--cv-accent-tint); }
.cv-header-home:focus-visible { outline:2px solid var(--cv-focus); outline-offset:2px; }
.cv-header-home:disabled { opacity:0.5; cursor:default; background:transparent; }
.cv-guest .cv-chat:has(.cv-intro[hidden]) > .cv-site-header .cv-header-home { display:inline-flex; }
@media (max-width: 600px) { .cv-header-home { width:40px; min-height:40px; padding:0; justify-content:center; margin-left:0; }
  .cv-header-home-label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } }
.cv-guest .cv-chat:has(.cv-intro[hidden]) > .cv-site-header .cv-header-theme { display:inline-flex; }
@media (max-width: 600px) { .cv-header-theme { width:40px; height:40px; } }
@media (prefers-reduced-motion: reduce) { .cv-header-theme, .cv-theme-icon-btn, .cv-header-home { transition:none; } }