/* ============================================================================
   Moné — visual build (Phase 5)
   Night Water landing + editorial chat. Light sculpts her out of the dark.
   Identity is locked: Lotus Pink #E75FA8 only (never Assort magenta); Cormorant
   Garamond (display) + Poppins (UI); light-only motion, the petals NEVER move.
   ----------------------------------------------------------------------------
   Markup/class contract is FROZEN in index.html + app.js — this file only
   styles those hooks; it never changes the DOM.
   ========================================================================== */

:root {
  --lotus:#E75FA8; --ink:#2A2433; --mist:#F5EFF7; --petal-tint:#F7CCE2;
  --night-1:#14102A; --night-2:#2C1B45; --night-3:#3D2257;
  --font-serif:'Cormorant Garamond', Georgia, serif;
  --font-ui:'Poppins', system-ui, sans-serif;

  /* Derived tones — soft inks of Mist for the editorial hierarchy. */
  --mist-2: rgba(245,239,247,.74);   /* secondary text          */
  --mist-3: rgba(245,239,247,.52);   /* muted captions / labels */
  --mist-4: rgba(245,239,247,.34);   /* faintest hairlines      */
  --lotus-soft: rgba(231,95,168,.40);
  --lotus-faint: rgba(231,95,168,.16);

  --maxw: 720px;        /* editorial reading measure */
  --ease: cubic-bezier(.22,.61,.36,1);
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }
/* Solid near-black base on the root so the canvas is never white in any view/renderer;
   the body radial gradient paints over it. (Body-bg propagation can drop out when the
   in-flow content is a single 100vh flex child — e.g. the chat view.) */
html { background: #0C0918; }

/* near-black cinematic field (film treatment); Night Water is the base palette */
body {
  background: radial-gradient(ellipse 85% 70% at 50% 40%, var(--night-3) 0%, var(--night-1) 46%, #0C0918 100%);
  color: var(--mist);
  font-family: var(--font-ui);
  font-weight: 300;
  margin: 0;
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: .005em;
}

/* A faint pink atmosphere that lifts off the lower field — depth, not decoration. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(60% 40% at 50% 86%, rgba(231,95,168,.07), transparent 70%);
  z-index: 0;
}

.wordmark { font-family: var(--font-serif); font-weight: 500; color: #fff; }
.wordmark .acc { color: var(--lotus); }

/* The canonical lotus mark — never recolour, never animate the petals themselves. */
.lotus { display: block; }


/* ============================================================================
   LANDING — the film's reveal card
   ========================================================================== */

#landing {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 56px 24px 64px;
  gap: 0;
  overflow: hidden;
}

/* Staggered, light-only entrance — each piece fades up as the field settles. */
@keyframes mone-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

#landing .pill,
#landing .hero-stage,
#landing .wordmark,
#landing .tagline,
#landing .wordmark-ja,
#landing .gsi {
  animation: mone-rise 1.1s var(--ease) both;
}
#landing .pill        { animation-delay: .05s; }
#landing .hero-stage  { animation-delay: .20s; }
#landing .wordmark    { animation-delay: .55s; }
#landing .tagline     { animation-delay: .70s; }
#landing .wordmark-ja { animation-delay: .82s; }
#landing .gsi         { animation-delay: .98s; }

/* — Private Preview pill — */
.pill {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  margin-bottom: 12px;
  padding: 7px 16px 7px 13px;
  border: 1px solid var(--lotus-soft);
  border-radius: 999px;
  background: rgba(231,95,168,.06);
  color: var(--mist-2);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  backdrop-filter: blur(2px);
}
.pill-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--lotus);
  box-shadow: 0 0 8px rgba(231,95,168,.9);
  flex: none;
}

/* — Hero stage: halo + concentric rings + breathing lotus — */
.hero-stage {
  position: relative;
  width: 260px;
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 8px 0 6px;
}

