/* =========================================================================
   LITTEN — телефон: плотность интерфейса (stage 115)

   Почему отдельный файл и почему он вообще понадобился.

   Дизайн-система свёрстана в px под 100% зума, но на десктопе всё полотно
   ужато до 0.8 (html{zoom} — см. «UI scale» в app.css), и именно эта оптика
   принята за норму. На тач-устройствах масштаб намеренно НЕ включается (11px
   подписи на телефоне нечитаемы), поэтому телефон получал те же числа без
   сжатия: каждый отступ, заголовок, плитка и иконка оказывались на четверть
   крупнее задуманного. Отсюда «на телефоне всё огромное»: одна метрика на всю
   ширину экрана, пять карточек до начала списка, шапка из пяти больших кнопок,
   строка чата в три этажа.

   Правило файла: ужимаем ОБВЯЗКУ (отступы, заголовки, плитки, иконки, высоты
   служебных контролов) до той же оптики, что на десктопе, а размер основного
   ТЕКСТА не трогаем — 14px в кабинете сотрудника остаются 14px. Поля ввода,
   наоборот, получают 16px: меньший шрифт заставляет Safari на iOS зумить
   страницу на каждый тап по полю.

   Ничего своего в палитре и никаких новых компонентов — только геометрия под
   ширину телефона. Файл подключается ПОСЛЕ app.css (base.html), поэтому
   правила равной специфичности перебивают базовые по порядку, без !important.
   Порог 819px — тот же, что у мобильной ветки app.css (таб-панель, drawer).
   ========================================================================= */

