/* App de comunidades: as quatro colunas (trilho, canais, conteudo, membros),
   o chat, os modais e os breakpoints que transformam as colunas em gavetas.

   Ultimo da fila de proposito: e o arquivo mais novo e varias regras daqui
   ajustam elementos declarados acima. */

/* ===========================================================================
   App de comunidades
   ---------------------------------------------------------------------------
   Quatro colunas fixas com o conteudo rolando no meio. A largura das colunas
   laterais e' fixa de proposito: sao listas de itens curtos, e deixa-las
   elasticas so faria o chat encolher em tela pequena -- justamente a parte que
   precisa de espaco.

   Cada coluna rola sozinha (`min-height: 0` em todo filho do grid), senao a
   pagina inteira ganharia barra de rolagem e o composer do chat sairia da tela.
   =========================================================================== */

.app-body {
  overflow: hidden;
}

.app {
  display: grid;
  /* A quarta trilha e' `auto`, e nao 240px: escondida, a coluna de membros sai
     do fluxo (`display: none`) e a trilha encolhe para zero em vez de deixar
     uma faixa vazia ao lado do conteudo -- que era o que aparecia na chamada e
     na tela de Inicio. A largura fixa mora na propria coluna. */
  grid-template-columns: 72px var(--w-canais, 240px) minmax(0, 1fr) auto;
  height: 100vh;
  height: 100dvh;
}

.app > * {
  min-height: 0;
  min-width: 0;
}

/* Sem comunidade ativa (tela de Inicio) a coluna 2 nao fica vazia nem sai do
   grid: ela vira a aba de amigos (ver .painel-amigos). O desenho de colunas
   e' o mesmo nos dois casos -- o que troca la dentro e' qual dos dois paineis
   esta visivel. */

/* --- Coluna 1: trilho de comunidades --- */

.rail {
  background: var(--color-rail);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 0;
  overflow-y: auto;
  scrollbar-width: none;
}

.rail::-webkit-scrollbar {
  display: none;
}

.rail-lista {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

/* ---------------------------------------------------------------------------
   Arrasto de reordenacao (ver ordenar-arrastando.js). Sao tres marcas ao mesmo
   tempo, cada uma respondendo uma pergunta diferente:

     .arrasto-fantasma   o QUE esta na mao -- copia do item colada no ponteiro
     .arrastando         PARA ONDE vai -- o vao que o item de verdade abriu na
                         lista, ja no lugar em que ele cai se soltar agora
     .assentou           ONDE caiu -- um pulso curto, porque a copia e o vao
                         somem no mesmo quadro e sem isso a lista volta a ser
                         uma lista parada

   O item de verdade continua sendo o que anda entre os irmaos; a copia e' so
   pintura, e nao recebe clique.
   --------------------------------------------------------------------------- */

body.arrastando-lista {
  cursor: grabbing;
  user-select: none;
}

/* A copia nao recebe ponteiro, entao o mouse passa por cima dos botoes de
   baixo e o cartao de "quem esta em chamada" abre no meio do arrasto. */
body.arrastando-lista .rail-cartao {
  display: none;
}

.arrasto-fantasma {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 90;
  margin: 0;
  pointer-events: none;
  opacity: 0.95;
  box-shadow: 4px 4px 0 var(--noite);
}

/* A pilula de "comunidade aberta" (`.rail-item::before`) e' ancorada no
   trilho: na copia solta ela vira um risco flutuando ao lado do ponteiro. */
.arrasto-fantasma::before {
  display: none;
}

/* O vao: tracejado e vazio de proposito. Deixar o icone visivel aqui daria
   duas copias do mesmo item na tela ao mesmo tempo, e a duvida sobre qual das
   duas e' a posicao de verdade e' justamente o que este desenho resolve. */
.rail-comunidade.arrastando {
  background: transparent;
  color: transparent;
  outline: 2px dashed var(--color-muted-foreground);
  outline-offset: -2px;
}

.rail-comunidade.arrastando img {
  opacity: 0;
}

.canal-linha.arrastando {
  border-radius: 6px;
  outline: 1px dashed var(--color-muted-foreground);
  outline-offset: -1px;
  opacity: 0.5;
}

@keyframes ordem-assentou {
  from {
    box-shadow: 0 0 0 2px var(--color-accent);
  }

  to {
    box-shadow: 0 0 0 2px transparent;
  }
}

.assentou {
  animation: ordem-assentou 420ms ease-out;
}

.rail-item {
  position: relative;
  width: 48px;
  height: 48px;
  min-height: 0;
  padding: 0;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  line-height: 1;
  background: var(--color-sidebar);
  color: var(--color-foreground);
  /* Parte de quadrado arredondado e vira circulo no hover. E' o mesmo gesto do
     Discord, e serve de confirmacao de que o item e' clicavel sem tooltip. */
  border-radius: 16px;
  transition: border-radius var(--transition-fast), background var(--transition-fast),
    color var(--transition-fast), box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

/* As duas tintas do cartaz: roxo e' "posso ir ali" (hover, foco), verde e'
   "estou aqui" (aberto). O icone vira a cor do chao sobre a tinta cheia, para
   nao sumir.

   Os seletores levam `:not(:disabled)` de proposito: sem ele o
   `button:hover:not(:disabled)` do base.css e' mais especifico, troca o fundo
   pelo cinza translucido e deixa o icone escuro sobre escuro.

   Hover so' em quem tem mouse: no toque o :hover gruda depois do tap e o
   botao ficava roxo ate' tocar em outro lugar. */
@media (hover: hover) {
  .rail-item:hover:not(:disabled) {
    border-radius: 14px;
    background: var(--roxo);
    color: var(--noite);
  }
}

.rail-item:focus-visible:not(:disabled) {
  border-radius: 14px;
  background: var(--roxo);
  color: var(--noite);
}

.rail-item.ativo:not(:disabled) {
  border-radius: 14px;
  background: var(--verde);
  color: var(--noite);
}

/* Comunidade tem cor (ou imagem) propria, entao a tinta nao pode cobrir o
   fundo: ela vira a folga de registro atras do item. */
.rail-comunidade,
.rail-comunidade:is(:hover, :focus-visible, .ativo):not(:disabled) {
  background: var(--cor-comunidade, var(--color-sidebar));
  color: var(--tinta);
}

@media (hover: hover) {
  .rail-comunidade:hover:not(:disabled) {
    box-shadow: 3px 3px 0 var(--roxo);
  }
}

.rail-comunidade:focus-visible:not(:disabled) {
  box-shadow: 3px 3px 0 var(--roxo);
}

.rail-comunidade.ativo:not(:disabled) {
  box-shadow: 3px 3px 0 var(--verde);
}

/* Botao de papel: no clique (e, na aberta, ja' no hover) o item encosta no
   registro e a folga zera -- o mesmo gesto do `.primary:active`. A pilula
   volta a mesma distancia para ficar parada na borda do rail. */
.rail-comunidade:active:not(:disabled),
.rail-comunidade.ativo:focus-visible:not(:disabled) {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--verde);
}

@media (hover: hover) {
  .rail-comunidade.ativo:hover:not(:disabled) {
    transform: translate(3px, 3px);
    box-shadow: 0 0 0 var(--verde);
  }

  .rail-comunidade.ativo:hover::before {
    translate: -3px -3px;
  }
}

.rail-comunidade:active::before,
.rail-comunidade.ativo:focus-visible::before {
  translate: -3px -3px;
}

.rail-comunidade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* Pilula clara a esquerda marcando a comunidade aberta. Cresce de 8px (mouse
   em cima) para 20px (aberta): o mesmo elemento diz duas coisas diferentes. */
.rail-item::before {
  content: '';
  position: absolute;
  left: -12px;
  width: 4px;
  height: 0;
  border-radius: 0 4px 4px 0;
  background: var(--color-foreground);
  transition: height var(--transition-fast), translate var(--transition-fast);
}

@media (hover: hover) {
  .rail-item:hover::before {
    height: 8px;
  }
}

.rail-item.ativo::before {
  height: 20px;
}

.rail-acao {
  font-size: 1.5rem;
  color: var(--color-accent);
}

.rail-acao svg,
.rail-inicio svg {
  width: 22px;
  height: 22px;
}

.rail-sep {
  width: 32px;
  height: 2px;
  border-radius: 1px;
  background: var(--color-border);
  flex: none;
}

/* Bolinha de nao lidas, no canto de baixo do icone.

   O anel que separa a bolinha do icone e' `box-shadow` e nao `border`: a
   borda entra na altura de 18px e come o numero por dentro, enquanto o anel
   por fora deixa o mesmo espaco interno em "1" e em "99+". `border-box` no
   min-width pela mesma razao -- o padding conta junto, entao a pilula cresce
   simetrica quando ganha o segundo digito em vez de virar um oval torto. */
.rail-badge {
  position: absolute;
  right: -3px;
  bottom: -3px;
  box-sizing: border-box;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--color-destructive);
  box-shadow: 0 0 0 3px var(--color-rail);
  color: var(--noite);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rail-badge.mencao {
  background: var(--color-warning);
  color: var(--noite);
}

/* Comunidade silenciada pelo botao direito. Apagada em vez de marcada com um
   sino cortado: o icone ja' disputa 48px com a bolinha de mencao, e menos
   contraste ja' diz "esta aqui, mas nao me chama". Volta ao normal com o mouse
   em cima e enquanto esta aberta -- nao ha' o que esconder de quem esta' nela. */
.rail-comunidade.mudo {
  opacity: 0.45;
  transition: opacity var(--transition-fast), border-radius var(--transition-fast), background var(--transition-fast);
}

.rail-comunidade.mudo:hover,
.rail-comunidade.mudo.ativo {
  opacity: 1;
}

/* Menu do botao direito na comunidade. `fixed` porque nasce no <body>: `.rail`
   rola, e ancorado la dentro o menu seria cortado na borda da coluna. */
.menu-trilho {
  position: fixed;
  z-index: 80;
  width: 232px;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-card);
  color: var(--color-card-foreground);
  box-shadow: 4px 4px 0 var(--noite);
}

.menu-trilho-titulo {
  margin: 0;
  padding: 0 0.3rem;
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.menu-trilho-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.45rem 0.5rem;
  border: none;
  border-radius: var(--control-radius);
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 0.85rem;
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.menu-trilho-item:hover,
.menu-trilho-item:focus-visible {
  background: var(--color-secondary-hover);
}

.menu-trilho-nota {
  margin: 0;
  padding: 0 0.5rem 0.15rem;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--color-muted-foreground);
}

/* Cartao de quem esta em chamada, aberto pelo mouse em cima da comunidade.
   Mora no <body> (ver lobby.js): `.rail` rola, e ancorado la dentro ele seria
   cortado na borda da coluna. Por isso `position: fixed` e coordenadas
   calculadas no script. */
.rail-cartao {
  position: fixed;
  z-index: 60;
  min-width: 15rem;
  max-width: 20rem;
  max-height: 60vh;
  overflow-y: auto;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-elevado);
  box-shadow: 4px 4px 0 var(--noite);
  /* O cartao e' informativo: deixar o ponteiro atravessa-lo evita que ele
     roube o hover do proprio botao que o abriu e pisque sem parar. */
  pointer-events: none;
}

.rail-cartao-titulo {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-foreground);
}

.rail-cartao-sala + .rail-cartao-sala {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--color-border);
}

.rail-cartao-sala-nome {
  font-family: var(--font-sans);
  margin: 0 0 0.35rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted-foreground);
}

