/* ══ THE MODEL PAGES ═══════════════════════════════════════════════════════
 * Text to Speech, Speech to Text and Language Model — the second pillar, sold
 * on their own. The test panel stays beside them, as it does on every page.
 *
 * Drawn in the same language as Agent Studio: a large title, grouped white
 * cards, segmented controls with a raised thumb, capsule chips, sentence-case
 * labels in the system face. Mono is kept for what is code or a number that
 * lines up — never for a label. Old colours throughout: ink for actions, the
 * brand green only where it already meant "measured, live". */

/* ── the frame: title, what the model is, three tabs ──────────────────── */
.model-page { container-type: inline-size; }
.model-page [hidden] { display: none !important; }
.model-view #content .view-head { margin: 6px 0 18px; }
.model-view #content .view-head h1 { margin: 0 0 6px; font: 700 30px/1.15 var(--sans); letter-spacing: -0.028em; }
.model-view #content .view-head p { max-width: 64ch; font-size: 14px; line-height: 1.5; color: var(--c-ink-3); }

/* ── cards and their furniture ─────────────────────────────────────────── */
.model-view #content .card { padding: 20px 22px; border: 0; border-radius: var(--ui-r-card); box-shadow: var(--ui-card); }
.model-view #content .tts-grid { gap: 16px; }
.model-view #content .card h3 { font-size: 15px; font-weight: 600; letter-spacing: -0.012em; }
.model-view #content .dev-cardhead { align-items: center; gap: 12px; }
/* What a card is about, as a quiet capsule beside its title. */
.model-view #content .dev-ws { padding: 4px 9px; border-radius: 999px; background: var(--ui-fill-2);
  font: 500 11.5px/1.2 var(--sans); color: var(--c-ink-3); white-space: nowrap; user-select: text; }
.model-view #content .dev-help { font-size: 13px; line-height: 1.55; }
.model-view #content label, .model-view #content .tts-stepheading { font-size: 13px; font-weight: 600; letter-spacing: -0.006em;
  text-transform: none; line-height: 1.3; color: var(--c-ink); }
.model-view #content textarea, .model-view #content select, .model-view #content input[type=text] { border-color: var(--ui-edge);
  border-radius: var(--ui-r-control); }
.model-view #content :is(textarea, select, input[type=text]):focus { outline: none; border-color: rgba(27, 26, 22, 0.34);
  box-shadow: var(--ui-ring); }
.model-view #content button:not(.ghost):not(.chip):not(.seg-btn):not(.howtab):not(.use-r):not(.dev-copy):not(.k-act):not(.tts-playbtn):not(.sc-play) {
  min-height: 34px; padding: 8px 16px; font-size: 13px; font-weight: 600; }
.model-view #content button.ghost { min-height: 32px; padding: 6px 12px; border: 0; background: var(--ui-fill-2);
  color: var(--c-ink); font-size: 12.5px; font-weight: 500; }
.model-view #content button.ghost:hover { background: var(--ui-fill-3); color: var(--c-ink); }
/* Pop-up buttons: a raised face and the double chevron. */
.model-view #content select { appearance: none; -webkit-appearance: none; min-height: 34px; padding: 6px 30px 6px 11px;
  border: 0; background-color: var(--c-surface); box-shadow: var(--ui-raise); font-size: 13px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='12' viewBox='0 0 8 12'%3E%3Cpath d='M1 4.5 4 1.5l3 3M1 7.5l3 3 3-3' fill='none' stroke='%236f6c65' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; background-size: 8px 12px; }
.model-view #content .chip { padding: 6px 12px; border: 0; border-radius: 999px; background: var(--ui-fill-2);
  color: var(--c-ink-2); font-size: 12.5px; font-weight: 500; line-height: 1.2; }
.model-view #content .chip:hover { background: var(--ui-fill-3); color: var(--c-ink); }
.model-view #content .tts-pills { gap: 6px; }
.model-view #content .dev-docs { font-size: 13px; }
.model-view #content details > summary { cursor: pointer; font-size: 12.5px; color: var(--c-ink-3); }
.model-view #content details > summary:hover { color: var(--c-ink); }

/* ── segmented controls ────────────────────────────────────────────────────
 * The clone-and-clip control (tts.js) keeps its one moving shape; it is now a
 * white rounded thumb on a tinted track rather than a white half of a box. */
