/* ═══════════════════════════════════════════════════════════════
   AURORA — a companion that happens to organize your life.
   The room is the interface. Objects are the menu.
   Every motion is slow, soft, grounded.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --ease-soft: cubic-bezier(0.25, 0.8, 0.3, 1);
  --font-body: "Avenir Next", "Segoe UI", -apple-system, sans-serif;
  --font-warm: Georgia, "Times New Roman", serif;
  --font-hand: "Bradley Hand", "Segoe Print", "Comic Sans MS", cursive;
}

/* ── LIGHT: morning studio ── */
body[data-theme="light"] {
  --wall-hi: #f6efe4;  --wall-lo: #ede2d2;
  --floor-hi: #d9c3a4; --floor-lo: #c9ad87;
  --baseboard: #b99d79;
  --sky-top: #b8d8e8;  --sky-mid: #d8e6ea;  --sky-low: #f6dfc4;
  --sun: #ffd98a;      --sun-op: 1;         --stars-op: 0;
  --cloud: #ffffffcc;
  --hills-far: #b9c9b4; --hills-near: #a3bb9a;
  --frame-dark: #8a6f52; --frame-sill: #9c8060;
  --wood: #b08d62;     --wood-dk: #96754e;
  --plant-a: #7fa876;  --plant-b: #93b77f;
  --pot-a: #c88d6b;    --pot-b: #b9a08a;
  --book-1: #c96f5e;   --book-2: #dfa960;  --book-3: #7d9d8e;
  --book-4: #9a86ad;   --book-5: #d6b98c;  --book-new: #e2a25c;
  --object-a: #d9c48f;
  --lamp-glow: #ffd9a0; --lamp-shade: #d99a63; --lamp-stem: #9a7b58; --lamp-bulb: #ffe9c2;
  --mug: #b96f5e;      --steam: #ffffffbb;
  --rug: #d8b9a6;      --rug-line: #b98f77;
  --mote: #e8d9b8;
  --window-cast: #ffe9bf;
  --fog: #dfe8ec;      --fog-drip: #f2f7f9;

  --blanket: #d9a08a;  --blanket-2: #e2b39e; --blanket-fold: #c68a74;
  --slipper: #a8b4c0;  --slipper-2: #93a1b0;
  --pack: #7d94a8;     --pack-2: #6b8296;
  --nb-cover: #b96f5e; --nb-pages: #fdf8ec;  --nb-band: #8a5f57;
  --pencil: #e8b04d;   --pencil-tip: #8a6f52; --pencil-eraser: #e09a90;
  --stain: #a9855e;
  --hook: #9a7b58;     --hp-band: #7a6a5c;   --hp-cup: #5f5248;
  --note-1: #f5d76e;   --note-2: #a8d8b9;    --note-3: #f0b8b0;  --note-ink: #6b5f4e;
  --scope: #c9a06b;    --scope-rim: #a9805a; --scope-leg: #96754e;
  --can: #8fa8a0;      --drop: #9fc4d8;
  --au-book-cover: #7d9d8e;

  --au-1: #e9ead0; --au-2: #aabf92; --au-3: #6f9070;
  --au-halo: #ffdca8; --au-core: #ffedc9; --au-eye: #3f4436; --au-cheek: #d9a878;
  --au-spark: #fff3d6; --au-shadow: #8a6f52;

  --ink: #4a4238;      --ink-soft: #7d7264;
  --panel: #fffdf8f2;  --panel-edge: #e5d9c5;
  --paper: #fdf8ec;    --paper-line: #e2d5bb; --paper-ink: #4f4536;
  --btn-bg: #e9d9be;   --btn-ink: #574a37;
  --arc-track: #e5d9c5; --arc-fill: #d9a565;
  --veil: rgba(38, 34, 52, 0);
}

