/* =====================================================================
   BRAND JOY LAB — PUBLIC CHAT  ·  bjl-chat.css
   PETERMAYER · drop-in stylesheet for joylab.peteramayer.com/public-chat
   =====================================================================
   SELF-CONTAINED. Paste this in to replace the chat block in the iframe
   page's <style>. It defines its own brand tokens + @font-face, so the
   page needs no other CSS. Ship the /fonts folder alongside it.

   Design direction: "Quiet Note" — maximum Cloud, hairline structure,
   flat answers. The surface reads like a thoughtful note from a sharp
   colleague, not a database widget. Joy-yellow is the one signal that
   says "this is a Brand Joy Lab answer." Everything else stays neutral
   so the insight (and the attribution) is what you notice.

   RESPONSIVE STRATEGY: container queries, not viewport media queries.
   The frame is the query container, so the layout adapts to the WIDTH
   OF THE EMBED SLOT itself — works identically whether the iframe is a
   360px mobile column or a 720px desktop section. No JS resize needed.

   CONTENTS
     0. FONTS
     1. BRAND TOKENS         (PM snapshot v1.0 — do not invent values)
     2. CHAT-LOCAL TOKENS    (the knobs for THIS surface)
     3. FRAME + HEADER + LOG
     4. MESSAGES             (user / bot / loading / error)
     5. SAMPLE QUESTIONS
     6. COMPOSE ROW
     7. LEAD CAPTURE — inline (Surface A)
     8. LEAD CAPTURE — lightbox (Surface B)
     9. THANK-YOU / SHARED FORM BITS
    10. FOOTER NOTE
    11. RESPONSIVE  (@container: 360 / 480 / 640 / 720)
    12. MOTION / REDUCED-MOTION
   ===================================================================== */


/* =====================================================================
   0 · FONTS  (ship these files in /fonts next to this stylesheet)
   ===================================================================== */
