/*
 * Contador na Mão — conversas de WhatsApp desenhadas em HTML/CSS.
 * Substituem as imagens geradas por IA (texto deformado). Reproduzem o fluxo
 * real do atendimento com DADOS FICTÍCIOS: nenhum nome, CPF, endereço, chave
 * ou linha digitável de cliente real.
 */
.chat-phone {
  --wa-bg: #efeae2;
  --wa-out: #d9fdd3;
  --wa-in: #ffffff;
  --wa-ink: #111b21;
  --wa-muted: #667781;
  --wa-tick: #53bdeb;
  --wa-head: #075e54;
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
  border-radius: 34px;
  padding: 10px;
  background: #1f2c34;
  box-shadow: 0 24px 48px rgba(6, 75, 99, .22), inset 0 0 0 2px #2d3c45;
}
.chat-phone-screen {
  border-radius: 26px;
  overflow: hidden;
  background: var(--wa-bg);
  display: flex;
  flex-direction: column;
  min-height: 360px;
}
.chat-phone-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--wa-head);
  color: #fff;
}
.chat-phone-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #25d366;
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  flex: none;
}
.chat-phone-head strong { display: block; font-size: 14px; line-height: 1.2; }
.chat-phone-head small { display: block; font-size: 11px; opacity: .8; }
.chat-phone-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 10px 14px;
  font-size: 12.5px;
  line-height: 1.38;
  color: var(--wa-ink);
}
.chat-msg {
  max-width: 86%;
  padding: 6px 9px 4px;
  border-radius: 9px;
  box-shadow: 0 1px .5px rgba(11, 20, 26, .13);
  white-space: normal;
  word-break: break-word;
}
.chat-msg.out { align-self: flex-end; background: var(--wa-out); border-top-right-radius: 2px; }
.chat-msg.in { align-self: flex-start; background: var(--wa-in); border-top-left-radius: 2px; }
.chat-msg .chat-time {
  display: block;
  text-align: right;
  font-size: 10px;
  color: var(--wa-muted);
  margin-top: 2px;
}
.chat-msg.out .chat-time::after { content: " ✓✓"; color: var(--wa-tick); letter-spacing: -2px; }
.chat-msg b { font-weight: 700; }
.chat-msg .chat-opt { display: block; }
.chat-file {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  margin-bottom: 2px;
  border-radius: 7px;
  background: rgba(11, 20, 26, .06);
}
.chat-file-icon {
  width: 30px;
  height: 36px;
  border-radius: 4px;
  display: grid;
  place-items: center;
  background: #e74c3c;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  flex: none;
}
.chat-msg > .chat-file:not(:first-child) { margin-top: 6px; }
.chat-file small { display: block; color: var(--wa-muted); font-size: 10px; }
.chat-mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; letter-spacing: .2px; }
.chat-ficticio {
  margin: 8px auto 0;
  max-width: 340px;
  text-align: center;
  font-size: 11px;
  color: #5d7480;
}
/*
 * Dentro do cartão "Como funciona": só a tela da conversa ocupa o quadro, como
 * um chat rolado até o fim (as mensagens mais novas ficam visíveis embaixo).
 */
.process-image-wrap.has-chat { height: 360px; background: #efeae2; }
.process-image-wrap.has-chat::before { display: none; }
.process-image-wrap .chat-phone {
  max-width: none;
  height: 100%;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.process-image-wrap .chat-phone-screen { height: 100%; min-height: 0; border-radius: 0; }
.process-image-wrap .chat-phone-body { justify-content: flex-end; overflow: hidden; font-size: 11.5px; padding-bottom: 44px; }
/* Seção da GPS: a conversa da esquerda mostra tudo, sem rolagem escondida. */
.gps-easy-section .gps-chat { height: auto; overflow: visible; }
/* Seção da GPS: celular estreito e alto, com as mensagens no fim da tela, como no aparelho. */
.gps-document-stage .chat-phone { max-width: 300px; }
.gps-document-stage .chat-phone-screen { min-height: 0; }
@media (max-width: 520px) {
  .gps-document-stage .chat-phone { max-width: 280px; }
}
/* Seção "Veja como é fácil": o celular entra no fluxo normal, com a altura da conversa. */
.easy-phone-stage.has-chat { min-height: 0; }
.easy-phone-stage.has-chat .easy-phone-float { position: relative; inset: auto; flex-direction: column; }
.easy-phone-stage.has-chat .chat-phone { max-width: 360px; }
.easy-phone-stage.has-chat .chat-ficticio { display: inline-block; margin-top: 12px; padding: 5px 12px; border-radius: 999px; background: rgba(2, 15, 25, .78); color: #fff; font-weight: 600; }
.easy-steps { margin: 0; padding: 22px 24px; list-style: none; counter-reset: passo; display: grid; gap: 18px; }
.easy-steps li { counter-increment: passo; position: relative; padding-left: 52px; min-height: 38px; }
.easy-steps li::before {
  content: counter(passo);
  position: absolute;
  left: 0;
  top: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #008b6c, #00b8af);
  color: #fff;
  font-weight: 900;
}
.easy-steps strong { display: block; font-size: 18px; color: #fff; }
.easy-steps span { display: block; margin-top: 3px; font-size: 15px; line-height: 1.45; color: rgba(233, 255, 253, .82); }
@media (max-width: 520px) {
  .chat-phone { max-width: 300px; }
  .chat-phone-body { font-size: 12px; }
}