/* ── DARK: evening studio ── */
body[data-theme="dark"] {
  --wall-hi: #2d2c3e;  --wall-lo: #262436;
  --floor-hi: #43364a; --floor-lo: #382d40;
  --baseboard: #4d3f55;
  --sky-top: #1c2440;  --sky-mid: #2c3358;  --sky-low: #4a3f66;
  --sun: #e8e4d0;      --sun-op: 0.9;       --stars-op: 1;
  --cloud: #4a537799;
  --hills-far: #33395a; --hills-near: #2b3050;
  --frame-dark: #4f4258; --frame-sill: #5b4c64;
  --wood: #6b5877;     --wood-dk: #57466a;
  --plant-a: #4f7263;  --plant-b: #5d8370;
  --pot-a: #8a5f57;    --pot-b: #6f5f66;
  --book-1: #96574e;   --book-2: #a87f4d;  --book-3: #567269;
  --book-4: #6f6187;   --book-5: #9a8668;  --book-new: #b3803f;
  --object-a: #9a8a63;
  --lamp-glow: #ffc478; --lamp-shade: #b37a4d; --lamp-stem: #6f5a44; --lamp-bulb: #ffddac;
  --mug: #96574e;      --steam: #ffffff77;
  --rug: #55425a;      --rug-line: #6f5776;
  --mote: #8a7f9a;
  --window-cast: #8ea0d8;
  --fog: #3c4358;      --fog-drip: #55617a;

  --blanket: #8a5f66;  --blanket-2: #9a6f76; --blanket-fold: #75505a;
  --slipper: #5d6678;  --slipper-2: #4d5666;
  --pack: #566378;     --pack-2: #47536a;
  --nb-cover: #96574e; --nb-pages: #cfc4ae;  --nb-band: #6f4a44;
  --pencil: #c9963f;   --pencil-tip: #6f5a44; --pencil-eraser: #b3807a;
  --stain: #1f1926;
  --hook: #6f5a44;     --hp-band: #6f6478;   --hp-cup: #57506a;
  --note-1: #c9ad57;   --note-2: #7fa88f;    --note-3: #b3878a;  --note-ink: #3a3346;
  --scope: #a9855a;    --scope-rim: #8a6a48; --scope-leg: #57466a;
  --can: #5d7a72;      --drop: #8ab8d8;
  --au-book-cover: #567269;

  --au-1: #e2e4b8; --au-2: #93ad7c; --au-3: #5a7a5e;
  --au-halo: #ffc478; --au-core: #ffe4ae; --au-eye: #333a2e; --au-cheek: #c98f66;
  --au-spark: #efe9d0; --au-shadow: #14121f;

  --ink: #e8e0d4;      --ink-soft: #a89dab;
  --panel: #2f2b3ef0;  --panel-edge: #4a4258;
  --paper: #d8cdb8;    --paper-line: #bfb298; --paper-ink: #453c2e;
  --btn-bg: #574d6e;   --btn-ink: #efe8f4;
  --arc-track: #4a4258; --arc-fill: #d9a565;
  --veil: rgba(20, 18, 32, 0);
}

/* ── base ── */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--wall-lo);
  transition: background 1.4s var(--ease-soft);
  -webkit-font-smoothing: antialiased;
}
.hidden { display: none !important; }

/* ══════════ STAGE / ROOM ══════════ */
#stage { position: fixed; inset: 0; }
#room { width: 100%; height: 100%; display: block; }
#room rect, #room path, #room circle, #room ellipse, #room line {
  transition: fill 1.4s var(--ease-soft), stroke 1.4s var(--ease-soft), opacity 1.4s var(--ease-soft);
}

/* objects you can touch — brighten softly on hover */
.hot { cursor: pointer; pointer-events: bounding-box; transition: filter 0.5s var(--ease-soft); }
.hot:hover { filter: brightness(1.13) saturate(1.06); }

/* an object inviting you (notebook to write · lamp to begin) */
.hot.inviting { animation: invite-glow 2.6s ease-in-out infinite; }
@keyframes invite-glow {
  0%, 100% { filter: brightness(1) drop-shadow(0 0 0px var(--lamp-glow)); }
  50% { filter: brightness(1.3) drop-shadow(0 0 9px var(--lamp-glow)); }
}

#veil {
  position: absolute; inset: 0; pointer-events: none;
  background: var(--veil);
  transition: background 2.2s var(--ease-soft);
}
/* calm, not gloom — the dim stays gentle and the lamp does the rest */
body[data-mode="focus"] #veil { background: rgba(24, 22, 38, 0.2); }
body[data-theme="dark"][data-mode="focus"] #veil { background: rgba(10, 9, 18, 0.28); }

/* clouds drift */
.cloud { animation: drift 70s linear infinite; }
.cloud-a { animation-duration: 85s; }
.cloud-b { animation-name: drift-b; animation-duration: 65s; animation-delay: -30s; }
@keyframes drift {
  from { transform: translate(200px, 180px); }
  50%  { transform: translate(560px, 170px); }
  to   { transform: translate(200px, 180px); }
}
@keyframes drift-b {
  from { transform: translate(520px, 240px); }
  50%  { transform: translate(280px, 250px); }
  to   { transform: translate(520px, 240px); }
}