.rail-cartao-pessoa {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.15rem 0;
}

.rail-cartao-nome {
  flex: 1;
  min-width: 0;
  font-size: 0.85rem;
  color: var(--color-foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rail-cartao-selos {
  display: flex;
  gap: 0.2rem;
  flex: none;
}

/* Selo de midia (microfone, camera, tela). Nasceu no cartao do trilho e hoje
   serve tambem a lista de quem esta no canal de voz -- por isso o nome nao
   fala mais em cartao. */
.midia-selo {
  font-size: 0.8rem;
  line-height: 1;
}

.rail-cartao-vazio {
  margin: 0;
  font-size: 0.8rem;
  color: var(--color-muted-foreground);
}

/* --- Divisores arrastaveis das colunas 2 e 4 --- */

.divisor-coluna {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 5;
  width: 8px;
  cursor: col-resize;
  touch-action: none;
}
.divisor-canais { right: -4px; }
.divisor-membros { left: -4px; }
/* O filete so' acende com o mouse em cima ou durante o arrasto, na cor do foco. */
.divisor-coluna::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 3px;
  width: 2px;
  border-radius: 2px;
  background: var(--roxo);
  opacity: 0;
  transition: opacity var(--transition-fast);
}
@media (hover: hover) {
  .divisor-coluna:hover::after { opacity: 0.8; }
}
.divisor-coluna:focus-visible::after,
.divisor-coluna.arrastando::after { opacity: 1; }
body.arrastando-coluna { cursor: col-resize; user-select: none; }
body.arrastando-coluna iframe { pointer-events: none; }

/* Coluna de membros recolhida: sobra uma faixa fina com a seta que a reabre. */
.membros-aba-recolhida { display: none; }
.coluna-membros.recolhida { width: 34px; }
.coluna-membros.recolhida .membros-abas,
.coluna-membros.recolhida .membros-lista,
.coluna-membros.recolhida .ranking-lista,
.coluna-membros.recolhida .divisor-membros { display: none; }
.coluna-membros.recolhida .membros-aba-recolhida {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 42px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-muted-foreground);
  font-size: 1rem;
}
.coluna-membros.recolhida .membros-aba-recolhida:hover { background: var(--color-sidebar-hover); color: var(--color-foreground); }
.membros-seta {
  display: flex;
  align-items: center;
  padding: 0 0.6rem;
  color: var(--color-muted-foreground);
  font-size: 1rem;
}

/* Botoes da gaveta de membros: so' existem ate' 1100px. */
.membros-fechar,
.abrir-membros { display: none; }

@media (max-width: 1100px) {
  .divisor-coluna, .membros-aba-recolhida, .membros-seta { display: none !important; }
  .coluna-membros.recolhida { width: 240px; }
  .coluna-membros.recolhida .membros-abas { display: flex; }
  .coluna-membros.recolhida .membros-lista { display: block; }

  .membros-fechar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 42px;
    min-height: 42px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: var(--color-muted-foreground);
    font-size: 1.3rem;
  }
  .membros-fechar:hover:not(:disabled) {
    background: var(--color-sidebar-hover);
    color: var(--color-foreground);
  }
}

/* --- Coluna 2: canais --- */

.coluna-canais {
  position: relative;
  background: var(--color-sidebar);
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--color-divisa);
}

.comunidade-header {
  position: relative;
  flex: none;
  border-bottom: 1px solid var(--color-divisa);
}

.comunidade-titulo {
  width: 100%;
  min-height: 48px;
  padding: 0 0.9rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  border-radius: 0;
  background: transparent;
  font-weight: 600;
  font-size: 0.95rem;
  text-align: left;
}

.comunidade-titulo:hover {
  background: var(--color-sidebar-hover);
}

/* No Inicio o titulo vira rotulo: sem hover, sem cursor de clique e sem
   chevron -- nao ha menu de comunidade para abrir. */
.comunidade-titulo.inerte {
  cursor: default;
  pointer-events: none;
}

.comunidade-titulo.inerte .chevron {
  display: none;
}

/* Casinha do Inicio: o mesmo desenho do botao do trilho, para o titulo e o
   trilho dizerem que e' o mesmo lugar. So' aparece no Inicio. */
.titulo-casa {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--color-muted-foreground);
}

.comunidade-titulo:not(.inerte) .titulo-casa {
  display: none;
}

.comunidade-titulo span {
  margin-right: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comunidade-titulo .chevron {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--color-muted-foreground);
}

.canais-lista {
  flex: 1;
  overflow-y: auto;
  padding: 0.6rem 0.5rem 1rem;
}

.canais-dica {
  margin: 0.8rem 0.4rem;
  font-size: 0.8rem;
  color: var(--color-muted-foreground);
  line-height: 1.5;
}

/* --- Coluna 2 no Inicio: aba de amigos ---
   Ocupa o mesmo lugar de `.canais-lista` (os dois se revezam) e reusa o que ja
   existe ali: `.canal-categoria` para os titulos Online/Offline e
   `.canal-badge` para o nao lido. O que e' proprio daqui e' a linha do amigo,
   que tem duas linhas de texto em vez de uma. */

