/* Лента: группировка подряд идущих сообщений, recipient bars, непрочитанное */

#messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--s3) 0 var(--s1);
}

.empty-state {
  margin: auto;
  padding: var(--s6) var(--s4);
  max-width: 420px;
  color: var(--text-muted);
  text-align: center;
  font-size: var(--fs-meta);
}

.empty-state h2 {
  margin: 0 0 var(--s2);
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--text);
}

.topic-group { margin: 0; }

/* Recipient bar: тихая строка "канал > тема" над группой, залипает сверху */
.recipient-bar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: var(--s1);
  padding: var(--s1) var(--s3);
  background: var(--bg);
  border-top: 1px solid var(--border);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.recipient-bar a { color: var(--text-muted); }
.recipient-bar a:hover { color: var(--accent); text-decoration: none; }
.recipient-bar .rb-sep { color: var(--text-faint); }
/* Имя канала и тема в баре, созданном клиентом: без ссылок (клиент не знает
   id канала), но тем же цветом читаемого текста, что и серверные ссылки */
.recipient-bar .rb-channel-static,
.recipient-bar .rb-topic { color: var(--text-muted); }

/* Разделитель дат: по центру, раз в сутки */
.date-divider {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin: var(--s3) var(--s3) var(--s1);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.date-divider::before,
.date-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* Сообщение: шапка с именем (только у первого в блоке) и тело.
   Аватаров нет: имя повторялось бы десять раз в подряд идущем отрезке.
   Действия у каждого сообщения висят справа поверх текста: резерв
   одинаковый у шапки, тела и продолжений, чтобы правый край блока был
   ровным. Permalink есть у всех сообщений, поэтому резерв нужен всегда. */
.message {
  display: block;
  padding: var(--s0) var(--s3);
  padding-right: 76px;
  position: relative;
}

.message:hover { background: var(--surface-hover); }

/* Продолжение блока: отступ сверху меньше, шапки нет */
.message.msg-cont { padding-top: 0; }

.msg-head {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  margin-bottom: var(--s0);
  /* Действия абсолютны и висят справа на строке шапки: не даём контексту
     поиска уехать под них */
  padding-right: 0;
}

.msg-author {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--text);
}

.msg-time {
  font-size: var(--fs-label);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

.msg-edited {
  font-size: var(--fs-label);
  color: var(--text-faint);
  font-style: italic;
}

/* Тело сообщения: markdown-рендер */
.msg-main { min-width: 0; }
/* Тело сообщения набрано текстовым начертанием (направление A):
   засечки читаются как переписка, а интерфейс остаётся без засечек.
   Размер 15.5px при интерфейсных 16px: строка той же ширины вмещает
   больше, и лента плотнее без потери читаемости */
.body {
  overflow-wrap: break-word;
  font-family: var(--font-text);
  font-size: 15.5px;
  line-height: 1.6;
}

/* Внутри текста выделения возвращаются к интерфейсному шрифту: жирный в
   засечках «плывёт» на мелком кегле и читается как документ, а не акцент */
.body b, .body strong { font-family: var(--font); font-weight: 650; font-size: 15px; }
.body p { margin: 0 0 var(--s1); }
.body p:last-child { margin-bottom: 0; }
.body pre {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  padding: var(--s2) var(--s3);
  overflow-x: auto;
  font-size: var(--fs-meta);
}
.body code {
  background: var(--surface);
  border-radius: var(--radius-chip);
  padding: 1px var(--s1);
  font-size: var(--fs-meta);
}
.body pre code { background: none; padding: 0; }
.body blockquote {
  margin: var(--s1) 0;
  padding: var(--s0) var(--s3);
  border-left: var(--s0) solid var(--border-strong);
  color: var(--text-muted);
}
.body table { border-collapse: collapse; margin: var(--s2) 0; }
.body th,
.body td { border: 1px solid var(--border); padding: var(--s1) var(--s2); }

/* Заголовки в ленте: одинаковый вес у всех уровней.

   Своего правила у заголовков не было, и работал браузерный умолчательный
   стиль: h1 = 2em плюс крупные отступы. Одна строка вида "# Итоги
   встречи", вставленная из документа, превращалась в баннер на треть
   ленты. Смысл заголовка сохраняем, громкость делаем соизмеримой с
   сообщением: размер как у текста, выделение только полужирным.
   Уровни h1..h6 не различаем - в переписке иерархия документов не нужна,
   а разный размер провоцировал бы споры о том, какой уровень правильный */
.body h1, .body h2, .body h3,
.body h4, .body h5, .body h6 {
  margin: var(--s2) 0 var(--s1);
  font-size: 1em;
  font-weight: 600;
  line-height: var(--lh-body);
}
/* Первый заголовок не отрывает текст от начала сообщения */
.body > :first-child { margin-top: 0; }

/* Действие /me: та же строка ленты, но набрана курсивом и приглушённо.
   Это реплика о себе, а не реплика в обсуждении, и вес у неё меньше */
.body .msg-action,
.body .msg-action p {
  color: var(--text-muted);
  font-style: italic;
}

/* Непрочитанное: тонкая линия и бледная подсветка, без заливок */
.unread-divider {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin: var(--s2) var(--s3) var(--s1);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

.unread-divider::before,
.unread-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-strong);
}

