:root{
  --wa-teal:#075E54;
  --wa-teal-dark:#054d44;
  --wa-green:#25D366;
  --wa-light-green:#dcf8c6;
  --wa-bg:#e5ddd5;
  --wa-in:#ffffff;
  --wa-tick:#53bdeb;
  --wa-text:#111b21;
  --wa-sub:#667781;
  --gold:#c9a24b;
  --answers-pad-bottom: calc(25px + env(safe-area-inset-bottom, 0px));
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;height:100dvh;}
body{
  font-family:'Segoe UI',Helvetica,Arial,sans-serif;
  background:#d2dbdc;
  display:flex;align-items:flex-start;justify-content:center;
  min-height:100vh;min-height:100dvh;padding:0;
  overflow:hidden;
}
.phone{
  width:100%;max-width:440px;
  height:100vh;height:100dvh;height:var(--app-h, 100dvh);
  max-height:900px;
  display:flex;flex-direction:column;
  background:var(--wa-bg);
  position:relative;overflow:hidden;
  box-shadow:0 10px 40px rgba(0,0,0,.25);
  padding-top:env(safe-area-inset-top);
  transform:translateY(var(--app-top, 0px));
}
@media(min-width:480px){
  body{align-items:center;}
  .phone{ border-radius:14px; height:88vh; height:88dvh; padding-top:0; transform:none; }
}

/* Teclado aberto: cola a área de resposta no teclado */
body.kb-open{
  --answers-pad-bottom: 8px;
}
body.kb-open .answers{
  max-height:none;
}
body.kb-open .answers .hint{display:none;}

/* Header */
.header{
  background:var(--wa-teal);
  color:#fff;display:flex;align-items:center;gap:10px;
  padding:10px 12px;flex-shrink:0;z-index:5;
}
.header .back{font-size:22px;line-height:1;opacity:.9;}
.avatar{
  width:40px;height:40px;border-radius:50%;
  background:#128C7E;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:15px;flex-shrink:0;overflow:hidden;
}
.avatar span{color:#fff;}
.avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.h-info{flex:1;min-width:0;}
.h-info .name{font-size:16px;font-weight:600;line-height:1.2;}
.h-info .status{font-size:12px;opacity:.85;line-height:1.3;}
.h-actions{display:flex;gap:18px;font-size:19px;opacity:.9;}

/* Chat area */
.chat{
  flex:1 1 auto;min-height:0;overflow-y:auto;
  padding:14px 10px 10px;
  display:flex;flex-direction:column;gap:3px;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='%23d9cfc4' fill-opacity='0.35'%3E%3Ccircle cx='20' cy='20' r='2'/%3E%3Ccircle cx='80' cy='40' r='1.5'/%3E%3Ccircle cx='50' cy='80' r='2'/%3E%3Ccircle cx='100' cy='95' r='1.5'/%3E%3Ccircle cx='15' cy='100' r='1.5'/%3E%3C/g%3E%3C/svg%3E");
  background-color:var(--wa-bg);
}
.chat::-webkit-scrollbar{width:6px;}
.chat::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);border-radius:3px;}

.day{align-self:center;background:#e1f2fa;color:#54747f;font-size:12px;
  padding:5px 12px;border-radius:8px;margin:6px 0 10px;box-shadow:0 1px 0 rgba(0,0,0,.05);}

.row{display:flex;width:100%;animation:pop .25s ease;}
.row.in{justify-content:flex-start;}
.row.out{justify-content:flex-end;}
@keyframes pop{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion: reduce){
  .row{animation:none;}
  .dots i{animation:none;opacity:.6;}
}

.bubble{
  max-width:82%;padding:7px 9px 8px;border-radius:8px;
  font-size:14.5px;line-height:1.4;color:var(--wa-text);
  position:relative;box-shadow:0 1px .5px rgba(0,0,0,.13);
  word-wrap:break-word;white-space:pre-wrap;
}
.in .bubble{background:var(--wa-in);border-top-left-radius:0;}
.out .bubble{background:var(--wa-light-green);border-top-right-radius:0;}
.bubble .meta{display:inline-block;float:right;margin:4px 0 -2px 8px;
  font-size:11px;color:var(--wa-sub);user-select:none;}
.out .bubble .meta .tick{color:var(--wa-tick);font-weight:700;margin-left:2px;}
.bubble b{font-weight:600;}

/* typing indicator */
.typing .bubble{padding:11px 14px;}
.dots{display:flex;gap:4px;align-items:center;}
.dots i{width:8px;height:8px;border-radius:50%;background:#9aa4a8;display:inline-block;
  animation:blink 1.3s infinite both;}
.dots i:nth-child(2){animation-delay:.2s;}
.dots i:nth-child(3){animation-delay:.4s;}
@keyframes blink{0%,60%,100%{opacity:.3;transform:translateY(0);}30%{opacity:1;transform:translateY(-3px);}}