.painel-amigos {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.painel-amigos-topo {
  flex: none;
  margin: 0.6rem 0.5rem 0.4rem;
  min-height: 36px;
  padding: 0 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  border-radius: 6px;
  background: transparent;
  color: var(--color-muted-foreground);
  font-size: 0.92rem;
  font-weight: 600;
  text-align: left;
}

.painel-amigos-topo:hover {
  background: var(--color-sidebar-hover);
  color: var(--color-foreground);
}

.painel-amigos-topo svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.painel-amigos-topo span:first-of-type {
  flex: 1;
}

/* Controle pequeno: muda a altura e o corpo da letra, nunca a caixa -- borda,
   fundo, lupa e foco continuam vindo de base.css. */
.painel-amigos-filtro {
  flex: none;
  margin: 0 0.5rem 0.4rem;
  min-height: var(--control-h-sm);
  padding-top: 0;
  padding-bottom: 0;
  font-size: 0.82rem;
}

.painel-amigos-lista {
  flex: 1;
  overflow-y: auto;
  padding: 0 0.5rem 1rem;
}

/* Mesma razao de `.canal-linha`: o botao de perfil e' irmao do botao da
   conversa, e nao filho, para o hover de um nao acender o outro. */
.amigo-lateral-linha {
  position: relative;
  display: flex;
  align-items: center;
}

.amigo-lateral {
  flex: 1;
  min-width: 0;
  min-height: 40px;
  padding: 0.2rem 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 6px;
  background: transparent;
  color: var(--color-muted-foreground);
  text-align: left;
}

.amigo-lateral:hover {
  background: var(--color-sidebar-hover);
  color: var(--color-foreground);
}

.amigo-lateral.ativo {
  background: var(--color-elevado);
  color: var(--color-foreground);
}

/* Quem esta offline continua na lista -- so' mais apagado, como no Discord. */
.amigo-lateral.offline .avatar-wrap,
.amigo-lateral.offline .amigo-lateral-textos {
  opacity: 0.55;
}

.amigo-lateral:hover.offline .avatar-wrap,
.amigo-lateral:hover.offline .amigo-lateral-textos {
  opacity: 1;
}

.amigo-lateral.nao-lido {
  color: var(--color-foreground);
}

.amigo-lateral.nao-lido strong {
  font-weight: 700;
}

.amigo-lateral.nao-lido::before {
  content: '';
  position: absolute;
  left: -5px;
  width: 4px;
  height: 8px;
  border-radius: 0 4px 4px 0;
  background: var(--color-foreground);
}

.amigo-lateral .avatar-wrap {
  flex: none;
}

.amigo-lateral-textos {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.amigo-lateral-textos strong {
  font-size: 0.88rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.amigo-lateral-textos span {
  font-size: 0.72rem;
  color: var(--color-muted-foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.amigo-lateral-perfil {
  position: absolute;
  right: 0.2rem;
  width: 24px;
  height: 24px;
  min-height: 0;
  padding: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--color-muted-foreground);
  font-size: 1rem;
  line-height: 1;
  opacity: 0;
}

.amigo-lateral-linha:hover .amigo-lateral-perfil,
.amigo-lateral-perfil:focus-visible {
  opacity: 1;
  background: var(--color-elevado);
  color: var(--color-foreground);
}

.canal-categoria {
  font-family: var(--font-sans);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  padding: 0.9rem 0.4rem 0.3rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted-foreground);
}

.canal-categoria-add {
  width: 20px;
  height: 20px;
  min-height: 0;
  padding: 0;
  font-size: 1rem;
  line-height: 1;
  background: transparent;
  color: var(--color-muted-foreground);
}

.canal-categoria-add:hover {
  background: transparent;
  color: var(--color-foreground);
}

/* A engrenagem do canal so aparece com o mouse na LINHA -- por isso ela e'
   irma do botao do canal, e nao filha: dentro dele, passar o mouse para
   alcanca-la ja acenderia o estado de "canal sob o cursor". */
.canal-linha {
  display: flex;
  flex-direction: column;
}

/* A linha do canal em si. Ela e' quem posiciona (o tracinho de nao lido se
   ancora aqui, nao no bloco inteiro) e quem responde ao mouse: passar o
   ponteiro sobre a lista de quem esta na chamada nao acende a engrenagem.
   O realce (hover e canal ativo) tambem e' dela, nao do botao do canal: o ⋯ de
   editar e' irmao do botao e ocupa largura mesmo invisivel, entao pintar so' o
   botao cortava o fundo antes do fim da coluna. */
.canal-linha-topo {
  position: relative;
  display: flex;
  align-items: center;
  border-radius: 6px;
}

.canal-linha-topo:hover {
  background: var(--color-sidebar-hover);
}

.canal-linha-topo:has(.canal-item.ativo) {
  background: var(--color-elevado);
}

.canal-item {
  flex: 1;
  min-width: 0;
  min-height: 34px;
  padding: 0 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  border-radius: 6px;
  background: transparent;
  color: var(--color-muted-foreground);
  font-size: 0.9rem;
  font-weight: 500;
  text-align: left;
}

.canal-linha-topo:hover .canal-item,
.canal-item.ativo {
  color: var(--color-foreground);
}

/* O botao do canal nao pinta fundo proprio: quem pinta e' a linha. Precisa do
   `:not(:disabled)` para ganhar do `button:hover` de base.css, que e' mais
   especifico que a classe sozinha. */
.canal-item:hover:not(:disabled) {
  background: transparent;
}

.canal-item.nao-lido {
  color: var(--color-foreground);
  font-weight: 600;
}

/* Segunda pista do nao lido, por posicao e nao so por peso de fonte: um
   tracinho encostado na borda esquerda da coluna. */
.canal-item.nao-lido::before {
  content: '';
  position: absolute;
  left: -5px;
  width: 4px;
  height: 8px;
  border-radius: 0 4px 4px 0;
  background: var(--color-foreground);
}

.canal-icone {
  flex: none;
  width: 18px;
  display: inline-flex;
  justify-content: center;
  font-size: 1rem;
  opacity: 0.8;
}

.canal-nome {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Contador de nao lidas na lista de canais. `box-sizing: border-box` porque o
   `min-width` precisa contar o padding: sem isso "9" e "99+" ficam com sobras
   diferentes de cada lado. */
.canal-badge {
  flex: none;
  box-sizing: border-box;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--color-destructive);
  color: var(--noite);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  justify-content: center;
}

.canal-badge.mencao {
  background: var(--color-warning);
  color: var(--noite);
}

.canal-voz-contagem {
  flex: none;
  font-size: 0.72rem;
  color: var(--color-muted-foreground);
  font-variant-numeric: tabular-nums;
}

/* Quem esta no canal de voz, listado embaixo dele. Recuado ate' embaixo do
   nome do canal (18px do icone + 0.4rem do gap + 0.5rem do padding do botao,
   menos o 0.25rem de padding do proprio botao da pessoa) para a coluna de
   fotos comecar onde o texto do canal comeca. */
.canal-voz-gente {
  list-style: none;
  margin: 0.1rem 0 0.2rem;
  padding: 0 0.25rem 0 calc(0.5rem + 18px + 0.4rem - 0.25rem);
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.canal-voz-pessoa {
  width: 100%;
  min-height: 26px;
  padding: 0 0.25rem;
  border-radius: 6px;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  text-align: left;
}

/* Quem esta falando na chamada: anel verde no avatar, no mesmo ritmo do tile
   da sala (acende em 110ms, apaga em 380ms). `outline` e nao `box-shadow` para
   nao brigar com o anel da moldura, que ja usa box-shadow. */
.canal-voz-pessoa .avatar-mini {
  outline: 2px solid transparent;
  outline-offset: 1px;
  transition: outline-color 380ms ease-out, filter 380ms ease-out;
}

.canal-voz-pessoa.is-speaking .avatar-mini {
  outline-color: var(--verde);
  filter: drop-shadow(0 0 4px rgba(74, 236, 125, 0.38));
  transition-duration: 110ms;
}

@media (prefers-reduced-motion: reduce) {
  .canal-voz-pessoa.is-speaking .avatar-mini {
    filter: none;
  }
}

.canal-voz-pessoa:hover:not(:disabled) {
  background: var(--color-sidebar-hover);
}

.canal-voz-pessoa:hover .canal-voz-nome {
  color: var(--color-foreground);
}

.canal-voz-nome {
  flex: 1;
  min-width: 0;
  font-size: 0.8rem;
  color: var(--color-muted-foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.canal-voz-selos {
  flex: none;
  display: flex;
  gap: 0.2rem;
}

.canal-config,
.membro-config {
  width: 26px;
  height: 26px;
  min-height: 0;
  padding: 0;
  margin-right: 0.2rem;
  font-size: 1rem;
  line-height: 1;
  background: transparent;
  color: var(--color-muted-foreground);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.canal-linha-topo:hover .canal-config,
.canal-config:focus-visible,
.membro-linha:hover .membro-config,
.membro-config:focus-visible {
  opacity: 1;
}

/* O balao de chat do canal de voz nao e' ação administrativa escondida --
   fica sempre visível, ao contrário do "⋯" (que só aparece no hover). */
.canal-config.canal-chat-btn {
  opacity: 1;
}

/* Aceso enquanto o chat dele esta' na tela: o mesmo balao fecha (lobby.js,
   sincronizarChatDaVoz). */
.canal-chat-btn[aria-pressed='true'] {
  color: var(--color-accent);
}

.canal-config:hover,
.membro-config:hover {
  background: var(--color-elevado);
  color: var(--color-foreground);
}

.canal-criar {
  width: calc(100% - 0.8rem);
  margin: 0.8rem 0.4rem 0;
  min-height: 34px;
  background: transparent;
  color: var(--color-muted-foreground);
  font-size: 0.85rem;
  text-align: left;
}

.canal-criar:hover {
  background: var(--color-sidebar-hover);
  color: var(--color-foreground);
}

/* --- Painel do usuario (rodape do trilho) --- */

/* Barra de chamada ativa no rodape da coluna de canais (Discord bota o
   status de voz ali, nao no trilho de icones -- estreito demais pros 3
   botoes). So aparece com uma chamada tocando (ver chamadaAtiva em
   lobby.js); o `.canais-lista` acima tem `flex: 1`, entao esta barra so
   ocupa a propria altura e fica presa embaixo sem truque nenhum de layout.
   Reflete o estado de verdade dos botoes dentro do iframe (mesma origem,
   sem duplicar logica) -- ver atualizarIconesChamada e o listener de
   `message`. */
.canal-chamada {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  flex: none;
  padding: 0.5rem 0.55rem 0.6rem;
  background: var(--color-elevado);
  border-top: 1px solid var(--color-border);
}

/* Virou botao (voltar para a tela da chamada), entao desfaz o que a regra
   generica de `button` poe: fundo, altura minima e padding largo nao cabem
   numa linha de status de ~30px. Ocupa a largura toda porque os botoes
   agora ficam na linha de baixo, e nao ao lado. */
.canal-chamada-info {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  width: 100%;
  flex: none;
  padding: 0.3rem 0.4rem;
  min-height: 0;
  border-radius: 8px;
  background: transparent;
  text-align: left;
  color: inherit;
  font-weight: inherit;
}

.canal-chamada-info:hover {
  background: var(--color-secondary);
}

.canal-chamada-voltar-icone {
  flex: none;
  width: 13px;
  height: 13px;
  margin-left: auto;
  opacity: 0.6;
}

/* Ja' estamos vendo a chamada: nao ha' pra onde voltar, entao o botao para de
   se oferecer (continua clicavel, so' nao pisca). */
.canal-chamada.ativo .canal-chamada-info {
  background: var(--color-secondary);
}

.canal-chamada.ativo .canal-chamada-voltar-icone {
  display: none;
}

.canal-chamada-ponto {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
}

.canal-chamada-textos {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  font-size: 0.78rem;
  line-height: 1.3;
}

.canal-chamada-textos strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8rem;
}

.canal-chamada-textos span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-muted-foreground);
}

/* Grid de 3 colunas iguais em vez de circulos apertados no canto: com a
   coluna estreita, o titulo quebrava em duas linhas pra caber ao lado dos
   botoes. Empilhado, cada botao vira um alvo largo. */
.canal-chamada-acoes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.35rem;
  flex: none;
}

.canal-chamada-btn {
  position: relative;
  width: 100%;
  height: 32px;
  min-height: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--control-radius);
  background: var(--color-secondary);
  color: var(--color-foreground);
}

.canal-chamada-btn:hover {
  background: var(--color-border);
}

.canal-chamada-btn svg {
  width: 15px;
  height: 15px;
}

.canal-chamada-btn .icon-off {
  display: none;
}

.canal-chamada-btn.off .icon-on {
  display: none;
}

.canal-chamada-btn.off .icon-off {
  display: block;
}

.canal-chamada-btn.off {
  background: rgba(255, 107, 107, 0.18);
  color: var(--color-destructive);
}

.canal-chamada-sair {
  background: var(--color-destructive);
  color: var(--noite);
}

.canal-chamada-sair:hover {
  background: var(--color-destructive-hover);
}

.painel-usuario {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.5rem;
  background: var(--color-rail);
  border-top: 1px solid var(--color-divisa);
}

.painel-usuario-rail {
  margin-top: auto;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.5rem 0.25rem;
  width: 100%;
  background: transparent;
  border-top: 1px solid var(--color-divisa);
}

/* A loja (Personalizar) fica colada no avatar, no pe' do trilho: ela que
   empurra o rodape para baixo, no lugar da margem automatica dele. */
.rail-loja {
  margin-top: auto;
  margin-bottom: 0.5rem;
}

.rail-loja + .painel-usuario-rail {
  margin-top: 0;
}

/* Catnip vem logo acima da loja e herda o papel de empurrar o rodape. O
   dourado e' a cor da assinatura, a mesma da logo em catnip.html. */
.rail-catnip {
  margin-top: auto;
  margin-bottom: 0.25rem;
  color: #F5C542;
}

.rail-catnip + .rail-loja {
  margin-top: 0;
}

/* No trilho so' cabe o avatar: nome e status viram o `title` do botao. */
.painel-usuario-rail .painel-usuario-textos {
  display: none;
}

.painel-usuario-rail .painel-usuario-eu {
  flex: none;
  justify-content: center;
  padding: 0;
  min-height: 0;
}



.painel-usuario-eu {
  flex: 1;
  min-width: 0;
  min-height: 42px;
  padding: 0.25rem 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  text-align: left;
}

.painel-usuario-eu:hover {
  background: var(--color-sidebar-hover);
}

.painel-usuario-textos {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}

.painel-usuario-textos strong {
  font-size: 0.85rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.painel-usuario-textos span {
  font-size: 0.72rem;
  color: var(--color-muted-foreground);
}

.icone-btn {
  width: 32px;
  height: 32px;
  min-height: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--color-muted-foreground);
  font-size: 1rem;
}

.icone-btn:hover:not(:disabled) {
  background: var(--color-sidebar-hover);
  color: var(--color-foreground);
}

.icone-btn.perigo:hover {
  color: var(--color-destructive);
}

.icone-btn svg {
  width: 18px;
  height: 18px;
}

/* --- Menus suspensos e de contexto --- */

.menu-suspenso,
.menu-contexto {
  z-index: 30;
  min-width: 195px;
  padding: 0.4rem;
  border-radius: 10px;
  background: var(--color-elevado);
  border: 1px solid var(--color-border);
  box-shadow: 4px 4px 0 var(--noite);
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.menu-suspenso {
  position: absolute;
}

/* `fixed` porque e' posicionado a partir do `getBoundingClientRect()` do botao
   que o abriu, e esse retangulo ja e' relativo a janela. */
.menu-contexto {
  position: fixed;
  z-index: 60;
  --menu-dx: 0;
  --menu-dy: -6px;
  transform-origin: top left;
}

/* De onde o menu cresce acompanha o lado em que ele abriu (`data-lado`, posto
   por menu-contexto.js): sai de perto da ancora e volta para ela ao fechar. */
.menu-contexto[data-lado='acima'] {
  --menu-dy: 6px;
  transform-origin: bottom left;
}

.menu-contexto[data-lado='direita'] {
  --menu-dx: -8px;
  --menu-dy: 0;
}

.menu-contexto[data-lado='direita-acima'] {
  --menu-dx: -8px;
  --menu-dy: 0;
  transform-origin: bottom left;
}

.menu-contexto.fechando {
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .menu-contexto {
    animation: menu-abre 160ms cubic-bezier(0.2, 0.9, 0.3, 1.15);
  }

  .menu-contexto.fechando {
    animation: menu-fecha 120ms ease-in forwards;
  }
}

@keyframes menu-abre {
  from {
    opacity: 0;
    transform: translate(var(--menu-dx), var(--menu-dy)) scale(0.95);
  }
}

@keyframes menu-fecha {
  to {
    opacity: 0;
    transform: translate(var(--menu-dx), var(--menu-dy)) scale(0.95);
  }
}

.menu-contexto button .icone {
  font-size: 1rem;
}

#comunidade-menu {
  top: calc(100% + 4px);
  left: 8px;
  right: 8px;
}


.menu-suspenso button,
.menu-contexto button {
  min-height: 34px;
  padding: 0 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 6px;
  background: transparent;
  color: var(--color-foreground);
  font-size: 0.85rem;
  text-align: left;
}

.menu-suspenso button:hover,
.menu-contexto button:hover {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.menu-suspenso button.perigo,
.menu-contexto button.perigo {
  color: var(--color-destructive);
}

.menu-suspenso button.perigo:hover,
.menu-contexto button.perigo:hover {
  background: var(--color-destructive);
  color: var(--noite);
}

/* Marca a opcao selecionada num menu de escolha (ex: nivel de reducao de
   ruido) -- diferente de "perigo", que e' so' cor de acao destrutiva. */
.menu-contexto button.ativo {
  font-weight: 600;
}

.menu-contexto button.ativo::after {
  content: '✓';
  margin-left: auto;
}

.menu-sep {
  height: 1px;
  margin: 0.25rem 0.2rem;
  background: var(--color-border);
}

/* O "Restaurar" do deslizante e' parte do controle de volume, nao mais um
   item da lista: sem isto ele herda `.menu-contexto button` (que vence
   `.volume-menu-reset` por especificidade) e vira uma linha larga com o
   mesmo realce de item de menu, como se escolher "Restaurar" fosse escolher
   um alto-falante. Os dois seletores de classe aqui e' que passam na frente. */
.menu-deslizante .volume-menu-reset {
  width: 100%;
  min-height: 0;
  padding: 0.3rem 0.5rem;
  justify-content: center;
  border: 1px solid var(--color-border);
  background: var(--color-muted);
  font-size: 0.75rem;
}

.menu-deslizante .volume-menu-reset:hover {
  background: var(--color-secondary-hover);
  color: var(--color-foreground);
}

/* --- Coluna 3: conteudo --- */

.coluna-conteudo {
  display: flex;
  flex-direction: column;
  background: var(--color-background);
  overflow: hidden;
}

.coluna-conteudo > section {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* `.hidden` e' `display: none !important`, mas a regra acima e' mais recente e
   igualmente especifica; sem esta linha as tres telas ficariam empilhadas. */
.coluna-conteudo > section.hidden {
  display: none;
}

.conteudo-header {
  position: relative;
  flex: none;
  min-height: 48px;
  padding: 0 0.9rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  border-bottom: 1px solid var(--color-divisa);
}

.conteudo-header h1 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

/* O Inicio ja' tem titulo no topo da coluna 2; repetir aqui era o mesmo nome
   duas vezes lado a lado. O cabecalho so' volta no celular, onde a coluna 2
   vira gaveta e ele carrega o botao que a abre. */
.tela-inicio > .conteudo-header {
  display: none;
}

.conteudo-header .inicio-titulo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-right: auto;
  text-transform: none;
  letter-spacing: 0;
}

.conteudo-header-acoes {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

/* O caminho de volta para a chamada que ja' esta acontecendo com quem esta do
   outro lado desta DM. Tem texto, e nao so' icone, porque ocupa o lugar do
   telefoninho: dois icones de telefone lado a lado -- um que liga e um que
   volta -- seriam a mesma figura querendo dizer duas coisas. */
.chat-voltar-chamada {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 0;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}

.chat-voltar-chamada:hover:not(:disabled) {
  background: var(--color-accent-hover);
}

.chat-voltar-chamada svg {
  width: 15px;
  height: 15px;
}

.chat-titulo {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
}

.chat-titulo-icone {
  margin-right: 0.4rem;
  color: var(--color-muted-foreground);
}

.chat-topico {
  padding-left: 0.7rem;
  border-left: 1px solid var(--color-border);
  font-size: 0.8rem;
  color: var(--color-muted-foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.botao-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.8rem;
  border-radius: var(--control-radius);
  background: var(--color-muted);
  color: var(--color-foreground);
  font-size: 0.85rem;
  text-decoration: none;
  transition: background var(--transition-fast);
}

.botao-link:hover {
  background: var(--color-secondary);
}

.botao-link.primary {
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: 600;
}

/* --- Tela de inicio ---

   Duas colunas: as salas acesas (o que esta' acontecendo) e, ao lado, o que
   da' para fazer dali -- montar uma call e responder o que chegou. Verde so'
   no que esta' ao vivo (sala acesa, selo de tela, a cadeira de entrar); o
   roxo fica com os contadores e o lugar que esta' sendo escolhido. */

.inicio-corpo {
  flex: 1;
  overflow-y: auto;
  padding: 1.4rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.inicio-grade {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 1.4rem;
  align-items: start;
}

.inicio-lateral {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  min-width: 0;
}

.bloco {
  min-width: 0;
}

.bloco h2 {
  font-family: var(--font-sans);
  margin: 0 0 0.7rem;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted-foreground);
}

.bloco-contador {
  color: var(--roxo);
  font-variant-numeric: tabular-nums;
}

.salas-ativas {
  display: grid;
  gap: 0.9rem;
}

/* Icone da comunidade (cabecalho da mesa). */
.card-icone {
  width: 36px;
  height: 36px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: var(--cor-comunidade, var(--color-muted));
  font-size: 1.05rem;
  overflow: hidden;
}

.card-icone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-textos {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  line-height: 1.35;
}

.card-textos strong {
  font-size: 0.95rem;
}

.card-textos span {
  font-size: 0.8rem;
  color: var(--color-muted-foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Sala = mesa: cabecalho, as cadeiras e o botao de entrar. */
.mesa {
  display: flex;
  flex-direction: column;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 16px;
}

.mesa.acesa {
  border-color: rgba(74, 236, 125, 0.4);
}

.mesa-cab {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.9rem 1rem;
}

.mesa-cab .card-textos strong {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mesa-cab .card-textos strong .icone {
  flex: none;
  font-size: 0.9em;
  color: var(--tinta-45);
}

.mesa.acesa .mesa-cab .card-textos strong .icone {
  color: var(--verde);
}

.mesa-estado {
  margin-left: auto;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--tinta-45);
  font-variant-numeric: tabular-nums;
}

.mesa-estado.acesa {
  color: var(--verde);
}

.mesa-pulso {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--verde);
  animation: mesa-pulso 1.8s ease-out infinite;
}

@keyframes mesa-pulso {
  0% {
    box-shadow: 0 0 0 0 rgba(74, 236, 125, 0.55);
  }
  70%,
  100% {
    box-shadow: 0 0 0 7px rgba(74, 236, 125, 0);
  }
}

.mesa-cadeiras {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  padding: 0.2rem 1rem 1rem;
}

.cadeira {
  width: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}

.cadeira-avatar {
  position: relative;
  display: inline-flex;
}

.avatar-cadeira {
  width: 52px;
  height: 52px;
  font-size: 1.1rem;
}

/* Selo de quem esta' compartilhando a tela: encostado no canto do avatar,
   no lugar onde a lista de amigos poe a bolinha de status. */
.cadeira-tela {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 3px solid var(--color-card);
  background: var(--verde);
  color: var(--color-on-accent);
  font-size: 11px;
}

.cadeira-tela .icone {
  stroke-width: 2.5;
}

.cadeira-nome {
  max-width: 100%;
  font-size: 0.76rem;
  color: var(--color-muted-foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cadeira-vaga {
  width: 52px;
  height: 52px;
  min-height: 0;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px dashed var(--color-border);
  background: transparent;
  color: var(--tinta-45);
  font-size: 1.3rem;
}

button.cadeira-vaga {
  border-color: var(--verde);
  color: var(--verde);
  background: rgba(74, 236, 125, 0.12);
}

button.cadeira-vaga:hover:not(:disabled) {
  background: rgba(74, 236, 125, 0.22);
}

.cadeira-vaga.mais-gente {
  border-style: solid;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-muted-foreground);
}

.cadeira-sua .cadeira-nome {
  color: var(--verde);
  font-weight: 700;
}

.mesa-pe {
  display: flex;
  justify-content: flex-end;
  padding: 0 1rem 1rem;
}

.mesa-pe button,
.montar-pe button {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: var(--control-h-md);
  padding: 0 0.9rem;
}

/* Montar uma call: quatro lugares, o + abre a lista de quem pode atender. */
.montar-call {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1rem;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 16px;
}

.lugares {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
}

.lugar {
  position: relative;
  aspect-ratio: 1;
  min-height: 0;
  padding: 0.3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  border-radius: 12px;
  border: 2px dashed var(--color-border);
  background: transparent;
  color: var(--tinta-45);
}

.lugar.cheio {
  border-style: solid;
  background: var(--color-elevado);
  color: var(--color-foreground);
}

.lugar.vago {
  font-size: 1.4rem;
}

.lugar.vago:hover:not(:disabled),
.lugar.vago[aria-expanded='true'] {
  border-color: var(--roxo);
  color: var(--roxo);
  background: rgba(155, 128, 236, 0.15);
}

.avatar-lugar {
  width: 40px;
  height: 40px;
  font-size: 0.95rem;
}

.lugar-nome {
  max-width: 100%;
  font-size: 0.7rem;
  color: var(--color-muted-foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Tirar alguem: o X aparece por cima do lugar so' no hover/foco. */
.lugar-tirar {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--noite);
  color: var(--color-foreground);
  font-size: 10px;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.lugar.cheio:is(:hover, :focus-visible) .lugar-tirar {
  opacity: 1;
}

.montar-escolha {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 220px;
  overflow-y: auto;
  padding: 0.3rem;
  border-radius: 12px;
  background: var(--noite);
  border: 1px solid var(--color-border);
}

.montar-escolha .form-hint {
  margin: 0.4rem 0.5rem;
}

.montar-opcao {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 0;
  padding: 0.45rem 0.6rem;
  border-radius: 10px;
  background: transparent;
  text-align: left;
  font-size: 0.88rem;
}

.montar-opcao .ponto-status {
  border-color: var(--noite);
}

.montar-pe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.montar-pe small {
  font-size: 0.78rem;
  color: var(--tinta-45);
}

/* Movimento: convites e pedidos, cada um com a resposta embaixo. */
.movimento {
  display: flex;
  flex-direction: column;
}

.movimento-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.4rem 0.7rem;
  padding: 0.7rem 0.1rem;
  border-top: 1px solid var(--color-sidebar-hover);
  font-size: 0.86rem;
  color: var(--color-muted-foreground);
}

.movimento-item:first-child {
  border-top: 0;
}

.movimento-texto strong {
  color: var(--color-foreground);
  font-weight: 600;
}

.movimento-icone {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--color-sidebar-hover);
  font-size: 0.9rem;
}

.movimento-convite {
  background: rgba(155, 128, 236, 0.15);
  color: var(--roxo);
}

.movimento-quando {
  font-size: 0.76rem;
  color: var(--tinta-45);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.movimento-acoes {
  grid-column: 2 / -1;
  display: flex;
  gap: 0.4rem;
}

.movimento-acoes button {
  min-height: var(--control-h-sm);
  padding: 0 0.8rem;
  font-size: 0.8rem;
}

/* Abaixo de 1100px as duas colunas nao cabem ao lado da coluna de amigos:
   empilha, com as salas em cima. */
@media (max-width: 1100px) {
  .inicio-grade {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .inicio-corpo {
    padding: 1rem;
  }
}

/* --- Chat --- */

.chat-lista {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 1rem 0 0.5rem;
  display: flex;
  flex-direction: column;
}

.chat-carregando,
.chat-vazio {
  margin: auto;
  padding: 2rem;
  color: var(--color-muted-foreground);
  font-size: 0.9rem;
  text-align: center;
}

.chat-carregar-mais {
  flex: none;
  margin: 0 auto 0.5rem;
  min-height: var(--control-h-sm);
  padding: 0 1rem;
  font-size: 0.8rem;
  background: var(--color-muted);
}

.chat-separador {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 1rem 1.2rem 0.6rem;
  font-size: 0.72rem;
  color: var(--color-muted-foreground);
}

.chat-separador::before,
.chat-separador::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

/* A mensagem e' uma grade de duas colunas: avatar fixo a esquerda, resto a
   direita. A mensagem agrupada reusa a MESMA grade com a coluna do avatar
   vazia, entao o texto continua alinhado com o de cima sem calculo nenhum. */
.msg {
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 0 0.7rem;
  padding: 0.35rem 1.2rem;
  transition: background var(--transition-fast);
}

.msg:hover {
  background: rgba(255, 255, 255, 0.025);
}

.msg + .msg:not(.msg-agrupada) {
  margin-top: 0.65rem;
}

.msg-avatar {
  grid-row: span 2;
  align-self: start;
  margin-top: 2px;
  width: 40px;
  height: 40px;
}

.msg-cabecalho {
  grid-column: 2;
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.msg-autor {
  min-height: 0;
  padding: 0;
  background: transparent;
  color: var(--color-foreground);
  font-weight: 600;
  font-size: 0.92rem;
}

.msg-autor:hover {
  background: transparent;
  text-decoration: underline;
}

.msg-hora {
  font-size: 0.7rem;
  color: var(--color-muted-foreground);
}

/* Na mensagem agrupada a hora ocupa a coluna do avatar e so aparece no hover:
   fixa, deixaria a coluna esquerda cheia de numeros repetidos. */
.msg-hora-lateral {
  grid-column: 1;
  align-self: center;
  text-align: right;
  font-size: 0.65rem;
  color: var(--color-muted-foreground);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.msg-agrupada:hover .msg-hora-lateral {
  opacity: 1;
}

.msg-texto {
  grid-column: 2;
  /* --fonte-chat sai das configuracoes (Aparencia). Base em rem para o zoom
     do navegador continuar valendo por cima da escolha. */
  /* --escala-catnip: fonte do chat de quem assina o Catnip (fontes-catnip.js). */
  font-size: calc(0.93rem * var(--fonte-chat, 1) * var(--escala-catnip, 1));
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.msg-texto a {
  color: var(--color-accent);
}

.msg-editada {
  margin-left: 0.35rem;
  font-size: 0.65rem;
  color: var(--color-muted-foreground);
}

.mencao {
  min-height: 0;
  padding: 0 3px;
  border-radius: 4px;
  background: rgba(155, 128, 236, 0.22);
  color: #D9CEFF;
  font-size: inherit;
  font-weight: 500;
}

.mencao:hover {
  background: rgba(155, 128, 236, 0.42);
}

.mencao-minha {
  background: rgba(240, 178, 50, 0.22);
  color: #FFD587;
}

/* Fundo ambar MAIS barra na borda: a mensagem que cita voce nunca depende so
   de cor para ser achada na rolagem. */
.msg-mencionado {
  background: rgba(240, 178, 50, 0.08);
  box-shadow: inset 3px 0 0 var(--color-warning);
}

.msg-fixada {
  box-shadow: inset 3px 0 0 var(--color-accent);
}

.msg-destacada {
  background: rgba(74, 236, 125, 0.14);
}

.msg-selo-fixada {
  position: absolute;
  top: 0.35rem;
  right: 1.2rem;
  font-size: 0.7rem;
  opacity: 0.6;
}

.msg-citacao {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.2rem;
  min-height: 0;
  padding: 0;
  background: transparent;
  color: var(--color-muted-foreground);
  font-size: 0.78rem;
  text-align: left;
  overflow: hidden;
}

.msg-citacao strong {
  color: var(--color-foreground);
  font-weight: 600;
  flex: none;
}

.msg-citacao span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.msg-citacao:hover {
  background: transparent;
  color: var(--color-foreground);
}

.msg-citacao-perdida {
  font-style: italic;
  opacity: 0.7;
}

.msg-reacoes {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.35rem;
}

.msg-reacao {
  min-height: 26px;
  padding: 0 0.45rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 8px;
  border: 1px solid transparent;
  background: var(--color-muted);
  font-size: 0.8rem;
}

.msg-reacao span {
  font-variant-numeric: tabular-nums;
  font-size: 0.72rem;
  color: var(--color-muted-foreground);
}

.msg-reacao.minha {
  background: rgba(74, 236, 125, 0.16);
  border-color: var(--color-accent);
}

.msg-reacao.minha span {
  color: var(--color-accent);
}

/* O "+" so aparece com o mouse na mensagem: fixo, viraria uma coluna de sinais
   de mais descendo pela conversa inteira. */
.msg-reacao-add {
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.msg:hover .msg-reacao-add,
.msg-reacao-add:focus-visible {
  opacity: 1;
}

.msg-acoes {
  position: absolute;
  top: -12px;
  right: 1.2rem;
  display: flex;
  gap: 0.1rem;
  padding: 0.15rem;
  border-radius: 8px;
  background: var(--color-elevado);
  border: 1px solid var(--color-border);
  box-shadow: 4px 4px 0 var(--noite);
  opacity: 0;
  /* Invisivel E inerte: sem isso a barra continuaria capturando o clique numa
     faixa de 12px por cima da mensagem de cima. */
  pointer-events: none;
  transition: opacity var(--transition-fast);
}

.msg:hover .msg-acoes,
.msg-acoes:focus-within {
  opacity: 1;
  pointer-events: auto;
}

.msg-acoes button {
  width: 28px;
  height: 28px;
  min-height: 0;
  padding: 0;
  border-radius: 6px;
  background: transparent;
  font-size: 0.85rem;
  line-height: 1;
}

.msg-acoes button:hover {
  background: var(--color-secondary);
}

.msg-acoes button.perigo:hover {
  background: var(--color-destructive);
}

.msg-editor {
  grid-column: 2;
}

.msg-editor-input {
  width: 100%;
  padding: 0.5rem 0.6rem;
  border-radius: var(--control-radius);
  border: 1px solid var(--color-accent);
  background: var(--color-muted);
  color: var(--color-foreground);
  font-family: inherit;
  font-size: 0.9rem;
  resize: vertical;
}

.msg-editor-acoes {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.4rem;
}

.msg-editor-acoes button {
  min-height: var(--control-h-sm);
  padding: 0 0.7rem;
  font-size: 0.78rem;
}

.msg-editor-acoes .form-hint {
  margin: 0;
}

.emoji-menu {
  position: fixed;
  z-index: 70;
  display: flex;
  gap: 0.15rem;
  padding: 0.3rem;
  border-radius: 10px;
  background: var(--color-elevado);
  border: 1px solid var(--color-border);
  box-shadow: 4px 4px 0 var(--noite);
}

.emoji-menu button {
  width: 34px;
  height: 34px;
  min-height: 0;
  padding: 0;
  border-radius: var(--control-radius);
  background: transparent;
  font-size: 1.15rem;
  line-height: 1;
}

.emoji-menu button:hover {
  background: var(--color-secondary);
  transform: scale(1.15);
}

/* --- Painel de fixadas --- */

.fixadas-painel {
  position: absolute;
  top: calc(100% + 4px);
  right: 0.9rem;
  z-index: 30;
  width: 340px;
  max-width: calc(100vw - 2rem);
  max-height: 60vh;
  overflow-y: auto;
  padding: 0.8rem;
  border-radius: 12px;
  background: var(--color-elevado);
  border: 1px solid var(--color-border);
  box-shadow: 4px 4px 0 var(--noite);
}

.fixadas-painel h3 {
  font-family: var(--font-sans);
  margin: 0 0 0.6rem;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted-foreground);
}

.fixada-item {
  width: 100%;
  min-height: 0;
  padding: 0.5rem;
  margin-bottom: 0.3rem;
  display: grid;
  grid-template-columns: 20px 1fr auto;
  align-items: center;
  gap: 0.4rem;
  border-radius: 8px;
  background: var(--color-card);
  font-size: 0.8rem;
  text-align: left;
}

.fixada-autor {
  grid-column: 2;
  font-weight: 600;
}

.fixada-texto {
  grid-column: 2;
  color: var(--color-muted-foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fixada-hora {
  grid-column: 3;
  grid-row: 1;
  font-size: 0.68rem;
  color: var(--color-muted-foreground);
}

/* --- Composer --- */

.chat-composer {
  position: relative;
  flex: none;
  padding: 0 1.2rem 1.2rem;
}

/* Sobe a partir do campo em vez de descer: abaixo dele so' existe a borda da
   janela, e a lista ficaria cortada logo na segunda sugestao. */
.mencao-sugestoes {
  position: absolute;
  left: 1.2rem;
  right: 1.2rem;
  bottom: calc(100% - 0.6rem);
  z-index: 30;
  max-height: 15rem;
  overflow-y: auto;
  padding: 0.3rem;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-elevado);
  box-shadow: 4px 4px 0 var(--noite);
}

.mencao-sugestao {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  min-height: 0;
  padding: 0.35rem 0.5rem;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--color-foreground);
  text-align: left;
  font-size: 0.85rem;
}

/* Teclado e mouse pintam igual: quem desce com a seta e quem passa o mouse
   estao apontando a mesma coisa. */
.mencao-sugestao.ativa,
.mencao-sugestao:hover {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.mencao-sugestao span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--color-muted-foreground);
  font-size: 0.78rem;
}

.mencao-sugestao.ativa span,
.mencao-sugestao:hover span {
  color: rgba(255, 255, 255, 0.75);
}

.chat-respondendo {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.8rem;
  border-radius: 8px 8px 0 0;
  background: var(--color-muted);
  font-size: 0.78rem;
  color: var(--color-muted-foreground);
}

.chat-respondendo button {
  margin-left: auto;
  width: 22px;
  height: 22px;
  min-height: 0;
  padding: 0;
  background: transparent;
  font-size: 1rem;
  line-height: 1;
}

.chat-composer-linha {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem 0.4rem 0.9rem;
  border-radius: 10px;
  background: var(--color-muted);
}

.chat-composer-linha textarea {
  flex: 1;
  min-height: var(--control-h-md);
  max-height: 180px;
  padding: 0.55rem 0;
  border: none;
  background: transparent;
  color: var(--color-foreground);
  font-family: inherit;
  font-size: 0.93rem;
  line-height: 1.4;
  resize: none;
  outline: none;
}

.chat-composer-linha textarea::placeholder {
  color: var(--color-muted-foreground);
}

.chat-enviar {
  width: var(--control-h-md);
  height: var(--control-h-md);
  min-height: 0;
  padding: 0;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--control-radius);
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.chat-enviar svg {
  width: 18px;
  height: 18px;
}

.chat-enviar:hover {
  background: var(--color-accent-hover);
}

#chat-erro {
  margin: 0 0 0.4rem;
}

/* --- Tela de canal de voz --- */

.tela-voz {
  align-items: center;
  justify-content: center;
}

/* Nao e' uma `section` das outras telas (por isso `.coluna-conteudo > section`
   nao alcanca), entao repete aqui o essencial: preencher a coluna quando
   visivel. Esconder/mostrar e' so' `.hidden` -- o iframe continua tocando por
   tras mesmo escondido. */
.chamada-frame,
/* Amigos embutido: mesma ideia do iframe da chamada -- preencher a coluna
   quando visivel, sumir com `.hidden` sem sair do ar. */
.pagina-frame {
  flex: 1;
  min-height: 0;
  width: 100%;
  border: 0;
  background: var(--color-background);
}

/* --- Plugins ---
   O topo da coluna de canais (entrada da tela + um atalho por plugin
   liberado) reusa `.canal-linha`/`.canal-item`; o que e' proprio daqui e' o
   fio que separa esse bloco das categorias, e a tela com um bloco por plugin. */

.plugins-coluna {
  padding-bottom: 0.4rem;
  margin-bottom: 0.2rem;
  border-bottom: 1px solid var(--color-border);
}

.plugins-corpo {
  flex: 1;
  overflow-y: auto;
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.plugins-corpo > .form-hint {
  margin: 0;
}

.plugins-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 320px));
  gap: 1rem;
}

/* Titulos "Seus plugins ativos" / "Plugins inativos" da tela do Inicio:
   ocupam a linha inteira da grade, e os cards seguem embaixo. */
.plugins-secao,
.plugins-secao-vazia {
  grid-column: 1 / -1;
  margin: 0;
}

.plugins-secao {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted-foreground);
}

.plugins-secao ~ .plugins-secao {
  margin-top: 1rem;
}

/* O bloco e' um cartao de app: capa em cima, o icone encavalado na borda da
   capa, nome em corpo normal (nao a maiuscula do cartaz -- e' nome proprio,
   como o de uma pessoa) e uma linha de descricao. */
.plugin-bloco {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--raio-cartao);
  background: var(--color-card);
  transition: border-color var(--transition-fast);
}

.plugin-bloco:hover {
  border-color: var(--regra);
}

.plugin-bloco-capa {
  position: relative;
  height: 96px;
  background: var(--noite);
}

.plugin-bloco-capa img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  display: block;
}

/* Veu chapado na base da capa, para o icone assentar sobre o card. */
.plugin-bloco-capa::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 15, 12, 0) 40%, var(--color-card) 100%);
}

.plugin-bloco-icone {
  position: relative;
  z-index: 1;
  width: 56px;
  height: 56px;
  margin: -30px 0 0 1rem;
  border-radius: 16px;
  box-shadow: 0 0 0 4px var(--color-card);
}

.plugin-bloco-textos {
  padding: 0.6rem 1rem 0;
}

.plugin-bloco-textos h3 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.2;
}

.plugin-bloco-categoria {
  display: inline-block;
  margin-top: 0.15rem;
  font-family: var(--font-sans);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--roxo);
}

