/* =========================================================
   Шапка списка писем и окно поиска — 28.08.2026
   =========================================================

   Поиск переехал из полосы над списком в **своё окно**. Просьба Романа
   28.08.2026 и разбор к ней:

   * строка поиска занимала место всегда, а спрашивают у неё раз в день;
   * свёрнутая в лупу, она ложилась поверх первой строки списка и налезала
     на стоявшую тогда над списком кнопку «прочитать все» — заплатка
     `padding-right` держалась ровно за это (самой кнопки там больше нет);
   * с появлением поиска по документам в неё пришлось втиснуть ещё и
     переключатель — в колонке 300 точек это уже не полоса, а этаж.

   Теперь над списком стоит шапка раздела: имя слева, лупа справа. Нажатие —
   и окно поиска въезжает справа **на место списка**, отмена уводит его влево.
   Это тот же жест, которым в разделе открывается письмо (`mail-pane-in`), и
   тайминг взят оттуда же: 220 мс и общая кривая. Два движения в одном разделе,
   идущие по-разному, читаются как две системы.

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

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

   Высота шапки объявлена числом, потому что по ней ставится верх окна:
   окно начинается **под** шапкой и никогда её не закрывает. Роман
   28.08.2026: «не хотелось бы, чтобы надпись Флоу.Почта загораживалась
   окном поиска». Число, а не замер живой шапки: замер пришлось бы
   повторять на каждой перерисовке, а высота эта задана здесь же и меняется
   ровно в одном месте — здесь же, в переменной, и `.mail-top` берёт её
   отсюда.

   Объявлена на всём разделе, а не на колонке списка: с 07.09.2026 её читает
   ещё и вид «Mail Ru» — слой разговора начинается **под** шапкой списка, чтобы
   не закрыть собой лупу (`mail-dive.css`), и отступ этот обязан быть тем же
   числом, а не подобранным на глаз. */
.mail { --mail-top-h: var(--chat-head-h); }
.mail__list { overflow: hidden; }

/* ---------- шапка списка ---------- */

/* Высота — общая для всех шапок Флоу: `--chat-head-h`, те же 56 точек, что у
   трёх колонок чата, у шапки разговора справа (`--mail-head-h` в `mail.css`)
   и у шапки панели переписки (`mail-people.css`).

   До 07.09.2026 здесь стояло своё число 52 «примерно как справа», и вместе с
   ярусом чипов в шапке разговора это давало на стыке двух колонок ступеньку
   в четырнадцать точек. Роман: «мне очень режет глаз этот стык и неровные
   плашки». «Примерно» на стыке не работает: две плашки стоят border к border,
   и глаз меряет их друг по другу, а не по экрану. */
.mail-top {
  /* Над окном поиска: оно въезжает под шапкой, и перекрыть её не должно
     даже на кадр движения. */
  position: relative;
  z-index: 7;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--mail-top-h);
  padding: 8px 10px 8px var(--mail-pad);
  border-bottom: 1px solid var(--border);
  background: var(--surface-2, var(--surface));
}

/* Локап тот же, что у Флоу.Чата на телефоне: «Флоу», фирменная точка, слово
   раздела. Точка — `inline-block` в одном потоке текста, поэтому садится
   нижним краем на базовую линию строки, а не висит по середине кегля.

   Кегль здесь 18, а не 21 как в чате: колонка списка вдвое уже экрана
   телефона, и на 21 «Флоу.Почта» съедала место у кнопки. */
.mail-top__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: "Onest", var(--font);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--text);
}
.mail-top__dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin: 0 3px 0 1px;
  border-radius: 50%;
  background: var(--accent);
}

/* Лупа — единственная кнопка шапки, и она же единственное действие. Кружок
   с тем же градиентом и той же повадкой, что у «Написать»: приподнимается на
   точку и роняет мягкую тень. Своей анимации не выдумываем — в разделе уже
   есть кнопка, которая так делает, и вторая манера была бы лишней. */
