/* ============================================================
   Helen — the chat hero
   Designed to be obvious: one big box, tap a question, get an
   answer. No settings, no modes, no jargon.
   ============================================================ */

/* ---------- one chat panel ----------
   A single conversation window like Claude or ChatGPT: the message thread
   scrolls in the body, the input is docked at the bottom, and it is all inside
   one bordered card rather than a separate ask box and a separate answers box. */
.helen {
  --m-radius: 24px;
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 900px;
  margin-inline: auto;
  /* Idle, the panel sizes to its content (welcome + chips + input) so there is
     no big empty box on the hero. It only grows into a tall scrolling panel
     once a conversation starts (the is-chatting rule below). */
  height: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--m-radius);
  box-shadow: 0 44px 96px -46px rgba(10, 17, 36, .72);
  overflow: hidden;
  text-align: left;
}
/* Once a conversation is live the chat IS the page: the hero headline collapses
   (below) and the panel grows to take the room, so answers and diagrams stop
   feeling cramped. */
.hero.is-chatting .eyebrow,
.hero.is-chatting .lead,
.hero.is-chatting .hero__meta { display: none; }
.hero.is-chatting .hero__title {
  font-size: clamp(1.4rem, 1.05rem + 1.3vw, 2rem) !important;
  margin-bottom: var(--sp-2);
}
.hero.is-chatting .helen { height: clamp(600px, 88vh, 1000px); }
/* Give the welcome a little breathing room, but nothing like the old empty box. */
.hero:not(.is-chatting) .helen__thread { min-height: 240px; }

/* ---------- conversation (the scrolling body) ---------- */
.helen__thread {
  flex: 1 1 auto;
  min-height: 0;                 /* let it shrink so overflow scrolls, not grows */
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  overflow-y: auto;
  padding: var(--sp-6);
  scroll-behavior: smooth;
}

/* Empty state, shown until the first message. */
.helen__welcome {
  margin: auto;
  text-align: center;
  color: var(--fg-muted);
  max-width: 42ch;
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.helen__welcome strong { color: var(--fg); font-family: var(--font-display); font-size: var(--fs-lg); }

.m-msg { display: grid; gap: 7px; max-width: 92%; }
.m-msg--you { justify-self: end; text-align: right; max-width: 78%; }
.m-msg--helen { justify-self: start; }
/* Keep prose at a readable measure even in a wide panel; the diagram below is
   free to use the full bubble width. */
.m-msg__body > p, .m-msg__body li { max-width: 64ch; }
.m-msg__who {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg-subtle);
}
.m-msg__body {
  padding: var(--sp-4) var(--sp-5);
  border-radius: 18px;
  font-size: var(--fs-base);
  line-height: 1.62;
  color: var(--ink);
}
.m-msg--helen .m-msg__body { background: var(--bg-sunken); border-bottom-left-radius: 6px; }
.m-msg--you .m-msg__body { background: var(--brand-blue); color: #fff; border-bottom-right-radius: 6px; }

/* ---------- suggestion chips (above the input, on the panel) ---------- */
.helen__chips {
  display: flex; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4) 0;
  overflow-x: auto;
  scrollbar-width: none;
  flex: none;
  cursor: grab;
}
.helen__chips::-webkit-scrollbar { display: none; }
.helen__chips.is-dragging { cursor: grabbing; user-select: none; }
.helen__chips.is-dragging .helen__chip { pointer-events: none; }
.helen__chips.is-hidden { display: none; }
.helen__chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 0 var(--sp-3);
  white-space: nowrap;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--bg-sunken);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.helen__chip:hover { background: var(--surface); border-color: var(--fg-subtle); transform: translateY(-1px); }
.helen__chip::before { content: "✨"; font-size: 13px; }

