/**
 * Shois Chat Button — T06 Ivory Prism Template
 *
 * Warm ivory paper × refractive prism light × editorial luxury.
 * Light theme with red-orange accent, warm shadows, and
 * rainbow caustic effects on cards.
 * Type: Bubble Popup
 *
 * @package ShoisChatButton
 */

/* ─── Design Tokens ─────────────────────────────────── */
.shcb-template-ivory-prism {
    --scb-primary: #FF5C3A;
    --scb-secondary: #E04825;
    --scb-bg: #FDFAF6;
    --shcb-header-bg: #1A0F0A;
    --shcb-header-text: #FFF8F0;
    --scb-text: #2C1A10;
    --scb-text-light: rgba(44, 26, 16, 0.55);
    --shcb-cta-bg: #FF5C3A;
    --shcb-cta-text: #ffffff;
    --scb-shadow: 0 40px 90px rgba(44,26,16,0.18), 0 12px 32px rgba(44,26,16,0.1);
    --scb-shadow-btn: 0 8px 28px color-mix(in srgb, var(--scb-primary) 45%, transparent), 0 4px 14px rgba(44,26,16,0.2);
    --scb-radius-popup: 20px;
    --scb-font: 'Bricolage Grotesque', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    --_p-glow: color-mix(in srgb, var(--scb-primary) 38%, transparent);
    --_p-fade: color-mix(in srgb, var(--scb-primary) 12%, transparent);
    --_p-border: color-mix(in srgb, var(--scb-primary) 28%, transparent);
    --_paper: #FDFAF6;
    --_cream: #F5EFE6;
    --_warm-border: rgba(44,26,16,0.09);
    --_warm-shadow: rgba(44,26,16,0.08);
    --_text-dim: color-mix(in srgb, var(--scb-text) 55%, transparent);
    --_text-sub: color-mix(in srgb, var(--scb-text) 30%, transparent);
}


/* ─── Trigger Button — Warm Ink Glow ────────────────── */
.shcb-template-ivory-prism .shcb-trigger-btn {
    background: var(--scb-primary);
    border: none;
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--scb-primary) 20%, transparent),
        0 8px 28px color-mix(in srgb, var(--scb-primary) 45%, transparent),
        0 4px 14px rgba(44,26,16,0.2),
        inset 0 1px 0 rgba(255,255,255,0.28),
        inset 0 -1px 0 rgba(0,0,0,0.1);
    transition: box-shadow 0.3s ease, transform 0.28s cubic-bezier(0.34,1.56,0.64,1);
    overflow: hidden;
}

/* Inner light shimmer */
.shcb-template-ivory-prism .shcb-trigger-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(140deg, rgba(255,255,255,0.32) 0%, rgba(255,255,255,0.06) 50%, transparent 100%);
    pointer-events: none;
}

.shcb-template-ivory-prism .shcb-trigger-btn:hover {
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--scb-primary) 25%, transparent),
        0 12px 36px color-mix(in srgb, var(--scb-primary) 55%, transparent),
        0 6px 20px rgba(44,26,16,0.25),
        inset 0 1px 0 rgba(255,255,255,0.35);
    transform: scale(1.06);
}

.shcb-template-ivory-prism .shcb-trigger-btn:active {
    transform: scale(0.94);
}

.shcb-template-ivory-prism .shcb-trigger-icon svg {
    fill: #fff;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.2));
}

/* Trigger label — warm paper pill */
.shcb-template-ivory-prism .shcb-trigger-label {
    color: var(--scb-text);
    background: var(--_paper);
    border: 1px solid var(--_warm-border);
    box-shadow: 0 4px 16px var(--_warm-shadow);
}

/* Pulse ring */
.shcb-template-ivory-prism .shcb-pulse-ring {
    border-color: color-mix(in srgb, var(--scb-primary) 30%, transparent);
}


