/* ==========================================================================
   PRISMA · identity.css — avatar, status, badge, chip
   --------------------------------------------------------------------------
   Aqui mora a distinção que o ÁGORA exige: PESSOA e AGENTE não se
   representam do mesmo jeito. Quem olha o painel precisa saber, sem ler,
   se aquilo é a Priscila ou o Teseu.

   A convenção do sistema:
     · pessoa  -> avatar CIRCULAR
     · agente  -> avatar de cantos arredondados (squircle)
   Forma, não cor: quem não distingue cor continua distinguindo pessoa de
   agente. Cor fica para a identidade de cada agente.
   ========================================================================== */

.avatar {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 40px; height: 40px;
  border-radius: 50%;                 /* pessoa */
  background: var(--surface-3);
  color: var(--text-primary);
  font-size: var(--label-size);
  font-weight: 600;
  letter-spacing: -0.01em;
  overflow: visible;
  user-select: none;
}
.avatar img {
  width: 100%; height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

/* Agente: squircle. A curvatura maior já lê como "peça de software". */
.avatar--agente { border-radius: var(--radius-md); }

.avatar--xs { width: 24px; height: 24px; font-size: 10px; }
.avatar--sm { width: 32px; height: 32px; font-size: var(--caption-size); }
.avatar--lg { width: 56px; height: 56px; font-size: var(--body-size); }
.avatar--xl { width: 80px; height: 80px; font-size: var(--h4-size); }

/* Avatar de iniciais: a cor vem da identidade do agente, via --avatar-cor. */
.avatar--iniciais {
  background: color-mix(in srgb, var(--avatar-cor, var(--accent-primary)) 22%, var(--surface-2));
  color: var(--avatar-cor, var(--accent-text));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--avatar-cor, var(--accent-primary)) 32%, transparent);
}

/* Grupo: sobreposição com recorte, para a borda não virar anel sobre anel. */
.avatar-grupo { display: inline-flex; align-items: center; padding-inline-start: 8px; }
.avatar-grupo > .avatar {
  margin-inline-start: -8px;
  box-shadow: 0 0 0 2px var(--background-canvas);
}
.avatar-grupo > .avatar-resto {
  margin-inline-start: -8px;
  display: inline-grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--surface-3); color: var(--text-secondary);
  font-size: var(--caption-size); font-weight: 600;
  box-shadow: 0 0 0 2px var(--background-canvas);
}

/* --------------------------------------------------------------------------
   PONTO DE STATUS
   Nunca aparece sozinho: sempre acompanhado de texto ou title/aria-label.
   Cor + posição + rótulo. Nunca cor só.
   -------------------------------------------------------------------------- */
.status-ponto {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  flex: none;
  background: var(--text-muted);
  box-shadow: 0 0 0 2px var(--background-canvas);
}
.status-ponto--online      { background: var(--success); }
.status-ponto--ocupado     { background: var(--warning); }
.status-ponto--processando { background: var(--accent-text); animation: prisma-pulsar 1.8s ease-in-out infinite; }
.status-ponto--erro        { background: var(--danger); }
.status-ponto--offline     { background: var(--text-disabled); }
.status-ponto--indisponivel{ background: transparent; box-shadow: 0 0 0 2px var(--background-canvas),
                                                                  inset 0 0 0 1.5px var(--text-disabled); }

/* Preso ao avatar. */
.avatar > .status-ponto {
  position: absolute;
  right: -1px; bottom: -1px;
}

@keyframes prisma-pulsar {
  0%, 100% { opacity: 1;   box-shadow: 0 0 0 2px var(--background-canvas), 0 0 0 0 var(--accent-muted); }
  50%      { opacity: .85; box-shadow: 0 0 0 2px var(--background-canvas), 0 0 0 5px transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .status-ponto--processando { animation: none; }
}

/* Anel de "trabalhando agora" ao redor do avatar do agente. */
.avatar--trabalhando { box-shadow: var(--glow-processing); }

/* --------------------------------------------------------------------------
   BADGE — estado, contagem, categoria
   Badge é etiqueta de LEITURA. Não clica. Se clica, é chip.
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-2);
  padding: 3px var(--espaco-3);
  border-radius: var(--radius-full);
  font-size: var(--caption-size);
  font-weight: 550;
  line-height: 1.5;
  white-space: nowrap;
  background: var(--surface-3);
  color: var(--text-secondary);
  border: 1px solid transparent;
}
.badge svg { width: 14px; height: 14px; flex: none; stroke-width: var(--icone-traco); }

/* O pontinho antes do texto é o que faz o estado ser lido sem depender de cor. */
.badge--ponto::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex: none;
}

