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

   **Структура — как у почтовых служб, вид — свой.** Роман 27.08.2026 прислал
   снимок mail.ru: «можешь просто сделать копию формы? Только можешь сделать
   лучше?» Взят оттуда порядок работы, который там верен: адреса, свёрнутые
   копии, тема, ряд прикрепления **до** текста письма, панель начертания,
   тело, подпись отдельным блоком. Не взят вид: условие из того же задания —
   «по UX и оформлению — аутентично и уникально, как отдельный продукт в
   рамках Флоу». Поэтому цвета, скругления и ритм здесь общие с остальной
   системой, а не срисованные.

   **Главная мысль оформления — два листа.** Бланк (кому, о чём, что
   приложено) и само письмо. Прежде это были восемь полей в рамках, стоящих
   столбиком, — Роман назвал такое окно «очень старомодно и топорно», и он
   прав: восемь одинаковых рамок глаз пересчитывает сверху вниз и не видит в
   них ни начала, ни конца. Два листа читаются с одного взгляда, а поля
   внутри бланка разделены волосяными линиями, как графы конверта. */

/* ---------- окно целиком ----------

   Появление — короткий подъём с проявлением. Окно письма открывается поверх
   списка, и без движения оно возникает так, будто список подменили; 220 мс
   показывают, что это слой сверху, и на этом кончаются. */
/* `min-width: 0` — не украшение. Окно письма лежит ячейкой грида, а ячейка по
   умолчанию не сжимается меньше своего содержимого (`min-width: auto`). Пока
   шапка складывалась надвое, содержимого было мало; 28.08.2026 она встала в
   одну строку — и минимальная ширина выросла на шесть точек, ровно на подпись
   поля. Окно перестало помещаться в тело, и тело поехало вбок. Роман это и
   увидел: «появилась горизонтальная прокрутка».

   Правило нужно на всех трёх ярусах — окно, бланк, строка: не дай сжаться
   любому, и вбок поедет он. */
.mc { display: grid; gap: 14px; position: relative; min-width: 0; }
.mc-sheet, .mc-letter, .mc-row { min-width: 0; }
.mc { animation: mc-open 220ms var(--ease) both; }

/* Причина, по которой прошлая отправка сорвалась (`failNote` в
   `mailCompose.js`). Красным и над бланком: окно черновика с ошибкой
   открывают ровно затем, чтобы узнать, почему письмо не ушло. */
.mc-fail {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 9px 12px; border-radius: 10px;
  background: var(--red-soft); color: var(--red);
  font-size: 13px; line-height: 1.4;
}
.mc-fail svg { flex: none; margin-top: 2px; }

@keyframes mc-open {
  from { opacity: 0; transform: translateY(9px); }
  to { opacity: 1; transform: none; }
}

/* ---------- бланк письма ----------

   «От кого», «Кому», «Копия», «Скрытая», «Тема» и ряд прикрепления — на общей
   подложке, разделённые волосяными линиями. Обрезки по краю (`overflow`) тут
   быть не может: подсказка по адресам висит под своим полем и вылезает за
   нижнюю границу бланка — обрезав её, мы обрезали бы сам список. */
.mc-sheet {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-2);
}

/* Строка бланка. Подпись слева, а не над полем: полей шесть, и подпись над
   каждым удваивает высоту окна ещё до первой буквы письма. */
.mc-row {
  display: flex; align-items: flex-start; gap: 10px; margin: 0;
  padding: 5px 12px;
  border-top: 1px solid var(--border);
  transition: background-color var(--speed);
}
.mc-row:first-child { border-top: 0; border-radius: var(--r-lg) var(--r-lg) 0 0; }
.mc-row__label {
  flex: 0 0 auto; min-width: 52px; padding-top: 9px;
  font-size: 12px; font-weight: 500; color: var(--text-faint);
  transition: color var(--speed);
}
/* Двоеточие рисуем, а не пишем в разметке: подпись поля — это подпись, и
   класть знак препинания в слово значит однажды получить «Кому:» в
   заголовке письма или в подсказке. Просьба Романа 28.08.2026: «делать в
   одну строчку — „Кому“ и справа кому. Можешь использовать двоеточие». */
.mc-row__label::after { content: ":"; }
/* Ширина подписи больше не жёсткие 66 точек. «Тема» короче «От кого», и
   равнять их по самой длинной значило отдавать полю на десяток точек меньше
   ровно там, где оно нужнее. Минимум держит колонку ровной у трёх строк из
   четырёх. */

/* Где стоит курсор — видно по строке целиком, а не по рамке одного поля.
   Рамок у полей внутри бланка нет вовсе (они и делали окно «топорным»), и
   подсветка строки берёт их работу на себя: подпись слева наливается
   акцентом, подложка — им же на семь процентов. */
