/* n8n chat base styles. Must stay first (only @charset may precede an @import)
   so the variable/style overrides below take precedence. Pulled from CDN so
   this stays a single CSS file to embed. */
@import url('https://cdn.jsdelivr.net/npm/@n8n/chat@1/dist/style.css');

@font-face {
    font-family: 'Inter Var';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('https://rsms.me/inter/font-files/InterVariable.woff2?v=4.0') format('woff2');
}

:root {
    /* Colors */
    /* Outseta accent (user bubbles, send button, launcher). */
    --chat--color-primary: #df37a7;
    --chat--color-primary-shade-50: color-mix(in srgb, var(--chat--color-primary) 90%, black);
    --chat--color-primary-shade-100: color-mix(in srgb, var(--chat--color-primary) 80%, black);
    --chat--color-primary-tint-32: color-mix(in srgb, var(--chat--color-primary) 32%, var(--chat--color-white));
    --chat--color-primary-tint-20: color-mix(in srgb, var(--chat--color-primary) 20%, var(--chat--color-white));
    --chat--color-primary-tint-11: color-mix(in srgb, var(--chat--color-primary) 11%, var(--chat--color-white));
    --chat--color-primary-tint-5: color-mix(in srgb, var(--chat--color-primary) 5%, var(--chat--color-white));
    --chat--color-secondary: var(--chat--color-light);
    --chat--color-secondary-shade-50: var(--chat--color-light-shade-50);
    --chat--color-white: #ffffff;

    /* Layered ambient shadow shared by the chat window and the info bubble. */
    --chat--box-shadow:
        rgba(0, 0, 0, 0.05) 0px 16px 64px 0px,
        rgba(0, 0, 0, 0.04) 0px 8px 32px 0px,
        rgba(0, 0, 0, 0.03) 0px 4px 16px 0px,
        rgba(0, 0, 0, 0.02) 0px 0px 0px 1px;

    /* Header logo — swap this URL for your own logo to show it in the header.
       Leave as `none` to render a solid blue rounded square (Fin-style). */
    --chat--header--avatar-image: url('https://cdn.prod.website-files.com/663cf90ca192fe7e5bcb8bd7/6772f25be2c33f05849c2ac3_outseta-icon.svg');

    /* Up-arrow icon for the send button (used as a mask) */
    --chat--send-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5'/%3E%3Cpath d='M5 12l7-7 7 7'/%3E%3C/svg%3E");

    /* Launcher icon — Lucide "messages-square" (used as a mask on the toggle) */
    --chat--toggle-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 10a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 14.286V4a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z'/%3E%3Cpath d='M20 9a2 2 0 0 1 2 2v10.286a.71.71 0 0 1-1.212.502l-2.202-2.202A2 2 0 0 0 17.172 19H10a2 2 0 0 1-2-2v-1'/%3E%3C/svg%3E");

    /* Launcher icon when the window is open — Lucide "chevron-down" */
    --chat--toggle-icon-open: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

    --chat--color-light: #f5f5f5;
    --chat--color-light-shade-50: #eeeeee;
    --chat--color-light-shade-100: #a3a3a3;
    --chat--color-light-tint-50: color-mix(in srgb, var(--chat--color-light) 50%, var(--chat--color-white));
    --chat--color-medium: #d4d4d4;
    --chat--color-dark: #262626;
    --chat--color-disabled: #ffffff;
    --chat--color-typing: #262626;

    /* Base Layout */
    --chat--spacing: 1rem;
    --chat--border-radius: 1.5rem;
    --chat--transition-duration: 0.15s;
    --chat--font-family: 'Inter Var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  
    /* Window Dimensions */
    --chat--window--width: 600px;
    --chat--window--height: 800px;
    --chat--window--bottom: var(--chat--spacing);
    --chat--window--right: var(--chat--spacing);
    --chat--window--z-index: 9999;
    --chat--window--border: 1px solid var(--chat--color-light-shade-50);
    --chat--window--border-radius: var(--chat--border-radius);
    --chat--window--margin-bottom: var(--chat--spacing);
  
    /* Header Styles — clean white header like Fin */
    --chat--header-height: auto;
    --chat--header--padding: var(--chat--spacing);
    --chat--header--background: var(--chat--color-white);
    --chat--header--color: var(--chat--color-dark);
    --chat--header--border-top: none;
    --chat--header--border-bottom: 1px solid var(--chat--color-light-shade-50);
    --chat--header--border-left: none;
    --chat--header--border-right: none;
    --chat--heading--font-size: 0.875rem;
    --chat--subtitle--font-size: 0.875rem;
    --chat--subtitle--line-height: 1.5;
  
    /* Message Styles */
    --chat--message--font-size: 0.875rem;
    --chat--message--padding: var(--chat--spacing);
    --chat--message--border-radius: 1.25rem;
    --chat--message-line-height: 1.5;
    --chat--message--margin-bottom: calc(var(--chat--spacing) * 1);
    --chat--message--bot--background: var(--chat--color-light);
    --chat--message--bot--color: var(--chat--color-dark);
    --chat--message--bot--border: none;
    --chat--message--user--background: var(--chat--color-primary);
    --chat--message--user--color: var(--chat--color-white);
    --chat--message--user--border: none;
    --chat--message--pre--background: rgba(0, 0, 0, 0.05);
    --chat--messages-list--padding: var(--chat--spacing);
  
    /* Toggle Button */
    --chat--toggle--size: 64px;
    --chat--toggle--width: var(--chat--toggle--size);
    --chat--toggle--height: var(--chat--toggle--size);
    --chat--toggle--border-radius: 50%;
    --chat--toggle--background: var(--chat--color-primary);
    --chat--toggle--hover--background: var(--chat--color-primary-shade-50);
    --chat--toggle--active--background: var(--chat--color-primary-shade-100);
    --chat--toggle--color: var(--chat--color-white);
  
    /* Input Area */
    --chat--textarea--height: 3rem;
    --chat--textarea--max-height: 12rem;
    --chat--input--font-size: 0.875rem;
    --chat--input--border: 0;
    --chat--input--border-radius: 0;
    --chat--input--padding: 0.75rem 1rem;
    --chat--input--background: var(--chat--color-white);
    --chat--input--text-color: initial;
    --chat--input--line-height: 1.5;
    --chat--input--placeholder--font-size: var(--chat--input--font-size);
    --chat--input--border-active: 0;
    --chat--input--left--panel--width: 2rem;

    /* Input container — rounded pill with subtle border (Fin-style) */
    --chat--input--container--background: var(--chat--color-white);
    --chat--input--container--border: 1px solid var(--chat--color-light-shade-50);
    --chat--input--container--border-radius: .75rem;
    --chat--input--container--padding: 0;
    --chat--input--button--border-radius: 50%;
  
    /* Button Styles */
    --chat--button--padding: calc(var(--chat--spacing) * 1 / 2) var(--chat--spacing);
    --chat--button--border-radius: var(--chat--border-radius);

    /* Send and File Buttons — filled blue circle like Fin */
    --chat--input--send--button--background: var(--chat--color-primary);
    --chat--input--send--button--color: var(--chat--color-white);
    --chat--input--send--button--background-hover: var(--chat--color-primary-shade-50);
    --chat--input--send--button--color-hover: var(--chat--color-white);
    --chat--input--file--button--background: var(--chat--color-white);
    --chat--input--file--button--color: var(--chat--color-secondary);
    --chat--input--file--button--background-hover: var(--chat--input--file--button--background);
    --chat--input--file--button--color-hover: var(--chat--color-secondary-shade-50);
    --chat--files-spacing: 0.25rem;
  
    /* Body and Footer — seamless white input area, no divider line */
    --chat--body--background: var(--chat--color-white);
    --chat--footer--background: var(--chat--color-white);
    --chat--footer--color: var(--chat--color-dark);
    --chat--footer--border-top: none;
    --chat--footer--padding: 0 1rem 1rem;
}

