/* Base do VisTalk — tokens, reset e componentes usados nas três páginas.
   Identidade própria (roxo-elétrico + grafite frio), não a paleta do Discord. */

/* Nunito Sans (variável, 200–1000) — arquivos locais: o app desktop não
   carrega fonte da internet (CSP) e a web não depende do Google. */
@font-face {
  font-family: 'Nunito Sans Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 1000;
  src: url('../fonts/nunito-sans-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito Sans Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 1000;
  src: url('../fonts/nunito-sans-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* superfícies, do fundo para a frente */
  --fundo:        #0b0c12;
  --fundo-2:      #12141d;
  --superficie:   #191c27;
  --superficie-2: #212532;
  --superficie-3: #2b3040;
  --borda:        #2e3344;
  --borda-forte:  #3d4459;

  /* texto */
  --texto:        #eef0f6;
  --texto-2:      #a8aec2;
  --texto-3:      #6f758c;

  /* marca */
  --roxo:         #7c5cff;
  --roxo-forte:   #6845f0;
  --roxo-suave:   rgba(124, 92, 255, 0.14);
  --ciano:        #22d3ee;
  --verde:        #3fcf8e;
  --amarelo:      #f5b544;
  --vermelho:     #f2545b;

  --raio:     10px;
  --raio-g:   16px;
  --sombra:   0 8px 30px rgba(0, 0, 0, 0.45);
  --sombra-g: 0 24px 70px rgba(0, 0, 0, 0.55);

  /* A do Discord é a gg sans — proprietária, não pode ir junto com o app. Se
     ela estiver instalada no PC, é usada; senão, a Nunito Sans (livre, OFL,
     embutida em /fonts), que tem o mesmo desenho arredondado e amigável. */
  --fonte: 'gg sans', 'Nunito Sans Variable', 'Noto Sans', 'Segoe UI', system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --mono: 'Cascadia Code', 'SF Mono', Consolas, 'Liberation Mono', monospace;

  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--roxo); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; letter-spacing: -0.02em; }
h1 { font-size: clamp(2.2rem, 6vw, 4rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); font-weight: 750; }
h3 { font-size: 1.15rem; font-weight: 650; }
p  { margin: 0 0 1em; }

::selection { background: var(--roxo); color: #fff; }

/* ---------------------------------------------------------------- marca */
.marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  color: var(--texto);
  text-decoration: none;
}
.marca:hover { text-decoration: none; }
/* O logo é uma imagem; o `object-fit` evita distorção se um dia ele deixar
   de ser quadrado. */
.marca-icone {
  width: 32px; height: 32px;
  border-radius: 9px;
  object-fit: cover;
  display: block;
  box-shadow: 0 4px 14px rgba(124, 92, 255, .38);
  flex: none;
}

/* --------------------------------------------------------------- botões */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: transform .12s ease, background .16s ease, border-color .16s ease, opacity .16s;
  white-space: nowrap;
  text-decoration: none;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.btn-primario { background: var(--roxo); color: #fff; }
.btn-primario:hover { background: var(--roxo-forte); }

.btn-claro { background: #fff; color: #14161f; }
.btn-claro:hover { background: #e6e8f0; }

.btn-fantasma { background: transparent; color: var(--texto); border-color: var(--borda-forte); }
.btn-fantasma:hover { background: var(--superficie-2); border-color: var(--roxo); }

.btn-perigo { background: transparent; color: var(--vermelho); border-color: rgba(242,84,91,.4); }
.btn-perigo:hover { background: rgba(242, 84, 91, .12); }

.btn-bloco { width: 100%; }
.btn-g { padding: 14px 30px; font-size: 1.02rem; }

/* --------------------------------------------------------------- campos */
.campo { display: block; margin-bottom: 16px; }
.campo > span {
  display: block;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texto-2);
  margin-bottom: 7px;
}
.campo input,
.campo textarea,
.campo select {
  width: 100%;
  padding: 11px 13px;
  background: var(--fundo-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  color: var(--texto);
  font: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.campo input:focus,
.campo textarea:focus,
.campo select:focus {
  outline: none;
  border-color: var(--roxo);
  box-shadow: 0 0 0 3px var(--roxo-suave);
}
.campo input::placeholder { color: var(--texto-3); }
.campo .dica { font-size: .8rem; color: var(--texto-3); margin-top: 6px; text-transform: none; letter-spacing: 0; font-weight: 400; }
/* "Esqueci minha senha", logo abaixo do campo de senha (site e app). */
.link-esqueci { display: block; width: fit-content; margin: -8px 0 18px auto; font-size: .85rem; font-weight: 600; }

/* -------------------------------------------------------------- avisos */
.aviso {
  padding: 11px 14px;
  border-radius: var(--raio);
  font-size: .9rem;
  margin-bottom: 14px;
  border: 1px solid transparent;
}
.aviso-erro { background: rgba(242, 84, 91, .12); border-color: rgba(242, 84, 91, .35); color: #ffb4b8; }
.aviso-ok   { background: rgba(63, 207, 142, .12); border-color: rgba(63, 207, 142, .35); color: #9ff0c8; }
.oculto { display: none !important; }

/* O atributo `hidden` do HTML vale menos que qualquer regra de classe com
   `display`. Sem esta linha, um `.campo[hidden]` continua aparecendo — foi o
   que deixou o campo de nome visível na tela de ENTRAR, onde ele não existe. */
[hidden] { display: none !important; }

/* ------------------------------------------------------------- avatares */
.avatar {
  position: relative;
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 700;
  font-size: .85rem;
  color: #fff;
  flex: none;
  user-select: none;
}
.avatar-p { width: 26px; height: 26px; font-size: .7rem; }
.avatar-g { width: 56px; height: 56px; font-size: 1.2rem; }
/* Foto de perfil: cobre o círculo e aparece DIRETO — sem letra antes e sem
   animação de entrada (que dava cara de "carregando" a cada tela).
   O `border-radius` recorta a própria imagem — nada de `overflow:hidden` no
   `.avatar`, que cortaria o pontinho de status pendurado na borda. */
.avatar-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}
/* Quem tem foto nunca mostra a letra; enquanto a foto não chega (só na
   primeiríssima vez — depois vem do cache), fica um círculo neutro. */
.avatar.com-foto { background: var(--superficie-2); }

/* ------------------------------------------------------ ícones em botões */
.icone-btn svg { width: 19px; height: 19px; display: block; }
.icone-btn { transition: background .14s ease, color .14s ease, transform .1s ease; }
.icone-btn:active { transform: scale(.9); }

/* --------------------------------------------------------- controle range */
input[type='range'] {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 999px;
  background: var(--superficie-3);
  cursor: pointer;
  outline: none;
}
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--roxo);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
  transition: transform .1s ease, background .14s ease;
}
input[type='range']::-webkit-slider-thumb:hover { transform: scale(1.15); }
input[type='range']::-moz-range-thumb {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--roxo);
  border: 2px solid #fff;
}
input[type='range']:focus-visible { box-shadow: 0 0 0 3px var(--roxo-suave); }

/* Curvas de entrada reaproveitadas pelas telas. */
@keyframes vt-pop { from { opacity: 0; transform: scale(.94); } }

/* ---------------------------------------- chat: rolagem como no Discord */
/* O pé do chat acompanha a tela mesmo com a pessoa lá em cima (sticky), sem
   ocupar espaço embaixo da última mensagem (altura zero). Web e desktop. */
.chat-pe { position: sticky; bottom: 0; height: 0; z-index: 3; }
.chat-descer {
  position: absolute;
  bottom: 12px;
  left: 0;
  right: 0;
  width: max-content;
  margin: 0 auto;
  padding: 7px 16px;
  border: 1px solid var(--borda-forte);
  border-radius: 999px;
  background: var(--superficie-3);
  color: var(--texto);
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--sombra);
  animation: vt-pop .15s ease;
  transition: background .12s ease, border-color .12s ease;
}
.chat-descer:hover,
.chat-descer.com-novas { background: var(--roxo); border-color: var(--roxo); color: #fff; }
.chat-descer[hidden] { display: none; }

/* Faixa "Novas mensagens": onde a pessoa parou de ler. */
.chat-novas {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 6px;
  color: var(--vermelho);
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.chat-novas::before { content: ''; flex: 1; height: 1px; background: var(--vermelho); }
@keyframes vt-slide-up { from { opacity: 0; transform: translateY(8px); } }
@keyframes vt-slide-down { from { opacity: 0; transform: translateY(-8px); } }

/* -------------------------------------------------------------- rolagem */
* { scrollbar-width: thin; scrollbar-color: var(--superficie-3) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--superficie-3); border-radius: 99px; }
*::-webkit-scrollbar-thumb:hover { background: var(--borda-forte); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ===================================================== anexos e emojis
   Compartilhado entre a web e o app desktop. */

.anexo { margin-top: 6px; max-width: 460px; }

.anexo-imagem {
  max-width: 100%;
  max-height: 340px;
  border-radius: var(--raio);
  display: block;
  cursor: zoom-in;
  background: var(--fundo);
}
.anexo-video {
  max-width: 100%;
  max-height: 340px;
  border-radius: var(--raio);
  display: block;
  background: #000;
}
.anexo-audio { width: 100%; max-width: 380px; display: block; }

.anexo-arquivo {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 14px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  color: var(--texto);
  text-decoration: none;
}
.anexo-arquivo:hover { border-color: var(--roxo); text-decoration: none; }
.anexo-icone { font-size: 1.3rem; }
.anexo-arquivo b { display: block; font-size: .88rem; }
.anexo-arquivo small { color: var(--texto-3); font-size: .78rem; }
.anexo-validade { display: block; margin-top: 4px; font-size: .74rem; color: var(--texto-3); }
.anexo-expirado { opacity: .7; }
.anexo-expirado:hover { border-color: var(--borda); }

/* Links no chat: azuis e clicáveis, como no Discord. */
.msg-link { color: #00a8fc; text-decoration: none; overflow-wrap: anywhere; }
.msg-link:hover { text-decoration: underline; }

/* Visor em tela cheia */
.visor {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(4, 5, 9, .92);
  display: grid;
  place-items: center;
  padding: 40px;
  cursor: zoom-out;
}
.visor-midia {
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--raio);
  cursor: default;
  display: block;
}
.visor-baixar { position: fixed; top: 20px; right: 20px; cursor: pointer; }

/* Arquivo aguardando envio */
.anexo-pendente { padding: 0 0 10px; }
.pendente-cartao {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}
.pendente-cartao img {
  width: 46px; height: 46px;
  object-fit: cover;
  border-radius: 7px;
  flex: none;
}
.pendente-icone { font-size: 1.6rem; width: 46px; text-align: center; flex: none; }
.pendente-info { flex: 1; min-width: 0; }
.pendente-info b {
  display: block; font-size: .88rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pendente-info small { color: var(--texto-3); font-size: .78rem; }

/* Realce ao arrastar um arquivo por cima */
.arrastando { outline: 2px dashed var(--roxo); outline-offset: -4px; }

/* ------------------------------------------------------------- emojis */
.emoji-painel {
  position: absolute;
  bottom: 100%;
  right: 18px;
  margin-bottom: 10px;
  width: 320px;
  max-height: 320px;
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  box-shadow: var(--sombra-g);
  z-index: 90;
  overflow: hidden;
}
.emoji-busca {
  margin: 10px;
  padding: 8px 11px;
  background: var(--fundo-2);
  border: 1px solid var(--borda);
  border-radius: 7px;
  color: var(--texto);
  font: inherit;
  font-size: .88rem;
}
.emoji-busca:focus { outline: none; border-color: var(--roxo); }
.emoji-corpo { overflow-y: auto; padding: 0 10px 10px; }
.emoji-grupo {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texto-3);
  padding: 10px 2px 6px;
}
.emoji-grade { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.emoji-item {
  border: 0;
  background: transparent;
  font-size: 1.25rem;
  line-height: 1;
  padding: 6px 0;
  border-radius: 7px;
  cursor: pointer;
  transition: background .1s;
}
.emoji-item:hover { background: var(--superficie-3); }
.emoji-vazio { color: var(--texto-3); font-size: .86rem; text-align: center; padding: 20px 0; }

/* ======================================================= voz e áudio
   Painel de ajustes do microfone (shared/client/mic.js), igual na web e no
   desktop. */
.modal.modal-largo { width: min(640px, 100%); }

.mic-painel { display: grid; gap: 18px; }
.mic-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
@media (max-width: 560px) { .mic-grade { grid-template-columns: 1fr; } }

.mic-campo { display: block; min-width: 0; }
.mic-campo > span,
.mic-secao h4 {
  display: block;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texto-2);
  margin: 0 0 7px;
}
.mic-campo select {
  width: 100%;
  padding: 9px 11px;
  background: var(--fundo-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  color: var(--texto);
  font: inherit;
  font-size: .88rem;
}
.mic-campo select:focus { outline: none; border-color: var(--roxo); }
.mic-faixa { display: flex; align-items: center; gap: 10px; height: 38px; }
.mic-faixa input { flex: 1; }
.mic-faixa output { font-family: var(--mono); font-size: .78rem; color: var(--texto-3); width: 40px; text-align: right; }

.mic-secao { border-top: 1px solid var(--borda); padding-top: 16px; }
.mic-desc { color: var(--texto-3); font-size: .84rem; line-height: 1.5; margin: 0 0 12px; }
.mic-secao > .mic-desc:last-child { margin: 10px 0 0; }
.mic-teste { display: flex; align-items: center; gap: 14px; }
.mic-teste .btn { padding: 9px 18px; flex: none; }

/* Medidor: a barra é o nível que chega do microfone; o marcador branco é o
   limiar. Amarelo = abaixo (nada é enviado), verde = sua voz está passando. */
.mic-medidor {
  position: relative;
  height: 26px;
  border-radius: 7px;
  background: var(--fundo-2);
  border: 1px solid var(--borda);
  overflow: hidden;
}
.mic-medidor-simples { flex: 1; height: 12px; border-radius: 999px; }
.mic-medidor-nivel {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: var(--amarelo);
  opacity: .85;
  transition: width .06s linear, background-color .12s ease;
}
.mic-medidor.aberto .mic-medidor-nivel { background: var(--verde); }
.mic-medidor input.mic-medidor-limiar {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  background: transparent;
  border-radius: 0;
}
.mic-medidor input.mic-medidor-limiar::-webkit-slider-runnable-track { background: transparent; }
.mic-medidor input.mic-medidor-limiar::-webkit-slider-thumb {
  width: 8px; height: 26px;
  border-radius: 3px;
  background: #fff;
  border: 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .35);
}
.mic-medidor input.mic-medidor-limiar::-moz-range-track { background: transparent; }
.mic-medidor input.mic-medidor-limiar::-moz-range-thumb {
  width: 8px; height: 24px;
  border-radius: 3px;
  background: #fff;
  border: 0;
}
/* No automático não há marcador (como no Discord): com a IA ligada quem decide
   é a detecção de voz, não um nível em dB — um marcador ali mentiria. */
.mic-medidor.auto input.mic-medidor-limiar { visibility: hidden; }

/* Chave liga/desliga */
.mic-chave {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 0;
  font-size: .9rem;
  color: var(--texto);
  cursor: pointer;
}
.mic-chave input {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  width: 38px; height: 22px;
  margin: 0;
  border-radius: 999px;
  background: var(--superficie-3);
  cursor: pointer;
  flex: none;
  transition: background .15s ease;
}
.mic-chave input::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform .15s ease;
}
.mic-chave input:checked { background: var(--verde); }
.mic-chave input:checked::after { transform: translateX(16px); }
.mic-chave input:focus-visible { outline: 2px solid var(--roxo); outline-offset: 2px; }

/* Modos de supressão de ruído */
.mic-opcoes { display: grid; gap: 8px; margin-bottom: 10px; }
.mic-opcao {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 12px;
  background: var(--fundo-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease;
}
.mic-opcao:hover { border-color: var(--borda-forte); }
.mic-opcao:has(input:checked) { border-color: var(--roxo); background: var(--roxo-suave); }
.mic-opcao input { accent-color: var(--roxo); margin: 4px 0 0; flex: none; }
.mic-opcao b { display: block; font-size: .9rem; }
.mic-opcao small { display: block; color: var(--texto-3); font-size: .8rem; line-height: 1.45; }
.mic-status { font-size: .82rem; color: var(--verde); margin: 0 0 6px; }
.mic-status.ruim { color: var(--amarelo); }

/* ================================================ amigos e mensagens diretas
   (shared/client/amigos-ui.js) — o "Início" do Discord, na web e no desktop. */
.amigos-painel { display: flex; flex-direction: column; min-height: 0; height: 100%; background: var(--fundo-2); }
.amigos-topo {
  display: flex; align-items: center; gap: 14px;
  height: 50px; padding: 0 16px;
  border-bottom: 1px solid var(--borda);
  flex: none; overflow-x: auto;
}
.amigos-titulo {
  display: flex; align-items: center; gap: 8px;
  padding-right: 14px; border-right: 1px solid var(--borda);
  flex: none;
}
.amigos-titulo svg { width: 20px; height: 20px; color: var(--texto-3); }
.amigos-abas { display: flex; align-items: center; gap: 6px; }
.amigos-aba {
  border: 0; background: transparent;
  color: var(--texto-2);
  font: inherit; font-size: .9rem; font-weight: 600;
  padding: 3px 10px; border-radius: 6px;
  cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center;
}
.amigos-aba:hover { background: var(--superficie-2); color: var(--texto); }
.amigos-aba.ativa { background: var(--superficie-3); color: var(--texto); }
.amigos-aba.amigos-adicionar { background: var(--verde); color: #06291a; margin-left: 4px; }
.amigos-aba.amigos-adicionar.ativa { background: transparent; color: var(--verde); }
.amigos-badge {
  display: inline-grid; place-items: center;
  min-width: 16px; height: 16px; padding: 0 4px; margin-left: 6px;
  border-radius: 999px;
  background: var(--vermelho); color: #fff;
  font-size: .66rem; font-weight: 800; line-height: 1;
}
.amigos-corpo { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 24px 24px; }
.amigos-busca {
  width: 100%;
  padding: 8px 12px;
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: 7px;
  color: var(--texto);
  font: inherit; font-size: .9rem;
}
.amigos-busca:focus { outline: none; border-color: var(--roxo); }
.amigos-contagem {
  font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--texto-3);
  padding: 20px 2px 8px;
}
.amigo-linha {
  display: flex; align-items: center; gap: 12px;
  padding: 10px; margin: 0 -10px;
  border-top: 1px solid var(--borda);
  border-radius: 8px;
  transition: background .12s ease;
}
.amigo-linha.clicavel { cursor: pointer; }
.amigo-linha:hover { background: var(--superficie-2); border-top-color: transparent; }
.amigo-linha:hover + .amigo-linha { border-top-color: transparent; }
.amigo-avatar { width: 34px; height: 34px; }
.amigo-txt { flex: 1; min-width: 0; }
.amigo-nome { display: flex; align-items: baseline; gap: 1px; min-width: 0; }
.amigo-nome b { font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.amigo-tag { font-size: .84rem; color: var(--texto-3); opacity: 0; transition: opacity .12s ease; }
.amigo-linha:hover .amigo-tag { opacity: 1; }
.amigo-txt small { color: var(--texto-3); font-size: .8rem; }
.amigo-acoes { display: flex; gap: 8px; flex: none; }
.amigo-acao {
  width: 36px; height: 36px;
  border: 0; border-radius: 50%;
  background: var(--superficie);
  color: var(--texto-2);
  display: grid; place-items: center;
  cursor: pointer;
  transition: color .12s ease, background .12s ease;
}
.amigo-acao svg { width: 18px; height: 18px; display: block; }
.amigo-linha:hover .amigo-acao { background: var(--fundo); }
.amigo-acao:hover { color: var(--texto); }
.amigo-acao.ok:hover { color: var(--verde); }
.amigo-acao.nao:hover { color: var(--vermelho); }
.amigo-desbloquear { padding: 7px 14px; font-size: .84rem; }

/* bolinha de online sobre o avatar */
.amigo-avatar .status, .dm-avatar .status {
  position: absolute; right: -2px; bottom: -2px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--texto-3);
  border: 3px solid var(--fundo-2);
}
.dm-avatar .status { width: 11px; height: 11px; border-width: 2.5px; }
/* A cor vem de `.status.st-*` (seção "presença" mais abaixo). Nada de pintar
   de verde por aqui: uma regra mais específica atropelava o vermelho do
   "Ocupado" e o amarelo do "Ausente" — só o risco e a lua apareciam. */

.amigo-menu {
  position: fixed; z-index: 130;
  min-width: 180px;
  padding: 6px;
  background: var(--fundo);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  box-shadow: var(--sombra-g);
  animation: vt-pop .12s ease;
}
.amigo-menu button {
  display: block; width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: 0; border-radius: 5px;
  background: transparent; color: var(--texto-2);
  font: inherit; font-size: .88rem;
  cursor: pointer;
}
.amigo-menu button:hover { background: var(--roxo); color: #fff; }
.amigo-menu button.perigo { color: var(--vermelho); }
.amigo-menu button.perigo:hover { background: var(--vermelho); color: #fff; }

.amigos-vazio { text-align: center; color: var(--texto-3); padding: 60px 20px; }
.amigos-vazio-icone { font-size: 3rem; margin-bottom: 12px; }
.amigos-vazio p { max-width: 380px; margin: 0 auto 16px; }

.amigos-adicionar-caixa { max-width: 720px; }
.amigos-adicionar-caixa h3 { font-size: 1rem; text-transform: uppercase; letter-spacing: .04em; margin: 4px 0 8px; }
.amigos-desc { color: var(--texto-2); font-size: .9rem; margin-bottom: 16px; }
.amigos-form {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 8px 8px 14px;
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.amigos-form:focus-within { border-color: var(--roxo); box-shadow: 0 0 0 3px var(--roxo-suave); }
.amigos-form.ok { border-color: var(--verde); box-shadow: none; }
.amigos-form.erro { border-color: var(--vermelho); box-shadow: none; }
.amigos-form input {
  flex: 1; min-width: 0;
  border: 0; background: transparent;
  color: var(--texto); font: inherit; font-size: 1rem;
  outline: none;
}
.amigos-form .btn { padding: 9px 16px; font-size: .86rem; }
.amigos-form-msg { font-size: .86rem; margin: 8px 2px 0; min-height: 1.3em; }
.amigos-form-msg.ok { color: var(--verde); }
.amigos-form-msg.erro { color: var(--vermelho); }
.amigos-seu-codigo {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: 26px; padding: 14px 16px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}
.amigos-seu-codigo small { display: block; color: var(--texto-3); font-size: .78rem; }
.amigos-seu-codigo b { font-size: 1.05rem; font-family: var(--mono); color: var(--ciano); }
.amigos-seu-codigo .btn { padding: 8px 16px; font-size: .84rem; }

/* lista de mensagens diretas */
.dm-lista { display: grid; gap: 2px; }
.dm-vazio { color: var(--texto-3); font-size: .82rem; padding: 6px 10px; margin: 0; }
.dm-item {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px;
  border-radius: 7px;
  color: var(--texto-2);
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.dm-item:hover { background: var(--superficie-2); color: var(--texto); }
.dm-item.ativa { background: var(--superficie-3); color: var(--texto); }
.dm-item.nao-lida { color: var(--texto); font-weight: 700; }
.dm-item .nome { flex: 1; min-width: 0; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-avatar { width: 32px !important; height: 32px !important; font-size: .78rem !important; }
.dm-badge {
  min-width: 18px; height: 18px; padding: 0 5px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--vermelho); color: #fff;
  font-size: .68rem; font-weight: 800;
}
.dm-fechar {
  width: 20px; height: 20px;
  border: 0; background: transparent;
  color: var(--texto-3);
  display: grid; place-items: center;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0;
}
.dm-fechar svg { width: 14px; height: 14px; }
.dm-item:hover .dm-fechar { opacity: 1; }
.dm-fechar:hover { color: var(--texto); }

/* chamada recebida */
.chamada-recebida {
  position: fixed; inset: 0; z-index: 250;
  display: grid; place-items: center;
  background: rgba(4, 5, 9, .6);
  backdrop-filter: blur(4px);
  animation: aparecer .16s ease;
}
.chamada-cartao {
  width: 250px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 28px 20px 22px;
  background: var(--fundo);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra-g);
  animation: vt-pop .2s ease;
}
.chamada-onda { position: relative; margin-bottom: 10px; border-radius: 50%; animation: chamada-onda 1.6s ease-out infinite; }
@keyframes chamada-onda {
  0%   { box-shadow: 0 0 0 0 rgba(63, 207, 142, .5); }
  100% { box-shadow: 0 0 0 22px rgba(63, 207, 142, 0); }
}
.chamada-avatar { width: 84px; height: 84px; font-size: 1.8rem; }
.chamada-cartao b { font-size: 1.1rem; }
.chamada-cartao small { color: var(--texto-3); }
.chamada-botoes { display: flex; gap: 28px; margin-top: 16px; }
.chamada-btn {
  width: 52px; height: 52px; border: 0; border-radius: 50%;
  display: grid; place-items: center;
  color: #fff; cursor: pointer;
  transition: transform .12s ease, filter .12s ease;
}
.chamada-btn svg { width: 22px; height: 22px; }
.chamada-btn:hover { transform: scale(1.08); filter: brightness(1.1); }
.chamada-btn.aceitar { background: var(--verde); }
.chamada-btn.recusar { background: var(--vermelho); }

/* chamada em andamento, em cima do chat da DM */
.dm-chamada {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 22px 16px 16px;
  background: #07080d;
  border-bottom: 1px solid var(--borda);
  flex: none;
  animation: vt-slide-down .2s ease;
}
.dm-chamada-pessoas { display: flex; gap: 22px; }
.dm-chamada-pessoa { position: relative; border-radius: 50%; transition: box-shadow .16s ease; }
.dm-chamada-pessoa .avatar { width: 72px; height: 72px; font-size: 1.5rem; }
.dm-chamada-pessoa.falando { box-shadow: 0 0 0 3px var(--verde); }
.dm-chamada-mudo {
  position: absolute; right: -2px; bottom: -2px;
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--vermelho); color: #fff;
  border: 3px solid #07080d;
}
.dm-chamada-mudo svg { width: 12px; height: 12px; }
.dm-chamada-status { color: var(--texto-2); font-size: .88rem; }
.dm-chamada-controles { display: flex; gap: 10px; }
.dm-chamada-controles .amigo-acao { width: 44px; height: 44px; background: var(--superficie-2); }
.dm-chamada-controles .amigo-acao.desligado { color: var(--vermelho); }
.dm-chamada-controles .amigo-acao.desligar { background: var(--vermelho); color: #fff; }
.dm-chamada-entrar { background: var(--verde); color: #06291a; padding: 9px 20px; }

/* Pedaços do Início que as duas interfaces usam do mesmo jeito. */
.bolha-badge {
  position: absolute; right: -4px; bottom: -4px; z-index: 1;
  min-width: 20px; height: 20px; padding: 0 5px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--vermelho); color: #fff;
  font-size: .68rem; font-weight: 800; line-height: 1;
  border: 3px solid var(--fundo);
}
.inicio-amigos { font-weight: 600; }
.inicio-amigos svg { width: 20px; height: 20px; flex: none; }
.inicio-badge {
  margin-left: auto;
  min-width: 18px; height: 18px; padding: 0 5px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--vermelho); color: #fff;
  font-size: .68rem; font-weight: 800;
}
.dm-status {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--texto-3);
  flex: none;
}
.dm-status.on { background: var(--verde); }
.eu-codigo { cursor: pointer; }
.eu-codigo:hover { color: var(--texto-2); text-decoration: underline; }

/* Perfil de alguém da sala: Mensagem / Adicionar amigo */
.membro.clicavel { cursor: pointer; }
/* O cartão, como no Discord: faixa na cor da pessoa, foto grande "saindo" da
   faixa, nome, nível, volume (se ela está na voz) e o campo de mensagem. */
/* `.voz-popover.` na frente: a regra do popover genérico vem depois no arquivo
   e, com a mesma especificidade, voltava a largura para 220px. */
.voz-popover.perfil-popover { width: 300px; padding: 0 0 14px; overflow: hidden; }
.perfil-faixa { height: 62px; background: var(--roxo); }
.perfil-cabeca { padding: 0 16px; margin-top: -44px; }
.perfil-avatar {
  --anel: 5px;
  width: 88px; height: 88px;
  font-size: 1.9rem;
  box-shadow: 0 0 0 5px var(--superficie);
}
.perfil-avatar.ampliavel { cursor: zoom-in; transition: filter .14s ease; }
.perfil-avatar.ampliavel:hover { filter: brightness(1.12); }
.perfil-corpo { padding: 10px 16px 0; }
.voz-popover .perfil-nome b { display: block; font-size: 1.12rem; margin: 0; }
.perfil-nome small { color: var(--texto-3); font-size: .82rem; }
.perfil-nivel { display: flex; align-items: center; gap: 8px; margin: 10px 0 6px; font-size: .8rem; color: var(--texto-2); }
.perfil-nivel + .nivel-barra .nivel-barra-legenda { font-size: .7rem; }
.perfil-secao { border-top: 1px solid var(--borda); margin-top: 12px; padding-top: 10px; }
.perfil-rotulo {
  display: block;
  font-size: .66rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--texto-3);
  margin-bottom: 6px;
}
.perfil-volume .voz-popover-chk { margin-top: 8px; }
.perfil-msg input {
  width: 100%;
  background: var(--fundo);
  border: 1px solid var(--borda-forte);
  border-radius: 8px;
  color: var(--texto);
  font: inherit; font-size: .86rem;
  padding: 9px 11px;
}
.perfil-msg input:focus { outline: none; border-color: var(--roxo); }
.perfil-msg-dica { display: block; min-height: 1.1em; margin-top: 5px; font-size: .74rem; color: var(--texto-3); }
.perfil-msg-dica.ok { color: var(--verde); }
.perfil-msg-dica.erro { color: var(--vermelho); }
.perfil-acoes { display: flex; gap: 8px; margin-top: 6px; }
.perfil-acoes .btn { flex: 1; padding: 7px 8px; font-size: .8rem; }

/* ====================================================== membros e modo game
   A web e o app desktop mostram a lista de membros do mesmo jeito: uma coluna
   fixa à direita, dentro de uma sala. Estas regras são as duas interfaces —
   cada uma só diz onde a coluna entra na sua grade. */
.membros-col {
  background: var(--fundo-2);
  border-left: 1px solid var(--borda);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
}
.membros-col-titulo {
  padding: 16px 14px 8px;
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--texto-3);
}
.membros-col .lista { padding: 0 8px 12px; }

.membro { display: flex; align-items: center; gap: 9px; padding: 5px 9px; border-radius: 7px; }
.membro:hover { background: var(--superficie-2); }
.membro .nome { flex: 1; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.membro .papel { font-size: .68rem; color: var(--texto-3); text-transform: uppercase; letter-spacing: .05em; }
.membro.offline { opacity: .42; }
.membro .avatar { position: relative; }
.membro .status {
  position: absolute;
  right: -2px; bottom: -2px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--texto-3);
  border: 2.5px solid var(--fundo-2);
}
/* (Sem `.membro:not(.offline) .status { verde }`: ela ganhava de
   `.status.st-ocupado` por especificidade e todo mundo online ficava verde.) */

/* Na coluna da direita as pessoas aparecem maiores — era o pedido: na lateral
   junto dos canais elas ficavam pequenas demais para reconhecer a foto. */
.membros-col .membro { padding: 6px 8px; gap: 11px; }
.membros-col .membro .avatar { width: 42px; height: 42px; font-size: .92rem; }
.membros-col .membro .status { width: 14px; height: 14px; border-width: 3px; }
.membros-col .membro .nome { font-size: .95rem; }

/* Bolinha de status também em quem está no canal de voz. */
.voz-pessoa .avatar .status {
  position: absolute;
  right: -3px; bottom: -3px;
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 2.5px solid var(--fundo-2);
}

/* Título "Membros" com o botão do ranking na ponta. */
.membros-col-titulo,
.desk-membros-titulo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.membros-ranking { width: 26px; height: 26px; font-size: 14px; letter-spacing: 0; }

/* Segunda linha embaixo do nome: "🎮 Jogando X" (modo game). Quem está no app
   desktop anuncia o jogo; todo mundo vê, inclusive no navegador. */
.membro-col { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.membro-jogo,
.voz-jogo {
  font-size: .72rem;
  color: var(--verde);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.voz-jogo { font-size: .68rem; }

/* ------------------------------------------------ trilha: ordem e silêncio */
/* Reordenar salas: arrastar a bolha para cima/baixo. A ordem é deste aparelho. */
.bolha[draggable='true'] { cursor: grab; }
.bolha.arrastando { opacity: .35; cursor: grabbing; }
.bolha.alvo-antes { box-shadow: 0 -3px 0 -1px var(--roxo); }
.bolha.alvo-depois { box-shadow: 0 3px 0 -1px var(--roxo); }

/* Sala silenciada (botão direito -> Silenciar): apagada e com um risco. */
.bolha.muda { opacity: .5; }
.bolha.muda::after {
  content: '';
  position: absolute;
  right: -3px; bottom: -3px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--fundo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23f2545b' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M4 4l16 16'/%3E%3Cpath d='M11 5 6 9H3v6h3l5 4z'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* ------------------------------------------------------- menu de contexto */
/* Botão direito numa sala, e o "+" da trilha. */
.menu-contexto {
  position: fixed;
  z-index: 130;
  min-width: 180px;
  background: var(--superficie);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  box-shadow: var(--sombra-g);
  padding: 6px;
  animation: vt-pop .12s ease;
}
.menu-contexto button {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  border: 0; background: transparent;
  color: var(--texto-2);
  font: inherit; font-size: .86rem;
  text-align: left;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
}
.menu-contexto button:hover { background: var(--superficie-2); color: var(--texto); }
.menu-contexto button.perigo:hover { background: rgba(242, 84, 91, .14); color: var(--vermelho); }

/* --------------------------------------------------- divisor arrastável */
/* Entre a transmissão (em cima) e o chat (embaixo). Duplo clique volta ao
   padrão. Mesma peça nas duas interfaces. */
.divisor {
  position: relative;
  height: 9px;
  flex: none;
  cursor: ns-resize;
  touch-action: none;
  background: var(--fundo-2);
  border-top: 1px solid var(--borda);
}
.divisor::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 44px; height: 3px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: var(--borda-forte);
  transition: background .14s ease, width .14s ease;
}
.divisor:hover::after, .divisor.arrastando::after { background: var(--roxo); width: 64px; }

/* ================================================================ presença
   Uma bolinha, uma cor, um significado — igual na lista de membros, na de
   amigos, nas DMs e na voz. Quem decide a cor é `shared/client/presenca.js`. */
.status.st-online  { background: var(--verde); }
.status.st-ocupado { background: var(--vermelho); }
.status.st-ausente { background: #faa61a; }
.status.st-offline { background: var(--texto-3); }

/* "Ocupado" leva um risco no meio, para quem não distingue verde de vermelho
   também entender pela forma. */
.status.st-ocupado::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 56%; height: 2px;
  transform: translate(-50%, -50%);
  border-radius: 2px;
  background: var(--fundo-2);
}
/* "Ausente" fica com a mordida da lua, como no Discord. */
.status.st-ausente::after {
  content: '';
  position: absolute;
  left: 8%; top: 4%;
  width: 62%; height: 62%;
  border-radius: 50%;
  background: var(--fundo-2);
}
.status { position: relative; }

/* Menu de escolha do próprio status. */
.status-menu { display: grid; gap: 2px; }
.status-opcao {
  display: flex; align-items: flex-start; gap: 10px;
  width: 100%;
  border: 0; background: transparent;
  color: var(--texto-2);
  font: inherit;
  text-align: left;
  padding: 8px 10px;
  border-radius: 7px;
  cursor: pointer;
}
.status-opcao:hover { background: var(--superficie-2); color: var(--texto); }
.status-opcao.ativa { background: var(--superficie-3); color: var(--texto); }
.status-opcao .status {
  width: 12px; height: 12px;
  border-radius: 50%;
  flex: none;
  margin-top: 3px;
  border: 0;
}
.status-opcao b { display: block; font-size: .88rem; }
.status-opcao small {
  color: var(--texto-3);
  font-size: .74rem;
  line-height: 1.35;
  /* A explicação quebra em mais linhas em vez de vazar para fora do cartão. */
  white-space: normal;
  overflow-wrap: anywhere;
}

/* A bolinha do próprio usuário, no rodapé: clicável. */
.eu-avatar-caixa { position: relative; flex: none; }
.eu-avatar-caixa .status {
  position: absolute;
  right: -2px; bottom: -2px;
  width: 13px; height: 13px;
  border-radius: 50%;
  border: 3px solid var(--fundo-2);
  pointer-events: none;
}

/* ============================================= popover ancorado (voz e status)
   Um cartãozinho que abre encostado em alguma coisa: o volume de uma pessoa,
   o cartão de perfil e o seletor de status. Mesma peça nas duas interfaces. */
.voz-popover {
  position: fixed;
  z-index: 120;
  width: 220px;
  background: var(--superficie);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  box-shadow: var(--sombra-g);
  padding: 12px 14px;
  animation: vt-pop .14s ease;
}
.voz-popover b { display: block; font-size: .88rem; margin-bottom: 10px; }
.voz-popover-vol { display: flex; align-items: center; gap: 10px; }
.voz-popover-vol input[type='range'] { flex: 1; }
.voz-popover-vol span { font-size: .76rem; color: var(--texto-3); width: 34px; text-align: right; }
.voz-popover-chk {
  display: flex; align-items: center; gap: 8px;
  margin-top: 12px;
  font-size: .82rem; color: var(--texto-2);
  cursor: pointer;
}
.voz-popover-chk input { accent-color: var(--roxo); }

/* O seletor de status é mais largo que o de volume: cada opção tem uma linha
   de explicação embaixo, e ela precisa CABER. Com a largura do popover de
   volume (220px) o texto vazava para fora do cartão. */
.status-popover { width: 288px; padding: 8px; }
.status-popover .status-menu b { margin-bottom: 1px; }
/* A separação entre o status e "Trocar foto de perfil". */
.status-popover .btn {
  width: 100%;
  margin-top: 8px;
  padding: 9px 14px;
  font-size: .85rem;
  border-top-left-radius: var(--raio);
  border-top-right-radius: var(--raio);
}

/* ================================================ rodapé com o usuário logado
   Fica no pé da lateral, abaixo da barra de voz — nas duas interfaces.
   Clicar na foto abre o status e a troca de foto. */
.eu-barra {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  background: var(--fundo);
  border-top: 1px solid var(--borda);
  flex: none;
}
.eu-barra .nome { flex: 1; min-width: 0; }
.eu-barra .nome b { display: block; font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eu-barra .nome small {
  color: var(--texto-3);
  font-size: .74rem;
  display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.eu-avatar-caixa .avatar { cursor: pointer; }

/* =================================================================== foto
   A foto de alguém em tamanho grande (clicar no avatar do cartão de perfil). */
.visor-foto {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14px;
  cursor: zoom-out;
}
.visor-avatar {
  width: min(78vmin, 512px);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--raio);
  box-shadow: var(--sombra-g);
  animation: vt-pop .16s ease;
}
.visor-nome { color: #fff; font-weight: 700; font-size: 1.05rem; text-shadow: 0 1px 4px rgba(0, 0, 0, .6); }

/* ================================================================= níveis
   Selo "Nv 12", barra de progresso, modal "Seu nível" e ranking da sala. As
   regras (XP, faixas, fundos) moram em shared/client/niveis.js. */
.eu-nome-linha { display: flex; align-items: center; gap: 6px; min-width: 0; }
.eu-nome-linha b { min-width: 0; }

.nivel-selo {
  display: inline-flex; align-items: center;
  flex: none;
  padding: 1px 7px;
  border: 0;
  border-radius: 999px;
  font: inherit; font-size: .64rem; font-weight: 800; line-height: 1.5;
  letter-spacing: .02em;
  color: #fff;
  background: linear-gradient(135deg, #5d6b82, #8a96ab);
  white-space: nowrap;
}
.nivel-selo[data-faixa='1'] { background: linear-gradient(135deg, #2fae77, #3fcf8e); }
.nivel-selo[data-faixa='2'] { background: linear-gradient(135deg, #1b9fd6, #22d3ee); }
.nivel-selo[data-faixa='3'] { background: linear-gradient(135deg, #6845f0, #a78bfa); }
.nivel-selo[data-faixa='4'] { background: linear-gradient(135deg, #d6246e, #f472b6); }
.nivel-selo[data-faixa='5'] { background: linear-gradient(135deg, #b8860b, #ffd54a); color: #2a1d00; }
.nivel-selo.grande { font-size: .78rem; padding: 2px 10px; }
button.nivel-selo { cursor: pointer; transition: filter .14s ease, transform .1s ease; }
button.nivel-selo:hover { filter: brightness(1.15); }
button.nivel-selo:active { transform: scale(.94); }

.nivel-barra-trilho { height: 8px; border-radius: 999px; background: var(--superficie-3, var(--superficie-2)); overflow: hidden; }
.nivel-barra-cheio {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--roxo), var(--ciano));
  transition: width .5s ease;
}
.nivel-barra-legenda { display: block; margin-top: 5px; color: var(--texto-3); font-size: .76rem; }

.nivel-topo { display: flex; align-items: center; gap: 18px; margin: 6px 0 16px; }
.nivel-avatar { --anel: 5px; width: 80px; height: 80px; font-size: 1.7rem; }
.nivel-topo-linha { display: flex; align-items: center; gap: 8px; }
.nivel-topo-linha b { font-size: 1.35rem; }
.nivel-titulo { display: block; color: var(--roxo); font-weight: 700; font-size: .92rem; margin: 2px 0; }
.nivel-topo small { color: var(--texto-3); font-size: .8rem; }
.nivel-regra { font-size: .82rem; color: var(--texto-2); margin: 14px 0 4px; line-height: 1.45; }
.nivel-sub {
  font-size: .7rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--texto-3);
  margin: 16px 0 10px;
}
.fundos-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 10px; }
.fundo-opcao {
  display: flex; flex-direction: column; align-items: center;
  gap: 3px;
  padding: 16px 8px 10px;
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  color: var(--texto);
  font: inherit;
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease;
}
.fundo-opcao:hover:not(:disabled) { border-color: var(--roxo); }
.fundo-opcao.ativo { border-color: var(--roxo); background: var(--roxo-suave); cursor: default; }
.fundo-opcao.trancado { cursor: not-allowed; }
.fundo-opcao.trancado .fundo-previa { filter: grayscale(1) brightness(.55); }
.fundo-opcao.trancado b { color: var(--texto-3); }
.fundo-previa { --anel: 4px; width: 54px; height: 54px; font-size: 1.05rem; margin-bottom: 8px; }
.fundo-opcao b { font-size: .84rem; }
.fundo-opcao small { font-size: .7rem; color: var(--texto-3); }
.fundo-opcao.ativo small { color: var(--roxo); font-weight: 700; }

.ranking { display: grid; gap: 2px; max-height: 60vh; overflow-y: auto; padding: 4px 2px; }
.ranking-linha { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 9px; }
.ranking-linha:hover { background: var(--superficie-2); }
.ranking-linha.eu { background: var(--roxo-suave); }
.ranking-pos { width: 30px; flex: none; text-align: center; font-weight: 800; font-size: .88rem; color: var(--texto-3); }
.ranking-linha.podio .ranking-pos { font-size: 1.35rem; }
.ranking-avatar { width: 40px; height: 40px; font-size: .88rem; }
.ranking-txt { flex: 1; min-width: 0; }
.ranking-txt b { display: block; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking-txt small { color: var(--texto-3); font-size: .74rem; }
.ranking-lado { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.ranking-lado small { color: var(--texto-3); font-size: .72rem; }
.ranking-vazio { color: var(--texto-3); text-align: center; padding: 22px 8px; }

/* ========================================================= fundos animados
   O prêmio dos níveis: um anel animado em volta do avatar, como os avatares
   animados do Discord. Classe `com-fundo fundo-<id>` (niveis.aplicarFundo).

   Como é montado:
   - `isolation: isolate` dá ao avatar o próprio contexto de empilhamento; aí
     os pseudo-elementos com z-index negativo ficam ATRÁS da foto e da
     bolinha de status, mas continuam na frente do que está atrás do avatar
     (fundo da lista, hover da linha).
   - `::before` é o anel: um disco um pouco maior que o avatar, com o miolo
     recortado por máscara — sem isso ele cobriria a cor de quem não tem foto.
   - `::after` é o brilho/efeito extra (desfocado, faíscas, estrelas).
   `--anel` é a espessura; avatares grandes usam um anel mais grosso. */
.avatar.com-fundo { isolation: isolate; --anel: 3px; }
.perfil-avatar.com-fundo, .nivel-avatar.com-fundo { --anel: 5px; }
.fundo-previa.com-fundo { --anel: 4px; }
.avatar.com-fundo::before,
.avatar.com-fundo::after {
  content: '';
  position: absolute;
  inset: calc(-1 * var(--anel));
  border-radius: 50%;
  pointer-events: none;
}
.avatar.com-fundo::before {
  z-index: -1;
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - var(--anel)), #000 calc(100% - var(--anel) + .5px));
          mask: radial-gradient(closest-side, transparent calc(100% - var(--anel)), #000 calc(100% - var(--anel) + .5px));
}
.avatar.com-fundo::after {
  z-index: -2;
  filter: blur(calc(var(--anel) * 1.6));
  -webkit-mask: radial-gradient(closest-side, transparent 58%, #000 86%);
          mask: radial-gradient(closest-side, transparent 58%, #000 86%);
}
/* Quem fala continua com o contorno verde visível: o anel se afasta. */
.falando .avatar.com-fundo::before,
.falando.avatar.com-fundo::before { inset: calc(-1 * var(--anel) - 3px); }

@keyframes fundo-gira   { to { transform: rotate(1turn); } }
@keyframes fundo-respira {
  0%, 100% { opacity: .55; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.07); }
}
@keyframes fundo-tremula {
  0%   { opacity: .75; transform: scale(1)    translateY(0); }
  100% { opacity: 1;   transform: scale(1.1)  translateY(-2px); }
}
@keyframes fundo-matiz  { to { filter: hue-rotate(1turn) blur(calc(var(--anel) * 1.6)); } }
@keyframes fundo-matiz-anel { to { filter: hue-rotate(1turn); } }
@keyframes fundo-pisca {
  0%, 100% { opacity: .35; }
  50%      { opacity: 1; }
}
@keyframes fundo-raio {
  0%, 62%, 70%, 100% { opacity: .55; filter: brightness(1); }
  64%, 68%           { opacity: 1;   filter: brightness(2.2); }
  66%                { opacity: .3; }
}

/* Nível 2 — Brilho */
.fundo-brilho::before {
  background: linear-gradient(135deg, #e9d5ff, #a78bfa 45%, #67e8f9);
  animation: fundo-respira 2.8s ease-in-out infinite;
}
.fundo-brilho::after {
  background: #a78bfa;
  animation: fundo-respira 2.8s ease-in-out infinite;
}

/* Nível 5 — Aurora */
.fundo-aurora::before {
  background: conic-gradient(#22d3ee, #3fcf8e, #a3e635, #7c5cff, #eb459e, #22d3ee);
  animation: fundo-gira 6s linear infinite;
}
.fundo-aurora::after {
  background: conic-gradient(#22d3ee, #3fcf8e, #7c5cff, #eb459e, #22d3ee);
  opacity: .8;
  animation: fundo-gira 6s linear infinite;
}

/* Nível 10 — Chamas */
.fundo-chamas::before {
  background: conic-gradient(#ff3d00, #ff9100, #ffd600, #ff6d00, #dd2c00, #ff9100, #ffea00, #ff3d00);
  animation: fundo-gira 2.2s linear infinite;
}
.fundo-chamas::after {
  inset: calc(-1 * var(--anel) - 5px) calc(-1 * var(--anel)) calc(-1 * var(--anel));
  background: radial-gradient(ellipse at 50% 100%, #ffab00, #ff3d00 55%, transparent 75%);
  animation: fundo-tremula .16s ease-in-out infinite alternate;
}

/* Nível 15 — Neon */
.fundo-neon::before {
  background: conic-gradient(#ff0080, #ff8c00, #ffe600, #00ff88, #00cfff, #7a00ff, #ff0080);
  animation: fundo-gira 2.6s linear infinite, fundo-matiz-anel 5s linear infinite;
}
.fundo-neon::after {
  background: conic-gradient(#ff0080, #ffe600, #00ff88, #00cfff, #7a00ff, #ff0080);
  animation: fundo-gira 2.6s linear infinite, fundo-matiz 5s linear infinite;
}

/* Nível 20 — Galáxia: anel cósmico + estrelas piscando em volta. */
.fundo-galaxia::before {
  background: conic-gradient(#1e1b4b, #6d28d9, #db2777, #1e3a8a, #0ea5e9, #312e81, #1e1b4b);
  animation: fundo-gira 9s linear infinite;
}
.fundo-galaxia::after {
  inset: calc(-1 * var(--anel) - 6px);
  filter: none;
  background:
    radial-gradient(circle at 12% 30%, #fff 0 1.2px, transparent 2px),
    radial-gradient(circle at 85% 22%, #fff 0 1px, transparent 1.8px),
    radial-gradient(circle at 92% 70%, #c4b5fd 0 1.3px, transparent 2.2px),
    radial-gradient(circle at 20% 88%, #fff 0 1px, transparent 1.8px),
    radial-gradient(circle at 55% 3%, #67e8f9 0 1.2px, transparent 2px),
    radial-gradient(circle at 50% 97%, #fff 0 1.1px, transparent 2px),
    radial-gradient(circle, rgba(109, 40, 217, .55), transparent 70%);
  -webkit-mask: radial-gradient(closest-side, transparent 62%, #000 70%);
          mask: radial-gradient(closest-side, transparent 62%, #000 70%);
  animation: fundo-pisca 2.4s ease-in-out infinite, fundo-gira 24s linear infinite reverse;
}

/* Nível 30 — Relâmpago */
.fundo-raio::before {
  background: conic-gradient(#e0f2fe, #38bdf8, #1d4ed8, #e0f2fe, #0ea5e9, #fff, #38bdf8, #e0f2fe);
  animation: fundo-gira 1.4s linear infinite;
}
.fundo-raio::after {
  inset: calc(-1 * var(--anel) - 4px);
  background: #7dd3fc;
  animation: fundo-raio 1.9s linear infinite;
}

/* Nível 50 — Lendário */
.fundo-lendario::before {
  background: conic-gradient(#fff7cc, #ffd54a, #b8860b, #fff1a8, #ffc107, #8a6100, #ffe27a, #fff7cc);
  animation: fundo-gira 3.5s linear infinite;
}
.fundo-lendario::after {
  inset: calc(-1 * var(--anel) - 4px);
  background: conic-gradient(#ffd54a, transparent 20%, #fff1a8 35%, transparent 55%, #ffc107 75%, transparent 90%, #ffd54a);
  animation: fundo-gira 5s linear infinite reverse, fundo-respira 2.2s ease-in-out infinite;
}

/* `*` não pega pseudo-elementos: quem pediu menos movimento fica com o anel
   parado (ainda bonito, só sem girar). */
@media (prefers-reduced-motion: reduce) {
  .avatar.com-fundo::before, .avatar.com-fundo::after { animation: none !important; }
}

/* Mudo e surdo ao lado de quem está na voz: vermelhos e grandes o bastante
   para todo mundo ver o estado da pessoa de relance — nas duas interfaces.
   A web mostrava cinza e miúdo, e ninguém percebia. */
.voz-icone { display: inline-flex; flex: none; color: var(--vermelho); opacity: .95; }
.voz-icone svg { width: 16px; height: 16px; display: block; }
.voz-icone + .voz-icone { margin-left: -3px; }
/* Quem está assistindo uma transmissão: roxo, e não vermelho — não é aviso. */
.voz-icone.voz-olho { color: var(--roxo); opacity: 1; }

/* ============================================================= selo AO VIVO
   Ao lado de quem está transmitindo, dentro do canal de voz — como no
   Discord. É onde os olhos já estão: a pessoa já aparece listada ali.
   Antes isso morava numa seção "Ao vivo" separada, longe de quem transmitia. */
.selo-live {
  flex: none;
  border: 0;
  border-radius: 5px;
  background: var(--vermelho);
  color: #fff;
  font: inherit;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1;
  padding: 3px 5px;
  cursor: pointer;
  transition: transform .12s ease, filter .12s ease;
}
.selo-live:hover { filter: brightness(1.12); transform: translateY(-1px); }
/* O seu próprio: informa, não convida a clicar (você já está transmitindo). */
.selo-live.meu {
  background: transparent;
  color: var(--vermelho);
  box-shadow: inset 0 0 0 1px currentColor;
  cursor: default;
}
.selo-live.meu:hover { filter: none; transform: none; }

/* =============================================== ações da mensagem (Discord)
   Passar o mouse numa mensagem mostra a barrinha no canto: reações de um
   clique, escolher emoji, responder, editar e apagar. */
.msg { position: relative; }
/* Redesenhada no lugar (editada, reação nova): não "chega" de novo. */
.msg.estatica { animation: none; }
.msg-acoes {
  position: absolute;
  top: -15px;
  right: 14px;
  z-index: 5;
  display: none;
  align-items: center;
  gap: 1px;
  padding: 2px;
  background: var(--superficie);
  border: 1px solid var(--borda-forte);
  border-radius: 8px;
  box-shadow: var(--sombra);
}
.msg:hover .msg-acoes,
.msg:focus-within .msg-acoes { display: flex; }
.msg-acao {
  display: grid;
  place-items: center;
  width: 30px;
  height: 28px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--texto-2);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background .12s ease, color .12s ease, transform .1s ease;
}
.msg-acao svg { width: 18px; height: 18px; }
.msg-acao:hover { background: var(--superficie-3); color: var(--texto); }
.msg-acao:active { transform: scale(.9); }
.msg-acao.perigo:hover { background: rgba(242, 84, 91, .16); color: var(--vermelho); }

/* Pular até a original: a mensagem pisca de leve. */
.msg.destaque { animation: msg-destaque 1.8s ease; }
@keyframes msg-destaque {
  0%, 35% { background: var(--roxo-suave); }
  100% { background: transparent; }
}

.msg-editada { font-size: .7rem; color: var(--texto-3); cursor: default; }

/* "↪ @Fulano trecho" em cima de uma resposta. */
.msg-resposta {
  display: flex;
  align-items: baseline;
  gap: 6px;
  max-width: 100%;
  margin: 0 0 2px;
  padding: 0 0 0 16px;
  border: 0;
  background: none;
  color: var(--texto-2);
  font: inherit;
  font-size: .8rem;
  text-align: left;
  cursor: pointer;
  position: relative;
  min-width: 0;
}
.msg-resposta::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 7px;
  width: 10px;
  height: 8px;
  border-left: 2px solid var(--borda-forte);
  border-top: 2px solid var(--borda-forte);
  border-top-left-radius: 6px;
}
.msg-resposta b { flex: none; font-weight: 700; }
.msg-resposta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.msg-resposta:hover span { color: var(--texto); }
.msg-resposta.apagada { font-style: italic; color: var(--texto-3); cursor: default; }

/* Reações embaixo da mensagem. */
.msg-reacoes { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.reacao {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--superficie-2);
  color: var(--texto-2);
  font: inherit;
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, transform .1s ease;
}
.reacao:hover { border-color: var(--borda-forte); }
.reacao:active { transform: scale(.94); }
.reacao.minha { background: var(--roxo-suave); border-color: var(--roxo); color: var(--texto); }
.reacao-emoji { font-size: 1rem; line-height: 1; }
.reacao-mais { padding: 0 6px; color: var(--texto-3); opacity: 0; }
.reacao-mais svg { width: 16px; height: 16px; display: block; }
.msg:hover .reacao-mais, .reacao-mais:focus-visible { opacity: 1; }

/* Seletor de emoji aberto a partir de uma mensagem (e não da caixa de escrever). */
.emoji-painel.emoji-solto {
  position: fixed;
  bottom: auto;
  right: auto;
  margin: 0;
  z-index: 130;
}

/* "Respondendo a Fulano" / "Editando mensagem", em cima da caixa de escrever. */
.compositor-barra {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 -4px;
  padding: 6px 8px 10px 12px;
  background: var(--fundo-2);
  border: 1px solid var(--borda);
  border-bottom: 0;
  border-radius: var(--raio) var(--raio) 0 0;
  font-size: .82rem;
  color: var(--texto-2);
  animation: vt-pop .14s ease;
}
.compositor-barra[hidden] { display: none; }
.compositor-barra-texto { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compositor-barra.editando b { color: var(--amarelo); }
.compositor-barra small { color: var(--texto-3); }
.compositor-barra .icone-btn { width: 24px; height: 24px; padding: 0; display: grid; place-items: center; }
.compositor-barra .icone-btn svg { width: 15px; height: 15px; }

/* ================================== quem está na voz, ao passar o mouse na sala */
.trilha-cartao {
  position: fixed;
  z-index: 140;
  min-width: 180px;
  max-width: 260px;
  padding: 10px 12px;
  background: var(--superficie);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  box-shadow: var(--sombra-g);
  pointer-events: none;
  animation: vt-pop .12s ease;
}
.trilha-cartao-nome { display: block; font-size: .92rem; margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trilha-cartao-vazio { color: var(--texto-3); font-size: .8rem; }
.trilha-cartao-canal { font-size: .76rem; font-weight: 700; color: var(--texto-2); margin: 6px 0 3px; }
.trilha-cartao-pessoa { display: flex; align-items: center; gap: 8px; padding: 2px 0 2px 6px; font-size: .84rem; }
.trilha-cartao-pessoa .nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trilha-cartao-pessoa .avatar { flex: none; }
.trilha-cartao-live {
  flex: none;
  border-radius: 4px;
  background: var(--vermelho);
  color: #fff;
  font-size: .55rem;
  font-weight: 800;
  letter-spacing: .06em;
  padding: 2px 4px;
}

/* =============================================== marquinha de voz na sala
   Fixa no canto da bolha: alto-falante + quantas pessoas estão em voz.
   Fica na borda de baixo à direita, onde o Início mostra as não lidas. */
.bolha-voz {
  position: absolute;
  right: -6px;
  bottom: -5px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 20px;
  padding: 0 5px 0 4px;
  border-radius: 999px;
  background: var(--verde);
  color: #06140d;
  font-size: .66rem;
  font-weight: 800;
  line-height: 1;
  border: 3px solid var(--fundo);
  box-sizing: content-box;
  pointer-events: none;
  animation: vt-pop .18s ease;
}
.bolha-voz svg { width: 11px; height: 11px; stroke-width: 2.6; }

/* ============================================================ novidades */
.lateral-topo h2, .desk-lateral-topo h2 { flex: 1; min-width: 0; }
.btn-novidades {
  position: relative;
  flex: none;
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--borda-forte);
  border-radius: 999px;
  background: var(--roxo-suave);
  color: var(--texto);
  font: inherit;
  font-size: .74rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, transform .1s ease;
}
.btn-novidades:hover { background: rgba(124, 92, 255, .26); border-color: var(--roxo); }
.btn-novidades:active { transform: scale(.95); }
/* Bolinha enquanto houver novidade que você ainda não abriu. */
.btn-novidades.tem-novidade::after {
  content: '';
  position: absolute;
  top: -3px;
  right: -3px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--vermelho);
  border: 2px solid var(--superficie);
}

.novidades { display: grid; gap: 22px; margin-top: 6px; }
.novidades-data {
  margin: 0;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--roxo);
}
.novidade h4 { margin: 10px 0 4px; font-size: 1rem; }
.novidade p { margin: 0; color: var(--texto-2); font-size: .9rem; line-height: 1.5; }
.novidade-img {
  display: block;
  /* Print estreito (o da trilha) fica no tamanho dele, sem esticar e borrar. */
  width: auto;
  max-width: 100%;
  height: auto;
  border-radius: var(--raio);
  border: 1px solid var(--borda);
  cursor: zoom-in;
}

/* ================================================================ doações */
/* A tag ao lado do nome: mensagens, membros e cartão de perfil. */
.selo-doador {
  display: inline-flex;
  align-items: center;
  flex: none;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(235, 69, 158, .22), rgba(124, 92, 255, .22));
  border: 1px solid rgba(235, 69, 158, .45);
  color: #f7c6e3;
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1.5;
  vertical-align: middle;
  white-space: nowrap;
}
/* A do fundador: dourada, uma conta só. */
.selo-fundador {
  display: inline-flex;
  align-items: center;
  flex: none;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 213, 74, .22), rgba(255, 159, 28, .2));
  border: 1px solid rgba(255, 200, 60, .6);
  color: #ffe08a;
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1.5;
  vertical-align: middle;
  white-space: nowrap;
}
.msg-cab .selo-doador, .msg-cab .selo-fundador { margin-left: 0; }
.perfil-selos { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }
.perfil-selos > span { margin-left: 0; }

/* O fundo de doador: anel rosa e roxo girando, com um brilho que pulsa. */
.fundo-doador::before {
  background: conic-gradient(#eb459e, #ff8ac6, #7c5cff, #b69cff, #eb459e, #ff8ac6, #7c5cff, #eb459e);
  animation: fundo-gira 4s linear infinite;
}
.fundo-doador::after {
  background: conic-gradient(#eb459e, transparent 25%, #7c5cff 50%, transparent 75%, #eb459e);
  animation: fundo-gira 7s linear infinite reverse, fundo-respira 1.8s ease-in-out infinite;
}
.fundo-opcao.de-doador small { color: #f7c6e3; }

/* O 💜 na barra de salas. */
.bolha.bolha-doar {
  background: var(--superficie-2);
  font-size: 1.2rem;
}
.bolha.bolha-doar:hover { background: linear-gradient(135deg, #eb459e, #7c5cff); }

/* Modal "Apoie o VisTalk". */
.doacao { display: grid; gap: 14px; }
.doacao-intro { margin: 0; color: var(--texto-2); line-height: 1.55; font-size: .92rem; }
.doacao-valor { display: grid; gap: 10px; }
.doacao-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.doacao-chip {
  flex: 1 1 80px;
  height: 42px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  background: var(--superficie-2);
  color: var(--texto);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.doacao-chip:hover { border-color: var(--roxo); }
.doacao-chip.ativo { border-color: #eb459e; background: rgba(235, 69, 158, .16); }
.doacao-campo, .doacao-codigo {
  width: 100%;
  padding: 10px 12px;
  background: var(--fundo-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  color: var(--texto);
  font: inherit;
}
.doacao-campo:focus, .doacao-codigo:focus { outline: none; border-color: var(--roxo); }
.doacao-codigo { font-family: var(--mono); font-size: .74rem; resize: none; word-break: break-all; }
.doacao-pix { display: grid; gap: 10px; justify-items: center; text-align: center; }
.doacao-pix[hidden] { display: none; }
.doacao-total { margin: 0; font-size: 1.05rem; }
.doacao-qr { width: 220px; height: 220px; border-radius: var(--raio); background: #fff; padding: 6px; image-rendering: pixelated; }
.doacao-dica { color: var(--texto-3); }
.doacao-info { width: 100%; display: grid; gap: 4px; text-align: left; }
.doacao-info-linha { display: flex; justify-content: space-between; gap: 10px; font-size: .82rem; color: var(--texto-2); }
.doacao-info-linha b { color: var(--texto); font-family: var(--mono); font-size: .8rem; text-align: right; }
.doacao-aviso {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--raio);
  background: rgba(245, 181, 68, .1);
  border: 1px solid rgba(245, 181, 68, .35);
  color: var(--texto-2);
  font-size: .82rem;
  text-align: left;
  line-height: 1.5;
}
.doacao-sub {
  margin-top: 6px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texto-3);
}
.doacao-minhas { display: grid; gap: 4px; font-size: .84rem; }
.doacao-item {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--superficie-2);
}
.doacao-item span { color: var(--texto-3); }
.doacao-item.estado-confirmada .doacao-estado { color: #f7c6e3; font-weight: 700; }
.doacao-item.estado-pendente .doacao-estado { color: var(--amarelo); }
.doacao-item .icone-btn { width: 24px; height: 24px; padding: 0; }
.doacao-prefs {
  display: grid;
  gap: 8px;
  justify-items: start;
  padding: 12px;
  border-radius: var(--raio);
  background: linear-gradient(135deg, rgba(235, 69, 158, .12), rgba(124, 92, 255, .12));
  border: 1px solid rgba(235, 69, 158, .35);
}
.doacao-chk { display: flex; align-items: center; gap: 6px; font-size: .88rem; cursor: pointer; }
.doacao-chk input { accent-color: #eb459e; }

/* A lista de doadores (modal e página inicial do site). */
.doadores-lista { display: flex; flex-wrap: wrap; gap: 8px; }
.doador-nome {
  padding: 4px 11px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(235, 69, 158, .16), rgba(124, 92, 255, .16));
  border: 1px solid rgba(235, 69, 158, .35);
  color: var(--texto);
  font-size: .86rem;
  font-weight: 700;
}
.doadores-vazio { margin: 0; color: var(--texto-3); font-size: .88rem; }

/* Painel de admin: confirmar os Pix que caíram. */
.doacao-admin { display: grid; gap: 12px; }
.doacao-abas { display: flex; gap: 6px; }
.doacao-aba {
  padding: 6px 12px;
  border: 1px solid var(--borda);
  border-radius: 999px;
  background: transparent;
  color: var(--texto-2);
  font: inherit;
  font-size: .82rem;
  cursor: pointer;
}
.doacao-aba.ativo { background: var(--roxo-suave); border-color: var(--roxo); color: var(--texto); }
.doacao-admin-lista { display: grid; gap: 6px; }
.doacao-admin-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--raio);
  background: var(--superficie-2);
}
.doacao-admin-txt { flex: 1; min-width: 0; }
.doacao-admin-txt small { display: block; color: var(--texto-3); font-family: var(--mono); font-size: .72rem; overflow-wrap: anywhere; }

/* ======================================== seletor de emojis (lista completa)
   Todos os emojis do Unicode, com abas por categoria, "Recentes", busca e tom
   de pele — o jeito do WhatsApp. As regras de base (.emoji-painel, .emoji-item)
   ficam lá em cima; aqui só o que a lista grande pediu. */
.emoji-painel { width: 352px; max-height: 420px; }
.emoji-topo { position: relative; display: flex; align-items: center; gap: 6px; padding: 10px 10px 6px; }
.emoji-topo .emoji-busca { flex: 1; min-width: 0; margin: 0; }
.emoji-tom {
  flex: none;
  width: 36px;
  height: 34px;
  border: 1px solid var(--borda);
  border-radius: 7px;
  background: var(--fundo-2);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}
.emoji-tom:hover { border-color: var(--borda-forte); }
.emoji-tons {
  position: absolute;
  top: 46px;
  right: 10px;
  z-index: 2;
  display: flex;
  gap: 2px;
  padding: 4px;
  background: var(--superficie-2);
  border: 1px solid var(--borda-forte);
  border-radius: 9px;
  box-shadow: var(--sombra);
}
.emoji-tons[hidden] { display: none; }
.emoji-tons .emoji-item { width: 34px; }
.emoji-abas {
  display: flex;
  justify-content: space-between;
  padding: 0 8px 4px;
  border-bottom: 1px solid var(--borda);
}
.emoji-abas[hidden] { display: none; }
.emoji-aba {
  flex: 1;
  border: 0;
  background: transparent;
  font-size: 1.05rem;
  line-height: 1;
  padding: 6px 0;
  border-radius: 7px;
  cursor: pointer;
  filter: grayscale(.6);
  opacity: .8;
  transition: filter .12s, opacity .12s, background .12s;
}
.emoji-aba:hover { filter: none; opacity: 1; background: var(--superficie-3); }
.emoji-corpo { flex: 1; min-height: 0; }
/* ~1.900 botões: o navegador só desenha o que aparece na rolagem. */
.emoji-grade { content-visibility: auto; contain-intrinsic-size: auto 300px; }

/* Tags na lista de membros: linha própria embaixo do nome. */
.membro-selos { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.membro-selos > span { margin-left: 0; font-size: .6rem; }

/* ============================================================ notificações */
/* Sala com mensagem nova: o tracinho branco curto à esquerda, como no Discord. */
.bolha.nao-lida::before { height: 8px; }

/* "Quer ser avisado das mensagens?" — uma vez, embaixo, na web. */
.notif-faixa {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 95;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 32px);
  padding: 10px 12px 10px 16px;
  background: var(--superficie-2);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra-g);
  font-size: .9rem;
  animation: vt-pop .2s ease;
}
.notif-faixa span { flex: 1; min-width: 0; }
@media (max-width: 640px) { .notif-faixa { flex-wrap: wrap; } }

/* "Notificações e sons". */
.notif-ajustes { display: grid; gap: 10px; }
.notif-sub {
  margin-top: 6px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texto-3);
}
.notif-opcao {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: var(--raio);
  background: var(--superficie-2);
  cursor: pointer;
}
.notif-opcao input { margin-top: 3px; accent-color: var(--roxo); width: 16px; height: 16px; flex: none; }
.notif-opcao b { display: block; font-size: .92rem; }
.notif-opcao small { display: block; color: var(--texto-3); font-size: .8rem; line-height: 1.4; margin-top: 2px; }
.notif-estado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--raio);
  border: 1px dashed var(--borda-forte);
  font-size: .84rem;
  color: var(--texto-2);
}
.notif-estado span { flex: 1; min-width: 200px; }

/* ================================================== fixadas e Ctrl+F */
.msg-fixada { font-size: .72rem; cursor: default; }
.msg-acao.ligado { color: var(--amarelo); }

.busca { display: grid; gap: 10px; }
.busca-linha { display: flex; gap: 8px; flex-wrap: wrap; }
.busca-campo, .busca-escopo {
  padding: 10px 12px;
  background: var(--fundo-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  color: var(--texto);
  font: inherit;
}
.busca-campo { flex: 1 1 260px; min-width: 0; }
.busca-escopo { flex: 0 1 240px; min-width: 0; }
.busca-campo:focus, .busca-escopo:focus { outline: none; border-color: var(--roxo); }
.busca-info { color: var(--texto-3); }
.busca-lista { display: grid; gap: 6px; max-height: 56vh; overflow-y: auto; padding-right: 2px; }
.busca-vazio { margin: 6px 0; color: var(--texto-3); }
.achado {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: var(--raio);
  background: var(--superficie-2);
  border: 1px solid transparent;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.achado:hover, .achado:focus-visible { border-color: var(--roxo); outline: none; }
.achado-corpo { flex: 1; min-width: 0; }
.achado-topo { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.achado-topo b { font-size: .9rem; }
.achado-topo small { color: var(--texto-3); font-size: .74rem; }
.achado-texto { margin: 2px 0 0; font-size: .9rem; color: var(--texto-2); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 7.5em; overflow: hidden; }
.achado-texto mark { background: rgba(245, 181, 68, .3); color: var(--texto); border-radius: 3px; padding: 0 1px; }
.achado-acoes { display: flex; flex-direction: column; gap: 4px; flex: none; }
.achado-acoes .btn { padding: 4px 10px; font-size: .78rem; }

/* ================================================ cargos e categorias */
/* Lista de membros separada por cargo, Online e Offline (como no Discord). */
.membros-grupo {
  margin: 14px 8px 4px;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texto-3);
}
.membros-grupo:first-child { margin-top: 4px; }
.membro-coroa { margin-left: 5px; font-size: .78rem; }

/* Categorias de canais na lateral. */
.categoria-titulo { margin-top: 10px; }
.categoria-seta {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  text-transform: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  padding: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.categoria-seta:hover { color: var(--texto); }
.categoria-titulo .grupo-add + .grupo-add { margin-left: 2px; }

/* Arrastar alguém da voz para outro canal. */
.voz-pessoa[draggable='true'] { cursor: grab; }
.voz-pessoa.arrastando-voz { opacity: .45; }
.item.alvo-voz { outline: 2px dashed var(--verde); outline-offset: -2px; background: rgba(63, 207, 142, .1); }

/* Cartão de perfil: cargos da pessoa e o que dá para fazer com ela. */
.perfil-gerencia { display: grid; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--borda); }
.perfil-sub {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texto-3);
}
.cargo-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.cargo-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border: 1px dashed var(--borda-forte);
  border-radius: 999px;
  background: transparent;
  color: var(--texto-3);
  font: inherit;
  font-size: .76rem;
  cursor: pointer;
}
.cargo-chip.ativo { border-style: solid; background: var(--superficie-2); color: var(--texto); }
.cargo-chip.fixo { cursor: default; }
.cargo-chip:disabled { opacity: 1; }
.cargo-bola { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.perfil-botoes { display: flex; flex-wrap: wrap; gap: 6px; }
.perfil-botoes .btn { padding: 5px 10px; font-size: .78rem; }
.perfil-mover {
  padding: 5px 8px;
  background: var(--fundo-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  color: var(--texto);
  font: inherit;
  font-size: .78rem;
  max-width: 100%;
}

/* "Cargos e permissões". */
.cargos-lista { display: grid; gap: 6px; margin-top: 8px; max-height: 52vh; overflow-y: auto; }
.cargo-linha { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--raio); background: var(--superficie-2); }
.cargo-linha .cargo-bola { width: 14px; height: 14px; }
.cargo-linha-txt { flex: 1; min-width: 0; }
.cargo-linha-txt b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cargo-linha-txt small { color: var(--texto-3); font-size: .74rem; }
.cargo-linha .icone-btn { width: 28px; height: 28px; }
.cargo-linha .btn { padding: 4px 10px; font-size: .78rem; }
.cargo-editor { display: grid; gap: 12px; }
.cargo-cor { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .88rem; }
.cargo-cor input[type='color'] { width: 44px; height: 30px; padding: 0; border: 1px solid var(--borda); border-radius: 6px; background: none; }
.cargo-check { display: flex; align-items: center; gap: 6px; font-size: .86rem; cursor: pointer; }
.cargo-perms { display: grid; gap: 6px; }
.cargo-perm { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: var(--raio); background: var(--superficie-2); cursor: pointer; }
.cargo-perm input { margin-top: 3px; accent-color: var(--roxo); flex: none; }
.cargo-perm b { display: block; font-size: .88rem; }
.cargo-perm small { display: block; color: var(--texto-3); font-size: .78rem; line-height: 1.4; }
.cargo-perm:has(input:disabled) { opacity: .5; cursor: not-allowed; }

/* Menu da sala: cargos, categoria, apelido. */
.sala-opcoes { display: grid; gap: 6px; margin-top: 12px; }
.sala-opcoes .btn { justify-content: flex-start; text-align: left; }
.campo-input {
  width: 100%;
  padding: 10px 12px;
  background: var(--fundo-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  color: var(--texto);
  font: inherit;
}
.campo-input:focus { outline: none; border-color: var(--roxo); }
.cargo-linha .icone-btn:disabled { opacity: .25; cursor: default; }