/* Ativação exclusiva do consultório: #tela-painel[data-painel-movimento].
   Carregar depois de telas.css. Integração em docs/painel-movimento.md. */
body:has(#tela-painel[data-painel-movimento]) {
  /* Os diálogos são filhos do body e compartilham o ritmo do painel. */
  --movimento-rapido: 120ms;
  --movimento-lista: 160ms;
  --movimento-coluna: 240ms;
  --movimento-saida: 140ms;
  --movimento-curva: cubic-bezier(.16, 1, .3, 1);
}

/* Só cores: foco, posição, área de toque e geometria continuam imediatos.
   A lista pode redesenhar seus itens sem disparar animações de entrada. */
#tela-painel[data-painel-movimento] :is(
  .nav-item,
  .filtro-opcao,
  .ficha-abas button,
  .linha-paciente,
  .conversa-item,
  .acervo-linha,
  .resumo-pendencia,
  .btn,
  .btn-icone
) {
  transition-property: background-color, border-color, color;
  transition-duration: var(--movimento-rapido);
  transition-timing-function: ease-out;
  transition-delay: 0s;
}

/* O alvo do clique fica parado; cor e borda já confirmam hover e pressão. */
body:has(#tela-painel[data-painel-movimento]) .btn:is(:hover, :active) {
  transform: none;
}

/* O atributo pertence à casca estável, nunca a cada item ou mensagem.
   Neutraliza a entrada herdada de .coluna-detalhe antes de aplicar a nossa. */
#tela-painel[data-painel-movimento] :is(
  .coluna-lista[data-movimento="lista"],
  .coluna-detalhe[data-movimento="coluna"]
) {
  animation: none;
}

@media (prefers-reduced-motion: no-preference) {
  #tela-painel[data-painel-movimento] .coluna-lista[data-movimento="lista"]:not([hidden]) {
    animation: jh-lista-entra var(--movimento-lista) var(--movimento-curva) 1;
  }

  #tela-painel[data-painel-movimento] .coluna-detalhe[data-movimento="coluna"]:not([hidden]) {
    animation: jh-coluna-entra var(--movimento-coluna) var(--movimento-curva) 1;
  }
}

/* Sem fill-mode persistente: transform volta ao estilo normal ao terminar,
   sem manter um novo bloco de referência para descendentes position: fixed. */
@keyframes jh-lista-entra {
  /* A lista é a referência estável; apenas a nova coluna se desloca. */
  from { opacity: .8; }
  to { opacity: 1; }
}

@keyframes jh-coluna-entra {
  from { opacity: .72; transform: translateX(8px); }
  to { opacity: 1; transform: none; }
}

/* Na vista de uma coluna basta a mudança de opacidade, sem deslizar a tela. */
@media (max-width: 1180px) and (prefers-reduced-motion: no-preference) {
  #tela-painel[data-painel-movimento] .coluna-detalhe[data-movimento="coluna"]:not([hidden]) {
    animation-name: jh-coluna-aparece;
  }
}

@keyframes jh-coluna-aparece {
  from { opacity: .8; }
  to { opacity: 1; }
}

/* Desliga somente os efeitos deste arquivo, inclusive ao mudar a preferência
   com a página aberta. Não interfere na animação de CPF nem em seus campos. */
@media (prefers-reduced-motion: reduce) {
  #tela-painel[data-painel-movimento] :is(
    .nav-item,
    .filtro-opcao,
    .ficha-abas button,
    .linha-paciente,
    .conversa-item,
    .acervo-linha,
    .resumo-pendencia,
    .btn,
    .btn-icone
  ) {
    transition: none;
  }

  #tela-painel[data-painel-movimento] :is(
    .coluna-lista[data-movimento="lista"],
    .coluna-detalhe[data-movimento="coluna"]
  ) {
    animation: none;
  }
}

/* Carregamento: o brilho se move numa camada recortada, sem animar o fundo
   de cada barra. A base continua visível se CSS ou scripts forem interrompidos.

   Até 23/09/2026 ele parecia morto, e o motivo era medível: o realce era o
   creme passando sobre a areia, quase o mesmo tom, a 65% de opacidade, e todas
   as linhas brilhavam juntas, paradas 30% do ciclo. Agora o realce é quase
   branco, o ciclo é mais curto e cada item atrasa pela posição (`--i`), então
   a espera desce pela lista em onda. */
