/* Web symptom check (/symptom-check/). The app's check screen on the web:
   same dark gradient, chat bubbles, chips and input bar
   (mobile HealthReportChat, chat/item, SuggestedReplies, ChatInputBar),
   in the landing page's Poppins type and breakpoints. Colors and type come
   from the tokens in landing-v3.css; only chat sizes the app sets (bubble
   radius, avatar, input bar) are added here, named after the app. */

:root {
  /* The app's chat sizes (mobile chat/item.tsx, ChatInputBar.tsx) */
  --chat-bubble-radius: var(--radius-16);
  --radius-pill-24: 24px; /* the drawer's pills */
  --chat-avatar: 32px;
  --chat-input-radius: 32px;
  --chat-send: 32px;
  --chat-width: 600px; /* the thread and input's widest (Figma's chat column) */
  /* The window on wider screens */
  --frame-margin: var(--space-24); /* space above the first message, below the header */
  --chat-gutter: var(--space-24); /* app spacing.l */

  /* The page header: 12 + logo 33 + 4 + title 31 + 12 (Figma 1:219) */
  --chrome-height: 92px;
  --placeholder-light: #cbcbca; /* Figma Actions/Primary/Disabled */
  /* Header bar: Background/Medium at 80% */
  --chrome-bg: rgba(56, 56, 53, 0.8);
  --progress-height: 8px; /* the app's PROGRESS_BAR_HEIGHT */
  /* Behind the picker sheet (the app's background.scrim) */
  --sheet-scrim: rgba(0, 0, 0, 0.6);
}

@media (min-width: 767px) {
  :root {
    --chat-gutter: var(--page-gutter);
  }
}

/* App chat text: 15/21 (typography.chat). Not a Figma web style yet. */
.type-chat {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 21px;
  letter-spacing: 0.01em;
}

/* The first beat's line (the app's intro lead: Poppins Light 24/31) */
.type-hello {
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 300;
  line-height: 31px;
  letter-spacing: 0.005em;
}

/* The app's subheadings (mobile typography subheading s1 / s2: Medium,
   3% tracking), used by the picker like the app's symptom drawer. New on
   the web; candidates for Figma text styles. */
.type-subheading-1,
.type-subheading-2 {
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0.03em;
}

.type-subheading-1 {
  font-size: 20px;
  line-height: 25px;
}

.type-subheading-2 {
  font-size: 18px;
  line-height: 24px;
}

/* Page header's title (Figma: Poppins Regular 18/31, 0.5%). Not a Figma
   text style yet. */
.type-chrome-title {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 400;
  line-height: 31px;
  letter-spacing: 0.005em;
}

/* Picker pills: 14/20 (the app's pills are 12/18 caption; one step up on
   the web, like the landing page's body text) */
.type-pill {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.01em;
}

/* ── PAGE ── */
/* Figma: Background/Darkest at the top into Background/Dark by the middle,
   across the whole page */
.sc {
  background: linear-gradient(var(--background-darkest) 0%, var(--background-dark) 51%) fixed;
  background-color: var(--background-dark);
  color: var(--text-soft);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


.sc-chrome[hidden],
.sc-frame[hidden],
.sc-landing[hidden],
.sc-results[hidden] {
  display: none;
}

/* ── OPENING PAGE ── (Figma 1:1592) */
/* Headline: Poppins Light 28/35, 0.5% (24/31 on phones). Not a Figma text
   style yet. */
.type-landing-title {
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 300;
  line-height: 31px;
  letter-spacing: 0.005em;
}

@media (min-width: 767px) {
  .type-landing-title {
    font-size: 28px;
    line-height: 35px;
  }
}

.sc-landing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px; /* Figma's gap between the page's parts */
  width: 100%;
  max-width: calc(840px + 2 * var(--chat-gutter));
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  padding: var(--space-48) var(--chat-gutter);
  text-align: center;
}

