.livekit-access{margin:18px 0;background:#fff;border:1px solid #dce4dc;border-radius:20px;padding:22px}.livekit-access h2{font-size:clamp(26px,4vw,36px);margin:5px 0 10px}.livekit-access input{width:100%;max-width:420px;padding:13px;border-radius:12px;border:1px solid #cbd9ce;font-size:16px}.livekit-access button{margin:10px 0;border:0;background:#81a88e;border-radius:28px;padding:12px 22px;font:inherit;font-weight:700;cursor:pointer}.livekit-access button:disabled{opacity:.5;cursor:not-allowed}.livekit-access p{overflow-wrap:anywhere}.livekit-access small{color:#697b70}.live-controls{display:flex;flex-wrap:wrap;gap:10px}.live-controls button{margin:8px 0}.livekit-access [hidden]{display:none!important}.live-media:empty{display:none}.teaching-room{padding-top:20px;border-top:1px solid #dce4dc;margin:16px 0}.gallery-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.gallery-bar h3{font-size:26px;margin:8px 0}.gallery-count{font-size:13px;color:#52685b}.gallery-tools{display:flex;gap:10px;margin-left:auto;flex-wrap:wrap}.teaching-room .danger{background:#f5e7e2;color:#7d382e}.student-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:18px 0}.participant-tile{overflow:hidden;min-width:0;border:2px solid transparent;border-radius:16px;background:#eef3ee}.participant-tile.speaking{border-color:#56876a}.participant-screen{position:relative;background:#183c30;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;overflow:hidden}.participant-screen video{width:100%;height:100%;object-fit:contain;position:absolute;inset:0}.participant-screen:fullscreen{aspect-ratio:auto;background:#10251e}.camera-placeholder,.teacher-wait{padding:24px;color:#e4eee5;text-align:center}.participant-caption{display:flex;justify-content:space-between;gap:8px;padding:9px 12px;font-size:13px}.participant-name{font-weight:700;overflow-wrap:anywhere}.participant-state{font-size:11px;color:#52685b;white-space:nowrap}.participant-actions{display:flex;gap:8px;padding:0 10px;flex-wrap:wrap}.participant-actions button{font-size:12px;padding:8px 12px;margin:0 0 10px}.teaching-focus .participant-screen{aspect-ratio:16/9}.teaching-focus .participant-tile{max-width:1100px;margin:0 auto}.teaching-focus{margin:15px 0;background:#183c30;border-radius:16px;overflow:hidden}.teaching-self{width:200px;margin:12px 0 12px auto}.teaching-self .participant-actions{display:flex}.teaching-self .participant-actions button:not(.video-resume){display:none}.gallery-pager{display:flex;justify-content:center;gap:20px;align-items:center}.gallery-help{font-size:14px;color:#52685b;line-height:1.6}.in-live-class .video-panel{display:none}.in-live-class .studio-grid{display:block}.in-live-class .side-panel{max-width:650px}.in-live-class .coming{display:none}.livekit-access:has(.teaching-room) #liveSessionId,.livekit-access:has(.teaching-room) label[for=liveSessionId],.livekit-access:has(.teaching-room) #joinLive{display:none}.gallery-empty{padding:25px;background:#f3f6f1;border-radius:12px}
@media(min-width:1400px){.student-gallery{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:700px){.livekit-access{padding:14px}.student-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.gallery-tools{margin-left:0}.gallery-tools button{font-size:12px}.participant-caption{display:block;padding:7px}.participant-state{display:block}.teaching-self{width:140px}.teaching-focus .participant-screen{aspect-ratio:3/4}.live-controls button{font-size:13px;padding:11px 14px}.gallery-bar h3{font-size:22px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
/* Keep the live class visible while a browser refresh reconnects. */
.restoring-live-class .student-access,.restoring-live-class .intro-head,.resume-live-view .student-access,.resume-live-view .intro-head{display:none}
/* During class, give video the available screen and keep controls compact. */
.in-live-class .studio-main{max-width:1600px;padding:10px 12px}
.in-live-class .intro-head,.in-live-class .student-access,.in-live-class .studio-header,.in-live-class body>header{display:none}
.in-live-class .livekit-access{padding:10px;margin:0;border-radius:12px}
.in-live-class .livekit-access>.eyebrow,.in-live-class .livekit-access>h2,.in-live-class .livekit-access>p:not(#liveKitStatus){display:none}
.in-live-class #liveKitStatus{font-size:13px;margin:4px 0}
.in-live-class .live-controls{gap:7px}
.in-live-class .live-controls button{font-size:12px;padding:9px 12px;margin:4px 0}
.teaching-room{display:flex;flex-direction:column;padding-top:8px;margin-top:8px}
.teaching-focus{order:0;margin:0}
.teaching-self{order:2}
.gallery-bar{order:3;gap:8px}
.student-gallery{order:4}
.gallery-pager{order:5}
.gallery-empty{order:5}
.gallery-help{order:6}
.teaching-room>.gallery-bar h3{font-size:20px;margin:5px 0}
.gallery-tools{gap:6px}
.teaching-room .gallery-tools button{font-size:12px;padding:8px 12px;margin:3px 0}
.teaching-room[data-role=instructor]:not(.has-focus):not(.has-students) .teaching-self{order:0;width:100%;max-width:none;margin:0}
.teaching-room[data-role=instructor]:not(.has-focus):not(.has-students) .teaching-self .participant-screen,.teaching-focus .participant-screen{height:70vh;height:70svh;min-height:280px;max-height:900px;aspect-ratio:auto}
.teaching-room.has-focus .teaching-self{width:140px;margin:8px 0 8px auto}
.teaching-room[data-role=instructor].has-students:not(.has-focus) .student-gallery{order:0}
.teaching-room[data-role=instructor].has-students .teaching-self{width:140px;margin:8px 0 8px auto}
.teaching-self .participant-actions button.video-fullscreen{display:inline-block}
.participant-screen video{object-fit:contain}
@media(max-width:700px){
 .in-live-class .studio-main{padding:6px}
 .in-live-class .livekit-access{padding:6px;border:0}
 .student-gallery{grid-template-columns:1fr}
 .student-gallery .participant-screen{height:65vh;height:65svh;aspect-ratio:auto}
 .participant-caption{display:flex}
 .in-live-class #ys-language-switch{transform:scale(.78);transform-origin:bottom right;opacity:.85}
}
@media(orientation:landscape) and (max-height:600px){
 .teaching-focus .participant-screen,.teaching-room[data-role=instructor]:not(.has-focus):not(.has-students) .teaching-self .participant-screen{height:82vh;height:82svh;min-height:160px}
}
body.video-expanded-open{overflow:hidden}
.participant-tile.video-expanded{position:fixed!important;inset:0!important;z-index:2147483646!important;max-width:none!important;margin:0!important;border:0!important;border-radius:0!important;background:#10251e;display:flex!important;flex-direction:column;width:100vw!important;height:100vh!important;height:100dvh!important;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);box-sizing:border-box}
.participant-tile.video-expanded .participant-screen{flex:1;min-height:0!important;height:auto!important;max-height:none!important;aspect-ratio:auto!important;width:100%!important}
.participant-tile.video-expanded .participant-caption{color:white;background:#10251e}
.participant-tile.video-expanded .participant-state{color:#dce8df}
.participant-tile.video-expanded .participant-actions{display:flex!important;background:#10251e;padding:8px 12px}
.participant-tile.video-expanded .video-fullscreen{display:inline-block!important}
/* Keep pull-to-refresh from tearing down an active call. */
html.ys-live-call,html.ys-live-call body,body.in-live-class{overscroll-behavior-y:none}
/* Both class video and self-preview use the full available stage size. */
.teaching-room .teaching-self,
.teaching-room.has-focus .teaching-self,
.teaching-room[data-role=instructor].has-students .teaching-self,
.teaching-room[data-role=instructor]:not(.has-focus):not(.has-students) .teaching-self{
 width:100%;max-width:none;margin:14px 0;
}
.teaching-room .teaching-self .participant-screen{
 height:70vh;height:70svh;min-height:280px;max-height:900px;aspect-ratio:auto;
}
.teaching-room .teaching-self .participant-screen video{object-fit:contain}
@media(orientation:landscape) and (max-height:600px){
 .teaching-room .teaching-self .participant-screen{height:82vh;height:82svh;min-height:160px}
}
/* Full-body practice: a larger 4:3 stage preserves the complete camera image. */
.teaching-room .teaching-self,
.teaching-focus{max-width:1100px!important;margin-left:auto!important;margin-right:auto!important}
.teaching-room .participant-tile:not(.video-expanded) .participant-screen{
 height:auto!important;min-height:0!important;max-height:none!important;aspect-ratio:4/3!important;
}
.teaching-room .participant-screen video{object-fit:contain;object-position:center}
/* Native fullscreen fills the display; fit mode preserves the full camera frame. */
.participant-tile.video-expanded,.participant-tile.video-expanded .participant-screen{background:#000}
.participant-tile.video-expanded .participant-screen video{object-fit:cover!important}
.participant-tile.video-expanded.full-frame-fit .participant-screen video{object-fit:contain!important}
.participant-tile.video-expanded .participant-caption{display:none}
.participant-tile.video-expanded .participant-actions{
 position:absolute;bottom:env(safe-area-inset-bottom,0px);left:0;right:0;
 background:linear-gradient(transparent,#0009);justify-content:flex-end;z-index:2;
}
.participant-tile.video-expanded .participant-actions button:not(.video-fullscreen):not(.video-fit):not(.video-resume){display:none!important}
.participant-tile.video-expanded .participant-actions button{margin:8px 0;font-size:13px}
.participant-tile.video-expanded .participant-actions .video-fit:not([hidden]){display:inline-block!important}
.participant-tile::backdrop{background:#000}