@font-face {
  font-family: "FK Screamer";
  src: url("fonts/FKScreamerLegacy-Upright.otf") format("opentype");
  font-weight: 400 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neue Haas Grotesk Text Pro";
  src: url("fonts/NeueHaasGroteskText-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neue Haas Grotesk Text Pro";
  src: url("fonts/NeueHaasGroteskText-Italic.ttf") format("truetype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Neue Haas Grotesk Text Pro";
  src: url("fonts/NeueHaasGroteskText-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}


/* =====================================================================
   1 · BRAND TOKENS  — PETERMAYER brand snapshot v1.0 (Jan 2024)
   These mirror the PM design-system tokens. Adjust upstream values here
   only if the brand system itself changes.
   ===================================================================== */
:root {
  /* Chromatic neutrals (warm-leaning) */
  --pm-cloud:  #fefff3;   /* off-white base — used most */
  --pm-iron:   #1e2620;   /* near-black — primary text + visitor bubble */
  --pm-grey-3: #464943;   /* body text */
  --pm-grey-2: #82837e;   /* secondary / muted text */
  --pm-grey-1: #c7cac2;   /* hairlines / disabled */
  --pm-white:  #ffffff;
  --pm-sunken: #f2f3e6;   /* faint sunken surface */

  /* Accents — the "brand joy" pops */
  --pm-joy:        #e9f055;  --pm-joy-dark:   #c2c93a;  --pm-joy-light:   #f4f7a6;
  --pm-fern:       #bbec65;  --pm-fern-light: #def4b0;
  --pm-grass:      #27be78;  --pm-grass-dark: #1e9a60;
  --pm-brick:      #f84a17;  --pm-brick-dark: #c2380e;  --pm-brick-light: #ffb59c;

  /* Semantic aliases */
  --surface-page:   var(--pm-cloud);
  --surface-card:   var(--pm-white);
  --text-strong:    var(--pm-iron);
  --text-body:      var(--pm-grey-3);
  --text-muted:     var(--pm-grey-2);
  --text-faint:     var(--pm-grey-1);
  --text-inverse:   var(--pm-cloud);
  --border-subtle:  #e6e7da;
  --hairline:       var(--pm-grey-1);
  --brand-primary:      var(--pm-iron);
  --brand-primary-text: var(--pm-cloud);
  --accent-energy:  var(--pm-brick);    /* conversion CTA */
  --accent-grow:    var(--pm-grass);    /* live status / success */
  --focus-ring:     var(--pm-grass-dark);

  /* Type families */
  --font-display: "FK Screamer", "Arial Black", sans-serif;
  --font-sans:    "Neue Haas Grotesk Text Pro", "Helvetica Neue", Arial, sans-serif;
  --font-text:    "Neue Haas Grotesk Text Pro", "Helvetica Neue", Arial, sans-serif;
  --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

  /* Spacing (4px base) */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem;
  --space-4: 1rem;    --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem;

  /* Radius */
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-pill: 999px;

  /* Shadows (soft, warm, Iron-tinted — never pure black) */
  --shadow-sm: 0 1px 2px rgba(30,38,32,0.06);
  --shadow-md: 0 4px 14px rgba(30,38,32,0.08);
  --shadow-lg: 0 18px 48px rgba(30,38,32,0.12);

  /* Motion */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms; --dur-base: 240ms;
}


/* =====================================================================
   2 · CHAT-LOCAL TOKENS  — retune the surface without touching rules
   ===================================================================== */
.chat-frame {
  --chat-bot-accent:      var(--pm-joy);        /* the one "Brand Joy Lab" signal */
  --chat-bot-accent-soft: var(--pm-joy-light);  /* soft chip fill */
  --chat-bot-rail:        4px;                  /* accent rail on bot answers */

  --chat-bubble-radius:   var(--radius-lg);     /* 14px */
  --chat-bubble-pad-y:    var(--space-4);       /* 16px */
  --chat-bubble-pad-x:    var(--space-5);       /* 24px */
  --chat-turn-gap:        var(--space-5);       /* 24px between turns */

  --chat-user-bg:         var(--pm-iron);
  --chat-user-fg:         var(--pm-cloud);

  --chat-field-radius:    var(--radius-md);     /* 8px on inputs */
  --chat-pad:             var(--space-5);       /* frame inner padding 24px */
  --chat-focus:           var(--focus-ring);    /* Grass-dark keyboard ring */
}


/* =====================================================================
   3 · FRAME + HEADER + LOG
   ===================================================================== */

/* v6.12: html + body must be height:100% so .chat-frame's height:100%
   actually fills the iframe. Without these the body collapses to its
   natural content height and the iframe shows blank space below the
   chat content (visible as the parent page's background bleeding
   through). Margin reset prevents a small gap at the top edge.
   v7.7: body background matches --surface-page so when the iframe is
   given a width wider than the chat's tuned design range (e.g. a
   lightbox/modal embed on hello.peteramayer.com), the centered
   chat-frame doesn't show a stark white gap on the sides. */
html, body {
  height: 100%;
  margin: 0;
  background: #fefff3;
}

.chat-frame {
  container-type: inline-size;   /* THIS is the responsive query container */
  position: relative;            /* anchors the Surface-B lightbox overlay */
  display: flex;
  flex-direction: column;
  height: 100%;                  /* fills the iframe; the iframe owns 640px */
  /* v7.7: cap the chat surface width regardless of how wide the iframe
     gets. The design was tuned for 360-720px container widths; above
     that, sample chips spread out, the intro paragraph wraps too long,
     and the surface reads scattered. The standard peteramayer.com
     embed uses iframe max-width 750px so this cap is a no-op there;
     only wider hosts (e.g. lightbox/modal embeds on
     hello.peteramayer.com) feel the cap. The iframe parent shows body
     bg in the side gaps (matched above so it blends seamlessly). */
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  min-height: 0;
  box-sizing: border-box;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-text);
  font-size: 1.0625rem;          /* 17px body */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;              /* the log scrolls, not the frame */
}
.chat-frame *, .chat-frame *::before, .chat-frame *::after { box-sizing: border-box; }
.chat-frame ::selection { background: var(--pm-joy); color: var(--pm-iron); }

/* --- Header: persistent brand attribution (always visible) --------- */
.chat-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--chat-pad);
  background: var(--surface-page);
  border-bottom: 1px solid var(--border-subtle);
}
.chat-header .bjl-wordmark { height: 15px; width: auto; display: block; flex: 0 0 auto; }
.chat-header .bjl-divider {
  width: 1px; align-self: stretch; margin: 2px 0;
  background: var(--border-subtle);
}
.chat-header .bjl-title {
  font-family: var(--font-sans);
  font-size: 1rem; font-weight: var(--fw-semibold);
  letter-spacing: 0.005em;
  color: var(--text-strong);
  white-space: nowrap;
}
.chat-header .bjl-status {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-muted); white-space: nowrap;
}
.chat-header .bjl-status::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent-grow);     /* Grass = live */
}