.seg { padding: 2px; border: 0; border-radius: 9px; background: var(--ui-fill); overflow: hidden; }
.seg-on { inset: 2px; }
.seg-btn { min-height: 30px; padding: 5px 12px; border-radius: 7px; font: 500 13px/1.2 var(--sans); letter-spacing: -0.006em;
  color: var(--c-ink-2); }
.seg-on .seg-btn { background: var(--c-surface); font-weight: 500; }
.seg-btn:focus-visible { outline: 2px solid var(--c-ink); outline-offset: -2px; }
.seg-beta { font: 600 9.5px/1 var(--sans); letter-spacing: 0.02em; padding: 2px 5px; border-radius: 999px;
  border: 0; text-transform: none; }
/* Playground / Logs / API sizes to its words, like any toolbar control, and
   sits in the same place on all three pages. The columns stay equal (the clip
   moves by index / count); inline-block lets the widest word set the width. */
.model-view #content .model-tabs { display: inline-block; margin: 0 0 18px; }
.model-view #content .model-tabs .seg-btn { min-width: 100px; min-height: 30px; font-size: 13px; }
.model-view #content .tts-langbar { margin: 18px 0 12px; }
.model-view #content .tts-seg { display: inline-block; min-width: 0; }
.model-view #content .tts-seg .seg-btn { min-width: 96px; }
.model-view #content .howrow.qsrow { display: inline-grid; grid-template-columns: repeat(4, auto); margin: 14px 0; }
.model-view #content .qsrow .howtab { min-height: 30px; padding: 5px 16px; }
.model-view #content .qsrow .howtab b { font: 500 13px/1 var(--sans); }
.model-view #content .qsrow .howtab.on b { font-weight: 600; }

/* ── the playground bench ──────────────────────────────────────────────────
 * The thing being tried on the left, what shapes or explains it on the right —
 * when the page is wide enough to hold both at a readable width. Narrower,
 * they stack in the same order. */
.model-bench { display: flex; flex-direction: column; gap: 16px; }
@container (min-width: 900px) {
  .model-bench { display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
  .model-bench > .model-side { position: sticky; top: 16px; }
}
/* The request's parameters, in a toolbar over the input. */
.model-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 18px; margin: 0 0 16px; }
.model-view #content .model-field { display: flex; flex-direction: column; gap: 6px; margin: 0;
  font-size: 13px; font-weight: 400; }
.model-field-label { font: 600 12px/1.2 var(--sans); letter-spacing: 0; color: var(--c-ink-3); }
.model-view #content .model-toolbar select { min-width: 170px; }
.model-view #content .model-toolbar .tts-langbar { margin: 0; }
/* The bridge to the API: the exact request for what is on screen. */
.model-view #content .model-code { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--ui-sep); }
.model-view #content .model-code > summary { font-size: 13px; font-weight: 600; color: var(--c-ink); }
.model-view #content .model-code[open] > summary { margin-bottom: 10px; }
.model-view #content .model-code .dev-help { margin-top: 10px; }
.model-view #content .linkbtn { padding: 0; font-size: 13px; color: var(--c-ink); text-decoration: none; font-weight: 600; }
.model-view #content .linkbtn:hover { text-decoration: underline; text-underline-offset: 3px; }
.model-view #content .model-side .tts-voicelist { margin-top: 12px; }
.model-facts { display: grid; gap: 0; margin: 14px 0 4px; }
.model-facts > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding: 10px 0;
  border-top: 1px solid var(--ui-sep); font-size: 13px; }
.model-facts dt { color: var(--c-ink-3); }
.model-facts dd { margin: 0; color: var(--c-ink); }
/* Logs: a long preview is a line, not a paragraph. */
.model-reqtext { display: block; max-width: 200px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; vertical-align: bottom; }
@container (min-width: 900px) { .model-reqtext { max-width: 320px; } }
/* Tags sit under what they qualify, so a row never grows a column. */
.model-reqtable .tts-reqtag { display: block; width: fit-content; margin: 3px 0 0; }
.model-reqid { display: block; margin-top: 2px; font: 11px/1.3 var(--mono); color: var(--c-ink-3); }
.model-view #content .model-reqtable td, .model-view #content .model-reqtable th { padding-right: 10px; font-size: 12.5px; }
.model-view #content .tts-reqstate.is-cancelled { color: var(--c-ink-3); }

