/* =========================================
   🦁 SHELIUX LIVE CHAT SUITE – FRONTEND
   - Magic lamp floating button
   - Wizard/magic vibe when opening chat
   - Leoncito cursor inside chat
   - Background image + color on messages area
   - Optional header background image
   - Dynamic colors via CSS vars
=========================================*/

#slcs-widget,
.slcs-widget {
    position: fixed;
    bottom: 18px;
    left: 18px;
    z-index: 999999;
    font-family: "Inter", system-ui, sans-serif;
}

/* Cursor leoncito solo dentro del chat */
.slcs-widget,
.slcs-widget * {
    cursor: url('https://sheliux.com/wp-content/uploads/2025/11/logo-transparent-2-e1764301215916.png') 8 10, auto;
}

/* Burbuja flotante con lámpara mágica */

/* Burbuja flotante tipo burbuja de jabón */

/* Burbuja flotante tipo burbuja de jabón (más realista) */





.slcs-bubble {
    touch-action: none;
    user-select: none;
    position: relative;
    width: var(--slcs-bubble-size, 68px);
    height: var(--slcs-bubble-size, 68px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: transparent;
    box-shadow: 0 0 0 0 rgba(0,0,0,0),
                0 0 14px var(--slcs-bubble-glow, rgba(212,175,55,0.85));
    transform-origin: center;
    text-align: center;
    padding: 0;
    margin: 0;
}

.slcs-bubble-logo {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: contain;
    box-shadow: none;
}

/* Floating button attention animations */
.slcs-bubble--none {
    animation: none;
}

.slcs-bubble--pulse {
    animation: slcs-bubble-pulse 1.8s ease-in-out infinite;
}

.slcs-bubble--bounce {
    animation: slcs-bubble-bounce 1.5s ease-out infinite;
}

.slcs-bubble--float {
    animation: slcs-bubble-float-soft 3.2s ease-in-out infinite;
}

.slcs-bubble--wiggle {
    animation: slcs-bubble-wiggle 1.4s ease-in-out infinite;
}

@keyframes slcs-bubble-pulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.08); box-shadow: 0 0 0 0 rgba(0,0,0,0), 0 0 18px var(--slcs-bubble-glow, rgba(212,175,55,1)); }
    100% { transform: scale(1); }
}

@keyframes slcs-bubble-bounce {
    0%, 100% { transform: translateY(0); }
    40%      { transform: translateY(-6px); }
    70%      { transform: translateY(0); }
}

@keyframes slcs-bubble-float-soft {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-4px); }
    100% { transform: translateY(0); }
}

@keyframes slcs-bubble-wiggle {
    0%, 100% { transform: rotate(0deg); }
    30%      { transform: rotate(-4deg); }
    60%      { transform: rotate(4deg); }
}


/* Logo dentro de la burbuja, tipo WhatsApp pero con tu marca */


/* Texto HELP solo como respaldo cuando no hay logo */
.slcs-bubble-label {
    position: relative;
    z-index: 1;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.20em;
}

/* Ligerísima flotación al pasar el mouse */
.slcs-bubble:hover {
    transform: translateY(-3px) scale(1.02);
}


@keyframes slcs-bubble-float {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    50% {
        transform: translate3d(2px, -4px, 0) scale(1.01);
    }
    100% {
        transform: translate3d(-2px, 2px, 0) scale(1.0);
    }
}