/* ─── Popup — Warm Paper Panel ──────────────────────── */
.shcb-template-ivory-prism .shcb-popup {
    background: var(--scb-bg);
    border: 1px solid var(--_warm-border);
    box-shadow:
        0 40px 90px rgba(44,26,16,0.18),
        0 12px 32px rgba(44,26,16,0.1),
        0 3px 8px rgba(44,26,16,0.07),
        0 0 0 1px rgba(255,255,255,0.6);
}

/* Warm ambient wash */
.shcb-template-ivory-prism .shcb-popup::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
    background:
        radial-gradient(ellipse 80% 50% at 0% 0%, color-mix(in srgb, var(--scb-primary) 6%, transparent) 0%, transparent 55%),
        radial-gradient(ellipse 60% 70% at 100% 100%, rgba(255,220,180,0.12) 0%, transparent 55%);
    animation: shcb-ip-warm-wash 9s ease-in-out infinite alternate;
}

@keyframes shcb-ip-warm-wash {
    from { opacity: 0.5; transform: scale(1); }
    to   { opacity: 1;   transform: scale(1.06); }
}


/* ─── Header — Watercolor Wash ──────────────────────── */
.shcb-template-ivory-prism .shcb-popup-header {
    background: var(--shcb-header-bg);
    position: relative;
    overflow: hidden;
    min-height: 120px;
    padding: 32px 20px 20px;
    display: flex;
    align-items: flex-end;
}