/* --- Conversation log ---------------------------------------------- */
#chat-log {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column;
  gap: var(--chat-turn-gap);
  padding: var(--chat-pad);
  scroll-behavior: smooth;
}
#chat-log::-webkit-scrollbar { width: 10px; }
#chat-log::-webkit-scrollbar-thumb {
  background: var(--pm-grey-1);
  border: 3px solid var(--surface-page);
  border-radius: var(--radius-pill);
}
#chat-log::-webkit-scrollbar-thumb:hover { background: var(--pm-grey-2); }


/* =====================================================================
   4 · MESSAGES
   ===================================================================== */
.msg {
  position: relative;
  max-width: 86%;
  padding: var(--chat-bubble-pad-y) var(--chat-bubble-pad-x);
  border-radius: var(--chat-bubble-radius);
  font-size: 1.0625rem; line-height: 1.6;
  overflow-wrap: anywhere;
  /* entrance — see §12 for the keyframes + reduced-motion guard */
  animation: bjl-rise var(--dur-base) var(--ease-out) both;
}

/* --- Visitor bubble: Iron fill, right-aligned ---------------------- */
.msg-user {
  align-self: flex-end;
  background: var(--chat-user-bg);
  color: var(--chat-user-fg);
  border-bottom-right-radius: var(--radius-sm);   /* tail notch */
}
.msg-user a { color: var(--pm-joy); }

/* --- Bot answer: the moneymaker. Flat (A), Joy rail, credit on top -- */
.msg-bot {
  align-self: flex-start;
  max-width: 100%;                 /* answers get room to breathe */
  background: var(--surface-card);
  color: var(--text-body);
  border: 1px solid var(--border-subtle);
  border-left: var(--chat-bot-rail) solid var(--chat-bot-accent);
  border-bottom-left-radius: var(--radius-sm);
  padding-left: calc(var(--chat-bubble-pad-x) - var(--chat-bot-rail));
}
/* Per-bubble credit — travels in every screenshot, forward & Slack share */
.msg-bot .bjl-credit {
  display: flex; align-items: center; gap: var(--space-2);
  margin-bottom: var(--space-3);
  font-family: var(--font-sans);
  font-size: 0.75rem; font-weight: var(--fw-semibold);
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-strong);
}
.msg-bot .bjl-credit::before {
  content: ""; width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto;
  background: var(--chat-bot-accent);
}
.msg-bot p { margin: 0 0 var(--space-3); }
.msg-bot p:last-child { margin-bottom: 0; }
.msg-bot strong { color: var(--text-strong); font-weight: var(--fw-bold); }

/* --- v6.14: provenance footer beneath each bot answer -------------- */
/* Eli's ask: data provenance at the bottom of each answer — the
   questions the tool referenced and the n for each. Rendered as a
   muted footer so it doesn't compete with the answer prose. */
