*{box-sizing:border-box}html,body{min-height:100%;height:100%}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#06030d;color:#fff;overflow:hidden}body:before{content:"";position:fixed;inset:0;background:radial-gradient(circle at 75% 15%,#2e174a 0,#07020d 36%,#040208 100%);z-index:-3}body:after{content:"";position:fixed;inset:0;background:linear-gradient(180deg,#01001255 0%,#02000ad5 88%),radial-gradient(circle at 82% 18%,#fff6 0 13px,#0000 14px),radial-gradient(circle at 12% 52%,#9c29ff33,transparent 26%);z-index:-2;pointer-events:none}a{color:#fff;text-decoration:none}button,input{font:inherit}button{border:0;cursor:pointer;color:#fff}input{outline:none}.room-head{position:fixed;top:0;left:0;right:288px;height:38px;z-index:50;background:linear-gradient(90deg,#020207e8,#04000bb8 68%,#0000);display:flex;align-items:center;gap:11px;padding:0 14px 0 8px}.hamburger{width:28px;height:28px;background:#0000;display:grid;gap:4px;place-content:center;padding:0}.hamburger span{display:block;width:18px;height:2px;background:#a7adbd;border-radius:3px}.room-head h1{font-size:18px;font-weight:400;margin:0 4px 0 2px}.pill{height:23px;border:1px solid #ffffff70;border-radius:99px;background:#05050db0;padding:4px 13px;font-size:11px;color:#e8e8ee;display:inline-flex;align-items:center;gap:6px}.about{font-size:10px}.account{margin-left:auto;font-size:12px;color:#eee}.icon-rail{position:fixed;top:38px;bottom:82px;left:0;width:34px;background:#060714b8;z-index:35;display:flex;flex-direction:column;align-items:center;gap:20px;padding-top:22px;color:#9fb5d4;font-size:18px}.icon-rail span:nth-child(2),.icon-rail span:nth-child(7){color:#00b8ff}.drawer-shade{position:fixed;left:0;right:0;top:0;bottom:82px;background:#0008;z-index:69;display:none}.drawer-shade.open{display:block}.panel{background:linear-gradient(180deg,#17051fdc,#090210e8);border:1px solid #ffffff1f;box-shadow:0 28px 80px #000b,inset 0 1px 0 #fff2;backdrop-filter:none!important;}.menu-drawer{position:fixed;z-index:70;left:0;top:0;bottom:82px;width:355px;max-width:92vw;padding:16px;overflow:auto;transform:translateX(-105%);transition:.22s ease;border-radius:0 18px 18px 0}.menu-drawer.open{transform:translateX(0)}.drawer-title{display:flex;justify-content:space-between;align-items:center;font-size:22px;margin-bottom:8px}.drawer-title button{background:#0000;font-size:30px;line-height:1;color:#bbb}.menu-drawer h3,.chat-panel h3{margin:16px 0 10px;font-size:13px;text-transform:uppercase;color:#fff}.rooms-list,.queue-list,.results{display:grid;gap:8px}.room-link{display:block;padding:12px;border-radius:12px;background:#0d0715cc;border:1px solid #ffffff1a}.room-link.active{background:linear-gradient(90deg,#b00083,#7028ff);border-color:#ff7ae7}.room-link span{display:block;color:#c5b8ca;font-size:12px}.room-form,.search-form{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:8px}.room-form input,.search-form input,.chat-form input{background:#0a0710;border:1px solid #ffffff2a;color:#fff;border-radius:12px;padding:10px}.room-form button,.search-form button,.result button,.queue-item button{background:#9b007d;border:1px solid #ff81dd;border-radius:14px;padding:9px 12px;font-weight:700}.result button+button{margin-left:6px;background:#20213dcc;border-color:#ffffff2d}.queue-item button{margin-top:5px;padding:6px 9px;font-size:11px}.result button.is-done,.queue-item button.is-done{background:#143d31;border-color:#39e6a2}.avatar-change{display:grid;grid-template-columns:repeat(6,1fr);gap:7px}.avatar-choice{background:#0a0710;border:1px solid #ffffff20;border-radius:12px;padding:3px}.avatar-choice.selected{border-color:#f200be;box-shadow:0 0 0 2px #f200be55}.avatar-choice img{width:100%;height:42px;object-fit:contain}.queue-item,.result{display:grid;grid-template-columns:42px 1fr;gap:8px;align-items:center;background:#0b0711c9;border:1px solid #ffffff18;border-radius:12px;padding:7px}.queue-item img,.result img{width:42px;height:32px;object-fit:cover;border-radius:7px}.queue-item b,.result b{font-size:12px;display:block}.queue-item small{display:block;color:#aaa;font-size:11px}.queue-pos{display:grid;place-items:center;width:22px;height:22px;background:#ff00bd;border-radius:50%;font-weight:700}/* Stage is intentionally stretched to the full usable room area.
All avatars/DJ/controls keep their percentage based positions inside .stage,
so making the background wider does not change their relative placement. */.club-layout{height:100vh;padding:46px 326px 52px 42px}.stage-wrap{height:100%;position:relative;display:flex;align-items:stretch;justify-content:stretch;overflow:visible}.stage{position:relative;overflow:hidden;width:100%;height:calc(100% + 26px);background:url('../img/background/stage.webp') center center/100% 100% no-repeat;filter:none!important;}.stage:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0000 0 72%,#00000016 100%);pointer-events:none;z-index:5}.screen-frame{position:absolute;top:0;left:50%;transform:translateX(-50%);width:36%;height:36%;background:#050508;border:1px solid #3a455b;box-shadow:0 11px 22px #000b;z-index:8}#player{width:100%;height:100%;background:#04040a}.dancefloor{position:absolute;left:5%;right:3%;bottom:19%;height:37%;z-index:10;display:flex;align-items:flex-end;justify-content:center;gap:0;flex-wrap:wrap;align-content:flex-end;pointer-events:none}.person{width:5.1%;min-width:34px;max-width:48px;height:78px;margin:0 -2px -2px;text-align:center;position:relative;filter:none!important;}.avatar-img{width:58px;height:70px;object-fit:contain;transform:translateX(-6px)}.person small{display:none}.dj-booth{position:absolute;bottom:4.5%;left:50%;transform:translateX(-50%);width:23%;height:20%;z-index:14;pointer-events:none}.dj-avatar{position:absolute;left:50%;bottom:18%;transform:translateX(-50%);text-align:center}.dj-avatar.empty span{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:#12091a;border:1px solid #fff6}.dj-gif{width:86px;height:96px;object-fit:contain;filter:none!important;}.dj-avatar b{display:block;margin-top:-10px;font-size:11px;background:#100815cc;border-radius:99px;padding:2px 7px}.play-song-card{position:absolute;left:15%;bottom:12.8%;width:194px;height:66px;border:1px solid #ffffff30;border-radius:11px;background:#12051c9c;z-index:18;padding:11px;backdrop-filter:none!important;}.play-song-card button{height:31px;border-radius:99px;background:#aa007d;border:1px solid #ff6fdb;padding:0 18px;font-size:11px;font-weight:800}.mini-avatars{font-size:15px;margin-top:7px;letter-spacing:2px}.vote-box{position:absolute;right:13%;bottom:12.8%;display:flex;align-items:center;gap:16px;z-index:18;border:1px solid #ffffff30;border-radius:14px;background:#12051c9c;padding:14px 18px 10px;backdrop-filter:none!important;}.vote-box button{background:#0000;padding:0;min-width:38px;font-size:24px;text-align:center;opacity:.88;transition:.18s ease}.vote-box button.is-active{opacity:1;text-shadow:0 0 14px #66f6ff}.vote-box span{display:block;font-size:11px;margin-top:4px;color:#e8e8e8}.skip-vote{font-size:22px}.chat-panel{position:fixed;right:0;top:0;bottom:76px;width:288px;z-index:45;border-radius:0;padding:12px;background:linear-gradient(180deg,#11021bee,#18051be6 55%,#09030ce8)}.chat-panel h3{height:25px;margin:0 0 12px;font-size:12px;text-transform:none}.welcome{font-size:11px;line-height:1.5;color:#f3e8f2;margin:0 0 16px}.chat-messages{height:calc(100% - 103px);overflow:auto;padding-right:6px}.chat-line{display:grid;grid-template-columns:26px 1fr;gap:8px;margin:0 0 11px}.chat-avatar{width:24px;height:24px;object-fit:contain}.chat-line p{margin:0;font-size:11px;line-height:1.35;color:#e8dce9}.chat-line b{display:block;color:#b64dff;font-size:12px}.chat-form{position:absolute;left:0;right:0;bottom:0;height:60px;display:grid;grid-template-columns:1fr 34px;gap:6px;background:#28202a;padding:10px}.chat-form input{border:0;background:#ffffff12;border-radius:0}.chat-form button{background:#0000;color:#ddd;font-size:22px}.floating-player{position:fixed;left:0;right:0;bottom:0;width:100%;height:76px;background:linear-gradient(135deg,#171721d9,#24242ed4 42%,#11121ae8);border-top:1px solid #ffffff2d;box-shadow:0 -14px 44px #000a,inset 0 1px 0 #ffffff30;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;z-index:80;display:flex;align-items:center;gap:14px;padding:10px 22px;color:#eee}.floating-player:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 0,#5fe1ff26,transparent 28%),radial-gradient(circle at 78% 100%,#ff53d526,transparent 26%);pointer-events:none}.floating-player>*{position:relative}.playlist-name{display:flex;align-items:center;gap:11px;min-width:205px}.disc{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#ffffff55,#ffffff18);color:#111;font-size:22px;border:1px solid #ffffff3b}.playlist-name b{display:block;font-size:12px}.playlist-name small{display:block;color:#bdbdca;font-size:11px;margin-top:3px}.divider{height:42px;width:1px;background:#ffffff38}.track-area{min-width:260px;max-width:640px;flex:1}.track-area p{margin:0 0 10px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-area span{color:#aaa}.progress{height:4px;background:#ffffff24;position:relative;border-radius:99px;overflow:hidden}.progress i{display:block;height:4px;width:0;background:linear-gradient(90deg,#22d8ff,#ff4dda);box-shadow:0 0 14px #10bee9;border-radius:99px}.time{font-size:13px;color:#ddd;min-width:46px}.bar-icon{width:42px;height:42px;border-radius:15px;background:#ffffff10;border:1px solid #ffffff1e;color:#f5f7ff;padding:0;font-size:19px;font-weight:900;display:grid;place-items:center;transition:.16s ease}.bar-icon:hover,.bar-icon.is-active,.bar-icon.is-playing{background:#ffffff22;border-color:#7df3ff66;box-shadow:0 0 0 3px #ffffff0d,0 0 22px #5adfff33}.volume{width:110px;accent-color:#9defff}.social{margin-left:auto;color:#aaa;font-weight:700;letter-spacing:7px}.muted{color:#9e9eab}.error{color:#ff9da0}.tiny-avatar{width:18px;height:18px;vertical-align:middle}@media(max-width:960px){body{overflow:auto}.room-head{right:0}.club-layout{padding-right:0;height:auto;min-height:100vh}.chat-panel{display:none}.stage{width:min(100%,calc((100vh - 114px)*1.778656));height:min(100%,calc((100vw - 34px)*0.562222))}.floating-player{height:72px}.social,.volume{display:none}.vote-box{right:3%}.play-song-card{left:5%}.person{min-width:32px}.avatar-img{width:50px}.playlist-name{min-width:165px}.track-area{min-width:150px}.bar-icon{width:38px;height:38px}}
/* v8 fixes + 2026 liquid-glass sidebar/player polish */
.menu-drawer{width:390px;padding:18px;background:linear-gradient(145deg,#161827d9,#090913e8 52%,#1b0823dc);border:1px solid #ffffff24;box-shadow:28px 0 90px #000c,inset 0 1px 0 #ffffff38;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
.menu-drawer:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 15% 0,#5ce9ff22,transparent 32%),radial-gradient(circle at 100% 30%,#ff4de422,transparent 26%);pointer-events:none}.menu-drawer>*{position:relative}.drawer-title{padding:6px 8px 14px;border-bottom:1px solid #ffffff18}.drawer-title b{letter-spacing:-.02em}.drawer-section{margin:14px 0;padding:14px;border:1px solid #ffffff18;border-radius:22px;background:linear-gradient(180deg,#ffffff10,#ffffff06);box-shadow:inset 0 1px 0 #ffffff20}.primary-section{background:linear-gradient(180deg,#1c2136cc,#0d0c17b8);border-color:#8defff24}.menu-drawer h3{margin:0 0 10px;color:#eef6ff;letter-spacing:.08em}.search-form{margin:0 0 10px}.search-form input,.room-form input{background:#ffffff10;border-color:#ffffff22;border-radius:16px;box-shadow:inset 0 1px 0 #ffffff12}.search-form button,.room-form button,.result button,.queue-item button{border-radius:16px;background:linear-gradient(135deg,#22d8ff33,#ff4dda42);border:1px solid #ffffff28;box-shadow:inset 0 1px 0 #ffffff2a}.room-link,.queue-item,.result{background:#ffffff0d;border:1px solid #ffffff18;border-radius:18px}.room-link.active{background:linear-gradient(135deg,#22d8ff33,#ff4dda44);border-color:#9defff66;box-shadow:0 0 30px #5adfff22}.next-song-card{padding:10px 12px;border:1px solid #9defff30;border-radius:16px;background:#0d1d2bcc;color:#cfefff;font-size:12px;margin-bottom:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.avatar-choice{background:#ffffff0d;border-color:#ffffff1f;border-radius:16px}.play-song-card{height:48px;padding:8px;display:flex;align-items:center;justify-content:center}.play-song-card button{width:100%;height:31px}.mini-avatars{display:none}.floating-player{height:82px;padding:11px 24px;background:linear-gradient(135deg,#111827db,#202637d2 42%,#0d101be9);border-top:1px solid #ffffff32;box-shadow:0 -18px 60px #000b,inset 0 1px 0 #ffffff45}.floating-player:after{content:"";position:absolute;left:18px;right:18px;top:8px;height:1px;background:linear-gradient(90deg,transparent,#ffffff70,transparent);opacity:.38;pointer-events:none}.track-area p{margin:0 0 3px}.next-inline{display:block;color:#aeb8c9;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:8px}.bar-icon{border-radius:18px;background:linear-gradient(180deg,#ffffff17,#ffffff0a);border-color:#ffffff26}.bar-icon.is-active,.bar-icon.is-playing{background:linear-gradient(135deg,#22d8ff33,#ff4dda42);border-color:#a7f5ff6b}.vote-box button.is-active{color:#9defff}.like.is-active:after{content:' selected';font-size:10px;color:#9defff;display:block}.dislike.is-active:after{content:' selected';font-size:10px;color:#ffb3e7;display:block}.skip-vote.is-active:after{content:' voted';font-size:10px;color:#d9c2ff;display:block}@media(max-width:960px){.menu-drawer{width:360px}.floating-player{height:76px;padding:9px 12px}.playlist-name{min-width:145px}.next-inline{display:none}}
/* v9 tabs + queue drag + DJ state */
.drawer-tabs{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:12px 0 10px;padding:6px;border:1px solid #ffffff18;border-radius:20px;background:#ffffff0b;box-shadow:inset 0 1px 0 #ffffff20}.tab-btn{height:34px;border-radius:14px;background:#ffffff0b;border:1px solid #ffffff12;color:#cfd7e8;font-size:11px;font-weight:800;letter-spacing:.02em}.tab-btn.active{background:linear-gradient(135deg,#22d8ff44,#ff4dda55);border-color:#9defff70;color:#fff;box-shadow:0 0 24px #5adfff22}.tab-panel{display:none}.tab-panel.active{display:block}.small-note{font-size:12px;margin:0 0 10px}.queue-sortable .queue-item{cursor:grab}.queue-sortable .queue-item.dragging{opacity:.55;transform:scale(.98);border-color:#9defff;box-shadow:0 0 30px #5adfff44}.queue-item.draggable:before{content:'⋮⋮';align-self:center;color:#aeb8c9;letter-spacing:-3px;font-weight:900}.queue-item.draggable{grid-template-columns:16px 30px 42px 1fr}.queue-item.draggable .queue-pos{grid-column:2}.queue-item.draggable img{grid-column:3}.queue-item.draggable div{grid-column:4}.play-song-card button.is-quitting,#playNextBtn.is-quitting{background:linear-gradient(135deg,#ff4d75,#ff9a3c);border-color:#ffd4b4}.vote-box button:disabled,.vote-box button.is-disabled{opacity:.32;cursor:not-allowed;filter:grayscale(1)}.result button.is-done,.queue-item button.is-done{background:linear-gradient(135deg,#19c37d66,#22d8ff44);border-color:#6bffc6;color:#fff}.drawer-section[data-panel="music"]{background:linear-gradient(180deg,#1c2136cc,#0d0c17b8);border-color:#8defff24}.drawer-section[data-panel="queued"]{background:linear-gradient(180deg,#15192acc,#0c101bb8);border-color:#b892ff24}.drawer-section[data-panel="playlists"]{background:linear-gradient(180deg,#1b1730cc,#100c1ab8);border-color:#ff83d724}
.screen-frame.no-video #player{visibility:hidden;pointer-events:none}.no-video-overlay{display:none;position:absolute;inset:0;place-items:center;text-align:center;padding:24px;background:radial-gradient(circle at 50% 20%,#263957,#06070d 62%);color:#eaf7ff;font-weight:800;font-size:18px;letter-spacing:.01em;text-shadow:0 0 18px #6ee7ff66}.screen-frame.no-video .no-video-overlay{display:grid}.bar-icon:disabled,.bar-icon.is-disabled,.vote-box button:disabled{opacity:.42;cursor:not-allowed;filter:grayscale(.35);transform:none;box-shadow:none}
/* v11 polish: smaller liquid sidebar buttons, no empty DJ badge, queue removal, blue playlists shortcut */
.dj-avatar.empty{display:none}.dj-booth:has(.dj-avatar.empty){display:none}
.play-song-card{width:230px;height:54px;gap:8px;padding:8px;display:flex;align-items:center;justify-content:center}
.play-song-card button{flex:1;height:32px;padding:0 10px;font-size:10px;letter-spacing:.04em;border-radius:14px;white-space:nowrap}
.play-song-card .open-queue{background:linear-gradient(135deg,#238dff,#22d8ff);border:1px solid #a7efff;color:#fff;box-shadow:0 0 22px #22d8ff33}
.play-song-card .open-queue:hover{box-shadow:0 0 28px #22d8ff55}
.result-actions,.queue-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:6px}
.result button,.queue-item button,.room-form button,.search-form button{min-height:28px;padding:6px 10px;border-radius:12px;font-size:11px;line-height:1;font-weight:800;letter-spacing:.015em;background:linear-gradient(135deg,#ffffff18,#ffffff0a);border:1px solid #ffffff25;box-shadow:inset 0 1px 0 #ffffff2c,0 8px 22px #0003;color:#edf7ff;transition:.16s ease}
.result button:hover,.queue-item button:hover,.room-form button:hover,.search-form button:hover{border-color:#9defff80;box-shadow:inset 0 1px 0 #ffffff35,0 0 22px #5adfff22}
.result button[data-add],.queue-item button[data-add],.search-form button{background:linear-gradient(135deg,#22d8ff38,#246bff30);border-color:#8defff52}
.result button[data-playlist],.queue-item button[data-playlist]{background:linear-gradient(135deg,#a45dff30,#ff4dda25);border-color:#ffb3ed3d}
.result button.is-done,.queue-item button.is-done{background:linear-gradient(135deg,#19c37d55,#22d8ff30);border-color:#62ffc4;color:#eafff6}
.queue-item button.danger,.queue-item button[data-remove-queue]{background:linear-gradient(135deg,#ff4d7550,#ff7a3c28);border-color:#ff9bad73;color:#fff}
.queue-item button.small{padding:6px 9px;min-height:26px}
.queue-item,.result{align-items:start;padding:8px;border-radius:16px}
.queue-item b,.result b{line-height:1.25;margin-top:1px}.queue-item small{line-height:1.35}.drawer-section{overflow:hidden}
@media(max-width:960px){.play-song-card{width:205px}.play-song-card button{font-size:9px;padding:0 7px}.result-actions,.queue-actions{gap:5px}}
/* v13 polish + runtime fixes */
.online-pill{gap:7px;line-height:1;align-items:center}.online-dot{width:8px;height:8px;border-radius:50%;background:#33ff80;box-shadow:0 0 0 0 rgba(51,255,128,.72),0 0 12px rgba(51,255,128,.9);display:inline-block;flex:0 0 8px;animation:onlinePulse 1.45s ease-out infinite;transform:translateY(.2px)}@keyframes onlinePulse{0%{box-shadow:0 0 0 0 rgba(51,255,128,.72),0 0 10px rgba(51,255,128,.9)}70%{box-shadow:0 0 0 8px rgba(51,255,128,0),0 0 15px rgba(51,255,128,.8)}100%{box-shadow:0 0 0 0 rgba(51,255,128,0),0 0 10px rgba(51,255,128,.65)}}
.skip-vote{display:grid;place-items:center;gap:2px}.skip-vote-icon{font-size:25px;display:block;line-height:1}.skip-vote span{margin-top:0}.dj-avatar.empty{display:none}.dj-avatar.empty span{display:none}.dj-booth:has(.dj-avatar.empty){display:none}.vote-box button.is-disabled{opacity:.38;cursor:not-allowed;filter:grayscale(.25)}
/* v14: stronger username labels + admin badge, with stable layout so GIF loops/refreshes do not flash the name */
.person{overflow:visible;contain:layout paint;}
.person .avatar-img{position:relative;z-index:2;display:block;backface-visibility:hidden;will-change:transform;}
.person small{display:flex;align-items:center;justify-content:center;gap:4px;position:absolute;left:50%;bottom:-13px;transform:translateX(-50%);z-index:4;max-width:86px;min-height:18px;padding:2px 7px;border-radius:999px;background:linear-gradient(135deg,#070b16e8,#1b1127e0);border:1px solid #ffffff36;box-shadow:0 4px 14px #000b, inset 0 1px 0 #ffffff28;color:#fff;font-size:10px;font-weight:800;letter-spacing:.01em;text-shadow:0 1px 4px #000;white-space:nowrap;pointer-events:none;opacity:.96;}
.person small span{display:block;overflow:hidden;text-overflow:ellipsis;max-width:66px;}
.dj-avatar b{display:inline-flex;align-items:center;justify-content:center;gap:5px;margin-top:-10px;font-size:11px;font-weight:900;background:linear-gradient(135deg,#080d18e8,#1d1029e0);border:1px solid #ffffff38;box-shadow:0 5px 16px #000b,inset 0 1px 0 #ffffff28;border-radius:99px;padding:3px 9px;color:#fff;text-shadow:0 1px 4px #000;}
.admin-dot{display:inline-block;flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:#ff3030;box-shadow:0 0 0 2px #3a0505,0 0 10px #ff3030;vertical-align:middle;}
.person.is-admin small{border-color:#ff4e4e8a;box-shadow:0 4px 14px #000b,0 0 15px #ff30302e,inset 0 1px 0 #ffffff28;}
/* v15: keep username badges permanently below avatars, never over the GIF frames */
.person{height:94px;overflow:visible;contain:layout;isolation:isolate;}
.person .avatar-img{position:relative;z-index:5;display:block;backface-visibility:hidden;transform:translate3d(-6px,0,0);}
.person small{bottom:-2px;z-index:1;transform:translate3d(-50%,0,0);backface-visibility:hidden;will-change:auto;}
.person small:before{content:"";position:absolute;inset:-3px -5px;border-radius:999px;background:#050711cc;z-index:-1;}
/* v16: definitive username flash fix
Keep name badges in normal layout below the animated GIF instead of behind/under it.
This prevents transparent/end frames from revealing the badge over the character. */
.dancefloor{align-items:flex-end;overflow:visible;}
.person{
height:116px;
min-height:116px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:flex-end;
overflow:visible;
contain:layout;
isolation:isolate;
padding-bottom:0;
}
.person .avatar-img{
position:relative;
z-index:2;
display:block;
width:56px;
height:82px;
object-fit:contain;
flex:0 0 auto;
transform:translate3d(0,0,0);
backface-visibility:hidden;
}
.person small{
position:relative;
left:auto;
right:auto;
bottom:auto;
top:auto;
transform:none;
z-index:5;
flex:0 0 auto;
margin-top:2px;
max-width:92px;
min-height:18px;
background:linear-gradient(135deg,#070b16f5,#1b1127f0);
opacity:1;
}
.person small:before{display:none;}
.person small span{max-width:72px;}
.dj-avatar.dj-active{
display:flex;
flex-direction:column;
align-items:center;
justify-content:flex-end;
gap:0;
height:120px;
overflow:visible;
isolation:isolate;
}
.dj-gif{
position:relative;
z-index:2;
display:block;
flex:0 0 auto;
margin:0;
transform:translate3d(0,0,0);
backface-visibility:hidden;
}
.dj-avatar b{
position:relative;
z-index:5;
flex:0 0 auto;
margin-top:0;
opacity:1;
transform:none;
}
/* v17: prevent browser alt-text from appearing over GIF avatars during animation loop redraws */
.avatar-img{font-size:0;color:transparent;text-indent:-9999px;user-select:none;-webkit-user-drag:none;}
.avatar-img::before,.avatar-img::after{display:none;content:none;}
/* v18: randomized non-overlapping member spawn area on the wallpaper ground */
.dancefloor{
left:10%;
right:8%;
bottom:15.5%;
height:33%;
display:block;
position:absolute;
pointer-events:none;
overflow:visible;
}
.person{
position:absolute;
width:74px;
min-width:74px;
max-width:74px;
height:116px;
margin:0;
pointer-events:none;
transition:none;
}
/* v19 DJ queue button + styled confirmation */
#playNextBtn.is-queued{
background:linear-gradient(135deg,rgba(34,216,255,.58),rgba(120,104,255,.52));
border-color:rgba(157,239,255,.72);
box-shadow:0 10px 34px rgba(34,216,255,.18), inset 0 1px 0 rgba(255,255,255,.28);
}
.dj-confirm{position:fixed;inset:0;z-index:9999;display:none;place-items:center;padding:24px;background:rgba(3,5,12,.52);backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
.dj-confirm.open{display:grid;animation:confirmFade .16s ease-out both}
.dj-confirm-card{position:relative;width:min(420px,calc(100vw - 34px));overflow:hidden;border:1px solid rgba(255,255,255,.18);border-radius:28px;padding:28px;background:linear-gradient(145deg,rgba(23,28,48,.88),rgba(8,10,20,.78));box-shadow:0 30px 90px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.22);color:#fff;text-align:center;transform:translateY(6px);animation:confirmPop .18s ease-out both}
.dj-confirm-glow{position:absolute;inset:-60px;background:radial-gradient(circle at 25% 10%,rgba(34,216,255,.28),transparent 38%),radial-gradient(circle at 85% 35%,rgba(255,77,218,.24),transparent 38%);pointer-events:none}
.dj-confirm-card h3,.dj-confirm-card p,.dj-confirm-actions,.dj-confirm-x{position:relative;z-index:1}.dj-confirm-card h3{margin:0 0 8px;font-size:22px;letter-spacing:-.02em}.dj-confirm-card p{margin:0 0 22px;color:#cfd7e8;font-size:14px}.dj-confirm-x{position:absolute;right:14px;top:12px;width:34px;height:34px;border:1px solid rgba(255,255,255,.14);border-radius:50%;background:rgba(255,255,255,.08);color:#fff;font-size:22px;line-height:1;cursor:pointer}.dj-confirm-actions{display:flex;gap:10px;justify-content:center}.dj-confirm-actions button{height:42px;padding:0 18px;border-radius:999px;border:1px solid rgba(255,255,255,.16);font-weight:900;letter-spacing:.01em;cursor:pointer}.confirm-cancel{background:rgba(255,255,255,.08);color:#dbe6ff}.confirm-leave{background:linear-gradient(135deg,#ff4d75,#ff9a3c);color:#fff;box-shadow:0 12px 28px rgba(255,77,117,.22)}
@keyframes confirmFade{from{opacity:0}to{opacity:1}}@keyframes confirmPop{from{opacity:.3;transform:translateY(10px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
/* v20 playlists: multiple playlists, chooser modal, remove button, spinning disc SVG */
.playlist-disc{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;color:#9defff;background:linear-gradient(135deg,#22d8ff22,#ff4dda26);border:1px solid #ffffff25;box-shadow:inset 0 1px 0 #ffffff2a;flex:0 0 28px}.playlist-disc svg{width:18px;height:18px;display:block}.playlist-disc.is-spinning svg{animation:playlistDiscSpin 1.05s linear infinite}@keyframes playlistDiscSpin{to{transform:rotate(360deg)}}.playlist-create-form{display:grid;grid-template-columns:1fr auto;gap:8px;margin:0 0 10px}.playlist-create-form input,.playlist-create-inline input{background:#ffffff10;border:1px solid #ffffff22;color:#fff;border-radius:16px;padding:10px;outline:none}.playlist-create-form button,.playlist-create-inline button,.playlist-tab,.create-empty-playlist{border-radius:16px;background:linear-gradient(135deg,#22d8ff33,#ff4dda42);border:1px solid #ffffff28;box-shadow:inset 0 1px 0 #ffffff2a;padding:9px 12px;font-weight:800}.playlist-tabs{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 10px}.playlist-tab{font-size:12px;color:#dbe6ff;background:#ffffff0d}.playlist-tab.active{background:linear-gradient(135deg,#22d8ff55,#ff4dda66);border-color:#9defff70;color:#fff}.empty-playlist-box{display:grid;gap:10px;justify-items:start}.queue-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}.queue-actions button{margin-top:0}.danger.small,[data-remove-playlist-item]{background:linear-gradient(135deg,#ff4d7530,#ff9a3c25);border-color:#ffb4b444}.playlist-chooser{position:fixed;inset:0;z-index:9998;display:none;place-items:center;padding:24px;background:rgba(3,5,12,.55);backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}.playlist-chooser.open{display:grid;animation:confirmFade .16s ease-out both}.playlist-chooser-card{position:relative;width:min(440px,calc(100vw - 34px));overflow:hidden;border:1px solid rgba(255,255,255,.18);border-radius:28px;padding:26px;background:linear-gradient(145deg,rgba(23,28,48,.92),rgba(8,10,20,.82));box-shadow:0 30px 90px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.22);color:#fff;animation:confirmPop .18s ease-out both}.playlist-chooser-card h3{margin:0 0 8px;font-size:22px;letter-spacing:-.02em}.playlist-chooser-card p{margin:0 0 16px}.playlist-chooser-x{position:absolute;right:14px;top:12px;width:34px;height:34px;border:1px solid rgba(255,255,255,.14);border-radius:50%;background:rgba(255,255,255,.08);color:#fff;font-size:22px;line-height:1}.playlist-choice-list{display:grid;gap:8px;margin-bottom:12px}.playlist-choice-list button{height:42px;text-align:left;padding:0 14px;border-radius:16px;background:#ffffff10;border:1px solid #ffffff22;color:#fff;font-weight:900}.playlist-create-inline{display:grid;grid-template-columns:1fr auto;gap:8px}
/* v21 playlist list layout + larger centered vinyl */
.playlist-disc{width:34px;height:34px;display:flex;align-items:center;justify-content:center;line-height:1;flex:0 0 34px;padding:0}
.playlist-disc svg{width:23px;height:23px;display:block;margin:auto;transform-origin:50% 50%}
.playlist-disc.is-spinning svg{animation:playlistDiscSpin 1.05s linear infinite}
#playlistTabs{display:none}.playlist-result{display:grid;grid-template-columns:118px 1fr;gap:14px;align-items:start;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.11)}.playlist-result:first-child{padding-top:2px}.playlist-result-thumb{width:118px;aspect-ratio:16/9;object-fit:cover;border-radius:10px;background:#111827;border:1px solid rgba(255,255,255,.14)}.playlist-result-main{min-width:0;display:grid;gap:5px}.playlist-result-main>b{font-size:15px;line-height:1.25;color:#fff}.playlist-result-main>small{font-size:12px;color:#aeb8cf}.playlist-result-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:4px}.playlist-result-actions button{border-radius:14px;background:#9b007d;border:1px solid #ff81dd;padding:8px 11px;font-size:12px;font-weight:900}.playlist-result-actions .danger{background:linear-gradient(135deg,#ff4d7530,#ff9a3c25);border-color:#ffb4b444}.playlist-song-list{display:grid;gap:6px;margin-top:8px}.playlist-song-mini{display:grid;grid-template-columns:38px 1fr auto;gap:8px;align-items:center;padding:6px;border-radius:10px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08)}.playlist-song-mini img{width:38px;height:28px;object-fit:cover;border-radius:6px}.playlist-song-mini span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:#e7edf8}.playlist-song-mini button{margin:0;padding:6px 8px;font-size:10px;border-radius:10px}.playlist-empty-note{margin:7px 0 0}@media (max-width:520px){.playlist-result{grid-template-columns:96px 1fr;gap:10px}.playlist-result-thumb{width:96px}.playlist-song-mini{grid-template-columns:34px 1fr}.playlist-song-mini button{grid-column:2}.playlist-result-actions button{padding:7px 9px}}
/* v22 playlist cards + queue-style playlist editor */
.playlist-disc{width:42px;height:42px;display:flex;align-items:center;justify-content:center;line-height:1;flex:0 0 42px;padding:0;border-radius:50%;overflow:hidden}
.playlist-disc svg{width:30px;height:30px;display:block;margin:auto;transform-origin:50% 50%}
.playlist-result{cursor:pointer}
.playlist-result-main{align-content:start}
.playlist-result-title{display:block;width:100%;padding:0;margin:0;text-align:left;background:transparent;border:0;color:#fff;font-size:15px;font-weight:900;line-height:1.25;cursor:pointer}
.playlist-result-title:hover{text-decoration:none}
.playlist-result-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:6px}
.playlist-result-actions button{margin:0}
.playlist-song-list,.playlist-song-mini,.playlist-empty-note{display:none}
.playlist-detail-head{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:center;margin:0 0 10px;padding:8px;border-radius:14px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.1)}
.playlist-detail-head button{border-radius:14px;background:#ffffff12;border:1px solid #ffffff24;padding:8px 11px;font-size:12px;font-weight:900;color:#fff}
.playlist-detail-head b{display:block;font-size:15px}.playlist-detail-head small{display:block;color:#aeb8cf;font-size:12px;margin-top:2px}
.playlist-draggable{cursor:grab}.playlist-draggable.dragging{opacity:.55;cursor:grabbing}
/* v23 fixes: wider sidebar + correct playlist song layout */
.menu-drawer{width:780px;max-width:calc(100vw - 42px)}
.drawer-section{overflow:visible}
#playlistItems.queue-list{width:100%}
#playlistItems .playlist-draggable.queue-item{display:grid;grid-template-columns:16px 34px 74px minmax(0,1fr);gap:10px;align-items:center;width:100%;padding:9px 10px}
#playlistItems .playlist-draggable.queue-item:before{content:'⋮⋮';grid-column:1;grid-row:1;align-self:center;justify-self:center;color:#aeb8c9;letter-spacing:-3px;font-weight:900;line-height:1}
#playlistItems .playlist-draggable.queue-item .queue-pos{grid-column:2;grid-row:1;width:28px;height:28px;align-self:center;justify-self:center}
#playlistItems .playlist-draggable.queue-item img{grid-column:3;grid-row:1;width:74px;height:42px;object-fit:cover;border-radius:9px}
#playlistItems .playlist-draggable.queue-item>div{grid-column:4;grid-row:1;min-width:0;width:100%}
#playlistItems .playlist-draggable.queue-item b{font-size:13px;line-height:1.25;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
#playlistItems .playlist-draggable.queue-item small{display:block;font-size:11px;line-height:1.3;color:#aeb8cf;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#playlistItems .playlist-draggable .queue-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:7px}
#playlistItems .playlist-draggable .queue-actions button{margin:0;padding:7px 10px;font-size:11px;line-height:1.1;white-space:nowrap}
@media(max-width:960px){.menu-drawer{width:720px;max-width:calc(100vw - 24px)}}
@media(max-width:560px){#playlistItems .playlist-draggable.queue-item{grid-template-columns:16px 30px 54px minmax(0,1fr);gap:7px}#playlistItems .playlist-draggable.queue-item img{width:54px;height:36px}.menu-drawer{max-width:96vw}}
/* v24: playlist chooser highlights + queued remove all */
.queue-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px}.queue-head h3{margin:0}.remove-all-queue{margin-left:auto;border-radius:12px;padding:5px 9px;font-size:11px;line-height:1.1;font-weight:900;background:linear-gradient(135deg,#ff315d,#b31336);border:1px solid #ff8da3;color:#fff;box-shadow:0 0 22px rgba(255,49,93,.22),inset 0 1px 0 rgba(255,255,255,.28)}.remove-all-queue:hover{filter:brightness(1.08)}
.playlist-choice-list{gap:10px}.playlist-choice-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:7px;padding:7px;border:1px solid transparent;border-radius:18px;background:rgba(255,255,255,.035)}.playlist-choice-row>button:first-child{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;height:auto;min-height:42px}.playlist-choice-row>button:first-child span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.playlist-choice-row em{font-style:normal;font-size:11px;line-height:1;padding:5px 8px;border-radius:999px;color:#8effdf;background:rgba(25,195,125,.18);border:1px solid rgba(142,255,223,.45);flex:0 0 auto}.playlist-choice-row.is-in-playlist{border-color:rgba(142,255,223,.55);background:linear-gradient(135deg,rgba(25,195,125,.16),rgba(34,216,255,.09));box-shadow:0 0 24px rgba(25,195,125,.13),inset 0 1px 0 rgba(255,255,255,.14)}.playlist-choice-row.is-in-playlist>button:first-child{border-color:rgba(142,255,223,.58);background:linear-gradient(135deg,rgba(25,195,125,.25),rgba(34,216,255,.14))}.playlist-choice-row .remove-choice{justify-self:end;align-self:center;border-radius:999px;padding:6px 9px;font-size:10px;line-height:1;font-weight:900;color:#fff;background:linear-gradient(135deg,#ff4d7530,#ff9a3c25);border:1px solid #ffb4b444}
/* v26 playlist title actions */
.playlist-title-row{display:flex;align-items:center;gap:6px;min-width:0;width:100%}
.playlist-title-row .playlist-result-title{flex:0 1 auto;width:auto;max-width:calc(100% - 64px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.playlist-icon-btn{width:25px;height:25px;min-width:25px;padding:0;display:inline-grid;place-items:center;border-radius:9px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#dbe7ff;margin:0;line-height:1}
.playlist-icon-btn svg{width:15px;height:15px;display:block;pointer-events:none}
.playlist-icon-btn:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.28)}
.playlist-icon-btn.danger{background:linear-gradient(135deg,#ff4d7530,#ff9a3c20);border-color:#ffb4b444;color:#ffd1d1}
.playlist-icon-btn.danger:hover{background:linear-gradient(135deg,#ff4d7550,#ff9a3c35);border-color:#ffc8c866}
/* Room skins */
.skins-stage-btn{position:absolute;right:14px;top:12px;z-index:30;height:32px;padding:0 14px;border-radius:999px;background:linear-gradient(135deg,#22d8ff55,#ff4dda66);border:1px solid rgba(255,255,255,.34);box-shadow:0 10px 28px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.28);font-size:12px;font-weight:900;color:#fff;backdrop-filter:none!important;}
.skins-stage-btn:hover{filter:brightness(1.1)}
.skins-modal{position:fixed;inset:0;z-index:9999;display:none;place-items:center;padding:24px;background:rgba(3,5,12,.58);backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
.skins-modal.open{display:grid;animation:confirmFade .16s ease-out both}.skins-card{position:relative;width:min(780px,calc(100vw - 34px));max-height:min(760px,calc(100vh - 34px));display:grid;grid-template-rows:auto 1fr auto;overflow:hidden;border:1px solid rgba(255,255,255,.18);border-radius:28px;padding:24px;background:linear-gradient(145deg,rgba(23,28,48,.94),rgba(8,10,20,.86));box-shadow:0 30px 90px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.22);color:#fff;animation:confirmPop .18s ease-out both}.skins-glow{position:absolute;inset:-80px;background:radial-gradient(circle at 25% 10%,rgba(34,216,255,.25),transparent 36%),radial-gradient(circle at 88% 24%,rgba(255,77,218,.22),transparent 36%);pointer-events:none}.skins-head,.skins-list,.skins-actions,.skins-x{position:relative;z-index:1}.skins-title-row{display:flex;align-items:center;gap:10px;padding-right:42px}.skins-head h3{margin:0 0 4px;font-size:23px}.skins-reset-btn{height:30px;padding:0 13px;margin:0 0 4px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.06));color:#fff;font-size:12px;font-weight:900;box-shadow:inset 0 1px 0 rgba(255,255,255,.18);cursor:pointer}.skins-reset-btn:hover{background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,.1));filter:brightness(1.08)}.skins-head p{margin:0 0 16px;color:#cfd7e8;font-size:13px}.skins-x{position:absolute;right:14px;top:12px;width:34px;height:34px;border:1px solid rgba(255,255,255,.14);border-radius:50%;background:rgba(255,255,255,.08);color:#fff;font-size:22px;line-height:1}.skins-list{overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;padding:2px 4px 8px 0}.skin-choice{display:grid;gap:7px;padding:8px;border:1px solid rgba(255,255,255,.13);border-radius:16px;background:rgba(255,255,255,.055);cursor:pointer;transition:.16s ease}.skin-choice:hover{border-color:rgba(255,255,255,.26);background:rgba(255,255,255,.08)}.skin-choice.selected{border-color:rgba(142,255,223,.72);box-shadow:0 0 24px rgba(34,216,255,.16),inset 0 1px 0 rgba(255,255,255,.18);background:linear-gradient(135deg,rgba(25,195,125,.17),rgba(34,216,255,.1))}.skin-choice input{position:absolute;opacity:0;pointer-events:none}.skin-choice img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:11px;border:1px solid rgba(255,255,255,.12);background:#05060a}.skin-choice span{font-size:12px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#eaf3ff}.skins-actions{display:flex;justify-content:flex-end;gap:10px;padding-top:14px}.skins-actions button{height:40px;padding:0 16px;border-radius:999px;border:1px solid rgba(255,255,255,.16);font-weight:900}.skins-apply-room{background:linear-gradient(135deg,#19c37d,#22d8ff);color:#fff}@media(max-width:560px){.skins-card{padding:18px}.skins-list{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}.skins-actions{flex-wrap:wrap}.skins-actions button{flex:1 1 auto}.skins-stage-btn{right:9px;top:8px;height:29px;padding:0 11px;font-size:11px}}
/* v28: stage Avatars + Skins buttons */
.stage-top-actions{position:absolute;right:14px;top:12px;z-index:30;display:flex;align-items:center;gap:8px}
.stage-top-actions .stage-action-btn{position:static;height:32px;padding:0 14px;border-radius:999px;background:linear-gradient(135deg,#22d8ff55,#ff4dda66);border:1px solid rgba(255,255,255,.34);box-shadow:0 10px 28px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.28);font-size:12px;font-weight:900;color:#fff;backdrop-filter:none!important;}
.stage-top-actions .stage-action-btn:hover{filter:brightness(1.1)}
@media(max-width:560px){.stage-top-actions{right:9px;top:8px;gap:6px}.stage-top-actions .stage-action-btn{height:29px;padding:0 11px;font-size:11px}}
/* v29: keep stage avatars visually stable on browser resize/zoom */
.dancefloor{display:block;pointer-events:none}
.person{position:absolute;width:58px;min-width:58px;max-width:58px;height:78px;margin:0;text-align:center;transform:translate(-50%,-50%);filter:none!important;}
.avatar-img{width:58px;height:70px;object-fit:contain;transform:none}
/* v30: extend stage background to touch/slide slightly under the right chat panel */
@media (min-width:961px){
.club-layout{padding-right:280px}
}
/* v31: slightly larger avatars without changing spawn anchors/booth placement */
.dancefloor .person{
width:82px;
min-width:82px;
max-width:82px;
height:128px;
transform:translate(-50%,-50%);
transform-origin:center bottom;
}
.dancefloor .person .avatar-img{
width:66px;
height:92px;
object-fit:contain;
}
.dancefloor .person small{
margin-top:1px;
}
.dj-avatar.dj-active{
bottom:14%;
height:136px;
transform:translateX(-50%);
transform-origin:center bottom;
}
.dj-avatar.dj-active .dj-gif{
width:100px;
height:112px;
object-fit:contain;
}
.dj-avatar.dj-active b{
margin-top:-2px;
}
/* v32: make avatars follow the same visual scale as the fixed stage background.
Spawn anchors stay percentage-based; only the rendered character size changes. */
.stage{
--avatar-stage-scale:1;
}
.dancefloor .person{
width:calc(86px * var(--avatar-stage-scale));
min-width:calc(86px * var(--avatar-stage-scale));
max-width:calc(86px * var(--avatar-stage-scale));
height:calc(134px * var(--avatar-stage-scale));
transform:translate(-50%,-50%);
transform-origin:center bottom;
}
.dancefloor .person .avatar-img{
width:calc(72px * var(--avatar-stage-scale));
height:calc(100px * var(--avatar-stage-scale));
object-fit:contain;
transform:translate3d(0,0,0);
}
.dancefloor .person small{
max-width:calc(104px * var(--avatar-stage-scale));
min-height:calc(18px * var(--avatar-stage-scale));
padding:calc(2px * var(--avatar-stage-scale)) calc(8px * var(--avatar-stage-scale));
font-size:calc(10px * var(--avatar-stage-scale));
margin-top:calc(2px * var(--avatar-stage-scale));
}
.dancefloor .person small span{
max-width:calc(78px * var(--avatar-stage-scale));
}
.dj-avatar.dj-active{
height:calc(148px * var(--avatar-stage-scale));
bottom:14%;
transform:translateX(-50%);
transform-origin:center bottom;
}
.dj-avatar.dj-active .dj-gif{
width:calc(112px * var(--avatar-stage-scale));
height:calc(126px * var(--avatar-stage-scale));
object-fit:contain;
transform:translate3d(0,0,0);
}
.dj-avatar.dj-active b{
font-size:calc(11px * var(--avatar-stage-scale));
padding:calc(3px * var(--avatar-stage-scale)) calc(9px * var(--avatar-stage-scale));
margin-top:calc(-2px * var(--avatar-stage-scale));
}
/* v33 HARD FIX: fixed-size stage avatars.
Avatars no longer scale from viewport width/height or the stage bounding box.
Their anchors still use left/top percentages, so stage placement is preserved. */
.stage{
--avatar-zoom-compensation:1;
}
.dancefloor{
display:block;
pointer-events:none;
}
.dancefloor .person{
position:absolute;
width:86px;
min-width:86px;
max-width:86px;
height:134px;
margin:0;
overflow:visible;
contain:layout;
transform:translate(-50%,-50%) scale(var(--avatar-zoom-compensation));
transform-origin:center bottom;
text-align:center;
filter:none!important;
}
.dancefloor .person .avatar-img{
width:72px;
min-width:72px;
max-width:72px;
height:100px;
min-height:100px;
max-height:100px;
object-fit:contain;
transform:translate3d(0,0,0);
}
.dancefloor .person small{
display:inline-flex;
align-items:center;
justify-content:center;
max-width:104px;
min-height:18px;
padding:2px 8px;
font-size:10px;
line-height:1.1;
margin-top:2px;
border-radius:999px;
background:rgba(10,4,18,.72);
white-space:nowrap;
}
.dancefloor .person small span{
display:block;
max-width:78px;
overflow:hidden;
text-overflow:ellipsis;
}
.dj-avatar.dj-active{
height:148px;
bottom:14%;
transform:translateX(-50%) scale(var(--avatar-zoom-compensation));
transform-origin:center bottom;
text-align:center;
}
.dj-avatar.dj-active .dj-gif{
width:112px;
min-width:112px;
max-width:112px;
height:126px;
min-height:126px;
max-height:126px;
object-fit:contain;
transform:translate3d(0,0,0);
}
.dj-avatar.dj-active b{
display:inline-flex;
align-items:center;
justify-content:center;
font-size:11px;
padding:3px 9px;
margin-top:-2px;
border-radius:999px;
}
/* v34 FINAL OVERRIDE: one locked-size avatar system. Nothing here uses vw/vh/% for avatar size. */
.stage{--avatar-lock-scale:1;}
.dancefloor{display:block;overflow:visible;pointer-events:none;}
.dancefloor .person{
position:absolute;
width:118px;min-width:118px;max-width:118px;
height:168px;min-height:168px;max-height:168px;
margin:0;overflow:visible;text-align:center;
transform:translate(-50%,-50%) scale(var(--avatar-lock-scale));
transform-origin:center bottom;contain:none;
}
.dancefloor .person .avatar-img{
width:98px;min-width:98px;max-width:98px;
height:132px;min-height:132px;max-height:132px;
object-fit:contain;
}
.dancefloor .person small{
display:inline-flex;align-items:center;justify-content:center;
max-width:118px;min-height:20px;padding:3px 9px;
font-size:11px;line-height:1.1;margin-top:1px;
border-radius:999px;background:rgba(10,4,18,.74);white-space:nowrap;
}
.dj-avatar.dj-active{
width:150px;height:184px;bottom:12%;text-align:center;
transform:translateX(-50%) scale(var(--avatar-lock-scale));
transform-origin:center bottom;
}
.dj-avatar.dj-active .dj-gif{
width:138px;min-width:138px;max-width:138px;
height:158px;min-height:158px;max-height:158px;
object-fit:contain;
}
.dj-avatar.dj-active b{font-size:12px;padding:4px 10px;margin-top:-3px;display:inline-flex;}
/* v35: DJ status + larger avatar picker icons */
.dj-now-card{position:absolute;left:15%;bottom:21.2%;width:194px;min-height:42px;z-index:19;display:flex;align-items:center;justify-content:center;text-align:center;padding:9px 12px;border:1px solid #ffffff38;border-radius:13px;background:linear-gradient(135deg,#1b0829d9,#35083fd1);box-shadow:0 12px 30px #0007,inset 0 1px 0 #fff2;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;font-size:13px;font-weight:800;color:#fff;text-shadow:0 1px 8px #000;}
.dj-now-card[hidden]{display:none;}
.dj-avatar.dj-active b{display:none;}
.avatar-change{grid-template-columns:repeat(3,1fr);gap:12px;}
.avatar-choice{padding:8px;border-radius:15px;}
.avatar-choice img{height:92px;width:100%;object-fit:contain;image-rendering:auto;}
@media (max-width:420px){.avatar-change{grid-template-columns:repeat(2,1fr)}.avatar-choice img{height:84px}}
/* v36 final: DJ status card must exactly match the play-song-card, and UI must not switch to smaller responsive sizes. */
.stage{--ui-lock-scale:1;}
.play-song-card,
.dj-now-card{
position:absolute;
left:13%;
width:194px;
height:48px;
min-height:48px;
padding:8px;
border:1px solid #ffffff30;
border-radius:11px;
background:#12051c9c;
box-shadow:none;
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
z-index:19;
color:#fff;
}
.play-song-card{bottom:12.8%;display:flex;align-items:center;justify-content:center;gap:7px;}
.dj-now-card{bottom:21.2%;display:flex;align-items:center;justify-content:center;text-align:center;font-size:12px;font-weight:900;line-height:1.15;text-shadow:none;overflow:hidden;white-space:normal;}
.dj-now-card[hidden]{display:none;}
.play-song-card button{height:31px;border-radius:99px;background:#aa007d;border:1px solid #ff6fdb;padding:0 12px;font-size:11px;font-weight:800;white-space:nowrap;}
.play-song-card #playNextBtn{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;}
.play-song-card #openQueueBtn{flex:0 0 auto;max-width:72px;}
/* Safe visual spawn area: avatars are inside this central stage strip, away from buttons/cards/booth. */
.dancefloor{
left:6%;
right:6%;
bottom:31%;
height:31%;
z-index:16;
}
.dancefloor .person{z-index:16;}
.dj-booth{z-index:22;}
.dj-avatar.dj-active{z-index:23;}
.stage-top-actions,.play-song-card,.dj-now-card,.vote-box{z-index:30;}
/* Disable previous small-screen shrinking. The UI keeps the same CSS pixel sizes; small screens may scroll/clip instead of resizing. */
@media(max-width:960px){
body{overflow:hidden;}
.room-head{right:288px;height:38px;}
.club-layout{height:100vh;min-height:0;padding:46px 280px 52px 42px;}
.chat-panel{display:block;width:288px;bottom:76px;}
.stage{width:100%;height:calc(100% + 26px);}
.floating-player{height:82px;}
.social{display:block;}
.volume{display:block;width:110px;}
.vote-box{right:13%;bottom:12.8%;}
.play-song-card{left:13%;bottom:12.8%;}
.stage-top-actions{right:14px;top:12px;gap:8px;}
.stage-top-actions .stage-action-btn{height:32px;padding:0 14px;font-size:12px;}
.playlist-name{min-width:205px;}
.track-area{min-width:260px;}
.bar-icon{width:42px;height:42px;}
}
/* v37: keep stage canvas aspect correct and keep avatars floor-locked. */
.club-layout{
height:100vh;
padding:46px 326px 82px 42px;
overflow:hidden;
}
.stage-wrap{
height:100%;
display:flex;
align-items:flex-start;
justify-content:flex-start;
overflow:hidden;
}
.stage{
width:calc(100vw - 368px);
height:calc(56.25vw - 207px);
max-width:calc(100vw - 368px);
max-height:calc(100vh - 128px);
min-width:0;
min-height:0;
aspect-ratio:1600/900;
background-position:left top;
background-size:100% 100%;
flex:0 0 auto;
}
.dancefloor{
position:absolute;
inset:0;
left:0;
right:auto;
top:0;
bottom:auto;
width:100%;
height:100%;
display:block;
pointer-events:none;
z-index:16;
}
.dancefloor .person{
position:absolute;
transform-origin:center bottom;
will-change:transform;
}
.play-song-card #playNextBtn{
flex:0 0 101px;
min-width:101px;
max-width:none;
overflow:visible;
text-overflow:clip;
white-space:nowrap;
padding:0 8px;
font-size:10px;
}
.play-song-card #openQueueBtn{
flex:0 0 70px;
max-width:70px;
min-width:70px;
padding:0 8px;
font-size:10px;
}
.stage-top-actions{
right:18px;
top:14px;
z-index:40;
zoom:1;
}
.chat-panel{width:288px;zoom:1;}
@media(max-width:960px){
.club-layout{padding:46px 326px 82px 42px;min-width:1130px;overflow:hidden;}
.stage{width:calc(100vw - 368px);height:calc(56.25vw - 207px);min-width:0;min-height:0;}
.stage-top-actions{right:18px;top:14px;}
}
/* v39: one zoom-locked UI scale + stage glued to chat.
UI controls are counter-scaled with --ui-zoom-lock so browser zoom does not visually resize them.
The stage itself is sized by JS to end exactly at the chat panel's visible left edge. */
:root{--ui-zoom-lock:1;--ui-zoom-inv:1;}
.club-layout{padding:46px 0 82px 42px;overflow:hidden;}
.stage-wrap{height:100%;width:100%;overflow:hidden;display:block;}
.stage{height:calc(100vh - 128px);max-height:none;min-height:420px;background-position:left top;background-size:100% 100%;aspect-ratio:auto;}
.chat-panel{width:288px;transform:scale(var(--ui-zoom-lock));transform-origin:top right;right:0;top:0;bottom:auto;height:calc((100vh - 76px) * var(--ui-zoom-inv));}
.room-head{height:calc(38px * var(--ui-zoom-inv));right:calc(288px * var(--ui-zoom-lock));transform:scale(var(--ui-zoom-lock));transform-origin:top left;}
.icon-rail{top:calc(38px * var(--ui-zoom-lock));bottom:calc(82px * var(--ui-zoom-lock));transform:scale(var(--ui-zoom-lock));transform-origin:top left;}
.stage-top-actions{transform:scale(var(--ui-zoom-lock));transform-origin:top right;right:18px;top:14px;}
.play-song-card{transform:scale(var(--ui-zoom-lock));transform-origin:bottom left;width:210px;height:48px;}
.dj-now-card{transform:scale(var(--ui-zoom-lock));transform-origin:bottom left;width:210px;height:48px;}
.vote-box{transform:scale(var(--ui-zoom-lock));transform-origin:bottom right;}
.floating-player{height:calc(76px * var(--ui-zoom-inv));transform:scale(var(--ui-zoom-lock));transform-origin:bottom left;width:calc(100vw * var(--ui-zoom-inv));}
.play-song-card #playNextBtn{flex:0 0 auto;min-width:118px;max-width:none;overflow:visible;text-overflow:clip;white-space:nowrap;font-size:11px;padding:0 10px;}
.play-song-card #openQueueBtn{flex:0 0 auto;min-width:72px;max-width:none;overflow:visible;text-overflow:clip;white-space:nowrap;font-size:10px;padding:0 8px;}
.dancefloor{inset:0;width:100%;height:100%;}
.dancefloor .person{transform:translate(-50%,0) scale(var(--avatar-lock-scale));transform-origin:center bottom;}
@media(max-width:960px){.club-layout{min-width:0;padding:46px 0 82px 42px}.stage{height:calc(100vh - 128px);width:auto}.chat-panel{display:block}.stage-top-actions .stage-action-btn{height:32px;padding:0 14px;font-size:12px}}
/* v41 stable zoom/viewport fix: remove DPR transform scaling and pin UI to real viewport edges. */
:root{--ui-zoom-lock:1;--ui-zoom-inv:1;--avatar-lock-scale:1;}
html,body{width:100%;height:100%;overflow:hidden;}
.club-layout{position:fixed;left:0;right:288px;top:38px;bottom:76px;height:auto;width:auto;padding:8px 0 0 42px;overflow:hidden;min-width:0;}
.stage-wrap{position:relative;width:100%;height:100%;display:block;overflow:hidden;}
.stage{position:relative;width:calc(100vw - 330px);height:calc(100vh - 122px);min-width:520px;min-height:420px;max-width:none;max-height:none;background-position:left top;background-size:100% 100%;transform:none;}
.chat-panel{position:fixed;right:0;left:auto;top:0;bottom:76px;width:288px;height:auto;transform:none;transform-origin:initial;display:block;z-index:90;}
.room-head{position:fixed;left:0;right:288px;top:0;height:38px;transform:none;transform-origin:initial;z-index:95;min-width:0;}
.room-head .account{position:fixed;right:306px;top:10px;max-width:220px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-left:0;z-index:120;transform:none;}
.icon-rail{position:fixed;left:0;top:38px;bottom:76px;transform:none;z-index:85;}
.floating-player{position:fixed;left:0;right:0;bottom:0;top:auto;width:100vw;height:76px;max-height:76px;transform:none;transform-origin:initial;z-index:130;}
.stage-top-actions{position:absolute;right:18px;top:14px;transform:none;z-index:45;}
.play-song-card,.dj-now-card{transform:none;width:230px;height:54px;min-height:54px;max-width:230px;box-sizing:border-box;}
.play-song-card{display:flex;align-items:center;justify-content:center;gap:6px;padding:8px;overflow:hidden;}
.play-song-card button{min-width:0;height:32px;box-sizing:border-box;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 7px;font-size:10px;}
.play-song-card #playNextBtn{flex:1 1 auto;min-width:0;max-width:none;}
.play-song-card #openQueueBtn{flex:0 0 74px;min-width:0;max-width:74px;}
.vote-box{transform:none;}
.dancefloor{position:absolute;inset:0;width:100%;height:100%;}
.dancefloor .person{transform:translate(-50%,0) scale(1);transform-origin:center bottom;}
@media(max-width:960px){
body{overflow:hidden;}
.club-layout{right:288px;top:38px;bottom:76px;padding:8px 0 0 42px;min-width:0;height:auto;}
.stage{width:calc(100vw - 330px);height:calc(100vh - 122px);min-width:520px;min-height:420px;}
.chat-panel{display:block;width:288px;right:0;bottom:76px;}
.floating-player{height:76px;}
.stage-top-actions .stage-action-btn{height:32px;padding:0 14px;font-size:12px;}
}
/* v42: keep the DJ status card glued to the play-song-card.
Both cards use the same left anchor and the DJ card is positioned from the
play card's bottom + exact card height + fixed gap, not from a separate %.
This keeps the spacing identical on browser resize, zoom, and different resolutions. */
:root{
--stage-card-left:13%;
--stage-card-bottom:12.8%;
--stage-card-width:230px;
--stage-card-height:54px;
--stage-card-gap:8px;
}
.play-song-card,
.dj-now-card{
left:var(--stage-card-left);
width:var(--stage-card-width);
height:var(--stage-card-height);
min-height:var(--stage-card-height);
max-width:var(--stage-card-width);
box-sizing:border-box;
}
.play-song-card{
bottom:var(--stage-card-bottom);
}
.dj-now-card{
bottom:calc(var(--stage-card-bottom) + var(--stage-card-height) + var(--stage-card-gap));
}
@media(max-width:960px){
.play-song-card{left:var(--stage-card-left);bottom:var(--stage-card-bottom);}
.dj-now-card{left:var(--stage-card-left);bottom:calc(var(--stage-card-bottom) + var(--stage-card-height) + var(--stage-card-gap));}
}
/* v43: keep the opened sidebar above the header and left icon rail. */
.drawer-shade,
.drawer-shade.open{
z-index:240;
}
.menu-drawer,
.menu-drawer.open{
z-index:250;
}
.menu-drawer .drawer-title button{
position:relative;
z-index:251;
}
/* v44: clickable floating playlist + seekbar */
.floating-player .playlist-name,
.floating-player .progress{cursor:pointer}
.floating-player .progress{touch-action:none}
/* v45: draggable floating player seekbar with thumb + time preview */
.floating-player .progress{
height:8px;
overflow:visible;
cursor:pointer;
touch-action:none;
user-select:none;
}
.floating-player .progress i{
height:8px;
pointer-events:none;
}
.floating-player .seek-thumb{
position:absolute;
left:calc(var(--seek-thumb-left, 0%) - 7px);
top:50%;
width:14px;
height:14px;
border-radius:50%;
transform:translateY(-50%);
background:#fff;
border:2px solid #65e7ff;
box-shadow:0 0 0 4px #65e7ff24,0 0 18px #65e7ff99;
pointer-events:none;
opacity:1;
z-index:3;
}
.floating-player .seek-preview{
position:absolute;
left:var(--seek-preview-left, 0%);
bottom:18px;
transform:translateX(-50%) translateY(4px);
min-width:42px;
padding:4px 7px;
border-radius:7px;
background:#080910f0;
border:1px solid #ffffff2e;
color:#fff;
font-size:11px;
line-height:1;
text-align:center;
box-shadow:0 8px 24px #000a;
opacity:0;
pointer-events:none;
transition:opacity .12s ease,transform .12s ease;
z-index:4;
}
.floating-player .progress.is-previewing .seek-preview,
.floating-player .progress:hover .seek-preview{
opacity:1;
transform:translateX(-50%) translateY(0);
}
.floating-player .progress.is-dragging .seek-thumb{
transform:translateY(-50%) scale(1.18);
}
/* v47 vote/grab icon states */
.vote-box{gap:12px;}
.vote-box button{display:grid;place-items:center;gap:3px;min-width:42px;color:#eef2ff;}
.vote-box .vote-icon,.vote-box .skip-vote-icon{display:block;font-size:27px;line-height:1;}
.vote-box .grab .vote-icon{font-size:25px;}
.vote-box button.is-active{opacity:1;text-shadow:none;}
.vote-box .like.is-active{color:#23d36b;filter:none!important;}
.vote-box .dislike.is-active{color:#ff4b5f;filter:none!important;}
.vote-box .grab.is-active{color:#a855f7;filter:none!important;}
.vote-box .skip-vote.is-active{color:#ff9f1c;filter:none!important;}
.like.is-active:after,.dislike.is-active:after,.skip-vote.is-active:after,.grab.is-active:after{content:none;display:none;}
/* v48 queue button/icon polish */
#playNextBtn,.play-song-card button{display:inline-flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;}
.btn-icon{width:1.15em;height:1.15em;display:inline-block;flex:0 0 auto;vertical-align:-.18em;}
#openQueueBtn{white-space:nowrap;}
/* v49: wider play card + larger My queue button with icon */
:root{
--stage-card-width:270px;
}
.play-song-card,.dj-now-card{
width:var(--stage-card-width);
max-width:var(--stage-card-width);
}
.play-song-card{
gap:8px;
}
.play-song-card #playNextBtn{
flex:1 1 auto;
min-width:132px;
padding:0 10px;
}
.play-song-card #openQueueBtn{
flex:0 0 112px;
min-width:112px;
max-width:112px;
padding:0 10px;
font-size:10.5px;
}
#openQueueBtn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:6px;
}
#openQueueBtn .btn-icon{
width:1.18em;
height:1.18em;
}
/* v50: lock seekbar controls for non-admin users */
.floating-player .progress.is-locked{
cursor:default;
}
.floating-player .progress.is-locked .seek-thumb,
.floating-player .progress.is-locked .seek-preview{
pointer-events:none;
}
.floating-player .progress.is-locked:hover .seek-preview{
opacity:0;
}
/* v51: hide seek timestamp tooltip for users who cannot control seekbar.
Keeps v50 behavior: non-admin users cannot drag/click seekbar. */
.floating-player .progress.is-locked .seek-preview,
.floating-player .progress.is-locked:hover .seek-preview,
.floating-player .progress.is-locked.is-previewing .seek-preview{
display:none;
opacity:0;
visibility:hidden;
transform:translateX(-50%) translateY(4px);
}
/* v53 floating player icon polish */
.floating-player .bar-icon{
display:inline-flex;
align-items:center;
justify-content:center;
line-height:1;
text-align:center;
padding:0;
}
.floating-player .bar-icon .player-svg,
.floating-player .bar-icon svg{
width:22px;
height:22px;
display:block;
margin:0;
flex:0 0 auto;
transform-origin:50% 50%;
}
#skipBtn .player-svg{width:24px;height:24px;}
#muteBtn .player-svg{width:23px;height:23px;}
#addPlaylistBtn.is-done .player-svg{animation:addPlaylistDoneJiggle .45s ease-in-out 0s 2;}
@keyframes addPlaylistDoneJiggle{
0%,100%{transform:rotate(0deg) scale(1)}
20%{transform:rotate(-8deg) scale(1.06)}
40%{transform:rotate(7deg) scale(1.06)}
60%{transform:rotate(-5deg) scale(1.04)}
80%{transform:rotate(4deg) scale(1.03)}
}
.playlist-disc,
.playlist-disc:hover,
.playlist-disc:focus{
background:transparent;
border:0;
box-shadow:none;
outline:0;
border-radius:0;
overflow:visible;
}
.playlist-disc svg{filter:none;}
/* v54: chat scroll boundary, alternating chat rows, and DJ card below play card */
.chat-panel{
display:flex;
flex-direction:column;
box-sizing:border-box;
padding:12px 12px 0;
overflow:hidden;
}
.chat-panel h3,
.chat-panel .welcome,
.chat-panel .room-description-board{
flex:0 0 auto;
}
.chat-messages{
flex:1 1 auto;
min-height:0;
height:auto;
overflow-y:auto;
overflow-x:hidden;
padding:0 6px 8px 0;
box-sizing:border-box;
}
.chat-form{
position:relative;
left:auto;
right:auto;
bottom:auto;
flex:0 0 60px;
width:calc(100% + 24px);
margin:0 -12px;
box-sizing:border-box;
}
.chat-line{
margin:0 0 6px;
padding:7px 8px;
border-radius:10px;
box-sizing:border-box;
background:rgba(255,255,255,.055);
}
.chat-line:nth-child(even){
background:rgba(0,0,0,.18);
}
.chat-line:nth-child(odd){
background:rgba(255,255,255,.06);
}
.dj-now-card{
bottom:max(8px, calc(var(--stage-card-bottom) - var(--stage-card-height) - var(--stage-card-gap)));
}
@media(max-width:960px){
.dj-now-card{
bottom:max(8px, calc(var(--stage-card-bottom) - var(--stage-card-height) - var(--stage-card-gap)));
}
}
/* v55: chat timestamp/role badges, remove floating player hairline, stronger chat input autofill prevention */
.floating-player:after{
content:none;
display:none;
}
.chat-line{
grid-template-columns:26px 1fr;
align-items:start;
}
.chat-line .chat-content{
min-width:0;
}
.chat-line .chat-meta{
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
min-width:0;
margin-bottom:2px;
}
.chat-line .chat-name{
display:inline-flex;
align-items:center;
gap:4px;
min-width:0;
}
.chat-line .chat-name b{
display:inline;
color:#b64dff;
font-size:12px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.chat-line time{
flex:0 0 auto;
font-size:10px;
line-height:1;
color:#b8afbd;
opacity:.9;
}
.chat-line p{
margin:0;
font-size:11px;
line-height:1.35;
color:#e8dce9;
word-break:break-word;
}
.chat-role{
display:inline-flex;
align-items:center;
justify-content:center;
width:14px;
height:14px;
flex:0 0 14px;
}
.chat-role-icon{
width:14px;
height:14px;
display:block;
}
.chat-role-platform{color:#ff334d;filter:none!important;}
.chat-role-room{color:#ffd23f;filter:none!important;}
#chatInput{
-webkit-text-security:none;
}
#chatInput::-webkit-contacts-auto-fill-button,
#chatInput::-webkit-credentials-auto-fill-button{
visibility:hidden;
display:none;
pointer-events:none;
}
/* v57: Auto-like toggle under vote box */
.auto-like-box{
position:absolute;
right:13%;
bottom:calc(12.8% - 45px);
z-index:30;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
min-width:190px;
padding:8px 10px;
border:1px solid #ffffff26;
border-radius:14px;
background:#12051c9c;
backdrop-filter:none!important;
color:#eef2ff;
font-size:11px;
font-weight:800;
box-sizing:border-box;
}
.auto-like-toggle{
display:flex;
align-items:center;
gap:4px;
padding:3px;
border-radius:999px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
}
.auto-like-toggle button{
min-width:42px;
height:24px;
border:0;
border-radius:999px;
padding:0 9px;
background:transparent;
color:#bfc7d8;
font-size:10px;
font-weight:900;
line-height:24px;
cursor:pointer;
}
.auto-like-toggle button.active{
background:linear-gradient(135deg,#23d36b,#17b978);
color:#07130d;
box-shadow:0 0 12px rgba(35,211,107,.38);
}
.auto-like-box:not(.is-on) .auto-like-toggle button.active{
background:rgba(255,255,255,.18);
color:#fff;
box-shadow:none;
}
@media(max-width:960px){
.auto-like-box{right:13%;bottom:calc(12.8% - 45px);}
}
/* v58 compact auto-like */
.auto-like-box{
bottom:calc(12.8% - 58px);
min-width:136px;
padding:5px 8px;
gap:6px;
font-size:10px;
}
.auto-like-toggle{padding:2px;gap:2px;}
.auto-like-toggle button{
min-width:32px;
height:20px;
line-height:20px;
font-size:9px;
padding:0 7px;
}
/* v60 room counts and playlist video counts */
.room-link{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.room-link-main{display:block;min-width:0;}
.room-link-main b,.room-link-main em{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.room-link-main em{color:#c5b8ca;font-size:12px;font-style:normal;}
.room-users-count{margin-left:auto;color:#ffd34d;font-size:13px;font-weight:900;line-height:1;text-shadow:0 0 10px rgba(255,211,77,.38);white-space:nowrap;}
.playlist-video-count{color:#ffd34d;font-weight:800;}
/* v62 room history + DJ queue ETA tooltip */
#playNextBtn{position:relative;}
#playNextBtn.is-queued[data-eta]::after{
content:attr(data-eta);
position:absolute;
left:50%;
bottom:calc(100% + 10px);
transform:translateX(-50%) translateY(4px);
opacity:0;
pointer-events:none;
white-space:nowrap;
padding:7px 10px;
border:1px solid rgba(157,239,255,.42);
border-radius:12px;
background:linear-gradient(135deg,rgba(18,5,28,.96),rgba(16,24,42,.94));
box-shadow:0 12px 34px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.2),0 0 18px rgba(34,216,255,.18);
color:#eaf8ff;
font-size:11px;
font-weight:900;
letter-spacing:.01em;
z-index:999;
transition:opacity .16s ease,transform .16s ease;
}
#playNextBtn.is-queued[data-eta]::before{
content:"";
position:absolute;
left:50%;
bottom:calc(100% + 4px);
transform:translateX(-50%) translateY(4px) rotate(45deg);
width:9px;
height:9px;
opacity:0;
pointer-events:none;
background:rgba(18,5,28,.96);
border-right:1px solid rgba(157,239,255,.34);
border-bottom:1px solid rgba(157,239,255,.34);
z-index:998;
transition:opacity .16s ease,transform .16s ease;
}
#playNextBtn.is-queued[data-eta]:hover::after,
#playNextBtn.is-queued[data-eta]:hover::before{opacity:1;transform:translateX(-50%) translateY(0) rotate(0deg);}
#playNextBtn.is-queued[data-eta]:hover::before{transform:translateX(-50%) translateY(0) rotate(45deg);}
.history-box{
position:absolute;
right:calc(13% + 146px);
bottom:calc(12.8% - 58px);
z-index:36;
}
.history-btn{
width:32px;
height:32px;
display:grid;
place-items:center;
padding:0;
border-radius:12px;
border:1px solid rgba(255,255,255,.25);
background:#12051c9c;
color:#eef2ff;
backdrop-filter:none!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 10px 28px rgba(0,0,0,.25);
cursor:pointer;
}
.history-btn svg{width:18px;height:18px;display:block;}
.history-box.open .history-btn,.history-btn:hover{border-color:rgba(157,239,255,.62);color:#9defff;box-shadow:0 0 22px rgba(34,216,255,.2);}
.history-dropdown{
position:absolute;
right:0;
bottom:42px;
width:330px;
max-height:385px;
overflow:auto;
padding:10px;
border:1px solid rgba(255,255,255,.18);
border-radius:18px;
background:linear-gradient(145deg,rgba(23,28,48,.96),rgba(8,10,20,.93));
box-shadow:0 28px 75px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.18);
backdrop-filter:none!important;
color:#eef2ff;
}
.history-title{font-size:12px;font-weight:950;letter-spacing:.04em;text-transform:uppercase;color:#9defff;margin:1px 4px 9px;}
.history-row{display:grid;grid-template-columns:22px 58px 1fr;gap:9px;align-items:center;padding:8px;border-radius:14px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.08);margin-bottom:7px;}
.history-index{width:22px;height:22px;display:grid;place-items:center;border-radius:999px;background:rgba(255,255,255,.1);font-size:10px;font-weight:900;color:#cfefff;}
.history-row img{width:58px;height:34px;object-fit:cover;border-radius:8px;border:1px solid rgba(255,255,255,.14);background:#111827;}
.history-main{min-width:0;display:grid;gap:2px;}
.history-main b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;line-height:1.2;color:#fff;}
.history-main small,.history-main em{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10px;line-height:1.25;color:#aeb8cf;font-style:normal;}
.history-main em{color:#d8c8ff;}
.history-empty{padding:12px;color:#aeb8cf;font-size:12px;text-align:center;}
@media(max-width:960px){.history-box{right:calc(13% + 146px);bottom:calc(12.8% - 58px)}.history-dropdown{width:300px;}}
/* v63: align history/auto-like controls and move ETA tooltip outside play card clipping */
#playNextBtn.is-queued[data-eta]::after,
#playNextBtn.is-queued[data-eta]::before{content:none;display:none;}
.history-box{
right:calc(13% + 146px);
bottom:calc(12.8% - 58px);
height:32px;
display:flex;
align-items:center;
}
.history-btn{
width:34px;
height:32px;
border-radius:14px;
border:1px solid #ffffff26;
background:#12051c9c;
color:#eef2ff;
backdrop-filter:none!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 10px 28px rgba(0,0,0,.25);
}
.history-btn svg{width:17px;height:17px;}
.history-box.open .history-btn,.history-btn:hover{
border-color:rgba(157,239,255,.62);
color:#9defff;
box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 22px rgba(34,216,255,.2);
}
.auto-like-box{
height:32px;
min-height:32px;
border-radius:14px;
border:1px solid #ffffff26;
background:#12051c9c;
box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 10px 28px rgba(0,0,0,.25);
}
.queue-eta-tooltip{
position:absolute;
z-index:70;
transform:translateX(-50%);
min-width:112px;
padding:8px 11px;
border-radius:12px;
background:linear-gradient(145deg,rgba(18,5,28,.96),rgba(8,10,20,.92));
border:1px solid rgba(157,239,255,.34);
box-shadow:0 16px 40px rgba(0,0,0,.45),0 0 24px rgba(34,216,255,.16),inset 0 1px 0 rgba(255,255,255,.18);
color:#eef2ff;
font-size:11px;
font-weight:900;
letter-spacing:.02em;
line-height:1;
text-align:center;
pointer-events:none;
white-space:nowrap;
backdrop-filter:none!important;
}
.queue-eta-tooltip::after{
content:'';
position:absolute;
left:50%;
bottom:-5px;
width:9px;
height:9px;
transform:translateX(-50%) rotate(45deg);
background:rgba(13,8,22,.96);
border-right:1px solid rgba(157,239,255,.34);
border-bottom:1px solid rgba(157,239,255,.34);
}
@media(max-width:960px){.history-box{right:calc(13% + 146px);bottom:calc(12.8% - 58px);}}
/* v65: icon-only Add to playlist button inside history songs */
.history-row{
position:relative;
padding-right:44px;
}
.history-add-playlist-btn{
position:absolute;
right:8px;
bottom:8px;
width:30px;
height:30px;
display:grid;
place-items:center;
padding:0;
border-radius:11px;
border:1px solid rgba(157,239,255,.28);
background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.045));
color:#dff7ff;
box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 10px 22px rgba(0,0,0,.22);
cursor:pointer;
line-height:1;
}
.history-add-playlist-btn svg{
width:18px;
height:18px;
display:block;
}
.history-add-playlist-btn:hover,
.history-add-playlist-btn.is-done{
border-color:rgba(157,239,255,.65);
color:#9defff;
box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 0 20px rgba(34,216,255,.2),0 12px 26px rgba(0,0,0,.28);
}
.history-add-playlist-btn.is-done{
color:#7cffb2;
border-color:rgba(124,255,178,.6);
}
/* v66: clickable avatar profile cards, no usernames under stage characters */
.dancefloor{pointer-events:none;}
.dancefloor .person.avatar-profile-trigger{
appearance:none;
-webkit-appearance:none;
border:0;
background:transparent;
padding:0;
cursor:pointer;
pointer-events:auto;
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
color:inherit;
}
.dancefloor .person small{display:none;}
.dancefloor .person.avatar-profile-trigger:focus{outline:none;}
.dancefloor .person.avatar-profile-trigger:focus-visible .avatar-img,
.dancefloor .person.avatar-profile-trigger:hover .avatar-img,
.dancefloor .person.avatar-profile-trigger.is-profile-open .avatar-img{
filter:none!important;
}
.dj-profile-trigger{
appearance:none;
-webkit-appearance:none;
border:0;
background:transparent;
padding:0;
margin:0;
cursor:pointer;
pointer-events:auto;
display:inline-flex;
align-items:flex-end;
justify-content:center;
width:100%;
height:100%;
}
.dj-profile-trigger:focus{outline:none;}
.dj-profile-trigger:hover .dj-gif,
.dj-profile-trigger:focus-visible .dj-gif,
.dj-profile-trigger.is-profile-open .dj-gif{
filter:none!important;
}
.user-profile-popup{
position:fixed;
z-index:9999;
width:270px;
min-height:124px;
background:#252b35;
border:1px solid rgba(255,255,255,.12);
box-shadow:0 18px 45px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.06);
color:#d8dde6;
font-family:inherit;
overflow:hidden;
animation:userProfileIn .12s ease-out;
}
.user-profile-popup[hidden]{display:none;}
.user-profile-popup::before{
content:"";
position:absolute;
left:0;right:0;top:0;height:3px;
background:linear-gradient(90deg,#64e6ff,#b77cff,#ffe15a);
opacity:.7;
}
.profile-main{
display:flex;
gap:13px;
padding:15px 16px 13px;
align-items:center;
}
.profile-avatar{
width:73px;
height:73px;
border-radius:50%;
object-fit:contain;
background:radial-gradient(circle at 50% 50%, #425063 0 57%, #151a23 58% 100%);
border:2px solid #87e5b7;
box-shadow:0 0 0 3px rgba(29,43,57,.95), 0 0 0 5px rgba(159,255,195,.22);
}
.profile-info{min-width:0;display:flex;flex-direction:column;gap:5px;}
.profile-info strong{font-size:17px;line-height:1.05;color:#fff;font-weight:900;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px;}
.profile-role{font-size:11px;font-weight:900;color:#d9a84d;text-transform:uppercase;letter-spacing:.02em;}
.profile-info em{font-style:normal;font-size:12px;color:#9ca6b4;}
.profile-level{
display:flex;
align-items:center;
gap:8px;
padding:8px 14px;
background:#1b2029;
border-top:1px solid rgba(255,255,255,.07);
color:#bfc7d3;
font-size:13px;
font-weight:800;
}
.profile-level img{width:25px;height:25px;object-fit:contain;border-radius:6px;background:#253043;}
@keyframes userProfileIn{from{opacity:0;transform:translateY(5px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.room-create-form{grid-template-columns:1fr auto}.room-create-form input,.room-create-form select,.room-privacy-form input,.room-privacy-form select{background:#0a0710;border:1px solid #ffffff2a;color:#fff;border-radius:12px;padding:10px;min-width:0}.room-create-form #roomName{grid-column:1/-1}.room-create-form #roomPassword{grid-column:1/-1}.room-create-form #roomJoinMode{grid-column:1/2}.room-create-form button{grid-column:2/3}.room-privacy-form{display:grid;gap:8px;margin-top:14px;padding:12px;border-radius:12px;background:#0b0711c9;border:1px solid #ffffff18}.room-privacy-form h3{margin:0 0 4px}.room-privacy-form label{font-size:11px;color:#cfc5d8}.room-privacy-form button{background:#9b007d;border:1px solid #ff81dd;border-radius:14px;padding:9px 12px;font-weight:700}.privacy-check{display:flex;gap:8px;align-items:center}.privacy-check input{width:16px;height:16px}.room-lock-page{position:fixed;inset:0;z-index:999;display:grid;place-items:center;background:radial-gradient(circle at 50% 20%,#271045,#05020b 70%);padding:24px}.room-lock-card{width:min(420px,92vw);padding:24px;border-radius:18px;text-align:center}.room-lock-card h2{margin:0 0 8px}.room-lock-card p{color:#cfc5d8;margin:0 0 16px}.room-lock-card input{width:100%;background:#0a0710;border:1px solid #ffffff2a;color:#fff;border-radius:12px;padding:12px;margin-bottom:10px}.room-lock-card button{width:100%;background:#9b007d;border:1px solid #ff81dd;border-radius:14px;padding:11px 12px;font-weight:700}.room-lock-card a{display:inline-block;margin-top:14px;color:#d8c8ff;font-size:13px}.room-lock-error{background:#4a0b1d;border:1px solid #ff6b9c;color:#fff;border-radius:10px;padding:8px;margin-bottom:10px;font-size:13px}
/* simplified room privacy UI */
.room-create-form{grid-template-columns:1fr auto;gap:8px;align-items:center}
.room-create-form #roomName,.room-create-form #roomPrivacyType,.room-create-form #roomPassword,.room-create-form .room-privacy-help{grid-column:1/-1}
.room-create-form button{grid-column:1/-1;width:100%;}
.room-create-form input,.room-create-form select,.room-privacy-form input,.room-privacy-form select{width:100%;}
.room-privacy-form{gap:10px;border-radius:18px;background:linear-gradient(180deg,#ffffff0f,#ffffff07)}
.room-privacy-form h3{font-size:13px;text-transform:uppercase;color:#fff;letter-spacing:.08em}
.room-privacy-form button{width:100%;background:linear-gradient(135deg,#22d8ff33,#ff4dda42);border:1px solid #ffffff28;border-radius:16px}
.privacy-password-field[hidden]{display:none}
.room-privacy-help{margin:0;color:#aeb8c9;font-size:11px;line-height:1.35}
/* v72 room settings widget */
.available-rooms-title{margin-top:16px}.room-create-form{margin-bottom:14px}.room-create-form select,.room-settings-form select,.room-settings-form input,.room-settings-form textarea{width:100%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);border-radius:16px;color:#fff;padding:10px 12px;outline:none}.room-create-form select{grid-column:1/-1}.room-create-form .privacy-password-field{grid-column:1/-1}.room-create-form .room-privacy-help{grid-column:1/-1;margin:0;color:#b9c3d8}.stage-action-icon{width:16px;height:16px;display:block}.room-settings-stage-btn{display:inline-flex;align-items:center;gap:7px}.room-settings-card{width:min(520px,calc(100vw - 34px));grid-template-rows:auto}.room-settings-form{position:relative;z-index:1;display:grid;gap:12px}.room-settings-form label{display:grid;gap:6px;font-size:12px;font-weight:900;color:#eaf3ff;letter-spacing:.02em}.room-settings-form textarea{resize:vertical;min-height:94px}.room-settings-form select option{background:#111827;color:#fff}.room-settings-password[hidden],.room-settings-form input[hidden]{display:none}.room-settings-form .skins-actions{padding-top:4px}.room-settings-form .small-note{margin:0;color:#b9c3d8;line-height:1.35}
/* v73 modern sidebar polish + room card grid */
.menu-drawer{
background:linear-gradient(180deg,rgba(18,9,31,.94),rgba(8,5,17,.96));
border-right:1px solid rgba(255,255,255,.16);
box-shadow:22px 0 70px rgba(0,0,0,.55),inset 1px 0 0 rgba(255,255,255,.08);
scrollbar-width:thin;
scrollbar-color:rgba(255,255,255,.24) transparent;
}
.menu-drawer::-webkit-scrollbar{width:8px}.menu-drawer::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:999px}
.drawer-title{padding:4px 2px 10px;border-bottom:1px solid rgba(255,255,255,.1)}
.tabbar{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.11);border-radius:18px;padding:5px;gap:5px}
.tab-btn{border-radius:14px;border:1px solid transparent;transition:.18s ease}
.tab-btn:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.12)}
.tab-btn.active{background:linear-gradient(135deg,rgba(34,216,255,.26),rgba(255,77,218,.24));border-color:rgba(255,255,255,.22);box-shadow:0 10px 26px rgba(0,0,0,.26)}
.room-create-form,.room-privacy-form{padding:12px;border:1px solid rgba(255,255,255,.13);border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.035));box-shadow:inset 0 1px 0 rgba(255,255,255,.09)}
.room-create-form input,.room-create-form select,.room-settings-form select,.room-settings-form input,.room-settings-form textarea,.room-privacy-form input,.room-privacy-form select{
background:rgba(8,10,20,.72);
border:1px solid rgba(255,255,255,.18);
color:#fff;
border-radius:15px;
box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}
.room-create-form input:focus,.room-create-form select:focus,.room-settings-form select:focus,.room-settings-form input:focus,.room-settings-form textarea:focus{border-color:rgba(34,216,255,.58);box-shadow:0 0 0 3px rgba(34,216,255,.13)}
.room-create-form select option,.room-settings-form select option,.room-privacy-form select option{background:#111827;color:#fff}
.room-create-form button{height:40px;background:linear-gradient(135deg,#22d8ff,#b34dff 52%,#ff4dda);border:1px solid rgba(255,255,255,.24);border-radius:16px;box-shadow:0 12px 26px rgba(179,77,255,.22)}
.available-rooms-title{display:flex;align-items:center;gap:8px;margin-top:18px;color:#f8fbff;letter-spacing:.08em}
.available-rooms-title:after{content:"";height:1px;flex:1;background:linear-gradient(90deg,rgba(255,255,255,.2),transparent)}
.rooms-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.room-link{
position:relative;
min-height:128px;
display:flex;
flex-direction:column;
align-items:flex-start;
justify-content:space-between;
gap:10px;
overflow:hidden;
padding:14px;
border-radius:22px;
background:radial-gradient(circle at 100% 0,rgba(34,216,255,.14),transparent 34%),linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.035));
border:1px solid rgba(255,255,255,.14);
box-shadow:0 16px 34px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.1);
transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
.room-link:hover{border-color:rgba(34,216,255,.45);box-shadow:0 20px 42px rgba(0,0,0,.42),0 0 28px rgba(34,216,255,.08)}
.room-link.active{background:radial-gradient(circle at 100% 0,rgba(255,77,218,.28),transparent 34%),linear-gradient(145deg,rgba(176,0,131,.8),rgba(65,40,255,.68));border-color:rgba(255,255,255,.32)}
.room-link-main{width:100%;position:relative;z-index:2}.room-link-main b{font-size:15px;line-height:1.2;letter-spacing:-.01em}.room-link-main em{margin-top:5px;color:rgba(234,243,255,.68);font-size:11px}
.room-users-count{position:relative;z-index:2;margin:0;padding:7px 9px;border-radius:999px;background:rgba(255,211,77,.12);border:1px solid rgba(255,211,77,.26);font-size:12px}
.room-hover-desc{
position:absolute;inset:0;z-index:3;display:flex;align-items:flex-end;padding:14px;
background:linear-gradient(180deg,rgba(5,7,14,.1),rgba(5,7,14,.94) 58%);
color:#eef6ff;font-size:12px;line-height:1.35;
opacity:0;transform:translateY(8px);transition:.18s ease;pointer-events:none;
}
.room-link:hover .room-hover-desc{opacity:1;transform:translateY(0)}
@media(max-width:380px){.rooms-list{grid-template-columns:1fr}.room-link{min-height:112px}}
.drawer-tabs{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.11);border-radius:18px;padding:5px;gap:5px}
/* v74 fixes: make skin/modal close button fully clickable and icon-only room settings button */
.skins-x{
z-index:20;
display:inline-flex;
align-items:center;
justify-content:center;
line-height:1;
padding:0;
cursor:pointer;
pointer-events:auto;
}
.room-settings-stage-btn{
gap:0;
width:38px;
padding:0;
justify-content:center;
}
.room-settings-stage-btn span{display:none}
.room-settings-stage-btn .stage-action-icon{width:18px;height:18px}
/* v75: fine tune stage control spacing.
Left cards are pulled closer to the icon rail while keeping a safe gap.
Vote/history/auto-like controls are pushed closer to the chat boundary. */
:root{
--stage-card-left:7.5%;
--stage-right-controls-gap:4.5%;
}
.play-song-card,
.dj-now-card{
left:var(--stage-card-left);
}
.vote-box{
right:var(--stage-right-controls-gap);
bottom:var(--stage-card-bottom);
}
.auto-like-box{
right:var(--stage-right-controls-gap);
bottom:calc(var(--stage-card-bottom) - 58px);
}
.history-box{
right:calc(var(--stage-right-controls-gap) + 146px);
bottom:calc(var(--stage-card-bottom) - 58px);
}
@media(max-width:960px){
.play-song-card,
.dj-now-card{left:var(--stage-card-left);}
.vote-box{right:var(--stage-right-controls-gap);bottom:var(--stage-card-bottom);}
.auto-like-box{right:var(--stage-right-controls-gap);bottom:calc(var(--stage-card-bottom) - 58px);}
.history-box{right:calc(var(--stage-right-controls-gap) + 146px);bottom:calc(var(--stage-card-bottom) - 58px);}
}
/* v77: exact edge alignment with the room settings button.
The stage top action group uses the same edge gap as the lower panels.
Left cards mirror that same gap from the icon-rail side. */
:root{
--stage-edge-gap:14px;
--stage-lower-row-gap:20px;
}
.stage-top-actions{
right:var(--stage-edge-gap);
}
.play-song-card,
.dj-now-card{
left:var(--stage-edge-gap);
}
.vote-box{
right:var(--stage-edge-gap);
bottom:calc(var(--stage-card-bottom) + 8px);
}
.auto-like-box{
right:var(--stage-edge-gap);
bottom:calc(var(--stage-card-bottom) - 58px);
}
.history-box{
right:calc(var(--stage-edge-gap) + 134px + var(--stage-lower-row-gap));
bottom:calc(var(--stage-card-bottom) - 58px);
}
@media(max-width:960px){
.stage-top-actions{right:var(--stage-edge-gap);}
.play-song-card,
.dj-now-card{left:var(--stage-edge-gap);}
.vote-box{right:var(--stage-edge-gap);bottom:var(--stage-card-bottom);}
.auto-like-box{right:var(--stage-edge-gap);bottom:calc(var(--stage-card-bottom) - 58px);}
.history-box{right:calc(var(--stage-edge-gap) + 134px + var(--stage-lower-row-gap));bottom:calc(var(--stage-card-bottom) - 58px);}
}
@media(max-width:560px){
:root{--stage-edge-gap:9px;}
}
/* v83: screen player default size + working resize from sides/bottom only */
.screen-frame{
width:var(--screen-frame-width,36%);
height:var(--screen-frame-height,36%);
min-width:30.6%;
min-height:30.6%;
user-select:none;
touch-action:none;
}
.screen-frame.is-user-sized{
width:var(--screen-frame-width,36%);
height:var(--screen-frame-height,36%);
}
.screen-frame-resize-handle{
position:absolute;
z-index:24;
background:transparent;
border:0;
box-shadow:none;
opacity:0;
touch-action:none;
cursor:grab;
}
.screen-frame-resize-handle[data-dir="s"]{left:10px;right:10px;bottom:-8px;height:16px;cursor:ns-resize;}
.screen-frame-resize-handle[data-dir="e"]{top:10px;bottom:10px;right:-8px;width:16px;cursor:ew-resize;}
.screen-frame-resize-handle[data-dir="w"]{top:10px;bottom:10px;left:-8px;width:16px;cursor:ew-resize;}
.screen-frame-resize-handle[data-dir="se"]{bottom:-8px;right:-8px;width:22px;height:22px;cursor:nwse-resize;}
.screen-frame-resize-handle[data-dir="sw"]{bottom:-8px;left:-8px;width:22px;height:22px;cursor:nesw-resize;}
.screen-frame-resize-handle:active,.screen-frame.is-resizing .screen-frame-resize-handle{cursor:grabbing;}
.screen-frame.is-resizing{box-shadow:0 0 0 2px #7defff55,0 11px 22px #000b;}
/* v86: make right-side vertical spacing match left card spacing.
The lower row (History + Auto Like) now sits exactly one --stage-card-gap
below the vote-box, the same gap used between DJ status and Play card. */
:root{
--stage-right-row-height:32px;
--stage-right-row-gap:var(--stage-card-gap,8px);
--stage-right-row-bottom:calc(var(--stage-card-bottom) + 8px - var(--stage-right-row-height) - var(--stage-right-row-gap));
--stage-history-auto-gap:8px;
--stage-auto-like-width:190px;
}
.vote-box{
right:var(--stage-edge-gap);
bottom:calc(var(--stage-card-bottom) + 8px);
}
.auto-like-box{
right:var(--stage-edge-gap);
bottom:var(--stage-right-row-bottom);
width:var(--stage-auto-like-width);
min-width:var(--stage-auto-like-width);
height:var(--stage-right-row-height);
}
.history-box{
right:calc(var(--stage-edge-gap) + var(--stage-auto-like-width) + var(--stage-history-auto-gap));
bottom:var(--stage-right-row-bottom);
height:var(--stage-right-row-height);
}
@media(max-width:960px){
.vote-box{right:var(--stage-edge-gap);bottom:calc(var(--stage-card-bottom) + 8px);}
.auto-like-box{right:var(--stage-edge-gap);bottom:var(--stage-right-row-bottom);width:var(--stage-auto-like-width);min-width:var(--stage-auto-like-width);}
.history-box{right:calc(var(--stage-edge-gap) + var(--stage-auto-like-width) + var(--stage-history-auto-gap));bottom:var(--stage-right-row-bottom);}
}
/* Modern About Community widget */
.about-community-card{width:min(860px,calc(100vw - 34px));grid-template-rows:1fr;padding:0;overflow:hidden;background:linear-gradient(145deg,rgba(24,21,44,.96),rgba(9,6,20,.92));border-color:rgba(255,255,255,.2)}
.about-community-content{position:relative;z-index:1;padding:26px;overflow:auto;max-height:min(760px,calc(100vh - 34px))}
.about-community-head{padding-right:48px}.about-community-kicker{display:inline-flex;height:24px;align-items:center;padding:0 10px;margin-bottom:10px;border-radius:999px;background:rgba(34,216,255,.14);border:1px solid rgba(34,216,255,.28);color:#9defff;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.about-community-head h3{font-size:30px;margin:0 0 6px}.about-community-head p{max-width:680px;line-height:1.5;color:#d6daea}.about-community-hero{display:grid;grid-template-columns:minmax(180px,.75fr) 1.25fr;gap:12px;margin:4px 0 14px}.about-community-hero>div,.room-admins-box,.room-info-stat{border:1px solid rgba(255,255,255,.14);background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.035));box-shadow:inset 0 1px 0 rgba(255,255,255,.12);border-radius:18px}.about-community-hero>div{padding:16px}.about-community-hero small,.room-admins-box small,.room-info-stat small{display:block;color:#aeb8cf;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.06em}.about-community-hero strong{display:block;margin-top:7px;font-size:22px}.about-community-hero p{margin:7px 0 0;color:#edf2ff;font-size:13px;line-height:1.45}.room-info-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.room-info-stat{position:relative;min-height:112px;padding:15px 14px 14px;overflow:hidden}.room-info-stat:after{content:"";position:absolute;right:-28px;bottom:-32px;width:90px;height:90px;border-radius:50%;background:radial-gradient(circle,rgba(255,77,218,.18),transparent 68%)}.room-info-stat-icon{display:grid;place-items:center;width:34px;height:34px;margin-bottom:12px;border-radius:12px;background:linear-gradient(135deg,rgba(34,216,255,.22),rgba(255,77,218,.18));border:1px solid rgba(255,255,255,.14);font-size:17px}.room-info-stat b{position:relative;z-index:1;display:block;margin-top:6px;font-size:22px;line-height:1.1;word-break:break-word}.room-admins-box{margin-top:12px;padding:16px}.room-admins-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.room-admins-list span{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:999px;background:linear-gradient(135deg,rgba(25,195,125,.18),rgba(34,216,255,.13));border:1px solid rgba(142,255,223,.26);font-size:12px;font-weight:900}.room-admins-list em{color:#aeb8cf;font-style:normal;font-size:13px}.room-info-loader,.room-info-error{padding:18px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#d8e1ff}.room-info-error{color:#ffb8c0;border-color:rgba(255,120,150,.3)}
@media(max-width:720px){.about-community-content{padding:20px}.about-community-hero{grid-template-columns:1fr}.room-info-grid{grid-template-columns:1fr 1fr}.room-info-stat b{font-size:18px}}
@media(max-width:480px){.room-info-grid{grid-template-columns:1fr}}
/* v88 Room Stats icon polish */
.about svg{width:13px;height:13px;display:block;flex:0 0 auto}.about span{line-height:1}.about-community-head h3{display:flex;align-items:center;gap:10px}.room-stats-title-icon{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:13px;background:linear-gradient(135deg,rgba(34,216,255,.22),rgba(255,77,218,.18));border:1px solid rgba(255,255,255,.15);color:#dff7ff;font-size:19px;flex:0 0 auto}.room-stats-title-icon svg,.room-info-stat-icon svg{width:1em;height:1em;display:block}.room-info-stat-icon{color:#e9fbff}.room-info-stat-icon svg{font-size:19px}
/* v91: icon-only room description edit button */
.set-description-btn{
display:flex;
align-items:center;
justify-content:center;
margin:8px 0 0 0;
width:30px;
height:30px;
padding:0;
border-radius:11px;
border:1px solid #ffffff35;
background:linear-gradient(135deg,#ffffff1f,#ffffff0c);
color:#fff;
cursor:pointer;
box-shadow:0 8px 18px #0004,inset 0 1px 0 #ffffff28;
}
.set-description-btn svg{
width:16px;
height:16px;
display:block;
}
.set-description-btn:hover{
border-color:#ff6fdb88;
background:linear-gradient(135deg,#aa007d,#535fdb);
box-shadow:0 0 18px #ff5bd855;
}
/* v148: subtle modern room description above chat */
.room-description-board{
width:100%;
min-height:34px;
margin:0 0 10px;
padding:8px 10px;
border-radius:11px;
border:1px solid rgba(255,255,255,.09);
background:rgba(255,255,255,.045);
box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
color:rgba(235,226,240,.72);
font-size:11px;
line-height:1.42;
overflow:hidden;
position:relative;
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
}
.room-description-board:before{display:none}
.room-description-label{
color:rgba(255,255,255,.48);
font-weight:800;
margin-right:4px;
}
.room-description-board .set-description-btn{
margin:0 0 0 8px;
width:24px;
height:24px;
border-radius:8px;
vertical-align:middle;
background:rgba(139,92,246,.13);
border-color:rgba(255,255,255,.12);
box-shadow:none;
}
.room-description-board .set-description-btn:hover{
background:rgba(139,92,246,.22);
border-color:rgba(180,150,255,.32);
box-shadow:0 0 14px rgba(139,92,246,.14);
}
.room-description-board .set-description-btn svg{width:14px;height:14px}
/* v93 fullscreen profile editor */
.bar-profile-face{
width:42px;height:42px;border-radius:16px;border:1px solid rgba(255,255,255,.22);background:linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,.06));display:inline-grid;place-items:center;cursor:pointer;padding:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 12px 28px rgba(0,0,0,.28);overflow:hidden;margin-left:4px;flex:0 0 auto
}
.bar-profile-face img{width:34px;height:34px;object-fit:contain;border-radius:50%;display:block;background:radial-gradient(circle,#3c4b62 0 55%,#161d29 56%)}
.bar-profile-face:hover{border-color:rgba(157,239,255,.55);box-shadow:0 0 22px rgba(34,216,255,.18),0 12px 28px rgba(0,0,0,.32)}
.profile-fullscreen{position:fixed;inset:0;z-index:8200;color:#eef6ff;font-family:inherit;padding:92px 24px 104px;box-sizing:border-box;overflow:auto}
.profile-fullscreen[hidden]{display:none}.profile-fullscreen-bg{position:fixed;inset:0;background:radial-gradient(circle at 25% 15%,rgba(83,95,219,.34),transparent 34%),radial-gradient(circle at 84% 20%,rgba(34,216,255,.22),transparent 34%),linear-gradient(180deg,rgba(8,10,18,.94),rgba(5,7,13,.96));backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
.profile-fullscreen-card{position:relative;z-index:1;width:min(1380px,calc(100vw - 48px));min-height:min(720px,calc(100vh - 200px));margin:0 auto;display:grid;grid-template-columns:minmax(330px,42%) minmax(420px,1fr);border:1px solid rgba(255,255,255,.16);border-radius:34px;background:linear-gradient(135deg,rgba(255,255,255,.13),rgba(255,255,255,.055));box-shadow:0 34px 90px rgba(0,0,0,.52),inset 0 1px 0 rgba(255,255,255,.13);overflow:hidden}.profile-full-left{position:relative;padding:42px;display:flex;flex-direction:column;gap:10px;background:linear-gradient(160deg,rgba(83,95,219,.23),rgba(34,216,255,.08) 44%,rgba(0,0,0,.14));border-right:1px solid rgba(255,255,255,.12)}
.profile-kicker{font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:#9defff;font-weight:900}.profile-full-left h2,.profile-editor-head h3{margin:0;color:#fff;font-size:38px;line-height:1;font-weight:950}.profile-full-left p{margin:0;color:#b7c4d8;line-height:1.55;max-width:520px}.profile-close-btn{position:absolute;right:22px;top:20px;width:42px;height:42px;border:1px solid rgba(255,255,255,.18);border-radius:16px;background:rgba(0,0,0,.22);color:#fff;font-size:28px;line-height:1;cursor:pointer}.profile-avatar-showcase{margin:auto;align-self:center;width:min(390px,90%);height:430px;border-radius:34px;display:grid;place-items:center;position:relative;background:radial-gradient(circle at 50% 62%,rgba(157,239,255,.18),transparent 45%),linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.035));border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.13)}
.profile-avatar-showcase img{max-width:88%;max-height:82%;object-fit:contain;filter:none!important;}.profile-avatar-showcase span{position:absolute;left:22px;bottom:20px;border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:8px 14px;background:rgba(0,0,0,.25);font-size:12px;font-weight:900;color:#dce8fb}.profile-editor-form{padding:42px;display:grid;gap:17px;align-content:start}.profile-editor-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:4px}.profile-save-btn{border:1px solid rgba(157,239,255,.35);border-radius:18px;background:linear-gradient(135deg,rgba(34,216,255,.34),rgba(83,95,219,.38));color:#fff;font-weight:950;padding:13px 18px;cursor:pointer;box-shadow:0 14px 34px rgba(0,0,0,.28)}
.profile-editor-form label{display:grid;gap:7px;font-size:12px;font-weight:950;letter-spacing:.04em;text-transform:uppercase;color:#dce8fb}.profile-editor-form input,.profile-editor-form textarea{width:100%;box-sizing:border-box;border:1px solid rgba(255,255,255,.18);border-radius:18px;background:rgba(4,8,16,.58);color:#fff;padding:14px 15px;outline:none;font:inherit;text-transform:none;letter-spacing:0}.profile-editor-form textarea{resize:vertical;min-height:118px}.profile-editor-form input:focus,.profile-editor-form textarea:focus{border-color:rgba(157,239,255,.55);box-shadow:0 0 0 4px rgba(157,239,255,.08)}.profile-label-row{display:flex;justify-content:space-between;align-items:end;gap:12px;margin-bottom:10px}.profile-label-row b{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:#dce8fb}.profile-label-row span{font-size:12px;color:#9aa9bd}.profile-avatar-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:10px;max-height:220px;overflow:auto;padding:8px;border:1px solid rgba(255,255,255,.12);border-radius:22px;background:rgba(0,0,0,.18)}.profile-avatar-option{height:74px;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:rgba(255,255,255,.06);cursor:pointer;display:grid;place-items:center;padding:4px}.profile-avatar-option img{max-width:100%;max-height:100%;object-fit:contain}.profile-avatar-option.selected{border-color:rgba(124,255,178,.7);box-shadow:0 0 0 3px rgba(124,255,178,.12),0 0 22px rgba(124,255,178,.14);background:rgba(124,255,178,.08)}.profile-save-message{margin:0;border-radius:14px;padding:11px 13px;background:rgba(124,255,178,.1);border:1px solid rgba(124,255,178,.28);color:#a9ffc9;font-weight:800}.profile-save-message.error{background:rgba(255,91,133,.1);border-color:rgba(255,91,133,.34);color:#ffc2d1}.profile-bio{margin:0 14px 12px;color:#c5cedd;font-size:13px;line-height:1.35;word-break:break-word}.profile-edit-popup-btn{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 14px 12px;width:calc(100% - 28px);border:1px solid rgba(157,239,255,.32);border-radius:14px;background:linear-gradient(135deg,rgba(34,216,255,.16),rgba(83,95,219,.2));color:#fff;font-weight:950;padding:10px;cursor:pointer}.profile-edit-popup-btn svg{width:18px;height:18px}.profile-open .menu-drawer,.profile-open .drawer-shade{display:none}
@media (max-width:900px){.profile-fullscreen{padding:76px 12px 96px}.profile-fullscreen-card{width:100%;grid-template-columns:1fr;border-radius:24px}.profile-full-left{border-right:0;border-bottom:1px solid rgba(255,255,255,.12);padding:26px}.profile-avatar-showcase{height:290px}.profile-editor-form{padding:24px}.profile-editor-head{align-items:stretch;flex-direction:column}.profile-save-btn{width:100%}.profile-full-left h2,.profile-editor-head h3{font-size:30px}}
/* v95: join date + no outer scrolling profile editor */
.profile-joined-popup{font-size:11px;color:#c8d6e8;font-weight:800;opacity:.9;margin-top:1px}
.profile-joined-card{display:flex;align-items:center;justify-content:space-between;gap:16px;border:1px solid rgba(255,255,255,.14);border-radius:18px;background:rgba(255,255,255,.055);padding:13px 15px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.profile-joined-card span{font-size:12px;font-weight:950;text-transform:uppercase;letter-spacing:.04em;color:#9defff}.profile-joined-card strong{color:#fff;font-size:14px;font-weight:950}
.profile-fullscreen{overflow:hidden;display:flex;align-items:center;justify-content:center;padding:82px 24px 96px}
.profile-fullscreen-card{height:min(760px,calc(100vh - 178px));min-height:0;max-height:calc(100vh - 178px)}
.profile-full-left{min-height:0;overflow:hidden}.profile-editor-form{min-height:0;max-height:100%;overflow-y:auto;overscroll-behavior:contain;padding-right:34px}.profile-avatar-showcase{min-height:0;height:min(430px,calc(100vh - 382px))}.profile-editor-form textarea{min-height:96px;max-height:150px}.profile-avatar-grid{max-height:160px}
@media (max-height:760px){.profile-fullscreen{padding-top:72px;padding-bottom:86px}.profile-fullscreen-card{height:calc(100vh - 158px);max-height:calc(100vh - 158px)}.profile-full-left{padding:26px}.profile-full-left h2,.profile-editor-head h3{font-size:30px}.profile-full-left p{font-size:13px}.profile-editor-form{padding-top:26px;padding-bottom:26px;gap:12px}.profile-avatar-showcase{height:min(300px,calc(100vh - 342px))}.profile-avatar-grid{max-height:130px}.profile-editor-form input,.profile-editor-form textarea{padding:11px 13px}}
@media (max-width:900px){.profile-fullscreen{align-items:flex-start;overflow:auto}.profile-fullscreen-card{height:auto;max-height:none}.profile-editor-form{overflow:visible;max-height:none;padding-right:24px}.profile-avatar-showcase{height:260px}}
/* Profile avatar picker moved under the avatar showcase */
.profile-avatar-showcase{margin-top:28px;margin-bottom:16px;flex:0 0 auto}
.profile-change-avatar-btn{position:absolute;right:18px;bottom:18px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid rgba(157,239,255,.34);border-radius:999px;background:linear-gradient(135deg,rgba(34,216,255,.24),rgba(83,95,219,.34));color:#fff;font-weight:950;font-size:12px;padding:10px 14px;box-shadow:0 14px 34px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.14);backdrop-filter:none!important;cursor:pointer;z-index:3;transition:transform .16s ease,border-color .16s ease,background .16s ease}
.profile-change-avatar-btn:hover{border-color:rgba(157,239,255,.62);background:linear-gradient(135deg,rgba(34,216,255,.34),rgba(83,95,219,.46))}
.profile-change-avatar-btn svg{width:18px;height:18px;flex:0 0 auto}
.profile-avatar-panel{width:100%;margin-top:2px;border:1px solid rgba(255,255,255,.12);border-radius:24px;background:rgba(0,0,0,.16);padding:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.profile-avatar-panel[hidden]{display:none}
.profile-avatar-panel .profile-avatar-grid{max-height:260px}
.profile-full-left.avatar-picker-open{overflow-y:auto;overscroll-behavior:contain;padding-right:34px}
.profile-editor-head>div{display:grid;gap:8px}.profile-editor-head .profile-save-message{margin-top:2px}
.profile-editor-form>.profile-save-message{display:none}
@media (max-height:760px){.profile-avatar-panel .profile-avatar-grid{max-height:210px}.profile-change-avatar-btn{right:14px;bottom:14px;padding:9px 12px}.profile-avatar-showcase{margin-top:16px}}
@media (max-width:900px){.profile-full-left.avatar-picker-open{overflow:visible;padding-right:26px}.profile-change-avatar-btn{right:14px;bottom:14px}.profile-avatar-panel .profile-avatar-grid{max-height:220px}}
/* v97: smaller Change avatar button + avatar panel scrolls with left profile column */
.profile-change-avatar-btn{
right:14px;
bottom:14px;
gap:6px;
font-size:11px;
padding:7px 10px;
border-radius:14px;
line-height:1;
}
.profile-change-avatar-btn svg{
width:15px;
height:15px;
}
.profile-full-left.avatar-picker-open{
overflow-y:auto;
overflow-x:hidden;
align-content:start;
padding-right:34px;
}
.profile-full-left.avatar-picker-open .profile-avatar-showcase{
margin-top:18px;
margin-bottom:12px;
}
.profile-full-left.avatar-picker-open .profile-avatar-panel{
width:100%;
box-sizing:border-box;
flex:0 0 auto;
margin-top:0;
margin-bottom:20px;
padding:16px;
border-radius:26px;
background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035)),rgba(0,0,0,.18);
}
.profile-full-left.avatar-picker-open .profile-avatar-grid,
.profile-avatar-panel .profile-avatar-grid{
max-height:none;
overflow:visible;
padding:0;
border:0;
background:transparent;
border-radius:0;
grid-template-columns:repeat(auto-fill,minmax(70px,1fr));
}
.profile-full-left.avatar-picker-open .profile-avatar-option{
height:72px;
}
@media (max-height:760px){
.profile-change-avatar-btn{right:10px;bottom:10px;padding:6px 9px;font-size:10.5px}
.profile-full-left.avatar-picker-open .profile-avatar-grid{max-height:none;overflow:visible}
}
@media (max-width:900px){
.profile-full-left.avatar-picker-open{overflow-y:auto;padding-right:26px}
.profile-full-left.avatar-picker-open .profile-avatar-grid{max-height:none;overflow:visible}
}
/* v98: profile password change fields */
.profile-password-section{
display:grid;
gap:11px;
border:1px solid rgba(255,255,255,.14);
border-radius:22px;
background:rgba(255,255,255,.045);
padding:14px;
box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.profile-password-section .profile-label-row{
margin-bottom:0;
}
.profile-password-section label{
gap:7px;
}
.profile-password-wrap{
position:relative;
display:block;
width:100%;
}
.profile-password-wrap input{
padding-right:50px;
}
.profile-password-eye{
position:absolute;
right:10px;
top:50%;
transform:translateY(-50%);
width:34px;
height:34px;
border:1px solid rgba(255,255,255,.14);
border-radius:13px;
background:rgba(255,255,255,.065);
color:#dce8fb;
display:grid;
place-items:center;
padding:0;
cursor:pointer;
opacity:.72;
transition:opacity .15s ease, background .15s ease, border-color .15s ease;
}
.profile-password-eye:hover,
.profile-password-eye:active{
opacity:1;
background:rgba(157,239,255,.12);
border-color:rgba(157,239,255,.34);
}
.profile-password-eye svg{
width:18px;
height:18px;
display:block;
}
@media (max-height:760px){
.profile-password-section{padding:12px;gap:9px}
.profile-password-eye{width:31px;height:31px;right:8px}
}
/* v99: align Change avatar with profileActionLabel */
.profile-avatar-showcase #profileActionLabel{bottom:20px;}
.profile-change-avatar-btn{bottom:20px;}
@media (max-height:760px){.profile-change-avatar-btn{bottom:20px;}}
@media (max-width:900px){.profile-change-avatar-btn{bottom:20px;}}
/* v100: equal avatar action heights, prevent showcase jump, fields order handled in markup */
.profile-avatar-showcase #profileActionLabel,
.profile-change-avatar-btn{
height:32px;
min-height:32px;
box-sizing:border-box;
display:inline-flex;
align-items:center;
justify-content:center;
line-height:1;
}
.profile-avatar-showcase #profileActionLabel{
padding:0 14px;
}
.profile-change-avatar-btn{
bottom:20px;
padding:0 12px;
}
.profile-full-left.avatar-picker-open .profile-avatar-showcase{
margin-top:28px;
margin-bottom:16px;
height:min(430px,calc(100vh - 382px));
flex:0 0 auto;
}
@media (max-height:760px){
.profile-full-left.avatar-picker-open .profile-avatar-showcase{
margin-top:16px;
margin-bottom:16px;
height:min(300px,calc(100vh - 342px));
}
.profile-change-avatar-btn{bottom:20px;height:32px;min-height:32px;padding:0 11px;}
}
@media (max-width:900px){
.profile-full-left.avatar-picker-open .profile-avatar-showcase{
height:260px;
}
}
/* v101: stable profile left scrollbar + sidebar-style avatar grid in profile */
.profile-full-left{
overflow-y:auto;
overflow-x:hidden;
scrollbar-gutter:stable;
padding-right:42px;
}
.profile-full-left.avatar-picker-open{
overflow-y:auto;
overflow-x:hidden;
scrollbar-gutter:stable;
padding-right:42px;
}
.profile-full-left .profile-avatar-showcase,
.profile-full-left.avatar-picker-open .profile-avatar-showcase{
align-self:center;
width:min(390px,90%);
}
.profile-avatar-panel,
.profile-full-left.avatar-picker-open .profile-avatar-panel{
align-self:center;
width:min(390px,90%);
max-width:390px;
box-sizing:border-box;
margin-left:auto;
margin-right:auto;
padding:14px;
border:1px solid rgba(255,255,255,.18);
border-radius:22px;
background:linear-gradient(180deg,#ffffff10,#ffffff06);
box-shadow:inset 0 1px 0 #ffffff20;
}
.profile-avatar-panel .profile-avatar-grid,
.profile-full-left.avatar-picker-open .profile-avatar-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:12px;
justify-content:center;
align-items:center;
width:100%;
max-height:none;
overflow:visible;
padding:0;
border:0;
border-radius:0;
background:transparent;
}
.profile-avatar-panel .profile-avatar-option,
.profile-full-left.avatar-picker-open .profile-avatar-option{
height:auto;
min-height:108px;
padding:8px;
border:1px solid #ffffff1f;
border-radius:15px;
background:#ffffff0d;
display:grid;
place-items:center;
box-shadow:none;
}
.profile-avatar-panel .profile-avatar-option.selected,
.profile-full-left.avatar-picker-open .profile-avatar-option.selected{
border-color:#f200be;
box-shadow:0 0 0 2px #f200be55;
background:#ffffff0d;
}
.profile-avatar-panel .profile-avatar-option img,
.profile-full-left.avatar-picker-open .profile-avatar-option img{
width:100%;
height:92px;
max-width:100%;
max-height:none;
object-fit:contain;
image-rendering:auto;
}
@media (max-height:760px){
.profile-full-left,
.profile-full-left.avatar-picker-open{padding-right:26px;}
.profile-avatar-panel .profile-avatar-option,
.profile-full-left.avatar-picker-open .profile-avatar-option{min-height:100px;}
.profile-avatar-panel .profile-avatar-option img,
.profile-full-left.avatar-picker-open .profile-avatar-option img{height:84px;}
}
@media (max-width:900px){
.profile-full-left,
.profile-full-left.avatar-picker-open{padding-right:26px;scrollbar-gutter:auto;}
.profile-avatar-panel,
.profile-full-left.avatar-picker-open .profile-avatar-panel{width:100%;max-width:none;}
}
/* v102 auth + separate public name / unique username */
body.auth{min-height:100vh;height:auto;overflow:auto;display:grid;place-items:center;padding:28px;background:#06030d;color:#fff}
body.auth:before{background:radial-gradient(circle at 22% 12%,rgba(83,95,219,.42),transparent 36%),radial-gradient(circle at 82% 18%,rgba(34,216,255,.28),transparent 32%),radial-gradient(circle at 50% 100%,rgba(255,77,218,.18),transparent 38%),linear-gradient(180deg,#080812,#03020a)}
body.auth:after{background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.58)),radial-gradient(circle at 15% 30%,rgba(255,255,255,.13),transparent 2px),radial-gradient(circle at 72% 22%,rgba(255,255,255,.18),transparent 2px)}
.auth-shell{width:min(100%,520px);position:relative;z-index:1}.auth-card{display:grid;gap:14px;padding:34px;border:1px solid rgba(255,255,255,.16);border-radius:30px;background:linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.055));box-shadow:0 34px 90px rgba(0,0,0,.52),inset 0 1px 0 rgba(255,255,255,.14);backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
.auth-kicker{font-size:12px;text-transform:uppercase;letter-spacing:.16em;color:#9defff;font-weight:950}.auth-card h1{margin:0;font-size:42px;line-height:1;color:#fff;font-weight:950}.auth-subtitle,.auth-card .muted{margin:0;color:#b7c4d8;font-size:14px;line-height:1.5}.auth-card label{display:grid;gap:7px;color:#dce8fb;font-size:12px;font-weight:950;text-transform:uppercase;letter-spacing:.04em}.auth-card input:not([type="radio"]):not([type="checkbox"]){width:100%;border:1px solid rgba(255,255,255,.18);border-radius:18px;background:rgba(4,8,16,.68);color:#fff;padding:14px 15px;outline:none;text-transform:none;letter-spacing:0}.auth-card input:focus{border-color:rgba(157,239,255,.58);box-shadow:0 0 0 4px rgba(157,239,255,.09)}.auth-card button{height:48px;border-radius:18px;background:linear-gradient(135deg,rgba(34,216,255,.55),rgba(83,95,219,.7));border:1px solid rgba(157,239,255,.45);font-weight:950;box-shadow:0 14px 34px rgba(0,0,0,.3)}.auth-card a{text-align:center;color:#9defff;font-weight:900}.auth-card .error{margin:0;padding:11px 13px;border-radius:15px;background:rgba(255,77,117,.14);border:1px solid rgba(255,123,157,.35);color:#ffd2dd;font-weight:800}.auth-check{display:flex;grid-template-columns:auto 1fr;align-items:center;gap:10px;text-transform:none;letter-spacing:0;font-size:13px;color:#dce8fb}.auth-check input{width:18px;height:18px;accent-color:#22d8ff}.avatar-picker{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.avatar-picker label{display:block}.avatar-picker input{display:none}.avatar-preview{height:58px;border:1px solid rgba(255,255,255,.14);border-radius:16px;background:rgba(255,255,255,.06);display:grid;place-items:center}.avatar-preview img{max-width:100%;max-height:54px;object-fit:contain}.avatar-picker input:checked+.avatar-preview{border-color:rgba(124,255,178,.75);box-shadow:0 0 0 2px rgba(124,255,178,.18),0 0 22px rgba(124,255,178,.18)}
.account{display:inline-flex;align-items:center;gap:6px}.account small,.chat-name small,.profile-username{font-size:10px;color:#9defff;font-weight:900;text-transform:none;letter-spacing:.02em}.profile-username{display:block;margin-top:2px;color:#aab8cb}.chat-name{display:inline-flex;align-items:center;gap:4px;flex-wrap:wrap}.profile-editor-form label input[name="username"]{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#9defff}
/* v105: public profile viewer from avatar popup */
.profile-status-popup{
margin-top:0;
color:#dce8fb;
background:rgba(255,255,255,.055);
border-top:1px solid rgba(255,255,255,.08);
border-bottom:1px solid rgba(255,255,255,.06);
padding:10px 14px;
}
.public-profile-open .menu-drawer,
.public-profile-open .drawer-shade{display:none}
.public-profile-card .profile-full-left p{max-width:440px}
.public-profile-avatar-showcase img{max-width:92%;max-height:86%}
.public-profile-details{align-content:center}
.profile-public-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.profile-public-item,
.profile-public-stat{
min-width:0;
border:1px solid rgba(255,255,255,.14);
border-radius:20px;
background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.035));
padding:15px;
box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.profile-public-item.full{grid-column:1/-1}
.profile-public-item span,
.profile-public-stat span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#9defff;font-weight:950;margin-bottom:7px}
.profile-public-item strong,
.profile-public-stat strong{display:block;color:#fff;font-size:18px;font-weight:950;word-break:break-word}
.profile-public-item p{margin:0;max-width:none;color:#d8e3f4;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.profile-public-stat{display:grid;place-items:center;text-align:center;min-height:112px;background:radial-gradient(circle at 50% 0,rgba(157,239,255,.12),transparent 58%),linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.035))}
.profile-public-stat strong{font-size:34px;color:#fff}
@media(max-width:900px){.profile-public-grid{grid-template-columns:1fr}.profile-public-stat{min-height:92px}.profile-public-stat strong{font-size:28px}}
/* v106: friends, blocks, notifications, My Hub */
.nav-bell-btn{position:fixed;right:268px;top:7px;z-index:121;width:30px;height:30px;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);display:grid;place-items:center;color:#dff8ff;box-shadow:0 12px 30px rgba(0,0,0,.3);}
.nav-bell-btn:hover{background:rgba(157,239,255,.14);border-color:rgba(157,239,255,.36)}
.nav-bell-btn svg{width:18px;height:18px}.nav-bell-btn span{position:absolute;right:-4px;top:-5px;min-width:16px;height:16px;border-radius:99px;background:#ff315b;color:#fff;font-size:9px;font-weight:950;display:grid;place-items:center;border:1px solid rgba(255,255,255,.4)}
.notifications-dropdown{position:fixed;z-index:240;width:330px;max-height:420px;overflow:auto;border:1px solid rgba(255,255,255,.16);border-radius:22px;background:linear-gradient(180deg,rgba(20,8,34,.98),rgba(6,3,13,.98));box-shadow:0 24px 80px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.12);padding:10px;backdrop-filter:none!important;}
.notifications-head{display:flex;align-items:center;justify-content:space-between;padding:6px 8px 10px}.notifications-head b{font-size:13px;text-transform:uppercase;letter-spacing:.06em}.notifications-head button{width:26px;height:26px;border-radius:10px;background:rgba(255,255,255,.08)}
.notification-item{display:flex;gap:10px;padding:10px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);margin-bottom:8px}.notification-item.unread{background:rgba(83,95,219,.18);border-color:rgba(157,239,255,.24)}.notification-item img{width:38px;height:38px;object-fit:cover;border-radius:12px}.notification-item p{margin:0 0 5px;font-size:12px;color:#ecf6ff}.notification-item small{font-size:10px;color:#9aa9bd}.notification-accept{margin-top:7px;height:28px;border-radius:10px;background:linear-gradient(135deg,#20c56a,#0c8f4c);font-weight:950;padding:0 12px}.notifications-empty,.hub-empty{margin:10px;color:#9aa9bd;font-size:12px;text-align:center}
.profile-social-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 14px 12px}.profile-social-btn{height:38px;border-radius:14px;display:flex;align-items:center;justify-content:center;gap:7px;font-weight:950;border:1px solid rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}.profile-social-btn svg{width:17px;height:17px}.profile-social-btn.friend{background:linear-gradient(135deg,rgba(35,205,107,.95),rgba(19,138,77,.95));}.profile-social-btn.block{background:linear-gradient(135deg,rgba(255,70,98,.95),rgba(168,24,48,.95));}.profile-social-btn.is-pending{background:linear-gradient(135deg,rgba(255,190,73,.9),rgba(173,101,16,.9))}.profile-social-btn.is-friends{background:linear-gradient(135deg,rgba(56,220,132,.9),rgba(20,119,79,.9))}.profile-social-btn.is-blocked{background:linear-gradient(135deg,rgba(128,138,155,.85),rgba(62,69,82,.85))}
.my-hub-btn svg{width:20px;height:20px}.profile-public-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.profile-public-stat:nth-last-child(1){grid-column:auto}.my-hub-card{max-width:980px}.hub-tabs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}.hub-tabs button{height:42px;border-radius:16px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);font-weight:950}.hub-tabs button.active{background:linear-gradient(135deg,rgba(34,216,255,.18),rgba(83,95,219,.24));border-color:rgba(157,239,255,.4)}.hub-panel{display:none;gap:10px}.hub-panel.active{display:grid}.hub-row{display:flex;align-items:center;gap:12px;padding:12px;border-radius:18px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05)}.hub-row img{width:48px;height:48px;border-radius:15px;object-fit:cover;background:rgba(0,0,0,.2)}.hub-row div{min-width:0;flex:1}.hub-row strong{display:block;font-size:14px}.hub-row small{display:block;color:#9aa9bd;font-size:11px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hub-action{height:34px;border-radius:12px;padding:0 12px;background:rgba(255,74,105,.18);border:1px solid rgba(255,74,105,.28);font-weight:950}.hub-action.unblock{background:rgba(124,255,178,.14);border-color:rgba(124,255,178,.28)}.public-profile-avatar-showcase svg{width:92px;height:92px;color:#9defff;filter:none!important;}
/* v107: notification/account order + social flow fixes */
.nav-bell-btn{right:536px;}
.notification-status-pill{display:inline-flex;align-items:center;justify-content:center;margin-top:8px;height:25px;padding:0 10px;border-radius:999px;background:rgba(27,214,122,.16);border:1px solid rgba(27,214,122,.38);color:#7dffba;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;}
/* v108: tighter navbar bell, immediate social states, simplified My Hub */
.nav-bell-btn{
right:182px;
top:9px;
width:26px;
height:26px;
border-radius:10px;
box-shadow:0 8px 22px rgba(0,0,0,.24);
}
.nav-bell-btn svg{width:15px;height:15px}
.nav-bell-btn span{min-width:14px;height:14px;font-size:8px;right:-4px;top:-5px}
.my-hub-card-simple{
display:block;
grid-template-columns:none;
width:min(860px,calc(100vw - 48px));
max-width:860px;
min-height:0;
overflow:visible;
}
.my-hub-card-simple .profile-close-btn{z-index:3}
.my-hub-card-simple .profile-editor-form{
max-height:min(680px,calc(100vh - 170px));
padding:42px;
overflow-y:auto;
}
.my-hub-card-simple .profile-editor-head{padding-right:48px}
.my-hub-card-simple .hub-panel{max-height:none}
/* v109: unified modern navbar/account cluster + profile social action polish */
.room-head .nav-account-cluster{
margin-left:auto;
display:inline-flex;
align-items:center;
gap:8px;
height:30px;
max-width:min(440px,calc(100vw - 650px));
padding:3px 7px;
border:1px solid rgba(255,255,255,.14);
border-radius:999px;
background:linear-gradient(135deg,rgba(12,8,24,.86),rgba(25,12,42,.68));
box-shadow:0 14px 38px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.12);
backdrop-filter:none!important;
z-index:140;
}
.room-head .nav-account-cluster .nav-bell-btn{
position:relative;
right:auto;
top:auto;
width:24px;
height:24px;
flex:0 0 24px;
border-radius:50%;
background:rgba(157,239,255,.09);
border:1px solid rgba(157,239,255,.18);
color:#dff8ff;
box-shadow:none;
display:grid;
place-items:center;
}
.room-head .nav-account-cluster .nav-bell-btn:hover{
background:rgba(157,239,255,.17);
border-color:rgba(157,239,255,.38);
}
.room-head .nav-account-cluster .nav-bell-btn svg{width:14px;height:14px}
.room-head .nav-account-cluster .nav-bell-btn span{
right:-4px;
top:-5px;
min-width:14px;
height:14px;
padding:0 3px;
border-radius:999px;
background:#ff315b;
color:#fff;
font-size:8px;
line-height:14px;
font-weight:950;
border:1px solid rgba(255,255,255,.55);
}
.room-head .nav-account-cluster .account{
position:static;
margin-left:0;
right:auto;
top:auto;
z-index:auto;
transform:none;
display:inline-flex;
align-items:baseline;
gap:6px;
min-width:0;
max-width:190px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
color:#eef6ff;
font-size:12px;
}
.room-head .nav-account-cluster .account b{
min-width:0;
max-width:105px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
font-size:12px;
font-weight:950;
letter-spacing:.01em;
}
.room-head .nav-account-cluster .account small{
min-width:0;
max-width:80px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
font-size:10px;
color:#9defff;
font-weight:900;
}
.room-head .nav-account-cluster .nav-divider{
width:1px;
height:18px;
flex:0 0 1px;
background:linear-gradient(180deg,transparent,rgba(255,255,255,.24),transparent);
}
.room-head .nav-account-cluster .nav-logout{
height:22px;
padding:0 9px;
border-radius:999px;
display:inline-flex;
align-items:center;
justify-content:center;
color:#ffdae2;
background:rgba(255,74,105,.08);
border:1px solid rgba(255,74,105,.15);
font-size:10px;
font-weight:950;
text-transform:uppercase;
letter-spacing:.05em;
}
.room-head .nav-account-cluster .nav-logout:hover{
background:rgba(255,74,105,.18);
border-color:rgba(255,74,105,.32);
color:#fff;
}
.profile-social-actions{
display:grid;
grid-template-columns:1fr 1fr;
gap:7px;
margin:0 14px 13px;
padding:7px;
border-radius:18px;
background:rgba(255,255,255,.045);
border:1px solid rgba(255,255,255,.09);
}
.profile-social-btn{
height:34px;
min-width:0;
border-radius:13px;
gap:6px;
padding:0 9px;
font-size:11px;
line-height:1;
font-weight:950;
letter-spacing:.015em;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 10px 20px rgba(0,0,0,.18);
}
.profile-social-btn svg{width:14px;height:14px;flex:0 0 14px}
.profile-social-btn span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.profile-social-btn.friend{background:linear-gradient(135deg,rgba(39,208,114,.96),rgba(18,139,78,.96));border-color:rgba(116,255,177,.32)}
.profile-social-btn.block{background:linear-gradient(135deg,rgba(255,67,97,.96),rgba(170,24,49,.96));border-color:rgba(255,139,158,.30)}
.profile-social-btn:hover{filter:brightness(1.08)}
@media(max-width:980px){
.room-head .nav-account-cluster{right:12px;max-width:calc(100vw - 360px)}
.room-head .nav-account-cluster .account b{max-width:80px}
.room-head .nav-account-cluster .account small{display:none}
}
/* v110: keep My Hub intact, but let the public View Profile panel breathe/scroll */
.public-profile-view.profile-fullscreen{
overflow:auto;
align-items:flex-start;
justify-content:center;
padding:72px 24px 96px;
}
.public-profile-view .public-profile-card{
height:auto;
min-height:min(660px,calc(100vh - 168px));
max-height:none;
overflow:visible;
}
.public-profile-view .profile-full-left{
min-height:0;
overflow:visible;
padding:34px;
}
.public-profile-view .public-profile-details{
min-height:0;
max-height:none;
overflow:visible;
align-content:start;
padding:34px 38px;
}
.public-profile-view .profile-avatar-showcase{
height:min(360px,calc(100vh - 300px));
min-height:240px;
margin:22px auto 0;
}
.public-profile-view .profile-public-grid{
gap:10px;
}
.public-profile-view .profile-public-item,
.public-profile-view .profile-public-stat{
padding:12px;
border-radius:17px;
}
.public-profile-view .profile-public-stat{
min-height:92px;
}
.public-profile-view .profile-public-stat strong{
font-size:28px;
}
@media(max-height:760px){
.public-profile-view.profile-fullscreen{padding-top:58px;padding-bottom:86px;}
.public-profile-view .profile-full-left{padding:26px;}
.public-profile-view .public-profile-details{padding:26px 30px;}
.public-profile-view .profile-avatar-showcase{height:260px;min-height:210px;}
.public-profile-view .profile-full-left h2,
.public-profile-view .profile-editor-head h3{font-size:29px;}
}
@media(max-width:900px){
.public-profile-view .public-profile-card{
grid-template-columns:1fr;
width:100%;
}
.public-profile-view .profile-full-left{border-right:0;border-bottom:1px solid rgba(255,255,255,.12);}
.public-profile-view .public-profile-details{padding:24px;}
.public-profile-view .profile-public-grid{grid-template-columns:1fr;}
}
/* v111 friend actions + navbar/player polish */
.room-head .nav-account-cluster .nav-logout{
height:auto;
padding:0;
border-radius:0;
background:transparent;
border:0;
box-shadow:none;
color:#ffccd7;
font-size:9px;
line-height:1;
font-weight:900;
text-transform:uppercase;
letter-spacing:.045em;
text-decoration:none;
}
.room-head .nav-account-cluster .nav-logout:hover{
background:transparent;
border:0;
color:#fff;
text-decoration:none;
text-underline-offset:3px;
}
.floating-player .my-hub-btn{
width:48px;
height:44px;
border-radius:14px;
margin-left:2px;
}
.floating-player .my-hub-btn svg{width:23px;height:23px}
.floating-player .bar-profile-face{
width:48px;
height:44px;
border-radius:14px;
margin-left:2px;
}
.floating-player .bar-profile-face img{width:36px;height:36px}
.profile-social-actions{
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:8px;
}
.public-profile-view .profile-full-left .profile-social-actions{
width:min(390px,90%);
align-self:center;
margin:0 auto 8px;
}
.profile-social-btn.is-friends span::first-letter{ }
.profile-friends-congrats{
border:1px solid rgba(124,255,178,.18);
border-radius:18px;
background:linear-gradient(135deg,rgba(39,208,114,.10),rgba(34,216,255,.075));
color:#dfffea;
padding:12px 15px;
font-size:13px;
font-weight:850;
box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.profile-friends-congrats strong{color:#7cffb2;font-size:15px;font-weight:950}
.notification-status-pill.cancelled{
background:rgba(255,190,73,.13);
border-color:rgba(255,190,73,.25);
color:#ffd58a;
}
/* v112: modern no-pill navbar, bigger hub/profile buttons, notification decline spacing, blocked friend guard */
.room-head .nav-account-cluster{
margin-left:auto;
position:relative;
display:inline-flex;
align-items:center;
gap:12px;
height:38px;
max-width:min(470px,calc(100vw - 560px));
padding:0;
border:0;
border-radius:0;
background:transparent;
box-shadow:none;
backdrop-filter:none!important;
}
.room-head .nav-account-cluster .nav-bell-btn{
position:relative;
inset:auto;
width:32px;
height:32px;
flex:0 0 32px;
border-radius:12px;
background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
border:1px solid rgba(157,239,255,.20);
color:#dff8ff;
box-shadow:0 10px 26px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.12);
}
.room-head .nav-account-cluster .nav-bell-btn:hover{background:rgba(157,239,255,.14);border-color:rgba(157,239,255,.42)}
.room-head .nav-account-cluster .nav-bell-btn svg{width:16px;height:16px}
.room-head .nav-account-cluster .account{
position:static;
display:grid;
gap:1px;
margin:0;
padding:0;
min-width:0;
max-width:210px;
color:#eef6ff;
line-height:1.05;
text-align:left;
}
.room-head .nav-account-cluster .account b{display:block;max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:950;color:#fff}
.room-head .nav-account-cluster .account small{display:block;max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;font-weight:850;color:#9defff;opacity:.9}
.room-head .nav-account-cluster .nav-divider{width:1px;height:24px;flex:0 0 1px;background:linear-gradient(180deg,transparent,rgba(157,239,255,.28),rgba(255,255,255,.14),transparent)}
.room-head .nav-account-cluster .nav-logout{
color:#ffccd7;
font-size:10px;
font-weight:900;
line-height:1;
text-transform:uppercase;
letter-spacing:.055em;
text-decoration:none;
background:transparent;
border:0;
padding:0;
}
.room-head .nav-account-cluster .nav-logout:hover{color:#fff;text-decoration:none;text-underline-offset:4px}
.floating-player .my-hub-btn,.floating-player .bar-profile-face{width:56px;height:50px;border-radius:16px;margin-left:4px}
.floating-player .my-hub-btn svg{width:27px;height:27px}.floating-player .bar-profile-face img{width:40px;height:40px}
.profile-social-actions{gap:10px;padding:8px;border-radius:20px}.profile-social-btn{height:36px;font-size:10px;border-radius:14px}.profile-social-btn.is-disabled{background:linear-gradient(135deg,rgba(113,123,140,.86),rgba(53,60,73,.86));border-color:rgba(180,191,207,.22);cursor:not-allowed;filter:none}
.notification-item{gap:12px;padding:12px;margin-bottom:10px}.notification-copy{display:grid;gap:7px;min-width:0}.notification-item p{margin:0;line-height:1.35}.notification-actions{display:flex;align-items:center;gap:8px;margin-top:2px}.notification-accept,.notification-decline{height:29px;border-radius:11px;padding:0 12px;font-size:10px;font-weight:950;text-transform:uppercase;letter-spacing:.04em}.notification-decline{background:rgba(255,74,105,.15);border:1px solid rgba(255,74,105,.32);color:#ffd4dc}.notification-status-pill.declined{background:rgba(255,74,105,.13);border-color:rgba(255,74,105,.3);color:#ffb7c4}
@media(max-width:980px){.room-head .nav-account-cluster{max-width:calc(100vw - 330px);gap:9px}.room-head .nav-account-cluster .account b,.room-head .nav-account-cluster .account small{max-width:130px}}
/* v113: notification alignment, logout link, live friend-count polish */
.notification-actions{
display:grid;
grid-template-columns:1fr 1fr;
gap:8px;
align-items:center;
width:100%;
margin-top:5px;
}
.notification-actions .notification-accept,
.notification-actions .notification-decline{
width:100%;
min-width:0;
margin:0;
display:inline-flex;
align-items:center;
justify-content:center;
height:30px;
line-height:1;
white-space:nowrap;
}
.notification-copy{width:100%;}
.room-head .nav-account-cluster .nav-logout,
.room-head .nav-account-cluster .nav-logout:visited{
font-size:10px;
line-height:1;
text-decoration:none;
border:0;
background:transparent;
box-shadow:none;
padding:0;
height:auto;
min-height:0;
}
.room-head .nav-account-cluster .nav-logout:hover,
.room-head .nav-account-cluster .nav-logout:focus{
text-decoration:none;
color:#fff;
}
.profile-friends-since-popup{display:block;margin-top:3px;color:rgba(208,236,255,.84);font-size:11px;font-weight:800;letter-spacing:.01em}.profile-friends-since-popup[hidden],.public-profile-friends-since[hidden]{display:none}.public-profile-friends-since{display:block;margin:-4px 14px 14px;padding:9px 12px;border-radius:14px;background:rgba(91,214,143,.12);border:1px solid rgba(91,214,143,.22);color:rgba(219,255,235,.95);font-size:12px;font-weight:900;text-align:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
/* v115: My Hub Room + Global tabs */
.my-hub-card-simple .hub-tabs{
grid-template-columns:repeat(4,minmax(0,1fr));
gap:8px;
}
.my-hub-card-simple .hub-tabs button{
min-width:0;
padding:0 8px;
font-size:12px;
}
.hub-user-row{
align-items:center;
}
.hub-social-actions{
margin-left:auto;
display:grid;
grid-template-columns:1fr 1fr;
gap:7px;
min-width:190px;
}
.hub-social-btn{
height:34px;
border-radius:12px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:5px;
padding:0 10px;
font-size:10px;
line-height:1;
font-weight:950;
text-transform:uppercase;
letter-spacing:.035em;
border:1px solid rgba(255,255,255,.16);
box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
white-space:nowrap;
}
.hub-social-btn svg{width:14px;height:14px;flex:0 0 auto}
.hub-social-btn.friend{background:linear-gradient(135deg,rgba(39,208,114,.96),rgba(18,139,78,.96));border-color:rgba(116,255,177,.32)}
.hub-social-btn.block{background:linear-gradient(135deg,rgba(255,70,98,.95),rgba(168,24,48,.95));border-color:rgba(255,136,154,.28)}
.hub-social-btn.is-pending{background:linear-gradient(135deg,rgba(255,190,73,.9),rgba(173,101,16,.9))}
.hub-social-btn.is-friends{background:linear-gradient(135deg,rgba(56,220,132,.9),rgba(20,119,79,.9))}
.hub-social-btn.is-blocked,.hub-social-btn.is-disabled{background:linear-gradient(135deg,rgba(128,138,155,.85),rgba(62,69,82,.85))}
@media (max-width:760px){
.my-hub-card-simple .hub-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
.hub-user-row{align-items:flex-start;flex-wrap:wrap}
.hub-social-actions{width:100%;min-width:0;margin-left:60px}
}
/* v116: chat panel tabs, queue/friends/global views */
.chat-tabs{height:36px;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:0 0 10px;padding:4px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.13);border-radius:14px;backdrop-filter:none!important;}
.chat-tab{height:28px;border-radius:10px;background:transparent;color:#c9bfd2;font-size:11px;font-weight:900;letter-spacing:.02em;transition:.16s ease;display:flex;align-items:center;justify-content:center;gap:5px;white-space:nowrap;min-width:0;overflow:hidden}
.chat-unread-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.72);box-shadow:0 0 5px rgba(255,255,255,.18);opacity:1;transform:scale(1);transition:background-color .16s ease,box-shadow .16s ease,transform .16s ease;flex:0 0 6px;pointer-events:none}.chat-unread-dot.visible{background:#39d353;box-shadow:0 0 7px rgba(57,211,83,.72);transform:scale(1.05)}
.chat-tab:hover{background:rgba(255,255,255,.08);color:#fff}
.chat-tab.active{background:linear-gradient(135deg,rgba(170,0,125,.95),rgba(83,95,219,.92));color:#fff;box-shadow:0 8px 20px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.24)}
.chat-panel-view{display:none}.chat-panel-view.active{display:block}.chat-list-view{height:calc(100% - 112px);overflow:auto;padding:2px 6px 8px 0}.chat-messages.chat-panel-view.active{height:calc(100% - 112px)}
#roomWelcomeText[hidden]{display:none}.chat-form[hidden]{display:none}.chat-form[hidden]+*{bottom:0}
.chat-user-card{margin:0 0 9px;padding:8px;border-radius:14px;background:linear-gradient(135deg,rgba(255,255,255,.075),rgba(255,255,255,.035));border:1px solid rgba(255,255,255,.13)}
.chat-user-main{width:100%;display:grid;grid-template-columns:34px 1fr;align-items:center;gap:9px;text-align:left;background:transparent;padding:0;color:#fff}.chat-user-main img{width:34px;height:34px;object-fit:contain;border-radius:10px;background:rgba(0,0,0,.28)}.chat-user-main b{display:block;font-size:12px;line-height:1.1}.chat-user-main small{display:block;margin-top:2px;font-size:10px;color:#9defff;font-weight:800}.chat-user-main em{display:block;margin-top:4px;font-style:normal;font-size:10px;color:#bdb2c5}.chat-empty{margin:14px 4px;color:#bbaec3;font-size:12px;line-height:1.45}.chat-avatar-btn,.chat-name.chat-user-trigger{background:transparent;border:0;padding:0;color:inherit;text-align:left}.chat-avatar-btn{width:26px;height:26px;display:grid;place-items:center}.chat-avatar-btn:hover .chat-avatar,.chat-user-main:hover img{filter:none!important;}.chat-name.chat-user-trigger{display:inline-flex;align-items:center;gap:4px;flex-wrap:wrap;cursor:pointer}.chat-name.chat-user-trigger:hover b{cursor:pointer;text-decoration:none;}.chat-line{grid-template-columns:26px 1fr}
/* v119: make dislike pressed state match other vote buttons */
.vote-box #dislikeBtn.dislike.is-active,
.vote-box button#dislikeBtn.is-active{
color:#ff4b5f;
filter:none!important;
opacity:1;
}
.vote-box #likeBtn.like.is-active{
color:#23d36b;
}
/* Removed button/icon hover lift globally: hover may brighten, but must not move upward. */
button:hover,
button:hover *,
[role="button"]:hover,
[role="button"]:hover *,
.bar-icon:hover,
.bar-icon:hover *,
.profile-social-btn:hover,
.profile-social-btn:hover *,
.profile-change-avatar-btn:hover,
.profile-change-avatar-btn:hover *,
.play-song-card button:hover,
.play-song-card button:hover *,
.result button:hover,
.result button:hover *,
.queue-item button:hover,
.queue-item button:hover *,
.room-form button:hover,
.room-form button:hover *,
.search-form button:hover,
.search-form button:hover *,
.stage-action-btn:hover,
.stage-action-btn:hover *,
.skins-stage-btn:hover,
.skins-stage-btn:hover *,
.playlist-icon-btn:hover,
.playlist-icon-btn:hover *,
.tab-btn:hover,
.tab-btn:hover *,
.chat-tab:hover,
.chat-tab:hover *,
.nav-bell-btn:hover,
.nav-bell-btn:hover *,
.nav-logout:hover,
.nav-logout:hover *{
transform:none;
}
/* v122: username/name hover underline + clickable account/profile popup + logout icon */
.room-head .nav-account-cluster .account,
.room-head .account{
cursor:pointer;
}
.room-head .nav-account-cluster .account:hover b,
.room-head .nav-account-cluster .account:hover small,
.room-head .account:hover b,
.room-head .account:hover small,
.chat-name:hover,
.chat-name:hover b,
.chat-name:hover small,
.chat-user-main:hover b,
.chat-user-main:hover small,
.profile-popup-open-target:hover .user-name-hover,
.user-profile-popup .profile-info strong:hover,
.user-profile-popup .profile-info .profile-username:hover,
.hub-row:hover strong,
.hub-row:hover small,
.public-profile-card h2:hover,
.profile-public-item strong:hover{
text-decoration:none;
text-underline-offset:3px;
text-decoration-thickness:1px;
}
.profile-popup-open-target,
.user-profile-popup .profile-avatar,
.user-profile-popup .profile-info strong,
.user-profile-popup .profile-info .profile-username{
cursor:pointer;
}
.room-head .nav-account-cluster .nav-logout,
.room-head .nav-account-cluster .nav-logout:visited{
width:22px;
height:22px;
min-width:22px;
padding:0;
display:inline-grid;
place-items:center;
color:#ffccd7;
line-height:1;
}
.room-head .nav-account-cluster .nav-logout svg{
width:18px;
height:18px;
display:block;
color:currentColor;
transform:none;
}
.room-head .nav-account-cluster .nav-logout:hover,
.room-head .nav-account-cluster .nav-logout:focus{
color:#fff;
text-decoration:none;
}
/* remove underline globally for clickable user names */
.chat-name.chat-user-trigger,
.chat-name.chat-user-trigger b,
.profile-card h2,
.profile-public-item strong,
.room-head .nav-account-cluster .nav-account-name,
.room-head .nav-account-cluster .nav-account-username,
.avatar-popup .user-name,
.avatar-popup .user-username{
cursor:pointer;
text-decoration:none;
}
/* v125: icon-only chat tabs + Users tab sections */
.chat-tabs{
grid-template-columns:repeat(4,minmax(0,1fr));
height:42px;
padding:5px;
}
.chat-tab{
height:30px;
gap:4px;
font-size:10px;
overflow:visible;
position:relative;
}
.chat-tab-icon{
width:18px;
height:18px;
display:block;
flex:0 0 18px;
transition:color .16s ease, filter .16s ease, transform .16s ease;
}
.chat-tab-count{
font-size:10px;
line-height:1;
font-weight:950;
color:#dfe8ff;
letter-spacing:-.02em;
flex:0 0 auto;
}
.chat-tab.has-unread .chat-tab-icon{
color:#39d353;
filter:none!important;
}
.chat-unread-dot{display:none}
.chat-users-section{
margin:0 0 14px;
padding:9px;
border-radius:16px;
background:rgba(255,255,255,.045);
border:1px solid rgba(255,255,255,.11);
}
.chat-users-section h4{
margin:0 0 9px;
font-size:11px;
line-height:1.2;
color:#9defff;
letter-spacing:.03em;
font-weight:950;
text-transform:none;
}
.chat-users-section .chat-user-card:last-child{margin-bottom:0}
.chat-users-section .chat-empty{margin:4px 2px}
.chat-users-section h4{display:flex;align-items:center;justify-content:space-between;gap:8px}.users-section-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.users-section-count{color:#7cff9d;font-weight:950}.users-section-toggle{background:none;border:0;color:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:24px;height:24px;padding:0;line-height:1}.users-section-toggle:hover{filter:brightness(1.18)}.users-toggle-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;font-size:18px;line-height:1}.users-toggle-icon svg{display:block;width:1em;height:1em}.chat-users-section.collapsed .chat-users-section-body{display:none;}
/* Guest browsing mode */
.guest-auth-cluster{gap:10px;}
.guest-auth-link{
display:inline-flex;
align-items:center;
justify-content:center;
gap:6px;
min-height:30px;
padding:0 2px;
background:transparent;
border:0;
color:#dfe6ff;
text-decoration:none;
font-size:12px;
font-weight:900;
letter-spacing:.01em;
cursor:pointer;
}
.guest-auth-link .iconify{width:17px;height:17px;font-size:17px;line-height:1;display:inline-flex;align-items:center;justify-content:center;color:currentColor;}
.guest-auth-link:hover{color:#fff;filter:brightness(1.16);}
.guest-chat-placeholder,
.guest-locked-panel{
margin:10px;
padding:14px 16px;
border-radius:16px;
background:rgba(83,95,219,.12);
border:1px solid rgba(83,95,219,.28);
color:#dfe3ff;
font-size:13px;
font-weight:700;
text-align:center;
}
.guest-locked-panel{margin:12px 0;}
.chat-form input:disabled,
.chat-form button:disabled{
opacity:.72;
cursor:not-allowed;
}
.chat-form input:disabled{color:#9ba8c7;}
.room-info-date-stat b{font-size:16px;line-height:1.2;white-space:nowrap;letter-spacing:-.02em}
@media(max-width:720px){.room-info-date-stat b{font-size:14px;white-space:normal}}
/* v132: quick icon rail + sidebar tab icons */
.icon-rail{
width:34px;
padding:18px 0;
gap:16px;
align-items:center;
justify-content:flex-start;
background:#060714b8;
color:#9fb5d4;
}
.icon-rail .rail-btn{
appearance:none;
width:34px;
height:28px;
padding:0;
margin:0;
border:0;
border-radius:0;
background:transparent;
box-shadow:none;
outline:0;
display:flex;
align-items:center;
justify-content:center;
color:#9fb5d4;
cursor:pointer;
text-decoration:none;
line-height:1;
transition:color .16s ease, opacity .16s ease, filter .16s ease;
}
.icon-rail .rail-btn:hover,
.icon-rail .rail-btn:focus-visible{
color:#fff;
filter:brightness(1.18);
}
.icon-rail .rail-btn .iconify{
width:20px;
height:20px;
font-size:20px;
display:block;
}
.icon-rail .rail-avatar-btn img{
width:23px;
height:23px;
border-radius:50%;
object-fit:cover;
display:block;
border:0;
box-shadow:none;
}
.drawer-tabs .tab-btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:6px;
}
.drawer-tabs .tab-btn .iconify{
width:1.05em;
height:1.05em;
flex:0 0 auto;
}
/* v133: stage-wrap equals club-layout; icon rail overlays the stage on a thin transparent board */
.club-layout{
position:fixed;
left:0;
right:288px;
top:38px;
bottom:76px;
width:auto;
height:auto;
padding:0;
margin:0;
overflow:hidden;
min-width:0;
}
.stage-wrap{
position:absolute;
inset:0;
width:100%;
height:100%;
display:block;
overflow:hidden;
margin:0;
padding:0;
}
.stage{
position:absolute;
inset:0;
width:100%;
height:100%;
min-width:0;
min-height:0;
max-width:none;
max-height:none;
background-position:left top;
background-size:100% 100%;
}
.icon-rail{
position:fixed;
left:0;
top:38px;
bottom:76px;
width:42px;
z-index:86;
padding:18px 0;
margin:0;
display:flex;
flex-direction:column;
align-items:center;
justify-content:flex-start;
gap:16px;
background:rgba(0,0,0,.42);
border-right:1px solid rgba(255,255,255,.12);
box-shadow:inset -1px 0 0 rgba(0,0,0,.36), 10px 0 28px rgba(0,0,0,.18);
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
transform:none;
}
.icon-rail .rail-btn{
width:42px;
height:28px;
}
/* v134: offset left stage cards so they sit to the right of the overlaid icon rail. */
:root{
--stage-icon-rail-width:42px;
--stage-card-rail-clearance:14px;
}
.play-song-card,
.dj-now-card{
left:calc(var(--stage-icon-rail-width) + var(--stage-card-rail-clearance));
}
@media(max-width:960px){
.play-song-card,
.dj-now-card{
left:calc(var(--stage-icon-rail-width) + var(--stage-card-rail-clearance));
}
}
/* v135: minimalist room header/nav cleanup */
.room-head{
gap:9px;
}
.room-head h1{
display:inline-flex;
align-items:center;
max-width:min(34vw,420px);
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
#aboutCommunityBtn{
width:28px;
height:28px;
min-width:28px;
padding:0;
margin-left:-3px;
display:inline-grid;
place-items:center;
border:0;
border-radius:0;
background:transparent;
box-shadow:none;
color:#d9e9ff;
opacity:.92;
}
#aboutCommunityBtn span{display:none;}
#aboutCommunityBtn svg{
width:22px;
height:22px;
display:block;
}
#aboutCommunityBtn:hover,
#aboutCommunityBtn:focus{
background:transparent;
border:0;
box-shadow:none;
color:#fff;
opacity:1;
transform:none;
}
.room-head .online-pill,
.online-pill{
height:auto;
padding:0;
border:0;
border-radius:0;
background:transparent;
box-shadow:none;
display:inline-flex;
align-items:center;
gap:6px;
color:#d7e3f2;
font-size:11px;
font-weight:800;
letter-spacing:.02em;
line-height:1;
}
.online-pill #onlineCount{color:#fff;font-weight:950;}
.online-dot{
width:7px;
height:7px;
flex:0 0 7px;
background:#39ff8b;
box-shadow:0 0 0 0 rgba(57,255,139,.55),0 0 10px rgba(57,255,139,.72);
}
.room-head .nav-account-cluster{
height:38px;
padding:0;
gap:13px;
border:0;
border-radius:0;
background:transparent;
box-shadow:none;
backdrop-filter:none!important;
overflow:visible;
}
.room-head .nav-account-cluster .nav-bell-btn{
position:relative;
width:26px;
height:26px;
min-width:26px;
flex:0 0 26px;
padding:0;
display:grid;
place-items:center;
border:0;
border-radius:0;
background:transparent;
box-shadow:none;
color:#dcecff;
overflow:visible;
}
.room-head .nav-account-cluster .nav-bell-btn:hover,
.room-head .nav-account-cluster .nav-bell-btn:focus{
border:0;
background:transparent;
box-shadow:none;
color:#fff;
transform:none;
}
.room-head .nav-account-cluster .nav-bell-btn svg{
width:20px;
height:20px;
display:block;
}
.room-head .nav-account-cluster .nav-bell-btn #notificationsBadge{
position:absolute;
right:-6px;
top:-5px;
min-width:15px;
width:auto;
height:15px;
padding:0 4px;
border:0;
border-radius:999px;
background:#ff315b;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
font-size:8px;
line-height:1;
font-weight:950;
font-variant-numeric:tabular-nums;
box-shadow:0 0 0 2px #05040c;
}
.room-head .nav-account-cluster .nav-bell-btn #notificationsBadge[hidden]{display:none;}
.room-head .nav-account-cluster .account,
.room-head .account{
position:relative;
display:inline-flex;
align-items:center;
padding:0;
margin:0;
max-width:190px;
overflow:visible;
color:#eef6ff;
line-height:1;
cursor:pointer;
isolation:isolate;
}
.room-head .nav-account-cluster .account b,
.room-head .account b{
display:block;
max-width:190px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
font-size:13px;
font-weight:900;
letter-spacing:.01em;
color:#fff;
}
.room-head .nav-account-cluster .account small,
.room-head .account small{
position:absolute;
left:50%;
top:calc(100% + 7px);
transform:translate(-50%,-2px);
display:block;
width:max-content;
max-width:220px;
padding:5px 8px;
border:1px solid rgba(157,239,255,.16);
border-radius:8px;
background:rgba(5,5,13,.92);
color:#9defff;
box-shadow:0 10px 28px rgba(0,0,0,.38);
opacity:0;
visibility:hidden;
pointer-events:none;
font-size:10px;
font-weight:850;
line-height:1;
white-space:nowrap;
text-align:center;
z-index:999;
}
.room-head .nav-account-cluster .account:hover small,
.room-head .nav-account-cluster .account:focus small,
.room-head .account:hover small,
.room-head .account:focus small{
opacity:1;
visibility:visible;
transform:translate(-50%,0);
}
.room-head .nav-account-cluster .nav-divider{
height:18px;
background:rgba(255,255,255,.16);
}
@media(max-width:980px){
.room-head h1{max-width:min(30vw,280px);}
.room-head .nav-account-cluster .account small,
.room-head .account small{display:block;}
}
/* v136: minimalist transparent black stage action buttons */
.stage-top-actions{
gap:7px;
}
.stage-top-actions .stage-action-btn,
.stage-top-actions .skins-stage-btn,
.stage-top-actions .room-settings-stage-btn{
position:static;
display:inline-flex;
align-items:center;
justify-content:center;
gap:7px;
height:34px;
min-height:34px;
padding:0 12px;
border-radius:10px;
border:1px solid rgba(255,255,255,.10);
background:rgba(0,0,0,.38);
color:rgba(255,255,255,.88);
box-shadow:none;
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
font-size:12px;
font-weight:800;
letter-spacing:.01em;
line-height:1;
transition:none;
transform:none;
}
.stage-top-actions .stage-action-btn:hover,
.stage-top-actions .skins-stage-btn:hover,
.stage-top-actions .room-settings-stage-btn:hover{
background:rgba(0,0,0,.46);
border-color:rgba(255,255,255,.14);
filter:none;
transform:none;
box-shadow:none;
}
.stage-top-actions .stage-action-btn .stage-action-icon,
.stage-top-actions .skins-stage-btn .stage-action-icon{
width:16px;
height:16px;
display:inline-flex;
align-items:center;
justify-content:center;
flex:0 0 auto;
}
.stage-top-actions .room-settings-stage-btn{
width:34px;
min-width:34px;
padding:0;
gap:0;
}
.stage-top-actions .room-settings-stage-btn .stage-action-icon{
width:17px;
height:17px;
}
@media(max-width:560px){
.stage-top-actions .stage-action-btn,
.stage-top-actions .skins-stage-btn,
.stage-top-actions .room-settings-stage-btn{
height:31px;
min-height:31px;
padding:0 10px;
border-radius:9px;
font-size:11px;
}
.stage-top-actions .room-settings-stage-btn{
width:31px;
min-width:31px;
padding:0;
}
}
/* v137: minimalist transparent stage side controls */
.history-btn,
.auto-like-box{
height:32px;
border-radius:9px;
border:1px solid rgba(255,255,255,.12);
background:rgba(0,0,0,.42);
color:rgba(255,255,255,.88);
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
box-shadow:none;
outline:0;
cursor:pointer;
transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.history-btn:hover,
.history-box.open .history-btn,
.auto-like-box:hover{
background:rgba(0,0,0,.54);
border-color:rgba(255,255,255,.18);
color:#fff;
filter:none;
transform:none;
box-shadow:none;
}
.history-btn{
width:36px;
min-width:36px;
display:grid;
place-items:center;
padding:0;
}
.history-btn svg{
width:17px;
height:17px;
}
.auto-like-box{
display:flex;
align-items:center;
justify-content:flex-start;
gap:9px;
padding:0 12px;
width:154px;
min-width:154px;
font:inherit;
text-align:left;
appearance:none;
-webkit-appearance:none;
}
.auto-like-box .auto-like-icon{
width:16px;
height:16px;
flex:0 0 16px;
color:rgba(255,255,255,.62);
transition:color .15s ease;
}
.auto-like-box.is-on .auto-like-icon{
color:#ff4d6d;
}
.auto-like-copy{
min-width:0;
display:flex;
align-items:baseline;
gap:7px;
line-height:1;
}
.auto-like-label{
font-size:12px;
font-weight:800;
letter-spacing:.01em;
color:rgba(255,255,255,.9);
white-space:nowrap;
}
.auto-like-status{
font-size:10px;
font-weight:900;
letter-spacing:.08em;
color:rgba(255,255,255,.48);
white-space:nowrap;
}
.auto-like-box.is-on .auto-like-status{
color:rgba(255,255,255,.78);
}
.auto-like-toggle,
.auto-like-toggle button{
display:none;
}
:root{
--stage-auto-like-width:154px;
--stage-history-auto-gap:8px;
}
@media(max-width:560px){
.history-btn{width:33px;min-width:33px;height:31px;border-radius:8px;}
.auto-like-box{height:31px;width:142px;min-width:142px;padding:0 10px;border-radius:8px;gap:8px;}
:root{--stage-auto-like-width:142px;}
.auto-like-label{font-size:11px;}
.auto-like-status{font-size:9px;}
}
/* v138: cards use the same minimalist transparent-black wrapper as Avatars/Skins buttons */
.play-song-card,
.vote-box{
height:54px;
min-height:54px;
width:230px;
max-width:230px;
box-sizing:border-box;
border-radius:10px;
border:1px solid rgba(255,255,255,.10);
background:rgba(0,0,0,.38);
box-shadow:none;
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
}
.play-song-card:hover,
.vote-box:hover{
background:rgba(0,0,0,.46);
border-color:rgba(255,255,255,.14);
filter:none;
box-shadow:none;
transform:none;
}
.play-song-card{
display:flex;
align-items:center;
justify-content:center;
gap:6px;
padding:8px;
overflow:hidden;
}
.vote-box{
display:flex;
align-items:center;
justify-content:center;
gap:12px;
padding:8px 10px;
overflow:hidden;
}
.play-song-card button{
min-width:0;
height:32px;
box-sizing:border-box;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.play-song-card #playNextBtn{flex:1 1 auto;max-width:none;}
.play-song-card #openQueueBtn{flex:0 0 74px;max-width:74px;}
.dj-now-card,#djNowCard{display:none;}
.room-head .navbar-now-playing{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
z-index:1;
display:flex;
align-items:center;
justify-content:center;
gap:7px;
height:30px;
max-width:min(42vw,520px);
min-width:220px;
padding:0 12px;
border-radius:10px;
border:1px solid rgba(255,255,255,.10);
background:rgba(0,0,0,.34);
color:rgba(255,255,255,.88);
box-shadow:none;
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
font-size:12px;
font-weight:800;
line-height:1;
pointer-events:none;
overflow:hidden;
}
.room-head .navbar-now-playing[hidden]{display:none;}
.navbar-now-icon{
width:16px;
height:16px;
flex:0 0 auto;
color:rgba(255,255,255,.9);
}
.navbar-now-text{
min-width:0;
display:block;
overflow:hidden;
white-space:nowrap;
}
.navbar-now-title{
display:inline-block;
max-width:260px;
vertical-align:bottom;
overflow:hidden;
white-space:nowrap;
animation:navbar-title-marquee 8s ease-in-out infinite alternate;
}
@keyframes navbar-title-marquee{
0%,18%{transform:translateX(0)}
82%,100%{transform:translateX(min(0px, calc(260px - 100%)))}
}
@media(max-width:980px){
.room-head .navbar-now-playing{max-width:36vw;min-width:170px;font-size:11px;padding:0 9px;}
.navbar-now-title{max-width:160px;}
@keyframes navbar-title-marquee{
0%,18%{transform:translateX(0)}
82%,100%{transform:translateX(min(0px, calc(160px - 100%)))}
}
}
/* v139: navbar now-playing is subtle text only; play card height matches vote-box without fixed width */
.play-song-card{
width:max-content;
max-width:none;
min-width:0;
height:54px;
min-height:54px;
padding:8px 10px;
}
.play-song-card #playNextBtn{
flex:0 0 auto;
width:auto;
min-width:max-content;
max-width:none;
}
.play-song-card #openQueueBtn{
flex:0 0 auto;
width:auto;
min-width:max-content;
max-width:none;
}
.room-head .navbar-now-playing{
height:auto;
min-width:0;
max-width:min(48vw,620px);
padding:0;
border:0;
border-radius:0;
background:transparent;
box-shadow:none;
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
color:rgba(210,214,224,.66);
font-size:12px;
font-weight:700;
pointer-events:auto;
}
.navbar-now-icon{color:rgba(210,214,224,.58);width:15px;height:15px;}
.navbar-now-text{display:flex;align-items:center;min-width:0;overflow:hidden;white-space:nowrap;color:rgba(210,214,224,.66);}
.navbar-now-dj,.navbar-now-title{
color:rgba(210,214,224,.74);
background:transparent;
border:0;
padding:0;
margin:0;
font:inherit;
line-height:1.1;
cursor:pointer;
text-decoration:none;
}
.navbar-now-dj:hover,.navbar-now-title:hover{color:rgba(238,241,248,.9);text-decoration:none;filter:none;}
.navbar-now-label{flex:0 0 auto;color:rgba(210,214,224,.56);}
.navbar-now-title{
flex:0 1 auto;
max-width:300px;
overflow:hidden;
white-space:nowrap;
text-overflow:clip;
animation:navbar-title-marquee 8s ease-in-out infinite alternate;
}
@keyframes navbar-title-marquee{
0%,18%{transform:translateX(0)}
82%,100%{transform:translateX(min(0px, calc(300px - 100%)))}
}
@media(max-width:980px){
.room-head .navbar-now-playing{max-width:40vw;font-size:11px;padding:0;}
.navbar-now-title{max-width:170px;}
@keyframes navbar-title-marquee{
0%,18%{transform:translateX(0)}
82%,100%{transform:translateX(min(0px, calc(170px - 100%)))}
}
}
.navbar-now-dj.dj-profile-trigger{
display:inline;
width:auto;
height:auto;
align-items:baseline;
justify-content:flex-start;
}
/* v140: fix navbar text spacing + restore original vote button behavior inside the new wrapper */
.room-head .navbar-now-playing{
align-items:center;
gap:6px;
color:rgba(210,214,224,.62);
font-size:12px;
font-weight:700;
line-height:1.1;
}
.navbar-now-text{
display:flex;
align-items:center;
gap:0;
font-size:inherit;
line-height:inherit;
}
.navbar-now-dj,
.navbar-now-label,
.navbar-now-title{
font-size:inherit;
line-height:inherit;
vertical-align:baseline;
}
.navbar-now-dj{
margin-right:9px;
}
.navbar-now-label{
margin-right:4px;
}
.vote-box{
height:54px;
min-height:54px;
width:230px;
max-width:230px;
box-sizing:border-box;
display:flex;
align-items:center;
justify-content:center;
gap:12px;
padding:8px 10px;
overflow:visible;
border-radius:10px;
border:1px solid rgba(255,255,255,.10);
background:rgba(0,0,0,.38);
box-shadow:none;
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
}
.vote-box button{
position:relative;
display:grid;
place-items:center;
gap:3px;
min-width:42px;
width:auto;
height:auto;
padding:0;
border:0;
border-radius:0;
background:transparent;
box-shadow:none;
color:#eef2ff;
opacity:.88;
text-align:center;
transform:none;
transition:opacity .18s ease,color .18s ease,filter .18s ease;
}
.vote-box button:hover{
background:transparent;
border:0;
box-shadow:none;
transform:none;
opacity:1;
}
.vote-box button:disabled,
.vote-box button.is-disabled{
opacity:.38;
cursor:not-allowed;
filter:grayscale(.25);
}
.vote-box button.is-active{
opacity:1;
text-shadow:none;
}
.vote-box .like.is-active,
.vote-box #likeBtn.like.is-active{
color:#23d36b;
filter:none!important;
}
.vote-box .dislike.is-active,
.vote-box #dislikeBtn.dislike.is-active,
.vote-box button#dislikeBtn.is-active{
color:#ff4b5f;
filter:none!important;
}
.vote-box .grab.is-active{
color:#a855f7;
filter:none!important;
}
.vote-box .skip-vote.is-active{
color:#ff9f1c;
filter:none!important;
}
.vote-box .vote-icon,
.vote-box .skip-vote-icon{
display:block;
font-size:27px;
line-height:1;
}
.vote-box .grab .vote-icon{font-size:25px;}
.vote-box span{
display:block;
font-size:11px;
line-height:1.05;
margin-top:4px;
color:#e8e8e8;
}
.like.is-active:after,
.dislike.is-active:after,
.skip-vote.is-active:after,
.grab.is-active:after{
content:none;
display:none;
}
/* v144: real navbar normal-space fix + slightly taller top cards */
.navbar-now-dj{
margin-right:0;
}
.navbar-now-label{
margin-left:0;
margin-right:4px;
}
.vote-box,
.play-song-card{
height:60px;
min-height:60px;
box-sizing:border-box;
}
/* v145: username to "is now playing" normal single-space gap */
.navbar-now-text{
gap:0;
}
.navbar-now-dj{
margin-right:0;
}
.navbar-now-label{
margin-left:.28em;
margin-right:.28em;
}
/* v147: real purple transparent play-song-card buttons, based on Avatars/Skins style */
.play-song-card{
display:inline-flex;
align-items:center;
justify-content:center;
gap:7px;
width:max-content;
max-width:none;
padding:10px 12px;
}
.play-song-card button,
.play-song-card #playNextBtn,
.play-song-card #openQueueBtn{
position:static;
display:inline-flex;
align-items:center;
justify-content:center;
gap:7px;
width:auto;
min-width:max-content;
max-width:none;
height:34px;
min-height:34px;
padding:0 12px;
border-radius:10px;
border:1px solid rgba(178,128,255,.24);
background:rgba(112,40,255,.24);
color:rgba(255,255,255,.90);
box-shadow:none;
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
font-size:12px;
font-weight:800;
letter-spacing:.01em;
line-height:1;
transform:none;
transition:none;
}
.play-song-card button:hover,
.play-song-card #playNextBtn:hover,
.play-song-card #openQueueBtn:hover{
background:rgba(112,40,255,.34);
border-color:rgba(196,158,255,.34);
color:rgba(255,255,255,.94);
filter:none;
transform:none;
box-shadow:none;
}
.play-song-card button .btn-icon,
.play-song-card #playNextBtn .btn-icon,
.play-song-card #openQueueBtn .btn-icon{
width:16px;
height:16px;
display:inline-flex;
align-items:center;
justify-content:center;
flex:0 0 auto;
}
/* v157: compact empty player screen with animated gradient + grid (safe responsive text) */
.screen-frame.no-video{
position:relative;
overflow:hidden;
background:#07040f;
container-type:inline-size;
}
.screen-frame.no-video #player{
visibility:hidden;
pointer-events:none;
}
.no-video-overlay.empty-player-modern{
display:none;
position:absolute;
inset:0;
padding:clamp(10px,2.2vw,18px);
place-items:center;
text-align:center;
overflow:hidden;
color:#fff;
text-shadow:none;
isolation:isolate;
background:transparent;
}
.screen-frame.no-video .no-video-overlay.empty-player-modern{
display:grid;
}
.no-video-overlay.empty-player-modern::before{
content:"";
position:absolute;
inset:-42%;
z-index:-2;
background:
radial-gradient(circle at 18% 22%, rgba(151,71,255,.76), transparent 30%),
radial-gradient(circle at 78% 18%, rgba(47,229,255,.52), transparent 32%),
radial-gradient(circle at 52% 92%, rgba(255,61,168,.46), transparent 34%),
linear-gradient(135deg,#090817,#171049 42%,#070713 100%);
background-size:145% 145%;
animation:emptyPlayerGradientMove 11s ease-in-out infinite alternate;
filter:saturate(1.22);
}
.no-video-overlay.empty-player-modern::after{
content:"";
position:absolute;
inset:0;
z-index:-1;
background:
linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px),
radial-gradient(circle at center, transparent 0 42%, rgba(0,0,0,.48) 100%);
background-size:34px 34px,34px 34px,auto;
opacity:.84;
}
.empty-player-content{
width:min(92%,430px);
max-height:calc(100% - 20px);
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:clamp(5px,1.2vw,9px);
margin:0 auto;
overflow:visible;
}
.empty-player-content h2{
margin:0 0 .03em;
max-width:100%;
white-space:nowrap;
overflow:visible;
text-overflow:clip;
font-size:clamp(14px,6.2cqw,28px);
line-height:1.28;
padding-block:.04em .10em;
font-weight:900;
letter-spacing:-.035em;
text-transform:lowercase;
color:#fff;
}
.empty-player-content p{
margin:0;
width:100%;
max-width:40em;
font-size:clamp(10px,2.6cqw,14px);
line-height:1.38;
font-weight:500;
color:rgba(245,247,255,.88);
text-wrap:balance;
overflow-wrap:break-word;
}
.empty-player-content .empty-player-link{
display:inline;
padding:0;
border:0;
border-radius:0;
background:none;
box-shadow:none;
color:#8be9ff;
font:inherit;
font-weight:800;
text-decoration:none;
cursor:pointer;
}
.empty-player-content .empty-player-link:hover{
color:#fff;
text-decoration:underline;
text-underline-offset:4px;
}
.empty-player-content .empty-player-link.copied{
color:#82ffbd;
}
@keyframes emptyPlayerGradientMove{
0%{transform:translate3d(-3%,-2%,0) rotate(0deg) scale(1);background-position:0% 45%;}
50%{transform:translate3d(2%,3%,0) rotate(6deg) scale(1.04);background-position:100% 55%;}
100%{transform:translate3d(4%,-3%,0) rotate(-4deg) scale(1.08);background-position:35% 100%;}
}
@media (max-width:900px){
.empty-player-content{width:min(94%,380px);}
.empty-player-content h2{font-size:clamp(13px,6cqw,24px);line-height:1.3;padding-block:.05em .12em;}
.empty-player-content p{font-size:clamp(9px,2.8cqw,12px);line-height:1.35;}
}
@media (max-width:420px){
.empty-player-content h2{font-size:clamp(11px,5.8cqw,18px);letter-spacing:-.025em;}
.empty-player-content p{font-size:clamp(8px,2.6cqw,11px);}
}
/* User context menu + room moderation lists */
.user-context-menu{position:fixed;z-index:9999;width:238px;max-height:min(430px,calc(100vh - 18px));overflow:auto;padding:8px;border-radius:14px;background:linear-gradient(180deg,#171024f2,#0b0712f6);border:1px solid #ffffff25;box-shadow:0 22px 70px #000d,inset 0 1px 0 #ffffff22;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
.user-context-menu::-webkit-scrollbar{width:6px}.user-context-menu::-webkit-scrollbar-thumb{background:#ffffff28;border-radius:99px}
.ctx-user-head{padding:8px 10px 10px;border-bottom:1px solid #ffffff18;margin-bottom:4px}.ctx-user-head strong{display:block;font-size:13px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ctx-user-head small{display:block;margin-top:2px;font-size:11px;color:#b9afc8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ctx-section{padding:5px 0}.ctx-section+.ctx-section{border-top:1px solid #ffffff14;margin-top:4px;padding-top:8px}.ctx-title{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#a9a2b7;margin:0 6px 5px}.user-context-menu button{width:100%;display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:10px;background:transparent;color:#f4efff;text-align:left;font-size:12px}.user-context-menu button:hover{background:#ffffff14}.room-settings-list-wrap{margin-top:14px;display:grid;gap:12px}.room-settings-lists{display:grid;gap:8px}.room-settings-lists h4{margin:6px 0 2px;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#e9d9ff}.room-user-admin-row{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:9px;padding:8px;border:1px solid #ffffff18;background:#ffffff0a;border-radius:12px}.room-user-admin-row img{width:34px;height:34px;object-fit:contain}.room-user-admin-row strong{display:block;font-size:12px}.room-user-admin-row small{display:block;color:#aaa;font-size:11px}.room-user-admin-row button{height:28px;padding:0 10px;border-radius:10px;background:#7d2cff;border:1px solid #d6b8ff;color:#fff;font-size:11px;font-weight:800}.room-owner-lock{font-size:10px;color:#b6abc4;background:#ffffff12;border:1px solid #ffffff1c;padding:6px 8px;border-radius:99px}
/* v161: restricted player + admin dashboard */
.room-restricted-banned .no-video-overlay.empty-player-modern::before{background:radial-gradient(circle at 20% 20%,rgba(255,35,80,.55),transparent 34%),radial-gradient(circle at 80% 70%,rgba(180,0,0,.42),transparent 38%),linear-gradient(135deg,rgba(55,0,18,.96),rgba(8,0,0,.96));animation:emptyGradientMove 8s ease-in-out infinite alternate;}
.room-restricted-deleted .no-video-overlay.empty-player-modern::before{background:radial-gradient(circle at 20% 20%,rgba(255,120,35,.42),transparent 34%),radial-gradient(circle at 80% 70%,rgba(180,0,0,.32),transparent 38%),linear-gradient(135deg,rgba(35,5,8,.96),rgba(8,0,0,.96));}
.room-restricted-banned .empty-player-content,.room-restricted-deleted .empty-player-content{width:min(92%,620px);text-align:center;}
.room-restricted-banned .empty-player-content h2,.room-restricted-deleted .empty-player-content h2{color:#fff;font-size:clamp(18px,4cqw,34px);white-space:normal;}
.nav-admin-btn{width:30px;height:30px;border:0;background:transparent;color:#ffd65c;display:grid;place-items:center;cursor:pointer;font-size:20px}.nav-admin-btn:hover{filter:brightness(1.15)}
.admin-dashboard-dropdown{position:fixed;z-index:245;width:min(760px,calc(100vw - 20px));max-height:78vh;overflow:auto;border:1px solid rgba(255,255,255,.16);border-radius:18px;background:linear-gradient(180deg,rgba(18,10,28,.98),rgba(6,3,13,.98));box-shadow:0 24px 80px rgba(0,0,0,.65);padding:10px}.admin-dash-section{border-top:1px solid rgba(255,255,255,.09);padding:10px 4px}.admin-dash-section h4{margin:0 0 8px;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#cbd5ff}.admin-dash-row,.admin-dash-room{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px;border-radius:12px;background:rgba(255,255,255,.045);margin-bottom:7px}.admin-dash-room{grid-template-columns:minmax(0,1fr) auto auto auto}.admin-dash-row img{width:36px;height:36px;border-radius:10px;object-fit:cover}.admin-dash-row strong,.admin-dash-room strong{display:block;font-size:12px}.admin-dash-row small,.admin-dash-room small{display:block;color:#9aa9bd;font-size:10px}.admin-dash-row button,.admin-dash-room button{height:28px;border-radius:9px;background:rgba(83,95,219,.22);border:1px solid rgba(157,239,255,.18);padding:0 10px;font-weight:900;font-size:10px}.admin-dash-room button.danger{background:rgba(255,49,91,.16);border-color:rgba(255,49,91,.32);color:#ffd2dc}
.room-delete-btn{margin-right:auto;height:36px;border-radius:10px;background:rgba(255,49,91,.15);border:1px solid rgba(255,49,91,.34);color:#ffd7df;font-weight:950;padding:0 14px}
/* v163 admin/room moderation refinements */
.ctx-user-head small{color:#9defff;}
.room-settings-lists{max-height:320px;overflow:auto;padding-right:4px;}
.room-settings-lists::-webkit-scrollbar{width:6px}.room-settings-lists::-webkit-scrollbar-thumb{background:#ffffff28;border-radius:99px}
.notification-room-link{color:#9defff;font-weight:900;text-decoration:none;}
.notification-room-link:hover{text-decoration:underline;}
/* v164: friend notification actor links */
.notification-user-link{
appearance:none;
border:0;
background:transparent;
padding:0;
margin:0;
display:inline;
color:#9defff;
font:inherit;
font-weight:950;
line-height:inherit;
cursor:pointer;
text-decoration:none;
}
.notification-user-link:hover,
.notification-user-link:focus{
color:#c9f7ff;
text-decoration:none;
filter:brightness(1.08);
}
/* v166: accepted-user local info uses the existing notification pill style */
/* v169: Room settings matched to Admin dashboard widget and capped with internal scroll */
#roomSettingsModal.room-settings-modal{
padding:20px;
background:rgba(3,5,12,.58);
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
}
#roomSettingsModal .room-settings-card{
width:min(760px,calc(100vw - 20px));
max-height:78vh;
overflow:hidden;
border:1px solid rgba(255,255,255,.16);
border-radius:18px;
background:linear-gradient(180deg,rgba(18,10,28,.98),rgba(6,3,13,.98));
box-shadow:0 24px 80px rgba(0,0,0,.65);
padding:10px;
display:flex;
flex-direction:column;
}
#roomSettingsModal .skins-glow{display:none;}
#roomSettingsModal .skins-x{
right:12px;
top:10px;
width:30px;
height:30px;
border-radius:10px;
background:rgba(255,255,255,.045);
border:1px solid rgba(255,255,255,.12);
color:#dfe8ff;
font-size:20px;
}
#roomSettingsModal .room-settings-form{
min-height:0;
overflow-y:auto;
overflow-x:hidden;
padding:4px 6px 6px 4px;
gap:10px;
}
#roomSettingsModal .room-settings-form::-webkit-scrollbar,
#roomSettingsModal .room-settings-lists::-webkit-scrollbar{width:6px;}
#roomSettingsModal .room-settings-form::-webkit-scrollbar-thumb,
#roomSettingsModal .room-settings-lists::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:99px;}
#roomSettingsModal .skins-head{
border-bottom:1px solid rgba(255,255,255,.09);
padding:4px 42px 10px 4px;
margin-bottom:0;
}
#roomSettingsModal .skins-head h3{font-size:16px;margin:0 0 3px;color:#fff;}
#roomSettingsModal .skins-head p{font-size:12px;margin:0;color:#9aa9bd;}
#roomSettingsModal .room-settings-form label{
padding:8px;
border-radius:12px;
background:rgba(255,255,255,.045);
border:1px solid rgba(255,255,255,.09);
color:#cbd5ff;
font-size:11px;
text-transform:uppercase;
letter-spacing:.06em;
}
#roomSettingsModal .room-settings-form input,
#roomSettingsModal .room-settings-form textarea,
#roomSettingsModal .room-settings-form select{
margin-top:2px;
border-radius:10px;
background:rgba(255,255,255,.055);
border:1px solid rgba(157,239,255,.18);
color:#fff;
text-transform:none;
letter-spacing:0;
}
#roomSettingsModal .room-settings-list-wrap{margin-top:4px;min-height:0;}
#roomSettingsModal .room-settings-lists{
max-height:260px;
overflow:auto;
display:grid;
gap:7px;
padding:0 4px 0 0;
}
#roomSettingsModal .room-settings-lists h4{
margin:8px 0 1px;
padding-top:8px;
border-top:1px solid rgba(255,255,255,.09);
font-size:12px;
color:#cbd5ff;
}
#roomSettingsModal .room-user-admin-row{
grid-template-columns:36px minmax(0,1fr) auto;
gap:10px;
padding:8px;
border-radius:12px;
border:0;
background:rgba(255,255,255,.045);
}
#roomSettingsModal .room-user-admin-row img{width:36px;height:36px;border-radius:10px;object-fit:cover;}
#roomSettingsModal .room-user-admin-row strong{font-size:12px;color:#fff;}
#roomSettingsModal .room-user-admin-row small{font-size:10px;color:#9aa9bd;}
#roomSettingsModal .room-user-admin-row button{
height:28px;
border-radius:9px;
background:rgba(83,95,219,.22);
border:1px solid rgba(157,239,255,.18);
color:#fff;
padding:0 10px;
font-weight:900;
font-size:10px;
}
#roomSettingsModal .skins-actions{
position:sticky;
bottom:0;
z-index:2;
margin-top:4px;
padding:10px 0 0;
background:linear-gradient(180deg,rgba(10,5,18,0),rgba(6,3,13,.98) 28%);
border-top:1px solid rgba(255,255,255,.09);
}
#roomSettingsModal .skins-actions button{
height:34px;
border-radius:9px;
font-size:11px;
}
#roomSettingsModal .room-delete-btn{
background:rgba(255,49,91,.16);
border-color:rgba(255,49,91,.32);
color:#ffd2dc;
}
#roomSettingsModal .skins-apply-room{
background:rgba(83,95,219,.22);
border:1px solid rgba(157,239,255,.18);
color:#fff;
}
@media(max-width:560px){
#roomSettingsModal .skins-actions{flex-wrap:wrap;}
#roomSettingsModal .skins-actions button{flex:1 1 100px;}
#roomSettingsModal .room-user-admin-row{grid-template-columns:32px minmax(0,1fr);}
#roomSettingsModal .room-user-admin-row button,#roomSettingsModal .room-owner-lock{grid-column:1/-1;justify-self:start;}
}
/* v170: hard fix Room settings scrolling - constrain the real scroll containers */
#roomSettingsModal.room-settings-modal.open{
display:grid;
place-items:center;
overflow:hidden;
}
#roomSettingsModal .room-settings-card{
height:auto;
max-height:calc(100vh - 40px);
min-height:0;
overflow:hidden;
}
#roomSettingsModal #roomSettingsForm.room-settings-form{
display:flex;
flex-direction:column;
flex:1 1 auto;
min-height:0;
max-height:calc(100vh - 72px);
overflow-y:auto;
overflow-x:hidden;
overscroll-behavior:contain;
-webkit-overflow-scrolling:touch;
padding-right:8px;
}
#roomSettingsModal #roomSettingsLists.room-settings-list-wrap{
flex:0 0 auto;
min-height:0;
overflow:visible;
}
#roomSettingsModal #roomSettingsLists .room-settings-lists{
max-height:min(34vh,320px);
min-height:0;
overflow-y:auto;
overflow-x:hidden;
overscroll-behavior:contain;
-webkit-overflow-scrolling:touch;
padding-right:8px;
touch-action:pan-y;
}
#roomSettingsModal .skins-actions{
flex:0 0 auto;
}
@media(max-height:720px){
#roomSettingsModal #roomSettingsLists .room-settings-lists{max-height:180px;}
#roomSettingsModal #roomSettingsForm.room-settings-form{max-height:calc(100vh - 56px);}
}
/* v171: Room settings reliable internal scroll + non-floating close button */
#roomSettingsModal.room-settings-modal.open{
display:flex;
align-items:center;
justify-content:center;
padding:18px;
overflow:hidden;
}
#roomSettingsModal .room-settings-card{
width:min(760px,calc(100vw - 24px));
height:min(82vh,760px);
max-height:calc(100vh - 36px);
min-height:0;
overflow:hidden;
display:flex;
flex-direction:column;
padding:0;
box-sizing:border-box;
}
#roomSettingsModal .room-settings-fixed-head{
flex:0 0 auto;
position:relative;
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:14px;
padding:14px 14px 12px 16px;
border-bottom:1px solid rgba(255,255,255,.09);
background:linear-gradient(180deg,rgba(18,10,28,.99),rgba(12,6,22,.98));
z-index:4;
}
#roomSettingsModal .room-settings-fixed-head .skins-head{
padding:0;
margin:0;
border:0;
min-width:0;
}
#roomSettingsModal .room-settings-fixed-head .skins-x{
position:static;
inset:auto;
transform:none;
flex:0 0 32px;
width:32px;
height:32px;
display:inline-flex;
align-items:center;
justify-content:center;
margin:0;
}
#roomSettingsModal #roomSettingsForm.room-settings-form{
flex:1 1 auto;
min-height:0;
max-height:none;
overflow:hidden;
display:flex;
flex-direction:column;
gap:0;
padding:0;
}
#roomSettingsModal .room-settings-scroll{
flex:1 1 auto;
min-height:0;
overflow-y:auto;
overflow-x:hidden;
overscroll-behavior:contain;
-webkit-overflow-scrolling:touch;
touch-action:pan-y;
padding:12px 14px 12px 14px;
display:grid;
gap:10px;
}
#roomSettingsModal .room-settings-scroll::-webkit-scrollbar{width:7px;}
#roomSettingsModal .room-settings-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.24);border-radius:99px;}
#roomSettingsModal #roomSettingsLists.room-settings-list-wrap{
min-height:auto;
overflow:visible;
margin-top:0;
}
#roomSettingsModal #roomSettingsLists .room-settings-lists{
max-height:none;
overflow:visible;
padding-right:0;
}
#roomSettingsModal .skins-actions{
flex:0 0 auto;
position:relative;
bottom:auto;
margin:0;
padding:12px 14px;
background:linear-gradient(180deg,rgba(10,5,18,.98),rgba(6,3,13,.99));
border-top:1px solid rgba(255,255,255,.09);
z-index:3;
}
@media(max-height:680px){
#roomSettingsModal .room-settings-card{height:calc(100vh - 24px);}
#roomSettingsModal .room-settings-scroll{padding-top:10px;padding-bottom:10px;}
}
/* v175 external links + muted room feedback */
.external-link{color:#9defff;text-decoration:none;font-weight:850;display:inline-flex;align-items:center;gap:3px;max-width:100%;vertical-align:baseline;cursor:pointer}
.external-link:hover{filter:brightness(1.12);text-decoration:none}
.external-link-icon{display:inline-flex;align-items:center;justify-content:center;font-size:.92em;line-height:1;opacity:.92}
.external-link-icon svg{width:1em;height:1em;display:block}
#muteBtn.is-muted-flashing{animation:plugMutedFlash 1.05s ease-in-out infinite;box-shadow:0 0 0 0 rgba(157,239,255,.28),0 0 18px rgba(157,239,255,.2)}
@keyframes plugMutedFlash{0%,100%{filter:brightness(1);transform:none}50%{filter:brightness(1.48);box-shadow:0 0 0 4px rgba(157,239,255,.12),0 0 24px rgba(157,239,255,.42)}}
.profile-status-popup{display:flex;align-items:center;justify-content:space-between;gap:10px;border-radius:12px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1);padding:10px 10px 10px 12px;margin:0 14px 12px}
.profile-status-popup>span{min-width:0;flex:1;overflow-wrap:anywhere}
.profile-status-edit-btn{width:30px;height:30px;flex:0 0 30px;display:inline-grid;place-items:center;border:1px solid rgba(157,239,255,.32);border-radius:10px;background:rgba(157,239,255,.1);color:#9defff;cursor:pointer;padding:0}
.profile-status-edit-btn:hover{background:rgba(157,239,255,.18);filter:brightness(1.12)}
.profile-status-edit-btn svg{width:16px;height:16px}
/* v179: chat tags, mention suggestions and local emoji picker */
.chat-mention-suggest{position:fixed;z-index:10050;width:min(320px,calc(100vw - 16px));max-height:min(410px,calc(100vh - 140px));overflow:auto;padding:10px;background:rgba(14,14,22,.98);border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 60px rgba(0,0,0,.5);border-radius:16px;backdrop-filter:none!important;}
.chat-mention-suggest[hidden]{display:none;}
.mention-section+ .mention-section{margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.08);}
.mention-section h5{margin:0 0 6px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#aab1ca;}
.mention-section p{margin:6px 8px;color:#767e98;font-size:12px;}
.mention-choice{width:100%;display:flex;align-items:center;gap:9px;padding:8px;border:0;border-radius:10px;background:transparent;color:#fff;text-align:left;cursor:pointer;}
.mention-choice:hover{background:rgba(255,255,255,.07);}
.mention-choice img{width:30px;height:30px;border-radius:50%;object-fit:cover;background:#151521;}
.mention-choice span{display:flex;flex-direction:column;min-width:0;}
.mention-choice b{font-size:13px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mention-choice small{font-size:11px;color:#8c94ad;}
.chat-mention{border:0;background:rgba(124,92,255,.16);color:#c7b8ff;border-radius:7px;padding:1px 5px;font:inherit;font-weight:900;cursor:pointer;vertical-align:baseline;}
.chat-mention:hover,.chat-mention:focus{background:rgba(124,92,255,.28);color:#fff;outline:none;}
.chat-emoji-btn{display:inline-flex;align-items:center;justify-content:center;min-width:42px;width:42px;color:#ffd84d;font-size:21px;padding:0;}
.chat-emoji-btn .iconify{color:#ffd84d;}
.chat-emoji-picker{position:fixed;z-index:10040;width:min(430px,calc(100vw - 18px));max-width:calc(100vw - 18px);height:min(520px,calc(100vh - 110px));box-sizing:border-box;padding:12px;background:rgba(14,14,22,.98);border:1px solid rgba(255,255,255,.12);box-shadow:0 24px 80px rgba(0,0,0,.52);border-radius:16px;backdrop-filter:none!important;overflow:hidden;}
.chat-emoji-picker,.chat-emoji-picker *{box-sizing:border-box;}
.chat-emoji-picker[hidden]{display:none;}
.emoji-picker-scroll{height:100%;min-height:0;overflow-y:auto;overflow-x:hidden;padding-right:2px;}
.emoji-picker-head,.emoji-all-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;color:#fff;min-width:0;}
.emoji-picker-head b,.chat-emoji-picker h4{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#cdd2ea;margin:0;}
.emoji-picker-head button{border:0;background:transparent;color:#9da5be;border-radius:8px;width:28px;height:28px;cursor:pointer;font-size:20px;line-height:1;flex:0 0 auto;}
.emoji-picker-head button:hover{color:#fff;background:rgba(255,255,255,.06);}
.emoji-all-title{margin:10px 0 7px;}
.emoji-loading{font-size:11px;color:#737c96;}
.emoji-grid{display:grid;grid-template-columns:repeat(auto-fill,30px);gap:3px;align-content:start;justify-content:start;max-width:100%;overflow-x:hidden;}
.emoji-grid.recent{min-height:42px;max-height:none;overflow:visible;padding:2px 0 10px;border-bottom:1px solid rgba(255,255,255,.08);}
.emoji-grid.recent p{grid-column:1/-1;margin:10px 2px;color:#858ca5;font-size:12px;}
.emoji-grid.all{min-height:0;padding-bottom:4px;}
.emoji-choice{width:30px;height:30px;display:flex;align-items:center;justify-content:center;border:0;border-radius:6px;background:transparent;box-shadow:none;outline:none;cursor:pointer;padding:0;line-height:1;transform:none;transition:none;appearance:none;-webkit-appearance:none;}
.emoji-choice:hover,.emoji-choice:focus{background:rgba(255,255,255,.055);transform:none;box-shadow:none;}
.emoji-choice img.emoji-img{width:21px;height:21px;display:block;pointer-events:none;}
.emoji-native{font-size:21px;line-height:1;}
.chat-content p img.emoji{width:18px;height:18px;vertical-align:-3px;}
/* clearer chat text + custom local emojis */
.chat-line p{font-size:14px;line-height:1.38;}
.chat-time-actions{display:flex;align-items:flex-end;margin-left:auto;min-width:30px;}
.chat-custom-emoji{width:22px;height:22px;object-fit:contain;vertical-align:-5px;display:inline-block;margin:0 1px;}
.profile-tag-popup-btn{color:#9defff;}
.profile-tag-popup-btn:hover{color:#ffd55c;}
.chat-emoji-picker{overflow:hidden;max-width:calc(100vw - 18px);}
.emoji-picker-scroll{overflow-x:hidden;overflow-y:auto;max-width:100%;}
.emoji-grid,.emoji-grid.all,.emoji-grid.recent{display:flex;flex-wrap:wrap;gap:3px;max-width:100%;width:100%;overflow-x:hidden;box-sizing:border-box;align-content:flex-start;}
.emoji-grid.recent{height:auto;max-height:none;overflow-y:visible;padding:2px 0 10px;}
.emoji-all-title{clear:both;margin-top:10px;}
.emoji-choice{flex:0 0 30px;width:30px;min-width:0;max-width:30px;}
/* v187: chat emojis can be clicked to insert their shortcode back into chat input */
.chat-custom-emoji{cursor:pointer;}
.chat-custom-emoji:hover{filter:brightness(1.12);}
/* v188: subtle per-message @ mention action */
.chat-line{
position:relative;
}
.chat-line .chat-content{
position:relative;
padding-right:0;
}
.chat-line .chat-content > p{
padding-right:22px;
}
.chat-line-tag-btn{
position:absolute;
right:0;
bottom:0;
width:18px;
height:18px;
display:grid;
place-items:center;
padding:0;
margin:0;
border:0;
border-radius:6px;
background:transparent;
color:rgba(255,255,255,.34);
box-shadow:none;
opacity:0;
transform:none;
cursor:pointer;
transition:opacity .14s ease,color .14s ease,background-color .14s ease;
}
.chat-line-tag-btn .iconify{
width:14px;
height:14px;
display:block;
transform:none;
}
.chat-line:hover .chat-line-tag-btn,
.chat-line:focus-within .chat-line-tag-btn{
opacity:1;
}
.chat-line-tag-btn:hover{
color:#ffd55c;
background:rgba(255,255,255,.06);
}
.chat-line-tag-btn:active{
transform:none;
}
@media (hover:none), (pointer:coarse){
.chat-line-tag-btn{opacity:.72;}
}
/* v190: unified room head, chat tabs, account menu and rail tooltips */
:root{
--room-head-height:76px;
--room-rail-width:76px;
--room-side-width:288px;
}
.room-head{
right:0;
width:100%;
height:var(--room-head-height);
min-height:var(--room-head-height);
padding:0 16px;
gap:14px;
background:linear-gradient(90deg,rgba(8,8,19,.94),rgba(17,8,30,.9) 48%,rgba(8,8,18,.94));
border-bottom:1px solid rgba(255,255,255,.12);
box-shadow:0 18px 45px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.08);
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
}
.room-head h1{font-size:20px;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.club-layout{padding-top:calc(var(--room-head-height) + 8px);padding-left:calc(var(--room-rail-width) + 8px);}
.chat-panel{top:var(--room-head-height);border-top:0;background:linear-gradient(180deg,rgba(15,8,25,.86),rgba(11,5,17,.94));box-shadow:inset 1px 0 0 rgba(255,255,255,.08);}
.chat-messages{height:calc(100% - 54px);}
.chat-list-view,.chat-users-view{height:calc(100% - 54px);}
.room-head-chat-tabs{margin-left:auto;width:var(--room-side-width);min-width:var(--room-side-width);display:flex;align-items:center;justify-content:center;}
.room-head-chat-tabs .chat-tabs{
width:100%;
height:44px;
margin:0;
padding:5px;
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:6px;
border-radius:14px;
border:1px solid rgba(255,255,255,.12);
background:rgba(255,255,255,.055);
box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 26px rgba(0,0,0,.18);
backdrop-filter:none!important;
}
.room-head-chat-tabs .chat-tab{
height:32px;
border-radius:10px;
background:transparent;
border:1px solid transparent;
color:#b7c5df;
box-shadow:none;
transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.room-head-chat-tabs .chat-tab:hover{background:rgba(255,255,255,.07);color:#fff;border-color:rgba(255,255,255,.08);transform:none;}
.room-head-chat-tabs .chat-tab.active{background:rgba(83,95,219,.22);border-color:rgba(157,239,255,.2);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.1);}
.room-head .nav-account-cluster{position:static;right:auto;top:auto;height:44px;margin-left:0;align-items:center;}
.room-head .nav-account-cluster .nav-logout{display:none;}
.account-menu-wrap{position:relative;display:inline-flex;align-items:center;height:44px;}
.room-head .account-menu-wrap .account{height:34px;padding:0 10px;border-radius:11px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);}
.room-head .account-menu-wrap .account:hover{background:rgba(255,255,255,.075);border-color:rgba(157,239,255,.18);}
.room-head .account-menu-wrap .account small{display:none;}
.account-dropdown{
position:absolute;
right:0;
top:calc(100% + 8px);
min-width:146px;
padding:7px;
border-radius:13px;
border:1px solid rgba(255,255,255,.12);
background:rgba(8,8,18,.96);
box-shadow:0 18px 45px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.08);
backdrop-filter:none!important;
opacity:0;
visibility:hidden;
transform:translateY(-4px);
pointer-events:none;
transition:opacity .14s ease,transform .14s ease,visibility .14s ease;
z-index:1000;
}
.account-menu-wrap:hover .account-dropdown,.account-menu-wrap:focus-within .account-dropdown{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;}
.account-dropdown a,.account-dropdown button{width:100%;height:34px;display:flex;align-items:center;padding:0 10px;border:0;border-radius:9px;background:transparent;color:#dfe8ff;text-align:left;font-size:12px;font-weight:850;text-decoration:none;}
.account-dropdown a:hover,.account-dropdown button:hover{background:rgba(83,95,219,.18);color:#fff;transform:none;}
.icon-rail{
top:var(--room-head-height);
width:var(--room-rail-width);
padding:14px 0;
gap:12px;
background:rgba(8,8,19,.9);
border-right:1px solid rgba(255,255,255,.11);
box-shadow:14px 0 38px rgba(0,0,0,.24),inset 1px 0 0 rgba(255,255,255,.04);
backdrop-filter:none!important;
}
.icon-rail .rail-btn{width:48px;height:42px;border-radius:13px;color:#aebbd5;position:relative;transition:background .16s ease,color .16s ease,border-color .16s ease;}
.icon-rail .rail-btn:hover,.icon-rail .rail-btn:focus-visible{background:rgba(83,95,219,.18);color:#fff;filter:none;transform:none;}
.icon-rail .rail-btn::after{content:attr(title);position:absolute;left:calc(100% + 12px);top:50%;transform:translate(0,-50%) scale(.96);padding:7px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:rgba(8,8,18,.96);color:#f2f6ff;box-shadow:0 14px 32px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.08);font-size:11px;font-weight:900;line-height:1;white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .14s ease,transform .14s ease,visibility .14s ease;z-index:1001;}
.icon-rail .rail-btn:hover::after,.icon-rail .rail-btn:focus-visible::after{opacity:1;visibility:visible;transform:translate(0,-50%) scale(1);}
.icon-rail .rail-btn .iconify{width:22px;height:22px;font-size:22px;}
.icon-rail .rail-avatar-btn img{width:26px;height:26px;}
@media(max-width:980px){.room-head-chat-tabs{width:240px;min-width:240px}.room-head h1{max-width:160px}.room-head .navbar-now-playing{display:none}}
/* v191: compact unified header/rail + corrected layout offsets */
:root{
--room-head-height:62px;
--room-rail-width:62px;
--room-side-width:288px;
}
.room-head{
height:var(--room-head-height);
min-height:var(--room-head-height);
padding:0 14px;
gap:11px;
}
.room-head h1{font-size:18px;max-width:210px;}
.club-layout{
top:var(--room-head-height);
left:0;
right:288px;
bottom:76px;
padding:0 0 0 var(--room-rail-width);
}
.chat-panel{top:var(--room-head-height);}
.icon-rail{
top:var(--room-head-height);
width:var(--room-rail-width);
padding:10px 0;
gap:9px;
}
.icon-rail .rail-btn{
width:40px;
height:36px;
border-radius:11px;
}
.icon-rail .rail-btn .iconify{width:20px;height:20px;font-size:20px;}
.icon-rail .rail-avatar-btn img{width:24px;height:24px;}
.icon-rail .rail-btn::after{left:calc(100% + 20px);}
.room-head .navbar-now-playing{
position:fixed;
top:calc(var(--room-head-height) + 10px);
left:calc((100vw - var(--room-side-width) + var(--room-rail-width)) / 2);
transform:translateX(-50%);
z-index:70;
max-width:min(42vw,560px);
pointer-events:auto;
justify-content:center;
text-align:center;
}
.room-head .nav-account-cluster{
order:20;
height:38px;
flex:0 0 auto;
margin-left:auto;
gap:10px;
}
.room-head-chat-tabs{
order:30;
margin-left:0;
width:var(--room-side-width);
min-width:var(--room-side-width);
}
.room-head-chat-tabs .chat-tabs{
height:38px;
padding:4px;
border-radius:12px;
gap:5px;
}
.room-head-chat-tabs .chat-tab{
height:28px;
border-radius:9px;
}
.account-menu-wrap{height:48px;padding:7px 0;}
.account-dropdown{top:calc(100% - 3px);}
.account-dropdown::before{
content:"";position:absolute;left:0;right:0;top:-12px;height:12px;
}
.nav-admin-btn{
width:28px;height:28px;min-width:28px;
display:grid;place-items:center;color:#ffd65c;
background:transparent;border:0;opacity:1;visibility:visible;
}
.nav-admin-btn .iconify{width:20px;height:20px;display:block;}
:root{
--stage-icon-rail-width:62px;
--stage-card-rail-clearance:28px;
}
.play-song-card,
.dj-now-card{
left:calc(var(--stage-icon-rail-width) + var(--stage-card-rail-clearance));
}
.stage-top-actions{
top:22px;
right:18px;
}
@media(max-width:980px){
.room-head-chat-tabs{width:240px;min-width:240px;}
.room-head .navbar-now-playing{display:none;}
.room-head h1{max-width:150px;}
}
/* v192: 55px header/rail and player aligned below room-head */
:root{
--room-head-height:55px;
--room-rail-width:55px;
--stage-icon-rail-width:55px;
--stage-card-rail-clearance:26px;
}
.room-head{
height:55px;
min-height:55px;
padding:0 12px;
gap:10px;
}
.room-head h1{font-size:17px;max-width:205px;}
.club-layout{
position:fixed;
top:55px;
left:0;
right:288px;
bottom:76px;
width:auto;
height:auto;
padding:0 0 0 55px;
margin:0;
overflow:hidden;
}
.stage-wrap{inset:0;}
.stage{inset:0;}
.chat-panel{top:55px;bottom:76px;}
.icon-rail{
top:55px;
bottom:76px;
width:55px;
padding:9px 0;
gap:8px;
}
.icon-rail .rail-btn{
width:37px;
height:34px;
border-radius:10px;
}
.icon-rail .rail-btn .iconify{width:19px;height:19px;font-size:19px;}
.icon-rail .rail-avatar-btn img{width:23px;height:23px;}
.icon-rail .rail-btn::after{left:calc(100% + 24px);}
.room-head .nav-account-cluster{height:36px;gap:9px;}
.account-menu-wrap{height:44px;padding:6px 0;}
.room-head .account-menu-wrap .account{height:32px;padding:0 9px;}
.account-dropdown{top:calc(100% - 2px);}
.account-dropdown::before{top:-14px;height:14px;}
.room-head-chat-tabs .chat-tabs{height:36px;padding:4px;}
.room-head-chat-tabs .chat-tab{height:26px;}
.nav-admin-btn{width:28px;height:28px;min-width:28px;display:grid;place-items:center;opacity:1;visibility:visible;}
.room-head .navbar-now-playing{
top:calc(55px + 10px);
left:calc((100vw - 288px + 55px) / 2);
}
.play-song-card,
.dj-now-card{
left:calc(55px + 26px);
}
.stage-top-actions{
top:18px;
right:18px;
}
@media(max-width:980px){
.room-head h1{max-width:145px;}
}
/* v193: header/profile/chat polish */
.room-head{
overflow:visible;
}
#menuToggle.hamburger{
flex:0 0 31px;
width:31px;
height:34px;
margin-left:0;
align-self:center;
}
#menuToggle.hamburger span{
width:19px;
background:#b9c4df;
}
.room-title-block{
min-width:0;
flex:0 1 250px;
display:flex;
flex-direction:column;
justify-content:center;
gap:2px;
height:100%;
z-index:2;
}
.room-title-line{
min-width:0;
display:flex;
align-items:center;
gap:8px;
line-height:1;
}
.room-title-icon{
width:26px;
height:26px;
min-width:26px;
display:grid;
place-items:center;
color:#9defff;
filter:none!important;
}
.room-title-line h1{
margin:0;
line-height:1.05;
}
.room-hosted-line{
padding-left:34px;
display:flex;
align-items:center;
gap:4px;
min-width:0;
color:#8c95ad;
font-size:10px;
font-weight:800;
letter-spacing:.01em;
white-space:nowrap;
}
.room-admin-link{
appearance:none;
border:0;
padding:0;
margin:0;
background:transparent;
color:#dfe7ff;
font-size:10px;
font-weight:900;
line-height:1;
cursor:pointer;
max-width:132px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.room-admin-link:hover{
color:#9defff;
text-decoration:none;
transform:none;
}
.online-pill .online-dot{display:none;}
.online-pill .online-icon{
width:14px;
height:14px;
color:#41f6a4;
filter:none!important;
}
.room-head .account-menu-wrap .account{
display:inline-flex;
align-items:center;
gap:7px;
margin-left:0;
}
.account-profile-icon{
width:17px;
height:17px;
color:#cfd8f6;
flex:0 0 auto;
}
.account-copy{
min-width:0;
display:flex;
align-items:center;
}
.account-dropdown a,.account-dropdown button{
gap:8px;
}
.account-dropdown .iconify{
width:17px;
height:17px;
min-width:17px;
color:#9defff;
}
.account-dropdown a:hover .iconify,.account-dropdown button:hover .iconify{
color:#fff;
}
.chat-form{
flex:0 0 58px;
width:calc(100% + 18px);
margin:0 -9px;
padding:9px;
display:grid;
grid-template-columns:minmax(0,1fr) 42px;
gap:8px;
background:linear-gradient(180deg,rgba(10,10,22,.86),rgba(7,7,17,.94));
border-top:1px solid rgba(255,255,255,.1);
box-shadow:0 -16px 34px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.05);
backdrop-filter:none!important;
}
.chat-form input{
height:40px;
min-width:0;
border:1px solid rgba(255,255,255,.1);
border-radius:12px;
padding:0 13px;
background:rgba(255,255,255,.055);
color:#eef3ff;
box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
}
.chat-form input:focus{
border-color:rgba(157,239,255,.26);
background:rgba(255,255,255,.075);
box-shadow:0 0 0 3px rgba(157,239,255,.06),inset 0 1px 0 rgba(255,255,255,.06);
}
.chat-form input::placeholder{color:#7f8aa5;}
.chat-emoji-btn{
width:42px;
height:40px;
min-width:42px;
border-radius:12px;
border:1px solid rgba(255,255,255,.1);
background:rgba(255,255,255,.055);
color:#dfe7ff;
font-size:20px;
box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
}
.chat-emoji-btn:hover{
background:rgba(83,95,219,.18);
border-color:rgba(157,239,255,.2);
color:#fff;
transform:none;
}
.chat-emoji-btn .iconify{color:inherit;}
.room-head .navbar-now-playing{
position:absolute;
top:50%;
left:calc((100vw - 288px + 55px) / 2);
transform:translate(-50%,-50%);
z-index:1;
max-width:min(36vw,470px);
min-width:0;
height:34px;
padding:0 14px;
border-radius:12px;
border:1px solid rgba(255,255,255,.1);
background:rgba(255,255,255,.045);
box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
text-align:center;
pointer-events:auto;
}
.room-head .navbar-now-playing[hidden]{display:none;}
.room-head .navbar-now-icon{
width:16px;
height:16px;
min-width:16px;
color:#9defff;
}
.room-head .navbar-now-text{
min-width:0;
display:flex;
align-items:center;
gap:5px;
white-space:nowrap;
overflow:hidden;
font-size:11px;
}
.room-head .navbar-now-dj,
.room-head .navbar-now-title{
max-width:150px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.room-head .navbar-now-dj{
color:#fff;
background:transparent;
padding:0;
font-size:11px;
font-weight:900;
}
.room-head .navbar-now-label{color:#7f8aa5;font-weight:800;}
.room-head .navbar-now-title{color:#dfe7ff;font-weight:900;}
.icon-rail .rail-btn::after{left:calc(100% + 28px);}
@media(max-width:1160px){
.room-head .navbar-now-playing{max-width:30vw;}
.room-title-block{flex-basis:210px;}
.room-hosted-line{display:none;}
}
@media(max-width:980px){
.room-title-icon{width:22px;height:22px;min-width:22px;}
.room-title-block{flex-basis:180px;}
}
/* v194: refined room title grouping and player-centered now playing */
.room-title-block{
flex:0 1 auto;
width:auto;
max-width:310px;
display:grid;
grid-template-columns:auto minmax(0,auto);
grid-template-rows:auto;
align-items:center;
column-gap:8px;
height:100%;
margin-right:0;
}
.room-title-copy{
min-width:0;
display:flex;
flex-direction:column;
justify-content:center;
gap:2px;
}
.room-title-line{gap:0;align-items:center;}
.room-title-icon{
width:34px;
height:34px;
min-width:34px;
align-self:center;
margin-top:0;
}
.room-title-line h1,
.room-head h1{
max-width:190px;
line-height:1.05;
}
.room-hosted-line{
padding-left:0;
margin-top:0;
}
.room-admin-link{
max-width:150px;
}
.room-head > .pill.about,
.room-head > .online-pill{
margin-left:0;
flex:0 0 auto;
}
.room-head > .pill.about{
padding-left:10px;
padding-right:10px;
}
.room-head{
gap:7px;
}
.room-head .navbar-now-playing{
position:fixed;
top:10.5px;
left:var(--navbar-now-center, calc(55px + ((100vw - 55px - 288px) / 2)));
transform:translateX(-50%);
z-index:72;
}
@media(max-width:1160px){
.room-title-block{max-width:245px;}
.room-title-line h1,.room-head h1{max-width:165px;}
}
@media(max-width:980px){
.room-title-icon{width:30px;height:30px;min-width:30px;}
}
/* v195: compact room title meta + closer rail tooltips */
.room-title-block{
margin-left:8px;
max-width:340px;
column-gap:9px;
}
.room-title-line{
gap:6px;
}
.room-title-icon{
width:34px;
height:34px;
min-width:34px;
}
.about-title-btn{
width:18px;
height:18px;
min-width:18px;
display:inline-grid;
place-items:center;
padding:0;
margin-left:2px;
border:0;
border-radius:7px;
background:transparent;
color:rgba(205,216,246,.56);
opacity:.78;
cursor:pointer;
box-shadow:none;
transform:none;
}
.about-title-btn svg{
width:14px;
height:14px;
}
.about-title-btn:hover{
color:#dfe7ff;
opacity:1;
background:rgba(255,255,255,.055);
transform:none;
}
.room-head > .pill.about{display:none;}
.room-head > .online-pill{
height:34px;
padding:0 12px;
gap:7px;
font-size:12px;
font-weight:900;
}
.online-pill .online-icon{
width:17px;
height:17px;
min-width:17px;
}
.icon-rail .rail-btn::after{
left:calc(100% + 10px);
}
.icon-rail .rail-btn:hover::after,
.icon-rail .rail-btn:focus-visible::after{
transform:translate(0,-50%) scale(1);
}
.room-head .navbar-now-playing{
left:var(--navbar-now-center, calc(55px + ((100vw - 55px - 288px) / 2)));
}
@media(max-width:1160px){
.room-title-block{max-width:275px;margin-left:6px;}
}
/* v196: subtler about icon + modern compact rail tooltips */
.about-title-btn{
width:16px;
height:16px;
min-width:16px;
margin-left:3px;
border-radius:6px;
color:rgba(166,174,193,.62);
opacity:.72;
background:transparent;
border:0;
box-shadow:none;
}
.about-title-btn svg{
width:12px;
height:12px;
display:block;
}
.about-title-btn:hover,
.about-title-btn:focus-visible{
color:rgba(218,225,241,.88);
opacity:1;
background:rgba(255,255,255,.045);
box-shadow:none;
}
.icon-rail .rail-btn::after{
left:calc(100% + 8px);
padding:8px 11px;
border-radius:11px;
border:1px solid rgba(145,160,255,.18);
background:linear-gradient(135deg,rgba(18,20,36,.98),rgba(8,10,20,.96));
color:#edf2ff;
font-size:11px;
font-weight:800;
letter-spacing:.01em;
line-height:1;
box-shadow:0 10px 28px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.10);
backdrop-filter:none!important;
transform:translate(-4px,-50%) scale(.98);
}
.icon-rail .rail-btn::before{
content:"";
position:absolute;
left:calc(100% + 4px);
top:50%;
width:7px;
height:7px;
border-left:1px solid rgba(145,160,255,.18);
border-bottom:1px solid rgba(145,160,255,.18);
background:rgba(18,20,36,.98);
transform:translateY(-50%) rotate(45deg);
opacity:0;
visibility:hidden;
pointer-events:none;
transition:opacity .14s ease,visibility .14s ease;
z-index:1000;
}
.icon-rail .rail-btn:hover::after,
.icon-rail .rail-btn:focus-visible::after{
transform:translate(0,-50%) scale(1);
}
.icon-rail .rail-btn:hover::before,
.icon-rail .rail-btn:focus-visible::before{
opacity:1;
visibility:visible;
}
/* v197: verified subtle about icon + refreshed icon rail tooltips */
.room-title-line #aboutCommunityBtn.about-title-btn,
#aboutCommunityBtn.about-title-btn{
width:18px;
height:18px;
min-width:18px;
padding:0;
margin-left:4px;
display:inline-grid;
place-items:center;
border:0;
border-radius:6px;
background:transparent;
color:#8f98aa;
opacity:.66;
box-shadow:none;
vertical-align:middle;
transform:none;
}
.room-title-line #aboutCommunityBtn.about-title-btn svg,
#aboutCommunityBtn.about-title-btn svg{
width:15px;
height:15px;
display:block;
color:currentColor;
}
.room-title-line #aboutCommunityBtn.about-title-btn:hover,
.room-title-line #aboutCommunityBtn.about-title-btn:focus-visible,
#aboutCommunityBtn.about-title-btn:hover,
#aboutCommunityBtn.about-title-btn:focus-visible{
color:#b5bdcc;
opacity:.92;
background:rgba(255,255,255,.035);
box-shadow:none;
transform:none;
}
.icon-rail .rail-btn::after{
left:calc(100% + 7px);
top:50%;
padding:8px 10px;
min-height:28px;
display:flex;
align-items:center;
border-radius:9px;
border:1px solid rgba(160,172,255,.18);
background:linear-gradient(135deg,rgba(21,24,38,.98),rgba(10,11,21,.96));
color:#eef3ff;
font-size:11px;
font-weight:850;
letter-spacing:.015em;
line-height:1;
text-shadow:none;
box-shadow:0 12px 30px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.10);
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
transform:translate(-3px,-50%) scale(.98);
}
.icon-rail .rail-btn::before{
left:calc(100% + 4px);
width:8px;
height:8px;
border:0;
border-left:1px solid rgba(160,172,255,.18);
border-bottom:1px solid rgba(160,172,255,.18);
background:rgba(18,21,34,.98);
box-shadow:none;
}
.icon-rail .rail-btn:hover::after,
.icon-rail .rail-btn:focus-visible::after{
opacity:1;
visibility:visible;
transform:translate(0,-50%) scale(1);
}
.icon-rail .rail-btn:hover::before,
.icon-rail .rail-btn:focus-visible::before{
opacity:1;
visibility:visible;
}
/* v198: title meta alignment, modern rail tooltips, and stage control layout */
.room-title-block{
margin-left:14px;
}
.room-title-line{
gap:3px;
}
.room-title-line #aboutCommunityBtn.about-title-btn,
#aboutCommunityBtn.about-title-btn{
width:15px;
height:15px;
min-width:15px;
margin-left:1px;
border-radius:5px;
color:#7f8796;
opacity:.58;
background:transparent;
}
.room-title-line #aboutCommunityBtn.about-title-btn svg,
#aboutCommunityBtn.about-title-btn svg{
width:13px;
height:13px;
}
.room-title-line #aboutCommunityBtn.about-title-btn:hover,
#aboutCommunityBtn.about-title-btn:hover{
color:#a6adba;
opacity:.9;
background:rgba(255,255,255,.035);
}
.room-head > .online-pill{
height:30px;
padding:0 13px;
gap:8px;
font-size:13px;
font-weight:950;
align-self:center;
margin-top:15px;
border-radius:10px;
}
.online-pill .online-icon{
width:18px;
height:18px;
min-width:18px;
}
/* A tighter, cleaner rail tooltip: closer to the icon, no bulky arrow. */
.icon-rail .rail-btn::before{
display:none;
content:none;
}
.icon-rail .rail-btn::after{
left:calc(100% + 5px);
min-height:30px;
padding:0 11px 0 12px;
border-radius:10px;
border:1px solid rgba(255,255,255,.10);
border-left:2px solid rgba(157,239,255,.72);
background:linear-gradient(135deg,rgba(18,20,31,.96),rgba(8,9,16,.94));
color:#f4f7ff;
font-size:11px;
font-weight:900;
letter-spacing:.02em;
box-shadow:0 12px 30px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.08);
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
transform:translate(-6px,-50%);
}
.icon-rail .rail-btn:hover::after,
.icon-rail .rail-btn:focus-visible::after{
opacity:1;
visibility:visible;
transform:translate(0,-50%);
}
:root{
--stage-control-bottom:7.4%;
--stage-control-top-row:calc(var(--stage-control-bottom) + 78px);
--stage-right-controls-gap:7.2%;
--stage-control-glass:rgba(10,12,24,.72);
}
.vote-box{
right:var(--stage-right-controls-gap);
bottom:var(--stage-control-bottom);
border-radius:15px;
}
.play-song-card{
bottom:var(--stage-control-bottom);
}
.history-box{
right:calc(var(--stage-right-controls-gap) + 156px);
bottom:var(--stage-control-top-row);
height:36px;
z-index:37;
}
.auto-like-box{
position:absolute;
right:var(--stage-right-controls-gap);
bottom:var(--stage-control-top-row);
z-index:37;
}
.history-btn,
.auto-like-box{
height:36px;
min-height:36px;
border-radius:11px;
border:1px solid rgba(255,255,255,.12);
background:linear-gradient(135deg,rgba(18,20,34,.82),rgba(8,9,18,.76));
color:#dfe7ff;
box-shadow:0 12px 34px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.08);
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
}
.history-btn:hover,
.history-box.open .history-btn,
.auto-like-box:hover{
background:linear-gradient(135deg,rgba(83,95,219,.22),rgba(14,16,28,.82));
border-color:rgba(157,239,255,.28);
color:#fff;
box-shadow:0 14px 38px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.11);
}
.history-btn{
width:104px;
min-width:104px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
}
.history-btn::after{
content:"History";
font-size:12px;
font-weight:900;
letter-spacing:.01em;
color:currentColor;
}
.history-btn svg{
width:17px;
height:17px;
flex:0 0 17px;
}
.auto-like-box{
width:146px;
min-width:146px;
padding:0 12px;
gap:9px;
}
.auto-like-box .auto-like-icon{
width:17px;
height:17px;
min-width:17px;
color:#ff6f91;
}
.auto-like-label{
font-size:12px;
font-weight:900;
}
.auto-like-status{
font-size:10px;
font-weight:950;
color:#8d96ad;
}
.history-dropdown{
bottom:46px;
}
@media(max-width:960px){
.history-box{right:calc(var(--stage-right-controls-gap) + 148px);bottom:var(--stage-control-top-row);}
.auto-like-box{right:var(--stage-right-controls-gap);bottom:var(--stage-control-top-row);}
}
/* v199: requested room title, stacked controls, vote offset, and description edit placement */
.room-title-line{
align-items:center;
gap:4px;
}
.room-title-line h1,
.room-head h1{
display:inline-flex;
align-items:center;
line-height:1;
}
.room-title-line #aboutCommunityBtn.about-title-btn,
#aboutCommunityBtn.about-title-btn{
align-self:center;
width:18px;
height:18px;
min-width:18px;
margin-left:2px;
margin-top:0;
color:#c0c8d8;
opacity:.82;
border-radius:6px;
transform:none;
}
.room-title-line #aboutCommunityBtn.about-title-btn svg,
#aboutCommunityBtn.about-title-btn svg{
width:15px;
height:15px;
display:block;
}
.room-title-line #aboutCommunityBtn.about-title-btn:hover,
#aboutCommunityBtn.about-title-btn:hover,
.room-title-line #aboutCommunityBtn.about-title-btn:focus-visible,
#aboutCommunityBtn.about-title-btn:focus-visible{
color:#eef3ff;
opacity:1;
background:rgba(255,255,255,.055);
}
:root{
--stage-right-controls-gap:4.8%;
--stage-control-bottom:7.4%;
--stage-control-size-w:230px;
--stage-control-size-h:60px;
--stage-control-stack-gap:10px;
}
.vote-box{
right:var(--stage-right-controls-gap);
bottom:var(--stage-control-bottom);
width:var(--stage-control-size-w);
max-width:var(--stage-control-size-w);
height:var(--stage-control-size-h);
min-height:var(--stage-control-size-h);
}
.history-box{
position:absolute;
right:var(--stage-right-controls-gap);
bottom:calc(var(--stage-control-bottom) + var(--stage-control-size-h) + var(--stage-control-stack-gap) + var(--stage-control-size-h) + var(--stage-control-stack-gap));
width:var(--stage-control-size-w);
height:var(--stage-control-size-h);
min-height:var(--stage-control-size-h);
z-index:37;
}
.history-btn,
.auto-like-box{
width:var(--stage-control-size-w);
min-width:var(--stage-control-size-w);
max-width:var(--stage-control-size-w);
height:var(--stage-control-size-h);
min-height:var(--stage-control-size-h);
border-radius:15px;
border:1px solid rgba(255,255,255,.11);
background:linear-gradient(135deg,rgba(12,14,26,.78),rgba(5,6,14,.70));
box-shadow:0 14px 34px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.08);
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
color:#e6ecff;
}
.history-btn{
display:flex;
align-items:center;
justify-content:center;
gap:10px;
padding:0 16px;
}
.history-btn svg,
.auto-like-box .auto-like-icon{
width:20px;
height:20px;
min-width:20px;
}
.history-btn::after{
content:"History";
font-size:13px;
font-weight:950;
letter-spacing:.01em;
}
.auto-like-box{
position:absolute;
right:var(--stage-right-controls-gap);
bottom:calc(var(--stage-control-bottom) + var(--stage-control-size-h) + var(--stage-control-stack-gap));
display:flex;
align-items:center;
justify-content:center;
gap:11px;
padding:0 16px;
z-index:37;
}
.auto-like-copy{
display:flex;
flex-direction:column;
justify-content:center;
gap:3px;
min-width:0;
}
.auto-like-label{
font-size:13px;
font-weight:950;
line-height:1;
}
.auto-like-status{
font-size:10px;
font-weight:950;
line-height:1;
color:#9ca7bf;
}
.history-btn:hover,
.history-box.open .history-btn,
.auto-like-box:hover{
background:linear-gradient(135deg,rgba(83,95,219,.22),rgba(10,12,24,.78));
border-color:rgba(157,239,255,.30);
color:#fff;
transform:none;
}
.history-dropdown{
bottom:calc(var(--stage-control-size-h) + 10px);
right:0;
}
.room-description-board,
#roomWelcomeText{
position:relative;
padding-right:46px;
padding-bottom:34px;
}
#roomWelcomeText .set-description-btn,
.room-description-board .set-description-btn,
#setRoomDescriptionBtn{
position:absolute;
right:9px;
bottom:8px;
top:auto;
margin:0;
}
@media(max-width:960px){
:root{--stage-right-controls-gap:4.4%;--stage-control-size-w:218px;--stage-control-size-h:56px;}
.history-box{right:var(--stage-right-controls-gap);bottom:calc(var(--stage-control-bottom) + var(--stage-control-size-h) + var(--stage-control-stack-gap) + var(--stage-control-size-h) + var(--stage-control-stack-gap));}
.auto-like-box{right:var(--stage-right-controls-gap);bottom:calc(var(--stage-control-bottom) + var(--stage-control-size-h) + var(--stage-control-stack-gap));}
}
/* v200: compact same-row history/autolike + floating player polish */
:root{
--stage-right-controls-gap:4.8%;
--stage-control-bottom:7.4%;
--stage-control-size-w:230px;
--stage-control-size-h:60px;
--stage-mini-control-h:38px;
--stage-mini-control-gap:10px;
}
.room-hosted-line.global-room-line{
color:#aeb7c9;
font-weight:850;
letter-spacing:.01em;
}
.vote-box{
right:var(--stage-right-controls-gap);
bottom:var(--stage-control-bottom);
width:var(--stage-control-size-w);
max-width:var(--stage-control-size-w);
height:var(--stage-control-size-h);
}
.history-box{
position:absolute;
right:calc(var(--stage-right-controls-gap) + (var(--stage-control-size-w) / 2) + (var(--stage-mini-control-gap) / 2));
bottom:calc(var(--stage-control-bottom) + var(--stage-control-size-h) + 10px);
width:calc((var(--stage-control-size-w) - var(--stage-mini-control-gap)) / 2);
height:var(--stage-mini-control-h);
min-height:var(--stage-mini-control-h);
z-index:38;
}
.auto-like-box{
position:absolute;
right:var(--stage-right-controls-gap);
bottom:calc(var(--stage-control-bottom) + var(--stage-control-size-h) + 10px);
width:calc((var(--stage-control-size-w) - var(--stage-mini-control-gap)) / 2);
min-width:calc((var(--stage-control-size-w) - var(--stage-mini-control-gap)) / 2);
max-width:calc((var(--stage-control-size-w) - var(--stage-mini-control-gap)) / 2);
height:var(--stage-mini-control-h);
min-height:var(--stage-mini-control-h);
z-index:38;
}
.history-btn,
.auto-like-box{
border-radius:12px;
border:1px solid rgba(255,255,255,.105);
background:linear-gradient(180deg,rgba(20,22,34,.72),rgba(8,9,16,.66));
box-shadow:0 10px 24px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.075);
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
color:#edf2ff;
display:flex;
align-items:center;
justify-content:center;
gap:7px;
padding:0 10px;
}
.history-btn{
width:100%;
min-width:100%;
max-width:100%;
height:100%;
min-height:100%;
}
.history-btn svg,
.auto-like-box .auto-like-icon{
width:15px;
height:15px;
min-width:15px;
opacity:.9;
}
.history-btn::after{
content:"History";
font-size:11px;
font-weight:900;
letter-spacing:.01em;
}
.auto-like-copy{
display:flex;
flex-direction:row;
align-items:center;
gap:5px;
min-width:0;
}
.auto-like-label{
font-size:11px;
font-weight:900;
line-height:1;
white-space:nowrap;
}
.auto-like-status{
display:inline-grid;
place-items:center;
height:16px;
min-width:25px;
padding:0 5px;
border-radius:999px;
background:rgba(255,255,255,.08);
color:#aeb7c9;
font-size:8px;
font-weight:950;
line-height:1;
}
.auto-like-box.is-on .auto-like-status{
background:rgba(94,255,185,.14);
color:#a8ffd8;
}
.history-btn:hover,
.history-box.open .history-btn,
.auto-like-box:hover{
background:linear-gradient(135deg,rgba(83,95,219,.24),rgba(16,18,30,.74));
border-color:rgba(157,239,255,.34);
box-shadow:0 12px 28px rgba(0,0,0,.30),0 0 22px rgba(90,223,255,.16),inset 0 1px 0 rgba(255,255,255,.10);
color:#fff;
transform:none;
}
.history-dropdown{
right:0;
bottom:calc(var(--stage-mini-control-h) + 9px);
}
.floating-player{
height:76px;
padding:10px 18px;
gap:12px;
background:linear-gradient(135deg,rgba(13,16,28,.90),rgba(30,36,58,.84) 42%,rgba(10,12,22,.93));
border-top:1px solid rgba(255,255,255,.16);
box-shadow:0 -18px 52px rgba(0,0,0,.62),inset 0 1px 0 rgba(255,255,255,.20);
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
}
.floating-player:before{
background:radial-gradient(circle at 18% 0,rgba(95,225,255,.20),transparent 30%),radial-gradient(circle at 80% 100%,rgba(255,83,213,.18),transparent 28%);
}
.floating-player:after{
content:"";
position:absolute;
left:18px;
right:18px;
top:7px;
height:1px;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
opacity:.42;
pointer-events:none;
}
.floating-player .playlist-name{
min-width:205px;
border:1px solid rgba(255,255,255,.10);
border-radius:16px;
background:rgba(255,255,255,.055);
padding:8px 11px;
box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.floating-player .playlist-disc{
width:38px;
height:38px;
border-radius:13px;
background:linear-gradient(135deg,rgba(83,95,219,.45),rgba(255,77,218,.22));
color:#f6f8ff;
border:1px solid rgba(255,255,255,.16);
box-shadow:0 0 18px rgba(83,95,219,.16);
}
.floating-player .playlist-name b,
.floating-player .track-area p b,
.floating-player .track-area p strong{
color:#f5f7ff;
}
.floating-player .playlist-name small,
.floating-player .track-area p span,
.floating-player .next-inline,
.floating-player .time{
color:#aeb7c9;
}
.floating-player .divider{
height:42px;
background:linear-gradient(180deg,transparent,rgba(255,255,255,.23),transparent);
}
.floating-player .track-area{
border:1px solid rgba(255,255,255,.085);
border-radius:16px;
background:rgba(0,0,0,.16);
padding:8px 11px;
box-shadow:inset 0 1px 0 rgba(255,255,255,.055);
}
.floating-player .track-area p{
margin:0 0 2px;
font-size:12px;
}
.floating-player .next-inline{
margin-bottom:7px;
}
.floating-player .progress{
height:5px;
background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.055);
box-shadow:inset 0 1px 2px rgba(0,0,0,.28);
}
.floating-player .progress i{
height:5px;
background:linear-gradient(90deg,#68e6ff,#ff65da);
box-shadow:0 0 16px rgba(104,230,255,.34);
}
.floating-player .bar-icon,
.floating-player .my-hub-btn,
.floating-player .bar-profile-face{
width:42px;
height:42px;
border-radius:14px;
background:linear-gradient(180deg,rgba(255,255,255,.105),rgba(255,255,255,.045));
border:1px solid rgba(255,255,255,.13);
color:#f5f7ff;
box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.floating-player .bar-icon:hover,
.floating-player .bar-icon.is-active,
.floating-player .bar-icon.is-playing,
.floating-player .my-hub-btn:hover,
.floating-player .bar-profile-face:hover{
background:linear-gradient(135deg,rgba(83,95,219,.30),rgba(255,77,218,.16));
border-color:rgba(157,239,255,.36);
box-shadow:0 0 0 3px rgba(255,255,255,.045),0 0 22px rgba(90,223,255,.18),inset 0 1px 0 rgba(255,255,255,.12);
}
.floating-player .volume{
width:96px;
accent-color:#9defff;
}
.floating-player .social{display:none;}
@media(max-width:960px){
:root{--stage-control-size-w:218px;--stage-mini-control-h:36px;--stage-mini-control-gap:8px;}
.floating-player .playlist-name{min-width:150px;padding:7px 9px;}
.floating-player .track-area{min-width:150px;padding:7px 9px;}
.floating-player .volume{display:none;}
}
/* v201: history/autolike sizing, player actions alignment, playlist icon cleanup */
:root{
--stage-history-w:42px;
--stage-auto-like-w:178px;
}
.history-box{
right:calc(var(--stage-right-controls-gap) + var(--stage-auto-like-w) + var(--stage-mini-control-gap));
width:var(--stage-history-w);
min-width:var(--stage-history-w);
max-width:var(--stage-history-w);
height:34px;
min-height:34px;
}
.auto-like-box{
width:var(--stage-auto-like-w);
min-width:var(--stage-auto-like-w);
max-width:var(--stage-auto-like-w);
height:34px;
min-height:34px;
padding:0 14px;
justify-content:center;
}
.history-btn,
.auto-like-box{
border:1px solid #ffffff30;
border-radius:14px;
background:#12051c9c;
box-shadow:none;
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
color:#f2f4ff;
}
.history-btn{
width:42px;
min-width:42px;
max-width:42px;
padding:0;
}
.history-btn::after{
content:none;
display:none;
}
.history-btn svg{
width:17px;
height:17px;
opacity:.92;
}
.auto-like-box .auto-like-icon{
width:16px;
height:16px;
opacity:.95;
}
.auto-like-copy{
gap:8px;
flex:0 1 auto;
}
.auto-like-label{
font-size:12px;
letter-spacing:0;
}
.auto-like-status{
height:17px;
min-width:29px;
padding:0 6px;
background:rgba(255,255,255,.105);
}
.history-btn:hover,
.history-box.open .history-btn,
.auto-like-box:hover{
background:#12051cbb;
border-color:#ffffff45;
box-shadow:0 0 22px rgba(157,239,255,.12),inset 0 1px 0 rgba(255,255,255,.10);
}
.floating-player #myHubBtn{
margin-left:auto;
}
.floating-player #myHubBtn,
.floating-player #floatingProfileBtn{
flex:0 0 42px;
}
.floating-player .playlist-disc{
width:24px;
height:24px;
min-width:24px;
flex:0 0 24px;
border:0;
border-radius:0;
background:transparent;
box-shadow:none;
color:#9defff;
}
.floating-player .playlist-disc svg{
width:23px;
height:23px;
display:block;
}
@media(max-width:960px){
:root{--stage-auto-like-w:168px;--stage-history-w:40px;}
.history-box{right:calc(var(--stage-right-controls-gap) + var(--stage-auto-like-w) + var(--stage-mini-control-gap));width:var(--stage-history-w);min-width:var(--stage-history-w);max-width:var(--stage-history-w);}
.history-btn{width:var(--stage-history-w);min-width:var(--stage-history-w);max-width:var(--stage-history-w);}
}
/* v202: stage edge alignment, online meta inline, and floating track cleanup */
:root{
--stage-right-controls-gap:26px;
--stage-edge-gap:26px;
}
.vote-box{
right:var(--stage-right-controls-gap);
}
.auto-like-box{
right:var(--stage-right-controls-gap);
}
.history-box{
right:calc(var(--stage-right-controls-gap) + var(--stage-auto-like-w) + var(--stage-mini-control-gap));
}
.stage-top-actions{
right:var(--stage-edge-gap);
}
.stage-top-actions .stage-action-btn,
.stage-top-actions .skins-stage-btn,
.stage-top-actions .room-settings-stage-btn{
background:rgba(0,0,0,.38);
border-color:rgba(255,255,255,.10);
}
.history-btn,
.auto-like-box{
background:rgba(0,0,0,.38);
border-color:rgba(255,255,255,.10);
border-radius:10px;
box-shadow:none;
}
.history-btn:hover,
.history-box.open .history-btn,
.auto-like-box:hover{
background:rgba(0,0,0,.46);
border-color:rgba(255,255,255,.14);
box-shadow:none;
}
.room-title-copy .room-hosted-line{
display:flex;
align-items:center;
gap:5px;
}
.room-title-copy .online-pill{
display:inline-flex;
align-items:center;
height:auto;
margin:0 0 0 5px;
padding:0;
border:0;
background:transparent;
box-shadow:none;
gap:4px;
color:inherit;
font-size:10px;
font-weight:800;
line-height:1;
letter-spacing:.01em;
vertical-align:baseline;
}
.room-title-copy .online-pill .online-icon{
width:11px;
height:11px;
min-width:11px;
color:#41f6a4;
filter:none!important;
}
.room-title-copy .online-pill #onlineCount{
color:#dfe7ff;
font-size:10px;
font-weight:900;
}
.room-head > .online-pill{
display:none;
}
.floating-player .track-area{
border:0;
border-radius:0;
background:transparent;
padding:0;
box-shadow:none;
}
.floating-player .track-area:hover{
background:transparent;
border:0;
box-shadow:none;
}
.floating-player .playlist-name{
background:transparent;
border:0;
box-shadow:none;
}
.floating-player #myHubBtn{
margin-left:auto;
}
.floating-player #myHubBtn,
.floating-player #floatingProfileBtn,
.floating-player .chat-emoji-btn{
align-self:center;
}
@media(max-width:960px){
:root{--stage-right-controls-gap:18px;--stage-edge-gap:18px;}
.history-box{right:calc(var(--stage-right-controls-gap) + var(--stage-auto-like-w) + var(--stage-mini-control-gap));}
}
/* v203: tighten history/autolike gap + add breathing room after player divider */
:root{
--stage-mini-control-gap:4px;
}
.history-box{
right:calc(var(--stage-right-controls-gap) + var(--stage-auto-like-w) + var(--stage-mini-control-gap));
}
.auto-like-box{
right:var(--stage-right-controls-gap);
}
.floating-player .divider{
margin-right:8px;
}
.floating-player .track-area{
margin-left:2px;
}
@media(max-width:960px){
:root{--stage-mini-control-gap:4px;}
.history-box{right:calc(var(--stage-right-controls-gap) + var(--stage-auto-like-w) + var(--stage-mini-control-gap));}
.floating-player .divider{margin-right:6px;}
.floating-player .track-area{margin-left:1px;}
}
/* v204: correct history/autolike sizing and spacing */
:root{
--stage-control-size-w:230px;
--stage-control-size-h:60px;
--stage-history-w:46px;
--stage-mini-control-gap:8px;
--stage-auto-like-w:calc(var(--stage-control-size-w) - var(--stage-history-w) - var(--stage-mini-control-gap));
}
.history-box{
position:absolute;
right:calc(var(--stage-right-controls-gap) + var(--stage-auto-like-w) + var(--stage-mini-control-gap));
bottom:calc(var(--stage-control-bottom) + var(--stage-control-size-h) + 10px);
width:var(--stage-history-w);
min-width:var(--stage-history-w);
max-width:var(--stage-history-w);
height:var(--stage-control-size-h);
min-height:var(--stage-control-size-h);
z-index:38;
}
.auto-like-box{
position:absolute;
right:var(--stage-right-controls-gap);
bottom:calc(var(--stage-control-bottom) + var(--stage-control-size-h) + 10px);
width:var(--stage-auto-like-w);
min-width:var(--stage-auto-like-w);
max-width:var(--stage-auto-like-w);
height:var(--stage-control-size-h);
min-height:var(--stage-control-size-h);
z-index:38;
padding:0 14px;
gap:9px;
justify-content:center;
}
.history-btn,
.auto-like-box{
border:1px solid #ffffff30;
border-radius:14px;
background:#12051c9c;
box-shadow:none;
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
color:#f2f4ff;
}
.history-btn{
width:100%;
min-width:100%;
max-width:100%;
height:100%;
min-height:100%;
padding:0;
display:grid;
place-items:center;
}
.history-btn::after{
content:none;
display:none;
}
.history-btn svg{
width:18px;
height:18px;
min-width:18px;
opacity:.94;
}
.auto-like-box .auto-like-icon{
width:17px;
height:17px;
min-width:17px;
opacity:.96;
}
.auto-like-copy{
display:flex;
flex-direction:row;
align-items:center;
justify-content:center;
gap:9px;
min-width:0;
flex:0 1 auto;
}
.auto-like-label{
font-size:12px;
font-weight:900;
line-height:1;
white-space:nowrap;
}
.auto-like-status{
height:18px;
min-width:30px;
padding:0 7px;
border-radius:999px;
background:rgba(255,255,255,.105);
font-size:9px;
font-weight:950;
}
.history-btn:hover,
.history-box.open .history-btn,
.auto-like-box:hover{
background:#12051cbb;
border-color:#ffffff45;
box-shadow:0 0 22px rgba(157,239,255,.12),inset 0 1px 0 rgba(255,255,255,.10);
transform:none;
}
.floating-player .divider{
margin-right:14px;
}
.floating-player .track-area{
margin-left:4px;
}
@media(max-width:960px){
:root{
--stage-history-w:42px;
--stage-mini-control-gap:7px;
--stage-control-size-w:218px;
--stage-control-size-h:56px;
}
.history-box{
right:calc(var(--stage-right-controls-gap) + var(--stage-auto-like-w) + var(--stage-mini-control-gap));
width:var(--stage-history-w);
min-width:var(--stage-history-w);
max-width:var(--stage-history-w);
height:var(--stage-control-size-h);
min-height:var(--stage-control-size-h);
}
.auto-like-box{
width:var(--stage-auto-like-w);
min-width:var(--stage-auto-like-w);
max-width:var(--stage-auto-like-w);
height:var(--stage-control-size-h);
min-height:var(--stage-control-size-h);
}
}
/* v205: final compact controls, wider seek thumb hit-area, floating buttons alignment, player gradient buttons */
:root{
--stage-control-size-h:40px;
--stage-history-w:40px;
--stage-mini-control-gap:8px;
--stage-control-size-w:230px;
--stage-auto-like-w:calc(var(--stage-control-size-w) - var(--stage-history-w) - var(--stage-mini-control-gap));
}
.history-box,
.auto-like-box{
bottom:calc(var(--stage-control-bottom) + var(--stage-control-size-h) + 10px);
height:40px;
min-height:40px;
max-height:40px;
}
.history-box{
width:40px;
min-width:40px;
max-width:40px;
right:calc(var(--stage-right-controls-gap) + var(--stage-auto-like-w) + var(--stage-mini-control-gap));
}
.auto-like-box{
width:var(--stage-auto-like-w);
min-width:var(--stage-auto-like-w);
max-width:var(--stage-auto-like-w);
padding:0 12px;
gap:8px;
align-items:center;
justify-content:center;
}
.history-btn{
height:40px;
min-height:40px;
max-height:40px;
width:40px;
min-width:40px;
max-width:40px;
border-radius:12px;
}
.history-btn svg{width:17px;height:17px;}
.auto-like-box .auto-like-icon{width:16px;height:16px;}
.auto-like-label{font-size:11px;}
.auto-like-status{height:17px;min-width:29px;font-size:9px;}
.floating-player{
align-items:center;
}
.floating-player #myHubBtn,
.floating-player #floatingProfileBtn,
.floating-player .chat-emoji-btn{
width:42px;
height:42px;
min-width:42px;
max-width:42px;
flex:0 0 42px;
align-self:center;
margin-top:0;
margin-bottom:0;
display:inline-flex;
align-items:center;
justify-content:center;
}
.floating-player #myHubBtn{margin-left:auto;}
.floating-player #floatingProfileBtn img{
width:34px;
height:34px;
display:block;
margin:0;
}
.play-song-card button,
.play-song-card #playNextBtn,
.play-song-card #openQueueBtn{
background:linear-gradient(135deg,rgba(83,95,219,.42),rgba(34,216,255,.22) 48%,rgba(255,77,218,.28));
border:1px solid rgba(157,239,255,.32);
color:#f7fbff;
box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 10px 24px rgba(0,0,0,.22);
}
.play-song-card button:hover,
.play-song-card #playNextBtn:hover,
.play-song-card #openQueueBtn:hover{
background:linear-gradient(135deg,rgba(83,95,219,.54),rgba(34,216,255,.30) 48%,rgba(255,77,218,.38));
border-color:rgba(157,239,255,.48);
}
.floating-player .playlist-disc,
.floating-player #playlistDisc{
width:32px;
height:32px;
min-width:32px;
flex:0 0 32px;
}
.floating-player .playlist-disc svg,
.floating-player #playlistDisc svg{
width:31px;
height:31px;
}
/* Make the seek thumb draggable from the full visible icon, not only the thin bar line. */
.floating-player .progress{
height:22px;
margin-top:-7px;
margin-bottom:-7px;
background:transparent;
border:0;
box-shadow:none;
overflow:visible;
cursor:pointer;
touch-action:none;
}
.floating-player .progress::before{
content:"";
position:absolute;
left:0;
right:0;
top:50%;
height:7px;
transform:translateY(-50%);
border-radius:999px;
background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.055);
box-shadow:inset 0 1px 2px rgba(0,0,0,.28);
pointer-events:none;
}
.floating-player .progress i{
position:absolute;
left:0;
top:50%;
height:7px;
transform:translateY(-50%);
z-index:1;
}
.floating-player .seek-thumb{
width:16px;
height:16px;
left:calc(var(--seek-thumb-left, 0%) - 8px);
z-index:2;
}
.floating-player .seek-preview{bottom:24px;}
@media(max-width:960px){
:root{
--stage-control-size-h:40px;
--stage-history-w:40px;
--stage-control-size-w:218px;
--stage-mini-control-gap:7px;
}
.history-box,.auto-like-box{height:40px;min-height:40px;max-height:40px;}
}
/* v206: only history/autolike 40px, preserve vote-box */
:root{--stage-control-size-h:56px;}
.history-box,.auto-like-box{height:40px;min-height:40px;max-height:40px;bottom:calc(var(--stage-control-bottom) + 56px + 10px);}
@media(max-width:960px){:root{--stage-control-size-h:56px;}.history-box,.auto-like-box{height:40px;min-height:40px;max-height:40px;bottom:calc(var(--stage-control-bottom) + 56px + 10px);}}
/* v209: admin chat delete action + right-click message moderation */
.chat-line .chat-content > p{
padding-right:46px;
}
.chat-line-actions{
position:absolute;
right:0;
bottom:0;
display:flex;
align-items:center;
gap:2px;
height:18px;
}
.chat-line-action,
.chat-line-tag-btn,
.chat-line-delete-btn{
position:relative;
right:auto;
bottom:auto;
width:18px;
height:18px;
display:grid;
place-items:center;
padding:0;
margin:0;
border:0;
border-radius:6px;
background:transparent;
box-shadow:none;
opacity:0;
transform:none;
cursor:pointer;
transition:opacity .14s ease,color .14s ease,background-color .14s ease;
}
.chat-line-action .iconify,
.chat-line-tag-btn .iconify,
.chat-line-delete-btn .iconify{
width:14px;
height:14px;
display:block;
transform:none;
}
.chat-line:hover .chat-line-action,
.chat-line:focus-within .chat-line-action{
opacity:1;
}
.chat-line-delete-btn{
color:#ff4d5e;
}
.chat-line-delete-btn:hover{
color:#ff7a86;
background:rgba(255,77,94,.11);
}
@media (hover:none), (pointer:coarse){
.chat-line-action{opacity:.72;}
}
/* v210: compact avatar popup profile/friend date icons */
.profile-status-popup{display:flex;align-items:center;gap:7px}
.profile-status-popup>span{min-width:0;flex:1 1 auto}
.profile-status-edit-btn.profile-view-popup-icon-btn,
.profile-status-edit-btn.profile-tag-popup-btn{
width:30px;height:30px;flex:0 0 30px;
display:inline-grid;place-items:center;
border:1px solid rgba(157,239,255,.32);border-radius:10px;
background:rgba(157,239,255,.1);color:#9defff;
cursor:pointer;padding:0;line-height:1;
}
.profile-status-edit-btn.profile-view-popup-icon-btn:hover,
.profile-status-edit-btn.profile-tag-popup-btn:hover{background:rgba(157,239,255,.18);filter:brightness(1.12)}
.profile-status-edit-btn.profile-view-popup-icon-btn svg,
.profile-status-edit-btn.profile-tag-popup-btn svg,
.profile-status-edit-btn.profile-view-popup-icon-btn .iconify,
.profile-status-edit-btn.profile-tag-popup-btn .iconify{width:16px;height:16px;display:block}
.profile-joined-popup,
.profile-friends-since-popup{
display:inline-flex;align-items:center;gap:5px;
font-size:11px;color:#c8d6e8;font-weight:800;opacity:.92;margin-top:1px;
}
.profile-joined-popup .iconify,
.profile-friends-since-popup .iconify{width:14px;height:14px;color:#9defff;flex:0 0 14px}
.profile-friends-since-popup[hidden],.public-profile-friends-since[hidden]{display:none}
/* Modern skins panel + Local/Global skin mode */
.skins-page-card{
width:min(920px,calc(100vw - 34px));
border-radius:22px;
padding:22px;
background:linear-gradient(180deg,rgba(18,20,31,.96),rgba(10,12,20,.94));
border:1px solid rgba(255,255,255,.11);
box-shadow:0 24px 70px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.08);
}
.skins-page-card .skins-glow{opacity:.55;filter:none!important;}
.skins-kicker{display:block;margin:0 0 5px;color:rgba(190,199,220,.78);font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.skins-page-card .skins-head h3{font-size:26px;letter-spacing:-.03em;margin:0 0 3px}
.skins-page-card .skins-head p{margin-bottom:14px;color:rgba(223,230,245,.7)}
.skins-mode-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px;border:1px solid rgba(255,255,255,.1);border-radius:16px;background:rgba(255,255,255,.045)}
.skins-mode-toggle{display:inline-flex;gap:4px;padding:4px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(0,0,0,.22)}
.skins-mode-toggle button{height:30px;padding:0 13px;border:0;border-radius:9px;background:transparent;color:rgba(232,238,255,.62);font-size:12px;font-weight:900;cursor:pointer;transition:.16s ease}
.skins-mode-toggle button.active{background:rgba(124,92,255,.28);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.skins-help-btn{width:34px;height:34px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.11);border-radius:12px;background:rgba(255,255,255,.055);color:rgba(232,238,255,.78);cursor:help}
.skins-help-btn:hover{background:rgba(255,255,255,.09);color:#fff}
.skins-mode-hint{color:rgba(223,230,245,.68);font-size:12px;font-weight:700}
.skins-modern-list{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px;padding:14px 2px 8px 0}
.skins-page-card .skin-choice{gap:9px;padding:9px;border-radius:18px;background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.skins-page-card .skin-choice:hover{transform:translateY(-1px);background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18)}
.skins-page-card .skin-choice.selected{border-color:rgba(124,92,255,.68);background:linear-gradient(180deg,rgba(124,92,255,.18),rgba(255,255,255,.045));box-shadow:0 12px 30px rgba(0,0,0,.22),0 0 0 1px rgba(124,92,255,.18) inset}
.skins-page-card .skin-choice img{border-radius:14px;border-color:rgba(255,255,255,.1)}
.skins-page-card .skin-choice span{font-size:12px;color:rgba(239,243,255,.88)}
.skins-page-card .skins-reset-btn{border-radius:11px;background:rgba(255,255,255,.06)}
.skins-footer-note{justify-content:space-between;align-items:center;border-top:1px solid rgba(255,255,255,.08);margin-top:6px}
.skins-footer-note span{color:rgba(223,230,245,.58);font-size:12px;font-weight:700}
@media(max-width:560px){.skins-mode-row{align-items:flex-start}.skins-mode-hint{width:100%}.skins-modern-list{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}.skins-footer-note{justify-content:flex-end}.skins-footer-note span{display:none}}
/* v212: separate local/global skins selections */
#skinsModal .skins-page-card{
width:min(860px,calc(100vw - 34px));
border-radius:22px;
padding:22px;
background:linear-gradient(180deg,rgba(18,22,34,.96),rgba(9,12,20,.94));
border:1px solid rgba(255,255,255,.1);
box-shadow:0 24px 70px rgba(0,0,0,.52),inset 0 1px 0 rgba(255,255,255,.08);
}
#skinsModal .skins-page-card .skins-glow{display:none;}
#skinsModal .skins-title-row{justify-content:space-between;padding-right:42px;}
#skinsModal .skins-mode-row{
display:flex;align-items:center;gap:10px;flex-wrap:wrap;
padding:10px;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);
}
#skinsModal .skins-mode-toggle{border-radius:10px;background:rgba(0,0,0,.24);border:1px solid rgba(255,255,255,.08);padding:3px;}
#skinsModal .skins-mode-toggle button{height:30px;border-radius:8px;padding:0 15px;}
#skinsModal .skins-mode-toggle button.active{background:rgba(83,95,219,.34);box-shadow:inset 0 1px 0 rgba(255,255,255,.1);}
#skinsModal .skins-reset-btn{order:2;height:36px;margin:0;border-radius:10px;background:rgba(255,255,255,.06);color:#eaf1ff;}
#skinsModal .skins-reset-btn:disabled{opacity:.45;cursor:not-allowed;}
#skinsModal .skins-help-btn{order:3;position:relative;width:auto;height:auto;display:inline-grid;place-items:center;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;color:rgba(232,238,255,.8);line-height:1;}
#skinsModal .skins-help-btn:hover,#skinsModal .skins-help-btn:focus-visible{background:transparent;color:#fff;}
#skinsModal .skins-help-btn .iconify{font-size:21px;width:21px;height:21px;display:block;}
#skinsModal .skins-help-btn::after{
content:attr(data-tooltip);position:absolute;left:50%;top:calc(100% + 10px);transform:translate(-50%,-4px) scale(.98);
width:max-content;max-width:300px;padding:8px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.12);
background:rgba(8,8,18,.96);color:#f2f6ff;box-shadow:0 14px 32px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.08);
font-size:11px;font-weight:900;line-height:1.35;text-align:left;white-space:normal;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .14s ease,transform .14s ease,visibility .14s ease;z-index:1001;
}
#skinsModal .skins-help-btn:hover::after,#skinsModal .skins-help-btn:focus-visible::after{opacity:1;visibility:visible;transform:translate(-50%,0) scale(1);}
#skinsModal .skins-mode-hint{order:4;font-size:12px;color:rgba(223,230,245,.68);font-weight:700;}
#skinsModal .skins-mode-notice{margin-top:8px;margin-bottom:8px;padding:10px 12px;border-radius:12px;background:rgba(83,95,219,.1);border:1px solid rgba(83,95,219,.2);color:#cfd8f1;font-size:12px;font-weight:700;line-height:1.4;}
#skinsModal .skins-modern-list{grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:12px;padding-top:14px;}
#skinsModal .skin-choice{border-radius:14px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);box-shadow:none;}
#skinsModal .skin-choice:hover{transform:none;background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.16);}
#skinsModal .skin-choice.selected{background:rgba(83,95,219,.16);border-color:rgba(124,135,255,.62);box-shadow:0 0 0 1px rgba(124,135,255,.16) inset;}
#skinsModal .skin-choice.disabled{opacity:.46;cursor:not-allowed;filter:saturate(.65);}
#skinsModal .skins-modern-list.global-disabled{position:relative;}
#skinsModal .skins-footer-note{border-top:1px solid rgba(255,255,255,.07);}
@media(max-width:560px){#skinsModal .skins-mode-hint{width:100%}#skinsModal .skins-help-btn::after{left:auto;right:0;transform:translate(0,-4px) scale(.98)}#skinsModal .skins-help-btn:hover::after,#skinsModal .skins-help-btn:focus-visible::after{transform:translate(0,0) scale(1)}}
/* v219 temporary avatar spawn-area debug draw tool. Remove this block with the JS debug block after coordinates are collected. */
.avatar-spawn-debug-overlay{
position:absolute;
inset:0;
z-index:999;
width:100%;
height:100%;
pointer-events:none;
}
.avatar-spawn-debug-overlay.is-drawing{
pointer-events:auto;
cursor:crosshair;
}
.avatar-spawn-debug-fill{
fill:rgba(126, 105, 255, .18);
stroke:none;
}
.avatar-spawn-debug-line{
fill:none;
stroke:#8ef5ff;
stroke-width:.35;
vector-effect:non-scaling-stroke;
filter:none!important;
}
.avatar-spawn-debug-guide{
opacity:0;
stroke:#ffd66b;
stroke-width:.28;
stroke-dasharray:1.4 1;
vector-effect:non-scaling-stroke;
filter:none!important;
pointer-events:none;
}
.avatar-spawn-debug-guide.is-visible{
opacity:1;
}
.avatar-spawn-debug-align-label{
fill:#ffd66b;
font-size:3px;
font-weight:900;
text-anchor:middle;
paint-order:stroke;
stroke:#08040d;
stroke-width:.8;
pointer-events:none;
}
.avatar-spawn-debug-points circle{
fill:#fff;
stroke:#8ef5ff;
stroke-width:.25;
vector-effect:non-scaling-stroke;
}
.avatar-spawn-debug-points text{
fill:#fff;
font-size:3px;
font-weight:800;
paint-order:stroke;
stroke:#08040d;
stroke-width:.7;
}
.avatar-spawn-debug-panel{
position:fixed;
left:54px;
top:54px;
z-index:10000;
width:330px;
padding:12px;
border:1px solid rgba(255,255,255,.18);
border-radius:14px;
background:rgba(10,7,18,.92);
box-shadow:0 18px 60px rgba(0,0,0,.5);
color:#fff;
font-size:12px;
backdrop-filter:none!important;
}
.avatar-spawn-debug-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:8px;
}
.avatar-spawn-debug-head strong{
font-size:13px;
}
.avatar-spawn-debug-head button,
.avatar-spawn-debug-actions button{
border:1px solid rgba(255,255,255,.18);
border-radius:9px;
background:rgba(255,255,255,.09);
color:#fff;
padding:6px 9px;
font-size:11px;
font-weight:800;
}
.avatar-spawn-debug-head button{
width:28px;
height:28px;
padding:0;
font-size:18px;
}
.avatar-spawn-debug-panel p{
margin:0 0 10px;
color:#cfc8d8;
line-height:1.4;
}
.avatar-spawn-debug-actions{
display:flex;
flex-wrap:wrap;
gap:6px;
margin-bottom:10px;
}
#avatarSpawnDebugOutput{
width:100%;
height:165px;
resize:vertical;
box-sizing:border-box;
border:1px solid rgba(255,255,255,.16);
border-radius:10px;
background:rgba(0,0,0,.28);
color:#e9faff;
padding:9px;
font:11px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
/* v222: move History into the floating player and make Auto Like a subtle stage assist */
.floating-player .history-box{
position:relative;
right:auto;
bottom:auto;
width:auto;
min-width:0;
max-width:none;
height:auto;
min-height:0;
z-index:2;
flex:0 0 auto;
}
.floating-player .history-btn{
width:auto;
min-width:168px;
max-width:210px;
height:auto;
min-height:0;
display:flex;
align-items:center;
justify-content:flex-start;
gap:11px;
padding:8px 11px;
border:1px solid rgba(255,255,255,.10);
border-radius:16px;
background:rgba(255,255,255,.055);
color:#f5f7ff;
box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
}
.floating-player .history-btn::before{
content:"";
width:32px;
height:32px;
flex:0 0 32px;
border-radius:13px;
border:1px solid rgba(255,255,255,.16);
background:linear-gradient(135deg,rgba(83,95,219,.45),rgba(255,77,218,.22));
box-shadow:0 0 18px rgba(83,95,219,.16);
}
.floating-player .history-btn::after{
content:"History";
display:block;
font-size:12px;
font-weight:900;
letter-spacing:.01em;
color:#f5f7ff;
white-space:nowrap;
}
.floating-player .history-btn svg{
position:absolute;
left:19px;
width:18px;
height:18px;
color:#9defff;
opacity:1;
}
.floating-player .history-btn:hover,
.floating-player .history-box.open .history-btn{
background:rgba(255,255,255,.085);
border-color:rgba(157,239,255,.30);
color:#fff;
box-shadow:inset 0 1px 0 rgba(255,255,255,.11),0 0 22px rgba(90,223,255,.12);
}
.floating-player .history-dropdown{
right:auto;
left:0;
bottom:calc(100% + 14px);
width:360px;
z-index:95;
}
.stage .auto-like-box{
position:absolute;
right:calc(var(--stage-right-controls-gap) + 8px);
bottom:calc(var(--stage-control-bottom) + 72px);
width:auto;
min-width:0;
max-width:none;
height:28px;
min-height:28px;
padding:0 10px;
gap:6px;
justify-content:center;
border-radius:999px;
border:1px solid rgba(255,255,255,.10);
background:rgba(7,8,14,.46);
color:rgba(235,240,255,.76);
box-shadow:none;
opacity:.72;
z-index:36;
}
.stage .auto-like-box:hover,
.stage .auto-like-box.is-on{
opacity:1;
background:rgba(10,12,22,.66);
border-color:rgba(255,255,255,.17);
}
.stage .auto-like-box .auto-like-icon{
width:13px;
height:13px;
flex:0 0 13px;
color:rgba(255,255,255,.46);
}
.stage .auto-like-box.is-on .auto-like-icon{
color:#ff6680;
}
.stage .auto-like-copy{
gap:5px;
}
.stage .auto-like-label{
font-size:10px;
font-weight:800;
color:rgba(255,255,255,.70);
}
.stage .auto-like-status{
height:auto;
min-width:0;
padding:0;
background:transparent;
font-size:9px;
color:rgba(255,255,255,.42);
}
.stage .auto-like-box.is-on .auto-like-status{
color:rgba(255,255,255,.72);
}
@media(max-width:960px){
.floating-player .history-btn{min-width:46px;width:46px;height:46px;padding:0;justify-content:center;border-radius:14px;}
.floating-player .history-btn::before{width:30px;height:30px;flex-basis:30px;}
.floating-player .history-btn::after{content:none;display:none;}
.floating-player .history-btn svg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:17px;height:17px;}
.floating-player .history-dropdown{width:min(330px,92vw);}
.stage .auto-like-box{right:var(--stage-right-controls-gap);bottom:calc(var(--stage-control-bottom) + 68px);}
}
/* v223: History belongs to the floating player, directly before Add to playlist. */
.floating-player .history-box{
position:relative;
right:auto;
bottom:auto;
width:auto;
min-width:0;
max-width:none;
height:auto;
min-height:0;
z-index:75;
display:flex;
align-items:center;
flex:0 0 auto;
}
.floating-player .history-btn,
.floating-player .history-btn.bar-icon{
width:42px;
min-width:42px;
max-width:42px;
height:42px;
min-height:42px;
padding:0;
border-radius:12px;
display:grid;
place-items:center;
gap:0;
border:1px solid rgba(255,255,255,.10);
background:rgba(255,255,255,.06);
color:#dfe7ff;
box-shadow:none;
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
}
.floating-player .history-btn::after{
content:none;
}
.floating-player .history-btn svg{
width:19px;
height:19px;
min-width:19px;
}
.floating-player .history-btn:hover,
.floating-player .history-box.open .history-btn{
background:rgba(83,95,219,.20);
border-color:rgba(157,239,255,.28);
color:#fff;
box-shadow:0 10px 24px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.08);
transform:none;
}
.floating-player .history-dropdown{
position:absolute;
right:0;
bottom:52px;
z-index:120;
}
/* v223: Auto Like is a subtle vote option attached closer to the vote box. */
.stage-wrap .auto-like-box{
right:var(--stage-right-controls-gap);
bottom:calc(var(--stage-control-bottom) + var(--stage-control-size-h) + 5px);
width:128px;
min-width:128px;
max-width:128px;
height:32px;
min-height:32px;
padding:0 10px;
border-radius:10px;
gap:7px;
background:rgba(10,12,22,.56);
border:1px solid rgba(255,255,255,.09);
box-shadow:0 8px 18px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.055);
opacity:.86;
}
.stage-wrap .auto-like-box:hover,
.stage-wrap .auto-like-box.is-on{
opacity:1;
background:rgba(16,19,33,.72);
border-color:rgba(157,239,255,.20);
box-shadow:0 10px 24px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.08);
}
.stage-wrap .auto-like-box .auto-like-icon{
width:14px;
height:14px;
min-width:14px;
}
.stage-wrap .auto-like-copy{
display:flex;
flex-direction:row;
align-items:center;
gap:5px;
}
.stage-wrap .auto-like-label{
font-size:10px;
font-weight:900;
white-space:nowrap;
}
.stage-wrap .auto-like-status{
height:14px;
min-width:24px;
padding:0 5px;
font-size:8px;
border-radius:999px;
}
@media(max-width:960px){
.floating-player .history-btn,
.floating-player .history-btn.bar-icon{
width:38px;
min-width:38px;
max-width:38px;
height:38px;
min-height:38px;
}
.stage-wrap .auto-like-box{
bottom:calc(var(--stage-control-bottom) + var(--stage-control-size-h) + 5px);
width:124px;
min-width:124px;
max-width:124px;
}
}
/* v224: make History match Add to playlist exactly and open above the floating player */
.floating-player .history-box{
position:relative;
display:flex;
align-items:center;
width:42px;
min-width:42px;
height:42px;
flex:0 0 42px;
z-index:125;
}
.floating-player #historyBtn.history-btn,
.floating-player #historyBtn.history-btn.bar-icon{
width:42px;
min-width:42px;
max-width:42px;
height:42px;
min-height:42px;
padding:0;
border-radius:15px;
display:grid;
place-items:center;
gap:0;
background:#ffffff10;
border:1px solid #ffffff1e;
color:#f5f7ff;
font-size:19px;
font-weight:900;
box-shadow:none;
transform:none;
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
}
.floating-player #historyBtn.history-btn::before,
.floating-player #historyBtn.history-btn::after{
content:none;
display:none;
}
.floating-player #historyBtn.history-btn .iconify{
width:21px;
height:21px;
font-size:21px;
display:block;
color:currentColor;
}
.floating-player #historyBtn.history-btn:hover,
.floating-player .history-box.open #historyBtn.history-btn{
background:#ffffff22;
border-color:#7df3ff66;
color:#fff;
box-shadow:0 0 0 3px #ffffff0d,0 0 22px #5adfff33;
transform:none;
}
.floating-player .history-dropdown{
position:absolute;
right:0;
left:auto;
bottom:calc(100% + 12px);
top:auto;
width:360px;
max-width:min(360px, calc(100vw - 24px));
z-index:130;
}
@media(max-width:960px){
.floating-player .history-box{
width:38px;
min-width:38px;
height:38px;
flex-basis:38px;
}
.floating-player #historyBtn.history-btn,
.floating-player #historyBtn.history-btn.bar-icon{
width:38px;
min-width:38px;
max-width:38px;
height:38px;
min-height:38px;
border-radius:15px;
}
.floating-player .history-dropdown{
right:0;
width:min(330px,92vw);
}
}
/* v225: fix floating player history button centering and dropdown position */
.floating-player #historyBox{
position:relative;
right:auto;
bottom:auto;
width:42px;
min-width:42px;
max-width:42px;
height:42px;
min-height:42px;
max-height:42px;
z-index:160;
display:grid;
place-items:center;
flex:0 0 42px;
}
.floating-player #historyBtn{
width:42px;
min-width:42px;
max-width:42px;
height:42px;
min-height:42px;
max-height:42px;
padding:0;
margin:0;
display:grid;
place-items:center;
gap:0;
border-radius:18px;
background:linear-gradient(180deg,#ffffff17,#ffffff0a);
border:1px solid #ffffff26;
box-shadow:none;
color:#f5f7ff;
line-height:1;
transform:none;
}
.floating-player #historyBtn::after{
content:none;
display:none;
}
.floating-player #historyBtn .iconify,
.floating-player #historyBtn svg{
display:block;
width:22px;
height:22px;
min-width:22px;
min-height:22px;
margin:0;
line-height:1;
opacity:1;
}
.floating-player #historyBtn:hover,
.floating-player #historyBox.open #historyBtn{
background:#ffffff22;
border-color:#7df3ff66;
box-shadow:0 0 0 3px #ffffff0d,0 0 22px #5adfff33;
color:#fff;
}
.floating-player #historyDropdown{
position:absolute;
right:0;
bottom:calc(100% + 18px);
z-index:220;
transform:none;
}
@media(max-width:960px){
.floating-player #historyBox{
width:38px;
min-width:38px;
max-width:38px;
height:38px;
min-height:38px;
max-height:38px;
flex-basis:38px;
}
.floating-player #historyBtn{
width:38px;
min-width:38px;
max-width:38px;
height:38px;
min-height:38px;
max-height:38px;
border-radius:16px;
}
.floating-player #historyBtn .iconify,
.floating-player #historyBtn svg{
width:20px;
height:20px;
min-width:20px;
min-height:20px;
}
.floating-player #historyDropdown{
bottom:calc(100% + 16px);
}
}
/* v226: history button icon perfect centering + more dropdown spacing */
.floating-player #historyBtn{
display:flex !important;
align-items:center !important;
justify-content:center !important;
}
.floating-player #historyBtn .iconify,
.floating-player #historyBtn svg{
flex:0 0 auto;
vertical-align:middle;
}
.floating-player #historyDropdown{
bottom:calc(100% + 24px) !important;
}
@media(max-width:960px){
.floating-player #historyDropdown{
bottom:calc(100% + 20px) !important;
}
}
/* v226: true history icon centering + extra dropdown breathing room
Older rules positioned .floating-player .history-btn svg absolutely with left:19px.
Reset both the Iconify wrapper and the generated SVG so centering is controlled only by the button. */
.floating-player #historyBox{
display:flex;
align-items:center;
justify-content:center;
}
.floating-player #historyBtn,
.floating-player #historyBtn.history-btn,
.floating-player #historyBtn.history-btn.bar-icon{
display:flex;
align-items:center;
justify-content:center;
padding:0;
line-height:0;
text-align:center;
}
.floating-player #historyBtn .iconify,
.floating-player #historyBtn > svg,
.floating-player #historyBtn .iconify svg{
position:static !important;
inset:auto !important;
left:auto !important;
top:auto !important;
right:auto !important;
bottom:auto !important;
transform:none !important;
display:block;
width:22px;
height:22px;
min-width:22px;
min-height:22px;
max-width:22px;
max-height:22px;
margin:0 !important;
padding:0 !important;
line-height:0;
vertical-align:middle;
flex:0 0 22px;
}
.floating-player #historyDropdown{
bottom:calc(100% + 28px);
}
@media(max-width:960px){
.floating-player #historyBtn .iconify,
.floating-player #historyBtn > svg,
.floating-player #historyBtn .iconify svg{
width:20px;
height:20px;
min-width:20px;
min-height:20px;
max-width:20px;
max-height:20px;
flex-basis:20px;
}
.floating-player #historyDropdown{
bottom:calc(100% + 24px);
}
}
/* v228: admin queue controls above Join Wait List */
.admin-queue-controls{
position:absolute;
left:var(--stage-card-left, 15%);
bottom:calc(var(--stage-card-bottom, 12.8%) + 62px);
z-index:31;
display:flex;
align-items:center;
gap:8px;
}
.admin-queue-controls[hidden]{display:none!important;}
.admin-queue-action.auto-like-box{
position:relative!important;
left:auto!important;
right:auto!important;
bottom:auto!important;
width:auto!important;
min-width:0!important;
height:38px!important;
padding:0 12px!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
gap:7px!important;
border-radius:14px!important;
white-space:nowrap;
font-size:11px;
font-weight:800;
letter-spacing:.02em;
}
.admin-queue-action.is-disabled,.admin-queue-action:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.7);}
.admin-queue-icon{font-size:18px;line-height:1;display:inline-grid;place-items:center;}
.admin-queue-box{position:relative;}
.admin-queue-dropdown{
position:absolute;
left:0;
bottom:calc(100% + 12px);
width:360px;
max-height:410px;
overflow:auto;
border:1px solid #ffffff2b;
border-radius:18px;
background:linear-gradient(180deg,#171827f2,#0e0d18f5);
box-shadow:0 20px 60px #000c,inset 0 1px 0 #ffffff26;
backdrop-filter:none!important;
padding:10px;
}
.admin-queue-dropdown-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 8px;color:#f6f7ff;}
.admin-queue-dropdown-head b{font-size:13px;}
.admin-queue-dropdown-head small,.chat-admin-queue-tools small{font-size:11px;color:#aeb8c9;}
.admin-queue-list{display:grid;gap:8px;}
.admin-queue-item{
display:grid;
grid-template-columns:14px 24px 42px 1fr auto;
align-items:center;
gap:8px;
border:1px solid #ffffff18;
border-radius:15px;
background:#ffffff0d;
padding:7px;
cursor:grab;
}
.admin-queue-item.dragging{opacity:.55;transform:scale(.985);border-color:#9defff;box-shadow:0 0 26px #5adfff33;}
.admin-queue-drag{color:#aeb8c9;letter-spacing:-3px;font-weight:900;}
.admin-queue-item img{width:42px;height:30px;object-fit:cover;border-radius:9px;background:#0006;}
.admin-queue-info{min-width:0;}
.admin-queue-info b{display:block;font-size:11px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;}
.admin-queue-info small{display:flex;align-items:center;gap:5px;margin-top:3px;font-size:10px;color:#c6cfde;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.admin-queue-info em{font-style:normal;color:#9defff;}
.admin-queue-row-actions{display:flex;align-items:center;gap:5px;}
.admin-queue-row-actions button,.chat-queue-dj-row>button{border-radius:11px;padding:6px 8px;font-size:10px;}
.admin-queue-empty{font-size:12px;margin:6px 2px;}
.chat-admin-queue-list{margin-top:8px;}
.chat-admin-queue-list .admin-queue-item{grid-template-columns:14px 22px 34px 1fr;}
.chat-admin-queue-list .admin-queue-row-actions{grid-column:1 / -1;justify-content:flex-end;border-top:1px solid #ffffff12;padding-top:6px;}
.chat-queue-dj-members{display:grid;gap:8px;margin-top:12px;padding-top:10px;border-top:1px solid #ffffff16;}
.chat-queue-dj-members>b{font-size:12px;color:#eef6ff;}
.chat-queue-dj-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;}
@media(max-width:960px){
.admin-queue-controls{left:var(--stage-edge-gap, 5%);bottom:calc(var(--stage-card-bottom, 12.8%) + 58px);gap:5px;transform:scale(.92);transform-origin:bottom left;}
.admin-queue-action.auto-like-box{height:34px!important;padding:0 9px!important;font-size:10px;}
.admin-queue-dropdown{width:min(350px, calc(100vw - 24px));}
}
/* v229: compact admin queue icons + dashboard-style queue widgets */
.admin-queue-controls{
position:absolute;
left:calc(var(--stage-card-left, 15%) + 330px);
bottom:var(--stage-card-bottom, 12.8%);
z-index:34;
display:flex;
align-items:center;
gap:8px;
}
.admin-queue-controls[hidden]{display:none!important;}
.admin-queue-icon-btn{
width:38px;
height:38px;
border-radius:13px;
display:grid;
place-items:center;
position:relative;
color:#d7def5;
background:rgba(255,255,255,.045);
border:1px solid rgba(255,255,255,.11);
box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 12px 28px rgba(0,0,0,.22);
transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease;
}
.admin-queue-icon-btn:hover,.admin-queue-icon-btn:focus-visible{
background:rgba(83,95,219,.18);
border-color:rgba(157,239,255,.24);
color:#fff;
transform:translateY(-1px);
}
.admin-queue-icon-btn.is-disabled,.admin-queue-icon-btn:disabled{opacity:.42;cursor:not-allowed;filter:grayscale(.7);transform:none;}
.admin-queue-icon-btn .iconify{width:21px;height:21px;font-size:21px;display:block;}
.admin-queue-icon-btn::after{
content:attr(data-tooltip);
position:absolute;
left:50%;
bottom:calc(100% + 9px);
transform:translate(-50%,6px);
min-height:30px;
display:flex;
align-items:center;
padding:0 11px 0 12px;
border-radius:10px;
border:1px solid rgba(255,255,255,.10);
border-left:2px solid rgba(157,239,255,.72);
background:linear-gradient(135deg,rgba(18,20,31,.96),rgba(8,9,16,.94));
color:#f4f7ff;
font-size:11px;
font-weight:900;
letter-spacing:.02em;
line-height:1;
white-space:nowrap;
box-shadow:0 12px 30px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.08);
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
opacity:0;
visibility:hidden;
pointer-events:none;
z-index:1001;
transition:opacity .14s ease,transform .14s ease,visibility .14s ease;
}
.admin-queue-icon-btn:hover::after,.admin-queue-icon-btn:focus-visible::after{opacity:1;visibility:visible;transform:translate(-50%,0);}
.admin-queue-box{position:relative;}
.admin-queue-dropdown{
position:absolute;
right:0;
left:auto;
bottom:calc(100% + 14px);
width:420px;
max-height:min(480px,62vh);
overflow:auto;
border:1px solid rgba(255,255,255,.16);
border-radius:18px;
background:linear-gradient(180deg,rgba(18,10,28,.98),rgba(6,3,13,.98));
box-shadow:0 24px 80px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.06);
padding:10px;
scrollbar-width:thin;
}
.admin-queue-dropdown-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin:0 0 10px;
padding:4px 4px 10px;
border-bottom:1px solid rgba(255,255,255,.08);
color:#f6f7ff;
}
.admin-queue-dropdown-head b,.chat-admin-queue-tools b{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#cbd5ff;}
.admin-queue-dropdown-head small,.chat-admin-queue-tools small{display:block;margin-top:3px;font-size:10px;color:#9aa9bd;font-weight:700;}
.admin-queue-list{display:grid;gap:7px;}
.admin-queue-item{
display:grid;
grid-template-columns:16px 30px 44px minmax(0,1fr) auto;
align-items:center;
gap:10px;
padding:8px;
border-radius:12px;
border:1px solid rgba(255,255,255,.07);
background:rgba(255,255,255,.045);
cursor:grab;
transition:background .15s ease,border-color .15s ease,box-shadow .15s ease,transform .15s ease;
}
.admin-queue-item:hover{background:rgba(255,255,255,.065);border-color:rgba(255,255,255,.13);}
.admin-queue-item.dragging{opacity:.56;transform:scale(.985);border-color:rgba(157,239,255,.5);box-shadow:0 0 26px rgba(90,223,255,.18);}
.admin-queue-drag{color:#728099;letter-spacing:-3px;font-weight:900;font-size:13px;}
.admin-queue-item .queue-pos{width:26px;height:26px;border-radius:9px;background:rgba(83,95,219,.22);border:1px solid rgba(157,239,255,.18);font-size:11px;}
.admin-queue-item img{width:44px;height:34px;object-fit:cover;border-radius:10px;background:#0006;}
.admin-queue-info{min-width:0;}
.admin-queue-info b{display:block;font-size:12px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;}
.admin-queue-info small{display:flex;align-items:center;gap:5px;margin-top:4px;font-size:10px;color:#9aa9bd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.admin-queue-info small span{overflow:hidden;text-overflow:ellipsis;}
.admin-queue-info em{font-style:normal;color:#9defff;}
.admin-queue-row-actions{display:flex;align-items:center;gap:6px;}
.admin-queue-row-btn{
height:28px;
border-radius:9px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:5px;
padding:0 9px;
background:rgba(83,95,219,.22);
border:1px solid rgba(157,239,255,.18);
color:#edf4ff;
font-size:10px;
font-weight:900;
}
.admin-queue-row-btn.danger{background:rgba(255,49,91,.16);border-color:rgba(255,49,91,.32);color:#ffd2dc;}
.admin-queue-row-btn .iconify{width:14px;height:14px;font-size:14px;}
.admin-queue-empty{font-size:12px;margin:8px 4px;color:#9aa9bd;}
.chat-admin-queue-tools{padding:10px 4px 9px;margin-bottom:2px;border-bottom:1px solid rgba(255,255,255,.08);}
.chat-admin-queue-list{margin-top:8px;}
.chat-admin-queue-list .admin-queue-item{grid-template-columns:16px 28px 42px minmax(0,1fr);}
.chat-admin-queue-list .admin-queue-row-actions{grid-column:1 / -1;justify-content:flex-end;border-top:1px solid rgba(255,255,255,.08);padding-top:7px;}
.chat-queue-dj-members{display:none!important;}
@media(max-width:960px){
.admin-queue-controls{left:calc(var(--stage-edge-gap, 5%) + 290px);bottom:var(--stage-card-bottom, 12.8%);gap:6px;transform:none;}
.admin-queue-icon-btn{width:34px;height:34px;border-radius:11px;}
.admin-queue-icon-btn .iconify{width:19px;height:19px;font-size:19px;}
.admin-queue-dropdown{width:min(390px,calc(100vw - 18px));right:-8px;}
.admin-queue-row-actions{grid-column:1 / -1;justify-content:flex-end;border-top:1px solid rgba(255,255,255,.08);padding-top:7px;}
}
/* v230: aligned admin queue icons + cleaner queue rows */
.admin-queue-controls{
left:calc(var(--stage-card-left, 15%) + 202px)!important;
bottom:calc(var(--stage-card-bottom, 12.8%) + 5px)!important;
gap:6px!important;
}
.admin-queue-icon-btn{
width:36px!important;
height:36px!important;
border-radius:12px!important;
}
.admin-queue-dropdown{
width:440px!important;
padding:12px!important;
border-radius:16px!important;
background:linear-gradient(180deg,rgba(16,18,28,.98),rgba(8,8,15,.98))!important;
}
.admin-queue-dropdown-head{
padding:2px 2px 12px!important;
margin-bottom:10px!important;
}
.admin-queue-list{
gap:8px!important;
}
.admin-queue-item{
grid-template-columns:18px 54px minmax(0,1fr) minmax(72px,96px) 66px!important;
gap:9px!important;
min-height:58px!important;
padding:8px 9px!important;
border-radius:14px!important;
background:rgba(255,255,255,.04)!important;
border:1px solid rgba(255,255,255,.08)!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
}
.admin-queue-item:hover{
background:rgba(255,255,255,.065)!important;
border-color:rgba(157,239,255,.18)!important;
}
.admin-queue-drag{
width:18px!important;
height:42px!important;
display:grid!important;
place-items:center!important;
color:#667086!important;
font-size:14px!important;
letter-spacing:-4px!important;
cursor:grab!important;
}
.admin-queue-thumb{
position:relative;
width:54px;
height:40px;
border-radius:11px;
overflow:hidden;
background:rgba(0,0,0,.35);
border:1px solid rgba(255,255,255,.08);
}
.admin-queue-thumb img,
.admin-queue-item img{
width:100%!important;
height:100%!important;
object-fit:cover!important;
border-radius:0!important;
display:block!important;
}
.admin-queue-thumb .queue-pos{
position:absolute!important;
left:5px!important;
bottom:5px!important;
width:auto!important;
min-width:19px!important;
height:18px!important;
padding:0 5px!important;
border-radius:7px!important;
display:grid!important;
place-items:center!important;
background:rgba(6,8,14,.78)!important;
border:1px solid rgba(255,255,255,.14)!important;
color:#fff!important;
font-size:10px!important;
font-weight:900!important;
line-height:1!important;
}
.admin-queue-info{
min-width:0!important;
}
.admin-queue-info b{
font-size:12px!important;
line-height:1.25!important;
letter-spacing:.005em!important;
max-width:100%!important;
}
.admin-queue-info small{
margin-top:5px!important;
gap:6px!important;
color:#9ca9bc!important;
min-width:0!important;
}
.admin-queue-info small span{
min-width:0!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
}
.admin-queue-member{
min-width:0;
justify-self:stretch;
height:28px;
display:flex;
align-items:center;
justify-content:center;
padding:0 9px;
border-radius:10px;
background:rgba(83,95,219,.13);
border:1px solid rgba(157,239,255,.12);
color:#cfd8ff;
font-size:10px;
font-weight:900;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.admin-queue-row-actions{
justify-content:flex-end!important;
gap:6px!important;
}
.admin-queue-row-btn{
width:30px!important;
height:30px!important;
padding:0!important;
border-radius:10px!important;
display:grid!important;
place-items:center!important;
}
.admin-queue-row-btn .iconify{
width:16px!important;
height:16px!important;
font-size:16px!important;
}
.chat-admin-queue-tools{
padding:4px 2px 12px!important;
margin:0 0 10px!important;
}
.chat-admin-queue-list{
margin-top:0!important;
}
.chat-admin-queue-list .admin-queue-item{
grid-template-columns:18px 54px minmax(0,1fr) minmax(66px,90px) 66px!important;
}
.chat-admin-queue-list .admin-queue-row-actions{
grid-column:auto!important;
border-top:0!important;
padding-top:0!important;
}
.chat-queue-dj-members{display:none!important;}
@media(max-width:960px){
.admin-queue-controls{
left:calc(var(--stage-edge-gap, 5%) + 202px)!important;
bottom:calc(var(--stage-card-bottom, 12.8%) + 5px)!important;
gap:5px!important;
}
.admin-queue-icon-btn{width:34px!important;height:34px!important;}
.admin-queue-dropdown{width:min(410px,calc(100vw - 18px))!important;right:-6px!important;}
.admin-queue-item,
.chat-admin-queue-list .admin-queue-item{
grid-template-columns:18px 52px minmax(0,1fr) 62px!important;
}
.admin-queue-member{display:none!important;}
.admin-queue-row-actions{grid-column:auto!important;border-top:0!important;padding-top:0!important;}
}
/* v231: admin queue controls aligned with vote-box + compact readable queue rows */
.admin-queue-controls{
left:auto!important;
right:calc(var(--stage-right-controls-gap, 26px) + 230px + 10px)!important;
bottom:var(--stage-card-bottom, 12.8%)!important;
height:54px!important;
display:flex!important;
align-items:center!important;
gap:6px!important;
transform:none!important;
}
.admin-queue-icon-btn{
width:34px!important;
height:34px!important;
border-radius:11px!important;
}
.admin-queue-icon-btn .iconify{
width:18px!important;
height:18px!important;
font-size:18px!important;
}
.admin-queue-dropdown{
width:360px!important;
max-height:min(360px,58vh)!important;
padding:9px!important;
border-radius:14px!important;
right:0!important;
bottom:calc(100% + 10px)!important;
}
.admin-queue-dropdown-head{
padding:1px 2px 8px!important;
margin-bottom:7px!important;
}
.admin-queue-dropdown-head b,
.chat-admin-queue-tools b{
font-size:11px!important;
}
.admin-queue-dropdown-head small,
.chat-admin-queue-tools small{
font-size:9.5px!important;
}
.admin-queue-list{
gap:6px!important;
}
.admin-queue-item,
.chat-admin-queue-list .admin-queue-item{
grid-template-columns:16px 44px minmax(0,1fr) 34px!important;
min-height:46px!important;
padding:6px 7px!important;
gap:7px!important;
border-radius:12px!important;
}
.admin-queue-drag{
width:16px!important;
height:34px!important;
font-size:12px!important;
}
.admin-queue-thumb{
width:44px!important;
height:32px!important;
border-radius:9px!important;
}
.admin-queue-thumb .queue-pos{
left:4px!important;
bottom:4px!important;
min-width:17px!important;
height:16px!important;
padding:0 4px!important;
border-radius:6px!important;
font-size:9px!important;
}
.admin-queue-info b{
display:block!important;
visibility:visible!important;
opacity:1!important;
color:#fff!important;
font-size:11px!important;
line-height:1.18!important;
max-width:100%!important;
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
}
.admin-queue-info small{
display:flex!important;
visibility:visible!important;
opacity:1!important;
margin-top:4px!important;
color:#aeb8cc!important;
font-size:9.5px!important;
line-height:1!important;
min-width:0!important;
}
.admin-queue-info small span{
display:block!important;
min-width:0!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
white-space:nowrap!important;
}
.admin-queue-member{
display:none!important;
}
.admin-queue-row-actions{
justify-content:flex-end!important;
gap:4px!important;
border-top:0!important;
padding-top:0!important;
grid-column:auto!important;
}
.admin-queue-row-btn{
width:28px!important;
height:28px!important;
border-radius:9px!important;
}
.admin-queue-row-btn .iconify{
width:14px!important;
height:14px!important;
font-size:14px!important;
}
.chat-admin-queue-tools{
padding:3px 2px 8px!important;
margin:0 0 7px!important;
}
.chat-admin-queue-list .admin-queue-item{
grid-template-columns:16px 46px minmax(0,1fr) 64px!important;
}
.chat-admin-queue-list .admin-queue-row-actions{
display:flex!important;
grid-column:auto!important;
border-top:0!important;
padding-top:0!important;
}
.chat-admin-queue-list .admin-queue-info b,
.chat-admin-queue-list .admin-queue-info small{
display:flex!important;
}
@media(max-width:960px){
.admin-queue-controls{
right:calc(var(--stage-edge-gap, 26px) + 230px + 8px)!important;
bottom:var(--stage-card-bottom, 12.8%)!important;
height:54px!important;
gap:5px!important;
}
.admin-queue-dropdown{
width:min(350px,calc(100vw - 18px))!important;
right:-2px!important;
}
.admin-queue-icon-btn{width:32px!important;height:32px!important;}
}
/* v232: queue avatars inline-sized + admin queue icons directly after play-song-card */
.admin-queue-controls{
left:calc(var(--stage-card-left, 15%) + 230px + 8px)!important;
right:auto!important;
bottom:var(--stage-card-bottom, 12.8%)!important;
height:54px!important;
display:flex!important;
align-items:center!important;
gap:6px!important;
transform:none!important;
}
.admin-queue-controls[hidden]{display:none!important;}
.admin-queue-dropdown{
left:0!important;
right:auto!important;
bottom:calc(100% + 10px)!important;
}
.admin-queue-info small .tiny-avatar,
.admin-queue-info small img.avatar-img.tiny-avatar,
.queue-item small .tiny-avatar,
.queue-item small img.avatar-img.tiny-avatar,
.chat-admin-queue-list .admin-queue-info small .tiny-avatar,
.chat-admin-queue-list .admin-queue-info small img.avatar-img.tiny-avatar{
width:13px!important;
height:13px!important;
min-width:13px!important;
max-width:13px!important;
min-height:13px!important;
max-height:13px!important;
border-radius:50%!important;
object-fit:cover!important;
object-position:center!important;
transform:none!important;
margin:0 4px 0 0!important;
padding:0!important;
display:inline-block!important;
vertical-align:middle!important;
background:rgba(255,255,255,.10)!important;
border:1px solid rgba(255,255,255,.16)!important;
filter:none!important;
}
.admin-queue-info small,
.queue-item small{
align-items:center!important;
}
@media(max-width:960px){
.admin-queue-controls{
left:calc(var(--stage-card-left, 5%) + 230px + 7px)!important;
right:auto!important;
bottom:var(--stage-card-bottom, 12.8%)!important;
}
.admin-queue-dropdown{
left:0!important;
right:auto!important;
}
}
/* v233: admin queue controls are now inside play-song-card, directly after openQueueBtn */
.play-song-card{
width:344px!important;
max-width:344px!important;
overflow:visible!important;
gap:6px!important;
justify-content:flex-start!important;
}
.play-song-card #playNextBtn{
flex:1 1 118px!important;
min-width:112px!important;
}
.play-song-card #openQueueBtn{
flex:0 0 74px!important;
max-width:74px!important;
}
.play-song-card .admin-queue-controls{
position:static!important;
left:auto!important;
right:auto!important;
bottom:auto!important;
height:auto!important;
display:flex!important;
align-items:center!important;
gap:5px!important;
transform:none!important;
z-index:4!important;
flex:0 0 auto!important;
}
.play-song-card .admin-queue-controls[hidden]{display:none!important;}
.play-song-card .admin-queue-box{position:relative!important;display:flex!important;align-items:center!important;}
.play-song-card .admin-queue-icon-btn{
width:30px!important;
height:30px!important;
min-width:30px!important;
max-width:30px!important;
min-height:30px!important;
max-height:30px!important;
aspect-ratio:1/1!important;
padding:0!important;
flex:0 0 30px!important;
border-radius:10px!important;
}
.play-song-card .admin-queue-icon-btn .iconify{
width:18px!important;
height:18px!important;
font-size:18px!important;
}
.play-song-card .admin-queue-dropdown{
right:0!important;
left:auto!important;
bottom:calc(100% + 14px)!important;
width:390px!important;
max-width:calc(100vw - 18px)!important;
z-index:1005!important;
}
.admin-queue-row-actions{
display:flex!important;
align-items:center!important;
justify-content:flex-end!important;
gap:5px!important;
flex:0 0 auto!important;
min-width:max-content!important;
}
.admin-queue-row-btn,
.admin-queue-row-actions button{
width:30px!important;
height:30px!important;
min-width:30px!important;
max-width:30px!important;
min-height:30px!important;
max-height:30px!important;
aspect-ratio:1/1!important;
padding:0!important;
display:grid!important;
place-items:center!important;
flex:0 0 30px!important;
border-radius:10px!important;
line-height:1!important;
}
.admin-queue-row-btn .iconify,
.admin-queue-row-actions button .iconify{
width:15px!important;
height:15px!important;
font-size:15px!important;
}
@media(max-width:960px){
.play-song-card{width:326px!important;max-width:326px!important;}
.play-song-card #playNextBtn{min-width:106px!important;font-size:9px!important;}
.play-song-card #openQueueBtn{flex-basis:70px!important;max-width:70px!important;font-size:9px!important;}
.play-song-card .admin-queue-icon-btn{width:28px!important;height:28px!important;min-width:28px!important;max-width:28px!important;flex-basis:28px!important;}
.play-song-card .admin-queue-dropdown{right:-2px!important;width:350px!important;}
}
/* v234: wider play card, contained dropdown actions, read-only queue for normal users */
.play-song-card{
width:392px!important;
max-width:392px!important;
height:50px!important;
padding:8px 9px!important;
gap:7px!important;
display:flex!important;
align-items:center!important;
overflow:visible!important;
}
.play-song-card #playNextBtn{
flex:1 1 132px!important;
min-width:128px!important;
max-width:none!important;
}
.play-song-card #openQueueBtn{
flex:0 0 88px!important;
max-width:88px!important;
}
.play-song-card .admin-queue-controls{
flex:0 0 auto!important;
gap:6px!important;
min-width:108px!important;
}
.play-song-card .admin-queue-icon-btn{
width:32px!important;
height:32px!important;
min-width:32px!important;
max-width:32px!important;
min-height:32px!important;
max-height:32px!important;
flex:0 0 32px!important;
aspect-ratio:1/1!important;
}
.play-song-card .admin-queue-dropdown{
width:370px!important;
max-width:min(370px, calc(100vw - 18px))!important;
overflow-x:hidden!important;
box-sizing:border-box!important;
}
.admin-queue-item,
.chat-admin-queue-list .admin-queue-item{
box-sizing:border-box!important;
width:100%!important;
max-width:100%!important;
min-width:0!important;
overflow:hidden!important;
}
.admin-queue-item--dropdown{
grid-template-columns:14px 40px minmax(0,1fr) 64px!important;
gap:6px!important;
padding:6px!important;
}
.admin-queue-item--dropdown .admin-queue-row-actions{
width:64px!important;
min-width:64px!important;
max-width:64px!important;
justify-content:flex-end!important;
gap:4px!important;
overflow:hidden!important;
}
.admin-queue-item--dropdown .admin-queue-row-btn{
width:28px!important;
height:28px!important;
min-width:28px!important;
max-width:28px!important;
min-height:28px!important;
max-height:28px!important;
flex:0 0 28px!important;
aspect-ratio:1/1!important;
}
.admin-queue-info{min-width:0!important;overflow:hidden!important;}
.admin-queue-thumb{width:40px!important;height:30px!important;min-width:40px!important;}
.admin-queue-item--readonly{
cursor:default!important;
}
.admin-queue-item--readonly .admin-queue-drag{
cursor:default!important;
letter-spacing:0!important;
display:grid!important;
place-items:center!important;
color:#9defff!important;
font-size:10px!important;
font-weight:900!important;
}
.chat-admin-queue-list--readonly .admin-queue-item{
grid-template-columns:18px 42px minmax(0,1fr)!important;
}
.chat-admin-queue-list--readonly .admin-queue-row-actions{display:none!important;}
.chat-admin-queue-list--readonly .admin-queue-info b{display:block!important;}
.chat-admin-queue-list--readonly .admin-queue-info small{display:flex!important;}
@media(max-width:960px){
.play-song-card{width:360px!important;max-width:calc(100vw - 26px)!important;}
.play-song-card #playNextBtn{min-width:116px!important;}
.play-song-card #openQueueBtn{flex-basis:78px!important;max-width:78px!important;}
.play-song-card .admin-queue-controls{min-width:96px!important;gap:4px!important;}
.play-song-card .admin-queue-icon-btn{width:29px!important;height:29px!important;min-width:29px!important;max-width:29px!important;flex-basis:29px!important;}
.play-song-card .admin-queue-dropdown{width:min(350px, calc(100vw - 18px))!important;}
}
/* v235: dynamic play card sizing + stable queue rows/no horizontal overflow */
.play-song-card{
width:max-content!important;
max-width:min(560px, calc(100% - 32px))!important;
height:auto!important;
min-height:50px!important;
box-sizing:border-box!important;
display:inline-flex!important;
align-items:center!important;
justify-content:flex-start!important;
flex-wrap:nowrap!important;
gap:7px!important;
padding:8px 10px!important;
overflow:visible!important;
}
.play-song-card #playNextBtn{
flex:0 1 auto!important;
min-width:max-content!important;
max-width:none!important;
padding-left:12px!important;
padding-right:12px!important;
}
.play-song-card #openQueueBtn{
flex:0 0 auto!important;
width:auto!important;
min-width:max-content!important;
max-width:none!important;
padding-left:10px!important;
padding-right:10px!important;
}
.play-song-card .admin-queue-controls{
position:static!important;
display:inline-flex!important;
align-items:center!important;
flex:0 0 auto!important;
min-width:0!important;
width:auto!important;
height:auto!important;
gap:6px!important;
}
.play-song-card .admin-queue-controls[hidden]{display:none!important;}
.play-song-card .admin-queue-icon-btn{
width:32px!important;
height:32px!important;
min-width:32px!important;
max-width:32px!important;
flex:0 0 32px!important;
aspect-ratio:1/1!important;
box-sizing:border-box!important;
}
.play-song-card .admin-queue-dropdown{
width:min(360px, calc(100vw - 18px))!important;
max-width:min(360px, calc(100vw - 18px))!important;
overflow-x:hidden!important;
box-sizing:border-box!important;
}
.admin-queue-dropdown *{box-sizing:border-box!important;}
.admin-queue-list{min-width:0!important;max-width:100%!important;overflow:hidden!important;}
.admin-queue-item--dropdown{
grid-template-columns:14px 36px minmax(0,1fr) 60px!important;
gap:6px!important;
padding:6px!important;
width:100%!important;
max-width:100%!important;
overflow:hidden!important;
}
.admin-queue-item--dropdown .admin-queue-member{display:none!important;}
.admin-queue-item--dropdown .admin-queue-thumb{width:36px!important;height:28px!important;min-width:36px!important;overflow:hidden!important;}
.admin-queue-item--dropdown .admin-queue-thumb img{width:36px!important;height:28px!important;display:block!important;}
.admin-queue-item--dropdown .admin-queue-row-actions{
width:60px!important;
min-width:60px!important;
max-width:60px!important;
display:flex!important;
justify-content:flex-end!important;
gap:4px!important;
overflow:hidden!important;
}
.admin-queue-item--dropdown .admin-queue-row-btn{
width:28px!important;
height:28px!important;
min-width:28px!important;
max-width:28px!important;
flex:0 0 28px!important;
padding:0!important;
aspect-ratio:1/1!important;
}
.chat-admin-queue-list .admin-queue-item{
grid-template-columns:16px 38px minmax(0,1fr) auto!important;
gap:7px!important;
padding:7px!important;
}
.chat-admin-queue-list .admin-queue-thumb{width:38px!important;height:28px!important;min-width:38px!important;}
.chat-admin-queue-list .admin-queue-thumb img{width:38px!important;height:28px!important;display:block!important;}
.chat-admin-queue-list .admin-queue-member{display:none!important;}
.chat-admin-queue-list--readonly .admin-queue-item{
grid-template-columns:18px 38px minmax(0,1fr)!important;
cursor:default!important;
}
.chat-admin-queue-list--readonly .admin-queue-drag{letter-spacing:0!important;}
@media(max-width:960px){
.play-song-card{
min-width:0!important;
max-width:calc(100vw - 26px)!important;
flex-wrap:wrap!important;
}
.play-song-card #playNextBtn,
.play-song-card #openQueueBtn{min-width:auto!important;}
}
/* v236: dynamic play-song-card width without fixed 392px minimum + read-only queue cleanup */
.play-song-card{
min-width:0!important;
width:max-content!important;
}
.admin-queue-drag--readonly{
color:transparent!important;
font-size:0!important;
}
.chat-admin-queue-list--readonly .admin-queue-item{
grid-template-columns:0 38px minmax(0,1fr)!important;
}
.chat-admin-queue-list--readonly .admin-queue-drag--readonly{
width:0!important;
min-width:0!important;
padding:0!important;
overflow:hidden!important;
}
/* v238: exact playback-preview queue + reliable admin/DJ action tooltips */
.play-song-card .admin-queue-icon-btn{
position:relative!important;
overflow:visible!important;
isolation:isolate!important;
}
.play-song-card .admin-queue-icon-btn::after{
z-index:10020!important;
}
.play-song-card .admin-queue-icon-btn[hidden],
.play-song-card .admin-queue-box[hidden]{
display:none!important;
}
.play-song-card .admin-queue-controls:not([hidden]){
display:inline-flex!important;
}
.play-song-card .admin-queue-controls:has(.admin-queue-icon-btn:not([hidden])){
gap:6px!important;
}
/* v242 performance: avoid expensive compositor effects around the player. */
.panel,.play-song-card,.dj-now-card,.vote-box,.menu-drawer,.chat-panel,.notifications-dropdown,.admin-dropdown,.room-settings-modal,.skins-modal,.avatars-modal,.player-overlay,.empty-player-state{
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
}
.stage,.person,.dj-gif,.dj-avatar,.avatar-img,.screen-frame,.playlist-disc,.vote-icon,.grab-icon{
filter:none!important;
}
/* v245: requested chat/icon rail/play-next/autolike layout changes */
.icon-rail{
justify-content:flex-start!important;
}
.icon-rail .rail-bottom-actions{
margin-top:auto!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
gap:8px!important;
width:100%!important;
}
.icon-rail .rail-bottom-actions .rail-btn{
flex:0 0 auto!important;
}
.play-song-card{
display:flex!important;
flex-direction:column!important;
align-items:stretch!important;
justify-content:flex-start!important;
width:max-content!important;
max-width:min(560px, calc(100vw - 26px))!important;
min-height:0!important;
gap:7px!important;
padding:8px!important;
}
.play-song-card #playNextBtn{
width:100%!important;
min-width:0!important;
max-width:none!important;
flex:0 0 auto!important;
height:38px!important;
min-height:38px!important;
justify-content:center!important;
}
.play-song-card .play-song-actions-row{
display:flex!important;
align-items:center!important;
justify-content:flex-start!important;
gap:6px!important;
width:100%!important;
min-width:0!important;
}
.play-song-card #openQueueBtn{
flex:1 1 auto!important;
width:auto!important;
min-width:118px!important;
max-width:none!important;
height:34px!important;
}
.play-song-card .admin-queue-controls{
position:static!important;
display:inline-flex!important;
align-items:center!important;
flex:0 0 auto!important;
width:auto!important;
min-width:0!important;
height:34px!important;
gap:6px!important;
}
.play-song-card .admin-queue-controls[hidden]{display:none!important;}
.play-song-card .admin-queue-icon-btn{
width:34px!important;
height:34px!important;
min-width:34px!important;
max-width:34px!important;
flex:0 0 34px!important;
}
.vote-box .like{
position:relative!important;
overflow:visible!important;
}
.auto-like-box{
display:none!important;
}
.auto-like-hover-card{
position:absolute!important;
right:50%!important;
bottom:calc(100% + 10px)!important;
transform:translateX(50%) translateY(5px)!important;
min-width:104px!important;
padding:9px 10px!important;
border-radius:12px!important;
border:1px solid rgba(255,255,255,.14)!important;
background:rgba(10,12,22,.96)!important;
box-shadow:0 12px 28px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.08)!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
gap:6px!important;
color:#fff!important;
opacity:0!important;
visibility:hidden!important;
pointer-events:none!important;
z-index:90!important;
transition:opacity .14s ease, transform .14s ease, visibility .14s ease!important;
}
.vote-box .like:hover .auto-like-hover-card,
.vote-box .like:focus-within .auto-like-hover-card,
.auto-like-hover-card:hover{
opacity:1!important;
visibility:visible!important;
pointer-events:auto!important;
transform:translateX(50%) translateY(0)!important;
}
.auto-like-hover-card::after{
content:"";
position:absolute;
right:50%;
bottom:-5px;
width:10px;
height:10px;
transform:translateX(50%) rotate(45deg);
background:rgba(10,12,22,.96);
border-right:1px solid rgba(255,255,255,.12);
border-bottom:1px solid rgba(255,255,255,.12);
}
.auto-like-hover-card .auto-like-label{
font-size:11px!important;
font-weight:900!important;
line-height:1!important;
color:rgba(255,255,255,.84)!important;
text-transform:none!important;
}
.auto-like-toggle{
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
gap:5px!important;
min-height:20px!important;
}
.auto-like-toggle-icon{
width:24px!important;
height:24px!important;
font-size:24px!important;
line-height:1!important;
}
.auto-like-toggle-icon.auto-like-on{color:#22c55e!important;}
.auto-like-toggle-icon.auto-like-off{color:#ef4444!important;}
.auto-like-hover-card .auto-like-status{
font-size:9px!important;
font-weight:900!important;
min-width:20px!important;
padding:0!important;
background:transparent!important;
color:rgba(255,255,255,.72)!important;
}
@media(max-width:960px){
.play-song-card{max-width:calc(100vw - 26px)!important;}
.play-song-card .play-song-actions-row{gap:5px!important;}
.play-song-card .admin-queue-icon-btn{width:31px!important;height:31px!important;min-width:31px!important;max-width:31px!important;flex-basis:31px!important;}
}
/* v246: refine autolike popup, green play-next, and public skip tooltip */
.play-song-card #playNextBtn{
background:linear-gradient(135deg,#19c37d,#10b981 48%,#34d399)!important;
border-color:rgba(134,239,172,.64)!important;
color:#fff!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 10px 24px rgba(16,185,129,.22)!important;
}
.play-song-card #playNextBtn:hover{
background:linear-gradient(135deg,#22c55e,#10b981 48%,#6ee7b7)!important;
border-color:rgba(187,247,208,.82)!important;
}
.auto-like-hover-card{
bottom:calc(100% + 4px)!important;
min-width:auto!important;
padding:8px 9px!important;
flex-direction:row!important;
gap:7px!important;
cursor:default!important;
}
.auto-like-hover-card::before{
content:"";
position:absolute;
left:0;
right:0;
bottom:-12px;
height:14px;
background:transparent;
}
.auto-like-hover-card .auto-like-label{
white-space:nowrap!important;
}
.auto-like-toggle{
width:26px!important;
min-width:26px!important;
height:24px!important;
gap:0!important;
cursor:pointer!important;
}
.auto-like-hover-card .auto-like-status{display:none!important;}
#skipBtn.is-disabled{opacity:.72!important;cursor:not-allowed!important;}
/* v247: requested polish - single vertical autolike icon, transparent green play-next, higher tooltips */
.auto-like-hover-card{
bottom:calc(100% + 12px)!important;
min-width:92px!important;
padding:10px 10px 9px!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
gap:7px!important;
}
.auto-like-hover-card::before{
bottom:-18px!important;
height:20px!important;
}
.auto-like-hover-card .auto-like-label{
display:block!important;
font-size:12px!important;
line-height:1!important;
text-align:center!important;
}
.auto-like-toggle{
display:grid!important;
place-items:center!important;
width:44px!important;
min-width:44px!important;
height:34px!important;
min-height:34px!important;
padding:0!important;
margin:0!important;
}
.auto-like-toggle-icon{
width:38px!important;
height:38px!important;
font-size:38px!important;
line-height:1!important;
}
.auto-like-toggle-icon[hidden]{display:none!important;}
.auto-like-toggle-icon.auto-like-on:not(.active),
.auto-like-toggle-icon.auto-like-off:not(.active){display:none!important;}
.auto-like-toggle-icon.auto-like-on.active,
.auto-like-toggle-icon.auto-like-off.active{display:block!important;}
.play-song-card #playNextBtn{
background:linear-gradient(135deg,rgba(34,197,94,.22),rgba(16,185,129,.30) 48%,rgba(110,231,183,.20))!important;
border-color:rgba(134,239,172,.42)!important;
color:#ecfff5!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 10px 24px rgba(16,185,129,.10)!important;
}
.play-song-card #playNextBtn:hover{
background:linear-gradient(135deg,rgba(34,197,94,.32),rgba(16,185,129,.42) 48%,rgba(110,231,183,.30))!important;
border-color:rgba(187,247,208,.62)!important;
}
.queue-eta-tooltip{margin-top:-24px!important;z-index:10030!important;}
.play-song-card .admin-queue-icon-btn::after{
bottom:calc(100% + 22px)!important;
z-index:10030!important;
}
.play-song-card .admin-queue-icon-btn:hover::after,
.play-song-card .admin-queue-icon-btn:focus-visible::after{
transform:translate(-50%,-4px)!important;
}
/* v248: autolike icon has no extra pill; play-card skip stays visible for everyone */
.auto-like-hover-card .auto-like-toggle{
background:transparent!important;
border:0!important;
box-shadow:none!important;
border-radius:0!important;
outline:0!important;
width:auto!important;
min-width:0!important;
height:auto!important;
min-height:0!important;
padding:0!important;
}
.auto-like-hover-card .auto-like-toggle::before,
.auto-like-hover-card .auto-like-toggle::after{
content:none!important;
display:none!important;
}
.auto-like-hover-card .auto-like-toggle-icon{
background:transparent!important;
border:0!important;
box-shadow:none!important;
border-radius:0!important;
}
.play-song-card #adminSkipSongBtn[disabled],
.play-song-card #adminSkipSongBtn.is-disabled{
opacity:.78!important;
cursor:not-allowed!important;
filter:none!important;
pointer-events:auto!important;
}
.play-song-card #adminSkipSongBtn[disabled]:hover,
.play-song-card #adminSkipSongBtn.is-disabled:hover{
background:rgba(255,255,255,.055)!important;
border-color:rgba(255,255,255,.16)!important;
color:#d7def5!important;
transform:none!important;
}
/* v249: keep admin queue dropdown inside browser view and match vote box height to play card */
.play-song-card{
--play-card-final-height:95px;
}
.vote-box{
height:var(--play-card-final-height)!important;
min-height:var(--play-card-final-height)!important;
box-sizing:border-box!important;
}
.play-song-card .admin-queue-dropdown{
position:fixed!important;
right:auto!important;
left:auto!important;
bottom:auto!important;
width:min(350px, calc(100vw - 18px))!important;
max-height:min(420px, calc(100vh - 18px))!important;
z-index:10080!important;
}
/* v250: force vote-box to exactly match play-song-card height and keep skip tooltip normal */
.play-song-card,
.vote-box{
height:95px!important;
min-height:95px!important;
max-height:95px!important;
box-sizing:border-box!important;
}
.vote-box{
align-items:center!important;
}
.play-song-card #adminSkipSongBtn.is-disabled,
.play-song-card #adminSkipSongBtn[aria-disabled="true"]{
opacity:1!important;
filter:none!important;
cursor:pointer!important;
}
.play-song-card #adminSkipSongBtn.is-disabled::after,
.play-song-card #adminSkipSongBtn[aria-disabled="true"]::after{
opacity:1!important;
filter:none!important;
color:#fff!important;
}
/* v251: autolike popup should look active/clickable, not disabled/greyed */
.auto-like-hover-card,
.auto-like-hover-card *{
opacity:1!important;
filter:none!important;
cursor:default!important;
}
.auto-like-hover-card .auto-like-toggle,
.auto-like-hover-card .auto-like-toggle-icon{
cursor:pointer!important;
pointer-events:auto!important;
}
.auto-like-hover-card .auto-like-label{
color:#fff!important;
}
.auto-like-hover-card .auto-like-toggle-icon.auto-like-off{
color:#ef4444!important;
}
.auto-like-hover-card .auto-like-toggle-icon.auto-like-on{
color:#22c55e!important;
}
.auto-like-hover-card[aria-disabled="true"],
.auto-like-hover-card.is-disabled,
.auto-like-hover-card.disabled{
opacity:1!important;
filter:none!important;
pointer-events:auto!important;
}
/* v252: keep Autolike popup active in no-DJ/own-DJ states and place it clearly above vote-box */
.vote-box .like.is-disabled .auto-like-hover-card,
.vote-box .like[aria-disabled="true"] .auto-like-hover-card,
.vote-box .like.is-disabled .auto-like-hover-card *,
.vote-box .like[aria-disabled="true"] .auto-like-hover-card *{
opacity:1!important;
filter:none!important;
color:inherit!important;
}
.vote-box .like.is-disabled .auto-like-hover-card,
.vote-box .like[aria-disabled="true"] .auto-like-hover-card{
pointer-events:auto!important;
cursor:default!important;
background:rgba(10,12,22,.98)!important;
border-color:rgba(255,255,255,.18)!important;
}
.vote-box .like.is-disabled .auto-like-label,
.vote-box .like[aria-disabled="true"] .auto-like-label{
color:#fff!important;
}
.vote-box .like.is-disabled .auto-like-toggle-icon.auto-like-off,
.vote-box .like[aria-disabled="true"] .auto-like-toggle-icon.auto-like-off{
color:#ef4444!important;
}
.vote-box .like.is-disabled .auto-like-toggle-icon.auto-like-on,
.vote-box .like[aria-disabled="true"] .auto-like-toggle-icon.auto-like-on{
color:#22c55e!important;
}
.auto-like-hover-card{
bottom:calc(100% + 30px)!important;
z-index:10090!important;
}
.auto-like-hover-card::before{
bottom:-36px!important;
height:38px!important;
}
.auto-like-hover-card::after{
bottom:-5px!important;
}
/* v253: Autolike popup must never inherit the disabled/greyed state from Like button */
.vote-box #likeBtn.is-disabled,
.vote-box #likeBtn[aria-disabled="true"]{
opacity:1!important;
filter:none!important;
cursor:pointer!important;
}
.vote-box #likeBtn.is-disabled > .vote-icon,
.vote-box #likeBtn[aria-disabled="true"] > .vote-icon,
.vote-box #likeBtn.is-disabled > #likeCount,
.vote-box #likeBtn[aria-disabled="true"] > #likeCount{
opacity:.38!important;
filter:grayscale(.25)!important;
}
.vote-box #likeBtn.is-disabled .auto-like-hover-card,
.vote-box #likeBtn[aria-disabled="true"] .auto-like-hover-card,
.vote-box #likeBtn.is-disabled .auto-like-hover-card *,
.vote-box #likeBtn[aria-disabled="true"] .auto-like-hover-card *{
opacity:1!important;
filter:none!important;
cursor:default!important;
}
.vote-box #likeBtn.is-disabled .auto-like-hover-card .auto-like-toggle,
.vote-box #likeBtn[aria-disabled="true"] .auto-like-hover-card .auto-like-toggle,
.vote-box #likeBtn.is-disabled .auto-like-hover-card .auto-like-toggle-icon,
.vote-box #likeBtn[aria-disabled="true"] .auto-like-hover-card .auto-like-toggle-icon{
cursor:pointer!important;
pointer-events:auto!important;
}
.vote-box #likeBtn.is-disabled .auto-like-hover-card .auto-like-label,
.vote-box #likeBtn[aria-disabled="true"] .auto-like-hover-card .auto-like-label{
color:#fff!important;
}
.vote-box #likeBtn.is-disabled .auto-like-hover-card .auto-like-off,
.vote-box #likeBtn[aria-disabled="true"] .auto-like-hover-card .auto-like-off{
color:#ef4444!important;
}
.vote-box #likeBtn.is-disabled .auto-like-hover-card .auto-like-on,
.vote-box #likeBtn[aria-disabled="true"] .auto-like-hover-card .auto-like-on{
color:#22c55e!important;
}
/* v254: extra Autolike popup clearance + disabled skip states */
.auto-like-hover-card{
bottom:calc(100% + 12px)!important;
}
.auto-like-hover-card::before{
bottom:-18px!important;
height:20px!important;
}
.play-song-card #adminSkipSongBtn.is-disabled,
.play-song-card #adminSkipSongBtn[aria-disabled="true"],
.play-song-card #adminSkipSongBtn[disabled]{
opacity:.48!important;
cursor:not-allowed!important;
filter:grayscale(.18)!important;
}
.play-song-card #adminSkipSongBtn.is-disabled::after,
.play-song-card #adminSkipSongBtn[aria-disabled="true"]::after,
.play-song-card #adminSkipSongBtn[disabled]::after{
opacity:1!important;
filter:none!important;
}
/* v256: vote average bar, paged chat loading, clickable room title */
.room-title-line{cursor:pointer;user-select:none;}
.room-title-line:hover h1{color:#fff;text-shadow:0 0 14px rgba(157,239,255,.28);}
.room-title-line:focus-visible{outline:2px solid rgba(157,239,255,.7);outline-offset:4px;border-radius:10px;}
.vote-box{
display:grid!important;
grid-template-columns:repeat(4,minmax(42px,auto))!important;
grid-template-rows:1fr 3px!important;
align-items:center!important;
column-gap:12px!important;
row-gap:8px!important;
padding-bottom:10px!important;
}
.vote-box > button{align-self:center!important;justify-self:center!important;}
.vote-average-line{
grid-column:1 / 4;
grid-row:2;
width:100%;
height:3px;
overflow:hidden;
background:rgba(255,255,255,.11);
box-shadow:0 0 0 1px rgba(255,255,255,.08);
align-self:end;
}
.vote-average-fill{
--like-pct:50%;
display:block;
width:100%;
height:100%;
background:linear-gradient(90deg,#22c55e 0 var(--like-pct),#ef4444 var(--like-pct) 100%);
}
.auto-like-hover-card{bottom:calc(100% + 5px)!important;}
.auto-like-hover-card::before{bottom:-11px!important;height:13px!important;}
.auto-like-hover-card.auto-like-force-hidden{opacity:0!important;visibility:hidden!important;pointer-events:none!important;}
.chat-load-more-row{display:flex;justify-content:center;padding:6px 0 10px;}
.chat-load-more-btn{height:28px;padding:0 12px;border-radius:8px;background:rgba(255,255,255,.075);border:1px solid rgba(255,255,255,.16);color:#dbe6ff;font-size:11px;font-weight:900;letter-spacing:.02em;}
.chat-load-more-btn:hover{background:rgba(255,255,255,.12);color:#fff;}
.chat-load-more-btn:disabled{opacity:.55;cursor:wait;}
/* v257: room title icon opens About Community + robust vote average colors */
.room-title-icon{cursor:pointer;}
.vote-average-fill{background:transparent;}
/* v258: fix vote average fill hidden by generic .vote-box span margin */
.vote-box .vote-average-line{
grid-column:1 / 4!important;
grid-row:2!important;
display:block!important;
height:3px!important;
min-height:3px!important;
width:100%!important;
overflow:hidden!important;
border-radius:0!important;
background:rgba(255,255,255,.11)!important;
box-shadow:0 0 0 1px rgba(255,255,255,.08)!important;
}
.vote-box .vote-average-line #voteAverageFill,
.vote-box .vote-average-line .vote-average-fill{
display:block!important;
height:3px!important;
min-height:3px!important;
width:0%;
margin:0!important;
padding:0!important;
line-height:0!important;
font-size:0!important;
border-radius:0!important;
color:transparent!important;
background:transparent;
}
/* v260: hidden must win over the flex display used by the Load more row. */
.chat-load-more-row[hidden]{display:none!important;}
/* v261: reliable About Community click target for Chromium/Iconify */
.room-title-icon-btn{
width:34px;
height:34px;
min-width:34px;
padding:0;
margin:0;
border:0;
background:transparent;
color:#9defff;
display:grid;
place-items:center;
align-self:center;
cursor:pointer;
line-height:1;
appearance:none;
-webkit-appearance:none;
}
.room-title-icon-btn .room-title-icon,
.room-title-icon-btn svg{
width:100%!important;
height:100%!important;
min-width:0!important;
display:block!important;
pointer-events:none!important;
}
.room-title-icon-btn:hover .room-title-icon,
.room-title-icon-btn:focus-visible .room-title-icon{
color:#fff;
}
@media(max-width:700px){
.room-title-icon-btn{width:30px;height:30px;min-width:30px;}
}
@media(max-width:560px){
.room-title-icon-btn{width:22px;height:22px;min-width:22px;}
}
/* v262a: transparent red Quit DJ button */
.play-song-card button.is-quitting,
#playNextBtn.is-quitting{
background:linear-gradient(135deg,rgba(255,47,85,.18),rgba(179,18,44,.14))!important;
border-color:rgba(255,120,145,.45)!important;
color:#ffd6df!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;
}
.play-song-card button.is-quitting:hover,
#playNextBtn.is-quitting:hover{
background:linear-gradient(135deg,rgba(255,73,106,.28),rgba(208,24,54,.22))!important;
border-color:rgba(255,170,185,.60)!important;
}
.history-video-link{color:inherit;text-decoration:none;display:block;min-width:0;}
.history-video-link:hover b{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;}
.history-video-thumb{width:58px;height:34px;border-radius:8px;overflow:hidden;}
.history-video-thumb img{display:block;}
.playlist-list-draggable{cursor:grab;}
.playlist-list-draggable.dragging{opacity:.55;transform:scale(.99);cursor:grabbing;border-color:rgba(157,239,255,.58);box-shadow:0 0 26px rgba(34,216,255,.18);}
.playlist-list-draggable:before{content:'⋮⋮';align-self:center;color:#aeb8c9;letter-spacing:-3px;font-weight:900;line-height:1;}
.playlist-result.playlist-list-draggable{grid-template-columns:16px 52px minmax(0,1fr);}
.playlist-result.playlist-list-draggable{grid-template-columns:16px 118px minmax(0,1fr);}
@media (max-width:520px){.playlist-result.playlist-list-draggable{grid-template-columns:16px 96px minmax(0,1fr);}}
/* v263: horizontally resizable chat panel (max +35%) and stage controls reflow */
:root{
--chat-panel-base-width:288px;
--chat-panel-width:288px;
--chat-panel-max-width:389px;
}
.chat-panel{
width:var(--chat-panel-width) !important;
}
.club-layout{
right:var(--chat-panel-width) !important;
}
.room-head{
right:var(--chat-panel-width) !important;
}
.chat-resize-handle{
position:absolute;
top:0;
left:-5px;
bottom:0;
width:10px;
z-index:8;
cursor:ew-resize;
touch-action:none;
background:transparent;
}
.chat-resize-handle::after{
content:"";
position:absolute;
top:12px;
bottom:12px;
left:4px;
width:2px;
border-radius:999px;
background:rgba(255,255,255,.14);
opacity:.35;
transition:opacity .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.chat-resize-handle:hover::after,
.chat-panel.is-chat-resizing .chat-resize-handle::after{
opacity:1;
background:rgba(157,239,255,.78);
box-shadow:0 0 12px rgba(157,239,255,.35);
}
body.is-chat-resizing{
cursor:ew-resize;
user-select:none;
}
@media(max-width:960px){
.club-layout{right:var(--chat-panel-width) !important;}
.chat-panel{width:var(--chat-panel-width) !important;}
}
/* v264: YouTube playlist import result */
.youtube-playlist-import-result{border-color:#9defff45;background:linear-gradient(135deg,#22d8ff14,#ff4dda12)}
.result-actions .button-link{display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:6px 10px;border-radius:12px;font-size:11px;line-height:1;font-weight:800;letter-spacing:.015em;color:#edf7ff;background:linear-gradient(135deg,#ffffff18,#ffffff0a);border:1px solid #ffffff25;box-shadow:inset 0 1px 0 #ffffff2c,0 8px 22px #0003;transition:.16s ease}
.result-actions .button-link:hover{border-color:#9defff80;box-shadow:inset 0 1px 0 #ffffff35,0 0 22px #5adfff22}
.result button[data-import-youtube-playlist]{background:linear-gradient(135deg,#19c37d45,#22d8ff30);border-color:#62ffc470;color:#eafff6}
.result button[data-import-youtube-playlist]:disabled{opacity:.65;cursor:wait}
/* v271: keep the quick icon rail visible while using the plug.dj-style bottom playlist drawer */
.menu-drawer.panel{
position:fixed!important;
left:0!important;
right:var(--chat-panel-width,288px)!important;
top:auto!important;
bottom:0!important;
width:auto!important;
height:min(72vh,720px)!important;
max-height:calc(100vh - 64px)!important;
transform:translateY(110%)!important;
border-radius:16px 16px 0 0!important;
border-left:0!important;
border-right:1px solid rgba(255,255,255,.08)!important;
display:flex!important;
flex-direction:column!important;
overflow:hidden!important;
z-index:80!important;
}
.menu-drawer.panel.open{transform:translateY(0)!important}
.drawer-shade.open{z-index:70!important;background:rgba(0,0,0,.42)!important}
.drawer-title{height:44px!important;min-height:44px!important;padding:0 14px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;border-bottom:1px solid rgba(255,255,255,.08)!important}
.drawer-tabs{height:48px!important;min-height:48px!important;padding:6px 10px!important;display:flex!important;gap:8px!important;border-bottom:1px solid rgba(255,255,255,.08)!important;overflow:visible!important}
.drawer-tabs .tab-btn{height:36px!important;border-radius:10px!important;padding:0 14px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:7px!important}
.drawer-section{flex:1!important;min-height:0!important;overflow:hidden!important;padding:0!important}
.plug-playlist-menu{display:grid;grid-template-columns:280px minmax(0,1fr);height:100%;min-height:0;background:rgba(8,10,16,.96)}
.plug-playlist-left{border-right:1px solid rgba(255,255,255,.08);padding:12px;min-height:0;display:flex;flex-direction:column;gap:10px;overflow:hidden}
.plug-playlist-right{padding:12px;min-width:0;min-height:0;display:flex;flex-direction:column;gap:10px;overflow:hidden}
.plug-new-playlist-form{display:grid!important;grid-template-columns:1fr!important;gap:8px!important;margin:0!important}
.plug-new-playlist-form .new-playlist-btn{width:100%!important;height:38px!important;border-radius:10px!important;background:rgba(139,92,246,.22)!important;border:1px solid rgba(168,85,247,.38)!important;color:#fff!important;font-weight:700!important}
.plug-new-playlist-form input{height:34px!important;border-radius:9px!important;background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.12)!important;color:#fff!important;padding:0 10px!important}
.playlist-list-panel{min-height:0;overflow:auto;display:flex;flex-direction:column;gap:5px;padding-right:2px}
.plug-playlist-left-row{height:42px;min-height:42px;display:grid;grid-template-columns:28px minmax(0,1fr) 28px 28px;gap:6px;align-items:center;padding:0 6px;border-radius:9px;color:#d9d9e8;background:transparent;border:1px solid transparent;cursor:pointer}
.plug-playlist-left-row:hover{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.08)}
.plug-playlist-left-row.is-selected{background:rgba(139,92,246,.16);border-color:rgba(139,92,246,.26)}
.plug-playlist-left-row.is-active .playlist-check-btn{background:#8b5cf6;color:white;border-color:#8b5cf6}
.playlist-check-btn,.playlist-icon-btn{width:28px!important;height:28px!important;display:grid!important;place-items:center!important;border-radius:8px!important;background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.09)!important;color:#ddd!important;padding:0!important}
.playlist-check-btn{font-weight:900;color:#9b6cff!important}
.playlist-left-title{min-width:0;height:100%;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px;background:transparent!important;border:0!important;color:inherit!important;text-align:left!important;padding:0!important}
.playlist-left-title span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.playlist-left-title small{color:#9b6cff;font-weight:800}
.playlist-search-form{height:42px!important;min-height:42px!important;margin:0!important;display:grid!important;grid-template-columns:minmax(0,1fr) 96px!important;gap:8px!important}
.playlist-search-form input{height:42px!important;border-radius:10px!important;background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.12)!important;color:#fff!important;padding:0 13px!important;font-size:15px!important}
.playlist-search-form button{border-radius:10px!important;background:rgba(139,92,246,.28)!important;border:1px solid rgba(139,92,246,.42)!important;color:white!important;font-weight:700!important}
.search-suggestions{position:absolute;top:104px;left:304px;right:18px;max-height:240px;overflow:auto;background:#111520;border:1px solid rgba(255,255,255,.12);border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.35);z-index:4;padding:6px}
.suggestion-row{width:100%;height:42px;display:grid;grid-template-columns:52px minmax(0,1fr);align-items:center;gap:9px;background:transparent;border:0;color:#e9e9f5;text-align:left;border-radius:8px;padding:4px}
.suggestion-row:hover{background:rgba(255,255,255,.07)}
.suggestion-row img{width:46px;height:30px;object-fit:cover;border-radius:5px}.suggestion-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.playlist-song-list,.playlist-search-results{min-height:0;overflow:auto;padding-right:4px}
.playlist-search-results .result{display:grid;grid-template-columns:84px minmax(0,1fr);gap:12px;align-items:center;min-height:62px;border-radius:10px;border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.035);padding:8px;margin-bottom:7px;cursor:grab}
.playlist-search-results .result img{width:84px;height:48px;object-fit:cover;border-radius:7px}.playlist-search-results .result b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.playlist-search-results .result-actions{margin-top:5px}.playlist-search-results .result-actions button{width:30px;height:28px;border-radius:8px;padding:0;font-weight:900}
.plug-detail-head{position:sticky;top:0;z-index:2;background:rgba(8,10,16,.98);border-bottom:1px solid rgba(255,255,255,.08);margin:0 0 6px!important;padding:0 0 10px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important}
.playlist-detail-actions{display:flex;gap:8px}.playlist-detail-actions button{height:32px;border-radius:9px;padding:0 11px}.playlist-detail-actions .is-done{background:#8b5cf6!important;color:white!important}
.plug-song-row{grid-template-columns:34px 58px minmax(0,1fr) auto!important;align-items:center!important;min-height:64px!important;border-radius:10px!important;background:rgba(255,255,255,.03)!important;border:1px solid rgba(255,255,255,.06)!important;margin-bottom:6px!important;padding:7px!important}
.plug-song-row>img{width:58px!important;height:42px!important;object-fit:cover!important;border-radius:7px!important}.plug-song-row b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.playlist-row-actions{display:flex!important;gap:5px!important;opacity:.35;transition:opacity .12s ease}.plug-song-row:hover .playlist-row-actions{opacity:1}.playlist-row-actions button{width:30px!important;height:30px!important;border-radius:8px!important;padding:0!important}
@media (max-width:900px){.menu-drawer.panel{right:0!important;height:78vh!important}.plug-playlist-menu{grid-template-columns:190px minmax(0,1fr)}.search-suggestions{left:204px;right:12px}.plug-playlist-left{padding:9px}.plug-playlist-right{padding:9px}}
.club-layout{padding-left:0!important}
/* v266: playlist drawer sits between navbar and floating player, not over either */
.menu-drawer.panel{
top:38px!important;
bottom:76px!important;
height:auto!important;
max-height:none!important;
transform:translateY(calc(100% + 76px))!important;
border-radius:0!important;
border-top:1px solid rgba(255,255,255,.10)!important;
}
.menu-drawer.panel.open{transform:translateY(0)!important;}
.drawer-shade{top:38px!important;bottom:76px!important;}
.drawer-shade.open{top:38px!important;bottom:76px!important;}
.search-suggestions{
position:static!important;
left:auto!important;
right:auto!important;
top:auto!important;
max-height:126px!important;
overflow:auto!important;
background:transparent!important;
border:0!important;
border-radius:0!important;
box-shadow:none!important;
padding:0 2px!important;
margin:-5px 0 2px!important;
z-index:auto!important;
}
.suggestion-row{
width:100%!important;
height:24px!important;
display:block!important;
background:transparent!important;
border:0!important;
color:#aeb8ca!important;
text-align:left!important;
border-radius:5px!important;
padding:3px 6px!important;
font-size:12px!important;
line-height:18px!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
white-space:nowrap!important;
}
.suggestion-row:hover{background:rgba(255,255,255,.06)!important;color:#fff!important;}
.suggestion-row img,.suggestion-row span{display:none!important;}
@media (max-width:900px){.menu-drawer.panel{right:0!important;top:38px!important;bottom:76px!important;height:auto!important}.drawer-shade,.drawer-shade.open{top:38px!important;bottom:76px!important}}
/* v267: playlist click view + ellipsis fixes */
#playlistItems.playlist-song-list{
display:block!important;
flex:1 1 auto!important;
min-height:0!important;
overflow:auto!important;
}
#playlistItems.playlist-song-list[hidden],
#searchResults.playlist-search-results[hidden]{
display:none!important;
}
#searchResults.playlist-search-results{
display:block!important;
flex:1 1 auto!important;
min-height:0!important;
overflow:auto!important;
}
.floating-player .playlist-name{
min-width:0!important;
max-width:260px!important;
flex:0 1 260px!important;
overflow:hidden!important;
}
.floating-player .playlist-name > div{
min-width:0!important;
overflow:hidden!important;
}
.floating-player .playlist-name b,
.floating-player .playlist-name small{
display:block!important;
max-width:100%!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
white-space:nowrap!important;
}
.floating-player .playlist-disc{
flex:0 0 auto!important;
}
.play-song-card #openQueueBtn{
min-width:0!important;
overflow:hidden!important;
}
.play-song-card #openQueueBtn .btn-icon,
.play-song-card #openQueueBtn svg{
flex:0 0 auto!important;
}
.play-song-card #openQueueBtn span{
min-width:0!important;
max-width:100%!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
white-space:nowrap!important;
display:block!important;
}
.plug-detail-head > div:first-child,
.plug-detail-head b,
.plug-detail-head small{
min-width:0!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
white-space:nowrap!important;
}
@media(max-width:960px){
.floating-player .playlist-name{max-width:180px!important;flex-basis:180px!important;}
}
/* v268: unified playlist/search song rows and safer ellipsis */
#playlistItems .plug-song-row{
display:grid!important;
grid-template-columns:18px 34px 74px minmax(0,1fr) auto!important;
gap:10px!important;
align-items:center!important;
width:100%!important;
box-sizing:border-box!important;
min-height:64px!important;
padding:8px 10px!important;
margin:0 0 7px!important;
border-radius:10px!important;
background:rgba(255,255,255,.035)!important;
border:1px solid rgba(255,255,255,.07)!important;
cursor:grab!important;
}
#playlistItems .plug-song-row:before{content:none!important;display:none!important;}
#playlistItems .plug-song-row .plug-drag{grid-column:1!important;color:#aeb8c9!important;letter-spacing:-3px!important;font-weight:900!important;justify-self:center!important;line-height:1!important;}
#playlistItems .plug-song-row .queue-pos{grid-column:2!important;position:static!important;width:28px!important;height:28px!important;display:grid!important;place-items:center!important;justify-self:center!important;}
#playlistItems .plug-song-row>img{grid-column:3!important;width:74px!important;height:48px!important;object-fit:cover!important;border-radius:7px!important;}
#playlistItems .plug-song-row .plug-song-main{grid-column:4!important;min-width:0!important;width:100%!important;overflow:hidden!important;}
#playlistItems .plug-song-row .plug-song-main b,
#playlistItems .plug-song-row .plug-song-main small{display:block!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;max-width:100%!important;}
#playlistItems .plug-song-row .playlist-row-actions{grid-column:5!important;display:flex!important;align-items:center!important;gap:5px!important;justify-self:end!important;margin:0!important;}
#searchResults.playlist-search-results .result{
grid-template-columns:74px minmax(0,1fr) auto!important;
min-height:64px!important;
padding:8px 10px!important;
}
#searchResults.playlist-search-results .result img{width:74px!important;height:48px!important;}
#searchResults.playlist-search-results .result>div{min-width:0!important;overflow:hidden!important;}
#searchResults.playlist-search-results .result b{max-width:100%!important;}
.play-song-card #openQueueBtn span{max-width:19ch!important;}
@media(max-width:560px){#playlistItems .plug-song-row{grid-template-columns:16px 30px 54px minmax(0,1fr) auto!important;gap:7px!important}#playlistItems .plug-song-row>img{width:54px!important;height:36px!important}.playlist-row-actions button{width:28px!important;height:28px!important}}
/* v269: playlist drawer polish + overlay suggestions */
.plug-playlist-right{position:relative!important;overflow:hidden!important;}
.search-suggestions{
position:absolute!important;
top:52px!important;
left:12px!important;
right:12px!important;
max-height:260px!important;
overflow:auto!important;
background:#0d111b!important;
border:1px solid rgba(255,255,255,.14)!important;
border-radius:12px!important;
box-shadow:0 18px 45px rgba(0,0,0,.58)!important;
padding:6px!important;
margin:0!important;
z-index:9999!important;
}
.suggestion-row{
width:100%!important;
min-height:34px!important;
height:auto!important;
display:block!important;
background:transparent!important;
border:0!important;
color:#e8ebf5!important;
text-align:left!important;
border-radius:8px!important;
padding:8px 10px!important;
font-size:13px!important;
line-height:18px!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
white-space:nowrap!important;
}
.suggestion-row:hover{background:rgba(139,92,246,.20)!important;color:#fff!important;}
.suggestion-row img,.suggestion-row span{display:none!important;}
.plug-detail-head{min-height:52px!important;padding:8px 10px!important;margin:0 0 8px!important;border-radius:10px!important;background:rgba(8,10,16,.96)!important;overflow:hidden!important;}
.plug-detail-head > div:first-child{flex:1 1 auto!important;min-width:0!important;display:flex!important;flex-direction:column!important;justify-content:center!important;align-self:stretch!important;}
.plug-detail-head b,.plug-detail-head small{display:block!important;max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;line-height:1.25!important;}
.playlist-detail-actions{flex:0 0 auto!important;display:flex!important;align-items:center!important;gap:8px!important;max-width:48%!important;overflow:hidden!important;}
.playlist-detail-actions button,.playlist-row-actions button{
background:linear-gradient(135deg,rgba(34,216,255,.18),rgba(255,77,218,.20))!important;
border:1px solid rgba(255,255,255,.18)!important;
color:#edf7ff!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.18)!important;
}
.playlist-detail-actions button:hover,.playlist-row-actions button:hover{border-color:rgba(157,239,255,.55)!important;background:linear-gradient(135deg,rgba(34,216,255,.28),rgba(255,77,218,.30))!important;}
.playlist-detail-actions button.danger,.playlist-row-actions button.danger{
background:linear-gradient(135deg,rgba(255,77,218,.18),rgba(255,78,116,.20))!important;
border-color:rgba(255,130,180,.28)!important;
color:#ffe9f3!important;
}
.playlist-row-actions button{font-size:13px!important;font-weight:900!important;}
@media(max-width:700px){.playlist-detail-actions{max-width:55%!important}.playlist-detail-actions button{padding:0 8px!important;font-size:12px!important}.search-suggestions{left:9px!important;right:9px!important}}
/* v272: when the bottom playlist drawer is open, it must layer over the restored icon rail */
.menu-drawer.panel,
.menu-drawer.panel.open{
z-index:126!important;
}
.drawer-shade.open{
z-index:120!important;
}
.icon-rail{
z-index:85!important;
}
/* v273: keep playlist drawer above icon rail but below the navbar */
.menu-drawer.panel,
.menu-drawer.panel.open{
top:38px!important;
bottom:76px!important;
height:auto!important;
z-index:90!important;
}
.drawer-shade,
.drawer-shade.open{
top:38px!important;
bottom:76px!important;
z-index:88!important;
}
.icon-rail{z-index:85!important;}
.room-head{z-index:150!important;}
.room-head .account{z-index:151!important;}
.floating-player{z-index:130!important;}
/* v276: cleaner playlist header/buttons */
.plug-new-playlist-form{
grid-template-columns:minmax(0,1fr) 72px!important;
align-items:center!important;
}
.plug-new-playlist-form .new-playlist-btn{
width:72px!important;
height:34px!important;
padding:0!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
white-space:nowrap!important;
}
.playlist-search-form{
grid-template-columns:minmax(0,1fr) 46px!important;
}
.playlist-search-form button{
width:46px!important;
padding:0!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
font-size:18px!important;
}
.playlist-search-form button .iconify,
.playlist-detail-actions button .iconify,
.playlist-row-actions button .iconify,
.queue-actions button .iconify,
.playlist-icon-btn .iconify,
.danger.small .iconify{
display:block!important;
width:18px!important;
height:18px!important;
line-height:1!important;
margin:auto!important;
flex:0 0 auto!important;
}
.playlist-detail-actions button,
.playlist-row-actions button,
.queue-actions button,
.playlist-icon-btn,
.danger.small,
[data-remove-playlist-item],
[data-move-playlist-item]{
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
text-align:center!important;
line-height:1!important;
}
.playlist-detail-actions button[title="Shuffle"],
.playlist-detail-actions button[title="Delete playlist"]{
width:34px!important;
min-width:34px!important;
padding:0!important;
}
.playlist-row-actions button,
.queue-actions button[data-move-playlist-item],
.queue-actions button[data-remove-playlist-item],
.danger.small{
width:30px!important;
height:30px!important;
min-width:30px!important;
padding:0!important;
}
/* v277: remove drawer title and put close button inside tabs */
.menu-drawer{padding-top:8px!important;}
.menu-drawer .drawer-title{display:none!important;}
.menu-drawer .drawer-tabs{
height:48px!important;
min-height:48px!important;
margin:0 0 10px!important;
padding:6px 8px!important;
display:flex!important;
align-items:center!important;
gap:8px!important;
border-bottom:1px solid rgba(255,255,255,.08)!important;
overflow:visible!important;
}
.menu-drawer .drawer-tabs .tab-btn{
height:36px!important;
min-width:0!important;
flex:0 1 auto!important;
border-radius:10px!important;
padding:0 14px!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
gap:7px!important;
}
.menu-drawer .drawer-close-btn{
margin-left:auto!important;
width:36px!important;
height:36px!important;
min-width:36px!important;
border-radius:10px!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
padding:0!important;
line-height:1!important;
font-size:24px!important;
color:#dce4f5!important;
background:linear-gradient(135deg,rgba(34,216,255,.16),rgba(255,77,218,.18))!important;
border:1px solid rgba(255,255,255,.16)!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.18)!important;
}
.menu-drawer .drawer-close-btn:hover{
border-color:rgba(157,239,255,.55)!important;
color:#fff!important;
}
/* v278: keep drawer tabs fully below navbar + make 2 tabs split remaining width */
.menu-drawer.panel,
.menu-drawer.panel.open{
top:38px!important;
bottom:76px!important;
height:auto!important;
max-height:none!important;
z-index:90!important;
overflow:hidden!important;
}
.drawer-shade,
.drawer-shade.open{
top:38px!important;
bottom:76px!important;
z-index:88!important;
}
.room-head{
z-index:140!important;
}
.menu-drawer .drawer-tabs{
flex:0 0 48px!important;
width:100%!important;
margin:0 0 10px!important;
padding:6px 10px!important;
display:flex!important;
align-items:center!important;
gap:8px!important;
overflow:hidden!important;
}
.menu-drawer .drawer-tabs .tab-btn{
flex:1 1 0!important;
width:auto!important;
min-width:0!important;
max-width:none!important;
}
.menu-drawer .drawer-close-btn{
flex:0 0 36px!important;
margin-left:0!important;
}
/* v279: drawer lower under navbar, focused suggestions, faster playlist drag, cleaner controls */
.menu-drawer.panel,
.menu-drawer.panel.open{
top:52px!important;
bottom:76px!important;
height:auto!important;
max-height:none!important;
}
.drawer-shade,
.drawer-shade.open{
top:52px!important;
bottom:76px!important;
}
.menu-drawer{padding-top:8px!important;}
.menu-drawer .drawer-tabs{flex:0 0 48px!important;min-height:48px!important;}
.menu-drawer .drawer-tabs .tab-btn{flex:1 1 0!important;width:50%!important;}
.menu-drawer .drawer-close-btn{flex:0 0 36px!important;width:36px!important;min-width:36px!important;}
.plug-new-playlist-form{height:42px!important;min-height:42px!important;grid-template-columns:minmax(0,1fr) 72px!important;gap:8px!important;align-items:stretch!important;}
.plug-new-playlist-form input,
.plug-new-playlist-form .new-playlist-btn{height:42px!important;min-height:42px!important;border-radius:10px!important;}
.plug-new-playlist-form input{padding:0 13px!important;font-size:15px!important;}
.plug-new-playlist-form .new-playlist-btn{width:72px!important;padding:0!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;}
.playlist-row-actions{align-items:center!important;justify-content:flex-end!important;gap:5px!important;}
.playlist-row-actions button,
.queue-actions button[data-move-playlist-item],
.queue-actions button[data-remove-playlist-item],
.danger.small{
display:inline-grid!important;
place-items:center!important;
width:30px!important;
height:30px!important;
min-width:30px!important;
padding:0!important;
line-height:1!important;
vertical-align:middle!important;
}
.playlist-row-actions button .iconify,
.queue-actions button[data-move-playlist-item] .iconify,
.queue-actions button[data-remove-playlist-item] .iconify,
.danger.small .iconify{
width:18px!important;
height:18px!important;
display:block!important;
margin:0!important;
line-height:1!important;
}
#playlistItems .plug-song-row.dragging{opacity:.55!important;transform:scale(.995)!important;}
#playlistItems{scroll-behavior:auto!important;overscroll-behavior:contain!important;}
.search-suggestions[hidden]{display:none!important;}
.search-suggestions{z-index:99999!important;}
@media (max-width:900px){.menu-drawer.panel,.menu-drawer.panel.open{top:52px!important;bottom:76px!important}.drawer-shade,.drawer-shade.open{top:52px!important;bottom:76px!important}}
/* Drag highlight */
.sortable-chosen .queue-pos,.sortable-ghost .queue-pos,.dragging .queue-pos{color:#4f7cff !important;}
/* v282: cleaner drawer tabs, hide redundant first button, icon drag handles */
.menu-drawer .drawer-tabs{
background:linear-gradient(180deg,rgba(15,18,31,.92),rgba(8,10,18,.88))!important;
border:1px solid rgba(255,255,255,.12)!important;
border-radius:14px!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 10px 28px rgba(0,0,0,.22)!important;
padding:6px!important;
gap:6px!important;
}
.menu-drawer .drawer-tabs .tab-btn{
height:36px!important;
border-radius:10px!important;
background:rgba(255,255,255,.055)!important;
border:1px solid rgba(255,255,255,.10)!important;
color:#cdd6ea!important;
box-shadow:none!important;
}
.menu-drawer .drawer-tabs .tab-btn:hover{
border-color:rgba(157,239,255,.30)!important;
background:rgba(255,255,255,.08)!important;
color:#fff!important;
}
.menu-drawer .drawer-tabs .tab-btn.active{
background:linear-gradient(135deg,rgba(83,95,219,.42),rgba(34,216,255,.18))!important;
border-color:rgba(157,239,255,.42)!important;
color:#fff!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 10px 26px rgba(83,95,219,.18)!important;
}
.menu-drawer .drawer-close-btn{
background:rgba(255,255,255,.055)!important;
border:1px solid rgba(255,255,255,.12)!important;
box-shadow:none!important;
}
.menu-drawer .drawer-close-btn:hover{
background:linear-gradient(135deg,rgba(255,77,117,.26),rgba(255,154,60,.14))!important;
border-color:rgba(255,120,150,.36)!important;
}
#playlistItems .plug-song-row:first-of-type [data-move-playlist-item="first"]{display:none!important;}
#playlistItems .plug-song-row .plug-drag,
.admin-queue-drag{
width:18px!important;
min-width:18px!important;
height:30px!important;
display:inline-grid!important;
place-items:center!important;
letter-spacing:0!important;
color:#9fb0c8!important;
line-height:1!important;
}
#playlistItems .plug-song-row .plug-drag .iconify,
.admin-queue-drag .iconify{
width:18px!important;
height:18px!important;
display:block!important;
}
#playlistItems .plug-song-row.dragging .plug-drag,
.admin-queue-item.dragging .admin-queue-drag,
.sortable-chosen .plug-drag,
.sortable-chosen .admin-queue-drag{
color:#9defff!important;
}
.sortable-chosen .queue-pos,.sortable-ghost .queue-pos,.dragging .queue-pos{
background:#535FDB!important;
border-color:#9defff!important;
color:#fff!important;
}
/* v283: tighten playlist drawer top spacing + plain taller right-side controls */
.menu-drawer .drawer-tabs{
margin:0!important;
}
.menu-drawer .drawer-section.tab-panel{
margin:0!important;
}
.menu-drawer .drawer-section[data-panel="playlists"]{
border:0!important;
border-radius:0!important;
background:transparent!important;
box-shadow:none!important;
}
.plug-playlist-right{
padding-top:8px!important;
}
.plug-playlist-right .playlist-search-form{
height:46px!important;
min-height:46px!important;
}
.plug-playlist-right .playlist-search-form input,
.plug-playlist-right .playlist-search-form button{
height:46px!important;
min-height:46px!important;
}
.plug-playlist-right .playlist-search-form button{
width:52px!important;
border-radius:10px!important;
}
.plug-playlist-right .playlist-detail-actions{
background:transparent!important;
border:0!important;
box-shadow:none!important;
padding:0!important;
}
.plug-playlist-right .playlist-detail-actions button{
height:38px!important;
min-height:38px!important;
border-radius:10px!important;
}
.plug-playlist-right .playlist-detail-actions button:not([data-activate-playlist]){
width:38px!important;
min-width:38px!important;
padding:0!important;
}
.plug-playlist-right .playlist-row-actions button,
.plug-playlist-right .queue-actions button[data-move-playlist-item],
.plug-playlist-right .queue-actions button[data-remove-playlist-item],
.plug-playlist-right .danger.small{
width:34px!important;
height:34px!important;
min-width:34px!important;
min-height:34px!important;
border-radius:9px!important;
}
/* v284: remove drawer-tabs outer pill, keep only tab buttons */
.menu-drawer .drawer-tabs{
background:transparent!important;
border:0!important;
box-shadow:none!important;
border-radius:0!important;
padding:0!important;
}
/* v285: Rooms tab redesigned to match playlist drawer layout */
.menu-drawer .drawer-section[data-panel="rooms"]{
display:grid!important;
grid-template-columns:280px minmax(0,1fr)!important;
grid-template-rows:auto minmax(0,1fr)!important;
column-gap:0!important;
row-gap:0!important;
min-height:0!important;
height:100%!important;
padding:0!important;
margin:0!important;
overflow:hidden!important;
border:0!important;
border-radius:0!important;
background:rgba(8,10,16,.96)!important;
box-shadow:none!important;
}
.menu-drawer .drawer-section[data-panel="rooms"] > h3:first-child,
.menu-drawer .drawer-section[data-panel="rooms"] > .room-create-form{
grid-column:1!important;
}
.menu-drawer .drawer-section[data-panel="rooms"] > h3:first-child{
grid-row:1!important;
margin:0!important;
padding:12px 12px 8px!important;
border-right:1px solid rgba(255,255,255,.08)!important;
color:#eef3ff!important;
font-size:12px!important;
letter-spacing:.08em!important;
}
.menu-drawer .drawer-section[data-panel="rooms"] > .room-create-form{
grid-row:2!important;
align-content:start!important;
height:100%!important;
min-height:0!important;
margin:0!important;
padding:0 12px 12px!important;
border:0!important;
border-right:1px solid rgba(255,255,255,.08)!important;
border-radius:0!important;
background:transparent!important;
box-shadow:none!important;
display:flex!important;
flex-direction:column!important;
gap:8px!important;
overflow:auto!important;
}
.menu-drawer .drawer-section[data-panel="rooms"] > .available-rooms-title{
grid-column:2!important;
grid-row:1!important;
height:44px!important;
min-height:44px!important;
margin:0!important;
padding:0 12px!important;
display:flex!important;
align-items:center!important;
border-bottom:1px solid rgba(255,255,255,.08)!important;
color:#eef3ff!important;
font-size:12px!important;
letter-spacing:.08em!important;
}
.menu-drawer .drawer-section[data-panel="rooms"] > .available-rooms-title:after{
display:none!important;
}
.menu-drawer .drawer-section[data-panel="rooms"] > .rooms-list{
grid-column:2!important;
grid-row:2!important;
min-height:0!important;
overflow:auto!important;
padding:12px!important;
display:grid!important;
grid-template-columns:repeat(auto-fill,minmax(210px,1fr))!important;
align-content:start!important;
gap:8px!important;
}
.menu-drawer .drawer-section[data-panel="rooms"] .room-create-form input,
.menu-drawer .drawer-section[data-panel="rooms"] .room-create-form select,
.menu-drawer .drawer-section[data-panel="rooms"] .room-create-form button{
width:100%!important;
height:42px!important;
min-height:42px!important;
border-radius:10px!important;
}
.menu-drawer .drawer-section[data-panel="rooms"] .room-create-form input,
.menu-drawer .drawer-section[data-panel="rooms"] .room-create-form select{
padding:0 13px!important;
background:rgba(255,255,255,.06)!important;
border:1px solid rgba(255,255,255,.12)!important;
color:#fff!important;
box-shadow:none!important;
}
.menu-drawer .drawer-section[data-panel="rooms"] .room-create-form input:focus,
.menu-drawer .drawer-section[data-panel="rooms"] .room-create-form select:focus{
border-color:rgba(157,239,255,.48)!important;
box-shadow:0 0 0 3px rgba(83,95,219,.13)!important;
}
.menu-drawer .drawer-section[data-panel="rooms"] .room-create-form button{
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
padding:0!important;
background:rgba(139,92,246,.28)!important;
border:1px solid rgba(139,92,246,.42)!important;
color:#fff!important;
box-shadow:none!important;
font-weight:800!important;
}
.menu-drawer .drawer-section[data-panel="rooms"] .room-create-form button:hover{
border-color:rgba(157,239,255,.42)!important;
background:rgba(139,92,246,.36)!important;
}
.menu-drawer .drawer-section[data-panel="rooms"] .room-privacy-help{
margin:2px 0 0!important;
color:#8f9bb3!important;
font-size:11px!important;
line-height:1.35!important;
}
.menu-drawer .drawer-section[data-panel="rooms"] .room-link{
min-height:86px!important;
display:grid!important;
grid-template-columns:minmax(0,1fr) auto!important;
grid-template-rows:auto auto!important;
align-items:center!important;
gap:6px 10px!important;
padding:10px!important;
border-radius:10px!important;
background:rgba(255,255,255,.03)!important;
border:1px solid rgba(255,255,255,.07)!important;
box-shadow:none!important;
transform:none!important;
}
.menu-drawer .drawer-section[data-panel="rooms"] .room-link:hover{
background:rgba(255,255,255,.055)!important;
border-color:rgba(255,255,255,.10)!important;
box-shadow:none!important;
}
.menu-drawer .drawer-section[data-panel="rooms"] .room-link.active{
background:rgba(139,92,246,.16)!important;
border-color:rgba(139,92,246,.30)!important;
}
.menu-drawer .drawer-section[data-panel="rooms"] .room-link-main{
grid-column:1!important;
grid-row:1!important;
min-width:0!important;
}
.menu-drawer .drawer-section[data-panel="rooms"] .room-link-main b{
font-size:14px!important;
line-height:1.25!important;
color:#f2f4ff!important;
}
.menu-drawer .drawer-section[data-panel="rooms"] .room-link-main em{
margin-top:3px!important;
color:#8f9bb3!important;
font-size:11px!important;
}
.menu-drawer .drawer-section[data-panel="rooms"] .room-users-count{
grid-column:2!important;
grid-row:1!important;
align-self:start!important;
min-width:max-content!important;
height:28px!important;
padding:0 9px!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
border-radius:8px!important;
background:rgba(255,255,255,.06)!important;
border:1px solid rgba(255,255,255,.09)!important;
color:#dce4f5!important;
text-shadow:none!important;
font-size:11px!important;
font-weight:800!important;
}
.menu-drawer .drawer-section[data-panel="rooms"] .room-hover-desc{
position:static!important;
grid-column:1 / -1!important;
grid-row:2!important;
display:block!important;
padding:0!important;
background:transparent!important;
color:#aeb8c9!important;
font-size:12px!important;
line-height:1.35!important;
opacity:1!important;
transform:none!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
display:-webkit-box!important;
-webkit-line-clamp:2!important;
-webkit-box-orient:vertical!important;
}
@media (max-width:900px){
.menu-drawer .drawer-section[data-panel="rooms"]{grid-template-columns:190px minmax(0,1fr)!important;}
.menu-drawer .drawer-section[data-panel="rooms"] > h3:first-child{padding:9px 9px 7px!important;}
.menu-drawer .drawer-section[data-panel="rooms"] > .room-create-form{padding:0 9px 9px!important;}
.menu-drawer .drawer-section[data-panel="rooms"] > .rooms-list{padding:9px!important;grid-template-columns:1fr!important;}
}
/* v286: keep redesigned Rooms layout scoped to the active Rooms tab only */
.menu-drawer .drawer-section[data-panel="rooms"]:not(.active){
display:none!important;
}
.menu-drawer .drawer-section[data-panel="rooms"].active{
display:grid!important;
}
/* v287: align Rooms create header and form content with public rooms column */
.menu-drawer .drawer-section[data-panel="rooms"] > h3:first-child{
height:44px!important;
min-height:44px!important;
padding:0 12px!important;
display:flex!important;
align-items:center!important;
border-bottom:1px solid rgba(255,255,255,.08)!important;
}
.menu-drawer .drawer-section[data-panel="rooms"] > .room-create-form{
padding:12px 12px 12px!important;
}
@media (max-width:900px){
.menu-drawer .drawer-section[data-panel="rooms"] > h3:first-child{
height:44px!important;
min-height:44px!important;
padding:0 9px!important;
}
.menu-drawer .drawer-section[data-panel="rooms"] > .room-create-form{
padding:9px!important;
}
}
/* v288: align playlist search submit with the playlist danger button edge */
.playlist-search-form{
margin-right:10px!important;
width:calc(100% - 10px)!important;
box-sizing:border-box!important;
}
.playlist-search-form button[type="submit"]{
width:96px!important;
}
/* v289: align playlist search submit with playlist detail action buttons */
.plug-playlist-right{
--playlist-action-w:96px;
--playlist-action-h:46px;
}
.plug-playlist-right .playlist-search-form{
width:calc(100% - 10px)!important;
margin:0 10px 0 0!important;
display:grid!important;
grid-template-columns:minmax(0,1fr) var(--playlist-action-w)!important;
gap:8px!important;
align-items:center!important;
box-sizing:border-box!important;
}
.plug-playlist-right .playlist-search-form input,
.plug-playlist-right .playlist-search-form button[type="submit"]{
height:var(--playlist-action-h)!important;
min-height:var(--playlist-action-h)!important;
border-radius:10px!important;
}
.plug-playlist-right .playlist-search-form button[type="submit"]{
width:var(--playlist-action-w)!important;
min-width:var(--playlist-action-w)!important;
padding:0!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
}
.plug-playlist-right .plug-detail-head{
padding-right:10px!important;
}
.plug-playlist-right .playlist-detail-actions{
flex:0 0 auto!important;
display:flex!important;
align-items:center!important;
gap:8px!important;
max-width:none!important;
overflow:visible!important;
}
.plug-playlist-right .playlist-detail-actions button,
.plug-playlist-right .playlist-detail-actions button:not([data-activate-playlist]),
.playlist-detail-actions button[title="Shuffle"],
.playlist-detail-actions button[title="Delete playlist"]{
width:var(--playlist-action-w)!important;
min-width:var(--playlist-action-w)!important;
height:var(--playlist-action-h)!important;
min-height:var(--playlist-action-h)!important;
padding:0!important;
border-radius:10px!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
box-sizing:border-box!important;
white-space:nowrap!important;
}
.plug-playlist-right .playlist-detail-actions button .iconify,
.plug-playlist-right .playlist-search-form button[type="submit"] .iconify{
width:20px!important;
height:20px!important;
}
@media(max-width:700px){
.plug-playlist-right{--playlist-action-w:72px;--playlist-action-h:42px;}
.plug-playlist-right .playlist-search-form{width:100%!important;margin-right:0!important;}
.plug-playlist-right .plug-detail-head{padding-right:8px!important;}
}
/* v290: requested playlist controls polish */
.plug-playlist-right{
--playlist-action-w:96px!important;
--playlist-action-h:46px!important;
--playlist-search-shift-left:0px!important;
}
.plug-playlist-right .playlist-search-form{
width:calc(100% - var(--playlist-search-shift-left))!important;
margin:0 var(--playlist-search-shift-left) 0 0!important;
grid-template-columns:minmax(0,1fr) var(--playlist-action-w)!important;
}
.plug-playlist-right .playlist-search-form button[type="submit"],
.plug-playlist-right .playlist-detail-actions button{
width:var(--playlist-action-w)!important;
min-width:var(--playlist-action-w)!important;
height:var(--playlist-action-h)!important;
min-height:var(--playlist-action-h)!important;
}
.plug-new-playlist-form .new-playlist-btn{
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
font-size:0!important;
}
.plug-new-playlist-form .new-playlist-btn .iconify{
width:21px!important;
height:21px!important;
font-size:21px!important;
}
.plug-playlist-right .playlist-detail-actions button.is-done,
.playlist-detail-actions button[data-activate-playlist].is-done{
background:linear-gradient(135deg,rgba(34,197,94,.34),rgba(20,184,166,.20))!important;
border:1px solid rgba(74,222,128,.48)!important;
color:#dcffe8!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 0 0 1px rgba(34,197,94,.06)!important;
}
.plug-playlist-right .playlist-detail-actions button.is-done:hover,
.playlist-detail-actions button[data-activate-playlist].is-done:hover{
background:linear-gradient(135deg,rgba(34,197,94,.42),rgba(20,184,166,.26))!important;
border-color:rgba(134,239,172,.62)!important;
}
@media(max-width:700px){
.plug-playlist-right{--playlist-search-shift-left:0px!important;}
}
/* v292: public read-only room queue button + stable playlist-name ellipsis */
#openQueueBtn{
min-width:0!important;
overflow:hidden!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
gap:5px!important;
}
#openQueueBtn .queue-label-name{
min-width:0!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
white-space:nowrap!important;
flex:1 1 auto!important;
display:block!important;
}
#openQueueBtn .queue-label-count{
flex:0 0 auto!important;
white-space:nowrap!important;
display:block!important;
}
#openQueueBtn .btn-icon{
flex:0 0 auto!important;
}
.admin-queue-item--dropdown-readonly,
.admin-queue-item--chat-readonly{
cursor:default!important;
}
.admin-queue-item--dropdown-readonly .admin-queue-drag,
.admin-queue-item--chat-readonly .admin-queue-drag{
opacity:.45!important;
}
/* v293: dynamic search/action alignment across browser scrollbar widths */
.plug-playlist-right{
--playlist-search-shift-left:0px!important;
}
.plug-playlist-right .playlist-search-form{
width:calc(100% - var(--playlist-search-shift-left, 0px))!important;
margin:0 var(--playlist-search-shift-left, 0px) 0 0!important;
}
.playlist-song-list,
.playlist-search-results{
scrollbar-gutter:auto!important;
}
@media(max-width:700px){
.plug-playlist-right{--playlist-search-shift-left:0px!important;}
}
/* v294: keep alignment controlled by measured button edges instead of hardcoded scrollbar guesses */
.plug-playlist-right{
--playlist-search-shift-left:0px;
}
.plug-playlist-right .playlist-search-form{
width:calc(100% - var(--playlist-search-shift-left, 0px))!important;
margin:0 var(--playlist-search-shift-left, 0px) 0 0!important;
}
/* v295: Queued tab text ellipsis + protected action-button space */
.chat-admin-queue-list .admin-queue-item--chat{
grid-template-columns:16px 38px minmax(0,1fr) 64px!important;
column-gap:10px!important;
align-items:center!important;
overflow:hidden!important;
}
.chat-admin-queue-list .admin-queue-item--chat .admin-queue-info{
min-width:0!important;
max-width:100%!important;
overflow:hidden!important;
padding-right:4px!important;
}
.chat-admin-queue-list .admin-queue-item--chat .admin-queue-info b{
display:block!important;
width:100%!important;
max-width:100%!important;
min-width:0!important;
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
}
.chat-admin-queue-list .admin-queue-item--chat .admin-queue-info small{
display:flex!important;
width:100%!important;
max-width:100%!important;
min-width:0!important;
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
}
.chat-admin-queue-list .admin-queue-item--chat .admin-queue-info small span{
display:block!important;
min-width:0!important;
max-width:100%!important;
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
}
.chat-admin-queue-list .admin-queue-item--chat .admin-queue-row-actions{
width:64px!important;
min-width:64px!important;
max-width:64px!important;
display:flex!important;
justify-content:flex-end!important;
gap:6px!important;
margin-left:0!important;
grid-column:auto!important;
border-top:0!important;
padding-top:0!important;
position:relative!important;
z-index:1!important;
}
.chat-admin-queue-list .admin-queue-item--chat-readonly{
grid-template-columns:0 38px minmax(0,1fr)!important;
column-gap:8px!important;
overflow:hidden!important;
}
.chat-admin-queue-list .admin-queue-item--chat-readonly .admin-queue-info{
min-width:0!important;
overflow:hidden!important;
}
/* v296: requested queue label, closer ETA tooltip, and fixed YouTube playlist import button */
.queue-eta-tooltip{
margin-top:0!important;
z-index:10030!important;
}
.playlist-search-results .youtube-playlist-import-result{
grid-template-columns:84px minmax(0,1fr)!important;
}
.playlist-search-results .youtube-playlist-import-result > div{
min-width:0!important;
}
.playlist-search-results .youtube-playlist-import-result .result-actions{
display:flex!important;
align-items:center!important;
gap:8px!important;
flex-wrap:nowrap!important;
}
.playlist-search-results .youtube-playlist-import-result .result-actions .button-link,
.playlist-search-results .youtube-playlist-import-result .result-actions button[data-import-youtube-playlist]{
width:auto!important;
min-width:112px!important;
max-width:none!important;
height:32px!important;
min-height:32px!important;
padding:0 12px!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
white-space:nowrap!important;
line-height:1!important;
font-size:11px!important;
border-radius:10px!important;
flex:0 0 auto!important;
}
.playlist-search-results .youtube-playlist-import-result .result-actions button[data-import-youtube-playlist]{
min-width:126px!important;
}
@media(max-width:520px){
.playlist-search-results .youtube-playlist-import-result .result-actions{
flex-wrap:wrap!important;
}
}