/* Watercolor animated blobs */
.shcb-template-ivory-prism .shcb-popup-header::before {
    content: '';
    position: absolute;
    inset: -30px;
    background:
        radial-gradient(ellipse 100% 80% at -10% -15%, color-mix(in srgb, var(--scb-primary) 55%, transparent) 0%, transparent 50%),
        radial-gradient(ellipse 70% 60% at 110% 120%, color-mix(in srgb, var(--scb-primary) 30%, #FF9A5C 40%) 0%, transparent 55%),
        radial-gradient(ellipse 50% 40% at 70% -10%, rgba(255,180,100,0.2) 0%, transparent 50%);
    animation: shcb-ip-wc-shift 10s ease-in-out infinite alternate;
    opacity: 0.85;
}

@keyframes shcb-ip-wc-shift {
    from { transform: scale(1) rotate(0deg); opacity: 0.85; }
    to   { transform: scale(1.12) rotate(5deg); opacity: 1; }
}

/* Prism rainbow effect */
.shcb-template-ivory-prism .shcb-popup-header::after {
    content: '';
    position: absolute;
    top: -20%;
    left: 60%;
    width: 140%;
    height: 140%;
    background: conic-gradient(
        from 220deg,
        rgba(255,0,100,0.08) 0deg,
        rgba(255,165,0,0.06) 45deg,
        rgba(255,255,0,0.05) 90deg,
        rgba(0,200,100,0.05) 135deg,
        rgba(0,150,255,0.07) 180deg,
        rgba(150,0,255,0.06) 225deg,
        rgba(255,0,100,0.08) 360deg
    );
    animation: shcb-ip-prism-spin 8s linear infinite;
    mix-blend-mode: screen;
    pointer-events: none;
}

@keyframes shcb-ip-prism-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Header text */
.shcb-template-ivory-prism .shcb-header-text {
    position: relative;
    z-index: 2;
}

.shcb-template-ivory-prism .shcb-header-title {
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

.shcb-template-ivory-prism .shcb-header-subtitle {
    font-family: 'DM Mono', 'SF Mono', Consolas, monospace;
    font-size: 11px;
    letter-spacing: 0.6px;
    opacity: 0.45;
    margin-top: 5px;
}

.shcb-template-ivory-prism .shcb-brand-logo {
    position: relative;
    z-index: 2;
}

/* Close button */
.shcb-template-ivory-prism .shcb-close-btn {
    border-radius: 8px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.14);
    z-index: 3;
    transition: all 0.22s cubic-bezier(0.34,1.56,0.64,1);
}

.shcb-template-ivory-prism .shcb-close-btn svg {
    stroke: rgba(255,255,255,0.55);
}

.shcb-template-ivory-prism .shcb-close-btn:hover {
    background: var(--_p-fade);
    border-color: var(--_p-border);
    transform: scale(1.1) rotate(90deg);
}

.shcb-template-ivory-prism .shcb-close-btn:hover svg {
    stroke: var(--scb-primary);
}


/* ─── Body ──────────────────────────────────────────── */
.shcb-template-ivory-prism .shcb-popup-body {
    background: var(--scb-bg);
    position: relative;
    z-index: 2;
}

/* Welcome message — warm cream card */
.shcb-template-ivory-prism .shcb-welcome-message {
    border-radius: 13px;
    padding: 13px 14px 13px 17px;
    background: var(--_cream);
    border: 1px solid var(--_warm-border);
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}

.shcb-template-ivory-prism .shcb-welcome-message::before {
    content: '';
    position: absolute;
    left: 0;
    top: 12%;
    bottom: 12%;
    width: 3px;
    background: linear-gradient(180deg, var(--scb-primary), color-mix(in srgb, var(--scb-primary) 50%, #FFAA80 50%));
    border-radius: 0 2px 2px 0;
}

.shcb-template-ivory-prism .shcb-welcome-message p {
    color: var(--_text-dim);
    font-size: 13px;
    line-height: 1.7;
}


/* ─── Chips — Warm paper ────────────────────────────── */
.shcb-template-ivory-prism .shcb-chip {
    background: var(--_cream);
    border: 1px solid var(--_warm-border);
    color: var(--scb-primary);
    font-size: 12px;
    transition: all 0.22s ease;
}

.shcb-template-ivory-prism .shcb-chip:hover {
    background: var(--_p-fade);
    border-color: var(--_p-border);
}


/* ─── Agent Cards — Floating Glass Paper ────────────── */
.shcb-template-ivory-prism .shcb-agent-card {
    background: #FFFFFF;
    border: 1px solid rgba(44,26,16,0.07);
    border-radius: 15px;
    padding-right: 38px;
    position: relative;
    overflow: hidden;
    box-shadow:
        0 1px 3px rgba(44,26,16,0.06),
        0 4px 12px rgba(44,26,16,0.05),
        inset 0 1px 0 rgba(255,255,255,0.95);
    transition: border-color 0.22s, box-shadow 0.25s, transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
}

/* Prism rainbow top edge */
.shcb-template-ivory-prism .shcb-agent-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 15%;
    right: 15%;
    height: 1.5px;
    background: linear-gradient(90deg,
        transparent,
        rgba(255,0,100,0.3), rgba(255,165,0,0.3), rgba(255,255,0,0.25),
        rgba(0,200,100,0.25), rgba(0,150,255,0.3), rgba(150,0,255,0.3),
        transparent);
    opacity: 0;
    transition: opacity 0.3s ease, left 0.4s ease, right 0.4s ease;
}

/* Arrow indicator */
.shcb-template-ivory-prism .shcb-agent-card::after {
    content: '›';
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    font-weight: 300;
    color: var(--_text-sub);
    transition: color 0.2s ease, transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
    pointer-events: none;
}

.shcb-template-ivory-prism .shcb-agent-card:hover {
    border-color: var(--_p-border);
    box-shadow:
        0 2px 6px rgba(44,26,16,0.08),
        0 10px 28px rgba(44,26,16,0.1),
        0 0 0 1px var(--_p-fade),
        inset 0 1px 0 rgba(255,255,255,1);
    transform: translateY(-2px);
}

.shcb-template-ivory-prism .shcb-agent-card:hover::before {
    opacity: 1;
    left: 0%;
    right: 0%;
}

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


/* ─── Avatar ────────────────────────────────────────── */
.shcb-template-ivory-prism .shcb-agent-avatar {
    border-radius: 13px;
}

.shcb-template-ivory-prism .shcb-avatar-initials {
    font-weight: 800;
    font-size: 16px;
    box-shadow:
        0 3px 12px color-mix(in srgb, var(--scb-primary) 40%, transparent),
        0 0 0 1.5px color-mix(in srgb, var(--scb-primary) 20%, transparent),
        inset 0 1px 0 rgba(255,255,255,0.25);
}

.shcb-template-ivory-prism .shcb-agent-card:hover .shcb-agent-avatar {
    transform: scale(1.08) rotate(-4deg);
}


/* ─── Agent Info ────────────────────────────────────── */
.shcb-template-ivory-prism .shcb-agent-name {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.2px;
    color: var(--scb-text);
    transition: color 0.2s;
}

.shcb-template-ivory-prism .shcb-agent-card:hover .shcb-agent-name {
    color: color-mix(in srgb, var(--scb-text) 85%, var(--scb-primary) 15%);
}

.shcb-template-ivory-prism .shcb-agent-status {
    font-family: 'DM Mono', 'SF Mono', Consolas, monospace;
    font-size: 10.5px;
    color: var(--_text-sub);
}

.shcb-template-ivory-prism .shcb-agent-status:has(.shcb-status-online) {
    color: #16A34A;
}

.shcb-template-ivory-prism .shcb-status-online {
    background: #22C55E;
    box-shadow: 0 0 6px rgba(34,197,94,0.6);
    animation: shcb-ip-dot-beat 2s ease-in-out infinite;
}

@keyframes shcb-ip-dot-beat {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.25; transform: scale(0.5); }
}

.shcb-template-ivory-prism .shcb-status-offline {
    background: rgba(44,26,16,0.2);
}


/* ─── Platform Buttons ──────────────────────────────── */
.shcb-template-ivory-prism .shcb-platform-btn {
    border-radius: 10px;
    transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s ease;
}

.shcb-template-ivory-prism .shcb-platform-btn:hover {
    transform: scale(1.12);
}


/* ─── Footer ────────────────────────────────────────── */
.shcb-template-ivory-prism .shcb-popup-footer {
    border-top: 1px solid var(--_warm-border);
    background: var(--scb-bg);
    z-index: 2;
}

.shcb-template-ivory-prism .shcb-powered-by {
    font-family: 'DM Mono', 'SF Mono', Consolas, monospace;
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--_text-sub);
}


/* ─── Badge ─────────────────────────────────────────── */
.shcb-template-ivory-prism .shcb-badge {
    background: var(--scb-primary);
    color: #fff;
    font-weight: 800;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--scb-primary) 40%, transparent);
}


