/* ekg-bot — house guide widget (fleet canon, 1.0.2).
   Every colour, font, radius and shadow is an --ekgbot-* custom property with a neutral default, declared under
   :where(.ekgbot) so it carries zero specificity: a site maps its own design tokens with a plain `.ekgbot { … }` rule
   in its theme and wins regardless of load order (and dark mode follows whatever the site's tokens do). Sites may also
   pass their own stop-callout classes through config.classes; .ekgbot__stop below is the fallback. */

:where(.ekgbot) {
  --ekgbot-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ekgbot-font-serif: Georgia, Cambria, "Times New Roman", serif;
  --ekgbot-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ekgbot-surface: #faf9f7;
  --ekgbot-card: #ffffff;
  --ekgbot-tint: #f2f1ee;
  --ekgbot-ink: #2a2926;
  --ekgbot-ink-strong: #161615;
  --ekgbot-ink-2: #4e4a44;
  --ekgbot-muted: #696459;
  --ekgbot-border: #dad5c9;
  --ekgbot-border-strong: #bfb9ac;
  --ekgbot-border-ink: #161615;
  --ekgbot-accent: #234c8f;
  --ekgbot-accent-hover: #1b3c73;
  --ekgbot-accent-press: #152d56;
  --ekgbot-on-accent: #ffffff;
  --ekgbot-accent-soft: #eef3fa;
  --ekgbot-accent-soft-line: #b4c8e8;
  --ekgbot-info-ink: #1b3c73;
  --ekgbot-accent-2: #a9440f;
  --ekgbot-beam: #d65b1d;
  --ekgbot-focus: #2f5fac;
  --ekgbot-focus-halo: #dbe5f4;
  --ekgbot-link: #234c8f;
  --ekgbot-link-hover: #152d56;
  --ekgbot-safe-ink: #17512f;
  --ekgbot-caution-soft: #fdf4e3;
  --ekgbot-caution-line: #d9950f;
  --ekgbot-caution-ink: #6b4505;
  --ekgbot-stop-soft: #fcedec;
  --ekgbot-stop-line: #cf4a3c;
  --ekgbot-stop-ink: #801710;
  --ekgbot-radius-sm: 4px;
  --ekgbot-radius-md: 6px;
  --ekgbot-radius-lg: 10px;
  --ekgbot-shadow-md: 0 1px 2px rgba(22, 22, 21, 0.05), 0 10px 28px -12px rgba(22, 22, 21, 0.18);
  --ekgbot-shadow-lg: 0 2px 4px rgba(22, 22, 21, 0.06), 0 24px 48px -16px rgba(22, 22, 21, 0.24);
  --ekgbot-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

.ekgbot {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 9990;
  font-family: var(--ekgbot-font);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ekgbot-ink);
}
.ekgbot *, .ekgbot *::before, .ekgbot *::after { box-sizing: border-box; }
.ekgbot button { font-family: inherit; }

/* ---- launcher ----------------------------------------------------------- */
.ekgbot__launch {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 18px;
  border: 0; border-radius: var(--ekgbot-radius-sm);
  background: var(--ekgbot-accent); color: var(--ekgbot-on-accent);
  font: 700 1rem/1.2 var(--ekgbot-font);
  box-shadow: var(--ekgbot-shadow-md);
  cursor: pointer;
  transition: background-color 150ms var(--ekgbot-ease), transform 150ms var(--ekgbot-ease);
}
.ekgbot__launch:hover { background: var(--ekgbot-accent-hover); transform: translateY(-2px); }
.ekgbot__launch:active { background: var(--ekgbot-accent-press); transform: none; }
.ekgbot__launch:focus-visible { outline: 2px solid var(--ekgbot-focus); outline-offset: 3px; }
.ekgbot__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ekgbot-beam); flex: none; }
.ekgbot.is-open .ekgbot__launch { display: none; }

