/* Mira — warm, calm self-help app. Mobile-first, full-bleed on phones, a
   centred device column on desktop. One shared design system so the feel is
   tuned in one place. Atmosphere is baked as soft static radial gradients (no
   live blur filters) and only opacity/transform ever animate. */

:root {
  /* surfaces */
  --page: #efdccd;
  --screen-1: #fefaf7;
  --screen-2: #fbf0e9;
  --screen-3: #f6e0d3;
  --surface: rgba(255, 255, 255, .92);
  --surface-solid: #fbf3ed;
  --field: #fff;
  /* borders */
  --line: #eedcd0;
  --line-soft: #f3e3d8;
  --line-faint: #f6eadf;
  /* text */
  --ink: #221913;
  --ink-2: #3a2e27;
  --ink-3: #6b584b;
  --muted: #8a7568;
  --muted-2: #9a8578;
  --faint: #b7a296;
  /* terracotta accent */
  --accent: #de6b4c;
  --accent-deep: #d9563c;
  --accent-ink: #c2523b;
  --accent-warm: #e9926b;
  --accent-hover: #a03e2b;
  /* dark button */
  --dark-a: #31241d;
  --dark-b: #170f0b;
  --dark-ink: #fff6f0;
  /* green / success */
  --green: #4e9a67;
  --green-deep: #3e8557;
  --green-soft: #eaf4ec;
  --green-line: #cde5d4;
  /* shadows */
  --sh-screen: 0 42px 90px -40px rgba(84, 40, 25, .5);
  --sh-card: 0 18px 40px -26px rgba(120, 60, 40, .45);
  --sh-dark: 0 16px 28px -14px rgba(30, 16, 10, .55);
  --sh-coral: 0 12px 22px -10px rgba(190, 80, 50, .55);
  --sh-soft: 0 8px 18px -12px rgba(120, 60, 40, .35);
  /* motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur: .5s;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--page);
  font-family: Manrope, -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: var(--ink);
  overscroll-behavior: none;
}
body { overflow: hidden; }

a { color: var(--accent-ink); text-decoration: none; }
a:active { color: var(--accent-hover); }

/* ---------- device shell ---------- */
.app {
  position: relative;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  background: linear-gradient(180deg, var(--screen-1) 0%, var(--screen-2) 55%, var(--screen-3) 100%);
}
/* desktop: centre a phone-sized column on a warm backdrop */
@media (min-width: 560px) {
  body {
    display: flex; align-items: center; justify-content: center;
    background:
      radial-gradient(60% 50% at 20% 10%, rgba(238, 152, 116, .28), transparent 70%),
      radial-gradient(55% 45% at 85% 90%, rgba(244, 196, 150, .3), transparent 70%),
      var(--page);
  }
  .app {
    width: 412px; height: min(880px, 94dvh);
    border-radius: 44px;
    box-shadow: var(--sh-screen);
    border: 1px solid rgba(255, 255, 255, .6);
  }
}

/* ---------- baked atmosphere (soft, static, cheap) ---------- */
.atmosphere {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(38% 30% at 12% 8%, rgba(238, 152, 116, .34), transparent 72%),
    radial-gradient(42% 34% at 88% 22%, rgba(224, 118, 92, .26), transparent 72%),
    radial-gradient(46% 38% at 50% 108%, rgba(244, 196, 150, .4), transparent 70%);
  animation: breathe 14s var(--ease) infinite alternate;
  will-change: opacity, transform;
}
@keyframes breathe {
  from { opacity: .82; transform: scale(1); }
  to   { opacity: 1;   transform: scale(1.06); }
}

/* ---------- screen router ---------- */
.screens { position: relative; width: 100%; height: 100%; z-index: 1; }
.screen {
  position: absolute; inset: 0;
  display: none;
  flex-direction: column;
  padding: max(20px, env(safe-area-inset-top)) 0 max(18px, env(safe-area-inset-bottom));
}
/* .active toggles display; the enter/exit motion is driven by Motion One in JS
   (show()). At rest a screen is fully visible, so a failed motion load can never
   hide it. */
.screen.active { display: flex; }

/* generic screen scaffolding */
.pad { padding-left: 28px; padding-right: 28px; }
.grow { flex: 1; min-height: 0; }
.bottom { margin-top: auto; }
.center-col { display: flex; flex-direction: column; align-items: center; text-align: center; }

/* nav row (back + label) */
.nav { display: flex; align-items: center; justify-content: space-between; padding: 6px 22px 0; }
.icon-btn {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: center;
  font: 600 17px Manrope; color: var(--ink); box-shadow: var(--sh-soft);
  cursor: pointer; transition: transform .15s var(--ease), background .2s;
}
.icon-btn:active { transform: scale(.9); }
.step { font: 700 11px Manrope; letter-spacing: .18em; color: var(--muted-2); }

/* ---------- typography ---------- */
.eyebrow { font: 800 11px Manrope; letter-spacing: .26em; color: var(--accent-ink); }
.display { font: 700 28px/1.22 Sora, sans-serif; color: var(--ink); letter-spacing: -.02em; }
.display.lg { font-size: 31px; }
.sub { font: 500 13px/1.55 Manrope; color: var(--muted-2); }
.u { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 5px; }

/* ---------- buttons ---------- */
.btn {
  height: 56px; border-radius: 999px; border: 0;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font: 700 15px Manrope; cursor: pointer; width: 100%;
  transition: transform .16s var(--ease), box-shadow .2s, filter .2s;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.975); }
