/* Room-only spacing, loaded after the feature styles. */
#room :is(button,a) svg{flex-shrink:0;vertical-align:middle}
#room :is(.djbtn,.dj-upload-btn,.csend,.cbtn,.vicn,.pact,.qdel,.queue-move button,.queue-navigation button){display:inline-flex;align-items:center;justify-content:center;gap:6px;line-height:1.25}
#room :is(.csend,.cemoji){flex-shrink:0;min-width:44px;min-height:44px;padding:0 10px}
#room .djrow{gap:8px;align-items:stretch;min-width:0}
#room .djinp{min-width:0}
#room :is(.djbtn,.dj-upload-btn){min-height:44px;flex-shrink:0;padding:8px 10px}
#room .room-feature-actions{gap:8px}
#room .room-feature-actions button{line-height:1.35;gap:8px}
#room .sheet-heading h2{margin:0;min-width:0;overflow-wrap:anywhere}
#room .sheet-heading button{display:grid;place-items:center;flex:0 0 44px;padding:0;line-height:1}
#room .sheet-account-links a,#room .sheet-account-links button{line-height:1.5;overflow-wrap:anywhere}
#room .pbadges{display:flex;align-items:center;flex-wrap:wrap;gap:4px}
#room .pname{min-width:0;overflow:hidden;text-overflow:ellipsis}

