/* Entry 017 — The last thread
   Series: Last Screens.
   Scene art direction: a cool morning mist over still water, the hour after a
   long night — soft, pale, unresolved. One light source: a diffuse brightening
   from high behind the fog, no hard shadows. One temperature: a calm slate
   blue-grey (the photograph's own field). One accent: a warm amber-gold — the
   single warm note, reserved for the surviving thread: the words you send now,
   the one tender line, the active "keep writing" mode. A dark frosted-glass
   chat panel floats in the pale cool air; warmth glows only where you keep writing.
   Recipe (deliberately fresh): display serif EB Garamond (the soul) + Inter
   (the machine); accent #e8a86a; cleaner ~20px radii; dark glass on a light scene. */

:root {
  --lt-accent: #e8a86a;
  --lt-accent-glow: #f3c79a;
  --lt-on-dark: #eef3f6;
}

.thread-scene {
  display: grid;
  place-items: center;
  min-height: 780px;
  padding: 116px 32px;
  border-color: rgba(120, 142, 158, 0.5);
  /* background-first: a real photograph (cool mist on still water) carries the
     mood; a soft cool scrim keeps the dark panel reading as the focal object. */
  background-image:
    linear-gradient(180deg, rgba(60, 86, 104, 0.30) 0%, rgba(86, 112, 130, 0.12) 42%, rgba(46, 70, 88, 0.42) 100%),
    url("../../public/media/backgrounds/pastel-05-daniel.jpg");
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}

/* a paler, cooler vignette than the global default (no black on a high-key scene) */
.thread-scene .scene-vignette {
  box-shadow: inset 0 0 150px rgba(34, 54, 70, 0.34);
}

/* mid layer — the warmth of the kept thread, bleeding into the mist */
.warmth {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 56%;
  width: min(720px, 86%);
  height: 440px;
  transform: translate(-50%, -50%);
  background: radial-gradient(58% 58% at 50% 52%, rgba(232, 168, 106, 0.20), transparent 72%);
  filter: blur(64px);
  pointer-events: none;
  transition: opacity 800ms ease;
}

/* ------------------------------------------------------------------ */
/* THE COMPONENT — one chat thread for someone who is gone             */
/* ------------------------------------------------------------------ */

.thread {
  position: relative;
  z-index: 2;
  width: min(560px, 100%);
  display: grid;
  gap: 18px;
  padding: 26px 26px 22px;
  border-radius: 22px;
  font-family: "Inter", var(--ui-sans);
  /* cool dark frosted glass — a held, private surface over the pale mist */
  background:
    linear-gradient(168deg, rgba(78, 104, 124, 0.40), rgba(26, 42, 55, 0.56));
  border: 1px solid rgba(196, 216, 228, 0.26);
  box-shadow:
    0 1px 0 rgba(224, 238, 246, 0.30) inset,
    0 0 0 1px rgba(14, 24, 32, 0.18),
    0 54px 120px rgba(20, 36, 50, 0.50),
    0 14px 44px rgba(40, 64, 86, 0.30);
  backdrop-filter: blur(28px) saturate(1.25);
  -webkit-backdrop-filter: blur(28px) saturate(1.25);
  color: var(--lt-on-dark);
  transition: filter 700ms ease, background 700ms ease, box-shadow 700ms ease;
}

/* ---- header: avatar, name, the status line where "active now" used to be ---- */
.thread-head {
  display: flex;
  align-items: center;
  gap: 13px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(196, 216, 228, 0.14);
}

.avatar {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: "EB Garamond", Georgia, serif;
  font-size: 21px;
  font-style: italic;
  color: rgba(238, 243, 246, 0.86);
  background: radial-gradient(120% 120% at 30% 25%, rgba(196, 216, 228, 0.30), rgba(60, 84, 102, 0.5));
  border: 1px solid rgba(210, 226, 236, 0.28);
  transition: filter 700ms ease, opacity 700ms ease;
}