.btn-dark { background: linear-gradient(135deg, var(--dark-a), var(--dark-b)); color: var(--dark-ink); box-shadow: var(--sh-dark); }
.btn-dark:active { filter: brightness(1.15); }
.btn-ghost { background: var(--surface); border: 1px solid var(--line); color: var(--ink-3); box-shadow: none; height: 52px; }
.btn-text { background: none; border: 0; font: 700 13px Manrope; color: var(--ink-3); cursor: pointer; padding: 12px; width: 100%; }
.hint { text-align: center; font: 500 10px Manrope; color: var(--faint); }

/* ---------- fields ---------- */
.field {
  display: flex; align-items: center; background: var(--field);
  border: 1px solid var(--line); border-radius: 16px; height: 54px; padding: 0 16px;
  font: 500 15px Manrope; color: var(--ink); box-shadow: var(--sh-soft);
  transition: border-color .2s, box-shadow .2s;
}
.field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(222, 107, 76, .12); }
.field input { flex: 1; border: 0; outline: 0; background: none; font: 600 15px Manrope; color: var(--ink); min-width: 0; }
.field input::placeholder { color: var(--faint); font-weight: 500; }
.label { font: 800 10px Manrope; letter-spacing: .2em; color: var(--muted); }

/* ---------- cards ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: 22px; padding: 18px 20px; box-shadow: var(--sh-card);
}
.card-warm { background: linear-gradient(135deg, #fdefe7, #fbe3d6); border-color: #f2cbb8; }

/* pills / chips */
.pill { border-radius: 999px; padding: 7px 12px; font: 700 11px Manrope; display: inline-flex; align-items: center; gap: 6px; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-deep); display: inline-block; }
.dot.g { background: var(--green); }

/* staggered list reveals are driven by Motion One (staggerIn) in JS. */

