/* ============================================================
   Elephante Assistant — page styles.
   Concept: Calm Card Stack.

   EA TOKENS — every value below is copied VERBATIM from the
   approved LIQUID GLASS LAYER in styles.css. No new palette is
   invented here.

   G20 — WHY THESE ARE PINNED, DO NOT "SIMPLIFY" THIS AWAY:
   styles.css defines the approved slate palette on a bare
   `:root` selector, specificity (0,1,0). The older dark block
   uses `:root:not([data-theme="light"])`, specificity (0,2,0).
   Specificity beats source order, so on a system-dark device
   with no data-theme attribute — the default state of most
   Macs and every iPhone in dark mode — `var(--accent)` resolves
   to the OLD GREEN #4fb39a, measured on the live site, not the
   approved slate #8fb4c9. Reading var(--accent) here would
   silently ship the wrong colour to most visitors. These
   --ea-* copies make it deterministic. Same palette, no drift.
   ============================================================ */
:root {
  --ea-ink:           #eef2f5;
  --ea-muted:         rgba(226,232,240,.62);
  --ea-faint:         rgba(226,232,240,.34);
  --ea-accent:        #8fb4c9;
  --ea-accent-hi:     #b7d2e0;
  --ea-glass-bg:      rgba(255,255,255,.055);
  --ea-glass-bg-hi:   rgba(255,255,255,.09);
  --ea-glass-line:    rgba(255,255,255,.14);
  --ea-glass-line-hi: rgba(255,255,255,.22);
  --ea-on-accent:     #0e1519;
  --ea-placeholder:   rgba(226,232,240,.4);
  --ea-focus-ring:    rgba(143,180,201,.18);
  --ea-focus-line:    rgba(143,180,201,.7);
  --ea-radius:        12px;
  --ea-radius-lg:     22px;
  --ea-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ea-ease:  cubic-bezier(.22,1,.36,1);
  --ea-in:    cubic-bezier(.2,.9,.3,1.3);   /* G10 — cards arrive, they do not drift */
  --ea-card-max: 560px;                     /* set from script to the real free space */
}

* { box-sizing: border-box; }

/* G11 — app-shell model. The page never scrolls; the card scrolls inside itself. */
/* The elephant is allowed to bleed a little past the padding on a
   phone; without clipping the viewport that bleed became a real 5.5px
   horizontal scroll (measured at 390px). */
html { scroll-behavior: auto; height: 100%; overflow: hidden; }
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  font-family: var(--ea-font);
  color: var(--ea-ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  background:
    radial-gradient(1200px 800px at 15% 0%, #24313d 0%, transparent 60%),
    radial-gradient(1100px 900px at 100% 30%, #202a39 0%, transparent 55%),
    linear-gradient(160deg, #12181e 0%, #171d26 55%, #1b1f2b 100%) fixed;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(circle at 22% 26%, rgba(143,180,201,.10) 0%, transparent 45%),
    radial-gradient(circle at 82% 20%, rgba(120,140,180,.09) 0%, transparent 45%);
}

/* ------------------------------------------------------------
   FULL-BLEED SHELL — fills width AND height at every breakpoint.
   position/z-index are required or the refraction pseudo
   (z-index:-1) drops behind the page backdrop and vanishes.
   ------------------------------------------------------------ */
.ea-root {
  position: relative; z-index: 1;
  height: 100vh; height: 100dvh;
  width: 100%; max-width: none;
  display: flex; flex-direction: column;
  padding:
    max(10px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(8px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
}

/* ---------------- top bar: identity mark + version pill ------ */
.ea-bar {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 0 2px 2px;
}
.ea-mark { display: flex; align-items: center; gap: 9px; min-width: 0; }
/* G17 — the same silhouette at 28px, so EA has a face on every screen */
.ea-avatar {
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  background: var(--ea-glass-bg-hi); border: 1px solid var(--ea-glass-line);
  display: grid; place-items: center; overflow: hidden;
}
.ea-avatar svg { width: 24px; height: 24px; display: block; }
.ea-mark b {
  font-size: .93rem; font-weight: 650; letter-spacing: -.01em; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ea-pill {
  appearance: none; cursor: pointer;
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--ea-font);
  font-size: .66rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ea-accent-hi); background: var(--ea-glass-bg-hi);
  border: 1px solid var(--ea-glass-line);
  padding: 12px 14px; min-height: 44px; border-radius: 99px; white-space: nowrap;
  transition: border-color .16s, background .16s;
}
.ea-pill:hover { border-color: var(--ea-glass-line-hi); background: rgba(255,255,255,.12); }
.ea-pill:focus-visible { outline: none; border-color: var(--ea-focus-line); box-shadow: 0 0 0 3px var(--ea-focus-ring); }
.ea-pill i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ea-accent);
  box-shadow: 0 0 0 3px rgba(143,180,201,.16);
}

/* ---------------- stage: the big elephant -------------------- */
.ea-stage {
  flex: 1 1 0; min-height: 168px; overflow: visible;
  display: flex; align-items: center; justify-content: center;
  padding: 4px 0 2px; position: relative;
  transition: min-height .55s var(--ea-ease);
}
.ea-eleph {
  flex: 0 0 auto; width: min(112%, 560px); height: 100%;
  display: block; overflow: visible; margin: 0 auto;
}

/* breathing / nodding */
.eBody { transform-box: view-box; transform-origin: 220px 220px; animation: eaBreathe 6s ease-in-out infinite; }
@keyframes eaBreathe { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-7px) scale(1.014); } }
@keyframes eaNod     { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-3px) rotate(1.1deg); } }
.is-speaking .eBody { animation: eaNod 1.5s ease-in-out infinite; }

