/* Smart Contact Engine v2.1 — Frontend CSS */

/* ========== WRAPPER ========== */
.sce-wrapper{display:flex;flex-direction:column;gap:12px;max-width:min(92vw,380px);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,sans-serif}
.sce-wrapper.sce-hidden-scroll{opacity:.2;transform:translateY(18px);pointer-events:none;transition:.25s ease}
/* When standalone buttons use vw widths, don't constrain the wrapper */
.sce-wrapper:has(.sce-button[style*="vw"]){max-width:none}
.sce-buttons-list--standalone .sce-button[style*="vw"]{max-width:none}
.sce-buttons-list--standalone:has(.sce-button[style*="vw"]){max-width:none}

/* Theme */
.sce-wrapper.sce-theme-dark .sce-panel-card{background:#111827;color:#f9fafb}

/* Shadow / Glow / Pulse */
.sce-wrapper.sce-has-shadow .sce-panel-card,.sce-wrapper.sce-has-shadow .sce-toggle{box-shadow:0 12px 32px rgba(0,0,0,.18)}
.sce-wrapper.sce-has-glow .sce-toggle,.sce-wrapper.sce-has-glow .sce-button{box-shadow:0 0 0 8px rgba(37,211,102,.18)}
.sce-wrapper.sce-has-pulse .sce-toggle,.sce-wrapper.sce-has-pulse .sce-button{animation:scePulse 1.8s infinite}

/* ========== ENTRANCE ANIMATIONS ========== */
.sce-entrance-fadeSlideUp{animation:sceFadeSlideUp .5s ease both}
.sce-entrance-fadeSlideDown{animation:sceFadeSlideDown .5s ease both}
.sce-entrance-fadeSlideLeft{animation:sceFadeSlideLeft .5s ease both}
.sce-entrance-fadeSlideRight{animation:sceFadeSlideRight .5s ease both}
.sce-entrance-bounceIn{animation:sceBounceIn .6s cubic-bezier(.36,.07,.19,.97) both}
.sce-entrance-scaleUp{animation:sceScaleUp .4s ease both}
.sce-entrance-fadeIn{animation:sceFadeIn .5s ease both}

.sce-anim-fadeSlideUp .sce-buttons-list,.sce-anim-fadeSlideUp .sce-panel-card{animation:sceFadeSlideUp .5s ease both}
.sce-anim-bounceIn .sce-buttons-list,.sce-anim-bounceIn .sce-panel-card{animation:sceBounceIn .6s cubic-bezier(.36,.07,.19,.97) both}
.sce-anim-scaleUp .sce-buttons-list,.sce-anim-scaleUp .sce-panel-card{animation:sceScaleUp .4s ease both}
.sce-anim-fadeIn .sce-buttons-list,.sce-anim-fadeIn .sce-panel-card{animation:sceFadeIn .5s ease both}

@keyframes scePulse{0%{transform:scale(1)}50%{transform:scale(1.06)}100%{transform:scale(1)}}
@keyframes sceFadeSlideUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes sceFadeSlideDown{from{opacity:0;transform:translateY(-24px)}to{opacity:1;transform:translateY(0)}}
@keyframes sceFadeSlideLeft{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:translateX(0)}}
@keyframes sceFadeSlideRight{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:translateX(0)}}
@keyframes sceBounceIn{0%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1.08)}70%{transform:scale(.92)}100%{opacity:1;transform:scale(1)}}
@keyframes sceScaleUp{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}
@keyframes sceFadeIn{from{opacity:0}to{opacity:1}}

/* ========== TOGGLE BUTTON ========== */
.sce-toggle{border:none;border-radius:999px;cursor:pointer;display:flex;align-items:center;justify-content:center;align-self:flex-end;transition:transform .2s ease,box-shadow .2s ease;position:relative}
.sce-toggle:hover{transform:scale(1.08)}
.sce-toggle-icon{display:flex;align-items:center;justify-content:center}
.sce-toggle-icon svg{width:26px;height:26px}