/* Answer area — sticky bottom, never eats the whole chat */
.answers{
  flex:0 0 auto;background:#f0f0f0;
  padding:8px 10px var(--answers-pad-bottom);
  border-top:1px solid #dcdcdc;
  max-height:min(55dvh, 440px);
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;z-index:6;
}
.answers:empty{display:none;padding:0;border:none;max-height:0;}
/* Campo de texto: área compacta (evita buraco cinza com teclado) */
.answers.has-text{
  max-height:none;
  padding-top:8px;
  padding-bottom:var(--answers-pad-bottom);
}
.quick{display:flex;flex-direction:column;gap:7px;}
.chip{
  background:#fff;border:1.5px solid var(--wa-green);color:#075E54;
  padding:11px 14px;border-radius:12px;font-size:14px;font-weight:500;
  cursor:pointer;transition:.15s;width:100%;text-align:center;
  font-family:inherit;line-height:1.35;min-height:44px;
}
.chip:hover,.chip:focus-visible{background:var(--wa-green);color:#fff;outline:none;}
.chip:active{transform:scale(.98);}

@media(min-width:480px){
  .answers,.answers.has-text{max-height:min(38vh, 280px);padding:10px;}
  .quick{flex-direction:row;flex-wrap:wrap;}
  .chip{
    width:auto;flex:0 1 auto;border-radius:20px;
    padding:9px 14px;min-height:0;text-align:left;
  }
}

.textline{display:flex;gap:8px;align-items:center;}
.textline input{
  flex:1;border:none;border-radius:22px;padding:11px 16px;font-size:16px;
  background:#fff;outline:none;box-shadow:0 1px 2px rgba(0,0,0,.08);
  font-family:inherit;min-width:0;
}
.textline input.invalid{box-shadow:0 0 0 2px #e05b4c inset;}
.send{
  width:46px;height:46px;border-radius:50%;border:none;flex-shrink:0;
  background:var(--wa-teal);color:#fff;font-size:20px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:.15s;
}
.send:hover,.send:focus-visible{background:var(--wa-teal-dark);outline:none;}
.hint{font-size:11px;color:#8a8a8a;text-align:center;padding-top:6px;}
.hint.err{color:#c0392b;font-weight:600;}

/* diagnosis card */
.diagcard{align-self:center;background:#fff;border-radius:12px;padding:0;
  max-width:92%;margin:12px 0;box-shadow:0 3px 10px rgba(0,0,0,.15);overflow:hidden;
  animation:pop .35s ease;}
.diagcard .diag-head{background:var(--wa-teal);color:#fff;padding:14px 18px;}
.diagcard .diag-head .eyebrow{font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.8;}
.diagcard .diag-head h3{font-size:18px;margin-top:2px;}
.diagcard .diag-body{padding:14px 18px 16px;}
.diagcard .diag-body p{font-size:13.5px;color:#333;line-height:1.55;margin-bottom:10px;}
.diagcard .diag-item{display:flex;gap:8px;font-size:13.5px;color:#333;line-height:1.5;
  margin-bottom:8px;}
.diagcard .diag-item .dot{color:var(--gold);font-weight:700;flex-shrink:0;}
/* ===== Card de PERFIL (resultado simples: quadro + ícone) ===== */
.perfilcard{align-self:center;background:#fff;border:1px solid #eee6d6;border-radius:16px;
  padding:22px 20px;max-width:86%;margin:14px 0;text-align:center;
  box-shadow:0 4px 16px rgba(0,0,0,.12);animation:pop .35s ease;}
.perfilcard .pc-icon{width:58px;height:58px;margin:0 auto 12px;border-radius:50%;
  background:linear-gradient(135deg,#c9a24b,#b8923f);display:flex;align-items:center;justify-content:center;
  font-size:28px;box-shadow:0 3px 10px rgba(184,146,63,.45);}
.perfilcard .pc-label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:#9a7c33;font-weight:700;}
.perfilcard .pc-title{font-size:22px;color:#1c1c1c;margin:4px 0 10px;font-weight:700;}
.perfilcard .pc-desc{font-size:13.5px;color:#5b6b6a;line-height:1.55;}
.perfilcard .pc-extra{margin-top:14px;padding-top:14px;border-top:1px solid #f0ece2;text-align:left;}
.perfilcard .pc-extra p{font-size:12.5px;color:#555;line-height:1.5;margin-bottom:8px;}
.perfilcard .pc-extra p:last-child{margin-bottom:0;}
.perfilcard .pc-extra b{color:#1c1c1c;font-weight:700;}

/* end card */
.endcard{align-self:center;background:#fff;border-radius:12px;padding:18px;
  text-align:center;max-width:88%;margin:14px 0;box-shadow:0 2px 6px rgba(0,0,0,.12);}
.endcard h3{color:#075E54;font-size:16px;margin-bottom:6px;}
.endcard p{font-size:13.5px;color:#444;line-height:1.5;margin-bottom:14px;}
.endcard a{display:inline-block;background:var(--wa-green);color:#fff;text-decoration:none;
  padding:11px 22px;border-radius:24px;font-weight:600;font-size:14.5px;}
.restart{background:none;border:none;color:#075E54;font-size:12.5px;margin-top:12px;
  cursor:pointer;text-decoration:underline;font-family:inherit;}