/* Voice agents: the call console, led by the summary the owner gets, and the line under it. Always dark, like the
   other tools, and sized by its own width. The empty frame takes --vx-h while the page loads, and the console is never
   shorter, so nothing below moves when it arrives. Wide, every call fits in that height; narrow, the first call does
   and a longer one grows past it, so only a press changes the height. */
.vo { container: vo / inline-size; }
/* On a phone the words wrap more, so the first call grows as the column narrows: this clears it at every width, with
   room for other browsers' fonts, and the transcript takes what's left over */
.vo-demo { --vx-h: clamp(1056px, calc(1590px - 119cqi), 1238px); }
.vo-note { margin-block: var(--space-3) 0; font-size: var(--text-sm); color: var(--muted); }

/* Before the script runs, and if it can't start: the empty frame, at the console's height. Its message shows only
   if the console never replaces it, or at once if the script fails. */
.vo-demo:not(.on) {
  display: grid;
  place-items: center;
  min-block-size: var(--vx-h);
  padding: var(--space-6);
  border: 1px solid var(--tool-line);
  border-radius: var(--r-md);
  background: var(--tool-bg);
  box-shadow: var(--tool-shadow);
}
.vo-err { margin: 0; text-align: center; color: var(--tool-text); visibility: hidden; animation: vo-late var(--dur-fast) var(--delay-hint) both; }
.vo-demo.failed .vo-err { animation: none; visibility: visible; }
@keyframes vo-late { from { visibility: hidden; opacity: 0; } to { visibility: visible; opacity: 1; } }

/* ---------- The frame: a desktop app's window ---------- */
.vx {
  display: flex;
  flex-direction: column;
  min-block-size: var(--vx-h);
  overflow: hidden;
  border: 1px solid var(--tool-line);
  border-radius: var(--r-md);
  background: var(--tool-bg);
  color: var(--tool-text);
  box-shadow: var(--tool-shadow);
  font-family: var(--sans);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color-scheme: dark;
}
.vx :focus-visible { outline: 2px solid var(--tool-top); outline-offset: 2px; }
.vx svg { flex: none; }
.vx-stroke { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.vx-vh { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.vx-bar {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--space-3);
  min-inline-size: 0;
  padding-block: var(--space-2);
  padding-inline: var(--space-3-5) var(--space-2-5);
  border-block-end: 1px solid var(--tool-line);
  background: var(--tool-panel);
}
.vx-lights { display: flex; gap: var(--space-1-5); }
.vx-lights i { inline-size: 10px; block-size: 10px; border-radius: var(--r-round); background: var(--tool-line); }
.vx-file { overflow: hidden; font-family: var(--mono); font-size: var(--text-xs); font-weight: var(--weight-medium); line-height: var(--leading-none); white-space: nowrap; text-overflow: ellipsis; }
.vx-file span { color: var(--tool-muted); }
.vx-pill {
  margin-inline-start: auto;
  padding-block: var(--space-1);
  padding-inline: var(--space-2);
  border-radius: var(--r-pill);
  background: var(--tool-raise);
  color: var(--tool-muted);
  font-family: var(--mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-none);
  white-space: nowrap;
}

/* Narrow: the calls across the top, the compact player, the latest lines of the call, then the summary. The lines
   take any height the console has to spare. */
.vx-body {
  display: grid;
  flex: 1;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto 1fr auto;
  grid-template-areas: "calls" "live" "log" "sum";
  min-block-size: 0;
}

/* ---------- The example calls: a row across the top ---------- */
.vx-calls { grid-area: calls; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-1); padding: var(--space-2); border-block-end: 1px solid var(--tool-line); background: var(--tool-panel); }
.vx-calls button {
  position: relative; display: grid; align-content: start; gap: var(--space-0-5); min-inline-size: 0; min-block-size: var(--tap);
  padding-block: var(--space-2); padding-inline: var(--space-3); border: 0; border-radius: var(--r-sm);
  background: none; color: var(--tool-text); text-align: start; cursor: pointer; transition: background-color var(--dur-fast) var(--ease);
}
.vx-calls button:hover { background: var(--tool-hover); }
.vx-calls button[aria-current="true"] { background: var(--tool-raise); }
.vx-calls button::before { content: ""; position: absolute; inset-block-end: 0; inset-inline: var(--space-3); block-size: 2px; border-radius: var(--r-pill); background: transparent; }
.vx-calls button[aria-current="true"]::before { background: var(--tool-top); }
.vx-calls b { font-size: var(--text-sm); font-weight: var(--weight-semibold); line-height: var(--leading-tight); }
.vx-calls span { display: none; overflow: hidden; font-size: var(--text-xs); color: var(--tool-muted); white-space: nowrap; text-overflow: ellipsis; }
.vx-calls small { font-family: var(--mono); font-size: var(--text-2xs); color: var(--tool-muted); font-variant-numeric: tabular-nums; }
.vx-calls em { display: inline-block; margin-inline-start: var(--space-1); padding-inline: var(--space-1-5); border: 1px solid var(--tool-line); border-radius: var(--r-pill); font-family: var(--sans); font-style: normal; white-space: nowrap; color: var(--tool-text); }