@media (min-width: 767px) {
  .sc-landing {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

.sc-landing.is-leaving {
  animation: sc-fade-out 0.3s ease both;
}

.sc-landing-logo {
  display: block;
}

/* The headline and the line under it, 12 apart (Figma Header Body) */
.sc-landing-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding-top: var(--space-24);
}

.sc-landing-title {
  color: var(--text-soft);
}

.sc-landing-sub {
  color: var(--text-light);
}

/* The line break only where the headline has room for two even lines */
.sc-br-wide {
  display: none;
}

@media (min-width: 767px) {
  .sc-br-wide {
    display: inline;
  }
}

/* A <button>: no browser border */
.sc-start {
  border: 0;
  cursor: pointer;
}

.sc-start:focus-visible {
  outline: 2px solid var(--background-mint);
  outline-offset: 3px;
}

/* Phones: Start stays pinned to the bottom of the screen, full width in
   the gutters, clear of the iPhone home indicator. The page fades to its
   background behind it, so the cards scroll under; the page's bottom
   padding keeps the last card clear of it. */
@media (max-width: 766.98px) {
  .sc-landing {
    /* Start's height: .v3-btn-cta's 12 + 22 + 12 */
    --start-height: calc(2 * var(--space-12) + 22px);
    --start-bottom: max(var(--space-16), calc(env(safe-area-inset-bottom) + var(--space-8)));
    padding-bottom: calc(var(--start-height) + var(--start-bottom) + var(--space-24));
  }

  .sc-landing::after {
    content: "";
    position: fixed;
    inset: auto 0 0;
    z-index: 1;
    height: calc(var(--start-height) + var(--start-bottom) + var(--space-24));
    background: linear-gradient(transparent, var(--background-dark) var(--space-24));
    pointer-events: none;
  }

  .sc-start {
    position: fixed;
    left: var(--chat-gutter);
    right: var(--chat-gutter);
    bottom: var(--start-bottom);
    z-index: 2;
  }

  /* (.sc-landing: outranks the base .sc-expect rule further down) */
  .sc-landing .sc-expect {
    padding-bottom: 0;
  }
}

.sc-expect {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
  width: 100%;
  padding: var(--space-32) 0;
}

.sc-expect-title {
  color: var(--text-light);
}

.sc-expect-cards {
  display: grid;
  gap: var(--space-12);
  width: 100%;
  list-style: none;
}

@media (min-width: 767px) {
  .sc-expect-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

.sc-expect-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  padding: var(--space-16);
  border-radius: var(--radius-8);
  background: var(--background-medium);
  color: var(--text-soft);
}

.sc-expect-card img {
  display: block;
}

/* ── HERO ── the graph and the chat sample take turns in one box, the
   graph's size: Figma's 342 x 172 drawn up to 454 wide (its size on the
   page), smaller on phones (the script sets --graph-scale to fit). */
.sc-hero {
  width: 100%;
  display: flex;
  justify-content: center;
}

.sc-hero-stage {
  --graph-scale: 1.3275;
  position: relative;
  width: min(454px, 100%);
  aspect-ratio: 342 / 172;
}

.sc-graph {
  position: absolute;
  top: 0;
  left: 0;
  width: 342px;
  height: 172px;
  transform: scale(var(--graph-scale));
  transform-origin: top left;
  text-align: left;
}

/* The plot: blobs clipped at the baseline (Figma 1:1690) */
.sc-graph-area {
  position: absolute;
  top: 0;
  left: 0;
  width: 342px;
  height: 120px;
  overflow: hidden;
}

.sc-graph-blob {
  position: absolute;
  display: block;
  max-width: none;
}

/* Figma's rotated pieces: each image centered in its rotated box */
.sc-graph-blob.is-left {
  left: 15.997px;
  top: 54.692px;
  rotate: -25.63deg;
}

.sc-graph-blob.is-center {
  left: 73.29px;
  top: 11px;
}

.sc-graph-blob.is-right {
  left: 210.606px;
  top: 67.27px;
  rotate: 18.07deg;
}

/* The baseline: Mint Glow/500, 1px */
.sc-graph-base {
  position: absolute;
  top: 120px;
  left: 0;
  width: 342px;
  height: 1px;
  background: var(--background-mint);
}

/* Each stage marker: a dashed line up from the dot, the dot, its name.
   Positions from Figma, per marker. */
.sc-graph-marker {
  position: absolute;
  inset: 0;
}

.sc-graph-marker.is-reproductive {
  --line-x: 26.75px;
  --line-top: 82px;
  --line-h: 53px;
  --dot-x: 19px;
  --label-x: 0px;
}

.sc-graph-marker.is-peri {
  --line-x: 171px;
  --line-top: 57.5px;
  --line-h: 77.5px;
  --dot-x: 164px;
  --label-x: 171.5px;
}

.sc-graph-marker.is-post {
  --line-x: 301px;
  --line-top: 82px;
  --line-h: 53px;
  --dot-x: 294px;
  --label-x: 301px;
}

/* The line art is horizontal in Figma, turned upright there too */
.sc-graph-line {
  position: absolute;
  left: var(--line-x);
  top: var(--line-top);
  width: 0;
  height: var(--line-h);
  transform-origin: bottom;
}

.sc-graph-line img {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  max-width: none;
  translate: -50% -50%;
  rotate: -90deg;
}

.sc-graph-dot {
  position: absolute;
  top: 139px;
  left: var(--dot-x);
  display: block;
}

.sc-graph-dot.is-inner {
  top: 143px;
  left: calc(var(--dot-x) + 4px);
}

/* Figma: Poppins Light 10/12, Text & Content/Mint */
.sc-graph-label {
  position: absolute;
  top: 160px;
  left: var(--label-x);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 300;
  line-height: 12px;
  letter-spacing: 0.001em;
  color: var(--text-mint);
  white-space: nowrap;
}

.sc-graph-marker:not(.is-reproductive) .sc-graph-label {
  translate: -50% 0;
}

/* Building, piece by piece: the baseline draws left to right, the blobs
   rise up out of it (left, middle, right), then each marker's line grows
   up, its dot pops in and its name fades in, left to right. */
.sc-graph.is-building .sc-graph-base {
  animation: sc-draw-x 0.6s var(--ease-out) both;
  transform-origin: left;
}

.sc-graph.is-building .sc-graph-blob {
  animation: sc-blob-rise 0.9s var(--ease-out) both;
}

.sc-graph.is-building .sc-graph-blob.is-left {
  animation-delay: 0.25s;
}

.sc-graph.is-building .sc-graph-blob.is-center {
  animation-delay: 0.45s;
}

.sc-graph.is-building .sc-graph-blob.is-right {
  animation-delay: 0.65s;
}

.sc-graph.is-building .sc-graph-line {
  animation: sc-draw-y 0.5s var(--ease-out) both;
  animation-delay: calc(1s + var(--marker-step));
}

.sc-graph.is-building .sc-graph-dot {
  animation: sc-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: calc(1.3s + var(--marker-step));
}

.sc-graph.is-building .sc-graph-label {
  animation: sc-label-in 0.4s var(--ease-out) both;
  animation-delay: calc(1.45s + var(--marker-step));
}

.sc-graph-marker.is-reproductive {
  --marker-step: 0s;
}

.sc-graph-marker.is-peri {
  --marker-step: 0.1s;
}

.sc-graph-marker.is-post {
  --marker-step: 0.2s;
}

.sc-graph {
  transition: opacity 0.25s ease;
}

.sc-graph.is-hidden {
  opacity: 0;
}

/* The chat sample (Figma 1:1663): Kyha asks, the reply chips come up, Yes
   is tapped. Sized like the Figma sample (11/16 text, 24 avatars). */
.sc-demo {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-12);
  width: min(356px, 100%);
  margin: 0 auto;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.sc-demo.is-on {
  opacity: 1;
}

.sc-demo-row {
  display: flex;
  align-items: flex-end;
  gap: var(--space-8);
  animation: sc-fade-in 0.3s var(--ease-out) both;
}

.sc-demo-row.is-user {
  justify-content: flex-end;
}

.sc-demo-row > img {
  flex: none;
}

/* Figma: Poppins Regular 11/16, 1% */
.sc-demo-bubble,
.sc-demo-pill {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.sc-demo-bubble {
  padding: var(--space-16);
  border-radius: var(--radius-16);
  background: var(--background-surface-2);
  color: var(--text-dark);
  animation: sc-bubble-in 0.65s var(--ease-out) both;
  transform-origin: bottom left;
}

.sc-demo-row.is-user .sc-demo-bubble {
  padding: var(--space-12) var(--space-16);
  background: var(--background-medium);
  color: var(--text-light);
  transform-origin: bottom right;
}

.sc-demo-pills {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-8);
  animation: sc-rise 0.55s var(--ease-out) both;
}

.sc-demo-pills.is-leaving {
  animation: sc-fade-out 0.25s ease both;
}

.sc-demo-pill {
  padding: var(--space-8) var(--space-16);
  border-radius: var(--radius-16);
  background: var(--background-medium);
  color: var(--text-light);
  transition: transform 0.2s ease, background-color 0.2s ease;
}

/* The tap on Yes */
.sc-demo-pill.is-pressed {
  transform: scale(0.92);
  background: var(--background-brand);
  color: var(--text-soft);
}

/* The typing dots at the sample's size (24 avatar) */
.sc-demo .sc-typing {
  height: 24px;
  margin: 0 var(--space-4);
  scale: 0.75;
  transform-origin: left center;
}

/* ── RESULTS ── (Figma 1:1714) */
/* Figma "Body" (Poppins 14/21, 1%), its button text and the fine print
   (10/21); the sub line is Poppins 16/21. Not Figma web styles yet. */
.type-results-sub,
.type-body-14,
.type-button-14,
.type-fine,
.type-stage-eyebrow {
  font-family: var(--font-body);
  letter-spacing: 0.01em;
}

.type-results-sub {
  font-size: 16px;
  font-weight: 400;
  line-height: 21px;
}

.type-body-14 {
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
}

.type-button-14 {
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
  text-transform: uppercase;
}

.type-fine {
  font-size: 10px;
  font-weight: 400;
  line-height: 21px;
}

/* Figma: Body Large/Bold (14/20) */
.type-stage-eyebrow {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0;
  text-transform: uppercase;
}

.sc-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
  width: 100%;
  max-width: calc(840px + 2 * var(--chat-gutter));
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  padding: var(--space-48) var(--chat-gutter);
  text-align: center;
  animation: sc-fade-in 0.6s var(--ease-out) both;
}