.plugin-bloco-textos p {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--color-muted-foreground);
}

.plugin-bloco-selo {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 1;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-family: var(--font-sans);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.plugin-bloco-acoes {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 1rem 1rem;
}

/* Botoes de linha de acao, sem a folga do .primary: dentro do cartao o verde
   ja' diz qual e' a acao. */
.plugin-bloco-abrir,
.plugin-bloco-remover {
  min-height: var(--control-h-sm);
  padding: 0 1rem;
  border-radius: var(--control-radius);
  font-size: 0.85rem;
  font-weight: 600;
}

.plugin-bloco-abrir {
  flex: 1;
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.plugin-bloco-abrir:hover:not(:disabled) {
  background: var(--color-accent-hover);
}

.plugin-bloco-remover {
  background: transparent;
  color: var(--color-muted-foreground);
  border: 1px solid var(--color-border);
}

.plugin-bloco-remover:hover:not(:disabled) {
  background: transparent;
  color: var(--color-destructive);
  border-color: var(--color-destructive);
}

.plugin-bloco-aviso {
  font-size: 0.8rem;
  color: var(--color-muted-foreground);
}

.voz-card {
  text-align: center;
  padding: 2rem;
}

.voz-icone {
  display: inline-flex;
  font-size: 3rem;
  color: var(--roxo);
}

.voz-icone svg {
  width: 1em;
  height: 1em;
}

.voz-card h1 {
  margin: 0.6rem 0 0.3rem;
  font-size: 1.4rem;
}

.voz-card .form-hint {
  margin: 0 0 1.2rem;
}

.voz-card button {
  min-width: 240px;
}

/* --- Coluna 4: membros e ranking --- */

.coluna-membros {
  position: relative;
  width: var(--w-membros, 240px);
  background: var(--color-sidebar);
  border-left: 1px solid var(--color-divisa);
  display: flex;
  flex-direction: column;
}

.membros-abas {
  flex: none;
  display: flex;
  border-bottom: 1px solid var(--color-divisa);
}

.membros-aba {
  flex: 1;
  min-height: 42px;
  border-radius: 0;
  background: transparent;
  color: var(--color-muted-foreground);
  font-size: 0.8rem;
}

.membros-aba:hover {
  background: var(--color-sidebar-hover);
}

.membros-aba.ativa {
  color: var(--color-foreground);
  box-shadow: inset 0 -2px 0 var(--color-accent);
}

.membros-lista,
.ranking-lista {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem;
}

.membros-titulo {
  font-family: var(--font-sans);
  margin: 0.8rem 0.4rem 0.3rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted-foreground);
}

.membro-linha,
.ranking-linha {
  position: relative;
  display: flex;
  align-items: center;
  border-radius: 8px;
}

.membro-linha:hover,
.ranking-linha:hover {
  background: var(--color-sidebar-hover);
}

/* Offline por opacidade, nao por cor de texto: mantem o avatar reconhecivel e
   evita inventar um terceiro tom de cinza na coluna. */
.membro-linha.offline {
  opacity: 0.45;
}

.membro-linha.offline:hover {
  opacity: 0.8;
}

.membro-identidade,
.ranking-linha {
  flex: 1;
  min-width: 0;
  min-height: 42px;
  padding: 0.25rem 0.45rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: transparent;
  text-align: left;
}

.membro-identidade:hover {
  background: transparent;
}

.membro-textos,
.ranking-textos {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}

.membro-nome {
  font-size: 0.86rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.membro-nivel {
  font-size: 0.7rem;
  color: var(--color-muted-foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cargo-icone {
  font-size: 0.75rem;
}

.ranking-posicao {
  width: 22px;
  flex: none;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-muted-foreground);
}

/* Os tres primeiros: o numero ganha a cor no lugar da medalha que era emoji. */
.ranking-posicao.podio-1 {
  color: var(--color-warning);
}

.ranking-posicao.podio-2 {
  color: var(--tinta);
}

.ranking-posicao.podio-3 {
  color: var(--roxo);
}

/* --- Modal --- */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(4, 8, 18, 0.72);
}

.modal {
  position: relative;
  width: 420px;
  max-width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1.6rem;
  border-radius: var(--raio-cartao);
  background: var(--color-card);
  /* O cartao do app e' chapado; o modal flutua, entao ganha a borda de tinta e
     a folga de registro. E' o que separa ele do que ficou atras -- no cartaz
     nada desfoca, entao nao ha sombra borrada para fazer esse papel. */
  border: 2.5px solid var(--tinta);
  box-shadow: var(--folga) var(--folga) 0 var(--roxo);
}

/* Variante larga: editor de perfil (form + previa lado a lado). A grade
   `.conta-body` ja colapsa pra 1 coluna em telas estreitas (ver regra dela
   mais abaixo), entao o modal herda essa responsividade de graca. */
.modal-perfil {
  width: 820px;
  max-width: 95vw;
  padding: 1.6rem 1.6rem 1.2rem;
}

.modal-perfil .conta-body {
  padding: 0;
}

/* Os dois modais que carregam o editor de perfil (o dele e o de
   configuracoes) seguem o cartao "Editar perfil": borda fina, sem folga. */
.modal-perfil,
.modal-config {
  border: 1px solid var(--color-border);
  box-shadow: none;
}

.modal h2 {
  margin: 0 0 1.2rem;
  font-size: 1.2rem;
}

.modal-fechar {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  min-height: 0;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  font-size: 1.2rem;
  line-height: 1;
}

.modal label {
  display: block;
  margin-bottom: 1rem;
  font-size: 0.85rem;
  color: var(--color-muted-foreground);
}

/* A caixa (borda, fundo, foco) vem de base.css. Aqui so' mora o que e' do
   modal: campo ocupando a linha inteira, embaixo do rotulo. */
.modal input:not([type='color']):not([type='file']),
.modal textarea,
.modal label select {
  display: block;
  width: 100%;
  margin-top: 0.4rem;
}

.modal .cor-input {
  width: 56px;
  height: 40px;
  min-height: 0;
  margin: 0 0 0 0.6rem;
  padding: 2px;
  border-radius: var(--control-radius);
  border: 1px solid var(--color-border);
  background: var(--control-bg);
  cursor: pointer;
}

.linha-cor {
  display: flex;
  align-items: center;
}

.modal > button.primary,
.modal > button.danger,
#modal-corpo > button.primary,
#modal-corpo > button.danger {
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.7rem;
}

.modal-acoes {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.2rem;
}

.modal-acoes button {
  flex: 1;
}

.escolha-icones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 1rem;
}