.who { display: grid; gap: 2px; margin-right: auto; }

.name {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: #f3f7fa;
}

/* the soul voice — serif, the hero line of meaning */
.status {
  font-family: "EB Garamond", Georgia, serif;
  font-style: italic;
  font-size: 16.5px;
  line-height: 1.3;
  color: var(--lt-accent-glow);
  text-wrap: balance;
}

.head-mark {
  flex: none;
  align-self: flex-start;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  color: #2c1d0f;
  background: linear-gradient(180deg, var(--lt-accent-glow), var(--lt-accent));
  box-shadow: 0 4px 14px rgba(232, 168, 106, 0.4);
}

/* ---- messages ---- */
.messages {
  display: grid;
  gap: 11px;
  max-height: 320px;
  overflow: hidden;
  padding: 4px 1px;
  scroll-behavior: smooth;
}

.msg {
  max-width: 80%;
  display: grid;
  gap: 4px;
}

.msg p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.42;
  padding: 11px 15px;
  border-radius: 17px;
}

.msg time {
  font-size: 10.5px;
  letter-spacing: 0.03em;
  color: rgba(206, 222, 232, 0.5);
  font-variant-numeric: tabular-nums;
}

.msg .receipt { margin-left: 7px; color: rgba(206, 222, 232, 0.42); }

/* theirs — cool translucent glass: present, but not quite here */
.msg.them { justify-self: start; }
.msg.them p {
  background: rgba(154, 180, 196, 0.15);
  border: 1px solid rgba(196, 216, 228, 0.12);
  border-bottom-left-radius: 6px;
  color: rgba(226, 236, 242, 0.74);
}

/* yours — warm paper, the side still speaking */
.msg.you { justify-self: end; text-align: right; }
.msg.you p {
  background: linear-gradient(180deg, rgba(214, 226, 234, 0.94), rgba(190, 206, 218, 0.92));
  border-bottom-right-radius: 6px;
  color: #1b2a36;
}

/* yours, kept — the accent: a private letter, glowing warm */
.msg.you.kept p {
  background: linear-gradient(180deg, var(--lt-accent-glow), var(--lt-accent));
  color: #2c1d0f;
  box-shadow: 0 8px 26px rgba(232, 168, 106, 0.34);
}
.msg.you.kept .kept-tag {
  color: var(--lt-accent-glow);
  font-style: italic;
}

/* ---- reply zone: where "typing…" should be ---- */
.reply-zone {
  min-height: 22px;
  display: flex;
  align-items: center;
  padding: 2px 2px 0;
}

.reply-note {
  margin: 0;
  font-family: "EB Garamond", Georgia, serif;
  font-style: italic;
  font-size: 15px;
  color: rgba(214, 228, 238, 0.62);
}

/* the typing pretence (only in "as if" mode) */
.typing {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  color: rgba(214, 228, 238, 0.6);
}
.typing .dots { display: inline-flex; gap: 4px; }
.typing .dots i {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(214, 228, 238, 0.7);
  animation: blink 1.3s infinite ease-in-out both;
}
.typing .dots i:nth-child(2) { animation-delay: 0.18s; }
.typing .dots i:nth-child(3) { animation-delay: 0.36s; }
@keyframes blink { 0%, 80%, 100% { opacity: 0.25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }

/* memorial banner */
.memorial-banner {
  margin: 0;
  width: 100%;
  text-align: center;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: rgba(206, 222, 232, 0.62);
  padding: 9px 12px;
  border: 1px solid rgba(196, 216, 228, 0.16);
  border-radius: 12px;
  background: rgba(120, 142, 158, 0.1);
}

/* ---- composer ---- */
.composer {
  display: flex;
  gap: 10px;
  align-items: center;
}

.composer input {
  flex: 1;
  font-family: "Inter", var(--ui-sans);
  font-size: 14px;
  color: var(--lt-on-dark);
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid rgba(196, 216, 228, 0.22);
  background: rgba(20, 34, 46, 0.34);
  outline: none;
  transition: border-color 200ms ease, background 200ms ease;
}
.composer input::placeholder { color: rgba(206, 222, 232, 0.42); }
.composer input:focus {
  border-color: rgba(232, 168, 106, 0.6);
  background: rgba(20, 34, 46, 0.5);
}

.send {
  flex: none;
  font-family: "Inter", var(--ui-sans);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid rgba(232, 168, 106, 0.5);
  color: #2c1d0f;
  background: linear-gradient(180deg, var(--lt-accent-glow), var(--lt-accent));
  box-shadow: 0 8px 24px rgba(232, 168, 106, 0.34);
  transition: transform 180ms ease, box-shadow 200ms ease, filter 200ms ease;
}
.send:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(232, 168, 106, 0.46); }

