/**
 * Sales Assist · Styles
 *
 *  - Overlay modal (single agent: Diego con foto + 3 CTAs)
 *  - Callback form modal
 *  - Inline CTA en PDP (cerca del precio)
 *  - Cart drawer prompt
 *  - Toast triggers (Fase 2)
 *
 *  Diseño: brand SmartDeal (#C5FF3E lima, #0A0E12 dark, #fff blanco)
 *  Mobile-first, no library dependencies, ~12 KB sin minify
 *  prefers-reduced-motion respeta animaciones
 */

/* ═══════════════════════════════════════════════════════════════════════════
   Overlay base (modal de "Habla con Diego")
   ═══════════════════════════════════════════════════════════════════════════ */

.sd-sa-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
    font-family: var(--sd-font-body, system-ui, -apple-system, sans-serif);
}

.sd-sa-overlay[aria-hidden="false"] {
    display: flex;
    animation: sd-sa-fade-in 0.2s ease-out;
}

.sd-sa-overlay__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 14, 18, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.sd-sa-overlay__panel {
    position: relative;
    max-width: 420px;
    width: 100%;
    background: #ffffff;
    border-radius: 20px;
    padding: 32px 28px 24px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.32);
    text-align: center;
    animation: sd-sa-slide-up 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.sd-sa-overlay__close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(0, 0, 0, 0.05);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #101418;
    transition: background 0.15s;
}
.sd-sa-overlay__close:hover { background: rgba(0, 0, 0, 0.1); }
.sd-sa-overlay__close:focus-visible { outline: 2px solid #C5FF3E; outline-offset: 2px; }

/* ── Hero (foto + greeting + status) ── */
.sd-sa-overlay__hero {
    margin-bottom: 24px;
}

.sd-sa-overlay__photo-wrap {
    position: relative;
    display: inline-block;
    margin-bottom: 16px;
}

.sd-sa-overlay__photo {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #C5FF3E;
    box-shadow: 0 8px 24px rgba(197, 255, 62, 0.25);
}

.sd-sa-overlay__status-dot {
    position: absolute;
    bottom: 6px;
    right: 6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 3px solid #ffffff;
}
.sd-sa-overlay__status-dot[data-sd-sa-status="online"] {
    background: #10b981;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5);
    animation: sd-sa-pulse 2s ease-in-out infinite;
}
.sd-sa-overlay__status-dot[data-sd-sa-status="offline"] {
    background: #94a3b8;
}

.sd-sa-overlay__greeting {
    font-family: var(--sd-font-body, system-ui, -apple-system, sans-serif);
    font-size: 22px;
    font-weight: 500;
    margin: 0 0 4px;
    color: #101418;
    letter-spacing: 0;
}

.sd-sa-overlay__role {
    font-size: 14px;
    color: #64748b;
    margin: 0 0 12px;
}

.sd-sa-overlay__status {
    font-size: 13px;
    font-weight: 600;
    color: #10b981;
    margin: 0;
}
.sd-sa-overlay__status:not(:has(::before)) {
    /* Off-hours version sin badge verde */
}

/* ── CTAs ── */
.sd-sa-overlay__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sd-sa-overlay__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

.sd-sa-overlay__cta--primary {
    background: #25D366;  /* WhatsApp green oficial */
    color: #ffffff;
    box-shadow: 0 4px 16px rgba(37, 211, 102, 0.32);
}
.sd-sa-overlay__cta--primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4); }
.sd-sa-overlay__cta--primary:active { transform: translateY(0); }

.sd-sa-overlay__cta--secondary {
    background: rgba(10, 14, 18, 0.06);
    color: #101418;
}
.sd-sa-overlay__cta--secondary:hover { background: rgba(10, 14, 18, 0.1); }

.sd-sa-overlay__divider {
    text-align: center;
    color: #94a3b8;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 4px 0;
    position: relative;
}
.sd-sa-overlay__divider::before,
.sd-sa-overlay__divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 30%;
    height: 1px;
    background: rgba(0, 0, 0, 0.08);
}
.sd-sa-overlay__divider::before { left: 0; }
.sd-sa-overlay__divider::after { right: 0; }