/* ─── Stagger Entry ─────────────────────────────────── */
.shcb-template-ivory-prism .shcb-popup.shcb-popup-visible .shcb-welcome-message {
    animation: shcb-ip-entry 0.5s cubic-bezier(0.16,1,0.3,1) 0.06s both;
}
.shcb-template-ivory-prism .shcb-popup.shcb-popup-visible .shcb-chips {
    animation: shcb-ip-entry 0.5s cubic-bezier(0.16,1,0.3,1) 0.12s both;
}
.shcb-template-ivory-prism .shcb-popup.shcb-popup-visible .shcb-agent-card:nth-child(1) {
    animation: shcb-ip-entry 0.5s cubic-bezier(0.16,1,0.3,1) 0.19s both;
}
.shcb-template-ivory-prism .shcb-popup.shcb-popup-visible .shcb-agent-card:nth-child(2) {
    animation: shcb-ip-entry 0.5s cubic-bezier(0.16,1,0.3,1) 0.27s both;
}
.shcb-template-ivory-prism .shcb-popup.shcb-popup-visible .shcb-agent-card:nth-child(3) {
    animation: shcb-ip-entry 0.5s cubic-bezier(0.16,1,0.3,1) 0.35s both;
}
.shcb-template-ivory-prism .shcb-popup.shcb-popup-visible .shcb-popup-footer {
    animation: shcb-ip-entry 0.5s cubic-bezier(0.16,1,0.3,1) 0.35s both;
}

@keyframes shcb-ip-entry {
    from { opacity: 0; transform: translateY(15px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}


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