/* ══════════════════════════════════════════════════════════════════════════════════════════
   THE TRANSCRIPT RAIL — was a phone mockup, now a plain panel in the system language.

   HISTORY. This sheet used to turn `#pn-call-transcript` (script-01.js, filled by V.transcript)
   into a HANDSET: a device object with a notch (`::before`) and a home-bar indicator (`::after`),
   rounded to 34px, bezel-padded. That is a device drawn inside a device — the call window is
   already the "device" (a Teams-style meeting takeover); putting a phone inside it read as a
   mockup, not a transcript. CEO launch-weekend audit named it directly: "a phone mockup frame
   around the transcript … a device drawn inside a device. Remove the handset entirely; the
   transcript becomes a plain panel in the system language."

   THE FIX. Same element, same id, same fill logic (`tr.innerHTML=V.transcript`, `tr.scrollTop=0`
   for newest-first — script-01.js, untouched). It is now a flat panel: pn-ds card ground, a
   hairline border, ds-r-card radius, no notch, no home bar, no bezel padding. The "LIVE
   TRANSCRIPT · NEWEST FIRST" caption stays exactly where GP-20 put it — a small mono caption
   ABOVE the panel, not overlapping the first message.

   SPECIFICITY: kept scoped `.pn-callroom .pn-rail-transcript` (2 classes) to match main's own
   `html body .pn-callroom .pn-rail-transcript{…!important}` pattern so "loads last" still
   decides the tie, same reasoning as before — only the DECLARATIONS changed, not the mechanism.

   TYPE LADDER (unchanged): Instrument Sans (IS) for the message body; JetBrains Mono for the
   sender label ONLY, never body copy.
   ══════════════════════════════════════════════════════════════════════════════════════════ */

/* the rail column holds ONE object, centred — matches main's .pn-callroom .pn-call-rail scope */
html body .pn-callroom .pn-call-rail{
  display: flex !important; flex-direction: column !important; align-items: stretch !important;
}
html body .pn-callroom .pn-rail-share{ width: 100% !important; order: 1 !important; }
/* main already sets .pn-rail-parts to display:none on phone (≤760px) — leave that call alone;
   only constrain its width above that breakpoint, where it's still visible. */
html body .pn-callroom .pn-rail-parts{ width: 100% !important; order: 2 !important; }