@media (min-width: 767px) {
  .sc-results {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

.sc-results-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding-top: var(--space-8);
}

.sc-results-title {
  color: var(--text-soft);
}

.sc-results-sub {
  max-width: 560px;
  margin: 0 auto;
  color: var(--text-light);
}

/* The graph with its stage names (as on the opening page), with the stage
   card over its top */
.sc-results-graph {
  position: relative;
  width: min(454px, 100%);
  margin-bottom: var(--space-24); /* 40 to the email row */
}

/* A pulse hops between the three stages' dots at random ("which one could
   it be?"): a Mint ring grows out from the dot and fades over 1.8s (the
   canvas's results design). The script picks the dot (.is-pulsing). */
.sc-results-graph .sc-graph-marker.is-pulsing .sc-graph-pulse {
  display: block;
}

.sc-graph-pulse {
  display: none;
  position: absolute;
  top: 139px;
  left: var(--dot-x);
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--background-mint);
  border-radius: 50%;
  animation: sc-pulse 1.8s ease-out both;
  opacity: 0;
}

@keyframes sc-pulse {
  0% {
    transform: scale(1);
    opacity: 0.9;
  }
  70%,
  100% {
    transform: scale(2.6);
    opacity: 0;
  }
}

/* Frosted card: white at 50%, the stage name blurred out (Figma) */
.sc-stage-card {
  position: absolute;
  top: 18%;
  left: 50%;
  translate: -50% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  width: min(299px, calc(100% - 2 * var(--space-16)));
  padding: var(--space-12) var(--space-16);
  border-radius: var(--radius-16);
  background: rgba(255, 255, 255, 0.5);
  box-shadow: var(--shadow-faint);
  animation: sc-rise 0.6s var(--ease-out) 1.6s both;
}

