/* css/agente.css — folha da página /agente (dona: a página). Vem depois do site.css e do inbox.css.
   Toda regra é .ag-* (classe que só esta página usa) ou fica sob main[data-page="agente"]. Cores só da paleta
   escura do site.css e do inbox.css. Os cartões da conversa (pedido de ajuda, instrução) são do kit: .ibx-card. */

/* ── topo: a janela do inbox na coluna da direita ── */
.ag-hero-window {
  min-width: 0;
}

/* a foto do contato, em traço fino, dentro da bolha (o `text` da mensagem; a descrição vem embaixo) */
.ag-photo {
  display: block;
  width: 100%;
  max-width: 230px;
  height: auto;
  aspect-ratio: 16 / 10;
  border-radius: 6px;
  background: #1d1f24;
  fill: none;
  stroke: #a3a6b2;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── pedido de ajuda: as etapas à esquerda e a conversa à direita, no mesmo [data-cycle] ──
   A etapa atual ganha o fio azul (como a etapa escolhida do .flow-track); na conversa, o que ainda não
   aconteceu fica invisível no lugar, então a janela não muda de altura. Sem JS ou com "reduzir movimento",
   tudo aparece de uma vez, parado. */
.ag-loop {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
.ag-steps {
  position: sticky;
  top: 120px;
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid #3c434e;
}
.ag-steps li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: 10px;
  row-gap: 6px;
  padding: 17px 0 18px 14px;
  border-bottom: 1px solid #3c434e;
  box-shadow: inset 2px 0 transparent;
}
.ag-step-n {
  font: 400 .75rem/1.6 var(--mono);
  color: #a7b2c4;
}
.ag-steps strong {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.4;
  color: #e6eaf0;
}
.ag-steps p {
  grid-column: 2;
  font-size: .875rem;
  line-height: 1.6;
  color: #b0b9c8;
}
.ag-steps li.is-active {
  box-shadow: inset 2px 0 #8abaff;
}
.ag-steps li.is-active .ag-step-n {
  color: #bdd7ff;
}
.ag-loop + .feature-grid {
  margin-top: 56px;
}
/* a faixa termina numa grade (e não na nota curta do cross docking): o respiro de baixo iguala o de cima */
main[data-page="agente"] .flow-section {
  padding-bottom: 78px;
}

@media (prefers-reduced-motion: no-preference) {
  .js-motion .ag-steps li[data-cycle-at] {
    transition: opacity .5s var(--motion-ease), box-shadow .5s var(--motion-ease);
  }
  .js-motion .ag-steps li:not(.is-active) {
    opacity: .5;
  }
  .js-motion .ag-loop .ibx-thread [data-cycle-at]:not(.is-active):not(.is-done) {
    opacity: 0;
  }
}

/* ── equipe no controle: o link para /equipe depois da grade (sem fio: o da seção seguinte já divide) ── */
.ag-foot {
  margin-top: 30px;
}

/* ── áudio e foto ── */
.ag-note {
  max-width: 640px;
  margin-top: 18px;
  font-size: .8125rem;
  line-height: 1.7;
  color: #b1b3be;
}

@media (max-width: 1100px) {
  .ag-loop {
    grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
    gap: 32px;
  }
}
@media (max-width: 800px) {
  .ag-loop {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .ag-steps {
    position: static;
  }
  .ag-steps li {
    padding: 15px 0 15px 12px;
  }
  .ag-loop + .feature-grid {
    margin-top: 40px;
  }
  main[data-page="agente"] .flow-section {
    padding-bottom: 52px;
  }
  .ag-foot {
    margin-top: 22px;
  }
}