.materials-panel,.presentation{border:1px solid #354c69;background:#111f33;border-radius:14px;padding:16px;margin-bottom:20px}.materials-tools,.presentation-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}.materials-tools>strong,.presentation-bar>strong{font-size:15px;max-width:100%;overflow-wrap:anywhere}#presenter-tools{display:flex;gap:10px}.upload-button{cursor:pointer}.materials-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}.materials-list button{background:#223952;border:1px solid #45627e;color:#dfedff;border-radius:8px;text-align:left;padding:12px 16px;max-width:100%;overflow-wrap:anywhere;font-size:13px}.material-help{font-size:12px;line-height:1.7;color:#9cb3cb;margin:12px 0}.presentation-bar{border-bottom:1px solid #2a405c;padding-bottom:12px;margin-bottom:14px}.presentation-bar>div{display:flex;align-items:center;gap:10px}.document-view{max-height:65vh;overflow:auto;background:#22334b;text-align:center;border-radius:8px;padding:10px}.document-view canvas{display:block;max-width:100%;margin:auto;background:white}.presentation:fullscreen{padding:20px;background:#0c1728;overflow:auto}.presentation:fullscreen .document-view{max-height:85vh}#shared-web{display:block;width:100%;height:60vh;border:0;border-radius:8px;background:white}.video-view{position:relative;text-align:center}.video-view>video{width:100%;max-height:60vh;background:#000;border-radius:8px}.video-view>button{margin:12px}#video-controls{display:flex;align-items:center;gap:18px;padding:12px 0}#video-position{flex:1;min-width:80px;accent-color:#6fe6c1}#video-time,#page-count{font-size:12px;color:#b1c7de}.meeting.has-presentation .video-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.meeting.has-presentation .tile{aspect-ratio:16/10}.meeting.has-presentation .meeting-body{grid-template-columns:minmax(0,1fr) 250px}@media(max-width:700px){.materials-panel,.presentation{padding:12px}.materials-tools{gap:10px}#presenter-tools{flex-wrap:wrap}.presentation-bar{gap:10px}.presentation-bar>strong{flex:1 0 100%;font-size:13px}.presentation-bar .secondary{min-height:36px;padding:7px 10px;font-size:11px}.meeting.has-presentation .video-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.meeting.has-presentation .tile .avatar{width:28px;height:28px;font-size:15px;border-radius:9px}.meeting.has-presentation .tile-name{font-size:9px;padding:3px;bottom:3px;left:3px;right:3px}.document-view{max-height:50vh;padding:3px}#shared-web{height:50vh}.video-view>video{max-height:45vh}#video-controls{gap:10px;flex-wrap:wrap}#video-controls button{font-size:11px}.materials-list button{width:100%;padding:10px 12px}}
#web-dialog{background:#15283f;color:#e9f2ff;border:1px solid #466581;border-radius:16px;padding:25px;max-width:90vw;width:480px}#web-dialog::backdrop{background:#020a16b8}#web-dialog h2{font-size:21px;margin:0 0 15px}#web-dialog p{font-size:13px;color:#a9bed7;line-height:1.8}#web-dialog label{font-size:12px}#web-url{display:block;width:100%;margin:8px 0 22px;padding:12px;background:#0b182a;border:1px solid #455c78;color:#fff;border-radius:8px}#web-form>div{display:flex;justify-content:flex-end;gap:10px}
.toolbar{padding-bottom:calc(17px + env(safe-area-inset-bottom,0px))}.toolbar button,.person-actions button,.primary,.secondary{min-height:44px}.tile.focused{grid-column:span 2;aspect-ratio:16/9}@media(max-width:700px){.toolbar{padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}.person-actions button{padding:9px 12px}}
.meeting.has-presentation{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;align-items:start}.meeting.has-presentation>.meeting-heading,.meeting.has-presentation>.materials-panel{grid-column:1/-1}.meeting.has-presentation>.presentation{grid-column:1;min-width:0}.meeting.has-presentation>.meeting-body{grid-column:2;display:flex;flex-direction:column;min-width:0;gap:16px}.meeting.has-presentation .stage{width:100%}.meeting.has-presentation .video-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.meeting.has-presentation .roster{width:100%;max-height:250px}.document-view{height:max(220px,min(62vh,calc(100dvh - 320px)));max-height:none;display:flex;align-items:center;justify-content:center}.document-view canvas{flex:none;width:auto;height:auto}.presentation-bar>strong{min-width:0;flex:1 1 100%;font-size:14px}.presentation #shared-web{height:max(220px,min(62vh,calc(100dvh - 320px)))}.presentation .video-view>video{max-height:max(220px,min(62vh,calc(100dvh - 320px)));object-fit:contain}.presentation:fullscreen .document-view,.presentation:fullscreen #shared-web{height:calc(100dvh - 150px);max-height:none}.presentation:fullscreen .video-view>video{max-height:calc(100dvh - 150px)}@media(max-width:900px){.meeting.has-presentation{display:block}.meeting.has-presentation>.meeting-body{display:flex}.document-view,.presentation #shared-web{height:38dvh;min-height:180px}.presentation .video-view>video{max-height:38dvh}.presentation:fullscreen .document-view,.presentation:fullscreen #shared-web{height:calc(100dvh - 160px)}.presentation:fullscreen .video-view>video{max-height:calc(100dvh - 160px)}}
#web-view .web-actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px}#web-address{flex:1 1 100%;color:#91e8d1;overflow-wrap:anywhere;font-size:13px;line-height:1.6;text-decoration:underline}.web-actions .secondary{font-size:12px;padding:8px 12px}#web-problem{padding:40px 24px;min-height:220px;display:flex;flex-direction:column;justify-content:center;text-align:center;background:#182c43;border:1px solid #425b75;border-radius:10px}#web-problem strong{font-size:20px;color:#e6f3ff}#web-problem p{font-size:14px;line-height:1.9;color:#c1d2e6}
#shared-web-canvas{display:block;width:100%;height:auto;aspect-ratio:1280/800;background:#fff;border-radius:8px}#shared-web-canvas.controllable{cursor:default;touch-action:none}#shared-web-canvas:focus{outline:2px solid #71dec4;outline-offset:2px}#web-navigation{display:inline-flex;gap:8px}#web-typing-form{margin:12px 0;padding:12px;background:#192e45;border:1px solid #405e7c;border-radius:8px}#web-typing-form label{font-size:12px;color:#c3d7eb}#web-typing-form>div{display:flex;gap:8px;margin-top:8px}#web-typing{flex:1;min-width:0;padding:10px;border:1px solid #4a6884;border-radius:7px;color:#fff;background:#0c1c30;font:inherit}#web-typing-form button{white-space:nowrap}@media(max-width:700px){#web-typing-form>div{flex-wrap:wrap}#web-typing{flex-basis:100%}}
.presentation:fullscreen #shared-web-canvas{width:min(100%,calc(160dvh - 352px));height:auto;margin:auto}#web-address{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;max-width:100%}
#meeting.has-presentation{grid-template-columns:minmax(0,calc((100% - 32px)*var(--presentation-ratio,.5))) 16px minmax(220px,1fr);column-gap:8px}#meeting.has-presentation>.meeting-body{grid-column:3}#presentation-divider{display:none}#meeting.has-presentation>#presentation-divider{display:flex;grid-column:2;align-self:stretch;align-items:center;justify-content:center;min-height:220px;cursor:col-resize;touch-action:none;border-radius:8px;color:#9cbed2;background:#1b3046}#presentation-divider:hover,#presentation-divider:focus{background:#2b5268;color:#99f1dc;outline:2px solid #72dbc2;outline-offset:1px}#presentation-divider span{font-size:16px}#meeting.resizing-presentation{cursor:col-resize;user-select:none}#meeting.resizing-presentation canvas{pointer-events:none}.presentation-size-controls{flex-wrap:wrap}.content-zoom{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}.content-zoom button{min-width:40px}.content-zoom span{min-width:42px;text-align:center;font-size:12px;color:#d4e3f1}.presentation-bar>.presentation-size-controls{flex:1 1 100%;gap:10px}#shared-web-viewport{width:100%;overflow:auto;border-radius:8px}#shared-web-viewport #shared-web-canvas{width:var(--content-zoom-width,100%);max-width:none;margin:0 auto}#shared-web-viewport.zoomed #shared-web-canvas.controllable{touch-action:pan-x}#document-view.zoomed{display:block}#document-view.zoomed canvas{max-width:none}#video-view.zoomed{overflow:auto;text-align:left}#video-view.zoomed>video{width:var(--content-zoom-width,100%);max-width:none;max-height:none}#meeting.content-wide .document-view{height:max(260px,min(78dvh,calc(100dvh - 240px)))}.presentation:fullscreen #shared-web-viewport #shared-web-canvas{width:min(100%,calc(160dvh - 420px));margin:0 auto}.presentation:fullscreen #shared-web-viewport.zoomed #shared-web-canvas{width:var(--content-zoom-width,100%)}.presentation:fullscreen .document-view{height:calc(100dvh - 210px)}@media(max-width:900px){#meeting.has-presentation{display:block}#meeting.has-presentation>#presentation-divider{display:none}#meeting.content-wide .document-view{height:65dvh}.presentation-size-controls{gap:8px}.presentation-bar>.presentation-size-controls{gap:8px}}
#presentation .presentation-bar>strong{flex:1 1 150px}#presentation .presentation-bar>.presentation-size-controls{flex:0 1 auto;gap:8px}@media(max-width:700px){#presentation .presentation-bar>strong{flex-basis:100%}}

/* Each participant can use the full height without changing anyone else's layout. */
.touch-zoom-surface,.touch-zoom-surface canvas,#shared-web-viewport.zoomed #shared-web-canvas.controllable{touch-action:none;overscroll-behavior:contain}
#shared-web-viewport{max-height:65dvh}
#presentation-focus-dock{position:fixed;top:8px;right:12px;z-index:40;display:flex;gap:6px;padding:4px;background:#0b192de8;border:1px solid #466581;border-radius:10px;box-shadow:0 3px 14px #0005}
#presentation-focus-dock button{font-size:12px;padding:8px 12px}
body.presentation-focused{overflow:hidden}
body.presentation-focused>.topbar{display:none}
body.presentation-focused #meeting.has-presentation{position:fixed;inset:0;z-index:10;width:100%;max-width:none;height:100dvh;margin:0;padding:0;align-items:stretch;background:#0c1728;grid-template-rows:minmax(0,1fr)}
body.presentation-focused #meeting>.meeting-heading,body.presentation-focused #meeting>.materials-panel{display:none}
body.presentation-focused #presentation>.meeting-heading{display:none}
body.presentation-focused.presentation-menus #presentation>.meeting-heading{display:flex;flex:none;max-height:45dvh;overflow:auto;flex-wrap:wrap;gap:12px;margin:0;padding:56px 8px 12px;border-bottom:1px solid #466581;background:#111f33}
body.presentation-focused #presentation>.meeting-heading .eyebrow{display:none}
body.presentation-focused #presentation>.meeting-heading h1{font-size:18px}
body.presentation-focused #presentation>.meeting-heading>.materials-panel{flex:1 0 100%;margin:0;min-width:0}
body.presentation-focused #presentation>.meeting-heading>.roster{flex:1 0 100%;width:100%;min-width:0}
body.presentation-focused #presentation>.meeting-heading .meeting-info{flex-wrap:wrap}
body.presentation-focused #presentation{height:100%;min-height:0;margin:0;padding:4px;border-radius:0;display:flex;flex-direction:column;overflow:hidden}
body.presentation-focused #presentation>.presentation-bar,body.presentation-focused #web-view>.web-actions,body.presentation-focused #web-status,body.presentation-focused #web-view>.material-help{display:none}
body.presentation-focused #web-view{flex:1;min-height:0;display:flex;flex-direction:column}
body.presentation-focused #shared-web-viewport{flex:1;min-height:0;max-height:none;border-radius:0}
body.presentation-focused #meeting #document-view{flex:1;min-height:0;height:auto;max-height:none;border-radius:0}
body.presentation-focused #meeting #video-view{flex:1;min-height:0;overflow:auto}
body.presentation-focused #video-view>video{height:100%;max-height:100%;object-fit:contain}
body.presentation-focused #meeting>.meeting-body{overflow:auto;height:100%;padding:60px 8px 8px 0}
body.presentation-focused .toolbar{display:none}
body.presentation-focused.presentation-menus #presentation>.presentation-bar{display:flex;flex:none;padding-top:8px;margin-bottom:8px}
body.presentation-focused.presentation-menus #presentation{overflow:auto}
body.presentation-focused.presentation-menus #web-view>.web-actions{display:flex}
body.presentation-focused.presentation-menus #web-status{display:block;margin:6px 0}
body.presentation-focused.presentation-menus .toolbar{display:flex;z-index:30}
body.presentation-focused.presentation-menus #meeting.has-presentation{padding-bottom:86px}
@media(max-width:900px){body.presentation-focused #meeting.has-presentation{display:flex}body.presentation-focused #presentation{width:100%}body.presentation-focused #meeting>.meeting-body{display:none}body.presentation-focused.presentation-menus #meeting.has-presentation{padding-bottom:164px}#presentation-focus-dock{right:6px;top:calc(6px + env(safe-area-inset-top,0px))}#presentation-focus-dock button{padding:7px 10px}}
