#app .debate-mode{max-width:980px;margin:0 auto;padding:12px 0 32px}
#app .debate-mode[hidden]{display:none}
#app .debate-intro{font-size:13px;color:#68705f;margin:0 0 12px;line-height:1.5}
#app .debate-picker{width:100%;max-width:580px;background:var(--ui-background,#fff);border-radius:10px}
#app .debate-topic{font-size:clamp(20px,3vw,30px);line-height:1.3;margin:24px 0 12px;max-width:850px}
#app .debate-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px;margin:12px 0 18px}
#app .debate-side{--debate-accent:#62932f;--debate-wash:#efffd4;min-width:0;padding:14px 16px 8px;border-top:3px solid var(--debate-accent)}
#app .debate-right{--debate-accent:#af5979;--debate-wash:#ffeaf1}
#app .debate-side-label{font-size:12px;font-weight:700;color:var(--debate-accent)}
#app .debate-avatar{padding-top:110px;min-width:0}
#app .debate-avatar .head-slot{width:100%;max-width:400px;min-height:0;margin:auto;padding:0;list-style:none}
#app .debate-avatar .head-drift{display:block;position:relative;flex:0 0 auto;width:100%;height:auto;aspect-ratio:1;max-width:380px;margin:auto}
#app .debate-avatar .persona-pose{display:block;position:relative;height:100%;width:100%}
#app .debate-avatar img{width:100%;height:100%;object-fit:contain}
#app .debate-avatar .speech-bubble{top:auto;bottom:calc(100% + 8px);left:0;width:100%;max-height:none;min-height:28px;background:var(--debate-wash);border-color:var(--debate-accent);font-size:14px;white-space:normal}
#app .debate-avatar .speech-bubble::before{background:var(--debate-wash);border-color:var(--debate-accent)}
#app .debate-controls{display:flex;flex-wrap:wrap;gap:9px;align-items:center}
#app .debate-controls button{min-height:44px;padding:9px 18px;border:1px solid #c3c8ba;border-radius:10px;color:inherit;background:var(--ui-background,#fff)}
#app .debate-controls .debate-play{background:#c8f68c}
#app .debate-seek{flex:1;min-width:140px;accent-color:#62932f}
#app .debate-status{min-height:20px;font-size:13px;color:#68705f}
@media(max-width:600px){#app .debate-stage{gap:10px}#app .debate-side{padding:10px 4px 4px}#app .debate-avatar{padding-top:92px}#app .debate-avatar .head-drift{max-width:260px}#app .debate-avatar .speech-bubble{font-size:12px;padding:6px}#app .debate-topic{margin-top:18px}#app .debate-seek{flex-basis:100%;width:100%}}

/* The cast stage uses the viewport, independent of the editor portrait limit. */
body.debate-cast-stage{margin:0;overflow:hidden}
body.debate-cast-stage #app>*:not(.debate-mode){display:none!important}
body.debate-cast-stage header,body.debate-cast-stage .wwmud-transport{display:none!important}
#app .debate-cast{position:fixed;inset:0;margin:0!important;padding:0!important;max-width:none!important;background:#fff;z-index:1000}
#app .debate-cast>.debate-intro,#app .debate-cast>.debate-picker,#app .debate-cast>.debate-status,#app .debate-cast>.debate-controls{display:none}
#app .debate-cast .debate-stage{height:100dvh;max-width:none;margin:0;align-items:center;gap:0}
#app .debate-cast .debate-side{border:0;background:transparent;padding:0;min-width:0}
#app .debate-cast .head-name,#app .debate-cast .head-controls{display:none}
#app .debate-cast .debate-avatar{height:70dvh;max-height:none}
#app .debate-cast .head-slot,#app .debate-cast .head-button{height:100%;width:100%;max-width:none}
#app .debate-cast .head-drift{width:min(46vw,55dvh)!important;height:min(46vw,55dvh)!important;max-width:100%}
#app .debate-cast .debate-enable{position:absolute;left:50%;bottom:10%;transform:translateX(-50%);z-index:5}
.debate-countdown{position:fixed;right:12px;bottom:8px;font-size:12px;opacity:.5}

#app .debate-cast .debate-topic{position:absolute;top:3dvh;left:8%;right:8%;text-align:center;font-size:clamp(18px,2.5vw,32px);z-index:2}#app .debate-cast .debate-side-label{display:block;font-size:clamp(14px,2vw,20px);margin-bottom:1rem}
#app .debate-cast .debate-avatar{height:auto;padding-top:100px}
#app .debate-cast .debate-side-label{text-align:center}
#app .debate-cast .head-slot,#app .debate-cast .head-button{height:auto}

/* Reactions are driven by the decoded clip's duration, not a guessed timeout. */
#app .debate-cast .debate-side{will-change:transform,opacity}
#app .debate-cast.debate-between-rounds .debate-stage{opacity:0}
#app .debate-cast.debate-exiting .debate-left{animation:debate-exit-left var(--debate-exit-duration,1s) cubic-bezier(.4,0,.9,.5) both}
#app .debate-cast.debate-exiting .debate-right{animation:debate-exit-right var(--debate-exit-duration,1s) cubic-bezier(.4,0,.9,.5) both}
#app .debate-cast.debate-entering .debate-left{animation:debate-enter-left .4s ease-out both}
#app .debate-cast.debate-entering .debate-right{animation:debate-enter-right .4s ease-out both}
#app .debate-cast.debate-motion-paused .debate-side{animation-play-state:paused}
#app .debate-cast .debate-winner .head-drift{filter:drop-shadow(0 0 20px #eebf4a66)}
#app .debate-cast .debate-winner .debate-side-label::after{content:none;color:#8b6211}
@keyframes debate-exit-left{0%,12%{transform:translateX(0) rotate(0)}100%{transform:translateX(-110vw) rotate(-16deg);opacity:.1}}
@keyframes debate-exit-right{0%,12%{transform:translateX(0) rotate(0)}100%{transform:translateX(110vw) rotate(16deg);opacity:.1}}
@keyframes debate-enter-left{from{transform:translateX(-60vw);opacity:0}to{transform:none;opacity:1}}
@keyframes debate-enter-right{from{transform:translateX(60vw);opacity:0}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){
 #app .debate-cast.debate-exiting .debate-side,#app .debate-cast.debate-entering .debate-side{animation:none;transform:none}
}

/* Two timed speaker lanes share one scale; individual transcript rows remain accessible. */
.conversation-timeline{display:block;width:100%;height:140px;overflow:visible}