/* ═══════════════════════════════════════════════════════════════════════════ LIVE TRANSCRIPT — the right column of the Call Information window FEATURE lt-2 · 2026-09-18 · MACE · lt-5 DUAL CHANNEL · 2026-09-22 lt-5 — NO LAYOUT SHIFT BY CONSTRUCTION. Three rules carry it: 1. interim words live in the caption bar (.lt-live), whose rows have a FIXED height — speech never changes the size of anything; 2. the status line is ALWAYS present at a fixed height — it never shows or hides, so it never shoves the feed; 3. the settings popover is absolutely positioned over the feed. The feed itself only ever appends, or grows its LAST bubble. NAMESPACE: every rule is .lt-* or #lt-*, plus one scoped modifier on #ci-float-window (.lt-collapsed). Nothing here restyles an existing Call Information class, so the left column behaves exactly as it always did. WHERE THE GEOMETRY LIVES: NOT HERE. `.ci-fw-split`'s two-column grid, the window widths and the collapse behaviour are in main_studio.css, which loads EAGERLY with the static markup. lt-1 put them in this lazy sheet and forgot to bump main_studio.css's ?v= — the browser served old bytes, the grid never existed, and the pane stacked underneath the form. That was the reported bug. One source per rule: do not restate the widths or the grid here. LOAD ORDER: inserted by studio_loader.js BEFORE the #ss-lazy-css-anchor meta, so enterprise_theme.css remains the LAST studio stylesheet. Appending to instead would invert the cascade and re-skin the app. INK IS A PAIRED TOKEN OF ITS FILL, AND THE FILL DIFFERS PER RAMP. Every coloured surface states both halves, and the light ramp restates every ink because the same green that reads on #0d1117 fails on white. Ratios in the comments are MEASURED against the composited fill, not against the page. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Local tokens. Re-pointing these re-skins the whole pane. ───────────── */ .lt-pane { --lt-bg: rgba(1, 4, 9, .55); --lt-line: rgba(255, 255, 255, .07); --lt-text: var(--ss-text, #d0d8e4); --lt-muted: var(--ss-muted, #8b949e); --lt-green: #3fb950; --lt-green-hi: #56d364; /* the "bright green" accent MACE specified */ --lt-green-dim: rgba(63, 185, 80, .14); --lt-bubble: rgba(255, 255, 255, .035); --lt-bubble-2: rgba(63, 185, 80, .055); --lt-warn: #d29922; --lt-danger: #f85149; --lt-mono: var(--ss-mono, 'JetBrains Mono', 'Courier New', monospace); /* lt-5 speaker ramps. Agent = blue, caller = the transcript green. */ --lt-agent: #79b8ff; /* 8.9:1 on the composited agent bubble */ --lt-agent-bubble: rgba(88, 166, 255, .085); --lt-agent-line: rgba(88, 166, 255, .22); --lt-caller: #56d364; --lt-caller-bubble: rgba(63, 185, 80, .07); --lt-caller-line: rgba(63, 185, 80, .2); --lt-pop: #11161d; /* the popover must be OPAQUE — it sits over text */ } /* ═══════════════════════════════════════════════════════════════════════════ 1 · PANE SHELL (glassmorphism — `display:flex` comes from main_studio.css) ═══════════════════════════════════════════════════════════════════════════ */ .lt-pane { flex-direction: column; position: relative; /* the settings popover anchors here */ min-width: 0; /* MEASURED (real Chrome, lt-5 E2E): the transcript's growing content used to grow the whole Call Information window — the footer crept down 64 px as a call began. The feed is now size-contained (it can never push), and the pane claims its working height at OPEN instead. The calc keeps the window inside its own max-height (header + footer ≈ 124 px) on short screens. */ min-height: min(500px, calc(84vh - 140px)); border-left: 1px solid var(--lt-line); background: radial-gradient(120% 70% at 100% 0%, rgba(63, 185, 80, .07), transparent 60%), var(--lt-bg); backdrop-filter: blur(16px) saturate(130%); -webkit-backdrop-filter: blur(16px) saturate(130%); /* THE PANE MUST OWN ITS INK. Re-pointing --lt-text for the light ramp reaches only the rules that ASK for it; without this line every element that sets no `color` of its own inherits the studio SHELL's ink, which is authored for dark. That put #d0d8e4 on #f6f8fa at 1.35:1 — invisible when reading the stylesheet, caught only by the harness sweep. */ color: var(--lt-text); } /* ═══════════════════════════════════════════════════════════════════════════ 2 · HEADER ═══════════════════════════════════════════════════════════════════════════ */ .lt-head { flex-shrink: 0; padding: 11px 14px 9px; border-bottom: 1px solid var(--lt-line); background: linear-gradient(180deg, rgba(255, 255, 255, .045), transparent); } .lt-head-main { display: flex; align-items: flex-start; gap: 10px; } .lt-head-ico { width: 28px; height: 28px; border-radius: 9px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--lt-green-dim); border: 1px solid rgba(63, 185, 80, .32); color: var(--lt-green-hi); font-size: 12px; } .lt-pane[data-state="live"] .lt-head-ico { animation: ltPulse 1.7s ease-in-out infinite; } @keyframes ltPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(63, 185, 80, .38); } 50% { box-shadow: 0 0 0 6px rgba(63, 185, 80, 0); } } /* An agent who asked for less motion still needs the state — the ring becomes static rather than disappearing. */ @media (prefers-reduced-motion: reduce) { .lt-pane[data-state="live"] .lt-head-ico { animation: none; box-shadow: 0 0 0 3px rgba(63, 185, 80, .26); } } .lt-head-text { min-width: 0; flex: 1; } .lt-title { font-size: 11px; font-weight: 900; letter-spacing: .09em; color: var(--lt-text); text-transform: uppercase; display: flex; align-items: center; gap: 7px; line-height: 1.25; flex-wrap: wrap; } /* .lt-badge-ai ("AI-POWERED") was removed with the meter (cnx-1). The engine line under the title already says which recogniser is running and whether it is on-device or cloud, which is the part an agent can act on. */ /* The honesty chip. One microphone is one stream, so no line carries a speaker label — this says why, where someone reading the transcript will see it. */ .lt-badge-mono { font-size: 7.5px; font-weight: 800; letter-spacing: .06em; padding: 2px 6px; border-radius: 9px; background: rgba(255, 255, 255, .06); border: 1px solid var(--lt-line); color: var(--lt-muted); white-space: nowrap; cursor: help; } /* lt-5: the chip reports what is ACTUALLY captured — two wires, one, or a script. */ .lt-badge-mono[data-mode="dual"] { background: var(--lt-green-dim); border-color: rgba(63, 185, 80, .34); color: var(--lt-green-hi); } .lt-badge-mono[data-mode="sim"] { background: rgba(162, 93, 220, .14); border-color: rgba(162, 93, 220, .34); color: #c9a4f0; /* 7.6:1 on the composited tint */ } .lt-model { font-size: 9.5px; color: var(--lt-muted); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lt-model b { color: var(--lt-text); font-weight: 700; } /* Always rendered (lt-5) — toggling it changed the header height. One line, ellipsised, so a long two-channel summary can never wrap the header taller. */ .lt-engine { display: inline-block; margin-top: 4px; max-width: 100%; font-size: 8.5px; font-weight: 800; letter-spacing: .05em; padding: 2px 7px; border-radius: 8px; background: rgba(255, 255, 255, .05); border: 1px solid var(--lt-line); color: var(--lt-muted); cursor: help; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: top; box-sizing: border-box; } .lt-head-btn { width: 24px; height: 24px; border-radius: 7px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .05); border: 1px solid var(--lt-line); color: var(--lt-muted); cursor: pointer; font-size: 10px; transition: background .14s, color .14s; } .lt-head-btn:hover { background: rgba(255, 255, 255, .1); color: var(--lt-text); } .lt-head-btn[aria-expanded="true"] { background: var(--lt-green-dim); color: var(--lt-green-hi); border-color: rgba(63, 185, 80, .34); } .lt-head-btn:focus-visible { outline: 2px solid var(--lt-green-hi); outline-offset: 1px; } /* The CONFIDENCE METER was removed (cnx-1, 2026-09-23, MACE): a score the agent could not act on, sitting where the transcript should start. Its rules are gone rather than hidden — a hidden rule is a rule that comes back. The per-channel level meters (.lt-lvl-*) are the signal that stayed, because "is this wire carrying audio" is actionable. */ /* ═══════════════════════════════════════════════════════════════════════════ 3 · STATUS STRIP — one line, always truthful about the engine ═══════════════════════════════════════════════════════════════════════════ */ /* FIXED HEIGHT, ONE LINE, ALWAYS SHOWN. A notice that appeared and vanished would push the whole feed down and back up. The full text is in `title` territory for the rare long message; the line itself ellipsises. */ .lt-status { flex-shrink: 0; position: relative; box-sizing: border-box; height: 26px; padding: 0 14px 0 27px; font-size: 10px; line-height: 26px; border-bottom: 1px solid var(--lt-line); color: var(--lt-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lt-status::before { content: ''; position: absolute; left: 14px; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .lt-status[data-tone="live"] { color: var(--lt-green-hi); } .lt-status[data-tone="busy"] { color: #58a6ff; } .lt-status[data-tone="warn"] { color: var(--lt-warn); } .lt-status[data-tone="error"] { color: var(--lt-danger); } .lt-status[data-tone="ok"] { color: var(--lt-green-hi); } .lt-status[data-tone="sim"] { color: #a25ddc; } .lt-status[data-tone="busy"]::before, .lt-status[data-tone="live"]::before { animation: ltBlink 1.2s ease-in-out infinite; } @keyframes ltBlink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } } @media (prefers-reduced-motion: reduce) { .lt-status[data-tone="busy"]::before, .lt-status[data-tone="live"]::before { animation: none; } } /* ═══════════════════════════════════════════════════════════════════════════ 4 · FEED — conversational turn bubbles ═══════════════════════════════════════════════════════════════════════════ */ .lt-feed { flex: 1; min-height: 0; /* the other half of the scroll contract */ contain: size layout; /* its content can NEVER resize the pane or the window */ overflow-y: auto; overflow-x: hidden; padding: 12px 12px 16px; scroll-behavior: smooth; /* Native scrollbars paint from color-scheme, not from CSS — declare it or a dark pane gets a light scrollbar in some browsers. */ color-scheme: dark; } @media (prefers-reduced-motion: reduce) { .lt-feed { scroll-behavior: auto; } } .lt-feed::-webkit-scrollbar { width: 8px; } .lt-feed::-webkit-scrollbar-track { background: transparent; } .lt-feed::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .12); border-radius: 4px; } .lt-feed::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .2); } .lt-turn { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 8px; animation: ltIn .2s ease; } @keyframes ltIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .lt-turn { animation: none; } } .lt-time { flex-shrink: 0; font: 600 10px var(--lt-mono); color: var(--lt-muted); padding-top: 8px; min-width: 34px; font-variant-numeric: tabular-nums; /* stops the column jittering */ } .lt-bubble { flex: 1; min-width: 0; padding: 8px 11px; border-radius: 12px 12px 12px 4px; background: var(--lt-bubble); border: 1px solid var(--lt-line); font-size: 12.5px; line-height: 1.55; word-break: break-word; position: relative; } /* ALTERNATING TINT IS VISUAL RHYTHM ONLY — and only for an unlabelled single stream (`turn`). It makes a long mic-only transcript readable as a conversation; it does NOT claim two speakers, because one microphone cannot know that. Labelled lines get their colour from their WIRE instead. */ .lt-turn[data-speaker="turn"][data-alt="1"] .lt-bubble { background: var(--lt-bubble-2); border-color: rgba(63, 185, 80, .14); } /* ── lt-5 · two speakers, from two wires ──────────────────────────────────── BOTH speakers are LEFT-ANCHORED; the agent's bubble is indented and blue, the caller's green. Not the chat-app right/left split — MEASURED in real Chrome: a right-aligned bubble that grows moves its LEFT edge, and that is a layout shift by definition (it was -198 px). Anchored left, the last bubble only grows rightward and downward, which moves nothing. The time column stays one straight column for both speakers. */ .lt-turn[data-speaker="agent"] .lt-bubble, .lt-turn[data-speaker="caller"] .lt-bubble { flex: 0 1 auto; max-width: calc(100% - 46px); } .lt-turn[data-speaker="agent"] .lt-bubble { margin-left: 22px; max-width: calc(100% - 68px); border-radius: 12px 12px 12px 4px; background: var(--lt-agent-bubble); border-color: var(--lt-agent-line); } .lt-turn[data-speaker="caller"] .lt-bubble { background: var(--lt-caller-bubble); border-color: var(--lt-caller-line); } /* The speaker chip. Printed only when the line's WIRE says who spoke; a single-stream `turn` never creates the element at all. */ .lt-who { display: inline-block; margin-right: 2px; font-weight: 900; font-size: 8.5px; letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; color: var(--lt-green-hi); vertical-align: 1px; } .lt-turn[data-speaker="agent"] .lt-who { color: var(--lt-agent); } .lt-turn[data-speaker="caller"] .lt-who { color: var(--lt-caller); } .lt-text { display: inline; } .lt-turnconf { float: right; margin-left: 8px; font: 700 8.5px var(--lt-mono); color: var(--lt-muted); opacity: 0; transition: opacity .15s; font-variant-numeric: tabular-nums; } .lt-turn:hover .lt-turnconf { opacity: 1; } .lt-turnconf[data-tone="mid"] { color: var(--lt-warn); opacity: 1; } .lt-turnconf[data-tone="low"] { color: var(--lt-danger); opacity: 1; } /* ── Keyword highlighting — the bright green MACE asked for ─────────────── */ .lt-kw { font-weight: 700; color: var(--lt-green-hi); /* #56d364 on #0d1117 = 9.8:1 */ background: rgba(63, 185, 80, .13); border-radius: 4px; padding: 0 3px; cursor: pointer; border-bottom: 1px dashed rgba(86, 211, 100, .45); transition: background .13s, color .13s; } .lt-kw:hover, .lt-kw:focus-visible { background: rgba(63, 185, 80, .26); color: #7ee787; outline: none; } .lt-kw:focus-visible { box-shadow: 0 0 0 2px rgba(86, 211, 100, .5); } .lt-kw.is-used { border-bottom-style: solid; opacity: .75; } /* A digit string is read digit by digit; a proportional font makes that harder than it needs to be. */ .lt-kw[data-kw="case"], .lt-kw[data-kw="phone"] { font-family: var(--lt-mono); font-size: 11.5px; } /* ── Null / empty states ────────────────────────────────────────────────── */ .lt-empty { padding: 36px 18px; text-align: center; color: var(--lt-muted); } .lt-empty-t { font-size: 12px; font-weight: 700; color: var(--lt-text); margin-bottom: 6px; } .lt-empty-d { font-size: 10.5px; line-height: 1.6; } .lt-pane[data-state="live"] .lt-empty-t::after { content: ''; display: inline-block; width: 5px; height: 5px; margin-left: 7px; border-radius: 50%; background: var(--lt-green-hi); animation: ltBlink 1.1s ease-in-out infinite; vertical-align: middle; } @media (prefers-reduced-motion: reduce) { .lt-pane[data-state="live"] .lt-empty-t::after { animation: none; } } /* ═══════════════════════════════════════════════════════════════════════════ 4b · LIVE CAPTION BAR (lt-5) — one row per wire, FIXED height Each row's text box is exactly two lines tall and bottom-aligned, so the newest words are always the ones in view and a long sentence scrolls UP out of the box instead of growing it. Nothing here can change size, which is why interim speech causes zero layout shift in the feed above. ═══════════════════════════════════════════════════════════════════════════ */ .lt-live { flex-shrink: 0; display: flex; flex-direction: column; gap: 4px; padding: 7px 10px 8px; border-top: 1px solid var(--lt-line); background: rgba(0, 0, 0, .18); } /* Flex, not grid: the only grid in this feature is .ci-fw-split, and it is declared once, in main_studio.css. */ .lt-live-row { display: flex; gap: 8px; align-items: center; height: 40px; padding: 0 8px; border-radius: 9px; border: 1px solid var(--lt-line); background: rgba(255, 255, 255, .025); box-sizing: border-box; contain: layout paint; /* a row's repaint can never reach the feed */ } .lt-live-row[data-channel="agent"][data-speaking="1"] { border-color: var(--lt-agent-line); } .lt-live-row[data-channel="caller"][data-speaking="1"] { border-color: var(--lt-caller-line); } /* Two FIXED lines: the chip, then meter + engine (+ Connect). The chip text changing ("Mic" → "Agent") pushed the meter sideways in a shared line — measured — so they no longer share one. */ .lt-live-who { flex: 0 0 100px; display: flex; flex-direction: column; justify-content: center; gap: 3px; min-width: 0; height: 36px; overflow: hidden; } .lt-live-sub { display: flex; align-items: center; gap: 6px; min-width: 0; height: 15px; } .lt-live-chip { font-size: 8.5px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; line-height: 14px; } .lt-live-row[data-channel="agent"] .lt-live-chip { color: var(--lt-agent); } .lt-live-row[data-channel="caller"] .lt-live-chip { color: var(--lt-caller); } .lt-live-chip i { font-size: 9px; margin-right: 2px; } /* The level meter is a TRANSFORM — the compositor animates it, layout never runs. */ .lt-live-meter { display: inline-block; width: 38px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .09); overflow: hidden; } .lt-live-meter-fill { display: block; width: 100%; height: 100%; transform-origin: left center; transform: scaleX(0); transition: transform 80ms linear; will-change: transform; } .lt-live-row[data-channel="agent"] .lt-live-meter-fill { background: var(--lt-agent); } .lt-live-row[data-channel="caller"] .lt-live-meter-fill { background: var(--lt-caller); } @media (prefers-reduced-motion: reduce) { .lt-live-meter-fill { transition: none; } } .lt-live-mode { font-size: 8px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--lt-muted); white-space: nowrap; } .lt-live-connect { /* Longhands on purpose: a font shorthand whose family is the inherit keyword is INVALID, and the browser drops the whole declaration. */ font-family: inherit; font-weight: 800; font-size: 8.5px; line-height: 1; letter-spacing: .05em; text-transform: uppercase; padding: 3px 7px; border-radius: 6px; cursor: pointer; background: var(--lt-green-dim); border: 1px solid rgba(63, 185, 80, .4); color: var(--lt-green-hi); /* 8.2:1 on its composited tint */ white-space: nowrap; } .lt-live-connect:hover:not(:disabled) { background: rgba(63, 185, 80, .24); } .lt-live-connect:disabled { opacity: .5; cursor: progress; } .lt-live-connect:focus-visible { outline: 2px solid var(--lt-green-hi); outline-offset: 1px; } .lt-live-text { flex: 1 1 auto; min-width: 0; height: 36px; /* exactly two lines — never more, never less */ overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; font-size: 12px; line-height: 18px; color: var(--lt-text); word-break: break-word; } /* Empty = the placeholder, drawn from data-ph so the row keeps its height. */ .lt-live-text:empty::before { content: attr(data-ph); color: var(--lt-muted); font-style: italic; font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lt-live-row[data-state="off"] .lt-live-meter, .lt-live-row[data-state="ended"] .lt-live-meter, .lt-live-row[data-state="idle"] .lt-live-meter { opacity: .45; } /* ═══════════════════════════════════════════════════════════════════════════ 4c · SETTINGS POPOVER — over the feed, so opening it moves nothing ═══════════════════════════════════════════════════════════════════════════ */ /* `hidden` is a REQUEST that an author `display` rule silently overrides, so this sheet never sets display on the closed state — and pins it shut. */ .lt-settings[hidden] { display: none !important; } .lt-settings { position: absolute; top: 58px; right: 10px; z-index: 6; width: min(270px, calc(100% - 20px)); padding: 11px 12px 12px; border-radius: 12px; background: var(--lt-pop); border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 18px 44px rgba(0, 0, 0, .55); color: var(--lt-text); color-scheme: dark; /* native