/* =========================================================
   WhatsApp Chat Widget — Frontend Styles
   All colour/bg/position rules use !important to prevent
   theme stylesheets from overriding them.
   ========================================================= */

/* ---- Floating button ---- */
#wcw-widget,
#wcw-widget * {
    box-sizing: border-box !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    line-height: normal !important;
}

#wcw-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: #25D366 !important;
    background-color: #25D366 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 16px 24px !important;
    cursor: pointer !important;
    box-shadow: 0 6px 20px rgba(37,211,102,.5) !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    transition: transform .2s, box-shadow .2s !important;
    position: fixed !important;
    bottom: 20px !important;
    z-index: 99998 !important;
    text-decoration: none !important;
    outline: none !important;
}
#wcw-btn:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 10px 32px rgba(37,211,102,.6) !important;
}
#wcw-btn svg { flex-shrink: 0 !important; width: 36px !important; height: 36px !important; }

/* Pulse ring */
#wcw-btn::before {
    content: '' !important;
    position: absolute !important;
    inset: -5px !important;
    border-radius: 50px !important;
    background: rgba(37,211,102,.3) !important;
    animation: wcwPulse 2.2s ease-out infinite !important;
    pointer-events: none !important;
}
@keyframes wcwPulse {
    0%   { transform: scale(.9); opacity: .6; }
    70%  { transform: scale(1.15); opacity: 0; }
    100% { transform: scale(.9); opacity: 0; }
}

#wcw-btn.wcw-btn--pos-right { right: 20px !important; left: auto !important; }
#wcw-btn.wcw-btn--pos-left  { left: 20px !important; right: auto !important; }

/* ---- Popup ---- */
#wcw-popup {
    width: 280px !important;
    max-width: calc(100vw - 28px) !important;
    background: #fff !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 6px 30px rgba(0,0,0,.18) !important;
    position: fixed !important;
    bottom: 96px !important;
    z-index: 99999 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(16px) scale(.97) !important;
    transition: opacity .2s ease, transform .2s ease !important;
}
#wcw-popup.is-open {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
}
#wcw-popup.wcw-popup--pos-right { right: 20px !important; left: auto !important; }
#wcw-popup.wcw-popup--pos-left  { left: 20px !important; right: auto !important; }

/* ---- Header ---- */
#wcw-popup .wcw-popup__header {
    background: #075E54 !important;
    background-color: #075E54 !important;
    padding: 12px 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
#wcw-popup .wcw-popup__header-logo {
    background: rgba(255,255,255,.15) !important;
    border-radius: 50% !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}
#wcw-popup .wcw-popup__header-logo svg { width: 18px !important; height: 18px !important; }
#wcw-popup .wcw-popup__header-text { flex: 1 !important; min-width: 0 !important; }
#wcw-popup .wcw-popup__header-title {
    display: block !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 13px !important;
}
#wcw-popup .wcw-popup__header-sub {
    display: block !important;
    color: rgba(255,255,255,.8) !important;
    font-size: 11px !important;
}
#wcw-popup .wcw-popup__close {
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    color: rgba(255,255,255,.85) !important;
    cursor: pointer !important;
    font-size: 14px !important;
    padding: 0 !important;
    line-height: 1 !important;
    border-radius: 50% !important;
    width: 24px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    transition: background .15s !important;
}
#wcw-popup .wcw-popup__close:hover { background: rgba(255,255,255,.2) !important; }

/* ---- Body ---- */
#wcw-popup .wcw-popup__body {
    padding: 12px !important;
    background: #f0f0f0 !important;
    background-color: #f0f0f0 !important;
}

/* Agent card */
#wcw-popup .wcw-agent {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: #fff !important;
    background-color: #fff !important;
    border-radius: 8px !important;
    padding: 10px !important;
    margin-bottom: 8px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.08) !important;
}
#wcw-popup .wcw-agent__avatar {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background-size: cover !important;
    background-position: center !important;
    flex-shrink: 0 !important;
}
#wcw-popup .wcw-agent__avatar--default {
    background-color: #25D366 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
