/* ABS MultiChat v1.0.3 */
:root {
    --abs-mc-green: #25D366;
    --abs-mc-radius: 16px;
    --abs-mc-shadow: 0 8px 32px rgba(0,0,0,.22);
    --abs-mc-bubble-size: 60px;
}

/* ── BUBBLE ── */
#abs-mc-bubble {
    position: fixed !important;
    bottom: 24px !important;
    right: 24px !important;
    left: auto !important;
    top: auto !important;
    z-index: 1;
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.3) !important;
    outline: none !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    transition: transform .25s cubic-bezier(.34,1.56,.64,1), background .3s !important;
    padding: 0 !important;
    margin: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
    animation: abs-mc-pulse 2s infinite !important;
}
#abs-mc-bubble.abs-mc-pos-left {
    right: auto !important;
    left: 24px !important;
}
#abs-mc-bubble:hover {
    transform: scale(1.08) !important;
    animation: none !important;
}
#abs-mc-bubble.abs-mc-open {
    animation: none !important;
    background: #555 !important;
}

@keyframes abs-mc-pulse {
    0%   { box-shadow: 0 4px 20px rgba(0,0,0,.25), 0 0 0 0 rgba(37,211,102,.5); }
    70%  { box-shadow: 0 4px 20px rgba(0,0,0,.25), 0 0 0 12px rgba(37,211,102,0); }
    100% { box-shadow: 0 4px 20px rgba(0,0,0,.25), 0 0 0 0 rgba(37,211,102,0); }
}

/* Bubble icons */
.abs-mc-bubble-icon {
    position: absolute !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all .3s cubic-bezier(.34,1.56,.64,1) !important;
    pointer-events: none !important;
}
.abs-mc-icon-chat  { opacity: 1 !important; transform: scale(1) rotate(0) !important; }
.abs-mc-icon-close { opacity: 0 !important; transform: scale(0) rotate(-90deg) !important; }
#abs-mc-bubble.abs-mc-open .abs-mc-icon-chat  { opacity: 0 !important; transform: scale(0) rotate(90deg) !important; }
#abs-mc-bubble.abs-mc-open .abs-mc-icon-close { opacity: 1 !important; transform: scale(1) rotate(0) !important; }

/* ── PANEL ── */
#abs-mc-panel {
    position: fixed !important;
    bottom: 98px !important; /* 60 bubble + 14 gap + 24 margin */
    right: 24px !important;
    left: auto !important;
    top: auto !important;
    z-index: 1;
    width: 300px !important;
    background: white !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.22) !important;
    overflow: hidden !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    display: none;
    opacity: 0;
    transform: scale(.92) translateY(12px);
    transform-origin: bottom right;
    pointer-events: none;
    transition: opacity .28s cubic-bezier(.4,0,.2,1), transform .28s cubic-bezier(.34,1.56,.64,1);
    max-height: calc(100vh - 130px) !important;
    overflow-y: auto !important;
    visibility: visible !important;
}
#abs-mc-panel.abs-mc-pos-left {
    right: auto !important;
    left: 24px !important;
    transform-origin: bottom left !important;
}
#abs-mc-panel.abs-mc-panel-open {
    opacity: 1 !important;
    transform: scale(1) translateY(0) !important;
    pointer-events: all !important;
}

