/* Viewer presentation only. The bridge keeps its existing compact controls. */
.room-page{--bg:#101017;--panel:#191822;--border:#35303f;--muted:#b8b1c7;--pink:#d6bcff;--accent:#94e4d5;background:radial-gradient(ellipse at 12% 0,#32243d66,transparent 48%),var(--bg)}
.room-page [hidden]{display:none!important}
.room-page header{max-width:1840px;padding:22px 36px;border-bottom-color:#b39ec01c}
.room-page .brand{font-size:25px;letter-spacing:-.8px;gap:13px}
.cat-brand{display:grid;place-items:center;width:50px;height:50px;background:#cfb1ff12;border:1px solid #c7a3fa45;border-radius:16px;color:var(--pink)}
.cat-brand svg{width:39px;height:39px}
.room-page .brand small{font-size:9px;letter-spacing:2px;margin-top:2px;font-weight:550}
.header-note{font-size:13px;color:var(--muted);font-style:italic}
.room-page nav{align-items:center;gap:18px}
.room-page main{max-width:1840px;padding:32px 36px 24px}
.room-page .title-row{margin-bottom:24px}
.room-page h1{font-size:clamp(28px,3.4vw,46px);letter-spacing:-1.5px;font-weight:720;line-height:1.18}
.room-page .eyebrow{letter-spacing:2.2px;font-size:10px;margin-bottom:9px}
.room-page .badge{color:var(--accent);border-color:#94e4d52b;background:#94e4d508;font-size:11px;padding:8px 13px}
.room-page .badge::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:7px}
.room-page .view-controls{margin:0 0 12px}
.room-page .view-controls>span{font-size:12px;letter-spacing:.2px}
.room-page button,.room-page .chat-compose a{border-radius:10px;min-height:40px}
.room-page button:focus-visible,.room-page a:focus-visible,.room-page summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.room-page .layout{grid-template-columns:minmax(0,1fr) 420px;gap:24px;align-items:start}
.room-page .main-column{min-width:0}
.room-page .screen{border-radius:18px 18px 0 0;box-shadow:0 16px 50px #0003;border-color:#75608455;background:#08080d}
.room-page .player-bar{border-radius:0 0 18px 18px;background:#1e1b28;border-color:#75608455;padding:8px 17px;font-size:12px;color:var(--pink)}
.room-page .player-bar>span::before{content:'◉';color:var(--accent);margin-right:9px}
.room-page #playbackNote{font-size:12px;margin:13px 3px;color:var(--muted)}
.room-page .below{border-top:0;background:linear-gradient(115deg,#b687ee12,#84decd06);border:1px solid #bca6d023;border-radius:16px;padding:22px;margin:25px 0 16px;gap:18px}
.room-page .below h2{font-size:21px;letter-spacing:-.6px;margin-bottom:6px}
.room-page .below p{font-size:12px;max-width:440px}
.room-page #copyBtn{background:var(--pink);color:#271a39;border-color:transparent;padding:10px 18px;white-space:nowrap}
.room-page #copyBtn:hover{background:#e5d3ff}
.room-page .help{border-color:#bca6d023;background:#15131c;font-size:12px;padding:15px 19px;border-radius:14px}
.room-page aside{width:100%;max-width:none;margin:0;display:block;border-radius:18px;border-color:#75608455;background:#18161f;box-shadow:0 12px 32px #0002}
.room-page .community-head{padding:17px 17px 13px}
.room-page .community-head h2{font-size:15px;margin-bottom:13px;font-weight:650}
.room-page .tabs{padding:4px;background:#0e0d14;border:1px solid #bca6d014;border-radius:12px}
.room-page .tabs button{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;min-height:36px}
.room-page .tabs button[aria-pressed=true]{background:#bba0e51d;color:#e7d5ff;box-shadow:inset 0 0 0 1px #cbb0f02b}
.room-page .official{height:300px;min-width:0}
.room-page .mini-note{font-size:10px;margin:9px 16px}
.room-page .chat-title{padding:14px 16px;border-color:#bca6d01c;flex-wrap:wrap;gap:7px}
.room-page .chat-title strong{font-size:13px;font-weight:650}
.room-page .chat-title small{font-size:10px}
.room-page .chat.unified{height:clamp(290px,35vh,440px);padding:10px 16px;background:#121119;scrollbar-width:thin;scrollbar-color:#554164 #121119}
.room-page .chat-message{font-size:13px;padding:9px 0;line-height:1.65;border-color:#bca6d00d}
.room-page .chat-message strong{color:#d4b6fa;font-weight:650}
.room-page .chat-message time{color:#a49aae}
.room-page .chat-empty{padding:55px 16px;font-size:13px;line-height:1.8}
.room-page .chat-compose{padding:14px 16px 16px;background:#1a1722;border-top-color:#bca6d01c}
.room-page .chat-compose p{font-size:11px;line-height:1.6}
.room-page .chat-compose a{font-size:11px;padding:8px 11px;border-color:#bda2e32f;margin-bottom:5px;color:#e0cef9}
.room-page .chat-compose a:hover{background:#bda2e312}
.room-page #youtubePending{margin-top:5px;margin-bottom:0;font-size:10px}
.room-page footer{border-color:#bca6d01c;margin-top:30px;color:#aca0b8;font-size:11px}
.admin-actions{display:grid;gap:10px;margin-top:20px}.admin-actions a{padding:12px 16px;border:1px solid var(--border);border-radius:10px;text-decoration:none}
.room-page.theatre main,.room-page.theatre header{max-width:none;padding-left:24px;padding-right:24px}
.room-page.theatre .screen{min-height:0;aspect-ratio:16/9}
.room-page.theatre .layout{grid-template-columns:minmax(0,1fr) 420px}
@media(min-width:1600px){.room-page .layout,.room-page.theatre .layout{grid-template-columns:minmax(0,1fr) 440px}}
@media(max-width:1100px){.room-page main,.room-page header{padding-left:22px;padding-right:22px}.room-page .layout,.room-page.theatre .layout{grid-template-columns:minmax(0,1fr);gap:24px}.room-page aside{display:grid;grid-template-columns:420px minmax(0,1fr);grid-template-rows:auto 300px auto auto}.room-page .community-head{grid-column:1;grid-row:1}.room-page .official{grid-column:1;grid-row:2}.room-page aside>.mini-note{grid-column:1;grid-row:3}.room-page .chat-title{grid-column:2;grid-row:1;border-top:0;border-left:1px solid var(--border)}.room-page .chat.unified{grid-column:2;grid-row:2/4;height:100%;min-height:300px;border-left:1px solid var(--border)}.room-page .chat-compose{grid-column:1/3;grid-row:5}.room-page #resumeChat{grid-column:2;grid-row:4}.room-page .below{margin-top:20px}}
@media(max-width:760px){.room-page header{padding:17px 16px;flex-wrap:nowrap;gap:10px}.room-page main{padding:24px 14px}.room-page .brand{font-size:21px;gap:9px}.cat-brand{width:41px;height:43px;border-radius:13px}.cat-brand svg{width:34px;height:34px}.room-page .brand small{font-size:8px;letter-spacing:1.2px}.header-note{display:none}.room-page nav{margin:0}.room-page .title-row{gap:13px;margin-bottom:18px}.room-page h1{font-size:31px}.room-page .view-controls{flex-direction:row;align-items:center;gap:6px}.room-page .view-controls>span{display:none}.room-page .view-controls>div{width:100%;justify-content:flex-end}.room-page .view-controls button{font-size:11px;padding:7px 10px}.room-page .screen{min-height:0;aspect-ratio:16/9;border-radius:13px 13px 0 0}.room-page .screen:has(.empty){min-height:270px}.room-page .player-bar{border-radius:0 0 13px 13px;padding:5px 10px}.room-page .below{padding:18px;flex-direction:row;flex-wrap:wrap;align-items:center}.room-page .below h2{font-size:19px}.room-page .help{padding:13px 15px}.room-page aside{display:block;border-radius:14px}.room-page .chat-title{border-left:0;border-top:1px solid var(--border);flex-direction:row;align-items:center}.room-page .chat.unified{border-left:0;height:400px;max-height:65svh}.room-page .official{height:300px}.room-page.theatre main,.room-page.theatre header{padding-left:10px;padding-right:10px}.room-page footer{gap:6px}}
@media(max-width:439px){.room-page .official{height:120px}.room-page .official a{padding:9px 16px;border:1px solid var(--border);border-radius:9px}.room-page .badge{font-size:10px}.room-page .chat-compose a{padding:8px 9px}}

/* Fixed viewport: only the conversation and open dialogs scroll. */
html:has(body.room-page){height:100%;overflow:hidden;overscroll-behavior:none}
body.room-page{height:100vh;height:100dvh;overflow:hidden;display:flex;flex-direction:column;overscroll-behavior:none}
.room-page header,.room-page.theatre header{width:100%;flex:none;margin:0 auto;padding:10px 24px}
.room-page .cat-brand{height:40px;width:40px}.room-page .cat-brand svg{height:32px;width:32px}
.room-page main,.room-page.theatre main{width:100%;flex:1;min-height:0;margin:0 auto;padding:10px 24px 14px;display:flex;flex-direction:column;overflow:hidden}
.room-page .title-row{flex:none;margin-bottom:8px}.room-page h1{font-size:24px}.room-page .eyebrow{margin-bottom:2px}
.room-page .view-controls{flex:none;margin:0 0 8px}.room-page .view-controls button{min-height:32px;padding:5px 10px}
.room-page .layout,.room-page.theatre .layout{flex:1;min-height:0;grid-template-columns:minmax(0,1fr) 420px;grid-template-rows:minmax(0,1fr);gap:16px;align-items:stretch}
.room-page .main-column{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.room-page .screen,.room-page.theatre .screen,.room-page .screen:has(.empty){flex:1;min-height:0;aspect-ratio:auto;width:100%}
.room-page .screen video{object-fit:contain}
.room-page .player-bar{flex:none;padding:4px 12px}.room-page .player-bar button{min-height:30px;padding:4px 8px}
.room-page #playbackNote{flex:none;font-size:11px;line-height:1.4;margin:7px 3px 0}
.room-page .below,.room-page .help,.room-page footer{display:none}
.room-page aside{display:flex;flex-direction:column;align-self:stretch;min-height:0;height:100%;overflow:hidden}
.room-page .community-head{padding:7px 10px;flex:none}.room-page .community-head h2{display:none}
.room-page .tabs{padding:2px}.room-page .tabs button{min-height:28px;padding:3px 10px}
.room-page .official{height:300px;flex:none}.room-page aside>.mini-note{display:none}
.room-page .official.compact-official{height:52px;display:flex;gap:12px;justify-content:center;padding:6px 10px;font-size:11px}.room-page .compact-official p{margin:0}.room-page .compact-official a{white-space:nowrap}
.room-page .twitch-support{display:flex;justify-content:center;gap:8px;padding:6px 10px;flex:none;background:#221b30;border-bottom:1px solid var(--border)}
.room-page .twitch-support a{flex:1;text-align:center;text-decoration:none;border:1px solid #bda2e340;border-radius:8px;padding:4px 8px;font-size:12px;color:#e0cef9}.room-page .twitch-support a:hover{background:#bda2e320}
.room-page .chat-title{flex:none;padding:6px 12px;align-items:center;flex-direction:row}
.room-page .chat.unified{flex:1;min-height:0;height:auto;max-height:none;overflow-y:auto;overscroll-behavior:contain;border-left:0;padding:6px 12px}
.room-page .chat-empty{padding:12px 6px}.room-page #resumeChat{flex:none;min-height:28px;padding:3px 8px;font-size:11px}
.room-page .chat-compose{flex:none;padding:7px 10px}.room-page .chat-compose>p:first-child{display:none}.room-page .chat-compose a{min-height:28px;padding:4px 8px;margin-bottom:0}.room-page #youtubePending{font-size:10px;margin-top:3px;line-height:1.3}
.room-page dialog{overflow:auto;overscroll-behavior:contain}
@media(min-width:1600px){.room-page .layout,.room-page.theatre .layout{grid-template-columns:minmax(0,1fr) 440px}}
@media(max-width:899px){
 .room-page header,.room-page.theatre header{padding:6px 12px}.room-page .brand{font-size:19px}.room-page .brand small{font-size:7px}.room-page .cat-brand{width:32px;height:32px}.room-page .header-note{display:none}
 .room-page main,.room-page.theatre main{padding:6px 10px 10px}.room-page .view-controls{margin-bottom:4px}.room-page .view-controls>span{display:none}
 .room-page .layout,.room-page.theatre .layout{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(0,1.5fr);gap:8px}
 .room-page #playbackNote{display:none}.room-page .player-bar{font-size:10px;padding:1px 9px}.room-page .player-bar button{min-height:24px;font-size:10px}
 .room-page .official.compact-official{height:30px;font-size:10px;padding:3px 8px}.room-page .official.compact-official a{padding:0;border:0}
 .room-page .community-head{padding:3px 8px}.room-page .tabs button{min-height:24px;font-size:11px;padding:1px 8px}
 .room-page .twitch-support{padding:3px 8px}.room-page .twitch-support a{font-size:11px;padding:2px 6px}
 .room-page .chat-title{padding:3px 10px}.room-page .chat-title strong{font-size:11px}.room-page .chat-compose{padding:4px 8px}
 .room-page #youtubePending{display:none}.room-page .title-row{margin-bottom:4px}.room-page h1{font-size:18px}.room-page .title-row .eyebrow,.room-page .title-row .badge{display:none}
}
@media(max-height:499px) and (min-width:600px){.room-page .layout,.room-page.theatre .layout{grid-template-columns:minmax(0,1fr) 310px;grid-template-rows:minmax(0,1fr)}.room-page header,.room-page.theatre header{display:none}.room-page #playbackNote{display:none}}

/* Anchor the room itself; overflow:hidden alone still permits scroll offsets. */
html:has(> body.room-page){width:100%;height:100%;overflow:clip;overscroll-behavior:none}
body.room-page{position:fixed;inset:0;width:100%;height:100%;height:100dvh;overflow:clip}
.room-page main,.room-page.theatre main,.room-page .layout,.room-page .main-column,.room-page aside,.room-page .screen{overflow:clip;overscroll-behavior:none;overflow-anchor:none}
.room-page .chat.unified,.room-page dialog{overscroll-behavior:contain}

/* Official players remain visible while they control reaction access. */
.room-page .official-player{width:100%;height:100%}
.room-page .official:has(.official-player){padding:0;display:block}
.room-page.playback-required .official{height:300px;min-height:300px;flex:none}
.room-page .playback-lock h2{font-size:clamp(17px,2vw,25px)}
.room-page .playback-lock p{font-size:14px}.room-page .playback-lock small{line-height:1.5}
@media(max-width:899px){
 .room-page.playback-required .layout,.room-page.playback-required.theatre .layout{grid-template-columns:minmax(0,1fr) 402px;grid-template-rows:minmax(0,1fr)}
 .room-page.playback-required .playback-lock{padding:10px}.room-page.playback-required .playback-lock small{display:none}
}
@media(max-width:649px){
 .room-page.playback-required .layout,.room-page.playback-required.theatre .layout{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(70px,1fr) minmax(0,3fr)}
 .room-page.playback-required .playback-lock h2{font-size:14px;margin:0}.room-page.playback-required .playback-lock p{font-size:11px;margin:4px 0}
}
@media(max-height:699px) and (min-width:650px){
 .room-page.playback-required header{display:none}.room-page.playback-required .chat-compose{padding:3px 8px}.room-page.playback-required #youtubePending{display:none}
}

/* A single chat area: merged reading by default, official writing on demand. */
.room-page.writing-chat #chat,.room-page.writing-chat #resumeChat{display:none!important}
.room-page .write-panel{flex:1;min-height:0;display:flex;flex-direction:column;background:#121119;overflow:hidden}
.room-page .write-toolbar{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:5px 9px;flex:none;font-size:11px}
.room-page .write-toolbar button{min-height:26px;padding:3px 7px;font-size:11px}
.room-page .write-frames{flex:1;min-height:0;position:relative}
.room-page .write-frames iframe{display:block;border:0;width:100%;height:100%;position:absolute;inset:0;background:#18181b}
.room-page .write-help{font-size:10px;line-height:1.35;margin:4px 9px;flex:none;color:var(--muted)}
.room-page .write-help a{color:var(--pink)}
.room-page .write-help button{font:inherit;min-height:0;padding:0;border:0;background:transparent;color:var(--pink);text-decoration:underline}
.room-page .chat-compose button{display:inline-flex;align-items:center;gap:5px;font-size:11px;min-height:28px;padding:4px 8px}
.room-page .chat-compose button[aria-pressed=true]{background:#bba0e52d;border-color:#cbb0f0;color:#e7d5ff}

/* Never let surrounding video/chrome collapse the chat frame to zero. */
.room-page aside{overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.room-page .chat.unified{flex:1 0 200px;min-height:200px}
.room-page .write-panel{flex:1 0 320px;min-height:320px;overflow:visible}
.room-page .write-frames{flex:1 0 240px;min-height:240px}
.room-page .chat-compose{position:sticky;bottom:0;z-index:1;flex-shrink:0}
.room-page .write-help{overflow-wrap:anywhere}
@media(max-width:649px){
 .room-page header,.room-page.theatre header{padding:3px 8px;min-height:28px}
 .room-page .brand{font-size:15px;gap:6px}.room-page .brand small{display:none}
 .room-page .cat-brand{height:24px;width:24px;border-radius:7px}.room-page .cat-brand svg{height:22px;width:22px}
 .room-page .title-row{display:none}
 .room-page main,.room-page.theatre main{padding:3px 2px 3px}
 .room-page .view-controls{margin:0 3px 3px}
 .room-page .view-controls button{min-height:23px;padding:2px 5px;font-size:10px}
 .room-page.playback-required .layout,.room-page.playback-required.theatre .layout{grid-template-rows:minmax(90px,19dvh) minmax(0,1fr);gap:4px}
 .room-page .community-head{padding:2px 4px}
 .room-page .twitch-support{padding:2px 4px}
 .room-page .chat-title{padding:3px 6px}
 .room-page .write-toolbar{padding:3px 6px}
 .room-page .chat-compose{padding:3px 4px}
 .room-page .player-bar{padding:0 7px}
 .room-page .write-help{margin:3px 6px}
}

/* The reaction owns a full-width 16:9 frame in portrait, rather than 19vh. */
.room-page .reaction-actions{display:flex;align-items:center;gap:4px}
.room-page #focusReactionBtn{color:var(--accent);white-space:nowrap}
@media(max-width:649px){
 .room-page.playback-required .layout,.room-page.playback-required.theatre .layout{grid-template-rows:auto minmax(0,1fr)}
 .room-page .main-column{align-self:start;width:100%}
 .room-page .screen,.room-page.theatre .screen,.room-page .screen:has(.empty){flex:none;aspect-ratio:16/9;height:auto;min-height:0}
 .room-page .player-bar{min-height:28px;font-size:10px}
 .room-page #sourceLabel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
 .room-page .reaction-actions{flex:none}
 .room-page .player-bar button{font-size:10px}
}
.room-page.reaction-focus .main-column,.room-page .main-column:fullscreen{position:fixed;inset:0;z-index:50;width:100%;height:100%;height:100dvh;display:flex;background:#08080d;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.room-page.reaction-focus .screen,.room-page .main-column:fullscreen .screen{flex:1;min-height:0;height:auto;aspect-ratio:auto;border-radius:0}
.room-page.reaction-focus #playbackNote,.room-page .main-column:fullscreen #playbackNote{display:none}
.room-page.reaction-focus .player-bar,.room-page .main-column:fullscreen .player-bar{flex:none;border-radius:0;min-height:36px}