/* =========================================================
   FARO · TEMA DE ALTO CONTRASTE PARA n8n CHAT
   Paleta corporativa ZFP: azul, verde, blanco y gris frío.
   ========================================================= */

:root {
    /* Colores de marca */
    --faro-navy-950: #032a3d;
    --faro-navy-900: #053b55;
    --faro-blue-800: #075985;
    --faro-blue-900: #064b70;
    --faro-blue-950: #043b59;
    --faro-green-800: #0b5d4b;
    --faro-green-900: #084a3d;

    /* Superficies y texto */
    --faro-white: #ffffff;
    --faro-surface: #ffffff;
    --faro-canvas: #eef3f5;
    --faro-canvas-strong: #e1e9ed;
    --faro-border: #c7d5db;
    --faro-border-strong: #9eb3bc;
    --faro-text: #142f3a;
    --faro-text-muted: #526a74;
    --faro-focus: #7fbd42;
    --faro-danger: #b4232f;

    /* Variables nativas de n8n Chat */
    --chat--color-primary: var(--faro-blue-800);
    --chat--color-primary-shade-50: var(--faro-blue-900);
    --chat--color-primary-shade-100: var(--faro-blue-950);
    --chat--color-secondary: var(--faro-green-800);
    --chat--color-secondary-shade-50: var(--faro-green-900);
    --chat--color-white: var(--faro-white);
    --chat--color-light: var(--faro-canvas);
    --chat--color-light-shade-50: var(--faro-canvas-strong);
    --chat--color-light-shade-100: #d2dde2;
    --chat--color-medium: #80969f;
    --chat--color-dark: var(--faro-text);
    --chat--color-disabled: #5b6e77;
    --chat--color-typing: #344e5a;

    /* Tipografía */
    --chat--font-family:
        "Source Sans Pro",
        "Segoe UI",
        Arial,
        sans-serif;
    --faro-font-base: 18px;
    --faro-font-title: 26px;
    --faro-font-subtitle: 17px;
    --faro-font-message: 18px;
    --faro-font-input: 18px;
    --faro-font-button: 17px;
    --faro-font-footer: 14px;

    --chat--heading--font-size: var(--faro-font-title);
    --chat--subtitle--font-size: var(--faro-font-subtitle);
    --chat--message--font-size: var(--faro-font-message);
    --chat--input--font-size: var(--faro-font-input);
    --chat--input--placeholder--font-size: var(--faro-font-input);
    --chat--button--font-size: var(--faro-font-button);

    /* Ventana */
    --chat--spacing: 1rem;
    --chat--border-radius: 14px;
    --chat--transition-duration: 0.2s;
    --chat--window--width: 460px;
    --chat--window--height: min(700px, calc(100vh - 110px));
    --chat--window--border-radius: 20px;
    --chat--window--border: 1px solid rgba(5, 59, 85, 0.28);
    --chat--window--box-shadow:
        0 24px 65px rgba(3, 42, 61, 0.28),
        0 4px 14px rgba(3, 42, 61, 0.12);

    /* Encabezado */
    --chat--header--background:
        linear-gradient(
            135deg,
            var(--faro-navy-900) 0%,
            var(--faro-blue-800) 48%,
            var(--faro-green-800) 100%
        );
    --chat--header--color: var(--faro-white);
    --chat--header--padding: 20px 22px;
    --chat--subtitle--line-height: 1.45;

    /* Mensajes */
    --chat--message--font-size: var(--faro-font-message);
    --chat--message--padding: 14px 17px;
    --chat--message--border-radius: 15px;
    --chat--message-line-height: 1.65;

    --chat--message--bot--background: var(--faro-surface);
    --chat--message--bot--color: var(--faro-text);
    --chat--message--bot--border: 1px solid var(--faro-border);

    --chat--message--user--background: var(--faro-green-800);
    --chat--message--user--color: var(--faro-white);
    --chat--message--user--border: 1px solid var(--faro-green-900);

    /* Escritura y botón flotante */
    --chat--textarea--height: 56px;
    --chat--toggle--background: var(--faro-blue-800);
    --chat--toggle--hover--background: var(--faro-green-800);
    --chat--toggle--active--background: var(--faro-green-900);
    --chat--toggle--color: var(--faro-white);
    --chat--toggle--size: 62px;
}