.mc-row:focus-within { background: color-mix(in oklab, var(--accent) 7%, transparent); }
.mc-row:focus-within .mc-row__label { color: var(--accent-text); }

/* Поля внутри бланка — без своих рамок и подсветки: их работу делает строка.
   Кегль и цвет остаются от `.input`, чтобы поле бланка и поле любой другой
   формы системы набирались одинаково. */
.mc-sheet .input {
  border-color: transparent; background-color: transparent;
  padding-left: 0; padding-right: 0;
}
.mc-sheet .input:hover { border-color: transparent; }
.mc-sheet .input:focus { border-color: transparent; box-shadow: none; }

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

   Ширину держим селектором в одно слово: на телефоне её перебивает
   `mail-phone.css` («во всю ширину»), и утяжелив селектор здесь, мы отобрали
   бы у него эту возможность. Всё остальное, наоборот, взято с `.mc-sheet` —
   иначе общее правило «поля бланка без рамок» съело бы таблетку. */
.mc-box {
  width: auto; min-width: 180px; max-width: 100%;
  margin: 2px 0; border-radius: 999px; font-weight: 560;
}
.mc-sheet .mc-box {
  padding: 5px 30px 5px 11px;
  border-color: var(--border-strong);
  background-color: var(--surface);
}
.mc-sheet .mc-box:hover { border-color: var(--text-faint); }
.mc-sheet .mc-box:focus { border-color: var(--accent); box-shadow: var(--ring); }

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

   Появляется ряд с подъёмом и проявлением: он вырастает посреди бланка, и
   без движения соседние строки просто прыгают вниз. Высоту не оживляем —
   ради неё пришлось бы обрезать ряд по краю, а вместе с ним обрежется и
   подсказка по адресам, которая из него свисает. */
.mc-row--fold { display: none; }
/* Заполнение `backwards`, а не `both`, и это правка 16.09.2026.

   С `both` браузер держит последний кадр навсегда — а в последнем кадре
   написано `transform: none`, и вычисленным значением выходит не `none`, а
   единичная матрица. Матрица, даже ничего не двигающая, делает ряд отдельным
   слоем (stacking context), и `z-index: 20` подсказки по адресам запирается
   внутри ряда. Ряд прикрепления идёт в бланке следом и рисуется поверх: Роман
   прислал снимок, где плитки вложений лежат по списку адресов. У «Кому»
   анимации нет — там подсказка была цела, и беда была ровно у «Копии» и
   «Скрытой».

   `backwards` заполняет только до начала, а после конца отпускает: `transform`
   становится настоящим `none`, слоя нет. Видно при этом то же самое — кадр
   `to` и так совпадает с обычным состоянием ряда, держать его нечем и незачем.

   Проверено рендером: подсказка поверх плиток, снимки до и после. */
.mc-row--fold.is-open { display: flex; animation: mc-fold 240ms var(--ease) backwards; }

@keyframes mc-fold {
  from { opacity: 0; transform: translateY(-7px); }
  to { opacity: 1; transform: none; }
}

/* «Копия» и «Скрытая» — у правого края самой строки «Кому»: это продолжение
   вопроса «кому уходит письмо», а не отдельная мысль под ним. */
.mc-more { display: flex; flex: none; gap: 2px; padding-top: 6px; }
.mc-more.is-empty { display: none; }
.mc-more__link {
  border: 0; background: none; cursor: pointer;
  padding: 4px 8px; border-radius: var(--r-sm);
  font-size: 12.5px; color: var(--text-faint);
  transition: background-color var(--speed), color var(--speed);
}
.mc-more__link:hover { background: var(--surface-3); color: var(--accent-text); }
.mc-more__link:focus-visible { outline: none; box-shadow: var(--ring); }

/* Тема и подсказка под ней — одной колонкой: подсказка принадлежит теме и
   должна стоять под самим полем, а не под всей строкой. */
.mc-subj { flex: 1; min-width: 0; display: grid; }
.mc-hint {
  padding: 0 0 6px; font-size: 11.5px; line-height: 1.35; color: var(--text-faint);
  animation: mc-hint-in 200ms var(--ease) both;
}

@keyframes mc-hint-in {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: none; }
}

/* ---------- адреса чипами ----------

   Строка через запятую отвечает на вопрос «кому уходит письмо» хуже всего
   там, где его и задают: в ней десять адресов подряд, лишний убирается
   правкой текста, и опечатка в чужом адресе ничего не стоит.

   Коробка чипов внутри бланка своей рамки не имеет — её роль играет строка,
   как и у остальных полей. */