@media (max-width: 819px) {
  /* ---- Оболочка: шапка, полотно, место под таб-панель ---------------------
     --topbar-h переопределяем на корне, а не на .topbar: от него считается и
     высота страницы чата (.page:has(> .chat-card)), и сама шапка. */
  :root {
    --topbar-h: 54px;
    /* Высота таб-панели: ряд .tabbar__item (54px) + подписи и кромка = 58px.
       Одно число на всё — отступ страницы, высота чата, подъём плавающих
       кнопок; менять вместе с .tabbar__item в app.css. */
    --tabbar-h: 58px;
    --tabbar-space: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  }

  .topbar { gap: 8px; }
  .topbar__actions { gap: 6px; }
  .topbar .btn-icon {
    width: 36px; height: 36px; border-radius: 14px;
  }
  .topbar .btn-icon svg { width: 18px; height: 18px; }
  .topbar__user-button { padding: 2px; border-radius: 50%; }
  .topbar__user-avatar { width: 32px; height: 32px; font-size: 11.5px; }
  .topbar__bell-count {
    top: -4px; right: -4px; min-width: 16px; height: 16px; font-size: 10px;
    /* Кольцо тоньше — и в анимации тоже (pulse-soft читает --pulse-ring-w). */
    --pulse-ring-w: 2px;
    box-shadow: 0 0 0 2px var(--topbar-tint);
  }
  /* Переключатель темы — под размер соседних кнопок (60x32 в ряду из 36px
     смотрелся тумблером от другого интерфейса). Сдвиг бегунка обязан
     пересчитаться вместе с шириной: 50 - 22 - 2*2 = 24. */
  .theme-toggle__track { width: 50px; height: 28px; }
  .theme-toggle__thumb { top: 2px; left: 2px; width: 22px; height: 22px; }
  .theme-toggle__icon { width: 13px; height: 13px; }
  html[data-theme="dark"] .theme-toggle__thumb { transform: translateX(24px); }
  /* «Выйти» есть в меню профиля — шестая кнопка в шапке телефона лишняя. */
  .topbar__logout { display: none; }
  /* Быстрый поиск (⌘K) — не мобильный элемент: разделы на телефоне открывает
     таб-панель и drawer, а поле в ряду иконок только сужало бренд. Прятали его
     с 520px, и в промежутке 520–819px оно оставалось в цепочке фокуса: стрелки
     «˄ ˅» над клавиатурой iOS перепрыгивали в него из поля чата, и палитра
     поиска открывалась поверх переписки сама собой (20.08.2026). Порог теперь
     общий для всей мобильной раскладки; вторым рубежом стоит проверка
     видимости в initCommandPalette. */
  .topbar__search { display: none; }
  /* Поиск на телефоне скрыт, и слева от кнопок оставалась пустая полоса:
     ставим в неё логотип — шапка перестаёт быть безымянным рядом иконок. */
  .topbar__brand { display: inline-flex; margin-right: auto; min-width: 0; }
  .topbar__brand .brand-logo__img { height: 26px; max-width: 118px; }

  .page {
    --edge-pad: 14px;
    padding-top: 14px;
    padding-bottom: calc(16px + var(--tabbar-space));
    gap: 14px;
  }
  .page__head { gap: 10px; }
  .page__title { font-size: 20px; }
  .page__subtitle { font-size: 13px; margin-top: 2px; }
  .page__head-lead { gap: 9px; }
  .page-back { width: 32px; height: 32px; }
  .page-back svg { width: 16px; height: 16px; }
  /* Кнопки заголовка делят строку между собой: две встают парой, одинокая
     растягивается на всю ширину — главное действие под большим пальцем,
     вместо «лесенки» из пилюль разной ширины. Базис 42%, а не auto: иначе
     длинная подпись («Диалоги сотрудника») уводила соседа на строку ниже. */
  .page__actions { gap: 8px; width: 100%; }
  .page__actions > .btn,
  .page__actions > .dropdown,
  .page__actions > form > .btn { flex: 1 1 42%; min-height: 40px; }
  /* «Ещё» — такая же кнопка пары, поэтому обёртка меню делит строку наравне
     с остальными, а сама кнопка занимает её целиком. */
  .page__actions > .dropdown > .btn { width: 100%; min-height: 40px; }
  /* Прозрачная кнопка в паре с цветной читалась как подпись, а не как
     действие: на телефоне даём ей поверхность и кромку. */
  .page__actions > .btn-ghost { background: var(--color-surface); border-color: var(--color-border); }
  .btn-lg { padding: 12px 18px; font-size: 14.5px; }

  /* Drawer полного меню: уже, чем на планшете — экран 390pt, и 260px drawer'а
     закрывал его почти целиком. */
  .sidebar { --sidebar-w: 244px; padding: 14px 10px; }
  .sidebar__brand { padding: 4px 6px 14px; }
  .sidebar__brand .brand-logo__img { height: 34px; }

  /* ---- Карточки и типографика разделов ---------------------------------- */
  /* Геометрия догнала десктопную (03.09.2026), но НЕ механическим копированием:
     на телефоне --ui-scale = 1, и написанные px здесь на 18% крупнее, чем те же
     px на десктопе. Поэтому радиус 20, а не 26, и поля 16, а не 24. */
  .card { padding: 16px; gap: 12px; border-radius: 20px; }
  .card__title { font-size: 14.5px; }
  .card__subtitle { font-size: 12.5px; }
  .card__foot { padding-top: 10px; font-size: 12.5px; }
  .empty-state { padding: 26px 14px; gap: 9px; }
  .empty-state__icon { width: 46px; height: 46px; border-radius: 50%; }
  .empty-state__icon svg { width: 24px; height: 24px; }
  .empty-state__title { font-size: 15px; }
  /* Вкладки хабов: одна строка с горизонтальной прокруткой (padding и шрифт
     ужаты так, чтобы четыре вкладки влезали в 390pt без прокрутки вовсе).
     flex: none — иначе flex сжимал последнюю вкладку и обрезал подпись. */
  .hub-tabs { margin-bottom: 12px; }
  .eco-tabs,
  .hub-tabs { gap: 3px; padding: 3px; }
  .eco-tabs__tab,
  .hub-tabs__tab { flex: none; padding: 7px 12px; font-size: 12.5px; }
  .chips { gap: 6px; }
  .chip { padding: 5px 10px; font-size: 12px; }

  /* ---- Метрики ----------------------------------------------------------
     Главная причина «всё огромное»: сетки метрик сворачивались в одну колонку
     (auto-fit от 190px), и каждая цифра занимала полосу во всю ширину экрана —
     до содержимого раздела приходилось прокручивать пять карточек. На телефоне
     метрики — это плотная плитка 2×N, как в нативных приложениях. */
  .metrics,
  .metric-grid,
  .metric-grid--pvz,
  .metric-grid--shift,
  .metric-grid--opening,
  .metric-grid--acceptance,
  .metric-grid--violations,
  .metric-grid--claims,
  .dash-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .metric-card {
    padding: 14px 14px 12px; gap: 6px; border-radius: 20px;
    /* Ряд плиток одной высоты: подпись в две строки больше не делает соседа
       выше. Значение прижато к низу базовым правилом margin-top: auto. */
    min-height: 78px;
  }
  /* Место под иконку в углу — только там, где иконка есть: в справочниках
     (ПВЗ, смены) плитки без иконки, и глухой отступ справа их только раздувал. */
  .metric-card:has(> .metric-card__icon) { padding-right: 44px; }
  /* Иконка — в правый верхний угол: в узкой плитке она стоила целой строки
     высоты, а как акцент в углу читается не хуже. Плитка уже position:
     relative и overflow: hidden — новых слоёв не нужно. */
  .metric-card__icon {
    position: absolute; top: 10px; right: 10px;
    /* Радиуса больше нет: подложку сняли (app.css), в углу стоит сам глиф. */
    width: 24px; height: 24px;
  }
  .metric-card__icon svg { width: 22px; height: 22px; }
  /* Кнопка «↗» (признак кликабельности) и иконка плитки метят в один угол —
     но только на телефоне, где иконка уходит в absolute. У плиток-фильтров
     иконки нет вовсе, и кнопка там остаётся; у плиток сводной, где иконка есть,
     побеждает иконка. */
  .metric-card:has(> .metric-card__icon) .metric-card__overlay::before,
  .metric-card:has(> .metric-card__icon) .metric-card__overlay::after { display: none; }
  .metric-card:has(> .metric-card__icon) .metric-card__label { padding-right: 34px; }
  /* Кружок на телефоне мельче: --ui-scale там 1, и 40px читались бы как кнопка
     размером с половину подписи. */
  .metric-card__overlay::before,
  .metric-card__overlay::after { top: 12px; right: 12px; width: 30px; height: 30px; }
  .metric-card--link .metric-card__overlay::before,
  .metric-card--link .metric-card__overlay::after {
    top: 5px; right: 9px; width: 24px; height: 24px;
  }
  .metric-card--link .metric-card__label { padding-right: 38px; }
  .metric-card__icon svg { width: 15px; height: 15px; }
  .metric-card__label { font-size: 11.5px; line-height: 1.3; }
  /* Цветная шапка плитки-фильтра разбегается до кромок отрицательными полями,
     равными полям карточки, — а на телефоне они свои (14px, не 22px). */
  .metric-card--link .metric-card__label {
    margin: -14px -14px 0; padding: 9px 14px; min-height: 34px; font-size: 11.5px;
    border-radius: 20px 20px 0 0;
  }
  .metric-card__value { --metric-value-size: 24px; }
  /* Расшифровка под цифрой — не больше двух строк: у алертов там перечисление
     точек, и плитка вырастала втрое выше соседней. */
  .metric-card__delta {
    /* Пилюля из базового правила здесь гасится: в узкой плитке расшифровка
       занимает две строки, а таблетка с line-clamp: 2 выглядит сломанной. */
    display: -webkit-box; background: transparent; padding: 0;
    font-size: 11px; line-height: 1.3;
    display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  }
  /* Плитка на всю ширину остаётся только там, где её просит сам раздел. */
  .metric-card--wide { grid-column: 1 / -1; }

  /* ---- Списки «значение справа» ----------------------------------------- */
  .stat-list__item { padding: 10px 0; font-size: 13px; }
  .stat-list__value { font-size: 15px; }
  .dash-list__label { font-size: 13px; }
  .dash-list__sub { font-size: 11.5px; }
  .dash-list__value { font-size: 14px; }
  /* Сигналы «Требует внимания»: на телефоне они идут в одну колонку, поэтому
     цифре хватает 16px — иначе счётчик перевешивает сам текст проблемы. */
  .dash-alert__link { padding: 10px 12px 10px 10px; gap: 10px; }
  .dash-alert__value { font-size: 16px; }
  .dash-alert__label { font-size: 13px; }

  /* ---- Дашборды --------------------------------------------------------- */
  .dash-group { gap: 10px; margin-top: 2px; }
  .dash-group__title { font-size: 14px; }
  .dash-cards { grid-template-columns: 1fr; gap: 12px; }
  .dash-widget { gap: 10px; }
  .dash-widget__body { gap: 8px; }
  .dash-chart__row { font-size: 12.5px; grid-template-columns: minmax(76px, 40%) 1fr minmax(46px, max-content); gap: 8px; }
  .dash-linechart__plot svg { height: 132px; }
  .chart-legend { gap: 10px 14px; font-size: 11.5px; }

  /* ---- Панель «Отчёты OZON» --------------------------------------------
     Структуру панели не трогаем (отрывной листок + подпись + кнопка) — только
     плотность. Ниже 720px базовые правила уводили пилюлю срока и кнопку в
     отдельную строку на всю ширину, и один срок занимал полтора экрана. */
  .repcal { padding: 12px 14px; margin-bottom: 12px; border-radius: 20px; }
  .repcal__head { gap: 10px; margin-bottom: 10px; align-items: flex-start; }
  /* Кнопка панели ниже 720px растягивалась на всю ширину и с центрированной
     подписью читалась как второй заголовок. Ужимаем до обычной кнопки. */
  .repcal__cta { width: auto; min-height: 34px; padding: 8px 13px; font-size: 12.5px; }
  .repcal__title { font-size: 15px; }
  .repcal__summary { font-size: 12px; }
  .repcal__slots { gap: 8px; }
  .repslot { flex-wrap: nowrap; align-items: center; gap: 10px; padding: 10px; border-radius: 18px; }
  .repslot__leaf { width: 44px; height: 46px; grid-template-rows: 15px 1fr; }
  /* Не мельче 10px: «авг» на отрывном листке 8.5px читался как пятно. */
  .repslot__month { font-size: 10px; letter-spacing: 0.04em; }
  .repslot__month::before,
  .repslot__month::after { top: 5px; width: 2px; height: 2px; }
  .repslot__month::before { left: 5px; }
  .repslot__month::after { right: 5px; }
  .repslot__day { font-size: 21px; }
  .repslot__title { font-size: 13px; }
  .repslot__sub,
  .repslot__fact { font-size: 11.5px; }
  .repslot__side { flex: 0 0 auto; grid-auto-flow: row; justify-items: end; align-items: center; gap: 5px; }
  .repslot__when { padding: 2px 7px; font-size: 10.5px; text-align: right; }
  .repslot__action { min-height: 30px; padding: 6px 11px; font-size: 12px; }

  /* ---- Таблицы реестров -------------------------------------------------
     Таблица на 390pt всё равно уезжает в горизонтальный скролл (.table-wrap),
     поэтому строка обязана быть строкой: без nowrap адрес переносился на
     четыре этажа и одна запись занимала 110px высоты. Полный текст виден в
     карточке записи (строки кликабельны) и в Excel-выгрузке. */
  .table { font-size: 12.5px; }
  .table thead th { padding: 10px 12px; font-size: 10.5px; font-weight: 700; background: transparent; letter-spacing: .05em; }
  /* На телефоне 64px из десктопа избыточны — строка держится на 13px полей.
     Двухстрочную ячейку базовое правило гасит своим :has(), тут не дублируем. */
  .table tbody td { padding: 13px 12px; white-space: nowrap; }
  .table tbody td.td-wrap { white-space: normal; }
  .table td.cell-clip,
  .table-cell-address,
  .table-cell-pvz {
    min-width: 0; max-width: 158px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* Внутри такой ячейки обычно два блока (адрес и код под ним), причём вложены
     они через обёртку: td → .pvz-cell → .pvz-cell__address. Многоточие с самой
     ячейки на потомков НЕ распространяется — адрес обрезался «по-живому»,
     ровно посреди буквы. Селектор потомков, а не детей, именно из-за обёртки. */
  .table td.cell-clip *,
  .table-cell-address *,
  .table-cell-pvz * {
    max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .cell-sub { font-size: 11px; }
  .badge { font-size: 11px; padding: 3px 9px; }
  .role-badge,
  .status-badge { font-size: 10.5px; padding: 3px 8px; }

  /* ---- Плашка «укажите свою почту» (компонент stage 116) ----------------
     Живёт над каждой страницей, и в исходных размерах занимала на телефоне
     почти весь первый экран. Плотность правим здесь, а не в её собственном
     блоке: компонент новый и ещё дорабатывается. */
  /* ---- Календарь смен ---------------------------------------------------
     Правил календаря здесь не было НИ ОДНОГО — на телефоне он получал
     десктопные числа при --ui-scale = 1, то есть ещё и на 18% крупнее.
     Считаем на 375px: 375 − 28 (поля страницы) − 32 (поля карточки) = 315,
     делим на семь = 45px ширины при клетке высотой 128px. В таблетку смены
     оставалось ~8px под текст — сотрудник не видел ни времени, ни фамилии.
     Поэтому на телефоне таблетки превращаются в ТОЧКИ: цвет статуса виден,
     подробности открываются нажатием на день. */
  .calendar__cell { min-height: 62px; padding: 5px 4px; gap: 4px; }
  .calendar__weekday { font-size: 10px; letter-spacing: .02em; padding: 6px 0 6px 4px; }
  .calendar__date { font-size: 13px; }
  /* На телефоне 26px титула это 26px (масштаб 1), а не 22 — режем до 20. */
  .calendar-nav__label,
  .calendar-nav .day-jump__input { font-size: 18px; min-width: 0; }
  .calendar__cell--today .calendar__date { min-width: 24px; height: 24px; padding: 0 5px; }
  .calendar--openings .calendar__cell { min-height: 62px; }
  .cal-pill {
    height: 6px; padding: 0; border-radius: 999px; font-size: 0;
    border-left: 0; background: var(--color-primary);
  }
  .cal-pill__time, .cal-pill__name { display: none; }
  .cal-pill--worked { background: var(--color-success); }
  .cal-pill--no_show { background: var(--color-danger); }
  .cal-pill--cancelled { background: var(--color-muted); }
  .cal-more { font-size: 10px; }
  .cal-oc__chip { font-size: 10px; padding: 2px 6px; }

  .mail-cta { padding: 12px 14px; gap: 8px 10px; margin-bottom: 12px; border-radius: 18px; }
  .mail-cta__icon { width: 30px; height: 30px; border-radius: 12px; }
  .mail-cta__icon svg { width: 17px; height: 17px; }
  .mail-cta__eyebrow { font-size: 10.5px; }
  .mail-cta__title { font-size: 15px; }
  .mail-cta__text { font-size: 12.5px; margin-top: 4px; }
  .mail-cta__btn { min-height: 40px; }

  /* ---- Дропзона импорта ------------------------------------------------- */
  .dropbay__zone { padding: 22px 14px; gap: 6px; }
  .dropbay__icon { width: 42px; height: 42px; }
  .dropbay__icon svg { width: 20px; height: 20px; }
  .dropbay__title { font-size: 14px; }
  .dropbay__hint { font-size: 12px; }
  .dropbay__kind { padding: 4px 9px; font-size: 11.5px; }

  /* ---- Матрица графика --------------------------------------------------
     Липкая колонка ПВЗ в 208–260px съедала экран телефона целиком: справа от
     неё оставалось место ровно под один день. Ужимаем колонку и день — в
     видимую область попадают три дня, и матрица снова читается как матрица. */
  .sched-matrix__corner,
  .sched-matrix__pvz { min-width: 146px; max-width: 172px; padding: 7px 9px; }
  .sched-matrix__pvzname { font-size: 12.5px; }
  .sched-matrix__meta { gap: 5px; margin-top: 2px; flex-wrap: wrap; }
  .sched-matrix__code { font-size: 10.5px; }
  /* Чип города — лишняя строка в узкой колонке: город и так стоит первым
     словом в коде точки (ПСКОВ_173, БОРИСОВИЧИ_18). */
  .sched-matrix__city { display: none; }
  .sched-matrix__day { min-width: 84px; }
  .mx-chip { font-size: 11px; }
  /* Высоту простыни на телефоне режут обе панели: липкая шапка сверху (64px)
     и панель вкладок снизу. Без этой поправки шапка дней уезжала под шапку
     приложения — прокрутив таблицу до конца, человек переставал понимать,
     какое число перед ним. */
  .sched-matrix__wrap { max-height: max(calc(100vh * var(--vu) - 168px), 300px); }

  /* ---- Формы -----------------------------------------------------------
     16px в полях — не «крупнее», а защита от автозума Safari: с меньшим
     шрифтом iOS увеличивает страницу на каждом фокусе и оставляет её
     сдвинутой. Высота контролов при этом остаётся прежней (палец). */
  input.input,
  input.form-control,
  textarea.input,
  textarea.form-control { font-size: 16px; }
  /* Панель фильтров ниже 720px сворачивалась в одну колонку, и пять полей с
     кнопкой занимали первый экран целиком — до списка, за которым человек и
     пришёл. На телефоне поля идут по двое, поиск — во всю ширину. */
  .filters-bar { padding: 12px; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filters-bar__search,
  .filters-bar .form-field--full,
  /* Кнопка, стоящая прямо в сетке фильтров, занимает строку целиком: в одной
     колонке из двух она выглядела обрезанной по ширине. */
  .filters-bar > .btn { grid-column: 1 / -1; }
  .filters-bar select.input,
  .filters-bar select.form-control { font-size: 13px; padding-right: 26px; }
  .form-grid { gap: 12px; }
  .field__label,
  .form-label { font-size: 12.5px; }

  /* ---- Плавающие элементы ---------------------------------------------- */
  .fb-fab {
    right: 14px; bottom: calc(14px + var(--tabbar-space));
    height: 42px; padding: 0 12px;
  }
  .fb-fab svg { width: 19px; height: 19px; }
  /* Скрытие кнопки на экране чата переехало в app.css: перекрытие «Отправить»
     воспроизводится и на планшете, и на невысоком окне десктопа. */
  .toast-stack { bottom: calc(14px + var(--tabbar-space)); left: 12px; right: 12px; }

  /* ---- Экран переписки: как в мобильном мессенджере ----------------------
     Что было не так (скриншоты с iPhone, 20.08.2026). Экран жил прокруткой
     документа и высотой 100dvh: страница ездила под пальцем вместе с
     композером, а всплывшая клавиатура (о ней dvh ничего не знает) уводила
     поле ввода за нижнюю кромку — между лентой и таб-панелью висела серая
     полоса, «Отправить» не нажималась. Пузыри при этом были карточками с
     полной датой и фамилией в каждом, и на экран влезало три реплики.

     Теперь экран переписки прибит к окну (position: fixed), документ не
     прокручивается вовсе, прокручивается ровно одно — лента. Нижняя кромка
     поднимается на высоту клавиатуры: --kb ставит app.js по visualViewport,
     потому что на iOS фиксированный слой о клавиатуре сам не узнаёт.
     Раскладка держится на flex: высота шапки и композера может быть любой,
     ручных calc-констант тут нет. */
  .page.page--chat:has(.chat-card) {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    height: auto; padding: 0; gap: 0; overflow: hidden;
  }
  /* С клавиатурой экран живёт по ВИДИМОЙ области: iOS сжимает визуальный
     вьюпорт и сдвигает его, чтобы показать поле ввода, — следуем за ним.
     Без клавиатуры вьюпортные величины не трогаем вовсе: inset-0 и так даёт
     ровно экран, а любая мерка (dvh, visualViewport) в установленном
     приложении может оказаться короче — и под композером оставался бы
     пустой хвост. */
  html.kb-open .page.page--chat:has(.chat-card) {
    top: var(--vv-top, 0px);
    bottom: auto;
    height: var(--vv-h, 100dvh);
  }
  /* Общая шапка системы на экране переписки не нужна: в мессенджерах у чата
     своя шапка (назад · собеседник · меню), а второй ряд с гамбургером,
     логотипом и колокольчиком отнимал 54px у ленты и разъезжался с
     клавиатурой. Гамбургер и уведомления — на любом другом экране. */
  html:has(.page--chat .chat-card) .topbar { display: none; }
  /* Колонка разговора (1240px) на телефоне только сужает ленту. */
  .page--chat > * { max-width: none; }
  /* Плашка «укажите почту» висит на КАЖДОЙ странице системы, и на
     фиксированном экране переписки она отъедала треть ленты. Здесь её
     прячем: человек увидит ту же плашку на любом другом экране. */
  .page--chat > .mail-cta { display: none; }
  /* Таб-панель на экране переписки лишняя: внизу композер, наверху стрелка
     «назад». Она отнимала у ленты 58px и ловила тапы рядом с «Отправить».
     :has по .chat-card, а не по .page--chat: у пустого состояния кабинета
     (нет кадровой карточки) переписки на экране нет, и панель нужна. */
  html:has(.page--chat .chat-card) .tabbar { display: none; }
  /* Пока открыт экран переписки, документ не прокручивается и не
     «оттягивается». Руббер-бэнд body на iOS сдвигает визуальный вьюпорт, а
     вместе с ним и весь фиксированный слой чата — со стороны это ровно
     «диалог постоянно прыгает». Прокрутка остаётся ровно одна — лента. */
  html:has(.page--chat .chat-card),
  html:has(.page--chat .chat-card) body {
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
  }
  /* Фон страницы под экраном переписки — цвет композера, а не полотна. Под
     полем ввода на iPhone всегда остаётся полоса: место под «полоску home»,
     плюс кромка, которую в установленном приложении дорисовывает сама iOS.
     Фоном полотна она читалась как чужая серая плашка под композером
     (жалоба «под вводом сообщения пустое пространство»); цветом композера —
     как его продолжение, ровно как в мессенджерах. Лента свой фон задаёт
     сама, её это не трогает. */
  html:has(.page--chat .chat-card) body { background: var(--color-surface); }

  /* Шапка в одну строку: «назад · аватар · имя / статус · ⋮». Разметка шапки
     плоская (стрелка, аватар, h1, p — соседи), поэтому имя над статусом
     ставит grid по областям, а не вложенная колонка; сам grid с 03.09.2026
     живёт в app.css и общий с широким экраном — здесь только величины. */
  .page--chat .page__head--compact {
    flex-wrap: nowrap; gap: 6px; row-gap: 0;
    /* Своя шапка стала верхней на экране — отступ под «чёлку» теперь её. */
    padding: calc(5px + env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 5px max(10px, env(safe-area-inset-left));
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
  }
  .page--chat .page__head--compact > div:first-child { column-gap: 8px; }
  /* Имя на телефоне тоже режем многоточием: тут места нет ни у кого, а бейдж
     роли под этой шириной и так снят строкой ниже. */
  .page--chat .page__head--compact .page__title {
    font-size: 15.5px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block;
  }
  .page--chat .page__head--compact .page__subtitle { font-size: 11.5px; line-height: 1.25; }
  .page--chat .page__head--compact .role-badge { display: none; }
  .page--chat .chat-head-avatar__img { width: 36px; height: 36px; font-size: 14px; }
  .page--chat .chat-back { width: 32px; height: 32px; margin-right: 0; }
  /* Под именем на телефоне помещается ОДИН статус. Когда в строке назван
     адресат — оставляем его: свою точку сотрудник знает и видит в кабинете, а
     «кому уйдёт сообщение» больше не написано нигде. В личной ветке адресата в
     строке нет (его называет заголовок) — там остаётся точка. */
  .page--chat .chat-recipients__place:has(+ .chat-recipients__sep),
  .page--chat .chat-recipients__place + .chat-recipients__sep { display: none; }
  /* Кнопки шапки уезжают в меню «⋮» (initChatHeaderMenu). Без JS остаются на
     месте и переносятся строкой ниже — доступ к ним не теряется. */
  .page--chat .chat-head-menu { position: relative; flex: 0 0 auto; }
  .page--chat .chat-head-menu__toggle { width: 34px; height: 34px; border-radius: 50%; }
  .page--chat .chat-head-menu__toggle svg { width: 18px; height: 18px; }
  .page--chat .chat-head-menu__pop {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 30;
    min-width: 200px; padding: 6px; border-radius: var(--radius-md);
    background: var(--color-surface); border: 1px solid var(--color-border);
    box-shadow: var(--shadow-pop);
  }
  .page--chat .chat-head-menu__pop[hidden] { display: none; }
  .page--chat .chat-head-menu__pop .page__actions { display: flex; flex-direction: column; gap: 4px; }
  .page--chat .chat-head-menu__pop .btn { width: 100%; justify-content: flex-start; }

  /* Карточка переписки на телефоне — не карточка: рамка, поля и скругления
     только съедали ширину ленты. */
  .page--chat .chat-card {
    flex: 1 1 auto; min-height: 0;
    padding: 0; gap: 0; border: 0; border-radius: 0;
    background: transparent; box-shadow: none;
  }
  .page--chat .chat-box {
    /* Полотно переписки — свой токен: пузырь без рамки виден ровно настолько,
       насколько отличается от фона под ним (см. --chat-canvas в app.css). */
    min-height: 0; border: 0; border-radius: 0; background: var(--chat-canvas);
    padding: 8px max(10px, env(safe-area-inset-right)) 10px max(10px, env(safe-area-inset-left));
  }
  .page--chat .chat-switch,
  .page--chat .chat-observe-note,
  .page--chat .chat-card > .cell-muted,
  .page--chat .chat-card > .form-error {
    margin: 6px max(10px, env(safe-area-inset-right)) 0 max(10px, env(safe-area-inset-left));
  }
  .page--chat .chat-observe-note { font-size: 12px; }

  /* Пузыри. Ни рамок, ни полной даты, ни фамилии в каждой реплике: подпись —
     только у первого пузыря серии (её ставит _mark_own), время и галочки —
     мелким в углу, аватар — у последнего пузыря серии. */
  .chat-msg__bubble { max-width: 82%; padding: 7px 11px 5px; border-radius: 16px; }
  .chat-msg__meta { font-size: 12px; gap: 6px; margin-bottom: 1px; }
  .chat-msg__text { font-size: 15px; line-height: 1.36; }
  .chat-msg__stamp { font-size: 10.5px; gap: 4px; }
  .chat-msg__status svg { width: 14px; height: 14px; }
  /* Подпись «прочитано» — это ширина пузыря ради слова, которое уже сказано
     двумя галочками. */
  .chat-msg__read-note { display: none; }
  /* Действия при наведении на телефоне не появляются вовсе — там их даёт
     меню по тапу (initChatMsgMenu собирает пункты из тех же кнопок). */
  .chat-msg__actions { display: none; }
  .chat-msg__avatar { width: 26px; height: 26px; font-size: 11.5px; margin-right: 6px; }
  .chat-msg--own .chat-msg__meta { display: none; }
  /* В диалоге двоих собеседник назван в шапке: ни подписи, ни аватара у
     каждого пузыря — как в личных чатах мессенджеров. */
  .chat-box--dm .chat-msg__meta,
  .chat-box--dm .chat-msg__avatar { display: none; }
  .chat-day { margin: 10px 0 4px; }
  .chat-day__label { font-size: 11px; padding: 2px 10px; }
  /* Панель «выбрано N» всплывает над лентой и на телефоне ложилась прямо
     на композер: поднимаем её над строкой ввода (и над клавиатурой). */
  .chat-select-bar {
    bottom: calc(64px + env(safe-area-inset-bottom) + var(--kb, 0px));
    max-width: calc(100vw - 20px);
  }

  /* Плашка на месте композера (архивный диалог) занимает и его место под
     полоской «домой»: без этого объяснение уезжает в зону свайпа. */
  .page--chat .chat-observe-note--foot {
    margin-bottom: 0;
    padding-bottom: max(10px, calc(env(safe-area-inset-bottom, 0px) - 4px));
  }

  /* Композер: поле-«пилюля», скрепка и круглая кнопка отправки в одну строку. */
  .page--chat .chat-form {
    flex: 0 0 auto; gap: 6px;
    padding: 6px max(10px, env(safe-area-inset-right)) 6px max(10px, env(safe-area-inset-left));
    /* Место под полоску «домой». Берём вырез минус 10px: полный вырез (34pt на
       iPhone) под полем ввода читается пустой полосой, а меньше нельзя — поле
       попадёт в зону свайпа «домой» и перестанет нажиматься. */
    padding-bottom: max(6px, calc(env(safe-area-inset-bottom, 0px) - 10px));
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
  }
  /* Эмодзи-пикер на телефоне не нужен: смайлики есть в системной клавиатуре,
     а 34px в узком композере — это место под текст. */
  .chat-form .chat-emoji { display: none; }
  /* Композер одной строкой: колонкой (правило ≤720px) он забирал у ленты
     ещё 46px высоты. */
  .chat-form__row { flex-direction: row; align-items: flex-end; gap: 6px; flex-wrap: nowrap; }
  .chat-form__tools { gap: 4px; }
  /* Клавиатура закрыла вырез собой — отступ под «домой» больше не нужен. */
  html.kb-open .page--chat .chat-form { padding-bottom: 6px; }
  textarea.chat-form__input { min-height: 42px; max-height: 132px; border-radius: 21px; padding: 10px 14px; }
  .chat-attach { width: 38px; height: 38px; margin-bottom: 2px; }
  .chat-attach svg { width: 20px; height: 20px; }
  /* Кнопка отправки — круг с самолётиком: подпись «Отправить» съедала треть
     строки ввода. Текст остаётся в разметке для скринридера. */
  .chat-send {
    width: 42px; height: 42px; min-height: 42px; padding: 0;
    border-radius: 50%; flex: 0 0 auto; justify-content: center;
  }
  .chat-send__icon { display: block; width: 20px; height: 20px; }
  .chat-send__label {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }

  /* ---- Список чатов -----------------------------------------------------
     Открывался «витриной»: заголовок с подзаголовком, три кнопки во всю
     ширину каждая, поиск, сортировка — и только под всем этим первый контакт.
     На 812px до чатов приходилось скроллить. Теперь шапка в одну строку,
     кнопки — компактным рядом с горизонтальной прокруткой, поиск — под лупой.
     (Подзаголовок и селект сортировки с 20.08.2026 сняты и на десктопе.) */
  .page--chat-list { padding-top: 10px; gap: 10px; }
  .page--chat-list .page__head { align-items: center; gap: 8px; flex-wrap: nowrap; }
  .page--chat-list .page__title { font-size: 20px; }
  .page--chat-list .page__actions {
    flex-wrap: nowrap; gap: 6px; min-width: 0; width: auto; overflow-x: auto;
    /* Полосу прокрутки не показываем: ряд из двух-трёх кнопок, а не список. */
    scrollbar-width: none;
  }
  .page--chat-list .page__actions::-webkit-scrollbar { display: none; }
  /* width: auto перебивает правило «кнопки шапки — во всю ширину» (≤520px в
     app.css): здесь они стоят рядом в прокручиваемом ряду, а не столбиком. */
  .page--chat-list .page__actions .btn {
    flex: 0 0 auto; width: auto; min-height: 34px; padding: 0 11px; font-size: 12.5px;
  }
  .page--chat-list .page__actions .btn svg { width: 15px; height: 15px; }
  /* Поиск живёт под лупой в шапке (initChatListSearch): поле, которого нет
     на экране, не поймает фокус и не откроет клавиатуру само. */
  .page--chat-list .filters-bar { display: none; }
  .page--chat-list.is-searching .filters-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding: 0; gap: 8px; background: none; border: 0; box-shadow: none;
  }
  .chat-search-toggle {
    display: inline-flex; flex: 0 0 auto;
    width: 34px; height: 34px; border-radius: 50%;
  }
  .chat-search-toggle svg { width: 18px; height: 18px; }
  .page--chat-list.is-searching .chat-search-toggle {
    background: var(--color-primary-soft); color: var(--color-primary-dark);
  }
  .page--chat-list .filters-bar__search { grid-column: auto; }

  .chat-list-group + .chat-list-group { margin-top: 12px; }
  .chat-list-group__title { padding: 2px 8px 6px; font-size: 10.5px; }
  .chat-thread__link { padding: 9px 6px; gap: 10px; }
  .chat-thread__name { flex-wrap: nowrap; gap: 6px; min-width: 0; }
  .chat-thread__name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Роль контакта в списке прячем: она есть в карточке человека, а в строке
     обрезалась многоточием и уводила превью на третий этаж. */
  .chat-thread__name .role-badge { display: none; }
  .chat-thread__main .cell-sub {
    font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .chat-thread__preview { font-size: 12.5px; }
  .chat-thread__aside { font-size: 10.5px; text-align: right; }

  /* ---- Вход ------------------------------------------------------------- */
  .signin { padding: 14px; }
  .signin__logo { height: 46px; max-width: 200px; }
  .signin__tagline { font-size: 11px; letter-spacing: .05em; margin-bottom: 16px; }
  .signin__title { font-size: 23px; }
  .signin__subtitle { font-size: 13.5px; margin-top: 6px; }
  .signin__form { gap: 14px; margin-top: 20px; }
  .signin__form .field__label { font-size: 13px; line-height: 18px; }
  .signin__form .input { padding: 12px 15px; border-radius: 13px; }
  .signin__form .input--affixed { padding-left: 42px; }
  .signin__row { font-size: 13px; }
  .signin__row .checkbox { font-size: 13px; }
  .signin__submit { height: 48px; font-size: 15.5px; border-radius: 13px; margin-top: 4px; }
  .signin__hint { font-size: 12px; }
  .auth-shell { padding: 14px; }
  .auth-card { padding: 20px 16px; gap: 14px; }
  .auth-card__title { font-size: 21px; }
}

/* Совсем узкие экраны (iPhone SE/mini и телефоны в масштабе «крупный текст»):
   боковые поля ещё уже, а карточка входа не должна упираться в кромки. */
@media (max-width: 400px) {
  .page { --edge-pad: 12px; }
  .topbar { --edge-pad: 12px; }
  .topbar__brand .brand-logo__img { max-width: 96px; }
  .signin__card { padding: 22px 16px 20px; border-radius: 18px; }
  .metrics,
  .metric-grid,
  .dash-metrics { gap: 7px; }
  .metric-card { padding: 10px; min-height: 86px; }
  .metric-card__value { --metric-value-size: 19px; }
}