/* Operate surfaces: retain the warm palette, with contextual density. */
:root{--player-surface:#211e1bf5;--player-text:#fffaf5;--player-muted:#d8cec5;--player-accent:#efb89a;--player-track:#85796e}
::selection{background:var(--selected);color:var(--text)}
input,textarea{caret-color:var(--accent)}
button:disabled{cursor:default}
button:focus-visible,input:focus-visible,summary:focus-visible,.fileButton:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
button,input,summary{scroll-margin:16px}
input::placeholder{color:var(--muted);opacity:1}
input[aria-invalid=true]{border-color:var(--accent)}
header{gap:10px;min-height:46px;padding-block:6px}
header .appearance-control{margin-inline-start:auto}
header button{min-width:28px}
.appearance-control select{cursor:pointer}
main{gap:16px;padding:18px 20px}
:root[data-joining=true] main{max-width:600px;margin-block:24px}
:root[data-joining=true] #picture,:root[data-joining=true] #cover{border-radius:5px}
:root[data-joining=true] #cover{padding:28px 24px}
#joinForm h1{font-size:20px;font-weight:600}
#joinForm p,#joinHint{line-height:1.65}
#joinHint{overflow-wrap:anywhere}
#nickname{line-height:1.5}
#picture{border-radius:5px}
#immersive-hud{left:12px;top:12px;right:12px;align-items:flex-start;pointer-events:none}
#video-info{flex:none;width:auto;max-width:min(70%,52ch);padding:6px 9px;border:0;border-radius:4px;background:var(--player-surface);color:var(--player-text);backdrop-filter:none}
#title{font-size:13px;font-weight:500;line-height:1.5;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
#floating-controls{--accent:var(--player-accent);--text:var(--player-text);--muted:var(--player-muted);--track:var(--player-track);--hover:#ffffff18;--selected:#4b382c;left:12px;right:12px;bottom:12px;width:auto;padding:6px 9px;border:1px solid #ffffff26;border-radius:5px;background:var(--player-surface);color:var(--player-text);backdrop-filter:none}
#floating-controls button:hover:enabled{background:var(--hover)}
#floating-controls button:focus-visible,#floating-controls input:focus-visible{outline-color:var(--player-accent)}
#floating-controls .controls button{min-height:32px;font-size:12px}
#floating-controls .wt-icon{width:18px;height:18px}
#floating-controls .timeline{margin-top:0;font-variant-numeric:tabular-nums}
#floating-controls .timeline>span{font-size:12px}
#video-playlist{background:var(--player-surface);color:var(--player-text);border:1px solid #ffffff26;border-radius:5px;backdrop-filter:none;max-height:min(300px,50dvh);padding:10px}
#video-playlist li button{line-height:1.5;min-height:36px}
#playback-feedback{display:flex;align-items:flex-start;gap:12px;margin-top:10px}
#playback-feedback .playback-status{flex:1;min-width:0;margin:0;font-size:13px;line-height:1.6;padding:2px 0}
#playback-feedback #live-network{flex:none;max-width:none;font-size:12px;padding:2px 6px;min-height:28px;border:0;background:transparent;color:var(--muted);backdrop-filter:none;white-space:nowrap;line-height:1.5}
#playback-feedback #live-network:hover{background:var(--hover)}
:root[data-joining=true] #playback-feedback{display:none}
aside{border-radius:5px;box-shadow:none}
.asideHead{padding:8px 12px;gap:6px}
.asideHead h2{font-size:14px;font-weight:600}
.asideHead button{min-height:28px;min-width:28px}
#room-information summary{min-height:28px;display:flex;align-items:center}
#room-information p{font-size:13px;line-height:1.6}
#room-invitation{padding:8px 12px 12px;gap:6px;font-size:12px}
#room-invitation button{padding:3px 5px;margin-inline-start:-5px;line-height:1.5;min-height:28px}
.room-tabs{margin:0;padding:0;gap:0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent}
.room-tabs button{font-size:13px;min-height:36px;border:0;border-bottom:2px solid transparent;border-radius:0;color:var(--muted)}
.room-tabs button[aria-selected=true]{border-bottom-color:var(--accent);background:transparent;color:var(--accent);font-weight:600}
.room-pane{padding:14px 12px}
#messages{margin:0 0 14px;scrollbar-width:thin;scrollbar-color:var(--muted) transparent}
#messages p{font-size:14px;line-height:1.65}
#messages small{line-height:1.5}
#messages:empty:before{font-size:13px}
#members{font-size:14px;scrollbar-width:thin;scrollbar-color:var(--muted) transparent}
#members li{min-height:38px;gap:12px}
#members li span:first-child{min-width:0;overflow-wrap:anywhere}
#members li span:last-child{flex:none}
#chat{font-size:14px;line-height:1.5;min-height:36px}
#send{min-height:36px;min-width:36px}
aside>.ready{display:flex;align-items:center;min-height:42px;font-size:13px;padding:8px 12px}
#room-rail{display:none;align-items:center;justify-content:center;gap:7px;border-radius:5px}
html[data-room-visible=false] #room-rail{display:inline-flex}
#room-rail span{display:none}
#room-rail .wt-icon{width:18px;height:18px}
html[data-room-visible=false] #picture{border-radius:5px}
#retry{min-height:32px;padding:5px 8px;font-size:13px}
.network-dialog{max-width:calc(100% - 32px);border-radius:5px;padding:20px}
.network-dialog p{font-size:14px;line-height:1.7;overflow-wrap:anywhere}
.network-dialog::backdrop{background:#211e1b66}
.fileButton{display:inline-flex;align-items:center;min-height:32px}
@media(max-width:800px){
 header{gap:7px;padding-inline:12px}
 header .appearance-control select{font-size:13px;max-width:104px}
 main{padding:12px;gap:12px}
 :root[data-joining=true] main{margin-block:8px;padding:12px}
 :root[data-joining=true] #cover{padding:24px 18px}
 #immersive-hud{top:8px;left:8px;right:8px}
 #video-info{max-width:85%;padding:4px 7px}
 #floating-controls{left:6px;right:6px;bottom:6px;padding:4px 6px}
 #floating-controls .timeline>span{font-size:11px}
 #playback-feedback{flex-wrap:wrap;column-gap:10px;row-gap:2px;margin-top:8px}
 #playback-feedback .playback-status{flex-basis:100%;font-size:13px}
 #playback-feedback #live-network{padding-inline:0}
 main>aside{border-radius:5px;margin-top:0;max-height:58dvh;min-height:260px}
 #room-rail{margin-top:0;min-height:40px;justify-content:flex-start;padding:8px 12px}
 #room-rail span{display:inline}
 #chat,#nickname{font-size:16px}
 #sourcePanel p{font-size:13px}
}
@media(pointer:coarse){
 #floating-controls .controls button,.controls button{min-width:44px;min-height:44px;padding:5px}
 #floating-controls .timeline{height:32px}
 #seek{height:32px}
 header button,header .appearance-control select,.asideHead button,#room-invitation button,.room-tabs button,#room-rail,#retry,.fileButton{min-height:44px}
 header button,.asideHead button{min-width:44px}
 #chat,#send{min-height:44px}#send{min-width:44px}
 header .appearance-control select{font-size:16px;max-width:112px}
 aside>.ready{min-height:44px}
}
@media(orientation:landscape) and (max-height:550px) and (max-width:1100px){
 header{min-height:42px;height:auto}
 #floating-controls .timeline{height:24px}
 .screen{width:min(100%,calc((100dvh - 108px) * var(--media-ratio,1.77778)))}
 :root[data-joining=true] .screen{width:100%}
}
@media(prefers-reduced-motion:reduce){#immersive-hud,#floating-controls,.playback-status{transition:none}}
@media(forced-colors:active){
 #floating-controls,#video-info,#video-playlist{background:Canvas;color:CanvasText;border:1px solid CanvasText;--accent:Highlight;--text:CanvasText;--muted:CanvasText;--track:CanvasText}
 #floating-controls button:focus-visible,#floating-controls input:focus-visible{outline-color:Highlight}
 .room-tabs button[aria-selected=true]{color:Highlight;border-bottom-color:Highlight}
}