/*
 * Troia Design look for the n8n chat (@n8n/chat) — set purely through the package's
 * own CSS variables (plus a few small rules where it has no variable). Loaded after
 * the package's style.css.
 */
:root {
  /* palette: near-black surfaces, silver text, the site's deep violet accent */
  --chat--color--primary: #6b46d2;
  --chat--color-primary-shade-50: #7c5cdc;
  --chat--color--primary--shade-100: #5a38b8;
  --chat--color--secondary: #6b46d2;
  --chat--color-secondary-shade-50: #5a38b8;
  --chat--color-white: #f2f2f2;
  --chat--color-light: #e8eaed;
  --chat--color-light-shade-50: rgba(255, 255, 255, 0.1);
  --chat--color-light-shade-100: rgba(255, 255, 255, 0.18);
  --chat--color-medium: rgba(255, 255, 255, 0.18);
  --chat--color-dark: #f2f2f2;
  --chat--color-disabled: rgba(255, 255, 255, 0.25);
  --chat--color-typing: #b9a4ff;

  /* type + shape */
  --chat--font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --chat--border-radius: 12px;
  --chat--spacing: 1rem;
  --chat--transition-duration: 0.25s;

  /* window */
  /* Wider and shorter than before. The height is also capped so the window always
     stays below the site's header (Coming-Soon bar + nav ≈ 120px) on short screens:
     viewport − ~94px (bubble + gaps below) − ~136px (header + gap above). */
  --chat--window--width: 440px;
  --chat--window--height: min(540px, max(340px, calc(100dvh - 240px)));
  --chat--window--bottom: 20px;
  --chat--window--right: 20px;
  --chat--window--z-index: 9000; /* below the custom cursor dot (9999) */
  --chat--window--border: 1px solid rgba(124, 92, 220, 0.35);
  --chat--window--border-radius: 14px;
  --chat--body--background: #050505;

  /* header */
  --chat--header--background: linear-gradient(155deg, rgba(107, 70, 210, 0.28), rgba(12, 9, 26, 0.9) 70%), #0a0714;
  --chat--header--color: #f2f2f2;
  --chat--header--padding: 1rem 1.25rem;
  --chat--header--border-bottom: 1px solid rgba(124, 92, 220, 0.3);
  --chat--heading--font-size: 1.05rem;
  --chat--subtitle--font-size: 0.8rem;

  /* messages */
  --chat--message--font-size: 0.92rem;
  --chat--message-line-height: 1.55;
  --chat--message--padding: 0.75rem 1rem;
  --chat--message--border-radius: 12px;
  --chat--message--bot--background: #120e1d;
  --chat--message--bot--color: #e8eaed;
  --chat--message--bot--border: 1px solid rgba(255, 255, 255, 0.08);
  --chat--message--user--background: #5f3fc4; /* solid: the package sets this as a background-color */
  --chat--message--user--color: #ffffff;
  --chat--message--user--border: none;
  --chat--message--pre--background: rgba(255, 255, 255, 0.06);

  /* input */
  --chat--input--background: #0a0714;
  --chat--input--text-color: #f2f2f2;
  --chat--input--font-size: 16px; /* 16px stops iOS Safari zooming on focus */
  --chat--input--border: 1px solid rgba(255, 255, 255, 0.14);
  --chat--input--border-active: 1px solid rgba(150, 115, 240, 0.7);
  --chat--input--border-radius: 10px;
  --chat--input--container--background: #050505;
  --chat--input--send--button--background: transparent;
  --chat--input--send--button--color: #b9a4ff;
  --chat--input--send--button--background-hover: transparent;
  --chat--input--send--button--color-hover: #ffffff;
  --chat--footer--background: #050505;
  --chat--footer--color: rgba(255, 255, 255, 0.55);

  /* bubble button — same deep navy/violet as the WhatsApp header button */
  --chat--toggle--size: 58px;
  --chat--toggle--background: linear-gradient(155deg, rgba(107, 70, 210, 0.7), rgba(12, 9, 26, 0.95) 70%), #100c1e;
  --chat--toggle--hover--background: linear-gradient(155deg, rgba(130, 92, 230, 0.85), rgba(16, 12, 32, 0.95) 70%), #14102a;
  --chat--toggle--active--background: linear-gradient(155deg, rgba(130, 92, 230, 0.85), rgba(16, 12, 32, 0.95) 70%), #14102a;
  --chat--toggle--color: #ffffff;
}

.chat-window-wrapper .chat-window-toggle {
  border: 1px solid rgba(150, 115, 240, 0.5);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

/* Header title in the site's display face, matching its uppercase labels */
.n8n-chat .chat-heading h1 {
  font-family: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Phones: window fills the screen width (minus a small gutter), never taller than the
   visible viewport, clear of the home-indicator area. */
@media (max-width: 600px) {
  :root {
    --chat--window--width: calc(100vw - 24px);
    --chat--window--height: min(620px, max(340px, calc(100dvh - 200px)));
    --chat--window--right: 12px;
    --chat--window--bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    --chat--toggle--size: 54px;
  }
}

/* The widget's layout is a <main> element, so the site's global `main { padding-top:
   var(--nav-h) }` (space for the fixed header) would leak in and push the chat's own
   header down. Reset it for the widget only. */
.n8n-chat .chat-layout,
.chat-window-wrapper .chat-layout {
  padding-top: 0;
}