.message.msg-unread {
  background: var(--accent-soft);
  border-left: var(--s0) solid var(--accent);
  padding-left: calc(var(--s4) - var(--s0));
}

.message.msg-unread:hover { background: var(--accent-soft); }
/* Фон действий совпадает с фоном непрочитанного при наведении */
.message.msg-unread:hover .msg-actions-cont { background: var(--accent-soft); }

/* Строка действий (иконки, появление по наведению) - в actions.css:
   самостоятельный узел ленты, файл упирался в лимит строк */

.edit-area {
  width: 100%;
  min-height: 70px;
  resize: vertical;
  font: inherit;
}

.edit-actions {
  display: flex;
  gap: var(--s2);
  margin-top: var(--s1);
}

.edit-actions button[type="button"]:not(.linklike) {
  padding: var(--s1) var(--s3);
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--bg);
  border-radius: var(--radius-control);
  cursor: pointer;
}

.msg-error {
  font-size: var(--fs-meta);
  margin-top: var(--s1);
}

/* Поиск: строка на всю ширину, результаты теми же блоками сообщений */
.search-form {
  display: flex;
  gap: var(--s2);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--border);
}

.search-form input { flex: 1; }

.search-results { flex: 1; overflow-y: auto; }

.search-hit { border-bottom: 1px solid var(--border); }

.search-context {
  margin-left: var(--s2);
  font-size: var(--fs-label);
  color: var(--text-muted);
}

/* Стили подсказки слэш-команд - в slash.css (отдельный файл: messages.css
   перерос лимит 600 строк, новые блоки туда не добавляем) */

/* Строка-цитата ответа: тихая типографская строка над текстом ответа,
   а не рамочный блок. Клик ведёт к оригиналу, стрелка - единственный
   акцентный элемент */
.msg-quote {
  display: flex;
  gap: var(--s2);
  align-items: baseline;
  max-width: 100%;
  margin: 0 0 var(--s2);
  padding: var(--s1) var(--s2);
  border: 0;
  border-radius: var(--radius-chip);
  background: transparent;
  color: var(--text-faint);
  font: inherit;
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  text-align: left;
  cursor: pointer;
}

.msg-quote:hover,
.msg-quote:focus-visible { background: var(--surface-hover); color: var(--text-muted); }

.msg-quote-arrow { color: var(--accent); }

.msg-quote-author { font-weight: 600; }

.msg-quote-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Удалённый оригинал: не кнопка, перехода нет */
.msg-quote.is-deleted { cursor: default; font-style: italic; }
.msg-quote.is-deleted:hover { background: transparent; color: var(--text-faint); }

/* Прыжок к оригиналу по клику на цитату: короткая вспышка подложкой */
@keyframes msg-flash-fade {
  from { background: var(--accent-soft); }
  to { background: transparent; }
}

.message.msg-flash { animation: msg-flash-fade 2s ease forwards; border-radius: var(--radius-chip); }

/* Полоса статуса прогона агента: служебная строка под сообщением, которое
   запустило агента. Не сообщение: не редактируется, не отвечается, не
   считается непрочитанным. Тише всего остального в ленте - приглушённый
   текст без рамки, единственный цветной элемент - точка состояния.
   Отступ слева совпадает с текстом сообщения, чтобы полоса читалась как
   продолжение реплики, а не как отдельный блок */
.run-status {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  margin: calc(-1 * var(--s1)) 0 var(--s3);
  padding-left: var(--s4);
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--text-muted);
}

.run-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-faint);
  flex-shrink: 0;
}

.run-status.is-live .run-dot {
  background: var(--accent);
  /* Пульсация только у живой работы: движение здесь означает "идёт",
     а не украшает. prefers-reduced-motion отключает её глобальным правилом */
  animation: run-pulse 1.6s ease-in-out infinite;
}

.run-status.is-failed .run-dot { background: var(--danger); }

@keyframes run-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.run-elapsed { font-variant-numeric: tabular-nums; }

/* Шаги прогона: что агент делает прямо сейчас. Список тихий и однострочный -
   полоса служебная, а не содержание ленты. Свежий шаг темнее остальных:
   движение видно и без анимации */
