/**
 * SessionStudio Chatbot — Frontend CSS v1.8.3 (Mobile UX Update)
 *
 * Sistema de variables CSS:
 *   --ssc-primary-color      Header, botón flotante, botones de opción activos
 *   --ssc-header-text-color  Texto e iconos dentro del header y barra de progreso
 *   --ssc-accent-color       Barra de progreso rellena, detalles de acento
 *   --ssc-bg-color           Fondo del área de mensajes
 *
 * Las variables se inyectan desde PHP en el template para respetar
 * la configuración del admin sin requerir JS inline.
 */

/* ── Defaults (sobreescritos por el <style> inline del template) ─────────── */
:root {
    --ssc-primary-color:     #0066cc;
    --ssc-header-text-color: #ffffff;
    --ssc-accent-color:      #4ade80;
    --ssc-bg-color:          #f8f9fa;
    --ssc-chat-width:        380px;
    --ssc-chat-height:       600px;
    /* Internos — no configurables por el admin */
    --ssc-text-color:        #333333;
    --ssc-border-color:      #e0e0e0;
    --ssc-shadow:            0 4px 12px rgba(0,0,0,0.15);
    --ssc-shadow-lg:         0 8px 24px rgba(0,0,0,0.2);
}

/* ── Widget contenedor ───────────────────────────────────────────────────── */
#ssc-chatbot-widget {
    position: fixed;
    z-index: 99999;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}
#ssc-chatbot-widget.ssc-position-bottom-right { bottom: 20px; right: 20px; }
#ssc-chatbot-widget.ssc-position-bottom-left  { bottom: 20px; left:  20px; }

/* ── Texto flotante (bubble) ─────────────────────────────────────────────── */
.ssc-bubble-text {
    position: absolute;
    bottom: 10px;
    white-space: nowrap;
    background: #fff;
    color: var(--ssc-text-color);
    padding: 8px 32px 8px 14px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: var(--ssc-shadow);
    animation: ssc-bubble-in 0.4s cubic-bezier(.34, 1.56, .64, 1) both;
    line-height: 1.4;
    max-width: 250px;
    pointer-events: auto;
    border: 1px solid #5a96ba;
}
/* bottom-right: burbuja a la IZQUIERDA del ícono, triángulo apunta a la derecha */
#ssc-chatbot-widget.ssc-position-bottom-right .ssc-bubble-text {
    right: 74px;
    left: auto;
}
#ssc-chatbot-widget.ssc-position-bottom-right .ssc-bubble-text::after {
    content: '';
    position: absolute;
    right: -8px;
    left: auto;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    border-width: 7px 0 7px 8px;
    border-color: transparent transparent transparent #fff;
    border-style: solid;
}
#ssc-chatbot-widget.ssc-position-bottom-right .ssc-bubble-text::before {
    content: '';
    position: absolute;
    right: -9px;
    left: auto;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    border-width: 8px 0 8px 9px;
    border-color: transparent transparent transparent #5a96ba;
    border-style: solid;
}
/* bottom-left: burbuja a la DERECHA del ícono, triángulo apunta a la izquierda */
#ssc-chatbot-widget.ssc-position-bottom-left .ssc-bubble-text {
    left: 74px;
    right: auto;
}
#ssc-chatbot-widget.ssc-position-bottom-left  .ssc-bubble-text::after  { left: 22px; }
#ssc-chatbot-widget.ssc-position-bottom-left  .ssc-bubble-text::before { left: 21px; }

.ssc-bubble-close {
    position: absolute;
    top: 4px; right: 6px;
    background: none; border: none;
    cursor: pointer; font-size: 16px; line-height: 1;
    color: #9ca3af; padding: 2px 4px;
    transition: color 0.15s;
}
.ssc-bubble-close:hover { color: #6b7280; }
.ssc-icon-chat img {
    width: 70px;
    height: 70px;
}

@keyframes ssc-bubble-in {
    from { opacity: 0; transform: translateY(10px) scale(0.9); }
    to   { opacity: 1; transform: translateY(0)   scale(1);   }
}

/* Ocultar burbuja cuando chat está abierto */
#ssc-chatbot-widget.ssc-chat-open .ssc-bubble-text { display: none; }

/* ── Botón flotante ──────────────────────────────────────────────────────── */
.ssc-chat-button {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: transparent;
    border: none;
    cursor: pointer;
    box-shadow: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: visible;
}
.ssc-chat-open #ssc-chatbot-button {
    background-color: var(--ssc-primary-color);
}
.ssc-chat-button:hover  { transform: scale(1.08); box-shadow: var(--ssc-shadow-lg); }
.ssc-chat-button:active { transform: scale(0.95); }