.escolha-icone {
  width: 40px;
  height: 40px;
  min-height: 0;
  padding: 0;
  border-radius: 10px;
  border: 2px solid transparent;
  background: var(--color-muted);
  font-size: 1.2rem;
  line-height: 1;
}

.escolha-icone.ativo {
  border-color: var(--color-accent);
  background: var(--color-secondary);
}

/* Botao de upload no fim da grade: com imagem escolhida ele vira a previa. */
.escolha-icone-imagem {
  overflow: hidden;
}

.escolha-icone-imagem img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.escolha-icone-nota {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: -0.6rem 0 1rem;
  font-size: 0.8rem;
  color: var(--color-muted-foreground);
}

.escolha-icone-remover {
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-accent);
  font-size: 0.8rem;
  text-decoration: underline;
  cursor: pointer;
}

.escolha-tipo {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 1.2rem;
}

.escolha-tipo-btn {
  min-height: 0;
  padding: 0.7rem 0.9rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  border-radius: 10px;
  border: 2px solid transparent;
  background: var(--color-muted);
  text-align: left;
}

.escolha-tipo-btn.ativo {
  border-color: var(--color-accent);
}

.escolha-tipo-btn strong {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
}

.escolha-tipo-btn span {
  font-size: 0.75rem;
  color: var(--color-muted-foreground);
}