.msg-provenance {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--surface-rule, rgba(30, 38, 32, 0.08));
}
.msg-prov-label {
  font-size: 0.6875rem;             /* ~11px */
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  color: var(--text-muted, #6b7670);
  margin-bottom: var(--space-2);
}
.msg-prov-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.msg-prov-row {
  font-size: 0.8125rem;             /* ~13px */
  line-height: 1.4;
  color: var(--text-muted, #6b7670);
}
.msg-prov-q {
  font-style: italic;
  color: var(--text-secondary, #4a5550);
}
.msg-prov-meta {
  font-size: 0.75rem;               /* ~12px */
  margin-top: 2px;
  color: var(--text-muted, #6b7670);
}

/* --- Thinking / loading -------------------------------------------- */
.msg-loading {
  align-self: flex-start;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-left: var(--chat-bot-rail) solid var(--chat-bot-accent);
  border-bottom-left-radius: var(--radius-sm);
  display: inline-flex; align-items: center; gap: 6px;
  padding: var(--space-4) var(--chat-bubble-pad-x);
}
.msg-loading .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--pm-grey-2);
  animation: bjl-pulse 1.1s var(--ease-inout) infinite;
}
.msg-loading .dot:nth-child(2) { animation-delay: 0.15s; }
.msg-loading .dot:nth-child(3) { animation-delay: 0.30s; }

/* v9.14 — two-line stage-aware loading bubble. Line 1 stays constant
   ("Thanks for being curious."), line 2 rotates with the backend
   pipeline phase. The dots sit to the right of the text so the whole
   bubble reads as a single quiet unit rather than a spinner. */
.msg-loading--v2 {
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--chat-bubble-pad-x);
  max-width: 100%;
}
.msg-loading--v2 .loading-lines {
  display: flex; flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.msg-loading--v2 .loading-line-1 {
  font-family: var(--font-sans);
  font-size: 0.9375rem; font-weight: var(--fw-semibold);
  color: var(--text-strong);
  letter-spacing: 0.005em;
}
.msg-loading--v2 .loading-line-2 {
  font-family: var(--font-text);
  font-size: 0.9375rem; line-height: 1.4;
  color: var(--text-muted);
  text-wrap: pretty;
  transition: opacity var(--dur-base) var(--ease-out);
}
.msg-loading--v2 .loading-dots {
  display: inline-flex; gap: 6px; flex: 0 0 auto;
}

/* --- Error bubble --------------------------------------------------- */
.msg-error {
  align-self: flex-start;
  background: var(--pm-brick-light);
  color: var(--pm-brick-dark);
  border: 1px solid var(--pm-brick);
  border-left: var(--chat-bot-rail) solid var(--accent-energy);
  border-bottom-left-radius: var(--radius-sm);
}
.msg-error a {
  color: var(--pm-brick-dark); font-weight: var(--fw-bold);
  text-underline-offset: 2px;
}


/* =====================================================================
   5 · SAMPLE QUESTIONS  (first load only — JS hides once a turn starts)
   ===================================================================== */
#sample-questions {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  padding: 0 var(--chat-pad) var(--space-4);
}

/* v9.14 — welcome copy mirrors the staff Intelligence pane treatment.
   Anchors the brand promise at the top of the empty state, above the
   instructional line and the sample chips. Hidden the moment a turn
   starts (parent #sample-questions goes display:none via JS). */
#sample-questions .bjl-welcome {
  width: 100%;
  margin: var(--space-2) 0 var(--space-4);
}
#sample-questions .bjl-welcome-title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: clamp(1.5rem, 3.4cqi + 0.9rem, 2rem);
  line-height: 1.05; letter-spacing: -0.012em;
  color: var(--text-strong);
  text-wrap: balance;
}
#sample-questions .bjl-welcome-sub {
  margin: var(--space-2) 0 0;
  font-family: var(--font-text);
  font-size: 1.0625rem; line-height: 1.4;
  color: var(--text-muted);
  font-style: italic;
}

#sample-questions .bjl-intro {
  width: 100%; margin: 0 0 var(--space-3);
  font-family: var(--font-text); font-size: 1.0625rem; line-height: 1.5;
  color: var(--text-body); text-wrap: pretty;
}
#sample-questions .bjl-intro strong { color: var(--text-strong); font-weight: var(--fw-semibold); }
#sample-questions .bjl-prompt {
  width: 100%; margin: 0 0 var(--space-1);
  font-family: var(--font-sans);
  font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-muted);
}
.sample-chip {
  appearance: none; cursor: pointer;
  font-family: var(--font-text); font-size: 0.9375rem; line-height: 1.3;
  color: var(--text-strong);
  background: var(--chat-bot-accent-soft);        /* soft Joy */
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-4);
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
/* every 3rd chip picks up Fern so the row feels playful, not monotone */
.sample-chip:nth-child(3n) { background: var(--pm-fern-light); }
.sample-chip:hover               { background: var(--chat-bot-accent); }      /* Joy */
.sample-chip:nth-child(3n):hover { background: var(--pm-fern); }
.sample-chip:focus-visible {
  outline: none; border-color: var(--text-strong);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--chat-focus) 45%, transparent);
}
.sample-chip:active   { transform: scale(0.96); }
.sample-chip:disabled { opacity: 0.5; cursor: not-allowed; }

/* v9.11 — grounded follow-up chips inside the bot bubble, between the
   answer body and the "What informed this" provenance. The label reads
   as a small caps prompt (matches .bjl-prompt from the first-load
   sample block). Chips inherit .sample-chip styling; .followup-chip is
   a size trim so the follow-ups read as secondary suggestions rather
   than primary CTAs. */
.followup-block {
  margin: var(--space-4) 0 var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--border-subtle);
}
.followup-label {
  margin: 0 0 var(--space-2);
  font-family: var(--font-sans);
  font-size: 0.75rem; font-weight: var(--fw-semibold);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-muted);
}
.followup-chips {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
}
.followup-chip { font-size: 0.875rem; padding: var(--space-1) var(--space-3); }

/* First-load layout: the empty log is hidden and the chips region becomes
   the (scrollable) body so the compose row stays pinned at the bottom even
   when 5-7 chips overflow a short (480px) frame. JS drops .is-empty once a
   turn starts, so the log takes over as the scroller. */
.chat-frame.is-empty #chat-log         { display: none; }
.chat-frame.is-empty #sample-questions {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding-top: var(--space-5);
}


