:root{color-scheme:dark}html,body{height:100%;background:#000}body{height:100dvh;display:flex;flex-direction:column;overflow:hidden}header{padding:6px 14px;min-height:58px;gap:12px;border-color:#222;background:#111}.brand{display:flex;align-items:center;gap:10px}.brand img{width:46px;height:46px;object-fit:contain}.brand b{font-size:13px;letter-spacing:1.5px}.brand span{color:#fff}#status{font-size:12px}main{width:100%;max-width:none;margin:0;padding:0;flex:1;min-height:0;display:flex;flex-direction:column}#join{padding:24px;margin:auto;justify-content:center}button,input{background:#171717;border-color:#444;border-radius:6px;min-height:44px;color:#fff}button:hover{background:#303030}.primary{background:#fff;color:#000}.primary:hover{background:#ddd}button:focus-visible,input:focus-visible{outline:2px solid #fff;outline-offset:3px}#meeting{position:relative;flex:1;min-height:0;flex-direction:column;background:#000;width:100%}.bar{flex-shrink:0;align-items:center;gap:6px;margin:0;padding:6px;background:#111;border-bottom:1px solid #282828}.bar button{font-size:12px;padding:8px 10px}.stage{flex:1;min-height:0;width:100%;aspect-ratio:auto;border:0;border-radius:0;background:#000}video{display:block;object-fit:contain}.hint,.foot{display:none}canvas{inset:auto;touch-action:none}.palette{display:flex;align-items:center;gap:3px}.bar .swatch{min-width:32px;min-height:44px;padding:0;border:2px solid transparent;background:transparent;display:grid;place-items:center}.swatch:before{content:'';display:block;width:20px;height:20px;border-radius:50%;background:var(--swatch);border:1px solid #777}.swatch[aria-pressed=true]{border-color:#fff}#color{width:42px;height:44px;padding:5px}#show-tools{display:none;position:absolute;right:10px;top:10px;z-index:5;background:#111c}.tools-hidden .bar{display:none}.tools-hidden #show-tools{display:block}.in-meeting:has(.tools-hidden) header{display:none}#meeting.expanded{position:fixed;inset:0;width:100%;height:100dvh;z-index:10}#meeting:fullscreen{height:100%;width:100%;background:#000}#remoteAudio{display:none}@media(max-width:600px){header{min-height:48px;padding:3px 8px}.brand img{width:38px;height:38px}.brand b{font-size:11px;letter-spacing:.7px}#status{max-width:35%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bar{max-height:32dvh;overflow:auto;gap:4px;padding:4px}.bar button{padding:6px 8px}.palette{gap:1px}}@media(max-height:450px){.in-meeting header{display:none}.bar{max-height:28dvh;overflow:auto}}
.tool-label{display:flex;align-items:center;gap:6px;font-size:12px;color:#ccc}#drawing-tool{min-height:44px;background:#171717;color:#fff;border:1px solid #555;border-radius:6px;padding:7px;font:inherit}#drawing-tool:focus-visible{outline:2px solid white}

.drawing-tools{display:flex;align-items:center;gap:3px;flex-shrink:0}.bar .tool-button{display:grid;place-items:center;width:44px;height:44px;padding:9px;border:1px solid #414141;background:#171717;color:#ddd}.tool-button svg{width:23px;height:23px;pointer-events:none}.bar .tool-button[aria-pressed="true"]{background:#fff;color:#111;border-color:#fff}.bar .tool-button:hover{border-color:#aaa}@media(max-width:600px){.drawing-tools{gap:2px}}
.bar .media-toggle[aria-pressed="true"]{background:#fff;color:#111;border-color:#fff}.bar .media-toggle[aria-pressed="false"]{color:#aaa}button:disabled{opacity:.5;cursor:wait}#stop-share{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);z-index:6;background:#fff;color:#111;border-color:#fff;white-space:nowrap;box-shadow:0 2px 12px #0008}#stop-share[hidden],#self-preview[hidden]{display:none}#self-preview{position:absolute;right:12px;bottom:12px;width:clamp(90px,18vw,200px);height:auto;aspect-ratio:4/3;object-fit:cover;border:1px solid #777;border-radius:8px;z-index:4;background:#111;pointer-events:none}#media-message{position:absolute;top:12px;left:50%;transform:translateX(-50%);max-width:90%;padding:8px 12px;border-radius:6px;background:#111d;color:#fff;font-size:13px;z-index:6;pointer-events:none}#media-message:empty{display:none}

.meeting-top{display:flex;justify-content:flex-end;align-items:center;flex-shrink:0;min-height:52px;padding:4px max(8px,env(safe-area-inset-right)) 4px 8px;background:#111;border-bottom:1px solid #282828;z-index:8}#end-meeting{min-height:44px;padding:8px 14px;background:#fff;color:#111;border:1px solid #fff;font-weight:600}#end-meeting:hover{background:#ddd}#show-tools{top:4px;left:8px;right:auto;z-index:9}

.bar #end-meeting{margin-left:auto;flex-shrink:0}.tools-hidden #end-meeting{position:absolute;top:4px;right:8px;z-index:9}.tools-hidden .bar{display:flex;min-height:52px;padding:4px 8px}.tools-hidden .bar>:not(#end-meeting){display:none}
.drawing-tools{flex-wrap:wrap;max-width:100%}
.width-control{display:flex;align-items:center;gap:5px;font-size:12px;color:#ccc;white-space:nowrap}.width-control input{width:86px;min-height:24px;padding:0}.width-control output{min-width:18px;text-align:right;color:#fff}.drawing-tools .tool-button[data-tool="arrow"],.drawing-tools .tool-button[data-tool="double-arrow"]{font-size:20px;line-height:1}.drawing-tools .tool-button[data-tool="text"]{font-weight:700;font-size:18px}

/* Mobile viewing: controls float above the picture without changing its geometry. */
body.in-meeting:has(.mobile-view) header{display:none}
#meeting.mobile-view{height:100%;min-height:0}
.mobile-view .stage{position:absolute;inset:0;width:100%;height:100%;min-height:0;overflow:hidden}
.mobile-view #screen{width:100%;height:100%;object-fit:contain;object-position:center}
.mobile-view .bar{position:absolute;inset:auto max(6px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left));display:flex;flex-wrap:wrap;align-content:flex-start;gap:4px;padding:7px;min-height:0;max-height:min(50dvh,270px);overflow:auto;overscroll-behavior:contain;background:rgba(18,18,18,.94);border:1px solid #444;border-radius:14px;box-shadow:0 6px 24px #0008;z-index:10}
.mobile-view .bar .compact-control{position:relative;display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;min-height:40px;padding:8px;font-size:0;order:1}
.mobile-view .compact-control::before{content:'';width:22px;height:22px;background:currentColor;-webkit-mask:var(--control-icon) center/contain no-repeat;mask:var(--control-icon) center/contain no-repeat}
.mobile-view .media-toggle::after{content:'';position:absolute;right:3px;bottom:3px;width:6px;height:6px;border:1px solid currentColor;border-radius:50%}
.mobile-view .media-toggle[aria-pressed=true]::after{background:currentColor}
.mobile-view .bar #end-meeting{position:relative;inset:auto;margin-left:auto;flex-shrink:0}
.mobile-view .drawing-tools{order:2;display:flex;flex-wrap:nowrap;width:100%;max-width:100%;overflow-x:auto;overflow-y:hidden;gap:3px;padding:3px 0;scrollbar-width:thin}
.mobile-view .bar .tool-button{flex:0 0 40px;width:40px;height:40px;min-height:40px;padding:8px}
.mobile-view .palette{order:3;display:flex;flex-wrap:nowrap;gap:1px}
.mobile-view .bar .swatch{width:32px;min-width:32px;min-height:40px}
.mobile-view #color{width:36px;height:40px;min-height:40px}
.mobile-view .width-control{order:4;flex:1 1 145px;justify-content:space-between;font-size:11px;min-height:36px;gap:4px}
.mobile-view .width-control input{min-width:50px;width:75px;min-height:32px;flex:1;accent-color:#fff}
.mobile-view.tools-hidden .bar{display:none}
.mobile-view #show-tools{display:none}
.mobile-view.tools-hidden #show-tools{display:block;inset:auto auto max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));min-height:40px;padding:7px 10px;border-radius:20px;background:#1119;color:#eee;font-size:12px;z-index:8}
.mobile-view #stop-share{bottom:auto;top:max(8px,env(safe-area-inset-top));font-size:12px;min-height:40px;padding:7px 10px}
.mobile-view #media-message{top:max(8px,env(safe-area-inset-top))}
.mobile-view #self-preview{right:max(8px,env(safe-area-inset-right));bottom:max(8px,env(safe-area-inset-bottom));width:90px}