/*
 * Estilos del chatbot AI Chat Widget
 * Los colores se controlan con CSS custom properties definidas inline en el HTML
 * para que sean configurables desde el panel de admin sin regenerar CSS.
 */

/* ──────────────────────────────────────────────
   Disparador externo del chat (botones fuera de la burbuja)
   ────────────────────────────────────────────── */

/* Solo el cursor: no tocamos ninguna otra propiedad visual del elemento
   que el usuario marque con esta clase (ej. un botón de Elementor). */
.nswchat-chat-toggle {
    cursor: pointer;
}

/* ──────────────────────────────────────────────
   Variables y contenedor principal
   ────────────────────────────────────────────── */

#nswchat-bot-container {
    /* Valores por defecto (se sobreescriben con los del admin vía inline style) */
    --nswchat-primary:   #D6FF00; /* NosoloWebs yellow */
    --nswchat-secondary: #1D1D1D; /* NosoloWebs black */
    --nswchat-on-primary: #1D1D1D;
    --nswchat-on-secondary: #ffffff;
    --nswchat-gray-1: #EAEAEA;
    --nswchat-gray-2: #9C9C9C;

    /* Variables internas fijas */
    --nswchat-sombra:    0 8px 32px rgba(0, 0, 0, 0.18);
    --nswchat-font:      -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --nswchat-z:         999999;

    position: fixed;
    z-index: var(--nswchat-z);
    font-family: var(--nswchat-font);
    font-size: 14px;
    line-height: 1.5;
    box-sizing: border-box;
    /* Blindaje frente a temas/page builders: algunos aplican un borde visible por
       defecto a elementos con role="complementary" (lo tratan como un landmark de
       tipo "sidebar"). El widget no debe heredar ningún borde/fondo del tema anfitrión. */
    border: none;
    background: none;
}

#nswchat-bot-container *,
#nswchat-bot-container *::before,
#nswchat-bot-container *::after {
    box-sizing: inherit;
}

/* ──────────────────────────────────────────────
   Posicionamiento
   ────────────────────────────────────────────── */

#nswchat-bot-container.nswchat-posicion-bottom-right {
    bottom: var(--nswchat-offset-v, 24px);
    right:  var(--nswchat-offset-h, 24px);
}

#nswchat-bot-container.nswchat-posicion-bottom-left {
    bottom: var(--nswchat-offset-v, 24px);
    left:   var(--nswchat-offset-h, 24px);
}

/* Nota: el offset/tamaño responsive (breakpoints definidos en el admin) se genera
   dinámicamente como <style> en templates/chat-bubble.php y siempre sobreescribe
   estos valores por defecto en los anchos que correspondan. */

/* ──────────────────────────────────────────────
   Botón burbuja flotante
   ────────────────────────────────────────────── */

#nswchat-bubble-btn {
    position: relative;
    width:  var(--nswchat-bubble-size, 56px);
    height: var(--nswchat-bubble-size, 56px);
    border-radius: var(--nswchat-bubble-radius, 15px);
    background: var(--nswchat-bubble-bg, var(--nswchat-primary));
    border: var(--nswchat-bubble-border-width, 0px) solid var(--nswchat-bubble-border-color, transparent);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    /* drop-shadow (en vez de box-shadow) para que la sombra siga la silueta real
       de la burbuja INCLUYENDO la cola del bocadillo (::after). */
    filter: drop-shadow(0 8px 22px rgba(0, 0, 0, 0.18));
    transition: transform 0.2s ease, filter 0.2s ease;
    padding: var(--nswchat-bubble-padding, 10px);
    outline-offset: 3px;
}

#nswchat-bubble-btn:hover {
    transform: scale(1.08) translateY(-2px);
    filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.24));
}

#nswchat-bubble-btn:active {
    transform: scale(0.96);
}

/* Cola de bocadillo: forma de cola de cómic (curva, tipo media luna) recortada con
   una MÁSCARA SVG del mismo color, pintada detrás del icono (z-index negativo dentro
   del contexto de apilado que crea el filter) pero por encima del fondo, así se funde
   con la burbuja. La máscara escala con viewBox, por eso el tamaño es proporcional al
   de la burbuja. Al ser hija del botón se mueve con el hover y comparte la sombra vía
   drop-shadow. Se oculta por defecto; cada clase .nswchat-cola-* la muestra y la orienta
   hacia la esquina elegida en el admin. */
#nswchat-bubble-btn::after {
    content: "";
    position: absolute;
    display: none;
    /* Tamaño en % del botón (no de la variable): así la cola escala con el tamaño
       REAL del botón, aunque un breakpoint lo cambie con width/height literales sin
       tocar --nswchat-bubble-size. */
    width:  70.8%;
    height: 70.8%;
    background: var(--nswchat-bubble-bg, var(--nswchat-primary));
    z-index: -1;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 92 92'%3E%3Cpath fill='white' d='M22 10L54 10C62 32 56 56 46 74C42 52 30 30 22 10Z'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 92 92'%3E%3Cpath fill='white' d='M22 10L54 10C62 32 56 56 46 74C42 52 30 30 22 10Z'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
}

