/* Вид «Mail Ru»: разговор во весь экран просмотра.

   Третий вид почты, заказанный Романом 07.09.2026: «без бокового списка
   писем, при открытии треда проваливаемся в тред полностью и показываем
   списком письма в этом треде, открываем их полностью при нажатии на письмо и
   закрываем также».

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

   **Это раскладка, а не оформление.** Ни одного своего цвета, кегля или
   скругления здесь нет: письмо, шапка, чипы и вложения остаются теми же, что в
   виде «Gmail», — Роман прямо просил их не трогать («оформления вложений и тд
   оставляй как есть, они лучше у нас чем в мейл ру»). Меняется только то, где
   что лежит и как появляется.

   Лист стоит **перед** `mail-phone.css` нарочно: на телефоне разговор и так
   ложится поверх списка, и телефонные правила обязаны перебивать здешние, а не
   наоборот. То есть на узком экране все три вида выглядят одинаково — и это
   верно: колонок там нет ни у одного.

   Порядок разделов:
     1. Каркас: список во всю ширину, разговор слоем поверх
     2. Шапка разговора в два яруса
     3. Лента писем: ширина строки и колонка
     4. Появление: разговор наезжает, письма проявляются по очереди
*/

/* =========================================================
   1. Каркас
   ========================================================= */

/* Только на широком экране. На узком раздел и так однокололоночный
   (`mail-phone.css`), и здешние правила там были бы вторым описанием того же
   самого — то есть первым местом, где два описания разъедутся. */
@media (min-width: 821px) {

  /* Список не ужимается в колонку, когда разговор открыт. В «Gmail» на этом
     месте появляется третья колонка; здесь её нет вовсе — разговор ложится
     поверх, и список остаётся во всю ширину под ним. Правило двойное по
     селектору, потому что перебивает `.mail.has-thread` из `app.css`: одним
     классом его не перевесить. */
  .mail--dive,
  .mail--dive.has-thread {
    position: relative;
    grid-template-columns: var(--mail-rail-w) minmax(0, 1fr);
  }

  /* Разговор — слоем поверх списка, ровно как на телефоне (`.mail__pane` в
     `mail-phone.css`) и как «О чате» поверх переписки.

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

     Отступ считается от того же числа, которым живёт сама шапка
     (`--mail-top-h`), плюс волосок её нижней границы. Подобранное на глаз
     число разъехалось бы с шапкой на первой же правке её высоты. */
  .mail--dive.has-thread .mail__pane {
    display: flex;
    position: absolute;
    top: calc(var(--mail-top-h) + 1px);
    right: 0;
    bottom: 0;
    left: var(--mail-rail-w);
    z-index: 8;
    background: var(--surface);
    /* Слой едет вместе с колонкой папок, а не прыгает вслед за ней.

       Колонка сворачивается переходом по сетке (`--mail-fold`, 220 мс, в
       `mail.css`), и шапка списка тянется за ней плавно — она в той же сетке.
       А слой разговора стоит абсолютом, и его левый край — не ячейка сетки, а
       число: сменилось значение переменной, край переставился тем же кадром.
       Роман 07.09.2026: «шапка Флоу.Почты подтягивается равномерно за
       скрывающимся сайдменю, но просмотр треда просто резко меняет ширину без
       анимации — они должны синхронно это делать».

       Время и кривая — те же самые, из тех же переменных: два движения на
       одном экране, разъехавшись хоть на кадр, читаются как рывок.

       **Едет `left`, а не трансформ.** Полдня 07.09.2026 здесь стоял
       трансформ — тогда и сворачивание раздела ехало им же. Роман посмотрел
       живьём и попросил вернуть прежнее движение: «новые анимации ужасны
       скрытия и раскрытия сайдменю». Колонка снова едет шириной по сетке, и
       слой обязан ехать вместе с ней, то есть своим краем. */
    transition: left var(--mail-fold) var(--ease, ease);
  }
  /* Кому движение мешает — тому и здесь его нет, как и у самой сетки. */
  @media (prefers-reduced-motion: reduce) {
    .mail--dive.has-thread .mail__pane { transition: none; }
  }
  .mail--dive.has-thread .mail__view { min-width: 0; min-height: 0; }

  /* Окно поиска — над разговором, а не под ним.

     Оно лежит в колонке списка (`.mail-find` в `mail-search.css`), то есть под
     слоем разговора; без этой строки лупа в шапке открывала бы окно, которого
     не видно. Колонка списка своего слоя не заводит (`position: relative` без
     `z-index`), поэтому окно спорит с разговором напрямую — и выигрывает.

     Разговор при этом не закрывается: поискал, закрыл окно — вернулся туда же,
     где читал. В mail.ru поиск забирает экран себе, и возвращаться приходится
     заново. */
  .mail--dive .mail-find { z-index: 9; }

  /* Стрелка «назад к списку» на столе показывается только здесь. В двух
     других видах список стоит рядом и выходить из разговора незачем — там она
     спрятана (`mail-thread.css`), а на телефоне показана всегда. Здесь список
     закрыт разговором, и это единственная дорога обратно.

     **Оформление — то же, что у значков справа в этой же шапке**
     (`.mail-head__mode` в `app.css`): тридцать точек, скругление восемь, без
     рамки и подложки, заливка только под курсором. Роман 07.09.2026: «можешь
     сделать иконку „назад“ в стиле остальной Флоу? он сейчас очень выбивается
     из стиля».

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

     Повторяем значения, а не перечисляем стрелку рядом с `.mail-head__mode`
     через запятую: у той кнопки на телефоне свой размер под палец
     (`mail-phone.css`), и общий селектор потащил бы туда настольные тридцать
     точек. Разъедутся — виноват будет этот комментарий.

     Значок 16, а не 18: восемнадцатая стрелка рядом с пятнадцатыми значками
     справа читается как другая величина, хотя кнопки одного размера. */
  .mail--dive .mail-head__back {
    display: grid; place-items: center;
    width: 30px; height: 30px; flex: 0 0 auto;
    border: 0; border-radius: 8px;
    background: transparent; color: var(--text-faint);
    cursor: pointer;
    transition: background var(--speed), color var(--speed);
  }
  .mail--dive .mail-head__back:hover { background: var(--surface-3); }
  .mail--dive .mail-head__back:focus-visible { outline: none; box-shadow: var(--ring); }
  .mail--dive .mail-head__back svg { width: 16px; height: 16px; }
}

