.listening-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:26px;align-items:start;margin-top:24px}
.listener-controls,.comments-panel{min-width:0;border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:30px}
.listener-controls{background:radial-gradient(ellipse at 100% 0,#ff5b8d0e,transparent 55%),radial-gradient(ellipse at 0 0,#10c4e80d,transparent 60%),var(--surface)}
.listening-room .player-top{align-items:center;gap:12px;margin-bottom:30px}
.listening-room .player-top>.eyebrow{font-size:9px}
.listener-heading{display:flex;align-items:center;gap:24px}
.listener-logo{width:96px;height:96px;object-fit:contain;flex-shrink:0}
.listening-room .player-content h1{font-size:clamp(30px,3.2vw,46px);line-height:1.2;letter-spacing:-.045em;overflow-wrap:anywhere}
.listening-room .dj-name{color:var(--secondary);margin-top:12px;font-size:13px}
.title-admin{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;margin-top:22px}
.title-admin[hidden]{display:none}
.title-admin .title-toggle{min-height:44px;font-size:12px;padding:10px 15px;border-color:var(--accent);color:var(--accent)}
.title-admin .title-toggle[aria-checked="true"]{border-color:var(--secondary);color:var(--secondary)}
.title-admin .title-toggle:disabled{opacity:.65;cursor:wait}
.title-admin p{font-size:10px;line-height:1.8}
#title-toggle-feedback{flex-basis:100%;color:var(--accent)}
#title-toggle-feedback:empty{display:none}
.listening-room .track-name{font-size:14px;line-height:1.8;color:var(--accent);border-left:2px solid var(--secondary);padding-left:12px;margin-top:20px;overflow-wrap:anywhere;white-space:pre-wrap}
.listening-room .listener-count{margin-top:22px;font-size:11px}
.listener-names{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0;padding:0;max-height:132px;overflow:auto}
.listener-names[hidden]{display:none}
.listener-names li{font-size:11px;line-height:1.6;color:var(--text);background:#10c4e80d;border:1px solid var(--line);border-radius:20px;padding:5px 10px;max-width:100%;overflow-wrap:anywhere}
.listener-names li:nth-child(even){border-color:#ff5b8d40;background:#ff5b8d0a}

.listening-room .player-description{font-size:13px;margin-top:16px}
.listener-wave{height:96px;display:flex;align-items:center;justify-content:center;gap:6px;margin-top:25px;overflow:hidden;opacity:.8}
.listener-wave i{width:6px;border-radius:8px;background:var(--accent);flex-shrink:0}
.listener-wave i:nth-child(n+19){background:var(--secondary)}
.listener-wave .wave-0{height:18px}.listener-wave .wave-1{height:38px}.listener-wave .wave-2{height:63px}.listener-wave .wave-3{height:84px}.listener-wave .wave-4{height:50px}.listener-wave .wave-5{height:28px}
.listener-wave.is-playing i{animation:listener-wave-pulse var(--wave-duration,1.1s) ease-in-out var(--wave-delay,0s) infinite;transform-origin:center}
.listener-wave i:nth-child(6n+1){--wave-duration:.86s;--wave-delay:-.34s}
.listener-wave i:nth-child(6n+2){--wave-duration:1.18s;--wave-delay:-.72s}
.listener-wave i:nth-child(6n+3){--wave-duration:.98s;--wave-delay:-.18s}
.listener-wave i:nth-child(6n+4){--wave-duration:1.32s;--wave-delay:-.93s}
.listener-wave i:nth-child(6n+5){--wave-duration:1.06s;--wave-delay:-.51s}
.listener-wave i:nth-child(6n){--wave-duration:1.24s;--wave-delay:-1.08s}
@keyframes listener-wave-pulse{0%,100%{transform:scaleY(.35)}35%{transform:scaleY(1.05)}65%{transform:scaleY(.55)}}
@media(prefers-reduced-motion:reduce){.listener-wave.is-playing i{animation:none}}

.listening-room .player-message{margin-top:18px;background:var(--bg);min-height:82px}
.listening-room .player-message strong{font-size:13px}
.listening-room .player-message p{font-size:11px}
.listening-room .play-button{min-height:58px;font-size:14px}
.listening-room .volume-row{margin-top:20px;gap:14px;font-size:11px}
.listening-room .volume-row input{height:5px}
.listening-room .share-button{font-size:12px;min-height:48px;margin-top:20px}
.quality-control{margin-top:24px;min-width:0}
.quality-control label{display:block;font-size:12px;margin-bottom:10px;color:var(--text)}
.quality-control select{display:block;width:100%;min-height:48px;padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--text);font:inherit;font-size:13px;color-scheme:dark}
.quality-control select:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.quality-control p{font-size:11px;line-height:1.8;margin-top:10px;min-height:40px}
.latency-control{margin-top:20px}.latency-control label{display:block;font-size:12px;color:var(--text);margin-bottom:10px}.latency-control select{width:100%;min-height:48px;padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--text);font:inherit;font-size:13px;color-scheme:dark}.latency-control select:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.latency-control p{font-size:11px;line-height:1.8;margin:10px 0}.latency-control .return-live-button{min-height:44px;padding:10px 14px;font-size:12px}.return-live-button:disabled{opacity:.5;cursor:not-allowed}
.comments-heading h2{display:flex;align-items:center;gap:8px;white-space:nowrap}.comments-heading h2>svg{width:24px;height:24px;color:var(--accent);flex-shrink:0}.comments-heading h2>span{margin-left:-8px}
.comment-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}.comment-delete-button,.comment-emoji-toggle{display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;padding:10px;border:1px solid var(--line);border-radius:8px;color:var(--accent);background:var(--bg)}.comment-delete-button{color:var(--secondary);border:0;background:transparent}.comment-delete-button svg,.comment-emoji-toggle svg,.comment-clear-button svg{width:20px;height:20px}.comment-clear-button{display:flex;align-items:center;gap:8px;min-height:44px;padding:8px 12px;border:1px solid var(--line);background:var(--bg);border-radius:8px;color:var(--secondary);font:inherit;font-size:11px}.comment-moderation{display:flex;justify-content:flex-end;margin-top:12px}.comment-composer-tools{display:flex;align-items:center;gap:12px}.comment-composer-tools>span{font-size:10px;color:var(--muted)}.comment-emoji-toggle:disabled{opacity:.45;cursor:not-allowed}.comment-emoji-toggle[aria-expanded="true"]{border-color:var(--accent);background:#10c4e814}.comment-emoji-panel{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px;padding:10px 2px;margin-top:10px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}.comment-emoji-panel button{min-width:0;min-height:40px;border:0;border-radius:6px;background:transparent;font-size:22px}.comment-emoji-panel button:hover{background:var(--surface2)}
.comment-remove-dialog{max-width:min(440px,calc(100vw - 32px));margin:auto;padding:26px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--text)}.comment-remove-dialog::backdrop{background:#020b13cc}.comment-remove-dialog h3{font-size:22px;margin-bottom:16px}.comment-remove-dialog>p,.comment-remove-dialog blockquote{font-size:13px;line-height:1.8;overflow-wrap:anywhere}.comment-remove-dialog blockquote{padding:14px;border-left:2px solid var(--secondary);margin:14px 0;max-height:170px;overflow:auto;white-space:pre-wrap}.comment-remove-dialog>div{display:flex;justify-content:flex-end;gap:12px;flex-wrap:wrap;margin-top:22px}.comment-remove-dialog .button{min-height:44px;font-size:12px;padding:10px 15px}.comment-confirm-delete{background:var(--secondary)}#comment-remove-error{color:#ff9ab9;margin-top:12px}.comment-confirm-delete:disabled,.comment-clear-button:disabled{opacity:.5;cursor:not-allowed}
@media(max-width:450px){.comment-emoji-panel{grid-template-columns:repeat(4,minmax(0,1fr))}.latency-control select{font-size:16px}.comments-heading h2{font-size:26px;gap:6px}.comments-heading h2>span{margin-left:-6px}.comments-heading h2>svg{width:22px;height:22px}}
@media(max-width:700px){.quality-control select{font-size:16px}}
.listening-room .player-details{margin-top:12px;padding-bottom:4px;border-bottom:0}
.listening-room .player-details summary,.listening-room .player-details p{font-size:11px}
.comments-panel{padding:24px;display:flex;flex-direction:column}
.comments-panel [hidden]{display:none}
.comments-heading{display:flex;gap:15px;align-items:center;justify-content:space-between;padding-bottom:20px;border-bottom:1px solid var(--line)}
.comments-heading .eyebrow{font-size:8px;color:var(--muted);margin-bottom:10px}
.comments-heading h2{font-size:28px;letter-spacing:-.045em;line-height:1.2}
.comments-heading h2>span{color:var(--secondary)}
.comments-count{color:var(--accent);background:var(--bg);border:1px solid var(--line);min-width:36px;height:36px;display:grid;place-items:center;border-radius:50%;font-size:11px;flex-shrink:0}
.comments-list{list-style:none;margin:0;padding:12px 0;min-height:360px;height:600px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line) var(--surface)}
.comments-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;height:100%;min-height:180px;padding:20px 15px}
.comment-empty-icon{color:var(--secondary);height:48px;width:48px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;margin-bottom:18px}
.comments-empty strong{font-size:14px;font-weight:500}
.comments-empty p{font-size:11px;line-height:1.9;margin-top:8px;max-width:250px}
.comment-item{display:flex;align-items:start;gap:12px;padding:8px 0}
.comment-item+.comment-item{border-top:1px solid var(--line)}
.comment-avatar{display:grid;place-items:center;width:31px;height:31px;flex-shrink:0;border-radius:50%;background:#10c4e817;color:var(--accent);font-size:12px;font-weight:600}
.comment-item:nth-child(even) .comment-avatar{background:#ff5b8d17;color:var(--secondary)}
.comment-item>div{min-width:0;flex:1}
.comment-byline{display:flex;align-items:center;justify-content:space-between;gap:12px}
.comment-byline strong{font-size:12px;font-weight:600;line-height:1.7;overflow-wrap:anywhere}
.comment-byline time{font-size:9px;color:var(--muted);flex-shrink:0}
.comment-item p{font-size:12px;line-height:1.65;color:var(--text);white-space:pre-wrap;overflow-wrap:anywhere;margin-top:2px}
.comments-load-state{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:35px;padding-bottom:12px}
.comments-load-state p{font-size:9px;line-height:1.7}
.comments-load-state button{background:none;border:0;padding:0;color:var(--accent);min-height:32px;white-space:nowrap;font-size:10px}
.comment-form{border-top:1px solid var(--line);padding-top:18px}
.comment-form label{display:flex;align-items:center;justify-content:space-between;font-size:11px;margin-bottom:8px;font-weight:500}
.comment-form label>span{color:var(--secondary);font-size:9px;font-weight:400}
.comment-form input,.comment-form textarea{display:block;width:100%;border:1px solid var(--line);border-radius:7px;padding:12px;background:var(--bg);color:var(--text);font:inherit;font-size:12px;line-height:1.7;min-height:44px;resize:vertical}
.comment-form input::placeholder,.comment-form textarea::placeholder{color:var(--muted);opacity:.85}
.comment-form textarea:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.comment-form textarea{min-height:90px;max-height:220px}
.comment-form textarea:disabled{cursor:not-allowed;opacity:.6;resize:none}
.comment-name-hint{font-size:9px;line-height:1.8;margin:8px 0 16px}
.comment-submit-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}
.comment-submit-row>span{font-size:9px;color:var(--muted)}
.comment-submit-row .button{font-size:11px;min-height:43px;padding:11px 15px;gap:10px;background:var(--secondary)}
.comment-submit-row .button:disabled{background:var(--surface2);color:var(--muted);border-color:var(--line);cursor:not-allowed;transform:none;filter:none}
.comment-form-error,.comment-form-status{font-size:11px;line-height:1.8;margin-top:10px;overflow-wrap:anywhere}
.comment-form-error{color:#ff9ab9}.comment-form-status{color:var(--accent)}
.comment-form-error:empty,.comment-form-status:empty{display:none}
@media(max-width:1050px){.listening-layout{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:20px}.listener-controls{padding:24px}.comments-panel{padding:20px}.listener-logo{width:72px;height:72px}.listener-heading{gap:16px}.listening-room .player-content h1{font-size:32px}.listening-room .player-top{align-items:start;flex-direction:column;gap:9px}.listener-wave{gap:4px}.listener-wave i{width:4px}.comment-byline{gap:6px}}
@media(max-width:850px){.listening-layout{grid-template-columns:1fr;gap:24px}.listening-room .player-top{flex-direction:row;align-items:center}.comments-list{height:520px}.listener-controls,.comments-panel{padding:26px}.listener-heading{gap:22px}.listener-logo{width:84px;height:84px}.listening-room .player-content h1{font-size:38px}}
@media(max-width:700px){.listening-layout{margin-top:18px;gap:20px}.listener-controls,.comments-panel{padding:20px;border-radius:12px}.listening-room .player-top{margin-bottom:24px;flex-wrap:wrap;gap:12px}.listening-room .player-top>.eyebrow{font-size:7px}.listening-room .player-top>.status{font-size:7px}.listener-logo{width:65px;height:65px}.listener-heading{gap:16px}.listening-room .player-content h1{font-size:30px}.listening-room .dj-name{font-size:12px;margin-top:8px}.listening-room .player-description{font-size:12px}.listener-wave{height:75px;margin-top:20px;gap:4px}.listener-wave i{width:4px}.listener-wave .wave-3{height:70px}.listening-room .player-message{margin-top:14px}.listening-room .player-message strong{font-size:12px}.listening-room .player-message p{font-size:10px}.comments-heading h2{font-size:27px}.comments-list{height:440px}.comment-form input,.comment-form textarea{font-size:16px}.comment-submit-row .button{font-size:12px;min-height:46px}.comment-form label{font-size:12px}.comment-name-hint{font-size:10px}.comments-empty p{font-size:12px}}
/* Compact listener controls; keep the expanded comment history. */
.listener-heading-copy{min-width:0;flex:1}
.listening-room .player-top{margin-bottom:20px}
.listener-heading{gap:18px}
.listening-room .dj-name{display:block;width:fit-content;max-width:100%;margin-top:14px;padding:9px 14px;border:1px solid #ff5b8d52;border-radius:12px;background:#ff5b8d14;color:var(--text);font-size:20px;font-weight:600;line-height:1.5;letter-spacing:0;overflow-wrap:anywhere}
.title-admin{margin-top:14px;gap:8px 12px}
.title-admin .dj-edit-button{min-height:44px;padding:10px 15px;font-size:12px}
.listening-room .listener-count{margin-top:14px}
.listener-names{margin-top:6px;gap:6px}
.listener-wave{height:86px;margin-top:14px}
.listening-room .player-message{margin-top:12px;min-height:68px;padding:14px 16px}
.listening-room .play-button{margin-top:12px;min-height:52px}
.listening-room .volume-row{margin-top:14px}
.quality-control,.latency-control{margin-top:16px}
.quality-control label,.latency-control label{margin-bottom:7px}
.quality-control #quality-error{min-height:0;margin-top:8px;color:#ff9ab9}
.quality-control #quality-error[hidden]{display:none}
.latency-control .return-live-button{margin-top:10px}
.listening-room .share-button{margin-top:14px}
.dj-edit-dialog{width:420px;max-width:calc(100vw - 32px);margin:auto;padding:24px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--text)}
.dj-edit-dialog::backdrop{background:#020b13cc}
.dj-edit-dialog h2{font-size:24px;line-height:1.3;margin-bottom:20px}
.dj-edit-dialog label{display:block;font-size:13px;margin-bottom:8px}
.dj-edit-dialog input{display:block;width:100%;min-height:46px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--text);font:inherit;font-size:16px}
.dj-edit-dialog input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.dj-edit-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:20px}
.dj-edit-actions .button{min-height:44px;padding:10px 16px;font-size:13px}
.dj-edit-actions .button:disabled{opacity:.6;cursor:wait}
#dj-edit-error{font-size:12px;line-height:1.6;color:#ff9ab9;margin-top:12px}
#dj-edit-error:empty{display:none}
@media(max-width:700px){.listening-room .player-top{margin-bottom:18px}.listener-heading{gap:14px}.listener-wave{height:75px;margin-top:12px}.listening-room .player-message{padding:12px;min-height:64px}.quality-control,.latency-control{margin-top:14px}.dj-edit-dialog{padding:20px}}
@media(max-width:700px){.listening-room .dj-name{font-size:16px;margin-top:12px;padding:8px 12px;border-radius:10px}}

/* Ephemeral attachments: isolated from the main live player. */
.room-social-stack{min-width:0;display:grid;gap:20px}
.song-panel{min-width:0;padding:24px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.song-panel [hidden]{display:none}.song-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.song-heading .eyebrow{display:block;font-size:8px;color:var(--muted);margin-bottom:10px}.song-heading h2{font-size:24px;line-height:1.25;letter-spacing:-.04em}.song-heading h2>span{color:var(--secondary)}
.song-count{flex-shrink:0;min-width:36px;height:36px;display:grid;place-items:center;background:var(--bg);color:var(--accent);border:1px solid var(--line);border-radius:50%;font-size:12px}
.song-compose{margin-top:18px}.song-compose summary{display:flex;justify-content:center;align-items:center;min-height:46px;padding:10px 14px;list-style:none;border:1px solid var(--accent);border-radius:8px;color:var(--accent);font-size:13px;font-weight:600;cursor:pointer}.song-compose summary::-webkit-details-marker{display:none}.song-compose[open] summary{margin-bottom:18px}
.song-panel label{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--text);margin:14px 0 8px}.song-panel label span{font-size:10px;color:var(--muted)}.song-panel input,.song-panel select{display:block;width:100%;min-height:46px;background:var(--bg);border:1px solid var(--line);border-radius:8px;color:var(--text);font:inherit;font-size:13px;padding:11px 12px;color-scheme:dark}.song-panel input::placeholder{color:var(--muted)}
.song-panel :is(button,input,select,summary):focus-visible{outline:2px solid var(--accent);outline-offset:3px}.song-panel button{cursor:pointer}.song-panel button:disabled,.song-panel input:disabled{opacity:.5;cursor:wait}.song-panel #song-submit{width:100%;min-height:46px;margin-top:14px;font-size:12px}
.song-privacy{font-size:10px;line-height:1.8;margin:10px 0 0}.song-feedback{font-size:12px;line-height:1.7;color:var(--accent);overflow-wrap:anywhere;margin-top:12px}.song-feedback:empty{display:none}
.song-filters{display:flex;gap:5px;padding:4px;margin-top:18px;border:1px solid var(--line);border-radius:9px;background:var(--bg)}.song-filters button{flex:1;min-width:0;min-height:44px;border:0;border-radius:6px;background:transparent;color:var(--muted);font:inherit;font-size:11px}.song-filters [aria-pressed=true]{background:var(--surface2);color:var(--accent)}
.song-list{padding:0;margin:12px 0 0;list-style:none;max-height:370px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line) var(--surface)}.song-empty{text-align:center;padding:30px 10px;color:var(--muted);font-size:12px}.song-item{padding:16px 0;overflow-wrap:anywhere}.song-item+.song-item{border-top:1px solid var(--line)}.song-item-top{display:flex;justify-content:space-between;gap:10px;align-items:center}.song-ref{font-size:9px;letter-spacing:.08em;color:var(--muted)}
.song-status{display:inline-block;padding:4px 9px;border-radius:20px;font-size:10px;background:#a8badc13;color:var(--muted);border:1px solid var(--line)}.song-status--accepted,.song-status--preparing{color:#f6cd80;background:#f6cd8010;border-color:#f6cd8030}.song-status--playing{color:var(--accent);background:#10c4e815;border-color:#10c4e845}.song-status--done{color:#8de0b2;background:#8de0b210;border-color:#8de0b230}.song-status--rejected,.song-status--cancelled{color:#ff9ab9;background:#ff5b8d10;border-color:#ff5b8d30}
.song-item h3{font-size:16px;line-height:1.5;letter-spacing:-.02em;margin-top:10px;font-weight:600}.song-item .song-artist{font-size:12px;line-height:1.7;margin-top:3px;color:var(--text)}.song-byline{font-size:11px;line-height:1.6;margin-top:7px;color:var(--accent)}.song-byline span{color:var(--muted)}.song-note{font-size:12px;line-height:1.7;margin-top:8px}.song-reply{font-size:12px;line-height:1.7;border-left:2px solid var(--secondary);padding-left:10px;margin-top:10px}.song-reply strong{color:var(--secondary)}
.song-update{display:inline-flex;gap:8px;align-items:center;min-height:44px;margin-top:8px;padding:8px 12px;color:var(--accent);border:1px solid var(--line);border-radius:8px;background:var(--bg);font:inherit;font-size:11px}.song-update svg{width:14px;height:14px}.song-load{display:flex;justify-content:space-between;gap:10px;align-items:center}.song-load p{font-size:10px;line-height:1.8}.song-load button{background:transparent;border:0;min-height:44px;color:var(--accent);font-size:12px}
.song-dialog{width:430px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);margin:auto;padding:24px;background:var(--surface);border:1px solid var(--line);border-radius:16px;color:var(--text);overflow:auto}.song-dialog::backdrop{background:#020b13cc}.song-dialog h3{font-size:22px;letter-spacing:-.03em}.song-dialog #song-update-track{font-size:13px;line-height:1.8;margin-top:12px;overflow-wrap:anywhere}.song-dialog-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:20px}.song-dialog-actions .button{min-height:44px;font-size:12px;padding:10px 14px}#song-update-error{font-size:12px;color:#ff9ab9;line-height:1.7;margin-top:12px}#song-update-error:empty{display:none}
@media(max-width:700px){.song-panel{padding:20px;border-radius:12px}.song-heading h2{font-size:23px}.song-panel input,.song-panel select{font-size:16px}.song-heading .eyebrow{font-size:7px}.song-dialog{padding:20px}}
.comment-attach{display:inline-grid;place-items:center;flex:0 0 44px;min-width:44px;min-height:44px;padding:10px;border:1px solid var(--line);border-radius:9px;background:var(--bg);color:var(--accent);cursor:pointer}
.comment-attach svg{width:22px;height:22px}.comment-attach:disabled{opacity:.45;cursor:not-allowed}
.comment-composer-tools{min-width:0;gap:8px}.comment-submit-row{flex-wrap:wrap}.comment-submit-row .button{margin-left:auto}
.comment-media-hint{font-size:10px;color:var(--muted);line-height:1.6;margin:8px 0 0}
.comment-form input[type=file][hidden],.comment-attachment[hidden]{display:none}
.comment-attachment{display:flex;align-items:center;gap:12px;margin-top:12px;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.comment-attachment img{width:72px;height:54px;object-fit:contain;border-radius:7px;flex:0 0 72px;background:var(--surface2)}
.comment-attachment>div{min-width:0;flex:1}.comment-attachment strong{display:block;overflow-wrap:anywhere;font-size:12px;font-weight:500}
.comment-attachment small{display:block;color:var(--muted);font-size:10px;margin-top:4px}
.comment-attachment>button{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--text);font-size:24px;cursor:pointer}
.comment-attachment>button:disabled{opacity:.45;cursor:wait}.comment-video-label{display:grid;place-items:center;flex:0 0 60px;height:54px;border-radius:7px;background:var(--surface2);color:var(--accent);font-size:12px}
.comment-media{margin-top:10px;max-width:100%;min-width:0}.comment-media img,.comment-media video{display:block;width:100%;max-width:320px;height:auto;max-height:280px;object-fit:contain;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.comment-media>span{display:block;color:var(--muted);font-size:9px;margin-top:7px}
@media(max-width:390px){.comment-composer-tools{gap:6px}.comment-submit-row{gap:8px}.comment-submit-row .button{padding:10px 12px}.comment-media-hint{font-size:10px}.comment-attachment{gap:8px;padding:10px}.comment-attachment img{width:56px;flex-basis:56px}}

/* Compact live workspace. All changes are scoped away from other routes. */
.live-room-page .nav-inner{min-height:78px;padding-top:14px;padding-bottom:14px}
.live-room-page .site-footer{padding-top:24px;padding-bottom:20px;margin-top:24px}
.live-room-page .footer-top{padding-bottom:22px}
.live-room-page .footer-bottom{padding-top:18px}
.live-compact{padding-top:24px;padding-bottom:12px}
.live-compact [hidden]{display:none!important}
.room-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px}
.room-toolbar .back{margin:0;min-height:44px;display:inline-flex;align-items:center;font-size:12px}
.donate-trigger{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:10px 16px;border:1px solid #ff5b8d50;border-radius:10px;background:#ff5b8d10;color:#ff94b2;font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.donate-trigger:hover{background:#ff5b8d1e;border-color:var(--secondary)}
.live-compact .listening-layout{--listener-panel-padding:24px;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:22px;margin-top:0;align-items:stretch}
.live-compact .listener-controls{padding:var(--listener-panel-padding);min-width:0}
.live-compact .player-top{margin-bottom:18px}
.live-compact .listener-logo{width:68px;height:68px}
.live-compact .listener-heading{gap:18px}
.live-compact .player-content h1{font-size:clamp(25px,2.5vw,36px);line-height:1.2;letter-spacing:-.045em}
.live-compact .dj-name{font-size:16px;line-height:1.4;padding:7px 11px;margin-top:10px;border-radius:9px}
.live-compact .title-admin{margin-top:14px;gap:8px}
.live-compact .title-admin button{min-height:40px;padding:8px 12px;font-size:11px}
.live-compact .listener-count{margin-top:14px;font-size:11px}
.listener-meta-row{display:flex;flex-wrap:wrap;align-items:stretch;gap:8px;margin-top:14px}
.live-compact .listener-meta-row .title-admin{display:contents;margin:0}
.live-compact .listener-meta-row .dj-name,.live-compact .listener-meta-row .title-admin button,.live-compact .listener-meta-row .listener-count{display:flex;align-items:center;justify-content:center;flex:1 1 0;min-width:0;min-height:44px;margin:0;padding:8px 10px;border-radius:9px;font-size:12px;line-height:1.4;text-align:center}
.live-compact .listener-meta-row .dj-name{font-size:13px}
.live-compact .listener-meta-row .listener-count{border:1px solid var(--line);background:var(--bg);color:var(--muted)}
.live-compact .listener-meta-row .listener-count:empty,.listener-meta-row #title-toggle-feedback:empty{display:none}
.listener-meta-row #title-toggle-feedback{order:1;flex:0 0 100%;margin:0}
@media(max-width:1150px){.live-compact .listener-meta-row .dj-name,.live-compact .listener-meta-row .title-admin button,.live-compact .listener-meta-row .listener-count{flex-basis:calc(50% - 4px)}}
.live-compact .listener-names{margin-top:6px;max-height:72px}
.live-compact .listener-wave{height:62px;margin:12px 0 0;gap:5px}
.live-compact .listener-wave i{max-height:56px;width:5px}
.live-compact .player-message{min-height:58px;padding:12px 14px;margin-top:12px}
.live-compact .player-message strong{font-size:12px}.live-compact .player-message p{font-size:10px;line-height:1.6}
.live-compact .play-button{min-height:50px;font-size:14px}
.live-compact .volume-row{margin-top:14px;min-height:38px;gap:12px}
.live-compact .volume-row label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.live-compact .volume-row .icon-button{min-width:40px;width:40px;height:40px;min-height:40px}
.listener-settings{margin-top:14px;border:1px solid var(--line);border-radius:9px;background:var(--bg)}
.listener-settings summary{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:44px;cursor:pointer;padding:11px 13px;list-style:none;font-size:12px;color:var(--muted)}
.listener-settings summary::-webkit-details-marker{display:none}.listener-settings summary svg{width:14px;height:14px}
.listener-settings[open] summary{border-bottom:1px solid var(--line);color:var(--text)}
.listener-settings-chevron{font-size:18px;line-height:1}.listener-settings[open] .listener-settings-chevron{transform:rotate(180deg)}
.listener-preferences{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:14px}
.live-compact .quality-control,.live-compact .latency-control{margin:0;min-width:0}
.live-compact .quality-control select,.live-compact .latency-control select{min-height:44px;font-size:12px;padding:10px;min-width:0}
.live-compact .latency-control .return-live-button{font-size:10px;min-height:40px;padding:8px 10px;margin-top:10px}
.live-compact .share-button{margin-top:12px;min-height:44px;font-size:12px}
/* Share the player's padding and real border rounding, including fractional zoom. */
.live-compact .room-social-column{display:flex;flex-direction:column;min-width:0;min-height:0;contain:size;padding-bottom:var(--listener-panel-padding);border-bottom:1px solid transparent}
.live-compact .room-social-stack{display:flex;flex-direction:column;flex:1;min-width:0;min-height:0;height:auto;gap:0;border:1px solid var(--line);border-radius:16px;background:var(--surface);overflow:hidden}
.room-tabs{display:flex;gap:5px;flex:0 0 auto;min-width:0;padding:7px;border-bottom:1px solid var(--line);background:var(--bg)}
.room-tabs button{display:flex;justify-content:center;align-items:center;gap:8px;flex:1;min-width:0;min-height:44px;padding:9px 12px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--muted);font:inherit;font-size:12px;font-weight:500;cursor:pointer;white-space:nowrap}
.room-tabs button[aria-selected=true]{color:var(--accent);background:var(--surface2);border-color:var(--line)}
.room-tabs button span{display:inline-grid;place-items:center;min-width:22px;min-height:22px;padding:2px 5px;border-radius:6px;background:#a9bbd411;color:inherit;font-size:10px}
.room-tabs--mobile{margin-bottom:16px;border:1px solid var(--line);border-radius:10px}
.live-compact .comments-panel,.live-compact .song-panel{display:flex;flex-direction:column;flex:1;min-width:0;min-height:0;border:0;border-radius:0;padding:18px;background:transparent;overflow:hidden}
.live-compact .comments-heading{padding-bottom:12px;gap:10px}.live-compact .comments-heading .eyebrow,.live-compact .song-heading .eyebrow{display:none}
.live-compact .comments-heading h2,.live-compact .song-heading h2{font-size:21px;line-height:1.3;letter-spacing:-.04em}
.live-compact .comments-heading h2 svg{width:21px;height:21px}
.live-compact .comments-count,.live-compact .song-count{min-width:30px;height:30px;font-size:10px}
.live-compact .comment-moderation{margin-top:5px}.live-compact .comment-clear-button{min-height:36px;padding:6px 9px;font-size:10px}
.live-compact .comments-list{flex:1;min-height:120px;height:auto;max-height:none;padding:8px 0;overflow:auto;scrollbar-gutter:stable}
.live-compact .comment-item{padding:9px 0;gap:10px}.live-compact .comment-avatar{width:28px;height:28px;font-size:11px}
.live-compact .comment-byline strong{font-size:12px}.live-compact .comment-item p{font-size:12px;line-height:1.65}
.live-compact .comment-delete-button{width:36px;height:36px;padding:8px}
.live-compact .comments-load-state{min-height:0;padding:0;margin:0}.live-compact .comments-load-state p:empty{display:none}
.live-compact #comments-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.live-compact .comments-load-state button{min-height:36px}
.live-compact .comment-form{display:grid;grid-template-columns:72px minmax(0,1fr);column-gap:10px;align-items:center;padding-top:12px;flex-shrink:0}
.live-compact .comment-form>label[for=comment-name]{margin:0;font-size:11px;display:block}
.live-compact .comment-form>label[for=comment-name]>span{display:none}
.live-compact #comment-name{padding:8px 10px;min-height:42px;font-size:12px;line-height:1.5}
.live-compact .comment-form>label[for=comment-message],.live-compact .comment-name-hint{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);margin:0;padding:0}
.live-compact #comment-message{grid-column:1/-1;min-height:60px;max-height:110px;resize:vertical;padding:10px 12px;font-size:12px;line-height:1.5;margin-top:10px}
.live-compact .comment-submit-row,.live-compact .comment-emoji-panel,.live-compact .comment-attachment,.live-compact .comment-media-hint,.live-compact .comment-form-error,.live-compact .comment-form-status{grid-column:1/-1}
.live-compact .comment-submit-row{margin-top:10px;gap:10px}
.live-compact .comment-submit-row .button{font-size:11px;min-height:44px;padding:9px 12px}
.live-compact .comment-media-hint{font-size:9px;margin-top:6px}.live-compact .comment-form-status,.live-compact .comment-form-error{font-size:10px;margin-top:6px;line-height:1.6}
.live-compact .comment-emoji-panel{margin-top:8px;padding:6px}.live-compact .comment-attachment{margin-top:8px;padding:8px}
.live-compact .comment-media img,.live-compact .comment-media video{max-height:180px;width:auto;max-width:100%;height:auto}
.live-compact .song-heading{gap:10px;margin-bottom:14px}
.song-compose-trigger{min-height:44px;flex-shrink:0;padding:10px 14px;border:1px solid var(--accent);border-radius:8px;background:transparent;color:var(--accent);font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.live-compact .song-filters{margin-top:14px;padding:3px}.live-compact .song-filters button{min-height:40px;font-size:11px}
.live-compact .song-list{flex:1;min-height:100px;max-height:none;overflow:auto;margin-top:8px;scrollbar-gutter:stable}
.live-compact .song-item{padding:12px 0}.live-compact .song-item h3{font-size:14px;margin-top:8px}.live-compact .song-update{min-height:40px;font-size:10px;margin-top:8px}
.live-compact .song-load{margin-top:8px}.live-compact .song-load p{font-size:10px}.live-compact .song-feedback{font-size:11px;margin-top:8px}
.live-compact .song-compose{margin:auto;width:430px;padding:22px;max-height:calc(100dvh - 30px)}
.live-compact .song-compose h3{font-size:20px}.live-compact .song-compose input{min-height:44px;font-size:14px}
.live-compact .song-compose .song-feedback{color:#ff9ab9}
.room-dialog-heading{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:16px}
.room-dialog-close{display:grid;place-items:center;width:44px;height:44px;min-width:44px;padding:0;border:1px solid var(--line);border-radius:9px;background:var(--bg);color:var(--text);font:inherit;font-size:26px;cursor:pointer}
.donate-dialog{width:410px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);margin:auto;overflow:auto;padding:20px;border:1px solid var(--line);border-radius:18px;background:var(--surface);color:var(--text)}
.donate-dialog::backdrop{background:#020b13d9}
.donate-dialog .eyebrow{display:block;font-size:7px;letter-spacing:.13em;color:var(--muted);margin-bottom:8px}.donate-dialog h2{font-size:24px;letter-spacing:-.04em;line-height:1.2}
/* Display-only crop of decorative background; source JPEG and QR pixels unchanged. */
.donate-qr-frame{position:relative;aspect-ratio:1/1.28;width:100%;max-width:300px;margin:0 auto 16px;overflow:hidden;border-radius:14px;background:#e0e0e0}
.donate-qr-frame img{position:absolute;width:136%;max-width:none;height:auto;left:-18%;top:-35%;object-fit:contain}
.donate-qr-frame p{position:absolute;inset:0;display:grid;place-content:center;text-align:center;padding:20px;font-size:12px;line-height:1.7;background:var(--bg);color:var(--text)}
.donate-recipient{display:flex;justify-content:space-between;gap:12px;align-items:center;margin:12px 0 16px;font-size:12px}.donate-recipient>span{color:var(--muted)}.donate-recipient strong{font-size:13px;letter-spacing:.02em}
.donate-dialog label{display:block;font-size:11px;color:var(--muted);margin-bottom:8px}
.donate-account-row{display:flex;gap:8px;min-width:0}.donate-account-row input{min-width:0;width:100%;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:10px 12px;color:var(--text);font:inherit;font-size:17px;letter-spacing:.05em}
.donate-account-row button{flex-shrink:0;min-height:44px;padding:10px 12px;border:1px solid #ff5b8d50;border-radius:8px;background:#ff5b8d14;color:#ff94b2;font:inherit;font-size:11px;cursor:pointer}
.donate-actions{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:14px}.donate-actions .button{font-size:11px;min-height:44px;padding:10px 14px}.donate-actions .text-link{font-size:11px;min-height:44px;display:inline-flex;align-items:center}
#donate-hint,#donate-feedback{font-size:10px;line-height:1.8;margin-top:12px;color:var(--muted)}#donate-feedback{color:var(--accent)}#donate-feedback:empty{display:none}
.live-compact :is(button,input,select,summary,a):focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(max-width:850px){.live-compact{padding-top:14px}.room-toolbar{margin-bottom:10px}.live-compact .listening-layout{display:block}.live-compact .room-social-column{display:contents;contain:none;padding:0;border:0}.live-compact .room-social-stack{height:clamp(540px,calc(100dvh - 240px),700px)}.live-compact .listener-controls{padding:20px}.live-compact .listener-logo{width:60px;height:60px}.live-compact .player-content h1{font-size:29px}.live-compact .listener-wave{height:58px}.live-room-page .site-footer{margin-top:14px}.live-room-page .site-header .nav-inner{min-height:72px}.live-compact .song-compose input,.live-compact #comment-message,.live-compact #comment-name{font-size:16px}}
@media(max-width:500px){.live-compact .listener-controls{padding:18px}.live-compact .comments-panel,.live-compact .song-panel{padding:15px}.room-tabs button{font-size:11px;padding:8px;gap:6px}.room-tabs button span{min-width:20px;font-size:9px}.room-tabs--mobile{padding:5px}.live-compact .listener-heading{gap:13px}.live-compact .player-content h1{font-size:26px}.live-compact .dj-name{font-size:15px}.live-compact .listener-preferences{grid-template-columns:1fr;padding:12px;gap:14px}.live-compact .quality-control select,.live-compact .latency-control select{font-size:16px}.live-compact .comments-heading h2,.live-compact .song-heading h2{font-size:20px}.live-compact .song-compose{padding:18px}.donate-dialog{padding:16px}.donate-qr-frame{max-width:275px}.donate-trigger{padding:9px 12px;font-size:11px}.live-compact .player-top>.eyebrow{font-size:7px}.live-compact .player-top>.status{font-size:8px}}
@media(prefers-reduced-motion:reduce){.live-compact .listener-wave.is-playing i{animation:none}}