/* ears */
.eEarL { transform-box: view-box; transform-origin: 132px 86px; animation: eaEarL 6.6s ease-in-out infinite; }
.eEarR { transform-box: view-box; transform-origin: 308px 86px; animation: eaEarR 6.6s ease-in-out infinite; }
@keyframes eaEarL { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(-5.5deg); } }
@keyframes eaEarR { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate( 5.5deg); } }
.is-speaking .eEarL, .is-speaking .eEarR { animation-duration: 3.2s; }

/* trunk: outer group curls (the thinking pose), inner group sways always */
.eTrunkCurl {
  transform-box: view-box; transform-origin: 220px 234px;
  transition: transform .75s var(--ea-ease);
}
.eTrunkSway {
  transform-box: view-box; transform-origin: 220px 234px;
  animation: eaTrunk 7.4s ease-in-out infinite;
}
@keyframes eaTrunk { 0%,100% { transform: rotate(-2.6deg); } 50% { transform: rotate(2.6deg); } }
/* A001 — the trunk used to curl and FREEZE while it was thinking, which read
   as stopped rather than busy. It now keeps wiggling while curled, and the
   reply sway is wider (not merely faster) so a reply is obvious. */
.is-thinking .eTrunkCurl { transform: rotate(-15deg) translateY(-8px); }
.is-thinking .eTrunkSway { animation: eaTrunkBusy .62s ease-in-out infinite alternate; }
@keyframes eaTrunkBusy { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
.is-speaking .eTrunkSway { animation: eaTrunkTalk 1.15s ease-in-out infinite; }
@keyframes eaTrunkTalk { 0%,100% { transform: rotate(-9deg); } 50% { transform: rotate(9deg); } }

/* G13 — face liveness. Lids close 0.05s apart, never in sync.
   Pupils drift on a slow 11s glance cycle. */
.eLid { transform-box: fill-box; transform-origin: 50% 2%; transform: scaleY(0); animation: eaBlink 6.6s ease-in-out infinite; }
.eLidR { animation-delay: .05s; }
@keyframes eaBlink { 0%, 93%, 100% { transform: scaleY(0); } 95.5% { transform: scaleY(1.08); } }
.ePupil { transform-box: fill-box; transform-origin: 50% 50%; animation: eaGlance 11s ease-in-out infinite; }
@keyframes eaGlance {
  0%, 44%, 100% { transform: translate(0,0); }
  52%, 66%      { transform: translate(3.5px, 1px); }
  80%           { transform: translate(-3px, 0); }
}

/* halo */
.eGlow { animation: eaGlow 6s ease-in-out infinite; }
@keyframes eaGlow { 0%,100% { opacity: .5; } 50% { opacity: .9; } }

/* the distinct THINKING state: bubbles drift up from the curled trunk */
.eDots { opacity: 0; transition: opacity .35s ease; }
.is-thinking .eDots { opacity: 1; }
.eDots circle { transform-box: view-box; transform-origin: center; }
.is-thinking .eDots circle { animation: eaDot 1.15s ease-in-out infinite; }
.eDots circle:nth-child(2) { animation-delay: .16s; }
.eDots circle:nth-child(3) { animation-delay: .32s; }
@keyframes eaDot { 0%,100% { transform: translateY(3px); opacity: .3; } 50% { transform: translateY(-7px); opacity: 1; } }

/* ---------------- the side column ---------------------------- */
.ea-side { flex: none; display: flex; flex-direction: column; min-width: 0; }

/* ---------------- EA's spoken line (G9 — speech reads as speech) */
.ea-say {
  flex: none; display: flex; justify-content: center;
  padding: 4px 0 0; min-height: 46px;
  transition: min-height .5s var(--ea-ease), padding .5s var(--ea-ease), opacity .4s ease;
}
/* The question itself is what EA says, so this line is the loudest
   thing under the elephant, not a caption. */
.ea-say p {
  margin: 0; font-size: 1.06rem; font-weight: 500; line-height: 1.4; color: #fff;
  max-width: 560px;
  padding: 10px 14px;
  border-radius: 20px 20px 20px 6px;    /* G9 — the tail */
  background: var(--ea-glass-bg);
  border: 1px solid var(--ea-glass-line);
  -webkit-backdrop-filter: blur(6px) saturate(135%);
          backdrop-filter: blur(6px) saturate(135%);
  box-shadow: 0 10px 30px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.10);
  animation: eaSayIn .5s var(--ea-ease) both;
}
@keyframes eaSayIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------------- G4 — the countdown, in words --------------- */
.ea-left {
  flex: none; margin: 5px 0 0; text-align: center; min-height: 15px;
  font-size: .82rem; color: var(--ea-faint); line-height: 1.3;
  transition: min-height .5s var(--ea-ease), margin .5s var(--ea-ease), opacity .4s ease;
}