.halo {
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(231,95,168,.42) 0%, rgba(231,95,168,.16) 34%, transparent 68%);
  filter: blur(12px);
  pointer-events: none;
}

.ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid var(--lotus-faint);
  pointer-events: none;
}
.ring-a { width: 150px; height: 150px; border-color: rgba(231,95,168,.26); }
.ring-b { width: 232px; height: 232px; border-color: rgba(231,95,168,.13); }

/* Ambient ripples — the brand's "thinking" ring, slowed to a calm, continuous
   emanation from the lotus on the landing. Light-only motion; the petals never
   move. Two staggered layers so a new ripple is always rising as one fades. */
.hero-stage .ripple {
  width: 150px;
  height: 150px;
  border-color: rgba(231,95,168,.45);
  box-shadow: 0 0 12px rgba(231,95,168,.18);
  animation: mone-ripple-ambient 6.5s var(--ease, ease-out) infinite;
}
.hero-stage .ripple-2 { animation-delay: 3.25s; }
@keyframes mone-ripple-ambient {
  0%   { transform: scale(.45); opacity: 0;   }
  18%  { opacity: .6; }
  100% { transform: scale(2.7); opacity: 0;   }
}

.hero-stage .lotus {
  position: relative;
  z-index: 1;
  width: 96px;
  height: auto;
}

/* — Wordmark + taglines — */
.wordmark {
  font-size: clamp(64px, 12vw, 104px);
  line-height: .9;
  margin: 24px 0 0;
  letter-spacing: -.01em;
  text-shadow: 0 2px 40px rgba(0,0,0,.35);
}

.tagline {
  margin: 18px 0 0;
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--mist-3);
}

.wordmark-ja {
  margin: 10px 0 0;
  font-size: 14px;
  font-weight: 300;
  letter-spacing: .42em;
  color: var(--mist-4);
}

/* — Sign in with Google — */
.gsi {
  margin-top: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 13px 26px 13px 22px;
  border: none;
  border-radius: 999px;
  background: var(--mist);
  color: #1F1B26;
  font-family: var(--font-ui);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: .01em;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(0,0,0,.32), 0 0 0 1px rgba(255,255,255,.04);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.gsi:hover {
  transform: translateY(-2px);
  background: #FFFFFF;
  box-shadow: 0 12px 34px rgba(231,95,168,.22), 0 0 0 1px rgba(231,95,168,.18);
}
.gsi:active { transform: translateY(0); }
.gsi:focus-visible { outline: 2px solid var(--lotus); outline-offset: 3px; }

/* The real multi-colour Google "G", inline as a data-URI background. */
.gsi-glyph {
  width: 18px;
  height: 18px;
  flex: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%234285F4' d='M45.12 24.5c0-1.56-.14-3.06-.4-4.5H24v8.51h11.84c-.51 2.75-2.06 5.08-4.39 6.64v5.52h7.11c4.16-3.83 6.56-9.47 6.56-16.17z'/%3E%3Cpath fill='%2334A853' d='M24 46c5.94 0 10.92-1.97 14.56-5.33l-7.11-5.52c-1.97 1.32-4.49 2.1-7.45 2.1-5.73 0-10.58-3.87-12.31-9.07H4.34v5.7C7.96 41.07 15.4 46 24 46z'/%3E%3Cpath fill='%23FBBC05' d='M11.69 28.18C11.25 26.86 11 25.45 11 24s.25-2.86.69-4.18v-5.7H4.34C2.85 17.09 2 20.45 2 24s.85 6.91 2.34 9.88l7.35-5.7z'/%3E%3Cpath fill='%23EA4335' d='M24 10.75c3.23 0 6.13 1.11 8.41 3.29l6.31-6.31C34.91 4.18 29.93 2 24 2 15.4 2 7.96 6.93 4.34 14.12l7.35 5.7c1.73-5.2 6.58-9.07 12.31-9.07z'/%3E%3C/svg%3E");
}


/* ============================================================================
   CHAT — a calm editorial conversation surface (revealed by JS removing [hidden])
   ========================================================================== */

#chat {
  position: relative;
  z-index: 1;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
}
#chat[hidden] { display: none; }   /* respect the JS-controlled gate */

