/**
 * Shois Chat Button — T14 Soft Minimal Template
 *
 * Ultra-clean minimal design. Black button, white popup,
 * soft rounded corners, chat-bubble welcome message.
 * No decorative effects — pure clean.
 * Type: Bubble Popup
 *
 * @package ShoisChatButton
 */

/* ─── Design Tokens ─────────────────────────────────── */
.shcb-template-soft {
    --scb-primary: #111111;
    --scb-secondary: #333333;
    --scb-bg: #ffffff;
    --shcb-header-bg: #111111;
    --shcb-header-text: #ffffff;
    --scb-text: #222222;
    --scb-text-light: #BDBDBD;
    --shcb-cta-bg: #111111;
    --shcb-cta-text: #ffffff;
    --scb-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
    --scb-shadow-btn: 0 4px 16px rgba(0,0,0,0.2);
    --scb-radius-btn: 50%;
    --scb-radius-popup: 18px;
    --scb-font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}


/* ─── Trigger Button — Clean black circle ───────────── */
.shcb-template-soft .shcb-trigger-btn {
    background: var(--scb-primary);
    border: none;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.22s;
}

.shcb-template-soft .shcb-trigger-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 22px rgba(0,0,0,0.26);
}

.shcb-template-soft .shcb-trigger-btn:active {
    transform: scale(0.93);
}

.shcb-template-soft .shcb-trigger-icon svg {
    fill: white;
}

/* Trigger label — clean white pill */
.shcb-template-soft .shcb-trigger-label {
    color: var(--scb-text);
    background: white;
    border: 1px solid #EFEFEF;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border-radius: 50px;
}

/* Pulse ring */
.shcb-template-soft .shcb-pulse-ring {
    border-color: rgba(0,0,0,0.08);
}


/* ─── Popup ─────────────────────────────────────────── */
.shcb-template-soft .shcb-popup {
    background: white;
    border-radius: 18px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
    border: none;
}


/* ─── Header — Dark Compact ─────────────────────────── */
.shcb-template-soft .shcb-popup-header {
    background: var(--scb-primary);
    padding: 20px 18px 18px;
    border-radius: 18px 18px 0 0;
}

.shcb-template-soft .shcb-header-title {
    font-size: 14px;
    font-weight: 600;
    color: white;
}

.shcb-template-soft .shcb-header-subtitle {
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Close — subtle circle */
.shcb-template-soft .shcb-close-btn {
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    border: none;
    transition: background 0.18s;
}

.shcb-template-soft .shcb-close-btn svg {
    stroke: rgba(255,255,255,0.75);
}

.shcb-template-soft .shcb-close-btn:hover {
    background: rgba(255,255,255,0.2);
}


/* ─── Body ──────────────────────────────────────────── */
.shcb-template-soft .shcb-popup-body {
    background: white;
}

/* Welcome — chat bubble style */
.shcb-template-soft .shcb-welcome-message {
    background: #F3F3F3;
    border-radius: 4px 14px 14px 14px;
    padding: 11px 14px;
    border: none;
}

.shcb-template-soft .shcb-welcome-message p {
    font-size: 13px;
    line-height: 1.62;
    color: #222;
}


/* ─── Chips ─────────────────────────────────────────── */
.shcb-template-soft .shcb-chip {
    background: transparent;
    border: 1.5px solid #EFEFEF;
    border-radius: 11px;
    color: #888;
    font-size: 12px;
    font-weight: 500;
    transition: background 0.18s, border-color 0.18s, color 0.18s;
}

.shcb-template-soft .shcb-chip:hover {
    background: #F5F5F5;
    border-color: #ddd;
    color: #222;
}


/* ─── Agent Cards — Clean minimal ───────────────────── */
.shcb-template-soft .shcb-agent-card {
    border: 1.5px solid #EFEFEF;
    border-radius: 11px;
    background: transparent;
    padding-right: 36px;
    position: relative;
    transition: background 0.18s, border-color 0.18s, transform 0.22s cubic-bezier(0.34,1.56,0.64,1);
}

/* Arrow */
.shcb-template-soft .shcb-agent-card::after {
    content: '›';
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    font-weight: 300;
    color: #BDBDBD;
    transition: color 0.18s, transform 0.22s cubic-bezier(0.34,1.56,0.64,1);
    pointer-events: none;
}

.shcb-template-soft .shcb-agent-card:hover {
    background: #F9F9F9;
    border-color: #ddd;
    transform: translateY(-1px);
}

.shcb-template-soft .shcb-agent-card:hover::after {
    color: var(--scb-primary);
    transform: translateY(-50%) translateX(3px);
}

.shcb-template-soft .shcb-agent-card:active {
    transform: scale(0.99);
}


/* ─── Avatar ────────────────────────────────────────── */
.shcb-template-soft .shcb-agent-avatar {
    border-radius: 50%;
}

.shcb-template-soft .shcb-avatar-initials {
    background: rgba(0,0,0,0.06);
    border: 1.5px solid rgba(0,0,0,0.08);
    color: #555;
    font-size: 15px;
    font-weight: 600;
    border-radius: 50%;
    transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1);
}

