/* ==========================================================================
   Peças de produto dos blocos verdes das páginas de agente.

   Mesma régua dos quatro blocos da home (painel de métricas, trilha WORM,
   cartão de handoff, widget do WebChat). Três regras aprendidas lá e aplicadas
   aqui desde o começo:

   1. COR VEM DO TEMA. A peça pinta com os tokens da página (`--card`,
      `--stroke`, `--text`, `--chip-soft`), nunca com hex cravado. Cartão branco
      cravado vira mancha de luz no tema escuro.
   2. O CARTÃO PREENCHE O BLOCO. O slot manda a altura e o cartão ocupa tudo,
      com a região central distribuindo a sobra entre as linhas. Cartão
      centralizado dentro de um bloco que cresce com o texto ao lado produz
      cinco alturas diferentes na mesma página — foi o que aconteceu antes.
   3. TEXTO NUNCA DESBOTA. O movimento é um realce que passa, não opacidade
      baixa parada: conteúdo a 25% de opacidade lê como falha de render, não
      como animação.
   ========================================================================== */

.peca {
  position: relative;
  overflow: hidden;
  padding: 40px;
  display: grid;
  place-items: stretch;
  /* O slot é um marcador e escreve em versalete; aqui dentro vive produto. */
  text-transform: none;
  letter-spacing: normal;
  font-size: initial;
  color: var(--text);
  /* Piso comum às cinco peças da página. Sem ele, cada bloco fecha na altura do
     próprio conteúdo e a coluna de cartões fica serrilhada. */
  min-height: 440px;
}

.pc {
  --pc-grave: #b91c1c;
  --pc-alerta: #b45309;
  --pc-verde: var(--green);
  --pc-verde-texto: var(--brand-text);

  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--stroke);
  border-radius: 16px;
  box-shadow: 0 8px 26.7px rgba(9, 9, 11, 0.06);
  overflow: hidden;
  font-family: var(--font);
  text-align: left;
}
:root[data-theme="dark"] .pc {
  --pc-grave: #f87171;
  --pc-alerta: #fbbf24;
  box-shadow: 0 8px 26.7px rgba(0, 0, 0, 0.45);
}

/* --- cabeçalho ------------------------------------------------------------ */
.pc__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: none;
  padding: 13px 16px;
  border-bottom: 1px solid var(--stroke);
}
.pc__topo strong { display: block; font-size: 13px; line-height: 18px; font-weight: 500; }
.pc__topo small { display: block; margin-top: 2px; font-size: 11px; line-height: 15px; color: var(--text-muted); }

/* Faixa de rótulos de coluna, no molde da trilha da home: é ela que faz a peça
   ler como tabela de produto em vez de lista de bullets. */
.pc__cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex: none;
  padding: 6px 16px;
  background: var(--chip-soft);
  border-bottom: 1px solid var(--stroke);
}