/* ---------- the ask box, docked at the bottom of the panel ---------- */
.helen__ask {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: var(--sp-3) var(--sp-4) var(--sp-4);
  padding: 6px 6px 6px var(--sp-4);
  min-height: 60px;
  border-radius: 16px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.helen__ask:focus-within {
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-blue) 18%, transparent);
}
.helen__ask input {
  flex: 1; min-width: 0; border: 0; background: none;
  font-family: var(--font-body);
  font-size: clamp(1rem, .95rem + .3vw, 1.1rem);
  color: var(--ink);
}
.helen__ask input::placeholder { color: var(--fg-subtle); }
.helen__ask input:focus { outline: none; }

.helen__send {
  flex: none;
  width: 48px; height: 48px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: var(--brand-blue);
  color: #fff;
  transition: transform var(--dur-fast) var(--ease), background var(--dur) var(--ease);
}
.helen__send:hover { background: var(--brand-indigo); transform: scale(1.04); }
.helen__send:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.helen__send svg { width: 22px; height: 22px; }

/* message body detail (colours/layout defined once, above) */
.m-msg__body p { color: inherit; margin: 0 0 .7em; }
.m-msg__body p:last-child { margin-bottom: 0; }
.m-msg__body strong { color: inherit; font-weight: 700; }
.m-msg__body ol, .m-msg__body ul { margin: .4em 0 .7em; padding-left: 1.3em; }
.m-msg__body li { margin-bottom: .35em; list-style: revert; }
.m-msg__body a { color: var(--accent-deep); text-decoration: underline; }

/* Tables Helen writes (dose / conversion) rendered as a designed card rather
   than raw pipes: lime header band, zebra rows, tabular figures. */
