/* Persistent smart-display artwork is the primary content. Controls live in a
   shallow top margin; a single dialogue line sits below, never over the UI. */
.speech-playback{margin:28px 0 0;scroll-margin-top:24px;}
.playback-screen{position:relative;display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:14px;padding:42px 18px 16px;box-sizing:border-box;background:var(--ds-surface,#fff);border:0;border-radius:var(--ds-radius-stage,8px);box-shadow:var(--ds-stage-shadow,inset 0 0 0 1px #f2f2f2);}
.speech-playback .dialogue-window{position:relative;width:100%;min-width:0;padding:0;border:0;border-radius:5px;line-height:0;outline:none;}
.speech-playback .display-scene{display:block;width:100%;height:auto;aspect-ratio:1024 / 600;overflow:hidden;border-radius:5px;background:#090909;box-shadow:0 1px 4px #20283314;font-family:Arial,sans-serif;font-weight:400;}
.original.speech-article .playback-screen img{display:block;width:100%;max-width:none;height:auto;object-fit:contain;margin:0;border-radius:5px;box-shadow:0 1px 4px #20283314;}
/* Controls use the same ui-control atom as the component atlas. Geometry morph
   and restart spring live in ui-motion.js; they never own the playback clock. */

.activity-stroke{position:absolute;inset:-2px;width:calc(100% + 4px);height:calc(100% + 4px);pointer-events:none;overflow:visible;}
.activity-stroke rect{fill:none;stroke:var(--ds-accent,#8861ce);stroke-width:2;vector-effect:non-scaling-stroke;opacity:0;transition:opacity var(--ds-duration-outline,80ms) ease-out;}
.dialogue-active .activity-stroke rect,.dialogue-window:focus-visible .activity-stroke rect{opacity:1;}
.original.speech-article .turn-bubble{position:relative;align-self:start;width:fit-content;max-width:100%;box-sizing:border-box;margin:0;padding:10px 12px;border:0;border-radius:8px;background:#fff;color:#423354;font-size:12px;font-weight:460;line-height:20px;box-shadow:0 4px 20px #00000014,inset 0 0 0 1px #0000000f;pointer-events:none;}
.turn-bubble::before{content:'';position:absolute;top:-5px;left:calc(50% - 5px);width:8px;height:8px;transform:rotate(45deg);background:#fff;border-top:1px solid #e1dbe9;border-left:1px solid #e1dbe9;}
/* Two dialogue lines fit without a growing transcript or an empty footer. */
.playback-screen{grid-template-rows:auto 58px auto;}
.turn-bubble span{display:inline-block;white-space:pre-wrap;color:color-mix(in srgb,#423354 calc(var(--spoken,1) * 100%),#756a80);}

/* One compact, read-only timeline. The labels remain available before playback,
   and its fill is driven by the same clock as the display and spoken dialogue. */
.original.speech-article .interaction-timeline{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;width:100%;margin:0;padding:0;}
.original.speech-article .interaction-timeline li{position:relative;min-width:0;margin:0;padding:12px 0 0;font-size:11px;line-height:1.35;color:#74727b;}
.interaction-timeline li::before,.interaction-timeline li::after{content:'';position:absolute;left:0;right:0;top:0;height:2px;border-radius:1px;background:#dfdce5;}
.interaction-timeline li::after{background:#8861ce;transform:scaleX(var(--progress,0));transform-origin:left;}
.interaction-timeline strong{display:block;font-size:12px;font-weight:500;line-height:1.4;color:#514b5a;}
.interaction-timeline span{display:block;max-width:11em;margin-top:3px;text-wrap:balance;}
.interaction-timeline [data-state="current"] strong{color:#7849bb;}
.interaction-timeline [data-state="current"]::before{background:#d9cdea;}

@media(max-width:600px){.playback-screen{padding:40px 10px 12px;gap:12px;grid-template-rows:auto 50px auto;}.original.speech-article .turn-bubble{font-size:12px;max-width:100%;padding:6px 10px;}.original.speech-article .interaction-timeline{gap:5px;}.speech-playback[data-speech-demo="buy-time-full"] .interaction-timeline{grid-template-columns:.85fr 1.3fr 1fr 1fr .85fr;}.interaction-timeline strong{font-size:11px;}.original.speech-article .interaction-timeline li{font-size:10px;}}
@media(prefers-reduced-motion:reduce){.activity-stroke rect{transition:none;}}

/* Sound is an explicit opt-in. Only this necessary third control is added. */
.speech-playback .stage-control[data-sound]{right:42px;}
.speech-playback .stage-control[hidden],.speech-playback .playback-audio-error[hidden]{display:none;}
.stage-control .sound-waves{opacity:0;}
[data-audio="on"] .stage-control .sound-waves{opacity:1;}
[data-audio="on"] .stage-control .sound-off{opacity:0;}
.speech-playback [data-audio="on"] .stage-control[data-sound] svg{opacity:.65;}
.turn-bubble .turn-line{display:block;color:inherit;white-space:normal;}
.speech-playback .playback-audio-error{margin:8px 0 0;font-size:12px;line-height:1.5;color:#74636b;}