/* --- corpo ---------------------------------------------------------------- */
/* Região que absorve a sobra de altura. Uma por cartão. */
.pc__corpo {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.pc__secao {
  padding: 12px 16px;
  border-bottom: 1px solid var(--stroke);
}
.pc__secao:last-child { border-bottom: none; }
.pc__secao--suave { background: var(--chip-soft); }
.pc__secao--fluida { flex: 1; display: flex; flex-direction: column; justify-content: center; }

.pc__rodape {
  flex: none;
  padding: 11px 16px;
  border-top: 1px solid var(--stroke);
  background: var(--chip-soft);
  display: flex;
  align-items: center;
  gap: 10px;
}

.pc__rotulo {
  display: block;
  font-size: 9px;
  line-height: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.pc__secao > .pc__rotulo { margin-bottom: 7px; }

/* --- linha de dado -------------------------------------------------------- */
.pc__lista { flex: 1; display: flex; flex-direction: column; }
/* Linha dentro de lista fluida divide a sobra: o que resta vira entrelinha
   distribuída, nunca uma faixa vazia embaixo do último item. */
.pc__lista--distribui > .pc__linha { flex: 1; }

.pc__linha {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--stroke);
}
.pc__lista > .pc__linha:last-child { border-bottom: none; }
/* Dentro de uma seção com padding lateral, a linha não repete o recuo. */
.pc__secao .pc__linha { padding-left: 0; padding-right: 0; }
.pc__secao .pc__linha:last-child { border-bottom: none; padding-bottom: 0; }
.pc__secao .pc__linha:first-of-type { padding-top: 0; }

.pc__linha--foco { background: color-mix(in oklab, var(--green) 9%, transparent); }
.pc__linha--grave { background: color-mix(in oklab, var(--pc-grave) 8%, transparent); }

.pc__txt { flex: 1; min-width: 0; }
.pc__txt strong {
  display: block;
  font-size: 12.5px;
  line-height: 17px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pc__txt small {
  display: block;
  margin-top: 1px;
  font-size: 11px;
  line-height: 15px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pc__valor {
  flex: none;
  font-size: 12.5px;
  line-height: 17px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}
.pc__valor--ok { color: var(--pc-verde-texto); }
.pc__valor--grave { color: var(--pc-grave); }

/* Painel de rastro (agente-demeter): a coluna da direita é prosa curta —
   "ledger de créditos", "trilha WORM" — e não o hash de 9 caracteres que as
   outras peças de registro põem ali. Prosa de largura fixa comia a coluna do
   slug: em 430px o `EVT-ATN-INTERNAL_QUERY · demeter` passou a cortar em pt e
   es, e o slug existe justamente para ser conferido por grep. Abaixo de 480 o
   destino desce para a própria linha e devolve a largura ao evento. Modificador
   próprio (não `[data-peca=registro]`) porque as outras quatro páginas de agente
   usam o mesmo data-attribute com hash no lugar do destino. */
.pc--rastro .pc__valor { flex: 0 1 auto; min-width: 0; text-align: right; }
/* O rodapé desta peça nomeia A QUAL das três linhas o hash pertence, então é mais
   longo que o "Hash encadeado · retido por 5 anos" das outras. Deixar quebrar é
   melhor que cortar: reticências no meio de "retido por 5 anos" apagam um prazo
   de retenção, que é justamente o que a LGPD manda declarar. */
.pc--rastro .pc__rodape .pc__txt small { white-space: normal; }
@media (max-width: 480px) {
  .pc--rastro .pc__linha { flex-wrap: wrap; row-gap: 2px; }
  .pc--rastro .pc__valor { flex-basis: 100%; text-align: left; }
  /* Com o destino descendo para a própria linha, o rótulo "Onde fica" deixa de
     ter coluna à direita para nomear — e um rótulo alinhado à direita sobre
     nada é pior do que rótulo nenhum. */
  .pc--rastro .pc__cab .pc__rotulo:last-child { display: none; }
}
.pc__mono {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 10.5px;
  line-height: 15px;
  letter-spacing: -0.02em;
  color: var(--text-muted);
}

/* --- números grandes ------------------------------------------------------ */
/* O bug que mais aparecia: número e rótulo colados ("12saté a primeira
   resposta"). `strong` e `small` soltos num flex herdam `inline` e grudam. Aqui
   a célula é bloco por construção. */
.pc__kpis {
  display: flex;
  align-items: stretch;
  flex: none;
}
.pc__kpi {
  flex: 1;
  min-width: 0;
  padding: 11px 16px;
  border-right: 1px solid var(--stroke);
}
.pc__kpi:last-child { border-right: none; }
.pc__kpi strong {
  display: block;
  font-size: 22px;
  line-height: 26px;
  font-weight: 600;
  letter-spacing: -0.6px;
  font-variant-numeric: tabular-nums;
}
.pc__kpi small {
  display: block;
  margin-top: 2px;
  font-size: 10.5px;
  line-height: 14px;
  color: var(--text-muted);
}
.pc__kpi--ok strong { color: var(--pc-verde-texto); }
.pc__kpi--grave strong { color: var(--pc-grave); }

/* --- selos ---------------------------------------------------------------- */
.pc__selo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  font-size: 10px;
  line-height: 14px;
  font-weight: 500;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--chip);
  color: var(--text-muted);
  white-space: nowrap;
}
.pc__selo--vivo { background: color-mix(in oklab, var(--green) 16%, transparent); color: var(--pc-verde-texto); }
.pc__selo--grave { background: color-mix(in oklab, var(--pc-grave) 13%, transparent); color: var(--pc-grave); }
.pc__selo--alerta { background: color-mix(in oklab, var(--pc-alerta) 15%, transparent); color: var(--pc-alerta); }
.pc__ponto { width: 6px; height: 6px; border-radius: 999px; background: currentColor; flex: none; animation: pc-pulso 2.4s ease-in-out infinite; }
@keyframes pc-pulso { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.pc__icone {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  flex: none;
  background: var(--chip);
  color: var(--text-muted);
}
.pc__icone--ok { background: color-mix(in oklab, var(--green) 16%, transparent); color: var(--pc-verde-texto); }
.pc__icone--bloq { background: color-mix(in oklab, var(--pc-grave) 13%, transparent); color: var(--pc-grave); }
.pc__icone--alerta { background: color-mix(in oklab, var(--pc-alerta) 15%, transparent); color: var(--pc-alerta); }

/* --- barra de medida ------------------------------------------------------ */
.pc__medida + .pc__medida { margin-top: 11px; }
/* Numa seção que absorve sobra, as medidas respiram junto em vez de ficarem
   grudadas no meio de um vazio. */
.pc__secao--fluida .pc__medida + .pc__medida { margin-top: 20px; }
.pc__medida-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.pc__medida-topo strong { font-size: 12.5px; line-height: 17px; font-weight: 500; }
.pc__barra {
  height: 6px;
  margin-top: 6px;
  border-radius: 999px;
  background: var(--chip);
  overflow: hidden;
}
.pc__barra i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--green);
  width: var(--w, 40%);
  transform-origin: left;
  animation: pc-enche 7s cubic-bezier(0.33, 1, 0.68, 1) infinite;
}
.pc__barra--teto i { background: var(--pc-grave); }
@keyframes pc-enche { 0% { transform: scaleX(0.06); } 35%, 92% { transform: scaleX(1); } 100% { transform: scaleX(0.06); } }

