/* ═════ Sentos · Каналы: лента канала, обращения, окно «Сообщить об ошибке» ═════
   Поведение — js/channel.js и js/report.js. Палитра и примитивы —
   base.css и app.css; поля окна — .nc-field из modals.css. */

/* ─────────────────────── Шапка канала ───────────────────────

   Звонить каналу некому, «в сети» у канала не бывает. Под названием —
   «канал», как у Telegram, когда число подписчиков не показывают. */

.messenger.is-channel #callAudioButton,
.messenger.is-channel #callVideoButton,
.messenger.is-channel .chat-head .online-dot {
  display: none;
}

/* В карточке канала из четырёх кнопок остаётся одна — «Уведомления».
   Она встаёт по центру, а не в первую колонку сетки. */
.profile-actions.is-single {
  grid-template-columns: minmax(0, 88px);
  justify-content: center;
}

/* ─────────────────────── Пост ───────────────────────

   Пост пишет канал, поэтому все посты слева, даже у автора, и без
   галочек — это решает chat.js. Имя канала стоит над первым постом
   серии (.msg-author из groups.css). У снимка, видео и кружка без
   подписи пузыря нет — форма поста сам снимок, — и имя там положить
   некуда: как у Telegram, оно остаётся у текста и подписанных. */

.messenger.is-channel .message.is-media > .msg-author,
.messenger.is-channel .message.is-album > .msg-author,
.messenger.is-channel .message.is-short > .msg-author {
  display: none;
}

/* ─────────────────────── Обращение ───────────────────────

   Над текстом — кто прислал (нажатием в личный чат с ним) и заголовок.
   Под текстом — сведения об устройстве, мелко: их читают, когда
   разбираются, а не с первого взгляда. Ширину пузыря они не задают —
   тот же приём, что у .msg-author. */

.report-head {
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  gap: 1px;
  width: 0;
  min-width: 100%;
  margin-bottom: 3px;
}

.report-author {
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.report-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

.report-device {
  flex: 0 1 auto;
  width: 0;
  min-width: 100%;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

/* Со снимком пузырь почти без отступов: 3 точки рамки, а свои отступы
   получают подпись и время (.is-captioned в media.css). Шапке и строке
   об устройстве — те же 8 по бокам, что у подписи, иначе они липнут к
   краю пузыря. */
.message.is-captioned > .report-head,
.message.is-album > .report-head,
.message.is-media > .report-head {
  padding: 6px 8px 4px;
}

.message.is-captioned > .report-device,
.message.is-album > .report-device,
.message.is-media > .report-device {
  padding: 0 8px;
}

/* ─────────────────────── «Новости» в Настройках ───────────────────────

   Счётчик нового — тот же, что у строки чата, и стоит перед стрелкой. */

#openNews .badge {
  margin-left: auto;
}

/* ─────────────────────── Окно «Сообщить об ошибке» ─────────────────────── */

.report-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 2px 16px 10px;
}

.report-body .nc-hint {
  padding: 0 4px;
}

/* Заголовок — тем же скруглённым прямоугольником, что поле под ним, а не
   пилюлей: два поля одно над другим должны быть одной формы. Свой отступ
   у input от браузера снят — на iPhone он заметнее, чем 2px на
   компьютере, — и значение стоит ровно под подписью, как в поле
   описания (так же в .settings-form). */
.report-modal .nc-field {
  border-radius: 24px;
}

.report-modal .nc-field input {
  margin: 0;
  padding: 0;
  line-height: 1.4;
  -webkit-appearance: none;
  appearance: none;
}

/* Вложения — теми же квадратиками, что в поле ввода переписки
   (.attachment-chip из composer.css). Первым стоит «прикрепить»: он
   виден и тогда, когда вложений ещё нет. */
.report-files {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.report-add {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: var(--field);
  color: var(--muted);
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}

.report-add .icon {
  width: 24px;
  height: 24px;
}

@media (hover: hover) {
  .report-add:hover {
    background: var(--field-strong);
    color: var(--text);
  }
}