/* ============================================================
   WAzap — CSS do chat, extraido de css/index.css em 19/09/2026.
   So para as paginas que NAO carregam o index.css inteiro
   (404, converter, demo, politica). As outras 50 ja tinham
   este bloco e nao precisam deste arquivo.
   As variaveis abaixo repetem as do index.css como fallback:
   sem elas a bolha sairia sem cor nestas quatro paginas.
   ============================================================ */
:root {
  --teal: #12b8a6; --teal-d: #0c8f80; --teal-l: #3ad9c3;
  --pink: #ec4899; --pink-l: #f472b6; --muted: #64748b;
}

/* ---------- 4) CHATBOT (widget criado via JS) ---------- */
#wz-chat-btn {
  /* [19/09/2026] bottom soma a altura da barra de cookies quando ela existe.
     Sem a barra a variavel nao e definida e o fallback 0px mantem 22px. */
  position: fixed; right: 22px; bottom: calc(22px + var(--wz-consent-h, 0px)); z-index: 1300;
  width: 58px; height: 58px; border: 0; border-radius: 50%; cursor: pointer; padding: 0;
  background: linear-gradient(145deg, var(--teal-l), var(--teal-d));
  box-shadow: 0 12px 30px rgba(12,143,128,.45);
  display: flex; align-items: center; justify-content: center;
  transition: transform .28s cubic-bezier(.34,1.56,.64,1);
}
#wz-chat-btn:hover { transform: scale(1.07); }
#wz-chat-btn .wz-ic { position: absolute; display: flex; transition: opacity .25s, transform .35s cubic-bezier(.34,1.56,.64,1); }
#wz-chat-btn .wz-ic-x { opacity: 0; transform: rotate(-90deg) scale(.5); }
#wz-chat-btn.open .wz-ic-m { opacity: 0; transform: rotate(90deg) scale(.5); }
#wz-chat-btn.open .wz-ic-x { opacity: 1; transform: none; }
#wz-chat-dot {
  position: absolute; top: -2px; right: -2px; min-width: 19px; height: 19px; padding: 0 5px;
  background: var(--pink); color: #fff; border-radius: 999px; border: 2px solid #fff;
  font: 800 11px/1 'Urbanist', sans-serif; display: flex; align-items: center; justify-content: center;
}
#wz-chat-btn.open #wz-chat-dot { display: none; }
#wz-chat-btn::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(58,217,195,.5); animation: wzRing 2.8s ease-out infinite;
}
#wz-chat-btn.open::after { animation: none; }
@keyframes wzRing {
  0% { box-shadow: 0 0 0 0 rgba(58,217,195,.5); }
  70% { box-shadow: 0 0 0 15px rgba(58,217,195,0); }
  100% { box-shadow: 0 0 0 0 rgba(58,217,195,0); }
}
#wz-chat {
  position: fixed; right: 22px; bottom: calc(92px + var(--wz-consent-h, 0px)); z-index: 1301;
  width: 372px; max-width: calc(100vw - 28px);
  height: 540px; max-height: calc(100vh - 130px);
  background: #fff; border: 1px solid #e2eaf1; border-radius: 20px; overflow: hidden;
  box-shadow: 0 24px 70px rgba(13,27,42,.28);
  display: flex; flex-direction: column; transform-origin: bottom right;
  opacity: 0; transform: translateY(16px) scale(.92); pointer-events: none;
  transition: opacity .26s, transform .38s cubic-bezier(.34,1.4,.64,1);
}
#wz-chat.open { opacity: 1; transform: none; pointer-events: auto; }
#wz-chat .wz-head {
  padding: 16px 18px; color: #fff; display: flex; align-items: center; gap: 11px;
  background: linear-gradient(150deg, var(--teal-l), var(--teal-d));
  position: relative; overflow: hidden; flex: 0 0 auto;
}
#wz-chat .wz-head::before { content: ''; position: absolute; width: 150px; height: 150px; border-radius: 50%; background: rgba(255,255,255,.14); top: -70px; right: -40px; }
#wz-chat .wz-av { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.22); border: 1.5px solid rgba(255,255,255,.5); display: flex; align-items: center; justify-content: center; font-size: 19px; position: relative; z-index: 1; flex: 0 0 auto; }
#wz-chat .wz-head h4 { margin: 0; font-size: 15px; font-weight: 800; position: relative; z-index: 1; color: #fff; }
#wz-chat .wz-st { font-size: 11.5px; opacity: .93; display: flex; align-items: center; gap: 6px; position: relative; z-index: 1; }
#wz-chat .wz-st i { width: 7px; height: 7px; border-radius: 50%; background: #a7f3d0; box-shadow: 0 0 0 3px rgba(167,243,208,.3); }
/* [03/09/2026] Leitura: era 13,4px com entrelinha 1,5 em balao de 88%, e as
   respostas usam muito <br> — as linhas empilhavam coladas e o dono descreveu
   como "um monte de letrinhas grudadas". Fonte, entrelinha, respiro interno e
   espaco entre baloes aumentados. */
