/* =========================================================================
   wireagent - the front door's little agent (wa-*)

   A small conversational panel docked to the RIGHT of the landing page that
   asks a visitor four short questions: where they heard about us, what they
   most need from their outreach, how much they send, and who they are.

   Its own file, and its own class prefix, on purpose. site.css is the
   marketing page and styles.css is the console; this is neither, and the
   2026-08-13 lesson about the landing breaking silently whenever it borrowed
   the console's structural classes applies just as much in reverse. It reads
   the landing's TOKENS (which body.lp defines) and nothing else, so it
   inherits the night theme automatically and cannot be broken by a change to
   a class it does not use.

   Glass on chrome only, per the house rule: the panel is chrome, so it is
   glass; the answer chips inside it are solid, because a blurred target you
   are about to click is harder to read for nothing.
   ========================================================================= */

.wa-dock {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 60;
  width: min(360px, calc(100vw - 32px));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  font-family: "InterVar", var(--sans, system-ui);
}

.wa-dock[hidden] { display: none; }

/* ------------------------------------------------------------- launcher */

.wa-launch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px 11px 13px;
  border-radius: 9999px;
  border: 1px solid var(--glass-edge, rgba(140, 162, 230, .16));
  background: var(--surface-2, #15203c);
  color: var(--text, #eaf0ff);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  box-shadow: var(--lift-glass, 0 24px 70px -22px rgba(0, 1, 8, .8));
  transition: transform .2s var(--ease-out, ease), border-color .2s ease;
}

.wa-launch:hover { border-color: var(--border-strong, #33436b); transform: translateY(-1px); }
.wa-launch:focus-visible { outline: 2px solid var(--green, #fff); outline-offset: 3px; }

/* The product's own mark, small. A literal wire survives 16px, which is why
   it was drawn literally in the first place. */
.wa-mark { width: 20px; height: 12px; flex: none; }
.wa-mark path { fill: none; stroke: var(--green, #fff); stroke-width: 1.6; stroke-linecap: round; }
.wa-mark circle { fill: var(--green, #fff); }

/* A quiet pulse on the mark so the launcher reads as live without moving the
   button itself, which would drag the eye off the page it is sitting on. */
.wa-launch .wa-mark .wa-current {
  stroke-dasharray: 3 7;
  animation: wa-run 2.6s linear infinite;
}

@keyframes wa-run { to { stroke-dashoffset: -20; } }

/* --------------------------------------------------------------- panel */

.wa-panel {
  width: 100%;
  border-radius: 16px;
  border: 1px solid var(--glass-edge, rgba(140, 162, 230, .16));
  background: var(--glass-strong, rgba(130, 150, 225, .08));
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  box-shadow:
    var(--lift-glass, 0 24px 70px -22px rgba(0, 1, 8, .8)),
    inset 0 1px 0 var(--glass-spec, rgba(200, 215, 255, .16)),
    inset 0 -1px 0 rgba(0, 0, 0, .3);
  overflow: hidden;
  transform-origin: 100% 100%;
  animation: wa-in .32s var(--ease-out, cubic-bezier(.16, 1, .3, 1)) both;
}

/* Glass needs something behind it to refract. Where the browser cannot blur,
   a translucent panel is just a murky box, so fall back to a solid surface. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .wa-panel { background: var(--surface-2, #15203c); }
}

@keyframes wa-in {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

.wa-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px 12px 14px;
  border-bottom: 1px solid var(--border, #232f4e);
}

.wa-who { font-size: 13px; font-weight: 600; letter-spacing: .01em; color: var(--text, #eaf0ff); }

/* Mono for the counter, never for prose: it is a value, and a proportional
   figure would jitter the header every time the step changed. */
.wa-step {
  margin-left: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--faint, #808fb6);
}

.wa-x {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 8px;
  border: 1px solid transparent;
  background: none;
  color: var(--muted, #9daecf);
  font-size: 15px; line-height: 1;
  cursor: pointer;
}
.wa-x:hover { color: var(--text, #eaf0ff); border-color: var(--control-border, #3b4a70); }
.wa-x:focus-visible { outline: 2px solid var(--green, #fff); outline-offset: 2px; }

.wa-body { padding: 14px; display: grid; gap: 12px; }

/* What the agent says. Left-aligned bubble, the one soft-cornered shape here,
   so it reads as speech rather than as another card. */
.wa-say {
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px 12px 12px 4px;
  background: var(--surface, #0f1730);
  border: 1px solid var(--border, #232f4e);
  color: var(--text, #eaf0ff);
  font-size: 14px;
  line-height: 1.45;
}

.wa-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.wa-chip {
  padding: 8px 12px;
  border-radius: 9999px;
  border: 1px solid var(--control-border, #3b4a70);
  background: var(--surface-2, #15203c);
  color: var(--text, #eaf0ff);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.wa-chip:hover { border-color: var(--green, #fff); }
.wa-chip:focus-visible { outline: 2px solid var(--green, #fff); outline-offset: 2px; }
.wa-chip.is-picked { background: var(--green, #fff); border-color: var(--green, #fff); color: var(--green-ink, #0a1024); }
.wa-chip--quiet { border-style: dashed; color: var(--muted, #9daecf); }

.wa-field { display: grid; gap: 8px; }

.wa-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--control-border, #3b4a70);
  background: var(--surface, #0f1730);
  color: var(--text, #eaf0ff);
  font: inherit;
  font-size: 14px;
}
.wa-input::placeholder { color: var(--faint, #808fb6); }
.wa-input:focus-visible { outline: 2px solid var(--green, #fff); outline-offset: 1px; }

.wa-row { display: flex; gap: 8px; align-items: center; }

.wa-send {
  padding: 9px 16px;
  border-radius: 9999px;
  border: 1px solid var(--green, #fff);
  background: var(--green, #fff);
  color: var(--green-ink, #0a1024);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.wa-send:focus-visible { outline: 2px solid var(--green, #fff); outline-offset: 3px; }

.wa-skip {
  padding: 9px 10px;
  border: none;
  background: none;
  color: var(--muted, #9daecf);
  font: inherit;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.wa-skip:hover { color: var(--text, #eaf0ff); }
.wa-skip:focus-visible { outline: 2px solid var(--green, #fff); outline-offset: 2px; }

.wa-foot {
  display: grid;
  gap: 8px;
  padding: 10px 14px 12px;
  border-top: 1px solid var(--border, #232f4e);
  color: var(--faint, #808fb6);
  font-size: 11px;
  line-height: 1.5;
}

.wa-foot a { color: var(--grey-3, #c4d0ec); }

/* The progress rail: four steps, drawn as the product's own cable. */
.wa-rail { display: flex; gap: 4px; align-items: center; }
.wa-rail i {
  width: 14px; height: 2px;
  border-radius: 2px;
  background: var(--border-strong, #33436b);
  transition: background .25s ease;
}
.wa-rail i.is-done { background: var(--green, #fff); }

/* --------------------------------------------------------------- mobile */

/*
 * Under 720px the dock stops being a dock and becomes a sheet along the
 * bottom edge. A 360px panel pinned to the right of a 390px phone leaves a
 * 15px gutter and covers the page it is asking about.
 */
@media (max-width: 720px) {
  .wa-dock {
    right: 12px;
    left: 12px;
    bottom: 12px;
    width: auto;
    align-items: stretch;
  }
  .wa-launch { align-self: flex-end; }
  .wa-panel { max-height: 72vh; overflow-y: auto; }
}

/* Motion supports clarity or it goes. Reduced motion keeps every state and
   loses every transition, including the current running along the mark. */
@media (prefers-reduced-motion: reduce) {
  .wa-panel { animation: none; }
  .wa-launch { transition: none; }
  .wa-launch .wa-mark .wa-current { animation: none; stroke-dasharray: none; }
  .wa-chip, .wa-rail i { transition: none; }
}