/* ---- the mode switch — the real question, under the thread ---- */
.mode-switch {
  position: relative;
  z-index: 2;
  margin-top: 26px;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(26, 42, 55, 0.4);
  border: 1px solid rgba(196, 216, 228, 0.2);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.mode-switch button {
  font-family: "Inter", var(--ui-sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(220, 232, 240, 0.66);
  transition: color 200ms ease, background 200ms ease, border-color 200ms ease;
}
.mode-switch button:hover { color: #f1f6f9; }
.mode-switch button.is-active {
  color: #2c1d0f;
  background: linear-gradient(180deg, var(--lt-accent-glow), var(--lt-accent));
  box-shadow: 0 6px 18px rgba(232, 168, 106, 0.34);
}

/* ------------------------------------------------------------------ */
/* MODES — each rewrites what the interface does with the dead         */
/* ------------------------------------------------------------------ */

/* keep (default): warm, honest, open — accent present */
.thread[data-mode="keep"] ~ .mode-switch button[data-mode="keep"] {} /* handled by JS .is-active */

/* as if: the app pretends — the warmth dims to a cold ordinary screen */
.thread[data-mode="asif"] { filter: saturate(0.96); }
.thread[data-mode="asif"] .status { color: rgba(150, 210, 178, 0.92); font-style: normal; font-family: "Inter", var(--ui-sans); font-size: 12.5px; letter-spacing: 0.02em; }
.thread[data-mode="asif"] .head-mark { display: none; }
.thread-scene:has(.thread[data-mode="asif"]) .warmth { opacity: 0.12; }

/* memorial: cold institutional freeze — desaturated, read-only, no accent */
.thread[data-mode="memorial"] { filter: saturate(0.45) brightness(0.96); }
.thread[data-mode="memorial"] .status { color: rgba(214, 228, 238, 0.7); }
.thread[data-mode="memorial"] .head-mark {
  background: none; color: rgba(206, 222, 232, 0.5);
  box-shadow: none; border: 1px solid rgba(196, 216, 228, 0.2);
}
.thread[data-mode="memorial"] .avatar { filter: grayscale(0.6) brightness(0.92); }
.thread-scene:has(.thread[data-mode="memorial"]) .warmth { opacity: 0; }

/* keep: warmth full */
.thread-scene:has(.thread[data-mode="keep"]) .warmth { opacity: 1; }

/* unobtrusive photo attribution */
.scene-credit {
  position: absolute;
  right: 16px;
  bottom: 13px;
  z-index: 3;
  font-family: var(--ui-sans);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(40, 60, 74, 0.42);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .typing .dots i { animation: none; }
  .warmth, .thread, .avatar { transition: none; }
}

/* ---- small screens ---- */
@media (max-width: 720px) {
  .thread-scene { padding: 72px 14px; min-height: 0; }
  .thread { padding: 22px 18px 18px; border-radius: 18px; }
  .messages { max-height: 280px; }
  .msg { max-width: 88%; }
  .mode-switch button { padding: 8px 12px; font-size: 11.5px; }
}