/* WA Chat Button v1.3.0 */

#wacb-widget {
    position: fixed;
    z-index: 99999;
    font-family: 'Segoe UI', Helvetica, Arial, sans-serif;
}
#wacb-widget.wacb-position-bottom-right { bottom: 24px; right: 24px; }
#wacb-widget.wacb-position-bottom-left  { bottom: 24px; left: 24px; }

/* ── Toggle Button ── */
#wacb-toggle-btn {
    width: 60px; height: 60px;
    border-radius: 50%; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 20px rgba(37,211,102,0.5), 0 2px 6px rgba(0,0,0,0.15);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    outline: none; padding: 0;
}
#wacb-toggle-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 28px rgba(37,211,102,0.65), 0 3px 10px rgba(0,0,0,0.2);
}
#wacb-toggle-btn svg { display: block; flex-shrink: 0; }

/* ── Popup Base ── */
#wacb-popup {
    position: absolute;
    bottom: 74px;
    width: 330px;
    border-radius: 18px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 10px 40px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.08);
}
.wacb-position-bottom-right #wacb-popup { right: 0; }
.wacb-position-bottom-left  #wacb-popup { left: 0; }

/* ══════════════════════════════════════════
   10 POPUP ANIMATIONS
   ══════════════════════════════════════════ */

/* 1. Slide Up (default) */
@keyframes wacbSlideUp {
    from { opacity:0; transform:translateY(30px); }
    to   { opacity:1; transform:translateY(0); }
}
#wacb-popup.wacb-anim-slideup { animation: wacbSlideUp 0.3s cubic-bezier(.22,.68,0,1.2) both; }

/* 2. Slide Down */
@keyframes wacbSlideDown {
    from { opacity:0; transform:translateY(-30px); }
    to   { opacity:1; transform:translateY(0); }
}
#wacb-popup.wacb-anim-slidedown { animation: wacbSlideDown 0.3s cubic-bezier(.22,.68,0,1.2) both; }

/* 3. Fade */
@keyframes wacbFade {
    from { opacity:0; }
    to   { opacity:1; }
}
#wacb-popup.wacb-anim-fade { animation: wacbFade 0.35s ease both; }

/* 4. Zoom In */
@keyframes wacbZoom {
    from { opacity:0; transform:scale(0.5); }
    to   { opacity:1; transform:scale(1); }
}
#wacb-popup.wacb-anim-zoom { animation: wacbZoom 0.3s cubic-bezier(.22,.68,0,1.3) both; }

/* 5. Zoom Out (from big) */
@keyframes wacbZoomOut {
    from { opacity:0; transform:scale(1.35); }
    to   { opacity:1; transform:scale(1); }
}
#wacb-popup.wacb-anim-zoomout { animation: wacbZoomOut 0.3s ease both; }

/* 6. Flip 3D */
@keyframes wacbFlip {
    from { opacity:0; transform:perspective(700px) rotateY(-90deg); }
    to   { opacity:1; transform:perspective(700px) rotateY(0deg); }
}
#wacb-popup.wacb-anim-flip { animation: wacbFlip 0.4s ease both; }

/* 7. Bounce */
@keyframes wacbBounce {
    0%   { opacity:0; transform:scale(0.3) translateY(20px); }
    50%  { opacity:1; transform:scale(1.06) translateY(-6px); }
    70%  { transform:scale(0.96) translateY(3px); }
    85%  { transform:scale(1.02) translateY(-1px); }
    100% { transform:scale(1) translateY(0); }
}
#wacb-popup.wacb-anim-bounce { animation: wacbBounce 0.5s cubic-bezier(.22,.68,0,1) both; }

/* 8. Swing */
@keyframes wacbSwing {
    from { opacity:0; transform:rotate(-12deg) translateY(-20px); transform-origin:top center; }
    60%  { transform:rotate(5deg) translateY(0); transform-origin:top center; }
    80%  { transform:rotate(-3deg); transform-origin:top center; }
    to   { opacity:1; transform:rotate(0deg); transform-origin:top center; }
}
#wacb-popup.wacb-anim-swing { animation: wacbSwing 0.5s ease both; }