/* =====================================================================
   6 · COMPOSE ROW
   ===================================================================== */
#compose {
  flex: 0 0 auto;
  display: flex; align-items: flex-end; gap: var(--space-3);
  padding: var(--space-4) var(--chat-pad);
  background: var(--surface-page);
  border-top: 1px solid var(--border-subtle);
}
#question-input {
  flex: 1 1 auto; resize: none;
  font-family: var(--font-text); font-size: 1.0625rem; line-height: 1.4;
  color: var(--text-strong);
  background: var(--surface-card);
  border: 1.5px solid var(--hairline);
  border-radius: var(--chat-field-radius);
  padding: var(--space-3) var(--space-4);
  /* v8.1: taller default + still expandable. Min keeps the question bar
     reading as the primary affordance even when empty; max caps growth
     so very long pastes don't push the compose row off-screen. */
  min-height: 84px;
  max-height: 160px;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
#question-input::placeholder { color: var(--text-muted); }      /* placeholder state */
#question-input:hover { border-color: var(--text-muted); }
#question-input:focus {
  outline: none; border-color: var(--text-strong);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--chat-focus) 40%, transparent);
}
#question-input:disabled { background: var(--pm-sunken); color: var(--text-muted); cursor: not-allowed; }

/* Send — primary PM pill (Iron fill / Cloud text) */
#send-btn {
  flex: 0 0 auto; appearance: none; cursor: pointer;
  font-family: var(--font-sans);
  font-size: 1rem; font-weight: var(--fw-semibold); letter-spacing: 0.005em;
  color: var(--brand-primary-text); background: var(--brand-primary);
  border: none; border-radius: var(--radius-pill);
  padding: var(--space-3) var(--space-5);
  min-height: 44px;                                /* min touch target */
  transition: filter var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
#send-btn:hover  { filter: brightness(1.35); }      /* Iron lifts toward grey */
#send-btn:active { transform: scale(0.96); }
#send-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--chat-focus) 55%, transparent);
}
#send-btn:disabled {
  cursor: not-allowed; background: var(--pm-grey-1); color: var(--surface-card);
  filter: none; transform: none;
}


/* =====================================================================
   7 · LEAD CAPTURE — inline (Surface A)
   Lives inside the bot's warm decline. Inviting, not transactional.
   ===================================================================== */
.capture-block {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px dashed var(--border-subtle);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.capture-block .bjl-capture-lede {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1.0625rem; font-weight: var(--fw-semibold);
  color: var(--text-strong);
}
.lead-form-row {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
}
/* flex-basis 130px + wrap => pair side-by-side normally, wrap to stacked
   only when the slot is too narrow to fit both (~<300px content width) */
.lead-form-row > * { flex: 1 1 130px; min-width: 0; }

.capture-block input {
  width: 100%;
  font-family: var(--font-text); font-size: 0.9375rem;
  color: var(--text-strong);
  background: var(--surface-page);
  border: 1.5px solid var(--hairline);
  border-radius: var(--chat-field-radius);
  padding: var(--space-3) var(--space-4);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.capture-block input::placeholder { color: var(--text-muted); }
.capture-block input:hover { border-color: var(--text-muted); }
.capture-block input:focus {
  outline: none; border-color: var(--text-strong);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--chat-focus) 40%, transparent);
}
.capture-block input[aria-invalid="true"] {
  border-color: var(--accent-energy);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-energy) 22%, transparent);
}
.lead-form-error { margin: calc(var(--space-2) * -1) 0 0; font-size: 0.875rem; color: var(--pm-brick-dark); }

.capture-block-actions {
  display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
}

/* Submit — accent (Brick) CTA: the conversion punch */
.bjl-submit {
  appearance: none; cursor: pointer;
  font-family: var(--font-sans);
  font-size: 1rem; font-weight: var(--fw-semibold);
  color: var(--text-inverse); background: var(--accent-energy);
  border: none; border-radius: var(--radius-pill);
  padding: var(--space-3) var(--space-5); min-height: 44px;
  transition: filter var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.bjl-submit:hover  { filter: brightness(0.92); }
.bjl-submit:active { transform: scale(0.96); }
.bjl-submit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-energy) 45%, transparent);
}
.bjl-submit:disabled { cursor: not-allowed; background: var(--pm-grey-1); color: var(--surface-card); filter: none; transform: none; }

