/* ===== XIPHIAS Chat – Brand Theme (Blue: #0F2D81, Yellow: #FFC400) ===== */

/* 1) n8n chat variables */
:root,
#n8n-chat {
    --chat--font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --chat--color-primary: #0F2D81; /* brand blue */
    --chat--color-primary-shade-50: #163A9E; /* darker blue */
    --chat--color-primary-shade-100: #0B215F; /* deepest */
    --chat--color-secondary: #FFC400; /* brand yellow */
    --chat--color-tertiary: #2D5BC6; /* action blue */

    --chat--color-bg: #FFFFFF;
    --chat--color-surface: #F5F7FB;
    --chat--color-border: #E3E8EF;
    --chat--radius: 14px;
}

/* 2) Right dock panel */
.chat-layout.chat-wrapper.n8n-chat {
    position: fixed !important;
    top: 16px !important;
    right: 16px !important;
    bottom: 16px !important;
    width: 420px !important;
    max-width: 92vw !important;
    border-radius: var(--chat--radius) !important;
    overflow: hidden !important;
    background: var(--chat--color-bg) !important;
    font-family: var(--chat--font-family) !important;
    box-shadow: 0 18px 40px rgba(15,45,129,0.25) !important;
}

/* 3) Header – brand blue bar with yellow underline */
.n8n-chat .chat-header {
    background: #0F2D81 !important;
    color: #fff !important;
    padding: 18px 22px !important;
    border-bottom: 4px solid #FFC400 !important;
}

    .n8n-chat .chat-header .chat-heading h1 {
        color: #fff !important;
        font-weight: 700 !important;
        font-size: 22px !important;
        letter-spacing: .2px !important;
        margin: 0 0 6px 0 !important;
    }

    .n8n-chat .chat-header p {
        margin: 0 !important;
        opacity: .92 !important;
        font-weight: 500 !important;
        font-size: 13px !important;
    }

/* 4) Body */
.n8n-chat .chat-body {
    background: #FFFFFF !important;
    padding: 14px !important;
}

/* Ensure WhatsApp-like column flow (not centered) */
.n8n-chat .chat-messages-list {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important; /* children control their own side */
    gap: 10px !important;
}

/* 5) Bubbles (shared) */
.n8n-chat .chat-message {
    border: 1px solid var(--chat--color-border) !important;
    padding: 10px 12px !important;
    line-height: 1.45 !important;
    font-size: 14px !important;
    word-break: break-word !important;
    flex: 0 0 auto !important;
}

/* Bot bubble – LEFT side (like WhatsApp incoming) */
.n8n-chat .chat-message-from-bot {
    background: #ECF2FF !important; /* very light blue */
    border-left: 4px solid #2D5BC6 !important; /* action blue */
    color: #0F2D81 !important;
    align-self: flex-start !important;
    margin-left: 8px !important;
    margin-right: auto !important;
    /* auto-width bubble that hugs content */
    display: inline-block !important;
    width: -moz-fit-content !important;
    width: fit-content !important;
    max-width: 78% !important;
    /* chat-like rounded corners */
    border-radius: 14px 14px 14px 6px !important; /* small bottom-left */
    text-align: left !important;
}

/* User bubble – RIGHT side (like WhatsApp outgoing) */
.n8n-chat .chat-message-from-user {
    background: #FFFFFF !important;
    border-right: 4px solid #FFC400 !important;
    color: #1C2430 !important;
    align-self: flex-end !important;
    margin-left: auto !important;
    margin-right: 8px !important;
    /* auto-width so short texts sit at the far right */
    display: inline-block !important;
    width: -moz-fit-content !important;
    width: fit-content !important;
    max-width: 75% !important;
    /* chat-like rounded corners */
    border-radius: 14px 14px 6px 14px !important; /* small bottom-right */
    text-align: left !important; /* keep text left inside bubble */
}

    /* Make sure inner markdown never overrides left text alignment */
    .n8n-chat .chat-message-from-user .chat-message-markdown,
    .n8n-chat .chat-message-from-user .chat-message-markdown p,
    .n8n-chat .chat-message-from-bot .chat-message-markdown,
    .n8n-chat .chat-message-from-bot .chat-message-markdown p {
        text-align: left !important;
    }

/* Markdown spacing */
.n8n-chat .chat-message-markdown p {
    margin: 0 0 6px 0 !important;
}

    .n8n-chat .chat-message-markdown p:last-child {
        margin-bottom: 0 !important;
    }

/* 6) Footer / Input */
.n8n-chat .chat-footer {
    background: #FAFBFF !important;
    border-top: 1px solid var(--chat--color-border) !important;
    padding: 12px !important;
}

/* Clear gap between textarea and send button */
.n8n-chat .chat-inputs {
    display: grid !important;
    grid-template-columns: 1fr auto !important; /* input grows, button auto */
    align-items: center !important;
    column-gap: 12px !important; /* space between them */
}

.n8n-chat .chat-inputs-controls {
    display: flex !important;
    align-items: center !important;
    margin-left: 0 !important;
}

.n8n-chat .chat-input textarea {
    background: #FFFFFF !important;
    border: 1px solid var(--chat--color-border) !important;
    border-radius: 10px !important;
    min-height: 48px !important;
    padding: 10px 12px !important;
    font-family: var(--chat--font-family) !important;
    font-size: 14px !important;
    color: #0F2D81 !important;
    outline: none !important;
    box-shadow: 0 1px 0 rgba(15,45,129,0.06) inset !important;
    width: 100% !important; /* fill its grid cell */
}

    .n8n-chat .chat-input textarea::placeholder {
        color: #7A8CA6 !important;
    }

/* Send button – brand yellow pill with blue icon */
.n8n-chat .chat-input-send-button {
    background: #FFC400 !important;
    color: #0F2D81 !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 10px 14px !important;
    min-width: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: 0 !important; /* spacing handled by column-gap */
    transition: filter .15s ease !important;
    box-shadow: 0 4px 10px rgba(255,196,0,.35) !important;
}

    .n8n-chat .chat-input-send-button:hover {
        filter: brightness(0.95) !important;
    }

/* 7) Scrollbar */
.n8n-chat .chat-body::-webkit-scrollbar {
    width: 8px;
}

.n8n-chat .chat-body::-webkit-scrollbar-thumb {
    background: linear-gradient(#2D5BC6, #0F2D81) !important;
    border-radius: 8px !important;
}

/* 8) Buttons/choices rendered by n8n */
.n8n-chat .chat-message .chat-message-actions button,
.n8n-chat .chat-message a.button,
.n8n-chat .chat-message button {
    background: #2D5BC6 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 8px 12px !important;
    font-weight: 600 !important;
}

    .n8n-chat .chat-message .chat-message-actions button:hover {
        filter: brightness(0.95) !important;
    }

/* 9) Mobile */
/*@media (max-width: 640px) {
    .chat-layout.chat-wrapper.n8n-chat {
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 80% !important;
        border-radius: 0 !important;
    }

    .n8n-chat .chat-header {
        padding: 16px !important;
    }
}*/

/* 9) Mobile */
@media (max-width: 640px) {
    .chat-layout.chat-wrapper.n8n-chat {
        position: fixed !important;
        width: 85vw !important;
        height: 70vh !important;
        top: 15vh !important; /* vertically center */
        left: 50% !important;
        transform: translateX(-50%) !important; /* horizontally center */
        border-radius: 16px !important;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25) !important;
        background: #fff !important;
        overflow: hidden !important;
    }

    .n8n-chat .chat-header {
        padding: 14px !important;
    }

    .n8n-chat .chat-body {
        padding: 10px !important;
    }
}