/* WhatsApp Chat Widget — frontend styles */

#wacw-widget{position:fixed;bottom:22px;z-index:99998;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
#wacw-widget.wacw-pos-right{right:22px}
#wacw-widget.wacw-pos-left{left:22px}

/* ---------- Launcher ---------- */
.wacw-launcher{position:relative;width:var(--wacw-size,60px);height:var(--wacw-size,60px);border-radius:50%;border:none;cursor:pointer;background:var(--wacw-btn-bg,#25D366);color:var(--wacw-icon,#fff);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.28);transition:box-shadow .2s ease;margin-left:auto}
.wacw-launcher:hover{box-shadow:0 8px 24px rgba(0,0,0,.34);animation-play-state:paused;transform:scale(1.06)}
.wacw-launcher:active{transform:scale(.97)}

/* Icon sizing — !important guards against theme resets that hid the icon */
.wacw-launcher .wacw-launcher-icon{display:flex !important;align-items:center;justify-content:center;line-height:0}
.wacw-launcher .wacw-launcher-icon svg{width:54% !important;height:54% !important;display:block !important;fill:currentColor}
.wacw-launcher.wacw-launcher-label .wacw-launcher-icon svg{width:26px !important;height:26px !important}
.wacw-launcher .wacw-launcher-img{width:56% !important;height:56% !important;object-fit:contain;display:block !important}
.wacw-launcher.wacw-launcher-label .wacw-launcher-img{width:26px !important;height:26px !important}

/* Pill-with-text launcher (higher converting) */
.wacw-launcher.wacw-launcher-label{width:auto;min-width:var(--wacw-size,60px);height:auto;min-height:var(--wacw-size,60px);border-radius:40px;padding:0 22px 0 18px;gap:10px}
.wacw-launcher .wacw-launcher-text{font-size:15px;font-weight:600;white-space:nowrap;color:currentColor;line-height:1.2}

.wacw-badge{position:absolute;top:-2px;right:-2px;background:#ff3b30;color:#fff;font-size:11px;font-weight:700;min-width:20px;height:20px;border-radius:10px;display:flex;align-items:center;justify-content:center;border:2px solid #fff;padding:0 4px;z-index:2}

/* ---------- Animations (chosen in admin) ---------- */
/* Pulse (ripple ring) */
.wacw-anim-pulse::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--wacw-btn-bg,#25D366);z-index:-1;animation:wacw-pulse 2s infinite}
.wacw-launcher-label.wacw-anim-pulse::before{border-radius:40px}
@keyframes wacw-pulse{0%{transform:scale(1);opacity:.6}70%{transform:scale(1.7);opacity:0}100%{transform:scale(1.7);opacity:0}}

/* Bounce */
.wacw-anim-bounce{animation:wacw-bounce 1.8s ease infinite}
@keyframes wacw-bounce{0%,20%,50%,80%,100%{transform:translateY(0)}40%{transform:translateY(-14px)}60%{transform:translateY(-7px)}}

/* Heartbeat */
.wacw-anim-heartbeat{animation:wacw-heartbeat 1.5s ease-in-out infinite}
@keyframes wacw-heartbeat{0%{transform:scale(1)}14%{transform:scale(1.18)}28%{transform:scale(1)}42%{transform:scale(1.18)}70%{transform:scale(1)}}

/* Shake */
.wacw-anim-shake{animation:wacw-shake 2.5s ease infinite}
@keyframes wacw-shake{0%,88%,100%{transform:translateX(0)}90%{transform:translateX(-4px) rotate(-6deg)}92%{transform:translateX(4px) rotate(6deg)}94%{transform:translateX(-4px) rotate(-6deg)}96%{transform:translateX(4px) rotate(6deg)}98%{transform:translateX(-2px)}}

/* Wobble */
.wacw-anim-wobble{animation:wacw-wobble 2.5s ease infinite}
@keyframes wacw-wobble{0%,60%,100%{transform:none}15%{transform:translateX(-6px) rotate(-6deg)}30%{transform:translateX(5px) rotate(6deg)}45%{transform:translateX(-4px) rotate(-3.6deg)}}

/* Glow (breathing shadow) */
.wacw-anim-glow{animation:wacw-glow 1.8s ease-in-out infinite}
@keyframes wacw-glow{0%,100%{box-shadow:0 0 0 0 rgba(37,211,102,.6),0 6px 18px rgba(0,0,0,.28)}50%{box-shadow:0 0 0 14px rgba(37,211,102,0),0 6px 18px rgba(0,0,0,.28)}}

/* Swing */
.wacw-anim-swing{transform-origin:top center;animation:wacw-swing 2.5s ease infinite}
@keyframes wacw-swing{0%,70%,100%{transform:rotate(0)}75%{transform:rotate(12deg)}80%{transform:rotate(-10deg)}85%{transform:rotate(6deg)}90%{transform:rotate(-4deg)}}

/* Tada */
.wacw-anim-tada{animation:wacw-tada 2.5s ease infinite}
@keyframes wacw-tada{0%,90%,100%{transform:scale(1) rotate(0)}10%,20%{transform:scale(.9) rotate(-3deg)}30%,50%,70%{transform:scale(1.1) rotate(3deg)}40%,60%{transform:scale(1.1) rotate(-3deg)}80%{transform:scale(1.1) rotate(0)}}

/* ---------- Greeting bubble ---------- */
.wacw-greeting{position:absolute;bottom:calc(var(--wacw-size,60px) + 14px);background:#fff;color:#333;padding:12px 34px 12px 16px;border-radius:14px;box-shadow:0 8px 24px rgba(0,0,0,.16);font-size:14px;line-height:1.4;max-width:240px;animation:wacw-fade-up .4s ease both}
.wacw-pos-right .wacw-greeting{right:4px}
.wacw-pos-left .wacw-greeting{left:4px}
.wacw-greeting::after{content:"";position:absolute;bottom:-6px;width:14px;height:14px;background:#fff;transform:rotate(45deg)}
.wacw-pos-right .wacw-greeting::after{right:22px}
.wacw-pos-left .wacw-greeting::after{left:22px}
.wacw-greeting-close{position:absolute;top:6px;right:8px;background:none;border:none;font-size:18px;line-height:1;color:#999;cursor:pointer}
.wacw-greeting.wacw-hidden{display:none}

/* ---------- Popup ---------- */
.wacw-popup{position:absolute;bottom:calc(var(--wacw-size,60px) + 18px);width:340px;max-width:calc(100vw - 44px);background:#fff;border-radius:var(--wacw-radius,16px);overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,.25);opacity:0;visibility:hidden;transform:translateY(16px) scale(.96);transition:opacity .25s ease,transform .25s ease,visibility .25s}
.wacw-pos-right .wacw-popup{right:0;transform-origin:bottom right}
.wacw-pos-left .wacw-popup{left:0;transform-origin:bottom left}
.wacw-popup.wacw-open{opacity:1;visibility:visible;transform:translateY(0) scale(1)}

.wacw-header{background:var(--wacw-header-bg,#075E54);color:var(--wacw-header-text,#fff);padding:16px;display:flex;align-items:center;gap:12px;position:relative}
.wacw-avatar{width:44px;height:44px;border-radius:50%;overflow:hidden;flex-shrink:0;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center}
.wacw-avatar-img{width:100%;height:100%;object-fit:cover}
.wacw-avatar-icon{display:flex;width:100%;height:100%;align-items:center;justify-content:center}
.wacw-avatar-icon svg{width:60%;height:60%}
.wacw-header-meta{display:flex;flex-direction:column;line-height:1.3}
.wacw-header-meta strong{font-size:15px}
.wacw-status{font-size:12px;opacity:.9;display:flex;align-items:center;gap:5px}
.wacw-dot{width:8px;height:8px;border-radius:50%;background:#4ade80;display:inline-block;animation:wacw-blink 2s infinite}
@keyframes wacw-blink{0%,100%{opacity:1}50%{opacity:.4}}
.wacw-close{position:absolute;top:10px;right:10px;background:none;border:none;color:inherit;font-size:22px;line-height:1;cursor:pointer;opacity:.8}
.wacw-close:hover{opacity:1}

.wacw-body{background:#e5ddd5;background-image:url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23d4ccc2' fill-opacity='0.4'%3E%3Cpath d='M0 0h20v20H0zM20 20h20v20H20z'/%3E%3C/g%3E%3C/svg%3E");padding:20px 16px;min-height:90px;display:flex;flex-direction:column}
.wacw-msg{background:#fff;padding:10px 12px 6px;border-radius:0 10px 10px 10px;max-width:85%;box-shadow:0 1px 1px rgba(0,0,0,.12);position:relative;animation:wacw-fade-up .4s ease both}
.wacw-msg::before{content:"";position:absolute;top:0;left:-8px;border:8px solid transparent;border-top-color:#fff;border-right-color:#fff}
.wacw-msg-name{font-size:12px;font-weight:700;color:#075E54;margin-bottom:2px}
.wacw-msg-text{font-size:14px;color:#303030;line-height:1.45}
.wacw-msg-time{font-size:10px;color:#999;text-align:right;margin-top:2px}

.wacw-cta{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--wacw-accent,#25D366);color:#fff !important;text-decoration:none;padding:14px;font-size:15px;font-weight:600;transition:filter .2s ease}
.wacw-cta:hover{filter:brightness(1.07)}

@keyframes wacw-fade-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

@media (max-width:480px){
	#wacw-widget{bottom:16px}
	#wacw-widget.wacw-pos-right{right:16px}
	#wacw-widget.wacw-pos-left{left:16px}
	.wacw-popup{width:calc(100vw - 32px)}
}