/* ================================================================
   Chat WhatsApp — pop-up de captura de lead
   Interface fiel ao WhatsApp, mobile first.
   ================================================================ */

/* botão flutuante */
.wa-fab{
  position:fixed;right:16px;bottom:84px;z-index:58;
  width:58px;height:58px;border-radius:50%;
  background:var(--wa);display:grid;place-items:center;
  box-shadow:0 8px 26px rgba(37,211,102,.48);
  transition:transform .3s var(--ease);
}
@media(min-width:900px){.wa-fab{bottom:24px;right:24px}}
.wa-fab:hover{transform:scale(1.08)}
.wa-fab svg{width:30px;height:30px;fill:#fff}
.wa-fab::after{
  content:'';position:absolute;inset:0;border-radius:50%;
  border:2px solid var(--wa);animation:pulse 2.4s ease-out infinite;
}
@keyframes pulse{
  0%{transform:scale(1);opacity:.7}
  100%{transform:scale(1.65);opacity:0}
}
@media (prefers-reduced-motion:reduce){.wa-fab::after{animation:none;opacity:0}}
.wa-fab__dot{
  position:absolute;top:-2px;right:-2px;width:20px;height:20px;
  border-radius:50%;background:#FF3B30;color:#fff;
  font-size:.7rem;font-weight:700;display:grid;place-items:center;
  border:2px solid var(--navy-900);
}

/* ---------------------------------------------------------------- modal */
.wa{
  position:fixed;inset:0;z-index:100;display:none;
  align-items:flex-end;justify-content:center;
}
@media(min-width:640px){.wa{align-items:center;padding:24px}}
.wa.open{display:flex}
.wa__bd{
  position:absolute;inset:0;background:rgba(6,16,30,.72);
  backdrop-filter:blur(5px);animation:fade .3s var(--ease);
}
@keyframes fade{from{opacity:0}to{opacity:1}}

.wa__box{
  position:relative;z-index:2;width:100%;max-width:420px;
  height:min(92svh,660px);display:flex;flex-direction:column;
  background:#ECE5DD;overflow:hidden;
  border-radius:16px 16px 0 0;
  box-shadow:0 -8px 50px rgba(0,0,0,.5);
  animation:slideUp .42s var(--ease);
}
@media(min-width:640px){
  .wa__box{border-radius:14px;box-shadow:0 24px 70px rgba(0,0,0,.55)}
}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){
  .wa__box{animation:none}.wa__bd{animation:none}
}

