/* ══ Páginas de canal (/solucoes/<canal>) ═════════════════════════════════════
   As seis páginas de canal dividem o mesmo molde (solucoes.php) e antes
   mostravam o mesmo mock cinza em todas: "Pergunta do cliente chega aqui".
   Aqui mora o que substituiu aquilo: a janela do canal com a cara do próprio
   canal, e os exemplos do que a EvoTalks faz dentro dele.

   DONO DO FATO: a aparência de cada canal (cor da barra, cor do balão, papel
   de parede) vem em variáveis escritas pelo PHP no elemento `.cn-app`, e não
   daqui. Este arquivo só sabe desenhar uma janela de conversa genérica.

   Sem sombra nas janelas de propósito: painel parado não leva box-shadow
   (regra do site), então a separação é feita com borda de 1px. */

/* ── A janela ────────────────────────────────────────────────────────────── */
.cn-app {
  /* Valores neutros: quem manda são as variáveis inline do PHP. */
  --cn-head: #1bbf5d;
  --cn-head-fg: #fff;
  --cn-wall: #f3f5f7;
  --cn-us: #1bbf5d;
  --cn-us-fg: #fff;
  --cn-them: #fff;
  --cn-them-fg: #1e2026;
  --cn-accent: #1bbf5d;

  display: flex;
  flex-direction: column;
  background: var(--cn-wall);
  border: 1px solid rgba(15, 22, 38, 0.1);
  border-radius: 20px;
  overflow: hidden;
  width: 100%;
}

/* Barra de cima: avatar do canal, nome do negócio e um estado curto. */
.cn-app-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: var(--cn-head);
  color: var(--cn-head-fg);
  flex-shrink: 0;
}
.cn-app-top.is-light { border-bottom: 1px solid rgba(15, 22, 38, 0.08); }
.cn-app-ava {
  position: relative;
  width: 32px; height: 32px;
  flex-shrink: 0;
}
.cn-app-ava > img { width: 100%; height: 100%; border-radius: 50%; display: block; }
/* Selo do canal, encostado no canto do avatar. O fundo branco segura o
   contraste tanto na barra verde escura quanto na barra clara. */
