:root {
    /* =========================================================
       CORES
       ========================================================= */

    --chat--color--primary: #2563eb;
    --chat--color--primary-shade-50: #1d4ed8;
    --chat--color--primary--shade-100: #1e40af;

    --chat--color--secondary: #16a34a;
    --chat--color-secondary-shade-50: #15803d;

    --chat--color-white: #ffffff;

    --chat--color-light: #f8fafc;
    --chat--color-light-shade-50: #f1f5f9;
    --chat--color-light-shade-100: #e2e8f0;

    --chat--color-medium: #cbd5e1;

    --chat--color-dark: #0f172a;

    --chat--color-disabled: #cbd5e1;

    --chat--color-typing: #64748b;

    /* =========================================================
       BASE
       ========================================================= */

    --chat--spacing: 1rem;

    --chat--border-radius: 12px;

    --chat--transition-duration: 0.2s;

    --chat--font-family:
        Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue",
        sans-serif;

    /* =========================================================
       JANELA
       ========================================================= */

    --chat--window--width: 390px;
    --chat--window--height: 620px;

    --chat--window--bottom: 100px;
    --chat--window--right: 20px;

    --chat--window--z-index: 10050;

    --chat--window--border: 1px solid #e2e8f0;

    --chat--window--border-radius: 18px;

    --chat--window--margin-bottom: 12px;

    /* =========================================================
       HEADER
       ========================================================= */

    --chat--header-height: auto;

    --chat--header--padding: 18px 20px;

    /* Fallback; sobrescrito em runtime por FRONTOFFICE_PRIMARY_COLOR (footer.php) */
    --chat--header--background: #0f172a;

    --chat--header--color: #ffffff;

    --chat--header--border-top: none;
    --chat--header--border-bottom: none;
    --chat--header--border-left: none;
    --chat--header--border-right: none;

    --chat--heading--font-size: 1.05rem;

    --chat--subtitle--font-size: 0.82rem;

    --chat--subtitle--line-height: 1.4;

    /* =========================================================
       MENSAGENS
       ========================================================= */

    --chat--message--font-size: 0.94rem;

    --chat--message--padding: 11px 14px;

    --chat--message--border-radius: 14px;

    --chat--message-line-height: 1.5;

    --chat--message--margin-bottom: 10px;

    /* BOT */

    --chat--message--bot--background: #ffffff;

    --chat--message--bot--color: #1e293b;

    --chat--message--bot--border: 1px solid #e2e8f0;

    /* USUÁRIO */

    --chat--message--user--background: #2563eb;

    --chat--message--user--color: #ffffff;

    --chat--message--user--border: none;

    /* Código */

    --chat--message--pre--background: #f1f5f9;

    --chat--messages-list--padding: 16px;

    /* =========================================================
       BOTÃO FLUTUANTE
       ========================================================= */

    --chat--toggle--size: 58px;

    --chat--toggle--width: 58px;

    --chat--toggle--height: 58px;

    --chat--toggle--border-radius: 50%;

    --chat--toggle--background: #2563eb;

    --chat--toggle--hover--background: #1d4ed8;

    --chat--toggle--active--background: #1e40af;

    --chat--toggle--color: #ffffff;

    /* =========================================================
       INPUT
       ========================================================= */

    --chat--textarea--height: 44px;

    --chat--textarea--max-height: 160px;

    --chat--input--font-size: 0.95rem;

    --chat--input--border: 0;

    --chat--input--border-radius: 0;

    --chat--input--padding: 10px 12px;

    --chat--input--background: #ffffff;

    --chat--input--text-color: #0f172a;

    --chat--input--line-height: 1.4;

    --chat--input--placeholder--font-size: 0.9rem;

    --chat--input--border-active: 0;

    --chat--input--left--panel--width: 2rem;

    --chat--input--container--background: #ffffff;

    --chat--input--container--border: 0;

    --chat--input--container--border-radius: 0;

    --chat--input--container--padding: 6px 8px 6px 6px;

    --chat--input--button--border-radius: 8px;

    /* =========================================================
       BOTÕES
       ========================================================= */

    --chat--button--padding: 10px 16px;

    --chat--button--border-radius: 10px;

    --chat--button--font-size: 0.9rem;

    --chat--button--line-height: 1.2;

    --chat--button--color--primary: #ffffff;

    --chat--button--background--primary: #2563eb;

    --chat--button--border--primary: none;

    --chat--button--color--primary--hover: #ffffff;

    --chat--button--background--primary--hover: #1d4ed8;

    --chat--button--border--primary--hover: none;

    --chat--button--color--primary--disabled: #ffffff;

    --chat--button--background--primary--disabled: #93c5fd;

    --chat--button--border--primary--disabled: none;

    --chat--button--color--secondary: #ffffff;

    --chat--button--background--secondary: #64748b;

    --chat--button--border--secondary: none;

    --chat--button--color--secondary--hover: #ffffff;

    --chat--button--background--secondary--hover: #475569;

    --chat--button--border--secondary--hover: none;

    --chat--button--color--secondary--disabled: #ffffff;

    --chat--button--background--secondary--disabled: #cbd5e1;

    --chat--close--button--color-hover: #93c5fd;

    /* =========================================================
       ENVIO / ARQUIVOS
       ========================================================= */

    --chat--input--send--button--background: transparent;

    --chat--input--send--button--color: #2563eb;

    --chat--input--send--button--background-hover: #eff6ff;

    --chat--input--send--button--color-hover: #1d4ed8;

    --chat--input--file--button--background: transparent;

    --chat--input--file--button--color: #64748b;

    --chat--input--file--button--background-hover: #f1f5f9;

    --chat--input--file--button--color-hover: #2563eb;

    --chat--files-spacing: 0.25rem;

    /* =========================================================
       BODY / FOOTER
       ========================================================= */

    --chat--body--background: #f8fafc;

    --chat--footer--background: #ffffff;

    --chat--footer--color: #0f172a;
}

