/* Smart Contact Engine v2.18 — isolated paint, CLS-safe stacking */

/* ========================================================================
   CORE RESET / THEME ISOLATION
   ======================================================================== */
.sce-wrapper,
.sce-wrapper *,
.sce-inline-wrap,
.sce-inline-wrap * {
    box-sizing: border-box;
}

.sce-wrapper {
    display: flex;
    flex-direction: column;
    max-width: min(92vw, 380px);
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
    line-height: normal;
    isolation: isolate;
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.sce-wrapper[data-sce-widget="standalone"] {
    width: max-content;
    max-width: none;
}

.sce-wrapper.sce-hidden-scroll {
    opacity: .18;
    pointer-events: none;
    transition: opacity .2s ease;
}

.sce-buttons-list {
    display: flex;
    flex-direction: column;
    gap: var(--sce-stack-gap, 10px);
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
}

.sce-buttons-list--standalone {
    align-items: flex-start;
}

.sce-stack-bottom .sce-buttons-list--standalone {
    flex-direction: column-reverse;
}

.sce-stack-top .sce-buttons-list--standalone,
.sce-stack-middle .sce-buttons-list--standalone {
    flex-direction: column;
}

.sce-inline-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

/* CSS-first device visibility prevents post-load flashes and layout movement. */
@media (max-width: 767px) {
    .sce-button[data-sce-show-mobile="0"] { display: none !important; }
}
@media (min-width: 768px) and (max-width: 1024px) {
    .sce-button[data-sce-show-tablet="0"] { display: none !important; }
}
@media (min-width: 1025px) {
    .sce-button[data-sce-show-desktop="0"] { display: none !important; }
}

/* ========================================================================
   BUTTON ROOT
   The anchor stays transparent. All visible paint lives in the rounded
   .sce-button-surface layer, preventing square theme shadows/backgrounds.
   ======================================================================== */
.sce-button {
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    position: relative !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    filter: none !important;
    text-decoration: none !important;
    text-indent: 0 !important;
    line-height: 1.2 !important;
    overflow: visible !important;
    isolation: isolate;
    cursor: pointer;
    color: var(--sce-text-color, #fff) !important;
    border-radius: var(--sce-radius, 18px) !important;
    font-family: var(--sce-font-family, inherit) !important;
    font-size: var(--sce-font-size, 14px) !important;
    font-weight: var(--sce-font-weight, 600) !important;
    font-style: var(--sce-font-style, normal) !important;
    transform: none !important;
    transition: none !important;
    vertical-align: middle;
    -webkit-tap-highlight-color: transparent;
}

/* Neutralize pseudo-elements injected by themes/builders. Plugin effects use a
   dedicated child layer instead. */
.sce-button::before,
.sce-button::after {
    content: none !important;
    display: none !important;
}

.sce-button-surface {
    position: relative;
    z-index: 2;
    box-sizing: border-box !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    min-width: inherit;
    min-height: inherit;
    height: 100%;
    padding: var(--sce-padding-y, 10px) var(--sce-padding-x, 14px);
    margin: 0;
    border: var(--sce-border-width, 0px) solid var(--sce-border-color, transparent);
    border-radius: var(--sce-radius, 18px);
    background-color: var(--sce-bg-color, #111827);
    background-image: var(--sce-bg-image, none);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-clip: padding-box;
    color: var(--sce-text-color, #fff);
    box-shadow: var(--sce-shadow, none);
    overflow: hidden;
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.sce-button:hover .sce-button-surface,
.sce-button:focus-visible .sce-button-surface {
    background-color: var(--sce-hover-bg, var(--sce-bg-color, #111827));
    background-image: none;
    color: var(--sce-hover-text, var(--sce-text-color, #fff));
    box-shadow: var(--sce-shadow-hover, var(--sce-shadow, none));
}

.sce-button:focus-visible .sce-button-surface {
    outline: 3px solid rgba(59, 130, 246, .42);
    outline-offset: 3px;
}

.sce-button:active .sce-button-surface {
    box-shadow: var(--sce-shadow, none);
}

.sce-button.sce-mode-icon {
    line-height: 0 !important;
    font-size: 0 !important;
    aspect-ratio: 1 / 1;
}

.sce-button.sce-mode-icon .sce-button-surface {
    padding: 0;
    gap: 0;
}

.sce-button.sce-mode-label .sce-button-surface {
    gap: 0;
}

.sce-button[style*="vw"] {
    max-width: none !important;
}

.sce-button[style*="vw"] .sce-button-surface {
    width: 100%;
}

/* ========================================================================
   EFFECT LAYER / ANIMATIONS
   ======================================================================== */
.sce-effect-layer {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    border-radius: var(--sce-radius, 18px);
    pointer-events: none;
    background: transparent;
}

.sce-effect-layer::before,
.sce-effect-layer::after {
    content: "";
    position: absolute;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
}

.sce-button.sce-attn-ripple .sce-effect-layer::before {
    inset: -7px;
    border: 2px solid var(--sce-contact-ring, rgba(37, 211, 102, .48));
    animation: sceRippleRing 1.9s ease-out infinite;
}

.sce-button.sce-attn-ripple .sce-effect-layer::after {
    inset: 0;
    background: var(--sce-contact-pulse, rgba(37, 211, 102, .22));
    animation: scePulseWave 2.4s ease-out infinite;
}

.sce-button.sce-attn-pulse .sce-icon {
    animation: sceIconPulse 1.8s ease-in-out infinite;
    transform-origin: center;
}
.sce-button.sce-attn-heartbeat .sce-icon {
    animation: sceIconHeartbeat 1.35s ease-in-out infinite;
    transform-origin: center;
}
.sce-button.sce-attn-float .sce-icon {
    animation: sceIconFloat 2.2s ease-in-out infinite;
}
.sce-button.sce-attn-shake .sce-icon {
    animation: sceIconShake 2.8s ease-in-out infinite;
}

.sce-wrapper.sce-has-pulse .sce-toggle-icon,
.sce-wrapper.sce-has-pulse .sce-button:not([class*="sce-attn-"]) .sce-icon {
    animation: sceIconPulse 1.8s ease-in-out infinite;
    transform-origin: center;
}

.sce-wrapper.sce-has-glow .sce-button-surface {
    box-shadow: var(--sce-shadow, none), 0 0 0 7px var(--sce-contact-pulse, rgba(37, 211, 102, .18));
}

.sce-button[class*="sce-enter-"] {
    animation: sceEntranceOpacity .28s ease both;
    animation-delay: var(--sce-enter-delay, 0ms);
}

@keyframes sceEntranceOpacity {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes sceIconPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.12); }
}
@keyframes sceIconHeartbeat {
    0%, 30%, 70%, 100% { transform: scale(1); }
    15%, 45% { transform: scale(1.16); }
}
@keyframes sceIconFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}
@keyframes sceIconShake {
    0%, 90%, 100% { transform: translateX(0); }
    92% { transform: translateX(-2px); }
    94% { transform: translateX(2px); }
    96% { transform: translateX(-1px); }
    98% { transform: translateX(1px); }
}
@keyframes sceRippleRing {
    0% { transform: scale(.88); opacity: .38; }
    70%, 100% { transform: scale(1.55); opacity: 0; }
}
@keyframes scePulseWave {
    0% { transform: scale(1); opacity: .30; }
    70%, 100% { transform: scale(1.32); opacity: 0; }
}

/* ========================================================================
   ICON / COPY / BADGE
   ======================================================================== */
.sce-icon {
    position: relative;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--sce-icon-size, 22px);
    height: var(--sce-icon-size, 22px);
    flex: 0 0 auto;
    color: var(--sce-icon-color, currentColor) !important;
    line-height: 0;
}

.sce-button:hover .sce-icon,
.sce-button:focus-visible .sce-icon {
    color: var(--sce-hover-text, var(--sce-icon-color, currentColor)) !important;
}

.sce-icon svg,
.sce-icon img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain;
    pointer-events: none;
}

.sce-icon svg {
    color: currentColor !important;
}

.sce-copy {
    position: relative;
    z-index: 3;
    display: flex;
    min-width: 0;
    flex-direction: column;
    color: inherit;
    text-align: left;
}

.sce-label {
    margin: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    font-weight: inherit;
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sce-desc {
    margin: 2px 0 0;
    padding: 0;
    color: inherit;
    font: inherit;
    font-size: .84em;
    line-height: 1.25;
    opacity: .86;
}

.sce-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    z-index: 5;
    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;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .20);
}

/* ========================================================================
   TOOLTIP
   ======================================================================== */
.sce-tooltip {
    position: absolute;
    z-index: 20;
    display: block;
    width: max-content;
    max-width: min(280px, calc(100vw - 24px));
    padding: var(--sce-tooltip-padding-y, 6px) var(--sce-tooltip-padding-x, 12px);
    border: 0;
    border-radius: var(--sce-tooltip-radius, 8px);
    background: var(--sce-tooltip-bg, #1e293b);
    color: var(--sce-tooltip-color, #f8fafc);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
    font-size: var(--sce-tooltip-font-size, 12px);
    font-weight: 600;
    line-height: 1.3;
    white-space: normal;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}

.sce-tooltip::after {
    content: "";
    position: absolute;
    border: 5px solid transparent;
}

.sce-tip-left .sce-tooltip {
    right: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%) translateX(5px);
}
.sce-tip-left .sce-tooltip::after {
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border-left-color: var(--sce-tooltip-bg, #1e293b);
}
.sce-tip-right .sce-tooltip {
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%) translateX(-5px);
}
.sce-tip-right .sce-tooltip::after {
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    border-right-color: var(--sce-tooltip-bg, #1e293b);
}
.sce-tip-top .sce-tooltip {
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(5px);
}
.sce-tip-top .sce-tooltip::after {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-top-color: var(--sce-tooltip-bg, #1e293b);
}
.sce-tip-bottom .sce-tooltip {
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(-5px);
}
.sce-tip-bottom .sce-tooltip::after {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-bottom-color: var(--sce-tooltip-bg, #1e293b);
}

.sce-button:hover .sce-tooltip,
.sce-button:focus-visible .sce-tooltip,
.sce-button.sce-tip-active .sce-tooltip {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}
.sce-tip-left:hover .sce-tooltip,
.sce-tip-left:focus-visible .sce-tooltip,
.sce-tip-left.sce-tip-active .sce-tooltip {
    transform: translateY(-50%) translateX(0);
}
.sce-tip-right:hover .sce-tooltip,
.sce-tip-right:focus-visible .sce-tooltip,
.sce-tip-right.sce-tip-active .sce-tooltip {
    transform: translateY(-50%) translateX(0);
}
.sce-tip-top:hover .sce-tooltip,
.sce-tip-top:focus-visible .sce-tooltip,
.sce-tip-top.sce-tip-active .sce-tooltip {
    transform: translateX(-50%) translateY(0);
}
.sce-tip-bottom:hover .sce-tooltip,
.sce-tip-bottom:focus-visible .sce-tooltip,
.sce-tip-bottom.sce-tip-active .sce-tooltip {
    transform: translateX(-50%) translateY(0);
}

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

.sce-panel-card {
    display: block;
    overflow: hidden;
    border: 1px solid rgba(17, 24, 39, .06);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
}

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

.sce-toggle {
    -webkit-appearance: none;
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: flex-end;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
    cursor: pointer;
}
.sce-toggle-icon { display: flex; align-items: center; justify-content: center; }
.sce-toggle-icon svg { width: 26px; height: 26px; }

/* ========================================================================
   RESPONSIVE TYPOGRAPHY / DIMENSIONS
   ======================================================================== */
@media (min-width: 1025px) {
    .sce-button.sce-mode-global.sce-labels-desktop-off .sce-copy { display: none; }
    .sce-button.sce-mode-global.sce-labels-desktop-off {
        width: var(--sce-button-width, 56px) !important;
        min-width: var(--sce-button-width, 56px) !important;
        max-width: var(--sce-button-width, 56px) !important;
        height: var(--sce-button-height, 56px) !important;
        min-height: var(--sce-button-height, 56px) !important;
        max-height: var(--sce-button-height, 56px) !important;
        aspect-ratio: 1 / 1;
    }
    .sce-button.sce-mode-global.sce-labels-desktop-off .sce-button-surface { padding: 0; }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .sce-wrapper { max-width: min(85vw, 380px); }
    .sce-button {
        font-size: var(--sce-t-font-size, var(--sce-font-size, 14px)) !important;
    }
    .sce-button .sce-icon {
        width: var(--sce-t-icon-size, var(--sce-icon-size, 22px));
        height: var(--sce-t-icon-size, var(--sce-icon-size, 22px));
    }
    .sce-button.sce-mode-global.sce-labels-desktop-off .sce-copy { display: none; }
    .sce-button.sce-mode-global.sce-labels-desktop-off {
        width: var(--sce-button-width, 56px) !important;
        min-width: var(--sce-button-width, 56px) !important;
        max-width: var(--sce-button-width, 56px) !important;
        height: var(--sce-button-height, 56px) !important;
        min-height: var(--sce-button-height, 56px) !important;
        max-height: var(--sce-button-height, 56px) !important;
        aspect-ratio: 1 / 1;
    }
    .sce-button.sce-mode-global.sce-labels-desktop-off .sce-button-surface { padding: 0; }
}

@media (max-width: 767px) {
    .sce-wrapper { max-width: calc(100vw - 20px); }
    .sce-panel-card { max-width: 100%; }

    .sce-button {
        font-size: var(--sce-m-font-size, var(--sce-font-size, 14px)) !important;
    }
    .sce-button .sce-icon {
        width: var(--sce-m-icon-size, var(--sce-icon-size, 22px));
        height: var(--sce-m-icon-size, var(--sce-icon-size, 22px));
    }

    .sce-button.sce-mode-icon,
    .sce-button.sce-m-icon,
    .sce-button.sce-mode-global.sce-labels-mobile-off {
        width: var(--sce-m-width, var(--sce-button-width, 56px)) !important;
        min-width: var(--sce-m-width, var(--sce-button-width, 56px)) !important;
        max-width: var(--sce-m-width, var(--sce-button-width, 56px)) !important;
        height: var(--sce-m-height, var(--sce-button-height, 56px)) !important;
        min-height: var(--sce-m-height, var(--sce-button-height, 56px)) !important;
        max-height: var(--sce-m-height, var(--sce-button-height, 56px)) !important;
        aspect-ratio: 1 / 1;
    }

    .sce-button.sce-m-icon .sce-copy,
    .sce-button.sce-mode-global.sce-labels-mobile-off .sce-copy { display: none; }
    .sce-button.sce-m-icon .sce-button-surface,
    .sce-button.sce-mode-global.sce-labels-mobile-off .sce-button-surface { padding: 0; }
    .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; }

    .sce-tooltip {
        max-width: min(240px, calc(100vw - 18px));
        font-size: var(--sce-tooltip-font-size, 11px);
    }
}

/* ========================================================================
   REDUCED MOTION
   ======================================================================== */
@media (prefers-reduced-motion: reduce) {
    .sce-button,
    .sce-button-surface,
    .sce-tooltip,
    .sce-toggle,
    .sce-icon,
    .sce-effect-layer::before,
    .sce-effect-layer::after,
    .sce-online-dot {
        animation: none !important;
        transition: none !important;
    }
    .sce-effect-layer::before,
    .sce-effect-layer::after { display: none !important; }
}

/* Global entrance choices are intentionally opacity-only on the fixed wrapper.
   This preserves the selected effect without altering fixed coordinates. */
.sce-wrapper.sce-anim-fadeSlideUp,
.sce-wrapper.sce-anim-fadeSlideDown,
.sce-wrapper.sce-anim-fadeSlideLeft,
.sce-wrapper.sce-anim-fadeSlideRight,
.sce-wrapper.sce-anim-bounceIn,
.sce-wrapper.sce-anim-scaleUp,
.sce-wrapper.sce-anim-fadeIn {
    animation: sceEntranceOpacity .28s ease both;
}