/* =========================================================
   2. Шапка разговора
   ========================================================= */

/* Одна строка: стрелка «назад» — тема — чипы — действия.

   Первым заходом тема стояла вторым ярусом, под стрелкой, как заголовок
   страницы в mail.ru. Роман 07.09.2026 посмотрел и сказал: «стрелку назад и
   тема письма должны быть на одной строке очевидно». Он прав, и довод виден на
   снимке: стрелка над темой читается как кнопка к пустоте справа от себя, а
   шапка вырастает вдвое, ничего не прибавляя.

   Раскладка от этого становится **той же самой**, что в двух других видах, и
   своих правил ей не нужно вовсе — ни сетки, ни областей. Здесь остаётся
   только то, чем этот вид отличается: стрелка показана, крестика нет, тема
   чуть крупнее.

   Кегль темы — 17, а не 20 и не 15,5. Двадцатый был заголовком страницы и
   годился второму ярусу; в строке рядом с шестью значками он перевешивает их
   и тянет строку в рост. Пятнадцать с половиной — кегль темы в узкой колонке
   «Gmail», а здесь строка во всю ширину окна, и тема в ней теряется. */
@media (min-width: 821px) {
  .mail--dive .mail-head__subject { font-size: 17px; }

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

     Прячем правилом, а не разметкой: узел шапки один на все виды и живёт от
     разговора к разговору (`headBar` в `mailThread.js`), а вид переключается
     под ним на ходу. */
  .mail--dive .mail-head__close { display: none; }
}

/* =========================================================
   3. Лента писем
   ========================================================= */

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

   **Порядок обратный: свежее сверху, старое ниже.** Роман 07.09.2026: «нужно
   делать свежие письма — сверху, а старые ниже. у тебя сейчас наоборот».

   Переворачиваем **показ, а не данные**, и это главное решение здесь. В
   `data.rows` письма лежат от старых к свежим, и на этом держится вся оконная
   механика ленты (`mountFeed`): окно последних `WINDOW` писем, распорки под
   снятое, сторож у начала собранного, подгрузка прежних порций в начало
   списка и поправка места прокрутки на их высоту. Переверни мы сам список —
   пришлось бы вывернуть наизнанку каждую из этих пяти вещей, а сломались бы
   они молча и не сразу: на длинной переписке, у человека, а не на стенде.

   `column-reverse` не трогает ни разметку, ни числа: браузер раскладывает те
   же узлы в обратном порядке. Заодно сторож «поднять прежние» и распорка,
   стоящие в разметке первыми, оказываются внизу — ровно там, где теперь и
   лежит начало переписки. */
