:root{
  --bg:#080b12;--panel:#0e131d;--panel2:#121925;--panel3:#171f2d;
  --stroke:rgba(255,255,255,.075);--text:#f4f7fb;--muted:#7d899c;
  --accent:#63d7ff;--accent2:#2a9cff;--green:#50d890;--danger:#f36872;
}

/* V1.41 — member context menu */
.member-context-menu{position:fixed;z-index:260;width:230px;max-height:min(640px,calc(100vh - 16px));overflow:auto;padding:7px;border:1px solid rgba(255,255,255,.09);border-radius:12px;background:#0b111a;box-shadow:0 18px 55px rgba(0,0,0,.65)}.member-context-head{padding:8px 8px 11px;display:grid;grid-template-columns:38px minmax(0,1fr);gap:9px;align-items:center;border-bottom:1px solid var(--stroke)}.member-context-avatar{width:38px;height:38px;display:grid;place-items:center;overflow:hidden;border-radius:50%;background:#1b293b;font-size:11px;font-weight:950}.member-context-avatar img{width:100%;height:100%;object-fit:cover}.member-context-head>div:last-child{min-width:0;display:flex;flex-direction:column}.member-context-head strong,.member-context-head span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.member-context-head strong{font-size:10px}.member-context-head span{margin-top:2px;color:#718096;font-size:7px}.member-context-menu>button,.member-context-section>button{width:100%;min-height:32px;padding:0 9px;display:flex;align-items:center;justify-content:space-between;border:0;border-radius:7px;background:transparent;color:#aab6c6;text-align:left;font-size:8px;cursor:pointer}.member-context-menu button:hover{background:#182333;color:#fff}.member-context-menu button.danger{color:#ff858d}.member-context-menu button.danger:hover{background:rgba(243,104,114,.13)}.member-context-section{margin-top:5px;padding-top:5px;border-top:1px solid var(--stroke)}.member-context-section>small{display:block;padding:5px 9px 3px;color:#5f6e82;font-size:6px;font-weight:950;letter-spacing:.12em}.member-context-section label{min-height:31px;padding:0 9px;display:grid;grid-template-columns:15px 9px minmax(0,1fr);gap:7px;align-items:center;border-radius:7px;color:#9facbd;font-size:8px;cursor:pointer}.member-context-section label:hover{background:#162130;color:#fff}.member-context-section label i{width:9px;height:9px;border-radius:50%}.member-context-section input{accent-color:var(--accent)}.member-context-empty{padding:9px;color:#657388;font-size:8px}.right-member,.voice-presence-user,.participant-card,.message-profile-trigger{cursor:pointer}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text)}
button,input{font:inherit}.hidden{display:none!important}
.ambient{position:fixed;border-radius:50%;filter:blur(120px);pointer-events:none;opacity:.17}
.ambient-a{width:430px;height:430px;background:#1986d1;top:-220px;right:-130px}
.ambient-b{width:380px;height:380px;background:#124a9b;bottom:-180px;left:-120px}

.join-shell{width:min(1080px,calc(100% - 40px));min-height:100vh;margin:auto;padding:35px 0;display:flex;flex-direction:column}
.brand-row{display:flex;align-items:center;gap:12px}.brand-row>div:last-child{display:flex;flex-direction:column}.brand-row strong{font-size:15px}.brand-row span{font-size:10px;color:var(--muted);margin-top:2px}
.brand-mark,.server-logo{display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#03101b;font-weight:900}
.brand-mark{width:44px;height:44px;border-radius:14px;font-size:19px}
.join-card{width:min(580px,100%);margin:auto;padding:42px;border:1px solid var(--stroke);border-radius:28px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.025));box-shadow:0 40px 90px rgba(0,0,0,.35)}
.eyebrow{font-size:10px;letter-spacing:.16em;color:var(--accent);font-weight:800}.join-card h1{font-size:50px;line-height:1.02;letter-spacing:-.04em;margin:13px 0}.join-card>p{font-size:14px;line-height:1.7;color:var(--muted);margin:0 0 28px}
.join-card label{display:block;font-size:11px;font-weight:700;color:#b7c0ce;margin:15px 0 8px}
.join-card input{width:100%;height:54px;border:1px solid var(--stroke);border-radius:14px;background:#090e16;color:white;padding:0 15px;outline:none}.join-card input:focus{border-color:rgba(99,215,255,.45);box-shadow:0 0 0 4px rgba(99,215,255,.05)}
.room-input{display:flex;align-items:center;border:1px solid var(--stroke);border-radius:14px;background:#090e16}.room-input:focus-within{border-color:rgba(99,215,255,.45);box-shadow:0 0 0 4px rgba(99,215,255,.05)}.room-input span{padding-left:15px;color:var(--muted)}.room-input input{border:0;background:transparent;box-shadow:none!important}
.primary-btn{width:100%;height:55px;border:0;border-radius:14px;margin-top:20px;background:linear-gradient(135deg,var(--accent),var(--accent2));font-weight:850;color:#03121f;cursor:pointer;transition:.2s}.primary-btn:hover{transform:translateY(-1px);filter:brightness(1.05)}.primary-btn:disabled{opacity:.6;cursor:wait}
.error{min-height:18px;color:#ff8f96;font-size:11px;margin-top:8px}
.feature-row{display:flex;gap:7px;flex-wrap:wrap;margin-top:15px}.feature-row span{font-size:9px;color:#9da8b8;border:1px solid var(--stroke);background:rgba(255,255,255,.02);padding:7px 9px;border-radius:999px}
.join-shell footer{font-size:10px;color:#566174;text-align:center}

.app-shell{height:100vh;display:grid;grid-template-columns:70px 245px minmax(420px,1fr) 330px;overflow:hidden}
.server-rail{border-right:1px solid var(--stroke);background:#090d14;padding:16px 0;display:flex;flex-direction:column;align-items:center;gap:14px}
.server-logo{width:44px;height:44px;border-radius:15px}.rail-dot{width:38px;height:38px;border-radius:14px;background:#141b27;border:1px solid var(--stroke)}.rail-dot.active{background:#172536;border-color:rgba(99,215,255,.25)}
.channel-panel{background:#0d121b;border-right:1px solid var(--stroke);display:flex;flex-direction:column;padding:18px 12px 12px}
.community-title{display:flex;justify-content:space-between;align-items:center;padding:2px 7px 20px;border-bottom:1px solid var(--stroke)}.community-title>div{display:flex;flex-direction:column}.community-title strong{font-size:13px}.community-title span{font-size:9px;color:var(--muted);margin-top:3px}.status-dot{width:8px;height:8px;border-radius:50%;background:var(--green)}
.section-title{font-size:9px;color:#637084;font-weight:800;letter-spacing:.11em;margin:19px 8px 8px}.members-title{display:flex;justify-content:space-between}
.channel{width:100%;border:0;border-radius:10px;padding:10px;background:transparent;color:#aab4c4;display:flex;gap:10px;text-align:left;cursor:pointer}.channel.active{background:#171e2a;color:#fff}.channel div{display:flex;flex-direction:column}.channel strong{font-size:12px}.channel small{font-size:9px;color:var(--green);margin-top:2px}
.participants{display:flex;flex-direction:column;gap:4px;overflow:auto}.participant{display:grid;grid-template-columns:31px 1fr auto;gap:9px;align-items:center;padding:7px;border-radius:9px}.participant.speaking{background:rgba(80,216,144,.07)}.participant-avatar,.avatar{border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#24344b,#182335);font-size:11px;font-weight:800}.participant-avatar{width:31px;height:31px}.participant.speaking .participant-avatar{box-shadow:0 0 0 2px var(--green)}.participant-name{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.participant-state{font-size:9px;color:var(--muted)}
.self-card{margin-top:auto;display:grid;grid-template-columns:34px 1fr 28px;align-items:center;gap:9px;padding:10px;background:#101722;border:1px solid var(--stroke);border-radius:12px}.avatar{width:34px;height:34px}.self-info{min-width:0;display:flex;flex-direction:column}.self-info strong{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.self-info span{font-size:8px;color:var(--green);margin-top:2px}.self-card button{width:28px;height:28px;border:0;border-radius:8px;background:#1b2432;color:#9ba8ba;cursor:pointer}
.build-version{flex:0 0 auto;padding-top:6px;text-align:center;color:#4f5c6f;font-size:7px;font-weight:750;letter-spacing:.08em;line-height:1;user-select:none}

/* V1.46 — polls */
.poll-composer-btn{color:#9fdfff!important;font-size:15px!important}
.poll-create-modal{width:min(560px,100%)!important}.poll-create-body{max-height:min(650px,calc(100vh - 170px));overflow:auto}.poll-create-body>textarea{width:100%;min-height:82px;resize:vertical;padding:12px;border:1px solid var(--stroke);border-radius:11px;outline:none;background:#0a1018;color:#eef4fb;font-size:11px;line-height:1.5}.poll-create-body>textarea:focus{border-color:rgba(99,215,255,.4)}
.poll-options-head{display:flex;align-items:center;justify-content:space-between;margin:16px 0 8px}.poll-options-head label{font-size:10px;font-weight:800;color:#aeb9c8}.poll-options-head span{font-size:8px;color:var(--muted)}.poll-options-editor{display:flex;flex-direction:column;gap:7px}.poll-option-editor-row{display:grid;grid-template-columns:24px minmax(0,1fr) 32px;gap:7px;align-items:center}.poll-option-editor-row>span{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:#172131;color:#718096;font-size:8px;font-weight:900}.poll-option-editor-row input{width:100%;height:40px;border:1px solid var(--stroke);border-radius:9px;background:#0a1018;color:#eef4fb;padding:0 10px;outline:none;font-size:10px}.poll-option-editor-row input:focus{border-color:rgba(99,215,255,.38)}.poll-option-editor-row button{width:32px;height:32px;border:0;border-radius:8px;background:rgba(243,104,114,.08);color:#ff8991;cursor:pointer}.poll-add-option{margin-top:9px;min-height:34px}.poll-create-grid{display:grid;gap:9px;margin-top:17px}.poll-create-grid>label:first-child{display:flex;flex-direction:column;gap:6px;color:#aeb9c8;font-size:9px;font-weight:800}.poll-create-grid select{height:40px;margin:0!important}.poll-check{display:grid!important;grid-template-columns:18px minmax(0,1fr);gap:9px;align-items:start;padding:10px;border:1px solid var(--stroke);border-radius:10px;background:rgba(255,255,255,.016);cursor:pointer}.poll-check input{margin:2px 0 0;accent-color:var(--accent)}.poll-check>span{display:flex;flex-direction:column;gap:2px}.poll-check strong{font-size:10px}.poll-check small{font-size:8px;color:var(--muted)}.poll-create-footer{justify-content:flex-end}.poll-create-footer>span{margin-right:auto}
.poll-card{width:min(540px,100%);margin-top:8px;padding:14px;border:1px solid rgba(99,215,255,.18);border-radius:14px;background:linear-gradient(180deg,rgba(27,42,59,.72),rgba(14,22,33,.88));box-shadow:0 10px 30px rgba(0,0,0,.16)}.poll-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.poll-card-head>div{min-width:0}.poll-card-head span{display:block;color:var(--accent);font-size:7px;font-weight:950;letter-spacing:.13em}.poll-card-head h4{margin:5px 0 0;color:#f3f7fc;font-size:13px;line-height:1.35;word-break:break-word}.poll-state{flex:0 0 auto;padding:4px 7px;border-radius:999px;background:rgba(80,216,144,.09);color:var(--green);font-size:7px;font-weight:900}.poll-state.ended{background:rgba(255,255,255,.055);color:#7e8a9b}.poll-options{display:flex;flex-direction:column;gap:7px;margin-top:12px}.poll-option{position:relative;width:100%;min-height:42px;overflow:hidden;display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:8px;align-items:center;padding:8px 10px;border:1px solid rgba(255,255,255,.075);border-radius:10px;background:#0c131d;color:#c6d0de;text-align:left;cursor:pointer}.poll-option:hover:not(:disabled){border-color:rgba(99,215,255,.3);background:#101c29}.poll-option.mine{border-color:rgba(99,215,255,.4);color:#edf9ff}.poll-option:disabled{cursor:default}.poll-option-bar{position:absolute;inset:0 auto 0 0;width:var(--poll-percent);background:linear-gradient(90deg,rgba(42,156,255,.15),rgba(99,215,255,.07));pointer-events:none;transition:width .28s ease}.poll-option-mark,.poll-option-text,.poll-option-result{position:relative;z-index:1}.poll-option-mark{width:16px;height:16px;display:grid;place-items:center;border:1px solid #435064;border-radius:50%;color:#07111b;font-size:9px}.poll-card.multiple .poll-option-mark{border-radius:5px}.poll-option.mine .poll-option-mark{border-color:var(--accent);background:var(--accent)}.poll-option-text{font-size:10px;font-weight:750;word-break:break-word}.poll-option-result{display:flex;align-items:center;gap:6px;color:#8290a3;font-size:8px;font-variant-numeric:tabular-nums}.poll-option-result strong{color:#dce7f4;font-size:9px}.poll-voters{position:relative;z-index:1;grid-column:2/-1;margin-top:-2px;color:#657388;font-size:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.poll-card-footer{display:flex;align-items:center;gap:7px;margin-top:11px;color:#778599;font-size:8px}.poll-card-footer b{color:#a9b7c8}.poll-card-footer button{margin-left:auto;border:0;border-radius:7px;background:rgba(243,104,114,.09);color:#ff8992;padding:6px 8px;font-size:7px;font-weight:850;cursor:pointer}.poll-card-footer button:hover{background:rgba(243,104,114,.16)}
@media(max-width:560px){.poll-card{padding:11px}.poll-card-head h4{font-size:12px}.poll-option{min-height:45px}.poll-create-modal{max-height:calc(100vh - 16px)}.poll-create-body{max-height:calc(100vh - 150px)}}
.poll-option-heading{display:flex;align-items:center;justify-content:space-between;margin:16px 0 8px}.poll-option-heading label{font-size:10px;font-weight:800;color:#aeb9c8}.poll-option-heading span{font-size:8px;color:var(--muted)}.poll-option-editor{display:flex;flex-direction:column;gap:7px}.poll-option-input{display:grid;grid-template-columns:24px minmax(0,1fr) 32px;gap:7px;align-items:center}.poll-option-input>span{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:#172131;color:#718096;font-size:8px;font-weight:900}.poll-option-input input{width:100%;height:40px;border:1px solid var(--stroke);border-radius:9px;background:#0a1018;color:#eef4fb;padding:0 10px;outline:none;font-size:10px}.poll-option-input input:focus{border-color:rgba(99,215,255,.38)}.poll-option-input button{width:32px;height:32px;border:0;border-radius:8px;background:rgba(243,104,114,.08);color:#ff8991;cursor:pointer}.poll-option-input button:disabled{opacity:.25;cursor:default}.poll-create-body>select{width:100%;height:40px;margin:6px 0 12px}.poll-create-body>.poll-check{margin-top:8px}

.stage{min-width:0;background:radial-gradient(circle at 50% 15%,rgba(39,112,163,.08),transparent 33%),#090d14;display:flex;flex-direction:column}
.stage-header,.chat-header{height:64px;flex:0 0 64px;border-bottom:1px solid var(--stroke);display:flex;align-items:center;padding:0 20px}.stage-header{justify-content:space-between}.crumb{font-size:10px;color:#647286;margin-right:6px}.stage-header strong{font-size:13px}.connection-pill{font-size:9px;color:var(--green);border:1px solid rgba(80,216,144,.18);background:rgba(80,216,144,.06);padding:6px 9px;border-radius:999px}
.stage-content{min-height:0;flex:1;padding:28px;display:flex;flex-direction:column;align-items:center;overflow:auto}
.voice-hero{text-align:center;margin:auto 0 28px}.voice-orb{width:96px;height:96px;border-radius:50%;display:grid;place-items:center;margin:0 auto 18px;background:radial-gradient(circle,#1b5b78,#102334 65%,#0b131d);border:1px solid rgba(99,215,255,.18);box-shadow:0 0 70px rgba(99,215,255,.06)}.voice-icon{color:var(--accent);font-weight:900}.voice-hero h2{margin:0 0 8px;font-size:20px}.voice-hero p{margin:0;color:var(--muted);font-size:11px}
.screen-stage{width:min(900px,100%);margin-bottom:18px}.screen-head{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);padding:0 2px 8px}.screen-video-wrap{aspect-ratio:16/9;border:1px solid var(--stroke);border-radius:15px;overflow:hidden;background:#030507}.screen-video-wrap video{width:100%;height:100%;object-fit:contain;display:block}
.controls{margin-top:auto;display:flex;gap:9px;padding:9px;border:1px solid var(--stroke);background:rgba(16,22,32,.9);border-radius:18px;box-shadow:0 20px 45px rgba(0,0,0,.28)}.control{width:62px;height:56px;border:0;border-radius:12px;background:#181f2c;color:#c4cedc;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer}.control span{font-size:16px}.control small{font-size:8px}.control:hover{background:#202a39}.control.active{background:rgba(99,215,255,.10);color:var(--accent)}.control.danger{background:rgba(243,104,114,.12);color:#ff818a}.control.danger:hover{background:rgba(243,104,114,.2)}
.transfer-toast{margin:12px 0 0;padding:8px 12px;border-radius:9px;background:#121b28;border:1px solid var(--stroke);font-size:9px;color:#9faabc}

.chat-panel{background:#0d121b;border-left:1px solid var(--stroke);display:flex;flex-direction:column;min-width:0}.chat-header>div{display:flex;flex-direction:column}.chat-header strong{font-size:12px}.chat-header span{font-size:9px;color:var(--muted);margin-top:2px}
.messages{min-height:0;flex:1;overflow:auto;padding:18px}.welcome-message{margin:40px 0 25px}.welcome-icon{width:45px;height:45px;border-radius:14px;background:#1a2432;display:grid;place-items:center;color:var(--accent);font-weight:900}.welcome-message h3{font-size:17px;margin:12px 0 4px}.welcome-message p{font-size:10px;color:var(--muted);margin:0}
.message{display:grid;grid-template-columns:32px 1fr;gap:9px;margin:13px 0}.message .participant-avatar{grid-row:1/3}.message-head{display:flex;align-items:baseline;gap:7px}.message-head strong{font-size:11px}.message-head span{font-size:8px;color:#5e697a}.message-body{font-size:11px;color:#bfc8d5;line-height:1.55;word-break:break-word}.file-message{margin-top:5px;display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--stroke);background:#121a26;border-radius:10px;color:#d5deea;text-decoration:none;font-size:10px}.file-message small{color:var(--muted)}
.chat-form{margin:0 14px 14px;height:48px;display:flex;background:#171e2a;border:1px solid var(--stroke);border-radius:12px;overflow:hidden}.chat-form input{flex:1;min-width:0;border:0;background:transparent;color:#fff;outline:0;padding:0 13px;font-size:11px}.chat-form button{width:44px;border:0;background:transparent;color:var(--accent);font-size:17px;cursor:pointer}
#remoteAudio audio{display:none}

@media(max-width:1050px){.app-shell{grid-template-columns:64px 220px 1fr}.chat-panel{position:fixed;right:0;top:0;bottom:0;width:330px;transform:translateX(100%)}}
@media(max-width:720px){.join-card{padding:28px 20px}.join-card h1{font-size:40px}.app-shell{grid-template-columns:1fr}.server-rail,.channel-panel{display:none}.stage{height:100vh}.stage-content{padding:18px}.controls{position:sticky;bottom:8px}.control{width:55px}.voice-hero{margin-top:auto}.chat-panel{display:none}}

.room-hint{
  margin-top:7px;
  color:var(--muted);
  font-size:9px;
  line-height:1.45;
}
.primary-btn:disabled{
  opacity:.38;
  cursor:not-allowed;
  transform:none;
  filter:none;
}


/* V1.2 participant stage */
.voice-hero{width:100%;margin:0;text-align:left;display:flex;flex-direction:column;flex:1;min-height:0}
.room-overview{width:100%;display:flex;justify-content:space-between;gap:20px;margin:2px 0 22px}
.room-kicker,.settings-kicker{color:var(--accent);font-size:8px;font-weight:900;letter-spacing:.15em}
.room-overview h2{margin:5px 0;font-size:18px}.room-overview p{margin:0;color:var(--muted);font-size:10px}
.room-overview-meta{display:flex;align-items:center;gap:7px;color:#7f8b9d;font-size:9px;padding-top:8px}
.secure-dot{width:5px;height:5px;border-radius:50%;background:var(--green);box-shadow:0 0 12px rgba(80,216,144,.45)}
.participant-grid{width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;align-content:center;flex:1;max-width:960px;margin:auto}
.stage-participant{min-height:205px;border:1px solid var(--stroke);border-radius:20px;background:radial-gradient(circle at 50% 0%,rgba(54,124,172,.08),transparent 48%),linear-gradient(180deg,#101722,#0d131c);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:22px;transition:.2s;position:relative}
.stage-participant.speaking{border-color:rgba(80,216,144,.5);box-shadow:0 0 0 1px rgba(80,216,144,.08),0 12px 40px rgba(0,0,0,.22);transform:translateY(-2px)}
.stage-avatar-wrap{width:92px;height:92px;position:relative;display:grid;place-items:center}
.stage-avatar{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#26384f,#182536);border:1px solid rgba(255,255,255,.07);font-size:20px;font-weight:900;color:#eaf4ff;z-index:2}
.voice-ring{position:absolute;inset:3px;border:2px solid transparent;border-radius:50%}
.stage-participant.speaking .voice-ring{border-color:var(--green);box-shadow:0 0 22px rgba(80,216,144,.22);animation:speakerPulse 1.25s ease-out infinite}
.stage-participant.muted .stage-avatar{opacity:.72}
@keyframes speakerPulse{0%{transform:scale(.96);opacity:1}70%{transform:scale(1.11);opacity:.25}100%{transform:scale(1.14);opacity:0}}
.stage-person-name{margin-top:10px;font-size:13px;font-weight:800;display:flex;align-items:center;gap:7px}
.you-pill{font-size:7px;letter-spacing:.09em;color:var(--accent);border:1px solid rgba(99,215,255,.2);background:rgba(99,215,255,.06);padding:3px 5px;border-radius:999px}
.stage-person-status{margin-top:7px;color:#778397;font-size:9px;display:flex;align-items:center;gap:5px}
.stage-participant.speaking .stage-person-status{color:var(--green)}

/* settings */
.modal-backdrop{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;background:rgba(2,6,10,.72);backdrop-filter:blur(10px)}
.settings-modal{width:min(500px,100%);border:1px solid rgba(255,255,255,.09);border-radius:22px;background:linear-gradient(180deg,#121925,#0e141e);box-shadow:0 35px 100px rgba(0,0,0,.55);overflow:hidden}
.settings-head{padding:20px 22px 17px;border-bottom:1px solid var(--stroke);display:flex;align-items:center;justify-content:space-between}
.settings-head h3{margin:4px 0 0;font-size:18px}
.icon-close{width:32px;height:32px;border:1px solid var(--stroke);border-radius:9px;background:#171f2b;color:#9ca8ba;cursor:pointer;font-size:20px}
.settings-body{padding:20px 22px}.settings-body>label{display:block;margin:0 0 7px;color:#aeb9c8;font-size:10px;font-weight:700}
.settings-body select{width:100%;height:43px;padding:0 11px;margin-bottom:17px;border:1px solid var(--stroke);border-radius:10px;background:#0a1018;color:#e7edf5;font-size:10px}
.setting-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:13px 0;border-top:1px solid rgba(255,255,255,.055)}
.setting-row>div{display:flex;flex-direction:column;gap:3px}.setting-row strong{font-size:11px}.setting-row span{font-size:9px;color:var(--muted)}
.toggle-btn{width:40px;height:22px;padding:2px;border:0;border-radius:999px;background:#222b39;cursor:pointer}.toggle-btn>span{display:block;width:18px;height:18px;border-radius:50%;background:#8591a3;transition:.2s}.toggle-btn.active{background:rgba(99,215,255,.18)}.toggle-btn.active>span{transform:translateX(18px);background:var(--accent)}
.mic-test{margin-top:12px;padding:13px;border:1px solid var(--stroke);border-radius:12px;background:#0b111a}.mic-test-head{display:flex;justify-content:space-between;font-size:9px;color:#8b97a9;margin-bottom:9px}
.level-track{height:6px;border-radius:999px;background:#171f2b;overflow:hidden}.level-bar{width:0;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent2),var(--green));transition:width .08s linear}
.settings-footer{min-height:64px;padding:12px 22px;border-top:1px solid var(--stroke);display:flex;align-items:center;justify-content:space-between;gap:15px;color:#687587;font-size:9px}
.settings-primary{border:0;border-radius:9px;padding:9px 16px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#06111d;font-size:10px;font-weight:850;cursor:pointer}
.screen-stage{max-width:1100px;margin:auto auto 18px}.screen-video-wrap{box-shadow:0 18px 55px rgba(0,0,0,.32)}

@media(max-width:720px){
  .room-overview{flex-direction:column}
  .participant-grid{grid-template-columns:1fr 1fr;gap:9px}
  .stage-participant{min-height:160px;padding:15px}
  .stage-avatar-wrap{width:72px;height:72px}.stage-avatar{width:60px;height:60px;font-size:16px}
  .controls{max-width:100%;overflow-x:auto}
}


/* V1.2.1 voice-state fixes */
.stage-participant.speaking{
  border-color:rgba(80,216,144,.72);
  box-shadow:0 0 0 1px rgba(80,216,144,.14),0 0 34px rgba(80,216,144,.12),0 12px 40px rgba(0,0,0,.22);
}
.stage-participant.speaking .stage-avatar{
  box-shadow:0 0 0 3px rgba(80,216,144,.18),0 0 30px rgba(80,216,144,.22);
}
.stage-participant.deafened{
  border-color:rgba(243,104,114,.28);
}
.stage-participant.deafened .stage-person-status,
.deafened-state{
  color:var(--danger)!important;
}
.control.deafened,
.control.forced-muted{
  background:rgba(243,104,114,.16);
  color:#ff818a;
}
.control:disabled{
  cursor:not-allowed;
  opacity:.75;
}


/* V1.3 invites + system activity */
.header-actions{
  display:flex;
  align-items:center;
  gap:8px;
}
.invite-btn{
  height:29px;
  padding:0 12px;
  border:1px solid rgba(99,215,255,.18);
  border-radius:9px;
  background:rgba(99,215,255,.055);
  color:var(--accent);
  font-size:9px;
  font-weight:800;
  cursor:pointer;
  transition:.18s ease;
}
.invite-btn:hover{
  background:rgba(99,215,255,.1);
  border-color:rgba(99,215,255,.32);
}
.system-message{
  display:flex;
  align-items:center;
  gap:7px;
  margin:9px 0;
  color:#697689;
  font-size:9px;
}
.system-message>span:first-child{
  color:var(--accent);
  font-size:11px;
}
.system-message time{
  margin-left:auto;
  color:#4f5b6d;
  font-size:8px;
}


/* V1.4 accounts */
.auth-panel{margin-top:8px}
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:5px;margin-bottom:18px;border:1px solid var(--stroke);border-radius:12px;background:#090e16}
.auth-tab{height:38px;border:0;border-radius:8px;background:transparent;color:#778397;font-size:10px;font-weight:800;cursor:pointer}
.auth-tab.active{background:#182231;color:var(--text);box-shadow:inset 0 0 0 1px rgba(255,255,255,.045)}
.signed-in-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:4px 0 20px;padding:12px 14px;border:1px solid var(--stroke);border-radius:12px;background:rgba(99,215,255,.035)}
.signed-in-row>div{display:flex;flex-direction:column;gap:3px}.signed-in-row span{font-size:8px;color:var(--muted)}.signed-in-row strong{font-size:12px}
.signed-in-row button{border:1px solid rgba(243,104,114,.18);border-radius:8px;background:rgba(243,104,114,.07);color:#ff8c94;padding:7px 10px;font-size:9px;font-weight:800;cursor:pointer}


/* V1.5 persistent community + channels */
.community-preview{display:flex;align-items:center;gap:13px;margin:18px 0 2px;padding:14px;border:1px solid var(--stroke);border-radius:14px;background:rgba(99,215,255,.03)}
.community-preview-icon,.community-home-icon{display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#04111c;font-weight:900}
.community-preview-icon{width:45px;height:45px;border-radius:14px}.community-preview>div:last-child{display:flex;flex-direction:column}.community-preview span{font-size:7px;letter-spacing:.12em;color:var(--accent);font-weight:900}.community-preview strong{font-size:13px;margin-top:3px}.community-preview small{font-size:9px;color:var(--muted);margin-top:2px}
.channel-list{display:flex;flex-direction:column;gap:3px}.channel-list .channel{align-items:center}.channel-list .channel>span:first-child{width:20px;text-align:center;color:#78869a}.text-channel.active,.voice-channel.active{background:#171e2a;color:#fff}
.community-home{margin:auto;text-align:center;max-width:480px}.community-home-icon{width:76px;height:76px;border-radius:23px;margin:0 auto 16px;font-size:25px}.community-home h2{margin:7px 0 6px;font-size:25px}.community-home p{margin:0;color:var(--muted);font-size:11px}
.community-home-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:24px auto 0;max-width:300px}.community-home-stats>div{padding:14px;border:1px solid var(--stroke);border-radius:13px;background:rgba(255,255,255,.02);display:flex;flex-direction:column}.community-home-stats strong{font-size:19px;color:var(--accent)}.community-home-stats span{font-size:8px;color:var(--muted);margin-top:3px}


/* V1.6 multi-community */
.community-picker-head{
  margin:18px 0 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
}
.community-picker-head>div{display:flex;flex-direction:column;gap:2px}
.community-picker-head span{font-size:7px;letter-spacing:.12em;color:var(--accent);font-weight:900}
.community-picker-head strong{font-size:13px}
.community-picker-head button{
  border:1px solid rgba(99,215,255,.2);
  background:rgba(99,215,255,.06);
  color:var(--accent);
  padding:8px 10px;
  border-radius:9px;
  font-size:9px;
  font-weight:800;
  cursor:pointer;
}

.community-picker-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height:245px;
  overflow:auto;
}
.community-picker-card{
  width:100%;
  display:grid;
  grid-template-columns:43px 1fr auto;
  align-items:center;
  gap:11px;
  text-align:left;
  padding:10px 12px;
  border:1px solid var(--stroke);
  border-radius:13px;
  background:#0c121b;
  color:var(--text);
  cursor:pointer;
  transition:.18s ease;
}
.community-picker-card:hover{
  border-color:rgba(99,215,255,.25);
  background:#101824;
  transform:translateY(-1px);
}
.community-card-icon{
  width:43px;height:43px;border-radius:13px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,#263b55,#172435);
  color:#eaf5ff;font-size:12px;font-weight:900;
}
.community-card-copy{display:flex;flex-direction:column;min-width:0}
.community-card-copy strong{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.community-card-copy span{font-size:8px;color:var(--muted);margin-top:3px;text-transform:capitalize}
.community-card-arrow{color:#607087;font-size:14px}

.empty-communities{
  padding:16px;
  border:1px dashed var(--stroke);
  border-radius:12px;
  color:var(--muted);
  text-align:center;
  font-size:10px;
}

.pending-invite-card{
  margin:4px 0 15px;
  padding:12px 14px;
  border:1px solid rgba(80,216,144,.19);
  background:rgba(80,216,144,.045);
  border-radius:12px;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.pending-invite-card>span{font-size:7px;letter-spacing:.12em;color:var(--green);font-weight:900}
.pending-invite-card strong{font-size:12px}
.pending-invite-card small{font-size:8px;color:var(--muted)}

.create-community-box{
  margin-top:12px;
  padding:13px;
  border:1px solid var(--stroke);
  background:#0b111a;
  border-radius:13px;
}
.create-community-box label{margin-top:0}
.create-community-actions{
  margin-top:10px;
  display:flex;
  justify-content:flex-end;
  gap:7px;
}
.create-community-actions button{
  border:1px solid var(--stroke);
  border-radius:8px;
  padding:8px 10px;
  font-size:9px;
  font-weight:800;
  cursor:pointer;
  background:#171f2b;
  color:#aab5c6;
}
#createCommunitySubmit{
  border-color:rgba(99,215,255,.2);
  background:rgba(99,215,255,.09);
  color:var(--accent);
}

.community-rail-list{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:9px;
  overflow-y:auto;
  overflow-x:hidden;
}
.rail-community,.rail-create{
  width:42px;height:42px;
  flex:0 0 42px;
  display:grid;place-items:center;
  border:1px solid var(--stroke);
  border-radius:14px;
  background:#141b27;
  color:#aeb9c8;
  font-size:10px;
  font-weight:900;
  cursor:pointer;
  transition:.18s ease;
}
.rail-community:hover,.rail-community.active{
  border-color:rgba(99,215,255,.28);
  background:#172536;
  color:#fff;
}
.rail-community.active{box-shadow:0 0 0 2px rgba(99,215,255,.06)}
.rail-create{
  margin-top:auto;
  color:var(--green);
  border-color:rgba(80,216,144,.18);
  background:rgba(80,216,144,.05);
  font-size:20px;
}

.modal-text-input{
  width:100%;
  height:43px;
  padding:0 11px;
  border:1px solid var(--stroke);
  border-radius:10px;
  outline:none;
  background:#0a1018;
  color:#e7edf5;
}
.modal-text-input:focus{
  border-color:rgba(99,215,255,.4);
}

@media(max-width:720px){
  .community-picker-card{grid-template-columns:40px 1fr auto}
}


/* V1.7 profile + owner/admin */
.avatar img,.participant-avatar img,.stage-avatar img,.profile-avatar-preview img{
  width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block;
}
.self-card{cursor:pointer;transition:.18s ease}
.self-card:hover{border-color:rgba(99,215,255,.18);background:#121a26}
#quickLogoutBtn{color:#ff8c94;background:rgba(243,104,114,.08)}
#quickLogoutBtn:hover{background:rgba(243,104,114,.16)}

.profile-hero{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.profile-avatar-preview{
  width:72px;height:72px;border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(135deg,#24344b,#182335);
  font-size:20px;font-weight:900;overflow:hidden;
}
.profile-hero>div:last-child{display:flex;flex-direction:column;gap:3px}
.profile-hero strong{font-size:13px}.profile-hero span{font-size:9px;color:var(--muted)}
.avatar-actions{display:flex;gap:8px}
.avatar-actions button{
  border:1px solid var(--stroke);border-radius:9px;background:#171f2b;
  color:#aeb9c8;padding:9px 11px;font-size:9px;font-weight:800;cursor:pointer
}
.profile-note{display:block;margin-top:7px;color:var(--muted);font-size:8px}
.profile-footer{justify-content:space-between}
.danger-action{
  border:1px solid rgba(243,104,114,.2);border-radius:9px;
  background:rgba(243,104,114,.08);color:#ff8c94;
  padding:9px 13px;font-size:9px;font-weight:850;cursor:pointer
}

.channel-section-head{display:flex;align-items:center;justify-content:space-between}
.channel-add{
  width:20px;height:20px;border:0;border-radius:6px;
  background:rgba(99,215,255,.06);color:var(--accent);
  cursor:pointer;font-size:14px;line-height:1
}
.channel-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:3px}
.channel-row .channel{min-width:0}
.channel-manage{
  width:26px;height:30px;border:0;border-radius:7px;background:transparent;
  color:#697689;cursor:pointer;font-size:15px
}
.channel-manage:hover{background:#171f2b;color:#d7e0ec}


/* V1.7.1 — avatar shape + crop editor */

/* Force every user avatar to a real 1:1 box before applying the circle. */
.avatar,
.participant-avatar,
.stage-avatar,
.profile-avatar-preview{
  position:relative;
  aspect-ratio:1 / 1 !important;
  border-radius:50% !important;
  overflow:hidden !important;
  padding:0 !important;
  flex:none !important;
  line-height:1 !important;
}

.avatar{
  width:34px !important;
  height:34px !important;
  min-width:34px !important;
  min-height:34px !important;
  max-width:34px !important;
  max-height:34px !important;
}

.participant-avatar{
  width:31px !important;
  height:31px !important;
  min-width:31px !important;
  min-height:31px !important;
  max-width:31px !important;
  max-height:31px !important;
}

.stage-avatar{
  width:76px !important;
  height:76px !important;
  min-width:76px !important;
  min-height:76px !important;
  max-width:76px !important;
  max-height:76px !important;
}

.profile-avatar-preview{
  width:72px !important;
  height:72px !important;
  min-width:72px !important;
  min-height:72px !important;
  max-width:72px !important;
  max-height:72px !important;
}

.avatar > img,
.participant-avatar > img,
.stage-avatar > img,
.profile-avatar-preview > img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  min-width:100% !important;
  min-height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:cover !important;
  object-position:center !important;
  border-radius:50% !important;
  display:block !important;
}

/* Never let grid/flex layout stretch avatar cells. */
.participant{align-items:center}
.self-card{align-items:center}
.stage-avatar-wrap{
  width:92px !important;
  height:92px !important;
  min-width:92px !important;
  min-height:92px !important;
}

/* Avatar cropper */
.avatar-crop-modal{width:min(560px,100%)}
.avatar-crop-body{padding:20px 22px}
.crop-help{
  margin:0 0 14px;
  color:var(--muted);
  font-size:10px;
  line-height:1.55;
}
.avatar-crop-viewport{
  width:min(420px,100%);
  aspect-ratio:1/1;
  margin:0 auto;
  position:relative;
  overflow:hidden;
  border-radius:18px;
  background:#070b11;
  border:1px solid var(--stroke);
  cursor:grab;
  touch-action:none;
  user-select:none;
}
.avatar-crop-viewport.dragging{cursor:grabbing}
#avatarCropCanvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}
.avatar-crop-shade{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(
      circle at 50% 50%,
      transparent 0 35.6%,
      rgba(2,6,10,.72) 36.3% 100%
    );
}
.avatar-crop-ring{
  position:absolute;
  left:14%;
  top:14%;
  width:72%;
  height:72%;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.9);
  box-shadow:
    0 0 0 1px rgba(99,215,255,.18),
    0 0 34px rgba(99,215,255,.08);
  pointer-events:none;
}
.crop-controls{
  display:grid;
  grid-template-columns:20px 1fr 20px;
  align-items:center;
  gap:9px;
  margin:17px auto 0;
  width:min(420px,100%);
  color:#91a0b4;
  font-size:15px;
  text-align:center;
}
.crop-controls input[type="range"]{
  width:100%;
  accent-color:var(--accent2);
}
.crop-reset-btn{
  display:block;
  margin:10px auto 0;
  border:1px solid var(--stroke);
  background:#171f2b;
  color:#aeb9c8;
  border-radius:9px;
  padding:8px 12px;
  font-size:9px;
  font-weight:800;
  cursor:pointer;
}
.crop-cancel{background:transparent}
#saveAvatarCropBtn:disabled{opacity:.55;cursor:wait}

@media(max-width:720px){
  .stage-avatar{
    width:60px !important;
    height:60px !important;
    min-width:60px !important;
    min-height:60px !important;
    max-width:60px !important;
    max-height:60px !important;
  }
  .stage-avatar-wrap{
    width:72px !important;
    height:72px !important;
    min-width:72px !important;
    min-height:72px !important;
  }
}


/* V1.8 — full text chat + community management */

/* Text channels become the main workspace, Discord-style. */
.app-shell.text-mode{
  grid-template-columns:70px 245px minmax(520px,1fr);
}
.app-shell.text-mode .stage{
  display:none;
}
.app-shell.text-mode .chat-panel{
  grid-column:3;
  position:relative;
  right:auto;
  top:auto;
  bottom:auto;
  width:auto;
  transform:none;
  border-left:0;
  background:
    radial-gradient(circle at 50% 0%,rgba(39,112,163,.055),transparent 30%),
    #090d14;
}

/* Chat header */
.chat-header{
  justify-content:space-between;
  gap:16px;
  background:rgba(9,13,20,.92);
}
.chat-title-block{display:flex;flex-direction:column;min-width:0}
.chat-header-actions{display:flex;align-items:center;gap:10px}
.chat-header-actions button{
  width:30px;height:30px;border:1px solid var(--stroke);border-radius:9px;
  background:#121925;color:#94a0b1;cursor:pointer;font-size:16px
}
.chat-header-actions button:hover{color:var(--accent);border-color:rgba(99,215,255,.2)}
.chat-message-count{font-size:8px;color:#657286;white-space:nowrap}

/* Search */
.chat-search-bar{
  display:flex;gap:8px;padding:10px 18px;border-bottom:1px solid var(--stroke);
  background:#0b1018
}
.chat-search-bar input{
  flex:1;border:1px solid var(--stroke);border-radius:9px;background:#111824;
  color:#eaf0f7;outline:none;padding:9px 11px;font-size:10px
}
.chat-search-bar button{
  width:34px;border:1px solid var(--stroke);border-radius:9px;
  background:#151d29;color:#8e9bad;cursor:pointer
}

/* Full chat message canvas */
.app-shell.text-mode .messages{
  padding:26px 34px 18px;
}
.app-shell.text-mode .chat-welcome{
  margin-top:70px;
  padding-bottom:18px;
  border-bottom:1px solid rgba(255,255,255,.045);
}
.app-shell.text-mode .welcome-icon{
  width:58px;height:58px;border-radius:18px;font-size:22px
}
.app-shell.text-mode .welcome-message h3{font-size:25px;margin-top:16px}
.app-shell.text-mode .welcome-message p{font-size:11px}

.message{
  position:relative;
  grid-template-columns:40px minmax(0,1fr) auto;
  gap:12px;
  padding:7px 10px;
  margin:2px -10px;
  border-radius:8px;
}
.message:hover{background:rgba(255,255,255,.025)}
.message .participant-avatar{
  width:40px!important;height:40px!important;
  min-width:40px!important;min-height:40px!important;
  max-width:40px!important;max-height:40px!important;
  grid-row:auto;
}
.message-main{min-width:0}
.message-head{gap:8px;margin-bottom:3px}
.message-head strong{font-size:12px}
.message-head span{font-size:8px;color:#5e697a}
.message-head em{font-size:7px;color:#536073;font-style:normal}
.message-body{
  color:#c9d2df;font-size:11px;line-height:1.55;
  word-break:break-word;white-space:normal
}
.message-body a{color:var(--accent);text-decoration:none}
.message-body a:hover{text-decoration:underline}
.message-actions{
  opacity:0;transform:translateY(-4px);
  display:flex;align-items:center;gap:3px;
  transition:.15s ease
}
.message:hover .message-actions{opacity:1;transform:none}
.message-actions button{
  width:27px;height:27px;border:1px solid var(--stroke);border-radius:7px;
  background:#151d29;color:#8996a8;cursor:pointer;font-size:12px
}
.message-actions button:hover{color:#fff;background:#1d2735}
.message-actions .danger-mini:hover{color:#ff8d95;border-color:rgba(243,104,114,.25)}

/* Composer */
.chat-form{
  margin:8px 18px 18px;
  min-height:52px;height:auto;
  align-items:flex-end;
  border-radius:14px;
  background:#171e2a
}
.chat-form textarea{
  flex:1;min-width:0;min-height:50px;max-height:140px;
  resize:none;border:0;background:transparent;color:#fff;outline:0;
  padding:15px 14px 12px;font:inherit;font-size:11px;line-height:1.45;
  overflow-y:auto
}
.chat-form button{
  width:48px;height:48px;flex:0 0 48px;margin:2px;
  border:0;border-radius:11px;background:rgba(99,215,255,.07);
  color:var(--accent);font-size:18px;cursor:pointer
}
.chat-form button:hover{background:rgba(99,215,255,.13)}

/* Community header + rail management */
.community-title-actions{display:flex!important;align-items:center;gap:7px}
.community-settings-btn{
  width:28px;height:26px;border:0;border-radius:7px;
  background:transparent;color:#6d7a8e;cursor:pointer;
  font-size:10px;font-weight:900;letter-spacing:-1px
}
.community-settings-btn:hover{background:#171f2b;color:#d8e1ee}

.rail-community-wrap{
  position:relative;width:52px;display:grid;place-items:center
}
.rail-community-manage{
  position:absolute;right:-1px;top:-5px;z-index:3;
  width:19px;height:19px;border:1px solid var(--stroke);border-radius:7px;
  background:#121a26;color:#7f8da1;font-size:7px;font-weight:900;
  cursor:pointer;opacity:0;transition:.15s
}
.rail-community-wrap:hover .rail-community-manage,
.rail-community.active + .rail-community-manage{opacity:1}
.rail-community-manage:hover{color:var(--accent);border-color:rgba(99,215,255,.25)}

/* Community settings */
.community-settings-section,
.community-danger-zone{
  margin-top:18px;padding:14px;border:1px solid var(--stroke);
  border-radius:12px;background:#0b111a;
  display:flex;align-items:center;justify-content:space-between;gap:16px
}
.community-danger-zone .community-duplicate-row{border-bottom:1px solid rgba(255,255,255,.07);padding-bottom:13px;margin-bottom:13px}
.community-danger-zone .duplicate-community-btn{border-color:rgba(99,215,255,.25);background:rgba(99,215,255,.08);color:var(--accent)}
.duplicate-community-modal{width:min(500px,calc(100vw - 28px))!important}
.duplicate-community-body{display:flex;flex-direction:column;gap:10px}
.duplicate-community-body>p{margin:0 0 5px;color:#8794a7;font-size:11px;line-height:1.6}
.duplicate-visuals-option{display:flex!important;align-items:flex-start;gap:10px;padding:12px;border:1px solid var(--stroke);border-radius:10px;background:#0d141e;cursor:pointer}
.duplicate-visuals-option input{margin-top:3px;accent-color:var(--accent)}
.duplicate-visuals-option span{display:flex;flex-direction:column;gap:3px}.duplicate-visuals-option strong{font-size:11px}.duplicate-visuals-option small{color:#748196;font-size:9px;line-height:1.45}
.duplicate-copy-list{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:12px;border-radius:10px;background:#0b111a;color:#9eabbc;font-size:10px}
.duplicate-community-footer{justify-content:flex-end;gap:8px}.duplicate-community-footer>button:first-child{min-height:34px;padding:0 13px;border:1px solid var(--stroke);border-radius:8px;background:#151e2a;color:#9da9ba;cursor:pointer}
@media(max-width:520px){.duplicate-copy-list{grid-template-columns:1fr}.duplicate-community-modal{max-height:calc(100dvh - 24px)!important}.duplicate-community-body{overflow-y:auto}}
.community-settings-section>div,
.community-danger-zone>div{display:flex;flex-direction:column;gap:3px}
.community-settings-section strong,
.community-danger-zone strong{font-size:10px}
.community-settings-section span,
.community-danger-zone span{font-size:8px;color:var(--muted);line-height:1.45}
.community-settings-section button{
  flex:0 0 auto;border:1px solid rgba(99,215,255,.2);border-radius:9px;
  background:rgba(99,215,255,.06);color:var(--accent);
  padding:9px 11px;font-size:8px;font-weight:850;cursor:pointer
}
.community-danger-zone{
  border-color:rgba(243,104,114,.16);
  background:rgba(243,104,114,.025)
}
.community-danger-zone button{
  flex:0 0 auto;border:1px solid rgba(243,104,114,.22);border-radius:9px;
  background:rgba(243,104,114,.08);color:#ff8c94;
  padding:9px 11px;font-size:8px;font-weight:850;cursor:pointer
}

/* Message edit */
.message-edit-input{
  width:100%;resize:vertical;min-height:120px;
  border:1px solid var(--stroke);border-radius:11px;
  background:#0a1018;color:#e9eff7;outline:none;
  padding:12px;font:inherit;font-size:11px;line-height:1.5
}
.message-edit-input:focus{border-color:rgba(99,215,255,.35)}

@media(max-width:1050px){
  .app-shell.text-mode{grid-template-columns:64px 220px 1fr}
  .app-shell.text-mode .chat-panel{
    display:flex;position:relative;transform:none;width:auto
  }
}

/* V1.9 */
.app-shell.text-mode{grid-template-columns:70px 245px minmax(520px,1fr)!important}
.app-shell.text-mode .stage{display:none!important}
.app-shell.text-mode .chat-panel{display:flex!important;grid-column:3!important;position:relative!important;inset:auto!important;width:auto!important;transform:none!important;border-left:0!important;background:radial-gradient(circle at 50% 0%,rgba(39,112,163,.055),transparent 30%),#090d14!important}

.chat-form{position:relative;overflow:visible!important;padding:5px!important;gap:3px;align-items:flex-end!important}
.chat-form textarea{padding:12px 8px!important}
.composer-icon-btn,.composer-text-btn,.chat-send-btn{height:40px!important;min-width:40px!important;width:40px!important;flex:0 0 40px!important;margin:0!important;border:0!important;border-radius:9px!important;background:transparent!important;color:#8d99ab!important;cursor:pointer!important}
.composer-text-btn{width:42px!important;min-width:42px!important;font-size:9px!important;font-weight:900!important}
.composer-icon-btn{font-size:16px!important}.chat-send-btn{background:rgba(99,215,255,.08)!important;color:var(--accent)!important;font-size:17px!important}
.composer-icon-btn:hover,.composer-text-btn:hover{background:rgba(255,255,255,.055)!important;color:#fff!important}.chat-send-btn:hover{background:rgba(99,215,255,.14)!important}

.composer-popover{position:fixed;z-index:95;width:320px;right:22px;bottom:82px;padding:12px;border:1px solid rgba(255,255,255,.09);border-radius:15px;background:linear-gradient(180deg,#151d29,#0f151f);box-shadow:0 24px 70px rgba(0,0,0,.5)}
.popover-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.popover-head strong{font-size:10px}.popover-head span{font-size:8px;color:var(--muted)}
.emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:4px}.emoji-grid button{aspect-ratio:1;border:0;border-radius:8px;background:transparent;font-size:20px;cursor:pointer}.emoji-grid button:hover{background:#1d2735}
#gifPicker input{width:100%;height:40px;border:1px solid var(--stroke);border-radius:9px;background:#090f17;color:#fff;outline:none;padding:0 10px;font-size:10px}
.gif-preview{margin-top:10px;max-height:200px;overflow:hidden;border-radius:10px;background:#05080d}.gif-preview img{width:100%;max-height:200px;object-fit:contain;display:block}
.gif-actions{display:flex;justify-content:flex-end;gap:7px;margin-top:10px}.gif-actions button{border:1px solid var(--stroke);border-radius:8px;background:#18212e;color:#aab5c5;padding:8px 10px;font-size:9px;font-weight:800;cursor:pointer}#sendGifBtn{border-color:rgba(99,215,255,.2);background:rgba(99,215,255,.08);color:var(--accent)}

.chat-attachment-preview{margin:0 18px 8px;padding:10px 12px;display:grid;grid-template-columns:44px minmax(0,1fr) 28px;align-items:center;gap:10px;border:1px solid var(--stroke);border-radius:12px;background:#111925}
.chat-attachment-preview>img{width:44px;height:44px;object-fit:cover;border-radius:8px}.pending-file-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:8px;background:#1a2432;font-size:18px}.pending-file-copy{min-width:0;display:flex;flex-direction:column;gap:3px}.pending-file-copy strong{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pending-file-copy span{font-size:8px;color:var(--muted)}#removePendingChatFile{width:28px;height:28px;border:0;border-radius:8px;background:rgba(243,104,114,.08);color:#ff8b93;cursor:pointer}

.gif-media{display:block;width:min(430px,100%);margin-top:7px;border-radius:12px;overflow:hidden;background:#05080d}.gif-media img{display:block;max-width:100%;max-height:360px;object-fit:contain}
.image-attachment,.video-attachment,.file-attachment{margin-top:7px}.image-attachment{width:min(520px,100%)}.image-attachment a{display:block;border-radius:12px;overflow:hidden;background:#05080d}.image-attachment img{display:block;max-width:100%;max-height:420px;object-fit:contain}.image-attachment>span,.video-attachment>span{display:block;margin-top:5px;color:#657286;font-size:8px}
.video-attachment{width:min(620px,100%)}.video-attachment video{display:block;max-width:100%;max-height:420px;border-radius:12px;background:#000}
.file-attachment{width:min(430px,100%);display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--stroke);border-radius:11px;background:#111925;color:#d9e1ec;text-decoration:none}.file-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:9px;background:#192536}.file-attachment>span:nth-child(2){min-width:0;display:flex;flex-direction:column;gap:2px}.file-attachment strong{font-size:10px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.file-attachment small{font-size:8px;color:var(--muted)}.file-attachment b{font-size:8px;color:var(--accent)}

.reaction-row{min-height:24px;margin-top:6px;display:flex;flex-wrap:wrap;gap:4px}.reaction-pill,.reaction-add{height:24px;border:1px solid var(--stroke);border-radius:7px;background:#121a25;color:#aeb9c8;cursor:pointer;display:flex;align-items:center;gap:5px;padding:0 7px;font-size:11px}.reaction-pill strong{font-size:8px;color:#7f8b9d}.reaction-pill.mine{border-color:rgba(99,215,255,.3);background:rgba(99,215,255,.08)}.reaction-add{opacity:0;color:#738197;font-size:9px}.message:hover .reaction-add,.reaction-row:has(.reaction-pill) .reaction-add{opacity:1}.reaction-pill:hover,.reaction-add:hover{border-color:rgba(99,215,255,.22);color:#fff}
@media(max-width:720px){.composer-popover{left:12px!important;right:12px!important;width:auto!important}.emoji-grid{grid-template-columns:repeat(6,1fr)}}


/* V1.9.1 — viewport-safe chat + passive voice presence */

/* Keep the entire application inside the actual browser viewport.
   This prevents the chat composer from falling below the visible page. */
html,body{
  width:100%;
  height:100%;
  min-height:0!important;
  overflow:hidden!important;
}

.app-shell{
  width:100%;
  height:100vh;
  height:100dvh;
  min-height:0!important;
  overflow:hidden!important;
}

.server-rail,
.channel-panel,
.stage,
.chat-panel{
  min-height:0!important;
  max-height:100%!important;
  overflow:hidden;
}

/* Sidebar itself stays fixed; only participant/presence sections may scroll. */
.channel-panel{
  height:100%;
}

.channel-list{
  flex:0 0 auto;
}

/* Full-chat column must be a real bounded flex column. */
.app-shell.text-mode .chat-panel,
.chat-panel{
  height:100%!important;
  min-height:0!important;
  max-height:100%!important;
  overflow:hidden!important;
  display:flex;
  flex-direction:column;
}

.chat-header{
  flex:0 0 64px!important;
  min-height:64px;
}

.chat-search-bar,
.chat-attachment-preview,
.chat-form{
  flex:0 0 auto!important;
}

.messages{
  flex:1 1 auto!important;
  min-height:0!important;
  height:auto!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}

.chat-form{
  margin-bottom:14px!important;
}

/* Make the last message reachable above the composer. */
.messages::after{
  content:"";
  display:block;
  height:8px;
}

/* Discord-style visible users nested under each voice channel. */
.voice-channel-block{
  display:flex;
  flex-direction:column;
  min-width:0;
}

.voice-channel-presence{
  display:flex;
  flex-direction:column;
  gap:1px;
  padding:1px 4px 5px 36px;
}

.voice-channel-presence.empty{
  display:none;
}

.voice-presence-user{
  min-width:0;
  height:30px;
  padding:3px 6px;
  display:grid;
  grid-template-columns:24px minmax(0,1fr) 6px;
  align-items:center;
  gap:7px;
  border-radius:7px;
  color:#98a5b7;
  font-size:9px;
}

.voice-presence-user:hover{
  background:rgba(255,255,255,.028);
  color:#cbd4e0;
}

.voice-presence-avatar{
  width:24px;
  height:24px;
  min-width:24px;
  min-height:24px;
  border-radius:50%;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#24344b,#182335);
  color:#eaf4ff;
  font-size:8px;
  font-weight:850;
}

.voice-presence-avatar img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  border-radius:50%;
}

.voice-presence-user>span{
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.voice-presence-live{
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 8px rgba(80,216,144,.25);
}

/* The MEMBERS list remains available, but it cannot push the self-card offscreen. */
.participants{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
}

@supports not (height:100dvh){
  .app-shell{height:100vh}
}


/* V1.10 — Discord-style chat experience */

/* Unread badges */
.channel.text-channel{
  display:grid!important;
  grid-template-columns:20px minmax(0,1fr) auto;
  align-items:center;
}
.channel-unread-badge{
  min-width:18px;
  height:18px;
  padding:0 5px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:var(--danger);
  color:#fff;
  font-size:7px;
  font-weight:900;
  box-shadow:0 3px 12px rgba(243,104,114,.18);
}
.rail-community{position:relative}
.rail-unread-badge{
  position:absolute;
  right:-5px;
  bottom:-4px;
  min-width:17px;
  height:17px;
  padding:0 4px;
  display:grid;
  place-items:center;
  border:2px solid #090d14;
  border-radius:999px;
  background:var(--danger);
  color:white;
  font-size:6px;
  font-weight:950;
}
.community-picker-unread{
  min-width:22px;
  height:22px;
  padding:0 6px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:rgba(243,104,114,.13);
  color:#ff8c94;
  border:1px solid rgba(243,104,114,.2);
  font-size:8px;
  font-weight:900;
}

/* Reply composer preview */
.reply-preview{
  margin:0 18px 6px;
  min-height:45px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:8px 10px 8px 12px;
  border-left:2px solid var(--accent);
  border-radius:9px;
  background:#111925;
  border-top:1px solid var(--stroke);
  border-right:1px solid var(--stroke);
  border-bottom:1px solid var(--stroke);
}
.reply-preview>div{
  min-width:0;
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:2px 7px;
}
.reply-preview span{
  color:var(--accent);
  font-size:6px;
  font-weight:950;
  letter-spacing:.12em;
}
.reply-preview strong{font-size:9px}
.reply-preview small{
  grid-column:1/-1;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  color:var(--muted);
  font-size:8px;
}
.reply-preview button{
  flex:0 0 28px;
  width:28px;
  height:28px;
  border:0;
  border-radius:8px;
  background:#1a2330;
  color:#8190a3;
  cursor:pointer;
}

/* Reply shown above message */
.message-reply-context{
  max-width:680px;
  border:0;
  background:transparent;
  color:#6f7d91;
  padding:0 0 5px;
  display:flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
  text-align:left;
}
.message-reply-context:hover{color:#aeb9c8}
.message-reply-context span{color:#5e6b7d}
.message-reply-context strong{
  flex:0 0 auto;
  max-width:160px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:8px;
  color:#95a3b6;
}
.message-reply-context small{
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:8px;
}

/* Mentions */
.mention-token{
  display:inline-block;
  padding:0 3px;
  margin:0 1px;
  border-radius:4px;
  background:rgba(99,215,255,.12);
  color:#83e2ff;
  font-weight:750;
}
.mentioned-message{
  background:linear-gradient(90deg,rgba(99,215,255,.095),rgba(99,215,255,.018))!important;
  box-shadow:inset 2px 0 0 rgba(99,215,255,.65);
}

/* Group consecutive messages by same sender */
.grouped-message{
  padding-top:2px;
  padding-bottom:2px;
}
.grouped-message .participant-avatar{
  visibility:hidden;
}
.grouped-message .message-main{
  position:relative;
}
.grouped-time{
  position:static;
  width:auto;
  margin:1px 0 3px;
  color:#5e697a;
  font-size:8px;
  text-align:left;
  opacity:1;
}
.grouped-message:hover .grouped-time{color:#8190a5}

/* Typing */
.typing-indicator{
  flex:0 0 auto;
  min-height:22px;
  margin:-1px 21px 2px;
  color:#778498;
  font-size:8px;
  display:flex;
  align-items:center;
  gap:6px;
}
.typing-dots{
  display:inline-flex;
  gap:2px;
  align-items:center;
}
.typing-dots i{
  width:3px;
  height:3px;
  border-radius:50%;
  background:#79879b;
  animation:typingBounce 1s infinite ease-in-out;
}
.typing-dots i:nth-child(2){animation-delay:.13s}
.typing-dots i:nth-child(3){animation-delay:.26s}
@keyframes typingBounce{
  0%,60%,100%{transform:translateY(0);opacity:.45}
  30%{transform:translateY(-3px);opacity:1}
}

/* Drag & drop upload */
.chat-panel{position:relative}
.chat-drop-overlay{
  position:absolute;
  inset:64px 12px 12px;
  z-index:80;
  border:2px dashed rgba(99,215,255,.5);
  border-radius:18px;
  background:rgba(7,15,25,.92);
  backdrop-filter:blur(8px);
  display:grid;
  place-items:center;
}
.chat-drop-overlay>div{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  color:#b9c7d7;
}
.chat-drop-overlay>div>span{
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:rgba(99,215,255,.1);
  color:var(--accent);
  font-size:28px;
}
.chat-drop-overlay strong{font-size:14px}
.chat-drop-overlay small{font-size:9px;color:var(--muted)}

/* Highlight reply target when jumping */
.message-flash{
  animation:messageFlash 1.45s ease-out;
}
@keyframes messageFlash{
  0%,35%{background:rgba(99,215,255,.13)}
  100%{background:transparent}
}

/* A little more room for richer chat controls */
.chat-form,
.chat-attachment-preview,
.reply-preview,
.typing-indicator{
  max-width:calc(100% - 36px);
}

@media(max-width:720px){
  .reply-preview{margin-left:10px;margin-right:10px}
  .typing-indicator{margin-left:12px;margin-right:12px}
  .chat-drop-overlay{inset:64px 8px 8px}
}


/* V1.11 — reply attention, mention autocomplete, members/roles/moderation */

/* Discord-like attention row: mention OR someone replies directly to your message. */
.reply-to-me-message,
.mentioned-message{
  background:linear-gradient(90deg,rgba(99,215,255,.085),rgba(99,215,255,.018))!important;
  box-shadow:inset 2px 0 0 rgba(99,215,255,.62)!important;
}
.reply-to-me-message:hover,
.mentioned-message:hover{
  background:linear-gradient(90deg,rgba(99,215,255,.115),rgba(99,215,255,.03))!important;
}

/* Mention autocomplete */
.mention-picker{
  position:absolute;
  left:18px;
  bottom:76px;
  z-index:96;
  width:min(420px,calc(100% - 36px));
  max-height:330px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.09);
  border-radius:14px;
  background:linear-gradient(180deg,#151d29,#0e141e);
  box-shadow:0 24px 70px rgba(0,0,0,.5);
}
.mention-picker-head{
  height:38px;
  padding:0 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--stroke);
}
.mention-picker-head strong{
  color:#aeb9c8;
  font-size:8px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.mention-picker-head span{font-size:7px;color:var(--muted)}
.mention-picker-list{
  max-height:290px;
  overflow-y:auto;
  padding:6px;
}
.mention-option{
  width:100%;
  min-height:48px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:#dce5ef;
  padding:6px 8px;
  display:grid;
  grid-template-columns:34px minmax(0,1fr) auto;
  align-items:center;
  gap:9px;
  text-align:left;
  cursor:pointer;
}
.mention-option:hover,
.mention-option.active{
  background:#1b2431;
}
.mention-avatar{
  width:34px;
  height:34px;
  border-radius:50%;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:#202c3c;
  font-size:9px;
  font-weight:900;
}
.mention-avatar img{
  width:100%;height:100%;object-fit:cover;display:block;border-radius:50%;
}
.mention-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.mention-copy strong{
  font-size:10px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.mention-copy span{
  font-size:8px;
  color:#748196;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.mention-option kbd{
  border:1px solid var(--stroke);
  border-radius:5px;
  background:#0d131d;
  color:#78869a;
  padding:3px 5px;
  font:700 6px/1 system-ui;
}

/* Community members visible even while not connected to voice. */
.community-member-sidebar{
  min-width:0;
  min-height:40px;
  display:grid;
  grid-template-columns:31px minmax(0,1fr) 7px;
  align-items:center;
  gap:9px;
  padding:5px 7px;
  border-radius:9px;
  color:#93a0b3;
}
.community-member-sidebar:hover{
  background:rgba(255,255,255,.025);
  color:#d5deea;
}
.community-member-sidebar-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.community-member-sidebar-copy strong{
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:10px;
}
.community-member-sidebar-copy span{
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  color:#657286;
  font-size:7px;
  text-transform:capitalize;
}
.community-member-sidebar.online .community-member-sidebar-copy span{
  color:var(--green);
}
.member-online-dot,
.member-offline-dot{
  width:6px;
  height:6px;
  border-radius:50%;
}
.member-online-dot{background:var(--green);box-shadow:0 0 8px rgba(80,216,144,.25)}
.member-offline-dot{background:#303b4b}

/* Community settings tabs */
.community-settings-modal{width:min(720px,100%)}
.community-settings-tabs{
  min-height:46px;
  padding:7px 12px;
  display:flex;
  align-items:center;
  gap:5px;
  border-bottom:1px solid var(--stroke);
  background:#0e141e;
}
.community-settings-tab{
  border:0;
  border-radius:8px;
  background:transparent;
  color:#778498;
  padding:8px 12px;
  font-size:9px;
  font-weight:800;
  cursor:pointer;
}
.community-settings-tab:hover{background:#151d29;color:#c8d1dd}
.community-settings-tab.active{
  background:rgba(99,215,255,.08);
  color:var(--accent);
}
.community-settings-pane{
  min-height:300px;
  max-height:520px;
  overflow-y:auto;
}
.community-settings-error{
  margin:0;
  padding:0 22px;
}
.member-management-head{
  margin-bottom:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.member-management-head>div{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.member-management-head strong{font-size:11px}
.member-management-head span{font-size:8px;color:var(--muted)}
.member-management-head input{
  width:220px;
  height:34px;
  border:1px solid var(--stroke);
  border-radius:9px;
  background:#0a1018;
  color:#e8eef6;
  outline:none;
  padding:0 10px;
  font-size:9px;
}
.community-members-list{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.managed-member{
  min-height:56px;
  display:grid;
  grid-template-columns:38px minmax(0,1fr) auto auto;
  align-items:center;
  gap:10px;
  padding:8px 9px;
  border:1px solid transparent;
  border-radius:10px;
}
.managed-member:hover{
  border-color:var(--stroke);
  background:#111925;
}
.managed-member-avatar{
  width:38px;
  height:38px;
  border-radius:50%;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:#202c3c;
  font-size:9px;
  font-weight:900;
}
.managed-member-avatar img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  border-radius:50%;
}
.managed-member-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.managed-member-copy strong{
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:10px;
}
.managed-member-copy span{
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:8px;
  color:var(--muted);
}
.member-role-pill{
  min-width:52px;
  height:22px;
  padding:0 7px;
  display:grid;
  place-items:center;
  border:1px solid var(--stroke);
  border-radius:999px;
  background:#111925;
  color:#8d9aad;
  font-size:7px;
  font-weight:900;
  text-transform:uppercase;
}
.role-owner{color:#ffd479;border-color:rgba(255,212,121,.18);background:rgba(255,212,121,.05)}
.role-admin{color:var(--accent);border-color:rgba(99,215,255,.18);background:rgba(99,215,255,.05)}
.managed-member-actions{
  display:flex;
  align-items:center;
  gap:5px;
}
.managed-member-actions select,
.managed-member-actions button{
  height:30px;
  border:1px solid var(--stroke);
  border-radius:8px;
  background:#171f2b;
  color:#a9b5c5;
  padding:0 8px;
  font-size:8px;
  font-weight:750;
}
.managed-member-actions button{cursor:pointer}
.managed-member-actions button:hover{color:#fff;background:#202a39}
.managed-member-actions .danger-member-action{
  color:#ff8c94;
  border-color:rgba(243,104,114,.18);
  background:rgba(243,104,114,.055);
}
.managed-member-actions .danger-member-action:hover{
  background:rgba(243,104,114,.12);
}
.member-list-empty{
  padding:30px 12px;
  text-align:center;
  color:var(--muted);
  font-size:9px;
}

/* Keep settings footer stable under tab content. */
.community-settings-modal .settings-footer{
  background:#0e141e;
}

@media(max-width:720px){
  .mention-picker{left:10px;bottom:74px;width:calc(100% - 20px)}
  .managed-member{
    grid-template-columns:38px minmax(0,1fr) auto;
  }
  .managed-member-actions{
    grid-column:2/-1;
    justify-content:flex-end;
  }
  .member-management-head{
    align-items:stretch;
    flex-direction:column;
  }
  .member-management-head input{width:100%}
}


/* V1.12 — Discord-style right member panel + live roles */

/* Text workspace: server rail | channels | chat | members */
.app-shell.text-mode{
  grid-template-columns:70px 245px minmax(520px,1fr) 260px!important;
}
.app-shell.text-mode .chat-panel{
  grid-column:3!important;
}
.app-shell.text-mode .member-panel{
  grid-column:4!important;
  display:flex!important;
}

/* Do not duplicate the member roster under the channel list anymore. */
.legacy-members-block{
  display:none!important;
}

/* Right member panel */
.member-panel{
  display:none;
  min-width:0;
  min-height:0;
  height:100%;
  flex-direction:column;
  overflow:hidden;
  background:#0d121b;
  border-left:1px solid var(--stroke);
}
.member-panel-header{
  flex:0 0 64px;
  min-height:64px;
  padding:0 14px 0 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--stroke);
}
.member-panel-header>div{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.member-panel-header strong{
  font-size:11px;
}
.member-panel-header span{
  font-size:8px;
  color:var(--muted);
}
.member-panel-header button{
  width:30px;
  height:30px;
  border:1px solid var(--stroke);
  border-radius:9px;
  background:#121925;
  color:#8794a6;
  cursor:pointer;
  font-size:15px;
}
.member-panel-header button:hover{
  color:var(--accent);
  border-color:rgba(99,215,255,.2);
}
.member-panel-search{
  flex:0 0 auto;
  padding:9px 10px;
  border-bottom:1px solid var(--stroke);
}
.member-panel-search input{
  width:100%;
  height:34px;
  border:1px solid var(--stroke);
  border-radius:8px;
  background:#090f17;
  color:#e8eef6;
  outline:none;
  padding:0 10px;
  font-size:9px;
}
.member-panel-list{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding:10px 8px 16px;
}
.member-role-group{
  margin-bottom:14px;
}
.member-role-heading{
  padding:5px 8px 6px;
  color:#68768a;
  font-size:7px;
  font-weight:900;
  letter-spacing:.09em;
}
.right-member{
  width:100%;
  min-width:0;
  min-height:42px;
  display:grid;
  grid-template-columns:32px minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  padding:5px 7px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#aab5c5;
  text-align:left;
  cursor:pointer;
}
.right-member:hover{
  background:rgba(255,255,255,.035);
  color:#e6edf6;
}
.right-member.offline{
  opacity:.46;
}
.right-member.offline:hover{
  opacity:.72;
}
.right-member-avatar{
  position:relative;
  width:32px;
  height:32px;
  border-radius:50%;
  overflow:visible;
  display:grid;
  place-items:center;
  background:#202c3c;
  font-size:9px;
  font-weight:900;
}
.right-member-avatar>img{
  width:32px;
  height:32px;
  display:block;
  object-fit:cover;
  border-radius:50%;
}
.right-member-online,
.right-member-offline{
  position:absolute;
  right:-1px;
  bottom:-1px;
  width:10px;
  height:10px;
  border:2px solid #0d121b;
  border-radius:50%;
}
.right-member-online{
  background:var(--green);
}
.right-member-offline{
  background:#465164;
}
.right-member-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.right-member-copy strong{
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:9px;
  font-weight:800;
}
.right-member-copy span{
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  color:#657286;
  font-size:7px;
}
.right-member.online .right-member-copy span{
  color:#7e8ca0;
}
.right-role-badge{
  max-width:54px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  padding:3px 5px;
  border:1px solid var(--stroke);
  border-radius:999px;
  color:#8795a8;
  font-size:6px;
  font-weight:900;
  text-transform:uppercase;
}
.right-role-badge.role-owner{
  color:#ffd479;
  border-color:rgba(255,212,121,.18);
  background:rgba(255,212,121,.045);
}
.right-role-badge.role-admin{
  color:var(--accent);
  border-color:rgba(99,215,255,.18);
  background:rgba(99,215,255,.045);
}
.right-members-empty{
  padding:26px 10px;
  text-align:center;
  color:var(--muted);
  font-size:9px;
}

/* Mention and reply recipient attention: stronger but still subtle. */
.mentioned-message,
.reply-to-me-message{
  background:linear-gradient(
    90deg,
    rgba(99,215,255,.105),
    rgba(99,215,255,.025) 55%,
    transparent
  )!important;
  box-shadow:inset 2px 0 0 rgba(99,215,255,.78)!important;
}
.mentioned-message .mention-token{
  background:rgba(99,215,255,.2)!important;
  color:#a2ebff!important;
}

/* Keep the member panel hidden while the voice stage is the primary workspace. */
.app-shell:not(.text-mode) .member-panel{
  display:none!important;
}

@media(max-width:1180px){
  .app-shell.text-mode{
    grid-template-columns:64px 220px minmax(430px,1fr) 225px!important;
  }
}

@media(max-width:900px){
  .app-shell.text-mode{
    grid-template-columns:64px 220px minmax(400px,1fr)!important;
  }
  .app-shell.text-mode .member-panel{
    display:none!important;
  }
}


/* V1.13 — polished scrolling, share quality, customization, persistent voice */

/* Slim Discord-style scrollbars: transparent track, only a small dark thumb. */
.messages,
.member-panel-list,
.community-rail-list,
.community-picker-list,
.community-members-list,
.channel-panel,
.participants,
.stage-content,
.settings-body,
.avatar-crop-body{
  scrollbar-width:thin;
  scrollbar-color:rgba(108,123,145,.42) transparent;
}

.messages::-webkit-scrollbar,
.member-panel-list::-webkit-scrollbar,
.community-rail-list::-webkit-scrollbar,
.community-picker-list::-webkit-scrollbar,
.community-members-list::-webkit-scrollbar,
.channel-panel::-webkit-scrollbar,
.participants::-webkit-scrollbar,
.stage-content::-webkit-scrollbar,
.settings-body::-webkit-scrollbar,
.avatar-crop-body::-webkit-scrollbar{
  width:6px;
  height:6px;
}

.messages::-webkit-scrollbar-track,
.member-panel-list::-webkit-scrollbar-track,
.community-rail-list::-webkit-scrollbar-track,
.community-picker-list::-webkit-scrollbar-track,
.community-members-list::-webkit-scrollbar-track,
.channel-panel::-webkit-scrollbar-track,
.participants::-webkit-scrollbar-track,
.stage-content::-webkit-scrollbar-track,
.settings-body::-webkit-scrollbar-track,
.avatar-crop-body::-webkit-scrollbar-track{
  background:transparent;
}

.messages::-webkit-scrollbar-thumb,
.member-panel-list::-webkit-scrollbar-thumb,
.community-rail-list::-webkit-scrollbar-thumb,
.community-picker-list::-webkit-scrollbar-thumb,
.community-members-list::-webkit-scrollbar-thumb,
.channel-panel::-webkit-scrollbar-thumb,
.participants::-webkit-scrollbar-thumb,
.stage-content::-webkit-scrollbar-thumb,
.settings-body::-webkit-scrollbar-thumb,
.avatar-crop-body::-webkit-scrollbar-thumb{
  background:rgba(108,123,145,.34);
  border-radius:999px;
  border:1px solid transparent;
  background-clip:padding-box;
}

.messages:hover::-webkit-scrollbar-thumb,
.member-panel-list:hover::-webkit-scrollbar-thumb,
.community-members-list:hover::-webkit-scrollbar-thumb,
.channel-panel:hover::-webkit-scrollbar-thumb{
  background:rgba(124,141,165,.55);
  background-clip:padding-box;
}

::-webkit-scrollbar-button{
  width:0!important;
  height:0!important;
  display:none!important;
}
::-webkit-scrollbar-corner{background:transparent}

/* Community icons in rails/cards */
.rail-community img,
.community-card-icon img,
.community-icon-preview img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  border-radius:inherit;
}
.rail-community{
  overflow:hidden;
}
.community-card-icon{
  overflow:hidden;
}

/* Text-chat Invite button must fit despite generic header button dimensions. */
.chat-header-actions .chat-invite-btn{
  width:auto!important;
  min-width:52px;
  padding:0 10px;
  color:var(--accent);
  font-size:8px;
  font-weight:850;
}

/* Bottom self-card action is VOICE DISCONNECT, not account logout. */
#quickLogoutBtn.self-disconnect-btn{
  color:#647286;
  background:rgba(255,255,255,.035);
  transition:.16s ease;
}
#quickLogoutBtn.self-disconnect-btn.connected{
  color:#ff8d95;
  background:rgba(243,104,114,.09);
}
#quickLogoutBtn.self-disconnect-btn.connected:hover{
  background:rgba(243,104,114,.17);
}
#quickLogoutBtn.self-disconnect-btn:disabled{
  opacity:.3;
  cursor:not-allowed;
}

/* Community customization */
.community-settings-modal{
  width:min(620px,100%)!important;
}
.community-identity-editor{
  display:grid;
  grid-template-columns:72px minmax(0,1fr);
  gap:14px;
  align-items:center;
  margin-bottom:20px;
  padding:14px;
  border:1px solid var(--stroke);
  border-radius:13px;
  background:#0b111a;
}
.community-icon-preview{
  width:72px;
  height:72px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:22px;
  background:linear-gradient(135deg,var(--accent),#2a9cff);
  color:#04111c;
  font-size:20px;
  font-weight:950;
}
.community-identity-editor>div:last-child{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
}
.community-identity-editor strong{font-size:11px}
.community-identity-editor span{font-size:8px;color:var(--muted)}
.community-icon-actions{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:5px;
}
.community-icon-actions button{
  border:1px solid var(--stroke);
  border-radius:8px;
  background:#171f2b;
  color:#aeb9c8;
  padding:7px 9px;
  font-size:8px;
  font-weight:800;
  cursor:pointer;
}
.community-icon-actions button:hover{
  border-color:rgba(99,215,255,.22);
  color:#fff;
}
.modal-textarea{
  width:100%;
  min-height:78px;
  resize:vertical;
  margin-bottom:16px;
  padding:10px 11px;
  border:1px solid var(--stroke);
  border-radius:10px;
  outline:none;
  background:#0a1018;
  color:#e7edf5;
  font:inherit;
  font-size:10px;
  line-height:1.45;
}
.modal-textarea:focus{border-color:rgba(99,215,255,.4)}
.community-color-row{
  display:grid;
  grid-template-columns:46px auto 1fr;
  gap:10px;
  align-items:center;
  margin-bottom:16px;
}
.community-color-row input[type="color"]{
  width:46px;
  height:36px;
  padding:2px;
  border:1px solid var(--stroke);
  border-radius:9px;
  background:#0a1018;
  cursor:pointer;
}
.community-color-row>span{
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  color:#9ca9bb;
  font-size:9px;
}
.community-accent-preview{
  height:7px;
  border-radius:999px;
  box-shadow:0 0 16px color-mix(in srgb,var(--accent) 28%,transparent);
}

/* Screen share is a main-stage feature, not a tiny card. */
.screen-stage{
  width:100%!important;
  max-width:1400px!important;
  min-height:0;
  margin:auto!important;
}
.screen-head{
  min-height:42px;
  display:flex!important;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:0 2px 8px!important;
}
.screen-head>div:first-child{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.screen-head>div:first-child strong{
  color:#dce5f0;
  font-size:10px;
}
.screen-head>div:first-child span{
  color:var(--muted);
  font-size:8px;
}
.screen-head-actions{
  display:flex;
  align-items:center;
  gap:8px;
}
.screen-head-actions>span{
  color:#8492a5;
  font-size:8px;
  border:1px solid var(--stroke);
  border-radius:999px;
  padding:5px 8px;
  background:rgba(255,255,255,.02);
}
.screen-head-actions button{
  height:29px;
  padding:0 10px;
  border:1px solid rgba(99,215,255,.18);
  border-radius:8px;
  background:rgba(99,215,255,.055);
  color:var(--accent);
  font-size:8px;
  font-weight:850;
  cursor:pointer;
}
.screen-video-wrap{
  width:100%;
  aspect-ratio:16/9;
  border-radius:16px!important;
  background:#020406!important;
  border:1px solid rgba(255,255,255,.09)!important;
  box-shadow:0 22px 70px rgba(0,0,0,.38)!important;
}
.screen-video-wrap video{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  image-rendering:auto;
}
.screen-stage:fullscreen{
  padding:18px;
  background:#020406;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.screen-stage:fullscreen .screen-video-wrap{
  flex:1;
  max-height:calc(100vh - 60px);
  border:0!important;
  border-radius:0!important;
}
.screen-stage:fullscreen .screen-head{
  flex:0 0 42px;
}

.screen-share-picker{display:flex;gap:7px;overflow-x:auto;padding:0 2px 9px}
.screen-share-picker button{flex:0 0 auto;display:flex;align-items:center;gap:6px;min-height:30px;padding:0 10px;border:1px solid var(--stroke);border-radius:9px;background:#111925;color:#8f9caf;font-size:8px;font-weight:800;cursor:pointer}
.screen-share-picker button:hover,.screen-share-picker button.active{border-color:rgba(99,215,255,.36);background:rgba(99,215,255,.09);color:var(--accent)}
.mini-voice-dock:not(.hidden){cursor:pointer}
.mini-voice-dock:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#quickLogoutBtn{display:none!important}

.return-from-afk{
  width:calc(100% - 20px);margin:7px 10px 0;padding:9px 11px;border:1px solid rgba(99,215,255,.22);
  border-radius:9px;background:rgba(99,215,255,.07);color:var(--accent);font-size:8px;font-weight:900;cursor:pointer
}
.return-from-afk:hover{background:rgba(99,215,255,.13);border-color:rgba(99,215,255,.38)}
.sound-volume-card{display:flex;flex-direction:column;gap:12px}.sound-volume-head{display:flex;align-items:center;justify-content:space-between;gap:16px}.sound-volume-head>div{display:flex;flex-direction:column;gap:3px}.sound-volume-head strong{font-size:11px}.sound-volume-head span{font-size:9px;color:var(--muted)}.sound-volume-head b{font-size:10px;color:var(--accent);font-variant-numeric:tabular-nums}.sound-volume-card input[type="range"]{width:100%;accent-color:var(--accent)}.sound-test-btn{align-self:flex-start;min-height:34px}.voice-sound-volume{margin:10px 0;padding:14px;border:1px solid var(--stroke);border-radius:12px;background:rgba(255,255,255,.018)}
.afk-pill{display:inline-flex;align-items:center;padding:2px 6px;border-radius:999px;background:rgba(124,108,255,.13);color:#b9afff;font-size:7px;font-weight:900}
.afk-warning{position:fixed;left:50%;bottom:24px;z-index:500;transform:translateX(-50%);display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:11px;align-items:center;width:min(460px,calc(100vw - 24px));padding:12px 13px;border:1px solid rgba(99,215,255,.28);border-radius:13px;background:#0d1622;box-shadow:0 18px 60px rgba(0,0,0,.62)}
.afk-warning-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:rgba(124,108,255,.13);font-size:16px}
.afk-warning>div{min-width:0;display:flex;flex-direction:column;gap:3px}.afk-warning strong{font-size:10px;color:#f4f7fb}.afk-warning small{font-size:8px;color:#8391a6}.afk-warning button{min-height:32px;padding:0 12px;border:1px solid rgba(99,215,255,.26);border-radius:8px;background:rgba(99,215,255,.09);color:var(--accent);font-size:8px;font-weight:900;cursor:pointer}
@media(max-width:560px){.afk-warning{grid-template-columns:30px 1fr}.afk-warning button{grid-column:1/-1}.return-from-afk{font-size:10px}}

/* Screen-share quality dialog */
.screen-share-modal{
  width:min(520px,100%);
}
.share-quality-hero{
  display:grid;
  grid-template-columns:54px 1fr;
  align-items:center;
  gap:12px;
  margin-bottom:20px;
  padding:13px;
  border:1px solid rgba(99,215,255,.13);
  border-radius:13px;
  background:rgba(99,215,255,.035);
}
.share-quality-hero>span{
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  border-radius:15px;
  background:rgba(99,215,255,.1);
  color:var(--accent);
  font-size:13px;
  font-weight:950;
}
.share-quality-hero strong{font-size:11px}
.share-quality-hero p{
  margin:4px 0 0;
  color:var(--muted);
  font-size:8px;
  line-height:1.5;
}
.share-bandwidth-note{
  margin-top:4px;
  padding:12px;
  border:1px solid var(--stroke);
  border-radius:11px;
  background:#0b111a;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.share-bandwidth-note strong{
  color:var(--accent);
  font-size:10px;
}
.share-bandwidth-note span{
  color:var(--muted);
  font-size:8px;
  line-height:1.5;
}

/* Community-specific accent is inherited by the room shell. */
#roomView{
  --community-accent:var(--accent);
}
#roomView .status-dot,
#roomView .voice-presence-live,
#roomView .right-member-online{
  box-shadow:0 0 9px color-mix(in srgb,var(--community-accent) 25%,transparent);
}

/* Slightly cleaner message canvas */
.app-shell.text-mode .messages{
  scrollbar-gutter:auto!important;
  padding-right:28px!important;
}

@media(max-width:720px){
  .screen-head{align-items:flex-start;flex-direction:column}
  .screen-head-actions{width:100%;justify-content:space-between}
  .community-identity-editor{grid-template-columns:58px minmax(0,1fr)}
  .community-icon-preview{width:58px;height:58px;border-radius:18px}
}


/* V1.14 SAFE — Mini Voice Dock + PTT + member local audio */

/* Leave room for mini voice dock without moving the channel sections. */
.mini-voice-dock{
  flex:0 0 auto;
  margin-top:auto;
  margin-bottom:8px;
  padding:10px;
  border:1px solid rgba(80,216,144,.16);
  border-radius:12px;
  background:
    radial-gradient(circle at 0 0,rgba(80,216,144,.06),transparent 55%),
    #101722;
  box-shadow:0 12px 30px rgba(0,0,0,.16);
}
.mini-voice-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
  margin-bottom:8px;
}
.mini-voice-copy span{
  color:var(--green);
  font-size:6px;
  font-weight:950;
  letter-spacing:.11em;
}
.mini-voice-copy strong{
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:10px;
}
.mini-voice-copy small{
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  color:#687587;
  font-size:7px;
}
.mini-voice-actions{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:5px;
}
.mini-voice-actions button{
  height:30px;
  border:1px solid var(--stroke);
  border-radius:8px;
  background:#171f2b;
  color:#93a0b2;
  cursor:pointer;
  font-size:11px;
}
.mini-voice-actions button:hover{
  color:#fff;
  background:#1d2735;
}
.mini-voice-actions button.active{
  color:var(--accent);
  border-color:rgba(99,215,255,.18);
  background:rgba(99,215,255,.08);
}
.mini-voice-actions button.muted,
.mini-voice-actions button.danger{
  color:#ff8992;
}
.mini-voice-actions button.danger{
  background:rgba(243,104,114,.075);
}

/* Push to talk settings */
.voice-input-mode{
  margin:12px 0;
  padding:13px;
  border-top:1px solid rgba(255,255,255,.055);
}
.voice-input-mode>div:first-child{
  display:flex;
  flex-direction:column;
  gap:3px;
  margin-bottom:10px;
}
.voice-input-mode strong{font-size:11px}
.voice-input-mode span{font-size:9px;color:var(--muted);line-height:1.45}
.voice-input-mode select{
  margin-bottom:8px!important;
}
.ptt-key-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 0 0;
}
.ptt-key-row button{
  min-width:104px;
  height:34px;
  border:1px solid rgba(99,215,255,.17);
  border-radius:8px;
  background:rgba(99,215,255,.06);
  color:var(--accent);
  font-size:9px;
  font-weight:850;
  cursor:pointer;
}
.ptt-key-row button.listening{
  color:#fff;
  border-color:rgba(80,216,144,.35);
  background:rgba(80,216,144,.08);
}

/* Members are clickable. */
.right-member,
.voice-presence-user,
.stage-participant[data-stage-username]{
  cursor:pointer;
}

/* Member profile modal */
.member-profile-modal{
  width:min(500px,100%);
}
.member-profile-hero{
  display:grid;
  grid-template-columns:76px minmax(0,1fr);
  align-items:center;
  gap:15px;
  padding-bottom:17px;
  border-bottom:1px solid var(--stroke);
}
.member-profile-avatar{
  width:76px;
  height:76px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:50%;
  background:linear-gradient(145deg,#26384f,#182536);
  font-size:20px;
  font-weight:900;
}
.member-profile-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:50%;
}
.member-profile-hero>div:last-child{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.member-profile-hero strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:16px;
}
.member-profile-hero>div:last-child>span{
  color:var(--muted);
  font-size:9px;
}
.member-profile-badges{
  display:flex;
  gap:5px;
  flex-wrap:wrap;
  margin-top:4px;
}
.member-role-chip{
  padding:4px 7px;
  border:1px solid var(--stroke);
  border-radius:999px;
  color:#8e9bad;
  background:#111925;
  font-size:7px;
  font-weight:900;
  text-transform:uppercase;
}
.member-role-chip.role-owner{
  color:#ffd479;
  border-color:rgba(255,212,121,.18);
}
.member-role-chip.role-admin{
  color:var(--accent);
  border-color:rgba(99,215,255,.18);
}
.member-profile-info{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  padding:15px 0;
}
.member-profile-info>div{
  padding:11px;
  border:1px solid var(--stroke);
  border-radius:10px;
  background:#0b111a;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.member-profile-info span{
  color:#667488;
  font-size:6px;
  font-weight:950;
  letter-spacing:.11em;
}
.member-profile-info strong{
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:9px;
}
.member-local-audio{
  padding:13px;
  border:1px solid rgba(99,215,255,.13);
  border-radius:12px;
  background:rgba(99,215,255,.025);
}
.member-local-audio-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
}
.member-local-audio-head>div{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.member-local-audio-head strong{font-size:10px}
.member-local-audio-head span{color:var(--muted);font-size:8px}
.member-local-audio-head button{
  border:1px solid rgba(243,104,114,.18);
  border-radius:8px;
  background:rgba(243,104,114,.07);
  color:#ff8d95;
  padding:7px 9px;
  font-size:8px;
  font-weight:850;
  cursor:pointer;
}
.member-local-audio-head button.active{
  background:rgba(243,104,114,.15);
}
.member-local-audio label{
  display:flex;
  justify-content:space-between;
  gap:10px;
  color:#9eabbd;
  font-size:8px;
}
.member-local-audio label b{
  color:var(--accent);
}
.member-local-audio input[type="range"]{
  width:100%;
  margin-top:8px;
  accent-color:var(--accent2);
}

/* Keep self-card at bottom, mini voice just above it. */
.channel-panel .self-card{
  margin-top:0!important;
}
.channel-panel:not(:has(.mini-voice-dock:not(.hidden))) .self-card{
  margin-top:auto!important;
}

/* On narrow screens don't let modal overflow. */
@media(max-width:720px){
  .member-profile-info{grid-template-columns:1fr}
}


/* V1.15 — Notifications + unread experience */

/* Global inbox bell */
.notification-btn{
  position:relative;
  width:28px;
  height:26px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:#778599;
  cursor:pointer;
  font-size:15px;
}
.notification-btn:hover{
  background:#171f2b;
  color:var(--accent);
}
.notification-badge{
  position:absolute;
  right:-6px;
  top:-7px;
  min-width:16px;
  height:16px;
  padding:0 4px;
  display:grid;
  place-items:center;
  border:2px solid #0d121b;
  border-radius:999px;
  background:var(--danger);
  color:#fff;
  font-size:6px;
  font-weight:950;
}

/* Notification center */
.notification-panel{
  position:fixed;
  z-index:130;
  left:300px;
  top:62px;
  width:min(390px,calc(100vw - 330px));
  max-height:min(620px,calc(100vh - 82px));
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.09);
  border-radius:16px;
  background:linear-gradient(180deg,#151d29,#0d131c);
  box-shadow:0 28px 90px rgba(0,0,0,.55);
}
.notification-panel-head{
  flex:0 0 auto;
  min-height:58px;
  padding:11px 12px 10px 15px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--stroke);
}
.notification-panel-head>div{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.notification-panel-head span{
  color:var(--accent);
  font-size:6px;
  font-weight:950;
  letter-spacing:.12em;
}
.notification-panel-head strong{
  font-size:13px;
}
.notification-panel-head button{
  width:30px;
  height:30px;
  border:1px solid var(--stroke);
  border-radius:8px;
  background:#171f2b;
  color:#8895a7;
  cursor:pointer;
  font-size:18px;
}
.notification-tools{
  flex:0 0 auto;
  padding:9px 10px;
  display:flex;
  flex-direction:column;
  gap:5px;
  border-bottom:1px solid var(--stroke);
  background:#0c121b;
}
.notification-tools button{
  align-self:flex-start;
  border:1px solid rgba(99,215,255,.17);
  border-radius:8px;
  background:rgba(99,215,255,.055);
  color:var(--accent);
  padding:7px 9px;
  font-size:8px;
  font-weight:850;
  cursor:pointer;
}
.notification-tools button.enabled{
  color:var(--green);
  border-color:rgba(80,216,144,.18);
  background:rgba(80,216,144,.055);
}
.notification-tools span{
  color:var(--muted);
  font-size:7px;
}
.notification-list{
  min-height:0;
  overflow-y:auto;
  padding:7px;
}
.notification-item{
  width:100%;
  min-height:64px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:#dbe4ef;
  padding:8px;
  display:grid;
  grid-template-columns:36px minmax(0,1fr) 24px;
  gap:9px;
  align-items:start;
  text-align:left;
  cursor:pointer;
}
.notification-item:hover{
  background:rgba(255,255,255,.035);
}
.notification-avatar{
  width:36px;
  height:36px;
  overflow:hidden;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#202c3c;
  font-size:9px;
  font-weight:900;
}
.notification-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:50%;
}
.notification-copy{
  min-width:0;
}
.notification-copy>div{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.notification-copy strong{
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:9px;
}
.notification-copy span{
  color:#68768a;
  font-size:7px;
}
.notification-copy p{
  margin:5px 0 0;
  color:#98a5b7;
  font-size:8px;
  line-height:1.4;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
.notification-type{
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  border:1px solid rgba(99,215,255,.16);
  border-radius:7px;
  background:rgba(99,215,255,.055);
  color:var(--accent);
  font-size:10px;
}
.notification-empty{
  padding:38px 12px;
  text-align:center;
  color:#697689;
  font-size:9px;
}

/* Attention beats a regular unread number. */
.channel-unread-badge.attention{
  background:var(--accent)!important;
  color:#04111c!important;
  box-shadow:0 0 14px rgba(99,215,255,.22)!important;
}

/* Discord-style NEW divider */
.new-messages-divider{
  position:relative;
  height:18px;
  margin:7px -16px 5px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
}
.new-messages-divider::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:1px;
  background:rgba(243,104,114,.72);
}
.new-messages-divider span{
  position:relative;
  z-index:1;
  padding:2px 7px;
  border-radius:999px 0 0 999px;
  background:var(--danger);
  color:#fff;
  font-size:6px;
  font-weight:950;
  letter-spacing:.08em;
}

/* Jump-to-present floating control */
.chat-panel{
  position:relative;
}
.jump-to-present{
  position:absolute;
  z-index:60;
  right:26px;
  bottom:84px;
  min-height:32px;
  display:flex;
  align-items:center;
  gap:7px;
  border:1px solid rgba(99,215,255,.17);
  border-radius:999px;
  background:rgba(18,27,39,.96);
  color:#c4d0de;
  padding:0 11px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  backdrop-filter:blur(8px);
  cursor:pointer;
}
.jump-to-present:hover{
  border-color:rgba(99,215,255,.32);
  color:#fff;
  transform:translateY(-1px);
}
.jump-to-present>span{
  color:var(--accent);
  font-size:12px;
}
.jump-to-present strong{
  font-size:8px;
}
.jump-to-present b{
  min-width:18px;
  height:18px;
  padding:0 5px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:var(--danger);
  color:white;
  font-size:6px;
}

/* Notification panel scrollbar follows the slim V1.13 treatment. */
.notification-list{
  scrollbar-width:thin;
  scrollbar-color:rgba(108,123,145,.42) transparent;
}
.notification-list::-webkit-scrollbar{width:6px}
.notification-list::-webkit-scrollbar-track{background:transparent}
.notification-list::-webkit-scrollbar-thumb{
  background:rgba(108,123,145,.34);
  border-radius:999px;
}

@media(max-width:900px){
  .notification-panel{
    left:74px;
    width:min(380px,calc(100vw - 92px));
  }
}


/* V1.16 — Custom Roles & Permissions */
.community-settings-modal{width:min(900px,calc(100vw - 40px))!important}
.roles-layout{
  min-height:430px;
  display:grid;
  grid-template-columns:230px minmax(0,1fr);
  border:1px solid var(--stroke);
  border-radius:14px;
  overflow:hidden;
  background:#0b111a;
}
.roles-list-column{
  min-width:0;
  padding:10px;
  border-right:1px solid var(--stroke);
  background:#0c121b;
}
.roles-list-head{
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:3px 4px 10px;
}
.roles-list-head>div{display:flex;flex-direction:column;gap:2px}
.roles-list-head strong{font-size:10px}
.roles-list-head span{font-size:7px;color:var(--muted)}
.roles-list-head button{
  width:30px;height:30px;border:1px solid rgba(99,215,255,.18);
  border-radius:8px;background:rgba(99,215,255,.06);color:var(--accent);
  cursor:pointer;font-size:15px
}
.roles-list{display:flex;flex-direction:column;gap:4px}
.role-list-item{
  width:100%;
  display:grid;
  grid-template-columns:9px minmax(0,1fr) auto;
  align-items:center;
  gap:9px;
  border:1px solid transparent;
  border-radius:9px;
  background:transparent;
  color:#a8b4c5;
  padding:8px;
  text-align:left;
  cursor:pointer;
}
.role-list-item:hover,.role-list-item.active{
  background:#151d29;border-color:var(--stroke);color:#fff
}
.role-list-item>i{width:9px;height:9px;border-radius:50%}
.role-list-item>div{min-width:0;display:flex;flex-direction:column;gap:2px}
.role-list-item strong{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:9px}
.role-list-item span{font-size:7px;color:var(--muted)}
.role-list-item>b{
  min-width:20px;height:20px;display:grid;place-items:center;
  border-radius:999px;background:#101722;color:#728095;font-size:7px
}
.roles-empty{padding:20px 8px;color:var(--muted);font-size:8px;text-align:center}
.role-editor{
  min-width:0;
  max-height:520px;
  overflow-y:auto;
  padding:16px;
}
.role-editor-empty{
  height:100%;min-height:390px;display:grid;place-items:center;
  align-content:center;text-align:center;color:#68768a
}
.role-editor-empty strong{font-size:13px;color:#96a3b6}
.role-editor-empty span{max-width:360px;margin-top:5px;font-size:8px;line-height:1.5}
.role-editor-top{
  display:grid;grid-template-columns:minmax(0,1fr) 100px;gap:12px
}
.role-editor-top label,.role-position-row label{
  display:block;margin-bottom:6px;color:#9eabbc;font-size:8px;font-weight:800
}
.role-editor-top input[type="text"],
#roleNameInput,#rolePositionInput{
  width:100%;height:38px;border:1px solid var(--stroke);border-radius:9px;
  background:#090f17;color:#e8eef6;outline:none;padding:0 10px;font-size:9px
}
#roleColorInput{
  width:100%;height:38px;border:1px solid var(--stroke);border-radius:9px;
  background:#090f17;padding:3px;cursor:pointer
}
.role-position-row{
  display:grid;grid-template-columns:70px 100px 1fr;gap:10px;
  align-items:end;margin-top:12px
}
.role-position-row>span{padding-bottom:10px;color:var(--muted);font-size:7px}
.role-section-title{
  display:flex;flex-direction:column;gap:3px;margin:20px 0 8px;
  padding-top:16px;border-top:1px solid var(--stroke)
}
.role-section-title strong{font-size:10px}
.role-section-title span{font-size:7px;color:var(--muted);line-height:1.45}
.role-permission-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.role-permission-item{
  min-height:57px;padding:9px 10px;border:1px solid var(--stroke);
  border-radius:10px;background:#0d141e;display:grid;
  grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:9px
}
.role-permission-item>div{display:flex;flex-direction:column;gap:3px}
.role-permission-item strong{font-size:8px}
.role-permission-item span{font-size:7px;color:var(--muted);line-height:1.35}
.role-permission-item input{accent-color:var(--accent2);width:16px;height:16px}
.role-channel-permissions{display:flex;flex-direction:column;gap:5px}
.role-channel-row{
  padding:9px 10px;border:1px solid var(--stroke);border-radius:10px;
  background:#0d141e;display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:8px;align-items:center
}
.role-channel-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
.role-channel-copy strong{font-size:8px}
.role-channel-copy span{font-size:7px;color:var(--muted)}
.role-channel-access{
  display:flex;align-items:center;gap:6px;color:#9aa7b8;font-size:7px
}
.role-channel-access input,.role-channel-detail input{accent-color:var(--accent2)}
.role-channel-detail{
  grid-column:1/-1;display:flex;flex-wrap:wrap;gap:10px;
  padding-top:8px;border-top:1px solid rgba(255,255,255,.05)
}
.role-channel-detail label{display:flex;align-items:center;gap:5px;color:#8390a3;font-size:7px}
.role-editor-actions{
  margin-top:18px;padding-top:14px;border-top:1px solid var(--stroke);
  display:flex;justify-content:space-between;gap:10px
}
.managed-member-v116{
  grid-template-columns:38px minmax(0,1fr) auto auto!important;
  align-items:start!important;
}
.member-custom-role-chips{
  display:flex;flex-wrap:wrap;gap:4px;margin-top:4px
}
.member-custom-role-chips span{
  padding:2px 5px;border:1px solid var(--stroke);border-radius:999px;
  font-size:6px;font-weight:850
}
.custom-role-assign{position:relative}
.custom-role-assign>summary{
  list-style:none;height:30px;display:flex;align-items:center;
  border:1px solid var(--stroke);border-radius:8px;background:#171f2b;
  color:#a9b5c5;padding:0 8px;font-size:8px;font-weight:750;cursor:pointer
}
.custom-role-assign>summary::-webkit-details-marker{display:none}
.custom-role-assign>div{
  position:absolute;z-index:40;right:0;top:34px;width:210px;
  max-height:240px;overflow:auto;padding:6px;border:1px solid var(--stroke);
  border-radius:10px;background:#111925;box-shadow:0 18px 50px rgba(0,0,0,.45)
}
.custom-role-assign label{
  min-height:32px;display:grid;grid-template-columns:16px 8px minmax(0,1fr);
  align-items:center;gap:7px;padding:5px;border-radius:7px;color:#a9b5c5;font-size:8px
}
.custom-role-assign label:hover{background:#192230}
.custom-role-assign label i{width:8px;height:8px;border-radius:50%}
.custom-role-assign small{display:block;padding:9px;color:var(--muted);font-size:7px}
.right-role-badge{background:rgba(255,255,255,.02)}

@media(max-width:780px){
  .roles-layout{grid-template-columns:1fr}
  .roles-list-column{border-right:0;border-bottom:1px solid var(--stroke)}
  .role-permission-grid{grid-template-columns:1fr}
  .role-position-row{grid-template-columns:70px 90px;align-items:end}
  .role-position-row>span{grid-column:1/-1}
}


/* V1.16.1 — role UX fixes */

/* Larger, clearer Community Settings typography */
.community-settings-modal .settings-head h3{
  font-size:18px!important;
}
.community-settings-modal .settings-kicker{
  font-size:8px!important;
}
.community-settings-tab{
  font-size:10px!important;
  padding:10px 16px!important;
}
.member-management-head strong,
.roles-list-head strong,
.role-section-title strong{
  font-size:11px!important;
}
.member-management-head span,
.roles-list-head span,
.role-section-title span{
  font-size:8px!important;
}
.managed-member-copy strong{
  font-size:11px!important;
}
.managed-member-copy>span{
  font-size:8px!important;
}
.member-role-pill{
  font-size:7px!important;
  min-width:64px;
  text-align:center;
}
.managed-member-actions button,
.managed-member-actions select{
  min-height:34px!important;
  font-size:9px!important;
}
.member-custom-role-chips span{
  font-size:7px!important;
  padding:3px 6px!important;
}

.role-list-item{
  min-height:48px!important;
  padding:10px!important;
}
.role-list-item strong{
  font-size:10px!important;
}
.role-list-item span{
  font-size:8px!important;
}
.role-permission-item{
  min-height:68px!important;
  padding:11px 12px!important;
}
.role-permission-item strong{
  font-size:9px!important;
}
.role-permission-item span{
  font-size:8px!important;
}
.role-channel-row{
  padding:12px!important;
  grid-template-columns:minmax(0,1fr) auto auto!important;
}
.role-channel-copy strong{
  font-size:9px!important;
}
.role-channel-copy span{
  font-size:8px!important;
}
.role-channel-access,
.role-channel-private-toggle,
.role-channel-detail label{
  font-size:8px!important;
}

/* Public/private room UI */
.role-channel-private-toggle{
  display:flex;
  align-items:center;
  gap:6px;
  padding:7px 8px;
  border:1px solid var(--stroke);
  border-radius:8px;
  color:#9ca9ba;
  background:#101722;
  cursor:pointer;
}
.role-channel-private-toggle input{
  accent-color:var(--danger);
}
.role-channel-row.is-private{
  border-color:rgba(243,104,114,.18)!important;
  background:linear-gradient(90deg,rgba(243,104,114,.025),#0d141e 42%)!important;
}
.role-channel-row.is-public{
  border-color:rgba(80,216,144,.10)!important;
}
.role-channel-access.disabled{
  opacity:.38;
  pointer-events:none;
}
.role-channel-detail{
  grid-column:1/-1!important;
}

/* Replace fragile <details> dropdown with a fixed, Discord-style role picker. */
.open-custom-role-popover{
  display:flex!important;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-width:104px;
}
.open-custom-role-popover span{
  min-width:16px;
  height:16px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:rgba(99,215,255,.10);
  color:var(--accent);
  font-size:7px;
  font-weight:900;
}
.custom-role-popover{
  position:fixed;
  z-index:500;
  max-height:min(390px,calc(100vh - 24px));
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  border-radius:13px;
  background:linear-gradient(180deg,#171f2b,#101722);
  box-shadow:0 22px 70px rgba(0,0,0,.58);
}
.custom-role-popover-head{
  min-height:58px;
  padding:10px 10px 10px 13px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-bottom:1px solid var(--stroke);
}
.custom-role-popover-head>div{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.custom-role-popover-head strong{
  font-size:11px;
}
.custom-role-popover-head span{
  color:var(--muted);
  font-size:8px;
}
.custom-role-popover-head button{
  width:30px;
  height:30px;
  border:1px solid var(--stroke);
  border-radius:8px;
  background:#1a2432;
  color:#9aa7b8;
  font-size:17px;
  cursor:pointer;
}
.custom-role-popover-list{
  max-height:320px;
  overflow-y:auto;
  padding:7px;
  scrollbar-width:thin;
  scrollbar-color:rgba(108,123,145,.42) transparent;
}
.custom-role-popover-option{
  min-height:46px;
  padding:8px 9px;
  display:grid;
  grid-template-columns:18px 10px minmax(0,1fr);
  align-items:center;
  gap:9px;
  border-radius:8px;
  cursor:pointer;
}
.custom-role-popover-option:hover{
  background:#1b2533;
}
.custom-role-popover-option input{
  width:16px;
  height:16px;
  accent-color:var(--accent2);
}
.custom-role-popover-option>i{
  width:10px;
  height:10px;
  border-radius:50%;
}
.custom-role-popover-option>div{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.custom-role-popover-option strong{
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:10px;
}
.custom-role-popover-option span{
  color:var(--muted);
  font-size:8px;
}
.custom-role-popover-empty{
  padding:22px 10px;
  text-align:center;
  color:var(--muted);
  font-size:9px;
}

/* Old fragile details dropdown is no longer used. */
.custom-role-assign{
  display:none!important;
}

/* More comfortable Settings footer */
.community-settings-modal .settings-footer{
  min-height:68px!important;
}
.community-settings-modal .settings-footer .settings-primary{
  min-width:126px!important;
  min-height:40px!important;
  font-size:10px!important;
}

@media(max-width:900px){
  .role-channel-row{
    grid-template-columns:1fr 1fr!important;
  }
  .role-channel-copy{
    grid-column:1/-1;
  }
}


/* V1.17 — Chat Live */
.notification-tool-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.notification-tools .mark-all-read-btn{color:#9aa8ba;border-color:var(--stroke);background:#141c27}
.notification-tools .mark-all-read-btn:disabled{opacity:.38;cursor:not-allowed}
.notification-item{position:relative;padding:0!important;display:block!important}
.notification-item.unread{background:linear-gradient(90deg,rgba(99,215,255,.06),transparent 70%)}
.notification-item.unread::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:2px;border-radius:999px;background:var(--accent)}
.notification-item.read{opacity:.62}
.notification-item.read:hover{opacity:.9}
.notification-open{width:100%;min-height:64px;padding:8px 42px 8px 9px;display:grid;grid-template-columns:36px minmax(0,1fr) 24px;gap:9px;align-items:start;border:0;border-radius:10px;background:transparent;color:inherit;text-align:left;cursor:pointer}
.notification-read-btn{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:27px;height:27px;display:grid;place-items:center;border:1px solid rgba(99,215,255,.16);border-radius:8px;background:#172231;color:var(--accent);cursor:pointer}
.notification-read-btn:hover{background:rgba(99,215,255,.1)}

.typing-indicator{min-height:22px!important;display:flex!important;align-items:center;gap:7px;padding-left:4px!important}
.typing-indicator.hidden{display:none!important}
.typing-indicator strong{color:#8f9daf;font-size:8px;font-weight:650}
.typing-avatar-stack{display:flex;align-items:center;padding-left:3px}
.typing-avatar{width:18px;height:18px;margin-left:-4px;display:grid;place-items:center;overflow:hidden;border:2px solid #0d141e;border-radius:50%;background:#263345;color:#d9e2ec;font-size:6px;font-weight:900}
.typing-avatar:first-child{margin-left:0}
.typing-avatar img{width:100%;height:100%;display:block;object-fit:cover;border-radius:50%}

.reply-preview{align-items:stretch!important}
.reply-preview-jump{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer;padding:0}
.reply-preview-jump:hover strong,.reply-preview-jump:hover small{color:var(--accent)}
.reply-preview-jump span{font-size:7px;color:#78869a;font-weight:900;letter-spacing:.08em}
.reply-preview-jump strong{font-size:9px}
.reply-preview-jump small{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#8492a5;transition:.15s ease}

.message.message-jump-target{position:relative;z-index:2;box-shadow:inset 3px 0 0 var(--accent),0 0 0 1px rgba(99,215,255,.12),0 10px 36px rgba(0,0,0,.16)!important;background:linear-gradient(90deg,rgba(99,215,255,.12),rgba(99,215,255,.035) 45%,transparent)!important}


/* V1.17.1 — Discord-like notification clearing */
.notification-empty{
  min-height:130px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
}
.notification-empty strong{
  color:#aeb9c8;
  font-size:10px;
}
.notification-empty span{
  color:#667487;
  font-size:8px;
}
.notification-item.unread{
  opacity:1!important;
}
.notification-read-btn{
  font-size:14px!important;
  line-height:1;
}

/* V1.18 — Presence & Status */
.status-online{background:#50d890!important;color:#50d890!important}
.status-idle{background:#f0c45d!important;color:#f0c45d!important}
.status-dnd{background:#f36872!important;color:#f36872!important}
.status-offline{background:#596678!important;color:#7b8798!important}

.self-avatar-wrap{position:relative;width:38px;height:38px;flex:0 0 38px}
.self-avatar-wrap>.avatar{width:38px!important;height:38px!important}
.self-presence-dot{position:absolute;right:-1px;bottom:-1px;width:12px;height:12px;border:3px solid #101722;border-radius:50%;box-sizing:border-box}

.profile-status-section{margin:5px 0 16px;padding:13px;border:1px solid var(--stroke);border-radius:12px;background:#0b111a}
.profile-status-section>label{display:block;margin:10px 0 6px}
.profile-status-section>label:first-child{margin-top:0}
.presence-status-row{display:grid;grid-template-columns:minmax(0,1fr) 24px;gap:10px;align-items:center}
.presence-status-row select,#customStatusExpiry{width:100%;height:38px;border:1px solid var(--stroke);border-radius:9px;outline:none;background:#090f17;color:#e6edf6;padding:0 10px;font-size:9px}
.presence-status-preview{width:13px;height:13px;justify-self:center;border-radius:50%;box-shadow:0 0 0 4px rgba(255,255,255,.025)}
.profile-status-save{width:100%;min-height:36px;margin-top:12px;border:1px solid rgba(99,215,255,.18);border-radius:9px;background:rgba(99,215,255,.065);color:var(--accent);font-size:9px;font-weight:850;cursor:pointer}
.profile-status-save:hover{background:rgba(99,215,255,.11)}
.profile-status-save:disabled{opacity:.45;cursor:wait}
.profile-about-input{min-height:86px!important}

.right-member-presence{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border:3px solid #0d121b;border-radius:50%;box-sizing:border-box}
.right-member.presence-idle .right-member-copy span{color:#b79b57}
.right-member.presence-dnd .right-member-copy span{color:#be6970}
.right-member.offline{opacity:.52}

.member-profile-custom-status{margin-top:12px;padding:10px 12px;border:1px solid rgba(99,215,255,.10);border-radius:10px;background:rgba(99,215,255,.025);color:#c4cfdd;font-size:9px;line-height:1.45}
.member-profile-custom-status::before{content:"STATUS";display:block;margin-bottom:4px;color:#68768a;font-size:6px;font-weight:950;letter-spacing:.1em}
.member-profile-about{margin-top:8px;padding:10px 12px;border:1px solid var(--stroke);border-radius:10px;background:#0b111a;color:#9eabbc;font-size:9px;line-height:1.5;white-space:pre-wrap}
.member-profile-about::before{content:"ABOUT ME";display:block;margin-bottom:5px;color:#68768a;font-size:6px;font-weight:950;letter-spacing:.1em}
.profile-presence-text{background:transparent!important}
.profile-presence-text.status-online{color:#50d890!important}
.profile-presence-text.status-idle{color:#f0c45d!important}
.profile-presence-text.status-dnd{color:#f36872!important}
.profile-presence-text.status-offline{color:#7b8798!important}
.managed-member-status{display:block;max-width:360px;margin-top:3px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#7d8a9d;font-size:7px}


/* V1.19 — Voice & Audio Pro */

.voice-health-card{
  margin:12px 0;
  padding:11px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border:1px solid var(--stroke);
  border-radius:11px;
  background:#0b111a;
}
.voice-health-card>div:first-child{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.voice-health-card span{
  color:#68768a;
  font-size:6px;
  font-weight:950;
  letter-spacing:.1em;
}
.voice-health-card strong{
  font-size:10px;
}
.voice-health-bars{
  height:22px;
  display:flex;
  align-items:flex-end;
  gap:3px;
}
.voice-health-bars i{
  width:4px;
  border-radius:2px;
  background:#3c4858;
}
.voice-health-bars i:nth-child(1){height:7px}
.voice-health-bars i:nth-child(2){height:11px}
.voice-health-bars i:nth-child(3){height:16px}
.voice-health-bars i:nth-child(4){height:21px}
.voice-health-bars.quality-excellent i{background:#50d890}
.voice-health-bars.quality-good i:nth-child(-n+3){background:#50d890}
.voice-health-bars.quality-poor i:nth-child(-n+2){background:#f0c45d}
.voice-health-bars.quality-lost i:nth-child(1){background:#f36872}
.voice-health-bars.quality-reconnecting i{background:#f0c45d;animation:voiceBarsPulse .9s ease-in-out infinite alternate}
@keyframes voiceBarsPulse{from{opacity:.35}to{opacity:1}}

.voice-quality-pill{
  min-width:74px;
  padding:5px 8px;
  border:1px solid var(--stroke);
  border-radius:999px;
  background:#111925;
  color:#8e9bad;
  font-size:7px;
  font-weight:800;
}
.voice-quality-pill.quality-excellent{color:#50d890;border-color:rgba(80,216,144,.18)}
.voice-quality-pill.quality-good{color:#8fd7a9;border-color:rgba(80,216,144,.12)}
.voice-quality-pill.quality-poor,.voice-quality-pill.quality-reconnecting{color:#f0c45d;border-color:rgba(240,196,93,.18)}
.voice-quality-pill.quality-lost{color:#f36872;border-color:rgba(243,104,114,.18)}

.voice-advanced-settings{
  margin:12px 0;
  padding:13px;
  border-top:1px solid rgba(255,255,255,.055);
  border-bottom:1px solid rgba(255,255,255,.055);
}
.voice-advanced-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.voice-advanced-head>div{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.voice-advanced-head strong{font-size:10px}
.voice-advanced-head span{color:var(--muted);font-size:8px;line-height:1.4}
.manual-sensitivity-row{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:9px;
  margin-top:10px;
}
.manual-sensitivity-row span{
  color:#778497;
  font-size:7px;
}
.manual-sensitivity-row input{width:100%;accent-color:var(--accent2)}
#sensitivityValue{
  display:block;
  margin-top:7px;
  color:#738094;
  font-size:7px;
}
.level-bar.above-threshold{
  box-shadow:0 0 14px rgba(80,216,144,.35);
}

.voice-user-mixer{
  position:fixed;
  z-index:520;
  width:260px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  border-radius:13px;
  background:linear-gradient(180deg,#182130,#101722);
  box-shadow:0 24px 80px rgba(0,0,0,.58);
}
.voice-user-mixer-head{
  min-height:60px;
  padding:10px;
  display:grid;
  grid-template-columns:38px minmax(0,1fr) 30px;
  gap:9px;
  align-items:center;
  border-bottom:1px solid var(--stroke);
}
.voice-mixer-avatar{
  width:38px;height:38px;overflow:hidden;border-radius:50%;
  display:grid;place-items:center;background:#243247;font-size:9px;font-weight:900;
}
.voice-mixer-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.voice-user-mixer-head>div:nth-child(2){min-width:0;display:flex;flex-direction:column;gap:2px}
.voice-user-mixer-head strong{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:10px}
.voice-user-mixer-head span{color:#748195;font-size:7px}
.voice-user-mixer-head button{
  width:30px;height:30px;border:1px solid var(--stroke);border-radius:8px;
  background:#1a2432;color:#9da9b9;cursor:pointer;font-size:16px;
}
.voice-user-mixer-body{padding:12px}
.voice-mixer-row{display:flex;justify-content:space-between;gap:8px;margin-bottom:8px;color:#9eabbc;font-size:8px}
.voice-mixer-row b{color:var(--accent)}
.voice-user-mixer-body input[type="range"]{width:100%;accent-color:var(--accent2)}
.voice-user-mixer-body>button{
  width:100%;height:34px;margin-top:10px;border:1px solid rgba(243,104,114,.16);
  border-radius:8px;background:rgba(243,104,114,.06);color:#ff8d95;
  font-size:8px;font-weight:850;cursor:pointer;
}
.voice-user-mixer-body>button.active{background:rgba(243,104,114,.15)}
.voice-user-mixer-body small{display:block;margin-top:7px;color:#657286;font-size:7px;text-align:center}

/* Existing speaker glow gets a stronger Voice Pro treatment */
.stage-participant.speaking{
  box-shadow:0 0 0 1px rgba(80,216,144,.24),0 12px 32px rgba(0,0,0,.18)!important;
}
.stage-participant.speaking .stage-avatar{
  box-shadow:0 0 0 3px #50d890,0 0 22px rgba(80,216,144,.28)!important;
}
.voice-presence-user{
  transition:.15s ease;
}

/* V1.19.1 — Discord-like shared mute/deafen state */
.voice-presence-user{min-height:29px}
.voice-presence-copy{min-width:0;flex:1;display:flex;flex-direction:column;justify-content:center;gap:1px}
.voice-presence-copy>span{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.voice-presence-copy>small{color:#78869a;font-size:6px;line-height:1}
.voice-presence-user.voice-state-muted .voice-presence-copy>small{color:#c9848a}
.voice-presence-user.voice-state-deafened .voice-presence-copy>small{color:#f17d87}
.voice-presence-state-icons{margin-left:auto;display:flex;align-items:center;gap:2px;flex:0 0 auto}
.voice-presence-state-icons b{font-size:8px;line-height:1;font-weight:400;filter:saturate(.8)}
.voice-presence-user.voice-state-deafened{background:rgba(243,104,114,.025)}
.voice-presence-user.voice-state-deafened .voice-presence-avatar{box-shadow:0 0 0 1px rgba(243,104,114,.18)}


/* V1.20 — Chat & Notifications Polish */

.new-messages-divider span{
  font-size:7px!important;
  letter-spacing:.12em;
  padding:0 8px!important;
}

.mention-token.mention-everyone{
  background:rgba(99,215,255,.16)!important;
  box-shadow:inset 0 0 0 1px rgba(99,215,255,.12);
}

/* Image/GIF lightbox launchers */
.chat-image-open{
  padding:0;
  border:0;
  background:transparent;
  cursor:zoom-in;
  text-align:left;
}
.image-attachment .chat-image-open{
  display:block;
  width:max-content;
  max-width:100%;
}
.gif-media.chat-image-open{
  display:block;
}
.chat-image-open img{
  transition:transform .16s ease, filter .16s ease;
}
.chat-image-open:hover img{
  filter:brightness(1.04);
  transform:scale(1.003);
}

/* Full image viewer */
.image-lightbox{
  position:fixed;
  inset:0;
  z-index:900;
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  background:rgba(3,7,12,.92);
  backdrop-filter:blur(8px);
}
.image-lightbox.hidden{display:none!important}
.image-lightbox-stage{
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:48px 48px 20px;
}
.image-lightbox-stage img{
  max-width:min(94vw,1600px);
  max-height:calc(100vh - 130px);
  object-fit:contain;
  border-radius:10px;
  box-shadow:0 30px 90px rgba(0,0,0,.58);
}
.image-lightbox-close{
  position:absolute;
  top:18px;
  right:20px;
  width:38px;
  height:38px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:11px;
  background:rgba(20,28,39,.9);
  color:#b5c0ce;
  font-size:22px;
  cursor:pointer;
}
.image-lightbox-close:hover{
  color:#fff;
  background:#1b2635;
}
.image-lightbox-footer{
  min-height:64px;
  padding:12px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  border-top:1px solid rgba(255,255,255,.08);
  background:rgba(10,15,23,.92);
}
.image-lightbox-footer strong{
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:10px;
}
.image-lightbox-footer>div{
  display:flex;
  gap:8px;
}
.image-lightbox-footer a{
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:8px;
  color:#a8b6c8;
  background:#141d29;
  font-size:8px;
  font-weight:800;
  text-decoration:none;
}
.image-lightbox-footer a:hover{
  color:var(--accent);
  border-color:rgba(99,215,255,.18);
}
body.lightbox-open{
  overflow:hidden;
}

/* Notification sound user setting */
.profile-notification-setting{
  margin:8px 0 15px;
  padding:12px 13px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  border:1px solid var(--stroke);
  border-radius:11px;
  background:#0b111a;
}
.profile-notification-setting>div{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.profile-notification-setting strong{
  font-size:9px;
}
.profile-notification-setting span{
  color:#738094;
  font-size:7px;
  line-height:1.4;
}

/* Slightly stronger unread/attention treatment */
.channel-unread-badge.attention{
  box-shadow:0 0 0 3px rgba(99,215,255,.06);
}
.jump-to-present:not(.hidden){
  animation:jumpPresentIn .16s ease-out;
}
@keyframes jumpPresentIn{
  from{opacity:0;transform:translateY(5px)}
  to{opacity:1;transform:translateY(0)}
}

/* V1.21 — Community Management */
.channel-category-label{margin:10px 6px 4px;padding:4px 4px 2px;color:#738195;font-size:6px;font-weight:950;letter-spacing:.13em;text-transform:uppercase}
.community-default-channel,#channelCategorySelect,#channelSlowmodeSelect{width:100%;min-height:38px;border:1px solid var(--stroke);border-radius:9px;background:#090f17;color:#e5edf6;padding:0 10px}
.community-setting-note{display:block;margin-top:5px;color:#69778b;font-size:7px}
.organization-head,.audit-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}
.organization-head>div,.audit-head>div{display:flex;flex-direction:column;gap:3px}
.organization-head strong,.audit-head strong{font-size:11px}
.organization-head span,.audit-head span{color:#778497;font-size:8px}
.organization-head button,.audit-head button,.organization-category-actions button{min-height:32px;border:1px solid var(--stroke);border-radius:8px;background:#151e2a;color:#9fabbc;padding:0 10px;font-size:8px;cursor:pointer}
.organization-list{display:flex;flex-direction:column;gap:10px;min-height:160px}
.organization-category{border:1px solid var(--stroke);border-radius:12px;background:#0c121b;overflow:hidden;transition:.14s ease}
.organization-category.dragging{opacity:.5}
.organization-category.organization-drop-active{border-color:rgba(99,215,255,.42);box-shadow:0 0 0 2px rgba(99,215,255,.06)}
.organization-category-head{min-height:42px;padding:8px 10px;display:flex;align-items:center;gap:9px;border-bottom:1px solid rgba(255,255,255,.045);background:#111925}
.organization-category-head>div:nth-child(2),.organization-uncategorized .organization-category-head>div:first-child{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
.organization-category-head strong{font-size:8px;letter-spacing:.08em}
.organization-category-head span{color:#68768a;font-size:7px}
.org-drag-handle{color:#627086;font-size:14px;cursor:grab}
.organization-category-actions{display:flex;gap:5px}
.organization-category-actions button.danger{color:#ee858d;border-color:rgba(243,104,114,.14)}
.organization-channel-list{min-height:36px;padding:6px;display:flex;flex-direction:column;gap:4px}
.organization-channel{min-height:42px;padding:6px 8px;display:grid;grid-template-columns:18px 24px minmax(0,1fr) auto;align-items:center;gap:7px;border:1px solid transparent;border-radius:8px;background:#0a1018;cursor:grab}
.organization-channel:hover{border-color:rgba(255,255,255,.06);background:#0d151f}
.organization-channel.dragging{opacity:.45}
.organization-channel>div{min-width:0;display:flex;flex-direction:column;gap:2px}
.organization-channel strong{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:9px}
.organization-channel small{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#6f7d91;font-size:7px}
.organization-channel>button{border:0;background:transparent;color:#6f7d91;font-size:7px;cursor:pointer}
.organization-channel>button:hover{color:var(--accent)}
.org-channel-icon{color:#8290a4;font-size:10px}
.organization-empty{min-height:34px;display:grid;place-items:center;color:#536175;font-size:7px}
.organization-actions{margin-top:12px;display:flex;align-items:center;justify-content:space-between;gap:12px;color:#68768a;font-size:7px}
.community-audit-list{display:flex;flex-direction:column;gap:5px}
.audit-entry{padding:9px 10px;display:grid;grid-template-columns:34px minmax(0,1fr);gap:9px;align-items:start;border:1px solid var(--stroke);border-radius:10px;background:#0b111a}
.audit-avatar{width:34px;height:34px;overflow:hidden;border-radius:50%;display:grid;place-items:center;background:#223047;font-size:8px;font-weight:900}
.audit-avatar img{width:100%;height:100%;object-fit:cover}
.audit-copy{min-width:0}.audit-copy>div{display:flex;flex-wrap:wrap;gap:5px;align-items:baseline}.audit-copy strong{font-size:9px}.audit-copy span{color:#9ca9ba;font-size:8px}.audit-copy p{margin:4px 0 0;color:var(--accent);font-size:8px}.audit-copy small{display:block;margin-top:4px;color:#5f6d81;font-size:6px}
.audit-empty{min-height:120px;display:grid;place-items:center;color:#68768a;font-size:8px}
#channelTextOptions{margin-top:8px}#channelTextOptions.hidden{display:none!important}

/* V1.22 — Friends & Direct Messages */
.social-home-btn{position:relative;width:44px;height:44px;border:1px solid var(--stroke);border-radius:15px;background:#141b27;color:#aab5c5;display:grid;place-items:center;cursor:pointer;font-size:18px}
.social-home-btn:hover,.social-home-btn.active{background:#172536;color:#fff;border-color:rgba(99,215,255,.25)}
.social-home-btn .rail-unread-badge{position:absolute;right:-5px;top:-4px}
.channel-panel{position:relative}
.dm-sidebar{position:absolute;inset:0 0 76px 0;z-index:20;padding:18px 12px 12px;display:flex;flex-direction:column;background:#0d121b}
.dm-sidebar.hidden{display:none!important}
.app-shell.dm-mode .channel-panel>.community-title,.app-shell.dm-mode .channel-panel>.section-title,.app-shell.dm-mode .channel-panel>#textChannels,.app-shell.dm-mode .channel-panel>#voiceChannels,.app-shell.dm-mode .channel-panel>#legacyMembersBlock{visibility:hidden;pointer-events:none}
.app-shell.dm-mode .self-card{position:relative;z-index:22}.app-shell.dm-mode #miniVoiceDock{position:relative;z-index:22}
.app-shell.dm-mode .self-card{flex:0 0 auto;visibility:visible!important}.app-shell.dm-mode .dm-sidebar{bottom:84px}
.dm-invite-community-btn{min-height:34px;padding:0 11px;display:flex;align-items:center;gap:6px;border:1px solid rgba(99,215,255,.18);border-radius:9px;background:rgba(99,215,255,.07);color:#9ee8ff;font-size:8px;font-weight:900;cursor:pointer}.dm-invite-community-btn:hover{background:rgba(99,215,255,.13);color:#fff}.dm-community-invite-modal{width:min(520px,calc(100vw - 28px))}.dm-community-invite-copy{margin:0 0 12px;color:#8190a4;font-size:9px}.dm-community-invite-list{display:flex;flex-direction:column;gap:7px;max-height:390px;overflow:auto}.dm-community-invite-option{width:100%;padding:10px;display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:10px;border:1px solid var(--stroke);border-radius:11px;background:#0d141e;color:#fff;text-align:left;cursor:pointer}.dm-community-invite-option:hover{border-color:rgba(99,215,255,.25);background:#111b28}.dm-community-invite-option>span:nth-child(2){min-width:0;display:flex;flex-direction:column;gap:3px}.dm-community-invite-option strong,.dm-community-invite-option small{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.dm-community-invite-option small{color:#77869a;font-size:8px}.dm-community-invite-option>b{color:var(--accent);font-size:8px}.dm-community-invite-icon{width:42px;height:42px;display:grid;place-items:center;overflow:hidden;border-radius:12px;background:#1b2b3d;color:#fff;font-size:12px;font-weight:950}.dm-community-invite-icon img{width:100%;height:100%;object-fit:cover}.dm-community-invite-empty{padding:24px 12px;text-align:center;color:#748297;font-size:9px;line-height:1.5}.dm-community-invite-card{max-width:520px;margin-top:8px;padding:12px;display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:11px;align-items:center;border:1px solid var(--stroke);border-left:3px solid var(--invite-accent);border-radius:13px;background:#101722}.dm-community-invite-card .dm-community-invite-icon{width:48px;height:48px}.dm-community-invite-card-copy{min-width:0;display:flex;flex-direction:column;gap:3px}.dm-community-invite-card-copy>span{color:var(--invite-accent);font-size:7px;font-weight:950;letter-spacing:.1em}.dm-community-invite-card-copy>strong{font-size:12px}.dm-community-invite-card-copy>small{color:#8290a3;font-size:8px;line-height:1.4}.dm-community-invite-card>button{min-height:34px;padding:0 15px;border:0;border-radius:9px;background:var(--invite-accent);color:#071018;font-size:8px;font-weight:950;cursor:pointer}.dm-community-invite-card>b{color:#74dca3;font-size:8px}
.dm-sidebar-head{min-height:47px;padding:0 5px 13px;display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid var(--stroke)}
.dm-sidebar-head>div{display:flex;flex-direction:column;gap:2px}.dm-sidebar-head strong{font-size:12px}.dm-sidebar-head span{font-size:8px;color:#6e7b8e}
.dm-sidebar-head button{width:30px;height:30px;border:1px solid var(--stroke);border-radius:9px;background:#151e2a;color:#9eaabc;cursor:pointer;font-size:16px}
.dm-friends-home{width:100%;min-height:42px;margin-top:10px;padding:0 10px;display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:8px;border:0;border-radius:9px;background:transparent;color:#aab4c4;text-align:left;cursor:pointer}
.dm-friends-home:hover,.dm-friends-home.active{background:#171e2a;color:#fff}.dm-friends-home b{min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#e45f69;color:#fff;display:grid;place-items:center;font-size:7px}
.dm-sidebar-label{margin:16px 8px 7px;color:#657286;font-size:7px;font-weight:900;letter-spacing:.11em}
.dm-conversation-list{min-height:0;overflow:auto;display:flex;flex-direction:column;gap:3px}
.dm-conversation{width:100%;min-height:46px;padding:6px 7px;display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:9px;align-items:center;border:0;border-radius:9px;background:transparent;color:#9faabc;text-align:left;cursor:pointer}
.dm-conversation:hover,.dm-conversation.active{background:#171e2a;color:#fff}
.dm-conversation-avatar{position:relative;width:36px;height:36px;border-radius:50%;overflow:visible}.dm-conversation-avatar img{width:36px;height:36px;border-radius:50%;object-fit:cover}
.dm-conversation-avatar>i{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border:3px solid #0d121b;border-radius:50%}
.dm-conversation>div:nth-child(2){min-width:0;display:flex;flex-direction:column;gap:2px}.dm-conversation strong,.dm-conversation span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.dm-conversation strong{font-size:9px}.dm-conversation span{font-size:7px;color:#69778a}
.dm-conversation>b{min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#e45f69;color:white;display:grid;place-items:center;font-size:7px}
.dm-sidebar-empty{padding:18px 8px;color:#637084;font-size:8px;line-height:1.5;text-align:center}
.app-shell.dm-home-mode{grid-template-columns:70px 245px minmax(520px,1fr)}.app-shell.dm-home-mode .chat-panel,.app-shell.dm-home-mode .member-panel{display:none!important}.app-shell.dm-home-mode .stage{display:flex!important}
.social-home{height:100%;overflow:auto;padding:34px 38px 50px}.social-home-head{display:flex;align-items:flex-start;justify-content:space-between;gap:22px;padding:10px 0 24px;border-bottom:1px solid rgba(255,255,255,.055)}
.social-home-head h2{margin:5px 0 4px;font-size:28px}.social-home-head p{margin:0;color:#778497;font-size:10px}.social-home-head>button{min-height:38px;padding:0 15px;border:1px solid rgba(99,215,255,.2);border-radius:10px;background:rgba(99,215,255,.07);color:var(--accent);font-size:9px;font-weight:850;cursor:pointer}
.social-tabs{display:flex;gap:5px;margin:20px 0 12px}.social-tabs button{min-height:34px;padding:0 12px;border:1px solid transparent;border-radius:8px;background:transparent;color:#7c899c;font-size:9px;cursor:pointer}.social-tabs button.active{background:#161f2c;color:#fff;border-color:var(--stroke)}.social-tabs b{margin-left:5px;font-size:7px;color:#778497}
.social-list{display:flex;flex-direction:column;gap:5px}.friend-row{min-height:58px;padding:9px 10px;display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:11px;align-items:center;border-top:1px solid rgba(255,255,255,.045)}.friend-row:hover{background:#0d141e;border-radius:10px}
.friend-avatar{position:relative;width:40px;height:40px;border-radius:50%}.friend-avatar img{width:40px;height:40px;object-fit:cover;border-radius:50%}.friend-avatar>i{position:absolute;right:-1px;bottom:-1px;width:12px;height:12px;border:3px solid #090d14;border-radius:50%}
.friend-copy{min-width:0;display:flex;flex-direction:column;gap:3px}.friend-copy strong{font-size:10px}.friend-copy span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#738094;font-size:8px}
.friend-actions{display:flex;gap:6px}.friend-actions button{min-height:31px;padding:0 10px;border:1px solid var(--stroke);border-radius:8px;background:#151e2a;color:#9da9b9;font-size:8px;cursor:pointer}.friend-actions button:hover{color:#fff}.friend-actions button.accept{color:#65dda0;border-color:rgba(80,216,144,.16)}.friend-actions button.danger{color:#ee7d86;border-color:rgba(243,104,114,.14)}
.social-empty{min-height:150px;display:grid;place-items:center;align-content:center;gap:5px;color:#68768a;text-align:center}.social-empty strong{color:#aab5c5;font-size:11px}.social-empty span{font-size:8px}
.member-profile-social-actions{margin-top:12px;display:grid;grid-template-columns:1fr 1fr;gap:7px}.member-profile-social-actions button{min-height:36px;border:1px solid var(--stroke);border-radius:9px;background:#151e2a;color:#a5b0c0;font-size:8px;font-weight:800;cursor:pointer}.member-profile-social-actions button:first-child{color:var(--accent);border-color:rgba(99,215,255,.16)}.member-profile-social-actions button:disabled{opacity:.5;cursor:default}
.add-friend-copy{margin:0 0 16px;color:#78869a;font-size:9px;line-height:1.5}
.dm-chat-welcome .welcome-icon{overflow:hidden;padding:0}.dm-chat-welcome .welcome-icon img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.app-shell.dm-mode.text-mode{grid-template-columns:70px 245px minmax(520px,1fr)}.app-shell.dm-mode.text-mode .member-panel{display:none!important}
@media(max-width:900px){.social-home{padding:24px 18px 40px}.friend-row{grid-template-columns:38px minmax(0,1fr)}.friend-actions{grid-column:2}}


/* V1.23 — Community Customization Pro */
.community-sidebar-banner{position:relative;height:112px;margin:-1px 0 0;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.06)}
.community-sidebar-banner img{width:100%;height:100%;object-fit:cover;display:block}
.community-sidebar-banner-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,9,14,.06),rgba(7,11,17,.8));pointer-events:none}

.community-home-v123{padding:0!important;overflow:hidden;align-items:stretch!important}
.community-home-banner{width:100%;height:220px;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.06)}
.community-home-banner img{width:100%;height:100%;object-fit:cover;display:block}
.community-home-content{padding:28px 34px 34px}
.community-home-title-row{display:flex;align-items:center;gap:10px}
.community-home-tag{padding:4px 7px;border:1px solid rgba(99,215,255,.22);border-radius:7px;color:var(--community-accent);background:rgba(99,215,255,.05);font-size:7px;font-weight:900;letter-spacing:.08em}
.community-rules-card{max-width:700px;margin:18px 0 4px;padding:14px 15px;border:1px solid rgba(255,255,255,.065);border-left:3px solid var(--community-accent);border-radius:10px;background:#0b111a}
.community-rules-card strong{font-size:9px}
.community-rules-card p{margin:7px 0 0;white-space:pre-wrap;color:#8f9caf;font-size:8px;line-height:1.55}

.community-customization-preview{--preview-accent:#63d7ff;overflow:hidden;margin-bottom:18px;border:1px solid var(--stroke);border-radius:13px;background:#0b111a}
.community-preview-banner{height:120px;display:grid;place-items:center;overflow:hidden;background:#111925;color:#627086;font-size:8px}
.community-preview-banner img{width:100%;height:100%;object-fit:cover}
.community-preview-body{position:relative;min-height:66px;padding:12px 14px;display:flex;align-items:center;gap:11px}
.community-preview-icon{width:44px;height:44px;margin-top:-30px;border:4px solid #0b111a;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:#17202d;font-size:10px;font-weight:950;box-shadow:0 0 0 2px var(--preview-accent)}
.community-preview-icon img{width:100%;height:100%;object-fit:cover}
.community-preview-body>div:last-child{display:flex;flex-direction:column;gap:3px}
.community-preview-body strong{font-size:11px}.community-preview-body span{color:var(--preview-accent);font-size:7px;font-weight:850}

.community-banner-editor{margin-bottom:14px;padding:12px 13px;display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--stroke);border-radius:11px;background:#0b111a}
.community-banner-editor>div:first-child{display:flex;flex-direction:column;gap:3px}
.community-banner-editor strong{font-size:9px}.community-banner-editor span{color:#758296;font-size:7px}
.community-banner-actions{display:flex;gap:6px}
.community-banner-actions button,.community-icon-actions button{min-height:32px;padding:0 10px;border:1px solid var(--stroke);border-radius:8px;background:#151e2a;color:#9daabc;font-size:8px;cursor:pointer}
.community-banner-actions button:hover,.community-icon-actions button:hover{color:#fff}
.community-banner-actions button:disabled{opacity:.35;cursor:default}

.community-visibility-settings{margin:14px 0;border:1px solid var(--stroke);border-radius:11px;overflow:hidden;background:#0b111a}
.community-visibility-settings>div{min-height:58px;padding:10px 13px;display:flex;align-items:center;justify-content:space-between;gap:15px}
.community-visibility-settings>div+div{border-top:1px solid var(--stroke)}
.community-visibility-settings>div>div{display:flex;flex-direction:column;gap:3px}
.community-visibility-settings strong{font-size:9px}.community-visibility-settings span{color:#748195;font-size:7px}

.pending-invite-card-v123{--invite-accent:#63d7ff;padding:0!important;overflow:hidden;border-color:rgba(99,215,255,.28)!important}
.pending-invite-banner{height:130px;overflow:hidden}.pending-invite-banner img{width:100%;height:100%;object-fit:cover;display:block}
.pending-invite-body{padding:14px;display:grid;grid-template-columns:52px minmax(0,1fr);gap:12px}
.pending-invite-icon{width:52px;height:52px;overflow:hidden;border-radius:16px;display:grid;place-items:center;background:#17202d;font-weight:950;box-shadow:0 0 0 2px var(--invite-accent)}
.pending-invite-icon img{width:100%;height:100%;object-fit:cover}
.pending-invite-copy{min-width:0;display:flex;flex-direction:column;gap:4px}.pending-invite-copy>span{color:var(--invite-accent)}
.pending-invite-copy p{margin:2px 0;color:#78869a;font-size:8px;line-height:1.45}
.pending-invite-stats{display:flex;flex-wrap:wrap;gap:5px;margin:4px 0}.pending-invite-stats span{padding:3px 6px;border-radius:999px;background:#151e2a;color:#8f9caf;font-size:6px}
.pending-invite-copy small{color:#647286}

.system-message{margin:4px 8px!important;border-left:2px solid var(--community-accent)!important;background:rgba(99,215,255,.035)!important}
.system-message .message-actions,.system-message .reaction-row{display:none!important}
.system-message .message-body{color:#9cabbc!important;font-style:italic}
.system-message .message-head strong::after{content:" · SYSTEM";color:var(--community-accent);font-size:6px;font-weight:900;letter-spacing:.08em}
#communityIconCropModal .avatar-crop-ring{box-shadow:0 0 0 999px rgba(3,7,12,.62),0 0 0 2px var(--accent)}

/* V1.24 PRIVATE CALLS CLEAN */
.chat-header-actions .dm-call-btn{
  width:auto!important;min-width:78px!important;height:34px!important;min-height:34px!important;
  padding:0 12px!important;margin-top:5px!important;display:inline-flex!important;align-items:center!important;
  justify-content:center!important;flex-direction:row!important;gap:6px!important;white-space:nowrap!important;
  border:1px solid rgba(83,211,145,.25)!important;border-radius:10px!important;
  background:rgba(83,211,145,.08)!important;color:#79e1aa!important;font-size:8px!important;font-weight:900!important;
}
.chat-header-actions .dm-call-btn.hidden{display:none!important}
.chat-header-actions .dm-call-btn:hover{background:rgba(83,211,145,.14)!important;color:#a8f4ca!important}
.chat-header-actions .dm-call-btn:disabled{opacity:.72;cursor:default}.dm-call-icon{font-size:12px;line-height:1}

.private-call-bar{flex:0 0 66px;min-height:66px;padding:9px 18px;display:flex;align-items:center;justify-content:space-between;gap:14px;border-bottom:1px solid rgba(83,211,145,.13);background:linear-gradient(90deg,rgba(54,183,119,.11),rgba(12,18,27,.98))}
.private-call-person{min-width:0;display:flex;align-items:center;gap:10px}.private-call-avatar{width:40px;height:40px;min-width:40px;overflow:hidden;border-radius:50%;display:grid;place-items:center;background:#1a2533;box-shadow:0 0 0 2px rgba(83,211,145,.18)}.private-call-avatar img{width:100%;height:100%;object-fit:cover}
.private-call-copy{min-width:0;display:flex;flex-direction:column;gap:3px}.private-call-copy strong{font-size:10px}.private-call-copy span{color:#8290a3;font-size:8px}
.private-call-actions{display:flex;align-items:center;gap:7px}.private-call-actions button{min-height:34px;padding:0 11px;border:1px solid var(--stroke);border-radius:9px;background:#151e2a;color:#9ca9ba;font-size:8px;font-weight:850;cursor:pointer}.private-call-actions .private-call-control{width:38px;min-width:38px;padding:0;font-size:14px}.private-call-actions .private-call-control.active{color:var(--accent);border-color:rgba(99,215,255,.25);background:rgba(99,215,255,.08)}.private-call-actions .private-call-control.muted{color:#ff818a}
.private-call-accept{color:#79e1aa!important;border-color:rgba(83,211,145,.25)!important;background:rgba(83,211,145,.08)!important}.private-call-decline,.private-call-end{color:#ff868e!important;border-color:rgba(243,104,114,.24)!important;background:rgba(243,104,114,.08)!important}

.private-call-screen-stage{flex:0 0 auto;margin:12px 18px 4px;overflow:hidden;border:1px solid rgba(255,255,255,.085);border-radius:14px;background:#030507;box-shadow:0 18px 42px rgba(0,0,0,.25)}
.private-call-screen-head{min-height:44px;padding:7px 11px 7px 13px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid rgba(255,255,255,.065);background:#0f1621}.private-call-screen-head>div{min-width:0;display:flex;align-items:center;gap:8px}.private-call-screen-head strong{font-size:9px}.private-call-screen-head span{color:#758397;font-size:7px}.private-call-screen-actions button{min-height:29px;padding:0 9px;border:1px solid var(--stroke);border-radius:8px;background:#151e2a;color:#9ba8b9;font-size:7px;cursor:pointer}
.private-call-screen-video{width:100%;aspect-ratio:16/9;max-height:min(60vh,760px);display:grid;place-items:center;background:#000}.private-call-screen-video video{width:100%;height:100%;max-height:min(60vh,760px);object-fit:contain;display:block;background:#000}

.incoming-private-call{position:fixed;right:22px;top:22px;z-index:250;width:min(390px,calc(100vw - 44px));min-height:76px;padding:12px;display:grid;grid-template-columns:46px minmax(0,1fr) auto;align-items:center;gap:11px;border:1px solid rgba(83,211,145,.22);border-radius:14px;background:linear-gradient(180deg,#151e2b,#0d141d);box-shadow:0 24px 70px rgba(0,0,0,.46)}
.incoming-call-avatar{width:46px;height:46px;overflow:hidden;border-radius:50%;display:grid;place-items:center;background:#1c2938}.incoming-call-avatar img{width:100%;height:100%;object-fit:cover}.incoming-call-copy{min-width:0;display:flex;flex-direction:column;gap:3px}.incoming-call-copy span{color:#6edda1;font-size:6px;font-weight:950;letter-spacing:.11em}.incoming-call-copy strong{font-size:10px}
.incoming-call-actions{display:flex;gap:6px}.incoming-call-actions button{min-height:33px;padding:0 9px;border-radius:8px;font-size:7px;font-weight:900;cursor:pointer}.incoming-call-actions .accept{color:#79e1aa;border:1px solid rgba(83,211,145,.25);background:rgba(83,211,145,.08)}.incoming-call-actions .decline{color:#ff868e;border:1px solid rgba(243,104,114,.24);background:rgba(243,104,114,.08)}
@media(max-width:760px){.private-call-bar{align-items:flex-start;flex-direction:column;height:auto}.private-call-actions{width:100%;flex-wrap:wrap}.incoming-private-call{left:12px;right:12px;top:12px;width:auto;grid-template-columns:42px minmax(0,1fr)}.incoming-call-actions{grid-column:1/-1;justify-content:flex-end}}

/* V1.25 — Moderation Pro */
.moderate-member-btn{border-color:rgba(255,188,80,.18)!important;color:#d9b06c!important;background:rgba(255,188,80,.045)!important}
.moderation-modal{width:min(820px,calc(100vw - 28px));max-height:min(780px,calc(100vh - 28px))}
.moderation-member-hero{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--stroke);border-radius:12px;background:#0b111a}
.moderation-member-hero .managed-member-avatar{width:48px;height:48px;min-width:48px}
.moderation-member-hero>div:last-child{display:flex;flex-direction:column;gap:3px}.moderation-member-hero strong{font-size:11px}.moderation-member-hero span{color:#738196;font-size:8px}
.moderation-action-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:14px 0}
.moderation-action-grid button{min-height:45px;border:1px solid var(--stroke);border-radius:10px;background:#111925;color:#94a1b4;font-size:8px;font-weight:900;cursor:pointer}
.moderation-action-grid button:hover,.moderation-action-grid button.active{color:#fff;border-color:rgba(99,215,255,.24);background:rgba(99,215,255,.06)}
.moderation-action-grid button.danger{color:#ef858c}.moderation-action-grid button.danger.active{border-color:rgba(243,104,114,.3);background:rgba(243,104,114,.07)}
.moderation-action-editor{padding:13px;border:1px solid var(--stroke);border-radius:12px;background:#0b111a;display:grid;gap:8px}
.moderation-action-editor>strong{font-size:10px}.moderation-action-editor label{font-size:8px;color:#92a0b2}
.moderation-action-editor select,.moderation-action-editor textarea{width:100%;border:1px solid var(--stroke);border-radius:9px;background:#070c13;color:#dce5f0;padding:9px 10px;font:inherit;font-size:8px}
.moderation-action-editor textarea{resize:vertical;min-height:76px}.moderation-action-editor .settings-primary{justify-self:end;min-width:120px}
.moderation-history-head{margin-top:16px;padding-bottom:9px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--stroke)}
.moderation-history-head>div{display:flex;flex-direction:column;gap:2px}.moderation-history-head strong{font-size:10px}.moderation-history-head span{color:#748195;font-size:7px}
#removeTimeoutBtn{min-height:31px;padding:0 9px;border:1px solid rgba(243,104,114,.2);border-radius:8px;background:rgba(243,104,114,.05);color:#ef858c;font-size:7px;cursor:pointer}
.moderation-history-list{display:flex;flex-direction:column;gap:7px;padding-top:10px}
.moderation-history-item{padding:10px 11px;border:1px solid var(--stroke);border-left:3px solid #57667a;border-radius:9px;background:#0b111a}
.moderation-history-item>div{display:flex;align-items:center;justify-content:space-between;gap:12px}.moderation-history-item strong{font-size:8px}.moderation-history-item span,.moderation-history-item small{color:#748195;font-size:7px}
.moderation-history-item p{margin:6px 0 0;color:#a4b0c0;font-size:8px;line-height:1.45;white-space:pre-wrap}
.moderation-history-item.action-warn{border-left-color:#e3b45d}.moderation-history-item.action-timeout{border-left-color:#6ca5ff}.moderation-history-item.action-ban{border-left-color:#ef6d77}.moderation-history-item.action-kick{border-left-color:#d58b62}.moderation-history-item.action-unban,.moderation-history-item.action-timeout_remove{border-left-color:#5fd499}
@media(max-width:720px){.moderation-action-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* V1.26 — Profiles & Social Pro */
.profile-banner-preview{height:125px;overflow:hidden;display:grid;place-items:center;border:1px solid var(--stroke);border-radius:12px;background:linear-gradient(135deg,#111925,#0b111a);color:#657287;font-size:8px}.profile-banner-preview img{width:100%;height:100%;object-fit:cover}.profile-banner-actions{display:flex;align-items:center;gap:7px;margin:8px 0}.profile-banner-actions button,.profile-secondary-btn{min-height:31px;padding:0 9px;border:1px solid var(--stroke);border-radius:8px;background:#151e2a;color:#9aa7b9;font-size:7px;cursor:pointer}.profile-banner-actions small{margin-left:auto;color:#69768a;font-size:6px}.profile-hero-over-banner{margin-top:-26px;padding-left:13px;position:relative}.profile-hero-over-banner .profile-avatar-preview{box-shadow:0 0 0 4px #101722}
.profile-privacy-section{margin:15px 0;padding:12px;border:1px solid var(--stroke);border-radius:11px;background:#0b111a;display:grid;gap:8px}.profile-section-title{display:flex;flex-direction:column;gap:2px}.profile-section-title strong{font-size:9px}.profile-section-title span{color:#748195;font-size:7px}.profile-privacy-section label{font-size:7px;color:#93a0b1}.profile-privacy-section select{min-height:34px;border:1px solid var(--stroke);border-radius:8px;background:#070c13;color:#dbe4ee;padding:0 9px;font-size:8px}
.member-profile-banner{height:125px;margin:-16px -16px 0;overflow:hidden;background:#101722}.member-profile-banner img{width:100%;height:100%;object-fit:cover}.member-profile-banner:not(.hidden)+.member-profile-hero-v126{margin-top:-26px;padding-left:8px}.member-profile-banner:not(.hidden)+.member-profile-hero-v126 .member-profile-avatar{box-shadow:0 0 0 4px #101722}
.member-profile-mutuals,.member-profile-note-section{margin-top:10px;padding:10px;border:1px solid var(--stroke);border-radius:10px;background:#0b111a}.member-profile-mutuals>strong{font-size:8px}.mutual-community-list{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}.mutual-community-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 7px;border:1px solid rgba(255,255,255,.06);border-radius:999px;background:#141d28;color:#8fa0b5;font-size:7px}.mutual-community-chip i{width:15px;height:15px;border-radius:5px;overflow:hidden;display:grid;place-items:center;background:#1c2938;font-style:normal}.mutual-community-chip img{width:100%;height:100%;object-fit:cover}
.member-profile-note-section{display:grid;gap:7px}.member-profile-note-section label{display:flex;justify-content:space-between;font-size:8px}.member-profile-note-section label span{color:#667489;font-size:6px}.member-profile-note-section textarea{resize:vertical;min-height:55px;border:1px solid var(--stroke);border-radius:8px;background:#070c13;color:#dbe4ee;padding:8px;font:inherit;font-size:8px}.member-profile-note-section button{justify-self:end;min-height:29px;padding:0 9px;border:1px solid var(--stroke);border-radius:7px;background:#151e2a;color:#9dabbd;font-size:7px}.member-profile-social-actions button.danger{color:#ef7e87;border-color:rgba(243,104,114,.2);background:rgba(243,104,114,.05)}.member-profile-social-actions button.unblock{color:#71dda3}.social-badge{color:#70dba1!important;border-color:rgba(83,211,145,.3)!important}
.blocked-users-copy{margin:0 0 12px;color:#7d899b;font-size:8px}.blocked-users-list{display:flex;flex-direction:column;gap:7px}.blocked-user-row{min-height:56px;padding:8px 10px;display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:9px;border:1px solid var(--stroke);border-radius:10px;background:#0b111a}.blocked-user-avatar{width:38px;height:38px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:#182332}.blocked-user-avatar img{width:100%;height:100%;object-fit:cover}.blocked-user-row>div:nth-child(2){display:flex;flex-direction:column;gap:2px}.blocked-user-row strong{font-size:8px}.blocked-user-row span{color:#728095;font-size:7px}.blocked-user-row button{min-height:29px;padding:0 9px;border:1px solid rgba(83,211,145,.18);border-radius:7px;background:rgba(83,211,145,.05);color:#72dca3;font-size:7px}


/* V1.26.1 — Profile Settings viewport/size fix */
#profileModal{
  padding:12px !important;
  align-items:center !important;
  justify-items:center !important;
  overflow:hidden !important;
}

#profileModal .profile-modal{
  width:min(620px, calc(100vw - 24px)) !important;
  height:auto !important;
  max-height:calc(100dvh - 24px) !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
  border-radius:18px !important;
}

#profileModal .settings-head{
  flex:0 0 auto !important;
  padding:14px 18px 12px !important;
  background:#121925 !important;
  position:relative !important;
  z-index:2 !important;
}

#profileModal .settings-head h3{
  font-size:16px !important;
}

#profileModal .settings-body{
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  overscroll-behavior:contain !important;
  padding:14px 18px 18px !important;
  scrollbar-gutter:stable !important;
}

#profileModal .settings-footer{
  flex:0 0 auto !important;
  min-height:56px !important;
  padding:9px 18px !important;
  background:#0e141e !important;
  position:relative !important;
  z-index:2 !important;
}

/* Compact profile sections so 100% zoom works comfortably on 1080p screens. */
#profileModal .profile-banner-preview{
  height:105px !important;
  border-radius:10px !important;
}

#profileModal .profile-banner-actions{
  margin:7px 0 4px !important;
  gap:6px !important;
  flex-wrap:wrap !important;
}

#profileModal .profile-banner-actions small{
  width:100% !important;
  margin-left:0 !important;
}

#profileModal .profile-hero-over-banner{
  margin-top:-22px !important;
  padding-left:10px !important;
}

#profileModal .profile-avatar-preview{
  width:72px !important;
  height:72px !important;
}

#profileModal .profile-avatar-actions-top{
  margin:6px 0 12px !important;
  padding:10px 11px !important;
  border:1px solid var(--stroke) !important;
  border-radius:10px !important;
  background:#0b111a !important;
}

#profileModal .profile-control-label{
  display:block !important;
  margin-bottom:7px !important;
  color:#aeb9c8 !important;
  font-size:9px !important;
  font-weight:750 !important;
}

#profileModal .avatar-actions{
  display:flex !important;
  gap:7px !important;
  flex-wrap:wrap !important;
}

#profileModal .avatar-actions button,
#profileModal .profile-banner-actions button{
  min-height:30px !important;
  padding:0 10px !important;
}

#profileModal .modal-text-input{
  min-height:38px !important;
}

#profileModal .settings-body select{
  height:38px !important;
  min-height:38px !important;
  margin-bottom:11px !important;
}

#profileModal .profile-status-section{
  padding:11px !important;
  margin:10px 0 !important;
}

#profileModal .profile-status-section label{
  margin-bottom:5px !important;
}

#profileModal .profile-about-input{
  min-height:78px !important;
}

#profileModal .profile-privacy-section{
  margin:11px 0 !important;
  padding:11px !important;
  gap:6px !important;
}

#profileModal .profile-notification-setting{
  margin-top:10px !important;
}

#profileModal .profile-footer .settings-primary{
  min-height:36px !important;
  min-width:112px !important;
}

@media (max-height:760px){
  #profileModal{
    padding:8px !important;
  }
  #profileModal .profile-modal{
    max-height:calc(100dvh - 16px) !important;
  }
  #profileModal .settings-head{
    padding:10px 14px 9px !important;
  }
  #profileModal .settings-body{
    padding:10px 14px 14px !important;
  }
  #profileModal .settings-footer{
    min-height:50px !important;
    padding:7px 14px !important;
  }
  #profileModal .profile-banner-preview{
    height:88px !important;
  }
}

@media (max-width:640px){
  #profileModal{
    padding:6px !important;
  }
  #profileModal .profile-modal{
    width:calc(100vw - 12px) !important;
    max-height:calc(100dvh - 12px) !important;
    border-radius:14px !important;
  }
  #profileModal .settings-body{
    padding-left:12px !important;
    padding-right:12px !important;
  }
}


/* V1.26.2 — Profile banner framing / GIF-safe adjustment */
.profile-banner-preview,
.member-profile-banner{
  position:relative;
}

.profile-banner-preview img,
.member-profile-banner img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  will-change:transform,object-position;
}

.profile-banner-actions #adjustProfileBannerBtn:disabled{
  opacity:.42;
  cursor:not-allowed;
}

.profile-banner-adjust-modal{
  width:min(760px,calc(100vw - 28px)) !important;
  max-height:calc(100dvh - 28px) !important;
  display:flex !important;
  flex-direction:column !important;
}

.profile-banner-adjust-body{
  padding:16px 18px 18px;
  overflow-y:auto;
}

.profile-banner-adjust-viewport{
  position:relative;
  width:100%;
  aspect-ratio: 4.8 / 1;
  min-height:150px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.09);
  border-radius:13px;
  background:#070b11;
  cursor:grab;
  touch-action:none;
  user-select:none;
}

.profile-banner-adjust-viewport.dragging{
  cursor:grabbing;
}

.profile-banner-adjust-viewport img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  pointer-events:none;
  user-select:none;
  will-change:transform,object-position;
}

.profile-banner-adjust-guide{
  position:absolute;
  inset:8px;
  border:1px dashed rgba(255,255,255,.22);
  border-radius:9px;
  pointer-events:none;
  box-shadow:inset 0 0 40px rgba(0,0,0,.08);
}

.profile-banner-adjust-readout{
  margin:9px 1px 4px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color:#7d899c;
  font-size:7px;
}

.profile-banner-adjust-readout strong{
  color:var(--accent);
  font-size:8px;
}

.profile-banner-zoom-controls{
  margin-top:4px;
}

@media(max-width:640px){
  .profile-banner-adjust-viewport{
    min-height:110px;
  }
}

/* V1.28 — rebuilt user settings */
#profileModal{padding:18px!important}
#profileModal .profile-modal{width:min(980px,calc(100vw - 36px))!important;height:min(760px,calc(100dvh - 36px))!important;max-height:none!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;border:1px solid rgba(255,255,255,.09)!important;border-radius:18px!important;background:#0f1621!important;box-shadow:0 30px 100px rgba(0,0,0,.55)!important}
#profileModal .settings-head{flex:0 0 72px!important;padding:0 22px!important;border-bottom:1px solid rgba(255,255,255,.07)!important;background:#111925!important}
#profileModal .settings-head h3{font-size:17px!important}
#profileModal .profile-settings-shell{padding:0!important;display:grid!important;grid-template-columns:190px minmax(0,1fr)!important;flex:1 1 auto!important;min-height:0!important;overflow:hidden!important;background:#0c121b!important}
.profile-settings-nav{min-height:0;padding:18px 12px;display:flex;flex-direction:column;gap:5px;border-right:1px solid rgba(255,255,255,.065);background:#0b1119}
.profile-nav-label{padding:0 10px 8px;color:#526178;font-size:7px;font-weight:900;letter-spacing:1.3px}
.profile-settings-nav button{width:100%;min-height:39px;padding:0 11px;display:flex;align-items:center;gap:10px;border:0;border-radius:9px;background:transparent;color:#8290a4;font-size:9px;font-weight:750;text-align:left;cursor:pointer}
.profile-settings-nav button>span{width:18px;color:#53647a;text-align:center}
.profile-settings-nav button:hover{background:rgba(255,255,255,.045);color:#dce6f1}
.profile-settings-nav button.active{background:rgba(99,215,255,.095);color:#e7f8ff;box-shadow:inset 2px 0 0 var(--accent)}
.profile-settings-nav button.active>span{color:var(--accent)}
.profile-nav-spacer{flex:1}
.profile-settings-nav .profile-nav-logout{color:#ff818b;background:rgba(243,104,114,.055)}
.profile-settings-content{min-width:0;min-height:0;overflow-y:auto;padding:24px 28px 34px;scrollbar-gutter:stable}
.profile-settings-panel{display:none;max-width:690px;margin:0 auto}
.profile-settings-panel.active{display:block;animation:profilePanelIn .16s ease-out}
@keyframes profilePanelIn{from{opacity:.35;transform:translateY(3px)}to{opacity:1;transform:none}}
.profile-panel-heading{margin-bottom:16px}
.profile-panel-heading>span{color:var(--accent);font-size:7px;font-weight:900;letter-spacing:1.4px}
.profile-panel-heading h4{margin:4px 0 3px;color:#eef5fc;font-size:20px;line-height:1.15}
.profile-panel-heading p{margin:0;color:#66758a;font-size:8px}
.profile-editor-card{position:relative;margin-bottom:16px;border:1px solid rgba(255,255,255,.08);border-radius:16px;background:#101925;overflow:hidden}
#profileModal .profile-banner-preview{position:relative!important;width:100%!important;height:150px!important;border:0!important;border-radius:0!important;background:linear-gradient(135deg,#172537,#0c131e)!important;overflow:hidden!important}
#profileModal .profile-banner-preview img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover!important;display:block!important}
#profileModal .profile-banner-actions{position:absolute;z-index:4;top:12px;right:12px;margin:0!important;display:flex!important;gap:6px!important}
#profileModal .profile-banner-actions button{min-height:30px!important;padding:0 10px!important;border:1px solid rgba(255,255,255,.12)!important;border-radius:8px!important;background:rgba(5,9,14,.78)!important;backdrop-filter:blur(8px);color:#dce5ef!important;font-size:7px!important;font-weight:800!important}
#profileModal .profile-banner-actions button:hover{border-color:rgba(99,215,255,.35)!important;color:var(--accent)!important}
#profileModal .profile-banner-actions .danger-soft{color:#ff949c!important}
.profile-identity-row{position:relative;min-height:94px;padding:12px 18px 15px 128px;display:flex;align-items:center;gap:14px}
.profile-avatar-editor{position:absolute;z-index:5;left:20px;top:-38px;width:94px;height:94px}
#profileModal .profile-avatar-preview{position:relative!important;width:94px!important;height:94px!important;min-width:94px!important;max-width:94px!important;border:5px solid #101925!important;border-radius:50%!important;background:#172437!important;overflow:hidden!important;box-shadow:0 8px 24px rgba(0,0,0,.32)!important}
#profileModal .profile-avatar-preview img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;border-radius:50%!important}
.profile-avatar-edit-btn{position:absolute;z-index:6;right:-1px;bottom:1px;width:29px;height:29px;border:3px solid #101925;border-radius:50%;background:var(--accent);color:#071019;font-size:12px;font-weight:900;cursor:pointer}
.profile-identity-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
.profile-identity-copy strong{font-size:13px;color:#edf4fc}
.profile-identity-copy span{color:#66758a;font-size:7px}
.profile-remove-avatar{margin-left:auto;min-height:30px;padding:0 10px;border:1px solid rgba(243,104,114,.18);border-radius:8px;background:rgba(243,104,114,.055);color:#ff8d96;font-size:7px;cursor:pointer}
.profile-form-card,.profile-tab-card{padding:17px;border:1px solid rgba(255,255,255,.075);border-radius:14px;background:#0a1018}
.profile-form-card label,.profile-tab-card>label{display:block;margin:0 0 7px;color:#aab6c6;font-size:8px;font-weight:800}
.profile-form-card .modal-text-input,.profile-tab-card .modal-text-input,.profile-tab-card select{width:100%;min-height:42px!important;margin:0 0 15px!important;border:1px solid #202c3b!important;border-radius:10px!important;background:#070c12!important;color:#e0e8f1!important;padding:0 12px!important;font-size:10px!important}
.profile-form-card .profile-about-input{width:100%;min-height:102px!important;margin:0!important;border:1px solid #202c3b!important;border-radius:10px!important;background:#070c12!important;color:#dce5ef!important;padding:11px 12px!important;font-size:9px!important;resize:vertical}
.profile-file-note{margin-top:10px;color:#526178;font-size:7px}
#profileModal .profile-status-section,#profileModal .profile-privacy-section,#profileModal .profile-notification-setting{margin:0!important}
#profileModal .presence-status-row{display:grid;grid-template-columns:1fr 22px;gap:10px;align-items:center}
#profileModal .profile-status-save{width:100%;min-height:38px;border-radius:9px}
#profileModal .profile-secondary-btn{width:100%;margin-top:4px;min-height:38px}
#profileModal .profile-notification-setting{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:18px!important}
#profileModal .profile-notification-setting>div{display:flex;flex-direction:column;gap:4px}
#profileModal .settings-footer{flex:0 0 62px!important;min-height:62px!important;padding:10px 22px!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:14px!important;border-top:1px solid rgba(255,255,255,.07)!important;background:#111925!important}
#profileModal .settings-footer .error{margin-right:auto}
#profileModal .profile-footer .settings-primary{min-width:132px!important;min-height:39px!important}

@media(max-width:760px){
  #profileModal{padding:7px!important}
  #profileModal .profile-modal{width:calc(100vw - 14px)!important;height:calc(100dvh - 14px)!important}
  #profileModal .profile-settings-shell{grid-template-columns:1fr!important;grid-template-rows:auto minmax(0,1fr)!important}
  .profile-settings-nav{padding:8px;flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid rgba(255,255,255,.065)}
  .profile-nav-label,.profile-nav-spacer{display:none}
  .profile-settings-nav button{width:auto;flex:0 0 auto;min-height:34px;padding:0 10px}
  .profile-settings-nav .profile-nav-logout{margin-left:auto}
  .profile-settings-content{padding:18px 14px 28px}
  #profileModal .profile-banner-preview{height:120px!important}
  .profile-identity-row{padding-left:103px}
  .profile-avatar-editor{left:14px;width:78px;height:78px}
  #profileModal .profile-avatar-preview{width:78px!important;height:78px!important;min-width:78px!important;max-width:78px!important}
  .profile-remove-avatar{display:none}
}


/* V1.26.3 — Persisted banner framing fix + community banner adjustment */
#communityPreviewBanner,
#communitySidebarBanner,
#communityHomeBanner{
  overflow:hidden;
}

#communityPreviewBanner img,
#communitySidebarBannerImage,
#communityHomeBannerImage{
  will-change:transform,object-position;
}

#adjustCommunityBannerBtn:disabled{
  opacity:.42;
  cursor:not-allowed;
}

.community-banner-adjust-viewport{
  aspect-ratio: 5.5 / 1;
}

/* V1.29 — profile polish, readable type and stable chat headers */
.member-profile-modal .settings-body{padding:18px 20px 20px}
.member-profile-modal .member-profile-banner{height:104px;margin:-18px -20px 0;z-index:0}
.member-profile-modal .member-profile-banner:not(.hidden)+.member-profile-hero-v126{position:relative;z-index:2;margin-top:-18px;padding:0 0 18px 10px}
.member-profile-modal .member-profile-avatar{width:72px;height:72px;min-width:72px;min-height:72px;aspect-ratio:1/1;flex-shrink:0;border-radius:50%;box-shadow:0 0 0 4px #101722,0 8px 20px rgba(0,0,0,.3)!important}
#profileModal .profile-avatar-editor{aspect-ratio:1/1!important;flex:0 0 auto!important}
#profileModal .profile-avatar-preview{aspect-ratio:1/1!important;flex:0 0 auto!important;border-radius:999px!important}
#profileModal .profile-avatar-preview img{border-radius:999px!important}
.chat-header{position:relative;z-index:8;min-height:64px!important;overflow:visible!important;align-items:center!important}
.chat-header>.chat-title-block{flex:1 1 auto;min-width:0;flex-direction:column!important;justify-content:center}
.chat-header>.chat-header-actions{flex:0 0 auto;min-width:0;height:100%;flex-direction:row!important;align-items:center!important;justify-content:flex-end!important;align-self:center!important;margin:0!important;transform:none!important}
.chat-header-actions .chat-invite-btn,.chat-header-actions .dm-call-btn{position:relative!important;top:auto!important;bottom:auto!important;margin:0!important;transform:none!important;align-self:center!important}
.community-title strong{font-size:15px}.community-title span{font-size:12px}
.section-title,.dm-sidebar-label{font-size:11px}
.channel{min-height:46px;padding:10px 11px}.channel strong{font-size:15px}.channel small{font-size:12px}
.participant-name{font-size:14px}.participant-state{font-size:12px}.self-info strong{font-size:14px}.self-info span{font-size:11px}
.mini-voice-dock strong{font-size:14px}.mini-voice-dock span{font-size:11px}.crumb{font-size:12px}
.stage-header strong,.chat-header strong{font-size:15px}.chat-header span,.chat-message-count{font-size:11px}
.room-kicker,.settings-kicker{font-size:10px}.room-overview h2{font-size:22px}.room-overview p,.room-overview-meta{font-size:12px}
.stage-person-name{font-size:15px}.stage-person-status{font-size:12px}.you-pill{font-size:9px}.control small{font-size:11px}.screen-head{font-size:12px}
.message-head strong{font-size:15px}.message-head span{font-size:11px}.message-head em{font-size:10px}.message-body{font-size:15px;line-height:1.55}
.app-shell.text-mode .welcome-message p{font-size:13px}.chat-form textarea,.chat-form input{font-size:14px}.chat-message-count{white-space:nowrap}
.member-panel-header strong{font-size:14px}.member-panel-header span{font-size:11px}.right-member strong{font-size:14px}.right-member span{font-size:11px}.member-group-title{font-size:11px}
.dm-sidebar-head strong{font-size:15px}.dm-sidebar-head span{font-size:11px}.dm-conversation strong{font-size:14px}.dm-conversation span{font-size:11px}
.profile-settings-nav button{font-size:12px}.profile-nav-label,.profile-panel-heading>span{font-size:10px}.profile-panel-heading p{font-size:11px}
.profile-identity-copy strong{font-size:15px}.profile-identity-copy span{font-size:11px}.profile-form-card label,.profile-tab-card>label{font-size:11px}
.profile-form-card .modal-text-input,.profile-tab-card .modal-text-input,.profile-tab-card select{font-size:13px!important}.profile-form-card .profile-about-input{font-size:13px!important}.profile-file-note{font-size:10px}
.member-profile-hero>div:last-child>span{font-size:11px}.member-role-chip{font-size:9px}.member-profile-custom-status,.member-profile-about{font-size:12px}
.member-profile-info span{font-size:9px}.member-profile-info strong{font-size:13px}.member-profile-social-actions button{font-size:11px}
@media(max-width:1100px){.message-body{font-size:14px}.channel strong,.chat-header strong{font-size:14px}}

/* V1.30 — responsive workspace + clean DM-to-voice return */
html,body{width:100%;height:100%;overflow:hidden}
.app-shell{width:100%;height:100vh;height:100dvh;min-width:0;min-height:0}
.app-shell>*{min-width:0;min-height:0}
.channel-panel,.stage,.chat-panel,.member-panel{max-height:100vh;max-height:100dvh}
.channel-panel{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
.channel-list{min-height:0}
.stage-content{min-width:0;min-height:0}
.room-stage-grid{width:100%;min-width:0}

/* Medium desktop / secondary displays: preserve the main canvas and stop the
   chat column from squeezing every other part of the app. */
@media(max-width:1500px){
  .app-shell:not(.text-mode){grid-template-columns:64px 220px minmax(0,1fr) minmax(280px,300px)!important}
  .app-shell.text-mode{grid-template-columns:64px 220px minmax(0,1fr) 230px!important}
  .stage-content{padding:22px}
  .stage-grid{gap:14px}
}

@media(max-width:1220px){
  .app-shell:not(.text-mode){grid-template-columns:60px 205px minmax(0,1fr) minmax(260px,280px)!important}
  .app-shell.text-mode{grid-template-columns:60px 205px minmax(0,1fr)!important}
  .app-shell.text-mode .member-panel{display:none!important}
  .server-rail{padding-top:12px;gap:10px}
  .channel-panel{padding:14px 10px 10px}
  .stage-content{padding:18px}
  .stage-grid{gap:12px}
  .stage-person-card{min-height:205px}
  .stage-avatar{width:68px;height:68px}
}

/* When height is limited, fit the complete voice experience above the taskbar. */
@media(max-height:860px){
  .stage-header,.chat-header{height:58px!important;min-height:58px!important;flex-basis:58px!important}
  .stage-content{padding-top:16px;padding-bottom:12px}
  .room-overview{margin-bottom:12px}
  .stage-grid{margin-bottom:12px}
  .stage-person-card{min-height:190px;padding:16px}
  .stage-avatar{width:62px;height:62px}
  .controls{padding:7px;gap:7px}
  .control{height:52px;width:58px}
  .mini-voice-dock{padding:9px;margin-top:8px}
  .self-card{padding:8px;margin-top:8px}
}

/* Tablet widths: the optional live chat yields to the voice stage. Text chat
   still occupies the full content area whenever a text channel or DM is open. */
@media(max-width:980px){
  .app-shell:not(.text-mode){grid-template-columns:56px 210px minmax(0,1fr)!important}
  .app-shell:not(.text-mode)>.chat-panel{display:none!important}
  .app-shell.text-mode,.app-shell.dm-mode.text-mode{grid-template-columns:56px 210px minmax(0,1fr)!important}
  .app-shell.text-mode .chat-panel{grid-column:3!important}
  .stage-grid{grid-template-columns:1fr!important}
  .stage-person-card{min-height:170px}
}

/* Phone layout: never render desktop minimum widths inside the viewport. */
@media(max-width:720px){
  .app-shell,.app-shell.text-mode,.app-shell.dm-mode.text-mode,.app-shell.dm-home-mode{
    width:100vw!important;height:100vh!important;height:100dvh!important;
    grid-template-columns:minmax(0,1fr)!important;grid-template-rows:minmax(0,1fr)!important;
    overflow:hidden!important
  }
  .server-rail,.channel-panel,.member-panel{display:none!important}
  .stage{display:flex!important;grid-column:1!important;width:100%!important;min-width:0!important}
  .app-shell.text-mode .stage{display:none!important}
  .app-shell .chat-panel,.app-shell.text-mode .chat-panel{
    grid-column:1!important;position:relative!important;inset:auto!important;
    width:100%!important;min-width:0!important;max-width:100vw!important;
    height:100dvh!important;transform:none!important
  }
  .app-shell:not(.text-mode) .chat-panel{display:none!important}
  .app-shell.text-mode .chat-panel{display:flex!important}
  .stage-header,.chat-header{padding:0 12px!important;gap:8px}
  .stage-content{width:100%;padding:14px 10px 10px!important;overflow-y:auto}
  .room-overview{width:100%}
  .room-overview-head{align-items:flex-start;gap:8px}
  .stage-grid{width:100%;grid-template-columns:1fr!important;gap:10px}
  .stage-person-card{min-height:150px;width:100%;padding:14px}
  .stage-avatar{width:58px;height:58px}
  .controls{position:sticky!important;bottom:6px!important;width:max-content;max-width:100%;overflow-x:auto;justify-content:flex-start}
  .control{min-width:54px;width:54px;height:50px}
  .control small{font-size:10px}
  .chat-header-actions{gap:5px!important}
  .chat-message-count{display:none}
  .chat-header-actions .chat-invite-btn,.chat-header-actions .dm-call-btn{min-width:auto!important;padding:0 8px!important}
  .app-shell.text-mode .messages{padding:16px 10px 12px!important}
  .message{grid-template-columns:36px minmax(0,1fr) auto;padding:6px 5px;margin:2px -5px}
  .message .participant-avatar{width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important}
  .message-body{font-size:14px}
  .chat-form{margin:6px 8px 8px!important;max-width:calc(100vw - 16px)}
  .social-home{padding:20px 14px 30px}
  .social-home-head{gap:10px}.social-home-head h2{font-size:23px}
}

/* V1.31 — one adaptive desktop canvas, plus a real mobile workspace. */
.mobile-header-btn,.mobile-workspace-backdrop{display:none}

@media(min-width:900px){
  #roomView.desktop-fit{min-width:0!important;min-height:0!important;max-width:none!important;max-height:none!important;overflow:hidden!important;transform-origin:top left}
  #roomView.desktop-fit:not(.text-mode){grid-template-columns:70px 245px minmax(520px,1fr) 330px!important;grid-template-rows:minmax(0,1fr)!important}
  #roomView.desktop-fit.text-mode{grid-template-columns:70px 245px minmax(520px,1fr) 260px!important;grid-template-rows:minmax(0,1fr)!important}
  #roomView.desktop-fit.dm-mode.text-mode{grid-template-columns:70px 245px minmax(520px,1fr)!important}
  #roomView.desktop-fit.dm-home-mode{grid-template-columns:70px 245px minmax(520px,1fr)!important}
  #roomView.desktop-fit .server-rail{display:flex!important;padding:16px 0!important;gap:14px!important}
  #roomView.desktop-fit .channel-panel{display:flex!important;padding:18px 12px 12px!important}
  #roomView.desktop-fit .stage-content{padding:28px!important}
  #roomView.desktop-fit .stage-header,#roomView.desktop-fit .chat-header{height:64px!important;min-height:64px!important;flex-basis:64px!important}
  #roomView.desktop-fit:not(.text-mode)>.chat-panel{display:flex!important}
  #roomView.desktop-fit .stage-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px!important}
  #roomView.desktop-fit .stage-person-card{min-height:220px!important;padding:20px!important}
  #roomView.desktop-fit .stage-avatar{width:76px!important;height:76px!important}
  #roomView.desktop-fit .controls{position:relative!important;bottom:auto!important;padding:9px!important;gap:9px!important}
  #roomView.desktop-fit .control{width:62px!important;height:56px!important}
}

@media(max-width:899px){
  html,body{width:100%;height:100%;overflow:hidden}
  #roomView.mobile-workspace,#roomView.mobile-workspace.text-mode,#roomView.mobile-workspace.dm-mode.text-mode,#roomView.mobile-workspace.dm-home-mode{position:relative!important;width:100vw!important;height:100vh!important;height:100dvh!important;min-width:0!important;min-height:0!important;max-width:100vw!important;max-height:100dvh!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:minmax(0,1fr)!important;overflow:hidden!important;zoom:1!important}
  #roomView.mobile-workspace .mobile-header-btn{width:36px;height:36px;min-width:36px;display:grid;place-items:center;border:1px solid var(--stroke);border-radius:10px;background:#141d29;color:#dce7f3;font-size:16px;cursor:pointer}
  #roomView.mobile-workspace .stage-header>div:first-child{min-width:0;display:flex;align-items:center;gap:9px}
  #roomView.mobile-workspace .stage-header .crumb{display:none}
  #roomView.mobile-workspace .stage-header,#roomView.mobile-workspace .chat-header{height:58px!important;min-height:58px!important;flex-basis:58px!important;padding:0 10px!important}
  #roomView.mobile-workspace>.server-rail,#roomView.mobile-workspace>.channel-panel{display:none!important}
  #roomView.mobile-workspace>.stage{display:flex!important;grid-column:1!important;grid-row:1!important;width:100%!important;height:100dvh!important;min-width:0!important}
  #roomView.mobile-workspace.text-mode>.stage{display:none!important}
  #roomView.mobile-workspace>.member-panel,#roomView.mobile-workspace>.chat-panel{display:none!important}
  #roomView.mobile-workspace.text-mode>.chat-panel,#roomView.mobile-workspace.mobile-chat-open>.chat-panel{position:absolute!important;z-index:70!important;inset:0!important;display:flex!important;width:100vw!important;height:100dvh!important;min-width:0!important;max-width:100vw!important;transform:none!important;border:0!important}
  #roomView.mobile-workspace.mobile-nav-open>.server-rail{position:absolute!important;z-index:102!important;inset:0 auto 0 0!important;width:58px!important;height:100dvh!important;display:flex!important;padding:10px 0!important;gap:10px!important}
  #roomView.mobile-workspace.mobile-nav-open>.channel-panel{position:absolute!important;z-index:101!important;inset:0 auto 0 58px!important;width:min(300px,calc(100vw - 58px))!important;height:100dvh!important;display:flex!important;padding:14px 10px 10px!important;box-shadow:24px 0 60px rgba(0,0,0,.55)}
  #roomView.mobile-workspace.mobile-nav-open .mobile-workspace-backdrop,#roomView.mobile-workspace.mobile-chat-open .mobile-workspace-backdrop{position:absolute;z-index:90;inset:0;display:block;width:100%;height:100%;border:0;background:rgba(0,0,0,.5)}
  #roomView.mobile-workspace .stage-content{width:100%;min-width:0;padding:14px 10px 10px!important;overflow-y:auto!important}
  #roomView.mobile-workspace .room-overview{width:100%}
  #roomView.mobile-workspace .stage-grid{width:100%;grid-template-columns:1fr!important;gap:10px!important}
  #roomView.mobile-workspace .stage-person-card{width:100%;min-height:150px!important;padding:14px!important}
  #roomView.mobile-workspace .stage-avatar{width:58px!important;height:58px!important}
  #roomView.mobile-workspace .controls{position:sticky!important;bottom:6px!important;max-width:100%;overflow-x:auto;flex:0 0 auto}
  #roomView.mobile-workspace .control{width:54px!important;min-width:54px!important;height:50px!important}
  #roomView.mobile-workspace .chat-header{gap:8px!important}
  #roomView.mobile-workspace .chat-title-block{flex:1 1 auto!important}
  #roomView.mobile-workspace .chat-header-actions{height:100%;gap:5px!important}
  #roomView.mobile-workspace .chat-message-count{display:none!important}
  #roomView.mobile-workspace .messages{padding:14px 9px 10px!important}
  #roomView.mobile-workspace .chat-form{margin:6px 8px 8px!important;width:calc(100vw - 16px)!important;max-width:none!important}
  #roomView.mobile-workspace .social-home{width:100%;padding:18px 13px 28px!important}
}

/* V1.41.1 — responsive audio modal, stable DM actions, universal scrollbars */
#settingsModal{padding:12px!important;overflow:hidden!important;place-items:center!important}
#settingsModal>.settings-modal{width:min(600px,calc(100vw - 24px))!important;max-width:100%!important;max-height:calc(100vh - 24px)!important;max-height:calc(100dvh - 24px)!important;display:flex!important;flex-direction:column!important;overflow:hidden!important}
#settingsModal .settings-head{flex:0 0 auto!important;position:relative;z-index:2;background:#121925}
#settingsModal .settings-body{flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain;padding-bottom:22px!important;scrollbar-gutter:stable}
#settingsModal .settings-footer{flex:0 0 auto!important;position:relative;z-index:2;background:#0e141e}
@media(max-height:700px){#settingsModal{padding:8px!important}#settingsModal>.settings-modal{max-height:calc(100vh - 16px)!important;max-height:calc(100dvh - 16px)!important}#settingsModal .settings-head{padding-top:13px!important;padding-bottom:11px!important}#settingsModal .settings-footer{min-height:54px!important;padding-top:8px!important;padding-bottom:8px!important}}

.chat-header-actions{display:flex!important;align-items:center!important;gap:8px!important;white-space:nowrap!important}
.chat-header-actions .dm-invite-community-btn,.chat-header-actions .dm-call-btn{position:relative!important;inset:auto!important;transform:none!important;flex:0 0 auto!important;width:auto!important;min-width:78px!important;height:34px!important;min-height:34px!important;margin:0!important;padding:0 12px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;flex-direction:row!important;gap:6px!important;white-space:nowrap!important;overflow:hidden!important;line-height:1!important}
.chat-header-actions .dm-invite-community-btn.hidden,.chat-header-actions .dm-call-btn.hidden{display:none!important}
.chat-header-actions .dm-invite-community-btn>span,.chat-header-actions .dm-call-btn>span{position:static!important;display:inline-block;flex:0 0 auto;white-space:nowrap;line-height:1!important}
@media(max-width:1100px){.chat-header-actions .dm-invite-community-btn,.chat-header-actions .dm-call-btn{min-width:38px!important;width:38px!important;padding:0!important}.chat-header-actions .dm-invite-community-btn>span:last-child,.chat-header-actions .dm-call-btn>span:last-child{display:none!important}}

*{scrollbar-width:thin;scrollbar-color:rgba(108,123,145,.48) transparent}
*::-webkit-scrollbar{width:6px;height:6px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:rgba(108,123,145,.4);border:1px solid transparent;border-radius:999px;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:rgba(124,141,165,.65);background-clip:padding-box}
*::-webkit-scrollbar-button{width:0!important;height:0!important;display:none!important}
*::-webkit-scrollbar-corner{background:transparent}
.member-context-menu{scrollbar-width:thin!important;scrollbar-color:rgba(108,123,145,.48) transparent!important}

/* V1.40 — welcome cards and first-entry onboarding */
.welcome-settings-grid{margin:10px 0}.community-onboarding-role-settings{display:flex;flex-wrap:wrap;gap:7px;margin:5px 0 12px}.onboarding-role-setting{padding:8px 10px;display:flex;align-items:center;gap:7px;border:1px solid var(--stroke);border-radius:9px;background:#0d141e;color:#aeb9c8;font-size:8px;cursor:pointer}.onboarding-role-setting i,.onboarding-role-list i{width:9px;height:9px;border-radius:50%}.welcome-card-preview{margin:10px 0 16px;padding:14px;border:1px solid rgba(99,215,255,.2);border-left:3px solid var(--accent);border-radius:12px;background:#0d141e}.welcome-card-preview>span,.community-system-card>span{display:block;color:var(--accent);font-size:7px;font-weight:950;letter-spacing:.12em}.welcome-card-preview>strong{display:block;margin-top:5px;font-size:12px}.welcome-card-preview>p{margin:5px 0 0;color:#98a7ba;font-size:9px}.community-system-card{margin:2px 0 5px;padding:12px 14px;border:1px solid rgba(99,215,255,.14);border-left:3px solid var(--accent);border-radius:11px;background:#0e1620}.community-system-card.leave{border-left-color:#7f8da1}.community-system-card.leave>span{color:#8d9caf}.community-system-card>strong{display:block;margin-top:4px;font-size:11px}.community-system-card>p{margin:5px 0 0;color:#a9b6c6;font-size:9px}.community-onboarding-modal{width:min(620px,calc(100vw - 30px));max-height:calc(100vh - 40px);overflow:auto;padding:30px;border:1px solid rgba(99,215,255,.2);border-radius:20px;background:#0d141e;box-shadow:0 30px 100px rgba(0,0,0,.65);text-align:center}.onboarding-community-icon{width:76px;height:76px;margin:0 auto 14px;display:grid;place-items:center;overflow:hidden;border-radius:22px;background:#192638;font-size:24px;font-weight:950}.onboarding-community-icon img{width:100%;height:100%;object-fit:cover}.community-onboarding-modal h2{margin:6px 0;font-size:24px}.community-onboarding-modal>p{margin:0 auto 20px;max-width:480px;color:#99a8bb;line-height:1.6}.onboarding-rules-box,.onboarding-role-section{margin:12px 0;padding:15px;border:1px solid var(--stroke);border-radius:12px;background:#09111a;text-align:left}.onboarding-rules-box>div{margin:10px 0;padding:12px;max-height:180px;overflow:auto;white-space:pre-wrap;border-radius:9px;background:#0f1824;color:#aab6c6;font-size:9px;line-height:1.65}.onboarding-rules-box label{display:flex;align-items:center;gap:8px;color:#d7e0eb;font-size:9px}.onboarding-role-section>strong{display:flex;justify-content:space-between}.onboarding-role-section small{color:#78879b;font-size:7px}.onboarding-role-list{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}.onboarding-role-list label{padding:9px 11px;display:flex;align-items:center;gap:7px;border:1px solid var(--stroke);border-radius:9px;background:#111b28;font-size:9px;cursor:pointer}.community-onboarding-modal>.settings-primary{width:100%;min-height:42px;margin-top:12px}

/* V1.38 messaging experience */
.message.pinned-message{background:linear-gradient(90deg,rgba(99,215,255,.055),transparent 58%)}
.pinned-label{color:#63d7ff!important}
.pinned-messages-panel{position:absolute;z-index:45;top:58px;right:12px;width:min(390px,calc(100% - 24px));max-height:calc(100% - 78px);display:flex;flex-direction:column;border:1px solid var(--stroke);border-radius:14px;background:#0d131d;box-shadow:0 22px 60px rgba(0,0,0,.48);overflow:hidden}
.pinned-messages-head{display:flex;align-items:center;justify-content:space-between;padding:14px 15px;border-bottom:1px solid var(--stroke)}
.pinned-messages-head div{display:flex;flex-direction:column;gap:2px}.pinned-messages-head span{font-size:7px;letter-spacing:.14em;color:var(--accent)}.pinned-messages-head strong{font-size:13px}
.pinned-messages-head button{width:29px;height:29px;border:1px solid var(--stroke);border-radius:8px;background:#151d29;color:#9aa7b8;cursor:pointer}
.pinned-messages-list{overflow:auto;padding:10px}.pinned-message-card{position:relative;padding:12px 58px 12px 12px;margin-bottom:8px;border:1px solid var(--stroke);border-radius:10px;background:#111925;cursor:pointer}
.pinned-message-card>div{display:flex;gap:7px;align-items:center}.pinned-message-card strong{font-size:10px}.pinned-message-card span{font-size:7px;color:#667488}.pinned-message-card p{margin:7px 0 0;color:#b9c4d2;font-size:10px;line-height:1.45;word-break:break-word}
.pinned-message-card>button{position:absolute;right:10px;top:12px;border:1px solid var(--stroke);border-radius:7px;background:#172131;color:#91dcff;font-size:8px;padding:6px 8px;cursor:pointer}
.pinned-messages-empty{padding:30px 18px;text-align:center;display:flex;flex-direction:column;gap:6px}.pinned-messages-empty strong{font-size:11px}.pinned-messages-empty span{font-size:9px;color:#6f7d90;line-height:1.5}
.channel-notification-menu{position:absolute;z-index:48;top:54px;right:64px;width:260px;padding:9px;border:1px solid var(--stroke);border-radius:12px;background:#101721;box-shadow:0 18px 48px rgba(0,0,0,.44)}
.channel-notification-menu>strong{display:block;padding:6px 8px 8px;font-size:9px;color:#728095;text-transform:uppercase;letter-spacing:.08em}
.channel-notification-menu button{width:100%;display:grid;grid-template-columns:26px 1fr;gap:8px;align-items:center;padding:9px;border:0;border-radius:8px;background:transparent;color:#b8c2d0;text-align:left;cursor:pointer}.channel-notification-menu button:hover,.channel-notification-menu button.active{background:#192331;color:#fff}.channel-notification-menu button.active{box-shadow:inset 2px 0 var(--accent)}
.channel-notification-menu button>span{font-size:14px}.channel-notification-menu button div{display:flex;flex-direction:column;gap:2px}.channel-notification-menu b{font-size:10px}.channel-notification-menu small{font-size:8px;color:#718096}
.message-context-menu{position:fixed;z-index:180;width:180px;padding:6px;border:1px solid var(--stroke);border-radius:10px;background:#111822;box-shadow:0 18px 48px rgba(0,0,0,.5)}
.message-context-menu button{width:100%;display:flex;gap:9px;align-items:center;padding:8px 10px;border:0;border-radius:7px;background:transparent;color:#aeb9c8;font-size:10px;text-align:left;cursor:pointer}.message-context-menu button:hover{background:#1b2634;color:#fff}.message-context-menu button.danger{color:#ff9299}.message-context-menu button.danger:hover{background:rgba(243,104,114,.12)}

/* V1.34 — account navigation memory, smooth server sorting and adaptive emoji browser. */
.community-rail-list{touch-action:pan-y}
.rail-community-wrap{transition:transform .15s ease,opacity .15s ease;user-select:none;-webkit-user-select:none}
.rail-community{touch-action:pan-y;cursor:pointer}
.rail-community-sorting .rail-community-wrap:not(.rail-community-dragging){transition:transform .15s ease}
.rail-community-sorting{touch-action:none}.rail-community-dragging{z-index:20;opacity:.88;transform:scale(1.07);will-change:transform}.rail-community-dragging .rail-community{cursor:grabbing}
.rail-community-dragging .rail-community{border-color:rgba(99,215,255,.48);box-shadow:0 12px 30px rgba(0,0,0,.42)}

#emojiPicker{
  position:fixed!important;z-index:260!important;
  width:clamp(340px,28vw,430px)!important;
  max-width:calc(100vw - 16px)!important;
  height:min(570px,calc(100dvh - 24px))!important;
  max-height:calc(100dvh - 24px)!important;
  padding:0!important;overflow:hidden!important;
  display:flex;flex-direction:column;
  border-radius:16px!important;background:#111925!important
}
#emojiPicker.hidden{display:none!important}
.emoji-browser-head{flex:0 0 auto;min-height:48px;padding:0 14px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--stroke)}
.emoji-browser-head strong{font-size:14px}.emoji-browser-head span{font-size:11px;color:var(--muted)}
.emoji-search-wrap{flex:0 0 auto;margin:10px 12px 7px;height:40px;display:flex;align-items:center;gap:8px;padding:0 11px;border:1px solid var(--stroke);border-radius:10px;background:#090f17;color:#6f7d91}
.emoji-search-wrap input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:#e8eef7;font:inherit;font-size:13px}
.emoji-category-tabs{flex:0 0 auto;display:flex;gap:3px;padding:3px 10px 8px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid rgba(255,255,255,.055)}
.emoji-category-tabs::-webkit-scrollbar{display:none}
.emoji-category-tabs button{width:34px;height:34px;min-width:34px;border:0;border-radius:8px;background:transparent;font-size:18px;cursor:pointer;filter:grayscale(.65);opacity:.7}
.emoji-category-tabs button:hover,.emoji-category-tabs button.active{background:#1d2735;filter:none;opacity:1}
#emojiGrid.emoji-browser-grid{display:block!important;min-height:0;flex:1 1 auto;overflow-y:auto!important;overflow-x:hidden;padding:8px 10px 14px;scroll-behavior:smooth;scrollbar-gutter:stable}

/* V1.43 — comfortable voice-chat drawer */
.voice-chat-toggle{position:relative;min-width:72px!important;height:34px!important;padding:0 10px!important;display:inline-flex!important;align-items:center;justify-content:center;gap:6px;border:1px solid rgba(99,215,255,.18)!important;border-radius:9px!important;background:rgba(99,215,255,.06)!important;color:#a8eaff!important;font-size:10px!important;font-weight:900;cursor:pointer}
.voice-chat-toggle:hover{background:rgba(99,215,255,.12)!important;color:#fff!important}.voice-chat-toggle.hidden{display:none!important}
.voice-chat-toggle>b{position:absolute;right:-5px;top:-6px;min-width:17px;height:17px;padding:0 4px;display:grid;place-items:center;border:2px solid #0b1119;border-radius:999px;background:#ef5966;color:#fff;font-size:7px;line-height:1}.voice-chat-toggle>b.hidden{display:none!important}
.voice-chat-close{width:32px!important;min-width:32px!important;height:32px!important;padding:0!important;display:grid!important;place-items:center;border-color:rgba(255,255,255,.09)!important;font-size:18px!important;line-height:1!important}.voice-chat-close.hidden{display:none!important}
.chat-panel{position:relative}.voice-chat-resize-handle{display:none;position:absolute;z-index:30;left:-5px;top:0;bottom:0;width:10px;cursor:col-resize;touch-action:none}.voice-chat-resize-handle::after{content:"";position:absolute;left:4px;top:0;bottom:0;width:2px;background:transparent;transition:background .15s}.voice-chat-resize-handle:hover::after,.resizing-voice-chat .voice-chat-resize-handle::after{background:rgba(99,215,255,.45)}.resizing-voice-chat{cursor:col-resize!important;user-select:none!important}

@media(min-width:900px){
  #roomView.desktop-fit:not(.text-mode){grid-template-columns:70px 245px minmax(520px,1fr)!important}
  #roomView.desktop-fit:not(.text-mode)>.chat-panel{display:none!important}
  #roomView.desktop-fit:not(.text-mode).voice-chat-open{grid-template-columns:70px 245px minmax(520px,1fr) var(--voice-chat-width,430px)!important}
  #roomView.desktop-fit:not(.text-mode).voice-chat-open>.chat-panel{display:flex!important;width:var(--voice-chat-width,430px)!important;min-width:360px!important;max-width:560px!important}
  #roomView.desktop-fit:not(.text-mode).voice-chat-open .voice-chat-resize-handle{display:block}
  #roomView.desktop-fit:not(.text-mode).voice-chat-open .messages{padding-left:18px!important;padding-right:18px!important}
  #roomView.desktop-fit:not(.text-mode).voice-chat-open .message-body{overflow-wrap:anywhere;word-break:normal!important}
}

@media(max-width:899px){
  #roomView.mobile-workspace .voice-chat-toggle{display:grid!important;width:36px!important;min-width:36px!important;height:36px!important;padding:0!important}
  #roomView.mobile-workspace .voice-chat-toggle.hidden{display:none!important}
  #roomView.mobile-workspace .voice-chat-toggle-label{display:none}
  #roomView.mobile-workspace .voice-chat-close{display:grid!important}#roomView.mobile-workspace .voice-chat-close.hidden{display:none!important}.voice-chat-resize-handle{display:none!important}
  #roomView.mobile-workspace.mobile-chat-open>.chat-panel{box-shadow:-24px 0 70px rgba(0,0,0,.5)}
}
#emojiGrid.emoji-browser-grid,#reactionPicker,#reactionEmojiGrid{scrollbar-width:thin;scrollbar-color:#4a586c #0d141e}
#emojiGrid.emoji-browser-grid::-webkit-scrollbar,#reactionPicker::-webkit-scrollbar,#reactionEmojiGrid::-webkit-scrollbar{width:8px;height:8px}
#emojiGrid.emoji-browser-grid::-webkit-scrollbar-track,#reactionPicker::-webkit-scrollbar-track,#reactionEmojiGrid::-webkit-scrollbar-track{background:#0d141e;border-radius:999px}
#emojiGrid.emoji-browser-grid::-webkit-scrollbar-thumb,#reactionPicker::-webkit-scrollbar-thumb,#reactionEmojiGrid::-webkit-scrollbar-thumb{background:#465468;border:2px solid #0d141e;border-radius:999px}
#emojiGrid.emoji-browser-grid::-webkit-scrollbar-thumb:hover,#reactionPicker::-webkit-scrollbar-thumb:hover,#reactionEmojiGrid::-webkit-scrollbar-thumb:hover{background:#607086}
.emoji-category-section{content-visibility:auto;contain-intrinsic-size:230px;contain:layout paint style}
.emoji-category-section{scroll-margin-top:6px}.emoji-category-section h4{position:sticky;top:-8px;z-index:2;margin:0 -2px 5px;padding:8px 4px 6px;background:linear-gradient(180deg,#111925 75%,rgba(17,25,37,0));color:#8492a6;font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.emoji-category-buttons{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:3px;margin-bottom:8px}
.emoji-category-buttons button{width:100%;aspect-ratio:1;border:0;border-radius:8px;background:transparent;font-size:25px;line-height:1;cursor:pointer;display:grid;place-items:center}
.emoji-category-buttons button:hover{background:#222d3d;transform:scale(1.12)}
.emoji-empty{min-height:160px;display:grid;place-items:center;color:var(--muted);font-size:13px}
#reactionPicker{max-width:calc(100vw - 16px)!important;max-height:min(420px,calc(100dvh - 24px))!important;overflow-y:auto!important}
#reactionEmojiGrid{grid-template-columns:repeat(8,minmax(0,1fr));max-height:320px;overflow-y:auto}

@media(max-width:899px){
  #emojiPicker{width:calc(100vw - 12px)!important;max-width:none!important;height:min(520px,calc(100dvh - 76px))!important;max-height:calc(100dvh - 76px)!important;border-radius:15px!important}
  .emoji-category-buttons{grid-template-columns:repeat(7,minmax(0,1fr))}
  .emoji-category-buttons button{font-size:24px}
  #reactionEmojiGrid{grid-template-columns:repeat(7,minmax(0,1fr))}
}
@media(max-width:480px){
  .emoji-category-buttons{grid-template-columns:repeat(6,minmax(0,1fr))}
  .emoji-category-buttons button{font-size:23px}
  .emoji-browser-head{min-height:44px}.emoji-search-wrap{height:38px}
  #reactionEmojiGrid{grid-template-columns:repeat(6,minmax(0,1fr))}
}

/* V1.33 — DM home is a three-column view; never auto-place community chat below it. */
@media(min-width:900px){
  #roomView.desktop-fit.dm-home-mode>.chat-panel,
  #roomView.desktop-fit.dm-home-mode>.member-panel{
    display:none!important
  }
  #roomView.desktop-fit.dm-home-mode>.stage{
    display:flex!important;
    grid-column:3!important;
    grid-row:1!important;
    width:auto!important;
    min-width:0!important
  }
}

/* V1.32 — viewport-safe member profiles and clickable chat authors. */
.message-profile-trigger{cursor:pointer}
.message-head .message-profile-trigger:hover{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.participant-avatar.message-profile-trigger:hover{box-shadow:0 0 0 2px rgba(99,215,255,.38)}

#memberProfileModal{padding:48px 24px!important}
#memberProfileModal .member-profile-modal{
  width:min(500px,calc(100vw - 48px))!important;
  max-height:min(820px,calc(100dvh - 96px))!important;
  display:flex!important;flex-direction:column!important;overflow:hidden!important
}
#memberProfileModal .settings-head{flex:0 0 auto!important}
#memberProfileModal .settings-body{
  flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;
  overscroll-behavior:contain;scrollbar-gutter:stable
}
@media(max-height:760px){
  #memberProfileModal{padding:18px!important}
  #memberProfileModal .member-profile-modal{max-height:calc(100dvh - 36px)!important}
}
@media(max-width:899px){
  #memberProfileModal{padding:10px!important}
  #memberProfileModal .member-profile-modal{width:calc(100vw - 20px)!important;max-height:calc(100dvh - 20px)!important;border-radius:16px!important}
}

/* V1.46.4 — clearer everyday text and live sidebar speaker feedback. */
.channel strong{font-size:16px}
.channel small{font-size:13px}
.section-title,.dm-sidebar-label{font-size:12px}
.participant-name,.self-info strong,.right-member strong,.dm-conversation strong{font-size:15px}
.stage-person-name,.message-head strong{font-size:16px}
.stage-person-status{font-size:13px}
.message-body{font-size:16px;line-height:1.6}
.chat-form textarea,.chat-form input{font-size:15px}

.voice-presence-user{
  height:auto;
  min-height:34px;
  grid-template-columns:26px minmax(0,1fr) auto;
  gap:8px;
  padding:4px 6px;
  font-size:13px;
  line-height:1.3;
  color:#afbbcc;
  transition:background-color .15s ease,color .15s ease;
}
.voice-presence-avatar{
  width:26px;
  height:26px;
  min-width:26px;
  min-height:26px;
  font-size:10px;
  transition:box-shadow .15s ease;
}
.voice-presence-copy{gap:2px}
.voice-presence-copy>span{font-weight:600}
.voice-presence-copy>small{font-size:10px;line-height:1.2}
.voice-presence-state-icons b{font-size:11px}
.voice-presence-user.speaking{
  background:rgba(80,216,144,.075);
}
.voice-presence-user.speaking .voice-presence-avatar{
  box-shadow:0 0 0 2px var(--green),0 0 12px rgba(80,216,144,.24);
}
.voice-presence-user.speaking .voice-presence-copy>span{
  color:var(--green);
}

/* Readable, responsive screen headers retain room for viewer actions. */
.screen-head{flex-wrap:wrap}
.screen-head>div:first-child strong{font-size:13px}
.screen-head>div:first-child span{font-size:11px}
.screen-head-actions{
  min-width:0;
  max-width:100%;
  flex-wrap:wrap;
  row-gap:8px;
}
.screen-head-actions>span{font-size:10px}
.screen-head-actions button{font-size:11px}
.screen-stage:fullscreen .screen-head{flex:0 0 auto}
.screen-stage:fullscreen .screen-video-wrap{min-height:0}
.private-call-screen-head{flex-wrap:wrap}
.private-call-screen-head>div:first-child{flex-wrap:wrap}
.private-call-screen-head strong{font-size:12px}
.private-call-screen-head>div:first-child>span{font-size:10px}
.private-call-screen-head>.private-call-screen-actions{max-width:100%;flex-wrap:wrap}
.private-call-screen-actions>button{font-size:11px;min-height:32px}
.private-call-screen-stage:fullscreen{
  display:flex;
  flex-direction:column;
  width:100%;
  height:100%;
  margin:0;
  border:0;
  border-radius:0;
  background:#020406;
}
.private-call-screen-stage:fullscreen .private-call-screen-head{flex:0 0 auto}
.private-call-screen-stage:fullscreen .private-call-screen-video{
  flex:1 1 0;
  min-height:0;
  max-height:none;
  aspect-ratio:auto;
}
.private-call-screen-stage:fullscreen .private-call-screen-video video{max-height:100%;min-height:0}

@media(max-width:899px){
  .channel strong{font-size:15px}
  .message-body{font-size:15px}
  .screen-head-actions{justify-content:flex-start}
}
@media(prefers-reduced-motion:reduce){
  .voice-presence-user,.voice-presence-avatar{transition:none}
}


/* V1.46.5 — stream audio context menu and community voice counts. */
.screen-head-actions .screen-audio-menu-trigger,
.private-call-screen-actions .screen-audio-menu-trigger{
  width:32px;
  min-width:32px;
  height:30px;
  min-height:30px;
  padding:0;
  display:inline-grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px;
  background:rgba(255,255,255,.035);
  color:#b7c5d7;
  font-size:20px;
  line-height:1;
  cursor:pointer;
}
.screen-audio-menu-trigger:hover,.screen-audio-menu-trigger[aria-expanded="true"]{
  background:#1a2637;
  border-color:rgba(99,215,255,.28);
  color:#edf6ff;
}
.screen-audio-menu{
  position:fixed;
  z-index:900;
  inset:auto;
  margin:0;
  width:264px;
  max-width:calc(100vw - 16px);
  max-height:calc(100dvh - 16px);
  overflow:auto;
  overscroll-behavior:contain;
  padding:12px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:13px;
  background:#101823;
  box-shadow:0 18px 55px rgba(0,0,0,.58),0 1px 3px rgba(0,0,0,.35);
  color:#dce7f3;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:13px;
  line-height:1.45;
  text-align:left;
  color-scheme:dark;
  zoom:1;
}
.screen-audio-menu.hidden{display:none!important}
.screen-audio-menu::backdrop{background:transparent}
.stream-audio-heading{display:flex;flex-direction:column;gap:2px;min-width:0}
.stream-audio-heading strong{font-size:14px;font-weight:800;color:#f0f6fc;overflow-wrap:anywhere}
.stream-audio-heading span{font-size:11px;color:#9baac0;overflow-wrap:anywhere}
#screenAudioMenuStatus{display:block;margin:8px 0;color:#91a1b6;font-size:11px;line-height:1.45}
.stream-audio-volume-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:12px;
  font-size:12px;
}
.stream-audio-volume-heading label{color:#c6d2e1}
.stream-audio-volume-heading output{color:#e1edfa;font-size:12px;font-weight:800;font-variant-numeric:tabular-nums}
#screenAudioVolumeSlider{
  display:block;
  width:100%;
  height:26px;
  margin:6px 0 9px;
  accent-color:var(--accent);
  cursor:pointer;
}
#screenAudioMuteToggle{
  width:100%;
  min-height:36px;
  padding:7px 11px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px;
  background:#1b2839;
  color:#e3edf8;
  font:inherit;
  font-size:12px;
  font-weight:750;
  cursor:pointer;
}
#screenAudioMuteToggle:hover{background:#24354b}
#screenAudioMuteToggle[aria-pressed="true"]{background:rgba(243,104,114,.1);border-color:rgba(243,104,114,.2);color:#ff9ba3}
#screenAudioMuteToggle[aria-pressed="true"]:hover{background:rgba(243,104,114,.17)}
.screen-audio-menu>small:last-child,.stream-audio-footer{
  display:block;
  margin-top:11px;
  padding-top:9px;
  border-top:1px solid rgba(255,255,255,.07);
  color:#8393a9;
  font-size:10px;
  text-align:center;
}
.screen-audio-menu button:disabled,.screen-audio-menu input:disabled{opacity:.45;cursor:not-allowed}
.screen-audio-menu button:focus-visible,.screen-audio-menu input:focus-visible,
.screen-audio-menu-trigger:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.rail-community .rail-voice-badge{
  position:absolute;
  z-index:2;
  left:1px;
  bottom:2px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:1px;
  min-width:21px;
  max-width:30px;
  height:15px;
  padding:0 2px;
  border:1px solid #090d14;
  border-radius:7px;
  background:#184b33;
  color:#a5f2c5;
  font-size:8px;
  line-height:1;
  white-space:nowrap;
  pointer-events:none;
}
.rail-voice-badge svg{width:8px;height:8px;flex:0 0 8px;display:block}
.rail-voice-badge b{min-width:0;font-size:8px;font-weight:850;font-variant-numeric:tabular-nums;line-height:1}
.rail-community .rail-voice-badge.stale{background:#233a30;color:#a0bda9;border-style:dashed;border-color:#526f5e}
.rail-community .rail-voice-badge.unknown{background:#26303e;color:#aab6c8;border-color:#0c121c}
.rail-community .rail-voice-badge.hidden{display:none!important}