/* black and white — hand-authored layer
   Tokens, base, custom classes and atmosphere are shared with the reference
   client (the last person online). Tailwind utilities are compiled into
   tailwind.css, which must be loaded before this file. */

/* ────────────────────────────────────────────────────────────────────────
   palette

   Two rules hold this theme together:
   1. Surfaces go darker than the default neutrals — the room is unlit.
   2. Ink goes *brighter* — darkness must never mean unreadable.
      dark ≠ dim.

   The accents are deliberately sickly: phosphor green for "someone is
   alive out there", cold cathode blue for the client itself, and dried
   amber for the things the story wants you to look at.
   ──────────────────────────────────────────────────────────────────── */



@layer base {
  * {
    scrollbar-width: thin;
    scrollbar-color: #171d27 transparent;
  }

  *::-webkit-scrollbar {
    width: 5px;
    height: 5px;
  }

  *::-webkit-scrollbar-track {
    background: transparent;
  }

  *::-webkit-scrollbar-thumb {
    background: #1a212b;
    border-radius: 99px;
  }

  *::-webkit-scrollbar-thumb:hover {
    background: #283140;
  }

  html {
    width: 100%;
    min-height: 100%;
    background-color: #020407;
  }

  body {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    background-color: #020407;
    color: #dfe5ee;
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  #root {
    min-height: 100vh;
    min-height: 100dvh;
  }

  ::selection {
    background-color: rgba(139, 184, 230, 0.24);
    color: #f4f8fe;
  }

  :focus-visible {
    outline: 1px solid rgba(160, 196, 236, 0.62);
    outline-offset: 2px;
  }
}

@layer utilities {
  .animate-fade-in {
    animation: fadeIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }

  .animate-slide-up {
    animation: slideUp 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }

  .animate-glitch {
    animation: glitch 0.42s ease-out;
  }

  .animate-rise {
    animation: rise 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
}

/* ── typography helpers ───────────────────────────────────────────────── */

/* Keep labels and names in their natural case. */
.smallcaps {
  font-variant-caps: normal;
  font-feature-settings: normal;
  letter-spacing: 0.02em;
}

/* Meta text: timestamps, counters, labels, kind pills. */
.meta {
  font-family: var(--font-sans);
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: 0.03em;
  color: #93a0b1;
}

.meta-tight {
  font-family: var(--font-sans);
  font-size: 9.5px;
  letter-spacing: 0.02em;
  color: #93a0b1;
}

/* Display type for the title and ending cards. */
.display {
  font-family: var(--font-sans);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

/* The title gets a breath of chromatic split — the screen is not quite right. */
.display-glitch {
  text-shadow:
    -0.6px 0 rgba(196, 96, 88, 0.28),
    0.6px 0 rgba(122, 190, 214, 0.24),
    0 0 42px rgba(126, 168, 196, 0.12);
}

/* ── surfaces ─────────────────────────────────────────────────────────── */

:root {
  --void: #020407;
  --surface: #05080f;
  --surface-raised: #080d16;
  --hairline: rgba(160, 186, 214, 0.09);
  --hairline-soft: rgba(160, 186, 214, 0.055);
  --phosphor: #79e0b3;
  --cathode: #8bb8e6;
  --dried: #c8a970;
  --bruise: #a8433d;
}

.app-bg {
  background: #020407;
}

.panel {
  background: rgba(150, 180, 210, 0.022);
  border: 1px solid var(--hairline-soft);
}

.hairline {
  border-color: var(--hairline-soft);
}

.chat-scroll {
  scrollbar-gutter: stable;
}

.game-shell {
  height: 100vh;
  height: 100dvh;
}

.screen-shell {
  min-height: 100vh;
  min-height: 100dvh;
}

.safe-top-bar {
  min-height: calc(3.5rem + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
}

.safe-bottom-bar {
  padding-bottom: calc(0.625rem + env(safe-area-inset-bottom, 0px));
}

/* ── messages ─────────────────────────────────────────────────────────── */

.msg {
  position: relative;
  border-radius: 12px;
  padding: 8px 12px;
  max-width: 100%;
  border: 1px solid transparent;
}

.msg-npc {
  background: rgba(150, 180, 210, 0.035);
  border-color: rgba(150, 180, 210, 0.075);
}

.msg-offline {
  background: rgba(150, 160, 174, 0.04);
  border-color: rgba(150, 160, 174, 0.09);
  color: #9ca3af;
}

.msg-offline.msg-clue {
  border-color: rgba(150, 160, 174, 0.12);
  box-shadow: none;
  animation: none;
}

.msg-player {
  background: rgba(86, 130, 190, 0.16);
  border-color: rgba(124, 168, 220, 0.2);
}

.msg-system {
  background: transparent;
  border-color: rgba(150, 180, 210, 0.05);
  border-style: dashed;
}

/* ── interaction ──────────────────────────────────────────────────────── */

.row-hover {
  transition: background-color 240ms ease, border-color 240ms ease, transform 240ms ease;
}

.choice-card {
  position: relative;
  transition: background-color 240ms ease, border-color 240ms ease;
}

.choice-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(transparent, rgba(121, 224, 179, 0.55), transparent);
  opacity: 0;
  transition: opacity 240ms ease;
}

.choice-card:hover::before {
  opacity: 1;
}

.choice-card:hover {
  background-color: rgba(150, 180, 210, 0.05);
  border-color: rgba(160, 186, 214, 0.16);
}

.toast-in {
  animation: slideUp 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.typing-dot {
  animation: typingBlink 1.2s ease-in-out infinite;
}

.tick {
  transition: background-color 260ms ease, box-shadow 260ms ease;
}

.clue-pulse {
  animation: cluePulse 1.8s ease-in-out 2;
}

.msg-clue {
  border-color: rgba(200, 169, 112, 0.42);
  box-shadow: 0 0 0 1px rgba(200, 169, 112, 0.09), 0 0 20px rgba(148, 96, 40, 0.16);
  animation: clueGlow 2.2s ease-in-out 2;
}

/* ── atmosphere ──────────────────────────────────────────────────────────
   Every layer is pointer-transparent and sits *above* the UI so it can
   actually be seen; the old stack was painted under opaque surfaces and
   never showed. Centers stay clear, so nothing is dimmed where you read.
   ──────────────────────────────────────────────────────────────────── */

.crt-vignette {
  position: fixed;
  inset: 0;
  z-index: 24;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, 0.34) 72%, rgba(0, 0, 0, 0.86) 100%);
}

/* very slow cold haze that drifts across the whole frame */
.crt-fog {
  position: fixed;
  inset: -20%;
  z-index: 19;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: screen;
  background:
    radial-gradient(38% 30% at 28% 34%, rgba(58, 96, 104, 0.14), transparent 70%),
    radial-gradient(34% 28% at 74% 62%, rgba(96, 40, 38, 0.13), transparent 72%),
    radial-gradient(46% 40% at 52% 92%, rgba(44, 66, 78, 0.12), transparent 74%);
  animation: fogDrift 74s ease-in-out infinite alternate;
}

/* the room exhales: a slow lungful of light from below */
.crt-breathe {
  position: fixed;
  inset: 0;
  z-index: 18;
  pointer-events: none;
  opacity: 0.55;
  background:
    radial-gradient(60% 46% at 50% 58%, rgba(26, 48, 58, 0.16), transparent 72%);
  animation: breathe 13s ease-in-out infinite;
}

/* film grain — the sensor is not clean */
.crt-dust {
  position: fixed;
  inset: 0;
  z-index: 21;
  pointer-events: none;
  opacity: 0.26;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");
  animation: dust 5.5s steps(6) infinite;
}

/* faint horizontal refresh — kept thin and whisper-quiet so text stays crisp */
.crt-scanlines {
  position: fixed;
  inset: 0;
  z-index: 22;
  pointer-events: none;
  opacity: 0.5;
  background: repeating-linear-gradient(
    0deg,
    rgba(190, 214, 236, 0.016) 0px,
    rgba(190, 214, 236, 0.016) 1px,
    transparent 1px,
    transparent 3px
  );
}

/* a single band of light crawling down the glass, once every 17s */
.crt-sweep {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 23;
  pointer-events: none;
  height: 28vh;
  opacity: 0.4;
  mix-blend-mode: screen;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(150, 196, 214, 0.045) 45%,
    rgba(150, 196, 214, 0.06) 50%,
    rgba(150, 196, 214, 0.045) 55%,
    transparent
  );
  animation: sweep 17s linear infinite;
}

/* the whole frame loses hold for a few frames, rarely */
.crt-flicker {
  position: fixed;
  inset: 0;
  z-index: 25;
  pointer-events: none;
  background: rgba(196, 220, 238, 0.03);
  opacity: 0;
  animation: flicker 19s steps(1, end) infinite;
}

.redacted {
  background: #04060a;
  color: transparent;
  border-bottom: 1px solid #2b323c;
  user-select: none;
}

/* ── sound control ────────────────────────────────────────────────────── */

.sound-toggle {
  transition: color 240ms ease, border-color 240ms ease, background-color 240ms ease;
}

.sound-toggle svg {
  transition: transform 240ms ease;
}

.sound-toggle:hover svg {
  transform: scale(1.08);
}

/* ── keyframes ────────────────────────────────────────────────────────── */

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes cluePulse {
  0%, 100% { box-shadow: 0 0 0 rgba(200, 169, 112, 0); }
  50% { box-shadow: 0 0 20px rgba(200, 169, 112, 0.2); }
}

@keyframes clueGlow {
  0%, 100% { box-shadow: 0 0 0 rgba(200, 169, 112, 0); }
  50% { box-shadow: 0 0 18px rgba(200, 169, 112, 0.2); }
}

@keyframes typingBlink {
  0%, 100% { opacity: 0.24; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-1px); }
}

@keyframes dust {
  0% { transform: translate(0, 0); }
  50% { transform: translate(-2%, 1.5%); }
  100% { transform: translate(0, 0); }
}

@keyframes fogDrift {
  0% { transform: translate3d(-2%, -1%, 0) scale(1); }
  50% { transform: translate3d(2%, 1.5%, 0) scale(1.06); }
  100% { transform: translate3d(-1%, 2%, 0) scale(1.02); }
}

@keyframes breathe {
  0%, 100% { opacity: 0.42; }
  46% { opacity: 0.72; }
  70% { opacity: 0.5; }
}

@keyframes sweep {
  0% { top: -30vh; }
  100% { top: 110vh; }
}

@keyframes flicker {
  0%, 96.2%, 96.5%, 97.1%, 100% { opacity: 0; }
  96.3% { opacity: 1; }
  96.45% { opacity: 0.35; }
  96.8% { opacity: 0.8; }
  97.05% { opacity: 0.2; }
}

