/* Visual do VisTalk (web e app desktop): limpo, em camadas e com cara de jogo — a mesma
   leitura do Discord (trilha mais escura, lateral, conversa um tom acima) com
   o roxo do VisTalk nos destaques.

   Só cores derivadas dos tokens (--fundo, --superficie, --roxo…): os temas de
   cor (shared/client/tema.js) continuam valendo sem regra extra. Animação só
   em transform/opacity e só onde informa algo (falando, ao vivo). */

/* Tema padrão: grafite mais profundo e neutro, para o roxo e o vermelho do
   AO VIVO saltarem. Os outros temas trazem as próprias superfícies. */
:root:not([data-tema]) {
  --fundo:        #0c0c10;
  --fundo-2:      #121218;
  --superficie:   #1a1a22;
  --superficie-2: #22222c;
  --superficie-3: #2c2c38;
  --borda:        #262631;
  --borda-forte:  #383846;
  --texto:        #f1f1f6;
  --texto-2:      #a7a8b8;
  --texto-3:      #6e6f80;
  --roxo:         #8160ff;
  --roxo-forte:   #6b48f5;
}

/* A conversa fica um tom acima da lateral: é o que dá profundidade. */
:root { --chao: color-mix(in oklab, var(--fundo-2) 50%, var(--superficie)); }

/* ------------------------------------------------------------- rolagem */
* { scrollbar-width: thin; scrollbar-color: var(--superficie-3) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--superficie-3); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ------------------------------------------------------- trilha de salas */
.trilha { background: var(--fundo); gap: 8px; }
.trilha-sep { width: 28px; background: var(--borda-forte); }

/* Círculo que vira "quadrado arredondado" no hover e na sala aberta. */
.bolha {
  border-radius: 50%;
  animation: none;
  transition: border-radius .18s ease, background-color .18s ease, transform .12s ease;
}
.bolha:hover, .bolha.ativa { border-radius: 16px; transform: none; }
.bolha.ativa { box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--roxo) 70%, transparent); }
.bolha-inicio { background: var(--superficie-2); color: var(--texto); }
.bolha-inicio:hover, .bolha-inicio.ativa { background: var(--roxo); color: #fff; }
.bolha-nova { background: var(--superficie); }

/* ------------------------------------------------------------- lateral */
.lateral { background: var(--fundo-2); border-right: 0; }
.lateral-topo {
  height: 52px;
  border-bottom: 0;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .35), 0 2px 6px -2px rgba(0, 0, 0, .25);
  position: relative;
  z-index: 1;
}
.lateral-topo h2 { font-size: 1rem; font-weight: 800; letter-spacing: -.01em; }

.grupo-titulo {
  font-size: .68rem;
  letter-spacing: .08em;
  padding: 16px 8px 6px;
}
.grupo-titulo:hover { color: var(--texto-2); }

.item { border-radius: 8px; padding: 7px 10px; font-weight: 600; }
.item:hover { transform: none; background: var(--superficie); }
/* Canal aberto: faixa de luz roxa à esquerda, sem pesar a lista. */
.item.ativo {
  color: var(--texto);
  background: linear-gradient(90deg, var(--roxo-suave), transparent 85%), var(--superficie-2);
  box-shadow: inset 2px 0 0 var(--roxo);
}
.item.ativo .canal-simbolo { color: var(--roxo); }

.voz-pessoa { padding: 5px 10px 5px 30px; border-radius: 8px; }
.voz-pessoa .nome { font-weight: 600; }
.voz-pessoa.falando .nome { color: var(--texto); }

/* ------------------------------------- barra de voz + você (cartão no pé) */
/* As duas viram um cartão só, flutuando no pé da lateral. */
.voz-barra {
  margin: 0 8px;
  padding: 10px 10px 8px;
  border: 0;
  border-radius: 12px 12px 0 0;
  background: var(--fundo);
  box-shadow: none;
}
.voz-barra.falando { box-shadow: inset 0 0 0 1px rgba(63, 207, 142, .4); }
.voz-info b { color: var(--verde); font-weight: 800; }
.voz-barra.conectando .voz-info b { color: var(--amarelo); }
.voz-barra.conectando .voz-info small::after { content: ''; }
.voz-barra.conectando .voz-controles .icone-btn:not(.voz-desligar) { opacity: .45; pointer-events: none; }
.voz-controles .icone-btn { height: 34px; border-radius: 9px; background: var(--superficie); }
.voz-controles .voz-desligar { background: var(--vermelho); color: #fff; }

.eu-barra {
  margin: 0 8px 8px;
  padding: 8px 8px 8px 10px;
  border: 0;
  border-radius: 12px;
  background: var(--fundo);
}
.voz-barra:not(.oculto) + .eu-barra {
  border-radius: 0 0 12px 12px;
  box-shadow: inset 0 1px 0 var(--borda);
}
.voz-barra:not(.oculto) { margin-top: 8px; }
.eu-barra { gap: 7px; }
.eu-barra .nome b { font-weight: 800; }
.eu-barra .icone-btn { width: 30px; height: 30px; flex: none; }

/* ------------------------------------------------------ área principal */
.principal { background: var(--chao); }
.amigos-area { background: var(--chao); }
.principal-topo {
  height: 52px;
  border-bottom: 0;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .35), 0 2px 6px -2px rgba(0, 0, 0, .25);
  position: relative;
  z-index: 2;
}
.amigos-topo {
  height: 52px;
  border-bottom: 0;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .35), 0 2px 6px -2px rgba(0, 0, 0, .25);
}
.principal-topo h3 { font-weight: 800; font-size: 1rem; }
.principal-topo .sep { font-size: 1.25rem; font-weight: 500; color: var(--texto-3); }
.icone-btn { border-radius: 8px; }

