/* «Магический дневник» — пергамент, чернила, перо, свеча. Всё self-hosted, без CDN. */

@font-face {
  font-family: "DiaryHand";
  src: url("/static/fonts/Caveat-Regular.ttf") format("truetype");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  /* ЕДИНЫЙ рукописный стек — используется и полем ввода, и репликами дневника,
     чтобы почерк совпадал даже если Caveat почему-то не загрузился. */
  --hand: "DiaryHand", "Segoe Script", "Bradley Hand", "Brush Script MT",
          "Comic Sans MS", cursive;
  --ink: #3a2a18;
  --ink-faded: #6b5232;
  --parchment: #e8d9b0;
  --parchment-dark: #d6c294;
  --accent: #8a5a2b;
  --crisis-bg: #f6e3c8;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { min-height: 100%; }

body {
  font-family: Georgia, "Times New Roman", serif;
  color: var(--ink);
  /* Текстура пергамента — чистый CSS, самодостаточно (FR-10) */
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255, 244, 214, 0.55), transparent 60%),
    radial-gradient(ellipse at 75% 80%, rgba(120, 84, 40, 0.25), transparent 55%),
    repeating-linear-gradient(93deg, rgba(122, 91, 47, 0.05) 0 3px, transparent 3px 9px),
    repeating-linear-gradient(2deg, rgba(94, 66, 30, 0.045) 0 2px, transparent 2px 7px),
    linear-gradient(160deg, #4a3520 0%, #2d1f12 100%);
  background-color: #2d1f12;
  padding: 2rem 1rem 3rem;
  display: flex;
  justify-content: center;
}

/* Тёплый виньеточный свет свечи */
.vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 35%, rgba(255, 214, 140, 0.14), transparent 55%),
    radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(15, 9, 4, 0.65) 100%);
  animation: candleFlicker 5s ease-in-out infinite;
  z-index: 0;
}

@keyframes candleFlicker {
  0%, 100% { opacity: 1; }
  47% { opacity: 0.93; }
  52% { opacity: 0.99; }
  68% { opacity: 0.9; }
}

.diary {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 720px;
}

.diary-header { text-align: center; margin-bottom: 1.2rem; color: #e9d8ae; }

.diary-title {
  font-family: var(--hand);
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-shadow: 0 0 18px rgba(255, 206, 120, 0.35);
}

.diary-subtitle { font-style: italic; opacity: 0.75; margin-top: 0.2rem; }

/* Страница-пергамент */
.page {
  position: relative;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(255, 250, 230, 0.5), transparent 55%),
    radial-gradient(ellipse at 85% 90%, rgba(140, 100, 50, 0.28), transparent 50%),
    repeating-linear-gradient(91deg, rgba(120, 88, 44, 0.05) 0 2px, transparent 2px 6px),
    linear-gradient(175deg, var(--parchment) 0%, var(--parchment-dark) 100%);
  border-radius: 6px 10px 8px 6px;
  box-shadow:
    0 1px 0 rgba(255, 248, 224, 0.4) inset,
    0 12px 40px rgba(0, 0, 0, 0.55),
    0 2px 8px rgba(0, 0, 0, 0.35);
  padding: 1.6rem 1.8rem 1.4rem;
}

.page::before, .page::after {
  content: "";
  position: absolute;
  left: 4%; right: 4%;
  height: 10px;
  background: rgba(0, 0, 0, 0.18);
  filter: blur(6px);
  z-index: -1;
}
.page::before { top: -2px; transform: rotate(-0.4deg); }
.page::after { bottom: -2px; transform: rotate(0.5deg); }

/* История «страниц» */
.pages-history { margin-bottom: 1rem; }

.entry { margin: 0.9rem 0; line-height: 1.5; overflow-wrap: break-word; }

/* Единый рукописный почерк для реплик пользователя и дневника (одна страница). */
.entry-user,
.entry-diary {
  font-family: var(--hand);
  font-size: 1.45rem;
  white-space: pre-wrap;
}