@media (prefers-reduced-motion: reduce) {
  .clue-pulse,
  .msg-clue,
  .crt-dust,
  .crt-fog,
  .crt-breathe,
  .crt-sweep,
  .crt-flicker,
  .typing-dot {
    animation: none;
  }

  .crt-flicker {
    opacity: 0;
  }

  .crt-sweep {
    display: none;
  }
}


/* ── staggered reveal (ending screen) ─────────────────────────────────── */

.reveal {
  opacity: 0;
  animation: fadeIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ── preference classes, mirrored from the media queries ──────────────── */

body.text-large .msg,
body.text-large .msg.text-\[12\.5px\] {
  font-size: 14px;
}

body.reduce-motion *,
body.reduce-motion *::before,
body.reduce-motion *::after,
html.reduce-motion *,
html.reduce-motion *::before,
html.reduce-motion *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}

body.reduce-motion .reveal {
  opacity: 1;
  animation: none;
}

body.reduce-motion .msg-clue {
  animation: none;
  box-shadow: 0 0 0 1px rgba(200, 169, 112, 0.09);
}

/* the app always fills the window */
html,
body,
#app {
  min-height: 100%;
}

#app {
  outline: none;
}

/* ── skip link (this project keeps one; the reference does not) ────────── */

.skip-link {
  position: fixed;
  left: 12px;
  top: -48px;
  z-index: 90;
  padding: 8px 14px;
  background: #05080f;
  border: 1px solid rgba(160, 186, 214, 0.18);
  color: #e9eef7;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: top 160ms ease;
}

.skip-link:focus {
  top: 12px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   v4 — the transcript, not the interface

   Everything that was a rounded bordered card is now text, a hairline, or
   space. The only objects left on screen are the messages, the photograph,
   and the person you are talking to.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --ink: #cfd5d8;
  --ink-soft: #a8b1b6;
  --dim: #7f888d;
  --faint: #5c666b;
  --amber: #c9a878;
  --steel: #9fbcd2;
  --rule: rgba(255, 255, 255, 0.045);
  --rule-soft: rgba(255, 255, 255, 0.028);
}

body {
  background: #030407;
  color: var(--ink);
}

/* ── chrome: no product frame ─────────────────────────────────────────── */

header.safe-top-bar {
  height: 44px !important;
  min-height: 44px !important;
  border-bottom: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  padding-left: clamp(14px, 3vw, 32px) !important;
  padding-right: clamp(14px, 3vw, 32px) !important;
}

header.safe-top-bar .meta {
  font-family: var(--font-mono);
  letter-spacing: 0.12em;
}

header.safe-top-bar > div:last-child {
  gap: 14px !important;
}

.sound-toggle {
  border-color: transparent !important;
  background: transparent !important;
  padding: 4px 2px !important;
  color: var(--faint) !important;
}

.sound-toggle:hover {
  background: transparent !important;
  color: var(--ink-soft) !important;
}

/* ── navigation reads as an index, not a menu of pills ────────────────── */

nav[aria-label="game navigation"] {
  background: transparent !important;
  border-right: 1px solid var(--rule-soft) !important;
  padding-top: 4px;
}

nav[aria-label="game navigation"] > div:first-child > div:first-child,
nav[aria-label="game navigation"] > div:nth-child(2) > div:first-child {
  color: var(--faint) !important;
  letter-spacing: 0.3em !important;
}

nav[aria-label="game navigation"] button {
  border-radius: 0 !important;
  background: transparent !important;
  position: relative;
  color: var(--dim) !important;
  transition: color 220ms ease, transform 220ms ease;
}

nav[aria-label="game navigation"] button:hover {
  background: transparent !important;
  color: var(--ink) !important;
  transform: translateX(2px);
}

nav[aria-label="game navigation"] button[aria-current="page"] {
  background: transparent !important;
  color: var(--ink) !important;
}

nav[aria-label="game navigation"] button[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--amber);
  opacity: 0.5;
}

nav[aria-label="game navigation"] button[aria-current="page"] > span:first-of-type {
  letter-spacing: 0.14em;
}

/* conversation rows: text + presence, no hover fill */
[data-action="thread"] {
  border-radius: 0 !important;
  background: transparent !important;
  transition: color 220ms ease;
}

[data-action="thread"]:hover {
  background: transparent !important;
}

[data-action="thread"]:hover span {
  color: var(--ink) !important;
}

[data-action="thread"][aria-current="true"] {
  background: transparent !important;
  box-shadow: inset 1px 0 0 rgba(233, 228, 218, 0.22);
}

/* ── right rail: a dim room, no panel ─────────────────────────────────── */

aside[aria-label="room status"] {
  background: transparent !important;
  border-left: 1px solid var(--rule-soft) !important;
  padding-top: 6px !important;
}

aside[aria-label="room status"] li {
  border-radius: 0 !important;
  background: transparent !important;
}

aside[aria-label="room status"] .meta {
  color: var(--faint) !important;
}

/* ── the thread ───────────────────────────────────────────────────────── */

main > section {
  background: #030407 !important;
}

.thread-head {
  border-bottom: 1px solid var(--rule) !important;
  height: 58px !important;
}

.thread-head > span:first-child > span:first-child {
  border-radius: 2px !important;
}

.thread-head h1 {
  font-family: var(--font-mono);
  font-size: 11px !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase;
  color: var(--ink) !important;
}

.thread-head h1[class*="neutral-500"] {
  color: var(--faint) !important;
}

.thread-head p {
  font-family: var(--font-mono);
  font-size: 9px !important;
  letter-spacing: 0.08em !important;
  color: var(--faint) !important;
}

.thread-tool {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
  transition: color 200ms ease;
}

.thread-tool:hover {
  color: var(--ink);
}

/* messages: flat tint, small radius, no border, larger type */
.msg {
  border: 0 !important;
  border-radius: 3px !important;
  padding: 7px 11px !important;
  font-size: 14px !important;
  line-height: 1.62 !important;
  letter-spacing: 0.003em;
}

.msg-npc {
  background: rgba(255, 255, 255, 0.03) !important;
  color: #c6cccf !important;
}

.msg-player {
  background: rgba(124, 156, 188, 0.11) !important;
  color: #dae1e6 !important;
}

.msg-offline {
  background: rgba(255, 255, 255, 0.016) !important;
  color: #7d868b !important;
}

.msg-author {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.9;
}

/* the divider is a type rule, not a chip */
.msg + .msg,
.msg-sys {
  line-height: 1.62;
}

/* ── the assistant: one line, no banner ───────────────────────────────── */

.assist {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 28px 0 0;
  padding: 14px 0 4px;
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: var(--dim);
}

.assist-dot {
  flex: none;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--amber);
  translate: 0 -2px;
  animation: assistBreathe 6.5s ease-in-out infinite;
}

.assist-text {
  flex: 1 1 auto;
  min-width: 0;
}

.assist-action {
  flex: none;
  font-family: var(--font-mono);
  font-size: inherit;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
  border-bottom: 1px solid rgba(201, 168, 120, 0.28);
  padding-bottom: 1px;
  transition: color 200ms ease, border-color 200ms ease;
}

.assist-action:hover {
  color: #e3cba4;
  border-bottom-color: rgba(227, 203, 164, 0.5);
}

@keyframes assistBreathe {
  0%, 100% { opacity: 0.3; }
  45% { opacity: 0.85; }
}

/* ── replies: lines of a script, not buttons ──────────────────────────── */

.choice-card {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 12px 0 !important;
  gap: 16px !important;
  align-items: baseline !important;
  transition: transform 240ms cubic-bezier(0.2, 0.8, 0.3, 1), color 240ms ease;
}

.choice-card + .choice-card {
  border-top: 1px solid var(--rule-soft) !important;
}

.choice-card:focus-visible {
  background: transparent !important;
  transform: translateX(3px);
}

@media (hover: hover) {
  .choice-card:hover {
    background: transparent !important;
    transform: translateX(3px);
  }
}

.choice-card .text-\[12\.5px\] {
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: #c3cacd !important;
  transition: color 240ms ease;
}

.choice-card:hover .text-\[12\.5px\],
.choice-card:focus-visible .text-\[12\.5px\] {
  color: #eef1f2 !important;
}

.choice-card span[class*="font-mono"] {
  color: var(--faint) !important;
  letter-spacing: 0.06em !important;
}

.choice-card:hover span[class*="font-mono"] {
  color: var(--amber) !important;
}

/* ── panels: the same void, no sheet, no card ─────────────────────────── */

[role="dialog"].animate-rise {
  background: #030407 !important;
  backdrop-filter: none !important;
}

[role="dialog"] > header {
  height: 48px !important;
  border-bottom: 1px solid var(--rule) !important;
  padding-left: clamp(14px, 3vw, 32px) !important;
  padding-right: clamp(14px, 3vw, 32px) !important;
}

[role="dialog"] h2 {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  color: var(--ink) !important;
}

[role="dialog"] > header .meta {
  color: var(--faint) !important;
}

[role="dialog"] li {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 12px 0 !important;
}

[role="dialog"] li + li {
  border-top: 1px solid var(--rule-soft) !important;
}

[role="dialog"] li button {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 2px 0 !important;
  color: var(--dim) !important;
}

[role="dialog"] li button:hover {
  color: var(--ink) !important;
}

[role="dialog"] button[data-action="open-contact"],
[role="dialog"] button[data-action="inspect-status"] {
  font-family: var(--font-mono);
  letter-spacing: 0.14em;
}

[role="dialog"] .rounded-lg,
[role="dialog"] .rounded-xl,
[role="dialog"] .rounded-md {
  border-radius: 0 !important;
}

[role="dialog"] > div > div > ul > li > button {
  border-bottom: 1px solid var(--rule-soft) !important;
}

/* ── the shelf: photographs pinned to the page ────────────────────────── */

main [data-media-slot] {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

figure[data-media-slot] {
  margin: 2px 0 0;
}

figure[data-media-slot] > div {
  overflow: hidden;
}

figure[data-media-slot] svg {
  display: block;
  width: 100%;
  height: auto;
  animation: photoDrift 52s ease-in-out infinite alternate;
  transform-origin: 52% 56%;
}

figure[data-media-slot] figcaption {
  border-top: 0 !important;
  padding: 8px 0 0 !important;
  background: transparent !important;
  font-family: var(--font-mono);
}

figure[data-media-slot] figcaption span {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--faint) !important;
}

@keyframes photoDrift {
  from { transform: scale(1) translate(0, 0); }
  to { transform: scale(1.045) translate(-0.6%, -0.9%); }
}

/* the card that used to wrap the photograph and the voice note */
main div:has(> figure[data-media-slot]),
main div:has(> button[data-action="replay-voice"]) {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  gap: 12px !important;
}

main [data-action="revisit-opening"],
main [data-action="delivery-detail"] {
  border: 0 !important;
  border-bottom: 1px solid var(--rule-soft) !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 14px 0 !important;
}