/* — Header: presence lockup, top-left — */
.chat-header {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 20px 28px;
  flex: none;
  border-bottom: 1px solid rgba(245,239,247,.06);
}

.presence {
  position: relative;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.presence .lotus {
  position: relative;
  z-index: 1;
  width: 26px;
  height: auto;
  /* gentle resting glow even when idle, so she always feels present */
  filter: drop-shadow(0 0 7px rgba(231,95,168,.40));
}

.chat-name {
  margin: 0;            /* reset the landing .wordmark margin so the header lockup centers */
  font-size: 24px;
  line-height: 1;
}

/* Sign out — quiet text affordance pushed to the header's trailing edge. */
.signout {
  margin-left: auto;
  background: none;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 6px 14px;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 13px;
  letter-spacing: .02em;
  color: var(--mist-4);
  cursor: pointer;
  transition: color .25s ease, border-color .25s ease;
}
.signout:hover { color: var(--mist-2); border-color: var(--lotus-faint); }
.signout:focus-visible { outline: 2px solid var(--lotus); outline-offset: 2px; }

/* — Messages scroll area — */
.messages {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 32px 28px 28px;
  scroll-behavior: smooth;
}
/* Center the conversation in a comfortable measure on wide screens. */
.messages > .turn,
.messages > .empty {
  max-width: var(--maxw);
  margin-left: auto;
  margin-right: auto;
}

/* slim, on-brand scrollbar */
.messages::-webkit-scrollbar { width: 9px; }
.messages::-webkit-scrollbar-thumb {
  background: rgba(231,95,168,.20);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
.messages::-webkit-scrollbar-thumb:hover { background: rgba(231,95,168,.34); background-clip: padding-box; }

/* — Empty state: greeting + example chips — */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  min-height: 100%;
  gap: 4px;
  animation: mone-rise .9s var(--ease) both;
}
.empty[hidden] { display: none; }

.greeting {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(28px, 4.5vw, 40px);
  line-height: 1.18;
  color: #fff;
  margin: 0 0 22px;
}
.greeting-ja {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 15px;
  letter-spacing: .18em;
  color: var(--mist-3);
}

.examples {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  max-width: 540px;
}
.example {
  padding: 10px 18px;
  border: 1px solid rgba(245,239,247,.14);
  border-radius: 999px;
  background: rgba(245,239,247,.03);
  color: var(--mist-2);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 300;
  cursor: pointer;
  transition: border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.example:hover {
  border-color: var(--lotus-soft);
  background: rgba(231,95,168,.07);
  color: #fff;
  transform: translateY(-1px);
}
.example:focus-visible { outline: 2px solid var(--lotus); outline-offset: 2px; }


/* ============================================================================
   TURNS — user line + Moné's editorial answer
   ========================================================================== */

.turn {
  animation: mone-rise .6s var(--ease) both;
  margin: 0;
}
.turn + .turn { margin-top: 30px; }

/* — User: a quiet, right-aligned line. Understated, never a loud bubble. — */
.turn.user {
  display: flex;
  justify-content: flex-end;
}
.bubble {
  max-width: 78%;
  padding: 11px 17px;
  border-radius: 16px 16px 4px 16px;
  background: rgba(245,239,247,.05);
  border: 1px solid rgba(245,239,247,.08);
  color: var(--mist-2);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.55;
  text-align: left;
}

/* — Moné: editorial prose. The newest answer is the hero. — */
.answer {
  font-family: var(--font-ui);
  color: var(--mist);
  max-width: 100%;
}
.answer p {
  margin: 0 0 .7em;
  font-weight: 300;
}
.answer p:last-child { margin-bottom: 0; }

/* The editorial "number drop" — key figures bloom in Cormorant + Lotus Pink. */
.answer .figure {
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--lotus);
  font-feature-settings: "lnum" 1, "tnum" 1;
  letter-spacing: .005em;
  /* sized relative to the surrounding answer, so it scales with latest/older */
  font-size: 1.5em;
  line-height: 1;
  white-space: nowrap;
}

/* Latest answer = full editorial size, the cinematic hero. */
.turn.mone.latest .answer {
  font-size: clamp(19px, 2.6vw, 27px);
  line-height: 1.55;
  font-weight: 300;
  letter-spacing: .002em;
  color: #fff;
}
.turn.mone.latest .answer .figure {
  font-size: clamp(34px, 5vw, 52px);
  display: inline-block;
  vertical-align: baseline;
  text-shadow: 0 0 26px rgba(231,95,168,.30);
}

/* Older answers compress into a calmer, lower-emphasis form as they scroll up. */
.turn.mone:not(.latest) .answer {
  font-size: 15px;
  line-height: 1.7;
  color: var(--mist-2);
  transition: color .4s var(--ease), font-size .4s var(--ease);
}
.turn.mone:not(.latest) .answer .figure {
  font-size: 1.4em;
  text-shadow: none;
}

/* Friendly error — calm, on-brand, no alarm red. */
.turn.mone.error .answer,
.turn.mone.error.latest .answer {
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.65;
  font-weight: 300;
  color: var(--mist-3);
  padding-left: 16px;
  border-left: 2px solid var(--lotus-faint);
}
.turn.mone.error .answer .figure { color: var(--mist-2); font-size: 1em; }


/* ============================================================================
   COMPOSER — bottom bar
   ========================================================================== */

.composer {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px 24px;
  background: linear-gradient(to top, #0C0918 18%, rgba(12,9,24,.72) 70%, transparent 100%);
}
.composer-input {
  flex: 1 1 auto;
  min-width: 0;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 14px 20px;
  border: 1px solid rgba(245,239,247,.14);
  border-radius: 999px;
  background: rgba(245,239,247,.04);
  color: var(--mist);
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 300;
  outline: none;
  transition: border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}
.composer-input::placeholder { color: var(--mist-4); }
.composer-input:focus {
  border-color: var(--lotus-soft);
  background: rgba(231,95,168,.05);
  box-shadow: 0 0 0 3px rgba(231,95,168,.10);
}

.composer-send {
  flex: none;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: var(--lotus);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(231,95,168,.34);
  transition: transform .2s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), opacity .25s var(--ease);
}
.composer-send:hover {
  transform: scale(1.06);
  box-shadow: 0 6px 22px rgba(231,95,168,.5);
}
.composer-send:active { transform: scale(.96); }
.composer-send:focus-visible { outline: 2px solid var(--mist); outline-offset: 2px; }

/* Busy = calm dimming, never a spinner. (form.busy + disabled input) */
form.busy .composer-send {
  opacity: .45;
  pointer-events: none;
  box-shadow: none;
}
form.busy .composer-input,
.composer-input:disabled {
  opacity: .6;
  cursor: default;
}


/* ============================================================================
   MOTION — light only; the petals NEVER move (identity hard rule)
   Verbatim vocabulary from mone-identity.html, plus the breathe seed.
   ========================================================================== */

.ripple {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid rgba(231,95,168,.4);
  width: 120px;
  height: 120px;
  opacity: 0;
}
#presence.thinking .ripple { animation: mone-ripple 4.5s ease-out infinite; }
#presence.thinking .ripple:nth-child(2) { animation-delay: 2.2s; }
@keyframes mone-ripple {
  0%   { transform: scale(.5);  opacity: .8; }
  100% { transform: scale(2.4); opacity: 0;  }
}

.breathe { animation: mone-breathe 3.8s ease-in-out infinite; }
@keyframes mone-breathe {
  0%,100% { filter: drop-shadow(0 0 6px rgba(231,95,168,.35)); }
  50%     { filter: drop-shadow(0 0 18px rgba(231,95,168,.7)); }
}

@media (prefers-reduced-motion: reduce) {
  .breathe, #presence.thinking .ripple, .hero-stage .ripple { animation: none; }
  .breathe { filter: drop-shadow(0 0 12px rgba(231,95,168,.5)); }
  /* Steady entrance — no rise, no fade-in motion. */
  #landing .pill, #landing .hero-stage, #landing .wordmark, #landing .tagline,
  #landing .wordmark-ja, #landing .gsi, .empty, .turn { animation: none; }
}


/* ============================================================================
   RESPONSIVE — desktop-first, mobile polish pass (Task 5)
   Target: 320–414 wide (iPhone-class). All changes are surgical overrides
   of desktop values; the layout contract (100dvh flex column, flex: none
   composer, etc.) is already correct and holds on mobile without change.
   ========================================================================== */

@media (max-width: 600px) {
  /* — Landing — */
  #landing { padding: 40px 20px 48px; }
  /* rings bleed off-screen behind the lotus — intentional; overflow is hidden on #landing */
  .hero-stage { width: 220px; height: 220px; }
  .halo { width: 260px; height: 260px; }
  .ring-b { width: 200px; height: 200px; }
  /* Wordmark: clamp floor raised to prevent overflow at 320px.
     At 375px: max(38px, 10vw=37.5px) → 38px; at 320px → 38px. "Moné" in Cormorant
     at 38px is ~130px wide — safe within 280px (320 − 40px padding). */
  .wordmark { font-size: clamp(38px, 12vw, 64px); }
  /* GSI full-width, sensible max so it doesn't stretch on wider phones */
  .gsi { width: 100%; max-width: 340px; margin-top: 34px; }

  /* — Chat header — */
  .chat-header { padding: 16px 18px; }

  /* — Messages scroll area — */
  .messages { padding: 24px 18px 20px; }

  /* — Composer: bottom-pinned via the 100dvh flex column (no extra position needed).
     Bottom padding respects the iOS home indicator / safe area. — */
  .composer {
    padding: 12px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  }
  /* Ensure the input itself has a comfortable tap target height (≥44px) */
  .composer-input { padding: 13px 18px; }

  /* — Conversation turns — */
  .bubble { max-width: 86%; }

  /* Latest answer: fluid size for narrow viewport — stays readable without overflowing.
     At 375px: 6vw = 22.5px; at 320px: 6vw = 19.2px → floor 18px holds. */
  .turn.mone.latest .answer { font-size: clamp(18px, 6vw, 23px); }

  /* Latest figure: fluid so "27,365" (6 chars, white-space: nowrap) never overflows.
     At 375px: 11vw = 41.25px → within clamp. At 320px: 11vw = 35.2px → above 28px floor.
     Column width at 320px = 320 − 36px padding = 284px; 35px Cormorant tabular ≈ 130px → safe. */
  .turn.mone.latest .answer .figure { font-size: clamp(28px, 11vw, 44px); }
}

/* — Extra-narrow pass (320px, e.g. iPhone SE 1st gen) — */
@media (max-width: 400px) {
  /* Wordmark floor already 38px from above; no further reduction needed for "Moné". */

  /* Greeting shrinks slightly so it doesn't crowd the example chips */
  .greeting { font-size: clamp(22px, 6.5vw, 32px); }

  /* Figure: tighten further for truly narrow screens.
     At 360px: 9vw = 32.4px; at 320px: 9vw = 28.8px → floor 26px.
     "27,365" at 26px Cormorant tabular ≈ ~105px — fits comfortably in 284px column. */
  .turn.mone.latest .answer .figure { font-size: clamp(26px, 9vw, 40px); }

  /* Tighten horizontal padding to give content a little more room */
  .messages { padding: 20px 14px 16px; }
  .chat-header { padding: 14px 14px; }
  .composer { padding: 10px 12px calc(18px + env(safe-area-inset-bottom, 0px)); }
}