/* mail-people — панель переписки: участники, темы, файлы.

   Подключён после `mail.css`, как и прочие частные листы почты, и палитры
   своей не заводит: все цвета здесь — переменные Флоу, оттого тёмная тема
   получается сама.

   ---------------------------------------------------------------------
   Почему панель, а не окно и не третья колонка

   Окно с затенением означает «отложи письмо». А третья колонка отняла бы
   ширину у самого разговора — и отняла бы навсегда, у всех, ради графы,
   которую открывают раз в день. Поэтому панель ложится **поверх** правого
   края разговора и уходит, когда её закрывают: лента под ней остаётся на
   месте, ни одна строка не переезжает, и закрытие возвращает ровно тот
   экран, что был.

   320 точек — по содержимому, а не на глаз: две плитки вложения (132) с
   зазором и полями встают в ряд ровно в эту ширину. Уже — плитки уходят в
   один столбец, и опись из двенадцати файлов растягивается на два экрана. */

.mail__view { --mail-people-w: 320px; }

.mail-people {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 20;
  width: var(--mail-people-w); max-width: 100%;
  display: flex; flex-direction: column; min-height: 0;
  background: var(--surface);
  border-left: 1px solid var(--border);
  /* Тень общая, всплывающего слоя, как у окна поиска: панель лежит поверх
     разговора, и слой выше узнают по той же тени, что и остальные. Косой она
     была раньше (`-12px 0`), но сторону здесь и так называет рамка слева. */
  box-shadow: var(--shadow-pop);
}

/* Шапка панели той же высоты, что шапка разговора: они стоят бок о бок, и
   строка, съехавшая на пять точек, читается как чужая вставка. */
.mail-people__head {
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
  min-height: var(--mail-head-h); padding: 8px var(--mail-pad);
  border-bottom: 1px solid var(--border); background: var(--surface);
}
.mail-people__title {
  flex: 1; min-width: 0;
  font-family: var(--font-head); font-weight: 600; font-size: 15.5px;
}
.mail-people__close {
  flex: 0 0 auto; width: 30px; height: 30px; display: grid; place-items: center;
  border: 0; border-radius: 8px; background: transparent; color: var(--text-faint);
  cursor: pointer; transition: background var(--speed), color var(--speed);
}
.mail-people__close:hover { background: var(--surface-3); color: var(--text); }

/* Своя прокрутка: панель длиннее экрана уже на десятке файлов, а лента
   разговора под ней обязана оставаться на своём месте. */
.mail-people__body {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 12px var(--mail-pad) 18px;
  display: flex; flex-direction: column; gap: 16px;
}

.mail-people__part { display: flex; flex-direction: column; gap: 8px; }
/* Заголовок графы — мелкой прописной строкой, как заголовки в карточках
   Флоу: он отбивает графу, а читают в панели не его. */
.mail-people__cap {
  display: flex; align-items: center; gap: 6px; margin: 0;
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-faint);
}
.mail-people__count {
  padding: 0 6px; border-radius: 20px;
  background: var(--surface-3); color: var(--text-soft);
  font-size: 10.5px; letter-spacing: 0;
}

/* ---------- участники ---------- */