/* Ventana del chat (genio/mago saliendo de la lámpara) */
.slcs-window {
    position: relative;
    width: var(--slcs-window-width, 360px);
    max-width: 92vw;
    height: var(--slcs-window-height, 480px) !important;
    background: var(--slcs-window-bg, #ffffff);
    border-radius: 20px;
    box-shadow: 0 22px 60px rgba(0,0,0,0.35);
    border: 1px solid rgba(212,175,55,0.5);
    margin-top: 10px;
    display: none;
    flex-direction: column;
    overflow: hidden;
    transform-origin: bottom left;
}

/* ── Default form / toolbar (non-SUNMI) — keeps input area INSIDE the window ── */
.slcs-form {
    flex-shrink: 0;
    border-top: 1px solid rgba(0,0,0,0.08);
    background: #fff;
    padding: 6px 10px 10px;
    position: relative; /* needed for emoji pop absolute positioning */
    z-index: 1;
}
.slcs-input-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 2px 6px;
}
.slcs-tool {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 0;
    background: transparent;
    font-size: 17px;
    cursor: pointer;
    opacity: 0.85;
    flex-shrink: 0;
    transition: background 0.12s, transform 0.1s;
}
.slcs-tool:hover {
    background: rgba(0,0,0,0.07);
    transform: scale(1.1);
}
.slcs-input-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}
.slcs-input-row textarea {
    flex: 1;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 13px;
    resize: none;
    outline: none;
    min-height: 38px;
    max-height: 90px;
    line-height: 1.4;
    font-family: inherit;
    transition: border-color 0.15s;
}
.slcs-input-row textarea:focus {
    border-color: rgba(212,175,55,0.6);
}
.slcs-send {
    flex-shrink: 0;
    background: #D4AF37;
    color: #000;
    border: none;
    border-radius: 10px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
    height: 38px;
}
.slcs-send:hover { background: #e8c040; }
.slcs-send:disabled { background: #e5e7eb; color: #9ca3af; cursor: not-allowed; }

/* Animación "genio/mago" al abrir */
.slcs-window.slcs-open {
    animation: slcs-genie-pop 260ms ease-out;
}

@keyframes slcs-genie-pop {
    0% {
        transform: scale(0.6) translateY(40px);
        opacity: 0;
        filter: drop-shadow(0 0 0 rgba(212,175,55,0));
    }
    60% {
        transform: scale(1.03) translateY(0);
        opacity: 1;
        filter: drop-shadow(0 12px 28px rgba(212,175,55,0.55));
    }
    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
        filter: drop-shadow(0 18px 40px rgba(0,0,0,0.38));
    }
}

/* Header */
.slcs-header {
    min-height: var(--slcs-header-height, 72px);
    background: var(--slcs-header-bg, #111111);
    color: #fff;
    padding: var(--slcs-header-padding-y, 6px) var(--slcs-header-padding-x, 10px);
    font-size: 14px;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.slcs-header-left {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: move;
}

.slcs-header-logo {
    width: var(--slcs-header-logo-size, 34px);
    height: var(--slcs-header-logo-size, 34px);
    border-radius: 50%;
    object-fit: contain;
    background: #fff;
}

.slcs-header-title {
    font-size: var(--slcs-header-title-size, 13px);
    font-weight: 600;
}

.slcs-header-status {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 999px;
    margin-left: 4px;
}

.slcs-header-online {
    background: rgba(22,163,74,0.15);
    color: #bbf7d0;
}

.slcs-header-offline {
    background: rgba(185,28,28,0.2);
    color: #fecaca;
}

/* =========================================
   SUNMI-style theme (requested UI)
   Applied via .slcs-theme-sunmi on #slcs-widget
=========================================*/

.slcs-theme-sunmi .slcs-window {
    width: 340px;
    max-width: 92vw;
    height: 560px;
    background: var(--slcs-window-bg, #ffffff);
    border-radius: 8px;
    border: 0;
    box-shadow: 0 18px 44px rgba(0,0,0,0.30);
}

.slcs-theme-sunmi .slcs-header {
    /* Soft Sheliux pastel header — removes the strong hot-pink bar */
    background: linear-gradient(135deg, rgba(246, 209, 216, 0.92), rgba(251, 228, 232, 0.96)) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255,255,255,0.55);
    padding: var(--slcs-header-padding-y, 6px) var(--slcs-header-padding-x, 10px);
    align-items: center;
    color: #ffffff;
}

.slcs-theme-sunmi .slcs-header-left {
    gap: 10px;
}

.slcs-theme-sunmi .slcs-header-logo {
    width: var(--slcs-header-logo-size, 34px);
    height: var(--slcs-header-logo-size, 34px);
    background: transparent;
    border-radius: 50%;
}

.slcs-theme-sunmi .slcs-header-titles {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
}

.slcs-theme-sunmi .slcs-header-title {
    font-size: var(--slcs-header-title-size, 13px);
    font-weight: 800;
    letter-spacing: 0.2px;
}

.slcs-theme-sunmi .slcs-header-subtitle {
    font-size: var(--slcs-header-subtitle-size, 11px);
    opacity: 0.95;
    margin-top: 2px;
}

.slcs-theme-sunmi .slcs-header-title,
.slcs-theme-sunmi .slcs-header-subtitle {
    color: #ffffff;
    text-shadow: 0 1px 8px rgba(80, 45, 55, 0.20);
}


.slcs-theme-sunmi .slcs-header-actions {
    display: flex;
    gap: 10px;
}

.slcs-theme-sunmi .slcs-header-btn {
    width: var(--slcs-header-button-size, 26px);
    height: var(--slcs-header-button-size, 26px);
    border: 0;
    background: transparent;
    color: #fff;
    font-size: var(--slcs-header-button-font-size, 14px);
    line-height: 1;
    border-radius: 6px;
    cursor: pointer;
}

.slcs-theme-sunmi .slcs-header-btn:hover {
    background: rgba(255,255,255,0.15);
}

.slcs-theme-sunmi .slcs-messages {
    background-color: var(--slcs-messages-bg, #f2f5f7);
    background-image: var(--slcs-messages-bg-image, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 10px 12px;
    overflow: auto;
}

.slcs-theme-sunmi .slcs-time-divider {
    text-align: center;
    font-size: 12px;
    color: rgba(0,0,0,0.55);
    margin: 6px 0 10px;
}

.slcs-theme-sunmi .slcs-system-card {
    background: rgba(0,0,0,0.06);
    border-radius: 10px;
    padding: 12px 12px;
    margin: 8px 0 12px;
    font-size: 13px;
    color: rgba(0,0,0,0.75);
    text-align: center;
}

.slcs-theme-sunmi .slcs-system-card a,
.slcs-theme-sunmi .slcs-system-card .slcs-link {
    color: #d12a2a;
    font-weight: 700;
    text-decoration: none;
}

.slcs-theme-sunmi .slcs-message {
    margin: 10px 0;
}


.slcs-theme-sunmi .slcs-message-name {
    font-size: 12px;
    color: rgba(0,0,0,0.55);
    margin: 0 0 6px 2px;
    font-weight: 600;
    display: block;
}
.slcs-theme-sunmi 
.slcs-theme-sunmi .slcs-message-inner {
    /* All styling handled by JS */
}

/* SUNMI: visitor RIGHT, support LEFT */



.slcs-theme-sunmi .slcs-message-text {
    font-size: 14px;
    line-height: 1.25;
    color: rgba(0,0,0,0.80);
}

.slcs-theme-sunmi .slcs-form {
    border-top: 1px solid rgba(0,0,0,0.08);
    background: #fff;
    padding: 8px 10px 10px;
    position: relative;
}

.slcs-theme-sunmi .slcs-input-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 2px 8px;
}

.slcs-theme-sunmi .slcs-input-toolbar .slcs-tool {
    width: var(--slcs-header-logo-size, 34px);
    height: var(--slcs-header-logo-size, 34px);
    border-radius: 8px;
    border: 0;
    background: transparent;
    font-size: 16px;
    cursor: pointer;
    opacity: 0.9;
}

.slcs-theme-sunmi .slcs-input-toolbar .slcs-tool:hover {
    background: rgba(0,0,0,0.06);
}

/* File inputs hidden off-screen — still clickable by JS */
#slcs-image,
#slcs-image-camera,
#slcs-video-camera {
    position: fixed !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
}

/* Emoji popup */
.slcs-emoji-pop {
    /* Keep the emoji picker INSIDE the chat window, not under the page/body. */
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: var(--slcs-emoji-bottom, 74px);
    box-sizing: border-box;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 -6px 18px rgba(0,0,0,0.14);
    padding: 10px;
    margin: 0;
    display: none;
    z-index: 80;
    max-height: min(220px, 40vh);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
}
.slcs-emoji-pop.is-open { display: block; }
.slcs-emoji-pop.opens-up,
.slcs-emoji-pop.opens-down {
    bottom: var(--slcs-emoji-bottom, 74px);
    top: auto;
}
.slcs-emoji-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
    gap: 4px;
    justify-items: center;
    align-items: center;
}
.slcs-emoji-btn {
    border: 0;
    background: transparent;
    font-size: 20px;
    line-height: 1;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.1s, transform 0.1s;
}
.slcs-emoji-btn:hover {
    background: rgba(0,0,0,0.06);
    transform: scale(1.2);
}

/* Manual transfer card tweak */
.slcs-theme-sunmi .slcs-transfer-card {
    margin-top: 0;
}

.slcs-theme-sunmi .slcs-input-row {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.slcs-theme-sunmi #slcs-input {
    flex: 1;
    resize: none;
    border: 0;
    outline: none;
    min-height: 38px;
    max-height: 90px;
    padding: 10px 8px;
    font-size: 13px;
}

.slcs-theme-sunmi .slcs-send {
    min-width: 70px;
    height: 34px;
    border: 0;
    border-radius: 6px;
    font-weight: 700;
    cursor: pointer;
    background: rgba(255, 138, 66, 0.25);
    color: rgba(0,0,0,0.35);
}

.slcs-theme-sunmi .slcs-send:not([disabled]) {
    background: rgba(255, 138, 66, 0.35);
    color: rgba(0,0,0,0.75);
}

.slcs-close {
    background: transparent;
    border: none;
    font-size: var(--slcs-header-button-font-size, 14px);
    color: #fff;
}

/* Área de mensajes con imagen de fondo y color ajustable */
.slcs-messages {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    font-size: 14px;
    background-color: var(--slcs-messages-bg, #faf7ef);
    background-image: var(--slcs-window-bg-image, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.slcs-message {
    margin-bottom: 10px;
}

.slcs-message-inner {
    /* layout and colors set by JS */
    position: relative;
}

/* alignment handled by JS inline styles */


.slcs-message.admin   .slcs-message-name { text-align: left  !important; }


/* =================================================================
   CHAT MESSAGES — FINAL ALIGNMENT (highest specificity)
   YOU (visitor) = RIGHT   |   SUPPORT/AI (admin) = LEFT
================================================================= */


/* all message layout by JS */

/* =========================================
   AI / Agent tabs — rounded pill buttons restored
=========================================*/
.slcs-channel-tabs {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #ffffff;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    box-sizing: border-box;
}

.slcs-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--slcs-tab-height, 38px);
    padding: 8px var(--slcs-tab-padding-h, 18px);
    border-radius: 999px;
    border: 2px solid rgba(0,0,0,0.10);
    background: #ffffff;
    color: #111111;
    font-size: var(--slcs-tab-font-size, 16px);
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    transition: background-color 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, transform 0.18s ease;
}

.slcs-tab:hover {
    background: #fff7f3;
    border-color: #f5b493;
    transform: translateY(-1px);
}

.slcs-tab.is-active {
    background: #fffaf8;
    border-color: #f4b18f;
    box-shadow: 0 2px 8px rgba(244, 177, 143, 0.22);
    font-weight: 800;
}

.slcs-agent-dot {
    width: var(--slcs-agent-dot-size, 10px);
    height: var(--slcs-agent-dot-size, 10px);
    min-width: var(--slcs-agent-dot-size, 10px);
    min-height: var(--slcs-agent-dot-size, 10px);
    border-radius: 999px;
    display: inline-block;
    background: #dc5a48;
    box-shadow: 0 0 0 0 rgba(220, 90, 72, var(--slcs-agent-pulse-alpha, 0.18));
}

.slcs-agent-dot.is-online {
    background: #21b86b;
}

.slcs-tab.is-active .slcs-agent-dot {
    animation: slcs-agent-dot-pulse var(--slcs-agent-pulse-duration, 1.7s) ease-in-out infinite;
}

@keyframes slcs-agent-dot-pulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(220, 90, 72, var(--slcs-agent-pulse-alpha, 0.18)); }
    70% { transform: scale(var(--slcs-agent-pulse-scale, 1.20)); box-shadow: 0 0 0 var(--slcs-agent-pulse-spread, 7px) rgba(220, 90, 72, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(220, 90, 72, 0); }
}

.slcs-theme-sunmi .slcs-channel-tabs {
    padding: 12px 16px;
    gap: 12px;
    background: rgba(255,255,255,0.96);
    border-bottom: 1px solid rgba(0,0,0,0.07);
}

.slcs-theme-sunmi .slcs-tab {
    min-height: var(--slcs-tab-height, 36px);
    padding: 8px var(--slcs-tab-padding-h, 18px);
    border-radius: 999px;
    background: #ffffff;
    border: 2px solid #e3e3e3;
    color: #111111;
    font-size: var(--slcs-tab-font-size, 15px);
    font-weight: 500;
}

.slcs-theme-sunmi .slcs-tab.is-active {
    border-color: #f2b095;
    background: #fffaf8;
    font-weight: 800;
    box-shadow: 0 2px 8px rgba(242, 176, 149, 0.18);
}

.slcs-theme-sunmi .slcs-agent-dot {
    background: #dc5a48; /* offline = red */
}
.slcs-theme-sunmi .slcs-agent-dot.is-online {
    background: #21b86b; /* online = green */
    box-shadow: 0 0 0 0 rgba(33, 184, 107, 0.18);
}

/* =========================================
   Product cards inside chat (Amazon-style compact fit)
=========================================*/
/* ── Product Cards (Amazon-style) ──────────────────────────────── */
.slcs-product-results-title {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.slcs-product-card-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
}

/* Card shell */
.slcs-message-text .slcs-product-card,
.slcs-product-card {
    width: 100%;
    max-width: 340px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 0;
    border: 1px solid var(--slcs-product-card-border, #e2e4ea);
    border-radius: 14px;
    background: var(--slcs-product-card-bg, #fff);
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    overflow: hidden;
    transition: box-shadow .15s;
}
.slcs-product-card:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,0.13);
}

/* Left: image column */
.slcs-product-card-img {
    width: 110px;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f7f8fa;
    border-right: 1px solid #f0f1f4;
    overflow: hidden;
    text-decoration: none !important;
    flex-shrink: 0;
    position: relative;
}
.slcs-product-card-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,.08) 0%, transparent 60%);
    pointer-events: none;
}

.slcs-product-card-img img,
.slcs-product-card-image {
    max-width: 88% !important;
    max-height: 88% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block;
    transition: transform .2s;
}
.slcs-product-card-img:hover img { transform: scale(1.05); }

/* Right: content column */
.slcs-product-card-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 11px 13px 11px 12px;
}

