/* =====================================================================
   CHAT DO SITE — cara de WhatsApp, dentro da página
   ===================================================================== */
:root{
  --zap:#25D366; --zap-esc:#075E54; --zap-topo:#128C7E;
  --bolha-eu:#DCF8C6; --bolha-ele:#FFFFFF; --fundo-chat:#ECE5DD;
}
#chatBtn{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:95;
  width:62px;height:62px;border-radius:50%;background:var(--zap);display:grid;place-items:center;
  box-shadow:0 6px 22px -4px rgba(37,211,102,.6),0 2px 8px rgba(0,0,0,.18);cursor:pointer;
  transition:transform .2s}
#chatBtn:hover{transform:scale(1.07)}
#chatBtn svg{width:34px;height:34px;color:#fff}
#chatBtn .selo{position:absolute;top:-2px;right:-2px;min-width:21px;height:21px;padding:0 5px;
  border-radius:999px;background:#F03D3D;color:#fff;font-size:11.5px;font-weight:800;
  display:grid;place-items:center;border:2.5px solid #fff}
#chatBtn.escondido{display:none}

#chatBox{position:fixed;inset:0;z-index:120;display:none;flex-direction:column;background:var(--fundo-chat)}
#chatBox.aberto{display:flex}

.ch-topo{background:var(--zap-topo);color:#fff;display:flex;align-items:center;gap:11px;
  padding:calc(10px + env(safe-area-inset-top)) 14px 10px;flex-shrink:0}
.ch-voltar{width:34px;height:34px;display:grid;place-items:center;flex-shrink:0;cursor:pointer}
.ch-voltar svg{width:22px;height:22px;color:#fff}
.ch-foto{width:42px;height:42px;border-radius:50%;background:#fff;flex-shrink:0;overflow:hidden;
  display:grid;place-items:center}
.ch-foto img{width:100%;height:100%;object-fit:cover}
.ch-quem{min-width:0;flex:1;line-height:1.25}
.ch-nome{font-size:16px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-sub{font-size:12.5px;opacity:.85;height:16px}
.ch-sub b{font-weight:400}

.ch-msgs{flex:1;overflow-y:auto;padding:14px 12px 6px;display:flex;flex-direction:column;gap:3px;
  background-image:linear-gradient(rgba(236,229,221,.94),rgba(236,229,221,.94))}
.ch-dia{align-self:center;background:#fff;color:#54656F;font-size:12px;padding:5px 12px;
  border-radius:8px;margin:6px 0 10px;box-shadow:0 1px 1px rgba(0,0,0,.08)}
.bolha{max-width:82%;padding:7px 10px 6px;border-radius:8px;font-size:14.8px;line-height:1.45;
  box-shadow:0 1px 1px rgba(0,0,0,.13);position:relative;word-wrap:break-word;white-space:pre-wrap}
.bolha.ele{align-self:flex-start;background:var(--bolha-ele);border-top-left-radius:2px}
.bolha.eu{align-self:flex-end;background:var(--bolha-eu);border-top-right-radius:2px}
.bolha .hora{float:right;font-size:11px;color:#667781;margin:6px 0 -2px 8px;user-select:none}
.bolha img{max-width:100%;border-radius:6px;display:block;margin-bottom:4px}
.bolha .audio{display:flex;align-items:center;gap:9px;min-width:170px}
.bolha .audio audio{width:100%;height:34px}
.bolha a{color:#027EB5;text-decoration:underline;word-break:break-all}

.digitando{align-self:flex-start;background:#fff;border-radius:8px;border-top-left-radius:2px;
  padding:11px 14px;display:flex;gap:4px;box-shadow:0 1px 1px rgba(0,0,0,.13)}
.digitando i{width:7px;height:7px;border-radius:50%;background:#9AA0A6;animation:pula 1.3s infinite}
.digitando i:nth-child(2){animation-delay:.18s}
.digitando i:nth-child(3){animation-delay:.36s}
@keyframes pula{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-5px);opacity:1}}

.ch-baixo{flex-shrink:0;padding:8px 10px calc(8px + env(safe-area-inset-bottom));display:flex;
  align-items:flex-end;gap:7px;background:#F0F2F5}
.ch-campo{flex:1;display:flex;align-items:center;gap:6px;background:#fff;border-radius:22px;
  padding:6px 12px 6px 8px;min-height:46px}
.ch-campo textarea{flex:1;border:0;outline:0;resize:none;font:inherit;font-size:15.5px;
  line-height:1.4;height:24px;max-height:96px;background:transparent;padding:0;margin:0;
  overflow-y:auto;display:block}
.ch-campo textarea::placeholder{color:#8696A0}
.ch-icone{width:30px;height:30px;display:grid;place-items:center;flex-shrink:0;cursor:pointer;
  color:#54656F;background:none;border:0}
.ch-icone svg{width:23px;height:23px}
.ch-enviar{width:46px;height:46px;border-radius:50%;background:var(--zap-topo);display:grid;
  place-items:center;flex-shrink:0;cursor:pointer;border:0;transition:background .16s}
.ch-enviar svg{width:23px;height:23px;color:#fff}
.ch-enviar.gravando{background:#E24B4A;animation:pulsaRec 1.2s infinite}
@keyframes pulsaRec{50%{opacity:.65}}
.ch-gravando{flex:1;display:flex;align-items:center;gap:10px;color:#E24B4A;font-size:14.5px;
  font-weight:600;padding:0 6px}
.ch-gravando .pt{width:10px;height:10px;border-radius:50%;background:#E24B4A;animation:pulsaRec 1.2s infinite}
.ch-aviso{font-size:11.5px;color:#667781;text-align:center;padding:0 14px 8px;background:#F0F2F5}

@media (min-width:760px){
  #chatBox{inset:auto 22px 22px auto;width:400px;height:620px;max-height:86vh;
    border-radius:14px;overflow:hidden;box-shadow:0 12px 44px rgba(0,0,0,.28)}
  .ch-topo{padding:12px 14px}
  .ch-voltar{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}