/* n8n chat widget — brand overrides.
 * The widget exposes its visual surface through --chat--* custom properties.
 * We rebind those to Cyberfusion tokens: TWK Lausanne, black/white chrome,
 * brand gradient toggle, 6px input radius / 12px card radius. */

/* Brand font — loaded here so the widget styling is self-contained. */
@font-face {
  font-family: 'TWKLausanne';
  src: url('fonts/TWKLausanne-300.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'TWKLausanne';
  src: url('fonts/TWKLausanne-600.woff2') format('woff2');
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand font token used by the widget rules below. */
  --cf-font: 'TWKLausanne', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, sans-serif;

  /* Palette — black/white with brand gradient reserved for the toggle. */
  --chat--color-primary: #000;
  --chat--color-primary-shade-50: #1a1a1a;
  --chat--color-primary-shade-100: #2a2a2a;
  --chat--color-secondary: #000;
  --chat--color-secondary-shade-50: #1a1a1a;
  --chat--color-white: #fff;
  --chat--color-light: #f5f5f5;
  --chat--color-light-shade-50: #ececec;
  --chat--color-light-shade-100: #d0d0d0;
  --chat--color-medium: #d0d0d0;
  --chat--color-dark: #000;
  --chat--color-disabled: rgba(0, 0, 0, 0.4);
  --chat--color-typography: #000;
  --chat--color-typography-secondary: rgba(0, 0, 0, 0.55);

  /* Geometry — match buttons/inputs (6px) and cards (12px). */
  --chat--spacing: 1rem;
  --chat--border-radius: 6px;
  --chat--transition-duration: 0.2s;

  --chat--window--width: 380px;
  --chat--window--height: 600px;
  --chat--window--border: none;

  /* Header — brand gradient (orange → pink), white text. The AI chat is the
   * fresh/innovative side of the brand, so the gradient lives here as well as
   * on the toggle. */
  --chat--header-height: auto;
  --chat--header--padding: var(--chat--spacing);
  --chat--header--background: linear-gradient(158deg, rgb(255, 83, 0) 11%, rgb(232, 132, 228) 81%);
  --chat--header--color: #fff;
  --chat--header--border-top: none;
  --chat--header--border-bottom: none;
  --chat--heading--font-size: 22px;
  --chat--subtitle--font-size: 14px;
  --chat--subtitle--line-height: 1.5;

  /* Body + footer — white. The upstream default ties both to --chat--color-light
   * (grey), which clashes with the rest of the site where white is the canvas. */
  --chat--body--background: #fff;
  --chat--footer--background: #fff;
  --chat--footer--color: #000;
  --chat--footer--border-top: 1px solid #d0d0d0;

  --chat--textarea--height: 50px;

  /* Messages — bot on white with the brand light border (matches input radius),
   * user on solid black. */
  --chat--message--font-size: 16px;
  --chat--message--padding: 0.75rem 1rem;
  --chat--message--border-radius: 12px;
  --chat--message-line-height: 1.5;
  --chat--message--bot--background: #fff;
  --chat--message--bot--color: #000;
  --chat--message--bot--border: 1px solid #d0d0d0;
  --chat--message--user--background: #000;
  --chat--message--user--color: #fff;
  --chat--message--user--border: none;
  --chat--message--pre--background: rgba(0, 0, 0, 0.06);

  /* Floating toggle — brand gradient (orange → pink). */
  --chat--toggle--background: linear-gradient(158deg, rgb(255, 83, 0) 11%, rgb(232, 132, 228) 81%);
  --chat--toggle--hover--background: linear-gradient(158deg, rgb(255, 83, 0) 11%, rgb(232, 132, 228) 81%);
  --chat--toggle--active--background: linear-gradient(158deg, rgb(255, 83, 0) 11%, rgb(232, 132, 228) 81%);
  --chat--toggle--color: #fff;
  --chat--toggle--size: 56px;

  /* Send + file buttons — upstream resolves these to its secondary green for
   * the icon and primary red-shade for the hover bg (via --chat--color--*).
   * The upstream naming uses double-dashes (--chat--color--secondary) which
   * collide with our single-dash overrides above, so override the button vars
   * directly instead of chasing the colour tokens. Subtle grey hover, black
   * icon throughout. */
  --chat--input--send--button--background: transparent;
  --chat--input--send--button--color: #000;
  --chat--input--send--button--background-hover: #f5f5f5;
  --chat--input--send--button--color-hover: #000;
  --chat--input--file--button--background: transparent;
  --chat--input--file--button--color: #000;
  --chat--input--file--button--background-hover: #f5f5f5;
  --chat--input--file--button--color-hover: #000;
}

/* Inherit the site font (TWK Lausanne) across the widget — the shadow-free
 * markup the widget injects sits in the page DOM, so font-family cascades. */
#n8n-chat,
.chat-window,
.chat-window-wrapper,
.chat-window button,
.chat-window input,
.chat-window textarea {
  font-family: var(--cf-font);
  font-weight: 300;
}

/* Pin the input field font-size so the placeholder ("Your question…") reads
 * at a comfortable size — upstream lets the textarea inherit something much
 * smaller than the messages, and the inherited placeholder is what users see
 * most of the time before typing. !important because upstream sets this on
 * the same element with higher specificity than a single class selector. */
.chat-window textarea,
.chat-window input,
.chat-window .chat-input,
.chat-window .chat-inputs textarea,
.chat-window .chat-inputs input {
  font-size: 16px !important;
  line-height: 1.5 !important;
}

.chat-window textarea::placeholder,
.chat-window input::placeholder,
.chat-window .chat-input::placeholder,
.chat-window .chat-inputs textarea::placeholder,
.chat-window .chat-inputs input::placeholder {
  font-size: 16px !important;
  opacity: 0.6;
}

/* Window chrome — match card radius and lift it off the page. */
.chat-window {
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

/* Toggle: brand gradient circle with a Lucide-style robot icon. The upstream
 * widget paints a chat-bubble SVG inside the button; we hide that and replace
 * it with our own bot glyph via ::before so the entry point reads as "AI". */
.chat-window-toggle {
  transition: transform var(--chat--transition-duration) ease,
              box-shadow var(--chat--transition-duration) ease;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}
.chat-window-toggle > * {
  display: none;
}
.chat-window-toggle::before {
  content: "";
  display: block;
  width: 28px;
  height: 28px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='11' width='18' height='10' rx='2'/><circle cx='12' cy='5' r='2'/><path d='M12 7v4'/><circle cx='8.5' cy='16' r='0.6' fill='white' stroke='none'/><circle cx='15.5' cy='16' r='0.6' fill='white' stroke='none'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.chat-window-toggle:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}

/* Input row — upstream bottom-aligns the textarea and the 50x50 send button,
 * but the button has margin: 8px, which lifts it 8px above the textarea's
 * bottom edge. Centre-align the row and drop the button margin so the icon
 * and the placeholder text sit at the same baseline. */
.chat-window .chat-inputs {
  align-items: center;
}
.chat-window .chat-input-send-button,
.chat-window .chat-input-file-button {
  margin: 0;
}

/* Message markdown — restore vertical rhythm on direct children of the
 * rendered markdown so consecutive <p>, <ul>, <h*> etc. don't collapse onto
 * each other when the site's reset strips default margins. */
.chat-window .chat-message-markdown > * {
  margin-bottom: 0.75em;
}
.chat-window .chat-message-markdown > *:last-child {
  margin-bottom: 0;
}
.chat-window .chat-message-markdown ul,
.chat-window .chat-message-markdown ol {
  padding-left: 1.5em;
}

/* Typing indicator — upstream paints three dots with a staggered scale
 * animation which reads as a juggle. Keep one dot, pulse its opacity. */
.chat-window .chat-message-typing .chat-message-typing-circle {
  animation: cf-chat-typing-pulse 1.2s ease-in-out infinite;
}
.chat-window .chat-message-typing .chat-message-typing-circle:not(:first-child) {
  display: none;
}
@keyframes cf-chat-typing-pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}