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

   Лист подключён **последним** из почтовых (см. `web/index.html`), поэтому
   слово в раскладке здесь последнее. Пользуемся этим только по делу: всё, что
   ниже, — раскладка узкого экрана, а не переоформление раздела. Цвета,
   кегли и повадки берутся у соседей и у чата, своих величин не заводим.

   Почему лист вообще понадобился. Записка 80 честно оговаривала: «на телефоне
   раздел не смотрели глазами; раскладка в одну колонку написана, но снималась
   только настольная». Снимки на 390 показали, что написанного мало:

   * колонка ящиков и папок растягивалась гридом на треть экрана (248 точек
     из 795) и при этом уезжала вбок на 1466 — из десяти кнопок было видно
     две с половиной;
   * при открытом разговоре возвращалась **настольная сетка в три колонки**:
     `.mail.has-thread` бьёт по силе селектора медиазапрос с `.mail`, и
     страница раскладывалась на 538 точках внутри экрана в 390;
   * сам разговор при этом не показывался вовсе. Правило показа висело на
     классе `show-thread`, которого не ставит никто: `mailThread.js` ставит
     `has-thread`. То есть письмо на телефоне прочитать было нельзя;
   * поле «Кому» в окне письма — 14 точек, и Сафари увеличивал страницу на
     первом же касании.

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