/* =========================================================
   VENTANA Y CAPAS
   ========================================================= */

#n8n-chat .chat-window {
    overflow: hidden;
    border: var(--chat--window--border) !important;
    border-radius: var(--chat--window--border-radius) !important;
    color: var(--faro-text) !important;
    font-family: var(--chat--font-family) !important;
    font-size: var(--faro-font-base) !important;
    line-height: 1.5 !important;
    background: var(--faro-canvas) !important;
    box-shadow: var(--chat--window--box-shadow) !important;
}

#n8n-chat .chat-body,
#n8n-chat .chat-messages-list {
    background:
        linear-gradient(
            180deg,
            #f5f8f9 0%,
            var(--faro-canvas) 100%
        ) !important;
}

#n8n-chat .chat-messages-list {
    scrollbar-color: var(--faro-border-strong) transparent;
    scrollbar-width: thin;
}

#n8n-chat .chat-messages-list::-webkit-scrollbar {
    width: 8px;
}

#n8n-chat .chat-messages-list::-webkit-scrollbar-track {
    background: transparent;
}

#n8n-chat .chat-messages-list::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: var(--faro-border-strong);
    background-clip: padding-box;
}

/* =========================================================
   ENCABEZADO
   ========================================================= */

#n8n-chat .chat-header {
    color: var(--faro-white) !important;
    background: var(--chat--header--background) !important;
    box-shadow: 0 5px 18px rgba(3, 42, 61, 0.2);
}

#n8n-chat .chat-heading,
#n8n-chat .chat-header h1,
#n8n-chat .chat-header h2 {
    margin-bottom: 4px !important;
    color: var(--faro-white) !important;
    font-size: var(--faro-font-title) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em;
    text-shadow: 0 1px 2px rgba(3, 42, 61, 0.24);
}

#n8n-chat .chat-header p,
#n8n-chat .chat-subtitle {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: var(--faro-font-subtitle) !important;
    line-height: 1.45 !important;
}

#n8n-chat .chat-header button {
    color: var(--faro-white) !important;
}

/* =========================================================
   BURBUJAS DE MENSAJE
   ========================================================= */

#n8n-chat .chat-message {
    font-size: var(--faro-font-message) !important;
    line-height: 1.65 !important;
}

#n8n-chat .chat-message.chat-message-from-bot,
#n8n-chat .chat-message-from-bot .chat-message {
    border: 1px solid var(--faro-border) !important;
    color: var(--faro-text) !important;
    background: var(--faro-surface) !important;
    box-shadow: 0 4px 12px rgba(3, 42, 61, 0.08);
}

#n8n-chat .chat-message.chat-message-from-user,
#n8n-chat .chat-message-from-user .chat-message {
    border: 1px solid var(--faro-green-900) !important;
    color: var(--faro-white) !important;
    background: var(--faro-green-800) !important;
    box-shadow: 0 5px 14px rgba(8, 74, 61, 0.2);
}

#n8n-chat .chat-message p,
#n8n-chat .chat-message span,
#n8n-chat .chat-message li,
#n8n-chat .chat-message a,
#n8n-chat .chat-message strong,
#n8n-chat .chat-message code {
    font-size: inherit !important;
    line-height: inherit !important;
}

#n8n-chat .chat-message p {
    margin: 0 0 0.7rem;
}

#n8n-chat .chat-message p:last-child {
    margin-bottom: 0;
}

#n8n-chat .chat-message ul,
#n8n-chat .chat-message ol {
    margin: 0.55rem 0 0.65rem;
    padding-left: 1.35rem;
    font-size: inherit !important;
    line-height: 1.65 !important;
}

#n8n-chat .chat-message li + li {
    margin-top: 0.3rem;
}

#n8n-chat .chat-message h1,
#n8n-chat .chat-message h2,
#n8n-chat .chat-message h3 {
    margin: 0.85rem 0 0.45rem;
    color: inherit !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}

