/* Conversation workspace: Chat / Data / Output tabs. Uses the tokens from conversation.css, so light, dark and guest themes follow automatically. */

.cv-chat > .cv-workspace-bar { margin-inline:0; padding-inline:var(--cv-gutter); }
.cv-workspace-bar { flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:8px 12px; border-bottom:1px solid var(--cv-line); background:var(--cv-canvas); }
.cv-workspace-bar:has(> .cv-workspace-nav[hidden]) { display:none; }

.cv-workspace-nav { display:flex; align-items:stretch; gap:4px; min-width:0; overflow-x:auto; scrollbar-width:none; }
.cv-workspace-nav::-webkit-scrollbar { display:none; }
.cv-workspace-tab { position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; min-width:44px; padding:0 14px; margin:0;
  border:0; border-radius:var(--cv-r-sm) var(--cv-r-sm) 0 0; background:transparent; color:var(--cv-muted); cursor:pointer;
  font-family:var(--cv-font-head); font-size:0.9375rem; font-weight:500; letter-spacing:-0.01em; white-space:nowrap; }
.cv-workspace-tab::after { content:""; position:absolute; left:10px; right:10px; bottom:-1px; height:2px; border-radius:2px; background:transparent; }
.cv-workspace-tab:hover { color:var(--cv-ink-strong); background:var(--cv-accent-tint); }
.cv-workspace-tab[aria-selected="true"] { color:var(--cv-ink-strong); }
.cv-workspace-tab[aria-selected="true"]::after { background:var(--cv-accent); }
.cv-layout .cv-workspace-tab:focus-visible, .cv-layout .cv-workspace-help-btn:focus-visible { outline:2px solid var(--cv-focus); outline-offset:-2px; }

.cv-tab-count { display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px; padding:0 7px; border-radius:var(--cv-pill);
  background:var(--cv-accent-tint); border:1px solid var(--cv-line-strong); color:var(--cv-ink); font-family:var(--cv-font-mono); font-size:0.75rem; font-weight:500; line-height:1; }
.cv-tab-count[hidden] { display:none; }

.cv-workspace-help-btn { display:inline-flex; align-items:center; gap:8px; min-height:44px; min-width:44px; padding:0 10px; border:0; border-radius:var(--cv-r-sm);
  background:transparent; color:var(--cv-muted); cursor:pointer; font-family:var(--cv-font-body); font-size:0.875rem; }
.cv-workspace-help-btn:hover, .cv-workspace-help-btn[aria-expanded="true"] { color:var(--cv-ink-strong); background:var(--cv-accent-tint); }
.cv-help-mark { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border:1px solid var(--cv-line-strong); border-radius:50%;
  font-family:var(--cv-font-mono); font-size:0.75rem; line-height:1; }

.cv-chat > .cv-workspace-help { margin-block:10px 0; padding:12px 16px; border:1px solid var(--cv-line); border-radius:var(--cv-r-md); background:var(--cv-soft); color:var(--cv-muted); font-size:0.9375rem; line-height:1.55; }
.cv-workspace-help p { margin:0 0 6px; }
.cv-workspace-help p:last-child { margin-bottom:0; }
.cv-workspace-help strong { color:var(--cv-ink-strong); font-weight:600; }

.cv-workspace-panel { min-width:0; }
.cv-workspace-panel:focus-visible { outline:2px solid var(--cv-focus); outline-offset:4px; border-radius:var(--cv-r-sm); }
.cv-workspace-panel[hidden] { display:none; }

.cv-workspace-heading { display:grid; gap:6px; margin:0 0 20px; justify-items:start; }
.cv-workspace-heading > * { margin:0; }
.cv-workspace-eyebrow { color:var(--cv-label); font-family:var(--cv-font-mono); font-size:0.75rem; letter-spacing:0.08em; text-transform:uppercase; }
.cv-workspace-title { font-family:var(--cv-font-head); font-size:1.5rem; font-weight:500; letter-spacing:-0.02em; line-height:1.2; color:var(--cv-ink-strong); }
.cv-workspace-text { max-width:min(52ch, 100%); color:var(--cv-muted); font-size:0.9375rem; line-height:1.55; }
.cv-workspace-heading .cv-btn { margin-top:8px; }

