/* YellowX brand theme for the @n8n/chat widget — heavy-civil look (ink #0e1113 + yellow #ffcc00).
   Loaded AFTER the widget's own style.css so these overrides win. */
:root {
  --chat--font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --chat--border-radius: 10px;
  --chat--transition-duration: 0.15s;

  /* palette */
  --chat--color--primary: #0e1113;
  --chat--color--primary-shade-50: #1b2024;
  --chat--color--primary--shade-100: #262c31;
  --chat--color--secondary: #ffcc00;
  --chat--color-secondary-shade-50: #e6b800;
  --chat--color-white: #ffffff;
  --chat--color-light: #f5f6f8;
  --chat--color-light-shade-50: #eceef1;
  --chat--color-light-shade-100: #dde1e6;
  --chat--color-medium: #aeb4bc;
  --chat--color-dark: #0e1113;
  --chat--color-disabled: #8b929a;
  --chat--color-typing: #4a5158;

  /* launcher button */
  --chat--toggle--background: #ffcc00;
  --chat--toggle--hover--background: #e6b800;
  --chat--toggle--active--background: #d9ad00;
  --chat--toggle--color: #0e1113;
  --chat--toggle--size: 60px;

  /* window */
  --chat--window--width: 384px;
  --chat--window--height: 620px;
  --chat--window--border-radius: 16px;
  --chat--window--border: 1px solid rgba(14, 17, 19, 0.14);

  /* header */
  --chat--header--background: #0e1113;
  --chat--header--color: #ffffff;
  --chat--header--padding: 1.15rem 1.3rem;
  --chat--heading--font-size: 1.4rem;
  --chat--subtitle--font-size: 0.85rem;

  /* messages */
  --chat--body--background: #ffffff;
  --chat--message--bot--background: #f2f4f6;
  --chat--message--bot--color: #0e1113;
  --chat--message--bot--border: none;
  --chat--message--user--background: #0e1113;
  --chat--message--user--color: #ffffff;
  --chat--message--user--border: none;
  --chat--message--border-radius: 12px;
  --chat--message--font-size: 0.95rem;
  --chat--message-line-height: 1.55;

  /* input + send button */
  --chat--input--background: #ffffff;
  --chat--input--container--background: #ffffff;
  --chat--input--text-color: #0e1113;
  --chat--input--border: 1px solid #dde1e6;
  --chat--input--border-active: 1px solid #0e1113;
  --chat--input--send--button--background: #ffcc00;
  --chat--input--send--button--color: #0e1113;
  --chat--input--send--button--background-hover: #e6b800;
  --chat--input--send--button--color-hover: #0e1113;

  /* get-started / primary buttons */
  --chat--button--background--primary: #ffcc00;
  --chat--button--color--primary: #0e1113;
  --chat--button--background--primary--hover: #e6b800;
  --chat--button--color--primary--hover: #0e1113;
  --chat--button--border--primary: none;

  /* footer */
  --chat--footer--background: #ffffff;
  --chat--footer--color: #7a828a;
}

/* Header title in the site's condensed display face, uppercase — matches the nav + logo. */
.chat-heading { font-family: 'Barlow Condensed', 'Inter', sans-serif; text-transform: uppercase; letter-spacing: 0.02em; font-weight: 700; }
/* Yellow rule under the header — echoes the site's hazard accent. */
.chat-header { border-bottom: 3px solid #ffcc00; }

/* Keep the launcher + window clear of the mobile sticky call bar (which is fixed to bottom). */
@media (max-width: 1079px) {
  :root { --chat--window--bottom: 84px; }
}