/* ============================================================
   WhatsApp AI Bot Pro — Widget CSS
   ============================================================ */

/* ─── Root & Positioning ─────────────────────────────────── */
#wab-widget-root {
    position: fixed;
    z-index: 999999;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}
#wab-widget-root[data-pos-desktop="bottom_right"] { bottom:24px; right:24px; }
#wab-widget-root[data-pos-desktop="bottom_left"]  { bottom:24px; left:24px; }
#wab-widget-root[data-pos-desktop="top_right"]    { top:80px;    right:24px; }
#wab-widget-root[data-pos-desktop="top_left"]     { top:80px;    left:24px; }

/* ─── Shared main button ─────────────────────────────────── */
#wab-main-btn { cursor:pointer; user-select:none; display:inline-flex; align-items:center; justify-content:center; }

/* ─── Style 1: Round circle ─────────────────────────────── */
.wab-style-style1 .wab-s1-btn {
    width:60px; height:60px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 4px 20px rgba(37,211,102,.45);
    transition:transform .2s, box-shadow .2s;
    position:relative;
}
.wab-style-style1 .wab-s1-btn:hover { transform:scale(1.08); box-shadow:0 6px 28px rgba(37,211,102,.6); }
.wab-style-style1 .wab-s1-cta {
    position:absolute; right:70px; top:50%; transform:translateY(-50%);
    background:#1a202c; color:white; padding:6px 12px; border-radius:20px;
    font-size:12px; font-weight:600; white-space:nowrap; box-shadow:0 2px 8px rgba(0,0,0,.2);
}
.wab-style-style1 .wab-s1-cta::after {
    content:''; position:absolute; right:-6px; top:50%; transform:translateY(-50%);
    border:6px solid transparent; border-right:none; border-left-color:#1a202c;
}

/* ─── Style 2: Pill with text ───────────────────────────── */
.wab-style-style2 .wab-s2-btn {
    display:flex; align-items:center; gap:10px;
    padding:12px 20px 12px 14px; border-radius:50px;
    color:white; font-size:15px; font-weight:600;
    box-shadow:0 4px 20px rgba(37,211,102,.4);
    transition:transform .2s, box-shadow .2s;
}
.wab-style-style2 .wab-s2-btn:hover { transform:scale(1.04); box-shadow:0 6px 24px rgba(37,211,102,.55); }

/* ─── Style 3: Rounded square with ripple ───────────────── */
.wab-style-style3 .wab-s3-btn {
    width:60px; height:60px; border-radius:14px;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
    box-shadow:0 4px 20px rgba(0,0,0,.2);
    transition:transform .2s;
    position:relative; overflow:hidden;
}
.wab-style-style3 .wab-s3-btn:hover { transform:scale(1.06); }
.wab-style-style3 .wab-s3-label { font-size:9px; color:white; font-weight:600; }
.wab-ripple {
    position:absolute; border-radius:50%;
    width:200%; padding-top:200%;
    top:50%; left:50%; transform:translate(-50%,-50%) scale(0);
    background:rgba(255,255,255,.3);
    animation:wabRipple .6s linear infinite;
}
@keyframes wabRipple { to { transform:translate(-50%,-50%) scale(1); opacity:0; } }