.sc-stage-card-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--text-brand);
}

.sc-stage-card-eyebrow img {
  display: block;
}

.sc-stage-card-name {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 22px;
  color: var(--text-brand);
  white-space: nowrap;
  filter: blur(4px);
  user-select: none;
}

.sc-results-form {
  display: flex;
  gap: var(--space-8);
  width: min(100%, 405px);
}

.sc-results-input {
  flex: 1;
  min-width: 0;
  padding: var(--space-8) var(--space-16);
  border: 0;
  border-radius: var(--radius-8);
  background: var(--background-surface);
  color: var(--text-dark);
  font-size: 16px; /* iOS Safari zooms into smaller inputs */
}

@media (min-width: 767px) {
  .sc-results-input {
    font-size: 14px;
  }
}

.sc-results-input::placeholder {
  color: var(--placeholder-light);
}

.sc-results-send {
  flex: none;
  padding: var(--space-8) var(--space-16);
  border: 0;
  border-radius: var(--radius-8);
  background: var(--background-mint);
  color: var(--text-brand);
  cursor: pointer;
}

.sc-results-input:focus-visible,
.sc-results-send:focus-visible {
  outline: 2px solid var(--background-mint);
  outline-offset: 2px;
}

.sc-results-error {
  color: var(--text-medium-light);
}

/* Phones: the email field and button stacked, full width, 48 tall (an
   easy tap target; the address has room to show); the stage card sits
   above the graph, overlapping just the tops of the blobs */