.badge--sucesso { background: var(--success-surface); color: var(--success); }
.badge--atencao { background: var(--warning-surface); color: var(--warning); }
.badge--perigo  { background: var(--danger-surface);  color: var(--danger); }
.badge--info    { background: var(--info-surface);    color: var(--info); }
.badge--acento  { background: var(--accent-muted);    color: var(--accent-text); }
.badge--contorno{ background: transparent; border-color: var(--border-default); color: var(--text-secondary); }

/* Contador numérico. */
.badge--numero {
  min-width: 20px; height: 20px; padding: 0 6px;
  justify-content: center;
  font-variant-numeric: tabular-nums;
  background: var(--accent-primary); color: var(--text-on-accent);
}

/* --------------------------------------------------------------------------
   CHIP — etiqueta que RESPONDE ao clique
   -------------------------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-2);
  min-height: 36px;
  padding: 0 var(--espaco-4);
  border-radius: var(--radius-full);
  background: var(--surface-2);
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
  font-size: var(--body-sm-size);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--motion-fast) var(--easing-standard),
              border-color var(--motion-fast) var(--easing-standard),
              color var(--motion-fast) var(--easing-standard);
}
.chip:hover { border-color: var(--border-strong); color: var(--text-primary); }
.chip svg { width: 16px; height: 16px; flex: none; stroke-width: var(--icone-traco); }

/* aria-pressed carrega o estado; o CSS só o mostra. */
.chip[aria-pressed="true"],
.chip--ativo {
  background: var(--accent-muted);
  border-color: color-mix(in srgb, var(--accent-primary) 45%, transparent);
  color: var(--accent-text);
}

/* Chip de sugestão: o que a IA oferece como próximo passo. Vidro, porque
   flutua sobre a conversa e não é conteúdo dela. */
.chip--sugestao {
  background-color: var(--surface-glass);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturacao));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturacao));
  border-color: var(--border-glass);
  color: var(--text-primary);
}

/* Chip removível. */
.chip-remover {
  display: inline-grid; place-items: center;
  width: 18px; height: 18px; margin-inline-end: -6px;
  border-radius: 50%; color: var(--text-muted); cursor: pointer;
}
.chip-remover:hover { background: var(--surface-3); color: var(--text-primary); }

/* --------------------------------------------------------------------------
   TAG — classificação editorial (tema, habilidade, série, componente)
   Retangular de propósito: não se confunde com estado nem com filtro.
   -------------------------------------------------------------------------- */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px var(--espaco-2);
  border-radius: var(--radius-xs);
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  font-size: var(--caption-size);
  font-family: var(--fonte-mono);
  letter-spacing: -0.01em;
}

/* --------------------------------------------------------------------------
   AGENTE: RETRATO PRIMEIRO; INICIAL É RESERVA, E UMA LETRA SÓ  (19/09/2026)
   A autora apontou: "ÍR" lê como o verbo IR com acento errado — erro de português na
   vitrine de uma plataforma para professores. Duas letras de um nome próprio podem formar
   palavra (ÍR, FO, AR…). Regra:
     1. agente com retrato oficial usa <img> dentro de .avatar--agente (assets/agentes/);
     2. sem retrato, a reserva é UMA LETRA SÓ: <span class="avatar avatar--agente avatar--iniciais">Í</span>.
   Pessoa (círculo) continua com duas iniciais: "PG" não forma palavra e é convenção conhecida.
   -------------------------------------------------------------------------- */
.avatar--agente img { border-radius: inherit; }