/* ============================================================
   TimeRiverV2 — вертикальная «Река времени» (static/js/utils/timeRiverV2.js)
   Полная переделка 2026-07-03: DOM-поток вместо pan-zoom канваса,
   перекрытия карточек невозможны архитектурно.
   Режимы: .trv2-historian (плотный рабочий) / .trv2-citizen (ярко, как ИИ-Мэр).
   Тема: платформенные токены (--bg-*, --text-*, --border) + fallback'и.
   ============================================================ */

/* Легаси ID-правила контейнеров (river_of_time.css/historian.css) перебивают
   класс — фиксируем критичные свойства хоста селектором ID+класс. */
#time-river-container.trv2-host,
#timeline-container.trv2-host,
#time-river-modal-canvas.trv2-host {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

.trv2-host {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 420px;
  background: var(--bg-primary, #0f172a);
  color: var(--text-primary, #e2e8f0);
  border-radius: 12px;
  overflow: hidden;
  font-size: 14px;
}

/* ── Тулбар: чипы-фильтры + поиск ─────────────────────────── */
.trv2-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border, rgba(148, 163, 184, 0.2));
  background: var(--bg-secondary, rgba(15, 23, 42, 0.6));
  flex: 0 0 auto;
}
.trv2-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.trv2-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

.trv2-chip {
  --chip: #64748b;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--chip) 45%, transparent);
  background: color-mix(in srgb, var(--chip) 12%, transparent);
  color: var(--text-primary, #e2e8f0);
  font-size: 12.5px;
  line-height: 1.4;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
  white-space: nowrap;
}
.trv2-chip b { font-weight: 700; opacity: 0.85; }
.trv2-chip:hover { background: color-mix(in srgb, var(--chip) 24%, transparent); }
.trv2-chip:active { transform: scale(0.97); }
.trv2-chip.is-on {
  background: color-mix(in srgb, var(--chip) 32%, transparent);
  border-color: var(--chip);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--chip) 55%, transparent);
}