/* plants sway */
.leaf { transform-box: fill-box; transform-origin: bottom center; }
.sway-a { animation: sway 6s ease-in-out infinite; }
.sway-b { animation: sway 7.5s ease-in-out infinite; animation-delay: -2s; }
.sway-c { animation: sway 8.5s ease-in-out infinite; animation-delay: -4s; }
@keyframes sway { 0%,100% { transform: rotate(-2.4deg); } 50% { transform: rotate(2.4deg); } }

/* the mug warms when she notices it with you */
body.mug-warm #mug { filter: brightness(1.3) drop-shadow(0 0 7px var(--lamp-glow)); }

/* steam */
.steam { animation: steam 4s ease-in-out infinite; opacity: 0.8; }
.steam-2 { animation-delay: -2s; }
@keyframes steam {
  0% { transform: translateY(0); opacity: 0; }
  30% { opacity: 0.8; }
  100% { transform: translateY(-10px); opacity: 0; }
}

/* dust motes */
.mote { animation: mote 11s ease-in-out infinite; }
.m2 { animation-delay: -3s; } .m3 { animation-delay: -6s; } .m4 { animation-delay: -8.5s; }
@keyframes mote {
  0%, 100% { transform: translate(0, 0); opacity: 0.15; }
  25% { opacity: 0.6; }
  50% { transform: translate(14px, -26px); opacity: 0.35; }
  75% { opacity: 0.55; }
}

/* rain — focus mode */
.rain { opacity: 0; transition: opacity 2.5s var(--ease-soft); }
body[data-mode="focus"] .rain { opacity: 1; }
.rain line { animation: rainfall 1.1s linear infinite; }
.rain line:nth-child(2n) { animation-delay: -0.4s; animation-duration: 1.3s; }
.rain line:nth-child(3n) { animation-delay: -0.8s; animation-duration: 0.95s; }
@keyframes rainfall {
  from { transform: translateY(-40px); opacity: 0; }
  20% { opacity: 1; }
  to { transform: translateY(300px); opacity: 0; }
}

/* fog on the glass — focus mode */
.fog { opacity: 0; transition: opacity 3s var(--ease-soft); }
body[data-mode="focus"] .fog { opacity: 0.4; }

/* lamp breathes; leans in during focus */
.lamp-halo, .lamp-pool { animation: lamp-breathe 5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; transition: transform 2.2s var(--ease-soft); }
@keyframes lamp-breathe { 0%,100% { opacity: 0.75; } 50% { opacity: 1; } }
body[data-mode="focus"] .lamp-halo { transform: scale(1.4); animation-duration: 4s; }
body[data-mode="focus"] .lamp-pool { transform: scale(1.2); }

/* watering-can life — she brings it to whichever plant needs it */
#wcan { transform: translate(596px, 462px); transition: transform 1.5s var(--ease-soft); }
body.can-left #wcan { transform: translate(322px, 462px); }
#wcan-tilt { transform-box: fill-box; transform-origin: bottom left; transition: transform 1.2s var(--ease-soft); }
body.watering #wcan-tilt { transform: rotate(-18deg); }
.wdrop { opacity: 0; }
body.watering .wdrop { animation: drip 1.3s ease-in infinite; }
body.watering .d2 { animation-delay: -0.45s; }
body.watering .d3 { animation-delay: -0.9s; }
@keyframes drip {
  0% { opacity: 0; transform: translate(-16px, -4px); }
  25% { opacity: 0.9; }
  100% { opacity: 0; transform: translate(-26px, 14px); }
}

/* the plant that grows */
.grow-leaves { transform-box: fill-box; transform-origin: bottom center; transform: scale(0.15); opacity: 0;
  transition: transform 2.6s var(--ease-soft), opacity 1.8s var(--ease-soft); }
body.grown .grow-leaves { transform: scale(1); opacity: 1; }

/* after she waters it, one leaf lifts — and stays lifted. no narration. */
body.leaf-lifted #lift-leaf {
  animation: none;
  transform: rotate(-7deg) scale(1.07);
  transition: transform 2.2s var(--ease-soft);
}
body.leaf-lifted-left #lift-leaf-left {
  animation: none;
  transform: rotate(-6deg) scale(1.05);
  transition: transform 2.2s var(--ease-soft);
}

