/* ==========================================================================
   ChatISP: /inteligencia-artificial

   So o que e EXCLUSIVO desta pagina. Capa, painel, passos, dupla, citacao,
   especificacoes, linha do tempo, relacionadas e chamada vivem em
   css/pagina.css; grade, cartao, acordeao e lista-marcada vivem em
   css/site.css.

   Duas pecas proprias, as duas tipograficas, porque nao ha fotografia
   possivel para o argumento desta pagina:

     .ia-mock   a conversa da capa. O que importa nela nao e o balao: e o
                CORTE no meio, a linha em que a IA sai e a pessoa entra.
     .trilho    a linha do tempo do mesmo atendimento, na secao #repasse.
                O fio do repasse e tracejado de proposito: e o unico trecho
                em que ninguem esta com a conversa.

   Ha ainda dois ajustes de meia linha (.ia-linha-link, .ia-perguntas) que
   caberiam em css/pagina.css, mas outros agentes estao editando o kit ao
   mesmo tempo, entao ficam aqui.

   Nenhum valor escrito a mao: so var().
   ========================================================================== */

/* --------------------------------------------------------------------------
   01. Maquete da conversa (capa)
   -------------------------------------------------------------------------- */

.ia-mock {
  display: grid;
  gap: var(--e4);
  padding: var(--e4);
  border-radius: var(--r-lg);
  background: var(--sup-1);
  border: 1px solid var(--borda);
  box-shadow: var(--sombra-2);
}

.ia-mock-topo {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--e3);
  padding-bottom: var(--e4);
  border-bottom: 1px solid var(--borda);
}

.ia-mock-etapa {
  padding: var(--e1) var(--e3);
  border-radius: var(--r-full);
  background: var(--verde-vidro);
  border: 1px solid var(--verde-linha);
  color: var(--verde);
  font-size: var(--c5);
  font-weight: var(--p-forte);
  letter-spacing: var(--tk-largo);
  text-transform: uppercase;
}

.ia-mock-protocolo {
  color: var(--tenue);
  font-size: var(--c5);
  letter-spacing: var(--tk-micro);
}

.ia-mock-fala {
  display: grid;
  gap: var(--e3);
}

.ia-mock-balao {
  max-width: 88%;
  margin: 0;
  padding: var(--e3) var(--e4);
  border-radius: var(--r-md);
  font-size: var(--c3);
  line-height: 1.6;
}

/* O nome de quem fala vira rotulo: e ele que deixa visivel, sem legenda, que
   o ultimo balao mudou de dono. */
.ia-mock-balao b {
  display: block;
  margin-bottom: var(--e1);
  font-size: var(--c5);
  font-weight: var(--p-forte);
  letter-spacing: var(--tk-largo);
  text-transform: uppercase;
}

.ia-mock-balao--cliente {
  justify-self: start;
  border-end-start-radius: var(--r-sm);
  background: var(--sup-2);
  border: 1px solid var(--borda);
  color: var(--suave);
}

.ia-mock-balao--ia {
  justify-self: end;
  border-end-end-radius: var(--r-sm);
  background: var(--verde-vidro);
  border: 1px solid var(--verde-linha);
  color: var(--texto);
}

.ia-mock-balao--ia b {
  color: var(--verde);
}

/* A pessoa fala em superficie solida, sem verde: e a diferenca que o olho
   pega antes de ler o nome. */
.ia-mock-balao--equipe {
  justify-self: end;
  border-end-end-radius: var(--r-sm);
  background: var(--sup-3);
  border: 1px solid var(--borda-forte);
  color: var(--texto);
}

.ia-mock-balao--equipe b {
  color: var(--suave);
}

/* --- O corte -------------------------------------------------------------
   A imagem do argumento da pagina. Fio tracejado atravessando a maquete e um
   selo no meio dele: a maquina sai aqui, a pessoa entra depois. */
.ia-mock-corte {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--e2);
  padding-block: var(--e5) var(--e3);
}

.ia-mock-corte::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 1px;
  background: repeating-linear-gradient(
    to right,
    var(--borda-forte) 0 var(--e2),
    transparent var(--e2) var(--e4)
  );
}

