/* ============================================================================
FABRIQA OS — СЛОЙ МОБИЛЬНОЙ ВЕРСИИ · vd-v9-mobile.css
----------------------------------------------------------------------------
Подключать ПОСЛЕДНИМ, после base.css, vd-v9.css и vd-v9-inbox.css:
Ни одна строка v9 не правится. Слой работает только на узких экранах;
на десктопе он не даёт ни одного правила, кроме безопасных мелочей
в разделе 12.
ГРАНИЦА: 860px. Это та же граница, на которой в base.css уже схлопывается
.app в одну колонку, — чтобы не заводить вторую точку перелома.
ЧТО ТРЕБУЕТ РАЗМЕТКИ (всё остальное работает как есть) — см. раздел 0.
========================================================================= */
/* ============================================================================
0. ЧТО НУЖНО ДОБАВИТЬ В index.html
----------------------------------------------------------------------------
Пять хуков. Ни один не меняет существующую разметку, только добавляет.
1) ТАБ-БАР. Один статический блок перед закрывающим .app:
Клик — тот же go(s), что и в боковом меню. Кнопка «Ещё» показывает
боковое меню листом снизу: document.body.classList.toggle('m-menu-open').
2) НАЗАД ИЗ ПЕРЕПИСКИ. В .thread-head первым элементом:
Обработчик: document.body.classList.remove('m-thread-open').
В pick(tid) добавить: document.body.classList.add('m-thread-open').
3) КАРТОЧКА КОНТАКТА ЛИСТОМ. В .thread-head последней кнопкой:
Обработчик: document.body.classList.toggle('m-panel-open').
4) ПОЛНОЭКРАННЫЙ ОТВЕТ. Композер на телефоне свёрнут в одну строку.
Перед .composer добавить:
Обработчик: document.body.classList.add('m-composer-open');
В шапке композера — кнопка закрытия с классом .m-composer-close.
5) ПОДПИСИ В КАРТОЧКАХ ТАБЛИЦ. В render-колбэках таблиц, которые важны
на телефоне («Ждут дольше всего», Компании, Контакты, Журнал),
к каждой
добавить data-label с названием колонки:
…
Без data-label карточка тоже соберётся, просто без подписей.
И одна правка в — метатег вьюпорта:
interactive-widget=resizes-content заставляет клавиатуру УМЕНЬШАТЬ
вьюпорт, а не наезжать на него. Без этого клавиатура закрывает поле
ввода в композере, и человек печатает вслепую.
========================================================================= */
/* ============================================================================
1. ВЫСОТА ЭКРАНА И СЕЙФ-ЗОНЫ
----------------------------------------------------------------------------
100vh на мобильном Safari считается по «большому» вьюпорту — тому, что без
адресной строки. Пока строка видна, нижние 60–100 px уезжают за экран,
и нижняя панель оказывается под сгибом. dvh — динамическая высота, она
пересчитывается вместе со строкой. vh оставляем первым как запас
для старых движков.
========================================================================= */
@media (max-width: 860px) {
:root {
--safe-t: env(safe-area-inset-top, 0px);
--safe-b: env(safe-area-inset-bottom, 0px);
--safe-l: env(safe-area-inset-left, 0px);
--safe-r: env(safe-area-inset-right, 0px);
--tabbar-h: 58px;
--header-h: 52px;
/* На телефоне воздуха меньше: 32px по краям съедают треть строки. */
--space-8: 16px;
--space-6: 18px;
}
/* ОБОЛОЧКА ПРИЛОЖЕНИЯ, А НЕ СТРАНИЦЫ.
Документ целиком не прокручивается: высота ровно в экран, а скроллится
только .content внутри. Иначе position: fixed у нижней панели считается
от документа, а не от экрана, и панель уезжает вниз за пределы видимого —
ровно то, чем славится iOS Safari с фиксированными элементами поверх
длинной страницы. Заодно исчезает «резиновый» отскок всей страницы
при прокрутке ленты. */
html, body {
height: 100vh; height: 100dvh;
overflow: hidden;
overscroll-behavior: none;
}
.app {
grid-template-columns: 1fr !important;
height: 100vh; height: 100dvh;
min-height: 0;
overflow: hidden;
}
.main { height: 100%; min-height: 0; }
.content {
flex: 1 1 auto; min-height: 0;
overflow-y: auto; -webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
/* Раздел внутри прокручиваемой колонки не должен сжиматься.
.content — flex-колонка фиксированной высоты, а .section внутри неё —
flex-элемент: по умолчанию он ужимается под контейнер, и карточки
схлопываются в полоски вместо того, чтобы дать колонке прокрутку.
Для «Переписок» поведение обратное — там раздел обязан занять высоту
целиком, поэтому правило разведено по двум селекторам. */
.content:not(.inbox-page) > * { flex: 0 0 auto; }
}
/* ============================================================================
2. НАВИГАЦИЯ: БОКОВОЕ МЕНЮ → НИЖНИЙ ТАБ-БАР
----------------------------------------------------------------------------
Гамбургер прячет навигацию за два тапа и в верхний угол — самое неудобное
место для большого пальца на экране 6 дюймов. Таб-бар держит три главных
раздела в одном тапе и в нижней трети экрана, куда палец достаёт не
перехватывая телефон.
Три вкладки, а не пять: по справке рабочая важность — Переписки, Обзор,
Компании. Остальное живёт под «Ещё» и открывается тем же боковым меню,
только листом снизу — то есть второй навигации не появляется,
она одна и та же.
========================================================================= */
@media (max-width: 860px) {
/* Боковое меню становится листом снизу */
.sidebar {
position: fixed; inset: auto 0 0 0; z-index: 180;
height: auto; max-height: 82dvh;
border-right: 0;
border-radius: var(--r-xl) var(--r-xl) 0 0;
background: var(--bg);
box-shadow: 0 -8px 40px -12px rgba(16,42,58,.35), 0 0 0 1px var(--ring);
padding: 8px 10px calc(10px + var(--safe-b));
transform: translateY(101%);
transition: transform var(--dur-4) var(--ease-out);
overscroll-behavior: contain;
}
body.m-menu-open .sidebar { transform: translateY(0); }
/* Полоска-ручка: показывает, что лист тянется вниз. */
.sidebar::before {
content: ""; display: block; flex: 0 0 auto;
width: 36px; height: 4px; border-radius: 2px;
background: var(--border-strong); margin: 2px auto 10px;
}
body.m-menu-open::after {
content: ""; position: fixed; inset: 0; z-index: 179;
background: color-mix(in srgb, #06121A 42%, transparent);
backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.sidebar .brand { display: none; } /* имя компании уже в шапке */
/* Нижняя панель вкладок */
.tabbar {
position: fixed; inset: auto 0 0 0; z-index: 60;
display: grid; grid-template-columns: repeat(4, 1fr);
height: calc(var(--tabbar-h) + var(--safe-b));
padding-bottom: var(--safe-b);
background: color-mix(in srgb, var(--surface) 88%, transparent);
backdrop-filter: blur(18px) saturate(180%);
-webkit-backdrop-filter: blur(18px) saturate(180%);
border-top: 1px solid var(--border-soft);
}
.tabbar a, .tabbar button {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 3px; position: relative;
font: 500 10.5px/1 var(--font-body);
color: var(--fg-soft);
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
transition: color var(--dur-1) var(--ease);
}
.tabbar .ti { display: grid; place-items: center; }
.tabbar svg { width: 22px; height: 22px; }
.tabbar a.active { color: var(--teal-ink); }
.tabbar a:active, .tabbar button:active { opacity: .55; }
/* Счётчик неотвеченных на вкладке. Число, а не точка: «сколько людей
ждут» — это главная метрика раздела, она должна читаться с полки. */
.tb-cnt {
position: absolute; top: 5px; left: 50%; margin-left: 6px;
min-width: 17px; height: 17px; padding: 0 4px;
border-radius: var(--r-pill);
background: var(--coral); color: #fff;
font: 600 10px/17px var(--font-body); text-align: center;
font-variant-numeric: tabular-nums;
box-shadow: 0 0 0 2px var(--surface);
}
/* Место под таб-бар. Отступ, а не margin: иначе фон обрывается. */
.content { padding-bottom: calc(var(--tabbar-h) + var(--safe-b) + 20px); }
}
@media (min-width: 861px) { .tabbar { display: none; } }
/* ============================================================================
3. ШАПКА
----------------------------------------------------------------------------
На телефоне в шапке остаётся только название экрана и статус данных.
Переключатели темы и вида меню уезжают в лист «Ещё»: они нужны раз в месяц,
а место занимают постоянно.
========================================================================= */
@media (max-width: 860px) {
.header {
height: auto; min-height: var(--header-h);
padding: calc(var(--safe-t) + 8px) 14px 8px;
gap: 10px;
}
#page-title { font-size: 17px; letter-spacing: -.02em; }
.header .actions { gap: 8px; }
.header #theme-toggle, .header #nav-toggle, .header .search { display: none; }
.header .fresh { font-size: 11px; height: 22px; padding: 0 8px; }
}
/* ============================================================================
4. ПАЛЕЦ ВМЕСТО КУРСОРА
----------------------------------------------------------------------------
· Тап-цель 44×44 — минимум Apple HIG. WCAG 2.2 AA требует 24×24, но это
нижний предел допустимого, а не размер, на который стоит целиться.
· font-size: 16px на полях ввода — обязателен. Safari на iOS зумит
страницу при фокусе на поле с меньшим шрифтом и обратно НЕ отзумливает.
Это самая частая поломка мобильных форм и её невозможно не заметить.
· hover-состояния прячем за (hover: hover): на тач-экране :hover залипает
после тапа, и кнопка остаётся подсвеченной, пока не тронешь другую.
========================================================================= */
@media (max-width: 860px) {
* { -webkit-tap-highlight-color: transparent; }
.btn, .btn-primary, .btn-secondary, .btn-ghost, .btn-coral, button.action {
min-height: 44px; padding: 0 16px; font-size: 14px;
touch-action: manipulation;
}
.btn-sm, .btn.sm { min-height: 38px; padding: 0 13px; font-size: 13px; }
.action { width: 44px; height: 44px; }
.btn:active, .btn-primary:active, .btn-ghost:active { transform: scale(.97); }
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
font-size: 16px !important; /* против автозума Safari */
min-height: 46px !important;
padding: 11px 14px !important;
}
textarea { min-height: 120px !important; }
input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; }
.seg { width: 100%; }
.seg button { min-height: 40px; flex: 1; font-size: 13px; }
.pill, .chip, .sla, .lang-tag, .fresh { height: 26px; }
}
@media (hover: none) {
.card.clickable:hover { transform: none; box-shadow: var(--shadow-sm), var(--highlight); }
.thr:hover { background: transparent; }
.thr.active:hover { background: var(--teal-tint); }
table.vd tbody tr:hover { background: transparent; }
.btn:hover, .btn-secondary:hover { transform: none; }
}
/* ============================================================================
5. ПЕРЕПИСКИ: ДВА ЭКРАНА ВМЕСТО ТРЁХ КОЛОНОК
----------------------------------------------------------------------------
Список и переписка — не две колонки, а два состояния одного экрана.
Переключает класс на body, а не адрес страницы: возврат к списку должен
сохранять прокрутку. Список, прокрученный до сотого письма и сбрасываемый
при каждом «назад», — это конец разбора очереди.
========================================================================= */
@media (max-width: 860px) {
.content.inbox-page {
padding: 0;
height: auto; /* высоту даёт flex внутри .main */
overflow: hidden; /* прокручивается лента, а не страница */
display: flex; flex-direction: column;
}
.content.inbox-page > section.active { flex: 1 1 auto; min-height: 0; }
.inbox { height: 100%; }
.inbox, .inbox.with-panel { grid-template-columns: 1fr; }
.inbox-list { border-right: 0; }
.inbox-list-head { padding: 10px 12px; gap: 10px; }
/* Фильтры — горизонтальная лента чипов. Сегментный переключатель на
четыре подписи в 390 px даёт по 80 px на слово: не читается. */
.inbox-list-head .seg {
display: flex; gap: 7px; padding: 0; background: transparent; border: 0;
overflow-x: auto; scroll-snap-type: x proximity;
scrollbar-width: none; margin: 0 -12px; padding: 0 12px;
}
.inbox-list-head .seg::-webkit-scrollbar { display: none; }
.inbox-list-head .seg button {
flex: 0 0 auto; scroll-snap-align: start;
height: 34px; min-height: 34px; padding: 0 14px;
border-radius: var(--r-pill);
background: var(--surface-2); color: var(--fg-muted);
box-shadow: none; white-space: nowrap;
}
.inbox-list-head .seg button.active {
background: var(--teal-tint); color: var(--teal-ink);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--teal) 26%, transparent);
}
.inbox-list-head .row:last-child .btn { display: none; } /* сортировка — в «Ещё» */
/* Строка переписки: крупнее аватар, два слова темы, метки в одну строку. */
.thr { padding: 13px 12px; gap: 12px; grid-template-columns: 44px minmax(0,1fr); }
.thr-ava, .thr-ava .ini { width: 44px; height: 44px; }
.thr-ava .ini { font-size: 15px; }
.ch-badge { width: 20px; height: 20px; }
.ch-badge svg { width: 12px; height: 12px; }
.thr-name { font-size: 15px; }
.thr-subj, .thr-snippet { font-size: 13px; }
.thr-snippet { -webkit-line-clamp: 2; }
.thr-meta { gap: 7px; margin-top: 6px; }
/* Переключение «список ↔ переписка» */
.inbox-thread { display: none; }
body.m-thread-open .inbox-list { display: none; }
body.m-thread-open .inbox .inbox-thread { display: flex; }
.m-back { display: grid; place-items: center; width: 40px; height: 40px;
margin-left: -6px; flex: 0 0 auto; color: var(--fg-muted); }
.m-back svg { width: 22px; height: 22px; }
.thread-head {
padding: 8px 12px; min-height: 56px; gap: 8px;
position: sticky; top: 0; z-index: 5;
}
.thread-head h2 { font-size: 15px; }
.thread-head .sub { font-size: 11.5px; }
/* Кнопки «Взять в работу» и «Готово» на телефоне не подписываем словами —
подпись съедает всю строку. Остаются иконки в 44px, подпись — в листе. */
.thread-head .btn.btn-sm { width: 44px; padding: 0; font-size: 0; }
.thread-head .btn.btn-sm svg { width: 19px; height: 19px; }
.thread-head .sla { font-size: 0; padding: 0 8px; gap: 0; }
.thread-head .sla::after {
content: attr(data-h); font-size: 11.5px; font-weight: 600;
}
.thread-scroll {
padding: 14px 12px; gap: 14px;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
.msg { grid-template-columns: 26px minmax(0,1fr); gap: 8px; max-width: 100%; }
.msg.out { grid-template-columns: minmax(0,1fr) 26px; }
.msg-ava { width: 26px; height: 26px; font-size: 10px; }
.bubble { padding: 12px 13px; }
.bubble-text { font-size: 14.5px; line-height: 1.55; }
.sys-note { font-size: 11px; padding: 5px 10px; }
.attach { width: 100%; }
}
/* ============================================================================
6. КОМПОЗЕР: СВЁРНУТАЯ СТРОКА + ПОЛНОЭКРАННЫЙ ОТВЕТ
----------------------------------------------------------------------------
Композер целиком — тема, два поля, три селектора, вложения — занимает
на телефоне больше половины экрана и не оставляет места переписке,
ради которой человек сюда зашёл. Поэтому: внизу одна строка «Ответить…»,
тап открывает ответ на весь экран.
Так делают Gmail, Superhuman и Missive, и по одной причине: набрать
осмысленный ответ в поле высотой в три строки нельзя, а видеть переписку
во время набора нужно не всегда — нужно ПЕРЕД набором.
========================================================================= */
@media (max-width: 860px) {
.m-reply-bar {
display: flex; align-items: center; gap: 10px;
width: 100%; min-height: 52px; padding: 0 16px;
border-top: 1px solid var(--border-soft);
background: var(--surface);
color: var(--fg-soft); font: 400 14px var(--font-body); text-align: left;
flex: 0 0 auto;
}
.m-reply-bar::after {
content: ""; margin-left: auto; width: 34px; height: 34px; flex: 0 0 auto;
border-radius: 50%; background: var(--brand-grad);
/* стрелка отправки внутри кружка */
-webkit-mask: no-repeat center / 17px url("data:image/svg+xml;utf8,\
");
mask: no-repeat center / 17px url("data:image/svg+xml;utf8,\
");
}
/* Пока пишешь ответ — экран занят ответом. Шапка и нижняя панель на это
время убираются: навигация здесь не нужна, а место нужно (клавиатура
съедает половину экрана). Заодно снимается любой спор за порядок
наложения между sticky-шапкой, фиксированной панелью и листом. */
body.m-composer-open .header,
body.m-composer-open .tabbar,
body.m-panel-open .header, body.m-panel-open .tabbar,
body.m-menu-open .header, body.m-menu-open .tabbar { display: none; }
.composer {
position: fixed; inset: 0; z-index: 200;
background: var(--surface);
padding: calc(var(--safe-t) + 10px) 14px calc(14px + var(--safe-b));
gap: 12px;
transform: translateY(100%);
transition: transform var(--dur-4) var(--ease-out);
overflow-y: auto; overscroll-behavior: contain;
}
body.m-composer-open .composer { transform: translateY(0); }
body:not(.m-composer-open) .composer { pointer-events: none; }
/* Селекторы «с какого ящика» и «на каком языке» — одной строкой,
каждый на половину ширины, крупно. Это решения, которые принимают
ОДИН раз за ответ, но ошибка в них видна клиенту. */
.composer-tabs { flex-wrap: wrap; gap: 8px; }
.composer-tabs .seg { order: 1; width: 100%; }
.composer-tabs select { order: 2; flex: 1 1 46%; min-width: 0; }
.composer-tabs > span[style] { display: none; }
/* Русский текст и предпросмотр — в столбик; предпросмотр не сворачиваем.
Смысл экрана в том, чтобы увидеть, ЧТО уйдёт клиенту, до отправки. */
.composer-body { grid-template-columns: 1fr; gap: 12px; }
.composer textarea { min-height: 140px !important; }
.composer-preview { min-height: 92px; font-size: 15px; }
.composer-foot { gap: 8px; }
.composer-foot .hint { width: 100%; order: 5; font-size: 11.5px; }
.composer-foot #send-btn { flex: 1; min-height: 48px; }
/* Шапка листа: название и крестик. Без неё лист выглядит как экран,
с которого нет выхода — а выход должен быть в постоянном месте. */
.m-composer-head {
display: flex; align-items: center; gap: 10px;
margin: -2px -14px 2px; padding: 0 14px 10px;
border-bottom: 1px solid var(--border-soft);
font: 600 16px var(--font-head); letter-spacing: -.015em;
flex: 0 0 auto;
}
.m-composer-close {
margin-left: auto; width: 40px; height: 40px;
display: grid; place-items: center; color: var(--fg-muted);
}
.m-composer-close svg { width: 22px; height: 22px; }
}
@media (min-width: 861px) { .m-reply-bar, .m-back, .m-panel-btn, .m-composer-close { display: none; } }
/* ============================================================================
7. КАРТОЧКА КОНТАКТА — ЛИСТОМ СНИЗУ
----------------------------------------------------------------------------
Правая колонка на телефон не влезает, но выбрасывать её нельзя: там
ответственный, каналы человека и заметки команды. Значит — по кнопке.
========================================================================= */
@media (max-width: 860px) {
.inbox-panel {
position: fixed; inset: auto 0 0 0; z-index: 190;
max-height: 78dvh; border-left: 0;
border-radius: var(--r-xl) var(--r-xl) 0 0;
box-shadow: 0 -8px 40px -12px rgba(16,42,58,.35), 0 0 0 1px var(--ring);
padding: 8px 16px calc(20px + var(--safe-b));
transform: translateY(101%);
transition: transform var(--dur-4) var(--ease-out);
overscroll-behavior: contain;
}
.inbox.with-panel .inbox-panel { display: flex; } /* перебиваем скрытие из base.css */
body.m-panel-open .inbox-panel { transform: translateY(0); }
.inbox-panel::before {
content: ""; display: block; flex: 0 0 auto;
width: 36px; height: 4px; border-radius: 2px;
background: var(--border-strong); margin: 2px auto 14px;
}
body.m-panel-open::after {
content: ""; position: fixed; inset: 0; z-index: 189;
background: color-mix(in srgb, #06121A 42%, transparent);
}
}
/* ============================================================================
8. ОБЗОР
========================================================================= */
@media (max-width: 860px) {
.card.hero-kpi { padding: 18px; gap: 18px; }
.hero-kpi-val { font-size: 44px; }
.hero-kpi-side { grid-template-columns: 1fr 1fr; gap: 10px; }
.hero-kpi-side .sub { padding: 10px 12px; }
.sub-val { font-size: 16px; }
/* Плитки каналов — по две в ряд. По одной — экран превращается в лифт;
по три — цифра становится мельче подписи. */
.ch-tiles { grid-template-columns: 1fr 1fr; gap: 10px; }
.ch-tile { padding: 13px; gap: 10px; }
.ch-tile .n { font-size: 19px; }
.ch-tile .l { font-size: 11.5px; }
.band { gap: 12px; }
.band-head h2 { font-size: 15px; }
.card { padding: 16px; border-radius: var(--r); }
.callout { padding: 14px; font-size: 13px; }
}
/* ============================================================================
9. ТАБЛИЦЫ → КАРТОЧКИ-СТРОКИ
----------------------------------------------------------------------------
Горизонтальная прокрутка таблицы на телефоне читается плохо: чтобы
сопоставить имя из первой колонки со значением из пятой, надо возить
экран туда-обратно и держать строку в памяти. Поэтому строка становится
карточкой: сверху — то, что в первой ячейке (имя, кто), ниже — пары
«подпись → значение».
Подпись берётся из data-label. Если его нет, карточка соберётся всё равно,
просто без подписей — ничего не сломается.
Числа остаются табличными и по правому краю: правило v9 действует и здесь,
в карточке это выравнивание по правому краю строки.
========================================================================= */
@media (max-width: 860px) {
.table-wrap { overflow-x: visible; }
table.vd { display: block; }
table.vd thead { display: none; }
table.vd tbody { display: block; }
table.vd tbody tr {
display: block;
padding: 13px 14px;
border-bottom: 1px solid var(--border-soft);
}
table.vd tbody tr:last-child { border-bottom: 0; }
table.vd tbody tr.breach { box-shadow: inset 3px 0 0 var(--coral); }
table.vd tbody tr.breach td:first-child { box-shadow: none; }
table.vd tbody td {
display: flex; align-items: baseline; justify-content: space-between;
gap: 12px; padding: 3px 0; border: 0; text-align: right;
}
table.vd tbody td::before {
content: attr(data-label);
font: 400 12px/1.4 var(--font-body); color: var(--fg-soft);
text-align: left; flex: 0 0 auto;
}
table.vd tbody td:empty { display: none; }
/* Первая ячейка — заголовок карточки: во всю ширину, слева, крупнее. */
table.vd tbody td:first-child {
display: block; text-align: left;
font: 500 15px/1.35 var(--font-head); color: var(--fg);
padding: 0 0 6px;
}
table.vd tbody td:first-child::before { display: none; }
table.vd tbody td:first-child .sub-note { font-size: 12.5px; margin-top: 3px; }
/* Последняя ячейка обычно кнопка-стрелка: на карточке она не нужна,
карточка кликается целиком. */
table.vd tbody td:last-child:has(> button.action) { display: none; }
table.vd tfoot { display: block; }
table.vd tfoot td {
display: flex; justify-content: space-between; gap: 12px;
padding: 12px 14px; border: 0;
}
table.vd tfoot tr { display: block; border-top: 1px solid var(--border); }
.table-empty, .search-empty { padding: 40px 18px; }
}
/* ============================================================================
10. МОДАЛКИ → ЛИСТЫ СНИЗУ
----------------------------------------------------------------------------
Окно по центру на телефоне неудобно: кнопки оказываются в верхней половине
экрана, куда палец не достаёт. Лист снизу решает это бесплатно.
========================================================================= */
@media (max-width: 860px) {
.modal-bg, .resv-edit-overlay { align-items: flex-end; padding: 0; }
.modal, .resv-edit-card {
width: 100% !important; max-width: none;
max-height: 92dvh;
border-radius: var(--r-xl) var(--r-xl) 0 0;
padding-bottom: var(--safe-b);
}
.modal-head { padding: 16px 18px; }
.modal-body { padding: 16px 18px; }
.modal-foot { padding: 14px 18px calc(14px + var(--safe-b)); }
.modal-foot .btn, .modal-foot .btn-primary { flex: 1; }
.toast {
left: 12px; right: 12px; bottom: calc(var(--tabbar-h) + var(--safe-b) + 12px);
min-width: 0; max-width: none;
}
}
/* ============================================================================
11. ВХОД
========================================================================= */
@media (max-width: 860px) {
.login-wrap {
padding: calc(var(--safe-t) + 24px) 16px calc(var(--safe-b) + 24px);
align-items: flex-start;
}
.login-card { padding: 24px 20px; border-radius: var(--r-lg); margin-top: 8dvh; }
.login-card h1 { font-size: 20px; }
.login-card .btn-primary { min-height: 50px !important; }
}
/* ============================================================================
12. МЕЛОЧИ, БЕЗОПАСНЫЕ НА ЛЮБОЙ ШИРИНЕ
========================================================================= */
/* Длинный адрес или домен не должен растягивать карточку за край экрана. */
.thr-name, .panel-ch a, .bubble-text, .m-reply-bar { overflow-wrap: anywhere; }
/* Инерционная прокрутка внутри панелей на iOS. */
.inbox-list-scroll, .thread-scroll, .inbox-panel, .modal-body {
-webkit-overflow-scrolling: touch;
}
@media (prefers-reduced-motion: reduce) {
.sidebar, .composer, .inbox-panel { transition: none !important; }
.btn:active, .btn-primary:active { transform: none; }
}
/* ----------------------------------------------------------------------------
13. ДОЧИНКА (интеграция): v9 держит поля на 13.5px с !important — перебиваем
тем же оружием, иначе Safari зумит страницу при фокусе и не отзумливает.
---------------------------------------------------------------------------- */
@media (max-width: 860px) {
body input:not([type="checkbox"]):not([type="radio"]),
body select,
body textarea,
body .composer textarea,
body .search {
font-size: 16px !important;
}
}
/* 13а. Открытая переписка: таб-бар прячется (как в iOS Mail) — иначе он
перекрывает строку «Ответить…». Списку — отступ под таб-бар. */
@media (max-width: 860px) {
body.m-thread-open .tabbar { display: none; }
.inbox-list-scroll { padding-bottom: calc(var(--tabbar-h) + var(--safe-b)); }
}
/* На десктопе шапка листа ответа не нужна вовсе. */
@media (min-width: 861px) { .m-composer-head { display: none; } }