.mail-feed--dive {
  display: flex;
  flex-direction: column-reverse;
  /* Зазор здесь свой, а не гмейловский, и меньше него: Роман 07.09.2026 —
     «строчки писем очень высокие — их можно спокойно ужать по высоте». Ужимать
     надо было не только саму строчку: в списке из двадцати писем воздух между
     ними складывается в те же полтора экрана, что и сами строчки. Восемь точек
     — это ровно тот зазор, при котором соседние карточки ещё читаются
     раздельно (у них своя рамка и своя заливка шапки), а список уже не
     растягивается. */
  gap: 8px;
}

/* Прижать переписку к верху — авто-полем, а не `justify-content`.

   В обратной раскладке начало потока — низ, и переписка из трёх писем
   провисала бы к нижнему краю с пустотой в пол-экрана над ней.

   **`justify-content: flex-end` эту пустоту убирает и ломает прокрутку.**
   Так и было написано первым заходом, и стенд поймал: у ленты в 245 точек
   `scrollHeight` оказался равен `clientHeight` — то есть не влезшие письма
   ушли за край, и долистать до них нельзя вовсе. Это давняя грабля
   выравнивания в прокручиваемом флексе, и она молчаливая: на короткой
   переписке всё выглядит правильно.

   Авто-поле делает то же самое и этой граблей не страдает: свободное место
   оно забирает, когда оно есть, и обращается в ноль, когда его нет. Вешаем на
   `::before` — он первый флекс-элемент, а в обратной раскладке первый стоит
   внизу; поле под ним и выталкивает письма вверх. */
.mail--dive .mail-feed::before {
  content: '';
  margin-bottom: auto;
}

/* Письмо — во всю ширину ленты разговора.

   Первым заходом здесь стоял потолок в 900 точек с доводом про длину строки.
   Роман 07.09.2026: «можешь только сделать разумеется отображение писем во всю
   ширину экрана треда (у тебя сейчас зачем-то они уменьшены)».

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

   Правило пишется, а не удаляется: без него `.mail-slot` берёт ширину от
   `align-items` ленты — то есть по содержимому, и короткое письмо стояло бы
   узкой полоской посреди пустоты. */
.mail--dive .mail-feed > .mail-slot { width: 100%; max-width: none; align-self: stretch; }

/* Свёрнутая строчка — ростом с шапку раскрытого письма, и обе ужаты.

   Роман 07.09.2026, две просьбы подряд и обе про эту высоту:

   * «толщину свернутого письма прошу сделать больше — по толщине шапки
     раскрытого! а то вообще некрасиво». В ленте они стоят вперемешку, и
     строчка в 38 точек против 56 у шапки читалась сбитым списком;
   * «строчки писем очень высокие — их можно спокойно ужать по высоте».

   Противоречия между ними нет: равнять надо было по шапке, а вот сама шапка
   в этом виде и оказалась высокой. Поэтому ужимаем **пару**, а не одну из
   них: своё поле по вертикали на обе, и обе садятся на 49–50 точек вместо
   59–60. Разговор из двадцати писем от этого становится короче на треть
   экрана — вместе с зазором ленты выше.

   `--mail-dive-pad-y` — то самое общее поле, ради которого переменная и
   заведена. Строчка и шапка обязаны ехать вместе: разойдись они, вернётся
   ровно та «сбитость», из-за которой строчку и подняли. Семь точек — поле
   строки списка писем (`--mail-row-pad` в `mail.css`), и это не совпадение:
   в этом виде человек проваливается из списка прямо в тред, и ряд строчек
   там и здесь читается одним ритмом.

   Меньше семи не берём: лицо в строчке 34 точки, и воздуха под ним должно
   остаться столько, чтобы кружки соседних строк не слиплись в столбец — тот
   же довод, что у высоты строки списка.

   Ростом, а не полями: `min-height` оставляет короткой строчке её собственные
   поля, если содержимое вдруг окажется выше. Лицо при этом подрастает до того
   же размера, что в шапке, — иначе строчка стала бы выше, а её лицо осталось
   бы мелкой пуговицей посреди пустоты.

   Число считаем **из тех же частей, что и шапка**, а не берём `--mail-head-h`
   (это высота шапки разговора, другая вещь, и совпадение было бы случайным):
   лицо, два поля по вертикали и волосок нижней границы. Поправят любую из
   частей — обе высоты поедут вместе. */