/* ── measured numbers ──────────────────────────────────────────────────────
 * A row of tiles on a tinted plate: the figure large and tabular, what it
 * measures under it. First audio / first token keeps the brand tone — it is
 * the number the page exists to show. */
.model-view #content .tts-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 0;
  margin-top: 14px; padding: 4px 0; border: 0; border-radius: var(--ui-r-card); background: var(--ui-fill-2); }
.model-view #content .tts-stats span { padding: 8px 14px; gap: 3px; }
.model-view #content .tts-stats span + span { box-shadow: inset 1px 0 var(--ui-sep); }
.model-view #content .tts-stats b { font: 600 17px/1.2 var(--sans); letter-spacing: -0.012em; font-variant-numeric: tabular-nums; }
.model-view #content .tts-stats i { font-size: 11.5px; line-height: 1.3; }

/* ── Text to Speech ────────────────────────────────────────────────────── */
.model-view #content .tts-inputlabel { margin-top: 16px; }
.model-view #content .tts-inputlabel span, .model-view #content .tts-outputhead { font: 500 12px/1.4 var(--sans);
  color: var(--c-ink-3); font-variant-numeric: tabular-nums; }
.model-view #content .tts-text { margin-top: 8px; padding: 12px 14px; font-size: 16px; line-height: 1.7; background: var(--c-surface); }
.model-view #content .tts-bar { gap: 10px; margin-top: 12px; }
.model-view #content .tts-hint { font-size: 12px; }
.model-view #content .tts-output { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--ui-sep); }
.model-view #content .tts-player { gap: 12px; margin: 10px 0 2px; }
/* The play button is the one filled circle on the card — the thing to press. */
.model-view #content .tts-playbtn { width: 38px; height: 38px; border: 0; background: var(--c-ink); color: var(--c-paper); }
.model-view #content .tts-playbtn:disabled { background: var(--ui-fill-3); color: var(--c-surface); opacity: 1; }
.model-view #content .tts-playbtn svg { width: 15px; height: 15px; }
.model-view #content .tts-seek { height: 56px; border-radius: 10px; background: #f3f1ec; }
.model-view #content #ttsempty { background: #f3f1ec; font-size: 12px; }
.model-view #content .tts-time { font: 500 12px/1.4 var(--sans); font-variant-numeric: tabular-nums; }
.model-view #content .tts-statsnote summary { font-size: 12px; }
/* Voices: a grouped list whose row is the radio. */
.model-view #content .tts-voicelist { margin-top: 14px; border-radius: var(--ui-r-card); box-shadow: 0 0 0 1px var(--ui-sep); overflow: hidden; }
.model-view #content .sc-item { padding: 12px 14px; }
.model-view #content .sc-item + .sc-item { border-top-color: var(--ui-sep); }
.model-view #content .sc-title { font-size: 13.5px; }
.model-view #content .sc-blurb { font-size: 12.5px; }
.model-view #content .sc-play { width: 32px; height: 32px; border-radius: 50%; }
/* Logs: the range as a segmented control, the ledger as a list. */
.model-view #content .use-range { gap: 0; padding: 2px; border-radius: 9px; background: var(--ui-fill); }
.model-view #content .use-r { min-height: 28px; padding: 4px 12px; border: 0; border-radius: 7px; background: none;
  color: var(--c-ink-2); font-size: 12.5px; font-weight: 500; }
.model-view #content .use-r.is-on { background: var(--c-surface); color: var(--c-ink); box-shadow: var(--ui-raise); }
.model-view #content .stm-scroll { margin-top: 14px; }
.model-view #content .stm-table th { padding-bottom: 8px; border-bottom: 1px solid var(--ui-sep); font-size: 12px; font-weight: 500;
  letter-spacing: 0; text-transform: none; color: var(--c-ink-3); }
.model-view #content .stm-table td { padding: 11px 12px 11px 0; border-bottom-color: var(--ui-sep); font-size: 13px; }
.model-view #content .stm-table :is(th, td).r { padding-right: 20px; }
.model-view #content .tts-reqtag { border: 0; border-radius: 999px; background: var(--ui-fill-2); font: 500 10.5px/1.3 var(--sans);
  letter-spacing: 0; text-transform: none; }