/* You can override any class styles, too. Right-click inspect in Chat UI to find class to override. */
.chat-message {
    width: fit-content;
    max-width: 75%;
    padding: calc(var(--chat--message--padding) * 0.75) var(--chat--message--padding) ;
    &.chat-message-from-bot {
        border-bottom-left-radius: var(--chat--message--border-radius);
    }
    &.chat-message-from-user {
        border-bottom-right-radius: var(--chat--message--border-radius);
    }
}

/* Shrink the "bot is typing" bouncing dots (n8n defaults to 10px / 3px margin). */
.chat-message-typing .chat-message-typing-circle {
    width: 6px;
    height: 6px;
    margin: 2px;
}
/* Reduce how far the dots travel (n8n bounces them -10px at the midpoint).
   Redefining the same-named keyframes overrides n8n's, since ours load last. */
@keyframes chat-message-typing-animation-bouncing {
    0% { transform: translateY(0); }
    33% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
    100% { transform: translateY(0); }
}
.n8n-chat {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga' 1, 'calt' 1, 'cv11' 1;
    letter-spacing: -0.01em;

    .chat-layout {
        .chat-header {
            gap: 0.5rem;
            /* The header title is downgraded from n8n's <h1> to a <div> (see
               outseta-chat.js) so it neither inherits the host site's heading font
               nor competes with the host's <h1> for document outline. These styles
               replace n8n's .chat-header h1 rules for the div, pinning the chat font
               explicitly so host typography can't bleed in. */
            h1,
            .chat-heading-title {
                margin-top: 0;
                margin-bottom: 0;
                font-family: var(--chat--font-family);
                font-size: var(--chat--heading--font-size);
                font-weight: 500;
                color: var(--chat--header--color);
            }
            p {
                margin-top: 0;
                margin-bottom: 0;
                opacity: 0.6;
            }
        }
        .chat-footer {
            margin-top: -1rem;
        }
    }

    /* Header logo + layout: avatar on the left, close button pushed right */
    .chat-heading {
        justify-content: flex-start;
        gap: 0.625rem;

        &::before {
            content: '';
            flex: 0 0 auto;
            width: 32px;
            height: 32px;
            border-radius: 8px;
            background-color: var(--chat--color-primary);
            background-image: var(--chat--header--avatar-image, none);
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }
    }
    /* n8n's native close button: pushed to the far right of the avatar + title,
       with padding and a light hover background (no hover color change). */
    .chat-close-button {
        margin-left: auto;
        padding: 0.375rem;
        border-radius: 6px;
        transition: background var(--chat--transition-duration) ease;
        &:hover {
            color: inherit;
            background: var(--chat--color-light);
        }
        svg {
            width: 20px !important;
            height: 20px !important;
        }
    }
    /* Back button — injected at the far left of the header (order: -1 puts it
       before the avatar ::before). Hidden on the welcome screen; the .visible
       class is toggled on when a chat is open. Mirrors the close button's look. */
    .chat-back-button {
        order: -1;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 0.375rem;
        border: none;
        border-radius: 6px;
        background: transparent;
        color: inherit;
        cursor: pointer;
        transition: background var(--chat--transition-duration) ease;
        &.visible {
            display: flex;
        }
        &:hover {
            background: var(--chat--color-light);
        }
        svg {
            width: 20px !important;
            height: 20px !important;
        }
    }

    /* Remove white border, add subtle shadow instead */
    .chat-window {
        border: none;
        box-shadow: var(--chat--box-shadow);
    }

    /* Increase chat text size */
    .chat-message-markdown,
    .chat-message,
    .chat-input {
        line-height: 1.5;
    }

    .chat-inputs {
        position: relative;
        min-height: var(--chat--textarea--height);
        /* The pill lives on the container (border, radius, white bg). overflow
           hidden clips the absolutely-positioned controls bar to the rounded
           corners so it can't poke past them. */
        border: var(--chat--input--container--border);
        border-radius: var(--chat--input--container--border-radius);
        background: var(--chat--input--container--background);
        overflow: hidden;

        &:focus-within {
            outline: 1px solid var(--chat--color-primary);
            border-color: var(--chat--color-primary);
        }

        textarea {
            /* In normal flow (NOT absolute) so auto-grow pushes the footer up and
               the input expands upward. Transparent + padding-bottom so its text
               scrolls UNDER the opaque controls bar pinned at the bottom. The
               bar is ~3rem tall; the extra 0.5rem keeps the last line off it. */
            background: transparent;
            border: none;
            padding-bottom: 3.5rem;
        }
    }

    /* Bottom controls bar: a single absolutely-positioned strip holding both
       buttons, with an opaque background so the textarea's text scrolls cleanly
       UNDER it once the textarea hits its max height and starts scrolling. */
    .chat-inputs-controls {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        flex-direction: row-reverse; /* DOM order is [send, support] → send right, support left */
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem;
        background: var(--chat--color-white);
    }
    /* Once the textarea has grown to its max height and started scrolling, mark
       the bar with a top border so it reads as a divider over the scrolling text. */
    .chat-inputs-controls.input-scrolling {
        border-top: 1px solid var(--chat--color-light-shade-50);
    }

    /* Top-align messages so the welcome message sits under the header
       instead of floating at the bottom */
    .chat-messages-list {
        margin-top: 0;
        padding-bottom: 2rem;
    }

    /* Send button: compact filled circle with an upward arrow (Fin-style) */
    .chat-input-send-button {
        width: 32px;
        height: 32px;
        margin: 0;

        /* Replace n8n's right-pointing paper-plane with an up-arrow */
        svg {
            display: none;
        }
        &::before {
            content: '';
            width: 16px;
            height: 16px;
            background-color: currentColor;
            -webkit-mask: var(--chat--send-arrow) center / contain no-repeat;
            mask: var(--chat--send-arrow) center / contain no-repeat;
        }
        &[disabled] {
            opacity: 0.5;
            cursor: not-allowed;
        }
    }

    /* Launcher icon: swap n8n's default icons (mdi-chat / mdi-chevron-down) for
       Lucide ones. n8n renders the icon as an <svg> we can't target by shape, so
       we hide it and paint our own via a mask: messages-square when closed,
       chevron-down when open (v-show drops `display:none` from .chat-window). */
    .chat-window-toggle svg {
        display: none;
    }
    .chat-window-toggle::before {
        content: '';
        width: 24px;
        height: 24px;
        background-color: currentColor;
        -webkit-mask: var(--chat--toggle-icon) center / contain no-repeat;
        mask: var(--chat--toggle-icon) center / contain no-repeat;
    }
    /* `.n8n-chat` and `.chat-window-wrapper` are the SAME element (Vue merges the
       class onto the wrapper root), so match the open state with `&:has()`, not a
       descendant selector. */
    &:has(.chat-window:not([style*="display: none"])) .chat-window-toggle::before {
        -webkit-mask-image: var(--chat--toggle-icon-open);
        mask-image: var(--chat--toggle-icon-open);
    }
}