.cv-workspace-back { display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 4px; border:0; background:transparent; color:var(--cv-accent); cursor:pointer; font:inherit; font-size:0.9375rem; }
.cv-workspace-back:hover { text-decoration:underline; }
.cv-workspace-back:focus-visible { outline:2px solid var(--cv-focus); outline-offset:2px; border-radius:var(--cv-r-sm); }

/* Data */
.cv-data-list, .cv-output-list { display:grid; gap:10px; min-width:0; }
.cv-data-item { display:grid; grid-template-columns:64px minmax(0, 1fr) auto; align-items:center; gap:8px 16px; padding:10px 12px; min-width:0;
  border:1px solid var(--cv-line); border-radius:var(--cv-r-md); background:var(--cv-bg); }
.cv-data-thumb { width:64px; height:64px; border-radius:var(--cv-r-sm); border:1px solid var(--cv-line); background:var(--cv-soft); display:flex; align-items:center; justify-content:center; text-align:center; font-size:0.75rem; color:var(--cv-muted, inherit); overflow:hidden; }
.cv-data-thumb img { width:100%; height:100%; object-fit:contain; display:block; }
.cv-data-body { display:grid; gap:2px; min-width:0; }
.cv-data-name { margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--cv-ink-strong); font-size:0.9375rem; font-weight:500; }
.cv-data-meta { margin:0; color:var(--cv-muted); font-size:0.8125rem; overflow-wrap:anywhere; }
.cv-data-state { margin:0; color:var(--cv-label); font-family:var(--cv-font-mono); font-size:0.75rem; }
.cv-data-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.cv-data-actions .cv-btn { min-height:44px; }
.cv-data-empty, .cv-output-empty { margin:0; padding:24px 16px; border:1px dashed var(--cv-line-strong); border-radius:var(--cv-r-md); background:var(--cv-soft); color:var(--cv-muted); font-size:0.9375rem; line-height:1.55; text-align:center; }

/* Output */
.cv-output-section { display:grid; gap:12px; min-width:0; padding:16px; border:1px solid var(--cv-line); border-radius:var(--cv-r-md); background:var(--cv-bg); }
.cv-output-section-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 12px; }
.cv-output-section-head > * { margin:0; }
.cv-output-section-head h3 { font-family:var(--cv-font-head); font-size:1.0625rem; font-weight:500; letter-spacing:-0.01em; color:var(--cv-ink-strong); }
.cv-output-actions { display:flex; flex-wrap:wrap; gap:8px; }
.cv-output-actions .cv-btn { min-height:44px; }
.cv-output-section > .cv-card { border:0; box-shadow:none; margin:0; padding:0; background:transparent; }
.cv-output-preview { min-width:0; max-width:100%; }
.cv-output-method { display:grid; gap:8px; min-width:0; }
.cv-output-method-facts { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:8px 16px; margin:0; }
.cv-output-method-facts > div { min-width:0; }
.cv-output-method-facts dt { color:var(--cv-label); font-family:var(--cv-font-mono); font-size:0.75rem; }
.cv-output-method-facts dd { margin:2px 0 0; color:var(--cv-ink); font-size:0.875rem; overflow-wrap:anywhere; }
.cv-output-method-note { margin:0; color:var(--cv-muted); font-size:0.8125rem; line-height:1.5; }

@media (max-width:600px) {
  .cv-workspace-tab { padding:0 10px; }
  .cv-workspace-title { font-size:1.25rem; }
  .cv-data-item { grid-template-columns:56px minmax(0, 1fr); }
  .cv-data-thumb { width:56px; height:56px; }
  .cv-data-actions { grid-column:1 / -1; justify-content:flex-start; }
  .cv-data-actions .cv-btn, .cv-output-actions .cv-btn { flex:1 1 auto; }
  .cv-workspace-heading .cv-btn { width:100%; }
}

@media (prefers-reduced-motion:no-preference) {
  .cv-workspace-tab, .cv-workspace-help-btn { transition:color 0.15s ease, background-color 0.15s ease; }
}

