/* mail-list — список разговоров. Стили этого куска почты складывают сюда, а не
   в app.css: над разделом работают в несколько рук, и общий файл означает,
   что правки затирают друг друга.

   Лист подключён после `app.css`, поэтому здесь можно поправить то, что
   объявлено там, не трогая чужой файл. Всё, что ниже, — правки Романа от
   27.08.2026: разгрузить список, не переделывая его. */

/* =========================================================
   1. Пустая строка в узкой колонке
   ========================================================= */

/* Когда разговор открыт, строка складывается в два яруса: имя сверху, тема
   под ним. Между ними зияла пустая строка, и вот откуда она бралась. Ярус
   первый по высоте равнялся снимку (34 пикселя), потому что снимок попадал в
   него сам собой; имя при `align-items: start` вставало к его верху, а тема
   начиналась под всем снимком. Плюс общий зазор сетки в десять пикселей,
   который здесь работал ещё и по вертикали.

   Лечится двумя строками: снимок растянуть на оба яруса (тогда первый ярус
   ровно с именем) и убрать вертикальный зазор. Каждая пустая строка в списке
   стоит одного письма на экране — по этому списку идут глазами сверху вниз,
   а не читают его. */
/* **В виде «Mail Ru» этих правил нет.** Там список не ужимается в колонку: он
   остаётся во всю ширину, а разговор ложится поверх него слоем
   (`mail-dive.css`). Правила висят на `has-thread` — а он в этом виде значит
   не «список стал узким», а «разговор открыт», и без оговорки список
   перестраивался бы в два яруса под невидимым слоем: на глазах у человека
   пропадали бы чипы клиента и заказа, а строки прыгали бы на другую высоту.
   Роман 07.09.2026: «со списком писем происходят какие-то действия — пропадают
   теги заказов и клиентов и список смещается при переходе в просмотр треда». */
.mail.has-thread:not(.mail--dive) .mail-row,
.mail-row--narrow {
  column-gap: 9px;
  row-gap: 1px;
  padding-top: 6px;
  padding-bottom: 6px;
}
.mail.has-thread:not(.mail--dive) .mail-face,
.mail-row--narrow .mail-face {
  grid-row: 1 / span 2;
  align-self: start;
}
/* Значки — в первый ярус и строкой, а не столбиком во всю высоту. Столбик
   из клиента, заказа, скрепки и времени выше двух ярусов вместе, и сетка
   растягивала под него оба — то есть пустота возвращалась с другой
   стороны, уже не от снимка, а от значков. */
.mail.has-thread:not(.mail--dive) .mail-row__marks,
.mail-row--narrow .mail-row__marks {
  grid-column: 3;
  grid-row: 1;
  align-self: center;
  flex-direction: row;
  align-items: center;
  gap: 6px;
}
/* В узкой колонке рядом с именем помещается одна метка, и берём точную:
   номер заказа человек поставил в тему сам, клиента система вывела по
   адресу. Оба чипа рядом ужимали имя до «Иван I» — а по колонке имён список
   и просматривают. Клиент при этом не пропадает: без заказа он стоит на
   своём месте, и в широком списке видны оба. */
.mail.has-thread:not(.mail--dive) .mail-row__marks:has(.mail-row__deal) .mail-row__client,
.mail-row--narrow .mail-row__marks:has(.mail-row__deal) .mail-row__client {
  display: none;
}
/* Тема занимает оба столбца: во втором ярусе под значками пусто, и отдать
   это место теме дешевле, чем обрезать её раньше. Одной строкой вместо
   двух — двумя она съедала ещё письмо, а узнают письмо по началу темы. */
.mail.has-thread:not(.mail--dive) .mail-row__line,
.mail-row--narrow .mail-row__line {
  grid-column: 2 / span 2;
  -webkit-line-clamp: 1;
  line-height: 1.35;
}