.mc-chips__box {
  flex: 1; min-width: 0; cursor: text;
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
  min-height: 36px; padding: 4px 0;
  border: 0; background: none;
}
.mc-chips { display: contents; }
.mc-chips__entry {
  flex: 1; min-width: 150px; border: 0; outline: none;
  background: none; color: var(--text); padding: 3px 2px;
}
.mc-chips__entry::placeholder { color: var(--text-faint); }

.mc-chip {
  display: inline-flex; align-items: center; gap: 3px; max-width: 100%;
  padding: 2px 3px 2px 9px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text); font-size: 13px;
}
/* Влёт — только у чипа, которого в поле ещё не было (см. `seen` в
   addressField): иначе один новый адрес заставлял бы прыгать все прежние. */
.mc-chip.is-new { animation: mc-chip-in 240ms var(--spring) both; }
.mc-chip__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-chip__drop {
  flex: none; width: 18px; height: 18px; border: 0; border-radius: 50%;
  background: none; color: var(--text-faint); cursor: pointer;
  font-size: 15px; line-height: 1; padding: 0;
  transition: background-color var(--speed), color var(--speed);
}
.mc-chip__drop:hover { background: var(--surface-3); color: var(--text); }

/* Неправильный адрес всё равно становится чипом, но красным. Отказ его
   принимать («это не адрес») прячет ошибку от глаз: человек видит пустое поле
   и не понимает, куда делся набранный адрес. */
.mc-chip--bad { background: var(--red-soft); border-color: var(--red-soft); color: var(--red); }
.mc-chip--bad .mc-chip__drop { color: var(--red); }
/* В светлой теме `--red` на `--red-soft` даёт 3,85 — а в чипе лежит не
   значок, а сам набранный адрес: его читают по буквам, чтобы найти опечатку,
   и это обычный текст со своим порогом 4,5. Тёмная тема там 5,75 и правки не
   просит, поэтому притемняем только светлую: 3,85 → 4,77. Цвет производный от
   того же `--red`, своей краски не заводим. Смешиваем в oklab — тем же
   способом, что и цвет ящика: красный по дороге к чёрному в sRGB уходит в
   бурый. */
:root:not([data-theme="dark"]) .mc-chip--bad,
:root:not([data-theme="dark"]) .mc-chip--bad .mc-chip__drop {
  color: color-mix(in oklab, var(--red) 90%, var(--text));
}

/* ---------- подсказка по адресам ----------

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

   Строка отвечает на «тот ли это человек» целиком: имя, адрес и фирма. Имя
   первым и потемнее — ищут глазами именно его; адрес человек и не помнит, за
   ним он в подсказку и пришёл. */
.mc-sug__host { position: relative; display: flex; flex: 1; min-width: 0; }
.mc-sug {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20;
  max-height: 264px; overflow-y: auto;
  padding: 4px; border-radius: var(--r);
  border: 1px solid var(--border-strong);
  background: var(--surface); box-shadow: var(--shadow-pop);
  animation: mc-sug-in 140ms var(--ease) both;
}
.mc-sug__item {
  display: flex; align-items: baseline; gap: 8px; width: 100%;
  padding: 7px 9px; border: 0; border-radius: var(--r-sm);
  background: none; color: var(--text); cursor: pointer;
  text-align: left; font-size: 13px;
}
/* Подсвеченная строка и строка под курсором выглядят одинаково: по списку
   ходят и стрелками, и мышью, и разный вид у одного и того же выбора читался
   бы как два разных выбора. */