.convidar-lista {
  display: grid;
  gap: 0.4rem;
  max-height: 340px;
  overflow-y: auto;
  margin-bottom: 0.8rem;
}

.convidar-linha {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.4rem;
  border-radius: 8px;
  background: var(--color-muted);
}

.convidar-nome {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  font-size: 0.88rem;
  line-height: 1.3;
}

.convidar-nome small {
  font-size: 0.72rem;
  color: var(--color-muted-foreground);
}

.convidar-linha button {
  flex: none;
  min-height: var(--control-h-sm);
  padding: 0 0.8rem;
  font-size: 0.8rem;
}

/* O modal de convite tem quatro blocos (apelido, amigos, pendentes, link) e
   rola dentro de si. A linha divisoria e' o que impede os quatro de virarem
   uma lista so' de gente. */
/* --- Editar comunidade: abas Geral / Membros ------------------------------ */

.ec-abas {
  display: flex;
  gap: 0.3rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--color-border);
}

.ec-aba {
  min-height: 0;
  padding: 0.45rem 0.8rem;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--color-muted-foreground);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.ec-aba:hover {
  color: var(--color-foreground);
  background: transparent;
}

.ec-aba.ativa {
  color: var(--color-foreground);
  border-bottom-color: var(--color-accent);
}

.ec-painel #ec-busca {
  width: 100%;
  margin-bottom: 0.7rem;
}

/* Linha de membro em duas alturas: identidade em cima, controles embaixo. O
   modal tem 420px -- cargo, remover e transferir na mesma linha da identidade
   nao caberiam sem espremer o nome. */
.ec-membro {
  padding: 0.55rem;
  border-radius: 8px;
  background: var(--color-muted);
}

.ec-membro + .ec-membro {
  margin-top: 0.4rem;
}