/* То же самое и на телефоне: там колонка узкая всегда. */
@media (max-width: 1100px) {
  .mail-row { column-gap: 9px; row-gap: 1px; padding-top: 6px; padding-bottom: 6px; }
  .mail-row .mail-face { grid-row: 1 / span 2; align-self: start; }
  .mail-row__marks {
    grid-column: 3; grid-row: 1; align-self: center;
    flex-direction: row; align-items: center; gap: 6px;
  }
  .mail-row__marks:has(.mail-row__deal) .mail-row__client { display: none; }
  .mail-row__line { grid-column: 2 / span 2; -webkit-line-clamp: 1; }
}

/* =========================================================
   2. Поиск, свёрнутый в лупу
   ========================================================= */

/* Полоса поиска стояла над списком всегда и стоила строки писем на каждом
   экране, а спрашивают у неё раз в день. Свёрнутая, она **вынута из потока**
   (`position: absolute`) — то есть не занимает ни пикселя высоты, а не просто
   становится ниже. Освободившееся место уходит письмам.

   Раскрытая — обычная полоса в потоке: она отодвигает список вниз, а не
   ложится поверх него. Поверх было бы хуже: набирая, человек смотрит на
   первые строки ответа, и они не должны быть закрыты. */
.mail__list { position: relative; }


/* Свёрнутое поле не убрано `display: none`, а сжато в ноль: так в нём
   сохраняется набранное и не теряется фокус при сворачивании. */

/* Набранное видно и свёрнутым — иначе человек не поймёт, почему список
   короткий, и решит, что письма пропали. */


/* =========================================================
   3. Бесшовная подгрузка
   ========================================================= */

/* Распорка под снятыми сверху строками. Пустая и невидимая: её работа —
   держать высоту, чтобы полоса прокрутки не прыгала под рукой. */
.mail-spacer { flex: 0 0 auto; }

/* Конец списка и редкая полоска ожидания. Ни то, ни другое не должно выглядеть
   кнопкой: нажимать здесь нечего, читается это одним взглядом и исчезает. */
.mail-tail {
  padding: 14px 12px 18px;
  text-align: center;
  color: var(--text-faint);
  font-size: 12.5px;
}
.mail-tail--wait { opacity: 0.75; }


/* Конец списка при поиске — единственное место, где здесь есть что нажать.
   Кеш кончается раньше почты, и «это всё» без кнопки было бы неправдой:
   письмо позапрошлого года лежит в mail.ru и находится там за две секунды.
   Столбиком, а не строкой: пояснение меняется по ходу поиска («ищу…», «из
   почты приехало писем: 12»), и кнопка рядом с ним прыгала бы по ширине. */
.mail-tail--deep {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.mail-tail__words { display: block; }

/* =========================================================
   4. Клиент в строке
   ========================================================= */

/* Тем же чипом, что и заказ, но тише. Заказ — подпись человека (он сам
   поставил номер в тему), клиент — вывод системы по адресу отправителя;
   разный вес говорит об этом без единого слова.

   Имя обрезано по ширине: в списке важно, что клиент есть и какой примерно,
   полное название читают в карточке. */
.mail-row__client {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  max-width: 140px;
  min-width: 0;
  white-space: nowrap;
  font-size: 11px;
  color: var(--text-faint);
}
.mail-row__client .icon { flex: 0 0 auto; }
/* Многоточие ставит вложенный `span`, а не сам чип: у флексового ящика
   обрезка по `text-overflow` не работает — обрезается его дитя. */
.mail-row__client > span { overflow: hidden; text-overflow: ellipsis; }
.mail.has-thread:not(.mail--dive) .mail-row__client { max-width: 96px; }

/* =========================================================
   5. Контекстное меню строки и письма
   ========================================================= */

/* Само меню рисует `popover` из `ui.js` — здесь только то, чего в общем меню
   нет: верхний ряд частых действий у письма и приметы долгого нажатия. */

/* Ряд частых действий — устройство Spike: частое крупно, значком с подписью,
   а остальное столбиком ниже. Колонки равной ширины: подписи разной длины
   («Ответить» и «Переслать»), и без этого ряд читался бы лесенкой, а не
   сеткой. */
.mail-menu__top {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 2px;
  padding-bottom: 6px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.mail-menu__act {
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 9px 4px;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 11px;
  line-height: 1.15;
  text-align: center;
  cursor: pointer;
}
.mail-menu__act .icon { color: var(--text-faint); }
.mail-menu__act:hover { background: var(--surface-2); }
.mail-menu__act:hover .icon { color: var(--accent-text); }

/* Ширина под ряд из двух действий. Считана не по подписям — они короткие, —
   а по столбику под рядом: «Скопировать текст» и «Создать задачу» должны
   стоять в одну строку каждый, иначе перенос в пункте меню читается как два
   разных пункта. Два крупных значка над ними при такой ширине встают ровно
   половинками. */
.popover.mail-menu { min-width: 216px; }

/* Адрес первой строкой меню имени. Роман 28.08.2026: «не надо писать адрес
   почты рядом с именем… при нажатии можно адрес скопировать. А лучше было бы
   просмотреть его. И скопировать».

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

   Кегль мельче пунктов и цвет приглушённый: это не действие, а то, **над чем**
   действия, и спорить за внимание с ними ему незачем. */
.mail-menu__addr {
  display: flex; align-items: flex-start; gap: 8px; width: 100%;
  padding: 7px 9px; margin-bottom: 4px;
  border: 0; border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--text-soft);
  font: inherit; font-size: 12px; line-height: 1.35; text-align: left;
  cursor: pointer;
}
.mail-menu__addr:hover { background: var(--surface-3); color: var(--text); }
.mail-menu__addr .icon { flex: none; margin-top: 1px; color: var(--text-faint); }
.mail-menu__addr:hover .icon { color: var(--accent-text); }
.mail-menu__addr-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }

/* Долгое нажатие на телефоне — вместо правой кнопки.

   `-webkit-touch-callout` снимает своё меню iOS («Открыть в новой вкладке»,
   «Скопировать»), которое иначе всплывает по долгому нажатию поверх нашего.

   `has-menu` — подсветка того, о чём меню. На компьютере видно по указателю,
   а на телефоне палец уже убран, и без подсветки непонятно, к какой строке
   относятся пункты. */
.mail-row,
.mail-letter__row,
.mail-letter__head,
.mail-msg__bubble { -webkit-touch-callout: none; }

.mail-row.has-menu,
.mail-letter__row.has-menu,
.mail-letter__head.has-menu { background: var(--surface-3); }
.mail-msg__bubble.has-menu { box-shadow: 0 0 0 2px var(--border); }


/* ---------- строка в три строки ----------

   Имя, тема, начало письма — одна под другой, как в Spike (просьба Романа
   27.08.2026). Колонок стало три вместо четырёх: лицо, текст, отметки со
   временем. Имя больше не отдельная колонка — значит его не режет ширина,
   посчитанная по самому длинному из виданных имён.

   Каждая строка обрывается своим многоточием, и высота строки от письма к
   письму не меняется: список читают колонкой, и прыгающая высота эту
   колонку рушит. */
