/* Blue ("Ask Blue") — the chat widget, wearing the Spec Plate.
 *
 * Rules this file is held to (docs/DESIGN.md, enforced by
 * scripts/check-design-drift.mjs, which reads THIS FILE, not just the HTML):
 *   - Only the tokens below. No Tailwind slate, no navy that is not sp-navy.
 *   - radius 2px on controls, 4px at most on a card. Nothing rounder on this
 *     site, which is why the launcher is a plate and not the usual round pill.
 *   - Gold is annotation: rules, ticks, the lead-in on an eyebrow. There is no
 *     gold slab (decision D1-B, retired 2026-08-11), so the send button is
 *     steel with white ink, never gold with dark ink.
 *   - Registration ticks mark exactly ONE surface. Here it is the panel.
 *   - Archivo for anything you read, IBM Plex Mono for anything you measure.
 *
 * The faces are re-declared here on purpose. 85 of the 89 pages load Archivo
 * themselves; on the other 4 the widget would have silently fallen back to
 * system-ui and looked like a different product on those pages. Re-declaring
 * against the same /fonts URL costs nothing (the browser dedupes by URL) and
 * makes the widget render identically everywhere.
 *
 * Everything is scoped under .bcw- so a page cannot restyle the widget and the
 * widget cannot leak into a page.
 */

@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/archivo-latin-var.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/ibm-plex-mono-latin-500.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/ibm-plex-mono-latin-600.woff2') format('woff2'); }