.ec-membro-topo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.ec-membro-textos {
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.ec-membro-nome {
  font-size: 0.88rem;
  font-weight: 600;
}

.ec-membro-textos small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.72rem;
  color: var(--color-muted-foreground);
}

.ec-membro-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.ec-membro-acoes button {
  min-height: var(--control-h-sm);
  padding: 0 0.7rem;
  font-size: 0.76rem;
}

/* O select de cargo e' o controle principal da linha, entao ele estica e os
   botoes ficam do tamanho do texto. O padding da direita e' maior que o
   herdado porque a seta desenhada em base.css ocupa esse canto. */
.ec-cargo {
  flex: 1;
  min-width: 110px;
  min-height: var(--control-h-sm);
  padding: 0 1.7rem 0 0.6rem;
  background-position: right 0.5rem center;
  font-size: 0.76rem;
}

/* "Ver mais" fecha a lista: a lista so' mostra 10 de cada vez e este botao
   pede o proximo bloco. Largura cheia para nao ser confundido com uma acao de
   membro. */
.ec-mais {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  min-height: var(--control-h-md);
  margin-top: 0.5rem;
  background: transparent;
  border: 1px dashed var(--color-border);
  color: var(--color-muted-foreground);
  font-size: 0.78rem;
}

.ec-mais:hover {
  background: var(--color-muted);
  color: var(--color-foreground);
}

.ec-mais-seta {
  font-size: 0.7rem;
  line-height: 1;
}

/* A confirmacao de transferir mora dentro do modal, acima da lista. Borda
   vermelha porque nao tem volta -- e' o mesmo peso do botao de excluir. */
.ec-confirmar {
  margin-bottom: 0.8rem;
  padding: 0.8rem;
  border: 1px solid var(--color-destructive);
  border-radius: 10px;
  background: var(--color-muted);
}

.ec-confirmar-titulo {
  margin: 0 0 0.3rem;
  font-size: 0.9rem;
  font-weight: 600;
}

.ec-confirmar label {
  margin: 0.7rem 0 0;
}

.convidar-secao + .convidar-secao {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}

.convidar-titulo {
  font-family: var(--font-sans);
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-muted-foreground);
}

.convidar-busca {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}

.convidar-busca input {
  flex: 1;
  min-width: 0;
}

.convidar-busca button {
  flex: none;
  min-height: var(--control-h-md);
  padding: 0 0.9rem;
  font-size: 0.8rem;
}

/* "Ja e' membro" e "Convidado" ocupam o lugar do botao Convidar, entao
   herdam o mesmo alinhamento a direita da linha. */
.convidar-estado {
  flex: none;
  font-size: 0.78rem;
  color: var(--color-muted-foreground);
}

.convidar-link-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.7rem;
}

.convidar-link-form select {
  flex: 1;
  min-width: 120px;
}

.convidar-link-form button {
  flex: none;
  min-height: var(--control-h-md);
  padding: 0 0.9rem;
  font-size: 0.8rem;
}

/* Grade de duas colunas: a URL ocupa a primeira e se estende sob os botoes,
   e a legenda de validade/usos fica na linha de baixo. */
.convidar-link-linha {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem;
  border-radius: 8px;
  background: var(--color-muted);
}

.convidar-link-linha + .convidar-link-linha {
  margin-top: 0.4rem;
}

.convidar-link-linha button {
  min-height: 30px;
  padding: 0 0.7rem;
  font-size: 0.76rem;
}

.convidar-link-linha small {
  grid-column: 1 / -1;
  font-size: 0.72rem;
  color: var(--color-muted-foreground);
}

/* Somente leitura, mas selecionavel: e' a saida quando navigator.clipboard
   nao esta disponivel. */
.convidar-link-url {
  min-width: 0;
  font-size: 0.74rem;
}

/* --- Pecas de perfil: nivel, XP, badges, comunidades, escolha de status --- */

.nivel-pill {
  font-family: var(--font-sans);
  display: inline-flex;
  align-items: center;
  padding: 0 0.4rem;
  height: 17px;
  border-radius: 5px;
  background: var(--color-muted);
  color: var(--color-muted-foreground);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  vertical-align: middle;
}

.perfil-card-status {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.9rem;
  font-size: 0.82rem;
  color: var(--color-muted-foreground);
}

.perfil-card-visto {
  opacity: 0.8;
}

.perfil-card-avatar-wrap {
  position: absolute;
  top: 52px;
  left: 16px;
}

/* Dentro do wrap, quem posiciona passa a ser o wrap -- e' o que faz o ponto de
   status acompanhar o avatar em vez de ficar preso ao canto do card. */
.perfil-card-avatar-wrap .perfil-card-avatar {
  position: static;
}

.perfil-card-xp {
  margin-bottom: 1rem;
}

.perfil-card-xp-barra {
  height: 6px;
  border-radius: 3px;
  background: var(--color-muted);
  overflow: hidden;
}

.perfil-card-xp-barra span {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--color-accent);
  transition: width 400ms ease-out;
}

.perfil-card-xp-texto {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.7rem;
  color: var(--color-muted-foreground);
}

.perfil-card-numeros {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  padding-top: 0.8rem;
  margin-top: 0.8rem;
  border-top: 1px solid var(--color-border);
}

.perfil-card-numeros div {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.perfil-card-numeros strong {
  font-size: 0.85rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.perfil-card-numeros span {
  font-family: var(--font-sans);
  font-size: 0.65rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-muted-foreground);
}

.perfil-badges,
.perfil-comunidades {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.badge-pill,
.comunidade-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.55rem;
  border-radius: 8px;
  background: var(--color-muted);
  font-size: 0.75rem;
}

.comunidade-pill-icone {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
}

.escolha-status {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.4rem;
}

.escolha-status-btn {
  min-height: 40px;
  padding: 0 0.7rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: var(--control-radius);
  border: 2px solid transparent;
  background: var(--color-muted);
  font-size: 0.82rem;
  text-align: left;
}

.escolha-status-btn.ativo {
  border-color: var(--color-accent);
  background: var(--color-secondary);
}

/* --- Telas estreitas ---
   Ate 1100px a coluna de membros vira uma gaveta sobreposta, chamada pelo
   botao do header. Abaixo de 640px a lista de canais tambem sai do fluxo:
   quatro colunas nao cabem num celular de jeito nenhum. */

/* Botao da gaveta: so' existe abaixo de 640px. */
.abrir-gaveta {
  display: none;
}

@media (max-width: 1100px) {
  .app {
    grid-template-columns: 72px 210px minmax(0, 1fr);
  }

  /* Gaveta: fechada ate' o botao de pessoas do cabecalho abrir
     (body.membros-aberto, lobby.js). Antes ela ficava sempre aberta por cima
     do chat -- cobrindo inclusive o botao que deveria fecha'-la. */
  .coluna-membros {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    width: 240px;
    box-shadow: -4px 0 0 var(--noite);
    transform: translateX(calc(100% + 8px));
    visibility: hidden;
    transition: transform var(--transition-fast), visibility 0s linear 150ms;
  }

  .membros-aberto .coluna-membros {
    transform: none;
    visibility: visible;
    transition: transform var(--transition-fast);
  }

  /* Mesmo veu da gaveta de canais: tocar fora fecha (lobby.js). */
  .membros-aberto .coluna-conteudo::after {
    content: '';
    position: fixed;
    inset: 0 0 0 72px;
    z-index: 30;
    background: rgb(0 0 0 / 0.45);
  }

  .abrir-membros {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    min-height: 40px;
    padding: 0;
    background: transparent;
    color: var(--color-foreground);
  }

  .abrir-membros svg {
    width: 22px;
    height: 22px;
  }

  .tela-voz {
    position: relative;
  }

  .tela-voz > .abrir-membros {
    position: absolute;
    top: 0.5rem;
    right: 0.9rem;
  }
}

@media (max-width: 640px) {
  .app {
    grid-template-columns: 60px minmax(0, 1fr);
  }

  /* Gaveta de membros espelha a de canais: entra pela direita, deixa uma
     faixa do conteudo (sob o veu) a' mostra para fechar com um toque, e nunca
     passa por cima do trilho. */
  .coluna-membros,
  .coluna-membros.recolhida {
    width: min(280px, calc(100vw - 60px - 56px));
  }

  .membros-aberto .coluna-conteudo::after {
    inset: 0 0 0 60px;
  }

  .coluna-canais {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 60px;
    z-index: 35;
    width: 220px;
    box-shadow: 4px 0 0 var(--noite);
    /* Fechada sai inteira, sombra incluida: com -110% ela parava por cima
       do trilho (x -182 a 38) e roubava o toque dos icones de comunidade. */
    transform: translateX(calc(-100% - 64px));
    transition: transform var(--transition-fast);
  }

  /* A gaveta abre pelo botao do cabecalho e fecha ao escolher uma conversa
     ou canal, ou ao tocar fora (lobby.js). Antes abria por :hover e
     :focus-within: no celular nao havia como abrir de proposito, e depois de
     tocar numa conversa o foco ficava dentro dela -- a lista ficava por cima
     do chat. */
  .gaveta-aberta .coluna-canais {
    transform: none;
  }

  /* Veu sobre o conteudo, inclusive sobre os iframes (amigos, chamada): o
     toque nele fecha a gaveta em vez de cair no que esta' por baixo. */
  .gaveta-aberta .coluna-conteudo::after {
    content: '';
    position: fixed;
    inset: 0 0 0 60px;
    z-index: 30;
    background: rgb(0 0 0 / 0.45);
  }

  .abrir-gaveta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 40px;
    min-height: 40px;
    padding: 0;
    margin-left: -0.4rem;
    background: transparent;
    color: var(--color-foreground);
  }

  .abrir-gaveta svg {
    width: 22px;
    height: 22px;
  }

  .tela-inicio > .conteudo-header {
    display: flex;
  }

  .tela-voz {
    position: relative;
  }

  .tela-voz > .abrir-gaveta {
    position: absolute;
    top: 0.5rem;
    left: 0.9rem;
  }

  .rail-item {
    width: 42px;
    height: 42px;
    font-size: 1.15rem;
  }

  .msg {
    padding-left: 0.7rem;
    padding-right: 0.7rem;
    grid-template-columns: 34px 1fr;
  }

  .msg-avatar {
    width: 34px;
    height: 34px;
  }

  .chat-composer {
    padding: 0 0.7rem 0.7rem;
  }

  .perfil-card-numeros {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* O bloco de `prefers-reduced-motion` la de cima zera as transicoes que
   existiam antes; estas nasceram depois dele. */
@media (prefers-reduced-motion: reduce) {
  .rail-item,
  .rail-item::before,
  .msg-reacao-add,
  .msg-acoes,
  .msg-hora-lateral,
  .canal-config,
  .membro-config,
  .perfil-card-xp-barra span,
  .coluna-canais {
    transition: none;
  }

  .emoji-menu button:hover {
    transform: none;
  }

  .mesa-pulso {
    animation: none;
  }

  /* O vao tracejado e a copia no ponteiro continuam: sao o que diz para onde o
     item esta indo, nao enfeite. Some so' o pulso de quando ele cai. */
  .assentou {
    animation: none;
  }
}

/* ---------------------------------------------------------------------------
   Sons da comunidade, no modal de gerencia. A lista fica em cima do
   formulario porque o que se faz aqui mais vezes e' olhar o que ja tem e
   trocar um -- adicionar acontece tres vezes na vida da comunidade.
   --------------------------------------------------------------------------- */

.sons-gerencia {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

.som-linha {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-muted);
}

.som-linha-tocar {
  width: 34px;
  height: 34px;
  min-height: 0;
  padding: 0;
  flex: none;
  border-radius: 9px;
  border: 1px solid transparent;
  background: var(--color-secondary);
  font-size: 1.05rem;
  line-height: 1;
}

.som-linha-tocar:hover {
  border-color: var(--color-accent);
}

.som-linha-nome {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Acima do teto (impulso do Catnip venceu): continua na lista para poder sair,
   mas nao toca na chamada. */
.som-bloqueado .som-linha-nome,
.som-bloqueado .som-linha-tocar {
  opacity: 0.45;
}

.som-bloqueado .som-linha-nome::after {
  content: ' · fora do limite';
  font-size: 0.76rem;
  color: var(--color-muted-foreground);
}

.som-linha-dur {
  flex: none;
  font-size: 0.76rem;
  color: var(--color-muted-foreground);
  font-variant-numeric: tabular-nums;
}

.som-linha-remover {
  width: 28px;
  height: 28px;
  min-height: 0;
  padding: 0;
  flex: none;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--color-muted-foreground);
  font-size: 1.2rem;
  line-height: 1;
}

.som-linha-remover:hover {
  background: var(--color-destructive);
  color: var(--noite);
}

.som-arquivo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.som-arquivo span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.8rem;
  color: var(--color-muted-foreground);
}

/* Corte do som: a onda com o trecho escolhido aceso e os dois controles.
   As cores da onda viram variaveis porque quem pinta e' o <canvas>, que so'
   le CSS por getComputedStyle. */
.som-corte {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.som-onda {
  --som-onda-trecho: var(--verde);
  --som-onda-fora: var(--tinta-15);
  --som-onda-janela: rgba(74, 236, 125, 0.10);
  width: 100%;
  height: 64px;
  border: 1px solid var(--color-border);
  border-radius: var(--control-radius);
  background: var(--control-bg);
  cursor: pointer;
  touch-action: none;
}

.som-corte-faixa {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  align-items: center;
  font-size: 0.8rem;
}

.som-corte-faixa input {
  width: 100%;
  accent-color: var(--verde);
}

.som-corte-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  font-size: 0.8rem;
  color: var(--color-muted-foreground);
}


/* ---------------------------------------------------------------------------
   Aviso de mensagem privada

   Canto inferior direito, empilhado de baixo para cima. Fica acima do modal
   (z-index 60 no toast do perfil) nao por importancia, mas porque some
   sozinho: um aviso escondido atras da caixa aberta expiraria sem ser lido.
   --------------------------------------------------------------------------- */

.avisos-dm {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 70;
  display: flex;
  flex-direction: column-reverse;
  gap: 0.5rem;
  max-width: min(22rem, calc(100vw - 2.5rem));
}

.aviso-dm {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.4rem 0.4rem 0.6rem;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: 12px;
  background: var(--color-elevado);
  box-shadow: 4px 4px 0 var(--noite);
  animation: aviso-dm-entra 0.22s ease-out;
}

/* A mesma barra ambar da mensagem que cita voce: o cartao e o canal aonde ele
   leva sao reconhecidos pela mesma cor. */
.aviso-dm.aviso-mencao {
  border-left-color: var(--color-warning);
}

.aviso-dm.saindo {
  animation: aviso-dm-sai 0.2s ease-in forwards;
}

.aviso-dm-abrir {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.3rem;
  min-height: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--color-foreground);
  text-align: left;
}