/* ---------------------------------------------------------------------------
   Bot message markdown

   The widget ships well-structured markdown CSS, but it's driven by n8n design
   tokens that the standalone chat bundle never defines — so paragraph margins,
   heading sizes, rule colors, etc. all resolved to nothing (flat, no hierarchy).
   Supplying those tokens (scoped to the markdown subtree only) brings the whole
   thing to life: spacing rhythm, heading hierarchy, lists, blockquotes, rules.
--------------------------------------------------------------------------- */
.n8n-chat {
    .n8n-markdown {
        /* Spacing scale — --markdown--spacing resolves from --spacing--2xs and
           drives the vertical rhythm of paragraphs, headings, lists and rules. */
        --spacing--5xs: 0.125rem;
        --spacing--4xs: 0.1875rem;
        --spacing--2xs: 0.375rem;

        /* Type scale (message body is 0.875rem / 14px) */
        --font-size--xl: 1.25rem;
        --font-size--lg: 1.0625rem;
        --font-size--md: 0.9375rem;
        --font-size--sm: 0.875rem;
        --font-size--xs: 0.8125rem;
        --font-size--3xs: 0.6875rem;
        --font-weight--regular: 400;
        --font-weight--medium: 500;
        --font-weight--bold: 600;
        --line-height--md: 1.3;
        --line-height--lg: 1.55;

        /* Colors — tuned for the light-gray bot bubble */
        --color--text--shade-1: #101330;
        --color--text: #3a3d52;
        --color--text--tint-1: #6b6e82;
        --color--foreground: #dadce3;
        --color--foreground--shade-1: #b6b9c4;
        --color--foreground--tint-1: #e6e9f1;
        --color--primary: var(--chat--color-primary);
        --color--background: rgba(0, 0, 0, 0.05);
        --color--neutral-200: #e6e9f1;
        --color--neutral-300: #d2d4d9;

        /* Misc */
        --radius--sm: 6px;
        --radius--xl: 999px;
        --border-width: 1px;
        --border-style: solid;
        --font-family--monospace: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
    }

    /* First heading shouldn't push a big gap below the very first paragraph */
    .n8n-markdown > :first-child {
        margin-top: 0;
    }

    /* Lists: n8n's default indent is too deep, and the bullet markers render in a
       muted gray. Pull the list in and color the markers to match the body text. */
    .n8n-markdown ul,
    .n8n-markdown ol {
        padding-left: 1rem;
    }
    .n8n-markdown li::marker {
        color: var(--color--text);
    }

    /* Code blocks: the inner <code> owns the framed surface (padding, border,
       radius, smaller font, dark background). The <pre> is just a transparent
       passthrough so the two don't double up.

       Note: n8n's highlighter colors the token <span>s but does NOT add the `hljs`
       class to the <code> element, so we can't rely on it for the surface — we set
       the dark background and base text color here explicitly. The double class on
       the container (.n8n-markdown.chat-message-markdown) gives us enough
       specificity to win over n8n's own `pre code.hljs` rule when it does apply. */
    .chat-message-markdown pre {
        padding: 0;
        background: transparent;
        border: none;
    }
    .n8n-markdown.chat-message-markdown pre code {
        display: block;
        padding: 0.75rem 0.875rem;
        border: 1px solid #d8dee4;
        border-radius: 10px;
        background: #ffffff;
        color: #24292e;
        font-size: 0.8125rem;
        overflow-x: auto;
    }
}