.sd-sa-overlay__privacy {
    margin: 20px 0 0;
    font-size: 11px;
    color: #94a3b8;
    text-align: center;
    line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Callback form modal
   ═══════════════════════════════════════════════════════════════════════════ */

.sd-sa-callback {
    position: fixed;
    inset: 0;
    z-index: 100000; /* arriba del overlay */
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
    font-family: var(--sd-font-body, system-ui, -apple-system, sans-serif);
}

.sd-sa-callback[aria-hidden="false"] {
    display: flex;
    animation: sd-sa-fade-in 0.2s ease-out;
}

.sd-sa-callback__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 14, 18, 0.65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.sd-sa-callback__panel {
    position: relative;
    max-width: 420px;
    width: 100%;
    background: #ffffff;
    border-radius: 20px;
    padding: 32px 28px 24px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.32);
    animation: sd-sa-slide-up 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.sd-sa-callback__close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(0, 0, 0, 0.05);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #101418;
}

.sd-sa-callback__title {
    font-family: var(--sd-font-body, system-ui, -apple-system, sans-serif);
    font-size: 22px;
    font-weight: 500;
    margin: 0 0 20px;
    color: #101418;
}

.sd-sa-callback__sub {
    font-size: 14px;
    color: #475569;
    margin: 0 0 20px;
    line-height: 1.5;
}

.sd-sa-callback__label {
    display: block;
    margin-bottom: 14px;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}

.sd-sa-callback__label input {
    width: 100%;
    padding: 12px 14px;
    margin-top: 6px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 15px;
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}
.sd-sa-callback__label input:focus {
    outline: none;
    border-color: #C5FF3E;
    box-shadow: 0 0 0 4px rgba(197, 255, 62, 0.2);
}
.sd-sa-callback__label input:invalid:not(:placeholder-shown) {
    border-color: #ef4444;
}

.sd-sa-callback__submit {
    width: 100%;
    padding: 14px 20px;
    background: #C5FF3E;
    color: #101418;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.12s, box-shadow 0.12s;
    margin-top: 6px;
    font-family: inherit;
}
.sd-sa-callback__submit:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(197, 255, 62, 0.4);
}
.sd-sa-callback__submit:disabled {
    opacity: 0.6;
    cursor: wait;
}

