/* mail-card — окно писем внутри карточки заказа и клиента.

   Своим листом, а не куском `app.css` и не куском `mail-thread.css`: над
   почтой работают в несколько рук, и общий файл означает, что правки затирают
   друг друга. Подключён последним из почтовых (см. `web/index.html`) — значит
   правила с той же силой отсюда уточняют и общие, и разговорные.

   **Своего вида письма здесь нет ни строки.** Карточка письма, свёрнутая
   строчка, вложения, цитата — всё это рисуется теми же классами, что и в
   разделе (`mail.css`, `mail-thread.css`, `mail-files.css`), и живёт по
   тамошним правилам. Здесь только оправа: высота окна, полоса прокрутки,
   заголовок темы над письмом и строка о личности почты. */

/* ---------- само окно ----------

   Высокое — прямая просьба Романа 27.08.2026: «сделай окно просмотра писем
   выше, чем товары/дела, можно сдвинуть ленту сделки ниже существенно. Я
   хочу, чтобы это окно позволяло нормально просмотреть письмо и просматривать
   прокруткой все письма по клиенту/сделке».

   Отсюда все три величины:

   * `68vh` — письмо читается целиком, не выезжая за окно: у среднего письма с
     шапкой и подписью это как раз две трети экрана. Лента сделки при этом
     уезжает ниже — так и просили;
   * `980px` — потолок для большого монитора: окно выше человеческого роста
     читать нечем, глаз всё равно держит две трети экрана;
   * `max-height`, а не `height` — у заказа с двумя письмами высокая пустая
     коробка выглядела бы поломкой. Окно растёт по письмам до потолка и там
     останавливается.

   `min-height` нарочно нет: одно письмо занимает столько, сколько занимает. */
.mail-in__feed {
  max-height: clamp(420px, 68vh, 980px);
  /* `.mail-feed` в app.css растянут на колонку разговора (`flex: 1`), а здесь
     колонки нет — карточка стоит в потоке. Сбрасываем, иначе высота считалась
     бы от несуществующего родителя. */
  flex: none;
  overflow-y: auto;
  /* Прокрутка внутри окна, а не страницы: колесо, докрутившее письма до низа,
     не должно уводить всю карточку заказа дальше вниз. */
  overscroll-behavior: contain;
  border-top: 1px solid var(--border);
}

/* Между письмами — тот же воздух, что в разговоре виде «письмами» (7 точек в
   mail-thread.css). Заголовок темы стоит вплотную к своему письму, и общий
   зазор развёл бы их поровну — тема повисла бы между двумя письмами, не
   принадлежа ни одному. Поэтому зазор снят, а расстояния расставлены полями
   самих кусков. */
.mail-in__feed { gap: 0; }
.mail-in__feed > .mail-slot { margin-bottom: 7px; }

/* ---------- тема над письмом ----------

   Не заголовок карточки, а надпись над ней: письмо ниже — документ со своей
   шапкой, и вторая жирная строка над ним спорила бы с ней за первый взгляд.
   Отсюда мелкий кегль и приглушённый цвет. Сверху воздуха больше, чем снизу:
   надпись принадлежит письму под собой. */
.mail-in__cap {
  display: flex; align-items: center; gap: 8px;
  margin: 12px 2px 5px; min-width: 0;
  font-size: 12px; color: var(--text-faint);
}
.mail-in__cap:first-child { margin-top: 0; }
.mail-in__subject {
  min-width: 0; flex: 0 1 auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 600; letter-spacing: .01em;
}

/* ---------- шапка и подвал окна ---------- */

/* Сколько всего писем — числом рядом с названием, тем же чипом, что счётчик
   писем в разговоре. Отвечает на вопрос, который задают раньше всех: много ли
   тут переписки вообще. Пусто — значит писем нет, и число не рисуется. */
.mail-in__count:not(:empty) {
  padding: 1px 7px; border-radius: 9px;
  background: var(--surface-2); color: var(--text-faint);
  font-size: 11.5px; font-weight: 600;
}

.mail-in__foot:not(:empty) {
  display: flex; justify-content: center;
  padding: 10px 14px; border-top: 1px solid var(--border);
}

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

   Менеджер, не увидевший в общем заказе письма коллеги, решит, что система их
   потеряла, и пойдёт искать поломку. Сказать это надо там, где он смотрит, и
   до того, как он спросит. Мелко и приглушённо: это пояснение, а не
   предупреждение. */
.mail-in__note {
  padding: 8px 14px 10px;
  font-size: 11.5px; color: var(--text-faint);
  border-top: 1px solid var(--border);
}
.mail-in__foot:not(:empty) + .mail-in__note { border-top: 0; padding-top: 0; }

/* ---------- телефон ----------

   На узком экране две трети высоты — это полторы строки списка и половина
   письма: окно перестаёт показывать что-либо целиком. Отдаём ему почти весь
   экран: карточка на телефоне и так листается вкладка за вкладкой. */
@media (max-width: 720px) {
  .mail-in__feed { max-height: 76vh; }
}