.ssc-icon-chat,
.ssc-icon-close {
    display: flex; align-items: center; justify-content: center;
    transition: opacity 0.25s ease, transform 0.25s ease;
    position: absolute;
}
.ssc-icon-chat svg, .ssc-icon-close svg { width: 28px; height: 28px; color: white; }
.ssc-icon-close { opacity: 0; transform: rotate(-90deg); }

.ssc-chat-button.active .ssc-icon-chat  { opacity: 0; transform: rotate(90deg); }
.ssc-chat-button.active .ssc-icon-close { opacity: 1; transform: rotate(0deg); }

/* Badge de nuevo mensaje */
.ssc-badge {
    position: absolute;
    top: -4px; right: -4px;
    width: 20px; height: 20px;
    background: #ef4444;
    color: white;
    border-radius: 50%;
    font-size: 11px; font-weight: 700; line-height: 20px;
    text-align: center;
    box-shadow: 0 0 0 2px white;
    animation: ssc-badge-pop 0.3s cubic-bezier(0.34,1.56,0.64,1);
    z-index: 1;
}
@keyframes ssc-badge-pop {
    from { transform: scale(0); } to { transform: scale(1); }
}

/* ── Ventana del chat ────────────────────────────────────────────────────── */
.ssc-chat-window {
    position: absolute;
    bottom: 80px;
    width: var(--ssc-chat-width);
    height: var(--ssc-chat-height);
    max-height: calc(100dvh - 110px);
    background: white;
    border-radius: 16px;
    box-shadow: var(--ssc-shadow-lg);
    display: none;
    flex-direction: column;
    overflow: hidden;
    animation: ssc-slide-up 0.3s cubic-bezier(0.34,1.2,0.64,1);
}
.ssc-chat-window.active { display: flex; }

#ssc-chatbot-widget.ssc-position-bottom-right .ssc-chat-window { right: 0; }
#ssc-chatbot-widget.ssc-position-bottom-left  .ssc-chat-window { left:  0; }

@keyframes ssc-slide-up {
    from { opacity: 0; transform: translateY(16px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.ssc-chat-header {
    background-color: var(--ssc-primary-color);
    color: var(--ssc-header-text-color);
    padding: 16px 20px;
    display: flex; align-items: center; justify-content: space-between;
    flex-shrink: 0;
}
.ssc-header-content {
    display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0;
}
.ssc-header-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    background-color: rgba(255,255,255,0.2);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ssc-header-avatar svg { width: 24px; height: 24px; }

.ssc-header-info { min-width: 0; }
.ssc-header-info h3 {
    margin: 0; font-size: 15px; font-weight: 600;
    color: var(--ssc-header-text-color);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ssc-status {
    font-size: 12px; color: var(--ssc-header-text-color);
    opacity: 0.85;
    display: flex; align-items: center; gap: 5px;
}
.ssc-status::before {
    content: ''; width: 7px; height: 7px; border-radius: 50%;
    background: var(--ssc-accent-color);
    box-shadow: 0 0 0 2px rgba(255,255,255,0.3);
    animation: ssc-pulse 2s infinite;
    flex-shrink: 0;
}
@keyframes ssc-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.4; }
}

.ssc-close-button {
    background: none; border: none; cursor: pointer;
    padding: 6px; color: var(--ssc-header-text-color);
    opacity: 0.8; transition: opacity 0.15s; border-radius: 6px;
    flex-shrink: 0;
}
.ssc-close-button:hover { opacity: 1; background: rgba(255,255,255,0.15); }
.ssc-close-button svg   { width: 20px; height: 20px; display: block; }

/* ── Barra de progreso ───────────────────────────────────────────────────── */
/*
 * Vive debajo del header (mismo fondo primario), por eso usamos
 * --ssc-header-text-color para todo el texto y el track de fondo,
 * y --ssc-accent-color para el relleno de la barra.
 * Así siempre contrasta correctamente sin importar qué color primario elija el admin.
 */
.ssc-progress-wrap {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 20px 10px;
    background-color: var(--ssc-primary-color); /* mismo fondo que el header */
    flex-shrink: 0;
}
.ssc-progress-track {
    flex: 1; height: 4px;
    background: rgba(255,255,255,0.25);
    border-radius: 2px; overflow: hidden;
}
.ssc-progress-bar {
    height: 100%;
    background: var(--ssc-accent-color);
    border-radius: 2px;
    transition: width 0.5s cubic-bezier(0.4,0,0.2,1);
}
.ssc-progress-label {
    font-size: 11px;
    color: var(--ssc-header-text-color);
    opacity: 0.9;
    white-space: nowrap; font-weight: 500;
    min-width: 80px; text-align: right;
}

/* ── Mensajes ────────────────────────────────────────────────────────────── */
.ssc-chat-messages {
    flex: 1; overflow-y: auto;
    padding: 20px;
    background-color: var(--ssc-bg-color);
    scroll-behavior: smooth;
}
.ssc-chat-messages::-webkit-scrollbar { width: 5px; }
.ssc-chat-messages::-webkit-scrollbar-track { background: transparent; }
.ssc-chat-messages::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18); border-radius: 3px; }

