/* ── Velma 3 — voice agent signals, layered on the Deeptalk call report ──────
   Everything here is scoped to body[data-page="velma3"]; the /velma report is
   untouched. Tokens come from .velma-report-view (velma-report.css).
   Status colors are the dataviz status palette (good / warning / critical),
   always paired with an icon + label — never color alone. */

.vr3-only { display: none; }
body[data-page="velma3"] .vr3-only { display: initial; }
body[data-page="velma3"] section.vr3-only,
body[data-page="velma3"] div.vr3-only { display: flex; }
body[data-page="velma3"] a.vr3-only { display: inline; }

.velma-report-view {
  --vr3-good: #0ca30c;
  --vr3-watch: #fab219;
  --vr3-fail: #d03b3b;
  --vr3-none: var(--m__color-gray-500);
  --vr3-series: #2a78d6;          /* single sequential hue for the charts */
  --vr3-series-soft: #86b6ef;
  --vr3-grid: color-mix(in srgb, var(--m__text) 10%, transparent);
}

/* ── Section lede ── */
.vr3-lede { margin: 0; color: var(--m__text-caption); font-size: var(--m__font-size-m); max-width: 44rem; }
.vr3-lede strong { color: var(--m__text); font-weight: 500; }

/* ── Scorecard grid ── */
.vr3-scorecard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
  gap: var(--m__space-xs);
}
.vr3-q {
  display: flex;
  flex-direction: column;
  gap: var(--m__space-xxs);
  min-width: 0;
  border-radius: var(--m__radius-xl);
  background: var(--m__bg-surface);
  padding: var(--m__space-s);
  border-left: 3px solid var(--vr3-none);
}
.vr3-q-good  { border-left-color: var(--vr3-good); }
.vr3-q-watch { border-left-color: var(--vr3-watch); }
.vr3-q-fail  { border-left-color: var(--vr3-fail); }
.vr3-q-none  { opacity: .72; }
.vr3-q-head { display: flex; align-items: center; justify-content: space-between; gap: var(--m__space-xxs); }
.vr3-q-n {
  color: var(--m__text-caption);
  font-size: var(--m__font-size-xs);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.vr3-q-title {
  margin: 0;
  color: var(--m__text-accent);
  font-family: var(--m__font-family-ids-display);
  font-size: var(--m__font-size-l);
  font-weight: 400;
  line-height: var(--m__line-height-tight);
  letter-spacing: -.01em;
}
.vr3-q-figure { display: flex; align-items: baseline; gap: .45em; flex-wrap: wrap; margin-top: .2rem; }
.vr3-q-value {
  color: var(--m__text-accent);
  font-size: 1.9rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.02em;
}
.vr3-q-unit { color: var(--m__text-caption); font-size: var(--m__font-size-s); }
.vr3-q-finding { margin: .1rem 0 0; font-size: var(--m__font-size-s); line-height: var(--m__line-height-copy); }
.vr3-q-sources { margin: auto 0 0; padding-top: .3rem; color: var(--m__text-caption); font-size: var(--m__font-size-xs); }
.vr3-evidence { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; margin-top: .2rem; }
.vr3-evidence .vr-evidence-link { font-size: var(--m__font-size-xs); padding: .25rem .5rem; }

/* ── Status pill ── */
.vr3-status {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  border-radius: 999px;
  padding: .1em .55em .1em .45em;
  font-size: var(--m__font-size-xs);
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--m__color-white);
  background: var(--vr3-none);
}
.vr3-status svg { width: .8em; height: .8em; }
.vr3-status-good  { background: var(--vr3-good); }
.vr3-status-watch { background: var(--vr3-watch); color: var(--m__color-gray-900); }
.vr3-status-fail  { background: var(--vr3-fail); }