/* Decline — quiet text link */
.bjl-decline {
  appearance: none; cursor: pointer; background: none; border: none;
  font-family: var(--font-text); font-size: 0.9375rem;
  color: var(--text-muted);
  text-decoration: underline; text-underline-offset: 3px;
  padding: var(--space-2);
}
.bjl-decline:hover { color: var(--text-strong); }
.bjl-decline:focus-visible {
  outline: none; border-radius: var(--radius-sm);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--chat-focus) 45%, transparent);
}


/* =====================================================================
   8 · LEAD CAPTURE — lightbox (Surface B)
   Fires after the visitor crosses ~7 consecutive queries. Modal over a
   dimmed backdrop, scoped INSIDE .chat-frame so it overlays only the
   embed (never the host page). Backdrop click = decline.
   ===================================================================== */
.lead-lightbox-backdrop {
  position: absolute; inset: 0; z-index: 20;
  display: none;                       /* .is-open flips to grid */
  place-items: center;
  padding: var(--space-6);             /* keeps the modal off the edges */
  background: color-mix(in srgb, var(--pm-iron) 58%, transparent);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.lead-lightbox-backdrop.is-open {
  display: grid;
  animation: bjl-fade var(--dur-base) var(--ease-out) both;
}
.lead-lightbox {
  width: 100%; max-width: 380px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-top: 4px solid var(--chat-bot-accent);    /* Joy cap ties it to the brand */
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-3);
  animation: bjl-pop var(--dur-base) var(--ease-out) both;
}
.lead-lightbox .bjl-credit {           /* mirror the answer's credit at the top */
  display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-1);
  font-family: var(--font-sans); font-size: 0.75rem; font-weight: var(--fw-semibold);
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-strong);
}
.lead-lightbox .bjl-credit::before {
  content: ""; width: 9px; height: 9px; border-radius: 2px; background: var(--chat-bot-accent);
}
.lead-lightbox h3 {
  margin: 0;
  font-family: var(--font-sans); font-weight: var(--fw-bold);
  font-size: 1.5rem; line-height: 1.1; letter-spacing: -0.01em;
  color: var(--text-strong); text-wrap: balance;
}
.lead-lightbox p {
  margin: 0 0 var(--space-2);
  font-size: 1rem; line-height: 1.5; color: var(--text-body);
}
.lead-lightbox .lead-form-row { margin-top: var(--space-1); }
.lead-lightbox input {
  width: 100%;
  font-family: var(--font-text); font-size: 1rem;
  color: var(--text-strong); background: var(--surface-page);
  border: 1.5px solid var(--hairline); border-radius: var(--chat-field-radius);
  padding: var(--space-3) var(--space-4);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.lead-lightbox input::placeholder { color: var(--text-muted); }
.lead-lightbox input:hover { border-color: var(--text-muted); }
.lead-lightbox input:focus {
  outline: none; border-color: var(--text-strong);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--chat-focus) 40%, transparent);
}
.lead-lightbox input[aria-invalid="true"] {
  border-color: var(--accent-energy);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-energy) 22%, transparent);
}
.lead-lightbox-actions {
  display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  margin-top: var(--space-1);
}


/* =====================================================================
   9 · THANK-YOU  (replaces form contents after a successful submit)
   ===================================================================== */
.bjl-thanks { display: flex; align-items: flex-start; gap: var(--space-3); }
.bjl-thanks .bjl-thanks-check {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent-grow); color: var(--pm-cloud);
  display: grid; place-items: center; font-weight: var(--fw-bold);
}
.bjl-thanks p { margin: 0; }
.bjl-thanks strong { color: var(--text-strong); }


/* =====================================================================
   10 · FOOTER NOTE  (tiny persistent credit at the base of the frame)
   ===================================================================== */
.footer-note {
  flex: 0 0 auto;
  padding: var(--space-2) var(--chat-pad) var(--space-3);
  font-size: 0.75rem; letter-spacing: 0.02em; text-align: center;
  color: var(--text-faint); background: var(--surface-page);
}
.footer-note strong { color: var(--text-muted); font-weight: var(--fw-semibold); }


/* =====================================================================
   11 · RESPONSIVE  (@container — queries the FRAME's own width)
   Targets: 360 (narrow mobile col) · 480 (phone) · 640 (tablet) · 720 (desktop)
   Base rules above are tuned for ~420–560px. We tighten below 412px and
   relax above 600px.
   ===================================================================== */