.ssc-message {
    margin-bottom: 14px;
    display: flex; align-items: flex-end; gap: 8px;
    animation: ssc-fade-in 0.25s ease both;
}
@keyframes ssc-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ssc-message-bot  { justify-content: flex-start; }
.ssc-message-user { justify-content: flex-end;   }

.ssc-message-avatar {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--ssc-primary-color);
    color: white; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.ssc-message-avatar svg    { width: 16px; height: 16px; }
.ssc-message-user .ssc-message-avatar { background: #6b7280; }

.ssc-message-content { max-width: 76%; }

.ssc-message-bubble {
    padding: 10px 14px; border-radius: 18px;
    line-height: 1.55; font-size: 14px; word-break: break-word;
}
.ssc-message-bot  .ssc-message-bubble {
    background: white; color: var(--ssc-text-color);
    border-bottom-left-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.ssc-message-user .ssc-message-bubble {
    background: var(--ssc-primary-color);
    color: var(--ssc-header-text-color);
    border-bottom-right-radius: 4px;
}

.ssc-message-time {
    font-size: 10px; color: #9ca3af;
    margin-top: 3px; padding: 0 4px;
}

/* ── Área de input ───────────────────────────────────────────────────────── */
.ssc-chat-input-area {
    padding: 14px 16px; background: white;
    border-top: 1px solid var(--ssc-border-color);
    flex-shrink: 0;
    max-height: 55%; overflow-y: auto; overflow-x: hidden;
}

/* Indicador de escritura */
.ssc-typing-indicator {
    display: flex; align-items: center; gap: 4px;
    padding: 10px 14px; background: white;
    border-radius: 18px; width: fit-content;
    margin-bottom: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.ssc-typing-indicator span {
    width: 7px; height: 7px; border-radius: 50%;
    background: #9ca3af; animation: ssc-typing 1.4s infinite;
}
.ssc-typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.ssc-typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
@keyframes ssc-typing {
    0%, 60%, 100% { transform: translateY(0);    opacity: 0.6; }
    30%            { transform: translateY(-8px); opacity: 1;   }
}

/* Opciones de respuesta */
.ssc-options-container { display: flex; flex-direction: column; gap: 7px; }

.ssc-option-button {
    padding: 11px 14px;
    background: white;
    border: 1.5px solid var(--ssc-border-color);
    border-radius: 10px; cursor: pointer;
    transition: border-color 0.18s, background 0.18s, transform 0.12s;
    font-size: 13px; font-family: inherit;
    color: var(--ssc-text-color); text-align: left;
    position: relative; overflow: hidden;
}
.ssc-option-button:hover {
    border-color: var(--ssc-primary-color);
    background: color-mix(in srgb, var(--ssc-primary-color) 6%, white);
    transform: translateX(3px);
}
.ssc-option-button:active { transform: scale(0.98); }
.ssc-option-button.active {
    background: var(--ssc-primary-color);
    color: var(--ssc-header-text-color);
    border-color: var(--ssc-primary-color);
}

/* Input de texto */
.ssc-text-input-container { display: flex; gap: 8px; align-items: center; }
.ssc-text-input {
    flex: 1; padding: 11px 14px;
    border: 1.5px solid var(--ssc-border-color);
    border-radius: 22px; font-size: 14px; font-family: inherit;
    outline: none; transition: border-color 0.18s;
    background: white; color: var(--ssc-text-color);
}
.ssc-text-input:focus { border-color: var(--ssc-primary-color); }

.ssc-send-button {
    width: 42px; height: 42px; border-radius: 50%;
    background: var(--ssc-primary-color);
    border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.18s, box-shadow 0.18s; flex-shrink: 0;
}
.ssc-send-button:hover  { transform: scale(1.08); box-shadow: 0 3px 10px rgba(0,0,0,0.2); }
.ssc-send-button:active { transform: scale(0.95); }
.ssc-send-button svg    { width: 18px; height: 18px; color: white; display: block; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.ssc-chat-footer {
    padding: 10px 16px; background: var(--ssc-bg-color);
    border-top: 1px solid var(--ssc-border-color); text-align: center;
}
.ssc-restart-button {
    background: none; border: none;
    color: var(--ssc-primary-color);
    cursor: pointer; font-size: 13px; font-family: inherit;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px; border-radius: 7px;
    transition: background 0.15s;
}
.ssc-restart-button:hover { background: color-mix(in srgb, var(--ssc-primary-color) 10%, white); }
.ssc-restart-button svg   { width: 14px; height: 14px; }

/* ── Estados especiales ──────────────────────────────────────────────────── */
.ssc-success-message { text-align: center; padding: 8px 0; }

/* ── Campo híbrido (texto libre) ─────────────────────────────────────────── */
.ssc-free-text-wrapper {
    margin-top: 8px; width: 100%;
    animation: ssc-fade-in 0.22s ease;
    display: flex; flex-direction: column; gap: 7px;
}
.ssc-free-text-label { font-size: 13px; color: #666; margin: 0; }
.ssc-free-text-input {
    width: 100%; padding: 10px 12px;
    border: 1.5px solid var(--ssc-primary-color);
    border-radius: 8px; font-size: 14px; font-family: inherit;
    resize: vertical; box-sizing: border-box; min-height: 70px;
    transition: box-shadow 0.18s; outline: none;
}
.ssc-free-text-input:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ssc-primary-color) 20%, transparent);
}
.ssc-free-text-submit {
    width: 100%; padding: 11px 20px;
    background: var(--ssc-primary-color);
    color: var(--ssc-header-text-color);
    border: none; border-radius: 10px; cursor: pointer;
    font-weight: 600; font-size: 14px; font-family: inherit;
    transition: opacity 0.18s, transform 0.1s;
}
.ssc-free-text-submit:hover  { opacity: 0.88; }
.ssc-free-text-submit:active { transform: scale(0.98); }
.ssc-free-text-hint { font-size: 11px; color: #aaa; text-align: right; margin: 0; }

/* ── WhatsApp ─────────────────────────────────────────────────────────────── */
.ssc-whatsapp-cta-button {
    display: block; width: 100%; box-sizing: border-box;
    background: #25D366; color: #fff !important;
    text-decoration: none !important;
    padding: 12px 20px; border-radius: 8px;
    font-weight: 600; font-size: 14px; text-align: center;
    transition: background 0.18s, transform 0.1s;
    border: none; cursor: pointer; margin-top: 4px;
}
.ssc-whatsapp-cta-button:hover  { background: #1da851; transform: translateY(-1px); }
.ssc-whatsapp-cta-button:active { transform: translateY(0); }

.ssc-option-button.ssc-whatsapp-option {
    border-color: #25D366 !important; color: #1a9e4d !important;
}
.ssc-option-button.ssc-whatsapp-option:hover {
    background: #25D366 !important; color: #fff !important;
}

/* ── Selector de país (WhatsApp) ──────────────────────────────────────────── */
.ssc-wa-input-wrap { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.ssc-country-select {
    width: 100%; padding: 10px 12px;
    border: 1.5px solid var(--ssc-border-color);
    border-radius: 10px; font-size: 14px; font-family: inherit;
    background: white; cursor: pointer; outline: none;
    transition: border-color 0.18s;
}
.ssc-country-select:focus { border-color: var(--ssc-primary-color); }

.ssc-wa-number-input {
    width: 100%; padding: 12px 14px; box-sizing: border-box;
    border: 1.5px solid var(--ssc-border-color);
    border-radius: 10px; font-size: 16px; font-family: inherit;
    outline: none; transition: border-color 0.18s; letter-spacing: 0.5px;
}
.ssc-wa-number-input:focus { border-color: var(--ssc-primary-color); }

.ssc-wa-preview {
    font-size: 12px; color: #9ca3af; padding: 0 2px;
    font-weight: 500; min-height: 18px; transition: color 0.25s;
}

/* ── Botón Atrás (header) ─────────────────────────────────────────────────── */
.ssc-back-button {
    background: rgba(255,255,255,0.18);
    border: none; cursor: pointer;
    width: 32px; height: 32px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.18s, transform 0.12s;
    flex-shrink: 0; margin-right: 4px;
    color: var(--ssc-header-text-color);
}
.ssc-back-button:hover  { background: rgba(255,255,255,0.30); }
.ssc-back-button:active { transform: scale(0.92); }
.ssc-back-button svg    { width: 18px; height: 18px; display: block; }

/* ── Footer con dos botones ───────────────────────────────────────────────── */
.ssc-chat-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 8px 12px;
    background: var(--ssc-bg-color);
    border-top: 1px solid var(--ssc-border-color);
}

.ssc-footer-back-button,
.ssc-restart-button {
    background: none; border: none;
    color: #9ca3af;
    cursor: pointer; font-size: 12px; font-family: inherit;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 6px 10px; border-radius: 7px;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
.ssc-footer-back-button:hover,
.ssc-restart-button:hover {
    background: #f3f4f6;
    color: #4b5563;
}
.ssc-footer-back-button svg,
.ssc-restart-button svg { width: 12px; height: 12px; flex-shrink: 0; }

.ssc-footer-divider {
    width: 1px; height: 16px;
    background: #e5e7eb;
    margin: 0 2px;
    flex-shrink: 0;
}

/* ── Botón Omitir ─────────────────────────────────────────────────────────── */
.ssc-skip-button {
    width: 100%;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    margin-top: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: #9ca3af;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: color 0.18s;
    text-decoration: none;
}
button.ssc-skip-button {
    background-color: #000;
    color: #fff;
    height: 45px;
    border-radius: 40px;
    margin-bottom: 15px;
    font-size: 15px;
}
.ssc-skip-button:hover {
    color: var(--ssc-primary-color);
}
.ssc-skip-button::before {
    content: '';
    display: block;
    width: 18px;
    height: 1px;
    background: currentColor;
    opacity: 0.4;
}
.ssc-skip-button::after {
    content: '';
    display: block;
    width: 18px;
    height: 1px;
    background: currentColor;
    opacity: 0.4;
}
.ssc-skip-button:active { transform: scale(0.97); }

/* ── Error inline ─────────────────────────────────────────────────────────── */
.ssc-inline-error {
    font-size: 12px; color: #ef4444; padding: 5px 4px 0;
    animation: ssc-fade-in 0.18s ease;
}
.ssc-input-error {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 2px rgba(239,68,68,0.14) !important;
}

/* ── Animaciones ──────────────────────────────────────────────────────────── */
@keyframes ssc-shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-5px); }
    40%, 80% { transform: translateX(5px); }
}
.ssc-shake { animation: ssc-shake 0.35s ease; }

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE (≤ 540px)
   Reescritura completa del layout para pantallas pequeñas.
   Objetivo: chat en pantalla completa, opciones legibles, pregunta siempre visible.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 540px) {

    /* ── Widget posicionamiento ── */
    #ssc-chatbot-widget.ssc-position-bottom-right,
    #ssc-chatbot-widget.ssc-position-bottom-left {
        bottom: 30px;
        right:  30px;
        left:   auto;
    }

    /* ── Burbuja flotante ── */
    .ssc-bubble-text {
        max-width: 150px;
    font-size: 12px;
    padding: 7px 28px 7px 11px;
    bottom: 18px;
    right: 70px !important;
    left: auto !important;
    white-space: normal;
    line-height: 1.3;
    width: 150px;
    }

    /* ── Botón flotante — más grande para touch ── */
    .ssc-chat-button {
        width: 56px;
        height: 56px;
    }

    /* ── Ventana de chat — pantalla completa ── */
    .ssc-chat-window {
              position: fixed !important;
        bottom: 0% !important;
        left: 0 !important;
        right: 0 !important;
        top: 12% !important;
        width: 100% !important;
        height: 88% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
        box-sizing: border-box;
    }

    /* ── Header más compacto ── */
    .ssc-chat-header {
        padding: 12px 16px;
        padding-top: calc(12px + env(safe-area-inset-top));
    }
    .ssc-header-info h3  { font-size: 14px; }
    .ssc-status          { font-size: 11px; }
    .ssc-header-avatar   { width: 34px; height: 34px; }
    .ssc-header-avatar svg { width: 20px; height: 20px; }

    /* ── Barra de progreso más compacta ── */
    .ssc-progress-wrap   { padding: 5px 16px 8px; gap: 8px; }
    .ssc-progress-label  { font-size: 10px; min-width: 70px; }

    /* ── Área de mensajes ── */
    .ssc-chat-messages {
        padding: 14px 14px 10px;
        min-height: 80px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .ssc-message-bubble {
        font-size: 14px;
        padding: 10px 13px;
        line-height: 1.5;
    }
    .ssc-message-content { max-width: 88%; }

    /* ── Área de input ── */
    .ssc-chat-input-area {
        padding: 10px 12px;
        max-height: 48dvh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: calc(10px + env(safe-area-inset-bottom));
    }

    /* ── Opciones de respuesta: más fáciles de tocar ── */
    .ssc-options-container { gap: 8px; }

    .ssc-option-button {
        padding: 13px 14px;
        font-size: 14px;
        line-height: 1.4;
        min-height: 44px;
        border-radius: 12px;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }
    .ssc-option-button:hover { transform: none; }
    .ssc-option-button:active {
        transform: scale(0.97);
        background: color-mix(in srgb, var(--ssc-primary-color) 10%, white);
        border-color: var(--ssc-primary-color);
    }
    .ssc-option-button.active {
        padding-right: 38px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 8 6.5 11.5 13 4.5'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-size: 18px;
        background-position: right 12px center;
    }

    /* ── Input de texto — font-size 16px evita zoom en iOS ── */
    .ssc-text-input {
        font-size: 16px;
        padding: 12px 14px;
        border-radius: 24px;
    }
    .ssc-send-button { width: 46px; height: 46px; flex-shrink: 0; }

    /* ── Campo híbrido / texto libre ── */
    .ssc-free-text-input   { font-size: 16px; min-height: 64px; padding: 10px 12px; }
    .ssc-free-text-submit  { padding: 13px 20px; font-size: 15px; min-height: 48px; }
    .ssc-free-text-label   { font-size: 13px; }

    /* ── WhatsApp inputs — font-size 16px evita zoom en iOS ── */
    .ssc-wa-number-input,
    .ssc-country-select  { font-size: 16px; }

    /* ── Footer ── */
    .ssc-chat-footer {
        padding: 8px 12px;
        padding-bottom: calc(8px + env(safe-area-inset-bottom));
    }
    .ssc-footer-back-button,
    .ssc-restart-button {
        font-size: 12px;
        padding: 8px 10px;
        min-height: 36px;
    }

    /* ── Typing indicator ── */
    .ssc-typing-indicator { padding: 8px 12px; margin-bottom: 8px; }
    .ssc-typing-indicator span { width: 6px; height: 6px; }

    /* ── Skip button ── */
    .ssc-skip-button { font-size: 12px; padding: 6px 0; min-height: 36px; }
}

/* ── Pantallas muy pequeñas (≤ 360px) ── */
@media (max-width: 360px) {
    .ssc-option-button   { font-size: 13px; padding: 12px 13px; }
    .ssc-message-bubble  { font-size: 13px; }
    .ssc-chat-input-area { max-height: 44dvh; }
}

/* ── Landscape mobile ── */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
    .ssc-chat-window {
        position: fixed !important;
        top: 0 !important; bottom: 0 !important;
        left: 0 !important; right: 0 !important;
        width: 100% !important; height: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
    }
    .ssc-chat-messages   { min-height: 40px; }
    .ssc-chat-input-area { max-height: 55dvh; }
    .ssc-chat-header     { padding: 8px 14px; }
    .ssc-header-avatar   { display: none; }
    .ssc-progress-wrap   { padding: 4px 14px 6px; }
}

