.wa-float{position:fixed;bottom:24px;right:24px;z-index:9998;display:flex;align-items:center;justify-content:center;background:#25D366;color:#fff;width:70px;height:70px;border-radius:50%;text-decoration:none;box-shadow:0 4px 24px rgba(37,211,102,.4);transition:transform .3s,box-shadow .3s;animation:waFloat 2s ease-in-out infinite;font-family:inherit;padding:0;perspective:600px}
.wa-float:hover{transform:scale(1.05);box-shadow:0 6px 28px rgba(37,211,102,.5);color:#fff}
.wa-float span.wa-label{display:none}
@keyframes waFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* 3D Flipper */
.wa-flipper{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.4,0,.2,1)}
.wa-flipper.flipped{transform:rotateY(180deg)}
.wa-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;align-items:center;justify-content:center;flex-direction:column;border-radius:50%}
.wa-face-back{transform:rotateY(180deg);gap:2px}
.wa-face-front svg{width:34px;height:34px;fill:#fff;flex-shrink:0}
.wa-flip-num{font-size:26px;font-weight:900;color:#fff;line-height:1;font-family:-apple-system,BlinkMacSystemFont,system-ui,sans-serif}
.wa-flip-pill{display:inline-flex;align-items:center;gap:3px;background:rgba(0,0,0,.22);padding:1px 6px;border-radius:100px;font-size:8px;font-weight:800;color:#fff;letter-spacing:.8px;line-height:1}
.wa-flip-dot{width:5px;height:5px;border-radius:50%;background:#ff5252;animation:waFlipPulse 1.2s infinite;display:inline-block}
@keyframes waFlipPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}}

.wa-notif{position:absolute;top:-4px;right:-4px;width:24px;height:24px;background:#ef4444;color:#fff;border-radius:50%;font-size:13px;font-weight:800;display:none;align-items:center;justify-content:center;border:2px solid #fff;animation:waNotifPop .35s cubic-bezier(.36,.07,.19,.97) forwards;z-index:2}
.wa-notif.show{display:flex}
@keyframes waNotifPop{0%{transform:scale(0)}70%{transform:scale(1.3)}100%{transform:scale(1)}}

/* Desktop: shift left to sit beside scroll-to-top */
@media(min-width:601px){
  .wa-float{right:108px}
}

/* Mobile: keep right corner, smaller */
@media(max-width:600px){
  .wa-float{width:60px;height:60px;bottom:18px;right:18px}
  .wa-face-front svg{width:30px;height:30px}
  .wa-flip-num{font-size:22px}
  .wa-flip-pill{font-size:7px;padding:1px 5px}
}

/* Floating message bubble */
.wa-float-bubble{position:fixed;bottom:104px;right:108px;z-index:9997;background:#fff;border-radius:14px;padding:12px 38px 12px 16px;font-size:13.5px;color:#111;line-height:1.4;max-width:260px;box-shadow:0 8px 28px rgba(0,0,0,.18);opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s;cursor:pointer;font-family:inherit;text-align:left}
.wa-float-bubble.show{opacity:1;transform:translateY(0)}
.wa-float-bubble::after{content:'';position:absolute;bottom:-6px;right:28px;width:12px;height:12px;background:#fff;transform:rotate(45deg);box-shadow:3px 3px 6px rgba(0,0,0,.06)}
.wa-float-bubble-x{position:absolute;top:6px;right:8px;width:20px;height:20px;border-radius:50%;background:#f0f2f5;color:#666;font-size:12px;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;padding:0}
.wa-float-bubble-x:hover{background:#e4e6eb}

@media(max-width:600px){
  .wa-float-bubble{right:18px;bottom:90px;max-width:calc(100vw - 36px)}
  .wa-float-bubble::after{right:22px}
}