.shcb-template-soft .shcb-agent-card:hover .shcb-avatar-initials {
    transform: scale(1.05);
}


/* ─── Agent Info ────────────────────────────────────── */
.shcb-template-soft .shcb-agent-name {
    font-size: 14px;
    font-weight: 600;
    color: #222;
}

.shcb-template-soft .shcb-agent-status {
    font-size: 12px;
    color: #BDBDBD;
}

.shcb-template-soft .shcb-agent-status:has(.shcb-status-online) {
    color: #888;
}

.shcb-template-soft .shcb-status-online {
    background: #22C55E;
    animation: shcb-soft-pulse 2s ease-in-out infinite;
}

@keyframes shcb-soft-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.3; }
}

.shcb-template-soft .shcb-status-offline {
    background: #ddd;
}


/* ─── Footer ────────────────────────────────────────── */
.shcb-template-soft .shcb-popup-footer {
    border-top: 1px solid #EFEFEF;
}

.shcb-template-soft .shcb-powered-by {
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #BDBDBD;
}


/* ─── Badge — Green dot ─────────────────────────────── */
.shcb-template-soft .shcb-badge {
    background: #22C55E;
    color: white;
    border: 2.5px solid white;
}


/* ─── Stagger Entry ─────────────────────────────────── */
.shcb-template-soft .shcb-popup.shcb-popup-visible .shcb-welcome-message {
    animation: shcb-soft-fi 0.3s ease 0.04s both;
}
.shcb-template-soft .shcb-popup.shcb-popup-visible .shcb-chips {
    animation: shcb-soft-fi 0.3s ease 0.08s both;
}
.shcb-template-soft .shcb-popup.shcb-popup-visible .shcb-agent-card:nth-child(1) {
    animation: shcb-soft-fi 0.3s ease 0.12s both;
}
.shcb-template-soft .shcb-popup.shcb-popup-visible .shcb-agent-card:nth-child(2) {
    animation: shcb-soft-fi 0.3s ease 0.18s both;
}
.shcb-template-soft .shcb-popup.shcb-popup-visible .shcb-agent-card:nth-child(3) {
    animation: shcb-soft-fi 0.3s ease 0.24s both;
}
.shcb-template-soft .shcb-popup.shcb-popup-visible .shcb-popup-footer {
    animation: shcb-soft-fi 0.3s ease 0.24s both;
}

@keyframes shcb-soft-fi {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}


/* ─── Reduced Motion ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .shcb-template-soft .shcb-status-online {
        animation: none;
    }
    .shcb-template-soft .shcb-popup.shcb-popup-visible .shcb-welcome-message,
    .shcb-template-soft .shcb-popup.shcb-popup-visible .shcb-chips,
    .shcb-template-soft .shcb-popup.shcb-popup-visible .shcb-agent-card,
    .shcb-template-soft .shcb-popup.shcb-popup-visible .shcb-popup-footer {
        animation: none;
    }
}