#n8n-chat .chat-message h1 {
    font-size: 1.4em !important;
}

#n8n-chat .chat-message h2 {
    font-size: 1.28em !important;
}

#n8n-chat .chat-message h3 {
    font-size: 1.16em !important;
}

#n8n-chat .chat-message-from-bot a {
    color: #065f73 !important;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

#n8n-chat .chat-message-from-user a {
    color: var(--faro-white) !important;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

#n8n-chat .chat-message-from-bot code {
    border: 1px solid #c6d5db;
    border-radius: 6px;
    color: var(--faro-navy-950) !important;
    background: #e8eff2;
}

#n8n-chat .chat-message pre {
    overflow-x: auto;
    padding: 0.85rem 1rem;
    border: 1px solid #214a5b;
    border-radius: 10px;
    color: #f7fbfc !important;
    background: #0a2f40 !important;
}

#n8n-chat .chat-message pre code {
    border: 0;
    color: inherit !important;
    background: transparent !important;
}

#n8n-chat .chat-message blockquote {
    margin: 0.7rem 0;
    padding: 0.25rem 0 0.25rem 0.85rem;
    border-left: 4px solid var(--faro-green-800);
    color: var(--faro-text-muted);
}

#n8n-chat .chat-message-from-user blockquote {
    border-left-color: rgba(255, 255, 255, 0.75);
    color: rgba(255, 255, 255, 0.92);
}

/* Indicador de escritura */
#n8n-chat .chat-typing,
#n8n-chat .chat-message-typing {
    color: #344e5a !important;
}


/* =========================================================
   BOTÓN FLOTANTE Y PIE
   ========================================================= */

#n8n-chat .chat-window-toggle {
    border: 2px solid rgba(255, 255, 255, 0.9) !important;
    color: var(--faro-white) !important;
    background: var(--faro-blue-800) !important;
    box-shadow:
        0 14px 32px rgba(3, 42, 61, 0.3),
        0 0 0 5px rgba(7, 89, 133, 0.13) !important;
    margin-bottom: 50px;
}

#n8n-chat .chat-window-toggle:hover {
    transform: translateY(-2px);
    background: var(--faro-green-800) !important;
}

#n8n-chat .chat-window-toggle:active {
    transform: translateY(0);
    background: var(--faro-green-900) !important;
}

#n8n-chat .chat-footer {
    border-top: 1px solid var(--faro-border) !important;
    color: var(--faro-text-muted) !important;
    font-size: var(--faro-font-footer) !important;
    background: #f7f9fa !important;
}

#n8n-chat .chat-footer a {
    color: #065f73 !important;
    font-weight: 700;
    text-decoration: underline;
}

#n8n-chat .chat-heading > h1 {
    display: flex !important;
    align-items: center;
    gap: 10px;
    margin: 0;
}

#n8n-chat .chat-heading > h1::before {
    content: "";
    width: 42px;
    height: 42px;
    flex: 0 0 42px;

    background-image: url("../images/ico-white.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;

    border-radius: 12px;
    border: 2px solid rgba(255, 255, 255, 0.28);
    box-shadow: 0 6px 16px rgba(7, 26, 36, 0.18);
}

/* Alinea el subtítulo con el texto y no con el icono */
#n8n-chat .chat-header > p {
    margin-left: 52px !important;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 576px) {
    :root {
        --faro-font-base: 17px;
        --faro-font-title: 23px;
        --faro-font-subtitle: 16px;
        --faro-font-message: 17px;
        --faro-font-input: 17px;
        --faro-font-button: 16px;
        --chat--window--width: calc(100vw - 16px);
        --chat--window--height: calc(100dvh - 80px);
        --chat--window--border-radius: 16px;
        --chat--header--padding: 17px 18px;
        --chat--message--padding: 12px 14px;
    }

    #n8n-chat .chat-window {
        max-height: calc(100dvh - 80px);
    }
}

@media (prefers-reduced-motion: reduce) {
    #n8n-chat *,
    #n8n-chat *::before,
    #n8n-chat *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}