/* Physical offsets and a measured viewport keep Android 9/10 WebViews full-height. */
.in-classroom,.in-classroom body{background:#111b30;overflow:hidden}
.in-classroom #app{width:100%;min-height:0}
.room-shell{height:100vh;height:var(--classroom-height,100vh);max-height:var(--classroom-height,100vh);min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden}
.room-content{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);min-width:0;min-height:0}
.room-content .stage{min-height:0;width:100%;height:100%}
.student-room .stage #remote-video:not(.remote-ready){opacity:0}
/* Fill the learner's primary view without changing the source aspect ratio.
   Portrait lessons may crop at the edges; landscape teaching content stays whole. */
.student-room .stage:not(.lesson-active):not(.swap-view) video#remote-video,
.student-room .stage.swap-view video#local-video{object-fit:cover;object-position:center}
.student-room .video-lesson video.portrait-material{object-fit:cover;object-position:center}
.student-room .stage.lesson-active .video-lesson{z-index:4}
.student-room .room-status[data-connected="false"]{background:#9b343e;color:#fff;border:1px solid #cb6b70}
.student-room .room-status[data-connected="true"]{background:#23754e;color:#fff;border:1px solid #58ab7e}
.teacher-room .room-top{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;grid-gap:7px;gap:7px;min-width:0}
.teacher-room .room-top>.brand{display:none}
.teacher-room .room-heading{grid-row:1;width:100%;min-width:0}
.teacher-room .room-participants{display:flex;align-items:center;min-width:0;width:100%}
.teacher-room .room-participant-names{flex:1;min-width:0;margin:0}
.teacher-room .recording-duration{flex:none;margin-left:8px;font-size:10px;white-space:nowrap}
.teacher-room .room-info-row{grid-row:2;justify-content:flex-start;flex-wrap:nowrap;min-width:0;width:100%;gap:6px}
.teacher-room .room-info-row>.student-presence,.teacher-room .room-info-row>.media-status{display:inline-flex;align-items:center;justify-content:center;min-width:0;max-width:100%;margin:0;padding:4px 8px;border:1px solid #c46a71;border-radius:6px;background:#94343e;color:#fff;white-space:nowrap;font-size:11px;line-height:17px;font-weight:600}
.teacher-room .room-info-row>.student-presence.entered,.teacher-room .room-info-row>.media-status.is-on{background:#23754e;border-color:#58ab7e;color:#fff}
.teacher-room .room-info-row>.student-presence:before{display:none}
.teacher-room .teacher-toolbar{grid-row:3;width:100%;justify-content:flex-start}
.teacher-room .room-audio-levels{position:static;margin:0 0 0 auto;flex:none;display:flex;align-items:center;gap:4px}
.teacher-room .room-audio-levels .audio-meter{padding:3px 4px;min-width:0;font-size:8px;line-height:13px}
.teacher-room .room-audio-levels .audio-bars{display:flex;align-items:center;height:13px}
.teacher-room .room-audio-levels .audio-bars i{display:block;margin-left:2px}
.teacher-room .room-audio-levels .audio-meter>span:first-child{display:none}
@media(max-width:760px){
 .room-shell{padding:8px;grid-gap:8px;gap:8px}
 .teacher-room .room-info-row{gap:4px}
 .teacher-room .room-info-row>.student-presence,.teacher-room .room-info-row>.media-status{padding:3px 5px;font-size:9px;line-height:17px;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;display:block}
 .teacher-room .room-audio-levels{gap:3px}
 .teacher-room .room-audio-levels .audio-meter{padding:2px;gap:0}
 .teacher-room .room-audio-levels .audio-bars{gap:0}
 .teacher-room .room-audio-levels .audio-bars i{margin-left:1px;width:2px}
}
.native-app .teacher-room .room-top,.mobile-ui .teacher-room .room-top{grid-template-rows:25px 25px 32px;grid-gap:5px;gap:5px;padding:4px 3px}
.native-app .teacher-room .room-heading,.mobile-ui .teacher-room .room-heading{grid-row:1;min-width:0}
.native-app .teacher-room .room-info-row,.mobile-ui .teacher-room .room-info-row{grid-row:2;justify-content:flex-start;min-width:0}
.native-app .teacher-room .room-info-row>.student-presence,.mobile-ui .teacher-room .room-info-row>.student-presence{font-size:9px;padding:3px 5px;line-height:17px}
.native-app .teacher-room .teacher-toolbar,.mobile-ui .teacher-room .teacher-toolbar{grid-row:3}
.native-app .teacher-room .room-audio-levels .audio-meter,.mobile-ui .teacher-room .room-audio-levels .audio-meter{padding:2px;font-size:8px;gap:0}

/* Only an established teacher call receives a green connection badge. */
.teacher-room .room-status{background:#9b343e;color:#fff;border:1px solid #cb6b70}
.teacher-room .room-status[data-connected="true"]{background:#23754e;color:#fff;border-color:#58ab7e}

/* The learner's three state badges and microphone meter stay together on the left. */
.teacher-room .room-info-row .room-audio-levels{flex:1;min-width:0;margin-left:0}
.teacher-room .room-audio-levels #audio-meter-remote{order:0}
.teacher-room .room-audio-levels #audio-meter-local{order:1;margin-left:auto}
.teacher-room .room-audio-levels .audio-meter>span:first-child{display:inline;white-space:nowrap}
.teacher-room .room-audio-levels .audio-meter{gap:3px;white-space:nowrap}
@media(max-width:360px){.teacher-room .room-audio-levels .audio-meter{font-size:7px;gap:2px}.teacher-room .room-audio-levels .audio-bars i{width:1px}}

/* All five badges share one size system, including both microphone meters. */
.teacher-room .room-top .room-info-row>.student-presence,
.teacher-room .room-top .room-info-row>.media-status,
.teacher-room .room-top .room-info-row .room-audio-levels .audio-meter{
 font-size:9px;line-height:17px;padding:3px 5px;height:25px;border-radius:6px;
}
@media(max-width:360px){
 .teacher-room .room-top .room-info-row>.student-presence,
 .teacher-room .room-top .room-info-row>.media-status,
 .teacher-room .room-top .room-info-row .room-audio-levels .audio-meter{font-size:7px;padding:2px 3px;height:23px}
}

/* Preserve all of the student's camera frame in both primary and inset views. */
.teacher-room .stage video#remote-video{object-fit:contain;object-position:center}

/* Preview the same complete camera frame that is sent and recorded. */
.student-room .stage video#local-video{object-fit:contain;object-position:center}

.recording-save-status{position:fixed;z-index:120;right:16px;bottom:calc(88px + env(safe-area-inset-bottom,0px));max-width:min(360px,calc(100vw - 32px));padding:14px 18px;border:1px solid #dedfdc;border-left:4px solid #ff633c;border-radius:14px;background:#fff;color:#13203d;box-shadow:0 8px 28px #13203d18;font-size:14px}.recording-save-status small{display:block;margin-top:4px;color:#718096;font-size:12px}.recording-save-status .btn{margin-left:12px}.student-room .classroom-assurance{cursor:default}

/* Portrait participant previews; primary views retain their existing full-frame rules. */
.stage:not(.swap-view) video#local-video,.stage.swap-view video#remote-video{width:150px;height:200px;object-fit:contain;object-position:center}
.teacher-room .stage.lesson-active .video-lesson{width:150px;height:200px}
.student-room .stage.lesson-active:not(.participant-focus) #remote-video{width:150px;height:200px;bottom:230px;object-fit:contain}
@media(max-width:760px){.stage:not(.swap-view) video#local-video,.stage.swap-view video#remote-video,.teacher-room .stage.lesson-active .video-lesson{width:88px;height:117.333px}.student-room .stage.lesson-active:not(.participant-focus) #remote-video{width:88px;height:117.333px;bottom:137px}}
.native-app .stage:not(.swap-view) video#local-video,.native-app .stage.swap-view video#remote-video,.native-app .teacher-room .stage.lesson-active .video-lesson{width:88px;height:117.333px}
.recording-save-status{width:calc(100vw - 32px);max-width:360px}