/* the book that arrives */
.new-book { transform: translateY(-46px); opacity: 0; transition: transform 1.6s var(--ease-soft), opacity 1.2s var(--ease-soft); }
body.book-placed .new-book { transform: translateY(0); opacity: 1; }

/* ══════════ AURORA — grounded, alive ══════════ */
#aurora {
  position: absolute;
  width: 150px; /* JS sets exact width per spot */
  transform: translate(-50%, -100%);
  transition: left 1.15s var(--ease-soft), top 1.15s var(--ease-soft), width 1.15s var(--ease-soft);
  cursor: pointer;
  z-index: 5;
}
#aurora.no-trans { transition: none; }
#aurora-svg { width: 100%; height: auto; overflow: visible; display: block; }

/* poses — she rests ON things, she does not hover */
#au-pose { transform-box: fill-box; transform-origin: center 92%; transition: transform 0.9s var(--ease-soft); transform: translateY(7px); }
#aurora.pose-lean #au-pose { transform: translateY(7px) rotate(-8deg); }
#aurora.pose-tend #au-pose { transform: translateY(7px) rotate(-7deg); }
#aurora.pose-curl #au-pose { transform: translateY(13px) scale(1.07, 0.86); }

/* hop between spots (JS adds .hopping during moves) */
#aurora.hopping #au-pose { animation: hop 1.15s var(--ease-soft); }
@keyframes hop {
  0% { transform: translateY(7px); }
  22% { transform: translateY(-26px); }
  45% { transform: translateY(5px); }
  62% { transform: translateY(-14px); }
  82% { transform: translateY(6px); }
  100% { transform: translateY(7px); }
}
#aurora.hopping #au-shadow { animation: shadow-hop 1.15s var(--ease-soft); }
@keyframes shadow-hop {
  0%, 100% { transform: scaleX(1); opacity: 0.35; }
  22% { transform: scaleX(0.72); opacity: 0.18; }
  62% { transform: scaleX(0.85); opacity: 0.25; }
}
#au-shadow { transform-box: fill-box; transform-origin: center; }

/* breathing */
.au-breathe { transform-box: fill-box; transform-origin: center 70%; animation: breathe 4.6s ease-in-out infinite; }
@keyframes breathe { 0%,100% { transform: scale(1, 1); } 50% { transform: scale(1.025, 0.985); } }
#aurora.state-focusing .au-breathe { animation-duration: 7s; }
#aurora.state-sleeping .au-breathe { animation-duration: 8s; }

.au-halo { animation: halo 4.6s ease-in-out infinite; }
@keyframes halo { 0%,100% { opacity: 0.75; } 50% { opacity: 1; } }

/* her inner light breathes with her — a small lamp of her own */
.au-core { animation: core-breathe 4.6s ease-in-out infinite; }
@keyframes core-breathe { 0%,100% { opacity: 0.55; } 50% { opacity: 0.95; } }
#aurora.state-focusing .au-core { animation-duration: 7s; }
#aurora.state-sleeping .au-core { animation-duration: 8s; opacity: 0.4; }
#aurora.state-celebrating .au-core, #aurora.state-happy .au-core { animation-duration: 2.2s; }
#aurora.calm .au-core { animation-duration: 8.5s; }
#aurora.calm .au-breathe { animation-duration: 7.5s; }

/* the posture-tip: her whole mood, readable in silhouette */
#au-tip { transform-box: fill-box; transform-origin: bottom center; transition: transform 0.9s var(--ease-soft); }
#aurora.state-sleeping #au-tip { transform: rotate(34deg) scale(0.82); }
#aurora.state-focusing #au-tip { transform: rotate(16deg) scale(0.92); }
#aurora.calm #au-tip { transform: rotate(10deg); }
#aurora.state-listening #au-tip { transform: rotate(-8deg) scale(1.04); }
#aurora.state-happy #au-tip, #aurora.state-celebrating #au-tip { transform: rotate(-14deg) scale(1.14); }

/* stretch — one-shot when waking / noticing you */
#aurora.stretching #au-pose { animation: stretch 1.5s var(--ease-soft); }
@keyframes stretch {
  0% { transform: translateY(13px) scale(1.07, 0.86); }
  45% { transform: translateY(2px) scale(0.94, 1.12); }
  70% { transform: translateY(9px) scale(1.03, 0.97); }
  100% { transform: translateY(7px) scale(1, 1); }
}