.m-table-wrap {
  margin: var(--sp-4) 0; max-width: 100%; overflow-x: auto;
  border: 1px solid var(--border-soft); border-radius: 14px;
  background: var(--surface); box-shadow: 0 2px 10px -4px rgba(10, 17, 36, .14);
  -webkit-overflow-scrolling: touch;
}
.m-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.m-table thead th {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 34%, #fff), color-mix(in srgb, var(--accent) 20%, #fff));
  color: var(--accent-ink); font-weight: 800; font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: .05em; white-space: nowrap;
  text-align: left; padding: 11px var(--sp-4);
  border-bottom: 2px solid color-mix(in srgb, var(--accent) 55%, #fff);
}
.m-table tbody td {
  padding: 11px var(--sp-4); color: var(--ink);
  font-variant-numeric: tabular-nums; vertical-align: middle;
}
.m-table tbody tr + tr td { border-top: 1px solid var(--border-soft); }
.m-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.m-table tbody td:first-child { font-weight: 700; color: var(--purple); }
.m-table tbody tr:hover { background: color-mix(in srgb, var(--accent) 13%, transparent); }

.m-diagram { position: relative; margin-top: var(--sp-3); border-radius: 14px; overflow: hidden; border: 1px solid var(--border-soft); background: #fff; }
.m-diagram img { width: 100%; display: block; }
.m-diagram svg { display: block; }

/* ---------- responsive: one scroller, not two ----------
   A fixed-height chat panel with its own scrollbar sits inside a page that also
   scrolls. On a desktop, with a mouse and the panel's edges in view, that reads
   fine. On a small screen it does not: every swipe is a coin toss over which of
   the two moves, and a long answer is read through a letterbox.

   So wherever the panel cannot comfortably be its own window, it stops being
   one. It grows to fit its content, the page becomes the only thing that
   scrolls, and the ask box sticks to the bottom of the viewport so it stays one
   tap away however far down the answer you are.

   The second condition is the same phone turned on its side: 812x375 is wider
   than any phone breakpoint but shorter than the panel's own minimum height, so
   on width alone landscape would keep the nested scroll this rule exists to
   remove. */
@media (max-width: 640px), (max-height: 560px) {
  /* The hero clips its own decoration to its rounded corners with
     overflow:hidden, and that makes it a scrollport, which pins any sticky
     descendant to IT rather than to the screen. `clip` cuts the decoration off
     exactly the same way without becoming one, so the ask box below can stick
     to the viewport. A browser too old for `clip` drops the line and simply
     keeps today's non-sticky composer. */
  .hero { overflow: clip; }
  .helen {
    height: auto;
    /* Same reason: a clipping ancestor would make the sticky ask box static. */
    overflow: visible;
  }
  .hero.is-chatting .helen { height: auto; }

  .helen__thread {
    overflow: visible;          /* the page scrolls, not the thread */
    scroll-behavior: auto;
    /* A streaming answer grows by hundreds of pixels. Scroll anchoring would
       read that as content shifting and slide the page down to compensate,
       moving the words out from under the reader mid-sentence. */
    overflow-anchor: none;
  }
  /* Idle, the welcome sits in a compact card rather than a tall empty box. */
  .hero:not(.is-chatting) .helen__thread { min-height: 0; }

  /* Docked composer. Sticks to the bottom of the screen while the panel is in
     view, then settles onto the panel's own bottom edge as you scroll past.

     Only once a conversation is live, though. Idle there is no long answer to
     scroll past, and the panel's foot sits just below the fold, so pinning it
     early only floats the box over the suggestion chips it is meant to sit
     under. It earns its place the moment there is an answer to read. */
  .hero.is-chatting .helen__ask {
    position: sticky;
    bottom: max(var(--sp-3), env(safe-area-inset-bottom));
    z-index: 4;
    box-shadow: 0 10px 28px -12px rgba(10, 17, 36, .45);
  }
}

/* Phone-width typography and spacing. Separate from the rule above so a short
   but wide window keeps its comfortable reading measure. */
@media (max-width: 640px) {
  .helen { border-radius: 18px; box-shadow: 0 22px 54px -34px rgba(10, 17, 36, .6); }
  .helen__thread { padding: var(--sp-4) var(--sp-4) 0; gap: var(--sp-5); }
  .hero:not(.is-chatting) .helen__thread { padding-block: var(--sp-6); }
  .helen__ask { margin: var(--sp-3); min-height: 54px; }
  .helen__send { width: 44px; height: 44px; }

  /* Bubbles run nearly the full width: at 375px a 4% inset each side buys
     nothing but a narrower measure and more wrapped lines. */
  .m-msg { max-width: 100%; }
  .m-msg--you { max-width: 88%; }
  .m-msg__body {
    padding: var(--sp-4);
    border-radius: 16px;
    font-size: 1.0625rem;       /* a touch larger than desktop: read at arm's length */
    line-height: 1.66;
  }
  .m-msg__body > p, .m-msg__body li { max-width: none; }
  .m-msg__body ol, .m-msg__body ul { padding-left: 1.15em; }

  .helen__chips {
    padding: var(--sp-3) var(--sp-3) 0;
    /* Let a chip settle flush to the edge when swiped, so the row never rests
       showing a half-cut button. */
    scroll-snap-type: x proximity;
    scroll-padding-left: var(--sp-3);
  }
  .helen__chip { scroll-snap-align: start; }

  .m-diagram__playdot { width: 62px; height: 62px; }
  .m-diagram__playdot svg { width: 28px; height: 28px; }

  /* Tables Helen writes inherit the site-wide 640px minimum meant for full
     page-width reference tables. Inside a chat bubble that is a sideways
     scrollbar in the middle of an answer, which is the nested scrolling this
     whole file is trying to be rid of. Hers are two or three narrow columns of
     doses, so they fit outright once the minimum is lifted; .m-table-wrap keeps
     its overflow as a backstop for anything unexpectedly wide. */
  .m-table { min-width: 0; font-size: var(--fs-xs); }
  .m-table thead th, .m-table tbody td { padding: 9px var(--sp-2); }
  .m-table thead th { white-space: normal; }
}

/* Play overlay for animated explainers — they never auto-run. The whole frame
   is the button, with a soft scrim so the play mark reads over any diagram. */
.m-diagram__play {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-3);
  background: radial-gradient(120% 120% at 50% 45%, rgba(12, 18, 33, .18), rgba(12, 18, 33, .42));
  cursor: pointer;
  border: 0;
  transition: background var(--dur) var(--ease);
}
.m-diagram__play:hover { background: radial-gradient(120% 120% at 50% 45%, rgba(12, 18, 33, .10), rgba(12, 18, 33, .34)); }
.m-diagram__playdot {
  width: 76px; height: 76px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .94);
  color: var(--brand-blue);
  box-shadow: 0 12px 30px -8px rgba(10, 17, 36, .5);
  transition: transform var(--dur-fast) var(--ease);
}
.m-diagram__play:hover .m-diagram__playdot { transform: scale(1.06); }
.m-diagram__playdot svg { width: 34px; height: 34px; margin-left: 4px; }  /* nudge for optical centre */
.m-diagram__playlabel {
  font-family: var(--font-body); font-weight: 600; font-size: var(--fs-sm);
  color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
  letter-spacing: .01em;
}
@media (prefers-reduced-motion: reduce) {
  /* Still gated behind a click, but no scale bounce. */
  .m-diagram__play:hover .m-diagram__playdot { transform: none; }
}