/* O espelho da voz no topo: "sair" sempre vermelho — sem hover no celular,
   cinza ele não parecia um botão de desligar. */
#btn-desligar-topo { background: var(--vermelho); color: #fff; margin-left: 2px; }
#btn-desligar-topo:hover { background: #d9434a; color: #fff; }
.principal.em-voz .voz-topo { border-right-color: var(--borda-forte); }

/* ---------------------------------------------------------------- chat */
.msg { animation: none; border-radius: 6px; }
.msg:hover { background: rgba(0, 0, 0, .14); }
.msg-cab b { font-weight: 800; }
.msg-texto { color: color-mix(in oklab, var(--texto) 88%, var(--texto-2)); }

.compositor { padding: 4px 18px 18px; }
.compositor-caixa {
  background: var(--superficie-2);
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 10px 10px 10px 14px;
  align-items: center;
}
.compositor-caixa:focus-within {
  border-color: color-mix(in srgb, var(--roxo) 55%, transparent);
  box-shadow: 0 0 0 3px var(--roxo-suave);
}
#btn-enviar { padding: 8px 16px; border-radius: 9px; }

/* ------------------------------------------------------------- membros */
.membros-col { background: var(--fundo-2); border-left: 0; }
.membros-col-titulo { padding-top: 18px; letter-spacing: .08em; }

/* ======================================================== selo AO VIVO
   Pílula vermelha com brilho e um ponto pulsando: dá para achar quem está
   transmitindo de relance, como no Twitch/Discord. */
.selo-live,
.palco-barra .ao-vivo, .desk-live-topo .ao-vivo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px 4px 7px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff4d6d 0%, #e8173f 100%);
  color: #fff;
  font-size: .6rem;
  font-weight: 900;
  letter-spacing: .1em;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 3px 12px -2px rgba(255, 45, 85, .6);
}
.selo-live::before,
.palco-barra .ao-vivo::before,
.desk-live-topo .ao-vivo::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px #fff;
  animation: ao-vivo-ponto 1.4s ease-in-out infinite;
}
@keyframes ao-vivo-ponto { 50% { opacity: .35; transform: scale(.65); } }
.selo-live:hover {
  filter: none;
  transform: translateY(-1px) scale(1.05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 6px 18px -2px rgba(255, 45, 85, .8);
}
/* O seu próprio: mesma pílula, só contornada (informa, não convida). */
.selo-live.meu {
  background: rgba(255, 77, 109, .12);
  color: #ff6b85;
  text-shadow: none;
  box-shadow: inset 0 0 0 1px rgba(255, 77, 109, .55);
}
.selo-live.meu::before { background: #ff4d6d; box-shadow: 0 0 6px #ff4d6d; }
.selo-live.meu:hover { transform: none; box-shadow: inset 0 0 0 1px rgba(255, 77, 109, .55); }
.palco-barra .ao-vivo, .desk-live-topo .ao-vivo { font-size: .66rem; padding: 5px 10px 5px 8px; }

@media (prefers-reduced-motion: reduce) {
  .selo-live::before, .palco-barra .ao-vivo::before, .desk-live-topo .ao-vivo::before { animation: none; }
}

/* ============================================================== celular */
@media (max-width: 900px) {
  /* No topo cabem o essencial da voz: microfone, som e sair. O resto
     (sons, câmera, tela) continua na barra de voz da gaveta. */
  #btn-sons-topo, #btn-camera-topo, #btn-transmitir-voz-topo { display: none; }
  .principal-topo h3 { min-width: 3ch; flex: 0 1 auto; }
  .voz-barra { margin: 8px 8px 0; }
}

/* =========================================================== app desktop
   As mesmas camadas da web, com os nomes do desktop (desktop/index.html).
   Os prefixos `.desk-*` vencem as regras de desktop.css, carregado antes. */
.desk-topo { background: var(--fundo); border-bottom: 0; }

.desk-trilha { background: var(--fundo); border-right: 0; gap: 8px; }
#desk-lista-bolhas { gap: 8px; }
.desk-trilha .trilha-sep { width: 28px; background: var(--borda-forte); }
.desk-trilha .bolha {
  border-radius: 50%;
  transition: border-radius .18s ease, background-color .18s ease, transform .12s ease;
}
.desk-trilha .bolha:hover, .desk-trilha .bolha.ativa { border-radius: 16px; transform: none; }
.desk-trilha .bolha-nova { background: var(--superficie); }

.desk-lateral { background: var(--fundo-2); border-right: 0; }
.desk-lateral-topo {
  min-height: 52px;
  border-bottom: 0;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .35), 0 2px 6px -2px rgba(0, 0, 0, .25);
  position: relative;
  z-index: 1;
}
.desk-lateral-topo h2 { font-size: 1rem; font-weight: 800; letter-spacing: -.01em; }
.desk-lateral .grupo-titulo { padding: 16px 12px 6px; letter-spacing: .08em; }

.desk-principal, .desk-chat-area, .desk-amigos { background: var(--chao); }
.desk-chat-area { border-top: 0; }
.desk-chat-topo, .desk-dm-topo {
  border-bottom: 0;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .35), 0 2px 6px -2px rgba(0, 0, 0, .25);
  position: relative;
  z-index: 1;
}
.desk-chat-titulo, .desk-dm-topo b { font-weight: 800; }

.desk-chat-form { padding: 4px 18px 18px; }
.desk-chat-caixa {
  background: var(--superficie-2);
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 5px 8px 5px 10px;
}
.desk-chat-caixa:focus-within {
  border-color: color-mix(in srgb, var(--roxo) 55%, transparent);
  box-shadow: 0 0 0 3px var(--roxo-suave);
}

.desk-membros-titulo { padding-top: 18px; letter-spacing: .08em; }