:root {
color-scheme: light dark;
--accent: #3390ec; /* синий Telegram */
--bg: #ffffff;
--bg-chat: #e6ebee; /* фон ленты сообщений */
--bubble-in: #ffffff;
--bubble-out: #eeffde; /* зелёный «свои» как в Telegram */
--text: #000000;
--muted: #707579;
--line: #e4e4e5;
--header: #ffffff;
}
/* Тёмная тема. Значения одни и те же в двух местах, и это осознанно: своя
тема должна побеждать системную, а через одну переменную такое в CSS не
выражается. data-theme ставит короткий скрипт в шапке — до первой отрисовки,
иначе на секунду мигает белым. */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--bg: #17212b;
--bg-chat: #0e1621;
--bubble-in: #182533;
--bubble-out: #2b5278;
--text: #ffffff;
--muted: #8a949d;
--line: #101921;
--header: #17212b;
}
}
:root[data-theme="dark"] {
color-scheme: dark;
--bg: #17212b;
--bg-chat: #0e1621;
--bubble-in: #182533;
--bubble-out: #2b5278;
--text: #ffffff;
--muted: #8a949d;
--line: #101921;
--header: #17212b;
}
:root[data-theme="light"] { color-scheme: light; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* hidden обязан побеждать: любое display в правилах ниже перебивает его
по специфичности, и «скрытый» элемент остаётся на экране пустым. */
[hidden] { display: none !important; }
/* Двойной тап больше не зумит страницу — это мессенджер, а не документ. */
html { touch-action: manipulation; }
/* Высота корня = настоящая высота окна. Нужна странице переписки: см. .chatpage. */
html { height: 100%; }
body {
margin: 0; background: var(--bg); color: var(--text);
font: 16px/1.35 -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
}
/* ---------- вход ---------- */
/* Вход: два способа друг под другом, а не бок о бок. В строку они не влезали
на телефон и уезжали за край экрана. */
.center {
display: flex; flex-direction: column; min-height: 100vh;
align-items: center; justify-content: center;
padding: 24px 16px; padding-bottom: max(24px, env(safe-area-inset-bottom));
}
.card {
display: flex; flex-direction: column; gap: 12px; padding: 0;
width: 100%; max-width: 320px;
}
.card + .or, .or + .card { margin-top: 18px; }
.or {
display: flex; align-items: center; gap: 10px;
width: 100%; max-width: 320px; color: var(--muted); font-size: 13px;
}
.or::before, .or::after {
content: ""; flex: 1; height: 1px; background: var(--line);
}
.card h1 { text-align: center; }
.error { color: #e53935; margin: 0; text-align: center; }
/* Сообщение, от которого в базе не осталось ни текста, ни вложения. Бледно и
курсивом: это не слова гостя, а наша приписка о том, что смотреть надо в
самом мессенджере. */
.no-body { color: var(--muted); font-style: italic; }
/* Кнопка «Выезд…» с родным календарём внутри. Само поле прячем: на телефоне
оно рисуется по-своему в каждом браузере и в ряд чипсов не встаёт, а
нажатие по кнопке всё равно открывает календарь. */
.chip-date { position: relative; overflow: hidden; }
.chip-date input[type="date"] {
position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%;
border: 0; padding: 0;
}
/* Крестик «снять день» поверх невидимого поля: иначе касание уходит в поле и
открывает календарь. Живёт только у включённого чипа. */
.chip-date.on { padding-right: 30px; }
.chip-date .chip-x {
position: absolute; top: 0; bottom: 0; right: 0; z-index: 1;
width: 30px; height: auto; padding: 0; border: 0; border-radius: 0;
background: transparent; color: inherit; font-size: 13px; line-height: 1;
}
/* Запасной путь на втором шаге входа. Нарочно тихая: главная кнопка тут одна
— «Войти», а «прислать на почту» нужна, только когда телеграм молчит. */
button.quiet {
background: transparent; color: var(--muted);
border: 1px solid var(--line); font-size: 13px;
}
/* ---------- шапка ---------- */
header {
display: flex; gap: 10px; align-items: center;
padding: 10px 14px; padding-top: max(10px, env(safe-area-inset-top));
background: var(--header); border-bottom: 1px solid var(--line);
position: sticky; top: 0; z-index: 5;
}
h1 { font-size: 19px; margin: 0; flex: 1; font-weight: 600; min-width: 0; }
/* Значков в шапке пять, и выпадающий список аккаунтов вытеснял последний за
край экрана. Пусть ужимается он, а кнопки остаются целыми. */
#account-filter {
min-width: 0; flex: 0 1 auto; max-width: 42vw;
overflow: hidden; text-overflow: ellipsis;
}
header .gear { flex: none; }
.badge:not(:empty) {
background: var(--accent); color: #fff; border-radius: 12px;
padding: 1px 8px; font-size: 13px; font-weight: 500; vertical-align: middle;
}
input, button, select { font: inherit; }
input, select {
padding: 10px 12px; border-radius: 10px;
border: 1px solid var(--line); background: var(--bg); color: var(--text);
}
button {
padding: 10px 14px; border: 0; border-radius: 10px;
background: var(--accent); color: #fff; cursor: pointer;
}
select { padding: 6px 10px; font-size: 16px; } /* 16px — без зума iPhone при фокусе */
#enable-push {
display: block; width: calc(100% - 28px); margin: 10px 14px;
background: var(--accent); font-size: 15px;
}
#enable-push.hint { background: transparent; color: var(--muted); font-size: 14px;
border: 1px solid var(--line); cursor: default; }
/* ---------- список чатов ---------- */
ul { list-style: none; margin: 0; padding: 0; }
.chat a {
display: grid; grid-template-columns: 48px 1fr;
grid-template-areas: "av row1" "av item" "av row2" "av acc";
column-gap: 12px; align-items: center;
padding: 9px 14px; text-decoration: none; color: inherit;
}
.chat + .chat a { border-top: 1px solid var(--line); }
.chat a:active { background: var(--bg-chat); }
.av-wrap { grid-area: av; position: relative; width: 48px; height: 48px;
flex-shrink: 0; }
.chan {
position: absolute; right: -3px; bottom: -3px;
width: 20px; height: 20px; border-radius: 50%;
background: var(--bg); padding: 1.5px;
display: flex; align-items: center; justify-content: center;
}
/* img — для иконок, вшитых картинкой (Циан); остальные значки SVG. */
.chan svg, .chan img { width: 100%; height: 100%; display: block;
border-radius: 50%; }
.chatpage header .av-wrap { width: 36px; height: 36px; }
.chatpage header .chan { width: 15px; height: 15px; font-size: 8px; }
.avatar {
width: 48px; height: 48px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: #fff; font-size: 17px; font-weight: 600; letter-spacing: .5px;
flex-shrink: 0;
}
.avatar.photo { background-size: cover; background-position: center; }
.avatar.small { width: 36px; height: 36px; font-size: 14px; }
/* min-width:0 обязателен: без него flex-элемент с длинным текстом отказывается
сжиматься, строка распирается и залезает на соседей. */
.row1 { grid-area: row1; display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.row2 { grid-area: row2; display: flex; align-items: center; gap: 8px; min-width: 0; }
/* Обычный вес у всех: раньше было 600 против 700 у непрочитанного — разница
на телефоне неразличима, и весь список выглядел непрочитанным.
Признак непрочитанного — синий счётчик, как в Telegram. */
.chat .title { font-weight: 500; flex: 1; min-width: 0; overflow: hidden;
text-overflow: ellipsis; white-space: nowrap; }
.chat .time { font-size: 12px; color: var(--muted); flex-shrink: 0; }
.chat .preview {
flex: 1; min-width: 0; font-size: 15px; color: var(--muted);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat .preview .mine { color: var(--accent); }
.chat .count {
background: var(--accent); color: #fff; border-radius: 11px;
min-width: 22px; height: 22px; padding: 0 6px; font-size: 13px; font-weight: 500;
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.chat .account { grid-area: acc; font-size: 12px; color: var(--muted); opacity: .8; }
.chat.unread .title { font-weight: 700; }
.chat.unread .preview { color: var(--text); }
/* Кнопка — сосед ссылки во flex, а не наложение поверх неё:
иначе она перекрывает превью и счётчик непрочитанного. */
.chat { display: flex; align-items: center; }
.chat > a { flex: 1; min-width: 0; }
.noreply {
flex-shrink: 0; margin: 0 14px 0 4px;
width: 36px; height: 36px; padding: 0; border-radius: 50%;
font-size: 17px; line-height: 1;
background: transparent; color: var(--muted); border: 1px solid var(--line);
}
.noreply:active { background: var(--accent); color: #fff; border-color: var(--accent); }
.gear { text-decoration: none; font-size: 20px; color: var(--muted); padding: 0 2px; }
/* ---------- настройки ---------- */
.settings section { padding: 14px; border-bottom: 1px solid var(--line); }
.settings h2 { font-size: 14px; text-transform: uppercase; letter-spacing: .5px;
color: var(--muted); margin: 0 0 10px; font-weight: 600; }
.settings .note { font-size: 13px; color: var(--muted); margin: 8px 0 0; }
.settings code { font-size: 12px; word-break: break-all; }
.settings #enable-push { width: 100%; margin: 0; }
.accounts li { display: grid; grid-template-columns: 10px 1fr auto;
grid-template-areas: "dot label state" ". phone state";
gap: 2px 10px; align-items: center; padding: 8px 0;
border-bottom: 1px solid var(--line); }
.accounts li:last-child { border-bottom: 0; }
.accounts .dot { grid-area: dot; width: 8px; height: 8px; border-radius: 50%; }
.accounts .dot.ok { background: #4caf50; }
.accounts .dot.bad { background: #e53935; }
.accounts .label { grid-area: label; font-weight: 600; }
.accounts .phone { grid-area: phone; font-size: 13px; color: var(--muted); }
.accounts .state { grid-area: state; font-size: 13px; color: var(--muted); }
button.danger { background: transparent; color: #e53935;
border: 1px solid var(--line); width: 100%; }
/* ---------- переписка ---------- */
/* Высоту берём из «видимой области», а не из окна. На айфоне полоса браузера
прячется при прокрутке, и окно оказывается выше того, что реально видно:
под строкой ввода зияла пустота, а стоило потянуть страницу — она
схлопывалась. Отсюда 100dvh.
Но на андроиде в установленном приложении Chrome врёт в другую сторону:
100dvh = 787 при окне 730 — он прибавляет высоту своей панели адреса,
которой в приложении нет вовсе (снято с Samsung, Chrome 152, standalone).
Страница выходила на 57px выше экрана, и строка ввода целиком уезжала за
нижний край. Поэтому ещё и не выше настоящего окна: 100% от html — это
documentElement.clientHeight, и он там честный. На айфоне в приложении
обе величины равны, min ничего не меняет.
Клавиатура ни одну из этих величин не уменьшает: она лишь урезает видимую
область и сдвигает её к полю ввода. На это время страницу сажает на
видимую область скрипт — top и height строкой стиля, см.
перепискаПодКлавиатурой в app.js; для top и нужен position: relative ниже. */
.chatpage { display: flex; flex-direction: column; height: 100dvh;
height: min(100dvh, 100%); }
.chatpage header .who { display: flex; flex-direction: column; line-height: 1.2; }
/* Обёртка «аватар + имя» (08.10.2026) нужна только «стеклу» — без него её как
бы нет, и порядок в шапке прежний: назад, аватар, поиск, колокольчик, имя. */
.chatpage header .who-pill { display: contents; }
.chatpage header .back { order: 0; }
.chatpage header .av-wrap { order: 1; }
.chatpage header #find-btn { order: 2; }
.chatpage header #remind { order: 3; }
.chatpage header .who { order: 4; }
.chatpage header .lead-head { order: 5; }
.chatpage header .name { font-weight: 600; font-size: 17px; }
.chatpage header .account { font-size: 12px; color: var(--muted); }
.back { text-decoration: none; font-size: 30px; color: var(--accent);
line-height: 1; padding: 0 6px 4px 0; }
#feed {
flex: 1; overflow-y: auto; background: var(--bg-chat);
padding: 12px 10px; display: flex; flex-direction: column; gap: 4px;
/* Дотянул ленту до края — прокрутка не должна переходить на страницу:
при открытой клавиатуре это уводит шапку (см. touchmove в 15-клавиатура.js). */
overscroll-behavior-y: contain;
}
.msg {
position: relative; max-width: 80%; width: fit-content;
padding: 6px 10px 6px 10px; border-radius: 12px;
/* Долгое нажатие открывает меню — выделять текст при этом нельзя: лупа с
«копировать» перекрывает кнопки. Копирование есть отдельным пунктом. */
-webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
background: var(--bubble-in); box-shadow: 0 1px 1px rgba(0,0,0,.08);
font-size: 16px; word-wrap: break-word; overflow-wrap: anywhere;
}
.msg.in { align-self: flex-start; border-bottom-left-radius: 4px; }
.msg.out { align-self: flex-end; background: var(--bubble-out);
border-bottom-right-radius: 4px; }
.msg .text { white-space: pre-wrap; }
.msg .meta { font-size: 11px; color: var(--muted); float: right;
margin: 6px 0 0 8px; user-select: none; }
/* Ещё не ушедшее сообщение заметно бледнее отправленного: по одному только
значку в углу разница не читается, а на бегу нужно видеть её боковым
зрением. */
.msg.out.pending { opacity: .6; }
/* Настоящий вращающийся кружок вместо мигающего символа: мигание читается
как ошибка, вращение — как работа. Рисуем рамкой, чтобы не тащить картинку. */
.ticks.sending {
display: inline-block; width: 9px; height: 9px; vertical-align: -1px;
border: 1.5px solid currentColor; border-top-color: transparent;
border-radius: 50%; animation: вертушка .8s linear infinite;
opacity: .8; margin-left: 2px;
}
@keyframes вертушка { to { transform: rotate(360deg); } }
/* Кто отключил анимации в системе — тому статичный кружок, а не мельтешение. */
@media (prefers-reduced-motion: reduce) {
.ticks.sending { animation: none; border-top-color: currentColor; opacity: .5; }
}
.msg.out.failed { background: #e57373; color: #fff; }
.msg.out.failed .meta, .msg.out.failed .err { color: rgba(255,255,255,.85); }
/* Постоянный размер рамки: картинка грузится лениво, и без фиксированной
высоты лента дёргалась бы под пальцем по мере подгрузки. */
img.media, video.media {
width: 240px; max-width: 100%; height: 180px; object-fit: cover;
border-radius: 8px; display: block; margin: -2px 0 4px;
background: rgba(128,128,128,.18);
}
/* «Переслано от …» — зелёная строка над содержимым, как в Telegram. */
.msg .fwd { display: block; font-size: 12px; color: #2e7d32; margin: 0 0 4px; line-height: 1.2; }
.msg.out .fwd { color: #1e6b2e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .msg .fwd { color: #93d69a; } }
:root[data-theme="dark"] .msg .fwd { color: #93d69a; }
/* Фото с известными размерами: рамка по пропорциям (ширина и высота заданы
inline из рамкаФото), как в Telegram — вертикальный скриншот высокий,
горизонтальное фото широкое, ничего не обрезается. */
img.media.photo.sized { object-fit: contain; max-width: 100%; }
/* Крошка-заглушка растянута под рамку и слегка размыта; сама картинка
ложится сверху, когда загрузится. */
img.media.photo.blurred { background-color: transparent; }
/* Внутри формы поля ввода, над её верхом: поле растёт с текстом, и отсчёт
от низа страницы прятал кнопку под полем со второй строки (аудит
17.09.2026). Селекторы с #composer — иначе побеждает «#composer button». */
#composer #scroll-down {
position: absolute; right: 12px; bottom: calc(100% + 12px);
width: 40px; height: 40px; padding: 0; border-radius: 50%;
font-size: 20px; line-height: 1;
background: var(--header); color: var(--accent);
box-shadow: 0 2px 8px rgba(0,0,0,.2);
opacity: 0; pointer-events: none; transition: opacity .15s;
}
#composer #scroll-down.shown { opacity: 1; pointer-events: auto; }
/* Над полем бывают плашки «в ответ на» (~46px с отступом) и «пишет ответ»
(~38px) — кнопка поднимается над ними, иначе ложилась на крестик «не
отвечать» (08.10.2026). */
#quote-bar:not([hidden]) ~ #composer #scroll-down { bottom: calc(100% + 58px); }
#others-draft:not([hidden]) ~ #composer #scroll-down { bottom: calc(100% + 50px); }
#others-draft:not([hidden]) ~ #quote-bar:not([hidden]) ~ #composer #scroll-down { bottom: calc(100% + 96px); }
.chatpage { position: relative; top: 0; }
/* Под клавиатурой страницу сажает на видимую область скрипт (см.
перепискаПодКлавиатурой в app.js). Браузер рисует сдвиг области анимацией
в четверть секунды, а сообщает о нём сразу конечный — переезжаем той же
анимацией, чтобы шапка на экране не двигалась. Только на телефоне: на
компьютере высота меняется от окна, и ехать ей незачем. */
@media (hover: none) and (pointer: coarse) {
.chatpage { transition: top .25s ease-in-out, height .25s ease-in-out; }
}
/* Полоска «загружаю более раннее».
До этой правки у неё не было НИ ОДНОГО правила стилей, и стояла она обычным
блоком ПОСЛЕ ленты. Пока она видна, лента (flex:1) ровно на её высоту
короче — а значит содержимое, прижатое к низу, дёргается дважды: когда
полоска появилась и когда исчезла. Между этими двумя мгновениями проходит
целый поход в сеть: показ идёт ДО fetch, скрытие в finally после него.
На айфоне это и есть «при открытии некоторых чатов сообщения один раз слегка
подпрыгивают». Поймал оператор записью экрана; ни один замер до этого не
помог, потому что искали изменение высоты СОДЕРЖИМОГО, а менялась высота
самой ленты. Различитель тоже сходится: полоска показывается только там, где
есть что подгружать сверху, то есть в переписках длиннее шестидесяти
сообщений.
Теперь она висит НАД лентой и в раскладке места не занимает вовсе, поэтому
подвинуть ничего не может. Отступ снизу тот же, что у кнопки «вниз», — он
уже выверен по высоте поля ввода. */
#composer #load-older {
position: absolute; left: 50%; bottom: calc(100% + 12px); transform: translateX(-50%);
z-index: 4; pointer-events: none;
padding: 5px 12px; border-radius: 14px;
background: var(--header); color: var(--muted); font-size: 13px;
box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}
/* Стикер — без пузыря, как в Telegram */
.msg.bare { background: none; box-shadow: none; padding: 2px 0; max-width: 60%; }
.msg.bare .meta { color: var(--muted); }
.sticker { width: 160px; height: 160px; object-fit: contain; display: block; }
.file { color: var(--accent); text-decoration: none; }
/* Документ с превью: первая страница PDF слева, имя файла справа — как в
Telegram. Пока картинка не приехала (или её нет вовсе), ряд выглядит как
прежняя строка со скрепкой: класс has-page ставит скрипт по загрузке. */
.file.with-page { display: flex; align-items: center; gap: 8px; }
.file .page {
width: 44px; height: 58px; object-fit: cover; object-position: top center;
border-radius: 6px; border: 1px solid var(--line); background: #fff;
flex: 0 0 auto;
}
.file .nm { min-width: 0; word-break: break-word; }
/* Со страницей скрепка лишняя: картинка и так говорит, что это файл. */
.file .clip { margin-right: 4px; }
.file.has-page .clip { display: none; }
.msg .err { display: block; font-size: 12px; margin-top: 2px; }
.retry { font-size: 12px; padding: 3px 10px; margin-top: 6px;
background: rgba(255,255,255,.25); }
#composer {
display: flex; gap: 6px; align-items: center; padding: 4px 10px;
/* Полоса под полем — место домашней «палочки» айфона. Полный отступ там
лишний: строка ввода и без того отодвинута собственным полем, и внизу
зияла пустая белая полоса в палец высотой. Оставляем ровно столько,
чтобы палец не попадал в системный жест. */
padding-bottom: max(4px, calc(env(safe-area-inset-bottom) - 22px));
/* Подложка тянется до самого низа экрана: иначе под строкой видна белая
полоса фона страницы — та самая, что не давала покоя. */
box-shadow: 0 40px 0 var(--header);
background: var(--header); border-top: 1px solid var(--line);
}
/* Поле растёт вместе с текстом, как в телеграме: длинную ссылку или абзац
нельзя править вслепую в одну строку. Потолок — ниже (~15 видимых строк
при border-box), дальше поле прокручивается внутри себя. */
#composer #text {
flex: 1; min-width: 0; border-radius: 20px; padding: 11px 16px;
/* До шестнадцати строк поле растёт, дальше прокручивается внутри себя.
Тексты для гостей длинные, с абзацами, и править их в окошко на шесть
строк — значит не видеть, что пишешь. */
overflow-y: auto; max-height: 21.6em; line-height: 1.35;
font: inherit; font-size: 16px; /* меньше 16px — iOS зумит страницу при фокусе */
border: 1px solid var(--line); background: var(--bg); color: var(--text);
white-space: pre-wrap; word-break: break-word; outline: none;
-webkit-user-select: text; user-select: text;
}
/* Подсказка вместо placeholder: у contenteditable его нет. */
#composer #text:empty::before {
content: attr(data-placeholder); color: var(--muted); pointer-events: none;
}
#composer { align-items: flex-end; } /* кнопки держатся низа, поле растёт вверх */
#composer button { border-radius: 50%; width: 42px; height: 42px; padding: 0;
font-size: 17px; flex-shrink: 0; }
#composer #plus {
background: transparent; color: var(--muted); font-size: 26px;
font-weight: 300; line-height: 1; position: relative;
}
#attach-bar, #schedule-bar {
display: flex; align-items: center; gap: 10px;
padding: 8px 12px; font-size: 14px;
background: var(--header); border-top: 1px solid var(--line); color: var(--muted);
}
#attach-bar span, #schedule-bar label { flex: 1; min-width: 0;
overflow: hidden; text-overflow: ellipsis;
white-space: nowrap; }
#attach-bar button, #schedule-bar button {
width: 28px; height: 28px; padding: 0; font-size: 14px;
background: transparent; color: var(--muted); border: 1px solid var(--line);
border-radius: 50%; flex-shrink: 0;
}
#schedule-bar input { padding: 6px 8px; font-size: 14px; margin-left: 6px; }
/* Техническая приписка моста («бронь оформлена 12.09 в 16:45»): отдельной
бледной строкой — это не слова гостя, а пометка системы. */
.msg .tech { display: block; font-size: 11px; color: var(--muted); margin-top: 3px; }
.msg .scheduled { display: block; font-size: 12px; opacity: .85; margin-top: 2px; }
/* Отложенная отправка: таймер рядом с «отправить», как в Telegram */
#sched-badge {
position: absolute; top: -2px; right: -4px;
background: var(--accent); color: #fff; border-radius: 9px;
font-size: 10px; line-height: 1; padding: 3px 5px; font-weight: 600;
}
#schedule-pop {
position: absolute; right: 10px; bottom: 68px; z-index: 10;
min-width: 210px; max-width: calc(100vw - 20px);
background: var(--header); border: 1px solid var(--line); border-radius: 14px;
padding: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.28);
display: flex; flex-direction: column; gap: 6px; font-size: 15px;
}
#schedule-pop .title { font-size: 12px; color: var(--muted);
text-transform: uppercase; letter-spacing: .4px;
padding: 2px 4px 4px; }
#schedule-pop .quick {
background: transparent; color: var(--text); text-align: left;
padding: 10px 12px; border-radius: 10px; font-size: 15px;
}
#schedule-pop .quick:active { background: var(--bg-chat); }
#schedule-pop .custom { display: flex; flex-direction: column; gap: 6px;
font-size: 12px; color: var(--muted);
padding: 6px 4px 2px; border-top: 1px solid var(--line); }
#schedule-pop .custom input { width: 100%; font-size: 16px; color: var(--text); } /* 16px — без зума на iPhone */
#schedule-pop .row { display: flex; gap: 8px; }
#schedule-pop button { width: auto; height: auto; border-radius: 8px;
padding: 8px 14px; font-size: 14px; }
#sched-clear { background: transparent; color: var(--muted);
border: 1px solid var(--line); }
.msg .scheduled button { width: auto; height: auto; border-radius: 8px;
padding: 2px 8px; font-size: 11px; margin-left: 6px;
background: rgba(255,255,255,.3); color: inherit; }
/* Настройки */
.toggle { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.toggle input { width: 20px; height: 20px; }
button.wide { width: 100%; }
.settings textarea, .settings input:not([type=checkbox]), .settings select {
width: 100%; font: inherit; padding: 10px 12px; border-radius: 10px;
border: 1px solid var(--line); background: var(--bg); color: var(--text);
}
.msg .ticks { opacity: .7; }
.msg .ticks.read { color: #4fae4e; opacity: 1; }
/* Две галочки ставим внахлёст: врозь они читаются как два отдельных значка,
а это один знак «прочитано». Правый отступ возвращаем, чтобы съеденное
letter-spacing место не липло к краю пузыря. */
.msg .ticks.read { letter-spacing: -0.32em; padding-right: 0.32em; }
.msg.out .ticks.read { color: #59b96a; }
.msg .edited { font-size: 11px; color: var(--muted); margin-left: 6px; }
/* Кто отправил — тише времени: подпись нужна, когда её ищут глазами, и не
должна спорить с текстом сообщения. */
.msg .by {
font-size: 11px; color: var(--muted); opacity: .75;
float: right; margin: 6px 0 0 8px; user-select: none;
}
/* Долгое нажатие вместо клика: курсор-указатель обманывал бы. */
.msg.out[data-sent="1"] { cursor: default; -webkit-touch-callout: none; }
/* Окно ввода: prompt() браузера однострочный и режет длинный текст */
.modal-back {
position: fixed; inset: 0; z-index: 100;
background: rgba(0,0,0,.45);
display: flex; align-items: flex-end; justify-content: center;
padding: 12px; padding-bottom: max(12px, env(safe-area-inset-bottom));
/* Страница растянута под статус-бар (viewport-fit=cover): высокое окно,
отцентрованное в видимой над клавиатурой области, верхом заезжало под
часы. Сверху отступаем на высоту статус-бара. */
padding-top: max(12px, env(safe-area-inset-top));
/* На iPhone клавиатура не сжимает окно страницы, а сдвигает его вверх, и
всё, что стоит fixed, уезжает под статус-бар. Подложку сажаем на
видимую область (visualViewport, см. подогнатьОкна в app.js) — окна
внутри центрируются уже в ней и, если не влезают, прокручиваются. */
box-sizing: border-box;
/* Подложка обрезана ровно по верху клавиатуры, а клавиатура iOS 26 —
полупрозрачная: её верхние ~45px (ряд «< > Готово») показывают страницу
ПОД собой, и та там не затемнена — над панелью висит светлая полоса с
текстом чата (снято в симуляторе 13.09.2026, окна залога). Тень с
разлётом продолжает затемнение под клавиатурой; сверху и по бокам она
уходит за экран. */
box-shadow: 0 0 0 200vh rgba(0,0,0,.45);
}
/* В установленном приложении на iPhone окно страницы — 894pt при экране 956:
нижние 62pt под окном WebKit красит только цветом холста, и ни fixed-подложка,
ни её тень туда не достают — под открытым окном оставалась белая полоса
(снято в симуляторе 13.09.2026; в тёмной теме полоса тёмная — это холст).
Пока окно открыто, холст красим в тот же затемнённый цвет. Цвет полосы
WebKit берёт у body (у html — нет, проверено), и только цвет, без картинки:
поэтому у body затемнённый ЦВЕТ, а поверх него градиент цвета страницы —
сама страница остаётся прежней, полоса под ней темнеет. */
html:has(.modal-back:not([hidden])),
body:has(.modal-back:not([hidden])) {
background-color: color-mix(in srgb, var(--bg) 55%, black);
background-image: linear-gradient(var(--bg), var(--bg));
}
/* Фото во весь экран и обрезка — почти чёрные, и полоса под ними тоже
(раньше светлела под чёрным экраном; 08.10.2026). */
html:has(.lightbox), body:has(.lightbox),
html:has(#crop-back:not([hidden])), body:has(#crop-back:not([hidden])) {
background-color: #0b0b0b;
background-image: linear-gradient(var(--bg), var(--bg));
}
@media (min-height: 600px) { .modal-back { align-items: center; } }
/* Окна с полями ввода (доплата, залог, заявка, заметка) на телефоне прижаты
к ВЕРХУ видимой области, а не к центру. Центрированное окно при клавиатуре
приходилось везти вверх в такт её выезду — по памяти высоты, которая для
полей формы не сходилась на панель «< > Готово», и окно дёргалось дважды.
Прижатому к верху ехать некуда: клавиатура накрывает его низ, и только.
Кнопки под клавиатурой — как в любой форме на телефоне: «Готово», и они на
месте. См. подогнатьОкна в app.js. На компьютере клавиатуры нет — по центру. */
@media (hover: none) and (pointer: coarse) {
/* Сдвиг области за окном (36px, см. посадить в перепискаПодКлавиатурой)
iPhone рисует за ~165 мс с быстрым стартом — подложка едет той же
кривой, что и страница, иначе окно на кадр проседает или перелетает. */
.modal-back { transition: top 165ms cubic-bezier(.25,.85,.35,1) 30ms; }
.modal-back.form { align-items: flex-start;
/* Не под самый верх: окно закрывало шапку чата и плашку брони — кто гость,
какие даты, какой апартамент, — а именно с этим сверяются, заполняя
долг, залог или заявку. Отступ оставляет на виду шапку и две строки
плашки (13.09.2026, просьба владельца). С клавиатурой окну остаётся
меньше места — оно прокручивается внутри, как и раньше. */
padding-top: calc(env(safe-area-inset-top) + 112px); }
/* Окно денег поверх окна правки брони — чуть ниже, чтобы было видно, что
это второй слой, а не подмена (владелец, 15.09.2026). */
.modal-back.form.stacked { padding-top: calc(env(safe-area-inset-top) + 168px); }
}
@media not all and (hover: none) and (pointer: coarse) {
.modal-back.stacked { align-items: flex-start; padding-top: 120px; }
}
.modal {
width: 100%; max-width: 460px;
background: var(--bg); border-radius: 16px; padding: 16px;
display: flex; flex-direction: column; gap: 12px;
box-shadow: 0 10px 40px rgba(0,0,0,.35);
/* Потолок высоты обязателен. Список действий по нажатию на имя вырос до
полутора десятков пунктов — метки, тишина, переименование, номер,
привязка брони, — и без потолка лист вылезал за края окна сразу вверх и
вниз: он центрируется, а лишнее у центрированного элемента уходит в обе
стороны. Первые и последние пункты становились недоступны совсем. */
max-height: 100%; overflow-y: auto; overscroll-behavior: contain;
}
.modal-title { font-weight: 600; font-size: 16px; }
/* Долгое нажатие открывает лист действий, а не выделение текста. Лист
появляется под ещё прижатым пальцем, и iPhone выделял подпись кнопки
«Закрыть» с системным «Скопировать · Найти · Перевести» поверх. Поля
ввода в окнах — исключение, там выделение нужно. */
.modal-back, .modal-back * {
-webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.modal-back input, .modal-back textarea, .modal-back select {
-webkit-user-select: text; user-select: text;
}
/* На сенсорном экране долгое нажатие на пузырь — наше меню, а не системное
выделение; на компьютере выделение мышью остаётся. */
@media (hover: none) and (pointer: coarse) {
#feed .msg { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
}
/* Лист действий по долгому нажатию: пункты во всю ширину, палец попадает
не целясь. Промах здесь дорог — рядом «отменить отправку». */
.modal.sheet { gap: 8px; }
.sheet-item {
width: 100%; font: inherit; font-size: 16px; text-align: left;
padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line);
background: var(--bg); color: var(--text); cursor: pointer;
}
.sheet-item.danger { color: #e53935; border-color: rgba(229,57,53,.35); }
.sheet-item.cancel { text-align: center; color: var(--muted); }
.modal textarea {
width: 100%; font: inherit; font-size: 16px; line-height: 1.4;
padding: 12px; border-radius: 10px; resize: vertical;
border: 1px solid var(--line); background: var(--bg); color: var(--text);
}
.modal-row { display: flex; gap: 10px; justify-content: flex-end; }
.modal-row button { padding: 10px 18px; }
.modal-row .cancel { background: transparent; color: var(--muted);
border: 1px solid var(--line); }
/* Ссылки в сообщениях */
.msg a { color: var(--accent); word-break: break-all; }
.msg.out a { color: #1a6ea8; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .msg.out a { color: #8fd0ff; }
}
:root[data-theme="dark"] .msg.out a { color: #8fd0ff; }
/* Прежний текст отредактированного сообщения — раскрывается по стрелке */
.msg .orig { margin-top: 4px; }
.msg .orig summary { font-size: 11px; color: var(--muted); cursor: pointer;
list-style: none; user-select: none; }
.msg .orig summary::-webkit-details-marker { display: none; }
.msg .orig summary::before { content: "▸ "; }
.msg .orig[open] summary::before { content: "▾ "; }
.msg .was { display: block; font-size: 14px; opacity: .75;
text-decoration: line-through; margin-top: 2px; white-space: pre-wrap; }
/* Номера апартаментов — отдельная страница.
Классы называются apt-*, а не advert-*: блокировщик рекламы в Chrome
вырезает элементы, у которых в классе есть «advert», — список из-за этого
не отображался вовсе, при живом HTML в DOM. */
.apt-page { max-width: 640px; margin: 0 auto; padding: 0 14px 24px; }
.apt-page .note { padding: 12px 0; }
.apt-page section { border: 0; padding: 0; margin-top: 18px; }
.apt-page h2 { display: flex; align-items: baseline; gap: 8px; padding: 0 0 6px; }
.apt-count { font-size: 12px; font-weight: 400; color: var(--muted);
background: var(--line); border-radius: 10px; padding: 2px 8px;
text-transform: none; letter-spacing: 0; }
.apt-count.done { color: #2e7d32; background: rgba(76,175,80,.16); }
.apt-list { background: var(--bg); border-radius: 14px; overflow: hidden; }
/* Название и поле в одну строку: места хватает, а «в столбик» на 17 позиций
превращается в простыню. На узком экране строка переносится сама. */
.apt-list li { display: flex; flex-wrap: wrap; gap: 6px 12px;
align-items: center; padding: 10px 12px;
border-bottom: 1px solid var(--line); }
.apt-list li:last-child { border-bottom: 0; }
.apt-title { flex: 1 1 200px; font-size: 14px; line-height: 1.3; color: var(--text); }
.apt-list li .apt-no { flex: 0 0 116px; width: 116px; padding: 8px 10px;
font-size: 15px; text-align: center; }
.apt-no:placeholder-shown { background: transparent; }
/* Разделитель дня в переписке */
.day-sep {
align-self: center; margin: 10px 0 6px;
padding: 3px 12px; border-radius: 12px;
background: rgba(0,0,0,.10); color: var(--muted);
font-size: 12px; font-weight: 500;
}
@media (prefers-color-scheme: dark) { .day-sep { background: rgba(255,255,255,.10); } }
/* Дата при прокрутке (как в Telegram) — плашка посередине над лентой, пока
листаешь; гаснет через секунду после остановки. Обёртка нулевой высоты
стоит вплотную над #feed, поэтому верх плашки — всегда верх ленты, что бы
ни было над ней (карточка брони, заметка, поиск). Размер — как у
разделителя дня, но поверх пузырей нужна сплошная подложка, иначе текст
сообщения просвечивает сквозь число. */
.feed-date { position: relative; height: 0; z-index: 4; pointer-events: none;
display: flex; justify-content: center; }
.feed-date span {
position: absolute; top: 8px;
padding: 3px 12px; border-radius: 12px; white-space: nowrap;
font-size: 12px; font-weight: 500; line-height: 16px;
color: var(--muted); background: var(--header);
box-shadow: 0 1px 4px rgba(0, 0, 0, .14);
opacity: 0; transform: translateY(-4px);
transition: opacity .4s ease, transform .4s ease;
}
.feed-date.shown:not(.covered) span {
opacity: 1; transform: none; transition-duration: .15s;
}
/* Автоответы */
.head-btn { padding: 8px 12px; font-size: 14px; border-radius: 10px; }
.ar-list { padding: 8px 0; }
.ar-item { display: grid; grid-template-columns: 10px 1fr auto; gap: 4px 10px;
align-items: center; padding: 12px 14px;
border-bottom: 1px solid var(--line); cursor: pointer; }
.ar-item.active { background: var(--bg-chat); }
.ar-item .dot { width: 8px; height: 8px; border-radius: 50%; }
.ar-item .dot.ok { background: #4caf50; }
.ar-item .dot.off { background: #bbb; }
.ar-item .ar-name { font-weight: 600; }
.ar-item .ar-kind { font-size: 12px; color: var(--muted); }
.row-field { display: flex; align-items: center; justify-content: space-between;
gap: 12px; padding: 8px 0; font-size: 15px; }
.row-field input { width: 120px; }
.muted { color: var(--muted); }
/* Закрепление чата свайпом */
.chat { transition: transform .18s ease; position: relative; }
.chat.will-pin { background: rgba(51,144,236,.12); }
.chat.pinned { background: rgba(128,128,128,.06); }
.pin-mark { font-size: 11px; flex-shrink: 0; }
/* Статистика */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
gap: 8px; margin: 4px 0 8px; }
.tile { background: var(--bg-chat); border-radius: 12px; padding: 12px 10px;
text-align: center; }
.tile b { display: block; font-size: 20px; font-weight: 700; }
.tile span { font-size: 12px; color: var(--muted); }
.tile.warn b { color: #e8890c; }
.tile.bad b { color: #e53935; }
.bar-track { background: var(--bg-chat); border-radius: 6px; height: 18px; }
.bar-fill { display: block; height: 100%; border-radius: 6px; background: var(--accent); }
.bar-fill.alt { background: #7bc862; }
.hours { display: flex; align-items: flex-end; gap: 2px; height: 70px; margin-top: 6px; }
.hour { flex: 1; height: 100%; display: flex; align-items: flex-end; }
.hour-fill { width: 100%; background: var(--accent); border-radius: 2px 2px 0 0;
min-height: 1px; }
.hours-axis { display: flex; justify-content: space-between; font-size: 11px;
color: var(--muted); margin-top: 4px; }
.ar-tabs a.ar-tab { text-decoration: none; }
/* Вкладки периода (стили потерялись при переделке экрана автоответов) */
.ar-tabs { display: flex; gap: 8px; padding: 12px 14px 4px; }
.ar-tab {
flex: 1; text-align: center; padding: 10px 8px; font-size: 14px;
border: 1px solid var(--line); border-radius: 10px;
background: transparent; color: var(--muted); text-decoration: none;
display: flex; align-items: center; justify-content: center; gap: 6px;
}
.ar-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
/* Подпись НАД полосой: рядом с ней длинные названия каналов обрезались
до неразличимого «Авито AV A…» — а начинаются они одинаково. */
.bar-block { padding: 6px 0; }
.bar-name { display: flex; justify-content: space-between; gap: 10px;
font-size: 14px; margin-bottom: 4px; }
.bar-num { color: var(--muted); flex-shrink: 0; }
/* span внутри блока остаётся строчным, и height к нему не применяется —
полосы просто исчезали. */
.bar-block .bar-track { display: block; width: 100%; }
/* Кадр из видео: у MAX прямой ссылки на файл нет, поэтому вместо плеера
показываем картинку со значком — чтобы не выглядело сломанным видео. */
.video-frame { position: relative; display: inline-block; }
.video-frame .play-mark {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
width: 44px; height: 44px; border-radius: 50%;
background: rgba(0, 0, 0, .55); color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 18px; padding-left: 3px; pointer-events: none;
}
/* Не отправленное сообщение видно прямо в списке: иначе про сорвавшуюся
отправку узнаёшь, только открыв переписку. */
/* Кадр видео кликабелен — показываем это. */
.video-frame[data-play] { cursor: pointer; }
/* Видео не открылось (ролика у нас нет или телефон его не играет): слова на
месте значка ▶ вместо чёрного прямоугольника с перечёркнутым ▶
(27.09.2026, «Видео вотсап не открывается после отправки»). */
.video-frame .gone-note {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
width: max-content; max-width: 80%; padding: 6px 10px; border-radius: 12px;
background: rgba(0, 0, 0, .6); color: #fff; font-size: 13px; line-height: 1.3;
text-align: center; pointer-events: none;
}
.failed-dot { color: #e53935; font-size: 15px; line-height: 1;
margin-left: 6px; flex-shrink: 0; }
/* Скрипты: список над полем ввода. Вставляют текст, но НЕ отправляют —
отправку оператор нажимает сам, посмотрев на подставленное. */
#composer #scripts-btn { font-weight: 700; font-size: 20px; line-height: 1; }
#scripts-pop {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
max-height: 70vh; display: flex; flex-direction: column;
background: var(--bg); border-top: 1px solid var(--line);
border-radius: 14px 14px 0 0; box-shadow: 0 -8px 30px rgba(0,0,0,.18);
}
#scripts-pop .sc-head { display: flex; gap: 8px; padding: 10px 12px;
border-bottom: 1px solid var(--line); }
#scripts-pop #sc-search { flex: 1; min-width: 0; border-radius: 12px; padding: 9px 12px; }
#scripts-pop #sc-close { width: 38px; background: transparent; color: var(--muted);
font-size: 17px; }
#sc-items { overflow-y: auto; padding: 4px 0 max(8px, env(safe-area-inset-bottom)); }
/* Гифки: та же панель снизу, что у скриптов; сетка в три колонки, плитки —
живые превью, как в Telegram; нажатие — отправка. */
#gif-pop {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
max-height: 70vh; display: flex; flex-direction: column;
background: var(--bg); border-top: 1px solid var(--line);
border-radius: 14px 14px 0 0; box-shadow: 0 -8px 30px rgba(0,0,0,.18);
}
/* На телефоне панели стоят от посаженной страницы (body.chatpage —
position: relative, под клавиатурой сидит на видимой области), а не от
окна: fixed при открытой клавиатуре iPhone стоял низом под ней — видны
были только верхние ~280px, а короткая панель пряталась целиком (аудит
17.09.2026). Потолок — в процентах от той же страницы. */
/* Без overflow на панели: overflow-x: hidden делал её прокручиваемой по
вертикали, и WebKit при фокусе в поле поиска считал «видимую» часть
вытянутого поля, а не всё поле — страница на 0,1 с уезжала на ~200px
(симулятор 18.09.2026). Ширину держит min-width: 0 у поля. */
@media (hover: none) and (pointer: coarse) {
#scripts-pop, #gif-pop { position: absolute; max-height: 70%; }
}
#gif-pop .sc-head { display: flex; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); align-items: center; }
/* Вкладки GIF | Избранное — как в Telegram; во вкладке избранного вместо
поиска — «+» (добавить с устройства). */
.gif-tabs { display: flex; gap: 2px; background: var(--bg-chat); border-radius: 10px; padding: 2px; flex: none; }
.gif-tab { width: auto; height: auto; padding: 6px 10px; border-radius: 8px; font-size: 13px;
background: transparent; color: var(--muted); }
.gif-tab.on { background: var(--bg); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
#gif-pop[data-tab="fav"] #gif-hints,
#gif-pop[data-tab="st"] #gif-search, #gif-pop[data-tab="st"] #gif-hints { display: none; }
#gif-pop[data-tab="fav"] .gif-add { flex: none; width: 42px; }
#gif-grid .gif .fav-tag { position: absolute; right: 4px; bottom: 4px; font-size: 11px; font-weight: 700; padding: 1px 6px;
border-radius: 6px; background: rgba(255,255,255,.85); color: #222; max-width: 70%;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#st-sets { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
#st-sets::-webkit-scrollbar { display: none; }
#st-sets button { width: auto; height: auto; padding: 4px 10px; border-radius: 12px; font-size: 13px;
background: var(--bg-chat); color: var(--text); white-space: nowrap; flex: none; }
#st-sets button.on { background: var(--accent); color: #fff; }
#st-add { font-size: 14px; flex: 1; }
/* Стикеры мельче гифок: четыре в ряд, без обрезки. */
#gif-pop[data-tab="st"] #gif-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 84px; }
#gif-grid .gif.st { background: transparent; }
#gif-grid .gif.st img { object-fit: contain; }
.gif-add { flex: 1; display: flex; align-items: center; justify-content: center; height: 38px;
border: 1px dashed var(--line); border-radius: 12px; color: var(--accent); font-size: 22px; cursor: pointer; }
#gif-grid .gif img { width: 100%; height: 100%; object-fit: cover; display: block; }
#gif-grid .gif .fav-kind { position: absolute; left: 4px; bottom: 4px; font-size: 10px; padding: 1px 5px;
border-radius: 6px; background: rgba(0,0,0,.55); color: #fff; }
#gif-grid .empty { grid-column: 1 / -1; color: var(--muted); font-size: 14px; padding: 20px 8px; text-align: center; }
/* min-width: 0 — иначе поле не ужимается ниже своей «естественной» ширины,
«+» и «✕» уезжали за правый край, а документ становился шире окна: при
фокусе в поле WebKit прокручивал страницу вбок на ~20px (симулятор,
18.09.2026, панель absolute от страницы). */
#gif-pop #gif-search { flex: 1; min-width: 0; border-radius: 12px; padding: 9px 12px; }
#gif-pop #gif-close { width: 38px; background: transparent; color: var(--muted); font-size: 17px; }
#gif-hints { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 12px 0; }
#gif-hints button { width: auto; height: auto; padding: 4px 10px; border-radius: 12px; font-size: 13px;
background: var(--bg-chat); color: var(--text); }
#gif-hints button.on { background: var(--accent); color: #fff; }
/* Ряды — фиксированной высоты: с aspect-ratio на плитках grid считал ряды
нулевыми (0,47px), плитки ложились друг на друга, а наблюдатель видимости
грузил все 50 роликов разом (проверено на бою 15.09.2026). */
#gif-grid {
overflow-y: auto; padding: 8px 8px max(8px, env(safe-area-inset-bottom));
display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 112px; gap: 6px;
min-height: 120px; align-content: start;
}
#gif-grid .gif {
position: relative; border-radius: 8px; overflow: hidden; background: var(--bg-chat);
cursor: pointer; padding: 0; border: 0; width: 100%; height: 100%;
background-size: cover; background-position: center;
}
#gif-grid .gif video { width: 100%; height: 100%; object-fit: cover; display: block; position: absolute; inset: 0; }
#gif-grid .gif img.poster { width: 100%; height: 100%; object-fit: cover; display: block; }
#gif-grid .gif.sending { opacity: .5; }
#gif-state { padding: 0 12px 8px; margin: 0; }
/* Значок GIF — внутри поля справа, как значок стикеров в Telegram: не ест
место в строке (владелец, 15.09.2026). При переводе (tr-btn) он сдвигается левее. */
#composer #gif-btn {
position: absolute; top: 50%; transform: translateY(-50%); right: 66px; z-index: 2;
width: 26px; height: 26px; min-width: 0; padding: 0; border: 0; border-radius: 6px;
background: transparent; color: var(--muted); opacity: .6; display: grid; place-items: center;
}
#composer #gif-btn:active { opacity: 1; }
#composer.with-gif #text { padding-right: 40px; }
#composer.with-gif #tr-btn { right: 96px; }
#composer.with-gif.with-tr #text { padding-right: 66px; }
/* Часы отложенных — слева от значка стикера, в том же поле. */
#composer #sched-btn {
position: absolute; top: 50%; transform: translateY(-50%); right: 96px; z-index: 2;
width: 26px; height: 26px; min-width: 0; padding: 0; border: 0; border-radius: 6px;
background: transparent; color: var(--accent); opacity: .8; display: grid; place-items: center;
}
#composer.with-sched.with-gif #text { padding-right: 70px; }
#composer.with-sched.with-gif #tr-btn { right: 126px; }
#composer.with-sched.with-gif.with-tr #text { padding-right: 96px; }
#composer:not(.with-gif) #sched-btn { right: 66px; }
#composer.with-sched:not(.with-gif) #text { padding-right: 40px; }
.sched-items { list-style: none; margin: 0; padding: 0; }
.sched-items li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.sched-items li:last-child { border-bottom: 0; }
.sched-items .s-when { font-size: 12px; color: var(--accent); font-weight: 600; }
.sched-items .s-text { margin: 4px 0 8px; white-space: pre-wrap; word-break: break-word; font-size: 15px; }
.sched-items .s-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.sched-items .s-acts button { width: auto; height: auto; padding: 5px 10px; font-size: 13px; border-radius: 10px;
background: var(--bg-chat); color: var(--text); }
.sched-items .s-acts button.danger { color: #d33a2c; }
.sched-items .empty { color: var(--muted); font-size: 14px; padding: 12px 0; }
@media (min-width: 900px) { #gif-pop { left: 50%; margin-left: calc(var(--окно) / -2); right: auto; width: var(--окно); bottom: var(--поле); } }
@media (min-width: 1000px) { .panes #gif-pop { margin-left: calc(var(--окно) / -2 + var(--список)); width: calc(var(--окно) - var(--список)); } }
#sc-items li { padding: 10px 14px; border-bottom: 1px solid var(--line);
cursor: pointer; }
#sc-items li:active { background: rgba(127,127,127,.12); }
#sc-items .sc-name { display: block; font-size: 15px; }
#sc-items .sc-preview, .sc-list .sc-preview {
display: block; font-size: 13px; color: var(--muted);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Разделитель «дальше — скрипты других каналов» */
#sc-items li.other-first { border-top: 1px solid var(--line); margin-top: 6px; }
#sc-items li.other-first::before, .sc-tag {
display: inline-block; font-size: 11px; color: var(--muted);
background: var(--line); border-radius: 8px; padding: 1px 7px; }
#sc-items li.other-first::before { content: "другие каналы"; margin-bottom: 6px; }
.sc-list li { padding: 12px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.sc-list .sc-name { font-size: 15px; margin-right: 6px; }
/* Один чип с тегом канала над списком — фильтр, а не подпись у каждой строки. */
.sc-tagbar { display: flex; align-items: center; gap: 8px;
padding: 8px 14px 4px; }
.sc-chip { font-size: 13px; padding: 4px 12px; border-radius: 12px;
background: var(--line); color: var(--text); }
.sc-chip.on { background: var(--accent, #3b82f6); color: #fff; }
.sc-hint { font-size: 12px; color: var(--muted); }
/* Браузер не считает раскладку строк за пределами экрана. На списке в три
сотни чатов это разница между «сразу нажимается» и «пару секунд не реагирует».
Высота-заглушка нужна, чтобы полоса прокрутки не скакала. */
.chat { content-visibility: auto; contain-intrinsic-size: 0 76px; }
/* Кроме списка на телефоне. Там прокручивается сама страница, и iPhone (iOS 26,
PWA) при быстром пролистывании не успевает признать строки видимыми: низ
экрана стоит белым, строки обрываются ровно по границе строки и дорисовываются
через секунду-две (видео владельца 27.09.2026, повторено в симуляторе).
Замер на 800 чатах в WebKit: без пропуска полная перерисовка списка дороже на
~50 мс (115 → 165), перераскладка не дороже — «пару секунд» выше не про сейчас.
На компьютере список — своя колонка с прокруткой, там всё в порядке. */
@media (hover: none) and (pointer: coarse) {
#chats .chat { content-visibility: visible; }
}
/* «Ответ не требуется» — тонкая текстовая кнопка под полем ввода, слева.
То же действие, что и ✓ в списке: снимает непрочитанное у нас и отправляет
гостю отчёт о прочтении. */
/* Полоска «ответ не требуется» прижата к строке ввода: раньше между ней и
последним сообщением зияла пустая полоса в треть пальца. */
/* Подложка как у ленты сообщений, а не как у строки ввода. Прозрачным блоком
сквозь него светился белый фон страницы, а с цветом строки ввода получалась
та же белая полоса — просто на строку ниже. Серый фон ленты делает эту
надпись частью переписки, чем она и является. */
/* Без подложки: любой фон здесь читался полосой поперёк экрана. Просто
подпись в конце переписки. */
.under-composer {
align-self: center; line-height: 1;
padding: 2px 10px 6px; background: transparent;
}
.under-composer button {
background: transparent; color: var(--muted); font-size: 13px;
padding: 2px 0; border: 0; width: auto;
}
.under-composer button:disabled { opacity: .6; }
.under-composer button.done { color: #2e7d32; }
/* Полоска лида в конце ленты — как подпись «ответ не требуется», но с
кнопкой «не забронировал». У чата без лида на том же месте — «пометить
как лид». */
.lead-strip {
align-self: center; display: flex; align-items: center; gap: 6px;
font-size: 12px; color: var(--muted); padding: 2px 10px; line-height: 1.2;
margin-top: 10px; /* отступ от последнего пузыря — строка не липнет к нему */
}
.lead-strip[hidden] { display: none; }
.lead-strip button, .lead-head {
width: auto; padding: 2px 10px; border-radius: 12px; font-size: 13px;
border: 1px solid #2e7d32; background: transparent; color: #2e7d32;
}
/* «Это лид» в шапке переписки: справа от имени, в углу. Открытый лид — на
том же месте овал «Лид ›» с заливкой: тап открывает лист причин. */
.chatpage header .lead-head { flex: none; height: auto; line-height: 1.3; margin-left: 4px; }
.lead-head[hidden] { display: none; }
.chatpage header .lead-head.lead-open { background: #2e7d32; color: #fff; font-weight: 600; padding: 3px 9px 3px 11px; }
.lead-open-caret { opacity: .75; margin-left: 2px; }
/* Пузырь CRM: синий, слева, с кнопками. Технический — и должен читаться так,
а не как слова гостя. */
.msg.system.crm-ask {
align-self: flex-start; background: #e3efff; color: #123c73; max-width: 88%;
border-bottom-left-radius: 4px;
}
.msg.system .crm-head { display: block; font-size: 11px; font-weight: 700;
letter-spacing: .04em; color: #1a56c4; margin-bottom: 2px; }
.msg.system .crm-btns { display: flex; gap: 8px; margin-top: 8px; }
.msg.system .crm-btn { width: auto; padding: 4px 12px; border-radius: 14px;
font-size: 13px; border: 1px solid #1a56c4; background: #fff; color: #1a56c4; }
.msg.system .crm-btn:disabled { opacity: .6; }
.msg.system.crm-ask .meta { color: #4a6a99; }
/* После ответа — серая строка-след по центру, как разделитель дня. */
.msg.system.crm-done {
align-self: center; background: transparent; box-shadow: none;
font-size: 12px; color: var(--muted); padding: 2px 8px; max-width: 95%;
}
.msg.system.crm-done .meta { float: none; margin: 0 0 0 6px; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .msg.system.crm-ask { background: #16304f; color: #cfe1ff; }
:root:not([data-theme="light"]) .msg.system .crm-btn { background: transparent; color: #8fd0ff; border-color: #8fd0ff; }
:root:not([data-theme="light"]) .msg.system .crm-head,
:root:not([data-theme="light"]) .msg.system.crm-ask .meta { color: #8fd0ff; }
:root:not([data-theme="light"]) .lead-strip button,
:root:not([data-theme="light"]) .lead-head { color: #93d69a; border-color: #93d69a; }
:root:not([data-theme="light"]) .lead-head.lead-open { background: #2e7d32; color: #fff; border-color: #2e7d32; }
}
:root[data-theme="dark"] .msg.system.crm-ask { background: #16304f; color: #cfe1ff; }
:root[data-theme="dark"] .msg.system .crm-btn { background: transparent; color: #8fd0ff; border-color: #8fd0ff; }
:root[data-theme="dark"] .msg.system .crm-head, :root[data-theme="dark"] .msg.system.crm-ask .meta { color: #8fd0ff; }
:root[data-theme="dark"] .lead-strip button, :root[data-theme="dark"] .lead-head { color: #93d69a; border-color: #93d69a; }
:root[data-theme="dark"] .lead-head.lead-open { background: #2e7d32; color: #fff; border-color: #2e7d32; }
/* Брони по объявлению — прямо над перепиской. Сроки обмена контактами Авито
в API не отдаёт, считаем от даты заезда, поэтому подпись прямая: до какого
числа нельзя. */
.bookings { padding: 6px 10px; background: var(--header);
border-bottom: 1px solid var(--line);
display: flex; flex-direction: column; gap: 6px;
max-height: 30vh; overflow-y: auto; }
/* Обёртка карточек для живой подмены шапки — без своей коробки: карточки
и «жил · …» остаются прямыми участниками колонки переписки, как раньше. */
#chat-cards { display: contents; }
/* Свайп по строке чата — наш жест, а не браузерный «назад».
touch-action: pan-y отдаёт браузеру только вертикальную прокрутку,
overscroll-behavior-x гасит навигацию по горизонтальному оттягиванию. */
html, body { overscroll-behavior-x: none; }
#chats .chat { touch-action: pan-y; }
/* Статус собеседника в шапке. Есть только у Telegram и MAX — у Авито и Циан
его в API нет, и строка просто не появляется. */
.presence { color: #4fae4e; }
/* Поиск по диалогам. Прячется за кнопкой: строка поиска, висящая всегда,
съедает экран телефона, а ищут раз в день. */
#search-bar {
display: flex; gap: 8px; align-items: center;
padding: 8px 12px; border-bottom: 1px solid var(--line);
background: var(--bg); position: sticky; top: 0; z-index: 5;
}
#search {
flex: 1; font: inherit; font-size: 16px; /* 16px — иначе iOS зумит поле */
padding: 10px 12px; border-radius: 10px;
border: 1px solid var(--line); background: var(--bg); color: var(--text);
}
#search-clear {
border: none; background: none; color: var(--muted);
font-size: 18px; padding: 6px 8px; cursor: pointer;
}
/* Пометка черновика в списке чатов: недописанное важнее последней реплики,
иначе про него забываешь до следующего случайного захода в чат. */
.draft-mark { color: #e53935; }
/* Чужой черновик над полем ввода. Не запрещаем писать — просто показываем,
что ответ уже готовят: жёсткая блокировка мешала бы в запаре сильнее. */
.others-draft {
display: flex; gap: 6px; align-items: baseline;
padding: 6px 14px; font-size: 13px; color: var(--muted);
border-top: 1px solid var(--line);
}
.others-draft[hidden] { display: none; }
.others-draft b { color: var(--accent); font-weight: 600; }
.others-draft .what-text {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1;
}
/* Крестик держим бледным: убирать чужой черновик — действие редкое, и
заметная кнопка над полем ввода мешала бы больше, чем сам черновик. */
.others-draft .drop-draft {
flex: none; border: 0; background: none; cursor: pointer;
color: var(--muted); opacity: .6; font-size: 14px; line-height: 1;
padding: 2px 4px; border-radius: 6px;
}
.others-draft .drop-draft:hover { opacity: 1; background: var(--bg-chat); }
/* Заголовок работает кнопкой — показываем это, но без вида ссылки. */
#inbox-title { cursor: pointer; user-select: none; }
#inbox-title.filtered { color: var(--accent); }
/* Операторы */
.op {
border: 1px solid var(--line); border-radius: 12px;
padding: 12px; margin-bottom: 12px;
}
.op-name {
flex: 1; font: inherit; font-size: 16px; font-weight: 600;
border: none; background: none; color: var(--text); padding: 4px 0;
}
.op-me { font-size: 12px; color: var(--muted); }
.op-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.op-pin {
flex: 1; min-width: 120px; font: inherit; font-size: 16px;
padding: 8px 10px; border-radius: 8px;
border: 1px solid var(--line); background: var(--bg); color: var(--text);
}
.op-state:empty { display: none; }
/* Стадия брони рядом с объявлением: видно, гость будущий, живущий или уже
уехавший, — не заходя в переписку. */
.stage {
display: inline-block; margin-right: 6px; padding: 0 6px;
border-radius: 6px; font-size: 12px; line-height: 18px; font-weight: 600;
vertical-align: 1px;
}
.stage[hidden] { display: none; }
/* Открытый лид: обведённый овал у имени, без заливки — залитые плашки во
второй строке это стадии брони, и путать их нельзя. Тот же овал стоит и
в полоске лида в переписке. */
.chat .lead, .lead-strip .lead {
display: inline-block; padding: 0 7px; border-radius: 10px; font-size: 11px;
line-height: 16px; font-weight: 600; color: #2e7d32; border: 1px solid #2e7d32;
vertical-align: 1px;
}
/* В строке списка — на месте стадии брони, во второй строке перед превью. */
.chat .row2 .lead { margin-right: 6px; }
.chat .lead[hidden] { display: none; }
/* Чип «Лиды N» под шапкой: зелёная обводка, как у овала; включённый — залит.
Два класса в селекторе не случайно: одиночный .lead-chip перебивался
общим .chip, который стоит ниже по файлу, и чип оставался серым. */
.chip.lead-chip { color: #2e7d32; border-color: #2e7d32; font-weight: 600; }
.chip.lead-chip.on { background: #2e7d32; border-color: #2e7d32; color: #fff; }
#leads-count:empty { display: none; }
#board-link, #list-link, #checkins-link { text-decoration: none; margin-left: auto; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .chat .lead,
:root:not([data-theme="light"]) .lead-strip .lead,
:root:not([data-theme="light"]) .chip.lead-chip:not(.on) { color: #93d69a; border-color: #93d69a; }
}
:root[data-theme="dark"] .chat .lead, :root[data-theme="dark"] .lead-strip .lead,
:root[data-theme="dark"] .chip.lead-chip:not(.on) { color: #93d69a; border-color: #93d69a; }
.stage-request { background: #fff3cd; color: #8a6d1f; }
.stage-booked { background: #d9f0da; color: #2e7d32; }
.stage-canceled { background: #fbe0e0; color: #c62828; }
.stage-left { background: var(--bg-chat); color: var(--muted); }
/* Значок залога у «выехал»: вернули — зелёный, не вернули — красный. */
.dep-back { display: inline-block; margin-right: 6px; padding: 0 5px; border-radius: 6px;
font-size: 12px; line-height: 18px; font-weight: 700; vertical-align: 1px; }
.dep-back[hidden] { display: none; }
.dep-back.ok { background: #d9f0da; color: #2e7d32; }
.dep-back.bad { background: #fbe0e0; color: #c62828; }
/* Тёмные цвета стадий — как у всего остального: по системной теме, но НЕ
когда в настройках выбрана светлая. Без этой оговорки на телефоне с
тёмной системой и светлым инбоксом плашка «бронь» стояла чёрной. */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .stage-request { background: #4a3c10; color: #ffd970; }
:root:not([data-theme="light"]) .stage-booked { background: #1f4020; color: #93d69a; }
:root:not([data-theme="light"]) .stage-canceled { background: #4a1f1f; color: #ff9a9a; }
:root:not([data-theme="light"]) .dep-back.ok { background: #1f4020; color: #93d69a; }
:root:not([data-theme="light"]) .dep-back.bad { background: #4a1f1f; color: #ff9a9a; }
:root:not([data-theme="light"]) .stage-checkin { background: #16304f; color: #8fd0ff; }
:root:not([data-theme="light"]) .stage-living { background: #1f4020; color: #93d69a; }
}
:root[data-theme="dark"] .stage-request { background: #4a3c10; color: #ffd970; }
:root[data-theme="dark"] .stage-booked { background: #1f4020; color: #93d69a; }
:root[data-theme="dark"] .stage-canceled { background: #4a1f1f; color: #ff9a9a; }
:root[data-theme="dark"] .dep-back.ok { background: #1f4020; color: #93d69a; }
:root[data-theme="dark"] .dep-back.bad { background: #4a1f1f; color: #ff9a9a; }
:root[data-theme="dark"] .stage-checkin { background: #16304f; color: #8fd0ff; }
:root[data-theme="dark"] .stage-living { background: #1f4020; color: #93d69a; }
/* Внутренняя заметка: висит над перепиской мелко и бледно — не спорит с
сообщениями, но всегда на глазах. Гость её не видит. */
.note-strip {
padding: 6px 14px; font-size: 12.5px; line-height: 1.35;
color: var(--muted); background: var(--bg-chat);
border-bottom: 1px solid var(--line);
cursor: pointer; white-space: pre-wrap;
}
.note-strip[hidden] { display: none; }
.note-add {
align-self: flex-start; margin: 4px 14px 0; padding: 0;
border: 0; background: none; color: var(--muted);
font-size: 12px; opacity: .65; cursor: pointer; width: auto;
}
.note-add[hidden] { display: none; }
/* Строка со свёрнутыми выборками: одна кнопка и название включённой. */
#filter-line {
display: flex; align-items: center; gap: 10px; padding: 6px 14px;
border-bottom: 1px solid var(--line); background: var(--bg);
font-size: 13px; color: var(--muted);
}
#filter-toggle {
width: auto; height: auto; padding: 4px 10px; border-radius: 14px;
border: 1px solid var(--line); background: var(--bg-chat);
color: var(--text); font-size: 13px;
}
#filter-toggle[aria-expanded="true"] .caret { display: inline-block;
transform: rotate(180deg); }
#filter-now { color: var(--accent); font-weight: 600; }
/* Полоска выборок «по делу»: узкая, прокручивается вбок — на телефоне
вертикальное место дороже горизонтального. */
#filter-bar {
display: flex; gap: 8px; padding: 8px 14px;
overflow-x: auto; scrollbar-width: none;
border-bottom: 1px solid var(--line); background: var(--bg);
}
#filter-bar::-webkit-scrollbar { display: none; }
#filter-bar[hidden] { display: none; }
.chip {
flex: none; width: auto; padding: 6px 12px; border-radius: 16px;
border: 1px solid var(--line); background: var(--bg-chat);
color: var(--text); font-size: 13px; white-space: nowrap; cursor: pointer;
}
.chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
/* Подпись под именем меняется: сперва «был в сети», затем объявление.
Текст подменяем в той же строке — так шапка не дёргается и ничего не
накладывается друг на друга. */
#sub-line {
transition: opacity .4s ease; display: flex; min-width: 0;
/* В одну строку: длинное название объявления иначе делает шапку выше и
сдвигает всю переписку. */
white-space: nowrap; overflow: hidden;
}
/* Урезаем название, а цену держим целой — она короткая и нужна чаще, чем
хвост названия. */
.sub-title { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sub-price { flex: none; }
#sub-line.faded { opacity: 0; }
/* Блок с именем должен уметь ужиматься: без min-width флекс-элемент
раздувается по содержимому, и длинное название уезжает за край экрана. */
.who { min-width: 0; flex: 1; }
.who .name {
display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* «Кто это»: узкая полоска над перепиской. Показываем, ПО ЧЕМУ опознали —
совпадение по имени слабее совпадения по телефону, и оператор должен
видеть разницу, а не доверять вслепую. */
.guest-card {
display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline;
padding: 7px 14px; font-size: 13px;
background: var(--bg-chat); border-bottom: 1px solid var(--line);
}
.guest-card b { font-weight: 600; }
.guest-card .g-apt, .guest-card .g-when { color: var(--muted); }
.guest-card .g-tel { color: var(--accent); text-decoration: none; }
.guest-card .g-how { color: var(--muted); opacity: .7; margin-left: auto; }
/* Колокольчик в шапке чата: зажигается, когда напоминание поставлено. */
/* Колокольчик без напоминания — просто значок, без голубой плашки (она
доставалась от базового button; владелец, 15.09.2026). С напоминанием —
лёгкая голубая подложка, чтобы было видно, что оно стоит. */
#remind { opacity: .55; background: transparent; border-radius: 8px; }
#remind.on { opacity: 1; background: #e3efff; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) #remind.on { background: #16304f; }
}
:root[data-theme="dark"] #remind.on { background: #16304f; }
/* Имя гостя в строке брони — первым и заметнее прочего: по апартаменту
броней несколько, и без имени непонятно, чья перед тобой. */
/* Стадии брони: заезд и «живёт» — рабочие состояния, их видно чаще всего. */
.stage-checkin { background: #e8f0fe; color: #1a56c4; }
.stage-living { background: #e6f4ea; color: #1e7a34; }
/* «Печатает» — зелёным, как присутствие: это тоже про «человек здесь». */
.typing-mark { color: #2e7d32; }
#sub-line.typing { color: #2e7d32; }
/* Можно ли обмениваться контактами. Мелко и в один цвет со смыслом: запрет
площадки стоит денег, а разрешение нужно не пропустить. */
.contacts-hint {
padding: 5px 14px; font-size: 12px;
border-bottom: 1px solid var(--line); background: var(--bg-chat);
}
.contacts-hint.no { color: #b3261e; }
.contacts-hint.ok { color: #1e7a34; }
/* Фото во весь экран. Поверх всего, тёмный фон — как в мессенджерах. */
.lightbox {
position: fixed; inset: 0; z-index: 200;
background: rgba(0, 0, 0, .92);
display: flex; align-items: center; justify-content: center;
padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}
.lightbox img {
max-width: 100%; max-height: 100%;
object-fit: contain; user-select: none;
}
/* Аватарка меньше экрана: растягиваем её до разумного размера, иначе
открытая «во весь экран» карточка показывает кружок с ноготь. */
.lightbox img.avatar-photo {
width: min(100%, 480px); height: auto;
}
.lb-close {
position: absolute; top: max(12px, env(safe-area-inset-top)); right: 12px;
width: 40px; height: 40px; border-radius: 50%; border: 0;
background: rgba(255, 255, 255, .15); color: #fff; font-size: 18px;
}
img.media { cursor: zoom-in; }
/* Реакции под пузырём — мелкой плашкой, как в мессенджерах. */
/* Реакция висит отдельной строкой под текстом и чуть растягивает пузырь —
как в телеграме. Инлайновая плашка липла к последнему слову и терялась. */
.reacts {
/* Строку плашке даёт
в самой разметке, а не display: block. Разница
принципиальная: инлайновая плашка остаётся в потоке, и время (оно
float: right) встаёт справа от неё, на той же строке. Блочная выталкивала
время на третью строку — пузырь рос вдвое больше нужного.
А без переноса вовсе плашка липла к последнему слову
(«Спасибо огромное!!) ❤️») и читалась как часть самого сообщения. */
display: inline-flex; align-items: center; gap: 4px;
margin: 6px 0 0; padding: 3px 9px; border-radius: 13px;
background: rgba(0, 0, 0, .07); font-size: 15px; line-height: 1.1;
}
.msg.out .reacts { background: rgba(0, 0, 0, .09); }
/* Цитата в пузыре — как в телеграме: подложка, толстая полоска слева и имя
автора сверху. Без имени по цитате не понять, кого именно цитируют, а это
в переписке на четверых главное. */
.quote {
display: block; margin-bottom: 4px; padding: 3px 8px 4px 8px;
border-left: 3px solid var(--accent); border-radius: 4px;
background: rgba(47, 127, 209, .10); color: var(--text);
font-size: 13px; line-height: 1.25;
}
.quote .q-who { display: block; font-weight: 600; color: var(--accent);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quote .q-body { display: block; color: var(--muted);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quote.mine { border-left-color: #2e7d32; background: rgba(46, 125, 50, .10); }
.quote.mine .q-who { color: #2e7d32; }
/* Пузырь на свайпе едет за пальцем; у порога чуть подсвечиваем, чтобы было
видно, что отпускание сработает. */
.msg.will-quote { box-shadow: 0 1px 1px rgba(0,0,0,.08), -3px 0 0 var(--accent); }
/* На что отвечаем — над полем ввода. */
#quote-bar {
display: flex; gap: 8px; align-items: center;
padding: 6px 14px; font-size: 13px; color: var(--muted);
border-top: 1px solid var(--line);
}
#quote-bar[hidden] { display: none; }
#quote-bar .q-text { flex: 1; overflow: hidden; text-overflow: ellipsis;
white-space: nowrap; }
#quote-bar .q-drop { border: 0; background: none; color: var(--muted);
font-size: 16px; width: auto; padding: 2px 4px; }
/* Закреплённое сообщение — узкой полоской под шапкой, всегда на виду. */
.pinned-strip {
display: flex; gap: 8px; align-items: center;
padding: 6px 14px; font-size: 13px; cursor: pointer;
background: var(--bg-chat); border-bottom: 1px solid var(--line);
}
.pinned-strip[hidden] { display: none; }
.pinned-strip .pin-text { flex: 1; overflow: hidden; text-overflow: ellipsis;
white-space: nowrap; color: var(--muted); }
.pinned-strip .pin-drop { border: 0; background: none; color: var(--muted);
font-size: 15px; width: auto; padding: 2px 4px; }
/* Подсветка сообщения, к которому прыгнули по закреплению. */
.msg.flash { animation: вспышка 1.2s ease-out; }
@keyframes вспышка {
0% { background: rgba(82, 148, 226, .35); }
100% { background: inherit; }
}
/* Выбор чата для пересылки. */
.fwd-search {
width: 100%; font: inherit; font-size: 16px; padding: 10px 12px;
border-radius: 10px; border: 1px solid var(--line);
background: var(--bg); color: var(--text);
}
/* flex: none — как у .cart-items: единственный прокручиваемый ребёнок
flex-колонки окна под клавиатурой сжимался в полоску (аудит 17.09.2026). */
.fwd-list { list-style: none; margin: 0; padding: 0; max-height: 40vh;
overflow-y: auto; flex: none; }
.fwd-list li {
padding: 11px 4px; border-bottom: 1px solid var(--line); cursor: pointer;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fwd-list li:active { background: var(--bg-chat); }
/* Кнопка записи: во время записи заметно горит — иначе непонятно, идёт ли. */
/* touch-action и запрет выделения обязательны: иначе Safari на долгом
нажатии показывает лупу с «копировать» и забирает жест себе. */
#mic { background: transparent; color: var(--muted); font-size: 19px;
touch-action: none; -webkit-touch-callout: none;
-webkit-user-select: none; user-select: none;
transition: transform .14s, box-shadow .14s, background .14s; }
/* Во время записи кнопка вырастает: держать палец на маленьком кружке неудобно,
и промах по нему обрывал запись. */
#mic.recording { background: #2f7fd1; color: #fff; transform: scale(1.5);
box-shadow: 0 0 0 12px rgba(47,127,209,.16); }
/* Ждём микрофон: кнопка уже выросла под палец, но серая — записи ещё нет. */
#mic.waiting { background: #9aa4ad; color: #fff; transform: scale(1.5);
box-shadow: 0 0 0 12px rgba(154,164,173,.18); }
#mic.cancelling { background: #e53935;
box-shadow: 0 0 0 12px rgba(229,57,53,.16); }
/* «en» — в правом верхнем углу поля ввода, мелко и полупрозрачно. Появляется
только когда нужен: в переписке с иностранцем или когда набран латинский
текст. Постоянно висящая кнопка в углу мешает читать написанное. */
#composer #tr-btn {
position: absolute; top: 5px; right: 70px; z-index: 2;
width: auto; height: auto; min-width: 0;
padding: 2px 4px;
font-size: 11px; font-weight: 700; letter-spacing: .5px; line-height: 1;
text-transform: lowercase;
color: var(--accent); background: transparent; border: 0; border-radius: 0;
opacity: .45; cursor: pointer;
}
#composer #tr-btn:active, #composer #tr-btn.busy { opacity: 1; }
#composer #tr-btn[disabled] { opacity: .3; }
/* Пока кнопка видна — отступ под неё, чтобы текст не заезжал под буквы. */
#composer.with-tr #text { padding-right: 34px; }
/* Панель записи занимает место поля ввода, а не ложится поверх: абсолютная
позиция промахивалась мимо строки — форма выше поля на safe-area снизу. */
#rec-bar {
flex: 1; min-width: 0; height: 42px; display: flex; align-items: center;
gap: 10px; padding: 0 14px; border-radius: 20px; font-size: 15px;
color: var(--text); background: var(--bg); border: 1px solid var(--line);
}
#rec-bar[hidden] { display: none; }
/* Пока идёт запись, всё остальное прячем: писать текст всё равно нельзя. */
#composer.recording #text, #composer.recording #attach, #composer.recording #scroll-down,
#composer.recording #scripts-btn, #composer.recording #schedule { display: none; }
.rec-dot { width: 9px; height: 9px; border-radius: 50%; background: #e53935;
flex-shrink: 0; animation: rec-pulse 1.3s infinite; }
@keyframes rec-pulse { 50% { opacity: .1; } }
.rec-time { font-variant-numeric: tabular-nums; min-width: 42px; }
/* Ждём микрофон: точка не мигает, счётчик приглушён — записи ещё нет. */
#rec-bar.waiting .rec-dot { animation: none; opacity: .35; }
#rec-bar.waiting .rec-time { opacity: .35; }
.rec-hint { flex: 1; text-align: center; color: var(--muted);
white-space: nowrap; overflow: hidden; }
#composer #rec-bar button { width: auto; height: auto; border-radius: 8px;
padding: 6px 10px; font-size: 15px; font-weight: 600; background: transparent; }
#composer #rec-bar .rec-cancel { color: #e53935; }
#composer #rec-bar .rec-send { color: #2f7fd1; margin-left: auto; }
/* Замок висит над кнопкой: ведём палец вверх — запись остаётся без руки. */
#rec-lock {
/* Кнопка при записи вырастает в полтора раза и вылезает над строкой ввода —
замок стоял на ней (13.09.2026, замечание владельца): поднимаем выше. */
position: absolute; right: 12px; bottom: calc(100% + 14px); z-index: 3;
display: flex; flex-direction: column; align-items: center; line-height: 1;
gap: 3px; padding: 9px 7px; border-radius: 16px; font-size: 14px;
color: var(--muted); background: var(--bg); border: 1px solid var(--line);
transition: transform .14s, color .14s;
}
#rec-lock span { font-size: 11px; }
#rec-lock.armed { color: #2f7fd1; transform: translateY(-6px); }
#rec-toast {
position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%);
z-index: 40; padding: 9px 15px; border-radius: 18px; font-size: 14px;
color: #fff; background: rgba(0,0,0,.78); pointer-events: none;
}
/* На странице чата — от посаженной страницы, а не от окна: fixed при
открытой клавиатуре iPhone стоял под ней, и «не отправилось: …» никто не
видел. body.chatpage — position: relative и под клавиатурой сидит на
видимой области (аудит 17.09.2026). */
body.chatpage #rec-toast { position: absolute; }
/* «Нет связи с сервером» — после двух сбоев опроса подряд (02.10.2026): без
неё замершая на смене сети переписка ничем не отличалась от тихой. Сверху,
под «чёлкой» айфона, и не ловит касания — работать с лентой не мешает. */
#no-net {
position: fixed; left: 50%; top: calc(env(safe-area-inset-top) + 8px);
transform: translateX(-50%); z-index: 45; padding: 6px 14px;
border-radius: 14px; font-size: 13px; color: #fff;
background: rgba(176, 40, 40, .92); pointer-events: none;
}
/* Карточка контакта: имя и нажимаемый телефон — как в мессенджерах. */
.contact-card {
display: flex; flex-direction: column; gap: 2px;
padding: 6px 10px; border-left: 3px solid var(--accent);
background: rgba(0, 0, 0, .04); border-radius: 6px;
}
.contact-card .c-name { font-weight: 600; }
.contact-card .c-tel { color: var(--accent); text-decoration: none; }
/* Окно пересылки: чипы каналов, заголовок списка и две строки на диалог. */
.fwd-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.fwd-chips .chip {
padding: 5px 10px; border-radius: 14px; font-size: 13px;
border: 1px solid var(--line); background: var(--bg); color: var(--muted);
width: auto; height: auto;
}
.fwd-chips .chip.on { background: var(--accent); border-color: var(--accent);
color: #fff; }
.fwd-head { font-size: 12px; color: var(--muted); margin: 8px 0 4px; }
.fwd-list li { display: flex; flex-direction: column; gap: 1px; }
.fwd-list .fwd-name { font-size: 15px; }
.fwd-list .fwd-where { font-size: 12px; color: var(--muted);
overflow: hidden; text-overflow: ellipsis;
white-space: nowrap; }
/* У кружка пузыря быть не должно вовсе — в мессенджере он висит прямо на фоне
переписки. Прямоугольная подложка вокруг круга выглядит рамкой от картины. */
.msg.round-note {
background: none; box-shadow: none; padding: 0; max-width: none;
}
.msg.round-note .meta { float: none; display: block; text-align: right;
margin: 2px 4px 0 0; }
/* Кружок из телеграма: круглым он и записан, и показывать его прямоугольником
значит обрезать человеку лицо по краям. */
.video-frame.round, video.media.round {
border-radius: 50%; overflow: hidden;
width: 200px; height: 200px; max-width: 62vw; max-height: 62vw;
}
.video-frame.round img.media { width: 100%; height: 100%; object-fit: cover; }
video.media.round { object-fit: cover; background: #000; }
.theme-pick, .chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
/* Полоска выбранных файлов: миниатюры с крестиком и обрезкой по нажатию. */
#attach-bar { flex-wrap: wrap; }
#attach-thumbs { display: flex; gap: 6px; flex-wrap: wrap; width: 100%; }
/* Селектор с id намеренно: правило #attach-bar span { flex: 1 } старше
классового и растягивало миниатюры в широкие полосы — по ним не понять,
что за фото отправляешь. */
#attach-thumbs .att {
position: relative; flex: 0 0 64px; width: 64px; height: 64px;
border-radius: 8px; overflow: hidden; background: var(--bg-chat);
}
#attach-thumbs .att img, #attach-thumbs .att video {
width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Документ в полоске вложений: миниатюры у PDF и docx нет, поэтому плитка
сама говорит, что приложено, — расширение и имя файла. */
#attach-thumbs .att .doc {
width: 100%; height: 100%; box-sizing: border-box; padding: 5px 3px;
display: flex; flex-direction: column; align-items: center;
justify-content: center; gap: 2px; text-align: center;
background: var(--bubble-in); border: 1px solid var(--line);
border-radius: 8px; color: var(--text);
}
#attach-thumbs .att .doc .ext {
font-size: 10px; font-weight: 700; letter-spacing: .3px; color: var(--accent);
flex: 0 0 auto;
}
#attach-thumbs .att .doc .nm {
font-size: 8px; line-height: 1.2; color: var(--muted); width: 100%;
overflow: hidden; word-break: break-word; flex: 0 1 auto; min-height: 0;
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
/* Правило `#attach-bar span` старше классового и запрещает перенос —
без этого имя ужималось в одну строку с многоточием. */
white-space: normal; text-overflow: clip;
}
#attach-thumbs .att .x {
position: absolute; top: 1px; right: 1px; width: 18px; height: 18px;
border-radius: 50%; border: 0; padding: 0; line-height: 18px;
background: rgba(0,0,0,.6); color: #fff; font-size: 12px;
}
#attach-thumbs .att .cut {
position: absolute; bottom: 1px; left: 1px; width: 18px; height: 18px;
border-radius: 50%; border: 0; padding: 0; line-height: 18px;
background: rgba(0,0,0,.6); color: #fff; font-size: 11px;
}
/* Обрезка фото — как в «Фото» на айфоне: рамка стоит, фото под ней двигают
и приближают, углы рамки тянутся. Сцена ловит все жесты сама
(touch-action: none), рамка касаний не перехватывает — только её углы. */
#crop-back {
position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.92);
display: flex; flex-direction: column;
/* Сцена начинается под статус-баром: в приложении страница лежит под ним,
и верхние углы рамки оказывались в его зоне — касания туда не доходят
(айфон владельца, 13.09.2026). */
padding-top: env(safe-area-inset-top);
}
#crop-stage { flex: 1; position: relative; overflow: hidden; touch-action: none;
user-select: none; -webkit-user-select: none; cursor: grab; }
#crop-stage img { position: absolute; left: 0; top: 0; transform-origin: 0 0;
max-width: none; max-height: none; will-change: transform;
pointer-events: none; }
#crop-frame {
position: absolute; border: 1.5px solid #fff; box-sizing: border-box;
box-shadow: 0 0 0 9999px rgba(0,0,0,.55); pointer-events: none;
/* Сетка третей — по ней ровняют горизонт и лица. */
background-image:
linear-gradient(to right, transparent calc(33.3% - .5px), rgba(255,255,255,.35) calc(33.3% - .5px), rgba(255,255,255,.35) calc(33.3% + .5px), transparent calc(33.3% + .5px)),
linear-gradient(to right, transparent calc(66.6% - .5px), rgba(255,255,255,.35) calc(66.6% - .5px), rgba(255,255,255,.35) calc(66.6% + .5px), transparent calc(66.6% + .5px)),
linear-gradient(to bottom, transparent calc(33.3% - .5px), rgba(255,255,255,.35) calc(33.3% - .5px), rgba(255,255,255,.35) calc(33.3% + .5px), transparent calc(33.3% + .5px)),
linear-gradient(to bottom, transparent calc(66.6% - .5px), rgba(255,255,255,.35) calc(66.6% - .5px), rgba(255,255,255,.35) calc(66.6% + .5px), transparent calc(66.6% + .5px));
}
/* Углы — крупные мишени под палец, рисуем уголком. */
#crop-frame .h {
position: absolute; width: 36px; height: 36px; pointer-events: auto;
touch-action: none;
}
#crop-frame .h::after { content: ""; position: absolute; inset: 9px; width: 18px; height: 18px;
border: 3px solid #fff; box-sizing: border-box; }
#crop-frame .nw { left: -18px; top: -18px; cursor: nwse-resize; }
#crop-frame .nw::after { border-right: 0; border-bottom: 0; }
#crop-frame .ne { right: -18px; top: -18px; cursor: nesw-resize; }
#crop-frame .ne::after { border-left: 0; border-bottom: 0; }
#crop-frame .sw { left: -18px; bottom: -18px; cursor: nesw-resize; }
#crop-frame .sw::after { border-right: 0; border-top: 0; }
#crop-frame .se { right: -18px; bottom: -18px; cursor: nwse-resize; }
#crop-frame .se::after { border-left: 0; border-top: 0; }
#crop-hint { margin: 0; padding: 8px 16px 0; background: #000; color: #9a9a9a;
font-size: 12px; text-align: center; }
#crop-bar {
display: flex; gap: 10px; align-items: center; justify-content: space-between;
padding: 12px 16px; padding-bottom: max(12px, env(safe-area-inset-bottom));
background: #000; color: #fff;
}
#crop-bar button { width: auto; height: auto; padding: 8px 14px;
border-radius: 10px; background: transparent; color: #fff;
font-size: 15px; }
#crop-bar .ok { background: var(--accent); font-weight: 600; }
/* Поле с кнопкой в одну строку: «Кому» + «Вставить». */
.row-inline { display: flex; gap: 8px; align-items: center; }
.row-inline input { flex: 1; min-width: 0; }
.row-inline button { width: auto; height: auto; padding: 9px 14px;
border-radius: 10px; font-size: 15px; }
/* Пузырь загрузки: сам файл и кружок, который заполняется по кругу, — как в
мессенджерах. Глаз в момент отправки смотрит в переписку, а не под неё. */
.msg.local-upload { position: relative; padding: 4px; }
.msg.local-upload .media { max-width: 220px; border-radius: 10px; display: block; }
.up-ring {
position: absolute; inset: 0; display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 2px;
color: #fff; pointer-events: none;
}
.up-ring svg { width: 56px; height: 56px; transform: rotate(-90deg); }
.up-ring circle { fill: rgba(0, 0, 0, .45); stroke-width: 3.5; }
.up-ring circle.bg { stroke: rgba(255, 255, 255, .3); }
.up-ring circle.val { fill: none; stroke: #fff; stroke-linecap: round;
transition: stroke-dashoffset .2s linear; }
/* Отправляет воркер — процентов он не сообщает, поэтому просто крутим. */
.up-ring.wait svg { animation: up-spin 1.1s linear infinite; }
@keyframes up-spin { to { transform: rotate(270deg); } }
.up-ring .up-pct { position: absolute; font-size: 12px; font-weight: 600;
font-variant-numeric: tabular-nums; }
/* Этап под кольцом: «проверяю», «загружаю», «отправляю». Кольцо — колонка
(svg, затем слово), процент живёт поверх svg. */
.up-ring .up-stage { position: absolute; top: calc(50% + 32px); font-size: 11px;
font-weight: 600; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
/* Ход видео на плитке вложения: ролик готовится сразу после выбора. Полоса
снизу заполняется по доле, слово — этап; «✓» — уже на сервере. */
#attach-thumbs .att .vjob {
position: absolute; left: 0; right: 0; bottom: 0; height: 18px;
display: flex; align-items: center; justify-content: center;
font-size: 9px; font-weight: 700; color: #fff; white-space: nowrap;
background: linear-gradient(90deg, rgba(36,129,204,.85) calc(var(--доля, 0) * 100%),
rgba(0,0,0,.55) calc(var(--доля, 0) * 100%));
pointer-events: none;
}
#attach-thumbs .att .vjob[data-stage="готово"] { background: rgba(46,160,67,.9); font-size: 11px; }
#attach-thumbs .att .vjob[data-stage="ошибка"] { background: rgba(200,40,40,.9); }
/* Чем сейчас занято неотправленное сообщение: «сжимаю видео…». */
.send-note { display: block; margin-top: 3px; font-size: 12px;
color: var(--muted); font-style: italic; }
/* Полоска «непрочитанные»: во всю ширину, чтобы граница читалась сразу. */
.unread-sep {
align-self: stretch; width: 100%; border-radius: 0;
background: rgba(51, 144, 236, .12); color: var(--accent);
font-size: 12px; text-align: center; padding: 3px 0;
}
/* Ручная пометка «вернуться к этому»: синяя точка без числа. */
.mark-dot {
display: inline-block; width: 10px; height: 10px; border-radius: 50%;
background: var(--accent); margin-left: 6px; vertical-align: middle;
}
.mark-dot[hidden] { display: none; }
/* Строка едет за пальцем, у порога подсвечивается справа. */
.chat.will-mark { box-shadow: inset -3px 0 0 var(--accent); }
/* Рамка вместо превью: файл остался у воркера, показать нечего. */
.up-stub { display: flex; align-items: center; justify-content: center;
width: 200px; height: 130px; border-radius: 10px;
background: var(--bg-chat); font-size: 34px; }
/* Та же рамка, но с именем файла: документ во время отправки. */
.up-stub.doc { flex-direction: column; gap: 6px; padding: 8px 10px;
box-sizing: border-box; font-size: 28px; }
.up-stub.doc .nm { font-size: 12px; line-height: 1.2; color: var(--muted);
text-align: center; word-break: break-word;
display: -webkit-box; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; overflow: hidden; }
/* Подключение канала по коду — прямо в настройках. */
.connect { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.connect select, .connect input { flex: 1; min-width: 120px; }
.connect button { width: auto; padding: 9px 14px; border-radius: 10px; }
#connect-box { margin-top: 12px; text-align: center; }
#connect-qr { width: 240px; max-width: 80vw; image-rendering: pixelated;
background: #fff; padding: 8px; border-radius: 10px; }
/* Код входа WhatsApp по номеру: его перепечатывают глазами в другое
приложение — крупно, моноширинно, с разрывом посередине. */
.pair-code { font: 600 30px/1.2 ui-monospace, Menlo, monospace; letter-spacing: 3px;
margin: 12px 0 4px; user-select: all; }
#connect-alt { margin-top: 12px; }
/* Метки диалога — подписями под строкой: цвет подсказывает, слово называет.
Строка от этого чуть выше, но только у помеченных чатов. */
.row-labels { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; }
.row-labels[hidden] { display: none; }
.row-tag {
font-size: 11px; line-height: 1.4; padding: 0 6px; border-radius: 8px;
border: 1px solid currentColor; white-space: nowrap;
}
/* Точка в списке действий: связь «цвет — смысл» видна там же, где метку ставят. */
.sheet-dot { width: 10px; height: 10px; border-radius: 50%;
display: inline-block; margin-right: 8px; vertical-align: middle; }
/* Метки в шапке чата — уже словами: там есть место и важен смысл. */
.chat-labels { display: flex; gap: 6px; flex-wrap: wrap; padding: 6px 14px;
background: var(--header); border-bottom: 1px solid var(--line); }
.chat-labels .lbl {
display: inline-flex; align-items: center; gap: 5px; font-size: 12px;
padding: 3px 9px; border-radius: 12px; border: 1px solid var(--line);
background: var(--bg); color: var(--text);
}
.chat-labels .lbl i { width: 8px; height: 8px; border-radius: 50%; }
.chat-labels .lbl.off { opacity: .45; }
/* Управление каналом в настройках. Выключенный виден, но приглушён: он
остаётся в базе со всей перепиской, просто сообщения по нему не ходят. */
.accounts li.off { opacity: .55; }
.accounts li.tappable { cursor: pointer; }
.accounts li.tappable:active { background: var(--bg-chat); }
/* Признак «здесь есть что нажать» — тонкая стрелка, а не кнопки в строке. */
.accounts li.tappable::after { content: "›"; color: var(--muted); font-size: 18px;
margin-left: 2px; }
/* Гости ближайших заездов на экране «написать первым». */
.guests { list-style: none; margin: 0; padding: 0; }
.guests li { display: flex; align-items: center; gap: 8px; padding: 7px 0;
border-bottom: 1px solid var(--line); font-size: 14px; }
.guests .g-name { flex: 1; min-width: 0; overflow: hidden;
text-overflow: ellipsis; white-space: nowrap; }
.guests .g-when { color: var(--muted); font-size: 12px; white-space: nowrap; }
.guests .g-pick { width: auto; padding: 4px 10px; border-radius: 8px;
font-size: 13px; }
.guests .g-open { font-size: 13px; color: var(--accent); text-decoration: none; }
/* ---------- найденное в тексте переписки ---------- */
/* Отдельным блоком под списком чатов: чат и фраза внутри чата — разные вещи,
и в одной ленте оператор перестаёт понимать, на что смотрит. */
.hits-title {
padding: 14px 12px 6px;
font-size: 13px;
font-weight: 600;
color: var(--muted);
border-top: 1px solid var(--line);
}
#hits { list-style: none; margin: 0; padding: 0; }
.hit a {
display: block;
padding: 8px 12px 10px;
border-bottom: 1px solid var(--line);
color: var(--text);
text-decoration: none;
}
.hit-head { display: flex; justify-content: space-between; gap: 8px; }
.hit-chat {
font-weight: 600;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hit-time { color: var(--muted); font-size: 13px; flex: none; }
.hit-text {
display: block;
margin-top: 2px;
/* Три строки — предел: дальше уже не «где это было», а чтение переписки. */
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
overflow: hidden;
}
.hit-text b { background: rgba(51, 144, 236, .22); font-weight: 600; }
.hit-acc { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
/* Куда прыгнули — из поиска или по цитате. Подсветка гаснет сама, чтобы не
мешать читать дальше. */
.msg.found { animation: нашлось 2.4s ease-out; }
/* Цитата кликабельна: ведёт к тому сообщению, на которое отвечают. */
.quote { cursor: pointer; }
@keyframes нашлось {
0%, 55% { box-shadow: 0 0 0 3px rgba(51, 144, 236, .55); }
100% { box-shadow: 0 0 0 3px rgba(51, 144, 236, 0); }
}
/* ---------- таблица «кто отвечал» ---------- */
table.ops { width: 100%; border-collapse: collapse; font-size: 15px; }
table.ops th {
text-align: left; font-weight: 600; font-size: 13px; color: var(--muted);
padding: 4px 6px; border-bottom: 1px solid var(--line);
}
table.ops td { padding: 7px 6px; border-bottom: 1px solid var(--line); }
table.ops th:not(:first-child), table.ops td:not(:first-child) { text-align: right; }
/* Автоответы — не работа человека, и в таблице должны читаться как фон. */
table.ops tr.auto td { color: var(--muted); }
/* ---------- дни недели у правила автоответа ---------- */
.days { padding: 6px 0 2px; }
.days-title { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.days-row { display: flex; gap: 6px; flex-wrap: wrap; }
.day { position: relative; }
.day input { position: absolute; opacity: 0; pointer-events: none; }
.day span {
display: inline-block; min-width: 38px; padding: 7px 0;
text-align: center; border: 1px solid var(--line); border-radius: 9px;
color: var(--muted); background: transparent; cursor: pointer;
user-select: none;
}
.day input:checked + span {
background: var(--accent); border-color: var(--accent); color: #fff;
}
/* ---------- сообщение, удалённое собеседником ---------- */
/* Текст оставляем зачёркнутым, а не прячем: это часть разговора, и без него
наш ответ висит без вопроса. */
.msg.peer-deleted .text, .msg.gone .text, .msg.deleting .text {
text-decoration: line-through;
opacity: .65;
}
/* Вложение зачеркнуть нельзя — гасим целиком, иначе удалённое фото выглядит
таким же живым, как остальные. */
.msg.gone img, .msg.gone video, .msg.deleting img, .msg.deleting video,
.msg.gone .file, .msg.deleting .file { opacity: .45; }
.gone-mark.bad { color: #e53935; font-style: normal; }
.gone-mark {
display: block;
margin-top: 2px;
font-size: 11px;
color: var(--muted);
font-style: italic;
}
/* ---------- перевод ---------- */
/* Перевод под оригиналом и мельче: оригинал главный, перевод — подсказка. */
.tr-text {
display: block;
margin-top: 3px;
padding-top: 3px;
border-top: 1px dashed rgba(128, 128, 128, .35);
font-size: 13px;
opacity: .8;
white-space: pre-wrap;
}
/* Значок языка в углу поля ввода: заметен, когда ищешь, и не мешает, когда
не нужен. */
#tr-btn {
position: absolute;
top: 2px;
right: 4px;
z-index: 2;
padding: 1px 5px;
font-size: 10px;
font-weight: 700;
letter-spacing: .5px;
line-height: 1.4;
color: var(--muted);
background: transparent;
border: 1px solid var(--line);
border-radius: 6px;
cursor: pointer;
}
#tr-btn:active, #tr-btn.busy { color: var(--accent); border-color: var(--accent); }
#tr-btn[disabled] { opacity: .5; }
#composer { position: relative; }
/* Маленькая кнопка перевода в пузыре — только у чужих сообщений без
кириллицы. Автоперевода нет: платить за каждое сообщение незачем. */
.tr-ask {
display: block;
margin-top: 3px;
padding: 0;
font-size: 12px;
color: var(--accent);
background: transparent;
border: none;
cursor: pointer;
opacity: .85;
}
.tr-ask[disabled] { color: var(--muted); }
/* Итоги поиска человека по всем аккаунтам. Список, а не одна строка,
потому что ответ у каждого аккаунта свой: человека с закрытым поиском по
номеру находят только те, у кого он записан в контактах. */
#found:not(:empty) { margin-top: 8px; }
#found .lk-yes, #found .lk-no, #found .lk-wait, #found .lk-hint {
padding: 4px 0;
font-size: 14px;
line-height: 1.35;
}
#found .lk-yes { color: var(--text); }
#found .lk-no, #found .lk-wait { color: var(--muted); }
#found .lk-hint { color: var(--muted); font-size: 13px; padding-top: 8px; }
#found .lk-pick {
margin-left: 6px;
padding: 2px 8px;
font-size: 13px;
color: var(--accent);
background: transparent;
border: 1px solid var(--accent);
border-radius: 12px;
cursor: pointer;
}
/* ---------- оглавление настроек ---------- */
/* Девять разделов подряд на одной странице читались только пролистыванием
целиком. Теперь оглавление: название, состояние подписью и стрелка.
Подпись не украшение — по ней видно, надо ли вообще заходить внутрь. */
.settings.hub { background: var(--bg-chat); }
.hub-group {
display: block;
margin: 12px;
background: var(--bg);
border-radius: 14px;
overflow: hidden;
}
.hub-item {
display: flex;
align-items: center;
gap: 12px;
padding: 11px 14px;
color: var(--text);
text-decoration: none;
border-bottom: 1px solid var(--line);
}
.hub-item:last-child { border-bottom: 0; }
.hub-item:active { background: var(--bg-chat); }
/* Цветная плашка со значком: канал, люди, автоответы различаются с одного
взгляда, без чтения. Размер 32 — крупнее теряет строку в высоте. */
.hub-ico {
flex: 0 0 32px;
width: 32px; height: 32px;
display: flex; align-items: center; justify-content: center;
border-radius: 9px;
color: #fff;
}
.hub-ico svg { width: 20px; height: 20px; }
.ico-green { background: #34c759; }
.ico-violet { background: #7d5fff; }
.ico-blue { background: #3390ec; }
.ico-orange { background: #f5a623; }
.ico-teal { background: #14b8a6; }
.ico-red { background: #ef4444; }
.ico-indigo { background: #5b6ee1; }
.hub-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.hub-title { font-size: 16px; line-height: 1.25; }
.hub-sub { font-size: 13px; color: var(--muted); line-height: 1.25; }
.hub-go { color: var(--muted); font-size: 20px; line-height: 1; }
/* Оранжевая стрелка — единственное место, где список кричит: там что-то
требует человека (канал отвалился, уведомления никому не приходят). */
.hub-go.warn { color: #e0803a; }
.hub-foot { padding: 6px 12px 24px; }
.hub-foot .note { padding: 0 2px 10px; }
/* Строка канала: логотип вместо цветной точки, номер под названием. */
.accounts .ch-ico { grid-area: dot; width: 28px; height: 28px; border-radius: 8px; }
.accounts .ch-text { grid-area: label; display: flex; flex-direction: column; gap: 1px;
min-width: 0; }
.accounts li:has(.ch-ico) {
grid-template-columns: 28px 1fr auto 8px;
grid-template-areas: "dot label state dot2";
padding: 9px 0;
}
.accounts li:has(.ch-ico) .dot { grid-area: dot2; }
.accounts li:has(.ch-ico) .phone { grid-area: auto; font-size: 12px; }
.accounts li.tappable:has(.ch-ico)::after { content: none; }
button.wide.primary {
width: 100%; margin-top: 12px;
background: var(--accent); color: #fff; border: 0;
border-radius: 12px; padding: 13px; font-size: 16px;
}
/* Значок канала в списке аккаунтов — тот же логотип, что в ленте чатов. */
.accounts .chan-slot { display: flex; align-items: center; justify-content: center; }
.accounts .chan-slot svg { width: 28px; height: 28px; border-radius: 50%; }
/* Список каналов карточкой, как оглавление: страница перестаёт быть
«строками, приклеенными к краю экрана». */
.settings .accounts {
background: var(--bg); border-radius: 14px; padding: 2px 12px; margin: 0;
}
.settings section:has(.accounts) { background: var(--bg-chat); border-bottom: 0; }
/* Название аккаунта — обычным весом: в списке из пятнадцати строк жирный
шрифт перестаёт что-либо выделять и просто утяжеляет экран. */
.settings .accounts .label { font-weight: 500; font-size: 16px; }
.settings .accounts .state { font-size: 13px; }
.settings .connect {
background: var(--bg); border-radius: 14px; padding: 12px; margin-top: 12px;
}
.settings .connect select, .settings .connect input { margin: 0 0 8px; }
/* ---------- операторы ---------- */
.op-face {
flex: 0 0 34px; width: 34px; height: 34px;
display: flex; align-items: center; justify-content: center;
border-radius: 50%; color: #fff; font-size: 14px; font-weight: 600;
}
.op-face.big { width: 64px; height: 64px; font-size: 24px; margin: 0 auto 10px; }
.op-me {
margin-left: 6px; padding: 1px 7px; border-radius: 9px;
font-size: 11px; font-weight: 500;
color: var(--accent); background: rgba(51,144,236,.14);
}
.hub-item .op-state { font-size: 13px; color: #34c759; }
.hub-item .op-state.off { color: var(--muted); }
.op-hero { padding: 18px 14px 6px; text-align: center; }
.op-hero #op-name {
width: 100%; max-width: 320px; margin: 0 auto; text-align: center;
font-size: 18px; font-weight: 600;
}
.op-hero .note { margin-top: 6px; }
.op-block { padding: 4px 14px 12px; }
.op-block h2 {
font-size: 13px; text-transform: uppercase; letter-spacing: .4px;
color: var(--muted); font-weight: 600; margin: 12px 0 6px;
}
.op-block .note { padding-bottom: 4px; }
/* Одно право — одна строка: название слева, переключатель справа. В прежнем
виде галочка стояла ПЕРЕД текстом, и восемь строк читались как список
покупок, а не как настройка доступа. */
.op-right {
display: flex; align-items: center; gap: 12px;
padding: 11px 0; border-bottom: 1px solid var(--line);
font-size: 15px; cursor: pointer;
}
.op-right:last-of-type { border-bottom: 0; }
.op-right > span:first-child { flex: 1; min-width: 0; }
.op-right .sw { position: absolute; opacity: 0; pointer-events: none; }
.op-right .sw-track {
flex: 0 0 46px; width: 46px; height: 28px; border-radius: 14px;
background: var(--line); position: relative; transition: background .15s;
}
.op-right .sw-track::after {
content: ""; position: absolute; top: 2px; left: 2px;
width: 24px; height: 24px; border-radius: 50%; background: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s;
}
.op-right .sw:checked + .sw-track { background: var(--accent); }
.op-right .sw:checked + .sw-track::after { transform: translateX(18px); }
.op-card .op-row { display: flex; gap: 8px; align-items: center; }
.op-card .op-row input, .op-card .op-row select { margin: 0; }
a.wide.primary {
display: block; text-align: center; text-decoration: none;
width: 100%; margin-top: 12px; padding: 13px;
background: var(--accent); color: #fff; border-radius: 12px; font-size: 16px;
}
/* ---------- переписка: геометрия по макету ---------- */
/* Одинаковый радиус без «хвоста» у последнего пузыря: хвост имеет смысл там,
где сообщения идут вперемешку от разных людей, а в переписке с одним
гостем он только рвёт ритм ленты. */
.msg { border-radius: 18px; padding: 7px 12px; }
.msg.in { border-bottom-left-radius: 18px; }
.msg.out { border-bottom-right-radius: 18px; }
/* Сообщения одного отправителя стоят плотно, смена стороны — с воздухом:
так видно реплики разговора, а не однородную ленту. */
#feed { gap: 2px; }
.msg.in + .msg.out, .msg.out + .msg.in { margin-top: 9px; }
.msg .meta { margin: 4px 0 0 10px; }
/* Картинка занимает пузырь целиком: рамка вокруг фото съедала ширину и
делала вложение мельче, чем оно есть. */
.msg:has(.media) { padding: 3px; }
.msg:has(.media) .meta { margin: 2px 8px 4px 10px; }
.msg:has(.media) .text { display: block; padding: 4px 9px 2px; }
/* ---------- список чатов: плотнее ---------- */
/* Было до пяти строк на чат: имя, объявление, превью, метки, аккаунт. На
экране помещалось восемь переписок из четырёхсот. Теперь две строки, а
третья появляется только там, где есть метки или нужен ярлык аккаунта. */
.chat a {
grid-template-areas: "av row1" "av row2" "av row3";
padding: 8px 14px;
}
.chat .row1 { gap: 6px; }
/* Апартамент рядом с именем: «Анастасия · апарт 7012» — одна мысль, и
разносить её на две строки значило терять строку экрана на каждом чате. */
.chat .apt {
flex: 0 1 auto; min-width: 0;
font-size: 13px; color: var(--muted);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat .apt[hidden] { display: none; }
/* Ужимается в первую очередь апартамент, потом имя; время и ярлык аккаунта
не ужимаются никогда — иначе на узком экране от них остаётся многоточие,
а именно они отвечают на вопрос «кому и с какого аккаунта отвечать». */
/* Порядок важности в строке: имя → апартамент → аккаунт → время. Ужимается
всё в обратном порядке, поэтому у аккаунта самый большой коэффициент
сжатия: «апарт 7012» отвечает на вопрос «о чём речь», а ярлык аккаунта —
только «кому отвечать», и его можно дочитать в самом чате. */
.chat .title { flex: 0 1 auto; min-width: 7em; }
.chat .apt { flex: 0 8 auto; }
.chat .row1 .account {
margin-left: auto; flex: 0 200 auto; min-width: 0;
font-size: 12px; color: var(--muted);
overflow: hidden; text-overflow: clip; white-space: nowrap;
}
.chat .time { flex: none; }
.chat .row3 {
grid-area: row3; display: flex; align-items: center; gap: 6px;
min-width: 0; margin-top: 2px;
}
.chat .row3[hidden] { display: none; }
.chat .row3 .row-labels { margin: 0; }
.chat .row2 .stage { margin-right: 6px; }
/* Шапка: заголовок со счётчиком в одну строку и не переносится. */
h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#filter-line #account-filter {
max-width: 46vw; font-size: 13px; padding: 4px 8px; border-radius: 14px;
}
/* ---------- шапка списка и панель каналов ---------- */
header .ico-btn, #menu-btn {
flex: none; display: flex; align-items: center; justify-content: center;
width: 34px; height: 34px; padding: 0;
background: transparent; border: 0; color: var(--accent);
text-decoration: none; cursor: pointer;
}
#menu-btn { color: var(--text); margin-left: -6px; }
header .ico-btn svg, #menu-btn svg {
width: 23px; height: 23px; fill: none; stroke: currentColor;
stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
header .ico-btn:active { opacity: .5; }
/* Панель выезжает слева и толкает список вправо — не на весь экран: видно,
что список никуда не делся и панель закрывается касанием мимо. */
#side {
position: fixed; top: 0; left: 0; bottom: 0; z-index: 20;
width: 76vw; max-width: 300px;
padding: max(12px, env(safe-area-inset-top)) 0 12px;
background: var(--header); border-right: 1px solid var(--line);
transform: translateX(-100%); transition: transform .2s ease;
overflow-y: auto; overscroll-behavior: contain;
}
body.side-open #side { transform: none; }
#side-back {
position: fixed; inset: 0; z-index: 15; background: rgba(0,0,0,.28);
opacity: 0; transition: opacity .2s ease;
}
body.side-open #side-back { opacity: 1; }
/* Список остаётся на месте и виден полосой справа — по нему понятно, что
панель наложена на то же окно и закрывается касанием мимо.
Сдвигать сам body нельзя: он становится точкой отсчёта для position:fixed,
и панель уезжает вместе с ним. */
body.side-open { overflow: hidden; }
#side { box-shadow: 0 0 24px rgba(0,0,0,.18); }
.side-head {
padding: 6px 16px 10px; font-size: 13px; font-weight: 600;
text-transform: uppercase; letter-spacing: .4px; color: var(--muted);
}
.side-item {
display: flex; align-items: center; gap: 10px; width: 100%;
padding: 11px 16px; border: 0; background: transparent;
font: inherit; font-size: 16px; color: var(--text); text-align: left;
cursor: pointer;
}
.side-item:active { background: var(--bg-chat); }
.side-item.on { color: var(--accent); font-weight: 600; }
.side-item .chan-slot { flex: none; width: 26px; height: 26px; display: flex; }
.side-item .chan-slot svg, .side-item .chan-slot img {
width: 26px; height: 26px; border-radius: 50%;
}
.side-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
white-space: nowrap; }
/* Разделы инбокса — выше каналов (владелец, 23.09.2026). */
.side-nav { display: flex; flex-direction: column; padding-bottom: 6px;
margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.side-link { display: flex; align-items: center; gap: 12px; padding: 11px 16px;
color: var(--text); text-decoration: none; font-size: 16px; }
.side-link svg { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--muted);
stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.side-link.on { color: var(--accent); font-weight: 600; }
.side-link.on svg { stroke: var(--accent); }
.side-link:active { background: var(--bg-chat); }
.side-n { margin-left: auto; font-size: 13px; font-weight: 600; color: #d33a2c; }
.side-channels summary { padding: 11px 16px; color: var(--muted); font-size: 14px;
cursor: pointer; list-style: none; }
.side-channels summary::-webkit-details-marker { display: none; }
.side-channels summary::after { content: ' ▾'; }
.side-channels[open] summary::after { content: ' ▴'; }
#checkins-count:not(:empty) { color: #d33a2c; font-weight: 600; }
/* ---------- поиск внутри переписки ---------- */
#find-bar {
display: flex; align-items: center; gap: 6px;
padding: 7px 10px; background: var(--header);
border-bottom: 1px solid var(--line);
}
#find-bar[hidden] { display: none; }
#find-input {
flex: 1; min-width: 0; margin: 0; padding: 8px 12px;
font-size: 16px; /* меньше — iOS зумит страницу при фокусе */
border: 1px solid var(--line); border-radius: 18px;
background: var(--bg); color: var(--text);
}
#find-count { font-size: 13px; color: var(--muted); white-space: nowrap; }
#find-bar button {
flex: none; width: 32px; height: 32px; padding: 0; margin: 0;
background: transparent; border: 0; color: var(--accent); font-size: 16px;
}
/* Найденное — жёлтой заливкой по самому слову, а не по всему пузырю: так
видно, за что зацепился поиск. Текущее совпадение обведено, чтобы не
теряться среди десятка одинаковых. */
mark.find-hit {
background: rgba(255,214,0,.55); color: inherit;
border-radius: 3px; padding: 0 1px;
}
:root[data-theme="dark"] mark.find-hit { background: rgba(255,214,0,.35); }
.msg.found-now { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Кнопка поиска в шапке чата — рисунком и без подложки: рядом с аватаркой
любой фон читается как второй значок канала. */
#find-btn { background: transparent; border: 0; padding: 0 2px;
color: var(--muted); line-height: 0; }
#find-btn svg { display: block; }
/* День выезда до расчётного часа: гость ещё здесь, но уже собирается —
оранжевым, как и всё, что требует внимания сегодня. */
.stage-checkout { background: #fff1e0; color: #a35b17; }
:root[data-theme="dark"] .stage-checkout { background: #4a3418; color: #ffbe7a; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .stage-checkout { background: #4a3418; color: #ffbe7a; }
}
/* Крестик на пузыре загрузки: пока ролик ползёт вверх на телефонном
интернете, передумать — обычное дело, а отменить было нечем. */
.local-upload { position: relative; }
.up-cancel {
position: absolute; top: 6px; right: 6px;
width: 30px; height: 30px; padding: 0; margin: 0;
border: 0; border-radius: 50%;
background: rgba(0,0,0,.45); color: #fff; font-size: 15px; line-height: 1;
display: flex; align-items: center; justify-content: center;
}
.up-cancel:active { background: rgba(0,0,0,.65); }
/* Тишина по чату: значок рядом с именем и в строке списка. Не красный и не
крупный — это состояние, а не тревога. */
.muted-mark { margin-left: 6px; font-size: 13px; opacity: .75; }
.chat .mute-mark, .chat .remind-mark, .chat .later-mark { font-size: 11px; flex-shrink: 0; opacity: .7; }
/* Голосовое: круглая кнопка, форма волны и время — как в мессенджерах.
Системный