/* 9. Rotate Fade */
@keyframes wacbRotate {
    from { opacity:0; transform:rotate(-180deg) scale(0.5); }
    to   { opacity:1; transform:rotate(0deg) scale(1); }
}
#wacb-popup.wacb-anim-rotate { animation: wacbRotate 0.4s cubic-bezier(.22,.68,0,1.2) both; }

/* 10. Elastic */
@keyframes wacbElastic {
    0%   { opacity:0; transform:scale(0) translateY(20px); }
    55%  { opacity:1; transform:scale(1.12) translateY(-4px); }
    75%  { transform:scale(0.94) translateY(2px); }
    90%  { transform:scale(1.04) translateY(-1px); }
    100% { transform:scale(1) translateY(0); }
}
#wacb-popup.wacb-anim-elastic { animation: wacbElastic 0.55s cubic-bezier(.22,.68,0,1) both; }

/* ══════════════════════════════════════════
   POPUP EFFECTS
   ══════════════════════════════════════════ */
#wacb-popup.wacb-effect-clean    { background:#ffffff; box-shadow:0 10px 40px rgba(0,0,0,0.15); }
#wacb-popup.wacb-effect-glass    { background:rgba(255,255,255,0.55); backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%); box-shadow:0 8px 32px rgba(37,211,102,0.18), 0 1.5px 0 rgba(255,255,255,0.6) inset; border:1px solid rgba(255,255,255,0.5); }
#wacb-popup.wacb-effect-glass #wacb-body,
#wacb-popup.wacb-effect-frosted #wacb-body { background:transparent; }
#wacb-popup.wacb-effect-glass .wacb-agent-item { background:rgba(255,255,255,0.6); border-color:rgba(255,255,255,0.7); }
#wacb-popup.wacb-effect-glass .wacb-agent-item:hover { background:rgba(240,255,248,0.85); border-color:#25d366; }
#wacb-popup.wacb-effect-glass #wacb-footer { background:rgba(255,255,255,0.3); border-top:1px solid rgba(255,255,255,0.4); }
#wacb-popup.wacb-effect-frosted  { background:rgba(235,248,242,0.82); backdrop-filter:blur(28px) brightness(1.05); -webkit-backdrop-filter:blur(28px) brightness(1.05); box-shadow:0 12px 40px rgba(37,150,80,0.2); border:1px solid rgba(180,230,200,0.55); }
#wacb-popup.wacb-effect-frosted .wacb-agent-item { background:rgba(255,255,255,0.55); border-color:rgba(180,230,200,0.6); }
#wacb-popup.wacb-effect-frosted .wacb-agent-item:hover { background:rgba(240,255,248,0.9); border-color:#25d366; }
#wacb-popup.wacb-effect-frosted #wacb-footer { background:rgba(220,240,230,0.5); border-top:1px solid rgba(180,220,200,0.4); }
#wacb-popup.wacb-effect-luxury   { background:linear-gradient(160deg,#1a1a2e 0%,#16213e 60%,#0f3460 100%); box-shadow:0 16px 50px rgba(0,0,0,0.6), 0 0 0 1px rgba(212,175,55,0.3); border:1px solid rgba(212,175,55,0.25); }
#wacb-popup.wacb-effect-luxury #wacb-body { background:transparent; }
#wacb-popup.wacb-effect-luxury #wacb-reply-time { color:rgba(212,175,55,0.7); }
#wacb-popup.wacb-effect-luxury #wacb-footer { background:rgba(0,0,0,0.3); border-top:1px solid rgba(212,175,55,0.2); color:rgba(212,175,55,0.6); }
#wacb-popup.wacb-effect-luxury .wacb-agent-item { background:rgba(255,255,255,0.07); border-color:rgba(212,175,55,0.2); }
#wacb-popup.wacb-effect-luxury .wacb-agent-item:hover { background:rgba(212,175,55,0.12); border-color:rgba(212,175,55,0.5); }
#wacb-popup.wacb-effect-luxury .wacb-agent-name { color:#f0e6c8; }
#wacb-popup.wacb-effect-luxury .wacb-agent-role { color:rgba(200,180,130,0.7); }
#wacb-popup.wacb-effect-luxury .wacb-avatar-initials { background:linear-gradient(135deg,#d4af37,#b8960c); }
#wacb-popup.wacb-effect-luxury #wacb-privacy-wrap { background:rgba(255,255,255,0.06); border-color:rgba(212,175,55,0.2); }
#wacb-popup.wacb-effect-luxury #wacb-privacy-label { color:rgba(212,175,55,0.8); }
#wacb-popup.wacb-effect-gradient { background:linear-gradient(160deg,#e8fdf0 0%,#d4f5e2 40%,#b8edd0 100%); box-shadow:0 12px 40px rgba(37,211,102,0.25); border:1px solid rgba(37,211,102,0.2); }
#wacb-popup.wacb-effect-gradient #wacb-body { background:transparent; }
#wacb-popup.wacb-effect-gradient #wacb-footer { background:rgba(37,211,102,0.1); border-top:1px solid rgba(37,211,102,0.2); }
#wacb-popup.wacb-effect-gradient .wacb-agent-item { background:rgba(255,255,255,0.7); border-color:rgba(37,211,102,0.3); }
#wacb-popup.wacb-effect-gradient .wacb-agent-item:hover { background:rgba(255,255,255,0.95); border-color:#25d366; }
#wacb-popup.wacb-effect-soft     { background:linear-gradient(160deg,#fffaf5 0%,#fef6ef 50%,#fdf0f8 100%); box-shadow:0 12px 40px rgba(200,100,100,0.12); border:1px solid rgba(240,200,200,0.4); }
#wacb-popup.wacb-effect-soft #wacb-body { background:transparent; }
#wacb-popup.wacb-effect-soft #wacb-footer { background:rgba(255,240,240,0.5); border-top:1px solid rgba(240,200,200,0.3); color:#c4908a; }
#wacb-popup.wacb-effect-soft .wacb-agent-item { background:rgba(255,255,255,0.75); border-color:rgba(230,190,190,0.4); }
#wacb-popup.wacb-effect-soft .wacb-agent-item:hover { background:#fff; border-color:#25d366; }
#wacb-popup.wacb-effect-soft .wacb-avatar-initials { background:linear-gradient(135deg,#f093a0,#d472a0); }
#wacb-popup.wacb-effect-soft #wacb-reply-time { color:#c4908a; }
#wacb-popup.wacb-effect-neon     { background:linear-gradient(160deg,#0a1628 0%,#0d2137 60%,#091820 100%); box-shadow:0 0 0 1px rgba(37,211,102,0.35), 0 16px 50px rgba(0,0,0,0.7), 0 0 30px rgba(37,211,102,0.15); border:1px solid rgba(37,211,102,0.4); }
#wacb-popup.wacb-effect-neon #wacb-body { background:transparent; }
#wacb-popup.wacb-effect-neon #wacb-reply-time { color:rgba(37,211,102,0.6); }
#wacb-popup.wacb-effect-neon #wacb-footer { background:rgba(0,0,0,0.4); border-top:1px solid rgba(37,211,102,0.2); color:rgba(37,211,102,0.5); }
#wacb-popup.wacb-effect-neon .wacb-agent-item { background:rgba(37,211,102,0.06); border-color:rgba(37,211,102,0.2); }
#wacb-popup.wacb-effect-neon .wacb-agent-item:hover { background:rgba(37,211,102,0.14); border-color:rgba(37,211,102,0.6); box-shadow:0 0 12px rgba(37,211,102,0.15); }
#wacb-popup.wacb-effect-neon .wacb-agent-name { color:#e0ffe8; }
#wacb-popup.wacb-effect-neon .wacb-agent-role { color:rgba(37,211,102,0.6); }
#wacb-popup.wacb-effect-neon .wacb-avatar-initials { background:linear-gradient(135deg,#25d366,#128C7E); box-shadow:0 0 10px rgba(37,211,102,0.4); }
#wacb-popup.wacb-effect-neon #wacb-privacy-wrap { background:rgba(37,211,102,0.06); border-color:rgba(37,211,102,0.2); }
#wacb-popup.wacb-effect-neon #wacb-privacy-label { color:rgba(37,211,102,0.8); }
#wacb-popup.wacb-effect-minimal  { background:#f7f7f7; box-shadow:0 4px 20px rgba(0,0,0,0.08); border:1.5px solid #e0e0e0; }
#wacb-popup.wacb-effect-minimal #wacb-body { background:transparent; }
#wacb-popup.wacb-effect-minimal #wacb-footer { background:#efefef; border-top:1px solid #e0e0e0; color:#aaa; }
#wacb-popup.wacb-effect-minimal .wacb-agent-item { background:#fff; border-color:#e8e8e8; }
#wacb-popup.wacb-effect-minimal .wacb-agent-item:hover { background:#f0fdf4; border-color:#25d366; }