.ia-mock-selo {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  padding: var(--e2) var(--e4);
  border-radius: var(--r-full);
  background: var(--sup-0);
  border: 1px solid var(--verde-linha);
  color: var(--verde);
  font-size: var(--c5);
  font-weight: var(--p-forte);
  letter-spacing: var(--tk-micro);
}

.ia-mock-selo::before {
  content: "";
  width: var(--e2);
  height: var(--e2);
  border-radius: var(--r-full);
  background: var(--verde);
}

.ia-mock-nota {
  color: var(--tenue);
  font-size: var(--c5);
  line-height: 1.5;
  text-align: center;
}

/* --------------------------------------------------------------------------
   02. Trilho: a linha do tempo do atendimento (#repasse)

   Mora dentro de um .painel do kit; aqui so a lista. O fio e a borda
   esquerda do corpo de cada marco, entao ele e continuo de um item ao outro
   sem depender da altura do texto.
   -------------------------------------------------------------------------- */

.trilho {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.trilho-marca {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--e4);
  padding-bottom: var(--e6);
}

.trilho-marca:last-child {
  padding-bottom: 0;
}

.trilho-hora {
  color: var(--tenue);
  font-size: var(--c5);
  letter-spacing: var(--tk-micro);
  font-variant-numeric: tabular-nums;
}

.trilho-corpo {
  position: relative;
  display: block;
  padding-inline-start: var(--e5);
  border-inline-start: 1px solid var(--borda);
}

.trilho-marca:last-child .trilho-corpo {
  border-inline-start-color: transparent;
}

.trilho-corpo::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: var(--e3);
  height: var(--e3);
  translate: -50% 0;
  border-radius: var(--r-full);
  background: var(--sup-1);
  border: 1px solid var(--borda-forte);
}

.trilho-corpo strong {
  display: block;
  color: var(--texto);
  font-size: var(--c3);
  font-weight: var(--p-forte);
  line-height: 1.4;
}

.trilho-corpo span {
  display: block;
  margin-top: var(--e1);
  color: var(--suave);
  font-size: var(--c5);
  line-height: 1.6;
}

.trilho-marca--ia .trilho-corpo::before {
  border-color: var(--verde-linha);
  background: var(--verde-vidro);
}

/* O unico trecho tracejado do trilho: entre o pedido de transferencia e a
   pessoa assumindo, a conversa nao esta com ninguem. */
.trilho-marca--corte .trilho-corpo {
  border-inline-start-style: dashed;
  border-inline-start-color: var(--verde-linha);
}

.trilho-marca--corte .trilho-corpo::before,
.trilho-marca--gente .trilho-corpo::before {
  background: var(--verde);
  border-color: var(--verde);
}

/* --------------------------------------------------------------------------
   03. Dois ajustes de meia linha
   -------------------------------------------------------------------------- */

/* Link solto depois de uma grade: precisa do respiro de bloco. */
.ia-linha-link {
  margin: var(--esp-bloco) 0 0;
}

/* A citacao dentro da coluna de texto da .dupla: o figure vem com margem do
   navegador. */
.ia-citacao {
  margin: 0;
}

/* Pergunta longa em linha de 1440px cansa: o acordeao para na medida de
   leitura, e nao na largura do container. */
.ia-perguntas {
  max-width: 82ch;
}

/* --------------------------------------------------------------------------
   04. Responsivo: 980 / 680
   -------------------------------------------------------------------------- */

@media (max-width: 980px) {
  .ia-mock-balao {
    max-width: 92%;
  }
}

@media (max-width: 680px) {
  .ia-mock-topo {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    gap: var(--e2);
  }

  .ia-mock-balao {
    max-width: 100%;
  }

  .trilho-marca {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--e2);
    padding-bottom: var(--e5);
  }

  /* Sem a coluna da hora o fio perderia o alinhamento; ele sai, e a hora
     vira etiqueta acima do marco. */
  .trilho-corpo {
    padding-inline-start: var(--e4);
  }
}