/* The empty guest hero overrides text tokens; keep its tabs on that dark image. */
.cv-guest .cv-chat:has(.cv-intro:not([hidden])) > .cv-workspace-bar { background:transparent; }
.cv-guest .cv-chat:has(.cv-intro:not([hidden])) > .cv-toolbar { background:transparent; color:var(--cv-ink-strong); }

/* ── VolkCell editorial refinement: quiet tabs and orderly data/output ── */
.cv-workspace-bar { border-bottom:1px solid var(--cv-line); }

.cv-workspace-tab { min-height:48px; color:var(--cv-muted); font-weight:500; letter-spacing:-0.005em; }
.cv-workspace-tab::after { left:8px; right:8px; height:2px; background:transparent; }
.cv-workspace-tab:hover { color:var(--cv-ink-strong); background:transparent; }
.cv-workspace-tab[aria-selected="true"] { color:var(--cv-ink-strong); font-weight:500; }
.cv-workspace-tab[aria-selected="true"]::after { background:var(--cv-accent); }

.cv-tab-count { background:var(--cv-accent-tint); border-color:var(--cv-line-strong); color:var(--cv-ink); font-weight:400; }
.cv-workspace-help-btn { font-size:0.8125rem; }
.cv-help-mark { width:18px; height:18px; font-size:0.6875rem; }

.cv-workspace-heading { gap:8px; margin-bottom:24px; }
.cv-workspace-eyebrow { color:var(--cv-accent); font-weight:400; letter-spacing:0.1em; }
.cv-workspace-title { font-size:1.75rem; font-weight:450; letter-spacing:-0.025em; }

.cv-data-item { border-radius:var(--cv-r-md); padding:12px 14px; }
.cv-data-name { font-weight:500; }
.cv-data-state { color:var(--cv-label); }

.cv-output-section { border-radius:var(--cv-r-md); padding:18px; }
.cv-output-section-head h3 { font-weight:500; }
.cv-output-method-facts dt { color:var(--cv-accent); font-weight:400; letter-spacing:0.02em; }

.cv-data-empty, .cv-output-empty { border-style:dashed; border-color:var(--cv-line); background:transparent; color:var(--cv-muted); }

/* Guest dark treatment: keep the cyan accent and panels readable on the void
   canvas. The light guest theme inherits the warm-grey tokens unchanged. */
html[data-theme="dark"] .cv-guest .cv-workspace-eyebrow { color:var(--cv-accent); }
html[data-theme="dark"] .cv-guest .cv-data-item,
html[data-theme="dark"] .cv-guest .cv-output-section { background:rgba(255,255,255,0.04); border-color:var(--cv-line); }
html[data-theme="dark"] .cv-guest .cv-data-empty,
html[data-theme="dark"] .cv-guest .cv-output-empty { border-color:var(--cv-line-strong); }

/* ── Orderly Data and Output panels ── */
.cv-workspace-heading .cv-btn { align-self:start; }
.cv-data-item { transition:border-color 0.15s, background-color 0.15s; }
.cv-data-item:hover { border-color:var(--cv-line-strong); }
.cv-data-thumb { background:var(--cv-soft); }
.cv-data-state { display:inline-flex; align-items:center; gap:6px; }
.cv-data-state::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--cv-line-strong); }
.cv-data-actions .cv-btn-outline { min-height:40px; }

.cv-output-section-head h3 { margin:0; }
.cv-output-section .cv-result { border:0; background:transparent; padding:0; }
.cv-output-actions { align-items:center; }
.cv-output-method { padding:18px; border:1px solid var(--cv-line); border-radius:var(--cv-r-md); background:var(--cv-bg); }

@media (prefers-reduced-motion:no-preference) {
  .cv-data-item, .cv-output-section { transition:border-color 0.15s ease, background-color 0.15s ease; }
}

/* Tier 2: the workspace tabs and the "How to" trigger use the site's Geist
   Mono micro-label, matching the marketing-site navigation. Underline
   indicator and 44px targets are unchanged. */
.cv-layout .cv-workspace-tab {
  font-family: var(--cv-font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.cv-layout .cv-workspace-help-btn { font-family: var(--cv-font-mono); }