@media (max-width: 766.98px) {
  .sc-results {
    padding-top: var(--space-32);
  }

  .sc-results-graph {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .sc-stage-card {
    position: relative;
    top: auto;
    left: auto;
    translate: none;
    z-index: 1;
    order: -1;
    margin-bottom: calc(-1 * var(--space-24));
  }

  .sc-results-form {
    flex-direction: column;
    gap: var(--space-12);
    width: 100%;
  }

  .sc-results-input,
  .sc-results-send {
    flex: none; /* the row's flex: 1 would shrink it to its text here */
    height: 48px;
  }
}

.sc-results-error[hidden],
.sc-results-form[hidden],
.sc-results-fine[hidden],
.sc-results-next[hidden] {
  display: none;
}

/* After she sends (Figma 16:458): 16 from the graph to the text, 16 to the
   white button that takes her to the app's store */
.sc-results.is-sent .sc-results-graph {
  margin-bottom: 0;
}

.sc-results-next {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
  max-width: 454px;
}

.sc-results-next-text {
  color: var(--text-light);
}

.sc-results-next-text:focus {
  outline: none; /* focused only so a screen reader reads it (script) */
}

/* The shared CTA pill (.v3-btn .v3-btn-cta) in white */
.sc-results-app {
  background: var(--background-surface);
  color: var(--text-brand);
}

.sc-results-app:focus-visible {
  outline: 2px solid var(--background-mint);
  outline-offset: 2px;
}

/* The chat fading out into "Analyzing your results" */
.sc-chat.is-leaving,
.sc-input.is-leaving,
.sc-chrome.is-leaving,
.sc-header.is-leaving {
  animation: sc-fade-out 0.4s ease both;
}

.sc-results-fine {
  max-width: 402px;
  color: var(--text-medium-light);
}

.sc-results-fine a {
  color: inherit;
  text-decoration: underline;
}

/* ── PAGE HEADER ── (Figma 1:219) */
.sc-chrome {
  position: fixed;
  inset: 0 0 auto;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  height: var(--chrome-height);
  padding: var(--space-12) var(--chat-gutter);
  background: var(--chrome-bg);
}

.sc-chrome img {
  display: block;
}

.sc-chrome-title {
  color: var(--text-soft);
}

/* The frame holds the thread (which scrolls) and the input bar, on the
   page's gradient (no background of its own). It runs the full height of
   the window, so messages scroll up under the translucent page header
   rather than being cut off below it; the thread and input stay in a
   centered column (--frame-width) on wider screens. */
.sc-frame {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.sc p {
  margin-bottom: 0;
}

/* ── PROGRESS BAR ── fixed just under the page header, edge to edge
   (outside the chat's column) */
.sc-header {
  position: fixed;
  inset: var(--chrome-height) 0 auto;
  z-index: 3;
  height: var(--progress-height);
  animation: sc-fade-in 0.6s var(--ease-out) both;
}

.sc-header[hidden] {
  display: none;
}

/* Sand, rounded at its leading end, easing to each new width (900ms,
   like the app) */
.sc-progress {
  position: absolute;
  inset: 0;
}

.sc-progress-fill {
  width: 0;
  height: 100%;
  border-radius: 0 40px 30px 0;
  background: var(--text-soft);
  transition: width 0.9s cubic-bezier(0.33, 1, 0.68, 1);
}

/* ── FIRST BEAT ── */
.sc-hello {
  flex: 1;
  padding-top: calc(var(--chrome-height) + var(--progress-height));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 var(--chat-gutter);
}

.sc-hello[hidden] {
  display: none;
}

/* The blob at the app's size (138 x 143, 90% opacity), 16 above the line */
.sc-hello-blob {
  width: 138px;
  height: 143px;
  margin-bottom: var(--space-16);
  opacity: 0.9;
  animation: sc-fade-in 0.5s var(--ease-out) both;
}

.sc-hello.is-leaving .sc-hello-blob {
  animation: sc-fade-out 0.3s ease both;
}

.sc-hello-text {
  max-width: 320px;
  text-align: center;
  color: var(--text-soft);
  animation: sc-fade-in 0.5s var(--ease-out) both;
}

.sc-hello.is-leaving .sc-hello-text {
  animation: sc-fade-out 0.3s ease both;
}

/* ── THREAD ── */
/* The thread scrolls inside the frame; clear of the header above */
.sc-chat {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  /* Starts below the header and progress bar; scrolls up under them */
  padding: calc(var(--chrome-height) + var(--progress-height) + var(--frame-margin)) var(--chat-gutter) var(--space-12);
}

@media (min-width: 767px) {
  .sc-chat {
    --frame-margin: var(--space-48); /* Figma: 48 below the header */
  }
}

.sc-chat[hidden] {
  display: none;
}

/* Anchored to the bottom, by the input bar (Figma 1:334, like the app's
   chat): a short thread sits low and grows upward */
.sc-thread {
  width: 100%;
  max-width: var(--chat-width);
  margin: auto auto 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}

/* Every item carries 12 above and below, so items sit 24 apart (the app) */
.sc-row {
  display: flex;
  align-items: flex-end;
  gap: var(--space-8);
  margin: var(--space-12) 0;
  animation: sc-fade-in 0.3s var(--ease-out) both;
}

/* Each message eases up and in from its avatar's side (Kyha's from the
   bottom left, hers from the bottom right) */
.sc-row .sc-bubble {
  animation: sc-bubble-in 0.5s var(--ease-out) both;
  transform-origin: bottom left;
}

.sc-row.is-user .sc-bubble {
  transform-origin: bottom right;
}

.sc-row.is-user {
  justify-content: flex-end;
}

.sc-avatar {
  width: var(--chat-avatar);
  height: var(--chat-avatar);
  flex: none;
}

.sc-bubble {
  max-width: 85%;
  padding: var(--space-12);
  border-radius: var(--chat-bubble-radius);
  overflow-wrap: anywhere;
}

/* The row's avatar takes 40 of the width; the bubble keeps 85% of the rest */
.sc-row .sc-bubble {
  max-width: min(85%, calc(100% - var(--chat-avatar) - var(--space-8)));
}

.sc-row.is-kyha .sc-bubble {
  background: var(--background-surface-2);
  color: var(--text-dark);
}

.sc-row.is-user .sc-bubble {
  background: var(--background-medium);
  color: var(--text-light);
}

.sc-bubble p + p {
  margin-top: var(--space-4);
}

.sc-bubble strong {
  font-weight: 600;
}

/* Typing dots: the app's chat-typing Lottie at the app's size (46 x 48),
   in an avatar-high box with 12 either side; the dots rest on the avatar's
   center and the bounce overflows above (mobile chat/item.tsx). */
.sc-typing {
  position: relative;
  width: 46px;
  height: var(--chat-avatar);
  margin: 0 var(--space-12);
}

.sc-typing-anim {
  position: absolute;
  top: calc(-1 * var(--space-16));
  left: 0;
  width: 46px;
  height: 48px;
}

/* Fallback when the player can't load: three CSS dots that bounce */
.sc-typing.is-css {
  display: flex;
  align-items: center;
  gap: 5px;
}

.sc-typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-medium-light);
  animation: sc-dot 1.1s ease-in-out infinite;
}

