/* Padrão da família: conversa de WhatsApp ANIMADA na introdução (modelo: finan.webbots.com.br).
   Uso: <div class="wa-demo" data-wa-demo> ... <div class="wa-msg in">..</div> <div class="wa-msg out">..</div> </div>
   in = mensagem recebida (a atendente/IA), out = mensagem enviada (o cliente). Cores reais do WhatsApp. */
.wa-demo{display:flex;flex-direction:column;gap:10px}
.wa-msg{opacity:0;transform:translateY(10px) scale(.98);transition:opacity .4s ease,transform .4s ease;max-width:84%;padding:9px 13px;font-size:14.5px;line-height:1.4;color:#111b21;word-break:break-word}
.wa-msg.on{opacity:1;transform:none}
.wa-msg.in{align-self:flex-start;background:#fff;border-radius:16px 16px 16px 4px}
.wa-msg.out{align-self:flex-end;background:#dcf8c6;border-radius:16px 16px 4px 16px}
.wa-typing{display:none;align-self:flex-start;gap:4px;padding:12px 15px;background:#fff;border-radius:16px 16px 16px 4px}
.wa-typing.on{display:flex}
.wa-typing i{width:7px;height:7px;border-radius:50%;background:#8696a0;animation:waDot 1s infinite ease-in-out}
.wa-typing i:nth-child(2){animation-delay:.15s}.wa-typing i:nth-child(3){animation-delay:.3s}
@keyframes waDot{0%,80%,100%{opacity:.35;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.wa-msg{opacity:1;transform:none;transition:none}.wa-typing{display:none!important}}