#tela-painel[data-painel-movimento] :is(.esqueleto-barra, .esqueleto-selo, .esqueleto-circulo, .esqueleto-hora, .esqueleto-balao) {
  position: relative;
  overflow: hidden;
  animation: none;
}

#tela-painel[data-painel-movimento] :is(.esqueleto-barra, .esqueleto-selo, .esqueleto-circulo, .esqueleto-hora, .esqueleto-balao)::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 18%, rgba(255, 253, 249, .92) 50%, transparent 82%);
  transform: translateX(-110%);
}
/* No balão branco o realce branco some: ali ele é areia. */
#tela-painel[data-painel-movimento] .esqueleto-balao:not(:nth-child(4n + 2)):not(:nth-child(4n + 3))::after {
  background: linear-gradient(100deg, transparent 18%, rgba(232, 221, 200, .75) 50%, transparent 82%);
}

/* A resposta do acervo é uma sequência deliberada. O último balão começa
   em até 140 ms; nenhum conteúdo fica invisível esperando sua vez. */
#tela-painel[data-painel-movimento] .acervo-balao {
  animation: none;
  --movimento-atraso: 0ms;
}
#tela-painel[data-painel-movimento] .acervo-balao:nth-child(2) { --movimento-atraso: 35ms; }
#tela-painel[data-painel-movimento] .acervo-balao:nth-child(3) { --movimento-atraso: 70ms; }
#tela-painel[data-painel-movimento] .acervo-balao:nth-child(4) { --movimento-atraso: 105ms; }
#tela-painel[data-painel-movimento] .acervo-balao:nth-child(n + 5) { --movimento-atraso: 140ms; }

@media (prefers-reduced-motion: no-preference) {
  #tela-painel[data-painel-movimento] :is(.esqueleto-barra, .esqueleto-selo, .esqueleto-circulo, .esqueleto-hora, .esqueleto-balao)::after {
    animation: jh-espera-brilho 1400ms cubic-bezier(.45, 0, .25, 1) infinite;
    animation-delay: calc(var(--i, 0) * 90ms);
  }
  /* Os itens chegam em cascata curta. Esqueleto é estado de espera, não item
     de lista: ele é desenhado uma vez por carregamento e nunca redesenhado
     por busca ou mensagem, então a regra contra animar lista não o alcança. */
  #tela-painel[data-painel-movimento] .esqueleto > * {
    animation: jh-espera-entra 280ms var(--movimento-curva) calc(var(--i, 0) * 35ms) backwards;
  }
  #tela-painel[data-painel-movimento] .acervo-balao {
    animation: jh-resposta-entra 180ms var(--movimento-curva) var(--movimento-atraso) backwards;
  }
  body:has(#tela-painel[data-painel-movimento]) .aviso {
    animation-duration: 200ms;
    animation-timing-function: var(--movimento-curva);
  }
  body:has(#tela-painel[data-painel-movimento]) :is(.aviso.saindo, .dialogo-overlay.saindo) {
    animation-duration: var(--movimento-saida);
    animation-timing-function: ease-in;
  }
  body:has(#tela-painel[data-painel-movimento]) .dialogo-card {
    animation-duration: var(--movimento-coluna);
    animation-timing-function: var(--movimento-curva);
  }
}

@keyframes jh-espera-brilho {
  0% { transform: translateX(-110%); }
  72%, 100% { transform: translateX(110%); }
}

@keyframes jh-espera-entra {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

html[data-movimento-pausado] #tela-painel[data-painel-movimento] :is(.esqueleto-barra, .esqueleto-selo, .esqueleto-circulo, .esqueleto-hora, .esqueleto-balao)::after {
  animation-play-state: paused;
}

@keyframes jh-resposta-entra {
  from { opacity: .72; transform: translateY(3px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  /* Retorno por cor continua perceptível. Saídas são removidas pelo módulo
     TS sem aguardar um evento que o navegador pode não emitir. */
  #tela-painel[data-painel-movimento] :is(.btn, .btn-icone, .nav-item, .acervo-linha) {
    transition: background-color 80ms linear, color 80ms linear, border-color 80ms linear;
  }
  body:has(#tela-painel[data-painel-movimento]) :is(.aviso, .aviso.saindo, .dialogo-overlay, .dialogo-overlay.saindo, .dialogo-card) {
    animation: none;
  }
}