/* Pilha de avatares de quem esta online. Os avatares se sobrepoem um pouco
   para caber no cabecalho sem virar uma fileira comprida. */
/* Sem `display` aqui: as utilitárias do Tailwind vivem numa @layer, que perde
   para qualquer regra fora de layer — declarar `display: flex` neste arquivo
   anularia o `hidden sm:flex` que esconde a pilha no celular. */
.facepile {
  align-items: center;
}

.facepile > * {
  position: relative;
}

/* Sobreposicao curta: as iniciais ficam centradas no avatar, entao passar de
   uns 4px comeca a comer a segunda letra do vizinho. */
.facepile > * + * {
  margin-inline-start: -0.25rem;
}

/* O ponto de status fica no canto inferior direito de cada avatar, ou seja,
   justamente na area que o avatar seguinte invade. Empilhar em ordem
   decrescente deixa cada avatar (e o seu ponto) por cima do vizinho da direita,
   entao nenhum status some. Sao seis niveis: cinco avatares + o contador "+N". */
.facepile > :nth-child(1) { z-index: 6; }
.facepile > :nth-child(2) { z-index: 5; }
.facepile > :nth-child(3) { z-index: 4; }
.facepile > :nth-child(4) { z-index: 3; }
.facepile > :nth-child(5) { z-index: 2; }
.facepile > :nth-child(6) { z-index: 1; }

/* Pulso do "ao vivo" no cabecalho do painel. É a única coisa que se move aqui: a
   lista inteira é repintada a cada broadcast, e animar as linhas viraria pisca-pisca. */
@keyframes presenca-pulso {
  0%   { box-shadow: 0 0 0 0 rgba(30, 123, 77, 0.5); }
  70%  { box-shadow: 0 0 0 6px rgba(30, 123, 77, 0); }
  100% { box-shadow: 0 0 0 0 rgba(30, 123, 77, 0); }
}

.presenca-pulso {
  animation: presenca-pulso 2.4s ease-out infinite;
}

.dark .presenca-pulso {
  animation-name: presenca-pulso-claro;
}

@keyframes presenca-pulso-claro {
  0%   { box-shadow: 0 0 0 0 rgba(111, 207, 151, 0.5); }
  70%  { box-shadow: 0 0 0 6px rgba(111, 207, 151, 0); }
  100% { box-shadow: 0 0 0 0 rgba(111, 207, 151, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .presenca-pulso,
  .dark .presenca-pulso {
    animation: none;
  }
}

/* A caixa é estreita; a barra padrão do sistema come largura util e pesa visualmente. */
.presenca-rolagem {
  scrollbar-width: thin;
  scrollbar-color: #d4d4d8 transparent;
}

.dark .presenca-rolagem {
  scrollbar-color: var(--color-cinza-escuro) transparent;
}