.mail__rows .mail-row {
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: start;
  padding-top: 9px; padding-bottom: 9px;
}
.mail-row__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mail__rows .mail-row__name,
.mail__rows .mail-row__line,
.mail__rows .mail-row__snippet {
  display: block; min-width: 0; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Тема — вес обычный, а не жирный: жирным теперь говорит непрочитанное, и
   два жирных в одной строке спорили бы друг с другом. */
.mail__rows .mail-row__line { font-size: 13px; color: var(--text); font-weight: 400; }
.mail-row.is-unread .mail-row__line { font-weight: 600; }

/* Черновик, который не ушёл: причина вместо зачина, красным (`rowNode`). */
.mail__rows .mail-row__snippet.mail-row__failed, .mail-row__failed { color: var(--red); }
.mail__rows .mail-row__snippet { font-size: 12.5px; color: var(--text-faint); }
/* Отметки и время встают к верхней строке: время — свойство письма, а не его
   середины, и висящее посреди трёх строк оно читается как отдельная графа. */
.mail__rows .mail-row__marks { align-self: start; padding-top: 1px; }


/* Заголовок дня — по левому краю списка, вровень с лицами писем, а не с их
   текстом (просьба Романа 27.08.2026: «„сегодня", „вчера" выглядят странно,
   сориентируй их по левому краю»). Отступ у них был посчитан от прежней
   строки, где слева стояла колонка имени; после перехода на три строки он
   оказался ни на что не опёрт и висел в воздухе. */
.mail__rows .mail-day {
  padding-left: 12px; text-align: left;
  letter-spacing: .02em; text-transform: none;
}


/* =========================================================
   6. Постоянная высота строки
   ========================================================= */

/* Роман 27.08.2026: «гуляют высоты строк». Замер по своей базе показал два
   источника разнобоя, и оба не там, где кажется.

   Первый — счётчик писем (`.mail-row__count`). Он стоит в строке имени
   инлайновой вставкой и поднимает её под свой рост: 19.6 точки без него,
   21.7 с ним. Отсюда 2.1 точки разброса внутри одного списка.

   Второй — сам список: широкий 79.5, узкий 73.2. Узкий берёт поля из
   первого раздела этого листа, а лицо там растянуто на два яруса. Ярусов у
   трёхстрочной строки давно нет, но пустой второй ярус остаётся и тянет за
   собой `row-gap`.

   Лечим не подгонкой полей, а прямым ростом: высота задана числом и
   считается из своих частей — трёх строк текста, зазоров между ними и полей
   сверху и снизу. Тогда ни чип, ни скрепка, ни счётчик до неё не дотягиваются
   вовсе — что бы в строку ни приехало, она одна и та же.

   Число одно на широкий и узкий список. Так и было задумано в `mail.css`
   («список не должен менять рост, когда рядом открывается разговор»), просто
   не сходилось: письмо, до которого человек долистал, уезжало из-под курсора
   ровно в тот миг, когда он по нему нажимал.

   Отбор в три класса — не красота, а необходимость: правила узкой колонки в
   первом разделе весят столько же, и отбором в два класса их не перебить. */
.mail__rows {
  --mail-row3-name: 19px;   /* имя, шрифт 13.5 */
  --mail-row3-line: 18px;   /* тема, шрифт 13 */
  --mail-row3-snip: 17px;   /* зачин, шрифт 12.5 */
  --mail-row3-gap: 2px;
  --mail-row3-pad: 8px;
  /* 19 + 18 + 17 + 2*2 + 2*8 + 1 = 75. Единица — своя нижняя линия строки:
     считаем по границе, потому что весь лист живёт на `border-box`. */
  --mail-row3-h: calc(var(--mail-row3-name) + var(--mail-row3-line)
    + var(--mail-row3-snip) + var(--mail-row3-gap) * 2
    + var(--mail-row3-pad) * 2 + 1px);
}
.mail .mail__rows .mail-row {
  height: var(--mail-row3-h);
  min-height: var(--mail-row3-h);
  padding-top: var(--mail-row3-pad);
  padding-bottom: var(--mail-row3-pad);
  row-gap: 0;
}
/* Лицо больше не растянуто на два яруса. Ярусов у трёхстрочной строки нет, а
   пустой второй прибавлял к росту зазор сетки — те самые лишние точки, из-за
   которых узкий список стоял иначе широкого. */
.mail .mail__rows .mail-face { grid-row: auto; align-self: start; }
.mail .mail__rows .mail-row__body { gap: var(--mail-row3-gap); }

/* Каждая строка текста — своим ростом, а не тем, что насчитает шрифт по
   своему содержимому. Обрыв многоточием уже стоит выше; здесь важен сам
   рост: инлайновая вставка (тот самый счётчик писем) больше не поднимает
   строку под себя, потому что подниматься нечему. */
.mail .mail__rows .mail-row__name {
  height: var(--mail-row3-name); line-height: var(--mail-row3-name);
}
.mail .mail__rows .mail-row__line {
  height: var(--mail-row3-line); line-height: var(--mail-row3-line);
}
.mail .mail__rows .mail-row__snippet {
  height: var(--mail-row3-snip); line-height: var(--mail-row3-snip);
}

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

   `flex-wrap: nowrap` — перенос был бы вторым источником пляшущих высот: в
   узкой колонке клиент с заказом вставали бы в два ряда. Вместо переноса они
   сжимаются, и длинное имя клиента обрывается многоточием. Время не
   сжимается никогда: оно короткое, а без него строка теряет главное.

   Ширину полосы держит один чип клиента — тот, что тянется (140 точек в
   широком списке, 96 в узком, четвёртый раздел выше). Доли в процентах здесь
   не будет: полоса стоит в колонке сетки шириной `auto`, то есть доля
   считалась бы от ширины, которую сама же и задаёт. Круг браузер разрывает в
   свою пользу — чип заказа схлопывался до двенадцати точек, и вместо
   «№26272» в строке оставался обрезок значка. */
.mail .mail__rows .mail-row__marks {
  height: var(--mail-row3-name);
  align-self: start;
  align-items: center;
  flex-wrap: nowrap;
  padding-top: 0;
}
/* Сжимается только клиент: у него внутри свой `span` с многоточием, и имя
   обрывается по-человечески. Заказ, скрепка и время не сжимаются вовсе —
   номер заказа с многоточием это не номер, а скрепка со временем и так
   короткие. */
.mail .mail__rows .mail-row__client { flex: 0 1 auto; min-width: 0; }
.mail .mail__rows .mail-row__deal,
.mail .mail__rows .mail-row__time,
.mail .mail__rows .mail-row__marks > .icon { flex: 0 0 auto; }

/* Чипы — ростом ниже той строки, в которой стоят. Иначе рост задавали бы
   они, и вся затея держалась бы на том, каким шрифт окажется у человека. */
.mail .mail__rows .mail-row__client,
.mail .mail__rows .mail-row__deal,
.mail .mail__rows .mail-row__count {
  height: 16px;
  line-height: 16px;
  padding: 0 5px;
}
/* Счётчик стоит в строке имени — значит середина у него общая с именем, а не
   базовая линия: по базовой он садился бы на неё нижним краем и висел ниже
   текста. Та же оговорка, что у времени в строке чата (`.room__stamp`). */
.mail .mail__rows .mail-row__count { vertical-align: middle; }


/* =========================================================
   7. Переходы: смена разреза и выбор строки
   ========================================================= */

/* Роман 27.08.2026: «добавь анимации на переходы между разделами почты, между
   письмами — как в Флоу.Чат, через затухание банально».

   Затухание — той же манерой и той же длительностью, что лента чата
   (`.chat__feed` в `app.css`): прежнее гаснет мгновенно (`transition: none`
   у самого класса), новое проявляется за 150 мс. Растворять их друг в друге
   нельзя — два списка на эти доли секунды читались бы как один
   перемешанный; почта и чат при этом остаются одной системой, а не двумя.

   Именно прозрачность, а не сдвиг и не размытие: прозрачность браузер делает
   на видеокарте даром, а список — это триста строк с лицами, и считать по
   ним фильтр каждый кадр значит уронить кадры на телефоне.

   Занавес вешается только на смену разреза — ящик, папка, фильтр, поиск, вид
   (`cutOf` в `mailList.js`). Пачка, приехавшая на прокрутке, занавеса не
   получает: список мигал бы под рукой каждые тридцать строк. Открытие
   разговора — тоже: там меняется одна подсветка. */
.mail__rows { transition: opacity 150ms ease-out; }
.mail__rows.is-swapping { opacity: 0; transition: none; }

/* Выбор строки — переходом по фону, тем же и той же длительности, что строка
   чата (`.room`): 120 мс из `--speed`, объявлено в `app.css` у `.mail-row`.
   Своего правила здесь нет нарочно — второе объявление того же перехода
   рано или поздно разъедется с чатовским, и разделы станут разными.

   Подсветку двигает само нажатие, а не ответ сервера (см. `rowNode`), и
   переход успевает проиграться до того, как приедет разговор. */

/* Кому движение мешает — тому его нет. Обе стороны: и занавес списка, и
   заливка выбранной строки. Список при этом не пропадает и не замирает —
   просто встаёт сразу готовым. */
@media (prefers-reduced-motion: reduce) {
  .mail__rows,
  .mail__rows .mail-row { transition: none; }
  /* И самого занавеса нет: без перехода он превращался бы в один
     пустой кадр — мигание вместо плавности, то есть ровно то, от чего
     человек и просил его избавить. */
  .mail__rows.is-swapping { opacity: 1; }
}

/* ---------- письмо, пришедшее на глазах ----------

   Роман 29.08.2026: «чтобы письма сдвинулись на экране как в Флоу.Чат при
   новом входящем». Строка встаёт сверху и раздвигает список: нижние в тот же
   кадр сдвинуты вверх ровно на её высоту — то есть визуально остались там,
   где были, — и едут вниз трансформом. Саму высоту знает только скрипт в миг
   вставки, поэтому сдвиг ставится оттуда (`slideFresh` в `mailList.js`), а
   здесь живут обе половины движения.

   Высотой это сделать нельзя, и не из вкусовщины: оттяжки у высоты не бывает
   — ниже нуля её зажимает браузер, — а каждый её кадр пересчитывает раскладку
   всей колонки. Трансформ не трогает раскладку вовсе, и пружина `--spring`
   работает на нём как задумана.

   Проявление — анимацией, а не переходом. Это тот самый приём, которым
   лечится `prefers-reduced-motion`: обычное состояние строки видимое, а
   прозрачной её делает анимация. Тогда `animation: none` возвращает строке её
   собственную видимость — письмо просто оказывается в списке, без единого
   лишнего кадра. */
@keyframes mail-row-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* Заголовок дня, который привело с собой слияние списка (`mergeRows`,
   16.09.2026), проявляется вместе со строкой: встань он рывком, над
   въезжающей строкой мигнула бы подпись. */
.mail__rows .mail-row.is-fresh,
.mail__rows .mail-day.is-fresh { animation: mail-row-in 260ms ease-out; }
/* Расступается список за 280 мс — столько же, сколько сходится над закрытой
   строкой в «Делах» (`.trow.is-gap` в `app.css`). Одно и то же движение в
   двух местах системы обязано длиться одинаково, иначе это два разных
   движения. */
.mail__rows .mail-row.is-gap,
.mail__rows .mail-day.is-gap { transition: transform 280ms var(--spring, ease); }

/* Кому движение мешает — тому его нет. Строка встаёт на место сразу, список
   расступается тем же кадром: раскладка у обоих случаев одна и та же, разница
   только в дороге к ней. */
@media (prefers-reduced-motion: reduce) {
  .mail__rows .mail-row.is-fresh,
  .mail__rows .mail-day.is-fresh { animation: none; }
  .mail__rows .mail-row.is-gap,
  .mail__rows .mail-day.is-gap { transition: none; }
}

/* ---------- строки «Прочитать все» здесь больше нет ----------

   Роман 29.08.2026: «убери панель непрочитанное в списке писем — нелогично и
   скачки из-за этого». Скачок был свойством полосы: число считает сервер, и
   она вставала над уже готовым списком, опуская его на свою высоту.

   Само действие живёт теперь в правой кнопке по пункту колонки
   (`railMenu` в `mailBoxes.js`) — там, где выбирают разрез, который
   собираются прочитать. Своего оформления ему не нужно: это пункт меню. */

/* Строка-заглушка. Разметка у неё живая (`mail-row`), поэтому сетка, отступы
   и высота совпадают с настоящей строкой сами — а вот руки ей не нужны: под
   курсором она не подсвечивается и не нажимается, потому что нажимать пока
   не на что. */
.mail-row--skel { pointer-events: none; cursor: default; }
.mail-row--skel:hover { background: transparent; }

/* ---------- заглушка строки — блоком, а не строчками ----------

   Роман 28.08.2026: «заглушки мелкие типа строчки текста, что неправильно —
   они должны быть крупнее в масштабе и подстраховывать как крупные детали».

   Стояло три полосы в одиннадцать точек — имя, тема, зачин, — и вместе с
   лицом и временем это пять мелких деталей на строку, сорок пять на экран.
   Каждая по отдельности честно повторяла свою строку текста, а вместе они
   читались рябью: заглушка изображала **текст**, хотя обещать обязана
   **форму**. Разбор этот в проекте уже записан — у `skelBlock` в `ui.js`,
   24.08.2026, тот же заказчик и та же претензия; здесь он просто дошёл до
   почты.

   Теперь в теле одна плита во весь его рост. Рост ей не задан числом:
   `align-self: stretch` растягивает тело по строке, у которой высота и так
   посчитана из своих частей (шестой раздел выше), а плита растягивается по
   телу. Второго числа завести негде — значит, и разъехаться нечему.

   Отметка справа — ростом ровно в строку имени: на её месте встанет время, а
   время стоит в первой строке и никогда не спускается ниже. */
.mail-row--skel .mail-row__body { align-self: stretch; }
.mail-row--skel .mail-row__body > .skel { flex: 1 1 auto; }
.mail-row--skel .mail-row__tick {
  width: 38px;
  height: var(--mail-row3-name);
}

/* =========================================================
   8. По чему ищем: письма или документы
   ========================================================= */

/* Роман 28.08.2026: «поиск по документам — то есть поиск только по названиям
   вложений». Способ выбирается руками, потому что вопросов два («где это
   слово» и «как называется бумага»), и молчаливо отвечать сразу на оба нельзя:
   в списке появились бы строки, где набранного слова нет вовсе. Разбор — в
   `mailList.js`, у `SCOPES`.

   Переключатель живёт **внутри строки поиска**, а не отдельной полосой над
   списком: он свойство этой строки, а не раздела, и без неё бессмыслен. Пока
   поиск свёрнут в лупу, его нет вовсе — иначе половина разгрузки списка,
   ради которой лупу и заводили, ушла бы обратно на две кнопки. */

/* Выбранный — заливкой подложки, а не краской: краской в этой строке говорит
   набранное (`__chip`), и два акцента рядом спорили бы за то, куда смотреть. */

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

/* На телефоне у строки поиска триста девяносто точек на всё: лупу, поле,
   переключатель и крестик. Значки в переключателе уходят первыми — подписи
   «Письма» и «Документы» говорят то же самое и без них, а место, которое они
   освобождают, достаётся полю ввода. */
@media (max-width: 820px) {
}

/* ---------- строка находки ----------

   Не плитка вложения: та стоит внутри письма, где про письмо и так всё
   известно, а здесь весь смысл в обратном — в каком письме эта бумага лежит.
   Поэтому строка, и той же меры, что строка письма: плашка типа слева (класс
   у неё общий с вложением — один и тот же PDF красный всюду), имя, под ним вес
   и письмо, справа дата.

   Рост строке не задан числом, в отличие от письма: у находок нет колонки
   имён, по которой глаз идёт сверху вниз, зато есть длинные имена файлов — а
   «Спецификация на поставку 26272 от 14.07.docx» в одну строку не влезает
   нигде. Имя занимает две строки, и высота от этого гуляет на строку; на
   семи находках это заметно меньше, чем обрезанное имя. */
.mail-found {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px var(--mail-pad);
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--speed);
}
.mail-found:hover { background: var(--surface-2); }
.mail-found.is-active { background: var(--accent-soft); }
.mail-found:focus-visible { outline: none; box-shadow: var(--ring); }