/* Реплика пользователя: тот же почерк, чуть светлее чернила + мягкий разделитель слева. */
.entry-user {
  color: var(--ink-faded);
  padding-left: 0.7rem;
  border-left: 2px solid rgba(138, 90, 43, 0.3);
}

/* Ответ дневника: те же чернила, насыщеннее. */
.entry-diary {
  color: var(--ink);
}

/* Подписей авторства («я» / «дневник») нет — никаких меток на странице. */

/* Проявление реплики пользователя целиком (тот же чернильный эффект, но блоком). */
.entry-user.ink-appear {
  animation: inkReveal 0.7s ease-out both;
}

/* Уход реплики пользователя: чернила расплываются и впитываются в пергамент.
   Длительность синхронизирована с USER_FADE_MS в app.js — по её истечении узел
   удаляется из DOM, и только тогда дневник отвечает. */
.entry-user.ink-dissolve,
.entry-diary.ink-dissolve {
  animation: inkDissolve 0.8s ease-in forwards;
}

@keyframes inkDissolve {
  0% { opacity: 1; filter: blur(0); transform: translateY(0); }
  55% { opacity: 0.45; filter: blur(1.2px); transform: translateY(2px); }
  100% { opacity: 0; filter: blur(3px); transform: translateY(8px); }
}

/* Проявление ответа: посимвольный typewriter + растекание чернил (FR-9) */
.entry-diary .ch {
  opacity: 0;
  animation: inkReveal 0.5s ease-out forwards;
}

@keyframes inkReveal {
  0% { opacity: 0; text-shadow: 0 0 6px rgba(58, 42, 24, 0.9); filter: blur(1.5px); }
  60% { opacity: 1; text-shadow: 0 0 3px rgba(58, 42, 24, 0.45); filter: blur(0.4px); }
  100% { opacity: 1; text-shadow: none; filter: blur(0); }
}

/* Курсора-пера нет: мерцающее перо читалось как индикатор ожидания. */

/* Блок кризисной помощи */
.crisis-help {
  background: var(--crisis-bg);
  border: 1.5px solid var(--accent);
  border-radius: 6px;
  padding: 0.8rem 1rem;
  margin: 0.8rem 0;
  font-size: 1rem;
  box-shadow: 0 0 14px rgba(200, 140, 60, 0.35);
}
.crisis-help strong { color: #7a3d10; }
.crisis-help ul { margin: 0.4rem 0 0.4rem 1.2rem; }

/* Поле ввода */
.write-area { position: relative; }

.entry-input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1.5px solid rgba(90, 62, 30, 0.4);
  outline: none;
  resize: vertical;
  /* ЕДИНЫЙ рукописный почерк с ответами дневника: та же гарнитура, размер и начертание. */
  font-family: var(--hand);
  font-size: 1.45rem;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.5;
  padding: 0.4rem 0.2rem;
  caret-color: var(--accent);
}
.entry-input::placeholder { color: rgba(107, 82, 50, 0.55); font-style: italic; }
.entry-input:focus { border-bottom-color: var(--accent); }

/* Слой «впитывания» чернил (FR-8): токены поверх textarea */
.absorb-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Тот же почерк и размер, что у поля ввода — токены точно ложатся поверх текста. */
  font-family: var(--hand);
  font-size: 1.45rem;
  font-weight: 400;
  line-height: 1.5;
  padding: 0.4rem 0.2rem;
  color: var(--ink);
  white-space: pre-wrap;
  overflow: hidden;
  z-index: 2;
}

.absorb-layer .tok {
  display: inline-block;
  animation: inkAbsorb 1.15s ease-in forwards;
}

/* Растворение чернил в пергаменте: расплытие + подъём + исчезновение. */
@keyframes inkAbsorb {
  0% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  45% { opacity: 0.55; transform: translateY(1px) scale(1.02); filter: blur(0.7px); }
  100% { opacity: 0; transform: translateY(6px) scale(1.05); filter: blur(2.4px); }
}

/* Индикатора ожидания нет: ни блока, ни точек, ни анимации. Пока идёт запрос,
   на странице просто ничего нового не появляется. */