.bcw-root {
  --bcw-navy: #051626;
  --bcw-steel: #0B3B60;
  --bcw-steel-2: #0d2c47;
  --bcw-ink: #0d1c42;
  --bcw-body: #475569;
  --bcw-muted: #5d7f96;
  --bcw-faint: #8ba3ba;
  --bcw-line: #d9e2ec;
  --bcw-line-soft: #e6edf4;
  --bcw-page: #fbfcfd;
  --bcw-paper: #f4f7f9;
  --bcw-gold: #B8920A;
  --bcw-gold-lt: #D4A93A;
  --bcw-gold-br: #FFD200;
  --bcw-display: 'Archivo', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --bcw-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ------------------------------------------------------------- the launcher */
/* A plate, not a pill. Squared corners are the whole visual argument of this
   site, and a 999px bubble in the corner would be the single most obviously
   off-brand element on the property. */
.bcw-launcher {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .62rem .95rem .62rem .8rem;
  border: 1px solid var(--bcw-steel);
  border-radius: 2px;
  background: var(--bcw-navy);
  color: #EAF1FA;
  cursor: pointer;
  z-index: 2147483000;
  font-family: var(--bcw-mono);
  font-size: .63rem;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  box-shadow: 0 10px 28px rgba(5, 22, 38, .3);
  transition: background .16s ease, transform .16s ease;
}
.bcw-launcher:hover { background: var(--bcw-steel-2); transform: translateY(-1px); }
.bcw-launcher:focus-visible { outline: 2px solid var(--bcw-gold); outline-offset: 2px; }
.bcw-launcher img { width: 1.55rem; height: auto; display: block; flex: none; }
/* The gold rule that says "annotation", the same lead-in an .sp-eyebrow uses. */
.bcw-launcher::after {
  content: "";
  position: absolute;
  left: -1px; top: -1px; bottom: -1px;
  width: 3px;
  background: var(--bcw-gold);
}
.bcw-launcher.bcw-hidden { display: none; }

/* ---------------------------------------------------------------- the panel */
.bcw-panel {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  width: min(23.5rem, calc(100vw - 2.5rem));
  height: min(34rem, calc(100vh - 3rem));
  height: min(34rem, calc(100dvh - 3rem));
  background: linear-gradient(180deg, var(--bcw-page), var(--bcw-paper));
  border: 1px solid var(--bcw-line);
  border-radius: 4px;
  display: none;
  flex-direction: column;
  overflow: hidden;
  z-index: 2147483001;
  font-family: var(--bcw-display);
  box-shadow: 0 24px 60px rgba(5, 22, 38, .26);
}
.bcw-panel.bcw-open { display: flex; }

/* Registration ticks: the gold corner brackets a drafter puts on the plate
   that matters. This is the one surface on the widget that gets them. */
.bcw-panel::before, .bcw-panel::after {
  content: "";
  position: absolute;
  width: 11px; height: 11px;
  border: 2px solid var(--bcw-gold);
  pointer-events: none;
  z-index: 3;
}
.bcw-panel::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.bcw-panel::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

/* ----------------------------------------------------------- the sheet head */
/* The one dark band, exactly as a page is allowed one. */
.bcw-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .85rem .95rem;
  background: linear-gradient(160deg, #041220, var(--bcw-navy) 55%, #0a3055);
  border-bottom: 2px solid var(--bcw-gold);
}
.bcw-head-id { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.bcw-head-id img { width: 2.1rem; height: auto; display: block; flex: none; }
.bcw-head-name { min-width: 0; }
.bcw-head-name strong {
  display: block;
  font-family: var(--bcw-display);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #fff;
  line-height: 1.1;
}
.bcw-head-name span {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-top: .18rem;
  font-family: var(--bcw-mono);
  font-size: .55rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bcw-gold-br);
}
.bcw-head-name span::before { content: ""; width: 1.1rem; height: 1px; background: currentColor; flex: none; opacity: .85; }

.bcw-close {
  flex: none;
  width: 1.9rem; height: 1.9rem;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid rgba(148, 163, 184, .34);
  border-radius: 2px;
  color: #8FA8BE;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.bcw-close:hover { color: #fff; border-color: var(--bcw-gold); }
.bcw-close:focus-visible { outline: 2px solid var(--bcw-gold); outline-offset: 1px; }
.bcw-close svg { width: 1rem; height: 1rem; }

/* ------------------------------------------------------------- the messages */
.bcw-messages {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: .95rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.bcw-msg {
  max-width: 86%;
  padding: .6rem .8rem;
  border-radius: 2px;
  font-size: .875rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.bcw-msg-bot {
  align-self: flex-start;
  background: #fff;
  border: 1px solid var(--bcw-line);
  border-left: 3px solid var(--bcw-gold);
  color: var(--bcw-body);
}
.bcw-msg-user {
  align-self: flex-end;
  background: var(--bcw-steel);
  color: #fff;
}
.bcw-msg a { color: var(--bcw-steel); font-weight: 700; text-underline-offset: 2px; }
.bcw-msg-user a { color: #fff; }
.bcw-msg-bot strong { color: var(--bcw-ink); font-weight: 700; }

.bcw-typing {
  align-self: flex-start;
  display: flex;
  gap: .28rem;
  padding: .7rem .8rem;
  background: #fff;
  border: 1px solid var(--bcw-line);
  border-left: 3px solid var(--bcw-gold);
  border-radius: 2px;
}
.bcw-typing i {
  width: .32rem; height: .32rem;
  background: var(--bcw-faint);
  animation: bcw-pulse 1.1s infinite ease-in-out;
}
.bcw-typing i:nth-child(2) { animation-delay: .15s; }
.bcw-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes bcw-pulse { 0%, 60%, 100% { opacity: .35; } 30% { opacity: 1; } }

/* ------------------------------------------------------- opening suggestions */
/* Three real questions, so a visitor who does not know what to ask still tells
   us what they came for. They disappear after the first message. */
.bcw-chips { display: flex; flex-direction: column; gap: .4rem; margin-top: .15rem; }
.bcw-chip {
  text-align: left;
  padding: .5rem .7rem;
  background: #fff;
  border: 1px solid var(--bcw-line);
  border-radius: 2px;
  font-family: var(--bcw-display);
  font-size: .8rem;
  font-weight: 600;
  color: var(--bcw-steel);
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease;
}
.bcw-chip:hover { background: #FFFCF0; border-color: var(--bcw-gold); }
.bcw-chip:focus-visible { outline: 2px solid var(--bcw-gold); outline-offset: 1px; }

/* ---------------------------------------------------------------- the input */
.bcw-form {
  flex: none;
  display: flex;
  gap: .5rem;
  padding: .7rem;
  background: #fff;
  border-top: 1px solid var(--bcw-line);
}
.bcw-input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--bcw-line);
  border-radius: 2px;
  padding: .55rem .7rem;
  font-family: var(--bcw-display);
  font-size: .875rem;
  color: var(--bcw-ink);
  background: var(--bcw-page);
  resize: none;
  max-height: 5rem;
}
.bcw-input::placeholder { color: var(--bcw-faint); }
.bcw-input:focus { outline: none; border-color: var(--bcw-steel); background: #fff; }

/* Steel plate, white ink. NOT a gold slab. */
.bcw-send {
  flex: none;
  width: 2.4rem;
  align-self: stretch;
  display: flex; align-items: center; justify-content: center;
  background: var(--bcw-steel);
  border: 1px solid var(--bcw-steel);
  border-radius: 2px;
  color: #fff;
  cursor: pointer;
  transition: background .15s ease;
}
.bcw-send:hover:not(:disabled) { background: var(--bcw-steel-2); }
.bcw-send:disabled { opacity: .42; cursor: default; }
.bcw-send:focus-visible { outline: 2px solid var(--bcw-gold); outline-offset: 1px; }
.bcw-send svg { width: 1.05rem; height: 1.05rem; }

/* ----------------------------------------------------------- the titleblock */
/* The strip at the foot of a drawing sheet: mono label over mono value, facts
   only. Here the fact is who actually answers when the bot cannot. */
.bcw-foot {
  flex: none;
  display: flex;
  align-items: baseline;
  gap: .5rem;
  padding: .5rem .8rem .6rem;
  background: #fff;
  border-top: 1px solid var(--bcw-line-soft);
  font-family: var(--bcw-mono);
  font-size: .55rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bcw-muted);
}
.bcw-foot a { color: var(--bcw-steel); text-decoration: none; }
.bcw-foot a:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 30rem) {
  .bcw-panel {
    right: .5rem; left: .5rem;
    bottom: .5rem;
    bottom: calc(.5rem + env(safe-area-inset-bottom, 0px));
    width: auto;
    height: min(32rem, calc(100vh - 1.5rem));
    height: min(32rem, calc(100dvh - 1.5rem));
  }
  .bcw-launcher { right: .75rem; bottom: .75rem; bottom: calc(.75rem + env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
  .bcw-launcher, .bcw-typing i, .bcw-chip, .bcw-send, .bcw-close { transition: none; animation: none; }
}