/* Title */
.slcs-product-card-title,
.slcs-product-card-title a {
    color: var(--slcs-product-card-title, #0f1115) !important;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
    text-decoration: none !important;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.slcs-product-card-title a:hover { text-decoration: underline !important; }

/* Stars placeholder */
.slcs-product-card-stars {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-top: 4px;
}
.slcs-product-card-stars svg {
    width: 11px;
    height: 11px;
    fill: #f59e0b;
}
.slcs-product-card-stars span {
    font-size: 11px;
    color: #6b7280;
}

/* Price */
.slcs-product-card-price {
    margin-top: 5px;
    color: var(--slcs-product-card-price, #111827);
    font-size: 17px;
    font-weight: 800;
    line-height: 1.15;
}

/* Stock */
.slcs-product-card-stock {
    margin-top: 3px;
    font-size: 11.5px;
    font-weight: 600;
}
.slcs-product-card-stock.is-in-stock  { color: #16803c; }
.slcs-product-card-stock.is-out-stock { color: #b42318; }

/* Free shipping badge */
.slcs-product-card-shipping {
    margin-top: 3px;
    font-size: 11px;
    color: #16803c;
    font-weight: 500;
}

/* Buttons */
.slcs-product-card-actions {
    display: flex;
    gap: 6px;
    flex-wrap: nowrap;
    margin-top: auto;
    padding-top: 9px;
}

.slcs-product-card-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 33px;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none !important;
    white-space: nowrap;
    box-sizing: border-box;
    cursor: pointer;
    transition: filter .12s, transform .1s;
}
.slcs-product-card-btn:active { transform: scale(.97); }

.slcs-product-card-cart {
    background: var(--slcs-product-card-btn-bg, #ffd814);
    color: var(--slcs-product-card-btn-text, #0f1115) !important;
    border-color: #f0c808;
}
.slcs-product-card-cart:hover { filter: brightness(1.05); }

.slcs-product-card-view {
    background: #fff;
    color: #0f1115 !important;
    border-color: #d1d5db;
}
.slcs-product-card-view:hover { background: #f9fafb; }

/* Helper text below cards */
.slcs-product-help-text {
    margin-top: 7px;
    font-size: 11.5px;
    line-height: 1.4;
    color: #9ca3af;
}

/* Category chips */
.slcs-product-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 5px 0 8px;
}
.slcs-product-chip-list a {
    text-decoration: none !important;
    border: 1px solid #e5e7eb;
    padding: 4px 10px;
    border-radius: 999px;
    background: #f9fafb;
    color: #374151 !important;
    font-size: 11.5px;
    transition: background .12s;
}
.slcs-product-chip-list a:hover { background: #f3f4f6; }

@media (max-width: 420px) {
    .slcs-message-text .slcs-product-card,
    .slcs-product-card {
        grid-template-columns: 90px minmax(0, 1fr);
        padding: 10px;
        max-width: 100%;
    }
    .slcs-product-card-img {
        width: 82px;
        height: 100px;
    }
    .slcs-product-card-title,
    .slcs-product-card-title a {
        font-size: 13px;
    }
    .slcs-product-card-price {
        font-size: 15px;
    }
    .slcs-product-card-btn {
        width: 100%;
        min-width: 0;
    }
}

/* =========================================
   v2.9 — Wider chat messages + responsive order cards
   Keeps product/order cards inside the chat window.
=========================================*/
.slcs-msg-row > div {
    max-width: 94% !important;
    width: 94% !important;
    box-sizing: border-box !important;
}
.slcs-msg-row .slcs-message-text,
.slcs-message-text,
.slcs-console-msg-text {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}
.slcs-message-text .slcs-order-card,
.slcs-order-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}
.slcs-order-card table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
}
.slcs-order-card td,
.slcs-order-card th {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    white-space: normal !important;
}
.slcs-order-card img,
.slcs-product-card img,
.slcs-product-card-image,
.slcs-message-image img {
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
}
.slcs-product-card-list {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}
.slcs-product-card {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
@media (max-width: 420px) {
    .slcs-msg-row {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
    .slcs-msg-row > div {
        max-width: 98% !important;
        width: 98% !important;
    }
    .slcs-order-card td:first-child {
        width: 54px !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
    }
    .slcs-order-card td:last-child {
        width: 72px !important;
        font-size: 12px !important;
    }
}

/* Sheliux v3.0 - configurable delivered/read message colors */
.slcs-message-status.slcs-status-delivered { color: var(--slcs-status-delivered, #999999) !important; }
.slcs-message-status.slcs-status-read { color: var(--slcs-status-read, #34B7F1) !important; }

/* =========================================
   v3.1 - Smart responsive chat bubbles
   Text bubbles fit their content; rich messages (orders/products/images) expand
   to the chat width while never exceeding the chat window.
=========================================*/
.slcs-window,
.slcs-messages,
.slcs-message,
.slcs-msg-row,
.slcs-message-col,
.slcs-message-bubble,
.slcs-message-text {
    box-sizing: border-box !important;
}
.slcs-window,
.slcs-messages {
    max-width: 100vw !important;
    overflow-x: hidden !important;
}
.slcs-msg-row {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
}
.slcs-message-col {
    max-width: 82% !important;
    width: fit-content !important;
    min-width: 44px !important;
}
.slcs-message-col.has-rich-content,
.slcs-msg-rich .slcs-message-col {
    width: 96% !important;
    max-width: 96% !important;
    min-width: 0 !important;
}
.slcs-message-bubble {
    width: auto !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}
.slcs-message-bubble.has-card,
.slcs-msg-rich .slcs-message-bubble {
    width: 100% !important;
}
.slcs-message-bubble.has-card .slcs-message-text,
.slcs-msg-rich .slcs-message-text {
    width: 100% !important;
    max-width: 100% !important;
}
.slcs-message-bubble img,
.slcs-message-bubble video,
.slcs-message-bubble audio,
.slcs-message-bubble iframe {
    max-width: 100% !important;
    height: auto !important;
}
.slcs-message-bubble table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
}
.slcs-message-bubble td,
.slcs-message-bubble th {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}
.slcs-msg-rich .slcs-product-card,
.slcs-msg-rich .slcs-order-card,
.slcs-message-bubble.has-card .slcs-product-card,
.slcs-message-bubble.has-card .slcs-order-card {
    width: 100% !important;
    max-width: 100% !important;
}
@media (max-width: 420px) {
    .slcs-msg-row { padding-left: 6px !important; padding-right: 6px !important; }
    .slcs-message-col { max-width: 88% !important; }
    .slcs-message-col.has-rich-content,
    .slcs-msg-rich .slcs-message-col { width: 98% !important; max-width: 98% !important; }
}

/* Closed bubble new-message notification */
#slcs-bubble-notice {
    position: fixed;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    min-width: 188px;
    max-width: 275px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 11px;
    border-radius: 22px;
    background: linear-gradient(135deg, #ffffff 0%, #fff7fb 48%, #eef6ff 100%);
    color: #1f2937;
    border: 1px solid rgba(255, 255, 255, 0.72);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.22), 0 2px 10px rgba(236, 72, 153, 0.14);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-8px) translateY(4px) scale(0.96);
    transition: opacity .18s ease, transform .18s ease;
    z-index: 1000001;
    backdrop-filter: blur(10px);
}

#slcs-bubble-notice.is-agent {
    background: linear-gradient(135deg, #ffffff 0%, #fff1f8 45%, #f0f7ff 100%);
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.24), 0 0 0 4px rgba(236, 72, 153, 0.10), 0 0 26px rgba(236, 72, 153, 0.18);
}

#slcs-bubble-notice.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0) translateY(0) scale(1);
    animation: slcs-bubble-notice-pop .42s ease;
}

#slcs-bubble-notice::before {
    content: "";
    position: absolute;
    left: -5px;
    bottom: 16px;
    width: 12px;
    height: 12px;
    background: inherit;
    transform: rotate(45deg);
    box-shadow: -2px 2px 4px rgba(15, 23, 42, 0.05);
}

.slcs-bubble-notice-avatar {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #fce7f3, #dbeafe);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.75), 0 6px 16px rgba(15,23,42,.12);
    font-size: 17px;
}

.slcs-bubble-notice-body {
    position: relative;
    z-index: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1 1 auto;
}

.slcs-bubble-notice-title {
    font-size: 12px;
    font-weight: 900;
    color: #111827;
    letter-spacing: -0.01em;
}

.slcs-bubble-notice-dot {
    position: absolute;
    z-index: 2;
    right: -5px;
    top: -5px;
    flex: 0 0 auto;
    min-width: 21px;
    height: 21px;
    padding: 0 5px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ef4444;
    color: #ffffff;
    font-size: 11px;
    font-weight: 900;
    box-sizing: border-box;
}

.slcs-bubble-notice-text {
    position: relative;
    z-index: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #4b5563;
    font-size: 11px;
    font-weight: 700;
}

.slcs-bubble.slcs-has-unread {
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.12), 0 0 18px var(--slcs-bubble-glow, rgba(212,175,55,0.95));
}

@keyframes slcs-bubble-notice-pop {
    0% { transform: translateX(-8px) translateY(4px) scale(0.86); }
    65% { transform: translateX(0) translateY(0) scale(1.04); }
    100% { transform: translateX(0) translateY(0) scale(1); }
}

@media (max-width: 480px) {
    #slcs-bubble-notice {
        max-width: min(235px, calc(100vw - 32px));
        border-radius: 16px;
    }

    #slcs-bubble-notice::before {
        left: 28px;
        bottom: -5px;
    }
}

/* v4.2.8 - Emoji picker hard isolation. Prevent theme/plugin CSS from patching buttons, size, position or visibility. */
.slcs-window #slcs-emoji-pop.slcs-emoji-pop { position:absolute !important; left:10px !important; right:10px !important; top:auto !important; bottom:var(--slcs-emoji-bottom,74px) !important; box-sizing:border-box !important; display:none !important; visibility:visible !important; opacity:1 !important; transform:none !important; z-index:9999 !important; pointer-events:auto !important; background:#fff !important; border:1px solid #e5e7eb !important; border-radius:14px !important; box-shadow:0 -6px 18px rgba(0,0,0,.14) !important; padding:10px 12px !important; margin:0 !important; max-height:min(220px,40vh) !important; overflow-y:auto !important; overflow-x:hidden !important; }
.slcs-window #slcs-emoji-pop.slcs-emoji-pop.is-open { display:block !important; }
.slcs-window #slcs-emoji-pop .slcs-emoji-grid { display:grid !important; grid-template-columns:repeat(auto-fill,minmax(34px,1fr)) !important; gap:4px !important; justify-items:center !important; align-items:center !important; }
.slcs-window #slcs-emoji-pop .slcs-emoji-btn { appearance:none !important; -webkit-appearance:none !important; box-sizing:border-box !important; width:34px !important; height:34px !important; min-width:34px !important; min-height:34px !important; max-width:34px !important; max-height:34px !important; display:flex !important; align-items:center !important; justify-content:center !important; padding:0 !important; margin:0 !important; border:0 !important; border-radius:8px !important; background:transparent !important; box-shadow:none !important; outline:none !important; color:inherit !important; text-decoration:none !important; text-transform:none !important; letter-spacing:normal !important; font-size:20px !important; line-height:1 !important; font-weight:400 !important; font-family:Apple Color Emoji, Segoe UI Emoji, Noto Color Emoji, EmojiOne Color, sans-serif !important; cursor:pointer !important; }
.slcs-window #slcs-emoji-pop .slcs-emoji-btn:hover, .slcs-window #slcs-emoji-pop .slcs-emoji-btn:focus { background:rgba(0,0,0,.06) !important; transform:scale(1.16) !important; }
.slcs-window .slcs-input-toolbar .slcs-tool[data-tool="emoji"] { font-family:Apple Color Emoji, Segoe UI Emoji, Noto Color Emoji, sans-serif !important; }

/* v4.4.33 - Emoji font fallback for chat text/input without changing the UI font stack. */
.slcs-window .slcs-message,
.slcs-window .slcs-message *,
.slcs-window #slcs-message,
.slcs-window .slcs-input {
    font-family: inherit, Apple Color Emoji, Segoe UI Emoji, Noto Color Emoji, EmojiOne Color, sans-serif;
}

/* Sheliux secure attachments */
.slcs-file-security {
    margin-top: 6px;
    padding: 5px 8px;
    border-radius: 10px;
    font-size: 11px;
    line-height: 1.25;
    background: #dcfce7;
    border: 1px solid #86efac;
    color: #14532d;
    font-weight: 700;
}
.slcs-file-security.blocked,
.slcs-file-security.warning {
    background: rgba(245, 158, 11, 0.14);
    border-color: rgba(245, 158, 11, 0.40);
    color: #92400e;
}

/* Terms gate before using chat */
.slcs-terms-box{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;padding:8px 12px;border-top:1px solid rgba(212,175,55,.25);background:rgba(255,255,255,.85);font-size:12px;color:#374151;}
.slcs-terms-box label{display:flex;align-items:center;gap:6px;line-height:1.3;}
.slcs-terms-box a{color:#8a6a12;text-decoration:underline;font-weight:700;} .slcs-terms-text{line-height:1.3;} .slcs-terms-links{display:flex;gap:8px;flex-wrap:wrap;}
.slcs-terms-warning{animation:slcsTermsShake .25s linear 0s 2;background:#fff1f2!important;color:#991b1b!important;}
@keyframes slcsTermsShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.slcs-terms-box.slcs-terms-accepted{display:none!important;}


/* Manual agent location consent modal */
.slcs-location-consent-modal{
  position:absolute;
  inset:0;
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  background:rgba(15,23,42,.42);
  backdrop-filter:blur(3px);
}
.slcs-location-consent-card{
  width:min(92%,330px);
  background:#fff;
  border:2px solid #f97316;
  border-radius:18px;
  box-shadow:0 18px 48px rgba(0,0,0,.28);
  padding:18px;
  text-align:center;
  color:#111827;
}
.slcs-location-consent-icon{font-size:34px;margin-bottom:6px;}
.slcs-location-consent-title{font-weight:800;font-size:16px;margin-bottom:8px;color:var(--slcs-agent-accent,#D4AF37);}
.slcs-location-consent-text{font-size:13px;line-height:1.45;color:var(--slcs-agent-card-text,#374151);margin-bottom:14px;white-space:pre-wrap;}
.slcs-location-consent-actions{display:flex;flex-direction:column;gap:8px;}
.slcs-location-consent-accept,
.slcs-location-consent-decline{
  border:0;
  border-radius:999px;
  padding:10px 14px;
  font-weight:800;
  cursor:pointer;
}
.slcs-location-consent-accept{background:var(--slcs-agent-accept-bg,#D4AF37);color:var(--slcs-agent-accept-text,#1f1f23);box-shadow:0 8px 18px rgba(15,23,42,.18);}
.slcs-location-consent-decline{background:var(--slcs-agent-decline-bg,#f3f4f6);color:var(--slcs-agent-decline-text,#374151);}
.slcs-location-toast{
  position:absolute;
  left:14px;
  right:14px;
  bottom:84px;
  z-index:100000;
  background:#111827;
  color:#fff;
  padding:10px 12px;
  border-radius:14px;
  font-size:12px;
  line-height:1.35;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .2s ease,transform .2s ease;
  box-shadow:0 8px 22px rgba(0,0,0,.22);
}
.slcs-location-toast.is-visible{opacity:1;transform:translateY(0);}

/* =========================================================
   v4.4.7 compact client chat channel tabs
   Keeps IA / Agent buttons visible and functional while reducing height.
========================================================= */
.slcs-channel-tabs,
.slcs-theme-sunmi .slcs-channel-tabs {
    min-height: 32px !important;
    padding: 3px 10px !important;
    gap: 6px !important;
    align-items: center !important;
}

.slcs-tab,
.slcs-theme-sunmi .slcs-tab {
    min-height: 26px !important;
    height: 26px !important;
    padding: 3px 10px !important;
    gap: 5px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    border-width: 1px !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
}

.slcs-agent-dot,
.slcs-theme-sunmi .slcs-agent-dot {
    width: 8px !important;
    height: 8px !important;
    min-width: 8px !important;
    min-height: 8px !important;
}

@media (max-width: 480px) {
    .slcs-channel-tabs,
    .slcs-theme-sunmi .slcs-channel-tabs {
        min-height: 30px !important;
        padding: 2px 8px !important;
        gap: 5px !important;
    }

    .slcs-tab,
    .slcs-theme-sunmi .slcs-tab {
        min-height: 25px !important;
        height: 25px !important;
        padding: 3px 9px !important;
        font-size: 11px !important;
    }
}


/* ===== COMPACTAR BOTONES AI / AGENT ===== */
.slcs-channel-tabs {
    padding: 0 3px !important;
    margin: 0 !important;
    display: flex;
    align-items: center;
    gap: 3px;
    height: auto !important;
}

.slcs-tab {
    height: 18px !important;
    line-height: 18px !important;
    padding: 0 7px !important;
    font-size: 10px !important;
    border-radius: 5px;
    margin: 0 !important;
}

.slcs-tab.is-active {
    font-weight: 600;
}

.slcs-agent-dot {
    width: 5px !important;
    height: 5px !important;
    min-width: 5px !important;
    min-height: 5px !important;
    border-radius: 999px !important;
    display: inline-block !important;
    background: #dc5a48 !important; /* offline = red */
    margin-left: 3px;
    vertical-align: middle;
    transition: background 0.3s ease;
}
.slcs-agent-dot.is-online,
.slcs-theme-sunmi .slcs-agent-dot.is-online {
    background: #21b86b !important; /* online = green */
    box-shadow: 0 0 0 0 rgba(33, 184, 107, 0.18) !important;
}

/* ===== BUBBLE COLORS (AI / AGENT) ===== */
:root {
    --slcs-ai-bubble: #e6f0ff;
    --slcs-agent-bubble: #f5f5f5;
}

.slcs-message.ai {
    background: var(--slcs-ai-bubble) !important;
}

.slcs-message.agent {
    background: var(--slcs-agent-bubble) !important;
}


/* ===== SLCS TOOLBAR SLIM PREMIUM + EMOJIS MODERNOS ===== */
.slcs-form .slcs-input-toolbar {
    min-height: 24px !important;
    height: 24px !important;
    padding: 1px 6px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,.72) !important;
    border: 1px solid rgba(15,23,42,.06) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 14px rgba(15,23,42,.06) !important;
}

.slcs-form .slcs-input-toolbar .slcs-tool {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: transparent !important;
    color: #111827 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    font-size: 0 !important;
    cursor: pointer !important;
    transition: transform .16s ease, background .16s ease, box-shadow .16s ease !important;
}

.slcs-form .slcs-input-toolbar .slcs-tool:hover {
    background: rgba(15,23,42,.07) !important;
    transform: translateY(-1px) scale(1.04);
    box-shadow: 0 3px 10px rgba(15,23,42,.08) !important;
}

.slcs-form .slcs-input-toolbar .slcs-tool:active {
    transform: scale(.96);
}

.slcs-form .slcs-input-toolbar .slcs-tool img.emoji,
.slcs-form .slcs-input-toolbar .slcs-tool .emoji {
    display: none !important;
}

.slcs-form .slcs-input-toolbar .slcs-tool::before {
    display: block;
    font-size: 15px;
    line-height: 1;
    font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
}

.slcs-form .slcs-input-toolbar .slcs-tool[data-tool="emoji"]::before { content: "😊"; }
.slcs-form .slcs-input-toolbar .slcs-tool[data-tool="image"]::before { content: "📸"; }
.slcs-form .slcs-input-toolbar .slcs-tool[data-tool="video"]::before { content: "🎬"; }
.slcs-form .slcs-input-toolbar .slcs-tool[data-tool="location"]::before { content: none !important; }
.slcs-form .slcs-input-toolbar .slcs-tool[data-tool="clear"]::before { content: "🧹"; }

.slcs-form .slcs-input-toolbar .slcs-tool-location {
    color: #0f766e !important;
}
.slcs-form .slcs-input-toolbar .slcs-tool-location-map,
.slcs-location-maps-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: currentColor !important;
}
.slcs-form .slcs-input-toolbar .slcs-tool-location-map svg {
    width: 17px !important;
    height: 17px !important;
    display: block !important;
}
.slcs-form .slcs-input-toolbar .slcs-tool-location-img {
    width: 17px !important;
    height: 17px !important;
    object-fit: contain !important;
    border-radius: 5px !important;
    display: block !important;
}
.slcs-location-maps-icon svg {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

/* The mute button icon changes by state. Keep pseudo-element so the existing UI style stays intact. */
.slcs-form .slcs-input-toolbar #slcs-mute-btn { font-size: 0 !important; }
.slcs-form .slcs-input-toolbar #slcs-mute-btn::before { content: "🔔"; }
.slcs-form .slcs-input-toolbar #slcs-mute-btn[data-muted="1"]::before { content: "🔇"; }
.slcs-form .slcs-input-toolbar #slcs-mute-btn[data-muted="0"]::before { content: "🔔"; }

.slcs-form .slcs-input-row {
    margin-top: 4px !important;
}

.slcs-form .slcs-input-row textarea#slcs-input {
    min-height: 26px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

.slcs-form .slcs-send {
    min-height: 26px !important;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
}



/* ===== Separación premium entre emojis del toolbar ===== */
.slcs-form .slcs-input-toolbar {
    gap: 10px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
}

.slcs-form .slcs-input-toolbar .slcs-tool {
    margin-left: 1px !important;
    margin-right: 1px !important;
}

/* En pantallas muy pequeñas, baja un poco la separación para que no se corte */
@media (max-width: 420px) {
    .slcs-form .slcs-input-toolbar {
        gap: 7px !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
}


/* ===== Burbujas configurables desde Apariencia ===== */
:root {
    --slcs-ai-bubble: #e6f0ff;
    --slcs-agent-bubble: #f5f5f5;
}

/* IA / bot */
.slcs-message.ai,
.slcs-message.is-ai,
.slcs-message[data-role="ai"],
.slcs-msg-ai,
.slcs-bubble-ai {
    background: var(--slcs-ai-bubble) !important;
}

/* Customer service / agente / humano */
.slcs-message.agent,
.slcs-message.human,
.slcs-message.is-agent,
.slcs-message[data-role="agent"],
.slcs-message[data-role="human"],
.slcs-msg-agent,
.slcs-msg-human,
.slcs-bubble-agent {
    background: var(--slcs-agent-bubble) !important;
}


/* ===== Colores configurables de burbujas del chat cliente ===== */
:root {
    --slcs-ai-bubble: #e6f0ff;
    --slcs-agent-bubble: #f5f5f5;
}

.slcs-message.ai,
.slcs-message.is-ai,
.slcs-message[data-role="ai"],
.slcs-message[data-sender="ai"],
.slcs-msg-ai,
.slcs-bubble-ai,
.slcs-chat-message-ai,
.slcs-message-bot {
    background: var(--slcs-ai-bubble) !important;
}

.slcs-message.agent,
.slcs-message.human,
.slcs-message.is-agent,
.slcs-message.is-human,
.slcs-message[data-role="agent"],
.slcs-message[data-role="human"],
.slcs-message[data-sender="agent"],
.slcs-message[data-sender="human"],
.slcs-msg-agent,
.slcs-msg-human,
.slcs-bubble-agent,
.slcs-chat-message-agent,
.slcs-chat-message-human {
    background: var(--slcs-agent-bubble) !important;
}


/* ===== FIX IMAGEN DE CABECERA - CHAT CLIENTE ===== */
.slcs-window .slcs-header,
.slcs-chat-window .slcs-header,
.slcs-theme-sunmi .slcs-header,
#slcs-window .slcs-header {
    position: relative !important;
    overflow: hidden !important;
    min-height: var(--slcs-header-height, 72px) !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

/* Overlay premium para que el texto/logo siga legible sobre la imagen */
.slcs-window .slcs-header::after,
.slcs-chat-window .slcs-header::after,
.slcs-theme-sunmi .slcs-header::after,
#slcs-window .slcs-header::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(135deg, rgba(0,0,0,.20), rgba(0,0,0,.05)) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

/* Mantiene el contenido del header por encima de la imagen/overlay */
.slcs-window .slcs-header > *,
.slcs-chat-window .slcs-header > *,
.slcs-theme-sunmi .slcs-header > *,
#slcs-window .slcs-header > * {
    position: relative !important;
    z-index: 1 !important;
}

/* Si el tema SUNMI usa otra cabecera interna */
.slcs-sunmi-header,
.slcs-header-sunmi {
    position: relative !important;
    overflow: hidden !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}


/* ===== HEADER IMAGE HARD FIX 4.4.23 ===== */
#slcs-widget .slcs-header {
    background-color: var(--slcs-header-bg, #f6d1d8) !important;
    background-image: var(--slcs-header-bg-image) !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    min-height: var(--slcs-header-height, 72px) !important;
    box-sizing: border-box !important;
    position: relative !important;
    overflow: hidden !important;
}

#slcs-widget .slcs-header[style*="background-image"] {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

#slcs-widget .slcs-header::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(135deg, rgba(0,0,0,.18), rgba(0,0,0,.03)) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

#slcs-widget .slcs-header-left,
#slcs-widget .slcs-header-actions {
    position: relative !important;
    z-index: 2 !important;
}

/* Preview admin: que se vea igual al cliente */
#slcs-pv-header {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}


/* ===== GROUPED CHAT COLORS 4.4.25 ===== */
:root {
    --slcs-ai-bubble: #e6f0ff;
    --slcs-agent-bubble: #f5f5f5;
    --slcs-customer-unread-color: #ef4444;
}
.slcs-message.ai,
.slcs-message.is-ai,
.slcs-message[data-role="ai"],
.slcs-message[data-sender="ai"],
.slcs-msg-ai,
.slcs-bubble-ai,
.slcs-chat-message-ai,
.slcs-message-bot {
    background: var(--slcs-ai-bubble) !important;
}
.slcs-message.agent,
.slcs-message.human,
.slcs-message.is-agent,
.slcs-message.is-human,
.slcs-message[data-role="agent"],
.slcs-message[data-role="human"],
.slcs-message[data-sender="agent"],
.slcs-message[data-sender="human"],
.slcs-msg-agent,
.slcs-msg-human,
.slcs-bubble-agent,
.slcs-chat-message-agent,
.slcs-chat-message-human {
    background: var(--slcs-agent-bubble) !important;
}
.slcs-unread,
.slcs-unread-badge,
.slcs-chat-unread,
.slcs-message-status.unread {
    color: var(--slcs-customer-unread-color) !important;
}


/* ===== HEADER SLIM PRO (4.4.26) ===== */
.slcs-header {
    min-height: var(--slcs-header-height, 72px) !important;
    height: auto !important;
    padding: var(--slcs-header-padding-y, 6px) var(--slcs-header-padding-x, 10px) !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.slcs-header-logo {
    width: var(--slcs-header-logo-size, 34px) !important;
    height: var(--slcs-header-logo-size, 34px) !important;
    border-radius: 50%;
}

.slcs-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.slcs-header-titles {
    line-height: 1.1;
}

.slcs-header-title {
    font-size: var(--slcs-header-title-size, 13px);
    font-weight: 600;
}

.slcs-header-subtitle {
    font-size: var(--slcs-header-subtitle-size, 11px);
    opacity: 0.85;
}

.slcs-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.slcs-header-btn {
    font-size: var(--slcs-header-button-font-size, 14px) !important;
    width: var(--slcs-header-button-size, 26px);
    height: var(--slcs-header-button-size, 26px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.slcs-header-btn:hover {
    background: rgba(255,255,255,0.15);
}

/* ── Video player in chat ──────────────────────────────────────── */
.slcs-message-video {
    width: 100%;
    max-width: 100%;
}
.slcs-message-video video {
    width: 100%;
    max-width: 100%;
    max-height: 240px;
    border-radius: 10px;
    background: #000;
    display: block;
    object-fit: contain;
}
.slcs-console-msg-video {
    width: 100%;
    max-width: 320px;
}
.slcs-console-msg-video video {
    width: 100%;
    max-height: 220px;
    border-radius: 10px;
    background: #000;
    display: block;
    object-fit: contain;
}

/* ── Image/Video messages ─────────────────────────────────────── */
.slcs-message-image {
    width: 100%;
    max-width: 100%;
    border-radius: 10px;
    overflow: hidden;
}
.slcs-message-image img {
    max-width: 100%;
    border-radius: 10px;
    display: block;
}
.slcs-img-download {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    padding: 4px 10px;
    background: rgba(212,175,55,0.12);
    border: 1px solid rgba(212,175,55,0.35);
    border-radius: 999px;
    color: #92710b;
    cursor: pointer;
    font-weight: 600;
    margin-top: 4px;
    text-decoration: none;
    transition: background 0.15s;
}
.slcs-img-download:hover {
    background: rgba(212,175,55,0.25);
}

/* ── Lightbox (fullscreen image viewer) ──────────────────────── */
#slcs-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    z-index: 9999999;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color-scheme: light;
}
#slcs-lightbox.open {
    display: flex;
}
#slcs-lightbox-bar {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0 16px;
}

/* Production UX additions */
.slcs-char-counter{font-size:11px;color:#6b7280;align-self:center;margin:0 6px;white-space:nowrap}.slcs-char-counter.is-near-limit{color:#dc2626;font-weight:700}.slcs-send.is-sending{opacity:.75;pointer-events:none}.slcs-desktop-unread-badge{position:absolute;right:-4px;top:-4px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--slcs-customer-unread,#ef4444);color:#fff;font-size:11px;font-weight:800;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(0,0,0,.22);z-index:4}.slcs-agent-offline-notice{border-color:#fed7aa!important;background:#fff7ed!important;color:#9a3412!important}.slcs-typing{display:flex;align-items:center;gap:4px;padding:8px 11px;border-radius:16px;background:#f3f4f6;width:max-content;margin:6px 0}.slcs-typing span{width:6px;height:6px;border-radius:50%;background:#9ca3af;display:block;animation:slcsTyping 1.2s infinite ease-in-out}.slcs-typing span:nth-child(2){animation-delay:.15s}.slcs-typing span:nth-child(3){animation-delay:.3s}@keyframes slcsTyping{0%,80%,100%{opacity:.35;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}.slcs-emoji-search{width:calc(100% - 14px);margin:7px;border:1px solid #e5e7eb;border-radius:10px;padding:7px 9px;font-size:13px;box-sizing:border-box;background:#fff;color:#111827}
@media (min-width: 769px){.slcs-desktop-unread-badge{display:inline-flex}}


/* Production UX fixes: typing indicator, retry banner, history pagination */
.slcs-typing-wrap {
    display: flex;
    justify-content: flex-start;
    margin: 8px 0;
}
.slcs-typing-bubble {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 12px;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 2px 10px rgba(15,23,42,0.08);
    border: 1px solid rgba(15,23,42,0.06);
    max-width: 86%;
}
.slcs-typing-label {
    font-size: 12px;
    font-weight: 700;
    color: rgba(17,24,39,.68);
    white-space: nowrap;
}
.slcs-typing-dots {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.slcs-typing-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #9ca3af;
    opacity: .45;
    animation: slcsTypingPulse 1.2s infinite ease-in-out;
}
.slcs-typing-dot:nth-child(2) { animation-delay: .15s; }
.slcs-typing-dot:nth-child(3) { animation-delay: .3s; }
@keyframes slcsTypingPulse {
    0%, 80%, 100% { transform: translateY(0); opacity: .35; }
    40% { transform: translateY(-3px); opacity: 1; }
}
.slcs-send-retry {
    margin: 8px auto;
    padding: 8px 10px;
    max-width: 92%;
    border-radius: 12px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #9a3412;
    font-size: 12px;
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
}
.slcs-send-retry button,
.slcs-load-more {
    border: 0;
    border-radius: 999px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 12px;
}
.slcs-send-retry button {
    background: #9a3412;
    color: #fff;
}
.slcs-load-more {
    display: block;
    margin: 8px auto 12px;
    background: #f3f4f6;
    color: #374151;
}
.slcs-load-more:disabled {
    opacity: .6;
    cursor: wait;
}
.slcs-emoji-search {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 8px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 7px 9px;
    font-size: 13px;
}
.slcs-emoji-empty {
    grid-column: 1 / -1;
    padding: 10px;
    font-size: 12px;
    color: #6b7280;
    text-align: center;
}


/* Shared color input helpers required by diagnostics/admin previews */
.slcs-color-wrap { display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; }
.slcs-color-swatch { width:32px; height:32px; border-radius:8px; border:2px solid rgba(0,0,0,0.15); cursor:pointer; flex-shrink:0; box-shadow:inset 0 1px 3px rgba(0,0,0,0.1); }
.slcs-color-swatch:hover { transform:scale(1.1); }

/* Three separated surfaces: customer IA chat, customer Agent chat, and Admin Live Console. */
.slcs-surface-card{display:flex;flex-direction:column;gap:6px;line-height:1.45;word-break:break-word;}
.slcs-surface-card .slcs-surface-label{display:block;font-size:12px;line-height:1.1;opacity:.78;}
.slcs-surface-ai{background:var(--slcs-ai-bubble,var(--slcs-ai-bubble-bg,#e6f0ff));}
.slcs-surface-agent,.slcs-transfer-card{background:var(--slcs-agent-bubble,var(--slcs-agent-bubble-bg,#f5f5f5));}
.slcs-messages[data-channel="ai"] [data-slcs-surface="human"]{display:none!important;}
.slcs-messages[data-channel="human"] [data-slcs-surface="ai"]{display:none!important;}
.slcs-messages[data-channel="human"] [data-slcs-surface="human"]{display:flex;}
.slcs-messages[data-channel="ai"] [data-slcs-surface="ai"]{display:flex;}

/* Separated surface banners: AI customer and Agent customer */
.slcs-surface-banner {
    display: block;
    margin: 0 0 8px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(15,25,35,0.08);
    font-size: 12px;
    line-height: 1.35;
    font-weight: 600;
    color: #334155;
}
.slcs-surface-ai .slcs-surface-banner {
    border-color: rgba(37,99,235,0.18);
}
.slcs-surface-agent .slcs-surface-banner {
    border-color: rgba(22,163,74,0.18);
}

/* Botón "Nuevo mensaje" dentro de la ventana del chat */
.slcs-window #slcs-new-indicator {
    position: absolute;
    left: 50%;
    bottom: 84px;
    transform: translateX(-50%);
    display: none;
    z-index: 30;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,0.08);
    background: rgba(17, 24, 39, 0.92);
    color: #ffffff;
    box-shadow: 0 8px 22px rgba(0,0,0,0.22);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.slcs-window #slcs-new-indicator:hover,
.slcs-window #slcs-new-indicator:focus {
    background: rgba(0,0,0,0.96);
    outline: none;
}
.slcs-window #slcs-new-indicator:active {
    transform: translateX(-50%) scale(0.98);
}

/* ── Lunch break active state ── */
/* Uses !important to override .slcs-theme-sunmi .slcs-header !important */
.slcs-window.slcs-lunch-active .slcs-header,
.slcs-theme-sunmi.slcs-window.slcs-lunch-active .slcs-header {
    background: linear-gradient(135deg, #f97316 0%, #fb923c 100%) !important;
    border-bottom: 2px solid #ea580c !important;
}
.slcs-lunch-break-banner {
    background: #fff7ed;
    border-bottom: 2px solid #fed7aa;
    color: #9a3412;
    font-size: 12px;
    font-weight: 600;
    padding: 8px 14px;
    text-align: center;
    line-height: 1.4;
}

/* Vibration button beside sound. Uses mobile navigator.vibrate when supported. */
.slcs-form .slcs-input-toolbar #slcs-vibrate-btn { font-size: 0 !important; }
.slcs-form .slcs-input-toolbar #slcs-vibrate-btn::before { content: "📴"; }
.slcs-form .slcs-input-toolbar #slcs-vibrate-btn[data-vibrate="1"]::before { content: "📳"; }
.slcs-form .slcs-input-toolbar #slcs-vibrate-btn[data-vibrate="0"]::before { content: "📴"; }


/* v4.4.103 — order lookup cards: responsive summary row + reliable dropdown spacing */
.slcs-order-summary-row {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}
.slcs-order-summary-main,
.slcs-order-summary-actions {
    min-width: 0 !important;
}
.slcs-order-summary-status {
    overflow-wrap: anywhere !important;
    word-break: normal !important;
}
.slcs-order-summary-total,
.slcs-order-summary-date {
    max-width: 120px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.slcs-order-detail-wrap {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    clear: both !important;
}
@media (max-width: 420px) {
    .slcs-order-summary-row {
        grid-template-columns: 1fr !important;
        gap: 7px !important;
    }
    .slcs-order-summary-actions {
        grid-template-columns: 1fr auto !important;
        justify-items: start !important;
        width: 100% !important;
    }
    .slcs-order-summary-total,
    .slcs-order-summary-date {
        max-width: 100% !important;
    }
    .slcs-order-summary-actions button {
        justify-self: stretch !important;
        width: 100% !important;
    }
}


/* v4.4.119 - Keep original chat bubble shape; retain only textarea auto-height safety. */
.slcs-window .slcs-input-row textarea#slcs-input{
    min-height:38px !important;
    max-height:118px !important;
    overflow-y:hidden;
    box-sizing:border-box !important;
}


/* v4.4.134: smooth upload placeholder for image/video sends; prevents panel flicker */
.slcs-local-upload { animation: none !important; }
.slcs-upload-placeholder { min-height: 22px; will-change: auto; }
.slcs-upload-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(0,0,0,0.18);
    border-top-color: rgba(0,0,0,0.58);
    border-radius: 50%;
    display: inline-block;
    flex: 0 0 auto;
    animation: slcs-upload-spin 0.9s linear infinite;
}
@keyframes slcs-upload-spin { to { transform: rotate(360deg); } }

/* v4.4.137 — customer message reply/delete actions */
.slcs-reply-bar{align-items:center;gap:8px;margin:6px 10px 4px;padding:8px 10px;border:1px solid rgba(228,0,124,.16);border-radius:14px;background:#fff7fb;box-shadow:0 4px 12px rgba(15,23,42,.06);box-sizing:border-box}
.slcs-reply-bar-accent{width:4px;align-self:stretch;border-radius:999px;background:#e4007c;flex:0 0 4px}
.slcs-reply-bar-main{min-width:0;flex:1;text-align:left}
.slcs-reply-bar-title{font-size:11px;font-weight:800;color:#9d174d;line-height:1.15;margin-bottom:2px}
.slcs-reply-bar-text{font-size:12px;color:#374151;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}
.slcs-reply-cancel{border:0;background:rgba(15,23,42,.08);color:#374151;border-radius:999px;width:24px;height:24px;line-height:22px;font-size:18px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.slcs-reply-preview{border-left:3px solid rgba(228,0,124,.55);background:rgba(255,255,255,.54);border-radius:10px;padding:6px 8px;margin-bottom:7px;max-width:100%;box-sizing:border-box}
.slcs-reply-preview-name{font-size:11px;font-weight:800;color:#9d174d;line-height:1.15;margin-bottom:2px}
.slcs-reply-preview-text{font-size:12px;color:#4b5563;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}
.slcs-message-actions{display:flex;gap:6px;margin-top:3px;opacity:.08;transition:opacity .15s ease;max-width:100%}
.slcs-message:hover .slcs-message-actions,.slcs-message:focus-within .slcs-message-actions{opacity:1}
.slcs-message-action{border:0;background:rgba(15,23,42,.06);color:#4b5563;border-radius:999px;padding:3px 8px;font-size:10px;font-weight:700;line-height:1.2;cursor:pointer}
.slcs-message-action:hover{background:rgba(228,0,124,.12);color:#9d174d}
.slcs-message-delete:hover{background:rgba(239,68,68,.12);color:#b91c1c}
@media (hover:none){.slcs-message-actions{opacity:1}}

/* WhatsApp-style message options, reactions and annul placeholder */
.slcs-message-actions{opacity:.85;transition:opacity .15s ease;gap:6px;}
.slcs-msg-row:hover .slcs-message-actions{opacity:1;}
.slcs-message-action.slcs-message-react{min-width:28px;padding:3px 7px;}
.slcs-message-reactions{display:inline-flex;align-items:center;gap:2px;margin-top:5px;padding:2px 6px;border-radius:999px;background:#fff;box-shadow:0 2px 8px rgba(15,23,42,.12);font-size:14px;line-height:1;width:max-content;max-width:100%;}
.slcs-message-reactions span{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;}
.slcs-message-menu{position:fixed;z-index:2147483647;width:260px;max-width:calc(100vw - 24px);background:#fff;border:1px solid rgba(15,23,42,.08);border-radius:18px;box-shadow:0 18px 45px rgba(15,23,42,.24);padding:9px;box-sizing:border-box;animation:slcs-msg-in .14s ease-out;color:#111827;}
.slcs-message-menu-reactions{display:flex;justify-content:space-between;gap:5px;padding:3px 2px 8px;border-bottom:1px solid rgba(15,23,42,.08);}
.slcs-message-menu-reactions button{border:0;background:#f8fafc;border-radius:999px;width:34px;height:34px;font-size:19px;cursor:pointer;line-height:1;transition:transform .12s ease,background .12s ease;}
.slcs-message-menu-reactions button:hover{background:#eef2ff;transform:translateY(-1px) scale(1.06);}
.slcs-message-menu-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding-top:8px;}
.slcs-message-menu-actions button{border:0;border-radius:12px;background:#f3f4f6;color:#111827;font-size:12px;font-weight:700;padding:9px 10px;cursor:pointer;}
.slcs-message-menu-actions button.danger{background:#fee2e2;color:#991b1b;}
.slcs-message-deleted-note{color:#64748b;font-style:italic;}
.slcs-message-deleted{opacity:.78;}

/* 4.4.147: customer actions are only in the tap/click floating menu, not a permanent row below bubbles. */
.slcs-message-actions{display:none!important;}


/* v4.4.153 — customer message options open only with double click / double tap. */
#slcs-chat-box .slcs-message-bubble{position:relative;cursor:pointer;}
#slcs-chat-box .slcs-message-menu-toggle{display:none!important;}
.slcs-message-menu-actions{grid-template-columns:repeat(auto-fit,minmax(78px,1fr));}
.slcs-message-menu-actions button.warning{background:#fef3c7;color:#92400e;}

/* Customer language selector — compact control beside the Agent area */
.slcs-language-panel{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  padding:6px 10px 4px;
  background:rgba(255,255,255,.88);
  border-bottom:1px solid rgba(15,23,42,.06);
  font-size:11px;
  color:#475569;
}
.slcs-language-panel label{
  font-weight:800;
  letter-spacing:.01em;
}
.slcs-language-panel select{
  height:26px;
  max-width:118px;
  border:1px solid rgba(212,175,55,.55);
  border-radius:999px;
  background:#fff;
  color:#111827;
  font-size:11px;
  font-weight:700;
  padding:2px 22px 2px 9px;
  outline:none;
}
.slcs-language-panel select:focus{
  box-shadow:0 0 0 2px rgba(212,175,55,.18);
}
.slcs-language-saved{
  min-width:0;
  max-width:90px;
  opacity:0;
  color:#15803d;
  font-size:10px;
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  transition:opacity .18s ease;
}
.slcs-language-saved.is-visible{opacity:1;}
@media (max-width:480px){
  .slcs-language-panel{padding:5px 8px;gap:5px;}
  .slcs-language-panel select{max-width:104px;font-size:10.5px;}
  .slcs-language-saved{display:none;}
}

/* 4.4.150 - language selector powered by site language plugins */
.slcs-language-panel select option { color:#111827; }
.slcs-language-panel select { max-width:160px; }


/* 4.4.152 - Keep language selector on the same row as AI / Agent tabs */
.slcs-channel-tabs{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  flex-wrap:nowrap;
}
.slcs-channel-tab-buttons{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
  flex:1 1 auto;
}
.slcs-channel-tabs .slcs-language-panel{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:5px;
  padding:0;
  margin:0 2px 0 6px;
  background:transparent;
  border-bottom:0;
  white-space:nowrap;
}
.slcs-channel-tabs .slcs-language-panel label{
  font-size:10.5px;
  line-height:1;
}
.slcs-channel-tabs .slcs-language-panel select{
  height:24px;
  max-width:118px;
  font-size:10.5px;
  padding:1px 20px 1px 8px;
}
.slcs-channel-tabs .slcs-language-saved{
  position:absolute;
  right:12px;
  top:100%;
  margin-top:2px;
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  border-radius:999px;
  padding:2px 7px;
  box-shadow:0 6px 18px rgba(15,23,42,.10);
  z-index:4;
}
@media (max-width:480px){
  .slcs-channel-tabs{gap:5px;}
  .slcs-channel-tab-buttons{gap:4px;}
  .slcs-channel-tabs .slcs-language-panel{gap:3px;margin-left:3px;}
  .slcs-channel-tabs .slcs-language-panel label{display:none;}
  .slcs-channel-tabs .slcs-language-panel select{max-width:92px;font-size:10px;padding-left:7px;}
}

/* v4.4.176: jump to original message from reply preview */
.slcs-reply-preview-jump{width:100%;border:0;text-align:left;cursor:pointer;background:rgba(255,255,255,.45);font:inherit;color:inherit;padding:6px 8px;border-left:3px solid rgba(0,0,0,.18);border-radius:9px;margin:0 0 6px 0;box-sizing:border-box;}
.slcs-reply-preview-jump:hover{background:rgba(255,255,255,.68);}
.slcs-message-jump-highlight .slcs-message-bubble,.slcs-message-jump-highlight .slcs-console-msg-inner{animation:slcsReplyJumpPulse 1.6s ease-out 1;}
@keyframes slcsReplyJumpPulse{0%{box-shadow:0 0 0 0 rgba(255,105,180,.65);transform:scale(1.01);}55%{box-shadow:0 0 0 8px rgba(255,105,180,.12);}100%{box-shadow:0 1px 3px rgba(0,0,0,.07);transform:scale(1);}}

/* Remote assistance consent (customer must explicitly allow) */
.slcs-remote-consent{position:absolute;inset:0;z-index:10020;display:flex;align-items:center;justify-content:center;background:rgba(15,23,42,.28);backdrop-filter:blur(4px);padding:18px;box-sizing:border-box;}
.slcs-remote-consent-card{width:min(340px,94%);background:#fff;border:1px solid rgba(228,0,124,.24);border-radius:22px;box-shadow:0 24px 70px rgba(15,23,42,.24);padding:18px;text-align:center;color:#111827;}
.slcs-remote-consent-icon{width:48px;height:48px;margin:0 auto 10px;border-radius:16px;background:#fff0f7;display:flex;align-items:center;justify-content:center;font-size:24px;}
.slcs-remote-consent-card strong{display:block;font-size:16px;margin-bottom:6px;}
.slcs-remote-consent-card p{margin:0 0 14px;font-size:13px;line-height:1.45;color:#4b5563;}
.slcs-remote-consent-actions{display:flex;gap:8px;justify-content:center;}
.slcs-remote-consent-actions button{border:0;border-radius:14px;padding:10px 12px;font-weight:800;cursor:pointer;}
.slcs-remote-deny{background:#f3f4f6;color:#374151;}
.slcs-remote-allow{background:#111827;color:#fff;}

/* 4.4.181 remote support guide label */
.slcs-remote-guide-label{pointer-events:none;}


/* 4.4.183 customer-visible remote support active red frame */
.slcs-remote-active-overlay{position:fixed;inset:0;z-index:2147483646;pointer-events:none;font-family:Arial,sans-serif;}
.slcs-remote-active-frame{position:absolute;inset:0;border:6px solid #dc2626;box-shadow:inset 0 0 0 2px rgba(255,255,255,.95),0 0 0 9999px rgba(220,38,38,.055);pointer-events:none;box-sizing:border-box;animation:slcsRemoteFramePulse 1.8s ease-in-out infinite;}
.slcs-remote-active-bar{position:absolute;left:50%;top:10px;transform:translateX(-50%);width:min(760px,calc(100% - 28px));display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;background:#991b1b;color:#fff;border:2px solid rgba(255,255,255,.92);box-shadow:0 18px 50px rgba(127,29,29,.35);border-radius:18px;padding:10px 12px;font-size:13px;line-height:1.25;text-align:center;pointer-events:auto;}
.slcs-remote-active-dot{width:10px;height:10px;border-radius:999px;background:#fff;box-shadow:0 0 0 0 rgba(255,255,255,.75);animation:slcsRemoteDotPulse 1.2s infinite;}
.slcs-remote-active-bar strong{font-size:14px;}
.slcs-remote-active-cancel{border:0;border-radius:999px;background:#fff;color:#991b1b;font-weight:900;padding:8px 12px;cursor:pointer;box-shadow:0 8px 22px rgba(0,0,0,.18);}
.slcs-remote-active-cancel:hover{background:#fee2e2;}
.slcs-remote-active-cancel:disabled{opacity:.72;cursor:wait;}
@keyframes slcsRemoteFramePulse{0%,100%{border-color:#dc2626;}50%{border-color:#ef4444;}}
@keyframes slcsRemoteDotPulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.85);}70%{box-shadow:0 0 0 8px rgba(255,255,255,0);}100%{box-shadow:0 0 0 0 rgba(255,255,255,0);}}
@media(max-width:640px){.slcs-remote-active-frame{border-width:5px}.slcs-remote-active-bar{top:8px;width:calc(100% - 18px);border-radius:16px;padding:9px;font-size:12px}.slcs-remote-active-cancel{width:100%;padding:9px 12px}}

/* 4.4.184 compact customer remote support notice */
.slcs-remote-active-frame{border-width:4px!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.95),0 0 0 9999px rgba(220,38,38,.035)!important;}
.slcs-remote-active-bar{top:8px!important;width:auto!important;max-width:calc(100% - 18px)!important;min-height:0!important;border-radius:999px!important;padding:5px 7px!important;gap:6px!important;font-size:11px!important;line-height:1!important;box-shadow:0 8px 22px rgba(127,29,29,.22)!important;}
.slcs-remote-active-bar strong{font-size:11px!important;}
.slcs-remote-active-dot{width:7px!important;height:7px!important;}
.slcs-remote-active-cancel{padding:5px 8px!important;font-size:11px!important;}
@media(max-width:640px){.slcs-remote-active-bar{top:6px!important;width:auto!important;max-width:calc(100% - 14px)!important;flex-wrap:nowrap!important}.slcs-remote-active-cancel{width:auto!important;padding:5px 8px!important}.slcs-remote-active-bar span:not(.slcs-remote-active-dot){display:none!important}}

/* v4.4.190 Remote support: visible staff pointer for the customer */
.slcs-remote-staff-cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2147483647;
  display: flex;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  opacity: 0;
  transform: translate(8px, 8px) scale(.96);
  transition: opacity .12s ease, transform .12s ease;
  filter: drop-shadow(0 8px 18px rgba(15,23,42,.22));
}
.slcs-remote-staff-cursor.slcs-remote-staff-cursor-on {
  opacity: 1;
  transform: translate(8px, 8px) scale(1);
}
.slcs-remote-staff-cursor-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 14px;
  line-height: 1;
  transform: rotate(-35deg);
  border: 2px solid #fff;
}
.slcs-remote-staff-cursor-label {
  background: rgba(239,68,68,.95);
  color: #fff;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 999px;
  padding: 4px 9px;
  font: 700 12px/1.2 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  white-space: nowrap;
}

/* v4.4.192: Remote support live screen share consent helper */
.slcs-remote-active-bar .slcs-remote-live-dot{display:inline-flex;width:8px;height:8px;border-radius:999px;background:#22c55e;margin-left:6px;box-shadow:0 0 0 4px rgba(34,197,94,.18)}


/* ===== Customer voice typing button beside Send — polished voice UI ===== */
.slcs-form .slcs-input-row #slcs-dictate-btn.slcs-dictate-btn {
    width: 52px !important;
    min-width: 52px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 13px !important;
    border: 1px solid rgba(228,0,124,.24) !important;
    border-radius: 999px !important;
    background: radial-gradient(circle at 30% 18%,#ffffff 0,#fff 22%,#fff1f8 64%,#ffe0ef 100%) !important;
    color: #e4007c !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    overflow: hidden !important;
    line-height: 1 !important;
    cursor: pointer !important;
    box-shadow: 0 8px 20px rgba(228,0,124,.14), inset 0 1px 0 rgba(255,255,255,.96) !important;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease, color .16s ease !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
    user-select: none !important;
}
.slcs-form .slcs-input-row #slcs-dictate-btn.slcs-dictate-btn::before {
    content: "" !important;
    position: absolute !important;
    inset: 2px auto auto 6px !important;
    width: 7px !important;
    height: 7px !important;
    border-radius: 999px !important;
    background: rgba(228,0,124,.26) !important;
    box-shadow: 10px 0 0 rgba(228,0,124,.15) !important;
    opacity: .72 !important;
}
.slcs-form .slcs-input-row #slcs-dictate-btn.slcs-dictate-btn .slcs-dictate-icon,
.slcs-form .slcs-input-row #slcs-dictate-btn.slcs-dictate-btn svg {
    width: 18px !important;
    height: 18px !important;
    display: block !important;
    position: relative !important;
    z-index: 1 !important;
}
.slcs-form .slcs-input-row #slcs-dictate-btn.slcs-dictate-btn:hover {
    transform: translateY(-1px) scale(1.035) !important;
    box-shadow: 0 11px 24px rgba(228,0,124,.20), inset 0 1px 0 rgba(255,255,255,.96) !important;
}
.slcs-form .slcs-input-row #slcs-dictate-btn.slcs-dictate-btn:active {
    transform: scale(.95) !important;
}
.slcs-form .slcs-input-row #slcs-dictate-btn.slcs-dictate-btn.is-listening {
    background: linear-gradient(135deg,#e4007c,#ff5cac 60%,#ff8bc8) !important;
    border-color: rgba(228,0,124,.55) !important;
    color: #fff !important;
    animation: slcsDictatePulse 1.05s ease-in-out infinite !important;
}
.slcs-form .slcs-input-row #slcs-dictate-btn.slcs-dictate-btn.is-listening::before {
    background: #fff !important;
    box-shadow: 10px 0 0 rgba(255,255,255,.72), 20px 0 0 rgba(255,255,255,.45) !important;
    animation: slcsDictateBars .82s ease-in-out infinite alternate !important;
}
.slcs-form .slcs-input-row #slcs-dictate-btn.slcs-dictate-btn.is-unsupported {
    opacity: .45 !important;
    cursor: not-allowed !important;
    filter: grayscale(.2) !important;
}
@keyframes slcsDictatePulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(228,0,124,.34), 0 9px 20px rgba(228,0,124,.18); }
    50% { box-shadow: 0 0 0 8px rgba(228,0,124,0), 0 13px 27px rgba(228,0,124,.24); }
}
@keyframes slcsDictateBars {
    0% { transform: translateY(0) scaleY(.72); opacity:.75; }
    100% { transform: translateY(1px) scaleY(1.15); opacity:1; }
}
@media (max-width: 380px) {
    .slcs-form .slcs-input-row #slcs-dictate-btn.slcs-dictate-btn {
        width: 46px !important;
        min-width: 46px !important;
        height: 32px !important;
        min-height: 32px !important;
        padding: 0 10px !important;
    }
    .slcs-form .slcs-input-row #slcs-dictate-btn.slcs-dictate-btn .slcs-dictate-icon,
    .slcs-form .slcs-input-row #slcs-dictate-btn.slcs-dictate-btn svg {
        width: 16px !important;
        height: 16px !important;
    }
}

/* v4.4.196 - customer manual location message card */
.slcs-chat-location-card{
    border:1px solid rgba(37,99,235,.18);
    background:linear-gradient(135deg,rgba(239,246,255,.95),rgba(255,255,255,.92));
    border-radius:14px;
    padding:10px 12px;
    line-height:1.45;
}
.slcs-chat-location-card a{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-top:5px;
    font-weight:800;
    color:#2563eb;
    text-decoration:none;
}
.slcs-chat-location-card a:hover{ text-decoration:underline; }
.slcs-chat-location-card small{ display:block;margin-top:5px;color:rgba(17,24,39,.64); }


/* Sheliux support opener shortcodes/buttons */
.slcs-support-open{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border:0;
    border-radius:999px;
    padding:11px 18px;
    min-height:42px;
    cursor:pointer;
    font:700 14px/1.1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    background:linear-gradient(135deg,#ff007f,#f8a7c6);
    color:#fff!important;
    text-decoration:none!important;
    box-shadow:0 10px 24px rgba(255,0,127,.24);
    transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.slcs-support-open:hover,
.slcs-support-open:focus{
    color:#fff!important;
    transform:translateY(-1px);
    box-shadow:0 14px 30px rgba(255,0,127,.32);
    filter:saturate(1.05);
}
.slcs-support-open:active{transform:translateY(0);}
.slcs-support-open-icon{font-size:17px;line-height:1;}
.slcs-support-open-label{white-space:nowrap;}

/* Sheliux bottom mobile bar bridge: when docked, the theme owns the chat button. */
#slcs-widget.slcs-is-bottom-bar-docked #slcs-bubble,
#slcs-bubble.slcs-docked-hidden {
    display: none !important;
    pointer-events: none !important;
}

/* Mobile bubble trash zone: drag the floating bubble here to close/dock it into the theme bottom bar. */
.slcs-bubble-trash-zone{
    position:fixed;
    left:50%;
    bottom:calc(72px + env(safe-area-inset-bottom, 0px));
    transform:translate(-50%, 18px) scale(.96);
    z-index:2147483600;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.slcs-bubble-trash-zone.is-visible{
    opacity:1;
    visibility:visible;
    transform:translate(-50%, 0) scale(1);
}
.slcs-bubble-trash-zone-inner{
    min-width:150px;
    height:54px;
    padding:0 16px;
    border-radius:999px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    background:rgba(255,255,255,.96);
    border:1px solid rgba(255,0,127,.22);
    box-shadow:0 18px 42px rgba(17,24,39,.18), 0 0 0 6px rgba(255,0,127,.06);
    color:#111827;
    font:800 13px/1.1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    -webkit-backdrop-filter:blur(12px);
    backdrop-filter:blur(12px);
}
.slcs-bubble-trash-zone-icon{
    width:28px;
    height:28px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#ff007f,#ff8cc6);
    color:#fff;
    font-size:22px;
    line-height:1;
    box-shadow:0 8px 20px rgba(255,0,127,.28);
}
.slcs-bubble-trash-zone.is-active .slcs-bubble-trash-zone-inner{
    border-color:rgba(255,0,127,.56);
    box-shadow:0 20px 48px rgba(255,0,127,.28), 0 0 0 8px rgba(255,0,127,.12);
    transform:scale(1.04);
}
.slcs-bubble-trash-zone.is-active .slcs-bubble-trash-zone-icon{
    background:linear-gradient(135deg,#ef4444,#ff007f);
}
@media (min-width:1025px){
    .slcs-bubble-trash-zone{display:none!important;}
}

/* Bottom-bar sizing is owned by the theme. The plugin no longer applies broad CSS to theme bar items. */