#wz-chat .wz-body { flex: 1 1 auto; overflow-y: auto; padding: 18px 15px 8px; display: flex; flex-direction: column; gap: 12px; background: #f5f9fb; scroll-behavior: smooth; }
#wz-chat .wz-body::-webkit-scrollbar { width: 6px; }
#wz-chat .wz-body::-webkit-scrollbar-thumb { background: #cfdbe5; border-radius: 99px; }
#wz-chat .wz-m { max-width: 90%; padding: 12px 15px; border-radius: 16px; font-size: 14.5px; line-height: 1.68; letter-spacing: .002em; animation: wzIn .3s cubic-bezier(.16,1,.3,1) both; }
/* respiro entre as linhas separadas por <br>, que e como as respostas listam passos */
#wz-chat .wz-m br { content: ''; display: block; margin-bottom: 5px; }
/* NAO usar display:inline-block no <b>: impede a negrita de quebrar linha e
   ela vai sozinha para uma linha, deixando a leitura pior que antes. */
#wz-chat .wz-m.bot { align-self: flex-start; background: #fff; border: 1px solid #e2eaf1; border-bottom-left-radius: 5px; color: #33415c; }
#wz-chat .wz-m.me { align-self: flex-end; background: linear-gradient(145deg, var(--teal), var(--teal-d)); color: #fff; border-bottom-right-radius: 5px; font-weight: 600; }
#wz-chat .wz-m b { color: #0d1b2a; font-weight: 700; }
#wz-chat .wz-m.me b { color: #fff; }
@keyframes wzIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
#wz-chat .wz-typ { align-self: flex-start; display: flex; gap: 4px; padding: 12px 14px; background: #fff; border: 1px solid #e2eaf1; border-radius: 15px; border-bottom-left-radius: 5px; }
#wz-chat .wz-typ i { width: 7px; height: 7px; border-radius: 50%; background: #b6c2d0; animation: wzBnc 1.3s infinite; }
#wz-chat .wz-typ i:nth-child(2) { animation-delay: .18s; }
#wz-chat .wz-typ i:nth-child(3) { animation-delay: .36s; }
@keyframes wzBnc { 0%,60%,100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-5px); opacity: 1; } }
#wz-chat .wz-foot { flex: 0 0 auto; padding: 10px 12px 13px; border-top: 1px solid #e6edf3; background: #fff; }
#wz-chat .wz-qr { display: flex; flex-wrap: wrap; gap: 7px; }
#wz-chat .wz-qr button {
  background: #fff; border: 1.5px solid #e2eaf1; color: #33415c; border-radius: 999px;
  padding: 8px 13px; font: 600 12.5px 'Urbanist', system-ui, sans-serif; cursor: pointer;
  transition: .16s; animation: wzIn .3s both;
}
#wz-chat .wz-qr button:hover { border-color: var(--teal); color: var(--teal-d); }
#wz-chat .wz-qr button.cta { background: linear-gradient(145deg, var(--pink-l), var(--pink)); border-color: transparent; color: #fff; font-weight: 800; }
#wz-chat .wz-qr button.ghost { border-style: dashed; color: var(--muted); }
/* campo de digitação (o cliente conversa escrevendo) */
#wz-chat .wz-input { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
#wz-chat .wz-input input {
  flex: 1 1 auto; min-width: 0;
  padding: 11px 15px; border-radius: 999px;
  border: 1.5px solid #e2eaf1; background: #f7fafc; color: #1f2a3a;
  font: 400 13.5px 'Urbanist', system-ui, sans-serif; outline: none;
  transition: border-color .16s, background .16s;
}
#wz-chat .wz-input input::placeholder { color: #9aa8b8; }
#wz-chat .wz-input input:focus { border-color: var(--teal); background: #fff; }
#wz-chat .wz-input button {
  flex: 0 0 auto; width: 40px; height: 40px; border: 0; border-radius: 50%; cursor: pointer;
  background: linear-gradient(145deg, var(--teal), var(--teal-d)); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(18,184,166,.34); transition: transform .16s, filter .16s;
}
#wz-chat .wz-input button:hover { transform: scale(1.06); filter: brightness(1.05); }
#wz-chat .wz-input button:active { transform: scale(.94); }
@media (max-width: 460px) {
  #wz-chat { right: 12px; left: 12px; width: auto; bottom: calc(86px + var(--wz-consent-h, 0px)); height: calc(100vh - 120px - var(--wz-consent-h, 0px)); }
  #wz-chat-btn { right: 16px; bottom: calc(16px + var(--wz-consent-h, 0px)); }
}