/* =========================================================
   Страница публикации (post detail)

   Одна вертикальная колонка по центру страницы: шапка, заголовок,
   основное фото, дальше текст и фотографии в авторском порядке, затем
   реакции с голосованием и комментарии.

   Двухколоночного разворота (крупное фото слева, узкая колонка текста
   справа) здесь нет: медиа и текст живут в одном потоке. Фотографии
   выводятся последовательно, без сеток и мозаик.

   Страница — раскрытая карточка ленты, поэтому шапка, футер, реакции,
   голосование, закладка и «поделиться» берут классы карточки
   (.post-card__*) и живут на её стилях из общего слоя feed-card.css.
   Здесь остаётся только то, чего в ленте нет: колонка 720px и её отступы,
   заголовок, тело публикации и комментарии.
   ========================================================= */

.post-page {
  --post-column: 720px;
  --post-gutter: 28px;
  width: 100%;
  max-width: calc(var(--post-column) + 2 * var(--space-3));
  margin-inline: auto;
  padding: 28px var(--space-2) 72px;
}

/* Карточка публикации на молочном фоне. Подложку, рамку, скругление и тень
   даёт общий слой ленты (.card в feed-card.css) — страница поста не заводит
   собственных: одна и та же карточка везде выглядит одинаково. */
.post-detail {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

/* Карточка страницы не «подпрыгивает» под курсором: это не ссылка. */
.post-detail:hover {
  box-shadow: var(--shadow-sm);
}

/* ===== Шапка карточки =====
   Разметку и стили шапка берёт у карточки ленты (.post-card__header,
   .post-card__avatar, .post-card__identity, .post-card__author-name,
   .post-card__byline, .post-card__more). Здесь остаются только отступы
   по колонке страницы и мелочи, которых в ленте нет: значок верификации
   рядом с именем и меню «•••» на нативном <details>.

   Три колонки: аватар — авторская зона — меню действий. Меню стоит в
   последней колонке, то есть всегда у правого края строки; авторская
   зона занимает всю середину, поэтому имя и метаданные выровнены по
   одной левой границе. */
.post-detail__header {
  grid-template-columns: 38px minmax(0, 1fr) 34px;
  align-items: start;
  gap: 11px;
  padding: 20px var(--post-gutter) 6px;
}

/* Аватар и «•••» держатся строки имени: подпись под именем может занять
   и две строки (на узком экране место уходит на свою), но шапка от этого
   не перекашивается — верхняя строка остаётся общей осью. */
.post-detail__header .post-card__avatar,
.post-detail__header .post-detail__menu {
  margin-top: -1px;
}

/* Аватар на странице поста тише, чем в ленте: главный объект здесь —
   публикация, а не её автор. 38 px хватает, чтобы узнать человека, и не
   хватает, чтобы перетянуть внимание с заголовка и первой фотографии. */
.post-detail__header .post-card__avatar {
  width: 38px;
  height: 38px;
}

.post-detail__header .post-card__avatar .avatar__initials {
  font-size: 14px;
}

.post-detail__author {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

/* Имя автора — единственный тёмный текст в шапке; всё остальное серое. */
.post-detail__header .post-card__author-name {
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
}

/* Строка метаданных: серые дата и время, за ними чип места. Дата и время
   не разрываются посреди строки; при нехватке места сжимается только
   география, а её текст обрезается многоточием. */
.post-detail__header .post-card__byline {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 4px 8px;
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  line-height: 18px;
  color: var(--c-secondary);
}

.post-detail__header .post-card__byline time {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Две записи одной даты: числовая для десктопа и компактная («10 авг,
   09:40») для узкого экрана. Видна всегда ровно одна — на широком экране
   строка метаданных вмещает полный формат, на узком он занимал бы её
   половину. Точка-разделитель тоже мобильная: на десктопе место остаётся
   отдельным серым чипом, разделять его точкой незачем. */
.post-detail__header .post-detail__date--compact,
.post-detail__header .post-detail__byline-sep {
  display: none;
}

.post-detail__author .post-card__author-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Место в шапке — обычная строка метаданных без серой плашки.
   Длинное название по-прежнему обрезается, а не растягивает шапку. */
.post-detail__header .post-location {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  padding: 0;
  border-radius: 0;
  background: transparent;
  font-size: 12px;
  line-height: 16px;
}

/* «Объект, населённый пункт» — одна текстовая строка (см. posts.css):
   в гибком ряду название объекта обрезалось до пустоты раньше, чем
   населённый пункт, а запятая отрывалась от него на ширину gap. */
.post-detail__header .post-location--place {
  display: block;
  flex: 0 1 auto;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.post-detail__header a.post-location:hover {
  background: transparent;
}

a.post-card__author-name:hover {
  color: var(--c-primary);
}

/* Меню действий — нативный <details>, поэтому работает без JS. Кнопка
   выглядит как «•••» карточки ленты, ей нужен лишь сброс маркера <summary>. */
.post-detail__menu {
  position: relative;
  flex-shrink: 0;
  justify-self: end;
}

.post-detail__menu-btn {
  cursor: pointer;
  list-style: none;
}

.post-detail__menu-btn::-webkit-details-marker {
  display: none;
}

.post-detail__menu[open] .post-detail__menu-btn {
  background: var(--c-pill);
  color: var(--c-text);
}

.post-detail__menu-list {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 20;
  min-width: 216px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  box-shadow: var(--shadow-md);
}

.post-detail__menu-list a,
.post-detail__menu-list button {
  display: block;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--c-text);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.post-detail__menu-list a:hover,
.post-detail__menu-list button:hover {
  background: var(--c-pill);
  color: var(--c-text);
}

.post-detail__menu-danger,
.post-detail__menu-list a.post-detail__menu-danger:hover {
  color: var(--c-danger);
}

/* ===== Заголовок =====
   Отдельный блок под шапкой. Воздуха над ним больше, чем внутри самой
   шапки, поэтому заголовок читается как заголовок публикации, а не как
   третья строка авторской подписи. */
.post-detail__title {
  margin: 26px var(--post-gutter) 0;
  font-family: var(--ff-heading);
  font-size: 30px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--c-text);
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

/* ===== Тело публикации =====
   Первая фотография начинается заметно ниже заголовка: шапка, заголовок и
   фотография — три отдельных смысловых блока, а не сплошная стопка. */
.post-detail__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 26px var(--post-gutter) 24px;
}

/* Блоки лежат в flex-колонке, поэтому вертикальные интервалы задаёт gap:
   собственные отступы блоков из posts.css здесь только мешали бы. */
.post-detail__body > .post-block {
  margin: 0;
}

/* Фотография занимает всю ширину контентной колонки и показывается
   целиком. Ни фиксированной высоты, ни aspect-ratio, ни object-fit: cover —
   иначе горизонтальный кадр перестал бы быть низким, а вертикальный
   высоким. Ширина 100%, высота auto — и никаких серых полей вокруг. */
.post-detail__body > .post-block--image {
  max-width: none;
  margin-inline: 0;
}

.post-detail__body .gallery-thumb {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 14px;
  overflow: hidden;
  background: transparent;
  cursor: zoom-in;
}

.post-detail__body .post-block--image img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: initial;
  background: transparent;
}

/* Счётчика «N фото» на странице поста нет: он нужен ленте, где видно одно
   фото публикации, а здесь все фотографии и так перед глазами. */

.post-detail__body figcaption {
  margin-top: 8px;
  color: var(--c-secondary);
  font-size: 13px;
  line-height: 1.5;
  font-style: normal;
  text-align: left;
}

/* Текстовые блоки: комфортная длина строки и межстрочный интервал.
   Каждый блок остаётся отдельным — тексты не склеиваются в один абзац. */
.post-detail__body > .post-block--text {
  color: var(--c-text);
  font-size: 17px;
  line-height: 1.7;
  overflow-wrap: break-word;
  word-break: break-word;
}

.post-detail__body > .post-block--text p + p {
  margin-top: 1.1em;
}

.post-detail__body > .post-block--text p:last-child {
  margin-bottom: 0;
}

.post-detail__body > .post-block--link a {
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* ===== Футер: реакции, голосование и утилитарные действия =====
   Это футер карточки ленты (.post-card__footer, .post-card__reactions-row,
   .post-card__stats, .post-card__vote-label, .post-card__action-btn) — свои
   размеры пилюль, эмодзи и кнопок страница поста не заводит. Отличий два:
   отступы по колонке страницы и линия сверху, которая в ленте приходит от
   полосы голосования. */
.post-detail__footer {
  flex-wrap: wrap;
  padding-inline: var(--post-gutter);
  border-top: 1px solid var(--c-divider);
}

/* ===== Комментарии ===== */
.post-detail__comments {
  padding: 20px var(--post-gutter) 24px;
  border-top: 1px solid var(--c-divider);
  background: transparent;
}

.post-detail__comments .comments-header {
  margin-bottom: 16px;
  padding: 0;
  border: 0;
}

.post-detail__comments .comments-title {
  font-family: var(--ff-heading);
  font-size: 20px;
  line-height: 26px;
  font-weight: 700;
  color: var(--c-text);
}

.post-detail__comments .comment-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  min-width: 0;
}

/* Комментарии не «уползают» по ширине: длинные слова и ссылки переносятся,
   вложенные ветки не выталкивают карточку за край колонки. */
.post-detail__comments .comment,
.post-detail__comments .thread-children {
  max-width: 100%;
  min-width: 0;
}

.post-detail__comments .comment-body {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Пустого места вместо комментариев не остаётся: одна строка на молочной
   подложке вместо крупного пунктирного блока. */
.post-detail__comments .no-comments {
  display: flex;
  align-items: center;
  min-height: 52px;
  margin: 0;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: var(--c-pill);
  color: var(--c-secondary);
  font-size: 14px;
  line-height: 1.4;
  text-align: left;
}

/* ===== Форма комментария =====
   Один контейнер вместо «рамки внутри рамки внутри рамки»: рамка только
   у поля ввода, панель форматирования лежит внутри него, подпись и строка
   действий стоят на фоне карточки. */
.post-detail__comments .comment-form-section {
  margin-top: 20px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* Базовые правила отбивают подпись и поле от края формы на var(--space-3);
   в аккуратной форме эти отступы только ломают выравнивание — подпись,
   панель форматирования, поле и кнопки стоят по одной вертикали. */
.post-detail__comments .comment-form-label {
  display: block;
  margin: 0 0 10px;
  padding-left: 0;
  color: var(--c-text);
  font-size: 14px;
  font-weight: 600;
}

.post-detail__comments .comment-editor {
  width: 100%;
  min-width: 0;
}

/* Единственная рамка формы: внутри неё панель форматирования и поле. */
.post-detail__comments .editor-field {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  background: var(--c-surface);
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.post-detail__comments .editor-field:focus-within {
  border-color: color-mix(in srgb, var(--c-primary) 45%, var(--c-border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary) 14%, transparent);
}

.post-detail__comments .comment-form-textarea,
.post-detail__comments .reply-form textarea {
  display: block;
  width: 100%;
  margin: 0;
  min-height: 84px;
  padding: 10px 14px 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--c-text);
  font: inherit;
  font-size: 15px;
  line-height: 1.6;
  resize: vertical;
}

.post-detail__comments .comment-form-textarea:focus,
.post-detail__comments .reply-form textarea:focus {
  outline: none;
  /* Без scale(1.01) базового .textarea-auto: поле в рамке формы не должно
     подпрыгивать под фокусом — рамку подсвечивает :focus-within. */
  transform: none;
  border: 0;
  box-shadow: none;
}

.post-detail__comments .form-actions-with-attachments {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 12px 0 0;
  padding: 0;
}

.post-detail__comments .attachment-buttons {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
}

.post-detail__comments .attachment-status {
  flex-basis: 100%;
  order: 3;
  color: var(--c-secondary);
  font-size: 13px;
}

.post-detail__comments .form-actions-with-attachments .btn.primary {
  min-width: 140px;
}

/* Самолётик — примета мобильной кнопки отправки: на десктопе у неё есть
   слово, и иконка рядом с ним ничего не добавляет. */
.comment-form-submit__icon {
  display: none;
}

.post-detail__comments .comment-form-section--guest {
  display: flex;
  justify-content: center;
}

/* Панель форматирования лежит внутри поля и своей рамки не имеет —
   от текста её отделяет одна тонкая линия. */
.post-detail__comments .text-format-toolbar {
  gap: 4px;
  padding: 6px 8px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--c-divider);
  border-radius: 0;
  margin-top: 0;
  box-shadow: none;
  backdrop-filter: none;
}

.post-detail__comments .text-format-btn {
  width: 32px;
  height: 32px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  color: var(--c-secondary);
  font-size: 14px;
}

.post-detail__comments .text-format-btn:hover {
  background: var(--c-pill);
  color: var(--c-primary);
}

.post-detail__comments .text-format-toolbar + textarea {
  margin-top: 0;
}

/* =========================================================
   Планшет
   ========================================================= */
@media (max-width: 900px) {
  .post-page {
    --post-gutter: 22px;
    padding: 20px var(--space-2) 64px;
  }

  .post-detail__title {
    font-size: 26px;
  }
}

/* =========================================================
   Мобильная версия

   На узком экране страница читается не как сжатый десктоп, а как
   раскрытый пост из мобильной ленты: компактная строка автора, лёгкий
   заголовок, фото во всю ширину, под ним один action-bar и сразу
   комментарии. Ни один блок здесь не держит фиксированной высоты —
   высоту задаёт содержимое, поэтому под фотографией не остаётся
   пустой белой полосы.
   ========================================================= */
@media (max-width: 640px) {
  .post-page {
    --post-gutter: 16px;
    max-width: 100%;
    /* Нижнюю навигацию обходит <body> (см. critical.css): у него
       padding-bottom на высоту таб-бара и safe-area, поэтому странице
       остаётся только собственный воздух под карточкой. Складывать эти
       отступы не нужно — под формой комментария и так пусто. */
    padding: 12px 10px 20px;
    overflow-x: clip;
  }

  /* На узком экране карточку ленты обводит .feed-item, а у страницы поста
     такой обёртки нет — те же скругление и тень берёт на себя сама карточка. */
  .post-detail {
    border: 0;
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
  }

  /* ===== Шапка =====
     Две строки и ничего лишнего: небольшой аватар, имя автора, под ним
     одна строка метаданных, справа — «•••». Дата и место стоят в этой
     строке вместе, через точку: «10 авг, 09:40 · Казань, Татарстан».
     Отдельной серой плашки у места больше нет — она добавляла шапке
     третью строку и лишний прямоугольник рядом с именем. */
  .post-detail__header {
    grid-template-columns: 36px minmax(0, 1fr) 32px;
    align-items: start;
    gap: 10px;
    padding: 14px var(--post-gutter) 0;
  }

  .post-detail__header .post-card__avatar {
    width: 36px;
    height: 36px;
  }

  .post-detail__header .post-card__avatar .avatar__initials {
    font-size: 13px;
  }

  .post-detail__header .post-card__author-name {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
  }

  /* Метаданные — ровно одна строка. Дата не сжимается и не переносится,
     а место занимает остаток строки и обрезается многоточием: длинная
     география не должна разворачивать подпись на два-три ряда. */
  .post-detail__header .post-card__byline {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 5px;
    min-width: 0;
    font-size: 13px;
    font-weight: 400;
    line-height: 18px;
    color: var(--c-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .post-detail__header .post-card__byline time {
    flex: 0 0 auto;
  }

  .post-detail__header .post-detail__date--full {
    display: none;
  }

  .post-detail__header .post-detail__date--compact,
  .post-detail__header .post-detail__byline-sep {
    display: inline;
  }

  .post-detail__header .post-detail__byline-sep {
    flex: 0 0 auto;
  }

  /* Место в строке метаданных — обычный серый текст с иконкой, а не чип:
     ни подложки, ни рамки, ни собственных отступов. Иконка геопозиции
     остаётся — по ней место читается с одного взгляда. */
  .post-detail__header .post-location {
    display: inline-flex;
    min-width: 0;
    max-width: 100%;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font-size: 13px;
    font-weight: 400;
    line-height: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .post-detail__header .post-location--place {
    display: block;
    flex: 0 1 auto;
  }

  .post-detail__header a.post-location:hover {
    background: transparent;
    color: var(--c-text);
  }

  .post-detail__header .post-location__icon {
    width: 14px;
    height: 14px;
  }

  .post-detail__header .post-detail__menu-btn {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }

  /* ===== Заголовок =====
     Кегль мельче десктопного, межстрочный интервал плотнее.

     Про переносы. Внутри слова заголовок не рвётся вовсе: ни по границе
     строки (word-break), ни по слогам с дефисом (hyphens). «Библио-теки»
     в двух строках читается как опечатка, а не как перенос, и сбивает с
     заголовка ритм. Строка ломается только между словами; text-wrap:
     pretty не оставляет в последней строке одно короткое слово. */
  .post-detail__title {
    margin-top: 12px;
    font-size: 20px;
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: -0.01em;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
    text-wrap: pretty;
  }

  .post-detail__body {
    gap: 14px;
    padding: 14px var(--post-gutter) 12px;
  }

  /* Фото занимает всю ширину карточки: без внутренних рамок, серых полей
     и вложенных контейнеров с фиксированной высотой. max-width снимается
     намеренно — общий мобильный предохранитель карточки (.post-card *)
     иначе обрезал бы фото на ширину колонки текста. */
  .post-detail__body > .post-block--image {
    width: auto;
    max-width: none;
    margin-inline: calc(-1 * var(--post-gutter));
  }

  .post-detail__body > .post-block--image .gallery-thumb {
    border-radius: 0;
  }

  .post-detail__body > .post-block--image figcaption {
    padding-inline: var(--post-gutter);
  }

  .post-detail__body > .post-block--text {
    font-size: 15px;
    line-height: 1.65;
  }

  /* ===== Реакции и действия под публикацией =====
     Две строки, как в референсе: сразу под фотографией ряд реакций, под
     ним — панель действий. Раньше они делили одну полосу и перескакивали
     с одной строки на другую в зависимости от того, сколько реакций
     набрала публикация; теперь у каждой строки своё место и высота
     карточки не пляшет.

     min-height снят намеренно: подвал карточки ленты держит 56 px, и на
     публикации без единой реакции это давало пустую белую полосу под
     фотографией. Здесь высоту задаёт содержимое. */
  .post-detail__footer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 8px;
    min-height: 0;
    padding: 10px var(--post-gutter) 12px;
  }

  /* Пилюли реакций — те же, что в мобильной ленте (feed-card.css): своих
     размеров и цветов страница поста не заводит. Ряд переносится внутри
     себя, ничего не обрезается и никуда не прокручивается. */
  .post-detail__footer .post-card__reactions-row {
    max-width: 100%;
    min-width: 0;
    flex-wrap: wrap;
    gap: 6px 8px;
    overflow: visible;
  }

  .post-detail__footer .post-reactions-legacy {
    flex-wrap: wrap;
    gap: 6px;
  }

  .post-detail__footer .post-reactions {
    flex-wrap: wrap;
    gap: 6px 10px;
  }

  /* Панель действий — одна строка в лёгкой рамке: «Голосовать» со
     счётчиком слева, закладка и «поделиться» у правого края. Элементы не
     разбредаются по пустой ширине карточки, а у каждой кнопки остаётся
     палец места по высоте. */
  .post-detail__footer .post-card__stats {
    display: flex;
    align-items: center;
    min-height: 44px;
    min-width: 0;
    gap: 8px;
    margin-left: 0;
    padding: 3px 6px 3px 12px;
    border: 1px solid var(--c-divider);
    border-radius: 12px;
  }

  .post-detail__footer .post-card__bookmark {
    margin-left: auto;
  }

  /* margin-left: auto из critical.css отталкивал «Голосовать» на середину
     панели — подпись стоит у её левого края, а вправо уезжают только
     закладка и «поделиться». */
  .post-detail__footer .post-card__vote-label {
    gap: 6px;
    margin-left: 0;
    font-size: 13px;
    white-space: nowrap;
  }

  .post-detail__footer .post-rating--bar .post-rating__arrow--up {
    width: 34px;
    height: 34px;
  }

  .post-detail__footer .post-rating--bar .post-rating__value {
    font-size: 13px;
  }

  .post-detail__footer .post-card__action-btn {
    width: 40px;
    height: 40px;
  }

  .post-detail__footer .post-card__action-btn svg {
    width: 20px;
    height: 20px;
  }

  /* ===== Комментарии =====
     margin-top базового .comments-section добавлял к полосе действий ещё
     24 px белого поля до разделителя — на узком экране это пустота ни о
     чём. Отступ комментариев задаёт их собственный padding. */
  .post-detail__comments {
    margin-top: 0;
    padding: 14px var(--post-gutter) 16px;
  }

  .post-detail__comments .comments-header {
    margin-bottom: 10px;
  }

  /* Заголовок комментариев заметно легче названия публикации: это
     подпись к разделу, а не второй заголовок страницы. */
  .post-detail__comments .comments-title {
    font-size: 18px;
    line-height: 24px;
    font-weight: 600;
  }

  /* Пустой список комментариев — компактный светлый блок: две строки на
     нейтральной подложке, без пунктирной рамки и без высоты в пол-экрана. */
  .post-detail__comments .no-comments {
    display: block;
    min-height: 0;
    padding: 18px 16px;
    border: 0;
    border-radius: 12px;
    background: var(--c-pill);
    color: var(--c-secondary);
    font-size: 14px;
    line-height: 1.45;
    text-align: center;
  }

  .post-detail__comments .comment-form-section {
    margin-top: 14px;
  }

  /* ===== Форма комментария =====
     Форма остаётся одним блоком: подпись, поле в единственной рамке и
     строка действий под ним. Строка действий не разворачивается в
     колонку — «прикрепить» слева, отправка справа. */
  .post-detail__comments .form-actions-with-attachments {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
  }

  .post-detail__comments .attachment-buttons {
    order: 0;
  }

  /* Кнопка отправки — компактный зелёный квадрат с самолётиком: слово
     «Отправить» на узком экране занимало всю строку действий. */
  .post-detail__comments .form-actions-with-attachments .btn.primary {
    order: 0;
    flex: 0 0 auto;
    width: 44px;
    min-width: 0;
    height: 44px;
    min-height: 44px;
    margin-left: auto;
    padding: 0;
    border-radius: 12px;
  }

  .post-detail__comments .comment-form-submit__icon {
    display: block;
  }

  .post-detail__comments .comment-form-submit__label {
    display: none;
  }
}

/* Совсем узкие экраны (320–360 px): места в строке заметно меньше, поэтому
   поля карточки, промежутки в панели действий и подпись голосования
   ужимаются ещё немного — так панель остаётся одной строкой. */
@media (max-width: 360px) {
  .post-page {
    --post-gutter: 14px;
    padding-inline: 8px;
  }

  .post-detail__footer .post-card__stats {
    gap: 4px;
    padding-inline: 8px 4px;
  }

  .post-detail__footer .post-card__vote-label {
    font-size: 12px;
  }

  .post-detail__footer .post-card__action-btn {
    width: 36px;
    height: 36px;
  }

  .post-detail__title {
    font-size: 19px;
  }
}