.mc-sug__item.is-active, .mc-sug__item:hover { background: var(--surface-2); }
.mc-sug__who { flex: none; max-width: 45%; font-weight: 500; }
.mc-sug__mail { flex: 1; min-width: 0; color: var(--text-soft); }
.mc-sug__client { flex: none; max-width: 32%; color: var(--text-faint); font-size: 12px; }
.mc-sug__who, .mc-sug__mail, .mc-sug__client {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

@keyframes mc-sug-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

/* ---------- прикреплённое ----------

   Ряд прикрепления стоит в самом бланке, сразу под темой, а не внизу окна
   под подписью. Роман про прежнее место: «прикреплённые файлы — ужасно,
   перемещай наверх». Файл относится к письму, а не к подписи; внизу он ещё и
   уезжал за нижний край окна, когда подпись длинная.

   Кнопки прикрепления — пунктиром. Это тот же язык, что у завесы
   перетаскивания ниже: пунктир во Флоу означает «сюда можно положить», и
   человеку, который тащит файл мышью, видно, куда он его несёт. */
.mc-attach {
  display: grid; gap: 8px;
  padding: 9px 12px 11px;
  border-top: 1px solid var(--border);
}
.mc-attach__acts { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.mc-attach__act {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  border: 1px dashed var(--border-strong);
  background: none; color: var(--text-soft); cursor: pointer;
  font-size: 12.5px;
  transition: border-color var(--speed), color var(--speed), background-color var(--speed);
}
.mc-attach__act:hover {
  border-style: solid; border-color: var(--accent);
  background: var(--surface); color: var(--accent-text);
}
.mc-attach__act:focus-visible { outline: none; box-shadow: var(--ring); }

/* Сколько уже приложено — рядом с кнопкой, а не в сообщении об отказе.
   Потолок в 18 МБ упирается в почту получателя, и узнать о нём после
   загрузки двадцати мегабайт поздно. */
.mc-attach__meter { font-size: 11.5px; color: var(--text-faint); white-space: nowrap; }
.mc-attach__meter.is-tight { color: var(--amber); }

/* Что сейчас происходит с бумагами пересылки. Стоит там же, где счётчик веса,
   и мигает: поход в почту за бумагой старого письма идёт секундами, и
   неподвижная строка в это время читается как застрявшая. */
.mc-attach__bring {
  font-size: 11.5px; color: var(--accent); white-space: nowrap;
  animation: mc-bring 1.4s ease-in-out infinite;
}

@keyframes mc-bring {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}

@media (prefers-reduced-motion: reduce) {
  .mc-attach__bring { animation: none; }
}

/* Плитка вложения — та же, что у бумаги пришедшего письма (`attachChip` в
   mailFiles.js): один и тот же файл в двух местах обязан выглядеть
   одинаково. Прилетает она с подъёмом — загрузка идёт по одному файлу, и
   движение отвечает на «приложился ли», не заставляя пересчитывать плитки. */
.mc-files { display: flex; flex-wrap: wrap; gap: 6px; }
.mc-files:empty { display: none; }
.mc-files > .is-new { animation: mc-chip-in 300ms var(--spring) both; }

@keyframes mc-chip-in {
  from { opacity: 0; transform: translateY(-9px) scale(.92); }
  to { opacity: 1; transform: none; }
}

/* ---------- письмо ----------

   Своим листом под бланком: панель начертания прижата к верхнему краю, и
   видно, что три знака размечают именно текст письма, а не тему и не подпись.
   Подсветка — у листа целиком, той же мыслью, что у строки бланка. */
.mc-letter {
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); overflow: hidden;
  transition: border-color var(--speed), box-shadow var(--speed);
}
.mc-letter:focus-within { border-color: var(--accent); box-shadow: var(--ring); }

/* Полоски с «Ж», «К» и «Ссылка» над письмом больше нет.

   Три кнопки объясняли то, что и так знают руки: Роман 28.08.2026 — «эти
   подсказки убери, просто форматирование через ctrl стандартно». Размечается
   в письме по-прежнему ровно это (`mail_markup` понимает жирный, курсив и
   ссылку), только теперь с клавиатуры: Ctrl+B, Ctrl+I, Ctrl+K. Кегли и цвета
   не размечаются вовсе — у половины получателей они развалятся, у второй
   половины их вырежет почтовый клиент. */

/* Текст письма — то, ради чего окно открыли; поэтому поле высокое и тянется
   мышью, а не растёт скачками под каждую строку. Своей рамки у него нет:
   рамка есть у листа, а две вложенные рамки — это две формы. */
.mc-body {
  display: block; width: 100%; min-height: 210px; resize: vertical;
  border: 0; outline: none; background: none; color: var(--text);
  padding: 12px 14px; line-height: 1.55;
  font: inherit;
}
.mc-body::placeholder { color: var(--text-faint); }

/* Поле письма показывает оформление, а не знаки (`richField` в `ui.js`).

   Это `contenteditable`, а не `textarea`, отсюда три правила, которых у поля
   ввода не бывает. Растёт оно **само** по написанному, поэтому ручка размера
   ушла, а потолок остался: письмо на три экрана не должно уводить кнопку
   «Отправить» за нижний край — дальше поле прокручивается своей полосой.
   Подсказка нарисована меткой `is-empty`, а не `:empty`: в пустом поле
   браузер держит `<div><br></div>`, и по правилам CSS оно уже не пусто.

   Ссылки внутри поля не подчёркиваются краской системы: в письме их цвет
   ставит подпись ящика, а здесь важно только, что это ссылка. */
/* Общее правило поля переехало в `app.css`, к самому полю ввода: таких полей
   в системе теперь два — письмо и сообщение в переписке, — и держать общее у
   одного из них значило бы, что второе работает, пока рядом загружен чужой
   лист стилей. Здесь остаётся только письмо. */
.mc-body.rich-field {
  position: relative;
  resize: none; max-height: 46vh; overflow: auto;
}
/* Подсказка вынута из потока, и это не украшение.

   Обычным `::before` она занимала первую строку поля, а каретка вставала под
   ней — на вторую. Роман 31.08.2026: «курсор что-то вытворяет странное».
   Абсолютная подсказка места не занимает: каретка стоит там, где начнётся
   текст, а сама подсказка гаснет с первой же буквой (метка `is-empty`).

   Отступы повторяют поле (12/14) — иначе подсказка и первая буква встали бы
   на разные места, и подмена читалась бы прыжком. */
.mc-body.is-empty::before {
  content: attr(data-placeholder);
  position: absolute; left: 14px; top: 12px;
  color: var(--text-faint); pointer-events: none;
}
.mc-body a { color: var(--accent-text); }
.mc-body b, .mc-body strong { font-weight: 700; }

/* ---------- подпись ----------

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

   **Предпросмотр не растёт выше десяти строк.** Подпись с реквизитами бывает
   на пол-экрана, и без потолка кнопка «Отправить» уезжала бы за нижний край
   окна ещё до того, как письмо начали писать. */
.mc-sign {
  display: grid; gap: 8px;
  padding: 9px 12px 12px; border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--surface-2);
}
.mc-sign__head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.mc-sign__label { font-size: 12px; font-weight: 500; color: var(--text-soft); }