/* --- ≤ 412px : narrow mobile column (covers 360) ------------------- */
@container (max-width: 412px) {
  .chat-frame { --chat-pad: var(--space-4); font-size: 1rem; }   /* 16px body */
  .chat-header { padding: var(--space-3) var(--space-4); }
  .chat-header .bjl-wordmark { height: 13px; }
  .chat-header .bjl-title { font-size: 0.9375rem; }
  .chat-header .bjl-status { font-size: 0.6875rem; }
  .msg { max-width: 92%; font-size: 1rem;
         padding: var(--space-3) var(--space-4); }
  .msg-bot { padding-left: calc(var(--space-4) - var(--chat-bot-rail)); }
  #compose { padding: var(--space-3) var(--space-4); gap: var(--space-2); }
  #send-btn { padding: var(--space-3) var(--space-4); }
  /* lightbox: shrink the backdrop padding so the modal isn't trapped */
  .lead-lightbox-backdrop { padding: var(--space-4); }
  .lead-lightbox { padding: var(--space-5); }
  .lead-lightbox h3 { font-size: 1.375rem; }
}

/* --- 413–599px : typical phone (480). Base rules apply as-is. ------ */

/* --- ≥ 600px : tablet / desktop slots (640, 720) ------------------- */
@container (min-width: 600px) {
  .chat-frame { --chat-pad: var(--space-6); font-size: 1.125rem; }  /* 18px body */
  .chat-header { padding: var(--space-4) var(--space-6); }
  .chat-header .bjl-wordmark { height: 16px; }
  .msg { max-width: 80%; font-size: 1.125rem; line-height: 1.62; }
  .msg-bot { max-width: 90%; }       /* answers stay readable, not full-bleed */
  .lead-lightbox { max-width: 440px; padding: var(--space-7); }
  .lead-lightbox h3 { font-size: 1.75rem; }
  .lead-lightbox-backdrop { padding: var(--space-7); }
}

/* --- ≥ 700px : widest desktop slot (720) --------------------------- */
@container (min-width: 700px) {
  .msg-user, .msg-bot { max-width: 78%; }   /* generous gutters at full width */
  .lead-lightbox { max-width: 460px; }
}


/* =====================================================================
   12 · MOTION  — quick, lively, restrained. No bounce, no infinite loops
   on content. All entrances degrade to instant under reduced-motion.
   ===================================================================== */
@keyframes bjl-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes bjl-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bjl-pop  { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes bjl-pulse {
  0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
  30%           { opacity: 1;    transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .msg, .lead-lightbox-backdrop.is-open, .lead-lightbox { animation: none; }
  .msg-loading .dot { animation: none; opacity: 0.6; }
  #chat-log { scroll-behavior: auto; }
}


/* =====================================================================
   v7.6 · DATA DISCLAIMER
   Shown only on first load (inside the .is-empty state). Brick accent so
   it reads as a constraint rather than a featured chip. The "send a
   research request" link routes to the lightbox lead-capture form.
   ===================================================================== */

/* v8.1: disclaimer rewritten as a quiet footnote BELOW the question bar.
   The previous brick palette + bullet list read as a stop sign; now it's
   a single muted line that gets out of the way. Joy-yellow underline on
   the link keeps brand color present without shouting. */
.bjl-disclaimer {
  margin: 0 var(--chat-pad) var(--space-3);
  padding: var(--space-3) 0 0;
  color: var(--text-muted);
  font-size: 0.8125rem;     /* ~13px */
  line-height: 1.45;
  text-wrap: pretty;
  border-top: 1px solid var(--border-subtle);
}
.bjl-disclaimer .bjl-disclaimer-cta {
  margin: 0;
  color: var(--text-muted);
}
.bjl-disclaimer a {
  color: var(--text-body);
  text-decoration: underline;
  text-decoration-color: var(--pm-joy);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  font-weight: var(--fw-medium);
}
.bjl-disclaimer a:hover {
  color: var(--text-strong);
  text-decoration-color: var(--pm-joy-dark);
}
.bjl-disclaimer a:focus-visible {
  outline: none; border-radius: 3px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--chat-focus) 40%, transparent);
}

/* Only show in the first-load empty state, same as #sample-questions */
.chat-frame:not(.is-empty) .bjl-disclaimer { display: none; }

/* Narrow-viewport refinement: tighter spacing on phone-width embeds */
@container (max-width: 412px) {
  .bjl-disclaimer {
    margin: 0 var(--space-4) var(--space-3);
    font-size: 0.75rem;
  }
}


/* =====================================================================
   v7.7 · LEAD-FORM QUESTION FIELD (Surface A + Surface B)
   New "Your question" textarea above the name/email fields. On the
   inline form it's pre-filled with the visitor's last question; on the
   lightbox it's pre-filled when triggered by the 7-query threshold and
   empty when triggered by the disclaimer "send a research request"
   link.
   ===================================================================== */