.trv2-search {
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--border, rgba(148, 163, 184, 0.25));
  background: var(--bg-tertiary, rgba(30, 41, 59, 0.7));
  color: var(--text-primary, #e2e8f0);
  font-size: 13px;
  min-width: 170px;
  outline: none;
}
.trv2-search:focus { border-color: var(--primary, #38bdf8); }

/* ── Лента ────────────────────────────────────────────────── */
.trv2-scroll {
  position: relative;
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 18px 40px 64px;
  scroll-behavior: smooth;
}
/* «Река» — вертикальная градиентная линия слева */
.trv2-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 34px;
  width: 4px;
  border-radius: 2px;
  background: linear-gradient(180deg, #f87171, #a78bfa 25%, #38bdf8 55%, #34d399 80%, #fbbf24);
  opacity: 0.55;
  pointer-events: none;
}

/* ── Декады и годы ────────────────────────────────────────── */
.trv2-decade { margin-bottom: 26px; }
.trv2-decade-head {
  position: sticky;
  top: -16px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px -42px;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--bg-secondary, #1e293b);
  border: 1px solid var(--border, rgba(148, 163, 184, 0.25));
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.02em;
}
.trv2-decade-n {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted, #94a3b8);
  background: var(--bg-tertiary, rgba(148, 163, 184, 0.12));
  border-radius: 999px;
  padding: 1px 8px;
}

.trv2-year { display: flex; gap: 14px; margin-bottom: 14px; }
.trv2-year-badge {
  position: relative;
  flex: 0 0 auto;
  align-self: flex-start;
  margin-left: -46px;
  min-width: 52px;
  text-align: center;
  padding: 3px 8px;
  border-radius: 8px;
  background: var(--bg-tertiary, #1e293b);
  border: 1px solid var(--border, rgba(148, 163, 184, 0.3));
  font-weight: 700;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  z-index: 2;
}
.trv2-year-future .trv2-year-badge { border-style: dashed; color: var(--text-muted, #94a3b8); }
.trv2-year-cards {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── Карточка события ─────────────────────────────────────── */
.trv2-card {
  --accent: #38bdf8;
  position: relative;
  border: 1px solid var(--border, rgba(148, 163, 184, 0.22));
  border-left: 4px solid var(--accent);
  border-radius: 10px;
  background: var(--bg-secondary, rgba(30, 41, 59, 0.55));
  padding: 10px 12px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.08s ease;
  overflow-wrap: anywhere;
}
.trv2-card:hover {
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  box-shadow: 0 4px 18px -8px color-mix(in srgb, var(--accent) 50%, transparent);
}
.trv2-card-big {
  border-left-width: 6px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 10%, transparent),
    var(--bg-secondary, rgba(30, 41, 59, 0.55)) 60%);
}
.trv2-card.is-open { box-shadow: 0 6px 24px -10px color-mix(in srgb, var(--accent) 55%, transparent); }

.trv2-card-head { display: flex; align-items: flex-start; gap: 8px; }
.trv2-cat { flex: 0 0 auto; font-size: 18px; line-height: 1.3; }
.trv2-title {
  flex: 1 1 auto;
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-primary, #f1f5f9);
}
.trv2-scale-chip {
  flex: 0 0 auto;
  font-size: 13px;
  padding: 1px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--chip, var(--accent)) 18%, transparent);
}

.trv2-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
}
.trv2-date { font-size: 12px; color: var(--text-muted, #94a3b8); font-variant-numeric: tabular-nums; }
.trv2-badge {
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--bg-tertiary, rgba(148, 163, 184, 0.14));
  color: var(--text-secondary, #cbd5e1);
  border: 1px solid transparent;
  white-space: nowrap;
}
.trv2-badge-kb { background: rgba(52, 211, 153, 0.16); color: #34d399; border-color: rgba(52, 211, 153, 0.35); }
.trv2-badge-warn { background: rgba(251, 191, 36, 0.14); color: #fbbf24; border-color: rgba(251, 191, 36, 0.35); }

.trv2-desc {
  margin: 7px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary, #cbd5e1);
  white-space: pre-line;
}
.trv2-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.trv2-thumb { margin-top: 8px; }
.trv2-thumb img {
  max-width: 100%;
  max-height: 140px;
  border-radius: 8px;
  object-fit: cover;
  display: block;
}

.trv2-media {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.trv2-media-item {
  display: block;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border, rgba(148, 163, 184, 0.25));
}
.trv2-media-item img { width: 120px; height: 90px; object-fit: cover; display: block; }
.trv2-media-video {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--text-primary, #e2e8f0);
  text-decoration: none;
  background: var(--bg-tertiary, rgba(30, 41, 59, 0.7));
}

.trv2-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.trv2-link-chip {
  font-size: 11.5px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px dashed color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--text-primary, #e2e8f0);
  cursor: pointer;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background 0.15s ease;
}
.trv2-link-chip:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); }

.trv2-src {
  display: inline-block;
  margin-top: 8px;
  font-size: 12px;
  color: var(--primary, #38bdf8);
  text-decoration: none;
}
.trv2-src:hover { text-decoration: underline; }

.trv2-more {
  display: block;
  margin-top: 7px;
  padding: 0;
  border: none;
  background: none;
  color: var(--primary, #38bdf8);
  font-size: 12px;
  cursor: pointer;
}
.trv2-more:hover { text-decoration: underline; }

/* ── Маркер «Сейчас» ──────────────────────────────────────── */
.trv2-now {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px 0 20px -42px;
  position: relative;
  z-index: 2;
}
.trv2-now-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #f43f5e;
  box-shadow: 0 0 0 4px rgba(244, 63, 94, 0.25), 0 0 14px rgba(244, 63, 94, 0.6);
  animation: trv2-pulse 2.2s ease-in-out infinite;
  flex: 0 0 auto;
  margin-left: 21px;
}
.trv2-now-label {
  font-weight: 800;
  font-size: 14px;
  color: #f43f5e;
  background: rgba(244, 63, 94, 0.1);
  border: 1px solid rgba(244, 63, 94, 0.35);
  border-radius: 999px;
  padding: 4px 14px;
}
@keyframes trv2-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(244, 63, 94, 0.25), 0 0 14px rgba(244, 63, 94, 0.6); }
  50% { box-shadow: 0 0 0 7px rgba(244, 63, 94, 0.12), 0 0 20px rgba(244, 63, 94, 0.8); }
}

/* ── Будущее и служебные секции ───────────────────────────── */
.trv2-future .trv2-decade-head {
  background: linear-gradient(90deg, rgba(167, 139, 250, 0.2), rgba(56, 189, 248, 0.15));
  border-color: rgba(167, 139, 250, 0.45);
}
.trv2-future .trv2-card { border-left-style: dashed; }

.trv2-undated { opacity: 0.94; }
.trv2-undated .trv2-decade-head { border-style: dashed; }
.trv2-undated .trv2-card { margin-bottom: 10px; }
.trv2-undated-hint {
  font-size: 12px;
  color: var(--text-muted, #94a3b8);
  margin: -6px 0 12px;
}

.trv2-empty {
  text-align: center;
  padding: 48px 20px;
  color: var(--text-muted, #94a3b8);
  font-size: 14px;
}

/* ── Подсветка перехода по связи ──────────────────────────── */
.trv2-flash {
  animation: trv2-flash-anim 2.4s ease-out;
}
@keyframes trv2-flash-anim {
  0% { box-shadow: 0 0 0 3px var(--accent), 0 0 26px color-mix(in srgb, var(--accent) 80%, transparent); }
  70% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 50%, transparent), 0 0 16px transparent; }
  100% { box-shadow: none; }
}

/* ── Режим ГОРОЖАНИНА: ярче и крупнее (в духе ИИ-Мэра) ────── */
.trv2-citizen { font-size: 15px; }
.trv2-citizen .trv2-line { width: 6px; left: 33px; opacity: 0.75; }
.trv2-citizen .trv2-decade-head {
  font-size: 18px;
  padding: 7px 18px;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.16), rgba(52, 211, 153, 0.12));
  border-color: rgba(56, 189, 248, 0.4);
}
.trv2-citizen .trv2-title { font-size: 15.5px; }
.trv2-citizen .trv2-cat { font-size: 22px; }
.trv2-citizen .trv2-card { padding: 12px 14px; border-radius: 12px; }
.trv2-citizen .trv2-desc { font-size: 13.5px; }
.trv2-citizen .trv2-year-badge { font-size: 14px; }