.sc-typing span:nth-child(2) {
  animation-delay: 0.15s;
}

.sc-typing span:nth-child(3) {
  animation-delay: 0.3s;
}

/* ── CHIPS ── (SuggestedReplies: right-aligned, 24 below the message) */
.sc-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-12);
  margin: var(--space-12) 0;
  padding-top: var(--space-12);
  animation: sc-fade-in 0.4s var(--ease-out) both;
}

.sc-chip {
  padding: var(--space-8) var(--space-16);
  border: 0;
  border-radius: var(--radius-16);
  background: var(--background-medium);
  color: var(--text-light);
  cursor: pointer;
  transition: opacity 0.2s, background-color 0.2s;
}

.sc-chip:hover {
  opacity: 0.9;
}

/* The CTA reply: Mint pill (Actions/Tertiary), Evernight text */
.sc-chip.is-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  border-radius: 60px;
  background: var(--actions-tertiary-normal);
  color: var(--text-brand);
  font-size: 14px;
  line-height: 20px;
}

.sc-chip:focus-visible,
.sc-send:focus-visible,
.sc-sheet button:focus-visible {
  outline: 2px solid var(--background-mint);
  outline-offset: 2px;
}

/* Done marker under her answer (the app's "✓ Confirmed") */
.sc-marker {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-8);
  margin: 0 0 var(--space-12);
  color: var(--text-medium-light);
}

/* ── INPUT BAR ── (ChatInputBar: white pill, send button on the right) */
/* At the frame's bottom, under the thread */
.sc-input {
  flex: none;
  padding: var(--space-12) var(--chat-gutter);
  padding-bottom: max(var(--space-16), calc(env(safe-area-inset-bottom) + var(--space-8)));
}

@media (min-width: 767px) {
  .sc-input {
    padding-bottom: var(--space-48); /* Figma: 48 below the input */
  }
}

.sc-input[hidden] {
  display: none;
}

.sc-input-pill,
.sc-input-error {
  display: flex;
  width: 100%;
  max-width: var(--chat-width);
  margin: 0 auto;
}

.sc-input-pill {
  align-items: center;
  padding: var(--space-8) var(--space-8) var(--space-8) 20px;
  border-radius: var(--chat-input-radius);
  background: var(--background-secondary);
}