/* =========================================================
     MENSAGENS
     ========================================================= */

.chat-message {
    width: fit-content;
    max-width: 78%;
    border-radius: 14px;
    box-shadow: none;
}

/* Mensagem do usuário */

.chat-message.chat-message-from-user {
    margin-left: auto;
    width: fit-content;
    max-width: 78%;
}

/* Mensagem do bot */

.chat-message.chat-message-from-bot {
    margin-right: auto;
    width: fit-content;
    max-width: 78%;
}

/* Indicador "digitando..." — compacto, centralizado; sem bounce (desalinha visualmente) */
.n8n-chat .chat-message.chat-message-typing {
    max-width: none !important;
    width: auto !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 12px 16px !important;
    margin-top: var(--chat--message--margin-bottom, 10px);
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    line-height: 0 !important;
}

.n8n-chat .chat-message-typing .chat-message-typing-body {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px;
    margin: 0 !important;
    padding: 0 !important;
    height: 10px !important;
    min-height: 10px !important;
    line-height: 0 !important;
}

.n8n-chat .chat-message-typing .chat-message-typing-circle {
    width: 8px !important;
    height: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    flex-shrink: 0;
    position: relative;
    top: 0 !important;
    transform: none;
    animation-name: n8n-chat-typing-pulse !important;
    animation-duration: 0.9s !important;
    animation-timing-function: ease-in-out !important;
    animation-iteration-count: infinite !important;
}

.n8n-chat .chat-message-typing .chat-message-typing-circle:nth-child(1) {
    animation-delay: 0s !important;
}

.n8n-chat .chat-message-typing .chat-message-typing-circle:nth-child(2) {
    animation-delay: 0.15s !important;
}

.n8n-chat .chat-message-typing .chat-message-typing-circle:nth-child(3) {
    animation-delay: 0.3s !important;
}

@keyframes n8n-chat-typing-pulse {
    0%,
    80%,
    100% {
        transform: scale(0.85);
        opacity: 0.45;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* =========================================================
     JANELA
     ========================================================= */

.chat-window {
    box-shadow:
        0 20px 50px rgba(15, 23, 42, 0.18),
        0 5px 15px rgba(15, 23, 42, 0.08);
}

/* =========================================================
     HEADER
     ========================================================= */

.chat-header {
    border-radius: 18px 18px 0 0;
}

.chat-heading h1 {
    display: flex;
    align-items: center;
    gap: 10px;
}

.chat-heading h1 .n8n-chat-logo {
    width: 33px;
    height: 33px;
    object-fit: contain;
    flex-shrink: 0;
}

.n8n-chat .chat-heading {
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.n8n-chat .chat-close-button {
    color: #ffffff;
    opacity: 0.9;
    padding: 4px;
    margin: 0;
    flex-shrink: 0;
    cursor: pointer;
    background: transparent;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: opacity 0.15s ease, background 0.15s ease;
}

.n8n-chat .chat-close-button:hover {
    opacity: 1;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.15);
}

/* =========================================================
     ÁREA DAS MENSAGENS
     ========================================================= */

.chat-messages-list {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

/* Chrome / Edge / Safari */

.chat-messages-list::-webkit-scrollbar {
    width: 6px;
}

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

.chat-messages-list::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

.chat-messages-list::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* =========================================================
     INPUT
     ========================================================= */

.n8n-chat .chat-input {
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.n8n-chat .chat-input:focus-within {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.n8n-chat .chat-inputs {
    align-items: center !important;
    gap: 4px;
}

.n8n-chat .chat-inputs textarea {
    display: block;
    margin: 0;
    padding: 10px 12px !important;
    line-height: 1.4;
    min-height: 44px !important;
    max-height: var(--chat--textarea--max-height, 160px);
    box-sizing: border-box !important;
    /* Sem setas em 1 linha; o n8n ajusta a altura ao digitar */
    overflow-y: hidden !important;
    resize: none;
    scrollbar-width: none;
}

.n8n-chat .chat-inputs textarea::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.n8n-chat .chat-inputs-controls {
    display: flex;
    align-items: center;
    align-self: center;
    height: 44px;
}

.n8n-chat .chat-input-send-button,
.n8n-chat .chat-input-file-button {
    margin: 0 !important;
    height: 40px !important;
    width: 40px !important;
    flex-shrink: 0;
    align-self: center !important;
    font-size: 20px;
}

/* =========================================================
     BOTÃO FLUTUANTE
     ========================================================= */

/* Sobe o chat acima do WhatsApp (70px + bottom 20px) e fica na frente */
.n8n-chat .chat-window-wrapper {
    z-index: var(--chat--window--z-index, 10050);
}

.n8n-chat .chat-window-toggle {
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.25);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
    position: relative;
    z-index: 1;
}

.n8n-chat .chat-window-toggle:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(15, 23, 42, 0.3);
}

/* Quando o chat está ativo, o WhatsApp não cobre o toggle */
body:has(.chat-window-wrapper) .wpp-floater {
    z-index: 10;
    bottom: 20px;
    right: 15px;
}

/* =========================================================
     RESPONSIVO
     ========================================================= */

@media (max-width: 640px) {
    :root {
        --chat--window--width: calc(100vw - 20px);
        --chat--window--height: calc(100vh - 120px);

        --chat--window--right: 10px;
        --chat--window--bottom: 100px;

        --chat--window--border-radius: 16px;
    }

    .chat-message {
        max-width: 88%;
    }
}