/* Плашка стоит по верху имени, а не по середине строки: у имени в две строки
   середина уезжает вниз, и плашка повисала бы напротив второй строки. */
.mail-found > .mail-att__plate { align-self: flex-start; margin-top: 2px; }

.mail-found__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
/* Имя — до двух строк, дальше многоточие. Одной строкой различать файлы
   нечем: номер заказа и дата стоят в хвосте имени, а обрывается как раз он. */
.mail-found__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  font-size: 13px;
  line-height: 1.3;
  color: var(--text);
}
/* Вес и письмо — одной приглушённой строкой: «124 КБ · Литон · Заказ 26272».
   Одной, а не двумя: две строки под именем растят находку до полутора строк
   письма, и в колонку их помещается вчетверо меньше, чем писем. */
.mail-found__where {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--text-faint);
}
.mail-found__time {
  flex: 0 0 auto;
  align-self: flex-start;
  margin-top: 3px;
  font-size: 11.5px;
  white-space: nowrap;
  color: var(--text-faint);
}

/* Сколько нашлось и где искали. Тем же тоном, что «непрочитанных 3» над
   списком: это подсказка о состоянии, а не действие. */
.mail-found__head {
  padding: 8px var(--mail-pad) 6px;
  /* Справа место под свёрнутую лупу — она лежит поверх списка, и первой под
     ней стоит как раз эта строка. Та же оговорка, что у «Прочитать все». */
  padding-right: calc(var(--mail-pad) + 30px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-faint);
  font-size: 12px;
}