.aviso-dm-abrir:hover {
  background: var(--color-sidebar-hover, rgba(255, 255, 255, 0.06));
}

.aviso-dm-textos {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.aviso-dm-textos strong {
  font-size: 0.88rem;
}

/* Uma linha so': o cartao e' o convite para abrir a conversa, nao a conversa. */
.aviso-dm-textos span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.78rem;
  color: var(--color-muted-foreground);
}

.aviso-dm-fechar {
  flex: none;
  width: 24px;
  height: 24px;
  min-height: 0;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--color-muted-foreground);
  font-size: 1.1rem;
  line-height: 1;
}

.aviso-dm-fechar:hover {
  background: var(--color-secondary);
  color: var(--color-foreground);
}

@keyframes aviso-dm-entra {
  from {
    opacity: 0;
    transform: translateX(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes aviso-dm-sai {
  to {
    opacity: 0;
    transform: translateX(12px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .aviso-dm,
  .aviso-dm.saindo {
    animation: none;
  }
}

@media (max-width: 640px) {
  .avisos-dm {
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    max-width: none;
  }
}

@media (max-width: 860px) {
  /* Na coluna estreita o recuo e o vao competiam com o nome do canal.
     Devolver alguns pixels ao texto adia as reticencias sem elimina-las. */
  .canal-item {
    padding-inline: 0.25rem;
    gap: 0.25rem;
  }

  /* A margem repetida em cada acao tirava mais espaco do nome nos canais
     de voz, que ja' carregam duas acoes ao lado. */
  .canal-linha-topo > .canal-config {
    margin-right: 0;
  }
}

@media (pointer: coarse) {
  /* No trilho o avatar e' o proprio botao: aumentar so' o icone nao daria
     ao dedo uma area segura para abrir o perfil. */
  .painel-usuario-rail .painel-usuario-eu {
    min-width: 40px;
    min-height: 40px;
  }

  /* Acoes compactas dividem linhas com texto; impedir a compressao evita
     que o flex desfaça a area minima quando a coluna fica apertada. */
  .icone-btn,
  .canal-categoria-add,
  .canal-config,
  .msg-acoes button,
  .chat-enviar,
  .modal-fechar {
    min-width: 40px;
    min-height: 40px;
    flex-shrink: 0;
  }

  /* As linhas de navegacao e os campos do chat tambem recebem toques,
     mesmo quando parecem apenas texto ou uma faixa de busca. */
  .painel-amigos-topo,
  .painel-amigos-filtro,
  .canal-item,
  .canal-criar,
  .canal-voz-pessoa,
  .canal-chamada-btn,
  .chat-carregar-mais,
  .chat-composer-linha textarea {
    min-height: 40px;
    min-width: 40px;
  }
}

/* --- Atividade compartilhada de plugin ---
   Barra do plugin aberto (sair, esconder canais, chamar amigos) e o cartao de
   convite que aparece no chat. A barra e' irma do iframe do plugin; a coluna de
   canais so' some enquanto ha plugin na tela (body.canais-ocultos). */
.plugin-barra {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: none;
  padding: 0.4rem 0.75rem;
  border-bottom: 1px solid var(--color-divisa);
  background: var(--color-card, var(--control-bg));
}
.plugin-barra button {
  width: auto;
  min-height: 32px;
  margin-top: 0;
  padding: 0.25rem 0.75rem;
  font-size: 0.82rem;
}
.plugin-barra-titulo {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.85rem;
  font-weight: 600;
}
.plugin-barra.hidden { display: none; }
body.canais-ocultos .coluna-canais { display: none; }
/* Sem a coluna de canais o grid precisa perder a trilha dela, senao o conteudo cai
   na de 240px e o plugin vira uma faixa estreita. No celular a coluna e' uma gaveta
   fixa (o grid ja' tem so' duas trilhas), entao nao muda. */
@media (min-width: 641px) {
  body.canais-ocultos .app { grid-template-columns: 72px minmax(0, 1fr) auto; }
}
/* Chat da chamada aberto em tela estreita: palco + chat de 340px nao cabem ao
   lado da coluna de canais (a sala viraria gaveta por cima do palco), entao a
   coluna recolhe ate' o chat fechar. Abaixo de 641px ela ja' e' gaveta. */
@media (min-width: 641px) and (max-width: 1100px) {
  body.chat-voz-aberto .coluna-canais { display: none; }
  body.chat-voz-aberto .app { grid-template-columns: 72px minmax(0, 1fr) auto; }
}

.atividade-lugar {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 0.35rem 0.5rem;
  align-items: start;
  margin-top: 0.9rem;
}
.atividade-rotulo { grid-column: 1 / -1; font-size: 0.85rem; }
.atividade-lugar input { margin-top: 0; }
.atividade-busca { display: grid; gap: 0.3rem; }
.atividade-amigo.escolhido { border-color: var(--verde); }
.atividade-sugestoes {
  display: grid;
  padding: 0.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--control-radius);
  background: var(--color-sidebar);
}
.atividade-sugestoes.hidden { display: none; }
.atividade-sugestoes button {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  min-height: var(--control-h-sm);
  padding: 0 0.5rem;
  border: 0;
  border-radius: calc(var(--control-radius) - 4px);
  background: transparent;
  color: var(--color-foreground);
  font: inherit;
  font-size: 0.85rem;
  text-align: left;
  cursor: pointer;
}
.atividade-sugestoes button:hover,
.atividade-sugestoes button:focus-visible { background: var(--color-sidebar-hover); }
.atividade-sugestoes button span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atividade-sem-resultado { margin: 0; padding: 0.4rem 0.5rem; font-size: 0.8rem; color: var(--color-muted-foreground); }

.atividade-cartao {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem 0.75rem;
  align-items: center;
  max-width: 380px;
  margin-top: 0.3rem;
  padding: 0.75rem;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--verde, #4aec7d);
  border-radius: 12px;
  background: var(--control-bg);
}
.atividade-cartao.atividade-indisponivel { display: block; color: var(--color-muted-foreground); font-size: 0.85rem; }
.atividade-info { display: flex; flex-direction: column; min-width: 0; }
.atividade-info strong { font-size: 0.92rem; }
.atividade-info span { font-size: 0.78rem; color: var(--color-muted-foreground); }
.atividade-host { font-size: 0.72rem !important; }
.atividade-acoes { grid-column: 1 / -1; display: flex; align-items: center; gap: 0.5rem; }
.atividade-acoes button { width: auto; min-height: 34px; margin-top: 0; padding: 0.3rem 1rem; font-size: 0.85rem; }
.atividade-estado { font-size: 0.82rem; color: var(--color-muted-foreground); }
.atividade-estado.ok { color: var(--verde, #4aec7d); }

/* Atividades em andamento (Inicio): um cartao por atividade com quem esta dentro. */
.atividades-ativas { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.atividade-andamento {
  display: grid;
  gap: 0.6rem;
  padding: 0.85rem;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--verde, #4aec7d);
  border-radius: 12px;
  background: var(--control-bg);
}
.atividade-andamento header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.atividade-pessoas { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.atividade-pessoa { display: inline-flex; flex-direction: column; align-items: center; gap: 0.15rem; }
.atividade-pessoa small { font-size: 0.68rem; color: var(--color-muted-foreground); }
.atividade-acoes { display: flex; gap: 0.5rem; }
.atividade-andamento .atividade-acoes button { width: auto; min-height: 34px; margin-top: 0; padding: 0.3rem 1rem; font-size: 0.85rem; }

/* Plugins da conta no Inicio, logo abaixo de Amigos: a mesma linha do botao
   Amigos, mais juntas, e um fio separando da busca e da lista de amigos. */
.painel-amigos-plugins {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin: 0 0.5rem 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-border);
}

.painel-amigos-plugins .painel-amigos-topo {
  margin: 0;
  min-height: 32px;
  font-size: 0.88rem;
}

.painel-amigos-plugins .painel-amigos-topo span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.painel-amigos-topo.ativo {
  background: var(--color-elevado);
  color: var(--color-foreground);
}