/* API: steps as disclosure rows, code in a dark window, downloads as rows. */
.model-view #content .tts-setupdetails { margin: 14px 0; padding: 0; border: 0; border-top: 1px solid var(--ui-sep); border-radius: 0; }
.model-view #content .tts-setupdetails > summary { padding: 13px 0; font-size: 13px; font-weight: 600; color: var(--c-ink); }
.model-view #content .tts-setupdetails[open] > summary { margin-bottom: 4px; }
.model-view #content .dev-cmd { border-radius: 10px; padding: 12px 14px; }
/* A request body can run to a hundred lines; the window scrolls, the page does not. */
.model-view #content .dev-cmd pre { max-height: 420px; overflow: auto; }
.model-view #content .dev-copy { border-radius: 6px; }
.model-view #content .dev-dl { margin-top: 8px; padding: 12px 14px; border: 0; border-radius: 10px; background: var(--ui-fill-2); }
.model-view #content .dev-dl:hover { background: var(--ui-fill-3); }
.model-view #content .tts-lang { border: 0; border-radius: 10px; background: var(--ui-fill-2); }
.model-view #content .tts-lang.on, .model-view #content .tts-lang.beta { background: var(--c-surface); box-shadow: 0 0 0 1px var(--ui-sep); }
.model-view #content .tts-soon { border-top-color: var(--ui-sep); }
.model-view #content .tts-soon b { font-size: 12px; letter-spacing: 0; text-transform: none; }
.model-view #content .tts-soon span { border: 0; border-radius: 999px; background: var(--ui-fill-2); padding: 5px 10px; }

/* ── Speech to Text ────────────────────────────────────────────────────── */
/* Realtime | Offline: which product you are on, edge to edge. The console's
 * "which page" switch (Billing, Developers), a size up from the Playground /
 * Logs / API strip under it, so the two never read as one control. */
.model-view #content .howrow.asr-modes { margin: 0 0 18px; }
.model-view #content .asr-modes .howtab { min-height: 44px; gap: 8px; padding: 8px 10px; font-size: 14px; }
.model-view #content .asr-modes .howtab svg { width: 16px; height: 16px; }
.model-view #content .asr-modes .howtab b { font-weight: 500; }
.model-view #content .asr-modes .howtab.on b { font-weight: 600; }
.model-view #content .asr-modesub { font-weight: 400; color: var(--c-ink-3); }
/* Offline is busy (half a ring) or has something new (a dot) behind Realtime. */
.model-view #content .asr-modebadge { box-sizing: border-box; flex: none; width: 8px; height: 8px; margin-left: 2px; border-radius: 50%; }
.model-view #content .asr-modebadge[data-state="busy"] { border: 1.5px solid var(--c-ink);
  background: linear-gradient(90deg, var(--c-ink) 50%, transparent 50%); }
.model-view #content .asr-modebadge[data-state="done"] { background: var(--c-ink); }
.model-view #content .asr-modes .howtab.on .asr-modebadge { display: none; }
/* Realtime: the record button and what it does, on one line. */
.model-view #content .asr-rec { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; }
.model-view #content .asr-rec .dev-help { flex: 1 1 260px; margin: 0; max-width: 52ch; }
/* Record carries the red dot every recorder has; it breathes while recording. */
.model-view #content #asrrecord { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; min-width: 0;
  padding: 8px 18px 8px 14px; border-radius: 999px; }
.model-view #content #asrrecord::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: #e0483e; }
.model-view #content #asrrecord.is-recording::before { border-radius: 2px; animation: asr-rec 1.4s ease-in-out infinite; }
@keyframes asr-rec { 50% { opacity: 0.45; } }
.model-view #content #asrrecord:disabled { opacity: 0.5; }
.model-view #content #asroutput { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--ui-sep); }
.model-view #content #asrstatus { font: 500 13px/1.4 var(--sans); color: var(--c-ink-2); }
.model-view #content #asroutput[data-state="error"] #asrstatus { color: var(--c-alarm-ink); }
.model-view #content #asrtimer { font: 500 12px/1.4 var(--sans); font-variant-numeric: tabular-nums; }
.model-view #content #asrprogress { height: 4px; margin: 10px 0 18px; border-radius: 999px; overflow: hidden; }
.model-view #content .asr-resulthead { margin-bottom: 8px; }
.model-view #content .asr-studio #asrtext { padding: 12px 14px; font-size: 16px; line-height: 1.7; background: var(--c-surface); }
.model-view #content .asr-request { font-size: 11.5px; }
.asr-tries { margin: 12px 0 0; padding: 0; list-style: none; }
.asr-tries li { padding: 12px 0; border-top: 1px solid var(--ui-sep); }
.asr-tries span { font: 600 11.5px/1.2 var(--sans); color: var(--c-ink-3); }
.asr-tries p { margin: 5px 0 0; font-size: 15px; line-height: 1.6; color: var(--c-ink); }
.model-view #content #asrlimits { margin: 12px 0 0; font-size: 12px; }
@media (prefers-reduced-motion: reduce) {
  .model-view #content #asrrecord.is-recording::before { animation: none; }
}