/* Cola en la esquina inferior derecha */
.nswchat-cola-right #nswchat-bubble-btn::after {
    display: block;
    right: -17%;
    bottom: -13%;
    transform-origin: center;
    transform: rotate(135deg) scaleY(-1) scale(1.7);
}

/* Cola en la esquina inferior izquierda (espejo horizontal) */
.nswchat-cola-left #nswchat-bubble-btn::after {
    display: block;
    left: -17%;
    bottom: -13%;
    transform-origin: center;
    transform: rotate(135deg) scaleY(-1) scale(1.7) scaleX(-1);
}

/* El icono debe quedar rounded sin depender de overflow:hidden (que ahora
   recortaría la cola). border-radius clip funciona en imágenes y SVG. */
#nswchat-bubble-btn svg,
#nswchat-bubble-btn .nswchat-icono-custom {
    width:  100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border-radius: inherit;
}

/* Punto rojo de novedad */
.nswchat-bubble-punto {
    position: absolute;
    top:   3px;
    right: 3px;
    width:  12px;
    height: 12px;
    background: #ff3b30;
    border-radius: 50%;
    border: 2px solid white;
    display: none; /* El JS lo muestra cuando hay mensajes nuevos */
}

/* ──────────────────────────────────────────────
   Ventana del chat
   ────────────────────────────────────────────── */

#nswchat-chat-window {
    position: absolute;
    bottom: calc(var(--nswchat-bubble-size, 56px) + var(--nswchat-offset-v, 24px) - 12px); /* Por encima del botón burbuja */
    width: var(--nswchat-window-width, 360px);
    max-height: var(--nswchat-window-max-height, 520px);
    background: var(--nswchat-window-bg, #ffffff);
    border-radius: var(--nswchat-window-radius, 16px);
    box-shadow: var(--nswchat-sombra);
    display: flex;
    flex-direction: column;
    overflow: hidden;

    /* Animación de entrada */
    transform-origin: bottom center;
    animation: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Posicionamiento de la ventana según lado */
.nswchat-posicion-bottom-right #nswchat-chat-window {
    right: 0;
}

.nswchat-posicion-bottom-left #nswchat-chat-window {
    left: 0;
}

/* Estado hidden (el atributo [hidden] oculta el elemento,
   pero también añadimos la transición de salida) */
#nswchat-chat-window[hidden] {
    display: none;
}