.mail--dive { --mail-dive-pad-y: 7px; }
.mail--dive .mail-letter--folded > .mail-letter__row {
  min-height: calc(var(--mail-face) + var(--mail-dive-pad-y) * 2 + 1px);
  padding-top: 0; padding-bottom: 0;
  padding-left: var(--mail-card-pad-x); padding-right: var(--mail-card-pad-x);
}
.mail--dive .mail-letter--folded .mail-face {
  width: var(--mail-face); height: var(--mail-face); font-size: 13px;
}
/* Шапка раскрытого — тем же полем. Трогаем только поле: врезка держится на
   отрицательных полях в `--mail-card-pad-y` (`mail.css`), и они обязаны
   остаться равными полям самой карточки, иначе полоса шапки перестанет
   доходить до её краёв. */
.mail--dive .mail-letter > .mail-letter__head {
  padding-top: var(--mail-dive-pad-y);
  padding-bottom: var(--mail-dive-pad-y);
}

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

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

   Кнопка-пилюля, а не голая подпись: три слова подряд без формы читались бы
   как строка текста, приписанная к письму. Форма — та же, что у чипа-призрака
   «Привязать к заказу» (`mail.css`): рамка волоском, заливка по наведению. */
.mail-letter__foot {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--border);
}
.mail-letter__foot-act {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px;
  border: 1px solid var(--border-strong); border-radius: var(--r);
  background: transparent; color: var(--text); cursor: pointer;
  font: inherit; font-size: 13px;
  transition: background-color var(--speed), border-color var(--speed), color var(--speed);
}
.mail-letter__foot-act:hover {
  border-color: var(--accent); color: var(--accent-text);
  background: var(--accent-soft);
}
.mail-letter__foot-act:focus-visible { outline: none; box-shadow: var(--ring); }
.mail-letter__foot-act svg { flex: 0 0 auto; }

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

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

   Черту оставляем: она отделяет подпись от текста, а не прячет её. */