/* ── Stat tiles ── */
.vr3-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: var(--m__space-xs) var(--m__space-m);
}
.vr3-stat { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.vr3-stat-label { color: var(--m__text-caption); font-size: var(--m__font-size-xs); text-transform: uppercase; letter-spacing: .06em; }
.vr3-stat-value { color: var(--m__text-accent); font-size: 1.45rem; font-weight: 500; line-height: 1.1; letter-spacing: -.01em; }
.vr3-stat-note { color: var(--m__text-caption); font-size: var(--m__font-size-xs); }

.vr3-module { gap: var(--m__space-s); }
.vr3-h4 { margin: .2rem 0 0; color: var(--m__text); font-size: var(--m__font-size-s); font-weight: 500; }
.vr3-empty { margin: 0; color: var(--m__text-caption); font-size: var(--m__font-size-s); }
.vr3-muted { color: var(--m__text-caption); }

/* ── Charts ── */
.vr3-chart { display: flex; flex-direction: column; gap: .4rem; }
.vr3-chart-svg { width: 100%; height: auto; display: block; overflow: visible; }
.vr3-grid { stroke: var(--vr3-grid); stroke-width: 1; }
.vr3-threshold { stroke: var(--m__text-caption); stroke-width: 1; opacity: .6; }
.vr3-axis { fill: var(--m__text-caption); font-size: 10px; font-family: var(--m__font-family-sans); }
.vr3-label { fill: var(--m__text); font-size: 10.5px; font-weight: 500; font-family: var(--m__font-family-sans); }
.vr3-bar { cursor: pointer; }
.vr3-bar-fill { fill: var(--vr3-series); transition: filter var(--m__duration-hover-out) var(--m__easing-hover); }
.vr3-bar:hover .vr3-bar-fill { filter: brightness(1.2); transition-duration: var(--m__duration-hover-in); }
.vr3-bar-mark { fill: var(--vr3-fail); stroke: var(--m__bg-surface); stroke-width: 2; }
.vr3-legend { display: flex; flex-wrap: wrap; gap: .3rem 1rem; color: var(--m__text-caption); font-size: var(--m__font-size-xs); }
.vr3-legend-item { display: inline-flex; align-items: center; gap: .35em; }
.vr3-legend-item i { display: inline-block; width: .9em; height: .9em; border-radius: 2px; }
.vr3-key-bar { background: var(--vr3-series); }
.vr3-key-threshold { height: 1px !important; width: 1.1em !important; background: var(--m__text-caption); border-radius: 0 !important; }
.vr3-key-mark { border-radius: 50% !important; width: .7em !important; height: .7em !important; background: var(--vr3-fail); }
.vr3-table-view summary { cursor: pointer; color: var(--m__text-caption); font-size: var(--m__font-size-xs); }
.vr3-table-view summary:hover { color: var(--m__text-link-hover); }
.vr3-table td, .vr3-table th { font-size: var(--m__font-size-s); padding-block: .35rem; }

/* ── Event tables ── */
.vr3-events td { font-size: var(--m__font-size-s); }
.vr3-events td:first-child { color: var(--m__text-caption); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vr3-events .vr-evidence-link { font-size: var(--m__font-size-xs); }
.vr3-outcome { display: inline-flex; align-items: center; gap: .3em; font-weight: 500; white-space: nowrap; }
.vr3-outcome svg { width: .8em; height: .8em; }
.vr3-outcome-good { color: #006300; }
.vr3-outcome-bad { color: var(--vr3-fail); }
.vr3-outcome-neutral { color: var(--m__text-caption); }

/* ── Transcript chips ── */
.vr3-chip {
  display: inline-block;
  border-radius: 999px;
  padding: .05em .5em;
  font-size: .7em;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
  color: var(--m__text);
  background: color-mix(in srgb, var(--m__text) 8%, transparent);
}
.vr3-chip-missed    { color: var(--vr3-fail); background: color-mix(in srgb, var(--vr3-fail) 12%, transparent); }
.vr3-chip-ok        { color: #006300; background: color-mix(in srgb, var(--vr3-good) 14%, transparent); }
.vr3-chip-interrupt { color: #7a4b00; background: color-mix(in srgb, var(--vr3-watch) 22%, transparent); }
.vr3-chip-repeat    { color: #7a4b00; background: color-mix(in srgb, var(--vr3-watch) 22%, transparent); }
.vr3-chip-glitch    { color: var(--m__color-blue-500); background: color-mix(in srgb, var(--m__color-blue-500) 12%, transparent); }
.vr3-chip-noise     { color: var(--m__color-gray-700); background: color-mix(in srgb, var(--m__text) 10%, transparent); }

/* ── Signal rail on the player (bottom strip of the visualization) ── */
.vr3-signal-rail {
  position: absolute;
  left: 0; width: 100%;
  top: calc(var(--viz-height) - 15%);
  height: 15%;
  pointer-events: none;
  z-index: 2;
}
.vr-player-port.stuck .vr3-signal-rail { top: calc(var(--stuck-viz-height) - 18%); height: 18%; }
.vr3-rail-mark {
  position: absolute;
  bottom: 18%;
  width: 3px;
  height: 55%;
  margin-left: -1px;
  border: 0;
  padding: 0;
  border-radius: 2px;
  background: var(--m__color-white);
  opacity: .9;
  cursor: pointer;
  pointer-events: auto;
  transition: transform .15s ease;
}
.vr3-rail-mark:hover { transform: scaleY(1.3); opacity: 1; }
.vr3-rail-deadair   { background: color-mix(in srgb, var(--m__color-white) 35%, transparent); border-radius: 0; height: 30%; bottom: 30%; }
.vr3-rail-glitch    { background: var(--m__color-blue-400); }
.vr3-rail-interrupt { background: var(--vr3-watch); }
.vr3-rail-repeat    { background: var(--vr3-watch); height: 35%; }
.vr3-rail-missed    { background: var(--vr3-fail); }
.vr3-rail-ok        { background: var(--m__color-green-400); height: 35%; }
.vr3-rail-noise     { background: color-mix(in srgb, var(--m__color-white) 55%, transparent); height: 35%; }

/* ── Replay as live ── */
.vr3-live-toggle {
  position: relative;
  z-index: 1;
  margin-left: .2rem;
  border: 1px solid color-mix(in srgb, var(--player-text) 30%, transparent);
  border-radius: 999px;
  padding: .15em .7em;
  background: none;
  color: var(--player-text-muted);
  font-size: .72em;
  font-weight: 500;
  letter-spacing: .03em;
  cursor: pointer;
  transition: color .15s, border-color .15s, background-color .15s;
}
.vr3-live-toggle:hover { color: var(--player-text); border-color: var(--player-text); }
.vr3-live-toggle.active {
  color: var(--m__color-gray-900);
  background: var(--m__color-green-400);
  border-color: var(--m__color-green-400);
}
.vr3-live-feed {
  display: flex;
  align-items: center;
  gap: .9rem;
  flex-wrap: wrap;
  margin-top: calc(var(--m__space-l) * -1 + var(--m__space-xs));
  color: var(--m__text-caption);
  font-size: var(--m__font-size-s);
  min-height: 1.6em;
}
.vr3-live-dot {
  width: .55em; height: .55em; border-radius: 50%;
  background: var(--m__color-gray-500);
}
.vr3-replay .vr3-live-dot { background: var(--vr3-fail); animation: vr3-pulse 1.4s ease-in-out infinite; }
@keyframes vr3-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.vr3-live-label { font-weight: 500; color: var(--m__text); }
.vr3-live-item { display: inline-flex; gap: .4em; align-items: baseline; }
.vr3-live-item .vr-t { font-variant-numeric: tabular-nums; }
.vr3-live-new { color: var(--m__text-accent); animation: vr3-fade-in .4s ease-out; }
@keyframes vr3-fade-in { from { opacity: 0; transform: translateY(.2em); } to { opacity: 1; transform: none; } }

/* Future (not-yet-heard) items during replay: hidden, but the transcript keeps
   its place so rows appear in sequence as the playhead reaches them. */
.vr3-replay .vr3-future { display: none !important; }

@media (max-width: 700px) {
  .vr3-scorecard-grid { grid-template-columns: 1fr 1fr; }
  .vr3-q-value { font-size: 1.5rem; }
}