/* celebrating — happy grounded hops */
#aurora.state-celebrating #au-pose { animation: bounce-happy 1.5s ease-in-out infinite; }
@keyframes bounce-happy {
  0%, 100% { transform: translateY(7px) rotate(-1.5deg); }
  30% { transform: translateY(-12px) rotate(1.5deg); }
  55% { transform: translateY(6px) rotate(0deg); }
  75% { transform: translateY(-5px) rotate(-1deg); }
}

/* eyes */
#aurora .pupil, #aurora .glint { transition: opacity 0.3s; }
#aurora .crescent { transition: opacity 0.3s; }
#aurora .eye { transition: transform 0.7s var(--ease-soft); }
#aurora .pupil { transform-box: fill-box; transform-origin: center; }
#aurora.blinking .pupil { animation: blink 0.18s ease-in-out; }
@keyframes blink { 0%,100% { transform: scaleY(1); } 50% { transform: scaleY(0.08); } }

#aurora.state-sleeping .pupil { transform: scaleY(0.08); }
#aurora.state-sleeping .glint { opacity: 0; }
#aurora.state-sleeping .au-zzz { opacity: 1; }

#aurora.state-celebrating .pupil, #aurora.state-happy .pupil { opacity: 0; }
#aurora.state-celebrating .glint, #aurora.state-happy .glint { opacity: 0; }
#aurora.state-celebrating .crescent, #aurora.state-happy .crescent { opacity: 1 !important; }

/* her little book — reading routine & focus */
.au-book { opacity: 0; transition: opacity 0.9s var(--ease-soft); }
#aurora.state-reading .au-book, #aurora.state-focusing .au-book { opacity: 1; }

.au-zzz { opacity: 0; transition: opacity 0.8s; }
.au-zzz text { animation: zfloat 3.4s ease-in-out infinite; }
.au-zzz text:last-child { animation-delay: -1.7s; }
@keyframes zfloat { 0%,100% { transform: translateY(0); opacity: 0.2; } 50% { transform: translateY(-5px); opacity: 0.6; } }

.spark { animation: sparkle 6s ease-in-out infinite; }
.s2 { animation-delay: -2s; } .s3 { animation-delay: -4s; }
@keyframes sparkle {
  0%, 100% { opacity: 0; transform: translate(0,0); }
  40% { opacity: 0.9; }
  70% { opacity: 0.3; transform: translate(-4px, -14px); }
}

/* listening lean toward you */
#aurora.state-listening #au-pose { transform: translateY(7px) rotate(2.6deg); }

/* ══════════ SPEECH ══════════ */
#speech {
  position: absolute;
  max-width: min(270px, 68vw);
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 16px 16px 16px 5px;
  padding: 9px 14px;
  font-family: var(--font-warm);
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--ink);
  opacity: 0.96;
  box-shadow: 0 4px 18px rgba(40, 30, 20, 0.1);
  z-index: 6;
  animation: speech-in 0.7s var(--ease-soft);
  transition: left 0.55s var(--ease-soft), top 0.55s var(--ease-soft), background 1.4s, border-color 1.4s;
}
/* bubble sits to her upper-left → tail points down-right at her */
#speech.flipped { border-radius: 16px 16px 5px 16px; }
@keyframes speech-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

#typing { display: flex; gap: 5px; padding: 4px 2px; }
#typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-soft); opacity: 0.5;
  animation: tdot 1.2s ease-in-out infinite; }
#typing span:nth-child(2) { animation-delay: 0.18s; }
#typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes tdot { 0%,100% { transform: translateY(0); opacity: 0.35; } 50% { transform: translateY(-5px); opacity: 0.9; } }

/* ══════════ ARRIVAL ══════════
   she breathes on the blanket in a hushed room. you come in —
   the light changes, one eye opens, it finds you, her glow warms,
   she sits up slowly and leans toward you. no interface until after. */
#intro-overlay { position: fixed; inset: 0; z-index: 20; cursor: pointer; }
#stage { transition: filter 3s var(--ease-soft); }
body[data-mode="intro"] #stage { filter: brightness(0.78) saturate(0.85); }
body[data-mode="intro"].arrived #stage { filter: brightness(1) saturate(1); }