/* ── Language model ────────────────────────────────────────────────────── */
.model-view #content .llm-work { gap: 16px; }
.model-view #content .llm-chatcol { padding: 0; }
.model-view #content .llm-chat { gap: 14px; padding: 20px 22px; }
.model-view #content .llm-empty svg { width: 30px; height: 30px; color: var(--c-ink-4); }
.model-view #content .llm-empty b { font-size: 15px; color: var(--c-ink); }
.model-view #content .llm-empty span { font-size: 13px; }
.model-view #content .llm-who { font-size: 11.5px; letter-spacing: 0; text-transform: none; }
/* The customer's line is a bubble on the right; the model answers in the page. */
.model-view #content .llm-msg.user { padding: 9px 13px; border: 0; border-radius: 16px 16px 4px 16px; background: var(--ui-fill-2); }
.model-view #content .llm-body { font-size: 14px; line-height: 1.6; }
.model-view #content .llm-foot { padding: 12px 16px 16px; border-top-color: var(--ui-sep); background: transparent; }
.model-view #content .llm-foot .tts-stats { margin: 0 0 10px; }
.model-view #content .llm-foot .tts-stats b { font-size: 15px; }
.model-view #content .llm-note summary { font-size: 12px; }
/* The composer: one rounded field, its actions under it. */
.model-view #content .llm-input { padding: 11px 14px; border-radius: var(--ui-r-card); font-size: 14px; }
.model-view #content .llm-send { gap: 8px; margin-top: 10px; }
.model-view #content .llm-sidecard { padding: 16px 18px; }
/* Under the chat on a narrower page, the three settings cards stack in the
   order they are used — never a row of squeezed columns. */
.model-view #content .llm-side { flex-direction: column; align-items: stretch; }
.model-view #content .llm-side > * { flex: none; }
.model-view #content .llm-sidecard .model-code { margin: 0; padding: 0; border: 0; }
.model-view #content .llm-det summary b { font-size: 14px; }
.model-view #content .llm-det summary i { font-size: 12px; }
.model-view #content .llm-tools { gap: 8px; }
.model-view #content .llm-tool { border: 0; border-radius: 10px; background: var(--ui-fill-2); }
.model-view #content .llm-tool.on { background: var(--c-surface); box-shadow: 0 0 0 1px var(--ui-edge); }
.model-view #content .llm-below { margin-top: 16px; }

/* ── phone ─────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .model-view #content .view-head { margin: 8px 0 18px; }
  .model-view #content .view-head h1 { font-size: 28px; }
  .model-view #content .card:not(.llm-chatcol) { padding: 16px; }
  .model-view #content .llm-foot { padding: 10px 12px 14px; }
  .model-view #content .tts-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .model-view #content .tts-stats span + span { box-shadow: none; }
  .model-view #content .tts-stats b { font-size: 15px; }
  .model-view #content .model-tabs { display: block; }
  .model-view #content .asr-modes .howtab { padding: 8px 6px; font-size: 13.5px; }
  .model-view #content .asr-modes .howtab svg { display: none; }
  .model-view #content .model-tabs .seg-btn { min-width: 0; }
  .model-view #content .howrow.qsrow { display: grid; grid-template-columns: repeat(2, 1fr); }
  .model-view #content .tts-text, .model-view #content .asr-studio #asrtext, .model-view #content .llm-input,
  .model-view #content textarea, .model-view #content select { font-size: 16px; }
  .model-view #content .dev-ws { white-space: normal; }
}