/* ── Header ── */
#wacb-header { display:flex; align-items:center; gap:12px; padding:16px; color:#fff; }
#wacb-header-icon { width:48px; height:48px; min-width:48px; background:rgba(255,255,255,0.22); border-radius:50%; display:flex; align-items:center; justify-content:center; }
#wacb-header-icon svg { display:block; }
#wacb-header-title    { font-size:15px; font-weight:700; line-height:1.25; }
#wacb-header-subtitle { font-size:12px; opacity:.9; margin-top:3px; line-height:1.45; }

/* ── Body ── */
#wacb-body { padding:14px 14px 8px; }
#wacb-reply-time { font-size:12px; color:#999; margin:0 0 12px; text-align:center; }
#wacb-privacy-wrap { background:#f5f9f5; border:1px solid #dceadc; border-radius:8px; padding:10px 12px; margin-bottom:12px; }
#wacb-privacy-label { display:flex; align-items:flex-start; gap:8px; cursor:pointer; font-size:12.5px; color:#555; line-height:1.45; }
#wacb-privacy-check { margin-top:2px; flex-shrink:0; accent-color:#25d366; width:15px; height:15px; cursor:pointer; }

/* ── Agent Items ── */
.wacb-agent-item { display:flex; align-items:center; gap:11px; padding:10px; border-radius:10px; border:1px solid #e8e8e8; margin-bottom:8px; cursor:pointer; text-decoration:none !important; color:inherit !important; transition:background .15s, border-color .15s, transform .12s; background:#fff; position:relative; }
.wacb-agent-item:hover { background:#f0fdf4; border-color:#25d366; transform:translateX(2px); }
.wacb-agent-item.wacb-disabled { opacity:.6; cursor:not-allowed; pointer-events:none; }
.wacb-agent-type-badge { position:absolute; top:-1px; right:38px; font-size:9px; font-weight:700; background:#25d366; color:#fff; padding:1px 5px; border-radius:0 0 4px 4px; letter-spacing:.3px; text-transform:uppercase; }
.wacb-avatar { width:46px; height:46px; min-width:46px; border-radius:50%; object-fit:cover; border:2px solid #e5e5e5; }
.wacb-avatar-initials { width:46px; height:46px; min-width:46px; border-radius:50%; background:linear-gradient(135deg,#25d366,#128C7E); color:#fff; font-size:17px; font-weight:700; display:flex; align-items:center; justify-content:center; text-transform:uppercase; letter-spacing:1px; }
.wacb-agent-info { flex:1; min-width:0; }
.wacb-agent-name { font-size:14px; font-weight:700; color:#1a1a1a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wacb-agent-role { font-size:11.5px; color:#888; margin-top:1px; }
.wacb-agent-offline { font-size:11px; color:#e8a000; margin-top:2px; font-style:italic; }
.wacb-wa-icon { flex-shrink:0; width:26px; height:26px; display:flex; align-items:center; justify-content:center; }
.wacb-wa-icon svg { width:26px; height:26px; display:block; }

/* ── Footer ── */
#wacb-footer { text-align:center; font-size:10.5px; color:#bbb; padding:8px 0 10px; border-top:1px solid #f0f0f0; margin-top:4px; }
#wacb-footer:empty { display:none; }

@media(max-width:380px){ #wacb-popup{ width:300px; } }