/* =========================================================================
   Emérito · diagnóstico do WhatsApp da clínica
   Uma coluna, uma pergunta por vez. É a página do link da bio: ela abre no
   celular e a primeira coisa que aparece é alguém falando com a pessoa.
   ========================================================================= */

body.diag{
  background:var(--creme);
  min-height:100vh;
  min-height:100dvh;
  overflow-x:hidden;
}

/* ---------- topo ---------- */
.diag-topo{
  position:sticky;top:0;z-index:20;
  background:rgba(253,246,242,.92);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--linha);
}
.diag-topo-linha{
  max-width:680px;margin:0 auto;
  padding:13px 20px;
  display:flex;align-items:center;gap:12px;
}
.diag-topo .marca{font-family:var(--display);font-weight:800;font-size:1.02rem;letter-spacing:-.02em;display:flex;align-items:center;gap:9px}
.diag-topo .marca-selo{
  width:29px;height:29px;border-radius:9px;
  background:var(--laranja);color:#fff;
  display:grid;place-items:center;flex:none;
}
.diag-titulo{
  font-size:.86rem;color:var(--tinta-2);font-weight:500;
  margin-left:2px;
}
.diag-passo{
  margin-left:auto;flex:none;
  font-family:var(--display);font-weight:700;font-size:.76rem;
  letter-spacing:.02em;
  background:var(--laranja-suave);color:var(--laranja-escuro);
  padding:5px 11px;border-radius:999px;
}
.diag-barra{height:3px;background:transparent}
.diag-barra i{
  display:block;height:100%;width:0;
  background:var(--laranja);
  border-radius:0 3px 3px 0;
  transition:width .55s cubic-bezier(.4,0,.2,1);
}

/* ---------- coluna da conversa ---------- */
.diag-palco{
  max-width:680px;margin:0 auto;
  padding:28px 20px 64px;
}
.diag-fio{display:flex;flex-direction:column;gap:11px}

.diag-fala{display:flex;gap:11px;align-items:flex-end;max-width:100%}
.diag-fala .rosto{
  width:34px;height:34px;border-radius:50%;flex:none;
  /* O laranja fica embaixo da foto: se ela não carregar, sobra o selo da
     marca e não um buraco cinza no meio da conversa. */
  background:var(--laranja) url("/aldo.webp") center/cover no-repeat;
  box-shadow:0 0 0 1.5px var(--papel), 0 1px 3px rgba(18,22,28,.16);
  margin-bottom:2px;
}
.diag-fala .rosto.oculto{visibility:hidden}

.diag-bolha{
  background:var(--papel);
  border:1px solid var(--linha);
  border-radius:18px 18px 18px 5px;
  padding:13px 17px;
  font-size:1rem;line-height:1.55;
  box-shadow:0 1px 2px rgba(18,22,28,.03);
  max-width:min(78%,470px);
  animation:diag-sobe .34s cubic-bezier(.2,.7,.3,1) both;
}
.diag-bolha b{font-weight:600;color:var(--tinta)}
.diag-bolha .real{color:var(--laranja-escuro);font-weight:600}

.diag-fala.eu{flex-direction:row-reverse}
.diag-fala.eu .diag-bolha{
  background:var(--laranja);border-color:var(--laranja);color:#fff;
  border-radius:18px 18px 5px 18px;
  font-weight:500;
}

/* três pontinhos: é o que faz a página parecer alguém pensando */
.diag-pensa{display:flex;gap:5px;padding:16px 18px}
.diag-pensa i{
  width:7px;height:7px;border-radius:50%;background:var(--tinta-3);
  animation:diag-pulo 1.15s infinite ease-in-out;
}
.diag-pensa i:nth-child(2){animation-delay:.16s}
.diag-pensa i:nth-child(3){animation-delay:.32s}

@keyframes diag-sobe{from{opacity:0;transform:translateY(9px) scale(.985)}to{opacity:1;transform:none}}
@keyframes diag-pulo{0%,60%,100%{transform:translateY(0);opacity:.42}30%{transform:translateY(-5px);opacity:1}}

/* ---------- área de resposta ---------- */
.diag-resposta{margin-top:26px;animation:diag-sobe .38s cubic-bezier(.2,.7,.3,1) both}
.diag-rotulo{
  font-family:var(--display);font-weight:700;
  font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--tinta-3);margin-bottom:9px;
}