/* ─── Style 4: Agent card ───────────────────────────────── */
.wab-style-style4 .wab-s4-btn {
    display:flex; align-items:center; gap:0;
    background:white; border:2px solid;
    border-radius:50px; padding:4px 12px 4px 4px;
    box-shadow:0 4px 16px rgba(0,0,0,.15);
    transition:transform .2s, box-shadow .2s;
    min-width:200px;
}
.wab-style-style4 .wab-s4-btn:hover { transform:translateY(-2px); box-shadow:0 6px 22px rgba(0,0,0,.2); }
.wab-style-style4 .wab-s4-avatar {
    width:44px; height:44px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; flex-shrink:0; overflow:hidden;
}
.wab-style-style4 .wab-s4-avatar img { width:100%; height:100%; object-fit:cover; }
.wab-style-style4 .wab-s4-info { flex:1; padding:0 10px; font-size:13px; font-weight:600; color:#1a202c; }
.wab-style-style4 .wab-s4-wa {
    width:32px; height:32px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
}

/* ─── Style 5: Minimal icon ─────────────────────────────── */
.wab-style-style5 .wab-s5-btn {
    width:52px; height:52px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 2px 12px rgba(37,211,102,.35);
    transition:transform .2s;
}
.wab-style-style5 .wab-s5-btn:hover { transform:scale(1.1); }

/* ─── Style 6: Pulse waves ──────────────────────────────── */
.wab-style-style6 .wab-s6-wrap { position:relative; width:60px; height:60px; display:flex; align-items:center; justify-content:center; }
.wab-style-style6 .wab-s6-btn {
    width:60px; height:60px; border-radius:50%; position:relative; z-index:2;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 4px 16px rgba(37,211,102,.4); transition:transform .2s;
}
.wab-style-style6 .wab-s6-btn:hover { transform:scale(1.06); }
.wab-style-style6 .wab-s6-pulse {
    position:absolute; width:60px; height:60px; border-radius:50%;
    animation:wabPulseWave 2s ease-out infinite;
}
.wab-style-style6 .wab-s6-pulse2 { animation-delay:.6s; }
@keyframes wabPulseWave { 0%{transform:scale(1);opacity:.7} 100%{transform:scale(2.2);opacity:0} }

/* ─── Animations ─────────────────────────────────────────── */
.wab-anim-bounce  { animation:wabBounce 2s ease infinite; }
.wab-anim-shake   { animation:wabShake 3s ease infinite; }
.wab-anim-tada    { animation:wabTada 3s ease infinite; }
.wab-anim-none    {}
@keyframes wabBounce { 0%,20%,50%,80%,100%{transform:translateY(0)} 40%{transform:translateY(-10px)} 60%{transform:translateY(-5px)} }
@keyframes wabShake  { 0%,100%{transform:rotate(0)} 10%,30%,50%,70%,90%{transform:rotate(-5deg)} 20%,40%,60%,80%{transform:rotate(5deg)} }
@keyframes wabTada   { 0%{transform:scale(1)} 10%,20%{transform:scale(.9) rotate(-3deg)} 30%,50%,70%,90%{transform:scale(1.1) rotate(3deg)} 40%,60%,80%{transform:scale(1.1) rotate(-3deg)} 100%{transform:scale(1) rotate(0)} }

/* ─── Badge ──────────────────────────────────────────────── */
#wab-badge {
    position:absolute; top:-6px; right:-6px;
    min-width:20px; height:20px; border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    font-size:11px; font-weight:700; padding:0 5px;
    border:2px solid white;
    transition:opacity .3s, transform .3s;
}
#wab-badge.wab-badge-hidden { opacity:0; transform:scale(0); pointer-events:none; }

/* ─── Greeting popup ─────────────────────────────────────── */
#wab-greeting {
    position:absolute; bottom:76px; right:0;
    width:320px; max-height:480px; overflow-y:auto;
    background:white; border-radius:16px;
    box-shadow:0 8px 40px rgba(0,0,0,.16);
    animation:wabSlideUp .3s ease;
}
#wab-widget-root[data-pos-desktop="bottom_left"]  #wab-greeting,
#wab-widget-root[data-pos-desktop="top_left"]     #wab-greeting { right:auto; left:0; }
#wab-widget-root[data-pos-desktop="top_right"]    #wab-greeting,
#wab-widget-root[data-pos-desktop="top_left"]     #wab-greeting { bottom:auto; top:76px; }
@keyframes wabSlideUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }

.wab-g-header {
    padding:16px 16px 14px; border-radius:16px 16px 0 0;
    color:white; position:relative;
}
.wab-g-header strong { display:block; font-size:15px; font-weight:700; }
.wab-g-header span   { font-size:12px; opacity:.85; }
.wab-g-close {
    position:absolute; top:10px; right:12px;
    background:rgba(255,255,255,.25); border:none; color:white;
    width:24px; height:24px; border-radius:50%; font-size:16px; line-height:1;
    cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.wab-offline-banner {
    background:rgba(0,0,0,.2); border-radius:6px;
    padding:4px 8px; font-size:11px; margin-top:8px;
}
.wab-g-body { padding:14px 14px 6px; }
.wab-g-footer { padding:8px 14px 12px; font-size:11px; color:#999; text-align:center; border-top:1px solid #f0f0f0; }

/* Greeting bubble */
.wab-bubble-agent { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.wab-bubble-avatar {
    width:42px; height:42px; border-radius:50%; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.wab-bubble-avatar img { width:100%; height:100%; object-fit:cover; }
.wab-bubble-info { display:flex; flex-direction:column; gap:1px; }
.wab-bubble-info strong { font-size:13px; font-weight:700; color:#1a202c; }
.wab-bubble-info span   { font-size:11px; color:#718096; }
.wab-status-online  { font-size:11px; color:#38a169; font-weight:600; }
.wab-status-offline { font-size:11px; color:#e53e3e; font-weight:600; }
.wab-bubble-msg { background:#f0f4f8; border-radius:0 12px 12px 12px; padding:10px 12px; margin-bottom:12px; }
.wab-bubble-msg p { margin:0; font-size:13px; color:#2d3748; line-height:1.5; }
.wab-bubble-cta {
    display:flex; align-items:center; justify-content:center; gap:8px;
    color:white; text-decoration:none; padding:11px 14px; border-radius:10px;
    font-size:13px; font-weight:600; transition:opacity .2s; margin-bottom:4px;
}
.wab-bubble-cta:hover { opacity:.9; color:white; }

/* Typing animation */
.wab-typing { display:flex; gap:4px; padding:8px 12px; }
.wab-typing span {
    width:8px; height:8px; background:#cbd5e0; border-radius:50%;
    animation:wabTyping 1s ease infinite;
}
.wab-typing span:nth-child(2) { animation-delay:.2s; }
.wab-typing span:nth-child(3) { animation-delay:.4s; }
@keyframes wabTyping { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }

/* Multi agent */
.wab-agent-row {
    display:flex; align-items:center; gap:12px;
    padding:10px 12px; border-radius:10px; text-decoration:none;
    transition:background .2s; margin-bottom:4px;
}
.wab-agent-row:hover { background:#f7fafc; }
.wab-agent-avatar {
    width:38px; height:38px; border-radius:50%; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.wab-agent-avatar img { width:100%; height:100%; object-fit:cover; }
.wab-agent-info { flex:1; }
.wab-agent-info strong { display:block; font-size:13px; font-weight:700; color:#1a202c; }
.wab-agent-info span   { font-size:11px; color:#718096; }
.wab-agent-status { display:flex; flex-direction:column; align-items:flex-end; gap:2px; color:#cbd5e0; }

/* Greeting Form */
.wab-form { display:flex; flex-direction:column; gap:10px; }
.wab-form-group { display:flex; flex-direction:column; gap:4px; }
.wab-form-group label { font-size:12px; font-weight:600; color:#4a5568; }
.wab-form-group input, .wab-form-group textarea {
    border:1px solid #e2e8f0; border-radius:8px;
    padding:8px 10px; font-size:13px; width:100%;
    box-sizing:border-box; outline:none; transition:border-color .2s;
    font-family:inherit;
}
.wab-form-group input:focus, .wab-form-group textarea:focus { border-color:var(--wab-color,#25D366); }
.wab-form-gdpr { display:flex; align-items:flex-start; gap:8px; }
.wab-form-gdpr input { width:auto; flex-shrink:0; margin-top:2px; }
.wab-form-gdpr label { font-size:11px; color:#718096; line-height:1.4; }
.wab-form-submit {
    display:flex; align-items:center; justify-content:center; gap:8px;
    color:white; border:none; padding:11px 14px; border-radius:10px;
    font-size:13px; font-weight:600; cursor:pointer; transition:opacity .2s;
    width:100%; font-family:inherit;
}
.wab-form-submit:hover { opacity:.9; }

/* ─── GDPR overlay ───────────────────────────────────────── */
#wab-gdpr-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,.5);
    z-index:1000000; display:flex; align-items:flex-end; justify-content:center; padding:16px;
}
.wab-gdpr-box {
    background:white; border-radius:16px; padding:20px;
    max-width:400px; width:100%; text-align:center;
}
.wab-gdpr-box p { font-size:13px; color:#4a5568; margin:0 0 14px; line-height:1.5; }
.wab-gdpr-actions { display:flex; flex-direction:column; gap:8px; }
.wab-gdpr-actions button {
    padding:11px 16px; border-radius:10px; border:none;
    font-size:13px; font-weight:600; cursor:pointer; color:white; font-family:inherit;
}
.wab-gdpr-decline { background:#e2e8f0; color:#4a5568 !important; }

/* ─── WooCommerce product button ─────────────────────────── */
.wab-product-btn { display:inline-flex !important; align-items:center; gap:8px; }

/* ─── Shortcode ──────────────────────────────────────────── */
.wab-sc-btn {
    display:inline-flex; align-items:center; gap:8px;
    color:white; text-decoration:none; padding:10px 18px;
    border-radius:8px; font-size:14px; font-weight:600;
    transition:opacity .2s;
}
.wab-sc-btn:hover { opacity:.9; color:white; }
.wab-sc-icon {
    display:inline-flex; align-items:center; gap:6px;
    text-decoration:none; font-size:14px; font-weight:600;
    transition:opacity .2s;
}
.wab-sc-icon:hover { opacity:.75; }

/* ─── Mobile responsive ──────────────────────────────────── */
@media (max-width:480px) {
    #wab-greeting { width:calc(100vw - 32px); }
    #wab-widget-root[data-pos-mobile="bottom_right"] { bottom:16px; right:16px; left:auto; top:auto; }
    #wab-widget-root[data-pos-mobile="bottom_left"]  { bottom:16px; left:16px;  right:auto; top:auto; }
    #wab-widget-root[data-pos-mobile="top_right"]    { top:70px; right:16px; bottom:auto; left:auto; }
    #wab-widget-root[data-pos-mobile="top_left"]     { top:70px; left:16px;  bottom:auto; right:auto; }
}