/* Подписи выбираются кнопками, а не списком: их две-три, все видны разом, и
   выбор стоит одного нажатия вместо трёх. */
.mc-sign__tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.mc-sign__tab {
  padding: 4px 10px; border: 1px solid transparent; border-radius: 999px;
  background: none; color: var(--text-soft); cursor: pointer; font-size: 12.5px;
  transition: background-color var(--speed), color var(--speed), border-color var(--speed);
}
.mc-sign__tab:hover { background: var(--surface-3); color: var(--text); }
.mc-sign__tab.is-current {
  background: var(--surface); border-color: var(--accent); color: var(--accent-text);
}
.mc-sign__tab:focus-visible { outline: none; box-shadow: var(--ring); }

/* Две кнопки справа: «Как у получателя» и «Изменить». Обе держатся правого
   края и тогда, когда названий подписей набралось на вторую строку: на
   телефоне ряд переносится, и без этого они уезжали бы под слово «Подпись» —
   то есть читались бы как ещё две подписи. */
.mc-sign__act {
  display: inline-flex; align-items: center; gap: 5px;
  border: 0; background: none; cursor: pointer;
  padding: 4px 8px; border-radius: var(--r-sm);
  font-size: 12.5px; color: var(--text-faint);
  transition: background-color var(--speed), color var(--speed);
}
.mc-sign__act:hover { background: var(--surface-3); color: var(--accent-text); }
.mc-sign__act:focus-visible { outline: none; box-shadow: var(--ring); }
.mc-sign__act--skin { margin-left: auto; }

/* ---------- лист подписи ----------

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

   Цвет букв подписи прибит в самом html (`mail_markup.to_html` пишет его
   строчным стилем, иначе почтовый клиент его выбросит), поэтому строчный цвет
   здесь перебивается через `!important` — без этого в тёмной теме тёмные
   буквы легли бы на тёмный фон. Ссылке цвет возвращаем свой: правило у неё
   старше правила «всё остальное» по весу селектора, и порядок тут ни при чём.

   Белый лист никуда не делся — он под кнопкой «Как у получателя»: письмо у
   получателя чаще на белом, и свериться иногда надо. Там строчные цвета не
   трогаются вовсе, и видно ровно то, что уйдёт. */
