/* wa-chat.css — Chat do WhatsApp (botão flutuante + painel com foto e atalhos)
 * As cores vêm de variáveis CSS e podem ser trocadas no wa-chat.js (config "cores")
 * ou aqui, no bloco .wa-widget abaixo. Não depende do CSS do site. */
.wa-widget {
  --wa-escuro: #0f4d2e;      /* cabeçalho, textos e bordas dos atalhos */
  --wa-escuro2: #0a3a22;     /* início do degradê do cabeçalho */
  --wa-destaque: #f2a71b;    /* borda da foto */
  --wa-fundo: #faf6ef;       /* fundo da conversa */
  --wa-verde: #25D366;       /* verde do WhatsApp */
  font-family: Arial, Helvetica, sans-serif;
}
.wa-widget *, .wa-widget *::before, .wa-widget *::after { box-sizing: border-box; }

/* botão flutuante */
.wa-toggle {
  position: fixed; right: 20px; bottom: 20px; z-index: 2147483000;
  width: 60px; height: 60px; border-radius: 50%; padding: 0; border: 0; cursor: pointer;
  background: var(--wa-verde); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25); transition: transform .15s ease;
}
.wa-toggle:hover { transform: scale(1.08); }
.wa-toggle svg { width: 30px; height: 30px; fill: #fff; }
.wa-badge {
  position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 5px;
  border-radius: 999px; background: #e53935; color: #fff; font: 700 .75rem/22px Arial, sans-serif;
  text-align: center; border: 2px solid #fff;
}

/* painel */
.wa-panel {
  position: fixed; right: 20px; bottom: 92px; z-index: 2147483001;
  width: 360px; max-width: calc(100vw - 24px);
  background: #fff; border-radius: 20px; overflow: hidden;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .35);
}
.wa-panel[hidden] { display: none; }
.wa-head {
  display: flex; align-items: center; gap: 14px; padding: 18px;
  background: linear-gradient(160deg, var(--wa-escuro2), var(--wa-escuro)); color: #fff;
}
.wa-avatar { position: relative; flex: 0 0 auto; width: 56px; height: 56px; }
.wa-avatar img {
  width: 56px; height: 56px; border-radius: 50%; object-fit: cover; display: block;
  border: 2px solid var(--wa-destaque); background: var(--wa-fundo);
}
.wa-online {
  position: absolute; right: 0; bottom: 0; width: 14px; height: 14px; border-radius: 50%;
  background: var(--wa-verde); border: 2px solid var(--wa-escuro);
}
.wa-who { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.wa-who strong { font-size: 1.1rem; }
.wa-who span { font-size: .85rem; color: rgba(255, 255, 255, .8); }
.wa-close {
  flex: 0 0 auto; background: transparent; border: 0; color: #fff; cursor: pointer;
  font-size: 1.9rem; line-height: 1; padding: 0 4px;
}
.wa-body { background: var(--wa-fundo); padding: 16px 18px 18px; }
.wa-bubble {
  background: #fff; border-radius: 14px; padding: 12px 16px 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08); color: #22302a;
}
.wa-bubble strong { display: block; font-size: .9rem; color: var(--wa-escuro); margin-bottom: 2px; }
.wa-bubble p { margin: 0; font-size: 1.05rem; line-height: 1.4; }
.wa-bubble time { display: block; text-align: right; font-size: .75rem; color: #7a8a82; margin-top: 4px; }
.wa-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.wa-chip {
  border: 1.5px solid var(--wa-escuro); color: var(--wa-escuro); background: transparent;
  border-radius: 999px; padding: 8px 16px; font-weight: 700; font-size: .9rem; text-decoration: none;
  transition: background .15s, color .15s;
}
.wa-chip:hover { background: var(--wa-escuro); color: #fff; }
.wa-foot { padding: 14px 18px 18px; background: #fff; }
.wa-cta {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--wa-verde); color: var(--wa-escuro2); font-weight: 800; border-radius: 12px;
  padding: 14px 16px; text-decoration: none;
}
.wa-cta:hover { filter: brightness(.95); }
.wa-cta svg { width: 24px; height: 24px; fill: var(--wa-escuro2); flex: 0 0 auto; }
.wa-toggle:focus-visible, .wa-chip:focus-visible, .wa-cta:focus-visible, .wa-close:focus-visible {
  outline: 3px solid var(--wa-destaque); outline-offset: 2px;
}
@media (max-width: 640px) { .wa-panel { right: 12px; bottom: 84px; } }