@media (max-width: 820px) {

  /* =========================================================
     1. Каркас: два яруса, а не три колонки
     ========================================================= */

  /* Ряды объявлены явно. Без них грид делит высоту между своими рядами
     поровну (`align-content` по умолчанию тянет ряды с `auto`), и лента
     папок получала 248 точек на одну строку кнопок — ровно та пустота
     сверху, из-за которой первое письмо начиналось на трети экрана. */
  .mail {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }
  /* Разговор открыт — сетка та же. Правило `.mail.has-thread` в app.css
     сильнее по селектору любого правила с одним классом, поэтому переписать
     его можно только таким же двойным. Иначе на телефоне возвращаются
     настольные 232 + 320 + остаток, и страница уезжает вбок. */
  .mail.has-thread { grid-template-columns: minmax(0, 1fr); }

  /* Раздел живёт в масштабе чата, а не общем. Почта и чат — один экран по
     устройству («с кем я разговариваю»), и разный кегль у соседних разделов
     читается как две системы в одном окне. Общий 1.15 к тому же раздувал
     ленту папок: кнопка в 34 точки становилась под сорок. */
  .app.is-mail .view { zoom: var(--chat-scale, 1.1); }

  /* =========================================================
     2. Строка «где я сейчас» вместо ленты вбок
     ========================================================= */

  /* Здесь стояла лента переключателей вбок, и 28.08.2026 её пришлось убрать.

     Замер на демо с двумя ящиками: **1617 точек содержимого в окне 341**,
     четырнадцать пилюль, 4,7 экрана прокрутки вбок. У Романа ящиков восемь —
     это около семи экранов, причём сами ящики лежали на третьем экране
     вправо. Роман: «во Флоу.Почте на мобильном горизонтальные скроллы, какая-
     то дичь». Он прав, и дело не в том, что лента длинная.

     Дело в том, что в ней лежало четыре разных рода: наши папки, свои папки
     почты, фильтры и ящики. Ряд из четырёх родов не читается ни в каком
     порядке — соседние пилюли отвечают на разные вопросы, и глазу не за что
     зацепиться. Лента переключателей на доске и в делах работает потому, что
     там пять-шесть пунктов **одного** рода.

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

     Прокрутки вбок у строки нет вовсе — ни своей, ни наведённой: длинное имя
     ящика ужимается многоточием (`min-width: 0` ниже), а не растягивает
     строку. */
  .mail__rail {
    min-width: 0;
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    /* Шапки системы в разделе нет (`.app.is-mail .topbar`), поэтому вырез
       закрывает строка — как в чате это делает его собственная шапка. Деление
       на масштаб обязательно: `env()` приходит в физических точках, а строка
       лежит внутри отмасштабированной рабочей области. */
    padding: 6px 10px;
    padding-top: calc(env(safe-area-inset-top) / var(--chat-scale, 1.1) + 6px);
    overflow: visible;
    /* Якорь круглой кнопки «Написать» — сама `.mail`, а не строка. */
    position: static;
  }

  /* Сама строка. Во всю ширину и ростом под палец: это единственная кнопка
     раздела до того, как человек выбрал письмо, и мельче её делать не на чем
     экономить. Цветной кружок слева — тот же, что в списке ящиков: цвет и
     есть то единственное, чем ящики различаются между собой. */
  .mail__here {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 7px 12px;
    border: 0;
    border-radius: 999px;
    background: var(--surface-3);
    color: var(--text);
    font: inherit;
    font-size: 13.5px;
    text-align: left;
    cursor: pointer;
  }
  .mail__here:active { background: var(--surface-2); }
  /* Имя ящика ужимается, имя папки — нет. Папка короткая и она же ответ на
     вопрос «что я вижу»; ящик бывает длинным («Продажи ДЕКА»), и обрывать
     надо именно его. Стрелка и точка при этом остаются на местах. */
  .mail__here-box {
    min-width: 0; flex: 0 1 auto;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--text-soft);
  }
  .mail__here-sep { flex: 0 0 auto; font-style: normal; color: var(--text-faint); }
  .mail__here-folder { flex: 0 0 auto; font-weight: 600; }
  .mail__here svg { flex: 0 0 auto; margin-left: auto; color: var(--text-faint); }

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

     Строка ростом 44 точки: это минимум под палец по любым рекомендациям, и
     именно на нём ловятся промахи. Ужимается имя, а не значок и не счётчик:
     по хвосту имени папки («ДЕКА- Почта/Чеки») её и различают, но выбор из
     списка идёт по началу строки. */
  .mail-pick { display: flex; flex-direction: column; gap: 2px; }
  .mail-pick__cap {
    padding: 12px 4px 4px;
    font-size: 11.5px; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; color: var(--text-faint);
  }
  .mail-pick__cap:first-child { padding-top: 2px; }
  .mail-pick__row {
    display: flex; align-items: center; gap: 10px;
    min-height: 44px; padding: 8px 10px;
    border: 0; border-radius: 10px;
    background: transparent; color: var(--text);
    font: inherit; font-size: 14.5px; text-align: left; cursor: pointer;
  }
  .mail-pick__row:active { background: var(--surface-3); }
  .mail-pick__row.is-active { background: var(--accent-soft); color: var(--accent-text); }
  .mail-pick__name {
    flex: 1 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* Значок и кружок ящика не жмутся: они и есть опора, по которой глаз идёт
     вниз по списку. */
  .mail-pick__row > svg,
  .mail-pick__row > .mail__box-dot { flex: 0 0 auto; }

  /* =========================================================
     3. «Написать» — круглой кнопкой над панелью
     ========================================================= */

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

     Абсолютом от `.mail`, а не `fixed`: раздел живёт в высоте видимого окна
     (`--vvh`), и прибитая к окну кнопка всплыла бы поверх клавиатуры, когда
     раскрыт поиск. */
  .mail__write {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 6;
    width: 52px;
    height: 52px;
    padding: 0;
    border-radius: 50%;
    box-shadow: var(--shadow-pop);
    /* Слово прячем кеглем, а не `display: none` у надписи: подпись — часть
       кнопки и остаётся в разметке для тех, кто слушает экран, а рисунок
       (SVG) от кегля не зависит. */
    font-size: 0;
    gap: 0;
  }
  /* Разговор открыт — писать новое письмо не отсюда: кнопка легла бы поверх
     строки ответа, а это две разные отправки в одной точке экрана. */
  .mail.has-thread .mail__write { display: none; }

  /* =========================================================
     4. Строка списка: имя и время сверху, письмо во всю ширину снизу
     ========================================================= */

  /* На столе строка одна и в ней четыре колонки. На 390 точках в одну линию
     не влезает ни тема, ни начало письма: снимок «до» обрывал её на «Re:
     Заказ 26272 - бланк…», хотя справа оставалась сотня пустых точек.

     Поэтому два яруса, как в любой телефонной почте:

       ярус 1 — имя (слева) и время со значками (справа);
       ярус 2 — тема с началом письма **во всю ширину**, под именем.

     Тема получает 300 точек вместо 190 — то есть на треть больше букв, чем
     давала настольная раскладка, ужатая до телефона. Пожертвован при этом
     чип клиента (см. ниже): он единственный, кто в этой строке повторяет
     соседа. */
  .mail-row {
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 10px;
    row-gap: 2px;
    padding: 8px 12px;
  }
  .mail-row .mail-face { grid-row: 1 / span 2; align-self: center; }
  .mail-row__name { grid-column: 2; grid-row: 1; }
  /* Ярус второй тянется от имени до правого края — в этом вся правка. */
  .mail-row__line {
    grid-column: 2 / -1;
    grid-row: 2;
    -webkit-line-clamp: 1;
    line-height: 1.35;
  }
  /* Время и значки — строкой у правого края первого яруса, а не столбиком
     на оба. Столбиком они задавали строке рост в три этажа, и на экран
     помещалось четыре письма вместо семи. */
  .mail-row__marks {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
    flex-direction: row;
    align-items: center;
    gap: 6px;
  }

  /* Чем пожертвовали. Чип клиента — вывод системы по адресу отправителя, и
     на телефоне он стоит рядом с тем самым отправителем: «Иван Кукарин» и
     «БРИЗ» в одной строке отвечают на один вопрос дважды. Место, которое он
     занимал (до 140 точек), уходит теме — а она отвечает на вопрос «открывать
     ли сейчас», ради которого список и просматривают. Полное имя клиента
     стоит в шапке открытого разговора, оттуда его и читают.

     Чип заказа при этом остаётся: номер в теме — подпись самого человека, и
     это то, ради чего раздел затевался. */
  .mail-row__client { display: none; }

  /* Скрепка и номер заказа — мельче: они опознавательные знаки, а не подписи,
     и на первом ярусе не должны спорить с именем. */
  .mail-row__deal { font-size: 11px; }
  .mail-row__time { font-size: 11.5px; }

  /* Заголовок дня остаётся липким, но воздуха ему меньше: на 844 точках
     каждая строка заголовка стоит письма. */
  .mail-day { padding: 8px 12px 4px; }

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

     Лупы в этом списке нет: она с 28.08.2026 ростом 34 и стоит в шапке
     раздела, где вокруг неё пусто. */
  .mail-find__wipe,
  .mail-find__back { position: relative; }
  .mail-find__wipe::after,
  .mail-find__back::after { content: ""; position: absolute; inset: -9px; }

  /* =========================================================
     5. Разговор — слоем поверх списка
     ========================================================= */

  /* Двух колонок на телефоне не бывает, поэтому разговор ложится поверх
     списка целиком — так же, как «О чате» ложится поверх переписки
     (`.chat__side`), а читалка базы знаний поверх статьи.

     Показываем по `has-thread`, а не по `show-thread`: второго класса не
     ставит никто, и правило показа в app.css было мёртвым — письмо на
     телефоне открыть было нельзя вовсе.

     `absolute` от `.mail`, а не `fixed` от окна. Разница здесь главная:
     `.app` живёт в высоте видимого окна (`--vvh`, раздел 69), и слой,
     привязанный к ней, вместе с ней сжимается, когда вылезает клавиатура.
     Прибитый к окну слой про клавиатуру не знает, и строка ответа ушла бы
     под неё — та самая беда почтовых клиентов на телефоне. */
  .mail.has-thread .mail__pane {
    display: flex;
    position: absolute;
    inset: 0;
    z-index: 8;
    background: var(--chat-bg);
  }
  .mail.has-thread .mail__view { min-width: 0; min-height: 0; }

  /* Шапка разговора закрывает вырез сама — над ней ничего нет.

     Раскладка — в два яруса, и это главная правка телефонной шапки.
     Настольная строка «стрелка — тема — кнопки вида» делила свои 330 точек
     так: 38 стрелке, 166 четырём кнопкам, теме — сотня с небольшим. На
     снимке «до» от темы оставалось «Заказ 26272 - …», а чипы под ней
     обрывались посреди слова: «ООО "» и «Заказ» вместо «ООО "7 УТРА"» и
     «Заказ №26272».

     Резались они именно так, без многоточия, и это не оплошность правила:
     текст лежит в чипе голым узлом внутри `inline-flex`, а `text-overflow`
     до анонимной коробки не достаёт. То есть ужать чип в этой строке было
     нечем — его можно было только обрубить.

     Поэтому два яруса, как в строке списка писем:

       ярус 1 — стрелка, тема, кнопки вида;
       ярус 2 — чипы клиента и заказа во всю оставшуюся ширину, под темой.

     Чипы стоят на вертикали темы, а не от края экрана: в списке второй ярус
     тоже начинается под именем, а не под лицом (`.mail-row__line` выше), и
     шапка не имеет права строиться по-другому.

     Сетка вместо строки нужна затем, что переносить надо чипы, а лежат они
     внутри `.mail-head__main`, третьей коробкой строки. `display: contents`
     растворяет её, и тема с чипами становятся ячейками самой шапки.
     Разметку при этом не трогаем: она общая с настольной. */
  .mail-head {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "back subject tools"
      ".    chips   chips";
    align-items: center;
    column-gap: 8px;
    row-gap: 5px;
    padding: 10px 12px;
    padding-top: calc(env(safe-area-inset-top) / var(--chat-scale, 1.1) + 10px);
  }
  .mail-head__back { grid-area: back; }
  .mail-head__main { display: contents; }
  .mail-head__sub { grid-area: chips; }
  .mail-head__tools { grid-area: tools; }

  /* Тема — до двух строк. Одной строки в полтораста точек хватает на два
     десятка знаков, а тема во Флоу выглядит так: «Re: Заказ 26272 - бланк
     заказа, обечайка Томское молоко». На двадцати знаках она обрывается
     там, где ещё ничего не сказано. Второй строкой шапка берёт двадцать
     точек у переписки — и только тогда, когда теме есть что на них
     показать: короткая по-прежнему стоит в одну. */
  .mail-head__subject {
    grid-area: subject;
    font-size: 15px;
    line-height: 1.3;
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  /* Чипы — переносом, а не обрывом. Ярус теперь свой, и обоим хватает
     ширины; не хватило — чип уходит на строку ниже целиком, и «Заказ
     №26272» либо стоит рядом с клиентом, либо под ним, но не превращается
     в «Заказ». */
  .mail-head__sub {
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 0;
    min-width: 0;
  }
  /* Чип — ещё и ссылка: по нему уходят в карточку клиента и в заказ, и это
     единственная дорога туда из письма. Двадцать три точки роста палец
     берёт мимо, поэтому чип на телефоне крупнее — полем, а не кеглем:
     буквы в нём и так на грани читаемого.

     `flex: 0 0 auto` держит чип целым: ужиматься ему нечем (см. выше), и
     дать флексу право его сжать значило бы вернуть тот же обрубок. А
     единственный случай, когда чип шире всего яруса, — очень длинное имя
     клиента; тогда он переносится внутри себя. Две строки в пилюле
     непривычны, зато имя целое, а огрызок именем не бывает. */
  .mail-head__chip {
    flex: 0 0 auto;
    max-width: 100%;
    padding: 4px 10px;
    font-size: 12px;
    white-space: normal;
  }
  /* Кнопки вида — под палец: 30 точек берутся мимо. Растим саму кнопку,
     а не подкладку: она стоит в ряду, и ряд от этого только выравнивается. */
  .mail-head__mode { width: 40px; height: 40px; }

  /* «Во весь экран» на телефоне снята. Кнопка убирает две колонки — меню
     системы и ленту папок, — но на телефоне меню лежит нижней панелью, а
     ленту и без того закрывает разговор, легший поверх списка. Нажатие
     поэтому не меняет на глазах ничего, зато запоминает выбор и гасит ленту
     папок: человек выходит в список, а папок нет, и связать пропажу с
     кнопкой из шапки письма нечем. Четвёртая кнопка при этом стоила теме
     сорока точек из полутора сотен — того самого места, из-за которого
     кнопки и наезжали на тему.

     Узнаём по подписи, а не по месту в ряду: порядок кнопок — дело
     разметки, и правило, привязанное к четвёртой по счёту, однажды скроет
     не ту. Переименуют подпись — кнопка просто вернётся на место. */
  .mail-head__mode[title="Во весь экран"],
  .mail-head__mode[title="Вернуть колонки"] { display: none; }

  .mail-feed { padding: 12px 10px; }
  /* Пузырь во всю ширину экрана читается как страница, а не как реплика:
     свои и чужие перестают различаться с одного взгляда. */
  .mail-msg__bubble { max-width: 88%; }
  .mail-letter { padding: 12px; }

  /* =========================================================
     6. Строка ответа и клавиатура
     ========================================================= */

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

     Нижняя панель разделов при открытой клавиатуре прячется сама
     (`html.kb-open .tabbar`), и её место занимает строка ответа — то же
     самое давно происходит в чате. */
  .mail-reply {
    flex: 0 0 auto;
    gap: 6px;
    padding: 8px 10px 10px;
  }
  /* Поле не должно распирать строку на пол-экрана: письмо длиннее трёх строк
     пишут в окне, а не в ответе снизу. */
  .mail-reply .input { max-height: 96px; }
  /* Кнопка отправки — **квадрат**, как у поля ввода Флоу.Чата. Роман
     28.08.2026, со снимком: «кнопку сделай квадратной, как во Флоу.Чат,
     такого же стиля».

     Круг здесь и правда был чужим: строка ответа почты и строка ввода чата —
     одно и то же место экрана в глазах человека, он переходит между
     разделами и ждёт той же кнопки. В чате она 38×38 со скруглением кнопок
     системы (`.chat__composer .btn`), и здесь берутся те же величины, а не
     похожие: похожие разъедутся на первой же правке.

     Скрепка рядом растёт до того же роста. На столе она 36 — там строка ниже,
     — а здесь две кнопки разной высоты по краям поля видно сразу.

     Слово «Отправить» на 390 точках отнимает у поля треть ширины ещё до
     первой буквы, поэтому здесь оно снято совсем, а не только на время
     набора. */
  .mail-reply__send,
  .mail-reply__clip {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    padding: 0;
    display: grid;
    place-items: center;
  }
  .mail-reply__word { display: none; }

  /* =========================================================
     7. Окно письма — во весь экран
     ========================================================= */

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

     Узнаём окно по начинке (`.mc` — форма письма), а не по месту в разметке
     и не по классу окна: `openCompose` зовёт общий `openModal`, своего класса
     у него нет, а начинка своя и не меняется от перестановки узлов. */
  .modal-root:has(.mc) { padding: 0; }
  .modal-root:has(.mc) .modal {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    border: 0;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  /* Заголовок закрывает вырез — шапки системы под окном нет. Масштаб здесь
     не делим: окна лежат вне рабочей области и не отмасштабированы. */
  .modal-root:has(.mc) .modal__head {
    flex: 0 0 auto;
    padding-top: calc(env(safe-area-inset-top) + 14px);
  }
  .modal-root:has(.mc) .modal__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 14px 12px;
  }
  /* Подвал переносится, а не обрезается. Отправка уходит вправо и остаётся
     на своём месте — это единственная кнопка, которую ищут не глядя. */
  .modal-root:has(.mc) .modal__foot {
    flex: 0 0 auto;
    flex-wrap: wrap;
    row-gap: 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  }
  .modal-root:has(.mc) .modal__foot > .btn { flex: 0 0 auto; }
  .modal-root:has(.mc) .modal__foot > .spacer { flex: 1 0 0; min-width: 0; }
  /* «Отправить» — во всю ширину отдельной строкой. Втроём кнопки в 355 точек
     не встают (одно «Прикрепить файл» занимает 165), и при переносе главная
     из них оказывалась зажатой в угол. Столбиком во всю ширину — то же, что
     сделано с кнопками решения по цене: на телефоне это единственный способ
     не спутать главное действие с соседним. */
  .modal-root:has(.mc) .modal__foot > .btn--primary {
    flex: 1 0 100%;
    justify-content: center;
  }

  /* Поля шапки письма — во всю ширину. `min-width: 220px` у коробки адресов
     на 360 точках вылезал за край вместе с полем «От кого». */
  .mc-box { min-width: 0; width: 100%; }
  .mc-to { width: 100%; }
  /* Текст письма занимает то, что осталось: ради него окно и открыли, а
     тянуть его мышью за уголок на телефоне нечем. */
  .mc-body { min-height: 180px; resize: none; }
  .mc-sign { max-width: 100%; }
  .mc-tools { flex-wrap: wrap; row-gap: 6px; }

  /* =========================================================
     8. Чего на столе не видно: кегль полей и попадание пальцем
     ========================================================= */

  /* Сафари увеличивает страницу, когда палец попадает в поле мельче 16 точек.
     Общее правило системы (`.input` на телефоне — 16) сюда не достаёт: поле
     ввода адреса стоит внутри коробки чипов голым `<input>` без класса
     `.input`, и на замере оно давало 14. То есть первое же касание по «Кому»
     дёргало страницу зумом — ровно то, что чинилось для всех остальных
     форм системы. */
  .mc-chips__entry { font-size: 16px; }

  /* Мелкие кнопки — под палец. Сами кружки не растим: крестик чипа в 18 точек
     нарисован так не от бедности — крупный крест рядом с адресом читается как
     «удалить письмо». Растёт невидимая область нажатия, тем же приёмом, что
     у галочки в списке дел (`.qcheck::after`). Сорок четыре точки — минимум
     по любым рекомендациям, и именно на нём ловятся промахи. */
  /* Крестика вложения в этом списке больше нет: с 30.08.2026 он и так стоит
     абсолютом в углу плитки, то есть сам себе точка отсчёта, — а `relative`
     отсюда сбросил бы его обратно в поток и вернул под плитку. Невидимая
     область нажатия ниже от этого не страдает: она считается от кнопки, а
     не от способа, которым та поставлена. */
  .mc-chip__drop,
  .mc-file__drop,
  .mail-letter__more,
  .mail-att__take { position: relative; }
  .mc-chip__drop::after,
  .mc-file__drop::after { content: ""; position: absolute; inset: -12px; }
  .mail-attach__drop::after { content: ""; position: absolute; inset: -11px; }
  .mail-letter__more::after,
  .mail-att__take::after { content: ""; position: absolute; inset: -10px; }
  /* Чип адреса и чип файла от этого расползаться не должны: слой невидимый,
     но он лежит поверх соседа, и два чипа подряд перехватывали бы касание
     друг у друга. Порядок решает: чип, до которого дотронулись, поднимается. */
  .mc-chip:active,
  .mc-file:active { z-index: 1; }

  /* Строчка свёрнутого письма — тоже цель для пальца. Плитке вложения
     добавлять нечего: она сама 132×100, и промахнуться по ней трудно. */
  .mail-letter__row { padding: 9px 12px; }

  /* Полоска «отменить отправку» стоит над панелью разделов — её место
     задано в mail-compose.css. Здесь только оговорка на случай открытого
     разговора: панели под ним нет, и полоска опускается к краю экрана. */
  .mail.has-thread ~ * .mail-undo,
  .app:has(.mail.has-thread) .mail-undo {
    bottom: calc(16px + env(safe-area-inset-bottom));
  }
}

/* Совсем узкий телефон (Android от 360 и ниже). Тридцать точек отыгрываются
   полями и зазором, а не содержимым: время и метка заказа — это то, по чему
   письмо находят, и убрать их значит не «показать поменьше», а лишить список
   его работы. Тесниться разрешено имени: оно и так обрывается многоточием, а
   узнаётся по первым буквам. */
@media (max-width: 370px) {
  .mail-row { column-gap: 8px; padding-left: 10px; padding-right: 10px; }
  .mail-row__name { font-size: 13px; }
  .mail-row__deal { font-size: 10.5px; }
  .mail-row__marks { gap: 4px; }
}

@media (max-width: 820px) {
  /* Разговор лежит поверх списка, и без этой стрелки выйти из него можно было
     только через «Ещё → Почта». Слева от темы и той же формы, что `back` в
     чате: один и тот же жест в двух разделах должен выглядеть одинаково.

     Область нажатия добита до 44 точек невидимым полем — тем же приёмом, что
     у крестика чипа: значок в 18 точек пальцем не берётся. */
  .mail-head__back {
    display: inline-flex; align-items: center; justify-content: center;
    position: relative;
    width: 30px; height: 30px; flex: 0 0 auto;
    margin-left: -4px;
    border: 0; border-radius: 50%;
    background: transparent; color: var(--text-soft); cursor: pointer;
  }
  .mail-head__back::after {
    content: ''; position: absolute; inset: -7px;
  }
  .mail-head__back:active { background: var(--mail-active, rgba(128,128,128,.16)); }
  /* Зазор шапки задан выше вместе с её сеткой (`column-gap` и `row-gap`
     порознь). Стоявшая здесь короткая `gap: 8px` — сокращение для обоих, и
     она, будучи ниже по файлу, молча раздвигала ярусы обратно. */
}

@media (max-width: 820px) {
  /* Точки непрочитанного на телефоне нет. Роман 08.09.2026: «точки
     непрочитанных убери в PWA почте — они не слаиваются и мешают просто и не
     нужны».

     Она и правда наложена на лицо, а не стоит слева от него. Точка в списке
     вынута из сетки и висит абсолютом по левому полю строки (`left: 10px`
     в `mail.css`) — на столе там пустое поле, а здесь строка начинается
     с отступа 12 и сразу колонкой лица в 36 точек. То есть кружок ложится
     поверх аватара, и на 370 точках, где отступ ужат до 10, — ровно по его
     краю.

     Чинить положением не стали, и это осознанно. Место под точку слева
     пришлось бы забрать у второго яруса — у темы с началом письма, ради
     которой телефонная раскладка и переписана в два этажа: она получила 300
     точек вместо 190, и отдавать из них семнадцать метке, дублирующей
     начертание, значит вернуть обрыв темы на середине слова.

     Непрочитанное на телефоне остаётся видно тем же, чем на столе: имя и тема
     весом (`--mail-unread-w`), время акцентом. Этого хватает — в списке из
     семи писем жир читается сразу, потому что рядом стоит нежирное.

     Строчка письма внутри разговора (`.mail-letter__new`) убрана заодно: это
     та же метка тем же цветом, и просьба была про точки непрочитанного
     вообще, а не про одну из двух. Вернуть — снять её из этого правила. */
  .mail-row__new,
  .mail-letter__new { display: none; }
}