.mc-sign__view { max-height: 186px; overflow-y: auto; }
.mc-sign__paper {
  padding: 11px 13px; border-radius: var(--r);
  border: 1px solid transparent;
  font-size: 13px; line-height: 1.5;
  transition: background-color var(--speed), color var(--speed), border-color var(--speed);
}
.mc-sign__paper--app { background: var(--surface); border-color: var(--border); color: var(--text); }
.mc-sign__paper--app .mc-sign__html,
.mc-sign__paper--app .mc-sign__html * { color: var(--text) !important; }
.mc-sign__paper--light { background: #FFF; border-color: #E2E2EE; color: #1A1B26; }

/* Ссылки и номера в предпросмотре — краской ящика.

   Цвет письма прибит в самом html (`mail_markup.to_html` пишет его строчным
   стилем, иначе почтовые клиенты его выбросят), а собирается тот html один
   раз на весь список подписей — без ящика, потому что ящик выбирают уже в
   окне. Поэтому здесь цвет **перекрывается**: `--mc-ink` ставит `drawSign`
   по выбранному «от кого», и предпросмотр показывает ровно ту краску, с
   которой письмо уйдёт (отправка красит тем же `box.color`).

   `!important` — потому что перебивать надо строчный стиль; иначе выигрывал
   бы он. Ящик без цвета оставляет фиолетовый акцент Флоу — тот же, что
   подставит сервер. */
.mc-sign__paper .mc-sign__html a { color: var(--mc-ink, var(--accent-text)) !important; }

.mc-sign__html { word-break: break-word; }
.mc-sign__logo { display: block; max-width: 240px; max-height: 60px; margin: 6px 0; }
/* Логотип нарисован под белую бумагу письма: тёмные буквы на прозрачном фоне.
   В тёмной теме он растворился бы в подложке, поэтому под ним — белая
   подкладка ровно по картинке. Это единственное белое пятно, которое здесь
   осталось, и оно размером с логотип, а не с подпись. */
[data-theme="dark"] .mc-sign__paper--app .mc-sign__logo {
  width: fit-content;
  padding: 5px 7px; border-radius: var(--r-sm); background: #FFF;
}
.mc-sign__empty { font-size: 12.5px; color: var(--text-faint); }
.mc-sign__edit { min-height: 92px; resize: vertical; font-size: 13px; line-height: 1.5; }
.mc-sign__note { font-size: 12px; line-height: 1.45; color: var(--text-faint); }

/* Состояние черновика стоит в подвале, у кнопок, а не над письмом: оно
   сообщает, а не требует, и читается ровно в тот момент, когда рука уже
   тянется закрывать окно. */
.mc-status {
  align-self: center; margin-left: 4px;
  font-size: 12px; color: var(--text-faint);
}

/* ---------- полоска отмены ----------

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

   Стекло, а не глухая плашка. До 07.09.2026 здесь стоял `--toast-bg` — та же
   тёмная подложка, на которой во Флоу живут сообщения в углу. Роман 07.09.2026:
   «можешь сделать как liquid glass в стиле флоу звонков? она не должна
   перемещаться, но должна просвечивать».

   Стекло здесь разрешено теми же правилами, что и в панели звонка (`.call` в
   `app.css`): это всплывающий слой поверх всего, а не список. Значения взяты
   оттуда же до токена — `--glass`, `--glass-line`, `--glass-blur`, — и не
   потому, что лень: два стеклянных слоя Флоу, стоящих на экране в разное
   время, обязаны быть из одного стекла.

   **Цвет текста стал `--text` вместо белого.** Глухая подложка была тёмной в
   обеих темах, стекло — нет: на светлой теме белые буквы легли бы на белое. */
.mail-undo {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  z-index: 400;
  display: flex; align-items: center; gap: 12px;
  /* Полоска отсчёта и блик лежат абсолютом внутри плашки — считать свои края
     им надо от неё, а не от окна. Обрезка нужна затем, что оба прямоугольные,
     а у плашки углы скруглены; блик к тому же шире её вдвое. */
  overflow: hidden;
  padding: 10px 12px 10px 16px; border-radius: 14px;
  border: 1px solid var(--glass-line);
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  color: var(--text);
  /* Тень слоя — общая, как у всего всплывающего. Вторым идёт волосок света по
     верхней кромке: именно он читается как стекло, а не как полупрозрачная
     плашка. Краска та же, что у рамки (`--glass-line`), — рамка и есть та же
     кромка, только по кругу. */
  box-shadow: var(--shadow-pop), inset 0 1px 0 var(--glass-line);
  font-size: 13.5px;
  animation: mc-undo-in 260ms var(--spring) both;
}
/* Содержимое — над бликом. Блик позиционирован, а буквы и кнопка нет, и в
   одном слое позиционированное всегда рисуется поверх — без этой строки блик
   лёг бы прямо на надпись.

   Перечислены именно три содержательных узла, а не «все дети, кроме блика»:
   в плашке лежит ещё полоска отсчёта, и она сама стоит абсолютом по нижнему
   краю — `position: relative` вернул бы её в поток и увёл из-под края. */
.mail-undo > svg,
.mail-undo__count,
.mail-undo__cancel { position: relative; z-index: 1; }
/* Значок — в цвет отсчёта: он и полоска внизу говорят об одном и том же. */
.mail-undo > svg { color: var(--accent); }

/* Счётчик не двигает плашку.

   Роман 07.09.2026: «она не должна перемещаться». Двигалась она не сама:
   надпись меняется каждую секунду («через 10 секунд» → «через 9 секунд» →
   «через 2 секунды»), ширина её при этом гуляет на десяток точек, а плашка
   стоит по центру экрана — то есть на каждом такте разъезжалась в обе стороны
   на половину этой разницы. Считать это дрожанием мешало только то, что
   человек в этот миг читает саму надпись.

   Ширину держат невидимые двойники: все надписи отсчёта разом лежат в одной
   ячейке сетки, и ячейка встаёт по самой широкой из них (`undoBar` в
   `mailCompose.js`). Не «прикинуть запас в em» и не `min-width` числом: слова
   тут склоняются («секунду», «секунды», «секунд»), кегль темы задан в точках,
   а шрифт у человека может не загрузиться — любое число разъехалось бы
   молча. */
.mail-undo__count { display: grid; }
.mail-undo__count > * { grid-area: 1 / 1; white-space: nowrap; }
.mail-undo__ghost { visibility: hidden; }

.mail-undo__cancel {
  border: 0; border-radius: var(--r-sm); cursor: pointer;
  padding: 6px 12px; font-size: 13px; font-weight: 600;
  background: var(--accent-soft); color: var(--accent-text);
  transition: background-color var(--speed), color var(--speed);
}
.mail-undo__cancel:hover { background: var(--accent); color: var(--on-accent); }
.mail-undo__cancel:disabled { opacity: .5; cursor: default; }

/* Блик, который идёт за отсчётом.

   Роман: «при смещении индикатора таймера в виде бара — переливаться слегка,
   без перебора оттенком этого бара». Отсюда всё: краска блика — тот же
   `--accent`, что у полоски; движение у них общее; и «слегка» — это 76%
   прозрачности, то есть заметно, только когда смотришь.

   **Блик едет вместе с правым краем полоски, а не сам по себе.** Полоска
   убывает `scaleX` от левого края, значит её правый край идёт справа налево;
   блик — слой во всю плашку с мягким пятном посередине, и сдвиг на половину
   собственной ширины уводит это пятно ровно на край плашки. От `translateX(50%)`
   до `translateX(-50%)` пятно проходит путь края полоски точка в точку. Время
   и кривую обоим задаёт js одной строкой — расходиться им нечем.

   **Едет `transform`, а не `background-position`.** Тот же разбор, что у
   стекла звонка: под слоем `backdrop-filter`, и сдвиг фона заставлял бы
   браузер каждый кадр пересчитывать весь размытый низ экрана. `transform`
   уходит на видеокарту и не трогает ни раскладку, ни размытие. */
.mail-undo__sheen {
  position: absolute; inset: 0; pointer-events: none;
  transform: translateX(50%);
  /* Пятно посажено на нижний край (`at 50% 100%`) и вытянуто выше плашки: свет
     как бы поднимается от самой полоски, а не висит над ней отдельным кругом.
     Две ступени, а не одна: ближе к середине краска гуще, к краям сходит на
     нет — от одной ступени у пятна виден обод. */
  background: radial-gradient(36% 150% at 50% 100%,
    color-mix(in oklab, var(--accent), transparent 66%) 0%,
    color-mix(in oklab, var(--accent), transparent 88%) 45%,
    transparent 74%);
}

/* Убывающая полоска по нижнему краю плашки — та же, что в пузыре разговора
   (`mail-msg__wait-line`). Это одно обещание, сказанное дважды: «столько ещё
   можно передумать». Лежит по низу, а не отдельной строкой: плашка в одну
   строку, и второй ярус ради двух точек высоты растил бы её вдвое.

   Едет `transform`, а не ширина: ширина заставила бы браузер пересчитывать
   раскладку плашки каждый кадр. Время задаёт js — только он знает срок. */
.mail-undo__line {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px; border-radius: 0 0 14px 14px;
  transform-origin: left center;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--accent) 70%, white) 0%, var(--accent) 100%);
}