/* --- gráfico de colunas --------------------------------------------------- */
.pc__grafico { display: flex; align-items: flex-end; gap: 4px; height: 84px; }
.pc__grafico span {
  flex: 1;
  border-radius: 4px 4px 2px 2px;
  background: color-mix(in oklab, var(--green) 28%, transparent);
  transform-origin: bottom;
  animation: pc-sobe-barra 7s cubic-bezier(0.33, 1, 0.68, 1) infinite;
}
.pc__grafico span.pc-alto { background: color-mix(in oklab, var(--green) 55%, transparent); }
.pc__grafico span.pc-pico { background: var(--green); }
@keyframes pc-sobe-barra { 0% { transform: scaleY(0.1); } 30%, 92% { transform: scaleY(1); } 100% { transform: scaleY(0.1); } }
.pc__eixo { display: flex; justify-content: space-between; margin-top: 7px; font-size: 9.5px; line-height: 13px; color: var(--text-muted); }

/* --- linha do tempo ------------------------------------------------------- */
/* Trilho vertical ligando as etapas: sem ele a sequência lê como quatro fatos
   soltos, e o que a peça conta é justamente a ordem. */
.pc__passos { position: relative; padding-left: 2px; }
.pc__passo { position: relative; display: flex; align-items: center; gap: 12px; padding: 7px 0; }
.pc__passo::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 50%;
  bottom: -7px;
  width: 1px;
  background: var(--stroke);
}
.pc__passo:last-child::before { display: none; }
.pc__passo .pc__icone { width: 26px; height: 26px; position: relative; z-index: 1; }

/* --- conversa ------------------------------------------------------------- */
.pc__chat { display: flex; flex-direction: column; gap: 6px; }
.pc__msg {
  max-width: 84%;
  padding: 8px 12px;
  font-size: 12.5px;
  line-height: 18px;
  border-radius: 14px 14px 14px 5px;
  /* Cores cheias do widget, iguais às da home: as misturas do produto, isoladas
     num slot, leem como tinta lavada. */
  background: #e7e7e7;
  color: #505050;
}
.pc__msg--eu {
  align-self: flex-end;
  background: #00a35d;
  color: #000;
  border-radius: 999px 999px 5px 999px;
}
.pc__msg--larga { max-width: 100%; }
.pc__msg--alerta {
  max-width: 100%;
  background: color-mix(in oklab, var(--pc-grave) 10%, transparent);
  color: var(--pc-grave);
  border-radius: 12px;
  border: 1px dashed color-mix(in oklab, var(--pc-grave) 35%, transparent);
}

/* Bloco de código/evento cru. */
.pc__cru {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 11px;
  line-height: 19px;
  color: var(--text);
}
.pc__cru b { font-weight: 500; color: var(--pc-grave); }

/* --- movimento -------------------------------------------------------------
   Ciclo de 7s, o mesmo do resto da página. O conteúdo fica legível o tempo
   todo; o que se move é o realce. */
[data-pc] {
  animation-duration: 7s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
}
[data-pc="surge"] { animation-name: pc-surge; }
[data-pc="realce"] { animation-name: pc-realce; }
[data-pc="marca"] { animation-name: pc-marca; }
[data-pc="sobe"] { animation-name: pc-sobe; }

@keyframes pc-surge {
  0% { opacity: 0; transform: translateY(7px); }
  11%, 100% { opacity: 1; transform: none; }
}
/* Realce que passa pela linha — sem mexer na opacidade do texto. Pinta em
   `background-image`, não em `background-color`: a cor de fundo é do estado da
   linha (`--foco`, `--grave`), e animar a mesma propriedade apagava o estado
   assim que o gesto terminava. */
@keyframes pc-realce {
  0%, 6% { background-image: linear-gradient(transparent, transparent); }
  10%, 22% {
    background-image: linear-gradient(
      color-mix(in oklab, var(--green) 15%, transparent),
      color-mix(in oklab, var(--green) 15%, transparent));
  }
  46%, 100% { background-image: linear-gradient(transparent, transparent); }
}
@keyframes pc-marca {
  0%, 42% { opacity: 0; transform: scale(1.3); }
  54%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes pc-sobe {
  0% { opacity: 0; transform: translateY(22px); }
  16%, 100% { opacity: 1; transform: none; }
}

[data-espera="1"] { animation-delay: 0.35s; }
[data-espera="2"] { animation-delay: 0.8s; }
[data-espera="3"] { animation-delay: 1.25s; }
[data-espera="4"] { animation-delay: 1.7s; }
[data-espera="5"] { animation-delay: 2.15s; }

@media (prefers-reduced-motion: reduce) {
  [data-pc], .pc__barra i, .pc__ponto, .pc__grafico span { animation: none !important; }
  [data-pc] { opacity: 1; transform: none; }
}

@media (max-width: 980px) {
  .peca { padding: 24px; min-height: 420px; }
}
@media (max-width: 720px) {
  .peca { padding: 16px; }
  .pc__kpi { padding: 10px 12px; }
  .pc__kpi strong { font-size: 19px; line-height: 23px; }
}