/* Live is a stage. Meeting is a centered configuration flow. */
:root[data-route=live] .studio-scene{padding-top:calc(var(--bar-h) + 18px)}
:root[data-route=live] .scene-head{display:flex;align-items:center;gap:22px;margin-bottom:16px}
:root[data-route=live] .scene-head .scene-idx{margin:0;color:var(--c-ice);white-space:nowrap}
:root[data-route=live] .scene-title{font-size:24px;line-height:1.2;margin:0}
:root[data-route=live] .scene-lede{display:none}
.workspace[data-mode=chat]{position:relative;display:block}
.workspace[data-mode=chat] .stage-panel{width:100%;background:radial-gradient(ellipse at 50% 45%,#15314b70,transparent 70%),#060911;border-color:#8be6ff28}
.workspace[data-mode=chat] .stage-panel>.panel-heading{height:42px;min-height:42px;padding:10px 20px;font-size:12px}
.workspace[data-mode=chat] .stage-toolbar{padding:8px 16px;border:0;position:absolute;left:0;right:0;top:0;z-index:5;pointer-events:none}
.workspace[data-mode=chat] .stage-toolbar>*{pointer-events:auto}
.workspace[data-mode=chat] .stage-toolbar button{background:#070b14c9;backdrop-filter:blur(10px);border-radius:5px;min-height:36px}
.workspace[data-mode=chat] .stage-viewer{position:relative;background:transparent}
.workspace[data-mode=chat] .stage-bed{height:calc(100svh - 275px);min-height:390px;padding:0;overflow:hidden}
.workspace[data-mode=chat] .stage-bed .stage{height:100%;width:min(100%,calc((100svh - 275px) * var(--stage-ratio,.66667)));min-height:0;max-width:100%;border:0;background:transparent}
.workspace[data-mode=chat] #avatar-video{object-fit:contain;object-position:center center;width:100%;height:100%}
.live-preview-avatar{display:none}
.workspace[data-mode=chat] .live-preview-avatar{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% center;mask-image:linear-gradient(0deg,transparent,#000 14%,#000 94%,transparent)}
.workspace[data-mode=chat] #studio-core,.workspace[data-mode=chat] .stage-empty .stage-tag{display:none}
.workspace[data-mode=chat] .stage-intro{left:22px;bottom:36px;background:linear-gradient(90deg,#060911c9,transparent);padding:12px 20px}
.workspace[data-mode=chat] .stage-intro h2{font-size:25px;line-height:1.15;max-width:18ch}
.workspace[data-mode=chat] .stage-intro .eyebrow{font-size:9px;color:var(--c-ice)}
.workspace[data-mode=chat] .stage-caption{left:20px;right:20px;bottom:12px;font-size:9px}
.workspace[data-mode=chat] .stage-display-note{text-align:center;padding:6px 12px;font-size:9px;min-height:25px}
.workspace[data-mode=chat] .stage-controls{padding:12px 18px;min-height:74px;gap:12px;justify-content:center;background:#080d17;border-top:1px solid #8be6ff20}
.workspace[data-mode=chat] .connection-info{margin-right:auto}.workspace[data-mode=chat] .connection-info small{font-size:10px}.workspace[data-mode=chat] .connection-info strong{font-size:12px}
.live-dock{display:none}.workspace[data-mode=chat] .live-dock{display:flex;gap:8px}
.workspace[data-mode=chat] .stage-controls button{min-height:44px;height:44px;padding:10px 18px;font-size:12px;white-space:nowrap}
.workspace[data-mode=chat] .live-dock button[aria-expanded=true]{border-color:var(--c-ice);color:var(--c-ice);background:#142635}
.workspace[data-mode=chat] .control-panel,.workspace[data-mode=chat] .conversation-panel{position:absolute;top:90px;bottom:75px;width:300px;z-index:8;background:#080e1bf5;border:1px solid #8be6ff44;border-radius:8px;box-shadow:0 20px 80px #0008;backdrop-filter:blur(18px);overflow:auto;max-height:none;min-height:0}
.workspace[data-mode=chat] .control-panel{left:14px;display:none}.workspace[data-mode=chat].settings-open .control-panel{display:block}
.workspace[data-mode=chat] .conversation-panel{right:14px;display:none}.workspace[data-mode=chat].conversation-open .conversation-panel{display:flex}
.workspace[data-mode=chat] .panel-heading{padding:16px 20px}
.workspace[data-mode=chat] .mode-panel{padding:16px 20px}.live-settings-intro{font-size:13px;color:var(--c-ice);margin:0 0 16px}
.workspace[data-mode=chat] .transcript{flex:1;min-height:80px;padding:18px}.workspace[data-mode=chat] .message-form{padding:12px;gap:8px}
.workspace[data-mode=chat] .voice-option{margin:14px 0}.workspace[data-mode=chat] .archive-consent{padding-bottom:14px}
.workspace[data-mode=chat] .stage-viewer:fullscreen .stage-bed{height:auto;min-height:0}.workspace[data-mode=chat] .stage-viewer:fullscreen .stage{width:100%;height:100%;max-width:none}
:root[data-route=live] #archive-status{margin:12px 0;font-size:10px}
:root[data-route=live] .studio-footer{margin-top:12px}:root[data-route=live] .studio-footer .secondary{min-height:36px;padding:6px 12px;font-size:10px}
/* Form-first composition; the connection animation becomes a secondary explanation. */
:root[data-route=meeting] .scene-head{text-align:center;max-width:850px;margin:0 auto 30px}
:root[data-route=meeting] .scene-title{font-size:clamp(32px,4vw,58px);line-height:1.12;margin:12px 0 16px}
:root[data-route=meeting] .scene-lede{font-size:14px;max-width:55ch;margin:auto}
:root[data-route=meeting] .scene-idx{color:var(--c-ice)}
.workspace[data-mode=meeting]{display:flex;flex-direction:column;width:min(100%,800px);margin:auto;gap:28px}
.workspace[data-mode=meeting] .control-panel{order:0;background:linear-gradient(135deg,#111a2ae8,#080c17f0);border:1px solid #8be6ff38;border-radius:12px;box-shadow:0 20px 80px #0004;overflow:hidden}
.workspace[data-mode=meeting] .control-panel>.panel-heading{padding:20px 30px;background:#8be6ff06;border-color:#8be6ff20}
.workspace[data-mode=meeting] .mode-panel{padding:0 30px 30px}
.meeting-welcome{display:flex;gap:24px;align-items:center;padding:24px 0 18px;border-bottom:1px solid #8be6ff18;margin-bottom:24px}
.meeting-welcome>img{width:112px;height:90px;object-fit:cover;object-position:75% 35%;border-radius:8px;border:1px solid #8be6ff33}
.meeting-welcome .micro{font-size:11px;color:var(--c-paper);margin-bottom:14px}.meeting-summary{display:flex;gap:8px;flex-wrap:wrap;margin:0}.meeting-summary span{font-size:10px;padding:5px 8px;border:1px solid #8be6ff25;border-radius:20px;color:var(--c-ice)}
#meeting-form{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;row-gap:20px}
#meeting-form .meeting-field,#meeting-form .choice-fieldset,#meeting-form .voice-option{margin:0}
#meeting-form .meeting-field:first-child{grid-column:1;grid-row:1}#meeting-form .meeting-language{grid-column:2;grid-row:1}
#meeting-form .meeting-url-field{grid-column:1/-1;grid-row:2}
#meeting-form .voice-option{align-items:flex-start;padding:18px;border:1px solid #8be6ff22;background:#05091166;border-radius:8px;gap:14px}
#meeting-form .voice-option small{font-size:11px;line-height:1.65}
#meeting-form .meeting-submit{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;padding-top:22px;border-top:1px solid #8be6ff20;margin:0}
#meeting-form .meeting-submit button{width:208px;flex:none}.meeting-submit p{max-width:32ch}
.workspace[data-mode=meeting] .meeting-visual{order:1;display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid #8be6ff1a;border-radius:10px;overflow:hidden;background:#0a101a80}
.workspace[data-mode=meeting] .meeting-stage{min-height:200px;height:200px;aspect-ratio:auto;border:0}.workspace[data-mode=meeting] .meeting-stage .stage-tag{font-size:8px;inset:auto 15px 10px}
.workspace[data-mode=meeting] .meeting-context{padding:25px;display:flex;flex-direction:column;justify-content:center;border:0;gap:12px}
.workspace[data-mode=meeting] .meeting-context .micro{color:var(--c-ice);font-size:9px}.workspace[data-mode=meeting] .meeting-context h3{font-size:26px;line-height:1.1}.workspace[data-mode=meeting] .meeting-context p{font-size:11px}.workspace[data-mode=meeting] .meeting-context p:first-of-type{display:none}
:root[data-route=meeting] #archive-status,:root[data-route=meeting] .studio-footer{max-width:800px;margin:20px auto}
/* Native controls retain semantics but share MIA's visual language. */
input:not([type=checkbox]):not([type=radio]):not([type=file]),textarea,select{border:1px solid #8be6ff36!important;border-radius:6px!important;background-color:#070d18!important;color:var(--c-paper);font-family:var(--f-text)!important;box-shadow:inset 0 1px 5px #0002}
input::placeholder,textarea::placeholder{color:#8795aa;opacity:1}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--c-ice);outline-offset:2px;border-color:var(--c-ice)!important}
select{appearance:none;padding-right:38px!important;background-image:linear-gradient(45deg,transparent 50%,#8be6ff 50%),linear-gradient(135deg,#8be6ff 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.voice-option input[type=checkbox]{appearance:none;width:40px;height:23px;min-width:40px;margin:0;border:1px solid #8be6ff44;border-radius:20px;background:radial-gradient(circle at 10px 50%,#a9b7c9 0 7px,transparent 8px),#192334;transition:background .2s,border-color .2s}
.voice-option input[type=checkbox]:checked{border-color:var(--c-acid);background:radial-gradient(circle at 28px 50%,#10202d 0 7px,transparent 8px),var(--c-acid)}
.voice-option input:disabled{opacity:.45}.voice-option input:focus-visible{outline:2px solid var(--c-ice);outline-offset:4px}
.segmented-control{border-radius:6px;background:#070d18;border-color:#8be6ff36}.segmented-control span{border-radius:3px}.segmented-control input:checked+span{background:#13303e;color:var(--c-ice)}
#send-message{border:0;border-radius:5px;background:var(--c-acid);color:var(--c-on-acid);width:48px;min-width:48px;min-height:48px}
@media(max-width:760px){
 :root[data-route=live] .studio-scene{padding-top:calc(var(--bar-h) + 16px)}:root[data-route=live] .scene-title{font-size:18px}:root[data-route=live] .scene-head{gap:12px}.scene-head .scene-idx{font-size:9px}
 .workspace[data-mode=chat] .stage-bed{height:calc(100svh - 285px);min-height:350px}.workspace[data-mode=chat] .stage-bed .stage{width:min(100%,calc((100svh - 285px)*var(--stage-ratio,.66667)))}
 .workspace[data-mode=chat] .stage-toolbar{padding:6px;gap:4px}.workspace[data-mode=chat] .stage-toolbar button{font-size:9px;padding:7px;min-height:32px}
 .workspace[data-mode=chat] .stage-intro{left:5px;bottom:35px;padding:8px}.workspace[data-mode=chat] .stage-intro h2{font-size:20px}.workspace[data-mode=chat] .stage-caption{left:12px;right:12px}
 .workspace[data-mode=chat] .stage-controls{flex-wrap:wrap;padding:12px;gap:10px}.workspace[data-mode=chat] .connection-info{width:100%;justify-content:center;margin:0}.workspace[data-mode=chat] .connection-info small{display:none}
 .workspace[data-mode=chat] .stage-controls .primary,.workspace[data-mode=chat] .stage-controls .stop{width:auto;flex:1}.workspace[data-mode=chat] .stage-controls button{font-size:10px;padding:10px 12px}.workspace[data-mode=chat] .live-dock{gap:6px}
 .workspace[data-mode=chat] .control-panel,.workspace[data-mode=chat] .conversation-panel{position:relative;inset:auto;width:100%;max-height:480px;margin-top:12px;box-shadow:none}.workspace[data-mode=chat].conversation-open .conversation-panel{height:360px}
 .workspace[data-mode=meeting] .control-panel>.panel-heading{padding:18px}.workspace[data-mode=meeting] .mode-panel{padding:0 18px 22px}.meeting-welcome{gap:14px}.meeting-welcome>img{width:76px;height:94px}.meeting-welcome .micro{line-height:1.6;font-size:9px}.meeting-summary{gap:5px}.meeting-summary span{font-size:8px;padding:4px 6px}
 #meeting-form{grid-template-columns:1fr;gap:20px}#meeting-form>*{grid-column:1!important;grid-row:auto!important}#meeting-form .meeting-submit{display:grid;gap:16px}#meeting-form .meeting-submit button{width:100%}
 .workspace[data-mode=meeting] .meeting-visual{grid-template-columns:1fr}.workspace[data-mode=meeting] .meeting-context{padding:18px}.workspace[data-mode=meeting] .meeting-context h3{font-size:24px}.workspace[data-mode=meeting] .meeting-stage{height:180px;min-height:180px}
}
.library-exports{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}.library-exports .secondary{font-size:12px;min-height:44px;padding:10px 16px}.local-backup-note{font-size:12px;color:var(--c-paper-3);line-height:1.7;margin:12px 0 24px}
.persona-tools input[type=checkbox]{appearance:none;width:20px;height:20px;border:1px solid #8be6ff55;border-radius:4px;background:#070d18;display:grid;place-items:center}.persona-tools input[type=checkbox]:checked{background:var(--c-acid);border-color:var(--c-acid)}.persona-tools input[type=checkbox]:checked::after{content:'✓';font-size:15px;color:var(--c-on-acid)}
/* Reserve the right column for conversation; the portrait keeps its own stage. */
.workspace[data-mode=chat]{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,27%);gap:22px;align-items:stretch}
.workspace[data-mode=chat] .stage-panel{min-width:0}
.stage-panel>.panel-heading{display:flex;align-items:center;gap:18px;flex-wrap:wrap;height:auto!important;min-height:56px!important;padding:10px 16px!important}
.stage-panel>.panel-heading>span:first-child{white-space:nowrap}.stage-panel>.panel-heading #timer{margin-left:auto}
.stage-panel>.panel-heading .stage-toolbar{position:static;padding:0;border:0;display:flex;align-items:center;gap:10px;pointer-events:auto;margin-left:auto}
.workspace[data-mode=chat] .conversation-panel{display:flex;position:relative;inset:auto;width:auto;min-width:0;z-index:1;margin:0;max-height:none;overflow:hidden;border-radius:0;box-shadow:none;background:linear-gradient(150deg,#101828d9,#070b16f5)}
.workspace[data-mode=chat] .conversation-panel .transcript{height:0;min-height:240px;overflow:auto}
.workspace[data-mode=chat] .stage-controls{gap:10px}.workspace[data-mode=chat] .stage-controls button{padding:10px 14px}
.stage-toolbar button,.live-dock button,.stage-controls button{transition:color .18s,border-color .18s,background .18s,box-shadow .18s,transform .18s}
.stage-panel>.panel-heading .stage-toolbar button:hover,.live-dock button:hover{color:#fff;border-color:#8be6ff99;background:linear-gradient(135deg,#22384d,#112132);box-shadow:inset 0 1px 0 #ffffff14,0 3px 16px #60bdf11c;transform:translateY(-1px)}
.stage-panel>.panel-heading .stage-toolbar button[aria-pressed=true]{background:linear-gradient(145deg,#204459,#102333);border-color:#8be6ff;color:#b9efff;box-shadow:inset 0 1px 0 #ffffff18,0 0 15px #8be6ff12}
.stage-toolbar button:active,.live-dock button:active,.stage-controls button:active{transform:translateY(0);box-shadow:inset 0 2px 8px #0005}
.stage-toolbar button:focus-visible,.live-dock button:focus-visible{outline:2px solid #8be6ff;outline-offset:3px}
@media(max-width:1000px){.workspace[data-mode=chat]{grid-template-columns:minmax(0,1fr) 280px;gap:12px}.workspace[data-mode=chat] .stage-controls{flex-wrap:wrap}.workspace[data-mode=chat] .connection-info{width:100%;margin:0}}
@media(max-width:760px){.workspace[data-mode=chat]{grid-template-columns:1fr}.stage-panel>.panel-heading{gap:8px;padding:8px!important}.stage-panel>.panel-heading .stage-toolbar{gap:5px}.stage-panel>.panel-heading .stage-toolbar button{font-size:9px;padding:6px;min-height:32px}.stage-panel>.panel-heading #timer{display:none}.workspace[data-mode=chat] .conversation-panel{height:380px;margin-top:0}.workspace[data-mode=chat] .conversation-panel .transcript{min-height:120px}}
@media(prefers-reduced-motion:reduce){.stage-toolbar button,.live-dock button,.stage-controls button{transition:none;transform:none!important}}
.stage-panel:fullscreen{width:100%;height:100%;display:flex;flex-direction:column;background:#05060b;border:0}
.stage-panel:fullscreen .stage-viewer{flex:1;min-height:0;display:flex;flex-direction:column}.stage-panel:fullscreen .stage-bed{flex:1;height:auto!important;min-height:0!important;width:100%}.stage-panel:fullscreen .stage{width:100%!important;height:100%!important;min-height:0;max-width:none;aspect-ratio:auto}.stage-panel:fullscreen .stage-controls{flex:none}

.workspace[data-mode=chat] .stage-panel{grid-column:1;grid-row:1}.workspace[data-mode=chat] .conversation-panel{grid-column:2;grid-row:1}
@media(max-width:760px){.workspace[data-mode=chat] .conversation-panel{grid-column:1;grid-row:2}}

.stage-panel>.panel-heading .stage-toolbar button[aria-pressed=true]:hover{background:linear-gradient(135deg,#2b586e,#19374c);color:#fff;border-color:#c7f3ff;box-shadow:inset 0 1px 0 #ffffff26,0 4px 18px #8be6ff20}
#send-message{background:var(--brand-action);color:#fff}#send-message:hover:not(:disabled){background:#a60864;box-shadow:0 4px 16px #c20a7626}#send-message:disabled{background:#66334f;color:#e4cdda;opacity:.7}
/* Width may be constrained by the conversation column or a phone screen. Let
   aspect-ratio derive height instead of stretching both display dimensions. */
.workspace[data-mode=chat] .stage-bed .stage{height:auto;aspect-ratio:var(--stage-ratio,.5625);max-height:100%}
/* Keep native WebRTC video inside the display frame at every viewport size.
   A min-height on the bed must also participate in the stage width budget. */
.workspace[data-mode=chat] .stage-bed{--stage-height:max(390px,calc(100svh - 275px));height:var(--stage-height)}
.workspace[data-mode=chat] .stage-bed .stage{width:min(100%,calc(var(--stage-height) * var(--stage-ratio,.5625)));max-height:none;overflow:hidden}
.stage-panel #avatar-video{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;object-position:center!important;transform:none!important}
@media(max-width:760px){.workspace[data-mode=chat] .stage-bed{--stage-height:max(350px,calc(100svh - 285px))}}
.stage-panel:fullscreen .stage-bed{--stage-height:100%;height:auto!important}