/* First-use narration generation: the play dot becomes a lime progress ring
   with the live percentage in its centre. --pct (0..100) is set from JS. */
@property --pct { syntax: '<number>'; inherits: true; initial-value: 0; }
.m-diagram__play.is-preparing { cursor: default; transition: --pct .22s linear; }
.m-diagram__play.is-preparing:hover { background: radial-gradient(120% 120% at 50% 45%, rgba(12, 18, 33, .18), rgba(12, 18, 33, .42)); }
.m-diagram__play.is-preparing .m-diagram__playdot {
  background:
    radial-gradient(circle at 50% 50%, #fff 0 56%, transparent 57%),
    conic-gradient(var(--accent) calc(var(--pct, 0) * 1%), rgba(255, 255, 255, .34) 0);
  transform: none;
}
.m-diagram__pct {
  font-family: var(--font-display); font-weight: 800; font-size: 1.1rem;
  color: var(--purple); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
}

/* Pause / resume, bottom-right, only while a walkthrough plays. */
.m-diagram__pause {
  position: absolute; bottom: 12px; right: 12px; z-index: 3;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(12, 18, 33, .62); color: #fff; border: 0;
  cursor: pointer;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  box-shadow: 0 6px 18px -6px rgba(10, 17, 36, .5);
  transition: background var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.m-diagram__pause[hidden] { display: none; }
.m-diagram__pause:hover { background: rgba(12, 18, 33, .82); transform: scale(1.06); }
.m-diagram__pause svg { width: 22px; height: 22px; fill: currentColor; }

/* Guided reveal — while a static diagram is narrated, the region being talked
   about stays lit and the rest dim back. No words, just the eye led around.
   (data-spotlight, not data-reveal: the latter is the site's scroll-in system.) */
.m-diagram svg.is-guided [data-spotlight] { opacity: .2; transition: opacity .5s var(--ease); }
.m-diagram svg.is-guided [data-spotlight].is-lit { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .m-diagram svg.is-guided [data-spotlight] { transition: opacity .2s linear; }
}

.m-sources { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--sp-2); }
.m-sources a {
  font-family: var(--font-mono); font-size: 11px;
  padding: 3px 10px; border-radius: var(--r-pill);
  border: 1px solid var(--border); color: var(--fg-muted);
}
.m-sources a:hover { border-color: var(--accent-deep); color: var(--accent-deep); }

/* typing dots */
.m-typing { display: inline-flex; gap: 5px; padding: var(--sp-4) var(--sp-5); }
.m-typing span {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--olive-400);
  animation: m-bounce 1.3s ease-in-out infinite;
}
.m-typing span:nth-child(2) { animation-delay: .18s; }
.m-typing span:nth-child(3) { animation-delay: .36s; }
@keyframes m-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-6px); opacity: 1; } }