/* Light syntax-highlight theme (GitHub light). Needed because n8n's default
   dark theme (body:not([data-theme]) .hljs-*) otherwise wins and would render
   light-on-light. The double class prefix outranks it without touching <body>. */
.n8n-markdown.chat-message-markdown .hljs-doctag,
.n8n-markdown.chat-message-markdown .hljs-keyword,
.n8n-markdown.chat-message-markdown .hljs-meta .hljs-keyword,
.n8n-markdown.chat-message-markdown .hljs-template-tag,
.n8n-markdown.chat-message-markdown .hljs-template-variable,
.n8n-markdown.chat-message-markdown .hljs-type,
.n8n-markdown.chat-message-markdown .hljs-variable.language_ { color: #d73a49; }
.n8n-markdown.chat-message-markdown .hljs-title,
.n8n-markdown.chat-message-markdown .hljs-title.class_,
.n8n-markdown.chat-message-markdown .hljs-title.function_ { color: #6f42c1; }
.n8n-markdown.chat-message-markdown .hljs-attr,
.n8n-markdown.chat-message-markdown .hljs-attribute,
.n8n-markdown.chat-message-markdown .hljs-literal,
.n8n-markdown.chat-message-markdown .hljs-meta,
.n8n-markdown.chat-message-markdown .hljs-number,
.n8n-markdown.chat-message-markdown .hljs-operator,
.n8n-markdown.chat-message-markdown .hljs-selector-attr,
.n8n-markdown.chat-message-markdown .hljs-selector-class,
.n8n-markdown.chat-message-markdown .hljs-selector-id,
.n8n-markdown.chat-message-markdown .hljs-variable { color: #005cc5; }
.n8n-markdown.chat-message-markdown .hljs-meta .hljs-string,
.n8n-markdown.chat-message-markdown .hljs-regexp,
.n8n-markdown.chat-message-markdown .hljs-string { color: #032f62; }
.n8n-markdown.chat-message-markdown .hljs-built_in,
.n8n-markdown.chat-message-markdown .hljs-symbol { color: #e36209; }
.n8n-markdown.chat-message-markdown .hljs-code,
.n8n-markdown.chat-message-markdown .hljs-comment,
.n8n-markdown.chat-message-markdown .hljs-formula { color: #6a737d; }
.n8n-markdown.chat-message-markdown .hljs-name,
.n8n-markdown.chat-message-markdown .hljs-quote,
.n8n-markdown.chat-message-markdown .hljs-selector-pseudo,
.n8n-markdown.chat-message-markdown .hljs-selector-tag { color: #22863a; }
.n8n-markdown.chat-message-markdown .hljs-subst { color: #24292e; }
.n8n-markdown.chat-message-markdown .hljs-section { color: #005cc5; font-weight: 700; }
.n8n-markdown.chat-message-markdown .hljs-bullet { color: #735c0f; }
.n8n-markdown.chat-message-markdown .hljs-emphasis { color: #24292e; }
.n8n-markdown.chat-message-markdown .hljs-strong { color: #24292e; }

/* ---------------------------------------------------------------------------
   Welcome screen (.chat-get-started)

   n8n renders only a bare "New Conversation" button here. We inject a Help
   Scout-style landing (.chat-welcome) with channel cards + popular resources.
   Override the container's centered flex layout so the panel fills the top,
   and hide n8n's default button (the "AI Answers" card drives it instead).
--------------------------------------------------------------------------- */
.n8n-chat {
    .chat-get-started {
        justify-content: flex-start;
        align-items: stretch;
        padding: calc(var(--chat--spacing) * 2) var(--chat--spacing);
    }
    .chat-get-started:has(.chat-welcome) > .chat-button-wrapper,
    .chat-get-started:has(.chat-welcome) .chat-button {
        display: none;
    }
    /* Hide n8n's "Powered by n8n" footer on the welcome screen */
    .chat-get-started-footer {
        display: none;
    }

    .chat-welcome {
        display: flex;
        flex-direction: column;
        gap: calc(var(--chat--spacing) * 2);
        width: 100%;
        font-family: var(--chat--font-family);
        color: var(--chat--color-dark);
    }
    .chat-welcome-intro {
        text-align: center;
    }
    .chat-welcome-title {
        margin: 0;
        font-size: 1.75rem;
        font-weight: 500;
    }
    .chat-welcome-subtitle {
        margin: 0.5rem 0 0;
        font-size: 0.875rem;
        line-height: 1.5;
        opacity: 0.6;
        text-wrap: balance;
    }

    /* Channel cards */
    .chat-welcome-cards {
        display: flex;
        flex-direction: column;
        gap: calc(var(--chat--spacing) / 2);
    }
    .chat-welcome-card {
        display: flex;
        flex-direction: column;
        padding: 0;
        border: 1px solid var(--chat--color-light-shade-50);
        border-radius: 0.875rem;
        background: var(--chat--color-white);
        color: inherit;
        font-family: inherit;
        text-align: left;
        text-decoration: none;
        cursor: pointer;
        transition: background var(--chat--transition-duration) ease;
    }
    .chat-welcome-card:hover {
        background: var(--chat--color-light-tint-50);
    }
    .chat-welcome-card-body {
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
        padding: 0.75rem;
        font-size: 0.875rem;
        line-height: 1.25rem;
    }
    .chat-welcome-card-body + .chat-welcome-card-body {
        border-top: 1px solid var(--chat--color-light-shade-50);
    }
    .chat-welcome-card-icon {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 0.5rem;
        background: var(--chat--color-primary-tint-20);
        color: var(--chat--color-primary);
    }
    .chat-welcome-card-icon svg {
        width: 20px !important;
        height: 20px !important;
    }
  
    .chat-welcome-card-title {
        font-weight: 500;
    }
    .chat-welcome-card-text {
        opacity: 0.6;
    }
    /* Fallback hint on the AI Answers card — its own padded section (divider above,
       via the .chat-welcome-card-body sibling rule) that sets the expectation up front
       that a support ticket is always available. Full-strength dark text (not the muted
       subtitle opacity) plus the support icon make it stand out without relying on the
       brand color, which isn't guaranteed to meet contrast on every background. */
    .chat-welcome-card-hint {
        align-items: center;
        gap: 0.5rem;
        font-size: 0.75rem;
    }
    .chat-welcome-card-hint svg {
        flex: 0 0 auto;
        width: 14px !important;
        height: 14px !important;
    }
    /* Resume card — subtly accented so it reads as the primary action on return. */
    .chat-welcome-card-resume {
        border-color: var(--chat--color-primary-tint-32);
        background: var(--chat--color-primary-tint-5);
    }
    .chat-welcome-card-resume:hover {
        background: var(--chat--color-primary-tint-11);
    }

    /* Popular resource links */
    .chat-welcome-resources-heading {
        margin: 0 0 1rem;
        font-size: 0.75rem;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        opacity: 0.5;
    }
    .chat-welcome-resource {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        margin: 0 -0.75rem;
        padding: 0.875rem 0.75rem;
        border-radius: 0.5rem;
        color: inherit;
        text-decoration: none;
        font-size: 0.875rem;
        font-weight: 500;
        transition: background var(--chat--transition-duration) ease;
    }
    /* Separator drawn as a pseudo-element inset to the content width, so it stays
       straight (no border-radius curve) and doesn't extend into the full-bleed area. */
    .chat-welcome-resource::after {
        content: "";
        position: absolute;
        left: 0.75rem;
        right: 0.75rem;
        bottom: 0;
        border-bottom: 1px solid var(--chat--color-light-shade-50);
        transition: border-color var(--chat--transition-duration) ease;
    }
    .chat-welcome-resource:last-child::after {
        border-bottom: none;
    }
    .chat-welcome-resource:hover {
        background: var(--chat--color-light);
    }
    .chat-welcome-resource:hover::after,
    .chat-welcome-resource:has(+ .chat-welcome-resource:hover)::after {
        border-bottom-color: transparent;
    }
    .chat-welcome-resource svg {
        flex: 0 0 auto;
        width: 16px !important;
        height: 16px !important;
        opacity: 0.35;
        transition: opacity var(--chat--transition-duration) ease;
    }
    .chat-welcome-resource:hover svg {
        opacity: 1;
    }

    /* "Contact support" button — a flex child of the .chat-inputs-controls bar,
       sitting at the bottom-left (the bar's row-reverse + space-between puts it
       opposite the send button). Hidden until JS adds .visible after the first reply. */
    .chat-contact-support {
        display: none;
        align-items: center;
        gap: 0.375rem;
        height: 32px;
        padding: 0 0.75rem;
        border: none;
        border-radius: 999px;
        background: transparent;
        color: var(--chat--color-dark);
        text-decoration: none;
        font-family: var(--chat--font-family);
        font-size: 0.8125rem;
        font-weight: 500;
        line-height: 1;
        cursor: pointer;
        transition: background var(--chat--transition-duration) ease;
    }
    .chat-contact-support.visible {
        display: inline-flex;
    }
    .chat-contact-support:hover {
        background: var(--chat--color-light);
    }
    .chat-contact-support svg {
        flex: 0 0 auto;
        width: 16px !important;
        height: 16px !important;
    }
}

.n8n-chat {
    html body & .chat-window-toggle.attention-border {
        position: relative;
    }

    /* The icon lives on .chat-window-toggle::before, so the attention ring uses
       ::after to avoid clobbering the icon's centered mask box (which left it
       pinned to the button's top-left corner). */
    html body & .chat-window-toggle.attention-border::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        outline: 1px solid var(--chat--color-primary);
        outline-offset: 0;
        animation: pulse-ring 2s ease-out infinite;
        pointer-events: none;
    }

    html body & .chat-window-toggle.attention-border.fading-out::after {
        animation: none;
        opacity: 0;
        transition: opacity 2s ease-out;
    }
}

/* A 1px ring that grows outward (outline-offset) and fades (opacity). */
@keyframes pulse-ring {
    0% {
        outline-offset: 0;
        opacity: 0;
    }
    25% {
        opacity: 1;
    }
    100% {
        outline-offset: 16px;
        opacity: 0;
    }
}

/* Info bubble above the AI chat button */
.chat-info-bubble {
    position: fixed;
    bottom: 6rem;
    right: 1rem;
    width: 300px;
    padding: 16px;
    background: #fff;
    border-radius: 12px;
    font-family: var(--chat--font-family);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    box-shadow: var(--chat--box-shadow);
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: -0.01em;
    color: var(--chat--color-dark);
    z-index: 9999;
    opacity: 0;
    transform: translateY(8px);
    animation: bubble-in 0.4s ease-out 0.3s forwards;
    transition: opacity 2s ease-out, transform 0.3s ease-out;

    /* Logo + title row, mirroring the chat window header. */
    .chat-info-bubble-heading {
        display: flex;
        align-items: center;
        gap: 0.625rem;
        /* Negative margins pull the divider out to the bubble edges, padding
           keeps the logo/title aligned with the 16px body inset. */
        margin: 0 -16px 0.75rem;
        padding: 0 16px 0.75rem;
        border-bottom: 1px solid var(--chat--color-light-shade-50);
    }

    .chat-info-bubble-avatar {
        flex: 0 0 auto;
        width: 32px;
        height: 32px;
        border-radius: 8px;
        background-color: var(--chat--color-primary);
        background-image: var(--chat--header--avatar-image, none);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    .chat-info-bubble-title {
        font-weight: 500;
        color: var(--chat--color-dark);
    }

    .chat-info-bubble-text {
        margin: 0;
        opacity: 0.6;
    }

    &.fading-out {
        opacity: 0;
        animation: none;
    }

    /* Auto-dismiss: animate out as the reverse of bubble-in. */
    &.animate-out {
        animation: bubble-out 0.4s ease-out forwards;
    }
}

@keyframes bubble-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bubble-out {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(8px);
    }
}