/* topo */
.wa__hd{
  display:flex;align-items:center;gap:11px;padding:11px 14px;
  background:#075E54;color:#fff;flex-shrink:0;
}
.wa__hd img{
  width:40px;height:40px;border-radius:50%;object-fit:cover;flex-shrink:0;
  border:1.5px solid rgba(255,255,255,.35);
}
.wa__hi{flex:1;min-width:0}
.wa__nm{font-size:.97rem;font-weight:600;line-height:1.2}
.wa__st{
  font-size:.76rem;color:rgba(255,255,255,.82);display:flex;
  align-items:center;gap:5px;margin-top:1px;
}
.wa__st i{width:7px;height:7px;border-radius:50%;background:#7BEF9B;flex-shrink:0}
.wa__x{
  width:34px;height:34px;display:grid;place-items:center;flex-shrink:0;
  border-radius:50%;font-size:1.35rem;line-height:1;color:#fff;
  transition:background .2s;
}
.wa__x:hover{background:rgba(255,255,255,.16)}

/* corpo */
.wa__bd2{
  flex:1;overflow-y:auto;padding:16px 12px 8px;
  background-color:#ECE5DD;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'%3E%3Cg fill='%23D9D0C4' fill-opacity='.42'%3E%3Ccircle cx='10' cy='12' r='1.6'/%3E%3Ccircle cx='46' cy='30' r='1.3'/%3E%3Ccircle cx='70' cy='8' r='1.5'/%3E%3Ccircle cx='24' cy='58' r='1.4'/%3E%3Ccircle cx='62' cy='68' r='1.6'/%3E%3Ccircle cx='34' cy='78' r='1.2'/%3E%3C/g%3E%3C/svg%3E");
  scroll-behavior:smooth;
}
.wa__bd2::-webkit-scrollbar{width:5px}
.wa__bd2::-webkit-scrollbar-thumb{background:rgba(10,26,47,.22);border-radius:6px}

.wa__day{
  text-align:center;margin-bottom:14px;
}
.wa__day span{
  display:inline-block;padding:5px 12px;border-radius:7px;
  background:#D9E8F5;color:#54656F;font-size:.72rem;font-weight:500;
  box-shadow:0 1px 1px rgba(0,0,0,.08);
}

/* balões */
.msg{
  max-width:82%;padding:8px 11px 7px;margin-bottom:8px;
  font-size:.93rem;line-height:1.42;color:#111B21;
  box-shadow:0 1px 1px rgba(0,0,0,.13);position:relative;
  word-wrap:break-word;animation:pop .34s var(--ease) both;
}
@keyframes pop{from{opacity:0;transform:translateY(9px) scale(.97)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.msg{animation:none}}
.msg--in{
  background:#fff;border-radius:0 8px 8px 8px;margin-right:auto;
}
.msg--out{
  background:#D9FDD3;border-radius:8px 0 8px 8px;margin-left:auto;
}
.msg b{font-weight:600}
.msg__t{
  display:block;text-align:right;font-size:.66rem;color:#667781;
  margin-top:2px;line-height:1;
}
.msg--out .msg__t::after{content:' ✓✓';color:#53BDEB;font-size:.78rem}

/* digitando */
.typing{
  display:inline-flex;gap:4px;align-items:center;
  background:#fff;border-radius:0 8px 8px 8px;
  padding:12px 14px;margin-bottom:8px;
  box-shadow:0 1px 1px rgba(0,0,0,.13);
}
.typing i{
  width:7px;height:7px;border-radius:50%;background:#98A2A8;
  animation:blink 1.3s ease-in-out infinite;
}
.typing i:nth-child(2){animation-delay:.2s}
.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.32;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* área de resposta */
.wa__ft{
  flex-shrink:0;padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:#F0F2F5;border-top:1px solid rgba(0,0,0,.07);
}

/* barra de progresso */
.wa__pg{height:3px;background:rgba(7,94,84,.14);flex-shrink:0}
.wa__pg i{
  display:block;height:100%;width:0;background:var(--wa-dk);
  transition:width .5s var(--ease);
}

/* input */
.wa__row{display:flex;gap:8px;align-items:center}
.wa__inp{
  flex:1;padding:12px 16px;border-radius:100px;border:1px solid transparent;
  background:#fff;font-size:16px;color:#111B21;outline:none;
  transition:border-color .2s,box-shadow .2s;min-width:0;
}
.wa__inp::placeholder{color:#8696A0}
.wa__inp:focus{border-color:var(--wa-dk);box-shadow:0 0 0 3px rgba(18,140,126,.14)}
.wa__inp.err{border-color:#E5484D;box-shadow:0 0 0 3px rgba(229,72,77,.14)}
.wa__snd{
  width:46px;height:46px;border-radius:50%;background:var(--wa-dk);
  display:grid;place-items:center;flex-shrink:0;
  transition:transform .22s var(--ease),opacity .22s;
}
.wa__snd:hover{transform:scale(1.07)}
.wa__snd:disabled{opacity:.45;pointer-events:none}
.wa__snd svg{width:21px;height:21px;fill:#fff;margin-left:2px}

/* telefone com prefixo de país */
.wa__tel{display:flex;gap:7px;flex:1;min-width:0}
.wa__ddi{
  width:96px;flex-shrink:0;padding:12px 8px;border-radius:100px;
  border:1px solid transparent;background:#fff;font-size:15px;
  color:#111B21;outline:none;appearance:none;text-align:center;
  cursor:pointer;
}
.wa__ddi:focus{border-color:var(--wa-dk)}

/* opções rápidas */
.wa__opts{display:flex;flex-direction:column;gap:7px}
.wa__opt{
  padding:12px 15px;background:#fff;border:1px solid rgba(7,94,84,.22);
  border-radius:10px;text-align:left;font-size:.93rem;color:#111B21;
  transition:background .22s,border-color .22s,transform .22s var(--ease);
  display:flex;align-items:center;gap:10px;
}
.wa__opt:hover{background:#D9FDD3;border-color:var(--wa-dk);transform:translateX(3px)}
.wa__opt em{font-style:normal;font-size:1.1rem;flex-shrink:0}

/* select nativo (estado/país) */
.wa__sel{
  flex:1;padding:12px 16px;border-radius:100px;border:1px solid transparent;
  background:#fff;font-size:16px;color:#111B21;outline:none;min-width:0;
  appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238696A0' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 18px center;
  padding-right:40px;
}
.wa__sel:focus{border-color:var(--wa-dk)}

/* erro */
.wa__err{
  font-size:.8rem;color:#C62828;padding:6px 14px 0;line-height:1.4;
  display:none;
}
.wa__err.show{display:block}

/* dica de privacidade */
.wa__note{
  font-size:.72rem;color:#667781;text-align:center;
  padding:8px 10px 0;line-height:1.45;
}

/* tela final */
.wa__done{
  padding:12px 4px 4px;display:flex;flex-direction:column;gap:9px;
}
.wa__done .btn-wa{margin-top:0;width:100%}