/* one eye opens */
#aurora.state-sleeping.peek .eye-l .pupil { transform: scaleY(1); }
#aurora.state-sleeping.peek .eye-l .glint { opacity: 0.9; }
#aurora.peek .au-zzz { opacity: 0 !important; }

/* recognition — her glow warms before anything else moves */
#aurora.glow-warm .au-core { opacity: 1 !important; animation-duration: 3.2s; }
#aurora.glow-warm .au-halo { opacity: 1 !important; }

/* the sit-up happens in slow time */
#aurora.slow-pose #au-pose { transition: transform 2.4s var(--ease-soft); }
#aurora.slow-pose #au-tip { transition: transform 2.4s var(--ease-soft); }

/* leaning toward you */
#aurora.pose-attend #au-pose { transform: translateY(6px) rotate(2.5deg) scale(1.05); }
#intro-hint {
  position: absolute; bottom: 8vh; left: 50%; transform: translateX(-50%);
  font-size: 13.5px; letter-spacing: 0.14em; color: var(--ink-soft);
  animation: hint-pulse 2.6s ease-in-out infinite;
}
@keyframes hint-pulse { 0%,100% { opacity: 0.35; } 50% { opacity: 0.9; } }

#name-ask {
  position: fixed; z-index: 21;
  left: 50%; bottom: max(10vh, 74px); transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 12px; align-items: center;
  animation: speech-in 0.8s var(--ease-soft);
}
#name-input {
  width: min(320px, 80vw);
  background: var(--panel); border: 1px solid var(--panel-edge);
  border-radius: 999px; padding: 13px 22px;
  font-family: var(--font-warm); font-size: 16px; color: var(--ink);
  outline: none; text-align: center;
  box-shadow: 0 6px 28px rgba(40, 30, 20, 0.1);
}
#name-input:focus { border-color: var(--arc-fill); }
.name-actions { display: flex; gap: 10px; }

/* ══════════ SHARED CONTROLS ══════════ */
.soft-btn {
  font-family: var(--font-body); font-size: 14.5px; font-weight: 600;
  color: var(--btn-ink); background: var(--btn-bg);
  border: none; border-radius: 999px; padding: 11px 22px;
  cursor: pointer; transition: transform 0.25s var(--ease-soft), box-shadow 0.25s, background 1.4s;
  box-shadow: 0 3px 14px rgba(40, 30, 20, 0.12);
}
.soft-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(40, 30, 20, 0.16); }
.soft-btn:active { transform: translateY(0); }
.ghost-btn {
  font-family: var(--font-body); font-size: 13.5px;
  color: var(--ink-soft); background: transparent;
  border: none; border-radius: 999px; padding: 11px 16px;
  cursor: pointer; transition: color 0.3s;
}
.ghost-btn:hover { color: var(--ink); }
.link-btn { background: none; border: none; color: var(--ink-soft); text-decoration: underline; cursor: pointer; font-size: inherit; font-family: inherit; }

/* ══════════ HOME UI (barely there) ══════════ */
#home-ui { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
#home-ui > * { pointer-events: auto; }

/* ── the open notebook ── */
#notebook-panel {
  position: absolute; left: 50%; bottom: max(24px, env(safe-area-inset-bottom, 0px) + 18px);
  transform: translateX(-50%);
  width: min(430px, calc(100vw - 28px));
  background: var(--paper);
  border-radius: 6px 14px 14px 6px;
  padding: 20px 26px 18px 34px;
  box-shadow: 0 16px 44px rgba(30, 22, 14, 0.3);
  color: var(--paper-ink);
  font-family: var(--font-hand);
  animation: nb-open 0.55s var(--ease-soft);
  background-image:
    repeating-linear-gradient(transparent, transparent 27px, var(--paper-line) 27px, var(--paper-line) 28px);
  background-position: 0 12px;
}
#notebook-panel::before { /* spiral margin */
  content: ""; position: absolute; left: 14px; top: 8px; bottom: 8px; width: 1.5px;
  background: var(--nb-cover); opacity: 0.35;
}
@keyframes nb-open {
  from { opacity: 0; transform: translate(-50%, 26px) scale(0.94); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
#nb-close {
  position: absolute; top: 6px; right: 10px;
  background: none; border: none; font-size: 19px; color: var(--paper-ink);
  opacity: 0.4; cursor: pointer; font-family: var(--font-body);
}
#nb-close:hover { opacity: 0.9; }
/* margin notes in her hand — never a checklist */
.nb-head { font-size: 12px; letter-spacing: 0.2em; text-transform: lowercase; opacity: 0.45; margin-bottom: 2px; font-style: italic; }
#nb-today { list-style: none; margin-bottom: 4px; }
#nb-today li { font-size: 17px; line-height: 28px; }
#nb-today li::before { content: "— "; opacity: 0.45; }
#nb-today li.done {
  opacity: 0.42;
  text-decoration: line-through;
  text-decoration-style: wavy;
  text-decoration-thickness: 1px;
}
#nb-today .nb-empty { opacity: 0.5; font-size: 15.5px; font-style: italic; }
#nb-today .nb-empty::before { content: ""; }