.mail-top__glass {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-image: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 88%, white) 0%, var(--accent) 55%,
    color-mix(in srgb, var(--accent) 88%, black) 100%);
  color: #fff;
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.mail-top__glass:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 35%, transparent);
}
.mail-top__glass:active { transform: translateY(0); }
/* В поиске лупа не исчезает — она и есть выход из него. Горит так же,
   как под курсором, плюс кольцо: человек видит, что кнопка сейчас
   «нажата», а не просто наведена. Роман 28.08.2026: «кнопка останется
   поиска на экране — её можно выделить ярче в режиме поиска». */
.mail-top__glass.is-on {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 42%, transparent),
              0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.mail-top__glass:focus-visible { outline: none; box-shadow: var(--ring); }

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

/* ---------- окно поиска ---------- */

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

   Закрытое окно не убрано `display: none`: набранное в поле и место прокрутки
   находок должны пережить закрытие. Оно сдвинуто за правый край и погашено
   `visibility` — так оно не ловит нажатия и не читается голосом. */
.mail-find {
  position: absolute;
  top: var(--mail-top-h, 56px);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* Цвет листа, а не колонки ящиков. Стоял `--surface-2` — ровно тот, каким
     покрашен `.mail__rail`, и окно сливалось с меню слева (Роман 28.08.2026:
     «цвет фона поиска странный… сливается с сайдменю почты»). Теперь окно
     того же цвета, что лист письма и список, а отделяет его от них не
     краска, а тень: слой, лежащий выше, узнают по тени, а не по оттенку. */
  background: var(--surface);
  box-shadow: var(--shadow-pop);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 220ms var(--ease, ease), visibility 0s linear 220ms;
}
/* Готово к движению: окно уже видно и уже нарисовано, но ещё стоит за
   правым краем. Отдельным состоянием, потому что переход должен начинаться
   от **увиденного** браузером положения, а не от того, которое он посчитал
   бы задним числом; задержки у `visibility` здесь быть не должно, иначе
   окно проступит уже приехавшим. */
.mail-find.is-ready {
  visibility: visible;
  transition: transform 220ms var(--ease, ease), visibility 0s;
}

/* Въезд справа. `visibility` переключается сразу, без задержки, — иначе
   первый кадр движения прошёл бы вслепую. */
.mail-find.is-open {
  transform: none;
  visibility: visible;
  transition: transform 220ms var(--ease, ease), visibility 0s;
}
/* Отмена уводит окно влево, а не обратно вправо. Пришло справа — значит,
   «назад» это влево: так человек читает направление и не путает отмену с
   повтором. Класс снимается по концу перехода, и окно возвращается в своё
   исходное положение за правым краем уже невидимым. */
.mail-find.is-leaving {
  transform: translateX(-100%);
  visibility: visible;
  transition: transform 220ms var(--ease, ease), visibility 0s linear 220ms;
}

/* Строка поиска. Подложена лёгким акцентом — это единственное место окна,
   куда человек пришёл писать, и оно должно читаться как поле, а не как
   заголовок. Оттенок слабый (6%), чтобы не спорить с текстом находок. */
.mail-find__top {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
}
.mail-find__glass {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: var(--accent-text);
}

.mail-find__field.input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 0;
  border: 0;
  background: transparent;
  font-size: 14px;
}
.mail-find__field.input:focus { box-shadow: none; }

.mail-find__wipe {
  flex: 0 0 auto;
  display: none;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
}
.mail-find.has-query .mail-find__wipe { display: grid; }
.mail-find__wipe:hover { background: var(--surface-3); color: var(--text); }

/* Ряд отборов. Пока в нём один «Файлы», и это осознанно: отбор — это сужение
   вопроса, а не второй вопрос. Появятся другие («непрочитанные», «за неделю»)
   — встанут этим же рядом и этой же кнопкой. */
