/* Entry 029 — On second thought
   Series: The Unreliable Narrator (second entry).
   Scene art direction: a hushed, misty-teal room at the blue hour — deep pine dark,
   one cool light diffusing through fog, the desk where a line is quietly being
   reconsidered. Background-first: a real photograph (dark-cool, Yuheng Ouyang) under
   a cool legibility scrim. One frosted-glass answer card floats in a lot of empty air.
   The concept lives in the type itself: the machine's current answer stands clean; its
   retracted first version wears the house red-pen strike, and a jade mark shows only
   what it now stands behind. This is the one entry where the proofreader's mark IS the
   interaction.
   Own recipe, distinct from 027 (cyan / Fraunces / IBM Plex Mono / 12px, defocused
   band) and 028 (clay-amber / Spectral / Space Grotesk / 20px, warm dune): jade accent
   #5f9e8f, house-red strike, Source Serif 4 + JetBrains Mono, 16px radius, cool misty
   teal. */

.revise-scene {
  --deep: #0e1a18;
  --panel-ink: #eef4f1;
  --panel-dim: rgba(210, 224, 219, 0.60);
  --accent: #5f9e8f;          /* jade — what it now stands behind */
  --accent-glow: #8fc7b8;
  --strike: #c34327;          /* the house red-pen, warmed for the strike */
  --radius: 16px;

  display: grid;
  place-items: center;
  min-height: 800px;
  padding: 120px 32px;
  border-color: rgba(9, 16, 15, 0.7);
  /* background-first: the misty-teal photograph carries the mood; a cool scrim
     keeps the card legible and pulls the corners into shadow. */
  background-image:
    linear-gradient(168deg, rgba(9, 18, 16, 0.66) 0%, rgba(12, 22, 20, 0.34) 44%, rgba(7, 14, 13, 0.74) 100%),
    url("../../public/media/backgrounds/dark-cool-17-yuheng.jpg");
  background-size: cover, cover;
  background-position: center, center 46%;
  background-repeat: no-repeat, no-repeat;
}

/* mid layer — a soft pool of cool light drifting up behind the card */
.fog {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 44%;
  width: min(940px, 98%);
  height: 560px;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(56% 56% at 48% 46%, rgba(120, 176, 162, 0.20), transparent 70%),
    radial-gradient(44% 44% at 62% 60%, rgba(150, 196, 184, 0.12), transparent 74%);
  filter: blur(64px);
  pointer-events: none;
}

/* ------------------------------------------------------------------ */
/* THE COMPONENT — one answer card that changes its mind               */
/* ------------------------------------------------------------------ */

.answer {
  position: relative;
  z-index: 2;
  width: min(680px, 100%);
  display: grid;
  gap: 24px;
  padding: 40px 42px 30px;
  border-radius: var(--radius);
  font-family: "JetBrains Mono", var(--ui-sans);
  color: var(--panel-ink);
  background:
    linear-gradient(166deg, rgba(150, 190, 178, 0.13), rgba(11, 20, 18, 0.32));
  border: 1px solid rgba(160, 200, 188, 0.22);
  box-shadow:
    0 1px 0 rgba(214, 236, 228, 0.24) inset,
    0 0 0 1px rgba(6, 12, 11, 0.24),
    0 52px 120px rgba(4, 10, 9, 0.60),
    0 14px 44px rgba(30, 70, 62, 0.22);
  backdrop-filter: blur(26px) saturate(1.2);
  -webkit-backdrop-filter: blur(26px) saturate(1.2);
}

/* --- head: the question + a live status --- */
.answer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(160, 196, 186, 0.16);
}

.ask {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--panel-dim);
  max-width: 42ch;
}

.ask-label {
  display: inline-block;
  margin-right: 0.6em;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(143, 199, 184, 0.72);
  vertical-align: 1px;
}

.status {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(210, 224, 219, 0.66);
  white-space: nowrap;
  padding-top: 2px;
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-glow);
  box-shadow: 0 0 0 0 rgba(143, 199, 184, 0.5);
}

.status[data-state="thinking"] .status-dot {
  animation: pulse 1.6s ease-in-out infinite;
}
.status[data-state="settled"] .status-dot {
  background: var(--accent);
  box-shadow: 0 0 10px rgba(95, 158, 143, 0.6);
  animation: none;
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(143, 199, 184, 0.5); opacity: 1; }
  50% { box-shadow: 0 0 0 6px rgba(143, 199, 184, 0); opacity: 0.6; }
}

/* --- the reply: serif for the soul, with the revision marks --- */
.reply-wrap {
  position: relative;
}

.reply {
  margin: 0;
  font-family: "Source Serif 4", var(--serif, Georgia), serif;
  font-size: 1.32rem;
  line-height: 1.62;
  letter-spacing: 0.002em;
  color: #f2f7f4;
}

.reply .clause { transition: color 0.5s ease; }