/* Signed-in invitees: the launcher says who is signed in (pilots get no admin bar, so nothing else does),
   and the first page after sign-in shows a one-time note above it. */
.ekgbot__launch-text { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; }
.ekgbot__me { font: 500 0.75rem/1.2 var(--ekgbot-font-mono); opacity: 0.88; }
.ekgbot:has(.ekgbot__hello) { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.ekgbot__hello {
  position: relative;
  width: min(320px, calc(100vw - 32px));
  padding: 12px 40px 12px 14px;
  background: var(--ekgbot-card); color: var(--ekgbot-ink);
  border: 1px solid var(--ekgbot-border-strong); border-left: 3px solid var(--ekgbot-safe-ink);
  border-radius: var(--ekgbot-radius-md);
  box-shadow: var(--ekgbot-shadow-md);
  font-size: 0.9375rem; line-height: 1.45;
}
.ekgbot__hello p { margin: 0; }
.ekgbot__hello strong { color: var(--ekgbot-ink-strong); }
.ekgbot__hello-x {
  position: absolute; top: 6px; right: 6px; width: 28px; height: 28px;
  border: 1px solid transparent; border-radius: var(--ekgbot-radius-sm);
  background: transparent; color: var(--ekgbot-ink-2); font-size: 1.25rem; line-height: 1; cursor: pointer;
}
.ekgbot__hello-x:hover { border-color: var(--ekgbot-border-strong); color: var(--ekgbot-ink-strong); }
.ekgbot__hello-x:focus-visible { outline: 2px solid var(--ekgbot-focus); outline-offset: 2px; }
.ekgbot__signout { color: var(--ekgbot-link); }
.ekgbot__signout:hover { color: var(--ekgbot-link-hover); }

/* ---- panel -------------------------------------------------------------- */
.ekgbot__panel {
  width: min(420px, calc(100vw - 32px));
  max-height: min(700px, calc(100vh - 32px));
  max-height: min(700px, calc(100dvh - 32px));
  display: flex; flex-direction: column;
  background: var(--ekgbot-surface);
  border: 1px solid var(--ekgbot-border-strong);
  border-radius: var(--ekgbot-radius-lg);
  box-shadow: var(--ekgbot-shadow-lg);
  overflow: hidden;
  transition: width 240ms var(--ekgbot-ease), max-height 240ms var(--ekgbot-ease);
}
.ekgbot__panel[hidden] { display: none; }
/* 1.0.1: on a computer the panel opens up while the assistant answers, so the answer, its sources and the
   question box have room. Phones already get the full width (see the 560px rule below). */
@media (min-width: 900px) {
  .ekgbot.is-assistant .ekgbot__panel {
    width: min(600px, calc(100vw - 32px));
    max-height: min(860px, calc(100vh - 32px));
    max-height: min(860px, calc(100dvh - 32px));
  }
}

.ekgbot__head { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px 12px; background: var(--ekgbot-card); border-bottom: 1px solid var(--ekgbot-border); }
.ekgbot__titles { flex: 1; min-width: 0; }
.ekgbot__kicker {
  display: flex; align-items: center; gap: 8px; margin: 0 0 4px;
  font: 600 0.75rem/1.2 var(--ekgbot-font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ekgbot-accent-2);
}
.ekgbot__kicker::before { content: ""; width: 18px; height: 2px; background: var(--ekgbot-beam); }
.ekgbot__title { margin: 0; font: 800 1.125rem/1.25 var(--ekgbot-font); letter-spacing: -0.01em; color: var(--ekgbot-ink-strong); }
.ekgbot__who { margin: 2px 0 0; font: 400 0.8125rem/1.35 var(--ekgbot-font-mono); color: var(--ekgbot-muted); }
.ekgbot__who strong { color: var(--ekgbot-safe-ink); font-weight: 600; }
.ekgbot__close {
  flex: none; width: 36px; height: 36px; margin: -4px -6px 0 0;
  border: 1px solid transparent; border-radius: var(--ekgbot-radius-sm);
  background: transparent; color: var(--ekgbot-ink-2); font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.ekgbot__close:hover { border-color: var(--ekgbot-border-strong); color: var(--ekgbot-ink-strong); }
.ekgbot__close:focus-visible { outline: 2px solid var(--ekgbot-focus); outline-offset: 2px; }

.ekgbot__crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px;
  padding: 8px 16px; border-bottom: 1px solid var(--ekgbot-border); background: var(--ekgbot-tint);
  font: 400 0.75rem/1.4 var(--ekgbot-font-mono); color: var(--ekgbot-muted);
}
.ekgbot__crumbs[hidden] { display: none; }
.ekgbot__crumb { padding: 2px 0; border: 0; background: none; font: inherit; color: var(--ekgbot-link); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.ekgbot__crumb:hover { color: var(--ekgbot-link-hover); }
.ekgbot__crumb--current { color: var(--ekgbot-ink); text-decoration: none; cursor: default; }

/* ---- log ---------------------------------------------------------------- */
.ekgbot__log { position: relative; flex: 1 1 auto; min-height: 120px; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.ekgbot__msg p { margin: 0 0 8px; }
.ekgbot__msg > :last-child, .ekgbot__msg p:last-child { margin-bottom: 0; }
.ekgbot__msg--user {
  align-self: flex-end; max-width: 85%; padding: 8px 12px;
  border-radius: var(--ekgbot-radius-lg) var(--ekgbot-radius-lg) 2px var(--ekgbot-radius-lg);
  background: var(--ekgbot-accent-soft); color: var(--ekgbot-info-ink); border: 1px solid var(--ekgbot-accent-soft-line);
  font-weight: 600;
}
.ekgbot__note { margin: 0; font-size: 0.8125rem; line-height: 1.45; color: var(--ekgbot-muted); }
.ekgbot__hub, .ekgbot__asset { display: inline-flex; gap: 6px; margin-top: 6px; margin-right: 12px; font-weight: 600; color: var(--ekgbot-link); text-underline-offset: 3px; }
.ekgbot__hub:hover, .ekgbot__asset:hover { color: var(--ekgbot-link-hover); }
.ekgbot__assets { display: flex; flex-wrap: wrap; }

.ekgbot__card, .ekgbot__ai { padding: 14px 16px; background: var(--ekgbot-card); border: 1px solid var(--ekgbot-border); border-radius: var(--ekgbot-radius-lg); }
.ekgbot__eyebrow { margin: 0 0 6px; font: 600 0.6875rem/1.3 var(--ekgbot-font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ekgbot-muted); }
.ekgbot__q { margin: 0 0 8px; font: 700 1.0625rem/1.3 var(--ekgbot-font); color: var(--ekgbot-ink-strong); letter-spacing: -0.005em; }
.ekgbot__short { margin: 0 0 10px; font: 400 1.0625rem/1.55 var(--ekgbot-font-serif); color: var(--ekgbot-ink); }
.ekgbot__read { font-weight: 700; color: var(--ekgbot-link); text-underline-offset: 3px; }
.ekgbot__read:hover { color: var(--ekgbot-link-hover); }
.ekgbot__related { margin: 10px 0 0; padding: 10px 0 0; border-top: 1px dashed var(--ekgbot-border-strong); list-style: none; font-size: 0.875rem; }
.ekgbot__related li + li { margin-top: 4px; }
.ekgbot__related a { color: var(--ekgbot-link); text-underline-offset: 2px; }

/* stop: the site's own callout when it passes one; this is the fallback */
.ekgbot__stop { padding: 12px 14px; background: var(--ekgbot-stop-soft); border: 1px solid var(--ekgbot-stop-line); border-left-width: 6px; border-radius: 0 var(--ekgbot-radius-md) var(--ekgbot-radius-md) 0; color: var(--ekgbot-ink); }
.ekgbot__stop-title { margin: 0 0 6px; font-weight: 700; color: var(--ekgbot-stop-ink); }
.ekgbot__stop-title::before { content: "\26D4\00a0"; }
.ekgbot__log [role="alert"] { margin: 0; padding: 12px 14px 12px 16px; max-width: none; }
.ekgbot__log [role="alert"] > p:first-child { font-size: 1rem; }
.ekgbot__log [role="alert"] p { margin: 0 0 8px; }
.ekgbot__stopitem + .ekgbot__stopitem { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ekgbot-stop-line); }
.ekgbot__stopitem h4 { margin: 0 0 4px; font: 700 0.9375rem/1.35 var(--ekgbot-font); color: var(--ekgbot-stop-ink); }
.ekgbot__stopitem p { margin: 0 0 6px; font-size: 0.9375rem; }
.ekgbot__stopitem a { color: var(--ekgbot-stop-ink); font-weight: 700; }

/* ---- choices ------------------------------------------------------------ */
.ekgbot__choices { flex: 0 0 auto; max-height: 62%; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 12px 16px 14px; border-top: 1px solid var(--ekgbot-border); background: var(--ekgbot-card); }
.ekgbot__choices:empty { display: none; }
.ekgbot__choice {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 9px 12px;
  border: 1px solid var(--ekgbot-border-strong); border-radius: var(--ekgbot-radius-sm);
  background: var(--ekgbot-card); color: var(--ekgbot-ink-strong);
  font: 600 0.9375rem/1.3 var(--ekgbot-font); text-align: left; text-decoration: none; cursor: pointer;
  transition: border-color 120ms var(--ekgbot-ease), background-color 120ms var(--ekgbot-ease);
}
.ekgbot__choice::after { content: "\2192"; flex: none; color: var(--ekgbot-muted); transition: transform 150ms var(--ekgbot-ease); }
.ekgbot__choice:hover { border-color: var(--ekgbot-border-ink); }
.ekgbot__choice:hover::after { transform: translateX(3px); color: var(--ekgbot-beam); }
.ekgbot__choice:focus-visible { outline: 2px solid var(--ekgbot-focus); outline-offset: 2px; }
.ekgbot__choice--primary { background: var(--ekgbot-accent); border-color: var(--ekgbot-accent); color: var(--ekgbot-on-accent); }
.ekgbot__choice--primary::after, .ekgbot__choice--primary:hover::after { color: var(--ekgbot-on-accent); }
.ekgbot__choice--primary:hover { background: var(--ekgbot-accent-hover); border-color: var(--ekgbot-accent-hover); }
.ekgbot__choice--ai { background: var(--ekgbot-accent-soft); border-color: var(--ekgbot-accent-soft-line); color: var(--ekgbot-info-ink); }
.ekgbot__choice--ai:hover { border-color: var(--ekgbot-accent); }
.ekgbot__choice--ai::after { margin-left: 4px; }
.ekgbot__choice--stop { border-color: var(--ekgbot-stop-line); color: var(--ekgbot-stop-ink); background: var(--ekgbot-stop-soft); }
.ekgbot__choice--back, .ekgbot__choice--quiet { border-style: dashed; color: var(--ekgbot-ink-2); font-weight: 500; }
.ekgbot__choice--back { justify-content: flex-start; }
.ekgbot__choice--back::after { content: "\2190"; order: -1; }
.ekgbot__tag { margin-left: auto; padding: 1px 6px; border: 1px solid currentColor; border-radius: 999px; font: 600 0.625rem/1.4 var(--ekgbot-font-mono); letter-spacing: 0.06em; text-transform: uppercase; }

/* ---- assistant ---------------------------------------------------------- */
.ekgbot__handoff { padding: 12px 14px; border: 1.5px dashed var(--ekgbot-accent-soft-line); border-radius: var(--ekgbot-radius-lg); background: var(--ekgbot-card); }
.ekgbot__handoff .ekgbot__eyebrow { color: var(--ekgbot-info-ink); }
.ekgbot__context { margin: 4px 0 0; font-size: 0.875rem; color: var(--ekgbot-ink-2); }
.ekgbot__chip { display: inline-block; margin-top: 2px; padding: 2px 8px; border-radius: 999px; background: var(--ekgbot-tint); border: 1px solid var(--ekgbot-border); color: var(--ekgbot-ink); font-weight: 600; }
.ekgbot__samples { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.ekgbot__sample { padding: 8px 10px; border: 1px solid var(--ekgbot-border); border-radius: var(--ekgbot-radius-sm); background: var(--ekgbot-surface); color: var(--ekgbot-link); font: 500 0.875rem/1.35 var(--ekgbot-font); text-align: left; cursor: pointer; }
.ekgbot__sample:hover { border-color: var(--ekgbot-accent); }
.ekgbot__sample:focus-visible { outline: 2px solid var(--ekgbot-focus); outline-offset: 2px; }

.ekgbot__composer { display: flex; flex-direction: column; gap: 8px; }
.ekgbot__composer label { font: 700 0.875rem/1.3 var(--ekgbot-font); color: var(--ekgbot-ink-strong); }
.ekgbot__composer textarea {
  width: 100%; min-height: 52px; max-height: 140px; resize: vertical; padding: 8px 10px;
  border: 1px solid var(--ekgbot-border-strong); border-radius: var(--ekgbot-radius-sm);
  background: var(--ekgbot-card); color: var(--ekgbot-ink); font: 400 0.9375rem/1.45 var(--ekgbot-font);
}
.ekgbot__composer textarea:focus { outline: none; border-color: var(--ekgbot-focus); box-shadow: 0 0 0 3px var(--ekgbot-focus-halo); }
.ekgbot__row { display: flex; gap: 8px; align-items: center; }
.ekgbot__ask { padding: 9px 16px; border: 0; border-radius: var(--ekgbot-radius-sm); background: var(--ekgbot-accent); color: var(--ekgbot-on-accent); font: 700 0.9375rem/1.2 var(--ekgbot-font); cursor: pointer; }
.ekgbot__ask:hover { background: var(--ekgbot-accent-hover); }
.ekgbot__ask[disabled] { opacity: 0.55; cursor: progress; }
.ekgbot__ask:focus-visible { outline: 2px solid var(--ekgbot-focus); outline-offset: 2px; }
.ekgbot__textbtn { padding: 6px 4px; border: 0; background: none; color: var(--ekgbot-ink-2); font: 500 0.875rem/1.2 var(--ekgbot-font); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.ekgbot__textbtn:hover { color: var(--ekgbot-ink-strong); }
.ekgbot__disclose { margin: 0; font-size: 0.75rem; line-height: 1.45; color: var(--ekgbot-muted); }

.ekgbot__ai .ekgbot__eyebrow { color: var(--ekgbot-safe-ink); }
.ekgbot__ai--stop { padding: 0; border: 0; background: none; }
.ekgbot__ai--stop .ekgbot__next { padding: 0 2px; }
.ekgbot__para { margin: 0 0 10px; font: 400 1rem/1.55 var(--ekgbot-font-serif); }
.ekgbot__clarify { margin: 0 0 10px; }
.ekgbot__cite {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 20px; padding: 0 5px; margin-left: 2px; vertical-align: 1px;
  border: 1px solid var(--ekgbot-accent-soft-line); border-radius: var(--ekgbot-radius-sm);
  background: var(--ekgbot-accent-soft); color: var(--ekgbot-info-ink); font: 700 0.6875rem/1 var(--ekgbot-font-mono); cursor: pointer;
}
.ekgbot__cite:hover { border-color: var(--ekgbot-accent); }
.ekgbot__cite:focus-visible { outline: 2px solid var(--ekgbot-focus); outline-offset: 1px; }
.ekgbot__general { display: inline-block; margin-left: 4px; padding: 0 6px; vertical-align: 1px; border: 1px dashed var(--ekgbot-border-strong); border-radius: 999px; font: 600 0.625rem/1.6 var(--ekgbot-font-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ekgbot-muted); }
.ekgbot__limit { margin: 4px 0 10px; padding: 10px 12px; background: var(--ekgbot-caution-soft); border: 1px solid var(--ekgbot-caution-line); border-radius: var(--ekgbot-radius-md); font-size: 0.875rem; color: var(--ekgbot-ink); }
.ekgbot__limit strong { display: block; margin-bottom: 2px; color: var(--ekgbot-caution-ink); }
.ekgbot__handoffdraft { margin: 4px 0 10px; padding: 10px 12px; border: 1px solid var(--ekgbot-border-strong); border-radius: var(--ekgbot-radius-md); background: var(--ekgbot-tint); font-size: 0.875rem; }
.ekgbot__handoffdraft pre { margin: 8px 0; white-space: pre-wrap; font: 400 0.8125rem/1.45 var(--ekgbot-font-mono); }
.ekgbot__sources { margin: 6px 0 0; border-top: 1px solid var(--ekgbot-border); padding-top: 8px; }
.ekgbot__sources summary { cursor: pointer; font: 600 0.75rem/1.4 var(--ekgbot-font-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ekgbot-ink-2); }
.ekgbot__sources ol { margin: 8px 0 0; padding-left: 20px; font-size: 0.875rem; }
.ekgbot__sources li + li { margin-top: 8px; }
.ekgbot__sources li.is-hit { background: var(--ekgbot-accent-soft); outline: 4px solid var(--ekgbot-accent-soft); border-radius: 2px; }
.ekgbot__srctitle { display: block; font-weight: 700; color: var(--ekgbot-ink-strong); }
.ekgbot__sources a { color: var(--ekgbot-link); }
.ekgbot__pub { color: var(--ekgbot-muted); }
.ekgbot__next { margin-top: 10px; }
.ekgbot__next p { margin: 0 0 6px; font: 600 0.75rem/1.4 var(--ekgbot-font-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ekgbot-ink-2); }

.ekgbot__status { padding: 10px 12px; border-radius: var(--ekgbot-radius-md); background: var(--ekgbot-tint); border: 1px solid var(--ekgbot-border-strong); font-size: 0.9375rem; }
.ekgbot__status strong { color: var(--ekgbot-ink-strong); }
.ekgbot__thinking { display: inline-flex; align-items: center; gap: 8px; font: 400 0.875rem/1.3 var(--ekgbot-font-mono); color: var(--ekgbot-muted); }
.ekgbot__thinking::before { content: ""; width: 14px; height: 2px; background: var(--ekgbot-beam); animation: ekgbot-scan 900ms var(--ekgbot-ease) infinite alternate; }
@keyframes ekgbot-scan { from { transform: scaleX(0.2); transform-origin: left; } to { transform: scaleX(1); transform-origin: left; } }
@media (prefers-reduced-motion: reduce) { .ekgbot__thinking::before { animation: none; } .ekgbot__launch, .ekgbot__panel { transition: none; } }

.ekgbot__foot { padding: 8px 16px; border-top: 1px solid var(--ekgbot-border); font: 400 0.6875rem/1.4 var(--ekgbot-font-mono); color: var(--ekgbot-muted); background: var(--ekgbot-card); }

/* ---- phone: bottom sheet ------------------------------------------------ */
@media (max-width: 560px) {
  .ekgbot { right: 12px; bottom: 12px; }
  .ekgbot.is-open { left: 0; right: 0; bottom: 0; }
  .ekgbot__panel { width: 100vw; max-height: 92vh; max-height: 92dvh; border-radius: var(--ekgbot-radius-lg) var(--ekgbot-radius-lg) 0 0; border-bottom: 0; }
  .ekgbot__choices { max-height: 55%; }
}

@media print { .ekgbot { display: none; } }
