/* ============================================================
   WP WhatsApp Floating Chat Pro – Public Styles
   ============================================================ */

:root {
    --wwcp-btn-color:  #25D366;
    --wwcp-popup-bg:   #ffffff;
    --wwcp-text-color: #111111;
    --wwcp-radius:     18px;
    --wwcp-shadow:     0 12px 40px rgba(0,0,0,.16);
    --wwcp-t:          .3s cubic-bezier(.4,0,.2,1);
}

/* ── Wrapper: exactly 60×60 ─────────────────────────────── */
#wwcp-wrapper {
    position:      fixed;
    bottom:        3%;
    right:         3%;
    left:          auto;
    top:           auto;
    width:         60px;
    height:        60px;
    z-index:       99999;
    overflow:      visible;
    font-family:   -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    user-select:   none;
    touch-action:  none;
}
#wwcp-wrapper.wwcp-dragging { transition: none !important; }

/* ── Drag hint ──────────────────────────────────────────── */
.wwcp-drag-hint {
    position:       absolute;
    bottom:         calc(100% + 10px);
    right:          0;
    display:        flex;
    align-items:    center;
    gap:            4px;
    background:     rgba(0,0,0,.72);
    color:          #fff;
    font-size:      11px;
    padding:        4px 9px;
    border-radius:  20px;
    white-space:    nowrap;
    opacity:        0;
    pointer-events: none;
    transform:      translateY(4px);
    transition:     opacity .2s, transform .2s;
}
#wwcp-wrapper:hover              .wwcp-drag-hint { opacity:1; transform:translateY(0); }
#wwcp-wrapper.wwcp-dragging      .wwcp-drag-hint { opacity:0; }
#wwcp-wrapper.wwcp-on-left       .wwcp-drag-hint { right:auto; left:0; }

/* ── Toggle button ──────────────────────────────────────── */
#wwcp-toggle-btn {
    width:           60px;
    height:          60px;
    border-radius:   50%;
    background:      var(--wwcp-btn-color);
    border:          none;
    cursor:          grab;
    display:         flex;
    align-items:     center;
    justify-content: center;
    box-shadow:      0 4px 20px rgba(37,211,102,.5);
    transition:      box-shadow var(--wwcp-t), transform .15s;
    outline:         none;
    position:        relative;
}
#wwcp-toggle-btn:hover { box-shadow: 0 8px 28px rgba(37,211,102,.65); }
#wwcp-wrapper.wwcp-dragging #wwcp-toggle-btn {
    cursor:    grabbing;
    transform: scale(1.08);
    box-shadow:0 10px 32px rgba(37,211,102,.7);
}
#wwcp-toggle-btn svg               { pointer-events:none; }
#wwcp-toggle-btn .wwcp-icon-close  { font-size:22px; color:#fff; line-height:1; pointer-events:none; }
.wwcp-hidden { display:none !important; }

/* ── Pulse ring ─────────────────────────────────────────── */
#wwcp-wrapper.wwcp-animated #wwcp-toggle-btn::after {
    content:''; position:absolute; inset:-5px; border-radius:50%;
    background:var(--wwcp-btn-color); opacity:.3;
    animation:wwcp-pulse 2.2s ease-out infinite; z-index:-1;
}
@keyframes wwcp-pulse {
    0%   { transform:scale(1);    opacity:.3;  }
    70%  { transform:scale(1.55); opacity:0;   }
    100% { transform:scale(1.55); opacity:0;   }
}
#wwcp-wrapper.wwcp-dragging #wwcp-toggle-btn::after { display:none; }

/* ── Popup card ─────────────────────────────────────────── */
#wwcp-popup {
    position:         absolute;
    bottom:           calc(100% + 16px);
    right:            0;
    width:            310px;
    background:       var(--wwcp-popup-bg);
    border-radius:    var(--wwcp-radius);
    box-shadow:       var(--wwcp-shadow);
    overflow:         hidden;
    transform-origin: bottom right;
    transform:        scale(.88) translateY(12px);
    opacity:          0;
    pointer-events:   none;
    transition:       transform var(--wwcp-t), opacity var(--wwcp-t);
    /* subtle border */
    border:           1px solid rgba(0,0,0,.08);
}
#wwcp-popup.wwcp-open {
    transform:      scale(1) translateY(0);
    opacity:        1;
    pointer-events: auto;
}
#wwcp-wrapper.wwcp-on-left #wwcp-popup {
    right:            auto;
    left:             0;
    transform-origin: bottom left;
}