/* a struck (retracted) fragment — the house red pen */
.reply del {
  text-decoration: none;
  position: relative;
  color: rgba(214, 176, 168, 0.72);
  margin-right: 0.12em;
}
.reply del::after {
  content: "";
  position: absolute;
  left: -0.04em;
  right: -0.04em;
  top: 54%;
  height: 2px;
  background: var(--strike);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  animation: strike 0.42s ease forwards;
  box-shadow: 0 0 6px rgba(195, 67, 39, 0.5);
}
@keyframes strike { to { transform: scaleX(1); } }

/* the replacement — arrives in jade, then settles to ink, keeping a quiet jade underline */
.reply ins {
  text-decoration: none;
  color: var(--accent-glow);
  border-bottom: 1.5px solid rgba(95, 158, 143, 0.55);
  padding-bottom: 0.02em;
  animation: settle 1.5s ease forwards;
}
@keyframes settle {
  0% { color: var(--accent-glow); background: rgba(95, 158, 143, 0.14); }
  100% { color: #f2f7f4; background: transparent; }
}

/* a clause held, unchanged, through every revision — a small jade tick once committed */
.answer[data-committed="true"] .reply .held::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 0.5em;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: 0.28em;
  opacity: 0.7;
}

/* --- margin notes: the machine's working, in mono --- */
.margin {
  margin-top: 18px;
  display: grid;
  gap: 9px;
}

.note {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.8em;
  align-items: baseline;
  font-size: 0.72rem;
  line-height: 1.45;
  color: rgba(206, 222, 216, 0.62);
  opacity: 0;
  transform: translateY(4px);
  animation: noteIn 0.5s ease forwards;
}
@keyframes noteIn { to { opacity: 1; transform: none; } }

.note .ts {
  color: rgba(143, 199, 184, 0.72);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.note .why { color: rgba(214, 176, 168, 0.82); }

/* --- ledger: the revision spine + tally --- */
.ledger {
  display: grid;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid rgba(160, 196, 186, 0.16);
}

.spine {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.spine-label {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(143, 199, 184, 0.6);
  margin-right: 2px;
}

.vchip {
  appearance: none;
  cursor: pointer;
  font: inherit;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: rgba(210, 224, 219, 0.7);
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid rgba(160, 196, 186, 0.28);
  background: rgba(20, 36, 32, 0.4);
  transition: all 0.22s ease;
}
.vchip:hover { border-color: rgba(143, 199, 184, 0.6); color: #eef4f1; }
.vchip.is-current {
  color: #0e1a18;
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 600;
}
.vchip.is-retracted { text-decoration: line-through rgba(195, 67, 39, 0.7); }

.tally {
  margin: 0;
  font-family: "Source Serif 4", serif;
  font-style: italic;
  font-size: 0.98rem;
  color: rgba(224, 236, 231, 0.82);
}
.tally b { font-style: normal; font-weight: 600; color: var(--accent-glow); }

/* --- controls --- */
.controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 4px;
}

.btn-commit {
  appearance: none;
  cursor: pointer;
  font: inherit;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: #eef4f1;
  padding: 9px 16px;
  border-radius: 10px;
  border: 1px solid rgba(143, 199, 184, 0.5);
  background: linear-gradient(180deg, rgba(95, 158, 143, 0.24), rgba(95, 158, 143, 0.10));
  transition: all 0.2s ease;
}
.btn-commit:hover { border-color: var(--accent); background: linear-gradient(180deg, rgba(95, 158, 143, 0.34), rgba(95, 158, 143, 0.16)); }
.btn-commit:disabled { opacity: 0.4; cursor: default; }

.asks { display: flex; gap: 8px; flex-wrap: wrap; }

.ask-chip {
  appearance: none;
  cursor: pointer;
  font: inherit;
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  color: rgba(206, 222, 216, 0.66);
  padding: 6px 11px;
  border-radius: 8px;
  border: 1px solid rgba(160, 196, 186, 0.2);
  background: transparent;
  transition: all 0.2s ease;
}
.ask-chip:hover { color: #eef4f1; border-color: rgba(143, 199, 184, 0.45); }
.ask-chip.is-on {
  color: #eef4f1;
  border-color: rgba(143, 199, 184, 0.55);
  background: rgba(95, 158, 143, 0.12);
}

.disclaimer {
  margin: 0;
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  color: rgba(190, 208, 202, 0.5);
}

.scene-credit {
  position: absolute;
  right: 14px;
  bottom: 11px;
  z-index: 3;
  font-family: var(--ui-sans);
  font-size: 0.58rem;
  letter-spacing: 0.05em;
  color: rgba(226, 240, 234, 0.4);
}

@media (max-width: 640px) {
  .revise-scene { padding: 84px 16px; min-height: 720px; }
  .answer { padding: 30px 24px 24px; gap: 20px; }
  .reply { font-size: 1.14rem; }
  .answer-head { flex-direction: column; gap: 10px; }
}