/* ==========================================================================
   components/wa-chat.css
   Botón y ventana flotante de chat de WhatsApp.
   ========================================================================== */
.wa-float { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 70; }
.wa-fab { position: relative; width: 62px; height: 62px; border-radius: 50%; background: var(--wa); color: #fff; display: grid; place-items: center; box-shadow: 0 14px 34px -8px rgba(37,211,102,.8); transition: transform .4s var(--ease); transform: scale(0); }
.ready .wa-fab { transform: scale(1); transition-delay: .8s; }
.wa-fab:hover { transform: scale(1.08) rotate(-8deg); transition-delay: 0s; }
.wa-fab .ico { width: 32px; height: 32px; }
.wa-fab__ping { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--wa); animation: waPing 2.2s infinite; }
@keyframes waPing { to { transform: scale(1.7); opacity: 0; } }
.wa-fab.hint { animation: wiggle 1s 2; }
@keyframes wiggle { 20%, 60% { rotate: -14deg; } 40%, 80% { rotate: 14deg; } }
.wa-chat { position: absolute; right: 0; bottom: 78px; width: min(340px, calc(100vw - 32px)); border-radius: 22px; overflow: hidden; background: #111116; border: 1px solid var(--line-2); box-shadow: 0 30px 70px -20px rgba(0,0,0,.9); transform-origin: bottom right; transform: scale(.6) translateY(20px); opacity: 0; pointer-events: none; transition: all .45s var(--ease); }
.wa-chat.open { transform: none; opacity: 1; pointer-events: auto; }
.wa-chat__head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: linear-gradient(135deg, #128c4a, #0b6b38); }
.wa-chat__head img { width: 40px; height: 40px; border-radius: 50%; background: #fff; }
.wa-chat__head div { flex: 1; line-height: 1.25; }
.wa-chat__head small { display: flex; align-items: center; gap: 6px; opacity: .85; font-size: .78rem; }
.online { width: 8px; height: 8px; border-radius: 50%; background: #7dff9f; box-shadow: 0 0 8px #7dff9f; }
.wa-chat__x { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.2); }
.wa-chat__body { padding: 16px; background: radial-gradient(circle at 20% 20%, rgba(37,211,102,.06), transparent 50%), #0c0c10; }
.bubble { display: inline-block; padding: 10px 14px; border-radius: 4px 16px 16px 16px; background: #1f1f27; font-size: .92rem; margin-bottom: 14px; animation: stepIn .5s var(--ease); }
.quick { display: grid; gap: 8px; }
.quick button { text-align: left; padding: 10px 14px; border-radius: 14px; border: 1px solid rgba(37,211,102,.35); color: #b8f5cc; font-size: .88rem; font-weight: 600; transition: all .3s; }
.quick button:hover { background: rgba(37,211,102,.12); transform: translateX(4px); }
.wa-chat__input { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line); }
.wa-chat__input input { flex: 1; min-width: 0; height: 42px; padding: 0 14px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid var(--line); outline: 0; }
.wa-chat__input button { width: 42px; height: 42px; border-radius: 50%; background: var(--wa); color: #06210f; display: grid; place-items: center; }