/* ── THE PANEL — a flat system object, not a handset ─────────────────────────────────────── */
html body .pn-callroom .pn-rail-transcript{
  order: 4 !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  max-width: none !important;
  margin: 4px 0 0 !important;
  min-height: 220px !important;
  display: flex !important; flex-direction: column !important;
  gap: 8px !important;
  padding: 14px 14px 12px !important;
  background: var(--ds-panel, #0b0f18) !important;
  border: 1px solid var(--ds-hair, rgba(255,255,255,.11)) !important;
  border-radius: var(--ds-r-card, 12px) !important;
  box-shadow: none !important;
  position: relative !important;
  overflow: hidden !important;
  overflow-y: auto !important;
  font-size: 13.5px !important;
  scroll-behavior: smooth !important;
}
/* main injects "LIVE TRANSCRIPT · NEWEST FIRST" as ::before content on this exact element —
   suppressed at matching specificity; the caption above the panel (below) carries the words. */
html body .pn-callroom .pn-rail-transcript::before{
  content: none !important;
}
html body .pn-callroom .pn-rail-transcript::after{
  content: none !important;
}
/* the caption sits above the panel, in the system's own eyebrow language — not a device label.
   Explicit `order` on every rail child (1/2/3/4 above and below) guarantees share → parts →
   caption → transcript regardless of DOM/pseudo generation order. */
html body .pn-callroom .pn-call-rail::after{
  content: 'LIVE TRANSCRIPT · NEWEST FIRST'; display: block; order: 3 !important;
  margin: 4px 0 0; font: 800 9.5px/1 var(--mono); letter-spacing: .22em;
  color: var(--pr-eyebrow, rgba(159,178,201,.9)); text-align: left;
}
/* the screen — everything above scrolls inside this well, never the bezel */
html body .pn-callroom .pn-rail-transcript > *{
  position: relative; z-index: 1;
}

/* messages — plain rows in the panel, newest at the top (JS already sets tr.scrollTop=0 on update) */
html body .pn-callroom .pn-tr-beat{
  font-family: 'IS','Instrument Sans',sans-serif !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
  line-height: 1.44 !important;
  color: rgba(240,244,251,.92) !important;
  background: var(--ds-panel-2, rgba(255,255,255,.05)) !important;
  border-left: 2px solid var(--ds-hair, rgba(255,255,255,.14)) !important;
  border-radius: 0 8px 8px 0 !important;
  padding: 9px 12px 10px !important;
  margin: 0 0 8px !important;
  max-width: 100% !important;
  box-shadow: none !important;
}
html body .pn-callroom .pn-tr-beat.beat-event{
  background: var(--ds-panel-2, rgba(255,255,255,.05)) !important;
  border-left-color: var(--ds-accent, #f97316) !important;
  border-radius: 0 8px 8px 0 !important;
}
html body .pn-callroom .pn-tr-beat.beat-warm,
html body .pn-callroom .pn-tr-beat.beat-open{
  border-left-color: var(--ds-good, #3FB950) !important;
}
html body .pn-callroom .pn-tr-beat.beat-cool{
  border-left-color: var(--ds-bad, #E5484D) !important;
}
html body .pn-callroom .pn-tr-beat.beat-swing{
  border-left-color: var(--ds-warn, #E8862C) !important;
  background: color-mix(in srgb, var(--ds-warn, #E8862C) 14%, var(--ds-panel-2, transparent)) !important;
}
/* speaker attribution — JetBrains Mono, label-only per the type ladder, never the message body */
html body .pn-callroom .pn-tr-beat b,
html body .pn-callroom .pn-tr-beat strong{
  font-family: 'JetBrains Mono',ui-monospace,monospace !important;
  font-weight: 700 !important;
  font-size: 9.5px !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: var(--accent,#f97316) !important;
  display: inline-block !important;
  margin-bottom: 2px !important;
}
html body .pn-callroom .pn-tr-empty{
  font-family: 'IS','Instrument Sans',sans-serif !important;
  font-size: 13px !important;
  color: rgba(240,244,251,.4) !important;
  text-align: center !important;
  margin: auto !important;
  padding: 20px 10px !important;
}

@media (max-width: 760px){
  html body .pn-callroom .pn-rail-transcript{
    width: 100% !important; max-width: none !important;
    padding: 12px 12px 10px !important; border-radius: var(--ds-r-card, 12px) !important;
    min-height: 190px !important;
  }
}

/* ── THE FLOATING REACTION CUT-IN (pn-pitch2.js .pnp2-cutin) — hidden outright inside THE ROOM,
   not just repositioned. Its own JS guard (pn-pitch2.js cutIn(), line ~782) already refuses to
   CREATE a new cut-in while `.pn-callroom` is open, with a reason stated in its own comment:
   "the live pitch is now a full Teams-call modal whose HERO tile IS the reacting client — a
   second corner cut-in would double the client... the hero feed carries the reaction." That is
   the correct call. What the JS guard cannot do is retract a cut-in that was ALREADY on screen
   the instant before the call mounted — it plays out its own ~3.2s lifetime regardless, and at
   its default size (min(300px,72vw), bottom-right) there is not enough free space below THE
   ROOM's panel to reposition it into without still clipping either the panel or the dock. So
   this enforces the JS guard's own stated reasoning at the CSS layer, immediately, rather than
   waiting out the stray one's fade. */
body:has(.pn-callroom) .pnp2-cutin{
  display: none !important;
}

@media (prefers-reduced-motion: reduce){
  html body .pn-callroom .pn-rail-transcript{ scroll-behavior: auto !important; }
}