.sc-input-field {
  flex: 1;
  min-width: 0;
  height: var(--chat-send);
  border: 0;
  background: none;
  font-family: var(--font-body);
  /* 16px: iOS Safari zooms into any input smaller than that */
  font-size: 16px;
  line-height: 22px;
  color: var(--text-dark);
  outline: none;
}

.sc-input-field::placeholder {
  color: var(--text-medium);
}

.sc-input-field:disabled {
  background: none;
}

.sc-send {
  display: grid;
  place-items: center;
  width: var(--chat-send);
  height: var(--chat-send);
  margin-left: var(--space-8);
  flex: none;
  border: 0;
  border-radius: 50%;
  background: var(--background-brand);
  color: var(--text-soft);
  cursor: pointer;
}

.sc-send:disabled {
  background: var(--background-surface-2);
  color: var(--text-light);
  cursor: default;
}

.sc-input-error {
  gap: var(--space-8);
  padding: var(--space-8) 20px 0;
  color: var(--text-medium-light);
}

.sc-input-error[hidden] {
  display: none;
}

/* ── PICKER SHEET ── (the app's Browse symptoms drawer) */
.sc-sheet {
  /* Phones: a bottom sheet, 90% of the screen */
  width: 100%;
  max-width: none;
  height: 90vh;
  height: 90dvh;
  max-height: none;
  margin: auto 0 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-16) var(--radius-16) 0 0;
  /* The app's drawer: white, with a Background/Light card per category */
  background: var(--background-secondary);
  color: var(--text-dark);
}

.sc-sheet[open] {
  animation: sc-sheet-up 0.35s var(--ease-out) both;
}

.sc-sheet::backdrop {
  background: var(--sheet-scrim);
}

@media (min-width: 767px) {
  /* Wider screens: a centered panel */
  .sc-sheet {
    width: min(560px, calc(100% - 2 * var(--page-gutter)));
    height: min(720px, 85vh);
    margin: auto;
    border-radius: var(--radius-16);
  }

  .sc-sheet[open] {
    animation-name: sc-rise;
  }
}

.sc-sheet-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.sc-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-24) var(--space-24) var(--space-4);
}

.sc-sheet-close {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-right: calc(-1 * var(--space-8));
  border: 0;
  background: none;
  color: var(--text-dark);
  cursor: pointer;
}

.sc-sheet-sub {
  padding: 0 var(--space-24) var(--space-16);
  color: var(--text-medium);
}

.sc-sheet-groups {
  flex: 1;
  overflow-y: auto;
  padding: 0 var(--space-24) var(--space-24);
  overscroll-behavior: contain;
}

/* Search (long lists): the drawer's search field */
.sc-sheet-search {
  padding: 0 var(--space-24) var(--space-16);
}

.sc-sheet-search[hidden] {
  display: none;
}

.sc-sheet-search-input {
  width: 100%;
  padding: var(--space-12) var(--space-16);
  border: 0;
  border-radius: 24px;
  background: var(--background-surface-2);
  color: var(--text-dark);
  font-size: 16px; /* iOS Safari zooms into smaller inputs */
}

/* The browser's clear X, in the field's grey rather than blue */
.sc-sheet-search-input::-webkit-search-cancel-button {
  filter: grayscale(1);
  opacity: 0.6;
}

.sc-sheet-search-input::placeholder {
  color: var(--text-medium);
}

.sc-sheet-search-input:focus-visible {
  outline: 2px solid var(--background-brand);
  outline-offset: 2px;
}

.sc-sheet-empty {
  padding: var(--space-24);
  color: var(--text-medium);
  text-align: center;
}

.sc-sheet-empty[hidden],
.sc-group[hidden],
.sc-pick[hidden] {
  display: none;
}

/* One card per category (the drawer's): Background/Light, 16 radius */
.sc-group {
  padding: var(--space-16);
  border-radius: var(--radius-16);
  background: var(--background-light);
}

.sc-group + .sc-group {
  margin-top: var(--space-16);
}

/* Category icon (16, brand) then its name */
.sc-group-title {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin-bottom: var(--space-16);
  color: var(--text-dark);
}

.sc-group-title svg {
  flex: none;
  color: var(--text-brand);
}

.sc-group-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

/* The drawer's TogglePill: white with dark text; picked = Evernight with
   Sand text, easing over 200ms */