/* Заглушка живёт в той же строке, что и находка, поэтому отступы и рост у неё
   совпадают сами. Руки ей не нужны: нажимать пока не на что. */
.mail-found--skel { pointer-events: none; cursor: default; }
.mail-found--skel:hover { background: transparent; }

/* Блоками, а не полосами, и по той же причине, что в строке письма выше:
   заглушка обещает форму находки, а не изображает её текст. Форма же у
   находки своя — плашка типа, кусок имени с припиской под ним, дата справа, —
   и повторяем мы её теми же тремя мерами, какими сложена живая строка.

   **Это самое заметное место с заглушками во всей почте.** Окно поиска
   открывается пустым, ждать в пустоте нечего, и полосы рисуются там сразу, а
   не через четверть секунды, как в колонке (`foundBody` в `mailList.js`).
   Каждое набранное слово показывает их заново.

   Плашка — ровно та же, что у живой находки (`.mail-att__plate`: 30 на 18,
   радиус 5) и стоит там же, по верху имени.

   Кусок имени — в две строки имени плюс строка приписки. Число снято с живой
   находки в узкой колонке, а не посчитано по кеглю: 33.78 у имени в две
   строки, два на зазор, 17.39 у приписки — 53.17, и с полями строки это ровно
   те же 72.17, что у настоящей. Две строки, а не одна: имена бумаг в почте
   длинные («Спецификация на поставку 26272 от 14.07 для Томского молока.docx»),
   а колонка под открытым разговором — 252 точки, и в одну строку такое имя не
   ложится никогда.

   Дата — ростом в строку приписки и по верху строки, как живая. */