/* ---------- inline cards ---------- */
.m-card {
  border-radius: 16px;
  padding: var(--sp-5);
  background: linear-gradient(140deg, #FDFFF2, #EEF6D2);
  border: 1.5px solid var(--lime-500);
}
.m-card h4 { font-size: var(--fs-lg); margin-bottom: 6px; }
.m-card p { font-size: var(--fs-sm); margin-bottom: var(--sp-3); }
.m-card__row { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

.m-field { display: grid; gap: 5px; margin-bottom: var(--sp-3); }
.m-field label { font-size: var(--fs-sm); font-weight: 600; color: var(--fg); }
.m-field input {
  min-height: 50px; padding: 0 var(--sp-4);
  border-radius: 12px; border: 1.5px solid var(--border);
  background: #fff; font-size: var(--fs-base);
  color: var(--ink); -webkit-text-fill-color: var(--ink);
}
.m-field input::placeholder { color: var(--fg-subtle); -webkit-text-fill-color: var(--fg-subtle); }
.m-field input:focus { outline: none; border-color: var(--accent-deep); box-shadow: 0 0 0 4px rgba(212, 242, 76, .3); }
.m-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
@media (max-width: 520px) { .m-row-2 { grid-template-columns: 1fr; } }

/* segmented body-type control in the gate */
.m-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.m-seg__opt {
  min-height: 48px; padding: 0 var(--sp-3);
  border-radius: 12px; border: 1.5px solid var(--border);
  background: #fff; color: var(--fg);
  font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.m-seg__opt:hover { border-color: var(--fg-subtle); }
.m-seg__opt.is-on {
  border-color: var(--brand-blue);
  background: color-mix(in srgb, var(--brand-blue) 10%, #fff);
  color: var(--brand-indigo);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-blue) 16%, transparent);
}

.m-check { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-sm); color: var(--fg-muted); margin-bottom: var(--sp-3); cursor: pointer; }
.m-check input { width: 22px; height: 22px; flex: none; margin-top: 1px; accent-color: var(--accent-deep); }

.m-note { font-size: var(--fs-xs); color: var(--fg-subtle); margin-top: var(--sp-2); }
.m-error { font-size: var(--fs-sm); color: #B4703A; margin-top: var(--sp-2); }

/* Dosage-protocol intake form, rendered inside Helen's own message bubble. */
.m-intake {
  margin-top: var(--sp-3);
  padding: var(--sp-4);
  border-radius: 14px;
  border: 1.5px solid var(--lime-500);
  background: linear-gradient(140deg, #FDFFF2, #F2F8DE);
}
.m-intake .m-seg { margin-bottom: var(--sp-3); }
.m-intake .btn { margin-top: var(--sp-1); }
.m-field--age { max-width: 150px; }

/* "Hear this from Helen": a spoken version of an answer (waitlist offer). */
.m-vplay {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: var(--sp-3);
  padding: 8px var(--sp-4); min-height: 40px;
  border-radius: var(--r-pill); border: 1.5px solid var(--accent-deep);
  background: color-mix(in srgb, var(--accent) 14%, #fff);
  color: var(--accent-deep); font-family: var(--font-body); font-weight: 700; font-size: var(--fs-sm);
  cursor: pointer; transition: background var(--dur) var(--ease);
}
.m-vplay:hover { background: color-mix(in srgb, var(--accent) 26%, #fff); }
.m-vplay.is-on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.m-vplay__i { font-size: 12px; line-height: 1; }

.helen__foot {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  font-size: var(--fs-sm); color: var(--inv-muted);
}
.helen__foot strong { color: #F4F5EC; }