#wcw-popup .wcw-agent__avatar--default svg { width: 22px !important; height: 22px !important; }
#wcw-popup .wcw-agent__info { flex: 1 !important; min-width: 0 !important; }
#wcw-popup .wcw-agent__name {
    display: block !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    color: #111 !important;
}
#wcw-popup .wcw-agent__title {
    display: block !important;
    font-size: 11px !important;
    color: #666 !important;
    margin-bottom: 3px !important;
}
#wcw-popup .wcw-agent__status {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
}
#wcw-popup .wcw-agent__status--online  { color: #25D366 !important; }
#wcw-popup .wcw-agent__status--offline { color: #999 !important; }
#wcw-popup .wcw-status-dot {
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: currentColor !important;
    display: inline-block !important;
}

/* Typing indicator — display is controlled by JS, NOT set here.
   Setting display:flex !important here would override JS display='none'. */
#wcw-popup .wcw-typing {
    gap: 3px !important;
    padding: 8px 12px !important;
    background: #fff !important;
    border-radius: 0 8px 8px 8px !important;
    width: fit-content !important;
    margin-bottom: 6px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.08) !important;
}
#wcw-popup .wcw-typing span {
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: #aaa !important;
    background-color: #aaa !important;
    animation: wcwDot 1.2s infinite ease-in-out !important;
    display: block !important;
}
#wcw-popup .wcw-typing span:nth-child(2) { animation-delay: .2s !important; }
#wcw-popup .wcw-typing span:nth-child(3) { animation-delay: .4s !important; }
@keyframes wcwDot {
    0%, 80%, 100% { transform: scale(.7); opacity: .4; }
    40%           { transform: scale(1);  opacity: 1;  }
}

/* Greeting bubble */
#wcw-popup .wcw-popup__greeting {
    background: #fff !important;
    background-color: #fff !important;
    border-radius: 0 8px 8px 8px !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
    color: #333 !important;
    line-height: 1.5 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.08) !important;
    position: relative !important;
}
#wcw-popup .wcw-popup__greeting::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -7px !important;
    border-width: 0 7px 7px 0 !important;
    border-style: solid !important;
    border-color: transparent #fff transparent transparent !important;
}

/* ---- Footer / Start Chat ---- */
#wcw-popup .wcw-popup__footer {
    padding: 10px 12px !important;
    background: #fff !important;
    background-color: #fff !important;
    border-top: 1px solid #eee !important;
}
#wcw-popup .wcw-start-chat,
#wcw-popup button.wcw-start-chat,
#wcw-popup a.wcw-start-chat {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background: #25D366 !important;
    background-color: #25D366 !important;
    color: #fff !important;
    text-decoration: none !important;
    border-radius: 7px !important;
    padding: 10px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: .3px !important;
    transition: background .15s !important;
    border: none !important;
    cursor: pointer !important;
    width: 100% !important;
    outline: none !important;
    box-shadow: none !important;
}
#wcw-popup .wcw-start-chat:hover,
#wcw-popup button.wcw-start-chat:hover {
    background: #1ebe5d !important;
    background-color: #1ebe5d !important;
    color: #fff !important;
}
#wcw-popup .wcw-start-chat svg { width: 16px !important; height: 16px !important; flex-shrink: 0 !important; }

/* ---- Badge ---- */
#wcw-badge {
    position: absolute !important;
    top: -4px !important;
    right: -4px !important;
    width: 16px !important;
    height: 16px !important;
    background: #ef4444 !important;
    background-color: #ef4444 !important;
    border-radius: 50% !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
    #wcw-btn { padding: 14px !important; font-size: 13px !important; border-radius: 50% !important; }
    #wcw-btn span { display: none !important; }
    #wcw-popup { width: calc(100vw - 24px) !important; }
}