/* The room fits the window; the transcript is the only continuously growing surface. */
html:has(.listening-room) { overflow: hidden; overscroll-behavior: none; scroll-padding: 0; }
.listening-room { --sheet:#f3f2ed; --rule:#cecec5; --soft:#5b5d55; --desk:#292b28; --rail:clamp(278px,25vw,386px); --gutter:clamp(22px,3.4vw,62px); background:var(--sheet); font-family:var(--sans); }
#focus-room { position:relative; height:100vh; height:var(--room-height,100dvh); display:grid; grid-template-rows:auto minmax(0,1fr) auto; overflow:clip; }
.symbols { position:absolute; width:0; height:0; overflow:hidden; }
.icon { display:block; flex:none; width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.55; stroke-linecap:round; stroke-linejoin:round; }
.room-header { min-height:58px; padding:6px var(--gutter); padding-top:max(6px, env(safe-area-inset-top)); display:flex; gap:24px; align-items:center; }
.room-header .brand { margin:0; }
.room-header .brand img { width:76px; }
.room-header .brand span { font-family:var(--mono); }
.timer-modes { margin-left:auto; display:flex; align-items:center; padding:3px; border:1px solid var(--rule); border-radius:30px; }
.timer-modes button { min-height:32px; display:flex; align-items:center; justify-content:center; gap:7px; border-radius:30px; padding:4px 16px; font:13px var(--sans); }
.timer-modes button .icon { width:15px; height:15px; }
.timer-modes [aria-pressed=true] { background:var(--ink); color:var(--sheet); }
.timer-modes button:not([aria-pressed=true]):hover { background:#e6e5de; }
.room-floor { min-height:0; display:grid; grid-template-columns:minmax(0,1fr) var(--rail); }
.room-scene { position:relative; isolation:isolate; min-height:0; min-width:0; overflow:hidden; color:#fafaf4; background:#51524d; display:flex; flex-direction:column; justify-content:space-between; padding:clamp(26px,4.5vh,60px) var(--gutter); }
.scene-photo,.room-scene::after { position:absolute; inset:0; width:100%; height:100%; z-index:-2; }
.scene-photo { object-fit:cover; object-position:50% 54%; }
.room-scene::after { content:""; z-index:-1; background:linear-gradient(0deg,rgba(13,15,13,.81),rgba(15,16,14,.35) 29%,transparent 63%),linear-gradient(115deg,rgba(16,17,15,.56),transparent 46%); }
.scene-heading { pointer-events:none; }
.plate,.timer-meta,.station-name,.mix-heading { display:flex; align-items:center; gap:9px; text-transform:uppercase; font:10px/1.3 var(--mono); letter-spacing:.1em; }
.plate span:not(.register) { opacity:.65; }
.register { width:12px; height:12px; border:1px solid currentColor; border-radius:50%; display:grid; place-items:center; }
.register::after { content:""; width:4px; height:4px; border-radius:50%; background:currentColor; }
#room-name { margin:9px 0 0 -2px; font:italic 400 clamp(48px,5.25vw,91px)/.99 var(--serif); letter-spacing:-.065em; }
.session { align-self:flex-start; margin-top:auto; }
.timer-meta { font-size:10px; letter-spacing:.07em; color:#efefe8; }
.signal,#presence-dot,.channel-switch i { display:inline-block; flex:none; width:6px; height:6px; border:1px solid currentColor; border-radius:50%; }
[data-running=true] .signal,#presence-dot.is-live { background:currentColor; }
.meta-rule { width:18px; height:1px; background:currentColor; opacity:.5; }
#timer-display { width:max-content; font:300 clamp(74px,min(9.6vw,16vh),164px)/1.04 var(--sans); font-variant-numeric:tabular-nums; letter-spacing:-.075em; margin:2px 0 4px -.05em; }
.timer-track { height:2px; width:100%; background:#ffffff45; }
.timer-track span { display:block; height:100%; background:#fafaf4; }
.timer-actions { margin-top:15px; display:flex; align-items:center; gap:9px; }
.timer-actions button,.join-button,#chat-form button,.desk-icon,.record-button,#mix-toggle { display:inline-flex; align-items:center; justify-content:center; }
.start { gap:9px; background:var(--sheet); color:var(--ink); border-radius:30px; font:500 13px var(--sans); padding:0 17px; min-height:40px; }
.start::before { content:""; width:0; height:0; border-block:4px solid transparent; border-left:6px solid currentColor; }
[data-running=true] .start::before { width:6px; height:9px; border:0; border-inline:2px solid currentColor; }
.scene-icon { width:36px; height:36px; border:1px solid #ffffff61; border-radius:50%; background:#21221d3a; }
.scene-icon:hover,.scene-icon[aria-pressed=true] { background:var(--sheet); color:var(--ink); }
#cycle-next { font:12px var(--sans); }
.intention { position:absolute; right:var(--gutter); bottom:clamp(26px,4.5vh,60px); display:flex; align-items:center; gap:7px; max-width:34%; border-bottom:1px solid #ffffff69; }
.intention .icon { width:14px; height:14px; }
#intention { min-width:0; width:17ch; padding:8px 0; border:0; background:transparent; color:inherit; border-radius:0; font:13px var(--sans); text-overflow:ellipsis; }
#intention::placeholder { color:#efefe8; opacity:1; }
#room-chat { min-height:0; min-width:0; display:grid; grid-template-rows:auto minmax(0,1fr) auto; background:var(--sheet); border-top:1px solid var(--rule); }
.chat-head,.chat-foot { padding:22px clamp(16px,1.9vw,30px); }
.chat-head { border-bottom:1px solid var(--rule); position:relative; }
.chat-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; }
#chat-title { font:400 clamp(29px,2.5vw,41px)/1 var(--serif); letter-spacing:-.055em; }
#invite { display:flex; align-items:center; gap:5px; min-height:30px; padding:3px; font:12px var(--sans); }
#invite:hover { text-decoration:underline; }
#invite-url { position:absolute; inset-inline:12px; bottom:0; width:calc(100% - 24px); z-index:2; padding:6px; border:1px solid currentColor; background:var(--sheet); font:16px var(--sans); }
.room-presence { margin-top:6px; display:flex; align-items:center; gap:7px; color:var(--soft); font:11px/1.4 var(--mono); }
.conversation { position:relative; min-height:0; }
#chat-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; height:100%; padding:12px 16px; }
#chat-empty img { width:clamp(138px,14vw,210px); max-height:38%; object-fit:contain; height:auto; }
#empty-title { font:italic 400 28px/1.12 var(--serif); letter-spacing:-.045em; margin:12px 0 7px; }
#chat-note { margin:auto; max-width:24ch; font:14px/1.45 var(--sans); color:var(--soft); text-wrap:pretty; }
#chat-list { height:100%; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:var(--rule) transparent; margin:0; padding:12px clamp(16px,1.9vw,30px); list-style:none; overflow-anchor:none; }
#chat-list li { padding:9px 0 11px; overflow-wrap:anywhere; }
#chat-list small { display:flex; align-items:baseline; gap:9px; font:11px/1.4 var(--mono); color:var(--soft); }
#chat-list time { font-size:10px; margin-left:auto; }
#chat-list li[data-own=true] small > span { color:var(--ink); }
#chat-list p { margin-top:4px; color:var(--ink); font:15px/1.45 var(--sans); }
#chat-latest { position:absolute; bottom:5px; left:50%; transform:translateX(-50%); border-radius:18px; padding:7px 12px; font:12px var(--sans); background:var(--ink); color:var(--sheet); white-space:nowrap; }
.chat-foot { border-top:1px solid var(--rule); padding-block:15px; }
.join-button,#chat-form { width:100%; min-height:43px; border-radius:3px; }
.join-button { justify-content:space-between; padding:8px 13px; background:#343631; color:#fff; font:13px var(--sans); }
.join-button:hover { background:#191b18; }
#chat-form { display:flex; gap:6px; align-items:center; border:1px solid #b7b9af; background:#fcfbf7; padding:3px 4px 3px 10px; }
#chat-form:focus-within { outline:1px solid var(--ink); }
#chat-input { min-width:0; flex:1; border:0; outline:0; background:transparent; font:16px var(--sans); }
#chat-form button { width:34px; height:34px; border-radius:2px; color:#fff; background:var(--ink); }
#chat-expiry { margin-top:5px; color:var(--soft); font:11px/1.3 var(--sans); }
#chat-status:not(:empty) { font:12px/1.4 var(--sans); color:var(--soft); margin-top:5px; }
.sound-desk { position:relative; z-index:2; display:grid; grid-template-columns:minmax(260px,.83fr) minmax(0,1.5fr); align-items:center; gap:clamp(26px,4vw,74px); padding:16px var(--gutter) max(16px,env(safe-area-inset-bottom)); background:var(--desk); color:#efeee8; }
.receiver { display:flex; align-items:center; min-width:0; gap:13px; }
.record-button { width:58px; height:58px; flex:none; padding:0; border-radius:50%; }
.record { display:grid; place-items:center; width:100%; height:100%; border-radius:50%; border:1px solid #686b60; background:conic-gradient(from 25deg,transparent 25%,#d1d2bd22,transparent 55% 77%,#e1e0c51f,transparent),repeating-radial-gradient(#333630 0px 1px,#21231f 2px 3px); }
.record i { display:grid; place-items:center; width:48%; height:48%; border-radius:50%; background:#d4d4c9; color:#252721; }
.record i::before { content:""; width:0; height:0; border-block:4px solid transparent; border-left:6px solid currentColor; margin-left:2px; }
.record-button[aria-pressed=true] i::before { width:7px; height:9px; border:0; border-inline:2px solid currentColor; margin:0; }
.record-button:hover i { background:#faf9f1; }
.radio-info { min-width:0; flex:1; }
.station-name { gap:7px; font-size:9px; letter-spacing:.075em; color:#cbcdc3; }
#track-title { font:400 23px/1.1 var(--serif); letter-spacing:-.035em; margin-block:3px 0; }
.programme,.fader { display:flex; align-items:center; gap:9px; }
#music-time,.fader output { font:10px var(--mono); color:#c3c5bc; white-space:nowrap; }
.desk-icon,#mix-toggle { min-width:36px; min-height:36px; border-radius:50%; border:1px solid #66695f; padding:5px; }
.desk-icon .icon { width:14px; height:14px; }
.mixer { border-left:1px solid #56594f; padding-left:clamp(20px,3vw,60px); }
.channels { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,2.8vw,50px); }
.channel-top { display:flex; align-items:center; justify-content:space-between; gap:5px; }
.channel-top label { font:15px var(--sans); }
.channel-switch { min-height:28px; display:flex; align-items:center; gap:5px; padding:0 2px 0 5px; color:#ced0c7; font:10px var(--mono); }
.channel-switch[aria-pressed=true] i { background:currentColor; }
.sound-desk input[type=range] { --fill:0%; appearance:none; -webkit-appearance:none; flex:1; background:transparent; height:23px; min-width:0; width:100%; cursor:pointer; margin:0; color:#e0e1d7; }
.sound-desk input[type=range]::-webkit-slider-runnable-track { height:2px; background:linear-gradient(to right,currentColor var(--fill),#686b62 0%); }
.sound-desk input[type=range]::-moz-range-track { height:2px; background:#686b62; }
.sound-desk input[type=range]::-moz-range-progress { height:2px; background:currentColor; }
.sound-desk input[type=range]::-webkit-slider-thumb { appearance:none; width:6px; height:12px; border-radius:1px; background:currentColor; margin-top:-5px; }
.sound-desk input[type=range]::-moz-range-thumb { border:0; width:6px; height:12px; border-radius:1px; background:currentColor; }
.sound-desk .programme input { height:18px; }
.programme input::-webkit-slider-thumb { width:4px!important; height:8px!important; margin-top:-3px!important; }
.programme input:disabled { opacity:.75; cursor:default; }
#mix-toggle,.mix-heading { display:none; }
.room-notices { position:absolute; z-index:4; bottom:106px; left:var(--gutter); max-width:min(90%,420px); pointer-events:none; }
.room-notices p:not(:empty),.noscript { background:var(--sheet); color:var(--ink); padding:8px 13px; font:13px/1.4 var(--sans); box-shadow:0 2px 12px #15171333; }
.noscript { position:fixed; top:60px; left:8px; }
@media (max-width:950px) {
  .intention { position:static; align-self:flex-start; max-width:100%; margin-top:12px; }
  .room-scene { --gutter:26px; }
  .sound-desk { gap:20px; }
}
@media (max-width:860px),(max-height:490px) {
  .sound-desk { grid-template-columns:minmax(0,1fr) auto; gap:18px; padding-block:8px max(8px,env(safe-area-inset-bottom)); }
  .receiver { max-width:430px; }
  .record-button { width:46px; height:46px; }
  #track-title { font-size:20px; }
  #mix-toggle { display:flex; width:auto; gap:7px; border-radius:4px; padding:6px 11px; font:12px var(--sans); }
  #mix-toggle[aria-expanded=true] { color:var(--desk); background:var(--sheet); }
  .mixer { display:none; position:absolute; z-index:3; right:12px; bottom:calc(100% + 5px); width:min(350px,calc(100vw - 24px)); max-height:calc(var(--room-height,100dvh) - 80px); overflow:auto; border:1px solid #5c6056; padding:12px 17px; background:var(--desk); box-shadow:0 5px 22px #17191540; }
  .mixer.is-open { display:block; }
  .mix-heading { display:flex; justify-content:space-between; padding-bottom:7px; border-bottom:1px solid #56594f; }
  #close-mix { font:21px var(--sans); width:32px; height:32px; }
  .channels { grid-template-columns:1fr; gap:5px; padding:6px 0; }
  .channel { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:13px; }
  .channel-switch { min-height:36px; }
  .room-notices { bottom:74px; }
}
@media (max-width:680px) and (orientation:portrait) {
  .listening-room { --gutter:16px; }
  .room-header { min-height:49px; gap:12px; }
  .room-header .brand img { width:59px; }
  .brand span { font-size:7px; }
  .timer-modes { padding:2px; }
  .timer-modes button { min-height:30px; padding-inline:10px; gap:4px; font-size:12px; }
  .room-floor { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1.28fr) minmax(0,1fr); }
  .room-scene { --gutter:20px; padding-block:clamp(16px,2.9vh,30px); }
  .scene-photo { object-position:48% 55%; }
  #room-name { font-size:clamp(36px,10vw,53px); margin-top:4px; }
  .plate,.timer-meta { font-size:8px; }
  #timer-display { font-size:clamp(51px,8.5vh,85px); line-height:1; margin:3px 0; }
  .timer-actions { margin-top:8px; gap:7px; }
  .start { min-height:34px; padding-inline:13px; font-size:12px; }
  .scene-icon { width:32px; height:32px; }
  .intention { position:absolute; right:var(--gutter); bottom:clamp(18px,3vh,32px); max-width:37%; margin:0; }
  #intention { font-size:16px; }
  .chat-head,.chat-foot { padding:9px var(--gutter); }
  .chat-head { display:flex; align-items:center; justify-content:space-between; }
  .chat-heading { display:contents; }
  #chat-title { font-size:25px; }
  #invite { order:1; }
  .room-presence { margin:0 auto 0 12px; font-size:9px; }
  #chat-empty { flex-direction:row; gap:9px; text-align:left; padding:5px 14px; }
  #chat-empty img { width:clamp(70px,25vw,120px); max-height:100%; }
  #empty-title { margin:0 0 3px; font-size:23px; }
  #chat-note { margin:0; max-width:24ch; font-size:12px; }
  #chat-list { padding-block:3px; }
  .chat-foot { padding-block:8px; }
  .join-button,#chat-form { min-height:40px; }
}
@media (max-height:530px) and (orientation:landscape) {
  .listening-room { --rail:clamp(238px,36vw,330px); --gutter:16px; }
  .room-header { min-height:40px; padding-block:3px; }
  .timer-modes { padding:1px; } .timer-modes button { min-height:27px; }
  .room-scene { padding:12px 18px; }
  #room-name { font-size:33px; margin-top:2px; }
  #timer-display { font-size:clamp(40px,13vh,70px); }
  .timer-meta,.plate { font-size:8px; }
  .timer-actions { margin-top:6px; }
  .start,.scene-icon { min-height:30px; height:30px; }
  .intention { position:absolute; right:12px; bottom:12px; max-width:37%; }
  .chat-head,.chat-foot { padding:7px 12px; }
  #chat-title { font-size:24px; } .room-presence { margin:0; font-size:9px; }
  #chat-empty { flex-direction:row; gap:6px; text-align:left; padding:4px 9px; }
  #chat-empty img { width:31%; max-height:98%; } #empty-title { font-size:20px; margin:0 0 2px; } #chat-note { font-size:11px; }
}
@media (max-width:370px) { .intention { max-width:30%; } }
@media (max-height:570px) and (orientation:portrait) {
  .intention { max-width:35%; } .room-scene { padding-block:10px; }
  #room-name { font-size:29px; } #timer-display { font-size:44px; } .timer-actions { margin-top:5px; }
}
@media (max-width:720px),(max-width:1000px) and (pointer:coarse) {
  #focus-room.is-typing { grid-template-rows:auto minmax(0,1fr); }
  #focus-room.is-typing .sound-desk { display:none; }
  #focus-room.is-typing .room-floor { grid-template: minmax(0,1fr) / minmax(0,1fr); }
  #focus-room.is-typing .room-scene { display:none; }
}

#quiet-view { position:absolute; right:var(--gutter); top:clamp(18px,3vh,38px); display:flex; align-items:center; gap:7px; padding:7px 11px; min-height:34px; color:white; background:#1f211ddb; border:1px solid #aaa99e80; border-radius:22px; font:12px var(--sans); }
#quiet-view:hover { background:#151713; }
#quiet-view .icon { width:14px; height:14px; }
#focus-room.quiet { grid-template-rows:auto minmax(0,1fr); }
#focus-room.quiet .room-floor { grid-template:minmax(0,1fr) / minmax(0,1fr); }
#focus-room.quiet #room-chat,#focus-room.quiet .sound-desk { display:none; }
#focus-room.quiet .room-notices { bottom:auto; top:68px; left:50%; transform:translateX(-50%); }
@media (max-width:680px),(max-height:530px) {
  #quiet-view { top:12px; right:12px; min-height:30px; padding:4px 8px; font-size:11px; }
  .intention { max-width:32%; }
}
@media (max-width:360px),(max-height:360px) {
  .intention { bottom:52px; max-width:33%; }
}