/* Кнопки */
.controls { display: flex; gap: 0.8rem; margin-top: 0.9rem; flex-wrap: wrap; }

.btn {
  font-family: Georgia, serif;
  font-size: 0.95rem;
  color: var(--ink);
  background: linear-gradient(175deg, #efe2bd, #d9c496);
  border: 1px solid rgba(90, 62, 30, 0.5);
  border-radius: 4px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: 0.5; cursor: default; transform: none; }

.btn-burn { background: linear-gradient(175deg, #e9c9a0, #cf9a63); }

.quill-icon { font-size: 1.1rem; }

.net-error { color: #8a2f16; font-style: italic; margin-top: 0.6rem; }

/* ===== Сжигание страницы: настоящий огонь ~5 секунд (FR-5) ===== */
/* Пока горит — страница не реагирует на клики; визуал даёт слой .fire-overlay.
   Длительность задаётся переменной --burn-ms, которую выставляет JS, — так
   CSS-анимация и таймер вызова /api/burn не могут разъехаться. */
.burning { pointer-events: none; }

.fire-overlay {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 5;
  border-radius: inherit;
}
.fire-overlay.fade { animation: fireFade 0.6s ease forwards; }
@keyframes fireFade { to { opacity: 0; } }

/* Тёплое свечение, нарастающее снизу */
.fire-overlay .glow {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 100%;
  background: radial-gradient(130% 85% at 50% 108%,
    rgba(255, 150, 40, 0.6), rgba(255, 80, 0, 0.2) 40%, transparent 72%);
  mix-blend-mode: screen;
  opacity: 0;
  animation: glowRise var(--burn-ms, 5000ms) ease-in forwards;
}
@keyframes glowRise {
  0% { opacity: 0; }
  20% { opacity: 0.55; }
  80% { opacity: 0.9; }
  100% { opacity: 0; }
}

/* Обугливание пергамента — тёмный фронт, поднимающийся снизу вверх */
.fire-overlay .char {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 100%;
  background: linear-gradient(0deg,
    #0a0603 0%, #170a04 20%, rgba(45, 18, 6, 0.92) 36%,
    rgba(90, 38, 12, 0.5) 50%, rgba(170, 75, 22, 0.2) 62%, transparent 76%);
  transform: scaleY(0);
  transform-origin: bottom;
  animation: charRise var(--burn-ms, 5000ms) cubic-bezier(0.45, 0, 0.7, 1) forwards;
}
@keyframes charRise {
  0% { transform: scaleY(0); }
  88% { transform: scaleY(1); }
  100% { transform: scaleY(1.02); }
}

/* Пламя: языки поднимаются снизу вверх на протяжении ~5 секунд */
.fire-overlay .flames {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 8%;
  opacity: 0;
  transform-origin: bottom;
  animation: flameRise var(--burn-ms, 5000ms) ease-in forwards;
}
@keyframes flameRise {
  0% { height: 8%; opacity: 0; }
  10% { opacity: 1; }
  55% { height: 80%; opacity: 1; }
  80% { height: 96%; opacity: 0.9; }
  100% { height: 100%; opacity: 0; }
}
.fire-overlay .flame-inner {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(45% 60% at 18% 100%, rgba(255, 214, 90, 0.95), rgba(255, 120, 10, 0.6) 45%, transparent 72%),
    radial-gradient(40% 66% at 40% 100%, rgba(255, 150, 30, 0.95), rgba(220, 60, 0, 0.55) 50%, transparent 74%),
    radial-gradient(48% 62% at 63% 100%, rgba(255, 230, 120, 0.9), rgba(255, 100, 10, 0.55) 48%, transparent 72%),
    radial-gradient(42% 68% at 85% 100%, rgba(255, 140, 20, 0.92), rgba(200, 40, 0, 0.5) 50%, transparent 74%);
  background-repeat: no-repeat;
  filter: blur(2px) contrast(1.25) saturate(1.2);
  mix-blend-mode: screen;
  animation: flameFlicker 0.16s ease-in-out infinite alternate;
}
@keyframes flameFlicker {
  from { transform: scaleX(1) scaleY(1); filter: blur(2px) brightness(1) contrast(1.25) saturate(1.2); }
  to { transform: scaleX(1.05) scaleY(1.09); filter: blur(2.6px) brightness(1.28) contrast(1.32) saturate(1.32); }
}

/* Пепел и искры, летящие вверх */
.fire-overlay .ash {
  position: absolute;
  bottom: -6px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffc27a, #7a3b12 60%, transparent);
  opacity: 0;
  animation: ashRise 3s ease-in infinite;
}
@keyframes ashRise {
  0% { transform: translate(0, 0) scale(1); opacity: 0; }
  12% { opacity: 0.9; }
  70% { opacity: 0.6; }
  100% { transform: translate(var(--dx, 20px), -340px) scale(0.35); opacity: 0; }
}

/* Дисклеймер (FR-12) */
.disclaimer {
  margin-top: 1rem;
  text-align: center;
  color: #cbb98d;
  font-size: 0.85rem;
  opacity: 0.9;
}
.link-btn {
  background: none;
  border: none;
  color: #e6cf9a;
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
  padding: 0;
}

/* Модалки */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(20, 12, 5, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  padding: 1rem;
}
.modal-card {
  background: linear-gradient(175deg, var(--parchment), var(--parchment-dark));
  color: var(--ink);
  max-width: 520px;
  width: 100%;
  border-radius: 6px;
  padding: 1.4rem 1.6rem;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.6);
  max-height: 85vh;
  overflow-y: auto;
}
.modal-card h2 { font-family: var(--hand); font-size: 1.8rem; margin-bottom: 0.6rem; }
.modal-card p, .modal-card ul { margin-bottom: 0.7rem; line-height: 1.5; }
.modal-card ul { padding-left: 1.2rem; }
.modal-actions { display: flex; gap: 0.8rem; margin-top: 0.5rem; }
.privacy-note { font-size: 0.85rem; opacity: 0.8; }

.hidden { display: none !important; }

/* Видно только скринридеру — для однократного объявления готового ответа. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Доступность: СОКРАЩАЕМ анимации, а не отключаем их.
   Раньше здесь стояло animation:none на всех элементах огня — а их базовые
   состояния невидимы (opacity:0 / scaleY(0)), так что оверлей не был бы виден,
   даже если бы JS его создал. Сжигание страницы — смысловая обратная связь,
   а не декор, поэтому под reduce показываем укороченный статичный вариант. */
@media (prefers-reduced-motion: reduce) {
  .vignette { animation: none; }
  .absorb-layer .tok { animation: simpleFadeOut 0.5s ease forwards; }
  .entry-diary .ch { animation: simpleFadeIn 0.3s ease forwards; }
  .entry-user.ink-appear { animation: simpleFadeIn 0.3s ease both; }
  /* Реплика пользователя всё равно должна исчезать — просто быстрее и без
     расплывания. Длительность совпадает с USER_FADE_MS_REDUCED в app.js. */
  .entry-user.ink-dissolve,
  .entry-diary.ink-dissolve { animation: simpleFadeOut 0.3s ease forwards; }

  /* Огонь под reduce: без мерцания и полёта искр, но ВИДИМЫЙ. */
  .fire-overlay .glow { opacity: 0.7; animation: none; }
  .fire-overlay .char {
    transform: scaleY(0);
    animation: charRise var(--burn-ms, 1200ms) ease-out forwards;
  }
  .fire-overlay .flames { height: 60%; opacity: 0.85; animation: none; }
  .fire-overlay .flame-inner { animation: none; filter: blur(2px); }
  .fire-overlay .ash { display: none; }
  .btn { transition: none; }
}
@keyframes simpleFadeOut { to { opacity: 0; } }
@keyframes simpleFadeIn { to { opacity: 1; } }

@media (max-width: 540px) {
  .diary-title { font-size: 2rem; }
  .page { padding: 1.1rem 1rem 1rem; }
  .entry-diary { font-size: 1.3rem; }
}