/* Estado do fluxo com cor (20/09, Daniel). Mapa das cores: CORES_ESTADO em
   web/js/ficha.js, aplicado como --cor-estado (mesmo padrão do --cor-etapa).
   Roxo, azul-escuro e rosa (sem resposta do lead) não existiam na paleta; os
   demais são variáveis de estilo.css. */
:root { --roxo: #a855f7; --azul-escuro: #1d4ed8; --rosa: #ec4899; }
html[data-tema="claro"] { --roxo: #7c3aed; --azul-escuro: #1e3a8a; --rosa: #be185d; }

/* ficha: bolinha + select com borda esquerda na cor do estado atual */
.ficha-estado-cor { --cor-estado: var(--texto-3); display: flex; align-items: center; gap: 6px; }
/* esfumaçado na cor do estado (20/09 noite, Daniel): fundo que sai da cor e some para o input */
.ficha-estado-cor select {
  flex: 1; min-width: 0; border-left: 3px solid var(--cor-estado);
  border-color: color-mix(in srgb, var(--cor-estado) 45%, var(--borda)); border-left-color: var(--cor-estado);
  background-image: linear-gradient(90deg, color-mix(in srgb, var(--cor-estado) 22%, var(--input)), color-mix(in srgb, var(--cor-estado) 6%, var(--input)) 70%, var(--input));
  color: var(--texto); font-weight: 600;
}
.chip-estado-cor {
  flex: none; width: 10px; height: 10px; border-radius: 50%;
  background: var(--cor-estado);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cor-estado) 30%, transparent);
}

/* conversa fechada: mesma cor de "fechada" na caixa de resumo */
.fluxo-encerrado { border-left: 3px solid var(--cor-estado, var(--texto-3)); }


/* lista: anel do avatar pulsa enquanto o estado é 'novo' (classe posta em inbox.js) */
.avatar-pulsa { animation: anel-pulsa 1.6s ease-in-out infinite; }
@keyframes anel-pulsa {
  0%, 100% { box-shadow: 0 0 0 2px var(--fundo), 0 0 0 4px var(--cor-estado); }
  50%      { box-shadow: 0 0 0 2px var(--fundo), 0 0 0 7px color-mix(in srgb, var(--cor-estado) 45%, transparent); }
}
/* 'em_atendimento': pulso leve — mais lento e menor que o do 'novo' (20/09 noite, Daniel) */
.avatar-pulsa-leve { animation: anel-pulsa-leve 2.6s ease-in-out infinite; }
@keyframes anel-pulsa-leve {
  0%, 100% { box-shadow: 0 0 0 2px var(--fundo), 0 0 0 4px var(--cor-estado); }
  50%      { box-shadow: 0 0 0 2px var(--fundo), 0 0 0 5.5px color-mix(in srgb, var(--cor-estado) 60%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .avatar-pulsa, .avatar-pulsa-leve { animation: none; } }