:root{--bg:#070a10;--panel:#101621;--panel2:#151d2b;--line:#263248;--text:#f7f3eb;--muted:#96a4b8;--gold:#dcb85f;--blue:#55aaff;--danger:#ff6b72;--good:#65d49a}*{box-sizing:border-box}html,body{height:100%}body{margin:0;background:radial-gradient(circle at top,#182842 0,#080b12 46%);color:var(--text);font:14px Inter,system-ui,Segoe UI,Arial,sans-serif;overflow:hidden}button,input,textarea{font:inherit}.hidden{display:none!important}.topbar{height:68px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 20px;background:#0c121ce8;backdrop-filter:blur(14px);position:relative;z-index:20}.brand{display:flex;gap:10px;align-items:baseline}.brand strong{font-size:22px;color:var(--gold)}.brand span{color:var(--muted)}.brand b{font-size:10px}.topActions{display:flex;align-items:center;gap:10px}.linkBtn,.iconBtn{border:0;background:transparent;color:var(--muted);cursor:pointer}.iconBtn{position:relative;font-size:19px}.badge{position:absolute;top:-7px;right:-7px;min-width:17px;height:17px;border-radius:9px;background:var(--danger);color:white;font-size:10px;display:grid;place-items:center}.layout{height:calc(100vh - 68px);display:grid;grid-template-columns:250px minmax(0,1fr) 280px;gap:12px;padding:12px}.panel{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:16px;overflow:hidden}.rooms,.users{padding:14px;overflow:auto}.asideHead{display:flex;align-items:center;justify-content:space-between}.panel h3{margin:0 0 12px;color:var(--gold)}.room,.user{width:100%;border:0;text-align:left;color:var(--text);background:transparent;padding:10px 11px;border-radius:10px;margin-bottom:6px;cursor:pointer}.room:hover,.room.active,.user:hover{background:#202c40}.room small,.user small{display:block;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:3px}.user{display:grid;grid-template-columns:34px 1fr;gap:9px;align-items:center}.user strong{margin-right:7px}.chat{display:flex;flex-direction:column;position:relative;min-width:0}.chathead{padding:13px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:15px}.chathead h2{margin:0}.chathead p{margin:5px 0 0;color:var(--muted)}.connection{font-size:11px;color:var(--muted)}.connection.online{color:var(--good)}.messages{flex:1;overflow:auto;padding:18px;scroll-behavior:smooth}.msg{display:grid;grid-template-columns:42px minmax(0,1fr);gap:10px;margin-bottom:15px}.msg.own .body{background:#1a2636}.avatar{width:42px;height:42px;border-radius:50%;background:#283449;display:grid;place-items:center;font-weight:800;flex:0 0 auto}.avatar.mini{width:34px;height:34px}.avatar.big{width:70px;height:70px;font-size:25px}.meta{display:flex;gap:7px;align-items:baseline;flex-wrap:wrap}.name{font-weight:800;border:0;background:none;color:var(--text);padding:0;cursor:pointer}.time,.edited{font-size:11px;color:var(--muted)}.rank,.staffPill{font-size:9px;color:#18130a;background:var(--gold);padding:2px 5px;border-radius:6px;font-weight:900}.body{display:inline-block;margin-top:4px;white-space:pre-wrap;word-break:break-word;line-height:1.5;border-radius:10px;padding:7px 9px;background:#121a27;max-width:min(850px,100%)}.mention{color:var(--gold);font-weight:800}.msgActions{opacity:0;transition:.15s;display:flex;gap:7px;margin-top:5px}.msg:hover .msgActions{opacity:1}.msgActions button{border:0;background:transparent;color:var(--muted);padding:2px;cursor:pointer;font-size:11px}.msgActions .danger{color:var(--danger)}.replyQuote{border-left:2px solid var(--gold);padding-left:8px;margin:5px 0;color:var(--muted);display:grid;font-size:12px}.replyQuote b{color:var(--gold)}.replyQuote span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:500px}.reactions{display:flex;gap:5px;flex-wrap:wrap;margin-top:5px}.reactions button{border:1px solid var(--line);background:#172131;color:var(--text);border-radius:12px;padding:2px 7px;cursor:pointer}.reactions b{font-size:10px;color:var(--muted);margin-left:3px}.typing{height:24px;padding:2px 18px;color:var(--muted);font-size:12px}.composer,.pmComposer{display:grid;grid-template-columns:auto 1fr auto;gap:8px;padding:12px;border-top:1px solid var(--line)}.composer textarea,.authbox input,.pmComposer textarea{border:1px solid var(--line);background:#0b1019;color:var(--text);border-radius:10px;padding:11px;resize:none;outline:none}.composer textarea:focus,.authbox input:focus,.pmComposer textarea:focus{border-color:#48688d}.composer button,.authbox button,.pmComposer button,.profileActions button{border:0;border-radius:10px;background:var(--gold);color:#171208;font-weight:800;padding:0 16px;cursor:pointer}.composer #emoji{background:#202c40;color:white}.replyBar{margin:0 12px 0;border:1px solid var(--line);border-bottom:0;background:#151e2b;border-radius:10px 10px 0 0;padding:8px 12px;display:flex;justify-content:space-between;gap:10px}.replyBar div{display:grid;min-width:0}.replyBar small{color:var(--muted)}.replyBar strong{color:var(--gold)}.replyBar span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.replyBar button{border:0;background:none;color:var(--muted);font-size:22px;cursor:pointer}.newMessages{position:absolute;bottom:95px;left:50%;transform:translateX(-50%);border:1px solid var(--line);background:#223049;color:#fff;border-radius:20px;padding:7px 12px;cursor:pointer}.overlay{position:fixed;inset:0;background:#05070be8;display:grid;place-items:center;z-index:100}.authbox{width:min(430px,calc(100vw - 30px));background:#101621;border:1px solid var(--line);border-radius:18px;padding:24px;display:grid;gap:10px;box-shadow:0 24px 80px #0008}.authbox h1{margin:0;color:var(--gold)}.authbox p{margin:0 0 8px;color:var(--muted)}.authbox input{width:100%}.authbox button{min-height:42px}.authbox .secondary,.profileActions .secondary{background:#233148;color:#fff}.authbox hr{width:100%;border:0;border-top:1px solid var(--line)}#authError{color:#ff8585;min-height:18px}.modal{position:fixed;inset:0;background:#04070bbb;z-index:80;display:grid;place-items:center;padding:18px}.modalCard{width:min(520px,100%);max-height:min(760px,calc(100vh - 36px));overflow:auto;background:#101621;border:1px solid var(--line);border-radius:18px;padding:20px;position:relative;box-shadow:0 30px 90px #0009}.modalClose{position:absolute;right:13px;top:10px;background:none;border:0;color:var(--muted);font-size:26px;cursor:pointer}.profileTop{display:flex;gap:15px;align-items:center}.profileTop h2{margin:0}.profileTop p{color:var(--muted)}.profileActions{display:flex;gap:8px;margin-top:20px}.profileActions button{min-height:38px}.pmCard{height:min(720px,calc(100vh - 36px));display:flex;flex-direction:column}.pmHead h3{margin:2px 0 12px}.pmHead small{color:var(--muted)}.pmMessages{flex:1;overflow:auto;border:1px solid var(--line);border-radius:12px;padding:12px;background:#0b1018}.pm{max-width:80%;margin:7px 0}.pm small{color:var(--muted);font-size:10px}.pm div{padding:8px 10px;border-radius:10px;background:#1a2535;white-space:pre-wrap;word-break:break-word}.pm.mine{margin-left:auto}.pm.mine div{background:#26384e}.pmComposer{grid-template-columns:1fr auto;padding:12px 0 0;border:0}.pmComposer textarea{min-height:44px;max-height:100px}.notification{padding:11px;border-bottom:1px solid var(--line)}.notification.unread{background:#19263a}.notification strong{color:var(--gold)}.notification p{margin:4px 0;color:var(--text)}.notification small,.muted{color:var(--muted)}.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#202d42;border:1px solid var(--line);border-radius:10px;padding:10px 16px;z-index:150;box-shadow:0 12px 40px #0008}.mobileToggle,.mobileClose{display:none}
@media(max-width:900px){.topbar{height:58px;padding:0 9px}.brand strong{font-size:17px}.brand span{display:none}.layout{height:calc(100vh - 58px);grid-template-columns:1fr;padding:5px}.panel{border-radius:10px}.rooms,.users{display:block;position:fixed;top:58px;bottom:0;width:min(330px,90vw);z-index:60;transition:transform .2s;box-shadow:0 0 60px #0009}.rooms{left:0;transform:translateX(-105%)}.users{right:0;transform:translateX(105%)}.rooms.mobileOpen,.users.mobileOpen{transform:translateX(0)}.mobileToggle,.mobileClose{display:inline-block;border:0;background:transparent;color:var(--text);font-size:20px;cursor:pointer}.chathead{padding:10px 12px}.messages{padding:12px}.msgActions{opacity:1}.body{max-width:100%}.topActions .linkBtn{display:none}.connection{display:none}.composer{padding:8px}.composer button:last-child{padding:0 10px}.modal{padding:8px}.modalCard{max-height:calc(100vh - 16px)}.pmCard{height:calc(100vh - 16px)}}

/* v0.5 authentication experience */
.authOverlay{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:28px;background:
radial-gradient(circle at 18% 18%,rgba(62,114,181,.20),transparent 32%),
radial-gradient(circle at 82% 78%,rgba(220,184,95,.12),transparent 30%),
linear-gradient(135deg,#070a10 0%,#0b111b 48%,#080b12 100%);overflow:auto}
.authShell{width:min(980px,100%);min-height:620px;display:grid;grid-template-columns:minmax(0,1fr) 440px;border:1px solid rgba(255,255,255,.09);border-radius:26px;overflow:hidden;background:rgba(12,18,28,.93);box-shadow:0 34px 100px rgba(0,0,0,.55);backdrop-filter:blur(18px)}
.authHero{padding:58px;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden;background:linear-gradient(145deg,rgba(25,39,60,.96),rgba(12,18,28,.98))}
.authHero:after{content:"";position:absolute;width:360px;height:360px;border-radius:50%;right:-150px;top:-120px;border:1px solid rgba(220,184,95,.18);box-shadow:0 0 0 45px rgba(220,184,95,.025),0 0 0 90px rgba(220,184,95,.018)}
.authBrandMark{width:58px;height:58px;display:grid;place-items:center;border-radius:17px;background:linear-gradient(145deg,#f0d17f,#bd9440);color:#171109;font-size:19px;font-weight:950;letter-spacing:-1px;box-shadow:0 14px 35px rgba(220,184,95,.18);margin-bottom:28px}
.authEyebrow{font-size:11px;letter-spacing:.2em;font-weight:800;color:var(--gold);margin-bottom:11px}
.authHero h1{font-size:clamp(34px,4.2vw,52px);line-height:1.02;letter-spacing:-.045em;margin:0 0 20px;max-width:530px}.authHero h1 span{color:var(--gold)}
.authHero>p{color:#a9b5c7;line-height:1.75;font-size:15px;max-width:520px;margin:0 0 27px}
.authFeatures{display:flex;flex-wrap:wrap;gap:9px}.authFeatures span{border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.035);border-radius:999px;padding:8px 11px;font-size:11px;color:#d4dbe6}
.authLegal{position:absolute;left:58px;right:58px;bottom:30px;color:#647286;font-size:10px;line-height:1.5}
.authPanel{padding:42px 38px;background:linear-gradient(180deg,#101722,#0c121c);display:flex;flex-direction:column;justify-content:center}
.authPanelTop{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:24px}.authPanelTop small{color:var(--muted);font-size:11px}.authPanelTop h2{font-size:28px;letter-spacing:-.03em;margin:4px 0 0}.authVersion{font-size:10px;color:#7f8da1;border:1px solid var(--line);border-radius:999px;padding:5px 8px}
.authTabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:#080d15;border:1px solid #202a3b;padding:4px;border-radius:12px;margin-bottom:22px}.authTab{height:39px;border:0;border-radius:9px;background:transparent;color:#7f8da1;font-weight:750;cursor:pointer;transition:.18s}.authTab.active{background:#1a2433;color:#fff;box-shadow:0 5px 16px #0004}
.authForm{display:grid;gap:15px}.authField{display:grid;gap:7px}.authField>span{font-size:11px;font-weight:750;color:#c7d0dd}.fieldControl{position:relative;display:flex;align-items:center}.fieldIcon{position:absolute;left:13px;color:#74839a;font-size:13px;z-index:1;pointer-events:none}
.fieldControl input{width:100%;height:47px;border:1px solid #283449;background:#090e16;color:#f7f3eb;border-radius:11px;padding:0 46px 0 39px;outline:none;transition:border-color .15s,box-shadow .15s,background .15s}.fieldControl input::placeholder{color:#586579}.fieldControl input:focus{border-color:#8d7743;background:#0b111b;box-shadow:0 0 0 3px rgba(220,184,95,.08)}
.passwordToggle{position:absolute;right:7px;width:34px;height:34px;border:0;border-radius:8px;background:transparent;color:#7d8ba0;cursor:pointer}.passwordToggle:hover{background:#1a2332;color:#fff}.fieldHint{color:#69778b;font-size:10px;line-height:1.45}
.authPrimary,.authGuest{height:47px;border:0;border-radius:11px;cursor:pointer;font-weight:850;transition:transform .12s,filter .12s,opacity .12s}.authPrimary{margin-top:3px;background:linear-gradient(135deg,#e6c46e,#c89e47);color:#181208;display:flex;align-items:center;justify-content:center;gap:12px;box-shadow:0 12px 28px rgba(220,184,95,.13)}.authPrimary:hover{filter:brightness(1.06);transform:translateY(-1px)}.authPrimary:disabled,.authGuest:disabled{opacity:.55;cursor:wait;transform:none}
.authGuest{background:#192434;color:#dce4ee;border:1px solid #2a374b}.authGuest:hover{background:#202d40}.authDivider{display:flex;align-items:center;gap:10px;color:#566377;font-size:10px}.authDivider:before,.authDivider:after{content:"";height:1px;background:#202a3a;flex:1}
.authCheck{display:flex;align-items:flex-start;gap:9px;color:#8795a8;font-size:10px;line-height:1.55}.authCheck input{margin-top:2px;accent-color:#dcb85f}.authCheck a{color:#d5b55f;text-decoration:none}.authCheck a:hover{text-decoration:underline}
.authMessage{min-height:18px;margin-top:13px;border-radius:9px;color:#ff8f94;font-size:11px;line-height:1.45}.authMessage:not(:empty){background:rgba(255,107,114,.07);border:1px solid rgba(255,107,114,.18);padding:9px 11px}
.authMessage.connectionBlocked{font-size:13px;font-weight:750;line-height:1.55;color:#ffe7e8;background:rgba(173,32,45,.22);border-color:rgba(255,105,115,.58);padding:13px 14px;box-shadow:0 0 0 1px rgba(255,105,115,.08) inset}
.passwordMeter{height:4px;border-radius:8px;background:#1e2939;overflow:hidden}.passwordMeter i{display:block;height:100%;width:0;border-radius:inherit;background:#ff6b72;transition:width .2s,background .2s}
.authFooter{text-align:center;color:#536075;font-size:10px;margin:21px 0 0}
@media(max-width:820px){.authOverlay{padding:14px}.authShell{grid-template-columns:1fr;min-height:0;max-width:480px}.authHero{display:none}.authPanel{padding:30px 24px;min-height:min(690px,calc(100vh - 28px));justify-content:center}}
@media(max-width:420px){.authOverlay{padding:0}.authShell{border-radius:0;border:0;min-height:100vh}.authPanel{padding:26px 20px}.authPanelTop h2{font-size:25px}}

/* v0.6 chat polish + native profile system */
.topbar{box-shadow:0 10px 35px #0003}.rooms,.users{background:linear-gradient(180deg,#111b2a,#0d1520)}.asideHead h3{font-size:16px;letter-spacing:.01em}.room{padding:12px 13px;border:1px solid transparent}.room:hover{border-color:#30435e}.room.active{background:linear-gradient(135deg,#24344b,#1b2739);border-color:#405a79;box-shadow:inset 3px 0 var(--gold)}.room small{margin-top:5px}.users .user{position:relative;grid-template-columns:36px 1fr 8px;border:1px solid transparent}.users .user:hover{border-color:#30445f}.userText{min-width:0}.userNameLine{display:flex;align-items:center;gap:6px;min-width:0}.userNameLine strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.onlineDot{width:8px;height:8px;border-radius:50%;background:var(--good);box-shadow:0 0 0 3px rgba(101,212,154,.08)}.rank{background:color-mix(in srgb,var(--rank-color,#dcb85f) 18%,transparent);color:var(--rank-color,#dcb85f);border:1px solid color-mix(in srgb,var(--rank-color,#dcb85f) 48%,transparent);font-size:8px;padding:2px 5px}.accountChip{display:flex;align-items:center;gap:7px;background:#131e2d;border:1px solid #2a3a50;color:#fff;border-radius:999px;padding:7px 10px;cursor:pointer}.accountChip:hover{border-color:#536a87}.accountDot{width:7px;height:7px;border-radius:50%;background:var(--good)}.chathead{background:linear-gradient(180deg,#151d2b,#111925)}.chathead h2{font-size:19px}.chatWelcome{height:100%;min-height:280px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--muted);text-align:center;gap:7px}.chatWelcome span{font-size:34px;filter:grayscale(.3)}.chatWelcome strong{font-size:18px;color:#dfe7f2}.chatWelcome small{max-width:320px}.composer{background:#0d141f}.composer textarea{min-height:45px;max-height:130px}.composer button:last-child{min-width:105px}.sideEmpty{padding:18px 8px;color:var(--muted);text-align:center;font-size:12px}.profileModalCard{padding:0;overflow:hidden}.profileCover{height:150px;background:radial-gradient(circle at 75% 15%,color-mix(in srgb,var(--profile-accent) 28%,transparent),transparent 35%),linear-gradient(135deg,#1f3048,#0e1724);position:relative;border-bottom:1px solid var(--line)}.profileCover.gold{background:radial-gradient(circle at 75% 15%,rgba(228,189,99,.35),transparent 35%),linear-gradient(135deg,#352b1c,#121923)}.profileCover.ocean{background:radial-gradient(circle at 75% 15%,rgba(71,169,255,.32),transparent 35%),linear-gradient(135deg,#15364e,#0c1723)}.profileCover.neon{background:radial-gradient(circle at 75% 15%,rgba(225,74,255,.32),transparent 35%),linear-gradient(135deg,#231737,#0c1523)}.profileAvatar{position:absolute;left:24px;bottom:-38px;width:82px;height:82px;border-radius:50%;background:#253a54;border:4px solid #101621;display:grid;place-items:center;font-size:28px;font-weight:950;color:var(--profile-accent)}.profileDetails{padding:50px 24px 24px}.profileIdentity{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}.profileIdentity h2{margin:0;font-size:24px}.profileIdentity p{margin:4px 0 0;color:var(--muted)}.profileRank{border:1px solid currentColor;border-radius:999px;padding:4px 9px;font-size:10px;font-weight:900}.profileBio{margin:18px 0;padding:13px;border:1px solid var(--line);border-radius:12px;background:#0c131e;line-height:1.6;white-space:pre-wrap}.profileMeta{display:flex;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:11px}.profileEditorCard{width:min(700px,100%)}.profileEditorHead small{color:var(--gold);font-weight:900;letter-spacing:.12em}.profileEditorHead h2{margin:5px 0}.profileEditorHead p{margin:0 0 18px;color:var(--muted)}.profileForm{display:grid;grid-template-columns:1fr 1fr;gap:13px}.profileForm label{display:grid;gap:6px;color:#b7c5d7;font-size:12px}.profileForm input,.profileForm select,.profileForm textarea{width:100%;background:#0a111b;color:#fff;border:1px solid var(--line);border-radius:10px;padding:10px}.profileForm .wide{grid-column:1/-1}.profileEditorActions{display:flex;justify-content:flex-end;gap:9px}.primaryBtn,.secondaryBtn{border:0;border-radius:10px;padding:10px 14px;font-weight:800;cursor:pointer}.primaryBtn{background:var(--gold);color:#171208}.secondaryBtn{background:#213047;color:#fff}@media(max-width:650px){.profileForm{grid-template-columns:1fr}.profileForm .wide{grid-column:auto}.accountChip{padding:7px}.accountChip #me{display:none}}

/* v0.8 profile upgrade */
.profileCheck{display:flex!important;align-items:center;gap:9px;padding:12px;border:1px solid var(--line,#243750);border-radius:10px;background:#0b1726}.profileCheck input{width:auto!important}.name-effect-glow{text-shadow:0 0 9px currentColor}.name-effect-gradient{background:linear-gradient(90deg,#f3c969,#79b7ff,#e98acb);-webkit-background-clip:text;background-clip:text;color:transparent}.name-effect-pulse{animation:gcPulse 1.8s ease-in-out infinite}@keyframes gcPulse{50%{opacity:.6}}.avatar-frame-gold{box-shadow:0 0 0 3px #e4bd63}.avatar-frame-neon{box-shadow:0 0 0 2px #75e8ff,0 0 16px #75e8ff88}.avatar-frame-vip{box-shadow:0 0 0 3px #e4bd63,0 0 18px #e4bd6388}

/* v0.8 presence, room transition and emoji UX */
.statusChip{border:1px solid var(--line);background:#121c2a;color:var(--text);border-radius:999px;padding:7px 11px;display:flex;gap:7px;align-items:center;cursor:pointer}.statusChip:hover{background:#1b293d}.roomSwitchOverlay{position:fixed;inset:0;z-index:160;background:rgba(4,8,15,.82);backdrop-filter:blur(9px);display:grid;place-items:center;color:var(--text);padding:18px}.roomSwitchCard{width:min(470px,calc(100vw - 30px));position:relative;overflow:hidden;background:linear-gradient(155deg,rgba(21,31,47,.98),rgba(8,14,24,.98));border:1px solid rgba(220,184,95,.25);border-radius:22px;padding:30px 30px 24px;text-align:center;box-shadow:0 30px 100px #000b,0 0 55px rgba(69,133,223,.12)}.roomSwitchCard:before{content:"";position:absolute;inset:-90px auto auto -80px;width:240px;height:240px;background:radial-gradient(circle,rgba(73,144,255,.23),transparent 68%);pointer-events:none}.roomSwitchCard:after{content:"";position:absolute;right:-80px;bottom:-100px;width:230px;height:230px;background:radial-gradient(circle,rgba(220,184,95,.15),transparent 70%);pointer-events:none}.gcSwitchMark{position:relative;width:76px;height:76px;margin:0 auto 15px;border-radius:22px;display:grid;place-items:center;background:linear-gradient(145deg,#17283f,#0b1320);border:1px solid #335076;box-shadow:inset 0 0 0 1px #0c1320,0 15px 34px #0007}.gcSwitchMark span{font-size:23px;font-weight:950;letter-spacing:-.04em;color:var(--gold)}.gcSwitchMark i{position:absolute;right:8px;bottom:8px;width:12px;height:12px;border-radius:50%;background:#56df9c;border:2px solid #101925;box-shadow:0 0 12px #56df9c}.switchEyebrow{font-size:10px;font-weight:900;letter-spacing:.16em;color:#7893b7;margin-bottom:7px}.roomSwitchCard h2{font-size:24px;margin:4px 0 8px}.roomSwitchCard h2 span{color:var(--gold)}.roomSwitchCard p{color:var(--muted);margin:0 auto 16px;max-width:365px;line-height:1.55}.roomSwitchCard strong{display:block;font-size:12px;color:#c9d4e5}.gcSwitchDots{height:22px;display:flex;justify-content:center;align-items:center;gap:5px}.gcSwitchDots i{width:6px;height:6px;border-radius:50%;background:#5da6ff;animation:gcSwitchPulse 1s infinite ease-in-out}.gcSwitchDots i:nth-child(2){animation-delay:.14s;background:var(--gold)}.gcSwitchDots i:nth-child(3){animation-delay:.28s;background:#56df9c}@keyframes gcSwitchPulse{0%,100%{opacity:.35;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}.switchTrack{height:6px;background:#172235;border-radius:20px;overflow:hidden;margin:5px 0 9px;border:1px solid #22334c}.switchTrack i{display:block;width:12%;height:100%;border-radius:20px;background:linear-gradient(90deg,#4f91ff,var(--gold),#56d89d);transition:width .55s ease;box-shadow:0 0 15px rgba(79,145,255,.38)}.switchMeta{display:flex;justify-content:space-between;gap:10px;color:#71819a;font-size:11px}.switchMeta b{color:#a9bad1}.roomSwitchCard button{position:relative;z-index:1;margin-top:18px;border:1px solid #30445f;background:#141f2e;color:#d9e2ef;border-radius:10px;padding:9px 15px;font-weight:800;cursor:pointer}.roomSwitchCard button:hover{border-color:#597596;background:#1b293a}@media(max-width:520px){.roomSwitchCard{padding:25px 20px 20px;border-radius:18px}.gcSwitchMark{width:65px;height:65px;border-radius:18px}.roomSwitchCard h2{font-size:21px}.switchMeta{font-size:10px}}
.statusCard{max-width:440px}.modalTitle small{color:var(--gold);font-weight:900;letter-spacing:.12em}.modalTitle h3{font-size:24px;margin:4px 0}.modalTitle p{color:var(--muted);margin-top:0}.statusList{display:grid;gap:5px;max-height:56vh;overflow:auto}.statusOption{display:grid;grid-template-columns:30px 1fr 10px;align-items:center;gap:7px;width:100%;border:1px solid transparent;background:#182230;color:#e8eef7;padding:10px 12px;border-radius:10px;text-align:left;cursor:pointer}.statusOption:hover{border-color:#3c5574;background:#202d3f}.statusOption span{font-size:18px}.statusOption i{width:8px;height:8px;border-radius:50%}.invisibleRow{margin-top:12px;padding:12px;border:1px solid #4b3d63;background:#1e1830;border-radius:12px;display:flex;gap:10px;align-items:flex-start}.invisibleRow input{margin-top:4px}.invisibleRow span{display:grid}.invisibleRow small{color:#a99bbd;margin-top:3px}.emojiPanel{position:fixed;z-index:80;left:275px;bottom:83px;width:370px;max-width:calc(100vw - 24px);background:#101927;border:1px solid var(--line);box-shadow:0 20px 65px #0009;border-radius:16px;padding:12px}.emojiHead{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.emojiHead button{border:0;background:transparent;color:#fff;font-size:20px;cursor:pointer}.emojiTabs{display:flex;gap:5px;overflow:auto;margin-bottom:10px}.emojiTabs button{border:0;background:#182638;color:#a9b7ca;border-radius:8px;padding:6px 9px;cursor:pointer;white-space:nowrap}.emojiTabs button.active{background:#294467;color:#fff}.emojiGrid{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;max-height:260px;overflow:auto}.emojiGrid button{border:0;background:transparent;border-radius:8px;font-size:23px;padding:6px;cursor:pointer}.emojiGrid button:hover{background:#25354b}@media(max-width:760px){.emojiPanel{left:12px;bottom:88px}.statusChip span:last-child{display:none}}

.newUserBadge{display:inline-grid;place-items:center;width:17px;height:17px;border-radius:4px;background:linear-gradient(145deg,#1e83ff,#054cad);color:#fff;font:900 10px/1 system-ui;box-shadow:0 0 0 1px #71b9ff55,0 2px 6px #116dcc55}.genderIcon{display:inline-grid;place-items:center;font-style:normal;font-weight:1000;font-size:17px;line-height:1}.genderIcon.male,.profileGender.male{color:#39a7ff}.genderIcon.female,.profileGender.female{color:#ff4d91}.profileGender{font-size:.8em;margin-left:4px}.userNameLine{gap:5px;flex-wrap:wrap}

.liveStats{margin:8px;border:1px solid #283d56;border-radius:14px;overflow:hidden;background:#0d1b2d}.liveStats>b{display:block;text-align:center;padding:8px;background:linear-gradient(90deg,#dcecff,#f0e4ff);color:#263044;font-size:12px}.liveStats>div{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:7px}.liveStats span{text-align:center;background:#15243a;border-radius:9px;padding:6px 2px;color:#99abc1;font-size:9px}.liveStats strong{display:block;color:#fff;font-size:13px}.deviceBadge{font-size:12px;opacity:.8;margin-left:4px}

/* v0.10 user-selectable chat themes */
:root{--user-accent:var(--gold)}
:root[data-chat-theme="midnight"]{--bg:#070a10;--panel:#101621;--panel2:#151d2b;--line:#263248;--text:#f7f3eb;--muted:#96a4b8;--gold:var(--user-accent)}
:root[data-chat-theme="ocean"]{--bg:#06101a;--panel:#0c1d2a;--panel2:#112938;--line:#20506b;--text:#effbff;--muted:#8eb7c6;--gold:var(--user-accent,#39c6df)}
:root[data-chat-theme="purple"]{--bg:#0d0717;--panel:#171021;--panel2:#21162e;--line:#50376c;--text:#faf2ff;--muted:#b8a0c7;--gold:var(--user-accent,#b878ff)}
:root[data-chat-theme="forest"]{--bg:#07110d;--panel:#0d1b16;--panel2:#13261f;--line:#2b5545;--text:#f2fff8;--muted:#92b6a7;--gold:var(--user-accent,#62d39d)}
:root[data-chat-theme="rose"]{--bg:#13090f;--panel:#201018;--panel2:#2a1520;--line:#603347;--text:#fff4f8;--muted:#c2a1ae;--gold:var(--user-accent,#ff719f)}
:root[data-chat-theme="graphite"]{--bg:#0b0c0f;--panel:#15171c;--panel2:#1c1f25;--line:#383d47;--text:#f4f5f7;--muted:#9fa4ad;--gold:var(--user-accent,#d0d4da)}
:root[data-chat-theme="light"]{--bg:#eef4fa;--panel:#ffffff;--panel2:#f4f8fc;--line:#c4d4e4;--text:#1a2b3d;--muted:#586f87;--gold:var(--user-accent,#3f73d8);color-scheme:light}
:root[data-chat-theme="light"] body{background:linear-gradient(180deg,#f7fbff 0%,#edf4fa 52%,#e8f0f8 100%)}
:root[data-chat-theme="light"] .topbar,:root[data-chat-theme="light"] .composer,:root[data-chat-theme="light"] .chathead{background:#fffffffa}
:root[data-chat-theme="light"] .composer textarea,:root[data-chat-theme="light"] .profileForm input,:root[data-chat-theme="light"] .profileForm select,:root[data-chat-theme="light"] .profileForm textarea{background:#fff;color:#1a2b3d}
:root[data-chat-theme="vip-gold"]{--bg:#0d0b07;--panel:#18140c;--panel2:#211b0f;--line:#5c4822;--text:#fff8e9;--muted:#b9a785;--gold:var(--user-accent,#e7bf5b)}

/* v0.11 quickbar + grouped userlist */
.layout{grid-template-columns:58px 245px minmax(0,1fr) 320px}.quickbar{background:#232b3a;border:1px solid #30394a;border-radius:14px;display:flex;flex-direction:column;align-items:center;padding:9px 6px;gap:8px}.quickbar button{width:42px;height:42px;border:0;border-radius:10px;background:transparent;color:#6ca0ff;font-size:20px;cursor:pointer}.quickbar button:hover{background:#30394b;color:#fff}.users{padding:10px}.userGroup{margin:0 0 10px}.userGroup header{height:39px;border-radius:10px;background:#343d4c;color:#b8c2d0;display:grid;grid-template-columns:28px 1fr 28px;place-items:center;font-size:11px;text-transform:uppercase;font-weight:900;letter-spacing:.03em;margin:5px 2px 7px}.userGroup:first-child header{background:linear-gradient(90deg,#594f30,#4d4630);color:#ffd91f}.userGroup:nth-of-type(3) header{background:#39414f}.userGroup:nth-of-type(4) header{background:linear-gradient(90deg,#4a315d,#4e345f);color:#e88cff}.userCard{position:relative;width:100%;min-height:56px;display:grid;grid-template-columns:45px minmax(0,1fr) auto;gap:9px;align-items:center;border:1px solid color-mix(in srgb,var(--card-glow) 60%,#344253);border-left:3px solid var(--card-glow,#4d87db);border-right:3px solid var(--card-glow,#4d87db);border-radius:15px;background:linear-gradient(90deg,#2a3242dd,#303849dd),var(--user-banner);background-size:cover;background-position:center;color:#fff;padding:6px 8px;margin:5px 0;text-align:left;box-shadow:0 0 13px color-mix(in srgb,var(--card-glow) 25%,transparent);cursor:pointer;overflow:hidden}.userCard:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#2a3242e8,#2a3242b8 60%,#2a324255);z-index:0}.userCard>*{position:relative;z-index:1}.userCard.offline{opacity:.48;filter:saturate(.65)}.userCard.botUser{border-color:#7f8c9f}.uAvatar{width:42px;height:42px;border-radius:50%;background:#182434;display:grid;place-items:center;border:2px solid var(--card-glow,#60dc8f);font-weight:900;position:relative;overflow:visible}.uAvatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}.presenceDot{position:absolute;width:9px;height:9px;border-radius:50%;background:#34d66b;left:-2px;top:0;box-shadow:0 0 0 2px #202938}.offline .presenceDot{background:#747d8d}.uBody{min-width:0}.uName{display:flex;align-items:center;gap:6px}.uName strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}.uBody small{display:block;color:#c5ccd7;font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px}.uMeta{display:flex;align-items:center;gap:5px;font-size:16px}.newPill{background:linear-gradient(135deg,#6789ff,#c16cff);color:#fff;border-radius:999px;font-size:9px;padding:3px 7px;box-shadow:0 2px 7px #6e71ff88}.offlineGroup header{color:#888f9b}.liveStats{margin:0 0 9px}.rooms{padding:11px}
@media(max-width:900px){.layout{grid-template-columns:1fr}.quickbar{position:fixed;left:6px;bottom:7px;right:6px;height:52px;z-index:55;flex-direction:row;justify-content:space-around;padding:4px}.quickbar button{height:42px}.chat{padding-bottom:54px}}

/* v0.11 UI patch — compact rail + overlay drawers */
@media(min-width:901px){
  .layout{grid-template-columns:58px minmax(0,1fr) 320px;position:relative}
  .rooms{display:block;position:fixed;left:82px;top:80px;bottom:18px;width:310px;z-index:75;transform:translateX(calc(-100% - 28px));transition:transform .24s cubic-bezier(.22,.8,.25,1),opacity .2s ease;opacity:0;pointer-events:none;box-shadow:0 22px 70px #000b;border-color:#35455d;background:linear-gradient(180deg,#172235f2,#0d1522f5);backdrop-filter:blur(18px)}
  .rooms.mobileOpen{transform:translateX(0);opacity:1;pointer-events:auto}
  .rooms .asideHead{position:sticky;top:-11px;z-index:2;margin:-11px -11px 9px;padding:15px 14px 11px;background:#101a29f2;border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}
  .rooms .mobileClose{display:inline-grid;place-items:center;width:30px;height:30px;border:1px solid #34445c;border-radius:9px;background:#182437;color:#dbe7f6;cursor:pointer}
  .sidebarBackdrop{display:block;position:fixed;inset:68px 0 0 0;z-index:69;background:#02060d70;opacity:0;pointer-events:none;transition:opacity .2s ease;backdrop-filter:blur(1px)}
  .sidebarBackdrop.open{opacity:1;pointer-events:auto}
  .quickbar{z-index:76;position:relative}
  .quickbar button.active{background:linear-gradient(145deg,#29456d,#243952);color:#fff;box-shadow:inset 3px 0 0 var(--gold),0 7px 18px #0005}
  .quickbar button{position:relative}
  .quickbar button:after{content:attr(title);position:absolute;left:50px;top:50%;transform:translateY(-50%) translateX(-4px);background:#111b2a;border:1px solid #33435a;color:#edf4ff;border-radius:8px;padding:6px 9px;font-size:11px;white-space:nowrap;opacity:0;pointer-events:none;transition:.15s;box-shadow:0 8px 25px #0008}
  .quickbar button:hover:after{opacity:1;transform:translateY(-50%) translateX(0)}
  .chat{min-width:0}
}

/* GC Core 0.51.65 — aanvullende afwerking voor meldingen, profielen en beveiligde media. */
#notificationsModal .notificationCard{
  width:min(760px,calc(100vw - 24px))!important;max-height:min(88dvh,820px)!important;
  display:flex!important;flex-direction:column!important;padding:17px!important;overflow:hidden!important;
  border:1px solid rgba(101,132,169,.34)!important;border-radius:18px!important;
  background:linear-gradient(180deg,#1a2432 0%,#111a26 100%)!important;
}
#notificationsModal .notificationHead{flex:0 0 auto!important;margin:0 0 12px!important;padding:0 42px 12px 0!important;border-bottom:1px solid rgba(122,145,174,.24)!important}
#notificationsModal .notificationHead h3{margin:2px 0 0!important;font-size:21px!important}
#notificationsModal .notificationHead small{color:#e4bd63!important;font-size:9px!important;font-weight:950!important;letter-spacing:.12em!important}
#notificationsModal .notificationHead>div:last-child{display:flex!important;gap:7px!important}
#notificationsModal .notificationHead button{min-height:38px!important;padding:0 12px!important;border-radius:10px!important;font-size:10px!important}
#notificationsModal .pushSettings{
  flex:0 0 auto!important;display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:10px 14px!important;
  margin:0 0 12px!important;padding:13px 14px!important;border:1px solid rgba(102,128,157,.28)!important;
  border-radius:14px!important;background:rgba(35,47,64,.72)!important;
}
#notificationsModal .pushSettings>div:first-child{display:grid!important;gap:3px!important}
#notificationsModal .pushSettings b{font-size:12px!important}
#notificationsModal .pushSettings small,#notificationsModal .pushSettings p{font-size:9px!important;line-height:1.4!important;color:#aab7c8!important}
#notificationsModal .pushSettings>button{align-self:center!important;min-height:38px!important;border-radius:10px!important;font-size:10px!important}
#notificationsModal .pushPreferenceFields{grid-column:1/-1!important}
#notificationsModal .notificationList{flex:1 1 auto!important;min-height:0!important;max-height:none!important;padding:2px 4px 2px 0!important;gap:7px!important}
#notificationsModal .notification{min-height:70px!important;padding:9px 10px!important;border-radius:12px!important;background:#0e1723!important}
#notificationsModal .notification b{font-size:11px!important}.notification a{font-size:9px!important}

.pmSecureMediaCard{
  width:min(620px,calc(100vw - 22px))!important;max-height:min(90dvh,760px)!important;padding:18px!important;
  border-radius:18px!important;background:radial-gradient(circle at 0 0,rgba(67,133,187,.13),transparent 34%),linear-gradient(165deg,#182433,#0d1521)!important;
}
.pmSecureMediaHead>span{width:42px!important;height:42px!important;flex-basis:42px!important;border-radius:12px!important;font-size:20px!important}
.pmSecureMediaHead h3{font-size:20px!important;margin:2px 0 4px!important}.pmSecureMediaHead p{max-width:470px!important;font-size:10px!important}
.pmSecureMediaPick{margin:14px 0 10px!important}.pmSecureMediaPick button{min-height:62px!important;padding:9px 10px!important;border-radius:12px!important}
.pmSecureMediaPick span{width:38px!important;height:38px!important;font-size:18px!important}.pmSecurePreview{min-height:145px!important;border-radius:13px!important;background:linear-gradient(145deg,#08111c,#0b1724)!important}
.pmSecureMediaOptions{gap:8px!important;margin-top:10px!important}.pmSecureAdult{padding:9px 11px!important}.pmSecureMediaNotice{margin-top:9px!important;padding:9px 11px!important}.pmSecureMediaActions{margin-top:11px!important}

#profileModal [data-profile-pane="info"] .gcProfileQuickActions{
  min-height:0!important;margin:0!important;padding:0!important;display:flex!important;align-items:stretch!important;
  border:0!important;background:transparent!important;box-shadow:none!important;
}
#profileModal [data-profile-pane="info"] .gcProfileQuickActions button{
  width:100%!important;min-height:100%!important;margin:0!important;padding:10px 12px!important;border-radius:12px!important;
  display:flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;
  background:linear-gradient(135deg,#e8c45f,#d9a93d)!important;color:#171208!important;box-shadow:none!important;
}

@media(max-width:700px){
  .actionTray:not(.hidden){display:flex!important;flex-direction:column!important}
  .actionTray{
    left:6px!important;right:6px!important;bottom:60px!important;width:auto!important;
    height:min(72dvh,620px)!important;max-height:calc(var(--gc-cody-vv-height,100dvh) - 126px)!important;
    padding:0!important;overflow:hidden!important;border-radius:17px!important;
  }
  .actionTray .addonTrayHead{flex:0 0 auto!important;width:100%!important;padding:11px 12px 10px!important}
  .actionTray .addonTrayQuick{flex:0 0 auto!important;width:auto!important;margin:8px 9px 5px!important;padding:7px!important;grid-template-columns:1fr!important}
  .actionTray .addonTrayGrid{
    flex:1 1 0!important;width:100%!important;min-width:0!important;min-height:0!important;margin:0!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important;padding:7px 9px max(12px,env(safe-area-inset-bottom))!important;
    overflow-y:auto!important;overflow-x:hidden!important;touch-action:pan-y!important;
  }
  .actionTray .addonTrayGrid>button{width:100%!important;min-width:0!important;min-height:72px!important;padding:7px 3px!important}
  .actionTray .addonTrayGrid b{max-width:100%!important;font-size:9px!important;white-space:normal!important;overflow-wrap:anywhere!important;text-align:center!important}

  #notificationsModal .notificationCard{padding:10px!important}
  #notificationsModal .pushSettings{grid-template-columns:1fr!important;padding:9px!important}
  #notificationsModal .pushSettings>button{width:100%!important}
  .pmSecureMediaCard{height:calc(var(--gc-cody-vv-height,100dvh) - 8px)!important;max-height:calc(var(--gc-cody-vv-height,100dvh) - 8px)!important;padding:12px!important;overflow-y:auto!important}
  .pmSecureMediaHead{padding-right:38px!important;gap:9px!important}.pmSecureMediaHead>span{width:38px!important;height:38px!important;flex-basis:38px!important}
  .pmSecureMediaHead h3{font-size:17px!important}.pmSecureMediaHead p{font-size:9px!important}.pmSecureMediaPick{grid-template-columns:1fr 1fr!important;gap:7px!important;margin:10px 0 8px!important}
  .pmSecureMediaPick button{grid-template-columns:32px 1fr!important;min-height:54px!important;padding:7px!important}.pmSecureMediaPick span{width:32px!important;height:32px!important;font-size:15px!important}
  .pmSecureMediaPick b{font-size:10px!important}.pmSecureMediaPick small{font-size:8px!important}.pmSecurePreview{min-height:110px!important}
  .pmSecureMediaOptions{grid-template-columns:1fr 1fr!important}.pmSecureAdult{grid-column:1/-1!important}.pmSecureMediaActions{position:sticky!important;bottom:-12px!important;padding:8px 0 max(2px,env(safe-area-inset-bottom))!important;background:linear-gradient(180deg,transparent,#0d1521 28%)!important}
}
@media(max-width:430px){
  .actionTray .addonTrayGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #profileModal [data-profile-pane="info"].active{grid-template-columns:1fr!important}
  #profileModal [data-profile-pane="info"] .gcProfileQuickActions button{min-height:54px!important}
  .pmSecureMediaPick,.pmSecureMediaOptions{grid-template-columns:1fr!important}.pmSecureAdult{grid-column:auto!important}
}
@media(max-width:900px){
  .sidebarBackdrop{display:block;position:fixed;inset:58px 0 52px;z-index:59;background:#02060d7a;opacity:0;pointer-events:none;transition:.2s}
  .sidebarBackdrop.open{opacity:1;pointer-events:auto}
  .quickbar button.active{background:#30435e;color:#fff}
}


/* v0.12 parity: private inbox, badges, coins, calls, GC emoticons + responsive sweep */
.coinPill{border:1px solid color-mix(in srgb,var(--gold) 45%,var(--line));background:color-mix(in srgb,var(--gold) 10%,var(--panel));color:var(--text);border-radius:999px;padding:7px 11px;font-weight:900;white-space:nowrap}
.coinPill b{color:var(--gold)}
.gcInlineEmo{width:34px;height:34px;object-fit:contain;vertical-align:middle;margin:0 2px}
.gcEmoPick img{width:30px;height:30px;object-fit:contain}
.pmHead{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pmCallActions{display:flex;gap:7px;padding-right:36px}
.pmCallActions button{width:38px;height:38px;border:1px solid var(--line);background:#192638;color:#fff;border-radius:10px;cursor:pointer}
.privateInboxList{display:grid;gap:7px}.inboxConversation{width:100%;display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:10px;text-align:left;border:1px solid var(--line);background:#121c2a;color:var(--text);border-radius:12px;padding:9px;cursor:pointer}.inboxConversation:hover{background:#1a2a3d}.inboxConversation>span:nth-child(2){display:grid;min-width:0}.inboxConversation small{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.inboxConversation i{font-style:normal;color:var(--muted);font-size:11px}.inboxConversation i b{display:grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--danger);color:#fff}
.badgeGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.badgeCard{display:grid;grid-template-columns:52px 1fr;gap:11px;align-items:center;border:1px solid color-mix(in srgb,var(--badge-color) 55%,var(--line));background:linear-gradient(145deg,color-mix(in srgb,var(--badge-color) 13%,var(--panel)),var(--panel));border-radius:14px;padding:13px}.badgeCard>span{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;font-size:27px;background:color-mix(in srgb,var(--badge-color) 20%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--badge-color) 50%,transparent)}.badgeCard div{display:grid}.badgeCard small{color:var(--muted);margin-top:3px}
.walletHero{display:flex;align-items:baseline;justify-content:center;gap:8px;font-size:30px;padding:18px;border:1px solid #5b4926;background:linear-gradient(145deg,#2e2614,#18150e);border-radius:15px;margin:12px 0}.walletHero strong{font-size:38px;color:#ffd567}.walletHero span{font-size:12px;color:#ceb878;text-transform:uppercase;font-weight:900}.walletHistory{display:grid;gap:6px}.walletRow{display:grid;grid-template-columns:72px minmax(0,1fr) auto;align-items:center;gap:10px;padding:9px 10px;border-bottom:1px solid var(--line)}.walletRow>span{font-weight:950}.walletRow .plus{color:var(--good)}.walletRow .minus{color:var(--danger)}.walletRow div{display:grid}.walletRow small{color:var(--muted)}
.callPrompt{text-align:center;max-width:420px}.callAvatar{width:82px;height:82px;margin:5px auto 15px;border-radius:50%;display:grid;place-items:center;background:#1c304a;font-size:38px;box-shadow:0 0 0 8px #21334a66}.callPrompt h2{margin:5px 0 18px}.callPrompt>small{color:var(--muted)}.callPromptActions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.callPromptActions button,.callControls button{border:0;border-radius:12px;padding:12px;font-weight:900;color:white;cursor:pointer}.dangerBtn,.callControls .hangup{background:#c74757}.goodBtn{background:#2f8b61}.activeCallCard{width:min(760px,100%);overflow:hidden}.activeCallTop{display:flex;justify-content:space-between;align-items:center;padding-right:35px}.activeCallTop h3{margin:2px 0}.activeCallTop small{color:var(--muted)}.videoStage{height:min(52vh,430px);position:relative;border-radius:15px;background:radial-gradient(circle,#203752,#09111d 70%);overflow:hidden;margin:12px 0}.videoStage #remoteVideo{width:100%;height:100%;object-fit:cover}.videoStage #localVideo{position:absolute;right:12px;bottom:12px;width:150px;height:105px;object-fit:cover;border:2px solid #fff8;border-radius:12px;background:#111}.audioCallVisual{position:absolute;inset:0;display:grid;place-items:center;font-size:70px}.callControls{display:flex;justify-content:center;gap:10px}.callControls button{width:52px;height:52px;background:#263a54;font-size:20px}.callControls button.off{opacity:.45}.callControls .hangup{background:#c74757}.callHint{text-align:center;color:var(--muted);font-size:11px}
.sideEmpty{padding:18px;text-align:center;color:var(--muted)}
/* Every existing screen gets a defensive responsive baseline */
img,video,canvas,svg{max-width:100%}textarea,input,select,button{max-width:100%}.chat,.messages,.msgMain,.profileDetails,.modalCard{min-width:0}
@media(max-width:1200px) and (min-width:901px){.layout{grid-template-columns:54px minmax(0,1fr) 270px}.userCard{grid-template-columns:40px minmax(0,1fr) auto}.uMeta{gap:2px}.liveStats span{font-size:8px}}
@media(max-width:900px){body{overflow:hidden}.topActions{gap:5px}.coinPill{padding:6px 8px}.accountChip span:not(.accountDot){max-width:90px;overflow:hidden;text-overflow:ellipsis}.users,.rooms{max-width:92vw}.emojiPanel{width:calc(100vw - 20px);left:10px;bottom:64px}.emojiGrid{grid-template-columns:repeat(7,1fr)}.profileActions{flex-wrap:wrap}.profileActions button{flex:1 1 140px}.badgeGrid{grid-template-columns:1fr}.walletRow{grid-template-columns:62px 1fr}.walletRow>strong{display:none}.activeCallCard{height:calc(100dvh - 16px);display:flex;flex-direction:column}.videoStage{flex:1;height:auto;min-height:260px}.quickbar{padding-bottom:max(4px,env(safe-area-inset-bottom));height:calc(52px + env(safe-area-inset-bottom))}.chat{padding-bottom:calc(54px + env(safe-area-inset-bottom))}}
@media(max-width:560px){.topbar{padding-left:max(8px,env(safe-area-inset-left));padding-right:max(8px,env(safe-area-inset-right))}.brand strong{font-size:15px}.statusChip{padding:6px}.coinPill{font-size:11px}.messages{padding:8px}.msg{grid-template-columns:34px minmax(0,1fr);gap:7px}.msg>.avatar{width:34px;height:34px}.body{font-size:13px}.composer{grid-template-columns:38px minmax(0,1fr) auto;gap:5px}.composer textarea{padding:9px}.composer button:last-child{font-size:12px}.modal{padding:4px}.modalCard{border-radius:14px;max-height:calc(100dvh - 8px)}.pmCard{height:calc(100dvh - 8px)}.pmCallActions{padding-right:28px}.pmCallActions button{width:34px;height:34px}.emojiGrid{grid-template-columns:repeat(6,1fr)}.statusList{max-height:62dvh}.videoStage #localVideo{width:105px;height:76px;right:7px;bottom:7px}.callPromptActions{grid-template-columns:1fr}.authOverlay{padding:8px}.authShell{border-radius:16px}}
@media(max-width:380px){.brand span{display:none}.coinPill{display:none!important}.emojiGrid{grid-template-columns:repeat(5,1fr)}.quickbar button{width:38px;font-size:17px}.topActions .statusChip{display:none}.composer button:last-child{padding:0 7px}}
@media(orientation:landscape) and (max-height:520px){.modalCard{max-height:96dvh}.videoStage{min-height:180px}.statusList{max-height:45dvh}.quickbar{height:46px}.quickbar button{height:36px}.chat{padding-bottom:48px}}

/* v0.13 Social & Profile */
.inboxTop{display:flex;align-items:center;justify-content:space-between;gap:12px}.inboxTop h3{margin:.15rem 0}.inboxTools{display:flex;gap:8px;margin:14px 0}.inboxTools input{flex:1;border:1px solid var(--line);background:var(--panel2);color:var(--text);padding:12px 14px;border-radius:14px}.privateEmpty{text-align:center;padding:42px 12px;color:var(--muted)}.privateEmpty strong{font-size:42px;display:block}.privateEmpty h4{color:var(--text);margin:10px 0 4px}.gcProfile{overflow:hidden;border-radius:22px}.gcProfileHero{min-height:250px;background:linear-gradient(135deg,#273246,#151c2a);background-size:cover;background-position:center;position:relative;padding:28px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;text-align:center}.gcProfileHero:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,8,16,.05),rgba(4,8,16,.75))}.gcProfileAvatar,.gcProfileIdentity,.gcProfileCounters{position:relative;z-index:1}.gcProfileAvatar img{width:104px;height:104px;border-radius:50%;object-fit:cover;border:3px solid white;box-shadow:0 8px 30px #0008}.gcProfileAvatar i{position:absolute;right:5px;bottom:7px;width:18px;height:18px;background:#43c11f;border:3px solid white;border-radius:50%}.gcProfileIdentity h2{margin:8px 0 0;font-size:26px}.gcProfileIdentity small{background:var(--profile-accent);color:#111;padding:4px 10px;border-radius:999px;font-weight:800}.gcProfileCounters{position:absolute;top:14px;left:14px;display:flex;gap:7px}.gcProfileCounters span{background:#1119;padding:6px 10px;border-radius:999px}.gcProfileTabs{display:flex;overflow:auto;background:color-mix(in srgb,var(--profile-accent) 35%,#202737);padding:8px}.gcProfileTabs button{flex:1;min-width:92px;border:0;background:transparent;color:#fff;padding:10px;border-radius:10px;font-weight:700}.gcProfileTabs button.active{background:#ffffff18}.gcProfilePane{padding:18px}.profileInfoRow{display:flex;justify-content:space-between;gap:15px;padding:13px 4px;border-bottom:1px solid var(--line)}.profileInfoRow strong{text-align:right}.profileGift{display:flex;gap:12px;align-items:center;padding:12px;border-bottom:1px solid var(--line)}.profileGift>span{font-size:30px}.profileGift small{display:block;color:var(--muted)}.giftCatalog{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.giftOption{display:flex;flex-direction:column;align-items:center;gap:5px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--panel2);color:var(--text)}.giftOption span{font-size:30px}.giftFooter{margin-top:14px}.uAvatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit}@media(max-width:720px){.inboxTop{align-items:flex-start}.inboxTop .secondaryBtn{font-size:12px}.gcProfileHero{min-height:220px}.gcProfileTabs button{min-width:84px}.giftCatalog{grid-template-columns:repeat(2,minmax(0,1fr))}.profileInfoRow{flex-direction:column;gap:5px}.profileInfoRow strong{text-align:left}}
/* v0.15 system DM + privacy */
.pm.systemPm{border:1px solid rgba(91,165,255,.28);background:linear-gradient(145deg,rgba(22,48,76,.92),rgba(15,28,45,.96));max-width:min(760px,92%)}
.pmSystemAction{margin-top:10px;border:1px solid rgba(235,193,88,.42);background:linear-gradient(135deg,#e9be4d,#f7dc82);color:#111827;font-weight:800;border-radius:10px;padding:9px 14px;cursor:pointer}
.pmSystemAction:hover{filter:brightness(1.06);transform:translateY(-1px)}
#pfPrivatePolicy{min-width:0}
@media(max-width:640px){.pm.systemPm{max-width:96%}.pmSystemAction{width:100%;min-height:44px}}

.rankPreviewBar{position:relative;z-index:5000;display:flex;align-items:center;justify-content:center;gap:18px;padding:9px 14px;background:linear-gradient(90deg,#684b12,#a7791d,#684b12);color:#fff7da;border-bottom:1px solid #e3bd62;font-size:13px;font-weight:700}.rankPreviewBar.hidden{display:none}.rankPreviewBar button{border:1px solid #ffe39a;background:#111b2b;color:#fff;border-radius:999px;padding:6px 12px;font-weight:800}.rankPreviewBar button:hover{background:#1d2d45}@media(max-width:600px){.rankPreviewBar{justify-content:space-between;font-size:11px;gap:8px}.rankPreviewBar button{padding:5px 9px}}

/* v0.16 navigation + userlist cleanup */
.quickbar{width:auto;min-width:58px;overflow:visible}.quickbar button{display:flex;align-items:center;justify-content:center;gap:10px}.quickbar button i{font-style:normal;font-size:18px;line-height:1}.quickbar button span{display:none;font-size:12px;font-weight:750;white-space:nowrap}.quickbarExpand{margin-top:auto!important;border-top:1px solid var(--line)!important}.userListTop{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 1px 10px}.userListTop strong{color:var(--gold);font-size:13px}.userListTop button,.asideActions button{width:30px;height:30px;border:1px solid #33465e;background:#182437;color:#dce8f6;border-radius:9px;cursor:pointer}.asideActions{display:flex;align-items:center;gap:5px}.desktopOnly{display:inline-grid!important;place-items:center}.rankCount{min-width:24px;text-align:center;padding:2px 7px;border-radius:999px;background:#0003;color:#fff;font-size:10px}.userGroup header{background:color-mix(in srgb,var(--rank-group-color,#526174) 28%,#303746)!important;color:var(--rank-group-color,#dce6f2)!important;border:1px solid color-mix(in srgb,var(--rank-group-color,#526174) 38%,transparent)}
@media(min-width:901px){
  #app.quickbarWide .layout{grid-template-columns:170px minmax(0,1fr) 320px}
  #app.quickbarWide .quickbar{min-width:170px;align-items:stretch}
  #app.quickbarWide .quickbar button{justify-content:flex-start;padding:0 14px}
  #app.quickbarWide .quickbar button span{display:inline}
  #app.quickbarWide .quickbar button:after{display:none}
  #app.usersHidden .layout{grid-template-columns:58px minmax(0,1fr)}
  #app.usersHidden.quickbarWide .layout{grid-template-columns:170px minmax(0,1fr)}
  #app.usersHidden #usersPanel{display:none}
  #app.usersHidden #userToggle{display:inline-grid!important}
  #app.usersHidden .chathead:after{content:'👥';position:absolute;right:14px;top:14px;width:30px;height:30px;display:grid;place-items:center;border:1px solid #33465e;border-radius:9px;background:#182437;color:#dce8f6;cursor:pointer;pointer-events:none}
}
@media(max-width:900px){.userListTop{display:none}.desktopOnly{display:none!important}.quickbarExpand{display:none!important}.quickbar button span{display:none!important}}

/* v0.17.0 — polish, media, social, responsive fixes */
.composer{grid-template-columns:42px 42px minmax(0,1fr) 48px;align-items:end;gap:8px;padding:10px 12px;background:linear-gradient(180deg,color-mix(in srgb,var(--panel2) 90%,transparent),var(--panel));}
.composer>button{height:42px;min-width:42px;padding:0!important;display:grid;place-items:center;border-radius:11px}.composer textarea{width:100%;min-height:42px;max-height:130px;padding:10px 13px;line-height:1.35;overflow-y:auto}.composerSend{font-size:17px}
.actionTray{left:72px;bottom:74px;display:flex;flex-wrap:wrap;width:min(520px,calc(100vw - 24px));gap:8px}.actionTray button{min-width:72px;flex:1 1 76px}
.socialLoginBox{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:10px}.socialLogin{min-height:44px;border-radius:11px;display:flex;align-items:center;justify-content:center;gap:9px;text-decoration:none;font-weight:800;border:1px solid var(--line)}.socialLogin.google{background:#fff;color:#202124}.socialLogin.facebook{background:#1877f2;color:#fff}.socialLogin>span{font-size:12px}
.mediaEmbed,.spotifyEmbed{margin-top:8px;width:min(520px,100%);border-radius:12px;overflow:hidden;background:#000}.mediaEmbed iframe{width:100%;aspect-ratio:16/9;border:0;display:block}.spotifyEmbed iframe{width:100%;height:152px;border:0;display:block}.giphyInline,.chatMedia{display:block;max-width:min(480px,100%);max-height:420px;border-radius:12px;object-fit:contain;margin-top:8px}.chatMediaVideo{display:block;width:min(520px,100%);max-height:420px;border-radius:12px;margin-top:8px}.voiceBubble{display:flex;align-items:center;gap:8px;min-width:min(380px,80vw)}.voiceBubble audio{width:min(360px,70vw)}
.giphyResults{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px;max-height:55vh;overflow:auto}.giphyPick{border:0;padding:0;background:#111;border-radius:10px;overflow:hidden;cursor:pointer}.giphyPick img{width:100%;height:130px;object-fit:cover;display:block}.stickerPick img{width:52px;height:52px;object-fit:contain}.emojiGrid .sideEmpty{grid-column:1/-1}
.leaderRow{display:grid;grid-template-columns:44px 42px minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:10px;border-bottom:1px solid var(--line)}.leaderRow>small,.feedRow small{color:var(--muted)}.feedRow{display:grid;grid-template-columns:140px minmax(0,1fr) auto;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
/* Linker navigatie compacter en rustiger */
@media(min-width:901px){
  #app.quickbarWide .layout{grid-template-columns:156px minmax(0,1fr) 320px}
  #app.quickbarWide .quickbar{min-width:156px;padding:10px 8px;border-radius:14px}
  #app.quickbarWide .quickbar button{height:40px;padding:0 11px;border-radius:9px;gap:9px}
  #app.quickbarWide .quickbar button i{width:22px;text-align:center}
  #app.quickbarWide .quickbar button span{font-size:12px}
  #app.usersHidden .layout{grid-template-columns:58px minmax(0,1fr)}
  #app.usersHidden.quickbarWide .layout{grid-template-columns:156px minmax(0,1fr)}
  #app.usersHidden .chat{position:relative}
  #app.usersHidden .chathead{padding-right:58px}
  #app.usersHidden .chathead:after{display:none}
  #app.usersHidden #userToggle{display:inline-grid!important;width:34px;height:34px;border:1px solid #33465e;border-radius:9px;background:#182437;color:#dce8f6;place-items:center}
}
.userListTop{padding:4px 3px 10px;border-bottom:1px solid color-mix(in srgb,var(--line) 75%,transparent);margin-bottom:8px}.userListTop button{font-size:15px}.users{background:linear-gradient(180deg,color-mix(in srgb,var(--panel2) 95%,#17243b),var(--panel))}.userGroup{margin-bottom:13px}.userGroup header{height:34px;margin-bottom:6px;border-radius:9px}.userCard{min-height:54px}
/* Status duidelijker */
.statusOption.active{border-color:var(--gold);box-shadow:0 0 0 1px color-mix(in srgb,var(--gold) 45%,transparent);background:color-mix(in srgb,var(--gold) 10%,#202d3f)}.statusOption b{font-weight:800}.statusOption i{margin-left:auto}
@media(max-width:900px){.composer{grid-template-columns:38px 38px minmax(0,1fr) 42px;gap:5px}.actionTray{left:10px;bottom:66px}.socialLoginBox{grid-template-columns:1fr}.giphyResults{grid-template-columns:repeat(2,minmax(0,1fr))}.leaderRow{grid-template-columns:34px 38px minmax(0,1fr);}.leaderRow>span:nth-last-child(-n+2){grid-column:3}.feedRow{grid-template-columns:1fr}.quickbar{overflow-x:auto;justify-content:flex-start}.quickbar button{flex:0 0 42px}}
@media(max-width:480px){.composer{grid-template-columns:36px 36px minmax(0,1fr) 40px;padding:7px 6px}.composer>button{height:38px;min-width:36px}.composer textarea{min-height:38px;padding:8px 9px}.giphyResults{grid-template-columns:1fr 1fr}.giphyPick img{height:105px}.voiceBubble{min-width:0;width:100%}.voiceBubble audio{width:100%}}

/* v0.17 final UI cleanup */
@media (min-width:901px){
  .layout{grid-template-columns:64px minmax(0,1fr) 330px;gap:10px;padding:10px}
  #app.quickbarWide .layout{grid-template-columns:168px minmax(0,1fr) 330px}
  #app.usersHidden .layout{grid-template-columns:64px minmax(0,1fr)}
  #app.usersHidden.quickbarWide .layout{grid-template-columns:168px minmax(0,1fr)}
  .quickbar{border:1px solid var(--line);border-radius:15px;background:linear-gradient(180deg,#121d2c,#0d1520);padding:8px 7px;gap:4px;box-shadow:0 16px 45px #0003}
  .quickbar button{min-height:42px;border-radius:10px;color:#86afff}
  .quickbar button:hover{background:#1b2a3e;color:#fff}
  #app.quickbarWide .quickbar button{padding:0 12px;justify-content:flex-start}
  #app.quickbarWide .quickbar button span{font-size:12px}
  #userToggle{display:none}
  #app.usersHidden #userToggle{display:grid!important;position:fixed;right:14px;top:78px;z-index:65;width:42px;height:42px;border:1px solid #37506f;border-radius:12px;background:linear-gradient(145deg,#1d3048,#152338);color:#fff;box-shadow:0 12px 32px #0007;place-items:center;font-size:18px}
  #app.usersHidden #userToggle:hover{border-color:var(--gold);transform:translateY(-1px)}
}
.userListTop{padding:2px 2px 10px;border-bottom:1px solid #25364c;margin-bottom:8px}.userListTop strong{font-size:14px}.userListTop button{transition:.15s}.userListTop button:hover{border-color:var(--gold);color:#fff}
.users{padding:10px}.userGroup{margin:8px 0 12px}.userGroup header{min-height:36px;border-radius:10px;padding:8px 10px;display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:8px}.userGroup header b{text-transform:uppercase;letter-spacing:.04em;font-size:11px}.rankCount{font-weight:900}
.userCard{min-height:58px;margin:6px 0;border-radius:14px}.uBody small{font-size:10px}.uMeta{font-size:14px}
.chat{min-width:0}.chathead{min-height:70px}.messages{min-height:0}
.composer{grid-template-columns:44px 44px minmax(0,1fr) 48px!important;align-items:end!important;gap:7px!important;padding:10px!important;min-height:64px!important}.composer>button{width:44px!important;height:44px!important;min-width:44px!important;padding:0!important;border-radius:11px!important}.composer textarea{display:block;width:100%!important;min-width:0!important;min-height:44px!important;max-height:130px!important;resize:none!important;padding:11px 13px!important;line-height:1.35!important;overflow-y:auto!important}.composerSend{width:48px!important;font-size:18px!important}
.actionTray{z-index:70}
.notification{display:grid;gap:3px;padding:12px 13px;border-radius:10px;margin:5px 0;background:#121d2b}.notification.unread{background:#182942;border-left:3px solid #5b8ee6}.notification strong{color:#fff}.notification p{margin:0;color:#dfe7f2}.notification small{font-size:10px}
@media(max-width:900px){.layout{padding:4px}.composer{grid-template-columns:40px 40px minmax(0,1fr) 42px!important;min-height:58px!important;padding:7px!important}.composer>button{width:40px!important;height:40px!important;min-width:40px!important}.composer textarea{min-height:40px!important;padding:9px 10px!important}.composerSend{width:42px!important}.users{padding:9px}.userGroup header{position:sticky;top:0;z-index:2}.quickbar{border-top:1px solid var(--line);background:#0e1725}}
@media(max-width:420px){.composer{grid-template-columns:38px 38px minmax(0,1fr) 40px!important;gap:4px!important;padding:6px 5px!important}.composer>button{width:38px!important;height:38px!important;min-width:38px!important}.composer textarea{min-height:38px!important;padding:8px!important}.composerSend{width:40px!important}.topActions{gap:4px}.brand strong{font-size:14px}}

/* v0.17.1 accountverificatie */
.verificationCard{max-width:720px}.verifyMailNotice{margin:14px 0;padding:13px 15px;border:1px solid #365678;border-radius:12px;background:#152942;color:#dcecff;line-height:1.55}.verifyMailNotice b{color:#fff}.verificationStatus{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0}.verifyState,.verifyBox{border:1px solid var(--line,#263850);background:rgba(11,24,40,.72);border-radius:14px;padding:14px}.verifyState{display:flex;justify-content:space-between;gap:12px}.verifyState.ok{border-color:#2d8f68}.verificationMethods{display:grid;grid-template-columns:1fr 1fr;gap:12px}.verifyBox input{width:100%;margin:8px 0}.verifyCodeBox{margin-top:14px;padding-top:14px;border-top:1px solid var(--line,#263850)}@media(max-width:640px){.verificationStatus,.verificationMethods{grid-template-columns:1fr}.verificationCard{width:min(96vw,720px)}.verifyMailNotice{font-size:13px}}


/* v0.19.0 — responsive polish & mobile usability */
:root{--gc-vh:100dvh}
@media(max-width:900px){
  html,body{height:var(--gc-vh,100dvh);min-height:0;overscroll-behavior:none}
  body{overflow:hidden}
  .layout{height:calc(var(--gc-vh,100dvh) - 58px)!important;min-height:0!important;padding:4px!important}
  .chat{height:100%!important;min-height:0!important;padding-bottom:calc(58px + env(safe-area-inset-bottom))!important;overflow:hidden!important}
  .chathead{flex:0 0 auto}
  .messages{flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch;padding-bottom:14px!important}
  .typing,.replyBar{flex:0 0 auto}
  .composer{position:sticky!important;left:0;right:0;bottom:calc(54px + env(safe-area-inset-bottom));z-index:58;background:linear-gradient(180deg,#172235,#101826)!important;border-top:1px solid #2b3a50!important;box-shadow:0 -10px 28px #0007!important}
  .composer textarea{font-size:16px!important;max-height:96px!important}
  .quickbar{z-index:59!important}
  .modal{display:flex!important;align-items:flex-start!important;justify-content:center!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch;padding:max(8px,env(safe-area-inset-top)) 8px calc(16px + env(safe-area-inset-bottom))!important}
  .modal.hidden{display:none!important}
  .modalCard{width:100%!important;max-width:720px!important;max-height:none!important;height:auto!important;overflow:visible!important;margin:auto 0!important}
  .profileModalCard,.profileEditorCard{max-height:none!important;overflow:visible!important;padding-bottom:calc(22px + env(safe-area-inset-bottom))!important}
  .profileModalCard .gcProfile,.profileEditorCard .profileForm{overflow:visible!important}
  .profileForm{grid-template-columns:1fr!important}
  .profileForm .wide{grid-column:auto!important}
  .gcProfileTabs{position:sticky;top:0;z-index:4}
  .gcProfilePane{padding:14px!important}
  .gcProfileHero{min-height:190px!important;padding:20px 14px!important}
  .gcProfileAvatar img{width:88px!important;height:88px!important}
  .gcProfileIdentity h2{font-size:22px!important}
  .profileActions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}
  .profileActions button{width:100%!important;min-width:0!important}
}
@media(max-width:480px){
  .topbar{height:56px!important;min-height:56px!important}
  .layout{height:calc(var(--gc-vh,100dvh) - 56px)!important}
  .brand strong{font-size:15px!important}
  .topActions{gap:3px!important;min-width:0}
  .accountChip{max-width:88px!important}
  .composer{grid-template-columns:38px 38px minmax(0,1fr) 40px!important;bottom:calc(54px + env(safe-area-inset-bottom))!important;padding:6px!important;gap:5px!important}
  .composer>button{width:38px!important;height:38px!important;min-width:38px!important}
  .composer textarea{min-height:38px!important;padding:8px 9px!important}
  .profileActions{grid-template-columns:1fr!important}
  .gcProfileTabs{margin:0 -20px;padding-left:8px;padding-right:8px}
  .gcProfileTabs button{min-width:92px!important}
  .modalClose{position:sticky!important;float:right;top:6px;z-index:8;background:#121d2bea!important;border:1px solid var(--line)!important;border-radius:10px;width:38px;height:38px;line-height:1}
}
@media(orientation:landscape) and (max-height:560px){
  .composer{bottom:46px!important}
  .chat{padding-bottom:48px!important}
  .quickbar{height:44px!important}
  .quickbar button{height:34px!important;min-height:34px!important}
  .gcProfileHero{min-height:155px!important}
}

/* v0.20 compacte klassieke GC userlist */
.users{background:linear-gradient(180deg,#252b39,#202633)!important;border-color:#394255!important}.userListTop{background:#2b3140;border:1px solid #3b4558;border-radius:10px;padding:9px 10px!important;margin-bottom:10px!important}.userGroup{margin:7px 0 12px!important}.userGroup header{background:#343b4b!important;border:1px solid #434c5f!important;min-height:32px!important;height:auto!important;border-radius:7px!important;padding:6px 9px!important}.userGroup header b{font-size:10px!important;letter-spacing:.08em!important}.userCard{min-height:49px!important;border-radius:9px!important;margin:4px 0!important;background:linear-gradient(90deg,#2a3040,#242a37)!important;border:1px solid #394458!important;padding:6px 8px!important}.userCard:hover{background:linear-gradient(90deg,#343c4f,#2a3141)!important;border-color:var(--card-glow,var(--gold))!important}.uAvatar img,.uAvatar>span{width:36px!important;height:36px!important}.uAvatar{width:38px!important;height:38px!important}.uBody strong{font-size:12px!important}.uBody small{font-size:9px!important;opacity:.82}.uMeta{gap:4px!important}.newPill{background:linear-gradient(135deg,#7663ff,#9a73ff)!important;color:#fff!important;border:1px solid #b6a8ff!important;box-shadow:0 2px 8px #6b59ff66!important}@media(max-width:900px){.users{background:linear-gradient(180deg,#202735,#1a202b)!important}}

/* v0.21 */
.topbar{height:48px;padding:0 12px;background:linear-gradient(#2e3442,#252b38);border-bottom:1px solid #3d4555}.layout{height:calc(100dvh - 48px);grid-template-columns:42px minmax(0,1fr) 280px;gap:0;padding:0}.quickbar{border:0;border-right:1px solid #384050;border-radius:0;background:#2a3040;padding:7px 4px}.rooms{position:fixed;left:42px;top:48px;bottom:0;width:260px;z-index:42;transform:translateX(-110%);transition:.2s;border-radius:0 12px 12px 0;box-shadow:15px 0 45px #0008}.rooms.mobileOpen{transform:translateX(0)}.chat{border:0;border-radius:0;background:#171b24}.chathead{min-height:52px;padding:9px 14px;background:#191e28;border-bottom:1px solid #303745}.messages{padding:5px 10px 10px}.msg{grid-template-columns:34px 1fr;gap:8px;padding:7px 4px;margin:0;border-bottom:1px solid #252b36}.msg .avatar{width:32px;height:32px}.msg .body{background:transparent;padding:1px 0;border-radius:0;max-width:100%}.composer{min-height:45px;padding:5px 8px;background:#252b38;border-top:1px solid #394152}.composer textarea{min-height:34px;border-radius:18px;background:#161b24}.composerSend{border-radius:50%}.users{border:0;border-left:1px solid #3a4252;border-radius:0;background:#2b3140;padding:7px}.liveStats{margin:2px 0 6px;border-radius:9px;overflow:hidden}.liveStats>b{display:block;text-align:center;padding:5px;background:linear-gradient(90deg,#dceaff,#eee0ff);color:#0f1520;font-size:10px}.liveStats>div{padding:4px;gap:3px}.liveStats span{padding:4px 2px;border-radius:6px}.liveStats strong{font-size:12px}.userListTabs{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:3px;margin-bottom:6px;background:#202633;border:1px solid #3c4556;border-radius:7px}.userListTabs button{border:0;background:transparent;color:#aab4c3;border-radius:5px;padding:5px 2px;cursor:pointer}.userListTabs button small{display:block;font-size:8px}.userListTabs button.active{background:#3a4355;color:#fff;box-shadow:inset 0 -2px #e0b74f}.userCard{min-height:44px;padding:5px 6px;margin-bottom:3px;border-radius:8px;background:#333948}.uAvatar{width:34px;height:34px}.uBody strong{font-size:11px}.uBody small{font-size:8px}.actionTray{left:50px;bottom:55px;width:min(520px,calc(100vw - 70px));padding:10px;background:#262c3a;border:1px solid #424b5d;border-radius:10px;box-shadow:0 16px 50px #000a;display:block}.addonTrayHead{display:flex;justify-content:space-between;align-items:end;padding:2px 2px 9px;border-bottom:1px solid #3b4352}.addonTrayHead small{color:#96a2b4;font-size:9px}.addonTrayGrid{display:grid;grid-template-columns:repeat(6,minmax(58px,1fr));gap:8px;padding-top:9px}.addonTrayGrid button{min-width:0!important;display:flex;flex-direction:column;align-items:center;gap:5px;padding:7px 3px;background:transparent;border:0;color:#fff;font-size:9px;border-radius:8px}.addonTrayGrid button:hover{background:#353d4e}.addonIcon{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#353c4a;border:1px solid #485366;font-size:20px}.emojiPanel{width:min(560px,calc(100vw - 20px));background:#2b3140;border:1px solid #444d60;border-radius:10px}.emojiTabs{background:#272d3a;padding:6px;gap:4px;overflow-x:auto}.emojiTabs button{min-width:38px;height:34px}.emojiGrid{padding:10px;grid-template-columns:repeat(10,minmax(32px,1fr));gap:5px;max-height:320px}.emojiGrid button{min-height:34px;font-size:22px}.addonModal textarea,.addonModal select{width:100%;margin:6px 0}.commandList{display:grid;grid-template-columns:120px 1fr;gap:8px 12px}.paintModalCard{width:min(780px,96vw)}#paintCanvas{display:block;width:100%;height:auto;background:#fff;border-radius:8px;touch-action:none}.paintTools{display:flex;gap:8px;margin-top:8px}@media(max-width:900px){.layout{grid-template-columns:1fr}.users{position:fixed;right:0;top:48px;bottom:54px;width:min(320px,92vw);z-index:50;transform:translateX(105%);transition:.2s}.users.mobileOpen{transform:translateX(0)}.quickbar{position:fixed;left:0;right:0;bottom:0;top:auto;height:54px;z-index:38;display:flex;border-right:0;border-top:1px solid #394152;padding:4px;overflow-x:auto}.chat{padding-bottom:54px}.actionTray{left:8px;right:8px;bottom:60px;width:auto}.addonTrayGrid{grid-template-columns:repeat(4,1fr)}.emojiGrid{grid-template-columns:repeat(7,1fr)}}

/* v0.21.1 layout/function hotfix */
.actionTray.hidden{display:none!important}
.actionTray:not(.hidden){display:block!important}
.userListEmpty{display:flex!important;min-height:190px;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:24px 14px!important;text-align:center}
.userListEmpty strong{font-size:36px;filter:grayscale(.3);opacity:.75}
.userListEmpty b{color:#e4e8ef;font-size:12px}
.userListEmpty span{max-width:190px;color:#909bad;font-size:9px;line-height:1.45}

.topbar{position:relative!important;height:46px!important;padding:0 9px!important;background:linear-gradient(180deg,#303644,#282e3b)!important}
.brand{display:flex!important;align-items:center!important;gap:7px!important}
.brand strong{font-size:0!important;display:block!important;width:205px;height:35px;position:relative}
.brand strong:before{content:"GEWOON";position:absolute;left:0;top:5px;font-size:21px;font-weight:1000;letter-spacing:-1px;color:#f4f4f4;text-shadow:0 2px 0 #111,0 0 1px #000}
.brand strong:after{content:"CHATTEN.NL";position:absolute;left:82px;top:5px;font-size:21px;font-weight:1000;letter-spacing:-1px;color:#ff7138;text-shadow:0 2px 0 #111,2px 0 0 #3158ff}
.brand span{display:none!important}

.topActions{margin-left:auto!important;display:flex!important;align-items:center!important;gap:4px!important}
.topIconAction{position:relative;width:31px;height:31px;display:grid;place-items:center;border:0;background:transparent;color:#f1f3f7;border-radius:6px;cursor:pointer;font-size:15px}
.topIconAction:hover{background:#3b4354}
.accountAvatarChip{width:34px!important;height:34px!important;padding:0!important;border:0!important;background:transparent!important;position:relative;overflow:visible}
.accountAvatarChip img{width:30px;height:30px;border-radius:50%;object-fit:cover;border:2px solid #4b5568;background:#1d2531}
.accountAvatarChip #me{display:none!important}
.accountAvatarChip .accountDot{position:absolute;left:-1px;bottom:1px;width:8px;height:8px;border:1px solid #252b38}

.layout{height:calc(100dvh - 46px)!important;grid-template-columns:34px minmax(0,1fr) 278px!important}
.quickbar{width:34px!important;padding:5px 2px!important}
.quickbar button{min-width:29px!important;width:29px!important;height:34px!important;min-height:34px!important;padding:0!important}
.quickbar button i{font-size:15px!important}
.chathead{display:none!important}
.messages{padding-top:4px!important}
.msg{min-height:47px!important}
.users{padding:4px 7px 8px!important}
.userListTop{display:none!important}
.liveStats{margin:4px 0 5px!important}
.userListTabs{margin:3px 0 6px!important;border-radius:4px!important}
.userListTabs button{height:31px!important;padding:3px 2px!important;font-size:13px!important}
.userListTabs button small{display:none!important}
.asideHead{min-height:28px!important;padding:2px 2px 3px!important}
.asideHead h3{font-size:10px!important;text-transform:uppercase;letter-spacing:.08em;color:#c8ced8}
.userGroup>header{font-size:9px!important;text-transform:uppercase;letter-spacing:.05em}
.userCard{min-height:42px!important;border-radius:6px!important}
.uAvatar{width:32px!important;height:32px!important}
.composer{min-height:42px!important;padding:4px 7px!important}
.composer textarea{min-height:32px!important;height:32px!important}
.composer button{width:32px!important;height:32px!important}

@media(max-width:900px){
 .topbar{height:58px!important}
 .layout{height:calc(100dvh - 58px)!important;grid-template-columns:1fr!important}
 .brand strong{width:170px!important}
 .brand strong:before,.brand strong:after{font-size:18px!important;top:7px}
 .brand strong:after{left:70px!important}
 .topIconAction{display:none}
 .accountAvatarChip{display:grid!important}
}

/* v0.22 GC Classic */
.hidden{display:none!important}.gcClassicTop{height:52px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;padding:0 10px!important;background:linear-gradient(180deg,#343a49,#292f3c)!important;border-bottom:1px solid #424b5e!important}.gcTopLeft,.gcTopRight{display:flex;align-items:center;gap:5px}.gcHamburger{width:34px;height:34px;border:0;background:transparent;color:#fff;font-size:21px;border-radius:7px;cursor:pointer}.gcLogoBrand strong{font-size:19px!important;font-weight:900!important;color:#f4f6fa!important}.gcLogoBrand span{display:block!important;font-size:8px!important;letter-spacing:.18em!important;color:#f0a85d!important;text-transform:uppercase!important}.gcTopIcon{position:relative;width:32px;height:32px;border:0;background:transparent;color:#fff;border-radius:7px;font-size:15px;cursor:pointer}.gcTopIcon:hover,.gcHamburger:hover{background:#424a5d}.gcTopText{border:0;background:transparent;color:#cfd7e5;text-decoration:none;font-size:10px;padding:7px 8px;border-radius:6px}.gcProfileTop{width:36px;height:36px;border:0;background:transparent;padding:0;position:relative}.gcProfileTop img{width:34px;height:34px;border-radius:50%;object-fit:cover;border:2px solid #5b667b}.gcPresenceDot{position:absolute;right:0;bottom:1px;width:9px;height:9px;border-radius:50%;background:#28ce73;border:2px solid #29303d}.streakPill{height:28px;border:1px solid #6e5836;background:#3c3124;color:#ffd596;border-radius:14px;padding:0 9px;font-size:10px}.layout{height:calc(100dvh - 52px)!important;display:grid!important;grid-template-columns:40px minmax(0,1fr) 286px!important;gap:0!important;padding:0!important}.quickbar{grid-column:1!important;border:0!important;border-radius:0!important;border-right:1px solid #3b4354!important;background:#2c3240!important;padding:6px 3px!important}.quickbar button{width:33px!important;min-width:33px!important;height:36px!important;min-height:36px!important;padding:0!important}.rooms{position:fixed!important;left:40px!important;top:52px!important;bottom:0!important;width:270px!important;z-index:60!important;transform:translateX(-110%)!important;transition:.18s!important}.rooms.mobileOpen{transform:translateX(0)!important}.chat{grid-column:2!important;border:0!important;border-radius:0!important}.chathead{display:none!important}.messages{padding:7px 10px 12px!important}.msg{grid-template-columns:34px minmax(0,1fr)!important;gap:8px!important;margin:0!important;padding:7px 4px!important;border-bottom:1px solid #242b37!important}.msg .avatar{width:32px!important;height:32px!important}.msg .body{background:transparent!important;border-radius:0!important;padding:1px 0!important;max-width:100%!important}.composer{min-height:46px!important;padding:5px 7px!important;background:#252b37!important;border-top:1px solid #3b4354!important}.composer textarea{min-height:34px!important;border-radius:18px!important;background:#161b23!important}.composerSend{border-radius:50%!important}.gcRightPanel{grid-column:3!important;border:0!important;border-left:1px solid #3c4455!important;border-radius:0!important;background:#2b3140!important;padding:0 7px 8px!important;overflow:hidden!important}.gcRightTabs{height:40px;display:grid;grid-template-columns:repeat(4,1fr);align-items:center;border-bottom:1px solid #414a5d;margin:0 -7px 5px;padding:0 6px;background:#303645}.gcRightTabs button{height:31px;border:0;background:transparent;color:#aeb7c5;border-radius:5px}.gcRightTabs button.active{background:#424a5d;color:#fff;box-shadow:inset 0 -2px #e3b955}.gcRightTitle{height:29px;display:flex;align-items:center;gap:6px}.gcRightTitle strong{font-size:9px;text-transform:uppercase;letter-spacing:.08em}.gcUserScroll{height:calc(100% - 120px);overflow:auto}.userListEmpty{min-height:190px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:7px;color:#93a0b3;padding:16px}.userListEmpty strong{font-size:32px}.userListEmpty b{color:#e7ebf2;font-size:11px}.userListEmpty span{max-width:190px;font-size:9px}.actionTray.hidden{display:none!important}.actionTray:not(.hidden){display:block!important}.actionTray{position:fixed!important;left:48px!important;bottom:54px!important;width:min(560px,calc(100vw - 350px))!important;z-index:120!important;padding:10px!important;background:#272d3a!important;border:1px solid #475064!important;border-radius:10px!important;box-shadow:0 18px 55px #000c!important}.addonTrayHead{display:flex!important;justify-content:space-between!important;align-items:center!important;padding-bottom:9px!important;border-bottom:1px solid #3d4556!important}.addonTrayHead>div{display:flex;flex-direction:column}.addonTrayHead small{font-size:9px;color:#98a4b6}.addonTrayHead button{width:28px;height:28px;border:0;background:#333b4b;color:#fff;border-radius:6px}.addonTrayGrid{display:grid!important;grid-template-columns:repeat(6,minmax(62px,1fr))!important;gap:8px!important;padding-top:9px!important}.addonTrayGrid button{display:flex!important;min-width:0!important;flex-direction:column!important;align-items:center!important;gap:5px!important;padding:7px 3px!important;border:0!important;background:transparent!important;color:#fff!important;border-radius:8px!important}.addonIcon{width:43px!important;height:43px!important;display:grid!important;place-items:center!important;border-radius:50%!important;background:#353c4b!important;border:1px solid #4a5569!important;font-size:19px!important}.botChallenge{margin:10px 0;padding:11px;border:1px solid #38465c;border-radius:10px;background:#151f2c}.botChallenge>div:first-child{display:flex;flex-direction:column}.botChallenge small{font-size:10px;color:#91a0b6}.botChallengeRow{display:grid;grid-template-columns:1fr 110px 36px;gap:7px;align-items:center;margin-top:9px}.botChallengeRow button{height:36px}.ageRequirement{font-style:normal;font-size:9px;background:#6b3434;color:#ffd9d9;border-radius:999px;padding:2px 6px}@media(max-width:900px){.gcClassicTop{height:58px!important}.layout{height:calc(100dvh - 58px)!important;grid-template-columns:1fr!important}.chat{grid-column:1!important;padding-bottom:54px!important}.quickbar{position:fixed!important;left:0!important;right:0!important;bottom:0!important;top:auto!important;height:54px!important;display:flex!important;z-index:80!important}.quickbar button{flex:1!important;min-width:48px!important}.gcRightPanel{position:fixed!important;right:0!important;top:58px!important;bottom:54px!important;width:min(315px,92vw)!important;z-index:90!important;transform:translateX(105%)!important;transition:.18s!important}.gcRightPanel.mobileOpen{transform:translateX(0)!important}.rooms{left:0!important;top:58px!important;bottom:54px!important}.actionTray{left:8px!important;right:8px!important;bottom:60px!important;width:auto!important}.addonTrayGrid{grid-template-columns:repeat(4,1fr)!important}.gcTopIcon,.coinPill,.streakPill{display:none!important}.botChallengeRow{grid-template-columns:1fr 90px 36px}}


/* ============================================================
   GewoonChatten v0.23.0 — AUTHORITATIVE GC CLASSIC LAYOUT
   This block intentionally wins over older migration CSS.
   ============================================================ */
:root{
  --gc-bg:var(--bg,#0b0e14);
  --gc-panel:var(--panel,#141a24);
  --gc-panel2:var(--panel2,#1c2430);
  --gc-line:var(--line,#3d4a5e);
  --gc-text:var(--text,#fff);
  --gc-muted:var(--muted,#aab4c5);
  --gc-accent:var(--user-accent,var(--gold,#e6b94e));
  --gc-top-h:46px;
  --gc-left-w:38px;
  --gc-right-w:292px;
}
html,body{height:100%;background:var(--gc-bg)!important;color:var(--gc-text)!important}
body{overflow:hidden!important}
.hidden{display:none!important}
.searchHidden{display:none!important}

/* Cody/Boom-style placement, GC own styling */
.gcClassicTop,.topbar{
  height:var(--gc-top-h)!important;min-height:var(--gc-top-h)!important;
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  padding:0 8px!important;background:color-mix(in srgb,var(--gc-panel2) 94%,#000 6%)!important;
  border-bottom:1px solid var(--gc-line)!important;border-radius:0!important;backdrop-filter:none!important
}
.gcTopLeft,.gcTopRight{display:flex!important;align-items:center!important;gap:4px!important;min-width:0}
.gcHamburger,.gcTopIcon{width:31px!important;height:31px!important;display:grid!important;place-items:center!important;border:0!important;background:transparent!important;color:var(--gc-text)!important;border-radius:4px!important;cursor:pointer!important}
.gcHamburger:hover,.gcTopIcon:hover{background:color-mix(in srgb,var(--gc-panel2) 75%,var(--gc-text) 10%)!important}
.gcLogoBrand{display:flex!important;align-items:center!important;gap:5px!important;min-width:0}
.gcLogoBrand strong{
  color:var(--gc-text)!important;font-size:19px!important;font-weight:950!important;letter-spacing:-.7px!important;
  white-space:nowrap!important;text-shadow:0 1px 0 #000!important
}
.gcLogoBrand strong::first-letter{color:var(--gc-text)}
.gcLogoBrand span{display:none!important}
.gcProfileTop{width:34px!important;height:34px!important;padding:0!important;border:0!important;background:transparent!important;position:relative!important;cursor:pointer!important}
.gcProfileTop img{width:31px!important;height:31px!important;border-radius:50%!important;object-fit:cover!important;border:2px solid var(--gc-line)!important;background:var(--gc-panel)!important}
.gcPresenceDot{position:absolute!important;right:0!important;bottom:1px!important;width:9px!important;height:9px!important;border-radius:50%!important;background:#2bd078!important;border:2px solid var(--gc-panel2)!important}
.gcTopText,.linkBtn{font-size:9px!important;color:var(--gc-muted)!important;padding:5px 6px!important;text-decoration:none!important}
.coinPill,.streakPill,.statusChip{height:27px!important;border-radius:14px!important;font-size:9px!important;padding:0 8px!important;background:var(--gc-panel)!important;border:1px solid var(--gc-line)!important;color:var(--gc-text)!important}

.layout{
  height:calc(100dvh - var(--gc-top-h))!important;width:100%!important;
  display:grid!important;grid-template-columns:var(--gc-left-w) minmax(0,1fr) var(--gc-right-w)!important;
  gap:0!important;padding:0!important;background:transparent!important
}
.quickbar{
  position:relative!important;grid-column:1!important;grid-row:1!important;width:var(--gc-left-w)!important;height:100%!important;
  display:flex!important;flex-direction:column!important;align-items:center!important;
  padding:4px 2px!important;background:color-mix(in srgb,var(--gc-panel2) 96%,#000 4%)!important;
  border:0!important;border-right:1px solid var(--gc-line)!important;border-radius:0!important;overflow:auto!important
}
.quickbar button{
  width:32px!important;min-width:32px!important;height:34px!important;min-height:34px!important;
  display:grid!important;place-items:center!important;padding:0!important;margin:1px 0!important;
  border:0!important;border-radius:4px!important;background:transparent!important;color:var(--gc-muted)!important
}
.quickbar button:hover,.quickbar button.active{background:color-mix(in srgb,var(--gc-panel2) 72%,var(--gc-text) 8%)!important;color:var(--gc-accent)!important}
.quickbar button i{font-style:normal!important;font-size:14px!important}.quickbar button span{display:none!important}

/* Room drawer: hidden until requested, like classic Cody side drawer */
.rooms{
  position:fixed!important;z-index:75!important;left:var(--gc-left-w)!important;top:var(--gc-top-h)!important;bottom:0!important;width:280px!important;
  padding:10px!important;background:var(--gc-panel2)!important;border:0!important;border-right:1px solid var(--gc-line)!important;border-radius:0!important;
  transform:translateX(-110%)!important;transition:transform .18s ease!important;box-shadow:14px 0 32px #0008!important
}
.rooms.mobileOpen{transform:translateX(0)!important}

/* Center room */
.chat{
  grid-column:2!important;grid-row:1!important;min-width:0!important;height:100%!important;display:flex!important;flex-direction:column!important;
  border:0!important;border-radius:0!important;background:color-mix(in srgb,var(--gc-bg) 88%,transparent)!important
}
.chathead{display:none!important}
.messages{
  flex:1!important;min-height:0!important;overflow:auto!important;padding:3px 8px 10px!important;
  background:transparent!important;scrollbar-width:thin!important
}
.msg{
  display:grid!important;grid-template-columns:34px minmax(0,1fr)!important;gap:7px!important;
  margin:0!important;padding:6px 4px!important;border:0!important;border-bottom:1px solid color-mix(in srgb,var(--gc-line) 55%,transparent)!important;
  background:transparent!important
}
.msg:hover{background:color-mix(in srgb,var(--gc-panel) 35%,transparent)!important}
.msg .avatar{width:32px!important;height:32px!important;border-radius:50%!important;background:var(--gc-panel2)!important;border:1px solid var(--gc-line)!important;font-size:11px!important}
.msgMain{min-width:0!important}.meta{display:flex!important;align-items:center!important;gap:5px!important;line-height:1.15!important}.name{font-size:10px!important;color:var(--gc-text)!important}.time,.edited{font-size:8px!important;color:var(--gc-muted)!important}.rank{font-size:7px!important;background:var(--gc-accent)!important}
.body{
  display:block!important;width:fit-content!important;max-width:100%!important;margin:2px 0 0!important;padding:0!important;
  background:transparent!important;color:var(--gc-text)!important;border-radius:0!important;line-height:1.38!important;font-size:11px!important
}
.msgActions{margin-top:2px!important;gap:8px!important}.msgActions button{font-size:9px!important;color:var(--gc-muted)!important}
.typing{height:18px!important;min-height:18px!important;padding:1px 9px!important;color:var(--gc-muted)!important;font-size:9px!important}
.replyBar{margin:0 7px!important;border-radius:5px 5px 0 0!important;background:var(--gc-panel)!important;border-color:var(--gc-line)!important}

/* Composer */
.composer{
  flex:0 0 auto!important;min-height:43px!important;display:grid!important;grid-template-columns:34px 34px minmax(0,1fr) 36px!important;
  gap:5px!important;padding:4px 7px!important;background:var(--gc-panel2)!important;border:0!important;border-top:1px solid var(--gc-line)!important
}
.composer>button{width:34px!important;height:34px!important;min-width:34px!important;padding:0!important;border-radius:50%!important}
.composer textarea{
  height:34px!important;min-height:34px!important;max-height:100px!important;padding:7px 12px!important;resize:none!important;
  border:1px solid var(--gc-line)!important;border-radius:17px!important;background:color-mix(in srgb,var(--gc-bg) 82%,#000 18%)!important;color:var(--gc-text)!important
}
#plusMenuBtn{background:var(--gc-panel)!important;color:var(--gc-accent)!important;border:1px solid var(--gc-line)!important;font-size:18px!important}
#emoji{background:var(--gc-panel)!important;color:var(--gc-text)!important;border:1px solid var(--gc-line)!important}
.composerSend{background:var(--gc-accent)!important;color:var(--gc-bg)!important}

/* Right Cody-style multi-tab panel */
.gcRightPanel,.users{
  grid-column:3!important;grid-row:1!important;height:100%!important;min-width:0!important;
  padding:0 6px 6px!important;background:color-mix(in srgb,var(--gc-panel2) 96%,#000 4%)!important;
  border:0!important;border-left:1px solid var(--gc-line)!important;border-radius:0!important;overflow:hidden!important
}
.gcRightTabs{
  height:37px!important;display:grid!important;grid-template-columns:repeat(6,1fr)!important;gap:0!important;
  margin:0 -6px 4px!important;padding:0!important;background:var(--gc-panel2)!important;border-bottom:1px solid var(--gc-line)!important
}
.gcRightTabs button{
  min-width:0!important;height:36px!important;border:0!important;border-right:1px solid color-mix(in srgb,var(--gc-line) 60%,transparent)!important;
  border-radius:0!important;background:transparent!important;color:var(--gc-muted)!important;cursor:pointer!important
}
.gcRightTabs button:hover,.gcRightTabs button.active{background:color-mix(in srgb,var(--gc-panel) 70%,var(--gc-text) 7%)!important;color:var(--gc-text)!important;box-shadow:inset 0 -2px var(--gc-accent)!important}
.liveStats{margin:3px 0 4px!important;padding:0!important;border:1px solid var(--gc-line)!important;border-radius:5px!important;background:var(--gc-panel)!important;overflow:hidden!important}
.liveStats>b{display:block!important;padding:4px!important;text-align:center!important;background:color-mix(in srgb,var(--gc-panel2) 55%,var(--gc-accent) 12%)!important;color:var(--gc-text)!important;font-size:8px!important}
.liveStats>div{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:2px!important;padding:3px!important}
.liveStats span{display:flex!important;flex-direction:column!important;align-items:center!important;padding:3px 1px!important;border-radius:4px!important;background:color-mix(in srgb,var(--gc-bg) 72%,var(--gc-panel) 28%)!important;color:var(--gc-muted)!important;font-size:7px!important}
.liveStats strong{font-size:10px!important;color:var(--gc-text)!important}
.gcRightTitle{height:25px!important;display:flex!important;align-items:center!important;padding:0 2px!important}.gcRightTitle strong{font-size:8px!important;text-transform:uppercase!important;letter-spacing:.08em!important;color:var(--gc-accent)!important}
.gcUserScroll{height:calc(100% - 108px)!important;overflow:auto!important;padding-right:1px!important}
.userGroup{margin:4px 0 7px!important}
.userGroup>header{
  min-height:26px!important;height:auto!important;padding:4px 7px!important;margin:0 0 3px!important;
  display:flex!important;align-items:center!important;gap:5px!important;border:0!important;border-radius:5px!important;
  background:color-mix(in srgb,var(--gc-panel) 86%,var(--rank-group-color,var(--gc-accent)) 14%)!important;color:var(--gc-text)!important
}
.userGroup>header b{font-size:8px!important;text-transform:uppercase!important;letter-spacing:.08em!important}.rankCount{margin-left:auto!important;font-size:8px!important}
.userCard{
  width:100%!important;min-height:43px!important;display:grid!important;grid-template-columns:34px minmax(0,1fr) auto!important;align-items:center!important;
  gap:6px!important;margin:2px 0!important;padding:4px 5px!important;border:1px solid transparent!important;border-radius:6px!important;
  background:linear-gradient(90deg,color-mix(in srgb,var(--gc-panel) 82%,transparent),color-mix(in srgb,var(--gc-panel2) 75%,transparent))!important;color:var(--gc-text)!important
}
.userCard:hover{border-color:var(--card-glow,var(--gc-accent))!important;background:var(--gc-panel)!important}
.userCard[style*="--user-banner"]{background-image:linear-gradient(90deg,color-mix(in srgb,var(--gc-panel) 58%,transparent),color-mix(in srgb,var(--gc-panel2) 70%,transparent)),var(--user-banner)!important;background-size:cover!important;background-position:center!important}
.uAvatar{width:32px!important;height:32px!important}.uAvatar img,.uAvatar>span{width:31px!important;height:31px!important}.uBody{min-width:0!important}.uBody strong{font-size:10px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.uBody small{font-size:7.5px!important;color:var(--gc-muted)!important}.uMeta{font-size:9px!important;gap:2px!important}.newPill{font-size:6px!important;padding:1px 4px!important}
.userListEmpty{min-height:180px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;text-align:center!important;gap:6px!important;padding:18px!important;color:var(--gc-muted)!important}.userListEmpty strong{font-size:30px!important}.userListEmpty b{font-size:10px!important;color:var(--gc-text)!important}.userListEmpty span{font-size:8px!important}

/* Search row */
#userSearchBox{padding:4px 0!important}#userSearchBox input{width:100%!important;height:31px!important;border:1px solid var(--gc-line)!important;border-radius:5px!important;background:var(--gc-bg)!important;color:var(--gc-text)!important;padding:0 9px!important}

/* Plus/addon launcher */
.actionTray.hidden{display:none!important}
.actionTray:not(.hidden){display:block!important}
.actionTray{
  position:fixed!important;z-index:160!important;left:calc(var(--gc-left-w) + 7px)!important;bottom:49px!important;
  width:min(570px,calc(100vw - var(--gc-right-w) - 60px))!important;max-height:min(440px,70vh)!important;overflow:auto!important;
  padding:8px!important;background:var(--gc-panel2)!important;border:1px solid var(--gc-line)!important;border-radius:7px!important;box-shadow:0 18px 55px #000c!important
}
.addonTrayHead{display:flex!important;align-items:center!important;justify-content:space-between!important;padding:2px 3px 7px!important;border-bottom:1px solid var(--gc-line)!important}.addonTrayHead>div{display:flex!important;flex-direction:column!important}.addonTrayHead b{font-size:11px!important}.addonTrayHead small{font-size:8px!important;color:var(--gc-muted)!important}.addonTrayHead button{width:27px!important;height:27px!important;border:0!important;background:var(--gc-panel)!important;color:var(--gc-text)!important;border-radius:4px!important;cursor:pointer!important}
.addonTrayGrid{display:grid!important;grid-template-columns:repeat(7,minmax(58px,1fr))!important;gap:5px!important;padding-top:7px!important}
.addonTrayGrid button{min-width:0!important;display:flex!important;flex-direction:column!important;align-items:center!important;gap:4px!important;padding:6px 2px!important;border:0!important;border-radius:5px!important;background:transparent!important;color:var(--gc-text)!important;cursor:pointer!important}
.addonTrayGrid button:hover{background:var(--gc-panel)!important}.addonIcon{width:38px!important;height:38px!important;display:grid!important;place-items:center!important;border-radius:50%!important;background:color-mix(in srgb,var(--gc-panel) 82%,var(--gc-accent) 8%)!important;border:1px solid var(--gc-line)!important;font-size:16px!important}.addonTrayGrid b{font-size:8px!important}
.addonTrayGrid button:disabled{display:none!important}

/* Emoji picker like classic chat */
.emojiPanel{z-index:170!important;width:min(540px,calc(100vw - 20px))!important;background:var(--gc-panel2)!important;border:1px solid var(--gc-line)!important;border-radius:6px!important;box-shadow:0 18px 55px #000c!important}
.emojiHead{padding:7px 9px!important;background:var(--gc-panel2)!important;border-bottom:1px solid var(--gc-line)!important}.emojiTabs{padding:4px!important;background:var(--gc-panel)!important;border-bottom:1px solid var(--gc-line)!important}.emojiTabs button{height:31px!important;min-width:34px!important;border-radius:4px!important}.emojiGrid{grid-template-columns:repeat(10,1fr)!important;gap:2px!important;padding:7px!important;max-height:300px!important}.emojiGrid button{min-height:32px!important;padding:2px!important;font-size:21px!important;background:transparent!important;border-radius:4px!important}.emojiGrid button:hover{background:var(--gc-panel)!important}

/* Theme gallery */
.themeGallery{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important;margin-top:10px!important}
.themeTile{min-height:100px!important;display:flex!important;flex-direction:column!important;gap:4px!important;text-align:left!important;padding:8px!important;background:var(--gc-panel)!important;color:var(--gc-text)!important;border:1px solid var(--gc-line)!important;border-radius:7px!important;cursor:pointer!important}
.themeTile.active{border-color:var(--gc-accent)!important;box-shadow:0 0 0 1px var(--gc-accent) inset!important}.themeSwatch{height:38px!important;border-radius:5px!important;background:linear-gradient(135deg,var(--gc-panel2),var(--gc-accent))!important}.themeTile b{font-size:10px!important}.themeTile small{font-size:8px!important;color:var(--gc-muted)!important}

/* Password strength */
.passwordMeter{height:5px!important;width:100%!important;border-radius:5px!important;background:var(--gc-line)!important;overflow:hidden!important;margin-top:5px!important}.passwordMeter i{display:block!important;height:100%!important;width:0;transition:width .2s,background .2s!important}.passwordMeter i[data-strength="weak"]{background:#e95158!important}.passwordMeter i[data-strength="medium"]{background:#e8a63b!important}.passwordMeter i[data-strength="strong"]{background:#60bf76!important}.passwordMeter i[data-strength="veryStrong"]{background:#31cf91!important}#passwordStrengthText[data-strength="weak"]{color:#ff7479!important}#passwordStrengthText[data-strength="medium"]{color:#f4b95a!important}#passwordStrengthText[data-strength="strong"],#passwordStrengthText[data-strength="veryStrong"]{color:#70d48a!important}

/* Cookie banner */
.cookieBanner{position:fixed!important;z-index:300!important;left:14px!important;right:14px!important;bottom:14px!important;max-width:980px!important;margin:auto!important;padding:13px 14px!important;display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:12px!important;align-items:center!important;background:var(--gc-panel2)!important;color:var(--gc-text)!important;border:1px solid var(--gc-line)!important;border-radius:9px!important;box-shadow:0 18px 60px #000c!important}.cookieBanner.hidden{display:none!important}.cookieBanner p{margin:3px 0!important;color:var(--gc-muted)!important;font-size:9px!important}.cookieActions{display:flex!important;gap:6px!important;flex-wrap:wrap!important}.cookieActions button{min-height:32px!important;border-radius:5px!important}

/* Theme compatibility: every imported theme changes the whole shell */
.topbar,.quickbar,.gcRightPanel,.rooms,.composer,.actionTray,.emojiPanel,.modalCard,.authShell,.authPanel,.authbox{transition:background-color .12s,border-color .12s,color .12s!important}
.panel,.modalCard,.authbox,input,textarea,select{border-color:var(--gc-line)!important}
.modalCard,.authbox{background:var(--gc-panel2)!important;color:var(--gc-text)!important}
input,textarea,select{background:var(--gc-bg)!important;color:var(--gc-text)!important}
button{font-family:inherit}

/* Mobile */
@media(max-width:900px){
  :root{--gc-top-h:58px;--gc-right-w:min(318px,92vw)}
  .gcLogoBrand strong{font-size:16px!important}
  .gcTopIcon,.coinPill,.streakPill,.statusChip,.gcTopText{display:none!important}
  #notificationBtn,.gcProfileTop{display:grid!important}
  .layout{grid-template-columns:1fr!important;height:calc(var(--gc-vh,100dvh) - var(--gc-top-h))!important}
  .chat{grid-column:1!important;padding-bottom:54px!important}
  .quickbar{position:fixed!important;z-index:90!important;left:0!important;right:0!important;bottom:0!important;top:auto!important;width:auto!important;height:54px!important;display:flex!important;flex-direction:row!important;padding:3px!important;border:0!important;border-top:1px solid var(--gc-line)!important}
  .quickbar button{flex:1!important;min-width:45px!important;height:46px!important;margin:0!important}
  .gcRightPanel{position:fixed!important;z-index:110!important;right:0!important;top:var(--gc-top-h)!important;bottom:54px!important;width:var(--gc-right-w)!important;height:auto!important;transform:translateX(105%)!important;transition:transform .18s ease!important;box-shadow:-18px 0 50px #000a!important}
  .gcRightPanel.mobileOpen{transform:translateX(0)!important}
  .rooms{left:0!important;top:var(--gc-top-h)!important;bottom:54px!important;width:min(300px,90vw)!important}
  .actionTray{left:7px!important;right:7px!important;bottom:60px!important;width:auto!important;max-height:62vh!important}.addonTrayGrid{grid-template-columns:repeat(4,1fr)!important}
  .emojiPanel{left:7px!important;right:7px!important;bottom:60px!important;width:auto!important}.emojiGrid{grid-template-columns:repeat(7,1fr)!important}
  .themeGallery{grid-template-columns:repeat(2,1fr)!important}
  .cookieBanner{grid-template-columns:1fr!important;left:7px!important;right:7px!important;bottom:61px!important}.cookieActions button{flex:1!important}
  .composer{grid-template-columns:36px 36px minmax(0,1fr) 38px!important;min-height:47px!important;padding:5px!important}.composer>button{width:36px!important;height:36px!important}.composer textarea{height:36px!important;min-height:36px!important}
}


/* ============================================================
   v0.24.0 READABILITY + USERLIST + BIRTHDAY
   ============================================================ */
:root{
  --gc-top-h:54px!important;
  --gc-left-w:48px!important;
  --gc-right-w:334px!important;
}

/* Browser/body never gets random scrollbars; panels own their scroll. */
html,body{width:100%!important;height:100%!important;overflow:hidden!important}
#app,.layout{max-width:100vw!important;overflow:hidden!important}
.messages,.gcUserScroll,.rooms,.modalCard,.emojiGrid,.actionTray,.adminMain,.sidebar{
  scrollbar-width:thin;
  scrollbar-color:color-mix(in srgb,var(--gc-accent) 45%,var(--gc-line)) transparent;
}
.messages::-webkit-scrollbar,.gcUserScroll::-webkit-scrollbar,.rooms::-webkit-scrollbar,.modalCard::-webkit-scrollbar,.emojiGrid::-webkit-scrollbar,.actionTray::-webkit-scrollbar{width:7px;height:7px}
.messages::-webkit-scrollbar-track,.gcUserScroll::-webkit-scrollbar-track,.rooms::-webkit-scrollbar-track,.modalCard::-webkit-scrollbar-track,.emojiGrid::-webkit-scrollbar-track,.actionTray::-webkit-scrollbar-track{background:transparent}
.messages::-webkit-scrollbar-thumb,.gcUserScroll::-webkit-scrollbar-thumb,.rooms::-webkit-scrollbar-thumb,.modalCard::-webkit-scrollbar-thumb,.emojiGrid::-webkit-scrollbar-thumb,.actionTray::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--gc-accent) 35%,var(--gc-line));border-radius:8px}
.messages::-webkit-scrollbar-thumb:hover,.gcUserScroll::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--gc-accent) 60%,var(--gc-line))}

/* Make the layout readable at browser zoom 100%. */
.gcClassicTop,.topbar{height:54px!important;min-height:54px!important;padding:0 11px!important}
.gcLogoBrand strong{font-size:22px!important}
.gcHamburger,.gcTopIcon{width:36px!important;height:36px!important;font-size:17px!important}
.gcProfileTop{width:40px!important;height:40px!important}.gcProfileTop img{width:37px!important;height:37px!important}
.layout{height:calc(100dvh - 54px)!important;grid-template-columns:48px minmax(0,1fr) 334px!important}
.quickbar{width:48px!important;padding:6px 5px!important}.quickbar button{width:38px!important;min-width:38px!important;height:42px!important;min-height:42px!important;font-size:17px!important}.quickbar button i{font-size:17px!important}
.rooms{left:48px!important;top:54px!important;width:300px!important}

.messages{padding:8px 13px 14px!important}
.msg{grid-template-columns:44px minmax(0,1fr)!important;gap:10px!important;padding:9px 5px!important}
.msg .avatar{width:41px!important;height:41px!important;font-size:13px!important}
.name{font-size:13px!important}.time,.edited{font-size:10px!important}.rank{font-size:8px!important;padding:2px 5px!important}
.body{font-size:13px!important;line-height:1.48!important;margin-top:3px!important}.msgActions button{font-size:10px!important}
.typing{height:21px!important;min-height:21px!important;font-size:10px!important}
.composer{min-height:54px!important;grid-template-columns:40px 40px minmax(0,1fr) 42px!important;padding:7px 9px!important;gap:6px!important}
.composer>button{width:40px!important;height:40px!important;min-width:40px!important}
.composer textarea{height:40px!important;min-height:40px!important;border-radius:20px!important;padding:9px 14px!important;font-size:13px!important}
.composerSend{font-size:17px!important}

.gcRightPanel,.users{padding:0 9px 8px!important}
.gcRightTabs{height:43px!important;margin:0 -9px 7px!important;padding:0 7px!important}.gcRightTabs button{height:42px!important;font-size:16px!important}
.liveStats>b{font-size:10px!important;padding:6px!important}.liveStats>div{padding:5px!important}.liveStats span{font-size:8px!important;padding:5px 2px!important}.liveStats strong{font-size:13px!important}
.gcRightTitle{height:31px!important}.gcRightTitle strong{font-size:10px!important}
.gcUserScroll{height:calc(100% - 127px)!important}
.userGroup>header{min-height:32px!important;padding:6px 8px!important}.userGroup>header b{font-size:10px!important}
.userCard{min-height:54px!important;grid-template-columns:42px minmax(0,1fr) auto!important;gap:8px!important;padding:6px 7px!important}
.uAvatar{width:40px!important;height:40px!important}.uAvatar img,.uAvatar>span{width:39px!important;height:39px!important}
.uBody strong{font-size:12px!important}.uBody small{font-size:9px!important}.uMeta{font-size:10px!important}
.userListEmpty{min-height:230px!important}.userListEmpty strong{font-size:40px!important}.userListEmpty b{font-size:13px!important}.userListEmpty span{font-size:10px!important;max-width:230px!important}

/* Birthday calendar */
.birthdayModalCard{width:min(650px,94vw)!important;max-height:min(760px,90dvh)!important;overflow:auto!important}
.birthdayRewardInfo{display:grid;grid-template-columns:auto auto 1fr;gap:8px;align-items:center;padding:10px 12px;margin:8px 0 12px;border:1px solid var(--gc-line);border-radius:8px;background:var(--gc-panel)}
.birthdayRewardInfo span{font-size:11px;color:var(--gc-muted)}.birthdayRewardInfo b{font-size:15px;color:var(--gc-accent)}.birthdayRewardInfo small{font-size:9px;color:var(--gc-muted)}
.birthdayCalendar{display:flex;flex-direction:column;gap:5px}
.birthdayRow{width:100%;display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 10px;border:1px solid var(--gc-line);border-radius:8px;background:var(--gc-panel);color:var(--gc-text);text-align:left;cursor:pointer}
.birthdayRow:hover{border-color:var(--gc-accent);background:color-mix(in srgb,var(--gc-panel) 88%,var(--gc-accent) 12%)}
.birthdayRow.today{border-color:#e8b44e;box-shadow:0 0 0 1px #e8b44e inset;background:color-mix(in srgb,var(--gc-panel) 82%,#e8b44e 18%)}
.birthdayRow img{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid var(--gc-line)}
.birthdayWho,.birthdayWhen{display:flex;flex-direction:column;gap:2px}.birthdayWho b,.birthdayWhen b{font-size:12px}.birthdayWho small,.birthdayWhen small{font-size:9px;color:var(--gc-muted)}
.birthdayWhen{text-align:right}.birthdayEmpty{min-height:220px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:6px;color:var(--gc-muted)}.birthdayEmpty strong{font-size:40px}.birthdayEmpty b{font-size:13px;color:var(--gc-text)}.birthdayEmpty span{font-size:10px;max-width:320px}

@media(max-width:900px){
  :root{--gc-top-h:60px!important;--gc-right-w:min(330px,94vw)!important}
  .layout{height:calc(var(--gc-vh,100dvh) - 60px)!important;grid-template-columns:1fr!important}
  .quickbar{height:58px!important}.chat{padding-bottom:58px!important}
  .gcRightPanel{top:60px!important;bottom:58px!important}
  .rooms{top:60px!important;bottom:58px!important;left:0!important}
  .gcLogoBrand strong{font-size:18px!important}
  .messages{padding:8px 9px 12px!important}.msg{grid-template-columns:40px minmax(0,1fr)!important;gap:8px!important}.msg .avatar{width:38px!important;height:38px!important}.name{font-size:12px!important}.body{font-size:12.5px!important}
  .composer{min-height:52px!important;grid-template-columns:38px 38px minmax(0,1fr) 40px!important;padding:6px!important}.composer>button{width:38px!important;height:38px!important}.composer textarea{height:38px!important;min-height:38px!important;font-size:16px!important}
  .birthdayRewardInfo{grid-template-columns:1fr}.birthdayRow{grid-template-columns:42px minmax(0,1fr)}.birthdayWhen{grid-column:2;text-align:left}
}

/* v0.24.1 userlist restore and real theme previews */
#topUserListRestore{color:var(--gc-accent)!important;border:1px solid var(--gc-line)!important;background:var(--gc-panel)!important}
#app.usersHidden .layout{grid-template-columns:var(--gc-left-w) minmax(0,1fr)!important}
#app.usersHidden #usersPanel{display:none!important}
#app.usersHidden #topUserListRestore{display:grid!important}
.themeTile{min-height:150px!important;overflow:hidden!important}
.themeSwatch{width:100%!important;height:82px!important;min-height:82px!important;border:1px solid var(--gc-line)!important;border-radius:7px!important;background-size:cover!important;background-position:center!important}
.themeTile small{min-height:28px!important}
@media(max-width:900px){#topUserListRestore{display:grid!important}#app:not(.usersHidden) #topUserListRestore{display:none!important}.themeSwatch{height:66px!important;min-height:66px!important}}

/* Per-theme actual previews */
.themeTile[data-theme-preview="arc"]{background:#383c43!important;border-color:#5d626b!important}
.themeTile[data-theme-preview="arc"] .themeSwatch{background:linear-gradient(135deg,rgba(0,0,0,.08),rgba(0,0,0,.42)),url('themes/arc/images/background.png') center/cover no-repeat!important;border-color:#5d626b!important}
.themeTile[data-theme-preview="arc"] b{color:#f4f5f6!important}
.themeTile[data-theme-preview="blue"]{background:#0b223b!important;border-color:#24527c!important}
.themeTile[data-theme-preview="blue"] .themeSwatch{background:linear-gradient(135deg,#071526 0 30%,#10304f 30% 70%,#53a9ff 70% 100%)!important;border-color:#24527c!important}
.themeTile[data-theme-preview="blue"] b{color:#f4fbff!important}
.themeTile[data-theme-preview="catween"]{background:#24162a!important;border-color:#68406e!important}
.themeTile[data-theme-preview="catween"] .themeSwatch{background:linear-gradient(135deg,rgba(0,0,0,.08),rgba(0,0,0,.42)),url('themes/catween/images/background.jpg') center/cover no-repeat!important;border-color:#68406e!important}
.themeTile[data-theme-preview="catween"] b{color:#fff4ff!important}
.themeTile[data-theme-preview="cuteowl"]{background:#2b1d39!important;border-color:#72508f!important}
.themeTile[data-theme-preview="cuteowl"] .themeSwatch{background:linear-gradient(135deg,rgba(0,0,0,.08),rgba(0,0,0,.42)),url('themes/cuteowl/images/background.jpg') center/cover no-repeat!important;border-color:#72508f!important}
.themeTile[data-theme-preview="cuteowl"] b{color:#fff8ff!important}
.themeTile[data-theme-preview="dark"]{background:#101216!important;border-color:#323741!important}
.themeTile[data-theme-preview="dark"] .themeSwatch{background:linear-gradient(135deg,#08090c 0 30%,#181b21 30% 70%,#8eabff 70% 100%)!important;border-color:#323741!important}
.themeTile[data-theme-preview="dark"] b{color:#f6f6f7!important}
.themeTile[data-theme-preview="dark-purple"]{background:#191021!important;border-color:#56396a!important}
.themeTile[data-theme-preview="dark-purple"] .themeSwatch{background:linear-gradient(135deg,#0d0814 0 30%,#24162f 30% 70%,#c078ff 70% 100%)!important;border-color:#56396a!important}
.themeTile[data-theme-preview="dark-purple"] b{color:#fbf3ff!important}
.themeTile[data-theme-preview="dolphin"]{background:#0c2a34!important;border-color:#28636f!important}
.themeTile[data-theme-preview="dolphin"] .themeSwatch{background:linear-gradient(135deg,#061a22 0 30%,#113943 30% 70%,#41d4e6 70% 100%)!important;border-color:#28636f!important}
.themeTile[data-theme-preview="dolphin"] b{color:#f1fdff!important}
.themeTile[data-theme-preview="explorer"]{background:#102537!important;border-color:#315b7a!important}
.themeTile[data-theme-preview="explorer"] .themeSwatch{background:linear-gradient(135deg,rgba(0,0,0,.08),rgba(0,0,0,.42)),url('themes/explorer/images/background.png') center/cover no-repeat!important;border-color:#315b7a!important}
.themeTile[data-theme-preview="explorer"] b{color:#f4fbff!important}
.themeTile[data-theme-preview="final-fantasy"]{background:#101724!important;border-color:#3c4e69!important}
.themeTile[data-theme-preview="final-fantasy"] .themeSwatch{background:linear-gradient(135deg,rgba(0,0,0,.08),rgba(0,0,0,.42)),url('themes/final-fantasy/images/main.webp') center/cover no-repeat!important;border-color:#3c4e69!important}
.themeTile[data-theme-preview="final-fantasy"] b{color:#fff!important}
.themeTile[data-theme-preview="forest"]{background:#0d1b16!important;border-color:#2b5545!important}
.themeTile[data-theme-preview="forest"] .themeSwatch{background:linear-gradient(135deg,#07110d 0 30%,#13261f 30% 70%,#62d39d 70% 100%)!important;border-color:#2b5545!important}
.themeTile[data-theme-preview="forest"] b{color:#f2fff8!important}
.themeTile[data-theme-preview="forest-pack"]{background:#10251a!important;border-color:#315c42!important}
.themeTile[data-theme-preview="forest-pack"] .themeSwatch{background:linear-gradient(135deg,rgba(0,0,0,.08),rgba(0,0,0,.42)),url('themes/forest/images/background.jpg') center/cover no-repeat!important;border-color:#315c42!important}
.themeTile[data-theme-preview="forest-pack"] b{color:#f2fff6!important}
.themeTile[data-theme-preview="gewoonchatten"]{background:#141a24!important;border-color:#3d4a5e!important}
.themeTile[data-theme-preview="gewoonchatten"] .themeSwatch{background:linear-gradient(135deg,rgba(0,0,0,.08),rgba(0,0,0,.42)),url('themes/gewoonchatten/images/background.png') center/cover no-repeat!important;border-color:#3d4a5e!important}
.themeTile[data-theme-preview="gewoonchatten"] b{color:#fff!important}
.themeTile[data-theme-preview="graphite"]{background:#15171c!important;border-color:#383d47!important}
.themeTile[data-theme-preview="graphite"] .themeSwatch{background:linear-gradient(135deg,#0b0c0f 0 30%,#1c1f25 30% 70%,#d0d4da 70% 100%)!important;border-color:#383d47!important}
.themeTile[data-theme-preview="graphite"] b{color:#f4f5f7!important}
.themeTile[data-theme-preview="halloween"]{background:#24130a!important;border-color:#6d3a17!important}
.themeTile[data-theme-preview="halloween"] .themeSwatch{background:linear-gradient(135deg,rgba(0,0,0,.08),rgba(0,0,0,.42)),url('themes/halloween/images/background.jpg') center/cover no-repeat!important;border-color:#6d3a17!important}
.themeTile[data-theme-preview="halloween"] b{color:#fff5e9!important}
.themeTile[data-theme-preview="jungle-green"]{background:#0c2118!important;border-color:#2f644b!important}
.themeTile[data-theme-preview="jungle-green"] .themeSwatch{background:linear-gradient(135deg,rgba(0,0,0,.08),rgba(0,0,0,.42)),url('themes/jungle-green/images/background.png') center/cover no-repeat!important;border-color:#2f644b!important}
.themeTile[data-theme-preview="jungle-green"] b{color:#f1fff7!important}
.themeTile[data-theme-preview="light"]{background:#ffffff!important;border-color:#cad5e2!important}
.themeTile[data-theme-preview="light"] .themeSwatch{background:linear-gradient(135deg,#eaf0f7 0 30%,#f6f9fc 30% 70%,#3b76d6 70% 100%)!important;border-color:#cad5e2!important}
.themeTile[data-theme-preview="light"] b{color:#1c2633!important}
.themeTile[data-theme-preview="light-blue"]{background:#f7fbff!important;border-color:#bdd8f1!important}
.themeTile[data-theme-preview="light-blue"] .themeSwatch{background:linear-gradient(135deg,rgba(0,0,0,.08),rgba(0,0,0,.42)),url('themes/light-blue/images/bg.jpeg') center/cover no-repeat!important;border-color:#bdd8f1!important}
.themeTile[data-theme-preview="light-blue"] b{color:#17324d!important}
.themeTile[data-theme-preview="lite"]{background:#fff!important;border-color:#d3dbe5!important}
.themeTile[data-theme-preview="lite"] .themeSwatch{background:linear-gradient(135deg,#eef2f6 0 30%,#f7f9fc 30% 70%,#497fd2 70% 100%)!important;border-color:#d3dbe5!important}
.themeTile[data-theme-preview="lite"] b{color:#1e2935!important}
.themeTile[data-theme-preview="mauve-purple"]{background:#25172b!important;border-color:#67436f!important}
.themeTile[data-theme-preview="mauve-purple"] .themeSwatch{background:linear-gradient(135deg,rgba(0,0,0,.08),rgba(0,0,0,.42)),url('themes/mauve-purple/images/background.png') center/cover no-repeat!important;border-color:#67436f!important}
.themeTile[data-theme-preview="mauve-purple"] b{color:#fff7ff!important}
.themeTile[data-theme-preview="midnight"]{background:#101621!important;border-color:#263248!important}
.themeTile[data-theme-preview="midnight"] .themeSwatch{background:linear-gradient(135deg,#070a10 0 30%,#151d2b 30% 70%,#e6b94e 70% 100%)!important;border-color:#263248!important}
.themeTile[data-theme-preview="midnight"] b{color:#f7f3eb!important}
.themeTile[data-theme-preview="nord"]{background:#2e3440!important;border-color:#4c566a!important}
.themeTile[data-theme-preview="nord"] .themeSwatch{background:linear-gradient(135deg,rgba(0,0,0,.08),rgba(0,0,0,.42)),url('themes/nord/images/background.png') center/cover no-repeat!important;border-color:#4c566a!important}
.themeTile[data-theme-preview="nord"] b{color:#eceff4!important}
.themeTile[data-theme-preview="notepad"]{background:#fffdf6!important;border-color:#d9cba9!important}
.themeTile[data-theme-preview="notepad"] .themeSwatch{background:linear-gradient(135deg,#efe9d6 0 30%,#f8f1df 30% 70%,#6588b9 70% 100%)!important;border-color:#d9cba9!important}
.themeTile[data-theme-preview="notepad"] b{color:#3b3529!important}
.themeTile[data-theme-preview="obsidian"]{background:#0d1118!important;border-color:#2d3644!important}
.themeTile[data-theme-preview="obsidian"] .themeSwatch{background:linear-gradient(135deg,rgba(0,0,0,.08),rgba(0,0,0,.42)),url('themes/obsidian/images/background.svg') center/cover no-repeat!important;border-color:#2d3644!important}
.themeTile[data-theme-preview="obsidian"] b{color:#f6f7f9!important}
.themeTile[data-theme-preview="ocean"]{background:#0c1d2a!important;border-color:#20506b!important}
.themeTile[data-theme-preview="ocean"] .themeSwatch{background:linear-gradient(135deg,#06101a 0 30%,#112938 30% 70%,#39c6df 70% 100%)!important;border-color:#20506b!important}
.themeTile[data-theme-preview="ocean"] b{color:#effbff!important}
.themeTile[data-theme-preview="purple"]{background:#171021!important;border-color:#50376c!important}
.themeTile[data-theme-preview="purple"] .themeSwatch{background:linear-gradient(135deg,#0d0717 0 30%,#21162e 30% 70%,#b878ff 70% 100%)!important;border-color:#50376c!important}
.themeTile[data-theme-preview="purple"] b{color:#faf2ff!important}
.themeTile[data-theme-preview="purple-pack"]{background:#1d1028!important;border-color:#603778!important}
.themeTile[data-theme-preview="purple-pack"] .themeSwatch{background:linear-gradient(135deg,#100917 0 30%,#291638 30% 70%,#c979ff 70% 100%)!important;border-color:#603778!important}
.themeTile[data-theme-preview="purple-pack"] b{color:#fff6ff!important}
.themeTile[data-theme-preview="red-leaves"]{background:#281315!important;border-color:#6c353b!important}
.themeTile[data-theme-preview="red-leaves"] .themeSwatch{background:linear-gradient(135deg,rgba(0,0,0,.08),rgba(0,0,0,.42)),url('themes/red-leaves/images/background.jpg') center/cover no-repeat!important;border-color:#6c353b!important}
.themeTile[data-theme-preview="red-leaves"] b{color:#fff5f5!important}
.themeTile[data-theme-preview="remix"]{background:#16162a!important;border-color:#49486a!important}
.themeTile[data-theme-preview="remix"] .themeSwatch{background:linear-gradient(135deg,rgba(0,0,0,.08),rgba(0,0,0,.42)),url('themes/remix/images/background.jpg') center/cover no-repeat!important;border-color:#49486a!important}
.themeTile[data-theme-preview="remix"] b{color:#fafaff!important}
.themeTile[data-theme-preview="rose"]{background:#201018!important;border-color:#603347!important}
.themeTile[data-theme-preview="rose"] .themeSwatch{background:linear-gradient(135deg,#13090f 0 30%,#2a1520 30% 70%,#ff719f 70% 100%)!important;border-color:#603347!important}
.themeTile[data-theme-preview="rose"] b{color:#fff4f8!important}
.themeTile[data-theme-preview="scent"]{background:#fff8fb!important;border-color:#dfc7d2!important}
.themeTile[data-theme-preview="scent"] .themeSwatch{background:linear-gradient(135deg,#f6edf2 0 30%,#f8edf3 30% 70%,#c56c93 70% 100%)!important;border-color:#dfc7d2!important}
.themeTile[data-theme-preview="scent"] b{color:#432e38!important}
.themeTile[data-theme-preview="starlight"]{background:#0e1628!important;border-color:#344769!important}
.themeTile[data-theme-preview="starlight"] .themeSwatch{background:linear-gradient(135deg,#070b17 0 30%,#17213a 30% 70%,#87a9ff 70% 100%)!important;border-color:#344769!important}
.themeTile[data-theme-preview="starlight"] b{color:#f7faff!important}
.themeTile[data-theme-preview="stpatrick"]{background:#0e2712!important;border-color:#34713e!important}
.themeTile[data-theme-preview="stpatrick"] .themeSwatch{background:linear-gradient(135deg,rgba(0,0,0,.08),rgba(0,0,0,.42)),url('themes/stpatrick/images/background.jpg') center/cover no-repeat!important;border-color:#34713e!important}
.themeTile[data-theme-preview="stpatrick"] b{color:#f1fff2!important}
.themeTile[data-theme-preview="venetian-red"]{background:#2a1014!important;border-color:#70333a!important}
.themeTile[data-theme-preview="venetian-red"] .themeSwatch{background:linear-gradient(135deg,rgba(0,0,0,.08),rgba(0,0,0,.42)),url('themes/venetian-red/images/background.png') center/cover no-repeat!important;border-color:#70333a!important}
.themeTile[data-theme-preview="venetian-red"] b{color:#fff5f6!important}
.themeTile[data-theme-preview="vip-gold"]{background:#18140c!important;border-color:#5c4822!important}
.themeTile[data-theme-preview="vip-gold"] .themeSwatch{background:linear-gradient(135deg,#0d0b07 0 30%,#211b0f 30% 70%,#e7bf5b 70% 100%)!important;border-color:#5c4822!important}
.themeTile[data-theme-preview="vip-gold"] b{color:#fff8e9!important}
.themeTile[data-theme-preview="whatsapp"]{background:#111b21!important;border-color:#35454e!important}
.themeTile[data-theme-preview="whatsapp"] .themeSwatch{background:linear-gradient(135deg,rgba(0,0,0,.08),rgba(0,0,0,.42)),url('themes/whatsapp/images/chat_background.png') center/cover no-repeat!important;border-color:#35454e!important}
.themeTile[data-theme-preview="whatsapp"] b{color:#e9edef!important}
.themeTile[data-theme-preview="yankees-blue"]{background:#0d1b31!important;border-color:#2c4d77!important}
.themeTile[data-theme-preview="yankees-blue"] .themeSwatch{background:linear-gradient(135deg,rgba(0,0,0,.08),rgba(0,0,0,.42)),url('themes/yankees-blue/images/background.png') center/cover no-repeat!important;border-color:#2c4d77!important}
.themeTile[data-theme-preview="yankees-blue"] b{color:#f5f9ff!important}


/* ============================================================
   v0.24.3 — CLEAN CLASSIC LAYOUT
   ============================================================ */

/* Theme background must be visible in the actual chat, not only preview. */
html,body,#app,.layout{background:var(--gc-theme-background,var(--gc-bg))!important;background-attachment:fixed!important}
.chat{
  position:relative!important;
  background:linear-gradient(90deg,color-mix(in srgb,var(--gc-bg) 78%,transparent),color-mix(in srgb,var(--gc-bg) 63%,transparent)),var(--gc-theme-background,var(--gc-bg))!important;
  background-size:cover!important;
  background-position:center!important;
  background-attachment:fixed!important;
}
.messages{background:transparent!important}
.chat::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:linear-gradient(90deg,color-mix(in srgb,var(--gc-bg) 48%,transparent),transparent 48%,color-mix(in srgb,var(--gc-bg) 28%,transparent));
}
.chat>*{position:relative;z-index:1}

/* Clean logo: no old pseudo text, no overlap. */
.gcLogoBrand strong::before,.gcLogoBrand strong::after,.brand strong::before,.brand strong::after{content:none!important;display:none!important}
.gcLogoBrand{height:42px!important;display:flex!important;align-items:center!important;min-width:0!important}
.gcLogoBrand strong{
  width:auto!important;height:auto!important;display:flex!important;align-items:baseline!important;gap:0!important;
  font-family:Arial Black,Inter,system-ui,sans-serif!important;font-size:0!important;line-height:1!important;
  letter-spacing:-1px!important;text-transform:uppercase!important;text-shadow:0 2px 0 #05070a,0 0 1px #05070a!important
}
.gcLogoWhite,.gcLogoOrange{display:inline!important;font-size:21px!important;font-weight:950!important;white-space:nowrap!important}
.gcLogoWhite{color:#f0f1f3!important}
.gcLogoOrange{color:#ff783e!important;text-shadow:0 2px 0 #05070a,2px 0 0 #325aff!important}

/* Much calmer topbar: user info lives in avatar menu. */
.gcClassicTop,.topbar{height:52px!important;min-height:52px!important;padding:0 10px!important}
#statusBtn,#xpPill,#coinPill,#streakPill,#adminLink,#logoutBtn{display:none!important}
.gcTopRight{gap:2px!important}
.gcTopIcon{width:34px!important;height:34px!important;font-size:15px!important}
.gcProfileTop{margin-left:4px!important}
.gcProfileMenu{
  position:fixed!important;z-index:230!important;right:8px!important;top:48px!important;width:190px!important;
  padding:5px!important;background:var(--gc-panel2)!important;border:1px solid var(--gc-line)!important;
  border-radius:8px!important;box-shadow:0 14px 45px #000b!important
}
.gcProfileMenu.hidden{display:none!important}
.gcProfileMenu button,.gcProfileMenu a{
  width:100%!important;min-height:34px!important;display:flex!important;align-items:center!important;gap:8px!important;
  padding:7px 9px!important;border:0!important;border-radius:5px!important;background:transparent!important;
  color:var(--gc-text)!important;text-decoration:none!important;font-size:10px!important;text-align:left!important;cursor:pointer!important
}
.gcProfileMenu button:hover,.gcProfileMenu a:hover{background:var(--gc-panel)!important}

/* Left quickbar: no ugly scrollbar ever. It can scroll on tiny screens but scrollbar stays hidden. */
.quickbar{
  overflow-y:auto!important;overflow-x:hidden!important;
  scrollbar-width:none!important;-ms-overflow-style:none!important;
}
.quickbar::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}
.quickbarExpand{margin-top:auto!important}

/* Hamburger/room drawer: one clean 300px drawer, no giant empty slab. */
.rooms{
  width:300px!important;max-width:min(300px,88vw)!important;
  left:0!important;top:52px!important;bottom:0!important;
  padding:10px!important;border-right:1px solid var(--gc-line)!important;
  background:var(--gc-panel2)!important;border-radius:0 9px 9px 0!important;
  transform:translateX(-103%)!important;overflow:auto!important;
}
.rooms.mobileOpen{transform:translateX(0)!important}
.sidebarBackdrop{
  display:block!important;position:fixed!important;inset:52px 0 0 0!important;z-index:70!important;
  background:#02060d75!important;opacity:0!important;pointer-events:none!important;transition:.18s!important;
}
.sidebarBackdrop.open{opacity:1!important;pointer-events:auto!important}
.rooms{z-index:75!important}

/* Main layout slightly calmer and less crowded. */
:root{--gc-left-w:46px!important;--gc-right-w:326px!important}
.layout{grid-template-columns:46px minmax(0,1fr) 326px!important;height:calc(100dvh - 52px)!important}
.quickbar{width:46px!important;padding:5px 4px!important}
.quickbar button{width:37px!important;min-width:37px!important;height:39px!important;min-height:39px!important}
.quickbar button i{font-size:16px!important}
.messages{padding:7px 12px 12px!important}
.msg{padding:8px 5px!important;grid-template-columns:41px minmax(0,1fr)!important}
.msg .avatar{width:38px!important;height:38px!important}
.name{font-size:12px!important}.body{font-size:12.5px!important}
.composer{min-height:51px!important;padding:6px 8px!important}
.composer textarea{font-size:13px!important}

/* Right user panel less noisy. */
.gcRightTabs{height:39px!important}
.gcRightTabs button{height:38px!important;font-size:14px!important}
.liveStats{margin:4px 0 7px!important}
.userGroup>header{min-height:29px!important}
.userCard{min-height:49px!important}
.uAvatar{width:37px!important;height:37px!important}
.uBody strong{font-size:11px!important}
.uBody small{font-size:8.5px!important}

/* Birthday modal consistent and readable. */
.birthdayModalCard{width:min(680px,94vw)!important}
.birthdayEmpty .primaryBtn{margin-top:8px!important;padding:8px 13px!important}

/* Keep theme image visible while panels remain readable. */
.gcRightPanel,.quickbar,.composer,.topbar,.rooms{
  backdrop-filter:blur(3px)!important;
  background-color:color-mix(in srgb,var(--gc-panel2) 90%,transparent)!important;
}

/* Mobile */
@media(max-width:900px){
  .gcClassicTop,.topbar{height:58px!important;min-height:58px!important}
  .gcLogoWhite,.gcLogoOrange{font-size:17px!important}
  .layout{height:calc(var(--gc-vh,100dvh) - 58px)!important;grid-template-columns:1fr!important}
  .rooms{top:58px!important;bottom:56px!important;max-width:min(300px,90vw)!important}
  .sidebarBackdrop{inset:58px 0 56px 0!important}
  .gcProfileMenu{top:54px!important}
}


/* =========================================================
   v0.24.4 UNIVERSAL THEME READABILITY
   ========================================================= */
:root{
  --gc-safe-text:var(--text,#f7f9fc);
  --gc-safe-muted:var(--muted,#b5c0cf);
  --gc-safe-surface:color-mix(in srgb,var(--panel,#141a24) 94%,transparent);
  --gc-safe-surface2:color-mix(in srgb,var(--panel2,#1c2430) 96%,transparent);
  --gc-safe-line:var(--line,#3d4a5e);
  --gc-safe-shadow:rgba(0,0,0,.45);
  --gc-safe-message:color-mix(in srgb,var(--panel,#141a24) 72%,transparent);
}

/* Universal contrast. Theme may change mood, never legibility. */
body,#app,.layout,.chat{color:var(--gc-safe-text)!important}
.topbar,.quickbar,.rooms,.gcRightPanel,.composer,.actionTray,.emojiPanel,.modalCard,.profilePanel,.authbox,.gcProfileMenu{
  color:var(--gc-safe-text)!important;
  border-color:var(--gc-safe-line)!important;
}
.topbar,.quickbar,.rooms,.gcRightPanel,.composer,.actionTray,.emojiPanel,.gcProfileMenu{
  background-color:var(--gc-safe-surface2)!important;
}
.modalCard,.profilePanel,.authbox{
  background:var(--gc-safe-surface2)!important;
  box-shadow:0 18px 55px var(--gc-safe-shadow)!important;
}
.messages{
  color:var(--gc-safe-text)!important;
  text-shadow:0 1px 1px color-mix(in srgb,var(--gc-safe-shadow) 55%,transparent)!important;
}
.msg .body{
  color:var(--gc-safe-text)!important;
  background:var(--gc-safe-message)!important;
  border:1px solid color-mix(in srgb,var(--gc-safe-line) 65%,transparent)!important;
  border-radius:7px!important;
  padding:5px 7px!important;
  text-shadow:none!important;
}
.msg .name,.userCard strong,.userGroup>header,.gcRightTitle strong,.modalTitle h3,.profileName{
  color:var(--gc-safe-text)!important;
  text-shadow:0 1px 2px var(--gc-safe-shadow)!important;
}
.time,.edited,.uBody small,.userListEmpty,.modalTitle p,.fieldHint,.muted,.replyQuote,.typing{
  color:var(--gc-safe-muted)!important;
}
input,textarea,select{
  color:var(--gc-safe-text)!important;
  background:var(--gc-safe-surface)!important;
  border-color:var(--gc-safe-line)!important;
}
input::placeholder,textarea::placeholder{color:color-mix(in srgb,var(--gc-safe-muted) 82%,transparent)!important}
.userCard,.room,.birthdayRow,.themeTile{
  color:var(--gc-safe-text)!important;
  background-color:var(--gc-safe-surface)!important;
  border-color:color-mix(in srgb,var(--gc-safe-line) 70%,transparent)!important;
}
.liveStats span{color:var(--gc-safe-muted)!important;background:var(--gc-safe-surface)!important}
.liveStats strong{color:var(--gc-safe-text)!important}
.gcRightTabs button,.quickbar button,.msgActions button{color:var(--gc-safe-muted)!important}
.gcRightTabs button.active,.quickbar button.active,.gcRightTabs button:hover,.quickbar button:hover{color:var(--gc-safe-text)!important}

/* Background pictures are allowed to be vivid, but chat stays readable. */
.chat::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,
      color-mix(in srgb,var(--gc-safe-surface2) 64%,transparent) 0%,
      color-mix(in srgb,var(--gc-safe-surface2) 36%,transparent) 42%,
      color-mix(in srgb,var(--gc-safe-surface2) 22%,transparent) 72%,
      color-mix(in srgb,var(--gc-safe-surface2) 48%,transparent) 100%);
}
.chat>*{position:relative;z-index:1}

/* Fixed GewoonChatten logo. Themes may NEVER recolor/distort this. */
.gcLogoBrand{
  flex:0 0 auto!important;
  height:38px!important;
  padding:4px 9px 4px 8px!important;
  display:flex!important;
  align-items:center!important;
  overflow:visible!important;
  border:1px solid rgba(255,255,255,.12)!important;
  border-radius:7px!important;
  background:linear-gradient(180deg,rgba(18,23,32,.96),rgba(7,10,15,.96))!important;
  box-shadow:0 2px 7px rgba(0,0,0,.42)!important;
}
.gcLogoBrand strong{
  display:flex!important;
  align-items:center!important;
  width:auto!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  font-family:Arial Black,Impact,Inter,system-ui,sans-serif!important;
  font-size:0!important;
  line-height:1!important;
  letter-spacing:-1px!important;
  filter:none!important;
}
.gcLogoBrand strong::before,.gcLogoBrand strong::after,
.gcLogoWhite::before,.gcLogoWhite::after,.gcLogoOrange::before,.gcLogoOrange::after{
  content:none!important;
  display:none!important;
}
.gcLogoWhite,.gcLogoOrange{
  display:inline-block!important;
  position:static!important;
  font-family:Arial Black,Impact,Inter,system-ui,sans-serif!important;
  font-size:19px!important;
  font-weight:900!important;
  line-height:1!important;
  letter-spacing:-1px!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
  opacity:1!important;
  filter:none!important;
}
.gcLogoWhite{
  color:#f5f5f5!important;
  -webkit-text-fill-color:#f5f5f5!important;
  text-shadow:
    -1px -1px 0 #111,
     1px -1px 0 #111,
    -1px  1px 0 #111,
     1px  1px 0 #111,
     0 2px 0 #000!important;
}
.gcLogoOrange{
  color:#ff7437!important;
  -webkit-text-fill-color:#ff7437!important;
  text-shadow:
    -1px -1px 0 #151515,
     1px -1px 0 #151515,
    -1px  1px 0 #151515,
     1px  1px 0 #151515,
     2px 0 0 #375bff,
     0 2px 0 #000!important;
}

/* Very light imported themes: keep controls crisp. */
:root[data-chat-theme="light-blue"] .gcLogoBrand,
:root[data-chat-theme="lite"] .gcLogoBrand,
:root[data-chat-theme="notepad"] .gcLogoBrand,
:root[data-chat-theme="scent"] .gcLogoBrand{
  background:linear-gradient(180deg,#202735,#0d121b)!important;
  border-color:#3a465a!important;
}

/* Mobile logo stays one line and never overlaps the icons. */
@media(max-width:900px){
  .gcLogoBrand{height:35px!important;padding:4px 7px!important;max-width:205px!important}
  .gcLogoWhite,.gcLogoOrange{font-size:16px!important;letter-spacing:-.8px!important}
  .gcTopLeft{min-width:0!important}
}
@media(max-width:430px){
  .gcLogoBrand{max-width:180px!important}
  .gcLogoWhite,.gcLogoOrange{font-size:14px!important}
}


/* v0.24.5 mood + Nederlandse status */
.uBody small{
  display:flex!important;
  align-items:center!important;
  gap:5px!important;
  flex-wrap:wrap!important;
}
.uStatus{display:inline-flex!important;align-items:center!important;gap:3px!important;color:var(--gc-safe-muted)!important}
.uMood{
  display:inline-flex!important;
  align-items:center!important;
  max-width:140px!important;
  padding:1px 5px!important;
  border-radius:999px!important;
  background:color-mix(in srgb,var(--gc-accent) 14%,transparent)!important;
  border:1px solid color-mix(in srgb,var(--gc-accent) 26%,transparent)!important;
  color:var(--gc-safe-text)!important;
  font-size:8px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}


/* ============================================================
   v0.25.0 COMPLETE FUNCTION / UI RECOVERY
   ============================================================ */

/* Real logo image: independent of theme and old text CSS */
.gcLogoBrand{
  display:flex!important;align-items:center!important;
  width:220px!important;max-width:26vw!important;height:40px!important;
  padding:3px 7px!important;overflow:hidden!important;
  background:transparent!important;border:0!important;box-shadow:none!important;
}
.gcLogoBrand strong,.gcLogoBrand span{display:none!important}
.gcLogoBrand img{
  display:block!important;width:100%!important;height:auto!important;max-height:34px!important;
  object-fit:contain!important;object-position:left center!important;
  filter:drop-shadow(0 1px 1px #000)!important;
}

/* Room drawer always readable and never covers the full chat */
.rooms{
  left:46px!important;top:52px!important;bottom:0!important;
  width:300px!important;max-width:min(300px,86vw)!important;
  background:var(--gc-safe-surface2,var(--gc-panel2))!important;
  border-right:1px solid var(--gc-safe-line,var(--gc-line))!important;
  box-shadow:14px 0 38px rgba(0,0,0,.48)!important;
  overflow-y:auto!important;overflow-x:hidden!important;
  scrollbar-width:thin!important;
}
.rooms .asideHead{position:sticky!important;top:0!important;z-index:2!important;background:var(--gc-safe-surface2,var(--gc-panel2))!important;padding-bottom:7px!important}
.rooms .room{min-height:60px!important;padding:10px 11px!important;border:1px solid transparent!important}
.rooms .room:hover,.rooms .room.active{border-color:var(--gc-accent)!important;background:color-mix(in srgb,var(--gc-panel) 78%,var(--gc-accent) 12%)!important}
.sidebarBackdrop{inset:52px 0 0 46px!important}

/* Typing indicator always has reserved readable line */
.typing{
  display:flex!important;align-items:center!important;
  min-height:22px!important;height:22px!important;padding:2px 12px!important;
  color:var(--gc-safe-muted)!important;font-size:10px!important;
  background:color-mix(in srgb,var(--gc-safe-surface2) 68%,transparent)!important;
}

/* Expanded reaction picker */
.reactionPicker{
  position:fixed!important;z-index:260!important;width:292px!important;
  padding:8px!important;background:var(--gc-safe-surface2,var(--gc-panel2))!important;
  border:1px solid var(--gc-safe-line,var(--gc-line))!important;border-radius:9px!important;
  box-shadow:0 15px 50px rgba(0,0,0,.58)!important;
}
.reactionPicker.hidden{display:none!important}
.reactionPickerHead{display:flex!important;align-items:center!important;justify-content:space-between!important;padding:2px 3px 7px!important;border-bottom:1px solid var(--gc-safe-line)!important}
.reactionPickerHead b{font-size:10px!important;color:var(--gc-safe-text)!important}
.reactionPickerHead button{width:25px!important;height:25px!important;border:0!important;border-radius:5px!important;background:transparent!important;color:var(--gc-safe-muted)!important;cursor:pointer!important}
.reactionPickerGrid{display:grid!important;grid-template-columns:repeat(8,1fr)!important;gap:3px!important;padding-top:7px!important}
.reactionPickerGrid button{height:31px!important;border:0!important;border-radius:5px!important;background:transparent!important;font-size:19px!important;cursor:pointer!important}
.reactionPickerGrid button:hover{background:color-mix(in srgb,var(--gc-panel) 78%,var(--gc-accent) 15%)!important;transform:scale(1.08)!important}
.reactions button{min-height:25px!important;padding:2px 7px!important;border-radius:13px!important;background:var(--gc-safe-surface)!important}
.reactions button:hover{border-color:var(--gc-accent)!important}

/* Status + mood separate, Dutch and readable */
.uBody small{display:flex!important;align-items:center!important;gap:5px!important;flex-wrap:wrap!important}
.uStatus{color:var(--gc-safe-muted)!important}
.uMood{display:inline-flex!important;padding:1px 5px!important;border-radius:10px!important;background:color-mix(in srgb,var(--gc-accent) 12%,transparent)!important;color:var(--gc-safe-text)!important;font-size:8px!important}

/* Hide scroll track on slim quickbar but retain wheel/touch scroll */
.quickbar{scrollbar-width:none!important}
.quickbar::-webkit-scrollbar{display:none!important}

@media(max-width:900px){
  .gcLogoBrand{width:190px!important;max-width:48vw!important;height:38px!important;padding:3px!important}
  .gcLogoBrand img{max-height:30px!important}
  .rooms{left:0!important;top:58px!important;bottom:58px!important;max-width:min(300px,90vw)!important}
  .sidebarBackdrop{inset:58px 0 58px 0!important}
  .reactionPicker{left:8px!important;right:8px!important;width:auto!important;top:auto!important;bottom:62px!important}
  .reactionPickerGrid{grid-template-columns:repeat(8,1fr)!important}
}
@media(max-width:480px){
  .gcLogoBrand{width:160px!important;max-width:42vw!important}
  .reactionPickerGrid{grid-template-columns:repeat(6,1fr)!important}
}


/* ============================================================
   v0.25.1 — COMPACT CODY-LIKE LAYOUT / PROFILE POLISH
   ============================================================ */
:root{
  --gc-top-h:50px!important;
  --gc-left-w:42px!important;
  --gc-right-w:276px!important;
}

/* Main proportions */
.gcClassicTop,.topbar{height:50px!important;min-height:50px!important;padding:0 8px!important}
.layout{height:calc(100dvh - 50px)!important;grid-template-columns:42px minmax(0,1fr) 276px!important}
.quickbar{width:42px!important;padding:4px 3px!important}
.quickbar button{width:34px!important;min-width:34px!important;height:36px!important;min-height:36px!important}
.quickbar button i{font-size:15px!important}
.rooms{left:42px!important;top:50px!important;width:275px!important}

/* Logo proportion */
.gcLogoBrand{width:205px!important;max-width:25vw!important;height:36px!important;padding:2px 4px!important}
.gcLogoBrand img{max-height:31px!important}

/* Chat is larger/readable, but compact vertically */
.messages{padding:6px 9px 11px!important}
.msg{grid-template-columns:38px minmax(0,1fr)!important;gap:8px!important;padding:7px 4px!important}
.msg .avatar{width:35px!important;height:35px!important}
.name{font-size:13px!important}
.time,.edited{font-size:9px!important}
.body{font-size:14px!important;line-height:1.42!important;padding:4px 6px!important}
.msgActions{margin-top:3px!important}.msgActions button{font-size:9px!important}
.typing{min-height:20px!important;height:20px!important;font-size:10px!important}
.composer{min-height:48px!important;grid-template-columns:36px 36px minmax(0,1fr) 39px!important;padding:5px 7px!important}
.composer>button{width:36px!important;height:36px!important;min-width:36px!important}
.composer textarea{height:36px!important;min-height:36px!important;font-size:14px!important;padding:8px 12px!important}

/* Cody-like narrow userlist */
.gcRightPanel,.users{padding:0 5px 6px!important}
.gcRightTabs{height:36px!important;margin:0 -5px 4px!important;padding:0!important}
.gcRightTabs button{height:35px!important;font-size:13px!important}
.liveStats{margin:3px 0 5px!important}
.liveStats>b{font-size:8px!important;padding:4px!important}
.liveStats>div{padding:3px!important;gap:2px!important}
.liveStats span{font-size:7px!important;padding:3px 1px!important}
.liveStats strong{font-size:10px!important}
.gcRightTitle{height:24px!important}
.gcRightTitle strong{font-size:8px!important}
.gcUserScroll{height:calc(100% - 98px)!important;padding-right:0!important}
.userGroup{margin:3px 0 5px!important}
.userGroup>header{min-height:25px!important;padding:4px 6px!important;border-radius:4px!important}
.userGroup>header b{font-size:8px!important}
.rankCount{font-size:7px!important}
.userCard{
  min-height:42px!important;
  grid-template-columns:32px minmax(0,1fr) auto!important;
  gap:5px!important;padding:4px 5px!important;margin:2px 0!important;
  border-radius:5px!important;
}
.uAvatar{width:30px!important;height:30px!important}
.uAvatar img,.uAvatar>span{width:29px!important;height:29px!important}
.uBody strong{font-size:10px!important}
.uBody small{font-size:7.5px!important;gap:3px!important}
.uMeta{font-size:8px!important;gap:1px!important}
.uMood{font-size:7px!important;padding:0 4px!important;max-width:88px!important}
.newPill{font-size:5.5px!important;padding:1px 3px!important}
.presenceDot{width:7px!important;height:7px!important}

/* Userlist doesn't dominate */
.userCard:hover{transform:none!important}
.userCard[style*="--user-banner"]{
  background-size:cover!important;
  background-position:center!important;
}

/* Profile modal: cleaner, like a modern profile card */
.profileModalCard{
  width:min(560px,94vw)!important;
  max-height:min(760px,90dvh)!important;
  overflow:auto!important;
  padding:0!important;
  border-radius:15px!important;
}
.gcProfile{min-height:0!important;background:var(--gc-safe-surface2)!important}
.gcProfileHero{
  min-height:245px!important;
  padding:28px 20px 18px!important;
  display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
  background-position:center!important;background-size:cover!important;
  position:relative!important;
}
.gcProfileHero::before{
  content:"";position:absolute!important;inset:0!important;
  background:linear-gradient(180deg,rgba(5,9,15,.18),rgba(8,12,18,.72))!important;
  pointer-events:none!important;
}
.gcProfileHero>*{position:relative!important;z-index:1!important}
.gcProfileCounters{position:absolute!important;left:14px!important;top:12px!important;display:flex!important;gap:6px!important}
.gcProfileCounters span,.gcProfileCounters button{
  min-height:29px!important;padding:4px 8px!important;border-radius:15px!important;
  border:1px solid rgba(255,255,255,.18)!important;background:rgba(10,14,20,.62)!important;color:#fff!important;font-size:10px!important
}
.gcProfileCounters button{cursor:pointer!important}
.gcProfileAvatar{width:94px!important;height:94px!important}
.gcProfileAvatar img{width:92px!important;height:92px!important;border:3px solid #fff!important}
.gcProfileIdentity{text-align:center!important;margin-top:7px!important}
.gcProfileIdentity small{display:inline-flex!important;padding:3px 9px!important;border-radius:12px!important;background:var(--profile-accent)!important;color:#10131a!important;font-size:9px!important;font-weight:900!important}
.gcProfileIdentity h2{font-size:25px!important;margin:6px 0 2px!important;color:#fff!important}
.gcProfileIdentity p{font-size:11px!important;margin:0!important;color:#e7ebf2!important}
.gcProfileTabs{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:0!important;background:color-mix(in srgb,var(--profile-accent) 45%,var(--gc-safe-surface2))!important;padding:0 8px!important}
.gcProfileTabs:has([data-profile-tab="photos"]){grid-template-columns:repeat(5,1fr)!important}
.profilePhotoGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.profilePhoto{position:relative;margin:0;min-width:0;aspect-ratio:1;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--panel2)}.profilePhoto a,.profilePhoto img{display:block;width:100%;height:100%}.profilePhoto img{object-fit:cover}.profilePhoto figcaption{position:absolute;left:0;right:0;bottom:0;padding:18px 8px 7px;background:linear-gradient(transparent,#000c);font-size:11px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.profilePhotoTools{position:absolute;top:6px;right:6px;display:flex;gap:5px}.profilePhotoTools button{display:grid;place-items:center;width:30px;height:30px;padding:0;border:1px solid #ffffff33;border-radius:50%;background:#111d;color:#fff;font-size:17px;line-height:1;box-shadow:0 3px 10px #0008}.profilePhotoTools button:hover,.profilePhotoTools button:focus-visible{background:var(--accent);color:#111;outline:none}.profileAlbumActions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px}.profileAlbumActions small{color:var(--muted)}.donorBadge{background:linear-gradient(135deg,#ff4f78,#d82757)!important;color:#fff!important;font-weight:900;box-shadow:0 4px 16px #d8275766}
@media(max-width:540px){.profilePhotoGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.gcProfileTabs:has([data-profile-tab="photos"]){display:flex!important}.profileAlbumActions{align-items:stretch;flex-direction:column}}
.gcProfileTabs button{height:43px!important;border-radius:0!important;font-size:10px!important;border:0!important;background:transparent!important;color:#fff!important}
.gcProfileTabs button.active{background:rgba(255,255,255,.10)!important;box-shadow:inset 0 -2px #fff!important}
.gcProfilePane{padding:13px 18px 18px!important}
.profileInfoRow{display:grid!important;grid-template-columns:minmax(140px,42%) 1fr!important;gap:12px!important;align-items:center!important;padding:10px 3px!important;border-bottom:1px solid var(--gc-safe-line)!important}
.profileInfoRow span{font-size:10px!important;color:var(--gc-safe-text)!important}
.profileInfoRow strong{font-size:10px!important;font-weight:600!important;color:var(--gc-safe-text)!important;text-align:left!important}
.profileBio{padding:12px!important;border-radius:8px!important;background:var(--gc-safe-surface)!important;font-size:11px!important;line-height:1.5!important}
.profileActions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
.profileActions button{min-height:38px!important;font-size:10px!important;border-radius:7px!important}

/* Profile editor: organized sections */
#editProfileModal .modalCard{
  width:min(720px,95vw)!important;max-height:90dvh!important;overflow:auto!important;
}
#editProfileModal .profileForm{
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;
}
#editProfileModal .profileForm>label,
#editProfileModal .profileForm>.field,
#editProfileModal .profileForm>.formGroup{min-width:0!important}
#editProfileModal input,#editProfileModal select,#editProfileModal textarea{width:100%!important;min-height:38px!important;font-size:11px!important}
#editProfileModal textarea{min-height:90px!important}
#editProfileModal .full,#editProfileModal textarea{grid-column:1/-1!important}

/* Avoid visible scrollbars on chrome-like thin bars */
.quickbar,.gcUserScroll{scrollbar-width:none!important}
.quickbar::-webkit-scrollbar,.gcUserScroll::-webkit-scrollbar{display:none!important}

@media(max-width:900px){
  :root{--gc-top-h:58px!important;--gc-right-w:min(286px,92vw)!important}
  .layout{height:calc(var(--gc-vh,100dvh) - 58px)!important;grid-template-columns:1fr!important}
  .gcRightPanel{width:var(--gc-right-w)!important}
  .gcLogoBrand{width:175px!important;max-width:44vw!important}
  .gcLogoBrand img{max-height:28px!important}
  .body{font-size:13.5px!important}
  .profileModalCard{width:96vw!important;max-height:88dvh!important}
  .gcProfileHero{min-height:220px!important}
  #editProfileModal .profileForm{grid-template-columns:1fr!important}
}


/* ============================================================
   v0.26.0 FULL RESPONSIVE LAYOUT REBUILD
   ============================================================ */
:root{
  --gc-top-h:54px!important;
  --gc-left-w:48px!important;
  --gc-right-w:260px!important;
}

/* TOPBAR */
.gcClassicTop,.topbar{
  height:var(--gc-top-h)!important;min-height:var(--gc-top-h)!important;
  padding:0 9px!important;
  display:flex!important;align-items:center!important;justify-content:space-between!important;
}
.gcTopLeft,.gcTopRight{display:flex!important;align-items:center!important;gap:3px!important}
.gcHamburger{width:36px!important;height:36px!important;border-radius:6px!important}
.gcLogoBrand{width:210px!important;max-width:28vw!important;height:38px!important;margin-left:2px!important}
.gcLogoBrand img{max-height:31px!important}
.gcProfileTop{width:38px!important;height:38px!important}

/* APP GRID */
.layout{
  height:calc(100dvh - var(--gc-top-h))!important;
  display:grid!important;
  grid-template-columns:var(--gc-left-w) minmax(0,1fr) var(--gc-right-w)!important;
  gap:0!important;
}
.chat{grid-column:2!important;min-width:0!important}
.gcRightPanel,.users{grid-column:3!important;width:var(--gc-right-w)!important}

/* LEFT NAV - only true primary destinations */
.quickbar{
  width:var(--gc-left-w)!important;height:100%!important;
  padding:7px 4px!important;gap:3px!important;
  display:flex!important;flex-direction:column!important;align-items:center!important;
  overflow-y:auto!important;overflow-x:hidden!important;
  scrollbar-width:none!important;
}
.quickbar::-webkit-scrollbar{display:none!important}
.quickbar [data-duplicate-nav="1"]{display:none!important}
.quickbar button{
  position:relative!important;
  width:38px!important;min-width:38px!important;height:39px!important;min-height:39px!important;
  padding:0!important;margin:0!important;border-radius:6px!important;
}
.quickbar button i{font-size:17px!important}
.quickbar button span{display:none!important}
.quickbar [data-quick="more"]{margin-top:auto!important}
.quickbar button::after{
  content:attr(data-label);
  position:fixed!important;z-index:500!important;
  left:53px!important;
  padding:5px 8px!important;border-radius:5px!important;
  background:#080c13!important;color:#fff!important;
  border:1px solid rgba(255,255,255,.12)!important;
  font-size:10px!important;white-space:nowrap!important;
  opacity:0!important;pointer-events:none!important;transform:translateX(-4px)!important;transition:.12s!important;
}
.quickbar button:hover::after,.quickbar button:focus-visible::after{opacity:1!important;transform:none!important}

/* ROOM DRAWER */
.rooms{
  position:fixed!important;z-index:130!important;
  left:var(--gc-left-w)!important;top:var(--gc-top-h)!important;bottom:0!important;
  width:292px!important;max-width:min(292px,86vw)!important;
  padding:0!important;
  transform:translateX(calc(-100% - var(--gc-left-w)))!important;
  transition:transform .18s ease!important;
  background:var(--gc-safe-surface2,var(--gc-panel2))!important;
  border:0!important;border-right:1px solid var(--gc-safe-line)!important;
  border-radius:0 10px 10px 0!important;
  box-shadow:18px 0 50px rgba(0,0,0,.48)!important;
  overflow:hidden!important;
}
.rooms.mobileOpen{transform:translateX(0)!important}
.rooms .asideHead{
  position:sticky!important;top:0!important;z-index:4!important;
  min-height:50px!important;padding:10px 12px!important;
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  background:var(--gc-safe-surface2)!important;border-bottom:1px solid var(--gc-safe-line)!important;
}
.rooms .roomList,.rooms #rooms{height:calc(100% - 50px)!important;overflow:auto!important;padding:9px!important}
.rooms .room{
  min-height:60px!important;padding:10px 11px!important;margin:0 0 7px!important;
  border-radius:8px!important;background:var(--gc-safe-surface)!important;border:1px solid transparent!important;
}
.rooms .room:hover,.rooms .room.active{border-color:var(--gc-accent)!important}
.sidebarBackdrop{
  position:fixed!important;z-index:120!important;
  inset:var(--gc-top-h) 0 0 var(--gc-left-w)!important;
  background:rgba(1,5,10,.54)!important;
  opacity:0!important;pointer-events:none!important;transition:.18s!important;
}
.sidebarBackdrop.open{opacity:1!important;pointer-events:auto!important}

/* CHAT - readable at 100% */
.messages{padding:8px 11px 13px!important}
.msg{
  grid-template-columns:42px minmax(0,1fr)!important;gap:9px!important;
  padding:8px 5px!important;margin:0!important;
}
.msg .avatar{width:39px!important;height:39px!important}
.name{font-size:13px!important}.time,.edited{font-size:9px!important}
.body{font-size:14px!important;line-height:1.45!important;padding:5px 7px!important}
.msgActions button{font-size:10px!important}
.typing{height:22px!important;min-height:22px!important;font-size:10px!important;padding:2px 11px!important}
.composer{
  min-height:52px!important;
  grid-template-columns:40px 40px minmax(0,1fr) 42px!important;
  gap:6px!important;padding:6px 8px!important;
}
.composer>button{width:40px!important;height:40px!important;min-width:40px!important}
.composer textarea{height:40px!important;min-height:40px!important;font-size:14px!important;padding:9px 13px!important}

/* RIGHT USERLIST: Cody-like, narrow but readable */
.gcRightPanel,.users{padding:0 5px 6px!important}
.gcRightTabs{height:38px!important;margin:0 -5px 5px!important;padding:0!important}
.gcRightTabs button{height:37px!important;font-size:14px!important}
.liveStats{margin:3px 0 6px!important}
.liveStats>b{font-size:8px!important;padding:4px!important}
.liveStats>div{padding:3px!important;gap:2px!important}
.liveStats span{font-size:7px!important;padding:3px 1px!important}
.liveStats strong{font-size:10px!important}
.gcRightTitle{height:26px!important}
.gcRightTitle strong{font-size:8px!important}
.gcUserScroll{height:calc(100% - 103px)!important;scrollbar-width:none!important}
.gcUserScroll::-webkit-scrollbar{display:none!important}
.userGroup{margin:3px 0 6px!important}
.userGroup>header{min-height:27px!important;padding:4px 6px!important}
.userGroup>header b{font-size:8px!important}
.userCard{
  min-height:46px!important;
  grid-template-columns:34px minmax(0,1fr) auto!important;
  gap:6px!important;padding:5px!important;margin:2px 0!important;
  border-radius:6px!important;
}
.uAvatar{width:32px!important;height:32px!important}
.uAvatar img,.uAvatar>span{width:31px!important;height:31px!important}
.uBody strong{font-size:10.5px!important}
.uBody small{font-size:7.5px!important;gap:3px!important}
.uMeta{font-size:8px!important}
.uMood{font-size:7px!important;max-width:84px!important;padding:0 4px!important}
.newPill{font-size:5.5px!important}

/* PLUS / ADDON MENU: larger and actually readable */
.actionTray{
  left:calc(var(--gc-left-w) + 10px)!important;
  bottom:60px!important;
  width:min(740px,calc(100vw - var(--gc-right-w) - var(--gc-left-w) - 30px))!important;
  max-height:min(570px,72vh)!important;
  padding:13px!important;border-radius:11px!important;
}
.addonTrayHead{padding:2px 4px 11px!important}
.addonEyebrow{font-size:8px!important;letter-spacing:.14em!important;color:var(--gc-accent)!important;font-weight:900!important}
.addonTrayHead b{font-size:15px!important}
.addonTrayHead small{font-size:10px!important;margin-top:2px!important}
.addonTrayHead button{width:30px!important;height:30px!important}
.addonTrayGrid{
  grid-template-columns:repeat(7,minmax(76px,1fr))!important;
  gap:9px!important;padding-top:11px!important;
}
.addonTrayGrid button{
  min-height:84px!important;
  padding:8px 5px!important;
  border-radius:8px!important;
  background:color-mix(in srgb,var(--gc-safe-surface) 82%,transparent)!important;
  border:1px solid transparent!important;
}
.addonTrayGrid button:hover{
  border-color:color-mix(in srgb,var(--gc-accent) 62%,var(--gc-safe-line))!important;
  background:color-mix(in srgb,var(--gc-safe-surface) 72%,var(--gc-accent) 10%)!important;
}
.addonIcon{
  width:46px!important;height:46px!important;
  font-size:21px!important;
  border-radius:50%!important;
}
.addonTrayGrid b{font-size:10px!important;line-height:1.2!important}

/* PROFILE: Cody-like layered card, GC own style */
.profileModalCard{
  width:min(600px,95vw)!important;
  max-height:min(820px,92dvh)!important;
  overflow:auto!important;padding:0!important;border-radius:16px!important;
}
.gcProfileHero{
  min-height:270px!important;padding:30px 20px 20px!important;
  display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
  position:relative!important;background-size:cover!important;background-position:center!important;
}
.gcProfileHero::before{
  content:"";position:absolute!important;inset:0!important;
  background:linear-gradient(180deg,rgba(4,8,14,.10),rgba(6,10,18,.78))!important;
}
.gcProfileHero>*{position:relative!important;z-index:1!important}
.gcProfileCounters{
  position:absolute!important;top:13px!important;left:14px!important;
  display:flex!important;gap:6px!important;
}
.gcProfileCounters span,.gcProfileCounters button{
  min-height:30px!important;padding:5px 9px!important;border-radius:16px!important;
  border:1px solid rgba(255,255,255,.20)!important;background:rgba(8,12,18,.62)!important;
  color:#fff!important;font-size:10px!important;
}
.gcProfileAvatar{width:108px!important;height:108px!important}
.gcProfileAvatar img{width:105px!important;height:105px!important;border:3px solid #fff!important}
.gcProfileIdentity{text-align:center!important;margin-top:8px!important}
.gcProfileIdentity h2{font-size:28px!important;margin:6px 0 2px!important;color:#fff!important}
.gcProfileIdentity p{font-size:12px!important;color:#e7edf7!important}
.profileCustomizeCard{
  display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;
  padding:11px 14px!important;background:var(--gc-safe-surface)!important;border-bottom:1px solid var(--gc-safe-line)!important;
}
.profileCustomizeCard.hidden{display:none!important}
.profileCustomizeCard>div{display:flex!important;flex-direction:column!important;gap:2px!important}
.profileCustomizeCard b{font-size:11px!important}.profileCustomizeCard small{font-size:9px!important;color:var(--gc-safe-muted)!important}
.profileCustomizeCard button{min-height:34px!important;padding:6px 11px!important;border-radius:7px!important;border:1px solid var(--gc-safe-line)!important;background:var(--gc-accent)!important;color:var(--gc-bg)!important;font-size:9px!important;font-weight:800!important}
.gcProfileTabs{
  display:grid!important;grid-template-columns:repeat(4,1fr)!important;
  padding:0 8px!important;gap:0!important;
}
.gcProfileTabs button{height:44px!important;font-size:10px!important}
.gcProfilePane{padding:15px 18px 19px!important}
.profileInfoRow{
  display:grid!important;grid-template-columns:minmax(145px,42%) 1fr!important;
  gap:12px!important;padding:11px 3px!important;
}
.profileInfoRow span,.profileInfoRow strong{font-size:10.5px!important}
.profileActions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
.profileActions button{min-height:40px!important;font-size:10px!important}

/* PROFILE EDITOR */
#editProfileModal .modalCard{width:min(760px,96vw)!important;max-height:92dvh!important;overflow:auto!important}
#editProfileModal .profileForm{
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:13px!important;
}
#editProfileModal input,#editProfileModal select,#editProfileModal textarea{
  width:100%!important;min-height:40px!important;font-size:12px!important;
}
#editProfileModal textarea{min-height:100px!important}
#editProfileModal .full,#editProfileModal textarea{grid-column:1/-1!important}

/* TABLET */
@media(max-width:1180px){
  :root{--gc-right-w:244px!important}
  .gcLogoBrand{width:190px!important}
  .actionTray{grid-template-columns:1fr!important;width:min(660px,calc(100vw - 90px))!important}
  .addonTrayGrid{grid-template-columns:repeat(5,minmax(80px,1fr))!important}
}

/* MOBILE / SMALL TABLET */
@media(max-width:900px){
  :root{--gc-top-h:60px!important;--gc-left-w:0px!important;--gc-right-w:min(315px,94vw)!important}
  .layout{height:calc(var(--gc-vh,100dvh) - 60px)!important;grid-template-columns:1fr!important}
  .chat{grid-column:1!important;padding-bottom:58px!important}
  .quickbar{
    position:fixed!important;z-index:100!important;left:0!important;right:0!important;bottom:0!important;top:auto!important;
    width:auto!important;height:58px!important;
    display:flex!important;flex-direction:row!important;justify-content:space-around!important;
    padding:4px 6px!important;border:0!important;border-top:1px solid var(--gc-safe-line)!important;
  }
  .quickbar [data-duplicate-nav="1"]{display:none!important}
  .quickbar button{flex:0 1 54px!important;width:48px!important;min-width:42px!important;height:48px!important}
  .quickbar [data-quick="more"]{margin-top:0!important}
  .quickbar button::after{display:none!important}
  .gcRightPanel{
    position:fixed!important;z-index:140!important;right:0!important;top:60px!important;bottom:58px!important;
    width:var(--gc-right-w)!important;height:auto!important;transform:translateX(104%)!important;
    transition:.18s!important;box-shadow:-18px 0 50px rgba(0,0,0,.5)!important;
  }
  .gcRightPanel.mobileOpen{transform:translateX(0)!important}
  .rooms{left:0!important;top:60px!important;bottom:58px!important;width:min(310px,92vw)!important;max-width:92vw!important}
  .sidebarBackdrop{inset:60px 0 58px 0!important}
  .gcLogoBrand{width:175px!important;max-width:48vw!important}
  .gcLogoBrand img{max-height:28px!important}
  .actionTray{
    left:8px!important;right:8px!important;bottom:66px!important;width:auto!important;
    max-height:68vh!important;padding:11px!important;
  }
  .addonTrayGrid{grid-template-columns:repeat(4,minmax(72px,1fr))!important;gap:8px!important}
  .addonTrayGrid button{min-height:80px!important}
  .addonIcon{width:44px!important;height:44px!important}
  .body{font-size:14px!important}
  .profileModalCard{width:96vw!important;max-height:88dvh!important}
  .gcProfileHero{min-height:235px!important}
  #editProfileModal .profileForm{grid-template-columns:1fr!important}
}

/* VERY SMALL MOBILE */
@media(max-width:520px){
  .gcLogoBrand{width:150px!important;max-width:43vw!important}
  .gcLogoBrand img{max-height:25px!important}
  .addonTrayGrid{grid-template-columns:repeat(3,1fr)!important}
  .addonTrayGrid button{min-height:76px!important}
  .gcProfileHero{min-height:220px!important}
  .gcProfileIdentity h2{font-size:24px!important}
  .profileCustomizeCard{align-items:flex-start!important;flex-direction:column!important}
  .profileCustomizeCard button{width:100%!important}
  .profileActions{grid-template-columns:1fr!important}
}

/* v0.26.2 event-binding/cache compatibility hotfix */


/* ============================================================
   v0.26.3 — MULTI REACTION DISPLAY
   ============================================================ */
.reactions{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  gap:5px!important;
  width:100%!important;
  margin:6px 0 2px!important;
  padding:0!important;
  overflow:visible!important;
}
.reactionChip,.reactions button{
  flex:0 0 auto!important;
  min-width:42px!important;
  min-height:29px!important;
  height:29px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  padding:3px 8px!important;
  margin:0!important;
  border:1px solid color-mix(in srgb,var(--gc-safe-line) 82%,transparent)!important;
  border-radius:15px!important;
  background:color-mix(in srgb,var(--gc-safe-surface) 92%,transparent)!important;
  color:var(--gc-safe-text)!important;
  cursor:pointer!important;
  overflow:visible!important;
  white-space:nowrap!important;
}
.reactionChip:hover,.reactions button:hover{
  border-color:var(--gc-accent)!important;
  background:color-mix(in srgb,var(--gc-safe-surface) 82%,var(--gc-accent) 12%)!important;
}
.reactionChip.mine{
  border-color:var(--gc-accent)!important;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--gc-accent) 45%,transparent) inset!important;
}
.reactionEmoji{
  display:inline-block!important;
  font-size:17px!important;
  line-height:1!important;
}
.reactionCount{
  display:inline-block!important;
  min-width:8px!important;
  font-size:10px!important;
  line-height:1!important;
  color:var(--gc-safe-text)!important;
}
@media(max-width:900px){
  .reactions{gap:4px!important;margin-top:5px!important}
  .reactionChip,.reactions button{min-width:40px!important;min-height:28px!important;height:28px!important;padding:3px 7px!important}
  .reactionEmoji{font-size:16px!important}
  .reactionCount{font-size:9px!important}
}


/* ============================================================
   v0.26.6 — COMPACT MESSAGE ROW + STAFF BADGE
   ============================================================ */
.msg{
  padding-top:8px!important;
  padding-bottom:8px!important;
  min-height:0!important;
}
.msg .meta{
  min-height:20px!important;
  align-items:center!important;
  column-gap:6px!important;
  row-gap:3px!important;
}
.staffMessageBadge{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  height:17px!important;
  min-height:17px!important;
  line-height:17px!important;
  padding:0 6px!important;
  margin:0!important;
  vertical-align:middle!important;
  border-radius:5px!important;
  background:#d9b84f!important;
  color:#17130a!important;
  border:1px solid rgba(255,255,255,.18)!important;
  font-size:9px!important;
  font-weight:900!important;
  letter-spacing:.35px!important;
  text-shadow:none!important;
  box-shadow:none!important;
}
.msg .body{
  margin-top:3px!important;
  padding:5px 8px!important;
  line-height:1.35!important;
}
.reactions{
  gap:4px!important;
  margin:4px 0 0!important;
}
.reactionChip,.reactions button{
  min-width:34px!important;
  min-height:22px!important;
  height:22px!important;
  padding:0 6px!important;
  border-radius:11px!important;
  line-height:20px!important;
}
.reactionChip .reactionEmoji,.reactions button{
  font-size:14px!important;
}
.reactions b,.reactionCount{
  font-size:10px!important;
  line-height:1!important;
}
.msgActions{
  margin-top:3px!important;
}
@media(max-width:600px){
  .msg{padding-top:7px!important;padding-bottom:7px!important}
  .staffMessageBadge{height:16px!important;min-height:16px!important;line-height:16px!important;font-size:8.5px!important}
}

/* R15.19: realtime typindicator in de userlist. */
.userCard .uBody{min-width:0}
.gcUserTypingBadge{display:inline-flex;align-items:center;gap:3px;width:max-content;max-width:100%;height:23px;margin-top:4px;padding:2px 8px 2px 6px;border:1px solid #55cfff70;border-radius:12px;background:linear-gradient(90deg,#0d3145e8,#10293be8);color:#a8edff;box-shadow:0 0 0 1px #55cfff12,0 4px 12px #0003;opacity:0;transform:translateY(2px);transition:opacity .16s ease,transform .16s ease;pointer-events:none;white-space:nowrap}
.gcUserTypingBadge.active{opacity:1;transform:translateY(0)}.gcUserTypingBadge svg{display:block;flex:0 0 15px;width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.gcUserTypingBadge span{margin:0 2px 0 1px;font:800 9px/1.1 Inter,system-ui,Segoe UI,sans-serif!important;letter-spacing:.01em;color:#e7faff}.gcUserTypingBadge i{display:block;flex:0 0 3px;width:3px;height:3px;border-radius:50%;background:#68ddff;animation:gcUserTypingDot 1s infinite ease-in-out}.gcUserTypingBadge i:nth-of-type(2){animation-delay:.15s}.gcUserTypingBadge i:nth-of-type(3){animation-delay:.3s}
.userCard.isTyping{border-color:#55cfff99!important;box-shadow:inset 0 0 0 1px #55cfff20,0 0 15px #21bde51c!important}
@keyframes gcUserTypingDot{0%,70%,100%{opacity:.3;transform:translateY(0)}35%{opacity:1;transform:translateY(-2px)}}
@media(prefers-reduced-motion:reduce){.gcUserTypingBadge,.gcUserTypingBadge i{animation:none!important;transition:none!important}}


/* ============================================================
   v0.26.7 — NO LOGIN FLASH + CODY-LIKE REACTION FX + COMPACT ROWS
   ============================================================ */
html.gc-booting body{
  background:#080d14!important;
}
html.gc-booting #app,
html.gc-booting #auth{
  visibility:hidden!important;
  opacity:0!important;
}
html.gc-booting body::after{
  content:"GewoonChatten laden…";
  position:fixed;
  inset:0;
  z-index:9999;
  display:grid;
  place-items:center;
  color:#b8c2d1;
  background:#080d14;
  font:600 13px/1.2 Inter,Arial,sans-serif;
}
html.gc-booted #app,
html.gc-booted #auth{
  transition:opacity .12s ease;
}

/* Short Cody-style message rows: actions no longer consume vertical space. */
.msg{
  position:relative!important;
  grid-template-columns:32px minmax(0,1fr)!important;
  gap:6px!important;
  padding:4px 5px!important;
  min-height:40px!important;
  align-items:start!important;
}
.msg .avatar{
  width:30px!important;
  height:30px!important;
  font-size:10px!important;
}
.msg .meta{
  min-height:16px!important;
  height:auto!important;
  gap:5px!important;
  line-height:16px!important;
}
.msg .name{font-size:11px!important;line-height:16px!important}
.msg .time,.msg .edited{font-size:8px!important;line-height:16px!important}
.staffMessageBadge{
  height:15px!important;
  min-height:15px!important;
  line-height:15px!important;
  padding:0 5px!important;
  font-size:7.5px!important;
}
.msg .body{
  margin-top:1px!important;
  padding:2px 5px!important;
  min-height:0!important;
  font-size:12.5px!important;
  line-height:1.28!important;
  border-radius:5px!important;
}
.reactions{
  margin:2px 0 0!important;
  gap:3px!important;
}
.reactionChip,.reactions button{
  min-width:31px!important;
  min-height:20px!important;
  height:20px!important;
  padding:0 5px!important;
  line-height:18px!important;
}
.reactionEmoji{font-size:13px!important}
.reactionCount,.reactions b{font-size:9px!important}

/* Desktop actions float over the row instead of making it taller. */
.msgActions{
  position:absolute!important;
  right:8px!important;
  top:3px!important;
  z-index:6!important;
  display:flex!important;
  gap:4px!important;
  margin:0!important;
  padding:3px 5px!important;
  border-radius:7px!important;
  background:color-mix(in srgb,var(--gc-safe-surface2) 94%,transparent)!important;
  border:1px solid color-mix(in srgb,var(--gc-safe-line) 70%,transparent)!important;
  box-shadow:0 5px 18px rgba(0,0,0,.28)!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transform:translateY(-2px)!important;
}
.msg:hover .msgActions,.msg:focus-within .msgActions{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transform:none!important;
}
.msgActions button{
  font-size:8.5px!important;
  line-height:18px!important;
  min-height:18px!important;
  padding:0 3px!important;
}

/* Flying reaction overlay, matching the behavior from the reference video. */
.reactionFxLayer{
  position:fixed!important;
  inset:0!important;
  z-index:245!important;
  overflow:hidden!important;
  pointer-events:none!important;
}
.reactionFxParticle{
  position:absolute!important;
  display:block!important;
  transform:translate(-50%,-50%) scale(var(--fx-scale,1))!important;
  font-size:25px!important;
  line-height:1!important;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.42))!important;
  will-change:transform,opacity!important;
  animation-name:gcReactionFly!important;
  animation-timing-function:cubic-bezier(.16,.78,.25,1)!important;
  animation-fill-mode:forwards!important;
}
@keyframes gcReactionFly{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.45)}
  10%{opacity:1}
  55%{opacity:1;transform:translate(calc(-50% + var(--fx-x)*.65),calc(-50% + var(--fx-y)*.55)) scale(var(--fx-scale,1))}
  100%{opacity:0;transform:translate(calc(-50% + var(--fx-x) + var(--fx-drift)),calc(-50% + var(--fx-y))) scale(calc(var(--fx-scale,1)*1.18))}
}
@media(max-width:900px){
  .msg{grid-template-columns:31px minmax(0,1fr)!important;padding:4px!important;min-height:39px!important}
  .msg .avatar{width:29px!important;height:29px!important}
  .msgActions{
    right:4px!important;
    top:2px!important;
  }
  .reactionFxParticle{font-size:23px!important}
}
@media(hover:none),(pointer:coarse){
  .msgActions{
    position:static!important;
    width:max-content!important;
    margin-top:2px!important;
    padding:0!important;
    border:0!important;
    box-shadow:none!important;
    background:transparent!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:none!important;
  }
  .msgActions button{font-size:8px!important}
}


/* ============================================================
   v0.26.8 — FULL SCREEN MULTI REACTION RAIN
   ============================================================ */
.reactionFxLayer{
  position:fixed!important;
  inset:0!important;
  z-index:9998!important;
  overflow:hidden!important;
  pointer-events:none!important;
  contain:layout style paint!important;
}
.reactionFxParticle{
  position:absolute!important;
  display:block!important;
  width:auto!important;
  height:auto!important;
  opacity:0;
  font-size:27px!important;
  line-height:1!important;
  transform:translate(-50%,-50%) scale(.35) rotate(0deg)!important;
  transform-origin:center!important;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.52))!important;
  will-change:transform,opacity!important;
  animation:gcReactionScatter 1.8s cubic-bezier(.12,.72,.22,1) forwards!important;
  animation-duration:inherit;
  user-select:none!important;
}
.reactionFxParticleLate{font-size:24px!important}
@keyframes gcReactionScatter{
  0%{
    opacity:0;
    transform:translate(-50%,-50%) scale(.28) rotate(0deg);
  }
  8%{
    opacity:1;
    transform:translate(-50%,-50%) scale(calc(var(--fx-scale,1) * .72)) rotate(0deg);
  }
  28%{opacity:1}
  70%{
    opacity:.96;
    transform:
      translate(
        calc(-50% + var(--fx-dx,0px) * .72),
        calc(-50% + var(--fx-dy,-180px) * .72)
      )
      scale(var(--fx-scale,1))
      rotate(calc(var(--fx-rot,0deg) * .7));
  }
  100%{
    opacity:0;
    transform:
      translate(
        calc(-50% + var(--fx-dx,0px)),
        calc(-50% + var(--fx-dy,-180px))
      )
      scale(calc(var(--fx-scale,1) * 1.12))
      rotate(var(--fx-rot,0deg));
  }
}

/* Fallback voor browsers die CSS-var berekeningen in transforms beperkt uitvoeren. */
@supports not (transform:translate(calc(1px * .5),0)){
  @keyframes gcReactionScatter{
    0%{opacity:0;transform:translate(-50%,-50%) scale(.35)}
    10%{opacity:1}
    65%{opacity:1;transform:translate(-50%,-150px) scale(var(--fx-scale,1))}
    100%{opacity:0;transform:translate(-50%,-260px) scale(var(--fx-scale,1))}
  }
}
@media(max-width:700px){
  .reactionFxParticle{font-size:23px!important}
  .reactionFxParticleLate{font-size:21px!important}
}


/* ============================================================
   v0.26.9 — READABLE CODY-LIKE USERLIST + CHAT
   ============================================================ */
:root{--gc-right-w:270px!important}
.layout{grid-template-columns:var(--gc-left-w,48px) minmax(0,1fr) var(--gc-right-w)!important}
.gcRightPanel,.users{width:var(--gc-right-w)!important;min-width:var(--gc-right-w)!important;padding:0 7px 8px!important}

.gcRightTabs{height:44px!important;margin:0 -7px 7px!important}
.gcRightTabs button{height:43px!important;font-size:17px!important}
.liveStats{margin:4px 0 9px!important;border-radius:6px!important}
.liveStats>b{font-size:9px!important;line-height:18px!important;padding:3px 5px!important}
.liveStats>div{padding:4px!important;gap:3px!important}
.liveStats span{min-height:37px!important;font-size:8px!important;padding:4px 2px!important;line-height:1.15!important}
.liveStats strong{display:block!important;font-size:13px!important;line-height:15px!important;margin-bottom:2px!important}

.gcRightTitle{height:28px!important;padding:0 2px!important}
.gcRightTitle strong{font-size:9px!important;letter-spacing:.06em!important}
.userGroup{margin:4px 0 9px!important}
.userGroup>header{min-height:31px!important;height:31px!important;padding:5px 8px!important;border-radius:6px!important}
.userGroup>header b{font-size:10px!important;line-height:19px!important}
.rankCount{min-width:20px!important;height:18px!important;line-height:18px!important;padding:0 6px!important;font-size:9px!important;border-radius:10px!important}

.userCard{min-height:58px!important;height:auto!important;grid-template-columns:44px minmax(0,1fr) auto!important;gap:8px!important;padding:7px!important;margin:3px 0!important;border-radius:7px!important;align-items:center!important}
.uAvatar{width:42px!important;height:42px!important;min-width:42px!important}
.uAvatar img,.uAvatar>span{width:41px!important;height:41px!important}
.presenceDot{width:9px!important;height:9px!important;border-width:2px!important}
.uBody{min-width:0!important;display:flex!important;flex-direction:column!important;justify-content:center!important;gap:2px!important}
.uName{min-height:17px!important;line-height:17px!important}
.uBody strong{font-size:13px!important;line-height:17px!important;font-weight:800!important}
.uBody small{min-height:14px!important;font-size:9.5px!important;line-height:14px!important;gap:4px!important}
.uStatus{font-size:9px!important;line-height:14px!important}
.uMood{max-width:105px!important;min-height:14px!important;padding:0 5px!important;font-size:8px!important;line-height:14px!important}
.uMeta{min-width:38px!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:3px!important;font-size:11px!important}
.uMeta i,.uMeta span{font-size:12px!important;line-height:16px!important}
.newPill{font-size:7px!important;line-height:13px!important;padding:0 4px!important}
.gcUserScroll{height:calc(100% - 121px)!important;padding-right:0!important;overflow-y:auto!important;overflow-x:hidden!important}

.messages{padding:5px 8px 10px!important}
.msg{grid-template-columns:43px minmax(0,1fr)!important;gap:8px!important;min-height:54px!important;padding:6px!important;border-bottom:1px solid color-mix(in srgb,var(--gc-safe-line) 60%,transparent)!important;align-items:start!important}
.msg .avatar{width:40px!important;height:40px!important;min-width:40px!important;border-radius:50%!important}
.msg .msgMain{min-width:0!important;padding-top:0!important}
.msg .meta{display:flex!important;align-items:center!important;min-height:18px!important;line-height:18px!important;gap:6px!important;margin:0!important}
.msg .name{font-size:13px!important;line-height:18px!important;font-weight:800!important}
.msg .time,.msg .edited{font-size:9px!important;line-height:18px!important}
.staffMessageBadge{height:16px!important;min-height:16px!important;line-height:16px!important;padding:0 6px!important;font-size:8px!important;border-radius:5px!important}
.msg .body{display:inline-block!important;width:auto!important;max-width:min(920px,92%)!important;min-height:0!important;margin:1px 0 0!important;padding:2px 5px!important;font-size:13px!important;line-height:1.34!important;border-radius:4px!important;border-color:color-mix(in srgb,var(--gc-safe-line) 42%,transparent)!important;background:color-mix(in srgb,var(--gc-safe-message) 54%,transparent)!important}
.replyQuote{width:max-content!important;max-width:min(720px,90%)!important;margin:2px 0!important;padding:3px 7px!important;font-size:10px!important;line-height:1.3!important;border-left:2px solid var(--gc-accent)!important}
.reactions{width:auto!important;margin:3px 0 0!important;gap:4px!important}
.reactionChip,.reactions button{min-width:35px!important;min-height:23px!important;height:23px!important;padding:0 6px!important;border-radius:12px!important}
.reactionEmoji{font-size:14px!important}.reactionCount{font-size:9px!important}
.msgActions{top:5px!important;right:8px!important;min-height:25px!important;padding:3px 6px!important}
.msgActions button{min-height:18px!important;font-size:9px!important;line-height:18px!important}
.msg.system,.msg.systemMessage,.systemMsg{min-height:32px!important;padding-top:4px!important;padding-bottom:4px!important}
.msg.system .avatar,.msg.systemMessage .avatar{width:27px!important;height:27px!important;min-width:27px!important}

@media(max-width:1100px) and (min-width:901px){:root{--gc-right-w:265px!important}}
@media(max-width:900px){
  :root{--gc-right-w:min(300px,92vw)!important}
  .gcRightPanel{width:var(--gc-right-w)!important;min-width:0!important}
  .userCard{min-height:60px!important;grid-template-columns:45px minmax(0,1fr) auto!important}
  .uAvatar{width:43px!important;height:43px!important}.uAvatar img,.uAvatar>span{width:42px!important;height:42px!important}
  .uBody strong{font-size:13.5px!important}.uBody small{font-size:10px!important}
  .msg{grid-template-columns:39px minmax(0,1fr)!important;min-height:50px!important;padding:5px!important}
  .msg .avatar{width:36px!important;height:36px!important;min-width:36px!important}
  .msg .name{font-size:12.5px!important}.msg .body{font-size:13px!important;max-width:96%!important}
}
@media(max-width:520px){
  .userCard{min-height:58px!important;padding:6px!important}
  .uBody strong{font-size:13px!important}
  .gcRightTabs button{font-size:16px!important}
}


/* ============================================================
   v0.27.0 — ADDON CENTER / CODY-LIKE FUNCTION CONTROL
   ============================================================ */
.addonTrayQuick{
  display:flex!important;align-items:center!important;gap:10px!important;
  margin:0 2px 10px!important;padding:9px!important;
  border:1px solid var(--gc-safe-line)!important;border-radius:8px!important;
  background:color-mix(in srgb,var(--gc-safe-surface) 88%,var(--gc-accent) 5%)!important;
}
.addonSettingsLaunch{
  display:inline-flex!important;align-items:center!important;gap:7px!important;
  min-height:34px!important;padding:6px 11px!important;border-radius:7px!important;
  border:1px solid color-mix(in srgb,var(--gc-accent) 50%,var(--gc-safe-line))!important;
  background:var(--gc-safe-surface2)!important;color:var(--gc-safe-text)!important;font-weight:800!important;
}
.addonTrayQuick small{font-size:9px!important;color:var(--gc-safe-muted)!important}

.addonCenterCard{width:min(820px,96vw)!important;max-height:90dvh!important;overflow:hidden!important;padding:18px!important}
.addonCenterTabs{display:flex!important;gap:4px!important;margin:10px 0!important;padding:4px!important;border:1px solid var(--gc-safe-line)!important;border-radius:8px!important;background:var(--gc-safe-surface)!important;overflow:auto!important}
.addonCenterTabs button{flex:1 0 auto!important;min-height:36px!important;padding:5px 12px!important;border:0!important;border-radius:6px!important;background:transparent!important;color:var(--gc-safe-muted)!important;font-size:10px!important;font-weight:800!important}
.addonCenterTabs button.active{background:var(--gc-accent)!important;color:var(--gc-bg)!important}
.addonCenterContent{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important;max-height:58dvh!important;overflow:auto!important;padding:2px 3px 8px!important}
.addonSettingCard{border:1px solid var(--gc-safe-line)!important;border-radius:9px!important;background:var(--gc-safe-surface)!important;padding:11px!important}
.addonSettingCard.disabled{opacity:.48!important}
.addonSettingHead{display:grid!important;grid-template-columns:42px minmax(0,1fr) auto!important;gap:9px!important;align-items:center!important;padding-bottom:9px!important;border-bottom:1px solid var(--gc-safe-line)!important}
.addonSettingIcon{display:grid!important;place-items:center!important;width:40px!important;height:40px!important;border-radius:50%!important;background:var(--gc-safe-surface2)!important;border:1px solid var(--gc-safe-line)!important;font-size:18px!important}
.addonSettingHead b{display:block!important;font-size:11px!important;color:var(--gc-safe-text)!important}
.addonSettingHead small{display:block!important;margin-top:2px!important;font-size:8.5px!important;line-height:1.35!important;color:var(--gc-safe-muted)!important}
.addonSettingHead>i{font-style:normal!important;font-size:7px!important;padding:2px 5px!important;border-radius:8px!important;background:rgba(54,200,120,.12)!important;color:#72dda4!important}
.addonSettingFields{display:flex!important;flex-direction:column!important;gap:7px!important;padding-top:9px!important}
.addonToggle{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:9px!important;min-height:30px!important;font-size:9px!important}
.addonToggle input{width:38px!important;height:20px!important;accent-color:var(--gc-accent)!important}
.addonRange{display:flex!important;flex-direction:column!important;gap:5px!important;font-size:9px!important}
.addonRange span{display:flex!important;justify-content:space-between!important}.addonRange input{width:100%!important;accent-color:var(--gc-accent)!important}
.addonNoFields{font-size:8.5px!important;color:var(--gc-safe-muted)!important;padding:4px 0!important}
.addonCenterFooter{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;padding-top:10px!important;border-top:1px solid var(--gc-safe-line)!important}
.addonCenterFooter span{font-size:8.5px!important;color:var(--gc-safe-muted)!important}

/* Messages: denser rows closer to the Cody reference. */
.msg{grid-template-columns:37px minmax(0,1fr)!important;gap:7px!important;min-height:45px!important;padding:4px 5px!important}
.msg .avatar{width:34px!important;height:34px!important;min-width:34px!important}
.msg .meta{min-height:16px!important;line-height:16px!important}
.msg .name{font-size:12px!important;line-height:16px!important}
.msg .time,.msg .edited{font-size:8px!important;line-height:16px!important}
.msg .body{font-size:12.5px!important;line-height:1.28!important;padding:1px 4px!important;margin-top:1px!important}
.messageSeen{font-size:8px!important;color:var(--gc-safe-muted)!important;margin-left:3px!important}
.reactions{margin-top:2px!important}
.msgActions{top:3px!important}

/* Reaction effect: larger, obvious, multi-wave, full chat area. */
.reactionFxLayer{position:fixed!important;inset:0!important;z-index:9998!important;pointer-events:none!important;overflow:hidden!important}
.reactionFxParticle{
  position:absolute!important;
  display:block!important;
  font-size:clamp(26px,2.1vw,42px)!important;
  line-height:1!important;
  opacity:0!important;
  filter:drop-shadow(0 4px 7px rgba(0,0,0,.5))!important;
  will-change:transform,opacity!important;
  animation:gcReactionCodySweep 2600ms cubic-bezier(.17,.72,.22,1) forwards!important;
}
.reactionFxParticle.late{font-size:clamp(23px,1.8vw,36px)!important}
@keyframes gcReactionCodySweep{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.62) rotate(0deg)}
  7%{opacity:1;transform:translate(-50%,-50%) scale(calc(var(--rs,1)*.86)) rotate(0deg)}
  42%{opacity:1}
  78%{opacity:.96;transform:translate(calc(-50% + var(--rx)*.72),calc(-50% + var(--ry)*.72)) scale(var(--rs,1)) rotate(calc(var(--rr)*.7))}
  100%{opacity:0;transform:translate(calc(-50% + var(--rx)),calc(-50% + var(--ry))) scale(calc(var(--rs,1)*1.10)) rotate(var(--rr))}
}

@media(max-width:700px){
  .addonCenterContent{grid-template-columns:1fr!important}
  .addonCenterCard{padding:12px!important}
  .addonCenterFooter{align-items:stretch!important;flex-direction:column!important}
  .reactionFxParticle{font-size:28px!important}.reactionFxParticle.late{font-size:24px!important}
}

/* v0.28.0 Cody parity */
.quickbar{width:48px!important;min-width:48px!important;max-width:48px!important}.quickbarExpand,[data-quick="more"]{display:none!important}
.gcProfileMenuCody{width:300px!important;padding:0!important;border-radius:8px!important;overflow:hidden!important;background:#2b3140!important;border:1px solid #3c465a!important;box-shadow:0 18px 48px #0009!important}.profileMenuIdentity{display:grid!important;grid-template-columns:48px 1fr 20px!important;gap:10px!important;align-items:center!important;padding:12px!important;border-bottom:1px solid #424b5e!important}.profileMenuIdentity img{width:46px!important;height:46px!important;border-radius:50%!important;object-fit:cover!important}.profileMenuIdentity small{display:block!important;color:#e4bd53!important;font-size:9px!important;font-weight:900!important}.profileMenuIdentity b{display:block!important;font-size:16px!important}.profileMenuIdentity span{display:block!important;font-size:10px!important;color:#b0b9c9!important}.profileMenuIdentity>i{color:#6fce2d!important}.gcProfileMenuCody button,.gcProfileMenuCody a{width:100%!important;min-height:48px!important;display:grid!important;grid-template-columns:28px 1fr 18px!important;align-items:center!important;gap:8px!important;padding:8px 14px!important;border:0!important;border-bottom:1px solid rgba(255,255,255,.05)!important;border-radius:0!important;background:transparent!important;color:#f2f4f8!important;text-align:left!important;text-decoration:none!important}.gcProfileMenuCody button:hover,.gcProfileMenuCody a:hover{background:#353d50!important}.gcProfileMenuCody b{font-size:12px!important}.gcProfileMenuCody>button>span,.gcProfileMenuCody>a>span{font-size:17px!important;color:#78a2ff!important}.gcProfileMenuCody>button>i,.gcProfileMenuCody>a>i{text-align:right!important;font-size:22px!important;font-style:normal!important}
.typing{height:0!important;min-height:0!important;padding:0 12px!important;overflow:hidden!important;transition:.14s!important;background:color-mix(in srgb,var(--gc-safe-surface2) 94%,transparent)!important;color:var(--gc-accent)!important;font-size:11px!important;font-weight:700!important}.typing:not(:empty){height:30px!important;min-height:30px!important;padding:7px 12px!important;border-top:1px solid var(--gc-safe-line)!important}.pmTyping{height:0;overflow:hidden;color:var(--gc-accent);font-size:10px;font-weight:700;padding:0 10px;transition:.14s}.pmTyping.active{height:27px;padding:6px 10px;border-top:1px solid var(--gc-safe-line)}
.reactionFxLayer{position:fixed!important;inset:0!important;pointer-events:none!important;overflow:hidden!important;z-index:2147482000!important}.reactionFxParticle{position:fixed!important;left:var(--hcr-left)!important;bottom:-10px!important;top:auto!important;width:var(--hcr-size)!important;height:var(--hcr-size)!important;margin-left:calc(var(--hcr-size)/-2)!important;opacity:0!important;animation:hcrBurstLift var(--hcr-duration) cubic-bezier(.18,.72,.24,1) var(--hcr-delay) forwards!important;will-change:transform,opacity!important}.reactionFxFloat{display:block;width:100%;height:100%;animation:hcrBurstSway var(--hcr-duration) ease-in-out var(--hcr-delay) forwards}.reactionFxImg{display:block;width:100%;height:100%;object-fit:contain}@keyframes hcrBurstLift{0%{opacity:0;transform:translate3d(0,0,0) scale(.82)}8%{opacity:1}78%{opacity:1}100%{opacity:0;transform:translate3d(0,var(--hcr-dy),0) scale(var(--hcr-scale)) rotate(var(--hcr-rot))}}@keyframes hcrBurstSway{0%{transform:translate3d(0,0,0)}32%{transform:translate3d(var(--hcr-wave1),0,0)}60%{transform:translate3d(var(--hcr-wave2),0,0)}100%{transform:translate3d(var(--hcr-wave3),0,0) rotate(var(--hcr-rot))}}.codyReactionChoice{width:58px!important;height:58px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:2px!important;background:transparent!important;border:0!important;border-radius:10px!important}.codyReactionChoice:hover{background:rgba(255,255,255,.08)!important}.codyReactionChoice img{width:34px!important;height:34px!important;object-fit:contain!important}.codyReactionChoice span{font-size:8px!important;color:var(--gc-safe-muted)!important}.reactionEmoji img{width:18px!important;height:18px!important;object-fit:contain!important;display:block!important}
.notificationCard{width:min(560px,94vw)!important}.notificationHead{display:flex!important;justify-content:space-between!important;gap:12px!important;align-items:center!important;margin-bottom:12px!important}.notificationHead>div:last-child{display:flex!important;gap:6px!important}.notificationList{display:flex!important;flex-direction:column!important;gap:6px!important;max-height:62vh!important;overflow:auto!important}.notification{display:grid!important;grid-template-columns:40px minmax(0,1fr) 34px!important;gap:9px!important;align-items:center!important;padding:10px!important;border:1px solid var(--gc-safe-line)!important;border-radius:9px!important;background:var(--gc-safe-surface)!important}.notification.unread{border-color:var(--gc-accent)!important}.notificationIcon{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:var(--gc-safe-surface2)}.notification p{margin:2px 0!important;font-size:10px!important}.notification small{font-size:8px!important;color:var(--gc-safe-muted)!important}.notification>button{width:30px;height:30px;border:0;background:transparent;color:#c9d1de}.dangerBtn{background:#4d1f28!important;color:#ffbbc4!important;border:1px solid #75333f!important;border-radius:7px!important;padding:7px 10px!important}
.inboxCard{width:min(620px,94vw)!important;padding:16px!important}.privateInboxList{display:flex!important;flex-direction:column!important;gap:6px!important;max-height:60vh!important;overflow:auto!important}.inboxConversation{display:grid!important;grid-template-columns:minmax(0,1fr) 34px!important;gap:4px!important;align-items:center!important;border:1px solid var(--gc-safe-line)!important;border-radius:10px!important;background:var(--gc-safe-surface)!important}.inboxOpen{min-width:0!important;display:grid!important;grid-template-columns:44px minmax(0,1fr) auto!important;gap:9px!important;align-items:center!important;padding:8px!important;border:0!important;background:transparent!important;color:var(--gc-safe-text)!important;text-align:left!important}.inboxOpen>span:nth-child(2){min-width:0!important}.inboxOpen b{font-size:12px!important}.inboxOpen small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px!important;color:var(--gc-safe-muted)!important}.inboxDelete{width:28px;height:28px;border:0;background:transparent;color:#abb6c5;font-size:18px}
.spotifyNowCard{width:min(560px,94vw)!important}.spotifyStatus{margin:12px 0!important}.spotifyTrack{display:grid!important;grid-template-columns:70px 1fr auto!important;gap:12px!important;align-items:center!important;padding:12px!important;border-radius:12px!important;background:linear-gradient(135deg,#173c2a,#10231b)!important;border:1px solid #2b6749!important}.spotifyTrack img{width:68px;height:68px;border-radius:8px;object-fit:cover}.spotifyTrack small{display:block;color:#75db9a;font-size:8px;font-weight:900}.spotifyTrack b{display:block;font-size:14px;margin:3px 0}.spotifyTrack span{font-size:10px;color:#b8c6be}.spotifyTrack a{color:#90e8ad;text-decoration:none}.spotifyIdle{padding:14px;border:1px solid var(--gc-safe-line);border-radius:9px}.spotifyPrefs{display:grid;grid-template-columns:1fr 1fr;gap:10px}.spotifyPrefs label{display:flex;flex-direction:column;gap:5px;font-size:10px}.spotifyActions{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}.spotifyActions a{text-decoration:none}.spotifyMini{font-size:15px!important;color:#1ed760!important;text-shadow:0 0 6px #1ed76055!important}@media(max-width:600px){.gcProfileMenuCody{width:min(310px,94vw)!important}.notificationHead{align-items:flex-start!important;flex-direction:column!important}.spotifyPrefs{grid-template-columns:1fr}.spotifyTrack{grid-template-columns:58px 1fr!important}.spotifyTrack img{width:56px;height:56px}.inboxOpen{grid-template-columns:40px minmax(0,1fr) auto!important}}
.pushSettings{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;margin:14px 0;padding:14px;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:rgba(255,255,255,.035)}.pushSettings>div:first-child{display:flex;flex-direction:column;gap:4px}.pushSettings small{color:var(--muted,#aab2c1);line-height:1.4}.pushSettings>p,.pushPreferenceFields{grid-column:1/-1}.pushPreferenceFields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.08)}.pushPreferenceFields label{display:flex;align-items:center;gap:8px;min-height:38px}.pushPreferenceFields button{grid-column:1/-1;justify-self:start}@media(max-width:640px){.pushSettings{grid-template-columns:1fr}.pushSettings>button{justify-self:stretch}.pushPreferenceFields{grid-template-columns:1fr}}
.donationCard{max-width:520px;text-align:center;padding:34px}.donationHeart{width:72px;height:72px;display:grid;place-items:center;margin:0 auto 16px;border-radius:50%;font-size:38px;color:#fff;background:linear-gradient(145deg,#ff4773,#c72050);box-shadow:0 12px 36px #d92e5c55}.donationCard h2{margin:8px 0 10px}.donationCard p{color:var(--muted);line-height:1.6}.donationPay{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;margin-top:12px;min-height:48px;padding:0 20px}
.pmMessageTools{display:flex;justify-content:flex-end;gap:4px;margin-top:5px;opacity:.72}.pmMessageTools button{min-width:26px;height:24px;border:1px solid var(--gc-safe-line);border-radius:999px;background:color-mix(in srgb,var(--gc-safe-surface2) 88%,transparent);color:var(--gc-safe-muted);font-size:10px;padding:0 7px}.pmMessageTools button:hover{opacity:1;color:var(--gc-safe-text);border-color:var(--gc-accent)}@media(max-width:600px){.pmMessageTools{opacity:1}.pmMessageTools button{min-width:30px;height:28px}}
.gcProfileMenuCody .hidden{display:none!important}

/* GC user action menu v0.36.1 */
.gcUserMenuOverlay{position:fixed;inset:0;z-index:10020;display:grid;place-items:center;padding:16px;background:#030711d9;backdrop-filter:blur(5px)}
.gcUserMenu{position:relative;width:min(430px,96vw);max-height:min(720px,90vh);overflow:auto;padding:18px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(155deg,var(--panel),var(--surface));box-shadow:0 30px 90px #000b}
.gcUserMenu>header{display:flex;align-items:center;gap:12px;padding:2px 40px 15px 2px;border-bottom:1px solid var(--line)}
.gcUserMenu>header .uAvatar{width:50px;height:50px;flex:0 0 50px}.gcUserMenu>header b{display:block;font-size:17px}.gcUserMenu>header small{display:block;margin-top:3px;color:var(--muted)}
.gcUserMenuClose{position:absolute;right:12px;top:11px;width:34px;height:34px;border:0;border-radius:10px;background:var(--card);color:var(--text);font-size:22px}
.gcUserMenuGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}.gcUserMenuGrid button{display:flex;align-items:center;gap:10px;min-height:47px;padding:10px 12px;border:1px solid var(--line);border-radius:11px;background:var(--card);color:var(--text);text-align:left}.gcUserMenuGrid button:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 13%,var(--card))}.gcUserMenuGrid button.danger{color:#ff8791;border-color:#7c3842}
@media(max-width:520px){.gcUserMenuOverlay{align-items:end;padding:0}.gcUserMenu{width:100%;max-height:86vh;border-radius:20px 20px 0 0;padding:16px 14px calc(16px + env(safe-area-inset-bottom))}.gcUserMenuGrid{grid-template-columns:1fr 1fr}.gcUserMenuGrid button{min-height:50px}}
/* GC mobile parity v0.36.2 */
@media(max-width:900px){
  .composer textarea{height:40px!important;min-height:40px!important;max-height:40px!important;overflow-y:hidden!important;scrollbar-width:none!important;line-height:20px!important;padding:9px 11px!important}
  .composer textarea::-webkit-scrollbar{display:none!important}
  .quickbar{gap:0!important;padding:4px 2px calc(4px + env(safe-area-inset-bottom))!important;overflow-x:hidden!important}
  .quickbar button{flex:1 1 0!important;min-width:0!important;max-width:none!important}
  .gcTopIcon{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:29px!important;height:34px!important;padding:0!important}
  .gcTopRight{gap:1px!important}.gcLogoImg{max-width:142px!important}
}
@media(max-width:410px){.gcTopIcon{width:27px!important;font-size:14px!important}.gcLogoImg{max-width:137px!important}}
/* GC mobile composer alignment v0.36.3 */
@media(max-width:900px){
  .chat{padding-bottom:0!important}
  .messages{padding-bottom:66px!important}
  .composer{position:fixed!important;left:0!important;right:0!important;bottom:58px!important;z-index:99!important;width:100%!important;height:56px!important;min-height:56px!important;margin:0!important;padding:8px 10px!important;align-items:center!important}
  .composer textarea{height:40px!important;min-height:40px!important;max-height:40px!important;white-space:nowrap!important;overflow:hidden!important;line-height:22px!important;padding:8px 12px!important}
  .composer>button{align-self:center!important}
}

/* GC responsive theme backgrounds v0.36.4 */
html,body{background-position:center center!important;background-repeat:no-repeat!important;background-size:cover!important}
#app,.layout{background-color:transparent!important}
@media(max-width:900px){
  html,body,#app,.layout,.chat{background-attachment:scroll!important}
  html,body{background-position:center center!important;background-size:cover!important}
  #app,.layout{background-image:none!important;background-color:transparent!important}
  .chat{background-position:center center!important;background-size:cover!important;background-repeat:no-repeat!important}
}
@media(max-width:520px) and (orientation:portrait){
  .chat{background-position:center center!important}
}


/* ============================================================
   v0.38.0 — REALTIME COMPLETION
   ============================================================ */
.typing{
  color:var(--gc-accent)!important;
  font-weight:800!important;
  letter-spacing:.01em!important;
}
.typing:not(:empty)::before{
  content:"•••";
  display:inline-block;
  margin-right:7px;
  letter-spacing:2px;
  animation:gcTypingDots 1.1s ease-in-out infinite;
}
@keyframes gcTypingDots{
  0%,100%{opacity:.38;transform:translateY(0)}
  50%{opacity:1;transform:translateY(-1px)}
}
.pmTyping.active::before{
  content:"•••";
  margin-right:6px;
  letter-spacing:2px;
  animation:gcTypingDots 1.1s ease-in-out infinite;
}
.messageSeen{
  display:inline-flex!important;
  align-items:center!important;
  min-height:16px!important;
  margin-left:4px!important;
  padding:0 5px!important;
  border-radius:8px!important;
  background:color-mix(in srgb,var(--gc-safe-surface2) 88%,var(--gc-accent) 8%)!important;
  color:var(--gc-safe-muted)!important;
  font-size:8px!important;
  line-height:16px!important;
  white-space:nowrap!important;
}


/* ============================================================
   v0.39.0 — INTERACTIE / PRIVACY
   ============================================================ */
:root{--gc-private-notify:#5c8cff;--gc-friend-notify:#d56cff}
.gcTopIcon{position:relative!important}
.gcNotifyPrivate .badge{background:var(--gc-private-notify)!important;color:#fff!important;box-shadow:0 0 10px color-mix(in srgb,var(--gc-private-notify) 60%,transparent)!important}
.gcNotifyFriend .badge{background:var(--gc-friend-notify)!important;color:#fff!important;box-shadow:0 0 10px color-mix(in srgb,var(--gc-friend-notify) 60%,transparent)!important}
.gcTopIcon .badge{position:absolute!important;right:-5px!important;top:-5px!important;min-width:16px!important;height:16px!important;padding:0 4px!important;border-radius:9px!important;font-size:9px!important;line-height:16px!important;font-weight:900!important}

.notificationColorPrefs{display:grid!important;grid-template-columns:minmax(0,1fr) auto auto auto!important;gap:9px!important;align-items:center!important;padding:10px!important;margin-bottom:10px!important;border:1px solid var(--gc-safe-line)!important;border-radius:9px!important;background:var(--gc-safe-surface)!important}
.notificationColorPrefs>div b,.notificationColorPrefs>div small{display:block!important}.notificationColorPrefs>div small{font-size:8.5px!important;color:var(--gc-safe-muted)!important;margin-top:2px!important}.notificationColorPrefs label{display:flex!important;align-items:center!important;gap:6px!important;font-size:9px!important}.notificationColorPrefs input[type=color]{width:32px!important;height:28px!important;padding:2px!important;border:1px solid var(--gc-safe-line)!important;background:transparent!important;border-radius:6px!important}

.friendRequestRow{grid-template-columns:44px minmax(0,1fr) auto!important}.friendRequestActions{display:flex!important;gap:5px!important}.friendRequestActions button{min-height:30px!important;border-radius:7px!important;padding:4px 8px!important;font-size:9px!important;font-weight:800!important}.friendAccept{background:#1d5a3e!important;color:#baf5d8!important;border:1px solid #347c59!important}.friendDecline{background:#52232d!important;color:#ffc2ca!important;border:1px solid #793745!important}.friendsSectionTitle{margin:8px 0 5px!important;color:var(--gc-accent)!important;font-size:9px!important;font-weight:900!important;text-transform:uppercase!important;letter-spacing:.08em!important}

.composerInputWrap{position:relative!important;min-width:0!important}.composerInputWrap textarea{width:100%!important;height:100%!important}.mentionSuggestions{position:absolute!important;left:0!important;bottom:calc(100% + 7px)!important;width:min(360px,85vw)!important;max-height:320px!important;overflow:auto!important;padding:6px!important;border:1px solid var(--gc-safe-line)!important;border-radius:10px!important;background:var(--gc-safe-surface2)!important;box-shadow:0 16px 48px #000a!important;z-index:300!important}.mentionSuggestions button{width:100%!important;display:grid!important;grid-template-columns:38px 1fr!important;gap:8px!important;align-items:center!important;padding:7px!important;border:0!important;border-radius:7px!important;background:transparent!important;color:var(--gc-safe-text)!important;text-align:left!important}.mentionSuggestions button:hover,.mentionSuggestions button.active{background:color-mix(in srgb,var(--gc-accent) 15%,var(--gc-safe-surface2))!important}.mentionSuggestions .uAvatar{width:34px!important;height:34px!important}.mentionSuggestions b,.mentionSuggestions small{display:block!important}.mentionSuggestions b{font-size:11px!important}.mentionSuggestions small{font-size:8.5px!important;color:var(--gc-safe-muted)!important}

.pm{position:relative!important}.pm>div:nth-of-type(1){padding-right:88px!important;min-height:36px!important}.pmMessageTools{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:4px!important;width:auto!important;min-height:28px!important;margin:3px 0 0 auto!important;padding:2px 4px!important;background:transparent!important;border:0!important}.pmMessageTools button{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-width:27px!important;height:27px!important;padding:2px 6px!important;border:1px solid var(--gc-safe-line)!important;border-radius:14px!important;background:var(--gc-safe-surface2)!important;color:var(--gc-safe-muted)!important;font-size:10px!important}.pmMessageTools [data-pm-react]{color:var(--gc-safe-text)!important}.pmReceipt{font-weight:700!important}.pmReceipt.read{color:#66dca3!important}

@media(max-width:700px){
 .notificationColorPrefs{grid-template-columns:1fr 1fr!important}.notificationColorPrefs>div,.notificationColorPrefs>button{grid-column:1/-1!important}
 .friendRequestRow{grid-template-columns:40px minmax(0,1fr)!important}.friendRequestActions{grid-column:1/-1!important;padding-left:48px!important}
}

/* ============================================================
   v0.40.0 — INTERACTIE POLISH
   ============================================================ */
.searchHidden{display:none!important}
.profileExtrasPanel{margin-top:8px!important;padding:12px!important;border:1px solid var(--gc-safe-line)!important;border-radius:10px!important;background:var(--gc-safe-surface2)!important}.profileExtrasPanel h4{margin:0 0 3px!important}.profileExtrasPanel>p{margin:0 0 10px!important;color:var(--gc-safe-muted)!important;font-size:9px!important}
.profileExtrasPanel .notificationColorPrefs{margin:0!important;background:transparent!important;border:0!important;padding:0!important}

.reportCenterCard{width:min(720px,95vw)!important;max-height:88vh!important;overflow:auto!important}.reportTabs{display:flex!important;gap:5px!important;margin:12px 0!important;border-bottom:1px solid var(--gc-safe-line)!important}.reportTabs button{padding:9px 12px!important;border:0!important;border-bottom:2px solid transparent!important;background:transparent!important;color:var(--gc-safe-muted)!important;font-weight:800!important}.reportTabs button.active{color:var(--gc-safe-text)!important;border-bottom-color:var(--gc-accent)!important}.reportGrid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important}.reportPane label{display:flex!important;flex-direction:column!important;gap:5px!important;font-size:10px!important}.reportPane input,.reportPane select,.reportPane textarea{width:100%!important}.reportPane textarea{min-height:130px!important}.reportActions{display:flex!important;justify-content:flex-end!important;margin-top:9px!important}.reportListItem{width:100%!important;display:grid!important;grid-template-columns:38px minmax(0,1fr) 28px!important;align-items:center!important;gap:9px!important;padding:9px!important;margin-bottom:6px!important;border:1px solid var(--gc-safe-line)!important;border-radius:9px!important;background:var(--gc-safe-surface)!important;color:var(--gc-safe-text)!important;text-align:left!important}.reportListItem small{display:block!important;color:var(--gc-safe-muted)!important;font-size:8.5px!important}.reportTypeIcon{font-size:20px!important}.reportThreadHead{display:grid!important;gap:3px!important;padding:10px!important;border:1px solid var(--gc-safe-line)!important;border-radius:9px!important}.reportMessages{display:flex!important;flex-direction:column!important;gap:7px!important;margin:10px 0!important}.reportMessages article{max-width:84%!important;padding:9px!important;border-radius:10px!important;border:1px solid var(--gc-safe-line)!important}.reportMessages article.staffReply{margin-left:auto!important;background:color-mix(in srgb,var(--gc-accent) 12%,var(--gc-safe-surface))!important}.reportMessages p{margin:4px 0!important;white-space:pre-wrap!important}.reportMessages small{color:var(--gc-safe-muted)!important;font-size:8px!important}#reportReplyForm{display:grid!important;grid-template-columns:1fr auto!important;gap:7px!important}#reportReplyForm textarea{min-height:70px!important}

.privateGrouped{border-left:3px solid var(--gc-private-notify)!important}
.reactionPicker{max-width:min(430px,94vw)!important}.reactionPickerGrid{display:grid!important;grid-template-columns:repeat(6,minmax(50px,1fr))!important;gap:5px!important}.codyReactionChoice{width:auto!important;min-width:0!important;height:66px!important}.codyReactionChoice img{width:38px!important;height:38px!important}.codyReactionChoice span{font-size:9px!important}
.pmMessageTools{background:color-mix(in srgb,var(--gc-safe-surface2) 80%,transparent)!important;border:1px solid var(--gc-safe-line)!important;border-radius:14px!important;padding:3px 5px!important}
.mentionSuggestions{width:min(330px,88vw)!important;max-height:240px!important}.mentionSuggestions button{min-height:46px!important}.mentionSuggestions .uAvatar img{width:34px!important;height:34px!important;border-radius:50%!important;object-fit:cover!important}
#topPrivateBtn{display:inline-flex}
@media(max-width:700px){.reportGrid{grid-template-columns:1fr!important}.reactionPickerGrid{grid-template-columns:repeat(3,1fr)!important}#reportReplyForm{grid-template-columns:1fr!important}}

/* ============================================================
   v0.41.0 — RESPONSIVE UI/UX POLISH
   ============================================================ */
.gcRightTabs{grid-template-columns:repeat(6,minmax(0,1fr))!important}
.gcRightTabs>button{min-width:0!important}

/* Compact private messages */
.pmMessages{padding:12px!important}
.pm{display:flex!important;width:100%!important;margin:0 0 10px!important}
.pm.mine{justify-content:flex-end!important}.pm.theirs{justify-content:flex-start!important}
.pmBubble{position:relative!important;width:min(78%,680px)!important;min-width:220px!important;padding:10px 104px 10px 12px!important;border:1px solid var(--gc-safe-line)!important;border-radius:12px!important;background:var(--gc-safe-surface2)!important}
.pm.mine .pmBubble{background:color-mix(in srgb,var(--gc-safe-surface2) 76%,var(--gc-accent) 12%)!important}
.pmMeta{display:flex!important;gap:8px!important;align-items:center!important;flex-wrap:wrap!important;margin-bottom:5px!important;color:var(--gc-safe-muted)!important;font-size:9px!important}
.pmBody{min-height:20px!important;color:var(--gc-safe-text)!important;font-size:13px!important;line-height:1.38!important;word-break:break-word!important}
.pmMessageTools{position:absolute!important;top:8px!important;right:8px!important;display:flex!important;width:auto!important;min-height:30px!important;gap:4px!important;margin:0!important;padding:2px 4px!important;align-items:center!important;border:1px solid var(--gc-safe-line)!important;border-radius:16px!important;background:color-mix(in srgb,var(--gc-safe-surface) 92%,transparent)!important;box-shadow:0 4px 14px #0003!important}
.pmMessageTools button{flex:0 0 auto!important;width:27px!important;min-width:27px!important;height:27px!important;padding:0!important;border:0!important;border-radius:50%!important;background:transparent!important}
.pmMessageTools button:hover{background:color-mix(in srgb,var(--gc-accent) 15%,var(--gc-safe-surface2))!important}
.pmMessageTools .pmReactionChip{width:auto!important;min-width:34px!important;padding:0 7px!important;border-radius:13px!important}
.pmReceipt{font-size:8.5px!important}.pmReceipt.read{color:#60d79a!important}

/* Profile tabs */
.profileEditorTabbed{width:min(920px,96vw)!important;height:min(790px,92vh)!important;max-height:92vh!important;display:flex!important;flex-direction:column!important;overflow:hidden!important}
.profileEditorHead{flex:0 0 auto!important}
.profileEditorTabs{flex:0 0 auto!important;display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:5px!important;margin:10px 0 12px!important;padding:4px!important;border:1px solid var(--gc-safe-line)!important;border-radius:10px!important;background:var(--gc-safe-surface)!important}
.profileEditorTabs button{display:flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;min-height:40px!important;padding:7px 9px!important;border:0!important;border-radius:7px!important;background:transparent!important;color:var(--gc-safe-muted)!important;font-weight:800!important}
.profileEditorTabs button.active{background:color-mix(in srgb,var(--gc-accent) 14%,var(--gc-safe-surface2))!important;color:var(--gc-safe-text)!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gc-accent) 35%,transparent)!important}
.profileTabbedForm{flex:1 1 auto!important;min-height:0!important;display:flex!important;flex-direction:column!important;overflow:hidden!important}
.profileTabPane{display:none!important;flex:1 1 auto!important;min-height:0!important;overflow:auto!important;padding:2px 4px 14px 2px!important;scrollbar-width:thin!important}
.profileTabPane.active{display:block!important}
.profileSectionHead{display:flex!important;flex-direction:column!important;gap:2px!important;margin:0 0 12px!important;padding:10px 12px!important;border-radius:9px!important;background:var(--gc-safe-surface2)!important;border:1px solid var(--gc-safe-line)!important}
.profileSectionHead b{font-size:13px!important}.profileSectionHead small{color:var(--gc-safe-muted)!important;font-size:9px!important}
.profileFieldsGrid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
.profileFieldsGrid label{min-width:0!important}.profileFieldsGrid .wide{grid-column:1/-1!important}
.profileCheck{display:grid!important;grid-template-columns:auto 1fr!important;gap:10px!important;align-items:center!important;min-height:72px!important;padding:10px!important;border:1px solid var(--gc-safe-line)!important;border-radius:9px!important;background:var(--gc-safe-surface)!important}
.profileCheck span b,.profileCheck span small{display:block!important}.profileCheck span small{margin-top:2px!important;color:var(--gc-safe-muted)!important;font-size:8.5px!important}
.privacyInfoBox{display:flex!important;gap:10px!important;align-items:flex-start!important;padding:11px!important;border:1px solid color-mix(in srgb,var(--gc-accent) 28%,var(--gc-safe-line))!important;border-radius:9px!important;background:color-mix(in srgb,var(--gc-accent) 7%,var(--gc-safe-surface))!important}
.privacyInfoBox>span{font-size:22px!important}.privacyInfoBox p{margin:3px 0 0!important;color:var(--gc-safe-muted)!important;font-size:9px!important}
.profileExtrasGrid{display:grid!important;grid-template-columns:1fr!important;gap:10px!important}
.profileExtraCard{display:grid!important;grid-template-columns:48px minmax(0,1fr) auto!important;gap:12px!important;align-items:center!important;padding:14px!important;border:1px solid var(--gc-safe-line)!important;border-radius:10px!important;background:var(--gc-safe-surface)!important}
.profileExtraCard p{margin:3px 0 0!important;color:var(--gc-safe-muted)!important;font-size:9px!important}
.profileExtraIcon{width:42px!important;height:42px!important;display:grid!important;place-items:center!important;border-radius:10px!important;background:color-mix(in srgb,var(--gc-accent) 13%,var(--gc-safe-surface2))!important;font-size:20px!important}
.notificationPersonalizer{grid-template-columns:48px minmax(150px,1fr) minmax(170px,220px) minmax(170px,220px) auto!important}
.notificationColorChoice{display:flex!important;flex-direction:column!important;gap:5px!important;min-width:0!important;font-size:9px!important}
.colorPickerWrap{display:grid!important;grid-template-columns:46px 1fr!important;gap:7px!important;align-items:center!important;min-height:38px!important;padding:4px 7px 4px 4px!important;border:1px solid var(--gc-safe-line)!important;border-radius:8px!important;background:var(--gc-safe-surface2)!important}
.colorPickerWrap input[type="color"]{display:block!important;width:42px!important;min-width:42px!important;height:30px!important;padding:1px!important;border:0!important;border-radius:6px!important;background:transparent!important;cursor:pointer!important}
.colorPickerWrap b{font-family:ui-monospace,Consolas,monospace!important;font-size:10px!important;color:var(--gc-safe-text)!important}
.profileEditorActions{flex:0 0 auto!important;display:grid!important;grid-template-columns:1fr auto auto!important;gap:8px!important;align-items:center!important;margin-top:8px!important;padding-top:10px!important;border-top:1px solid var(--gc-safe-line)!important}
#profileSaveHint{color:var(--gc-safe-muted)!important;font-size:8.5px!important}

/* Report center */
.reportCenterCard{width:min(820px,96vw)!important;max-height:90vh!important;overflow:hidden!important;display:flex!important;flex-direction:column!important}
.reportTabs{flex:0 0 auto!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:5px!important;margin:12px 0!important;padding:4px!important;border:1px solid var(--gc-safe-line)!important;border-radius:9px!important;background:var(--gc-safe-surface)!important}
.reportTabs button{min-height:38px!important;padding:7px 10px!important;border:0!important;border-radius:6px!important}
.reportTabs button.active{background:color-mix(in srgb,var(--gc-accent) 15%,var(--gc-safe-surface2))!important;border:0!important;color:var(--gc-safe-text)!important}
.reportPane{flex:1 1 auto!important;min-height:0!important;overflow:auto!important;padding:2px!important}
.reportGrid{grid-template-columns:minmax(180px,.8fr) minmax(240px,1.2fr)!important;gap:10px!important}
.reportPane label{font-size:9px!important;font-weight:700!important}
.reportPane input,.reportPane select,.reportPane textarea{min-height:40px!important;padding:9px 10px!important;border-radius:8px!important;border:1px solid var(--gc-safe-line)!important;background:var(--gc-safe-surface)!important;color:var(--gc-safe-text)!important}
#reportReason{min-height:170px!important;resize:vertical!important}
.reportActions{margin-top:10px!important}
.reportThreadHead{grid-template-columns:1fr auto!important;align-items:center!important}
.reportThreadHead>div small{display:block!important;margin-top:3px!important}
.reportStatus{display:inline-flex!important;min-height:26px!important;align-items:center!important;padding:0 9px!important;border-radius:13px!important;background:var(--gc-safe-surface2)!important;font-size:8.5px!important;font-weight:900!important;text-transform:uppercase!important}
.reportMessages article.userReply{margin-right:auto!important;background:var(--gc-safe-surface)!important}
.reportMessages article.staffReply{margin-left:auto!important;border-color:color-mix(in srgb,var(--gc-accent) 35%,var(--gc-safe-line))!important}
#reportReplyForm{position:sticky!important;bottom:0!important;padding-top:8px!important;background:var(--gc-safe-surface2)!important}

/* Responsive: desktop, tablet, mobile, small mobile */
@media(max-width:900px){
  .notificationPersonalizer{grid-template-columns:48px 1fr 1fr!important}
  .notificationPersonalizer .wideText{grid-column:2/-1!important}
  .notificationPersonalizer>button{grid-column:2/-1!important;justify-self:start!important}
}
@media(max-width:720px){
  .profileEditorTabbed{width:100vw!important;height:100dvh!important;max-height:100dvh!important;border-radius:0!important}
  .profileEditorTabs{grid-template-columns:repeat(5,minmax(64px,1fr))!important;overflow-x:auto!important;scrollbar-width:none!important}
  .profileEditorTabs button{min-width:64px!important;flex-direction:column!important;gap:2px!important;font-size:8px!important}
  .profileFieldsGrid{grid-template-columns:1fr!important}.profileFieldsGrid .wide{grid-column:auto!important}
  .profileEditorActions{grid-template-columns:1fr 1fr!important}#profileSaveHint{grid-column:1/-1!important}
  .notificationPersonalizer{grid-template-columns:44px 1fr!important}.notificationPersonalizer .wideText{grid-column:2!important}.notificationColorChoice,.notificationPersonalizer>button{grid-column:1/-1!important}
  .pmBubble{width:92%!important;min-width:0!important;padding:10px 12px 46px!important}.pmMessageTools{top:auto!important;right:8px!important;bottom:7px!important}
  .reportGrid{grid-template-columns:1fr!important}.reportTabs{grid-template-columns:1fr!important}
  .reportCenterCard{width:100vw!important;height:100dvh!important;max-height:100dvh!important;border-radius:0!important}
}
@media(max-width:420px){
  .gcRightTabs{grid-template-columns:repeat(6,minmax(38px,1fr))!important}
  .pmMessages{padding:8px!important}.pmBubble{width:96%!important}
}


/* ============================================================
   v0.42.0 — PROFILE STUDIO / LIVE PREVIEW / AVATARS
   ============================================================ */
.messageAvatar{
  overflow:hidden!important;
  padding:0!important;
  background:var(--gc-safe-surface2)!important;
}
.messageAvatar img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  border-radius:inherit!important;
}

/* Main profile studio shell */
.profileStudioCard{
  width:min(1180px,97vw)!important;
  height:min(850px,94vh)!important;
  max-height:94vh!important;
  overflow:hidden!important;
  display:flex!important;
  flex-direction:column!important;
  padding:16px!important;
}
.profileStudioHeader{
  flex:0 0 auto!important;
  min-height:68px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:16px!important;
  padding:0 38px 10px 2px!important;
  border-bottom:1px solid var(--gc-safe-line)!important;
}
.profileStudioHeader small{
  color:var(--gc-accent)!important;
  font-size:9px!important;
  font-weight:900!important;
  letter-spacing:.12em!important;
}
.profileStudioHeader h2{margin:3px 0 2px!important;font-size:23px!important}
.profileStudioHeader p{margin:0!important;color:var(--gc-safe-muted)!important;font-size:10px!important}
.profileStudioLive{
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
  padding:6px 9px!important;
  border:1px solid var(--gc-safe-line)!important;
  border-radius:999px!important;
  background:var(--gc-safe-surface2)!important;
  color:var(--gc-safe-muted)!important;
  font-size:8px!important;
  font-weight:900!important;
  white-space:nowrap!important;
}
.profileStudioLive i{
  width:7px!important;height:7px!important;border-radius:50%!important;background:#42d887!important;
  box-shadow:0 0 10px #42d887!important;
}
.profileStudioLayout{
  flex:1 1 auto!important;
  min-height:0!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 340px!important;
  gap:14px!important;
  padding-top:12px!important;
}
.profileStudioEditor{
  min-width:0!important;
  min-height:0!important;
  display:flex!important;
  flex-direction:column!important;
}
.profileEditorTabs{margin:0 0 10px!important}
.profileTabbedForm{min-height:0!important}
.profileTabPane{padding-right:7px!important}
.profileEditorActions{
  min-height:54px!important;
  margin-top:6px!important;
  padding-top:8px!important;
}

/* Uiterlijk upload blocks */
.profileUploadHero,.profileBannerUpload{
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr) auto!important;
  gap:11px!important;
  align-items:center!important;
  margin-bottom:12px!important;
  padding:11px!important;
  border:1px solid var(--gc-safe-line)!important;
  border-radius:10px!important;
  background:var(--gc-safe-surface)!important;
}
.profileUploadHero small,.profileBannerUpload small{display:block!important;margin-top:2px!important;color:var(--gc-safe-muted)!important;font-size:8.5px!important}
.profileAvatarMiniPreview{
  width:52px!important;height:52px!important;overflow:hidden!important;border-radius:50%!important;
  border:2px solid var(--gc-accent)!important;background:var(--gc-safe-surface2)!important;
}
.profileAvatarMiniPreview img{width:100%!important;height:100%!important;object-fit:cover!important}
.advancedUrlField small{display:block!important;margin-top:3px!important;color:var(--gc-safe-muted)!important;font-size:8px!important}

/* Live preview side */
.profileLivePanel{
  min-width:0!important;
  min-height:0!important;
  overflow:auto!important;
  padding:10px!important;
  border:1px solid var(--gc-safe-line)!important;
  border-radius:12px!important;
  background:color-mix(in srgb,var(--gc-safe-surface) 92%,#000 8%)!important;
  scrollbar-width:thin!important;
}
.profileLivePanelHead{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:8px!important;
  margin-bottom:8px!important;
}
.profileLivePanelHead b,.profileLivePanelHead small{display:block!important}
.profileLivePanelHead small{margin-top:2px!important;color:var(--gc-safe-muted)!important;font-size:8px!important}
.profileLivePanelHead>span{
  padding:3px 6px!important;border-radius:999px!important;background:#17452f!important;color:#85efb5!important;
  font-size:7px!important;font-weight:900!important;
}
.profileLiveCard{
  --preview-accent:#dcb85f;
  position:relative!important;
  overflow:hidden!important;
  border:1px solid color-mix(in srgb,var(--preview-accent) 35%,var(--gc-safe-line))!important;
  border-radius:14px!important;
  background:var(--gc-safe-surface2)!important;
  box-shadow:0 14px 36px #0004!important;
  transition:.18s ease!important;
}
.profileLiveCover{
  height:112px!important;
  background-size:cover!important;
  background-position:center!important;
  border-bottom:1px solid var(--gc-safe-line)!important;
}
.profileLiveIdentity{
  display:flex!important;
  align-items:flex-end!important;
  gap:10px!important;
  padding:0 13px!important;
  margin-top:-28px!important;
}
.profileLiveAvatar{
  width:72px!important;height:72px!important;flex:0 0 auto!important;overflow:hidden!important;border-radius:50%!important;
  border:4px solid var(--gc-safe-surface2)!important;background:var(--gc-safe-surface)!important;
  box-shadow:0 0 0 2px var(--preview-accent)!important;
}
.profileLiveAvatar img{width:100%!important;height:100%!important;object-fit:cover!important}
.profileLiveNames{min-width:0!important;padding-bottom:4px!important}
.profileLiveNames>div{display:flex!important;align-items:center!important;gap:6px!important}
.profileLiveNames strong{font-size:16px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
.profileLiveNames>span{display:block!important;margin-top:2px!important;color:var(--gc-safe-muted)!important;font-size:9px!important}
.profileLiveBadge{
  padding:2px 5px!important;border-radius:5px!important;background:var(--preview-accent)!important;color:#111!important;
  font-size:7px!important;font-weight:950!important;
}
.profileLiveMood{display:flex!important;gap:5px!important;align-items:center!important;padding:10px 14px 0!important;color:var(--gc-safe-muted)!important;font-size:9px!important}
.profileLiveMood span{color:#40d985!important}
.profileLiveCard>p{margin:9px 14px!important;color:var(--gc-safe-text)!important;font-size:10px!important;line-height:1.45!important;white-space:pre-wrap!important}
.profileLiveMeta{display:grid!important;grid-template-columns:1fr!important;gap:3px!important;padding:0 14px 10px!important;color:var(--gc-safe-muted)!important;font-size:8.5px!important}
.profileLiveInterests{display:flex!important;gap:5px!important;flex-wrap:wrap!important;padding:0 14px 14px!important}
.profileLiveInterests span{padding:4px 7px!important;border-radius:999px!important;background:color-mix(in srgb,var(--preview-accent) 12%,var(--gc-safe-surface))!important;border:1px solid color-mix(in srgb,var(--preview-accent) 24%,var(--gc-safe-line))!important;font-size:7.5px!important}

/* Preview variants */
.profileLiveCard.card-glass{background:color-mix(in srgb,var(--gc-safe-surface2) 70%,transparent)!important;backdrop-filter:blur(12px)!important}
.profileLiveCard.card-compact .profileLiveCover{height:70px!important}
.profileLiveCard.card-compact .profileLiveAvatar{width:58px!important;height:58px!important}
.profileLiveCard.card-hero .profileLiveCover{height:150px!important}
.profileLiveCard.frame-gold .profileLiveAvatar{box-shadow:0 0 0 3px #e5bd52,0 0 18px #e5bd5266!important}
.profileLiveCard.frame-neon .profileLiveAvatar{box-shadow:0 0 0 2px #48dffc,0 0 20px #48dffca0!important}
.profileLiveCard.frame-vip .profileLiveAvatar{box-shadow:0 0 0 3px #c574ff,0 0 20px #c574ff88!important}
.profileLiveCard.effect-glow #profileLiveName{text-shadow:0 0 9px currentColor!important}
.profileLiveCard.effect-gradient #profileLiveName{
  background:linear-gradient(90deg,var(--preview-accent),#fff,var(--preview-accent))!important;
  -webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;
}
.profileLiveCard.effect-pulse #profileLiveName{animation:gcProfileNamePulse 1.4s ease-in-out infinite!important}
@keyframes gcProfileNamePulse{50%{opacity:.58;text-shadow:0 0 12px var(--preview-accent)}}

/* Chat preview */
.profileChatPreview{margin-top:13px!important;padding-top:11px!important;border-top:1px solid var(--gc-safe-line)!important}
.profileChatPreviewMessage{
  display:grid!important;grid-template-columns:42px minmax(0,1fr)!important;gap:8px!important;
  padding:9px!important;border:1px solid var(--gc-safe-line)!important;border-radius:9px!important;background:var(--gc-safe-surface2)!important;
}
.profileChatPreviewAvatar{width:40px!important;height:40px!important;overflow:hidden!important;border-radius:50%!important;border:1px solid var(--preview-accent,#dcb85f)!important}
.profileChatPreviewAvatar img{width:100%!important;height:100%!important;object-fit:cover!important}
.profileChatPreviewMeta{display:flex!important;align-items:center!important;gap:5px!important;min-width:0!important}
.profileChatPreviewMeta b{font-size:10px!important}
.profileChatPreviewMeta span{padding:2px 4px!important;border-radius:4px!important;background:var(--gc-accent)!important;color:#111!important;font-size:6.5px!important;font-weight:900!important}
.profileChatPreviewMeta small{color:var(--gc-safe-muted)!important;font-size:7px!important}
.profileChatPreviewMessage p{margin:3px 0 0!important;font-size:9px!important}

/* Responsive all device classes */
@media(max-width:1020px){
  .profileStudioLayout{grid-template-columns:minmax(0,1fr) 280px!important}
  .notificationPersonalizer{grid-template-columns:44px minmax(120px,1fr)!important}
  .notificationPersonalizer .wideText{grid-column:2!important}
  .notificationColorChoice,.notificationPersonalizer>button{grid-column:1/-1!important}
}
@media(max-width:820px){
  .profileStudioCard{
    width:100vw!important;height:100dvh!important;max-height:100dvh!important;border-radius:0!important;padding:10px!important;
  }
  .profileStudioHeader{min-height:58px!important;padding-right:32px!important}
  .profileStudioLayout{
    display:flex!important;flex-direction:column!important;gap:8px!important;overflow:hidden!important;
  }
  .profileLivePanel{
    flex:0 0 auto!important;
    max-height:190px!important;
    overflow:hidden!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
    padding:7px!important;
  }
  .profileLivePanel>.profileLivePanelHead{display:none!important}
  .profileLiveCard{min-height:170px!important}
  .profileLiveCover{height:56px!important}
  .profileLiveIdentity{margin-top:-20px!important}
  .profileLiveAvatar{width:50px!important;height:50px!important;border-width:3px!important}
  .profileLiveNames strong{font-size:12px!important}
  .profileLiveMood,.profileLiveCard>p,.profileLiveMeta,.profileLiveInterests{font-size:7px!important}
  .profileLiveCard>p{max-height:28px!important;overflow:hidden!important}
  .profileLiveInterests{display:none!important}
  .profileChatPreview{margin:0!important;padding:0!important;border:0!important;align-self:stretch!important}
  .profileChatPreview>.profileLivePanelHead{display:flex!important}
  .profileStudioEditor{flex:1 1 auto!important;min-height:0!important}
  .profileEditorTabs{grid-template-columns:repeat(5,minmax(62px,1fr))!important;overflow-x:auto!important;scrollbar-width:none!important}
}
@media(max-width:560px){
  .profileStudioLive{display:none!important}
  .profileStudioHeader h2{font-size:18px!important}
  .profileStudioHeader p{font-size:8.5px!important}
  .profileLivePanel{grid-template-columns:1fr!important;max-height:150px!important}
  .profileChatPreview{display:none!important}
  .profileLiveCard{min-height:135px!important}
  .profileLiveCover{height:46px!important}
  .profileLiveMood,.profileLiveCard>p,.profileLiveMeta{display:none!important}
  .profileEditorTabs button{min-width:60px!important;font-size:7.5px!important}
  .profileUploadHero,.profileBannerUpload{grid-template-columns:46px 1fr!important}
  .profileUploadHero>button,.profileBannerUpload>button{grid-column:1/-1!important}
  .profileFieldsGrid{gap:8px!important}
  .profileEditorActions{grid-template-columns:1fr 1fr!important}
  #profileSaveHint{grid-column:1/-1!important}
}


/* ============================================================
   v0.43.0 — PROFILE STUDIO POLISH + MOBILE USERLIST DRAWER
   ============================================================ */

/* Profile Studio: eliminate horizontal overflow and keep controls tidy */
.profileStudioCard,
.profileStudioLayout,
.profileStudioEditor,
.profileTabbedForm,
.profileTabPane,
.profileFieldsGrid,
.profileLivePanel{
  min-width:0!important;
  max-width:100%!important;
}
.profileStudioCard{overflow:hidden!important}
.profileStudioEditor{overflow:hidden!important}
.profileTabbedForm{
  flex:1 1 auto!important;
  overflow:auto!important;
  overflow-x:hidden!important;
  scrollbar-width:thin!important;
  padding-right:3px!important;
}
.profileTabPane{
  width:100%!important;
  max-width:100%!important;
  overflow-x:hidden!important;
  padding-right:4px!important;
}
.profileFieldsGrid{
  width:100%!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:10px!important;
}
.profileFieldsGrid label,
.profileFieldsGrid input,
.profileFieldsGrid select,
.profileFieldsGrid textarea{
  min-width:0!important;
  max-width:100%!important;
  width:100%!important;
}
.profileEditorTabs{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:stretch!important;
  gap:6px!important;
  overflow:visible!important;
}
.profileEditorTabs button{
  flex:1 1 118px!important;
  min-width:96px!important;
  min-height:38px!important;
  padding:7px 10px!important;
  white-space:nowrap!important;
}
.profileEditorActions{
  position:sticky!important;
  bottom:0!important;
  z-index:5!important;
  background:linear-gradient(180deg,transparent 0,var(--gc-safe-surface2) 22%)!important;
  padding:14px 0 2px!important;
}
.profileStudioLayout{
  grid-template-columns:minmax(480px,1fr) minmax(300px,360px)!important;
}
.profileLivePanel{
  align-self:stretch!important;
  overflow:auto!important;
}

/* Medium widths: stack preview above editor instead of squeezing both columns */
@media(max-width:980px){
  .profileStudioCard{
    width:min(860px,98vw)!important;
    height:min(900px,96dvh)!important;
    max-height:96dvh!important;
  }
  .profileStudioLayout{
    display:flex!important;
    flex-direction:column-reverse!important;
    gap:10px!important;
    overflow:hidden!important;
  }
  .profileLivePanel{
    flex:0 0 auto!important;
    width:100%!important;
    max-height:235px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1.15fr) minmax(220px,.85fr)!important;
    gap:10px!important;
    overflow:hidden!important;
  }
  .profileLivePanel>.profileLivePanelHead{grid-column:1/-1!important}
  .profileStudioEditor{flex:1 1 auto!important;overflow:hidden!important}
}

/* Phone: full-height editor with compact live preview and proper scrolling */
@media(max-width:700px){
  .profileStudioCard{
    width:100vw!important;
    height:100dvh!important;
    max-height:100dvh!important;
    border-radius:0!important;
    padding:10px 10px calc(10px + env(safe-area-inset-bottom))!important;
  }
  .profileStudioHeader{
    min-height:60px!important;
    padding:2px 34px 8px 2px!important;
  }
  .profileStudioHeader h2{font-size:19px!important}
  .profileStudioHeader p{font-size:9px!important}
  .profileStudioLayout{
    flex-direction:column!important;
    overflow:hidden!important;
  }
  .profileLivePanel{
    order:0!important;
    max-height:178px!important;
    grid-template-columns:1fr!important;
    padding:7px!important;
  }
  .profileLivePanel>.profileLivePanelHead{display:none!important}
  .profileChatPreview{display:none!important}
  .profileLiveCard{min-height:158px!important}
  .profileLiveCover{height:58px!important}
  .profileLiveIdentity{margin-top:-20px!important}
  .profileLiveAvatar{width:52px!important;height:52px!important}
  .profileLiveNames strong{font-size:13px!important}
  .profileLiveCard>p{max-height:30px!important;overflow:hidden!important}
  .profileLiveInterests{display:none!important}
  .profileStudioEditor{order:1!important;min-height:0!important}
  .profileEditorTabs{
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    scrollbar-width:none!important;
    scroll-snap-type:x proximity!important;
    padding-bottom:4px!important;
  }
  .profileEditorTabs::-webkit-scrollbar{display:none!important}
  .profileEditorTabs button{
    flex:0 0 auto!important;
    min-width:92px!important;
    scroll-snap-align:start!important;
    font-size:9px!important;
  }
  .profileFieldsGrid{grid-template-columns:1fr!important}
  .profileFieldsGrid .wide{grid-column:auto!important}
  .profileUploadHero,.profileBannerUpload{
    grid-template-columns:48px minmax(0,1fr)!important;
  }
  .profileUploadHero>button,.profileBannerUpload>button{
    grid-column:1/-1!important;
    width:100%!important;
  }
  .profileEditorActions{
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
  }
  #profileSaveHint{grid-column:1/-1!important}
}

/* Mobile userlist: partial-width Cody-like drawer; chat remains visible */
@media(max-width:900px){
  #topUserListRestore{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:32px!important;
    height:34px!important;
    font-size:17px!important;
    opacity:1!important;
    visibility:visible!important;
  }
  #topUserListRestore.hidden{display:inline-flex!important}
  .users.gcRightPanel,
  #usersPanel{
    display:flex!important;
    flex-direction:column!important;
    position:fixed!important;
    top:58px!important;
    right:0!important;
    bottom:58px!important;
    left:auto!important;
    width:clamp(280px,74vw,360px)!important;
    max-width:82vw!important;
    height:auto!important;
    z-index:140!important;
    border-radius:16px 0 0 16px!important;
    transform:translateX(105%)!important;
    transition:transform .22s ease,box-shadow .22s ease!important;
    box-shadow:-18px 0 45px #0008!important;
    overflow:hidden!important;
  }
  .users.gcRightPanel.mobileOpen,
  #usersPanel.mobileOpen{
    transform:translateX(0)!important;
  }
  .gcRightTabs{
    flex:0 0 auto!important;
    min-height:44px!important;
    position:sticky!important;
    top:0!important;
    z-index:2!important;
    background:var(--gc-safe-surface2)!important;
  }
  .gcRightTitle{
    flex:0 0 auto!important;
    padding:8px 10px!important;
  }
  .gcUserScroll,#users{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
  }
  .liveStats{
    flex:0 0 auto!important;
    margin:7px!important;
  }
  #usersPanel .mobileClose{
    display:inline-grid!important;
    place-items:center!important;
    width:31px!important;
    height:31px!important;
    border-radius:9px!important;
    background:var(--gc-safe-surface)!important;
  }
  #app.usersHidden #topUserListRestore,
  #app:not(.usersHidden) #topUserListRestore{
    display:inline-flex!important;
  }
}

/* Small phones: leave at least a visible chat strip behind the drawer */
@media(max-width:430px){
  .users.gcRightPanel,#usersPanel{
    width:78vw!important;
    max-width:330px!important;
    min-width:270px!important;
  }
}

/* Tablets get a slightly wider drawer but never a full-screen takeover */
@media(min-width:701px) and (max-width:900px){
  .users.gcRightPanel,#usersPanel{
    width:360px!important;
    max-width:54vw!important;
  }
}


/* ============================================================
   v0.44.0 — PROFILE STUDIO CLEAN DESKTOP/MOBILE REBUILD
   ============================================================ */
.profileStudioCard{
  width:min(1120px,96vw)!important;
  height:min(820px,94dvh)!important;
  max-height:94dvh!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
  padding:18px!important;
}
.profileStudioHeader{
  flex:0 0 auto!important;
  min-height:62px!important;
  padding:0 42px 14px 0!important;
  margin-bottom:14px!important;
  border-bottom:1px solid var(--gc-safe-border)!important;
}
.profileStudioHeader h2{font-size:24px!important;line-height:1.1!important;margin:4px 0 6px!important}
.profileStudioHeader p{margin:0!important}
.profileStudioLayout{
  flex:1 1 auto!important;
  min-height:0!important;
  display:grid!important;
  grid-template-columns:minmax(0,1.55fr) minmax(320px,.85fr)!important;
  gap:16px!important;
  overflow:hidden!important;
}
.profileStudioEditor{
  min-width:0!important;
  min-height:0!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
}
.profileEditorTabs{
  flex:0 0 auto!important;
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:5px!important;
  padding:5px!important;
  margin:0 0 12px!important;
  border:1px solid var(--gc-safe-border)!important;
  border-radius:13px!important;
  background:rgba(6,13,24,.55)!important;
  overflow:visible!important;
}
.profileEditorTabs button{
  width:100%!important;
  min-width:0!important;
  min-height:42px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  padding:8px 7px!important;
  border:1px solid transparent!important;
  border-radius:9px!important;
  white-space:nowrap!important;
  font-size:12px!important;
  line-height:1!important;
}
.profileEditorTabs button.active{
  border-color:rgba(230,184,76,.45)!important;
  background:rgba(230,184,76,.14)!important;
}
.profileTabbedForm{
  flex:1 1 auto!important;
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding:0 7px 92px 0!important;
  scrollbar-gutter:stable!important;
}
.profileTabPane{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  overflow:visible!important;
}
.profileSectionIntro{
  width:100%!important;
  max-width:none!important;
  margin:0 0 14px!important;
  padding:13px 15px!important;
  border-radius:12px!important;
}
.profileFieldsGrid{
  width:100%!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  column-gap:14px!important;
  row-gap:13px!important;
}
.profileFieldsGrid>label,
.profileFieldsGrid>.field,
.profileFieldsGrid>div{
  min-width:0!important;
  max-width:100%!important;
}
.profileFieldsGrid label{
  display:flex!important;
  flex-direction:column!important;
  gap:6px!important;
  margin:0!important;
}
.profileFieldsGrid input,
.profileFieldsGrid select,
.profileFieldsGrid textarea{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
  min-height:43px!important;
  padding:10px 12px!important;
  border-radius:10px!important;
}
.profileFieldsGrid textarea{min-height:108px!important;resize:vertical!important}
.profileFieldsGrid .wide{grid-column:1/-1!important}
.profileEditorActions{
  position:absolute!important;
  left:0!important;
  right:8px!important;
  bottom:0!important;
  z-index:8!important;
  min-height:76px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:10px!important;
  padding:20px 4px 4px!important;
  background:linear-gradient(180deg,rgba(0,0,0,0),var(--gc-safe-surface2) 28%)!important;
}
.profileStudioEditor{position:relative!important}
.profileEditorActions button{min-width:120px!important;min-height:44px!important}
#profileSaveHint{
  margin-right:auto!important;
  max-width:210px!important;
  line-height:1.35!important;
  font-size:10px!important;
}
.profileLivePanel{
  min-width:0!important;
  min-height:0!important;
  height:100%!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding:12px!important;
  border-radius:14px!important;
}
.profileLivePanelHead{
  position:sticky!important;
  top:-12px!important;
  z-index:3!important;
  padding:2px 0 10px!important;
  background:var(--gc-safe-surface2)!important;
}
.profileLiveCard{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  overflow:hidden!important;
}
.profileChatPreview{margin-top:14px!important;padding-top:14px!important}

/* prevent any horizontal bar in the modal */
.profileStudioCard,.profileStudioLayout,.profileStudioEditor,.profileTabbedForm,.profileLivePanel{
  scrollbar-width:thin!important;
}
.profileStudioCard{overflow-x:hidden!important}
.profileStudioCard *{box-sizing:border-box!important}

/* Laptop / smaller desktop */
@media(max-width:1050px){
  .profileStudioCard{width:min(940px,97vw)!important}
  .profileStudioLayout{grid-template-columns:minmax(0,1.35fr) minmax(285px,.8fr)!important}
  .profileEditorTabs button{font-size:11px!important}
}

/* Tablet: preview becomes compact, editor gets full width */
@media(max-width:820px){
  .profileStudioCard{width:96vw!important;height:94dvh!important;padding:14px!important}
  .profileStudioLayout{
    display:flex!important;
    flex-direction:column!important;
    gap:10px!important;
  }
  .profileStudioEditor{order:1!important;flex:1 1 auto!important}
  .profileLivePanel{
    order:0!important;
    flex:0 0 185px!important;
    height:185px!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    overflow:hidden!important;
  }
  .profileLivePanelHead,.profileChatPreview{display:none!important}
  .profileLiveCard{height:100%!important;min-height:0!important}
  .profileEditorTabs{
    display:flex!important;
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scrollbar-width:none!important;
  }
  .profileEditorTabs::-webkit-scrollbar{display:none!important}
  .profileEditorTabs button{flex:0 0 112px!important}
}

/* Phone */
@media(max-width:600px){
  .profileStudioCard{
    width:100vw!important;
    height:100dvh!important;
    max-height:100dvh!important;
    padding:10px!important;
    border-radius:0!important;
  }
  .profileStudioHeader{min-height:54px!important;margin-bottom:8px!important;padding-bottom:8px!important}
  .profileStudioHeader h2{font-size:19px!important}
  .profileStudioLayout{gap:7px!important}
  .profileLivePanel{flex-basis:142px!important;height:142px!important;padding:7px!important}
  .profileLiveCover{height:46px!important}
  .profileLiveIdentity{margin-top:-19px!important}
  .profileLiveAvatar{width:48px!important;height:48px!important}
  .profileLiveCard>p,.profileLiveInterests{display:none!important}
  .profileEditorTabs{margin-bottom:8px!important;padding:4px!important}
  .profileEditorTabs button{flex-basis:98px!important;min-height:38px!important;font-size:10px!important}
  .profileTabbedForm{padding:0 3px 84px 0!important}
  .profileFieldsGrid{grid-template-columns:1fr!important;gap:10px!important}
  .profileFieldsGrid .wide{grid-column:auto!important}
  .profileSectionIntro{padding:10px 12px!important;margin-bottom:10px!important}
  .profileEditorActions{
    right:2px!important;
    min-height:72px!important;
    gap:7px!important;
  }
  .profileEditorActions button{min-width:0!important;flex:1 1 0!important}
  #profileSaveHint{display:none!important}
}

/* v0.45.0 Chatopties */
.chatOptionsCard{width:min(760px,95vw)!important;max-height:92dvh!important;overflow:hidden!important;display:flex!important;flex-direction:column!important;padding:18px!important}
.chatOptionsTitle{flex:0 0 auto!important;padding-right:38px!important}.chatOptionsTitle p{margin:6px 0 0;color:var(--muted);font-size:12px}
.chatOptionsTabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;padding:5px;margin:14px 0 12px;border:1px solid var(--gc-safe-border);border-radius:13px;background:rgba(6,13,24,.55);flex:0 0 auto}
.chatOptionsTabs button{min-width:0;min-height:42px;padding:8px;border:0;border-radius:9px;background:transparent;color:var(--text);font-weight:800;cursor:pointer}.chatOptionsTabs button.active{background:rgba(230,184,76,.14);box-shadow:inset 0 0 0 1px rgba(230,184,76,.4);color:#f2c85c}
.chatOptionsForm{min-height:0;display:flex;flex-direction:column;flex:1 1 auto;overflow:hidden}.chatOptionsPane{display:none;min-height:0;overflow-y:auto;padding:3px 4px 8px}.chatOptionsPane.active{display:block}
.chatOptionsSectionHead{display:flex;flex-direction:column;gap:3px;padding:12px 13px;margin-bottom:10px;border:1px solid var(--gc-safe-border);border-radius:11px;background:rgba(255,255,255,.025)}.chatOptionsSectionHead small{color:var(--muted)}
.chatOptionToggle,.chatOptionField{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 14px;margin-bottom:8px;border:1px solid var(--gc-safe-border);border-radius:11px;background:var(--gc-safe-surface)}
.chatOptionToggle>span{display:flex;flex-direction:column;gap:3px;min-width:0}.chatOptionToggle small{color:var(--muted);font-size:11px}.chatOptionToggle input[type=checkbox]{width:21px;height:21px;flex:0 0 auto}
.chatOptionField{align-items:flex-start;flex-direction:column;gap:7px}.chatOptionField select,.chatOptionField input{width:100%;min-height:42px}
.chatOptionInfo{padding:11px 13px;border-radius:10px;background:rgba(92,140,255,.09);border:1px solid rgba(92,140,255,.2);font-size:11px;line-height:1.45}.adultInfo{background:rgba(255,96,128,.08);border-color:rgba(255,96,128,.2)}
.notificationColorGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.notificationColorGrid label{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;border:1px solid var(--gc-safe-border);border-radius:10px;background:var(--gc-safe-surface)}.notificationColorGrid input[type=color]{width:46px;height:34px;padding:2px}
.chatOptionsActions{display:flex;justify-content:flex-end;gap:9px;flex:0 0 auto;padding-top:12px;border-top:1px solid var(--gc-safe-border)}
.giphyAdultRow{display:flex;align-items:center;gap:8px;margin:9px 0;padding:9px 10px;border:1px solid rgba(255,96,128,.25);border-radius:9px;background:rgba(255,96,128,.07)}.giphyAdultRow small{color:var(--muted)}
@media(max-width:650px){.chatOptionsCard{width:100vw!important;height:100dvh!important;max-height:100dvh!important;border-radius:0!important;padding:10px!important}.chatOptionsTabs{display:flex;overflow-x:auto;scrollbar-width:none}.chatOptionsTabs::-webkit-scrollbar{display:none}.chatOptionsTabs button{flex:0 0 108px}.notificationColorGrid{grid-template-columns:1fr}.chatOptionToggle{align-items:flex-start}.chatOptionsActions button{flex:1 1 0}}


/* ============================================================
   v0.47.0 — PROFILE MENU / PROFILE STUDIO FIX
   ============================================================ */
.friendPendingRow{grid-template-columns:44px minmax(0,1fr) auto!important}
.friendPendingBadge{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:26px!important;padding:4px 8px!important;border:1px solid var(--gc-safe-line)!important;border-radius:999px!important;background:var(--gc-safe-surface2)!important;color:var(--gc-safe-muted)!important;font-size:8.5px!important;font-weight:800!important;white-space:nowrap!important}
@media(max-width:700px){
 .friendPendingRow{grid-template-columns:40px minmax(0,1fr)!important}
 .friendPendingBadge{grid-column:2!important;justify-self:start!important;margin-top:4px!important}
}
/* ============================================================
   v0.48.0 — PROFILE STUDIO ROOMIER LAYOUT
   Keeps live preview intact and gives every editor tab enough room.
   ============================================================ */
@media (min-width: 821px){
  .profileStudioCard{
    width:min(1360px,96vw)!important;
    max-width:1360px!important;
    height:min(860px,94dvh)!important;
    max-height:94dvh!important;
    padding:20px!important;
  }
  .profileStudioLayout{
    grid-template-columns:minmax(620px,1.08fr) minmax(430px,.92fr)!important;
    gap:20px!important;
    min-height:0!important;
  }
  .profileStudioEditor{
    min-width:0!important;
    min-height:0!important;
    overflow:hidden!important;
  }
  .profileEditorTabs{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:6px!important;
    padding:6px!important;
    margin-bottom:14px!important;
  }
  .profileEditorTabs button{
    min-width:0!important;
    min-height:46px!important;
    padding:10px 14px!important;
    font-size:12px!important;
  }
  .profileTabbedForm{
    min-height:0!important;
    padding:0 6px 88px 0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
  }
  .profileTabPane.active{
    width:100%!important;
  }
  .profileSectionHead{
    width:100%!important;
    padding:14px 16px!important;
    margin-bottom:14px!important;
  }
  .profileFieldsGrid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:14px 16px!important;
    width:100%!important;
  }
  .profileFieldsGrid>label,
  .profileFieldsGrid>.wide,
  .profileBannerUpload,
  .profileUploadHero{
    min-width:0!important;
  }
  .profileFieldsGrid .wide{
    grid-column:1/-1!important;
  }
  .profileFieldsGrid label input,
  .profileFieldsGrid label select,
  .profileFieldsGrid label textarea{
    width:100%!important;
    min-width:0!important;
  }
  .profileFieldsGrid label input:not([type="color"]),
  .profileFieldsGrid label select{
    min-height:46px!important;
  }
  .profileFieldsGrid label textarea{
    min-height:118px!important;
    resize:vertical!important;
  }
  .profileUploadHero{
    display:grid!important;
    grid-template-columns:76px minmax(0,1fr) auto!important;
    align-items:center!important;
    gap:14px!important;
    width:100%!important;
    padding:14px 16px!important;
    margin-bottom:14px!important;
  }
  .profileAvatarMiniPreview{
    width:68px!important;
    height:68px!important;
  }
  .profileUploadHero>div:nth-child(2){
    min-width:0!important;
  }
  .profileUploadHero>div:nth-child(2) small{
    display:block!important;
    max-width:460px!important;
    line-height:1.45!important;
  }
  .profileUploadHero #avatarUploadBtn{
    white-space:nowrap!important;
  }
  .profileBannerUpload{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:16px!important;
    padding:14px 16px!important;
  }
  .profileEditorActions{
    left:0!important;
    right:6px!important;
    bottom:0!important;
    min-height:76px!important;
    padding:12px 0 0!important;
    background:linear-gradient(to bottom,rgba(14,22,35,0),var(--gc-safe-surface2) 22%)!important;
  }
  .profileLivePanel{
    min-width:0!important;
    height:100%!important;
    overflow-y:auto!important;
  }
}

@media (min-width:821px) and (max-width:1120px){
  .profileStudioCard{
    width:97vw!important;
    max-width:97vw!important;
  }
  .profileStudioLayout{
    grid-template-columns:minmax(500px,1.15fr) minmax(330px,.85fr)!important;
    gap:14px!important;
  }
}


/* ============================================================
   v0.49.0 — PROFILE STUDIO TRUE WIDE + SECRET POST
   ============================================================ */
@media (min-width: 821px){
  #editProfileModal .profileStudioCard{width:min(1360px,96vw)!important;max-width:1360px!important;height:min(860px,94dvh)!important;max-height:94dvh!important;overflow:hidden!important;padding:20px!important}
  #editProfileModal .profileStudioLayout{grid-template-columns:minmax(620px,1.12fr) minmax(430px,.88fr)!important;gap:24px!important}
  #editProfileModal .profileStudioEditor{width:100%!important;max-width:none!important;overflow:hidden!important}
  #editProfileModal .profileTabbedForm{display:block!important;width:100%!important;max-width:none!important;overflow-y:auto!important;overflow-x:hidden!important;padding:0 8px 92px 0!important}
  #editProfileModal .profileTabPane{display:none!important;width:100%!important;max-width:none!important;overflow:visible!important;padding:0!important}
  #editProfileModal .profileTabPane.active{display:block!important}
  #editProfileModal .profileFieldsGrid{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:16px 20px!important;width:100%!important;max-width:none!important}
  #editProfileModal .profileFieldsGrid>label{display:flex!important;flex-direction:column!important;gap:7px!important;width:100%!important;min-width:0!important;max-width:none!important}
  #editProfileModal .profileFieldsGrid .wide{grid-column:1/-1!important}
  #editProfileModal .profileFieldsGrid input:not([type=color]),#editProfileModal .profileFieldsGrid select{height:48px!important;min-height:48px!important;padding:11px 13px!important;font-size:13px!important}
  #editProfileModal .profileFieldsGrid textarea{min-height:126px!important;padding:12px 13px!important;font-size:13px!important}
  #editProfileModal .profileSectionHead{width:100%!important;max-width:none!important;padding:15px 16px!important;margin-bottom:16px!important}
  #editProfileModal .profileUploadHero{grid-template-columns:82px minmax(0,1fr) auto!important;padding:16px!important;gap:16px!important}
  #editProfileModal .profileBannerUpload{grid-column:1/-1!important;padding:15px 16px!important}
}
@media (min-width:821px) and (max-width:1120px){
  #editProfileModal .profileStudioCard{width:98vw!important;max-width:98vw!important}
  #editProfileModal .profileStudioLayout{grid-template-columns:minmax(500px,1.08fr) minmax(330px,.92fr)!important;gap:14px!important}
}
@media (max-width:820px){
  #editProfileModal .profileStudioCard{width:100vw!important;max-width:100vw!important;height:100dvh!important;max-height:100dvh!important;overflow:hidden!important;border-radius:0!important}
  #editProfileModal .profileStudioLayout{display:flex!important;flex-direction:column!important;overflow:hidden!important}
  #editProfileModal .profileStudioEditor{flex:1 1 auto!important;min-height:0!important}
  #editProfileModal .profileTabbedForm{display:block!important;overflow-y:auto!important;overflow-x:hidden!important}
  #editProfileModal .profileTabPane{display:none!important;overflow:visible!important}
  #editProfileModal .profileTabPane.active{display:block!important}
  #editProfileModal .profileFieldsGrid{grid-template-columns:1fr!important;gap:11px!important}
  #editProfileModal .profileFieldsGrid .wide{grid-column:auto!important}
  #editProfileModal .profileUploadHero{grid-template-columns:62px minmax(0,1fr)!important}
  #editProfileModal .profileUploadHero>button{grid-column:1/-1!important;width:100%!important}
}

.secretPostAddonBtn{position:relative!important}.addonMiniBadge,.secretTabBadge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#ff5577;color:#fff;font-size:9px;font-weight:900}.secretPostAddonBtn .addonMiniBadge{position:absolute;right:7px;top:6px}.addonMiniBadge.hidden,.secretTabBadge.hidden{display:none!important}
.secretPostCard{width:min(920px,96vw)!important;height:min(760px,92dvh)!important;max-height:92dvh!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;padding:18px!important}
.secretPostHead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:0 42px 14px 0;border-bottom:1px solid var(--gc-safe-line)}.secretPostHead small{color:var(--gold);font-weight:900;letter-spacing:.12em}.secretPostHead h3{margin:4px 0 4px;font-size:23px}.secretPostHead p{margin:0;color:var(--muted)}.secretPostWallet{display:flex;align-items:center;gap:6px;padding:9px 12px;border:1px solid var(--gc-safe-line);border-radius:999px;background:var(--gc-safe-surface)}
.secretPostTabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:14px 0;padding:5px;border:1px solid var(--gc-safe-line);border-radius:12px;background:#08111e}.secretPostTabs button{min-height:42px;border:0;border-radius:9px;background:transparent;color:var(--text);font-weight:800;cursor:pointer}.secretPostTabs button.active{background:rgba(230,184,76,.14);box-shadow:inset 0 0 0 1px rgba(230,184,76,.4);color:#f2c85c}
.secretPostPane{display:none;min-height:0;overflow-y:auto;overflow-x:hidden;flex:1 1 auto}.secretPostPane.active{display:block}.secretPostList{display:flex;flex-direction:column;gap:10px;padding:2px 2px 14px}.secretPostItem{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:12px;align-items:center;padding:13px;border:1px solid var(--gc-safe-line);border-radius:13px;background:var(--gc-safe-surface)}.secretPostItem.unread{border-color:rgba(230,184,76,.55);box-shadow:0 0 0 1px rgba(230,184,76,.12) inset}.secretPostStamp{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;background:linear-gradient(135deg,#5b2d7e,#be3f6f);font-size:24px}.secretPostItem b{display:block}.secretPostItem small{display:block;margin-top:4px;color:var(--muted)}.secretPostItem button{white-space:nowrap}
.secretPostCompose{display:flex;flex-direction:column;gap:12px;padding:2px 2px 18px}.secretPostCompose>label{display:flex;flex-direction:column;gap:7px;color:#b7c5d7;font-size:12px}.secretPostCompose select,.secretPostCompose textarea{width:100%;box-sizing:border-box}.secretPostCompose textarea{min-height:126px;resize:vertical}.secretPostCompose label>small{text-align:right;color:var(--muted)}.secretComposeIntro{padding:12px 14px;border:1px solid var(--gc-safe-line);border-radius:11px;background:rgba(255,255,255,.025)}.secretComposeIntro small{display:block;color:var(--muted);margin-top:3px}.secretEffectGrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.secretEffectGrid button{min-height:68px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:1px solid var(--gc-safe-line);border-radius:11px;background:var(--gc-safe-surface);color:var(--text);font-size:22px;cursor:pointer}.secretEffectGrid button span{font-size:9px;font-weight:800}.secretEffectGrid button.active{border-color:rgba(230,184,76,.65);background:rgba(230,184,76,.11)}.secretAnonToggle{display:flex!important;flex-direction:row!important;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;border:1px solid var(--gc-safe-line);border-radius:11px;background:var(--gc-safe-surface)}.secretAnonToggle span{min-width:0}.secretAnonToggle small{display:block!important;text-align:left!important;margin-top:3px}.secretAnonToggle input{width:22px;height:22px;flex:0 0 auto}.secretPostCost{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-radius:11px;background:rgba(230,184,76,.09);border:1px solid rgba(230,184,76,.25)}.secretPostCost i{font-style:normal}
.secretRevealCard{width:min(560px,94vw)!important;text-align:center!important;overflow:hidden!important}.secretSeal{font-size:58px;margin:8px 0 3px;filter:drop-shadow(0 8px 20px #0008)}.secretRevealCard>small{color:var(--gold);font-weight:900;letter-spacing:.15em}.secretRevealCard h2{margin:8px 0 14px}.secretRevealBody{padding:18px;border:1px solid var(--gc-safe-line);border-radius:14px;background:linear-gradient(145deg,rgba(94,54,130,.20),rgba(197,57,104,.12));font-size:15px;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere;text-align:left}.secretRevealCard .primaryBtn{margin-top:14px;min-width:140px}
.secretEmojiRain{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:10000}.secretRainEmoji{position:absolute;top:-12vh;animation:gcSecretRain var(--rain-dur,2600ms) linear forwards;filter:drop-shadow(0 5px 8px #0006);will-change:transform,opacity}@keyframes gcSecretRain{0%{transform:translate3d(0,-10vh,0) rotate(0deg);opacity:0}8%{opacity:1}100%{transform:translate3d(var(--rain-drift,0px),115vh,0) rotate(var(--rain-rot,360deg));opacity:.2}}
@media (prefers-reduced-motion:reduce){.secretRainEmoji{animation:none!important;display:none!important}}
@media(max-width:700px){.secretPostCard{width:100vw!important;height:100dvh!important;max-height:100dvh!important;border-radius:0!important;padding:10px!important}.secretPostHead{padding-bottom:10px}.secretPostHead p{display:none}.secretPostTabs{margin:10px 0}.secretPostItem{grid-template-columns:44px minmax(0,1fr)}.secretPostStamp{width:42px;height:42px;font-size:20px}.secretPostItem>button{grid-column:2;width:100%}.secretEffectGrid{grid-template-columns:repeat(3,1fr)}.secretEffectGrid button{min-height:58px}.secretPostWallet{font-size:11px}.secretPostCompose textarea{min-height:110px}}
@media(max-width:380px){.secretPostTabs button{font-size:10px}.secretEffectGrid{grid-template-columns:repeat(2,1fr)}.secretPostHead h3{font-size:19px}}

/* v0.49.2 Secret Post notification/discovery polish */
.notification.secretPostNotification{border-color:#d6ad3b55;background:linear-gradient(90deg,#d6ad3b12,transparent)}
.notification .notificationActionBtn{display:inline-flex;align-items:center;justify-content:center;margin-top:9px;min-height:34px;padding:7px 11px;border-radius:9px}
@media(max-width:600px){.notification .notificationActionBtn{width:100%;margin-top:10px}.secretPostCard,.secretRevealCard{width:min(100%,calc(100vw - 20px));max-height:calc(var(--gc-vh,100vh) - 20px);padding:16px}.secretPostTabs{overflow-x:auto;white-space:nowrap}.secretPostTabs button{flex:0 0 auto}}


/* ============================================================
   v0.50.0 — UNIVERSAL RESPONSIVE / MOBILE FUNCTIONALITY AUDIT
   Fixes modal stacking, mobile scrolling, profile studio actions,
   report center, notifications, profile menu and userlist drawer.
   ============================================================ */

/* Every modal must sit above the fixed composer and bottom quickbar. */
.modal{z-index:500!important;overscroll-behavior:contain!important}
.modalCard{overscroll-behavior:contain!important}

/* Friend icon is intentionally visually distinct from the userlist icon. */
#topFriendsBtn{font-size:16px!important;letter-spacing:-2px!important}
#topUserListRestore{letter-spacing:0!important}

/* Profile dropdown: never extend outside the usable viewport. */
.gcProfileMenuCody{
  max-height:calc(var(--gc-vh,100dvh) - 66px - env(safe-area-inset-bottom))!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain!important;
  scrollbar-width:thin!important;
}

/* Notification center behaves as one contained, scroll-safe panel. */
.notificationCard{
  display:flex!important;
  flex-direction:column!important;
  width:min(680px,96vw)!important;
  max-height:min(860px,92dvh)!important;
  overflow:hidden!important;
}
.notificationHead{flex:0 0 auto!important}
.notificationList{
  flex:1 1 auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
  padding:2px 2px max(8px,env(safe-area-inset-bottom))!important;
}
.pushSettings{flex:0 0 auto!important}

/* Report center panes must always own the scrolling area. */
.reportCenterCard{height:min(820px,92dvh)!important;max-height:92dvh!important}
.reportPane{overscroll-behavior:contain!important;padding-bottom:max(14px,env(safe-area-inset-bottom))!important}

/* Profile Studio desktop keeps the roomy two-column layout. */
@media (min-width:821px){
  #editProfileModal .profileStudioCard{width:min(1360px,96vw)!important}
  #editProfileModal .profileStudioLayout{min-height:0!important}
}

/* Universal tablet/mobile modal behavior. */
@media(max-width:820px){
  .modal{
    align-items:center!important;
    justify-items:center!important;
    padding:8px!important;
  }
  .modalCard{
    width:min(100%,calc(100vw - 16px))!important;
    max-width:calc(100vw - 16px)!important;
    max-height:calc(var(--gc-vh,100dvh) - 16px)!important;
    border-radius:14px!important;
    padding:14px!important;
  }
  .modalClose{
    position:absolute!important;
    right:10px!important;
    top:max(10px,env(safe-area-inset-top))!important;
    z-index:30!important;
    width:42px!important;
    height:42px!important;
    display:grid!important;
    place-items:center!important;
    border:1px solid var(--gc-safe-line)!important;
    border-radius:11px!important;
    background:var(--gc-safe-surface2)!important;
  }

  /* Right userlist: always open when mobileOpen is present, even if the
     previous desktop preference had stored usersHidden. */
  #app.usersHidden #usersPanel.mobileOpen,
  #usersPanel.mobileOpen{
    display:flex!important;
    transform:translateX(0)!important;
  }
  #usersPanel{
    top:58px!important;
    bottom:58px!important;
    height:auto!important;
    max-height:none!important;
  }

  /* Meldpunt / support */
  .reportCenterCard{
    width:100vw!important;
    height:var(--gc-vh,100dvh)!important;
    max-height:var(--gc-vh,100dvh)!important;
    overflow:hidden!important;
  }
  .reportTabs{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:5px!important;
    overflow-x:auto!important;
  }
  .reportTabs button{min-width:0!important;font-size:11px!important;padding:8px 5px!important}
  .reportPane{flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important}
  .reportGrid{grid-template-columns:1fr!important}
  #reportReason{min-height:150px!important}

  /* Meldingen */
  .notificationCard{
    width:100vw!important;
    height:var(--gc-vh,100dvh)!important;
    max-height:var(--gc-vh,100dvh)!important;
    overflow:hidden!important;
  }
  .notificationHead{
    position:relative!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    margin:0 48px 10px 0!important;
  }
  .notificationHead>div:last-child{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
  }
  .notificationHead button{min-height:42px!important;padding:8px 10px!important;font-size:12px!important}
  .pushSettings{
    margin:6px 0 12px!important;
    padding:12px!important;
    gap:9px!important;
    border-radius:12px!important;
  }
  .pushSettings b{font-size:14px!important}
  .pushSettings small,.pushSettings p{font-size:11px!important;line-height:1.4!important}
  .notification{
    grid-template-columns:42px minmax(0,1fr) 34px!important;
    padding:11px!important;
    gap:10px!important;
  }
  .notification p{font-size:12px!important;line-height:1.35!important}
  .notification small{font-size:10px!important}

  /* Profile Studio: compact preview, scrollable form and permanently
     reachable save/cancel actions. */
  #editProfileModal .profileStudioCard{
    width:100vw!important;
    max-width:100vw!important;
    height:var(--gc-vh,100dvh)!important;
    max-height:var(--gc-vh,100dvh)!important;
    padding:12px!important;
    overflow:hidden!important;
  }
  #editProfileModal .profileStudioHeader{
    flex:0 0 auto!important;
    min-height:0!important;
    margin:0 44px 8px 0!important;
    padding:0 0 8px!important;
  }
  #editProfileModal .profileStudioHeader h2{font-size:22px!important}
  #editProfileModal .profileStudioHeader p{font-size:11px!important}
  #editProfileModal .profileStudioLive{display:none!important}
  #editProfileModal .profileStudioLayout{
    flex:1 1 auto!important;
    min-height:0!important;
    display:flex!important;
    flex-direction:column!important;
    gap:8px!important;
    padding-top:0!important;
    overflow:hidden!important;
  }
  #editProfileModal .profileLivePanel{
    order:0!important;
    flex:0 0 112px!important;
    height:112px!important;
    min-height:112px!important;
    padding:6px!important;
    overflow:hidden!important;
  }
  #editProfileModal .profileLivePanelHead,
  #editProfileModal .profileChatPreview{display:none!important}
  #editProfileModal .profileLiveCard{height:100%!important;min-height:0!important}
  #editProfileModal .profileLiveCover{height:36px!important}
  #editProfileModal .profileLiveIdentity{margin-top:-18px!important}
  #editProfileModal .profileLiveAvatar{width:46px!important;height:46px!important}
  #editProfileModal .profileLiveCard>p,
  #editProfileModal .profileLiveInterests{display:none!important}
  #editProfileModal .profileStudioEditor{
    order:1!important;
    flex:1 1 auto!important;
    min-height:0!important;
    overflow:hidden!important;
    display:flex!important;
    flex-direction:column!important;
  }
  #editProfileModal .profileEditorTabs{
    flex:0 0 auto!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    overflow:visible!important;
    margin:0 0 8px!important;
    padding:4px!important;
  }
  #editProfileModal .profileEditorTabs button{
    min-width:0!important;
    min-height:42px!important;
    padding:7px 5px!important;
    font-size:11px!important;
  }
  #editProfileModal .profileTabbedForm{
    flex:1 1 auto!important;
    min-height:0!important;
    display:block!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding:0 2px 8px!important;
    overscroll-behavior:contain!important;
  }
  #editProfileModal .profileFieldsGrid{grid-template-columns:1fr!important;gap:10px!important}
  #editProfileModal .profileFieldsGrid .wide{grid-column:auto!important}
  #editProfileModal .profileFieldsGrid input:not([type=color]),
  #editProfileModal .profileFieldsGrid select{min-height:46px!important;height:46px!important}
  #editProfileModal .profileFieldsGrid textarea{min-height:118px!important}
  #editProfileModal .profileUploadHero{grid-template-columns:58px minmax(0,1fr)!important;padding:11px!important}
  #editProfileModal .profileUploadHero>button{grid-column:1/-1!important;width:100%!important}
  #editProfileModal .profileBannerUpload{display:grid!important;grid-template-columns:1fr!important;gap:9px!important}
  #editProfileModal .profileBannerUpload>button{width:100%!important}
  #editProfileModal .profileEditorActions{
    position:sticky!important;
    left:auto!important;
    right:auto!important;
    bottom:0!important;
    z-index:20!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
    min-height:70px!important;
    margin-top:12px!important;
    padding:16px 0 max(4px,env(safe-area-inset-bottom))!important;
    background:linear-gradient(180deg,rgba(0,0,0,0),var(--gc-safe-surface2) 20%)!important;
  }
  #editProfileModal #profileSaveHint{display:none!important}
  #editProfileModal .profileEditorActions button{min-width:0!important;width:100%!important;min-height:46px!important}

  /* Secret Post and other full-screen modal content still scroll internally. */
  .secretPostCard{height:var(--gc-vh,100dvh)!important;max-height:var(--gc-vh,100dvh)!important}
  .secretPostPane{padding-bottom:max(12px,env(safe-area-inset-bottom))!important}
}

/* Phones: keep the chrome compact and all controls reachable. */
@media(max-width:600px){
  .gcProfileMenuCody{
    top:58px!important;
    right:6px!important;
    width:min(330px,calc(100vw - 12px))!important;
    max-height:calc(var(--gc-vh,100dvh) - 64px - env(safe-area-inset-bottom))!important;
  }
  .gcProfileMenuCody button,.gcProfileMenuCody a{min-height:48px!important}
  .notificationCard,.reportCenterCard,#editProfileModal .profileStudioCard{padding-left:10px!important;padding-right:10px!important}
  .pushSettings{max-height:38vh!important;overflow-y:auto!important}
}

/* Portrait wallpapers: show the whole artwork instead of zooming a wide
   desktop image until only the center/logo remains. WhatsApp keeps its
   tiled/auto behavior. */
@media(max-width:900px) and (orientation:portrait){
  :root:not([data-chat-theme="whatsapp"]) .chat{
    background-size:contain!important;
    background-position:center center!important;
    background-repeat:no-repeat!important;
    background-color:var(--gc-bg,#0b0e14)!important;
  }
}

/* Landscape/tablet uses cover to avoid empty side bands. */
@media(max-width:900px) and (orientation:landscape){
  :root:not([data-chat-theme="whatsapp"]) .chat{background-size:cover!important;background-position:center center!important}
}

/* STEP2D account recovery / password change */
.authForgot{border:0;background:transparent;color:#dcb85f;font:inherit;font-weight:800;cursor:pointer;padding:2px 6px 10px;text-decoration:underline;text-underline-offset:3px}.gcForgotPasswordCard{width:min(520px,calc(100vw - 24px))}.gcForgotPasswordForm{display:grid;gap:14px}.gcForgotPasswordForm label{display:grid;gap:7px}.gcForgotPasswordForm input{width:100%}.gcForgotHint{margin-top:14px;line-height:1.5}.gcPasswordChangeBox{margin-top:18px;padding-top:18px;border-top:1px solid #30394a;display:grid;gap:12px}.gcPasswordChangeBox h4,.gcPasswordChangeBox p{margin:0}.gcPasswordChangeBox p{color:#aeb8c8;font-size:13px}@media(max-width:520px){.gcForgotPasswordCard{width:calc(100vw - 16px)}}

/* STEP2S: userlist metadata icons are structural UI, never translated/removed */
.uMeta[data-no-i18n="1"]{display:flex!important;visibility:visible!important;opacity:1!important;align-items:center!important;justify-content:flex-end!important;gap:3px!important;min-width:max-content!important;white-space:nowrap!important}
.uMeta[data-no-i18n="1"] .userMetaIcon,.uMeta[data-no-i18n="1"] .genderIcon{display:inline-grid!important;visibility:visible!important;opacity:1!important;place-items:center!important;min-width:14px!important;height:16px!important;font-style:normal!important;line-height:16px!important}
.uMeta[data-no-i18n="1"] .flagMetaIcon{font-family:system-ui,"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif!important}

/* STEP2T: i18n must never collapse visual metadata/icons. */
.userCard .uMeta,.userCard .userMetaIcon,.userCard .statusVisual,.userGroup>header>[data-no-i18n="1"]{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;visibility:visible!important;opacity:1!important}
.userCard .statusVisual{font-style:normal;min-width:1.15em}
.userCard .uMeta{gap:.24rem;white-space:nowrap}


/* STEP2V — CodyChat-style compact 3-dot message action menu */
.msgActions[data-gc-cody-menu="1"]{
  overflow:visible!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.msgActions[data-gc-cody-menu="1"] > .gcCodyMoreBtn{
  display:grid!important;
  place-items:center!important;
  min-width:28px!important;
  width:28px!important;
  height:24px!important;
  min-height:24px!important;
  padding:0 5px!important;
  border:1px solid var(--gc-safe-line)!important;
  border-radius:7px!important;
  background:color-mix(in srgb,var(--gc-safe-surface2) 96%,transparent)!important;
  color:var(--gc-safe-text)!important;
  font-size:13px!important;
  font-weight:900!important;
  letter-spacing:1px!important;
  cursor:pointer!important;
}
.gcCodyActionMenu{
  display:none!important;
  position:absolute!important;
  right:0!important;
  top:29px!important;
  z-index:120!important;
  min-width:165px!important;
  padding:5px!important;
  border:1px solid var(--gc-safe-line)!important;
  border-radius:9px!important;
  background:var(--gc-safe-surface2)!important;
  box-shadow:0 12px 32px rgba(0,0,0,.48)!important;
}
.gcCodyActionMenu.open{display:grid!important;gap:2px!important}
.gcCodyActionMenu > button{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  width:100%!important;
  min-height:30px!important;
  padding:5px 8px!important;
  border:0!important;
  border-radius:6px!important;
  background:transparent!important;
  color:var(--gc-safe-text)!important;
  font-size:11px!important;
  line-height:18px!important;
  text-align:left!important;
  white-space:nowrap!important;
}
.gcCodyActionMenu > button:hover,.gcCodyActionMenu > button:focus-visible{
  background:color-mix(in srgb,var(--gc-safe-surface3) 88%,transparent)!important;
}
.gcCodyActionMenu > button.danger{color:var(--danger)!important}
.msgActions[data-gc-cody-menu="1"].menuOpen{
  opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:none!important;
}
@media(hover:none),(pointer:coarse){
 .msgActions[data-gc-cody-menu="1"]{position:absolute!important;right:4px!important;top:2px!important;width:auto!important;margin:0!important}
 .gcCodyActionMenu{position:absolute!important;right:0!important;top:29px!important}
}


/* STEP2W — keep the translation target arrow directly behind Translate */
.gcCodyActionMenu > .gcTranslateMenuRow{
  display:flex!important;
  align-items:center!important;
  width:100%!important;
  min-height:30px!important;
  border-radius:6px!important;
  overflow:hidden!important;
}
.gcCodyActionMenu > .gcTranslateMenuRow > button{
  display:flex!important;
  align-items:center!important;
  min-height:30px!important;
  padding:5px 8px!important;
  border:0!important;
  background:transparent!important;
  color:var(--gc-safe-text)!important;
  font-size:11px!important;
  line-height:18px!important;
  white-space:nowrap!important;
}
.gcCodyActionMenu > .gcTranslateMenuRow > .gcTranslateBtn{
  flex:1 1 auto!important;
  justify-content:flex-start!important;
  gap:8px!important;
  border-radius:6px 0 0 6px!important;
}
.gcCodyActionMenu > .gcTranslateMenuRow > .gcTranslateTargetBtn{
  flex:0 0 30px!important;
  width:30px!important;
  min-width:30px!important;
  justify-content:center!important;
  padding:5px 6px!important;
  border-radius:0 6px 6px 0!important;
}
.gcCodyActionMenu > .gcTranslateMenuRow:hover,
.gcCodyActionMenu > .gcTranslateMenuRow:focus-within{
  background:color-mix(in srgb,var(--gc-safe-surface3) 88%,transparent)!important;
}


/* STEP2Y — hard fix: translate caret inline + Cody-style date/time */
.gcCodyActionMenu > .gcTranslateMenuRow{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 28px!important;
  align-items:center!important;
  width:100%!important;
  min-height:30px!important;
  gap:0!important;
  padding:0!important;
  margin:0!important;
  border-radius:6px!important;
  overflow:hidden!important;
}
.gcCodyActionMenu > .gcTranslateMenuRow > .gcTranslateBtn{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  width:100%!important;
  min-width:0!important;
  height:30px!important;
  margin:0!important;
  padding:5px 8px!important;
  border:0!important;
  border-radius:6px 0 0 6px!important;
  white-space:nowrap!important;
}
.gcCodyActionMenu > .gcTranslateMenuRow > .gcTranslateTargetBtn{
  position:static!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:28px!important;
  min-width:28px!important;
  max-width:28px!important;
  height:30px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0 6px 6px 0!important;
  line-height:30px!important;
  white-space:nowrap!important;
}
.msg .msgMain{
  position:relative!important;
  padding-right:118px!important;
}
.msg .meta .time{
  position:absolute!important;
  top:2px!important;
  right:38px!important;
  z-index:3!important;
  display:inline-flex!important;
  align-items:center!important;
  height:24px!important;
  margin:0!important;
  padding:0!important;
  white-space:nowrap!important;
  font-size:9px!important;
  line-height:24px!important;
  color:var(--gc-safe-muted)!important;
  pointer-events:none!important;
}
.gcHideMessageDateTime .msg .meta .time{display:none!important}
@media(max-width:700px){
  .msg .msgMain{padding-right:104px!important}
  .msg .meta .time{right:36px!important;font-size:8.5px!important}
}


/* STEP3 restored addon visuals */
.authMembers{margin:18px 0 4px;padding:12px 0 10px}.authMembersHead{margin-bottom:9px}.authMembersHead strong{font-size:13px}.authMemberTrack{gap:9px;animation-duration:28s}.authMember{width:62px;gap:5px}.authMember>span{width:45px;height:45px}.authMember b{max-width:62px;font-size:9px}
.authLegal{font-size:9px;margin-top:13px}
.profileSocialFields{display:grid!important;grid-template-columns:1fr 1fr;gap:10px;padding:14px;border:1px solid var(--line);border-radius:14px;background:#0b121d}.profileSocialFields>b,.profileSocialFields>small{grid-column:1/-1}.profileSocialFields>small{color:var(--muted)}.profileSocialLinks{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.profileSocialLinks a,.shareButtons a,.shareButtons button{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 13px;border:1px solid var(--line);border-radius:10px;background:#172235;color:#fff;text-decoration:none;font-weight:800}.shareInviteCard{width:min(620px,100%)}.referralRewardInfo{margin:12px 0;padding:12px;border:1px solid #826b31;border-radius:12px;background:#dcb85f14;color:#e8cf87}.shareLinkRow{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:7px}.shareLinkRow input{min-width:0}.referralStats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:16px 0}.referralStats span{padding:12px 6px;border:1px solid var(--line);border-radius:12px;text-align:center;background:#0b121d}.referralStats b{display:block;font-size:20px;color:var(--gold)}.referralStats small{color:var(--muted)}.shareButtons{display:flex;gap:8px;flex-wrap:wrap}@media(max-width:560px){.profileSocialFields{grid-template-columns:1fr}.profileSocialFields>b,.profileSocialFields>small{grid-column:auto}.referralStats{grid-template-columns:1fr 1fr}.shareLinkRow{grid-template-columns:1fr}.shareLinkRow button{width:100%}}
.pushSettings{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;margin:14px 0;padding:14px;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:rgba(255,255,255,.035)}.pushSettings>div:first-child{display:flex;flex-direction:column;gap:4px}.pushSettings small{color:var(--muted,#aab2c1);line-height:1.4}.pushSettings>p,.pushPreferenceFields{grid-column:1/-1}.pushPreferenceFields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.08)}.pushPreferenceFields label{display:flex;align-items:center;gap:8px;min-height:38px}.pushPreferenceFields button{grid-column:1/-1;justify-self:start}@media(max-width:640px){.pushSettings{grid-template-columns:1fr}.pushSettings>button{justify-self:stretch}.pushPreferenceFields{grid-template-columns:1fr}}
.donationCard{max-width:520px;text-align:center;padding:34px}.donationHeart{width:72px;height:72px;display:grid;place-items:center;margin:0 auto 16px;border-radius:50%;font-size:38px;color:#fff;background:linear-gradient(145deg,#ff4773,#c72050);box-shadow:0 12px 36px #d92e5c55}.donationCard h2{margin:8px 0 10px}.donationCard p{color:var(--muted);line-height:1.6}.donationPay{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;margin-top:12px;min-height:48px;padding:0 20px}
.pmMessageTools{display:flex;justify-content:flex-end;gap:4px;margin-top:5px;opacity:.72}.pmMessageTools button{min-width:26px;height:24px;border:1px solid var(--gc-safe-line);border-radius:999px;background:color-mix(in srgb,var(--gc-safe-surface2) 88%,transparent);color:var(--gc-safe-muted);font-size:10px;padding:0 7px}.pmMessageTools button:hover{opacity:1;color:var(--gc-safe-text);border-color:var(--gc-accent)}@media(max-width:600px){.pmMessageTools{opacity:1}.pmMessageTools button{min-width:30px;height:28px}}
.gcProfileMenuCody .hidden{display:none!important}

/* GC user action menu v0.36.1 */
.gcUserMenuOverlay{position:fixed;inset:0;z-index:10020;display:grid;place-items:center;padding:16px;background:#030711d9;backdrop-filter:blur(5px)}
.gcUserMenu{position:relative;width:min(430px,96vw);max-height:min(720px,90vh);overflow:auto;padding:18px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(155deg,var(--panel),var(--surface));box-shadow:0 30px 90px #000b}
.gcUserMenu>header{display:flex;align-items:center;gap:12px;padding:2px 40px 15px 2px;border-bottom:1px solid var(--line)}
.gcUserMenu>header .uAvatar{width:50px;height:50px;flex:0 0 50px}.gcUserMenu>header b{display:block;font-size:17px}.gcUserMenu>header small{display:block;margin-top:3px;color:var(--muted)}
.gcUserMenuClose{position:absolute;right:12px;top:11px;width:34px;height:34px;border:0;border-radius:10px;background:var(--card);color:var(--text);font-size:22px}
.gcUserMenuGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}.gcUserMenuGrid button{display:flex;align-items:center;gap:10px;min-height:47px;padding:10px 12px;border:1px solid var(--line);border-radius:11px;background:var(--card);color:var(--text);text-align:left}.gcUserMenuGrid button:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 13%,var(--card))}.gcUserMenuGrid button.danger{color:#ff8791;border-color:#7c3842}
.gcUserMenuTabs{display:flex;gap:6px;padding:12px 0 0;border-bottom:1px solid var(--line)}.gcUserMenuTabs button{min-height:38px;padding:0 14px;border:0;border-radius:9px 9px 0 0;background:transparent;color:var(--muted);font-weight:800}.gcUserMenuTabs button.active{background:var(--card);color:var(--text);box-shadow:inset 0 -2px var(--accent)}.gcUserMenuPane.hidden{display:none!important}.gcUserMenuEmpty{grid-column:1/-1;margin:0;padding:18px;border:1px dashed var(--line);border-radius:11px;color:var(--muted);text-align:center}.gcUserMenuGrid button span{min-width:0;overflow:hidden;text-overflow:ellipsis}
@media(max-width:520px){.gcUserMenuOverlay{align-items:end;padding:0}.gcUserMenu{width:100%;max-height:86vh;border-radius:20px 20px 0 0;padding:16px 14px calc(16px + env(safe-area-inset-bottom))}.gcUserMenuGrid{grid-template-columns:1fr 1fr}.gcUserMenuGrid button{min-height:50px}}
.profileHeroMenu{position:absolute!important;z-index:4!important;right:52px!important;top:13px!important;width:34px!important;height:32px!important;padding:0!important;border:1px solid rgba(255,255,255,.2)!important;border-radius:16px!important;background:rgba(8,12,18,.68)!important;color:#fff!important;font-size:17px!important;line-height:1!important}.profileHeroMenu:hover{background:var(--profile-accent)!important;color:#111!important}.profileModalCard>.modalClose{z-index:12!important;background:rgba(8,12,18,.72)!important;color:#fff!important;border-radius:50%!important}
.spotifyPlaybackHelp{margin:12px 0;padding:13px 14px;border:1px solid #2c6748;border-radius:12px;background:linear-gradient(135deg,#122b20,#101a17);color:#eaf7ef}.spotifyPlaybackHelp>b{display:block;color:#62dd91;font-size:13px}.spotifyPlaybackHelp p{margin:7px 0;font-size:11px;line-height:1.55}.spotifyPlaybackHelp small{display:block;color:#aebeb5;font-size:9px;line-height:1.45}.spotifyPlayHere,#radioSpotifyPlayHere{background:linear-gradient(135deg,#1ed760,#119447)!important;color:#07130b!important}.spotifyPlayHere:disabled{opacity:.65;cursor:wait}.musicPlayerActions{flex-wrap:wrap!important}

/* v0.50.15 — tekenen 2.0 */
.voiceRecorderCard{width:min(480px,96vw)!important}.voiceRecorderVisual{display:grid;place-items:center;gap:7px;padding:22px;margin:12px 0;border:1px solid var(--gc-safe-line,var(--line));border-radius:16px;background:radial-gradient(circle at 50% 0,#27334a,#111722)}.voiceRecorderVisual i{font-style:normal;font-size:42px}.voiceRecorderVisual strong{font-size:30px;font-variant-numeric:tabular-nums}.voiceRecorderVisual span{color:var(--gc-safe-muted,var(--muted));font-size:11px}.voiceRecorderCard audio{width:100%;margin:8px 0}.voiceRecorderActions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.voiceRecorderActions button{min-height:44px}.voicePrivacy{display:block;margin-top:10px;color:var(--gc-safe-muted,var(--muted));font-size:9px;line-height:1.5}.composerVoice.recording{color:#ff4d5f!important;animation:gcUserGlowPulse 1s infinite}@media(max-width:420px){.voiceRecorderActions{grid-template-columns:1fr}.voiceRecorderVisual{padding:16px}}
.paintModalCard{width:min(930px,97vw)!important}.paintToolbar{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin:10px 0}.paintToolbar label,.paintToolbar button{min-height:38px;display:flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--gc-safe-line,var(--line));border-radius:9px;background:var(--gc-safe-surface2,var(--panel2));color:var(--gc-safe-text,var(--text))}.paintToolbar button.active{border-color:#21bdea;background:#123445}.paintToolbar input[type=color]{width:30px;height:28px;padding:0;border:0}.paintSize{flex:1;min-width:145px}.paintSize input{flex:1}.paintCanvasWrap{width:100%;max-height:58vh;overflow:hidden;border:1px solid var(--gc-safe-line,var(--line));border-radius:12px;background:#0a0f18;touch-action:none}.paintCanvasWrap canvas{display:block;width:100%;height:auto;max-height:58vh;object-fit:contain;touch-action:none}.paintTools{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}.paintTools button{min-height:42px}@media(max-width:600px){.paintModalCard{width:100%!important;padding:11px!important}.paintToolbar{display:grid;grid-template-columns:1fr 1fr}.paintSize{grid-column:1/-1}.paintCanvasWrap{max-height:48vh}.paintTools{display:grid;grid-template-columns:1fr 1fr}.paintTools #paintUse{grid-column:1/-1}.paintTools button{width:100%}}

/* v0.50.13 — volwaardige YouTube-addon */
.youtubeAddonCard{width:min(680px,96vw)!important}.youtubeUrlLabel{display:grid;gap:6px;font-size:11px;font-weight:850}.youtubeUrlLabel input{width:100%;min-height:44px}.youtubePreview{display:grid;gap:6px;margin:12px 0;min-height:210px;border:1px solid var(--gc-safe-line,var(--line));border-radius:14px;overflow:hidden;background:#080d15}.youtubePreview iframe{display:block;width:100%;aspect-ratio:16/9;border:0}.youtubePreview small{padding:0 10px 9px;color:var(--gc-safe-muted,var(--muted));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.youtubePreview .sideEmpty{min-height:210px;display:grid;place-items:center;text-align:center;padding:20px}.youtubeActions{display:flex;justify-content:flex-end;gap:8px}.youtubeActions button{min-height:42px}@media(max-width:520px){.youtubeAddonCard{width:100%!important}.youtubePreview{min-height:170px}.youtubePreview .sideEmpty{min-height:170px}.youtubeActions{display:grid;grid-template-columns:1fr 1fr}.youtubeActions button{width:100%}}

/* v0.50.14 — nameplates, animated avatars en configureerbare glow */
.gcNameplatePicker{display:grid;gap:10px;padding:13px;border:1px solid var(--gc-safe-line,var(--line));border-radius:14px;background:var(--gc-safe-surface,var(--panel2))}.gcNameplatePicker>div:first-child{display:grid;gap:3px}.gcNameplatePicker small{color:var(--gc-safe-muted,var(--muted));font-size:10px}.gcNameplateGallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.gcNameplateGallery button{position:relative;min-height:66px;padding:0;border:2px solid #39465a;border-radius:11px;overflow:hidden;background:#151b25;color:#fff;cursor:pointer}.gcNameplateGallery button.active{border-color:#18c9ff;box-shadow:0 0 15px #18c9ff55}.gcNameplateGallery video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.gcNameplateGallery span{font-size:25px}.gcNameplateGallery b{position:absolute;left:7px;bottom:6px;z-index:1;padding:3px 7px;border-radius:7px;background:#07101ccc;font-size:9px}.gcNameplateGallery button:first-child b{position:static;display:block;background:transparent}.gcNameplateVideo{position:absolute!important;inset:0!important;z-index:0!important;width:100%!important;height:100%!important;object-fit:cover!important;pointer-events:none!important}.userCard.glow-type-gradient{border-color:transparent!important;background:linear-gradient(#28303fdd,#28303fdd) padding-box,linear-gradient(100deg,var(--card-glow),var(--card-glow-2),var(--card-glow)) border-box!important}.userCard.glow-type-gradient .uName strong{background:linear-gradient(90deg,var(--card-glow),var(--card-glow-2));background-clip:text;-webkit-background-clip:text;color:transparent!important}.userCard.glow-anim-pulse{animation:gcUserGlowPulse 1.7s ease-in-out infinite}.userCard.glow-anim-breathe{animation:gcUserGlowBreathe 3s ease-in-out infinite}.userCard.glow-anim-neon .uName strong{animation:gcUserGlowNeon 1.8s ease-in-out infinite alternate}.userCard.glow-anim-flicker .uName strong{animation:gcUserGlowFlicker 2.7s linear infinite}.userCard.glow-anim-wave .uName strong{background:linear-gradient(90deg,var(--card-glow),var(--card-glow-2),var(--card-glow));background-size:220% 100%;background-clip:text;-webkit-background-clip:text;color:transparent!important;animation:gcUserGlowWave 2.2s linear infinite}.userCard.glow-anim-spark{animation:gcUserGlowSpark 2.6s ease-in-out infinite}.userCard.glow-anim-heartbeat{animation:gcUserGlowHeartbeat 1.5s ease-in-out infinite}.userCard.glow-anim-comet{background-size:220% 100%!important;animation:gcUserGlowComet 2.4s linear infinite}@keyframes gcUserGlowPulse{50%{box-shadow:0 0 21px var(--card-glow)}}@keyframes gcUserGlowBreathe{50%{filter:brightness(1.18);box-shadow:0 0 17px color-mix(in srgb,var(--card-glow) 70%,transparent)}}@keyframes gcUserGlowNeon{to{text-shadow:0 0 4px #fff,0 0 10px var(--card-glow),0 0 18px var(--card-glow-2)}}@keyframes gcUserGlowFlicker{0%,18%,22%,25%,53%,57%,100%{opacity:1;text-shadow:0 0 11px var(--card-glow)}20%,24%,55%{opacity:.55;text-shadow:none}}@keyframes gcUserGlowWave{to{background-position:-220% 0}}@keyframes gcUserGlowSpark{50%{border-color:#fff!important;box-shadow:0 0 18px var(--card-glow),0 0 4px #fff inset}}@keyframes gcUserGlowHeartbeat{0%,100%{transform:scale(1)}10%,30%{transform:scale(1.015)}20%,40%{transform:scale(1)}}@keyframes gcUserGlowComet{to{background-position:-220% 0}}@media(max-width:520px){.gcNameplateGallery{grid-template-columns:1fr}.gcNameplateGallery button{min-height:58px}}@media(prefers-reduced-motion:reduce){.userCard[class*="glow-anim-"]{animation:none!important}.userCard[class*="glow-anim-"] .uName strong{animation:none!important}.gcNameplateGallery video{display:none}}
@media(max-width:520px){.gcUserMenuGrid{grid-template-columns:1fr!important}.gcUserMenuTabs{position:sticky;top:-16px;z-index:2;background:var(--panel)}.gcUserMenuTabs button{flex:1;padding:0 8px}.profileHeroMenu{right:48px!important}}
/* GC mobile parity v0.36.2 */
@media(max-width:900px){
  .composer textarea{height:40px!important;min-height:40px!important;max-height:40px!important;overflow-y:hidden!important;scrollbar-width:none!important;line-height:20px!important;padding:9px 11px!important}
  .composer textarea::-webkit-scrollbar{display:none!important}
  .quickbar{gap:0!important;padding:4px 2px calc(4px + env(safe-area-inset-bottom))!important;overflow-x:hidden!important}
  .quickbar button{flex:1 1 0!important;min-width:0!important;max-width:none!important}
  .gcTopIcon{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:29px!important;height:34px!important;padding:0!important}
  .gcTopRight{gap:1px!important}.gcLogoImg{max-width:142px!important}
}
@media(max-width:410px){.gcTopIcon{width:27px!important;font-size:14px!important}.gcLogoImg{max-width:137px!important}}
/* GC mobile composer alignment v0.36.3 */
@media(max-width:900px){
  .chat{padding-bottom:0!important}
  .messages{padding-bottom:66px!important}
  .composer{position:fixed!important;left:0!important;right:0!important;bottom:58px!important;z-index:99!important;width:100%!important;height:56px!important;min-height:56px!important;margin:0!important;padding:8px 10px!important;align-items:center!important}
  .composer textarea{height:40px!important;min-height:40px!important;max-height:40px!important;white-space:nowrap!important;overflow:hidden!important;line-height:22px!important;padding:8px 12px!important}
  .composer>button{align-self:center!important}
}

/* GC responsive theme backgrounds v0.36.4 */
html,body{background-position:center center!important;background-repeat:no-repeat!important;background-size:cover!important}
#app,.layout{background-color:transparent!important}
@media(max-width:900px){
  html,body,#app,.layout,.chat{background-attachment:scroll!important}
  html,body{background-position:center center!important;background-size:cover!important}
  #app,.layout{background-image:none!important;background-color:transparent!important}
  .chat{background-position:center center!important;background-size:cover!important;background-repeat:no-repeat!important}
}

/* v0.50.1 — logical composer, bot and rules layout */
.composer{grid-template-columns:40px 40px minmax(0,1fr) 40px 44px!important}
.composerVoice{width:40px!important;height:40px!important;min-width:40px!important;padding:0!important;border-radius:50%!important;background:var(--gc-safe-surface2,var(--panel2))!important;color:var(--gc-safe-text,var(--text))!important;border:1px solid var(--gc-safe-line,var(--line))!important}
.composerVoice.recording{color:#fff!important;background:#d94756!important;animation:gcVoicePulse 1s infinite}
@keyframes gcVoicePulse{50%{box-shadow:0 0 0 7px rgba(217,71,86,.18)}}

/* v0.50.24 — recorder, menu-iconen en profiel-effecten */
.voiceVuMeter{--vu-level:0;display:grid!important;grid-template-columns:repeat(12,1fr);align-items:end;gap:4px;width:min(330px,90%);height:48px;padding:8px 10px;border:1px solid #334158;border-radius:12px;background:#080d16;overflow:hidden}
.voiceVuMeter span{display:block!important;height:28%;min-height:5px;border-radius:5px;background:#354158;transition:height .08s linear,background .08s linear,box-shadow .08s linear}
.voiceVuMeter span:nth-child(n+5){height:44%}.voiceVuMeter span:nth-child(n+9){height:62%}
.voiceVuMeter span.active{height:calc(18% + var(--vu-level)*.7%);background:#38d782;box-shadow:0 0 9px #38d78288}
.voiceVuMeter span.active:nth-last-child(-n+4){background:#ffc44d;box-shadow:0 0 9px #ffc44d88}.voiceVuMeter span.active:nth-last-child(-n+2){background:#ff586b;box-shadow:0 0 9px #ff586b99}
#voiceRecordPause{background:#253149!important}.voiceRecorderActions{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.gcDonateQuick i,[data-quick="donate"] i{color:#ff4059!important;font-size:29px!important;line-height:1!important;filter:drop-shadow(0 0 5px #ff405977)}
.quickbar [data-quick="rooms"] .gcHomeIcon{display:block!important;position:relative;width:20px!important;height:17px!important;margin:0 auto;background:currentColor;border-radius:2px 2px 4px 4px;clip-path:polygon(0 42%,50% 0,100% 42%,88% 42%,88% 100%,60% 100%,60% 67%,40% 67%,40% 100%,12% 100%,12% 42%);filter:drop-shadow(0 0 4px currentColor)}
.gcApplyQuick i,[data-quick="apply"] i{font-size:0!important;position:relative}.gcApplyQuick i:before,[data-quick="apply"] i:before{content:"";display:block;width:20px;height:20px;border:2px solid #78a6ff;border-radius:3px;transform:rotate(-8deg)}.gcApplyQuick i:after,[data-quick="apply"] i:after{content:"";position:absolute;width:3px;height:18px;background:#f5c75f;border-radius:3px;transform:rotate(42deg);left:11px;top:0;box-shadow:0 -3px 0 #fff}

#topPrivateBtn{font-size:0!important;position:relative}#topPrivateBtn:before{content:"";display:block;width:20px;height:14px;border:2px solid currentColor;border-radius:3px;background:linear-gradient(145deg,transparent 47%,currentColor 49% 52%,transparent 54%),linear-gradient(215deg,transparent 47%,currentColor 49% 52%,transparent 54%)}
#topPrivateBtn:before{width:19px;height:13px;color:#f3f6fc}#topPrivateBtn .badge{font-size:10px!important}
.gcNameplateVideo{filter:saturate(1.08) brightness(.82);transform:translateZ(0);will-change:transform}.userCard.has-nameplate:after{background:linear-gradient(90deg,#111827e8 0%,#172033b8 58%,#10172666 100%)!important}.userCard .uAvatar img[src$=".gif"],.userCard .uAvatar img[src*=".webp"],.userCard .uAvatar img[src*=".apng"]{image-rendering:auto;transform:translateZ(0);will-change:contents}.userCard[class*="glow-anim-"]{transform-origin:center;backface-visibility:hidden}
@media(max-width:420px){.voiceVuMeter{height:42px;gap:3px}.voiceRecorderActions{grid-template-columns:1fr 1fr!important}.voiceRecorderActions button{min-width:0;padding-inline:7px;font-size:12px}}

/* Persoonlijke leesbaarheidsmodus: alleen berichttekst, nooit naam- of profielstijl. */
.readableTextOption{margin-top:12px!important;padding:13px!important;border:1px solid var(--gc-safe-border)!important;border-radius:11px!important;background:rgba(255,255,255,.025)!important}
.readableTextOption small{display:block;margin-top:4px;color:var(--muted);line-height:1.45}
body.gc-readable-chat .msg .body,
body.gc-readable-chat .msg .replyQuote span,
body.gc-readable-chat .pmBody,
body.gc-readable-chat .gcAnnouncementBody{
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif!important;
  font-style:normal!important;font-variant:normal!important;font-weight:500!important;
  letter-spacing:normal!important;text-transform:none!important;text-shadow:none!important;
  font-size:max(15px,1em)!important;line-height:1.55!important;word-spacing:normal!important;
}

/* v0.50.27 — gelijke visuele maat voor de linker menu-iconen. */
.quickbar .gcDonateQuick i,.quickbar [data-quick="donate"] i{
  display:grid!important;place-items:center!important;width:25px!important;height:25px!important;
  font-size:33px!important;line-height:25px!important;transform:translateY(1px) scale(1.08)!important;
}
.quickbar .gcApplyQuick i,.quickbar [data-quick="apply"] i{display:block!important;width:18px!important;height:18px!important;transform:none!important}
.quickbar .gcApplyQuick i:before,.quickbar [data-quick="apply"] i:before{width:15px!important;height:15px!important;border-width:1.5px!important}
.quickbar .gcApplyQuick i:after,.quickbar [data-quick="apply"] i:after{width:2px!important;height:14px!important;left:9px!important;top:0!important}
.rulesModalCard{width:min(920px,96vw)!important;height:min(780px,92dvh)!important;display:flex!important;flex-direction:column!important;overflow:hidden!important}
.rulesFrame{width:100%!important;min-height:0!important;flex:1!important;border:1px solid var(--gc-safe-line,var(--line))!important;border-radius:10px!important;background:#0c1119!important}
@media(max-width:900px){
  .composer{grid-template-columns:38px 38px minmax(0,1fr) 38px 42px!important}
  .composerVoice{width:38px!important;height:38px!important;min-width:38px!important}
  .rulesModalCard{width:100%!important;height:100%!important;max-height:100%!important;border-radius:0!important;padding:12px!important}
}
@media(max-width:360px){
  .composer{grid-template-columns:34px 34px minmax(0,1fr) 34px 38px!important;gap:4px!important;padding-inline:5px!important}
  .composerVoice,.composer>button{width:34px!important;height:34px!important;min-width:34px!important}
}

/* v0.50.2 — Speelcafe quiz and Lucky Wheel */
.quizQuickBtn{position:absolute;right:14px;bottom:78px;z-index:12;padding:9px 14px;border:1px solid #d8b44f;border-radius:999px;background:#182234;color:#f4cf61;font-weight:900;box-shadow:0 8px 24px #0007}.quizQuickBtn:hover{transform:translateY(-1px)}
.coinGamesCard{width:min(650px,96vw)!important}.coinGameBalance{padding:12px;margin:10px 0;border:1px solid var(--line);border-radius:12px;text-align:center;background:var(--panel2);font-size:15px}.coinGameBalance strong{color:#f1cb62;font-size:22px}.coinStake{display:grid;grid-template-columns:auto 100px 1fr;align-items:center;gap:10px;margin:12px 0}.coinStake input{width:100%}.coinStake small{color:var(--muted)}.coinGameGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.coinGameGrid button{min-height:105px;padding:15px;border:1px solid var(--line);border-radius:13px;background:var(--panel2);color:var(--text)}.coinGameGrid b,.coinGameGrid small{display:block}.coinGameGrid b{font-size:15px}.coinGameGrid small{margin-top:6px;color:var(--muted);line-height:1.35}.coinGameResult{display:flex;flex-direction:column;align-items:center;gap:5px;min-height:72px;margin-top:14px;padding:14px;border-radius:12px;background:#0d1725;border:1px solid var(--line)}.coinGameResult strong{font-size:26px}.coinGameResult span{font-weight:800}.coinGameNotice{text-align:center;color:var(--muted);font-size:11px}
@media(max-width:600px){.coinGameGrid{grid-template-columns:1fr}.coinGameGrid button{min-height:76px}.coinStake{grid-template-columns:1fr 90px}.coinStake small{grid-column:1/-1}.coinGamesCard{max-height:92dvh!important;overflow:auto!important}}
.quizRoundMeta{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:10px 12px;margin-bottom:12px;border:1px solid var(--line);border-radius:10px;background:var(--panel2)}
.quizRoundMeta span{color:#7ed9ff;font-weight:800}.quizRoundMeta b{font-size:12px;color:var(--muted)}
.quizAnswers{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;margin-top:16px!important}
.quizAnswers button{display:flex!important;align-items:center!important;gap:10px!important;text-align:left!important;min-height:54px!important;padding:10px 12px!important}
.quizAnswers button i{display:grid;place-items:center;flex:0 0 30px;height:30px;border-radius:50%;background:#dcb85f;color:#17130a;font-style:normal;font-weight:900}
.luckyWheelCard{width:min(560px,95vw)!important;text-align:center}.luckyWheel{position:relative;width:230px;height:230px;margin:12px auto 18px}.luckyWheelDisc{width:100%;height:100%;display:grid;place-items:center;border-radius:50%;font-size:64px;border:10px solid #e8c55e;background:conic-gradient(#ff7657 0 12.5%,#7d67df 0 25%,#46bd8a 0 37.5%,#338cda 0 50%,#ec5995 0 62.5%,#efb443 0 75%,#5ec6c8 0 87.5%,#8c6ad8 0);box-shadow:0 0 0 5px #273246,0 16px 35px #0008;transition:transform 1.9s cubic-bezier(.12,.72,.18,1)}
.luckyWheelDisc.spinning{transform:rotate(1440deg)}.luckyPointer{position:absolute;left:50%;top:-16px;transform:translateX(-50%);font-size:28px;color:#fff;text-shadow:0 2px 5px #000}
.luckyWheelStatus{display:flex;flex-direction:column;gap:4px;min-height:48px;justify-content:center;margin-bottom:10px}.luckyWheelStatus strong{font-size:20px;color:#f1cb62}.luckyWheelStatus small{color:var(--muted)}
.luckyWheelCard #luckyWheelSpin:disabled{cursor:not-allowed;background:#303949!important;color:#aab4c3!important;opacity:1!important}.luckyWheelStatus small{line-height:1.55}
.luckyWheelPrizes{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:14px;max-height:110px;overflow:auto}.luckyWheelPrizes span{padding:5px 8px;border-radius:999px;background:var(--panel2);border:1px solid var(--line);font-size:11px}
@media(max-width:520px){.quizAnswers{grid-template-columns:1fr!important}.quizRoundMeta{align-items:flex-start;flex-direction:column}.luckyWheel{width:190px;height:190px}.luckyWheelDisc{font-size:50px}.quizQuickBtn{right:8px;bottom:72px;max-width:calc(100vw - 16px);padding:8px 12px;font-size:12px}}
@media(max-width:520px) and (orientation:portrait){
  .chat{background-position:center center!important}
}

/* v0.50.6 — compact profielmenu, profielniveau en mededelingen */
.gcProfileMenuCody{max-height:min(82dvh,720px)!important;overflow-y:auto!important;overscroll-behavior:contain}.gcProfileMenuGroup{padding:9px 14px 5px;color:#8e9db2;font-size:8px;font-weight:900;letter-spacing:.12em;background:#252b39;border-bottom:1px solid rgba(255,255,255,.04)}.gcProfileMenuCody button,.gcProfileMenuCody a{min-height:42px!important}.gcProfileMenuFooter{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #424b5e}.gcProfileMenuFooter button{grid-template-columns:24px 1fr!important;min-height:43px!important;border-bottom:0!important}.gcProfileMenuFooter button:last-child{color:#ffadb5!important}.gcProfileLevel{display:grid;grid-template-columns:48px minmax(0,1fr);gap:12px;align-items:center;margin:13px;padding:13px;border:1px solid color-mix(in srgb,var(--profile-accent) 55%,var(--gc-safe-line));border-radius:13px;background:linear-gradient(135deg,color-mix(in srgb,var(--profile-accent) 16%,var(--gc-safe-surface)),var(--gc-safe-surface2))}.gcProfileLevelIcon{width:46px;height:46px;display:grid;place-items:center;border-radius:50%;font-size:23px;background:#0c1522;border:1px solid #ffffff18}.gcProfileLevel small,.gcProfileLevel strong,.gcProfileLevel span{display:block}.gcProfileLevel small{font-size:8px;letter-spacing:.12em;color:var(--profile-accent);font-weight:900}.gcProfileLevel strong{font-size:17px;margin:2px 0}.gcProfileLevel span{font-size:9px;color:var(--gc-safe-muted)}.gcProfileLevel i{display:block;height:6px;margin-top:8px;border-radius:999px;overflow:hidden;background:#070d16}.gcProfileLevel i b{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--profile-accent),#f5d976)}
.msg.gcAnnouncement{width:min(720px,calc(100% - 20px));margin:9px auto!important;padding:0!important;display:grid!important;grid-template-columns:52px minmax(0,1fr)!important;gap:0!important;border:1px solid color-mix(in srgb,var(--gc-accent) 46%,var(--gc-safe-line))!important;border-radius:14px!important;overflow:hidden;background:linear-gradient(135deg,color-mix(in srgb,var(--gc-accent) 13%,var(--gc-safe-surface)),var(--gc-safe-surface2))!important;box-shadow:0 10px 28px #0003}.gcAnnouncementIcon{display:grid;place-items:center;font-size:22px;background:color-mix(in srgb,var(--gc-accent) 18%,#0a111c);border-right:1px solid color-mix(in srgb,var(--gc-accent) 38%,transparent)}.gcAnnouncementMain{min-width:0;padding:11px 13px}.gcAnnouncementHead{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.gcAnnouncementHead small{display:block;color:var(--gc-accent);font-size:8px;font-weight:950;letter-spacing:.14em}.gcAnnouncementHead b{display:block;margin-top:2px;font-size:13px}.gcAnnouncementHead time{color:var(--gc-safe-muted);font-size:9px;white-space:nowrap}.gcAnnouncementBody{margin-top:6px;color:var(--gc-safe-text);font-size:12px;line-height:1.45}.gcAnnouncement .msgActions,.gcAnnouncement .messageAvatar{display:none!important}
@media(max-width:520px){.gcProfileMenuCody{max-height:88dvh!important}.gcProfileMenuFooter{position:sticky;bottom:0;background:#2b3140}.msg.gcAnnouncement{grid-template-columns:42px minmax(0,1fr)!important;width:calc(100% - 12px)}.gcAnnouncementIcon{font-size:19px}.gcAnnouncementMain{padding:9px 10px}.gcAnnouncementHead b{font-size:12px}.gcAnnouncementBody{font-size:11px}}
.gcTour{position:fixed;inset:0;z-index:2147482500}.gcTourShade{position:absolute;inset:0;background:#030711cf;backdrop-filter:blur(2px)}.gcTourFocus{position:fixed;border:2px solid #f2c95d;border-radius:13px;box-shadow:0 0 0 5px #f2c95d2b,0 0 35px #f2c95d66;transition:.22s;pointer-events:none}.gcTourTip{position:fixed;width:min(370px,calc(100vw - 20px));padding:17px;border:1px solid #46546a;border-radius:15px;background:#192231;color:#f6f8fb;box-shadow:0 24px 70px #000b}.gcTourTip small{color:#e9c456;font-size:8px;font-weight:950;letter-spacing:.14em}.gcTourTip h3{margin:5px 0 6px;font-size:18px}.gcTourTip p{margin:0 0 15px;color:#b9c4d3;line-height:1.5}.gcTourTip>div{display:flex;justify-content:flex-end;gap:7px}.gcTourTip button{min-height:38px;padding:0 12px;border:0;border-radius:9px;background:#e7bc4f;color:#17130a;font-weight:900}.gcTourTip button.secondary{background:#2a3546;color:#dce3ed}.gcTourTip button:disabled{opacity:.35}@media(max-width:520px){.gcTourTip{left:10px!important;width:calc(100vw - 20px);padding:15px}.gcTourTip>div{display:grid;grid-template-columns:1fr 1fr 1fr}.gcTourTip button{padding:0 7px;font-size:11px}}

/* v0.50.3 — composer altijd op één regel */
.composer{display:grid!important;grid-template-columns:40px 40px minmax(0,1fr) 40px 44px!important;grid-template-rows:44px!important;grid-auto-flow:column!important;align-items:center!important;width:100%!important;overflow:visible!important}
.composerPlus{grid-column:1!important;grid-row:1!important}.composer>#emoji{grid-column:2!important;grid-row:1!important}.composerInputWrap{grid-column:3!important;grid-row:1!important;min-width:0!important}.composerVoice{grid-column:4!important;grid-row:1!important}.composerSend{grid-column:5!important;grid-row:1!important;width:44px!important;min-width:44px!important;height:44px!important}
@media(max-width:520px){.composer{grid-template-columns:36px 36px minmax(0,1fr) 36px 40px!important;grid-template-rows:40px!important;padding:5px!important;gap:4px!important}.composer>button,.composerSend{width:36px!important;min-width:36px!important;height:36px!important}.composerSend{width:40px!important;min-width:40px!important}.composerInputWrap,.composerInputWrap textarea{height:36px!important;min-height:36px!important}}


/* ============================================================
}

/* v0.50.4 — gecombineerde radio/Spotify-player */
.musicNowCard{display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:11px;margin:12px 0;padding:11px;border:1px solid var(--gc-safe-line,var(--line));border-radius:14px;background:var(--gc-safe-surface2,var(--panel2));min-width:0}.musicNowIcon{width:52px;height:52px;border-radius:11px;display:grid;place-items:center;background:#182234;color:#1ed760;font-size:24px;overflow:hidden}.musicNowIcon img{width:100%;height:100%;object-fit:cover}.musicNowCard>div{display:grid;min-width:0}.musicNowCard small{font-size:9px;color:var(--gc-safe-muted,var(--muted));letter-spacing:.08em}.musicNowCard b,.musicNowCard span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.musicNowCard b{font-size:13px}.musicNowCard>div>span{font-size:10px;color:var(--gc-safe-muted,var(--muted));margin-top:3px}.musicNowCard>a{color:#1ed760;font-size:11px;text-decoration:none}.musicPlayerActions{display:flex;gap:8px;margin-bottom:11px}.musicPlayerActions button{min-height:38px}.radioCard audio{width:100%;margin-top:10px}.radioStations{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.radioStation{min-width:0}.radioStation b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.radioCustom{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;margin-top:10px}
@media(max-width:520px){.musicNowCard{grid-template-columns:44px minmax(0,1fr);padding:9px}.musicNowIcon{width:44px;height:44px}.musicNowCard>a{grid-column:2}.musicPlayerActions{display:grid;grid-template-columns:1fr 1fr}.radioStations{grid-template-columns:1fr}.radioCustom{grid-template-columns:1fr}.radioCustom button{min-height:42px}}
.gcNativeAudio{display:none!important}.gcCompactPlayer{display:grid;grid-template-columns:64px minmax(0,1fr) 110px 58px;align-items:stretch;min-height:76px;margin:12px 0;border:1px solid #30394a;border-radius:15px;overflow:hidden;background:#11151d;color:#fff;box-shadow:0 9px 30px #0005}.gcMusicPlay{border:0!important;border-radius:0!important;background:#f7e9ed!important;color:#11151d!important;font-size:29px!important;padding:0!important}.gcMusicInfo{display:grid;align-content:center;min-width:0;padding:7px 11px;background:linear-gradient(100deg,#8e1738,#a51d48)}.gcMusicInfo small,.gcMusicInfo strong,.gcMusicInfo span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gcMusicInfo small{font-size:12px}.gcMusicInfo strong{font-size:20px;line-height:1.25}.gcMusicInfo span{font-size:10px;opacity:.8}.gcMusicLive{display:grid;place-content:center;text-align:center;color:#9aa2af;font-size:10px}.gcMusicLive>span{font-weight:900}.gcMusicLive label{display:grid;grid-template-columns:1fr;gap:1px}.gcMusicLive input{width:86px}.gcMusicCover{width:58px;height:58px;align-self:center;margin-right:8px;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:linear-gradient(135deg,#e36a37,#842756);color:#fff;font-weight:900;text-decoration:none}.gcMusicCover img{width:100%;height:100%;object-fit:cover}.gcCompactPlayer[data-source="spotify"] .gcMusicInfo{background:linear-gradient(100deg,#075c34,#13854e)}
@media(max-width:600px){.gcCompactPlayer{grid-template-columns:50px minmax(0,1fr) 48px;min-height:62px}.gcMusicPlay{font-size:22px!important}.gcMusicInfo{padding:6px 8px}.gcMusicInfo small{font-size:9px}.gcMusicInfo strong{font-size:14px}.gcMusicLive{display:none}.gcMusicCover{width:42px;height:42px;margin-right:5px}.musicPlayerActions{grid-template-columns:1fr 1fr}}

/* v0.50.9 — Lucky Wheel winstviering */
.authShowcase{position:relative;height:122px;margin:16px 0;border:1px solid #ffffff18;border-radius:16px;overflow:hidden;background:#080d16}.authShowcase figure{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .65s ease}.authShowcase figure.active{opacity:1}.authShowcase img{width:100%;height:100%;object-fit:cover}.authShowcase figcaption{position:absolute;left:0;right:0;bottom:0;padding:18px 12px 8px;background:linear-gradient(transparent,#000c);color:#fff;font-size:12px;font-weight:800}
.gcTourProgress{height:5px;margin:-3px 0 13px;border-radius:9px;overflow:hidden;background:#303b4d}.gcTourProgress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#e8b83f,#ff7a35);transition:width .25s}@media(max-width:520px){.gcTourTip{max-height:calc(100dvh - 16px);overflow:auto}.gcTourTip p{font-size:13px}.gcTourTip>div:last-child{position:sticky;bottom:0;padding-top:8px;background:#192231}}
.gcLuckyWin{position:fixed;inset:0;z-index:10050;display:grid;place-items:center;padding:18px;background:#020712c7;backdrop-filter:blur(7px)}.gcLuckyWin.hidden{display:none!important}.gcLuckyWin>section{position:relative;width:min(420px,100%);padding:30px 24px 25px;border:1px solid #f4c95d80;border-radius:24px;text-align:center;overflow:hidden;background:radial-gradient(circle at 50% 0,#493a18 0,#1d2432 46%,#111722 100%);box-shadow:0 24px 80px #000b,0 0 42px #f2c94c35;animation:gcLuckyPop .42s cubic-bezier(.2,1.3,.4,1)}#luckyWinClose{position:absolute;z-index:2;right:12px;top:10px;width:36px;height:36px;border:0;border-radius:50%;background:#ffffff12;color:#fff;font-size:24px;cursor:pointer}.gcLuckyWinIcon{font-size:64px;filter:drop-shadow(0 7px 12px #0008);animation:gcLuckyBounce .8s ease-in-out infinite alternate}.gcLuckyWin small{display:block;margin-top:8px;color:#f4c95d;font-weight:900;letter-spacing:.18em}.gcLuckyWin h2{margin:7px 0 4px;font-size:30px}.gcLuckyWin p{margin:0;color:#b9c2d1}.gcLuckyWin strong{display:block;margin:12px auto;padding:13px 18px;border:1px solid #f4c95d55;border-radius:14px;background:#0003;color:#ffe084;font-size:22px}.gcLuckyWin #luckyWinTimer{display:block;color:#97a3b7;font-size:12px}.gcLuckyConfetti{position:absolute;inset:0;pointer-events:none}.gcLuckyConfetti i{position:absolute;left:var(--x);top:-18px;width:8px;height:15px;border-radius:2px;background:var(--c);transform:rotate(var(--r));animation:gcConfettiFall 2.1s var(--d) ease-in forwards}@keyframes gcLuckyPop{from{opacity:0;transform:scale(.76) translateY(30px)}to{opacity:1;transform:none}}@keyframes gcLuckyBounce{to{transform:translateY(-7px) rotate(4deg)}}@keyframes gcConfettiFall{to{top:110%;transform:rotate(720deg) translateX(35px)}}@media(max-width:480px){.gcLuckyWin>section{padding:25px 17px 21px;border-radius:20px}.gcLuckyWinIcon{font-size:54px}.gcLuckyWin h2{font-size:25px}.gcLuckyWin strong{font-size:18px}}@media(prefers-reduced-motion:reduce){.gcLuckyWin>section,.gcLuckyWinIcon,.gcLuckyConfetti i{animation:none}}
.memoSearch{width:100%;margin:8px 0 12px}.memoFormActions,.memoItemActions{display:flex;gap:8px;flex-wrap:wrap}.memoItemActions{justify-content:flex-end;margin-top:10px}.memoItemActions button{min-height:36px;padding:7px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2);color:var(--text);cursor:pointer}.memoItemActions button:last-child{color:#ff9da8}.memoItem.pinned{border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}
.gcCodeBlock{margin:10px 0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#090e18;max-width:min(720px,100%)}.gcCodeBlock>div{display:flex;align-items:center;justify-content:space-between;padding:7px 10px;background:var(--panel-2);font-size:11px}.gcCodeBlock pre{margin:0;padding:12px;overflow:auto;white-space:pre;tab-size:2}.gcCodeBlock code{font:12px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace;color:#dbeafe}.gcCodeCopy{border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--text);padding:5px 9px;cursor:pointer}
.gcTranslation{margin:7px 0 4px;padding:10px 12px;border:1px solid color-mix(in srgb,var(--accent,#dcb85f) 40%,#36445a);border-radius:10px;background:#0b1422e6;color:#eef4ff}.gcTranslation small{display:block;margin-bottom:5px;color:#8fb7e9;font-weight:800}.gcTranslation>div{white-space:pre-wrap;overflow-wrap:anywhere}.gcTranslation button{margin-top:7px;padding:4px 8px;border:0;border-radius:7px;background:#ffffff12;color:#aebdd0}.gcTranslation button:hover{background:#ffffff20;color:#fff}@media(max-width:480px){.gcTranslation{padding:9px 10px;font-size:13px}.msgActions button[data-action="translate"]{display:inline-flex!important}}
.gcNameplateTools{display:grid!important;grid-template-columns:1fr 1fr;gap:9px}.gcNameplateTools label{display:grid!important;gap:4px;font-size:9px}.gcNameplateMedia,.gcNameplateMedia video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.gcNameplateFavorite{position:absolute!important;z-index:3!important;right:7px!important;top:5px!important;font-style:normal!important;font-size:20px!important;color:#fff!important;text-shadow:0 2px 6px #000!important}.gcNameplateFavorite.active{color:#ffd34f!important}.gcNameplateUserPreview.glow-type-solid{box-shadow:0 0 16px var(--card-glow),inset 0 0 8px color-mix(in srgb,var(--card-glow) 35%,transparent)}.gcNameplateUserPreview.glow-type-gradient{border-color:transparent;background:linear-gradient(#28303fdd,#28303fdd) padding-box,linear-gradient(100deg,var(--card-glow),var(--card-glow-2),var(--card-glow)) border-box}.gcNameplateUserPreview.glow-anim-pulse{animation:gcUserGlowPulse 1.7s ease-in-out infinite}.gcNameplateUserPreview.glow-anim-breathe{animation:gcUserGlowBreathe 3s ease-in-out infinite}.gcNameplateUserPreview.glow-anim-neon strong{animation:gcUserGlowNeon 1.8s ease-in-out infinite alternate}.gcNameplateUserPreview.glow-anim-flicker strong{animation:gcUserGlowFlicker 2.7s linear infinite}.gcNameplateUserPreview.glow-anim-wave strong{background:linear-gradient(90deg,var(--card-glow),var(--card-glow-2),var(--card-glow));background-size:220% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;animation:gcUserGlowWave 2.2s linear infinite}@media(max-width:520px){.gcNameplateTools{grid-template-columns:1fr}}

/* Volledige nameplatebibliotheek met lichte, mobiele userlist-preview */
.gcNameplateUserPreview{position:relative;isolation:isolate;min-height:58px;display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:9px;padding:8px 10px;overflow:hidden;border:1px solid var(--card-glow,#5d83d6);border-radius:11px;background:linear-gradient(90deg,#293141,#222a38);box-shadow:0 0 13px color-mix(in srgb,var(--card-glow,#5d83d6) 35%,transparent)}
.gcNameplateUserPreview>*:not(video){position:relative;z-index:1}.gcNameplateUserPreview .uAvatar{width:38px;height:38px}.gcNameplateUserPreview .uAvatar img{width:100%;height:100%;border-radius:50%;object-fit:cover}.gcNameplateUserPreview strong,.gcNameplateUserPreview small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gcNameplateUserPreview strong{font-size:12px}.gcNameplateUserPreview small{margin-top:3px;color:#aeb9c9;font-size:9px}.gcNameplatePreviewVideo{position:absolute;z-index:0;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9;pointer-events:none}.gcNameplateSearch{display:grid!important;grid-template-columns:auto minmax(150px,260px);align-items:center;gap:9px;font-size:10px}.gcNameplateSearch input{min-height:38px!important}.gcNameplateGallery{max-height:390px;overflow:auto;overscroll-behavior:contain;padding-right:4px;content-visibility:auto}.gcNameplateGallery button.hidden{display:none!important}.gcNameplateGallery button{content-visibility:auto;contain-intrinsic-size:66px}.gcNameplateGallery video{background:#111824}
@media(max-width:520px){.gcNameplateSearch{grid-template-columns:1fr}.gcNameplateGallery{max-height:52vh}.gcNameplateUserPreview{grid-template-columns:38px minmax(0,1fr) auto}}
.profilePrivacyFields{border:1px solid var(--line,#334155);border-radius:14px;padding:14px;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}.profilePrivacyFields legend{padding:0 8px;font-weight:900}.profilePrivacyFields>small{grid-column:1/-1;color:var(--muted,#94a3b8)}

/* STEP3 responsive hardening */
@media(max-width:900px){.modalCard{max-width:calc(100vw - 16px)!important}.addonTrayGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.profileSocialFields{grid-template-columns:1fr!important}.luckyWheelCard,.coinGamesCard,.youtubeAddonCard,.voiceRecorderCard,.shareInviteCard{width:min(100%,calc(100vw - 16px))!important;max-height:calc(100dvh - 20px)!important;overflow:auto!important}.gcCompactPlayer{max-width:100%!important}}
@media(max-width:520px){.addonTrayGrid{grid-template-columns:1fr 1fr!important}.referralStats{grid-template-columns:1fr 1fr!important}.coinGameGrid{grid-template-columns:1fr!important}.luckyWheelDisc{width:min(270px,76vw)!important;height:min(270px,76vw)!important}.profileTabbedForm .formGrid{grid-template-columns:1fr!important}}

/* STEP3A restored addons: responsive + icon/UI polish */
:root{--gc-touch:44px}
.gcIconBtn,.actionIcon,.addonIcon,.profileMenuIcon{display:inline-grid;place-items:center;flex:0 0 auto}
.actionTray button,.profileMenu button,.addonMenu button{min-height:var(--gc-touch)}
.modalCard{max-height:min(92dvh,980px);overflow:auto;overscroll-behavior:contain}
.paintCanvasWrap{width:100%;overflow:auto;border-radius:14px}.paintCanvasWrap canvas{display:block;width:100%;height:auto;touch-action:none}
.paintToolbar,.voiceRecorderActions,.musicPlayerActions,.shareButtons,.memoFormActions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.gcCompactPlayer{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:12px;align-items:center}
.gcMusicInfo{min-width:0}.gcMusicInfo strong,.gcMusicInfo span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.referralStats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.referralStats>span{text-align:center}
@media(max-width:900px){.gcCompactPlayer{grid-template-columns:auto minmax(0,1fr) auto}.gcMusicLive{grid-column:1/-1}.referralStats{grid-template-columns:repeat(2,minmax(0,1fr))}.adminGrid,.profileStudioGrid,.gameAdminGrid{grid-template-columns:1fr!important}}
@media(max-width:640px){.modal{padding:8px!important}.modalCard{width:min(100%,calc(100vw - 16px))!important;max-width:none!important;max-height:calc(100dvh - 16px)!important;border-radius:16px}.paintToolbar>*{flex:1 1 auto}.voiceRecorderActions>*{flex:1 1 calc(50% - 6px)}.gcCompactPlayer{grid-template-columns:auto minmax(0,1fr)}.gcMusicCover,.gcMusicLive{grid-column:1/-1}.shareButtons>*{flex:1 1 100%}.referralStats{grid-template-columns:1fr 1fr}.profileStudioTabs,.chatOptionsTabs{overflow-x:auto;scrollbar-width:thin}.profileStudioTabs>* ,.chatOptionsTabs>*{flex:0 0 auto}}
@media(max-width:420px){.voiceRecorderActions>*{flex-basis:100%}.referralStats{grid-template-columns:1fr}.paintToolbar label,.paintToolbar button{width:100%}}

/* STEP3B stability + restored 14-Aug addon polish */
.addonTrayGrid{grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:10px}.addonTrayGrid>button{min-height:92px;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:12px 8px}.addonTrayGrid .addonIcon{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:linear-gradient(145deg,#202b3a,#151c27);border:1px solid #526077;box-shadow:0 8px 20px #0004;font-size:22px;transition:.18s ease}.addonTrayGrid>button:hover .addonIcon{transform:translateY(-1px);border-color:var(--gold,#ddb85c)}.msg.supportbotQuestion .body,.msg.supportbotAnswer .body{border-left:3px solid var(--gold,#ddb85c);padding-left:10px}.msg .mention{display:inline-block;padding:1px 5px;border-radius:6px;background:color-mix(in srgb,var(--user-accent,#5f91d8) 22%,transparent);color:#dfeaff;font-weight:800}@media(max-width:720px){.addonTrayGrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.addonTrayGrid>button{min-height:82px;padding:9px 5px}.addonTrayGrid .addonIcon{width:42px;height:42px;font-size:19px}}@media(max-width:420px){.addonTrayGrid{grid-template-columns:repeat(2,minmax(0,1fr))}}


/* STEP3C — responsive safety layer for restored modules and profile progress. */
.gcProfileLevel{position:relative!important}
.gcProfileLevelMain{min-width:0!important}
.gcProfileLevelMain em{position:absolute;right:18px;top:20px;font-style:normal;font-size:9px;font-weight:900;color:var(--profile-accent)}
.gcLuckyWin.gcLuckyNoPrize>section{background:radial-gradient(circle at 50% 0,#263447 0,#1b2330 46%,#111722 100%);border-color:#71819a80;box-shadow:0 24px 80px #000b,0 0 34px #8193ad1f}
.gcLuckyWin.gcLuckyNoPrize .gcLuckyWinIcon{animation:none}
.gcLuckyWin.gcLuckyNoPrize small{color:#9fb0c8}
.gcLuckyWin.gcLuckyNoPrize strong{border-color:#71819a66;color:#dce6f4;background:#09111d66}
.modal,.gcLuckyWin,.gcUserMenuOverlay{max-width:100vw!important}
.modalCard,.profileModalCard,.profileEditorCard,.spotifyNowCard,.coinGamesCard,.luckyWheelCard,.youtubeAddonCard,.shareInviteCard{max-width:calc(100vw - 20px)!important;max-height:calc(100dvh - 20px)!important;overflow:auto!important;overscroll-behavior:contain!important}
.coinGameGrid,.addonGrid,.shareButtons,.spotifyActions,.voiceActions,.paintTools{min-width:0!important}
.coinGameGrid>* ,.addonGrid>*{min-width:0!important}
img,video,canvas,iframe{max-width:100%}
@media(max-width:900px){
  .gcProfileLevel{grid-template-columns:42px minmax(0,1fr)!important;margin:10px!important;padding:11px!important}
  .gcProfileLevelIcon{width:40px!important;height:40px!important;font-size:20px!important}
  .gcProfileLevel strong{font-size:15px!important}
  .gcProfileLevelMain em{right:12px;top:14px}
  .coinGameGrid{grid-template-columns:1fr!important}
  .coinGameGrid button{min-height:74px!important}
}
@media(max-width:600px){
  .modal{padding:6px!important;align-items:flex-start!important}
  .modalCard,.profileModalCard,.profileEditorCard{width:100%!important;max-width:100%!important;max-height:calc(100dvh - 12px)!important;border-radius:14px!important}
  .gcProfileLevel{grid-template-columns:38px minmax(0,1fr)!important}
  .gcProfileLevelIcon{width:36px!important;height:36px!important}
  .gcProfileLevel span{padding-right:34px}
  .shareButtons{display:grid!important;grid-template-columns:1fr!important}
  .spotifyActions>*{flex:1 1 100%!important}
  .voiceActions,.youtubeActions{display:grid!important;grid-template-columns:1fr!important}
  .paintCanvasWrap{overflow:auto!important;-webkit-overflow-scrolling:touch}
}
@media(max-width:380px){
  .gcProfileLevel{grid-template-columns:1fr!important;text-align:center!important}
  .gcProfileLevelIcon{margin:auto!important}
  .gcProfileLevelMain em{position:static!important;margin-top:5px!important}
  .gcProfileLevel span{padding-right:0!important}
}

/* STEP3D composer command palette */
.composerInputWrap{position:relative;min-width:0}.commandSuggestions{position:absolute;left:0;right:0;bottom:calc(100% + 8px);z-index:75;background:#111927;border:1px solid var(--line);border-radius:12px;padding:6px;box-shadow:0 18px 55px #0009;max-height:min(360px,45vh);overflow:auto}.commandSuggestions button{width:100%;display:grid;grid-template-columns:minmax(110px,.65fr) minmax(0,1.6fr) auto;gap:10px;align-items:center;text-align:left;border:0;background:transparent;color:var(--text);padding:9px 10px;border-radius:8px;cursor:pointer}.commandSuggestions button:hover,.commandSuggestions button.active{background:#202d42}.commandSuggestions .commandCode{font-weight:800;color:var(--gold);white-space:nowrap}.commandSuggestions .commandDesc{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.commandSuggestions b{font-size:9px;border:1px solid #52617a;border-radius:8px;padding:3px 6px;color:#dbe5f5}@media(max-width:600px){.commandSuggestions{left:-42px;right:-54px;max-height:38vh}.commandSuggestions button{grid-template-columns:105px minmax(0,1fr);gap:7px}.commandSuggestions b{display:none}.commandSuggestions .commandDesc{font-size:12px}}


/* STEP3E legal center / mention UX */
.legalCenterCard{width:min(980px,96vw)!important;height:min(850px,94dvh)!important;display:flex!important;flex-direction:column!important;overflow:hidden!important}.legalTabs{display:flex!important;gap:7px!important;flex-wrap:wrap!important;margin:8px 0 10px!important}.legalTabs button{min-height:38px!important;padding:0 13px!important;border:1px solid var(--gc-safe-line,var(--line))!important;border-radius:9px!important;background:var(--gc-safe-surface2,var(--panel2))!important;color:var(--gc-safe-text,var(--text))!important;font-weight:800!important}.legalTabs button.active{border-color:var(--gc-accent)!important;box-shadow:0 0 0 1px var(--gc-accent) inset!important}.legalCenterFrame{width:100%!important;flex:1!important;min-height:0!important;border:1px solid var(--gc-safe-line,var(--line))!important;border-radius:12px!important;background:#0c1119!important}.mentionSuggestions:not(.hidden){display:block!important;visibility:visible!important;opacity:1!important}@media(max-width:600px){.legalCenterCard{width:100%!important;height:100dvh!important;max-height:100dvh!important;border-radius:0!important;padding:10px!important}.legalTabs{display:grid!important;grid-template-columns:repeat(3,1fr)!important}.legalTabs button{padding:0 5px!important;font-size:10px!important}.legalCenterFrame{border-radius:8px!important}.mentionSuggestions{left:0!important;right:0!important;width:100%!important;max-width:none!important}}
/* STEP3F name color, nameplate addon, legal/auth responsive */
.authLegal strong{color:#e8c15d}.authLegal button,.legalInline{appearance:none;border:0;background:none;padding:0;color:#d9b553;text-decoration:underline;cursor:pointer;font:inherit}.authLegal button:hover,.legalInline:hover{color:#fff}.authPanel:after{content:'16+';position:absolute;right:20px;bottom:18px;padding:4px 8px;border:1px solid #8a6d2b;border-radius:999px;color:#e8c15d;font-weight:800;font-size:10px}.nameplateAddonCard{width:min(920px,calc(100vw - 24px));max-height:min(880px,calc(100dvh - 24px));overflow:auto}.addonNameplateGallery{max-height:58dvh;overflow:auto;padding-right:5px}.addonNameplateGallery .gcNameplateMedia{position:absolute;inset:0}.addonNameplateGallery .gcNameplateMedia video{width:100%;height:100%;object-fit:cover}.nameplateAddonActions{position:sticky;bottom:0;display:flex;justify-content:flex-end;padding-top:12px;background:linear-gradient(transparent,var(--panel) 28%)}
#profileForm .gcNameplatePicker{display:none!important}.msg .name{transition:filter .15s}.msg .name:hover,.userCard .uName strong{filter:brightness(1.08)}
@media(max-width:820px){.authPanel:after{right:12px;bottom:10px}.nameplateAddonCard{width:calc(100vw - 12px);max-height:calc(100dvh - 12px)}.addonNameplateGallery{grid-template-columns:1fr 1fr;max-height:62dvh}}
@media(max-width:480px){.addonNameplateGallery{grid-template-columns:1fr}.gcNameplateTools{grid-template-columns:1fr!important}.authFooter{padding-bottom:18px}}

/* STEP3F.1 userlist studio + nameplate addon polish */
.addonIconNameplate{background:radial-gradient(circle at 30% 25%,#fff4c6 0 8%,transparent 9%),linear-gradient(135deg,#7d5cff,#e55cff 55%,#ffb44d)!important;color:#fff!important;text-shadow:0 1px 5px #0008;font-size:22px!important}.nameplateQuickBtn .addonIcon{box-shadow:0 0 0 1px #ffffff25 inset,0 8px 20px #8f59ff22!important}.userlistStyleStudio{display:grid;gap:14px;padding:16px;border:1px solid #334154;border-radius:15px;background:linear-gradient(180deg,#151d2a,#101720)}.userlistStyleHead{display:flex;align-items:center;justify-content:space-between;gap:14px}.userlistStyleHead>div{min-width:0}.userlistStyleHead b,.userlistStyleHead small{display:block}.userlistStyleHead small{margin-top:4px;color:#9caabd;line-height:1.5}.userlistStyleGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.userlistStyleGrid label{display:grid;gap:6px}.userlistStyleNote{margin:0;color:#9eabba;font-size:11px}.userlistLiveCard{min-height:76px!important;grid-template-columns:52px minmax(0,1fr) auto!important;padding:10px 12px!important}.userlistLiveCard .uAvatar{width:48px!important;height:48px!important;position:relative!important;z-index:2}.userlistLiveCard.frame-gold .uAvatar{border:2px solid #e7bd51;border-radius:50%;box-shadow:0 0 0 2px #201b0e}.userlistLiveCard.frame-neon .uAvatar{border:2px solid #47d7ff;border-radius:50%;box-shadow:0 0 12px #47d7ff99}.userlistLiveCard.frame-vip .uAvatar{border:2px solid #b58cff;border-radius:50%;box-shadow:0 0 14px #925cff99}.userlistPreviewText>div{display:flex;align-items:center;gap:7px;min-width:0}.userlistPreviewRank{font-size:8px;font-weight:900;padding:2px 5px;border-radius:999px;background:#e9c04e;color:#17140a;flex:0 0 auto}.userlistLiveCard.effect-glow strong{text-shadow:0 0 8px currentColor}.userlistLiveCard.effect-gradient strong{background:linear-gradient(90deg,#fff,var(--card-glow),var(--card-glow-2));background-clip:text;-webkit-background-clip:text;color:transparent!important}.userlistLiveCard.effect-pulse strong{animation:gcUserGlowPulse 1.6s ease-in-out infinite}.legalInline{position:relative;z-index:2}.authCheck .legalInline{pointer-events:auto!important}.advancedUrlField{opacity:.9}.profileFieldsGrid>input[type=hidden]{display:none!important}@media(max-width:760px){.userlistStyleHead{align-items:stretch;flex-direction:column}.userlistStyleHead .secondaryBtn{width:100%}.userlistStyleGrid{grid-template-columns:1fr}.userlistStyleStudio{padding:12px}.userlistLiveCard{grid-template-columns:46px minmax(0,1fr) auto!important}.userlistLiveCard .uAvatar{width:42px!important;height:42px!important}}

.userCard.frame-gold .uAvatar{border:2px solid #e6bc4f;border-radius:50%;box-shadow:0 0 0 2px #2b2414}.userCard.frame-neon .uAvatar{border:2px solid #4dd9ff;border-radius:50%;box-shadow:0 0 12px #4dd9ff88}.userCard.frame-vip .uAvatar{border:2px solid #b17aff;border-radius:50%;box-shadow:0 0 13px #9b5cff88}.userCard.effect-glow .userStyledName{text-shadow:0 0 8px currentColor}.userCard.effect-gradient .userStyledName{background:linear-gradient(90deg,currentColor,var(--card-glow),var(--card-glow-2));background-clip:text;-webkit-background-clip:text;color:transparent!important}.userCard.effect-pulse .userStyledName{animation:gcUserGlowPulse 1.6s ease-in-out infinite}


/* STEP3F2 — nameplate fit/readability + legal click hard-fix */
.userCard.has-nameplate{
  isolation:isolate!important;
  background:#151c28!important;
  border-color:color-mix(in srgb,var(--card-glow) 70%,#53627a)!important;
}
.userCard .gcNameplateVideo{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  opacity:1!important;
  filter:saturate(1.04) brightness(.96)!important;
  z-index:0!important;
  pointer-events:none!important;
  border-radius:inherit!important;
}
.userCard.has-nameplate:after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  pointer-events:none!important;
  background:linear-gradient(90deg,rgba(10,15,24,.55) 0%,rgba(10,15,24,.26) 55%,rgba(10,15,24,.12) 100%)!important;
}
.userCard.has-nameplate>*:not(.gcNameplateVideo){position:relative!important;z-index:2!important}
.userCard.has-nameplate .uBody small{color:#eef3fb!important;text-shadow:0 1px 4px #000,0 0 3px #000!important}
.userCard.has-nameplate .uName strong{text-shadow:0 1px 4px #000,0 0 5px #000!important}
.userCard.has-nameplate .uMeta{filter:drop-shadow(0 1px 3px #000)}
.legalTabs button[data-legal-path="/voorwaarden"],.authLegal button[data-legal-path="/voorwaarden"],.legalInline[data-legal-path="/voorwaarden"]{pointer-events:auto!important;position:relative!important;z-index:8!important;cursor:pointer!important}
@media(max-width:520px){
  .userCard .gcNameplateVideo{object-fit:fill!important}
}

/* STEP3F3 — nameplates uitsluitend userlist + performance guard */
.msg .gcNameplateVideo,.msg .gcMessageNameplate,.chatMessages .gcNameplateVideo{display:none!important}
#users .userCard.has-nameplate{overflow:hidden!important;contain:layout paint style!important}
#users .userCard.has-nameplate .gcNameplateVideo{display:block!important;max-width:100%!important;max-height:100%!important;transform:translateZ(0);will-change:auto}
#legalCenterModal.hidden #legalCenterFrame{visibility:hidden}
#legalCenterModal:not(.hidden) #legalCenterFrame{visibility:visible}


/* STEP3F4 — nameplate gallery polish + full userlist fit */
.nameplateAddonCard{
  width:min(960px,calc(100vw - 28px))!important;
  height:min(900px,calc(100dvh - 28px))!important;
  max-height:none!important;
  display:grid!important;
  grid-template-rows:auto auto minmax(0,1fr) auto!important;
  gap:12px!important;
  overflow:hidden!important;
  padding:18px!important;
}
.nameplateAddonCard>.modalTitle{padding-right:42px!important}
.nameplateAddonCard>.modalTitle h3{margin:2px 0 5px!important;font-size:27px!important}
.nameplateAddonCard>.modalTitle p{max-width:760px!important;margin:0!important;color:var(--muted)!important;line-height:1.45!important}
.nameplateAddonCard .gcNameplateTools{display:grid!important;grid-template-columns:minmax(180px,.72fr) minmax(240px,1.28fr)!important;gap:10px!important;padding:10px!important;border:1px solid var(--line)!important;border-radius:13px!important;background:#0f1622!important}
.nameplateAddonCard .gcNameplateTools label{display:grid!important;gap:5px!important;font-size:10px!important;font-weight:850!important;color:#d8e0ec!important}
.nameplateAddonCard .gcNameplateTools select,.nameplateAddonCard .gcNameplateTools input{width:100%!important;min-height:40px!important;border-radius:9px!important;background:#0b111a!important}
.addonNameplateGallery{
  min-height:0!important;max-height:none!important;height:100%!important;overflow:auto!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;
  padding:2px 6px 8px 2px!important;scrollbar-gutter:stable!important;overscroll-behavior:contain!important;
}
.addonNameplateGallery button{min-height:76px!important;border:1px solid #405069!important;border-radius:13px!important;background:#0d1420!important;transition:border-color .15s,box-shadow .15s,transform .15s!important}
.addonNameplateGallery button:hover{border-color:#7d8da8!important;transform:translateY(-1px)!important}
.addonNameplateGallery button.active{border-color:#f0bd49!important;box-shadow:0 0 0 2px #f0bd4938 inset,0 7px 22px #0005!important}
.addonNameplateGallery button.active:after{content:'✓';position:absolute;right:8px;top:8px;z-index:3;width:23px;height:23px;display:grid;place-items:center;border-radius:50%;background:#e9bd50;color:#111;font-size:13px;font-weight:950;box-shadow:0 2px 8px #0008}
.addonNameplateGallery .gcNameplateMedia{background:#111927!important}
.addonNameplateGallery .gcNameplateMedia video{object-fit:fill!important;filter:saturate(1.02) brightness(.98)!important}
.addonNameplateGallery b{left:9px!important;bottom:8px!important;max-width:calc(100% - 50px)!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;padding:4px 8px!important;border:1px solid #ffffff10!important;background:#07101de8!important;font-size:10px!important}
.nameplateAddonActions{position:static!important;padding:10px 0 0!important;border-top:1px solid var(--line)!important;background:transparent!important}
.nameplateAddonActions #saveNameplateAddon{min-height:44px!important;padding-inline:20px!important}
#users .userCard.has-nameplate .gcNameplateVideo{
  inset:0!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;
  object-fit:fill!important;object-position:center!important;transform:none!important;
}
#users .userCard.has-nameplate:after{background:linear-gradient(90deg,rgba(7,11,18,.42),rgba(7,11,18,.18) 62%,rgba(7,11,18,.08))!important}
@media(max-width:760px){
  .nameplateAddonCard{width:calc(100vw - 10px)!important;height:calc(100dvh - 10px)!important;padding:12px!important;border-radius:14px!important}
  .nameplateAddonCard .gcNameplateTools{grid-template-columns:1fr 1fr!important;padding:8px!important}
  .addonNameplateGallery{grid-template-columns:1fr!important;gap:8px!important}
  .addonNameplateGallery button{min-height:68px!important}
  .nameplateAddonActions{padding-bottom:max(2px,env(safe-area-inset-bottom))!important}
}
@media(max-width:430px){
  .nameplateAddonCard{width:100vw!important;height:100dvh!important;border-radius:0!important;padding:10px!important}
  .nameplateAddonCard>.modalTitle h3{font-size:23px!important}
  .nameplateAddonCard>.modalTitle p{font-size:11px!important}
  .nameplateAddonCard .gcNameplateTools{grid-template-columns:1fr!important;gap:7px!important}
  .addonNameplateGallery button{min-height:64px!important}
  .nameplateAddonActions #saveNameplateAddon{width:100%!important}
}


/* STEP3G — stable responsive nameplates + admin/dialog polish */
.nameplateAddonCard{
  width:min(900px,calc(100vw - 24px))!important;
  height:min(820px,calc(100dvh - 24px))!important;
  max-height:calc(100dvh - 24px)!important;
  display:grid!important;
  grid-template-rows:auto auto minmax(0,1fr) auto!important;
  gap:10px!important;
  overflow:hidden!important;
  padding:16px!important;
}
.nameplateAddonCard .gcNameplateTools{display:grid!important;grid-template-columns:minmax(180px,.7fr) minmax(220px,1.3fr)!important;gap:10px!important;padding:10px!important;border:1px solid var(--line)!important;border-radius:12px!important;background:#0f1622!important}
.nameplateAddonCard .gcNameplateTools label{display:grid!important;gap:5px!important;font-size:10px!important;font-weight:800!important}
.nameplateAddonCard .gcNameplateTools select,.nameplateAddonCard .gcNameplateTools input{width:100%!important;min-height:40px!important;margin:0!important;border-radius:9px!important}
.addonNameplateGallery{min-height:0!important;height:100%!important;max-height:none!important;overflow:auto!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;align-content:start!important;gap:8px!important;padding:2px 5px 8px 2px!important;scrollbar-gutter:stable!important;overscroll-behavior:contain!important}
.addonNameplateGallery button{position:relative!important;min-height:68px!important;aspect-ratio:448/84!important;padding:0!important;border:1px solid #3d4b61!important;border-radius:11px!important;overflow:hidden!important;background:#101724!important;transition:border-color .14s ease,box-shadow .14s ease,transform .14s ease!important}
.addonNameplateGallery button:hover{border-color:#7587a4!important;transform:translateY(-1px)!important}
.addonNameplateGallery button.active{border-color:#e9bd50!important;box-shadow:0 0 0 2px #e9bd5030 inset!important}
.addonNameplateGallery button.active:after{content:'✓';position:absolute;right:7px;top:7px;z-index:4;width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:#e9bd50;color:#111;font-size:12px;font-weight:950;box-shadow:0 2px 8px #0008}
.addonNameplateGallery .gcNameplateMedia,.addonNameplateGallery .gcNameplateMedia video{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}
.addonNameplateGallery .gcNameplateMedia video{object-fit:contain!important;object-position:center!important;background:#0c121d!important;filter:none!important}
.addonNameplateGallery b{position:absolute!important;left:7px!important;bottom:6px!important;z-index:3!important;max-width:calc(100% - 44px)!important;padding:3px 7px!important;border-radius:7px!important;background:#07101de8!important;color:#fff!important;font-size:9px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.nameplateAddonActions{position:static!important;display:flex!important;justify-content:flex-end!important;padding-top:9px!important;border-top:1px solid var(--line)!important;background:transparent!important}
#users .userCard.has-nameplate{min-height:66px!important;overflow:hidden!important;background:#101621!important}
#users .userCard.has-nameplate .gcNameplateVideo{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important;background:#101621!important;opacity:1!important;filter:none!important;transform:translateZ(0)!important}
#users .userCard.has-nameplate:after{background:linear-gradient(90deg,rgba(8,12,19,.58),rgba(8,12,19,.25) 58%,rgba(8,12,19,.12))!important}
.gcAdminEditOverlay{position:fixed;inset:0;z-index:190;background:#020711d9;display:grid;place-items:center;padding:14px}.gcAdminEditDialog{width:min(720px,100%);max-height:calc(100dvh - 28px);overflow:auto;background:#182130;border:1px solid #3b4b62;border-radius:16px;padding:18px;box-shadow:0 28px 90px #000b}.gcAdminEditDialog header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.gcAdminEditDialog header h3{margin:0}.gcAdminEditDialog .gcDialogGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.gcAdminEditDialog label{display:grid;gap:5px}.gcAdminEditDialog .wide{grid-column:1/-1}.gcAdminEditDialog input,.gcAdminEditDialog select,.gcAdminEditDialog textarea{width:100%;box-sizing:border-box}.gcAdminEditDialog footer{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}.logCards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}.logRoomCard{padding:12px;border:1px solid #35445a;border-radius:12px;background:#141c29}.logRoomCard button{width:100%}.gcLogTable td{vertical-align:top}.gcLogDeleted{opacity:.64}.gcLogBody{white-space:pre-wrap;word-break:break-word;max-width:680px}
@media(max-width:720px){.nameplateAddonCard{width:calc(100vw - 8px)!important;height:calc(100dvh - 8px)!important;max-height:calc(100dvh - 8px)!important;border-radius:14px!important;padding:11px!important}.nameplateAddonCard .gcNameplateTools{grid-template-columns:1fr!important;padding:8px!important}.addonNameplateGallery{grid-template-columns:1fr!important}.addonNameplateGallery button{min-height:0!important;width:100%!important;aspect-ratio:448/84!important}.nameplateAddonActions #saveNameplateAddon{width:100%!important}.gcAdminEditDialog{width:100%;border-radius:13px;padding:13px}.gcAdminEditDialog .gcDialogGrid{grid-template-columns:1fr}.gcAdminEditDialog .wide{grid-column:auto}}
@media(max-width:420px){.nameplateAddonCard{width:100vw!important;height:100dvh!important;max-height:100dvh!important;border-radius:0!important}.nameplateAddonCard>.modalTitle h3{font-size:22px!important}.nameplateAddonCard>.modalTitle p{font-size:11px!important}.addonNameplateGallery button{aspect-ratio:448/84!important}}


/* STEP3G final — complete nameplate visibility without chat-message video cost */
#users .userCard.has-nameplate .gcNameplateVideo{
  inset:50% auto auto 50%!important;
  width:100%!important;
  height:auto!important;
  aspect-ratio:448/84!important;
  transform:translate(-50%,-50%) translateZ(0)!important;
  object-fit:contain!important;
  object-position:center!important;
  background:transparent!important;
}
#users .userCard.has-nameplate:after{background:linear-gradient(90deg,rgba(8,12,19,.50),rgba(8,12,19,.18) 58%,rgba(8,12,19,.05))!important}
@media(min-width:760px){#users .userCard.has-nameplate{min-height:58px!important}}
@media(max-width:759px){#users .userCard.has-nameplate .gcNameplateVideo{width:100%!important;height:100%!important;aspect-ratio:auto!important;object-fit:contain!important}}

/* STEP3H.3 — mobile/tablet profile menu: fully reachable and scroll-stable */
.gcProfileMenuCody{
  -webkit-overflow-scrolling:touch!important;
  touch-action:pan-y!important;
  overflow-anchor:none!important;
  contain:layout paint!important;
}
@media(max-width:900px){
  .gcProfileMenuCody{
    position:fixed!important;
    top:52px!important;
    right:0!important;
    bottom:0!important;
    left:auto!important;
    width:min(390px,100vw)!important;
    height:auto!important;
    max-height:none!important;
    padding:0 0 max(10px,env(safe-area-inset-bottom))!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior-y:contain!important;
    scrollbar-gutter:stable!important;
    border-radius:0 0 0 14px!important;
    z-index:12000!important;
  }
  .gcProfileMenuCody button,.gcProfileMenuCody a{
    min-height:50px!important;
    flex-shrink:0!important;
    touch-action:manipulation!important;
  }
  .profileMenuIdentity{
    position:sticky!important;
    top:0!important;
    z-index:3!important;
    background:#2b3140!important;
  }
}
@media(max-width:520px){
  .gcProfileMenuCody{
    top:max(52px,env(safe-area-inset-top))!important;
    left:0!important;
    right:0!important;
    width:100vw!important;
    border-left:0!important;
    border-right:0!important;
    border-radius:0!important;
  }
  .gcProfileMenuCody button,.gcProfileMenuCody a{min-height:54px!important;padding:10px 16px!important}
  .gcProfileMenuCody b{font-size:13px!important}
}

/* STEP3H.4 — universal mobile/tablet interaction + responsive safety */
html,body{max-width:100%;overscroll-behavior:none}
button,a,input,select,textarea,[role="button"]{-webkit-tap-highlight-color:transparent}
button,a,[role="button"]{touch-action:manipulation}
input,select,textarea{touch-action:manipulation}
.modal,.overlay,.gcUserMenuOverlay{touch-action:pan-y}
.modalCard,.profileModalCard,.profileEditorCard,.pmCard,.addonModal,.actionTray,.emojiPanel,.gcProfileMenuCody{
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior:contain!important;
}
.gcProfileMenuCody{
  contain:none!important;
  overflow-anchor:auto!important;
  pointer-events:auto!important;
}
.gcProfileMenuCody *{pointer-events:auto!important}
.gcProfileMenuCody button,.gcProfileMenuCody a{position:relative!important;z-index:2!important;cursor:pointer!important;user-select:none!important;-webkit-user-select:none!important}

@media (max-width:900px){
  :root{--gc-mobile-top:52px;--gc-mobile-bottom:56px}
  .layout{min-width:0!important;max-width:100vw!important;overflow:hidden!important}
  .chat{min-width:0!important;width:100%!important;max-width:100vw!important}
  .messages{min-width:0!important;overflow-x:hidden!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior-y:contain!important}
  .msg,.body,.messageContent{min-width:0!important;max-width:100%!important;overflow-wrap:anywhere!important;word-break:break-word!important}
  .gcProfileMenuCody{
    position:fixed!important;
    top:var(--gc-mobile-top)!important;
    right:0!important;
    bottom:var(--gc-mobile-bottom)!important;
    left:auto!important;
    width:min(390px,100vw)!important;
    max-width:100vw!important;
    height:auto!important;
    max-height:none!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding-bottom:max(12px,env(safe-area-inset-bottom))!important;
    z-index:2147482500!important;
    transform:none!important;
  }
  .gcProfileMenuCody button,.gcProfileMenuCody a{min-height:52px!important}
  .profileMenuIdentity{position:relative!important;top:auto!important}
  .rooms,.users{max-width:94vw!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior:contain!important}
  .sidebarBackdrop{z-index:119!important}
  .rooms.mobileOpen,.users.mobileOpen{z-index:220!important}
  .modal{z-index:2147482000!important;padding:max(6px,env(safe-area-inset-top)) 6px max(6px,env(safe-area-inset-bottom))!important;overflow:hidden!important}
  .modalCard,.profileModalCard,.profileEditorCard,.pmCard{
    width:min(100%,calc(100vw - 12px))!important;
    max-width:none!important;
    max-height:calc(100dvh - 12px)!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
  }
  .modalClose{min-width:44px!important;min-height:44px!important;display:grid!important;place-items:center!important;z-index:20!important}
  .actionTray,.emojiPanel,.commandSuggestions,.mentionSuggestions{max-width:calc(100vw - 12px)!important}
  .actionTray{overflow-y:auto!important;max-height:min(72dvh,620px)!important}
  .addonTrayGrid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .addonTrayGrid button{min-height:70px!important}
  .composer{position:relative!important;z-index:50!important;grid-template-columns:42px 42px minmax(0,1fr) 42px 46px!important;gap:5px!important;padding:6px max(6px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left))!important}
  .composerInputWrap{min-width:0!important;position:relative!important}
  .composer textarea{width:100%!important;min-width:0!important;font-size:16px!important;pointer-events:auto!important;user-select:text!important;-webkit-user-select:text!important}
  .composer button{min-width:42px!important;min-height:42px!important;padding:0!important;display:grid!important;place-items:center!important}
  .quickbar{padding-bottom:max(4px,env(safe-area-inset-bottom))!important}
  .quickbar button{min-width:46px!important;min-height:46px!important}
  .profileStudioTabs,.chatOptionsTabs,.emojiTabs,.gcRightTabs{touch-action:pan-x!important;-webkit-overflow-scrolling:touch!important}
  .profileForm,.profileFieldsGrid,.adminGrid,.settingsGrid,.gcDialogGrid{min-width:0!important}
  input,select,textarea{max-width:100%!important}
  .gcAdminEditDialog{width:calc(100vw - 12px)!important;max-height:calc(100dvh - 12px)!important;padding:12px!important}
  .gcAdminEditDialog .gcDialogGrid{grid-template-columns:1fr!important}
  .gcAdminEditDialog .wide{grid-column:auto!important}
}
@media (max-width:520px){
  :root{--gc-mobile-top:max(52px,env(safe-area-inset-top));--gc-mobile-bottom:max(56px,env(safe-area-inset-bottom))}
  .gcProfileMenuCody{left:0!important;right:0!important;width:100vw!important;border-radius:0!important}
  .addonTrayGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .modalCard,.profileModalCard,.profileEditorCard,.pmCard{border-radius:12px!important}
  .notification,.inboxConversation{min-width:0!important}
  .profileActions,.spotifyActions,.voiceRecorderActions,.paintTools,.shareButtons{flex-wrap:wrap!important}
  .profileActions>* ,.spotifyActions>* ,.voiceRecorderActions>* ,.paintTools>* ,.shareButtons>*{min-height:44px!important}
}
@media (max-width:360px){
  .composer{grid-template-columns:38px 38px minmax(0,1fr) 38px 42px!important;gap:3px!important}
  .composer button{min-width:38px!important;min-height:40px!important}
  .gcProfileMenuCody button,.gcProfileMenuCody a{grid-template-columns:26px minmax(0,1fr) 16px!important;padding-left:12px!important;padding-right:12px!important}
}

/* STEP3H.5 — universal mobile modal/menu reliability + notification polish */
body.gcModalOpen{overflow:hidden!important;touch-action:none!important}
body.gcModalOpen .modal:not(.hidden){touch-action:pan-y!important}

/* Notification center: compact header on desktop, clean stacked layout on small screens */
.notificationCard{width:min(720px,calc(100vw - 24px))!important;padding:16px!important;border-radius:16px!important}
.notificationHead{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:14px!important;align-items:center!important;padding:2px 0 12px!important;border-bottom:1px solid var(--gc-line,var(--line))!important}
.notificationHead>div:first-child small{display:block!important;margin-bottom:4px!important;font-size:9px!important;font-weight:900!important;letter-spacing:.13em!important;color:var(--gc-accent,var(--gold))!important}
.notificationHead>div:first-child h3{margin:0!important;font-size:22px!important;line-height:1.15!important}
.notificationHead>div:last-child{display:flex!important;gap:8px!important;justify-content:flex-end!important;align-items:center!important;flex-wrap:wrap!important;padding-right:34px!important}
.notificationHead button{min-height:40px!important;padding:8px 12px!important;border-radius:9px!important;white-space:nowrap!important}
.pushSettings{margin-top:12px!important}

/* Every modal must remain above themes, quickbars, drawers and fixed mobile navigation. */
.modal:not(.hidden){position:fixed!important;inset:0!important;z-index:2147483000!important;display:flex!important;align-items:center!important;justify-content:center!important;background:rgba(3,7,13,.78)!important;backdrop-filter:blur(3px)!important;pointer-events:auto!important}
.modal:not(.hidden)>.modalCard,
.modal:not(.hidden)>.profileModalCard,
.modal:not(.hidden)>.profileEditorCard,
.modal:not(.hidden)>.pmCard{position:relative!important;z-index:1!important;pointer-events:auto!important;background:var(--gc-panel2,#151d2b)!important;color:var(--gc-text,#f7f3eb)!important}

@media(max-width:900px){
  /* On touch devices use true screen-level sheets. This prevents a theme or background from visually swallowing profile/settings windows. */
  .modal:not(.hidden){
    align-items:flex-start!important;
    justify-content:center!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding:max(6px,env(safe-area-inset-top)) 6px max(8px,env(safe-area-inset-bottom))!important;
    -webkit-overflow-scrolling:touch!important;
  }
  .modal:not(.hidden)>.modalCard,
  .modal:not(.hidden)>.profileModalCard,
  .modal:not(.hidden)>.profileEditorCard,
  .modal:not(.hidden)>.pmCard{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    transform:none!important;
    width:min(720px,100%)!important;
    max-width:100%!important;
    height:auto!important;
    max-height:none!important;
    min-height:0!important;
    margin:0 auto!important;
    overflow:visible!important;
    border-radius:14px!important;
    box-shadow:0 18px 60px rgba(0,0,0,.65)!important;
  }
  #profileModal .profileModalCard,#editProfileModal .profileEditorCard,#chatOptionsModal .modalCard,#notificationsModal .notificationCard{
    min-height:auto!important;
  }
  #profileModal #profileContent,#editProfileModal .profileStudio,#chatOptionsModal .chatOptionsBody,#notificationsModal .notificationList{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    min-width:0!important;
    max-width:100%!important;
  }
  .modalClose{position:sticky!important;top:4px!important;float:right!important;z-index:50!important;min-width:44px!important;min-height:44px!important;background:#121b29ee!important;border:1px solid var(--gc-line,var(--line))!important}
  .gcProfileMenuCody{z-index:2147482500!important;pointer-events:auto!important}
  .gcProfileMenuCody button,.gcProfileMenuCody a{pointer-events:auto!important;touch-action:manipulation!important}
  .notificationCard{padding:12px!important}
  .notificationHead{grid-template-columns:1fr!important;gap:10px!important}
  .notificationHead>div:last-child{padding-right:0!important;justify-content:stretch!important;display:grid!important;grid-template-columns:1fr 1fr!important}
  .notificationHead button{width:100%!important;min-height:44px!important}
}

@media(max-width:520px){
  .modal:not(.hidden){padding:0!important;background:#0a1019!important}
  .modal:not(.hidden)>.modalCard,
  .modal:not(.hidden)>.profileModalCard,
  .modal:not(.hidden)>.profileEditorCard,
  .modal:not(.hidden)>.pmCard{
    width:100vw!important;
    max-width:100vw!important;
    min-height:100dvh!important;
    border-radius:0!important;
    border-left:0!important;
    border-right:0!important;
    padding-bottom:max(18px,env(safe-area-inset-bottom))!important;
  }
  .notificationHead{padding:8px 2px 12px!important}
  .notificationHead>div:first-child h3{font-size:20px!important}
  .notificationHead>div:last-child{grid-template-columns:1fr!important}
  .pushSettings{border-radius:12px!important}
  .gcProfile,.profileStudio,.chatOptionsBody{max-width:100%!important;overflow-x:hidden!important}
  .gcProfileTabs,.profileStudioTabs,.chatOptionsTabs{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important;scroll-snap-type:x proximity!important}
  .gcProfileTabs>*,.profileStudioTabs>*,.chatOptionsTabs>*{flex:0 0 auto!important;min-height:44px!important}
}

/* STEP3H.6 — nameplate performance safety for mobile/tablet/desktop */
@media (hover:none), (pointer:coarse){
  .addonNameplateGallery button:hover{transform:none!important}
  .addonNameplateGallery button{transition:border-color .12s ease,box-shadow .12s ease!important;contain:layout paint!important}
  .addonNameplateGallery .gcNameplateMedia video{transform:none!important;will-change:auto!important}
  #users .userCard.has-nameplate .gcNameplateVideo{will-change:auto!important}
}
@media(max-width:760px){
  .addonNameplateGallery{scroll-behavior:auto!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior:contain!important}
  .addonNameplateGallery button{content-visibility:auto!important;contain-intrinsic-size:448px 84px!important}
  .nameplateAddonCard{contain:layout paint!important}
}
@media(prefers-reduced-motion:reduce){
  .addonNameplateGallery video,#users .gcNameplateVideo{animation:none!important}
}

/* STEP3H.7 — universal mobile/tablet input + touch hardening */
html,body{overscroll-behavior:none}
input,select,textarea{touch-action:auto!important}
body.gcModalOpen{touch-action:auto!important}
body.gcModalOpen .modal:not(.hidden){touch-action:pan-y!important}

@media (max-width:900px){
  /* Final composer layout wins over older responsive layers. */
  .chat{padding-bottom:114px!important}
  .messages{padding-bottom:126px!important}
  .composer{
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:calc(58px + env(safe-area-inset-bottom))!important;
    z-index:1000!important;
    width:100vw!important;
    min-width:0!important;
    height:56px!important;
    min-height:56px!important;
    display:grid!important;
    grid-template-columns:42px 42px minmax(0,1fr) 42px 46px!important;
    grid-template-rows:44px!important;
    gap:5px!important;
    align-items:center!important;
    overflow:visible!important;
    padding:6px max(6px,env(safe-area-inset-right)) 6px max(6px,env(safe-area-inset-left))!important;
    background:#252b38f5!important;
    border-top:1px solid #394152!important;
    pointer-events:auto!important;
    touch-action:auto!important;
  }
  .composerInputWrap{
    position:relative!important;
    z-index:5!important;
    min-width:0!important;
    height:44px!important;
    pointer-events:auto!important;
    touch-action:auto!important;
  }
  #message{
    position:relative!important;
    z-index:6!important;
    display:block!important;
    width:100%!important;
    height:44px!important;
    min-height:44px!important;
    max-height:44px!important;
    margin:0!important;
    padding:10px 12px!important;
    border-radius:22px!important;
    font-size:16px!important;
    line-height:22px!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    pointer-events:auto!important;
    touch-action:auto!important;
    user-select:text!important;
    -webkit-user-select:text!important;
    -webkit-appearance:none!important;
    opacity:1!important;
  }
  #message:disabled{opacity:.72!important;pointer-events:none!important}
  .composer>button{position:relative!important;z-index:7!important;pointer-events:auto!important;touch-action:manipulation!important}
  .quickbar{z-index:900!important}
  .modal:not(.hidden){z-index:2147483000!important}
  .gcProfileMenuCody{z-index:2147482500!important}

  /* While the on-screen keyboard is open, give the composer the bottom edge and hide
     the quickbar temporarily so no navigation layer can cover the input. */
  html.gcKeyboardOpen .quickbar{display:none!important}
  html.gcKeyboardOpen .composer{bottom:max(0px,env(safe-area-inset-bottom))!important}
  html.gcKeyboardOpen .chat{padding-bottom:62px!important}
  html.gcKeyboardOpen .messages{padding-bottom:72px!important}

  /* Nameplate gallery: keep touch scrolling cheap and deterministic. */
  #nameplateAddonModal .addonNameplateGallery{contain:layout paint!important;will-change:auto!important}
  #nameplateAddonModal .addonNameplateGallery button{transform:none!important;transition:border-color .12s,box-shadow .12s!important;touch-action:manipulation!important}
  #nameplateAddonModal .addonNameplateGallery video{will-change:auto!important;transform:none!important}
}

@media (max-width:520px){
  .composer{grid-template-columns:38px 38px minmax(0,1fr) 38px 42px!important;gap:4px!important;padding-inline:5px!important}
  .composerInputWrap,#message{height:42px!important;min-height:42px!important;max-height:42px!important}
  .composer>button{min-width:38px!important;min-height:42px!important}
}

/* STEP3H.12 — iOS/Android top-profile menu interaction hardening */
#myProfileBtn{
  position:relative!important;
  z-index:2147482600!important;
  pointer-events:auto!important;
  touch-action:manipulation!important;
  -webkit-user-select:none!important;
  user-select:none!important;
}
#myProfileBtn img,#myProfileBtn .gcPresenceDot{pointer-events:none!important}
#gcProfileMenu.gcProfileMenuCody{
  pointer-events:auto!important;
  visibility:visible!important;
  opacity:1!important;
}
#gcProfileMenu.gcProfileMenuCody.hidden{display:none!important;visibility:hidden!important;opacity:0!important}
@media(max-width:900px){
  #myProfileBtn{min-width:42px!important;min-height:42px!important;display:grid!important;place-items:center!important}
  #gcProfileMenu.gcProfileMenuCody{
    top:58px!important;
    bottom:calc(58px + env(safe-area-inset-bottom))!important;
    max-height:calc(100dvh - 116px - env(safe-area-inset-bottom))!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
  }
}
@media(max-width:520px){
  #gcProfileMenu.gcProfileMenuCody{
    top:max(58px,env(safe-area-inset-top))!important;
    left:0!important;right:0!important;width:100vw!important;
  }
}


/* STEP3H.13 — iPhone profile-menu portal + cookie consent hard fix */
#gcProfileMenu.gcProfileMenuCody[data-gc-portaled="1"],
#gcProfileMenu.gcProfileMenuCody{
  position:fixed!important;
  z-index:2147483500!important;
  pointer-events:auto!important;
  isolation:isolate!important;
  transform:none!important;
  clip:auto!important;
  clip-path:none!important;
  filter:none!important;
  backdrop-filter:none!important;
}
@media(max-width:900px){
  #gcProfileMenu.gcProfileMenuCody{
    top:calc(max(58px,env(safe-area-inset-top)) + 4px)!important;
    right:8px!important;
    left:auto!important;
    bottom:calc(62px + env(safe-area-inset-bottom))!important;
    width:min(330px,calc(100vw - 16px))!important;
    height:auto!important;
    max-height:none!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    border-radius:12px!important;
    background:#2b3140!important;
    border:1px solid #475064!important;
    box-shadow:0 20px 70px #000d!important;
    -webkit-overflow-scrolling:touch!important;
  }
}
@media(max-width:520px){
  #gcProfileMenu.gcProfileMenuCody{
    right:6px!important;
    left:auto!important;
    width:min(330px,calc(100vw - 12px))!important;
    border-radius:12px!important;
  }
}

/* Cookie consent must sit ABOVE composer/quickbar and remain fully usable on
   Safari/Chrome mobile. It is its own scroll-safe sheet, never behind chat UI. */
#cookieBanner.cookieBanner{
  z-index:2147483600!important;
  pointer-events:auto!important;
  isolation:isolate!important;
}
#cookieBanner.cookieBanner *{pointer-events:auto!important}
@media(max-width:900px){
  #cookieBanner.cookieBanner{
    left:8px!important;
    right:8px!important;
    bottom:max(8px,env(safe-area-inset-bottom))!important;
    width:auto!important;
    max-width:none!important;
    max-height:calc(100dvh - max(16px,env(safe-area-inset-top)) - max(16px,env(safe-area-inset-bottom)))!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    display:flex!important;
    flex-direction:column!important;
    gap:12px!important;
    padding:16px!important;
    border-radius:14px!important;
    background:#27213f!important;
    border:1px solid #7567a2!important;
    box-shadow:0 24px 80px #000e!important;
    -webkit-overflow-scrolling:touch!important;
  }
  #cookieBanner.cookieBanner.hidden{display:none!important}
  #cookieBanner .cookieActions{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
    width:100%!important;
    position:relative!important;
    z-index:2!important;
  }
  #cookieBanner .cookieActions button{
    width:100%!important;
    min-height:48px!important;
    padding:10px 12px!important;
    font-size:15px!important;
    touch-action:manipulation!important;
    pointer-events:auto!important;
  }
  #cookieBanner p{font-size:13px!important;line-height:1.4!important}
  #cookieBanner a{font-size:14px!important;line-height:1.4!important}
}

/* STEP3H.14 — iOS profile transition must never blank the main room */
#messages.messages{display:block;visibility:visible;opacity:1;min-height:0;contain:layout paint;}
#profileModal{isolation:isolate;}
@media(max-width:900px){
  #profileModal.modal:not(.hidden){position:fixed!important;inset:0!important;z-index:2147483000!important;}
  #profileModal .profileModalCard{position:relative!important;transform:translateZ(0)!important;-webkit-transform:translateZ(0)!important;}
  /* Keep the room as its own render layer so opening/closing profile cannot invalidate it on Safari. */
  #messages.messages{transform:translateZ(0);-webkit-transform:translateZ(0);backface-visibility:hidden;-webkit-backface-visibility:hidden;}
}

/* STEP3H.15 — stable iOS profile rendering, Secret Post foreground, friends polish */
.secretEmojiRain{z-index:2147483646!important;position:fixed!important;inset:0!important;pointer-events:none!important;overflow:visible!important;isolation:isolate!important}
.secretRainEmoji{z-index:2147483646!important;pointer-events:none!important}
.profileFriendStatus{display:inline-flex;align-items:center;gap:6px;margin-top:7px;padding:5px 9px;border-radius:999px;background:rgba(72,190,123,.16);border:1px solid rgba(72,190,123,.42);color:#9ff0bf;font-size:11px;font-weight:900}
.profileFriendsPane{display:grid;gap:8px}.profileFriendRow{width:100%;display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:10px;align-items:center;text-align:left;padding:10px 12px;border:1px solid var(--gc-line,var(--line));border-radius:12px;background:rgba(255,255,255,.035);color:inherit}.profileFriendRow .uAvatar{width:42px;height:42px}.profileFriendRow .uAvatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}.profileFriendRow span:nth-child(2){display:grid;gap:3px}.profileFriendRow small{color:var(--muted)}.friendConfirmed{border-color:rgba(72,190,123,.42)!important;color:#a8efc0!important;opacity:1!important}
.friendAcceptedRow{display:grid!important;grid-template-columns:minmax(0,1fr) 44px!important;gap:8px!important;align-items:center!important}.friendIdentity{display:grid!important;grid-template-columns:42px minmax(0,1fr)!important;gap:10px!important;align-items:center!important;width:100%!important;text-align:left!important;border:0!important;background:transparent!important;color:inherit!important;padding:0!important}.friendChatBtn{width:42px!important;height:42px!important;border-radius:10px!important}
/* Do NOT force GPU/compositing layers around profile/mainchat on Safari; this was able to blank the room surface. */
#messages.messages{contain:none!important;transform:none!important;-webkit-transform:none!important;backface-visibility:visible!important;-webkit-backface-visibility:visible!important}
#profileModal .profileModalCard{transform:none!important;-webkit-transform:none!important;will-change:auto!important}
#profileModal.modal:not(.hidden){backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(3,7,13,.92)!important}
@media(max-width:900px){#profileModal.modal:not(.hidden){background:#0a1019f5!important}.gcProfileTabs{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}.gcProfileTabs button{flex:0 0 auto!important;min-height:44px!important}.profileFriendRow{min-height:58px!important}}
.authHelpLinks{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:10px;font-size:12px}.authHelpLinks span{color:var(--muted)}.authHelpLinks a{display:inline-flex;align-items:center;gap:5px;padding:7px 10px;border:1px solid var(--gc-line,var(--line));border-radius:9px;color:var(--gc-text,var(--text));text-decoration:none;background:rgba(255,255,255,.035)}.authHelpLinks a:hover{border-color:var(--gc-accent,var(--gold))}.dbgComponent{display:inline-flex;padding:5px 8px;border-radius:999px;background:#17243a;border:1px solid #314766;font-size:11px;font-weight:800}.contactTicketFiles{margin-top:10px;flex-wrap:wrap}

/* STEP3H.18 — iOS/WebKit mainchat compositing recovery. Never remove/recreate messages just to repaint. */
#messages.gcMainChatRepaint{
  -webkit-transform:translateZ(0);
  transform:translateZ(0);
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  will-change:transform;
}
.gcUserMenu .friendFriends{border-color:rgba(42,190,116,.5)!important;color:#88e8ae!important;background:rgba(24,108,66,.12)!important}


/* STEP3H.19 — universal foreground layer policy.
   Interactive confirmations/prompts must ALWAYS beat menus, modals, effects and mobile chrome. */
#gcConfirmOverlay,
#gcPromptOverlay,
.gcSystemDialogOverlay{
  position:fixed!important;
  inset:0!important;
  z-index:2147483647!important;
  display:grid!important;
  place-items:center!important;
  pointer-events:auto!important;
  visibility:visible!important;
  opacity:1!important;
  isolation:isolate!important;
  transform:none!important;
  filter:none!important;
  -webkit-filter:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  touch-action:manipulation!important;
}
#gcConfirmOverlay>*,#gcPromptOverlay>*,.gcSystemDialogOverlay>*{
  position:relative!important;
  z-index:1!important;
  pointer-events:auto!important;
  max-height:calc(100dvh - 24px)!important;
  overflow:auto!important;
  -webkit-overflow-scrolling:touch!important;
}
/* Statusmeldingen/toasts moeten ook zichtbaar blijven wanneer een menu of modal open staat. */
#toast,.toast{
  z-index:2147483645!important;
  pointer-events:none!important;
  isolation:isolate!important;
}
/* Niet-interactieve effecten mogen nooit een systeemdialoog blokkeren. */
.secretEmojiRain,.secretRainEmoji,.reactionFxLayer{
  pointer-events:none!important;
}
/* Volledig scherm-resultaatmeldingen blijven boven gewone modals/menu's, maar onder een bevestigingsdialoog. */
.gcLuckyWin{z-index:2147483644!important;pointer-events:auto!important;isolation:isolate!important}
@media(max-width:900px){
  #gcConfirmOverlay,#gcPromptOverlay,.gcSystemDialogOverlay{
    padding:max(10px,env(safe-area-inset-top)) 10px max(10px,env(safe-area-inset-bottom))!important;
  }
  #gcConfirmOverlay button,#gcPromptOverlay button,.gcSystemDialogOverlay button{
    min-height:46px!important;
    touch-action:manipulation!important;
  }
}

/* STEP3H.28 Ideeënbus */
.suggestionModalCard{width:min(620px,calc(100vw - 24px));max-height:min(86dvh,760px);overflow:auto}.suggestionForm{display:grid;gap:14px}.suggestionForm label{display:grid;gap:7px;font-weight:700}.suggestionForm input,.suggestionForm textarea{width:100%;border:1px solid var(--line,#344155);background:#0c1420;color:#fff;border-radius:11px;padding:11px 12px}.suggestionForm textarea{resize:vertical;min-height:140px}.suggestionForm small{color:var(--muted,#93a4ba);font-weight:500}.suggestionUpload{border:1px dashed #43536b;border-radius:12px;padding:12px;background:#111a27}.suggestionPreview{display:block;max-width:100%;max-height:260px;object-fit:contain;border-radius:10px;border:1px solid #3c485a;margin-top:7px}.suggestionPreview.hidden,.suggestionForm .modalEmpty.hidden{display:none}@media(max-width:520px){.suggestionModalCard{width:calc(100vw - 14px);max-height:calc(100dvh - 18px);padding:16px}.suggestionForm textarea{min-height:120px}}


/* STEP3H.37 — safe quickbar suggestion entry; legacy icon presentation restored */
.quickbar .gcSuggestionQuick{position:relative}
.quickbar .gcSuggestionQuick i{filter:none!important;opacity:1!important}
.quickbar .gcSuggestionQuick:hover,.quickbar .gcSuggestionQuick:focus-visible{background:rgba(228,189,85,.10)}

/* STEP3H.37 — scoped modern navigation icons; no generic glyph overrides */
.gcUiIcon{
  width:20px!important;height:20px!important;display:block!important;flex:0 0 20px!important;
  color:currentColor!important;overflow:visible!important;pointer-events:none!important;
}
.gcTopIcon,.gcHamburger,.gcRightTabs button,.composerPlus,#emoji,.composerVoice,.composerSend{
  color:#d7e1ef!important;
}
.gcTopIcon:hover,.gcHamburger:hover,.gcRightTabs button:hover,.composerPlus:hover,#emoji:hover,.composerVoice:hover,.composerSend:hover{
  color:#fff!important;
}
.gcRightTabs button.active{
  color:var(--gc-accent)!important;
}
.quickbar button i{
  display:grid!important;place-items:center!important;width:24px!important;height:24px!important;
  color:#b8c7d9!important;font-style:normal!important;
}
.quickbar button:hover i,.quickbar button:focus-visible i{color:#fff!important}
.quickbar button.active i,.quickbar button[aria-current="page"] i,.gcSuggestionQuick i{color:var(--gc-accent)!important}
.quickbar .gcUiIcon{width:19px!important;height:19px!important}
.gcTopIcon .gcUiIcon,.gcHamburger .gcUiIcon{width:19px!important;height:19px!important}
.gcRightTabs .gcUiIcon{width:18px!important;height:18px!important}
.composerPlus .gcUiIcon,#emoji .gcUiIcon,.composerVoice .gcUiIcon,.composerSend .gcUiIcon{width:19px!important;height:19px!important}
@media (max-width:900px){
  .quickbar .gcUiIcon{width:20px!important;height:20px!important}
  .gcTopIcon .gcUiIcon,.gcHamburger .gcUiIcon{width:20px!important;height:20px!important}
}

/* STEP3H.37 — premium icon interaction layer */
:root{
  --gc-icon-surface: color-mix(in srgb,var(--gc-safe-surface2) 86%,#ffffff 14%);
  --gc-icon-surface-hover: color-mix(in srgb,var(--gc-safe-surface2) 78%,var(--gc-accent) 22%);
  --gc-icon-line: color-mix(in srgb,var(--gc-safe-line) 76%,#ffffff 24%);
  --gc-icon-glow: color-mix(in srgb,var(--gc-accent) 44%,transparent);
}
.quickbar{
  gap:6px!important;
}
.quickbar button,
.gcTopIcon,
.gcHamburger,
.gcRightTabs button,
.composerPlus,
#emoji,
.composerVoice,
.composerSend{
  position:relative!important;
  isolation:isolate!important;
  border:1px solid transparent!important;
  border-radius:10px!important;
  transition:transform .16s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease,color .16s ease!important;
  background:transparent!important;
  box-shadow:none!important;
}
.quickbar button::before,
.gcTopIcon::before,
.gcHamburger::before,
.gcRightTabs button::before,
.composerPlus::before,
#emoji::before,
.composerVoice::before,
.composerSend::before{
  content:""!important;
  position:absolute!important;
  inset:4px!important;
  border-radius:8px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012))!important;
  border:1px solid rgba(255,255,255,.035)!important;
  opacity:.72!important;
  z-index:-1!important;
  transition:inherit!important;
  pointer-events:none!important;
}
.quickbar button:hover,
.gcTopIcon:hover,
.gcHamburger:hover,
.gcRightTabs button:hover,
.composerPlus:hover,
#emoji:hover,
.composerVoice:hover,
.composerSend:hover{
  transform:translateY(-1px)!important;
  border-color:var(--gc-icon-line)!important;
  background:rgba(255,255,255,.025)!important;
  box-shadow:0 8px 20px rgba(0,0,0,.22),0 0 0 1px rgba(255,255,255,.015) inset!important;
}
.quickbar button:hover::before,
.gcTopIcon:hover::before,
.gcHamburger:hover::before,
.gcRightTabs button:hover::before,
.composerPlus:hover::before,
#emoji:hover::before,
.composerVoice:hover::before,
.composerSend:hover::before{
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.018))!important;
  border-color:rgba(255,255,255,.065)!important;
}
.quickbar button:active,
.gcTopIcon:active,
.gcHamburger:active,
.gcRightTabs button:active,
.composerPlus:active,
#emoji:active,
.composerVoice:active,
.composerSend:active{
  transform:translateY(0) scale(.96)!important;
}
.gcRightTabs button.active,
.quickbar button.active,
.quickbar button[aria-current="page"]{
  color:var(--gc-accent)!important;
  border-color:color-mix(in srgb,var(--gc-accent) 52%,transparent)!important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--gc-accent) 13%,transparent),rgba(255,255,255,.018))!important;
  box-shadow:0 10px 24px rgba(0,0,0,.22),0 0 18px var(--gc-icon-glow)!important;
}
.gcRightTabs button.active::after,
.quickbar button.active::after,
.quickbar button[aria-current="page"]::after{
  content:""!important;
  position:absolute!important;
  left:18%!important;right:18%!important;bottom:-1px!important;height:2px!important;
  border-radius:999px!important;
  background:var(--gc-accent)!important;
  box-shadow:0 0 12px var(--gc-icon-glow)!important;
}
.quickbar button[data-quick="suggestion"]{
  color:color-mix(in srgb,var(--gc-accent) 88%,#fff 12%)!important;
}
.quickbar button[data-quick="suggestion"]::before{
  background:linear-gradient(180deg,color-mix(in srgb,var(--gc-accent) 8%,transparent),rgba(255,255,255,.018))!important;
}
.gcUiIcon{
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.04))!important;
}
.gcTopIcon .badge{
  box-shadow:0 0 0 2px var(--gc-safe-surface2),0 3px 10px rgba(0,0,0,.3)!important;
}
.gcRightTabs{
  gap:3px!important;
  padding:3px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.018),rgba(0,0,0,.045))!important;
}
.gcRightTabs button{
  min-width:42px!important;
}
.composerPlus,#emoji,.composerVoice,.composerSend{
  min-width:40px!important;
  height:40px!important;
}
.composerSend{
  color:var(--gc-accent)!important;
}
.composerSend::before{
  background:linear-gradient(180deg,color-mix(in srgb,var(--gc-accent) 10%,transparent),rgba(255,255,255,.015))!important;
}
@media (max-width:900px){
  .quickbar button,.gcTopIcon,.gcHamburger,.gcRightTabs button{border-radius:11px!important}
  .quickbar button::before,.gcTopIcon::before,.gcHamburger::before,.gcRightTabs button::before{inset:3px!important}
}
@media (prefers-reduced-motion: reduce){
  .quickbar button,.gcTopIcon,.gcHamburger,.gcRightTabs button,.composerPlus,#emoji,.composerVoice,.composerSend{transition:none!important}
}

/* STEP3H.37 — precision icon alignment & visual polish */
.quickbar{
  align-items:center!important;
}
.quickbar button{
  width:42px!important;
  min-width:42px!important;
  height:42px!important;
  min-height:42px!important;
  padding:0!important;
  margin:0 auto!important;
  display:grid!important;
  place-items:center!important;
}
.quickbar button i{
  width:22px!important;
  height:22px!important;
  display:grid!important;
  place-items:center!important;
  margin:0!important;
  padding:0!important;
  line-height:1!important;
}
.quickbar button i .gcUiIcon{
  width:20px!important;
  height:20px!important;
  stroke-width:1.85!important;
}
.quickbar button span{
  display:none!important;
}
.gcTopRight{
  align-items:center!important;
  gap:5px!important;
}
.gcTopIcon,.gcHamburger{
  width:38px!important;
  min-width:38px!important;
  height:38px!important;
  min-height:38px!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
}
.gcTopIcon .gcUiIcon,.gcHamburger .gcUiIcon{
  width:19px!important;
  height:19px!important;
  margin:auto!important;
}
.gcRightTabs{
  display:grid!important;
  grid-template-columns:repeat(6,minmax(42px,1fr))!important;
  align-items:stretch!important;
  gap:4px!important;
  padding:4px!important;
}
.gcRightTabs button{
  width:100%!important;
  min-width:42px!important;
  height:42px!important;
  min-height:42px!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  margin:0!important;
}
.gcRightTabs .gcUiIcon{
  width:19px!important;
  height:19px!important;
  margin:auto!important;
}
.quickbar button::before,.gcTopIcon::before,.gcHamburger::before,.gcRightTabs button::before{
  inset:3px!important;
  border-radius:9px!important;
}
.quickbar button:hover,.gcTopIcon:hover,.gcHamburger:hover,.gcRightTabs button:hover{
  transform:none!important;
}
.quickbar button.active,.quickbar button[aria-current="page"],.gcRightTabs button.active{
  transform:none!important;
}
.quickbar button.active::after,.quickbar button[aria-current="page"]::after,.gcRightTabs button.active::after{
  left:22%!important;
  right:22%!important;
  bottom:1px!important;
  height:2px!important;
}
.quickbar button[data-quick="apply"] i{
  color:#dce8f6!important;
}
.quickbar button[data-quick="suggestion"] i{
  color:var(--gc-accent)!important;
}
.composerPlus,#emoji,.composerVoice,.composerSend{
  width:40px!important;
  min-width:40px!important;
  height:40px!important;
  min-height:40px!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
}
.composerPlus .gcUiIcon,#emoji .gcUiIcon,.composerVoice .gcUiIcon,.composerSend .gcUiIcon{
  width:19px!important;
  height:19px!important;
  margin:auto!important;
}
@media (max-width:900px){
  .quickbar button{width:44px!important;min-width:44px!important;height:44px!important;min-height:44px!important}
  .gcTopIcon,.gcHamburger{width:40px!important;min-width:40px!important;height:40px!important;min-height:40px!important}
  .gcRightTabs button{height:44px!important;min-height:44px!important}
}

/* STEP3H.37 — coded premium 3D icons only; layout/functions unchanged */
.gcUiIcon3D{
  overflow:visible!important;
  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,.18))
    drop-shadow(0 3px 4px rgba(0,0,0,.34))!important;
}
.gcUiIcon3D g{
  vector-effect:non-scaling-stroke;
}
.quickbar button i .gcUiIcon3D{
  width:19px!important;
  height:19px!important;
}
.quickbar button[data-quick="apply"] i .gcUiIconApply{
  width:17px!important;
  height:17px!important;
}
.gcTopIcon .gcUiIcon3D,.gcHamburger .gcUiIcon3D{
  width:18px!important;
  height:18px!important;
}
.gcRightTabs .gcUiIcon3D{
  width:18px!important;
  height:18px!important;
}
.composerPlus .gcUiIcon3D,#emoji .gcUiIcon3D,.composerVoice .gcUiIcon3D,.composerSend .gcUiIcon3D{
  width:18px!important;
  height:18px!important;
}
.quickbar button:hover .gcUiIcon3D,
.gcTopIcon:hover .gcUiIcon3D,
.gcHamburger:hover .gcUiIcon3D,
.gcRightTabs button:hover .gcUiIcon3D,
.composerPlus:hover .gcUiIcon3D,
#emoji:hover .gcUiIcon3D,
.composerVoice:hover .gcUiIcon3D,
.composerSend:hover .gcUiIcon3D{
  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,.25))
    drop-shadow(0 4px 6px rgba(0,0,0,.38))
    drop-shadow(0 0 5px rgba(232,191,84,.22))!important;
}

/* STEP3H.37 — addon tray + composer polish; function/layout structure preserved */
.actionTray{
  border-radius:14px!important;
  border:1px solid color-mix(in srgb,var(--gc-safe-line) 82%,#fff 18%)!important;
  background:
    radial-gradient(circle at 12% 0%,rgba(226,187,82,.055),transparent 28%),
    linear-gradient(180deg,color-mix(in srgb,var(--gc-safe-surface2) 96%,#fff 4%),var(--gc-safe-surface2))!important;
  box-shadow:0 22px 54px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.03)!important;
  padding:14px!important;
}
.addonTrayHead{
  min-height:48px!important;
  padding:0 4px 11px!important;
  margin-bottom:10px!important;
  border-bottom:1px solid rgba(255,255,255,.055)!important;
}
.addonTrayHead b{font-size:15px!important;letter-spacing:-.01em!important}
.addonTrayHead small{margin-top:3px!important;color:#8795a8!important;font-size:10px!important}
#actionTrayClose{
  width:32px!important;height:32px!important;border-radius:9px!important;
  border:1px solid rgba(255,255,255,.06)!important;background:rgba(255,255,255,.025)!important;
}
.addonTrayQuick{
  display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:12px!important;
  align-items:center!important;padding:9px!important;margin-bottom:10px!important;
  border:1px solid rgba(226,187,82,.16)!important;border-radius:11px!important;
  background:linear-gradient(180deg,rgba(226,187,82,.045),rgba(255,255,255,.018))!important;
}
.addonSettingsLaunch{
  min-height:36px!important;border-radius:9px!important;padding:0 13px!important;
  justify-content:flex-start!important;font-size:12px!important;
}
.addonTrayQuick small{font-size:9px!important;line-height:1.35!important;color:#8793a4!important}
.addonTrayGrid{
  display:grid!important;
  grid-template-columns:repeat(5,minmax(94px,1fr))!important;
  gap:9px!important;
  padding-top:2px!important;
}
.addonTrayGrid button{
  min-height:84px!important;
  padding:10px 7px 8px!important;
  border:1px solid rgba(255,255,255,.045)!important;
  border-radius:11px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.012))!important;
  color:#eef3fa!important;
  gap:7px!important;
  transition:border-color .15s ease,background .15s ease,transform .15s ease,box-shadow .15s ease!important;
}
.addonTrayGrid button:hover{
  transform:translateY(-1px)!important;
  border-color:rgba(226,187,82,.26)!important;
  background:linear-gradient(180deg,rgba(226,187,82,.055),rgba(255,255,255,.018))!important;
  box-shadow:0 9px 20px rgba(0,0,0,.16)!important;
}
.addonTrayGrid button b{
  font-size:10px!important;font-weight:800!important;line-height:1.15!important;
  white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;max-width:100%!important;
}
.addonIcon{
  width:40px!important;height:40px!important;border-radius:11px!important;
  display:grid!important;place-items:center!important;
  background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.015))!important;
  border:1px solid rgba(255,255,255,.09)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 5px 12px rgba(0,0,0,.16)!important;
  font-size:0!important;
}
.gcAddonSvg{
  width:22px!important;height:22px!important;display:block!important;overflow:visible!important;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.16)) drop-shadow(0 2px 3px rgba(0,0,0,.3))!important;
}
.addonTrayGrid button:hover .gcAddonSvg{
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.2)) drop-shadow(0 3px 5px rgba(0,0,0,.32)) drop-shadow(0 0 5px rgba(226,187,82,.17))!important;
}

/* Composer: same structure, tighter visual rhythm */
.composer{
  align-items:center!important;
  gap:7px!important;
  padding:5px 8px!important;
  min-height:46px!important;
}
.composerInputWrap{
  display:flex!important;align-items:center!important;
}
.composer textarea{
  min-height:36px!important;height:36px!important;
  border-radius:18px!important;
  padding:8px 13px!important;
  line-height:20px!important;
  border-color:rgba(255,255,255,.085)!important;
  background:linear-gradient(180deg,rgba(3,8,15,.94),rgba(7,12,20,.98))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018)!important;
}
.composerPlus,#emoji,.composerVoice,.composerSend{
  width:34px!important;min-width:34px!important;height:34px!important;min-height:34px!important;
  border-radius:10px!important;
}
.composerPlus::before,#emoji::before,.composerVoice::before,.composerSend::before{inset:2px!important;border-radius:8px!important}
.composerPlus .gcUiIcon3D,#emoji .gcUiIcon3D,.composerVoice .gcUiIcon3D,.composerSend .gcUiIcon3D{
  width:16px!important;height:16px!important;
}
.composerSend{margin-left:1px!important}
.quickbar button[data-quick="apply"] i .gcUiIconApplySlim{
  width:14px!important;height:14px!important;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.28))!important;
}

@media(max-width:900px){
  .addonTrayGrid{grid-template-columns:repeat(4,minmax(72px,1fr))!important}
  .addonTrayQuick{grid-template-columns:1fr!important}
  .addonTrayQuick small{display:none!important}
}
@media(max-width:520px){
  .actionTray{padding:10px!important;border-radius:12px!important}
  .addonTrayGrid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important}
  .addonTrayGrid button{min-height:78px!important;padding:8px 4px!important}
  .addonIcon{width:38px!important;height:38px!important}
  .gcAddonSvg{width:20px!important;height:20px!important}
  .composer{gap:5px!important;padding:5px 6px!important}
  .composerPlus,#emoji,.composerVoice,.composerSend{width:32px!important;min-width:32px!important;height:32px!important;min-height:32px!important}
}

/* STEP3H.37 — inviting responsive login + recent chatters */
.authOverlay{
  background:
    radial-gradient(circle at 12% 12%,rgba(65,116,185,.18),transparent 28%),
    radial-gradient(circle at 88% 82%,rgba(225,187,78,.105),transparent 26%),
    linear-gradient(135deg,#070b12 0%,#0b111b 48%,#070a10 100%)!important;
}
.authShell{
  width:min(1040px,100%)!important;
  grid-template-columns:minmax(0,1.15fr) minmax(390px,.85fr)!important;
  grid-template-rows:auto auto auto!important;
  border-radius:28px!important;
  border-color:rgba(255,255,255,.105)!important;
  box-shadow:0 38px 110px rgba(0,0,0,.56),0 0 0 1px rgba(255,255,255,.015) inset!important;
}
.authHero{
  padding:54px 58px 42px!important;
  justify-content:center!important;
  background:
    radial-gradient(circle at 92% 10%,rgba(226,187,82,.08),transparent 34%),
    linear-gradient(145deg,rgba(25,39,60,.98),rgba(12,18,28,.99))!important;
}
.authHero:before{content:"";position:absolute;left:58px;top:48px;width:96px;height:2px;border-radius:999px;background:linear-gradient(90deg,var(--gold),transparent);opacity:.85}
.authBrandMark{width:54px!important;height:54px!important;border-radius:16px!important;margin-bottom:25px!important;box-shadow:0 14px 35px rgba(220,184,95,.18),inset 0 1px 0 rgba(255,255,255,.3)!important}
.authHero h1{font-size:clamp(36px,4vw,52px)!important;max-width:520px!important;margin-bottom:17px!important}
.authHero>p{font-size:14px!important;line-height:1.72!important;margin-bottom:22px!important;color:#aebacc!important}
.authFeatures{gap:8px!important}.authFeatures span{padding:7px 10px!important;border-radius:999px!important;background:rgba(255,255,255,.03)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important}
.authPanel{position:relative!important;padding:36px 38px 30px!important;justify-content:center!important;background:linear-gradient(180deg,#101824,#0b111b)!important}
.authPanelTop{margin-bottom:18px!important}.authPanelTop h2{font-size:27px!important}
.authLanguagePicker{margin-bottom:12px!important;border-radius:12px!important;background:rgba(255,255,255,.02)!important}
.authTabs{margin-bottom:16px!important}
.authForm{gap:12px!important}.fieldControl input,.fieldControl select{height:45px!important;border-radius:12px!important}
.authPrimary{height:46px!important;border-radius:12px!important;box-shadow:0 12px 28px rgba(220,184,95,.14)!important}
.gcRecaptchaSlot{display:flex!important;justify-content:center!important;min-height:0!important;margin:1px 0 2px!important;transform-origin:center top!important}
.authFooter{margin-top:12px!important}

.authRecent{
  grid-column:1/-1!important;
  display:grid!important;
  grid-template-columns:minmax(230px,.8fr) minmax(0,2.2fr)!important;
  gap:18px!important;align-items:center!important;
  padding:15px 22px!important;
  border-top:1px solid rgba(255,255,255,.07)!important;
  border-bottom:1px solid rgba(255,255,255,.055)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.018),rgba(0,0,0,.045))!important;
}
.authRecent.hidden{display:none!important}
.authRecentHead{min-width:0!important}.authRecentHead>div{display:flex!important;align-items:center!important;gap:9px!important}.authRecentHead b{font-size:11px!important;letter-spacing:.07em!important;text-transform:uppercase!important;color:#e8edf5!important}.authRecentHead small{display:block!important;margin:5px 0 0 22px!important;color:#77879d!important;font-size:9px!important;line-height:1.4!important}
.authRecentPulse{width:8px!important;height:8px!important;border-radius:50%!important;background:#2de6a1!important;box-shadow:0 0 0 4px rgba(45,230,161,.08),0 0 12px rgba(45,230,161,.58)!important;flex:0 0 8px!important}
.authRecentUsers{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:9px!important;min-width:0!important;overflow-x:auto!important;overflow-y:hidden!important;padding:3px 2px 5px!important;scrollbar-width:thin!important;scroll-snap-type:x proximity!important}
.authRecentUser{flex:0 0 auto!important;display:grid!important;justify-items:center!important;gap:4px!important;scroll-snap-align:start!important;animation:gcRecentIn .28s ease both!important;animation-delay:var(--recent-delay,0ms)!important}
.authRecentAvatar{position:relative!important;width:48px!important;height:48px!important;padding:3px!important;border-radius:14px!important;background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.02))!important;border:1px solid rgba(255,255,255,.09)!important;box-shadow:0 7px 16px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.06)!important}
.authRecentAvatar img{width:100%!important;height:100%!important;object-fit:cover!important;border-radius:11px!important;background:#111925!important}
.authRecentAvatar i{position:absolute!important;right:1px!important;bottom:1px!important;width:9px!important;height:9px!important;border-radius:50%!important;background:#2de6a1!important;border:2px solid #101722!important;box-shadow:0 0 7px rgba(45,230,161,.5)!important}
.authRecentUser small{max-width:58px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;color:#8492a6!important;font-size:8px!important;opacity:0!important;transform:translateY(-2px)!important;transition:.15s!important}
.authRecentUser:hover small{opacity:1!important;transform:none!important}.authRecentUser:hover .authRecentAvatar{border-color:rgba(226,187,82,.28)!important;box-shadow:0 8px 20px rgba(0,0,0,.28),0 0 15px rgba(226,187,82,.08)!important}
@keyframes gcRecentIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

.authShellFoot{grid-column:1/-1!important;display:grid!important;grid-template-columns:1fr auto!important;align-items:center!important;gap:16px!important;padding:11px 22px 13px!important;background:#090e16!important}
.authShellFoot .authHelpLinks{margin:0!important;justify-content:flex-start!important;font-size:10px!important}.authShellFoot .authHelpLinks a{padding:6px 9px!important;border-radius:8px!important}
.authShellFoot .authLegal{position:static!important;inset:auto!important;text-align:right!important;font-size:8.5px!important;color:#68778b!important;line-height:1.45!important}.authShellFoot .authLegal strong{font-size:8.5px!important}

@media(max-width:820px){
  .authOverlay{padding:10px!important;align-items:start!important}
  .authShell{grid-template-columns:1fr!important;grid-template-rows:auto!important;max-width:540px!important;border-radius:20px!important;overflow:visible!important;margin:auto!important}
  .authHero{display:block!important;padding:26px 24px 20px!important;min-height:0!important;border-radius:20px 20px 0 0!important}
  .authHero:before{left:24px!important;top:22px!important;width:68px!important}
  .authHero:after{width:220px!important;height:220px!important;right:-105px!important;top:-100px!important}
  .authBrandMark{width:42px!important;height:42px!important;border-radius:13px!important;margin:10px 0 14px!important;font-size:15px!important}
  .authEyebrow{font-size:9px!important;margin-bottom:6px!important}.authHero h1{font-size:29px!important;line-height:1.04!important;margin-bottom:9px!important}.authHero>p{font-size:11px!important;line-height:1.55!important;margin-bottom:12px!important}.authFeatures{gap:6px!important}.authFeatures span{font-size:9px!important;padding:5px 8px!important}
  .authPanel{padding:25px 23px 22px!important;min-height:0!important;justify-content:flex-start!important}
  .authRecent{grid-template-columns:1fr!important;gap:9px!important;padding:13px 16px!important}.authRecentHead small{margin-left:18px!important}.authRecentUsers{justify-content:flex-start!important}.authRecentAvatar{width:46px!important;height:46px!important}
  .authShellFoot{grid-template-columns:1fr!important;gap:9px!important;padding:12px 16px 15px!important;border-radius:0 0 20px 20px!important}.authShellFoot .authHelpLinks{justify-content:center!important}.authShellFoot .authLegal{text-align:center!important}
}
@media(max-width:480px){
  .authOverlay{padding:0!important}.authShell{max-width:none!important;border-radius:0!important;border-left:0!important;border-right:0!important;min-height:100dvh!important;margin:0!important}.authHero{border-radius:0!important;padding:22px 18px 17px!important}.authHero h1{font-size:27px!important}.authHero>p{display:none!important}.authFeatures{margin-top:10px!important}.authPanel{padding:22px 18px 20px!important}.authRecent{padding:12px 14px!important}.authRecentHead small{display:none!important}.authRecentUsers{gap:8px!important}.authRecentAvatar{width:43px!important;height:43px!important;border-radius:13px!important}.authRecentAvatar img{border-radius:10px!important}.authShellFoot{border-radius:0!important;padding-bottom:max(14px,env(safe-area-inset-bottom))!important}.authShellFoot .authHelpLinks span{width:100%!important;text-align:center!important}.authShellFoot .authHelpLinks a{flex:1 1 140px!important;justify-content:center!important}
  .gcRecaptchaSlot{transform:scale(.92)!important;margin-left:-12px!important;margin-right:-12px!important}
}
@media(prefers-reduced-motion:reduce){.authRecentUser{animation:none!important}.authRecentUser small{transition:none!important}}

/* STEP3H.37 */
.composer textarea{overflow-y:hidden!important;scrollbar-width:none!important;resize:none!important}.composer textarea::-webkit-scrollbar{display:none!important}
.quickbar button[data-quick="apply"] i .gcUiIcon3D{width:13px!important;height:13px!important}
.authFeatures{display:none!important}.authHero{justify-content:center!important}.authHero::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 18% 34%,rgba(99,137,255,.13),transparent 30%),radial-gradient(circle at 72% 70%,rgba(220,184,95,.08),transparent 34%)}.authHero>*{position:relative;z-index:1}
.authRecent{margin-top:26px!important;padding:14px!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:17px!important;background:linear-gradient(180deg,rgba(6,10,17,.36),rgba(6,10,17,.18))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 16px 35px rgba(0,0,0,.12)!important;display:block!important}.authRecent.hidden{display:none!important}.authRecentHead{margin-bottom:10px!important}.authRecentHead small{margin-left:0!important;margin-top:5px!important}.authRecentUsers{justify-content:flex-start!important;gap:11px!important;overflow-x:auto!important;scroll-behavior:auto!important;padding:3px 2px 7px!important;scrollbar-width:none!important}.authRecentUsers::-webkit-scrollbar{display:none!important}.authRecentAvatar{width:55px!important;height:55px!important;border-radius:16px!important}.authRecentAvatar img{border-radius:13px!important}.authRecentUser small{opacity:.82!important;transform:none!important;max-width:64px!important;color:#a5b0c0!important}
.authPanel{box-shadow:inset 1px 0 0 rgba(255,255,255,.025)!important}.authPrimary{box-shadow:0 12px 30px rgba(220,184,95,.18),inset 0 1px 0 rgba(255,255,255,.28)!important}.authNewsletterOpt{padding:9px 10px!important;border:1px solid rgba(255,255,255,.065)!important;border-radius:10px!important;background:rgba(255,255,255,.018)!important}.authNewsletterOpt small{display:block;margin-top:3px;color:#718095!important}.authShellFoot{background:linear-gradient(180deg,rgba(255,255,255,.012),rgba(0,0,0,.05))!important}
.newsWallCard{width:min(430px,calc(100vw - 18px))!important;max-height:calc(100dvh - 24px)!important;padding:0!important;overflow:hidden!important}.newsWallHead{display:flex!important;justify-content:space-between!important;gap:12px!important;align-items:flex-start!important;padding:17px 18px 13px!important;border-bottom:1px solid var(--gc-safe-line)!important;background:linear-gradient(180deg,rgba(255,255,255,.025),transparent)!important}.newsWallHead small{font-size:8px!important;letter-spacing:.14em!important;color:var(--gc-accent)!important}.newsWallHead h3{margin:3px 0 4px!important;font-size:19px!important}.newsWallHead p{margin:0!important;color:var(--gc-safe-muted)!important;font-size:10px!important}.newsWallList{padding:13px!important;display:grid!important;gap:12px!important;overflow:auto!important;max-height:calc(100dvh - 125px)!important}.newsPost{border:1px solid var(--gc-safe-line)!important;border-radius:14px!important;padding:13px!important;background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.01))!important;box-shadow:0 9px 25px rgba(0,0,0,.12)!important}.newsPostAuthor{display:flex!important;align-items:center!important;gap:9px!important}.newsPostAuthor b,.newsPostAuthor small{display:block!important}.newsPostAuthor b{font-size:11px!important}.newsPostAuthor small{font-size:8px!important;color:var(--gc-safe-muted)!important}.newsAvatar{width:34px!important;height:34px!important;border-radius:50%!important;padding:2px!important;border:1px solid rgba(226,187,82,.26)!important;background:#111925!important}.newsAvatar img{width:100%!important;height:100%!important;border-radius:50%!important;object-fit:cover!important}.newsPost h4{font-size:14px!important;margin:11px 0 7px!important}.newsPostBody{font-size:11px!important;line-height:1.6!important;color:#e6ebf2!important}.newsReactions{display:flex!important;gap:6px!important;margin-top:12px!important;flex-wrap:wrap!important}.newsReaction{min-width:43px!important;height:30px!important;border-radius:999px!important;border:1px solid var(--gc-safe-line)!important;background:rgba(255,255,255,.025)!important;color:#dce4ef!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:5px!important}.newsReaction.active{border-color:var(--gc-accent)!important;background:color-mix(in srgb,var(--gc-accent) 13%,transparent)!important}.newsComments{display:grid!important;gap:5px!important;margin-top:10px!important}.newsComment{display:grid!important;grid-template-columns:auto 1fr auto!important;gap:6px!important;font-size:9px!important;padding:6px 8px!important;border-radius:8px!important;background:rgba(0,0,0,.13)!important}.newsComment small{color:var(--gc-safe-muted)!important}.newsCommentForm{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:6px!important;margin-top:9px!important}.newsCommentForm input{min-width:0!important;height:34px!important;border-radius:17px!important}.newsCommentForm button{height:34px!important;border-radius:9px!important;padding:0 11px!important}
@media(max-width:900px){.authRecent{margin-top:18px!important}.authRecentAvatar{width:50px!important;height:50px!important}}@media(max-width:560px){.authHero{padding-bottom:16px!important}.authRecent{margin-top:14px!important;padding:11px!important}.authRecentHead small{display:none!important}.authRecentAvatar{width:47px!important;height:47px!important}.newsWallCard{width:100vw!important;max-width:100vw!important;height:100dvh!important;max-height:100dvh!important;border-radius:0!important}.newsWallList{max-height:calc(100dvh - 106px)!important}.newsComment{grid-template-columns:auto 1fr!important}.newsComment small{grid-column:2}}


/* STEP3H.39 — mobile/auth isolation.
   Never render chat controls behind/between the login experience. */
body.gcAuthActive{
  overflow:auto!important;
  min-height:100dvh!important;
  background:#080d15!important;
}
body.gcAuthActive #app,
body.gcAuthActive #rankPreviewBar{
  visibility:hidden!important;
  pointer-events:none!important;
}
body.gcAuthActive #auth{
  visibility:visible!important;
  pointer-events:auto!important;
  z-index:10000!important;
}
body.gcAuthActive #composer,
body.gcAuthActive .composer,
body.gcAuthActive .quickbar,
body.gcAuthActive .topbar,
body.gcAuthActive .users{
  display:none!important;
}
@media(max-width:900px){
  body.gcAuthActive #auth{
    position:relative!important;
    inset:auto!important;
    min-height:100dvh!important;
    width:100%!important;
    overflow:visible!important;
    padding:12px!important;
  }
  body.gcAuthActive .authShell{
    margin:0 auto!important;
    min-height:0!important;
    width:min(100%,620px)!important;
  }
}

/* STEP3H.40 — hard no-flash auth isolation */
body.gcAuthActive #app,body.gcAuthActive #rankPreviewBar{display:none!important;visibility:hidden!important}
body.gcAuthActive #auth{display:grid!important;visibility:visible!important}
@media(max-width:900px){body.gcAuthActive #auth{position:relative!important;inset:auto!important;min-height:100dvh!important;width:100%!important;margin:0!important;overflow:visible!important}}

/* STEP3H.41 — Newswall polish + recent chatters restore */
.newsWallCard{
  width:min(620px,calc(100vw - 28px))!important;
  max-height:min(820px,calc(100dvh - 34px))!important;
  border-radius:20px!important;
  border:1px solid rgba(125,151,187,.26)!important;
  background:
    radial-gradient(circle at 85% 0,rgba(226,187,82,.07),transparent 31%),
    linear-gradient(180deg,#161f2d,#111925)!important;
  box-shadow:0 28px 90px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.035)!important;
}
.newsWallHead{
  min-height:92px!important;
  padding:20px 22px 16px!important;
  align-items:center!important;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.005))!important;
}
.newsWallHeading{min-width:0!important}
.newsWallHead small{font-size:9px!important;letter-spacing:.16em!important;font-weight:900!important}
.newsWallHead h3{font-size:23px!important;letter-spacing:-.025em!important;margin:4px 0 3px!important}
.newsWallHead p{font-size:11px!important;line-height:1.45!important}
.newsWallActions{display:flex!important;align-items:center!important;gap:7px!important;flex:0 0 auto!important}
.newsWallAction{
  width:38px!important;height:38px!important;display:grid!important;place-items:center!important;
  padding:0!important;border-radius:11px!important;border:1px solid rgba(255,255,255,.08)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018))!important;
  color:#d9e4f2!important;font-size:20px!important;line-height:1!important;
  transition:.15s ease!important;
}
.newsWallAction:hover{border-color:rgba(226,187,82,.38)!important;color:#fff!important;background:rgba(226,187,82,.07)!important;transform:translateY(-1px)!important}
.newsWallClose{font-size:23px!important}
.newsWallList{
  padding:17px!important;
  gap:14px!important;
  max-height:calc(min(820px,100dvh - 34px) - 92px)!important;
  background:linear-gradient(180deg,rgba(4,9,16,.16),rgba(4,9,16,.04))!important;
}
.newsWallEmpty{
  min-height:190px!important;
  display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
  text-align:center!important;padding:28px!important;border:1px dashed rgba(122,147,181,.25)!important;
  border-radius:16px!important;background:linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.006))!important;
}
.newsWallEmpty>span{width:54px!important;height:54px!important;display:grid!important;place-items:center!important;border-radius:16px!important;background:rgba(226,187,82,.08)!important;border:1px solid rgba(226,187,82,.18)!important;font-size:25px!important;margin-bottom:12px!important}
.newsWallEmpty>b{font-size:14px!important;margin-bottom:5px!important}
.newsWallEmpty>small{max-width:330px!important;color:#8fa0b6!important;line-height:1.5!important}
.newsWallEmpty .secondaryBtn{margin-top:14px!important}
.newsWallEmptyError>span{background:rgba(223,90,90,.08)!important;border-color:rgba(223,90,90,.22)!important}
.newsPost{padding:17px!important;border-radius:16px!important;border-color:rgba(121,145,177,.19)!important;background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.009))!important}
.newsAvatar{width:42px!important;height:42px!important}
.newsPostAuthor b{font-size:12px!important}
.newsPostAuthor small{font-size:9px!important;margin-top:2px!important}
.newsPost h4{font-size:17px!important;margin:14px 0 8px!important;letter-spacing:-.015em!important}
.newsPostBody{font-size:12px!important;line-height:1.68!important}
.newsReaction{height:33px!important;min-width:48px!important}
.newsComment{font-size:10px!important;padding:8px 9px!important}
.newsCommentForm input,.newsCommentForm button{height:37px!important}

/* Recent actief: prominent, larger and carousel-ready on login */
.authRecent{
  margin-top:26px!important;
  padding:15px!important;
  border-radius:17px!important;
  border:1px solid rgba(130,153,185,.2)!important;
  background:linear-gradient(180deg,rgba(6,12,20,.38),rgba(6,12,20,.19))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
  overflow:hidden!important;
}
.authRecentHead{display:flex!important;justify-content:space-between!important;align-items:flex-end!important;gap:12px!important;margin-bottom:12px!important}
.authRecentHead>div{display:flex!important;align-items:center!important;gap:7px!important}
.authRecentHead b{text-transform:uppercase!important;font-size:10px!important;letter-spacing:.04em!important}
.authRecentHead small{font-size:9px!important;color:#8292a7!important;text-align:right!important;max-width:220px!important}
.authRecentPulse{width:8px!important;height:8px!important;flex:0 0 8px!important;box-shadow:0 0 12px #2adf9b!important}
.authRecentUsers{
  min-height:82px!important;
  display:flex!important;
  align-items:flex-start!important;
  gap:12px!important;
  overflow-x:hidden!important;
  overflow-y:hidden!important;
  padding:5px 4px 4px!important;
  scrollbar-width:none!important;
}
.authRecentUser{flex:0 0 68px!important;display:flex!important;flex-direction:column!important;align-items:center!important;gap:5px!important}
.authRecentAvatar{width:58px!important;height:58px!important;border-radius:17px!important;padding:3px!important;background:linear-gradient(145deg,rgba(226,187,82,.18),rgba(90,119,163,.11))!important;border:1px solid rgba(226,187,82,.2)!important;box-shadow:0 8px 18px rgba(0,0,0,.2)!important}
.authRecentAvatar img{width:100%!important;height:100%!important;object-fit:cover!important;border-radius:14px!important}
.authRecentAvatar i{width:9px!important;height:9px!important;right:-1px!important;bottom:-1px!important;border:2px solid #101927!important}
.authRecentUser small{font-size:9px!important;max-width:68px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.authRecentDuplicate{opacity:.96!important}

@media(max-width:900px){
  .authRecent{margin-top:19px!important;padding:13px!important}
  .authRecentHead{align-items:flex-start!important;flex-direction:column!important;gap:2px!important}
  .authRecentHead small{text-align:left!important;max-width:none!important}
  .authRecentUsers{overflow-x:auto!important;scroll-snap-type:x proximity!important}
  .authRecentUser{scroll-snap-align:start!important}
}
@media(max-width:560px){
  .newsWallCard{width:100vw!important;height:100dvh!important;max-height:100dvh!important;border-radius:0!important}
  .newsWallHead{padding:15px 14px 12px!important;min-height:82px!important}
  .newsWallHead h3{font-size:20px!important}
  .newsWallHead p{max-width:240px!important}
  .newsWallAction{width:36px!important;height:36px!important}
  .newsWallList{padding:11px!important;max-height:calc(100dvh - 82px)!important}
  .newsPost{padding:14px!important}
  .authRecentAvatar{width:54px!important;height:54px!important}
  .authRecentUser{flex-basis:64px!important}
}

/* STEP3H.42 — restored per-user readability mode */
.readableTextOption{
  margin-top:12px!important;padding:13px 14px!important;
  border:1px solid color-mix(in srgb,var(--gc-safe-border) 82%,#fff 18%)!important;
  border-radius:12px!important;background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.012))!important
}
.readableTextOption small{display:block;margin-top:4px;color:var(--muted);line-height:1.45}
body.gc-readable-chat .msg .body,
body.gc-readable-chat .msg .replyQuote span,
body.gc-readable-chat .pmBody,
body.gc-readable-chat .gcAnnouncementBody{
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif!important;
  font-style:normal!important;font-variant:normal!important;font-weight:500!important;
  letter-spacing:normal!important;text-transform:none!important;text-shadow:none!important;
  color:#f1f5fa!important;font-size:max(15px,1em)!important;line-height:1.58!important;word-spacing:normal!important;
}
body.gc-readable-chat .msg .body a,
body.gc-readable-chat .pmBody a{color:#9fc7ff!important;text-decoration:underline!important;text-underline-offset:2px!important}

/* STEP3H.43 — password tools and unique recent users */
.gcPasswordInputWrap{position:relative;display:block;width:100%}
.gcPasswordInputWrap input{padding-right:46px!important}
.gcPasswordEye{position:absolute!important;right:7px!important;top:50%!important;transform:translateY(-50%)!important;width:34px!important;height:34px!important;border:0!important;border-radius:9px!important;background:rgba(255,255,255,.025)!important;color:#b8c6d8!important;display:grid!important;place-items:center!important;cursor:pointer!important;font-size:15px!important}
.gcPasswordEye:hover{background:rgba(255,255,255,.065)!important;color:#fff!important}
.gcPasswordStrength{margin:-1px 0 2px;padding:0 2px}.gcPasswordStrengthBar{height:7px;border-radius:999px;background:#101722;border:1px solid #2c394c;overflow:hidden}.gcPasswordStrengthBar i{display:block;height:100%;width:0;border-radius:999px;background:#b54a57;transition:.18s}
.gcPasswordStrength[data-score="1"] .gcPasswordStrengthBar i{width:25%;background:#cf5b4f}.gcPasswordStrength[data-score="2"] .gcPasswordStrengthBar i{width:50%;background:#d69a43}.gcPasswordStrength[data-score="3"] .gcPasswordStrengthBar i{width:75%;background:#8dbd59}.gcPasswordStrength[data-score="4"] .gcPasswordStrengthBar i{width:100%;background:#35c47a}.gcPasswordStrength small{display:block;margin-top:6px;color:#8fa0b5;font-size:10px}
.gcPasswordTools{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:9px;margin-top:2px}.gcPasswordTools button{min-height:43px!important}
.authRecentUsers{justify-content:flex-start!important}.authRecentUser{flex:0 0 68px!important}.authRecentDuplicate{display:none!important}
@media(max-width:620px){.gcPasswordTools{grid-template-columns:1fr}}


/* STEP3H.44 — Universal Responsive Hardening */
html,body,#app{max-width:100%;min-width:0}
body{overscroll-behavior:none}
.topbar,.layout,.chat,.messages,.composer,.quickbar,.gcTopLeft,.gcTopRight,.msg,.msgMain{min-width:0}
.gcLogoBrand{min-width:0!important}
.gcLogoBrand img{display:block;width:auto;height:auto;object-fit:contain}

@media(max-width:900px){
  body:not(.gcAuthActive){height:var(--gc-vh,100dvh)!important;min-height:0!important;overflow:hidden!important}
  body:not(.gcAuthActive) #app{height:var(--gc-vh,100dvh)!important;min-height:0!important;display:flex!important;flex-direction:column!important;overflow:hidden!important}
  body:not(.gcAuthActive) .topbar{flex:0 0 58px!important;height:58px!important;min-height:58px!important}
  body:not(.gcAuthActive) .layout{flex:1 1 auto!important;height:auto!important;min-height:0!important;padding:0!important;display:grid!important;grid-template-columns:minmax(0,1fr)!important;overflow:hidden!important}
  body:not(.gcAuthActive) .chat{height:100%!important;min-height:0!important;min-width:0!important;border-radius:0!important;border-left:0!important;border-right:0!important;padding-bottom:calc(58px + env(safe-area-inset-bottom))!important;overflow:hidden!important}
  .messages{flex:1 1 auto!important;min-height:0!important;overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior-y:contain!important;-webkit-overflow-scrolling:touch!important}
  .quickbar{left:0!important;right:0!important;bottom:0!important;width:100%!important;height:calc(58px + env(safe-area-inset-bottom))!important;min-height:calc(58px + env(safe-area-inset-bottom))!important;padding:5px max(7px,env(safe-area-inset-right)) max(5px,env(safe-area-inset-bottom)) max(7px,env(safe-area-inset-left))!important;border-radius:0!important;border-left:0!important;border-right:0!important;border-bottom:0!important;display:grid!important;grid-auto-flow:column!important;grid-auto-columns:minmax(42px,1fr)!important;align-items:start!important;justify-content:stretch!important;gap:4px!important;overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:none!important;-webkit-overflow-scrolling:touch!important}
  .quickbar::-webkit-scrollbar{display:none!important}
  .quickbar button{width:100%!important;min-width:42px!important;max-width:64px!important;height:46px!important;margin:0 auto!important;padding:0!important;flex:0 0 auto!important}
  .rooms,.users,#usersPanel{top:58px!important;bottom:calc(58px + env(safe-area-inset-bottom))!important;max-height:none!important;height:auto!important}
  .sidebarBackdrop{inset:58px 0 calc(58px + env(safe-area-inset-bottom))!important}
}

@media(max-width:600px){
  .topbar.gcClassicTop{padding:env(safe-area-inset-top) max(6px,env(safe-area-inset-right)) 0 max(6px,env(safe-area-inset-left))!important;gap:4px!important;overflow:hidden!important}
  .gcTopLeft{flex:0 1 auto!important;min-width:0!important;display:flex!important;align-items:center!important;gap:5px!important}
  .gcHamburger{flex:0 0 38px!important;width:38px!important;min-width:38px!important;height:38px!important;border-radius:11px!important}
  .gcLogoBrand{flex:0 1 120px!important;width:min(120px,29vw)!important;max-width:120px!important;overflow:hidden!important}
  .gcLogoBrand img{width:100%!important;max-width:100%!important;height:auto!important;max-height:34px!important}
  .gcTopRight{flex:1 1 auto!important;min-width:0!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:3px!important;overflow:hidden!important}
  .gcTopIcon,.gcProfileTop{flex:0 0 36px!important;width:36px!important;min-width:36px!important;max-width:36px!important;height:38px!important;min-height:38px!important;padding:0!important;border-radius:11px!important}
  .gcTopIcon .gcUiIcon3D{width:17px!important;height:17px!important}
  .gcProfileTop img,#topProfileAvatar{width:30px!important;height:30px!important;min-width:30px!important}
  .gcTopText,.statusChip,.streakPill,.coinPill,#xpPill,#coinPill,#streakPill{display:none!important}
  .badge{min-width:16px!important;height:16px!important;line-height:16px!important;padding:0 4px!important;font-size:8px!important}
  .chathead{flex:0 0 auto!important;min-height:0!important;padding:7px 10px!important}
  .chathead h2{font-size:14px!important;line-height:18px!important}
  .chathead p{font-size:9px!important;line-height:1.25!important;margin-top:2px!important}
  .messages{padding:4px 7px 8px!important}
  .msg{position:relative!important;grid-template-columns:38px minmax(0,1fr)!important;gap:7px!important;min-height:50px!important;padding:6px 2px!important}
  .msg .avatar{width:36px!important;height:36px!important;min-width:36px!important;font-size:11px!important}
  .msg .msgMain{min-width:0!important;padding-right:41px!important}
  .msg .meta{width:100%!important;min-width:0!important;min-height:18px!important;display:flex!important;flex-wrap:nowrap!important;align-items:center!important;gap:5px!important;overflow:hidden!important;padding-right:0!important}
  .msg .name{min-width:0!important;max-width:52%!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-size:13px!important;line-height:18px!important}
  .msg .meta .time{position:static!important;inset:auto!important;margin-left:auto!important;flex:0 0 auto!important;height:auto!important;min-height:0!important;line-height:18px!important;font-size:9px!important}
  .staffMessageBadge,.rank{flex:0 0 auto!important;max-width:72px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
  .msg .body{width:fit-content!important;max-width:100%!important;min-width:0!important;font-size:14px!important;line-height:1.38!important;overflow-wrap:anywhere!important;word-break:break-word!important}
  .replyQuote{width:100%!important;max-width:100%!important}
  .msgActions{position:absolute!important;top:5px!important;right:2px!important;width:34px!important;min-width:34px!important;height:31px!important;min-height:31px!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:0!important;margin:0!important;opacity:1!important}
  .msgActions button{width:32px!important;min-width:32px!important;height:29px!important;padding:0!important;font-size:10px!important}
  .typing{flex:0 0 17px!important;height:17px!important;min-height:17px!important;padding:0 8px!important}
  .replyBar{flex:0 0 auto!important}
  .composer{flex:0 0 48px!important;min-height:48px!important;height:48px!important;grid-template-columns:36px 36px minmax(0,1fr) 36px 40px!important;grid-template-rows:38px!important;align-items:center!important;gap:4px!important;padding:5px max(5px,env(safe-area-inset-right)) 5px max(5px,env(safe-area-inset-left))!important;overflow:hidden!important}
  .composer>button,.composerPlus,#emoji,.composerVoice{width:36px!important;min-width:36px!important;max-width:36px!important;height:36px!important;min-height:36px!important}
  .composerSend{width:40px!important;min-width:40px!important;max-width:40px!important;height:36px!important;min-height:36px!important}
  .composerInputWrap,.composerInputWrap textarea{min-width:0!important;width:100%!important;height:36px!important;min-height:36px!important;max-height:36px!important}
  .composerInputWrap textarea{padding:8px 12px!important;font-size:16px!important;line-height:20px!important;overflow-y:hidden!important}
  .modal{padding:max(4px,env(safe-area-inset-top)) max(4px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left))!important}
  .modalCard{width:100%!important;max-width:100%!important;max-height:calc(var(--gc-vh,100dvh) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 8px)!important;border-radius:14px!important}
}

@media(max-width:430px){
  .gcLogoBrand{flex-basis:102px!important;width:min(102px,25vw)!important;max-width:102px!important}
  .gcTopIcon,.gcProfileTop{flex-basis:34px!important;width:34px!important;min-width:34px!important;max-width:34px!important}
  .gcHamburger{flex-basis:36px!important;width:36px!important;min-width:36px!important}
  .gcTopRight{gap:2px!important}
  .messages{padding-left:6px!important;padding-right:6px!important}
}

@media(max-width:365px){
  .gcLogoBrand{flex-basis:76px!important;width:76px!important;max-width:76px!important}
  .gcTopIcon,.gcProfileTop{flex-basis:32px!important;width:32px!important;min-width:32px!important;max-width:32px!important}
  #topReportBtn{display:none!important}
  .composer{grid-template-columns:34px 34px minmax(0,1fr) 34px 38px!important;gap:3px!important}
  .composer>button,.composerPlus,#emoji,.composerVoice{width:34px!important;min-width:34px!important}
  .composerSend{width:38px!important;min-width:38px!important}
  .msg{grid-template-columns:34px minmax(0,1fr)!important}
  .msg .avatar{width:32px!important;height:32px!important;min-width:32px!important}
  .msg .name{max-width:46%!important}
}

@media(max-width:900px) and (orientation:landscape) and (max-height:520px){
  body:not(.gcAuthActive) .topbar{flex-basis:50px!important;height:50px!important;min-height:50px!important}
  .gcClassicTop{height:50px!important}
  .gcTopIcon,.gcProfileTop,.gcHamburger{height:34px!important;min-height:34px!important}
  .gcLogoBrand img{max-height:29px!important}
  .rooms,.users,#usersPanel{top:50px!important}
  .sidebarBackdrop{inset:50px 0 calc(50px + env(safe-area-inset-bottom))!important}
  .quickbar{height:calc(50px + env(safe-area-inset-bottom))!important;min-height:calc(50px + env(safe-area-inset-bottom))!important}
  .quickbar button{height:39px!important}
  body:not(.gcAuthActive) .chat{padding-bottom:calc(50px + env(safe-area-inset-bottom))!important}
  .chathead{display:none!important}
  .composer{height:44px!important;min-height:44px!important;flex-basis:44px!important}
}

@media(min-width:601px) and (max-width:900px){
  .topbar{padding-left:max(10px,env(safe-area-inset-left))!important;padding-right:max(10px,env(safe-area-inset-right))!important}
  .gcLogoBrand{max-width:190px!important}
  .gcLogoBrand img{max-height:37px!important}
  .gcTopRight{gap:5px!important}
  .messages{padding:8px 12px!important}
  .msg .msgMain{padding-right:72px!important}
  .composer{padding-left:10px!important;padding-right:10px!important}
}

@media(min-width:901px){
  .messages{container-type:inline-size}
  .msg .body{max-width:min(920px,78cqw)!important}
}

@supports (-webkit-touch-callout:none){
  @media(max-width:900px){
    input,textarea,select{font-size:max(16px,1em)}
    .messages,.modalCard,.rooms,.users{-webkit-overflow-scrolling:touch}
  }
}


/* STEP3H.45 — iPhone Safari modal/compositing stability */
@supports (-webkit-touch-callout:none){
  @media(max-width:900px){
    /* WebKit may discard the composited message layer when a fixed blurred overlay
       opens/closes. Use an opaque/translucent fallback instead of backdrop blur. */
    .gcUserMenuOverlay,.modal,.sidebarBackdrop,.overlay{
      -webkit-backdrop-filter:none!important;
      backdrop-filter:none!important;
    }
    .gcUserMenuOverlay{background:rgba(3,7,17,.92)!important}
    .modal{background:rgba(3,7,17,.90)!important}
    #messages{
      contain:none!important;
      transform:none!important;
      backface-visibility:visible!important;
      will-change:auto!important;
      isolation:auto!important;
    }
    #messages.gcMainChatRepaint{
      opacity:.9999!important;
      transform:translateZ(0)!important;
    }
  }
}

/* User action card: keep it inside the real mobile viewport and away from Safari chrome. */
@media(max-width:600px){
  .gcUserMenuOverlay{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:
      max(10px,env(safe-area-inset-top))
      max(10px,env(safe-area-inset-right))
      max(10px,env(safe-area-inset-bottom))
      max(10px,env(safe-area-inset-left))!important;
    overflow:hidden!important;
  }
  .gcUserMenu{
    width:min(430px,100%)!important;
    max-width:100%!important;
    max-height:min(78vh,calc(var(--gc-vh,100dvh) - 36px - env(safe-area-inset-top) - env(safe-area-inset-bottom)))!important;
    margin:0!important;
    padding:14px!important;
    border-radius:16px!important;
    overflow:auto!important;
    -webkit-overflow-scrolling:touch!important;
  }
  .gcUserMenu>header{padding-bottom:11px!important}
  .gcUserMenuGrid{grid-template-columns:1fr 1fr!important;gap:7px!important}
  .gcUserMenuGrid button{min-height:44px!important;padding:9px 10px!important;font-size:12px!important}
}
@media(max-width:390px){
  .gcUserMenuGrid{grid-template-columns:1fr!important}
  .gcUserMenu{max-height:min(82vh,calc(var(--gc-vh,100dvh) - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)))!important}
}

/* R15.15 — profielmuziek als eigen onderdeel, los van Spotify. */
.profileMusicSpotifyNote{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:11px;margin-bottom:12px;padding:13px 14px;border:1px solid #1ed76055;border-radius:15px;background:linear-gradient(135deg,#1ed76013,var(--panel2))}
.profileMusicSpotifyNote>span{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#1ed760;color:#07150c;font-size:24px}
.profileMusicSpotifyNote b,.profileMusicSpotifyNote small{display:block}.profileMusicSpotifyNote small{margin-top:3px;color:var(--muted);line-height:1.45}
.gcSpotifyProfileIdle{cursor:default}.gcSpotifyProfileIdle:hover{box-shadow:none}.gcSpotifyProfileIdle>strong{color:#8feaae}
@media(min-width:721px){#editProfileModal .profileEditorTabs{grid-template-columns:repeat(5,minmax(0,1fr))!important}}
@media(max-width:720px){.profileMusicSpotifyNote{grid-template-columns:38px minmax(0,1fr)}.profileMusicSpotifyNote>span{width:38px;height:38px}.profileMusicSpotifyNote button{grid-column:1/-1;width:100%}}

/* Message surface must always retain measurable height on authenticated mobile chat. */
@media(max-width:900px){
  body:not(.gcAuthActive) .chat{display:flex!important;flex-direction:column!important;min-height:0!important}
  body:not(.gcAuthActive) #messages{display:block!important;flex:1 1 0!important;min-height:80px!important;height:auto!important}
}

/* STEP3H.46 — emoji/paste polish */
.msg .body,.pmBody,#message,#pmInput,.emojiGrid button{
  font-family:Inter,system-ui,-apple-system,"Segoe UI","Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
}
.msg .body,.pmBody{unicode-bidi:plaintext}
.gcEmoPickAnimated{
  position:relative!important;
  border-color:rgba(226,187,82,.18)!important;
  background:linear-gradient(180deg,rgba(226,187,82,.045),rgba(255,255,255,.012))!important
}
.gcEmoPickAnimated::after{
  content:"●";position:absolute;right:4px;top:3px;font-size:6px;color:#36d98c;
  filter:drop-shadow(0 0 4px rgba(54,217,140,.75))
}
.gcEmoAnim{transform-origin:center;will-change:transform,opacity}
.gcEmoAnim-bounce{animation:gcEmoBounce 1.15s ease-in-out infinite}
.gcEmoAnim-shake{animation:gcEmoShake .8s ease-in-out infinite}
.gcEmoAnim-pulse{animation:gcEmoPulse 1.25s ease-in-out infinite}
.gcEmoAnim-blink{animation:gcEmoBlink 1.9s steps(1,end) infinite}
.gcEmoAnim-wiggle{animation:gcEmoWiggle .95s ease-in-out infinite}
.gcEmoAnim-float{animation:gcEmoFloat 1.8s ease-in-out infinite}
.gcEmoAnim-drip{animation:gcEmoDrip 1.35s ease-in-out infinite}
@keyframes gcEmoBounce{0%,100%{transform:translateY(0) scale(1)}45%{transform:translateY(-3px) scale(1.04)}65%{transform:translateY(1px) scale(.98)}}
@keyframes gcEmoShake{0%,100%{transform:rotate(0)}25%{transform:rotate(-6deg)}50%{transform:rotate(5deg)}75%{transform:rotate(-3deg)}}
@keyframes gcEmoPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.13)}}
@keyframes gcEmoBlink{0%,42%,46%,100%{opacity:1}43%,45%{opacity:.28}}
@keyframes gcEmoWiggle{0%,100%{transform:translateX(0) rotate(0)}33%{transform:translateX(-2px) rotate(-5deg)}66%{transform:translateX(2px) rotate(5deg)}}
@keyframes gcEmoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes gcEmoDrip{0%,100%{transform:translateY(0);filter:none}55%{transform:translateY(2px);filter:saturate(1.08)}}
@media(prefers-reduced-motion:reduce){
  .gcEmoAnim{animation:none!important}
}

/* STEP3H.48 — duidelijke reCAPTCHA validatie bij login */
.gcRecaptchaSlot{position:relative;border-radius:10px;transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}
.gcRecaptchaSlot.gcRecaptchaError{outline:2px solid #ff586d!important;outline-offset:4px!important;background:rgba(255,70,90,.055)!important;box-shadow:0 0 0 6px rgba(255,70,90,.06)!important}
.gcRecaptchaInlineError{margin-top:8px;padding:9px 11px;border:1px solid rgba(255,85,105,.42);border-radius:9px;background:rgba(102,24,39,.34);color:#ffd4da;font-size:11px;font-weight:750;line-height:1.4}
@media(max-width:560px){.gcRecaptchaInlineError{font-size:12px}}
\n/* STEP3H.49 — iOS Safari mainchat surface hardening.\n   Message rows must remain normal layout boxes; no compositor/content-visibility tricks. */\n@supports (-webkit-touch-callout:none){\n  @media(max-width:900px){\n    #messages.messages{contain:none!important;content-visibility:visible!important;transform:none!important;-webkit-transform:none!important;will-change:auto!important;backface-visibility:visible!important;-webkit-backface-visibility:visible!important}\n    #messages.messages>.msg{contain:none!important;content-visibility:visible!important;transform:none!important;-webkit-transform:none!important;will-change:auto!important;backface-visibility:visible!important;-webkit-backface-visibility:visible!important;opacity:1!important;visibility:visible!important}\n  }\n}\n\n\n/* STEP3H.49.2 — mobile latest-message visibility / real viewport reserve */\n@media(max-width:900px){\n  .messages{\n    padding-bottom:var(--gc-chat-bottom-reserve,126px)!important;\n    scroll-padding-bottom:var(--gc-chat-bottom-reserve,126px)!important;\n    box-sizing:border-box!important;\n  }\n  .messages>.msg:last-of-type{\n    scroll-margin-bottom:calc(var(--gc-chat-bottom-reserve,126px) + 8px)!important;\n  }\n}\n@supports(padding:max(0px)){\n  @media(max-width:900px){\n    .messages{padding-bottom:max(var(--gc-chat-bottom-reserve,126px),calc(112px + env(safe-area-inset-bottom)))!important}\n  }\n}\n
/* =========================================================
   STEP3H.49.3 — Addon Modal Visual Polish
   Alleen styling; geen addon/chatlogica aangepast.
   ========================================================= */

.gcAddonModalCard{
  width:min(760px,calc(100vw - 28px))!important;
  max-height:min(86dvh,860px)!important;
  overflow:auto!important;
  border-radius:20px!important;
  border:1px solid rgba(134,151,179,.26)!important;
  background:
    radial-gradient(circle at 88% -10%,rgba(228,185,76,.08),transparent 34%),
    linear-gradient(180deg,#1b2432 0%,#161f2c 100%)!important;
  box-shadow:0 26px 70px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.025)!important;
  padding:20px!important;
  scrollbar-width:thin;
}

.gcAddonModalCard .modalClose{
  top:14px!important;
  right:14px!important;
  width:34px!important;
  height:34px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:11px!important;
  border:1px solid rgba(135,150,173,.22)!important;
  background:#111925!important;
  color:#c8d2e0!important;
  font-size:22px!important;
  line-height:1!important;
  transition:transform .16s ease,border-color .16s ease,background .16s ease!important;
}
.gcAddonModalCard .modalClose:hover{
  transform:translateY(-1px);
  border-color:rgba(230,190,84,.45)!important;
  background:#172234!important;
  color:#fff!important;
}

.gcAddonModalCard .modalTitle{
  padding:2px 46px 15px 0!important;
  margin-bottom:15px!important;
  border-bottom:1px solid rgba(124,143,170,.18)!important;
}
.gcAddonModalCard .modalTitle small{
  display:block!important;
  color:#e4ba4d!important;
  font-size:10px!important;
  font-weight:900!important;
  letter-spacing:.12em!important;
  text-transform:uppercase!important;
  margin-bottom:5px!important;
}
.gcAddonModalCard .modalTitle h2,
.gcAddonModalCard .modalTitle h3{
  margin:0!important;
  font-size:clamp(21px,3vw,27px)!important;
  line-height:1.12!important;
  color:#f3f6fb!important;
}
.gcAddonModalCard .modalTitle p{
  margin:7px 0 0!important;
  color:#9faec1!important;
  line-height:1.45!important;
  max-width:68ch!important;
}

.gcAddonModalCard input:not([type=checkbox]):not([type=radio]):not([type=range]),
.gcAddonModalCard select,
.gcAddonModalCard textarea{
  min-height:44px!important;
  width:100%!important;
  border:1px solid #34445a!important;
  border-radius:11px!important;
  background:#0d1623!important;
  color:#edf2f8!important;
  padding:10px 12px!important;
  outline:none!important;
  box-sizing:border-box!important;
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease!important;
}
.gcAddonModalCard textarea{
  min-height:120px!important;
  resize:vertical!important;
  line-height:1.5!important;
}
.gcAddonModalCard input:focus,
.gcAddonModalCard select:focus,
.gcAddonModalCard textarea:focus{
  border-color:#b8953f!important;
  box-shadow:0 0 0 3px rgba(228,186,77,.10)!important;
  background:#0f1927!important;
}
.gcAddonModalCard label{
  color:#d8e0eb!important;
}
.gcAddonModalCard small,
.gcAddonModalCard .muted{
  color:#95a4b8!important;
}

.gcAddonModalCard .row{
  gap:10px!important;
  align-items:center!important;
  flex-wrap:wrap!important;
}
.gcAddonModalCard .row > *{
  min-width:0!important;
}
.gcAddonModalCard .primaryBtn,
.gcAddonModalCard .secondaryBtn,
.gcAddonModalCard button:not(.modalClose):not([data-emoji-tab]){
  min-height:42px!important;
  border-radius:11px!important;
  padding:9px 15px!important;
  font-weight:850!important;
  border:1px solid rgba(129,145,169,.24)!important;
  transition:transform .14s ease,filter .14s ease,border-color .14s ease!important;
}
.gcAddonModalCard .primaryBtn{
  background:linear-gradient(135deg,#efc45b,#dbaa38)!important;
  color:#15120a!important;
  border-color:#e7bd54!important;
}
.gcAddonModalCard .secondaryBtn{
  background:#233047!important;
  color:#eef3fa!important;
}
.gcAddonModalCard .primaryBtn:hover,
.gcAddonModalCard .secondaryBtn:hover,
.gcAddonModalCard button:not(.modalClose):hover{
  transform:translateY(-1px);
  filter:brightness(1.04);
}

.gcAddonModalCard .box,
.gcAddonModalCard .panel,
.gcAddonModalCard .card,
.gcAddonModalCard .spotifyStatus,
.gcAddonModalCard .privateEmpty,
.gcAddonModalCard .sideEmpty{
  border-radius:14px!important;
  border-color:rgba(118,137,164,.20)!important;
}

.gcAddonModalCard .sideEmpty,
.gcAddonModalCard .privateEmpty{
  padding:26px 18px!important;
  text-align:center!important;
  background:#111a27!important;
  color:#91a1b7!important;
  border:1px dashed rgba(133,151,178,.28)!important;
}

/* Giphy */
#giphyModal .giphyResults{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:10px!important;
  margin-top:14px!important;
  max-height:480px!important;
  overflow:auto!important;
  padding:2px!important;
}
#giphyModal .giphyResults button,
#giphyModal .giphyResult{
  padding:0!important;
  overflow:hidden!important;
  border-radius:12px!important;
  aspect-ratio:1.35/1!important;
  background:#0d1521!important;
}
#giphyModal .giphyResults img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  display:block!important;
}

/* Spotify */
#spotifyModal .spotifyPrefs{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:12px!important;
  margin:15px 0!important;
}
#spotifyModal .spotifyActions{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:9px!important;
  margin-top:14px!important;
}
#spotifyModal .spotifyTrack{
  display:grid!important;
  grid-template-columns:72px minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:13px!important;
  padding:14px!important;
  border-radius:15px!important;
  background:#101a27!important;
  border:1px solid rgba(116,141,128,.28)!important;
}
#spotifyModal .spotifyTrack img{
  width:72px!important;
  height:72px!important;
  object-fit:cover!important;
  border-radius:12px!important;
}

/* Radio / music */
#radioModal .radioStations,
#musicModal .radioStations{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:9px!important;
  margin-top:13px!important;
}
#radioModal .radioStation,
#musicModal .radioStation{
  min-height:48px!important;
  text-align:left!important;
  justify-content:flex-start!important;
  background:#111b29!important;
  color:#e8eef6!important;
  border-color:#33445a!important;
}
#radioModal .radioCustom,
#musicModal .radioCustom{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:9px!important;
  margin-top:13px!important;
}

/* Memo */
#memosModal .memoForm{
  display:grid!important;
  gap:10px!important;
}
#memosModal .memoList{
  margin-top:15px!important;
  display:grid!important;
  gap:10px!important;
  max-height:340px!important;
  overflow:auto!important;
}
#memosModal .memoItem{
  padding:13px!important;
  border:1px solid #334259!important;
  border-radius:13px!important;
  background:#101925!important;
}
#memosModal .memoItem.pinned{
  border-color:rgba(225,183,72,.48)!important;
  box-shadow:inset 3px 0 #e1b748!important;
}

/* Secret Post */
#secretPostModal .secretPostTabs{
  gap:8px!important;
  padding:5px!important;
  background:#101824!important;
  border:1px solid #2f3d52!important;
  border-radius:13px!important;
}
#secretPostModal .secretPostTabs button{
  flex:1!important;
}
#secretPostModal .secretPostItem{
  border:1px solid #324158!important;
  border-radius:14px!important;
  background:#101925!important;
  padding:13px!important;
}
#secretPostModal .secretPostItem.unread{
  border-color:rgba(231,188,75,.52)!important;
  box-shadow:inset 3px 0 #e7bc4b!important;
}
#secretRevealModal .secretRevealCard{
  text-align:center!important;
}
#secretRevealModal .secretRevealBody{
  margin-top:14px!important;
  padding:16px!important;
  border-radius:14px!important;
  background:linear-gradient(145deg,#261f35,#171f2d)!important;
  border:1px solid rgba(205,115,181,.30)!important;
  line-height:1.55!important;
}

/* Lucky / Quiz / Draw / Code */
#luckyWheelModal .gcAddonModalCard,
#quizModal .gcAddonModalCard,
#drawModal .gcAddonModalCard,
#drawingModal .gcAddonModalCard,
#codeModal .gcAddonModalCard{
  width:min(820px,calc(100vw - 28px))!important;
}

/* Consistent scrollbars inside addon dialogs */
.gcAddonModalCard *{
  scrollbar-width:thin;
  scrollbar-color:#43516a transparent;
}

/* Mobile / tablet */
@media(max-width:760px){
  .gcAddonModalCard{
    width:calc(100vw - 16px)!important;
    max-height:calc(100dvh - 18px)!important;
    border-radius:16px!important;
    padding:14px!important;
  }
  .gcAddonModalCard .modalTitle{
    padding-right:42px!important;
  }
  #giphyModal .giphyResults{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  #spotifyModal .spotifyPrefs{
    grid-template-columns:1fr!important;
  }
  #spotifyModal .spotifyTrack{
    grid-template-columns:58px minmax(0,1fr)!important;
  }
  #spotifyModal .spotifyTrack > :last-child{
    grid-column:1/-1!important;
  }
  #radioModal .radioStations,
  #musicModal .radioStations{
    grid-template-columns:1fr!important;
  }
  #radioModal .radioCustom,
  #musicModal .radioCustom{
    grid-template-columns:1fr!important;
  }
  .gcAddonModalCard .row{
    align-items:stretch!important;
  }
}

/* =========================================================
   STEP3H.49.4 — Cookievoorkeuren UI fix
   ========================================================= */
#cookieSettingsModal .cookieSettingsCard{
  width:min(620px,calc(100vw - 28px))!important;
  max-height:min(88dvh,760px)!important;
  overflow:auto!important;
  padding:20px!important;
  border-radius:20px!important;
  border:1px solid rgba(129,148,176,.28)!important;
  background:linear-gradient(180deg,#1b2534 0%,#17212f 100%)!important;
  box-shadow:0 28px 80px rgba(0,0,0,.48)!important;
}
#cookieSettingsModal .cookieSettingsTitle{
  padding:0 48px 16px 0!important;
  margin:0 0 14px!important;
  border-bottom:1px solid rgba(132,150,176,.17)!important;
}
#cookieSettingsModal .cookieSettingsTitle small{
  display:block!important;color:#e7bb4c!important;font-weight:900!important;
  font-size:10px!important;letter-spacing:.13em!important;margin-bottom:5px!important;
}
#cookieSettingsModal .cookieSettingsTitle h3{
  margin:0!important;color:#f5f7fb!important;font-size:24px!important;line-height:1.15!important;
}
#cookieSettingsModal .cookieSettingsTitle p{
  margin:7px 0 0!important;color:#aab6c7!important;line-height:1.45!important;
}
#cookieSettingsModal .cookieSettingsList{display:grid!important;gap:10px!important}
#cookieSettingsModal .cookieToggle{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:18px!important;align-items:center!important;
  margin:0!important;padding:15px 16px!important;
  border:1px solid #304057!important;border-radius:14px!important;
  background:#111a27!important;cursor:pointer!important;
}
#cookieSettingsModal .cookieToggle:hover{border-color:#43556e!important;background:#131e2d!important}
#cookieSettingsModal .cookieToggleLocked{cursor:default!important;background:#151d29!important}
#cookieSettingsModal .cookieToggleText{display:block!important;min-width:0!important}
#cookieSettingsModal .cookieToggleText b{
  display:block!important;color:#f0f4f9!important;font-size:14px!important;margin:0 0 4px!important;
}
#cookieSettingsModal .cookieToggleText small{
  display:block!important;color:#9eacbe!important;line-height:1.4!important;font-size:12px!important;
}
#cookieSettingsModal .cookieSwitch{position:relative!important;width:48px!important;height:27px!important;flex:none!important}
#cookieSettingsModal .cookieSwitch input{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
  opacity:0!important;margin:0!important;cursor:pointer!important;z-index:2!important;
}
#cookieSettingsModal .cookieSwitch i{
  position:absolute!important;inset:0!important;border-radius:999px!important;
  background:#2b3647!important;border:1px solid #445269!important;transition:.18s ease!important;
}
#cookieSettingsModal .cookieSwitch i:after{
  content:""!important;position:absolute!important;width:19px!important;height:19px!important;
  left:3px!important;top:3px!important;border-radius:50%!important;background:#cbd4df!important;
  box-shadow:0 2px 5px rgba(0,0,0,.35)!important;transition:.18s ease!important;
}
#cookieSettingsModal .cookieSwitch input:checked + i{
  background:#dbae43!important;border-color:#efc45b!important;
}
#cookieSettingsModal .cookieSwitch input:checked + i:after{
  transform:translateX(21px)!important;background:#17130a!important;
}
#cookieSettingsModal .cookieSwitch input:focus-visible + i{
  outline:3px solid rgba(88,139,255,.34)!important;outline-offset:2px!important;
}
#cookieSettingsModal .cookieSwitch input:disabled + i{opacity:.78!important}
#cookieSettingsModal .cookieSettingsFooter{
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  gap:16px!important;margin-top:16px!important;padding-top:15px!important;
  border-top:1px solid rgba(132,150,176,.17)!important;
}
#cookieSettingsModal .cookieSettingsFooter small{color:#8999ae!important;line-height:1.4!important}
#cookieSettingsModal #cookieSave{min-width:180px!important;min-height:44px!important;border-radius:11px!important}
#cookieSettingsModal .modalClose{
  width:38px!important;height:38px!important;display:grid!important;place-items:center!important;
  border-radius:11px!important;
}
@media(max-width:600px){
  #cookieSettingsModal .cookieSettingsCard{
    width:calc(100vw - 16px)!important;max-height:calc(100dvh - 18px)!important;padding:14px!important;
  }
  #cookieSettingsModal .cookieToggle{padding:13px!important;gap:12px!important}
  #cookieSettingsModal .cookieSettingsFooter{display:grid!important;grid-template-columns:1fr!important}
  #cookieSettingsModal #cookieSave{width:100%!important}
}

/* STEP3H.49.5 — Cookiebanner juridische links */
.cookieBanner .cookieLegalLinks{
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:7px!important;
  margin-top:8px!important;
}
.cookieBanner .cookieLegalLinks a{
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
  min-height:30px!important;
  padding:6px 10px!important;
  border:1px solid rgba(136,153,179,.28)!important;
  border-radius:999px!important;
  background:#101925!important;
  color:#dfe7f1!important;
  text-decoration:none!important;
  font-size:11px!important;
  font-weight:800!important;
  line-height:1!important;
  transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease!important;
}
.cookieBanner .cookieLegalLinks a:hover{
  background:#172335!important;
  border-color:rgba(229,185,75,.55)!important;
  color:#f1c457!important;
  transform:translateY(-1px)!important;
}
.cookieBanner .cookieLegalLinks a:focus-visible{
  outline:3px solid rgba(88,139,255,.32)!important;
  outline-offset:2px!important;
}
@media(max-width:620px){
  .cookieBanner .cookieLegalLinks{
    gap:6px!important;
  }
  .cookieBanner .cookieLegalLinks a{
    min-height:32px!important;
    padding:7px 10px!important;
  }
}

/* =========================================================
   STEP3H.49.6 — SAFE POLISH
   GEEN wijzigingen aan mainchat grid, iPhone userlist, visualViewport of scroll-engine.
   ========================================================= */

/* Modals: consistente touch targets + mobiel scrollen */
.gcAddonModalCard .modalClose,
.modal .modalClose{
  min-width:40px!important;min-height:40px!important;touch-action:manipulation;
}
.gcAddonModalCard{
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.gcAddonModalCard .sideEmpty,
.gcAddonModalCard .modalEmpty{
  min-height:84px;display:flex;align-items:center;justify-content:center;text-align:center;
  padding:18px!important;border:1px dashed rgba(135,151,176,.28)!important;border-radius:13px!important;
  background:#101824!important;color:#9aabc0!important;
}
.gcAddonLoading,.gcAddonError{
  grid-column:1/-1;min-height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:7px;padding:20px;text-align:center;border:1px dashed #34435a;border-radius:14px;background:#0f1825;color:#dfe7f2;
}
.gcAddonLoading span{width:25px;height:25px;border:3px solid #35445b;border-top-color:#e5b94e;border-radius:50%;animation:gcSafeSpin .75s linear infinite}
.gcAddonLoading small,.gcAddonError small{color:#94a4b8;line-height:1.4}
@keyframes gcSafeSpin{to{transform:rotate(360deg)}}
.gcSubmitting{opacity:.72!important;cursor:wait!important}

/* Media: alleen sizing, geen bericht/layoutstructuur */
.msg img.chatMedia,.msg video.chatMedia,.msg .chatMediaVideo,.pmMessages img,.pmMessages video{
  max-width:min(560px,100%)!important;height:auto!important;object-fit:contain!important;border-radius:12px!important;
}
.msg img.chatMedia,.pmMessages img{max-height:min(62vh,620px)!important}
.msg video.chatMedia,.msg .chatMediaVideo,.pmMessages video{max-height:min(65vh,650px)!important}
@media(max-width:700px){
  .msg img.chatMedia,.msg video.chatMedia,.msg .chatMediaVideo,.pmMessages img,.pmMessages video{
    max-width:100%!important;max-height:52vh!important;
  }
}

/* Emoji picker: consistente hit-area zonder composer te wijzigen */
#emojiGrid button{min-width:42px;min-height:42px;touch-action:manipulation}
#emojiGrid img{max-width:100%;max-height:100%;object-fit:contain}

/* Device Debug repeat badge */
.dbgRepeat{
  display:inline-flex;align-items:center;margin-left:5px;padding:2px 6px;border-radius:999px;
  background:#314056;color:#e8eef8;font-size:9px;font-weight:900;vertical-align:middle;
}

/* Nieuwsbrief preview/test */
.newsletterSafeActions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.newsletterPreview{margin-top:14px;border:1px solid #34445a;border-radius:15px;overflow:hidden;background:#0f1825}
.newsletterPreviewHead{padding:16px 18px;border-bottom:1px solid #2c3a4d;background:#151f2e}
.newsletterPreviewHead small{display:block;color:#dfb849;font-weight:900;letter-spacing:.1em;font-size:9px}
.newsletterPreviewHead h3{margin:5px 0 0;font-size:20px}
.newsletterPreviewBody{padding:20px 18px;line-height:1.65;color:#e3e9f1;white-space:normal}
.newsletterPreviewFoot{padding:13px 18px;border-top:1px solid #2c3a4d;color:#8fa0b5;font-size:10px;line-height:1.45}
@media(max-width:640px){.newsletterSafeActions{display:grid;grid-template-columns:1fr}.newsletterSafeActions .btn{width:100%}}

/* Admin cosmetische consistentie, zonder menu-functionaliteit te wijzigen */
.adminMain .card,.main .card{border-radius:15px}
.cardHead h2{letter-spacing:-.01em}
.btn{touch-action:manipulation}

/* STEP3H.49.7 — Speelcafé Game Center; geen mainchat/mobile core gewijzigd */
.xpDetailCard{width:min(520px,calc(100vw - 24px))!important}.xpHero{display:grid;gap:10px;padding:16px;border:1px solid #334158;border-radius:15px;background:#101925}.xpPercent{font-weight:900;color:#d9f7a0;text-align:right}.xpBar{height:30px;border-radius:10px;background:#080d12;overflow:hidden}.xpBar i{display:block;height:100%;background:linear-gradient(90deg,#69ba00,#98d72c);border-radius:10px;transition:width .35s ease}.xpHero>small{color:#91a0b4}.xpStats{display:grid;gap:0;margin-top:14px;border:1px solid #2e3a4d;border-radius:13px;overflow:hidden}.xpStats>div{display:flex;justify-content:space-between;padding:12px 14px;background:#141d29;border-bottom:1px solid #273345}.xpStats>div:last-child{border-bottom:0}

.gameCenterCard{width:min(960px,calc(100vw - 24px))!important}.gameCenterTabs{display:flex;gap:8px;padding:5px;background:#0f1723;border:1px solid #2f3c50;border-radius:14px;margin-bottom:14px}.gameCenterTabs button{flex:1!important;background:transparent!important;color:#aeb9c9!important}.gameCenterTabs button.active{background:#25334a!important;color:#fff!important;border-color:#ddb448!important}.gameCenterPane{display:none}.gameCenterPane.active{display:block}.gameCenterNotice{padding:11px 13px;border:1px solid rgba(221,180,72,.28);border-radius:12px;background:rgba(221,180,72,.07);color:#cbd4df;margin-bottom:12px}.sharedGameGrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:12px}.sharedGameCard{min-width:0;padding:15px;border:1px solid #314057;border-radius:15px;background:#101925}.sharedGameCard>div:first-child small{color:#e1b94b;font-size:9px;font-weight:900;letter-spacing:.1em}.sharedGameCard h4{margin:4px 0 7px;font-size:18px}.sharedGameCard p{margin:0 0 12px;color:#9cabbf;line-height:1.4}.wordMask{font-size:clamp(19px,3vw,28px);letter-spacing:.08em;font-weight:900;padding:14px 10px;text-align:center;border-radius:12px;background:#0a111b;border:1px solid #2d3b50;word-break:break-word}.wordMeta{display:flex;justify-content:space-between;gap:8px;margin:9px 0;color:#9daabd;font-size:10px}.wordGuessForm{display:grid;grid-template-columns:1fr auto;gap:8px}.wordRecent{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}.wordRecent span{padding:4px 7px;border-radius:8px;background:#1b2637;color:#aeb8c7;font-size:9px}.wordRecent span.correct{background:#103724;color:#7ff0ac}.sharedRouletteChoices{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:10px 0}.sharedRouletteChoices button{background:#1a2637!important;color:#f0f4f9!important}.rouletteTimer{padding:9px;border-radius:10px;background:#0b131e;text-align:center}.soloGameGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}.soloGameGrid button{min-height:90px!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;text-align:left!important;background:#111b29!important}.soloGameGrid button b{font-size:15px}.soloGameGrid button small{color:#95a4b8;margin-top:4px}.gameCenterScores{display:grid;gap:8px}.gameScoreRow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 13px;border:1px solid #304056;border-radius:11px;background:#111a27}.gameScoreRow span{color:#9facbd;font-size:11px}

@media(max-width:820px){.sharedGameGrid{grid-template-columns:1fr}.soloGameGrid{grid-template-columns:1fr 1fr}.gameCenterCard{max-height:calc(100dvh - 14px)!important}.wordMeta{flex-direction:column}.gameScoreRow{align-items:flex-start;flex-direction:column}}
@media(max-width:520px){.soloGameGrid{grid-template-columns:1fr}.gameCenterTabs{position:sticky;top:0;z-index:2}.wordGuessForm{grid-template-columns:1fr}.wordGuessForm button{width:100%}}

/* STEP3H.49.8 — Lobby + nette Hoger/Lager/Roulette */
.gameCenterCard{width:min(980px,calc(100vw - 24px))!important}.gameCenterTabs{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:8px!important;padding:5px!important;background:#0e1622!important;border:1px solid #2f3e53!important;border-radius:14px!important}.gameCenterTabs button.active{background:#2b3b57!important;color:#fff!important}
.lobbyHero,.soloIntro{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:16px;border:1px solid #314158;border-radius:15px;background:linear-gradient(135deg,#111b29,#172234);margin-bottom:12px}.lobbyHero small,.soloIntro small,.lobbyGameHead small,.scoreHeader small{color:#e7bb4b;font-size:9px;font-weight:900;letter-spacing:.11em}.lobbyHero h4,.soloIntro h4,.scoreHeader h4{margin:4px 0 5px;font-size:21px}.lobbyHero p,.soloIntro p,.scoreHeader p{margin:0;color:#9daabd;line-height:1.45}.lobbyHeroStats{display:grid;gap:7px;min-width:180px}.lobbyHeroStats span{padding:8px 10px;border-radius:10px;background:#0c1420;border:1px solid #2c394c;text-align:center}
.gcActiveRoundBar{display:flex;justify-content:space-between;gap:12px;padding:11px 13px;border-radius:12px;background:#151d28;border:1px solid #36445a;margin-bottom:12px}.gcActiveRoundBar span{font-size:10px;color:#9fb0c3}
.lobbyGames{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:12px}.lobbyGameCard{padding:16px;border:1px solid #314158;border-radius:15px;background:#101925;min-width:0}.lobbyGameHead{display:flex;justify-content:space-between;gap:8px}.lobbyGameHead h4{margin:4px 0 12px}.gameModePill{padding:5px 8px;border-radius:999px;background:#26364e;font-size:9px;font-weight:900;white-space:nowrap}.gameModePill.solo{background:#3a2c48}.lobbyGameState{display:grid;gap:5px;padding:12px;background:#0b141f;border:1px solid #2e3d51;border-radius:12px;margin-bottom:10px}.lobbyGameState small{color:#96a5b9}.gameHelpText{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:9px}.gameHelpText>div{display:grid;gap:3px;padding:10px;background:#101925;border:1px solid #2e3c51;border-radius:11px}.gameHelpText span{color:#95a4b7;font-size:10px}.soloGameGrid button>span{font-size:24px;margin-bottom:7px}.soloGameGrid button b{color:#eef3f9!important}.soloGameGrid button small{color:#95a4b8!important}
.gameScoreRow{display:grid!important;grid-template-columns:42px 42px minmax(0,1fr) auto!important;align-items:center!important;gap:10px!important}.scorePos{text-align:center;font-size:18px}.scoreAvatar img{width:38px;height:38px;border-radius:50%;object-fit:cover}.scoreUser{display:grid}.scoreUser small{color:#8fa0b5}.scoreBreakdown{display:flex;gap:7px;flex-wrap:wrap}.scoreBreakdown span{padding:4px 6px;border-radius:8px;background:#172234;font-size:9px}

.miniGameModalCard{width:min(560px,calc(100vw - 22px))!important}.miniGameStake{display:flex;justify-content:space-between;align-items:end;gap:12px;margin-bottom:16px;padding:12px;border:1px solid #304057;border-radius:12px;background:#101925}.miniGameStake label{display:grid;gap:5px;font-weight:800}.miniGameStake input{width:130px!important}.miniGameStake span{color:#9aaabd;font-size:10px}
.higherLowerStage{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;margin:14px 0}.playingCard{min-height:170px;display:grid;place-items:center;align-content:center;gap:8px;border-radius:18px;background:linear-gradient(145deg,#f3f5f8,#d8dee8);color:#111826;border:4px solid #fff;box-shadow:0 12px 30px rgba(0,0,0,.28)}.playingCard small{font-size:9px;font-weight:900;color:#667084}.playingCard strong{font-size:64px}.playingCard.mystery{background:linear-gradient(145deg,#182436,#0f1723);color:#edf3fb;border-color:#33445b}.higherLowerArrow{font-size:28px;color:#e8bb4c}.choiceButtons.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}.choiceButtons.two button{min-height:52px!important;font-size:15px!important}
.rouletteChoiceGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}.rouletteChoiceGrid button{min-height:72px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;font-size:15px!important;background:#172235!important;color:#f3f6fa!important}.rouletteChoiceGrid .rouletteRed{background:linear-gradient(145deg,#6f1e2a,#42131b)!important;border-color:#a33a4a!important}.rouletteChoiceGrid .rouletteBlack{background:linear-gradient(145deg,#202632,#10141c)!important;border-color:#465166!important}.miniGameResult{min-height:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:12px;border-radius:12px;background:#0c1420;border:1px solid #2e3c50;text-align:center}.miniGameResult span{color:#a0aec0;font-size:11px}
@media(max-width:820px){.lobbyGames{grid-template-columns:1fr}.lobbyHero,.soloIntro{align-items:flex-start;flex-direction:column}.lobbyHeroStats{width:100%;grid-template-columns:1fr 1fr}.gameHelpText{grid-template-columns:1fr}.gameScoreRow{grid-template-columns:36px 38px minmax(0,1fr)}.scoreBreakdown{grid-column:2/-1}}
@media(max-width:520px){.higherLowerStage{grid-template-columns:1fr}.higherLowerArrow{transform:rotate(90deg);text-align:center}.playingCard{min-height:120px}.miniGameStake{align-items:stretch;flex-direction:column}.miniGameStake input{width:100%!important}}

/* STEP3H.49.9 — gerichte iPhone laatste-bericht + Portemonnee fix */
@media(max-width:900px){
  .messages{
    padding-bottom:var(--gc-chat-bottom-reserve,150px)!important;
    scroll-padding-bottom:var(--gc-chat-bottom-reserve,150px)!important;
  }
  .messages>.msg:last-of-type{
    scroll-margin-bottom:calc(var(--gc-chat-bottom-reserve,150px) + 18px)!important;
  }
}
.walletModalCard{width:min(600px,calc(100vw - 24px))!important}
.walletSectionLabel{margin:5px 0 8px;color:#91a1b5;font-size:10px;font-weight:850;text-transform:uppercase;letter-spacing:.08em}
.walletHistoryTitle{margin-top:18px}
.walletHero{border-radius:14px!important}
.walletEmpty{min-height:90px!important;display:flex!important;align-items:center!important;justify-content:center!important;border:1px dashed #334157!important;border-radius:13px!important;background:#101824!important;color:#98a7ba!important}

/* STEP3H.49.11 — Room picker / Speelcafé presentation */
.rooms .roomAsideHead{
  min-height:auto!important;
  padding:14px 14px 12px!important;
  align-items:flex-start!important;
  background:
    radial-gradient(circle at 15% 0%,rgba(225,183,72,.09),transparent 35%),
    linear-gradient(180deg,#1a2433,#151e2b)!important;
}
.rooms .roomAsideHead>div{min-width:0}
.rooms .roomAsideHead small{
  display:block;color:#e6b94a;font-size:9px;font-weight:900;letter-spacing:.12em;margin-bottom:4px
}
.rooms .roomAsideHead h3{margin:0!important;font-size:18px!important;color:#f1f5fb!important}
.rooms .roomAsideHead p{margin:4px 0 0;color:#92a2b6;font-size:10px;line-height:1.35}
.rooms .roomAsideHead .mobileClose{
  flex:0 0 36px!important;width:36px!important;height:36px!important;min-width:36px!important;
  border-radius:11px!important;border:1px solid #35445a!important;background:#111a27!important;color:#d9e2ee!important
}
.rooms #rooms{
  height:calc(100% - 78px)!important;
  padding:10px!important;
  display:grid!important;
  align-content:start!important;
  gap:9px!important;
}
.roomShell{
  border:1px solid #2b394d;
  border-radius:15px;
  background:linear-gradient(145deg,#121b28,#0f1722);
  overflow:hidden;
  transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
.roomShell:hover{border-color:#40536e;transform:translateY(-1px)}
.roomShell.active{
  border-color:#e0b648;
  box-shadow:0 0 0 1px rgba(224,182,72,.14),0 10px 26px rgba(0,0,0,.22);
}
.rooms .roomShell .room{
  width:100%!important;
  min-height:82px!important;
  margin:0!important;
  padding:11px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  display:grid!important;
  grid-template-columns:48px minmax(0,1fr) 20px!important;
  gap:10px!important;
  align-items:center!important;
  text-align:left!important;
  color:#eef3f8!important;
}
.rooms .roomShell .room:hover,
.rooms .roomShell .room.active{border:0!important;background:rgba(255,255,255,.018)!important}
.roomIcon{
  width:46px;height:46px;display:grid;place-items:center;border-radius:14px;
  border:1px solid #3a4a61;background:linear-gradient(145deg,#202d40,#111927);
  font-size:24px;box-shadow:inset 0 1px rgba(255,255,255,.04),0 6px 16px rgba(0,0,0,.25)
}
.roomIcon-main{background:linear-gradient(145deg,#22344a,#101a27)}
.roomIcon-adult{background:linear-gradient(145deg,#4a2435,#1b121a);border-color:#6b3147}
.roomIcon-games{
  background:linear-gradient(145deg,#30295a,#17182c);
  border-color:#574b91;
  box-shadow:inset 0 1px rgba(255,255,255,.05),0 0 22px rgba(102,79,181,.14)
}
.roomCopy{display:block;min-width:0}
.roomCopy .roomEyebrow{
  display:block!important;margin:0 0 3px!important;color:#8191a7!important;
  font-size:8px!important;font-weight:900!important;letter-spacing:.11em!important;line-height:1!important
}
.room-games .roomEyebrow{color:#b59bff!important}
.room-adult .roomEyebrow{color:#ff91b0!important}
.room-main.active .roomEyebrow{color:#e3b74b!important}
.roomCopy strong{display:block;font-size:14px;line-height:1.2;color:#f4f7fb}
.roomCopy>span{display:block;margin-top:4px;color:#9eacbd;font-size:10px;line-height:1.35}
.roomArrow{color:#68798f;font-size:20px;text-align:center}
.roomShell.active .roomArrow{color:#e2b749;font-size:14px}
.roomGameStrip{
  display:flex;align-items:center;gap:5px;
  padding:0 11px 9px 69px;
  margin-top:-4px;
}
.roomGameStrip span{
  width:25px;height:25px;display:grid;place-items:center;border-radius:8px;
  border:1px solid #314159;background:#111b29;font-size:13px;
}
.roomGameActions{
  display:grid;grid-template-columns:1fr 1fr;gap:6px;
  padding:9px 10px 10px;border-top:1px solid #263548;background:#0d151f
}
.roomGameActions button{
  min-height:34px;border:1px solid #34455d;border-radius:9px;background:#172337;
  color:#dfe7f1;font-size:9px;font-weight:850;cursor:pointer
}
.roomGameActions button:first-child{
  background:linear-gradient(135deg,#d9ad3e,#efc75e);border-color:#e5b94e;color:#151208
}
.roomGameActions button:hover{filter:brightness(1.05);transform:translateY(-1px)}
@media(max-width:900px){
  .rooms #rooms{padding-bottom:calc(18px + env(safe-area-inset-bottom))!important}
  .rooms .roomShell .room{min-height:78px!important;grid-template-columns:44px minmax(0,1fr) 18px!important;padding:10px!important}
  .roomIcon{width:42px;height:42px;font-size:22px;border-radius:12px}
  .roomGameStrip{padding-left:64px}
}
@media(max-width:360px){
  .roomGameActions{grid-template-columns:1fr}
  .roomGameStrip{padding-left:10px}
}

/* STEP3H.49.12R — safe mobile/nameplate/Speelcafé rebuild */
@media(max-width:900px),(pointer:coarse){
  .userCard.has-nameplate .gcNameplateVideo{
    display:block!important;opacity:1!important;visibility:visible!important;
    transform:translateZ(0)!important;-webkit-transform:translateZ(0)!important;
    backface-visibility:hidden!important;-webkit-backface-visibility:hidden!important;
    pointer-events:none!important;
  }
}
.gcMoreGlyph{display:block!important;white-space:nowrap!important;word-break:normal!important;overflow-wrap:normal!important;letter-spacing:2px!important;line-height:1!important;font-size:13px!important}
@media(max-width:900px){
  .msgActions[data-gc-cody-menu="1"]{width:40px!important;min-width:40px!important;height:34px!important}
  .msgActions[data-gc-cody-menu="1"]>.gcCodyMoreBtn{width:38px!important;min-width:38px!important;height:32px!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:0!important;white-space:nowrap!important;overflow:hidden!important}
}
.gameScheduleCard{width:min(620px,calc(100vw - 22px))!important}
.gameScheduleNow{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 15px;border:1px solid #35455b;border-radius:14px;background:linear-gradient(135deg,#111b28,#172337);margin-bottom:11px}
.gameScheduleNow>div{display:grid;gap:4px}.gameScheduleNow small{color:#e5ba4b;font-size:9px;font-weight:900;letter-spacing:.1em}.gameScheduleNow b{font-size:16px}.gameScheduleNow span{color:#96a6b9;font-size:10px}
.gameScheduleLegend{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:11px}.gameScheduleLegend span{padding:6px 9px;border:1px solid #304057;border-radius:999px;background:#101925;color:#aeb9c7;font-size:9px}
.gameScheduleList{display:grid;gap:6px;max-height:300px;overflow:auto}.gameScheduleRow{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:9px;align-items:center;padding:9px 11px;border:1px solid #2e3d52;border-radius:11px;background:#101925}.gameScheduleRow.next{border-color:#75622e;background:linear-gradient(90deg,#171d26,#232117)}.gameScheduleRowIcon{width:32px;height:32px;display:grid;place-items:center;border-radius:9px;background:#172337;font-size:17px}.gameScheduleRow>div{display:grid}.gameScheduleRow small{color:#8f9fb3;font-size:9px}.gameScheduleRow time{font-weight:900;color:#e9c15a;font-size:12px}.gameScheduleHelp{margin-top:12px;padding:12px;border:1px dashed #36465c;border-radius:12px;background:#0f1824}.gameScheduleHelp p{margin:5px 0 0;color:#9aa9bb;font-size:10px;line-height:1.45}.wordGameStandaloneCard{width:min(560px,calc(100vw - 22px))!important}.gcScheduleIcon{font-size:24px;line-height:1}
#actionTray [data-speelcafe-only="1"]{border-color:rgba(226,183,72,.34)!important}
@media(max-width:520px){.gameScheduleNow{align-items:stretch;flex-direction:column}.gameScheduleNow .primaryBtn{width:100%!important}.gameScheduleLegend{display:grid;grid-template-columns:1fr}.gameScheduleRow{grid-template-columns:34px minmax(0,1fr) auto}}

/* STEP3H.49.12S — mobile keyboard viewport state-machine hotfix */
@media(max-width:900px){
  html.gcKeyboardOpen .messages{
    padding-bottom:var(--gc-chat-bottom-reserve,72px)!important;
    scroll-padding-bottom:var(--gc-chat-bottom-reserve,72px)!important;
  }
  html.gcKeyboardOpen .messages>.msg:last-of-type{
    scroll-margin-bottom:calc(var(--gc-chat-bottom-reserve,72px) + 8px)!important;
  }
}
\n/* STEP3H.49.12T — mobile viewport single-writer hotfix */
@media(max-width:900px){
  html.gcKeyboardOpen .chat{padding-bottom:62px!important}
  html.gcKeyboardOpen .messages{
    padding-bottom:var(--gc-chat-bottom-reserve,72px)!important;
    scroll-padding-bottom:var(--gc-chat-bottom-reserve,72px)!important;
  }
  html.gcKeyboardOpen .composer{bottom:max(0px,env(safe-area-inset-bottom))!important}
  html.gcKeyboardOpen .quickbar{display:none!important}
}

/* STEP3H.49.12U — mobile panels/modals polish, no mainchat scroll-engine changes */

/* Extra functies: eigen viewport-safe scrollgebied */
@media(max-width:900px){
  .actionTray{
    position:fixed!important;
    left:8px!important;
    right:8px!important;
    top:max(66px,calc(env(safe-area-inset-top) + 58px))!important;
    bottom:calc(64px + env(safe-area-inset-bottom))!important;
    width:auto!important;
    max-width:none!important;
    max-height:none!important;
    padding:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
    border-radius:16px!important;
    scroll-padding-top:70px!important;
    scroll-padding-bottom:24px!important;
  }
  .actionTray .addonTrayHead{
    position:sticky!important;
    top:0!important;
    z-index:5!important;
    min-height:58px!important;
    align-items:center!important;
    padding:10px 12px!important;
    background:linear-gradient(180deg,rgba(27,37,52,.98),rgba(22,31,44,.97))!important;
    backdrop-filter:blur(12px)!important;
    -webkit-backdrop-filter:blur(12px)!important;
    border-bottom:1px solid #35445a!important;
  }
  .actionTray #actionTrayClose{
    width:42px!important;height:42px!important;min-width:42px!important;
    display:grid!important;place-items:center!important;border-radius:12px!important;
    font-size:20px!important;
  }
  .addonTrayQuick{margin:10px 10px 0!important}
  .addonTrayGrid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:8px!important;
    padding:10px 10px 24px!important;
  }
  .addonTrayGrid button{
    min-height:94px!important;
    padding:10px 5px!important;
    justify-content:center!important;
    border:1px solid rgba(62,77,99,.65)!important;
    background:linear-gradient(145deg,#151f2d,#101823)!important;
    border-radius:12px!important;
  }
  .addonTrayGrid button .addonIcon{
    width:46px!important;height:46px!important;
  }

  /* Uniforme modalruimte: kaart zelf blijft binnen het zichtbare scherm */
  .modal{
    align-items:center!important;
    padding:
      max(8px,env(safe-area-inset-top))
      8px
      max(10px,env(safe-area-inset-bottom))!important;
    overflow:hidden!important;
  }
  .modal>.modalCard,
  .modal .modalCard{
    width:min(100%,720px)!important;
    max-height:calc(100dvh - max(16px,env(safe-area-inset-top)) - max(20px,env(safe-area-inset-bottom)))!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
    scroll-padding-top:62px!important;
    scroll-padding-bottom:24px!important;
  }
  @supports not (height:100dvh){
    .modal>.modalCard,.modal .modalCard{max-height:calc(100vh - 24px)!important}
  }
  .modalClose{
    position:sticky!important;
    float:right!important;
    top:0!important;
    z-index:8!important;
    width:42px!important;height:42px!important;min-width:42px!important;
    display:grid!important;place-items:center!important;
    margin:-6px -6px 0 8px!important;
    border:1px solid #334359!important;
    border-radius:12px!important;
    background:rgba(15,23,35,.94)!important;
    backdrop-filter:blur(10px)!important;
    -webkit-backdrop-filter:blur(10px)!important;
    line-height:1!important;
  }

  /* Profiel: lange inhoud blijft in één nette kaart */
  .profileModalCard{max-height:calc(100dvh - 18px)!important;overflow-y:auto!important}
  .profileCover{height:118px!important}
  .profileAvatar{left:18px!important;width:72px!important;height:72px!important;bottom:-32px!important}
  .profileDetails{padding:42px 16px 18px!important}
  .profileIdentity{gap:8px!important}
  .profileIdentity h2{font-size:21px!important}
  .profileBio{margin:13px 0!important}
  .profileActions{position:sticky!important;bottom:-1px!important;z-index:4!important;margin:14px -4px -4px!important;padding:10px 4px 4px!important;background:linear-gradient(0deg,#101621 75%,transparent)!important}

  /* Meldingen: acties bovenin blijven bereikbaar en lijst krijgt eigen scroll */
  .notificationCard{
    height:min(780px,calc(100dvh - 18px))!important;
    max-height:calc(100dvh - 18px)!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
  }
  .notificationHead{
    flex:0 0 auto!important;
    align-items:flex-start!important;
    padding-right:44px!important;
  }
  .notificationHead>div:last-child{flex-wrap:wrap!important;justify-content:flex-end!important}
  .pushSettings{flex:0 0 auto!important;max-height:34vh!important;overflow:auto!important}
  .notificationList{
    flex:1 1 auto!important;
    min-height:120px!important;
    max-height:none!important;
    padding-right:2px!important;
    padding-bottom:10px!important;
  }

  /* Privéchat: berichten scrollen, composer blijft beschikbaar */
  .pmCard{
    height:calc(100dvh - max(16px,env(safe-area-inset-top)) - max(16px,env(safe-area-inset-bottom)))!important;
    max-height:calc(100dvh - max(16px,env(safe-area-inset-top)) - max(16px,env(safe-area-inset-bottom)))!important;
    overflow:hidden!important;
  }
  .pmHead{flex:0 0 auto!important;padding-right:42px!important}
  .pmMessages{
    flex:1 1 auto!important;
    min-height:0!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
    scroll-padding-bottom:16px!important;
  }
  .pmComposer{
    flex:0 0 auto!important;
    position:sticky!important;
    bottom:0!important;
    z-index:5!important;
    margin-top:8px!important;
    padding:8px 0 max(2px,env(safe-area-inset-bottom))!important;
    background:#101621!important;
  }

  /* Lange formulieren: submit blijft bereikbaar zonder layout te forceren */
  .modalCard form .primaryBtn[type="submit"],
  .modalCard form button[type="submit"].primaryBtn{
    min-height:44px!important;
  }

  /* Rustigere mobiele scrollbar */
  .actionTray,.modalCard,.notificationList,.pmMessages{
    scrollbar-width:thin!important;
    scrollbar-color:#41516a transparent!important;
  }
  .actionTray::-webkit-scrollbar,.modalCard::-webkit-scrollbar,.notificationList::-webkit-scrollbar,.pmMessages::-webkit-scrollbar{width:5px!important}
  .actionTray::-webkit-scrollbar-thumb,.modalCard::-webkit-scrollbar-thumb,.notificationList::-webkit-scrollbar-thumb,.pmMessages::-webkit-scrollbar-thumb{background:#41516a!important;border-radius:999px!important}
}

/* Compacte Speelcafé-info in Extra functies */
.speelcafeTraySummary{
  margin:10px 10px 0;
  padding:11px;
  border:1px solid #4b456e;
  border-radius:13px;
  background:linear-gradient(135deg,#171b31,#111a27);
}
.gcSpeelTrayHead{display:flex;align-items:center;justify-content:space-between;gap:10px}
.gcSpeelTrayHead>div{display:grid;gap:2px;min-width:0}
.gcSpeelTrayHead small,.gcSpeelNow small{color:#c5adff;font-size:8px;font-weight:900;letter-spacing:.11em}
.gcSpeelTrayHead strong{font-size:12px;color:#f0f3f8}
.gcSpeelTrayHead button{min-height:34px;padding:7px 10px;border:1px solid #5b4d93;border-radius:9px;background:#292447;color:#fff;font-weight:850}
.gcSpeelNow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 8px;margin-top:9px;padding:9px;border-radius:10px;background:#0e1622;border:1px solid #2f3e53}
.gcSpeelNow small{grid-column:1/-1}.gcSpeelNow b{font-size:11px}.gcSpeelNow span{font-size:10px;color:#e5bd58;font-weight:850}
.gcSpeelTrayHint{margin-top:8px;color:#92a2b6;font-size:9px;line-height:1.4}
@media(min-width:901px){.speelcafeTraySummary{margin:9px 2px 0}}

/* STEP3H.49.12V — Cody-style mobile keyboard/chat stability */
@media(max-width:900px){
  html.gcKeyboardOpen,
  html.gcKeyboardOpen body,
  html.gcKeyboardOpen #app,
  html.gcKeyboardOpen .layout,
  html.gcKeyboardOpen .chat,
  html.gcKeyboardOpen .messages{
    scroll-behavior:auto!important;
  }
  html.gcKeyboardOpen .messages{
    overflow-anchor:none!important;
    overscroll-behavior-y:contain!important;
  }
  html.gcKeyboardOpen .composer{
    scroll-margin:0!important;
  }
}

/* STEP3H.49.12W — AUTHORITATIVE CODY-STYLE MOBILE CHAT LAYOUT
   Dit blok staat expres als laatste en vervangt alleen op <=900px de oude
   fixed-composer / bottom-reserve lagen. Desktop blijft onaangeraakt. */
@media(max-width:900px){
  html.gcCodyMobileShell,
  html.gcCodyMobileShell body{
    width:100%!important;
    height:100%!important;
    max-height:100%!important;
    overflow:hidden!important;
    overscroll-behavior:none!important;
  }

  html.gcCodyMobileShell #app{
    position:fixed!important;
    left:0!important;
    right:0!important;
    top:var(--gc-cody-vv-top,0px)!important;
    bottom:auto!important;
    width:100vw!important;
    height:var(--gc-cody-vv-height,100dvh)!important;
    max-height:var(--gc-cody-vv-height,100dvh)!important;
    min-height:0!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
    transform:none!important;
    -webkit-transform:none!important;
  }

  html.gcCodyMobileShell #app>.topbar{
    position:relative!important;
    top:auto!important;
    left:auto!important;
    right:auto!important;
    flex:0 0 58px!important;
    width:100%!important;
    height:58px!important;
    min-height:58px!important;
  }

  html.gcCodyMobileShell #app>.layout{
    position:relative!important;
    flex:1 1 auto!important;
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    width:100%!important;
    padding:0!important;
    margin:0!important;
    overflow:hidden!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:minmax(0,1fr)!important;
  }

  html.gcCodyMobileShell .chat{
    grid-column:1!important;
    grid-row:1!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-height:100%!important;
    padding:0 0 58px!important;
    margin:0!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
  }

  html.gcCodyMobileShell .chathead,
  html.gcCodyMobileShell .replyBar,
  html.gcCodyMobileShell .typing,
  html.gcCodyMobileShell #quizQuickBtn{
    flex:0 0 auto!important;
  }

  html.gcCodyMobileShell #messages.messages{
    position:relative!important;
    flex:1 1 auto!important;
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    margin:0!important;
    padding:8px 10px 10px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    scroll-padding:0 0 10px!important;
    scroll-behavior:auto!important;
    overscroll-behavior-y:contain!important;
    -webkit-overflow-scrolling:touch!important;
    overflow-anchor:auto!important;
    contain:none!important;
    transform:none!important;
    -webkit-transform:none!important;
  }

  html.gcCodyMobileShell #composer.composer{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    flex:0 0 56px!important;
    width:100%!important;
    height:56px!important;
    min-height:56px!important;
    max-height:56px!important;
    margin:0!important;
    padding:6px max(6px,env(safe-area-inset-right)) 6px max(6px,env(safe-area-inset-left))!important;
    z-index:1000!important;
    background:#252b38f5!important;
    border-top:1px solid #394152!important;
    transform:none!important;
    -webkit-transform:none!important;
  }

  /* Navigatie hoort bij de layout, niet bij het toetsenbord. */
  html.gcCodyMobileShell .quickbar{
    position:absolute!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    top:auto!important;
    width:100%!important;
    height:58px!important;
    min-height:58px!important;
    margin:0!important;
    z-index:900!important;
  }

  html.gcCodyMobileShell.gcKeyboardOpen .quickbar{
    display:none!important;
  }
  html.gcCodyMobileShell.gcKeyboardOpen .chat{
    padding-bottom:0!important;
  }
  html.gcCodyMobileShell.gcKeyboardOpen #messages.messages{
    padding-bottom:10px!important;
  }
  html.gcCodyMobileShell.gcKeyboardOpen #composer.composer{
    position:relative!important;
    bottom:auto!important;
  }

  /* De knoppen 'nieuwe berichten' / quiz mogen nooit onder composer verdwijnen. */
  html.gcCodyMobileShell .newMessages{
    bottom:calc(58px + 66px)!important;
  }
  html.gcCodyMobileShell.gcKeyboardOpen .newMessages{
    bottom:66px!important;
  }

  /* Drawers blijven binnen exact dezelfde zichtbare shell. */
  html.gcCodyMobileShell .rooms,
  html.gcCodyMobileShell .users,
  html.gcCodyMobileShell .gcRightPanel{
    top:58px!important;
    bottom:58px!important;
    max-height:none!important;
  }
  html.gcCodyMobileShell.gcKeyboardOpen .rooms,
  html.gcCodyMobileShell.gcKeyboardOpen .users,
  html.gcCodyMobileShell.gcKeyboardOpen .gcRightPanel{
    bottom:0!important;
  }
}

/* Kleinere telefoons houden exact dezelfde architectuur; alleen knopmaten wijzigen. */
@media(max-width:520px){
  html.gcCodyMobileShell #composer.composer{
    height:54px!important;
    min-height:54px!important;
    max-height:54px!important;
    flex-basis:54px!important;
  }
  html.gcCodyMobileShell.gcKeyboardOpen .newMessages{bottom:64px!important}
}

/* STEP3H.49.12X — final mobile interaction polish */

/* Chatopties: geen afgesneden tabs meer op kleine telefoons. */
@media(max-width:900px){
  .chatOptionsCard{
    width:calc(100vw - 12px)!important;
    max-width:none!important;
    padding:14px!important;
  }
  .chatOptionsTabs{
    display:flex!important;
    grid-template-columns:none!important;
    gap:6px!important;
    width:100%!important;
    max-width:100%!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    overscroll-behavior-x:contain!important;
    -webkit-overflow-scrolling:touch!important;
    scroll-snap-type:x proximity!important;
    scrollbar-width:none!important;
    padding:5px!important;
    margin:10px 0 12px!important;
  }
  .chatOptionsTabs::-webkit-scrollbar{display:none!important}
  .chatOptionsTabs button{
    flex:0 0 auto!important;
    min-width:112px!important;
    min-height:44px!important;
    white-space:nowrap!important;
    scroll-snap-align:center!important;
    padding:8px 12px!important;
  }
  .chatOptionsPane{
    padding-bottom:18px!important;
    overscroll-behavior-y:contain!important;
  }

  /* Profiel Studio-tabs hetzelfde gedrag: groot genoeg voor vingers,
     horizontaal scrollbaar wanneer een toestel te smal is. */
  .profileEditorTabs{
    display:flex!important;
    grid-template-columns:none!important;
    width:100%!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior-x:contain!important;
    scrollbar-width:none!important;
    scroll-snap-type:x proximity!important;
  }
  .profileEditorTabs::-webkit-scrollbar{display:none!important}
  .profileEditorTabs button{
    flex:0 0 auto!important;
    min-width:104px!important;
    min-height:44px!important;
    white-space:nowrap!important;
    scroll-snap-align:center!important;
  }

  /* Extra functies: laatste rij blijft echt volledig bereikbaar boven
     onderste navigatie + Android/iPhone safe area. */
  .actionTray{
    scroll-padding-bottom:44px!important;
    padding-bottom:max(20px,env(safe-area-inset-bottom))!important;
  }
  .actionTray .addonTrayGrid{
    padding-bottom:44px!important;
  }
  .actionTray .addonTrayGrid>button:last-child{
    margin-bottom:8px!important;
  }

  /* Lange beheer-/accountkaarten: sluiten blijft bereikbaar. */
  .chatOptionsTitle,
  .profileEditorHead{
    position:sticky!important;
    top:0!important;
    z-index:6!important;
    background:linear-gradient(180deg,#1b2534 82%,rgba(27,37,52,.94))!important;
  }
  .profileEditorHead{
    padding-top:2px!important;
  }

  /* Account-/chatoptie-acties niet tegen de onderste browserbalk. */
  .chatOptionsActions,
  .profileEditorActions{
    padding-bottom:max(58px,calc(54px + env(safe-area-inset-bottom)))!important;
  }
}

/* Heel smalle schermen: tabs blijven leesbaar en er verschijnt geen
   horizontale modal-scroll. */
@media(max-width:380px){
  .chatOptionsTabs button{min-width:104px!important;font-size:11px!important}
  .profileEditorTabs button{min-width:96px!important;font-size:10px!important}
}

/* STEP3H.49.12Y — auth/login must never use the authenticated mobile chat shell */
.gcAutocompleteUsernameAssist{
  position:absolute!important;
  width:1px!important;height:1px!important;
  padding:0!important;margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
  pointer-events:none!important;
}

@media(max-width:900px){
  body.gcAuthActive{
    position:static!important;
    width:100%!important;
    height:auto!important;
    min-height:100dvh!important;
    max-height:none!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
  }
  body.gcAuthActive #auth.authOverlay{
    position:relative!important;
    inset:auto!important;
    display:block!important;
    width:100%!important;
    height:auto!important;
    min-height:100dvh!important;
    max-height:none!important;
    overflow:visible!important;
    padding:12px!important;
  }
  body.gcAuthActive .authShell{
    width:min(100%,620px)!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0 auto!important;
    overflow:visible!important;
  }
  body.gcAuthActive .authPanel{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
    padding-bottom:max(28px,calc(18px + env(safe-area-inset-bottom)))!important;
  }
}

/* STEP3H.49.12Z — authoritative scroll ownership + Coinspellen UI */

/* Auth/login/register: BOTH root elements must be scrollable.
   This wins over historic html,body height:100% and mobile shell rules. */
html.gcAuthPage{
  position:static!important;
  width:100%!important;
  height:auto!important;
  min-height:100%!important;
  max-height:none!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior-y:auto!important;
  -webkit-overflow-scrolling:touch!important;
}
html.gcAuthPage body.gcAuthActive{
  position:static!important;
  width:100%!important;
  height:auto!important;
  min-height:100dvh!important;
  max-height:none!important;
  overflow:visible!important;
}
html.gcAuthPage #app{
  position:static!important;
  height:auto!important;
  max-height:none!important;
  min-height:0!important;
  overflow:visible!important;
}
html.gcAuthPage #auth.authOverlay{
  position:relative!important;
  inset:auto!important;
  width:100%!important;
  height:auto!important;
  min-height:100dvh!important;
  max-height:none!important;
  overflow:visible!important;
}
html.gcAuthPage .authShell,
html.gcAuthPage .authPanel,
html.gcAuthPage .authHero,
html.gcAuthPage .authShellFoot{
  height:auto!important;
  max-height:none!important;
  overflow:visible!important;
}

/* Mobile overlays/panels: the panel itself owns scrolling.
   Prevent a hidden body/app from trapping touch scrolling. */
@media(max-width:900px){
  .actionTray:not(.hidden){
    overflow-y:auto!important;
    overflow-x:hidden!important;
    touch-action:pan-y!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior-y:contain!important;
    padding-bottom:max(52px,calc(28px + env(safe-area-inset-bottom)))!important;
  }
  .modal:not(.hidden)>.modalCard,
  .modal:not(.hidden) .modalCard{
    overflow-y:auto!important;
    touch-action:pan-y!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior-y:contain!important;
  }
}

/* STEP3H.49.13A — definitive modal scroll ownership
   Mainchat/#app/Cody shell are intentionally untouched. */
@media(max-width:900px){

  /* Profiel Studio: only the active tab pane scrolls. */
  #editProfileModal{
    overflow:hidden!important;
    touch-action:none!important;
  }
  #editProfileModal>.profileStudioCard,
  #editProfileModal .profileStudioCard{
    display:flex!important;
    flex-direction:column!important;
    width:100vw!important;
    max-width:100vw!important;
    height:var(--gc-cody-vv-height,100dvh)!important;
    max-height:var(--gc-cody-vv-height,100dvh)!important;
    min-height:0!important;
    padding:10px!important;
    overflow:hidden!important;
    touch-action:none!important;
  }
  #editProfileModal .profileStudioHeader{flex:0 0 auto!important}
  #editProfileModal .profileStudioLayout{
    flex:1 1 auto!important;
    min-height:0!important;
    height:auto!important;
    overflow:hidden!important;
    display:flex!important;
    flex-direction:column!important;
  }
  #editProfileModal .profileLivePanel{
    flex:0 0 96px!important;
    height:96px!important;
    min-height:96px!important;
    max-height:96px!important;
    overflow:hidden!important;
  }
  #editProfileModal .profileStudioEditor{
    flex:1 1 0!important;
    min-height:0!important;
    height:0!important;
    overflow:hidden!important;
    display:flex!important;
    flex-direction:column!important;
    touch-action:none!important;
  }
  #editProfileModal .profileEditorTabs{flex:0 0 auto!important}
  #editProfileModal .profileTabbedForm{
    flex:1 1 0!important;
    min-height:0!important;
    height:0!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
    padding:0!important;
    touch-action:none!important;
  }
  #editProfileModal .profileTabPane{
    display:none!important;
    flex:1 1 0!important;
    min-height:0!important;
    height:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding:2px 4px 18px 2px!important;
    overscroll-behavior-y:contain!important;
    -webkit-overflow-scrolling:touch!important;
    touch-action:pan-y!important;
    scrollbar-width:thin!important;
  }
  #editProfileModal .profileTabPane.active{
    display:block!important;
    height:auto!important;
  }
  #editProfileModal .profileEditorActions{
    position:relative!important;
    inset:auto!important;
    flex:0 0 auto!important;
    width:100%!important;
    margin:0!important;
    padding:9px 0 max(6px,env(safe-area-inset-bottom))!important;
    background:var(--gc-safe-surface2,#151f2d)!important;
  }

  /* Chatopties: only the active options pane scrolls. */
  #chatOptionsModal{
    overflow:hidden!important;
    touch-action:none!important;
  }
  #chatOptionsModal>.chatOptionsCard,
  #chatOptionsModal .chatOptionsCard{
    display:flex!important;
    flex-direction:column!important;
    width:100vw!important;
    max-width:100vw!important;
    height:var(--gc-cody-vv-height,100dvh)!important;
    max-height:var(--gc-cody-vv-height,100dvh)!important;
    min-height:0!important;
    overflow:hidden!important;
    touch-action:none!important;
    padding:10px!important;
  }
  #chatOptionsModal .chatOptionsTitle,
  #chatOptionsModal .chatOptionsTabs{flex:0 0 auto!important}
  #chatOptionsModal .chatOptionsForm{
    flex:1 1 0!important;
    min-height:0!important;
    height:0!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
    touch-action:none!important;
  }
  #chatOptionsModal .chatOptionsPane{
    display:none!important;
    flex:1 1 0!important;
    min-height:0!important;
    height:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding:3px 4px 22px!important;
    overscroll-behavior-y:contain!important;
    -webkit-overflow-scrolling:touch!important;
    touch-action:pan-y!important;
    scrollbar-width:thin!important;
  }
  #chatOptionsModal .chatOptionsPane.active{
    display:block!important;
    height:auto!important;
  }
  #chatOptionsModal .chatOptionsActions{
    position:relative!important;
    inset:auto!important;
    flex:0 0 auto!important;
    margin:0!important;
    padding:9px 0 max(6px,env(safe-area-inset-bottom))!important;
    background:var(--gc-safe-surface2,#151f2d)!important;
  }

  /* Other long modals: one card scroller. */
  .modal:not(#editProfileModal):not(#chatOptionsModal):not(.hidden)>.modalCard{
    max-height:calc(var(--gc-cody-vv-height,100dvh) - 12px)!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior-y:contain!important;
    -webkit-overflow-scrolling:touch!important;
    touch-action:pan-y!important;
    scroll-padding-bottom:24px!important;
  }

  /* Emoji/stickers: grid owns scroll and stays above composer/keyboard. */
  #emojiPanel.emojiPanel{
    display:flex!important;
    flex-direction:column!important;
    left:6px!important;
    right:6px!important;
    width:auto!important;
    bottom:60px!important;
    max-height:min(430px,calc(var(--gc-cody-vv-height,100dvh) - 72px))!important;
    padding:0!important;
    overflow:hidden!important;
    touch-action:none!important;
  }
  #emojiPanel .emojiHead,
  #emojiPanel .emojiTabs{
    flex:0 0 auto!important;
    margin:0!important;
  }
  #emojiPanel .emojiGrid{
    flex:1 1 auto!important;
    min-height:74px!important;
    max-height:none!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior-y:contain!important;
    -webkit-overflow-scrolling:touch!important;
    touch-action:pan-y!important;
    padding-bottom:max(12px,env(safe-area-inset-bottom))!important;
  }
  html.gcKeyboardOpen #emojiPanel.emojiPanel{
    bottom:58px!important;
    max-height:calc(var(--gc-cody-vv-height,100dvh) - 66px)!important;
  }
}

.chatStickerWrap{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  width:fit-content;
  max-width:100%;
}
.chatSticker{
  display:block;
  width:auto;
  height:auto;
  max-width:min(180px,46vw);
  max-height:180px;
  object-fit:contain;
  border:0!important;
  background:transparent!important;
}

/* STEP3H.49.13B — direct sticker send feedback */
.stickerPick:disabled{
  opacity:.58!important;
  cursor:wait!important;
}
.stickerPick[data-gc-sticker-sending="1"]{
  opacity:1!important;
  outline:2px solid rgba(230,184,76,.75)!important;
  outline-offset:2px!important;
}
@media(max-width:900px){
  #emojiPanel .stickerPick{
    touch-action:manipulation!important;
    -webkit-tap-highlight-color:transparent!important;
  }
}

/* STEP3H.49.13C — modal visibility + mobile profile viewer */

/* Hidden must ALWAYS win, even over high-specificity panel layout rules. */
.modal.hidden,
#emojiPanel.hidden,
.emojiPanel.hidden,
.actionTray.hidden,
.gcProfileMenu.hidden{
  display:none!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

/* Floating emoji panel is shown only after explicit user action. */
#emojiPanel.emojiPanel:not(.hidden){
  visibility:visible!important;
  pointer-events:auto!important;
}

@media(max-width:900px){
  /* Generic modal surface: one visible viewport, no accidental page movement. */
  .modal:not(.hidden){
    position:fixed!important;
    inset:0!important;
    width:100vw!important;
    height:var(--gc-cody-vv-height,100dvh)!important;
    max-height:var(--gc-cody-vv-height,100dvh)!important;
    padding:max(6px,env(safe-area-inset-top)) 6px max(6px,env(safe-area-inset-bottom))!important;
    overflow:hidden!important;
    align-items:center!important;
    justify-content:center!important;
    touch-action:none!important;
  }

  /* PROFIEL BEKIJKEN: card stays still, only active content pane scrolls. */
  #profileModal:not(.hidden){
    padding:6px!important;
  }
  #profileModal .profileModalCard{
    position:relative!important;
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    max-width:520px!important;
    height:calc(var(--gc-cody-vv-height,100dvh) - 12px)!important;
    max-height:calc(var(--gc-cody-vv-height,100dvh) - 12px)!important;
    min-height:0!important;
    margin:0 auto!important;
    padding:0!important;
    overflow:hidden!important;
    border-radius:16px!important;
    touch-action:none!important;
  }
  #profileModal .modalClose{
    position:absolute!important;
    top:8px!important;
    right:8px!important;
    z-index:20!important;
    width:42px!important;
    height:42px!important;
    margin:0!important;
  }
  #profileModal #profileContent{
    flex:1 1 0!important;
    min-height:0!important;
    height:100%!important;
    overflow:hidden!important;
    display:flex!important;
    flex-direction:column!important;
  }
  #profileModal .gcProfile{
    flex:1 1 0!important;
    min-height:0!important;
    height:100%!important;
    overflow:hidden!important;
    display:flex!important;
    flex-direction:column!important;
    background:#111927!important;
  }

  /* Compact hero: identity remains clear without consuming half the phone. */
  #profileModal .gcProfileHero{
    position:relative!important;
    flex:0 0 174px!important;
    min-height:174px!important;
    height:174px!important;
    max-height:174px!important;
    overflow:hidden!important;
    padding:12px 14px 10px!important;
    background-position:center!important;
    background-size:cover!important;
  }
  #profileModal .gcProfileCounters{
    top:10px!important;
    left:10px!important;
    right:auto!important;
    gap:5px!important;
  }
  #profileModal .gcProfileCounters span,
  #profileModal .gcProfileCounters button{
    min-height:30px!important;
    padding:5px 8px!important;
    font-size:10px!important;
  }
  #profileModal .gcProfileAvatar{
    width:78px!important;
    height:78px!important;
    left:50%!important;
    top:18px!important;
    bottom:auto!important;
    transform:translateX(-50%)!important;
  }
  #profileModal .gcProfileIdentity{
    position:absolute!important;
    left:12px!important;
    right:12px!important;
    bottom:10px!important;
    text-align:center!important;
    padding:0!important;
  }
  #profileModal .gcProfileIdentity small{
    font-size:8px!important;
  }
  #profileModal .gcProfileIdentity h2{
    margin:2px 0!important;
    font-size:18px!important;
    line-height:1.05!important;
  }
  #profileModal .gcProfileIdentity p{
    margin:0!important;
    font-size:10px!important;
    line-height:1.25!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  #profileModal .profileFriendStatus{
    display:inline-flex!important;
    margin-top:3px!important;
    font-size:9px!important;
    padding:3px 7px!important;
  }

  /* XP card compact but fully readable. */
  #profileModal .gcProfileLevel{
    flex:0 0 86px!important;
    min-height:86px!important;
    height:86px!important;
    margin:8px 10px!important;
    padding:9px 12px!important;
    border-radius:12px!important;
  }
  #profileModal .gcProfileLevelIcon{
    width:32px!important;
    height:32px!important;
    font-size:16px!important;
  }
  #profileModal .gcProfileLevelMain small{font-size:7px!important}
  #profileModal .gcProfileLevelMain strong{font-size:14px!important}
  #profileModal .gcProfileLevelMain span{font-size:8px!important}
  #profileModal .gcProfileLevelMain i{height:5px!important;margin-top:5px!important}
  #profileModal .gcProfileLevelMain em{font-size:8px!important}

  /* Tabs do not jump around: one stable strip. */
  #profileModal .gcProfileTabs{
    flex:0 0 44px!important;
    min-height:44px!important;
    height:44px!important;
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:0!important;
    width:100%!important;
    overflow:hidden!important;
    padding:0!important;
    margin:0!important;
    border-top:1px solid #334155!important;
    border-bottom:1px solid #334155!important;
  }
  #profileModal .gcProfileTabs button{
    min-width:0!important;
    width:100%!important;
    min-height:44px!important;
    height:44px!important;
    padding:4px 2px!important;
    font-size:8px!important;
    line-height:1.05!important;
    white-space:normal!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    border-radius:0!important;
  }

  /* Only the selected profile pane owns vertical scrolling. */
  #profileModal .gcProfilePane{
    display:none!important;
    flex:1 1 0!important;
    min-height:0!important;
    height:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding:10px 12px max(20px,env(safe-area-inset-bottom))!important;
    overscroll-behavior-y:contain!important;
    -webkit-overflow-scrolling:touch!important;
    touch-action:pan-y!important;
    scrollbar-width:thin!important;
  }
  #profileModal .gcProfilePane:not(.hidden){
    display:block!important;
    height:auto!important;
  }
  #profileModal .profileInfoRow{
    min-height:38px!important;
    padding:8px 2px!important;
    gap:8px!important;
  }
  #profileModal .profileInfoRow span,
  #profileModal .profileInfoRow strong{
    font-size:10px!important;
  }
  #profileModal .profileBio{
    margin:0 0 10px!important;
    padding:11px!important;
    font-size:11px!important;
    line-height:1.45!important;
  }
  #profileModal .profileActions{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
    position:static!important;
    margin:0!important;
    padding:4px 0 12px!important;
    background:transparent!important;
  }
  #profileModal .profileActions button{
    min-height:44px!important;
  }

  /* Emoji panel: only explicit-open state gets flex layout. */
  #emojiPanel.emojiPanel:not(.hidden){
    display:flex!important;
  }
}

/* STEP3H.49.13D — mobile profile viewer polish only */
@media(max-width:900px){

  #profileModal:not(.hidden){
    padding:6px!important;
    align-items:center!important;
    justify-content:center!important;
  }

  #profileModal .profileModalCard{
    width:calc(100vw - 12px)!important;
    max-width:480px!important;
    height:calc(var(--gc-cody-vv-height,100dvh) - 12px)!important;
    max-height:calc(var(--gc-cody-vv-height,100dvh) - 12px)!important;
    border-radius:18px!important;
    border:1px solid #34445a!important;
    box-shadow:0 18px 50px rgba(0,0,0,.42)!important;
    background:#101925!important;
  }

  #profileModal .modalClose{
    top:9px!important;
    right:9px!important;
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
    border-radius:12px!important;
    font-size:22px!important;
    background:rgba(12,20,31,.92)!important;
    border:1px solid #405169!important;
  }

  #profileModal .gcProfileHero{
    flex:0 0 132px!important;
    min-height:132px!important;
    height:132px!important;
    max-height:132px!important;
    padding:10px 12px!important;
    border-radius:17px 17px 0 0!important;
    background-position:center!important;
    background-size:cover!important;
  }

  #profileModal .gcProfileHero::after{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    pointer-events:none!important;
    background:linear-gradient(180deg,rgba(5,10,17,.16),rgba(5,10,17,.72))!important;
  }

  #profileModal .gcProfileCounters{
    position:absolute!important;
    z-index:3!important;
    top:10px!important;
    left:10px!important;
    right:56px!important;
    display:flex!important;
    gap:6px!important;
  }

  #profileModal .gcProfileCounters span,
  #profileModal .gcProfileCounters button{
    min-width:42px!important;
    min-height:32px!important;
    height:32px!important;
    padding:5px 9px!important;
    border-radius:11px!important;
    font-size:10px!important;
    background:rgba(11,19,30,.86)!important;
    backdrop-filter:blur(8px)!important;
    -webkit-backdrop-filter:blur(8px)!important;
  }

  #profileModal .gcProfileAvatar{
    z-index:3!important;
    width:62px!important;
    height:62px!important;
    min-width:62px!important;
    min-height:62px!important;
    left:16px!important;
    top:52px!important;
    bottom:auto!important;
    transform:none!important;
    border-width:3px!important;
  }

  #profileModal .gcProfileIdentity{
    z-index:3!important;
    position:absolute!important;
    left:90px!important;
    right:12px!important;
    bottom:13px!important;
    min-width:0!important;
    text-align:left!important;
    padding:0!important;
  }

  #profileModal .gcProfileIdentity small{
    display:inline-flex!important;
    width:max-content!important;
    max-width:100%!important;
    padding:3px 7px!important;
    border-radius:999px!important;
    font-size:7px!important;
    letter-spacing:.08em!important;
  }

  #profileModal .gcProfileIdentity h2{
    margin:3px 0 1px!important;
    font-size:18px!important;
    line-height:1.05!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  #profileModal .gcProfileIdentity p{
    margin:0!important;
    max-width:100%!important;
    font-size:9px!important;
    line-height:1.2!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  #profileModal .profileFriendStatus{
    margin-top:3px!important;
    padding:2px 6px!important;
    font-size:8px!important;
  }

  /* Compact level card: no overlap with tabs/text. */
  #profileModal .gcProfileLevel{
    flex:0 0 66px!important;
    min-height:66px!important;
    height:66px!important;
    max-height:66px!important;
    margin:7px 9px!important;
    padding:8px 10px!important;
    display:grid!important;
    grid-template-columns:34px minmax(0,1fr)!important;
    gap:9px!important;
    align-items:center!important;
    border-radius:12px!important;
    overflow:hidden!important;
  }

  #profileModal .gcProfileLevelIcon{
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
    font-size:17px!important;
  }

  #profileModal .gcProfileLevelMain{
    min-width:0!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:1px 7px!important;
    align-items:center!important;
  }

  #profileModal .gcProfileLevelMain small{
    grid-column:1/-1!important;
    font-size:6px!important;
    line-height:1!important;
    letter-spacing:.1em!important;
  }

  #profileModal .gcProfileLevelMain strong{
    font-size:13px!important;
    line-height:1!important;
  }

  #profileModal .gcProfileLevelMain span{
    grid-column:1/-1!important;
    display:block!important;
    width:100%!important;
    font-size:7px!important;
    line-height:1.15!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  #profileModal .gcProfileLevelMain i{
    grid-column:1/2!important;
    height:5px!important;
    min-height:5px!important;
    margin:2px 0 0!important;
  }

  #profileModal .gcProfileLevelMain em{
    grid-column:2/3!important;
    grid-row:4!important;
    font-size:7px!important;
    line-height:1!important;
    white-space:nowrap!important;
  }

  /* Tabs: readable instead of squeezing five long labels into 360px. */
  #profileModal .gcProfileTabs{
    flex:0 0 46px!important;
    min-height:46px!important;
    height:46px!important;
    display:flex!important;
    grid-template-columns:none!important;
    gap:5px!important;
    padding:5px 7px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior-x:contain!important;
    scroll-snap-type:x proximity!important;
    scrollbar-width:none!important;
    background:#121c29!important;
    border-top:1px solid #2d3c50!important;
    border-bottom:1px solid #2d3c50!important;
  }

  #profileModal .gcProfileTabs::-webkit-scrollbar{
    display:none!important;
  }

  #profileModal .gcProfileTabs button{
    flex:0 0 auto!important;
    width:auto!important;
    min-width:84px!important;
    height:36px!important;
    min-height:36px!important;
    padding:6px 10px!important;
    border-radius:9px!important;
    font-size:9px!important;
    line-height:1!important;
    white-space:nowrap!important;
    scroll-snap-align:center!important;
    background:#172231!important;
    border:1px solid #304158!important;
  }

  #profileModal .gcProfileTabs button.active{
    background:#263751!important;
    border-color:var(--profile-accent,#dcb85f)!important;
    box-shadow:inset 0 -2px 0 var(--profile-accent,#dcb85f)!important;
  }

  /* The active content pane remains the only vertical scroller. */
  #profileModal .gcProfilePane{
    padding:8px 11px max(18px,env(safe-area-inset-bottom))!important;
    background:#101925!important;
  }

  #profileModal .profileInfoRow{
    min-height:36px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(86px,42%)!important;
    align-items:center!important;
    padding:7px 4px!important;
    gap:10px!important;
    border-bottom:1px solid #2b394c!important;
  }

  #profileModal .profileInfoRow span{
    min-width:0!important;
    font-size:10px!important;
  }

  #profileModal .profileInfoRow strong{
    min-width:0!important;
    font-size:10px!important;
    text-align:right!important;
    overflow-wrap:anywhere!important;
  }

  #profileModal .profileBio{
    border-radius:11px!important;
    background:#152130!important;
    border:1px solid #2e3e53!important;
  }

  #profileModal .profileActions{
    gap:7px!important;
  }

  #profileModal .profileActions button{
    width:100%!important;
    min-height:42px!important;
    border-radius:10px!important;
  }
}

@media(max-width:380px){
  #profileModal .gcProfileHero{
    flex-basis:124px!important;
    min-height:124px!important;
    height:124px!important;
  }
  #profileModal .gcProfileAvatar{
    width:58px!important;
    height:58px!important;
    min-width:58px!important;
    min-height:58px!important;
    top:50px!important;
  }
  #profileModal .gcProfileIdentity{
    left:84px!important;
  }
  #profileModal .gcProfileTabs button{
    min-width:80px!important;
    font-size:8px!important;
  }
}

/* STEP3H.49.13E — Speelcafé live + final mobile profile polish */
.quizQuickBtn.hidden{display:none!important}.quizQuickBtn:not(.hidden){display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:6px!important}
.gameScheduleNow>div{min-width:0}.gameScheduleNow b{overflow-wrap:anywhere}.gameScheduleAdminHint{font-size:11px;color:#9aa8ba}
@media(max-width:900px){
  #profileModal .profileModalCard{width:calc(100vw - 20px)!important;height:calc(var(--gc-cody-vv-height,100dvh) - 20px)!important;max-height:calc(var(--gc-cody-vv-height,100dvh) - 20px)!important}
  #profileModal .gcProfileHero{flex-basis:118px!important;min-height:118px!important;height:118px!important}
  #profileModal .gcProfileAvatar{width:56px!important;height:56px!important;min-width:56px!important;min-height:56px!important;top:48px!important}
  #profileModal .gcProfileIdentity{left:80px!important;bottom:11px!important}
  #profileModal .gcProfileLevel{margin:6px 9px!important;flex-basis:62px!important;min-height:62px!important;height:62px!important}
  #profileModal .gcProfileTabs{flex-basis:44px!important;height:44px!important;min-height:44px!important}
  #profileModal .gcProfilePane{padding-bottom:max(14px,env(safe-area-inset-bottom))!important}
  .quizQuickBtn:not(.hidden){max-width:170px!important;min-height:38px!important;padding:7px 12px!important;font-size:11px!important;white-space:nowrap!important}
}

/* STEP3H.49.13F — final mobile profile geometry + Spelletjesbot visual */
@media(max-width:900px){
  #profileModal .profileModalCard{
    width:calc(100vw - 20px)!important;
    height:auto!important;
    max-height:calc(var(--gc-cody-vv-height,100dvh) - 20px)!important;
    min-height:0!important;
    overflow:hidden!important;
  }
  #profileModal #profileContent,
  #profileModal .gcProfile{
    height:auto!important;
    max-height:calc(var(--gc-cody-vv-height,100dvh) - 20px)!important;
    min-height:0!important;
  }

  #profileModal .gcProfileHero{
    flex:0 0 116px!important;
    min-height:116px!important;
    height:116px!important;
    max-height:116px!important;
    padding:10px 12px!important;
  }

  /* Actual bug from the screenshot: the wrapper was 56px but the image
     remained ~104px, so it escaped the avatar and got clipped by Level. */
  #profileModal .gcProfileAvatar{
    width:58px!important;
    height:58px!important;
    min-width:58px!important;
    min-height:58px!important;
    left:14px!important;
    top:47px!important;
    right:auto!important;
    bottom:auto!important;
    transform:none!important;
    overflow:visible!important;
  }
  #profileModal .gcProfileAvatar img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    max-width:100%!important;
    max-height:100%!important;
    object-fit:cover!important;
    border-radius:50%!important;
    box-sizing:border-box!important;
  }
  #profileModal .gcProfileAvatar i{
    right:-1px!important;
    bottom:2px!important;
    width:14px!important;
    height:14px!important;
    border-width:2px!important;
  }

  #profileModal .gcProfileIdentity{
    left:82px!important;
    right:54px!important;
    bottom:11px!important;
    text-align:left!important;
  }
  #profileModal .gcProfileIdentity h2{
    font-size:18px!important;
    margin:3px 0 1px!important;
  }

  #profileModal .gcProfileLevel{
    flex:0 0 58px!important;
    min-height:58px!important;
    height:58px!important;
    max-height:58px!important;
    margin:6px 9px!important;
    padding:7px 10px!important;
    grid-template-columns:32px minmax(0,1fr)!important;
  }
  #profileModal .gcProfileLevelIcon{
    width:32px!important;
    height:32px!important;
    min-width:32px!important;
  }
  #profileModal .gcProfileLevelMain strong{font-size:12px!important}
  #profileModal .gcProfileLevelMain span{font-size:7px!important}

  /* Keep all five profile areas visible instead of four huge tabs. */
  #profileModal .gcProfileTabs{
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:4px!important;
    flex:0 0 44px!important;
    height:44px!important;
    min-height:44px!important;
    padding:4px 6px!important;
    overflow:hidden!important;
    scroll-snap-type:none!important;
  }
  #profileModal .gcProfileTabs button{
    width:100%!important;
    min-width:0!important;
    height:36px!important;
    min-height:36px!important;
    padding:4px 2px!important;
    border-radius:8px!important;
    font-size:clamp(7px,2.25vw,9px)!important;
    white-space:nowrap!important;
    text-overflow:ellipsis!important;
    overflow:hidden!important;
  }

  #profileModal .gcProfilePane{
    flex:0 1 auto!important;
    height:auto!important;
    max-height:calc(var(--gc-cody-vv-height,100dvh) - 250px)!important;
    min-height:0!important;
    overflow-y:auto!important;
    padding:8px 11px max(14px,env(safe-area-inset-bottom))!important;
  }
  #profileModal .gcProfilePane:not(.hidden){
    display:block!important;
    height:auto!important;
  }
  #profileModal .profileInfoRow{
    min-height:34px!important;
    padding:6px 4px!important;
  }
}

/* Spelletjesbot gets a recognizable game-host accent without changing bot logic. */
.userCard[data-username="Spelletjesbot"]{
  --gamebot-accent:#a66cff;
}
.userCard[data-username="Spelletjesbot"] .uAvatar{
  box-shadow:0 0 0 1px rgba(166,108,255,.65),0 0 14px rgba(166,108,255,.25);
}

/* STEP3H.49.13G — Android profile surface + Speelcafé composer answers */
@media(max-width:900px){
  #profileModal:not(.hidden){
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:8px!important;
    overflow:hidden!important;
  }
  #profileModal .profileModalCard{
    position:relative!important;
    display:flex!important;
    flex-direction:column!important;
    width:calc(100vw - 16px)!important;
    max-width:480px!important;
    height:min(620px,calc(var(--gc-cody-vv-height,100dvh) - 16px))!important;
    max-height:calc(var(--gc-cody-vv-height,100dvh) - 16px)!important;
    min-height:min(420px,calc(var(--gc-cody-vv-height,100dvh) - 16px))!important;
    margin:0!important;padding:0!important;overflow:hidden!important;
    visibility:visible!important;opacity:1!important;transform:none!important;
  }
  #profileModal #profileContent,
  #profileModal .gcProfile{
    display:flex!important;
    flex:1 1 auto!important;
    flex-direction:column!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:hidden!important;
  }
  #profileModal .gcProfileHero{flex:0 0 116px!important;min-height:116px!important;height:116px!important}
  #profileModal .gcProfileLevel{flex:0 0 58px!important;min-height:58px!important;height:58px!important}
  #profileModal .gcProfileTabs{flex:0 0 44px!important;min-height:44px!important;height:44px!important}
  #profileModal .gcProfilePane{
    display:none!important;
    flex:1 1 auto!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    touch-action:pan-y!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior-y:contain!important;
  }
  #profileModal .gcProfilePane:not(.hidden){display:block!important}
  #profileModal .modalClose{
    position:absolute!important;top:8px!important;right:8px!important;z-index:100!important;
    visibility:visible!important;pointer-events:auto!important;
  }
}
@media(max-width:380px){
  #profileModal .profileModalCard{
    height:calc(var(--gc-cody-vv-height,100dvh) - 12px)!important;
    min-height:0!important;
  }
}

/* STEP3H.49.13H — final mobile profile header + compact surface */
@media(max-width:900px){
  #profileModal:not(.hidden){
    padding:8px!important;
  }

  #profileModal .profileModalCard{
    width:calc(100vw - 16px)!important;
    max-width:470px!important;
    height:min(560px,calc(var(--gc-cody-vv-height,100dvh) - 16px))!important;
    max-height:calc(var(--gc-cody-vv-height,100dvh) - 16px)!important;
    min-height:min(500px,calc(var(--gc-cody-vv-height,100dvh) - 16px))!important;
    border-radius:17px!important;
  }

  #profileModal .gcProfileHero{
    position:relative!important;
    flex:0 0 122px!important;
    min-height:122px!important;
    height:122px!important;
    max-height:122px!important;
    display:block!important;
    align-items:initial!important;
    justify-content:initial!important;
    text-align:left!important;
    padding:0!important;
    overflow:hidden!important;
  }

  /* Counters form one neat top row. */
  #profileModal .gcProfileCounters{
    position:absolute!important;
    z-index:5!important;
    top:10px!important;
    left:12px!important;
    right:58px!important;
    display:flex!important;
    align-items:center!important;
    gap:6px!important;
    margin:0!important;
    transform:none!important;
  }
  #profileModal .gcProfileCounters span,
  #profileModal .gcProfileCounters button{
    min-width:42px!important;
    height:32px!important;
    min-height:32px!important;
    padding:5px 9px!important;
    border-radius:10px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    font-size:10px!important;
  }

  /* Real absolute placement — no more movement from the old centred flex layout. */
  #profileModal .gcProfileAvatar{
    position:absolute!important;
    z-index:6!important;
    left:14px!important;
    top:50px!important;
    right:auto!important;
    bottom:auto!important;
    width:60px!important;
    height:60px!important;
    min-width:60px!important;
    min-height:60px!important;
    margin:0!important;
    transform:none!important;
    overflow:visible!important;
  }
  #profileModal .gcProfileAvatar img{
    width:60px!important;
    height:60px!important;
    min-width:60px!important;
    min-height:60px!important;
    max-width:60px!important;
    max-height:60px!important;
    border-radius:50%!important;
    object-fit:cover!important;
    display:block!important;
  }

  #profileModal .gcProfileIdentity{
    position:absolute!important;
    z-index:6!important;
    left:86px!important;
    right:54px!important;
    top:53px!important;
    bottom:auto!important;
    margin:0!important;
    padding:0!important;
    transform:none!important;
    text-align:left!important;
    min-width:0!important;
  }
  #profileModal .gcProfileIdentity small{
    display:inline-flex!important;
    width:auto!important;
    max-width:100%!important;
    font-size:7px!important;
    padding:3px 8px!important;
  }
  #profileModal .gcProfileIdentity h2{
    margin:4px 0 1px!important;
    font-size:19px!important;
    line-height:1!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  #profileModal .gcProfileIdentity p{
    margin:0!important;
    font-size:9px!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  #profileModal .gcProfileLevel{
    flex:0 0 62px!important;
    min-height:62px!important;
    height:62px!important;
    max-height:62px!important;
    margin:6px 8px!important;
    padding:7px 10px!important;
    border-radius:11px!important;
    grid-template-columns:32px minmax(0,1fr)!important;
    gap:8px!important;
  }
  #profileModal .gcProfileLevelIcon{
    width:32px!important;
    height:32px!important;
    min-width:32px!important;
  }
  #profileModal .gcProfileLevelMain small{font-size:6px!important}
  #profileModal .gcProfileLevelMain strong{font-size:12px!important}
  #profileModal .gcProfileLevelMain span{font-size:7px!important}
  #profileModal .gcProfileLevelMain em{font-size:7px!important}

  #profileModal .gcProfileTabs{
    flex:0 0 42px!important;
    min-height:42px!important;
    height:42px!important;
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:4px!important;
    padding:4px 6px!important;
    overflow:hidden!important;
  }
  #profileModal .gcProfileTabs button{
    height:34px!important;
    min-height:34px!important;
    min-width:0!important;
    width:100%!important;
    padding:3px 2px!important;
    border-radius:8px!important;
    font-size:clamp(7px,2.15vw,9px)!important;
  }

  /* Content fills only what remains; rows are denser and no giant dead area. */
  #profileModal .gcProfilePane{
    flex:1 1 auto!important;
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    padding:7px 10px max(10px,env(safe-area-inset-bottom))!important;
    overflow-y:auto!important;
  }
  #profileModal .profileInfoRow{
    min-height:32px!important;
    padding:5px 3px!important;
    gap:8px!important;
  }
  #profileModal .profileInfoRow span,
  #profileModal .profileInfoRow strong{
    font-size:9px!important;
  }

  #profileModal .modalClose{
    top:9px!important;
    right:9px!important;
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
    border-radius:11px!important;
    font-size:21px!important;
  }
}

@media(max-width:380px){
  #profileModal .profileModalCard{
    height:calc(var(--gc-cody-vv-height,100dvh) - 12px)!important;
    min-height:0!important;
  }
  #profileModal .gcProfileAvatar{
    left:12px!important;
    width:56px!important;
    height:56px!important;
    min-width:56px!important;
    min-height:56px!important;
  }
  #profileModal .gcProfileAvatar img{
    width:56px!important;
    height:56px!important;
    min-width:56px!important;
    min-height:56px!important;
    max-width:56px!important;
    max-height:56px!important;
  }
  #profileModal .gcProfileIdentity{
    left:78px!important;
  }
}

/* STEP3H.49.13I — Speelcafé inline games + centered mobile profile identity */
.gcSpeelcafeInlineGame{
  flex:0 0 auto;
  margin:6px 10px 4px;
  padding:10px;
  border:1px solid #33455d;
  border-radius:14px;
  background:linear-gradient(180deg,#172333,#111a27);
  box-shadow:0 8px 24px rgba(0,0,0,.18);
}
.gcSpeelcafeInlineGame.hidden{display:none!important}
.gcInlineGameHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}
.gcInlineGameHead>div{display:grid;gap:2px;min-width:0}
.gcInlineGameHead small{
  color:#e7bd52;
  font-size:8px;
  font-weight:900;
  letter-spacing:.11em;
}
.gcInlineGameHead strong{font-size:14px;line-height:1.1}
.gcInlineOpenGame{
  width:32px;height:32px;min-width:32px;
  border:1px solid #344960;border-radius:9px;
  background:#0d1622;color:#d6dfec;
}
.gcInlineWordMask{
  display:flex;align-items:center;justify-content:center;
  min-height:50px;margin-bottom:7px;padding:8px 10px;
  border-radius:10px;background:#0b1420;border:1px solid #2d4058;
  font-size:22px;font-weight:900;letter-spacing:.08em;text-align:center;
}
.gcInlineGameMeta{
  display:flex;justify-content:space-between;gap:10px;
  margin-bottom:7px;color:#b9c4d3;font-size:9px;
}
.gcInlineWordForm{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;
}
.gcInlineWordForm input{
  min-width:0;height:38px;padding:0 11px;border-radius:9px;
  border:1px solid #354a65;background:#0b1420;color:#fff;
}
.gcInlineWordForm button{
  min-width:76px;border:0;border-radius:9px;padding:0 14px;
  font-weight:900;background:#e6bd56;color:#15100a;
}
.gcInlineQuizQuestion{
  margin-bottom:8px;padding:9px 10px;border-radius:10px;
  background:#0b1420;border:1px solid #2d4058;font-weight:800;
}
.gcInlineQuizAnswers{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;
}
.gcInlineQuizAnswers button{
  display:grid;grid-template-columns:26px minmax(0,1fr);
  align-items:center;gap:7px;min-height:40px;padding:6px 8px;
  border-radius:9px;border:1px solid #334861;background:#131e2c;color:#fff;text-align:left;
}
.gcInlineQuizAnswers button b{
  display:grid;place-items:center;width:24px;height:24px;border-radius:7px;
  background:#253954;color:#f0c65d;
}
.gcInlineQuizAnswers button span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.gcInlineGameFoot{margin-top:7px;color:#9eabbd;font-size:8px}

/* Profile identity group centered as one unit, keeping counters/close untouched. */
@media(max-width:900px){
  #profileModal .gcProfileAvatar{
    left:calc(50% - 112px)!important;
    top:50px!important;
  }
  #profileModal .gcProfileIdentity{
    left:calc(50% - 42px)!important;
    right:auto!important;
    top:53px!important;
    width:168px!important;
    max-width:calc(100% - 150px)!important;
    text-align:left!important;
  }

  .gcSpeelcafeInlineGame{
    margin:5px 6px 3px!important;
    padding:8px!important;
    border-radius:11px!important;
  }
  .gcInlineWordMask{min-height:44px!important;font-size:19px!important}
  .gcInlineQuizAnswers{grid-template-columns:1fr!important}
  .gcInlineQuizAnswers button{min-height:38px!important}
}
@media(max-width:380px){
  #profileModal .gcProfileAvatar{left:calc(50% - 105px)!important}
  #profileModal .gcProfileIdentity{
    left:calc(50% - 37px)!important;
    width:154px!important;
  }
}

/* STEP3H.49.13J — games live inside Spelletjesbot messages */
#gcSpeelcafeInlineGame{display:none!important}

.gcChatGameCard{
  width:min(720px,100%);
  margin-top:3px;
  padding:10px;
  border:1px solid #33465e;
  border-radius:11px;
  background:linear-gradient(180deg,#172333,#101a27);
  box-sizing:border-box;
}
.gcChatGameLoading{
  color:#aeb9c8;
  font-size:11px;
}
.gcChatGameHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}
.gcChatGameHead>div{
  display:grid;
  gap:2px;
  min-width:0;
}
.gcChatGameHead small{
  color:#e8bd52;
  font-size:8px;
  font-weight:900;
  letter-spacing:.1em;
}
.gcChatGameHead strong{
  font-size:14px;
  line-height:1.1;
}
.gcChatGameHead>span{
  flex:0 0 auto;
  padding:4px 7px;
  border-radius:999px;
  border:1px solid #344a64;
  background:#0c1521;
  color:#e8c35e;
  font-size:8px;
  font-weight:800;
}
.gcChatWordMask{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:8px 10px;
  border-radius:9px;
  border:1px solid #2c4058;
  background:#0a131e;
  font-size:22px;
  font-weight:900;
  letter-spacing:.08em;
  text-align:center;
}
.gcChatGameMeta{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-top:7px;
  color:#b7c3d2;
  font-size:9px;
}
.gcChatGameHint{
  margin-top:7px;
  color:#8f9db0;
  font-size:8px;
}
.gcChatQuizQuestion{
  padding:8px 9px;
  border-radius:9px;
  border:1px solid #2c4058;
  background:#0a131e;
  font-weight:800;
}
.gcChatQuizAnswers{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;
  margin-top:7px;
}
.gcChatQuizAnswers button{
  display:grid;
  grid-template-columns:24px minmax(0,1fr);
  align-items:center;
  gap:7px;
  min-height:38px;
  padding:6px 8px;
  border-radius:8px;
  border:1px solid #344960;
  background:#152131;
  color:#fff;
  text-align:left;
}
.gcChatQuizAnswers button b{
  display:grid;
  place-items:center;
  width:22px;height:22px;
  border-radius:6px;
  background:#263a54;
  color:#edc65e;
}
.gcChatQuizAnswers button span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Move avatar + identity group a little further right for optical centering. */
@media(max-width:900px){
  #profileModal .gcProfileAvatar{
    left:calc(50% - 94px)!important;
  }
  #profileModal .gcProfileIdentity{
    left:calc(50% - 24px)!important;
  }

  .gcChatGameCard{
    width:100%!important;
    padding:8px!important;
  }
  .gcChatWordMask{
    min-height:44px!important;
    font-size:19px!important;
  }
  .gcChatQuizAnswers{
    grid-template-columns:1fr!important;
  }
}
@media(max-width:380px){
  #profileModal .gcProfileAvatar{
    left:calc(50% - 90px)!important;
  }
  #profileModal .gcProfileIdentity{
    left:calc(50% - 20px)!important;
    width:150px!important;
  }
}


/* STEP3H.49.13K — clean message header + upward 3-dot menu */
#quizQuickBtn,.quizQuickBtn{
  display:none!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

/* The compact message action popup always opens ABOVE the three-dot trigger. */
.gcCodyActionMenu,
.msgActions[data-gc-cody-menu="1"] .gcCodyActionMenu{
  top:auto!important;
  bottom:calc(100% + 5px)!important;
  right:0!important;
  transform-origin:bottom right!important;
  z-index:220!important;
}
.msgActions[data-gc-cody-menu="1"].menuOpen,
.msgActions[data-gc-cody-menu="1"].menuOpensUp{
  z-index:219!important;
}

@media(hover:none),(pointer:coarse){
  .gcCodyActionMenu,
  .msgActions[data-gc-cody-menu="1"] .gcCodyActionMenu{
    top:auto!important;
    bottom:calc(100% + 5px)!important;
    right:0!important;
  }
}

@media(max-width:900px){
  /* Reserve a dedicated timestamp lane before the three-dot button. */
  .msg .meta{
    position:relative!important;
    padding-right:98px!important;
    overflow:visible!important;
  }
  .msg .meta .time{
    position:absolute!important;
    top:0!important;
    right:46px!important;
    margin:0!important;
    width:auto!important;
    max-width:none!important;
    min-width:max-content!important;
    height:18px!important;
    line-height:18px!important;
    font-size:8.5px!important;
    white-space:nowrap!important;
    text-align:right!important;
    z-index:4!important;
    pointer-events:none!important;
  }
  .msg .meta .edited{
    flex:0 0 auto!important;
  }
  .msgActions[data-gc-cody-menu="1"],
  .msg .msgActions{
    top:5px!important;
    right:2px!important;
    z-index:12!important;
  }
  .msgActions[data-gc-cody-menu="1"]>.gcCodyMoreBtn{
    position:relative!important;
    z-index:13!important;
  }
}

@media(max-width:380px){
  .msg .meta{
    padding-right:91px!important;
  }
  .msg .meta .time{
    right:43px!important;
    font-size:8px!important;
  }
}

/* STEP3H.49.13L — clean chat text, robust mobile timestamps, theme entry */

/* Normal messages are Cody-like clean text, not little boxes around every line. */
.msg .body{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  border-radius:0!important;
  padding:1px 0!important;
}
.msg.supportbotQuestion .body,
.msg.supportbotAnswer .body{
  border-left:3px solid var(--gold,#ddb85c)!important;
  padding-left:10px!important;
}

/* Structured content keeps its own cards. */
.msg .body .gcChatGameCard,
.msg .body .replyQuote,
.msg .body .botChallenge{
  box-sizing:border-box!important;
}

/* Themes back in Extra functions. */
.gcThemeAddonIcon{
  font-size:22px;
  line-height:1;
}
.themesQuickBtn .addonIcon{
  border-color:color-mix(in srgb,var(--gold,#ddb85c) 58%,#526077)!important;
}

.chatOptionThemeCard{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  padding:12px;
  border:1px solid #33445a;
  border-radius:12px;
  background:#121c29;
}
.chatOptionThemeCard>div:first-child{
  display:grid;
  gap:3px;
}
.chatOptionThemeCard b{
  font-size:12px;
}
.chatOptionThemeCard small{
  color:#9eabbd;
  font-size:9px;
  line-height:1.4;
}
.chatOptionThemeActions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
}
#coChatThemeLabel{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  max-width:180px;
  padding:6px 10px;
  border:1px solid #35465d;
  border-radius:9px;
  background:#0d1622;
  color:#e7edf6;
  font-size:10px;
  font-weight:800;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.gcHiddenThemeSelect{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  opacity:0!important;
  pointer-events:none!important;
  overflow:hidden!important;
}

/* Message timestamp and three-dot control each own their lane on touch screens. */
@media(max-width:900px){
  .msg{
    position:relative!important;
  }
  .msg .meta{
    position:static!important;
    padding-right:132px!important;
    min-width:0!important;
  }
  .msg .meta .time{
    position:absolute!important;
    top:9px!important;
    right:64px!important;
    height:20px!important;
    line-height:20px!important;
    margin:0!important;
    padding:0 2px!important;
    width:auto!important;
    min-width:max-content!important;
    max-width:none!important;
    font-size:8.5px!important;
    font-weight:600!important;
    color:#aeb9c8!important;
    letter-spacing:.01em!important;
    white-space:nowrap!important;
    text-align:right!important;
    z-index:8!important;
    pointer-events:none!important;
  }
  .msgActions[data-gc-cody-menu="1"],
  .msg .msgActions{
    top:5px!important;
    right:5px!important;
    z-index:14!important;
  }

  .chatOptionThemeCard{
    grid-template-columns:1fr!important;
    gap:9px!important;
    padding:10px!important;
  }
  .chatOptionThemeActions{
    width:100%!important;
    justify-content:space-between!important;
  }
  #coChatThemeLabel{
    flex:1 1 auto!important;
    max-width:none!important;
  }
  #coBrowseThemes{
    flex:0 0 auto!important;
    min-height:40px!important;
  }
}

@media(max-width:380px){
  .msg .meta{
    padding-right:122px!important;
  }
  .msg .meta .time{
    right:59px!important;
    font-size:8px!important;
  }
}

/* STEP3H.49.13M — Cody-inspired personal text styling */
.gcFontKalam{font-family:'Kalam',cursive!important}
.gcFontSignika{font-family:'Signika',sans-serif!important}
.gcFontGrandstander{font-family:'Grandstander',cursive!important}
.gcFontComic{font-family:'Comic Neue',cursive!important}
.gcFontQuicksand{font-family:'Quicksand',sans-serif!important}
.gcFontOrbitron{font-family:'Orbitron',sans-serif!important}
.gcFontLemonada{font-family:'Lemonada',cursive!important}
.gcFontGrenze{font-family:'Grenze Gotisch',cursive!important}
.gcFontMerienda{font-family:'Merienda',cursive!important}
.gcFontAmita{font-family:'Amita',cursive!important}
.gcFontAveria{font-family:'Averia Libre',cursive!important}
.gcFontTurret{font-family:'Turret Road',cursive!important}
.gcFontSansita{font-family:'Sansita',sans-serif!important}
.gcFontComfortaa{font-family:'Comfortaa',cursive!important}
.gcFontCharm{font-family:'Charm',cursive!important}
.gcFontLobster{font-family:'Lobster Two',cursive!important}
.gcText_bold{font-weight:700!important}
.gcText_heavy{font-weight:900!important}
.gcText_italic{font-style:italic!important}
.gcText_bolditalic{font-weight:700!important;font-style:italic!important}
.gcText_heavyitalic{font-weight:900!important;font-style:italic!important}
.gcText_small{font-size:.86em!important}
.gcText_large{font-size:1.16em!important}
.msg .body[class*="gcFont"],.msg .body[class*="gcText_"],.pmBody[class*="gcFont"],.pmBody[class*="gcText_"]{color:var(--gc-message-color,inherit)!important}
.msg .body.gcCustomBubble,.pmBody.gcCustomBubble{width:fit-content!important;max-width:min(100%,760px)!important;padding:5px 9px!important;border:1px solid color-mix(in srgb,var(--gold,#dcb85f) 24%,#314158)!important;border-radius:9px!important;background:rgba(24,35,51,.72)!important}
.gcTextStyleCard{display:grid;gap:10px;padding:12px;border:1px solid #33455b;border-radius:12px;background:#111b28}
.gcTextStyleHead{display:flex;align-items:center;justify-content:space-between;gap:10px}
.gcTextStyleHead>div{display:grid;gap:3px}.gcTextStyleHead small{font-size:9px;color:#9eabbd}
.gcTextStylePreview{min-height:46px;display:flex;align-items:center;padding:9px 11px;border:1px dashed #41536b;border-radius:10px;background:#0b1420}
.gcTextStyleGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.gcTextStyleGrid label{display:grid;gap:5px}.gcTextStyleGrid label>span{font-size:9px;color:#b7c2d1;font-weight:800}
.gcTextStyleGrid select,.gcTextStyleGrid input[type="color"]{width:100%;min-height:38px}
.gcStyleToggle{align-content:end}.gcStyleToggle input{width:22px;height:22px}

/* Compact Speelcafé cards */
.gcChatGameCard{width:min(560px,100%)!important;padding:8px!important;border-radius:10px!important}
.gcChatGameHead{margin-bottom:6px!important}
.gcChatGameHead small{font-size:7px!important}.gcChatGameHead strong{font-size:12px!important}
.gcChatGameHead>span{padding:3px 6px!important;font-size:7px!important}
.gcChatWordMask{min-height:40px!important;padding:6px 8px!important;font-size:18px!important;letter-spacing:.055em!important}
.gcChatGameMeta{margin-top:6px!important;font-size:8px!important}
.gcChatGameHint,.gcChatGameFoot{display:none!important}
.gcChatQuizQuestion{padding:7px 8px!important;font-size:11px!important}
.gcChatQuizAnswers{gap:5px!important;margin-top:6px!important}
.gcChatQuizAnswers button{min-height:34px!important;padding:4px 7px!important;font-size:10px!important}

/* Mobile */
@media(max-width:900px){
  #profileModal .gcProfileAvatar{left:calc(50% - 78px)!important}
  #profileModal .gcProfileIdentity{left:calc(50% - 7px)!important;width:158px!important}
  .gcTextStyleGrid{grid-template-columns:1fr 1fr!important}
  .gcTextStyleCard{padding:10px!important}
  .gcChatGameCard{width:calc(100vw - 145px)!important;max-width:390px!important;padding:7px!important}
  .gcChatWordMask{font-size:17px!important;line-height:1.35!important;min-height:38px!important}
  .gcChatQuizAnswers{grid-template-columns:1fr!important}
}
@media(max-width:420px){
  .gcTextStyleGrid{grid-template-columns:1fr!important}
  .gcTextStyleHead{align-items:flex-start!important}
  #profileModal .gcProfileAvatar{left:calc(50% - 72px)!important}
  #profileModal .gcProfileIdentity{left:calc(50% - 2px)!important;width:145px!important}
  .gcChatGameCard{width:calc(100vw - 138px)!important;min-width:0!important}
}
body.gc-readable-chat .msg .body,body.gc-readable-chat .pmBody{font-family:inherit!important;font-style:normal!important;font-weight:400!important;font-size:inherit!important;color:inherit!important;text-shadow:none!important}

/* STEP3H.49.13N */
.msg .body,.pmBody{font-size:var(--gc-default-chat-font-size,15px)!important}
.gcText_small{font-size:calc(var(--gc-default-chat-font-size,15px) - 2px)!important}
.gcText_large{font-size:calc(var(--gc-default-chat-font-size,15px) + 2px)!important}
.gcTextMode_neon{color:var(--gc-style-c1)!important;text-shadow:0 0 5px var(--gc-style-c1),0 0 12px var(--gc-style-c1)!important}
.gcTextMode_gradient{color:transparent!important;background:linear-gradient(90deg,var(--gc-style-c1),var(--gc-style-c2))!important;-webkit-background-clip:text!important;background-clip:text!important}
.gcNameMode_neon{color:var(--gc-style-c1)!important;text-shadow:0 0 5px var(--gc-style-c1),0 0 11px var(--gc-style-c1)!important}
.gcNameMode_gradient{color:transparent!important;background:linear-gradient(90deg,var(--gc-style-c1),var(--gc-style-c2))!important;-webkit-background-clip:text!important;background-clip:text!important}
.gcNameStyleCard,.profileStyleLauncher{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 12px;border:1px solid #33455a;border-radius:11px;background:#111b28}
.gcNameStyleCard>div,.profileStyleLauncher>span{display:grid;gap:3px}.gcNameStyleCard small,.profileStyleLauncher small{color:#9eabbd;font-size:9px}
.gcStyleHeadBtns{display:flex;gap:6px;flex-wrap:wrap}
.gcStyleStudioModalCard{width:min(680px,calc(100vw - 16px))!important}
.gcModalEyebrow{color:var(--gold,#dcb85f);font-size:8px;font-weight:950;letter-spacing:.12em}
.gcStyleTabs{display:flex;gap:5px;margin:12px 0 8px}.gcStyleTabs button{border:0;border-radius:7px;padding:8px 12px;background:#202a39;color:#fff;font-weight:800}.gcStyleTabs button.active{background:#364258}
.gcStylePalette{display:grid;grid-template-columns:repeat(8,1fr);gap:2px}.gcStylePalette button{aspect-ratio:1;border:0;min-height:38px}
.gcStyleControls{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.gcStyleControls label{display:grid;gap:5px}
.gcStudioPreview{margin-top:12px;min-height:58px;display:flex;align-items:center;justify-content:center;padding:10px;border:1px solid #40516a;border-radius:10px;background:#0c1420;font-size:20px}
.gcStyleStudioActions{display:flex;justify-content:flex-end;margin-top:12px}.gcStyleStudioActions button{min-height:40px;padding:0 16px;border:0;border-radius:9px;background:var(--gold,#dcb85f);font-weight:900}
.profileStylesModalCard{width:min(760px,calc(100vw - 16px))!important}
.profileStylePresetGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}
.profilePresetCard{min-height:150px;border:1px solid #3b4a60;border-radius:14px;background:#111a27;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;box-shadow:0 10px 25px #0003}
.profilePresetCard .profilePresetAvatar{display:grid;place-items:center;width:62px;height:62px;border:3px solid currentColor;border-radius:50%;font-size:28px;background:#182334}
.profilePresetCard small{color:#a9b5c4}
.preset-amber_glow{color:#e49b27;box-shadow:0 0 22px #e49b2755}.preset-ocean{color:#2cc9ee;box-shadow:0 0 22px #2cc9ee55}.preset-purple_neon{color:#bd52ff;box-shadow:0 0 22px #bd52ff55}.preset-rose{color:#f45b9e;box-shadow:0 0 22px #f45b9e55}.preset-emerald{color:#45dda8;box-shadow:0 0 22px #45dda855}
.gcProfileStyle-amber_glow{--profile-accent:#d98c18!important;box-shadow:inset 0 0 0 1px #d98c18aa,0 0 28px #d98c1833}.gcProfileStyle-ocean{--profile-accent:#28bfe3!important;background:linear-gradient(180deg,#0d2130,#0c1723)!important}.gcProfileStyle-purple_neon{--profile-accent:#b54cff!important;background:linear-gradient(180deg,#21122d,#121522)!important}.gcProfileStyle-rose{--profile-accent:#ef5195!important;background:linear-gradient(180deg,#2b1522,#151823)!important}.gcProfileStyle-emerald{--profile-accent:#3dd59a!important;background:linear-gradient(180deg,#0d2924,#111a22)!important}.gcProfileStyle-glass{background:#15202dcc!important;backdrop-filter:blur(16px)}
.adminFontPreview{margin:12px 0;padding:13px;border:1px solid #34475d;border-radius:10px;background:#0b1624}
@media(max-width:900px){.gcNameStyleCard,.profileStyleLauncher{align-items:stretch;flex-direction:column}.gcNameStyleCard button,.profileStyleLauncher button{width:100%;min-height:42px}.gcStylePalette{grid-template-columns:repeat(6,1fr)}.gcStyleControls{grid-template-columns:1fr}.profileStylePresetGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.profilePresetCard{min-height:125px}}
@media(max-width:420px){.gcStylePalette{grid-template-columns:repeat(5,1fr)}.profileStylePresetGrid{grid-template-columns:1fr}.profilePresetCard{min-height:105px;flex-direction:row;justify-content:flex-start;padding:12px}.profilePresetCard .profilePresetAvatar{width:48px;height:48px;font-size:22px}}

/* STEP3H.49.13O — minimal quiz card + inline style editors */

/* Quiz: only countdown, question and answers. */
.gcChatGameCard:has(.gcQuizMinimal){
  width:min(560px,100%)!important;
  padding:7px!important;
  background:#121d2b!important;
}
.gcQuizMinimal{position:relative;padding-top:26px}
.gcQuizCountdown{
  position:absolute;top:0;right:0;
  display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;height:22px;padding:0 7px;
  border:1px solid #41546c;border-radius:999px;
  background:#0b1420;color:#f0c45e;font-size:9px;font-weight:900;
}
.gcQuizMinimal .gcChatQuizQuestion{
  margin:0 0 7px!important;padding:8px 10px!important;
  min-height:0!important;border-radius:8px!important;
  font-size:13px!important;line-height:1.25!important;
}
.gcQuizMinimal .gcChatQuizAnswers{
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:6px!important;margin:0!important;
}
.gcQuizMinimal .gcChatQuizAnswers button{
  min-height:38px!important;padding:6px 8px!important;
  font-size:11px!important;border-radius:8px!important;
}
.gcQuizMinimal .gcChatQuizAnswers button b{
  width:24px!important;height:24px!important;min-width:24px!important;
}

/* In Chatopties itself: no nested modal anymore. */
.gcInlineStyleCard{
  display:grid;gap:10px;
  padding:12px;border:1px solid #34465d;border-radius:12px;
  background:#111b28;
}
.gcInlineStyleHead{display:flex;align-items:center;justify-content:space-between;gap:10px}
.gcInlineStyleHead>div{display:grid;gap:3px}
.gcInlineStyleHead small{font-size:9px;color:#9eabbd}
.gcInlineModeTabs{display:flex;gap:5px}
.gcInlineModeTabs button{
  min-height:34px;padding:0 12px;border:1px solid #35465d;border-radius:8px;
  background:#202a39;color:#fff;font-weight:850;
}
.gcInlineModeTabs button.active{
  border-color:color-mix(in srgb,var(--gold,#dcb85f) 72%,#516078);
  background:#334158;color:#fff;
}
.gcInlinePalette{
  display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:2px;
  padding:1px;border-radius:8px;overflow:hidden;
}
.gcInlinePalette button{
  position:relative;aspect-ratio:1.25;min-height:34px;
  border:2px solid transparent;cursor:pointer;
}
.gcInlinePalette button.active::after{
  content:"✓";position:absolute;inset:auto 4px 3px auto;
  display:grid;place-items:center;width:17px;height:17px;
  border-radius:50%;background:#0a1420;color:#fff;font-size:10px;font-weight:900;
}
.gcInlineStyleFields{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;
}
.gcInlineStyleFields label{display:grid;gap:5px;min-width:0}
.gcInlineStyleFields label>span{font-size:9px;color:#b7c2d1;font-weight:800}
.gcInlineStyleFields select{width:100%;min-width:0;min-height:38px}
.gcNameStyleFields{grid-template-columns:minmax(180px,320px)}
.gcStyleHiddenColor{
  position:absolute!important;width:1px!important;height:1px!important;
  opacity:0!important;pointer-events:none!important;
}
.gcNameStylePreview{
  min-height:48px;display:flex;align-items:center;justify-content:center;
  padding:8px 11px;border:1px dashed #41536b;border-radius:10px;
  background:#0b1420;font-size:20px;font-weight:900;
}

/* Old modal studio cannot interfere even if cached HTML/JS exists. */
#gcStyleStudioModal{display:none!important}

@media(max-width:900px){
  .gcChatGameCard:has(.gcQuizMinimal){
    width:calc(100vw - 138px)!important;
    max-width:420px!important;min-width:0!important;
  }
  .gcQuizMinimal{padding-top:25px!important}
  .gcQuizMinimal .gcChatQuizQuestion{font-size:12px!important;padding:7px 8px!important}
  .gcQuizMinimal .gcChatQuizAnswers{grid-template-columns:1fr 1fr!important;gap:5px!important}
  .gcQuizMinimal .gcChatQuizAnswers button{min-height:36px!important;font-size:10px!important;padding:5px 7px!important}

  .gcInlineStyleCard{padding:10px!important;gap:9px!important}
  .gcInlineStyleHead{align-items:flex-start!important}
  .gcInlinePalette{grid-template-columns:repeat(6,minmax(0,1fr))!important}
  .gcInlineStyleFields{grid-template-columns:1fr 1fr!important}
  .gcNameStyleFields{grid-template-columns:1fr!important}
}
@media(max-width:480px){
  .gcChatGameCard:has(.gcQuizMinimal){
    width:calc(100vw - 130px)!important;
    padding:6px!important;
  }
  .gcQuizCountdown{height:20px!important;min-width:34px!important;font-size:8px!important}
  .gcQuizMinimal .gcChatQuizQuestion{
    font-size:11px!important;line-height:1.25!important;
  }
  .gcQuizMinimal .gcChatQuizAnswers{
    grid-template-columns:1fr!important;
  }
  .gcQuizMinimal .gcChatQuizAnswers button{
    min-height:34px!important;
  }

  .gcInlineStyleHead{display:grid!important;grid-template-columns:1fr!important}
  .gcInlineStyleHead>button{width:100%!important;min-height:40px!important}
  .gcInlineModeTabs{display:grid!important;grid-template-columns:repeat(3,1fr)!important}
  .gcInlineModeTabs button{padding:0 5px!important;min-width:0!important}
  .gcInlinePalette{grid-template-columns:repeat(5,minmax(0,1fr))!important}
  .gcInlineStyleFields{grid-template-columns:1fr!important}
  .gcTextStylePreview,.gcNameStylePreview{min-height:44px!important;font-size:15px!important}
}

/* STEP3H.49.13P — exact PX styling + compact game cards */

/* Every styled normal message uses the exact server-saved px value. */
.msg .body:not(.gcGameMessageBody),
.pmBody{
  font-size:var(--gc-user-font-size,var(--gc-default-chat-font-size,15px))!important;
}
.gcTextStylePreview{
  font-size:var(--gc-user-font-size,var(--gc-default-chat-font-size,15px))!important;
}
/* The user-selected font/color/neon/gradient must match preview exactly. */
.msg .body.gcTextMode_neon,
.pmBody.gcTextMode_neon,
.gcTextStylePreview.gcTextMode_neon{
  color:var(--gc-style-c1)!important;
  -webkit-text-fill-color:var(--gc-style-c1)!important;
  background:none!important;
  text-shadow:0 0 5px var(--gc-style-c1),0 0 12px var(--gc-style-c1)!important;
}
.msg .body.gcTextMode_gradient,
.pmBody.gcTextMode_gradient,
.gcTextStylePreview.gcTextMode_gradient{
  color:transparent!important;
  -webkit-text-fill-color:transparent!important;
  background:linear-gradient(90deg,var(--gc-style-c1),var(--gc-style-c2))!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  text-shadow:none!important;
}
.gcPxInput{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;
  min-height:38px;border:1px solid #35465d;border-radius:7px;background:#0c1521;overflow:hidden;
}
.gcPxInput input{
  min-width:0;width:100%;height:36px;border:0!important;background:transparent!important;
  color:#fff;padding:0 9px!important;font:inherit;
}
.gcPxInput span{padding:0 9px;color:#aeb9c8;font-size:10px;font-weight:800}

/* Game cards are structured UI, never inherit personal chat font styling. */
.gcGameMessageBody{
  width:min(620px,100%)!important;
  max-width:min(620px,100%)!important;
  font-size:inherit!important;
  font-family:inherit!important;
  font-style:normal!important;
  font-weight:400!important;
  color:inherit!important;
  -webkit-text-fill-color:initial!important;
  background:none!important;
  text-shadow:none!important;
}
.gcGameMessageBody .gcChatGameCard{
  width:100%!important;max-width:100%!important;
}

/* Raad het Woord: compact horizontal card instead of a tall narrow card. */
.gcChatGameCard[data-chat-game="word"]{
  padding:7px 9px!important;
}
.gcChatGameCard[data-chat-game="word"] .gcChatGameHead{
  margin:0 0 5px!important;
}
.gcChatGameCard[data-chat-game="word"] .gcChatGameHead small{
  display:none!important;
}
.gcChatGameCard[data-chat-game="word"] .gcChatGameHead strong{
  font-size:12px!important;
}
.gcChatGameCard[data-chat-game="word"] .gcChatWordMask{
  min-height:36px!important;
  padding:5px 8px!important;
  font-size:17px!important;
  line-height:1.15!important;
  letter-spacing:.06em!important;
}
.gcChatGameCard[data-chat-game="word"] .gcChatGameMeta{
  margin-top:5px!important;
  font-size:8px!important;
  line-height:1.2!important;
}

@media(max-width:900px){
  .gcGameMessageBody{
    width:calc(100vw - 126px)!important;
    max-width:480px!important;
  }
  .gcChatGameCard[data-chat-game="word"] .gcChatWordMask{
    min-height:34px!important;font-size:16px!important;
  }
}
@media(max-width:480px){
  .gcGameMessageBody{
    width:calc(100vw - 118px)!important;
    max-width:none!important;
  }
  .gcChatGameCard[data-chat-game="word"]{
    padding:6px 7px!important;
  }
  .gcChatGameCard[data-chat-game="word"] .gcChatGameHead strong{font-size:11px!important}
  .gcChatGameCard[data-chat-game="word"] .gcChatWordMask{font-size:15px!important}
}

/* STEP3H.49.13Q — universal modal stack */
.modal{z-index:var(--gc-modal-z,2147480800)!important}
.modal.gcModalTop{pointer-events:auto!important}
.modal:not(.gcModalTop):not(.hidden){pointer-events:none!important}
.modal:not(.gcModalTop):not(.hidden)>.modalCard{pointer-events:none!important}
#profileStylesModal{align-items:center!important;justify-content:center!important}
#profileStylesModal .profileStylesModalCard{position:relative!important;width:min(760px,calc(100vw - 24px))!important;max-width:760px!important;max-height:min(88dvh,820px)!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important;border-radius:18px!important;box-shadow:0 32px 100px rgba(0,0,0,.72)!important}
#profileStylesModal .modalClose{position:sticky!important;top:0!important;margin-left:auto!important;float:none!important;z-index:4!important}
.legalCenterCard{display:flex!important;flex-direction:column!important;min-height:0!important;overflow:hidden!important}
.legalCenterFrame{flex:1 1 auto!important;min-height:0!important;width:100%!important}
@media(max-width:900px){
 #legalCenterModal{align-items:stretch!important;justify-content:stretch!important;padding:max(6px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left))!important}
 #legalCenterModal .legalCenterCard{width:100%!important;max-width:none!important;height:calc(var(--gc-cody-vv-height,var(--gc-vh,100dvh)) - max(12px,env(safe-area-inset-top)) - max(12px,env(safe-area-inset-bottom)))!important;max-height:none!important;padding:12px!important;border-radius:16px!important;overflow:hidden!important}
 #legalCenterModal .modalTitle{flex:0 0 auto!important;padding-right:48px!important;margin-bottom:8px!important}
 #legalCenterModal .modalTitle small{font-size:8px!important}
 #legalCenterModal .modalTitle h3{margin:3px 0!important;font-size:18px!important}
 #legalCenterModal .modalTitle p{margin:0!important;font-size:10px!important;line-height:1.35!important}
 #legalCenterModal .legalTabs{flex:0 0 auto!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:5px!important;margin:0 0 8px!important}
 #legalCenterModal .legalTabs button{min-width:0!important;min-height:38px!important;padding:5px 7px!important;font-size:10px!important;white-space:nowrap!important}
 #legalCenterModal .legalCenterFrame{flex:1 1 0!important;min-height:0!important;height:0!important;border-radius:10px!important;background:#fff!important}
 #legalCenterModal .modalClose{position:absolute!important;top:max(12px,env(safe-area-inset-top))!important;right:12px!important;margin:0!important;float:none!important}
 #profileStylesModal{padding:max(8px,env(safe-area-inset-top)) 8px max(8px,env(safe-area-inset-bottom))!important}
 #profileStylesModal .profileStylesModalCard{width:100%!important;max-width:100%!important;max-height:calc(var(--gc-cody-vv-height,var(--gc-vh,100dvh)) - 16px)!important;padding:14px!important;border-radius:16px!important}
 #profileStylesModal .profileStylePresetGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .modal:not(#editProfileModal):not(#profileModal)>.modalCard{overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important}
}
@media(max-width:440px){#legalCenterModal .legalTabs button{min-height:36px!important;font-size:9px!important}#profileStylesModal .profileStylePresetGrid{grid-template-columns:1fr!important}#profileStylesModal .profilePresetCard{min-height:84px!important}}

/* STEP3H.49.13R — viewport-safe menus, inline Profile Styles, readable legal center, Roomstaff */
.gcCodyActionMenu.gcMenuPortal{
  position:fixed!important;right:auto!important;bottom:auto!important;
  z-index:2147483646!important;display:none!important;
  width:min(310px,calc(100vw - 16px))!important;
  max-width:calc(100vw - 16px)!important;
  padding:7px!important;border-radius:14px!important;
  background:#182332!important;border:1px solid #43536a!important;
  box-shadow:0 20px 60px rgba(0,0,0,.62)!important;
  transform:none!important;transform-origin:center!important;
  overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important;
}
.gcCodyActionMenu.gcMenuPortal.open{display:grid!important;gap:3px!important}
.gcCodyActionMenu.gcMenuPortal>button,.gcCodyActionMenu.gcMenuPortal>.gcTranslateMenuRow{min-height:42px!important}
.gcCodyActionMenu.gcMenuPortal>button{font-size:14px!important;padding:8px 11px!important}
.msgActions.menuOpen{z-index:40!important}

/* Quiz is useful, not oversized. */
.gcChatGameCard:has(.gcQuizMinimal){width:min(500px,100%)!important;padding:6px!important}
.gcQuizMinimal{padding-top:24px!important}
.gcQuizMinimal .gcChatQuizQuestion{padding:7px 8px!important;margin-bottom:6px!important;font-size:12px!important}
.gcQuizMinimal .gcChatQuizAnswers{gap:5px!important}
.gcQuizMinimal .gcChatQuizAnswers button{min-height:34px!important;padding:4px 7px!important;font-size:10px!important}

/* Profile styles are part of Profile Studio, never a child modal. */
.profileStyleInlinePanel{margin-top:10px;padding:10px;border:1px solid #394b62;border-radius:12px;background:#0e1825}
.profileStyleInlinePanel.hidden{display:none!important}
.profileStyleInlineHead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}
.profileStyleInlinePanel .profileStylePresetGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0}
.profileStyleInlinePanel .profilePresetCard{min-height:112px!important}
.profileStyleInlinePanel .profilePresetCard.active{outline:2px solid var(--profile-accent,var(--gold,#dcb85f));box-shadow:0 0 18px color-mix(in srgb,var(--profile-accent,var(--gold,#dcb85f)) 45%,transparent)}

/* Rules/legal must always be readable. */
#legalCenterModal .legalCenterFrame{background:#fff!important;color-scheme:light!important;opacity:1!important;visibility:visible!important}
#legalCenterModal.gcModalTop{z-index:2147483400!important}

/* Roomstaff admin */
.roomStaffAdminBox{margin:12px 0!important}
.roomStaffAssign{display:grid;grid-template-columns:1.15fr 1.35fr .9fr repeat(3,auto) auto;gap:8px;align-items:center}
.roomStaffAssign select{min-width:0}
.roomStaffAssign label{font-size:10px;white-space:nowrap}
.roomStaffList{display:grid;gap:7px;margin-top:10px}
.roomStaffRow{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:9px 10px;border:1px solid #34465b;border-radius:10px;background:#111b28}
.roomStaffRow>span:first-child{display:grid;gap:2px}.roomStaffRow small{color:#99a8ba}.roomStaffPerms{min-width:80px;text-align:center}
.roomStaffMetaIcon{filter:drop-shadow(0 0 4px rgba(84,169,255,.4))}

@media(max-width:900px){
  .gcCodyActionMenu.gcMenuPortal{width:min(300px,calc(100vw - 18px))!important;max-height:calc(var(--gc-cody-vv-height,var(--gc-vh,100dvh)) - 18px)!important}
  .profileStyleInlinePanel .profileStylePresetGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .profileStyleInlinePanel{padding:9px!important}
  .roomStaffAssign{grid-template-columns:1fr 1fr!important}.roomStaffAssign label{white-space:normal}.roomStaffAssign .btn{grid-column:1/-1}
  #legalCenterModal .legalCenterFrame{display:block!important;min-height:0!important;border:0!important}
}
@media(max-width:480px){
  .gcCodyActionMenu.gcMenuPortal{width:calc(100vw - 16px)!important;left:8px!important;max-width:none!important}
  .profileStyleInlinePanel .profileStylePresetGrid{grid-template-columns:1fr!important}
  .profileStyleInlinePanel .profilePresetCard{min-height:78px!important;flex-direction:row!important;justify-content:flex-start!important;padding:10px!important}
  .profileStyleInlineHead{align-items:stretch;flex-direction:column}.profileStyleInlineHead button{width:100%}
  .roomStaffAssign{grid-template-columns:1fr!important}.roomStaffAssign .btn{grid-column:auto}.roomStaffRow{grid-template-columns:1fr auto}.roomStaffPerms{grid-column:1/2;text-align:left}.roomStaffRow .btn{grid-column:2/3;grid-row:1/3}
}

/* STEP3H.49.13S — Cody parity without replacing existing systems */

/* Personal text style lives on an inner text surface. This prevents gradient/neon
   from making rich content/emoticons disappear or painting the entire message row. */
.gcStyledMessageText{
  display:inline-block!important;
  width:fit-content!important;
  max-width:100%!important;
  min-width:0!important;
  font-size:var(--gc-user-font-size,var(--gc-default-chat-font-size,15px))!important;
  line-height:1.38!important;
  overflow-wrap:anywhere!important;
  word-break:break-word!important;
  vertical-align:top!important;
}
.gcStyledMessageText.gcTextMode_neon{
  color:var(--gc-style-c1)!important;
  -webkit-text-fill-color:var(--gc-style-c1)!important;
  background:none!important;
  text-shadow:0 0 5px var(--gc-style-c1),0 0 12px var(--gc-style-c1)!important;
}
.gcStyledMessageText.gcTextMode_gradient{
  color:transparent!important;
  -webkit-text-fill-color:transparent!important;
  background:linear-gradient(90deg,var(--gc-style-c1),var(--gc-style-c2))!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  text-shadow:none!important;
}
.gcStyledMessageText.gcTextMode_gradient img,
.gcStyledMessageText.gcTextMode_neon img,
.gcStyledMessageText img{
  -webkit-text-fill-color:initial!important;
  background:none!important;
}
.gcStyledMessageText.gcCustomBubble{
  padding:5px 9px!important;
  border:1px solid color-mix(in srgb,var(--gold,#dcb85f) 24%,#314158)!important;
  border-radius:9px!important;
  background:rgba(24,35,51,.72)!important;
}

/* Speelcafé: one compact card system on desktop and mobile. */
.gcGameMessageBody{
  width:min(610px,100%)!important;
  max-width:min(610px,100%)!important;
}
.gcGameMessageBody .gcChatGameCard{
  width:100%!important;
  max-width:none!important;
  padding:7px 8px!important;
  border-radius:10px!important;
}
.gcCompactGameHead{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  min-height:26px;margin:0 0 6px;
}
.gcCompactGameHead strong{font-size:12px;line-height:1.15}
.gcCompactGameHead span{
  flex:0 0 auto;padding:3px 7px;border:1px solid #3b4e66;border-radius:999px;
  background:#0a1420;color:#e8bd52;font-size:8px;font-weight:900;
}
.gcCompactGameHint{
  margin-top:5px;color:#aeb9c8;font-size:8px;line-height:1.3;
  white-space:normal;overflow-wrap:anywhere;
}
.gcGameMessageBody .gcChatWordMask{
  min-height:34px!important;padding:5px 8px!important;
  font-size:17px!important;line-height:1.15!important;letter-spacing:.055em!important;
}
.gcGameMessageBody .gcQuizMinimal{padding-top:0!important}
.gcGameMessageBody .gcQuizCountdown{display:none!important}
.gcGameMessageBody .gcChatQuizQuestion{
  margin:0 0 6px!important;padding:7px 9px!important;
  font-size:12px!important;line-height:1.25!important;
}
.gcGameMessageBody .gcChatQuizAnswers{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:5px!important;
}
.gcGameMessageBody .gcChatQuizAnswers button{
  min-height:34px!important;padding:5px 7px!important;font-size:10px!important;
}

/* Profile style chooser: real mini cards, not emoji placeholders. */
.profileStyleInlinePanel{
  grid-column:1/-1!important;
  padding:12px!important;
  border:1px solid #34485f!important;
  border-radius:14px!important;
  background:#0d1724!important;
}
.profileStyleInlineHead{
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  gap:10px!important;margin-bottom:10px!important;
}
.profileStyleInlinePanel .profileStylePresetGrid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:9px!important;
}
.profilePresetCard{
  position:relative!important;
  min-height:154px!important;
  padding:8px!important;
  border:1px solid #33465d!important;
  border-radius:12px!important;
  background:#101a27!important;
  color:#eef3fb!important;
  display:grid!important;
  grid-template-rows:auto 1fr auto auto!important;
  gap:6px!important;
  text-align:left!important;
  overflow:hidden!important;
}
.profilePresetCard.active{
  border-color:var(--preset-accent,var(--gold,#dcb85f))!important;
  box-shadow:0 0 0 1px var(--preset-accent,var(--gold,#dcb85f)),0 0 22px color-mix(in srgb,var(--preset-accent,var(--gold,#dcb85f)) 35%,transparent)!important;
}
.profilePresetMiniHero{
  min-height:62px!important;padding:8px!important;
  display:flex!important;align-items:center!important;gap:8px!important;
  border-radius:9px!important;
  background:linear-gradient(135deg,color-mix(in srgb,var(--preset-accent) 25%,#182334),#0a121d)!important;
  border-bottom:2px solid var(--preset-accent)!important;
}
.profilePresetMiniAvatar{
  width:42px!important;height:42px!important;flex:0 0 42px!important;
  border-radius:50%!important;padding:2px!important;
  background:#101a27!important;border:2px solid var(--preset-accent)!important;
}
.profilePresetMiniAvatar img{width:100%!important;height:100%!important;border-radius:50%!important;object-fit:cover!important}
.profilePresetMiniIdentity{display:grid!important;gap:2px!important;min-width:0!important}
.profilePresetMiniIdentity b{font-size:10px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
.profilePresetMiniIdentity i{
  width:max-content!important;padding:2px 5px!important;border-radius:999px!important;
  background:var(--preset-accent)!important;color:#09111c!important;
  font-size:6px!important;font-style:normal!important;font-weight:950!important;
}
.profilePresetMiniBody{display:grid!important;gap:5px!important;padding:3px 2px!important}
.profilePresetMiniBody i{height:5px!important;border-radius:999px!important;background:#34445a!important}
.profilePresetMiniBody i:last-child{width:68%!important}
.profilePresetCard>strong{font-size:11px!important;color:var(--preset-accent)!important}
.profilePresetCard>small{font-size:8px!important;color:#aab6c6!important}

/* Profile socials tab + richer public profile. */
.profileEditorTabs{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.profileSocialStudio{
  display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;
}
.profileSocialStudio label{
  display:grid!important;gap:5px!important;padding:10px!important;
  border:1px solid #34465d!important;border-radius:11px!important;background:#101a27!important;
}
.profileSocialStudio label>span{font-size:11px!important;font-weight:850!important}
.profileSocialStudio label>small{font-size:8px!important;color:#8f9db0!important}
.profileSocialHint{
  margin-top:10px!important;padding:9px 10px!important;
  border:1px dashed #3a4d65!important;border-radius:10px!important;
  color:#aab7c8!important;font-size:9px!important;
}
.profileLiveExtra{
  display:grid!important;grid-template-columns:1fr 1fr!important;gap:5px!important;margin-top:7px!important;
}
.profileLiveExtra span{
  min-width:0!important;padding:5px 7px!important;border-radius:7px!important;
  background:#111b28!important;border:1px solid #2e4056!important;
  font-size:8px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;
}
.profileLiveSocials{display:flex!important;gap:5px!important;margin-top:6px!important}
.profileLiveSocials span{
  display:grid!important;place-items:center!important;width:25px!important;height:25px!important;
  border-radius:7px!important;background:#111b28!important;border:1px solid #34465d!important;
}
.profileExtraSection{
  margin-top:14px!important;padding-top:12px!important;border-top:1px solid #2d3c50!important;
}
.profileExtraSection h3{margin:0 0 8px!important;font-size:12px!important}
.profileExtraGrid{
  display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important;
}
.profileExtraItem{
  display:grid!important;grid-template-columns:28px minmax(0,1fr)!important;align-items:center!important;
  gap:7px!important;padding:8px!important;border:1px solid #304158!important;border-radius:9px!important;background:#101a27!important;
}
.profileExtraItem>span{font-size:16px!important}
.profileExtraItem>div{display:grid!important;gap:1px!important;min-width:0!important}
.profileExtraItem small{font-size:7px!important;color:#8f9caf!important;text-transform:uppercase!important;letter-spacing:.06em!important}
.profileExtraItem b{font-size:10px!important;overflow:hidden!important;text-overflow:ellipsis!important}
.profileSocialLinks{display:flex!important;flex-wrap:wrap!important;gap:7px!important}
.profileSocialLinks a{
  display:inline-flex!important;align-items:center!important;gap:6px!important;
  padding:7px 10px!important;border:1px solid #34465d!important;border-radius:9px!important;
  background:#101a27!important;color:#eef3fb!important;text-decoration:none!important;font-size:9px!important;
}

/* Admin live preview */
.adminChatDisplayBox{display:grid!important;gap:14px!important}
.adminChatDisplayHead{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:15px!important}
.adminChatDisplayHead h3{margin:0 0 4px!important}
.adminChatDisplayHead strong{
  flex:0 0 auto!important;padding:7px 10px!important;border-radius:9px!important;
  background:#152238!important;border:1px solid #365172!important;font-size:13px!important;
}
.adminFontSlider{display:grid!important;grid-template-columns:auto minmax(160px,420px) auto!important;align-items:center!important;gap:10px!important}
.adminFontSlider span{font-size:9px!important;color:#8fa0b5!important}
.adminFontSlider input{width:100%!important}
.adminMessagePreview{
  display:grid!important;grid-template-columns:38px minmax(0,1fr)!important;gap:9px!important;
  align-items:flex-start!important;padding:11px!important;border:1px solid #34465d!important;
  border-radius:10px!important;background:#101823!important;
}
.adminMessageAvatar{
  width:36px!important;height:36px!important;border-radius:50%!important;display:grid!important;place-items:center!important;
  background:#eaf1f9!important;color:#172130!important;border:2px solid #647995!important;font-size:9px!important;font-weight:950!important;
}
.adminMessageMeta{display:flex!important;align-items:center!important;gap:6px!important}
.adminMessageMeta b{font-size:11px!important}.adminMessageMeta span{font-size:7px!important;padding:2px 5px!important;border-radius:999px!important;background:#e0b84d!important;color:#17130a!important;font-weight:950!important}.adminMessageMeta small{margin-left:auto!important;color:#7f8b9d!important;font-size:8px!important}
.adminMessagePreview p{margin:4px 0 0!important;line-height:1.35!important;color:#f2f5fa!important}
.adminPreviewFoot{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important}
.adminPreviewFoot span{font-size:9px!important;color:#8fa0b5!important}

/* responsive */
@media(max-width:900px){
  .gcGameMessageBody{width:calc(100vw - 112px)!important;max-width:520px!important}
  .gcGameMessageBody .gcChatQuizAnswers{grid-template-columns:1fr 1fr!important}
  .profileStyleInlinePanel .profileStylePresetGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .profileEditorTabs{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:5px!important}
  .profileSocialStudio{grid-template-columns:1fr!important}
  .profileExtraGrid{grid-template-columns:1fr!important}
}
@media(max-width:520px){
  .gcGameMessageBody{width:calc(100vw - 104px)!important;max-width:none!important}
  .gcGameMessageBody .gcChatQuizAnswers{grid-template-columns:1fr!important}
  .gcCompactGameHead strong{font-size:11px!important}
  .gcGameMessageBody .gcChatWordMask{font-size:15px!important;letter-spacing:.045em!important}
  .profileStyleInlinePanel{padding:9px!important}
  .profileStyleInlinePanel .profileStylePresetGrid{grid-template-columns:1fr 1fr!important;gap:7px!important}
  .profilePresetCard{min-height:138px!important}
  .adminChatDisplayHead{display:grid!important;grid-template-columns:1fr!important}
  .adminFontSlider{grid-template-columns:auto 1fr auto!important}
  .adminPreviewFoot{align-items:stretch!important;flex-direction:column!important}
  .adminPreviewFoot .btn{width:100%!important}
}
@media(max-width:360px){
  .profileStyleInlinePanel .profileStylePresetGrid{grid-template-columns:1fr!important}
  .profilePresetCard{min-height:118px!important}
}

/* STEP3H.49.13T — Profile UX / responsive polish */

/* Profile hero: actions must be real touch targets. */
.gcProfileCounters{
  display:flex!important;align-items:center!important;gap:7px!important;flex-wrap:wrap!important;
}
.gcProfileCounters>span,
.gcProfileCounters>button{
  min-height:36px!important;min-width:54px!important;
  padding:0 10px!important;border:1px solid #3a4a5f!important;border-radius:999px!important;
  background:#101925!important;color:#e9eef5!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:4px!important;
  font:inherit!important;font-weight:850!important;
}
.gcProfileCounters>button{cursor:pointer!important}
.gcProfileCounters>button:hover,.gcProfileCounters>button.active{
  border-color:var(--profile-accent,#dcb85f)!important;
  background:color-mix(in srgb,var(--profile-accent,#dcb85f) 14%,#101925)!important;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--profile-accent,#dcb85f) 12%,transparent)!important;
}

/* Cleaner profile navigation; scroll instead of crushing tabs. */
.gcProfileTabs{
  display:flex!important;overflow-x:auto!important;overflow-y:hidden!important;
  scrollbar-width:none!important;overscroll-behavior-x:contain!important;
  -webkit-overflow-scrolling:touch!important;
}
.gcProfileTabs::-webkit-scrollbar{display:none!important}
.gcProfileTabs button{
  flex:1 0 auto!important;min-width:112px!important;min-height:46px!important;
  white-space:nowrap!important;
}

/* R15.14 — Spotify en handmatig afspeelbare profielmuziek */
.gcPublicProfileMusic{display:grid;gap:12px;padding:14px 18px;background:linear-gradient(135deg,color-mix(in srgb,var(--profile-accent) 12%,var(--panel2)),var(--panel2));border-top:1px solid color-mix(in srgb,var(--profile-accent) 35%,var(--line));border-bottom:1px solid var(--line)}
.gcPublicProfileMusicHead{display:flex;align-items:center;gap:10px}.gcPublicProfileMusicHead>span{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:#1ed7601b;color:#1ed760;font-size:18px}.gcPublicProfileMusicHead b,.gcPublicProfileMusicHead small{display:block}.gcPublicProfileMusicHead small{color:var(--muted);margin-top:2px}
.gcPublicProfileMusicManage{margin-left:auto;min-height:38px;padding:8px 13px;border-radius:11px;white-space:nowrap}.gcPublicProfileMusicEmpty{grid-column:1/-1;display:flex;align-items:center;gap:11px;min-height:76px;padding:12px 14px;border:1px dashed color-mix(in srgb,var(--profile-accent) 40%,var(--line));border-radius:14px;background:#09121d99}.gcPublicProfileMusicEmpty>span{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#ffffff0d;color:var(--profile-accent);font-size:22px}.gcPublicProfileMusicEmpty b,.gcPublicProfileMusicEmpty small{display:block}.gcPublicProfileMusicEmpty small{color:var(--muted);margin-top:3px}
.gcPublicProfileMusicItems{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.gcSpotifyProfileTrack,.gcUploadedProfileTrack{min-width:0;min-height:76px;border:1px solid var(--line);border-radius:14px;background:#09121dcf;color:var(--text);padding:10px;text-decoration:none}.gcSpotifyProfileTrack{display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:10px}.gcSpotifyProfileTrack:hover{border-color:#1ed760;box-shadow:0 0 0 2px #1ed76020}.gcSpotifyProfileTrack img,.gcSpotifyLogo{width:52px;height:52px;border-radius:9px;object-fit:cover}.gcSpotifyLogo{display:grid;place-items:center;background:#1ed760;color:#09120c;font-size:24px}.gcSpotifyProfileTrack span{min-width:0}.gcSpotifyProfileTrack small,.gcSpotifyProfileTrack b,.gcSpotifyProfileTrack em{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gcSpotifyProfileTrack small{color:#1ed760}.gcSpotifyProfileTrack em{color:var(--muted);font-style:normal;font-size:11px;margin-top:3px}.gcSpotifyProfileTrack>strong{font-size:11px;color:#1ed760;white-space:nowrap}
.gcUploadedProfileTrack{display:grid;grid-template-columns:minmax(110px,.7fr) minmax(180px,1.3fr);align-items:center;gap:10px}.gcUploadedProfileTrack small,.gcUploadedProfileTrack b{display:block}.gcUploadedProfileTrack small{color:var(--muted)}.gcUploadedProfileTrack b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:3px}.gcUploadedProfileTrack audio{display:block;width:100%;height:38px;min-width:0}
.profileMusicStudio{grid-column:1/-1;display:grid;gap:12px;margin-top:16px;padding:15px;border:1px solid var(--line);border-radius:16px;background:color-mix(in srgb,var(--panel2) 88%,transparent)}.profileMusicStudio .profileSectionHead{margin:0}.profileMusicCurrent{display:flex;align-items:center;gap:12px;min-height:64px;padding:11px;border:1px solid var(--line);border-radius:13px;background:#09121d}.profileMusicCurrent>span{display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;border-radius:12px;background:color-mix(in srgb,var(--profile-accent,#dcb85f) 18%,transparent);color:var(--profile-accent,#dcb85f);font-size:21px}.profileMusicCurrent>div{min-width:0;flex:1}.profileMusicCurrent b,.profileMusicCurrent small{display:block}.profileMusicCurrent small{color:var(--muted);margin-top:3px}.profileMusicCurrent audio{width:min(310px,45%);height:38px}.profileMusicFields{display:grid;grid-template-columns:1fr 1fr;gap:10px}.profileMusicFields label{display:grid;gap:6px}.profileMusicFields input,.profileMusicFields select{width:100%}.profileMusicActions{display:flex;flex-wrap:wrap;gap:8px}.profileMusicActions .danger{background:#4a1f29;color:#ffdbe3}.profileMusicActions .danger:hover{background:#6a2534}
@media(max-width:720px){.gcPublicProfileMusicHead{align-items:flex-start;flex-wrap:wrap}.gcPublicProfileMusicHead>div{min-width:0;flex:1}.gcPublicProfileMusicManage{width:100%;margin-left:0}.gcPublicProfileMusicItems{grid-template-columns:1fr}.gcSpotifyProfileTrack{grid-template-columns:46px minmax(0,1fr)}.gcSpotifyProfileTrack img,.gcSpotifyLogo{width:46px;height:46px}.gcSpotifyProfileTrack>strong{display:none}.gcUploadedProfileTrack{grid-template-columns:1fr}.profileMusicFields{grid-template-columns:1fr}.profileMusicCurrent{align-items:flex-start;flex-wrap:wrap}.profileMusicCurrent audio{width:100%}.profileMusicActions{display:grid;grid-template-columns:1fr}.profileMusicActions button{width:100%}}

/* R15.18: compacte Spotify-kaarten in de mobiele chat. */
.spotifyEmbed{display:block!important;width:min(520px,100%)!important;max-width:100%!important;min-width:0!important;overflow:hidden!important}
.spotifyEmbed iframe{display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;border:0!important}
.msg:has(.spotifyEmbed) .msgMain,.msg:has(.spotifyEmbed) .body,.msg:has(.spotifyEmbed) .gcStyledMessageText{min-width:0!important;max-width:100%!important;overflow:hidden!important}
@media(max-width:600px){
  .msg:has(.spotifyEmbed) .body{display:block!important;width:100%!important;max-width:100%!important;padding-right:0!important}
  .msg:has(.spotifyEmbed) .gcStyledMessageText{display:block!important;width:100%!important;font-size:14px!important;line-height:1.35!important;overflow-wrap:anywhere!important}
  .spotifyEmbed{width:100%!important;margin-top:7px!important;border-radius:12px!important}
  .spotifyEmbed iframe{height:80px!important;border-radius:12px!important}
}

/* About stays focused on bio/interests; More holds extra details and actions. */
.profileMoreContent{display:grid;gap:14px;margin-bottom:16px}
.profileSectionTitle{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.profileSectionTitle>span{display:grid;place-items:center;width:34px;height:34px;border:1px solid #34475e;border-radius:9px;background:#111d2b}
.profileSectionTitle h3{margin:0!important;font-size:13px!important}
.profileSectionTitle small{display:block;margin-top:2px;color:#94a3b5;font-size:9px}
.profileExtraSection{
  padding:12px!important;border:1px solid #32445a!important;border-radius:12px!important;
  background:linear-gradient(180deg,#111c29,#0e1824)!important;
}
.profileExtraGrid{
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important;
}
.profileExtraItem{
  min-height:52px!important;padding:8px 10px!important;border:1px solid #314359!important;border-radius:9px!important;
  background:#0c1723!important;display:flex!important;align-items:center!important;gap:9px!important;
}
.profileExtraItem>span{font-size:18px!important}
.profileExtraItem>div{display:grid!important;gap:2px!important;min-width:0!important}
.profileExtraItem small{font-size:7px!important;letter-spacing:.08em!important;text-transform:uppercase!important;color:#8090a4!important}
.profileExtraItem b{font-size:10px!important;overflow-wrap:anywhere!important}
.profileSocialLinks{
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important;
}
.profileSocialLinks a{
  min-height:44px!important;padding:0 11px!important;border:1px solid #35475e!important;border-radius:9px!important;
  display:flex!important;align-items:center!important;gap:8px!important;background:#0c1723!important;color:#e7edf5!important;
  text-decoration:none!important;font-weight:850!important;
}
.profileSocialLinks a:hover{border-color:var(--profile-accent,#dcb85f)!important}
.profileSocialLinks a i{margin-left:auto;font-style:normal;color:#7f91a6}
.profileActions{
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;
}
.profileActions button{min-height:44px!important}

/* Studio tabs are always usable, including the repaired Socials tab. */
.profileEditorTabs{
  display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:5px!important;
}
.profileEditorTabs button{min-width:0!important;min-height:46px!important}
.profileTabPane:not(.active){display:none!important}
.profileTabPane.active{display:block!important}

/* Social studio: cards, not bare fields. */
.profileSocialStudio{
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;
}
.profileSocialStudio label{
  display:grid!important;grid-template-columns:1fr!important;gap:6px!important;
  padding:11px!important;border:1px solid #34465d!important;border-radius:11px!important;background:#111b28!important;
}
.profileSocialStudio label>span{font-weight:900!important}
.profileSocialStudio input{min-height:42px!important}
.profileSocialStudio small{font-size:8px!important;color:#8697aa!important}
.profileSocialHint{margin-top:10px;padding:10px 12px;border:1px dashed #3a4c63;border-radius:10px;color:#a9b5c4;font-size:9px}

/* Public profile becomes a centered, denser card on desktop. */
#profileModal .profileModalCard{width:min(900px,calc(100vw - 24px))!important}
#profileContent .gcProfile{max-width:860px!important;margin:0 auto!important}
#profileContent .gcProfilePane{padding:16px!important}

/* Profile live preview labels: never expose internal keys visually. */
#profileLiveRelation{overflow-wrap:anywhere}

/* Mobile / tablet */
@media(max-width:900px){
  #profileModal .profileModalCard{
    width:100%!important;max-width:none!important;
    height:calc(var(--gc-cody-vv-height,var(--gc-vh,100dvh)) - 12px)!important;
    max-height:none!important;margin:6px!important;border-radius:18px!important;
  }
  #profileContent .gcProfile{max-width:none!important}
  #profileContent .gcProfilePane{padding:12px!important}
  .gcProfileTabs button{min-width:108px!important;min-height:48px!important}
  .profileExtraGrid,.profileSocialLinks{grid-template-columns:1fr 1fr!important}
  .profileEditorTabs{
    display:flex!important;overflow-x:auto!important;overflow-y:hidden!important;
    scrollbar-width:none!important;-webkit-overflow-scrolling:touch!important;
  }
  .profileEditorTabs::-webkit-scrollbar{display:none!important}
  .profileEditorTabs button{flex:0 0 auto!important;min-width:116px!important}
  .profileSocialStudio{grid-template-columns:1fr!important}
}
@media(max-width:480px){
  .profileExtraGrid,.profileSocialLinks,.profileActions{grid-template-columns:1fr!important}
  .gcProfileCounters>span,.gcProfileCounters>button{min-height:44px!important}
  .profileExtraItem{min-height:48px!important}
}

/* Profiel Studio on mobile: one real scroll surface and a useful preview. */
@media(max-width:900px){
  #editProfileModal .profileEditorCard{
    height:calc(var(--gc-cody-vv-height,var(--gc-vh,100dvh)) - 10px)!important;
    max-height:none!important;margin:5px!important;
  }
  #editProfileModal .profileEditorLayout{
    grid-template-columns:1fr!important;
    min-height:0!important;
  }
  #editProfileModal .profileLivePanel{
    order:-1!important;
    position:relative!important;top:auto!important;
    max-height:320px!important;min-height:0!important;
    overflow:auto!important;
  }
  #editProfileModal .profileLiveCard{min-height:220px!important}
}

/* STEP3H.49.13U — Profile tabs, Friends/Gifts and ultra-compact Speelcafé */

/* One profile tab really means one pane. This final rule deliberately wins over
   earlier mobile compatibility rules that used :not(.hidden). */
#profileModal .gcProfilePane{
  display:none!important;
}
#profileModal .gcProfilePane.active{
  display:block!important;
}
#profileModal .gcProfilePane.hidden{
  display:none!important;
}

/* Information is compact enough by itself; no repeated base information in other panes. */
#profileModal .gcProfilePane[data-profile-pane="info"]{
  display:none!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important;
}
#profileModal .gcProfilePane[data-profile-pane="info"].active{
  display:grid!important;
}
#profileModal .gcProfilePane[data-profile-pane="info"] .profileInfoRow{
  min-height:58px!important;
  padding:10px 12px!important;
  border:1px solid #31445a!important;
  border-radius:10px!important;
  background:#0d1825!important;
}

/* Friends — Cody-like overview, but in GewoonChatten style. */
.profileFriendsPane{display:block!important}
.profileFriendsHead{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-bottom:10px;padding:10px 12px;border:1px solid #34465b;border-radius:10px;background:#111b28;
}
.profileFriendsHead>div{display:grid;gap:2px}
.profileFriendsHead b{font-size:13px}
.profileFriendsHead small{font-size:9px;color:#92a2b5}
.profileFriendsGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.profileFriendCard{
  width:100%;min-height:72px;display:grid;grid-template-columns:50px minmax(0,1fr) auto;gap:10px;
  align-items:center;text-align:left;padding:9px 10px;border:1px solid #34465c;border-radius:11px;
  background:linear-gradient(180deg,#111d2a,#0d1723);color:#eef3f8;cursor:pointer;
}
.profileFriendCard:hover{border-color:var(--profile-accent,#dcb85f);transform:translateY(-1px)}
.profileFriendAvatar{position:relative;width:48px;height:48px}
.profileFriendAvatar img{width:48px;height:48px;border-radius:50%;object-fit:cover;border:2px solid #7890aa}
.profileFriendAvatar i{position:absolute;right:0;bottom:2px;width:11px;height:11px;border:2px solid #101925;border-radius:50%;background:#677487}
.profileFriendAvatar i.online{background:#31d67c}
.profileFriendCopy{display:grid;gap:2px;min-width:0}
.profileFriendCopy b{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profileFriendCopy small{font-size:8px;color:#d7b95c;font-weight:850}
.profileFriendCopy em{font-size:9px;color:#91a0b2;font-style:normal}
.profileFriendOpen{font-size:9px;color:#aab7c7;white-space:nowrap}
.profileFriendsEmpty,.profileGiftsEmpty{
  min-height:150px;display:grid;place-items:center;align-content:center;gap:5px;
  padding:20px;border:1px dashed #384a60;border-radius:12px;color:#9baabc;text-align:center;
}
.profileFriendsEmpty>span,.profileGiftsEmpty>span{font-size:28px}
.profileFriendsEmpty b,.profileGiftsEmpty b{color:#edf2f8}

/* Gifts were already functional; make the profile tab a first-class sending surface. */
.profileGiftsHead{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-bottom:10px;padding:10px 12px;border:1px solid #34465b;border-radius:10px;background:#111b28;
}
.profileGiftsHead>div{display:grid;gap:2px}
.profileGiftsHead small{font-size:9px;color:#91a0b3}
.profileGiftsHead button{
  min-height:40px;border:1px solid color-mix(in srgb,var(--profile-accent,#dcb85f) 70%,#34465b);
  border-radius:9px;background:color-mix(in srgb,var(--profile-accent,#dcb85f) 18%,#101925);
  color:#fff;padding:0 12px;font-weight:850;cursor:pointer;
}
.profileGiftGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.profileGiftCard{
  min-height:70px;display:grid;grid-template-columns:42px minmax(0,1fr);gap:9px;align-items:center;
  padding:10px;border:1px solid #33465b;border-radius:10px;background:#0d1825;
}
.profileGiftCard>span{display:grid;place-items:center;width:42px;height:42px;border-radius:10px;background:#172537;font-size:24px}
.profileGiftCard>div{min-width:0}
.profileGiftCard b,.profileGiftCard small{display:block}
.profileGiftCard small{margin-top:2px;color:#92a1b4;font-size:9px}
.profileGiftCard p{margin:5px 0 0;font-size:9px;color:#c8d1dd;overflow-wrap:anywhere}

/* Speelcafé cards: remove all remaining wasted vertical space. */
.gcGameMessageBody{
  width:min(470px,100%)!important;
  max-width:min(470px,100%)!important;
  margin:0!important;padding:0!important;
}
.gcGameMessageBody .gcChatGameCard,
.gcChatGameCard:has(.gcQuizMinimal),
.gcChatGameCard[data-chat-game="word"]{
  width:100%!important;max-width:100%!important;
  min-height:0!important;height:auto!important;
  margin:2px 0 0!important;padding:6px 7px!important;
}
.gcCompactGameHead{
  min-height:20px!important;height:auto!important;
  margin:0 0 4px!important;
}
.gcCompactGameHead strong{font-size:10px!important}
.gcCompactGameHead span{padding:2px 5px!important;font-size:7px!important}
.gcChatWordMask{
  min-height:31px!important;height:auto!important;
  padding:4px 7px!important;margin:0!important;
  font-size:15px!important;line-height:1.15!important;
}
.gcCompactGameHint{
  margin:4px 1px 0!important;font-size:7px!important;line-height:1.2!important;
}
.gcQuizMinimal{padding-top:0!important}
.gcQuizMinimal .gcChatQuizQuestion{
  min-height:0!important;margin:0 0 4px!important;padding:5px 7px!important;font-size:10px!important;line-height:1.2!important;
}
.gcQuizMinimal .gcChatQuizAnswers{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:4px!important;margin:0!important;
}
.gcQuizMinimal .gcChatQuizAnswers button{
  min-height:30px!important;padding:3px 6px!important;font-size:9px!important;
}
.gcSolvedWord{
  color:#72e7a3!important;letter-spacing:.13em!important;font-weight:950!important;text-align:center!important;
}
.gcSolvedQuizAnswer{
  min-height:32px;display:flex;align-items:center;padding:5px 7px;border:1px solid #315344;border-radius:8px;
  background:#0d211b;color:#7ee6a8;font-size:10px;font-weight:900;
}
.gcGameFinished{opacity:.9!important}
.gcGameFinished .gcCompactGameHead span{color:#72e7a3!important;border-color:#315344!important}

/* Gift modal remains usable on every screen. */
@media(max-width:900px){
  .profileFriendsGrid,.profileGiftGrid{grid-template-columns:1fr!important}
  .profileFriendCard{min-height:68px!important}
  .profileGiftsHead{align-items:stretch;flex-direction:column!important}
  .profileGiftsHead button{width:100%!important}
  .giftCatalog{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #giftModal .modalCard{width:calc(100vw - 16px)!important;max-height:calc(var(--gc-cody-vv-height,var(--gc-vh,100dvh)) - 16px)!important}
  .gcGameMessageBody{width:min(430px,calc(100vw - 118px))!important;max-width:calc(100vw - 118px)!important}
}
@media(max-width:480px){
  #profileModal .gcProfilePane[data-profile-pane="info"].active{grid-template-columns:1fr!important}
  #profileModal .gcProfilePane[data-profile-pane="info"] .profileInfoRow{min-height:50px!important}
  .profileFriendCard{grid-template-columns:46px minmax(0,1fr)!important}
  .profileFriendOpen{display:none!important}
  .profileFriendAvatar,.profileFriendAvatar img{width:44px!important;height:44px!important}
  .giftCatalog{grid-template-columns:1fr 1fr!important}
  .gcGameMessageBody{width:calc(100vw - 112px)!important;max-width:calc(100vw - 112px)!important}
  .gcQuizMinimal .gcChatQuizAnswers{grid-template-columns:1fr!important}
}

/* STEP3H.49.13V — merged profile, Cody gifts, achievements, persistent game snapshots */

/* Over mij is now the complete personal profile page. */
.profileAboutActions{margin-top:14px!important;padding-top:12px!important;border-top:1px solid #314258!important}
.gcProfileQuickActions{position:relative;z-index:2;margin-top:12px}.gcProfileQuickActions button{border:1px solid color-mix(in srgb,var(--profile-accent) 72%,#fff);border-radius:12px;background:color-mix(in srgb,var(--profile-accent) 82%,#182235);color:#0b1018;font-weight:900;padding:10px 16px;box-shadow:0 8px 20px #0005;cursor:pointer}.gcProfileQuickActions button:hover{filter:brightness(1.1);transform:translateY(-1px)}
.pmSecureMediaBubble{display:grid!important;grid-template-columns:44px minmax(0,1fr) auto!important;align-items:center!important;gap:11px!important;min-width:min(330px,78vw)!important;padding:12px 13px!important;border:1px solid #36506d!important;border-radius:15px!important;background:linear-gradient(135deg,#152437,#101a28)!important;box-shadow:0 8px 24px #0004!important}.pmSecureMediaBubble>span{display:grid!important;place-items:center!important;width:42px!important;height:42px!important;border-radius:12px!important;background:#203854!important;font-size:21px!important}.pmSecureMediaBubble b,.pmSecureMediaBubble small{display:block!important}.pmSecureMediaBubble small{margin-top:3px!important;color:#9fb6ce!important}.pmSecureMediaBubble button{border:0!important;border-radius:10px!important;padding:9px 11px!important;background:#50bdf2!important;color:#07121b!important;font-weight:900!important}.pmSecureMediaBubble.consumed{opacity:.68!important;filter:saturate(.7)!important}.pmSecureMediaBubble.adult{border-color:#b14f76!important;background:linear-gradient(135deg,#351628,#171524)!important}.suggestionModalCard{max-height:min(92dvh,820px)!important;overflow:auto!important;overscroll-behavior:contain!important}.suggestionForm{padding-bottom:max(10px,env(safe-area-inset-bottom))!important}@media(max-width:720px){.suggestionModalCard{width:calc(100vw - 16px)!important;max-height:calc(100dvh - 16px)!important;margin:8px!important}.suggestionForm textarea{min-height:120px!important;resize:vertical}.suggestionUpload{padding:12px!important}.suggestionPreview{max-height:180px!important;object-fit:contain!important}}
#profileModal [data-profile-pane="about"] .profileMoreContent{margin-top:14px!important}
.reportAttachment{display:grid;gap:7px;margin:12px 0;padding:12px 14px;border:1px solid #304862;border-radius:12px;background:#0d1a29;color:#eef5fc;font-weight:850}.reportAttachment span,.reportAttachment small{color:#91a7be;font-weight:500}.reportAttachment input{width:100%;padding:9px;border:1px dashed #496783;border-radius:9px;background:#101f30}.reportAttachmentOpen{display:flex;align-items:center;gap:8px;margin:12px 0;padding:11px 13px;border:1px solid #3c6588;border-radius:11px;background:#122b40;color:#8fd2ff;font-weight:850;text-decoration:none}.reportAttachmentOpen:hover{background:#173650}
#profileModal [data-profile-pane="about"]>.profileBio{margin-bottom:10px!important}
@media(min-width:901px){
  #profileModal [data-profile-pane="about"]>.profileInfoRow{
    display:grid!important;grid-template-columns:minmax(150px,.8fr) minmax(0,1.2fr)!important;
  }
}

/* Gift catalog — real Cody assets, GC Coin only. */
.giftCatalog{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important}
.giftCatalog button{min-height:120px!important;padding:9px!important}
.giftCatalog img{width:58px!important;height:58px!important;object-fit:contain!important}
.giftCatalog b{display:block!important;margin-top:5px!important}
.giftCatalog small{display:block!important;margin-top:3px!important;color:#d8b95b!important}

/* Admin gift manager */
.giftAdminPreview{min-height:130px;display:flex;align-items:center;gap:14px;padding:16px;border:1px solid #3a4b61;border-radius:12px;background:#101a27}
.giftAdminPreview img{width:74px;height:74px;object-fit:contain}
.giftAdminPreview>div{display:grid;gap:5px}.giftAdminPreview b{font-size:18px}.giftAdminPreview span{color:#e4bd56;font-weight:900}.giftAdminPreview small{color:#95a5b7}
.adminGiftGrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;margin-top:14px}
.adminGiftCard{min-height:130px;padding:10px;border:1px solid #35475d;border-radius:12px;background:#101a27;color:#eef3f8;text-align:center;cursor:pointer}
.adminGiftCard:hover{border-color:#dcb85f}.adminGiftCard.disabled{opacity:.5}
.adminGiftCard img{width:58px;height:58px;object-fit:contain}.adminGiftCard div{display:grid;gap:3px}.adminGiftCard b{font-size:11px}.adminGiftCard span{font-size:9px;color:#dfbd5c}.adminGiftCard small{font-size:8px;color:#8f9eb0}

/* Snapshot-rendered games are immediately visible after update/reload. */
.gcChatGameLoading{display:none!important}
.gcChatGameCard{contain:layout paint!important}
.gcChatGameCard .gcCompactGameHead,
.gcChatGameCard .gcChatWordMask,
.gcChatGameCard .gcCompactGameHint,
.gcChatGameCard .gcChatQuizQuestion,
.gcChatGameCard .gcChatQuizAnswers{visibility:visible!important}

@media(max-width:1100px){
 .adminGiftGrid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:900px){
 .giftCatalog{grid-template-columns:repeat(3,minmax(0,1fr))!important}
 .adminGiftGrid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:600px){
 .giftCatalog{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .adminGiftGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .giftAdminPreview{min-height:100px;padding:11px}.giftAdminPreview img{width:58px;height:58px}
}
@media(max-width:360px){
 .giftCatalog,.adminGiftGrid{grid-template-columns:1fr 1fr!important}
}

/* STEP3H.49.13X — restore build. Stable 3-dot/menu code is intentionally untouched. */

/* Gradient/neon remain on the parent; only emoji opt out of text-fill/shadow. */
.gcStyledMessageText.gcTextMode_gradient{
  color:transparent!important;
  -webkit-text-fill-color:transparent!important;
  background:linear-gradient(90deg,var(--gc-style-c1),var(--gc-style-c2))!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
}
.gcStyledMessageText.gcTextMode_neon{
  color:var(--gc-style-c1)!important;
  -webkit-text-fill-color:var(--gc-style-c1)!important;
  text-shadow:0 0 5px var(--gc-style-c1),0 0 12px var(--gc-style-c1)!important;
}
.gcStyledMessageText .gcStyleEmoji{
  color:initial!important;
  -webkit-text-fill-color:initial!important;
  background:none!important;
  -webkit-background-clip:border-box!important;
  background-clip:border-box!important;
  text-shadow:none!important;
  font-family:Apple Color Emoji,Segoe UI Emoji,Noto Color Emoji,sans-serif!important;
  font-style:normal!important;
  font-weight:400!important;
  filter:none!important;
}
.gcStyledMessageText img{
  color:initial!important;
  -webkit-text-fill-color:initial!important;
  background:none!important;
  text-shadow:none!important;
}
@supports (-webkit-touch-callout:none){
  .gcStyledMessageText.gcTextMode_gradient{
    display:inline!important;
    -webkit-background-clip:text!important;
    background-clip:text!important;
  }
}

/* Speelcafé: compact, no giant empty card. */
.gcGameMessageBody{width:min(380px,100%)!important;max-width:min(380px,100%)!important;min-height:0!important;height:auto!important;padding:0!important}
.gcGameMessageBody .gcChatGameCard{width:100%!important;max-width:100%!important;min-height:0!important;height:auto!important;padding:6px 8px!important;margin:1px 0!important;border-radius:9px!important}
.gcGameMessageBody .gcCompactGameHead{height:20px!important;min-height:20px!important;margin:0 0 4px!important}
.gcGameMessageBody .gcCompactGameHead strong{font-size:10px!important}
.gcGameMessageBody .gcCompactGameHead span{font-size:7px!important;padding:2px 5px!important}
.gcGameMessageBody .gcChatWordMask{height:31px!important;min-height:31px!important;padding:3px 7px!important;margin:0!important;font-size:15px!important;line-height:1!important}
.gcGameMessageBody .gcCompactGameHint{margin:4px 0 0!important;font-size:7px!important;line-height:1.2!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.gcGameMessageBody .gcChatQuizQuestion{min-height:30px!important;padding:5px 7px!important;margin-bottom:4px!important;font-size:9.5px!important}
.gcGameMessageBody .gcChatQuizAnswers{gap:4px!important}
.gcGameMessageBody .gcChatQuizAnswers button{min-height:29px!important;padding:4px 6px!important;font-size:8.5px!important}
.gcChatGameLoading{min-height:0!important;height:auto!important}
@media(max-width:900px){.gcGameMessageBody{width:min(350px,calc(100vw - 112px))!important;max-width:calc(100vw - 112px)!important}}
@media(max-width:420px){.gcGameMessageBody{width:calc(100vw - 104px)!important;max-width:calc(100vw - 104px)!important}.gcGameMessageBody .gcChatWordMask{font-size:13px!important;letter-spacing:.04em!important}}

/* New + menu tiles use the existing addon visual language. */
.giftsQuickBtn .addonIcon,.badgesQuickBtn .addonIcon{font-size:20px!important}

/* STEP3H.49.13X HOTFIX — one username style source + reliable 3-dot menu.
   Chatternaam opmaak (Kleur / Neon / Gradient) is authoritative.
   Legacy Profile Studio name_effect/color no longer styles the userlist. */
#users .userStyledName.gcNameMode_gradient,
.msg .meta>.name.gcNameMode_gradient,
#profileModal .profileStyledName.gcNameMode_gradient{
  display:inline-block!important;
  background-image:linear-gradient(90deg,var(--gc-style-c1,#fff),var(--gc-style-c2,#ff3d81))!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  color:transparent!important;
  -webkit-text-fill-color:transparent!important;
  text-shadow:none!important;
}
#users .userStyledName.gcNameMode_neon,
.msg .meta>.name.gcNameMode_neon,
#profileModal .profileStyledName.gcNameMode_neon{
  background:none!important;
  color:var(--gc-style-c1,#fff)!important;
  -webkit-text-fill-color:var(--gc-style-c1,#fff)!important;
  text-shadow:0 0 4px var(--gc-style-c1,#fff),0 0 10px var(--gc-style-c2,#ff3d81)!important;
}
#users .userStyledName:not(.gcNameMode_gradient):not(.gcNameMode_neon),
.msg .meta>.name:not(.gcNameMode_gradient):not(.gcNameMode_neon),
#profileModal .profileStyledName:not(.gcNameMode_gradient):not(.gcNameMode_neon){
  color:var(--gc-style-c1,#fff)!important;
  -webkit-text-fill-color:var(--gc-style-c1,#fff)!important;
}
.gcCodyMoreBtn{pointer-events:auto!important;touch-action:manipulation!important;position:relative!important;z-index:6!important}
.gcCodyActionMenu.gcMenuPortal{position:fixed!important;z-index:2147483640!important;display:none!important;visibility:hidden!important;pointer-events:auto!important}
.gcCodyActionMenu.gcMenuPortal.open:not([hidden]){display:grid!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important}

/* 2026-08-18 HOTFIX — mobile full username + italic glyph room + solid message color.
   Builds on the current 18-08 base and preserves Graniet/name style + 3-dot fixes. */

/* A normal (solid) message color uses the exact same --gc-message-color value
   already supplied by gcStyleVars(). Neon/gradient keep their own rules. */
.gcStyledMessageText:not(.gcTextMode_neon):not(.gcTextMode_gradient){
  color:var(--gc-message-color,inherit)!important;
  -webkit-text-fill-color:var(--gc-message-color,inherit)!important;
  background:none!important;
  text-shadow:none;
}

/* Italic/heavy-italic fonts can visually lean outside their measured inline box.
   Keep the safe glyph room, but NEVER calculate a smaller percentage max-width on
   a fit-content text surface: that can collapse normal sentences to min-content. */
.gcStyledMessageText.gcText_italic,
.gcStyledMessageText.gcText_bolditalic,
.gcStyledMessageText.gcText_heavyitalic{
  padding-inline-end:.42em!important;
  max-width:100%!important;
  overflow:visible!important;
}

/* On touch/mobile the timestamp and 3-dot button have their own absolute lanes.
   Do not additionally cap the username to 46/52%; show the complete name and
   allow an exceptionally long username to wrap instead of ellipsising it. */
@media(max-width:900px){
  .msg .meta{
    overflow:visible!important;
    flex-wrap:wrap!important;
    align-items:center!important;
  }
  .msg .meta>.name{
    flex:0 1 auto!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    overflow:visible!important;
    text-overflow:clip!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
  }
  .msg .meta>.rank,
  .msg .meta>.staffMessageBadge{
    flex:0 0 auto!important;
  }
}

/* 2026-08-18 HOTFIX — sentence width regression guard.
   Preserve complete usernames from the previous hotfix and keep styled message
   text capable of using the full available message lane. */
.gcStyledMessageText{
  min-width:0!important;
}
.gcStyledMessageText.gcText_italic,
.gcStyledMessageText.gcText_bolditalic,
.gcStyledMessageText.gcText_heavyitalic{
  max-width:100%!important;
}

/* 2026-08-18 HOTFIX — Speelcafé cron-only + ultra-compact chat cards.
   Do not add explanatory filler inside a live game message. */
.msg .body.gcGameMessageBody{
  display:inline-block!important;
  width:fit-content!important;
  max-width:min(420px,100%)!important;
  min-width:0!important;
  min-height:0!important;
  height:auto!important;
  margin:1px 0 0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  line-height:1.1!important;
  overflow:visible!important;
}
.msg .body.gcGameMessageBody .gcChatGameCard,
.gcGameMessageBody .gcChatGameCard[data-chat-game="word"]{
  display:inline-grid!important;
  grid-template-rows:auto auto auto!important;
  gap:2px!important;
  align-content:start!important;
  width:fit-content!important;
  max-width:100%!important;
  min-width:0!important;
  min-height:0!important;
  height:auto!important;
  margin:0!important;
  padding:4px 6px!important;
  border-radius:7px!important;
  box-sizing:border-box!important;
}
.gcGameMessageBody .gcCompactGameHead{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:6px!important;
  width:auto!important;
  min-height:0!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  line-height:1!important;
}
.gcGameMessageBody .gcCompactGameHead strong{
  font-size:11px!important;
  line-height:1!important;
  white-space:nowrap!important;
}
.gcGameMessageBody .gcCompactGameHead span{
  margin:0!important;
  padding:1px 4px!important;
  font-size:8px!important;
  line-height:1.15!important;
  white-space:nowrap!important;
}
.gcGameMessageBody .gcChatWordMask{
  display:block!important;
  width:auto!important;
  min-width:0!important;
  max-width:100%!important;
  min-height:0!important;
  height:auto!important;
  margin:0!important;
  padding:2px 0 1px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  font-size:14px!important;
  line-height:1.05!important;
  letter-spacing:.055em!important;
  text-align:left!important;
  white-space:normal!important;
}
.gcGameMessageBody .gcCompactGameHint{
  width:auto!important;
  max-width:100%!important;
  margin:0!important;
  padding:0!important;
  color:#b9c7d7!important;
  font-size:10px!important;
  line-height:1.18!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
}
/* Quiz uses the same compact shell, while keeping answer buttons tappable. */
.gcGameMessageBody .gcQuizMinimal{display:grid!important;gap:3px!important;padding:0!important;margin:0!important}
.gcGameMessageBody .gcChatQuizQuestion{min-height:0!important;margin:0!important;padding:3px 4px!important;font-size:10px!important;line-height:1.15!important}
.gcGameMessageBody .gcChatQuizAnswers{margin:0!important;gap:3px!important}
.gcGameMessageBody .gcChatQuizAnswers button{min-height:27px!important;padding:3px 5px!important;font-size:9px!important;line-height:1.1!important}
@media(max-width:900px){
  .msg .body.gcGameMessageBody{max-width:calc(100vw - 98px)!important}
  .gcGameMessageBody .gcCompactGameHint{font-size:10px!important}
}

/* GEWOONCHATTEN 18-08-2026 — Cody-style compact private inbox + PM window */
#privateInboxModal.gcPrivatePopover{
  position:fixed!important;inset:0!important;z-index:2147481200!important;
  pointer-events:none!important;background:transparent!important;padding:0!important;
}
#privateInboxModal.gcPrivatePopover.hidden{display:none!important}
#privateInboxModal .gcPrivateMenuCard{
  position:fixed!important;top:72px!important;right:12px!important;
  width:min(330px,calc(100vw - 16px))!important;max-width:330px!important;
  max-height:min(560px,calc(100dvh - 84px))!important;min-height:0!important;
  padding:0!important;margin:0!important;overflow:hidden!important;
  pointer-events:auto!important;border:1px solid var(--gc-safe-line,var(--line,#314158))!important;
  border-radius:10px!important;background:var(--gc-safe-surface,#171f2c)!important;
  color:var(--gc-safe-text,var(--text,#fff))!important;box-shadow:0 18px 55px rgba(0,0,0,.58)!important;
}
#privateInboxModal .inboxTop{
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  gap:8px!important;min-height:42px!important;padding:7px 8px 7px 10px!important;
  border-bottom:1px solid var(--gc-safe-line,var(--line,#314158))!important;
  background:var(--gc-safe-surface2,#202938)!important;
}
#privateInboxModal .inboxTop small{display:block!important;margin:0!important;font-size:8px!important;line-height:1!important;color:var(--gc-safe-muted,#aeb8c8)!important;font-weight:800!important}
#privateInboxModal .inboxTop h3{margin:2px 0 0!important;font-size:13px!important;line-height:1.1!important;color:var(--gc-safe-text,#fff)!important}
#privateInboxModal .gcPrivateMenuActions{display:flex!important;align-items:center!important;gap:3px!important}
#privateInboxModal .gcPrivateMenuActions button{
  width:28px!important;height:28px!important;min-width:28px!important;padding:0!important;
  display:grid!important;place-items:center!important;border:0!important;border-radius:7px!important;
  background:transparent!important;color:var(--gc-safe-text,#fff)!important;font-size:15px!important;cursor:pointer!important;
}
#privateInboxModal .gcPrivateMenuActions button:hover{background:rgba(255,255,255,.08)!important}
#privateInboxModal .privateInboxList{
  display:block!important;max-height:min(455px,calc(100dvh - 145px))!important;overflow-y:auto!important;overflow-x:hidden!important;
  padding:3px!important;margin:0!important;background:var(--gc-safe-surface,#171f2c)!important;
}
#privateInboxModal .inboxConversation{
  display:grid!important;grid-template-columns:minmax(0,1fr) 28px!important;gap:2px!important;
  align-items:center!important;width:100%!important;min-height:46px!important;margin:0!important;padding:0!important;
  border:0!important;border-bottom:1px solid color-mix(in srgb,var(--gc-safe-line,#314158) 70%,transparent)!important;
  border-radius:0!important;background:transparent!important;color:inherit!important;overflow:hidden!important;
}
#privateInboxModal .inboxConversation:last-child{border-bottom:0!important}
#privateInboxModal .inboxConversation.unread{background:color-mix(in srgb,var(--gc-private-notify,#5c8cff) 10%,transparent)!important}
#privateInboxModal .inboxOpen{
  display:grid!important;grid-template-columns:34px minmax(0,1fr) auto!important;gap:7px!important;align-items:center!important;
  width:100%!important;min-width:0!important;min-height:45px!important;padding:5px 4px!important;
  border:0!important;background:transparent!important;color:inherit!important;text-align:left!important;cursor:pointer!important;
}
#privateInboxModal .inboxOpen:hover{background:rgba(255,255,255,.045)!important}
#privateInboxModal .inboxOpen .uAvatar,#privateInboxModal .inboxOpen .uAvatar img{width:32px!important;height:32px!important;border-radius:50%!important;object-fit:cover!important}
#privateInboxModal .gcPrivateRowName{display:block!important;min-width:0!important;padding:0!important;background:transparent!important}
#privateInboxModal .gcPrivateRowName b{display:block!important;font-size:11px!important;line-height:1.15!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;color:var(--gc-safe-text,#fff)!important}
#privateInboxModal .gcPrivateRowName small{display:block!important;margin-top:2px!important;font-size:8.5px!important;line-height:1.15!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;color:var(--gc-safe-muted,#9eabba)!important}
#privateInboxModal .inboxOpen>i{font-style:normal!important;font-size:8.5px!important;color:var(--gc-safe-muted,#9eabba)!important;white-space:nowrap!important}
#privateInboxModal .inboxOpen>i b{display:grid!important;place-items:center!important;min-width:18px!important;height:18px!important;padding:0 5px!important;border-radius:999px!important;background:var(--gc-private-notify,#5c8cff)!important;color:#fff!important;font-size:9px!important}
#privateInboxModal .inboxDelete{
  width:25px!important;height:25px!important;min-width:25px!important;padding:0!important;border:0!important;border-radius:7px!important;
  background:transparent!important;color:#d6dce6!important;font-size:16px!important;cursor:pointer!important;
}
#privateInboxModal .inboxDelete:hover{background:rgba(255,107,114,.14)!important;color:#ff8e96!important}
#privateInboxModal .gcPrivateMenuFooter{
  display:flex!important;align-items:center!important;justify-content:flex-end!important;min-height:28px!important;
  padding:5px 9px!important;border-top:1px solid var(--gc-safe-line,var(--line,#314158))!important;
  color:var(--gc-safe-muted,#9eabba)!important;font-size:8.5px!important;background:var(--gc-safe-surface2,#202938)!important;
}
#privateInboxModal .gcPrivateMenuFooter b{color:var(--gc-safe-text,#fff)!important}
#privateInboxModal .gcPrivateEmpty{padding:18px 10px!important;text-align:center!important}

#pmModal.gcPmOverlay{
  position:fixed!important;inset:0!important;z-index:2147481100!important;pointer-events:none!important;
  background:transparent!important;padding:0!important;margin:0!important;overflow:visible!important;
}
#pmModal.gcPmOverlay.hidden{display:none!important}
#pmModal .gcPmCard{
  position:fixed!important;right:12px!important;bottom:12px!important;
  width:400px!important;max-width:calc(100vw - 24px)!important;height:520px!important;max-height:calc(100dvh - 86px)!important;min-height:320px!important;
  display:flex!important;flex-direction:column!important;overflow:hidden!important;pointer-events:auto!important;
  padding:0!important;margin:0!important;border:1px solid var(--gc-safe-line,var(--line,#314158))!important;
  border-radius:10px!important;background:var(--gc-safe-surface,#171f2c)!important;color:var(--gc-safe-text,#fff)!important;
  box-shadow:0 22px 70px rgba(0,0,0,.62)!important;
}
#pmModal .pmHead{
  flex:0 0 44px!important;min-height:44px!important;height:44px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;
  gap:8px!important;padding:5px 6px 5px 8px!important;border-bottom:1px solid var(--gc-safe-line,var(--line,#314158))!important;
  background:var(--gc-safe-surface2,#202938)!important;
}
#pmModal .pmHeadIdentity{display:flex!important;align-items:center!important;gap:7px!important;min-width:0!important;flex:1 1 auto!important}
#pmModal .pmHeadIdentity img{width:30px!important;height:30px!important;flex:0 0 30px!important;border-radius:50%!important;object-fit:cover!important;border:1px solid rgba(255,255,255,.12)!important}
#pmModal .pmHeadIdentity>div{min-width:0!important;background:transparent!important;padding:0!important}
#pmModal .pmHeadIdentity small{display:block!important;margin:0!important;font-size:8px!important;line-height:1!important;color:var(--gc-safe-muted,#9eabba)!important}
#pmModal .pmHeadIdentity h3{margin:2px 0 0!important;font-size:12px!important;line-height:1.1!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;color:var(--gc-safe-text,#fff)!important}
#pmModal .pmCallActions{display:flex!important;align-items:center!important;gap:3px!important;padding:0!important;flex:0 0 auto!important}
#pmModal .pmCallActions button{
  width:30px!important;height:30px!important;min-width:30px!important;padding:0!important;display:grid!important;place-items:center!important;
  border:0!important;border-radius:7px!important;background:transparent!important;color:var(--gc-safe-text,#fff)!important;font-size:14px!important;cursor:pointer!important;
}
#pmModal .pmCallActions button:hover{background:rgba(255,255,255,.08)!important}
#pmModal #pmClose:hover{background:rgba(255,107,114,.16)!important;color:#ff9aa0!important}
#pmModal .pmMessages{
  flex:1 1 auto!important;min-height:0!important;width:100%!important;overflow-y:auto!important;overflow-x:hidden!important;
  padding:8px 7px!important;margin:0!important;border:0!important;border-radius:0!important;background:#0d131c!important;
  overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important;
}
#pmModal .pm{
  display:flex!important;align-items:flex-end!important;gap:5px!important;width:100%!important;max-width:none!important;min-width:0!important;
  margin:0 0 6px!important;padding:0!important;background:transparent!important;border:0!important;
}
#pmModal .pm.theirs{flex-direction:row!important;justify-content:flex-start!important}
#pmModal .pm.mine{flex-direction:row!important;justify-content:flex-end!important;margin-left:0!important}
#pmModal .pm.mine .pmBubble{order:1!important}
#pmModal .pm.mine .pmMessageAvatar{order:2!important}
#pmModal .pmMessageAvatar{
  display:block!important;width:27px!important;height:27px!important;flex:0 0 27px!important;margin:0 0 12px!important;border-radius:50%!important;
  object-fit:cover!important;background:#263244!important;border:1px solid rgba(255,255,255,.12)!important;
}
#pmModal .pmBubble{
  position:relative!important;width:auto!important;min-width:0!important;max-width:78%!important;
  padding:7px 9px 5px!important;margin:0!important;border:0!important;border-radius:10px!important;
  background:#243249!important;color:var(--gc-safe-text,#fff)!important;box-shadow:none!important;
}
#pmModal .pm.mine .pmBubble{background:#4f6794!important}
#pmModal .pm.systemPm .pmBubble{max-width:88%!important;background:#1b3550!important;border:1px solid #315479!important}
#pmModal .pmBubble>div,#pmModal .pmBody,#pmModal .pmMeta,#pmModal .pmMessageTools{
  background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;
}
#pmModal .pmBody{
  min-height:0!important;padding:0!important;margin:0!important;color:var(--gc-safe-text,#fff)!important;
  font-size:13px!important;line-height:1.35!important;white-space:pre-wrap!important;overflow-wrap:anywhere!important;word-break:normal!important;
}
#pmModal .pmBody .gcStyledMessageText{display:inline!important;max-width:100%!important}
#pmModal .pmMeta{
  display:flex!important;align-items:center!important;gap:5px!important;flex-wrap:wrap!important;
  padding:2px 0 0!important;margin:0!important;font-size:8px!important;line-height:1.15!important;color:#c3cfdf!important;
}
#pmModal .pm.mine .pmMeta{justify-content:flex-end!important}
#pmModal .pmMeta span:first-child{font-weight:700!important}
#pmModal .pmMeta time{opacity:.82!important}
#pmModal .pmReceipt{font-size:8px!important;font-weight:900!important;color:#d9e3f0!important}
#pmModal .pmReceipt.read{color:#72e3b0!important}
#pmModal .pmMessageTools{
  position:absolute!important;right:1px!important;top:-29px!important;z-index:4!important;
  display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:2px!important;width:auto!important;min-height:0!important;
  margin:0!important;padding:2px!important;border:1px solid var(--gc-safe-line,var(--line,#314158))!important;border-radius:9px!important;
  background:var(--gc-safe-surface2,#202938)!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;
  transition:opacity .12s ease!important;
}
#pmModal .pm:hover .pmMessageTools,#pmModal .pm:focus-within .pmMessageTools,#pmModal .pm.actionsOpen .pmMessageTools{
  opacity:1!important;visibility:visible!important;pointer-events:auto!important;
}
#pmModal .pmMessageTools button{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;width:24px!important;min-width:24px!important;height:24px!important;
  padding:0!important;border:0!important;border-radius:6px!important;background:transparent!important;color:#d4dce8!important;font-size:10px!important;cursor:pointer!important;
}
#pmModal .pmMessageTools button:hover{background:rgba(255,255,255,.09)!important;color:#fff!important}
#pmModal .pmMessageTools .pmReactionChip{width:auto!important;min-width:28px!important;padding:0 5px!important}
#pmModal .pmSystemAction{display:block!important;margin:6px 0 1px!important;padding:6px 8px!important;font-size:9px!important;border-radius:7px!important}
#pmModal .pmTyping{
  flex:0 0 auto!important;height:0!important;min-height:0!important;padding:0 9px!important;margin:0!important;overflow:hidden!important;
  background:#111824!important;color:var(--gc-accent,#dcb85f)!important;font-size:8.5px!important;line-height:22px!important;border:0!important;
}
#pmModal .pmTyping.active{height:22px!important;min-height:22px!important;padding:0 9px!important;border-top:1px solid var(--gc-safe-line,var(--line,#314158))!important}
#pmModal .pmBottom{
  flex:0 0 auto!important;display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;align-items:end!important;gap:4px!important;
  padding:5px!important;margin:0!important;border-top:1px solid var(--gc-safe-line,var(--line,#314158))!important;background:var(--gc-safe-surface2,#202938)!important;
}
#pmModal .pmTools{display:flex!important;align-items:center!important;gap:3px!important;padding:0!important;margin:0!important;background:transparent!important}
#pmModal .pmTools button{
  width:32px!important;height:36px!important;min-width:32px!important;padding:0!important;border:0!important;border-radius:9px!important;
  background:transparent!important;color:var(--gc-safe-text,#fff)!important;font-size:16px!important;cursor:pointer!important;
}
#pmModal .pmTools button:hover{background:rgba(255,255,255,.08)!important}
#pmModal .pmComposer{
  display:grid!important;grid-template-columns:minmax(0,1fr) 36px!important;gap:4px!important;align-items:end!important;
  width:100%!important;padding:0!important;margin:0!important;border:0!important;background:transparent!important;position:static!important;
}
#pmModal .pmComposer textarea{
  width:100%!important;min-width:0!important;min-height:36px!important;height:36px!important;max-height:82px!important;
  padding:8px 10px!important;margin:0!important;resize:none!important;border:1px solid var(--gc-safe-line,var(--line,#314158))!important;
  border-radius:18px!important;background:#101722!important;color:var(--gc-safe-text,#fff)!important;font-size:12px!important;line-height:18px!important;outline:none!important;
}
#pmModal .pmComposer textarea:focus{border-color:var(--gc-accent,#dcb85f)!important}
#pmModal .pmComposer button[type="submit"]{
  width:36px!important;height:36px!important;min-width:36px!important;padding:0!important;border:0!important;border-radius:50%!important;
  display:grid!important;place-items:center!important;background:#f4b83f!important;color:#171208!important;font-size:16px!important;font-weight:900!important;cursor:pointer!important;
}
#pmModal .pmComposer button:disabled,#pmModal .pmTools button:disabled{opacity:.45!important;cursor:not-allowed!important}
#pmModal .pmMessages img.chatMedia,#pmModal .pmMessages video.chatMedia,#pmModal .pmMessages img,#pmModal .pmMessages video{
  max-width:min(240px,100%)!important;max-height:220px!important;height:auto!important;border-radius:8px!important;object-fit:contain!important;
}
.pmMinimizedDock{
  position:fixed!important;right:14px!important;bottom:86px!important;z-index:2147481050!important;
  display:flex!important;align-items:center!important;gap:7px!important;max-width:230px!important;height:40px!important;padding:4px 9px 4px 4px!important;
  border:1px solid var(--gc-safe-line,var(--line,#314158))!important;border-radius:22px!important;background:var(--gc-safe-surface2,#202938)!important;
  color:var(--gc-safe-text,#fff)!important;box-shadow:0 10px 34px rgba(0,0,0,.48)!important;cursor:pointer!important;
}
.pmMinimizedDock.hidden{display:none!important}
.pmMinimizedDock img{width:31px!important;height:31px!important;border-radius:50%!important;object-fit:cover!important}
.pmMinimizedDock span{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-size:10px!important;font-weight:800!important}
.pmMinimizedDock b{display:grid!important;place-items:center!important;min-width:18px!important;height:18px!important;padding:0 5px!important;border-radius:999px!important;background:var(--gc-private-notify,#5c8cff)!important;color:#fff!important;font-size:9px!important}

@media(max-width:700px){
  #privateInboxModal .gcPrivateMenuCard{top:62px!important;right:6px!important;width:min(320px,calc(100vw - 12px))!important;max-height:calc(100dvh - 70px)!important;border-radius:9px!important}
  #privateInboxModal .privateInboxList{max-height:calc(100dvh - 128px)!important}
  #pmModal .gcPmCard{
    left:5px!important;right:5px!important;bottom:5px!important;width:auto!important;max-width:none!important;
    height:min(620px,calc(100dvh - 72px))!important;max-height:calc(100dvh - 72px)!important;min-height:300px!important;border-radius:10px!important;
  }
  #pmModal .pmHead{height:42px!important;min-height:42px!important;flex-basis:42px!important;padding:4px 5px 4px 7px!important}
  #pmModal .pmHeadIdentity img{width:29px!important;height:29px!important;flex-basis:29px!important}
  #pmModal .pmCallActions button{width:29px!important;height:29px!important;min-width:29px!important;font-size:13px!important}
  #pmModal .pmMessages{padding:7px 5px!important}
  #pmModal .pmBubble{max-width:82%!important;padding:7px 8px 5px!important}
  #pmModal .pmBody{font-size:12.5px!important;line-height:1.34!important}
  #pmModal .pmMessageAvatar{width:25px!important;height:25px!important;flex-basis:25px!important;margin-bottom:11px!important}
  #pmModal .pmMessageTools{top:-28px!important}
  #pmModal .pmMessageTools button{width:25px!important;min-width:25px!important;height:25px!important}
  #pmModal .pmMessageTools{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
  #pmModal .pm.actionsOpen .pmMessageTools{opacity:1!important;visibility:visible!important;pointer-events:auto!important}
  #pmModal .pmBottom{padding:4px!important;gap:3px!important}
  #pmModal .pmTools button{width:30px!important;min-width:30px!important;height:34px!important}
  #pmModal .pmComposer{grid-template-columns:minmax(0,1fr) 34px!important}
  #pmModal .pmComposer textarea{height:34px!important;min-height:34px!important;padding:7px 10px!important;font-size:12px!important}
  #pmModal .pmComposer button[type="submit"]{width:34px!important;height:34px!important;min-width:34px!important}
  .pmMinimizedDock{right:8px!important;bottom:148px!important;max-width:190px!important;height:38px!important}
  .pmMinimizedDock img{width:29px!important;height:29px!important}
}
@media(max-width:380px){
  #pmModal .gcPmCard{left:3px!important;right:3px!important;bottom:3px!important;height:calc(100dvh - 64px)!important;max-height:calc(100dvh - 64px)!important}
  #pmModal .pmBubble{max-width:84%!important}
  #pmModal .pmCallActions{gap:1px!important}
  #pmModal .pmCallActions button{width:27px!important;height:27px!important;min-width:27px!important}
}

/* GEWOONCHATTEN 18-08-2026 — private polish r2: inbox avatar, desktop PM actions, dock placement */
#privateInboxModal .inboxOpen{
  grid-template-columns:38px minmax(0,1fr) auto!important;
  gap:8px!important;
  min-height:50px!important;
  padding:5px 5px 5px 7px!important;
}
#privateInboxModal .inboxOpen .uAvatar{
  width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;
  display:grid!important;place-items:center!important;overflow:hidden!important;padding:2px!important;margin:0!important;
  border:1px solid rgba(255,255,255,.16)!important;border-radius:50%!important;background:#263244!important;
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 2px 8px rgba(0,0,0,.24)!important;
}
#privateInboxModal .inboxOpen .uAvatar img{
  display:block!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;
  margin:0!important;padding:0!important;border:0!important;border-radius:50%!important;object-fit:cover!important;object-position:center!important;
}
#privateInboxModal .gcPrivateRowName b{font-size:11.5px!important;line-height:1.12!important}
#privateInboxModal .gcPrivateRowName small{margin-top:3px!important}

/* Desktop/laptop: one tidy ••• control; actions open as a compact popover instead of floating over the text. */
#pmModal .pmActionToggle{display:none!important}
@media(min-width:701px){
  #pmModal .pmBubble{padding-right:32px!important}
  #pmModal .pmActionToggle{
    position:absolute!important;display:grid!important;place-items:center!important;right:5px!important;top:5px!important;z-index:6!important;
    width:23px!important;height:21px!important;min-width:23px!important;padding:0!important;margin:0!important;border:0!important;border-radius:7px!important;
    background:transparent!important;color:#b9c5d5!important;font-size:11px!important;font-weight:900!important;letter-spacing:-1px!important;line-height:1!important;
    opacity:.42!important;visibility:visible!important;pointer-events:auto!important;cursor:pointer!important;transition:opacity .12s ease,background .12s ease!important;
  }
  #pmModal .pm:hover .pmActionToggle,#pmModal .pm:focus-within .pmActionToggle,#pmModal .pm.actionsOpen .pmActionToggle{
    opacity:1!important;visibility:visible!important;pointer-events:auto!important;
  }
  #pmModal .pmActionToggle:hover,#pmModal .pm.actionsOpen .pmActionToggle{background:rgba(255,255,255,.09)!important;color:#fff!important}
  #pmModal .pmMessageTools,
  #pmModal .pm:hover .pmMessageTools,
  #pmModal .pm:focus-within .pmMessageTools{
    right:3px!important;left:auto!important;top:calc(100% + 4px)!important;bottom:auto!important;z-index:20!important;
    width:auto!important;max-width:156px!important;min-height:28px!important;height:auto!important;
    display:flex!important;flex-wrap:nowrap!important;align-items:center!important;justify-content:flex-end!important;gap:1px!important;
    padding:2px 3px!important;margin:0!important;border:1px solid var(--gc-safe-line,var(--line,#314158))!important;border-radius:9px!important;
    background:color-mix(in srgb,var(--gc-safe-surface2,#202938) 96%,#000 4%)!important;box-shadow:0 8px 22px rgba(0,0,0,.42)!important;
    opacity:0!important;visibility:hidden!important;pointer-events:none!important;transform:translateY(-2px)!important;
  }
  #pmModal .pm.actionsOpen .pmMessageTools{
    opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:translateY(0)!important;
  }
  #pmModal .pmMessageTools button{
    width:24px!important;min-width:24px!important;height:24px!important;min-height:24px!important;padding:0!important;margin:0!important;border-radius:6px!important;font-size:10px!important;
  }
  #pmModal .pmMessageTools .gcTranslateTargetBtn{width:19px!important;min-width:19px!important;padding:0!important;margin:0!important;font-size:8px!important}
  #pmModal .pmMessageTools .pmReactionChip{width:auto!important;min-width:28px!important;padding:0 5px!important}
}

/* Desktop minimized PM: as low as possible. Mobile position stays exactly as before. */
.pmMinimizedDock{bottom:12px!important}
@media(max-width:700px){
  .pmMinimizedDock{bottom:148px!important}
}


/* GEWOONCHATTEN 18-08-2026 — notification navigation + readable game cards + UI text scale control */
.notification.notificationNavigable{cursor:pointer!important;position:relative!important;transition:border-color .14s ease,background .14s ease,transform .14s ease!important}
.notification.notificationNavigable:hover{border-color:color-mix(in srgb,var(--gc-accent,var(--gold,#dcb85f)) 55%,var(--gc-safe-line,var(--line,#314158)))!important;background:color-mix(in srgb,var(--gc-safe-surface2,#202938) 92%,var(--gc-accent,var(--gold,#dcb85f)) 8%)!important}
.notification.notificationNavigable:focus-visible{outline:2px solid var(--gc-accent,var(--gold,#dcb85f))!important;outline-offset:2px!important}
.notificationOpenHint{display:block!important;width:max-content!important;max-width:100%!important;margin-top:5px!important;color:#8fb8ff!important;font-weight:800!important;line-height:1.1!important}
.notification.notificationNavigable>button{position:relative!important;z-index:3!important}

/* Keep the game cards compact, but give the question/letters enough room to be readable. */
.msg .body.gcGameMessageBody{width:min(470px,100%)!important;max-width:min(470px,100%)!important}
.msg .body.gcGameMessageBody .gcChatGameCard{display:grid!important;width:100%!important;max-width:100%!important;padding:8px 10px!important;gap:5px!important;border-radius:10px!important}
.gcGameMessageBody .gcCompactGameHead{gap:8px!important;min-height:20px!important}.gcGameMessageBody .gcCompactGameHead strong{font-size:12.5px!important}.gcGameMessageBody .gcCompactGameHead span{font-size:9px!important;padding:2px 5px!important}
.gcGameMessageBody .gcChatWordMask{min-height:35px!important;padding:6px 8px!important;border:1px solid #2d4663!important;border-radius:8px!important;background:#0b1724!important;font-size:17px!important;line-height:1.15!important;letter-spacing:.06em!important}
.gcGameMessageBody .gcCompactGameHint{font-size:11.5px!important;line-height:1.3!important;color:#c4d0df!important}
.gcGameMessageBody .gcChatQuizQuestion{min-height:38px!important;padding:7px 8px!important;margin:0!important;border-radius:8px!important;font-size:11.5px!important;line-height:1.25!important}
.gcGameMessageBody .gcChatQuizAnswers{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important}.gcGameMessageBody .gcChatQuizAnswers button{min-height:36px!important;padding:6px 8px!important;font-size:10.5px!important;line-height:1.18!important;border-radius:8px!important}
@media(max-width:900px){.msg .body.gcGameMessageBody{width:min(430px,calc(100vw - 92px))!important;max-width:calc(100vw - 92px)!important}.gcGameMessageBody .gcChatWordMask{font-size:16px!important}.gcGameMessageBody .gcCompactGameHint{font-size:11px!important}.gcGameMessageBody .gcChatQuizQuestion{font-size:11px!important}.gcGameMessageBody .gcChatQuizAnswers button{font-size:10px!important;min-height:35px!important}}
@media(max-width:360px){.msg .body.gcGameMessageBody{width:calc(100vw - 82px)!important;max-width:calc(100vw - 82px)!important}.gcGameMessageBody .gcChatQuizAnswers{grid-template-columns:1fr!important}}

.gcUiTextScaleCard{display:grid!important;gap:10px!important;padding:13px!important;border:1px solid var(--gc-safe-border,var(--line,#314158))!important;border-radius:12px!important;background:var(--gc-safe-surface,#121b28)!important}
.gcUiTextScaleHead{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:12px!important}.gcUiTextScaleHead>div{display:grid!important;gap:3px!important;min-width:0!important}.gcUiTextScaleHead small{color:var(--gc-safe-muted,var(--muted,#9aa8ba))!important;line-height:1.35!important}.gcUiTextScaleHead>strong{flex:0 0 auto!important;padding:6px 9px!important;border:1px solid var(--gc-safe-border,var(--line,#314158))!important;border-radius:9px!important;background:var(--gc-safe-surface2,#202938)!important;color:var(--gc-safe-text,#fff)!important}
.gcUiTextScaleSlider{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto!important;align-items:center!important;gap:9px!important;font-size:10px!important;color:var(--gc-safe-muted,var(--muted,#9aa8ba))!important}.gcUiTextScaleSlider input{width:100%!important;padding:0!important}.gcUiTextScalePreview{display:flex!important;align-items:center!important;gap:8px!important;min-height:40px!important;padding:8px 10px!important;border:1px dashed #39506b!important;border-radius:9px!important;background:#0e1723!important}.gcUiTextScalePreview span{color:#b6c3d3!important}
@media(max-width:600px){.gcUiTextScaleHead{align-items:stretch!important}.gcUiTextScaleHead>strong{align-self:flex-start!important}.gcUiTextScalePreview{align-items:flex-start!important;flex-direction:column!important;gap:2px!important}}


/* GEWOONCHATTEN 18-08-2026 — PM scrollbar/avatar/read receipt + server-wide reaction polish */
#pmModal .pmMessages{
  scrollbar-width:thin!important;
  scrollbar-color:#607089 #0b111a!important;
}
#pmModal .pmMessages::-webkit-scrollbar{width:7px!important;height:7px!important}
#pmModal .pmMessages::-webkit-scrollbar-track{background:#0b111a!important;border-radius:999px!important}
#pmModal .pmMessages::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#6f8099,#45546a)!important;
  border:1px solid #111a27!important;border-radius:999px!important;
}
#pmModal .pmMessages::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#d7b95f,#866f35)!important}
#pmModal .pmMessages::-webkit-scrollbar-corner{background:transparent!important}

#pmModal img.pmMessageAvatar{
  display:block!important;
  width:29px!important;height:29px!important;min-width:29px!important;min-height:29px!important;max-width:29px!important;max-height:29px!important;
  flex:0 0 29px!important;aspect-ratio:1/1!important;box-sizing:border-box!important;
  margin:0 0 10px!important;padding:0!important;overflow:hidden!important;
  object-fit:cover!important;object-position:center center!important;
  border-radius:999px!important;clip-path:circle(50% at 50% 50%)!important;
  background:#1d2837!important;border:1px solid rgba(255,255,255,.20)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.09) inset,0 2px 7px rgba(0,0,0,.30)!important;
}
#pmModal .pm.mine img.pmMessageAvatar{border-color:rgba(114,227,176,.30)!important}

#pmModal .pmReceipt{
  display:inline-flex!important;align-items:center!important;gap:3px!important;
  min-height:16px!important;padding:1px 5px!important;border:1px solid rgba(214,226,241,.20)!important;border-radius:999px!important;
  background:rgba(7,13,21,.30)!important;color:#e7eef8!important;
  font-size:8.5px!important;font-weight:800!important;line-height:1!important;white-space:nowrap!important;
}
#pmModal .pmReceipt b{font-size:9px!important;line-height:1!important;color:#dce8f6!important}
#pmModal .pmReceipt em{font-style:normal!important;font-weight:800!important;letter-spacing:.01em!important}
#pmModal .pmReceipt.read{border-color:rgba(114,227,176,.38)!important;background:rgba(63,151,112,.16)!important;color:#82efbd!important}
#pmModal .pmReceipt.read b{color:#82efbd!important}
@media(max-width:700px){
  #pmModal img.pmMessageAvatar{width:28px!important;height:28px!important;min-width:28px!important;min-height:28px!important;max-width:28px!important;max-height:28px!important;flex-basis:28px!important}
  #pmModal .pmReceipt{font-size:8px!important;padding:1px 4px!important}
}

/* GEWOONCHATTEN 18-08-2026 — Cody-style reaction picker + clearer PM actions */
.reactionPicker{
  width:min(320px,calc(100vw - 16px))!important;
  max-width:320px!important;
  padding:0!important;
  overflow:hidden!important;
  border:1px solid #34435a!important;
  border-radius:10px!important;
  background:#182130!important;
  box-shadow:0 14px 38px rgba(0,0,0,.56)!important;
}
.reactionPickerHead{
  min-height:34px!important;
  padding:7px 8px 6px 10px!important;
  border-bottom:1px solid #34435a!important;
  background:#1b2535!important;
}
.reactionPickerHead b{font-size:11px!important;line-height:1.1!important;color:#f1f5fb!important}
.reactionPickerHead button{
  width:24px!important;height:24px!important;min-width:24px!important;
  border-radius:7px!important;color:#c4cfdd!important;font-size:15px!important;
}
.reactionPickerHead button:hover{background:rgba(255,255,255,.08)!important;color:#fff!important}
.reactionPickerGrid{
  display:grid!important;
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  gap:2px!important;
  padding:6px 7px 7px!important;
  background:#151e2b!important;
}
.reactionPicker .codyReactionChoice{
  width:100%!important;min-width:0!important;height:54px!important;min-height:54px!important;
  padding:3px 1px!important;margin:0!important;
  display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:1px!important;
  border:0!important;border-radius:8px!important;background:transparent!important;color:#dce5f0!important;
  transform:none!important;
}
.reactionPicker .codyReactionChoice:hover,.reactionPicker .codyReactionChoice:focus-visible{
  background:#222d3f!important;transform:none!important;outline:none!important;
}
.reactionPicker .codyReactionChoice img{width:31px!important;height:31px!important;max-width:31px!important;max-height:31px!important;object-fit:contain!important;display:block!important}
.reactionPicker .codyReactionChoice span{font-size:8px!important;line-height:1.05!important;color:#b9c5d5!important;white-space:nowrap!important}
.gcReactionPickerFooter{
  display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:5px!important;
  padding:6px 7px 7px!important;border-top:1px solid #34435a!important;background:#182130!important;
}
.gcReactionPickerFooter button{
  min-height:30px!important;height:30px!important;padding:0 9px!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:5px!important;
  border:1px solid #3a4a61!important;border-radius:8px!important;background:#111a27!important;color:#e8eef7!important;
  font-size:9px!important;font-weight:800!important;cursor:pointer!important;
}
.gcReactionPickerFooter button:hover{border-color:#5d789c!important;background:#202d40!important;color:#fff!important}
.gcReactionTranslateAlt{padding:0 8px!important}.gcReactionTranslateAlt span{display:inline!important}

/* Make the small private-message action popup easier to see/click without enlarging the bubble. */
#pmModal .pmMessageTools,
#pmModal .pm:hover .pmMessageTools,
#pmModal .pm:focus-within .pmMessageTools{
  max-width:220px!important;
  min-height:35px!important;
  padding:3px 4px!important;
  gap:3px!important;
  border-radius:10px!important;
  box-shadow:0 9px 26px rgba(0,0,0,.48)!important;
}
#pmModal .pmMessageTools button{
  width:30px!important;min-width:30px!important;height:29px!important;min-height:29px!important;
  border-radius:7px!important;font-size:12px!important;
}
#pmModal .pmMessageTools .gcTranslateTargetBtn{width:23px!important;min-width:23px!important;font-size:9px!important}
#pmModal .pmMessageTools .pmReactionChip{width:auto!important;min-width:34px!important;padding:0 7px!important}
#pmModal .pmActionToggle{min-width:27px!important;width:27px!important;height:24px!important;font-size:12px!important}

@media(max-width:700px){
  .reactionPicker{width:min(318px,calc(100vw - 12px))!important;max-width:318px!important}
  .reactionPickerGrid{grid-template-columns:repeat(6,minmax(0,1fr))!important;padding:6px 5px!important;gap:1px!important}
  .reactionPicker .codyReactionChoice{height:52px!important;min-height:52px!important}
  .reactionPicker .codyReactionChoice img{width:29px!important;height:29px!important;max-width:29px!important;max-height:29px!important}
  .reactionPicker .codyReactionChoice span{font-size:7.5px!important}
  .gcReactionPickerFooter{padding:5px 6px 6px!important}
  .gcReactionPickerFooter button{height:31px!important;min-height:31px!important;font-size:9px!important}
  #pmModal .pmMessageTools{max-width:220px!important;min-height:36px!important;padding:3px 4px!important;gap:3px!important}
  #pmModal .pmMessageTools button{width:31px!important;min-width:31px!important;height:30px!important;min-height:30px!important;font-size:12px!important}
}
@media(max-width:350px){
  .gcReactionTranslateAlt span{display:none!important}
  .gcReactionPickerFooter{grid-template-columns:minmax(0,1fr) 38px!important}
}


/* 18-08-2026 — compacte kamerstatusmeldingen + geen openbare oogcounter.
   PM ✓/✓✓ gebruikt .pmReceipt en blijft bewust volledig intact. */
#messages .messageSeen{display:none!important}
#messages .gcPresenceEvent{
  display:flex!important;grid-template-columns:none!important;align-items:center!important;gap:8px!important;
  min-height:0!important;width:fit-content!important;max-width:calc(100% - 18px)!important;
  margin:3px 6px!important;padding:4px 7px!important;border:0!important;border-radius:8px!important;
  background:color-mix(in srgb,var(--gc-safe-surface2,#151d29) 72%,transparent)!important;
  box-shadow:none!important;color:var(--gc-safe-text,#eef3fb)!important;
}
#messages .gcPresenceEvent:hover{background:color-mix(in srgb,var(--gc-safe-surface2,#151d29) 82%,transparent)!important}
.gcPresenceIcon{display:grid!important;place-items:center!important;width:22px!important;height:22px!important;min-width:22px!important;border-radius:50%!important;background:color-mix(in srgb,var(--gc-safe-line,#344055) 55%,transparent)!important;font-size:13px!important;line-height:1!important}
.gcPresenceText{font-size:11px!important;line-height:1.25!important;color:var(--gc-safe-muted,#aeb8c8)!important;white-space:normal!important;overflow-wrap:anywhere!important}
.gcPresenceText b{color:var(--gc-safe-text,#eef3fb)!important;font-weight:850!important}
@media(max-width:600px){
  #messages .gcPresenceEvent{margin:2px 4px!important;padding:4px 6px!important;gap:7px!important;max-width:calc(100% - 8px)!important}
  .gcPresenceIcon{width:21px!important;height:21px!important;min-width:21px!important;font-size:12px!important}
  .gcPresenceText{font-size:10.5px!important}
}

/* GEWOONCHATTEN 18-08-2026 — duidelijke Cody-style privéberichtopties + directe PM-reacties */
#pmModal .pmBubble{overflow:visible!important}
#pmModal .pmActionToggle{
  display:grid!important;place-items:center!important;
  width:30px!important;min-width:30px!important;height:27px!important;min-height:27px!important;
  right:5px!important;top:5px!important;padding:0!important;
  border:1px solid rgba(255,255,255,.28)!important;border-radius:8px!important;
  background:rgba(8,14,24,.32)!important;color:#fff!important;font-size:13px!important;font-weight:900!important;
  opacity:.88!important;visibility:visible!important;pointer-events:auto!important;z-index:7!important;
}
#pmModal .pmActionToggle:hover,#pmModal .pm.actionsOpen .pmActionToggle{
  opacity:1!important;background:#26344a!important;border-color:#91a7c4!important;box-shadow:0 0 0 2px rgba(255,255,255,.06)!important;
}
#pmModal .pmBubble{padding-right:40px!important}
#pmModal .pmMessageTools,
#pmModal .pm:hover .pmMessageTools,
#pmModal .pm:focus-within .pmMessageTools{
  position:absolute!important;top:36px!important;bottom:auto!important;
  width:238px!important;max-width:min(238px,calc(100vw - 24px))!important;min-height:0!important;
  display:grid!important;grid-template-columns:minmax(0,1fr) 36px!important;gap:0!important;
  padding:6px!important;margin:0!important;
  border:1px solid #35445b!important;border-radius:11px!important;
  background:#202838!important;box-shadow:0 15px 38px rgba(0,0,0,.58)!important;
  opacity:0!important;visibility:hidden!important;pointer-events:none!important;z-index:2147481800!important;
  overflow:visible!important;
}
#pmModal .pm.mine .pmMessageTools{right:0!important;left:auto!important}
#pmModal .pm.theirs .pmMessageTools{left:0!important;right:auto!important}
#pmModal .pm.actionsOpen .pmMessageTools{
  opacity:1!important;visibility:visible!important;pointer-events:auto!important;
}
#pmModal .pmQuickReactionRow{
  grid-column:1/-1!important;display:grid!important;grid-template-columns:repeat(6,1fr)!important;gap:2px!important;
  padding:2px 2px 7px!important;margin:0 0 5px!important;border-bottom:1px solid rgba(255,255,255,.10)!important;
}
#pmModal .pmQuickReaction{
  width:34px!important;min-width:34px!important;height:34px!important;min-height:34px!important;padding:0!important;
  display:grid!important;place-items:center!important;border:0!important;border-radius:8px!important;background:transparent!important;
  font-size:21px!important;line-height:1!important;cursor:pointer!important;transform:none!important;
}
#pmModal .pmQuickReaction:hover,#pmModal .pmQuickReaction:focus-visible{
  background:rgba(255,255,255,.10)!important;transform:scale(1.08)!important;outline:none!important;
}
#pmModal .pmMessageTools>.gcTranslateBtn{
  grid-column:1!important;grid-row:auto!important;width:100%!important;min-width:0!important;height:44px!important;min-height:44px!important;
  display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:10px!important;padding:0 10px!important;
  border:0!important;border-radius:8px 0 0 8px!important;background:transparent!important;color:#f3f6fb!important;font-size:16px!important;
}
#pmModal .pmMessageTools>.gcTranslateBtn::after{
  content:'Vertalen';font-size:11px!important;font-weight:850!important;color:#f4f7fb!important;
}
#pmModal .pmMessageTools>.gcTranslateTargetBtn{
  grid-column:2!important;width:36px!important;min-width:36px!important;height:44px!important;min-height:44px!important;
  border:0!important;border-radius:0 8px 8px 0!important;background:transparent!important;color:#b9c5d5!important;font-size:12px!important;
}
#pmModal .pmMessageTools>.gcTranslateBtn:hover,#pmModal .pmMessageTools>.gcTranslateTargetBtn:hover{background:rgba(255,255,255,.08)!important;color:#fff!important}
#pmModal .pmToolRow{
  grid-column:1/-1!important;width:100%!important;min-width:0!important;height:46px!important;min-height:46px!important;
  display:grid!important;grid-template-columns:30px minmax(0,1fr)!important;align-items:center!important;gap:8px!important;
  padding:0 8px!important;border:0!important;border-radius:8px!important;background:transparent!important;color:#eef3fa!important;text-align:left!important;
}
#pmModal .pmToolRow:hover{background:rgba(255,255,255,.08)!important}
#pmModal .pmToolIcon{display:grid!important;place-items:center!important;font-size:15px!important;color:#8fb3ff!important}
#pmModal .pmToolCopy{display:flex!important;flex-direction:column!important;align-items:flex-start!important;min-width:0!important;line-height:1.05!important}
#pmModal .pmToolCopy b{font-size:11px!important;color:#f4f7fb!important;font-weight:850!important}
#pmModal .pmToolCopy small{margin-top:2px!important;font-size:8.5px!important;color:#aab6c7!important;font-weight:600!important}
#pmModal .pmDeleteRow .pmToolIcon{color:#86a8ff!important}
#pmModal .pmReportRow .pmToolIcon{color:#f0b85b!important}
#pmModal .pmReactionSummary{
  display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:3px!important;flex-wrap:wrap!important;
  padding:3px 0 0!important;margin:0!important;background:transparent!important;
}
#pmModal .pm.theirs .pmReactionSummary{justify-content:flex-start!important}
#pmModal .pmReactionSummary .pmReactionChip{
  display:inline-flex!important;align-items:center!important;gap:3px!important;width:auto!important;min-width:30px!important;height:22px!important;min-height:22px!important;
  padding:0 6px!important;border:1px solid rgba(255,255,255,.17)!important;border-radius:999px!important;background:rgba(7,13,21,.26)!important;color:#fff!important;font-size:11px!important;
}
#pmModal .pmReactionSummary .pmReactionChip b{font-size:8px!important;color:#d8e1ed!important}
@media(max-width:700px){
  #pmModal .pmActionToggle{width:32px!important;min-width:32px!important;height:30px!important;min-height:30px!important;font-size:14px!important}
  #pmModal .pmBubble{padding-right:42px!important}
  #pmModal .pmMessageTools,#pmModal .pm:hover .pmMessageTools,#pmModal .pm:focus-within .pmMessageTools{
    top:39px!important;width:248px!important;max-width:min(248px,calc(100vw - 18px))!important;padding:7px!important;
  }
  #pmModal .pmQuickReaction{width:36px!important;min-width:36px!important;height:36px!important;min-height:36px!important;font-size:22px!important}
  #pmModal .pmMessageTools>.gcTranslateBtn,#pmModal .pmMessageTools>.gcTranslateTargetBtn{height:46px!important;min-height:46px!important}
  #pmModal .pmToolRow{height:48px!important;min-height:48px!important}
}

/* GEWOONCHATTEN 18-08-2026 — PM menu repair r2
   Keep the Cody-style action card readable. Translation language selection stays in
   the existing full translate modal instead of being squeezed into the message card. */
#pmModal .pmMessageTools,
#pmModal .pm:hover .pmMessageTools,
#pmModal .pm:focus-within .pmMessageTools{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  gap:4px!important;
  width:250px!important;
  max-width:min(250px,calc(100vw - 22px))!important;
  min-width:0!important;
  padding:7px!important;
  overflow:visible!important;
}
#pmModal .pmQuickReactionRow{
  order:1!important;
  width:100%!important;
  min-width:0!important;
  display:grid!important;
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  align-items:center!important;
  gap:3px!important;
  padding:2px 1px 7px!important;
  margin:0 0 2px!important;
}
#pmModal .pmQuickReaction{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  height:35px!important;
  min-height:35px!important;
  overflow:visible!important;
}
#pmModal .pmTranslateMenuRow{
  order:2!important;
  width:100%!important;
  min-width:0!important;
  height:43px!important;
  min-height:43px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 40px!important;
  align-items:stretch!important;
  gap:0!important;
  margin:0!important;
  padding:0!important;
  border-radius:9px!important;
  overflow:hidden!important;
  background:transparent!important;
}
#pmModal .pmTranslateMenuRow>.gcTranslateBtn,
#pmModal .pmTranslateMenuRow>.gcTranslateTargetBtn{
  position:static!important;
  inset:auto!important;
  writing-mode:horizontal-tb!important;
  text-orientation:mixed!important;
  word-break:normal!important;
  overflow-wrap:normal!important;
  white-space:nowrap!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#f3f6fb!important;
  box-shadow:none!important;
  opacity:1!important;
}
#pmModal .pmTranslateMenuRow>.gcTranslateBtn{
  width:100%!important;
  min-width:0!important;
  height:43px!important;
  min-height:43px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:9px!important;
  padding:0 11px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  font-size:11px!important;
  font-weight:850!important;
  text-align:left!important;
}
#pmModal .pmTranslateMenuRow>.gcTranslateBtn::after{content:none!important;display:none!important}
#pmModal .pmTranslateMenuRow>.gcTranslateTargetBtn{
  width:40px!important;
  min-width:40px!important;
  max-width:40px!important;
  height:43px!important;
  min-height:43px!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  border-left:1px solid rgba(255,255,255,.08)!important;
  font-size:12px!important;
}
#pmModal .pmTranslateMenuRow:hover,
#pmModal .pmTranslateMenuRow:focus-within{background:rgba(255,255,255,.075)!important}
#pmModal .pmToolRow{order:3!important;width:100%!important;min-width:0!important}
#pmModal .pmReportRow{order:4!important}
/* The real language chooser is a full modal; always keep it above the floating PM window/menu. */
#gcTranslatePicker.modal:not(.hidden){z-index:2147483600!important}
#gcTranslatePicker .gcTranslatePickerCard{z-index:1!important}
@media(max-width:700px){
  #pmModal .pmMessageTools,
  #pmModal .pm:hover .pmMessageTools,
  #pmModal .pm:focus-within .pmMessageTools{
    width:258px!important;
    max-width:min(258px,calc(100vw - 14px))!important;
    padding:8px!important;
  }
  #pmModal .pmQuickReaction{height:38px!important;min-height:38px!important;font-size:23px!important}
  #pmModal .pmTranslateMenuRow,
  #pmModal .pmTranslateMenuRow>.gcTranslateBtn,
  #pmModal .pmTranslateMenuRow>.gcTranslateTargetBtn{height:46px!important;min-height:46px!important}
  #pmModal .pmTranslateMenuRow>.gcTranslateBtn{font-size:12px!important;padding-left:12px!important}
}

/* GEWOONCHATTEN 18-08-2026 — PM stability/menu repair R3
   Final authoritative PM action layout. Keeps the menu readable and prevents
   translated controls from collapsing into vertical text. */
#pmModal .pmMessageTools,
#pmModal .pm:hover .pmMessageTools,
#pmModal .pm:focus-within .pmMessageTools{
  position:absolute!important;
  top:38px!important;
  bottom:auto!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  gap:4px!important;
  width:238px!important;
  min-width:238px!important;
  max-width:min(238px,calc(100vw - 18px))!important;
  min-height:0!important;
  padding:8px!important;
  margin:0!important;
  border:1px solid #3a4a62!important;
  border-radius:12px!important;
  background:#202938!important;
  box-shadow:0 16px 42px rgba(0,0,0,.62)!important;
  overflow:hidden!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  z-index:2147481800!important;
}
#pmModal .pm.mine .pmMessageTools{right:0!important;left:auto!important}
#pmModal .pm.theirs .pmMessageTools{left:0!important;right:auto!important}
#pmModal .pm.actionsOpen .pmMessageTools{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}
#pmModal .pmMessageTools .pmQuickReactionRow{
  order:1!important;
  display:grid!important;
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  align-items:center!important;
  width:100%!important;
  min-width:0!important;
  gap:3px!important;
  padding:0 0 7px!important;
  margin:0 0 3px!important;
  border-bottom:1px solid rgba(255,255,255,.10)!important;
}
#pmModal .pmMessageTools button.pmQuickReaction{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  height:36px!important;
  min-height:36px!important;
  padding:0!important;
  margin:0!important;
  display:grid!important;
  place-items:center!important;
  border:0!important;
  border-radius:8px!important;
  background:transparent!important;
  font-size:21px!important;
  line-height:1!important;
  writing-mode:horizontal-tb!important;
  text-orientation:mixed!important;
  overflow:visible!important;
}
#pmModal .pmMessageTools button.pmQuickReaction:hover,
#pmModal .pmMessageTools button.pmQuickReaction:focus-visible{background:rgba(255,255,255,.10)!important;outline:none!important}
#pmModal .pmMessageTools button.pmTranslateAction{
  order:2!important;
  position:static!important;
  inset:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  width:100%!important;
  min-width:100%!important;
  max-width:100%!important;
  height:42px!important;
  min-height:42px!important;
  padding:0 11px!important;
  margin:0!important;
  border:0!important;
  border-radius:9px!important;
  background:transparent!important;
  color:#f4f7fb!important;
  font-size:11px!important;
  font-weight:850!important;
  line-height:1!important;
  text-align:left!important;
  white-space:nowrap!important;
  word-break:keep-all!important;
  overflow-wrap:normal!important;
  writing-mode:horizontal-tb!important;
  text-orientation:mixed!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  box-shadow:none!important;
}
#pmModal .pmMessageTools button.pmTranslateAction:hover,
#pmModal .pmMessageTools button.pmTranslateAction:focus-visible{background:rgba(255,255,255,.08)!important;outline:none!important}
/* R3 no longer embeds a language target/dropdown inside the narrow PM menu. */
#pmModal .pmMessageTools .pmTranslateMenuRow,
#pmModal .pmMessageTools .gcTranslateTargetBtn{display:none!important}
#pmModal .pmMessageTools button.pmToolRow{
  order:3!important;
  position:static!important;
  width:100%!important;
  min-width:100%!important;
  max-width:100%!important;
  height:44px!important;
  min-height:44px!important;
  padding:0 9px!important;
  margin:0!important;
  display:grid!important;
  grid-template-columns:30px minmax(0,1fr)!important;
  align-items:center!important;
  justify-items:start!important;
  gap:8px!important;
  border:0!important;
  border-radius:9px!important;
  background:transparent!important;
  color:#eef3fa!important;
  white-space:normal!important;
  writing-mode:horizontal-tb!important;
  text-orientation:mixed!important;
  overflow:visible!important;
}
#pmModal .pmMessageTools button.pmToolRow:hover{background:rgba(255,255,255,.08)!important}
#pmModal .pmMessageTools button.pmReportRow{order:4!important}
#pmModal .pmMessageTools .pmToolIcon{width:30px!important;min-width:30px!important;height:auto!important;display:grid!important;place-items:center!important;font-size:15px!important}
#pmModal .pmMessageTools .pmToolCopy{display:flex!important;flex-direction:column!important;align-items:flex-start!important;min-width:0!important;width:100%!important;writing-mode:horizontal-tb!important}
#pmModal .pmMessageTools .pmToolCopy b{font-size:11px!important;line-height:1.1!important;white-space:nowrap!important}
#pmModal .pmMessageTools .pmToolCopy small{font-size:8.5px!important;line-height:1.15!important;white-space:nowrap!important}
/* PM history is synchronized in-place by JS; disable scroll anchoring so polling cannot tug the viewport. */
#pmModal .pmMessages{overflow-anchor:none!important;scroll-behavior:auto!important}
@media(max-width:700px){
  #pmModal .pmMessageTools,
  #pmModal .pm:hover .pmMessageTools,
  #pmModal .pm:focus-within .pmMessageTools{
    top:41px!important;
    width:244px!important;
    min-width:244px!important;
    max-width:min(244px,calc(100vw - 14px))!important;
    padding:8px!important;
  }
  #pmModal .pmMessageTools button.pmQuickReaction{height:38px!important;min-height:38px!important;font-size:22px!important}
  #pmModal .pmMessageTools button.pmTranslateAction{height:44px!important;min-height:44px!important;font-size:12px!important}
  #pmModal .pmMessageTools button.pmToolRow{height:46px!important;min-height:46px!important}
}

/* === 2026-08-18 PM menu R4: cite + single translate + delete-for-everyone === */
#pmModal .pmMessageTools,
#pmModal .pm:hover .pmMessageTools,
#pmModal .pm:focus-within .pmMessageTools{
  width:270px!important;
  min-width:270px!important;
  max-width:min(270px,calc(100vw - 18px))!important;
  padding:9px!important;
  gap:3px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  border:1px solid #3b4b62!important;
  border-radius:13px!important;
  background:#202938!important;
  box-shadow:0 18px 48px rgba(0,0,0,.62)!important;
  overflow:hidden!important;
}
#pmModal .pmMessageTools .pmQuickReactionRow{
  order:1!important;
  display:grid!important;
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  gap:3px!important;
  width:100%!important;
  padding:0 0 8px!important;
  margin:0 0 3px!important;
  border-bottom:1px solid rgba(255,255,255,.1)!important;
}
#pmModal .pmMessageTools button.pmQuickReaction{
  width:100%!important;min-width:0!important;height:38px!important;min-height:38px!important;
  padding:0!important;border:0!important;border-radius:8px!important;background:transparent!important;
  font-size:22px!important;line-height:1!important;
}
#pmModal .pmMessageTools button.pmQuoteRow{order:2!important}
#pmModal .pmMessageTools button.pmTranslateAction{order:3!important}
#pmModal .pmMessageTools button.pmDeleteRow{order:4!important}
#pmModal .pmMessageTools button.pmReportRow{order:5!important}
#pmModal .pmMessageTools button.pmToolRow,
#pmModal .pmMessageTools button.pmTranslateAction{
  position:static!important;
  width:100%!important;min-width:100%!important;max-width:100%!important;
  height:48px!important;min-height:48px!important;
  margin:0!important;padding:0 10px!important;
  border:0!important;border-radius:9px!important;background:transparent!important;
  color:#f3f6fb!important;box-shadow:none!important;
  writing-mode:horizontal-tb!important;text-orientation:mixed!important;
}
#pmModal .pmMessageTools button.pmToolRow{
  display:grid!important;grid-template-columns:31px minmax(0,1fr)!important;
  align-items:center!important;justify-items:start!important;gap:8px!important;
}
#pmModal .pmMessageTools button.pmTranslateAction{
  display:flex!important;align-items:center!important;justify-content:flex-start!important;
  font-size:12px!important;font-weight:850!important;line-height:1!important;
  white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
}
/* Older PM CSS added a second 'Vertalen' label with ::after. R4 explicitly removes it. */
#pmModal .pmMessageTools button.pmTranslateAction::after,
#pmModal .pmMessageTools>.gcTranslateBtn::after{content:none!important;display:none!important}
#pmModal .pmMessageTools .gcTranslateTargetBtn,
#pmModal .pmMessageTools .pmTranslateMenuRow{display:none!important}
#pmModal .pmMessageTools button.pmToolRow:hover,
#pmModal .pmMessageTools button.pmTranslateAction:hover{background:rgba(255,255,255,.08)!important}
#pmModal .pmMessageTools .pmToolIcon{
  width:31px!important;min-width:31px!important;display:grid!important;place-items:center!important;
  font-size:16px!important;line-height:1!important;
}
#pmModal .pmMessageTools .pmToolCopy{display:flex!important;flex-direction:column!important;align-items:flex-start!important;min-width:0!important;width:100%!important}
#pmModal .pmMessageTools .pmToolCopy b{font-size:12px!important;line-height:1.15!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;max-width:100%!important}
#pmModal .pmMessageTools .pmToolCopy small{font-size:9px!important;line-height:1.2!important;color:#b9c4d4!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;max-width:100%!important}
#pmModal .pmMessageTools .pmDeleteRow .pmToolIcon{color:#ff6f84!important}

/* Quote shown inside a private message. */
#pmModal .pmReplyQuote{
  display:flex!important;flex-direction:column!important;gap:2px!important;
  margin:0 0 6px!important;padding:6px 8px!important;
  border-left:3px solid var(--gc-accent,#e0b84f)!important;
  border-radius:7px!important;background:rgba(0,0,0,.18)!important;
  max-width:100%!important;overflow:hidden!important;
}
#pmModal .pmReplyQuote b{font-size:9px!important;line-height:1.15!important;color:#f1c75b!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
#pmModal .pmReplyQuote span{font-size:10px!important;line-height:1.25!important;color:#d7deea!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
#pmModal .pmReplyQuote em{font-style:normal!important;color:#9aa8ba!important}

/* Composer reply/citation preview. */
#pmModal .pmReplyBar{
  flex:0 0 auto!important;
  display:grid!important;grid-template-columns:28px minmax(0,1fr) 30px!important;
  align-items:center!important;gap:7px!important;
  margin:0 8px 6px!important;padding:7px 8px!important;
  border:1px solid #34465f!important;border-left:3px solid var(--gc-accent,#e0b84f)!important;
  border-radius:9px!important;background:#162131!important;color:#f3f6fb!important;
}
#pmModal .pmReplyBar.hidden{display:none!important}
#pmModal .pmReplyBar .pmReplyMark{display:grid!important;place-items:center!important;font-size:16px!important;color:#f1c75b!important}
#pmModal .pmReplyBar>div{min-width:0!important;display:flex!important;flex-direction:column!important;gap:1px!important}
#pmModal .pmReplyBar b{font-size:10px!important;line-height:1.1!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
#pmModal .pmReplyBar small{font-size:9px!important;line-height:1.15!important;color:#aeb9c8!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
#pmModal .pmReplyBar button{width:28px!important;height:28px!important;border:0!important;border-radius:8px!important;background:transparent!important;color:#cdd6e2!important;font-size:18px!important;cursor:pointer!important}
#pmModal .pmReplyBar button:hover{background:rgba(255,255,255,.08)!important;color:#fff!important}

@media(max-width:700px){
  #pmModal .pmMessageTools,
  #pmModal .pm:hover .pmMessageTools,
  #pmModal .pm:focus-within .pmMessageTools{
    width:258px!important;min-width:258px!important;max-width:min(258px,calc(100vw - 16px))!important;
    padding:8px!important;
  }
  #pmModal .pmMessageTools button.pmToolRow,
  #pmModal .pmMessageTools button.pmTranslateAction{height:46px!important;min-height:46px!important}
  #pmModal .pmReplyBar{margin-left:6px!important;margin-right:6px!important}
}


/* gc-20260819-mobile-notifications-cody-media */
/* Mobiel: meldingenlijst heeft altijd een eigen echte touch-scrolllaag. */
@media(max-width:760px){
  #notificationsModal:not(.hidden){
    display:flex!important;align-items:center!important;justify-content:center!important;
    overflow:hidden!important;touch-action:none!important;
    padding:max(6px,env(safe-area-inset-top)) 6px max(6px,env(safe-area-inset-bottom))!important;
  }
  #notificationsModal .notificationCard{
    display:flex!important;flex-direction:column!important;
    width:100%!important;height:calc(100dvh - max(12px,env(safe-area-inset-top)) - max(12px,env(safe-area-inset-bottom)))!important;
    max-height:calc(100dvh - max(12px,env(safe-area-inset-top)) - max(12px,env(safe-area-inset-bottom)))!important;
    min-height:0!important;overflow:hidden!important;touch-action:none!important;
  }
  #notificationsModal .notificationHead{flex:0 0 auto!important}
  #notificationsModal .pushSettings{flex:0 0 auto!important;max-height:32dvh!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch!important;touch-action:pan-y!important}
  #notificationsModal .notificationList{
    display:flex!important;flex-direction:column!important;flex:1 1 0!important;
    height:auto!important;min-height:0!important;max-height:none!important;
    overflow-y:scroll!important;overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch!important;touch-action:pan-y!important;
    overscroll-behavior-y:contain!important;pointer-events:auto!important;
    padding:4px 2px max(18px,env(safe-area-inset-bottom))!important;
  }
}

/* Giphy / YouTube: compacte CodyChat-achtige zoekflow. */
.giphyCodyCard,.youtubeCodyCard{width:min(560px,calc(100vw - 24px))!important;overflow:hidden!important}
.gcMediaTabs{display:flex;gap:5px;margin:12px 0 8px;padding:4px;border:1px solid #2d3c52;border-radius:12px;background:#0d1520}
.gcMediaTabs button{flex:1;min-height:38px;border:0;border-radius:9px;background:transparent;color:#aab7c9;font-weight:800;cursor:pointer}
.gcMediaTabs button.active{background:#263851;color:#fff;box-shadow:inset 0 0 0 1px #47617f}
.gcMediaSearch{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}
.gcMediaSearch input{width:100%;min-width:0;min-height:42px;border:1px solid #30425a;border-radius:11px;background:#0b131e;color:#fff;padding:9px 12px;outline:none}
.gcMediaSearch input:focus{border-color:#5b7da5;box-shadow:0 0 0 2px rgba(91,125,165,.18)}
#giphyModal .giphyResults{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important;max-height:390px!important;margin-top:9px!important;padding:1px 3px 6px 1px!important;-webkit-overflow-scrolling:touch!important}
#giphyModal .giphyPick{border:1px solid #26384f!important;border-radius:9px!important;aspect-ratio:1.55/1!important;cursor:pointer!important;transition:transform .12s,border-color .12s!important}
#giphyModal .giphyPick:hover{transform:translateY(-1px);border-color:#6684a8!important}
#giphyModal .giphyPick.sticker{background:linear-gradient(135deg,#132033,#0c141f)!important}
#giphyModal .giphyPick.sticker img{object-fit:contain!important;padding:5px!important}
.giphyAdultRow{display:flex!important;align-items:center!important;gap:7px!important;margin:8px 0 0!important;padding:8px 10px!important;border-radius:10px!important;background:#181923!important;border:1px solid #4b3443!important}
.giphyAdultRow.hidden{display:none!important}.giphyAdultRow small{margin-left:auto;color:#a99aa4}
.youtubeResults{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-height:390px;overflow-y:auto;margin-top:10px;padding:1px 3px 6px 1px;-webkit-overflow-scrolling:touch}
.youtubeResult{display:block;min-width:0;padding:0!important;border:1px solid #2d3d53!important;border-radius:10px!important;overflow:hidden;background:#0e1723!important;color:#fff!important;text-align:left!important;cursor:pointer!important}
.youtubeResult img{width:100%;aspect-ratio:16/9;display:block;object-fit:cover;background:#05080d}
.youtubeResult span{display:block;padding:8px 9px}.youtubeResult b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.25;font-size:12px}.youtubeResult small{display:block;margin-top:4px;color:#90a2b8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.youtubeDirect{margin-top:10px;border-top:1px solid #2c3b50;padding-top:8px}.youtubeDirect summary{cursor:pointer;color:#a7b5c7;font-weight:800;padding:7px 2px}.youtubeDirect[open] summary{margin-bottom:7px}.youtubeDirect .youtubePreview{margin-top:8px}
#pmModal .pmTools #pmGiphy{font-size:8px!important;font-weight:900!important;letter-spacing:-.2px!important}
#pmModal .pmTools #pmYoutube{font-size:13px!important;font-weight:900!important}

@media(max-width:560px){
  .giphyCodyCard,.youtubeCodyCard{width:calc(100vw - 12px)!important;max-height:calc(100dvh - 12px)!important}
  .gcMediaSearch{grid-template-columns:minmax(0,1fr) 86px!important;gap:6px!important}
  #giphyModal .giphyResults,.youtubeResults{max-height:48dvh!important;gap:5px!important}
  .youtubeResult b{font-size:11px}.youtubeResult span{padding:7px}
  .giphyAdultRow{align-items:flex-start!important;flex-wrap:wrap!important}.giphyAdultRow small{flex:1 1 100%;margin-left:23px!important}
}

/* 2026-08-19 media polish R2: compactere Giphy previews zonder uitrekken. */
#giphyModal .giphyResults{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:7px!important;
  max-height:360px!important;
}
#giphyModal .giphyPick{
  width:100%!important;
  aspect-ratio:16/10!important;
  min-height:0!important;
  max-height:none!important;
}
#giphyModal .giphyPick img{
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-height:none!important;
  object-fit:cover!important;
}
#giphyModal .giphyPick.sticker img{
  object-fit:contain!important;
}
@media(max-width:560px){
  #giphyModal .giphyResults{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;
    max-height:46dvh!important;
  }
  #giphyModal .giphyPick{aspect-ratio:16/10!important}
}

/* 19-08-2026 R5 — private mobile overlay stability */
#pmModal.gcPmSurfaceSuspended .pmCard{
  pointer-events:none!important;
  user-select:none!important;
  -webkit-user-select:none!important;
}
#pmModal.gcPmSurfaceSuspended .pmMessageTools{display:none!important}
#pmModal .pmMessages{
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch!important;
}
@media(max-width:900px){
  #pmModal.gcPmSurfaceSuspended .pmCard{
    touch-action:none!important;
  }
}


/* GC R6 — Gastregistratie + harde PM overlay-freeze */
.gcGuestRegisterBanner{width:calc(100% - 24px);margin:12px 12px 0;border:0;border-radius:12px;padding:10px 12px;display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:7px;background:#23852b;color:#fff;text-align:left;cursor:pointer;box-shadow:0 5px 18px rgba(0,0,0,.18)}
.gcGuestRegisterBanner span{font-size:18px;line-height:1}.gcGuestRegisterBanner b{font-size:13px;white-space:nowrap}.gcGuestRegisterBanner em{font-style:normal;font-size:12px;opacity:.96}.gcGuestRegisterBanner i{font-style:normal;font-size:24px;line-height:1}.gcGuestRegisterBanner:hover{filter:brightness(1.06)}
.gcGuestRegisterCard{width:min(520px,calc(100vw - 24px));max-height:min(88vh,760px);overflow:auto}.gcGuestRegisterForm{display:grid;gap:13px}.gcGuestRegisterForm>label,.gcGuestRegisterTwo label{display:grid;gap:7px;font-weight:800}.gcGuestRegisterForm input,.gcGuestRegisterForm select{width:100%;min-height:46px;border-radius:8px}.gcGuestRegisterTwo{display:grid;grid-template-columns:1fr 1fr;gap:12px}.gcGuestRegisterTwo label>small{font-weight:700;opacity:.75}.gcGuestPasswordRow{display:grid;grid-template-columns:1fr 46px;gap:6px}.gcGuestPasswordRow button{border-radius:8px;border:1px solid var(--border);background:var(--panel-2,#182231);color:inherit}.gcGuestRegisterCheck{display:flex!important;grid-template-columns:none!important;align-items:flex-start;gap:9px!important;font-weight:600!important}.gcGuestRegisterCheck input{width:18px!important;min-height:18px!important;margin-top:2px}.gcGuestRegisterCheck small{opacity:.75}.gcGuestRegisterError{min-height:18px;color:#ff9b9b;font-weight:700;font-size:12px}.gcGuestRegisterActions{display:flex;gap:8px;justify-content:flex-start;flex-wrap:wrap}
#pmModal.gcPmSurfaceSuspended .pmMessages,#pmModal.gcPmSurfaceSuspended .pmComposer,#pmModal.gcPmSurfaceSuspended .pmHead{pointer-events:none!important}#pmModal.gcPmSurfaceSuspended .pmMessages{scroll-behavior:auto!important}
@media(max-width:900px){.gcGuestRegisterBanner{width:calc(100% - 16px);margin:8px 8px 0;grid-template-columns:auto 1fr auto;gap:6px}.gcGuestRegisterBanner b{white-space:normal}.gcGuestRegisterBanner em{grid-column:2/3}.gcGuestRegisterTwo{grid-template-columns:1fr}.gcGuestRegisterCard{width:calc(100vw - 16px);max-height:calc(100dvh - 32px);padding:18px}.gcGuestRegisterActions>*{flex:1 1 140px}}

/* GC R7 — zichtbare Lid-kamers + nette toegangsmelding */
.rooms .roomShell.roomLocked{border-color:rgba(228,189,99,.22)!important;background:linear-gradient(180deg,rgba(228,189,99,.045),rgba(255,255,255,.012))!important}
.rooms .roomShell.roomLocked .room{cursor:pointer!important}
.rooms .roomShell.roomLocked .roomArrow{font-size:14px!important;color:#d6b55f!important}
.roomAccessTag{display:inline-flex!important;align-items:center!important;width:max-content!important;margin:4px 0 0!important;padding:3px 7px!important;border-radius:999px!important;background:rgba(228,189,99,.11)!important;border:1px solid rgba(228,189,99,.26)!important;color:#ead08a!important;font-size:9px!important;font-weight:900!important;letter-spacing:.02em!important}
.roomGameStrip.isLocked,.roomGameActions.isLocked{opacity:.72}
.gcRoomAccessOverlay{position:fixed;inset:0;z-index:12000;display:grid;place-items:center;padding:18px;background:rgba(3,8,15,.78);backdrop-filter:blur(4px)}
.gcRoomAccessCard{position:relative;width:min(420px,96vw);padding:24px 22px 20px;text-align:center;border:1px solid var(--gc-line,#36465c);border-radius:20px;background:linear-gradient(180deg,var(--gc-panel2,#202a39),var(--gc-panel,#141d29));box-shadow:0 28px 90px rgba(0,0,0,.5);color:var(--gc-text,#f5f7fb)}
.gcRoomAccessIcon{width:62px;height:62px;margin:0 auto 12px;display:grid;place-items:center;border-radius:18px;background:rgba(228,189,99,.12);border:1px solid rgba(228,189,99,.25);font-size:31px}
.gcRoomAccessCard>small{display:block;color:#d6b55f;font-size:10px;font-weight:950;letter-spacing:.12em}
.gcRoomAccessCard h3{margin:6px 0 8px;font-size:22px}
.gcRoomAccessCard p{margin:0 auto;max-width:340px;color:var(--gc-muted,#aeb8c8);line-height:1.55}
.gcRoomAccessClose{position:absolute;right:12px;top:10px;width:36px;height:36px;border:0;border-radius:10px;background:transparent;color:inherit;font-size:25px}
.gcRoomAccessActions{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;margin-top:20px}
@media(max-width:600px){.gcRoomAccessOverlay{padding:12px}.gcRoomAccessCard{padding:22px 16px 17px;border-radius:17px}.gcRoomAccessActions{display:grid;grid-template-columns:1fr}.gcRoomAccessActions button{width:100%}}


/* GC R8 — mobile private-chat + keyboard stability + invisible touch scrollbars */
@media(max-width:900px){
  /* Mobiel blijft alles met de vinger scrollbaar, maar zonder zichtbare desktop-achtige balken. */
  #messages,
  #pmModal .pmMessages,
  #notificationsModal .notificationList,
  #notificationsModal .pushSettings,
  #giphyModal .giphyResults,
  #youtubeModal .youtubeResults,
  .rooms,.users,.modalCard,.gcGuestRegisterCard{
    scrollbar-width:none!important;
    -ms-overflow-style:none!important;
  }
  #messages::-webkit-scrollbar,
  #pmModal .pmMessages::-webkit-scrollbar,
  #notificationsModal .notificationList::-webkit-scrollbar,
  #notificationsModal .pushSettings::-webkit-scrollbar,
  #giphyModal .giphyResults::-webkit-scrollbar,
  #youtubeModal .youtubeResults::-webkit-scrollbar,
  .rooms::-webkit-scrollbar,.users::-webkit-scrollbar,.modalCard::-webkit-scrollbar,.gcGuestRegisterCard::-webkit-scrollbar{
    width:0!important;height:0!important;display:none!important;background:transparent!important;
  }
}

@media(max-width:700px){
  /* Vast, compacter privévenster. svh blijft stabiel wanneer het mobiele toetsenbord opent. */
  #pmModal .gcPmCard{
    left:8px!important;right:8px!important;bottom:max(8px,env(safe-area-inset-bottom))!important;
    width:auto!important;max-width:none!important;
    height:min(420px,calc(100svh - 118px))!important;
    max-height:min(420px,calc(100svh - 118px))!important;
    min-height:min(300px,calc(100svh - 118px))!important;
    transform:none!important;
  }
  /* 16px voorkomt de mobiele browser-zoom bij focus; de fysieke controlhoogte blijft compact. */
  #pmModal .pmComposer textarea{
    font-size:16px!important;line-height:20px!important;
    height:36px!important;min-height:36px!important;max-height:72px!important;
    -webkit-text-size-adjust:100%!important;
  }
  #giphyModal .gcMediaSearch input,
  #youtubeModal .gcMediaSearch input,
  #youtubeModal #youtubeUrl,
  .gcGuestRegisterCard input,
  .gcGuestRegisterCard select{
    font-size:16px!important;
    -webkit-text-size-adjust:100%!important;
  }
  /* Media-vensters gebruiken een stabiele kleine viewport en rekken niet mee met keyboard/dvh. */
  #giphyModal .giphyCodyCard,
  #youtubeModal .youtubeCodyCard{
    max-height:min(650px,calc(100svh - 16px))!important;
  }
  #giphyModal .giphyResults,
  #youtubeModal .youtubeResults{
    max-height:min(360px,42svh)!important;
  }
}

@media(max-width:380px){
  #pmModal .gcPmCard{
    left:6px!important;right:6px!important;bottom:max(6px,env(safe-area-inset-bottom))!important;
    height:min(390px,calc(100svh - 104px))!important;
    max-height:min(390px,calc(100svh - 104px))!important;
    min-height:min(280px,calc(100svh - 104px))!important;
  }
}

/* GC R9 — presence rust + normale chat-GIFs + kamerkeuze na binnenkomst */
.msg img.giphyInline,
#pmModal .pmMessages img.giphyInline{
  display:block!important;
  width:auto!important;
  height:auto!important;
  max-width:min(360px,72vw)!important;
  max-height:280px!important;
  object-fit:contain!important;
  border-radius:11px!important;
}
@media(max-width:700px){
  .msg img.giphyInline,
  #pmModal .pmMessages img.giphyInline{
    max-width:min(250px,70vw)!important;
    max-height:230px!important;
    border-radius:10px!important;
  }
}

.gcEntryRoomOverlay{
  position:fixed;inset:0;z-index:11950;
  display:grid;place-items:start center;
  padding:clamp(28px,7vh,76px) 16px 24px;
  overflow:auto;overscroll-behavior:contain;
  background:linear-gradient(180deg,rgba(8,12,20,.97),rgba(10,14,22,.985));
  backdrop-filter:blur(8px);
}
.gcEntryRoomCard{
  width:min(720px,100%);overflow:hidden;
  border:1px solid var(--gc-line,#33445a);border-radius:19px;
  background:linear-gradient(180deg,var(--gc-panel2,#202938),var(--gc-panel,#151d29));
  box-shadow:0 28px 90px rgba(0,0,0,.48);color:var(--gc-text,#f4f7fb);
}
.gcEntryRoomBrand{display:flex;align-items:center;gap:10px;padding:14px 17px;border-bottom:1px solid var(--gc-line,#33445a);background:rgba(255,255,255,.018)}
.gcEntryRoomBrand>span{width:37px;height:37px;display:grid;place-items:center;border-radius:10px;background:linear-gradient(145deg,#f3cb61,#a96d16);color:#15191f;font-size:12px;font-weight:1000;box-shadow:inset 0 1px 0 #fff4ba}
.gcEntryRoomBrand div{display:grid;gap:2px}.gcEntryRoomBrand small{font-size:8px;letter-spacing:.12em;color:var(--gc-accent,#e4bd63);font-weight:950}.gcEntryRoomBrand b{font-size:13px}
.gcEntryRoomIntro{padding:19px 20px 10px}.gcEntryRoomIntro>small{font-size:9px;letter-spacing:.13em;color:var(--gc-accent,#e4bd63);font-weight:950}.gcEntryRoomIntro h2{margin:4px 0 5px;font-size:25px}.gcEntryRoomIntro p{margin:0;color:var(--gc-muted,#aab5c5);font-size:11px;line-height:1.55}
.gcEntryRoomList{display:grid;gap:7px;padding:10px 16px 16px}
.gcEntryRoomChoice{width:100%;min-width:0;display:grid;grid-template-columns:48px minmax(0,1fr) auto 20px;align-items:center;gap:11px;padding:11px 12px;border:1px solid var(--gc-line,#33445a);border-radius:13px;background:rgba(255,255,255,.022);color:inherit;text-align:left;cursor:pointer;transition:transform .14s ease,border-color .14s ease,background .14s ease}
.gcEntryRoomChoice:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--gc-accent,#e4bd63) 48%,var(--gc-line,#33445a));background:rgba(255,255,255,.04)}
.gcEntryRoomChoice.isLocked{background:linear-gradient(90deg,rgba(228,189,99,.045),rgba(255,255,255,.015))}
.gcEntryRoomChoice.isLoading{opacity:.62;pointer-events:none}.gcEntryRoomOverlay.isBusy .gcEntryRoomChoice:not(.isLoading){pointer-events:none}
.gcEntryRoomIcon{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;background:#0f1723;border:1px solid rgba(255,255,255,.07);font-size:21px}
.gcEntryRoomCopy{min-width:0;display:grid;gap:3px}.gcEntryRoomCopy b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gcEntryRoomCopy small{font-size:9px;color:var(--gc-muted,#aab5c5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gcEntryRoomTag{display:inline-flex;align-items:center;justify-content:center;min-height:25px;padding:0 8px;border-radius:999px;border:1px solid rgba(228,189,99,.23);background:rgba(228,189,99,.08);color:#e5c673;font-size:8px;font-weight:950;white-space:nowrap;letter-spacing:.04em}.gcEntryRoomChoice>i{font-style:normal;font-size:21px;color:#9faabb}
.gcEntryRoomFoot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 18px;border-top:1px solid var(--gc-line,#33445a);color:var(--gc-muted,#aab5c5);font-size:9px}.gcEntryRoomFoot b{color:#e8edf5}.gcEntryRoomStatus{min-height:0;padding:0 18px 12px;color:#e1c56d;font-size:9px;font-weight:800}.gcEntryRoomStatus:empty{display:none}
@media(max-width:600px){
  .gcEntryRoomOverlay{padding:max(14px,env(safe-area-inset-top)) 8px max(12px,env(safe-area-inset-bottom));scrollbar-width:none}.gcEntryRoomOverlay::-webkit-scrollbar{display:none}
  .gcEntryRoomCard{border-radius:15px}.gcEntryRoomIntro{padding:16px 14px 8px}.gcEntryRoomIntro h2{font-size:21px}.gcEntryRoomIntro p{font-size:10px}.gcEntryRoomList{padding:8px 9px 11px;gap:6px}
  .gcEntryRoomChoice{grid-template-columns:42px minmax(0,1fr) auto 14px;gap:8px;padding:9px 8px;border-radius:11px}.gcEntryRoomIcon{width:39px;height:39px;border-radius:10px;font-size:19px}.gcEntryRoomCopy b{font-size:12px}.gcEntryRoomCopy small{font-size:8px}.gcEntryRoomTag{font-size:7px;padding:0 6px;min-height:22px}.gcEntryRoomChoice>i{font-size:18px}.gcEntryRoomFoot{padding:9px 11px;font-size:8px}
}

/* === GC R10 — Cody-formaat media + private addonmenu + stabiele Cody PM op alle devices === */
/* CodyChat referentie: boxed private = 400x400, main chat image ~=100px hoog, private image ~=70px hoog. */
#pmModal .gcPmCard{
  width:400px!important;
  height:400px!important;
  max-width:calc(100vw - 24px)!important;
  max-height:calc(100dvh - 76px)!important;
  min-height:280px!important;
}
#pmModal .pmBottom{position:relative!important}
#pmModal .pmLegacyAddonButton{display:none!important}
#pmModal .pmTools #pmPlus[aria-expanded="true"]{background:rgba(228,189,99,.14)!important;color:var(--gc-accent,#e4bd63)!important}
#pmModal .pmAddonMenu{
  position:absolute!important;
  left:4px!important;
  bottom:46px!important;
  z-index:80!important;
  width:250px!important;
  max-width:calc(100vw - 28px)!important;
  display:grid!important;
  gap:3px!important;
  padding:7px!important;
  border:1px solid var(--gc-safe-line,var(--line,#34465f))!important;
  border-radius:12px!important;
  background:var(--gc-safe-surface2,#202938)!important;
  box-shadow:0 18px 48px rgba(0,0,0,.58)!important;
}
#pmModal .pmAddonMenu.hidden{display:none!important}
#pmModal .pmAddonMenu>button{
  width:100%!important;
  min-width:0!important;
  min-height:44px!important;
  display:grid!important;
  grid-template-columns:34px minmax(0,1fr)!important;
  align-items:center!important;
  gap:8px!important;
  padding:6px 8px!important;
  margin:0!important;
  border:0!important;
  border-radius:9px!important;
  background:transparent!important;
  color:var(--gc-safe-text,#fff)!important;
  text-align:left!important;
  cursor:pointer!important;
}
#pmModal .pmAddonMenu>button:hover,#pmModal .pmAddonMenu>button:focus-visible{background:rgba(255,255,255,.08)!important;outline:none!important}
#pmModal .pmAddonMenu>button.hidden{display:none!important}
#pmModal .pmAddonMenu>button>span{width:30px;height:30px;display:grid;place-items:center;border-radius:8px;background:#121b28;border:1px solid rgba(255,255,255,.07);font-size:15px;font-weight:900;color:#efc65e}
#pmModal .pmAddonMenu>button>div{min-width:0;display:grid;gap:1px}
#pmModal .pmAddonMenu>button b{font-size:11px!important;line-height:1.1!important;color:#f5f7fb!important}
#pmModal .pmAddonMenu>button small{font-size:8.5px!important;line-height:1.2!important;color:#aab6c7!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
#pmModal .pmAddonEmpty{padding:10px 8px;text-align:center;color:#aeb8c8;font-size:9px}
#pmModal .pmAddonEmpty.hidden{display:none!important}

/* Exact compacter CodyChat-achtig formaat voor Giphy in de berichtenstroom. */
.msg img.giphyInline{
  display:block!important;
  width:auto!important;
  height:100px!important;
  max-width:100%!important;
  max-height:100px!important;
  object-fit:contain!important;
  border-radius:10px!important;
}
#pmModal .pmMessages img.giphyInline{
  display:block!important;
  width:auto!important;
  height:70px!important;
  max-width:100%!important;
  max-height:70px!important;
  object-fit:contain!important;
  border-radius:8px!important;
}

@media(max-width:700px){
  /* Cody-style mobiele privébox: compact, niet schermvullend en intern scrollend. */
  #pmModal .gcPmCard{
    left:auto!important;
    right:6px!important;
    bottom:max(6px,env(safe-area-inset-bottom))!important;
    top:auto!important;
    width:min(360px,calc(100vw - 12px))!important;
    max-width:calc(100vw - 12px)!important;
    height:min(400px,calc(100svh - 86px))!important;
    max-height:min(400px,calc(100svh - 86px))!important;
    min-height:min(280px,calc(100svh - 86px))!important;
    transform:none!important;
  }
  #pmModal .pmHead{height:40px!important;min-height:40px!important;flex-basis:40px!important}
  #pmModal .pmMessages{min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior:contain!important}
  #pmModal .pmBottom{flex:0 0 auto!important;padding:4px!important;gap:3px!important}
  #pmModal .pmTools button{width:31px!important;min-width:31px!important;height:36px!important}
  #pmModal .pmComposer{grid-template-columns:minmax(0,1fr) 36px!important}
  /* 16px is bewust: iOS Safari zoomt focusvelden onder 16px automatisch in. */
  #pmModal .pmComposer textarea{
    font-size:16px!important;
    line-height:20px!important;
    height:36px!important;
    min-height:36px!important;
    max-height:64px!important;
    -webkit-text-size-adjust:100%!important;
    touch-action:manipulation!important;
  }
  #pmModal .pmAddonMenu{left:2px!important;bottom:44px!important;width:min(246px,calc(100vw - 24px))!important}
  .msg img.giphyInline{height:100px!important;max-height:100px!important;max-width:100%!important}
  #pmModal .pmMessages img.giphyInline{height:70px!important;max-height:70px!important;max-width:100%!important}
}

/* Wanneer het iPhone/Android toetsenbord opent gebruikt PM dezelfde visualViewport-authoriteit als de mainchat.
   De box mag dan alleen kleiner worden om boven het toetsenbord te passen; nooit groter of ingezoomd worden. */
@media(max-width:700px){
  html.gcKeyboardOpen #pmModal:not(.hidden) .gcPmCard{
    top:calc(var(--gc-cody-vv-top,0px) + 4px)!important;
    bottom:auto!important;
    height:min(400px,calc(var(--gc-cody-vv-height,100dvh) - 8px))!important;
    max-height:min(400px,calc(var(--gc-cody-vv-height,100dvh) - 8px))!important;
    min-height:min(220px,calc(var(--gc-cody-vv-height,100dvh) - 8px))!important;
  }
}


/* =========================================================
   HOTFIX R11.1 — R10-safe UI polish recovery
   Deze regels raken GEEN PM/Giphy/message media-afmetingen.
   ========================================================= */
.shareInviteCard{width:min(700px,calc(100vw - 24px))!important;padding:22px!important;border-radius:22px!important;border:1px solid rgba(120,143,173,.24)!important;background:radial-gradient(circle at right top,rgba(228,184,83,.08),transparent 34%),linear-gradient(180deg,#17202d 0%,#111924 100%)!important;box-shadow:0 28px 80px rgba(0,0,0,.52)!important}
.shareInviteCard .modalTitle{padding-right:44px!important;margin-bottom:14px!important}.shareInviteCard .modalTitle p{max-width:60ch!important}.shareInviteCard .modalClose{top:14px!important;right:14px!important;width:36px!important;height:36px!important;border-radius:12px!important;border:1px solid rgba(132,150,178,.22)!important;background:#101824!important;color:#d7dfeb!important;font-size:22px!important;line-height:1!important}.shareInviteCard .modalClose:hover{background:#162132!important;border-color:rgba(228,184,83,.45)!important;color:#fff!important}
.referralRewardInfo{display:flex!important;align-items:center!important;gap:10px!important;padding:13px 14px!important;border-radius:14px!important;border:1px solid rgba(228,184,83,.34)!important;background:linear-gradient(180deg,rgba(228,184,83,.12),rgba(228,184,83,.05))!important;color:#f1d78a!important;font-weight:700!important}
.shareLinkRow{grid-template-columns:minmax(0,1fr) auto!important;gap:10px!important;margin-top:9px!important}.shareLinkRow input{height:46px!important;border-radius:12px!important;background:#0d1520!important;font-weight:700!important}.shareLinkRow button{min-width:118px!important}
.referralStats{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important;margin:18px 0!important}.referralStats span{display:grid!important;gap:5px!important;min-height:92px!important;align-content:center!important;padding:14px 10px!important;border-radius:16px!important;border:1px solid rgba(118,138,167,.22)!important;background:linear-gradient(180deg,#0d1622,#111a27)!important}.referralStats b{font-size:30px!important;line-height:1!important}.referralStats small{font-size:12px!important}
.shareButtons{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important}.shareButtons>*{min-height:46px!important;border-radius:12px!important;padding:0 14px!important;font-weight:800!important;border:1px solid rgba(118,138,167,.24)!important;background:#172234!important;color:#eef2f8!important;text-decoration:none!important;transition:transform .14s ease,background .14s ease,border-color .14s ease!important}.shareButtons>*:hover{transform:translateY(-1px)!important;background:#1c2a3f!important;border-color:rgba(228,184,83,.42)!important}.shareButtons #shareNative{background:linear-gradient(135deg,#efc45b,#dbaa38)!important;color:#17120a!important;border-color:#e9c05a!important}.shareButtons #shareWhatsapp{background:#163222!important}.shareButtons #shareFacebook{background:#16263f!important}.shareButtons #shareTelegram{background:#123243!important}.shareButtons #shareX{background:#11151b!important}.shareButtons #shareEmail{background:#2b2238!important}
@media(max-width:700px){.shareButtons{grid-template-columns:1fr 1fr!important}.referralStats{grid-template-columns:1fr 1fr!important}}@media(max-width:460px){.shareButtons,.shareLinkRow{grid-template-columns:1fr!important}.shareLinkRow button{width:100%!important}.referralStats span{min-height:82px!important}}

.actionTray{border-radius:18px!important;border:1px solid rgba(120,142,172,.24)!important;background:radial-gradient(circle at right top,rgba(228,184,83,.08),transparent 34%),linear-gradient(180deg,#18212d 0%,#121a26 100%)!important;box-shadow:0 28px 80px rgba(0,0,0,.52)!important;padding:14px!important}
.actionTray .addonTrayHead{align-items:flex-start!important;padding:2px 2px 12px!important;border-bottom:1px solid rgba(124,143,170,.18)!important}.actionTray .addonTrayHead>div{gap:2px!important}.actionTray .addonTrayHead b{font-size:17px!important;letter-spacing:-.01em!important}.actionTray .addonTrayHead small{font-size:11px!important;color:#98a7b8!important}.actionTray #actionTrayClose{width:34px!important;height:34px!important;border-radius:11px!important;border:1px solid rgba(132,150,178,.22)!important;background:#0f1824!important}
.addonTrayQuick{display:grid!important;grid-template-columns:minmax(0,220px) minmax(0,1fr)!important;gap:12px!important;align-items:center!important;padding:12px 14px!important;margin:12px 0 10px!important;border-radius:16px!important;border:1px solid rgba(228,184,83,.22)!important;background:linear-gradient(90deg,rgba(228,184,83,.10),rgba(44,55,73,.28))!important}.addonSettingsLaunch{justify-content:center!important;min-height:48px!important;border-radius:12px!important;background:#182437!important;border:1px solid rgba(228,184,83,.25)!important;color:#fff!important;font-weight:850!important}.addonTrayQuick small{display:block!important;font-size:12px!important;line-height:1.45!important;color:#aab6c6!important}@media(max-width:700px){.addonTrayQuick{grid-template-columns:1fr!important}.addonTrayQuick small{display:block!important}}

.gcUserMenu{width:min(470px,96vw)!important;padding:18px!important;border-radius:22px!important;border:1px solid rgba(120,143,173,.24)!important;background:radial-gradient(circle at right top,rgba(228,184,83,.08),transparent 34%),linear-gradient(180deg,#171f2c 0%,#101823 100%)!important;box-shadow:0 28px 80px rgba(0,0,0,.55)!important}.gcUserMenu>header{padding:2px 44px 16px 2px!important;gap:14px!important;border-bottom:1px solid rgba(124,143,170,.18)!important}.gcUserMenu>header .uAvatar{width:58px!important;height:58px!important;flex:0 0 58px!important;padding:3px!important;border-radius:50%!important;background:linear-gradient(135deg,rgba(76,216,160,.95),rgba(60,130,255,.9))!important;box-shadow:0 10px 26px rgba(0,0,0,.28)!important}.gcUserMenu>header b{font-size:26px!important;line-height:1.04!important}.gcUserMenu>header small{font-size:13px!important;color:#9eb0c6!important}.gcUserMenuClose{right:14px!important;top:14px!important;width:36px!important;height:36px!important;border-radius:12px!important;border:1px solid rgba(132,150,178,.22)!important;background:#0f1824!important;color:#d7dfeb!important}.gcUserMenuGrid{gap:10px!important;margin-top:16px!important}.gcUserMenuGrid button{min-height:58px!important;padding:13px 14px!important;border-radius:14px!important;border:1px solid rgba(118,138,167,.24)!important;background:linear-gradient(180deg,#101925,#141f2d)!important;font-weight:800!important}.gcUserMenuGrid button:hover{border-color:rgba(228,184,83,.38)!important;background:linear-gradient(180deg,#142132,#18283b)!important}.gcUserMenuGrid button span{font-size:15px!important}.gcUserMenu .friendFriends{background:linear-gradient(180deg,rgba(20,105,67,.24),rgba(14,63,43,.34))!important;border-color:rgba(60,201,133,.40)!important;color:#9ff0c0!important}@media(max-width:520px){.gcUserMenu>header b{font-size:22px!important}.gcUserMenuGrid{grid-template-columns:1fr!important}.gcUserMenuGrid button{min-height:54px!important}}

.gcCompactPlayer{grid-template-columns:72px minmax(0,1fr) 118px 64px!important;min-height:84px!important;border-radius:18px!important;border:1px solid rgba(118,138,167,.24)!important;background:linear-gradient(180deg,#101721,#121b28)!important;box-shadow:0 16px 40px rgba(0,0,0,.34)!important}.gcMusicPlay{display:grid!important;place-items:center!important;align-self:center!important;justify-self:center!important;width:50px!important;height:50px!important;border-radius:50%!important;border:1px solid rgba(255,255,255,.10)!important;background:linear-gradient(180deg,#1c2330,#0f1520)!important;color:#f5f7fb!important;font-size:24px!important;box-shadow:0 10px 22px rgba(0,0,0,.28)!important}.gcMusicPlay:hover{border-color:rgba(228,184,83,.46)!important;background:linear-gradient(180deg,#222d3d,#131c29)!important}.gcMusicInfo{padding:10px 14px!important;border-left:1px solid rgba(255,255,255,.04)!important}.gcMusicInfo small{font-size:11px!important;color:#f6e2a3!important;letter-spacing:.04em!important}.gcMusicInfo strong{font-size:24px!important;line-height:1.1!important}.gcMusicInfo span{font-size:12px!important;opacity:.9!important}.gcMusicLive{padding:10px 8px!important;font-size:11px!important}.gcMusicLive input{width:92px!important}.gcMusicCover{width:54px!important;height:54px!important;margin-right:10px!important}.musicPlayerActions{gap:12px!important;margin-top:12px!important}.musicPlayerActions>*{min-height:44px!important;border-radius:12px!important}.radioCustom{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:10px!important;margin-top:12px!important}.radioCustom input{min-height:46px!important}.radioCustom button{min-width:130px!important}
@media(max-width:620px){.gcCompactPlayer{grid-template-columns:64px minmax(0,1fr)!important}.gcMusicPlay{width:44px!important;height:44px!important;font-size:21px!important}.gcMusicInfo strong{font-size:18px!important}.gcMusicInfo span{font-size:11px!important}.gcMusicLive,.gcMusicCover{grid-column:1/-1!important;justify-self:start!important;margin:0 0 10px 72px!important}.radioCustom{grid-template-columns:1fr!important}.radioCustom button{min-width:0!important;width:100%!important}}

/* =========================================================
   R13 — GC Welcome Tour 2.0
   Interactieve onboarding zonder chatfuncties te wijzigen.
   ========================================================= */
.gcTour{position:fixed;inset:0;z-index:2147482500;pointer-events:none}.gcTour>*{pointer-events:auto}.gcTourShade{position:absolute;inset:0;background:rgba(3,7,15,.82)!important;backdrop-filter:blur(3px) saturate(.8)!important}.gcTourFocus{position:fixed!important;border:2px solid #f0c85c!important;border-radius:16px!important;box-shadow:0 0 0 5px rgba(240,200,92,.16),0 0 0 9999px rgba(1,4,10,.16),0 0 36px rgba(240,200,92,.5)!important;transition:left .25s ease,top .25s ease,width .25s ease,height .25s ease!important;pointer-events:none!important;overflow:visible!important}.gcTourFocus>i{position:absolute;inset:-7px;border:1px solid rgba(255,231,160,.5);border-radius:20px;animation:gcTourPulse 1.8s ease-in-out infinite}@keyframes gcTourPulse{0%,100%{opacity:.35;transform:scale(.995)}50%{opacity:1;transform:scale(1.018)}}
.gcTourTip{position:fixed!important;width:min(430px,calc(100vw - 24px))!important;padding:0!important;border:1px solid rgba(132,151,181,.32)!important;border-radius:20px!important;background:radial-gradient(circle at 90% -10%,rgba(239,194,78,.12),transparent 38%),linear-gradient(180deg,#1a2432 0%,#121b27 100%)!important;color:#f6f8fb!important;box-shadow:0 28px 90px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.03)!important;overflow:hidden!important;transition:left .22s ease,top .22s ease!important}.gcTourTip.isCenter{width:min(470px,calc(100vw - 24px))!important}.gcTourTop{display:grid!important;grid-template-columns:54px minmax(0,1fr) 34px!important;gap:11px!important;align-items:center!important;padding:16px 16px 11px!important;background:linear-gradient(180deg,rgba(255,255,255,.025),transparent)!important}.gcTourIcon{width:52px;height:52px;display:grid;place-items:center;border-radius:15px;background:linear-gradient(145deg,#29384b,#182231);border:1px solid rgba(240,200,92,.34);box-shadow:0 10px 24px rgba(0,0,0,.28);font-size:25px}.gcTourTop>div{display:grid;gap:2px}.gcTourTop small{font-size:9px!important;font-weight:950!important;letter-spacing:.14em!important;color:#edc85f!important}.gcTourTop strong{font-size:11px;color:#91a2b8;font-weight:750}.gcTourTop button{width:34px!important;height:34px!important;min-height:34px!important;padding:0!important;border:1px solid rgba(126,144,170,.23)!important;border-radius:10px!important;background:#111a26!important;color:#c8d3e1!important;font-size:20px!important;line-height:1!important}.gcTourProgress{height:5px!important;margin:0 16px!important;border-radius:999px!important;background:#2c384a!important;overflow:hidden!important}.gcTourProgress i{display:block!important;height:100%!important;background:linear-gradient(90deg,#e8b940,#ff8a38)!important;border-radius:inherit!important;box-shadow:0 0 14px rgba(242,196,78,.35)!important;transition:width .3s ease!important}.gcTourDots{display:flex;gap:4px;padding:10px 16px 0!important}.gcTourDots i{height:4px;flex:1;border-radius:999px;background:#344255}.gcTourDots i.done{background:#63758b}.gcTourDots i.active{background:#efc654;box-shadow:0 0 8px rgba(239,198,84,.45)}.gcTourTip h3{margin:12px 16px 7px!important;font-size:22px!important;line-height:1.15!important;letter-spacing:-.02em!important}.gcTourTip>p{margin:0 16px!important;color:#b5c1d1!important;font-size:14px!important;line-height:1.58!important}.gcTourMiniTip{display:block;margin:13px 16px 0;padding:10px 12px;border:1px solid rgba(239,198,84,.22);border-radius:11px;background:rgba(239,198,84,.07);color:#eadba8;font-size:11px;line-height:1.45}.gcTourMiniTip:before{content:'💡 ';}.gcTourActions{display:flex!important;justify-content:space-between!important;align-items:center!important;gap:10px!important;margin:16px 16px 0!important;padding-top:14px!important;border-top:1px solid rgba(122,142,170,.18)!important}.gcTourActions>div{display:flex;gap:8px}.gcTourActions button{min-height:42px!important;padding:0 14px!important;border:1px solid rgba(129,146,171,.24)!important;border-radius:11px!important;background:linear-gradient(135deg,#ecc253,#dba83b)!important;color:#15120a!important;font-weight:900!important}.gcTourActions button.secondary{background:#243146!important;color:#e4eaf2!important}.gcTourActions button:disabled{opacity:.35!important}.gcTourKeys{display:block;padding:9px 16px 14px;color:#718299!important;font-size:9px!important;text-align:right}.gcTourRunning .gcProfileMenu,.gcTourRunning .actionTray,.gcTourRunning .emojiPanel{z-index:2147481000!important}
@media(max-width:620px){.gcTourTip,.gcTourTip.isCenter{left:8px!important;right:8px!important;bottom:calc(8px + env(safe-area-inset-bottom))!important;top:auto!important;width:auto!important;max-height:min(62dvh,520px)!important;overflow:auto!important;border-radius:18px!important}.gcTourTop{grid-template-columns:46px minmax(0,1fr) 32px!important;padding:13px 13px 10px!important}.gcTourIcon{width:44px;height:44px;border-radius:13px;font-size:22px}.gcTourTop button{width:32px!important;height:32px!important}.gcTourProgress{margin:0 13px!important}.gcTourDots{padding:8px 13px 0!important}.gcTourTip h3{margin:10px 13px 6px!important;font-size:19px!important}.gcTourTip>p{margin:0 13px!important;font-size:13px!important}.gcTourMiniTip{margin:11px 13px 0!important}.gcTourActions{display:grid!important;grid-template-columns:1fr!important;margin:13px 13px 0!important}.gcTourActions>div{display:grid!important;grid-template-columns:1fr 1fr!important}.gcTourActions>button{order:2}.gcTourActions button{width:100%!important;min-height:44px!important}.gcTourKeys{display:none!important}.gcTourFocus{border-radius:13px!important}}
@media(prefers-reduced-motion:reduce){.gcTourFocus>i{animation:none!important}.gcTourFocus,.gcTourTip{transition:none!important}}


/* =========================================================
   R14 — Mobile auth overflow + reCAPTCHA recovery
   Verbergt ongewenste telefoon-scrollbars, voorkomt horizontale overflow
   en houdt de "Ik ben geen robot"-controle zichtbaar op alle schermen.
   ========================================================= */
html,body{max-width:100%!important;overflow-x:hidden!important}
body.gcAuthActive,body.gcAuthActive #auth,body.gcAuthActive .authOverlay,body.gcAuthActive .authShell,body.gcAuthActive .authPanel,body.gcAuthActive .authForm{max-width:100vw!important;min-width:0!important;overflow-x:hidden!important;box-sizing:border-box!important}
body.gcAuthActive{overflow-y:auto!important;overscroll-behavior-y:contain!important;-webkit-overflow-scrolling:touch!important;scrollbar-width:none!important;-ms-overflow-style:none!important}
body.gcAuthActive::-webkit-scrollbar,body.gcAuthActive #auth::-webkit-scrollbar,body.gcAuthActive .authOverlay::-webkit-scrollbar,body.gcAuthActive .authPanel::-webkit-scrollbar{width:0!important;height:0!important;display:none!important;background:transparent!important}
body.gcAuthActive #auth{width:100%!important;padding:0!important;margin:0!important}
.authOverlay,.authShell,.authPanel,.authForm,.authField,.fieldControl,.fieldControl input,.fieldControl select,.authPrimary,.authGuest,.socialLoginBox,.socialLogin{min-width:0!important;max-width:100%!important}
.authPanel{padding-bottom:max(20px,env(safe-area-inset-bottom))!important}
.gcRecaptchaSlot{position:relative!important;width:100%!important;display:flex!important;justify-content:center!important;align-items:flex-start!important;min-height:86px!important;margin:6px auto 4px!important;overflow:visible!important;transform:none!important}
.gcRecaptchaSlot[hidden]{display:none!important}
.gcRecaptchaSlot>div{width:304px!important;max-width:304px!important;min-height:78px!important;margin:0 auto!important;transform-origin:top center!important}
.gcRecaptchaSlot iframe{max-width:100%!important}
.gcRecaptchaInlineError{width:min(304px,100%)!important;margin:8px auto 0!important}
.gcRecaptchaLoading,.gcRecaptchaLoadError{width:min(304px,100%)!important;min-height:52px!important;display:grid!important;place-items:center!important;padding:10px 12px!important;margin:0 auto!important;border:1px solid rgba(126,145,169,.26)!important;border-radius:12px!important;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012))!important;color:#bfc9d7!important;text-align:center!important;font-size:12px!important;line-height:1.45!important}
.gcRecaptchaLoadError{border-color:rgba(255,88,109,.34)!important;color:#ffd5db!important;background:rgba(102,24,39,.24)!important}
@media(max-width:560px){
  body.gcAuthActive #auth{min-height:100dvh!important}
  .authShell{width:100%!important}
  .gcRecaptchaSlot{min-height:76px!important}
  .gcRecaptchaSlot>div{transform:scale(.90)!important;margin-bottom:-8px!important}
}
@media(max-width:390px){
  .gcRecaptchaSlot>div{transform:scale(.84)!important;margin-bottom:-13px!important}
}


/* R14.1 — reCAPTCHA altijd zichtbaar zodra deze in Admin is ingeschakeld */
.gcRecaptchaSlot:not([hidden]){display:flex!important;visibility:visible!important;opacity:1!important;flex-direction:column!important;align-items:center!important;width:100%!important;min-height:78px!important;overflow:visible!important;z-index:2!important}
.gcRecaptchaSlot:not([hidden]) .g-recaptcha,.gcRecaptchaSlot:not([hidden]) iframe{visibility:visible!important;opacity:1!important}
.gcRecaptchaLoadError{cursor:pointer!important;user-select:none!important}
@media(max-width:560px){.gcRecaptchaSlot:not([hidden]){min-height:72px!important;margin-top:5px!important;margin-bottom:3px!important}}


/* =========================================================
   R14.2 — always-available human check fallback
   Google reCAPTCHA blijft voorkeursroute; GC-fallback voorkomt vastlopen.
   ========================================================= */


/* =========================================================
   R14.3 — Google reCAPTCHA only
   Geen alternatieve captcha/fallback. Alleen laden + retry van Google.
   ========================================================= */
.gcRecaptchaLoadError{display:grid!important;gap:7px!important;width:min(304px,100%)!important;min-height:78px!important;align-content:center!important;justify-items:center!important;padding:12px!important;text-align:center!important}
.gcRecaptchaLoadError b{font-size:12px!important;color:#ffd5db!important}.gcRecaptchaLoadError small{font-size:10px!important;color:#c8aeb3!important;line-height:1.4!important}.gcRecaptchaRetry{min-height:34px!important;padding:0 12px!important;border:1px solid rgba(255,255,255,.10)!important;border-radius:8px!important;background:#263349!important;color:#fff!important;font-weight:800!important;cursor:pointer!important}
.gcRecaptchaRetry:hover{background:#31415b!important}


/* R14.4 — Google reCAPTCHA direct bootstrap: vaste ruimte zonder layout-sprong */
.gcRecaptchaSlot{min-height:78px!important;height:auto!important;visibility:visible!important;opacity:1!important;contain:layout style!important}
.gcRecaptchaSlot[hidden]{display:none!important}
.gcRecaptchaSlot[data-recaptcha-ready="1"]{min-height:78px!important}
@media(max-width:560px){.gcRecaptchaSlot{min-height:72px!important}}

/* Compacte reCAPTCHA-validatie: fouttekst is een melding, geen tweede captcha-blok. */
.gcRecaptchaSlot.gcRecaptchaError{padding:5px 5px 6px!important;border:1px solid rgba(255,88,109,.82)!important;outline:0!important;border-radius:12px!important;background:rgba(79,18,32,.28)!important;box-shadow:0 0 0 3px rgba(255,88,109,.08)!important}
.gcRecaptchaSlot>.gcRecaptchaInlineError{display:flex!important;align-items:center!important;justify-content:flex-start!important;width:min(304px,100%)!important;max-width:304px!important;min-height:0!important;height:auto!important;margin:6px auto 0!important;padding:7px 9px!important;border:0!important;border-left:3px solid #ff667b!important;border-radius:7px!important;background:rgba(91,24,39,.72)!important;color:#ffe1e6!important;font-size:11px!important;font-weight:750!important;line-height:1.35!important;text-align:left!important;transform:none!important}
@media(max-width:560px){.gcRecaptchaSlot.gcRecaptchaError{padding:4px!important}.gcRecaptchaSlot>.gcRecaptchaInlineError{margin-top:5px!important;padding:7px 8px!important;font-size:11px!important}}


/* =========================================================
   R15 — alleen mobiele rondleiding stabiliteit
   Desktop spotlight blijft ongewijzigd. Mobiel gebruikt een vaste tourkaart.
   ========================================================= */
.gcTourMobileWhere{display:none}
@media(max-width:620px){
  .gcTour.gcTourMobile .gcTourFocus{display:none!important}
  .gcTour.gcTourMobile .gcTourShade{background:rgba(3,7,15,.72)!important;backdrop-filter:blur(2px) saturate(.88)!important}
  .gcTour.gcTourMobile .gcTourTip,.gcTour.gcTourMobile .gcTourTip.isCenter{
    position:fixed!important;left:8px!important;right:8px!important;bottom:calc(8px + env(safe-area-inset-bottom))!important;top:auto!important;
    width:auto!important;max-width:none!important;max-height:min(72dvh,570px)!important;margin:0!important;
    overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important;
    scrollbar-width:none!important;transform:none!important
  }
  .gcTour.gcTourMobile .gcTourTip::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}
  .gcTour.gcTourMobile .gcTourMobileWhere{display:flex!important;align-items:center!important;gap:7px!important;margin:9px 13px 0!important;padding:8px 10px!important;border:1px solid rgba(103,143,199,.26)!important;border-radius:10px!important;background:rgba(42,74,116,.18)!important;color:#bcd4ef!important;font-size:11px!important;font-weight:800!important;line-height:1.3!important}
  .gcTour.gcTourMobile .gcTourMobileWhere:before{content:'📍';flex:0 0 auto}
  .gcTour.gcTourMobile .gcTourDots{gap:3px!important}.gcTour.gcTourMobile .gcTourDots i{min-width:0!important}
  .gcTour.gcTourMobile .gcTourActions{position:sticky!important;bottom:0!important;padding-bottom:12px!important;background:linear-gradient(180deg,rgba(18,27,39,0),#121b27 20%)!important}
}
@media(max-width:390px){
  .gcTour.gcTourMobile .gcTourTip,.gcTour.gcTourMobile .gcTourTip.isCenter{left:5px!important;right:5px!important;bottom:calc(5px + env(safe-area-inset-bottom))!important;max-height:min(76dvh,590px)!important}
  .gcTour.gcTourMobile .gcTourTop{padding:11px 11px 8px!important}.gcTour.gcTourMobile .gcTourIcon{width:40px!important;height:40px!important;font-size:20px!important}
  .gcTour.gcTourMobile .gcTourTip h3{font-size:18px!important}.gcTour.gcTourMobile .gcTourTip>p{font-size:12px!important}
}

/* =========================================================
   R15.21 — doorzoekbaar Hulpcentrum + ledenhandleiding
   ========================================================= */
.gcHelpQuick i{filter:drop-shadow(0 0 7px rgba(76,174,255,.28))}
.gcHelpCenterCard{width:min(1040px,calc(100vw - 28px))!important;max-width:1040px!important;max-height:min(900px,calc(100dvh - 28px))!important;padding:0!important;overflow:hidden!important;border:1px solid rgba(89,145,207,.34)!important;background:linear-gradient(150deg,#151f2e 0%,#101722 70%)!important;box-shadow:0 28px 90px rgba(0,0,0,.58)!important;display:flex!important;flex-direction:column!important}
.gcHelpCenterCard>.modalClose{z-index:5;top:16px!important;right:16px!important;background:#0c1420!important;border:1px solid rgba(255,255,255,.1)!important}
.gcHelpHero{display:flex;align-items:center;gap:16px;padding:24px 64px 20px 25px;background:radial-gradient(circle at 12% 20%,rgba(65,157,255,.18),transparent 34%),linear-gradient(110deg,rgba(49,94,153,.18),rgba(255,255,255,.015));border-bottom:1px solid rgba(255,255,255,.075)}
.gcHelpHeroIcon{width:52px;height:52px;flex:0 0 52px;display:grid;place-items:center;border-radius:16px;background:linear-gradient(145deg,#70d7ff,#286bc1 55%,#1c304d);border:1px solid #c8f1ff;color:#fff;font-size:30px;font-weight:1000;box-shadow:0 10px 28px rgba(33,119,209,.32)}
.gcHelpHero small{display:block;color:#73cfff;font-size:10px;font-weight:1000;letter-spacing:.13em}.gcHelpHero h2{margin:3px 0 5px;font-size:25px;color:#fff}.gcHelpHero p{margin:0;color:#aebbd0;font-size:13px;line-height:1.45}
.gcHelpSearch{margin:16px 20px 10px;height:48px;display:flex;align-items:center;gap:10px;padding:0 13px;border:1px solid rgba(112,158,215,.35);border-radius:14px;background:#0b131f;box-shadow:inset 0 1px rgba(255,255,255,.025)}
.gcHelpSearch:focus-within{border-color:#55bdf5;box-shadow:0 0 0 3px rgba(56,153,224,.12)}.gcHelpSearch svg{width:21px;fill:none;stroke:#74c9fa;stroke-width:1.8}.gcHelpSearch input{flex:1;min-width:0;border:0!important;outline:0!important;background:transparent!important;color:#eef6ff!important;font-size:14px!important;height:100%!important;padding:0!important}.gcHelpSearch input::placeholder{color:#74849b}.gcHelpSearch kbd{border:1px solid rgba(255,255,255,.12);border-radius:6px;padding:3px 6px;background:#172131;color:#8494a9;font:700 9px/1 sans-serif}
.gcHelpCategories{display:flex;gap:7px;padding:0 20px 11px;overflow-x:auto;scrollbar-width:none}.gcHelpCategories::-webkit-scrollbar{display:none}.gcHelpCategories button{flex:0 0 auto;display:flex;align-items:center;gap:6px;min-height:34px;padding:0 11px;border:1px solid rgba(255,255,255,.085);border-radius:10px;background:#172130;color:#aebbd0;font-size:11px;font-weight:850;cursor:pointer}.gcHelpCategories button:hover{background:#1c2b3e;color:#fff}.gcHelpCategories button.active{border-color:rgba(90,190,246,.64);background:linear-gradient(145deg,#245e8f,#21416c);color:#fff;box-shadow:0 5px 16px rgba(25,91,148,.2)}
.gcHelpLayout{min-height:0;flex:1;display:grid;grid-template-columns:178px minmax(0,1fr);gap:0;border-top:1px solid rgba(255,255,255,.06);overflow:hidden}.gcHelpLayout aside{padding:18px 12px;border-right:1px solid rgba(255,255,255,.06);background:rgba(7,13,21,.28);overflow:auto}.gcHelpLayout aside>strong{display:block;padding:0 9px 10px;color:#728299;font-size:9px;letter-spacing:.13em;text-transform:uppercase}.gcHelpLayout aside button{width:100%;min-height:39px;text-align:left;padding:0 10px;border:0;border-radius:9px;background:transparent;color:#aeb9ca;font-size:11px;font-weight:800;cursor:pointer}.gcHelpLayout aside button:hover{background:rgba(76,143,207,.14);color:#dff3ff}.gcHelpLayout main{min-width:0;overflow-y:auto;overscroll-behavior:contain;padding:17px 19px 22px;scrollbar-color:#35465e transparent;scrollbar-width:thin}
.gcHelpResultHead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px}.gcHelpResultHead small{display:block;color:#6f849f;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.1em}.gcHelpResultHead h3{margin:2px 0 0;color:#f3f7fc;font-size:18px}.gcHelpResultHead button{min-height:36px;padding:0 12px;border:1px solid rgba(109,170,231,.32);border-radius:10px;background:#1c304a;color:#dff2ff;font-size:11px;font-weight:900;cursor:pointer}.gcHelpResultHead button:hover{background:#244268}
.gcHelpResults{display:grid;gap:8px}.gcHelpArticle{border:1px solid rgba(109,133,166,.19);border-radius:12px;background:linear-gradient(145deg,rgba(28,40,57,.9),rgba(17,25,37,.94));overflow:hidden}.gcHelpArticle>button{width:100%;display:grid;grid-template-columns:38px minmax(0,1fr) 22px;align-items:center;gap:10px;min-height:57px;padding:8px 12px;border:0;background:transparent;text-align:left;cursor:pointer}.gcHelpArticle>button:hover{background:rgba(74,139,205,.08)}.gcHelpArticleIcon{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:#111b29;border:1px solid rgba(255,255,255,.07);font-size:17px}.gcHelpArticle>button span:nth-child(2){min-width:0}.gcHelpArticle>button small{display:block;color:#6daeda;font-size:8px;font-weight:1000;letter-spacing:.08em;text-transform:uppercase}.gcHelpArticle>button b{display:block;margin-top:2px;color:#eaf1fa;font-size:12px;line-height:1.25}.gcHelpArticle>button>i{font-style:normal;color:#7690ac;font-size:18px;transition:transform .18s}.gcHelpArticle>button[aria-expanded="true"]>i{transform:rotate(180deg)}.gcHelpArticleBody{display:none;padding:0 17px 15px 60px;color:#aebbd0;font-size:11.5px;line-height:1.55}.gcHelpArticleBody.open{display:block}.gcHelpArticleBody p{margin:0 0 9px}.gcHelpArticleBody ol{margin:0;padding-left:18px}.gcHelpArticleBody li{margin:4px 0}.gcHelpEmpty{min-height:190px;display:grid;place-content:center;text-align:center;color:#8da0b6}.gcHelpEmpty b{color:#d7e4f3;font-size:14px}.gcHelpEmpty span{margin-top:4px;font-size:11px}
.gcHelpFooter{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 20px;border-top:1px solid rgba(255,255,255,.07);background:#0d1520}.gcHelpFooter div{min-width:0}.gcHelpFooter b,.gcHelpFooter span{display:block}.gcHelpFooter b{color:#edf4fc;font-size:11px}.gcHelpFooter span{margin-top:2px;color:#77889e;font-size:9px}.gcHelpFooter a{flex:0 0 auto;padding:9px 12px;border:1px solid rgba(255,190,80,.34);border-radius:9px;background:rgba(184,123,31,.13);color:#f4ca71;text-decoration:none;font-size:10px;font-weight:900}
@media(max-width:680px){
 .gcHelpCenterCard{width:100vw!important;height:100dvh!important;max-height:100dvh!important;border-radius:0!important;border:0!important}
 .gcHelpHero{padding:18px 52px 15px 14px;gap:10px}.gcHelpHeroIcon{width:42px;height:42px;flex-basis:42px;border-radius:13px;font-size:24px}.gcHelpHero h2{font-size:20px}.gcHelpHero p{font-size:11px}
 .gcHelpSearch{margin:10px 10px 8px;height:45px}.gcHelpSearch kbd{display:none}.gcHelpCategories{padding:0 10px 9px}.gcHelpLayout{display:block;overflow-y:auto}.gcHelpLayout aside{display:none}.gcHelpLayout main{overflow:visible;padding:13px 10px calc(86px + env(safe-area-inset-bottom))}.gcHelpResultHead{position:sticky;top:0;z-index:2;margin:-13px -10px 9px;padding:11px 10px;background:rgba(14,22,33,.95);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.055)}.gcHelpResultHead button{padding:0 9px}.gcHelpArticleBody{padding:0 13px 14px 13px}.gcHelpFooter{position:absolute;left:0;right:0;bottom:0;padding:10px max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}.gcHelpFooter span{display:none}
}
@media(max-width:390px){.gcHelpHero p{display:none}.gcHelpHero h2{font-size:18px}.gcHelpCategories button{min-height:32px;padding:0 9px;font-size:10px}.gcHelpArticle>button{grid-template-columns:34px minmax(0,1fr) 18px;padding:7px 9px}.gcHelpArticleIcon{width:32px;height:32px}.gcHelpResultHead h3{font-size:16px}}

/* R15.22 — Hulpcentrum visuele verfijning */
.gcHelpCenterCard{width:min(1020px,calc(100vw - 44px))!important;max-width:1020px!important;max-height:min(820px,calc(100dvh - 44px))!important;border-radius:20px!important}
.gcHelpHero{padding:22px 68px 18px 24px;background:radial-gradient(circle at 8% 5%,rgba(72,171,255,.2),transparent 35%),linear-gradient(112deg,rgba(50,96,154,.17),rgba(255,255,255,.01))}
.gcHelpHeroIcon{width:48px;height:48px;flex-basis:48px;border-radius:15px;font-size:27px}.gcHelpHero h2{font-size:24px;letter-spacing:-.025em}.gcHelpHero p{max-width:660px}
.gcHelpSearch{margin:14px 20px 9px;border-color:rgba(88,181,235,.42);box-shadow:inset 0 1px rgba(255,255,255,.03),0 5px 18px rgba(0,0,0,.12)}
.gcHelpCategories{padding:0 20px 14px;gap:8px}.gcHelpCategories button{min-height:35px;padding:0 12px;border-radius:11px;background:#151f2d}.gcHelpCategories button span{font-size:13px}.gcHelpCategories button.active{border-color:rgba(107,207,255,.75);background:linear-gradient(145deg,#286c9f,#234d79)}
.gcHelpLayout{grid-template-columns:172px minmax(0,1fr)}.gcHelpLayout aside{padding:19px 11px}.gcHelpLayout aside button{display:flex;align-items:center;min-height:42px;margin:2px 0;padding:0 11px;border:1px solid transparent}.gcHelpLayout aside button.active{border-color:rgba(96,185,239,.27);background:linear-gradient(90deg,rgba(44,119,174,.25),rgba(44,119,174,.07));color:#e8f7ff}.gcHelpLayout main{padding:18px 20px 24px}
.gcHelpResultHead{margin-bottom:14px}.gcHelpResultHead h3{font-size:20px}.gcHelpResultHead button{min-height:38px;border-color:rgba(104,180,237,.4);background:linear-gradient(145deg,#203d5e,#192f49);box-shadow:0 5px 15px rgba(0,0,0,.15)}
.gcHelpResults{gap:9px}.gcHelpArticle{border-color:rgba(112,144,184,.22);border-radius:13px}.gcHelpArticle>button{min-height:62px;padding:9px 13px}.gcHelpArticleIcon{width:38px;height:38px}.gcHelpArticle>button small{font-size:8.5px}.gcHelpArticle>button b{font-size:13px;line-height:1.3}.gcHelpArticleBody{padding:1px 18px 17px 63px;font-size:12.5px;line-height:1.62}.gcHelpArticleBody ol{padding-left:20px}.gcHelpArticleBody li{padding-left:2px;margin:5px 0}
.gcHelpFooter{padding:14px 20px}.gcHelpFooter b{font-size:12px}.gcHelpFooter a{min-height:36px;display:flex;align-items:center;padding:0 14px;border-radius:10px}
@media(max-width:880px) and (min-width:681px){
 .gcHelpCenterCard{width:min(760px,calc(100vw - 24px))!important;max-height:calc(100dvh - 24px)!important}
 .gcHelpCategories{flex-wrap:wrap;overflow:visible}.gcHelpCategories button{flex:1 1 120px;justify-content:center}
 .gcHelpLayout{display:block;overflow-y:auto}.gcHelpLayout aside{display:none}.gcHelpLayout main{overflow:visible;padding:17px 17px 24px}
 .gcHelpResultHead{position:sticky;top:0;z-index:2;margin:-17px -17px 12px;padding:15px 17px 12px;background:rgba(14,22,33,.94);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.055)}
}
@media(max-width:680px){
 .gcHelpCenterCard{width:100vw!important;max-width:none!important;height:100dvh!important;max-height:100dvh!important;border-radius:0!important}
 .gcHelpHero{padding:17px 52px 14px 13px}.gcHelpCategories{flex-wrap:nowrap;overflow-x:auto;padding:0 10px 10px}.gcHelpCategories button{flex:0 0 auto}
 .gcHelpArticle>button{min-height:58px}.gcHelpArticle>button b{font-size:12px}.gcHelpArticleBody{font-size:12px}
}

/* R15.22 — typstatus vervangt tijdelijk de mood/statusregel */
.userCard.isTyping .uBody>small>.uStatus,.userCard.isTyping .uBody>small>.uMood{display:none!important}
.userCard .uBody>small>.gcUserTypingBadge{height:19px;margin:0;padding:1px 7px 1px 5px;vertical-align:middle;max-width:100%;box-sizing:border-box}
.userCard .uBody>small>.gcUserTypingBadge svg{width:13px;height:13px;flex-basis:13px}.userCard .uBody>small>.gcUserTypingBadge span{font-size:8.5px!important}
.userCard.isTyping .uBody>small{display:flex!important;align-items:center!important;min-height:19px!important;overflow:visible!important}

/* =========================================================
   R15.23 — rustig, taakgericht Hulpcentrum
   ========================================================= */
.gcHelpCenterCard{width:min(920px,calc(100vw - 40px))!important;max-width:920px!important;max-height:min(840px,calc(100dvh - 36px))!important}
.gcHelpHero{padding:21px 66px 17px 23px}.gcHelpHeroIcon{width:46px;height:46px;flex-basis:46px}.gcHelpHero h2{font-size:23px}.gcHelpHero p{font-size:12.5px}
.gcHelpSearch{margin:13px 19px 9px;height:46px}.gcHelpCategories{padding:0 19px 12px;flex-wrap:nowrap!important;overflow-x:auto!important}.gcHelpCategories button{flex:0 0 auto!important;min-height:33px;padding:0 11px}
.gcHelpLayout{display:block!important;min-height:0;overflow:hidden!important;border-top:1px solid rgba(255,255,255,.06)}
.gcHelpLayout main{height:100%;min-height:0;overflow-y:auto!important;padding:18px 19px 23px!important}
.gcHelpResultHead{position:static!important;margin:0 0 15px!important;padding:0!important;background:transparent!important;backdrop-filter:none!important;border:0!important}.gcHelpResultHead h3{font-size:20px}.gcHelpResultHead button{min-height:38px;padding:0 13px}
.gcHelpTopicGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:0 0 20px}
.gcHelpTopicCard{min-width:0;min-height:70px;display:grid;grid-template-columns:38px minmax(0,1fr) 14px;align-items:center;gap:10px;padding:10px 11px;border:1px solid rgba(105,145,190,.2);border-radius:13px;background:linear-gradient(145deg,rgba(29,43,61,.95),rgba(17,26,38,.96));color:#e9f2fc;text-align:left;cursor:pointer;transition:border-color .16s,transform .16s,background .16s}
.gcHelpTopicCard:hover{transform:translateY(-1px);border-color:rgba(93,194,246,.52);background:linear-gradient(145deg,rgba(34,58,81,.98),rgba(20,34,50,.98))}.gcHelpTopicIcon{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:#101b2a;border:1px solid rgba(255,255,255,.07);font-size:17px}.gcHelpTopicCard>span:nth-child(2){min-width:0}.gcHelpTopicCard b,.gcHelpTopicCard small{display:block}.gcHelpTopicCard b{overflow:hidden;text-overflow:ellipsis;color:#eef6ff;font-size:12px;white-space:nowrap}.gcHelpTopicCard small{margin-top:3px;color:#8395aa;font-size:9.5px}.gcHelpTopicCard>i{color:#6e8ca9;font:normal 22px/1 sans-serif}
.gcHelpSectionTitle{display:flex;align-items:baseline;gap:8px;margin:0 0 9px}.gcHelpSectionTitle small{color:#62b9e8;font-size:8px;font-weight:1000;letter-spacing:.11em}.gcHelpSectionTitle h4{margin:0;color:#eaf2fb;font-size:15px}
.gcHelpResults{display:block}.gcHelpArticle{margin:0 0 8px}.gcHelpArticle:last-child{margin-bottom:0}.gcHelpArticle>button{min-height:57px}.gcHelpArticleBody{font-size:12px}
.gcHelpFooter{padding:12px 19px}.gcHelpFooter span{font-size:9.5px}.gcHelpFooter a{min-height:35px}
@media(max-width:760px){
 .gcHelpCenterCard{width:min(680px,calc(100vw - 20px))!important;max-height:calc(100dvh - 20px)!important}
 .gcHelpTopicGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:680px){
 .gcHelpCenterCard{width:100vw!important;max-width:none!important;height:100dvh!important;max-height:100dvh!important}
 .gcHelpHero{padding:16px 52px 13px 13px}.gcHelpHeroIcon{width:40px;height:40px;flex-basis:40px}.gcHelpHero h2{font-size:19px}.gcHelpHero p{font-size:10.5px}
 .gcHelpSearch{margin:9px 10px 7px;height:43px}.gcHelpCategories{padding:0 10px 8px}
 .gcHelpLayout{flex:1;overflow:hidden!important}.gcHelpLayout main{overflow-y:auto!important;padding:13px 10px calc(78px + env(safe-area-inset-bottom))!important}
 .gcHelpResultHead{margin-bottom:11px!important}.gcHelpResultHead h3{font-size:17px}.gcHelpResultHead button{min-height:35px;padding:0 9px;font-size:10px}
 .gcHelpTopicGrid{gap:7px;margin-bottom:17px}.gcHelpTopicCard{min-height:64px;grid-template-columns:34px minmax(0,1fr) 12px;gap:8px;padding:8px}.gcHelpTopicIcon{width:34px;height:34px}.gcHelpTopicCard b{font-size:11px}.gcHelpTopicCard small{font-size:8.5px}
 .gcHelpFooter{position:absolute;left:0;right:0;bottom:0;padding:9px max(10px,env(safe-area-inset-right)) max(9px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}.gcHelpFooter span{display:none}
}
@media(max-width:390px){
 .gcHelpTopicGrid{grid-template-columns:1fr}.gcHelpTopicCard{min-height:58px}.gcHelpHero p{display:block}.gcHelpCategories button{font-size:9.5px}.gcHelpResultHead button{font-size:0}.gcHelpResultHead button::after{content:'🤖 Vraag';font-size:10px}
}

/* R15.24 — alle hulpcategorieën zichtbaar zonder verborgen zijwaartse scroll */
.gcHelpCategories{display:flex!important;flex-wrap:wrap!important;overflow:visible!important;row-gap:7px!important}
.gcHelpCategories button{flex:0 0 auto!important}
@media(max-width:680px){
 .gcHelpCategories{display:flex!important;flex-wrap:nowrap!important;gap:6px!important;overflow-x:auto!important;overflow-y:hidden!important;padding-bottom:12px!important;scrollbar-width:thin!important;scrollbar-color:#4985b5 #111a27!important}
 .gcHelpCategories::-webkit-scrollbar{display:block!important;height:5px}.gcHelpCategories::-webkit-scrollbar-track{background:#111a27;border-radius:9px}.gcHelpCategories::-webkit-scrollbar-thumb{background:#4985b5;border-radius:9px}
 .gcHelpCategories button{width:auto;min-width:max-content;justify-content:center;padding:0 9px!important}
}

/* GC 0.51.39 — compacte Cody-achtige tekeningen en cadeauwinkel. */
.msg .chatDrawingLink{display:inline-block!important;width:auto!important;max-width:100%!important}
.msg img.chatDrawing{display:block!important;width:auto!important;height:auto!important;max-width:min(320px,70vw)!important;max-height:180px!important;object-fit:contain!important;border-radius:10px!important;border:1px solid rgba(130,151,180,.28)!important;background:#0b111a!important}
#pmModal .pmMessages img.chatDrawing{max-width:min(220px,68vw)!important;max-height:124px!important}

/* v0.51.46 — versleutelde privéfoto's */
.pmSecureMediaBubble{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:9px;min-width:min(300px,68vw);padding:10px 11px;border:1px solid rgba(90,164,226,.42);border-radius:13px;background:linear-gradient(135deg,rgba(24,58,88,.86),rgba(14,27,45,.96));color:#f4f8ff}.pmSecureMediaBubble>span{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:#10243a;font-size:18px}.pmSecureMediaBubble>div{display:grid;gap:2px;min-width:0}.pmSecureMediaBubble b{font-size:12px}.pmSecureMediaBubble small{font-size:9px;color:#b8c9dc}.pmSecureMediaBubble button{border:1px solid #5b9dce;border-radius:9px;background:#173b59;color:#fff;padding:8px 10px;font-weight:850;cursor:pointer}.pmSecureMediaBubble em{font-size:9px;color:#9fb2c8;font-style:normal}.pmSecureMediaBubble.adult{border-color:rgba(241,76,120,.52);background:linear-gradient(135deg,rgba(83,22,46,.9),rgba(31,16,32,.96))}.pmSecureMediaBubble.adult>span{background:#44162b}
.pmSecureMediaCard{width:min(650px,calc(100vw - 22px));max-height:min(88dvh,780px);overflow:auto;padding:22px!important;border:1px solid #385675!important;background:linear-gradient(155deg,#182536,#0c1421)!important}.pmSecureMediaHead{display:flex;align-items:flex-start;gap:13px;padding-right:32px}.pmSecureMediaHead>span{width:48px;height:48px;display:grid;place-items:center;flex:0 0 48px;border-radius:14px;background:#173553;border:1px solid #4776a1;font-size:24px}.pmSecureMediaHead small{color:#6fbee9;font-size:9px;font-weight:950;letter-spacing:1.2px}.pmSecureMediaHead h3{margin:3px 0 5px;font-size:22px}.pmSecureMediaHead p{margin:0;color:#aebdd0;font-size:11px;line-height:1.45}.pmSecureMediaPick{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:18px 0 12px}.pmSecureMediaPick button{display:grid;grid-template-columns:42px 1fr;grid-template-rows:auto auto;gap:1px 9px;text-align:left;padding:12px;border:1px solid #344c66;border-radius:13px;background:#101c2b;color:#fff;cursor:pointer}.pmSecureMediaPick button:hover{border-color:#69b8e6;background:#14263a}.pmSecureMediaPick span{grid-row:1/3;width:42px;height:42px;display:grid;place-items:center;border-radius:11px;background:#1e344d;font-size:21px}.pmSecureMediaPick b{align-self:end}.pmSecureMediaPick small{color:#91a5bc}.pmSecurePreview{min-height:190px;display:grid;place-items:center;gap:10px;padding:10px;border:1px dashed #3d5772;border-radius:15px;background:#08111d;color:#8093aa;text-align:center;overflow:hidden}.pmSecurePreview img{display:block;max-width:100%;max-height:310px;object-fit:contain;border-radius:10px}.pmSecurePreview>div{display:grid;gap:2px}.pmSecurePreview small{color:#8fa6bd}.pmSecureMediaOptions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.pmSecureMediaOptions>label{display:grid;gap:5px;color:#b9c8d8;font-size:10px}.pmSecureMediaOptions select{width:100%}.pmSecureAdult{grid-column:1/-1!important;display:flex!important;align-items:flex-start;gap:9px;padding:10px 12px;border:1px solid rgba(238,77,120,.38);border-radius:12px;background:rgba(73,20,42,.35)}.pmSecureAdult input{margin-top:3px}.pmSecureAdult span{display:grid;gap:2px}.pmSecureAdult small{color:#cfa7b6}.pmSecureAdult.disabled{opacity:.5}.pmSecureMediaNotice{margin-top:12px;padding:10px 12px;border:1px solid #4a5361;border-radius:12px;background:#151c25;color:#b8c1cd;font-size:9.5px;line-height:1.5}.pmSecureMediaActions{display:flex;justify-content:flex-end;gap:9px;margin-top:15px}.pmSecureMediaActions button{min-height:42px}.pmSecureMediaActions button:disabled{opacity:.45;cursor:not-allowed}
.pmSecureViewer{position:fixed;inset:0;z-index:18000;display:grid;place-items:center;padding:12px;background:rgba(0,4,11,.97);touch-action:none;user-select:none}.pmSecureViewer.hidden{display:none}.pmSecureViewerStage{position:relative;width:min(100%,1000px);height:min(92dvh,900px);display:grid;place-items:center;overflow:hidden;border:1px solid #3d526d;border-radius:18px;background:#03070d}.pmSecureViewerStage>img{display:block;max-width:100%;max-height:100%;object-fit:contain;pointer-events:none;-webkit-user-drag:none}.pmSecureViewerWatermark{position:absolute;inset:-20%;display:flex;align-items:center;justify-content:center;white-space:pre-wrap;overflow:hidden;transform:rotate(-24deg);color:rgba(255,255,255,.18);font-weight:900;font-size:14px;line-height:5;letter-spacing:.8px;pointer-events:none}.pmSecureViewerTop{position:absolute;left:10px;right:10px;top:10px;display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-radius:11px;background:rgba(5,12,22,.82);backdrop-filter:blur(9px);color:#fff}.pmSecureViewerTop b{min-width:38px;text-align:center;color:#72d1ff}.pmSecureViewerStage>button{position:absolute;right:13px;bottom:13px;width:44px;height:44px;border:1px solid #657790;border-radius:50%;background:rgba(9,18,30,.88);color:#fff;font-size:24px;cursor:pointer}
@media(max-width:600px){.pmSecureMediaBubble{min-width:0;width:min(100%,72vw);grid-template-columns:31px minmax(0,1fr)}.pmSecureMediaBubble>span{width:31px;height:31px}.pmSecureMediaBubble button,.pmSecureMediaBubble em{grid-column:1/-1;width:100%;text-align:center}.pmSecureMediaCard{padding:16px 13px!important}.pmSecureMediaHead h3{font-size:18px}.pmSecureMediaPick{grid-template-columns:1fr}.pmSecurePreview{min-height:150px}.pmSecureMediaOptions{grid-template-columns:1fr}.pmSecureAdult{grid-column:auto!important}.pmSecureMediaActions{display:grid;grid-template-columns:1fr 1fr}.pmSecureViewer{padding:0}.pmSecureViewerStage{width:100%;height:100dvh;border:0;border-radius:0}}
#giftModal .giftCard{width:min(760px,calc(100vw - 24px))!important;max-height:min(780px,calc(100dvh - 24px))!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;padding:20px!important;border-radius:20px!important}
#giftModal .modalTitle{flex:0 0 auto!important;margin-bottom:10px!important;padding-right:42px!important}
#giftModal .modalTitle h3{font-size:24px!important;margin:2px 0 4px!important}
.giftRecipientRow,.giftMessageRow{display:grid!important;gap:6px!important;flex:0 0 auto!important;color:var(--gc-safe-text,var(--text))!important;font-weight:800!important}
.giftRecipientRow span,.giftMessageRow span{font-size:11px!important;color:var(--gc-safe-muted,var(--muted))!important;text-transform:uppercase!important;letter-spacing:.05em!important}
.giftRecipientRow select,.giftMessageRow input{width:100%!important;min-height:42px!important;padding:0 12px!important;border:1px solid var(--gc-safe-line,var(--line))!important;border-radius:11px!important;background:var(--gc-safe-surface2,var(--panel2))!important;color:var(--gc-safe-text,var(--text))!important}
.giftCatalogScroll{min-height:0!important;flex:1 1 auto!important;overflow-y:auto!important;overflow-x:hidden!important;margin:12px -4px!important;padding:2px 4px!important;overscroll-behavior:contain!important;scrollbar-gutter:stable!important}
#giftModal .giftCatalog{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:7px!important}
#giftModal .giftOption{min-height:88px!important;padding:8px 5px!important;gap:3px!important;border-radius:12px!important;transition:transform .14s ease,border-color .14s ease,background .14s ease!important}
#giftModal .giftOption:hover,#giftModal .giftOption:focus-visible{transform:translateY(-1px)!important;border-color:var(--gc-accent,#e4bd63)!important;background:rgba(228,189,99,.08)!important;outline:none!important}
#giftModal .giftOption:disabled{opacity:.55!important;transform:none!important;cursor:wait!important}
#giftModal .giftOption>span{font-size:25px!important;line-height:1.1!important}
#giftModal .giftOption>b{font-size:11px!important;line-height:1.15!important;margin:2px 0 0!important}
#giftModal .giftOption>small{font-size:9px!important;line-height:1!important;margin:0!important;color:#e4bd63!important}
.giftMessageRow small{font-size:9px!important;text-transform:none!important;font-weight:600!important;opacity:.75!important}
#giftModal .giftFooter{display:flex!important;align-items:baseline!important;justify-content:flex-end!important;gap:6px!important;flex:0 0 auto!important;margin:10px 0 0!important;padding-top:10px!important;border-top:1px solid var(--gc-safe-line,var(--line))!important;color:var(--gc-safe-muted,var(--muted))!important}
#giftModal .giftFooter b{font-size:20px!important;color:#f0ca66!important}
#giftModal .giftFooter small{font-size:10px!important}
@media(max-width:720px){
  .msg img.chatDrawing{max-width:min(260px,72vw)!important;max-height:146px!important}
  #giftModal .giftCard{width:calc(100vw - 12px)!important;max-height:calc(100dvh - 12px)!important;padding:14px!important;border-radius:16px!important}
  #giftModal .modalTitle h3{font-size:20px!important}
  #giftModal .giftCatalog{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important}
  #giftModal .giftOption{min-height:82px!important;padding:7px 4px!important}
}
@media(max-width:390px){
  #giftModal .giftCatalog{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #giftModal .giftOption{min-height:78px!important}
}

/* GC 0.51.40 — compacte aanklikbare uploads, ook voor oudere tekeningen. */
.msg a[href] > img.chatMedia{
  display:block!important;
  width:auto!important;
  height:auto!important;
  max-width:min(300px,40vw)!important;
  max-height:170px!important;
  object-fit:contain!important;
  cursor:zoom-in!important;
  border-radius:10px!important;
  border:1px solid rgba(130,151,180,.30)!important;
  background:#0b111a!important;
  box-shadow:0 5px 16px rgba(0,0,0,.16)!important;
  transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease!important;
}
.msg a[href]:hover > img.chatMedia,
.msg a[href]:focus-visible > img.chatMedia{
  transform:translateY(-1px)!important;
  border-color:var(--gc-accent,#e4bd63)!important;
  box-shadow:0 8px 22px rgba(0,0,0,.24)!important;
}
@media(max-width:700px){
  .msg a[href] > img.chatMedia{
    max-width:min(250px,72vw)!important;
    max-height:142px!important;
  }
}

.pmSecureMediaBubble.consumed{
  opacity:.66;
  filter:saturate(.7);
}
.pmSecureMediaBubble.consumed em{
  color:#c5ced9;
}


/* GC 2026-08-30 — compacte gasttoegang vóór het betreden van de chat */
.gcGuestEntryCard{width:min(500px,calc(100vw - 24px));max-height:min(88vh,700px);overflow:auto}
.gcGuestEntryCard .modalTitle{padding-right:38px}.gcGuestEntryCard .modalTitle h3{margin:4px 0 6px}.gcGuestEntryCard .modalTitle p{margin:0 0 14px;color:var(--muted,#96a4b8);line-height:1.5}
.gcGuestEntryForm{display:grid;gap:14px}.gcGuestEntryForm>label,.gcGuestEntryGrid label{display:grid;gap:7px;font-weight:800}
.gcGuestEntryForm input,.gcGuestEntryForm select{width:100%;min-height:46px;border:1px solid var(--gc-line,var(--line,#263248));border-radius:10px;background:var(--gc-input,var(--panel2,#111b29));color:var(--gc-text,var(--text,#f4f7fb));padding:0 12px;font:inherit;outline:none}
.gcGuestEntryForm input:focus,.gcGuestEntryForm select:focus{border-color:var(--gc-accent,var(--gold,#dcb85f));box-shadow:0 0 0 3px color-mix(in srgb,var(--gc-accent,var(--gold,#dcb85f)) 16%,transparent)}
.gcGuestEntryForm label>small{font-size:11px;font-weight:600;color:var(--gc-muted,var(--muted,#95a3b8))}.gcGuestEntryGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.gcGuestEntryNotice{padding:11px 12px;border:1px solid color-mix(in srgb,var(--gc-accent,var(--gold,#dcb85f)) 30%,transparent);border-radius:10px;background:color-mix(in srgb,var(--gc-accent,var(--gold,#dcb85f)) 8%,transparent);font-size:11px;line-height:1.55;color:var(--gc-muted,var(--muted,#b9c3d1))}
.gcGuestEntryError{min-height:18px;color:var(--danger,#ff8585);font-weight:750;font-size:12px}.gcGuestEntryActions{display:flex;gap:8px;flex-wrap:wrap}.gcGuestEntryActions>*{min-height:44px;flex:1 1 180px}.gcGuestEntryActions .secondaryBtn{background:var(--gc-panel-2,var(--panel2,#233148));color:var(--gc-text,var(--text,#fff));border:1px solid var(--gc-line,var(--line,#263248))}
@media(max-width:600px){.gcGuestEntryCard{width:min(100%,calc(100vw - 16px));padding:16px}.gcGuestEntryGrid{grid-template-columns:1fr}.gcGuestEntryActions{display:grid;grid-template-columns:1fr}.gcGuestEntryActions>*{width:100%}}


/* GC member-permissions polish · 30-08-2026 */
.gcUserMenuPolished{width:min(500px,calc(100vw - 24px));padding:18px;border-radius:22px}
.gcUserMenuPolished header{padding:2px 44px 15px 2px;margin-bottom:10px;border-bottom:1px solid rgba(148,163,184,.16)}
.gcUserMenuPolished header .uAvatar{width:58px;height:58px}
.gcUserMenuSectionLabel{margin:14px 2px 8px;color:#91a4bf;font-size:11px;font-weight:800;letter-spacing:.11em;text-transform:uppercase}
.gcUserMenuPolished .gcUserMenuGrid{gap:9px}
.gcUserMenuPolished .gcUserMenuGrid>button,.gcUserMenuPolished [data-friend-action-slot]>button{min-height:54px;padding:10px 13px;display:flex;align-items:center;gap:10px;text-align:left;border-radius:13px}
.gcUserMenuPolished [data-friend-action-slot]{display:contents}
.gcActionIcon{width:24px;flex:0 0 24px;text-align:center;font-size:16px}
.gcUserMenuModeration{padding-top:0}
.gcUserMenuPolished .gcUserMenuBan{grid-column:1/-1;border-color:rgba(244,63,94,.42);background:rgba(127,29,29,.20);color:#ff899b}
.gcGuestPmHint{margin:10px 0 2px;padding:10px 12px;border:1px solid rgba(245,193,83,.25);background:rgba(120,83,18,.14);border-radius:12px;color:#e8ca85;font-size:12px;line-height:1.45}
.friendCancelBtn,.gcUserMenu .friendCancel{border:1px solid rgba(245,158,11,.35)!important;background:rgba(120,72,10,.15)!important;color:#f4c56a!important;font-weight:800}
.friendCancelBtn{border-radius:10px;padding:8px 11px;white-space:nowrap;cursor:pointer}
.friendCancelBtn:hover{filter:brightness(1.12)}
@media(max-width:560px){.gcUserMenuPolished{padding:15px}.gcUserMenuPolished .gcUserMenuGrid{grid-template-columns:1fr 1fr}.gcUserMenuPolished .gcUserMenuGrid>button,.gcUserMenuPolished [data-friend-action-slot]>button{min-height:50px;padding:9px 10px;font-size:13px}.gcUserMenuPolished .gcUserMenuBan{grid-column:1/-1}}
@media(max-width:380px){.gcUserMenuPolished .gcUserMenuGrid{grid-template-columns:1fr}}


/* GC 30-08-2026 — userlist scroll hard-fix + verificatieherinnering */
#usersPanel,.users.gcRightPanel{display:flex!important;flex-direction:column!important;min-height:0!important;overflow:hidden!important}
#usersPanel>.gcRightTabs,#usersPanel>.gcRightTitle,#usersPanel>.liveStats{flex:0 0 auto!important}
#usersPanel>.gcUserScroll,#usersPanel>#users,.gcUserScroll#users{display:block!important;flex:1 1 0!important;height:auto!important;max-height:none!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain!important;touch-action:pan-y!important;-webkit-overflow-scrolling:touch!important;scrollbar-gutter:stable}
#usersPanel>.gcUserScroll::-webkit-scrollbar{display:block!important;width:7px!important}
#usersPanel>.gcUserScroll::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--gc-accent,#dcb85f) 45%,#536176)!important;border-radius:8px!important}
.gcVerificationReminder{position:fixed;z-index:135;top:58px;left:50%;transform:translateX(-50%);width:min(720px,calc(100vw - 28px));display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:11px;align-items:center;padding:10px 12px;border:1px solid rgba(245,183,74,.42);border-radius:0 0 14px 14px;background:linear-gradient(180deg,rgba(48,36,16,.97),rgba(26,25,23,.97));box-shadow:0 14px 34px rgba(0,0,0,.32);color:#f8f1df}
.gcVerificationReminder.hidden{display:none!important}.gcVerificationReminderIcon{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:rgba(245,183,74,.14);font-size:17px}.gcVerificationReminder b{display:block;font-size:12px}.gcVerificationReminder small{display:block;margin-top:2px;color:#d0c6b4;font-size:10px;line-height:1.35}.gcVerificationReminder button{border:1px solid rgba(245,183,74,.5);border-radius:9px;background:#d7aa4d;color:#17120a;font-weight:900;padding:8px 11px;cursor:pointer;white-space:nowrap}.verifyState{display:grid;gap:3px}.verifyPending{display:block;color:var(--gc-safe-muted,var(--muted));font-size:11px;line-height:1.4}.verifyCodeBox:not(.hidden){display:grid!important;gap:10px!important}.verifyCodeBox input{font-variant-numeric:tabular-nums;letter-spacing:.22em;text-align:center;font-weight:900;font-size:20px!important}
@media(max-width:900px){.gcVerificationReminder{top:58px;width:calc(100vw - 18px);grid-template-columns:34px minmax(0,1fr);border-radius:0 0 12px 12px}.gcVerificationReminder button{grid-column:2;justify-self:start;padding:7px 10px}.gcVerificationReminder small{font-size:9.5px}#usersPanel>.gcUserScroll,#usersPanel>#users{padding-bottom:max(12px,env(safe-area-inset-bottom))!important}}

/* 2026-08-31 — modal-stack + private emoji hotfix */
#emojiPanel.emojiPanel{
  z-index:var(--gc-emoji-z,2147481200)!important;
  border-radius:15px!important;
  border:1px solid color-mix(in srgb,var(--gc-accent,#dcb85f) 28%,var(--gc-line,#314158))!important;
  box-shadow:0 24px 75px rgba(0,0,0,.72)!important;
  touch-action:manipulation!important;
}
#emojiPanel .emojiHead{
  min-height:54px!important;
  padding:10px 12px!important;
  gap:10px!important;
  align-items:center!important;
}
#emojiPanel .emojiHead>div{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  gap:2px!important;
  min-width:0!important;
}
#emojiPanel .emojiHead b{
  display:block!important;
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  font-size:14px!important;
  line-height:1.2!important;
  letter-spacing:.01em!important;
}
#emojiPanel #emojiContextLabel{
  display:block!important;
  color:var(--gc-muted,#98a8bc)!important;
  font-size:10px!important;
  line-height:1.25!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
#emojiPanel #emojiClose{
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  border:1px solid color-mix(in srgb,var(--gc-line,#314158) 78%,transparent)!important;
  border-radius:10px!important;
  background:color-mix(in srgb,var(--gc-panel,#101927) 80%,#fff 3%)!important;
  color:var(--gc-text,#fff)!important;
  font-size:22px!important;
  line-height:1!important;
}
#emojiPanel #emojiClose:hover{background:rgba(255,255,255,.08)!important}
#emojiPanel .emojiTabs{
  padding:6px 8px!important;
  gap:5px!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  touch-action:pan-x!important;
  scrollbar-width:none!important;
}
#emojiPanel .emojiTabs::-webkit-scrollbar{display:none!important}
#emojiPanel .emojiTabs button{
  flex:0 0 38px!important;
  width:38px!important;
  min-width:38px!important;
  height:36px!important;
  border-radius:9px!important;
}
#emojiPanel .emojiTabs button.active{
  border:1px solid color-mix(in srgb,var(--gc-accent,#dcb85f) 70%,transparent)!important;
  box-shadow:inset 0 -2px color-mix(in srgb,var(--gc-accent,#dcb85f) 75%,transparent)!important;
}
#emojiPanel .emojiGrid{
  padding:9px!important;
  gap:5px!important;
  background:color-mix(in srgb,var(--gc-panel,#101927) 88%,#000 5%)!important;
  touch-action:pan-y!important;
}
#emojiPanel .emojiGrid button{
  min-width:0!important;
  min-height:38px!important;
  border-radius:9px!important;
}
#emojiPanel.emojiForPm{
  z-index:var(--gc-emoji-z,2147481800)!important;
}
@media(max-width:700px){
  #emojiPanel.emojiPanel{
    left:8px!important;
    right:8px!important;
    bottom:calc(62px + env(safe-area-inset-bottom))!important;
    width:auto!important;
    max-width:none!important;
    max-height:min(48dvh,410px)!important;
    border-radius:14px!important;
  }
  #emojiPanel.emojiForPm{
    left:12px!important;
    right:12px!important;
    bottom:calc(58px + env(safe-area-inset-bottom))!important;
    max-height:min(46dvh,390px)!important;
  }
  #emojiPanel .emojiGrid{grid-template-columns:repeat(7,minmax(0,1fr))!important}
}
@media(max-width:390px){
  #emojiPanel .emojiGrid{grid-template-columns:repeat(6,minmax(0,1fr))!important}
  #emojiPanel .emojiHead b{font-size:13px!important}
}


/* GC 2026-08-31 — unread News badge. Keeps modal/emoji hotfix intact. */
.quickbar #newsQuickBtn{position:relative!important}
.gcNewsUnreadBadge{position:absolute!important;z-index:8!important;right:-3px!important;top:-4px!important;min-width:17px!important;height:17px!important;padding:0 4px!important;border-radius:999px!important;display:flex!important;align-items:center!important;justify-content:center!important;background:#ef3340!important;color:#fff!important;border:2px solid #111827!important;font-size:9px!important;line-height:1!important;font-weight:900!important;font-style:normal!important;letter-spacing:0!important;box-shadow:0 3px 9px rgba(0,0,0,.38),0 0 0 1px rgba(255,255,255,.08)!important;pointer-events:none!important;transform:none!important}
.gcNewsUnreadBadge.hidden{display:none!important}
.quickbar #newsQuickBtn.hasUnreadNews{border-color:rgba(239,51,64,.38)!important}
.quickbar #newsQuickBtn.hasUnreadNews i{filter:drop-shadow(0 0 5px rgba(239,51,64,.42))!important}
@media(max-width:900px){.gcNewsUnreadBadge{right:2px!important;top:1px!important;min-width:18px!important;height:18px!important;font-size:9px!important}}

/* ================================================================
   0.51.51 — COMPLETE SOCIAL / PROFILE / VERIFY POLISH
   ================================================================ */

/* Friends: one clear, compact management surface instead of a loose list. */
#friendsModal:not(.hidden){padding:16px!important}
#friendsModal .socialCard{
  width:min(700px,calc(100vw - 24px))!important;
  max-width:700px!important;
  max-height:min(86dvh,760px)!important;
  padding:0!important;
  overflow:hidden!important;
  border:1px solid rgba(119,143,174,.28)!important;
  border-radius:20px!important;
  background:linear-gradient(180deg,#182230 0%,#111a26 100%)!important;
  box-shadow:0 28px 80px rgba(0,0,0,.48)!important;
}
#friendsModal .modalTitle{
  margin:0!important;padding:20px 68px 15px 20px!important;
  border-bottom:1px solid rgba(124,146,174,.18)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.025),transparent)!important;
}
#friendsModal .modalTitle small{color:#e7bd53!important;font-size:9px!important;font-weight:950!important;letter-spacing:.12em!important}
#friendsModal .modalTitle h3{margin:5px 0 4px!important;font-size:22px!important}
#friendsModal .modalTitle p{margin:0!important;font-size:11px!important;color:#aab8c9!important}
#friendsModal .modalClose{top:14px!important;right:14px!important;width:38px!important;height:38px!important;border-radius:11px!important}
#friendsModal .socialList{
  display:grid!important;gap:13px!important;
  max-height:calc(min(86dvh,760px) - 92px)!important;
  padding:14px 16px 18px!important;
  overflow-y:auto!important;overflow-x:hidden!important;
  overscroll-behavior:contain!important;scrollbar-width:thin!important;
}
.friendsSummary{
  display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important;
}
.friendsSummary>span{
  min-height:58px!important;display:grid!important;place-items:center!important;align-content:center!important;gap:2px!important;
  padding:8px!important;border:1px solid #304156!important;border-radius:12px!important;background:#111c29!important;text-align:center!important;
}
.friendsSummary b{font-size:19px!important;line-height:1!important;color:#f2cb68!important}
.friendsSummary small{font-size:8.5px!important;text-transform:uppercase!important;letter-spacing:.06em!important;color:#91a2b7!important}
.friendsSection{
  overflow:hidden!important;border:1px solid #304258!important;border-radius:14px!important;background:#0f1925!important;
}
.friendsSectionHead{
  min-height:36px!important;display:flex!important;align-items:center!important;padding:8px 11px!important;
  border-bottom:1px solid #293a4e!important;background:#151f2c!important;
}
.friendsSectionHead>div{display:flex!important;align-items:center!important;gap:7px!important}
.friendsSectionHead b{font-size:9px!important;font-weight:950!important;letter-spacing:.075em!important;text-transform:uppercase!important;color:#e2bd5c!important}
.friendsSectionHead span{display:inline-grid!important;place-items:center!important;min-width:22px!important;height:22px!important;padding:0 6px!important;border-radius:999px!important;background:#223044!important;color:#c8d4e3!important;font-size:9px!important;font-weight:900!important}
.friendsRows{display:grid!important}
#friendsModal .socialRow{
  width:100%!important;min-height:64px!important;margin:0!important;padding:9px 11px!important;
  border:0!important;border-bottom:1px solid #26374a!important;border-radius:0!important;background:transparent!important;
  color:#edf3fa!important;
}
#friendsModal .socialRow:last-child{border-bottom:0!important}
#friendsModal .uAvatar{width:44px!important;height:44px!important;min-width:44px!important;position:relative!important}
#friendsModal .uAvatar img{width:44px!important;height:44px!important;object-fit:cover!important;border-radius:50%!important}
.friendRowText{min-width:0!important;display:grid!important;gap:3px!important;align-content:center!important}
.friendRowText b{font-size:12px!important;line-height:1.15!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
.friendRowText small{font-size:9px!important;color:#91a2b6!important;line-height:1.25!important}
.friendAcceptedRow{grid-template-columns:minmax(0,1fr) 74px!important;gap:9px!important}
.friendIdentity{grid-template-columns:44px minmax(0,1fr)!important;gap:10px!important;min-width:0!important;cursor:pointer!important}
.friendPresence{position:absolute!important;right:-1px!important;bottom:0!important;width:11px!important;height:11px!important;border:2px solid #101a27!important;border-radius:50%!important;background:#596675!important}
.friendPresence.online{background:#35d67f!important;box-shadow:0 0 9px rgba(53,214,127,.46)!important}
.friendChatBtn{
  width:74px!important;height:38px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;
  border:1px solid #3b536f!important;border-radius:10px!important;background:#172638!important;color:#dceafb!important;cursor:pointer!important;
}
.friendChatBtn b{font-size:9px!important}.friendChatBtn span{font-size:13px!important}
.friendRequestRow,.friendPendingRow{grid-template-columns:44px minmax(0,1fr) auto!important;gap:10px!important;align-items:center!important}
.friendRequestActions{display:flex!important;gap:6px!important}
.friendRequestActions button,.friendCancelBtn{min-height:36px!important;padding:6px 10px!important;border-radius:9px!important;font-size:9px!important}
.friendRequestActions button span,.friendCancelBtn span{display:inline!important}
.friendsEmpty{min-height:220px!important;display:grid!important;place-items:center!important;align-content:center!important;gap:5px!important;padding:28px!important;text-align:center!important;color:#9fb0c3!important}
.friendsEmpty>span{font-size:34px!important}.friendsEmpty b{font-size:14px!important;color:#eef3f8!important}.friendsEmpty small{font-size:10px!important;max-width:330px!important}

/* Public profile: tighter hierarchy, compact information cards and predictable scrolling. */
#profileModal .profileModalCard{
  width:min(760px,calc(100vw - 24px))!important;
  max-width:760px!important;
  max-height:min(90dvh,800px)!important;
  border:1px solid rgba(119,143,174,.29)!important;
  border-radius:20px!important;
  background:#101925!important;
  box-shadow:0 28px 85px rgba(0,0,0,.5)!important;
}
#profileModal .gcProfileHero{
  flex:0 0 150px!important;min-height:150px!important;height:150px!important;max-height:150px!important;
  background-color:#101a27!important;
}
#profileModal .gcProfileTabs{
  flex:0 0 46px!important;min-height:46px!important;height:46px!important;
  padding:5px 7px!important;gap:5px!important;border-top:1px solid rgba(255,255,255,.03)!important;border-bottom:1px solid #2d3e52!important;
  background:#131e2b!important;
}
#profileModal .gcProfileTabs button{
  min-width:0!important;min-height:34px!important;height:34px!important;padding:4px 7px!important;
  border:1px solid transparent!important;border-radius:9px!important;font-size:9.5px!important;white-space:nowrap!important;
}
#profileModal .gcProfileTabs button.active{
  border-color:color-mix(in srgb,var(--profile-accent,#dcb85f) 72%,#39485a)!important;
  background:color-mix(in srgb,var(--profile-accent,#dcb85f) 12%,#172332)!important;
  box-shadow:inset 0 -2px 0 var(--profile-accent,#dcb85f)!important;
}
#profileModal .gcProfilePane{padding:12px!important;background:#0e1722!important}
#profileModal .gcProfilePane[data-profile-pane="info"]{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
#profileModal .gcProfilePane[data-profile-pane="info"] .profileInfoRow{
  min-height:64px!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;gap:5px!important;
  padding:10px 12px!important;border:1px solid #2d4055!important;border-radius:11px!important;background:linear-gradient(180deg,#111e2b,#0e1925)!important;
}
#profileModal .gcProfilePane[data-profile-pane="info"] .profileInfoRow span{font-size:9px!important;color:#a9b8c9!important;line-height:1.15!important}
#profileModal .gcProfilePane[data-profile-pane="info"] .profileInfoRow span b{color:#eaf0f7!important}
#profileModal .gcProfilePane[data-profile-pane="info"] .profileInfoRow strong{width:100%!important;font-size:11px!important;line-height:1.2!important;text-align:left!important;color:#f4f7fb!important;overflow-wrap:anywhere!important}

/* Recent chatters always becomes a real horizontal strip when the list is wider. */
.authRecent{min-width:0!important;overflow:hidden!important}
.authRecentUsers{
  width:100%!important;max-width:100%!important;min-width:0!important;
  display:flex!important;flex-wrap:nowrap!important;justify-content:flex-start!important;
  overflow-x:auto!important;overflow-y:hidden!important;overscroll-behavior-x:contain!important;
  -webkit-overflow-scrolling:touch!important;touch-action:pan-x!important;scrollbar-width:none!important;
}
.authRecentUsers::-webkit-scrollbar{display:none!important}
.authRecentUsers>.authRecentUser{flex:0 0 68px!important;min-width:68px!important;scroll-snap-align:start!important}

/* Verification reminder supports both entering and resending a code. */
.gcVerificationReminder{grid-template-columns:38px minmax(0,1fr) auto!important;border-radius:0 0 15px 15px!important}
.gcVerificationReminderActions{display:flex!important;align-items:center!important;gap:7px!important}
.gcVerificationReminderActions button{min-height:34px!important}
.gcVerificationReminderActions button.secondary{background:#171d25!important;color:#f3d17a!important;border-color:rgba(245,183,74,.38)!important}

@media(max-width:700px){
  #friendsModal:not(.hidden){padding:8px!important}
  #friendsModal .socialCard{width:calc(100vw - 16px)!important;max-height:calc(100dvh - 16px)!important;border-radius:17px!important}
  #friendsModal .modalTitle{padding:16px 58px 12px 15px!important}
  #friendsModal .modalTitle h3{font-size:19px!important}
  #friendsModal .socialList{max-height:calc(100dvh - 96px)!important;padding:10px!important;gap:10px!important}
  .friendsSummary>span{min-height:51px!important}.friendsSummary b{font-size:17px!important}.friendsSummary small{font-size:7.5px!important}
  .friendRequestRow,.friendPendingRow{grid-template-columns:40px minmax(0,1fr)!important;gap:9px!important}
  #friendsModal .uAvatar,#friendsModal .uAvatar img{width:40px!important;height:40px!important;min-width:40px!important}
  .friendRequestActions,.friendPendingRow>.friendCancelBtn{grid-column:2!important;justify-self:start!important;margin-top:2px!important}
  .friendAcceptedRow{grid-template-columns:minmax(0,1fr) 46px!important}
  .friendIdentity{grid-template-columns:40px minmax(0,1fr)!important}
  .friendChatBtn{width:44px!important;height:40px!important}.friendChatBtn b{display:none!important}

  #profileModal:not(.hidden){padding:6px!important}
  #profileModal .profileModalCard{
    width:calc(100vw - 12px)!important;max-width:520px!important;
    height:min(650px,calc(var(--gc-cody-vv-height,100dvh) - 12px))!important;
    min-height:min(500px,calc(var(--gc-cody-vv-height,100dvh) - 12px))!important;
    max-height:calc(var(--gc-cody-vv-height,100dvh) - 12px)!important;border-radius:17px!important;
  }
  #profileModal .gcProfileHero{
    flex:0 0 126px!important;min-height:126px!important;height:126px!important;max-height:126px!important;
  }
  #profileModal .gcProfileCounters{top:8px!important;left:9px!important;right:52px!important}
  #profileModal .gcProfileCounters span,#profileModal .gcProfileCounters button{height:29px!important;min-height:29px!important;padding:4px 8px!important}
  #profileModal .gcProfileAvatar{left:13px!important;top:49px!important;width:60px!important;height:60px!important;min-width:60px!important;min-height:60px!important}
  #profileModal .gcProfileAvatar img{width:60px!important;height:60px!important;min-width:60px!important;min-height:60px!important;max-width:60px!important;max-height:60px!important}
  #profileModal .gcProfileIdentity{left:85px!important;right:50px!important;top:51px!important}
  #profileModal .gcProfileIdentity h2{font-size:18px!important;margin:4px 0 2px!important}
  #profileModal .gcProfileIdentity p{font-size:9px!important}
  #profileModal .gcProfileTabs{grid-template-columns:repeat(5,minmax(0,1fr))!important;overflow:hidden!important;padding:5px!important;gap:4px!important}
  #profileModal .gcProfileTabs button{font-size:clamp(7px,2.15vw,9px)!important;padding:3px 2px!important}
  #profileModal .gcProfilePane{padding:8px!important}
  #profileModal .gcProfilePane[data-profile-pane="info"].active{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
  #profileModal .gcProfilePane[data-profile-pane="info"] .profileInfoRow{min-height:62px!important;padding:9px 10px!important}
  #profileModal .gcProfilePane[data-profile-pane="info"] .profileInfoRow span{font-size:8.5px!important}
  #profileModal .gcProfilePane[data-profile-pane="info"] .profileInfoRow strong{font-size:10px!important}

  .gcVerificationReminder{top:58px!important;width:calc(100vw - 14px)!important;grid-template-columns:32px minmax(0,1fr)!important;gap:8px!important;padding:9px 10px!important}
  .gcVerificationReminderActions{grid-column:2!important;display:grid!important;grid-template-columns:1fr 1fr!important;width:100%!important}
  .gcVerificationReminderActions button{width:100%!important;padding:7px 8px!important;font-size:9px!important}
}

@media(max-width:360px){
  .friendsSummary{gap:5px!important}.friendsSummary small{letter-spacing:0!important}
  #profileModal .gcProfilePane[data-profile-pane="info"] .profileInfoRow{min-height:58px!important;padding:8px!important}
  #profileModal .gcProfilePane[data-profile-pane="info"] .profileInfoRow strong{font-size:9.5px!important}
}


/* ============================================================
   v0.51.52 — social polish / online tagging / system conversation
   ============================================================ */
.mentionSuggestions{width:min(330px,calc(100vw - 20px))!important;max-height:min(260px,42dvh)!important;padding:6px!important;overflow-y:auto!important;overflow-x:hidden!important;border:1px solid rgba(111,138,171,.38)!important;border-radius:14px!important;background:linear-gradient(180deg,#172230,#111a26)!important;box-shadow:0 18px 52px rgba(0,0,0,.55)!important;scrollbar-width:thin!important;scrollbar-color:#617084 transparent!important}
.mentionSuggestions button{min-height:48px!important;grid-template-columns:38px minmax(0,1fr)!important;gap:9px!important;padding:6px 8px!important;border-radius:10px!important}.mentionSuggestions button+button{margin-top:2px!important}.mentionSuggestions .uAvatar,.mentionSuggestions .uAvatar img{width:36px!important;height:36px!important;min-width:36px!important}.mentionSuggestions button span:last-child{min-width:0!important}.mentionSuggestions b{font-size:11px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.mentionSuggestions small{font-size:9px!important;color:#9eafc2!important}
.actionTray:not(.hidden){display:flex!important;flex-direction:column!important}.actionTray{left:58px!important;right:auto!important;bottom:66px!important;width:min(650px,calc(100vw - 350px))!important;max-height:min(74dvh,650px)!important;padding:0!important;overflow:hidden!important;border-radius:20px!important;border:1px solid rgba(113,139,170,.32)!important;background:linear-gradient(180deg,#182433 0%,#111a26 100%)!important;box-shadow:0 28px 80px rgba(0,0,0,.58)!important}.actionTray .addonTrayHead{flex:0 0 auto!important;align-items:center!important;padding:14px 15px 12px!important;margin:0!important;border-bottom:1px solid rgba(123,145,171,.18)!important;background:rgba(14,22,33,.76)!important}.actionTray .addonTrayHead b{font-size:16px!important;line-height:1.15!important}.actionTray .addonTrayHead small{font-size:10px!important;margin-top:3px!important}.actionTray #actionTrayClose{width:34px!important;height:34px!important;min-width:34px!important;border-radius:11px!important}.actionTray .addonTrayQuick{flex:0 0 auto!important;display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;gap:12px!important;align-items:center!important;margin:11px 12px 7px!important;padding:10px 11px!important;border-radius:13px!important;background:linear-gradient(90deg,rgba(220,184,95,.11),rgba(37,51,69,.5))!important}.actionTray .addonSettingsLaunch{min-height:40px!important;height:40px!important;padding:0 13px!important;border-radius:10px!important;font-size:10px!important}.actionTray .addonTrayQuick small{font-size:10px!important;line-height:1.35!important}.actionTray .speelcafeTraySummary{flex:0 0 auto!important;margin:4px 12px 7px!important}.actionTray .addonTrayGrid{flex:1 1 auto!important;min-height:0!important;display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:8px!important;padding:7px 12px 13px!important;overflow-y:auto!important;overflow-x:hidden!important;scrollbar-width:thin!important;scrollbar-color:#627288 transparent!important}.actionTray .addonTrayGrid>button{min-height:76px!important;height:auto!important;padding:8px 5px!important;gap:6px!important;justify-content:center!important;border:1px solid rgba(103,129,159,.18)!important;border-radius:13px!important;background:linear-gradient(180deg,rgba(34,48,66,.82),rgba(21,31,45,.82))!important}.actionTray .addonTrayGrid>button:hover,.actionTray .addonTrayGrid>button:focus-visible{border-color:rgba(222,185,93,.48)!important;background:linear-gradient(180deg,rgba(48,62,81,.9),rgba(26,38,54,.9))!important}.actionTray .addonTrayGrid .addonIcon{width:39px!important;height:39px!important;min-width:39px!important;min-height:39px!important;box-shadow:none!important}.actionTray .addonTrayGrid b{max-width:100%!important;font-size:9px!important;line-height:1.15!important;text-align:center!important;overflow-wrap:anywhere!important}
.inboxConversation.systemConversation{border-color:rgba(222,185,93,.32)!important;background:linear-gradient(90deg,rgba(222,185,93,.07),rgba(27,39,55,.5))!important}.gcSystemPmBadge{display:inline-flex!important;align-items:center!important;min-height:16px!important;margin-left:6px!important;padding:1px 5px!important;border-radius:999px!important;background:rgba(222,185,93,.15)!important;border:1px solid rgba(222,185,93,.32)!important;color:#f1d27c!important;font-size:7px!important;font-style:normal!important;letter-spacing:.06em!important;vertical-align:middle!important}
.gcCommunityEvent{min-height:42px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:9px!important;margin:5px 10px!important;padding:8px 12px!important;border:1px solid rgba(221,184,92,.24)!important;border-radius:12px!important;background:linear-gradient(90deg,rgba(221,184,92,.08),rgba(56,76,104,.11),rgba(221,184,92,.06))!important;text-align:center!important;color:#c7d2df!important}.gcCommunityEventIcon{font-size:18px!important;line-height:1!important;filter:drop-shadow(0 3px 7px rgba(0,0,0,.3))!important}.gcCommunityEventText{font-size:11px!important;line-height:1.35!important}.gcCommunityEventText b,.gcCommunityEventText strong{color:#f2d37d!important;font-weight:900!important}
@media(max-width:900px){.actionTray{left:8px!important;right:8px!important;bottom:62px!important;width:auto!important;max-height:min(72dvh,620px)!important}.actionTray .addonTrayGrid{grid-template-columns:repeat(4,minmax(0,1fr))!important}}
@media(max-width:620px){.actionTray{left:6px!important;right:6px!important;bottom:60px!important;border-radius:17px!important;max-height:min(70dvh,600px)!important}.actionTray .addonTrayHead{padding:11px 12px 10px!important}.actionTray .addonTrayHead b{font-size:15px!important}.actionTray .addonTrayHead small{font-size:9px!important}.actionTray .addonTrayQuick{grid-template-columns:1fr!important;gap:5px!important;margin:8px 9px 5px!important;padding:8px!important}.actionTray .addonTrayQuick small{display:none!important}.actionTray .addonSettingsLaunch{width:100%!important;min-height:38px!important;height:38px!important}.actionTray .addonTrayGrid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important;padding:6px 9px 10px!important}.actionTray .addonTrayGrid>button{min-height:70px!important;padding:7px 3px!important}.actionTray .addonTrayGrid .addonIcon{width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important}.actionTray .addonTrayGrid b{font-size:8.5px!important}.gcCommunityEvent{margin:4px 5px!important;padding:7px 9px!important}.gcCommunityEventText{font-size:10px!important}}
@media(max-width:390px){.actionTray .addonTrayGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.actionTray .addonTrayGrid>button{min-height:66px!important}}


/* GC Core 0.51.54 — FINAL PUBLIC PROFILE POLISH
   Code-only layout fix. Keeps profile logic intact, removes overlap,
   balances the information grid and gives desktop/mobile one hierarchy. */
#profileModal .profileModalCard{
  width:min(760px,calc(100vw - 24px))!important;
  max-width:760px!important;
  padding:0!important;
  overflow:hidden!important;
  border-radius:20px!important;
  border:1px solid #34485f!important;
  background:#0f1824!important;
  box-shadow:0 26px 80px rgba(0,0,0,.52)!important;
}
#profileModal #profileContent,
#profileModal .gcProfile{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  margin:0!important;
  background:#0f1824!important;
}
#profileModal .gcProfileHero{
  position:relative!important;
  flex:0 0 174px!important;
  width:100%!important;
  min-height:174px!important;
  height:174px!important;
  max-height:174px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:center!important;
  gap:0!important;
  padding:17px 76px 14px!important;
  overflow:hidden!important;
  text-align:center!important;
  background-color:#0d1723!important;
  border-bottom:1px solid rgba(255,255,255,.04)!important;
}
#profileModal .gcProfileHero::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  pointer-events:none!important;
  background:
    linear-gradient(180deg,rgba(5,10,17,.08),rgba(5,10,17,.74)),
    radial-gradient(circle at 50% 0,color-mix(in srgb,var(--profile-accent,#dcb85f) 13%,transparent),transparent 55%)!important;
}
#profileModal .gcProfileCounters{
  position:absolute!important;
  z-index:4!important;
  left:13px!important;
  top:13px!important;
  right:auto!important;
  display:flex!important;
  gap:7px!important;
}
#profileModal .gcProfileCounters span,
#profileModal .gcProfileCounters button{
  height:34px!important;
  min-height:34px!important;
  min-width:44px!important;
  padding:5px 9px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:4px!important;
  border:1px solid #34475f!important;
  border-radius:999px!important;
  background:rgba(10,18,29,.88)!important;
  color:#f3f6fa!important;
  font-size:11px!important;
  line-height:1!important;
  backdrop-filter:blur(8px)!important;
}
#profileModal .gcProfileAvatar{
  position:relative!important;
  z-index:3!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  bottom:auto!important;
  transform:none!important;
  width:78px!important;
  height:78px!important;
  min-width:78px!important;
  min-height:78px!important;
  margin:0 0 7px!important;
  overflow:visible!important;
}
#profileModal .gcProfileAvatar img{
  display:block!important;
  width:78px!important;
  height:78px!important;
  min-width:78px!important;
  min-height:78px!important;
  max-width:78px!important;
  max-height:78px!important;
  border:3px solid #eef4fb!important;
  border-radius:50%!important;
  object-fit:cover!important;
  box-shadow:0 10px 28px rgba(0,0,0,.34)!important;
}
#profileModal .gcProfileAvatar i{
  right:0!important;
  bottom:4px!important;
  width:15px!important;
  height:15px!important;
  border-width:2px!important;
}
#profileModal .gcProfileIdentity{
  position:relative!important;
  z-index:3!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  bottom:auto!important;
  width:100%!important;
  min-width:0!important;
  padding:0!important;
  text-align:center!important;
}
#profileModal .gcProfileIdentity small{
  display:inline-flex!important;
  width:auto!important;
  max-width:100%!important;
  min-height:22px!important;
  align-items:center!important;
  justify-content:center!important;
  padding:3px 9px!important;
  border-radius:999px!important;
  font-size:8px!important;
  line-height:1!important;
  font-weight:950!important;
  letter-spacing:.08em!important;
}
#profileModal .gcProfileIdentity h2{
  margin:5px 0 2px!important;
  font-size:24px!important;
  line-height:1.05!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
#profileModal .gcProfileIdentity p{
  margin:0!important;
  color:#c5d0dc!important;
  font-size:10px!important;
  line-height:1.25!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
#profileModal .profileFriendStatus{
  margin-top:5px!important;
}
#profileModal .gcProfileQuickActions{
  position:relative!important;
  z-index:5!important;
  flex:0 0 54px!important;
  min-height:54px!important;
  width:100%!important;
  margin:0!important;
  padding:8px 12px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-bottom:1px solid #2d4055!important;
  background:#111c29!important;
}
#profileModal .gcProfileQuickActions button{
  width:min(280px,100%)!important;
  height:38px!important;
  min-height:38px!important;
  padding:0 16px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  border:1px solid color-mix(in srgb,var(--profile-accent,#dcb85f) 80%,#6f7781)!important;
  border-radius:11px!important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--profile-accent,#dcb85f) 92%,#fff),color-mix(in srgb,var(--profile-accent,#dcb85f) 82%,#8b6c2d))!important;
  color:#111722!important;
  font-size:11px!important;
  font-weight:950!important;
  box-shadow:0 6px 16px rgba(0,0,0,.18)!important;
}
#profileModal .gcProfileQuickActions button:hover{
  transform:none!important;
  filter:brightness(1.04)!important;
}
#profileModal .gcProfileTabs{
  position:relative!important;
  z-index:3!important;
  flex:0 0 48px!important;
  min-height:48px!important;
  height:48px!important;
  width:100%!important;
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:5px!important;
  margin:0!important;
  padding:6px 8px!important;
  overflow:hidden!important;
  border-top:0!important;
  border-bottom:1px solid #2d4055!important;
  background:#131e2b!important;
}
#profileModal .gcProfileTabs button{
  width:100%!important;
  min-width:0!important;
  height:36px!important;
  min-height:36px!important;
  padding:0 6px!important;
  border:1px solid #2d4055!important;
  border-radius:9px!important;
  background:#101a27!important;
  color:#dfe7f0!important;
  font-size:9px!important;
  font-weight:850!important;
  line-height:1!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
#profileModal .gcProfileTabs button.active{
  color:#fff!important;
  border-color:var(--profile-accent,#dcb85f)!important;
  background:color-mix(in srgb,var(--profile-accent,#dcb85f) 14%,#172332)!important;
  box-shadow:inset 0 -2px 0 var(--profile-accent,#dcb85f)!important;
}
#profileModal .gcProfilePane{
  min-width:0!important;
  margin:0!important;
  padding:12px!important;
  background:#0d1722!important;
}
#profileModal .gcProfilePane[data-profile-pane="info"].active{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:9px!important;
  align-content:start!important;
}
#profileModal .gcProfilePane[data-profile-pane="info"] .profileInfoRow{
  min-width:0!important;
  min-height:64px!important;
  margin:0!important;
  padding:11px 13px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  grid-template-rows:auto auto!important;
  align-content:center!important;
  gap:5px 12px!important;
  border:1px solid #2d4055!important;
  border-radius:12px!important;
  background:linear-gradient(180deg,#111e2b,#0e1925)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.015)!important;
}
#profileModal .gcProfilePane[data-profile-pane="info"] .profileInfoRow:nth-child(odd):last-child{
  grid-column:1/-1!important;
  min-height:60px!important;
}
#profileModal .gcProfilePane[data-profile-pane="info"] .profileInfoRow span{
  grid-column:1/-1!important;
  min-width:0!important;
  color:#a9b8c9!important;
  font-size:9px!important;
  line-height:1.1!important;
}
#profileModal .gcProfilePane[data-profile-pane="info"] .profileInfoRow span b{
  color:#edf3f8!important;
}
#profileModal .gcProfilePane[data-profile-pane="info"] .profileInfoRow strong{
  grid-column:1/-1!important;
  min-width:0!important;
  width:100%!important;
  color:#fff!important;
  font-size:11px!important;
  line-height:1.2!important;
  font-weight:850!important;
  text-align:left!important;
  overflow-wrap:anywhere!important;
}
#profileModal .gcProfilePane[data-profile-pane="info"] .profileInfoRow:nth-child(odd):last-child strong{
  font-size:12px!important;
}

/* Keep the card compact on desktop instead of filling empty vertical space. */
@media(min-width:701px){
  #profileModal .profileModalCard{
    height:auto!important;
    min-height:0!important;
    max-height:min(92dvh,760px)!important;
  }
  #profileModal #profileContent,
  #profileModal .gcProfile{
    height:auto!important;
    min-height:0!important;
    max-height:min(92dvh,760px)!important;
  }
  #profileModal .gcProfilePane{
    flex:0 1 auto!important;
    height:auto!important;
    max-height:390px!important;
    overflow-y:auto!important;
  }
}

/* Mobile remains compact: PM toolbar gets its own line and info cards stack cleanly. */
@media(max-width:700px){
  #profileModal .profileModalCard{
    width:calc(100vw - 12px)!important;
    max-width:520px!important;
    height:min(690px,calc(var(--gc-cody-vv-height,100dvh) - 12px))!important;
    max-height:calc(var(--gc-cody-vv-height,100dvh) - 12px)!important;
  }
  #profileModal .gcProfileHero{
    flex:0 0 132px!important;
    min-height:132px!important;
    height:132px!important;
    max-height:132px!important;
    padding:12px 58px 10px!important;
  }
  #profileModal .gcProfileAvatar{
    width:62px!important;height:62px!important;min-width:62px!important;min-height:62px!important;margin-bottom:5px!important;
  }
  #profileModal .gcProfileAvatar img{
    width:62px!important;height:62px!important;min-width:62px!important;min-height:62px!important;max-width:62px!important;max-height:62px!important;
  }
  #profileModal .gcProfileIdentity h2{font-size:19px!important;margin-top:3px!important}
  #profileModal .gcProfileIdentity p{font-size:9px!important}
  #profileModal .gcProfileQuickActions{
    flex-basis:50px!important;min-height:50px!important;padding:6px 9px!important;
  }
  #profileModal .gcProfileQuickActions button{
    width:100%!important;height:38px!important;min-height:38px!important;
  }
  #profileModal .gcProfileTabs{
    flex-basis:46px!important;min-height:46px!important;height:46px!important;padding:5px!important;gap:4px!important;
  }
  #profileModal .gcProfileTabs button{
    min-height:36px!important;height:36px!important;padding:0 2px!important;font-size:clamp(7px,2.2vw,9px)!important;
  }
  #profileModal .gcProfilePane{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow-y:auto!important;
    padding:8px!important;
  }
  #profileModal .gcProfilePane[data-profile-pane="info"].active{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
  }
  #profileModal .gcProfilePane[data-profile-pane="info"] .profileInfoRow{
    min-height:59px!important;padding:9px 10px!important;
  }
  #profileModal .gcProfilePane[data-profile-pane="info"] .profileInfoRow span{font-size:8px!important}
  #profileModal .gcProfilePane[data-profile-pane="info"] .profileInfoRow strong{font-size:10px!important}
}
@media(max-width:390px){
  #profileModal .gcProfilePane[data-profile-pane="info"].active{
    grid-template-columns:1fr!important;
  }
  #profileModal .gcProfilePane[data-profile-pane="info"] .profileInfoRow:nth-child(odd):last-child{
    grid-column:auto!important;
  }
}


/* GC Core 0.51.55 — room/private audio + video attachments */
.gcAudioAttachment{display:grid!important;grid-template-columns:42px minmax(0,1fr)!important;align-items:center!important;gap:10px!important;width:min(430px,100%)!important;min-width:0!important;margin-top:6px!important;padding:10px!important;border:1px solid var(--line,#2d4055)!important;border-radius:14px!important;background:linear-gradient(135deg,rgba(20,34,50,.96),rgba(10,20,31,.97))!important}.gcMediaGlyph{display:grid!important;place-items:center!important;width:42px!important;height:42px!important;border-radius:12px!important;background:rgba(220,184,95,.14)!important;font-size:20px!important}.gcAudioAttachmentMain{min-width:0!important;display:grid!important;gap:5px!important}.gcAudioAttachmentMain>b{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-size:11px!important}.gcAudioAttachmentMain audio{display:block!important;width:100%!important;min-width:0!important;height:36px!important}.gcAudioAttachmentMain>a,.gcVideoAttachment>a,.gcProfileMusicOpen{color:#9fc3ef!important;font-size:9px!important;text-decoration:none!important}.gcAudioAttachmentMain>a:hover,.gcVideoAttachment>a:hover,.gcProfileMusicOpen:hover{text-decoration:underline!important}.gcVideoAttachment{width:min(520px,100%)!important;min-width:0!important;margin-top:6px!important;padding:9px!important;border:1px solid var(--line,#2d4055)!important;border-radius:14px!important;background:#0a1521!important}.gcMediaFileHead{display:flex!important;align-items:center!important;gap:7px!important;margin-bottom:7px!important}.gcMediaFileHead b{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-size:11px!important}.gcVideoAttachment .chatMediaVideo{margin:0 0 6px!important;width:100%!important}.gcFileAttachment{display:flex!important;align-items:center!important;gap:9px!important;width:min(390px,100%)!important;margin-top:6px!important;padding:10px 12px!important;border:1px solid var(--line,#2d4055)!important;border-radius:13px!important;background:#0b1724!important;color:inherit!important;text-decoration:none!important}.gcFileAttachment>span{font-size:20px!important}.gcFileAttachment b,.gcFileAttachment small{display:block!important}.gcFileAttachment small{color:var(--muted)!important;margin-top:2px!important}.gcProfileMusicOpen{display:inline-block!important;margin-top:5px!important}@media(max-width:520px){.gcAudioAttachment{grid-template-columns:34px minmax(0,1fr)!important;padding:8px!important;gap:7px!important}.gcMediaGlyph{width:34px!important;height:34px!important;font-size:17px!important}.gcAudioAttachmentMain audio{height:34px!important}}


/* GC Core 0.51.56 — compact GIFs in private chat
   Applies to Giphy links AND uploaded .gif files, without shrinking normal photos. */
#pmModal .pmMessages .pmBody img.giphyInline,
#pmModal .pmMessages .pmBody img.gcGifMedia,
#pmModal .pmMessages a.gcGifMediaLink > img.chatMedia.gcGifMedia{
  display:block!important;
  width:auto!important;
  height:auto!important;
  max-width:min(220px,62vw)!important;
  max-height:170px!important;
  object-fit:contain!important;
  border-radius:10px!important;
  margin:5px 0!important;
}
#pmModal .pmMessages a.gcGifMediaLink{
  display:inline-block!important;
  width:auto!important;
  max-width:100%!important;
  line-height:0!important;
}
@media(max-width:700px){
  #pmModal .pmMessages .pmBody img.giphyInline,
  #pmModal .pmMessages .pmBody img.gcGifMedia,
  #pmModal .pmMessages a.gcGifMediaLink > img.chatMedia.gcGifMedia{
    max-width:min(180px,54vw)!important;
    max-height:135px!important;
    border-radius:9px!important;
  }
}
@media(max-width:390px){
  #pmModal .pmMessages .pmBody img.giphyInline,
  #pmModal .pmMessages .pmBody img.gcGifMedia,
  #pmModal .pmMessages a.gcGifMediaLink > img.chatMedia.gcGifMedia{
    max-width:min(160px,52vw)!important;
    max-height:120px!important;
  }
}


/* GC Core 0.51.57 — compactere en rustigere profielmuziek */
#profileModal .gcPublicProfileMusic{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  gap:8px!important;
  width:100%!important;
  padding:9px 12px!important;
  border-top:1px solid color-mix(in srgb,var(--profile-accent,#dcb85f) 28%,var(--line))!important;
  border-bottom:1px solid var(--line)!important;
  background:linear-gradient(180deg,#151e2b,#121b27)!important;
}
#profileModal .gcPublicProfileMusicHead{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  min-width:0!important;
  margin:0!important;
}
#profileModal .gcPublicProfileMusicHead>span{
  flex:0 0 28px!important;
  width:28px!important;
  height:28px!important;
  border-radius:9px!important;
  font-size:15px!important;
}
#profileModal .gcPublicProfileMusicHead>div{
  min-width:0!important;
  flex:1 1 auto!important;
}
#profileModal .gcPublicProfileMusicHead b{
  font-size:11px!important;
  line-height:1.15!important;
}
#profileModal .gcPublicProfileMusicHead small{
  margin-top:1px!important;
  font-size:8px!important;
  line-height:1.15!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
#profileModal .gcPublicProfileMusicManage{
  flex:0 0 auto!important;
  min-height:30px!important;
  height:30px!important;
  padding:0 10px!important;
  border-radius:9px!important;
  font-size:9px!important;
}
#profileModal .gcPublicProfileMusicItems{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:6px!important;
  min-width:0!important;
}
#profileModal .gcUploadedProfileTrack{
  display:grid!important;
  grid-template-columns:minmax(105px,.45fr) minmax(230px,1fr) auto!important;
  align-items:center!important;
  gap:9px!important;
  min-width:0!important;
  min-height:0!important;
  padding:7px 9px!important;
  border-radius:11px!important;
  background:#0c1622!important;
}
#profileModal .gcUploadedProfileTrack>div{
  min-width:0!important;
}
#profileModal .gcUploadedProfileTrack small{
  font-size:8px!important;
  line-height:1.1!important;
}
#profileModal .gcUploadedProfileTrack b{
  margin-top:2px!important;
  font-size:10px!important;
  line-height:1.15!important;
}
#profileModal .gcUploadedProfileTrack audio{
  width:100%!important;
  min-width:0!important;
  height:32px!important;
}
#profileModal .gcUploadedProfileTrack .gcProfileMusicOpen{
  margin:0!important;
  padding:6px 8px!important;
  border:1px solid #2f4258!important;
  border-radius:8px!important;
  background:#111e2c!important;
  font-size:8px!important;
  white-space:nowrap!important;
}
#profileModal .gcSpotifyProfileTrack{
  min-height:56px!important;
  padding:7px 9px!important;
  border-radius:11px!important;
  grid-template-columns:40px minmax(0,1fr) auto!important;
  gap:8px!important;
}
#profileModal .gcSpotifyProfileTrack img,
#profileModal .gcSpotifyLogo{
  width:40px!important;
  height:40px!important;
}
#profileModal .gcSpotifyProfileTrack small{font-size:8px!important}
#profileModal .gcSpotifyProfileTrack b{font-size:10px!important}
#profileModal .gcSpotifyProfileTrack em{font-size:9px!important}
#profileModal .gcSpotifyProfileTrack>strong{font-size:8px!important}
#profileModal .gcPublicProfileMusicEmpty{
  min-height:52px!important;
  padding:8px 10px!important;
  border-radius:11px!important;
}
#profileModal .gcPublicProfileMusicEmpty>span{
  width:34px!important;height:34px!important;font-size:17px!important;
}

@media(max-width:700px){
  #profileModal .gcPublicProfileMusic{
    padding:8px!important;
    gap:7px!important;
  }
  #profileModal .gcPublicProfileMusicHead{
    flex-wrap:nowrap!important;
    align-items:center!important;
  }
  #profileModal .gcPublicProfileMusicHead small{
    display:none!important;
  }
  #profileModal .gcPublicProfileMusicManage{
    width:auto!important;
    margin-left:auto!important;
    padding:0 8px!important;
  }
  #profileModal .gcUploadedProfileTrack{
    grid-template-columns:minmax(0,1fr)!important;
    gap:5px!important;
    padding:7px!important;
  }
  #profileModal .gcUploadedProfileTrack audio{
    height:31px!important;
  }
  #profileModal .gcUploadedProfileTrack .gcProfileMusicOpen{
    justify-self:start!important;
    padding:5px 7px!important;
  }
  #profileModal .gcSpotifyProfileTrack{
    grid-template-columns:36px minmax(0,1fr)!important;
  }
  #profileModal .gcSpotifyProfileTrack img,
  #profileModal .gcSpotifyLogo{
    width:36px!important;height:36px!important;
  }
}


/* GC Core 0.51.58 — refresh-safe room history + genuinely compact PM GIFs + profile music polish */

/* Private GIFs: the whole bubble becomes compact, not only the image.
   pmGifMessage is added from metadata/body so hashed upload URLs are covered too. */
#pmModal .pmMessages .pm.pmGifMessage{
  width:max-content!important;
  max-width:180px!important;
}
#pmModal .pmMessages .pm.pmGifMessage .pmBubble{
  width:max-content!important;
  min-width:0!important;
  max-width:180px!important;
  padding:7px!important;
}
#pmModal .pmMessages .pm.pmGifMessage .pmBody{
  width:max-content!important;
  max-width:150px!important;
  min-width:0!important;
}
#pmModal .pmMessages .pm.pmGifMessage .pmBody img,
#pmModal .pmMessages .pmBody img.gcPmDetectedGif,
#pmModal .pmMessages .pmBody img.giphyInline,
#pmModal .pmMessages .pmBody img.gcGifMedia{
  display:block!important;
  width:auto!important;
  height:auto!important;
  max-width:140px!important;
  max-height:100px!important;
  object-fit:contain!important;
  border-radius:8px!important;
  margin:0!important;
}
#pmModal .pmMessages .pm.pmGifMessage .pmMeta{
  max-width:150px!important;
  margin-top:4px!important;
}
@media(max-width:700px){
  #pmModal .pmMessages .pm.pmGifMessage,
  #pmModal .pmMessages .pm.pmGifMessage .pmBubble{max-width:150px!important}
  #pmModal .pmMessages .pm.pmGifMessage .pmBody{max-width:122px!important}
  #pmModal .pmMessages .pm.pmGifMessage .pmBody img,
  #pmModal .pmMessages .pmBody img.gcPmDetectedGif,
  #pmModal .pmMessages .pmBody img.giphyInline,
  #pmModal .pmMessages .pmBody img.gcGifMedia{
    max-width:118px!important;
    max-height:84px!important;
  }
  #pmModal .pmMessages .pm.pmGifMessage .pmMeta{max-width:122px!important;font-size:8px!important}
}

/* Profile music: one slim media bar instead of a large standalone block. */
#profileModal .gcPublicProfileMusic{
  gap:5px!important;
  padding:6px 10px!important;
  background:#121c29!important;
  border-top:1px solid color-mix(in srgb,var(--profile-accent,#dcb85f) 25%,var(--line))!important;
  border-bottom:1px solid var(--line)!important;
}
#profileModal .gcPublicProfileMusicHead{
  min-height:27px!important;
  gap:7px!important;
}
#profileModal .gcPublicProfileMusicHead>span{
  flex:0 0 24px!important;
  width:24px!important;
  height:24px!important;
  border-radius:7px!important;
  font-size:13px!important;
}
#profileModal .gcPublicProfileMusicHead b{font-size:10px!important}
#profileModal .gcPublicProfileMusicHead small{font-size:7px!important;margin-top:0!important}
#profileModal .gcPublicProfileMusicManage{
  min-height:26px!important;
  height:26px!important;
  padding:0 8px!important;
  border-radius:7px!important;
  font-size:8px!important;
}
#profileModal .gcPublicProfileMusicItems{gap:4px!important}
#profileModal .gcUploadedProfileTrack{
  min-height:44px!important;
  padding:5px 7px!important;
  grid-template-columns:minmax(100px,155px) minmax(200px,1fr) 27px!important;
  gap:7px!important;
  border-radius:9px!important;
}
#profileModal .gcProfileMusicMeta{min-width:0!important}
#profileModal .gcUploadedProfileTrack small{
  font-size:7px!important;
  line-height:1!important;
}
#profileModal .gcUploadedProfileTrack b{
  margin-top:2px!important;
  font-size:9px!important;
  line-height:1.05!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
#profileModal .gcUploadedProfileTrack audio{
  height:28px!important;
  min-height:28px!important;
}
#profileModal .gcUploadedProfileTrack .gcProfileMusicOpen{
  display:grid!important;
  place-items:center!important;
  width:27px!important;
  height:27px!important;
  margin:0!important;
  padding:0!important;
  border-radius:7px!important;
  font-size:13px!important;
  line-height:1!important;
  text-decoration:none!important;
}
#profileModal .gcSpotifyProfileTrack{
  min-height:44px!important;
  padding:5px 7px!important;
}
@media(max-width:700px){
  #profileModal .gcPublicProfileMusic{padding:5px 7px!important}
  #profileModal .gcPublicProfileMusicHead small{display:none!important}
  #profileModal .gcUploadedProfileTrack{
    grid-template-columns:minmax(0,1fr) 27px!important;
    grid-template-areas:"meta open" "audio audio"!important;
    gap:4px 7px!important;
  }
  #profileModal .gcUploadedProfileTrack .gcProfileMusicMeta{grid-area:meta!important}
  #profileModal .gcUploadedProfileTrack audio{grid-area:audio!important;width:100%!important}
  #profileModal .gcUploadedProfileTrack .gcProfileMusicOpen{grid-area:open!important}
}

/* GC Core 0.51.59 — responsive shell, profile input direction, About-me polish */
#profileForm,
#profileForm input:not([type="color"]):not([type="checkbox"]):not([type="radio"]),
#profileForm textarea{
  direction:ltr!important;
  text-align:left!important;
  unicode-bidi:normal!important;
  writing-mode:horizontal-tb!important;
}
#profileModal .gcProfilePane.gcProfileAboutPane.active{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:9px!important;
  align-content:start!important;
}
#profileModal .gcProfileAboutPane .profileBio,
#profileModal .gcProfileAboutPane .profileActions{
  grid-column:1/-1!important;
}
#profileModal .gcProfileAboutPane .profileBio{
  margin:0!important;
  padding:12px 14px!important;
  min-height:0!important;
  border:1px solid #2d4055!important;
  border-radius:12px!important;
  background:linear-gradient(180deg,#111e2b,#0e1925)!important;
  line-height:1.5!important;
}
#profileModal .gcProfileAboutPane .profileInfoRow{
  min-height:62px!important;
  margin:0!important;
  padding:10px 12px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:flex-start!important;
  gap:5px!important;
  border:1px solid #2d4055!important;
  border-radius:12px!important;
  background:linear-gradient(180deg,#111e2b,#0e1925)!important;
}
#profileModal .gcProfileAboutPane .profileInfoRow span{color:#a9b8c9!important;font-size:9px!important}
#profileModal .gcProfileAboutPane .profileInfoRow strong{color:#fff!important;font-size:11px!important;text-align:left!important;overflow-wrap:anywhere!important}
#profileModal .gcProfileAboutPane .profileActions{margin-top:2px!important}

/* Nieuwe-berichten knop blijft dicht bij de composer, maar bedekt de invoer niet. */
.newMessages{bottom:66px!important;z-index:35!important;max-width:min(520px,calc(100% - 24px))!important;white-space:nowrap!important}

/* Alle grote chatvensters moeten op ieder scherm volledig bereikbaar blijven. */
@media(max-width:900px){
  .modal{
    padding:max(6px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left))!important;
    align-items:stretch!important;
    overflow:hidden!important;
  }
  .modal>.modalCard,
  .modal>.profileModalCard,
  .modal>.profileStudioCard,
  .modal>.chatOptionsCard,
  .modal>.addonModal,
  .modal>.gcAddonModalCard{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    max-height:calc(var(--gc-cody-vv-height,100dvh) - 12px)!important;
    height:auto!important;
    margin:auto!important;
    overflow:auto!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
  }
  #editProfileModal .profileStudioCard{
    height:calc(var(--gc-cody-vv-height,100dvh) - 12px)!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
  }
  #editProfileModal .profileStudioLayout{
    min-height:0!important;
    flex:1 1 auto!important;
    overflow:auto!important;
    -webkit-overflow-scrolling:touch!important;
  }
  #editProfileModal .profileStudioEditor,
  #editProfileModal .profileForm,
  #editProfileModal .profileTabPane{min-width:0!important;max-width:100%!important}
  #editProfileModal .profileEditorActions{
    position:sticky!important;
    bottom:0!important;
    z-index:8!important;
    padding-bottom:max(10px,env(safe-area-inset-bottom))!important;
  }
  .actionTray{
    max-height:calc(var(--gc-cody-vv-height,100dvh) - 132px)!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
  }
  #profileModal .gcProfileAboutPane.active{grid-template-columns:1fr!important}
  #profileModal .gcProfileAboutPane .profileBio,
  #profileModal .gcProfileAboutPane .profileActions{grid-column:auto!important}
  html.gcCodyMobileShell .newMessages{bottom:118px!important;left:50%!important;right:auto!important;width:auto!important;max-width:calc(100vw - 24px)!important}
  html.gcCodyMobileShell.gcKeyboardOpen .newMessages{bottom:58px!important}
}
@media(max-width:520px){
  .modal>.modalCard,.modal>.profileModalCard,.modal>.profileStudioCard{border-radius:14px!important}
  #editProfileModal .profileEditorTabs{max-width:100%!important;overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:none!important}
  #editProfileModal .profileEditorTabs::-webkit-scrollbar{display:none!important}
  #editProfileModal .profileEditorTabs button{flex:0 0 auto!important;min-width:112px!important}
  html.gcCodyMobileShell .newMessages{bottom:112px!important;font-size:10px!important;padding:6px 10px!important}
  html.gcCodyMobileShell.gcKeyboardOpen .newMessages{bottom:56px!important}
}


/* GC Core 0.51.59 COMPLETE — final device safety / compact profile / new-message placement */
.newMessages{
  left:50%!important;right:auto!important;width:max-content!important;min-width:0!important;
  max-width:min(420px,calc(100% - 20px))!important;bottom:52px!important;
  transform:translateX(-50%)!important;padding:6px 12px!important;border-radius:999px!important;
  line-height:1.15!important;text-align:center!important;white-space:nowrap!important;
  overflow:hidden!important;text-overflow:ellipsis!important
}
html.gcCodyMobileShell .newMessages{bottom:66px!important;max-width:calc(100vw - 18px)!important}
html.gcCodyMobileShell.gcKeyboardOpen .newMessages{bottom:50px!important}

#profileModal{
  padding:max(6px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-right))
          max(6px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left))!important;
  overflow:hidden!important
}
#profileModal .profileModalCard{
  width:min(760px,calc(100vw - 12px))!important;max-width:760px!important;height:auto!important;
  max-height:calc(var(--gc-cody-vv-height,100dvh) - 12px)!important;min-height:0!important;
  display:flex!important;flex-direction:column!important;overflow:hidden!important;margin:auto!important
}
#profileModal #profileContent{
  flex:1 1 auto!important;min-height:0!important;max-height:100%!important;overflow-y:auto!important;
  overflow-x:hidden!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important
}
#profileModal .gcProfile{min-width:0!important;max-width:100%!important;min-height:0!important;height:auto!important}
#profileModal .gcProfileHero,#profileModal .gcProfileQuickActions,#profileModal .gcPublicProfileMusic,
#profileModal .gcProfileLevel,#profileModal .gcProfileTabs{flex-shrink:0!important}
#profileModal .gcProfilePane{min-width:0!important}
#profileModal .gcProfilePane.active{max-width:100%!important}

#profileModal .gcProfileLevel{
  margin:7px 10px!important;padding:8px 10px!important;min-height:52px!important;height:auto!important;
  grid-template-columns:38px minmax(0,1fr)!important;gap:9px!important;border-radius:11px!important
}
#profileModal .gcProfileLevelIcon{width:36px!important;height:36px!important;font-size:18px!important}
#profileModal .gcProfileLevelMain strong{font-size:13px!important;margin:1px 0!important}
#profileModal .gcProfileLevelMain span{font-size:7px!important}
#profileModal .gcProfileLevelMain i{height:4px!important;margin-top:4px!important}
#profileModal .gcProfileLevelMain em{font-size:7px!important;top:12px!important;right:12px!important}

#notificationsModal .notificationList{overflow-y:auto!important;overscroll-behavior:contain!important}
#notificationsModal .notification{min-height:78px!important}
#notificationsModal .notification p{display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important}

#editProfileModal #profileForm,
#editProfileModal #profileForm input:not([type="color"]):not([type="checkbox"]):not([type="radio"]),
#editProfileModal #profileForm textarea{
  direction:ltr!important;text-align:left!important;unicode-bidi:normal!important;writing-mode:horizontal-tb!important
}

@media(max-height:760px){
  #profileModal .gcProfileHero{min-height:116px!important;height:116px!important;max-height:116px!important;padding-top:8px!important;padding-bottom:7px!important}
  #profileModal .gcProfileAvatar,#profileModal .gcProfileAvatar img{width:58px!important;height:58px!important;min-width:58px!important;min-height:58px!important;max-width:58px!important;max-height:58px!important}
  #profileModal .gcProfileIdentity h2{font-size:19px!important;margin-top:2px!important}
  #profileModal .gcProfileQuickActions{min-height:46px!important;flex-basis:46px!important;padding:5px 9px!important}
  #profileModal .gcProfileQuickActions button{height:34px!important;min-height:34px!important}
  #profileModal .gcProfileTabs{min-height:42px!important;height:42px!important;flex-basis:42px!important;padding:4px 6px!important}
  #profileModal .gcProfileTabs button{height:33px!important;min-height:33px!important}
  #profileModal .gcPublicProfileMusic{padding-top:4px!important;padding-bottom:4px!important}
  #profileModal .gcProfileLevel{margin-top:5px!important;margin-bottom:5px!important}
}

/* 0.51.62 — statuskleur volgt de gekozen aanwezigheid in userlist en profiel. */
.presenceDot{background:var(--gc-presence-color,#34d66b)!important}
.offline .presenceDot{background:#747d8d!important}
.gcProfileAvatar i,#profileModal .gcProfileAvatar i{background:var(--gc-presence-color,#43c11f)!important}
@media(max-width:700px){
  #profileModal .profileModalCard{width:calc(100vw - 8px)!important;max-width:none!important;max-height:calc(var(--gc-cody-vv-height,100dvh) - 8px)!important;border-radius:14px!important}
  #profileModal .gcProfilePane[data-profile-pane="info"].active,#profileModal .gcProfilePane.gcProfileAboutPane.active{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #profileModal .profileInfoRow{min-width:0!important}
}
@media(max-width:430px){
  #profileModal .gcProfilePane[data-profile-pane="info"].active,#profileModal .gcProfilePane.gcProfileAboutPane.active{grid-template-columns:1fr!important}
  #profileModal .gcProfileAboutPane .profileBio,#profileModal .gcProfileAboutPane .profileActions{grid-column:auto!important}
  #profileModal .gcProfileTabs{overflow-x:auto!important;overflow-y:hidden!important;display:flex!important;scrollbar-width:none!important}
  #profileModal .gcProfileTabs::-webkit-scrollbar{display:none!important}
  #profileModal .gcProfileTabs button{flex:0 0 112px!important}
}
@media(max-width:900px),(max-height:700px){
  .modal>.modalCard,.modal>.notificationCard,.modal>.profileEditorCard,.modal>.profileStudioCard,.modal>.chatOptionsCard{
    max-width:calc(100vw - 12px)!important;max-height:calc(var(--gc-cody-vv-height,100dvh) - 12px)!important
  }
}


/* GC Core 0.51.59 FINAL — desktop/laptop viewport hardening.
   Prevents chat/userlist/composer from being clipped on short displays,
   browser zoom and non-standard desktop resolutions. */
@media(min-width:901px){
  body:not(.gcAuthActive){
    height:100dvh!important;min-height:0!important;max-height:100dvh!important;overflow:hidden!important;
  }
  body:not(.gcAuthActive) #app{
    height:100dvh!important;min-height:0!important;max-height:100dvh!important;
    display:flex!important;flex-direction:column!important;overflow:hidden!important;
  }
  body:not(.gcAuthActive) .gcClassicTop,
  body:not(.gcAuthActive) .topbar{
    flex:0 0 50px!important;height:50px!important;min-height:50px!important;
  }
  body:not(.gcAuthActive) .layout{
    flex:1 1 auto!important;height:auto!important;min-height:0!important;max-height:none!important;
    overflow:hidden!important;
  }
  body:not(.gcAuthActive) .chat,
  body:not(.gcAuthActive) .gcRightPanel,
  body:not(.gcAuthActive) .quickbar{
    min-height:0!important;max-height:100%!important;
  }
  body:not(.gcAuthActive) .messages,
  body:not(.gcAuthActive) .gcUserScroll{
    min-height:0!important;max-height:100%!important;overflow-y:auto!important;
  }
  body:not(.gcAuthActive) .composer{
    flex:0 0 auto!important;min-width:0!important;
  }
}
@media(min-width:901px) and (max-height:680px){
  body:not(.gcAuthActive) .gcClassicTop,
  body:not(.gcAuthActive) .topbar{flex-basis:46px!important;height:46px!important;min-height:46px!important}
  .messages{padding-top:4px!important;padding-bottom:5px!important}
  .msg{padding-top:5px!important;padding-bottom:5px!important}
  .composer{min-height:44px!important;padding-top:4px!important;padding-bottom:4px!important}
}

/* GC Core 0.51.65 — compacte mobiele meldingen, muziek, hulp en recente chatters. */
@media(max-width:700px){
  #notificationsModal,
  #radioModal,
  #helpCenterModal{
    padding:max(4px,env(safe-area-inset-top)) max(4px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left))!important;
    align-items:center!important;
  }

  #notificationsModal .notificationCard{
    position:relative!important;
    width:100%!important;
    height:calc(var(--gc-cody-vv-height,100dvh) - 8px)!important;
    max-height:calc(var(--gc-cody-vv-height,100dvh) - 8px)!important;
    padding:12px!important;
    border-radius:16px!important;
    overflow:hidden!important;
  }
  #notificationsModal .notificationCard>.modalClose,
  #radioModal .radioCard>.modalClose,
  #helpCenterModal .gcHelpCenterCard>.modalClose{
    top:10px!important;right:10px!important;left:auto!important;
    width:40px!important;height:40px!important;min-width:40px!important;
    border-radius:12px!important;font-size:24px!important;z-index:10!important;
  }
  #notificationsModal .notificationHead{
    display:grid!important;grid-template-columns:1fr!important;gap:8px!important;
    padding:3px 48px 10px 2px!important;margin:0!important;
  }
  #notificationsModal .notificationHead>div:first-child h3{font-size:21px!important}
  #notificationsModal .notificationHead>div:last-child{
    grid-column:1/-1!important;display:grid!important;grid-template-columns:1fr 1fr!important;
    gap:7px!important;padding:0!important;
  }
  #notificationsModal .notificationHead button{min-height:40px!important;padding:7px 8px!important;font-size:11px!important}
  #notificationsModal .pushSettings{
    flex:0 0 auto!important;grid-template-columns:1fr!important;gap:8px!important;
    max-height:min(31dvh,230px)!important;margin:8px 0!important;padding:10px!important;
    border-radius:12px!important;overflow-y:auto!important;touch-action:pan-y!important;
  }
  #notificationsModal .pushSettings b{font-size:13px!important}
  #notificationsModal .pushSettings small,#notificationsModal .pushSettings p{font-size:10px!important;line-height:1.35!important}
  #notificationsModal .pushSettings>button{min-height:38px!important;font-size:11px!important}
  #notificationsModal .pushPreferenceFields{gap:5px!important;padding-top:7px!important}
  #notificationsModal .pushPreferenceFields label{min-height:31px!important;font-size:12px!important}
  #notificationsModal .notificationList{
    flex:1 1 0!important;min-height:0!important;max-height:none!important;
    gap:7px!important;padding:3px 1px max(10px,env(safe-area-inset-bottom))!important;
    overflow-y:auto!important;touch-action:pan-y!important;
  }
  #notificationsModal .notification{
    min-height:66px!important;grid-template-columns:34px minmax(0,1fr) 30px!important;
    gap:8px!important;padding:9px!important;border-radius:11px!important;
  }
  #notificationsModal .notificationIcon{width:32px!important;height:32px!important}

  #radioModal .radioCard{
    position:relative!important;width:100%!important;
    max-height:calc(var(--gc-cody-vv-height,100dvh) - 8px)!important;
    padding:14px!important;border-radius:16px!important;
    overflow-y:auto!important;overflow-x:hidden!important;
  }
  #radioModal .modalTitle{padding-right:48px!important;margin-bottom:8px!important}
  #radioModal .modalTitle h3{font-size:22px!important;line-height:1.15!important}
  #radioModal .modalTitle p{font-size:11px!important;line-height:1.45!important}
  #radioModal .gcCompactPlayer{
    display:grid!important;grid-template-columns:54px minmax(0,1fr) 46px!important;
    min-height:70px!important;gap:0!important;margin:10px 0!important;border-radius:14px!important;
  }
  #radioModal .gcMusicPlay{grid-column:1!important;grid-row:1!important;width:40px!important;height:40px!important;font-size:19px!important}
  #radioModal .gcMusicInfo{grid-column:2!important;grid-row:1!important;padding:8px 9px!important}
  #radioModal .gcMusicInfo small{font-size:9px!important}
  #radioModal .gcMusicInfo strong{font-size:16px!important}
  #radioModal .gcMusicInfo span{font-size:9px!important}
  #radioModal .gcMusicLive{display:none!important}
  #radioModal .gcMusicCover{
    grid-column:3!important;grid-row:1!important;justify-self:center!important;align-self:center!important;
    width:38px!important;height:38px!important;margin:0!important;border-radius:11px!important;
  }
  #radioModal .musicPlayerActions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;margin:8px 0 10px!important}
  #radioModal .musicPlayerActions>*{min-width:0!important;min-height:40px!important;padding:7px!important;font-size:11px!important}
  #radioModal .radioStations{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
  #radioModal .radioStation{min-height:42px!important;padding:8px!important;font-size:11px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
  #radioModal .radioCustom{grid-template-columns:1fr!important;gap:7px!important;margin-top:9px!important}
  #radioModal .radioCustom input,#radioModal .radioCustom button{min-height:41px!important;font-size:11px!important}

  #helpCenterModal .gcHelpCenterCard{
    position:relative!important;width:100%!important;max-width:none!important;
    height:calc(var(--gc-cody-vv-height,100dvh) - 8px)!important;
    max-height:calc(var(--gc-cody-vv-height,100dvh) - 8px)!important;
    border:1px solid rgba(89,145,207,.34)!important;border-radius:16px!important;overflow:hidden!important;
  }
  #helpCenterModal .gcHelpHero{flex:0 0 auto!important;padding:13px 50px 11px 12px!important;gap:9px!important}
  #helpCenterModal .gcHelpHeroIcon{width:38px!important;height:38px!important;flex-basis:38px!important;border-radius:12px!important;font-size:22px!important}
  #helpCenterModal .gcHelpHero small{font-size:8px!important}
  #helpCenterModal .gcHelpHero h2{font-size:19px!important;margin:2px 0 3px!important;line-height:1.15!important}
  #helpCenterModal .gcHelpHero p{font-size:9.5px!important;line-height:1.35!important}
  #helpCenterModal .gcHelpSearch{flex:0 0 41px!important;height:41px!important;margin:8px 9px 6px!important;border-radius:12px!important}
  #helpCenterModal .gcHelpCategories{
    flex:0 0 auto!important;flex-wrap:nowrap!important;overflow-x:auto!important;overflow-y:hidden!important;
    gap:6px!important;padding:0 9px 8px!important;touch-action:pan-x!important;scrollbar-width:none!important;
  }
  #helpCenterModal .gcHelpCategories::-webkit-scrollbar{display:none!important}
  #helpCenterModal .gcHelpCategories button{min-height:31px!important;padding:0 9px!important;font-size:9.5px!important}
  #helpCenterModal .gcHelpLayout{display:block!important;flex:1 1 0!important;min-height:0!important;overflow:hidden!important}
  #helpCenterModal .gcHelpLayout main{
    height:100%!important;min-height:0!important;overflow-y:auto!important;
    padding:11px 9px 14px!important;touch-action:pan-y!important;
  }
  #helpCenterModal .gcHelpResultHead{margin:0 0 9px!important;padding:0!important}
  #helpCenterModal .gcHelpFooter{
    position:static!important;left:auto!important;right:auto!important;bottom:auto!important;
    flex:0 0 auto!important;padding:8px 9px max(8px,env(safe-area-inset-bottom))!important;
  }
  #helpCenterModal .gcHelpFooter b{font-size:10px!important}
  #helpCenterModal .gcHelpFooter a{min-height:34px!important;padding:0 10px!important;font-size:9.5px!important}

  .authRecent{min-width:0!important;overflow:hidden!important}
  .authRecentUsers{
    width:100%!important;min-width:0!important;max-width:100%!important;
    display:flex!important;flex-wrap:nowrap!important;justify-content:flex-start!important;
    overflow-x:scroll!important;overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;touch-action:pan-x!important;
    overscroll-behavior-x:contain!important;scroll-snap-type:x proximity!important;
    scrollbar-width:thin!important;scrollbar-color:rgba(90,154,211,.7) transparent!important;
    padding:3px 2px 9px!important;
  }
  .authRecentUsers::-webkit-scrollbar{display:block!important;height:4px!important}
  .authRecentUsers::-webkit-scrollbar-track{background:transparent!important}
  .authRecentUsers::-webkit-scrollbar-thumb{background:rgba(90,154,211,.65)!important;border-radius:999px!important}
  .authRecentUsers>.authRecentUser{flex:0 0 64px!important;min-width:64px!important;scroll-snap-align:start!important}
}

/* 0.51.65 final cascade: onderstaande regels winnen bewust van oudere themalagen. */
#notificationsModal .notificationCard{width:min(760px,calc(100vw - 24px))!important;max-height:min(88dvh,820px)!important;display:flex!important;flex-direction:column!important;padding:17px!important;overflow:hidden!important;border-radius:18px!important}
#notificationsModal .notificationHead{flex:0 0 auto!important;margin:0 0 12px!important;padding:0 42px 12px 0!important;border-bottom:1px solid rgba(122,145,174,.24)!important}
#notificationsModal .pushSettings{flex:0 0 auto!important;display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:10px 14px!important;margin:0 0 12px!important;padding:13px 14px!important;border-radius:14px!important}
#notificationsModal .pushPreferenceFields{grid-column:1/-1!important}
#notificationsModal .notificationList{flex:1 1 0!important;min-height:0!important;max-height:none!important;overflow-y:auto!important;gap:7px!important}
#notificationsModal .notification{min-height:70px!important;padding:9px 10px!important;border-radius:12px!important}
.pmSecureMediaCard{width:min(620px,calc(100vw - 22px))!important;max-height:min(90dvh,760px)!important;padding:18px!important;border-radius:18px!important}
.pmSecurePreview{min-height:145px!important}.pmSecureMediaPick{margin:14px 0 10px!important}.pmSecureMediaOptions{gap:8px!important;margin-top:10px!important}.pmSecureMediaNotice{margin-top:9px!important}.pmSecureMediaActions{margin-top:11px!important}
#profileModal [data-profile-pane="info"] .gcProfileQuickActions{min-height:0!important;margin:0!important;padding:0!important;display:flex!important;align-items:stretch!important;border:0!important;background:transparent!important;box-shadow:none!important}
#profileModal [data-profile-pane="info"] .gcProfileQuickActions button{width:100%!important;min-height:100%!important;margin:0!important;padding:10px 12px!important;border-radius:12px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;background:linear-gradient(135deg,#e8c45f,#d9a93d)!important;color:#171208!important;box-shadow:none!important}
@media(max-width:700px){
  .actionTray:not(.hidden){display:flex!important;flex-direction:column!important}
  .actionTray{left:6px!important;right:6px!important;bottom:60px!important;width:auto!important;height:min(72dvh,620px)!important;max-height:calc(var(--gc-cody-vv-height,100dvh) - 126px)!important;padding:0!important;overflow:hidden!important;border-radius:17px!important}
  .actionTray .addonTrayHead{flex:0 0 auto!important;width:100%!important;padding:11px 12px 10px!important}
  .actionTray .addonTrayQuick{flex:0 0 auto!important;width:auto!important;margin:8px 9px 5px!important;padding:7px!important;grid-template-columns:1fr!important}
  .actionTray .addonTrayGrid{flex:1 1 0!important;width:100%!important;min-width:0!important;min-height:0!important;margin:0!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important;padding:7px 9px max(12px,env(safe-area-inset-bottom))!important;overflow-y:auto!important;overflow-x:hidden!important;touch-action:pan-y!important}
  .actionTray .addonTrayGrid>button{width:100%!important;min-width:0!important;min-height:72px!important;padding:7px 3px!important}
  #notificationsModal .notificationCard{padding:10px!important}
  #notificationsModal .pushSettings{grid-template-columns:1fr!important;padding:9px!important}
  #notificationsModal .pushSettings>button{width:100%!important}
  .pmSecureMediaCard{height:calc(var(--gc-cody-vv-height,100dvh) - 8px)!important;max-height:calc(var(--gc-cody-vv-height,100dvh) - 8px)!important;padding:12px!important;overflow-y:auto!important}
  .pmSecureMediaPick{grid-template-columns:1fr 1fr!important}.pmSecurePreview{min-height:110px!important}.pmSecureMediaOptions{grid-template-columns:1fr 1fr!important}.pmSecureAdult{grid-column:1/-1!important}
}
@media(max-width:430px){.actionTray .addonTrayGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}#profileModal [data-profile-pane="info"].active{grid-template-columns:1fr!important}.pmSecureMediaPick,.pmSecureMediaOptions{grid-template-columns:1fr!important}.pmSecureAdult{grid-column:auto!important}}

/* GC Core 0.51.66 — rangaccenten en compacte openbare profielen. */
.superAdminMetaIcon{
  width:20px!important;height:20px!important;border-radius:7px!important;
  color:#9cecff!important;background:linear-gradient(145deg,rgba(76,183,232,.28),rgba(104,88,206,.18))!important;
  border:1px solid rgba(125,220,255,.48)!important;filter:drop-shadow(0 0 5px rgba(85,203,255,.42))!important;
}
#profileModal .gcPublicProfileMusic{
  margin:0!important;padding:9px 11px!important;border-radius:12px!important;
  background:linear-gradient(145deg,rgba(19,36,52,.94),rgba(13,27,41,.94))!important;
  border:1px solid color-mix(in srgb,var(--profile-accent,#62a9e8) 34%,#2b4258)!important;
}
#profileModal .gcUploadedProfileTrack{display:grid!important;grid-template-columns:minmax(0,150px) minmax(0,1fr) 34px!important;gap:8px!important;align-items:center!important}
#profileModal .gcUploadedProfileTrack audio{width:100%!important;min-width:0!important;height:32px!important}
#profileModal [data-profile-pane="info"] .gcProfileQuickActions{
  min-height:64px!important;height:auto!important;align-self:stretch!important;
}
#profileModal [data-profile-pane="info"] .gcProfileQuickActions button{
  min-height:64px!important;height:100%!important;padding:10px 13px!important;
  justify-content:flex-start!important;text-align:left!important;
  background:linear-gradient(145deg,rgba(20,38,55,.98),rgba(12,28,42,.98))!important;
  color:#edf7ff!important;border:1px solid color-mix(in srgb,var(--profile-accent,#dcb85f) 48%,#33475b)!important;
  border-left:3px solid var(--profile-accent,#dcb85f)!important;border-radius:12px!important;
}
#profileModal [data-profile-pane="info"] .gcProfileQuickActions button span{
  width:34px!important;height:34px!important;display:grid!important;place-items:center!important;
  border-radius:10px!important;background:color-mix(in srgb,var(--profile-accent,#dcb85f) 18%,#0d1b29)!important;
}
#profileModal [data-profile-pane="info"] .gcProfileQuickActions button b{font-size:12px!important;letter-spacing:.01em!important}
#profileModal [data-profile-pane="about"].active{
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important;align-content:start!important;align-items:start!important;
}
#profileModal [data-profile-pane="about"]>.profileBio,
#profileModal [data-profile-pane="about"]>.profileMoreContent,
#profileModal [data-profile-pane="about"]>.profileAboutActions{grid-column:1/-1!important}
#profileModal [data-profile-pane="about"]>.profileInfoRow{
  min-height:62px!important;height:auto!important;align-self:start!important;
  padding:10px 12px!important;border-radius:12px!important;
}
#profileModal [data-profile-pane="about"]>.profileInfoRow span{margin-bottom:4px!important}
#profileModal .profileMoreContent{display:grid!important;grid-template-columns:1fr!important;gap:8px!important;margin:0!important}
#profileModal .profileExtraSection{margin:0!important;padding:12px!important;border-radius:13px!important}
#profileModal .profileExtraGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
#profileModal .profileExtraItem{min-height:58px!important;padding:9px 10px!important;border-radius:10px!important}

@media(max-width:700px){
  #profileModal .gcUploadedProfileTrack{grid-template-columns:1fr 34px!important}
  #profileModal .gcUploadedProfileTrack>div:first-child{grid-column:1/-1!important}
  #profileModal [data-profile-pane="about"].active{grid-template-columns:1fr!important}
  #profileModal [data-profile-pane="about"]>.profileBio,
  #profileModal [data-profile-pane="about"]>.profileMoreContent,
  #profileModal [data-profile-pane="about"]>.profileAboutActions{grid-column:1!important}
  #profileModal .profileExtraGrid{grid-template-columns:1fr!important}

  /* De volledige hulplijst is het scrollvlak; zo blijft vegen ook bij lange antwoorden werken. */
  #helpCenterModal .gcHelpCenterCard{display:flex!important;flex-direction:column!important;min-height:0!important;overflow:hidden!important}
  #helpCenterModal .gcHelpHero,#helpCenterModal .gcHelpSearch,#helpCenterModal .gcHelpCategories,#helpCenterModal .gcHelpFooter{flex-shrink:0!important}
  #helpCenterModal .gcHelpLayout{
    display:block!important;flex:1 1 0!important;height:auto!important;min-height:0!important;
    overflow-y:auto!important;overflow-x:hidden!important;-webkit-overflow-scrolling:touch!important;
    overscroll-behavior-y:contain!important;touch-action:pan-y!important;
    padding-bottom:max(20px,env(safe-area-inset-bottom))!important;
  }
  #helpCenterModal .gcHelpLayout main{
    height:auto!important;min-height:100%!important;overflow:visible!important;touch-action:pan-y!important;
    padding:11px 9px 28px!important;
  }
  #helpCenterModal .gcHelpResults,#helpCenterModal .gcHelpArticleBody{overflow:visible!important}
}

/* GC Core 0.51.67 — belknoppen links naast de identiteit, vensterknoppen rechts. */
#pmModal .pmHead{
  display:grid!important;
  grid-template-columns:minmax(98px,140px) 30px 30px minmax(6px,1fr) 30px 30px!important;
  align-items:center!important;justify-content:stretch!important;column-gap:3px!important;
}
#pmModal .pmHeadIdentity{grid-column:1!important;width:100%!important;max-width:140px!important;min-width:0!important}
#pmModal .pmCallActions{display:contents!important}
#pmModal #pmAudioCall{grid-column:2!important}
#pmModal #pmVideoCall{grid-column:3!important}
#pmModal #pmMinimize{grid-column:5!important}
#pmModal #pmClose{grid-column:6!important}
@media(max-width:700px){
  #pmModal .pmHead{grid-template-columns:minmax(88px,125px) 29px 29px minmax(4px,1fr) 29px 29px!important}
  #pmModal .pmHeadIdentity{max-width:125px!important}
}
@media(max-width:380px){
  #pmModal .pmHead{grid-template-columns:minmax(82px,110px) 27px 27px minmax(2px,1fr) 27px 27px!important;column-gap:2px!important}
  #pmModal .pmHeadIdentity{max-width:110px!important}
}

/* Recent actieve chatters: automatisch én handmatig horizontaal te bekijken. */
.authRecentUsers{
  overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:thin!important;
  scrollbar-color:rgba(94,157,218,.72) rgba(14,27,42,.55)!important;
  padding-bottom:10px!important;cursor:grab!important;
}
.authRecentUsers:active{cursor:grabbing!important}
.authRecentUsers::-webkit-scrollbar{display:block!important;height:5px!important}
.authRecentUsers::-webkit-scrollbar-track{background:rgba(14,27,42,.55)!important;border-radius:999px!important}
.authRecentUsers::-webkit-scrollbar-thumb{background:rgba(94,157,218,.72)!important;border-radius:999px!important}

/* GC Core 0.51.68 — meldingenlijst met echte hoogte en zichtbare officiële waarschuwing. */
#notificationsModal .notificationCard{
  height:min(760px,calc(100dvh - 36px))!important;
  max-height:min(760px,calc(100dvh - 36px))!important;
  min-height:min(520px,calc(100dvh - 36px))!important;
}
#notificationsModal .notificationList{
  flex:1 1 auto!important;min-height:120px!important;max-height:none!important;
  overflow-y:auto!important;overflow-x:hidden!important;
}
#notificationsModal .moderationNotification{
  border-color:rgba(245,183,74,.62)!important;
  border-left:4px solid #f5b74a!important;
  background:linear-gradient(90deg,rgba(117,63,22,.24),rgba(17,29,43,.98) 42%)!important;
}
#notificationsModal .moderationNotification .notificationIcon{background:rgba(245,183,74,.14)!important;color:#ffd36f!important}
.gcOfficialWarningCard{
  width:min(500px,calc(100vw - 24px))!important;max-height:calc(100dvh - 24px)!important;
  padding:25px!important;text-align:center!important;overflow-y:auto!important;
  border:1px solid rgba(245,183,74,.62)!important;border-top:4px solid #f5b74a!important;border-radius:18px!important;
  background:linear-gradient(155deg,#1c2634,#101722 72%)!important;box-shadow:0 28px 90px rgba(0,0,0,.72),0 0 34px rgba(245,183,74,.12)!important;
}
.gcOfficialWarningIcon{
  width:66px!important;height:66px!important;margin:0 auto 13px!important;display:grid!important;place-items:center!important;
  border-radius:20px!important;background:linear-gradient(145deg,rgba(245,183,74,.25),rgba(206,91,49,.16))!important;
  border:1px solid rgba(255,211,111,.45)!important;font-size:33px!important;
}
.gcOfficialWarningCard>small{display:block!important;color:#f5bf58!important;font-size:9px!important;font-weight:900!important;letter-spacing:.13em!important}
.gcOfficialWarningCard h3{margin:5px 0 8px!important;font-size:25px!important;color:#fff5dc!important}
.gcOfficialWarningCard>p{margin:0 auto 17px!important;max-width:390px!important;color:#bcc8d7!important;font-size:12px!important;line-height:1.55!important}
.gcOfficialWarningCard section{padding:14px!important;text-align:left!important;border:1px solid rgba(245,183,74,.35)!important;border-radius:12px!important;background:rgba(7,13,22,.55)!important}
.gcOfficialWarningCard section span{display:block!important;margin-bottom:6px!important;color:#e7ad42!important;font-size:9px!important;font-weight:900!important;text-transform:uppercase!important;letter-spacing:.08em!important}
.gcOfficialWarningCard section strong{display:block!important;color:#fff!important;font-size:14px!important;line-height:1.45!important;overflow-wrap:anywhere!important}
.gcOfficialWarningCard time{display:block!important;margin:10px 0 17px!important;color:#8292a7!important;font-size:10px!important}
.gcOfficialWarningCard>button{width:100%!important;min-height:46px!important;border-radius:11px!important;background:linear-gradient(135deg,#f4c35b,#dfa438)!important;color:#171208!important;font-weight:900!important}
@media(max-width:700px){
  #notificationsModal .notificationCard{height:calc(var(--gc-cody-vv-height,100dvh) - 8px)!important;min-height:0!important;max-height:calc(var(--gc-cody-vv-height,100dvh) - 8px)!important}
  #notificationsModal .notificationList{min-height:90px!important}
  .gcOfficialWarningCard{padding:20px 16px!important;border-radius:16px!important}
  .gcOfficialWarningIcon{width:58px!important;height:58px!important;font-size:29px!important}
  .gcOfficialWarningCard h3{font-size:22px!important}
}

/* GC Core 0.51.69 — snellere fallback, mobiele bereikbaarheid en ledencontrole. */
.gcUserMenuPolished{max-height:min(88dvh,760px)!important;overflow-y:auto!important;overscroll-behavior:contain!important}
.gcUserMenuInvestigation{grid-template-columns:1fr!important}
.gcUserMenuInvestigation button{width:100%!important}
.gcUserMenuInvestigation button>span:last-child{display:grid!important;gap:2px!important}
.gcUserMenuInvestigation button b{font-size:13px!important}.gcUserMenuInvestigation button small{color:#91a4b8!important;font-size:9px!important;font-weight:600!important}
.gcUserInsight{margin-top:9px;padding:12px;border:1px solid rgba(91,156,211,.34);border-radius:14px;background:linear-gradient(160deg,#101d2b,#0b151f)}
.gcUserInsightHead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:9px;border-bottom:1px solid rgba(128,151,181,.18)}
.gcUserInsightHead small{display:block;color:#64c8ff;font-size:8px;font-weight:900;letter-spacing:.12em}.gcUserInsightHead h4{margin:2px 0 0;font-size:16px}.gcUserInsightHead>span{padding:4px 7px;border-radius:999px;background:#1d3043;color:#a9c5df;font-size:8px;font-weight:800}
.gcUserInsightFacts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:9px 0}
.gcUserInsightFacts>div{min-width:0;padding:8px;border:1px solid rgba(128,151,181,.16);border-radius:9px;background:#0c1722}.gcUserInsightFacts small,.gcUserInsightFacts b{display:block}.gcUserInsightFacts small{color:#8193a9;font-size:8px}.gcUserInsightFacts b{margin-top:3px;font-size:10px;overflow-wrap:anywhere}
.gcUserInsightColumns{display:grid;grid-template-columns:1fr 1fr;gap:7px}.gcUserInsightColumns section{min-width:0;padding:9px;border-radius:10px;background:#0a131d;border:1px solid rgba(128,151,181,.14)}.gcUserInsightColumns h5{margin:0 0 6px;color:#d6b75f;font-size:9px;text-transform:uppercase;letter-spacing:.07em}.gcUserInsightColumns ul{display:grid;gap:5px;margin:0;padding:0;list-style:none}.gcUserInsightColumns li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 5px}.gcUserInsightColumns li b,.gcUserInsightColumns li span{font-size:10px;overflow-wrap:anywhere}.gcUserInsightColumns li em{padding:2px 4px;border-radius:5px;background:#17384b;color:#7ed8ff;font-size:7px;font-style:normal}.gcUserInsightColumns li small{grid-column:1/-1;color:#718399;font-size:7.5px}.gcUserInsight>p{margin:9px 1px 0;color:#74879d;font-size:8px;line-height:1.4}

/* Bel/video volgen meteen na de naam; alleen vensterbediening blijft rechts. */
#pmModal .pmHead{grid-template-columns:fit-content(112px) 29px 29px minmax(4px,1fr) 29px 29px!important;column-gap:2px!important}
#pmModal .pmHeadIdentity{width:auto!important;max-width:112px!important}

@media(max-width:900px){
  /* Isoleer de privéchat tijdens aanraken: geen doorklik naar chat-, menu- of sollicitatieknoppen. */
  body.gcPmOpen #composer,body.gcPmOpen .quickbar,body.gcPmOpen .gcClassicTop,body.gcPmOpen .actionTray,body.gcPmOpen #gcProfileMenu{pointer-events:none!important}
  body.gcPmOpen #pmModal,body.gcPmOpen #pmModal .gcPmCard{pointer-events:auto!important}
  #pmModal .pmComposer,#pmModal .pmComposer button{touch-action:manipulation!important}

  /* De hele mobiele userlist krijgt één echt, momentum-scrollend binnenvlak. */
  #usersPanel.mobileOpen{
    display:flex!important;flex-direction:column!important;top:58px!important;bottom:58px!important;
    height:calc(100dvh - 116px)!important;max-height:calc(100dvh - 116px)!important;
    min-height:0!important;overflow:hidden!important;touch-action:none!important
  }
  #usersPanel.mobileOpen>#users,#usersPanel.mobileOpen>.gcUserScroll{
    display:block!important;flex:1 1 0!important;height:0!important;min-height:0!important;max-height:none!important;
    overflow-y:scroll!important;overflow-x:hidden!important;touch-action:pan-y!important;
    overscroll-behavior-y:contain!important;-webkit-overflow-scrolling:touch!important;
    padding-bottom:max(28px,env(safe-area-inset-bottom))!important
  }

  /* Volledig leesbare knop boven de composer. */
  html.gcCodyMobileShell .newMessages,.newMessages{
    display:flex!important;align-items:center!important;justify-content:center!important;
    width:max-content!important;max-width:calc(100vw - 22px)!important;min-height:34px!important;height:auto!important;
    bottom:66px!important;padding:7px 14px!important;line-height:1.2!important;z-index:70!important
  }
  html.gcCodyMobileShell .newMessages.hidden,.newMessages.hidden{display:none!important}
  html.gcCodyMobileShell.gcKeyboardOpen .newMessages{bottom:52px!important}

  /* Hulpcentrum: sluitknop rechtsboven en alleen het inhoudsdeel scrolt. */
  #helpCenterModal .gcHelpCenterCard{position:relative!important;display:flex!important;flex-direction:column!important;min-height:0!important;overflow:hidden!important}
  #helpCenterModal .gcHelpCenterCard>.modalClose{position:absolute!important;top:10px!important;right:10px!important;left:auto!important;margin:0!important;z-index:30!important}
  #helpCenterModal .gcHelpLayout{flex:1 1 0!important;height:0!important;min-height:0!important;overflow-y:scroll!important;overflow-x:hidden!important;touch-action:pan-y!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior-y:contain!important}
  #helpCenterModal .gcHelpLayout main{height:auto!important;min-height:max-content!important;overflow:visible!important;padding-bottom:28px!important}
}
@media(max-width:430px){
  .gcUserInsightFacts{grid-template-columns:repeat(2,minmax(0,1fr))}.gcUserInsightColumns{grid-template-columns:1fr}
  #pmModal .pmHead{grid-template-columns:fit-content(98px) 27px 27px minmax(2px,1fr) 27px 27px!important}
  #pmModal .pmHeadIdentity{max-width:98px!important}
}

/* 0.51.71: compact navigation, predictable close controls, no clipped badges. */
#authRecentUsers{scrollbar-width:none!important;-ms-overflow-style:none;scroll-snap-type:none!important;scroll-behavior:auto!important;overscroll-behavior-x:contain}
#authRecentUsers::-webkit-scrollbar{display:none!important;width:0;height:0}
.authRecentUser{flex-shrink:0}
.gcIgnoredMessage{display:none!important}
.gcCallPreferencesCard{position:relative!important;width:min(540px,100%)!important;max-height:90dvh!important;overflow:auto!important;padding:24px!important}
.gcCallPreferencesCard h3{padding-right:40px}
#callPreferencesForm{display:grid;gap:14px;margin:18px 0}
#callPreferencesForm label{display:flex;align-items:center;gap:10px;min-height:40px}
.gcCallBlockedRow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid #ffffff16}
.gcDownloadAttachment{display:inline-flex!important;align-items:center!important;gap:6px!important;align-self:flex-start!important;padding:7px 10px!important;border-radius:8px!important;background:#ffffff10!important;color:#dfe9f5!important;font-size:12px!important;font-weight:700!important;text-decoration:none!important}
.gcNewsComposeCard{position:relative;width:min(680px,100%);max-height:90dvh;overflow:auto;padding:24px}
.gcNewsComposeCard h3{padding-right:46px}
#newsComposeForm{display:grid;gap:16px;margin-top:20px}
#newsComposeForm label{display:grid;gap:7px;font-weight:700}
#newsComposeForm input,#newsComposeForm textarea{width:100%;box-sizing:border-box;font-size:16px;line-height:1.5;padding:12px;border:1px solid #35485f;border-radius:12px;background:#0c1520;color:#edf4ff}
#newsComposeError{color:#ffb0b0;margin:0}
.modal .modalCard>.modalClose,.modal .profileModalCard>.modalClose,.modal .profileEditorCard>.modalClose{position:absolute!important;top:12px!important;right:12px!important;left:auto!important;bottom:auto!important;z-index:40!important;margin:0!important;min-width:36px;min-height:36px}
#helpCenterModal .gcHelpCenterCard>.modalClose{top:12px!important;right:12px!important;left:auto!important}
.gcPmTouchShield{display:none}
.gcUserMenu>header .uAvatar{padding:0!important;background:transparent!important;border:1px solid rgba(255,255,255,.16)!important;box-shadow:none!important}
.gcUserMenu>header .uAvatar img{border:0!important;box-shadow:none!important;background:transparent!important}
#profileModal .gcProfileAvatar img[role="button"]{cursor:zoom-in}
#profileModal .gcProfileAvatar img[role="button"]:focus-visible{outline:2px solid #e6bd58!important;outline-offset:3px}
.gcAvatarPreviewCard{position:relative!important;width:min(720px,calc(100vw - 24px))!important;max-height:90dvh!important;padding:20px!important;display:flex!important;flex-direction:column!important;gap:14px!important}
.gcAvatarPreviewCard h3{padding-right:46px!important;margin:0!important;font-size:16px!important}
#avatarPreviewImage{display:block!important;width:100%!important;max-height:75dvh!important;min-height:0!important;object-fit:contain!important;border:0!important;border-radius:10px!important;box-shadow:none!important}
.gcRoomAccessOverlay{z-index:2147483000!important}
@media(max-width:900px){
  #app>.topbar.gcClassicTop{gap:3px!important;padding-left:max(5px,env(safe-area-inset-left))!important;padding-right:max(5px,env(safe-area-inset-right))!important;overflow:visible!important}
  #app .gcTopLeft{flex:1 1 105px!important;min-width:55px!important;gap:3px!important;overflow:hidden!important}
  #app .gcHamburger{width:32px!important;min-width:32px!important;flex:0 0 32px!important;height:38px!important}
  #app .gcLogoBrand{width:auto!important;min-width:0!important;max-width:100px!important;flex:1 1 auto!important}
  #app .gcTopRight{flex:0 0 auto!important;min-width:0!important;gap:2px!important;overflow:visible!important}
  #app .gcTopIcon,#app .gcProfileTop{width:32px!important;min-width:32px!important;max-width:32px!important;flex:0 0 32px!important;height:38px!important;position:relative}
  #app #publicVideoBtn{width:50px!important;min-width:50px!important;max-width:50px!important;padding:3px!important;gap:3px!important;flex:0 0 50px!important}
  #app #publicVideoBtn .gcUiIcon3D{width:18px!important;height:18px!important}
  #app #publicVideoBtn b,#app #publicVideoBtn .badge{min-width:17px!important;width:17px!important;height:20px!important;font-size:10px!important;line-height:20px!important;padding:0!important}
  #app .gcTopIcon .badge{top:-3px!important;right:-1px!important}
  .gcNewsComposeCard{padding:20px 14px}
  body.gcPmOpen>.gcPmTouchShield{display:block;position:fixed;inset:0;z-index:2147481050;background:transparent;touch-action:none}
  #pmModal .pmHead{grid-template-columns:minmax(65px,92px) 30px 30px minmax(0,1fr) 30px 30px!important;gap:1px!important}
  #pmModal .pmHeadIdentity{max-width:92px!important}
}


/* ==========================================================
   0.51.83 — SIMPLIFY / STABLE NAVIGATION / PROFILE DRAWER
   Houdt alle functies intact, maar voorkomt los/dansend gedrag.
   ========================================================== */
#gcProfileMenu.gcProfileMenuCody{
  display:grid!important;grid-template-rows:auto minmax(0,1fr) auto!important;
  overflow:hidden!important;padding:0!important;
  width:min(386px,calc(100vw - 20px))!important;
  top:58px!important;right:10px!important;left:auto!important;
  bottom:10px!important;height:auto!important;max-height:none!important;
  border-radius:18px!important;border:1px solid rgba(107,135,171,.35)!important;
  background:linear-gradient(180deg,#192536 0%,#111b28 100%)!important;
  box-shadow:0 24px 70px rgba(0,0,0,.55)!important;
  contain:layout paint!important;
}
#gcProfileMenu.gcProfileMenuCody.hidden{display:none!important}
.gcProfileDrawerHead{position:relative!important;z-index:3!important;padding:10px 12px 9px!important;border-bottom:1px solid rgba(118,140,169,.18)!important;background:#192536!important}
.gcProfileDrawerScroll{min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;padding:10px!important;scrollbar-width:thin!important;scrollbar-color:#64758d transparent!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important}
.gcProfileDrawerScroll::-webkit-scrollbar{width:6px!important}.gcProfileDrawerScroll::-webkit-scrollbar-thumb{background:#64758d!important;border-radius:999px!important}
.gcProfileDrawerFooter{position:relative!important;z-index:4!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;padding:9px 10px max(9px,env(safe-area-inset-bottom))!important;border-top:1px solid rgba(118,140,169,.2)!important;background:#101a27!important}
.gcProfileDrawerFooter button{min-height:44px!important;border:1px solid rgba(106,132,167,.28)!important;border-radius:11px!important;background:#182638!important;color:#dce6f2!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;padding:0 10px!important;transform:none!important;transition:background .12s ease,border-color .12s ease!important}
.gcProfileDrawerFooter .gcProfileLogout{background:#211923!important;border-color:rgba(224,91,116,.34)!important;color:#ff9baa!important}

/* Alle groepen zijn één rustig systeem; Hulp/Beheer staan niet meer als losse blokken. */
#gcProfileMenu .gcProfileMenuGroup{margin:0 0 8px!important;padding:6px!important;border:1px solid rgba(105,132,166,.22)!important;border-radius:13px!important;background:rgba(13,24,36,.68)!important;color:inherit!important;letter-spacing:normal!important}
#gcProfileMenu .gcProfileMenuGroup:last-child{margin-bottom:0!important}
#gcProfileMenu .gcProfileMenuLabel{padding:2px 5px 6px!important;color:#e3bd55!important;font-size:8px!important;font-weight:950!important;letter-spacing:.12em!important;text-transform:uppercase!important}
#gcProfileMenu .gcProfileMenuGroup>button,#gcProfileMenu .gcProfileMenuGroup>a{
  min-height:47px!important;height:auto!important;margin:0!important;padding:6px 7px!important;
  grid-template-columns:36px minmax(0,1fr) 16px!important;gap:8px!important;
  border:0!important;border-radius:9px!important;background:transparent!important;box-shadow:none!important;
  transform:none!important;transition:background .12s ease!important;
}
#gcProfileMenu .gcProfileMenuGroup>button+button,#gcProfileMenu .gcProfileMenuGroup>a+a,#gcProfileMenu .gcProfileMenuGroup>button+a,#gcProfileMenu .gcProfileMenuGroup>a+button{border-top:1px solid rgba(107,132,163,.14)!important;border-top-left-radius:0!important;border-top-right-radius:0!important}
#gcProfileMenu .gcProfileMenuGroup>button:hover,#gcProfileMenu .gcProfileMenuGroup>a:hover{background:rgba(86,125,170,.10)!important;transform:none!important}
#gcProfileMenu .gcProfileMenuIcon{width:34px!important;height:34px!important;display:grid!important;place-items:center!important;border-radius:9px!important;border:1px solid rgba(111,140,177,.27)!important;background:#172638!important;font-size:15px!important;line-height:1!important}
#gcProfileMenu .gcProfileMenuCopy b{display:block!important;font-size:11px!important;line-height:1.15!important;color:#f2f5f9!important}
#gcProfileMenu .gcProfileMenuCopy small{display:block!important;margin-top:2px!important;color:#8293a8!important;font-size:8px!important;line-height:1.25!important;white-space:normal!important}
#gcProfileMenu .gcProfileMenuGroup>button>i,#gcProfileMenu .gcProfileMenuGroup>a>i{font-size:17px!important;color:#8ba0b8!important;transform:none!important}
#profileMenuContact .gcProfileMenuIcon{color:#bce8ff!important}#profileMenuApply .gcProfileMenuIcon{color:#f4ca67!important}#profileMenuAdmin .gcProfileMenuIcon{color:#8bd4ff!important}

/* Header en drie snelle acties blijven exact op hun plek. */
#gcProfileMenu .profileMenuIdentity{min-height:60px!important;padding:3px 46px 8px 2px!important;grid-template-columns:52px minmax(0,1fr)!important;gap:10px!important;border:0!important;background:transparent!important}
#gcProfileMenu .profileMenuIdentity img{width:50px!important;height:50px!important}
#gcProfileMenu .gcProfileDrawerClose{position:absolute!important;right:10px!important;top:10px!important;width:38px!important;height:38px!important;min-height:38px!important;border:1px solid rgba(110,139,176,.28)!important;border-radius:11px!important;background:#122033!important;color:#dbe6f2!important;display:grid!important;place-items:center!important;padding:0!important;transform:none!important}
#gcProfileMenu .gcProfileQuickActions{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important;margin:0!important;padding:4px 0 0!important}
#gcProfileMenu .gcProfileQuickActions button{min-height:54px!important;padding:6px 3px!important;border:1px solid rgba(112,140,176,.26)!important;border-radius:11px!important;background:#122033!important;color:#edf4fb!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:3px!important;transform:none!important;box-shadow:none!important;transition:background .12s ease,border-color .12s ease!important}
#gcProfileMenu .gcProfileQuickActions button:hover{background:#182a40!important;border-color:rgba(228,188,84,.34)!important;transform:none!important}
#gcProfileMenu .gcProfileQuickActions button span{font-size:16px!important;line-height:1!important}#gcProfileMenu .gcProfileQuickActions button b{font-size:9px!important}

/* Geen 'dansende' navigatieknoppen meer. */
.quickbar button,.gcTopIcon,.gcHamburger,.gcRightTabs button,.composerPlus,#emoji,.composerVoice,.composerSend,#gcProfileMenu button,#gcProfileMenu a{transform:none!important}
.quickbar button:hover,.gcTopIcon:hover,.gcHamburger:hover,.gcRightTabs button:hover,.composerPlus:hover,#emoji:hover,.composerVoice:hover,.composerSend:hover,#gcProfileMenu button:hover,#gcProfileMenu a:hover{transform:none!important}
.quickbar button:active,.gcTopIcon:active,.gcHamburger:active,.gcRightTabs button:active,.composerPlus:active,#emoji:active,.composerVoice:active,.composerSend:active,#gcProfileMenu button:active,#gcProfileMenu a:active{transform:none!important}

/* Meldingen: compacter op alle schermen zonder functionaliteit te verbergen. */
#notificationsModal .notificationCard{padding:9px 10px!important;border-radius:11px!important;margin-bottom:6px!important}
#notificationsModal .notificationCard h4,#notificationsModal .notificationCard b{line-height:1.25!important}
#notificationsModal .pushSettings{gap:7px!important;padding:8px!important;border-radius:11px!important}

/* Mobiele navigatie: stabiele tikvlakken; geen hover-shift, horizontaal scrollbaar indien nodig. */
@media(max-width:700px){
  #gcProfileMenu.gcProfileMenuCody{top:max(58px,env(safe-area-inset-top))!important;right:6px!important;bottom:calc(6px + env(safe-area-inset-bottom))!important;width:calc(100vw - 12px)!important;border-radius:15px!important}
  .gcProfileDrawerScroll{padding:8px!important}
  #gcProfileMenu .gcProfileMenuGroup{margin-bottom:7px!important;padding:5px!important}
  #gcProfileMenu .gcProfileMenuGroup>button,#gcProfileMenu .gcProfileMenuGroup>a{min-height:49px!important}
  .quickbar{scrollbar-width:none!important}.quickbar::-webkit-scrollbar{display:none!important}
}
@media(max-width:430px){
  #gcProfileMenu .gcProfileMenuCopy small{font-size:7.5px!important}
  #gcProfileMenu .gcProfileDrawerFooter button{font-size:10px!important}
}
@media(pointer:coarse),(prefers-reduced-motion:reduce){
  .quickbar button,.gcTopIcon,.gcHamburger,.gcRightTabs button,#gcProfileMenu button,#gcProfileMenu a,.addonTrayGrid>button,.roomShell{transition:none!important;animation:none!important;transform:none!important}
}

/* 0.51.84 — profielmenu afwerking: niet los op desktop, alle groepen gelijk, sluitknop strak */
#gcProfileMenu.gcProfileMenuCody{
  overflow:hidden!important;
}
#gcProfileMenu .gcProfileDrawerHead{
  padding:12px 12px 10px!important;
}
#gcProfileMenu .profileMenuIdentity{
  align-items:center!important;
  min-height:64px!important;
}
#gcProfileMenu .gcProfileDrawerClose{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:0!important;
  line-height:1!important;
  text-indent:0!important;
}
#gcProfileMenu .gcProfileDrawerClose::before{
  content:'×';
  display:block!important;
  font-size:22px!important;
  line-height:1!important;
  font-weight:700!important;
  transform:translateY(-1px)!important;
}
#gcProfileMenu .gcProfileMenuGroup{
  display:grid!important;
  gap:0!important;
  padding:6px!important;
}
#gcProfileMenu .gcProfileMenuLabel{
  margin:0 0 2px!important;
}
#gcProfileMenu .gcProfileMenuGroup>button,
#gcProfileMenu .gcProfileMenuGroup>a{
  align-items:center!important;
  min-height:50px!important;
  padding:7px 8px!important;
}
#gcProfileMenu .gcProfileMenuGroup>button:last-child,
#gcProfileMenu .gcProfileMenuGroup>a:last-child{
  margin-bottom:0!important;
}
#gcProfileMenu .gcProfileMenuIcon{
  width:36px!important;
  height:36px!important;
}
#gcProfileMenu .gcProfileMenuCopy b{
  font-size:11px!important;
}
#gcProfileMenu .gcProfileMenuCopy small{
  margin-top:3px!important;
  font-size:8px!important;
  line-height:1.3!important;
}
#gcProfileMenu .gcProfileQuickActions button{
  min-height:56px!important;
}
#gcProfileMenu .gcProfileQuickActions button b{
  line-height:1.15!important;
}
#gcProfileMenu .gcProfileDrawerFooter{
  gap:10px!important;
  padding:10px!important;
}
#gcProfileMenu .gcProfileDrawerFooter button{
  min-height:46px!important;
}
/* Desktop: strak onder de profielfoto i.p.v. los zwevend hoog in beeld. */
@media (min-width:701px){
  #gcProfileMenu.gcProfileMenuCody{
    top:60px!important;
    right:10px!important;
    width:min(380px,calc(100vw - 20px))!important;
    max-height:min(78dvh,760px)!important;
    border-radius:18px!important;
  }
}
/* Mobiel: iets compacter maar alles exact gelijk getekend. */
@media (max-width:700px){
  #gcProfileMenu .gcProfileMenuGroup{padding:5px!important}
  #gcProfileMenu .gcProfileMenuGroup>button,
  #gcProfileMenu .gcProfileMenuGroup>a{min-height:48px!important}
  #gcProfileMenu .gcProfileDrawerClose{width:40px!important;height:40px!important;min-height:40px!important}
}
/* Geen springende knopjes meer in of rond het profielmenu. */
#gcProfileMenu button,
#gcProfileMenu a,
#gcProfileMenu button:hover,
#gcProfileMenu a:hover,
#gcProfileMenu button:active,
#gcProfileMenu a:active,
#myProfileBtn,
#myProfileBtn:hover,
#myProfileBtn:active{
  transform:none!important;
  animation:none!important;
}

/* 0.51.85 — stabiele drawers/modals + uniforme iconen */
/* Profielmenu blijft een viewport-drawer onder body; nooit meer vervormd door topbar flex/layout. */
#gcProfileMenu.gcProfileMenuCody{
  position:fixed!important;
  z-index:12000!important;
  box-sizing:border-box!important;
}
@media (min-width:701px){
  #gcProfileMenu.gcProfileMenuCody{
    width:min(390px,calc(100vw - 20px))!important;
    max-height:min(82dvh,780px)!important;
    border-radius:16px!important;
  }
}
/* Gebruik de echte × uit de knop en centreer hem exact. */
#gcProfileMenu .gcProfileDrawerClose,
.modalClose,
.mobileClose{
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  line-height:1!important;
  text-align:center!important;
  font-family:Arial,Helvetica,sans-serif!important;
  transform:none!important;
  box-sizing:border-box!important;
  flex:0 0 auto!important;
}
#gcProfileMenu .gcProfileDrawerClose{
  width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;
  font-size:24px!important;text-indent:0!important;
}
#gcProfileMenu .gcProfileDrawerClose::before{content:none!important;display:none!important}
.modalClose,.mobileClose{
  width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important;
  font-size:23px!important;
}
/* Alle hoofdiconen: zelfde optische maat, midden en geen 'dansende' borders/transforms. */
.gcTopIcon,.quickbar button,.gcRightTabs button,.gcHamburger,#mainMenuBtn,#topUserListRestore{
  display:inline-grid!important;
  place-items:center!important;
  box-sizing:border-box!important;
  transform:none!important;
  animation:none!important;
  line-height:1!important;
  background-clip:padding-box!important;
}
.gcTopIcon:hover,.quickbar button:hover,.gcRightTabs button:hover,.gcHamburger:hover,#mainMenuBtn:hover,#topUserListRestore:hover,
.gcTopIcon:active,.quickbar button:active,.gcRightTabs button:active,.gcHamburger:active,#mainMenuBtn:active,#topUserListRestore:active{
  transform:none!important;
}
.gcTopIcon>svg,.gcTopIcon>img,.quickbar button>svg,.gcRightTabs button>svg{
  width:18px!important;height:18px!important;display:block!important;margin:auto!important;
}
/* Modals/drawers delen dezelfde veilige rand en sluiten nooit buiten beeld. */
.modal .modalCard{
  box-sizing:border-box!important;
  max-width:min(var(--gc-modal-max,920px),calc(100vw - 24px))!important;
}
@media (max-width:700px){
  .modal .modalCard{max-width:calc(100vw - 12px)!important}
  .modalClose,.mobileClose{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important}
}

/* 0.51.86 — profielmenu echt aan avatar verankerd + finale UI-consistentie */
/* Desktop: popover is visueel verbonden met de profielfoto. De positie zelf
   wordt door JS uit de echte avatarpositie berekend. */
@media (min-width:701px){
  #gcProfileMenu.gcProfileMenuCody{
    right:auto!important;
    bottom:auto!important;
    width:360px;
    max-height:calc(100dvh - 74px)!important;
    border-radius:14px!important;
    border:1px solid rgba(111,140,177,.34)!important;
    background:#0e1927!important;
    box-shadow:0 18px 52px rgba(0,0,0,.52),0 0 0 1px rgba(255,255,255,.015)!important;
  }
  #gcProfileMenu.gcProfileMenuCody::before{
    content:'';
    position:absolute;
    z-index:3;
    top:-7px;
    left:calc(var(--gc-profile-anchor-x, 330px) - 7px);
    width:13px;
    height:13px;
    transform:rotate(45deg)!important;
    background:#0e1927;
    border-left:1px solid rgba(111,140,177,.34);
    border-top:1px solid rgba(111,140,177,.34);
    pointer-events:none;
  }
}

/* Eén doorlopende menu-opbouw. Secties hebben dezelfde maat, lijnen en ritme;
   Hulp & community / Beheer wijken niet meer af van Instellingen. */
#gcProfileMenu .gcProfileDrawerScroll{
  padding:8px 10px 10px!important;
  scrollbar-gutter:stable!important;
}
#gcProfileMenu .gcProfileMenuGroup{
  display:block!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
}
#gcProfileMenu .gcProfileMenuGroup + .gcProfileMenuGroup{
  margin-top:10px!important;
  padding-top:9px!important;
  border-top:1px solid rgba(111,140,177,.17)!important;
}
#gcProfileMenu .gcProfileMenuLabel{
  display:block!important;
  margin:0!important;
  padding:0 4px 5px!important;
  color:#e5bd55!important;
  font-size:8px!important;
  font-weight:950!important;
  line-height:1.2!important;
  letter-spacing:.11em!important;
}
#gcProfileMenu .gcProfileMenuGroup>button,
#gcProfileMenu .gcProfileMenuGroup>a{
  display:grid!important;
  grid-template-columns:36px minmax(0,1fr) 16px!important;
  gap:9px!important;
  align-items:center!important;
  width:100%!important;
  min-height:48px!important;
  margin:0!important;
  padding:6px 7px!important;
  border:0!important;
  border-radius:9px!important;
  background:transparent!important;
  box-shadow:none!important;
}
#gcProfileMenu .gcProfileMenuGroup>button + button,
#gcProfileMenu .gcProfileMenuGroup>a + a,
#gcProfileMenu .gcProfileMenuGroup>button + a,
#gcProfileMenu .gcProfileMenuGroup>a + button{
  border-top:1px solid rgba(111,140,177,.12)!important;
  border-top-left-radius:0!important;
  border-top-right-radius:0!important;
}
#gcProfileMenu .gcProfileMenuGroup>button:hover,
#gcProfileMenu .gcProfileMenuGroup>a:hover{
  background:rgba(71,107,148,.12)!important;
}
#gcProfileMenu .gcProfileMenuIcon{
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  display:grid!important;
  place-items:center!important;
  margin:0!important;
  border:1px solid rgba(111,140,177,.27)!important;
  border-radius:9px!important;
  background:#142438!important;
  line-height:1!important;
  overflow:hidden!important;
}
#gcProfileMenu .gcProfileMenuCopy{min-width:0!important}
#gcProfileMenu .gcProfileMenuCopy b{
  margin:0!important;
  font-size:11px!important;
  line-height:1.2!important;
}
#gcProfileMenu .gcProfileMenuCopy small{
  margin:2px 0 0!important;
  font-size:8px!important;
  line-height:1.25!important;
  white-space:normal!important;
}
#gcProfileMenu .gcProfileMenuGroup>button>i,
#gcProfileMenu .gcProfileMenuGroup>a>i{
  width:16px!important;
  display:grid!important;
  place-items:center!important;
  margin:0!important;
  font-size:15px!important;
  line-height:1!important;
}

/* Header/quick-actions en X staan pixelvast. */
#gcProfileMenu .gcProfileDrawerHead{position:relative!important;padding:10px 10px 9px!important}
#gcProfileMenu .profileMenuIdentity{padding:2px 48px 7px 1px!important;min-height:58px!important}
#gcProfileMenu .gcProfileDrawerClose{
  position:absolute!important;
  top:9px!important;
  right:9px!important;
  width:38px!important;
  height:38px!important;
  min-width:38px!important;
  min-height:38px!important;
  margin:0!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:10px!important;
  font-size:0!important;
  line-height:0!important;
  text-indent:0!important;
  overflow:hidden!important;
}
#gcProfileMenu .gcProfileDrawerClose::after{
  content:'×';
  display:block!important;
  width:24px!important;
  height:24px!important;
  font:700 24px/22px Arial,Helvetica,sans-serif!important;
  text-align:center!important;
  color:inherit!important;
  transform:none!important;
}
#gcProfileMenu .gcProfileQuickActions{gap:7px!important;padding-top:3px!important}
#gcProfileMenu .gcProfileQuickActions button{min-height:54px!important;border-radius:10px!important}

/* Footer is onderdeel van hetzelfde menu, niet een los paneel. */
#gcProfileMenu .gcProfileDrawerFooter{
  gap:8px!important;
  padding:8px 10px 10px!important;
  border-top:1px solid rgba(111,140,177,.18)!important;
  background:#0e1927!important;
}
#gcProfileMenu .gcProfileDrawerFooter button{min-height:44px!important;border-radius:10px!important}

/* Kamerlijst: alleen de teller op de echte kamerkaart. */
.gcRoomGroupTitle>b{display:none!important}
.gcRoomGroupTitle{min-height:22px!important;display:flex!important;align-items:center!important;justify-content:flex-start!important}
.roomPeopleCount{
  min-width:30px!important;
  display:grid!important;
  grid-template-columns:auto auto!important;
  place-items:center!important;
  justify-content:center!important;
  gap:4px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.roomPeopleCount b{font-variant-numeric:tabular-nums!important}

/* Universele sluitknoppen: geen optische verschuiving meer, ook niet in Edge. */
.modalClose,.mobileClose,.gcRoomAccessClose,.gcEntryRoomClose,.drawerClose{
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0!important;
  margin:0!important;
  line-height:1!important;
  text-indent:0!important;
  transform:none!important;
}

/* Geen dansende primaire chatbediening door borders/translate. */
.gcTopIcon,.quickbar button,.gcRightTabs button,.gcHamburger,#mainMenuBtn,#topUserListRestore,
.roomSelect,.roomGameActions button,#gcProfileMenu button,#gcProfileMenu a{
  transform:none!important;
  will-change:auto!important;
}
.gcTopIcon:hover,.quickbar button:hover,.gcRightTabs button:hover,.gcHamburger:hover,#mainMenuBtn:hover,#topUserListRestore:hover,
.roomSelect:hover,.roomGameActions button:hover,#gcProfileMenu button:hover,#gcProfileMenu a:hover,
.gcTopIcon:active,.quickbar button:active,.gcRightTabs button:active,.gcHamburger:active,#mainMenuBtn:active,#topUserListRestore:active,
.roomSelect:active,.roomGameActions button:active,#gcProfileMenu button:active,#gcProfileMenu a:active{transform:none!important}

@media(max-width:700px){
  #gcProfileMenu.gcProfileMenuCody{
    left:6px!important;
    right:6px!important;
    top:calc(54px + env(safe-area-inset-top))!important;
    bottom:6px!important;
    width:auto!important;
    max-height:none!important;
    border-radius:14px!important;
  }
  #gcProfileMenu.gcProfileMenuCody::before{display:none!important}
  #gcProfileMenu .gcProfileDrawerScroll{padding:7px 9px 9px!important}
}

/* === 0.51.87 — UI detail pass: strak, stabiel en overal dezelfde maatvoering === */

/* Userlist: titel behouden, losse X uit de lijst zelf verwijderen. De bovenbalkknop
   blijft de mobiele userlist gewoon openen/sluiten. */
#usersPanel .gcRightTitle .mobileClose,
#usersPanel .gcRightTitle button[data-close="usersPanel"]{
  display:none!important;
}
#usersPanel .gcRightTitle{
  min-height:31px!important;
  height:31px!important;
  padding:0 4px!important;
  justify-content:flex-start!important;
}
#usersPanel .gcRightTitle strong{
  display:block!important;
  line-height:31px!important;
  margin:0!important;
}

/* Pixelvaste X: niet meer afhankelijk van het font-teken × (Edge/Chrome verschillen).
   De twee lijnen worden geometrisch gecentreerd in het echte klikvlak. */
#gcProfileMenu .gcProfileDrawerClose,
.gcUserMenuClose,
.modalClose,
.mobileClose,
.gcRoomAccessClose,
.gcEntryRoomClose,
.drawerClose{
  position:relative!important;
  box-sizing:border-box!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  text-indent:-9999px!important;
  font-size:0!important;
  line-height:0!important;
  overflow:hidden!important;
}
#gcProfileMenu .gcProfileDrawerClose::before,
#gcProfileMenu .gcProfileDrawerClose::after,
.gcUserMenuClose::before,.gcUserMenuClose::after,
.modalClose::before,.modalClose::after,
.mobileClose::before,.mobileClose::after,
.gcRoomAccessClose::before,.gcRoomAccessClose::after,
.gcEntryRoomClose::before,.gcEntryRoomClose::after,
.drawerClose::before,.drawerClose::after{
  content:''!important;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:15px!important;
  height:2px!important;
  margin:0!important;
  border:0!important;
  border-radius:999px!important;
  background:currentColor!important;
  transform-origin:center!important;
  pointer-events:none!important;
}
#gcProfileMenu .gcProfileDrawerClose::before,
.gcUserMenuClose::before,.modalClose::before,.mobileClose::before,.gcRoomAccessClose::before,.gcEntryRoomClose::before,.drawerClose::before{
  transform:translate(-50%,-50%) rotate(45deg)!important;
}
#gcProfileMenu .gcProfileDrawerClose::after,
.gcUserMenuClose::after,.modalClose::after,.mobileClose::after,.gcRoomAccessClose::after,.gcEntryRoomClose::after,.drawerClose::after{
  transform:translate(-50%,-50%) rotate(-45deg)!important;
}

/* Profielmenu: ALLE secties zijn één identiek cardsysteem. Dus Profiel, Sociaal,
   Instellingen, Hulp & community en Beheer hebben exact hetzelfde ritme. */
#gcProfileMenu .gcProfileDrawerScroll{
  padding:10px!important;
}
#gcProfileMenu .gcProfileMenuGroup{
  margin:0 0 10px!important;
  padding:7px!important;
  border:1px solid rgba(102,132,169,.25)!important;
  border-radius:14px!important;
  background:linear-gradient(180deg,rgba(13,27,43,.96),rgba(10,23,37,.96))!important;
  box-shadow:0 1px 0 rgba(255,255,255,.015) inset!important;
}
#gcProfileMenu .gcProfileMenuGroup + .gcProfileMenuGroup{
  margin-top:0!important;
  padding-top:7px!important;
  border-top:1px solid rgba(102,132,169,.25)!important;
}
#gcProfileMenu .gcProfileMenuGroup:last-child{margin-bottom:0!important}
#gcProfileMenu .gcProfileMenuLabel{
  padding:2px 6px 6px!important;
  font-size:9px!important;
  line-height:1.1!important;
  letter-spacing:.10em!important;
}
#gcProfileMenu .gcProfileMenuGroup>button,
#gcProfileMenu .gcProfileMenuGroup>a{
  min-height:45px!important;
  grid-template-columns:34px minmax(0,1fr) 14px!important;
  gap:8px!important;
  padding:5px 6px!important;
  border-radius:9px!important;
}
#gcProfileMenu .gcProfileMenuGroup>button + button,
#gcProfileMenu .gcProfileMenuGroup>a + a,
#gcProfileMenu .gcProfileMenuGroup>button + a,
#gcProfileMenu .gcProfileMenuGroup>a + button{
  border-top:1px solid rgba(111,140,177,.14)!important;
  border-top-left-radius:0!important;
  border-top-right-radius:0!important;
}
#gcProfileMenu .gcProfileMenuIcon{
  width:32px!important;height:32px!important;min-width:32px!important;
  border-radius:9px!important;
}
#gcProfileMenu .gcProfileMenuCopy b{font-size:11px!important;line-height:1.15!important}
#gcProfileMenu .gcProfileMenuCopy small{font-size:8px!important;line-height:1.2!important;margin-top:2px!important}
#gcProfileMenu .gcProfileMenuGroup>button>i,
#gcProfileMenu .gcProfileMenuGroup>a>i{font-size:14px!important;width:14px!important}

/* Gebruikersmenu: compacter, duidelijk gegroepeerd en minder "grote tegels". */
.gcUserMenuPolished{
  width:min(470px,calc(100vw - 24px))!important;
  padding:15px!important;
  border-radius:18px!important;
}
.gcUserMenuPolished>header{
  min-height:58px!important;
  padding:0 46px 12px 0!important;
  margin-bottom:8px!important;
  gap:11px!important;
}
.gcUserMenuPolished>header .uAvatar{width:52px!important;height:52px!important;flex-basis:52px!important}
.gcUserMenuPolished>header b{font-size:21px!important;line-height:1.05!important}
.gcUserMenuPolished>header small{font-size:11px!important}
.gcUserMenuClose{right:12px!important;top:12px!important;width:36px!important;height:36px!important;border-radius:11px!important}
.gcUserMenuSectionLabel{
  margin:11px 2px 6px!important;
  font-size:9px!important;
  line-height:1.1!important;
  letter-spacing:.12em!important;
}
.gcUserMenuPolished .gcUserMenuGrid{
  gap:7px!important;
  margin-top:0!important;
}
.gcUserMenuPolished .gcUserMenuGrid>button,
.gcUserMenuPolished [data-friend-action-slot]>button{
  min-height:46px!important;
  padding:8px 10px!important;
  border-radius:11px!important;
  gap:8px!important;
  font-size:12px!important;
  box-shadow:none!important;
}
.gcUserMenuPolished .gcActionIcon{
  width:21px!important;
  flex-basis:21px!important;
  font-size:14px!important;
  line-height:1!important;
}
.gcUserMenuPrivacy .gcUserMenuCallBlock{grid-column:1/-1!important}
.gcUserMenuInvestigation button{min-height:48px!important}
.gcUserMenuInvestigation button b{font-size:12px!important}
.gcUserMenuInvestigation button small{font-size:8px!important}
.gcUserMenuModeration .gcUserMenuBan{min-height:44px!important}

/* Geen hover-layoutshift: alleen achtergrond/border veranderen. */
.gcUserMenuPolished button,
.gcUserMenuPolished button:hover,
.gcUserMenuPolished button:active,
#gcProfileMenu button,#gcProfileMenu a,
#gcProfileMenu button:hover,#gcProfileMenu a:hover,
#gcProfileMenu button:active,#gcProfileMenu a:active{
  transform:none!important;
  translate:none!important;
}

@media(max-width:560px){
  .gcUserMenuPolished{padding:12px!important;border-radius:16px!important}
  .gcUserMenuPolished .gcUserMenuGrid{grid-template-columns:1fr 1fr!important}
  .gcUserMenuPolished .gcUserMenuGrid>button,
  .gcUserMenuPolished [data-friend-action-slot]>button{min-height:46px!important;padding:7px 8px!important;font-size:11px!important}
  .gcUserMenuPrivacy .gcUserMenuCallBlock,.gcUserMenuPolished .gcUserMenuBan{grid-column:1/-1!important}
  #gcProfileMenu .gcProfileMenuGroup{padding:6px!important;margin-bottom:8px!important}
}
@media(max-width:380px){
  .gcUserMenuPolished .gcUserMenuGrid{grid-template-columns:1fr!important}
  .gcUserMenuPrivacy .gcUserMenuCallBlock,.gcUserMenuPolished .gcUserMenuBan{grid-column:auto!important}
}

/* === 0.51.89 — consistency & responsive QA pass ===
   Eén laatste, bewuste laag die de zichtbare componenten gelijk trekt zonder
   functionaliteit of event-bindings te wijzigen. */

/* 1) Profielmenu: elk blok exact hetzelfde ritme, ongeacht button of link. */
#gcProfileMenu .gcProfileMenuGroup{
  display:block!important;
  width:100%!important;
  margin:0 0 10px!important;
  padding:8px!important;
  border:1px solid rgba(112,142,178,.24)!important;
  border-radius:14px!important;
  background:#0c1826!important;
  overflow:hidden!important;
}
#gcProfileMenu .gcProfileMenuLabel{
  display:block!important;
  margin:0!important;
  padding:2px 7px 7px!important;
  color:#e8bd4d!important;
  font-size:9px!important;
  font-weight:900!important;
  letter-spacing:.11em!important;
  line-height:1.2!important;
  text-transform:uppercase!important;
}
#gcProfileMenu .gcProfileMenuGroup>button,
#gcProfileMenu .gcProfileMenuGroup>a{
  appearance:none!important;
  -webkit-appearance:none!important;
  box-sizing:border-box!important;
  width:100%!important;
  min-width:0!important;
  min-height:48px!important;
  margin:0!important;
  padding:6px 7px!important;
  display:grid!important;
  grid-template-columns:34px minmax(0,1fr) 16px!important;
  align-items:center!important;
  gap:9px!important;
  border:0!important;
  border-bottom:1px solid rgba(112,142,178,.15)!important;
  border-radius:0!important;
  background:transparent!important;
  color:#f4f7fb!important;
  text-decoration:none!important;
  text-align:left!important;
  box-shadow:none!important;
  cursor:pointer!important;
  transform:none!important;
  line-height:1.2!important;
}
#gcProfileMenu .gcProfileMenuGroup>button:first-of-type,
#gcProfileMenu .gcProfileMenuGroup>a:first-of-type{border-top-left-radius:10px!important;border-top-right-radius:10px!important}
#gcProfileMenu .gcProfileMenuGroup>button:last-child,
#gcProfileMenu .gcProfileMenuGroup>a:last-child{
  border-bottom:0!important;
  border-bottom-left-radius:10px!important;
  border-bottom-right-radius:10px!important;
}
#gcProfileMenu .gcProfileMenuGroup>button:hover,
#gcProfileMenu .gcProfileMenuGroup>a:hover,
#gcProfileMenu .gcProfileMenuGroup>button:focus-visible,
#gcProfileMenu .gcProfileMenuGroup>a:focus-visible{
  background:#122237!important;
  outline:none!important;
  transform:none!important;
}
#gcProfileMenu .gcProfileMenuIcon{
  width:34px!important;height:34px!important;min-width:34px!important;
  display:grid!important;place-items:center!important;
  margin:0!important;padding:0!important;
  border:1px solid rgba(112,142,178,.30)!important;
  border-radius:9px!important;
  background:#14263a!important;
  font-size:15px!important;line-height:1!important;
}
#gcProfileMenu .gcProfileMenuCopy{display:block!important;min-width:0!important;margin:0!important}
#gcProfileMenu .gcProfileMenuCopy b{display:block!important;margin:0!important;font-size:11.5px!important;line-height:1.2!important;color:#f6f7fa!important}
#gcProfileMenu .gcProfileMenuCopy small{display:block!important;margin:2px 0 0!important;color:#90a0b3!important;font-size:8px!important;line-height:1.3!important;white-space:normal!important}
#gcProfileMenu .gcProfileMenuGroup>button>i,
#gcProfileMenu .gcProfileMenuGroup>a>i{display:grid!important;place-items:center!important;width:16px!important;height:20px!important;margin:0!important;color:#aebdcd!important;font-size:16px!important;line-height:1!important;font-style:normal!important}

/* 2) Sluitknoppen: één geometrische X, echt in het midden op Edge/Chrome/Safari. */
#gcProfileMenu .gcProfileDrawerClose,
.modalClose,.mobileClose,.gcUserMenuClose,.gcRoomAccessClose,.gcEntryRoomClose,.drawerClose{
  position:relative!important;
  box-sizing:border-box!important;
  width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;
  padding:0!important;margin:0!important;
  display:block!important;
  border:1px solid rgba(118,148,186,.34)!important;
  border-radius:12px!important;
  background:#112033!important;
  color:#dce7f2!important;
  font-size:0!important;line-height:0!important;text-indent:-9999px!important;
  overflow:hidden!important;
  transform:none!important;
}
#gcProfileMenu .gcProfileDrawerClose::before,#gcProfileMenu .gcProfileDrawerClose::after,
.modalClose::before,.modalClose::after,.mobileClose::before,.mobileClose::after,
.gcUserMenuClose::before,.gcUserMenuClose::after,.gcRoomAccessClose::before,.gcRoomAccessClose::after,
.gcEntryRoomClose::before,.gcEntryRoomClose::after,.drawerClose::before,.drawerClose::after{
  content:''!important;display:block!important;position:absolute!important;
  left:50%!important;top:50%!important;width:15px!important;height:2px!important;
  margin:0!important;padding:0!important;border:0!important;border-radius:999px!important;
  background:currentColor!important;transform-origin:center center!important;pointer-events:none!important;
}
#gcProfileMenu .gcProfileDrawerClose::before,.modalClose::before,.mobileClose::before,.gcUserMenuClose::before,.gcRoomAccessClose::before,.gcEntryRoomClose::before,.drawerClose::before{transform:translate(-50%,-50%) rotate(45deg)!important}
#gcProfileMenu .gcProfileDrawerClose::after,.modalClose::after,.mobileClose::after,.gcUserMenuClose::after,.gcRoomAccessClose::after,.gcEntryRoomClose::after,.drawerClose::after{transform:translate(-50%,-50%) rotate(-45deg)!important}

/* 3) Modals/drawers: consistente veilige ruimte en bediening op elk device. */
.modal>.modalCard,.modal>.notificationCard,.modal>.profileModalCard,.modal>.profileEditorCard,.modal>.profileStudioCard,.modal>.chatOptionsCard{
  box-sizing:border-box!important;
  max-width:calc(100vw - max(16px,2 * env(safe-area-inset-left)))!important;
}
.modal button,.modal a[role="button"],.modal .primaryBtn,.modal .secondaryBtn,.modal .dangerBtn,.modal .goodBtn{
  touch-action:manipulation!important;
}
@media (pointer:coarse){
  .modal button,#gcProfileMenu button,#gcProfileMenu a,.quickbar button,.gcTopIcon,.gcRightTabs button{min-height:44px!important}
}

/* 4) Meldingen: geen zwevende 'Openen →' meer en kaarten groeien mee met inhoud. */
#notificationsModal .notification{
  height:auto!important;
  min-height:72px!important;
  align-items:start!important;
  overflow:hidden!important;
}
#notificationsModal .notification>div:nth-child(2){min-width:0!important;align-self:center!important}
#notificationsModal .notification p{margin:3px 0!important;line-height:1.35!important}
#notificationsModal .notification small{display:block!important;margin-top:2px!important}
#notificationsModal .notificationOpenHint{
  position:static!important;
  display:inline-flex!important;
  align-items:center!important;
  width:auto!important;
  margin:5px 0 0!important;
  padding:0!important;
  line-height:1.2!important;
  white-space:nowrap!important;
}
#notificationsModal .notification>button{
  align-self:start!important;
  width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important;
  margin:0!important;padding:0!important;
  display:grid!important;place-items:center!important;
}

/* 5) Publiek profiel mobiel: avatar niet afknippen, tabs passend en info veel compacter. */
@media(max-width:700px){
  #profileModal{padding:4px!important;align-items:center!important}
  #profileModal .profileModalCard{
    width:calc(100vw - 8px)!important;
    height:calc(var(--gc-cody-vv-height,100dvh) - 8px)!important;
    max-height:calc(var(--gc-cody-vv-height,100dvh) - 8px)!important;
    border-radius:16px!important;
    overflow:hidden!important;
  }
  #profileModal #profileContent{padding:0!important}
  #profileModal .gcProfileHero{
    box-sizing:border-box!important;
    min-height:174px!important;height:auto!important;max-height:none!important;
    padding:18px 52px 12px!important;
    overflow:visible!important;
    justify-content:flex-end!important;
  }
  #profileModal .gcProfileAvatar,#profileModal .gcProfileAvatar img{
    width:76px!important;height:76px!important;min-width:76px!important;min-height:76px!important;max-width:76px!important;max-height:76px!important;
  }
  #profileModal .gcProfileIdentity h2{font-size:23px!important;line-height:1.05!important;margin:7px 0 1px!important}
  #profileModal .gcProfileTabs{
    display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
    width:100%!important;height:auto!important;min-height:52px!important;padding:5px!important;gap:5px!important;
    overflow:visible!important;
  }
  #profileModal .gcProfileTabs button{
    min-width:0!important;width:100%!important;height:42px!important;min-height:42px!important;
    padding:6px 5px!important;border-radius:10px!important;font-size:11px!important;
  }
  #profileModal .gcProfilePane[data-profile-pane="info"].active,
  #profileModal .gcProfilePane.gcProfileAboutPane.active{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;padding:10px!important;
  }
  #profileModal .profileInfoRow{
    min-height:76px!important;
    margin:0!important;padding:10px!important;
    display:flex!important;flex-direction:column!important;justify-content:center!important;gap:5px!important;
    border:1px solid rgba(112,142,178,.25)!important;border-radius:12px!important;
    background:#0d1b2a!important;
  }
  #profileModal .profileInfoRow span{font-size:10px!important;line-height:1.2!important}
  #profileModal .profileInfoRow strong{font-size:13px!important;line-height:1.25!important;text-align:left!important}
}
@media(max-width:430px){
  #profileModal .gcProfilePane[data-profile-pane="info"].active,
  #profileModal .gcProfilePane.gcProfileAboutPane.active{grid-template-columns:1fr 1fr!important}
}
@media(max-width:350px){
  #profileModal .gcProfilePane[data-profile-pane="info"].active,
  #profileModal .gcProfilePane.gcProfileAboutPane.active{grid-template-columns:1fr!important}
}

/* 6) Meldingen mobiel: compact maar leesbaar, zonder onderlinge overlap. */
@media(max-width:700px){
  #notificationsModal .notificationCard{padding:10px!important}
  #notificationsModal .notificationHead{padding:3px 48px 9px 2px!important;gap:7px!important}
  #notificationsModal .notificationHead>div:last-child{gap:6px!important}
  #notificationsModal .pushSettings{max-height:220px!important;margin:6px 0 8px!important;padding:9px!important}
  #notificationsModal .notificationList{gap:8px!important;padding-bottom:12px!important}
  #notificationsModal .notification{min-height:78px!important;padding:9px!important;grid-template-columns:34px minmax(0,1fr) 32px!important}
  #notificationsModal .notification p{-webkit-line-clamp:3!important}
}

/* 7) Geen 'dansende' bediening door transforms/transitions op kernnavigatie. */
#gcProfileMenu button,#gcProfileMenu a,.modalClose,.mobileClose,.gcUserMenuClose,
.quickbar button,.gcTopIcon,.gcHamburger,.gcRightTabs button,.composer button,.roomSelect,.roomGameActions button{
  translate:none!important;transform:none!important;
}
#gcProfileMenu button:hover,#gcProfileMenu a:hover,#gcProfileMenu button:active,#gcProfileMenu a:active,
.quickbar button:hover,.gcTopIcon:hover,.gcHamburger:hover,.gcRightTabs button:hover,.composer button:hover,
.quickbar button:active,.gcTopIcon:active,.gcHamburger:active,.gcRightTabs button:active,.composer button:active{
  translate:none!important;transform:none!important;
}
@media(prefers-reduced-motion:reduce),(pointer:coarse){
  #gcProfileMenu *, .modal button,.quickbar button,.gcTopIcon,.gcRightTabs button,.composer button{
    animation:none!important;transition:none!important;
  }
}

/* 0.51.89 — overige zichtbare X-bediening gebruikt dezelfde optische centrering,
   maar behoudt de bestaande knopmaat van het betreffende onderdeel. */
#emojiClose,#reactionPickerClose,#actionTrayClose,#privateInboxClose,#pmClose,
#pmSecureViewerClose,.newsWallClose,#luckyWinClose,#gcPublicVideoClose{
  position:relative!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  font-size:0!important;line-height:0!important;text-indent:-9999px!important;
  overflow:hidden!important;transform:none!important;
}
#emojiClose::before,#emojiClose::after,#reactionPickerClose::before,#reactionPickerClose::after,
#actionTrayClose::before,#actionTrayClose::after,#privateInboxClose::before,#privateInboxClose::after,
#pmClose::before,#pmClose::after,#pmSecureViewerClose::before,#pmSecureViewerClose::after,
.newsWallClose::before,.newsWallClose::after,#luckyWinClose::before,#luckyWinClose::after,
#gcPublicVideoClose::before,#gcPublicVideoClose::after{
  content:''!important;position:absolute!important;left:50%!important;top:50%!important;
  width:13px!important;height:2px!important;border-radius:999px!important;background:currentColor!important;
  transform-origin:center!important;pointer-events:none!important;
}
#emojiClose::before,#reactionPickerClose::before,#actionTrayClose::before,#privateInboxClose::before,
#pmClose::before,#pmSecureViewerClose::before,.newsWallClose::before,#luckyWinClose::before,#gcPublicVideoClose::before{transform:translate(-50%,-50%) rotate(45deg)!important}
#emojiClose::after,#reactionPickerClose::after,#actionTrayClose::after,#privateInboxClose::after,
#pmClose::after,#pmSecureViewerClose::after,.newsWallClose::after,#luckyWinClose::after,#gcPublicVideoClose::after{transform:translate(-50%,-50%) rotate(-45deg)!important}

/* ==========================================================================\n   GC 0.51.90 — UNIFIED UI / DEVICE MATRIX / MOBILE NAV\n   Doel: één visuele taal zonder bestaande functies of handlers te vervangen.\n   ========================================================================== */

:root{
  --gc-ui-hit:44px;
  --gc-ui-icon:20px;
  --gc-ui-gap:10px;
  --gc-ui-radius:12px;
  --gc-ui-border:rgba(113,145,181,.28);
  --gc-ui-surface:#102033;
  --gc-ui-surface-hover:#14283e;
}

/* 1. Eén icon-frame voor topbar, quickbar, drawers en menu's. */
.gcUiIcon,
.gcTopIcon>svg,
.gcHamburger>svg,
.quickbar button i>svg,
.gcRightTabs button svg,
.gcMobileBottomNav svg{
  width:var(--gc-ui-icon)!important;
  height:var(--gc-ui-icon)!important;
  min-width:var(--gc-ui-icon)!important;
  min-height:var(--gc-ui-icon)!important;
  display:block!important;
  overflow:visible!important;
  transform:none!important;
  filter:none!important;
  shape-rendering:geometricPrecision;
}
.gcTopIcon,.gcHamburger,.quickbar button,.gcRightTabs button{
  box-sizing:border-box!important;
  align-items:center!important;
  justify-content:center!important;
}
.gcTopIcon>svg,.gcHamburger>svg,.quickbar button i,.gcRightTabs button>*{
  margin:auto!important;
}
.quickbar button i{
  display:grid!important;
  place-items:center!important;
  width:30px!important;height:30px!important;min-width:30px!important;min-height:30px!important;
  border-radius:9px!important;
}

/* Icon-vakken in profiel-, hulp- en beheermenu's exact gelijk. */
#gcProfileMenu .gcProfileMenuIcon,
#gcProfileMenu section>a>.gcProfileMenuIcon,
#gcProfileMenu section>button>.gcProfileMenuIcon{
  width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important;
  display:grid!important;place-items:center!important;
  border-radius:10px!important;
  line-height:1!important;text-align:center!important;
  box-sizing:border-box!important;
}
#gcProfileMenu section>a,#gcProfileMenu section>button{
  min-height:54px!important;
  grid-template-columns:34px minmax(0,1fr) 20px!important;
  gap:10px!important;
  align-items:center!important;
}
#gcProfileMenu .gcProfileMenuCopy{min-width:0!important}
#gcProfileMenu .gcProfileMenuCopy b,#gcProfileMenu .gcProfileMenuCopy small{display:block!important;overflow:hidden!important;text-overflow:ellipsis!important}
#gcProfileMenu section>a>i,#gcProfileMenu section>button>i{width:20px!important;text-align:center!important;margin:0!important}

/* 2. Counters: overal dezelfde badge-geometrie. */
.badge,.gcNewsUnreadBadge,.rankCount,[data-gc-count]{
  box-sizing:border-box!important;
  min-width:18px!important;height:18px!important;
  padding:0 5px!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  border-radius:999px!important;
  font-size:10px!important;font-weight:800!important;line-height:1!important;
  font-variant-numeric:tabular-nums!important;
  white-space:nowrap!important;
}
.badge.hidden,.gcNewsUnreadBadge.hidden{display:none!important}

/* 3. Uniforme focus- en clickstates: geen springende knoppen. */
button,a,[role="button"]{ -webkit-tap-highlight-color:transparent; }
.gcTopIcon,.gcHamburger,.quickbar button,.gcRightTabs button,
#gcProfileMenu button,#gcProfileMenu a,.gcMobileBottomNav button,
.modal button,.modal a[role="button"]{
  transform:none!important;translate:none!important;
  transition:background-color .14s ease,border-color .14s ease,box-shadow .14s ease,color .14s ease!important;
}
.gcTopIcon:hover,.gcHamburger:hover,.quickbar button:hover,.gcRightTabs button:hover,
#gcProfileMenu button:hover,#gcProfileMenu a:hover,.gcMobileBottomNav button:hover{
  transform:none!important;translate:none!important;
}
.gcTopIcon:focus-visible,.gcHamburger:focus-visible,.quickbar button:focus-visible,.gcRightTabs button:focus-visible,
#gcProfileMenu button:focus-visible,#gcProfileMenu a:focus-visible,.gcMobileBottomNav button:focus-visible,
.modal button:focus-visible,.modal a:focus-visible{
  outline:2px solid #e8b83f!important;outline-offset:2px!important;
}

/* 4. Mobiele hoofdnavigatie: Chat / Kamers / Vrienden / Meldingen / Meer. */
.gcMobileBottomNav{display:none}
@media(max-width:700px){
  .gcMobileBottomNav{
    position:fixed!important;
    left:max(6px,env(safe-area-inset-left))!important;
    right:max(6px,env(safe-area-inset-right))!important;
    bottom:max(6px,env(safe-area-inset-bottom))!important;
    z-index:2147482000!important;
    height:58px!important;
    padding:5px!important;
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:3px!important;
    border:1px solid rgba(111,143,179,.35)!important;
    border-radius:15px!important;
    background:rgba(8,18,30,.96)!important;
    box-shadow:0 12px 36px rgba(0,0,0,.42)!important;
    backdrop-filter:blur(14px)!important;
  }
  .gcMobileBottomNav button{
    position:relative!important;
    min-width:0!important;min-height:46px!important;height:46px!important;
    padding:4px 2px!important;margin:0!important;
    display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:2px!important;
    border:0!important;border-radius:10px!important;
    background:transparent!important;color:#aebdce!important;
    font:inherit!important;
  }
  .gcMobileBottomNav button:active,.gcMobileBottomNav button:focus-visible{background:#14283e!important;color:#fff!important}
  .gcMobileBottomNav svg{width:19px!important;height:19px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.7!important;stroke-linecap:round!important;stroke-linejoin:round!important}
  .gcMobileBottomNav span{font-size:9px!important;font-weight:800!important;line-height:1!important;white-space:nowrap!important}
  .gcMobileBottomNav .badge{position:absolute!important;top:1px!important;right:max(4px,calc(50% - 22px))!important;background:#d94f72!important;color:#fff!important;border:2px solid #08121e!important}
  html.gcKeyboardOpen .gcMobileBottomNav{display:none!important}
  body.gcAuthActive .gcMobileBottomNav{display:none!important}

}

/* 5. Device matrix: vaste regels i.p.v. losse uitzonderingen. */
@media(max-width:360px){
  :root{--gc-ui-hit:42px;--gc-ui-icon:18px}
  .gcMobileBottomNav{left:3px!important;right:3px!important;bottom:max(55px,calc(51px + env(safe-area-inset-bottom)))!important;border-radius:12px!important}
  .gcMobileBottomNav span{font-size:8px!important}
  .modal>.modalCard,.modal>.notificationCard,.modal>.profileModalCard,.modal>.profileEditorCard,.modal>.chatOptionsCard{width:calc(100vw - 6px)!important;max-width:calc(100vw - 6px)!important;border-radius:12px!important}
}
@media(min-width:361px) and (max-width:700px){
  .modal>.modalCard,.modal>.notificationCard,.modal>.profileModalCard,.modal>.profileEditorCard,.modal>.chatOptionsCard{width:min(100%,calc(100vw - 12px))!important;max-width:calc(100vw - 12px)!important}
}
@media(min-width:701px) and (max-width:1100px){
  :root{--gc-ui-hit:44px;--gc-ui-icon:20px}
  .modal>.modalCard,.modal>.notificationCard,.modal>.profileModalCard,.modal>.profileEditorCard,.modal>.chatOptionsCard{max-width:min(92vw,860px)!important}
  #gcProfileMenu{max-width:min(420px,calc(100vw - 24px))!important}
}
@media(min-width:1101px) and (max-width:1600px){
  .modal>.modalCard,.modal>.notificationCard,.modal>.profileModalCard,.modal>.profileEditorCard,.modal>.chatOptionsCard{max-width:min(88vw,980px)!important}
}
@media(min-width:1601px){
  .modal>.modalCard,.modal>.notificationCard,.modal>.profileModalCard,.modal>.profileEditorCard,.modal>.chatOptionsCard{max-width:1080px!important}
  .topbar,.layout{--gc-wide-gutter:clamp(0px,2vw,28px)}
}

/* 6. Touch: alle kernacties bruikbaar zonder hover-afhankelijkheid. */
@media(pointer:coarse){
  .gcTopIcon,.gcHamburger,.quickbar button,.gcRightTabs button,
  #gcProfileMenu section>a,#gcProfileMenu section>button,.gcMobileBottomNav button,
  .modal button,.roomSelect,.roomGameActions button{min-height:44px!important}
  .quickbar button,.gcTopIcon,.gcHamburger,.gcRightTabs button{touch-action:manipulation!important}
}

/* 7. Reduced motion en lage-performance devices. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important}
  .gcTopIcon,.gcHamburger,.quickbar button,.gcRightTabs button,#gcProfileMenu *,
  .gcMobileBottomNav *,.modal button{animation:none!important;transition:none!important}
}

/* 0.51.90 mobile cleanup: vervang de oude brede quickbar door de 5-delige hoofdnavigatie.
   Alle oude quickbarfuncties blijven beschikbaar via 'Meer'. */
@media(max-width:700px){
  #quickbar{display:none!important}
  .gcMobileBottomNav{bottom:max(6px,env(safe-area-inset-bottom))!important}
  .chat{padding-bottom:62px!important}
  .gcRightPanel,.rooms{bottom:64px!important}
  .actionTray{bottom:70px!important}
  .messages{padding-bottom:max(var(--gc-chat-bottom-reserve,126px),calc(126px + env(safe-area-inset-bottom)))!important}
}
.gcMobileMore{display:none}
@media(max-width:700px){
  .gcMobileMore:not(.hidden){display:block!important;position:fixed!important;inset:0!important;z-index:2147482100!important}
  .gcMobileMoreBackdrop{position:absolute!important;inset:0!important;background:rgba(0,0,0,.54)!important;backdrop-filter:blur(2px)!important}
  .gcMobileMoreCard{
    position:absolute!important;left:max(8px,env(safe-area-inset-left))!important;right:max(8px,env(safe-area-inset-right))!important;
    bottom:max(70px,calc(66px + env(safe-area-inset-bottom)))!important;
    max-height:min(70dvh,560px)!important;overflow:auto!important;
    padding:10px!important;border:1px solid var(--gc-ui-border)!important;border-radius:16px!important;
    background:#0b1928!important;box-shadow:0 18px 55px rgba(0,0,0,.5)!important;
  }
  .gcMobileMoreCard>header{position:sticky!important;top:-10px!important;z-index:2!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;padding:10px 4px 10px!important;background:#0b1928!important;border-bottom:1px solid rgba(111,143,179,.2)!important}
  .gcMobileMoreCard>header>div{display:flex!important;flex-direction:column!important;gap:2px!important}.gcMobileMoreCard>header b{font-size:15px!important}.gcMobileMoreCard>header small{font-size:10px!important;color:#93a5b8!important}
  .gcMobileMoreClose{position:relative!important;width:38px!important;height:38px!important;min-width:38px!important;padding:0!important;border:1px solid var(--gc-ui-border)!important;border-radius:11px!important;background:#112033!important;color:#dce7f2!important;font-size:0!important}
  .gcMobileMoreClose::before,.gcMobileMoreClose::after{content:''!important;position:absolute!important;left:50%!important;top:50%!important;width:14px!important;height:2px!important;border-radius:999px!important;background:currentColor!important;transform-origin:center!important}
  .gcMobileMoreClose::before{transform:translate(-50%,-50%) rotate(45deg)!important}.gcMobileMoreClose::after{transform:translate(-50%,-50%) rotate(-45deg)!important}
  .gcMobileMoreGrid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important;padding-top:10px!important}
  .gcMobileMoreGrid>button{min-width:0!important;min-height:72px!important;padding:8px 4px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:6px!important;border:1px solid rgba(111,143,179,.22)!important;border-radius:12px!important;background:#102033!important;color:#e4edf7!important}
  .gcMobileMoreGrid>button svg{width:23px!important;height:23px!important;display:block!important}.gcMobileMoreGrid>button span{max-width:100%!important;font-size:10px!important;font-weight:800!important;line-height:1.15!important;text-align:center!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
}
@media(max-width:380px){.gcMobileMoreGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}


/* ==========================================================================
   GC 0.51.91 — VISUAL CONSISTENCY / ROOM PICKER CLEANUP
   Eén maatvoering voor ALLE profielmenu-secties + compactere kamerkiezer.
   ========================================================================== */

#gcProfileMenu .gcProfileDrawerScroll{
  padding:10px!important;
}
#gcProfileMenu .gcProfileMenuGroup{
  margin:0 0 10px!important;
  padding:8px!important;
  border:1px solid rgba(104,137,176,.28)!important;
  border-radius:14px!important;
  background:linear-gradient(180deg,rgba(14,29,46,.98),rgba(10,24,39,.98))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018)!important;
}
#gcProfileMenu .gcProfileMenuGroup + .gcProfileMenuGroup{
  margin-top:0!important;
  padding-top:8px!important;
  border-top:1px solid rgba(104,137,176,.28)!important;
}
#gcProfileMenu .gcProfileMenuLabel{
  display:block!important;
  margin:0!important;
  padding:2px 8px 7px!important;
  color:#efc24f!important;
  font-size:10px!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
}
#gcProfileMenu .gcProfileMenuGroup > :is(button,a){
  position:relative!important;
  width:100%!important;
  min-width:0!important;
  min-height:54px!important;
  height:54px!important;
  margin:0!important;
  padding:7px 7px!important;
  display:grid!important;
  grid-template-columns:36px minmax(0,1fr) 18px!important;
  align-items:center!important;
  gap:10px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#eef4fb!important;
  text-align:left!important;
  text-decoration:none!important;
  box-shadow:none!important;
  overflow:hidden!important;
}
#gcProfileMenu .gcProfileMenuGroup > :is(button,a) + :is(button,a){
  border-top:1px solid rgba(102,132,169,.18)!important;
}
#gcProfileMenu .gcProfileMenuGroup > :is(button,a):hover,
#gcProfileMenu .gcProfileMenuGroup > :is(button,a):focus-visible{
  background:rgba(35,57,82,.48)!important;
}
#gcProfileMenu .gcProfileMenuIcon{
  width:36px!important;
  height:36px!important;
  min-width:36px!important;
  min-height:36px!important;
  display:grid!important;
  place-items:center!important;
  margin:0!important;
  border:1px solid rgba(112,151,191,.38)!important;
  border-radius:10px!important;
  background:#14263a!important;
  line-height:1!important;
  font-size:16px!important;
  text-align:center!important;
  box-sizing:border-box!important;
}
#gcProfileMenu .gcProfileMenuCopy{
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  gap:2px!important;
}
#gcProfileMenu .gcProfileMenuCopy b{
  margin:0!important;
  font-size:12px!important;
  line-height:1.15!important;
  font-weight:900!important;
  color:#f4f7fb!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
#gcProfileMenu .gcProfileMenuCopy small{
  margin:0!important;
  font-size:9px!important;
  line-height:1.2!important;
  color:#91a3b7!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
#gcProfileMenu .gcProfileMenuGroup > :is(button,a) > i{
  width:18px!important;
  min-width:18px!important;
  height:18px!important;
  display:grid!important;
  place-items:center!important;
  margin:0!important;
  color:#b5c6d8!important;
  font-size:18px!important;
  line-height:1!important;
  font-style:normal!important;
}

/* Hulp en Beheer zijn geen uitzonderingen meer: exact dezelfde card/rij-layout. */
#gcProfileMenu .gcProfileMenuGroup[aria-label="Hulp en community"],
#gcProfileMenu #profileMenuAdminGroup{
  padding:8px!important;
  min-height:0!important;
}
#gcProfileMenu #profileMenuAdminGroup > a{
  min-height:54px!important;
  height:54px!important;
}

/* Kamerdrawer: rustiger, compacter en visueel één systeem. */
.rooms .roomsHead,
.rooms .roomDrawerHead,
.rooms > header{
  min-height:84px!important;
}
.rooms #rooms{
  padding:12px 10px 24px!important;
}
.gcRoomGroup{
  margin:0 0 16px!important;
}
.gcRoomGroupTitle{
  margin:0 0 7px!important;
  padding:0 5px!important;
  min-height:18px!important;
  display:flex!important;
  align-items:center!important;
}
.gcRoomGroupTitle > span{
  font-size:10px!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:.06em!important;
  color:#aeb9c8!important;
}
.roomShell{
  position:relative!important;
  margin:0 0 9px!important;
  overflow:hidden!important;
  border:1px solid rgba(93,124,160,.32)!important;
  border-radius:14px!important;
  background:linear-gradient(180deg,#101d2c,#0e1a28)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018)!important;
}
.roomShell.active{
  border-color:#e5b928!important;
  box-shadow:inset 3px 0 0 #e5b928,0 0 0 1px rgba(229,185,40,.08)!important;
}
.rooms .roomShell .room.roomSelect{
  position:relative!important;
  width:100%!important;
  min-height:86px!important;
  padding:11px 12px!important;
  display:grid!important;
  grid-template-columns:46px minmax(0,1fr) auto!important;
  grid-template-rows:auto!important;
  align-items:center!important;
  gap:11px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  text-align:left!important;
}
.roomIcon{
  width:46px!important;
  height:46px!important;
  min-width:46px!important;
  min-height:46px!important;
  margin:0!important;
  display:grid!important;
  place-items:center!important;
  border-radius:12px!important;
  font-size:23px!important;
}
.roomCopy{
  min-width:0!important;
  padding:0!important;
}
.roomCopy .roomEyebrow{
  margin:0 0 3px!important;
  font-size:8px!important;
  line-height:1!important;
  letter-spacing:.08em!important;
}
.roomCopy strong{
  font-size:14px!important;
  line-height:1.15!important;
}
.roomCopy .roomAccessTag{
  display:inline-flex!important;
  align-items:center!important;
  min-height:18px!important;
  margin:4px 0 0!important;
  padding:1px 7px!important;
  vertical-align:middle!important;
}
.roomCopy > span:not(.roomAccessTag){
  margin-top:4px!important;
  max-width:100%!important;
  font-size:9px!important;
  line-height:1.3!important;
  color:#97a8bb!important;
}
.roomPeopleCount{
  align-self:start!important;
  justify-self:end!important;
  min-width:28px!important;
  height:25px!important;
  margin:2px 0 0 4px!important;
  padding:0 3px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:3px!important;
  border:0!important;
  background:transparent!important;
  color:#d7e0eb!important;
  font-size:11px!important;
}
.roomPeopleCount > span{
  font-size:11px!important;
  opacity:.75!important;
}
.roomPeopleCount b{
  font-size:11px!important;
  font-variant-numeric:tabular-nums!important;
}
.roomArrow{
  position:absolute!important;
  left:31px!important;
  bottom:8px!important;
  width:18px!important;
  height:18px!important;
  margin:0!important;
  display:none!important;
  place-items:center!important;
  font-size:13px!important;
  line-height:1!important;
  color:#ddb43e!important;
}
.roomShell.active .roomArrow{
  display:grid!important;
}
.roomGameStrip{
  margin:0!important;
  padding:7px 12px 8px 69px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:5px!important;
  border-top:1px solid rgba(99,129,165,.16)!important;
}
.roomGameStrip span{
  width:24px!important;
  height:24px!important;
  min-width:24px!important;
  min-height:24px!important;
  border-radius:7px!important;
  font-size:12px!important;
}
.roomGameActions{
  margin:0!important;
  padding:0 10px 10px!important;
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:7px!important;
}
.roomGameActions button{
  min-height:36px!important;
  height:36px!important;
  margin:0!important;
  padding:0 8px!important;
  border-radius:9px!important;
  font-size:10px!important;
  line-height:1!important;
  transform:none!important;
}
.roomGameActions button:hover,
.roomGameActions button:active{transform:none!important}

/* Kleine schermen: dezelfde verhoudingen, geen samengeperste rommel. */
@media(max-width:430px){
  #gcProfileMenu .gcProfileMenuGroup{
    padding:7px!important;
    margin-bottom:8px!important;
  }
  #gcProfileMenu .gcProfileMenuGroup > :is(button,a){
    min-height:52px!important;
    height:52px!important;
    grid-template-columns:34px minmax(0,1fr) 16px!important;
    gap:9px!important;
    padding:6px!important;
  }
  #gcProfileMenu .gcProfileMenuIcon{
    width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important;
  }
  #gcProfileMenu .gcProfileMenuCopy b{font-size:11.5px!important}
  #gcProfileMenu .gcProfileMenuCopy small{font-size:8.5px!important}

  .rooms #rooms{padding:10px 8px 20px!important}
  .rooms .roomShell .room.roomSelect{
    min-height:82px!important;
    grid-template-columns:44px minmax(0,1fr) auto!important;
    gap:9px!important;
    padding:10px!important;
  }
  .roomIcon{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important}
  .roomGameStrip{padding-left:63px!important}
  .roomGameActions{padding-left:8px!important;padding-right:8px!important}
}


/* ==========================================================================\n   GC 0.51.92 — STRICT VISUAL QA / HELP PAGES / MODAL CONSISTENCY\n   ========================================================================== */
/* Profielmenu: ALLE secties exact dezelfde component. */
#gcProfileMenu .gcProfileDrawerScroll{padding:10px 11px 12px!important;box-sizing:border-box!important}
#gcProfileMenu .gcProfileMenuGroup,#gcProfileMenu .gcProfileMenuGroup[aria-label="Profiel"],#gcProfileMenu .gcProfileMenuGroup[aria-label="Sociaal"],#gcProfileMenu .gcProfileMenuGroup[aria-label="Instellingen"],#gcProfileMenu .gcProfileMenuGroup[aria-label="Hulp en community"],#gcProfileMenu #profileMenuAdminGroup{display:block!important;width:100%!important;min-width:0!important;min-height:0!important;margin:0 0 10px!important;padding:8px!important;border:1px solid #263a50!important;border-radius:14px!important;background:#0c1a29!important;box-shadow:none!important;overflow:hidden!important;box-sizing:border-box!important}
#gcProfileMenu .gcProfileMenuGroup+.gcProfileMenuGroup{margin-top:0!important;padding-top:8px!important;border-top:1px solid #263a50!important}
#gcProfileMenu .gcProfileMenuGroup:last-child{margin-bottom:0!important}
#gcProfileMenu .gcProfileMenuLabel{display:flex!important;align-items:center!important;width:100%!important;height:25px!important;min-height:25px!important;margin:0!important;padding:0 7px 5px!important;color:#efc14b!important;font-size:9px!important;font-weight:900!important;line-height:1!important;letter-spacing:.1em!important;text-transform:uppercase!important;box-sizing:border-box!important}
#gcProfileMenu .gcProfileMenuGroup>button,#gcProfileMenu .gcProfileMenuGroup>a{-webkit-appearance:none!important;appearance:none!important;display:grid!important;grid-template-columns:34px minmax(0,1fr) 16px!important;align-items:center!important;width:100%!important;min-width:0!important;height:50px!important;min-height:50px!important;max-height:50px!important;margin:0!important;padding:6px!important;gap:9px!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:#eef4fb!important;font:inherit!important;line-height:1!important;text-align:left!important;text-decoration:none!important;transform:none!important;translate:none!important;box-sizing:border-box!important}
#gcProfileMenu .gcProfileMenuGroup>button+button,#gcProfileMenu .gcProfileMenuGroup>a+a,#gcProfileMenu .gcProfileMenuGroup>button+a,#gcProfileMenu .gcProfileMenuGroup>a+button{border-top:1px solid #203247!important}
#gcProfileMenu .gcProfileMenuGroup>button:hover,#gcProfileMenu .gcProfileMenuGroup>a:hover,#gcProfileMenu .gcProfileMenuGroup>button:focus-visible,#gcProfileMenu .gcProfileMenuGroup>a:focus-visible{background:#11243a!important;transform:none!important;translate:none!important}
#gcProfileMenu .gcProfileMenuIcon{display:grid!important;place-items:center!important;width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important;max-width:34px!important;max-height:34px!important;margin:0!important;padding:0!important;border:1px solid #35506c!important;border-radius:9px!important;background:#14283c!important;color:#e7f1fb!important;font-size:15px!important;line-height:1!important;box-sizing:border-box!important}
#gcProfileMenu .gcProfileMenuCopy{min-width:0!important;display:grid!important;align-content:center!important;gap:3px!important}
#gcProfileMenu .gcProfileMenuCopy b{margin:0!important;font-size:12px!important;line-height:1.1!important;font-weight:900!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
#gcProfileMenu .gcProfileMenuCopy small{margin:0!important;font-size:8.5px!important;line-height:1.1!important;color:#91a4b9!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
#gcProfileMenu .gcProfileMenuGroup>button>i,#gcProfileMenu .gcProfileMenuGroup>a>i{width:16px!important;height:16px!important;display:grid!important;place-items:center!important;margin:0!important;color:#b9c8d7!important;font-size:17px!important;line-height:1!important;font-style:normal!important}

/* Gebruikersactie-menu: minder hoogte, rustiger grid, geen losse/rare vlakken. */
.gcUserMenuOverlay{padding:12px!important}
.gcUserMenu.gcUserMenuPolished{width:min(410px,calc(100vw - 24px))!important;max-height:min(760px,calc(100dvh - 24px))!important;padding:12px!important;border-radius:16px!important;overflow:auto!important;box-sizing:border-box!important}
.gcUserMenuPolished>header{min-height:58px!important;padding:2px 42px 10px 2px!important;gap:10px!important}
.gcUserMenuPolished>header .uAvatar{width:44px!important;height:44px!important;flex:0 0 44px!important}.gcUserMenuPolished>header b{font-size:18px!important;line-height:1.05!important}.gcUserMenuPolished>header small{margin-top:3px!important;font-size:10px!important}
.gcUserMenuPolished .gcUserMenuSectionLabel{margin:10px 2px 5px!important;font-size:8px!important;line-height:1!important;letter-spacing:.12em!important}
.gcUserMenuPolished .gcUserMenuGrid{grid-template-columns:1fr 1fr!important;gap:7px!important;margin:0!important}
.gcUserMenuPolished .gcUserMenuGrid>button,.gcUserMenuPolished [data-friend-action-slot]>button{min-height:49px!important;height:49px!important;margin:0!important;padding:8px 10px!important;gap:8px!important;border-radius:11px!important;font-size:12px!important;line-height:1.1!important;transform:none!important;box-sizing:border-box!important}
.gcUserMenuPolished .gcActionIcon{width:20px!important;min-width:20px!important;flex:0 0 20px!important;font-size:14px!important;text-align:center!important}.gcUserMenuPolished .gcUserMenuCallBlock,.gcUserMenuPolished .gcUserMenuBan{grid-column:1/-1!important}
.gcUserMenuPolished .gcUserMenuInvestigation button{min-height:48px!important;height:auto!important;padding:8px 10px!important}.gcUserMenuPolished .gcUserMenuInvestigation button b{font-size:12px!important}.gcUserMenuPolished .gcUserMenuInvestigation button small{margin-top:2px!important;font-size:8px!important;line-height:1.15!important}

/* Publiek profiel: hero/close/avatar/tabs/info op één duidelijke grid, ook mobiel. */
#profileModal .profileModalCard{width:min(720px,calc(100vw - 22px))!important;max-height:min(88dvh,780px)!important;border-radius:18px!important;overflow:hidden!important}
#profileModal .modalClose{top:12px!important;right:12px!important;width:38px!important;height:38px!important;z-index:20!important}
#profileContent .gcProfileHero{min-height:205px!important;padding:24px 24px 18px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-end!important;text-align:center!important;box-sizing:border-box!important}
#profileContent .gcProfileAvatar{position:relative!important;left:auto!important;bottom:auto!important;width:82px!important;height:82px!important;margin:0 auto 10px!important;flex:0 0 auto!important}
#profileContent .gcProfileIdentity{position:relative!important;left:auto!important;right:auto!important;bottom:auto!important;width:100%!important;max-width:560px!important;padding:0 44px!important;text-align:center!important;box-sizing:border-box!important}
#profileContent .gcProfileIdentity h2{margin:5px 0 3px!important;line-height:1.08!important}#profileContent .gcProfileIdentity p{margin:0 0 7px!important}.gcProfileCounters{top:13px!important;left:14px!important;right:auto!important}
#profileContent .gcProfileTabs{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:0!important;overflow:visible!important}
#profileContent .gcProfileTabs button{min-width:0!important;min-height:46px!important;height:46px!important;padding:0 5px!important;font-size:10px!important;white-space:nowrap!important}
#profileContent .gcProfilePane{padding:12px!important}.profileInfoRow{min-height:46px!important;padding:9px 12px!important;align-items:center!important}.profileInfoRow>span{min-width:0!important}.profileInfoRow strong{max-width:55%!important;text-align:right!important;overflow-wrap:anywhere!important}
#profileContent .profileAboutActions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}.profileAboutActions button{min-height:42px!important;margin:0!important}.profileAboutActions .gcProfileSafetyTitle{grid-column:1/-1!important;margin:6px 0 0!important;padding-top:10px!important;border-top:1px solid rgba(111,143,179,.22)!important}
@media(max-width:520px){#profileModal .profileModalCard{width:calc(100vw - 8px)!important;max-height:calc(100dvh - 8px)!important;border-radius:14px!important}#profileContent .gcProfileHero{min-height:196px!important;padding:22px 12px 15px!important}#profileContent .gcProfileIdentity{padding:0 28px!important}#profileContent .gcProfileTabs{grid-template-columns:repeat(4,minmax(0,1fr))!important}#profileContent .gcProfileTabs button{font-size:9px!important;padding:0 2px!important}#profileContent .gcProfilePane{padding:8px!important}.profileInfoRow{min-height:43px!important;padding:8px 10px!important}.profileInfoRow span,.profileInfoRow strong{font-size:9px!important}#profileContent .profileAboutActions{grid-template-columns:1fr 1fr!important;gap:6px!important}.profileAboutActions button{min-height:40px!important;font-size:9px!important}}

/* Kamerkiezer: rustiger en compacter. */
.rooms #rooms{padding:11px 9px 22px!important}.gcRoomGroup{margin:0 0 15px!important}.gcRoomGroupTitle{margin:0 0 7px!important;padding:0 5px!important;min-height:18px!important}.gcRoomGroupTitle>span{font-size:9px!important;line-height:1!important;letter-spacing:.07em!important}.roomShell{margin:0 0 8px!important;border-radius:14px!important;overflow:hidden!important}.rooms .roomShell .room.roomSelect{min-height:80px!important;padding:10px 11px!important;grid-template-columns:44px minmax(0,1fr) auto!important;gap:10px!important}.roomIcon{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;border-radius:12px!important;font-size:22px!important}.roomCopy .roomEyebrow{margin:0 0 3px!important;font-size:7.5px!important;letter-spacing:.09em!important}.roomCopy strong{font-size:13px!important;line-height:1.12!important}.roomCopy>span:not(.roomAccessTag){margin-top:3px!important;font-size:8.5px!important;line-height:1.25!important}.roomPeopleCount{align-self:start!important;justify-self:end!important;margin:2px 0 0!important;min-width:27px!important;height:22px!important;padding:0 2px!important;gap:3px!important;background:transparent!important;border:0!important}.roomPeopleCount span,.roomPeopleCount b{font-size:10px!important}.roomArrow{left:28px!important;bottom:7px!important;width:17px!important;height:17px!important;display:none!important}.roomShell.active .roomArrow{display:grid!important}.roomGameStrip{margin:0!important;padding:7px 10px 7px 64px!important;gap:5px!important;border-top:1px solid rgba(99,129,165,.15)!important}.roomGameStrip span{width:23px!important;height:23px!important;min-width:23px!important;min-height:23px!important;border-radius:7px!important;font-size:11px!important}.roomGameActions{margin:0!important;padding:0 9px 9px!important;grid-template-columns:1fr 1fr!important;gap:7px!important}.roomGameActions button{height:35px!important;min-height:35px!important;padding:0 7px!important;border-radius:9px!important;font-size:9.5px!important;transform:none!important}

/* Hulpcentrum: pagina-aantallen, inhoud en navigatie zijn altijd zichtbaar/logisch. */
.gcHelpArticle>button{grid-template-columns:auto minmax(0,1fr) auto auto!important}.gcHelpPageBadge{min-width:34px!important;height:22px!important;padding:0 7px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;border:1px solid rgba(111,143,179,.28)!important;border-radius:999px!important;background:#102238!important;color:#aebfd1!important;font-size:9px!important;font-weight:900!important;font-variant-numeric:tabular-nums!important}.gcHelpArticleBody.open{display:block!important;visibility:visible!important;opacity:1!important;height:auto!important;max-height:none!important;overflow:visible!important}.gcHelpArticle.isOpen{border-color:rgba(230,185,69,.42)!important}.gcHelpArticleBody p{margin:0 0 10px!important;line-height:1.55!important}.gcHelpArticleBody ol{margin:0 0 12px!important;padding-left:20px!important}.gcHelpArticleBody li{margin:0 0 6px!important;line-height:1.45!important}.gcHelpPageNav{margin:12px 0 0!important;padding:10px 0 0!important;display:grid!important;grid-template-columns:1fr auto 1fr!important;align-items:center!important;gap:8px!important;border-top:1px solid rgba(111,143,179,.20)!important}.gcHelpPageNav span{text-align:center!important;color:#9eafc1!important;font-size:9px!important;white-space:nowrap!important}.gcHelpPageNav button{min-height:34px!important;padding:0 10px!important;border:1px solid rgba(111,143,179,.28)!important;border-radius:9px!important;background:#102238!important;color:#e2ebf4!important;font-size:9px!important;font-weight:850!important}.gcHelpPageNav button:last-child{justify-self:end!important}.gcHelpPageNav button:disabled{opacity:.35!important;cursor:default!important}

/* Algemene modal/buttons polish: geen rare iconen, lijnen of verspringing. */
.modalCard,.profileModalCard,.gcUserMenu,.gcRoomAccessCard{box-sizing:border-box!important}.modalClose,.gcUserMenuClose,.gcProfileDrawerClose,.gcRoomAccessClose{display:grid!important;place-items:center!important;line-height:1!important;padding:0!important;transform:none!important;translate:none!important}.modal button,.modal a[role="button"],.gcUserMenu button,.roomGameActions button{box-sizing:border-box!important;transform:none!important;translate:none!important}.modal button:hover,.modal button:active,.gcUserMenu button:hover,.gcUserMenu button:active{transform:none!important;translate:none!important}
@media(max-width:430px){.gcUserMenuOverlay{align-items:end!important;padding:0!important}.gcUserMenu.gcUserMenuPolished{width:100%!important;max-width:none!important;max-height:88dvh!important;border-radius:17px 17px 0 0!important;padding:11px!important}.gcHelpArticle>button{grid-template-columns:auto minmax(0,1fr) auto!important}.gcHelpArticle>button>i{display:none!important}.gcHelpPageNav{grid-template-columns:1fr 1fr!important}.gcHelpPageNav span{grid-column:1/-1;grid-row:1}.gcHelpPageNav button{grid-row:2}}


/* ========================================================================== 
   GC 0.51.93 — FINAL CONSISTENCY + MOBILE ACTION RELIABILITY
   ========================================================================== */

/* Profielmenu: de drie afwijkende items (Hulp, Solliciteren, Admin) gebruiken
   exact dezelfde elementgeometrie als de gewone button-rijen. */
#gcProfileMenu .gcProfileMenuGroup{
  box-sizing:border-box!important;width:100%!important;margin:0 0 10px!important;padding:8px!important;
  border:1px solid #294057!important;border-radius:14px!important;background:#0d1c2c!important;overflow:hidden!important
}
#gcProfileMenu .gcProfileMenuGroup + .gcProfileMenuGroup{margin-top:0!important;padding-top:8px!important;border-top:1px solid #294057!important}
#gcProfileMenu .gcProfileMenuGroup:last-child{margin-bottom:0!important}
#gcProfileMenu .gcProfileMenuLabel{
  height:26px!important;min-height:26px!important;margin:0!important;padding:1px 8px 6px!important;
  display:flex!important;align-items:center!important;color:#efc34d!important;font-size:9px!important;font-weight:900!important;
  line-height:1!important;letter-spacing:.1em!important;text-transform:uppercase!important;box-sizing:border-box!important
}
#gcProfileMenu .gcProfileMenuGroup>button,
#gcProfileMenu .gcProfileMenuGroup>a{
  -webkit-appearance:none!important;appearance:none!important;box-sizing:border-box!important;position:relative!important;
  width:100%!important;min-width:0!important;height:56px!important;min-height:56px!important;max-height:56px!important;
  margin:0!important;padding:7px 7px!important;display:grid!important;grid-template-columns:36px minmax(0,1fr) 18px!important;
  align-items:center!important;gap:10px!important;border:0!important;border-radius:0!important;background:transparent!important;
  color:#f3f7fb!important;text-align:left!important;text-decoration:none!important;box-shadow:none!important;transform:none!important;translate:none!important
}
#gcProfileMenu .gcProfileMenuGroup>button+button,
#gcProfileMenu .gcProfileMenuGroup>a+a,
#gcProfileMenu .gcProfileMenuGroup>button+a,
#gcProfileMenu .gcProfileMenuGroup>a+button{border-top:1px solid #23374c!important}
#gcProfileMenu .gcProfileMenuGroup>button:hover,
#gcProfileMenu .gcProfileMenuGroup>a:hover,
#gcProfileMenu .gcProfileMenuGroup>button:focus-visible,
#gcProfileMenu .gcProfileMenuGroup>a:focus-visible{background:#13263b!important;transform:none!important;translate:none!important}
#gcProfileMenu .gcProfileMenuIcon{
  box-sizing:border-box!important;width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;
  display:grid!important;place-items:center!important;margin:0!important;padding:0!important;border:1px solid #38536f!important;
  border-radius:10px!important;background:#152a40!important;color:#e8f2fc!important;font-size:16px!important;line-height:1!important
}
#gcProfileMenu .gcProfileMenuCopy{min-width:0!important;display:flex!important;flex-direction:column!important;justify-content:center!important;gap:3px!important}
#gcProfileMenu .gcProfileMenuCopy b{margin:0!important;font-size:12px!important;line-height:1.1!important;font-weight:900!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
#gcProfileMenu .gcProfileMenuCopy small{margin:0!important;font-size:8.6px!important;line-height:1.15!important;color:#94a8bc!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
#gcProfileMenu .gcProfileMenuGroup>button>i,
#gcProfileMenu .gcProfileMenuGroup>a>i{width:18px!important;height:18px!important;display:grid!important;place-items:center!important;margin:0!important;font-size:17px!important;line-height:1!important;font-style:normal!important;color:#b9c9da!important}
/* Oude icon-hacks uitschakelen; de echte iconinhoud blijft staan. */
#profileMenuContact>.gcProfileMenuIcon,#profileMenuApply>.gcProfileMenuIcon,#profileMenuAdmin>.gcProfileMenuIcon{font-size:16px!important;position:static!important;color:#e8f2fc!important}
#profileMenuContact>.gcProfileMenuIcon::before,#profileMenuApply>.gcProfileMenuIcon::before,#profileMenuAdmin>.gcProfileMenuIcon::before{content:none!important;display:none!important}

/* Mobiele sluitknop: altijd boven de header/scroll-laag, nooit door iets afgedekt. */
#gcProfileMenu .gcProfileDrawerHead{position:relative!important;isolation:isolate!important;z-index:10!important}
#gcProfileMenu .gcProfileDrawerClose{
  position:absolute!important;top:12px!important;right:12px!important;z-index:100!important;
  width:46px!important;height:46px!important;min-width:46px!important;min-height:46px!important;max-width:46px!important;max-height:46px!important;
  display:block!important;pointer-events:auto!important;touch-action:manipulation!important;cursor:pointer!important;
  border:1px solid #41617f!important;border-radius:13px!important;background:#102238!important;color:#eef6ff!important;
  padding:0!important;margin:0!important;font-size:0!important;line-height:0!important;text-indent:-9999px!important;overflow:hidden!important
}
#gcProfileMenu .gcProfileDrawerClose::before,#gcProfileMenu .gcProfileDrawerClose::after{
  content:''!important;display:block!important;position:absolute!important;left:50%!important;top:50%!important;
  width:17px!important;height:2.5px!important;border-radius:999px!important;background:currentColor!important;pointer-events:none!important;transform-origin:center!important
}
#gcProfileMenu .gcProfileDrawerClose::before{transform:translate(-50%,-50%) rotate(45deg)!important}
#gcProfileMenu .gcProfileDrawerClose::after{transform:translate(-50%,-50%) rotate(-45deg)!important}
#gcProfileMenu .profileMenuIdentity{padding-right:58px!important}
#gcProfileMenu .gcProfileDrawerScroll{position:relative!important;z-index:1!important}

/* Kamerkiezer: één compacte kaartstructuur voor Mainroom, Speelcafé en Darkroom. */
.rooms #rooms{padding:12px 10px 22px!important}
.gcRoomGroup{margin:0 0 17px!important}
.gcRoomGroupTitle{margin:0 0 8px!important;padding:0 5px!important;min-height:18px!important;display:flex!important;align-items:center!important}
.gcRoomGroupTitle>span{font-size:9px!important;line-height:1!important;letter-spacing:.08em!important;font-weight:900!important;color:#aab8c8!important}
.roomShell{margin:0 0 8px!important;border:1px solid #2c435b!important;border-radius:14px!important;background:#0f1d2c!important;box-shadow:none!important;overflow:hidden!important}
.roomShell.active{border-color:#e8b928!important;box-shadow:inset 3px 0 0 #e8b928!important}
.rooms .roomShell .room.roomSelect{
  width:100%!important;min-height:78px!important;padding:10px 11px!important;display:grid!important;
  grid-template-columns:46px minmax(0,1fr) 34px!important;align-items:center!important;gap:10px!important;
  border:0!important;background:transparent!important;box-shadow:none!important;text-align:left!important
}
.roomIcon{width:46px!important;height:46px!important;min-width:46px!important;min-height:46px!important;border-radius:12px!important;font-size:22px!important}
.roomCopy{min-width:0!important}.roomCopy .roomEyebrow{margin:0 0 3px!important;font-size:7.5px!important;line-height:1!important;letter-spacing:.09em!important}.roomCopy strong{font-size:13.5px!important;line-height:1.12!important}
.roomCopy>span:not(.roomAccessTag){margin-top:3px!important;font-size:8.6px!important;line-height:1.25!important;color:#99aabc!important}
.roomPeopleCount{align-self:start!important;justify-self:end!important;width:34px!important;min-width:34px!important;height:24px!important;margin:1px 0 0!important;padding:0!important;display:flex!important;justify-content:flex-end!important;align-items:center!important;gap:3px!important;background:transparent!important;border:0!important;font-size:10px!important}
.roomPeopleCount span,.roomPeopleCount b{font-size:10px!important}.roomArrow{position:absolute!important;left:30px!important;bottom:7px!important;width:18px!important;height:18px!important;display:none!important;place-items:center!important;font-size:12px!important}.roomShell.active .roomArrow{display:grid!important}
.roomGameStrip{margin:0!important;padding:7px 10px 7px 67px!important;display:flex!important;gap:5px!important;border-top:1px solid #23364a!important}.roomGameStrip span{width:24px!important;height:24px!important;min-width:24px!important;min-height:24px!important;border-radius:7px!important;font-size:11px!important}
.roomGameActions{margin:0!important;padding:0 10px 10px!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important}.roomGameActions button{height:36px!important;min-height:36px!important;margin:0!important;padding:0 7px!important;border-radius:9px!important;font-size:9.5px!important;transform:none!important;translate:none!important}

/* Chatopties/formulieren: consistent veld, toggle, eye-button en footer. */
.chatOptionsCard{box-sizing:border-box!important}.chatOptionsCard input,.chatOptionsCard select,.chatOptionsCard textarea{box-sizing:border-box!important;max-width:100%!important}
.chatOptionsCard input[type="text"],.chatOptionsCard input[type="password"],.chatOptionsCard input[type="email"],.chatOptionsCard select,.chatOptionsCard textarea{min-height:44px!important;border:1px solid #344a61!important;border-radius:9px!important;background:#0c1725!important;color:#eef4fb!important;padding:10px 12px!important;outline:0!important}
.chatOptionsCard input:focus,.chatOptionsCard select:focus,.chatOptionsCard textarea:focus{border-color:#d8ad38!important;box-shadow:0 0 0 2px rgba(216,173,56,.13)!important}
.chatOptionsCard button{transform:none!important;translate:none!important;touch-action:manipulation!important}
.chatOptionsCard .passwordField,.chatOptionsCard .passwordWrap{position:relative!important}.chatOptionsCard .passwordField button,.chatOptionsCard .passwordWrap button{right:6px!important;top:50%!important;transform:translateY(-50%)!important;width:36px!important;height:36px!important;min-height:36px!important;padding:0!important;border-radius:9px!important}

/* Gebruikersactiemenu: vaste grid en compacte accountcontrole/moderatie. */
.gcUserMenu.gcUserMenuPolished{box-sizing:border-box!important;width:min(430px,calc(100vw - 24px))!important;max-height:calc(100dvh - 24px)!important;padding:13px!important;border-radius:16px!important;overflow:auto!important}
.gcUserMenuPolished .gcUserMenuGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}.gcUserMenuPolished .gcUserMenuGrid>button{min-height:48px!important;height:48px!important;padding:8px 10px!important;border-radius:11px!important;transform:none!important;translate:none!important}
.gcUserMenuPolished .gcUserMenuInvestigation{margin-top:5px!important}.gcUserMenuPolished .gcUserMenuInvestigation button{min-height:46px!important}.gcUserMenuPolished .gcUserMenuSectionLabel{margin:9px 2px 5px!important}

/* Publiek profiel: rustige header, tabs, infokaarten en acties. */
.profileModalCard{box-sizing:border-box!important}.profileModalCard .profileTabs{gap:6px!important;padding:7px!important}.profileModalCard .profileTabs button{min-height:38px!important;height:38px!important;border-radius:9px!important;transform:none!important}
.profileModalCard .profileInfoGrid{gap:9px!important}.profileModalCard .profileInfoItem{box-sizing:border-box!important;min-height:64px!important;padding:12px!important;border-radius:12px!important}.profileModalCard .profileActionGrid,.profileModalCard .profileActions{gap:8px!important}.profileModalCard .profileActionGrid button,.profileModalCard .profileActions button{min-height:48px!important;border-radius:11px!important;transform:none!important}

/* Alle kernsluitknoppen touch-safe en vooraan. */
.modalClose,.mobileClose,.gcUserMenuClose,.gcRoomAccessClose,.gcEntryRoomClose,.drawerClose{z-index:50!important;pointer-events:auto!important;touch-action:manipulation!important;cursor:pointer!important}

@media(max-width:700px){
  #gcProfileMenu.gcProfileMenuCody{left:6px!important;right:6px!important;top:max(58px,calc(env(safe-area-inset-top) + 6px))!important;bottom:max(6px,env(safe-area-inset-bottom))!important;width:auto!important;max-height:none!important}
  #gcProfileMenu .gcProfileMenuGroup{padding:7px!important;margin-bottom:9px!important}
  #gcProfileMenu .gcProfileMenuGroup>button,#gcProfileMenu .gcProfileMenuGroup>a{height:54px!important;min-height:54px!important;max-height:54px!important;grid-template-columns:35px minmax(0,1fr) 17px!important;gap:9px!important;padding:6px!important}
  #gcProfileMenu .gcProfileMenuIcon{width:35px!important;height:35px!important;min-width:35px!important;min-height:35px!important}
  .rooms .roomShell .room.roomSelect{min-height:76px!important;padding:9px 10px!important;grid-template-columns:44px minmax(0,1fr) 32px!important;gap:9px!important}.roomIcon{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important}.roomGameStrip{padding-left:63px!important}
  .chatOptionsCard{width:calc(100vw - 10px)!important;max-width:calc(100vw - 10px)!important;max-height:calc(100dvh - 10px)!important;border-radius:14px!important}.chatOptionsCard .modalBody,.chatOptionsCard .chatOptionsBody{padding-left:12px!important;padding-right:12px!important}
  .gcUserMenu.gcUserMenuPolished{width:calc(100vw - 12px)!important;max-height:calc(100dvh - 12px)!important}
  .profileModalCard{width:calc(100vw - 10px)!important;max-width:calc(100vw - 10px)!important;max-height:calc(100dvh - 10px)!important}.profileModalCard .profileInfoGrid{grid-template-columns:1fr!important}
}
@media(max-width:380px){
  #gcProfileMenu .gcProfileMenuCopy b{font-size:11.4px!important}#gcProfileMenu .gcProfileMenuCopy small{font-size:8px!important}
  .roomGameActions{grid-template-columns:1fr 1fr!important;gap:6px!important}.roomGameActions button{font-size:9px!important}
  .gcUserMenuPolished .gcUserMenuGrid{grid-template-columns:1fr!important}.gcUserMenuPolished .gcUserMenuGrid>button{height:auto!important;min-height:46px!important}
}


/* ==========================================================================\n   GC 0.51.94 — PROFILE MENU FINAL SOURCE OF TRUTH\n   Geen uitzonderingen meer tussen button- en linkregels.\n   ========================================================================== */
#gcProfileMenu .gcProfileMenuGroup,
#gcProfileMenu .gcProfileMenuGroup[aria-label="Profiel"],
#gcProfileMenu .gcProfileMenuGroup[aria-label="Sociaal"],
#gcProfileMenu .gcProfileMenuGroup[aria-label="Instellingen"],
#gcProfileMenu .gcProfileMenuGroup[aria-label="Hulp en community"],
#gcProfileMenu #profileMenuAdminGroup{
  display:block!important;width:100%!important;min-width:0!important;margin:0 0 10px!important;padding:8px!important;
  border:1px solid #294057!important;border-radius:14px!important;background:#0d1c2b!important;box-shadow:none!important;
  overflow:hidden!important;box-sizing:border-box!important;
}
#gcProfileMenu .gcProfileMenuGroup:last-child{margin-bottom:0!important}
#gcProfileMenu .gcProfileMenuLabel{
  display:flex!important;align-items:center!important;height:25px!important;min-height:25px!important;margin:0!important;padding:0 7px 5px!important;
  color:#efc24f!important;font-size:9px!important;font-weight:900!important;line-height:1!important;letter-spacing:.10em!important;text-transform:uppercase!important;
}
#gcProfileMenu .gcProfileMenuGroup > button,
#gcProfileMenu .gcProfileMenuGroup > a{
  -webkit-appearance:none!important;appearance:none!important;box-sizing:border-box!important;width:100%!important;min-width:0!important;
  height:54px!important;min-height:54px!important;max-height:54px!important;margin:0!important;padding:7px!important;
  display:grid!important;grid-template-columns:36px minmax(0,1fr) 18px!important;align-items:center!important;gap:10px!important;
  border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:#eef4fb!important;
  font:inherit!important;text-align:left!important;text-decoration:none!important;transform:none!important;translate:none!important;
}
#gcProfileMenu .gcProfileMenuGroup > button + button,
#gcProfileMenu .gcProfileMenuGroup > a + a,
#gcProfileMenu .gcProfileMenuGroup > button + a,
#gcProfileMenu .gcProfileMenuGroup > a + button{border-top:1px solid #23374c!important}
#gcProfileMenu .gcProfileMenuGroup > button:hover,
#gcProfileMenu .gcProfileMenuGroup > a:hover,
#gcProfileMenu .gcProfileMenuGroup > button:focus-visible,
#gcProfileMenu .gcProfileMenuGroup > a:focus-visible{background:#13263b!important;transform:none!important;translate:none!important}
#gcProfileMenu .gcProfileMenuIcon,
#profileMenuContact > span.gcProfileMenuIcon:first-child,
#profileMenuApply > span.gcProfileMenuIcon:first-child,
#profileMenuAdmin > span.gcProfileMenuIcon:first-child{
  box-sizing:border-box!important;display:grid!important;place-items:center!important;width:36px!important;height:36px!important;
  min-width:36px!important;min-height:36px!important;max-width:36px!important;max-height:36px!important;margin:0!important;padding:0!important;
  border:1px solid #35506c!important;border-radius:10px!important;background:#14283c!important;color:#dfeaf5!important;
  font-size:15px!important;line-height:1!important;text-align:center!important;position:static!important;
}
#gcProfileMenu .gcProfileMenuIcon::before,
#profileMenuContact > span.gcProfileMenuIcon:first-child::before,
#profileMenuApply > span.gcProfileMenuIcon:first-child::before,
#profileMenuAdmin > span.gcProfileMenuIcon:first-child::before{content:none!important;display:none!important}
#gcProfileMenu .gcProfileMenuIcon svg{
  display:block!important;width:18px!important;height:18px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.7!important;
  stroke-linecap:round!important;stroke-linejoin:round!important;overflow:visible!important;pointer-events:none!important;
}
#profileMenuContact > .gcProfileMenuIcon{color:#bce8ff!important}
#profileMenuApply > .gcProfileMenuIcon{color:#f1c765!important}
#profileMenuAdmin > .gcProfileMenuIcon{color:#8bd4ff!important}
#gcProfileMenu .gcProfileMenuCopy{min-width:0!important;margin:0!important;padding:0!important;display:grid!important;align-content:center!important;gap:3px!important}
#gcProfileMenu .gcProfileMenuCopy b{display:block!important;margin:0!important;font-size:12px!important;line-height:1.1!important;font-weight:900!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
#gcProfileMenu .gcProfileMenuCopy small{display:block!important;margin:0!important;font-size:8.5px!important;line-height:1.15!important;color:#91a4b9!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
#gcProfileMenu .gcProfileMenuGroup > button > i,
#gcProfileMenu .gcProfileMenuGroup > a > i{display:grid!important;place-items:center!important;width:18px!important;height:18px!important;margin:0!important;color:#b9c9da!important;font-size:17px!important;line-height:1!important;font-style:normal!important}

/* Sluitknop blijft boven alle mobiele drawerlagen en heeft één native tapdoel. */
#gcProfileMenu .gcProfileDrawerHead{position:relative!important;isolation:isolate!important;z-index:20!important}
#gcProfileMenu .gcProfileDrawerClose{z-index:2147483600!important;pointer-events:auto!important;touch-action:manipulation!important;-webkit-tap-highlight-color:transparent!important}

@media(max-width:700px){
  #gcProfileMenu .gcProfileMenuGroup{padding:7px!important;margin-bottom:9px!important}
  #gcProfileMenu .gcProfileMenuGroup > button,#gcProfileMenu .gcProfileMenuGroup > a{
    height:54px!important;min-height:54px!important;max-height:54px!important;grid-template-columns:36px minmax(0,1fr) 18px!important;gap:10px!important;padding:7px!important;
  }
  #gcProfileMenu .gcProfileMenuIcon,
  #profileMenuContact > span.gcProfileMenuIcon:first-child,
  #profileMenuApply > span.gcProfileMenuIcon:first-child,
  #profileMenuAdmin > span.gcProfileMenuIcon:first-child{width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;max-width:36px!important;max-height:36px!important}
}
@media(max-width:360px){
  #gcProfileMenu .gcProfileMenuGroup > button,#gcProfileMenu .gcProfileMenuGroup > a{grid-template-columns:34px minmax(0,1fr) 16px!important;gap:8px!important;padding:6px!important}
  #gcProfileMenu .gcProfileMenuIcon,
  #profileMenuContact > span.gcProfileMenuIcon:first-child,
  #profileMenuApply > span.gcProfileMenuIcon:first-child,
  #profileMenuAdmin > span.gcProfileMenuIcon:first-child{width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important;max-width:34px!important;max-height:34px!important}
  #gcProfileMenu .gcProfileMenuCopy b{font-size:11.3px!important}
  #gcProfileMenu .gcProfileMenuCopy small{font-size:8px!important}
}

/* ========================================================================== 
   GC 0.51.95 — MOBILE ICON POLISH + PROFILE LINK ALIGNMENT
   Alleen visuele maatvoering; bestaande handlers blijven onaangeraakt.
   ========================================================================== */

/* Hulp & community + Beheer: links zijn anchors, Instellingen gebruikt buttons.
   De oudere linkregels trokken de tekst optisch tegen het icoon. Geef de link-copy
   daarom expliciet dezelfde zichtbare tussenruimte als de button-rijen. */
#gcProfileMenu .gcProfileMenuGroup > a .gcProfileMenuCopy{
  box-sizing:border-box!important;
  padding-left:10px!important;
}
#gcProfileMenu .gcProfileMenuGroup > button .gcProfileMenuCopy{
  box-sizing:border-box!important;
  padding-left:0!important;
}
#gcProfileMenu .gcProfileMenuGroup > a{
  column-gap:10px!important;
}
@media(max-width:360px){
  #gcProfileMenu .gcProfileMenuGroup > a .gcProfileMenuCopy{padding-left:8px!important}
  #gcProfileMenu .gcProfileMenuGroup > a{column-gap:8px!important}
}

/* Topbalk mobiel: de iconen links van de profielfoto één rustige maat en stijl. */
#topPrivateBtn::before{content:none!important;display:none!important}
.gcTopRight{
  align-items:center!important;
  gap:6px!important;
}
.gcTopRight > .gcTopIcon,
.gcTopRight > .gcPublicVideoTopLaunch{
  box-sizing:border-box!important;
  position:relative!important;
  flex:0 0 auto!important;
  width:40px!important;
  min-width:40px!important;
  max-width:40px!important;
  height:40px!important;
  min-height:40px!important;
  max-height:40px!important;
  margin:0!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid rgba(92,122,156,.34)!important;
  border-radius:11px!important;
  background:linear-gradient(180deg,rgba(22,39,58,.96),rgba(14,28,43,.96))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
  color:#dce8f5!important;
  transform:none!important;
  translate:none!important;
}
.gcTopRight > .gcTopIcon:hover,
.gcTopRight > .gcTopIcon:active,
.gcTopRight > .gcPublicVideoTopLaunch:hover,
.gcTopRight > .gcPublicVideoTopLaunch:active{
  border-color:rgba(132,169,207,.50)!important;
  background:#14283d!important;
  transform:none!important;
  translate:none!important;
}
.gcTopRight > .gcTopIcon > svg,
.gcTopRight > .gcPublicVideoTopLaunch .gcPublicVideoCameraGlyph{
  width:19px!important;
  height:19px!important;
  min-width:19px!important;
  min-height:19px!important;
  margin:auto!important;
  display:block!important;
}
.gcTopRight > .gcTopIcon .badge{
  position:absolute!important;
  top:-4px!important;
  right:-4px!important;
  min-width:17px!important;
  height:17px!important;
  padding:0 4px!important;
  border:2px solid #111f30!important;
  border-radius:999px!important;
  font-size:8px!important;
  line-height:13px!important;
}
#myProfileBtn.gcProfileTop{
  box-sizing:border-box!important;
  width:44px!important;
  min-width:44px!important;
  max-width:44px!important;
  height:44px!important;
  min-height:44px!important;
  max-height:44px!important;
  margin-left:2px!important;
  padding:2px!important;
  border:1px solid rgba(116,151,187,.40)!important;
  border-radius:50%!important;
  background:#101f30!important;
  box-shadow:0 0 0 2px rgba(13,25,38,.9)!important;
}
#myProfileBtn.gcProfileTop img{
  width:38px!important;
  height:38px!important;
  min-width:38px!important;
  min-height:38px!important;
  border-radius:50%!important;
  object-fit:cover!important;
}
#myProfileBtn.gcProfileTop .gcPresenceDot{
  right:0!important;
  bottom:1px!important;
}

/* Videocall-knop in de topbar: zelfde chip, maar teller naast camera blijft leesbaar. */
.gcTopRight > .gcPublicVideoTopLaunch{
  width:50px!important;
  min-width:50px!important;
  max-width:50px!important;
  grid-template-columns:20px auto!important;
  gap:4px!important;
  padding:0 7px!important;
}
.gcTopRight > .gcPublicVideoTopLaunch .gcPublicVideoCameraGlyph{
  display:grid!important;
  place-items:center!important;
  font-size:17px!important;
  line-height:1!important;
}
.gcTopRight > .gcPublicVideoTopLaunch #publicVideoCount{
  position:static!important;
  transform:none!important;
  min-width:16px!important;
  width:auto!important;
  height:18px!important;
  padding:0 4px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:999px!important;
  background:#22364d!important;
  color:#f0f5fb!important;
  font-size:8px!important;
  line-height:1!important;
}

/* Mobiele onderbalk: ieder icoon exact dezelfde chip, gecentreerd boven zijn label. */
@media(max-width:700px){
  .gcMobileBottomNav{
    height:62px!important;
    padding:5px 6px!important;
    gap:4px!important;
    border-radius:15px!important;
    background:rgba(7,17,28,.975)!important;
  }
  .gcMobileBottomNav button{
    min-height:50px!important;
    height:50px!important;
    padding:3px 2px!important;
    gap:3px!important;
    border:1px solid transparent!important;
    border-radius:10px!important;
    background:transparent!important;
    color:#b7c6d6!important;
  }
  .gcMobileBottomNav button > svg{
    box-sizing:border-box!important;
    width:28px!important;
    height:28px!important;
    min-width:28px!important;
    min-height:28px!important;
    padding:4px!important;
    border:1px solid rgba(104,137,171,.24)!important;
    border-radius:9px!important;
    background:#0e2032!important;
    color:#d7e4f1!important;
    stroke:currentColor!important;
    stroke-width:1.65!important;
  }
  .gcMobileBottomNav button > span{
    margin:0!important;
    color:#aebdcc!important;
    font-size:8.5px!important;
    font-weight:850!important;
    line-height:1!important;
  }
  .gcMobileBottomNav button:active,
  .gcMobileBottomNav button:focus-visible{
    border-color:rgba(229,183,62,.32)!important;
    background:rgba(229,183,62,.07)!important;
    color:#fff!important;
  }
  .gcMobileBottomNav button:active > svg,
  .gcMobileBottomNav button:focus-visible > svg{
    border-color:rgba(229,183,62,.50)!important;
    color:#f1c859!important;
  }
  .gcMobileBottomNav .badge{
    top:0!important;
    right:max(2px,calc(50% - 24px))!important;
    min-width:17px!important;
    height:17px!important;
    font-size:8px!important;
  }

  /* Op telefoon voldoende ruimte tussen topiconen zonder dat de avatar uit beeld loopt. */
  .gcTopRight{gap:5px!important}
  .gcTopRight > .gcTopIcon{
    width:38px!important;min-width:38px!important;max-width:38px!important;
    height:38px!important;min-height:38px!important;max-height:38px!important;
    border-radius:10px!important;
  }
  .gcTopRight > .gcTopIcon > svg{width:18px!important;height:18px!important;min-width:18px!important;min-height:18px!important}
  .gcTopRight > .gcPublicVideoTopLaunch{
    width:48px!important;min-width:48px!important;max-width:48px!important;
    height:38px!important;min-height:38px!important;max-height:38px!important;
  }
  #myProfileBtn.gcProfileTop{
    width:42px!important;min-width:42px!important;max-width:42px!important;
    height:42px!important;min-height:42px!important;max-height:42px!important;
  }
  #myProfileBtn.gcProfileTop img{width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important}
}

@media(max-width:390px){
  .gcTopRight{gap:4px!important}
  .gcTopRight > .gcTopIcon{
    width:36px!important;min-width:36px!important;max-width:36px!important;
    height:36px!important;min-height:36px!important;max-height:36px!important;
  }
  .gcTopRight > .gcPublicVideoTopLaunch{
    width:45px!important;min-width:45px!important;max-width:45px!important;
    height:36px!important;min-height:36px!important;max-height:36px!important;
    padding:0 5px!important;
  }
  #myProfileBtn.gcProfileTop{
    width:40px!important;min-width:40px!important;max-width:40px!important;
    height:40px!important;min-height:40px!important;max-height:40px!important;
  }
  #myProfileBtn.gcProfileTop img{width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important}
}

/* Zeer smalle telefoons: behoud alle essentiële topacties zonder horizontale overflow. */
@media(max-width:390px){
  .gcTopRight{gap:3px!important}
  .gcTopRight > .gcTopIcon{
    width:34px!important;min-width:34px!important;max-width:34px!important;
    height:36px!important;min-height:36px!important;max-height:36px!important;
  }
  .gcTopRight > .gcPublicVideoTopLaunch{
    width:42px!important;min-width:42px!important;max-width:42px!important;
    height:36px!important;min-height:36px!important;max-height:36px!important;
    padding:0 4px!important;gap:2px!important;
  }
  #myProfileBtn.gcProfileTop{
    width:36px!important;min-width:36px!important;max-width:36px!important;
    height:38px!important;min-height:38px!important;max-height:38px!important;
    padding:1px!important;
  }
  #myProfileBtn.gcProfileTop img{width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important}
}
@media(max-width:365px){
  .gcTopRight{gap:2px!important}
  .gcTopRight > .gcTopIcon{
    width:32px!important;min-width:32px!important;max-width:32px!important;
    height:36px!important;min-height:36px!important;max-height:36px!important;
  }
  .gcTopRight > .gcPublicVideoTopLaunch{
    width:40px!important;min-width:40px!important;max-width:40px!important;
  }
  #myProfileBtn.gcProfileTop{
    width:34px!important;min-width:34px!important;max-width:34px!important;
    height:36px!important;min-height:36px!important;max-height:36px!important;
  }
  #myProfileBtn.gcProfileTop img{width:30px!important;height:30px!important;min-width:30px!important;min-height:30px!important}
}

/* Profielmenu: definitief één tekststart voor buttons én links. */
#gcProfileMenu .gcProfileMenuGroup > button .gcProfileMenuCopy,
#gcProfileMenu .gcProfileMenuGroup > a .gcProfileMenuCopy{
  box-sizing:border-box!important;
  padding-left:8px!important;
  justify-items:stretch!important;
  text-align:left!important;
}
#gcProfileMenu .gcProfileMenuCopy > b,
#gcProfileMenu .gcProfileMenuCopy > small{
  width:100%!important;
  max-width:100%!important;
  justify-self:stretch!important;
  text-align:left!important;
}
@media(max-width:360px){
  #gcProfileMenu .gcProfileMenuGroup > button .gcProfileMenuCopy,
  #gcProfileMenu .gcProfileMenuGroup > a .gcProfileMenuCopy{padding-left:7px!important}
}

/* Root-cause fix: de copy-kolom was in 0.51.94 opnieuw CSS-grid geworden.
   Een grid zonder expliciete track liet korte linktitels (vooral Admin paneel)
   op max-content krimpen en optisch richting het icoon/centrum schuiven.
   Gebruik hier weer één normale flex-kolom voor alle menu-items. */
#gcProfileMenu .gcProfileMenuCopy{
  min-width:0!important;
  width:100%!important;
  max-width:100%!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:center!important;
  gap:3px!important;
  padding-left:8px!important;
  text-align:left!important;
}
#gcProfileMenu .gcProfileMenuCopy > b,
#gcProfileMenu .gcProfileMenuCopy > small{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  margin:0!important;
  padding:0!important;
  text-align:left!important;
}
@media(max-width:360px){#gcProfileMenu .gcProfileMenuCopy{padding-left:7px!important}}


/* ========================================================================== 
   GC 0.51.96 — mobiele navigatie + betrouwbare profielknop
   Alleen interactie/uitlijning; bestaande chat-, room-, radio- en API-logica blijft intact.
   ========================================================================== */

/* Profielavatar moet op touch altijd het bovenste klikdoel blijven. */
#myProfileBtn.gcProfileTop{
  position:relative!important;
  z-index:80!important;
  pointer-events:auto!important;
  touch-action:manipulation!important;
  -webkit-tap-highlight-color:transparent!important;
  isolation:isolate!important;
  cursor:pointer!important;
}
#myProfileBtn.gcProfileTop > *{pointer-events:none!important}
.gcTopRight{position:relative!important;z-index:30!important;overflow:visible!important}
.gcTopRight > .gcTopIcon,
.gcTopRight > .gcPublicVideoTopLaunch{
  touch-action:manipulation!important;
  -webkit-tap-highlight-color:transparent!important;
}

/* Topiconen links van de profielfoto: één rustig en gelijk systeem. */
@media(max-width:700px){
  .gcTopRight{gap:5px!important}
  .gcTopRight > .gcTopIcon,
  .gcTopRight > .gcPublicVideoTopLaunch{
    border:1px solid rgba(105,145,184,.34)!important;
    background:linear-gradient(180deg,#12263a,#0e1f31)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
  }
  .gcTopRight > .gcTopIcon{
    width:38px!important;min-width:38px!important;max-width:38px!important;
    height:38px!important;min-height:38px!important;max-height:38px!important;
    border-radius:11px!important;
  }
  .gcTopRight > .gcTopIcon > svg{
    width:18px!important;height:18px!important;min-width:18px!important;min-height:18px!important;
  }
  .gcTopRight > .gcPublicVideoTopLaunch{
    height:38px!important;min-height:38px!important;max-height:38px!important;
    border-radius:11px!important;
  }
  #myProfileBtn.gcProfileTop{
    width:42px!important;min-width:42px!important;max-width:42px!important;
    height:42px!important;min-height:42px!important;max-height:42px!important;
    padding:2px!important;margin-left:1px!important;
    border:1px solid rgba(113,154,194,.50)!important;
    background:#0d1e2f!important;
    box-shadow:0 0 0 2px rgba(5,13,22,.75)!important;
  }
  #myProfileBtn.gcProfileTop img{
    width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;
  }
}
@media(max-width:390px){
  .gcTopRight{gap:3px!important}
  .gcTopRight > .gcTopIcon{
    width:35px!important;min-width:35px!important;max-width:35px!important;
    height:36px!important;min-height:36px!important;max-height:36px!important;
  }
  .gcTopRight > .gcPublicVideoTopLaunch{
    width:44px!important;min-width:44px!important;max-width:44px!important;
    height:36px!important;min-height:36px!important;max-height:36px!important;
  }
  #myProfileBtn.gcProfileTop{
    width:39px!important;min-width:39px!important;max-width:39px!important;
    height:39px!important;min-height:39px!important;max-height:39px!important;
  }
  #myProfileBtn.gcProfileTop img{width:33px!important;height:33px!important;min-width:33px!important;min-height:33px!important}
}

/* Onderbalk: rustiger, gelijkmatige iconen en Chatters in plaats van Vrienden. */
@media(max-width:700px){
  .gcMobileBottomNav{
    height:64px!important;
    padding:5px 7px!important;
    gap:4px!important;
    border:1px solid rgba(92,132,170,.34)!important;
    border-radius:16px!important;
    background:rgba(6,16,27,.985)!important;
    box-shadow:0 10px 30px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.025)!important;
  }
  .gcMobileBottomNav button{
    position:relative!important;
    min-width:0!important;
    height:52px!important;min-height:52px!important;
    padding:3px 1px 2px!important;
    gap:3px!important;
    border:0!important;
    border-radius:11px!important;
    background:transparent!important;
    color:#9fb1c3!important;
  }
  .gcMobileBottomNav button > svg{
    width:30px!important;height:30px!important;min-width:30px!important;min-height:30px!important;
    padding:5px!important;
    border:1px solid rgba(99,139,178,.30)!important;
    border-radius:10px!important;
    background:linear-gradient(180deg,#11273b,#0c1d2e)!important;
    color:#d4e1ed!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
  }
  .gcMobileBottomNav button > span{
    margin:0!important;
    max-width:100%!important;
    font-size:8px!important;
    font-weight:850!important;
    line-height:1!important;
    letter-spacing:0!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .gcMobileBottomNav button.active,
  .gcMobileBottomNav button[aria-current="page"]{
    background:rgba(31,58,84,.36)!important;
    color:#f0f5fa!important;
  }
  .gcMobileBottomNav button.active > svg,
  .gcMobileBottomNav button[aria-current="page"] > svg{
    border-color:rgba(229,184,63,.55)!important;
    color:#f2ca5b!important;
    background:linear-gradient(180deg,#173047,#102338)!important;
  }
  .gcMobileOnlineBadge{
    position:absolute!important;
    top:0!important;
    right:max(3px,calc(50% - 25px))!important;
    min-width:17px!important;height:17px!important;
    padding:0 4px!important;
    display:grid!important;place-items:center!important;
    border:2px solid #07111c!important;border-radius:999px!important;
    background:#1f8f68!important;color:#fff!important;
    font-size:8px!important;font-weight:900!important;line-height:1!important;
    font-variant-numeric:tabular-nums!important;
  }
}
@media(max-width:360px){
  .gcMobileBottomNav{padding-left:4px!important;padding-right:4px!important;gap:2px!important}
  .gcMobileBottomNav button > svg{width:28px!important;height:28px!important;min-width:28px!important;min-height:28px!important}
  .gcMobileBottomNav button > span{font-size:7.5px!important}
}
@media(max-width:430px){
  .gcTopRight{gap:3px!important}
  .gcTopRight > .gcTopIcon{
    width:35px!important;min-width:35px!important;max-width:35px!important;
    height:36px!important;min-height:36px!important;max-height:36px!important;
  }
  .gcTopRight > .gcPublicVideoTopLaunch{
    width:44px!important;min-width:44px!important;max-width:44px!important;
    height:36px!important;min-height:36px!important;max-height:36px!important;
    padding-left:5px!important;padding-right:5px!important;
  }
  #myProfileBtn.gcProfileTop{
    width:39px!important;min-width:39px!important;max-width:39px!important;
    height:39px!important;min-height:39px!important;max-height:39px!important;
  }
  #myProfileBtn.gcProfileTop img{width:33px!important;height:33px!important;min-width:33px!important;min-height:33px!important}
}


/* ==========================================================================
   GC 0.51.97 — MOBILE NAV + PROFILE POLISH + CORRECT SELF PRESENCE
   ========================================================================== */
#myProfileBtn.gcProfileTop .gcPresenceDot{
  background:var(--gc-self-presence,#2bd078)!important;
  width:10px!important;height:10px!important;
  border:2px solid #0b1827!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.08)!important;
}
#profileModal .gcProfileTabs{
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:5px!important;padding:7px!important;
  border-top:1px solid rgba(103,137,173,.18)!important;
  border-bottom:1px solid rgba(103,137,173,.18)!important;
  background:#0c1928!important;
}
#profileModal .gcProfileTabs button{
  min-width:0!important;height:40px!important;min-height:40px!important;
  padding:0 8px!important;border:1px solid rgba(103,137,173,.30)!important;
  border-radius:10px!important;background:#102033!important;color:#d9e4ef!important;
  font-size:9px!important;font-weight:850!important;white-space:nowrap!important;
}
#profileModal .gcProfileTabs button.active{
  border-color:#e2b83d!important;background:rgba(226,184,61,.13)!important;color:#fff!important;
}
#profileModal .gcPublicProfileMusic{margin:10px 10px 8px!important;border-radius:13px!important}
#profileModal .gcProfileLevelCard,#profileModal .profileLevelCard{margin:8px 10px!important;border-radius:13px!important}
#profileModal .gcProfilePane[data-profile-pane="info"].active{gap:8px!important;padding:10px!important}
#profileModal .profileInfoRow{border-radius:12px!important;background:#0d1b2a!important;border:1px solid rgba(106,140,177,.28)!important}
@media(max-width:520px){
  #profileModal .gcProfileTabs{
    display:flex!important;grid-template-columns:none!important;overflow-x:auto!important;overflow-y:hidden!important;
    scroll-snap-type:x proximity!important;scrollbar-width:none!important;padding:6px!important;
  }
  #profileModal .gcProfileTabs::-webkit-scrollbar{display:none!important}
  #profileModal .gcProfileTabs button{
    flex:0 0 auto!important;width:auto!important;min-width:92px!important;height:38px!important;min-height:38px!important;
    padding:0 10px!important;scroll-snap-align:start!important;font-size:9px!important;
  }
}
@media(max-width:700px){
  .gcMobileBottomNav{
    box-sizing:border-box!important;
    left:max(7px,env(safe-area-inset-left))!important;right:max(7px,env(safe-area-inset-right))!important;
    bottom:max(7px,env(safe-area-inset-bottom))!important;width:auto!important;
    height:64px!important;min-height:64px!important;padding:6px 7px!important;
    display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;align-items:stretch!important;gap:3px!important;
    border:1px solid rgba(105,143,181,.36)!important;border-radius:17px!important;background:rgba(7,17,28,.985)!important;
    box-shadow:0 12px 35px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.025)!important;
    backdrop-filter:blur(14px)!important;-webkit-backdrop-filter:blur(14px)!important;
  }
  .gcMobileBottomNav button{
    position:relative!important;box-sizing:border-box!important;min-width:0!important;width:100%!important;
    height:50px!important;min-height:50px!important;margin:0!important;padding:4px 2px 3px!important;
    display:grid!important;grid-template-rows:27px 13px!important;place-items:center!important;align-content:center!important;gap:1px!important;
    border:1px solid transparent!important;border-radius:11px!important;background:transparent!important;color:#9fb0c1!important;
    box-shadow:none!important;transform:none!important;touch-action:manipulation!important;-webkit-tap-highlight-color:transparent!important;
  }
  .gcMobileBottomNav button > svg{
    box-sizing:content-box!important;width:22px!important;height:22px!important;min-width:22px!important;min-height:22px!important;
    margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;
    color:#c3d0dd!important;fill:none!important;stroke:currentColor!important;stroke-width:1.75!important;filter:none!important;
  }
  .gcMobileBottomNav button > span{
    display:block!important;width:100%!important;margin:0!important;padding:0!important;overflow:hidden!important;color:inherit!important;
    font-size:9px!important;font-weight:800!important;line-height:13px!important;letter-spacing:0!important;text-align:center!important;
    text-overflow:ellipsis!important;white-space:nowrap!important;
  }
  .gcMobileBottomNav button.active,.gcMobileBottomNav button[aria-current="page"]{
    border-color:rgba(102,148,190,.34)!important;background:linear-gradient(180deg,rgba(27,53,78,.72),rgba(16,36,55,.72))!important;
    color:#f4f7fb!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.03)!important;
  }
  .gcMobileBottomNav button.active > svg,.gcMobileBottomNav button[aria-current="page"] > svg{color:#f0c24c!important;stroke-width:1.9!important}
  .gcMobileBottomNav button:active{background:rgba(31,59,84,.55)!important}
  .gcMobileBottomNav .badge,.gcMobileBottomNav .gcMobileOnlineBadge{
    position:absolute!important;top:1px!important;right:calc(50% - 22px)!important;min-width:16px!important;height:16px!important;
    padding:0 4px!important;display:grid!important;place-items:center!important;border:2px solid #07111c!important;border-radius:999px!important;
    font-size:7.5px!important;font-weight:900!important;line-height:1!important;z-index:2!important;
  }
  .gcMobileBottomNav .gcMobileOnlineBadge{background:#258b68!important;color:#fff!important}
  .chat{padding-bottom:70px!important}
  .gcRightPanel,.rooms{bottom:72px!important}
  .actionTray{bottom:78px!important}
}
@media(max-width:390px){
  .gcMobileBottomNav{
    left:max(5px,env(safe-area-inset-left))!important;right:max(5px,env(safe-area-inset-right))!important;
    height:61px!important;min-height:61px!important;padding:5px!important;gap:2px!important;border-radius:15px!important;
  }
  .gcMobileBottomNav button{height:49px!important;min-height:49px!important;grid-template-rows:26px 12px!important;padding:4px 1px 3px!important}
  .gcMobileBottomNav button > svg{width:21px!important;height:21px!important;min-width:21px!important;min-height:21px!important}
  .gcMobileBottomNav button > span{font-size:8.2px!important;line-height:12px!important}
}
@media(max-width:340px){
  .gcMobileBottomNav button > span{font-size:7.6px!important}
  .gcMobileBottomNav button > svg{width:20px!important;height:20px!important;min-width:20px!important;min-height:20px!important}
}


/* ==========================================================================
   GC 0.51.98 — MOBILE BOTTOM DOCK + USER MENU CLOSE HARDENING
   Alleen layout/touch-afhandeling; bestaande chatfuncties blijven intact.
   ========================================================================== */
@media(max-width:700px){
  /* Composer en mobiele navigatie vormen één aaneengesloten bottom-dock. */
  .composer{
    bottom:calc(64px + env(safe-area-inset-bottom))!important;
    margin:0!important;
    border-bottom:1px solid rgba(101,137,174,.30)!important;
    border-radius:0!important;
    background:linear-gradient(180deg,#162234,#101a28)!important;
    box-shadow:0 -8px 24px rgba(0,0,0,.30)!important;
  }
  .gcMobileBottomNav{
    left:0!important;right:0!important;bottom:0!important;width:100%!important;
    height:calc(64px + env(safe-area-inset-bottom))!important;
    min-height:calc(64px + env(safe-area-inset-bottom))!important;
    margin:0!important;
    padding:6px max(8px,env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))!important;
    gap:4px!important;
    border:0!important;border-top:1px solid rgba(105,143,181,.36)!important;
    border-radius:0!important;
    background:linear-gradient(180deg,#0d1b2a,#07111d)!important;
    box-shadow:0 -1px 0 rgba(255,255,255,.018),0 -8px 22px rgba(0,0,0,.18)!important;
    backdrop-filter:blur(14px)!important;-webkit-backdrop-filter:blur(14px)!important;
  }
  .gcMobileBottomNav button{
    height:50px!important;min-height:50px!important;
    border-radius:10px!important;
  }
  .gcMobileBottomNav button.active,.gcMobileBottomNav button[aria-current="page"]{
    background:linear-gradient(180deg,rgba(27,53,78,.78),rgba(15,35,53,.78))!important;
    border-color:rgba(104,149,190,.34)!important;
  }
  .chat{padding-bottom:calc(64px + env(safe-area-inset-bottom))!important}
  .gcRightPanel,.rooms{bottom:calc(64px + env(safe-area-inset-bottom))!important}
  .actionTray{bottom:calc(72px + env(safe-area-inset-bottom))!important}

  /* Wanneer het toetsenbord open is verdwijnt de nav en komt de composer echt onderaan. */
  html.gcKeyboardOpen .composer{
    bottom:0!important;
    border-bottom:0!important;
  }
}
@media(max-width:390px){
  .composer{bottom:calc(61px + env(safe-area-inset-bottom))!important}
  .gcMobileBottomNav{
    height:calc(61px + env(safe-area-inset-bottom))!important;
    min-height:calc(61px + env(safe-area-inset-bottom))!important;
    padding:5px max(5px,env(safe-area-inset-right)) calc(5px + env(safe-area-inset-bottom)) max(5px,env(safe-area-inset-left))!important;
    gap:2px!important;
  }
  .chat{padding-bottom:calc(61px + env(safe-area-inset-bottom))!important}
  .gcRightPanel,.rooms{bottom:calc(61px + env(safe-area-inset-bottom))!important}
  .actionTray{bottom:calc(69px + env(safe-area-inset-bottom))!important}
}

/* Gebruikersmenu: X altijd rechtsboven, groot touchvlak, geen zichtbare scrollbar. */
.gcUserMenuOverlay{
  overscroll-behavior:contain!important;
}
.gcUserMenu.gcUserMenuPolished{
  position:relative!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  scrollbar-width:none!important;
  -ms-overflow-style:none!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch!important;
}
.gcUserMenu.gcUserMenuPolished::-webkit-scrollbar{
  display:none!important;width:0!important;height:0!important;
}
.gcUserMenu.gcUserMenuPolished .gcUserMenuClose{
  position:absolute!important;
  top:10px!important;right:10px!important;left:auto!important;bottom:auto!important;
  width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;
  margin:0!important;padding:0!important;
  z-index:2147483000!important;
  display:block!important;
  border:1px solid rgba(118,148,186,.34)!important;
  border-radius:12px!important;
  background:#112033!important;
  color:#dce7f2!important;
  opacity:1!important;visibility:visible!important;
  pointer-events:auto!important;
  touch-action:manipulation!important;
  -webkit-tap-highlight-color:transparent!important;
}
.gcUserMenu.gcUserMenuPolished>header{
  padding-right:54px!important;
}
.gcUserMenu.gcUserMenuPolished .gcUserMenuClose::before,
.gcUserMenu.gcUserMenuPolished .gcUserMenuClose::after{
  width:16px!important;height:2px!important;
}
@media(max-width:520px){
  .gcUserMenuOverlay{
    align-items:center!important;
    padding:max(6px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left))!important;
  }
  .gcUserMenu.gcUserMenuPolished{
    width:100%!important;max-width:430px!important;
    max-height:calc(100dvh - max(12px,env(safe-area-inset-top)) - max(12px,env(safe-area-inset-bottom)))!important;
    border-radius:16px!important;
    padding:12px!important;
  }
  .gcUserMenu.gcUserMenuPolished .gcUserMenuClose{
    top:8px!important;right:8px!important;
  }
  .gcUserMenu.gcUserMenuPolished>header{padding-right:52px!important}
}


/* ========================================================================== 
   GC 0.51.99 — HELP CENTER CATEGORY FIX + USER ACTION DIALOG FIT
   ========================================================================== */

/* User action dialog is a fixed shell. Only its BODY may scroll, invisibly.
   This prevents the close button/header from being cut off on short screens. */
.gcUserMenuOverlay{
  box-sizing:border-box!important;
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
  padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))!important;
}
.gcUserMenu.gcUserMenuPolished{
  box-sizing:border-box!important;
  position:relative!important;
  width:min(430px,calc(100vw - 16px))!important;
  max-width:430px!important;
  height:auto!important;
  max-height:min(720px,calc(100dvh - max(16px,env(safe-area-inset-top)) - max(16px,env(safe-area-inset-bottom))))!important;
  margin:0!important;
  padding:0!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
  border-radius:17px!important;
}
.gcUserMenu.gcUserMenuPolished > header{
  box-sizing:border-box!important;
  flex:0 0 auto!important;
  min-height:76px!important;
  margin:0!important;
  padding:12px 62px 11px 14px!important;
  display:flex!important;
  align-items:center!important;
  gap:11px!important;
  border-bottom:1px solid rgba(105,136,172,.25)!important;
  background:#172536!important;
}
.gcUserMenu.gcUserMenuPolished > header .uAvatar{
  width:46px!important;height:46px!important;min-width:46px!important;min-height:46px!important;flex:0 0 46px!important;
}
.gcUserMenu.gcUserMenuPolished > header b{font-size:17px!important;line-height:1.08!important}
.gcUserMenu.gcUserMenuPolished > header small{font-size:9px!important;line-height:1.15!important;margin-top:3px!important}
.gcUserMenu.gcUserMenuPolished .gcUserMenuClose{
  box-sizing:border-box!important;
  position:absolute!important;
  top:11px!important;right:11px!important;left:auto!important;bottom:auto!important;
  width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important;
  margin:0!important;padding:0!important;
  display:block!important;
  border:1px solid rgba(116,149,187,.36)!important;
  border-radius:12px!important;
  background:#0f1c2b!important;
  color:#dce8f4!important;
  font-size:0!important;
  line-height:0!important;
  z-index:20!important;
  overflow:hidden!important;
  pointer-events:auto!important;
  touch-action:manipulation!important;
  transform:none!important;
  translate:none!important;
}
.gcUserMenu.gcUserMenuPolished .gcUserMenuClose::before,
.gcUserMenu.gcUserMenuPolished .gcUserMenuClose::after{
  content:''!important;
  position:absolute!important;
  left:50%!important;top:50%!important;
  width:15px!important;height:2px!important;
  margin:0!important;
  border:0!important;border-radius:999px!important;
  background:currentColor!important;
  transform-origin:center!important;
  pointer-events:none!important;
}
.gcUserMenu.gcUserMenuPolished .gcUserMenuClose::before{transform:translate(-50%,-50%) rotate(45deg)!important}
.gcUserMenu.gcUserMenuPolished .gcUserMenuClose::after{transform:translate(-50%,-50%) rotate(-45deg)!important}
.gcUserMenu.gcUserMenuPolished .gcUserMenuBody{
  box-sizing:border-box!important;
  flex:1 1 auto!important;
  min-height:0!important;
  width:100%!important;
  margin:0!important;
  padding:10px 12px 12px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  scrollbar-width:none!important;
  -ms-overflow-style:none!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch!important;
}
.gcUserMenu.gcUserMenuPolished .gcUserMenuBody::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}
.gcUserMenu.gcUserMenuPolished .gcUserMenuSectionLabel{
  margin:8px 2px 6px!important;
  font-size:8px!important;line-height:1!important;letter-spacing:.11em!important;
}
.gcUserMenu.gcUserMenuPolished .gcUserMenuSectionLabel:first-child{margin-top:1px!important}
.gcUserMenu.gcUserMenuPolished .gcUserMenuGrid{
  box-sizing:border-box!important;
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:7px!important;
}
.gcUserMenu.gcUserMenuPolished .gcUserMenuGrid > button,
.gcUserMenu.gcUserMenuPolished .gcUserMenuGrid > span[data-friend-action-slot] > button{
  box-sizing:border-box!important;
  width:100%!important;min-width:0!important;
  min-height:49px!important;height:49px!important;
  margin:0!important;padding:8px 10px!important;
  gap:8px!important;border-radius:11px!important;
  overflow:hidden!important;
}
.gcUserMenu.gcUserMenuPolished .gcUserMenuGrid > span[data-friend-action-slot]{
  display:block!important;min-width:0!important;width:100%!important;
}
.gcUserMenu.gcUserMenuPolished .gcUserMenuCallBlock,
.gcUserMenu.gcUserMenuPolished .gcUserMenuBan,
.gcUserMenu.gcUserMenuPolished .gcUserMenuInvestigation > button{grid-column:1/-1!important}
.gcUserMenu.gcUserMenuPolished .gcActionIcon{flex:0 0 20px!important;width:20px!important;min-width:20px!important;text-align:center!important}

/* Very short viewports: compact the action rows instead of clipping the dialog. */
@media(max-height:620px){
  .gcUserMenu.gcUserMenuPolished{max-height:calc(100dvh - 10px)!important}
  .gcUserMenu.gcUserMenuPolished > header{min-height:66px!important;padding-top:8px!important;padding-bottom:8px!important}
  .gcUserMenu.gcUserMenuPolished > header .uAvatar{width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important;flex-basis:42px!important}
  .gcUserMenu.gcUserMenuPolished .gcUserMenuBody{padding:8px 10px 10px!important}
  .gcUserMenu.gcUserMenuPolished .gcUserMenuSectionLabel{margin:6px 2px 5px!important}
  .gcUserMenu.gcUserMenuPolished .gcUserMenuGrid{gap:6px!important}
  .gcUserMenu.gcUserMenuPolished .gcUserMenuGrid > button,
  .gcUserMenu.gcUserMenuPolished .gcUserMenuGrid > span[data-friend-action-slot] > button{height:45px!important;min-height:45px!important;padding:7px 9px!important}
}
@media(max-width:520px){
  .gcUserMenuOverlay{align-items:center!important}
  .gcUserMenu.gcUserMenuPolished{
    width:calc(100vw - max(12px,env(safe-area-inset-left)) - max(12px,env(safe-area-inset-right)))!important;
    max-width:430px!important;
    max-height:calc(100dvh - max(12px,env(safe-area-inset-top)) - max(12px,env(safe-area-inset-bottom)))!important;
    border-radius:16px!important;
  }
  .gcUserMenu.gcUserMenuPolished > header{padding-right:59px!important}
  .gcUserMenu.gcUserMenuPolished .gcUserMenuClose{top:9px!important;right:9px!important;width:42px!important;height:42px!important}
}
@media(max-width:350px){
  .gcUserMenu.gcUserMenuPolished .gcUserMenuGrid{grid-template-columns:1fr!important}
  .gcUserMenu.gcUserMenuPolished .gcUserMenuCallBlock,
  .gcUserMenu.gcUserMenuPolished .gcUserMenuBan,
  .gcUserMenu.gcUserMenuPolished .gcUserMenuInvestigation > button{grid-column:auto!important}
}

/* Help center: category pages are real article lists. */
#helpCenterResults .gcHelpArticle{width:100%!important;box-sizing:border-box!important}
#helpCenterResults .gcHelpArticle.isOpen{overflow:visible!important}
#helpCenterResults .gcHelpArticleBody.open{display:block!important;height:auto!important;max-height:none!important;opacity:1!important;visibility:visible!important;overflow:visible!important}
#helpCenterResults .gcHelpPageNav{box-sizing:border-box!important;width:100%!important}


/* ==========================================================================
   GC 0.52.00 — PUBLIC PROFILE IDENTITY POLISH
   Naam + rang in één nette regel; status en vriendschap duidelijk gescheiden.
   Geldt voor alle openbare profielen zonder bestaande profielhandlers te wijzigen.
   ========================================================================== */

#profileContent .gcProfileIdentity{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
}

#profileContent .gcProfileNameLine{
  width:100%!important;
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex-wrap:wrap!important;
  gap:8px!important;
  margin:4px 0 2px!important;
}

#profileContent .gcProfileNameLine .profileStyledName,
#profileContent .gcProfileIdentity .gcProfileNameLine h2{
  min-width:0!important;
  max-width:min(100%,440px)!important;
  margin:0!important;
  line-height:1.08!important;
}

#profileContent .gcProfileRankBadge{
  flex:0 0 auto!important;
  width:auto!important;
  max-width:180px!important;
  min-height:22px!important;
  margin:0!important;
  padding:4px 9px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:1px solid rgba(229,185,64,.58)!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,rgba(239,196,74,.98),rgba(213,165,45,.98))!important;
  color:#17120a!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 2px 8px rgba(0,0,0,.18)!important;
  font-size:8px!important;
  font-weight:950!important;
  line-height:1!important;
  letter-spacing:.07em!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

#profileContent .gcProfileIdentity > p{
  margin:2px 0 7px!important;
}

#profileContent .gcProfileStatusRow{
  width:100%!important;
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex-wrap:wrap!important;
  gap:10px!important;
  margin:0!important;
}

#profileContent .gcProfileStatusRow .gcProfilePresenceLabel,
#profileContent .gcProfileStatusRow .profileFriendStatus{
  margin:0!important;
}

#profileContent .gcProfilePresenceLabel{
  display:inline-flex!important;
  align-items:center!important;
  gap:5px!important;
  min-height:27px!important;
  padding:4px 9px!important;
  border-radius:999px!important;
}

#profileContent .profileFriendStatus{
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
  min-height:27px!important;
  padding:4px 10px!important;
  border-radius:999px!important;
}

#profileContent .gcProfileMoodLabel{
  margin-top:7px!important;
}

/* Kleine telefoons: naam en rang mogen op twee nette regels vallen,
   status/vriendschap houden genoeg lucht zonder buiten beeld te komen. */
@media(max-width:430px){
  #profileContent .gcProfileIdentity{
    padding-left:18px!important;
    padding-right:18px!important;
  }
  #profileContent .gcProfileNameLine{
    gap:6px!important;
    margin-top:3px!important;
  }
  #profileContent .gcProfileNameLine .profileStyledName,
  #profileContent .gcProfileIdentity .gcProfileNameLine h2{
    max-width:100%!important;
    font-size:21px!important;
  }
  #profileContent .gcProfileRankBadge{
    min-height:20px!important;
    padding:3px 8px!important;
    font-size:7.5px!important;
  }
  #profileContent .gcProfileStatusRow{
    gap:7px!important;
  }
  #profileContent .gcProfilePresenceLabel,
  #profileContent .profileFriendStatus{
    min-height:25px!important;
    padding:3px 8px!important;
    font-size:9px!important;
  }
}

/* Zeer smalle schermen: liever netjes onder elkaar dan gepropt. */
@media(max-width:340px){
  #profileContent .gcProfileStatusRow{
    flex-direction:column!important;
    gap:5px!important;
  }
}

/* ==========================================================================
   GC 0.52.01 — MOBILE PM SAFE BOTTOM DOCK
   Privévenster blijft volledig boven Chat/Kamers/Chatters/Meldingen/Meer.
   Alleen positionering; geen PM-handlers of berichtlogica aangepast.
   ========================================================================== */
@media(max-width:700px){
  :root{--gc-mobile-bottom-dock:64px}

  html:not(.gcKeyboardOpen) body.gcPmOpen #pmModal:not(.hidden) .gcPmCard{
    top:auto!important;
    bottom:calc(var(--gc-mobile-bottom-dock) + env(safe-area-inset-bottom) + 4px)!important;
    height:min(400px,calc(100svh - var(--gc-mobile-bottom-dock) - env(safe-area-inset-bottom) - 16px))!important;
    max-height:min(400px,calc(100svh - var(--gc-mobile-bottom-dock) - env(safe-area-inset-bottom) - 16px))!important;
    min-height:min(260px,calc(100svh - var(--gc-mobile-bottom-dock) - env(safe-area-inset-bottom) - 16px))!important;
    z-index:2147482500!important;
  }

  /* De mobiele navigatie blijft zichtbaar als context, maar kan niet over het PM-venster heen vallen. */
  body.gcPmOpen .gcMobileBottomNav{z-index:2147482200!important}

  #pmModal .pmBottom,
  #pmModal .pmComposer{
    position:relative!important;
    z-index:3!important;
  }
}

@media(max-width:390px){
  :root{--gc-mobile-bottom-dock:61px}
  html:not(.gcKeyboardOpen) body.gcPmOpen #pmModal:not(.hidden) .gcPmCard{
    right:4px!important;
    width:calc(100vw - 8px)!important;
    max-width:calc(100vw - 8px)!important;
    bottom:calc(var(--gc-mobile-bottom-dock) + env(safe-area-inset-bottom) + 3px)!important;
  }
}

/* Liggende/erg lage mobiele schermen: liever een kleinere PM-box dan overlap. */
@media(max-width:700px) and (max-height:500px){
  html:not(.gcKeyboardOpen) body.gcPmOpen #pmModal:not(.hidden) .gcPmCard{
    height:calc(100svh - var(--gc-mobile-bottom-dock) - env(safe-area-inset-bottom) - 10px)!important;
    max-height:calc(100svh - var(--gc-mobile-bottom-dock) - env(safe-area-inset-bottom) - 10px)!important;
    min-height:0!important;
  }
}

/* ========================================================================== 
   GC 0.52.02 — MOBILE PRIVATE MESSAGE BUBBLES
   Alleen de weergave van PM-berichten op telefoon; geen PM-logica gewijzigd.
   ========================================================================== */
@media(max-width:700px){
  #pmModal .pmMessages{
    padding:10px 9px 12px!important;
  }

  #pmModal .pm{
    box-sizing:border-box!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    align-items:flex-end!important;
    gap:7px!important;
    margin:0 0 9px!important;
  }

  #pmModal .pm.theirs{justify-content:flex-start!important}
  #pmModal .pm.mine{justify-content:flex-end!important;flex-direction:row!important}

  #pmModal img.pmMessageAvatar,
  #pmModal .pmMessageAvatar{
    width:30px!important;
    height:30px!important;
    min-width:30px!important;
    min-height:30px!important;
    max-width:30px!important;
    max-height:30px!important;
    flex:0 0 30px!important;
    margin:0 0 4px!important;
    border-radius:50%!important;
    object-fit:cover!important;
    box-shadow:0 2px 8px rgba(0,0,0,.28)!important;
  }

  #pmModal .pmBubble{
    box-sizing:border-box!important;
    width:auto!important;
    min-width:74px!important;
    max-width:min(78%,460px)!important;
    margin:0!important;
    padding:9px 36px 7px 10px!important;
    border:1px solid rgba(110,137,174,.24)!important;
    border-radius:14px 14px 14px 5px!important;
    background:#1b2a3f!important;
    box-shadow:0 4px 14px rgba(0,0,0,.16)!important;
    overflow:visible!important;
  }

  #pmModal .pm.mine .pmBubble{
    border-radius:14px 14px 5px 14px!important;
    background:#294363!important;
    border-color:rgba(119,158,208,.28)!important;
  }

  #pmModal .pm.systemPm .pmBubble{
    max-width:86%!important;
    border-radius:12px!important;
  }

  #pmModal .pmBody{
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    line-height:1.38!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
  }

  #pmModal .pmBody .gcStyledMessageText{
    display:block!important;
    width:auto!important;
    max-width:100%!important;
  }

  #pmModal .pmMeta{
    width:100%!important;
    min-width:0!important;
    margin:5px 0 0!important;
    padding:0!important;
    display:flex!important;
    align-items:center!important;
    gap:5px!important;
    flex-wrap:nowrap!important;
    color:#aebdd0!important;
    font-size:8px!important;
    line-height:1.1!important;
    white-space:nowrap!important;
    overflow:hidden!important;
  }

  #pmModal .pm.mine .pmMeta{justify-content:flex-end!important}
  #pmModal .pmMeta span:first-child{
    min-width:0!important;
    max-width:65%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-weight:800!important;
  }
  #pmModal .pmMeta time{flex:0 0 auto!important;opacity:.82!important}
  #pmModal .pmReceipt{flex:0 0 auto!important}

  /* Eén kleine, rustige berichtoptieknop rechtsboven in de bubble. */
  #pmModal .pmActionToggle{
    position:absolute!important;
    top:6px!important;
    right:6px!important;
    left:auto!important;
    width:26px!important;
    min-width:26px!important;
    height:24px!important;
    min-height:24px!important;
    margin:0!important;
    padding:0 0 2px!important;
    display:grid!important;
    place-items:center!important;
    border:0!important;
    border-radius:8px!important;
    background:rgba(8,15,25,.28)!important;
    color:#d7e1ed!important;
    box-shadow:none!important;
    font-size:12px!important;
    line-height:1!important;
    letter-spacing:-1px!important;
    opacity:.72!important;
    visibility:visible!important;
    pointer-events:auto!important;
    z-index:8!important;
    transform:none!important;
  }
  #pmModal .pmActionToggle:active,
  #pmModal .pm.actionsOpen .pmActionToggle{
    opacity:1!important;
    background:rgba(255,255,255,.10)!important;
    transform:none!important;
  }

  #pmModal .pmReactionSummary{
    margin-top:5px!important;
    padding-top:0!important;
    gap:4px!important;
  }

  /* Menu blijft functioneel; alleen koppelen aan de compacte knop/bubble. */
  #pmModal .pmMessageTools,
  #pmModal .pm:hover .pmMessageTools,
  #pmModal .pm:focus-within .pmMessageTools{
    top:34px!important;
  }
}

@media(max-width:390px){
  #pmModal .pmMessages{padding-left:7px!important;padding-right:7px!important}
  #pmModal .pm{gap:6px!important;margin-bottom:8px!important}
  #pmModal img.pmMessageAvatar,
  #pmModal .pmMessageAvatar{
    width:28px!important;height:28px!important;min-width:28px!important;min-height:28px!important;max-width:28px!important;max-height:28px!important;flex-basis:28px!important;
  }
  #pmModal .pmBubble{
    max-width:80%!important;
    padding:8px 34px 7px 9px!important;
    border-radius:13px 13px 13px 5px!important;
  }
  #pmModal .pm.mine .pmBubble{border-radius:13px 13px 5px 13px!important}
  #pmModal .pmMeta{margin-top:4px!important;font-size:7.8px!important}
}

@media(max-width:340px){
  #pmModal .pmBubble{max-width:82%!important}
  #pmModal .pmMeta span:first-child{max-width:56%!important}
}


/* GC 0.52.03 — Secure private viewer, mention settings and moderation dialogs */
.gcMentionOptionsCard{margin:0 0 14px;padding:12px;border:1px solid rgba(91,127,166,.32);border-radius:13px;background:#101c2b}.gcMentionOptionsCard .chatOptionsSectionHead{margin-bottom:7px}.gcMentionOptionsCard .chatOptionToggle{margin:0;border-radius:0;border-left:0;border-right:0}.gcMentionOptionsCard .chatOptionToggle:last-child{border-bottom:0}
.pmSecureViewer{padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))!important;background:rgba(0,5,12,.985)!important}.pmSecureViewerStage{width:min(96vw,980px)!important;height:min(92dvh,900px)!important;display:grid!important;grid-template-rows:auto minmax(0,1fr) auto!important;place-items:stretch!important;overflow:hidden!important;border-radius:18px!important}.pmSecureViewerTop{position:relative!important;inset:auto!important;z-index:5!important;display:grid!important;grid-template-columns:minmax(0,1fr) auto 44px!important;gap:10px!important;align-items:center!important;padding:10px 12px!important;border-radius:0!important;border-bottom:1px solid rgba(103,137,174,.28)!important;background:rgba(10,20,32,.96)!important}.pmSecureViewerTop>span{display:grid!important;gap:2px!important}.pmSecureViewerTop strong{font-size:13px!important}.pmSecureViewerTop small{font-size:9px!important;color:#93a6bb!important}.pmSecureViewerTop b{min-width:46px!important;height:30px!important;display:grid!important;place-items:center!important;border:1px solid rgba(114,209,255,.34)!important;border-radius:999px!important;background:#0e2938!important;color:#83dcff!important}.pmSecureViewerTop #pmSecureViewerClose{position:relative!important;right:auto!important;top:auto!important;bottom:auto!important;width:40px!important;height:40px!important;min-width:40px!important;border-radius:11px!important}.pmSecureViewerImageStage{min-height:0!important;display:grid!important;place-items:center!important;padding:10px!important;overflow:hidden!important;background:#03070d!important}.pmSecureViewerImageStage>img{display:block!important;max-width:100%!important;max-height:100%!important;width:auto!important;height:auto!important;object-fit:contain!important;pointer-events:none!important;-webkit-user-drag:none!important}.pmSecureViewerBottom{z-index:4!important;padding:9px 12px!important;border-top:1px solid rgba(103,137,174,.22)!important;background:#091421!important;color:#91a5ba!important;text-align:center!important;font-size:9px!important}.pmSecureViewerWatermark{z-index:3!important}.gcMuteDurationOverlay{position:fixed;inset:0;z-index:2147483200;display:grid;place-items:center;padding:14px;background:rgba(0,5,11,.78);backdrop-filter:blur(4px)}.gcMuteDurationCard{width:min(440px,calc(100vw - 20px));display:grid;gap:12px;padding:16px;border:1px solid #344d68;border-radius:16px;background:#0d1927;box-shadow:0 24px 70px rgba(0,0,0,.5)}.gcMuteDurationHead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.gcMuteDurationHead small{color:#e9bb48;font-size:9px;font-weight:900;letter-spacing:.1em}.gcMuteDurationHead h3{margin:4px 0 0}.gcMuteDurationHead button{width:38px;height:38px;border:1px solid #38516c;border-radius:10px;background:#122337;color:#fff;font-size:20px}.gcMuteDurationCard label{display:grid;gap:6px;font-size:10px;font-weight:800}.gcMuteDurationCard select,.gcMuteDurationCard input,.gcMuteDurationCard textarea{width:100%;box-sizing:border-box}.gcMuteDurationActions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.gcUserMenuGhost{grid-column:1/-1!important;border-color:rgba(154,103,214,.45)!important;color:#d8baff!important}.gcUserMenuGhost .gcActionIcon{filter:none!important}
@media(max-width:600px){.pmSecureViewer{padding:0!important}.pmSecureViewerStage{width:100%!important;height:100dvh!important;max-height:100dvh!important;border:0!important;border-radius:0!important}.pmSecureViewerTop{padding:max(8px,env(safe-area-inset-top)) 8px 8px!important;grid-template-columns:minmax(0,1fr) auto 42px!important}.pmSecureViewerImageStage{padding:6px!important}.pmSecureViewerBottom{padding:8px 10px max(8px,env(safe-area-inset-bottom))!important}.gcMentionOptionsCard{padding:9px!important}.gcMuteDurationOverlay{padding:max(8px,env(safe-area-inset-top)) 8px max(8px,env(safe-area-inset-bottom))}.gcMuteDurationCard{max-height:calc(100dvh - 16px);overflow:auto}}
\n\n/* GC 0.52.06 — staff-only Ghost indicator in userlist */
.userCard .uName{display:flex!important;align-items:center!important;gap:5px!important;min-width:0!important}
.userCard .gcGhostUserlistBadge{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  flex:0 0 18px!important;width:18px!important;height:18px!important;margin:0!important;padding:0!important;
  border:1px solid rgba(195,137,255,.42)!important;border-radius:6px!important;
  background:rgba(113,65,156,.24)!important;color:#d9b2ff!important;
  font-size:11px!important;line-height:1!important;font-style:normal!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)!important;
}
@media(max-width:430px){.userCard .gcGhostUserlistBadge{flex-basis:17px!important;width:17px!important;height:17px!important;font-size:10px!important}}


/* Profielbanners: afbeeldingen en gedempte, herhalende video */
.gcProfileHero>.gcProfileCoverVideo{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;z-index:0!important;pointer-events:none!important}
.profileLiveCover{position:relative!important;overflow:hidden!important}
.profileLiveCover>.profileLiveCoverVideo{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;pointer-events:none!important}

/* Profielfoto/banner uitsnede-editor */
.gcImageCropModal{position:fixed;inset:0;z-index:26000;display:grid;place-items:center;padding:16px;background:rgba(2,8,7,.82);backdrop-filter:blur(8px)}
.gcImageCropCard{width:min(820px,100%);max-height:min(94dvh,900px);overflow:auto;border:1px solid color-mix(in srgb,var(--accent,#f2c94c) 48%,transparent);border-radius:18px;background:var(--panel,#10231b);box-shadow:0 24px 80px rgba(0,0,0,.55);padding:16px}
.gcImageCropHead{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:12px}.gcImageCropHead b{display:block;font-size:18px}.gcImageCropHead small{display:block;margin-top:4px;color:var(--muted,#9eb8ad)}
.gcImageCropHead button{width:44px;height:44px;flex:0 0 44px;border-radius:12px;border:1px solid var(--border,#315847);background:var(--panel2,#162d23);color:var(--text,#fff);font-size:28px;line-height:1}
.gcImageCropStage{display:grid;place-items:center;overflow:hidden;border:1px solid var(--border,#315847);border-radius:14px;background:#07100d;padding:8px}
.gcImageCropStage canvas{display:block;width:100%;height:auto;max-height:58dvh;object-fit:contain;border-radius:9px;cursor:grab;touch-action:none}.gcImageCropStage canvas:active{cursor:grabbing}
.gcImageCropZoom{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:14px;margin:14px 2px;color:var(--text,#fff);font-weight:700}.gcImageCropZoom input{width:100%;accent-color:var(--accent,#f2c94c)}
.gcImageCropActions{display:flex;justify-content:flex-end;gap:10px}.gcImageCropActions button{min-height:44px}
@media(max-width:600px){.gcImageCropModal{padding:8px}.gcImageCropCard{padding:12px;border-radius:14px}.gcImageCropHead b{font-size:16px}.gcImageCropStage canvas{max-height:52dvh}.gcImageCropActions{display:grid;grid-template-columns:1fr 1fr}.gcImageCropActions button{width:100%}}