.lead-form-label {
  display: block;
  margin: 0 0 var(--space-1);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.lead-question-input {
  display: block;
  width: 100%;
  resize: vertical;
  min-height: 64px;
  max-height: 200px;
  font-family: var(--font-text);
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--text-strong);
  background: var(--surface-page);
  border: 1.5px solid var(--hairline);
  border-radius: var(--chat-field-radius);
  padding: var(--space-3) var(--space-4);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.lead-question-input::placeholder { color: var(--text-muted); }
.lead-question-input:hover { border-color: var(--text-muted); }
.lead-question-input:focus {
  outline: none; border-color: var(--text-strong);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--chat-focus) 40%, transparent);
}
.lead-question-input[aria-invalid="true"] {
  border-color: var(--accent-energy);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-energy) 22%, transparent);
}

/* Surface B (lightbox) gets slightly larger type for the modal context */
.lead-lightbox .lead-question-input {
  font-size: 1rem;
  min-height: 72px;
}


/* =====================================================================
   13 · STANDALONE LANDING WRAPPER  (v9.7)
   Dormant by default — the Webflow-embedded iframe never sees these
   rules take effect. A tiny inline script in public-chat.html adds
   html.bjl-standalone ONLY when window.self === window.top (i.e. the
   URL is opened directly, not inside an iframe). In the embed, the
   wrapper elements collapse to display:contents and the chat-frame
   fills the iframe exactly as before — the embedded view is unchanged.
   ===================================================================== */

/* --- EMBED DEFAULT: wrapper is transparent, head/foot hidden -------- */
.bjl-landing,
.bjl-landing-inner { display: contents; }
.bjl-landing-head,
.bjl-landing-foot { display: none; }

/* --- STANDALONE: a centered card on a signature Fern-light page ---- */
html.bjl-standalone,
html.bjl-standalone body { height: auto; min-height: 100%; }
html.bjl-standalone body {
  margin: 0;
  background: var(--pm-fern-light);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: clamp(28px, 5vh, 64px) clamp(16px, 4vw, 40px);
  font-family: var(--font-text);
  -webkit-font-smoothing: antialiased;
}
html.bjl-standalone ::selection { background: var(--pm-joy); color: var(--pm-iron); }

html.bjl-standalone .bjl-landing,
html.bjl-standalone .bjl-landing-inner { display: flex; }
html.bjl-standalone .bjl-landing-inner {
  flex-direction: column;
  width: 100%; max-width: 560px;
  gap: clamp(20px, 3.4vh, 32px);
}

/* page-level head — separate from, and above, the in-card chat header */
html.bjl-standalone .bjl-landing-head { display: block; text-align: left; }
html.bjl-standalone .bjl-landing-wordmark {
  height: 18px; width: auto; display: block; margin: 0 0 22px;
}
html.bjl-standalone .bjl-landing-title {
  margin: 0; color: var(--pm-iron);
  font-family: var(--font-sans); font-weight: var(--fw-bold);
  font-size: clamp(1.75rem, 5.2vw, 2.5rem); line-height: 1.03;
  letter-spacing: -0.015em; text-wrap: balance;
}
html.bjl-standalone .bjl-landing-title .joy { color: inherit; }
html.bjl-standalone .bjl-landing-sub {
  margin: 14px 0 0; max-width: 48ch;
  color: var(--pm-grey-3);
  font-size: clamp(1rem, 2.4vw, 1.0625rem); line-height: 1.55; text-wrap: pretty;
}

/* the chat frame becomes a floating card */
html.bjl-standalone .chat-frame {
  flex: 0 0 auto; width: 100%;
  max-width: 560px;                                /* override the 720 cap for the standalone card */
  height: min(660px, calc(100dvh - 250px));
  min-height: 440px;
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(30,38,32,0.18), 0 2px 6px rgba(30,38,32,0.08);
  overflow: hidden;
}

/* page-level credit beneath the card */
html.bjl-standalone .bjl-landing-foot {
  display: block; margin: 0; text-align: center;
  font-size: 0.8125rem; letter-spacing: 0.02em;
  color: var(--text-muted);
}
html.bjl-standalone .bjl-landing-foot a {
  color: inherit; text-decoration: underline; text-underline-offset: 3px;
}
html.bjl-standalone .bjl-landing-foot a:hover { color: var(--text-strong); }

/* tighten the page head on short standalone viewports */
@media (max-height: 720px) {
  html.bjl-standalone .bjl-landing-sub { display: none; }
}