.run-steps {
  flex: 1 1 100%;
  margin: var(--s1) 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 0.85em;
  color: var(--text-faint);
}

.run-step { display: block; }
/* Свежий шаг читается первым: остальные - история, он - «сейчас».
   Маркер добавлен псевдоэлементом, а не текстом в разметке: имя шага
   приходит из стрима агента и не должно смешиваться с украшением */
.run-step.is-current { color: var(--text-muted); font-weight: 600; }
.run-step.is-current::before {
  content: "› ";
  color: var(--accent);
}

/* Полоса с шагами становится колонкой: строка заголовка сверху, список под
   ней. Без этого список встал бы сбоку и сжал текст до нечитаемого */
.run-status:has(.run-steps) {
  flex-wrap: wrap;
  align-items: center;
}


.run-stop {
  margin-left: auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-muted);
  font-size: var(--fs-meta);
  text-decoration: underline;
  cursor: pointer;
}

.run-stop:hover { color: var(--danger); }
.run-stop:disabled { color: var(--text-faint); text-decoration: none; cursor: default; }

/* Узкий экран: сообщение в одну колонку, действия - тихой строкой под
   текстом.

   Что было не так (замеры на 390x844): .message держал padding-right: 120px
   под действия, которые появляются только по hover. При ширине колонки
   243px тексту оставалось 107px, и сообщение шло по слову в строке, а на
   тач-экране действия были вообще недоступны (hover там нет).

   Теперь текст занимает всю ширину, а действия стоят своей строкой внизу
   сообщения и видны всегда. Строкой ниже, а не поверх текста: наложение
   съедало бы правый край первой строки у продолжений блока, где шапки нет. */
@media (max-width: 900px) {
  #messages { padding: var(--s3) 0 var(--s2); }

  .message {
    display: flex;
    flex-direction: column;
    padding: var(--s1) var(--s3);
  }

  /* Отступ справа: на десктопе он резервирует место под абсолютные
     действия (120px). На телефоне действия стоят своей строкой, и резерв
     съедал бы треть ширины: при 390px тексту оставалось 254px */
  .message { padding-right: var(--s3); }

  /* Порядок: шапка, текст, действия. Действия после текста, а не перед ним */
  .message .msg-main { order: 2; }

  /* Тач-режим строки действий (видна всегда, своя строка) - в actions.css */

  /* Группировка подряд идущих сообщений на телефоне не экономит столько,
     сколько на десктопе: без шапки блок теряет только имя, а строка
     действий у каждого сообщения остаётся. Небольшой отступ между
     сообщениями помогает глазу разделить реплики */
  .message + .message { border-top: 1px solid var(--border); }

  /* Имя и время в одну строку: "Анна Петрова" переносилась на две строки
     и шапка сообщения вырастала вдвое */
  .msg-head { gap: var(--s2); }
  .msg-author { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .msg-time { flex-shrink: 0; }

  /* Чипы реакций: на телефоне они и так идут отдельной строкой, отступ
     сверху не нужен */
  .reactions { margin-top: 0; }
}

/* ---- Спойлер: скрыт до клика ----
   WARNING: это CSS-скрытие, а не защита секретов: текст остаётся в HTML
   и виден в исходнике страницы. Задача - не спойлерить сюжет, не шифровать.
   role/tabindex/aria-expanded ставит рендер, клик и Enter/Space обрабатывает
   feed.js */
.spoiler,
.spoiler-block .spoiler-body {
  background: var(--surface);
  color: transparent;
  border-radius: var(--radius-chip);
  cursor: pointer;
  transition: color 0.12s ease;
}

.spoiler:hover,
.spoiler-block:hover .spoiler-body {
  color: var(--text-muted);
}

.spoiler.is-revealed,
.spoiler-block.is-revealed .spoiler-body {
  color: inherit;
  background: transparent;
  cursor: auto;
}

.spoiler-block {
  margin: var(--s2) 0;
  padding: var(--s1) var(--s2);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-control);
}

.spoiler-block .spoiler-title {
  font-weight: 600;
  margin-bottom: var(--s1);
}

/* ---- Подсветка кода (pygments) ----
   Классы приходят от pygments, цвета - из токенов темы: тёмная тема
   перекрашивает их без второго набора правил */
.body pre .k,
.body pre .kd,
.body pre .kn,
.body pre .kr,
.body pre .kt { color: var(--accent); font-weight: 600; }

.body pre .s,
.body pre .s1,
.body pre .s2,
.body pre .sd { color: var(--online); }

.body pre .c,
.body pre .c1,
.body pre .cm { color: var(--text-faint); font-style: italic; }

.body pre .nf,
.body pre .nc { font-weight: 600; }

.body pre .mi,
.body pre .mf { color: var(--danger); }