*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;background:#0e1014;color:#eef1f5}button,input,select{font:inherit}.hidden{display:none!important}.app-shell{min-height:100vh;display:grid;grid-template-columns:235px minmax(0,1fr);background:#0f1115}
.channel-sidebar{background:#14171c;border-right:1px solid #262b34;display:flex;flex-direction:column;min-height:100vh}.server-title{height:62px;padding:0 14px;display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid #262b34}.server-title strong{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.status{padding:4px 7px;border-radius:999px;font-size:9px;font-weight:800;text-transform:uppercase}.status.online{background:#153a28;color:#78d49e}.status.offline{background:#402529;color:#e49da5}.sidebar-section{padding:14px 8px 4px}.participants-section{min-height:0;overflow:auto}.sidebar-heading{padding:0 8px 7px;color:#7d8796;font-size:10px;font-weight:800;letter-spacing:.08em}.room-list,.participant-list{display:grid;gap:3px}.room-item{width:100%;border:0;background:transparent;color:#aab2bf;padding:8px 9px;border-radius:7px;display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;gap:5px;text-align:left;cursor:pointer}.room-item:hover{background:#1d222a;color:#e9edf3}.room-item.active-room{background:#242a33;color:#fff}.room-item small{color:#747e8c;font-size:10px}.room-speaker{color:#8994a4;font-size:18px;line-height:1}.participant{min-width:0;padding:7px 8px;border-radius:7px;display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:8px;color:#b7bfca;transition:background .15s ease}.participant:hover{background:#1c2128}.participant.self{color:#fff}.participant-avatar{position:relative;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:#283141;font-size:10px;font-weight:800}.presence-dot{position:absolute;right:-1px;bottom:-1px;width:9px;height:9px;border-radius:50%;border:2px solid #14171c;background:#67707c}.presence-dot.connected{background:#3fbf78}.presence-dot.connecting,.presence-dot.disconnected{background:#d6a542}.presence-dot.failed,.presence-dot.closed{background:#d55d66}.participant-info{min-width:0}.participant-name{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:12px;font-weight:700}.participant-state{display:block;color:#778190;font-size:9px;margin-top:1px}.participant-icons{color:#9da7b5;font-size:11px;white-space:nowrap}.participant.sharing{background:#1b2521}.participant.sharing .participant-name{color:#8ee7ad}.participant.sharing .participant-avatar{box-shadow:0 0 0 1px #3fbf78}.participant.sharing .participant-state{color:#64c98a;font-weight:700}.live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#4fd887;margin-right:5px;vertical-align:1px;animation:livePulse 1.4s ease-in-out infinite}@keyframes livePulse{0%,100%{opacity:.35}50%{opacity:1}}.sidebar-footer{margin-top:auto;padding:11px 14px;border-top:1px solid #262b34;color:#6f7987;font-size:9px;display:flex;justify-content:space-between;gap:10px}
.content{min-width:0;min-height:100vh;background:#101217}.join-view{min-height:100vh;display:grid;place-items:center;padding:24px}.login-card{width:min(760px,100%);display:grid;grid-template-columns:minmax(260px,1fr) minmax(320px,.9fr);overflow:hidden;border:1px solid #2c323c;border-radius:14px;background:#171b21;box-shadow:0 18px 50px rgba(0,0,0,.25)}.login-brand-panel{min-height:390px;background:linear-gradient(145deg,#11151b,#171d28);display:grid;place-content:center;padding:42px;text-align:center;border-right:1px solid #2c323c}.brand-mark{width:92px;height:92px;border-radius:24px;display:grid;place-items:center;margin:0 auto 20px;background:#4d67d7;color:white;font-size:34px;font-weight:900;letter-spacing:-.05em;box-shadow:0 16px 40px rgba(24,38,92,.3)}.login-brand-panel h2{margin:0 0 8px;font-size:27px}.login-brand-panel p{margin:0;color:#929dad;font-size:13px;line-height:1.5;max-width:260px}.join-box{width:100%;background:#171b21;border:1px solid #2c323c;border-radius:12px;padding:24px;display:grid;gap:14px;box-shadow:none;border:0;border-radius:0;align-content:center;padding:30px}.name-error{margin-top:-7px;color:#e49da5;font-size:11px}.join-brand h1{margin:0 0 5px;font-size:23px}.join-brand p,.hint{margin:0;color:#8f99a8;font-size:12px;line-height:1.45}.hint strong{color:#c9d0db}label{display:grid;gap:6px;color:#c2c9d4;font-size:12px}input,select{width:100%;background:#0e1115;color:#fff;border:1px solid #343b47;border-radius:7px;padding:9px 10px;outline:none}input:focus,select:focus{border-color:#6075cd}button{border:1px solid #39414d;background:#242a32;color:#fff;border-radius:7px;padding:10px 12px;font-weight:700;cursor:pointer}button:hover{filter:brightness(1.08)}button:disabled{opacity:.55;cursor:not-allowed}.primary{background:#465fc4;border-color:#5970cf}.danger{background:#713238;border-color:#834149}
.room-panel{min-height:100vh;height:100vh;display:grid;grid-template-rows:62px minmax(0,1fr) 88px}.room-header{height:62px;border-bottom:1px solid #262b34;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:0 20px;background:#14171c}.room-heading{display:flex;align-items:center;gap:10px}.channel-icon{color:#7e8898;font-size:22px;font-weight:700}.room-kicker{color:#747e8e;font-size:8px;font-weight:800;letter-spacing:.08em;margin-bottom:1px}.room-header h2{margin:0;font-size:16px}.room-meta{display:flex;align-items:center;gap:6px;color:#8e98a6;font-size:11px}.room-meta strong{color:#fff}.meta-dot{width:7px;height:7px;border-radius:50%;background:#3fbf78}.stage-area{min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr)}.watch-toolbar{border-bottom:1px solid #252b34;background:#12151a;padding:10px 18px;display:flex;align-items:end;justify-content:space-between;gap:16px}.view-switch{display:flex;gap:6px}.view-btn{padding:8px 11px;color:#9da7b5;background:#1a1e25}.view-btn.active{color:#fff;background:#2a3140;border-color:#485267}.stream-pickers{display:flex;align-items:end;gap:8px}.stream-pickers label{min-width:185px;font-size:9px;color:#7f8998}.stream-pickers select{padding:7px 9px;font-size:11px}.stage{min-height:0;overflow:auto;padding:14px 16px 18px;position:relative}.empty-stage{min-height:260px;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#747e8c;text-align:center}.empty-stage strong{color:#b7bfca;font-size:14px}.empty-stage span{font-size:11px}.empty-symbol{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:#181c22;border:1px solid #2a3039;font-size:21px;color:#66717f;margin-bottom:4px}.watch-grid{height:100%;min-height:260px;display:grid;gap:12px}.watch-grid.mode-one{grid-template-columns:minmax(0,1fr)}.watch-grid.mode-two{grid-template-columns:repeat(2,minmax(0,1fr))}.watch-slot{min-width:0;overflow:hidden;border:1px solid #2b313a;border-radius:9px;background:#07090c;display:grid;grid-template-rows:36px minmax(0,1fr)}.watch-title{padding:7px 11px;background:#181c22;border-bottom:1px solid #292f38;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;font-weight:700}.live-pill{color:#ffb0b6;background:#49262a;border-radius:999px;padding:3px 6px;font-size:8px;letter-spacing:.06em}.watch-video{display:grid;place-items:center;min-height:220px;background:#050609}.watch-video{overflow:hidden;min-width:0;min-height:0}.watch-video video{display:block;width:100%;height:100%;min-width:0;min-height:0;max-width:100%;max-height:calc(100vh - 260px);object-fit:contain;object-position:center center;background:#050609}.voice-audio-container{display:none}
.controls-wrap{border-top:1px solid #262b34;background:#14171c;display:grid;place-items:center;padding:10px 12px 8px}.controls{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}.controls button{min-width:118px;padding:9px 11px}.controls button.active-muted{background:#343841;color:#d7dce5;border-color:#474d58}.controls-note{margin-top:5px;color:#687281;font-size:9px}
@media(max-width:1100px){.app-shell{grid-template-columns:205px minmax(0,1fr)}.watch-toolbar{align-items:stretch;flex-direction:column}.stream-pickers{width:100%}.stream-pickers label{flex:1;min-width:0}.watch-grid.mode-two{grid-template-columns:1fr}.controls button{min-width:50px}.controls button span{display:none}.controls-note{display:none}}
@media(max-width:720px){.app-shell{grid-template-columns:1fr}.login-card{grid-template-columns:1fr}.login-brand-panel{min-height:220px;max-height:260px;border-right:0;border-bottom:1px solid #2c323c;padding:26px}.brand-mark{width:68px;height:68px;border-radius:18px;font-size:26px;margin-bottom:12px}.room-panel{grid-template-rows:58px minmax(0,1fr) 72px}.room-header{height:58px;padding:0 12px}.watch-toolbar{padding:8px}.stage{padding:8px}.stream-pickers{flex-direction:column;align-items:stretch}.watch-video video{max-height:calc(100vh - 250px)}.controls-wrap{padding:8px}}

.initial-room{display:flex;align-items:center;justify-content:space-between;border:1px solid #303641;background:#111419;border-radius:7px;padding:10px 11px;color:#8f99a8;font-size:12px}.initial-room strong{color:#eef1f5;font-size:13px}

.controls button.needs-audio{border-color:#b28a38;background:#3a3020;color:#ffe1a0}

.controls-note.warning{color:#f0b46a;font-weight:600}

/* V11 */
.view-tools{display:flex;align-items:end;gap:10px;flex-wrap:wrap}.quality-control{display:flex;gap:7px;align-items:end}.quality-control label{min-width:150px;font-size:9px;color:#7f8998}.quality-control select{padding:7px 9px;font-size:11px}.quality-control button{padding:8px 10px;white-space:nowrap}.watch-video video.fit-cover{object-fit:cover}.watch-video:fullscreen,.watch-slot:fullscreen{background:#050609}.watch-video:fullscreen video,.watch-slot:fullscreen video{max-height:none;width:100%;height:100%;object-fit:contain}.stream-stats{margin-top:4px;color:#657080;font-size:9px;text-align:center}.join-box input[type=password]{letter-spacing:.04em}.auth-error{color:#e49da5}
@media(max-width:1100px){.view-tools{width:100%;justify-content:space-between}.quality-control{flex-wrap:wrap}}

.room-item.room-switching{opacity:.68;pointer-events:none}

.participant{cursor:pointer}.participant.self{cursor:default}.participant-popover{position:fixed;z-index:50;width:230px;padding:12px;background:#17191f;border:1px solid #30343d;border-radius:10px;box-shadow:0 12px 32px #0008}.participant-popover strong{display:block;margin-bottom:7px}.peer-quality{font-size:12px;margin-bottom:8px}.quality-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}.quality-dot.boa,.history-bars i.boa{background:#38b46a}.quality-dot.instável,.history-bars i.instável{background:#d7a53a}.quality-dot.ruim,.history-bars i.ruim{background:#d65353}.peer-metrics{display:flex;gap:14px;font-size:11px;color:#9da3ae;margin-bottom:10px}.peer-metrics b{color:#e5e7eb}.peer-mute{width:100%;margin:3px 0 9px}.peer-volume{font-size:11px;color:#aeb4be;display:flex;gap:8px;align-items:center}.peer-volume input{width:120px}.history-bars{height:18px;display:flex;align-items:flex-end;gap:2px;margin-top:10px}.history-bars i{display:block;width:5px;height:12px;border-radius:2px;background:#555}.room-item:disabled{opacity:.7;cursor:wait}.controls-note:empty{display:none}


/* V14 — participantes dentro das salas */
.voice-rooms-section{min-height:0}.room-channel{display:grid;gap:2px}.room-channel+.room-channel{margin-top:2px}.room-channel.active-room-wrap{background:rgba(255,255,255,.015);border-radius:8px}.room-members{display:grid;gap:1px;padding:0 4px 4px 24px}.room-members.empty{padding-bottom:0}.room-member{min-width:0;display:grid;grid-template-columns:25px minmax(0,1fr) auto;align-items:center;gap:7px;padding:5px 6px;border-radius:6px;color:#9ea7b4}.room-member.clickable{cursor:pointer}.room-member.clickable:hover{background:#1c2128;color:#e7ebf1}.room-member.self{color:#e9edf3}.room-member.sharing{background:#18231e}.room-member.sharing .room-member-name{color:#8ee7ad}.room-member-avatar{position:relative;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#27303d;font-size:8px;font-weight:800}.room-member-avatar .presence-dot{width:8px;height:8px;border-width:2px}.room-member-info{min-width:0;display:flex;align-items:center;gap:5px}.room-member-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10.5px;font-weight:650}.room-member-live{flex:none;color:#5fc988;font-size:8px;font-weight:700}.room-member-live .live-dot{width:5px;height:5px;margin-right:3px}.room-member-icons{font-size:9px;color:#8994a2;white-space:nowrap}.room-item.active-room{background:#242a33}.room-channel.active-room-wrap>.room-item .room-speaker{color:#b6c0cf}.participants-section{display:none!important}
\n\n.share-control{position:relative;display:inline-flex}

/* V25 — separação real entre login e aplicação */
.login-only{margin:0;background:#101217}.login-page{min-height:100vh;display:grid;place-items:center;padding:24px}.login-only .login-card{width:min(760px,100%)}.login-only .name-error[hidden]{display:none}.server-title .status{font-size:9px;text-transform:uppercase}.room-item small{margin-left:auto;color:#788391}.room-member-live{white-space:nowrap}

/* Fala Guys helper */
.helper-card{margin:auto 10px 12px;padding:10px;border:1px solid #2b323c;border-radius:9px;background:#15191f;display:grid;gap:9px}.helper-head{display:flex;align-items:center;gap:8px}.helper-head>div{display:grid;gap:1px;min-width:0}.helper-head strong{font-size:10px;color:#d8dde6}.helper-head small{font-size:9px;color:#7f8997;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}.helper-dot{width:8px;height:8px;border-radius:50%;background:#68717d;flex:0 0 auto}.helper-card.connected .helper-dot{background:#43bf7a;box-shadow:0 0 0 3px rgba(67,191,122,.10)}.helper-actions{display:flex;gap:6px}.helper-install,.helper-check{flex:1;text-align:center;text-decoration:none;border:1px solid #38414e;border-radius:6px;padding:6px 7px;font-size:9px;font-weight:700;color:#d9dee7;background:#202630}.helper-install{background:#354ba9;border-color:#485fc1;color:#fff}.helper-card.connected .helper-install{display:none}.helper-card:not(.connected) .helper-check{display:none}

/* V30 - seletor de aplicativo e áudio isolado */
.share-chooser-overlay{position:fixed;inset:0;background:rgba(0,0,0,.62);display:flex;align-items:center;justify-content:center;z-index:5000;padding:20px}.share-chooser{width:min(1000px,95vw);max-height:88vh;background:#171b22;border:1px solid #303846;border-radius:14px;box-shadow:0 24px 70px rgba(0,0,0,.5);padding:14px;display:flex;flex-direction:column;gap:10px}.share-chooser-head{display:flex;align-items:center;justify-content:space-between;padding:4px 4px 10px}.share-chooser-head strong{font-size:18px}.share-chooser-head small{display:block;color:#8793a8;margin-top:3px}.share-close{background:transparent;border:0;color:#aeb8c8;font-size:25px;padding:2px 8px}.share-apps{display:flex;flex-direction:column;gap:6px;overflow:auto;max-height:48vh}.share-app,.share-normal{width:100%;display:flex;align-items:center;gap:11px;text-align:left;border:1px solid #303846;background:#202632;color:#f3f6fb;border-radius:9px;padding:11px 12px}.share-app:hover,.share-normal:hover{background:#283141;border-color:#48556b}.share-app>div,.share-normal>div{min-width:0;flex:1}.share-app strong,.share-normal strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.share-app small,.share-normal small{display:block;color:#8f9bb0;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.share-isolated{font-size:11px;color:#64d79b;background:#163327;border:1px solid #24543d;border-radius:999px;padding:3px 7px;white-space:nowrap}.share-app-icon{font-size:18px}.share-helper-missing,.share-loading{padding:14px;color:#95a0b3;border:1px dashed #303846;border-radius:8px}.helper-install.visible-update{display:inline-flex!important}

.live-volume{display:flex;align-items:center;gap:8px;padding:0 8px;border:1px solid var(--border);border-radius:8px;background:var(--panel)}
.live-volume label{display:flex;align-items:center;gap:7px;font-size:12px;white-space:nowrap}
.live-volume input[type="range"]{width:120px;accent-color:currentColor}
.live-volume #liveVolumeValue{min-width:38px;text-align:right;font-variant-numeric:tabular-nums}
.live-volume .volume-label{opacity:.8}
@media (max-width:900px){.live-volume .volume-label{display:none}.live-volume input[type="range"]{width:90px}}

/* V46 — player estável, reconexão clara e seletor simplificado */
.status.reconnecting{background:#463817;color:#f0ca70}
.watch-slot{contain:layout paint;grid-template-rows:40px minmax(0,1fr)}
.watch-title{min-width:0;height:40px;box-sizing:border-box}
.watch-title>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.watch-head-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.watch-video{position:relative;width:100%;height:100%;min-height:220px;overflow:hidden;contain:layout paint;background:#050609}
.watch-video video{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;object-position:center;background:#050609}
.slot-audio{display:flex;align-items:center;gap:5px;font-weight:500}
.slot-audio button{min-width:30px;width:30px;height:26px;padding:0;border-radius:6px;background:#232933;border:1px solid #343c49}
.slot-audio input[type="range"]{width:82px;accent-color:#d5dbe5}
.slot-audio span{min-width:32px;text-align:right;font-size:9px;color:#929dad;font-variant-numeric:tabular-nums}
.watch-grid.mode-one .watch-video{aspect-ratio:16/9;align-self:center}
.watch-grid.mode-two .watch-video{aspect-ratio:16/9}
.share-chooser{width:min(1000px,95vw);max-height:88vh;padding:0;gap:0;overflow:hidden}
.share-chooser-head{padding:18px 20px 14px;border-bottom:1px solid #2a313c}
.share-chooser-head strong{font-size:19px}
.share-chooser-head small{font-size:12px;line-height:1.4}
.share-section-label{padding:13px 20px 7px;color:#7f8a9c;font-size:10px;font-weight:800;letter-spacing:.08em}
.share-apps{gap:2px;max-height:48vh;padding:0 10px 10px}
.share-app{border:0;border-bottom:1px solid #282f39;border-radius:7px;background:transparent;padding:10px 10px}
.share-app:hover,.share-app.foreground{background:#222a35}
.share-app-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:8px;background:#29313d;font-size:17px}
.share-app strong{font-size:13px}
.share-app small{font-size:10px}
.share-app-meta{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.share-audio-badge,.share-current{font-size:9px;border-radius:999px;padding:3px 6px;white-space:nowrap}
.share-audio-badge{color:#9ee2bc;background:#173327}
.share-current{color:#f2d28a;background:#3a3019}
.share-normal-wrap{padding:8px 14px 16px;border-top:1px solid #2a313c}
.share-normal{border:1px solid #313a47;background:#1d232c;border-radius:9px;padding:11px 12px}
.share-helper-missing,.share-loading{margin:4px 10px 10px}
.reconnect-note{font-weight:700;color:#f0ca70}
@media(max-width:760px){
  .slot-audio input[type="range"]{width:58px}
  .slot-audio span{display:none}
  .share-app-meta .share-audio-badge{display:none}
}

/* V47 — diagnóstico local de captura nativa */
.helper-actions{flex-wrap:wrap}
#helperVideoTest{font-size:9px}
#helperVideoTest:disabled{opacity:.6;cursor:wait}

#helperVideo60Test{font-size:9px} #helperVideo60Test:disabled{opacity:.6;cursor:wait}

#helperNativeSession{font-size:9px} #helperNativeSession:disabled{opacity:.6;cursor:wait}

/* V50 — interface limpa e contador de espectadores */
.viewer-pill{font-size:9px;color:#aeb8c8;background:#202630;border:1px solid #343c49;border-radius:999px;padding:3px 7px;white-space:nowrap}
.helper-actions{flex-wrap:nowrap}.helper-card.connected .helper-check{display:block}

.room-member-ping{font-size:9px;color:#7f8997;white-space:nowrap;min-width:42px;text-align:right}.room-member.sharing{background:#1b2521;box-shadow:inset 2px 0 #3fbf78}.room-member.sharing .room-member-name{color:#8ee7ad}
/* V52: helper status compacto */
.helper-card.connected .helper-install{display:inline-flex!important;align-items:center;justify-content:center}
.viewer-pill{display:inline-flex!important;align-items:center;gap:3px;color:#aeb8c7;font-size:10px;font-weight:700}
.viewer-pill.hidden{display:inline-flex!important}

/* V54 - player nativo via MediaMTX/WebRTC no mesmo origin */
.watch-video{position:relative}
.watch-video .native-player{position:absolute;inset:0;width:100%;height:100%;border:0;background:#050609;display:block}
.watch-video .native-player.hidden{display:none}
.route.servidor{background:#19304a;color:#9fd0ff;border-color:#294b6d}

/* V57: seção de área de trabalho no seletor de compartilhamento */
.share-audio-pick{padding:2px 6px 8px}
.share-audio-pick label{display:flex;align-items:center;gap:8px;color:#7f8a9c;font-size:10px;font-weight:700;letter-spacing:.04em}
.share-audio-pick select{flex:1;min-width:0;padding:7px 9px;font-size:11px;background:#232933;color:#eef1f5;border:1px solid #343c49;border-radius:6px}

/* V57: tela cheia imersiva do painel de transmissao */
.slot-full{min-width:30px;width:30px;height:26px;padding:0;border-radius:6px;background:#232933;border:1px solid #343c49;color:#d7dce5;cursor:pointer;font-size:13px;line-height:1}
.slot-full:hover{background:#2c333f}
.watch-slot:fullscreen{background:#000;display:flex;flex-direction:column}
/* Em tela cheia so a imagem importa: o cabecalho sai de cena. */
.watch-slot:fullscreen .watch-title{display:none}
.watch-slot:fullscreen .watch-video{flex:1;min-height:0}
.watch-slot:fullscreen .watch-video video,
.watch-slot:fullscreen .watch-video iframe{width:100%;height:100%;border:0}

/* V57: cor do indicador de conexao na lista de participantes.
   Baseado na latencia ate a internet publica (nao ate o servidor). */
.room-member-ping.net-boa{color:#3fa66a}
.room-member-ping.net-media{color:#d2a355}
.room-member-ping.net-ruim{color:#e06c65;font-weight:700}
.room-member-ping.net-desconhecida{color:#687281}

/* V57: estado do Helper explicito (atualizado / desatualizado / ausente) */
.helper-card.desatualizado{border-color:#8a6a2f;background:#231d12}
.helper-card.desatualizado .helper-dot{background:#d2a355}
.helper-card.desatualizado #helperStatus{color:#e0b56a}

/* V57: alternativa em .zip quando o navegador bloqueia o .exe sem assinatura */
.helper-zip{display:block;margin-top:6px;font-size:10px;color:#7f8a9c;text-decoration:underline;cursor:pointer}
.helper-zip:hover{color:#9aa4b2}

/* V57: senha do pacote protegido, logo abaixo do botao de download */
.helper-senha{display:flex;align-items:center;gap:5px;width:100%;margin-top:6px;padding:7px 7px;
  font-size:11px;color:#d7dce5;background:#232933;border:1px solid #3a4350;border-radius:6px;
  cursor:pointer;text-align:left}
.helper-senha:hover{background:#2b323d;border-color:#4a5563}
.helper-senha b{color:#e0b56a;font-family:ui-monospace,Consolas,monospace;font-size:12px;letter-spacing:.04em}
.helper-senha .copiar-dica{margin-left:auto;flex:0 0 auto;font-size:9px;color:#7f8a9c;text-transform:uppercase;letter-spacing:.03em}
.helper-senha.copiada{border-color:#3fa66a}
.helper-senha.copiada .copiar-dica{color:#3fa66a}


/* V57: layout do card do Helper empilhado (botao larga + senha embaixo) */
.helper-actions{flex-direction:column;align-items:stretch;gap:6px}
.helper-install{width:100%}
.helper-zip{align-self:flex-start}

/* V57: senha em uma linha, sem transbordar o card */
.helper-senha{width:100%;overflow:hidden}
.helper-senha .senha-rotulo{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.helper-senha b{flex:0 0 auto;white-space:nowrap}

/* V57: destaca que o modo P2P e menos estavel */
.tag-instavel{display:inline-block;font-size:9px;font-weight:700;color:#e0b56a;background:#3a2e14;border:1px solid #5a4a24;border-radius:4px;padding:1px 5px;margin-left:6px;text-transform:uppercase;letter-spacing:.03em}
.share-normal-wrap .share-normal{opacity:.75}
.share-normal-wrap .share-normal:hover{opacity:1}

/* Tela de compartilhar redesenhada: grid estilo Discord com miniatura ao vivo. */
.share-apps,.share-monitors{display:grid;grid-template-columns:repeat(auto-fill,minmax(410px,1fr));gap:16px;padding:8px 18px 18px;max-height:66vh;overflow:auto}
.share-card{display:flex;flex-direction:column;padding:0;border:1px solid #2b323d;border-radius:10px;background:#1c222c;overflow:hidden;text-align:left;color:#f3f6fb}
.share-card:hover{background:#232b37;border-color:#46536a}
.share-card.foreground{border-color:#3a7bd5;box-shadow:0 0 0 1px #3a7bd5}
.share-thumb-wrap{position:relative;width:100%;height:0;padding-bottom:56.25%;background:#0a0d12;overflow:hidden}
.share-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;opacity:0;transition:opacity .18s}
.share-card.has-thumb .share-thumb{opacity:1}
.share-card.has-thumb .share-thumb-ph{display:none}
.share-thumb-ph{position:absolute;inset:0;display:grid;place-items:center;font-size:30px;color:#4a5566}
.share-live{display:inline-block;font-size:9px;font-weight:800;letter-spacing:.05em;color:#fff;background:#d54848;border-radius:4px;padding:2px 6px;margin-bottom:5px}
.share-card-body{padding:9px 11px;min-width:0}
.share-card-body strong{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.share-card-body small{display:block;color:#8f9bb0;font-size:10px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.share-card-body .share-audio-badge{display:inline-block;margin-top:6px;font-size:9px}
.share-audio-pick{grid-column:1/-1;padding:2px 2px 6px}

/* ============================================================
   V58: layout mobile "vídeo em foco" (celular em pé, < 640px)
   O vídeo domina a tela. Salas viram uma faixa fina no topo, os
   controles flutuam numa barra embaixo, e o Helper (que é um .exe
   de Windows) some — não faz sentido no telefone.
   ============================================================ */
@media(max-width:640px){
  html,body{overflow:hidden;overscroll-behavior:none}
  .app-shell{
    display:flex;
    flex-direction:column;
    height:100dvh;
    height:var(--vh-real,100dvh);        /* --vh-real = visualViewport (altura REAL visível, ex: 697) */
    overflow:hidden;
  }

  /* ---- Faixa fina do topo: identidade + salas ---- */
  .channel-sidebar{
    flex:0 0 auto;
    display:flex;
    flex-direction:column;
    gap:0;
    border-right:none;
    border-bottom:1px solid #20252e;
    background:#0f1216;
    padding:0;
    min-height:0;
  }
  .channel-sidebar .server-title{
    padding:10px 14px 6px;
    font-size:15px;
    font-weight:700;
  }
  .channel-sidebar .status{display:none}
  .channel-sidebar .sidebar-heading{display:none}     /* rótulos "INÍCIO/SALAS" somem, ganham espaço */
  .helper-card{display:none !important}               /* Helper não existe no celular */

  /* salas: uma faixa horizontal só, deslizando, sem seções separadas */
  .sidebar-section{padding:0 10px 8px;display:contents}
  .lobby-section, .voice-rooms-section{display:contents}
  .room-list{
    display:flex;
    flex-direction:row;
    gap:6px;
    overflow-x:auto;
    padding:2px 10px 8px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .room-list::-webkit-scrollbar{display:none}
  .room-channel{flex:0 0 auto;display:block}
  .room-item{
    white-space:nowrap;
    padding:7px 14px;
    font-size:13px;
    border-radius:999px;               /* pílulas arredondadas */
    background:#1b2027;
    border:1px solid transparent;
  }
  .room-item.active-room{background:#2b3a63;border-color:#3b4f8a;color:#fff}
  /* ---- Quem está na sala ATUAL: chips numa linha própria embaixo das pills ---- */
  .room-list{flex-wrap:wrap}                          /* permite a sala ativa quebrar pra linha de baixo */
  .room-members{display:none}                          /* salas inativas: sem membros (só a pill conta) */
  .room-channel.active-room-wrap{
    flex:1 1 100%;                                     /* sala ativa ocupa a linha inteira */
    order:10;                                          /* sempre depois das pills das outras salas */
    display:flex; flex-wrap:wrap; align-items:center; gap:6px;
    padding:2px 10px 6px; margin:0; background:none;
  }
  .active-room-wrap>.room-item{flex:0 0 auto}
  .active-room-wrap .room-members{
    display:flex !important;                            /* SÓ a sala ativa mostra os membros */
    flex-direction:row; flex-wrap:wrap; gap:6px;
    padding:0; margin:0;
  }
  .active-room-wrap .room-member{
    display:inline-flex; align-items:center; gap:5px;
    grid-template-columns:none;                        /* desfaz o grid do desktop */
    background:#161b22; border:1px solid #262d38; border-radius:999px;
    padding:4px 10px 4px 5px; font-size:11px; color:#c3cbd6;
  }
  .active-room-wrap .room-member.sharing{background:#18231e;border-color:#2c5a3f}
  .active-room-wrap .room-member-avatar{width:20px;height:20px;font-size:8px}
  .active-room-wrap .room-member-name{font-size:11px;max-width:90px}

  /* ---- Área principal: vídeo domina ---- */
  /* Cadeia flex do .content até o vídeo, para a altura propagar toda: */
  .content{flex:1 1 auto;display:flex;min-height:0;height:auto;min-height:0}
  /* IMPORTANTE: zera o height:100vh do CSS base — no celular 100vh passa atrás da barra
     do Android e empurraria os controles pra fora da tela. Aqui a altura vem do flex (100dvh). */
  .room-panel{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;min-width:0;height:auto}
  .stage-area{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
  .room-header{display:none}           /* cabeçalho duplicado some; a sala já aparece na faixa */

  /* barra de ferramentas (qualidade/telas) compacta acima do vídeo */
  .watch-toolbar{
    flex-direction:row;
    align-items:center;
    gap:8px;
    padding:6px 10px;
    flex-wrap:wrap;                     /* deixa quebrar: telas+qualidade em cima, live embaixo */
  }
  .watch-toolbar .view-tools{width:auto;flex-wrap:nowrap;gap:6px}
  .watch-toolbar .quality-control{flex:0 0 auto}
  .watch-toolbar .quality-control label{font-size:0;min-width:0}
  .watch-toolbar .quality-control{min-width:0}
  .watch-toolbar .view-switch{flex:0 0 auto}
  .watch-toolbar .quality-control select{font-size:12px;padding:6px 8px}
  .watch-toolbar .stream-pickers{flex:1 0 100%;min-width:0;order:9}   /* linha propria, largura total */
  .watch-toolbar .stream-pickers label{width:100%;font-size:0}
  .watch-toolbar .stream-pickers select{width:100%;font-size:12px;padding:6px 8px}
  .view-btn{padding:6px 10px;font-size:12px}
  .fill-btn{padding:6px 10px;font-size:12px}

  /* o vídeo ocupa todo o espaço restante */
  .stage{flex:1 1 0 !important;min-height:0 !important;display:flex;align-items:stretch;justify-content:stretch;padding:0;overflow:hidden}
  .empty-stage{width:100%;height:100%;min-height:0 !important}   /* nao segura mais 260px: encolhe e centraliza */
  .empty-symbol{flex:0 0 auto}
  .watch-grid{min-height:0 !important}
  .watch-slot{min-height:0 !important}
  .watch-video{min-height:0 !important}
  .watch-grid{flex:1 1 auto;width:100%;height:100%}
  .watch-grid.mode-two{grid-template-columns:1fr}   /* nunca 2 lado a lado no celular */
  .watch-slot{min-height:0}
  .watch-video{min-height:0;height:100%}
  .watch-video video,.watch-video iframe{max-height:none;height:100%}

  /* ---- Controles flutuantes embaixo ---- */
  .controls-wrap{
    flex:0 0 auto;
    position:sticky;
    bottom:0;
    background:linear-gradient(180deg, rgba(15,18,22,0), #0f1216 40%);
    padding:8px 12px calc(8px + env(safe-area-inset-bottom));
    border-top:none;
  }
  .controls{display:flex;gap:10px}
  .controls button{
    flex:1;
    min-width:0;
    padding:13px 10px;
    font-size:14px;
    border-radius:12px;
  }
  #screenBtn{background:#354ba9;border-color:#485fc1;color:#fff}
  .controls-note{display:none}
}

/* Botao de tela cheia flutuante no preview (so celular, so quando ha live) */
.stage-fs-btn{display:none;position:absolute;top:12px;right:12px;z-index:20;width:42px;height:42px;
  border-radius:50%;background:rgba(16,20,26,.78);border:1px solid #3a4250;color:#e6ebf2;
  font-size:18px;line-height:1;align-items:center;justify-content:center;padding:0;
  backdrop-filter:blur(4px);box-shadow:0 4px 14px rgba(0,0,0,.35)}
.stage-fs-btn:active{background:rgba(40,48,60,.9)}
@media(max-width:640px){
  #watchGrid:not(.hidden) ~ .stage-fs-btn{display:flex}   /* aparece só com live tocando */
}

@media(max-width:640px){
  /* trava de largura: nada pode causar rolagem horizontal */
  .app-shell,.channel-sidebar,.content,.room-panel,.stage-area,.watch-toolbar,.controls-wrap{max-width:100vw}
  .watch-toolbar>*{max-width:100%}
}

/* ---- Aviso visível de piora de conexão (para os outros participantes) ---- */
/* O número colorido de 9px passava despercebido; aqui a linha inteira da
   pessoa muda, então quem está na sala percebe na hora quem está com problema. */
.room-member.aviso-media{background:#251f14}
.room-member.aviso-media .room-member-name{color:#e0be7a}
.room-member.aviso-ruim{background:#2a1719}
.room-member.aviso-ruim .room-member-name{color:#f0a0a0}
.room-member.aviso-ruim .room-member-ping::before{content:"▲ ";font-size:8px}
/* Transição (ficou pior agora): pulsa por alguns segundos e depois assenta. */
.room-member.piorou-agora{animation:avisoPiora 1s ease-in-out 0s 6}
@keyframes avisoPiora{
  0%,100%{box-shadow:inset 0 0 0 1px transparent}
  50%{box-shadow:inset 0 0 0 1px #d55d66}
}
/* Nos chips do celular o mesmo aviso, adaptado à pílula */
@media(max-width:640px){
  .active-room-wrap .room-member.aviso-media{background:#251f14;border-color:#4a3d21}
  .active-room-wrap .room-member.aviso-ruim{background:#2a1719;border-color:#5c2f33}
}

/* ---- Exigência do Helper no PC (bloqueia assistir e transmitir sem ele) ---- */
.exige-helper{display:none;position:fixed;inset:0;z-index:9000;background:rgba(9,11,15,.93);
  backdrop-filter:blur(3px);align-items:center;justify-content:center;padding:24px}
.exige-helper.ativa{display:flex}
.exige-caixa{width:min(520px,100%);background:#161a20;border:1px solid #2c333f;border-radius:14px;
  padding:30px 28px;text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.exige-icone{font-size:38px;line-height:1;margin-bottom:10px}
.exige-caixa h2{margin:0 0 10px;font-size:20px}
.exige-caixa p{margin:0 0 18px;color:#98a2b1;font-size:13px;line-height:1.55}
.exige-baixar{display:inline-block;background:#465fc4;border:1px solid #5970cf;color:#fff;
  padding:12px 22px;border-radius:9px;font-weight:700;text-decoration:none;font-size:14px}
.exige-baixar:hover{filter:brightness(1.08)}
/* Senha bem visível junto do download: sem ela o zip não abre, e antes as
   pessoas baixavam e travavam nessa etapa. */
.exige-senha{margin:14px auto 0;display:flex;align-items:center;justify-content:center;gap:9px;
  background:#1d2430;border:1px dashed #46536a;border-radius:9px;padding:11px 16px;cursor:pointer;
  color:#c9d1dc;font-size:13px;width:fit-content}
.exige-senha:hover{background:#222b39;border-color:#5a6a85}
.exige-senha b{color:#fff;font-size:15px;letter-spacing:.06em;
  background:#0f1319;padding:3px 10px;border-radius:6px;border:1px solid #333c4a}
.exige-senha-rotulo{color:#96a1b2}
.exige-senha-dica{color:#6f7b8c;font-size:10.5px}
.exige-senha.copiada{border-color:#3fa66a}
.exige-senha.copiada .exige-senha-dica{color:#5fc98a}
.exige-passos{margin-top:16px;color:#7f8a99;font-size:11.5px;line-height:1.6}
.exige-estado{margin-top:16px;padding-top:14px;border-top:1px solid #262d38;color:#6d7787;font-size:11px}
.exige-entrar-assim{margin:12px auto 0;display:block;background:none;border:none;
  color:#7f8b9d;font-size:11.5px;text-decoration:underline;cursor:pointer;padding:6px}
.exige-entrar-assim:hover{color:#aab4c4}
/* Enquanto bloqueado, o conteúdo atrás não recebe cliques nem rola */
body.helper-bloqueado{overflow:hidden}
body.helper-bloqueado .app-shell{pointer-events:none;filter:blur(1.5px)}

/* O iframe do player nasce branco enquanto carrega, e isso "piscava" na tela
   entre a entrada na sala e o primeiro quadro. Pintado de escuro, a espera
   passa a ser contínua com o resto da interface. */
iframe.native-player{background:#050609;border:0}
/* Nav do topo (Jogos), logo abaixo do título — separado do resto */
.side-nav{padding:10px 10px 12px;border-bottom:1px solid #232a34}
.jogos-link{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:10px;text-decoration:none;color:#e9eef6;font-weight:700;font-size:14px;background:linear-gradient(90deg,#2a3a5f,#1c2436);border:1px solid #33456a;cursor:pointer;transition:background .15s,border-color .15s}
.jogos-link:hover{background:linear-gradient(90deg,#334771,#222c40);border-color:#4a7fc4}
.jogos-ico{font-size:18px}
.jogos-txt{flex:1}
.jogos-seta{color:#7d93b8;font-size:18px;font-weight:400}
/* Seção única de SALAS (o Geral agora é o primeiro item dela) */
.channel-sidebar>.voice-rooms-section{padding-top:14px}
/* Cabeçalho SALAS destacado por texto forte + acento (sem fundo, pra não
   parecer botão selecionado) */
.voice-rooms-section .sidebar-heading{display:flex;align-items:center;gap:8px;color:#f2f6fb;font-size:14px;font-weight:800;letter-spacing:.05em;margin:0 0 8px;padding:0 10px 9px;background:none;border:0;border-bottom:1px solid #2a3340}
.voice-rooms-section .sidebar-heading::before{content:"🎧";font-size:15px}