* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', sans-serif; background: #313338; color: #dbdee1; height: 100vh; height: 100dvh; overflow: hidden; }
.hidden { display: none !important; }
.screen { height: 100vh; height: 100dvh; } /* dvh: teclado do celular não cobre o campo de mensagem */

.icon { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }

/* Login */
#login-screen { display: flex; align-items: center; justify-content: center; background: #1e1f22; }
.login-box { background: #313338; padding: 32px; border-radius: 8px; width: 320px; display: flex; flex-direction: column; gap: 12px; }
.login-box form { display: flex; flex-direction: column; gap: 12px; }
.login-box h1 { color: #fff; text-align: center; }
.login-box p { text-align: center; color: #b5bac1; font-size: 14px; }
.login-box input { padding: 10px; border-radius: 4px; border: none; background: #1e1f22; color: #dbdee1; }
.login-box button { padding: 10px; border-radius: 4px; border: none; background: #5865f2; color: #fff; font-weight: 600; cursor: pointer; }
.login-box button:hover { background: #4752c4; }
.login-box button.secondary { background: transparent; color: #b5bac1; border: 1px solid #4e5058; }
.login-box button.secondary:hover { background: #3f4147; }
.error { color: #f23f43; font-size: 13px; text-align: center; min-height: 16px; }

/* Layout principal */
#main-screen { display: flex; }

/* Coluna de servidores (rail) */
.server-rail { width: 72px; background: #1e1f22; padding-top: 12px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.rail-icon { position: relative; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; background: #313338; color: #fff; font-weight: 700; font-size: 17px; letter-spacing: .5px; user-select: none; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-radius .15s, background .15s; }
.rail-photo { width: 100%; height: 100%; object-fit: cover; }
.rail-icon:hover, .rail-icon.active { border-radius: 16px; background: #5865f2; }
.rail-icon svg { width: 48px; height: 48px; }
.rail-icon.active::before { content: ''; position: absolute; left: -12px; width: 4px; height: 40px; background: #fff; border-radius: 0 4px 4px 0; }

/* Avatares */
.avatar { border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; flex-shrink: 0; border: 2px solid transparent; box-sizing: content-box; user-select: none; background-size: cover; background-position: center; overflow: hidden;
  /* Fala: acende rápido, apaga devagar (como no Discord) */
  transition: border-color .7s ease-out, box-shadow .7s ease-out; }
.avatar.speaking { border-color: #3ad07a; box-shadow: 0 0 0 2px rgba(58, 208, 122, .3); transition: border-color .06s ease-in, box-shadow .06s ease-in; }

.sidebar { width: 240px; background: #2b2d31; display: flex; flex-direction: column; }
.server-header { padding: 14px 16px; font-weight: 700; color: #fff; border-bottom: 1px solid #1e1f22; }
.channels { flex: 1; padding: 12px 8px; overflow-y: auto; }
.channel-label { font-size: 11px; text-transform: uppercase; color: #949ba4; padding: 8px 8px 4px; font-weight: 600; }
.channel { padding: 6px 8px; border-radius: 4px; color: #949ba4; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.channel .icon { width: 16px; height: 16px; }
.channel:hover, .channel.active { background: #404249; color: #fff; }
.voice-users { list-style: none; padding-left: 24px; }
.voice-users li { padding: 3px 8px; font-size: 14px; color: #949ba4; display: flex; align-items: center; gap: 8px; }
.voice-users li { cursor: pointer; border-radius: 4px; }
.voice-users li:hover { background: #35373c; color: #dbdee1; }
.voice-users li .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voice-users li .mute-ind, .voice-users li .deaf-ind { display: none; color: #949ba4; }
.voice-users li.muted .mute-ind, .voice-users li.deafened .deaf-ind { display: inline-flex; }
.mute-ind .icon, .deaf-ind .icon { width: 14px; height: 14px; }
.live-badge { background: #f23f43; color: #fff; font-size: 9px; font-weight: 700; letter-spacing: .4px; padding: 2px 5px; border-radius: 4px; margin-left: 8px; cursor: pointer; flex-shrink: 0; }
.live-badge:hover { background: #d83134; }

.voice-controls { display: flex; gap: 4px; padding: 8px; background: #232428; }
.voice-controls button { flex: 1; padding: 8px 4px; border: none; border-radius: 4px; background: #2b2d31; color: #b5bac1; cursor: pointer; }
.voice-controls button:hover { background: #404249; color: #fff; }
.voice-controls button.active { background: #404249; color: #fff; }
/* Indicador de rede + servidor/canal (acima do perfil) */
.net-status { display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: #232428; border-top: 1px solid #1e1f22; }
.net-signal { display: inline-flex; color: #949ba4; cursor: help; flex-shrink: 0; }
.net-signal .icon { width: 18px; height: 18px; }
.net-signal.good { color: #23a559; }
.net-signal.ok { color: #f0b232; }
.net-signal.bad { color: #f23f43; }
.net-text { min-width: 0; line-height: 1.25; }
.net-line1 { color: #dbdee1; font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.net-line1.voice { color: #23a559; }
.net-line2 { color: #949ba4; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.user-footer { padding: 8px 12px; background: #232428; color: #fff; font-size: 14px; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.user-footer #self-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#settings-btn { background: none; border: none; color: #b5bac1; cursor: pointer; padding: 5px; border-radius: 4px; flex-shrink: 0; display: inline-flex; }
#settings-btn:hover { background: #35373c; color: #fff; }
#settings-btn .icon { width: 18px; height: 18px; }
.user-footer:hover { background: #3a3c42; }

.content { flex: 1; display: flex; flex-direction: column; background: #313338; }
.channel-title { padding: 14px 16px; font-weight: 700; color: #fff; border-bottom: 1px solid #26272b; }

/* Telas assistidas — uma live por tela, centralizada; rola para a próxima (scroll-snap) */
.screens { background: #1e1f22; overflow-y: auto; }

/* Live aberta: chat sai de cena, lives ocupam o canal inteiro */
.content.live-mode .messages, .content.live-mode .chat-form, .content.live-mode #typing-line { display: none; }
/* chat-open: clicou em #geral — mostra o chat de volta e esconde as lives (tag "voltar" reaparece) */
.content.live-mode.chat-open .messages { display: flex; }
.content.live-mode.chat-open .chat-form { display: flex; }
.content.live-mode.chat-open #typing-line { display: block; }
.content.live-mode.chat-open .screens { display: none; }
.content.live-mode .screens {
  flex: 1;
  display: block;                       /* pilha vertical: uma live por vez, não grid */
  padding: 0;
  scroll-snap-type: y mandatory;        /* cada scroll assenta numa live */
  scroll-behavior: smooth;              /* transição suave */
  scrollbar-width: thin;                /* Firefox: barra fina cinza */
  scrollbar-color: #4e5058 transparent;
}
/* Cada live ocupa a tela inteira, centralizada; a próxima só aparece ao rolar (espaço abaixo) */
.content.live-mode .screen-tile {
  height: 100%;
  width: 100%;
  scroll-snap-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 18px;
  box-sizing: border-box;
}
/* Mesmo tamanho independente da resolução: preenche o tile e escala (contain mantém proporção) */
.content.live-mode .screen-tile video { width: 100%; height: 100%; object-fit: contain; }
/* Barra de scroll cinza estilizada (WebKit), no tom da plataforma */
.content.live-mode .screens::-webkit-scrollbar { width: 12px; }
.content.live-mode .screens::-webkit-scrollbar-track { background: transparent; }
.content.live-mode .screens::-webkit-scrollbar-thumb { background: #4e5058; border-radius: 6px; border: 3px solid #1e1f22; }
.content.live-mode .screens::-webkit-scrollbar-thumb:hover { background: #6d7178; }

.screen-tile { position: relative; max-width: 100%; }
.screen-tile video { width: 100%; max-height: 64vh; object-fit: contain; border-radius: 6px; background: #000; display: block; }
.screen-tile .label { position: absolute; bottom: 6px; left: 6px; background: rgba(0,0,0,.7); color: #fff; font-size: 12px; padding: 2px 8px; border-radius: 4px; }
.screen-tile .controls { position: absolute; top: 6px; right: 6px; display: flex; gap: 4px; opacity: 0; transition: opacity .15s; }
.screen-tile:hover .controls { opacity: 1; }
.screen-tile .controls button { border: none; border-radius: 4px; background: rgba(0,0,0,.7); color: #dbdee1; cursor: pointer; padding: 4px 6px; }
.screen-tile .controls button:hover { background: rgba(0,0,0,.9); color: #fff; }
.screen-tile .controls .icon { width: 15px; height: 15px; }
/* Volume da live: slider fino ao lado dos botões, no mesmo tom translúcido */
.screen-tile .controls .tile-vol { width: 70px; accent-color: #f23f43; background: rgba(0,0,0,.7); border-radius: 4px; padding: 0 6px; cursor: pointer; align-self: stretch; }
.screen-tile .controls .tile-vol:disabled { opacity: .4; }

/* Tag "voltar para a transmissão" no título do chat (mesmo visual do AO VIVO) */
.channel-title { display: flex; align-items: center; }
#back-to-live { display: none; background: #f23f43; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .4px; padding: 3px 8px; border-radius: 4px; margin-left: 12px; cursor: pointer; }
#back-to-live:hover { background: #d83134; }
.content.live-mode.chat-open #back-to-live { display: inline-block; }

.messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.message { display: flex; gap: 12px; position: relative; }
.message.mention { background: rgba(240, 178, 50, .08); border-left: 2px solid #f0b232; border-radius: 2px; }
.message .edited { color: #949ba4; font-size: 10px; }
.message .deleted { color: #949ba4; }
.message .chat-img { max-width: min(420px, 100%); max-height: 280px; border-radius: 6px; display: block; margin-top: 4px; cursor: pointer; background: #000; }
.msg-actions { position: absolute; top: -6px; right: 8px; display: none; gap: 4px; background: #2b2d31; border-radius: 6px; padding: 2px; }
.message:hover .msg-actions { display: flex; }
.msg-actions button { border: none; background: none; color: #b5bac1; border-radius: 4px; cursor: pointer; padding: 3px 6px; }
.msg-actions button:hover { color: #fff; background: #404249; }
.msg-actions .icon { width: 14px; height: 14px; }
.message .text[contenteditable="plaintext-only"], .message .text[contenteditable="true"] { outline: 1px solid #5865f2; border-radius: 4px; padding: 2px 4px; background: #383a40; }
.message .body { min-width: 0; }
.message .meta { font-size: 13px; }
.message .meta .author { color: #fff; font-weight: 600; margin-right: 8px; }
.message .meta .time { color: #949ba4; font-size: 11px; }
.message .text { font-size: 15px; word-wrap: break-word; }
.message.system { color: #949ba4; font-size: 13px; font-style: italic; }
.message.compact { padding-left: 48px; margin-top: -6px; } /* alinha com o texto da mensagem de cima */
.message .text a { color: #00a8fc; }
.message .text a:hover { text-decoration: underline; }

#typing-line { min-height: 18px; padding: 0 16px 2px; font-size: 12px; color: #949ba4; font-style: italic; }

.chat-form { display: flex; padding: 0 16px 20px; gap: 8px; }
.chat-form input { flex: 1; padding: 11px 14px; border-radius: 8px; border: none; background: #383a40; color: #dbdee1; font-size: 15px; }
.chat-form button { padding: 0 18px; border: none; border-radius: 8px; background: #5865f2; color: #fff; font-weight: 600; cursor: pointer; }

.members { width: 200px; background: #2b2d31; padding: 12px 8px; overflow-y: auto; }
.members ul { list-style: none; }
.members li { padding: 5px 8px; color: #949ba4; font-size: 14px; border-radius: 4px; display: flex; align-items: center; gap: 8px; }
.members li.offline { opacity: .45; }

/* Prévia de transmissão */
/* Tooltip de quem está em chamada no servidor (hover no ícone) */
#server-tip { position: fixed; z-index: 40; min-width: 190px; max-width: 260px; background: #2b2d31; border: 1px solid #1e1f22; border-radius: 8px; padding: 10px 12px; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
#server-tip .tip-server { color: #fff; font-weight: 700; font-size: 14px; margin-bottom: 8px; }
#server-tip .tip-empty { color: #949ba4; font-size: 13px; }
#server-tip .tip-room { color: #949ba4; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; font-weight: 600; display: flex; align-items: center; gap: 5px; margin: 8px 0 4px; }
#server-tip .tip-room .icon { width: 13px; height: 13px; }
#server-tip .tip-user { display: flex; align-items: center; gap: 8px; padding: 3px 0; color: #dbdee1; font-size: 13px; }
#server-tip .tip-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#server-tip .tip-ind { color: #949ba4; display: inline-flex; }
#server-tip .tip-ind .icon { width: 14px; height: 14px; }

/* Botão "instalar aplicativo" no fim da lista de membros (só aparece na versão web) */
#install-side { margin: 14px 4px 4px; padding: 9px 12px; width: calc(100% - 8px); border: none; border-radius: 6px; background: #383a40; color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; animation: install-pop .35s ease, install-pulse 2.4s ease 1.2s infinite; }
#install-side:hover { background: #43454b; animation-play-state: paused, paused; }
@keyframes install-pop { from { opacity: 0; transform: translateY(10px); } }
@keyframes install-pulse { 50% { transform: scale(1.05); } }

/* Modal de instalação (primeiro login) */
#install-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.7); display: flex; align-items: center; justify-content: center; z-index: 40; padding: 20px; }
#install-card { background: #2b2d31; border-radius: 10px; width: 380px; max-width: 100%; padding: 28px 24px; text-align: center; display: flex; flex-direction: column; gap: 12px; }
.install-logo { display: flex; justify-content: center; }
.install-logo svg { width: 64px; height: 64px; }
#install-title { color: #fff; font-size: 18px; font-weight: 700; }
#install-text { color: #b5bac1; font-size: 14px; line-height: 1.4; }
#install-card .btn-primary { justify-content: center; padding: 11px; }
#install-no { background: transparent; border: none; color: #b5bac1; cursor: pointer; padding: 6px; font-size: 14px; }
#install-no:hover { color: #fff; }

/* Prévia da transmissão: popup em hover no badge AO VIVO (não modal) */
#live-preview { position: fixed; z-index: 30; width: 300px; background: #111214; border: 1px solid #2b2d31; border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
#live-preview img { width: 100%; border-radius: 6px; background: #000; min-height: 150px; object-fit: contain; }
#preview-empty { display: flex; align-items: center; justify-content: center; height: 150px; background: #1e1f22; border-radius: 6px; color: #949ba4; font-size: 13px; }
#preview-title { color: #fff; font-weight: 600; font-size: 13px; }
#preview-watch { padding: 8px; border: none; border-radius: 4px; background: #23a559; color: #fff; font-weight: 600; cursor: pointer; font-size: 13px; }
#preview-watch:hover { background: #1e9150; }
#preview-watch.watching { background: #f23f43; }
#preview-watch.watching:hover { background: #d83134; }
#preview-watch:disabled { background: #4e5058; cursor: not-allowed; }

/* Ícones (sprite oculto — classe em vez de style inline por causa da CSP) */
.svg-defs { display: none; }

/* Editar perfil + perfil de membro (mesma estilização de modal) */
#profile-overlay, #user-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.7); display: flex; align-items: center; justify-content: center; z-index: 10; padding: 20px; }
#profile-card, #user-card { background: #2b2d31; border-radius: 10px; width: 420px; max-width: 100%; max-height: 90vh; overflow-y: auto; position: relative; display: flex; flex-direction: column; }
#user-card-name { color: #fff; font-size: 20px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#user-close { position: absolute; top: 12px; right: 12px; background: none; border: none; color: #b5bac1; cursor: pointer; z-index: 1; }
#user-close:hover { color: #fff; }
#user-close .icon { width: 18px; height: 18px; }
.vol-range { width: 100%; accent-color: #5865f2; cursor: pointer; }

/* Sensibilidade do microfone (VAD): medidor + limiar */
.vad-row { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.vad-meter { position: relative; height: 8px; background: #1e1f22; border-radius: 4px; overflow: hidden; }
.vad-fill { height: 100%; width: 0; background: #949ba4; border-radius: 4px; transition: width .08s linear; }
.vad-fill.over { background: #23a559; } /* verde quando passa do limiar (mic abre) */
.vad-marker { position: absolute; top: -3px; bottom: -3px; width: 2px; background: #fff; left: 20%; }

.profile-header { display: flex; align-items: center; gap: 16px; padding: 24px; background: #232428; border-radius: 10px 10px 0 0; }
#profile-avatar-holder { position: relative; cursor: pointer; border-radius: 50%; flex-shrink: 0; }
/* flex (não block): centraliza a inicial/foto no círculo do perfil */
#profile-avatar-holder .avatar { cursor: pointer; display: flex; }
.avatar-overlay { position: absolute; inset: 0; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .15s; pointer-events: none; }
#profile-avatar-holder:hover .avatar-overlay { opacity: 1; }
.profile-id { min-width: 0; }
#profile-display-name { color: #fff; font-size: 20px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-sub { color: #949ba4; font-size: 13px; margin-top: 2px; }

.profile-section { padding: 16px 24px; border-top: 1px solid #1e1f22; }
.section-label { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: #949ba4; font-weight: 700; margin-bottom: 10px; }
.section-hint { display: block; color: #949ba4; font-size: 12px; margin-top: 6px; font-weight: 400; text-transform: none; letter-spacing: 0; }
.profile-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-primary, .btn-danger { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 4px; font-weight: 600; cursor: pointer; font-size: 14px; }
.btn-primary { border: none; background: #5865f2; color: #fff; }
.btn-primary:hover { background: #4752c4; }
.btn-danger { border: 1px solid #f23f43; background: transparent; color: #f23f43; }
.btn-danger:hover { background: #f23f43; color: #fff; }
.btn-primary .icon, .btn-danger .icon { width: 16px; height: 16px; }

.rename-row { display: flex; gap: 8px; }
.rename-row input { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 4px; border: 1px solid #1e1f22; background: #1e1f22; color: #dbdee1; font-size: 14px; }
.rename-row input:focus { outline: none; border-color: #5865f2; }

.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: #dbdee1; font-size: 14px; cursor: pointer; }
/* Respiro entre os controles da seção Áudio (evita o texto colado) */
.profile-section .toggle-row, .profile-section .vad-row { margin-top: 16px; }
.profile-section .section-label + .toggle-row { margin-top: 0; }
.profile-section .toggle-row .section-hint { margin-top: 4px; line-height: 1.35; }
.toggle-row input { appearance: none; width: 40px; height: 22px; border-radius: 11px; background: #4e5058; position: relative; cursor: pointer; flex-shrink: 0; transition: background .15s; }
.toggle-row input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
.toggle-row input:checked { background: #23a559; }
.toggle-row input:checked::after { transform: translateX(18px); }

#profile-error, #profile-ok { padding: 0 24px 16px; min-height: 0; }
#profile-ok { color: #23a559; font-size: 13px; text-align: center; }
#profile-close { position: absolute; top: 12px; right: 12px; background: none; border: none; color: #b5bac1; cursor: pointer; z-index: 1; }
#profile-close:hover { color: #fff; }
#profile-close .icon { width: 18px; height: 18px; }

/* Aviso de conexao */
#conn-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: #f0b232; color: #1e1f22; text-align: center; padding: 6px; font-size: 13px; font-weight: 600; }

/* Mobile: lista de membros some, sidebar vira gaveta aberta pelo hambúrguer */
#menu-btn { display: none; background: none; border: none; color: #dbdee1; cursor: pointer; padding: 2px; margin-right: 10px; vertical-align: middle; }
@media (max-width: 800px) {
  .server-rail, .members { display: none; }
  #menu-btn { display: inline-block; }
  .sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 20; transform: translateX(-100%); transition: transform .2s; box-shadow: 2px 0 12px rgba(0,0,0,.4); }
  .sidebar.open { transform: translateX(0); }
}