/* ---------- The live call: who, the waveform, the words, the controls ---------- */
.vx-live { grid-area: live; display: flex; flex-direction: column; min-inline-size: 0; min-block-size: 0; }
.vx-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2-5); padding-block: var(--space-3); padding-inline: var(--space-4); border-block-end: 1px solid var(--tool-line); font-size: var(--text-sm); }
.vx-head span { color: var(--tool-muted); font-variant-numeric: tabular-nums; }
.vx-head .vx-biz { flex-basis: 100%; font-family: var(--mono); font-size: var(--text-2xs); }
.vx-biz > span { white-space: nowrap; }
.vx-lang { padding-inline: var(--space-1-5); border: 1px solid var(--tool-line); border-radius: var(--r-pill); font-size: var(--text-2xs); font-style: normal; line-height: var(--leading-snug); color: var(--tool-text); }
.vx-dot { inline-size: 8px; block-size: 8px; border-radius: var(--r-round); background: var(--tool-ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--tool-ok) 20%, transparent); }
.vx-wave { display: block; inline-size: 100%; block-size: 44px; border-block-end: 1px solid var(--tool-line); }
.vx-ctl { display: flex; align-items: center; gap: var(--space-3); padding-block: var(--space-2); padding-inline: var(--space-3) var(--space-4); }
.vx-play {
  display: inline-flex; flex: none; align-items: center; justify-content: center; inline-size: var(--tap); block-size: var(--tap);
  border: 0; border-radius: var(--r-round); background: var(--tool-top); color: var(--tool-bg); cursor: pointer;
}
.vx-play svg { inline-size: 16px; block-size: 16px; fill: currentColor; }
.vx-play > *, .vx-fold > * { pointer-events: none; }   /* a press lands on the button, whatever it's showing */
.vx-play svg.vx-stroke { fill: none; stroke-width: 1.8; }
.vx-time { flex: none; font-family: var(--mono); font-size: var(--text-xs); color: var(--tool-muted); font-variant-numeric: tabular-nums; }

/* The progress line: a thin track with the actions marked on it, easy to hit, drag or step with the keys */
.vx-prog { position: relative; display: grid; flex: 1; align-items: center; min-inline-size: 0; block-size: var(--tap); padding-inline: var(--space-2); border-radius: var(--r-sm); cursor: pointer; touch-action: pan-y; }
.vx-track { position: relative; block-size: 3px; border-radius: var(--r-pill); background: var(--tool-line); }
.vx-fill { position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 0; border-radius: inherit; background: var(--tool-top); }
.vx-ticks i { --x: 0%; --tw: 3px; --th: 11px; position: absolute; inset-block-start: 50%; inset-inline-start: var(--x); inline-size: var(--tw); block-size: var(--th); margin-block-start: calc(var(--th) / -2); margin-inline-start: calc(var(--tw) / -2); border-radius: var(--r-pill); background: var(--tool-muted); transition: background-color var(--dur-fast) var(--ease); }
.vx-ticks i.on { background: var(--tool-ok); }
.vx-knob { --k: 14px; position: absolute; inset-block-start: 50%; inset-inline-start: 0; inline-size: var(--k); block-size: var(--k); margin: calc(var(--k) / -2); border-radius: var(--r-round); background: var(--tool-text); box-shadow: 0 0 0 4px color-mix(in srgb, var(--tool-top) 30%, transparent); transition: transform var(--dur-fast) var(--ease); }
.vx-prog:hover .vx-knob, .vx-prog:active .vx-knob { transform: scale(1.15); }
.vx-prog:focus-visible { outline-offset: 0; }