/* Animación al abrir */
@keyframes nswchat-abrir {
    from {
        opacity: 0;
        transform: scale(0.92) translateY(12px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

#nswchat-chat-window.nswchat-visible {
    animation: nswchat-abrir 0.22s ease forwards;
}

/* ──────────────────────────────────────────────
   Cabecera del chat
   ────────────────────────────────────────────── */

#nswchat-chat-header {
    background: var(--nswchat-secondary);
    color: var(--nswchat-on-secondary);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.nswchat-header-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nswchat-header-avatar {
    width:  36px;
    height: 36px;
    border-radius: 50%;
    background: var(--nswchat-avatar-bg, rgba(255,255,255,0.15));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.nswchat-header-avatar svg,
.nswchat-header-avatar img {
    width:  28px;
    height: 28px;
    object-fit: contain;
}

.nswchat-header-nombre {
    font-weight: 600;
    font-size: 15px;
    line-height: 1.2;
}

.nswchat-header-estado {
    font-size: 12px;
    opacity: 0.8;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
}

.nswchat-estado-punto {
    width: 7px;
    height: 7px;
    background: #4ade80;
    border-radius: 50%;
    display: inline-block;
}

.nswchat-header-acciones {
    display: flex;
    align-items: center;
    gap: 4px;
}

.nswchat-header-acciones button {
    /* Todos los valores tienen variable con el default EXACTO del diseño original
       (transparente en reposo, sin borde): personalizables desde Apariencia > Botones
       de cabecera sin cambiar el aspecto por defecto. */
    background: var(--nswchat-header-btn-bg, transparent);
    border: var(--nswchat-header-btn-border-width, 0px) solid var(--nswchat-header-btn-border-color, transparent);
    /* Sin esto, WebKit/Blink aplican su propio "push-button" nativo en :hover/:active
       que puede pintar una esquina distinta a la definida por border-radius abajo. */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    /* Sin opacity aquí a propósito: el color configurado (fondo, icono, borde)
       debe verse siempre a su tono exacto, no atenuado, y solo cambiar en :hover
       a los valores de hover configurados — no a una versión más "brillante" del
       mismo color por un opacity global. */
    color: var(--nswchat-header-btn-icon-color, var(--nswchat-on-secondary));
    padding: var(--nswchat-header-btn-padding-top, 6px) var(--nswchat-header-btn-padding-right, 6px) var(--nswchat-header-btn-padding-bottom, 6px) var(--nswchat-header-btn-padding-left, 6px);
    border-radius: var(--nswchat-header-btn-radius, 6px);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Tamaño de icono normalizado: ambos botones (recargar y cerrar) miden lo mismo
   aunque el markup o el CSS del tema digan otra cosa. */
.nswchat-header-acciones button svg {
    width: 16px;
    height: 16px;
    display: block;
    flex-shrink: 0;
}

.nswchat-header-acciones button:hover,
.nswchat-header-acciones button:focus-visible,
.nswchat-header-acciones button:active {
    background: var(--nswchat-header-btn-bg-hover, rgba(255,255,255,0.15));
    color: var(--nswchat-header-btn-icon-color-hover, var(--nswchat-header-btn-icon-color, var(--nswchat-on-secondary)));
    border-width: var(--nswchat-header-btn-border-width-hover, 0px);
    border-color: var(--nswchat-header-btn-border-color-hover, transparent);
    /* Redeclarado (no solo heredado) para que el CSS de un tema anfitrión no pueda
       pisarlo con una regla button:hover/:focus/:active más específica que la nuestra. */
    border-radius: var(--nswchat-header-btn-radius, 6px);
}

/* ──────────────────────────────────────────────
   Zona de mensajes
   ────────────────────────────────────────────── */

#nswchat-mensajes {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    scroll-behavior: smooth;
}

/* Scrollbar fina y discreta */
#nswchat-mensajes::-webkit-scrollbar {
    width: 4px;
}
#nswchat-mensajes::-webkit-scrollbar-track {
    background: transparent;
}
#nswchat-mensajes::-webkit-scrollbar-thumb {
    background: var(--nswchat-gray-2);
    border-radius: 4px;
}

/* ──────────────────────────────────────────────
   Burbujas de mensaje
   ────────────────────────────────────────────── */

.nswchat-mensaje {
    max-width: 82%;
    padding: var(--nswchat-msg-padding-top, 10px) var(--nswchat-msg-padding-right, 14px) var(--nswchat-msg-padding-bottom, 10px) var(--nswchat-msg-padding-left, 14px);
    border-radius: var(--nswchat-msg-radius, 16px);
    font-size: 14px;
    line-height: 1.55;
    word-wrap: break-word;
    animation: nswchat-mensaje-entrada 0.2s ease;
}

@keyframes nswchat-mensaje-entrada {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Mensajes del usuario (derecha, color primario). La esquina de la "cola" (abajo-derecha)
   se mantiene fija en 4px — es un detalle de diseño menor, no una de las propiedades
   personalizables; las otras 3 esquinas siguen el radio configurado en Apariencia > Mensajes. */
.nswchat-mensaje-user {
    background: var(--nswchat-msg-user-bg, var(--nswchat-primary));
    color: var(--nswchat-msg-user-text, var(--nswchat-on-primary));
    margin-left: auto;
    border-radius: var(--nswchat-msg-radius, 16px) var(--nswchat-msg-radius, 16px) 4px var(--nswchat-msg-radius, 16px);
}

/* Mensajes del bot (izquierda, gris claro). Misma lógica de esquina fija que arriba,
   mantenida en el indicador "escribiendo..." (mismo componente visual). */
.nswchat-mensaje-assistant {
    background: var(--nswchat-msg-assistant-bg, var(--nswchat-gray-1));
    color: var(--nswchat-msg-assistant-text, var(--nswchat-secondary));
    margin-right: auto;
    border-radius: var(--nswchat-msg-radius, 16px) var(--nswchat-msg-radius, 16px) var(--nswchat-msg-radius, 16px) 4px;
}

/* Mensajes de error */
.nswchat-mensaje-error {
    background: #fff0f0;
    color: #c0392b;
    border: 1px solid #fcc;
    margin-right: auto;
    border-radius: var(--nswchat-msg-radius, 16px) var(--nswchat-msg-radius, 16px) var(--nswchat-msg-radius, 16px) 4px;
    font-size: 13px;
}

/* ──────────────────────────────────────────────
   Indicador "escribiendo..."
   ────────────────────────────────────────────── */

#nswchat-typing {
    padding: 8px 16px 4px;
    flex-shrink: 0;
}