.mail-find__chips {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}
.mail-find__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-soft);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.mail-find__chip:hover { color: var(--text); }
/* Нажатый отбор — заливкой, а не рамкой: рамка на тёмном читается хуже
   заливки, а знать, что список сужен, человек обязан с одного взгляда. */
.mail-find__chip.is-on {
  border-color: transparent;
  background: var(--accent-soft);
  color: var(--accent-text);
}
.mail-find__chip:focus-visible { outline: none; box-shadow: var(--ring); }

/* Тело окна прокручивается целиком: контакты и находки — один поток, и
   отдельная прокрутка у каждого куска рвала бы его на два экрана. */
.mail-find__body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ---------- контакты ---------- */

/* До пяти человек над находками. Их не ищет отдельная ручка: люди берутся из
   тех же найденных писем — у кого имя или ящик совпал с набранным. Своего
   запроса это не стоит вовсе, а отвечает на самый частый вопрос к поиску:
   «покажи переписку с этим человеком». */
.mail-find__people {
  flex: 0 0 auto;
  padding: 6px 0 2px;
  border-bottom: 1px solid var(--border);
}
.mail-find__cap {
  padding: 2px var(--mail-pad) 6px;
  color: var(--text-faint);
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.mail-find__face {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px var(--mail-pad);
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 140ms ease;
}
.mail-find__face:hover { background: var(--surface-3); }
.mail-find__face:focus-visible { outline: none; box-shadow: var(--ring); }
.mail-find__who {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.mail-find__who b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 560;
  font-size: 13.5px;
}
.mail-find__who span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-faint);
  font-size: 12px;
}

/* Подсказка на пустом окне — вместо списка находок, пока ничего не набрано.
   Пустое окно без единого слова читается как поломка. */
.mail-find__hint {
  padding: 28px var(--mail-pad);
  color: var(--text-faint);
  font-size: 13px;
  text-align: center;
}

/* ---------- выбранное стрелками ----------

   Отметка ходьбы по находкам (`is-picked` в `mailSearch.js`). Своим видом, а
   не тем же, что у открытого разговора (`is-active`): это два разных ответа —
   «вот это открыто» и «сюда сейчас поедет Enter», — и одинаковыми их делать
   нельзя. Открытое залито акцентом, выбранное держит полосу у левого края.

   Полосой внутрь (`inset`), а не рамкой: рамка растолкала бы строку на три
   точки, и список дёргался бы под каждой стрелкой.

   Подложка — только там, где строка не залита как открытая. Сразу после
   Enter выбранное и открытое — одна и та же строка, и подложка выбранного
   стёрла бы заливку открытого: человек нажал, письмо открылось, а строка
   перестала выглядеть открытой. Полоса при этом остаётся у обеих, и вместе
   они читаются ровно как есть — «открыто, и рука стоит здесь». */
.mail-find .mail-row.is-picked,
.mail-find .mail-found.is-picked,
.mail-find .mail-find__face.is-picked {
  box-shadow: inset 3px 0 0 var(--accent);
}
.mail-find .mail-row.is-picked:not(.is-active),
.mail-find .mail-found.is-picked:not(.is-active),
.mail-find .mail-find__face.is-picked {
  background: var(--surface-3);
}

/* ---------- телефон ---------- */

/* На узком экране колонка списка и есть экран, поэтому окно занимает его
   целиком теми же правилами — менять нечего. Прибавляется одно: имя раздела
   крупнее, как заголовок экрана в чате.

   Высоты здесь больше нет: телефонная шапка и была теми самыми 56 точками, а
   с 07.09.2026 столько же и на столе — правило повторяло бы общее. */
@media (max-width: 820px) {
  .mail-top__name { font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  .mail-find,
  .mail-find.is-open,
  .mail-find.is-leaving { transition: none; }
  .mail-top__glass { transition: none; }
  .mail-top__glass:hover { transform: none; }
}