.diag-campo{
  display:flex;align-items:center;gap:8px;
  background:var(--papel);
  border:1.5px solid var(--linha-forte);
  border-radius:999px;
  padding:6px 6px 6px 20px;
  transition:border-color .2s, box-shadow .2s;
}
.diag-campo:focus-within{
  border-color:var(--laranja);
  box-shadow:0 0 0 4px var(--laranja-suave);
}
.diag-campo input{
  flex:1;min-width:0;border:0;background:none;outline:none;
  font-size:1.02rem;padding:11px 0;
}
.diag-campo input::placeholder{color:var(--tinta-3)}
.diag-ddi{
  font-weight:600;color:var(--tinta-2);flex:none;
  padding-right:11px;margin-right:3px;
  border-right:1px solid var(--linha);
}
.diag-enviar{
  flex:none;width:44px;height:44px;border-radius:50%;border:0;
  background:var(--laranja);color:#fff;cursor:pointer;
  display:grid;place-items:center;
  transition:transform .16s, opacity .16s, background .16s;
}
.diag-enviar:hover{background:var(--laranja-escuro);transform:scale(1.05)}
.diag-enviar:disabled{opacity:.32;cursor:not-allowed;transform:none;background:var(--laranja)}

.diag-opcoes{display:flex;flex-direction:column;gap:9px}
.diag-opcao{
  text-align:left;width:100%;cursor:pointer;
  background:var(--papel);
  border:1.5px solid var(--linha);
  border-radius:14px;
  padding:14px 17px;
  font-size:.99rem;font-weight:500;line-height:1.4;
  transition:border-color .16s, background .16s, transform .16s;
}
.diag-opcao:hover{border-color:var(--laranja);background:var(--laranja-suave);transform:translateX(3px)}
.diag-opcao:active{transform:translateX(1px) scale(.995)}

.diag-erro{
  color:var(--laranja-escuro);font-size:.87rem;font-weight:500;
  margin-top:9px;min-height:1.2em;
}
.diag-lgpd{
  margin-top:18px;text-align:center;
  font-size:.76rem;line-height:1.5;color:var(--tinta-3);
}