.cn-app-ava-ch {
  position: absolute;
  right: -5px; bottom: -5px;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid #fff;
  display: grid; place-items: center;
  overflow: hidden;
}
.cn-app-ava-ch img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cn-app-id { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.cn-app-id b { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cn-app-id span { font-size: 11px; opacity: .75; }
/* Não existe selo "verificado" na barra: ficava feio e o recado de canal
   oficial já está no corpo da página, no distintivo da Meta e nos números. */

/* Corpo: onde as mensagens moram.
   A textura é a MESMA do cartão do WhatsApp do site e da tela da Febratex
   (assets/img/fb-padrao.svg), desenhada com os ícones do iconixto que o site
   licencia. O contraste dela é baixíssimo de propósito, textura que se percebe
   compete com o texto. */
.cn-app-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 13px;
  background-color: var(--cn-wall);
  background-image: url(../img/fb-padrao.svg);
  background-repeat: repeat;
  background-size: 620px;   /* mesmo ladrilho do resto do site */
  flex: 1;
  min-height: 0;
}

/* A janela do hero tem altura fixa: as mensagens entram uma a uma e, sem
   altura reservada, a página inteira pulava a cada mensagem nova. Empilham de
   baixo pra cima, e a conversa antiga sai por cima igual num app de verdade. */
/* `is-vivo` só entra quando o JavaScript assume o ritmo. Sem ele a janela
   cresce e mostra a conversa inteira, em vez de cortar o que não coube. */
.cn-app.is-film.is-vivo .cn-app-body {
  /* `flex: 0 0 auto` junto porque o `flex: 1` da regra de cima disputa com a
     altura fixa e o resultado muda de canal pra canal. */
  flex: 0 0 auto;
  /* 420 é o que faz a conversa inteira caber quase sempre: com menos que isso
     o cartão de produto saía junto quando a última mensagem chegava. */
  height: 420px;
  box-sizing: border-box;
  /* De cima pra baixo. Ancorada embaixo, a janela abria o filme com um vazio
     enorme por cima das duas primeiras mensagens, que lia como erro de
     desenho. Assim a conversa enche de cima, e o espaço que sobra fica onde a
     próxima mensagem vai cair. */
  justify-content: flex-start;
  overflow: hidden;
}

/* ── A entrada de cada mensagem ───────────────────────────────────────────────
   Só vale com `is-vivo`, ou seja, quando o JavaScript está conduzindo a
   conversa. Sem ele a página já nasce com tudo na tela, e animar tudo de uma
   vez viraria pisca-pisca.

   A mensagem sobe e desliza do lado de onde ela vem: a nossa entra pela
   direita, a de quem chega entra pela esquerda. É pouco de propósito, o que se
   quer é tirar o aparecer seco, não chamar atenção pro movimento. */
@keyframes cn-entra-esq {
  from { opacity: 0; transform: translate(-7px, 9px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes cn-entra-dir {
  from { opacity: 0; transform: translate(7px, 9px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes cn-entra-meio {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}
/* A entrada é disparada por CLASSE, posta pelo JS na hora que a mensagem
   aparece, e não pela simples presença do elemento. O motivo: a janela do hero
   esconde por `display` e a dos exemplos por `visibility`, e `visibility` NÃO
   reinicia animação. Sem a classe, a conversa dos exemplos animava sozinha no
   carregamento, escondida, e chegava pronta na hora de aparecer. */
.cn-app.is-vivo .cn-app-body > .cn-entrou {
  animation: cn-entra-esq .42s cubic-bezier(.16, 1, .3, 1) both;
}
.cn-app.is-vivo .cn-app-body > .is-us.cn-entrou,
.cn-app.is-vivo .cn-app-body > .cn-b.is-us + .cn-btns.cn-entrou {
  animation-name: cn-entra-dir;
}
/* A linha da EvoTalks é registro do sistema, fica no meio e não tem lado. */
.cn-app.is-vivo .cn-app-body > .cn-sys.cn-entrou {
  animation-name: cn-entra-meio;
  animation-duration: .5s;
}

/* ── Balões ──────────────────────────────────────────────────────────────── */
.cn-b {
  max-width: 84%;
  padding: 9px 12px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.45;
  align-self: flex-start;
  background: var(--cn-them);
  color: var(--cn-them-fg);
  border-bottom-left-radius: 5px;
  word-break: break-word;
}
.cn-b.is-us {
  align-self: flex-end;
  background: var(--cn-us);
  color: var(--cn-us-fg);
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 5px;
}
.cn-b b { font-weight: 600; }
/* Etiqueta miúda dentro do balão: "Agente de IA", "Ana, vendas". */
.cn-b .cn-quem {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  opacity: .6;
  margin-bottom: 3px;
}
/* Em balão de cor sólida a etiqueta é branca, e .6 de opacidade some. */
.cn-b.is-us .cn-quem { opacity: .82; }

/* Linha de sistema: é aqui que a EvoTalks aparece fazendo o serviço.
   Some no meio da conversa igual aviso de app, então precisa ler como
   registro do sistema e não como mensagem de alguém. */
.cn-sys {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 92%;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(15, 22, 38, 0.06);
  color: #4a5160;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
}
.cn-sys .ico { color: var(--cn-accent); }
.cn-sys b { font-weight: 600; color: #1e2026; }

/* ── Cartão dentro da conversa (produto, pedido, cobrança) ───────────────── */
.cn-card {
  align-self: flex-start;
  width: 84%;
  /* Branco, e não a cor do balão: o cartão tem borda própria e precisa se
     destacar do balão comum, que agora é cinza claro. */
  background: #fff;
  color: var(--cn-them-fg);
  border: 1px solid rgba(15, 22, 38, 0.08);
  border-radius: 14px;
  border-bottom-left-radius: 5px;
  padding: 11px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cn-card.is-us { align-self: flex-end; border-bottom-left-radius: 14px; border-bottom-right-radius: 5px; }
.cn-card-tit {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: 13px; font-weight: 600;
}
.cn-card-tit .cn-preco { font-size: 13px; font-weight: 600; color: var(--cn-accent); white-space: nowrap; }
.cn-card-linhas { display: flex; flex-direction: column; gap: 4px; }
.cn-card-linhas span {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; line-height: 1.4; color: #4a5160;
}
.cn-card-linhas .ico { color: var(--cn-accent); flex-shrink: 0; }

/* Botões que o cliente clica (quick reply, botão inline, lista). */
.cn-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.cn-btns.is-full { flex-direction: column; }
.cn-btn {
  /* Não estica pra dividir a linha em partes iguais: com três botões, o rótulo
     maior era cortado ("Churrasq..."). Cada um ocupa o que precisa e o que não
     couber desce pra linha de baixo. */
  flex: 0 1 auto;
  padding: 8px 12px;
  border: 1px solid rgba(15, 22, 38, 0.12);
  border-radius: 9px;
  background: #fff;
  color: var(--cn-accent);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Botão que vem colado embaixo do balão, jeito do WhatsApp e do Messenger.
   Ele acompanha o LADO do balão de onde saiu: ancorado sempre à esquerda, o
   grupo de botões de uma mensagem nossa (que fica à direita) nascia embaixo e
   do outro lado, e a conversa inteira parecia torta. */
.cn-b + .cn-btns { margin-top: -4px; align-self: flex-start; width: 84%; }
.cn-b.is-us + .cn-btns { align-self: flex-end; }
/* Só na versão em linha: `is-full` empilha, e ali justify mexeria na vertical. */
.cn-b.is-us + .cn-btns:not(.is-full) { justify-content: flex-end; }
.cn-card .cn-btns { margin-top: 2px; }

/* Rodapé: a barra de escrever. Não funciona, e não deve parecer que funciona. */
.cn-app-foot {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  background: #fff;
  border-top: 1px solid rgba(15, 22, 38, 0.07);
  flex-shrink: 0;
}
.cn-app-foot .cn-escreve {
  flex: 1;
  padding: 8px 12px;
  border-radius: 999px;
  background: #f1f3f6;
  color: #9aa0ab;
  font-size: 12.5px;
}
.cn-app-foot .cn-enviar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--cn-accent);
  color: #fff;
  display: grid; place-items: center;
  flex-shrink: 0;
}

/* ── Digitando ───────────────────────────────────────────────────────────── */
.cn-dig { display: flex; align-items: center; gap: 4px; padding: 11px 13px; }
.cn-dig i {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; opacity: .35;
  animation: cn-dig 1.1s infinite ease-in-out;
}
.cn-dig i:nth-child(2) { animation-delay: .16s; }
.cn-dig i:nth-child(3) { animation-delay: .32s; }
@keyframes cn-dig { 0%, 60%, 100% { transform: none; opacity: .3; } 30% { transform: translateY(-3px); opacity: .7; } }

/* ── A entrada das linhas do painel ───────────────────────────────────────────
   Mesma ideia das mensagens: `is-vivo` no painel diz que o JS assumiu, e a
   classe `cn-entrou` dispara a entrada de cada linha. Sem JavaScript o painel
   nasce inteiro, que é o certo. */
@keyframes cn-sobe {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}
/* O cartão novo do funil CAI de cima, e mais devagar: ele é o desfecho da
   história que o texto ao lado conta, a etiqueta virando oportunidade. */
@keyframes cn-cai {
  from { opacity: 0; transform: translateY(-16px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
.cn-painel.is-vivo .cn-entrou {
  animation: cn-sobe .42s cubic-bezier(.16, 1, .3, 1) both;
}
.cn-painel.is-vivo .cn-op.is-nova.cn-entrou {
  animation-name: cn-cai;
  animation-duration: .58s;
}

/* ── Painel da EvoTalks (quando o exemplo não é uma conversa) ────────────── */
.cn-painel {
  background: #fff;
  border: 1px solid rgba(15, 22, 38, 0.1);
  border-radius: 20px;
  overflow: hidden;
}
.cn-painel-top {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px;
  border-bottom: 1px solid rgba(15, 22, 38, 0.07);
  font-size: 12px; font-weight: 600; color: #1e2026;
}
.cn-painel-top .ico { color: var(--cn-accent, #1bbf5d); }
.cn-painel-top .cn-painel-marca { margin-left: auto; font-size: 10.5px; font-weight: 500; color: #8a8f99; }
.cn-painel-corpo { padding: 13px 14px; display: flex; flex-direction: column; gap: 9px; }

/* Colunas de funil. */
.cn-funil { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cn-funil-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cn-funil-col > b {
  font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: #8a8f99; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cn-op {
  padding: 8px 9px;
  border: 1px solid rgba(15, 22, 38, 0.1);
  border-radius: 10px;
  background: #fff;
  font-size: 11.5px;
  line-height: 1.35;
  color: #4a5160;
}
.cn-op b { display: block; font-weight: 600; color: #1e2026; font-size: 12px; margin-bottom: 2px; }
.cn-op.is-nova { border-color: var(--cn-accent); background: color-mix(in srgb, var(--cn-accent) 7%, #fff); }
.cn-op-vazia { border: 1px dashed rgba(15, 22, 38, 0.14); border-radius: 10px; height: 34px; }

/* Linhas de lista (fila, campanha, ticket). */
.cn-linha {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 10px;
  border: 1px solid rgba(15, 22, 38, 0.09);
  border-radius: 11px;
  font-size: 12.5px;
  color: #1e2026;
}
.cn-linha .ico { color: var(--cn-accent); flex-shrink: 0; }
.cn-linha .cn-linha-txt { min-width: 0; line-height: 1.35; }
.cn-linha .cn-linha-txt small { display: block; font-size: 11px; color: #8a8f99; }
.cn-linha .cn-chip { margin-left: auto; }

/* Etiquetas. */
.cn-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(15, 22, 38, 0.06);
  color: #4a5160;
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
.cn-chip.is-accent { background: color-mix(in srgb, var(--cn-accent) 14%, #fff); color: color-mix(in srgb, var(--cn-accent) 70%, #1e2026); }
.cn-chip.is-alerta { background: #fdecec; color: #b03a35; }
.cn-chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* ── A janela no hero ───────────────────────────────────────────── */
/* A janela fica solta na página: sem caixa atrás e sem rótulo em cima. Havia um
   palco cinza aqui, com uma linha do tipo "O mesmo número, agora organizado"
   em cima dele. Os dois saíram juntos: a moldura deixava retângulo arredondado
   dentro de retângulo arredondado, e o rótulo dizia o que a conversa logo
   abaixo já mostra sozinha.
   O que sobrou do bloco só centra e limita a largura da janela na coluna. Sem
   o cinza atrás, quem separa a janela do branco da página é a borda dela mesma,
   e por isso ela é um pouco mais firme aqui do que nas janelas dos exemplos,
   que ficam sobre o cinza da seção. */
.cn-palco { position: relative; }
.cn-palco .cn-app {
  max-width: 430px;
  margin: 0 auto;
  border-color: rgba(15, 22, 38, 0.16);
}

/* ── Seção "o que dá pra fazer" ──────────────────────────────────────────── */
/* Cinza claro: a seção vem logo depois do hero, que é branco, e sem a troca de
   faixa as duas viravam uma coisa só. As janelas dos exemplos são brancas, e
   sobre o cinza elas destacam. */
.cn-pos { padding: 92px 0; background: var(--evo-off-white, #eff2f7); }
.cn-pos-head { max-width: 760px; margin: 0 auto 58px; text-align: center; }
.cn-pos-head .tag {
  display: inline-block;
  margin-bottom: 16px;
  font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: #1bbf5d;
}
.cn-pos-head h2 {
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  text-wrap: balance;
}
.cn-pos-head p { font-size: 16.5px; line-height: 1.6; color: var(--evo-text-soft, #5a6270); margin: 0; }

.cn-pos-lista { display: flex; flex-direction: column; }
.cn-item {
  display: grid;
  grid-template-columns: 1fr 1.02fr;
  gap: 56px;
  align-items: center;
  padding: 46px 0;
  border-top: 1px solid rgba(15, 22, 38, 0.08);
}
.cn-item:first-child { border-top: 0; padding-top: 0; }
.cn-item-mock { min-width: 0; }   /* sem isto o grid deixa a janela estourar a coluna */
.cn-item.is-flip .cn-item-txt { order: 2; }
.cn-item-num {
  display: inline-block;
  margin-bottom: 14px;
  padding: 4px 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--cn-accent, #1bbf5d) 12%, #fff);
  color: color-mix(in srgb, var(--cn-accent, #1bbf5d) 72%, #1e2026);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.cn-item-txt h3 {
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.015em;
  margin: 0 0 12px;
  text-wrap: balance;
}
.cn-item-txt p { font-size: 15.5px; line-height: 1.65; color: var(--evo-text-soft, #5a6270); margin: 0 0 16px; }
.cn-item-txt p:last-child { margin-bottom: 0; }
.cn-item-selo {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(15, 22, 38, 0.05);
  color: #4a5160;
  font-size: 12px;
  font-weight: 600;
}
.cn-item-selo .ico { color: var(--cn-accent, #1bbf5d); }

/* ── Telas menores ───────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .cn-item { grid-template-columns: 1fr; gap: 26px; padding: 34px 0; }
  .cn-item.is-flip .cn-item-txt { order: 0; }
  .cn-pos { padding: 64px 0; }
  .cn-pos-head { margin-bottom: 38px; }
}
@media (max-width: 520px) {
  .cn-funil { grid-template-columns: 1fr; }
  .cn-card { width: 100%; }
  .cn-b { max-width: 92%; }
}

/* Quem pediu menos movimento não vê os pontinhos do "digitando". */
@media (prefers-reduced-motion: reduce) {
  .cn-dig i { animation: none; }
}