/* Camada viva v2 (W19): chuva de dados e barras de fluxo nas superfícies escuras.
   As telas ficam atrás de todo o conteúdo (z-index negativo num contexto isolado):
   nenhum filho da superfície muda de posição, camada ou estilo. Os brilhos das
   cabeças ficam numa tela de meia resolução, ampliada, logo abaixo da chuva. */
.vivo-alvo { isolation: isolate; }
.vivo-alvo--rel { position: relative; }

.vivo-brilho,
.vivo-chuva,
.vivo-fluxo {
  position: absolute;
  left: 0;
  z-index: -1;
  display: block;
  width: 100%;
  pointer-events: none;
  user-select: none;
}
.vivo-brilho,
.vivo-chuva { top: 0; height: 100%; }
/* Superfícies de cantos arredondados (o painel ao lado da constelação, o apoio da conversa):
   a chuva fica dentro dos cantos. */
.vivo-alvo > .vivo-brilho,
.vivo-alvo > .vivo-chuva { border-radius: inherit; }

/* Linha de fluxo da janela da conversa: trilha fina com pulsos, desenhada no mesmo laço da
   chuva. As barras das superfícies da página saíram com os fundos de linhas (raia FUNDO). */
.vivo-fluxo {
  height: 30px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.vivo-fluxo--pe { bottom: 0; }
@media (max-width: 767px) {
  .vivo-fluxo { height: 24px; }
}

/* Controle "Pausar animações" (WCAG 2.2.2): no fim do rodapé, o mesmo em todas as páginas.
   Pressionado, põe .vivo-parado no <html> e todos os módulos vivos param. */
.vivo-pausa {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  min-height: 2.75rem;
  margin-top: var(--esp-4);
  padding: .5rem 1rem .5rem .875rem;
  border: 1px solid var(--cor-filete-invertido);
  border-radius: 999px;
  background: transparent;
  color: var(--cor-tinta-invertida);
  font-family: var(--fonte-mono);
  font-size: var(--t-mini);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .04em;
  cursor: pointer;
}
.vivo-pausa:hover { border-color: var(--cor-acento-claro); }
.vivo-pausa[aria-pressed="true"] {
  border-color: var(--cor-acento-claro);
  background: rgba(56, 232, 255, .12);
}
/* Ícone: duas barras (animando) ou triângulo (pausado); só forma, sem texto. */
.vivo-pausa__icone {
  display: inline-block;
  flex: none;
  box-sizing: border-box;
  width: 10px;
  height: 11px;
  border-left: 3px solid var(--cor-acento-claro);
  border-right: 3px solid var(--cor-acento-claro);
}
.vivo-pausa[aria-pressed="true"] .vivo-pausa__icone {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid var(--cor-acento-claro);
  border-right: 0;
}
.is-assistant-embedded .vivo-pausa { display: none; }

/* Atalho (V07): o mesmo controle logo depois de "Ir para o conteúdo", segunda parada do
   teclado em todas as páginas. Fica fora da tela até receber o foco, como o link de pular. */
.vivo-pausa--atalho {
  position: absolute;
  top: -100px;
  left: var(--esp-4);
  z-index: 100;
  margin-top: 0;
  background: var(--cor-papel-escuro);
}
.vivo-pausa--atalho:focus { top: var(--esp-4); }

/* Contraste reforçado pedido pelo sistema (M33): a camada atrás do texto fica mais discreta. */
@media (prefers-contrast: more) {
  .vivo-chuva { opacity: .45; }
  .vivo-brilho { opacity: .25; }
  .vivo-fluxo { opacity: .5; }
}

/* Alto contraste do sistema: nada decorativo; o botão segue as cores forçadas. */
@media (forced-colors: active) {
  .vivo-brilho, .vivo-chuva, .vivo-fluxo { display: none; }
  .vivo-pausa__icone { forced-color-adjust: none; border-color: ButtonText; }
  .vivo-pausa[aria-pressed="true"] .vivo-pausa__icone { border-color: transparent; border-left-color: ButtonText; }
  .vivo-pausa[aria-pressed="true"] { border-width: 3px; }
}

@media print {
  .vivo-brilho, .vivo-chuva, .vivo-fluxo, .vivo-pausa { display: none; }
}