/* ── Режим ИСТОРИКА: плотнее ──────────────────────────────── */
.trv2-historian .trv2-card { padding: 8px 11px; }
.trv2-historian .trv2-title { font-size: 13.5px; }
.trv2-historian .trv2-desc { font-size: 12.5px; }
.trv2-historian .trv2-year-cards { gap: 8px; }
.trv2-historian .trv2-year { margin-bottom: 10px; }
.trv2-historian .trv2-decade { margin-bottom: 18px; }

/* ── Светлая тема ─────────────────────────────────────────── */
html[data-theme="light"] .trv2-host,
body[data-theme="light"] .trv2-host {
  background: var(--bg-primary, #f8fafc);
  color: var(--text-primary, #0f172a);
}
html[data-theme="light"] .trv2-card,
body[data-theme="light"] .trv2-card {
  background: var(--bg-secondary, #ffffff);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

/* ── Горожанин: кнопка «Полный экран» в поток над лентой ──────
   Легаси .history-floating-actions висит absolute top-right и при v2
   перекрывала бы тулбар ленты. Класс вешает citizen_dashboard.js при
   создании TimeRiverV2. */
#history-pane.history-pane--trv2.active {
  display: flex;
  flex-direction: column;
}
#history-pane.history-pane--trv2 .history-floating-actions {
  position: static;
  align-self: flex-end;
  margin: 0 0 0.6rem;
  z-index: auto;
}
#history-pane.history-pane--trv2 #time-river-container {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
}

/* ── Узкие экраны ─────────────────────────────────────────── */
@media (max-width: 640px) {
  .trv2-scroll { padding-left: 46px; padding-right: 10px; }
  .trv2-line { left: 22px; }
  .trv2-decade-head { margin-left: -30px; font-size: 14px; }
  .trv2-year-badge { margin-left: -36px; min-width: 44px; font-size: 12px; }
  .trv2-now { margin-left: -30px; }
  .trv2-now-dot { margin-left: 10px; }
  .trv2-toolbar { padding: 8px 10px; }
  .trv2-search { min-width: 120px; flex: 1 1 auto; }
}