:is(#music-dialog,#minigames-dialog,#premium-tools-dialog,.sticker-dialog,.challenge-results){padding:24px;max-height:calc(100dvh - 32px);scroll-padding:16px;overscroll-behavior:contain}
:is(.music-heading,.challenge-dialog header,.premium-dialog-heading,.sticker-dialog header){align-items:center;gap:16px;margin-bottom:16px}
:is(.music-heading>div,.challenge-dialog header h2,.premium-dialog-heading h2,.sticker-dialog header h2){min-width:0;overflow-wrap:anywhere}
:is(#music-close,.challenge-dialog .room-dialog-close,.premium-dialog-heading>button,.sticker-dialog [data-close]){display:flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;margin:0;font-size:22px;line-height:1}
:is(#music-dialog,#minigames-dialog,#premium-tools-dialog,.sticker-dialog) :is(input,select,textarea){min-width:0;max-width:100%;box-sizing:border-box}
:is(#music-dialog,#minigames-dialog,#premium-tools-dialog,.sticker-dialog) select{padding-right:30px;min-height:44px}
:is(.music-actions,.host-request-actions,.host-request-pages){gap:8px;flex-wrap:wrap}
:is(.music-actions button,.music-actions a,.host-request-actions button,.host-request-pages button){display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;line-height:1.4;margin:0;text-align:center}
.host-request-actions{flex-wrap:nowrap;flex-shrink:0}
.host-request-pages span{flex:1;min-width:70px}
.premium-tool-body article{padding:12px 0}
.premium-tool-body>label{gap:10px;line-height:1.5}
.premium-tool-body>button{line-height:1.4;padding:12px}
#premium-tools-dialog .premium-tools{margin-top:0}
#premium-tools-dialog .premium-tool-body{max-height:calc(100dvh - 156px);padding:2px 4px 8px}
#music-form>label{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:4px 12px;line-height:1.5}
#music-form>label span{float:none}
.music-customize summary,.music-advanced summary{line-height:1.5}
.music-actions>*{max-width:100%;overflow-wrap:anywhere}
.sticker-dialog .sticker-help{margin:0;line-height:1.6}
.sticker-dialog>p.sticker-help{margin-bottom:16px}
.sticker-dialog [role=status]:empty{display:none}
.sticker-manage button{flex-shrink:0;margin:0;line-height:1.4}
.sticker-dialog input[type=file]{font-size:12px;padding:8px}
.sticker-dialog input[type=file]::file-selector-button{padding:8px;margin-right:8px}
.chat-picker .picker-tabs button{display:flex;align-items:center;justify-content:center;line-height:1.4;padding:8px}
.chat-picker .picker-emojis button{display:grid;place-items:center;padding:4px;line-height:1}
.chat-picker .picker-add{line-height:1;padding:0}
.challenge-dialog .challenge-options button{margin:8px 0;padding:10px 12px;line-height:1.4}
.challenge-players li>strong{min-width:0;overflow-wrap:anywhere}
.podium-place{min-width:0;padding:14px 8px;overflow-wrap:anywhere}
.podium-place h3{line-height:1.4}
.challenge-hud button{display:inline-flex;align-items:center;justify-content:center;line-height:1.4}
.feature-tip{line-height:1.6;padding:14px 48px 14px 16px}
.feature-tip button{display:grid;place-items:center;width:40px;height:40px;padding:0;line-height:1}
@media(max-width:600px){
 :is(#music-dialog,#minigames-dialog,#premium-tools-dialog,.sticker-dialog,.challenge-results){padding:16px;max-height:calc(100dvh - 24px)}
 :is(.music-heading,.challenge-dialog header,.premium-dialog-heading,.sticker-dialog header){gap:12px;margin-bottom:12px}
 :is(#music-dialog,#minigames-dialog,.sticker-dialog) h2{font-size:20px;line-height:1.3}
 #room .djrow{flex-wrap:wrap;gap:6px}
 #room .djinp{flex:1 1 140px}
 #room .djbtn{flex:0 0 auto}
 .host-request-row{gap:8px}
}
@media(max-width:380px){.music-option-grid,.music-instrument-grid{grid-template-columns:minmax(0,1fr)}}

/* Wider desktop conversation column; the visualizer yields space on the left. */
@media(min-width:701px){
 #room .rpanel{width:clamp(250px,27vw,300px);min-width:0}
 #room .rpanel .csec,#room .rpanel .cmsgs{min-height:0}
 #room .rpanel .cmsgs{padding:12px 16px;gap:8px}
 #room .rpanel .cmsg{font-size:14px;line-height:1.6}
 #room .rpanel .cwho{font-size:11px;line-height:1.5}
 #room .rpanel .csys{font-size:11px;line-height:1.6}
 #room .rpanel .cinp{font-size:14px;min-height:44px;padding:12px}
 #room .rpanel .csend{min-width:44px;justify-content:center;padding:0 10px}
 #room .rpanel .pname{font-size:12px;min-width:0}
}

/* Use geometric arrow icons, independent of the font's baseline. */
#room .queue-move button,#room .queue-navigation button{padding:0;gap:0;line-height:0}
#room .queue-move span{width:18px;height:18px;line-height:0}
#room .queue-move svg,#room .queue-navigation svg{display:block;width:18px;height:18px;margin:0}
/* Flat search fields, with a color-only focus indication. */
#room .djinp{appearance:none;-webkit-appearance:none;background:var(--surface2);border:1px solid var(--border2);box-shadow:none;margin:0;min-height:44px}
body :is(input,textarea,select):is(:focus,:focus-visible){outline:none!important;box-shadow:none!important}
body :is(input:not([type=range]):not([type=checkbox]):not([type=radio]),textarea,select):focus{background-color:color-mix(in srgb,var(--surface2,#191926) 92%,white)!important;border-color:color-mix(in srgb,var(--border2,#44375e) 65%,var(--accent,#7c6fff))!important}
body input:is([type=checkbox],[type=radio]):focus{accent-color:var(--ui-focus,#c4b6ff)}
body input[type=range]:focus::-webkit-slider-thumb{background:var(--ui-focus,#c4b6ff);box-shadow:none}
body input[type=range]:focus::-moz-range-thumb{background:var(--ui-focus,#c4b6ff);box-shadow:none}
#room :is(#qsave,#qsave-mob,.saved-playlists-open,.room-details-open){display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;gap:6px;margin:0;min-height:44px;padding:8px 12px;border:1px solid var(--border2);border-radius:5px!important;background:var(--surface2);color:var(--text);font:500 12px/1.4 system-ui;letter-spacing:0;text-align:center;cursor:pointer}
#room :is(#qsave,#qsave-mob,.saved-playlists-open,.room-details-open):hover{background:var(--adim);border-color:var(--accent)}
#room #mob-queue>.room-details-open{margin:10px 14px}
.mobile-playlist-actions{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}.mobile-playlist-actions button{flex:1;min-height:44px}
#saved-playlists-dialog{box-sizing:border-box;width:min(560px,calc(100% - 24px));max-height:calc(100dvh - 32px);margin:auto;padding:24px;overflow:auto;background:#10101c;color:var(--text);border:1px solid var(--border2);font:14px/1.5 system-ui;color-scheme:dark}
#saved-playlists-dialog::backdrop{background:#05050ccc;backdrop-filter:blur(5px)}
#saved-playlists-dialog header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}#saved-playlists-dialog h2{font-size:20px;margin:0}
#saved-playlists-dialog button{min-height:44px;padding:10px 12px;border:1px solid var(--border2);background:var(--surface2);color:var(--text);cursor:pointer;line-height:1.4}#saved-playlists-dialog button:disabled{opacity:.45;cursor:default}
#saved-playlists-dialog header button{display:grid;place-items:center;flex:0 0 44px;height:44px;padding:0;font-size:22px;line-height:1}
#saved-playlists-dialog input{box-sizing:border-box;width:100%;min-width:0;padding:12px;border:1px solid var(--border2);background:var(--surface2);color:var(--text);font:inherit}
#saved-playlists-dialog p{color:var(--text2);margin:12px 0}.playlist-status:empty{display:none}.saved-playlist-list article{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--border)}.saved-playlist-list article>div{min-width:0;overflow-wrap:anywhere}.saved-playlist-list strong,.saved-playlist-list small{display:block}.saved-playlist-list small{color:var(--text2);margin-top:4px}.saved-playlist-list article>button{flex-shrink:0}
@media(max-width:450px){#saved-playlists-dialog{padding:16px}.saved-playlist-list article{align-items:stretch;flex-direction:column}}