:root{color-scheme:dark;--bg:#242b28;--panel:#242b28;--border:#2b3330;--text:#e9edf3;--muted:#9199a8;--accent:#CDF86A;--sup-0:#0c0f0e;--sup-1:#1c211f;--sup-2:#242b28;--sup-3:#2b332f;--hover:#222826;--ativo:#272e2b;--txt-1:#e6ebe8;--txt-2:#97a39c;--txt-3:#6b7570;font-family:Inter,"Segoe UI",sans-serif;font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-size:14px}button,input,select{font:inherit}button{cursor:pointer;border:0;color:inherit}button:disabled{opacity:.45;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}button{transition:background .15s,color .15s}button:hover:not(:disabled){filter:brightness(1.1)}[hidden]{display:none!important}.shell{display:grid;grid-template-columns:260px minmax(0,1fr);height:100dvh;min-height:100vh;overflow:hidden}.sidebar{background:var(--sup-1);border-right:0;padding:14px 8px 0;display:flex;flex-direction:column;overflow:hidden;overflow:clip}.brand{display:flex;align-items:center;gap:10px;height:48px;padding:0 8px}.brandmark{width:26px;height:26px;display:block;flex-shrink:0}.brandmark svg{width:100%;height:100%;display:block}.brand strong{display:block;font-size:15px;font-weight:600;letter-spacing:-.2px}.brand div>span{display:none}.community-label,.section-label{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--txt-3);display:flex;justify-content:space-between;align-items:center;padding:0 12px}.local-pill{margin-left:auto;font-size:10px;border:0;color:var(--txt-3);border-radius:3px;padding:0;letter-spacing:0}.community-name{margin:14px 12px 30px;font-size:16px;font-weight:600;display:flex;justify-content:space-between}.community-name>span{color:var(--muted)}.section-label{margin-bottom:4px;margin-top:10px}.section-label>span{font-size:10px;background:#242b28;padding:3px 6px;border-radius:5px}.channel{display:flex;align-items:center;gap:10px;height:32px;padding:0 8px;width:100%;border-radius:3px;background:none;color:var(--txt-2);font-size:16px;text-align:left;margin-bottom:1px}.channel-row:hover>.channel:not(.selected):not(.active){background:var(--hover);color:#c3ccc7}.channel.selected{background:var(--ativo);color:var(--txt-1)}.channel.active{background:#25301f;color:var(--accent)}.channel-glyph{font-size:16px;letter-spacing:-3px;width:20px;display:inline-block;color:var(--txt-3);flex-shrink:0}
.channel-glyph svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.channel-glyph svg path:first-child{fill:currentColor;stroke-linejoin:round}.channel.active .channel-glyph{color:var(--accent)}.channel-count{color:#778c84;font-size:11px;flex-shrink:0}.channel-members{padding:1px 0 6px 20px}.mini-member{display:flex;align-items:center;gap:8px;height:28px;padding:0 8px;border-radius:3px;font-size:14px;color:#879189}
/* O jogo é uma fileira própria, logo abaixo da pessoa. Dentro da fileira dela
   obrigaria a quebrar linha, e aí as ações rápidas desciam junto e o botão de
   entrar saía pela borda da lateral. Recuado para começar na coluna do nome. */
.mini-member-game{display:flex;align-items:center;gap:6px;margin:-3px 6px 5px 32px;font-size:10px;color:#8b9f96;min-width:0}
.mini-member-game-name{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:.2px}
.mini-member-game-name::before{content:"▶";margin-right:4px;color:#6b7e76}.mini-member-game:has(.mini-member-capa) .mini-member-game-name::before{content:none}.mini-member-capa{flex:0 0 auto;width:34px;height:13px;object-fit:cover;border-radius:2px;display:block;background:#2b3431}
.mini-member-game.mesma-partida .mini-member-game-name{color:var(--accent)}
/* Quem cede espaço é o "com quem", não o nome do jogo: saber o que a pessoa
   joga vale mais do que saber o nome inteiro de quem está com ela. */
.mini-member-game-com{flex:1 1 0;min-width:0;color:#6b7e76;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-member-join{flex:0 0 auto;margin-left:auto;font-size:9px;padding:2px 7px;border-radius:5px;background:#2d3532;color:#cfd8e3}
.mini-member-join:hover{background:#3a4440;color:#fff}.mini-avatar{display:grid;place-items:center;width:21px;height:21px;border-radius:8px;background:#36403c;color:#d1dcf0;font-size:8px}.mini-member.speaking .mini-avatar{box-shadow:0 0 0 2px var(--accent)}.sidebar-note{display:none}.small-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:#83956c;margin-right:5px}.self{display:flex;align-items:center;gap:10px;height:56px;padding:0 8px;margin:auto -8px 0;background:var(--sup-0);border-radius:0}.self strong{font-size:12px;display:block;max-width:135px;overflow:hidden;text-overflow:ellipsis}.self div>span{display:block;font-size:10px;color:var(--muted);margin-top:4px}.icon-button{margin-left:auto;background:transparent;color:var(--muted);font-size:22px}.avatar{width:65px;height:65px;display:grid;place-items:center;border-radius:22px;background:#343d39;color:#c8e2ed;font-weight:650;font-size:22px}.avatar.small{width:33px;height:33px;border-radius:11px;font-size:11px}main{min-width:0;display:flex;flex-direction:column}.topbar{height:48px;border-bottom:0;display:flex;align-items:center;justify-content:space-between;padding:0 32px;gap:20px}.topbar>div{display:flex;align-items:center;gap:14px}.divider{display:none}.topbar h1{font-size:16px;font-weight:600;letter-spacing:-.2px;margin:0}.topbar #member-count{font-size:12px;color:var(--txt-3);white-space:nowrap}.topbar #channel-subtitle{font-size:12px;color:var(--muted)}.connection{display:inline-flex;align-items:center;gap:7px;font-size:12px;white-space:nowrap;color:var(--txt-2);border:0;padding:0}.connection::before{content:'';width:7px;height:7px;border-radius:50%;background:#54635d;flex:none}.connection.on{color:var(--accent)}.connection.on::before{background:var(--accent);box-shadow:0 0 10px #cdf86a55}.workspace{display:grid;grid-template-columns:minmax(0,1fr);flex:1;min-height:0}.room-area{padding:16px 20px;display:flex;flex-direction:column;min-width:0}.room-heading{display:none}.eyebrow{display:none}h1{font-size:32px;letter-spacing:-1px;font-weight:600;margin:0}.room-heading>span{font-size:11px;color:var(--muted)}.empty-room{text-align:center;margin:auto;padding:24px 0 32px;max-width:420px}.orbit{width:64px;height:64px;border:0;box-shadow:none;border-radius:50%;margin:0 auto 20px;display:grid;place-items:center;color:var(--accent);background:var(--hover)}.orbit>span{font-size:22px;letter-spacing:-4px;margin-left:-4px}h2{font-size:20px;font-weight:550;letter-spacing:-.5px;margin:0 0 13px}.empty-room p{font-size:13px;line-height:1.8;color:var(--muted);margin:0 0 24px}.primary{background:var(--accent);color:#1c2811;font-weight:650;border-radius:7px;padding:13px 20px;display:inline-flex;justify-content:space-between;gap:25px;align-items:center}.primary span{font-size:18px}small{display:block;color:#738070;font-size:10px;margin-top:14px}.stream-note{margin-top:auto;display:flex;align-items:center;gap:13px;padding:14px 0 0;border-top:0}.screen-symbol{background:#212725;border:1px solid #38423e;border-radius:9px;font-size:23px;color:#7c9289;width:42px;height:42px;display:grid;place-items:center;flex-shrink:0}.stream-note strong{font-size:11px;color:#aeb8c3;font-weight:500}.stream-note p{font-size:10px;line-height:1.6;color:#6d8078;margin:5px 0}.stream-note>span{margin-left:auto;font-size:8px;letter-spacing:1px;white-space:nowrap;color:#82917a}.audio-panel{border-left:0;padding:32px 20px;background:var(--sup-1)}.audio-panel h2{font-size:16px;line-height:1.5}.muted{color:var(--muted);font-size:11px;line-height:1.8;margin:0 0 26px}label{display:block;font-size:11px;font-weight:550;margin:20px 0 8px;color:#b8c0cb}select,input:not([type=range]){width:100%;padding:10px 9px;border:1px solid #353e3a;border-radius:6px;background:#202624;color:#bac5d3;font-size:11px}select{overflow:hidden;text-overflow:ellipsis}.text-button{padding:12px 0;font-size:10px;color:#acbc9c;background:none;text-align:left}.audio-tip{display:flex;gap:10px;margin:20px 0;padding-top:16px;border-top:0;color:#7e8c7b}.audio-tip p{font-size:10px;line-height:1.8;margin:0;color:#798f86}.audio-tip strong{color:#a0aab7;font-weight:500}.audio-tip>span{font-size:22px}.voice-bar{height:56px;min-height:56px;border-top:0;display:flex;align-items:center;justify-content:space-between;padding:8px 16px;gap:12px;background:var(--sup-0)}.voice-bar>div:first-child{display:flex;gap:12px;align-items:center}.voice-dot{width:8px;height:8px;border-radius:50%;background:#54635d}.voice-dot.on{background:var(--accent);box-shadow:0 0 12px #c9f23040}.controls{display:flex;align-items:center;gap:8px}.control,.leave,.secondary{padding:11px 13px;border-radius:7px;font-size:11px;background:#282f2c}.control[aria-pressed=true]{background:#4c3632;color:#ffb5a5}.leave{background:#38272c;color:#eea7af}.control-divider{height:22px;border-left:1px solid #37413d;margin:0 5px}.participants{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;margin-bottom:16px}.participant{border:0;border-radius:8px;background:var(--hover);min-height:150px;padding:16px 12px;display:flex;flex-direction:column;align-items:center;gap:13px;min-width:0}.participant.speaking{border-color:var(--accent);background:#262d2a}.participant.speaking .avatar{box-shadow:0 0 0 3px #c9f27980}.participant-name{font-size:12px;overflow-wrap:anywhere;text-align:center}.participant-state{font-size:10px;color:#7f968d}.speaking .participant-state{color:var(--accent)}.volume{font-size:9px;margin:0;width:100%;color:#7f968d}.volume input{width:100%;accent-color:var(--accent);height:15px;display:block;margin-top:9px}.waiting{text-align:center;color:#8e9c91;font-size:12px;margin:12px 0 40px}.notice{padding:13px 30px;background:#423a26;color:#e8d496;font-size:12px;line-height:1.5}
/* Ação dentro do aviso (o "Som original" do Auto Mic). */
.notice-acao{color:var(--accent);text-decoration:underline;font-size:inherit;padding:0}
details{font-size:10px;color:var(--muted);border-top:0;padding-top:18px}summary{cursor:pointer}details p{line-height:1.7}dialog{border:0;border-radius:8px;background:var(--sup-2);color:var(--text);width:390px;max-width:calc(100vw - 32px);padding:35px;box-shadow:0 30px 100px #0008}dialog::backdrop{background:#0b0d0cbf;backdrop-filter:blur(5px)}dialog .brandmark{margin-bottom:30px}dialog h1{font-size:35px}dialog p:not(.eyebrow){font-size:13px;line-height:1.8;color:#99a5b2}dialog label{margin-top:26px}dialog input:not([type=range]){padding:13px 12px;font-size:13px}dialog .primary{width:100%;margin-top:10px}dialog small{color:#7a9087;text-align:center;line-height:1.7}#login-error{color:#ffb5a5;min-height:0;margin:7px 0}#channel-remove-why{margin:10px 0 0;font-size:11px;line-height:1.7;color:#81988f}
@media(min-width:1600px){.room-area{padding:45px 65px}.audio-panel{padding:45px 30px}.workspace{grid-template-columns:minmax(0,1fr)}}@media(max-width:1100px){.workspace{grid-template-columns:minmax(0,1fr)}.audio-panel{border-left:0;padding:24px 30px}.room-area{min-height:620px}.audio-panel select{max-width:420px}.topbar #channel-subtitle,.divider{display:none}.voice-bar{flex-wrap:wrap}.audio-tip{display:none}.audio-panel .muted{margin-bottom:10px}}@media(max-width:650px){.shell{grid-template-columns:170px minmax(0,1fr)}.sidebar{padding:20px 8px 0}.brand{padding:0 8px 26px;gap:8px}.brand div>span{display:none}.community-name{font-size:13px;margin:14px 8px 26px}.brandmark{width:34px;height:34px;font-size:23px}.community-label,.section-label{padding:0 8px;font-size:8px}.local-pill{font-size:7px}.sidebar-note{font-size:9px}.self{gap:6px}.self strong{max-width:76px}.self div>span{font-size:8px}.room-area{padding:28px 18px;min-height:590px}.topbar{padding:0 16px;height:67px;gap:6px}.topbar>div{gap:4px}.connection{font-size:8px;padding:5px}.room-heading{display:block}.room-heading>span{display:block;margin-top:12px}.empty-room h2{font-size:17px;line-height:1.5}.empty-room p{font-size:11px}.primary{padding:12px;font-size:11px;gap:5px}.stream-note{align-items:flex-start}.stream-note>span{display:none}.screen-symbol{display:none}.audio-panel{padding:24px 18px}.voice-bar{padding:15px}.controls{flex-wrap:wrap;gap:6px}.control,.leave{font-size:10px;padding:10px}.control-divider{display:none}.participants{grid-template-columns:1fr}.channel{padding:12px 8px;gap:6px}.channel-members{padding-left:14px}.mini-member{font-size:10px}}

.share-panel{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border:0;border-radius:8px;background:var(--hover);padding:12px 14px;margin-top:12px}.share-panel p{font-size:13px;color:#a5b4ad;margin:6px 0}.share-panel div{flex:1;min-width:200px}.streams{display:grid;gap:18px;margin-top:20px}.stream-card{background:#171b19;border-radius:14px;padding:16px;display:flex;flex-wrap:wrap;align-items:center;gap:14px}.stream-card strong{flex:1}.stream-card video{width:100%;aspect-ratio:16/9;background:#090b0a;border-radius:8px;object-fit:contain}.stream-card label{display:flex;align-items:center;gap:12px;font-size:13px}.stream-metrics{display:block;width:100%;color:#a5b4ad;font-variant-numeric:tabular-nums}#share-dialog{max-width:540px;width:calc(100% - 32px)}#share-dialog select{width:100%;margin:8px 0 18px}.check-label{display:flex;align-items:center;gap:10px}.check-label input{width:auto}[hidden]{display:none!important}

.stream-state{width:100%;margin:0;padding:10px 12px;border-radius:8px;background:#393821;color:#f3e7a7;font-size:13px}

.microphone-controls{padding-top:12px;margin-top:12px}.microphone-controls h3{font-size:13px}.microphone-controls input[type=checkbox]{width:auto;padding:0;accent-color:var(--accent)}.microphone-controls input[type=range]{width:100%;accent-color:var(--accent)}.stream-card video:fullscreen{width:100vw;height:100vh;max-height:none;object-fit:contain;background:#000}
.password-field{display:flex;align-items:stretch;gap:8px;width:100%}.password-field input{flex:1;min-width:0}.password-field .password-visibility{flex:0 0 auto;background:transparent;color:var(--text,#edf4e9);border:1px solid #46534e;border-radius:8px;padding:8px 12px;font:inherit;font-size:12px;cursor:pointer}.password-visibility:focus-visible{outline:2px solid #cdf86a;outline-offset:2px}
@media(min-width:701px){.shell{height:100dvh;min-height:0}.shell>main{min-height:0}.workspace{min-height:0;overflow:auto}.sidebar{min-height:0;overflow:clip}.voice-bar,.topbar{flex-shrink:0}}

/* Voice rooms stay central; conversations occupy the right column. */
.topbar>div:first-child{min-width:0}.topbar #chat-toggle{white-space:nowrap;padding:9px 12px}.audio-settings{border:0;padding:0;font-size:12px;color:var(--text)}.audio-settings>summary{list-style:none;white-space:nowrap;padding:10px 12px;background:#282f2c;border-radius:7px}.audio-settings>summary::-webkit-details-marker{display:none}.audio-settings[open]>summary{background:#35432b;color:var(--accent)}.audio-settings>.audio-panel{position:fixed;top:70px;right:18px;width:360px;max-width:calc(100vw - 36px);max-height:calc(100dvh - 170px);overflow:auto;overscroll-behavior:contain;z-index:50;border-radius:14px;padding:24px;box-shadow:0 24px 90px #0009}.audio-settings .audio-tip{display:none}.audio-settings .muted{margin-bottom:14px}.audio-settings .audio-panel select{max-width:100%}
@media(min-width:901px){.shell{grid-template-columns:230px minmax(0,1fr)}.workspace{grid-template-columns:minmax(0,1fr);overflow:hidden}.room-area{padding:28px;min-height:0;overflow:auto;overscroll-behavior:contain}.room-heading{margin-bottom:24px}.participants{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.topbar{padding:0 24px}.topbar #channel-subtitle{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.voice-bar{padding:15px 24px}.sidebar-note{padding-top:20px}}
@media(min-width:901px) and (max-width:1100px){.shell{grid-template-columns:190px minmax(0,1fr)}.workspace{grid-template-columns:minmax(0,1fr)}.room-area{padding:22px}.voice-bar .controls .connection{display:none}.voice-bar{padding:12px 18px}}
@media(max-width:900px){.workspace{display:block}.voice-bar .controls .connection{display:none}.topbar{gap:8px}.audio-settings>.audio-panel{top:65px;right:12px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 160px)}.topbar #chat-toggle,.audio-settings>summary{font-size:12px;min-height:38px;padding:10px}.topbar #channel-subtitle,.topbar .divider{display:none}}

.self>div:not(.self-actions){flex:1;min-width:0}.self #settings-open,.self #logout{display:grid;place-items:center;flex:0 0 24px;width:24px;height:24px;margin-left:0;padding:0;border-radius:5px}.self #settings-open:hover{background:#2b3330;color:var(--text)}
#settings-dialog{background:var(--sup-2);width:920px;max-width:calc(100vw - 48px);height:760px;max-height:calc(100dvh - 64px);padding:0;overflow:hidden;border-radius:18px;background:#191d1b}
.settings-shell{display:flex;flex-direction:column;height:100%;min-height:0}.settings-header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:28px 30px;background:#1f2422;flex:0 0 auto}.settings-header h1{font-size:27px!important;letter-spacing:-.7px}.settings-header .eyebrow{margin:0 0 8px;color:#9cae91;font-size:9px}.settings-header #settings-close{border:0;width:36px;height:36px;border-radius:50%;background:transparent;font-size:25px;color:#b8c4ca}.settings-header #settings-close:hover{background:#323b37;color:#fff}.settings-layout{display:grid;grid-template-columns:205px minmax(0,1fr);flex:1;min-height:0}.settings-nav{padding:24px 14px;background:#161a18;}.settings-nav button{display:block;width:100%;padding:14px;border-radius:9px;background:transparent;text-align:left;font-size:13px;font-weight:600;color:#aebbc3;margin-bottom:7px}.settings-nav button span{display:block;margin-top:5px;font-size:10px;font-weight:400;color:#7f968d}.settings-nav button[aria-selected=true]{background:#2b3829;color:#d5f99b}.settings-nav button[aria-selected=true] span{color:#b3c89e}.settings-content{min-height:0;min-width:0;overflow:auto;overscroll-behavior:contain;padding:30px}.settings-content [role=tabpanel]{min-width:0}
#settings-dialog #settings-notice{margin:0;padding:12px 24px;background:#423a26;color:#f4dda5;font-size:12px;line-height:1.6;flex:0 0 auto}
#settings-dialog .audio-panel{position:static;max-width:none;width:auto;max-height:none;padding:0;border:0;background:transparent;overflow:visible}#settings-dialog .audio-panel h2{font-size:21px;margin:0 0 10px}#settings-dialog p{font-size:12px;line-height:1.7}#settings-dialog label{margin-top:20px;font-size:12px}#settings-dialog select{font-size:13px;padding:12px;max-width:100%}#settings-dialog .audio-tip{display:none}#settings-dialog .microphone-controls{margin-top:24px;padding-top:18px}#settings-dialog .microphone-controls h3{font-size:16px;margin:0 0 20px}#settings-dialog .microphone-controls label:has(input[type=checkbox]){display:flex;align-items:center;gap:9px;line-height:1.5}#settings-dialog .microphone-controls input[type=checkbox]{width:15px;height:15px;flex:0 0 15px;margin:0;padding:0}#settings-dialog input[type=range]{height:20px;margin:8px 0 0}#settings-dialog .secondary{font-size:12px;min-height:40px}#settings-dialog #mic-apply{background:var(--accent);color:#1c2811;font-weight:650;padding:12px 18px}#settings-dialog .text-button{font-size:11px}#settings-dialog #settings-sounds>.microphone-controls{margin:0;padding:0;border:0}#settings-dialog #settings-sounds h3{font-size:21px;margin:0 0 22px}#settings-dialog details{margin-top:24px}
@media(max-width:600px){#settings-dialog{width:calc(100vw - 20px);max-width:none;height:calc(100dvh - 20px);max-height:none;border-radius:14px}.settings-header{padding:20px}.settings-header h1{font-size:23px!important}.settings-layout{display:flex;flex-direction:column}.settings-nav{display:flex;gap:8px;border-right:0;padding:12px}.settings-nav button{flex:1;min-width:0;margin:0;padding:12px;font-size:13px}.settings-nav button span{font-size:9px}.settings-content{padding:22px 18px;flex:1}#settings-dialog select{font-size:16px}#settings-dialog .secondary{min-height:44px}#settings-dialog .microphone-controls label{font-size:12px}}

.mini-member{min-width:0}.mini-avatar{flex-shrink:0}.mini-member-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.member-status{display:flex;align-items:center;gap:3px;margin-left:auto;flex-shrink:0}.member-status:empty{display:none}.member-status-icon{display:inline-flex;width:15px;height:15px;color:#a6adb8}.member-status-icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.member-status-icon.media-silenciado{color:#d09089}.mini-member .participant-menu-trigger{margin-left:2px;flex-shrink:0}.channel>span:nth-child(2){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.moderation-dialog{width:min(520px,90vw);max-height:80vh;overflow:auto;padding:24px;border-radius:16px;background:#1c211f;color:#edf2f3}.moderation-dialog::backdrop{background:#0009}.moderation-dialog p{line-height:1.5}.moderation-dialog button{margin:6px 8px 6px 0}

.mic-level{position:relative;height:12px;background:#353f3b;border-radius:6px;margin:12px 0;overflow:visible}.mic-level-fill{display:block;height:100%;border-radius:6px;transition:width 45ms linear}.mic-level-threshold{position:absolute;top:-4px;height:20px;width:3px;background:white}.mic-level-status{font-size:12px;min-height:32px}

.mic-level input[type=range]{position:absolute;inset:-4px 0 auto;width:100%;height:20px;margin:0;padding:0;background:transparent;appearance:none;cursor:pointer}.mic-level input[type=range]::-webkit-slider-runnable-track{background:transparent;height:12px}.mic-level input[type=range]::-webkit-slider-thumb{appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;margin-top:-2px;box-shadow:0 1px 5px #0008}.mic-level input[type=range]::-moz-range-track{background:transparent}.mic-level input[type=range]::-moz-range-thumb{width:16px;height:16px;border:0;border-radius:50%;background:#fff}

#settings-moderation .moderation-row{padding:12px 0;overflow-wrap:anywhere}#settings-moderation .moderation-row p{margin:0 0 8px}#settings-moderation h3{margin-top:28px}#moderation-history{font-size:14px;line-height:1.6}
/* Authentication: compact, readable controls and a locally embedded official Google asset.
   Google SVG source: https://developers.google.com/static/identity/images/signin-assets.zip */
#login-dialog{width:440px;padding:32px;max-height:calc(100dvh - 32px);overflow-y:auto;border-color:#36403c;background:linear-gradient(155deg,#222826,#1a1f1d 65%);box-shadow:0 24px 100px #0009}
#login-dialog .brandmark{width:48px;height:48px;margin:0 0 20px}
#login-dialog .eyebrow{color:#acba9d;margin:0 0 8px;letter-spacing:1.8px}
#login-dialog h1{font-size:32px;line-height:1.15;letter-spacing:-1px}
#login-dialog #login-copy{margin:12px 0 22px;font-size:14px;line-height:1.55;color:#a9b3bf}
#login-dialog label{font-size:12px;margin:16px 0 8px;color:#d2d9e1}
#login-dialog input:not([type=range]){height:46px;border-color:#3c4743;background:#181c1a;font-size:14px;color:#edf1f6;border-radius:9px;padding:12px}
#login-dialog .password-field{position:relative;gap:0}
#login-dialog .password-field input{padding-right:83px}
#login-dialog .password-visibility{position:absolute;right:5px;top:5px;height:36px;min-width:70px;padding:0 10px;border:0;border-radius:6px;color:#c2cbd5;font-size:12px;background:transparent}
#login-dialog .password-visibility:hover{background:#2d3532;filter:none}
#login-dialog #login-error:empty{display:none}
#login-dialog #login-error{margin:12px 0 0;font-size:12px;line-height:1.6;overflow-wrap:anywhere}
#login-dialog #login-submit{margin-top:22px;min-height:46px;justify-content:center;font-size:14px;border-radius:9px}
#login-dialog .auth-divider{display:flex;align-items:center;gap:14px;margin:22px 0 14px;color:#9aa5af;font-size:11px}
#login-dialog .auth-divider::before,#login-dialog .auth-divider::after{content:'';flex:1;height:1px;background:#36403c}
#login-dialog .google-login{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:44px;padding:0 16px 0 12px;border:1px solid #687a73;border-radius:8px;background:#fff;color:#1b201e;font-size:14px;font-weight:500;line-height:20px}
#login-dialog .google-login:hover{background:#f2f2f2;filter:none}
#login-dialog .google-login svg{width:40px;height:40px;flex:0 0 40px;margin:-1px 0}
#login-dialog #login-toggle{display:block;width:100%;text-align:center;padding:12px 8px;margin-top:12px;font-size:12px;line-height:1.5;color:var(--accent)}
#login-dialog #login-form>.secondary:not(.google-login){display:block;width:100%;padding:10px 8px;margin:0;background:none;color:#b4bfca;font-size:12px;line-height:1.5;text-align:center}
#login-dialog #login-form>.secondary:not(.google-login):hover,#login-dialog #login-toggle:hover{text-decoration:underline;filter:none}
/* Quando o app não alcança o servidor, a tela de login diz isso em vez de
   parecer normal e quebrar só na hora de entrar. */
#login-dialog .login-sem-servidor{margin:10px 0 0;padding:10px 12px;border-radius:8px;background:#3a2226;border:1px solid #5d3238;color:#ffc9bf;font-size:12px;line-height:1.5}
#login-dialog small{margin:18px 0 0;padding-top:16px;color:#829990;font-size:11px;line-height:1.6}
@media(max-width:480px){#login-dialog{padding:24px;width:calc(100vw - 28px);max-width:calc(100vw - 28px);max-height:calc(100dvh - 28px)}#login-dialog h1{font-size:29px}}
@media(max-height:700px){#login-dialog{padding-top:22px;padding-bottom:22px}#login-dialog .brandmark{width:40px;height:40px;margin-bottom:12px}#login-dialog #login-copy{margin-bottom:16px}}

#login-dialog .auth-google-style-0{mask-type:alpha}
#login-dialog .auth-google-style-1{background:conic-gradient(from 90deg,rgba(255, 70, 65, 1) 0deg,rgba(255, 70, 65, 1) 4.14555deg,rgba(49, 134, 255, 1) 39.154deg,rgba(49, 134, 255, 1) 72.0044deg,rgba(0, 165, 183, 1) 96.7463deg,rgba(14, 188, 95, 1) 120.897deg,rgba(14, 188, 95, 1) 154.722deg,rgba(108, 196, 0, 1) 179.136deg,rgba(255, 204, 0, 1) 203.588deg,rgba(255, 211, 20, 1) 226.915deg,rgba(255, 204, 0, 1) 251.688deg,rgba(255, 106, 43, 1) 273.129deg,rgba(253, 70, 65, 1) 289.305deg,rgba(255, 70, 65, 1) 359.593deg,rgba(255, 70, 65, 1) 360deg);height:100%;width:100%;opacity:1}
#login-dialog .google-login svg>path{display:none}

/* Packaged Windows app: integrated dark title strip like modern desktop clients. */
.q3n-desktop body{background:var(--bg)}.q3n-desktop .shell{background:var(--bg);min-height:100dvh}
/* Q3N_DESKTOP_POLISH_START
   Desktop shell owns the viewport. Only internal application regions may scroll.
   Keep this block at the end so legacy responsive rules cannot override it. */

html.q3n-desktop {
    width: 100%;
    height: 100%;
    overflow: hidden !important;
}

/* O cabecalho ocupa a linha dos controles da janela, como no Discord: antes
   havia uma faixa de 32px por cima de tudo, de outra cor, que empurrava o app
   para baixo e nao casava com o fundo. */
.q3n-desktop body {
    width: 100%;
    height: 100%;
    max-width: 100vw;
    padding-top: 0 !important;
    margin: 0;
    overflow: hidden !important;
}

.q3n-desktop .shell {
    width: 100%;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100dvh !important;
    padding-top: 0 !important;
    overflow: hidden !important;
    grid-template-columns:
        var(--q3n-sidebar-width, 270px)
        minmax(0, 1fr) !important;
}

/* A conversa é a terceira coluna desde o 1.0.57. A regra acima é `!important`
   e fixava duas colunas: no app empacotado — e só nele — a conversa ficava sem
   coluna e caía numa segunda linha, fora da tela, levando o resto junto. No
   navegador nada disso aparecia, que é o motivo de ter ido para o ar assim. */
.q3n-desktop .shell:has(#channel-chat:not([hidden])) {
    grid-template-columns:
        var(--q3n-sidebar-width, 270px)
        minmax(0, 1fr)
        var(--q3n-chat-width, 320px) !important;
}

.q3n-desktop .shell > main {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

/* Scroll belongs to the actual content regions, never to the Electron window. */
.q3n-desktop .sidebar,
.q3n-desktop .room-area,
.q3n-desktop .settings-content,
.q3n-desktop .channel-chat,
.q3n-desktop #login-dialog,
.q3n-desktop .audio-settings > .audio-panel,
.q3n-desktop .moderation-dialog {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

.q3n-desktop .sidebar:hover,
.q3n-desktop .room-area:hover,
.q3n-desktop .settings-content:hover,
.q3n-desktop .channel-chat:hover,
.q3n-desktop #login-dialog:hover,
.q3n-desktop .audio-settings > .audio-panel:hover,
.q3n-desktop .moderation-dialog:hover {
    scrollbar-color: #63756e88 transparent;
}

.q3n-desktop *::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

.q3n-desktop *::-webkit-scrollbar-track,
.q3n-desktop *::-webkit-scrollbar-corner {
    background: transparent;
}

.q3n-desktop *::-webkit-scrollbar-thumb {
    background: transparent;
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 999px;
}

.q3n-desktop *:hover::-webkit-scrollbar-thumb {
    background-color: #63756e88;
}

.q3n-desktop *::-webkit-scrollbar-thumb:hover {
    background-color: #7e958cb8;
}

/* The Electron resize hit-area is fixed on the actual sidebar edge.
   It cannot be clipped by sidebar overflow anymore. */
.q3n-desktop .q3n-native-sidebar-resizer {
    position: fixed !important;
    top: 32px !important;
    bottom: 0 !important;
    left: calc(var(--q3n-sidebar-width, 270px) - 5px) !important;
    right: auto !important;
    width: 10px !important;
    height: auto !important;
    z-index: 2147482000 !important;
    cursor: col-resize !important;
    touch-action: none;
    background: transparent !important;
    -webkit-app-region: no-drag;
}

.q3n-desktop .q3n-native-sidebar-resizer::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 4px;
    width: 2px;
    background: transparent;
    transition: background-color .12s ease;
}

.q3n-desktop .q3n-native-sidebar-resizer:hover::after {
    background: #cdf86a88;
}

/* Footer/sidebar profile stays compact: account + microfone, fone, camera e engrenagem. */
.q3n-desktop .self {
    gap: 8px !important;
    padding: 0 8px !important;
}

.q3n-desktop .self > div:not(.self-actions) {
    /* `flex: 1` aqui fazia a caixa do nome crescer ate o fim da barra e empurrar
       os quatro controles para o outro lado — no app empacotado, e so nele,
       porque esta regra tem especificidade maior que a do rodape. Era o que
       sobrava depois de a conta descer para a barra de baixo (1.0.62). */
    flex: 0 1 auto;
    min-width: 0;
}

.q3n-desktop .self strong {
    max-width: none !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* A lista era por id e ficou velha no dia em que microfone, fone e camera
   passaram a morar aqui. Agora a regra e por papel: botao de icone fica,
   qualquer outro nao tem lugar neste canto. */
.q3n-desktop .self button:not(.icon-button) {
    display: none !important;
}

.q3n-desktop .self .icon-button {
    display: grid !important;
    place-items: center;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    margin-left: 0 !important;
    padding: 6px;
}

.q3n-desktop .self-actions {
    gap: 1px;
}

/* Q3N_DESKTOP_POLISH_END */
/* Canal de texto: sem contagem de gente e sem sala. Clicar nele só aponta o
   painel de conversa da direita; a sala de voz em que você está continua na
   tela e na barra de baixo. */
.channel.text-channel .channel-glyph{letter-spacing:0;font-size:15px;text-align:center}
.channel.text-channel.selected{background:#252c29;color:#f1f4f8}
#text-section-label{margin-top:6px}


/* Novidades e rank dentro das Configurações. */
.q3n-changelog{margin-top:26px;border-top:1px solid var(--border);padding-top:20px}
.q3n-changelog h3{font-size:13px;margin:0 0 16px;letter-spacing:.4px}
.q3n-changelog article{margin-bottom:20px}
.q3n-changelog h4{font-size:12px;margin:0 0 8px;color:var(--accent);display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-weight:600}
.q3n-changelog h4>span{color:#70847c;font-size:10px;font-weight:400}
.q3n-changelog ul{margin:0;padding-left:16px}
.q3n-changelog li{font-size:11px;line-height:1.8;color:#9aa4b1;margin-bottom:4px}
#settings-rank details{margin-top:24px}
#settings-rank summary{font-size:11px;color:#acbc9c;padding:6px 0}

/* + para criar canal, engrenagem para configurar, e o popup dos dois. */
.section-tools{display:flex;align-items:center;gap:4px}
.section-add{background:transparent;color:#70847c;font-size:16px;line-height:1;padding:2px 6px;border-radius:5px}
.section-add:hover:not(:disabled){background:#242b28;color:#dfe6ee}
.channel-row{display:flex;align-items:center;gap:2px;margin-bottom:4px;position:relative}
/* Mensagem nova no canal, do jeito que o Discord resolveu: pilula branca na
   calha da esquerda e o nome aceso. Nao e contador — o que a pessoa precisa
   saber e "tem coisa nova ali", e numero exige manter conta certa de cada
   mensagem lida. A pilula fica fora do botao, na borda da lateral, para ser
   vista de relance sem competir com a engrenagem e o balao, que moram na
   ponta direita da mesma linha. Ela fica **dentro** da linha, no vao do padding
   do botao: a lista de canais rola (`#channels{overflow:auto}`) e comeca na
   mesma coluna da linha, entao qualquer recuo negativo some cortado. */
.channel-row.tem-novidade::before{content:"";position:absolute;left:1px;top:50%;transform:translateY(-50%);width:4px;height:10px;border-radius:3px;background:#f1f4f8}
.channel-row.tem-novidade>.channel{color:#f1f4f8;font-weight:600}
.channel-row.tem-novidade>.channel .channel-glyph{color:#f1f4f8}
.channel-row>.channel{flex:1;min-width:0;margin-bottom:0}
/* Ações do canal entram na linha, e não por cima dela: sobrepostas, a
   engrenagem cobria o relógio de quanto tempo você está na sala. Elas aparecem
   no lugar da contagem e do relógio, nunca junto. */
.channel-gear,.channel-chat-open{display:none;place-items:center;width:26px;height:26px;flex:0 0 auto;border-radius:7px;background:transparent;color:#8f99a8;padding:5px}
.channel-gear:hover,.channel-chat-open:hover{background:#2d3532;color:#e6ecf3}
.channel-gear svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.channel-row:hover .channel-gear,.channel-row:focus-within .channel-gear{display:grid}
.channel-count.channel-full{color:#eea7af}
#channel-dialog{width:430px}
#channel-dialog h2{font-size:22px;margin-bottom:6px}
.channel-dialog-sub{font-size:12px!important;color:#8f99a8!important;margin:0 0 22px!important}
.channel-kinds{border:0;padding:0;margin:0 0 8px}
.channel-kinds legend{font-size:11px;font-weight:550;color:#b8c0cb;padding:0;margin-bottom:10px}
.channel-kinds label{display:flex;align-items:flex-start;gap:11px;margin:0 0 6px;padding:12px;border-radius:9px;background:#202624;cursor:pointer}
.channel-kinds label:hover{background:#272e2b}
.channel-kinds label:has(:checked){background:#2b3829}
.channel-kinds input{width:auto;margin:3px 0 0;accent-color:var(--accent)}
.channel-kind-glyph{color:#8f99a8;font-size:15px;letter-spacing:-3px;width:22px;text-align:center;flex-shrink:0}
.channel-kinds strong{display:block;font-size:13px;font-weight:550}
.channel-kinds small{margin-top:4px;color:#798f86}
#channel-limit-row small{line-height:1.6}
#channel-dialog-error{color:#ffb5a5;font-size:12px;margin:12px 0 0;min-height:0}
#channel-dialog .primary{justify-content:center}
#channel-cancel{width:100%;text-align:center}

/* Balão do chat de cada sala de voz, ao lado da engrenagem. */
.channel-chat-open svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.channel-row:hover .channel-chat-open,.channel-row:focus-within .channel-chat-open,.channel-chat-open.ativo{display:grid}
/* Fica aceso na sala cuja conversa está aberta, para dar para ver de quem é o
   chat que você está lendo sem passar o mouse por tudo. */
.channel-chat-open.ativo{color:var(--accent)}

/* A marca no topo já diz onde a pessoa está: o bloco COMUNIDADE/Adega
   repetia isso e comia a altura que a lista de canais quer. A versão subiu para
   o lado da marca. */
.brand{padding-bottom:22px;gap:9px}
/* A versão vai para o canto, e não para dentro da linha da marca: espremida ali
   ela cortava a assinatura no meio ("Seu ponto de en..."). */
.sidebar{position:relative}
.brand>.local-pill{position:absolute;top:10px;right:12px}

/* Live de outra pessoa embutida na sala. O player é o oficial da Twitch/Kick:
   nada passa pelo nosso servidor. */
.lives{display:grid;gap:14px;margin-bottom:24px}
/* Entre o aviso de sala vazia e as transmissões de jogo da galera. Os irmãos
   dela na área da sala são ordenados à mão em channel-chat.css. */
.room-area>#lives{order:3}
.live-card{border:0;border-radius:12px;background:#1f2523;padding:14px;min-width:0}
.live-card header{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.live-card header strong{font-size:13px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.live-card header a{margin-left:auto;padding:0;font-size:10px}
.live-close{width:28px;height:28px;border-radius:7px;background:#282f2c;color:#c7d0da;font-size:19px;line-height:1;padding:0;flex-shrink:0}
.live-card iframe{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:9px;background:#000}
.live-card>small{margin-top:9px}
#live-dialog{width:400px}
.live-platforms{border:0;padding:0;margin:0 0 4px;display:flex;gap:8px}
.live-platforms legend{font-size:11px;font-weight:550;color:#b8c0cb;padding:0;margin-bottom:10px}
.live-platforms label{flex:1;display:flex;align-items:center;gap:9px;padding:11px;border-radius:9px;background:#202624;cursor:pointer}
.live-platforms label:has(:checked){background:#2b3829}
.live-platforms input{width:auto;margin:0;accent-color:var(--accent)}
.live-platforms strong{font-size:13px;font-weight:550}
#live-recent{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:14px}
#live-recent small{margin:0 4px 0 0;color:#798f86}
.live-chip{background:#252c29;color:#c7d0da;font-size:11px;padding:7px 10px;border-radius:999px}
.live-chip:hover{background:#303835}
#live-error{color:#ffb5a5;font-size:12px;margin:12px 0 0}
#live-cancel{width:100%;text-align:center}
.live-dialog-sub{font-size:12px!important;color:#8f99a8!important;margin:0 0 22px!important}

/* Arrastar canal para mudar a ordem: a linha some um pouco enquanto viaja e o
   lugar onde ela vai cair aparece como um traço. */
.channel-row.arrastando{opacity:.4}
.channel-row.alvo-antes{box-shadow:inset 0 2px 0 var(--accent)}
.channel-row.alvo-depois{box-shadow:inset 0 -2px 0 var(--accent)}
.channel-row[draggable=true] .channel{cursor:grab}
.channel-row.arrastando .channel{cursor:grabbing}

/* Canais da casa dentro do popup de live, com o estado que o servidor consultou. */
#live-house{display:grid;gap:6px;margin:0 0 20px}
#live-house>small{color:#798f86;margin:0}
.live-house-item{display:flex;align-items:center;gap:9px;padding:11px;border-radius:9px;background:#202624;text-align:left}
.live-house-item:hover:not(:disabled){background:#272e2b}
.live-house-item strong{font-size:13px;font-weight:550}
.live-house-item small{margin:0 0 0 auto;font-size:10px;color:#8f9ca6;max-width:52%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.live-house-where{font-size:10px;color:#798f86}
.live-dot{width:8px;height:8px;border-radius:50%;background:#54635d;flex-shrink:0}
.live-house-item[data-estado=ao-vivo] .live-dot{background:var(--accent);box-shadow:0 0 10px #c9f23060}
.live-house-item[data-estado=desconhecido] .live-dot{background:#8a7d3f}
#watch-live.tem-live::after{content:"";display:inline-block;width:7px;height:7px;margin-left:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px #c9f23080;vertical-align:middle}

/* Arrastar a seção inteira: o título é a alça. */
.section-label[draggable=true]{cursor:grab}
.channel-section.arrastando{opacity:.5}
.channel-section.alvo-secao{box-shadow:inset 0 2px 0 var(--accent);border-radius:8px}

/* A contagem virou parte do nome, então o resto da linha fica livre para os
   botões — nada mais precisa sumir quando o mouse passa. */
.channel>span:nth-child(2){flex-shrink:1}
.channel{gap:8px}

/* Marca de quem está assistindo a uma live, e o botão de assistir junto. */
.member-status-icon.media-live{color:#cdf86a}
.member-quick-action[data-action=live]{color:#cdf86a}
#watch-live.tem-live::after{content:attr(data-lives);display:inline-grid;place-items:center;min-width:16px;height:16px;margin-left:7px;padding:0 4px;border-radius:999px;background:var(--accent);color:#1c2811;font-size:9px;font-weight:700;box-shadow:none;vertical-align:middle}

.channel-remove{width:100%;text-align:center;color:#eea7af;margin-top:4px}
.channel-remove[data-confirmando="1"]{color:#ffd3d8;background:#3a2529;border-radius:8px}
.channel-kind-glyph svg{display:block;width:18px;height:18px;margin:1px auto 0;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.channel-kind-glyph svg path:first-child{fill:currentColor}

/* Cargo dentro do menu da pessoa. */
.participant-menu-role{display:flex;align-items:center;gap:6px;padding:8px 10px;border-top:1px solid #313a36;margin-top:4px}
.participant-menu-role small{margin:0 auto 0 0;color:#8f9aa3;font-size:10px}
.participant-menu-role-option{padding:6px 10px;border-radius:7px;background:#252c29;color:#c7d0da;font-size:11px}
.participant-menu-role-option[aria-pressed=true]{background:#2b3829;color:var(--accent)}

/* Aviso de conexão ruim na linha da pessoa: só existe quando existe problema. */
.member-status-icon.media-conexao{color:#eea7af}
/* Sussurro: cinza quando é para outra pessoa (você só precisa entender o
   silêncio), aceso quando é para você — aí é com você que estão falando. */
.member-status-icon.media-sussurro{color:#788e85}
.member-status-icon.media-sussurro-mim{color:var(--accent)}

/* Arrastar a janela pelo cabecalho, reservando a direita o espaco onde o
   Windows desenha minimizar, maximizar e fechar (32px de altura). Sem a
   reserva, o canto superior direito dos botoes ficaria embaixo deles. */
.q3n-desktop .topbar {
    -webkit-app-region: drag;
    padding-right: 150px;
}

/* Por papel, e nao por lista de nomes. A regra de cima faz do cabecalho
   inteiro area de arrasto: no app empacotado, o que nao for `no-drag` e
   engolido pelo arrasto e simplesmente nao responde a clique — funcionando
   normalmente no navegador. Enumerar `button, .connection, .topbar-actions`
   envelhecia igual a lista por id que sumiu com os icones do rodape: o
   controle novo nasce quebrado e so aparece no app. */
.q3n-desktop .topbar :is(button, a, input, select, textarea, label, summary,
    [role="button"], [role="tab"], [role="menuitem"], [tabindex], .connection, .topbar-actions) {
    -webkit-app-region: no-drag;
}

/* Segunda area de arrasto, para a janela nunca ficar presa se o cabecalho
   estiver coberto por dialogo ou pela tela de login. */
.q3n-desktop .sidebar .brand {
    -webkit-app-region: drag;
}

.q3n-desktop .sidebar .brand :is(button, a, input, select, textarea, label,
    [role="button"], [tabindex]),
.q3n-desktop .beta-badge {
    -webkit-app-region: no-drag;
}

/* Menu de botão direito no canal. Flutua, então tem sombra — é a única
   sombra do sistema, e ela existe para dizer "isto está por cima". */
.menu-de-canal{position:fixed;z-index:60;background:var(--sup-0);border-radius:6px;padding:6px;display:flex;flex-direction:column;gap:1px;box-shadow:0 8px 28px #00000080}
.menu-de-canal button{display:flex;align-items:center;height:32px;padding:0 8px;border-radius:4px;background:none;color:#b8c2bc;font-size:13.5px;text-align:left;width:100%}
.menu-de-canal button:hover,.menu-de-canal button:focus-visible{background:var(--ativo);color:var(--txt-1)}
.menu-de-canal button.perigo{color:#f58a80}
.menu-de-canal button.perigo:hover{background:#6d2b26;color:#ffd9d4}

/* O rodape da voz, depois que os controles desceram do cabecalho (18/09/2026).
   Uma linha so: estado da voz a esquerda, o que se faz com a chamada a direita. */
.voice-bar .connection{display:none}
/* O `data-ao-vivo` ja existia no streams.js para isto: parado, o recado da
   transmissao repete o title do botao; transmitindo, carrega janela,
   resolucao e Mb/s, e ai vale o espaco. */
#share-status[data-ao-vivo="false"]{display:none}
.voice-bar .controls{flex-wrap:nowrap}
.voice-bar .controls button{white-space:nowrap;font-size:12px;padding:8px 11px}
.voice-bar>div:first-child{min-width:0}
.voice-bar>div:first-child>div{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* O motivo de nao dar para transmitir continua a vista — botao desligado sem
   explicacao e o que esta tela passou o mes inteiro consertando —, mas na
   mesma linha do estado, e nao empilhado embaixo dele. */

/* Quem rola e a lista de canais, nao a lateral inteira.
   Com a lateral rolando por dentro, bastava o navegador trazer um canal
   para a vista ao focar — coisa que ele faz sozinho, mesmo com overflow
   escondido — para a marca sair pela borda de cima e nunca mais voltar. */
.canais-rolagem{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--sup-3) transparent}
.sidebar>.brand,.sidebar>.self{flex:none}

/* O chat vira a terceira coluna da casca — do topo ao rodapé, na mesma
   superfície da lateral — só quando sobra largura para a sala continuar
   servindo. Abaixo disso ele flutua por cima, como já fazia no celular. */
@media(min-width:1101px){.shell:has(#channel-chat:not([hidden])){grid-template-columns:230px minmax(0,1fr) var(--q3n-chat-width,320px)}}
/* Entre 901 e 1100 o chat continua sendo coluna — flutuar por cima ali
   cobriria a lateral e os cliques dela —, so que mais estreito, para a
   sala nao cair abaixo dos 440px que ainda servem para ver gente. */
@media(min-width:901px) and (max-width:1100px){.shell:has(#channel-chat:not([hidden])){grid-template-columns:230px minmax(0,1fr) 240px}}

/* O canto da conta ficou apertado quando os quatro icones desceram para 24px:
   com nome e estado de verdade ("Rodrigo" / "Fora dos canais") o texto
   quebrava em duas linhas dentro de um bloco de altura fixa. */
.self strong,.self #self-status{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.self #self-status{font-size:11px;line-height:1.2}

/* O rodape da voz atravessa a janela inteira: ele e a barra da chamada, e a
   chamada nao e so do miolo. Antes ele parava onde a conversa comecava, e
   o canto de baixo da tela ficava com duas coisas diferentes lado a lado. */
.shell{grid-template-rows:minmax(0,1fr) auto}
/* Lugar dito, e nao deduzido: a conversa entra na casca por JavaScript,
   depois do rodape, e a colocacao automatica jogava ela para a linha de
   baixo — a tela inteira desmontava. */
@media(min-width:701px){
  .shell>.sidebar{grid-row:1;grid-column:1}
  .shell>main{grid-row:1;grid-column:2}
  .shell>#channel-chat{grid-row:1;grid-column:3}
  .shell>.voice-bar{grid-row:2;grid-column:1/-1}
}
.q3n-desktop .shell{grid-template-rows:minmax(0,1fr) auto !important}

/* Os botoes da janela do Windows (minimizar, maximizar, fechar) sao desenhados
   pelo sistema no canto superior direito, numa faixa de 32px. Ate o 1.0.56 quem
   encostava naquele canto era o cabecalho do meio, e por isso ele reserva 150px
   a direita. Desde que a conversa virou a terceira coluna, quem encosta la e o
   cabecalho **dela** — e os botoes do sistema caiam em cima da lixeira e do x de
   fechar a conversa, como se fossem o mesmo grupo. A reserva vai junto. */
.q3n-desktop .shell > #channel-chat > header {
    padding-top: 32px;
    -webkit-app-region: drag;
}
.q3n-desktop .shell > #channel-chat > header :is(button, a, input, select, textarea, label,
    [role="button"], [tabindex]) {
    -webkit-app-region: no-drag;
}
/* Com a conversa aberta ela ocupa o canto, entao o meio nao precisa mais da
   reserva — sem isto sobra um buraco de 150px no meio do cabecalho. */
.q3n-desktop .shell:has(#channel-chat:not([hidden])) .topbar {
    padding-right: 24px;
}

/* A conta desceu para o rodape (1.0.62). Antes ela ficava no pe da lateral
   dizendo "Conectado por voz" enquanto o rodape, dois centimetros ao lado,
   dizia "Conectado - Geral, microfone e som pausados": a mesma informacao em
   dois lugares, e a pior das duas na frente. Agora e uma frase so — quem eu
   sou, onde estou, e como esta o meu microfone. */
.voice-bar > .self {
    display: flex;
    align-items: center;
    gap: 10px;
    height: auto;
    min-width: 0;
    flex: 1 1 auto;
    margin: 0;
    padding: 0;
    background: none;
}
.voice-bar .self-texto {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}
.voice-bar .self-texto strong { font-size: 13px; color: var(--txt-1); }


.voice-bar .self-actions { margin-left: 0; }
/* Janela estreita: o texto sai primeiro. Avatar e os quatro icones ficam, que e
   o que se precisa alcancar — ler o proprio nome nao e urgente. */
@media(max-width:1150px){ .voice-bar .self-texto { display: none; } }

/* Os quatro controles ficam colados no nome, e nao empurrados para a direita:
   eles sao "o meu microfone", nao "o que se faz com a chamada". Quem os
   mandava para longe era `.self>div{flex:1}`, que pegava tambem a caixa do
   texto e a fazia crescer ate o fim da barra. */
/* `.self > .self-texto` e nao `.voice-bar .self-texto`: a regra generica
   `.self>div:not(.self-actions){flex:1}` conta o `:not()` na especificidade e
   vencia — a caixa do nome crescia ate o fim da barra e empurrava os quatro
   controles para longe dele. */
.voice-bar .self > .self-texto { flex: 0 1 auto; }
.voice-bar .self-actions { margin-left: 0 !important; }
/* "Fora do canal" e "Escolha um canal para entrar" saem: quem esta fora ve a
   lista de canais inteira do lado, e quem esta dentro ve o canal aceso nela.
   O ponto ao lado do avatar ja diz se a voz esta conectada. Os elementos ficam
   no lugar porque o `render()` escreve neles a cada volta. */
.voice-bar #voice-status, .voice-bar #voice-detail { display: none; }

/* O bloco da conta tem a largura da lateral, como no Discord: o ultimo icone
   termina na mesma linha que separa a lateral do meio, e nao a meia tela de
   distancia. E os icones crescem para o tamanho do Discord — no tamanho
   anterior (24px) eles sumiam ao lado de tudo. */
.voice-bar > .self { position: relative; container-type: inline-size; gap: 8px; }
/* Só onde existem duas colunas. Abaixo de 901px o `mobile.css` assume e a
   lateral vira a tela inteira: lá não há divisória em que encostar. */
@media(min-width:901px){
    .voice-bar { padding: 0 16px 0 0; }
    .voice-bar > .self { width: 230px; flex: 0 0 auto; padding: 0 8px; }
}
.q3n-desktop .voice-bar { padding: 0 16px 0 0; }
.q3n-desktop .voice-bar > .self {
    width: var(--q3n-sidebar-width, 270px);
    flex: 0 0 auto;
    padding: 0 8px;
}

/* Quem cede espaco e o nome, com reticencias. Avatar e os quatro controles tem
   tamanho fixo: um avatar de 15px e um icone cortado nao servem para nada. */
.voice-bar .self > .avatar { flex: 0 0 auto; }
.voice-bar .self > .self-texto { flex: 1 1 auto; min-width: 0; display: block; }
.voice-bar .self-texto > strong { max-width: 100%; }
/* `.self div>span{display:block}` tem mais especificidade que o `[hidden]` do
   navegador: "Desconectado" continuava desenhado e comia a faixa do nome, que
   media 9px de largura. */
.voice-bar .self-texto > [hidden] { display: none; }
.voice-bar .self-actions { margin-left: auto !important; gap: 4px; }
.voice-bar .self .icon-button,
.q3n-desktop .voice-bar .self .icon-button,
.voice-bar .self #settings-open {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 6px;
}
.voice-bar .self .icon-button svg { width: 20px; height: 20px; }

/* O ponto de estado sobe para o canto do avatar, como no Discord: em linha ele
   custava 18px de uma faixa que precisa caber avatar, nome e **quatro** icones
   (o Discord tem tres — nos temos camera tambem). */
.voice-bar #voice-dot {
    position: absolute;
    left: 30px;
    bottom: 2px;
    width: 10px;
    height: 10px;
    box-shadow: 0 0 0 3px var(--sup-0);
}

/* Lateral estreita: os icones encolhem antes de o nome sumir — e a engrenagem
   nunca sai da faixa. A largura aqui e a do bloco, nao a da janela: e por isso
   que a conta se ajusta quando **a lateral** e arrastada. */
@container (max-width: 252px) {
    .voice-bar .self .icon-button,
    .q3n-desktop .voice-bar .self .icon-button,
    .voice-bar .self #settings-open { width: 26px; height: 26px; flex: 0 0 26px; }
    .voice-bar .self .icon-button svg { width: 18px; height: 18px; }
    .voice-bar .self-actions { gap: 2px; }
}
@container (max-width: 190px) { .voice-bar .self > .self-texto { display: none; } }

/* A casa do recado da transmissao: o meio do rodape, que e o unico espaco que
   sobra e cresce. */
.voice-bar .recado-do-rodape {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
}