/* Settings float over the gallery and never change its measured dimensions. */
body.in-call{height:100dvh;min-width:240px;display:flex;flex-direction:column;overflow:hidden}
.in-call header{flex:none;padding:8px 16px;min-height:58px}.in-call .brand img{width:34px;height:34px}.in-call .brand-name{font-size:14px}.in-call .pill{font-size:10px;padding:3px 8px}
.in-call main{width:100%;max-width:none;min-height:0;flex:1;display:flex;flex-direction:column;padding:8px 12px;overflow:hidden}.in-call .intro,.in-call footer{display:none}
.in-call #session{flex:1;min-height:0;display:flex;flex-direction:column;gap:6px}.in-call .session-head{flex:none;gap:8px}.in-call .session-head .eyebrow{display:none}.in-call #room-title{margin:0;font-size:clamp(16px,2vw,24px);overflow-wrap:anywhere}.in-call #room-name-status:empty{display:none}.in-call #room-name-status{margin:0;font-size:12px;max-height:3em;overflow:auto}
.in-call #connection,.in-call #waiting-message,.in-call #recording-state,.in-call #guest-lock-message{flex:none;font-size:12px;margin:0;max-height:3em;overflow:auto}
#session-tools{display:flex;gap:6px;flex-wrap:wrap;flex:none}#session-tools button{padding:7px 12px;min-height:40px;font-size:13px}#session-tools button[aria-expanded=true]{background:var(--accent);color:var(--bg)}
#session-workspace{display:grid;grid-template-columns:minmax(0,1fr);flex:1;min-height:0;gap:10px}#session-workspace.settings-open{grid-template-columns:minmax(0,1fr) minmax(280px,360px)}
#gallery-stage{position:relative;min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden}#gallery-empty{margin:auto;padding:20px;text-align:center;color:var(--muted)}#gallery-stage #hidden-videos{flex:none;max-height:90px;overflow:auto}#gallery-stage #videos{flex:1;min-height:0;min-width:0;gap:8px;overflow:hidden}
#gallery-stage .video-card{min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden}#gallery-stage .video-card video{min-height:0;flex:1;width:100%;height:100%;max-height:none;object-fit:contain}#gallery-stage .video-card p{flex:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:3px 8px;font-size:11px}#gallery-stage .video-actions{flex:none;padding:3px 8px;font-size:11px;overflow:auto;max-height:100%}#gallery-stage .video-actions summary{min-height:24px}#gallery-stage .video-actions button{padding:5px 8px;margin:2px;font-size:11px}
#settings-dock{min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain;border:1px solid var(--line);border-radius:14px;background:var(--panel);scrollbar-gutter:stable}#settings-dock .panel{border:0;border-radius:0;padding:14px}#settings-dock .dock-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:12px;border-bottom:1px solid var(--line)}#settings-title{font-size:17px;margin:0}.dock-head button{font-size:12px;padding:7px 10px}#settings-dock input,#settings-dock select{min-width:0;max-width:100%}#settings-dock .device-list{grid-template-columns:minmax(0,1fr)}#settings-dock h2{font-size:18px}#settings-dock p{overflow-wrap:anywhere}#settings-dock #waiting-dialog{position:static;inset:auto;width:100%;margin:0;box-shadow:none;border:1px solid var(--accent);color:var(--ink)}
.in-call #notice{flex:none;font-size:12px;max-height:3em;overflow:auto;margin:4px 0}.in-call #notice:empty,.in-call #room-action-status:empty{display:none}
.guest-locked #session-tools{display:none}
@media(max-width:760px){#session-workspace.settings-open{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(80px,1fr) minmax(0,45%)}.in-call header{padding:5px 8px;min-height:48px}.in-call main{padding:6px}.in-call .brand img{width:26px;height:26px}.in-call .brand-name{font-size:12px}.in-call .pill{max-width:none}.in-call .session-head button{padding:6px 10px;font-size:12px;min-height:36px}#session-tools{gap:4px}#session-tools button{flex:1 0 auto;font-size:11px;padding:6px 8px;min-height:36px}#gallery-stage #videos{gap:5px}}
@media(max-height:440px) and (min-width:761px){.in-call header{display:none}.in-call .session-head{min-height:28px}.in-call #connection{font-size:10px}#session-tools button{min-height:30px;padding:4px 8px}}
@media(max-height:450px){.in-call header{display:none}.in-call .session-head{min-height:30px}.in-call #room-title{font-size:15px;max-width:55vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.in-call #connection{font-size:10px;max-height:2em}.in-call #notice{font-size:10px;max-height:2em}#session-tools button{min-height:30px;padding:4px 7px}#session-workspace.settings-open{grid-template-rows:minmax(40px,1fr) minmax(90px,50%)}}
@media(max-height:450px) and (min-width:761px){#session-workspace.settings-open{grid-template-rows:minmax(0,1fr)}}
@media(max-width:360px){#session-tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}#session-tools button{min-width:0;font-size:10px;padding:4px}.in-call .session-head{gap:4px}.in-call #room-title{max-width:50vw}}
.in-call #recording-state:empty{display:none}.in-call .session-head>div{min-width:0;flex:1}.in-call .session-head #leave{white-space:nowrap;flex:none}
@media(max-height:450px){.in-call .session-head{min-height:28px}.in-call .session-head #leave{min-height:28px;padding:4px 7px;font-size:10px}.in-call #connection{max-height:1.5em;white-space:nowrap;text-overflow:ellipsis}.in-call #notice{max-height:1.5em}#session-workspace.settings-open{grid-template-rows:minmax(65px,1fr) minmax(80px,45%)}}
@media(max-height:450px) and (min-width:761px){#session-workspace.settings-open{grid-template-rows:minmax(0,1fr)}}
.guest-locked #settings-dock{display:none!important}.guest-locked #session-workspace.settings-open{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
#gallery-stage .video-heading{display:flex;align-items:center;gap:4px;min-height:26px;flex:none;padding:0 5px}#gallery-stage .video-heading p{min-width:0;flex:1;margin:0;font-size:10px}#gallery-stage .video-heading>button{flex:none;padding:0 6px;min-height:24px;line-height:20px;font-size:17px}#settings-dock .video-actions{display:flex;gap:8px;flex-wrap:wrap}
.guest-locked .video-heading>button{display:none}

#settings-dock .dock-head{position:sticky;top:0;z-index:2;background:var(--panel)}
/* Compact controls: state is carried by the control, details stay optional. */
.icon-control{display:inline-flex;align-items:center;justify-content:center;width:42px;height:40px;padding:8px;flex:none}
.icon-control[aria-pressed="true"]{background:#344253;border-color:#E3C062;color:#FFF9ED}
.icon-control[aria-pressed="false"]{color:#c1c4ca}
.in-call #start-camera,.in-call #stop-camera,.in-call .source-level,.in-call .mixer-help{display:none!important}
.in-call #device-check>summary{display:none}.in-call #device-check{padding:0;border:0;background:transparent}
.in-call .source-add label,.in-call .source-add #add-audio{display:none}
.connection-diagnostics{margin-top:12px}.connection-diagnostics>summary{cursor:pointer;font-size:.85rem}
#session-tools{gap:6px;flex-wrap:wrap}
#chat-settings{display:flex;flex-direction:column;min-height:0;gap:8px}#chat-settings[hidden]{display:none}
.chat-history{max-height:55vh;min-height:100px;overflow:auto;overscroll-behavior:contain}.chat-history article{position:relative;padding:8px 30px 8px 0;border-bottom:1px solid #344253}.chat-history article>div{display:flex;justify-content:space-between;gap:8px}.chat-history time{font-size:.75rem;color:#c1c4ca}.chat-history p{margin:4px 0;white-space:pre-wrap;overflow-wrap:anywhere}.chat-delete{position:absolute;right:0;top:7px;padding:2px 7px;background:transparent;color:inherit}.chat-history+form{display:flex;gap:6px;align-items:stretch}.chat-history+form textarea{width:100%;min-width:0;resize:vertical}.chat-history+form button{flex:none}
.video-focused{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;max-width:none!important;max-height:none!important;border:0!important;border-radius:0!important;margin:0!important;padding:0!important;z-index:10000;background:#000!important;display:block!important}
.video-focused>video{width:100%!important;height:100%!important;max-height:none!important;object-fit:contain!important}.video-focused>.video-heading,.video-focused>.video-actions,.video-focused>p{display:none!important}
.fullscreen-controls{position:absolute;right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));display:flex;gap:8px;z-index:10002}.fullscreen-controls button{background:#121921e8}
.video-focused>#settings-dock{position:absolute;right:12px;bottom:70px;top:auto;max-height:75dvh;width:min(360px,calc(100vw - 24px));z-index:10001;background:#121921f5;overflow:auto}.video-focus{overflow:hidden}
.in-call .prejoin-camera-toggle{display:none!important}
#media-settings>h2,.in-call label:has(>#camera){display:none}

/* Keep this after the responsive gallery rules: opening a menu must not resize videos. */
#session-workspace,#session-workspace.settings-open{position:relative;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
#settings-dock{position:absolute;top:0;right:0;z-index:110;width:min(390px,100%);max-height:100%;box-shadow:0 10px 36px #0009}
#settings-dock[hidden]{display:none}
#gallery-stage .video-card{position:relative}
#gallery-stage .video-source-menu{position:absolute;bottom:30px;right:6px;z-index:30;max-width:calc(100% - 12px);max-height:calc(100% - 36px);overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 6px 24px #0009;padding:6px;display:flex;flex-direction:column;gap:3px}
#gallery-stage .video-source-menu[hidden]{display:none}
.fullscreen-close{position:absolute;top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));z-index:10003;background:#121921e8;font-size:26px}

#source-overview{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:4px 12px;max-height:22vh;flex:none;overflow:auto;padding:5px 2px}
.source-overview-row{display:flex;align-items:center;gap:6px;min-width:0;font-size:11px}.source-overview-row>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.source-overview-row meter{width:44px;flex:none}.source-overview-row input{width:65px;flex:none;padding:0}.source-overview-row .icon-control{width:26px;height:25px;padding:2px}.source-overview-row [aria-pressed=true]{color:#e3c062;background:#344253}
@media(max-height:500px){#source-overview{max-height:14vh}}
#quick-invite-menu{left:auto;right:0;min-width:min(400px,85vw)}

/* Small screens reserve space for the lesson image, with compact icon controls. */
@media(max-width:760px){
 .in-call header{padding:3px 6px;min-height:30px}.in-call .brand img{width:23px;height:23px}.in-call .brand-name{font-size:10px}.in-call .pill{font-size:8px;padding:2px 5px}.in-call main{padding:4px}.in-call #session{gap:3px}.in-call #room-title{font-size:15px;margin:0}.in-call .session-head{gap:4px;min-height:28px}.in-call #save-room,.in-call #leave{font-size:0;min-width:27px;min-height:27px;width:27px;height:27px;padding:3px}.in-call #save-room::before{content:'☆';font-size:18px}.in-call #save-room:disabled::before{content:'★'}.in-call #leave::before{content:'↪';font-size:18px}
 #session-tools{display:flex;flex-wrap:wrap;gap:3px}#session-tools button{flex:none;min-height:26px;height:26px;min-width:24px;width:24px;padding:3px;font-size:10px}#session-tools button svg{width:17px;height:17px}#session-tools .call-menu-arrow,#session-tools .record-settings-toggle{width:15px;min-width:15px;padding:2px}#session-tools .call-audio-mode{width:25px;min-width:25px}#session-tools #record-start{font-size:0;width:26px;min-width:26px}#session-tools #record-start::before{content:'●';font-size:16px}.in-call #connection{font-size:9px;max-height:1.5em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.in-call #notice{font-size:10px;margin:0}.in-call #notice:empty{display:none}
 #gallery-stage .video-heading{min-height:20px;padding:0 3px}#gallery-stage .video-heading p{font-size:9px}#gallery-stage .video-heading>button{min-height:20px;height:20px;padding:0 5px;line-height:18px}#source-overview{grid-template-columns:repeat(auto-fit,minmax(155px,1fr));max-height:15vh;padding:2px;gap:2px 7px}.source-overview-row{font-size:9px;gap:3px}.source-overview-row input{width:47px}.source-overview-row meter{width:30px}.source-overview-row .icon-control{height:22px;width:22px}.source-overview-row svg{width:16px;height:16px}#settings-dock{max-height:85%;width:min(350px,100%)}
}