/* ---------- painel do resultado ---------- */
.diag-conta{
  margin-top:14px;
  background:var(--tinta);color:#fff;
  border-radius:var(--raio);
  padding:26px 24px;
  animation:diag-sobe .45s cubic-bezier(.2,.7,.3,1) both;
}
.diag-conta .rot{
  font-family:var(--display);font-weight:700;
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.5);
}
.diag-conta .valor{
  font-family:var(--display);font-weight:800;
  font-size:clamp(2.3rem,10vw,3.3rem);line-height:1.02;
  letter-spacing:-.03em;margin:9px 0 6px;
  color:var(--laranja);
}
.diag-conta .linha{font-size:.93rem;color:rgba(255,255,255,.68);line-height:1.5}
.diag-conta .risco{height:1px;background:rgba(255,255,255,.12);margin:20px 0}
.diag-conta .pares{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.diag-conta .par .n{font-family:var(--display);font-weight:800;font-size:1.35rem;letter-spacing:-.02em}
.diag-conta .par .l{font-size:.79rem;color:rgba(255,255,255,.55);margin-top:2px;line-height:1.35}

/* ---------- porta pra IA ---------- */
.diag-porta{
  margin-top:26px;
  background:var(--papel);
  border:1.5px solid var(--laranja);
  border-radius:var(--raio);
  padding:24px;
  text-align:center;
  animation:diag-sobe .45s cubic-bezier(.2,.7,.3,1) both;
}
.diag-porta h2{
  font-family:var(--display);font-weight:800;
  font-size:1.42rem;line-height:1.16;letter-spacing:-.025em;
  margin:0 0 8px;
}
.diag-porta p{margin:0 0 18px;color:var(--tinta-2);font-size:.97rem;line-height:1.5}
.diag-botao{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:var(--laranja);color:#fff;border:0;cursor:pointer;
  font-family:var(--display);font-weight:700;font-size:1.02rem;letter-spacing:-.01em;
  padding:15px 28px;border-radius:999px;width:100%;
  transition:background .16s, transform .16s;
}
.diag-botao:hover{background:var(--laranja-escuro);transform:translateY(-1px)}
.diag-sob{margin-top:11px;font-size:.8rem;color:var(--tinta-3)}

/* ---------- chat ao vivo com a IA ---------- */
.diag-viva{
  margin-top:26px;
  border:1px solid var(--linha);
  border-radius:var(--raio);
  overflow:hidden;
  background:var(--zap-fundo);
  box-shadow:var(--sombra-card);
  animation:diag-sobe .45s cubic-bezier(.2,.7,.3,1) both;
}
.diag-viva-topo{
  background:#075e54;color:#fff;
  padding:11px 16px;display:flex;align-items:center;gap:11px;
}
.diag-viva-topo .rosto{
  width:34px;height:34px;border-radius:50%;flex:none;
  background:rgba(255,255,255,.2);display:grid;place-items:center;
  font-family:var(--display);font-weight:800;font-size:.82rem;
}
.diag-viva-topo .nome{font-weight:600;font-size:.95rem;line-height:1.2}
.diag-viva-topo .estado{font-size:.74rem;color:rgba(255,255,255,.7)}
.diag-viva-fio{
  padding:16px;display:flex;flex-direction:column;gap:8px;
  min-height:240px;max-height:52vh;overflow-y:auto;
}
.diag-viva-fio .z{
  max-width:80%;padding:9px 13px;border-radius:9px;
  font-size:.95rem;line-height:1.45;
  box-shadow:0 1px 1px rgba(18,22,28,.08);
  animation:diag-sobe .3s cubic-bezier(.2,.7,.3,1) both;
  white-space:pre-wrap;word-break:break-word;
}
.diag-viva-fio .z.ia{background:#fff;align-self:flex-start;border-radius:9px 9px 9px 2px}
.diag-viva-fio .z.eu{background:var(--zap-bolha);align-self:flex-end;border-radius:9px 9px 2px 9px}
.diag-viva-sugestoes{
  display:flex;gap:8px;overflow-x:auto;
  padding:11px 11px 0;background:var(--papel);
  scrollbar-width:none;
}
.diag-viva-sugestoes::-webkit-scrollbar{display:none}
.diag-viva-sugestoes:empty{display:none}
.diag-viva-sugestao{
  flex:none;white-space:nowrap;cursor:pointer;
  border:1px solid var(--zap-verde);border-radius:999px;
  padding:7px 14px;font-size:.85rem;font-weight:500;
  color:var(--zap-verde);background:transparent;
  transition:background .15s,color .15s;
}
.diag-viva-sugestao:hover{background:var(--zap-verde);color:#fff}
.diag-viva-sugestao:focus-visible{outline:2px solid var(--zap-verde);outline-offset:2px}
.diag-viva-pe{
  display:flex;gap:8px;padding:11px;
  background:var(--papel);border-top:1px solid var(--linha);
}
.diag-viva-pe input{
  flex:1;min-width:0;border:1px solid var(--linha-forte);border-radius:999px;
  padding:11px 16px;outline:none;font-size:.97rem;
}
.diag-viva-pe input:focus{border-color:var(--laranja)}
.diag-viva-pe button{
  flex:none;width:42px;height:42px;border-radius:50%;border:0;
  background:var(--zap-verde);color:#fff;cursor:pointer;display:grid;place-items:center;
}
.diag-viva-pe button:disabled{opacity:.4;cursor:not-allowed}
.diag-viva-conta{
  padding:0 16px 11px;font-size:.76rem;color:var(--tinta-3);text-align:center;
}

.diag-pe{
  max-width:680px;margin:0 auto;
  padding:0 20px 48px;text-align:center;
  font-size:.78rem;color:var(--tinta-3);
}

@media(prefers-reduced-motion:reduce){
  .diag-bolha,.diag-resposta,.diag-conta,.diag-porta,.diag-viva,.diag-viva-fio .z{animation:none}
  .diag-pensa i{animation:none;opacity:.5}
  .diag-barra i{transition:none}
}

/* No celular o título do topo empurra a pílula pra segunda linha. Ele é
   redundante com a primeira bolha da conversa, então some. */
@media(max-width:520px){
  .diag-titulo{display:none}
  .diag-topo-linha{padding:12px 16px}
  .diag-palco{padding:24px 16px 56px}
  .diag-bolha{max-width:86%}
}

/* Saída pro WhatsApp embaixo da conversa. Discreta enquanto a pessoa está
   testando a IA, mas sempre ali. */
.diag-saida{
  margin-top:18px;
  border:1px solid var(--linha);
  border-radius:var(--raio);
  background:var(--papel);
  padding:20px;
  text-align:center;
}
.diag-saida p{
  margin:0 0 14px;
  font-size:.93rem;line-height:1.5;color:var(--tinta-2);
}