.mail-people__set { display: flex; flex-direction: column; gap: 10px; }
.mail-people__one { display: flex; align-items: flex-start; gap: var(--mail-gap); }
.mail-people__who { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mail-people__name {
  font-weight: 600; font-size: 13.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Адрес переносим по знакам: почтовый адрес длиннее панели — обычное дело,
   а многоточие в середине адреса делает его непригодным для чтения глазами
   (а списывают их именно глазами). */
.mail-people__addr {
  font-size: 12px; color: var(--text-faint); text-decoration: none;
  overflow-wrap: anywhere;
}

/* Сам адрес — кнопка «написать», рядом появляется знак копирования
   (`contact-link` из карточек клиентов). Кнопке возвращаем всё, что браузер у
   неё отнял: шрифт строки, выравнивание по левому краю и перенос по знакам —
   почтовый адрес длиннее панели дело обычное, а кнопка по умолчанию не
   переносит вовсе.

   Выделение мышью оставлено намеренно: адрес — это ровно то, что списывают
   глазами и мышью, и общий запрет `user-select` для него снят так же, как у
   почты в карточке клиента. */
.mail-people__addr-write {
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 12px; color: inherit; text-align: left;
  overflow-wrap: anywhere; min-width: 0;
  user-select: text; -webkit-user-select: text;
}
.mail-people__addr:hover .mail-people__addr-write,
.mail-people__addr-write:hover { color: var(--accent-text); text-decoration: underline; }
.mail-people__addr-write:focus-visible {
  outline: none; box-shadow: var(--ring); border-radius: 4px;
}
.mail-people__client {
  align-self: flex-start; margin-top: 3px;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 20px;
  background: var(--accent-soft); color: var(--accent-text);
  font-size: 11.5px; text-decoration: none;
}
.mail-people__client:hover { text-decoration: underline; }

/* Дорога назад из открытой темы. Не кнопка действия — строка-ссылка: она
   уводит туда, откуда пришли, и выглядеть весомее самих тем не должна. */
.mail-people__whole {
  display: flex; align-items: center; gap: 7px; width: 100%;
  padding: 8px 10px; border: 1px dashed var(--border-strong); border-radius: 10px;
  background: none; color: var(--text-soft); font: inherit; font-size: 12.5px;
  cursor: pointer; transition: border-color var(--speed), color var(--speed);
}
.mail-people__whole:hover { border-color: var(--accent); color: var(--accent-text); }

/* ---------- темы ---------- */

.mail-people__topics { display: flex; flex-direction: column; gap: 4px; }
.mail-people__topic {
  display: flex; flex-direction: column; align-items: stretch; gap: 2px;
  width: 100%; padding: 7px 10px; border: 0; border-radius: 10px;
  background: var(--surface-2); color: var(--text);
  font: inherit; text-align: left; cursor: pointer;
  transition: background var(--speed), color var(--speed);
}
.mail-people__topic:hover { background: var(--surface-3); }
/* Открытая тема подсвечена — та же примета, что у выбранной строки списка:
   панель остаётся открытой после перехода, и без метки непонятно, что
   разговор под ней уже сменился. */
.mail-people__topic.is-active { background: var(--accent-soft); color: var(--accent-text); }
.mail-people__topic-name {
  font-size: 13px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mail-people__topic-meta {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--text-faint);
}
.mail-people__topic.is-active .mail-people__topic-meta { color: inherit; opacity: .8; }
.mail-people__dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: currentColor; opacity: .5;
}

/* ---------- файлы ---------- */

.mail-people__files { display: flex; flex-direction: column; gap: 12px; }
.mail-people__pack { display: flex; flex-direction: column; gap: 2px; }
.mail-people__pack-head {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--text-faint);
}
.mail-people__pack-day { flex: 0 0 auto; }
.mail-people__pack-topic {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Плитки приходят из `mail-files.css` со своим верхним отступом — он считан
   на письмо, где над ними стоит текст. Здесь над ними стоит строка даты, и
   восьми точек воздуха довольно. */
.mail-people__pack .mail-atts { margin-top: 4px; }

.mail-people__empty, .mail-people__note {
  font-size: 12px; color: var(--text-faint); line-height: 1.5;
}
.mail-people__note { padding-top: 4px; border-top: 1px solid var(--border); }

/* ---------- узкое окно ----------

   На телефоне разговор занимает весь экран, и панель поверх его правого
   края означала бы полторы колонки в трёхстах точках. Поэтому она ложится
   во всю ширину — как отдельный экран, из которого выходят крестиком. */
@media (max-width: 820px) {
  .mail-people { width: 100%; border-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .mail-people__topic, .mail-people__whole, .mail-people__close { transition: none; }
}
/* Снимок в панели — того же роста, что бумага. В самом письме одиночная
   миниатюра нарочно крупнее (`mail-files.css`): там на снимок смотрят. Здесь
   читают опись, и плитки разного размера в ней сбивают глаз — он ищет по
   именам, а не по картинкам. */
.mail-people .mail-atts__set > .mail-att--shot:only-child {
  width: 132px; height: 100px;
}
/* «Ещё N» — строкой, а не кнопкой действия: это продолжение списка, и
   выглядеть весомее самих тем оно не должно. */
.mail-people__topics-box { display: flex; flex-direction: column; gap: 4px; }
.mail-people__more {
  align-self: flex-start; padding: 4px 2px;
  border: 0; background: none; color: var(--accent-text);
  font: inherit; font-size: 12px; cursor: pointer;
}
.mail-people__more:hover { text-decoration: underline; }

/* ---------- поиск внутри переписки ----------

   Полоса стоит между шапкой панели и её телом и **не прокручивается**: ищут
   по ходу чтения найденного («не то, уточню»), и уехавшее вверх поле
   приходилось бы догонять прокруткой на каждое уточнение.

   Своего крестика у поля два: наш и браузерный. Браузерный убираем — он
   рисуется чужой краской, живёт только в вебките и на телефоне не
   показывается вовсе, то есть выглядел бы «то есть, то нет». */
.mail-people__seek {
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
  padding: 8px var(--mail-pad);
  border-bottom: 1px solid var(--border);
  color: var(--text-faint);
}
.mail-people__seek-field {
  flex: 1; min-width: 0;
  padding: 6px 0; border: 0; background: none; color: var(--text);
  font: inherit; font-size: 13px; outline: none;
}
.mail-people__seek-field::placeholder { color: var(--text-faint); }
.mail-people__seek-field::-webkit-search-cancel-button { display: none; }
.mail-people__seek-wipe {
  flex: 0 0 auto; width: 22px; height: 22px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: var(--surface-3);
  color: var(--text-faint); cursor: pointer;
  transition: color var(--speed), background var(--speed);
}
.mail-people__seek-wipe:hover { background: var(--border); color: var(--text); }

/* Графы панели и найденное — соседи, а не два состояния одного узла:
   переключаются классом, и потому набранный запрос не теряет курсор. */
.mail-people__all,
.mail-people__found { display: flex; flex-direction: column; gap: 16px; }

/* ---------- найденные письма ----------

   Строка в одну высоту, как в списке писем: сорок найденных по три строки
   каждое — это два экрана прокрутки, а колонку имён глаз читает сразу. */
.mail-people__hits { display: flex; flex-direction: column; gap: 2px; }
.mail-people__hit {
  display: flex; align-items: center; gap: var(--mail-gap);
  width: 100%; padding: 6px 8px; border: 0; border-radius: 10px;
  background: none; color: var(--text); font: inherit; text-align: left;
  cursor: pointer; transition: background var(--speed);
}
.mail-people__hit:hover { background: var(--surface-2); }
.mail-people__hit .mail-face { flex: 0 0 auto; }
.mail-people__hit-body { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.mail-people__hit-top { display: flex; align-items: baseline; gap: 8px; }
.mail-people__hit-who {
  flex: 1; min-width: 0; font-size: 13px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mail-people__hit-when { flex: 0 0 auto; font-size: 11px; color: var(--text-faint); }
.mail-people__hit-subj {
  font-size: 12px; color: var(--text-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- заказы и клиенты переписки ----------

   Пока сервер их считает, узел пуст — и пустым он не должен занимать ни
   зазора: иначе между участниками и темами зияла бы дыра, которая через
   полсекунды заполняется, двигая всё под рукой. */
.mail-people__facts { display: flex; flex-direction: column; gap: 16px; }
.mail-people__facts:empty { display: none; }
.mail-people__rows { display: flex; flex-direction: column; gap: 4px; }

/* Строка заказа и строка клиента — одна и та же вещь: значок, имя, число
   писем справа. Ссылкой, а не кнопкой: у неё есть адрес и «открыть в новой
   вкладке» — заказ из переписки открывают именно так, чтобы не терять
   письмо. */
.mail-people__fact {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 10px;
  background: var(--surface-2); color: var(--text); text-decoration: none;
  transition: background var(--speed);
}
.mail-people__fact:hover { background: var(--surface-3); }
.mail-people__fact > svg { flex: 0 0 auto; color: var(--text-faint); }
.mail-people__fact-body { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.mail-people__fact-name {
  font-size: 13px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mail-people__fact-note {
  font-size: 11.5px; color: var(--text-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mail-people__fact-count {
  flex: 0 0 auto; font-size: 11px; color: var(--text-faint); white-space: nowrap;
}

/* Плитки найденных бумаг переносятся по ширине панели и на трёхстах
   девяноста точках телефона: горизонтальной прокрутки в панели быть не
   должно нигде. */
.mail-people__found .mail-atts__set { flex-wrap: wrap; }