.lwa, .lwa * { box-sizing: border-box; }
.lwa { position: fixed; right: 20px; bottom: 20px; z-index: 99990; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; line-height: 1.45; }
.lwa--left { right: auto; left: 20px; }
.lwa__fab { position: relative; display: grid; place-items: center; width: 58px; height: 58px; border: 0; border-radius: 50%; background: #25d366; color: #fff; cursor: pointer; box-shadow: 0 8px 22px rgba(0, 0, 0, .28); transition: transform .2s, background-color .2s; }
.lwa__fab:hover { transform: scale(1.06); background: #1fb855; }
.lwa__fab:focus-visible, .lwa__go:focus-visible, .lwa__x:focus-visible { outline: 3px solid #0b4b75; outline-offset: 3px; }
.lwa__fab svg { width: 30px; height: 30px; fill: currentColor; display: block; }
.lwa__cl { display: none; font-size: 34px; line-height: 1; font-weight: 300; }
.lwa.is-open .lwa__wa { display: none; }
.lwa.is-open .lwa__cl { display: block; }
.lwa:not(.is-open) .lwa__fab { animation: lwaPulse 2.8s ease-out infinite; }
.lwa__badge { position: absolute; top: -3px; right: -3px; min-width: 21px; height: 21px; padding: 0 5px; border-radius: 11px; border: 2px solid #fff; background: #ef4444; color: #fff; font: 700 12px/17px system-ui, sans-serif; text-align: center; animation: lwaBadge 3s ease-in-out infinite; }
.lwa.is-open .lwa__badge, .lwa.is-seen .lwa__badge { display: none; }
.lwa__card { position: absolute; bottom: 74px; right: 0; width: min(340px, calc(100vw - 32px)); padding: 20px; border-radius: 16px; background: #fff; color: #1f2933; box-shadow: 0 18px 50px rgba(0, 0, 0, .28); opacity: 0; transform: translateY(14px) scale(.96); transform-origin: bottom right; transition: opacity .22s ease, transform .28s cubic-bezier(.2, .8, .2, 1); }
.lwa--left .lwa__card { right: auto; left: 0; transform-origin: bottom left; }
.lwa.is-open .lwa__card { opacity: 1; transform: none; }
.lwa__head { display: flex; align-items: center; gap: 12px; }
.lwa__ava { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #25d366; color: #fff; }
.lwa__ava svg { width: 26px; height: 26px; fill: currentColor; }
.lwa__who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lwa__who strong { font-size: 1.15rem; color: #111; }
.lwa__status { display: flex; align-items: center; gap: 6px; color: #5b6770; font-size: .9rem; }
.lwa__status i { width: 8px; height: 8px; border-radius: 50%; background: #25d366; }
.lwa__x { flex: none; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: #6b7780; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.lwa__x:hover { background: #eef1f3; }
.lwa__msg { margin: 14px 0 16px; color: #3b4650; font-size: .95rem; }
.lwa__go { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 16px; border-radius: 12px; background: #25d366; color: #fff !important; font-weight: 700; text-decoration: none !important; transition: background-color .2s; }
.lwa__go:hover { background: #1fb855; }
.lwa__go svg { width: 26px; height: 26px; fill: currentColor; flex: none; }
/* the LOGIN theme has its own simple WhatsApp pill; hide it so there is only one button */
.wa { display: none !important; }
@keyframes lwaPulse { 0% { box-shadow: 0 8px 22px rgba(0, 0, 0, .28), 0 0 0 0 rgba(37, 211, 102, .55); } 70%, 100% { box-shadow: 0 8px 22px rgba(0, 0, 0, .28), 0 0 0 16px rgba(37, 211, 102, 0); } }
@keyframes lwaBadge { 0%, 88%, 100% { transform: scale(1); } 92% { transform: scale(1.25); } 96% { transform: scale(.95); } }
@media (max-width: 480px) { .lwa { right: 14px; bottom: 14px; } .lwa--left { left: 14px; } .lwa__card { bottom: 70px; } }
@media (prefers-reduced-motion: reduce) { .lwa__fab, .lwa__badge { animation: none !important; } .lwa__card { transition: none; } }