/* ---------- chat ---------- */
.chat-head {
  display: flex; align-items: center; gap: 10px; padding: 10px 18px 12px;
  border-bottom: 1px solid rgba(240, 223, 213, .8);
  background: rgba(254, 250, 247, .72); backdrop-filter: blur(8px);
  position: relative; z-index: 2;
}
.avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: url("./img/mira.png") center/cover no-repeat, linear-gradient(135deg, #f0b08e, var(--accent-deep));
  display: flex; align-items: center; justify-content: center;
  font: 700 15px Sora, sans-serif; color: transparent; box-shadow: 0 6px 12px -6px rgba(190, 80, 50, .5);
  flex-shrink: 0;
}
.presence { display: flex; align-items: center; gap: 5px; font: 500 11px Manrope; color: #7fa98b; }
.presence .dot { background: #5fa878; }

.thread { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 11px; padding: 16px 18px; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; }
.thread::-webkit-scrollbar { width: 0; }
.daymark { align-self: center; font: 600 10px Manrope; letter-spacing: .14em; color: var(--faint); }
.statuschip { align-self: center; display: flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: 999px; padding: 6px 12px; font: 600 11px Manrope; color: var(--muted); }

.bubble { max-width: 80%; padding: 12px 14px; font: 500 13px/1.55 Manrope; will-change: opacity, transform; }
.bubble.mira { align-self: flex-start; background: rgba(255, 255, 255, .96); border: 1px solid var(--line-soft); border-radius: 18px 18px 18px 6px; color: var(--ink-2); box-shadow: var(--sh-soft); }
.bubble.me { align-self: flex-end; background: linear-gradient(135deg, #33261f, #191210); border-radius: 18px 18px 6px 18px; color: #fbefe8; box-shadow: 0 10px 20px -12px rgba(30, 16, 10, .6); }

.typing { align-self: flex-start; display: flex; gap: 4px; padding: 14px 16px; background: rgba(255, 255, 255, .96); border: 1px solid var(--line-soft); border-radius: 18px 18px 18px 6px; box-shadow: var(--sh-soft); }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: #d9b7a6; animation: blink 1.3s var(--ease) infinite; }
.typing i:nth-child(2) { animation-delay: .18s; }
.typing i:nth-child(3) { animation-delay: .36s; }
@keyframes blink { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { background: rgba(255, 255, 255, .9); border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; font: 600 12px Manrope; color: var(--ink-3); cursor: pointer; transition: transform .14s var(--ease), background .2s; }
.chip:active { transform: scale(.94); background: #fdefe7; }

.composer { display: flex; align-items: center; gap: 10px; padding: 12px 18px calc(18px + env(safe-area-inset-bottom)); position: relative; z-index: 2; }
.composer .field { flex: 1; height: 50px; border-radius: 999px; }
.send { width: 50px; height: 50px; border-radius: 50%; flex-shrink: 0; border: 0; background: linear-gradient(135deg, var(--accent-warm), var(--accent-deep)); color: #fff; font: 700 18px Manrope; display: flex; align-items: center; justify-content: center; box-shadow: var(--sh-coral); cursor: pointer; transition: transform .16s var(--ease), filter .2s; }
.send:active { transform: scale(.9); }
.send:disabled { filter: grayscale(.4) brightness(1.1); opacity: .7; }

/* ---------- dedicated post-OTP paywall ---------- */
.paywall-screen { background: linear-gradient(180deg, #fffaf6 0%, #fbece3 100%); overflow: hidden; }
.paywall-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: calc(20px + env(safe-area-inset-top)) 22px 24px; }
.paywall-topline { display: flex; justify-content: space-between; align-items: center; }
.paywall-secure { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--green-line); border-radius: 999px; padding: 7px 10px; background: var(--green-soft); color: var(--green-deep); font: 800 9px Manrope, sans-serif; letter-spacing: .12em; }
.paywall-heading { text-align: center; margin-top: 14px; }
.paywall-heading .display { font-size: clamp(27px, 7.5vw, 34px); line-height: 1.08; margin: 8px auto 0; max-width: 390px; }
.paywall-heading p { margin: 10px auto 0; max-width: 360px; color: var(--muted-2); font: 500 13px/1.55 Manrope, sans-serif; }
.paywall-price { color: var(--accent-deep); white-space: nowrap; }
.paywall-video-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 22px; margin-top: 16px; background: #7f8268; box-shadow: 0 18px 35px -20px rgba(70, 42, 28, .65); }
.paywall-video-wrap video { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-sound { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; padding: 8px 11px; background: rgba(24,18,15,.72); backdrop-filter: blur(8px); color: #fff; font: 700 10px Manrope, sans-serif; cursor: pointer; }
.video-sound span:first-child { font-size: 15px; line-height: 1; }
.paywall-benefits { display: grid; gap: 12px; margin-top: 18px; }
.paywall-benefit { display: flex; gap: 12px; align-items: flex-start; }
.paywall-benefit > span { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 12px; background: #fff; color: var(--accent-deep); box-shadow: 0 8px 18px -14px rgba(73,35,22,.8); font: 800 14px Manrope, sans-serif; }
.paywall-benefit strong, .paywall-benefit small { display: block; }
.paywall-benefit strong { color: var(--ink); font: 700 13px/1.3 Manrope, sans-serif; }
.paywall-benefit small { margin-top: 3px; color: var(--muted-2); font: 500 11px/1.45 Manrope, sans-serif; }
.paywall-checkout { flex: 0 0 auto; padding: 13px 22px calc(15px + env(safe-area-inset-bottom)); background: rgba(255,252,249,.97); border-top: 1px solid rgba(112,65,44,.1); box-shadow: 0 -16px 36px -28px rgba(61,31,19,.8); }
.paywall-total { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.paywall-total span, .paywall-total small { display: block; }
.paywall-total span { color: var(--ink); font: 700 12px Manrope, sans-serif; }
.paywall-total small { margin-top: 2px; color: var(--muted); font: 500 10px Manrope, sans-serif; }
.paywall-total > strong { color: var(--ink); font: 800 25px Sora, sans-serif; }
.paywall-checkout .hint { margin-top: 8px; }

/* option rows (onboarding categories, benefit rows) */
.opt { display: flex; align-items: center; gap: 12px; background: rgba(255, 255, 255, .9); border: 1px solid var(--line-soft); border-radius: 18px; padding: 13px 14px; cursor: pointer; transition: transform .16s var(--ease), border-color .2s, background .2s, box-shadow .2s; }
.opt:active { transform: scale(.985); }
.opt.sel { background: linear-gradient(135deg, #fdefe7, #fbe3d6); border: 2px solid var(--accent); box-shadow: 0 12px 24px -16px rgba(190, 80, 50, .5); padding: 12px 13px; }
.opt-ic { width: 38px; height: 38px; border-radius: 50%; background: #f6eadf; display: flex; align-items: center; justify-content: center; font: 700 15px Manrope; color: var(--muted); flex-shrink: 0; }
.opt.sel .opt-ic { background: linear-gradient(135deg, var(--accent-warm), var(--accent-deep)); color: #fff; }
.opt-title { font: 700 14px Manrope; color: var(--ink); }
.opt-desc { font: 500 11px Manrope; color: var(--muted-2); }
.opt.sel .opt-desc { color: #a0715c; }
.opt-go { font: 600 14px Manrope; color: #c9b4a6; }
/* selection indicator: › when unselected, a filled ✓ circle when selected.
   Toggling only the class + text avoids any rebuild/flash. */
.opt-ind { width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 600 14px Manrope; color: #c9b4a6; background: transparent; transition: background .22s var(--ease), color .22s var(--ease); }
.opt.sel .opt-ind { background: var(--accent-deep); color: #fff; font: 700 12px Manrope; }

/* OTP boxes */
.otp-row { display: flex; gap: 12px; }
.otp-box { flex: 1; height: 64px; border-radius: 16px; background: var(--surface-solid); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font: 700 24px Sora, sans-serif; color: var(--ink); }
.otp-box.on { background: linear-gradient(180deg, #fff, #fdefe7); border: 2px solid var(--accent); box-shadow: 0 0 0 4px rgba(222, 107, 76, .15); }
.otp-input { position: absolute; opacity: 0; pointer-events: none; }

/* portrait ring (Ready / success) */
.ring { position: relative; border-radius: 50%; background: linear-gradient(135deg, #f0b08e, var(--accent-deep)); padding: 5px; box-shadow: 0 24px 44px -20px rgba(190, 80, 50, .55); }
.ring .inner { border-radius: 50%; overflow: hidden; border: 3px solid #fff; background: linear-gradient(135deg, #f6c9a8, #d9563c); display: flex; align-items: center; justify-content: center; font: 700 46px Sora, sans-serif; color: #fff; }
.ring .badge { position: absolute; top: 2px; left: 2px; width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #7cbf8e, var(--green)); border: 3px solid var(--screen-1); display: flex; align-items: center; justify-content: center; font: 700 13px Manrope; color: #fff; }

/* success check */
.check-halo { width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(circle, rgba(140, 196, 158, .35), transparent 72%); display: flex; align-items: center; justify-content: center; }
.check { width: 76px; height: 76px; border-radius: 50%; background: linear-gradient(135deg, #7cbf8e, var(--green-deep)); display: flex; align-items: center; justify-content: center; font: 700 30px Manrope; color: #fff; box-shadow: 0 20px 36px -14px rgba(62, 133, 87, .6), 0 0 0 10px rgba(140, 196, 158, .18); animation: pop .6s var(--ease) both; }
@keyframes pop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }

/* small helpers */
.row { display: flex; align-items: center; }
.between { justify-content: space-between; }
.gap8 { gap: 8px; } .gap10 { gap: 10px; } .gap12 { gap: 12px; }
.mt6 { margin-top: 6px; } .mt8 { margin-top: 8px; } .mt10 { margin-top: 10px; } .mt12 { margin-top: 12px; } .mt14 { margin-top: 14px; } .mt18 { margin-top: 18px; } .mt22 { margin-top: 22px; } .mt26 { margin-top: 26px; }
.strong { font: 700 14px Manrope; color: var(--ink); }
.price { font: 700 18px Sora, sans-serif; color: var(--ink); }
.hidden { display: none !important; }

/* range slider (age) */
.range { position: relative; height: 6px; border-radius: 3px; background: #f2e2d6; margin-top: 18px; }
.range .fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: linear-gradient(90deg, var(--accent-warm), var(--accent)); transition: width .12s linear; }
.range .knob { position: absolute; top: 50%; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 2px solid var(--accent); box-shadow: 0 4px 10px -3px rgba(190, 80, 50, .5); transform: translate(-50%, -50%); transition: left .12s linear; }
.range input { position: absolute; inset: -12px 0; width: 100%; opacity: 0; margin: 0; cursor: pointer; }

/* ---------- library (past chats) ---------- */
.chat-card { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: 18px; padding: 13px 15px; box-shadow: var(--sh-soft); cursor: pointer; transition: transform .16s var(--ease), box-shadow .2s; }
.chat-card:active { transform: scale(.985); box-shadow: var(--sh-card); }
.chat-ic { width: 40px; height: 40px; border-radius: 14px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font: 700 16px Manrope; color: #fff; background: linear-gradient(135deg, var(--accent-warm), var(--accent-deep)); }
.chat-body { flex: 1; min-width: 0; }
.chat-title { font: 700 14px Manrope; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-prev { font: 500 12px Manrope; color: var(--muted-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.chat-time { font: 600 11px Manrope; color: var(--faint); flex-shrink: 0; align-self: flex-start; }

/* ---------- "Hi, name" greeting moment ---------- */
/* .show toggles the overlay in; the orb + line motion is driven by Motion One
   (showGreeting). At rest both are visible, so a failed motion load still shows
   the greeting and advances. */
.greet { position: absolute; inset: 0; z-index: 20; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 30px; background: linear-gradient(180deg, var(--screen-1), var(--screen-3)); }
.greet.show { display: flex; }
.greet-orb { width: 116px; height: 116px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #f6c9a8, var(--accent-deep)); box-shadow: 0 30px 62px -20px rgba(190, 80, 50, .5); }
.greet-line { font: 700 33px Sora, sans-serif; color: var(--ink); letter-spacing: -.02em; text-align: center; padding: 0 30px; }

@media (prefers-reduced-motion: reduce) {
  /* remaining CSS animations off; Motion One springs are separately gated by
     reducedMotion() in JS (anim() snaps to the visible final state). */
  * { animation: none !important; transition: none !important; }
}