/* ==========================================================================
   Widget flutuante do WhatsApp — clone do padrão "avatar + balão de chat"
   do Porto Belo (lancamentosportobelo.com.br): avatar real do corretor com
   borda verde pulsante + balão de mensagem que aparece ao rolar a página.
   Usado em todas as páginas do site (substitui o antigo botão .wa-float).
   ========================================================================== */

.wa-chat-widget { position: fixed; bottom: 24px; right: 96px; z-index: 998; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.wa-chat-bubble { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 16px 16px 4px 16px; padding: 14px 18px; box-shadow: 0 8px 30px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06); max-width: 320px; cursor: pointer; transition: .25s; animation: chatSlideIn .6s cubic-bezier(.34,1.56,.64,1) .3s both; position: relative; border: none; }
.wa-chat-bubble:hover { box-shadow: 0 12px 40px rgba(0,0,0,.15); transform: translateY(-2px); }
.wa-chat-text { flex: 1; }
.wa-chat-msg { font-family: var(--body-font); font-size: .85rem; color: #475569; line-height: 1.4; }
.wa-chat-msg strong { color: var(--text-primary); }
.wa-chat-typing { display: flex; gap: 3px; margin-top: 6px; }
.wa-chat-typing span { width: 5px; height: 5px; background: #94a3b8; border-radius: 50%; display: inline-block; animation: typingDot 1.4s ease-in-out infinite; }
.wa-chat-typing span:nth-child(2) { animation-delay: .2s; }
.wa-chat-typing span:nth-child(3) { animation-delay: .4s; }
.wa-chat-close { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; background: #eef0f4; border: 1px solid var(--border-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: .2s; opacity: 0; }
.wa-chat-bubble:hover .wa-chat-close { opacity: 1; }
.wa-chat-close:hover { background: #ef4444; }
.wa-chat-close:hover svg { stroke: #fff; }
.wa-chat-close svg { width: 12px; height: 12px; }
.wa-avatar-float { position: fixed; bottom: 24px; right: 24px; z-index: 999; width: 60px; height: 60px; border-radius: 50%; cursor: pointer; background: none; border: 3px solid #25D366; padding: 0; box-shadow: 0 4px 20px rgba(37,211,102,.4); transition: .3s; overflow: visible; }
.wa-avatar-float:hover { transform: scale(1.1); box-shadow: 0 6px 30px rgba(37,211,102,.6); }
.wa-avatar-float img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: top center; display: block; }
.wa-avatar-badge { position: absolute; bottom: -2px; right: -2px; width: 22px; height: 22px; background: #25D366; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.wa-avatar-badge svg { width: 12px; height: 12px; }
@keyframes chatSlideIn { 0% { opacity: 0; transform: translateY(20px) scale(.95); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes typingDot { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
@keyframes waPulse { 0% { box-shadow: 0 4px 20px rgba(37,211,102,.4); } 50% { box-shadow: 0 4px 20px rgba(37,211,102,.4), 0 0 0 16px rgba(37,211,102,.1); } 100% { box-shadow: 0 4px 20px rgba(37,211,102,.4); } }
.wa-avatar-float.pulse { animation: waPulse 2s infinite; }
@media (max-width: 768px) {
  .wa-chat-widget { right: 20px; bottom: 90px; }
  .wa-chat-bubble { max-width: 260px; padding: 12px 14px; }
  .wa-avatar-float { width: 52px; height: 52px; }
}