/* Появляется одним проявлением, без подъёма снизу.

   Подъём на 14 точек тут был, и он же попал под ответ Роману «она не должна
   перемещаться»: плашка выезжала из-под нижнего края, и вместе с дрожанием
   счётчика это читалось как одно шевеление. Стеклу проявление и идёт больше:
   оно не приезжает, а проступает. */
@keyframes mc-undo-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* На телефоне полоска ложится по ширине экрана: посередине она перекрыла бы
   половину списка писем, а нижний край занят панелью разделов.

   Шапка письма здесь **в одну строку**, как и на столе. Прежде подпись поля
   вставала над ним отдельной строкой: колонка в 66 точек съедала треть
   строки адреса. Роман 28.08.2026: «для экономии места делать не в две
   строки, а в одну — „Кому“ и справа кому, через двоеточие. Это сэкономит
   место, и на телефоне будет выглядеть лучше».

   Место нашлось там же, где терялось: подпись перестала быть колонкой в 66
   точек и стала словом (`flex: 0 0 auto`), а двоеточие взяло на себя работу
   отступа. Четыре строки шапки против восьми — это полтора десятка точек
   высоты на каждой, то есть целое письмо в видимой части экрана. */
@media (max-width: 640px) {
  .mail-undo { left: 12px; right: 12px; transform: none; bottom: 76px; animation: none; }
  .mc-row { gap: 8px; padding: 6px 10px; }
  .mc-row__label { min-width: 0; }
  /* «Копия» и «Скрытая» стоят в той же строке, что и адрес, и жмутся сами.
     Своей строки у них больше нет — она была нужна, пока шапка складывалась
     надвое; теперь `flex-basis: 100%` растянул бы их за край экрана, и на
     первом же снимке «Скрытая» обрезалась пополам. Поле адреса при этом
     остаётся главным: жмётся кнопка, а не оно. */
  .mc-more { flex: 0 1 auto; min-width: 0; padding-top: 4px; }
  .mc-more__link { padding: 4px 5px; font-size: 12px; }
  .mc-attach { padding: 9px 10px 11px; }
  /* Подсказка на телефоне ниже: списку писем под ней всё равно не видно, а
     четыре строки читаются, не закрывая собой поля «Копия» и «Тема». */
  .mc-sug { max-height: 208px; }
}

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

   `pointer-events: none` обязателен: иначе завеса сама перехватила бы
   `dragleave` у окна под собой и замигала бы под курсором. */