/* ---------- The summary the owner gets ---------- */
.vx-sum { grid-area: sum; container: vxs / inline-size; display: flex; flex-direction: column; gap: var(--space-4); min-inline-size: 0; padding-block: var(--space-5); padding-inline: var(--space-4); border-block-start: 1px solid var(--tool-line); background: var(--tool-panel); }
.vx-sum-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); font-family: var(--mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--tool-muted); }
.vx-st { display: inline-grid; white-space: nowrap; }
.vx-st > * { display: inline-flex; grid-area: 1 / 1; align-items: center; gap: var(--space-1-5); }
.vx-st.sent { color: var(--tool-ok); }
.vx-st svg { inline-size: 13px; block-size: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.vx-live-dot { inline-size: 7px; block-size: 7px; border-radius: var(--r-round); background: var(--tool-ok); animation: vx-pulse var(--dur-long) var(--ease) infinite; }
@keyframes vx-pulse { 50% { opacity: .35; } }
.vx-sum-h { margin: 0; font-size: var(--text-xl); font-weight: var(--weight-semibold); line-height: var(--leading-tight); color: var(--tool-text); text-wrap: balance; }
.vx-f { display: grid; margin: 0; }
.vx-f > div { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: var(--space-3); align-items: baseline; padding-block: var(--space-2-5); border-block-start: 1px solid var(--tool-line); }
.vx-f dt { font-family: var(--mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--tool-muted); }
.vx-f dd { margin: 0; font-size: var(--text-body); line-height: var(--leading-snug); color: var(--tool-text); text-wrap: pretty; }
/* The value shown shares its cell with every version it will take, unseen, so the card doesn't grow as it fills in */
.vx-sum-h, .vx-f dd, .vx-out { display: grid; }
.vx-sum-h > *, .vx-f dd > *, .vx-out > * { grid-area: 1 / 1; }
.vx-g, .vx-out:not(.sent) .vx-sms, .vx-out.sent .vx-out-wait { visibility: hidden; }
.vx-sum-h .vx-v, .vx-f .vx-v { align-self: start; }   /* each value starts where the last one did */
.vx-f .vx-v { margin-inline: calc(-1 * var(--space-1)); padding-inline: var(--space-1); border-radius: var(--r-xs); }
.vx-f dd.wait i { display: block; inline-size: var(--w, 60%); block-size: var(--space-2); margin-block: var(--space-1); border-radius: var(--r-pill); background: var(--tool-raise); }
.vx-f div:nth-child(2) dd.wait i { --w: 82%; }
.vx-f div:nth-child(3) dd.wait i { --w: 68%; }
.vx-f div:nth-child(4) dd.wait i { --w: 50%; }
.vx-f div:nth-child(5) dd.wait i { --w: 74%; }
.vx-f dd.new .vx-v { animation: vx-new var(--dur-long) var(--ease); }
@keyframes vx-new { from { background-color: color-mix(in srgb, var(--tool-top) 26%, transparent); } to { background-color: transparent; } }
.vx-out { margin-block-start: auto; }
.vx-out-wait { display: flex; flex-direction: column; padding: var(--space-3); border: 1px dashed var(--tool-line); border-radius: var(--r-md); }
.vx-sms { padding: var(--space-3); border-radius: var(--r-md); background: var(--tool-raise); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tool-top) 40%, transparent); font-size: var(--text-sm); line-height: var(--leading-snug); }
.vx-sms p { margin: 0; text-wrap: pretty; }
.vx-sms-h { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-1) var(--space-3); margin: 0 0 var(--space-1-5); font-size: var(--text-xs); line-height: var(--leading-snug); color: var(--tool-muted); }
.vx-sms .vx-sms-h b { color: var(--tool-top); }
.vx-skel { display: grid; gap: var(--space-2); padding-block: var(--space-1); }
.vx-skel i { display: block; block-size: var(--space-2); border-radius: var(--r-pill); background: var(--tool-raise); }
.vx-skel i:nth-child(2) { inline-size: 88%; }
.vx-skel i:nth-child(3) { inline-size: 54%; }
@container vxs (width < 300px) {
  .vx-f > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
}

/* ---------- The transcript, with the agent's actions landing between the lines. On a phone it shows the latest
   few under the player, and opens to the whole call ---------- */