main [data-action="revisit-opening"]:hover,
main [data-action="delivery-detail"]:hover {
  background: transparent !important;
  transform: translateX(3px);
}

main h1.smallcaps {
  font-family: var(--font-mono);
  font-size: 10px !important;
  letter-spacing: 0.26em !important;
  text-transform: uppercase;
  color: var(--dim) !important;
}

/* ── records: an index of endings, no cards ───────────────────────────── */

main article {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  border-top: 1px solid var(--rule) !important;
  padding: 20px 0 4px !important;
}

main article .shrink-0.rounded.border {
  border: 0 !important;
  padding: 0 !important;
  font-size: 8px !important;
  letter-spacing: 0.18em !important;
}

main article h3 {
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase;
}

/* ── the title and the character choice: type, not tiles ──────────────── */

button.group {
  border: 0 !important;
  border-bottom: 1px solid var(--rule) !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 15px 0 !important;
  transition: padding 260ms cubic-bezier(0.2, 0.8, 0.3, 1), color 260ms ease;
}

button.group:hover {
  background: transparent !important;
  padding-left: 6px !important;
}

[data-player] {
  border: 0 !important;
  border-top: 1px solid var(--rule) !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 22px 0 18px !important;
  transition: padding 260ms cubic-bezier(0.2, 0.8, 0.3, 1);
}

[data-player]:hover {
  background: transparent !important;
  transform: none;
  padding-left: 6px !important;
}

[data-player] .smallcaps {
  font-size: 24px !important;
  letter-spacing: 0.2em !important;
  color: var(--ink) !important;
}

/* ── the ending: prose on a void ──────────────────────────────────────── */

.ending-inner,
.app-bg.screen-shell .w-full {
  color: var(--ink);
}

.reveal.text-\[12px\] {
  font-size: 13.5px !important;
  line-height: 1.85 !important;
  color: #b3bcc1 !important;
  letter-spacing: 0.004em;
}

/* ── chapter turn-over: the screen loses hold for a beat ──────────────── */

.stage-beat {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  background: #030407;
  animation: beat 1.3s cubic-bezier(0.3, 0, 0.4, 1) forwards;
}

.stage-beat::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30px;
  height: 1px;
  translate: -50% 0;
  background: rgba(207, 213, 216, 0.3);
  animation: beatLine 1.3s ease-out forwards;
}

@keyframes beat {
  0% { opacity: 1; }
  38% { opacity: 0.95; }
  60% { opacity: 0.62; }
  100% { opacity: 0; }
}

@keyframes beatLine {
  0%, 34% { opacity: 0; }
  46% { opacity: 0.6; }
  64% { opacity: 0.18; }
  100% { opacity: 0; }
}

/* ── atmosphere: quieter grain, a room that closes in ─────────────────── */

.crt-scanlines {
  opacity: 0.32 !important;
}

.crt-dust {
  opacity: 0.2 !important;
}

.crt-vignette {
  background: radial-gradient(ellipse at 50% 46%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.5) 74%, rgba(0, 0, 0, 0.93) 100%) !important;
}

body[data-stage="2"] .crt-vignette {
  background: radial-gradient(ellipse at 50% 46%, rgba(0, 0, 0, 0) 26%, rgba(0, 0, 0, 0.58) 70%, rgba(0, 0, 0, 0.96) 100%) !important;
}

body[data-stage="3"] .crt-vignette,
body[data-stage="4"] .crt-vignette {
  background: radial-gradient(ellipse at 50% 45%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.66) 64%, rgba(0, 0, 0, 1) 100%) !important;
}

body[data-stage="4"] .msg:not(.msg-player) {
  opacity: 0.92;
}

/* ── preference classes still win ─────────────────────────────────────── */

body.reduce-motion figure[data-media-slot] svg,
body.reduce-motion .assist-dot {
  animation: none !important;
}

body.reduce-motion .stage-beat {
  display: none !important;
}

body.text-large .msg {
  font-size: 15px !important;
}

/* avatars: a bare mark, not a tile */
main .w-7 > span[aria-hidden="true"] {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

main .w-7 > span[aria-hidden="true"] > span {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.1em !important;
  opacity: 0.85;
}

main .w-7 > span[aria-hidden="true"]:has(> span.grayscale),
main .w-7 > span[aria-hidden="true"] > span[class*="neutral-500"] {
  opacity: 0.45;
}

/* the thread header keeps its tile: it is the only avatar with weight */
.thread-head > span:first-child > span:first-child {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

.thread-head > span:first-child > span:first-child > span {
  font-family: var(--font-mono);
  font-size: 11px !important;
  letter-spacing: 0.1em;
}

/* ── the message box ──────────────────────────────────────────────────── */

.composer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px clamp(14px, 3vw, 34px) 14px;
  border-top: 1px solid var(--rule);
  background: #030407;
}

.composer input {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  padding: 6px 0;
  font-family: var(--font-sans);
  font-size: 13.5px;
  letter-spacing: 0.005em;
  color: var(--ink);
  caret-color: var(--amber);
}

.composer input::placeholder {
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.composer input:focus {
  outline: none;
}

.composer-send {
  flex: none;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
  transition: color 200ms ease;
}

.composer-send:hover,
.composer:focus-within .composer-send {
  color: var(--amber);
}

/* -----------------------------------------------------------------------
   v6 — one screen in a dark room

   No app shell, no sidebar, no rail. A single lit rectangle in the dark,
   and inside it only the thing you are looking at.
   ----------------------------------------------------------------------- */

.room-stage {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px clamp(14px, 4vw, 56px);
  background:
    radial-gradient(120% 100% at 50% 38%, #061018 0%, #030609 46%, #010203 100%);
}

.device {
  position: relative;
  width: min(780px, 100%);
  height: min(88dvh, 940px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #04060a;
  border: 1px solid rgba(255, 255, 255, 0.055);
  box-shadow:
    0 40px 120px rgba(0, 0, 0, 0.9),
    0 2px 0 rgba(255, 255, 255, 0.02) inset;
}

.device::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(130% 90% at 50% -12%, rgba(126, 158, 190, 0.06), transparent 58%);
}

.device-screen {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.screen-head {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  flex: none;
  padding: 0 16px;
  border-bottom: 1px solid var(--rule);
}

.screen-title {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #dfe4e7;
}

.screen-meta {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--faint);
}

.screen-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 18px 22px;
  scrollbar-width: thin;
  scrollbar-color: #161d25 transparent;
}

.back-key {
  flex: none;
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1;
  color: var(--dim);
  padding: 2px 4px 4px;
  transition: color 200ms ease, transform 200ms ease;
}

.back-key:hover {
  color: var(--ink);
  transform: translateX(-2px);
}

.thread-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.thread-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 15px 0;
  text-align: left;
  border-bottom: 1px solid var(--rule-soft);
  transition: transform 220ms ease;
}

.thread-item:hover {
  transform: translateX(3px);
}

.thread-mark {
  flex: none;
  width: 22px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--dark, #8d979c);
  opacity: 0.9;
}

.thread-mark.faded,
.thread-state.faded {
  opacity: 0.4;
}

.thread-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1 1 auto;
}

.thread-title {
  font-size: 14px;
  color: #dfe4e7;
}

.thread-last {
  font-size: 12px;
  color: var(--faint);
}

.thread-state {
  flex: none;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}

.screen-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--rule-soft);
}

.screen-links button {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
  transition: color 200ms ease;
}

.screen-links button:hover {
  color: var(--ink);
}

/* the transcript fills the device, no column padding weirdness */
.device .msg-scroll {
  padding: 16px 18px 8px;
}

.device .thread-head {
  height: 56px !important;
}

.device .chat-scroll {
  padding-left: 18px;
  padding-right: 18px;
}

/* the screen edges hold the light: no global vignette on the device */
.room-stage + .crt-vignette,
.crt-vignette {
  opacity: 0.9;
}

/* ═══════════════════════════════════════════════════════════════════════
   v7 — a conversation that is still open

   The room is a room, not a monitor. One lit rectangle, good paper,
   restrained type, and no effect that announces itself as an effect.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --font-serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, "Times New Roman", serif;
  --room: #0a0a0c;
  --surface: #121214;
  --surface-2: #171719;
  --ink: #e9e4da;
  --ink-soft: #d3cdc2;
  --dim: #a09a8f;
  --faint: #8a8479;
  --rule: rgba(233, 228, 218, 0.09);
  --rule-soft: rgba(233, 228, 218, 0.055);
  --ivory: #e9e4da;
  --amber: #b7a17f;
  --steel: #9aa7b2;
  --sage: #96a49b;
  --npc-fill: rgba(255, 255, 255, 0.038);
  --player-fill: rgba(233, 228, 218, 0.085);
}

body[data-phase="unease"] {
  --room: #0a0a0b;
  --surface: #101011;
  --surface-2: #151517;
  --ink: #e2ddd2;
  --ink-soft: #cac4b9;
  --dim: #999287;
  --faint: #817b70;
  --rule: rgba(226, 221, 210, 0.085);
  --rule-soft: rgba(226, 221, 210, 0.05);
  --npc-fill: rgba(255, 255, 255, 0.032);
  --player-fill: rgba(226, 221, 210, 0.075);
}

body[data-phase="untrustworthy"] {
  --room: #09090a;
  --surface: #0e0e10;
  --surface-2: #131315;
  --ink: #dcd6cb;
  --ink-soft: #c3bdb2;
  --dim: #948d82;
  --faint: #857e73;
  --rule: rgba(220, 214, 203, 0.075);
  --rule-soft: rgba(220, 214, 203, 0.045);
  --npc-fill: rgba(255, 255, 255, 0.028);
  --player-fill: rgba(220, 214, 203, 0.06);
}

body[data-phase="intrusive"] {
  --room: #08080a;
  --surface: #0c0c0e;
  --surface-2: #111113;
  --ink: #d3cdc2;
  --ink-soft: #bdb7ac;
  --dim: #8d877c;
  --faint: #807a6f;
  --rule: rgba(211, 205, 194, 0.065);
  --rule-soft: rgba(211, 205, 194, 0.04);
  --npc-fill: rgba(255, 255, 255, 0.026);
  --player-fill: rgba(211, 205, 194, 0.045);
}

body[data-phase="empty"] {
  --room: #070708;
  --surface: #0a0a0b;
  --surface-2: #0e0e0f;
  --ink: #bcb6ab;
  --ink-soft: #aaa49a;
  --dim: #8b857b;
  --faint: #7a746a;
  --rule: rgba(188, 182, 171, 0.06);
  --rule-soft: rgba(188, 182, 171, 0.035);
  --npc-fill: transparent;
  --player-fill: transparent;
}

html, body {
  background: var(--room) !important;
  color: var(--ink);
}

body {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#app { position: relative; z-index: 3; }

/* ── the room ─────────────────────────────────────────────────────────── */