.mail-found--skel .mail-found__plate-skel {
  flex: none;
  align-self: flex-start;
  margin-top: 2px;
  width: 30px;
  height: 18px;
  border-radius: 5px;
}
.mail-found--skel .mail-found__body > .skel { height: 53.17px; }
.mail-found--skel .mail-found__tick {
  flex: none;
  align-self: flex-start;
  margin-top: 3px;
  width: 34px;
  height: 15px;
}

/* Список находок не прокручивается вбок ни при каком имени файла: имя
   обрезается само (`anywhere` плюс две строки), строка письма — многоточием,
   а сама полоса ужимается вместе с колонкой. Строка на телефоне та же — у
   колонки там триста девяносто точек, и отступы списка ей впору. */
.mail__rows--found { padding-bottom: 12px; }

/* =========================================================
   Избранное: закладка в строке письма
   =========================================================

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

   **Рисуется только у помеченных.** Пустая закладка у каждой строки — это
   серая колонка во весь список, на которой глаз спотыкается ровно так же, как
   спотыкался на счётчиках писем в чат-виде. Пометка отвечает на вопрос «это
   я откладывал?», и ответ «нет» лучше всего выглядит как пустое место.

   Место — в ряду меток (`.mail-row__marks`), рядом со скрепкой и чипом
   заказа: там уже стоит всё, что говорит про письмо в двух знаках. Своей
   колонки не заводим — колонка держала бы ширину и у тех строк, где пометки
   нет, то есть у девяноста девяти из ста.

   Цветом акцента и залитая: обведённая закладка в двенадцать точек читается
   колечком, а не знаком. Заливка — у самого пути значка (`icon()` рисует
   `svg` с обводкой), поэтому красим обе краски разом. */
.mail-row__star {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  color: var(--accent);
}
.mail-row__star .icon {
  fill: currentColor;
  stroke: currentColor;
}

/* В узкой колонке (открыт разговор) и на телефоне ряд меток стоит одной
   строкой рядом с именем, и место в нём считанное. Закладка остаётся: она
   уже, чем чип клиента, а отвечает на вопрос, ради которого «Избранное» и
   заводили. Прячется тот же чип клиента, что и раньше, — правило выше. */
@media (max-width: 1100px) {
  .mail-row__star .icon { width: 11px; height: 11px; }
}