.transcript-panel { margin: 1.1rem 0; border: 1px solid #cbbd9e; background: var(--paper); border-radius: 6px; overflow: hidden; }
.transcript-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; padding: .7rem .9rem; border-bottom: 1px solid #d8cdb6; font: .85rem/1.6 var(--sans); }
.transcript-follow, .transcript-retry { cursor: pointer; padding: .35rem .65rem; border: 1px solid #a58c43; border-radius: 4px; color: var(--ink); background: transparent; font: inherit; }
.transcript-follow[aria-pressed="true"] { background: var(--indigo); color: var(--paper); border-color: var(--indigo); }
.transcript-follow:disabled { opacity: .5; cursor: default; }
.transcript-scroll { height: 19rem; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: .5rem; position: relative; }
.transcript-cue { display: block; width: 100%; padding: .8rem .8rem .8rem 1rem; border: 0; border-left: 3px solid transparent; border-radius: 3px; color: var(--ink-soft); background: transparent; text-align: left; cursor: pointer; font: inherit; line-height: 1.8; overflow-wrap: anywhere; }
.transcript-cue:hover { background: var(--paper-dim); }
.transcript-cue[aria-current="true"] { border-left-color: var(--cinnabar); background: #eae1ca; color: var(--ink); }
.transcript-cue:focus-visible, .transcript-scroll:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.transcript-time { display: block; font: .75rem/1.7 var(--sans); color: var(--cinnabar); font-variant-numeric: tabular-nums; margin-bottom: .25rem; }
.transcript-en, .transcript-zh { display: block; }
.transcript-uncertain { display: block; color: var(--cinnabar); font: .72rem/1.7 var(--sans); }
html[data-lang="en"] .transcript-zh { font-size: .9em; color: var(--ink-soft); margin-top: .35rem; }
.chapter .transcript-status, .chapter .transcript-disclaimer { margin: 0; padding: .5rem .9rem; font: .75rem/1.7 var(--sans); color: var(--ink-soft); text-align: left; }
.transcript-retry { margin: .5rem .9rem; font: .85rem var(--sans); }
@media (max-width: 640px) { .transcript-scroll { height: 17rem; } .transcript-cue { padding: .65rem; } }
@media (prefers-reduced-motion: reduce) { .transcript-scroll { scroll-behavior: auto; } }