.room-grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: url("assets/room-grain.png");
  background-repeat: repeat;
  background-size: 96px 96px;
  opacity: 0.55;
  mix-blend-mode: soft-light;
}

.room-vignette {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(120% 95% at 50% 42%, transparent 34%, rgba(0, 0, 0, 0.42) 74%, #040405 100%);
}

body[data-phase="empty"] .room-vignette {
  background: radial-gradient(130% 100% at 50% 46%, transparent 26%, rgba(0, 0, 0, 0.5) 70%, #030304 100%);
}

.app-bg { background: transparent !important; }

.screen-shell { min-height: 100dvh; }

.skip-link {
  position: fixed;
  left: 12px;
  top: 12px;
  z-index: 200;
  transform: translateY(-220%);
  background: #17171a;
  color: #e9e4da;
  border: 1px solid var(--rule);
  padding: 8px 12px;
  font-size: 12px;
  transition: transform 160ms ease;
}
.skip-link:focus { transform: translateY(0); }

/* ── type ─────────────────────────────────────────────────────────────── */

.display {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 0.98;
}

.display-glitch { text-shadow: none; }

.smallcaps {
  font-family: var(--font-sans);
  font-variant-caps: normal;
  text-transform: none !important;
  letter-spacing: 0.04em !important;
}

.meta, .meta-tight {
  font-family: var(--font-sans);
  color: var(--faint);
  letter-spacing: 0.04em;
}

.font-mono { font-variant-numeric: tabular-nums; }

#app .font-mono {
  font-family: var(--font-sans) !important;
  letter-spacing: 0.04em;
}

:focus-visible {
  outline: 2px solid rgba(233, 228, 218, 0.75);
  outline-offset: 2px;
}

::selection { background: rgba(233, 228, 218, 0.22); color: #fff; }

/* ── the device: a lit rectangle, not a product render ────────────────── */

.room-stage {
  padding: clamp(8px, 2.2vw, 28px);
  background: transparent;
}

.device {
  width: min(780px, 100%);
  height: min(94dvh, 920px);
  background: var(--surface) !important;
  border: 1px solid var(--rule-soft);
  border-radius: 5px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
}

.device::after { display: none; }

.device > .device-screen,
.device .device-screen,
.device main > section,
.device main,
.device section {
  background-color: var(--surface) !important;
}

.device header { background: transparent !important; backdrop-filter: none !important; }
.device header.safe-top-bar { border-bottom: 1px solid var(--rule-soft) !important; }

.device-screen { min-height: 0; }

/* no chip frames anywhere small */
.device button[class*="rounded"] { border-radius: 2px !important; }
.device [class*="rounded-[8px]"],
.device [class*="rounded-[9px]"],
.device [class*="rounded-lg"] { border-radius: 2px !important; }

/* ── top chrome ───────────────────────────────────────────────────────── */

header.safe-top-bar { height: 46px !important; min-height: 46px !important; }
header.safe-top-bar > div:last-child { gap: 12px !important; }

header.safe-top-bar .meta {
  font-family: var(--font-sans);
  letter-spacing: 0.06em;
  color: var(--faint);
}

.sound-toggle { color: var(--faint) !important; }
.sound-toggle:hover { color: var(--ink-soft) !important; }

/* ── the thread header ────────────────────────────────────────────────── */

.thread-head {
  height: 54px !important;
  border-bottom: 1px solid var(--rule-soft) !important;
}

.thread-head > span:first-child > span:first-child {
  border-radius: 2px !important;
  background: rgba(255, 255, 255, 0.035) !important;
  box-shadow: none !important;
}

.thread-head h1 {
  font-family: var(--font-serif);
  font-size: 16px !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  color: var(--ink) !important;
}

.thread-head h1[class*="neutral-500"] { color: var(--dim) !important; }

.thread-head p {
  font-family: var(--font-sans);
  font-size: 10.5px !important;
  letter-spacing: 0.02em !important;
  color: var(--faint) !important;
}

.thread-tool {
  font-family: var(--font-sans);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--dim);
}

.thread-tool:hover { color: var(--ink); }

/* ── messages ─────────────────────────────────────────────────────────── */

.msg {
  border: 0 !important;
  border-radius: 9px !important;
  padding: 9px 13px !important;
  font-size: 14.5px !important;
  line-height: 1.62 !important;
  letter-spacing: 0.002em;
  box-shadow: none !important;
}

.msg-npc {
  background: var(--npc-fill) !important;
  color: var(--ink-soft) !important;
}

.msg-player {
  background: var(--player-fill) !important;
  color: var(--ink) !important;
}

.msg-offline {
  background: rgba(255, 255, 255, 0.018) !important;
  color: #8f897f !important;
}

.msg-author {
  font-family: var(--font-serif);
  font-size: 12.5px;
  letter-spacing: 0.01em;
  text-transform: none;
  opacity: 1;
  color: var(--ink-soft) !important;
}

.msg .text-\[13px\] { font-size: 14.5px !important; }

.msg-time { color: var(--faint) !important; }

.msg-time-open {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
  font-family: var(--font-sans);
  font-size: 9.5px;
  letter-spacing: 0.03em;
  color: var(--dim) !important;
}

.msg-time-open:hover { color: var(--ink) !important; }

.msg-return .msg {
  border-left: 1px solid rgba(183, 161, 127, 0.45) !important;
  border-radius: 0 8px 8px 0 !important;
  padding-left: 12px !important;
}

.msg-return-note {
  display: block;
  margin-top: 4px;
  font-family: var(--font-sans);
  font-size: 9.5px;
  font-style: italic;
  letter-spacing: 0.01em;
  color: var(--faint);
}

.chapter-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 30px 2px 20px;
}

.chapter-divider:first-child { margin-top: 4px; }

.chapter-rule { height: 1px; flex: 1; background: var(--rule); }

.chapter-stamp {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 0;
}

.chapter-time {
  font-family: var(--font-sans);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: var(--faint);
}

.return-notice {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  padding: 12px 0;
  border-top: 1px solid var(--rule);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--dim);
}

/* ── reply choices: lines of a script ─────────────────────────────────── */

.choice-card { padding: 13px 0 !important; gap: 18px !important; }
.choice-card + .choice-card { border-top: 1px solid var(--rule-soft) !important; }

.choice-card .text-\[12\.5px\] {
  font-size: 14.5px !important;
  line-height: 1.55 !important;
  color: var(--ink-soft) !important;
}

.choice-card:hover .text-\[12\.5px\],
.choice-card:focus-visible .text-\[12\.5px\] { color: #f2eee6 !important; }

.choice-card:hover span[class*="font-mono"] { color: var(--amber) !important; }

/* ── the assistant line ───────────────────────────────────────────────── */

.assist {
  font-family: var(--font-sans);
  font-size: 11.5px;
  letter-spacing: 0.01em;
  color: var(--dim);
  border-top: 1px solid var(--rule);
}

.assist-dot { background: var(--faint) !important; box-shadow: none !important; }
.assist-action { color: var(--ink-soft); border-bottom-color: var(--rule); }
.assist-action:hover { color: var(--ink); border-bottom-color: var(--ink-soft); }

/* ── photographs ──────────────────────────────────────────────────────── */

.photo-card {
  margin: 0;
  border: 0;
  background: transparent;
}

.photo-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #0b0b0c;
}

.photo-frame.photo-frame-window { aspect-ratio: 8 / 5; }

.photo-fallback { position: absolute; inset: 0; }
.photo-fallback svg {
  display: block;
  width: 100%;
  height: 100%;
  animation: none !important;
  transform: none !important;
}

.photo-img {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.82) brightness(0.92) contrast(1.02);
  opacity: 1;
}

.photo-missing {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 2;
  place-items: center;
  padding: 24px;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 11px;
  line-height: 1.6;
  color: var(--dim);
  background: #101011;
}

.photo-card.media-missing .photo-img { display: none; }
.photo-card.media-missing .photo-missing { display: grid; }

.photo-caption {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 7px;
  font-family: var(--font-sans);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: var(--faint);
}

.photo-name { color: var(--dim); }

.photo-compare {
  display: grid;
  gap: 18px;
  margin-top: 4px;
}

.photo-compare .photo-frame { aspect-ratio: 4 / 3; }

.window-fallback {
  background:
    linear-gradient(180deg, #14161a 0%, #0c0e10 55%, #090a0b 100%),
    repeating-linear-gradient(90deg, transparent 0 24%, rgba(233, 228, 218, 0.06) 24% 24.6%),
    repeating-linear-gradient(0deg, transparent 0 38%, rgba(233, 228, 218, 0.05) 38% 38.8%);
  background-blend-mode: normal;
}

main [data-media-slot] { border: 0 !important; background: transparent !important; }
figure[data-media-slot] svg { animation: none !important; }

/* ── title ────────────────────────────────────────────────────────────── */

.title-choice { border-radius: 0 !important; background: transparent !important; }

.screen-head {
  border-bottom: 1px solid var(--rule-soft);
}

.screen-title {
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 400;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ink);
}

.screen-meta {
  font-family: var(--font-sans);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: var(--faint);
}

/* ── dialogs: the same room, no sheet ─────────────────────────────────── */

[role="dialog"].animate-rise {
  background: var(--room) !important;
  backdrop-filter: none !important;
}

[role="dialog"] > header {
  height: 52px !important;
  border-bottom: 1px solid var(--rule) !important;
  padding-left: clamp(16px, 4vw, 40px) !important;
  padding-right: clamp(16px, 4vw, 40px) !important;
}

[role="dialog"] h2 {
  font-family: var(--font-serif) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--ink) !important;
}

[role="dialog"] > header .meta { color: var(--faint) !important; }

[role="dialog"] li { border-radius: 0 !important; background: transparent !important; }
[role="dialog"] li + li { border-top: 1px solid var(--rule-soft) !important; }

[role="dialog"] .rounded-lg,
[role="dialog"] .rounded-xl,
[role="dialog"] .rounded-md { border-radius: 2px !important; }

/* ── phase C: identity gets a little less certain ─────────────────────── */

body[data-phase="untrustworthy"] .msg-author { font-style: italic; opacity: 0.78; }
body[data-phase="untrustworthy"] .msg-time { color: var(--dim) !important; }

/* ── phase D: the interface starts taking up the room ─────────────────── */

body[data-phase="intrusive"] .thread-head { height: 46px !important; }
body[data-phase="intrusive"] .msg { padding: 10px 14px !important; }
body[data-phase="intrusive"] .chat-scroll { padding-left: 14px !important; padding-right: 10px !important; }
body[data-phase="intrusive"] .thread-head p { color: var(--faint) !important; }

/* ── phase E: the social cues are gone ────────────────────────────────── */