/* ========== PANEL ========== */
.sce-panel-card{display:block;overflow:hidden;border:1px solid rgba(17,24,39,.06);transition:all .3s ease}
.sce-panel-header{display:flex;align-items:center;gap:12px;padding:16px 18px}
.sce-panel-avatar{width:42px;height:42px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.3)}
.sce-panel-info{flex:1;display:flex;flex-direction:column;gap:2px}
.sce-agent-name{font-size:15px;font-weight:700}
.sce-online-status{font-size:12px;opacity:.85;display:flex;align-items:center;gap:5px}
.sce-online-dot{width:8px;height:8px;border-radius:50%;background:#4ade80;display:inline-block;animation:sceOnlinePulse 2s infinite}
@keyframes sceOnlinePulse{0%,100%{opacity:1}50%{opacity:.5}}
.sce-close{border:none;background:transparent;color:inherit;cursor:pointer;padding:4px;line-height:1;opacity:.7;transition:opacity .15s}
.sce-close:hover{opacity:1}
.sce-close svg{width:20px;height:20px}
.sce-panel-body{padding:16px 18px}
.sce-greeting-bubble{background:#f0fdf4;border-radius:0 16px 16px 16px;padding:14px 16px;margin-bottom:16px;border:1px solid #bbf7d0}
.sce-wrapper.sce-theme-dark .sce-greeting-bubble{background:#1e293b;border-color:#334155}
.sce-greeting{margin:0 0 4px;font-weight:700;font-size:15px}
.sce-description{margin:0;color:#6b7280;font-size:13px;line-height:1.5}
.sce-panel-footer{padding:10px 18px;text-align:center;border-top:1px solid rgba(0,0,0,.06);font-size:11px;color:#9ca3af}
.sce-panel-footer a{color:#6366f1;text-decoration:none}

/* ========== BUTTONS LIST ========== */
.sce-buttons-list{display:flex;flex-direction:column;gap:10px}
.sce-buttons-list--standalone{align-items:flex-start}

/* ========== BUTTON ========== */
.sce-button{display:flex;align-items:center;justify-content:center;gap:12px;text-decoration:none;padding:10px 16px;transition:all .2s ease;border-style:solid;box-sizing:border-box;max-width:min(92vw,360px);position:relative;overflow:visible;cursor:pointer}
.sce-button:hover{background:var(--sce-hover) !important;color:var(--sce-hover-text) !important;transform:translateY(-2px)}
.sce-button:hover .sce-icon{color:var(--sce-hover-text) !important}
.sce-button:active{transform:translateY(0)}

/* Icon-only mode — circle shape, inherits min-width/min-height from inline style */
.sce-button.sce-mode-icon{padding:0;border-radius:999px}
.sce-button.sce-mode-icon .sce-icon{width:var(--sce-icon-size);height:var(--sce-icon-size)}

/* When icon-only has NO explicit vw width, force square aspect */
.sce-button.sce-mode-icon:not([style*="vw"]){aspect-ratio:1/1}

/* Full mode (icon+text) with vw width — expand properly */
.sce-button[style*="vw"]{box-sizing:border-box;max-width:none}
.sce-button[style*="vw"] .sce-copy{flex:1;min-width:0}
.sce-button[style*="vw"] .sce-label{white-space:normal;word-break:break-word}

/* ========== ICON ========== */
.sce-icon{display:inline-flex;align-items:center;justify-content:center;width:var(--sce-icon-size);height:var(--sce-icon-size);flex:0 0 auto;color:var(--sce-icon-color,currentColor)}
.sce-icon svg,.sce-icon img{width:100%;height:100%;display:block;object-fit:contain}

/* ========== COPY ========== */
.sce-copy{display:flex;flex-direction:column}
.sce-label{line-height:1.2;white-space:nowrap}
.sce-desc{opacity:.85;font-size:12px;line-height:1.2;margin-top:2px}

/* ========== BADGE ========== */
.sce-badge{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;color:#fff;font-size:10px;font-weight:700;line-height:18px;text-align:center;z-index:1;box-shadow:0 2px 6px rgba(0,0,0,.2);animation:sceBadgePop .3s ease}
@keyframes sceBadgePop{from{transform:scale(0)}to{transform:scale(1)}}

/* ========== TOOLTIP SYSTEM — 4 DIRECTIONAL ========== */
.sce-tooltip{position:absolute;white-space:nowrap;background:var(--sce-tooltip-bg,#1e293b);color:var(--sce-tooltip-color,#f8fafc);font-size:var(--sce-tooltip-font-size,12px);font-weight:500;padding:var(--sce-tooltip-padding-y,6px) var(--sce-tooltip-padding-x,12px);border-radius:var(--sce-tooltip-radius,8px);pointer-events:none;opacity:0;transition:opacity .2s ease,transform .2s ease;z-index:10;box-shadow:0 4px 14px rgba(0,0,0,.18);line-height:1.3}
.sce-tooltip::after{content:'';position:absolute;border:5px solid transparent}

/* LEFT tooltip (for right-positioned buttons) */
.sce-tip-left .sce-tooltip{right:calc(100% + 8px);top:50%;transform:translateY(-50%) translateX(6px)}
.sce-tip-left .sce-tooltip::after{left:100%;top:50%;transform:translateY(-50%);border-left-color:var(--sce-tooltip-bg,#1e293b)}
.sce-tip-left:hover .sce-tooltip,.sce-tip-left.sce-tip-active .sce-tooltip{opacity:1;transform:translateY(-50%) translateX(0)}

/* RIGHT tooltip (for left-positioned buttons) */
.sce-tip-right .sce-tooltip{left:calc(100% + 8px);top:50%;transform:translateY(-50%) translateX(-6px)}
.sce-tip-right .sce-tooltip::after{right:100%;top:50%;transform:translateY(-50%);border-right-color:var(--sce-tooltip-bg,#1e293b)}
.sce-tip-right:hover .sce-tooltip,.sce-tip-right.sce-tip-active .sce-tooltip{opacity:1;transform:translateY(-50%) translateX(0)}

/* TOP tooltip (for bottom-positioned buttons) */
.sce-tip-top .sce-tooltip{bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(6px)}
.sce-tip-top .sce-tooltip::after{top:100%;left:50%;transform:translateX(-50%);border-top-color:var(--sce-tooltip-bg,#1e293b)}
.sce-tip-top:hover .sce-tooltip,.sce-tip-top.sce-tip-active .sce-tooltip{opacity:1;transform:translateX(-50%) translateY(0)}

/* BOTTOM tooltip (for top-positioned buttons) */
.sce-tip-bottom .sce-tooltip{top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(-6px)}
.sce-tip-bottom .sce-tooltip::after{bottom:100%;left:50%;transform:translateX(-50%);border-bottom-color:var(--sce-tooltip-bg,#1e293b)}
.sce-tip-bottom:hover .sce-tooltip,.sce-tip-bottom.sce-tip-active .sce-tooltip{opacity:1;transform:translateX(-50%) translateY(0)}

/* ========== INLINE / SHORTCODE ========== */
.sce-inline-wrap{display:flex;gap:10px;flex-wrap:wrap}
.sce-inline-wrap .sce-button{position:relative}
.sce-inline{align-items:center}

/* ========== MOBILE RESPONSIVE ========== */
@media(max-width:767px){
    .sce-wrapper{max-width:calc(100vw - 20px)}
    .sce-panel-card{max-width:100%}

    /* Mobile per-button overrides via CSS custom properties */
    .sce-button{
        min-width:var(--sce-m-width, var(--sce-fallback-width));
        min-height:var(--sce-m-height, var(--sce-fallback-height));
    }
    .sce-button .sce-icon{
        width:var(--sce-t-icon-size, var(--sce-icon-size));
        height:var(--sce-t-icon-size, var(--sce-icon-size));
    }
    .sce-button{font-size:var(--sce-t-font-size, inherit);}
    .sce-button{font-size:var(--sce-m-font-size, inherit);}

    /* Mobile display mode overrides */
    .sce-button.sce-m-icon .sce-copy{display:none}
    .sce-button.sce-m-icon{padding:0;border-radius:999px;aspect-ratio:1/1}
    .sce-button.sce-m-label .sce-icon{display:none}
    .sce-button.sce-m-full .sce-copy{display:flex !important}
    .sce-button.sce-m-full .sce-icon{display:inline-flex !important}

    /* Mobile tooltip: tap to show, positioned closer */
    .sce-tooltip{font-size:11px;padding:5px 10px}
    .sce-tip-left .sce-tooltip{right:calc(100% + 6px)}
    .sce-tip-right .sce-tooltip{left:calc(100% + 6px)}
    .sce-tip-top .sce-tooltip{bottom:calc(100% + 6px)}
    .sce-tip-bottom .sce-tooltip{top:calc(100% + 6px)}
}

/* Tablet adjustments */
@media(min-width:768px) and (max-width:1024px){
    .sce-wrapper{max-width:min(85vw,380px)}

    .sce-button{
        min-width:var(--sce-m-width, var(--sce-fallback-width));
        min-height:var(--sce-m-height, var(--sce-fallback-height));
    }
    .sce-button .sce-icon{
        width:var(--sce-m-icon-size, var(--sce-icon-size));
        height:var(--sce-m-icon-size, var(--sce-icon-size));
    }
    .sce-button{font-size:var(--sce-m-font-size, inherit);}
}


/* Attention animations */
.sce-button.sce-attn-pulse{animation:scePulse 1.8s infinite}
.sce-button.sce-attn-heartbeat{animation:sceHeartbeat 1.25s infinite}
.sce-button.sce-attn-float{animation:sceFloat 2.2s ease-in-out infinite}
.sce-button.sce-attn-shake{animation:sceShake 2.8s infinite}
.sce-button.sce-attn-ripple::before{content:'';position:absolute;inset:-6px;border-radius:inherit;border:2px solid currentColor;opacity:.25;animation:sceRipple 1.8s infinite;pointer-events:none}
@keyframes sceHeartbeat{0%,28%,70%,100%{transform:scale(1)}14%,42%{transform:scale(1.09)}}
@keyframes sceFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes sceShake{0%,92%,100%{transform:translateX(0)}94%{transform:translateX(-3px)}96%{transform:translateX(3px)}98%{transform:translateX(-2px)}}
@keyframes sceRipple{0%{transform:scale(.9);opacity:.35}70%{transform:scale(1.45);opacity:0}100%{transform:scale(1.45);opacity:0}}