.mc-drop {
  position: absolute; inset: 0; z-index: 30;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: color-mix(in oklab, var(--surface) 88%, transparent);
  backdrop-filter: blur(2px);
  pointer-events: none;
  animation: mc-veil-in 140ms var(--ease) both;
}
.mc-drop__box {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 18px 26px; border-radius: 12px;
  border: 2px dashed var(--accent); color: var(--accent-text);
  background: var(--surface);
}
.mc-drop__title { font-weight: 600; }
.mc-drop__note { font-size: 12px; color: var(--text-faint); }

@keyframes mc-veil-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Движение — по просьбе системы, а не по желанию окна. Правило соблюдается
   во всём Флоу: человеку, которого от движения укачивает, окно письма должно
   открываться так же спокойно, как и всё остальное. */
@media (prefers-reduced-motion: reduce) {
  .mc,
  .mc-row--fold.is-open,
  .mc-hint,
  .mc-chip.is-new,
  .mc-sug,
  .mc-files > .is-new,
  .mc-drop,
  .mail-undo { animation: none; }
}

/* Текст письма на белом листе — вторая половина выключателя «солнце — месяц».

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

   Поле остаётся полем — это тот же `textarea`, в который пишут; меняются
   только краски. Каретка и выделение заданы явно: без них в светлом поле
   остаётся системная каретка тёмной темы, то есть невидимая на белом. */
.mc-body--light {
  background: #FFF; color: #1A1B26; border-color: #E2E2EE;
  caret-color: #1A1B26;
}
.mc-body--light::placeholder { color: #9A9AAE; }
.mc-body--light.is-empty::before { color: #9A9AAE; }
.mc-body--light a { color: #3A3AC4; }
.mc-body--light::selection { background: rgba(91, 91, 214, .36); color: #1A1B26; }
.mc-body--light:focus { border-color: #C9C9E4; box-shadow: none; }

/* Предупреждение о ящике не той фирмы.

   Роман 03.09.2026: «если выбран неправильный ящик… можешь как-то
   подсвечивать, жёлтым например… тем не менее, возможность отправки оставь».
   Поэтому это предупреждение, а не запрет: жёлтая рамка у поля и строка под
   ним. Красный здесь был бы враньём — красный в «Графите» значит «сорвалось»,
   а тут ничего не сорвалось и может быть вполне намеренным.

   Строка занимает свою высоту только когда есть что сказать (`hidden` снимает
   скрипт): пустое место под «От кого» в каждом письме — это цена, которую
   платят за подсказку, нужную раз в неделю. */
.mc-box.is-warn {
  border-color: var(--amber);
  box-shadow: 0 0 0 1px var(--amber) inset;
}
/* Строка ряда — flex, поэтому переносим её и отдаём предупреждению всю
   ширину. Перенос включается только у того ряда, где предупреждение есть:
   общее `flex-wrap` у всех рядов однажды уронило бы поле под подпись на узком
   экране. Отступ слева равен ширине подписи (52) плюс зазор (10) — строка
   встаёт под полем, а не под словом «От кого». */
.mc-row:has(.mc-firm:not(.hidden)) { flex-wrap: wrap; }
.mc-firm {
  flex: 1 1 100%;
  margin: 2px 0 2px 62px;
  font-size: 11.5px; line-height: 1.35; color: var(--amber);
}