.sd-sa-callback__legal {
    margin: 12px 0 0;
    font-size: 11px;
    color: #94a3b8;
    text-align: center;
    line-height: 1.4;
}
.sd-sa-callback__legal a { color: #475569; text-decoration: underline; }

.sd-sa-callback__success {
    text-align: center;
    padding: 12px 0;
}
.sd-sa-callback__success-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #10b981;
    color: #ffffff;
    font-size: 32px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    animation: sd-sa-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.sd-sa-callback__success h3 {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 8px;
    color: #101418;
}
.sd-sa-callback__success p {
    color: #475569;
    margin: 0;
    line-height: 1.5;
}

.sd-sa-callback__error {
    margin-top: 12px;
    padding: 10px 14px;
    background: #fef2f2;
    color: #991b1b;
    border-radius: 8px;
    font-size: 13px;
    text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CTA inline en PDP (cerca del precio)
   ═══════════════════════════════════════════════════════════════════════════ */

.sd-sa-pdp-inline {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    margin: 16px 0;
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfccb 100%);
    border: 1px solid rgba(197, 255, 62, 0.5);
    border-radius: 12px;
    font-size: 14px;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.12s;
}
.sd-sa-pdp-inline:hover {
    border-color: #C5FF3E;
    transform: translateY(-1px);
}

.sd-sa-pdp-inline__photo {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #C5FF3E;
    flex-shrink: 0;
}

.sd-sa-pdp-inline__copy {
    flex: 1;
    line-height: 1.4;
    color: #1f2937;
}
.sd-sa-pdp-inline__copy strong { color: #101418; }
.sd-sa-pdp-inline__copy small { color: #64748b; font-size: 12px; }

.sd-sa-pdp-inline__arrow {
    flex-shrink: 0;
    color: #475569;
    font-size: 18px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Cart drawer prompt
   ═══════════════════════════════════════════════════════════════════════════ */

.sd-sa-cart-prompt {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin: 12px 0;
    background: rgba(197, 255, 62, 0.12);
    border: 1px solid rgba(197, 255, 62, 0.4);
    border-radius: 10px;
    font-size: 13px;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
}
.sd-sa-cart-prompt:hover { background: rgba(197, 255, 62, 0.2); }

.sd-sa-cart-prompt__photo {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid #C5FF3E;
    flex-shrink: 0;
}

.sd-sa-cart-prompt__text { flex: 1; line-height: 1.3; }

/* ═══════════════════════════════════════════════════════════════════════════
   Animations
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes sd-sa-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes sd-sa-slide-up {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes sd-sa-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); }
    50%      { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
}

@keyframes sd-sa-pop {
    0%   { transform: scale(0); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .sd-sa-overlay,
    .sd-sa-overlay__panel,
    .sd-sa-callback,
    .sd-sa-callback__panel,
    .sd-sa-overlay__status-dot,
    .sd-sa-callback__success-icon {
        animation: none !important;
    }
    .sd-sa-overlay__cta:hover,
    .sd-sa-callback__submit:hover {
        transform: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Body lock cuando overlay está abierto (evita scroll detrás)
   ═══════════════════════════════════════════════════════════════════════════ */

body.sd-sa-overlay-open {
    overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Exit-intent modal (Fase 2)
   ═══════════════════════════════════════════════════════════════════════════ */

.sd-sa-exit-modal {
    position: fixed;
    inset: 0;
    z-index: 100001;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    font-family: var(--sd-font-body, system-ui, -apple-system, sans-serif);
}
.sd-sa-exit-modal[aria-hidden="false"] {
    display: flex;
    animation: sd-sa-fade-in 0.25s ease-out;
}

.sd-sa-exit-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 14, 18, 0.7);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.sd-sa-exit-modal__panel {
    position: relative;
    max-width: 460px;
    width: 100%;
    background: #ffffff;
    border-radius: 20px;
    padding: 36px 32px 28px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
    text-align: center;
    animation: sd-sa-slide-up 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.sd-sa-exit-modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    background: rgba(0, 0, 0, 0.05);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #475569;
}
.sd-sa-exit-modal__close:hover { background: rgba(0, 0, 0, 0.1); color: #101418; }

.sd-sa-exit-modal__photo-wrap {
    width: 80px;
    height: 80px;
    margin: 0 auto 16px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #C5FF3E;
    box-shadow: 0 4px 16px rgba(197, 255, 62, 0.3);
}
.sd-sa-exit-modal__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sd-sa-exit-modal__title {
    font-family: var(--sd-font-headline, 'Compacta BT', Impact, sans-serif);
    font-size: 28px;
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 10px;
    color: #101418;
    letter-spacing: -0.01em;
}

.sd-sa-exit-modal__sub {
    font-size: 15px;
    color: #475569;
    line-height: 1.5;
    margin: 0 0 24px;
}

.sd-sa-exit-modal__actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sd-sa-exit-modal__cta {
    padding: 14px 20px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: transform 0.12s, box-shadow 0.12s;
}
.sd-sa-exit-modal__cta--primary {
    background: #25D366;
    color: #ffffff;
    box-shadow: 0 4px 16px rgba(37, 211, 102, 0.3);
}
.sd-sa-exit-modal__cta--primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4); }
.sd-sa-exit-modal__cta--secondary {
    background: transparent;
    color: #94a3b8;
    font-size: 13px;
    padding: 8px 12px;
    font-weight: 500;
}
.sd-sa-exit-modal__cta--secondary:hover { color: #475569; }

/* ═══════════════════════════════════════════════════════════════════════════
   Toast genérico (cart-sitting, PDP-stuck, returning visitor)
   Esquina inferior-IZQUIERDA para no chocar con el floating button.
   ═══════════════════════════════════════════════════════════════════════════ */

.sd-sa-toast {
    position: fixed;
    bottom: 24px;
    left: 24px;
    z-index: 99997;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px 12px 12px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22);
    max-width: 380px;
    font-family: var(--sd-font-body, system-ui, -apple-system, sans-serif);
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.sd-sa-toast[aria-hidden="false"] {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.sd-sa-toast__close {
    position: absolute;
    top: 4px;
    right: 6px;
    width: 22px;
    height: 22px;
    background: rgba(0, 0, 0, 0.06);
    color: #475569;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.sd-sa-toast__close:hover { background: rgba(0, 0, 0, 0.12); }

.sd-sa-toast__photo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #C5FF3E;
    flex-shrink: 0;
}

.sd-sa-toast__content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
    line-height: 1.3;
    padding-right: 8px;
}
.sd-sa-toast__content strong {
    font-size: 13px;
    font-weight: 700;
    color: #101418;
}
.sd-sa-toast__content span {
    font-size: 12px;
    color: #475569;
}

.sd-sa-toast__cta {
    background: #C5FF3E;
    color: #101418;
    border: none;
    padding: 8px 14px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
    flex-shrink: 0;
    transition: transform 0.12s;
}
.sd-sa-toast__cta:hover { transform: translateY(-1px); }

/* Mobile: toast más compacto, evita el bottom-bar */
@media (max-width: 720px) {
    .sd-sa-toast {
        bottom: 80px;
        left: 12px;
        right: 12px;
        max-width: none;
    }
}

/* Animación entrada con bounce sutil al aparecer */
.sd-sa-toast[aria-hidden="false"] {
    animation: sd-sa-toast-bounce 0.6s ease-out;
}
@keyframes sd-sa-toast-bounce {
    0%   { transform: translateY(40px) scale(0.9); opacity: 0; }
    60%  { transform: translateY(-6px) scale(1.02); opacity: 1; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Customizar Join.chat existente (lo dejamos como botón flotante base
   pero su POPUP lo escondemos — usamos el nuestro)
   ═══════════════════════════════════════════════════════════════════════════ */

.joinchat__box,
.joinchat__chatbox {
    display: none !important; /* Su popup, escondido — usamos el nuestro */
}

/* Permitir Join.chat en PDP también (estaba escondido por global.css line 4-15) */
body.single-product .joinchat,
body.single-product [class*="wa-float"],
body.single-product [class*="whatsapp-float"] {
    display: block !important;
}

/* ── Ajustar el botón flotante de Join.chat ────────────────────────── */
/* Cuando hay foto del agente configurada (button_image en joinchat option),
   Join.chat renderiza <img> dentro del botón. Ocultamos su ícono SVG default
   y dejamos solo la foto. También ocultamos el badge "1" de notificación
   (lo desactivamos por option pero por si acaso). */

/* Botón redondo con borde lima */
.joinchat__button {
    border: 3px solid #C5FF3E !important;
    box-shadow: 0 8px 24px rgba(197, 255, 62, 0.35) !important;
    background: #fff !important;
    padding: 0 !important;
    overflow: hidden !important;
    width: 64px !important;
    height: 64px !important;
    position: relative !important;
    border-radius: 50% !important;
}

/* Esconder el ícono SVG default de Join.chat (el verde de WA) */
.joinchat__button__open {
    display: none !important;
}

/* Container de la foto: llena el botón.
   IMPORTANTE: Join.chat default tiene opacity:0 y solo lo cambia a 1 cuando
   se agrega la clase .joinchat--image al padre (vía JS). En algunos browsers
   esa clase nunca se agrega → la foto queda invisible. Forzamos opacity:1
   sin depender de la clase. */
.joinchat .joinchat__button__image,
.joinchat__button__image {
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    opacity: 1 !important;
    animation: none !important;
}

/* La foto del agente llena el botón */
.joinchat .joinchat__button__image img,
.joinchat__button__image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    max-height: none !important;
    display: block !important;
    position: relative !important;
    opacity: 1 !important;
}

/* Esconder el tooltip nativo de Join.chat — usamos el nuestro custom */
.joinchat__tooltip { display: none !important; }

/* ─── Tooltip proactivo CUSTOM ────────────────────────────────────────
   Lo posicionamos fixed al lado izquierdo del botón flotante (que está
   bottom-right). Aparece después de 2s, se puede cerrar con la X.
   Click en la burbuja → abre nuestro overlay. */

.sd-sa-proactive {
    position: fixed;
    bottom: 28px;
    right: 88px;  /* a la izquierda del botón flotante */
    z-index: 99998;  /* debajo del modal pero arriba de todo */
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 40px 8px 8px;
    background: #ffffff;
    border-radius: 50px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    max-width: none;
    white-space: nowrap;
    cursor: pointer;
    /* Hidden hasta que el JS lo active (con delay 2s) */
    opacity: 0;
    transform: translateX(20px);
    pointer-events: none;
    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.sd-sa-proactive[aria-hidden="false"] {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
    animation: sd-sa-proactive-bounce 6s 3s ease-in-out infinite;
}

@keyframes sd-sa-proactive-bounce {
    0%, 90%, 100% { transform: translateX(0); }
    93%           { transform: translateX(-4px); }
    96%           { transform: translateX(0); }
}

.sd-sa-proactive::after {
    /* Flechita apuntando al botón flotante */
    content: '';
    position: absolute;
    top: 50%;
    right: -6px;
    transform: translateY(-50%);
    border-width: 6px 0 6px 8px;
    border-style: solid;
    border-color: transparent transparent transparent #ffffff;
}

.sd-sa-proactive__close {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border: none;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    color: #475569;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
}
.sd-sa-proactive__close:hover { background: rgba(0, 0, 0, 0.12); color: #101418; }

.sd-sa-proactive__photo-wrap {
    position: relative;
    flex-shrink: 0;
}

.sd-sa-proactive__photo {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #C5FF3E;
    display: block;
}

.sd-sa-proactive__dot {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid #fff;
}
.sd-sa-proactive__dot[data-sd-sa-status="online"]  { background: #10b981; }
.sd-sa-proactive__dot[data-sd-sa-status="offline"] { background: #94a3b8; }

.sd-sa-proactive__copy {
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.25;
    font-family: var(--sd-font-body, system-ui, -apple-system, sans-serif);
}
.sd-sa-proactive__copy strong {
    font-size: 13px;
    font-weight: 700;
    color: #101418;
}
.sd-sa-proactive__copy span {
    font-size: 11px;
    color: #475569;
}

/* Mobile: el tooltip no cabe al lado del botón → mostramos ARRIBA del botón */
@media (max-width: 720px) {
    .sd-sa-proactive {
        bottom: 150px;  /* arriba del botón floating en mobile */
        right: 12px;
        max-width: calc(100vw - 24px);
    }
    .sd-sa-proactive::after {
        top: auto;
        bottom: -6px;
        right: 24px;
        transform: none;
        border-width: 8px 6px 0 6px;
        border-color: #ffffff transparent transparent transparent;
    }
}

/* Esconder el badge "1" rojo del Join.chat (puede aparecer si message_badge="yes") */
.joinchat__badge {
    display: none !important;
}

/* Esconder solo el "chat box" interno de Join.chat (el popup que abre el plugin
   por sí solo). El tooltip lateral SÍ lo mostramos (ver styles más abajo). */
.joinchat__box {
    display: none !important;
}

/* Pulse verde de "en línea" — un dot pequeño abajo a la derecha del botón */
.joinchat__button::after {
    content: '';
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 16px;
    height: 16px;
    background: #10b981;
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5);
    animation: sd-sa-pulse-jc 2s ease-in-out infinite;
    z-index: 2;
}
@keyframes sd-sa-pulse-jc {
    0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); }
    50%      { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
}

/* Mobile: posicionar más arriba para que no tape el bottom-bar */
@media (max-width: 720px) {
    .joinchat {
        bottom: 80px !important;
    }
    .joinchat__button {
        width: 56px !important;
        height: 56px !important;
    }
}