body[data-phase="empty"] .msg {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 10px 0 !important;
}

body[data-phase="empty"] .msg > .w-7 { display: none; }
body[data-phase="empty"] .msg-npc,
body[data-phase="empty"] .msg-player { color: var(--ink-soft) !important; }
body[data-phase="empty"] .msg-offline { color: var(--dim) !important; }
body[data-phase="empty"] .msg-author { color: var(--dim) !important; }
body[data-phase="empty"] .choice-card .text-\[12\.5px\] { color: var(--ink-soft) !important; }
body[data-phase="empty"] .thread-head h1 { color: var(--ink) !important; }

/* ── small screens ────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .room-stage { padding: 0; }
  .device {
    width: 100%;
    height: 100dvh;
    max-height: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .device .chat-scroll { padding-left: 14px; padding-right: 12px; }
  .msg { max-width: 100%; }
  .chat-scroll .max-w-\[76\%\] { max-width: 86% !important; }
  .chapter-divider { margin-top: 24px; }
  .display { letter-spacing: -0.02em; }
  .screen-shell { padding-left: 18px; padding-right: 18px; }
}

/* ── motion ───────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .display, .title-choice, .msg, .choice-card { transition: none !important; }
}

body.reduce-motion .chapter-divider,
body.reduce-motion .msg,
body.reduce-motion .title-choice { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .typing-dot { animation: none !important; opacity: 0.55; }
  .msg-clue { animation: none !important; }
}

/* =======================================================================
   Refinement pass: one warm neutral scale, readable metadata, 44px
   controls, and motion that marks change instead of decorating the room.
   ======================================================================= */

:root {
  --color-neutral-50: #faf7f1;
  --color-neutral-100: #f0ebe2;
  --color-neutral-200: #ddd7cc;
  --color-neutral-300: #c7c0b4;
  --color-neutral-400: #a8a095;
  --color-neutral-500: #91897d;
  --color-neutral-600: #7a7368;
  --color-neutral-700: #625c52;
  --color-neutral-800: #2c2925;
  --color-neutral-900: #1a1816;
  --color-neutral-950: #0b0a09;
}

/* legacy cool-grey literals that still sit under live elements */
.meta,
.meta-tight { color: var(--dim); letter-spacing: 0.045em; }
.screen-meta { color: var(--dim); }
.thread-last { color: var(--dim); }
[role="dialog"].animate-rise { background: #080809 !important; }

/* functional metadata clears 4.5:1 against every phase surface */
.thread-head p {
  color: var(--dim) !important;
  font-size: 11px !important;
  letter-spacing: 0.015em !important;
}
.chapter-time {
  color: var(--dim);
  font-size: 10.5px;
  letter-spacing: 0.1em;
}
.msg-time { color: var(--dim) !important; font-size: 10px; }
.msg .text-\[13px\] { text-wrap: pretty; }
.msg-time, .chapter-time, .meta, .meta-tight { font-variant-numeric: tabular-nums; }
.display, .screen-title { text-wrap: balance; }
.thread-head h1 {
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
  text-wrap: nowrap;
}

/* 44px targets without making the chrome look heavier */
.back-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: -10px;
  padding: 0;
  font-size: 17px;
}
.thread-tools { gap: 0 !important; margin-right: -8px; }
.thread-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 10px;
  font-size: 10.5px;
}
.screen-links { gap: 2px 10px; }
.screen-links button { min-height: 36px; padding: 8px 6px; margin-left: -6px; }
[role="dialog"] > header > button[aria-label^="close"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -12px;
  padding: 0;
}
[data-action="tab"].row-hover,
[data-action="thread"] { min-height: 40px; }

/* pressed states read as touch, not as another animation */
.choice-card:active { transform: translateX(2px) !important; }
.thread-tool:active, .back-key:active, .screen-links button:active { opacity: 0.62; }

/* ambient loops are removed; nothing breathes behind the player's back */
.assist-dot { animation: none !important; }
figure[data-media-slot] svg { animation: none !important; }