/* ---------------- progress dots ------------------------------ */
.ea-dots {
  flex: none; display: flex; gap: 7px; justify-content: center;
  padding: 5px 0 0; min-height: 14px;
  transition: min-height .5s var(--ea-ease), padding .5s var(--ea-ease), opacity .4s ease;
}
.ea-dots i {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(226,232,240,.2);
  transition: background .35s ease, width .35s var(--ea-ease);
}
.ea-dots i.done { background: rgba(143,180,201,.45); }
.ea-dots i.now  { background: var(--ea-accent-hi); width: 20px; border-radius: 99px; }

/* ---------------- the card deck ------------------------------ */
.ea-deck {
  flex: none; position: relative; width: 100%;
  max-width: 620px; margin: 6px auto 0; min-height: 40px;
  transition: height .5s var(--ea-ease);
}
.ea-card {
  position: absolute; left: 0; right: 0; bottom: 0;
  border-radius: var(--ea-radius-lg);
  background: linear-gradient(rgba(20,26,34,.58), rgba(20,26,34,.58)), var(--ea-glass-bg);
  -webkit-backdrop-filter: blur(6px) saturate(135%);
          backdrop-filter: blur(6px) saturate(135%);
  border: 1px solid var(--ea-glass-line);
  box-shadow: 0 10px 30px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.10);
  transition: transform .5s var(--ea-ease), opacity .4s ease, filter .4s ease;
  will-change: transform, opacity;
}
.ea-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  box-shadow: inset -8px -6px 0 -10px rgba(255,255,255,.7),
              inset 0 -7px 0 -7px rgba(255,255,255,.55);
  opacity: .4; filter: blur(1px) drop-shadow(4px 2px 4px rgba(0,0,0,.4));
  pointer-events: none;
}
/* the card scrolls INSIDE itself — the page never does (G11) */
.ea-in {
  padding: 16px;
  max-height: var(--ea-card-max);
  overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.ea-card.enter { transform: translateY(52px) scale(.97); opacity: 0; }
/* G10 — the incoming front card overshoots slightly and settles */
.ea-card.d0 { transform: translateY(0) scale(1); opacity: 1; transition: transform .38s var(--ea-in), opacity .3s ease; }
/* G21 — no backdrop-filter on the receding cards. Three stacked
   blurred glass layers is the one real performance risk, and at
   34% / 12% opacity the visual cost of dropping it is near zero. */
.ea-card.d1 {
  transform: translateY(-22px) scale(.945); opacity: .34; filter: blur(4px);
  pointer-events: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.ea-card.d2 {
  transform: translateY(-38px) scale(.9); opacity: .12; filter: blur(6px);
  pointer-events: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.ea-card.d1 .ea-in, .ea-card.d2 .ea-in { overflow: hidden; }
/* A receding card must never be taller than the deck, or a tall card
   that has just left (the greeting, say) hangs its blurred text up
   behind the speech line and reads as a smudge rather than depth.
   Measured at 1440x900 with the greeting card behind question one. */
.ea-card.d1, .ea-card.d2, .ea-card.gone { max-height: 100%; overflow: hidden; }
.ea-card.gone { transform: translateY(-46px) scale(.86); opacity: 0; pointer-events: none; }

/* ---------------- card contents ------------------------------ */
.ea-kicker {
  font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ea-faint); margin: 0 0 9px;
}
.ea-h1  { color: #fff; font-size: 1.5rem; font-weight: 700; margin: 0 0 8px; line-height: 1.22; letter-spacing: -.02em; }
.ea-q   { color: #fff; font-size: 1.16rem; font-weight: 600; margin: 0 0 7px; line-height: 1.35; letter-spacing: -.01em; }
.ea-help{ font-size: 1.04rem; color: var(--ea-muted); margin: 0 0 12px; line-height: 1.45; }
.ea-body{ font-size: 1.18rem; color: var(--ea-ink); opacity: .92; margin: 0 0 14px; line-height: 1.5; }
.ea-note{ font-size: .84rem; color: var(--ea-faint); margin: 12px 0 0; line-height: 1.5; }

/* The example rides inside EA's own speech bubble, under what it just said. */
.ea-eg-in {
  display: block; margin-top: 9px; padding-top: 9px;
  border-top: 1px solid rgba(255,255,255,.16);
  font-size: .96em; font-weight: 400; line-height: 1.45; opacity: .9;
}
/* The "Example:" label reads in its own colour, so it is obviously a label
   and not part of what EA just said. */
.ea-eg-in b { color: #e0b877; font-weight: 700; letter-spacing: .01em; }
.ea-eg-in   { color: #cfd8e0; }

/* G15 — the example sits in its own tinted rail, not on a hairline */
.ea-eg {
  font-size: 1.04rem; color: var(--ea-ink); opacity: .95; margin: 0 0 13px; line-height: 1.5;
  background: rgba(255,255,255,.075);
  border: 1px solid rgba(255,255,255,.16);
  border-left: 3px solid var(--ea-accent);
  border-radius: 10px; padding: 12px 14px;
}
.ea-eg b { color: var(--ea-accent-hi, var(--ea-accent)); font-weight: 700; }

/* greeting stagger */
.st { animation: eaSayIn .55s var(--ea-ease) both; }
.st1 { animation-delay: .06s; } .st2 { animation-delay: .14s; }
.st3 { animation-delay: .22s; } .st4 { animation-delay: .3s; }

/* ---------------- G16 — orientation as an iOS inset grouped list */
.ea-list {
  list-style: none; margin: 4px 0 16px; padding: 0;
  border: 1px solid var(--ea-glass-line); border-radius: var(--ea-radius);
  background: var(--ea-glass-bg); overflow: hidden;
}
.ea-list li + li { border-top: 1px solid var(--ea-glass-line); }
.ea-listbtn {
  appearance: none; cursor: pointer; width: 100%;
  display: flex; align-items: center; gap: 10px;
  min-height: 50px; padding: 13px 15px; text-align: left;
  font-family: var(--ea-font); font-size: 16px; line-height: 1.35; font-weight: 500;
  color: var(--ea-ink); background: transparent; border: 0;
  transition: background .16s;
}
.ea-listbtn:hover { background: var(--ea-glass-bg-hi); }
.ea-listbtn:focus-visible { outline: none; background: var(--ea-glass-bg-hi); box-shadow: inset 0 0 0 2px var(--ea-focus-line); }
.ea-listbtn span { flex: 1 1 auto; min-width: 0; }
.ea-chev { flex: none; width: 9px; height: 9px; display: block; }

/* ---------------- tap-to-answer boxes ------------------------ */
.ea-opts { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.ea-opt {
  display: flex; gap: 12px; align-items: center;
  width: 100%; min-height: 52px; padding: 12px 14px;
  text-align: left; cursor: pointer;
  font-family: var(--ea-font); font-size: 16px; line-height: 1.35;
  color: var(--ea-ink);
  border: 1px solid var(--ea-glass-line); border-radius: var(--ea-radius);
  background: var(--ea-glass-bg);
  -webkit-backdrop-filter: blur(6px) saturate(135%);
          backdrop-filter: blur(6px) saturate(135%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  transition: border-color .16s, background .16s, transform .16s var(--ea-ease);
}
.ea-opt:hover { border-color: var(--ea-accent); background: var(--ea-glass-bg-hi); }
.ea-opt:active { transform: scale(.985); }
/* NOTE: this is deliberately NOT the hub's `.opt.checked`, which measures
   1.02:1 contrast on a system-light device. Never reuse hub class names. */
.ea-opt.is-selected {
  color: #fff; background: var(--ea-glass-bg-hi); border-color: var(--ea-accent);
  box-shadow: 0 0 0 3px var(--ea-focus-ring), inset 0 1px 0 rgba(255,255,255,.10);
}
.ea-opt:focus-visible { outline: none; border-color: var(--ea-focus-line); box-shadow: 0 0 0 3px var(--ea-focus-ring); }

/* G14 — two columns past 760px so four options do not stretch
   down a lonely desktop column */
@media (min-width: 760px) {
  .ea-opts { display: grid; grid-template-columns: 1fr 1fr; }
}

/* ---------------- buttons ------------------------------------ */
.ea-row { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; margin-top: 12px; }
.ea-btn {
  appearance: none; cursor: pointer;
  font-family: var(--ea-font); font-size: .95rem; font-weight: 700;
  border-radius: var(--ea-radius); padding: 12px 20px; min-height: 48px;
  color: var(--ea-on-accent); background: rgba(183,210,224,.92);
  border: 1px solid rgba(255,255,255,.4);
  -webkit-backdrop-filter: blur(6px) saturate(135%);
          backdrop-filter: blur(6px) saturate(135%);
  box-shadow: 0 6px 18px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.5);
  transition: background .16s, transform .16s var(--ea-ease), opacity .2s;
}
.ea-btn:hover { background: rgba(199,222,233,.98); transform: translateY(-1px); }
.ea-btn:disabled { opacity: .38; cursor: default; transform: none; }
.ea-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ea-focus-ring), 0 6px 18px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.5);
}
/* the only safe secondary — the hub's `.btn.secondary` measures 1.38:1 */
.ea-btn.ghost {
  background: transparent; color: var(--ea-muted); font-weight: 600;
  border: 1px solid var(--ea-glass-line); box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.ea-btn.ghost:hover { color: #fff; border-color: var(--ea-glass-line-hi); background: rgba(255,255,255,.03); }
.ea-btn.small { font-size: .88rem; padding: 10px 15px; min-height: 46px; }

/* ---------------- quote-back / summary / next steps ---------- */
.ea-quote {
  margin: 0 0 14px; padding: 13px 15px;
  border-radius: var(--ea-radius); background: var(--ea-glass-bg-hi);
  border: 1px solid var(--ea-glass-line);
  font-size: .95rem; color: var(--ea-ink); line-height: 1.55;
}
.ea-sum { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ea-sum li { display: flex; flex-direction: column; gap: 4px; }
.ea-sum b { font-size: .84rem; font-weight: 600; color: var(--ea-muted); line-height: 1.4; }
.ea-sum span { font-size: 1rem; color: var(--ea-ink); line-height: 1.45; }
.ea-next {
  margin: 0; padding: 15px; border-radius: var(--ea-radius);
  border: 1px solid var(--ea-glass-line); background: rgba(143,180,201,.07);
}
.ea-next > b {
  display: block; color: #fff; font-size: .74rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; margin-bottom: 9px;
}
.ea-steps { margin: 0; padding-left: 20px; font-size: .95rem; color: var(--ea-muted); line-height: 1.6; }
.ea-steps li { margin: 0 0 4px; }
.ea-steps li:last-child { margin-bottom: 0; }

/* ---------------- G7/G8 — the Messages-style composer -------- */
.ea-composer {
  flex: none; display: flex; align-items: flex-end; gap: 9px;
  padding: 9px 0 0; margin: 0 auto; width: 100%; max-width: 620px;
  transition: opacity .3s ease;
}
/* G8 INVERTED from the mockup: during tap questions the composer is
   dimmed but STAYS ENABLED. Typing past the boxes is always allowed. */
.ea-composer.dim { opacity: .88; }
.ea-composer.dim:focus-within { opacity: 1; }
.ea-field {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center;
  border-radius: 22px; padding: 2px 4px 2px 8px;
  background: var(--ea-glass-bg); border: 1px solid var(--ea-glass-line);
  -webkit-backdrop-filter: blur(6px) saturate(135%);
          backdrop-filter: blur(6px) saturate(135%);
  box-shadow: 0 10px 30px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.10);
  transition: border-color .12s, box-shadow .12s;
}
.ea-field:focus-within { border-color: var(--ea-focus-line); box-shadow: 0 0 0 3px var(--ea-focus-ring); }
.ea-input {
  flex: 1 1 auto; width: 100%; resize: none; border: 0; outline: none; background: transparent;
  color: var(--ea-ink); font-family: var(--ea-font);
  font-size: 16px;              /* literal 16px — anything less makes iOS Safari zoom on focus */
  line-height: 1.45;
  padding: 12px 8px; max-height: 132px; min-height: 44px;
}
.ea-input::placeholder { color: var(--ea-placeholder); }
.ea-send {
  appearance: none; cursor: pointer; flex: 0 0 auto;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.4); background: rgba(183,210,224,.92);
  color: var(--ea-on-accent); display: grid; place-items: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.5);
  transition: opacity .15s, transform .15s;
}
.ea-send:hover:not(:disabled) { transform: translateY(-1px); }
.ea-send:disabled { opacity: .32; cursor: default; }
.ea-send:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ea-focus-ring), 0 6px 18px rgba(0,0,0,.28); }
.ea-send svg { width: 20px; height: 20px; display: block; }

/* ------------------------------------------------------------
   G12 — ONE attribute on the root drives the whole camera move.
   Not three independent transitions on three elements.
   ------------------------------------------------------------ */
[data-view="hero"] .ea-say   { min-height: 0; padding: 0; opacity: 0; pointer-events: none; }
[data-view="hero"] .ea-left  { min-height: 0; margin: 0; opacity: 0; }
[data-view="hero"] .ea-dots  { min-height: 0; padding: 0; opacity: 0; }
[data-view="hero"] .ea-composer { display: none; }
[data-view="done"] .ea-composer { display: none; }   /* R047 — terminal. No input still waiting. */
[data-view="done"] .ea-left  { min-height: 0; margin: 0; opacity: 0; }
[data-view="done"] .ea-dots  { min-height: 0; padding: 0; opacity: 0; }
[data-view="done"] .ea-stage { min-height: 120px; flex: 0 1 auto; }

/* ---------------- version history sheet (R061) --------------- */
.ea-sheet { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; justify-content: flex-end; }
/* An author `display` rule beats the browser's own [hidden] rule, so
   without this the closed sheet stays laid out over the whole page and
   swallows every tap. Measured: it blocked the first button on the
   greeting screen. */
.ea-sheet[hidden] { display: none; }
.ea-sheet-back { position: absolute; inset: 0; background: rgba(6,10,14,.6); border: 0; padding: 0; cursor: pointer; }
.ea-sheet-body {
  position: relative; width: 100%; max-width: 620px; margin: 0 auto;
  max-height: 82dvh; display: flex; flex-direction: column;
  border-radius: var(--ea-radius-lg) var(--ea-radius-lg) 0 0;
  background: linear-gradient(rgba(20,26,34,.86), rgba(20,26,34,.86)), var(--ea-glass-bg);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
          backdrop-filter: blur(14px) saturate(135%);
  border: 1px solid var(--ea-glass-line); border-bottom: 0;
  box-shadow: 0 -14px 40px rgba(0,0,0,.42);
  animation: eaSheetUp .32s var(--ea-in) both;
  padding-bottom: max(14px, env(safe-area-inset-bottom));
}
@keyframes eaSheetUp { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.ea-sheet-head {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 16px 18px 10px;
}
.ea-sheet-head b { color: #fff; font-size: 1.05rem; font-weight: 700; }
.ea-x {
  appearance: none; cursor: pointer; width: 44px; height: 44px; flex: none;
  border-radius: 50%; border: 1px solid var(--ea-glass-line);
  background: var(--ea-glass-bg-hi); color: var(--ea-ink);
  display: grid; place-items: center;
}
.ea-x:hover { border-color: var(--ea-glass-line-hi); }
.ea-x:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ea-focus-ring); }
.ea-x svg { width: 15px; height: 15px; display: block; }
.ea-sheet-list { flex: 1 1 auto; overflow-y: auto; padding: 0 18px 18px; }
.ea-ver { padding: 14px 0; border-top: 1px solid var(--ea-glass-line); }
.ea-ver:first-child { border-top: 0; padding-top: 4px; }
.ea-ver-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 7px; }
.ea-ver-h b { color: #fff; font-size: 1rem; font-weight: 700; }
.ea-ver-h span { font-size: .8rem; color: var(--ea-faint); }
.ea-ver ul { margin: 0; padding-left: 18px; font-size: .93rem; color: var(--ea-muted); line-height: 1.55; }
.ea-ver p { margin: 8px 0 0; font-size: .82rem; color: var(--ea-faint); }

/* ---------------- breakpoints -------------------------------- */
/* On a phone the pill has to carry a full Pacific timestamp next to
   the name, so both shed a little weight rather than truncating. */
@media (max-width: 430px) {
  .ea-bar { gap: 8px; }
  .ea-mark { gap: 8px; }
  .ea-mark b { font-size: .84rem; }
  .ea-avatar { width: 28px; height: 28px; }
  .ea-avatar svg { width: 22px; height: 22px; }
  .ea-pill { font-size: .66rem; letter-spacing: 0; text-transform: none; padding: 12px 10px; gap: 6px; }
}

@media (min-width: 760px) {
  .ea-root { padding: 22px 40px 26px; }
  .ea-stage { min-height: 210px; }
  .ea-eleph { width: min(100%, 620px); }
  .ea-say p { font-size: 1.16rem; }
  .ea-in { padding: 24px 26px; }
  .ea-h1 { font-size: 1.85rem; }
  .ea-q  { font-size: 1.28rem; }
  .ea-deck, .ea-composer { max-width: 660px; }
}

/* Past 1000px the same calm stack simply moves beside the elephant,
   so the page fills the width instead of leaving half of it empty. */
@media (min-width: 1000px) {
  .ea-root {
    display: grid;
    grid-template-columns: 1.02fr 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    column-gap: clamp(28px, 4vw, 72px);
    padding: 22px clamp(32px, 4vw, 72px) 28px;
  }
  .ea-bar   { grid-column: 1 / 3; grid-row: 1; }
  .ea-stage { grid-column: 1; grid-row: 2; min-height: 0; padding: 0; }
  .ea-side  { grid-column: 2; grid-row: 2; justify-content: center; min-height: 0; }
  .ea-eleph { width: 100%; height: 100%; }
  .ea-say   { justify-content: flex-start; }
  .ea-say p { max-width: none; }
  .ea-left  { text-align: left; }
  .ea-dots  { justify-content: flex-start; }
  .ea-deck, .ea-composer { margin-left: 0; margin-right: 0; }
  [data-view="hero"] .ea-say, [data-view="hero"] .ea-left, [data-view="hero"] .ea-dots { opacity: 0; }
  [data-view="done"] .ea-stage { min-height: 0; }
}
@media (min-width: 1400px) { .ea-deck, .ea-composer { max-width: 700px; } }
@media (max-height: 760px) and (min-width: 760px) { .ea-eleph { width: min(100%, 500px); } }

/* ------------------------------------------------------------
   R007 — reduced motion. Everything settles into a static,
   calm elephant in a sensible resting pose: eyes open, trunk
   down, no bubbles. This block also neutralises the smooth
   scroll behaviour inherited from the hub stylesheet.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .ea-btn:hover, .ea-send:hover:not(:disabled) { transform: none; }
  .eDots { opacity: 0 !important; }
  .is-thinking .eTrunkCurl { transform: none; }
  .eLid { transform: scaleY(0) !important; }
  .ePupil { transform: none !important; }
  .eBody, .eEarL, .eEarR, .eTrunkSway, .eGlow { animation: none !important; }
}

/* ============================================================
   THE WALK — ported from the guided-path concept, unchanged in
   look. Hidden until the tap questions are done; it appears with
   a wiggle and the elephant walks it one stop at a time.
   ============================================================ */
.ea-trail { flex: none; width: 100%; max-width: 1000px; margin: 2px auto 6px; }
.ea-trail[hidden] { display: none !important; }
.ea-trail.is-new { animation: trailIn .9s cubic-bezier(.34,1.3,.5,1) both; }
@keyframes trailIn {
  0%   { opacity: 0; transform: translateY(10px) scale(.965) rotate(-1.1deg); }
  45%  { opacity: 1; transform: translateY(0)    scale(1.012) rotate(.9deg); }
  70%  { transform: rotate(-.55deg); }
  85%  { transform: rotate(.3deg); }
  100% { opacity: 1; transform: none; }
}
.ea-trail-svg { display: block; width: 100%; height: auto; overflow: visible; }
.trail-base { fill: none; stroke: rgba(255,255,255,.13); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 9; }
.trail-done {
  fill: none; stroke: var(--ea-accent); stroke-width: 3.4; stroke-linecap: round;
  transition: stroke-dashoffset 1.05s cubic-bezier(.45,.05,.25,1);
}
.stop-dot  { fill: rgba(20,28,36,.9); stroke: rgba(255,255,255,.22); stroke-width: 2; transition: fill .35s, stroke .35s; }
.stop-dot.done { fill: var(--ea-accent); stroke: var(--ea-accent); }
.stop-dot.here { fill: #fff; stroke: var(--ea-accent-hi); stroke-width: 3; }
.stop-halo { fill: none; stroke: var(--ea-accent); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.stop-halo.here { animation: halo 2.2s ease-out infinite; }
@keyframes halo { 0% { opacity: .55; transform: scale(.6); } 70%,100% { opacity: 0; transform: scale(1.9); } }
.trail-cap { fill: var(--ea-muted); font-size: 12px; font-weight: 600; letter-spacing: .06em; }
.flag-pole { stroke: rgba(255,255,255,.5); stroke-width: 3; stroke-linecap: round; }
.flag-cloth { fill: var(--ea-accent-hi); transform-box: fill-box; transform-origin: 0% 50%; animation: wave 2.6s ease-in-out infinite; }
@keyframes wave { 0%,100% { transform: skewY(0deg) scaleX(1); } 50% { transform: skewY(-5deg) scaleX(.9); } }
.walker { transition: transform 1.05s cubic-bezier(.45,.05,.25,1); }
.walker-body { fill: #93b3c8; }
.walker-dark { fill: #6d8ba3; }
.walker-leg  { fill: #7f9db2; transform-box: fill-box; transform-origin: 50% 0%; }
.walking .walker-leg.a, .walking .walker-leg.c { animation: step .38s ease-in-out infinite alternate; }
.walking .walker-leg.b, .walking .walker-leg.d { animation: step .38s ease-in-out infinite alternate-reverse; }
@keyframes step { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }
.walking .walker-inner { animation: bob .38s ease-in-out infinite alternate; }
@keyframes bob { from { transform: translateY(0); } to { transform: translateY(-2px); } }
.trail-note {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 2px; font-size: .82rem; color: var(--ea-muted);
}
.trail-note b { color: var(--ea-accent-hi); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .ea-trail.is-new { animation: none; }
  .flag-cloth, .stop-halo.here { animation: none; }
  .trail-done, .walker { transition: none; }
}

/* ============================================================
   PROFILE MENU — top right. Opens on hover and on tap.
   ============================================================ */
.ea-headright { display: flex; align-items: center; gap: 10px; }
.ea-profile { position: relative; }
.ea-avatar {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  cursor: pointer; color: var(--ea-ink);
  background: var(--ea-glass-bg); border: 1px solid var(--ea-glass-line);
  -webkit-backdrop-filter: blur(6px) saturate(135%);
          backdrop-filter: blur(6px) saturate(135%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  transition: border-color .16s, background .16s;
}
.ea-avatar svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.ea-avatar:hover { border-color: var(--ea-accent); background: var(--ea-glass-bg-hi); }
.ea-avatar:focus-visible { outline: none; border-color: var(--ea-focus-line); box-shadow: 0 0 0 3px var(--ea-focus-ring); }
.ea-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 40;
  min-width: 218px; padding: 6px; display: grid; gap: 2px;
  border-radius: 16px;
  background: rgba(24,31,40,.86); border: 1px solid var(--ea-glass-line-hi);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
          backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 18px 44px rgba(0,0,0,.44), inset 0 1px 0 rgba(255,255,255,.10);
  animation: menuIn .18s var(--ea-ease) both;
}
.ea-menu[hidden] { display: none !important; }
@keyframes menuIn { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
.ea-menu-item {
  width: 100%; text-align: left; cursor: pointer;
  padding: 11px 13px; border-radius: 11px; border: 0; background: transparent;
  font-family: var(--ea-font); font-size: 15px; color: var(--ea-ink);
}
.ea-menu-item:hover { background: var(--ea-glass-bg-hi); color: #fff; }
.ea-menu-item:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ea-focus-ring); }

/* ============================================================
   THE END — a small bloom behind the summary, a Done button,
   and a way to say the report missed something.
   ============================================================ */
.ea-bloom { position: relative; height: 74px; margin: 2px 0 6px; }
.ea-bloom i {
  position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4px 0 0 -4px;
  border-radius: 50%; background: var(--ea-accent-hi); opacity: 0;
  animation: bloom 1.5s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes bloom {
  0%   { opacity: 0; transform: translate(0,0) scale(.3); }
  22%  { opacity: .95; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.5); }
}
.ea-check {
  position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px;
  border-radius: 50%; display: grid; place-items: center;
  background: var(--ea-glass-bg-hi); border: 1px solid var(--ea-accent);
  animation: checkIn .7s cubic-bezier(.34,1.4,.5,1) both;
}
@keyframes checkIn { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: scale(1); } }
.ea-check svg { width: 26px; height: 26px; fill: none; stroke: var(--ea-accent-hi); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ea-check path { stroke-dasharray: 30; stroke-dashoffset: 30; animation: draw .5s .35s ease-out forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .ea-bloom i, .ea-check, .ea-check path, .ea-menu { animation: none; }
  .ea-bloom i { opacity: 0; }
  .ea-check path { stroke-dashoffset: 0; }
}

/* ============================================================
   THE SEND-OFF — space and confetti, on screen only for as long
   as the end report takes to come back.
   ============================================================ */
.ea-cosmos {
  position: fixed; inset: 0; z-index: 60;
  background:
    radial-gradient(900px 700px at 22% 18%, rgba(88,64,150,.42) 0%, transparent 62%),
    radial-gradient(760px 620px at 78% 72%, rgba(28,96,140,.40) 0%, transparent 60%),
    radial-gradient(600px 500px at 60% 20%, rgba(150,72,120,.24) 0%, transparent 58%),
    linear-gradient(160deg, #05070d 0%, #080b16 55%, #0a0d18 100%);
  animation: cosmosIn .5s ease both;
}
.ea-cosmos[hidden] { display: none !important; }
.ea-cosmos.is-out { animation: cosmosOut .55s ease both; }
@keyframes cosmosIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes cosmosOut { from { opacity: 1; } to { opacity: 0; } }
.ea-cosmos canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ea-cosmos-line {
  position: absolute; left: 0; right: 0; bottom: 14%;
  margin: 0; text-align: center;
  font-size: 1.06rem; font-weight: 500; letter-spacing: .01em;
  color: rgba(238,242,245,.92);
  text-shadow: 0 2px 18px rgba(0,0,0,.6);
  animation: cosmosPulse 2.6s ease-in-out infinite;
}
@keyframes cosmosPulse { 0%,100% { opacity: .72; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .ea-cosmos, .ea-cosmos.is-out, .ea-cosmos-line { animation: none; }
}