.vx-log { grid-area: log; display: flex; flex-direction: column; min-inline-size: 0; min-block-size: 0; }
.vx-log-h { margin: 0; padding-block: var(--space-3) 0; padding-inline: var(--space-4); border-block-start: 1px solid var(--tool-line); font-family: var(--mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--tool-muted); }
.vx-fold {
  display: flex; align-items: center; gap: var(--space-2); min-block-size: var(--tap); margin: 0; padding-inline: var(--space-4);
  border: 0; border-block-start: 1px solid var(--tool-line); background: none; color: var(--tool-text); font: inherit; font-weight: var(--weight-semibold); text-align: start; white-space: nowrap; cursor: pointer;
}
.vx-fold span { font-weight: var(--weight-regular); color: var(--tool-muted); font-variant-numeric: tabular-nums; }
.vx-fold svg { inline-size: 16px; block-size: 16px; margin-inline-start: auto; transition: transform var(--dur-fast) var(--ease); }
.vx-fold[aria-expanded="true"] svg { transform: rotate(180deg); }
.vx-lines {
  display: flex; flex: 1 0 auto; flex-direction: column; gap: var(--space-3); block-size: 240px; min-block-size: 0; margin: 0; padding: var(--space-4); overflow: hidden; list-style: none;
  scrollbar-width: thin; scrollbar-color: var(--tool-line) transparent; overscroll-behavior: contain;
}
.vx-lines.vx-cut { mask-image: linear-gradient(to bottom, transparent var(--space-2), var(--tool-bg) var(--space-10)); }   /* the earlier lines fade out under the top edge */
.vx[data-open] .vx-lines { block-size: auto; }
.vl { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-1); opacity: .7; }
.vl.now { opacity: 1; }
.vw { font-family: var(--mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--tool-muted); }
.vl .vw { padding-block-start: var(--space-0-5); }
.vl.a .vw { color: var(--tool-top); }
.vl p { margin: 0; font-size: var(--text-md); line-height: var(--leading-snug); color: var(--tool-text); text-wrap: pretty; }
.vl small { display: block; margin-block-start: var(--space-1); font-size: var(--text-xs); color: var(--tool-muted); }
.vx-act {
  display: flex; align-items: center; align-self: flex-start; gap: var(--space-1-5); max-inline-size: 100%;
  padding-block: var(--space-1); padding-inline: var(--space-2) var(--space-2-5);
  border: 1px solid var(--tool-line); border-radius: var(--r-pill); background: var(--tool-raise); font-size: var(--text-xs); line-height: var(--leading-tight); color: var(--tool-text);
}
.vx-act svg { inline-size: 14px; block-size: 14px; fill: none; stroke: var(--tool-ok); stroke-width: 2; }
.vx-act time { font-family: var(--mono); font-size: var(--text-2xs); color: var(--tool-muted); font-variant-numeric: tabular-nums; }
.vx-empty { font-size: var(--text-sm); color: var(--tool-muted); }

/* Very narrow: the calls and the summary tighten, and the window's pill goes */
@container vo (width < 560px) {
  .vx-calls { gap: var(--space-0-5); padding: var(--space-1-5); }
  .vx-calls button { padding-inline: var(--space-2); }
  .vx-f > div { grid-template-columns: 72px minmax(0, 1fr); gap: var(--space-2-5); }
  .vx-pill, .vx-calls em { display: none; }
}
/* Wider: the words sit beside their speaker, the actions line up with the words */
.vx-lines { --who: 84px; }
@container vo (width >= 560px) {
  .vl { grid-template-columns: var(--who) minmax(0, 1fr); gap: var(--space-3); }
  .vx-act { margin-inline-start: calc(var(--who) + var(--space-3)); }
}

/* ---------- Wide: the summary on the start side, the call beside it, the whole transcript under the call ---------- */
@container vo (width >= 760px) {
  .vo-demo { --vx-h: clamp(640px, calc(870px - 20cqi), 720px); }
  .vx-body { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); grid-template-areas: "calls calls" "sum live" "sum log"; }
  .vx-calls span { display: block; }
  .vx-sum { gap: var(--space-5); padding: var(--space-6); border-block: 0; border-inline-end: 1px solid var(--tool-line); }
  .vx-f > div { grid-template-columns: 104px minmax(0, 1fr); padding-block: var(--space-3); }
  .vx-fold { display: none; }
  .vx-lines, .vx[data-open] .vx-lines { flex: 1 1 0; block-size: auto; overflow-y: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .vx-f dd.new .vx-v, .vx-live-dot { animation: none; }
  .vx-knob, .vx-fold svg, .vx-ticks i, .vx-calls button { transition: none; }
}