/* the one message that should materialise materialises once */
@keyframes msgMaterialize {
  from { opacity: 0; transform: translateY(4px); filter: blur(1.5px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.msg-return { animation: msgMaterialize 260ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }

/* a panel arrives like a held breath, not a sheet sliding in */
@keyframes panelIn {
  from { opacity: 0; transform: translateY(6px); filter: blur(2px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
[role="dialog"].animate-rise { animation: panelIn 200ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }

/* the larger-text setting actually gets larger, including choices */
body.text-large .msg,
body.text-large .msg .text-\[13px\],
body.text-large .choice-card .text-\[12\.5px\] { font-size: 16px !important; }

@media (max-width: 640px) {
  .msg, .msg .text-\[13px\] { font-size: 15px !important; line-height: 1.6 !important; }
  body.text-large .msg,
  body.text-large .msg .text-\[13px\] { font-size: 16px !important; }
  .thread-head { padding-left: 10px !important; padding-right: 8px !important; }
  .thread-tool { padding: 0 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .msg-return,
  [role="dialog"].animate-rise { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}

.dot-online { background: #cbc5b9 !important; }
.dot-away { background: #a49c8e !important; }
.dot-last { background: #837c70 !important; }
.dot-unknown { background: #625c52 !important; }
.dot-gone { background: #3a3733 !important; }


/* one-time materialisation for the returned message */
.msg-return { animation: none; }
.msg-return-in { animation: msgMaterialize 260ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.msg-return-note { color: var(--dim) !important; font-size: 10.5px !important; }
.choice-card span[class*="font-mono"] { color: var(--dim) !important; }

@media (max-width: 640px) {
  .thread-head { padding-right: 10px !important; }
  .thread-tools { margin-right: 0; }
}

@media (max-width: 380px) {
  .thread-head > span.relative { display: none; }
}

body[data-phase] .thread-head p { color: var(--dim) !important; }
body[data-phase] .msg-time { color: var(--dim) !important; }

/* remaining small controls */
.sound-toggle {
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
  padding-left: 10px;
  padding-right: 10px;
}
.skip-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* every navigation surface meets the same touch target */
.screen-links button {
  min-height: 44px;
  padding: 10px 8px;
  margin-left: -8px;
}
[data-action="tab"].row-hover,
[data-action="thread"] { min-height: 44px; }
.thread-item { min-height: 56px; }

/* secondary screens: same 44px floor as the primary controls */
button[data-action="tab"],
[data-action="open-contact"],
[data-action="save-evidence"],
[data-action="replay-voice"],
[data-action="clear-notice"],
[data-action="inspect-photo"],
[data-action^="toggle-"] { min-height: 44px; }
[data-action="open-contact"],
[data-action="save-evidence"] { min-width: 44px; }
[data-action="inspect-photo"] { display: inline-flex; align-items: center; }
[data-action="replay-voice"] { width: 44px; height: 44px; }

[data-action="inspect-photo"] { min-width: 44px; justify-content: center; }
button[data-action="tab"] { min-width: 44px; }

/* the smallest functional type is still reading type */
[class~="text-[8px]"],
[class~="text-[8.5px]"],
[class~="text-[9px]"] { font-size: 10px !important; }
[class~="text-[9.5px]"] { font-size: 10.5px !important; }

.photo-caption,
.photo-name,
.screen-meta { font-size: 10.5px !important; }

/* ── v8 entry: the corridor is the menu ─────────────────────────────── */
.title-b,
.select-b {
  position: relative;
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  background: #070707;
  padding:
    max(24px, env(safe-area-inset-top, 0px))
    clamp(20px, 4vw, 52px)
    max(22px, env(safe-area-inset-bottom, 0px));
}

.title-b-bg,
.select-b-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
  filter: brightness(0.46) saturate(0.42) contrast(1.06);
  z-index: 0;
}

.select-b-bg {
  object-position: 68% 48%;
  filter: brightness(0.3) saturate(0.36) contrast(1.08);
}

.title-b-scrim,
.select-b-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(5, 5, 5, 0.94) 0%, rgba(5, 5, 5, 0.8) 34%, rgba(5, 5, 5, 0.24) 68%, rgba(5, 5, 5, 0.42) 100%),
    linear-gradient(0deg, rgba(5, 5, 5, 0.94) 0%, rgba(5, 5, 5, 0.2) 48%, rgba(5, 5, 5, 0.12) 100%);
}

.select-b-scrim {
  background:
    linear-gradient(90deg, rgba(5, 5, 5, 0.94) 0%, rgba(5, 5, 5, 0.74) 42%, rgba(5, 5, 5, 0.42) 100%),
    linear-gradient(0deg, rgba(5, 5, 5, 0.9) 0%, rgba(5, 5, 5, 0.24) 60%, rgba(5, 5, 5, 0.18) 100%);
}

.title-b-content,
.select-b-content {
  position: relative;
  z-index: 2;
  display: grid;
  flex: 1;
  width: 100%;
  min-height: 0;
}

.title-b-content { grid-template-rows: auto minmax(0, 1fr) auto; }
.select-b-content { grid-template-rows: auto minmax(0, 1fr) auto; }

.title-b-head,
.select-b-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.title-b-head h1,
.select-b-head h1 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--ink);
}

.title-b-head h1 {
  font-size: clamp(30px, 3.2vw, 46px);
  line-height: 1;
  letter-spacing: -0.035em;
}

.title-b-head p,
.select-b-head p {
  margin: 10px 0 0;
  color: var(--faint);
  font-size: 10px;
  letter-spacing: 0.13em;
  line-height: 1.5;
}

.title-b-head time {
  flex: none;
  padding-top: 5px;
  color: var(--faint);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10.5px;
  letter-spacing: 0.16em;
}

.title-b-middle {
  display: flex;
  align-items: center;
  min-height: 0;
  padding: clamp(24px, 7vh, 76px) 0;
}

.title-b-message {
  width: min(720px, 70%);
  padding-left: clamp(16px, 2vw, 28px);
  border-left: 1px solid rgba(183, 161, 127, 0.5);
}

.title-b-group {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 14px;
  color: var(--faint);
  font-size: 10px;
  letter-spacing: 0.1em;
}

.title-b-group b {
  color: var(--amber);
  font-weight: 400;
  letter-spacing: 0.04em;
}

.title-b-quote {
  max-width: 26ch;
  margin: 0;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.45;
  letter-spacing: -0.012em;
}

.title-b-return {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-top: 26px;
  padding: 10px 0 10px;
  border: 0;
  border-top: 1px solid var(--rule-soft);
  background: none;
  color: var(--dim);
  text-align: left;
  cursor: pointer;
}

.title-b-return span:first-child {
  color: var(--faint);
  font-size: 9.5px;
  letter-spacing: 0.16em;
}

.title-b-return span:last-child {
  color: var(--ink-soft);
  font-size: 12px;
  transition: color 180ms ease;
}

.title-b-return:hover span:last-child { color: var(--ink); }

.title-b-actions {
  display: flex;
  align-items: flex-start;
  gap: clamp(16px, 2.4vw, 34px);
  border-top: 1px solid var(--rule);
  padding-top: 13px;
}

.title-b-action {
  position: relative;
  display: flex;
  flex: 1 1 0;
  min-height: 64px;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 7px 0 5px;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.title-b-action.primary { flex-grow: 1.4; }

.title-b-action::after {
  content: "";
  position: absolute;
  left: 0;
  top: -14px;
  width: 100%;
  height: 1px;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0.75;
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.title-b-action:hover::after,
.title-b-action:focus-visible::after { transform: scaleX(1); }

.title-b-label {
  color: var(--dim);
  font-size: 13px;
  letter-spacing: 0.01em;
  transition: color 180ms ease;
}

.title-b-action.primary .title-b-label {
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 22px;
  letter-spacing: -0.02em;
}

.title-b-aside {
  color: var(--faint);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 9.5px;
  line-height: 1.4;
  letter-spacing: 0.04em;
}

.title-b-action:hover .title-b-label,
.title-b-action:focus-visible .title-b-label { color: var(--ink); }

.title-b-action:focus-visible,
.select-b-name:focus-visible,
.select-b-foot button:focus-visible {
  outline: 1px solid rgba(183, 161, 127, 0.8);
  outline-offset: 4px;
}

.select-b-head {
  display: block;
  max-width: 900px;
}

.select-b-head p {
  margin: 0 0 12px;
  color: var(--amber);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: lowercase;
}

.select-b-head h1 {
  max-width: 22ch;
  font-size: clamp(28px, 4vw, 52px);
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.select-b-names {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-self: center;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin: clamp(22px, 5vh, 54px) 0;
}

.select-b-name {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  grid-template-areas: "idx name arrow";
  align-items: center;
  column-gap: 12px;
  min-height: 152px;
  padding: clamp(20px, 2.6vw, 32px) clamp(14px, 2.4vw, 30px);
  border: 0;
  border-right: 1px solid var(--rule);
  background: none;
  text-align: left;
  cursor: pointer;
}

.select-b-name:last-child { border-right: 0; }

.select-b-index {
  grid-area: idx;
  color: var(--faint);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
}

.select-b-name-main {
  grid-area: name;
  color: var(--ink-soft);
  font-family: var(--font-serif);
  font-size: clamp(42px, 5.6vw, 72px);
  line-height: 0.95;
  letter-spacing: -0.045em;
  transition: color 180ms ease;
}

.select-b-note {
  grid-area: note;
  max-width: 30ch;
  padding-top: 12px;
  color: var(--faint);
  font-size: 11.5px;
  line-height: 1.55;
}

.select-b-arrow {
  grid-area: arrow;
  align-self: center;
  color: var(--faint);
  font-size: 18px;
  transition: color 180ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.select-b-name:hover .select-b-name-main { color: var(--ink); }
.select-b-name:hover .select-b-arrow { color: var(--amber); transform: translateX(5px); }

.select-b-foot {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-top: 14px;
  border-top: 1px solid var(--rule-soft);
}

.select-b-foot button {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--faint);
  font-size: 10px;
  letter-spacing: 0.12em;
  cursor: pointer;
}

.select-b-foot button:hover { color: var(--ink); }

.select-b-foot p {
  margin: 0 0 0 auto;
  max-width: 42ch;
  color: var(--faint);
  font-size: 10px;
  line-height: 1.5;
  text-align: right;
}

@media (max-width: 640px) {
  .title-b,
  .select-b {
    padding:
      max(22px, env(safe-area-inset-top, 0px))
      20px
      max(20px, env(safe-area-inset-bottom, 0px));
  }

  .title-b-bg { object-position: 66% 50%; }

  .title-b-head h1 { font-size: 32px; }

  .title-b-head p {
    max-width: 28ch;
    margin-top: 8px;
    font-size: 9.5px;
  }

  .title-b-middle {
    align-items: flex-start;
    padding: clamp(34px, 8vh, 70px) 0 20px;
  }

  .title-b-message {
    width: 100%;
    padding-left: 15px;
  }

  .title-b-group {
    gap: 10px;
    margin-bottom: 12px;
    font-size: 9.5px;
  }

  .title-b-quote {
    max-width: none;
    font-size: 22px;
    line-height: 1.46;
  }

  .title-b-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 0 18px;
    padding-top: 11px;
  }

  .title-b-action {
    min-height: 56px;
    padding: 9px 0 7px;
  }

  .title-b-action.primary {
    grid-column: 1 / -1;
    border-bottom: 1px solid var(--rule-soft);
    padding-bottom: 13px;
  }

  .title-b-label { font-size: 13px; }
  .title-b-action.primary .title-b-label { font-size: 21px; }
  .title-b-aside { font-size: 9px; }

  .select-b-head h1 {
    max-width: 18ch;
    font-size: 30px;
  }

  .select-b-names {
    grid-template-columns: 1fr;
    margin: 26px 0;
  }

  .select-b-name {
    min-height: 0;
    padding: 20px 0 22px;
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }

  .select-b-name:last-child { border-bottom: 0; }

  .select-b-name-main { font-size: 46px; }
  .select-b-note { max-width: 28ch; font-size: 11px; }

  .select-b-foot {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .select-b-foot p {
    margin-left: 0;
    max-width: 36ch;
    text-align: left;
  }
}

.delivery-typing {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin: 14px 0 2px 38px;
  color: var(--faint);
  font-family: var(--font-sans);
  font-size: 10.5px;
  letter-spacing: 0.03em;
}

.delivery-typing > span {
  color: var(--amber);
  font-size: 13px;
  line-height: 1;
}

.msg-live-in {
  animation: msgLiveIn 380ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes msgLiveIn {
  from { opacity: 0; transform: translateY(7px); filter: blur(3px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@media (prefers-reduced-motion: reduce) {
  .title-b-action::after,
  .select-b-name-main,
  .select-b-arrow { transition: none !important; }
  .msg-live-in { animation: none !important; }
}

/* ── v9: the conversation as a chat box ────────────────────────────────── */

[data-chat-body] {
  padding-bottom: 4px;
}

[data-msg-scroll] > [data-chat-body] {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100%;
}

[data-chat-body] > * {
  flex: 0 0 auto;
}

.msg {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 18px 18px 18px 6px !important;
  padding: 10px 14px !important;
  background: #0b1015 !important;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.038), rgba(255, 255, 255, 0.012)) !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.28);
  font-size: 14.5px !important;
  line-height: 1.58 !important;
}

.msg-npc {
  color: #c3c9cc !important;
}

.msg-player {
  border-color: rgba(201, 168, 120, 0.17) !important;
  border-radius: 18px 18px 6px 18px !important;
  background: #131920 !important;
  background-image: linear-gradient(180deg, rgba(201, 168, 120, 0.115), rgba(201, 168, 120, 0.035)) !important;
  color: #e2e3e2 !important;
}

.msg-offline {
  border-color: rgba(255, 255, 255, 0.04) !important;
  background: #0d0f11 !important;
  background-image: none !important;
  color: #898f92 !important;
}

.msg-first.msg-npc::after,
.msg-first.msg-player::after {
  content: "";
  position: absolute;
  bottom: 7px;
  width: 8px;
  height: 9px;
  background: inherit;
  background-image: none;
}

.msg-first.msg-npc::after {
  left: -4px;
  background-color: #0b1015;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.msg-first.msg-player::after {
  right: -4px;
  background-color: #131920;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.msg-first.msg-offline::after {
  background-color: #0d0f11;
}

.msg-author {
  font-family: var(--font-sans) !important;
  font-size: 11.5px !important;
  letter-spacing: 0.025em !important;
  font-weight: 400;
}

.msg-coerced {
  box-shadow: inset 0 0 0 1px rgba(201, 168, 120, 0.06), 0 1px 0 rgba(0, 0, 0, 0.28);
}

/* the box at the bottom of the conversation */

.composer-dock {
  flex: none;
  border-top: 1px solid var(--rule);
  background:
    linear-gradient(180deg, rgba(3, 6, 11, 0.45), #03060b 34%);
  padding: 10px clamp(12px, 3vw, 20px) max(10px, env(safe-area-inset-bottom));
}

.composer-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
  padding: 5px 5px 5px 16px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 22px;
  background: #0d1218;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
  transition: border-color 180ms ease;
}

.composer-bar:focus-within {
  border-color: rgba(255, 255, 255, 0.16);
}

.composer-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 0.005em;
  cursor: default;
}

.composer-input::placeholder {
  color: #646d72;
  font-family: var(--font-sans);
  font-size: 13.5px;
  letter-spacing: 0.01em;
  text-transform: none;
  opacity: 1;
}

.composer-send {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: #20262e;
  color: #6f7880;
}

.composer-send:disabled {
  opacity: 0.55;
}

/* replies arrive as draft bubbles above the box */

.reply-tray {
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
  padding: 0 0 8px;
}

.reply-options {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.reply-option {
  display: flex;
  align-items: flex-start !important;
  gap: 9px !important;
  max-width: min(88%, 480px);
  padding: 9px 13px 9px 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.095) !important;
  border-radius: 16px 16px 5px 16px !important;
  background: #10161d !important;
  text-align: left;
  color: #c9cdcf;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
  transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
  animation: replyIn 220ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.reply-option + .reply-option {
  border-top: 1px solid rgba(255, 255, 255, 0.095) !important;
}

.reply-option::before {
  display: none !important;
}

.reply-option:nth-child(2) { animation-delay: 40ms; }
.reply-option:nth-child(3) { animation-delay: 80ms; }

.reply-option:hover,
.reply-option:focus-visible {
  border-color: rgba(201, 168, 120, 0.28) !important;
  background: #171f28 !important;
  transform: translateY(-1px);
}

.reply-option:focus-visible {
  outline: 1px solid rgba(201, 168, 120, 0.6);
  outline-offset: 2px;
}

.reply-option:active {
  transform: translateY(0);
}

.reply-key {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  margin-top: 1px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 8.5px;
  line-height: 1;
  color: #737c81;
}

.reply-label {
  min-width: 0;
  font-size: 13px;
  line-height: 1.42;
  letter-spacing: 0.005em;
}

.reply-note {
  margin: 0;
  padding: 0 2px;
  font-family: var(--font-sans);
  font-size: 11.5px;
  line-height: 1.45;
  color: #7c858a;
}

.reply-card {
  margin: 0 0 2px;
  padding: 5px 0 5px 12px;
  border-left: 1px solid rgba(201, 168, 120, 0.3);
}

.reply-card p {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.5;
  color: #a3aaad;
}

.reply-card-action {
  margin-top: 9px;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  color: #b1b6b7;
  transition: border-color 180ms ease, color 180ms ease, background-color 180ms ease;
}

.reply-card-action:hover,
.reply-card-action:focus-visible {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.03);
  color: #ececeb;
}

@keyframes replyIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 640px) {
  .composer-dock {
    padding-left: 10px;
    padding-right: 10px;
  }
  .reply-option {
    max-width: 92%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reply-option { animation: none !important; }
  .reply-option:hover,
  .reply-option:focus-visible { transform: none; }
  .composer-bar { transition: none; }
}

/* the thought between the message and the room */
.thought-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 24px calc(32px + env(safe-area-inset-bottom, 0px));
  background: #000;
  color: #d8d3c8;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  animation: thoughtCut 120ms steps(1, end) both;
}

.thought-overlay:focus {
  outline: none;
}

.thought-inner {
  width: min(34rem, 100%);
  text-align: center;
}

.thought-text {
  min-height: 1.7em;
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.65;
  letter-spacing: 0.005em;
  color: #d8d3c8;
  white-space: pre-wrap;
}

.thought-text::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 1.05em;
  margin-left: 3px;
  background: #8d877c;
  vertical-align: -0.12em;
}

.thought-overlay.is-done .thought-text::after {
  display: none;
}

.thought-return {
  display: block;
  margin-top: 30px;
  font-family: var(--font-sans);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: #6f6b63;
  opacity: 0;
  transition: opacity 360ms ease;
}

.thought-overlay.is-done .thought-return {
  opacity: 1;
}

.thought-overlay.is-leaving {
  cursor: default;
}

@keyframes thoughtCut {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 640px) {
  .thought-overlay {
    padding-left: 22px;
    padding-right: 22px;
  }
  .thought-text {
    font-size: 18px;
    line-height: 1.6;
  }
}

@media (prefers-reduced-motion: reduce) {
  .thought-overlay {
    animation: none;
  }
  .thought-return {
    transition: none;
  }
}


/* ── endings: three directions ─────────────────────────────────────────── */

.endings-index {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  background: #050505;
  color: var(--ink);
}

.endings-art,
.ending-art {
  display: none;
}

.endings-scrim,
.ending-scrim {
  display: none;
}

.endings-head {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.4rem 1.5rem 0;
}

.endings-back {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 19px;
  line-height: 1;
  color: inherit;
  opacity: 0.55;
  cursor: pointer;
}

.endings-back:hover {
  opacity: 1;
}

.endings-kicker {
  font-family: var(--font-sans);
  font-size: 8.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--faint);
}

.endings-body {
  position: relative;
  z-index: 3;
  display: flex;
  flex: 1;
  align-items: flex-end;
  min-height: 0;
  overflow-y: auto;
  padding: 2rem 1.5rem 6rem;
}

.ending-index-list {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ending-index-row {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) 1rem;
  align-items: baseline;
  gap: 1rem;
}

.ending-index-number {
  font-family: var(--font-sans);
  font-size: 9px;
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
  color: var(--faint);
}

.ending-index-title {
  min-width: 0;
  font-family: var(--font-serif);
  letter-spacing: 0.02em;
}

.ending-index-mark {
  justify-self: end;
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1;
}

/* ── ending scene base ─────────────────────────────────────────────────── */

.ending-scene {
  position: relative;
  min-height: 100dvh;
  overflow-x: hidden;
  background: #050505;
  color: var(--ink);
}

.ending-inner {
  position: relative;
  z-index: 3;
}

.ending-number {
  display: none;
}

.ending-head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  font-family: var(--font-sans);
  font-size: 8.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faint);
}

.ending-head span {
  color: var(--dim);
}

.ending-scene-title {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: 0.025em;
  text-wrap: balance;
}

.ending-copy {
  max-width: 36rem;
}

.ending-scene-line {
  margin: 0 0 1.15rem;
  font-family: var(--font-serif);
  font-size: 15.5px;
  line-height: 1.9;
  text-wrap: pretty;
}

.ending-final {
  margin: 2.8rem 0 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
}

.ending-final figcaption {
  margin-bottom: 0.8rem;
  font-family: var(--font-sans);
  font-size: 8.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faint);
}

.ending-last {
  margin: 0;
  padding-left: 1.1rem;
  border-left: 1px solid var(--rule);
  white-space: pre-line;
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.85;
  color: var(--ink);
}

.ending-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.65rem 1.5rem;
  margin-top: 2.8rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule-soft);
}

.ending-action {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
  cursor: pointer;
}

.ending-action:hover,
.ending-action.is-primary {
  color: var(--ink);
}

.ending-leave {
  margin-left: auto;
}

/* ── direction 01: cinema ──────────────────────────────────────────────── */

[data-design="1"] .endings-art {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  opacity: 0.42;
  filter: grayscale(1) contrast(1.08);
}

[data-design="1"] .endings-scrim {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.08) 32%, #050505 84%);
}

[data-design="1"] .endings-head {
  padding-top: 1.6rem;
}

[data-design="1"] .endings-body {
  align-items: flex-end;
  padding-bottom: 6rem;
}

[data-design="1"] .ending-index-row {
  grid-template-columns: 3rem minmax(0, 1fr) 1rem;
  gap: 1rem;
  padding: 0.5rem 0;
}

[data-design="1"] .ending-index-title {
  font-size: clamp(21px, 3.2vw, 34px);
  line-height: 1.05;
  text-transform: uppercase;
  color: rgba(233, 228, 218, 0.32);
}

[data-design="1"] .ending-index-row.is-found .ending-index-title {
  color: #f0ece3;
}

[data-design="1"] .ending-index-number {
  color: rgba(233, 228, 218, 0.45);
}

[data-design="1"] .ending-index-mark {
  color: #e9e4da;
}

[data-design="1"] .ending-art {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 56vh;
  object-fit: cover;
  object-position: center 42%;
  opacity: 0.55;
  filter: grayscale(1) contrast(1.05);
}

[data-design="1"] .ending-scrim {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.35) 34%, #050505 62%);
}

[data-design="1"] .ending-inner {
  width: min(40rem, 100%);
  margin: 0 auto;
  padding: 43vh 1.5rem 5rem;
}

[data-design="1"] .ending-head {
  color: rgba(233, 228, 218, 0.55);
}

[data-design="1"] .ending-scene-title {
  margin: 1.2rem 0 0;
  font-size: clamp(30px, 5vw, 54px);
  line-height: 0.98;
}

[data-design="1"] .ending-copy {
  margin-top: 2.4rem;
}

[data-design="1"] .ending-scene-line {
  color: var(--ink-soft);
}

/* ── direction 02: paper ───────────────────────────────────────────────── */

[data-design="2"] {
  background: #e8e1d5;
  color: #171512;
}

[data-design="2"] .endings-head {
  color: #171512;
}

[data-design="2"] .endings-kicker,
[data-design="2"] .ending-head {
  color: rgba(23, 21, 18, 0.5);
}

[data-design="2"] .ending-head span {
  color: rgba(23, 21, 18, 0.72);
}

[data-design="2"] .endings-body {
  align-items: flex-start;
  padding-top: 4rem;
}

[data-design="2"] .ending-index-list {
  max-width: 780px;
  columns: 2;
  column-gap: 3.5rem;
}

[data-design="2"] .ending-index-row {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  break-inside: avoid;
  gap: 0.7rem;
  padding: 0.72rem 0;
  border-bottom: 1px dotted rgba(23, 21, 18, 0.32);
}

[data-design="2"] .ending-index-number {
  color: rgba(23, 21, 18, 0.42);
}

[data-design="2"] .ending-index-title {
  font-size: 15px;
  line-height: 1.3;
  color: rgba(23, 21, 18, 0.38);
}

[data-design="2"] .ending-index-row.is-found .ending-index-title {
  color: #171512;
}

[data-design="2"] .ending-index-mark {
  color: #171512;
}

[data-design="2"] .ending-inner {
  width: min(37rem, 100%);
  margin: 0 auto;
  padding: clamp(4rem, 12vh, 8rem) 1.5rem 5rem;
}

[data-design="2"] .ending-scene-title {
  margin: 1.6rem 0 0;
  font-size: clamp(32px, 5.2vw, 52px);
  line-height: 1;
  color: #171512;
}

[data-design="2"] .ending-copy {
  margin-top: 2.6rem;
}

[data-design="2"] .ending-scene-line {
  color: #2b2822;
  font-size: 16px;
  line-height: 1.95;
}

[data-design="2"] .ending-copy p:first-child::first-letter {
  float: left;
  margin: 0.16em 0.12em 0 0;
  font-size: 3.7em;
  line-height: 0.72;
  color: #171512;
}

[data-design="2"] .ending-final {
  border-top-color: rgba(23, 21, 18, 0.28);
}

[data-design="2"] .ending-final figcaption {
  color: rgba(23, 21, 18, 0.5);
}

[data-design="2"] .ending-last {
  border-left-color: rgba(23, 21, 18, 0.3);
  color: #171512;
  font-style: italic;
}

[data-design="2"] .ending-actions {
  border-top-color: rgba(23, 21, 18, 0.25);
}

[data-design="2"] .ending-action {
  color: rgba(23, 21, 18, 0.5);
}

[data-design="2"] .ending-action:hover,
[data-design="2"] .ending-action.is-primary {
  color: #171512;
}

/* ── direction 03: type ────────────────────────────────────────────────── */

[data-design="3"] {
  background: #060606;
  color: var(--ink);
}

[data-design="3"] .endings-head {
  padding-top: 1.8rem;
}

[data-design="3"] .endings-body {
  align-items: flex-start;
  padding-top: 3rem;
}

[data-design="3"] .ending-index-list {
  max-width: 960px;
}

[data-design="3"] .ending-index-row {
  grid-template-columns: minmax(5rem, 13vw) minmax(0, 1fr) 1rem;
  align-items: center;
  gap: 1.5rem;
  padding: 0.15rem 0;
  border-bottom: 1px solid rgba(233, 228, 218, 0.1);
}

[data-design="3"] .ending-index-number {
  font-family: var(--font-serif);
  font-size: clamp(36px, 7vw, 94px);
  font-weight: 400;
  line-height: 0.82;
  letter-spacing: -0.02em;
  color: rgba(233, 228, 218, 0.16);
}

[data-design="3"] .ending-index-row.is-found .ending-index-number {
  color: rgba(233, 228, 218, 0.52);
}

[data-design="3"] .ending-index-title {
  font-size: clamp(18px, 2.5vw, 30px);
  line-height: 1.05;
  text-transform: uppercase;
  color: rgba(233, 228, 218, 0.28);
}

[data-design="3"] .ending-index-row.is-found .ending-index-title {
  color: #efe9de;
}

[data-design="3"] .ending-index-mark {
  color: var(--dim);
}

[data-design="3"] .ending-inner {
  display: grid;
  grid-template-columns: minmax(6rem, 13rem) minmax(0, 1fr);
  align-items: start;
  gap: 1rem 3rem;
  width: min(58rem, 100%);
  margin: 0 auto;
  padding: clamp(4rem, 12vh, 8rem) 1.5rem 5rem;
}

[data-design="3"] .ending-number {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(84px, 16vw, 220px);
  font-weight: 400;
  line-height: 0.72;
  letter-spacing: -0.04em;
  color: rgba(233, 228, 218, 0.13);
}

[data-design="3"] .ending-main {
  min-width: 0;
}

[data-design="3"] .ending-scene-title {
  margin: 1.4rem 0 0;
  font-size: clamp(30px, 4.4vw, 50px);
  line-height: 0.98;
}

[data-design="3"] .ending-copy {
  margin-top: 2.4rem;
  max-width: 34rem;
}

[data-design="3"] .ending-scene-line {
  color: #bdb6aa;
}

[data-design="3"] .ending-actions {
  max-width: 34rem;
}

/* ── preview switcher ──────────────────────────────────────────────────── */

.design-switch {
  position: fixed;
  bottom: 0.9rem;
  left: 50%;
  z-index: 300;
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  padding: 0.45rem 0.8rem;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(5, 5, 5, 0.7);
  backdrop-filter: blur(8px);
  font-family: var(--font-sans);
  font-size: 8.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(233, 228, 218, 0.42);
}

.design-switch a {
  color: inherit;
  text-decoration: none;
}

.design-switch a.is-on {
  color: #f0ece3;
}

.design-switch-label {
  color: rgba(233, 228, 218, 0.28);
}

.design-switch-divider {
  color: rgba(233, 228, 218, 0.2);
}

/* ── blink: the conversation becomes a thought ────────────────────────── */

.blink-transition {
  position: fixed;
  inset: 0;
  z-index: 190;
  overflow: hidden;
  pointer-events: auto;
}

.blink-lid {
  position: absolute;
  left: 0;
  width: 100%;
  height: 53%;
  background: #000;
  transform: scaleY(0);
  transition: transform 260ms cubic-bezier(0.35, 0, 0.55, 1);
  will-change: transform;
}

.blink-fill {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  transition: opacity 90ms linear 190ms;
}

.blink-lid-top {
  top: 0;
  z-index: 2;
  transform-origin: top center;
  border-radius: 0 0 50% 50% / 0 0 22% 22%;
}

.blink-lid-bottom {
  bottom: 0;
  z-index: 2;
  transform-origin: bottom center;
  border-radius: 50% 50% 0 0 / 22% 22% 0 0;
}

.blink-transition.is-shut .blink-lid {
  transform: scaleY(1);
}

.blink-transition.is-shut .blink-fill {
  opacity: 1;
}

@media (max-width: 720px) {
  [data-design="2"] .ending-index-list {
    columns: 1;
  }

  [data-design="3"] .ending-inner {
    display: block;
    padding: 3.5rem 1.25rem 4rem;
  }

  [data-design="3"] .ending-number {
    margin-bottom: 1.2rem;
    font-size: 68px;
  }

  [data-design="1"] .ending-inner {
    padding-top: 38vh;
  }

  [data-design="1"] .ending-art {
    height: 48vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .blink-lid,
  .blink-fill {
    transition: none;
  }
}

/* ── the ending: the conversation empties ──────────────────────────────
   No separate screen and no second layout. The thread you were reading
   loses its people one at a time, and a voice outside the conversation
   says what is happening from the place the composer used to be.
   ──────────────────────────────────────────────────────────────────── */

.ending-shell {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100dvh;
  min-height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}

.ending-stage {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: clamp(8px, 2.2vw, 28px);
}

.ending-device {
  width: min(780px, 100%);
  height: min(94dvh, 920px);
  max-height: 100%;
}

.ending-thread {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.ending-head {
  flex: none;
}

.ending-avatar {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.035);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

.ending-id {
  flex: 1;
  min-width: 0;
}

/* the ending head is the thread head: same 54px rhythm, but it must be able to
   grow when the ending title is two lines at 320px wide */
.ending-thread .ending-head {
  height: auto !important;
  min-height: 54px;
  padding-top: 7px;
  padding-bottom: 7px;
}

.ending-thread .ending-head .ending-id h1 {
  margin: 0;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere;
  line-height: 1.25 !important;
  transition: font-size 700ms ease;
}

.ending-sub {
  margin: 1px 0 0;
  font-family: var(--font-sans);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

.ending-dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-soft);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.03);
  transition: background 600ms ease, box-shadow 600ms ease;
}

.ending-dot.is-off {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--faint);
}

.ending-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  overflow-anchor: none;
  padding: 2px clamp(12px, 3vw, 22px) 16px;
}

.ending-body {
  display: block;
}

/* one person's messages leave together, oldest line first */
.ending-msg {
  overflow: hidden;
  transition: opacity 620ms ease, height 620ms ease, margin 620ms ease, filter 620ms ease;
}

.ending-msg.is-gone {
  opacity: 0;
  height: 0 !important;
  margin: 0 !important;
  overflow: hidden;
}

/* the killer's turn: everything else recedes, their lines are picked off one at a time */
.ending-msg.is-muted {
  opacity: 0.28;
  filter: saturate(0.5);
}

.ending-msg.is-lit .msg {
  box-shadow: inset 0 0 0 1px rgba(233, 228, 218, 0.16);
}

.ending-shell.is-killer-beat .ending-voice-text {
  color: #e9e4da;
}

.ending-thread .ending-head .ending-id h1.is-killer {
  color: #ece7dd !important;
  letter-spacing: 0.01em !important;
}

/* the voice sits where the composer was: outside the conversation, never a bubble */
.ending-voice {
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  min-height: 118px;
  padding: 16px clamp(16px, 3.4vw, 26px) calc(16px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--rule-soft);
  background: rgba(255, 255, 255, 0.012);
}

.ending-voice-text {
  margin: 0;
  min-height: 1.4em;
  max-width: 42rem;
  font-family: var(--font-serif);
  font-size: clamp(14.5px, 1.5vw, 17px);
  line-height: 1.55;
  color: var(--ink);
  white-space: pre-line;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 620ms ease, transform 620ms ease;
}

.ending-voice.is-on .ending-voice-text {
  opacity: 1;
  transform: none;
}

.ending-voice.is-swapping .ending-voice-text {
  opacity: 0;
}

.ending-voice.is-final .ending-voice-text {
  color: #e9e4da;
  font-size: clamp(15.5px, 1.7vw, 19px);
  letter-spacing: 0.004em;
}

.ending-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 560ms ease;
}

.ending-links.is-in {
  opacity: 1;
  pointer-events: auto;
}

.ending-link {
  appearance: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
  padding: 8px 2px;
  border: 0;
  background: none;
  font-family: var(--font-sans);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  cursor: pointer;
  transition: color 180ms ease;
}

.ending-link:hover,
.ending-link:focus-visible {
  color: var(--ink);
}

.ending-shell.is-revealed .ending-thread .ending-head .ending-id h1 {
  font-size: 18px !important;
  line-height: 1.2 !important;
  animation: endingTitle 1200ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@keyframes endingTitle {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 640px) {
  .ending-stage {
    padding: 0;
  }

  .ending-device {
    width: 100%;
    height: 100%;
    max-height: 100%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .ending-scroll {
    padding-left: 14px;
    padding-right: 14px;
  }

  .ending-voice {
    min-height: 132px;
    padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px));
  }

  .ending-voice-text {
    font-size: 15px;
    line-height: 1.5;
  }

  .ending-voice.is-final .ending-voice-text {
    font-size: 16.5px;
  }

  .ending-link {
    font-size: 11px;
    letter-spacing: 0.12em;
    min-height: 46px;
    padding-right: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ending-msg,
  .ending-voice-text,
  .ending-voice-text,
  .ending-links,
  .ending-dot {
    transition-duration: 0.001ms !important;
  }

  .ending-shell.is-revealed .ending-thread .ending-head .ending-id h1 {
    animation: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   decision preview (preview only: ?preview=decision&design=2|3)

   01 is the shipped tray, kept reachable for comparison.
   02 puts the options in the conversation as reply rows.
   03 gives the composer over to the decision.
   ══════════════════════════════════════════════════════════════════════════════ */

/* The switcher stays out of the phone: on wide screens there is room beside it,
   on a full-bleed phone any fixed chip would sit on the thing being judged. */
.design-switch.is-dp {
  display: none;
}

@media (min-width: 1000px) {
  .design-switch.is-dp {
    display: flex;
    top: auto;
    bottom: 0.9rem;
    left: auto;
    right: 1.2rem;
    transform: none;
  }
}

.dp {
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
  padding: 0 0 8px;
}

.dp-kicker {
  margin: 0 0 6px;
  font-family: var(--font-sans);
  font-size: 9.5px;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: lowercase;
  color: var(--faint);
  text-align: right;
}

.dp .dp-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  padding: 13px 3px 12px;
  border: 0;
  border-top: 1px solid var(--rule-soft);
  border-radius: 0;
  background: none;
  text-align: left;
  color: var(--ink-soft);
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.42;
  letter-spacing: 0.005em;
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease;
}

.dp .dp-row:last-child {
  border-bottom: 1px solid var(--rule-soft);
}

.dp .dp-n {
  flex: none;
  width: 12px;
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 9.5px;
  line-height: 1.7;
  color: var(--faint);
  transition: color 160ms ease;
}

.dp .dp-l {
  min-width: 0;
}

.dp .dp-row:hover,
.dp .dp-row:focus-visible {
  color: var(--ink);
}

.dp .dp-row:hover .dp-n,
.dp .dp-row:focus-visible .dp-n {
  color: var(--amber);
}

.dp .dp-row:focus-visible {
  outline: 1px solid var(--amber);
  outline-offset: 2px;
}

/* 02 — the options are the last thing said in the conversation */
.dp-rows {
  width: 100%;
  max-width: min(100%, 520px);
  margin: 0 0 0 auto;
  padding: 0 0 8px;
}

/* 03 — the composer belongs to the decision, not to typing */
.dp-takeover {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 12px clamp(14px, 3.2vw, 22px) calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--rule);
  background: var(--surface-2);
}

.dp-takeover .dp-kicker {
  text-align: left;
  margin-bottom: 4px;
}

.dp-takeover .dp-row {
  min-height: 44px;
  padding: 11px 2px;
}

.dp-takeover .dp-note {
  margin: 9px 0 0;
  font-family: var(--font-sans);
  font-size: 11px;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--faint);
}

@media (max-width: 640px) {

  .dp .dp-row {
    min-height: 48px;
    padding: 14px 2px 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dp .dp-row,
  .dp .dp-n {
    transition: none;
  }
}