/* the one small step, written into the page */
#nb-step { font-size: 17.5px; line-height: 28px; margin-bottom: 2px; }
.nb-step-label { opacity: 0.55; font-style: italic; }
#nb-step-text { text-decoration: underline; text-decoration-color: var(--arc-fill); text-underline-offset: 4px; }

#nb-prompts { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 2px 0 4px; }
.nb-prompt {
  background: none; border: none; cursor: pointer;
  font-family: var(--font-hand); font-size: 14.5px; color: var(--paper-ink);
  opacity: 0.55; text-decoration: underline; text-decoration-style: wavy; text-underline-offset: 3px;
  padding: 2px 0; transition: opacity 0.3s;
}
.nb-prompt:hover { opacity: 1; }

.nb-writeline { display: flex; align-items: center; gap: 8px; }
#say {
  flex: 1; border: none; background: transparent; outline: none;
  font-family: var(--font-hand); font-size: 17.5px; color: var(--paper-ink);
  line-height: 28px; caret-color: var(--nb-cover);
}
#say::placeholder { color: var(--paper-ink); opacity: 0.4; }

/* ══════════ FOCUS — a page, not a timer ══════════ */
#focus-ui {
  position: fixed; inset: 0; z-index: 10; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding-bottom: max(26px, env(safe-area-inset-bottom, 0px) + 20px);
  gap: 10px;
}
#focus-paper {
  pointer-events: auto; cursor: pointer;
  width: min(340px, calc(100vw - 48px));
  background: var(--paper);
  border-radius: 4px 10px 10px 4px;
  padding: 14px 20px 12px 26px;
  box-shadow: 0 10px 30px rgba(30, 22, 14, 0.28);
  font-family: var(--font-hand); font-size: 17px; line-height: 1.4;
  color: var(--paper-ink);
  transform: rotate(-0.8deg);
  animation: speech-in 1.2s var(--ease-soft);
  background-image:
    repeating-linear-gradient(transparent, transparent 26px, var(--paper-line) 26px, var(--paper-line) 27px);
  position: relative;
}
#focus-paper::before {
  content: ""; position: absolute; left: 12px; top: 6px; bottom: 6px; width: 1.5px;
  background: var(--nb-cover); opacity: 0.3;
}
#focus-task::before { content: "just this — "; opacity: 0.5; font-style: italic; }
.focus-hint {
  font-size: 11px; letter-spacing: 0.06em; color: #cfc8d8; opacity: 0.4;
  font-family: var(--font-body);
}

/* ══════════ CORNER — nearly invisible until wanted ══════════ */
#corner {
  position: fixed; top: 16px; right: 16px; z-index: 30;
  display: flex; gap: 6px;
  opacity: 0.3; transition: opacity 0.6s var(--ease-soft);
}
#corner:hover { opacity: 1; }
body[data-mode="focus"] #corner { opacity: 0.12; }
body[data-mode="focus"] #corner:hover { opacity: 0.8; }
#corner button {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--panel-edge); background: var(--panel); color: var(--ink-soft);
  cursor: pointer; display: grid; place-items: center;
  transition: color 0.3s, transform 0.25s var(--ease-soft);
}
#corner button:hover { color: var(--ink); transform: translateY(-2px); }

/* ══════════ RESPONSIVE ══════════ */
@media (max-width: 640px) {
  #speech { font-size: 15px; max-width: 82vw; }
  .ns-title { font-size: 16.5px; }
  #corner { top: 12px; right: 12px; }
  #corner button { width: 30px; height: 30px; }
  #notebook-panel { padding-left: 28px; }
}

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