.mail--dive .mail-body--sign {
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

/* =========================================================
   4. Строка списка — в одну линию
   ========================================================= */

/* Имя — фиксированной колонкой, за ним тема, за ней зачин приглушённо.

   Роман 07.09.2026, со снимком mail.ru: «нужно писать получателя/отправителя —
   потом через фиксированный отступ — тему письма и после нее текст сообщения.
   так людям будет привычнее. это делаем только для режима Мейл ру».

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

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

   Тема и зачин идут одной строкой через зазор: тема весом и в цвет текста,
   зачин приглушён. Так их и различают в mail.ru — не рамкой и не отступом, а
   тем, что одно ярче другого. */
@media (min-width: 821px) {
  /* Всё в строке — по её середине, и лицо тоже. Роман 07.09.2026: «прошу
     оцентровать как в мейл ру имя контакта, тему и начало письма и аватарку —
     по середине строки с письмом. возможно строку надо ужать чуток».

     **Полями строку не ужать — рост ей задан числом.** Это стоит знать
     следующему: в `mail-list.css` стоит `height: var(--mail-row3-h)`, и число
     это сумма трёх ярусов — имени, темы и зачина, — то есть 75 точек. Здесь
     ярусов нет вовсе, все три стоят в ряд, а число осталось прежним: поля с
     семи точек до пяти ужали воздух внутри коробки, сама коробка как была 75,
     так и осталась. Замер: лицо 34, строка 75, между лицами соседних строк 41
     точка пустоты — больше самого лица.

     Роман 07.09.2026, вторым заходом: «строки писем еще уже, прям по
     максимуму — они сейчас намного шире, чем должны быть». Поэтому у строки в
     этом виде своё число, и считается оно из своих частей: лицо и воздух над
     ним и под ним. Ниже лица строке не стать — мельче лицо в списке, по
     которому узнают отправителя, делать нельзя, — а четыре точки поля это тот
     предел, за которым кружки соседних строк читаются сплошным столбцом:
     восемь точек между ними, столько же, сколько в самом mail.ru. Итого 42
     вместо 75 — на экран влезает вдвое больше писем.

     `min-height` рядом с `height` — на случай, если в строку когда-нибудь
     приедет что-то выше лица: тогда она вырастет, а не обрежет. */
  .mail--dive .mail__rows {
    --mail-dive-row-pad: 4px;
    --mail-dive-row-h: calc(var(--mail-face) + var(--mail-dive-row-pad) * 2);
  }
  .mail--dive .mail__rows .mail-row {
    align-items: center;
    height: var(--mail-dive-row-h);
    min-height: var(--mail-dive-row-h);
    padding-top: var(--mail-dive-row-pad);
    padding-bottom: var(--mail-dive-row-pad);
    /* Место под колонку точек непрочитанного. Забираем полем строки, а не
       колонкой сетки: колонка сдвинула бы лицо и имя, а Роман просил, чтобы
       «ничего не ехало» — то есть чтобы столбец аватарок остался столбцом.
       Поле двигает все строки разом и на одно и то же число. */
    padding-left: 28px;
  }
  /* Полоска ящика и своё поле — та же арифметика: полоска в три точки стоит по
     самому краю, точка непрочитанного за ней, лицо за точкой. */
  .mail--dive .mail__rows .mail-row.has-box { padding-left: 28px; }
  .mail--dive .mail__rows .mail-row__marks { align-self: center; }
  /* Лицо — тоже по середине. Оно прижато к верху отдельным правилом
     (`.mail .mail__rows .mail-face` в `mail-list.css`), и сделано это ради
     трёхъярусной строки: там лицо стоит у имени, а не посреди трёх строк.
     Здесь ярус один, и `align-items` у строки лицо не берёт — своё
     `align-self` у ребёнка сильнее выравнивания контейнера. */
  .mail--dive .mail__rows .mail-face { align-self: center; }

  .mail--dive .mail__rows .mail-row__body {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    row-gap: 0;
  }
  .mail--dive .mail__rows .mail-row__name {
    flex: 0 0 240px; max-width: 240px;
  }
  /* Тема — главная в строке, и её показываем целиком. Роман: «прошу сделать
     приоритет на отображение темы письма — желательно целиком. после этого уже
     начало письма».

     Поэтому тема **не ужимается вовсе** (`flex-shrink: 0`), а место под неё
     отнимает зачин: у него `flex: 1 1 0`, и он отдаёт свою ширину первым, до
     многоточия и до нуля. Потолок в 70% всё же есть — тема в двести знаков
     иначе вытеснила бы зачин из строки полностью и заодно уехала бы под метки
     справа. */
  .mail--dive .mail__rows .mail-row__line {
    flex: 0 0 auto; max-width: 70%;
    color: var(--text);
  }
  .mail--dive .mail__rows .mail-row__snippet { flex: 1 1 0; min-width: 0; }
}

/* Счётчик писем в разговоре — тусклым фиолетовым. Роман: «прошу сделать
   тусклыми фиолетовыми метки длины тредов».

   Серым (`--surface-3` из общей формы «тихого» чипа) он читался как ещё одна
   метка в ряду со скрепкой и временем, хотя отвечает на другой вопрос — не
   «что в письме», а «сколько в разговоре кругов». Фиолетовый роднит его с
   акцентом Флоу, а тусклость держит его позади имени: число это подсказка, а
   не заголовок.

   Краска — растворённый акцент, а не готовый `--accent-soft`: тот заметно
   плотнее и в списке из тридцати строк складывается в лиловую лесенку. */
.mail--dive .mail__rows .mail-row__count {
  background: color-mix(in oklab, var(--accent), transparent 88%);
  color: var(--accent-text);
  /* Отступ от имени. Роман 07.09.2026: «можешь сделать иконки длины треда
     более заметными и не слипшимися с именами контактов?»

     Слипались они буквально: счётчик стоит в строке имени соседней вставкой,
     и между «Шевченко Юлия Валерьевна» и числом не было ни точки зазора —
     глаз читал число хвостом фамилии. Девять точек — тот же зазор, каким в
     этой строке отделены друг от друга тема и зачин (там 14 при более
     крупном кегле), а не круглое число на глаз.

     Слева, а не с обеих сторон: справа у имени своя граница колонки в 240
     точек, и второй отступ сдвинул бы число внутрь, к имени. */
  margin-left: 9px;
  /* Каймы нет. Роман 07.09.2026, тем же днём: «индикатор писем в треде —
     крупнее круг, без каймы и без урезания».

     Обводку поставили несколькими часами раньше, отвечая на «сделать метки
     длины тредов более заметными» (раздел 197 в HANDOFF): она делала число
     отдельным предметом, ничего не прибавляя к яркости. Довод был верный,
     ответ Роману не подошёл — заметность взял на себя сам круг, он теперь
     крупнее. Краску и начертание Роман не отменял, они остаются.

     Снимаем цветом, а не `border: none`: волосок в точку держит место в общей
     форме чипа (`border: 1px solid transparent` в `mail.css`), и убери его
     совсем — число дрогнуло бы на две точки вбок и вниз. */
  border-color: transparent;
  /* Начертание плотнее обычного — столько, чтобы цифра читалась не
     приглядываясь, и не столько, чтобы спорить с именем: у непрочитанных оно
     набрано жирным.

     Кегль не трогаем. Он и так 11,5 (`--mail-chip-fs` в `mail.css`) — крупнее
     общего для системы, — и поднимать его значило бы разводить метку с
     соседними чипами строки, скрепкой и временем, ради полуточки. */
  font-weight: 560;
}

/* Круг крупнее — и с местом, чтобы не обрезаться снизу.

   Роман 07.09.2026: «крупнее круг, без каймы и без урезания (сейчас он
   обрезается слегка снизу)». Обрезался — замер это подтвердил, и причина не в
   круге, а в коробке, в которой он стоит.

   Имя — коробка ростом ровно в 19 точек с `overflow: hidden`
   (`mail-list.css`), и рост задан числом нарочно: инлайновая вставка не имеет
   права поднимать строку под себя, иначе высоты писем в списке запляшут.
   Счётчик и есть эта вставка, а стоит он `vertical-align: middle` — то есть
   серединой не по середине коробки, а по половине роста строчных букв. Половина
   эта меньше половины круга, и низ круга уходит ниже дна коробки: 0,63 точки за
   краем при круге в 16. Вырасти круг до двадцати — за краем оказалось бы 2,6.

   Лечим ростом строки, а не отменой `overflow` (на нём держится многоточие у
   длинного имени) и не сдвигом круга на глаз: каждая точка `line-height`
   опускает дно коробки на полточки, и 25 точек дают кругу в 20 запас в треть
   точки. Сам текст имени при этом не двигается — он стоит по середине своей
   строки, а строка по середине письма (замер до и после: текст имени стоял на
   27,5…45,5 от верха письма при его росте 75, стал на 11,5…29,5 при 42 — обе
   середины сошлись с серединой письма).

   Круг растёт ростом и дном по ширине: `min-width` вровень с высотой делает
   однозначное число настоящим кругом, а не лежачим овалом (было 18,4 на 16,
   стало 20 на 20). Двузначное по-прежнему растянется в пилюлю — ей ширину
   задаёт цифра, а не мы.

   Только на столе: на телефоне имя стоит ярусом в сетке, рост письма там
   считан по трём ярусам до точки, и лишние шесть точек у имени выдавили бы
   зачин за край. Кайму снимаем и там — она места не занимает. */
@media (min-width: 821px) {
  .mail--dive .mail__rows .mail-row__name { height: 25px; line-height: 25px; }
  .mail--dive .mail__rows .mail-row__count {
    height: 20px;
    min-width: 20px;
    justify-content: center;
    /* Поле в четыре точки, а не шесть: однозначное число вписывается в
       двадцать ровно (8,4 точки цифры плюс восемь), и круг выходит кругом, а
       не овалом в 20,4 на 20. Двузначное по-прежнему растянет плашку в
       пилюлю — ширину ей задаёт цифра, а не мы. */
    padding: 0 4px;
  }
}

/* Открытый разговор не подсвечивает свою строку в списке.

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

   В «Gmail» подсветка нужна: список и разговор стоят рядом, и она отвечает на
   вопрос «какое из них открыто». Здесь списка рядом нет вовсе — он под слоем, —
   и подсветке отвечать не на что; видно её ровно один миг, когда слой уезжает,
   и читается она как вспышка на пустом месте.

   Наведение и рамка фокуса остаются: они про руку и про клавиатуру, а не про
   состояние. */
.mail--dive .mail__rows .mail-row.is-active { background: transparent; }
.mail--dive .mail__rows .mail-row.is-active:hover { background: var(--mail-hover); }

/* =========================================================
   5. Появление
   ========================================================= */

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

   Движений два, и своё здесь только одно.

   **Разговор наезжает — общим движением, а не своим.** `mail-pane-in` в
   `mail.css` уже написан и выверен: 220 мс, ход в два поля раздела, обратный
   ход короче и на другой кривой. Первым заходом я завёл рядом второе такое же
   с другими числами — и это ровно тот случай, от которого весь этот раздел и
   лечат: два описания одного движения расходятся на первой правке, а обратного
   хода у нового не было вовсе, и закрытие разговора выходило рывком.

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

   Восемь, а не все: девятое письмо и ниже в окне уже не помещаются, а
   задержка в полсекунды на письме, которого не видно, — это полсекунды
   пустого экрана при прокрутке вверх.

   Едут `opacity` и `transform` — оба уходят на видеокарту и не трогают
   раскладку. Ни высоты, ни размытия: лента это карточки с текстом и
   миниатюрами, и пересчитывать их каждый кадр значит уронить кадры.

   Проявление сделано **анимацией, а не переходом**, и это тот самый приём, по
   которому лечится `prefers-reduced-motion`: обычное состояние письма видимое,
   прозрачным его делает анимация. Тогда `animation: none` внизу возвращает
   письму его собственную видимость — оно просто оказывается на месте, без
   единого лишнего кадра. */
@keyframes mail-dive-letter {
  from { opacity: 0; transform: translateY(9px); }
  to { opacity: 1; transform: none; }
}

/* Очередь писем — только на свежей ленте.

   `is-fresh` ставит `renderView` при переезде в другой разговор и снимает
   через полсекунды (`mailThread.js`). Без снятия очередь играла бы и на
   письмах, дописанных прокруткой вверх, — то есть на тех, что человек уже
   держит перед глазами.

   Отсчёт задержки идёт от `:nth-child`, а не от переменной на узле: делать
   это скриптом значило бы трогать разметку каждого письма ради числа, которое
   известно заранее и никогда не меняется. */
.mail--dive .mail-feed.is-fresh > .mail-slot {
  animation: mail-dive-letter 280ms var(--ease) both;
}
.mail--dive .mail-feed.is-fresh > .mail-slot:nth-child(1) { animation-delay: 0ms; }
.mail--dive .mail-feed.is-fresh > .mail-slot:nth-child(2) { animation-delay: 40ms; }
.mail--dive .mail-feed.is-fresh > .mail-slot:nth-child(3) { animation-delay: 80ms; }
.mail--dive .mail-feed.is-fresh > .mail-slot:nth-child(4) { animation-delay: 120ms; }
.mail--dive .mail-feed.is-fresh > .mail-slot:nth-child(5) { animation-delay: 160ms; }
.mail--dive .mail-feed.is-fresh > .mail-slot:nth-child(6) { animation-delay: 200ms; }
.mail--dive .mail-feed.is-fresh > .mail-slot:nth-child(7) { animation-delay: 240ms; }
.mail--dive .mail-feed.is-fresh > .mail-slot:nth-child(8) { animation-delay: 280ms; }
/* Девятое и ниже — без задержки: они за краем окна, и ждать их незачем. */
.mail--dive .mail-feed.is-fresh > .mail-slot:nth-child(n + 9) { animation-delay: 280ms; }

/* Разворачивание письма на месте — тем же проявлением, но без хода.

   Письмо разворачивается по нажатию, то есть человек смотрит ровно на него, и
   сдвиг под пальцем читался бы как промах. Прозрачности хватает: карточка
   выше строчки в несколько раз, и подмена без неё выглядит рывком.

   Вешается на карточку внутри места письма (`letterSlot` меняет начинку, а
   само место остаётся), поэтому очереди сверху это правило не мешает: там
   анимировано место, здесь — то, что в нём лежит. */
@keyframes mail-dive-open {
  from { opacity: 0; }
  to { opacity: 1; }
}
.mail--dive .mail-slot > .mail-letter:not(.mail-letter--folded) {
  animation: mail-dive-open 180ms var(--ease) both;
}

/* Кому движение мешает — тому его нет. Письма и слой при этом не пропадают и
   не замирают: они просто встают готовыми. */
@media (prefers-reduced-motion: reduce) {
  .mail--dive .mail-feed.is-fresh > .mail-slot,
  .mail--dive .mail-slot > .mail-letter:not(.mail-letter--folded) {
    animation: none;
  }
}