.nswchat-typing-burbuja {
    background: var(--nswchat-msg-assistant-bg, var(--nswchat-gray-1));
    border-radius: var(--nswchat-msg-radius, 16px) var(--nswchat-msg-radius, 16px) var(--nswchat-msg-radius, 16px) 4px;
    padding: 10px 16px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.nswchat-typing-punto {
    width: 7px;
    height: 7px;
    background: var(--nswchat-gray-2);
    border-radius: 50%;
    animation: nswchat-typing-bounce 1.2s infinite ease-in-out;
}

.nswchat-typing-punto:nth-child(2) { animation-delay: 0.2s; }
.nswchat-typing-punto:nth-child(3) { animation-delay: 0.4s; }

@keyframes nswchat-typing-bounce {
    0%, 60%, 100% { transform: translateY(0); }
    30%            { transform: translateY(-5px); }
}

/* ──────────────────────────────────────────────
   Área de input
   ────────────────────────────────────────────── */

#nswchat-chat-input-area {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 12px 12px 12px 16px;
    border-top: 1px solid var(--nswchat-gray-1);
    flex-shrink: 0;
    background: #ffffff;
}

#nswchat-input-mensaje {
    flex: 1;
    border: 1px solid var(--nswchat-gray-1);
    border-radius: 20px;
    padding: 9px 14px;
    font-family: var(--nswchat-font);
    font-size: 14px;
    line-height: 1.4;
    resize: none;
    overflow-y: hidden;
    max-height: 120px;
    outline: none;
    transition: border-color 0.15s ease;
    background: var(--nswchat-gray-1);
    color: var(--nswchat-secondary);
}

#nswchat-input-mensaje:focus {
    border-color: var(--nswchat-primary);
    background: white;
    overflow-y: auto;
}

#nswchat-input-mensaje::placeholder {
    color: var(--nswchat-gray-2);
}

#nswchat-enviar-btn {
    width:  38px;
    height: 38px;
    border-radius: 50%;
    background: var(--nswchat-primary);
    border: none;
    cursor: pointer;
    color: var(--nswchat-on-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s ease, transform 0.1s ease, opacity 0.15s ease;
    padding: 0;
}

#nswchat-enviar-btn:hover:not(:disabled) {
    filter: brightness(1.1);
    transform: scale(1.05);
}

#nswchat-enviar-btn:active:not(:disabled) {
    transform: scale(0.95);
}

#nswchat-enviar-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ──────────────────────────────────────────────
   Pie del chat
   ────────────────────────────────────────────── */

#nswchat-chat-footer {
    /* Color fijo (no personalizable): el pie debe seguir siendo legible pase lo que
       pase con el color de fondo de la ventana, así que no se expone como opción. */
    text-align: center;
    font-size: 11px;
    color: var(--nswchat-gray-2);
    padding: 6px 12px 8px;
    border-top: 1px solid #f0f0f0;
    background: white;
    flex-shrink: 0;
}

.nswchat-footer-sep {
    margin: 0 4px;
    color: var(--nswchat-gray-1);
}

/* Un tema anfitrión suele traer reglas globales para "a" y "strong" (tipografía,
   tamaños de enlaces) que pueden colarse aquí y verse más grandes de lo previsto;
   forzamos que hereden el tamaño/peso del pie en vez del que imponga el tema. */
#nswchat-chat-footer strong {
    font-size: inherit !important;
    font-weight: 600 !important;
}

.nswchat-footer-link,
.nswchat-footer-link-brand {
    font-size: inherit !important;
    color: var(--nswchat-gray-2) !important;
    text-decoration: none !important;
    transition: color 0.15s ease;
}

.nswchat-footer-link:hover {
    color: var(--nswchat-primary) !important;
    text-decoration: underline !important;
}

/* ──────────────────────────────────────────────
   Responsive: móvil
   ────────────────────────────────────────────── */

@media (max-width: 480px) {
    /* La ventana ocupa casi todo el ancho del viewport (no del contenedor, que solo
       mide lo que la burbuja). El eje vertical (bottom) lo siguen controlando la regla
       base y los <style> por breakpoint; aquí solo tocamos ancho y anclaje horizontal. */
    #nswchat-chat-window {
        width: calc(100vw - 24px);
        max-height: 75vh;
        /* Sigue al radio configurado en Apariencia > Ventana en vez de un valor fijo */
        border-radius: var(--nswchat-window-radius, 16px) var(--nswchat-window-radius, 16px) 12px 12px;
    }

    /* El contenedor está desplazado del borde por --nswchat-offset-h; lo neutralizamos
       para que la ventana quede a ~12px de cada borde del viewport. */
    .nswchat-posicion-bottom-right #nswchat-chat-window {
        right: calc(12px - var(--nswchat-offset-h, 16px));
        left: auto;
    }

    .nswchat-posicion-bottom-left #nswchat-chat-window {
        left: calc(12px - var(--nswchat-offset-h, 16px));
        right: auto;
    }
}