/* V6 original community-room visual design; no Paltalk branding or copied assets. */
:root{font-family:Segoe UI,Inter,Arial,sans-serif;color:#eaf2f7;background:#09141c;--line:#29404c;--panel:#122530;--mint:#55d7b1;--sky:#73bde9}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 52% -20%,#1c4650 0%,#09141c 48%);min-height:100vh}
header{display:flex;align-items:center;gap:18px;padding:15px 24px;background:#10242e;border-bottom:1px solid #2b4853;flex-wrap:wrap}
header h1{font-size:23px;margin:0;color:#effffb;letter-spacing:-.6px}header span{font-size:13px;color:#a2c3c9}header button{margin-left:auto}
main{max-width:1800px;margin:auto;padding:18px}.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px;min-width:0}
.auth{max-width:450px;margin:7vh auto;display:grid;gap:12px}.auth h2{margin:0}
input{background:#0a1b25;border:1px solid #3a5865;color:#f0ffff;border-radius:9px;padding:11px 12px;min-width:0;flex:1;font-size:14px}
input:focus-visible,button:focus-visible{outline:2px solid #79e5c6;outline-offset:2px}
button{background:#257d73;color:#fff;border:1px solid #40998d;border-radius:9px;font-weight:700;padding:10px 13px;cursor:pointer;min-height:40px}
button:hover:not(:disabled){filter:brightness(1.13)}button.secondary{background:#25404e;border-color:#3c5b68}button:disabled{opacity:.45;cursor:not-allowed}
.row{display:flex;gap:8px;align-items:center}.spread{justify-content:space-between}.center{justify-content:center;flex-wrap:wrap}
.layout{display:grid;grid-template-columns:minmax(200px,235px) minmax(0,1fr) minmax(265px,315px);gap:14px;align-items:start}
.section-eyebrow{font-size:10px;font-weight:800;letter-spacing:1.7px;color:#74c9b8;margin-bottom:8px}
h2{font-size:19px;letter-spacing:-.4px}h3{font-size:15px;color:#d7f7ee;margin:0 0 13px}.main h2,.card h2{margin-top:0}.muted{color:#a5bfc7}.small{font-size:12px}
.pill{background:#224d4c;border:1px solid #347b6f;padding:6px 11px;border-radius:99px;font-size:12px;white-space:nowrap}
.room{display:block;width:100%;text-align:left;background:#19333e;border:1px solid #2b4d59;margin:9px 0;padding:14px 12px;border-radius:10px;font-size:13px;line-height:1.4}
.room.active{background:#235a54;border-color:#65d4b4;box-shadow:inset 3px 0 #8cf3d1}.room small{display:block;color:#b1d1d2;margin-top:5px}
.room-heading{border-bottom:1px solid #2b4853;padding-bottom:10px;margin-bottom:12px;gap:10px}
.stage{background:#0c1d27;border:1px solid #254653;border-radius:12px;text-align:center;padding:12px}
.stage-topline{display:flex;justify-content:space-between;gap:10px;align-items:center;color:#9fbdc6;font-size:12px;margin-bottom:10px;text-align:left}
.live-indicator{background:#3d2831;color:#ffb8c2;padding:6px 10px;border-radius:6px;font-weight:800;letter-spacing:.7px}
.video-shell{position:relative;width:100%;aspect-ratio:16/9;background:#050b10;border:1px solid #34505c;border-radius:10px;overflow:hidden;margin-bottom:12px}
.video-shell iframe,#ytPlayer{width:100%;height:100%}#videoPlaceholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#a4c6d3;pointer-events:none}
.video-controls{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:8px}.video-controls input{flex:2;min-width:175px}.video-controls button{flex:0 0 auto}
#videoLabel{margin:6px 0 14px;text-align:left}.performer-panel{display:flex;justify-content:center;gap:13px;align-items:center;margin:12px auto 4px}
.performer-panel h2{margin:0}.performer-icon{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:#1d554d;border:1px solid #4db39c;font-size:26px}
#stageText{color:#d3ecec}.stage .row{margin:12px auto}.stage>.small{max-width:720px;margin:12px auto 0;line-height:1.5}
.two{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:12px;margin-top:13px}.subpanel{background:#10232d;border:1px solid #2b4652;border-radius:10px;padding:15px;min-width:0}
.two ul,.two ol{padding-left:20px}.two li{margin:10px 0;overflow-wrap:anywhere}.two .row{flex-wrap:wrap}.two .row input{min-width:130px}
.chat{display:flex;flex-direction:column;min-height:670px}.chat #messages{flex:1;overflow-y:auto;min-height:360px;max-height:630px;background:#0d202a;border:1px solid #294652;border-radius:10px;padding:0 12px;margin-bottom:12px}
.bubble{padding:11px 0;border-bottom:1px solid #28414d;overflow-wrap:anywhere;font-size:13px;line-height:1.5}.bubble strong{color:#77d8c3}.chat .row input{width:70px}
footer{text-align:center;color:#8babb3;padding:15px 20px 25px;font-size:12px}
@media(max-width:1150px){.layout{grid-template-columns:210px minmax(0,1fr)}.chat{grid-column:1/-1;min-height:350px}.chat #messages{min-height:170px;max-height:340px}}
@media(max-width:720px){.layout{display:block}.card{margin-bottom:12px}.two{grid-template-columns:1fr}.row{flex-wrap:wrap}.stage-topline{flex-wrap:wrap}header button{margin-left:0}.room-heading{flex-wrap:wrap}}

/* V7 studio layout: compact player and immediately accessible controls. */
main{max-width:none;padding:12px 16px}.layout{grid-template-columns:minmax(180px,220px) minmax(0,1fr) minmax(265px,330px);gap:12px}.card{padding:13px}.auth{margin:5vh auto}.auth[hidden],#app[hidden]{display:none!important}.room{padding:10px;margin:6px 0}.room-heading{margin-bottom:8px;padding-bottom:6px}.room-heading h2{margin-bottom:4px}.room-heading p{margin:4px 0}.stage{padding:9px}.stage-topline{margin-bottom:7px}.video-shell{width:min(100%,780px);margin:0 auto 9px;aspect-ratio:16/8.4;max-height:390px}.video-controls{margin-bottom:4px}.video-controls input{min-width:140px}.video-controls button{padding:8px 10px}#videoLabel{margin:4px 0 8px}.performer-panel{margin:6px auto 2px}.performer-icon{width:35px;height:35px;font-size:18px}.performer-panel h2{font-size:16px}#stageText{margin:5px}.stage .row{margin:6px auto}.stage>.small{margin:5px auto 0}.two{margin-top:9px}.subpanel{padding:11px}.chat{min-height:590px;position:sticky;top:10px}.chat #messages{min-height:360px;max-height:620px}.audio-console{margin:9px 0 0;padding:9px 12px;border:1px solid #315b60;border-radius:10px;background:#102c32;text-align:left}.audio-title{font-size:13px;font-weight:700;margin-bottom:8px;display:flex;gap:12px;flex-wrap:wrap}.audio-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.audio-grid label{font-size:12px;display:flex;flex-direction:column;gap:3px}.audio-grid input{width:100%;padding:0;accent-color:#55d7b1;min-height:24px}.audio-grid output{color:#8de3d0}.audio-grid meter{width:100%;height:10px}.audio-note{margin:7px 0 0!important;max-width:none!important;text-align:left;line-height:1.35!important}
@media(max-width:1150px){.layout{grid-template-columns:185px minmax(0,1fr)}.chat{position:static;min-height:280px}.chat #messages{min-height:170px;max-height:300px}}
@media(max-width:720px){.layout{display:block}.audio-grid{grid-template-columns:1fr}.video-shell{aspect-ratio:16/9;max-height:none}.chat{min-height:250px}}

/* V8 compact desktop stage, left-side member directory, collapsible audio console */
@media(min-width:1050px){.layout{grid-template-columns:minmax(210px,255px) minmax(0,1fr) minmax(275px,330px)}.video-shell{width:min(100%,650px);aspect-ratio:16/8.1;max-height:310px}.room-sidebar{position:sticky;top:10px;max-height:calc(100vh - 22px);overflow-y:auto}.chat{max-height:calc(100vh - 22px);overflow-y:auto}}
#membersDock{margin-top:16px;border-top:1px solid #34515c;padding-top:14px}
#membersDock .members-panel{padding:0;background:transparent;border:0;min-width:0}
#membersDock .members-panel h3{margin-bottom:9px}
#membersDock #memberSearch{width:100%;margin-bottom:8px}
#membersDock #members{max-height:240px;overflow-y:auto}
#membersDock .row{flex-wrap:wrap;gap:5px}
#membersDock button{padding:7px;font-size:11px;min-height:30px}
#membersDock #memberRange{font-size:10px}
.audio-console{padding:0!important;overflow:hidden}
.audio-console summary{padding:12px 14px;cursor:pointer;font-weight:700;list-style-position:inside;color:#dffbf4;display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap}
.audio-console summary:hover{background:#173a40}
.audio-console[open] summary{border-bottom:1px solid #315b60}
.audio-console .audio-grid{padding:12px 14px 0}
.audio-console .audio-note{padding:0 14px 12px}
@media(max-width:1049px){.layout{grid-template-columns:minmax(185px,220px) minmax(0,1fr)}.chat{grid-column:2;position:static;min-height:250px}.video-shell{max-height:300px}}
@media(max-width:720px){.layout{display:block}.room-sidebar{position:static}.chat{max-height:none}.audio-console summary{font-size:13px}}

/* V9 — original, large live celebration effects; never overlay the karaoke video. */
.stage{position:relative;isolation:isolate}
.celebration-layer{position:absolute;inset:0;top:auto;height:210px;overflow:hidden;pointer-events:none;z-index:6;border-radius:12px}
.celebration-caption{position:relative;z-index:7;font-size:13px;font-weight:800;color:#ffe6a1;min-height:0;pointer-events:none}
.celebration-particle{position:absolute;left:var(--x);bottom:-110px;font-size:var(--size);line-height:1;filter:drop-shadow(0 3px 8px #0009);animation:celebrationRise var(--duration) ease-out var(--delay) both;will-change:transform,opacity}
.effect-fireworks{animation-name:celebrationBurst}
.effect-ovation{animation-name:celebrationOvation}
@keyframes celebrationRise{0%{transform:translate3d(0,0,0) rotate(-18deg) scale(.5);opacity:0}15%{opacity:1}65%{transform:translate3d(var(--dx),-190px,0) rotate(18deg) scale(1.2);opacity:1}100%{transform:translate3d(calc(var(--dx) * -0.6),-290px,0) rotate(-24deg) scale(.85);opacity:0}}
@keyframes celebrationBurst{0%{transform:translate3d(0,0,0) scale(.2);opacity:0}30%{transform:translate3d(var(--dx),-100px,0) scale(1.6);opacity:1}70%{transform:translate3d(calc(var(--dx) * -1),-180px,0) scale(1.15);opacity:1}100%{transform:translate3d(var(--dx),-220px,0) scale(.15);opacity:0}}
@keyframes celebrationOvation{0%{transform:translateY(80px) scale(.4);opacity:0}25%,65%{transform:translateY(-90px) scale(1.3) rotate(-10deg);opacity:1}45%{transform:translateY(-110px) scale(1.5) rotate(12deg)}100%{transform:translateY(-240px) scale(.5);opacity:0}}
.ovation-banner{position:absolute;left:4%;right:4%;bottom:75px;font-weight:900;font-size:clamp(17px,2vw,30px);color:#ffdf7a;text-shadow:0 3px 8px #000;animation:bannerPop 3.7s ease both}
@keyframes bannerPop{0%{opacity:0;transform:scale(.5)}20%,75%{opacity:1;transform:scale(1.08)}100%{opacity:0;transform:scale(.9)}}
.celebration-tools{margin-top:12px;text-align:left}.celebration-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}.celebration-head h3{margin:0}.effect-switch{font-size:12px;display:flex;align-items:center;gap:6px}.celebration-buttons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:12px 0}.celebration-buttons button{min-width:0;white-space:normal;font-weight:700;min-height:48px;background:#24464b;border:1px solid #5b8f89}.celebration-buttons button:hover{background:#347266}.color-row{margin-top:10px;align-items:center}.color-row select{background:#152f39;color:#eafff7;border:1px solid #4b827d;border-radius:7px;padding:7px}
.username-color-mint{color:#8cebd2!important}.username-color-rose{color:#ff9bc1!important}.username-color-gold{color:#ffe083!important}.username-color-sky{color:#95d9ff!important}.username-color-violet{color:#d3b4ff!important}.username-color-coral{color:#ffab91!important}
.chat{position:relative}.chat-celebration-layer{position:absolute;inset:65px 6px 85px;pointer-events:none;overflow:hidden;z-index:3}.chat-fly{position:absolute;left:-70px;top:var(--top);font-size:58px;animation:chatZigzag 3.5s ease-in-out var(--delay) both;filter:drop-shadow(0 2px 7px #0009)}
@keyframes chatZigzag{0%{transform:translate(0,0) rotate(-25deg);opacity:0}20%{opacity:1}35%{transform:translate(110px,-45px) rotate(25deg)}65%{transform:translate(215px,38px) rotate(-25deg);opacity:1}100%{transform:translate(410px,-18px) rotate(25deg);opacity:0}}
@media(max-width:900px){.celebration-buttons{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.celebration-particle,.chat-fly,.ovation-banner{animation:none!important;display:none!important}}

/* V10 cultural collection: original interface and CSS motion, emoji placeholders. */
.culture-collection{border-top:1px solid #38585a;margin-top:13px;padding-top:13px}
.culture-buttons{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:8px;margin:10px 0}
.culture-buttons button{background:linear-gradient(135deg,#553342,#6b4b30);border:1px solid #b78368;min-height:47px;white-space:normal}
.culture-buttons button:hover{background:#78543e}
.zodiac-picker{background:#102c32;border:1px solid #395e60;border-radius:9px;padding:10px;margin:9px 0}
.zodiac-picker summary{cursor:pointer;font-weight:700;color:#ffe5a7}
.zodiac-buttons{grid-template-columns:repeat(auto-fit,minmax(135px,1fr))}
.tet-toggle{display:inline-flex;gap:8px;align-items:center;font-weight:700;color:#ffe6ad;margin:8px 0}
.tet-toggle input{min-width:auto;flex:none;accent-color:#d49a54}
.culture-banner{position:absolute;left:3%;right:3%;bottom:70px;text-align:center;font-weight:900;font-size:clamp(16px,2.2vw,31px);color:#ffe29a;text-shadow:0 2px 9px #210700;animation:bannerPop 4.2s ease both;z-index:8}
.tet-decor .stage{border:2px solid #b7854d;box-shadow:inset 0 0 0 1px #6c382e}
.tet-decor .stage-topline::after{content:'🧧 🌼 🏮';font-size:20px}
.tet-decor .celebration-tools{border-color:#a9794b}
.tet-particle{filter:drop-shadow(0 0 7px #ffd15a)}
@media(max-width:600px){.culture-buttons{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.culture-banner{animation:none}}

/* V11: original sticker gallery; independent styling */
.sticker-toolbar{display:flex;align-items:center;gap:9px;margin:8px 0}.sticker-toolbar button{font-size:13px}
.sticker-dialog{width:min(740px,94vw);max-height:82vh;background:#10252d;color:#eaf9f7;border:2px solid #4faaa2;border-radius:16px;padding:18px;box-shadow:0 24px 90px #000b;overflow:auto}
.sticker-dialog::backdrop{background:#031116b8}.sticker-title{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.sticker-title h2{margin:0 0 5px;font-size:22px}.sticker-tabs,.sticker-filters{display:flex;gap:8px;margin:14px 0}.sticker-tabs button{flex:1;background:#203b45}.sticker-tabs button.active{background:#257f74;border:1px solid #75f0ce}.sticker-filters input{flex:1;min-width:0}.sticker-filters select{max-width:205px}
.sticker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:12px;max-height:53vh;overflow:auto;padding:6px}.sticker-tile{min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px;min-height:153px;background:#1b3540;border:1px solid #44636b;border-radius:12px;padding:10px 6px;color:#e8f8f7}.sticker-tile:hover{border-color:#ffe18b;transform:translateY(-2px);background:#28525a}.sticker-tile img{width:104px;height:104px;object-fit:contain;filter:drop-shadow(0 4px 6px #001a)}.sticker-tile span{font-size:12px;line-height:1.3;text-align:center}.chat-sticker{display:block;width:clamp(100px,11vw,150px);height:clamp(100px,11vw,150px);object-fit:contain;animation:stickerArrive .4s ease-out;margin:6px 0}.bubble:has(.chat-sticker){border-left:3px solid #f2b86c}@keyframes stickerArrive{from{opacity:0;transform:scale(.65) rotate(-8deg)}to{opacity:1;transform:scale(1) rotate(0)}}@media(prefers-reduced-motion:reduce){.chat-sticker{animation:none}.sticker-tile:hover{transform:none}}@media(max-width:600px){.sticker-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.sticker-tile img{width:75px;height:75px}.sticker-filters{flex-wrap:wrap}}

/* V12: cleaner gallery, no separate culture/zodiac button walls */
.sticker-dialog{width:min(860px,94vw);max-height:88vh;border:1px solid #5b746f;box-shadow:0 24px 90px #000b;background:#102329;color:#f4efe3;border-radius:20px;padding:22px}
.sticker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(142px,1fr));gap:14px;max-height:53vh;overflow:auto;padding:14px 4px}
.sticker-tile{background:linear-gradient(150deg,#1a3437,#13272d);border:1px solid #446362;border-radius:16px;min-height:174px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;transition:transform .2s,border-color .2s,box-shadow .2s}
.sticker-tile:hover{transform:translateY(-4px);border-color:#d9b46c;box-shadow:0 10px 25px #0007}
.sticker-tile img{width:112px;height:112px;object-fit:contain;filter:drop-shadow(0 7px 8px #0007)}
.chat-sticker{width:150px;max-width:80%;height:auto;filter:drop-shadow(0 5px 9px #0005)}
@media(prefers-reduced-motion:reduce){.sticker-tile{transition:none}.sticker-tile:hover{transform:none}}

/* V13 — art-forward sticker previews, transparent originals */
.sticker-tile{background:radial-gradient(circle at 50% 34%,#355b5a 0%,#1b3438 64%,#13272e 100%);border-color:#527575;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}
.sticker-tile:hover{transform:translateY(-3px);border-color:#f2c978;box-shadow:0 7px 20px #0005}
.sticker-tile img{object-fit:contain;filter:drop-shadow(0 7px 5px #0005)}
.chat-sticker{max-width:164px;max-height:164px;object-fit:contain}

/* V14 expression studio: new original message sticker collection */
.sticker-views{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}.sticker-views button{background:#223c42;color:#d5e9e3;border:1px solid #4e6b6d;border-radius:30px;padding:8px 13px;font-size:12px}.sticker-views button.active{background:#80602b;color:#fff6d8;border-color:#d8b575}.sticker-tile{position:relative;overflow:hidden}.sticker-favorite{position:absolute;right:8px;top:5px;font-size:21px!important;color:#f8d88b;cursor:pointer;padding:3px;line-height:1}.sticker-tile img{transition:transform .25s ease,filter .25s ease}.sticker-tile:hover img{transform:scale(1.12) rotate(-3deg);filter:drop-shadow(0 9px 12px #0009)}.expression-sticker{animation:stickerPop .7s cubic-bezier(.2,1.6,.5,1) both,stickerFloat 3s ease-in-out .8s infinite}.sticker-tile:has(img[src*="hat-hay"]),.sticker-tile:has(img[src*="tuyet-voi"]){border-color:#b18c56}@keyframes stickerPop{0%{opacity:0;transform:scale(.25) rotate(-18deg)}70%{opacity:1;transform:scale(1.18) rotate(6deg)}100%{transform:scale(1) rotate(0)}}@keyframes stickerFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}@media(prefers-reduced-motion:reduce){.expression-sticker{animation:none}.sticker-tile:hover img{transform:none}}

/* V15: clear animated-character labeling and spacious art previews */
.sticker-tile:has(.motion-badge){border-color:#b89154;background:radial-gradient(circle at 50% 35%,#43514c,#162c32 75%)}
.motion-badge{position:absolute;left:7px;top:8px;font-size:9px;letter-spacing:.08em;font-weight:800;color:#f9dfa4;background:#513a24cc;padding:4px 6px;border-radius:7px}
.sticker-tile:has(.motion-badge) img{width:124px;height:124px}
.animated-character{width:174px;max-width:90%;max-height:174px}
@media(prefers-reduced-motion:reduce){.animated-character{animation:none}}

/* V16 community controls */
.social-panel{margin-top:18px;padding:14px;border:1px solid #315b60;border-radius:12px;background:#102a30}.social-panel .row{display:flex;flex-wrap:wrap;gap:6px}.social-panel input{min-width:110px;flex:1}.friend-entry{display:block;width:100%;text-align:left;margin:5px 0}.member-actions{display:inline-flex;gap:3px;margin-left:8px;flex-wrap:wrap}.member-actions button{padding:3px 6px;font-size:11px}.chat-mode{gap:6px;margin:9px 0}.chat-mode button{flex:1}.chat-mode .active{background:#22b7a2;color:#08232b}#pmPanel{min-height:260px}#pmMessages{height:280px;overflow-y:auto;border:1px solid #315b60;border-radius:10px;padding:10px;margin:9px 0}#pmPanel input{width:100%;min-width:0}.sticker-grid .sticker-tile{transition:transform .18s ease,box-shadow .18s ease}.sticker-grid .sticker-tile:hover{transform:translateY(-4px);box-shadow:0 8px 24px #0006}@media(prefers-reduced-motion:reduce){.sticker-grid .sticker-tile{transition:none;transform:none!important}}

/* V17: independent message center */
.pm-overlay[hidden],.pm-dock[hidden]{display:none!important}.pm-overlay{position:fixed;inset:0;z-index:1200;background:rgba(3,10,18,.65);display:flex;align-items:center;justify-content:center;padding:18px}.pm-window{width:min(930px,96vw);height:min(670px,88vh);display:flex;flex-direction:column;border:1px solid #3c6671;border-radius:18px;background:#10262e;color:#f1f9fa;box-shadow:0 25px 90px #000a;overflow:hidden}.pm-header{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;border-bottom:1px solid #31525a;background:#17333d}.pm-header>div{display:flex;gap:9px;align-items:center}.pm-total{font-size:12px;color:#91e6cc}.pm-layout{display:grid;grid-template-columns:minmax(185px,32%) 1fr;min-height:0;flex:1}.pm-contacts{border-right:1px solid #31525a;padding:12px;overflow:auto;display:flex;flex-direction:column;gap:8px}.pm-contacts label{font-size:12px;color:#aac7ce}.pm-conversations{overflow:auto;display:flex;flex-direction:column;gap:5px;margin-top:9px}.pm-contact{position:relative;text-align:left;display:flex;flex-direction:column;align-items:stretch;gap:4px;padding:12px;border:1px solid #32555c;border-radius:11px;background:#1a3942;color:white}.pm-contact.selected{border-color:#68d9bc;background:#25545a}.pm-contact small{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:90%;color:#c3d4d7}.pm-contact em{position:absolute;right:10px;top:10px;background:#e2a850;color:#17252a;padding:2px 7px;border-radius:15px;font-size:11px;font-style:normal}.pm-thread{display:flex;flex-direction:column;min-height:0;min-width:0}.pm-thread-title{padding:16px;border-bottom:1px solid #31525a;font-weight:700}.pm-messages{flex:1;min-height:0;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px}.pm-bubble{max-width:78%;padding:10px 13px;border-radius:13px;display:flex;flex-direction:column;gap:5px;overflow-wrap:anywhere;background:#284852;align-self:flex-start}.pm-bubble.mine{background:#22665d;align-self:flex-end}.pm-bubble small{color:#b9d6da;font-size:11px}.pm-compose{display:flex;gap:8px;padding:12px;border-top:1px solid #31525a}.pm-compose input{min-width:0;flex:1}.pm-dock{position:fixed;right:20px;bottom:18px;z-index:1201;box-shadow:0 8px 35px #0008}.pm-overlay button{cursor:pointer}@media(max-width:580px){.pm-layout{grid-template-columns:130px 1fr}.pm-contacts{padding:6px}.pm-window{height:90vh}.pm-bubble{max-width:95%}.pm-compose{padding:7px}.pm-compose button{padding:8px}}

/* V18: compact, usable PM center */
.pm-overlay{background:rgba(3,10,18,.32);pointer-events:none}
.pm-window{pointer-events:auto;width:min(790px,calc(100vw - 28px));height:min(550px,calc(100vh - 45px));resize:both;min-width:min(500px,95vw);min-height:350px;max-width:calc(100vw - 20px);max-height:calc(100vh - 20px);box-shadow:0 20px 70px #000b}
.pm-header{cursor:move;user-select:none;touch-action:none}
.pm-header button{cursor:pointer}
.pm-layout{grid-template-columns:minmax(180px,31%) minmax(0,1fr)}
.pm-contacts{gap:8px;min-height:0}
.pm-new-row{display:flex;gap:5px;flex:0 0 auto;align-items:stretch}
.pm-new-row input{display:block;flex:1 1 0;width:0;min-width:0;height:39px;max-height:39px;padding:8px}
.pm-new-row button{flex:0 0 40px;height:39px;padding:0;font-size:23px}
.pm-contacts label{flex:0 0 auto}
.pm-list-label{margin-top:9px;border-top:1px solid #31525a;padding-top:10px}
.pm-conversations{flex:1 1 auto;min-height:0;margin-top:0}
.pm-contact{flex:0 0 auto;padding:10px}
.pm-thread-title{padding:12px 16px}
.pm-compose input{height:40px;max-height:40px}
.pm-dock{display:block}
.pm-dock[hidden]{display:none!important}
@media(max-width:580px){.pm-window{min-width:0;width:calc(100vw - 12px);height:75vh}.pm-layout{grid-template-columns:130px minmax(0,1fr)}.pm-new-row button{flex-basis:30px}.pm-contacts{padding:7px}}

/* V19 identity and reference-only screenshot comparison */
header .login-identity{margin-left:auto;white-space:nowrap;font-size:13px;font-weight:700;padding:8px 12px;border:1px solid #458d81;background:#123c3b;color:#d8fff1;border-radius:12px}
header .login-identity[hidden]{display:none}
@media(max-width:700px){header .login-identity{font-size:11px;padding:5px}.reference-heading{padding:12px}.reference-samples{gap:10px}}

/* V19.1 test-only screenshot thumbnails */

/* V20 photo-illustrated áo dài cards */
.sticker-tile img[src$='.webp']{object-fit:contain;background:#f5f1ed;border-radius:8px;max-height:142px;width:100%}

/* V20.2 — three-column art-first sticker gallery, detailed portrait crops */
.sticker-dialog{width:min(960px,96vw);max-height:90vh;overflow:hidden;display:flex;flex-direction:column}
.sticker-dialog:not([open]){display:none}
.sticker-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-height:52vh;overflow-y:auto;overflow-x:hidden;padding:8px}
.sticker-tile{min-height:238px;padding:12px;gap:10px}
.sticker-tile img{width:100%;height:184px;object-fit:contain}
.sticker-tile img[src*="aodai-"]{width:100%;height:195px;max-height:none;object-fit:contain;background:#f7f3ed;border-radius:12px}
.sticker-tile .sticker-zoom{position:absolute;left:9px;top:9px;z-index:2;border-radius:20px;padding:6px 10px;background:#0a2b33e8;color:white;border:1px solid #7cc6bb;font-size:12px;cursor:pointer}
.sticker-preview{width:min(640px,94vw);max-height:92vh;overflow:auto;background:#12272e;color:#f2faf9;border:1px solid #79c9b9;border-radius:18px;padding:18px;text-align:center;box-shadow:0 25px 85px #000b}
.sticker-preview::backdrop{background:#06131bd4}.preview-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.sticker-preview img{display:block;max-height:65vh;max-width:100%;width:auto;margin:0 auto;border-radius:10px;background:#f7f3ed;object-fit:contain}
.sticker-preview button{cursor:pointer}.sticker-preview p{margin:12px auto}
.chat-sticker[src*="aodai-"]{width:200px;max-width:95%;max-height:260px;object-fit:contain}
@media(max-width:650px){.sticker-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.sticker-tile{min-height:194px}.sticker-tile img[src*="aodai-"]{height:155px}.sticker-dialog{padding:12px}}

/* V21 Sunshine Edition: original bright Vietnamese social karaoke design */
:root{color:#253b4d;background:#f4fbff;--line:#d8e8f0;--panel:#ffffff;--mint:#008e83;--sky:#158fce}
body{background:radial-gradient(circle at 90% 5%,#ffefc5 0,transparent 31%),radial-gradient(circle at 5% 14%,#d2f7f3 0,transparent 33%),#f3faff;color:#253b4d}
header{background:linear-gradient(110deg,#0aabc1,#3eafe2 60%,#77d5c3);border:0;box-shadow:0 5px 24px #147aa529;color:white;padding:18px 24px}
header h1,header span{color:white}header h1{font-size:25px}header #loginIdentity,header #logout{display:none!important}
main{max-width:2000px;padding:15px}.layout{grid-template-columns:minmax(230px,265px) minmax(420px,1fr) minmax(265px,315px);gap:14px;align-items:start}
.card,.subpanel,.social-panel,.stage,.audio-console,.sticker-dialog,.pm-overlay,.pm-panel{background:#fff;color:#263c4e;border-color:#d9e9f0;box-shadow:0 6px 22px #1d86a10d}
.card{border-radius:18px}.room-sidebar,.entertainment{display:flex;flex-direction:column;gap:13px}.main{display:flex;flex-direction:column;gap:12px;min-width:0}
h2,h3,.card h2{color:#225477}.muted,.small{color:#6c8190}.section-eyebrow{color:#008e9e}
input,select,textarea{background:#f6fbfe;color:#27435a;border:1px solid #d1e3ec}input::placeholder{color:#8ba0ad}
button{background:linear-gradient(120deg,#0a9fbd,#22b9a8);border:1px solid #0a9cb4;color:white;box-shadow:0 2px 8px #16a5ba20}button.secondary{background:#eaf7fc;border-color:#cde6f0;color:#25718c}button:hover:not(:disabled){filter:brightness(1.05)}
.pill{background:#fff4cc;border-color:#ffe19b;color:#9d690c}.room{background:#f6fbff;border-color:#e0edf3;color:#31586c}.room.active{background:#ddf9f2;border-color:#48cbb7;box-shadow:inset 3px 0 #17ad9b}.room small{color:#7894a3}
.profile-card{display:flex;gap:12px;align-items:center;padding:12px;background:linear-gradient(120deg,#e5f9fb,#fff9e8);border:1px solid #d2f0ed;border-radius:15px}.profile-avatar{width:63px;height:63px;border-radius:50%;font-size:24px;flex-shrink:0;background:linear-gradient(135deg,#fc8d86,#f8bf57);border:3px solid white;box-shadow:0 3px 12px #ff9f6b42}.profile-meta{display:grid;gap:3px;min-width:0}.profile-meta strong{color:#195f7d;overflow-wrap:anywhere}.profile-meta small{font-size:11px;color:#4e9585}.profile-signout{background:transparent!important;border:0!important;color:#1586ad!important;padding:2px!important;min-height:0!important;text-align:left;box-shadow:none!important;font-size:12px}
.rooms-expand{border:1px solid #dbeaf1;border-radius:14px;padding:10px;background:#fff}.rooms-expand summary,.stage-collapse>summary{cursor:pointer;font-weight:800;color:#187b9b;padding:10px}.rooms-expand #rooms{max-height:270px;overflow:auto}
.hand-panel{padding:14px;border-radius:14px;background:#fff8df;border:1px solid #f4dfa4}.hand-panel button{width:100%;background:linear-gradient(120deg,#ff8c67,#f5ad4e);border-color:#eea45e}.hand-panel ol{padding-left:20px;font-size:13px}.hand-panel h3{margin-bottom:8px}
.song-panel{order:4}.room-heading{border-bottom:1px solid #e5eff3;flex-wrap:wrap}.occupancy{background:#e7f8fc;color:#117d9d;border-radius:30px;padding:8px 12px;font-size:12px;font-weight:700}
.conversation{display:flex;flex-direction:column;min-height:490px;box-shadow:0 10px 30px #3ca9bf13}.conversation h2{margin-bottom:5px}.conversation #messages{height:clamp(320px,48vh,620px);min-height:320px;overflow:auto;background:#fbfeff;border:1px solid #e3f0f5;border-radius:13px;padding:12px}.conversation .sticker-toolbar{margin-top:9px}.conversation .bubble{color:#334c5d;border-color:#e3edf1}
.stage-collapse{border:1px solid #dbeaf1;border-radius:14px;background:white;overflow:hidden}.stage-collapse>summary{background:linear-gradient(90deg,#e4f8fc,#fff5df);padding:14px}.stage-collapse .stage{margin:12px}.stage{background:#f5fbfe}.stage-topline{color:#287c91}.stage .video-shell{background:#153b50}.stage .performer-panel{background:#e7f7fb;color:#246784}
.entertainment .celebration-tools{order:2}.entertainment .audio-console{order:3}.celebration-buttons{display:grid;grid-template-columns:1fr 1fr;gap:7px}.celebration-buttons button{font-size:12px;padding:8px}.color-row{flex-wrap:wrap}.camera-panel{background:#f3fbff;border:1px solid #d9edf6;border-radius:14px;padding:12px}.camera-preview{height:155px;background:linear-gradient(140deg,#e1f6fc,#fff3d7);border:2px dashed #b5e2e8;border-radius:12px;display:grid;place-items:center;overflow:hidden;position:relative}.camera-preview video{height:100%;width:100%;object-fit:cover;display:none}.camera-preview.active video{display:block}.camera-preview.active #cameraPlaceholder{display:none}.camera-actions{margin-top:9px;flex-wrap:wrap}.camera-actions button{flex:1;font-size:12px}
.username-color-mint{color:#008b78!important}.username-color-rose{color:#d3488b!important}.username-color-gold{color:#b97909!important}.username-color-sky{color:#1687c9!important}.username-color-violet{color:#8853c5!important}.username-color-coral{color:#e2644e!important}
#status{color:#567a8c}.auth{background:white}.sticker-dialog,.sticker-dialog *{color:inherit}
@media(max-width:1100px){.layout{grid-template-columns:minmax(210px,260px) minmax(0,1fr)}.entertainment{grid-column:2}.conversation #messages{height:420px}}
@media(max-width:720px){.layout{display:flex;flex-direction:column}.layout>*{width:100%}.room-sidebar{order:1}.main{order:2}.entertainment{order:3}.conversation #messages{height:360px}.card{padding:12px}}

/* V21.1 — stage-first room and compact floating PMs */
.main{display:flex;flex-direction:column;gap:10px;min-width:0}
.main>.stage-collapse{order:1;border:2px solid #6dd7d2;border-radius:18px;background:linear-gradient(160deg,#f2ffff,#fff8ed);box-shadow:0 5px 20px #007c8530;overflow:hidden}
.main>.stage-collapse>summary{padding:13px 17px;font-weight:800;color:#006b79;background:#d9faf6;cursor:pointer}
.main>.stage-collapse .video-shell{width:min(100%,940px);max-height:490px;aspect-ratio:16/9}
.main>.stage-song-queue{order:2;margin:0;border:1px solid #b9e5e4;background:#f5fffd}
.main>.conversation{order:3;position:relative;top:auto;min-height:360px;margin:0}
.main>.conversation #messages{min-height:270px;max-height:540px}
.main>.two{order:4;display:none}
.main>.section-eyebrow,.main>.room-heading{order:0}
#pmChatTab,#pmPanel{display:none!important}
.pm-overlay:not([hidden]){position:fixed!important;inset:0!important;pointer-events:none!important;background:transparent!important;z-index:1100!important;display:block!important}
.pm-overlay .pm-window{pointer-events:auto;position:fixed!important;left:auto;top:auto;right:22px;bottom:20px;margin:0!important;width:min(440px,calc(100vw - 30px));height:min(490px,calc(100vh - 50px));max-width:calc(100vw - 24px);max-height:calc(100vh - 24px);resize:both;overflow:hidden;box-shadow:0 14px 55px #22505b55;border:2px solid #59cfc7;border-radius:15px}
.pm-overlay .pm-window.pm-large{width:min(820px,calc(100vw - 30px));height:min(680px,calc(100vh - 45px))}
.pm-window .pm-layout{height:calc(100% - 55px);min-height:0}
.pm-window .pm-thread,.pm-window .pm-contacts{min-height:0}
.pm-dock:not([hidden]){position:fixed;right:18px;bottom:18px;z-index:1101}
#mic:not(:disabled){background:#ffad36;color:#263348;font-weight:900;box-shadow:0 0 0 3px #ffe4a4}
#handQueue{max-height:180px;overflow:auto}
@media(max-width:900px){.pm-overlay .pm-window{right:8px;bottom:8px;width:min(440px,calc(100vw - 16px))}.main>.stage-collapse .video-shell{max-height:none}}

/* V21.2 — stage and audience chat are equal attractions */
@media(min-width:1250px){
 .layout{grid-template-columns:minmax(190px,240px) minmax(0,1fr) minmax(185px,225px);gap:12px}
 .main{display:grid!important;grid-template-columns:minmax(0,1.15fr) minmax(360px,1fr);align-items:start;gap:12px}
 .main>.section-eyebrow,.main>.room-heading{grid-column:1/-1}
 .main>.stage-collapse{grid-column:1;grid-row:3;min-width:0}
 .main>.conversation{grid-column:2;grid-row:3 / span 2;min-width:0;align-self:stretch}
 .main>.stage-song-queue{grid-column:1;grid-row:4}
 .main>.two{display:none}
 .main>.conversation #messages{height:clamp(370px,49vh,640px);max-height:none;min-height:300px}
}
.chat-party{padding:10px;background:#f0fbfc;border:1px solid #bde6e5}
.party-toggle{border:1px solid #c5e7eb;border-radius:12px;background:#f7fdfd;margin:6px 0}
.party-toggle>summary{cursor:pointer;font-weight:800;color:#136b80;padding:10px}
.party-toggle .celebration-head{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.party-toggle .celebration-buttons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
.party-toggle .celebration-buttons button{font-size:11px;min-height:44px;padding:5px 3px}
.party-toggle .celebration-tools p{font-size:11px;margin:6px 0}
.conversation{isolation:isolate;overflow:hidden}
.conversation #messages{position:relative;z-index:1}
.conversation .chat-celebration-layer{z-index:5;pointer-events:none;overflow:hidden;inset:0;border-radius:15px}
.conversation .celebration-particle{max-font-size:60px;transform-origin:center}
.chat-sticker[src*="aodai-"]{width:105px!important;height:145px!important;max-width:100%!important;max-height:145px!important;object-fit:contain!important}
.sticker-tile img[src*="aodai-"]{height:95px;width:85px;object-fit:contain}
@media(max-width:1249px){.party-toggle .celebration-buttons{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* V21.3 — two equal attractions: karaoke stage and audience chat */
@media(min-width:1180px){
 .layout{grid-template-columns:minmax(190px,230px) minmax(0,1fr) minmax(180px,215px)}
 .main{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:start}
 .main>.section-eyebrow,.main>.room-heading{grid-column:1/-1}
 .main>.stage-collapse{grid-column:1;grid-row:3;min-width:0}
 .main>.conversation{grid-column:2;grid-row:3;min-width:0;min-height:650px}
 .main>.two{grid-column:1/-1;grid-row:4}
 .main .video-shell{aspect-ratio:16/9;max-height:none;width:100%}
 .conversation .audience-view #messages{height:clamp(410px,57vh,670px);max-height:none;min-height:410px}
}
.conversation{display:flex;flex-direction:column;gap:7px}
.audience-view{position:relative;isolation:isolate;min-height:0;overflow:hidden;border-radius:13px}
.audience-view #messages{position:relative;z-index:1;overflow-y:auto}
.audience-view .chat-celebration-layer{position:absolute;inset:0!important;z-index:4;pointer-events:none;overflow:hidden}
.conversation .party-toggle{order:7;margin-top:5px}
.conversation .sticker-toolbar{order:5;margin-top:0}
.conversation #roomComposer{order:6}
.conversation .chat-mode{order:1}
.conversation .audience-view{order:2}
.conversation #pmPanel{order:3}
.conversation .party-toggle summary{cursor:pointer;background:#e6faf8;border-radius:9px;padding:10px;color:#0d5863;font-weight:700}
.conversation .party-toggle[open] .chat-party{padding:9px}
.conversation .celebration-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.conversation .celebration-buttons button{white-space:normal;min-width:0}
.chat-sticker[src*="aodai-"]{width:90px!important;height:120px!important;max-height:120px!important}
.firework-svg{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 0 5px #fff7)}
.firework-burst{transform-box:fill-box;transform-origin:center;animation:burstBloom 1.3s ease-out both}
.firework-ray{stroke-dasharray:0 220;animation:rayBloom 1.3s ease-out both}
@keyframes burstBloom{0%{opacity:0;transform:scale(.08)}25%{opacity:1}75%{opacity:1}100%{opacity:0;transform:scale(1.25)}}
@keyframes rayBloom{0%{stroke-dasharray:0 220}30%{stroke-dasharray:130 220}100%{stroke-dasharray:0 220}}
@media(prefers-reduced-motion:reduce){.firework-burst,.firework-ray{animation:none;opacity:.65;stroke-dasharray:130 220}}

/* V21.4: celebration visuals only in the chat audience; do not block clicks. */
.party-firework-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:5;filter:drop-shadow(0 0 3px #ffd7a4)}
.party-dancer{position:absolute;top:0;left:0;line-height:1;pointer-events:none;z-index:6;filter:drop-shadow(0 3px 5px #1119);will-change:transform,opacity}
@media(prefers-reduced-motion:reduce){.party-firework-canvas,.party-dancer{display:none!important}}

/* V21.5: premium gallery artwork remains compact in messages */
.chat-sticker[src*="gift-"]{width:112px;max-height:130px;object-fit:contain}
.sticker-tile img[src*="gift-"]{height:100px;object-fit:contain}

/* V21.6: audience-only premium celebration artwork */
.premium-dancer{height:auto;object-fit:contain;filter:drop-shadow(0 5px 10px #0007) drop-shadow(0 0 7px #fff8);pointer-events:none}
.ovation-crowd{position:absolute;bottom:0;left:14%;width:72%;max-height:125px;object-fit:contain;z-index:6;pointer-events:none;animation:ovationRise .8s ease-out both}
@keyframes ovationRise{from{transform:translateY(115%);opacity:0}to{transform:translateY(0);opacity:1}}

/* V21.8: premium art displayed without square UI tile in chat; gentle motion. */
.chat-sticker[src*="gallery-"]{background:transparent!important;border:0!important;box-shadow:none!important;object-fit:contain;max-width:126px;max-height:126px;width:auto;height:auto}
.premium-chat-animated{animation:premiumStickerFloat 3.8s ease-in-out infinite;transform-origin:50% 75%}
@keyframes premiumStickerFloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-5px) rotate(2deg)}}
.ovation-stage{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:8;background:linear-gradient(0deg,rgba(19,32,73,.35),transparent 65%)}
.ovation-title{position:absolute;bottom:154px;left:12%;right:12%;text-align:center;font-weight:900;letter-spacing:.09em;font-size:clamp(13px,1.8vw,24px);color:#fff0b3;text-shadow:0 2px 7px #4c2565,0 0 15px #ffb34c;animation:ovTitle 5.8s ease both}
.ovation-people{position:absolute;bottom:0;left:4%;width:92%;height:155px;display:flex;justify-content:space-around;align-items:flex-end;gap:4px}
.ovation-person{position:relative;width:9%;max-width:54px;height:117px;transform:translateY(155px);animation:ovStand .9s cubic-bezier(.2,1.2,.3,1) forwards;animation-delay:var(--delay)}
.ov-head{position:absolute;left:32%;top:7px;width:36%;aspect-ratio:1;border-radius:50%;background:linear-gradient(140deg,#ffe0b2,#d99168);box-shadow:0 -4px 0 2px #41314b}
.ov-body{position:absolute;left:18%;top:42px;width:64%;height:85px;border-radius:18px 18px 4px 4px;background:var(--shirt);box-shadow:inset -7px -3px 0 #0002}
.ov-arm{position:absolute;top:45px;width:16%;height:56px;border-radius:15px;background:var(--shirt);transform-origin:50% 90%;animation:ovClap .46s ease-in-out infinite alternate;animation-delay:var(--delay)}
.ov-left{left:16%;transform:rotate(-43deg)}.ov-right{right:16%;transform:rotate(43deg);animation-name:ovClapRight}
.ov-arm i{display:block;position:absolute;top:-9px;left:-2px;width:120%;height:15px;background:#e8b38e;border-radius:9px}
.ovation-star{position:absolute;color:#ffdf72;font-size:21px;text-shadow:0 0 12px #fff0a0;animation:ovSpark 1.8s ease-in-out infinite}
@keyframes ovStand{to{transform:translateY(0)}}@keyframes ovClap{to{transform:rotate(-75deg)}}@keyframes ovClapRight{to{transform:rotate(75deg)}}@keyframes ovSpark{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:1;transform:scale(1.3)}}@keyframes ovTitle{0%,100%{opacity:0;transform:translateY(12px)}20%,80%{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.premium-chat-animated,.ovation-person,.ov-arm,.ovation-star,.ovation-title{animation:none!important}.ovation-person{transform:none}.ovation-title{opacity:1}}

/* V21.9: stage/chat size selector; desktop only. Smaller screens retain stacked layout. */
.stage-size-controls{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin-top:9px}
.stage-size-controls label{font-size:12px;font-weight:700;color:#14576a}
.stage-size-controls select{max-width:100%;font-size:12px;padding:7px;border:1px solid #a9dcd9;border-radius:8px;background:#f3fffd;color:#153a4b}
.stage-size-controls #stageSizeHint{font-size:11px}
@media(min-width:1180px){
 .main.layout-chat-focus{grid-template-columns:minmax(0,.67fr) minmax(0,1.33fr)!important}
 .main.layout-balanced{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
 .main.layout-stage-focus{grid-template-columns:minmax(0,1.33fr) minmax(0,.67fr)!important}
 .main.layout-chat-focus>.conversation #messages{height:clamp(480px,66vh,820px)!important;min-height:450px}
 .main.layout-stage-focus>.conversation #messages{height:clamp(350px,48vh,620px)!important}
 .main.layout-chat-focus .video-controls{display:flex;flex-wrap:wrap}
 .main.layout-chat-focus .video-controls input{min-width:120px;flex:1 1 100%}
}

/* V21.11 illustrated sticker motion */
.sticker-tile img[src*="new-"]{animation:klFloat 3.4s ease-in-out infinite;object-fit:contain}
.chat-sticker[src*="new-"]{animation:klFloat 3.4s ease-in-out infinite;object-fit:contain;max-height:240px}
@keyframes klFloat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-7px) rotate(1deg)}}
@media(prefers-reduced-motion:reduce){.sticker-tile img[src*="new-"],.chat-sticker[src*="new-"]{animation:none}}

/* V21.15 — restore original large áo dài presentation in gallery and chat. */
.sticker-grid:has(.sticker-tile img[src*="aodai-"]){align-items:stretch}
.sticker-tile:has(img[src*="aodai-"]){min-height:345px;padding:12px 8px}
.sticker-tile img[src*="aodai-"]{width:100%;height:285px;max-height:none;object-fit:contain;background:transparent;border-radius:0}
.chat-sticker[src*="aodai-"]{width:300px;max-width:min(95%,300px);height:auto;max-height:440px;object-fit:contain}
@media(max-width:650px){.sticker-tile:has(img[src*="aodai-"]){min-height:270px}.sticker-tile img[src*="aodai-"]{height:215px}.chat-sticker[src*="aodai-"]{width:240px;max-height:360px}}

/* V21.16: each celebration owns its own overlay, permitting up to four simultaneous effects. */
.party-effect-host{position:absolute;inset:0;overflow:hidden;pointer-events:none;}
.ovation-upward-gif{position:absolute;left:50%;bottom:0;width:min(94%,600px);height:auto;max-height:100%;object-fit:contain;transform:translateX(-50%);pointer-events:none;}
@media(prefers-reduced-motion:reduce){.ovation-upward-gif{display:none}}

/* V21.17: override old !important thumbnail constraints, including room chat. */
.conversation #messages img.chat-sticker[src*="aodai-"]{width:300px!important;height:auto!important;max-width:min(95%,300px)!important;max-height:440px!important;object-fit:contain!important;display:block!important;}
.sticker-dialog .sticker-grid .sticker-tile img[src*="aodai-"]{width:100%!important;height:285px!important;max-height:none!important;object-fit:contain!important;}
/* Visible celebration over room chat; no sideways motion. */
.conversation{position:relative!important;}
.conversation #chatCelebrationLayer{position:absolute!important;inset:55px 8px 100px!important;display:block!important;overflow:hidden!important;z-index:30!important;pointer-events:none!important;}
.conversation #chatCelebrationLayer .party-effect-host{position:absolute!important;inset:0!important;display:block!important;z-index:1!important;}
.conversation #chatCelebrationLayer .ovation-upward-gif{position:absolute!important;left:50%!important;bottom:-10%!important;width:min(90%,560px)!important;max-width:90%!important;max-height:70%!important;height:auto!important;object-fit:contain!important;opacity:1!important;display:block!important;animation:ovationRiseV2117 6.6s linear both!important;}
@keyframes ovationRiseV2117{0%{transform:translate(-50%,35%);opacity:0}12%{opacity:1}85%{opacity:1}100%{transform:translate(-50%,-85%);opacity:0}}
@media(max-width:650px){.conversation #messages img.chat-sticker[src*="aodai-"]{width:240px!important;max-height:360px!important}.sticker-dialog .sticker-grid .sticker-tile img[src*="aodai-"]{height:215px!important}}

/* V21.18: restore celebration prominence and ensure the applause image is visible. */
.conversation #chatCelebrationLayer{inset:90px 4px 85px!important;z-index:80!important;visibility:visible!important;}
.conversation #chatCelebrationLayer .party-effect-host{overflow:hidden!important;}
.conversation #chatCelebrationLayer .party-dancer{max-width:none!important;max-height:none!important;filter:drop-shadow(0 5px 10px #0007)!important;}
.conversation #chatCelebrationLayer .ovation-upward-gif{width:min(98%,720px)!important;max-width:98%!important;max-height:none!important;bottom:-15%!important;animation:ovationRiseV2118 6.6s linear forwards!important;visibility:visible!important;}
@keyframes ovationRiseV2118{0%{transform:translate(-50%,50%);opacity:0}12%{opacity:1}82%{opacity:1}100%{transform:translate(-50%,-90%);opacity:0}}
.ovation-fallback{position:absolute;bottom:0;left:5%;width:90%;text-align:center;font-size:34px;color:#f6c94b;animation:ovationFallback 6s linear both;}
@keyframes ovationFallback{from{transform:translateY(100%)}to{transform:translateY(-600%)}}
.conversation #messages img.chat-sticker[src*="aodai-"]{width:300px!important;max-height:440px!important;}

/* V21.19: correct young-crowd artwork, large party effects, stable sizing. */
.conversation #chatCelebrationLayer .ovation-upward-gif{width:min(98%,850px)!important;max-width:98%!important;max-height:85%!important;bottom:0!important;object-fit:contain!important;animation:klOvationUp 6.6s linear both!important;}
@keyframes klOvationUp{0%{transform:translate(-50%,90%);opacity:0}15%{opacity:1}75%{opacity:1}100%{transform:translate(-50%,-95%);opacity:0}}
.conversation #chatCelebrationLayer .party-dancer{width:185px!important;max-width:none!important;max-height:none!important;height:auto!important;}
.conversation #chatCelebrationLayer .party-firework-canvas{width:100%!important;height:100%!important;filter:drop-shadow(0 0 7px #ffe08c)!important;}

/* V21.20: animation viewport is measured from #messages in JS; override older inset rules. */
.conversation #chatCelebrationLayer{inset:auto!important;overflow:hidden!important;z-index:80!important;pointer-events:none!important;}
.conversation #chatCelebrationLayer .party-effect-host{inset:0!important;overflow:hidden!important;}
.conversation #chatCelebrationLayer .ovation-upward-gif{width:100%!important;max-width:100%!important;max-height:none!important;height:auto!important;bottom:auto!important;top:0!important;object-fit:contain!important;animation:klOvationFullRise 7.4s linear both!important;}
@keyframes klOvationFullRise{0%{transform:translate(-50%,110%);opacity:0}10%{opacity:1}85%{opacity:1}100%{transform:translate(-50%,-115%);opacity:0}}
.conversation #chatCelebrationLayer .party-dancer{width:185px!important;max-width:none!important;}

/* V21.21 root cause fix: audience-view owns the effect layer; do not offset
   it against the conversation container. Older V21.20 rules used inset:auto. */
.conversation .audience-view{position:relative!important;overflow:hidden!important;isolation:isolate!important;}
.conversation .audience-view #chatCelebrationLayer{
 position:absolute!important;inset:0!important;top:0!important;right:0!important;
 bottom:0!important;left:0!important;width:100%!important;height:100%!important;
 z-index:80!important;display:block!important;visibility:visible!important;
 overflow:hidden!important;pointer-events:none!important;
}
.conversation .audience-view #chatCelebrationLayer .party-effect-host{
 position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
 overflow:hidden!important;display:block!important;
}
.conversation .audience-view #chatCelebrationLayer .ovation-upward-gif{
 position:absolute!important;left:50%!important;top:auto!important;bottom:0!important;
 width:100%!important;max-width:100%!important;height:auto!important;max-height:none!important;
 animation:klOvationFixed 7.2s linear both!important;
}
@keyframes klOvationFixed{
 0%{transform:translate(-50%,110%);opacity:0}
 12%{opacity:1}80%{opacity:1}
 100%{transform:translate(-50%,-115%);opacity:0}
}

/* V21.28: Nonmodal dock: chat stays visible while browsing and sending stickers. */
.sticker-dialog[open]{position:fixed!important;top:72px!important;right:12px!important;left:auto!important;bottom:12px!important;margin:0!important;width:min(370px,32vw)!important;height:calc(100dvh - 84px)!important;max-height:none!important;max-width:none!important;padding:12px!important;z-index:1100!important;overflow:hidden!important;display:flex!important;flex-direction:column!important;border-radius:14px!important;box-shadow:0 12px 38px #0005!important}
.sticker-dialog[open] .sticker-title h2{font-size:17px!important}
.sticker-dialog[open] .sticker-title p{font-size:11px!important}
.sticker-dialog[open] .sticker-tabs,.sticker-dialog[open] .sticker-filters{margin:6px 0!important;flex-wrap:wrap}
.sticker-dialog[open] .sticker-filters select{max-width:100%;width:100%}
.sticker-dialog[open] .sticker-grid{flex:1!important;min-height:0!important;overflow-y:auto!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
.sticker-dialog[open] .sticker-tile{min-height:130px!important}
.sticker-dialog[open] .sticker-tile img{max-height:115px!important}
.sticker-dialog[open] .sticker-tile img[src*="aodai-"]{height:135px!important}
@media(max-width:800px){.sticker-dialog[open]{top:auto!important;bottom:0!important;right:0!important;width:min(100vw,430px)!important;height:min(46dvh,430px)!important;padding:8px!important}.sticker-dialog[open] .sticker-title h2{font-size:15px!important}.sticker-dialog[open] .sticker-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}}

/* V21.29 — original stage lighting, synchronized by existing WebSocket effects */
.kl-disco-scene,.kl-spotlight-scene{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:14px;background:radial-gradient(ellipse at 50% 25%,#7436aa55,transparent 75%)}
.kl-disco-ball{position:absolute;top:3%;left:43%;font-size:clamp(45px,8vw,90px);filter:drop-shadow(0 0 18px #a9f5ff);animation:kl-ball 2s ease-in-out infinite alternate;z-index:2}
.kl-disco-beam,.kl-spotlight-beam{position:absolute;left:50%;top:12%;width:22%;height:90%;transform-origin:50% 0%;background:linear-gradient(to bottom,#ffffff90,transparent 80%);clip-path:polygon(47% 0,53% 0,100% 100%,0 100%);mix-blend-mode:screen;opacity:.48;filter:hue-rotate(calc(var(--beam-index,0)*51deg));animation:kl-sweep 3s ease-in-out infinite alternate;animation-delay:calc(var(--beam-index,0)*-.37s)}
.kl-spotlight-beam{top:0%;height:100%;width:34%;filter:hue-rotate(calc(var(--spot-index,0)*75deg));animation-delay:calc(var(--spot-index,0)*-.6s)}
.kl-disco-note{position:absolute;font-size:clamp(20px,4vw,46px);color:#ffe978;text-shadow:0 0 12px #ff4bdc;animation:kl-float 3.2s ease-in-out infinite alternate}
.kl-party-title{position:absolute;bottom:9%;left:0;right:0;text-align:center;color:#fff9c0;text-shadow:0 0 12px #f54ee5,0 2px 8px #000;font-size:clamp(18px,3vw,35px);z-index:3}
.stage.kl-singer-live{box-shadow:inset 0 0 35px #8e63ff66,0 0 18px #63cfff44;position:relative}
.kl-singer-banner{position:absolute;top:7px;right:12px;z-index:5;background:#191638dc;color:#fff1a3;border:1px solid #f0d578;border-radius:12px;padding:6px 12px;font-weight:700;pointer-events:none;max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@keyframes kl-ball{to{transform:rotate(16deg) scale(1.12)}}
@keyframes kl-sweep{from{transform:rotate(-46deg)}to{transform:rotate(44deg)}}
@keyframes kl-float{to{transform:translate(14px,-45px) rotate(15deg);opacity:.35}}
@media(prefers-reduced-motion:reduce){.kl-disco-ball,.kl-disco-beam,.kl-spotlight-beam,.kl-disco-note{animation:none!important}}

/* V21.30 listener audio controls */
.room-listening-controls{display:grid;gap:8px;padding:12px;margin:10px 0;border:1px solid rgba(128,170,205,.35);border-radius:12px;background:rgba(38,77,105,.12)}
.room-listening-controls label{font-weight:600}.room-listening-controls input[type=range]{width:100%}.room-listening-controls button{max-width:270px}

/* V21.31 — chat-confined, brighter celebrations */
.audience-view{position:relative;overflow:hidden}
.kl-disco-scene{background:radial-gradient(ellipse at 50% 18%,#a433d780,#100c3c99 70%,#0d0b2999)}
.kl-disco-ball{font-size:clamp(78px,12vw,140px);left:40%;top:1%;filter:drop-shadow(0 0 24px #7ef9ff) drop-shadow(0 0 14px #ffe17a)}
.kl-disco-beam{opacity:.8;width:29%;filter:hue-rotate(calc(var(--beam-index,0)*57deg)) saturate(2)}
.kl-disco-note{font-size:clamp(32px,5vw,64px);text-shadow:0 0 18px #ff40ec,0 0 30px #45eaff;animation:kl-float 2.2s ease-in-out infinite alternate}
.kl-spotlight-scene{background:radial-gradient(ellipse at 50% 35%,#d39a4570,transparent 70%)}
.kl-spotlight-beam{opacity:.8;width:45%;background:linear-gradient(to bottom,#fff4cbb8,#f5ae4590 40%,transparent 95%)}
#joinRoomMusic{margin:8px 0;background:#174e59;color:#fff;font-weight:700}
.music-level{display:block;margin:10px 0}.music-level input[type=range]{display:block;width:100%}
@media(prefers-reduced-motion:reduce){.kl-disco-scene,.kl-spotlight-scene{animation:none}}

/* V21.32: respectful embedded playback feedback */
.youtube-playback-notice{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;margin:8px 0;border:1px solid #d5e2e8;border-radius:10px;background:#f4fbfc;color:#204b58;font-size:13px;line-height:1.45}
.youtube-playback-notice[hidden]{display:none!important}
.youtube-playback-notice[data-level="error"]{background:#fff4ef;border-color:#e9b6a7;color:#843d2b}
.youtube-playback-notice[data-level="waiting"]{background:#fff9e7;border-color:#ead58e;color:#70540d}
.youtube-playback-notice button{margin-left:auto}


/* V21.41 original synchronized performance themes */
.kl-theme-group{flex:1 1 100%;border:1px solid #526185;border-radius:12px;padding:9px;margin:5px 0}.kl-theme-group>strong{display:block;margin-bottom:8px}.kl-theme-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:7px}.kl-theme-choices button{min-height:40px;font-size:12px}.kl-persistent-party{isolation:isolate}.kl-persistent-party .kl-theme-badge{position:absolute;top:7%;left:0;right:0;text-align:center;color:#fff;font-weight:800;font-size:clamp(12px,1.7vw,19px);text-shadow:0 2px 10px #000;z-index:4;overflow-wrap:anywhere;padding:0 8px}.kl-persistent-party.kl-stage-large .kl-spotlight-scene{min-height:250px;background-color:#100b2a}.kl-stage-platform{position:absolute;bottom:0;left:8%;width:84%;height:22%;border-radius:50% 50% 0 0;background:radial-gradient(ellipse at center,#ffffff80,#5e4a9480 45%,#15132d);box-shadow:0 -8px 30px #fff5;z-index:1}.kl-stage-large .kl-party-title{bottom:24%;z-index:4}.kl-persistent-party[data-theme="rainbow-disco"] .kl-disco-scene,.kl-persistent-party[data-theme="rainbow-stage"] .kl-spotlight-scene{background:repeating-conic-gradient(from 10deg at 50% 20%,#e5467066 0 22deg,#edc85355 24deg 44deg,#54d5ae66 46deg 66deg,#6a80ec66 68deg 88deg,#121129 90deg 120deg)}.kl-persistent-party[data-theme="fire-ice-disco"] .kl-disco-scene{background:linear-gradient(115deg,#f0443366 0 48%,#0e1430 50%,#25c5f177 52% 100%)}.kl-persistent-party[data-theme="neon-disco"] .kl-disco-scene{background:repeating-radial-gradient(circle at 50% 60%,#ec2db755 0 12px,#1b1046 16px 36px,#5c3cdb99 39px 42px)}.kl-persistent-party[data-theme="gold-vip-disco"] .kl-disco-scene,.kl-persistent-party[data-theme="superstar-stage"] .kl-spotlight-scene{background:radial-gradient(ellipse at 50% 30%,#d7a333a0,#291a11 65%,#090811)}.kl-persistent-party[data-theme="galaxy-disco"] .kl-disco-scene,.kl-persistent-party[data-theme="moonlight-stage"] .kl-spotlight-scene{background:radial-gradient(circle at 70% 18%,#f5f5e4 0 15px,#89b6e7 17px,transparent 31px),radial-gradient(ellipse at 45% 45%,#6a36a6aa,#090b30 70%)}.kl-persistent-party[data-theme="fireworks-disco"] .kl-disco-scene{background:repeating-conic-gradient(from 5deg at 50% 45%,#ffcb4855 0 6deg,transparent 7deg 30deg),radial-gradient(ellipse,#812c8a,#07091f)}.kl-persistent-party[data-theme="purple-dream-stage"] .kl-spotlight-scene{background:radial-gradient(ellipse at 50% 30%,#eb8ae8aa,#53237a 55%,#110b28)}.kl-persistent-party[data-theme="rock-star-stage"] .kl-spotlight-scene{background:repeating-linear-gradient(110deg,#fc3b3655 0 25px,#21101d 60px,#e6822944 100px)}.kl-persistent-party[data-theme="diamond-stage"] .kl-spotlight-scene{background:repeating-conic-gradient(from 20deg at 50% 35%,#d9faff77 0 18deg,#1e569377 20deg 43deg,#0c1c43 45deg 70deg)}.kl-persistent-party[data-theme="rock-star-stage"] .kl-spotlight-beam{filter:hue-rotate(135deg)}.kl-persistent-party[data-theme="purple-dream-stage"] .kl-spotlight-beam{filter:hue-rotate(245deg)}.kl-persistent-party[data-theme="diamond-stage"] .kl-spotlight-beam{filter:hue-rotate(175deg)}.kl-persistent-party[data-theme="moonlight-stage"] .kl-spotlight-beam{filter:hue-rotate(195deg)}

/* V21.42: persistent party is isolated above chat. Messages/stickers remain readable. */
.conversation .kl-performance-display{order:1;flex:none;position:relative;isolation:isolate;overflow:hidden;border-radius:12px;border:1px solid #bfdbe5;background:#0e142b;margin:4px 0 6px;height:248px;box-sizing:border-box}
.conversation .kl-performance-display[hidden]{display:none!important}
.kl-performance-heading{position:absolute;z-index:5;top:8px;left:12px;color:#fff;font-size:12px;font-weight:800;letter-spacing:.11em;text-shadow:0 1px 5px #000}
.kl-performance-scene{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.kl-performance-scene>.party-effect-host{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;pointer-events:none}
.kl-performance-scene .kl-disco-scene,.kl-performance-scene .kl-spotlight-scene{height:100%;min-height:0!important}
.kl-performance-scene .kl-theme-badge{top:13%;font-size:clamp(11px,1.4vw,16px)}
.conversation .kl-theme-details{display:block;min-width:0}
.conversation .kl-theme-details>summary{cursor:pointer;list-style:revert;padding:7px;font-weight:800;color:#204858}
.conversation .kl-theme-details:not([open]){padding:3px 8px}
.conversation .kl-theme-details:not([open]) .kl-theme-choices{display:none}
.conversation .party-toggle .celebration-buttons button{min-height:38px}
@media(max-width:650px){.conversation .kl-performance-display{height:190px}}

/* V21.43 — spacious, readable room chat and compact controls. */
.layout{grid-template-columns:minmax(170px,205px) minmax(0,1fr) minmax(160px,195px)!important;gap:10px!important}
.main{gap:9px!important}
@media(min-width:1250px){.main{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)!important}}
.conversation{background:#fff!important;color:#26343d!important;min-height:0!important;gap:5px!important;padding:11px!important}
.conversation .section-eyebrow{display:none}
.conversation>h2{font-size:16px;margin:0 0 2px}
.conversation .chat-mode{display:none}
.conversation .audience-view{order:2!important;flex:1 1 auto;min-height:340px!important;background:#fff!important;border:1px solid #e7edef;border-radius:7px!important}
.conversation .audience-view #messages,.main.layout-chat-focus>.conversation #messages,.main.layout-stage-focus>.conversation #messages{height:clamp(390px,55vh,720px)!important;min-height:390px!important;max-height:none!important;background:#fff!important;overflow-y:auto!important}
.conversation .kl-performance-display{order:1!important;height:132px!important;flex:none!important;margin:2px 0!important}
.conversation .kl-performance-display.kl-performance-local-hidden{display:none!important}
.kl-hide-performance{position:absolute;top:5px;right:7px;z-index:10;background:#152b42d9;color:#fff;border:1px solid #ffffff80;border-radius:6px;padding:2px 8px;cursor:pointer}
.conversation .sticker-toolbar{order:4!important;padding:3px 0!important}
.conversation #roomComposer{order:5!important;margin:0!important}
.conversation .party-toggle{order:6!important;margin:0!important}
.conversation .party-toggle>summary{padding:7px!important;font-size:12px!important}
.conversation .party-toggle .chat-party{padding:6px!important}
.conversation .celebration-buttons{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:4px!important}
.conversation .celebration-buttons button{min-height:30px!important;font-size:11px!important;padding:5px 3px!important}
.conversation .kl-theme-group{padding:5px!important;margin:2px 0!important}
.conversation #messages img.chat-sticker,.conversation #messages img.chat-sticker[src*="aodai-"],.conversation #messages img.chat-sticker[src*="new-"],.conversation #messages img.chat-sticker[src*="gift-"]{width:90px!important;height:90px!important;max-width:90px!important;max-height:90px!important;object-fit:contain!important}
.sticker-dialog .sticker-grid .sticker-tile img,.sticker-dialog .sticker-grid .sticker-tile img[src*="aodai-"]{width:68px!important;height:68px!important;max-height:68px!important;object-fit:contain!important}
.sticker-dialog .sticker-tile{min-height:104px!important;padding:5px!important}
.sticker-dialog[open] .sticker-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.video-controls button,.camera-actions button,.stage .row.center button{min-width:36px!important;padding:7px!important;font-size:14px!important}
.video-controls{gap:4px!important}
.video-controls input{min-width:0!important}
.camera-actions #stopCamera,.stage #stop{display:none!important}
#videoShell:fullscreen{background:#000!important;display:flex;align-items:center;justify-content:center;width:100vw;height:100vh;max-height:none!important;aspect-ratio:auto!important}
#videoShell:fullscreen #ytPlayer{width:100%!important;height:100%!important}
@media(max-width:1249px){.layout{grid-template-columns:minmax(150px,190px) minmax(0,1fr)!important}.entertainment{grid-column:2}}
@media(max-width:750px){.layout{grid-template-columns:1fr!important}.conversation .audience-view #messages{height:52vh!important;min-height:300px!important}.conversation .kl-performance-display{height:110px!important}}

/* V21.44: readable conversation and fixed floating theme picker */
.conversation .audience-view{position:relative!important;min-height:0!important;overflow:visible!important;flex:1 1 auto!important}
.conversation .audience-view #messages{box-sizing:border-box!important;display:block!important;min-height:390px!important;height:clamp(420px,59vh,760px)!important;max-height:none!important;overflow-y:scroll!important;overscroll-behavior:contain!important;padding-bottom:26px!important;scrollbar-gutter:stable!important}
.kl-new-messages{position:absolute;right:17px;bottom:12px;z-index:15;border-radius:20px;background:#076e7e;color:#fff;border:1px solid #fff;padding:7px 13px;font-weight:700;box-shadow:0 2px 10px #0003;cursor:pointer}
.kl-new-messages[hidden]{display:none!important}
.conversation .kl-theme-details[hidden],.conversation .celebration-buttons[hidden]{display:none!important}
.kl-party-menu{display:flex;flex-wrap:wrap;gap:6px;margin:5px 0}
.kl-party-trigger{flex:1 1 95px;min-width:0;padding:8px 9px!important;font-size:12px!important;border-radius:8px!important}
.kl-theme-popup{position:fixed;z-index:100000;box-sizing:border-box;max-height:min(420px,calc(100dvh - 20px));overflow:auto;background:#fff;color:#183e49;border:2px solid #5ba7b4;border-radius:12px;box-shadow:0 8px 36px #0005;padding:12px}
.kl-theme-popup[hidden]{display:none!important}
.kl-popup-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px}
.kl-popup-head button{padding:4px 10px!important;min-width:32px}
.kl-popup-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.kl-popup-choices button{min-width:0;min-height:42px;padding:8px 5px;font-size:12px;white-space:normal;overflow-wrap:anywhere}
@media(max-width:750px){.conversation .audience-view #messages{height:clamp(350px,53vh,640px)!important;min-height:350px!important}}

/* V21.45: readable sticker tiers and compact invitation controls */
.sticker-dialog .sticker-tabs button{background:#e9f5f8!important;color:#123b47!important;border:1px solid #a5d6df!important;font-weight:800!important;text-shadow:none!important;opacity:1!important}
.sticker-dialog .sticker-tabs button.active{background:#b7f1e3!important;color:#063b35!important;border-color:#27a18d!important;box-shadow:inset 0 0 0 1px #27a18d!important}
.sticker-dialog .sticker-tabs button:focus-visible{outline:3px solid #157d94;outline-offset:2px}
.remember-login{display:flex;align-items:center;gap:8px;margin:12px 0;font-weight:600;flex-wrap:wrap;color:#214954}.remember-login input{width:18px;height:18px;accent-color:#138d8d}.remember-login small{font-weight:400;color:#536e78}
.invite-open{font-size:12px;padding:6px 10px;margin-left:8px;vertical-align:middle}.invite-dialog{border:1px solid #9fcbd0;border-radius:14px;padding:22px;max-width:min(430px,92vw);width:100%;box-shadow:0 12px 35px #102c3555}.invite-dialog::backdrop{background:#071d2688}.invite-dialog label{display:block;margin:12px 0;font-weight:700}.invite-dialog label input,.invite-dialog label select{display:block;width:100%;margin-top:5px;padding:10px}.invite-dialog h2{margin-top:0}

/* V21.47: accessible invitation selection and readable sticker titles */
.invite-friends{margin:12px 0}.invite-friends>strong{display:block;margin-bottom:7px}.invite-friends>input{width:100%;box-sizing:border-box;padding:10px;border:1px solid #aacfd3;border-radius:8px}.invite-friend-list{max-height:185px;min-height:40px;overflow-y:auto;margin-top:8px;border:1px solid #d1e3e6;border-radius:8px;padding:5px;background:#f8fcfd}.invite-friend-row{display:flex!important;align-items:center;gap:10px;margin:2px 0!important;padding:8px!important;border-radius:6px;cursor:pointer;font-weight:600!important}.invite-friend-row:hover{background:#e3f4f4}.invite-friend-row input{width:18px!important;height:18px;margin:0!important;accent-color:#159d94}.invite-friend-row.offline{opacity:.55;cursor:not-allowed}.sticker-dialog .sticker-tile{color:#fff!important;background:#163d43!important}.sticker-dialog .sticker-tile .sticker-label,.sticker-dialog .sticker-tile span:not(.sticker-favorite):not(.motion-badge){color:#fff!important;text-shadow:0 1px 2px #0009!important;opacity:1!important}.sticker-dialog .sticker-tile img{filter:none!important}

/* V21.49: compact friend management, without changing the chat or video layout */
.kl-friend-row{display:flex;align-items:center;gap:5px;margin:5px 0;min-width:0}.kl-friend-row>span{flex:1;min-width:0;font-size:12px;overflow-wrap:anywhere}.kl-friend-row>.friend-entry{flex:1;min-width:0;text-align:left;overflow-wrap:anywhere}.kl-friend-row>button:not(.friend-entry){flex:none;padding:5px 8px;font-size:12px;min-height:30px}.social-panel .row{flex-wrap:wrap}.social-panel .row input{min-width:100px;flex:1}.social-panel .row button{white-space:nowrap}

/* V21.51 Friends feedback is visible directly below the Add Friend action. */
.kl-friend-feedback{display:block;margin:7px 0 9px;padding:8px 10px;border-radius:8px;background:#e8f6f4;color:#124b4d;font-size:12px;line-height:1.4;overflow-wrap:anywhere}.kl-friend-feedback[data-kind="error"]{background:#fff0ed;color:#9b3020}.kl-friend-feedback[data-kind="success"]{background:#e3f8e8;color:#165a31}#friendToggle{cursor:pointer;min-height:36px}#friendsList .kl-friend-row{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin:6px 0}#friendsList .kl-friend-row>span{flex:1 1 100%;overflow-wrap:anywhere}

/* V21.52: accessible friend-request dialog */
.kl-friend-dialog{border:1px solid #9bd7d5;border-radius:16px;padding:24px;width:min(420px,calc(100vw - 32px));box-shadow:0 15px 60px #092f4560;color:#193f4c;background:white}.kl-friend-dialog::backdrop{background:#102b3b8c}.kl-friend-dialog h2{margin:0 0 12px;font-size:20px}.kl-friend-dialog label{display:block;font-weight:700;margin:14px 0 6px}.kl-friend-dialog input{box-sizing:border-box;width:100%;padding:12px;border:1px solid #9cbfc6;border-radius:8px}.kl-friend-dialog-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}#klFriendDialogStatus{min-height:22px;color:#165466;font-weight:600}

/* V21.53: spacious member names and separate owner-only moderation menu. */
#membersDock #members{list-style:none;padding:0;margin:8px 0;max-height:310px;overflow-y:auto;overflow-x:hidden}
#membersDock .kl-member-row{display:flex;align-items:center;gap:7px;min-width:0;width:100%;padding:8px 2px;border-bottom:1px solid #dce8ea;box-sizing:border-box;flex-wrap:wrap}
#membersDock .kl-member-name{flex:1 1 100%;min-width:0;overflow-wrap:anywhere;word-break:normal;line-height:1.4;font-size:13px;font-weight:600;white-space:normal}
#membersDock .kl-member-social{display:flex;gap:5px;align-items:center;flex:0 0 auto}
#membersDock .kl-member-social button{min-width:30px;min-height:28px;padding:4px 7px;font-size:13px;line-height:1}
#friendsList .kl-friend-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:5px;align-items:center;width:100%;box-sizing:border-box}
#friendsList .kl-friend-row>span{grid-column:1/-1;min-width:0;overflow-wrap:anywhere;line-height:1.35}
#friendsList .kl-friend-row>.friend-entry{min-width:0;width:100%;text-align:left;white-space:normal;overflow-wrap:anywhere;line-height:1.35;padding:7px 5px}
#friendsList .kl-friend-row>button:not(.friend-entry){white-space:nowrap}
.kl-admin-menu{position:relative;align-self:center;z-index:90;flex:0 0 auto}
.kl-admin-menu[hidden]{display:none!important}
.kl-admin-menu>summary{list-style:none;cursor:pointer;background:#17464e;color:white;border-radius:8px;padding:9px 13px;font-weight:700;white-space:nowrap}
.kl-admin-menu>summary::-webkit-details-marker{display:none}
.kl-admin-popover{position:absolute;right:0;top:calc(100% + 7px);width:min(290px,85vw);box-sizing:border-box;padding:14px;border:1px solid #bdd8d8;border-radius:12px;background:#fff;box-shadow:0 10px 30px #122a3540;color:#19383f}
.kl-admin-popover select{width:100%;margin:9px 0;min-width:0}
.kl-admin-actions{display:grid;gap:7px}
.kl-admin-actions button{width:100%;text-align:left;padding:10px 12px;min-height:38px}
.kl-admin-actions [data-admin-action="ban"]{background:#8c3037;color:#fff}

/* V21.54 announcement strip alongside Room Chat, without overlaying messages */
.kl-chat-heading{display:flex;align-items:center;gap:12px;min-width:0;flex-wrap:wrap}.kl-chat-heading h2{flex:0 0 auto;margin:0}.kl-announcement-strip{flex:1 1 250px;min-width:0;background:#fff2ca;color:#38250c;border:1px solid #dbb960;border-radius:8px;padding:7px 10px;font-size:13px;max-height:70px;overflow-y:auto;overflow-wrap:anywhere}.kl-announcement-item{display:inline;margin-right:15px}.kl-admin-v54{width:min(410px,90vw);max-height:75vh;overflow:auto}.kl-admin-v54 label{display:block;margin:8px 0}.kl-admin-v54 input,.kl-admin-v54 textarea{width:100%;box-sizing:border-box}.kl-admin-v54 .kl-admin-actions{display:grid;grid-template-columns:1fr 1fr;gap:5px}.kl-admin-v54 .kl-admin-actions button{font-size:12px;padding:6px}.kl-admin-records{max-height:130px;overflow:auto;font-size:12px}.kl-admin-record{padding:5px 0;border-bottom:1px solid #9995;overflow-wrap:anywhere}.kl-admin-record button{font-size:11px;margin:3px;padding:3px 6px}.kl-admin-v54 [hidden]{display:none!important}

/* V21.55 compact navigation and room-member context menus */
#adminDock{position:relative;margin:6px 0 12px}#adminDock .kl-admin-menu{display:block;width:100%}#adminDock .kl-admin-menu>summary{text-align:center;padding:10px 8px}#adminDock .kl-admin-popover{left:0;right:auto;top:calc(100% + 4px);width:min(410px,calc(100vw - 36px));z-index:1000}#adminDock .kl-admin-menu[hidden]{display:none!important}
#friendsList .kl-friend-row{display:block;width:100%;min-width:0}#friendsList .kl-friend-row>.friend-entry{display:block;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:9px 10px;text-align:left}#friendsList .kl-friend-row>span{display:block;overflow-wrap:normal;word-break:normal;white-space:normal}#friendFeedback[hidden]{display:none!important}
.social-panel{min-width:0}.room-sidebar{min-width:0}#membersDock .kl-member-name{cursor:context-menu}#membersDock .kl-member-name:hover{text-decoration:underline}
.kl-context-menu{position:fixed;z-index:99999;width:200px;background:#fff;border:1px solid #aac9ca;box-shadow:0 8px 28px #092d4266;border-radius:10px;padding:6px}.kl-context-menu[hidden]{display:none!important}.kl-context-menu button{display:block;width:100%;padding:9px 11px;text-align:left;border:0;border-radius:6px;background:transparent;color:#173b45;font-size:13px;cursor:pointer}.kl-context-menu button:hover,.kl-context-menu button:focus{background:#e0f3f1}
.kl-stage-queue{display:flex;gap:12px;align-items:center;padding:8px 9px;margin:0 0 10px;background:#f1fcf9;border:1px solid #9fdad1;border-radius:10px}.kl-raise-hand{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font-size:35px;line-height:1.1;min-width:84px;min-height:70px;background:linear-gradient(135deg,#ffca63,#fa875e);color:#37230d;border-radius:12px;box-shadow:0 2px 6px #0002}.kl-raise-hand span{font-size:14px;font-weight:800}.kl-queue-detail{flex:1;min-width:0;font-size:12px}.kl-queue-detail strong{font-size:13px}.kl-queue-detail ol{margin:4px 0;padding-left:20px;max-height:85px;overflow:auto}

/* ============================================================
   Karaoke Lounge V21.56 — approved blue/teal dashboard design
   Original CSS; keeps existing JS hooks and server functionality.
   ============================================================ */
:root{--kl-blue:#0862af;--kl-ink:#153d60;--kl-teal:#04a9b3;--kl-line:#cbe5ef;--kl-bg:#ecf8ff}
body{background:linear-gradient(145deg,#eafaff,#f4fbff 55%,#eaf5fc);color:var(--kl-ink)}
body>header.kl-brandbar{background:linear-gradient(105deg,#0862b6,#063d82);color:white;border:0;box-shadow:0 3px 16px #10457b29;display:flex;gap:22px;align-items:center;padding:13px 22px;flex-wrap:wrap}
.kl-brandbar h1{font-family:Georgia,serif;font-style:italic;font-size:29px;color:#fff;margin:0;letter-spacing:-.6px}.kl-brandtag{font-size:13px;color:#e1f5ff}.kl-buildtag{font-size:11px;background:#ffffff25;padding:5px 9px;border-radius:20px;margin-left:auto}
#app{width:100%;max-width:none}#app .kl-room-ribbon{display:flex;align-items:center;gap:16px;margin:0 0 12px;padding:11px 18px;background:#fff6d9;border:1px solid #f2da8e;border-radius:11px;box-shadow:0 2px 8px #a9781b12;color:#8b3900;min-height:24px;overflow:hidden}
.kl-ribbon-label{font-weight:800;color:#073e72;white-space:nowrap;border-right:1px solid #dec990;padding-right:15px}#klAnnouncementRibbon{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;font-weight:700}
#app .layout{display:grid;grid-template-columns:minmax(195px,235px) minmax(0,1fr) minmax(220px,255px);gap:12px;align-items:start}
#app .room-sidebar,#app .entertainment,#app .main{border:1px solid var(--kl-line);background:#f9fdff;border-radius:16px;box-shadow:0 5px 20px #124e8310}
#app .room-sidebar{padding:12px;max-height:calc(100vh - 158px);overflow-y:auto;scrollbar-width:thin}
#app .main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);grid-template-areas:'eyebrow eyebrow' 'heading heading' 'stage chat';align-items:start;gap:10px;background:transparent;border:0;box-shadow:none;padding:0}
#app .main>.section-eyebrow{grid-area:eyebrow;display:none}#app .main>.room-heading{grid-area:heading;order:0;background:#fff;border:1px solid var(--kl-line);border-radius:12px;padding:10px 14px;align-items:center;margin:0}
#app .main>.stage-collapse{grid-area:stage;order:0;min-width:0;margin:0;border:1px solid #93dfdb;border-radius:15px;background:#fff;box-shadow:0 4px 14px #037a8b18}
#app .main>.conversation{grid-area:chat;order:0;min-width:0;margin:0;min-height:665px;border:1px solid var(--kl-line);border-radius:15px;background:#fff;box-shadow:0 4px 14px #03588b12;padding:10px}
#app .main>.two{display:none}#app .main>.stage-collapse>summary{background:linear-gradient(90deg,#ddfbf9,#e9f9ff);color:#09536d;font-size:15px;font-weight:800;padding:15px 12px}
#app .main>.stage-collapse .stage{margin:10px;background:#fff}#app .stage-topline{display:flex;justify-content:space-between;gap:7px;font-size:11px}#app .stage .video-shell{width:100%;aspect-ratio:16/10;max-height:none;background:radial-gradient(ellipse at 70% 25%,#295aaf,#142f64 48%,#090e2e);border-radius:12px;overflow:hidden}
#app #videoPlaceholder{color:#d6e6ff}#app .kl-stage-queue{background:#edf9ff;border-color:#cce8f3;display:flex;align-items:center;gap:9px;margin-top:10px;padding:8px}#app .kl-raise-hand{font-size:43px;min-width:88px;min-height:84px;border-radius:50%;background:linear-gradient(145deg,#ffe88d,#ffb947);border:4px solid #fff2bf;box-shadow:0 0 0 2px #dba83b,0 4px 16px #a7793860}#app .kl-raise-hand span{font-size:11px}
#app .video-controls{display:flex;flex-wrap:wrap;gap:5px}#app .video-controls input{flex:1 1 100%;min-width:0}#app .video-controls button{flex:1;min-width:36px;padding:9px 5px}#app .performer-panel{padding:8px;border-radius:9px}#app .performer-panel h2{font-size:14px}#app .stage #stageText{font-size:12px}
#app .conversation>.section-eyebrow{display:none}#app .kl-chat-heading{background:#eaf7ff;border-radius:10px;padding:10px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}#app .kl-chat-heading h2{font-size:17px;color:#11436a;margin:0}#app .kl-announcement-strip{font-size:11px;max-height:52px;background:#fff7d9;border-color:#eed897}
#app .conversation #messages{height:clamp(390px,53vh,710px);min-height:390px;background:#fff;border-color:#e4f0f6;flex:1;overflow:auto}#app .conversation .party-toggle{order:7}#app .conversation .party-toggle:not([open]){margin-top:8px}#app .conversation .chat-mode{display:none}#app .conversation .sticker-toolbar{margin-top:7px}#app #roomComposer{display:flex;gap:7px}#app #roomComposer input{flex:1;min-width:0}
#app .room-sidebar .profile-card{padding:8px;margin-bottom:9px}#app #adminDock{margin:9px 0}#app #adminDock .kl-admin-menu>summary{background:linear-gradient(110deg,#007c99,#00b6bc);color:white;text-align:left;padding:12px 15px;border-radius:9px;font-size:15px}#app .members-panel,#app .social-panel{background:#fff;border:1px solid #e0edf4;border-radius:12px;padding:10px;margin:9px 0}#app #members{padding:0}#app #members li{border-bottom:1px solid #eaf2f6}#app #friendsList .kl-friend-row>.friend-entry{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#app .room-sidebar .song-panel{background:#f2faff;border-radius:10px}
#app .entertainment{padding:12px}#app .entertainment h2{font-size:18px;color:#11466b}#app .camera-panel{padding:10px}#app .camera-preview{height:180px;background:linear-gradient(130deg,#e7f7ff,#fff9eb)}#app .camera-actions button{background:#00a8b1;color:white;border:0}#app .audio-console{background:#fff;border:1px solid #d9eaf1;border-radius:12px;padding:10px;margin-top:12px}
#app button{transition:filter .15s,transform .15s}#app button:hover{filter:brightness(1.04)}#app button:focus-visible{outline:3px solid #ffca58;outline-offset:2px}
@media(max-width:1250px){#app .layout{grid-template-columns:190px minmax(0,1fr) 205px}#app .main{grid-template-columns:1fr;grid-template-areas:'heading' 'stage' 'chat'}#app .conversation{min-height:400px}}
@media(max-width:860px){#app .layout{grid-template-columns:minmax(170px,220px) minmax(0,1fr)}#app .entertainment{grid-column:2}#app .main{grid-template-columns:1fr;grid-template-areas:'heading' 'stage' 'chat'}#app .room-sidebar{max-height:none}}
@media(max-width:580px){#app .layout{display:block}#app .room-sidebar{max-height:380px;overflow:auto;margin-bottom:12px}#app .entertainment{margin-top:12px}.kl-brandbar h1{font-size:22px}#app .kl-room-ribbon{flex-wrap:wrap}#app .conversation #messages{min-height:300px;height:45vh}}

/* V21.57: clearly visible member-led duet invitation */
.kl-duet-invite{display:block;width:100%;margin:0 0 10px;background:#087f9c;color:#fff;font-weight:800;padding:12px;border-radius:12px;cursor:pointer}
.kl-duet-invite:hover{background:#075d7c}

/* V21.59: member selection for duet invitations */
.kl-duet-picker{border:1px solid #a7d8e1;border-radius:16px;padding:22px;width:min(440px,calc(100vw - 32px));max-height:75vh;box-shadow:0 20px 60px #002b4260;color:#173d53;background:#fff}
.kl-duet-picker::backdrop{background:#0b223b88}
.kl-duet-picker h2{margin:0 0 10px;font-size:1.2rem}
.kl-duet-members{display:grid;gap:8px;max-height:42vh;overflow-y:auto;margin:16px 0}
.kl-duet-option{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #b6dce4;border-radius:10px;cursor:pointer;background:#f2fbfd;font-weight:600}
.kl-duet-option:has(input:checked){background:#c8f5f0;border-color:#009eaa}
.kl-duet-option input{width:18px;height:18px;flex:none}
.kl-duet-actions{display:flex;justify-content:flex-end;gap:10px}

/* V21.60: original celebration library */
.kl-v2160-library{display:grid;gap:9px;margin:12px 0;padding:12px;border:1px solid #476c9b;border-radius:12px;background:#10243b}.kl-v2160-library strong{color:#f9d990}.kl-v2160-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:7px}.kl-v2160-grid button{min-height:40px;white-space:normal;text-align:left}.kl-v2160-particle{position:absolute;display:block;pointer-events:none;filter:drop-shadow(0 0 8px #ffdf8b);will-change:transform,opacity;z-index:2}.chat-celebration-layer .party-effect-host{overflow:hidden}.kl-v2160-library button:focus-visible{outline:3px solid #f7d36c}

/* V21.60.1: Keep dismissal visible and make large collections scroll inside Party Corner. */
#app .party-toggle[open] {max-height:min(70vh,650px);overflow-y:auto;overscroll-behavior:contain;}
#app .party-toggle .kl-party-close-row {position:sticky;top:0;z-index:12;display:flex;justify-content:flex-end;padding:7px;background:#e6faf8;border-bottom:1px solid #c5e7eb;}
#app .party-toggle .kl-party-close-row button {min-height:38px;background:#155d72;color:white;border:0;border-radius:8px;padding:7px 15px;cursor:pointer;}
#app .party-toggle:not([open]) .kl-party-close-row {display:none;}

/* V21.60.2: tabbed Party Corner; eliminate inherited multi-column menu layout. */
#app .conversation #partyCorner{width:100%;min-width:0;max-height:none;overflow:visible;box-sizing:border-box}
#app .conversation #partyCorner[open]{max-height:min(72vh,650px);overflow-y:auto;overflow-x:hidden}
#app .conversation #partyCorner .celebration-buttons{display:block!important;width:100%;margin:8px 0!important}
#app .conversation #partyCorner .kl-party-tabs{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:9px}
#app .conversation #partyCorner .kl-party-tabs .kl-party-tab{flex:1 1 115px;min-height:38px!important;background:#dff5f5!important;color:#125567!important;border:1px solid #a4d9df!important;border-radius:8px;font-size:12px!important;padding:6px!important}
#app .conversation #partyCorner .kl-party-tabs .kl-party-tab[aria-selected="true"]{background:#11667c!important;color:#fff!important}
#app .conversation #partyCorner .kl-party-pages{width:100%;min-width:0}
#app .conversation #partyCorner .kl-party-page:not([hidden]){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;width:100%}
#app .conversation #partyCorner .kl-party-page[hidden]{display:none!important}
#app .conversation #partyCorner .kl-party-page button{min-width:0;min-height:43px!important;overflow-wrap:anywhere;font-size:12px!important;padding:7px!important;text-align:center}
#app .conversation #partyCorner .kl-party-stop{width:100%;margin:7px 0}
#app .conversation #partyCorner .celebration-tools{width:100%;box-sizing:border-box;min-width:0}
#app .conversation #partyCorner .kl-party-close-row{position:sticky;top:0;z-index:25}

/* V21.60.6 — layered theater standing ovation; stays within chat overlay */
.kl-ovation-premium{position:absolute;inset:0;overflow:hidden;pointer-events:none;isolation:isolate;background:linear-gradient(to top,rgba(8,15,31,.52),transparent 72%)}
.kl-ovation-lights{position:absolute;inset:0;background:conic-gradient(from 160deg at 50% -25%,transparent 0deg,rgba(255,214,135,.16) 13deg,transparent 27deg,rgba(255,226,160,.13) 48deg,transparent 67deg);animation:klOvationLight 5s ease-in-out infinite alternate}
.kl-ovation-message{position:absolute;top:9%;left:3%;right:3%;text-align:center;color:#fff0bb;font-weight:900;letter-spacing:.06em;font-size:clamp(13px,2.1vw,25px);text-shadow:0 2px 8px #261321,0 0 20px #e3a753;animation:klOvationTitle 11s both}
.kl-ovation-row{position:absolute;left:0;width:100%;height:35%;bottom:calc(var(--row)*13% - 6%);display:flex;align-items:flex-end;justify-content:space-around;gap:1px;transform:scale(calc(1 - var(--row)*.12));transform-origin:center bottom;filter:brightness(calc(1 - var(--row)*.12))}
.kl-ovation-guest{--coat:#455;--skin:#c98;--hair:#222;position:relative;flex:0 1 8%;max-width:55px;height:76%;transform:translateY(36%);animation:klOvationStand .95s cubic-bezier(.18,.85,.25,1.1) var(--rise-delay) forwards}
.kl-ovation-head{position:absolute;top:0;left:32%;width:36%;height:25%;background:var(--skin);border-radius:48% 48% 45% 45%;box-shadow:inset 0 5px 0 var(--hair)}
.kl-ovation-torso{position:absolute;left:19%;top:23%;width:62%;height:73%;background:linear-gradient(105deg,#ffffff28,transparent 43%),var(--coat);border-radius:38% 38% 12% 12%}
.kl-ovation-aodai .kl-ovation-torso{border-radius:30% 30% 0 0;background:linear-gradient(90deg,#d76a8c,#f5b2c9 48%,#a84671)}
.kl-ovation-arm{position:absolute;top:28%;width:24%;height:43%;background:var(--coat);border-radius:15px;transform-origin:50% 10%;animation:klOvationClap .46s ease-in-out var(--clap-delay) infinite alternate}
.kl-ovation-arm i{position:absolute;bottom:-3%;left:9%;width:85%;height:29%;border-radius:50%;background:var(--skin)}
.kl-ovation-arm-left{left:14%;transform:rotate(-24deg)}.kl-ovation-arm-right{right:14%;animation-name:klOvationClapRight;transform:rotate(24deg)}
@keyframes klOvationStand{from{transform:translateY(40%)}to{transform:translateY(0)}}
@keyframes klOvationClap{from{transform:rotate(-35deg)}to{transform:rotate(22deg)}}
@keyframes klOvationClapRight{from{transform:rotate(35deg)}to{transform:rotate(-22deg)}}
@keyframes klOvationLight{to{opacity:.45;transform:rotate(5deg)}}
@keyframes klOvationTitle{0%,100%{opacity:0}12%,85%{opacity:1}}
@media(prefers-reduced-motion:reduce){.kl-ovation-premium *{animation:none!important}.kl-ovation-guest{transform:none!important}.kl-ovation-message{opacity:1!important}}

/* V21.60.7 — original illustrated indoor theater ovation, with Vietnamese messages. */
.kl-ovation-theater{background:radial-gradient(ellipse at 50% 6%,#d7b36c 0%,#705c59 24%,#272337 58%,#111827 100%)}
.kl-ovation-backdrop{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 9%,rgba(255,215,143,.07) 9.3% 9.6%,transparent 10%),radial-gradient(ellipse at 50% 20%,rgba(255,232,170,.3),transparent 48%)}
.kl-ovation-curtain{position:absolute;top:0;bottom:0;width:12%;z-index:1;background:repeating-linear-gradient(90deg,#4b1326 0 13%,#8b3043 18%,#2b0b20 29%);box-shadow:inset 0 0 22px #1b0617}
.kl-ovation-curtain-left{left:0;clip-path:polygon(0 0,100% 0,74% 84%,0 100%)}
.kl-ovation-curtain-right{right:0;clip-path:polygon(0 0,100% 0,100% 100%,26% 84%)}
.kl-ovation-theater .kl-ovation-message{z-index:5;top:11%;font-size:clamp(21px,3vw,39px);color:#ffe6a0;text-shadow:0 2px 6px #321520,0 0 22px #ffc764}
.kl-ovation-theater .kl-ovation-row{z-index:3}
.kl-ovation-seat{position:absolute;bottom:-6px;left:-13%;width:126%;height:38%;border-radius:36% 36% 9% 9%;background:linear-gradient(90deg,#4c1624,#8b2d3e 46%,#4e1624);box-shadow:inset 0 3px 7px #c97765,0 2px 4px #0d0710;z-index:-1}
.kl-ovation-theater .kl-ovation-guest{scale:var(--size,1)}
.kl-ovation-grand .kl-ovation-lights{filter:saturate(1.6) brightness(1.25)}
.kl-ovation-romantic .kl-ovation-lights{filter:hue-rotate(300deg)}
.kl-ovation-petal{position:absolute;z-index:6;top:-10%;font-size:22px;color:#ff8eae;opacity:.85;animation:klOvationPetal 6.5s linear infinite;pointer-events:none}
@keyframes klOvationPetal{from{transform:translateY(-30px) rotate(0)}to{transform:translateY(650px) rotate(440deg);opacity:0}}
@media(prefers-reduced-motion:reduce){.kl-ovation-petal{animation:none;display:none}}

/* V21.60.9 — Realistic-look audience scenes; source art is an original still image. */
.kl-ovation-photo{background:#180e19;isolation:isolate;overflow:hidden}
.kl-photo-backdrop{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 10%,#d2a260 0%,#503143 40%,#140c20 100%)}
.kl-photo-crowd{position:absolute;inset:12% -3% -5%;background:url('/standing-ovation-young-crowd.png') center bottom / cover no-repeat;filter:saturate(.92) contrast(1.05);animation:klPhotoReveal 1.5s ease-out both,klPhotoSway 6s 1.5s ease-in-out infinite alternate;transform-origin:50% 90%}
.kl-photo-lights{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(25,6,20,.64),transparent 14%,transparent 86%,rgba(25,6,20,.64)),radial-gradient(ellipse at 50% 0%,rgba(255,217,125,.22),transparent 54%);mix-blend-mode:screen;animation:klOvationLight 4s ease-in-out infinite alternate}
.kl-photo-message{z-index:8;top:4%;padding:5px 12px;background:linear-gradient(90deg,transparent,rgba(21,9,19,.68) 20%,rgba(21,9,19,.68) 80%,transparent);font-size:clamp(17px,2.6vw,35px);text-shadow:0 2px 6px #100b14,0 0 16px #e3a753}
.kl-photo-grand .kl-photo-crowd{filter:saturate(1.2) contrast(1.12);animation-duration:1.5s,3.8s}
.kl-photo-grand .kl-photo-lights{background:radial-gradient(ellipse at 48% 0%,rgba(255,220,124,.36),transparent 65%)}
.kl-photo-lounge .kl-photo-backdrop{background:radial-gradient(ellipse at 55% 16%,#b97743,#482c31 53%,#120d1c)}
.kl-photo-lounge .kl-photo-crowd{inset:19% -7% -3%;background-size:cover;filter:sepia(.18) saturate(.88) brightness(.83)}
.kl-photo-lounge:before,.kl-photo-lounge:after{content:'';position:absolute;top:0;bottom:0;width:9%;z-index:3;background:repeating-linear-gradient(90deg,#3b0d22,#6b2035 30%,#260b20 65%);opacity:.75}
.kl-photo-lounge:before{left:0}.kl-photo-lounge:after{right:0}
.kl-photo-tables{position:absolute;z-index:5;left:5%;right:5%;bottom:-5%;height:23%;display:flex;justify-content:space-around;align-items:center;background:linear-gradient(0deg,rgba(18,9,13,.96),transparent);pointer-events:none}
.kl-photo-tables span{display:grid;place-items:center;width:18%;height:62%;border-radius:50% 50% 0 0;background:radial-gradient(ellipse at 50% 18%,#b7875a,#452523 65%,#24121b);box-shadow:0 -3px 16px #ffcc7a40;color:#ffe5a5;font-size:21px}
@keyframes klPhotoReveal{from{opacity:0;transform:translateY(14%) scale(1.035)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes klPhotoSway{from{transform:translateX(-.45%) scale(1.008)}to{transform:translateX(.45%) scale(1.018)}}
@media(prefers-reduced-motion:reduce){.kl-photo-crowd,.kl-photo-lights{animation:none!important}}

/* V21.60.10 compact ovation: transparent, pointer-free, limited to a small portion of chat. */
.kl-ovation-mini{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);width:min(350px,65%);height:178px;z-index:8;pointer-events:none;background:none!important;overflow:visible;animation:klMiniEnter .5s ease-out both;filter:drop-shadow(0 3px 3px rgba(0,0,0,.20))}
.kl-mini-label{position:absolute;top:2px;left:50%;transform:translateX(-50%);white-space:nowrap;border-radius:30px;padding:4px 13px;background:rgba(42,24,39,.82);color:#fff0b9;font-size:clamp(12px,1.1vw,17px);font-weight:900;letter-spacing:.04em;text-shadow:0 1px 2px #332;z-index:5}
.kl-mini-group{position:absolute;left:0;right:0;bottom:0;height:128px;display:flex;align-items:flex-end;justify-content:center;gap:0}
.kl-mini-person{position:relative;flex:0 0 18%;height:112px;transform-origin:50% 100%;animation:klMiniRise .65s ease-out var(--rise) both,klMiniBounce .65s ease-in-out 1s infinite alternate}
.kl-mini-person:nth-child(even){height:99px;z-index:2}.kl-mini-person:nth-child(3){height:126px;z-index:3}
.kl-mini-torso{position:absolute;bottom:0;left:19%;width:62%;height:62%;border-radius:34% 34% 9% 9%;background:linear-gradient(100deg,rgba(0,0,0,.35),transparent 40%,rgba(255,255,255,.15) 70%,rgba(0,0,0,.3)),var(--coat);box-shadow:inset 1px 0 4px #fff3}
.kl-mini-face{position:absolute;top:13%;left:34%;width:33%;height:28%;border-radius:45% 45% 47% 47%;background:radial-gradient(ellipse at 60% 35%,#fff4 0,transparent 65%),var(--skin);z-index:2;box-shadow:inset -2px -2px 3px #54291e33}
.kl-mini-face i{position:absolute;left:23%;top:45%;width:54%;height:2px;background:linear-gradient(90deg,#302324 0 14%,transparent 15% 80%,#302324 81%)}
.kl-mini-face b{position:absolute;left:39%;top:72%;width:22%;height:5%;border-bottom:1.5px solid #753e3d;border-radius:50%}
.kl-mini-hair{position:absolute;top:7%;left:30%;width:41%;height:27%;border-radius:49% 50% 28% 30%;background:var(--hair);z-index:1;box-shadow:inset 3px 1px 4px #fff2}
.kl-mini-arm{position:absolute;top:43%;width:17%;height:44%;border-radius:14px;background:var(--coat);transform-origin:50% 10%;z-index:4;animation:klMiniClapL .43s ease-in-out var(--delay) infinite alternate}
.kl-mini-left{left:17%;transform:rotate(-36deg)}.kl-mini-right{right:17%;animation-name:klMiniClapR;transform:rotate(36deg)}
.kl-mini-arm i{position:absolute;bottom:-3px;left:1px;width:100%;height:19%;border-radius:10px;background:var(--skin)}
.kl-mini-confetti{position:absolute;top:10px;font-size:16px;animation:klMiniFall 3.2s linear infinite;opacity:0}
@keyframes klMiniEnter{from{opacity:0;translate:0 15px}to{opacity:1;translate:0 0}}
@keyframes klMiniRise{from{opacity:0;translate:0 36px}to{opacity:1;translate:0 0}}
@keyframes klMiniBounce{from{rotate:-1deg}to{rotate:1deg}}
@keyframes klMiniClapL{from{transform:rotate(-48deg)}to{transform:rotate(18deg)}}
@keyframes klMiniClapR{from{transform:rotate(48deg)}to{transform:rotate(-18deg)}}
@keyframes klMiniFall{0%{translate:0 -16px;opacity:0}15%{opacity:.9}85%{opacity:.8}100%{translate:14px 145px;opacity:0}}
@media(prefers-reduced-motion:reduce){.kl-ovation-mini,.kl-ovation-mini *{animation:none!important}.kl-mini-person{opacity:1!important}}

/* V21.60.13: compact photorealistic AI audience from approved original concept art. */
.kl-ovation-mini{width:min(460px,80%)!important;height:208px!important;filter:none!important}
.kl-ai-ovation-group{position:absolute;inset:38px 0 0;display:flex;align-items:flex-end;justify-content:center;overflow:visible;pointer-events:none}
.kl-ai-ovation-art{display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 4px 5px #211b2438);transform-origin:center bottom;animation:klAiOvationSway 1.1s ease-in-out infinite alternate}
@keyframes klAiOvationSway{from{transform:rotate(-.5deg) translateY(1px)}to{transform:rotate(.5deg) translateY(-2px)}}
@media(prefers-reduced-motion:reduce){.kl-ai-ovation-art{animation:none}}

/* V21.60.14: original animated Teddy and Cake WebP previews and showers. */
.kl-sticker-party-choice{display:flex;align-items:center;gap:10px;min-height:78px;text-align:left!important}
.kl-sticker-party-choice img{width:65px;height:65px;object-fit:contain;flex:none}
.kl-premium-sticker-shower{position:absolute;bottom:-125px;width:clamp(56px,14%,110px);height:125px;object-fit:contain;pointer-events:none;animation:klStickerShowerRise 8s ease-in-out both;filter:drop-shadow(0 5px 8px #0006)}
@keyframes klStickerShowerRise{0%{transform:translate(0,0) scale(.7);opacity:0}12%{opacity:1}70%{opacity:1}100%{transform:translate(var(--kl-drift),-430px) scale(1.05);opacity:0}}
@media(prefers-reduced-motion:reduce){.kl-premium-sticker-shower{animation:none;bottom:12px;opacity:.9}}

/* V21.60.15: trajectory controlled by Web Animations API, not one CSS rise. */
.kl-premium-sticker-shower.kl-shower-motion{animation:none;will-change:transform,opacity;z-index:2}

/* V21.60.16: Compact Tết shower cutouts, never intercept chat interaction. */
.kl-tet-shower-piece{position:absolute;left:0;top:0;max-width:115px;height:auto;pointer-events:none;object-fit:contain;filter:drop-shadow(0 3px 5px #64231344);will-change:transform,opacity}

/* V21.60.18 compact room heading and Karaoke Charms */
.room-heading{gap:8px!important;padding:8px 10px!important;align-items:center}.room-heading h2{font-size:1.15rem;margin:0}.room-heading .stage-size-controls{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:3px}.room-heading .stage-size-controls label{font-size:.75rem}.room-heading .stage-size-controls select{max-width:230px;padding:3px}.room-heading #stageSizeHint{display:none}.room-heading #now{margin:2px 0;font-size:.8rem}.room-heading .occupancy{font-size:.78rem}.kl-charm-catalog{margin:9px 0;padding:9px;border:1px solid #edc9e8;border-radius:12px;background:linear-gradient(125deg,#fff8fc,#f5faff)}.kl-charm-catalog summary{cursor:pointer;font-weight:700;color:#9c348d}.kl-charm-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;margin:9px 0}.kl-charm-choice{font-size:12px;padding:6px;border-radius:9px}.kl-charm-preview{text-align:center;padding:9px;background:white;border-radius:9px;color:#8e3a96;font-weight:700}.kl-charm-catalog #klCharmOwner:not([hidden]){display:grid;gap:6px;margin-top:12px}.kl-gift-toast{position:fixed;top:78px;right:20px;z-index:9999;display:flex;align-items:center;gap:12px;background:#fff7fd;border:2px solid #e8a2d5;box-shadow:0 8px 28px #0002;border-radius:16px;padding:12px 16px;max-width:320px;pointer-events:none;animation:klGiftIn .5s ease-out}.kl-gift-toast[hidden]{display:none}.kl-gift-art{font-size:32px;animation:klGiftBounce 1.3s ease-in-out 3}@keyframes klGiftIn{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}@keyframes klGiftBounce{50%{transform:scale(1.18) rotate(8deg)}}@media(prefers-reduced-motion:reduce){.kl-gift-toast,.kl-gift-art{animation:none}}

.kl-owner-dashboard{margin:12px 0;padding:10px;border:1px solid #e5c67d;border-radius:12px;background:#fffaf0}.kl-owner-dashboard summary{font-weight:700;cursor:pointer;color:#754b10}.kl-owner-dashboard input,.kl-owner-dashboard select{max-width:100%;box-sizing:border-box;margin:5px 0}.kl-owner-member{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:1px solid #eee;font-size:12px;overflow-wrap:anywhere}.kl-owner-member button{flex-shrink:0;font-size:11px}.kl-owner-directory{margin-top:12px}.kl-owner-directory label{display:block;font-size:12px;font-weight:600}

/* V21.60.18 compact room header: two rows, no public room-owner badge */
#app .main>.room-heading{display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;gap:4px!important;padding:7px 11px!important;min-height:0!important}
#app .room-heading>h2{font-size:1.05rem!important;line-height:1.25!important;margin:0!important}
#app .room-heading #role{display:none!important}
#app .kl-room-control-row{display:flex;align-items:center;flex-wrap:wrap;gap:7px 13px;min-width:0}
#app .kl-room-control-row #now{margin:0!important;white-space:nowrap;font-size:.8rem}
#app .kl-room-control-row .stage-size-controls{margin:0!important;display:flex;align-items:center;flex-wrap:wrap;gap:5px}
#app .kl-room-control-row .stage-size-controls select{max-width:235px;padding:4px 6px!important}
#app .kl-room-control-row .occupancy{margin-left:auto;padding:5px 9px!important;white-space:nowrap}
#app .kl-room-control-row .invite-open{margin:0!important;padding:6px 10px!important}
@media(max-width:760px){#app .kl-room-control-row .occupancy{margin-left:0}}

/* V21.60.18: private owner controls and public preview-only gift shop */
#klOwnerDashboard[hidden],#klCharmCatalog[hidden],#klAdminMenu[hidden],#klCharmOwner[hidden]{display:none!important}
.kl-gift-shop{margin:9px 0;padding:10px;border:1px solid #e3c6df;border-radius:12px;background:#fff8fd}
.kl-gift-shop>summary{font-weight:700;color:#863d83;cursor:pointer}
.kl-shop-grid{display:grid;grid-template-columns:1fr;gap:8px;margin-top:12px}
.kl-shop-grid>div{background:#fff;border:1px solid #f0ddec;border-radius:9px;padding:9px}
.kl-shop-grid p{font-size:12px;line-height:1.6;margin:6px 0 0}
.kl-shop-coming{margin:12px 0 5px;padding:10px;border-radius:9px;background:#eae6f0;color:#62546b;text-align:center;font-weight:700;cursor:not-allowed}

/* V21.60.18 — Gift Shop moved to the Camera & Audio sidebar. */
#app .entertainment{min-width:0;max-height:calc(100vh - 158px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
#app .entertainment>.kl-gift-shop{order:-1;margin:0 0 2px;flex:0 0 auto}
#app .entertainment>.kl-gift-shop>summary{line-height:1.35;overflow-wrap:anywhere}
#app .entertainment .kl-shop-grid{min-width:0}
#app .entertainment .kl-shop-grid>*{min-width:0;overflow-wrap:anywhere}
@media(max-width:860px){#app .entertainment{max-height:none;overflow:visible}}

/* V21.60.18: original premium nickname finishes */
.kl-nick-soft-shadow{text-shadow:0 1px 2px #37415180}
.kl-nick-metallic-gold{color:#aa6200!important;background:linear-gradient(#fff2a1,#e6a51a 45%,#8a4600 65%,#ffe084);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 1px 1px #5e390080)}
.kl-nick-diamond-shine{color:#0764b3!important;text-shadow:0 1px 1px #00365a,0 0 5px #8eeaff}
.kl-nick-rose-gold{color:#bd4679!important;text-shadow:0 1px 1px #6c244b80,0 0 3px #ffb6ce}
.kl-nick-emerald-luxury{color:#007d4e!important;text-shadow:0 1px 1px #00452a,0 0 3px #98e9b4}
.kl-nick-imperial-purple{color:#7639bc!important;text-shadow:0 1px 1px #3c146f,0 0 4px #d8baff}
.kl-nick-sapphire-blue{color:#095cbd!important;text-shadow:0 1px 1px #002c70,0 0 4px #b3dfff}
.kl-nick-pearl-finish{color:#a36a32!important;text-shadow:0 1px 0 #fff,0 2px 2px #87634177}
.kl-nick-luxury-gradient{background:linear-gradient(90deg,#008fd6,#b72bc8,#e85971);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.kl-nick-elegant-calligraphy{font-family:Georgia,'Times New Roman',serif;font-style:italic;letter-spacing:.01em}
.kl-nick-neon-glow{color:#a523b3!important;text-shadow:0 0 3px #eeb7ff,0 0 6px #d7a5ff}
.kl-style-grant{padding:10px;margin:10px 0;border:1px solid #ddd1ed;border-radius:9px;display:grid;gap:6px}.kl-style-grant label{display:grid;gap:3px}
#pmDeleteHistory{margin:4px 8px 8px;align-self:flex-start;font-size:12px}

/* V21.60.18: readable member-controlled room chat text */
.kl-chat-type-controls{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;padding:6px 3px;font-size:12px;color:#264a5d}
.kl-chat-type-controls label{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.kl-chat-type-controls select{max-width:110px;min-height:30px;padding:3px 5px;font-size:12px}
#messages .bubble{font-size:calc(var(--kl-chat-font-px,16) * var(--kl-chat-read-scale,1) * 1px);overflow-wrap:anywhere;line-height:1.5}
#messages .bubble strong{font-size:inherit}
@media(max-width:700px){.kl-chat-type-controls{gap:5px}.kl-chat-type-controls label{white-space:normal}}

/* Room presence and message editing */
#messages .kl-room-notice{font-size:12px!important;padding:6px 10px;margin:3px 0;border-radius:7px;background:#f2f7f8;color:#53636b;text-align:center}#messages .kl-room-notice.kl-joined{color:#146b40}#messages .kl-room-notice.kl-exited{color:#30343a}.kl-edited{color:#78858c;font-size:11px;margin-left:5px}.kl-edit-button{font-size:11px;margin-left:10px;padding:2px 7px;border:1px solid #b9ced0;border-radius:6px;background:transparent;color:inherit;cursor:pointer}.kl-edit-button:hover{background:#e2f0ee;color:#234}

/* V21.60.19: bottom-anchored room chat and transient room notices */
#app .conversation #messages{display:flex!important;flex-direction:column!important;}
#app .conversation #messages::before{content:"";margin-top:auto;flex-shrink:0;}
#app .conversation #messages>.bubble,#app .conversation #messages>.kl-room-notice{flex-shrink:0;}
.kl-room-notice{transition:opacity .85s ease,max-height .85s ease,margin .85s ease;overflow:hidden;}
.kl-room-notice.kl-notice-fade{opacity:0;max-height:0!important;margin-top:0!important;margin-bottom:0!important;}

/* V21.60.21: clearly show when a member is queued. */
#app .kl-raise-hand.kl-hand-raised{background:linear-gradient(145deg,#ffd0d0,#e77d7d);border-color:#ffe2e2;box-shadow:0 0 0 2px #ba5252,0 4px 16px #a7793860}

/* V21.60.22: compact, legible singing queue; ordered-list markers supply the only numbering. */
#handQueue{list-style-type:decimal;list-style-position:outside;margin:6px 0 2px;padding-left:27px;max-height:140px;overflow-y:auto;}
#handQueue .kl-singer-queue-item{font-size:17px;line-height:1.45;padding:2px 0;white-space:normal;overflow-wrap:anywhere;}
#handQueue .kl-singer-queue-item::marker{font-size:15px;font-weight:800;color:#254b62;}
#handQueue .kl-singer-queue-name{font-size:17px;font-weight:800;}
#handQueue .kl-singer-queue-charm{font-size:17px;margin-left:5px;}
.kl-queue-detail{font-size:14px;}
.kl-queue-detail>strong{font-size:15px;}

/* V21.60.24: show every queued singer, no internal scrollbar or fixed display limit. */
#app #handQueue{max-height:none!important;overflow:visible!important;}
#app .kl-queue-detail{min-height:0;overflow:visible;}
/* Retain legacy song-request inputs for compatibility but hide the redundant Song Queue panel. */
#app .song-panel{display:none!important;}
/* Stage-local listener sound toggle; only the listener's incoming audio is affected. */
#app #stagePanel{position:relative;}
#app #stagePanel>summary{padding-right:185px;}
#app #klStageSoundSlot{position:absolute;top:6px;right:10px;z-index:4;}
#app #roomAudioMute.kl-stage-room-sound{display:inline-flex;align-items:center;justify-content:center;min-height:35px;padding:6px 10px;font-size:12px;font-weight:800;white-space:nowrap;border-radius:9px;background:#fff;border:1px solid #87cbd4;color:#07536c;cursor:pointer;}
#app #roomAudioMute.kl-stage-room-sound[aria-pressed="true"]{background:#edf0f2;color:#394b55;border-color:#cbd5da;}
@media(max-width:560px){#app #stagePanel>summary{padding-right:130px;font-size:13px;}#app #roomAudioMute.kl-stage-room-sound{font-size:10px;padding:5px;max-width:125px;white-space:normal;text-align:center;}}

/* V21.60.25: streamlined member actions and clickable names. */
#membersDock .kl-member-name{flex:1 1 auto;cursor:pointer}
#membersDock .kl-member-name:focus-visible,.kl-singer-queue-name:focus-visible{outline:2px solid #008eaa;outline-offset:3px}
#messages .kl-chat-member-action,.kl-singer-queue-name{cursor:pointer}
#messages .kl-chat-member-action:hover,.kl-singer-queue-name:hover{text-decoration:underline}

/* V21.60.29 — visually distinguish waiting/muted microphone from an eligible turn */
#mic:disabled,#mic[aria-disabled="true"]{background:#e6ebef!important;color:#647480!important;border:1px solid #c9d3dc!important;box-shadow:none!important;cursor:not-allowed!important;opacity:1!important;filter:none!important;outline:none!important}
#mic:not(:disabled){background:#1ba88c!important;color:#fff!important;border-color:#128a73!important;box-shadow:0 0 0 2px #bdeee2!important;cursor:pointer!important}

/* V21.60.31: compact original Karaoke Lounge layout */
#app .layout{grid-template-columns:minmax(185px,220px) minmax(0,1fr)!important}
#app .entertainment{display:none!important}
#app .main{grid-template-columns:minmax(310px,.85fr) minmax(360px,1.4fr)!important;grid-template-areas:'heading heading' 'stage chat'!important}
#app .room-heading{position:relative}
#app .room-heading>.kl-admin-menu{margin-left:auto;z-index:1000}
#app .room-heading>.kl-admin-menu .kl-admin-popover{right:0;left:auto;z-index:1100}
#app #adminDock{display:none!important}
#app .kl31-media-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:5px 10px 12px}
#app .kl31-media-toolbar .camera-panel{display:flex;align-items:center;gap:7px;padding:0;border:0;background:transparent;flex-wrap:wrap}
#app .kl31-media-toolbar .camera-panel h3{display:none}
#app .kl31-media-toolbar .camera-actions{display:flex;align-items:center;gap:4px;margin:0}
#app .kl31-media-toolbar #startCamera{min-width:43px;min-height:36px;padding:6px 10px;border-radius:9px}
#app .kl31-media-toolbar #klCameraLiveIndicator{font-size:11px!important;margin-left:2px!important}
#app .kl31-media-toolbar .audio-console{margin:0;padding:6px 9px;flex:1 1 140px;min-width:140px;max-width:100%}
#app .kl31-media-toolbar .audio-console>summary{font-size:12px;cursor:pointer}
#app .kl31-media-toolbar .audio-console>summary .muted{display:none}
#app .kl31-media-toolbar .camera-preview[hidden]{display:none!important}
#app .kl31-media-toolbar .camera-preview:not([hidden]){order:5;flex:1 1 100%;height:auto;min-height:140px;max-height:320px;position:relative;border-radius:12px;overflow:hidden}
#app .kl31-media-toolbar .camera-preview video{display:block;width:100%;height:100%;max-height:300px;object-fit:contain;background:#0d2335}
#app .kl31-media-toolbar .camera-preview.kl31-camera-expanded{position:fixed;z-index:3000;inset:6vh 6vw;width:88vw;height:88vh;max-height:none;background:#0d2335;box-shadow:0 0 0 100vmax #0009}
#app .kl31-media-toolbar .camera-preview.kl31-camera-expanded video{max-height:calc(88vh - 20px);height:100%}
.kl31-camera-maximize{position:absolute;right:8px;top:8px;z-index:2;padding:6px 9px!important;background:#fff!important;color:#173b52!important;border-radius:8px}
#app .conversation .sticker-toolbar[hidden]{display:none!important}
#app #roomComposer #openStickers{flex:0 0 42px;width:42px;min-width:42px;padding:8px 4px;font-size:20px;background:#e8f6ff;color:#00678b;border:1px solid #abd9e6}
#app .conversation #messages{height:clamp(460px,65vh,920px)!important}
#app .room-sidebar #klGiftShop{margin-top:14px;font-size:12px}
#app .room-sidebar #klGiftShop>summary{font-size:12px}
.kl-role-badge{display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;width:19px;height:19px;min-width:19px;border-radius:50%;color:#fff!important;font-size:12px!important;font-weight:900!important;line-height:1;letter-spacing:0;margin-left:5px;box-shadow:0 1px 3px #1228}
.kl-role-admin{background:#df2438}.kl-role-super{background:#a86aeb}
#app .kl-member-row{display:flex;align-items:center;gap:2px}
#app .kl-singer-queue-item{display:list-item}
#stickerDialog.kl31-sticker-popover[open]{position:fixed!important;inset:auto 18px 72px auto!important;margin:0!important;width:min(355px,calc(100vw - 26px))!important;max-width:355px!important;height:min(490px,75vh)!important;max-height:75vh!important;padding:12px!important;border-radius:14px!important;box-shadow:0 15px 50px #1238!important;z-index:2400!important;overflow-y:auto!important;background:#fff!important}
#stickerDialog.kl31-sticker-popover .sticker-title h2{font-size:15px!important}
#stickerDialog.kl31-sticker-popover .sticker-title p{display:none!important}
#stickerDialog.kl31-sticker-popover .sticker-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
#stickerDialog.kl31-sticker-popover .sticker-tile{min-height:88px!important}
#stickerDialog.kl31-sticker-popover .sticker-tile img{height:54px!important;width:54px!important}
@media(max-width:1120px){#app .main{grid-template-columns:1fr!important;grid-template-areas:'heading' 'stage' 'chat'!important}}
@media(max-width:720px){#app .layout{display:block!important}#app .room-sidebar{max-height:290px!important;overflow:auto!important}#app .main{display:grid!important;grid-template-columns:minmax(0,1fr)!important}#app .room-heading{flex-wrap:wrap}#app .conversation #messages{height:50vh!important;min-height:280px!important}#app .kl31-media-toolbar .camera-preview:not([hidden]){max-height:250px}}

/* V21.60.32: compact sticker category tabs */
#stickerDialog.kl31-sticker-popover .sticker-tabs{display:flex;gap:7px;justify-content:flex-start;margin:7px 0}
#stickerDialog.kl31-sticker-popover .sticker-tabs button{flex:0 0 auto!important;width:auto!important;min-width:0!important;padding:7px 11px!important;font-size:12px!important;line-height:1.2!important}

/* V21.60.33: unobtrusive sticker previews and own-message editing */
#stickerDialog .sticker-tile .sticker-zoom,.sticker-dialog .sticker-tile .sticker-zoom{
 position:absolute!important;top:4px!important;left:auto!important;right:4px!important;
 width:24px!important;height:24px!important;min-width:24px!important;min-height:24px!important;
 display:grid!important;place-items:center!important;padding:0!important;margin:0!important;
 font-size:13px!important;line-height:1!important;border-radius:50%!important;
 background:rgba(11,45,54,.82)!important;color:white!important;border:1px solid #8dc8c9!important;
 box-shadow:0 1px 4px #0004!important;z-index:3!important;
}
#stickerDialog .sticker-tile img{object-fit:contain!important}
#messages .bubble.kl-editable-chat{position:relative;padding-right:35px!important;min-height:24px}
#messages .kl-edit-pencil{position:absolute;right:5px;top:50%;transform:translateY(-50%);
 width:24px;height:24px;padding:0;border:1px solid #b7d1d8;border-radius:6px;
 background:#f3fafc;color:#27637a;cursor:pointer;font-size:16px;line-height:1;
 opacity:0;visibility:hidden;pointer-events:none;transition:opacity .12s ease;
}
#messages .kl-editable-chat:hover>.kl-edit-pencil,
#messages .kl-editable-chat:focus-within>.kl-edit-pencil,
#messages .kl-editable-chat.kl-show-edit>.kl-edit-pencil{
 opacity:1;visibility:visible;pointer-events:auto;
}
#messages .kl-edit-pencil:hover{background:#dff1f6}
#messages .kl-inline-editor{display:flex;align-items:center;gap:4px;margin-top:6px;max-width:100%}
#messages .kl-inline-editor input{flex:1;min-width:0;width:auto;max-width:420px;padding:5px 7px;
 border:1px solid #8ebdc9;border-radius:6px;background:white;color:#1c3440;font:inherit}
#messages .kl-inline-editor button{padding:4px 7px;min-width:27px;border:1px solid #b5d0d6;
 background:#e9f7fa;border-radius:5px;cursor:pointer}
@media(hover:none){#messages .kl-editable-chat.kl-show-edit>.kl-edit-pencil{opacity:1;visibility:visible;pointer-events:auto}}
@media(prefers-reduced-motion:reduce){#messages .kl-edit-pencil{transition:none}}

/* V21.60.34 — Midnight Stage: login-only, original approved concept. */
.kl-buildtag{display:none!important}
.kl-login-experience{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(340px, .95fr);align-items:center;gap:clamp(18px,3vw,55px);width:min(1560px,100%);margin:0 auto;min-height:calc(100vh - 110px);padding:clamp(14px,2.5vw,36px)}
.kl-login-experience:has(#auth[hidden]){display:none!important}
body.kl-on-login{background:radial-gradient(ellipse at 45% 30%,#1d1464 0%,#0a103b 45%,#040b24 100%)}
body.kl-on-login .kl-brandbar{background:#07183d;border-bottom:1px solid #285bb1;box-shadow:0 3px 22px #08072c}
body.kl-on-login .kl-brandbar h1{font-family:Georgia,serif;font-size:clamp(23px,2.6vw,36px);color:#ffe29b;text-shadow:0 0 14px #c78846}
body.kl-on-login main{padding:0}
body.kl-on-login footer{color:#aab9d7}
.kl-login-hero{width:100%;max-width:950px;min-width:0;filter:drop-shadow(0 12px 30px #0008)}
.kl-login-hero img{display:block;width:100%;height:auto;object-fit:contain;border-radius:15px;mask-image:linear-gradient(to right,#000 95%,transparent 100%)}
.kl-midnight-auth{max-width:unset;margin:0!important;display:flex;flex-direction:column;gap:12px;position:relative;background:linear-gradient(155deg,#061535f5,#0b2353f7 58%,#0c1545f7);border:2px solid #7886ff;border-radius:26px;box-shadow:0 0 28px #696cff75,0 22px 55px #0008;padding:clamp(22px,3vw,42px);color:#f5f6ff}
.kl-midnight-auth .kl-auth-note{font-size:45px;text-align:center;color:#6d8fff;text-shadow:0 0 18px #a66cff}
.kl-midnight-auth h2{font:700 clamp(29px,2.6vw,42px) Georgia,serif;text-align:center;color:#fff;margin:0}
.kl-midnight-auth>p:not(#authMsg){text-align:center;color:#d3d9f4;margin:0 0 14px;font-size:15px}
.kl-field-label{font-weight:700;font-size:13px;color:#e3e9ff;margin-top:5px}
.kl-midnight-auth input:not([type=checkbox]){width:100%;flex:auto;border:1px solid #6686bc;border-radius:13px;background:#1a355a;color:#fff;min-height:51px;font-size:16px;padding:12px 15px}
.kl-midnight-auth input::placeholder{color:#b3c5df}
.kl-auth-hint{font-size:11px;color:#b9c8e5}
.kl-password-wrap{position:relative}.kl-password-wrap input{padding-right:55px!important}.kl-show-password{position:absolute;right:7px;top:5px;background:transparent;border:0;font-size:23px;min-height:38px;color:#e2ebff}
.kl-midnight-auth .remember-login{display:flex;align-items:center;gap:9px;font-size:14px;color:#e9edff;margin-top:9px}.kl-midnight-auth .remember-login input{flex:none;min-width:17px;width:17px;height:17px;accent-color:#17c6d6}
.kl-auth-actions{display:flex;flex-direction:column;gap:12px;margin-top:12px}.kl-auth-actions button{min-height:54px;border-radius:30px;font-size:19px}.kl-auth-actions #login{background:linear-gradient(100deg,#09c7e3,#35d0c6);border-color:#71eaff;color:#fff;box-shadow:0 4px 17px #05c9d65c}.kl-auth-actions #register{background:transparent;border:2px solid #20d5ef;color:#55edff}.kl-auth-or{display:flex;align-items:center;gap:14px;justify-content:center;color:#d8e3fa}.kl-auth-or:before,.kl-auth-or:after{content:'';height:1px;background:#7b92bc;flex:1}.kl-auth-equalizer{text-align:center;letter-spacing:6px;color:#6457d7;opacity:.65;font-size:20px;margin-top:8px}.kl-midnight-auth #authMsg{min-height:0;margin:0;color:#ffe8a3}
#messages .kl-inline-editor button{color:#174d77!important;font-weight:900!important;border-color:#80a9c2!important;background:#e7f4fb!important;opacity:1!important}
.motion-badge{font-size:13px!important;line-height:1!important;letter-spacing:0!important;padding:3px!important;min-width:20px;min-height:20px;display:grid;place-items:center;top:5px!important;left:5px!important;background:#173f4cd9!important;border-radius:50%!important}
@media(max-width:900px){.kl-login-experience{grid-template-columns:1fr;gap:0;min-height:auto;max-width:650px}.kl-login-hero{max-width:650px}.kl-midnight-auth{margin-top:-12px!important;z-index:1}.kl-login-hero img{max-height:320px;object-fit:contain}}
@media(max-width:540px){.kl-login-experience{padding:12px}.kl-login-hero img{max-height:210px}.kl-midnight-auth{padding:22px 18px;border-radius:19px}.kl-midnight-auth h2{font-size:30px}.kl-auth-actions button{font-size:16px;min-height:48px}.kl-auth-equalizer{letter-spacing:3px}}
@media(prefers-reduced-motion:reduce){.kl-midnight-auth,.kl-login-hero{animation:none!important}}

/* V21.60.35 — compact camera presence */
.kl35-on-camera{margin:10px 0;padding:10px;border:1px solid #c6dce8;border-radius:12px;background:#f2faff;color:#123d60;font-size:13px}
.kl35-on-camera[hidden]{display:none!important}
.kl35-on-camera strong{display:block;margin-bottom:6px}
.kl35-camera-member{display:flex;align-items:center;justify-content:space-between;padding:4px 2px;gap:8px}

/* V21.60.36 — camera stays compact while broadcasting; expanded view floats independently. */
#app .kl31-media-toolbar .camera-preview:not([hidden]):not(.kl31-camera-expanded){
 flex:0 0 min(100%,240px)!important;width:min(100%,240px)!important;
 height:135px!important;min-height:0!important;max-height:135px!important;
 margin:2px 0 0!important;align-self:flex-start!important;
}
#app .kl31-media-toolbar .camera-preview:not(.kl31-camera-expanded) video{
 width:100%!important;height:100%!important;max-height:135px!important;object-fit:cover!important;
}
#app .kl31-media-toolbar .camera-preview.kl31-camera-expanded{
 position:fixed!important;inset:auto!important;z-index:5000!important;
 width:min(580px,calc(100vw - 24px))!important;
 height:min(400px,calc(100dvh - 24px))!important;
 min-height:0!important;max-height:none!important;flex:none!important;
 display:flex!important;flex-direction:column!important;
 border:2px solid #2cb5c3!important;border-radius:14px!important;
 background:#10253a!important;box-shadow:0 18px 60px #0008!important;
}
#app .kl31-media-toolbar .camera-preview.kl31-camera-expanded video{
 display:block!important;flex:1 1 auto!important;min-height:0!important;
 width:100%!important;height:calc(100% - 38px)!important;
 max-height:none!important;object-fit:contain!important;
}
#app .kl31-media-toolbar .camera-preview.kl31-camera-expanded #cameraPlaceholder{display:none!important}
#app .kl31-media-toolbar .camera-preview .kl36-camera-dragbar[hidden]{display:none!important}
#app .kl31-media-toolbar .camera-preview .kl36-camera-dragbar{
 display:flex;align-items:center;justify-content:space-between;gap:12px;
 height:38px;min-height:38px;padding:4px 8px 4px 13px;
 color:white;background:#163b55;cursor:grab;touch-action:none;user-select:none;font-weight:700;font-size:12px;
}
#app .kl31-media-toolbar .camera-preview .kl36-camera-dragbar:active{cursor:grabbing}
#app .kl31-media-toolbar .camera-preview .kl36-camera-minimize{
 padding:5px 10px!important;background:#f1fbff!important;color:#16425d!important;
 font-size:12px!important;border-radius:7px!important;
}
#app .kl31-media-toolbar .camera-preview.kl31-camera-expanded .kl31-camera-maximize{display:none!important}
@media(max-width:720px){#app .kl31-media-toolbar .camera-preview:not([hidden]):not(.kl31-camera-expanded){max-height:135px!important}}

/* V21.60.37: isolated camera-only window; never turn the room chat into a floating pane. */
#kl37CameraWindow[hidden]{display:none!important}
#kl37CameraWindow{position:fixed;z-index:6000;width:min(580px,calc(100vw - 24px));height:min(400px,calc(100dvh - 24px));display:flex;flex-direction:column;overflow:hidden;background:#10253a;border:2px solid #2cb5c3;border-radius:14px;box-shadow:0 18px 60px #0008}
#kl37CameraWindow .kl37-camera-title{flex:0 0 38px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 9px 4px 13px;background:#163b55;color:#fff;cursor:grab;touch-action:none;user-select:none;font-size:12px;font-weight:700}
#kl37CameraWindow .kl37-camera-title:active{cursor:grabbing}
#kl37CameraWindow .kl37-camera-title button{background:#f1fbff;color:#16425d;border-radius:7px;padding:5px 10px;font-size:12px}
#kl37CameraWindow video{display:block;flex:1 1 auto;min-height:0;width:100%;height:calc(100% - 38px);object-fit:contain;background:#0d2335}
#app .main>.conversation{position:relative!important;inset:auto!important;transform:none!important;width:auto!important;max-width:none!important;min-width:0!important;grid-area:chat!important}
#app .main>.stage-collapse{position:relative;grid-area:stage!important;min-width:0!important}
#app .main>.room-heading{grid-area:heading!important}
#app .kl31-media-toolbar .camera-preview:not([hidden]){position:relative!important;inset:auto!important;transform:none!important;z-index:auto!important}

/* V21.60.38 — deterministic two-panel layout. Camera state never changes grid geometry.
   Older version rules assigned fixed grid rows and minimum widths, forcing the chat
   outside the available viewport. Explicitly reset both axes and use shrinkable tracks. */
#app, #app .layout, #app .main, #app .stage-collapse, #app .conversation {min-width:0!important;max-width:100%;box-sizing:border-box!important}
#app .layout {display:grid!important;grid-template-columns:minmax(185px,220px) minmax(0,1fr)!important;gap:12px!important;align-items:start!important;width:100%!important}
#app .layout>.room-sidebar {grid-column:1!important;grid-row:1!important;min-width:0!important}
#app .layout>.main {grid-column:2!important;grid-row:1!important;width:100%!important;min-width:0!important;max-width:100%!important;display:grid!important;grid-template-columns:minmax(0,0.85fr) minmax(0,1.4fr)!important;grid-template-rows:auto auto!important;grid-template-areas:'heading heading' 'stage chat'!important;gap:10px!important;align-items:start!important;overflow:visible!important}
#app .main>.room-heading {grid-area:heading!important;grid-column:1 / -1!important;grid-row:1!important;min-width:0!important}
#app .main>.stage-collapse {grid-area:stage!important;grid-column:1!important;grid-row:2!important;min-width:0!important;width:100%!important;position:relative!important;inset:auto!important;transform:none!important}
#app .main>.conversation {grid-area:chat!important;grid-column:2!important;grid-row:2!important;min-width:0!important;width:100%!important;max-width:100%!important;position:relative!important;inset:auto!important;transform:none!important;align-self:start!important;justify-self:stretch!important;float:none!important}
#app .main>.two, #app .main>.section-eyebrow {display:none!important}
#app .kl31-media-toolbar .camera-preview:not([hidden]) {position:relative!important;inset:auto!important;transform:none!important;float:none!important}
@media(max-width:1050px){
 #app .layout>.main {grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto auto auto!important;grid-template-areas:'heading' 'stage' 'chat'!important}
 #app .main>.room-heading {grid-column:1!important;grid-row:1!important}
 #app .main>.stage-collapse {grid-column:1!important;grid-row:2!important}
 #app .main>.conversation {grid-column:1!important;grid-row:3!important}
}
@media(max-width:720px){
 #app .layout {display:flex!important;flex-direction:column!important}
 #app .layout>.room-sidebar,#app .layout>.main {width:100%!important;max-width:100%!important}
}


/* V21.60.39: Camera drawer occupies a third grid track only while opened. */
#app .main>.kl39-video-drawer[hidden]{display:none!important}
#app .main>.kl39-video-drawer{grid-area:video;grid-column:3;grid-row:2;min-width:0;position:relative;align-self:start;background:#f2fbff;border:1px solid #a8dce9;border-radius:14px;padding:10px;box-sizing:border-box}
#app .layout>.main.kl39-video-open{grid-template-columns:minmax(0,.9fr) minmax(0,1.35fr) minmax(230px,.8fr)!important;grid-template-areas:'heading heading heading' 'stage chat video'!important}
#app .kl39-chat-bar{display:flex;align-items:center;justify-content:space-between;gap:8px}
#app .kl39-chat-bar>h2,#app .kl39-chat-bar>h3{margin:0}
#kl39ToggleVideo{font-size:13px;padding:7px 12px;white-space:nowrap}
#app .kl39-video-heading{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:12px}
#app .kl39-video-heading button{padding:5px 9px}
#app .kl39-video-person{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:8px 5px;border-bottom:1px solid #cce5ef;font-size:12px}
#app .kl39-video-person span{color:#17677a;font-size:11px}
#app .kl39-video-controls{margin-top:12px;border-top:1px solid #cce5ef;padding-top:10px}
#app .kl39-video-controls .kl31-media-toolbar{display:flex!important;flex-wrap:wrap!important;width:100%!important;max-width:100%!important;box-sizing:border-box}
#app .kl39-video-controls .camera-panel{width:100%!important;max-width:100%!important;min-width:0!important}
#app .kl39-video-controls .camera-preview:not([hidden]){width:100%!important;max-width:100%!important;max-height:220px!important}
#app .kl39-video-controls .camera-preview video{width:100%!important;object-fit:contain}
#kl39ProfileDialog{border:1px solid #9dd7e3;border-radius:16px;padding:24px;max-width:min(420px,90vw);box-shadow:0 20px 60px #0005}
@media(max-width:1200px){#app .layout>.main.kl39-video-open{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;grid-template-areas:'heading heading' 'stage chat' 'video video'!important}#app .main>.kl39-video-drawer{grid-column:1/-1;grid-row:3}}
@media(max-width:720px){#app .layout>.main.kl39-video-open{grid-template-columns:minmax(0,1fr)!important;grid-template-areas:'heading' 'stage' 'chat' 'video'!important}#app .main>.kl39-video-drawer{grid-column:1;grid-row:4}}

/* V21.60.40 — small avatars; no extra profile text */
.kl40-profile-photo{display:block;width:96px;height:96px;border-radius:50%;object-fit:cover;margin:12px auto;border:3px solid #12afc4}
.kl40-profile-photo[hidden]{display:none}
.kl40-avatar-button{display:block;width:max-content;max-width:100%;margin:10px auto;padding:8px 12px;border:1px solid #0d799b;border-radius:8px;color:#075477;cursor:pointer;font-weight:700}
.kl40-avatar-hint{display:block;text-align:center;color:#567;margin:4px 0}
#kl40AvatarFeedback{text-align:center;font-size:12px;color:#075477}
.kl40-roster-avatar,.kl40-chat-avatar{width:25px;height:25px;object-fit:cover;border-radius:50%;vertical-align:middle;margin-right:5px;flex-shrink:0}

/* V21.60.41: Compact room picker dialog; keep existing room selection protocol. */
.kl-rooms-open{display:flex;justify-content:space-between;align-items:center;width:100%;padding:14px 12px;border:1px solid #cfe6ed;border-radius:12px;background:#fff;color:#075b80;font-weight:800;cursor:pointer;text-align:left}
.kl-rooms-open:hover{background:#e7f8fb}
.kl-rooms-dialog{width:min(720px,calc(100vw - 28px));max-height:min(80vh,750px);border:1px solid #a8d6e4;border-radius:16px;padding:20px;box-shadow:0 20px 70px #0a264d60;background:#fff;color:#143c59}
.kl-rooms-dialog::backdrop{background:#071a3d99}
.kl-rooms-dialog-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.kl-rooms-dialog-header h2{margin:0;font-size:1.3rem}.kl-rooms-search{display:grid;gap:6px;margin-bottom:14px}.kl-rooms-search input{width:100%;box-sizing:border-box}
.kl-rooms-list{display:grid;gap:8px;max-height:50vh;overflow:auto}.kl-rooms-list .kl-room-choice{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;min-height:54px;padding:12px 14px;border:1px solid #d5e5ef;border-radius:10px;background:#f9fcff;text-align:left;color:#153a55;cursor:pointer}.kl-rooms-list .kl-room-choice:hover,.kl-rooms-list .kl-room-choice:focus-visible{border-color:#00a5ad;background:#e7f9f8}.kl-rooms-list .kl-room-choice.active{border-color:#00a5ad;background:#e0f7f1}.kl-rooms-list .kl-room-choice small{flex-shrink:0;color:#56748a}@media(max-width:600px){.kl-rooms-dialog{padding:14px}.kl-rooms-list .kl-room-choice{align-items:flex-start;flex-direction:column;gap:4px}}

/* V21.60.42 webcam presence */
.kl42-camera-icon{background:transparent;border:0;padding:0 3px;cursor:pointer;font-size:14px}.kl42-view-camera{border:0;background:transparent;color:#075b9d;text-decoration:underline;font-weight:700;cursor:pointer;padding:0 3px}.kl42-camera-highlight{outline:2px solid #0da4ba;border-radius:7px}

/* V21.60.44 Seasonal themes: login artwork only, login controls unchanged */
.kl-seasonal-hero{position:relative;overflow:hidden;border-radius:14px}
.kl-seasonal-hero>img{width:100%;height:100%;object-fit:cover;display:block}
.kl-seasonal-label{position:absolute;left:50%;top:9%;transform:translateX(-50%);background:linear-gradient(95deg,#650b25dd,#9a214bdf);color:#fff2bc;border:1px solid #e7c365;border-radius:50px;padding:8px 22px;font-size:clamp(13px,1.35vw,21px);font-weight:800;white-space:nowrap;box-shadow:0 3px 18px #0009;text-shadow:0 1px 2px #000}
body[data-seasonal-theme="classic"] .kl-seasonal-label{background:#101f50d9}
body[data-seasonal-theme="tet"] .kl-seasonal-label{background:#aa0c16ef;top:4%}
.kl-seasonal-manager select{width:100%;max-width:100%;margin:8px 0}
.kl-seasonal-buttons{display:flex;flex-wrap:wrap;gap:5px}.kl-seasonal-buttons button{font-size:12px;padding:8px}
@media(max-width:780px){.kl-seasonal-label{font-size:13px;top:4%;padding:5px 12px}.kl-seasonal-hero>img{object-fit:cover}}

/* V21.60.46: edge-to-edge seasonal hero within the available desktop column. */
@media (min-width:901px){
 .kl-login-experience{width:100%;max-width:none;grid-template-columns:minmax(0,1fr) minmax(360px, min(31vw,510px));gap:clamp(12px,1.8vw,30px);padding:clamp(10px,1.5vw,24px) clamp(12px,1.5vw,26px);}
 .kl-login-hero{max-width:none;justify-self:stretch;align-self:center;}
 .kl-seasonal-hero>img{height:auto;max-height:calc(100vh - 160px);width:100%;object-fit:contain;object-position:left center;}
 .kl-midnight-auth{width:100%;}
}
/* No decorative audio bars beneath sign-in controls. */
.kl-auth-equalizer,.kl-login-equalizer,.kl-auth-bars,.kl-equalizer{display:none!important}
.kl-midnight-auth #authMsg:empty{display:none!important}

/* V21.60.47: matching, legible roster camera indicator. */
.kl42-camera-icon{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;margin-left:5px;padding:2px 5px;min-width:27px;min-height:25px;border:1px solid #9bd9e4;border-radius:6px;background:#e9fbff;color:#07516a;font-size:19px;line-height:1;filter:none;cursor:pointer}
.kl42-camera-icon:hover,.kl42-camera-icon:focus-visible{background:#c8f2f7;border-color:#079fb0;outline-offset:2px}
/* Use the full available hero column without stretching or softening artwork. */
@media(min-width:901px){
 .kl-login-experience{grid-template-columns:minmax(0,1fr) minmax(350px, min(29vw,475px));gap:clamp(10px,1vw,18px);padding:clamp(10px,1vw,18px)}
 .kl-login-hero{width:100%;max-width:none;margin:0;filter:none}
 .kl-seasonal-hero>img,.kl-login-hero img{display:block;width:100%;height:auto;max-height:calc(100vh - 150px);object-fit:contain;object-position:center center;mask-image:none;image-rendering:auto}
}

/* V21.60.48: preserve high-resolution theme artwork and avoid browser enlargement blur. */
.kl-seasonal-hero>img{image-rendering:auto;object-fit:contain;}

/* V21.60.50: unified seasonal artwork framing, no duplicate holiday overlay. */
.kl-seasonal-label,#klSeasonalHeroLabel{display:none!important}
.kl-seasonal-hero>img{width:100%;height:auto;object-fit:contain;object-position:center center;image-rendering:auto}

/* V21.60.56: room selection before authentication */
#klLoginRoom.kl-login-room{display:block;width:100%;min-height:43px;margin:6px 0 13px;padding:9px 12px;border:1px solid #49769b;border-radius:8px;background:#173657;color:#fff;font:inherit;cursor:pointer}
#klLoginRoom.kl-login-room:focus-visible{outline:2px solid #28d8d3;outline-offset:2px}
#klLoginRoom.kl-login-room option{background:#102b4d;color:#fff}
/* V21.60.57 demo studio */
.demo-launch{position:fixed;right:18px;bottom:18px;z-index:50;background:linear-gradient(110deg,#0879f9,#d6008d);color:white;border:2px solid #f2d17b;border-radius:22px;padding:11px 18px;box-shadow:0 8px 24px #0007;font-weight:700}.demo-studio{width:min(980px,95vw);max-height:88vh;border:2px solid #d5aa52;border-radius:18px;background:#0c1935;color:white;padding:22px;box-shadow:0 22px 60px #000a}.demo-studio::backdrop{background:#020817b9}.demo-studio header{display:flex;align-items:center;justify-content:space-between}.demo-studio h2{color:white;margin:0}.demo-studio h2 small{font-size:12px;color:#ffe17d}.demo-studio button{cursor:pointer}.demo-studio nav{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}.demo-studio nav button{background:#25365b;color:white;border:1px solid #6684c4;border-radius:12px;padding:10px}.demo-studio nav button.selected{background:#077af5}.demo-studio #demoItems{display:grid;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:12px;max-height:56vh;overflow:auto}.demo-card{display:flex;flex-direction:column;align-items:center;gap:7px;background:#f6f9ff;color:#122345;border-radius:13px;padding:10px;min-height:180px}.demo-card img{height:105px;width:120px;object-fit:contain}.demo-card strong{font-size:12px;text-align:center}.demo-card span{color:#8c2d8d;font-weight:800;font-size:12px}.demo-card div{display:flex;gap:4px;flex-wrap:wrap;justify-content:center}.demo-card button{font-size:12px;border-radius:8px;background:#1268d9;color:white;padding:6px}.demo-card small{color:#087c3d}#demoMessage{color:#ffda7b}

/* V21.60.61 prominent animated GIF launcher */
#klGifLaunch{background:#ffdc24!important;color:#b60000!important;border:2px solid #edb600!important;border-radius:6px!important;font-weight:900!important;font-size:15px!important;min-width:45px;min-height:39px;padding:5px 8px;box-shadow:0 2px 6px #0002;cursor:pointer}#klGifLaunch:hover{background:#ffed55!important}

/* V21.60.62 visible GIF launcher and category picker */
#roomComposer #klGifLaunch{display:inline-flex!important;visibility:visible!important;opacity:1!important;align-items:center;justify-content:center;flex:0 0 auto;position:relative;z-index:3;background:#ffdc24!important;color:#b60000!important;font-weight:900!important;border:2px solid #e5b100!important;border-radius:5px!important;min-width:48px;min-height:39px}
#klGifDialog{width:min(690px,94vw);max-height:82vh;padding:20px;border:1px solid #c5a657;border-radius:14px;background:#fff;color:#222}
#klGifDialog::backdrop{background:#0009}
.kl-gif-header,.kl-gif-tabs{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}.kl-gif-tabs{justify-content:flex-start}.kl-gif-tabs button.active{background:#ffdc24;color:#8b0000;font-weight:800}
#klGifGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(125px,1fr));gap:10px;max-height:55vh;overflow:auto}.kl-gif-tile{display:flex;flex-direction:column;align-items:center;gap:6px;padding:7px;background:#faf5e8;color:#222;border:1px solid #e4d6bb;border-radius:9px;cursor:pointer}.kl-gif-tile img{width:110px;height:110px;object-fit:contain}.kl-gif-tile span{font-size:12px}.demo-click-send{cursor:pointer}.demo-click-send:hover{outline:3px solid #e5b100}

/* Account security and readable Announcements & Events — additive overrides. */
#app .kl-announcement-strip{font-size:15px!important;line-height:1.55!important;max-height:116px!important;min-height:44px;padding:9px 12px!important;overflow-y:auto!important;overflow-wrap:anywhere}
#app .kl-announcement-strip strong{font-size:15px}
#app .kl-announcement-item{display:block;margin:5px 0 9px}
.kl-account-dialog{width:min(480px,94vw);max-height:85vh;overflow:auto;border-radius:14px;padding:24px}
.kl-account-dialog section{display:grid;gap:9px;margin:16px 0;padding:10px 0;border-top:1px solid #9995}
.kl-account-dialog input{width:100%;box-sizing:border-box;min-height:40px}
.kl-account-dialog button{margin:6px 5px 6px 0}
.kl-account-open{font-size:12px;margin:8px 0}
.kl-register-email:not([hidden]){margin:12px 0}
/* Phòng Trà MTV — separate YouTube Music Bot panel */
.kl-mtv-bot{margin:12px 0;padding:16px;border:1px solid #c4dbe6;border-radius:14px;background:#f7fcff;color:#19354a;min-width:0}
.kl-mtv-bot[hidden]{display:none!important}
.kl-mtv-head{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.kl-mtv-head strong{display:block;font-size:17px}.kl-mtv-head small,.kl-mtv-item small{display:block;font-size:12px;color:#546b7d;margin-top:4px}
#klMtvControls{display:flex;gap:7px;flex-wrap:wrap}#klMtvControls[hidden]{display:none}
.kl-mtv-bot button{cursor:pointer}.kl-mtv-bot button:disabled{opacity:.5;cursor:default}
.kl-mtv-player{position:relative;aspect-ratio:16/9;background:#142333;border-radius:10px;overflow:hidden;max-height:440px}
#klMtvYouTube{width:100%;height:100%}#klMtvEmpty{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;text-align:center;background:#142333;color:#fff;padding:16px;pointer-events:none}#klMtvEmpty[hidden]{display:none}
.kl-mtv-add{display:grid;gap:9px;margin:14px 0}.kl-mtv-add input{width:100%;box-sizing:border-box;padding:11px;border:1px solid #aec5d6;border-radius:9px;font:inherit}
.kl-mtv-add button{background:#0a9eaf;color:white;border:0;border-radius:9px;padding:12px;font-weight:700}
.kl-mtv-bot h3{font-size:16px;margin:12px 0}.kl-mtv-item{display:flex;justify-content:space-between;gap:12px;padding:10px;border-bottom:1px solid #dce7ed;overflow-wrap:anywhere}.kl-mtv-item button{align-self:center}
.kl-mtv-help{font-size:12px;color:#50697b}.kl-mtv-bot #klMtvStatus{font-size:13px;min-height:20px}

/* V21.60.71: compact, equal-edge login. Original seasonal artwork remains unmodified. */
@media(min-width:901px){
 .kl-login-experience{display:grid;grid-template-columns:minmax(0,1fr) minmax(330px,390px);align-items:stretch;gap:clamp(14px,1.8vw,28px);min-height:0;width:min(1580px,100%);margin:20px auto;padding:clamp(12px,1.5vw,24px)}
 .kl-login-hero{display:flex;align-items:center;justify-content:center;min-height:0;align-self:stretch;border-radius:20px;overflow:hidden;background:#07132a}
 .kl-seasonal-hero>img,.kl-login-hero img{display:block;width:100%;height:100%;max-height:none;object-fit:contain;object-position:center;mask-image:none}
 .kl-midnight-auth{align-self:stretch;justify-content:center;min-width:0;padding:clamp(15px,1.5vw,24px);gap:7px;border-radius:20px}
 .kl-midnight-auth .kl-auth-note{font-size:25px;line-height:1}
 .kl-midnight-auth h2{font-size:clamp(24px,2vw,30px)}
 .kl-midnight-auth>p:not(#authMsg){margin:0 0 3px;font-size:13px}
 .kl-midnight-auth input:not([type=checkbox]){min-height:42px;padding:9px 12px}
 .kl-midnight-auth .remember-login{margin-top:3px}
 .kl-auth-actions{gap:7px;margin-top:4px}
 .kl-auth-actions button{min-height:43px;font-size:16px}
 #klLoginRoom.kl-login-room{min-height:40px;margin:3px 0 5px}
}
.kl-recovery-expand{margin-top:4px;border:1px solid #5579ac;border-radius:12px;background:#0c2548;color:#eef5ff;padding:0 12px}
.kl-recovery-expand>summary{cursor:pointer;padding:11px 2px;font-size:14px;font-weight:700;display:flex;justify-content:space-between;align-items:center;list-style:none}
.kl-recovery-expand>summary::-webkit-details-marker{display:none}
.kl-recovery-expand[open]>summary span{transform:rotate(180deg)}
.kl-recovery-options{display:grid;gap:8px;padding:2px 0 12px}
.kl-recovery-options button{width:100%;font-size:14px;min-height:39px}
.kl-recovery-noemail{font-size:13px;color:#e1ecff}
.kl-recovery-noemail summary{cursor:pointer;text-decoration:underline;padding:5px 0}
.kl-recovery-noemail p{line-height:1.5;margin:5px 0 0}
@media(max-width:900px){.kl-login-experience{align-items:stretch}.kl-login-hero{background:#07132a;border-radius:15px}.kl-midnight-auth{margin-top:12px!important}}


/* V21.60.72 — fluid wide-desktop Compact Login spacing.
   CSS-only: no artwork, authentication, or registration changes. */
@media (min-width: 901px) {
  body.kl-on-login .kl-login-experience {
    width: 100%;
    max-width: none;
    margin: 16px auto;
    padding: 12px clamp(20px, 2.1vw, 40px);
    grid-template-columns: minmax(0, 1fr) minmax(330px, 370px);
    gap: clamp(16px, 1.5vw, 26px);
    align-items: stretch;
  }
  body.kl-on-login .kl-login-hero {
    width: 100%;
    max-width: none;
    min-width: 0;
    align-self: stretch;
  }
  body.kl-on-login .kl-midnight-auth {
    width: 100%;
    max-width: none;
    align-self: stretch;
  }
  body.kl-on-login .kl-login-hero img,
  body.kl-on-login .kl-seasonal-hero > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
  }
}

/* V21.60.73 — prevent the nickname input from stretching vertically.
   The base input rule uses flex:1; override it for the login nickname only. */
.kl-midnight-auth #username {
  display: block;
  flex: 0 0 42px;
  width: 100%;
  height: 42px;
  min-height: 42px;
  max-height: 42px;
  box-sizing: border-box;
  padding: 9px 12px;
  line-height: 22px;
}