/* ── Consentimiento de privacidad (Ley 25.326) ─────────────────────────── */
.ssc-privacy-consent {
    padding: 10px 14px 8px;
    background: #f8f9fa;
    border-top: 1px solid #e9ecef;
    font-size: 12px;
    line-height: 1.5;
}
.ssc-privacy-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
    color: #555;
}
.ssc-privacy-checkbox {
    flex-shrink: 0;
    margin-top: 2px;
    width: 15px;
    height: 15px;
    cursor: pointer;
    accent-color: var(--ssc-primary-color, #0066cc);
}
.ssc-privacy-label a {
    color: var(--ssc-primary-color, #0066cc);
    text-decoration: underline;
}
.ssc-privacy-label a:hover {
    text-decoration: none;
}
.ssc-privacy-error {
    color: #d63638;
    font-size: 11px;
    margin: 6px 0 0 23px;
    font-weight: 600;
}

.ssc-privacy-submit-btn {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 10px 16px;
    background: var(--ssc-primary-color, #0066cc);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.1s;
    letter-spacing: 0.3px;
}
.ssc-privacy-submit-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.ssc-privacy-submit-btn:not(:disabled):hover {
    opacity: 0.88;
}
.ssc-privacy-submit-btn:not(:disabled):active {
    transform: scale(0.98);
}

/* ── Selector de canal (Opción A: chat + WhatsApp directo) ───────────────── */
.ssc-channel-selector {
    position: absolute;
    bottom: 74px;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-end;
    animation: ssc-selector-in 0.22s cubic-bezier(0.34,1.56,0.64,1);
    transform-origin: bottom right;
}
.ssc-position-bottom-left .ssc-channel-selector {
    right: auto;
    left: 0;
    align-items: flex-start;
    transform-origin: bottom left;
}
@keyframes ssc-selector-in {
    from { opacity: 0; transform: scale(0.85) translateY(10px); }
    to   { opacity: 1; transform: scale(1)    translateY(0); }
}

.ssc-channel-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 0;
    background: none;
    border: none;
    text-decoration: none;
}
/* Enlace invisible que cubre toda la opción de WA */
.ssc-channel-option > a {
    position: absolute;
    inset: 0;
    z-index: 2;
}
.ssc-position-bottom-left .ssc-channel-option {
    flex-direction: row-reverse;
}

.ssc-channel-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--ssc-shadow);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    flex-shrink: 0;
}
.ssc-channel-icon svg { width: 24px; height: 24px; }
.ssc-channel-icon--chat {
    background: var(--ssc-primary-color);
    color: var(--ssc-header-text-color, #fff);
}
.ssc-channel-icon--chat svg { color: var(--ssc-header-text-color, #fff); }
.ssc-channel-icon--wa {
    background: #25D366;
    color: #fff;
}
.ssc-channel-option:hover .ssc-channel-icon,
.ssc-channel-option:focus .ssc-channel-icon {
    transform: scale(1.1);
    box-shadow: var(--ssc-shadow-lg);
}

.ssc-channel-label {
    background: #fff;
    color: #333;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 20px;
    box-shadow: var(--ssc-shadow);
    white-space: nowrap;
    pointer-events: none;
}

/* ── Paso ask_channel — opción WhatsApp ──────────────────────────────────── */
.ssc-option-button.ssc-channel-wa-option {
    border-color: #25D366 !important;
    color: #1a9e4d !important;
}
.ssc-option-button.ssc-channel-wa-option:hover {
    background: #25D366 !important;
    color: #fff !important;
}
.ssc-option-icon {
    margin-right: 4px;
}