/* Panel Header */
.abs-mc-panel-header { position: relative; overflow: hidden; min-height: 70px; }
.abs-mc-header-bg    { position: absolute; inset: 0; }
.abs-mc-header-content {
    position: relative;
    display: flex; align-items: center; gap: 10px;
    padding: 16px 14px 18px;
}
.abs-mc-header-icon {
    width: 48px; height: 48px; flex-shrink: 0;
    background: rgba(255,255,255,.2);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.abs-mc-header-title    { color: white !important; font-weight: 700 !important; font-size: 15px !important; line-height: 1.2; }
.abs-mc-header-subtitle { color: rgba(255,255,255,.85) !important; font-size: 12px !important; margin-top: 2px; }
.abs-mc-close-btn {
    margin-left: auto; background: none !important; border: none !important; cursor: pointer;
    padding: 6px; border-radius: 50%; opacity: .8;
    transition: opacity .2s, background .2s; flex-shrink: 0; display: flex !important;
    color: white;
}
.abs-mc-close-btn:hover { opacity: 1; background: rgba(255,255,255,.15) !important; }

/* Greeting */
.abs-mc-greeting-wrap { padding: 12px 14px 6px; }
.abs-mc-greeting-bubble {
    background: #e2ffc7 !important;
    border-radius: 8px 8px 8px 0;
    padding: 10px 12px;
    font-size: 13px !important; color: #333 !important; line-height: 1.45;
    max-width: 90%; display: inline-block;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

/* Agents */
.abs-mc-agents-label {
    padding: 10px 14px 4px;
    font-size: 10px !important; font-weight: 700 !important; letter-spacing: 1px;
    color: #aaa !important; text-transform: uppercase;
}
.abs-mc-agents { padding: 4px 8px 8px; display: flex !important; flex-direction: column; gap: 2px; }

.abs-mc-agent-item {
    display: flex !important; align-items: center; gap: 12px;
    padding: 10px 8px; border-radius: 10px;
    cursor: pointer; text-decoration: none !important;
    transition: background .18s;
    animation: abs-mc-slide-in .35s cubic-bezier(.34,1.56,.64,1) both;
}
.abs-mc-agent-item:hover { background: #f5f9f5 !important; }
.abs-mc-agent-item:nth-child(1) { animation-delay: .05s; }
.abs-mc-agent-item:nth-child(2) { animation-delay: .12s; }
.abs-mc-agent-item:nth-child(3) { animation-delay: .19s; }
.abs-mc-agent-item:nth-child(4) { animation-delay: .26s; }

@keyframes abs-mc-slide-in {
    from { opacity: 0; transform: translateX(-10px); }
    to   { opacity: 1; transform: translateX(0); }
}

.abs-mc-agent-ava {
    width: 44px !important; height: 44px !important; border-radius: 50% !important;
    flex-shrink: 0; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.abs-mc-agent-ava img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 50% !important; }
.abs-mc-agent-ava-init {
    color: white !important; font-weight: 700; font-size: 19px;
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
}
.abs-mc-agent-info  { flex: 1; min-width: 0; }
.abs-mc-agent-name  { font-weight: 600 !important; font-size: 13px !important; color: #1a1a2e !important; line-height: 1.2; }
.abs-mc-agent-role  { font-size: 11px !important; color: #888 !important; margin-top: 2px; }
.abs-mc-agent-status { display: flex; align-items: center; gap: 5px; margin-top: 3px; }
.abs-mc-status-dot  { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.abs-mc-status-dot.online  { background: #25D366 !important; }
.abs-mc-status-dot.offline { background: #bbb !important; }
.abs-mc-status-text { font-size: 10px !important; color: #aaa !important; }
.abs-mc-agent-wa    { color: #25D366 !important; flex-shrink: 0; transition: transform .2s; margin-left: auto; }
.abs-mc-agent-item:hover .abs-mc-agent-wa { transform: scale(1.15); }
.abs-mc-agent-offline { opacity: .5 !important; pointer-events: none !important; }

/* Footer */
.abs-mc-panel-footer { padding: 8px 14px 10px; border-top: 1px solid #f0f0f0; text-align: center; }
.abs-mc-powered { font-size: 10px !important; color: #bbb !important; text-decoration: none !important; }

/* Mobile */
@media (max-width: 480px) {
    #abs-mc-bubble { bottom: 16px !important; right: 16px !important; }
    #abs-mc-bubble.abs-mc-pos-left { right: auto !important; left: 16px !important; }
    #abs-mc-panel {
        bottom: 90px !important;
        right: 16px !important;
        width: calc(100vw - 32px) !important;
        max-width: 340px !important;
        max-height: calc(100vh - 110px) !important;
    }
    #abs-mc-panel.abs-mc-pos-left { right: auto !important; left: 16px !important; }
}