/* ── Popup header ───────────────────────────────────────── */
.wwcp-popup-header {
    background:      linear-gradient(135deg, #25D366 0%, #1db954 100%);
    padding:         22px 20px 28px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    position:        relative;
}
/* Decorative circles */
.wwcp-popup-header::before,
.wwcp-popup-header::after {
    content:       '';
    position:      absolute;
    border-radius: 50%;
    background:    rgba(255,255,255,.08);
}
.wwcp-popup-header::before { width:120px; height:120px; top:-30px; right:-20px; }
.wwcp-popup-header::after  { width:80px;  height:80px;  bottom:-20px; left:10px; }

.wwcp-logo-wrap {
    width:           68px;
    height:          68px;
    background:      rgba(255,255,255,.95);
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    overflow:        hidden;
    box-shadow:      0 4px 16px rgba(0,0,0,.15);
    position:        relative;
    z-index:         1;
}
.wwcp-logo            { width:68px; height:68px; object-fit:cover; border-radius:50%; }
.wwcp-default-icon    { display:flex; align-items:center; justify-content:center; }
.wwcp-default-icon svg{ display:block; }

/* Online indicator */
.wwcp-online-badge {
    position:      absolute;
    bottom:        2px;
    right:         2px;
    width:         14px;
    height:        14px;
    background:    #44d475;
    border-radius: 50%;
    border:        2.5px solid #fff;
    z-index:       2;
}

/* ── Popup body ─────────────────────────────────────────── */
.wwcp-popup-body { padding:22px 18px 18px; color:var(--wwcp-text-color); }

.wwcp-greeting-title { font-size:21px; font-weight:800; margin:0 0 5px; line-height:1.25; letter-spacing:-.3px; }
.wwcp-greeting-sub   { font-size:13.5px; color:#777; margin:0 0 18px; line-height:1.55; }

/* ── GDPR ───────────────────────────────────────────────── */
.wwcp-gdpr        { margin-bottom:14px; font-size:12px; color:#777; }
.wwcp-gdpr label  { display:flex; align-items:flex-start; gap:8px; cursor:pointer; }
.wwcp-gdpr input  { margin-top:2px; accent-color:var(--wwcp-btn-color); flex-shrink:0; }
.wwcp-gdpr a      { color:var(--wwcp-btn-color); }

/* ══════════════════════════════════════════════════════════
   AGENT BUTTONS  –  professional card style
   ══════════════════════════════════════════════════════════ */
.wwcp-agents {
    display:        flex;
    flex-direction: column;
    gap:            10px;
}

.wwcp-agent-btn {
    display:        flex;
    align-items:    center;
    gap:            12px;
    width:          100%;
    padding:        0;
    background:     transparent;
    border:         1.5px solid #e8f5e9;
    border-radius:  14px;
    cursor:         pointer;
    text-align:     left;
    overflow:       hidden;
    transition:     border-color var(--wwcp-t), box-shadow var(--wwcp-t), transform .15s;
    box-shadow:     0 2px 8px rgba(37,211,102,.08);
}
.wwcp-agent-btn:hover {
    border-color: var(--wwcp-btn-color);
    box-shadow:   0 4px 18px rgba(37,211,102,.22);
    transform:    translateY(-2px);
}
.wwcp-agent-btn:active { transform:translateY(0); }

/* Left accent strip */
.wwcp-agent-strip {
    width:           46px;
    min-height:      62px;
    background:      linear-gradient(160deg, #25D366 0%, #1db954 100%);
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    align-self:      stretch;
}
.wwcp-agent-btn:nth-child(2) .wwcp-agent-strip {
    background: linear-gradient(160deg, #1da851 0%, #168a42 100%);
}

.wwcp-agent-strip svg { display:block; }

/* Text area */
.wwcp-agent-info {
    flex:       1;
    padding:    13px 4px;
    min-width:  0;
}

.wwcp-agent-name {
    font-size:   14px;
    font-weight: 700;
    color:       #1a1a1a;
    margin:      0 0 2px;
    white-space: nowrap;
    overflow:    hidden;
    text-overflow:ellipsis;
}

.wwcp-agent-status {
    font-size:   11.5px;
    color:       #25D366;
    font-weight: 500;
    display:     flex;
    align-items: center;
    gap:         5px;
}

.wwcp-status-dot {
    width:         7px;
    height:        7px;
    border-radius: 50%;
    background:    #25D366;
    display:       inline-block;
    animation:     wwcp-blink 2s ease-in-out infinite;
    flex-shrink:   0;
}
@keyframes wwcp-blink {
    0%, 100% { opacity:1;   }
    50%       { opacity:.35; }
}

/* Arrow chevron */
.wwcp-agent-chevron {
    padding:    0 14px 0 4px;
    color:      #ccc;
    font-size:  20px;
    line-height:1;
    flex-shrink:0;
    transition: color var(--wwcp-t), transform var(--wwcp-t);
}
.wwcp-agent-btn:hover .wwcp-agent-chevron {
    color:     var(--wwcp-btn-color);
    transform: translateX(3px);
}

/* ── Popup footer ───────────────────────────────────────── */
.wwcp-popup-footer {
    text-align:  center;
    padding:     10px 18px 14px;
    font-size:   11px;
    color:       #bbb;
    border-top:  1px solid #f5f5f5;
    letter-spacing: .3px;
}

/* ── Inline shortcode btn ───────────────────────────────── */
.wwcp-inline-btn {
    display:inline-flex; align-items:center; gap:8px;
    background:var(--wwcp-btn-color); color:#fff;
    text-decoration:none; border-radius:8px;
    padding:10px 20px; font-weight:600; font-size:15px;
    transition:opacity .2s;
}
.wwcp-inline-btn:hover { opacity:.85; color:#fff; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width:480px) {
    #wwcp-popup     { width: calc(100vw - 40px); }
    .wwcp-drag-hint { display:none; }
}