.sc-pick {
  padding: var(--space-8) var(--space-16);
  border: 0;
  border-radius: var(--radius-pill-24);
  background: var(--background-secondary);
  color: var(--text-dark);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.sc-pick[aria-pressed="true"] {
  background: var(--background-brand);
  color: var(--text-soft);
}

.sc-sheet-foot {
  padding: var(--space-16) var(--space-24);
  padding-bottom: max(var(--space-16), calc(env(safe-area-inset-bottom) + var(--space-8)));
  border-top: 1px solid var(--background-primary);
}

.sc-sheet-done {
  width: 100%;
  padding: var(--space-12) var(--space-24);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--actions-primary-normal);
  color: var(--text-soft);
  font-weight: 500;
  cursor: pointer;
}

.sc-sheet-done:disabled {
  background: var(--background-surface-2);
  color: var(--text-medium);
  cursor: default;
}

/* ── DATE SHEET ── short: just the date field and Done */
/* As tall as its content. A modal dialog is pinned to every edge, so the
   top is unpinned instead (phones: it sits on the bottom edge). Not
   height: fit-content: Safari makes that 0 tall, so only the dimmed
   backdrop showed on iPhones. */
.sc-date {
  top: auto;
  height: auto;
  /* A short window (a phone turned sideways): never past the top edge,
     scroll instead */
  max-height: calc(100dvh - 2 * var(--space-16));
  overflow-y: auto;
}

@media (min-width: 767px) {
  /* Centered: halfway down, pulled up by half its own height */
  .sc-date {
    width: min(420px, calc(100% - 2 * var(--page-gutter)));
    top: 50%;
    bottom: auto;
    margin: 0 auto;
    translate: 0 -50%;
  }
}

.sc-date-body {
  padding: var(--space-16) var(--space-24) var(--space-24);
}

.sc-date-field {
  position: relative;
}

/* iPhones give a date box its own minimum width, so width: 100% alone
   let it spill past the sheet's right edge: min-width 0 and no native look
   keep it inside. Room on the right for the calendar icon. */
.sc-date-input {
  display: block;
  width: 100%;
  min-width: 0;
  -webkit-appearance: none;
  appearance: none;
  text-align: left;
  min-height: 52px;
  padding: var(--space-12) 48px var(--space-12) var(--space-16);
  border: 1px solid var(--strokes-medium);
  border-radius: var(--radius-16);
  background: var(--background-light);
  color: var(--text-dark);
  /* 16px: iOS Safari zooms into smaller inputs */
  font-size: 16px;
}

/* iPhones center the picked date; keep it left like everything else */
.sc-date-input::-webkit-date-and-time-value {
  text-align: left;
}

/* Chrome's own calendar button: hidden, ours opens the picker (script) */
.sc-date-input::-webkit-calendar-picker-indicator {
  display: none;
}

.sc-date-icon {
  position: absolute;
  top: 50%;
  right: var(--space-16);
  translate: 0 -50%;
  cursor: pointer;
}

/* Firefox keeps its own calendar button (it can't be hidden): no second
   icon there */
@supports (-moz-appearance: none) {
  .sc-date-icon {
    display: none;
  }
}

.sc-date-hint {
  display: none;
  position: absolute;
  top: 50%;
  left: calc(var(--space-16) + 1px);
  translate: 0 -50%;
  color: var(--text-medium);
  font-family: var(--font-body);
  font-size: 16px; /* the same as a picked date */
  pointer-events: none;
}

.sc-date-range {
  margin-top: var(--space-8);
  color: var(--text-medium);
}

.sc-date-range[hidden] {
  display: none;
}

/* iPhones and iPads only (Chrome already shows mm/dd/yyyy when empty) */
@supports (-webkit-touch-callout: none) {
  .sc-date-field:not(.has-value) .sc-date-hint {
    display: block;
  }
}

.sc-date-input:focus-visible {
  outline: 2px solid var(--background-brand);
  outline-offset: 2px;
}

/* ── MOTION ── */
@keyframes sc-fade-in {
  from { opacity: 0; }
}

@keyframes sc-fade-out {
  to { opacity: 0; }
}

/* Eases up from below into the chat (the app's FadeInDown) */
@keyframes sc-rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

@keyframes sc-bubble-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.96);
  }
}

@keyframes sc-draw-x {
  from { transform: scaleX(0); }
}

@keyframes sc-draw-y {
  from { transform: scaleY(0); }
}

@keyframes sc-blob-rise {
  from {
    opacity: 0;
    translate: 0 48px;
  }
}

@keyframes sc-pop {
  from {
    opacity: 0;
    transform: scale(0);
  }
}

@keyframes sc-label-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}

@keyframes sc-sheet-up {
  from { transform: translateY(100%); }
}

@keyframes sc-dot {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-5px); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}