/* ============================================================
   ELEVA — janelinha de conversa do WhatsApp
   Botoes com data-wa-menu abrem esta janela em vez de uma mensagem fixa.
   ============================================================ */
.wam{position:fixed;inset:0;z-index:300;visibility:hidden;pointer-events:none;}
.wam.on{visibility:visible;pointer-events:auto;}
.wam-bg{position:absolute;inset:0;background:rgba(1,6,6,.45);opacity:0;transition:opacity .35s ease;}
.wam.on .wam-bg{opacity:1;}
.wam-panel{position:absolute;right:22px;bottom:22px;width:370px;max-height:calc(100svh - 44px);display:flex;flex-direction:column;
  border-radius:24px;overflow:hidden;background:#071211;border:1px solid var(--line-2);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.95),0 0 0 1px rgba(124,240,200,.05);
  transform-origin:100% 100%;transform:translateY(18px) scale(.92);opacity:0;transition:transform .5s var(--spring),opacity .3s ease;}
.wam.on .wam-panel{transform:none;opacity:1;}

/* topo */
.wam-h{display:flex;align-items:center;gap:12px;padding:14px 14px 14px 16px;background:linear-gradient(180deg,#0F302B,#0B2420);border-bottom:1px solid var(--line);flex:none;}
.wam-av{position:relative;width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center;background:#0D3B3E;border:1px solid var(--line-2);}
.wam-av svg{width:24px;height:24px;}
.wam-av i{position:absolute;right:-1px;bottom:-1px;width:12px;height:12px;border-radius:50%;background:#25D366;border:2px solid #0B2420;}
.wam-h b{display:block;font-size:15.5px;font-weight:700;color:var(--ink);}
.wam-h small{display:block;font-size:12.5px;color:var(--cyan);margin-top:1px;}
.wam-x{margin-left:auto;width:36px;height:36px;border-radius:50%;flex:none;display:grid;place-items:center;color:var(--muted);
  background:rgba(255,255,255,.03);border:1px solid var(--line);cursor:pointer;transition:background .25s,color .25s,transform .4s var(--out);}
.wam-x:hover{background:rgba(255,255,255,.09);color:var(--ink);transform:rotate(90deg);}
.wam-x svg{width:14px;height:14px;}

/* conversa */
.wam-b{flex:1;overflow:auto;padding:18px 14px 14px;background:radial-gradient(rgba(124,240,200,.05) 1px,transparent 1.4px) 0 0/18px 18px;}
.wam-bub{max-width:84%;width:fit-content;background:#12302B;border:1px solid var(--line);padding:10px 13px;border-radius:16px;font-size:14.5px;line-height:1.45;color:var(--ink);margin-bottom:6px;
  opacity:0;transform:translateY(8px) scale(.96);transform-origin:0 100%;transition:opacity .35s ease,transform .45s var(--spring);}
.wam-bub:first-of-type{border-top-left-radius:4px;}
.wam-bub.in{opacity:1;transform:none;}
.wam-bub time{display:block;text-align:right;font-size:10.5px;color:var(--dim);margin-top:3px;}
.wam-typing{display:none;width:fit-content;gap:4px;padding:13px 14px;border-radius:4px 16px 16px 16px;background:#12302B;border:1px solid var(--line);margin-bottom:6px;}
.wam-typing.on{display:flex;}
.wam-typing span{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:wamDot 1s infinite ease-in-out;}
.wam-typing span:nth-child(2){animation-delay:.15s;}
.wam-typing span:nth-child(3){animation-delay:.3s;}
@keyframes wamDot{0%,60%,100%{opacity:.35;transform:none;}30%{opacity:1;transform:translateY(-3px);}}

/* respostas rapidas */
.wam-replies{display:flex;flex-direction:column;align-items:flex-end;gap:7px;margin-top:14px;list-style:none;}
.wam-rp{display:inline-block;font-size:14px;font-weight:600;line-height:1.3;text-align:right;text-decoration:none;padding:9px 15px;border-radius:999px;
  color:var(--cyan);background:rgba(47,181,138,.07);border:1px solid var(--line-2);
  opacity:0;transform:translateX(10px);transition:background .2s,color .2s,border-color .2s,opacity .35s ease,transform .45s var(--out);}
.wam-replies.in .wam-rp{opacity:1;transform:none;transition-delay:0s,0s,0s,calc(var(--i) * .06s),calc(var(--i) * .06s);}
.wam-replies.in .wam-rp:hover,.wam-replies.in .wam-rp:focus-visible{background:var(--blue);border-color:var(--blue);color:#032A22;outline:none;}

/* escrever a propria mensagem */
.wam-f{display:flex;gap:8px;align-items:center;padding:10px 12px calc(12px + env(safe-area-inset-bottom));background:#071211;border-top:1px solid var(--line);flex:none;}
.wam-in{flex:1;min-width:0;font:inherit;font-size:14.5px;color:var(--ink);padding:11px 15px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid var(--line);outline:none;transition:border-color .2s;}
.wam-in::placeholder{color:var(--dim);}
.wam-in:focus{border-color:var(--line-2);}
.wam-send{width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;border:0;cursor:pointer;background:#25D366;transition:transform .3s var(--out),filter .2s;}
.wam-send:hover{transform:scale(1.07);filter:brightness(1.08);}
.wam-send svg{width:18px;height:18px;fill:#fff;margin-left:2px;}

@media(max-width:560px){
  .wam-panel{left:0;right:0;bottom:0;width:100%;max-height:90svh;border-radius:24px 24px 0 0;transform-origin:50% 100%;transform:translateY(100%);}
  .wam-h{padding-top:20px;position:relative;}
  .wam-h::before{content:"";position:absolute;left:50%;top:7px;width:40px;height:4px;margin-left:-20px;border-radius:4px;background:rgba(255,255,255,.18);}
  .wam-in{font-size:16px;}
}
@media(prefers-reduced-motion:reduce){ .wam-panel,.wam-bub,.wam-rp,.wam-bg{transition:none!important;} .wam-typing span{animation:none;} }
html.wam-lock,html.wam-lock body{overflow:hidden;}