/* ClientsChat dev-тест-клиент — стиль. Ванильный CSS, без зависимостей.
Тёмная тема, минимум декора: это QA-инструмент, не продакшн-UI. */
:root {
/* 🧭🧭 ДОРОЖКА ЛЕВОГО БЛОКА = рейка хабов. ВТОРОЕ МЕНЮ ВИДОВ (`--hub-w`) открывается при
наведении ПОВЕРХ контента и в дорожку НЕ входит (согласовано владельцем 2026-10-11,
раунд 7: «подменю… при наведении, на всю высоту, рядом с рельсом, поверх контента —
контент не смещается»). Раунд 5 резервировал под панель постоянные 232px дорожки —
владелец увидел «подменю смещает контент справа» и вернул.
🔴 ОДНО МЕСТО: все, кому нужна «область справа от левого блока» (сетка `.chat`,
полноэкранные страницы, острова `island.css`), читают `--rail-track`, а не число. */
--rail-w: 96px;
--hub-w: 300px;
--hub-gap: 8px;
--rail-track: var(--rail-w);
--bg: #0f1115;
--panel: #171a21;
--panel-2: #1e222b;
--panel-3: #262b36; /* поднятый слой: тултипы/меню/поповеры/undo-тост (раньше токен был
«битым» — инжекты/таймлайн падали в тёмный фолбэк даже в светлой) */
--line: #2a2f3a;
--line-strong: #353b48; /* границы контролов / hover-границы */
--text: #e6e9ef;
--muted: #8b93a3;
/* select-chevron-ink-light-1 · шеврон селекта — ОДНА картинка на продукт, по значению на тему. В url()
переменная не подставляется, поэтому чернила — значение --muted своей темы: #8b93a3 здесь, #5c5c61 в блоке
html[data-theme="light"]. Три начертания: обычное · компактное (select.tw-select, .td-field) · жирное (окно
настроек). Новый селект берёт var(--sel-chev*), своего data-URI шеврона не заводит. */
--sel-chev: url("data:image/svg+xml;utf8, в гибком/блочном
контейнере иконка растягивается на всю ширину («гигантские иконки»). Базовый размер
16px + flex:none. Контексты переопределяют (рельс 22px, звонок 24px и т.п.). */
svg.ic { width: 16px; height: 16px; flex: none; vertical-align: middle; }
html, body {
margin: 0;
height: 100vh;
height: 100dvh;
overflow: hidden;
background: var(--bg);
color: var(--text);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-size: 14px;
}
/* ══ РАЗМЕР ИНТЕРФЕЙСА (доступность для возрастной аудитории) ═══════════════════
Весь CSS в px → менять корневой font-size бесполезно. Единственный надёжный
глобальный масштаб — CSS zoom на (Chromium/Safari/Firefox 126+; PWA и
Flutter-WebView как раз на них). Zoom заодно магнифицирует и iframe документа.
Бутстрап в ставит зум и data-uis ещё до отрисовки (без мигания).
Грабли, проверенные на живом проде инъекцией:
(1) height:100dvh НЕ пересчитывается под zoom (985px×1.3=1281 > экран) →
вертикальный overflow. Лечим компенсацией высоты html/body (÷ масштаб).
(2) Оверлеи с max-height:NNvh так же переполняются под zoom (модалка 88vh при
1.4× вылезает за экран, крестик уходит вверх) → кап высоты 96dvh/scale
(после зума ≤96% реального экрана). Явный список оверлеев — без широких
substring-селекторов, чтобы не задеть layout-элементы. */
html[data-uis], html[data-uis] body { height: calc(100dvh / var(--ui-scale, 1)); }
html[data-uis] :is(
.modal-box, .lightbox-content, .cc-sheet, .cli-modal, .cli-panel, .co-panel,
.ev-modal, .pinned-sheet, .pr-panel, .notif-panel, .today-panel, .task-info-panel,
.ticket-info-panel, .v2-drawer, .v2-modal, .ai-assist-box, .ck-composer, .rec-report-body,
.msged-box
) { max-height: calc(96dvh / var(--ui-scale, 1)) !important; }
/* Контролы «А− А+» в шапке (всегда на виду — пожилой человек сразу находит) */
.ui-scale-ctl { display: inline-flex; align-items: center; gap: 2px; margin: 0 2px; }
.ui-scale-btn {
min-width: 30px; padding: 4px 8px; font-weight: 700; line-height: 1;
font-size: 13px; letter-spacing: .5px;
}
.ui-scale-btn .ui-scale-sign { font-size: 15px; }
/* Секция «Размер интерфейса» в Настройках */
.ui-scale-presets { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.ui-scale-preset {
flex: 1 1 auto; min-width: 120px; padding: 12px 14px; border-radius: 10px;
border: 1px solid var(--line); background: var(--panel-2); color: var(--text);
font-size: 15px; font-weight: 600; cursor: pointer; transition: border-color .12s, background .12s;
}
.ui-scale-preset:hover { border-color: var(--primary-2); }
.ui-scale-preset.active { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 16%, transparent); color: var(--primary-2); }
.ui-scale-stepper { display: flex; align-items: center; gap: 14px; }
.ui-scale-step {
min-width: 56px; padding: 12px 0; border-radius: 10px; border: 1px solid var(--line);
background: var(--panel-2); color: var(--text); font-size: 20px; font-weight: 700; cursor: pointer;
}
.ui-scale-step:hover { border-color: var(--primary-2); }
.ui-scale-value { font-size: 20px; font-weight: 700; min-width: 74px; text-align: center; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.hidden { display: none !important; }
code {
background: var(--panel-2);
padding: 1px 5px;
border-radius: 5px;
font-size: 12px;
}
/* CLIE-1946 · светлая: --panel-2 = холст (#f5f5f7) — голый на холсте сливался (1.00).
Тон дорожки колонки (чуть темнее холста) виден и на холсте, и на белом. :where держит вес тега
(0,0,1): любое правило с классом (.md-body code, pre code…) сильнее и не задето. */
:where(html[data-theme="light"]) code,
html[data-theme="light"] .ai-connect code { background: color-mix(in srgb, var(--bg) 92%, var(--text)); } /* .ai-connect-url code красит --panel-2 стиль из app.js (0,2,1) */
/* ---- topbar ---- */
/* 🔴🔴 ШАПКА — СПЛОШНАЯ ЛЕНТА ВО ВСЮ ШИРИНУ (CLIE-975·3, владелец 09.09.2026: «Ты добавил
отступы и сделал как островок, ТУТ ЭТО НЕ В СТИЛЕ ДИЗАЙНА, верни обратно. Я лишь говорил
про элементы ВНУТРИ»). Выбор «вариант 5» относился к РАССТАНОВКЕ элементов, а не к плите:
поля/скругление/тень у ОДНОГО блока делали шапку чужой среди сплошных колонок продукта.
🔴 Островной вид не выброшен, а поднят на уровень ВСЕГО продукта и стал НЕОБЯЗАТЕЛЬНОЙ
шкурой (`html[data-ui="island"]`, island.css) — владелец там же сказал «либо давай ВСЕ
блоки в таком стиле, посмотрим и решим». База продукта — лента, шкура — по выбору. */
.topbar {
display: flex;
align-items: center;
gap: 16px;
/* высота фиксирована токеном (см. --topbar-h) — .screen вычитает ровно её */
height: var(--topbar-h); box-sizing: border-box; flex: none;
padding: 10px 24px;
background: var(--panel);
border-bottom: 1px solid var(--line);
box-shadow: 0 2px 10px rgba(0,0,0,.2);
position: relative; z-index: 2;
}
/* Кнопки шапки — всегда в ОДНУ строку. На узких экранах подпись («Установить»,
«Включить уведомления») переносилась на 2 строки → кнопка 44px вместо 30px и
шапка распиралась выше --topbar-h. Высота шапки фиксирована, поэтому перенос
здесь недопустим: текст ужимается многоточием, а не ломает сетку. */
.topbar button { white-space: nowrap; }
/* Крайние элементы шапки не должны липнуть к кромке/обрезаться: у первого и
последнего — гарантированный отступ от края (свыше основного padding). */
.topbar > :first-child { margin-left: 2px; }
.topbar > :last-child { margin-right: 2px; }
.topbar .conn { flex-shrink: 0; }
.topbar .brand { flex-shrink: 0; }
/* 🔴🔴 ШАПКА НЕ СХЛОПЫВАЕТСЯ НИ ПРИ КАКОМ МАСШТАБЕ (CLIE-459).
При «А+» (масштаб 130–200%) макетная ширина окна падает (1440 → 1108 → 720), а медиазапросы
этого НЕ видят — они меряют настоящее окно. Раньше нехватку ширины разбирал flex: элементы
шапки ужимались НИЖЕ своего содержимого (у .mode-toggle ещё и overflow:hidden → минимальный
размер 0), и подписи «Личное|Работа» налезали друг на друга и обрезались («ЛиРа»).
Теперь: элементы шапки НЕ ужимаются, а лишнее убирается ступенями — их считает topbarFit()
ИЗМЕРЕНИЕМ (см. app.js), поэтому работает при любом окне И любом масштабе, а новая кнопка
в шапке получает то же поведение сама. Порядок ступеней — от наименее ценного к самому нужному. */
.topbar > * { flex: 0 0 auto; }
.who .who-name { max-width: 240px; }
.topbar.tb-fit-1 .conn .muted,
.topbar.tb-fit-1 .who .who-st-line { display: none; }
/* topbar-bells-1 · ступень 1b: предложения короче, а не сразу одни значки. «Установить» остаётся значком
«скачать», у «Включить уведомления» — колокольчик с плюсом и слово «Включить» (хвост .ntb-tail уходит).
Без неё в окне 1440 рядом стояли два колокольчика без подписи. Ступень 2 — по-прежнему одни значки. */
.topbar.tb-fit-1b #installBtn { font-size: 0; gap: 0; }
.topbar.tb-fit-1b #notifyTopBtn .ntb-tail { display: none; }
.topbar.tb-fit-2 #installBtn,
.topbar.tb-fit-2 #notifyTopBtn { font-size: 0; gap: 0; } /* остаётся иконка + подсказка (title) */
.topbar.tb-fit-3 .who .who-name { display: none; }
.topbar.tb-fit-4 .mode-seg > span:not(.mode-badge) { display: none; }
.topbar.tb-fit-4 .mode-seg { padding: 5px 9px; }
.topbar.tb-fit-4 { gap: 10px; padding-left: 14px; padding-right: 14px; }
.topbar.tb-fit-5 .brand { display: none; }
.topbar.tb-fit-5 { gap: 7px; padding-left: 8px; padding-right: 8px; }
/* Предпоследняя ступень — убрать ПРЕДЛОЖЕНИЯ (установить приложение, включить уведомления):
они не действие «сейчас», их же место есть в Настройках и в нижнем баннере. Заодно уходит
путаница «два одинаковых колокольчика» (предложение и панель уведомлений), когда от кнопок
остались одни иконки. */
.topbar.tb-fit-6 #installBtn,
.topbar.tb-fit-6 #notifyTopBtn { display: none; }
/* …и заодно поджимаем сами кнопки-иконки: лучше 6 компактных кнопок, чем 5 просторных и
одна за краем. Ниже этого не ужимаем — иначе палец не попадает. */
.topbar.tb-fit-6 { gap: 6px; }
.topbar.tb-fit-6 .ghost.small { padding: 6px 7px; }
.topbar.tb-fit-6 .ui-scale-btn { min-width: 26px; padding: 4px 6px; }
/* Последний рубеж: телефон + масштаб 130–200% (макетная ширина ~300px) — даже одни иконки
физически не влезают. Тогда шапка становится прокручиваемой, а НЕ обрезает «А−/А+» и
«Настройки»: именно ими человек уменьшает масштаб обратно — отрезать их нельзя. */
.topbar.tb-fit-7 { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; }
.topbar.tb-fit-7::-webkit-scrollbar { display: none; }
.brand { font-weight: 700; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.who { margin-left: auto; font-weight: 600; }
/* ── #who как кликабельный чип: аватар + имя + короткая строка кастом-статуса. Клик → поповер
статуса. Apple-grade: компактный, hover-подсветка, hairline, плавный переход. ── */
.who.who-status {
display: inline-flex; align-items: center; gap: 8px;
padding: 4px 8px; margin-left: auto; border-radius: 10px; cursor: pointer;
max-width: 260px; transition: background .14s ease;
}
.who.who-status:hover { background: var(--hover); }
.who.who-status:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--sel); }
.who .who-av {
width: 26px; height: 26px; border-radius: 50%; flex: none;
background: var(--acc-grad); color: #fff; font-size: 11px; font-weight: 700;
display: flex; align-items: center; justify-content: center;
background-size: cover; background-position: center;
}
.who .who-av.has-img { color: transparent; }
.who .who-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who .who-st-line { display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 130px; color: var(--muted); font-weight: 500; }
.who .who-st-line .who-st-e { font-size: 13px; line-height: 1; }
.who .who-st-line .who-st-moon { display: inline-flex; }
.who .who-st-line .who-st-moon svg.ic { width: 13px; height: 13px; color: #7c8db3; }
.who .who-st-line .who-st-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.who .who-st-line::before { content: "·"; color: var(--line); margin-right: 2px; }
/* ═══════════════════════════════════════════════════════════════════════════════
🧭 ШАПКА — CLIE-975. Правая группа, действия со СЛОВАМИ и витрина компоновок.
Владелец: «зачем тут показывать элементы, которые должны быть в настройках
оформления? … уведомления рядом с идеями, у них похожи иконки … размести идеи
слева от профиля». Тема и «А− А+» из шапки убраны (их дом — Настройки →
Оформление / Размер интерфейса), шестерёнка уехала в меню профиля.
Размерный класс ряда — общий `--ctl-h/--ctl-r/--ctl-fs` (канон control-size): все
кнопки шапки одной высоты, «на глаз» тут ничего не подбирается.
═════════════════════════════════════════════════════════════════════════════ */
/* Распорка: единственный ГИБКИЙ элемент строки — с неё начинается правая группа.
`flex:1 1 0` вместо `margin-left:auto` у #who: профиль перестал быть первым справа. */
.topbar .tb-gap { flex: 1 1 0 !important; min-width: 0; }
.topbar .who.who-status { margin-left: 0; height: var(--ctl-h); box-sizing: border-box; }
/* Действие шапки: иконка + (по компоновке) слово + бейдж. */
.topbar .hdr-act {
position: relative; display: inline-flex; align-items: center; gap: 6px;
height: var(--ctl-h); border-radius: var(--ctl-r); padding: 0 9px;
color: var(--muted); font-size: var(--ctl-fs); font-weight: 600;
transition: background .14s ease, color .14s ease;
}
.topbar .hdr-act:hover, .topbar .hdr-act.active { color: var(--text); background: var(--hover); }
.topbar .hdr-act svg.ic { width: 18px; height: 18px; }
.topbar .hdr-act .ideas-btn-ico, .topbar .hdr-act .today-btn-ico { display: inline-flex; }
/* Подпись действия. Слово есть только у «Идей» — их спутали с колокольчиком (просьба
владельца): у остальных действий подпись живёт подсказкой (canon instant-tooltip). */
.topbar .hdr-lbl { white-space: nowrap; }
.topbar #todayBtn .hdr-lbl { display: none; }
/* 🤝 Чип «Мой ИИ у …» (владелец 15.09.2026: «где страница управления?»). Виден только пока есть
чем управлять, поэтому он — мягкая капсула акцента (подложка 11% + хэйрлайн-кольцо 24%, канон
CLIE-483), а не ghost-иконка: это состояние, которое надо заметить. Ждёт заявка — янтарь.
Чернила смешаны с --text: тон держит контраст и на светлой, и на тёмной подложке.
🔴 `.ghost` в селекторе — вес (0,3,0): в светлой теме `html[data-theme="light"] .ghost` (0,2,1)
снимал подложку и кольцо — на кадре фон чипа 247,250,253 = фон шапки (в тёмной 41,43,66 на 29,31,41).
`.wait` ниже того же веса и стоит позже — янтарь не перебит. */
.topbar .hdr-aimine.ghost {
color: color-mix(in srgb, var(--accent) 78%, var(--text));
background: color-mix(in srgb, var(--accent) 11%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent);
animation: stPopIn .16s cubic-bezier(.3,.8,.4,1);
}
.topbar .hdr-aimine.ghost:hover { color: color-mix(in srgb, var(--accent) 78%, var(--text)); background: color-mix(in srgb, var(--accent) 17%, transparent); }
.topbar .hdr-aimine.wait {
color: color-mix(in srgb, var(--warning) 62%, var(--text));
background: color-mix(in srgb, var(--warning) 14%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warning) 34%, transparent);
}
.topbar .hdr-aimine.wait:hover { color: color-mix(in srgb, var(--warning) 62%, var(--text)); background: color-mix(in srgb, var(--warning) 20%, transparent); }
.topbar .hdr-aimine .hdr-aimine-ico { display: inline-flex; }
.topbar .hdr-aimine .hdr-aimine-ico svg.ic { width: 16px; height: 16px; }
/* Имя коллеги длинное — подпись режется многоточием, а не ломает ряд (min-width:0 + ellipsis). */
.topbar .hdr-aimine .hdr-lbl { min-width: 0; max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.topbar.tb-fit-3 .hdr-aimine .hdr-lbl { max-width: 150px; }
/* Состояние сети: точка молчит, пока всё хорошо; слово возвращается на любой беде
(прогрессивное раскрытие — не отбирать экран под то, что и так в порядке). */
.topbar .conn:has(.dot-on) .muted { display: none; }
/* 🔴 Витрины компоновок (`[data-hdr="island|words|quiet|more|float"]`) здесь БОЛЬШЕ НЕТ:
владелец выбрал «Плавающую», и она стала базовой шапкой выше. Возврат витрины ловит
сторож ФОРМОЙ (design_lint → HDRONE_MECH). */
/* ── 👤 Меню профиля (#pfPop) ───────────────────────────────────────────────────
Слой берёт общая дверь `ccLayerLift` (CC_LAYER_SEL), своих z-index нет. */
.pf-pop {
position: fixed; width: 320px; padding: 8px;
background: var(--panel); color: var(--text);
border: 1px solid var(--line); border-radius: 14px;
box-shadow: 0 18px 50px rgba(0,0,0,.28);
animation: stPopIn .14s cubic-bezier(.3,.8,.4,1);
max-height: min(82vh, calc(100vh - 24px)); overflow-y: auto; overscroll-behavior: contain;
}
.pf-pop-head { display: flex; align-items: center; gap: 10px; padding: 6px 8px 10px; }
.pf-pop-av {
width: 36px; height: 36px; border-radius: 50%; flex: none;
background: var(--acc-grad); color: #fff; font-size: 13px; font-weight: 700;
display: flex; align-items: center; justify-content: center;
background-size: cover; background-position: center;
}
.pf-pop-av.has-img { color: transparent; }
.pf-pop-id { display: flex; flex-direction: column; min-width: 0; }
.pf-pop-nm { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-pop-ph { color: var(--muted); font-size: 12px; }
.pf-pop-row {
display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box;
padding: 9px 8px; border: 0; border-radius: 10px; background: transparent;
color: var(--text); text-align: left; cursor: pointer;
transition: background .12s ease;
}
.pf-pop-row:hover { background: var(--hover); }
.pf-pop-row.on { background: color-mix(in srgb, var(--primary) 12%, transparent); }
.pf-pop-ic { display: inline-flex; color: var(--muted); flex: none; }
.pf-pop-ic svg.ic { width: 18px; height: 18px; }
.pf-pop-tx { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.pf-pop-t { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-pop-s { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-pop-ch { display: inline-flex; color: var(--muted); flex: none; opacity: .55; }
.pf-pop-ch svg.ic { width: 16px; height: 16px; }
/* Подвал «Оформление»: тема и размер интерфейса ушли из шапки, но не на три клика вглубь. */
.pf-pop-look {
display: flex; align-items: center; gap: 6px;
margin-top: 6px; padding: 8px 8px 4px; border-top: 1px solid var(--line);
}
/* 🧠 0363 · модели выдачи токенов: группы по провайдеру внутри тех же галочек `.aig-acc`;
в пикере модели Среды запрещённая коллегой строка погашена, а не спрятана. */
.aig-models .aig-prov { flex-basis: 100%; display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; margin: 6px 0 2px; }
.aig-models .aig-prov button { font: inherit; text-transform: none; letter-spacing: 0; background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; }
.tip-aimodelpick button[disabled] { opacity: .45; cursor: not-allowed; }
/* 👤 CLIE-1147 · вход в настройку меню профиля — тихой строкой подвала: вход стоит у самой
вещи (CLIE-857·2), но не спорит с пунктами, которые человек сюда вывел. */
.pf-pop-cfg { margin-top: 2px; border-top: 1px solid var(--line); padding-top: 8px; }
.pf-pop-cfg .pf-pop-t { font-weight: 500; color: var(--muted); font-size: 13px; }
.pf-pop-cfg .pf-pop-s { display: none; }
.pf-pop-lk { color: var(--muted); font-size: 12px; font-weight: 600; margin-right: auto; }
.pf-look-btn {
display: inline-flex; align-items: center; justify-content: center;
min-width: 32px; height: 28px; padding: 0 8px; border-radius: 8px;
border: 1px solid var(--line); background: var(--panel-2); color: var(--text);
font-size: 12px; font-weight: 700; cursor: pointer; transition: border-color .12s, background .12s;
}
.pf-look-btn:hover { border-color: var(--primary-2); background: var(--hover); }
.pf-look-btn svg.ic { width: 16px; height: 16px; }
.pf-pop-zoom { color: var(--muted); font-size: 12px; min-width: 38px; text-align: right; }
/* ── Поповер статуса (#stPop) — как Slack «Update your status». Крепится к #who в топбаре. ── */
.st-pop {
position: fixed; z-index: 9700; width: 320px;
background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
padding: 14px; box-shadow: 0 18px 50px rgba(0,0,0,.32);
animation: stPopIn .14s cubic-bezier(.3,.8,.4,1);
/* 🔴 CLIE-620: у поповера НЕ БЫЛО ни потолка, ни скролла, а positionStPop клампит только
`top`. Внутри — шапка, энергия, 6 пресетов, поле, сетка эмодзи, «Очистить через», чипы
и «Не беспокоить» с расписанием: на невысоком окне низ уходил за экран безвозвратно.
Потолок + свой скролл, как у эталонного `.tc-pop`. */
max-height: min(82vh, calc(100vh - 24px)); overflow-y: auto; overscroll-behavior: contain;
}
@keyframes stPopIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.st-head { font-weight: 700; font-size: 14px; margin-bottom: 10px; color: var(--text); }
.st-pop .st-sub { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 14px 0 8px; font-weight: 600; }
.st-presets { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 10px; }
.st-preset {
display: flex; align-items: center; gap: 7px; padding: 7px 9px; border-radius: 9px;
border: 1px solid var(--line); background: var(--panel-2); color: var(--text);
cursor: pointer; font-size: 12.5px; text-align: left; transition: border-color .12s ease, background .12s ease;
}
.st-preset:hover { border-color: var(--primary); background: var(--hover); }
/* Кнопка пресета применяет статус сразу — значит обязана показывать, выбран он или нет
(та же пара токенов, что у .st-chip.on: акцентная заливка-тинт + акцентные чернила). */
.st-preset.on { background: var(--sel); border-color: var(--primary); color: var(--primary); font-weight: 600; }
.st-preset .st-preset-e { font-size: 15px; line-height: 1; flex: none; }
.st-preset .st-preset-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-custom { display: flex; align-items: center; gap: 7px; }
.st-emoji-btn {
width: 36px; height: 36px; flex: none; border-radius: 9px; border: 1px solid var(--line);
background: var(--panel-2); color: var(--text); cursor: pointer; font-size: 17px;
display: flex; align-items: center; justify-content: center; transition: border-color .12s ease;
}
.st-emoji-btn:hover { border-color: var(--primary); }
.st-emoji-btn .st-emoji-ph svg.ic { width: 18px; height: 18px; color: var(--muted); }
.st-text {
flex: 1; min-width: 0; height: 36px; border-radius: 9px; border: 1px solid var(--line);
background: var(--panel-2); color: var(--text); padding: 0 11px; font-size: 13px; outline: none;
transition: border-color .12s ease;
}
.st-text:focus { border-color: var(--primary); }
.st-clear-inline {
width: 30px; height: 36px; flex: none; border: none; background: transparent; color: var(--muted);
cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 8px;
}
.st-clear-inline:hover { background: var(--hover); color: var(--text); }
.st-clear-inline svg.ic { width: 15px; height: 15px; }
.st-emoji-grid {
display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; margin-top: 8px;
padding: 6px; background: var(--panel-2); border-radius: 10px; border: 1px solid var(--line);
max-height: 148px; overflow-y: auto;
}
.st-emoji-opt {
border: none; background: transparent; cursor: pointer; font-size: 18px; line-height: 1;
padding: 5px 0; border-radius: 7px; transition: background .1s ease;
}
.st-emoji-opt:hover { background: var(--hover); }
.st-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.st-chip {
font-size: 12px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line);
background: var(--panel-2); color: var(--text); cursor: pointer; transition: all .12s ease;
}
.st-chip:hover { border-color: var(--primary); }
.st-chip.on { background: var(--sel); border-color: var(--primary); color: var(--primary); font-weight: 600; }
.st-dnd { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.st-dnd-row { display: flex; align-items: center; gap: 9px; }
.st-dnd-ic { display: inline-flex; flex: none; }
.st-dnd-ic svg.ic { width: 17px; height: 17px; color: #7c8db3; }
.st-dnd-lbl { flex: 1; font-weight: 600; font-size: 13px; color: var(--text); }
.st-dnd-sw { flex: none; }
.st-dnd-state { margin: 6px 0 8px 26px; }
.st-dnd-opts { margin-left: 26px; }
.st-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; }
.st-foot .st-clear { color: var(--danger); }
.st-foot .ghost.small { font-size: 12.5px; padding: 7px 14px; border-radius: 9px; }
.st-foot .st-saved { text-align: right; }
/* Настройки: строки «Не беспокоить»/«Авто-статус» (подпись + переключатель). */
.notif-set-row.ndar-row { align-items: flex-start; }
.ndar-row .ndar-lbl { display: flex; flex-direction: column; gap: 2px; font-weight: 600; }
.ndar-row .ndar-sub { font-weight: 400; }
.conn { display: flex; align-items: center; gap: 6px; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dot-on { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.dot-off { background: #555; }
/* 🔌 ОФЛАЙН и НЕОТПРАВЛЕННОЕ — то же самое место состояния в шапке (второго индикатора
сети не заводим). Спокойная янтарная пилюля: работа офлайн — это НОРМА, а не авария,
поэтому без красного. Обе темы — через переменные. */
.dot-warn { background: var(--warning); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warning) 22%, transparent); }
.conn.conn-warn {
background: var(--warning-soft);
border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent);
border-radius: 999px; padding: 3px 10px 3px 8px;
transition: background .14s ease, border-color .14s ease;
}
.conn.conn-warn .muted { color: var(--warning); font-weight: 600; }
/* Узкая шапка прячет подпись состояния (ступень tb-fit-1) — но «нет сети / N ждут
отправки» человек обязан видеть на ЛЮБОЙ ширине: это про сохранность его правок. */
.topbar.tb-fit-1 .conn.conn-warn .muted,
.topbar.tb-fit-2 .conn.conn-warn .muted,
.topbar.tb-fit-3 .conn.conn-warn .muted { display: inline; }
@media (min-width: 761px) {
/* 📏 Размерный класс ряда (канон control-size; перепись «Глубины» I, lead-topbar-chip-size-1):
пилюля «N ждут отправки» с полями 3px сверху/снизу была 25px (кадр lead: y16–40) в ряду кнопок
шапки по --ctl-h (там 36px, y11–46) и «проваливалась». Теперь она берёт --ctl-h/--ctl-r/--ctl-fs,
как .hdr-act; боковые поля прежние (10/8), янтарная окраска состояния — та же. */
.topbar .conn.conn-warn {
height: var(--ctl-h); box-sizing: border-box; padding-top: 0; padding-bottom: 0;
border-radius: var(--ctl-r);
}
.topbar .conn.conn-warn .muted { font-size: var(--ctl-fs); }
}
/* ---- screens ---- */
/* 📲 CLIE-897: над шапкой может стоять плашка «Установите приложение» (телефон в браузере).
Её РЕАЛЬНУЮ высоту меряет app.js (ccInstBarMeasure) и кладёт в --cc-instbar-h — экран
вычитает ровно её. Плашки нет → переменной нет → 0px, поведение прежнее до байта. */
/* 🔒 11.10.2026: под шапкой может висеть плашка «пространство не оплачено» — её высоту меряет
payBarMeasure (app.js) в --cc-paybar-h, и экран вычитает ровно её. Нет плашки → 0px. */
/* 🔔 23.10.2026 (CLIE-2020, замер прода 1440×900 под тест-аккаунтом): у нижней кромки стоит полоса
«Включите уведомления» (#notifyBanner, fixed, 835–900) — она ложилась на поле ввода (832–878), и
`elementFromPoint` в его центре отдавал полосу: человек без включённых уведомлений жал в поле —
и ничего. Высоту прижатых к низу полос уже меряет дверь нижней кромки (ccBottomGap →
--cc-bottom-gap), экран вычитает её так же, как плашки сверху. Нет полосы → 0px. */
.screen { height: calc(100% - var(--topbar-h) - var(--cc-instbar-h, 0px) - var(--cc-paybar-h, 0px) - var(--cc-bottom-gap, 0px)); }
/* ---- login ---- */
.login {
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.card {
width: 100%;
max-width: 460px;
background: var(--panel);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 24px;
}
.card h1 { margin: 0 0 8px; font-size: 20px; }
.field { display: flex; flex-direction: column; gap: 6px; margin: 14px 0; }
.field > span { font-size: 12px; color: var(--muted); }
.row { display: flex; gap: 10px; align-items: flex-end; }
.grow { flex: 1; }
.hint { margin: -6px 0 8px; }
/* ── Знакомство (онбординг нового пользователя): аватар-герой + поля + тумблер ── */
#stepOnboard .ob-avw { position: relative; width: 96px; height: 96px; margin: 6px auto 16px; }
.ob-av { width: 96px; height: 96px; border-radius: 50%; background: var(--panel-2) center/cover no-repeat; box-shadow: 0 0 0 3px var(--panel), 0 0 0 5px var(--primary); display: flex; align-items: center; justify-content: center; color: var(--muted); overflow: hidden; cursor: pointer; transition: transform .13s ease; }
.ob-av:hover { transform: scale(1.03); }
.ob-av .ic { width: 40px; height: 40px; }
.ob-av-cam { position: absolute; right: -2px; bottom: -2px; width: 30px; height: 30px; border-radius: 50%; background: var(--acc-fill); color: #fff; border: 3px solid var(--panel); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: filter .12s ease; }
.ob-av-cam:hover { filter: brightness(1.08); }
.ob-av-cam svg { width: 15px; height: 15px; }
#stepOnboard textarea { resize: none; }
.ob-uname { display: flex; align-items: center; gap: 4px; }
.ob-uname .ob-at { color: var(--muted); flex: 0 0 auto; }
.ob-uname input { flex: 1; min-width: 0; }
.ob-toggle { display: flex; align-items: center; gap: 14px; margin: 18px 0 6px; }
.ob-toggle-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ob-toggle-tx b { font-size: 14px; font-weight: 600; color: var(--text); }
.ob-toggle-tx small { font-size: 11.5px; color: var(--text-dim); line-height: 1.35; }
/* ── iOS-тумблер (переиспользуемый: онбординг + Настройки→Профиль) ── */
.cc-switch { position: relative; flex: 0 0 auto; width: 46px; height: 28px; cursor: pointer; display: inline-block; }
.cc-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
/* Дорожка ВЫКЛЮЧЕННОГО тумблера — 24 % чернил (`--text`), а не хэйрлайн `--line`: на нём она была
1.06 к `--panel-2` в тёмной и 1.23 в светлой (рендер 16.10.2026) — виден только кружок. Тот же
рецепт у дизайна depth (`.cc-switch-tr`, «выкл. — 24 % чернил») и у тумблера «Разбора встреч»:
≈2.0 / ≈1.6 к подложке. Включённая — прежняя `--ok`. */
.cc-switch-tr { position: absolute; inset: 0; border-radius: 999px; background: color-mix(in srgb, var(--text) 24%, transparent); transition: background .18s ease; }
.cc-switch-tr::before { content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.35); transition: transform .18s cubic-bezier(.3,.8,.4,1); }
.cc-switch input:checked + .cc-switch-tr { background: var(--ok); }
.cc-switch input:checked + .cc-switch-tr::before { transform: translateX(18px); }
.cc-switch input:focus-visible + .cc-switch-tr { box-shadow: 0 0 0 3px var(--sel); }
/* 🔴 БАЗА элементов = эталон дизайн-системы. Любая НОВАЯ страница на «голых»
input/select/textarea/button получает единый вид (радиус 11, фокус-кольцо, свой
шеврон) БЕЗ пер-компонентного CSS. Пер-компонентные *-input/*-select — легаси. */
input, select, textarea {
background: var(--panel-2);
border: 1px solid var(--line);
color: var(--text);
border-radius: 11px;
padding: 11px 14px;
font-size: 14px;
outline: none;
transition: border-color .15s, box-shadow .15s;
}
/* 🔴 Галочка и радио — НЕ текстовое поле: паддинг текстового поля им не положен.
При `box-sizing: border-box` ширина не имеет права стать меньше паддинга, поэтому
`padding: 11px 14px` выше МОЛЧА съедал объявленный `width: 18px` и превращал
квадратную галочку в прямоугольник 30×24 (замер на проде, CRMC-695). Правим у базы:
в проекте 17 правил чекбоксов и ни одно паддинг не гасило — значит воевали все. */
input[type="checkbox"], input[type="radio"] { padding: 0; }
input:focus, select:focus, textarea:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px var(--glow);
}
/* 🔴🔴 ОДНО КОЛЬЦО НА ПОЛЕ (CLIE-1120, владелец: «во всех поисках есть ненужная внутренняя
подсветка»). Кольцо принадлежит той коробке, которую человек ВИДИТ рамкой. Поле, у которого
своей рамки нет (компонент снял `border`, потому что рамку рисует обёртка поиска), кольца
базы НЕ рисует — иначе внутри рамки загорается вторая «пилюля» (радиус 11 на поле высотой
17 читается именно так). Кто внутри рамки, а кто сам рамка — решает ЗАМЕР рендера:
`ccRingPlace` в app.js по фокусу ставит `data-cc-noring` полю и `data-cc-ring` обёртке.
Из CSS этот вопрос не задать (селектора по вычисленному стилю нет), а список обёрток —
белый список с дырой на следующем экране. Специфичность 0,2,1 — выше базы и выше
пер-компонентных `.x-search input:focus`, чтобы легаси-заплатки не воевали с дверью. */
input[data-cc-noring][data-cc-noring]:focus,
textarea[data-cc-noring][data-cc-noring]:focus {
box-shadow: none;
/* «Утоплены → всплывают на фокусе» (§3.4) — про поле, которое САМО себе рамка. У поля
ВНУТРИ рамки это рисует вторую коробку: в светлой теме `html[data-theme="light"]
input:focus { background:#fff }` (0,2,2) перебивал `background: transparent` компонента
(0,2,1) и печатал белую «пилюлю» внутри бежевой строки поиска — та же беда, что кольцо,
только цветом. Возвращаем замысел компонента: фон рисует рамка. Имя атрибута повторено
нарочно — 0,3,1 выше и базы, и темовой заплатки. */
background: transparent;
}
/* …а подсветку берёт на себя рамка: линия — цветом границы, залитая коробка без границы —
тонким внутренним контуром (ореол сюда НЕ возвращаем: это и была лишняя подсветка).
🔴 Имя атрибута повторено НАРОЧНО: 0,3,0 перебивает `border: 1px solid var(--line)` самих
обёрток (`.projects-list .proj-searchbar` = 0,2,0, и она ниже по файлу — при равной силе
выигрывала бы она, и поле осталось бы вовсе без признака фокуса). */
[data-cc-ring][data-cc-ring="line"]:focus-within { border-color: var(--primary); }
[data-cc-ring][data-cc-ring="fill"]:focus-within { box-shadow: inset 0 0 0 1px var(--primary); }
select {
appearance: none; -webkit-appearance: none;
background-image: var(--sel-chev);
background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px;
}
/* 🔴🔴 СРЕД-34 · ВЫРАВНИВАНИЕ ВНУТРИ ЗАДАЁМ САМИ, А НЕ БЕРЁМ У ДВИЖКА.
У кнопки `align-items` приходит из UA-таблицы браузера, и она РАЗНАЯ:
Chromium 130 (движок ПК-версии, Electron 33) и WebKit → `flex-start`
Chromium 151 (свежий Chrome, на котором стоял наш стенд) → `normal` (= растянуть)
Разница не косметическая. У flex-КОЛОНКИ `flex-start` даёт ребёнку ширину ПО СОДЕРЖИМОМУ:
строка с `white-space:nowrap; overflow:hidden; text-overflow:ellipsis` получает коробку ШИРЕ
родителя, обрезает себя по СВОЕЙ коробке (то есть не обрезает вовсе) и печатается поверх
соседей. Замер ОДНОГО И ТОГО ЖЕ кода: коробка 232.9px внутри кнопки 208px (130) против
192px с честным «…» (151). Именно поэтому «налезает» видел владелец, а стенд — нет.
Фиксируем явно: `stretch` — то, что видит большинство (современный Chrome) и на чём рисовали
дизайн. Кому нужно другое — пишет своё значение у себя, как и раньше. */
button, input[type="button"], input[type="submit"], input[type="reset"] { align-items: stretch; }
button {
cursor: pointer;
border: 1px solid var(--line);
border-radius: 11px;
padding: 10px 14px;
font-size: 14px;
color: var(--text);
background: var(--panel-2);
transition: background .12s, border-color .12s, opacity .12s;
}
button:hover { border-color: var(--primary); }
button:disabled { opacity: .45; cursor: not-allowed; }
.primary {
background: var(--acc-grad);
border-color: transparent;
color: #fff;
font-weight: 600;
width: 100%;
margin-top: 6px;
box-shadow: 0 6px 16px -4px var(--glow);
}
.primary:hover { border-color: transparent; box-shadow: 0 8px 22px -4px var(--glow); }
.danger { background: var(--danger); border-color: transparent; color: #fff; font-weight: 600; }
.ghost { background: transparent; }
/* 🔴 ТА ЖЕ ГЕОМЕТРИЯ, ЧТО У `.primary.small` (см. большой комментарий ниже): `.ghost.small` —
её родной брат, только не залитый, и значок внутри обязан стоять В СТРОКУ с подписью.
Почему это правило класса, а не заплатка по месту: глобальное `button svg.ic { display:
block }` (ниже) делает значок БЛОКОМ, а кнопка без флекса переносит подпись на вторую
строку. Лечили это посайтово (`.crmw-head-acts button` — кадр лида 14.09.2026), и каждое
новое место рождало ту же ступеньку заново: замер прода 14.09.2026 по выходам пустой доски
CRM (`tools/shots/crmc1115-empty-acts.js`) — кнопка 100×50, значок y=372, подпись y=394,
«ОДНА СТРОКА: false». Теперь геометрию задаёт САМ модификатор, и новая кнопка со значком
выглядит правильно без единой строки CSS. */
.ghost.small {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
padding: 6px 10px; font-size: 12px;
}
.ghost.small svg.ic { width: 14px; height: 14px; }
/* 🔴 ПРАВИЛО КЛАССА: `.small` у ПЕРВИЧНОЙ кнопки = компактный ИНЛАЙН-контрол, родной брат
`.ghost.small` (та же высота и шрифт, только залитый). Базовый `.primary` — кнопка ФОРМЫ
(логин, подвал модалки): `width:100%` + `margin-top`. Внутри карточки/тулбара/поповера он
превращался в исполинскую полосу с иконкой у левого края и текстом по центру — владелец
2026-08-12 о баннере «на паузе» в карточке задачи: «Это что за пиздец?». Лечили это ПОСАЙТОВО
(`.pm-foot .primary`, `.v2-cm-add button`, `#twNew`, `.v2pt-acts .primary`, `.composer .primary`,
`.rec-bar .primary`… — KB «Шапка задач: кнопка Задача распирала строку», там же вывод «`.primary`
в любом flex-ряду ВСЕГДА переопределять width»), и КАЖДОЕ новое место рождало новую полосу.
Теперь геометрию задаёт САМ модификатор `.small`: новая кнопка в новом месте выглядит правильно
без единой строки CSS. Осознанная полоса во всю ширину = `.primary` БЕЗ `.small` либо своё
правило со специфичностью ≥ 2 классов (как `.tip-tm-btn` — кнопка таймера в карточке задачи). */
.primary.small {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
width: auto; margin-top: 0; padding: 6px 12px; font-size: 12px;
box-shadow: 0 2px 8px -3px var(--glow);
}
.primary.small:hover { box-shadow: 0 4px 12px -4px var(--glow); }
.primary.small svg.ic { width: 14px; height: 14px; }
/* Только иконка (отправить/добавить) — КВАДРАТНАЯ и вровень с полем ввода рядом (поле ~35px). */
.primary.small.icon-btn { padding: 8px; }
.primary.small.icon-btn svg.ic { width: 17px; height: 17px; }
.error { color: var(--danger); min-height: 18px; margin: 10px 0 0; font-size: 13px; }
.picker { margin-top: 8px; }
/* ---- международный ввод телефона: селектор страны + маска ----
ВНИМАНИЕ: базовая раскладка (flex/ширины/размер шеврона) продублирована
инлайном в index.html — чтобы протухший в кеше style.css не ломал
вёрстку. Здесь — тема, отступы, состояния. */
.phone-row { display: flex; gap: 8px; align-items: stretch; }
.phone-row #phoneInput { flex: 1; min-width: 0; }
.cc-cc-btn {
display: inline-flex; align-items: center; gap: 7px;
padding: 0 11px 0 13px; margin: 0; flex: 0 0 auto; height: 46px;
background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px;
color: var(--text); font-size: 15px; line-height: 1; white-space: nowrap;
transition: border-color .12s, box-shadow .12s, background .12s;
}
.cc-cc-btn:hover { border-color: var(--primary); }
.cc-cc-btn:active { background: var(--panel); }
.cc-cc-btn[aria-expanded="true"] { border-color: var(--primary); box-shadow: 0 0 0 3px var(--glow); }
.cc-cc-flag { font-size: 19px; line-height: 1; }
.cc-cc-dial { font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: .2px; }
.cc-cc-chev { width: 18px; height: 18px; color: var(--muted); flex: 0 0 auto; }
.cc-cc-btn[aria-expanded="true"] .cc-cc-chev { transform: rotate(180deg); }
.cc-cc-chev { transition: transform .16s ease; }
/* поповер списка стран */
.cc-cc-pop {
position: relative; margin-top: 8px;
background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
box-shadow: 0 20px 48px -20px rgba(0,0,0,.55); overflow: hidden;
}
/* строка поиска с иконкой */
.cc-cc-search { padding: 10px 10px 8px; border-bottom: 1px solid var(--line); position: relative; }
.cc-cc-search-ic { position: absolute; left: 22px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.cc-cc-search input { width: 100%; margin: 0; padding-left: 36px; height: 40px; }
.cc-cc-list { max-height: min(46vh, 320px); overflow-y: auto; overscroll-behavior: contain; padding: 6px; }
.cc-cc-item {
display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box;
min-height: 46px; padding: 7px 12px; margin: 0; border: 0; border-radius: 10px;
background: transparent; color: var(--text); font-size: 15px; text-align: left;
cursor: pointer; transition: background .1s;
}
.cc-cc-item:hover, .cc-cc-item.active { background: var(--panel-2); }
.cc-cc-item .cc-cc-flag { font-size: 22px; flex: 0 0 auto; }
.cc-cc-item .cc-cc-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-cc-item .cc-cc-code { color: var(--muted); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.cc-cc-item .cc-cc-check { width: 18px; height: 18px; flex: 0 0 auto; color: var(--primary); opacity: 0; }
.cc-cc-item.sel .cc-cc-name { font-weight: 600; }
.cc-cc-item.sel .cc-cc-code { color: var(--primary); font-weight: 600; }
.cc-cc-item.sel .cc-cc-check { opacity: 1; }
.cc-cc-empty { padding: 22px 10px; text-align: center; color: var(--muted); font-size: 13.5px; }
/* ---- chat layout ---- */
/* колонки: рельс | мои задачи | список чатов | тред.
Ширины задач/чатов — в CSS-переменных (тянутся мышью, см. .col-resizer
и initColumnResize в app.js); значения сохраняются в localStorage.
(Контакты раньше были этой колонкой — теперь они в модалке с рельса.) */
.chat {
display: grid;
/* «render-width» столбцов проектов/задач: по умолчанию = пользовательская ширина
(--w-*), но состояния «свернуть»/«скрыть»/«режим Личное» переопределяют их на
42px/0 (см. uiColsEnsureStyles в app.js). Так все комбинации свёрнуто/скрыто ×
инфо-панель складываются БЕЗ комбинаторного перечисления grid-template-columns. */
--rw-projects: var(--w-projects, 200px);
--rw-tasks: var(--w-tasks, 250px);
/* 🔴 БАГ «чат улетел по ширине, не видно кнопок справа» (CLIE-265): боковые
столбцы (проекты/задачи/чаты) — перетаскиваемые и капаются до 480/560px. Если
сумма их пользовательских ширин + рельс не помещается в узкое окно, столбец
треда 1fr сжимался до нуля, а его шапка (поиск/переводчик/звонок/видео/⋯)
выдавливалась ЗА правую кромку — визуально «пропадала». Лечение: боковые
треки → minmax(0, ширина) (усыхают, когда места мало, вместо того чтобы
давить тред), а тред → minmax(--thread-min, 1fr) — НИКОГДА не уже, чем нужно
шапке. На широком экране всё как было: боковые получают полную ширину,
тред — остаток. Общего горизонтального overflow нет: минимум сетки
96+0+0+--thread-min < любой ширины, где применяется этот грид (>1080px). */
--thread-min: 420px;
grid-template-columns: var(--rail-track) minmax(0, var(--rw-projects)) minmax(0, var(--rw-tasks)) minmax(0, var(--w-chats, 280px)) minmax(var(--thread-min), 1fr);
}
/* ---- левый вертикальный рельс папок/фильтров (Telegram-style) ---- */
.chat-rail {
/* 🧭🧭 ЛЕВЫЙ БЛОК = рейка хабов `.rail-col` + второе меню видов `.rail-hub`, которое
ПРИСТЁГНУТО к правой кромке рейки и показывается ТОЛЬКО при наведении (владелец,
раунд 7). 🔴 Панель живёт ВНУТРИ `.chat-rail` намеренно: остров (`island.css`)
одевает именно его, и второе меню получает плиту ЛЕВОГО блока даром (владелец: «оно
должно быть частью левого блока, а не правого»). В раунде 3 панель стояла в
`.projects-col` — дорожке КОНТЕНТА — и приносила с собой плиту правого блока.
🔴 `position: relative` + `overflow: visible` — якорь и выход для панели: она висит за
коробкой рейки (`left: 100%`), поверх контента. Клипает содержимое теперь `.rail-col`
(с унаследованным скруглением плиты), а не сама рейка. */
position: relative;
display: flex; flex-direction: row; align-items: stretch;
gap: 0; padding: 0;
background: linear-gradient(180deg, var(--cm-0e1018, #0e1018), var(--cm-0b0d14, #0b0d14));
/* 🔴 Цвет ПОД градиентом — не украшение, а опора для `background-color: inherit` у липкой
«Аи»: сам по себе градиент оставляет background-color прозрачным, и подложка липкого
элемента стала бы дырой. Виду это ничего не меняет — градиент рисуется поверх, а его
нижний стоп и есть этот цвет. Оформления (`data-concept`) красят рельс плоским токеном,
и `inherit` подхватывает уже его. */
background-color: var(--cm-0b0d14, #0b0d14);
border-right: 1px solid var(--line);
/* 🔴🔴 РАЗДЕЛЕНИЕ РОЛЕЙ (канон `section-body-column`): сама рейка НЕ прокручивается —
прокручивается её тело `.rail-scroll`, а хром («Ещё ждут» и прикреплённая «Ая») стоит
рядом и БЕРЁТ СВОЮ ВЫСОТУ. Пока прокруткой была сама рейка, липкий хвост НАКРЫВАЛ
последние ряды: замер боевого прода 04.10.2026 (окно 1440×900) — «Ая» top=827 поверх
ряда «CRM» top=837..892, то есть ряд «в рейке», а человеку не виден. Числа в calc()
вместо этого подгонять ЗАПРЕЩЕНО: высота хрома зависит от состава полоски признаков. */
overflow: visible; min-height: 0;
}
/* Колонка хабов: прежняя рейка целиком (ряды + «Ещё ждут» + прижатая «Ая»). Клипает себя
сама и наследует скругление плиты острова — без этого липкий хвост «Аи» вылезал бы за
нижние углы плиты, когда рейка перестала клипать (`overflow: visible` ради панели). */
.rail-col {
flex: 1 1 auto; width: 100%; min-width: 0;
display: flex; flex-direction: column; align-items: stretch;
gap: 6px; padding: 10px 8px 0; min-height: 0; overflow: hidden;
border-radius: inherit;
}
/* 🧭 МЕТРИКИ РЕЙКИ — ПРЕЖНИЕ (владелец 11.10.2026, раунд 8: «дизайн меню слева нужно вернуть
как было — было больше пространства, больше размеры, просто верни как было»). Раунд 7 ужал
ряд до 6/3, зазор 2, значок 20, чтобы рейка влезала в 1440×900 без прокрутки, — владелец
этого не просил. Ряды берут базу `.rail-item` (8/4, зазор 3, значок 22), тело — зазор 6;
не влезло в экран — рейка прокручивается, «Ая» прижата хвостом, как и до хабов.
🔴 Своих ужатых метрик для `.rail-col` не заводить: размер ряда — одно место, `.rail-item`. */
/* 🧭🧭 ВТОРОЕ МЕНЮ ВИДОВ — ПРИ НАВЕДЕНИИ, РЯДОМ С РЕЙКОЙ, НА ВСЮ ЕЁ ВЫСОТУ, ПОВЕРХ КОНТЕНТА
(согласовано владельцем 2026-10-11, раунд 7, кадры макета: «Да, делай так»).
🔴 ПОВЕРХ, а не в сетке: `position: absolute` от рейки — контент не двигается ни на пиксель
(замер: кромка треда 634 → 634, списка 354 → 354). Раунд 5 держал панель постоянной
колонкой сетки — владелец увидел «подменю смещает контент» и вернул.
🔴 В покое панели НЕТ (`display: none`): открывает её класс `.hub-open` на рейке, который
ставит `renderRailHubPane` по наведению на хаб с видами; уход курсора с левого блока снимает.
Высота — ровно высота рейки (`top: 0; bottom: 0`): «на всю высоту» без своих чисел.
🏝 ОТДЕЛЬНЫЙ ОСТРОВОК (владелец 11.10.2026, раунд 8: «выезжающее меню пусть выглядит как
отдельный островок с такими же скруглениями»): зазор `--hub-gap` от рейки, полное скругление
плиты (`--isl-r`), кольцо и тень своего острова. Подложка — та же, что у рейки (`inherit`).
🔴 Зазор — НЕ дыра для курсора: мост `.chat-rail.hub-open::after` лежит в зазоре и
принадлежит рейке, поэтому путь «хаб → островок» не роняет `mouseleave` левого блока. */
.rail-hub {
position: absolute; left: calc(100% + var(--hub-gap)); top: 0; bottom: 0; z-index: 60;
width: var(--hub-w); box-sizing: border-box;
display: none; flex-direction: column; min-height: 0; overflow: visible;
padding: 16px 12px 12px;
background: inherit;
border-radius: var(--isl-r, 14px);
box-shadow: inset 0 0 0 1px var(--line), 0 22px 50px -14px rgba(0, 0, 0, .6);
}
html[data-theme="light"] .rail-hub { background: var(--panel); box-shadow: inset 0 0 0 1px var(--line), 0 22px 50px -16px var(--cm-14285a-28, rgba(20, 40, 90, .28)); }
.chat-rail.hub-open .rail-hub { display: flex; }
/* 🔴 МОСТ ЗАЗОРА ПРИНАДЛЕЖИТ ОСТРОВКУ (12.10.2026, раунд 9): островок встаёт в полосу слоёв
(`ccLayerRaise`), и мост обязан встать туда же — мост рейки оставался под страницей сделки
(`#dealDrawer` 300002), курсор по пути «хаб → островок» падал на неё, и `mouseleave` закрывал
меню. Ради моста у островка `overflow: visible` (прокручивает своё тело `.rh-body`). */
.rail-hub::before { content: ""; position: absolute; right: 100%; top: 0; bottom: 0; width: var(--hub-gap); }
.rail-hub.hidden { display: none; }
/* Вариант 6 (выбор владельца 11.10.2026, раунд 8: «6 берём на подменю»): крупный список —
шапка со значком хаба в плашке, ряды 52 px, значок вида в своей плашке, текст 15.5 px.
Раунд 7 был 38 px / 13.5 px — «всё мелкое и некрасивое, места много». */
.rh-head {
flex: 0 0 auto; display: flex; align-items: center; gap: 12px;
padding: 2px 8px 16px; font-size: 20px; font-weight: 750;
letter-spacing: -.01em; color: var(--text); min-width: 0;
}
.rh-head .rh-ht { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rh-head .rh-hic {
flex: none; width: 38px; height: 38px; border-radius: 11px;
display: flex; align-items: center; justify-content: center;
background: color-mix(in srgb, var(--acc-fill) 18%, transparent); color: var(--primary-2);
}
.rh-head .rh-hic svg.ic { width: 21px; height: 21px; }
.rh-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.rh-row {
display: flex; align-items: center; gap: 13px; flex: none;
height: 52px; padding: 0 10px; border-radius: 13px; border: 0;
background: transparent; color: var(--text); cursor: pointer;
text-align: left; width: 100%;
transition: background .12s, color .12s;
}
.rh-row:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.rh-row .rh-ic {
display: flex; align-items: center; justify-content: center; line-height: 1; flex: none;
width: 34px; height: 34px; border-radius: 10px;
background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text);
transition: background .12s, color .12s;
}
.rh-row .rh-ic svg.ic { width: 19px; height: 19px; }
.rh-row .rh-t { flex: 1 1 auto; min-width: 0; font-size: 15.5px; font-weight: 560; line-height: 1.25;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rh-row .rh-n {
flex: none; min-width: 22px; height: 20px; padding: 0 7px; border-radius: 10px;
background: color-mix(in srgb, var(--acc-fill) 16%, transparent); color: var(--primary-2);
font-size: 11.5px; font-weight: 650;
display: flex; align-items: center; justify-content: center;
}
/* Открытый вид — подложка акцентом 15 % (канон `accent`), значок — в залитой плашке. */
.rh-row.active { background: color-mix(in srgb, var(--acc-fill) 15%, transparent); color: var(--primary-2); font-weight: 620; }
.rh-row.active .rh-ic { background: var(--acc-fill); color: #fff; }
/* 👁 «Активное навиду» — ВЫБРАННЫЙ ПОДПУНКТ ОТДЕЛЬНОЙ ПЛИТКОЙ под активным хабом: та же форма,
что у пункта главного меню (значок + подпись, база `.rail-item`), только ДРУГОЙ ЦВЕТ
(владелец 11.10.2026, раунд 8: «подменю в главном сделаем так же как и главное, просто цвет
другой»; капсула раунда 7 — «не очень»). Хаб залит градиентом/акцентом, плитка — акцентным
тинтом 14 % с кольцом 26 % и акцентными чернилами `--primary-2` (канон `foreign-brand-own-mark`:
акцентный ТЕКСТ и акцентная ЗАЛИВКА — разные токены). Обе темы — одни токены. */
.rail-item.rail-hubsub {
background: color-mix(in srgb, var(--acc-fill) 14%, transparent);
color: var(--primary-2, var(--primary));
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc-fill) 26%, transparent);
}
.rail-item.rail-hubsub .rail-label { color: inherit; font-weight: 650; }
/* 🧩 ВАРИАНТ 1 (выбор владельца 12.10.2026, раунд 9): хаб и плитка его вида — ОДНО целое на
общей подложке: акцентный тинт 11 % с кольцом 30 %, внутри плитка без своей рамки. Наведение
на любую точку блока открывает меню хаба (`wireRailHubHover`). Обе темы — одни токены. */
.rail-hubgrp {
display: flex; flex-direction: column; gap: 4px; flex: none;
padding: 4px; border-radius: calc(var(--radius, 12px) + 4px);
background: color-mix(in srgb, var(--acc-fill) 11%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc-fill) 30%, transparent);
}
/* 🚫 У плитки выбранного вида НЕТ наведения: этот вид уже открыт, нажимать на неё незачем
(владелец 12.10.2026, р.10: «тут не нужно на подменю ховер, там ведь действия нет никакого»).
Гасим всё, что даёт наведение кнопке: фон `.rail-item:hover` (и светлую тему 0,3,1), рамку
глобального `button:hover`, смену чернил, курсор-«палец». Наведение на блок по-прежнему
открывает меню хаба — это слушатель `wireRailHubHover`, а не стиль. */
.rail-hubgrp > .rail-item.rail-hubsub,
.rail-hubgrp > .rail-item.rail-hubsub:hover {
background: transparent; box-shadow: none; border-color: transparent;
color: var(--primary-2, var(--primary)); cursor: default;
}
.rail-item.rail-hub-peek:not(.active) { background: color-mix(in srgb, var(--acc-fill) 14%, transparent); color: var(--text); }
/* Тело рейки: ряды разделов (и «Настроить меню» — он остаётся в прокрутке, см. renderRail). */
.rail-scroll {
flex: 1 1 auto; min-height: 0; overflow-y: auto;
display: flex; flex-direction: column; align-items: stretch; gap: 6px;
/* devspace-rail-active-clipped-1 · запас под нижний край (полоса 12 px ниже): его читает railRevealActive
(app.js), когда докручивает открытый раздел, и браузер — при фокусе с клавиатуры */
scroll-padding-bottom: 12px;
}
/* 13.10.2026: тело рейки — `.cc-scroll-in` (край тает, пока ниже есть ряды, CLIE-620). Край не занимает
места: −высота и −6 зазора колонки (иначе на кромке прокрутки рейка прыгала бы на 6 px). */
.rail-scroll.cc-scroll-in.more-t::before { margin-bottom: -32px; }
/* approvals-rail-chevron-1 · knowledge-rail-overflow-fade-1 (раунд R, 1440×900): нижний край 26 px гасил ЦЕЛИКОМ
видимый ряд — «Среда разработчика» кончается на y 802 при кромке прокрутки 814, и вторая строка «разработчика»
тускнела (свет: 68,70,85 → 133,134,144). Край — полоса 12 px, сплошная 4 px у самой кромки: видимый ряд не
гаснет, срезанный уходит под неё краем. Места не занимает, как и прежде: −12 высоты и −6 зазора колонки. */
.rail-scroll.cc-scroll-in.more-b::after {
height: 12px; margin-top: -18px;
background: linear-gradient(to top, var(--cc-fade, var(--panel)) 4px, transparent);
}
/* myrequests-rail-vpn-1 · partners-rail-vpn-1 · rail-devspace-missing-approvals · rail-devspace-missing-files ·
wiki-rail-lost-entry-1: край тает краской стекла и по пустому месту не виден — нужен знак «ниже есть ещё»,
на любой ширине (и в рейке 62 px), только пока ccScrollInEdges держит .more-b.
rail-chevron-1 · rail-chevron-vpn-1 · rail-overflow-chevron-1 · rail-overflow-chevron-1@k_vpn.device-dark ·
approvals-rail-chevron-1 (раунд R): голый шеврон в самом крае висел по центру под последним рядом — подпись
VPN y 785–792, шеврон 804–810 при шаге рядов ~27 px, у активной пилюли VPN (низ 803) зазор 0 — читался
«VPN ▾». Теперь знак — СВОЯ капсула 26×12 (кромка --line, заливка --panel-2, шеврон --muted) на шве ПОД
кромкой прокрутки: на линии над «Аей» (::before хвоста), при прикреплённых рядах — в зазоре над ними
(::before полоски). absolute в position: relative соседа — места не занимает, клики проходят. Ни хвоста,
ни полоски — капсулой становится сам край и липнет к низу рейки. «Ещё ждут» (.rail-pin-rest) несёт свой
шеврон — капсулы нет. Рейка 62 px (≤720): поле 52 px, шов тот же 6 px — капсула 26 px встаёт так же. */
.rail-scroll.cc-scroll-in.more-b + .rail-more:empty + .rail-tail::before,
.rail-scroll.cc-scroll-in.more-b + .rail-more:not(:empty):not(:has(> .rail-pin-rest))::before,
.rail-col:not(:has(> .rail-tail)):has(> .rail-more:empty) > .rail-scroll.cc-scroll-in.more-b::after {
content: ""; width: 26px; height: 12px; box-sizing: border-box; pointer-events: none;
border: 1px solid var(--line); border-radius: 999px;
background:
linear-gradient(45deg, transparent calc(50% - 1.4px), var(--muted) calc(50% - .6px) calc(50% + .6px), transparent calc(50% + 1.4px)) calc(50% - 3px) 50% / 6px 6px no-repeat,
linear-gradient(-45deg, transparent calc(50% - 1.4px), var(--muted) calc(50% - .6px) calc(50% + .6px), transparent calc(50% + 1.4px)) calc(50% + 3px) 50% / 6px 6px no-repeat,
var(--panel-2);
}
.rail-scroll.cc-scroll-in.more-b + .rail-more:empty + .rail-tail::before,
.rail-scroll.cc-scroll-in.more-b + .rail-more:not(:empty):not(:has(> .rail-pin-rest))::before {
position: absolute; z-index: 1; left: calc(50% - 13px); top: -6px;
}
/* над полоской признаков шва нет — капсула садится на саму кромку прокрутки (верхние 6 px — над сплошной
полосой края, нижние — в зазоре колонки 6 px) и кончается ровно у верха ряда-признака: ни ряд, ни его
бейдж (на телефоне он в углу, right 0) она не накрывает */
.rail-scroll.cc-scroll-in.more-b + .rail-more:not(:empty):not(:has(> .rail-pin-rest))::before { top: -12px; }
.rail-col:not(:has(> .rail-tail)):has(> .rail-more:empty) > .rail-scroll.cc-scroll-in.more-b::after {
align-self: center; bottom: 4px;
}
/* 📌 «АЯ» ВСЕГДА НА ВИДУ (владелец 16.09.2026). Она стояла внизу ровно до тех пор, пока меню
помещалось на экран: `margin-top:auto` прижимает хвост только в НЕпрокручиваемом столбце. У
человека с полутора десятками разделов рельс прокручивается, и «Ая» уезжала за нижний край —
самая нужная кнопка пряталась первой (замер: вне окна на 785px).
🔴 ЛИПНЕТ ТОЛЬКО ОНА. Первый заход обернул ВЕСЬ хвост, и вместе с ней прилипло «Настроить
меню», которого никто не просил.
🔴 ФОН БЕРЁТСЯ У РЕЛЬСА, А НЕ ВЫДУМЫВАЕТСЯ. Липкому элементу нужна непрозрачная подложка
(иначе сквозь него едут пункты), и первый заход залил её КОНСТАНТОЙ, взятой из кода
(#0b0d14). Замер на живом проде: рельс там покрашен `rgb(20,26,33)` БЕЗ градиента (его
перекрывает оформление), то есть константа промахнулась на глаз — и человек увидел тёмный
прямоугольник вместо прежнего вида. `background-color: inherit` берёт ровно тот цвет,
которым покрашен рельс, в любой теме и любом оформлении — цвет СОВПАДАЕТ по построению,
поэтому никакого шва и никакой «коробки» не возникает. Растушёвка тут была бы враньём:
она маскирует расхождение вместо того, чтобы его не допускать. */
/* 📌 ШОВ КРЕПИТСЯ К «АЕ» + НЕБОЛЬШАЯ ВНЕШНЯЯ ТЕНЬ (владелец 16.09.2026: «полоска сверху должна
крепиться и там должна быть небольшая внешняя тень»). Шов теперь ВНУТРИ `.rail-tail` (renderRail
берёт `tailAt` ДО него): пока он оставался в прокрутке, верхняя кромка «Аи» была видна только
когда рельс домотан донизу, а на прокрутке вверх липкая кнопка висела прямо на списке — без
границы и без признака, что под ней что-то едет. Тень направлена ВВЕРХ (иначе её негде увидеть:
низ блока — это кромка рельса) и намеренно короткая: рельс в светлой теме сам карточка со своей
тенью, вторая жирная полоса превратила бы низ меню в «ящик».
🔴 ТЕНЬ ИДЁТ ОТ САМОЙ ПОЛОСКИ, А НЕ ОТ КРОМКИ БЛОКА (владелец 16.09.2026: «на скрине не бьётся
тень с полоской»). `box-shadow` рисуется от border-box, а у шва своё `margin: 6px 4px` — значит
первый заход развёл их на 6px: сверху тень, ниже белая щель, ещё ниже линия, и низ меню читался
ДВУМЯ границами вместо одной. Гасим шву верхнее поле ВНУТРИ липкой обёртки: кромка блока и линия
совпадают, и тень идёт ровно из-под линии.
🔴 ЦВЕТ ТЕНИ — СИНЕВАТЫЙ (он же): нейтрально-чёрная тень на фирменном синем рельсе читалась
грязью. Светлая берёт сам акцент (#0071e3), тёмная — глубокую синеву: тень обязана быть ТЕМНЕЕ
панели, светлый индиго на тёмном дал бы не тень, а свечение. */
/* 🔴 ЛИПКОСТЬ СНЯТА, ВИД СОХРАНЁН (04.10.2026). «Ая» всегда на виду по-прежнему — но
теперь потому, что она ВНЕ прокручиваемого тела и берёт свою высоту, а не потому, что
перекрывает его собой. `position: relative; z-index: 3` оставлены ради ТЕНИ: она
рисуется поверх тела рейки, как и раньше. `background-color: inherit` тоже остаётся —
цвет берётся у рейки (любая тема, любое оформление), шва не возникает по построению. */
.rail-tail {
position: relative; z-index: 3; flex: 0 0 auto;
display: flex; flex-direction: column; align-items: stretch;
padding-bottom: 10px;
background-color: inherit;
box-shadow: 0 -6px 12px -4px var(--cm-0a1030-75, rgba(10, 16, 48, .75));
}
.rail-tail > .rail-sep { margin-top: 0; }
html[data-theme="light"] .rail-tail { box-shadow: 0 -6px 12px -4px rgba(0, 90, 190, .13); }
.rail-item {
position: relative;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 3px; padding: 8px 4px; border-radius: var(--radius);
cursor: pointer; color: var(--muted); border: 1px solid transparent;
background: transparent; width: 100%; text-align: center;
transition: background .12s, color .12s, border-color .12s;
}
.rail-item:hover { background: var(--panel-2); color: var(--text); }
.rail-item .rail-ic { display: flex; align-items: center; justify-content: center; line-height: 1; }
.rail-item .rail-ic svg.ic { width: 22px; height: 22px; }
/* 🔴 «Контрастность» 10.09.2026: подпись пункта рельса — акцентные ЧЕРНИЛА на тёмной
панели, значит --primary-2 (замер: --primary 4.40:1, стало 6.14:1). */
.rail-item.active .rail-label { color: var(--primary-2, var(--primary)); }
.rail-item .rail-label {
font-size: 10.5px; line-height: 1.12; max-width: 100%;
/* Рельс расширен 76→96px (жалоба владельца: «одна буква не влезает» —
«Помощни/к», «Обращен/ия», «Пользова/т.» рубились). При 96px обычные
ОДНОсловные ярлыки помещаются в одну строку. Клэмп ниже — уже ФОЛБЭК:
на 2 строки с word-break (без «…») переносятся лишь редкие сверхдлинные
(«Приглашения») и пользовательские имена папок; ellipsis — только если и
в 2 строки не влезло. */
white-space: normal; overflow-wrap: anywhere; word-break: break-word;
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
overflow: hidden;
}
.rail-item.active {
background: var(--acc-grad); color: #fff;
box-shadow: 0 6px 16px -4px var(--glow); border-color: transparent;
}
.rail-badge {
position: absolute; top: 4px; right: 8px;
min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
background: var(--acc-fill); color: #fff;
font-size: 10px; font-weight: 700; line-height: 17px; text-align: center;
box-shadow: 0 2px 6px -1px var(--glow);
}
.rail-item.active .rail-badge { background: #fff; color: var(--acc-fill); }
.rail-sep { height: 1px; background: var(--line); margin: 6px 4px; flex: none; }
/* «Ая» — голосовой ИИ в самом низу рельса: премиальная «звёздная» кнопка (градиент-подпись,
акцентная иконка со свечением, мягкое пульсирующее сияние). В активном виде — как обычный active. */
.rail-item.rail-aya { position: relative; }
.rail-item.rail-aya .rail-ic { color: var(--primary-2); filter: drop-shadow(0 0 6px var(--glow)); position: relative; z-index: 1; }
.rail-item.rail-aya .rail-label { position: relative; z-index: 1; font-weight: 650; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.rail-item.rail-aya::after { content: ""; position: absolute; inset: 4px; border-radius: 12px; background: radial-gradient(62% 60% at 50% 38%, var(--glow), transparent 72%); opacity: .3; pointer-events: none; z-index: 0; animation: railAyaGlow 3.4s ease-in-out infinite; }
@keyframes railAyaGlow { 0%, 100% { opacity: .24; } 50% { opacity: .5; } }
.rail-item.rail-aya.active .rail-ic { color: #fff; filter: none; }
.rail-item.rail-aya.active .rail-label { background: none; -webkit-text-fill-color: #fff; color: #fff; }
@media (prefers-reduced-motion: reduce) { .rail-item.rail-aya::after { animation: none; } }
/* «Папки» — последний пункт верхнего блока (управление папками) */
.rail-folders {
border: 1px dashed var(--line); color: var(--muted);
}
.rail-folders:hover { border-color: var(--primary); color: var(--text); background: transparent; }
/* «Пользователи» — отдельный пункт в самом низу рельса.
🔴 CLIE-857: `margin-top:auto` отсюда УБРАН. Он прижимал хвост меню вниз, опираясь на
то, что «Пользователи» стоят предпоследними — а с личным порядком (человек может
поднять их наверх) это утащило бы вниз половину меню. Прижимает теперь ПОСЛЕДНИЙ шов
(`.rail-sep.rail-sep-push`), который renderRail ставит перед последним блоком. */
.rail-users {
border: 1px dashed var(--line); color: var(--muted);
}
.rail-users:hover { border-color: var(--primary); color: var(--text); background: transparent; }
/* Последний шов меню прижимает хвост («Ая») к низу рельса — см. renderRail/CLIE-857. */
.rail-sep.rail-sep-push { margin-top: auto; }
/* 🧭 CLIE-857·2 — «Настроить меню»: ВХОД В НАСТРОЙКУ СТОИТ В САМОМ МЕНЮ (владелец: «от сюда
убери, сделай прям в самом меню кнопку настройки»). Это ИНСТРУМЕНТ меню, а не раздел:
тихий вид (без заливки и без active), тонкий волосок сверху отделяет его от последнего
пункта. Своих чисел размера нет — коробка та же `.rail-item`.
🔴 `margin-top:auto` сюда НЕ ставим: он уже стоит у `.rail-sep-push`, и второе авто-поле
поделило бы свободное место пополам — хвост меню («Ая») повис бы посередине. */
.rail-item.rail-navcfg {
margin-top: 2px; padding-top: 10px;
border-top: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius);
color: var(--muted); opacity: .82;
}
.rail-item.rail-navcfg:hover { opacity: 1; color: var(--text); background: var(--panel-2); }
.rail-item.rail-navcfg .rail-ic svg.ic { width: 19px; height: 19px; }
html[data-theme="light"] .nmbar-lock { opacity: 1; } /* CLIE-1946: «всегда» в «Настроить меню» (стиль — app.js, .75) на светлом = 3.68:1 */
/* 🔄 «Поменять местами» (владелец): «Настроить меню» встаёт НАД «Ая» и оказывается сразу
под прижимающим швом `.rail-sep-push`. Тогда собственный волосок-`border-top` кнопки лишний
— иначе линия задваивается. Шов между «Настроить меню» и «Ая» даёт обычный `.rail-sep`. */
.rail-sep.rail-sep-push + .rail-item.rail-navcfg { margin-top: 0; padding-top: 6px; border-top: 0; }
/* ── 🔔 СЧЁТЧИК РАЗДЕЛА ЗА СГИБОМ: признак у нижней кромки рейки ────────────────────────
Значок-число стоит на разделе ровно для того, чтобы его увидели НЕ ОТКРЫВАЯ раздел. Ряд
за сгибом (замер прода 04.10.2026: видно 14 рядов из 28 при окне 1440×900) делает его
бесполезным — поэтому строка такого раздела ПРИКРЕПЛЯЕТСЯ к кромке, и нажатие открывает
ИМЕННО ЕГО (канон `press-once-and-done`: одно нажатие, без «прокрути и найди»).
🔴 Пустая полоска не занимает НИ ПИКСЕЛЯ (`:empty`) — ждать нечего, значит и места нет
(канон `progressive-disclosure`). Коробка строки та же `.rail-item` — своих чисел
размера нет (канон `control-size`).
🔴 Акцент — формулой канона `accent`: подложка color-mix 12% + кольцо inset 22%, а НЕ
левая рейка и не прибитый цвет: признак обязан читаться в обеих темах. */
.rail-more {
position: relative; z-index: 2; flex: 0 0 auto;
display: flex; flex-direction: column; align-items: stretch; gap: 6px;
background-color: inherit;
}
.rail-more:empty { display: none; }
.rail-item.rail-pin {
color: var(--text);
background: color-mix(in srgb, var(--acc-fill) 12%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc-fill) 22%, transparent);
}
.rail-item.rail-pin:hover { background: color-mix(in srgb, var(--acc-fill) 20%, transparent); }
/* 🔴 СВЕТЛАЯ ТЕМА НЕ СЪЕДАЕТ НАВЕДЕНИЕ. `html[data-theme="light"] .rail-item:hover` имеет
вес (0,3,1) и перебивал наш (0,3,0) — на светлой тему признак терял акцент и падал в
var(--hover) (ревью 04.10.2026). Канон `accent`: подложка остаётся формулой color-mix. */
html[data-theme="light"] .rail-item.rail-pin:hover { background: color-mix(in srgb, var(--acc-fill) 20%, transparent); }
.rail-item.rail-pin .rail-label { color: var(--text); }
.rail-item.rail-pin-rest .rail-ic svg.ic { width: 18px; height: 18px; }
.sidebar {
background: var(--panel);
border-right: 1px solid var(--line);
display: flex;
flex-direction: column;
min-height: 0;
position: relative; /* якорь для .col-resizer на правой кромке */
}
.sidebar-head {
display: flex; align-items: center; justify-content: space-between;
height: var(--head-h); flex: none;
padding: 0 14px; border-bottom: 1px solid var(--line); font-weight: 600;
}
.conv-list { list-style: none; margin: 0; padding: 6px; }
/* Хэйрлайн, отделяющий «шапку» (поиск + истории + фильтр-табы) от прокручиваемого списка
чатов. Стоит на верхе скролл-контейнера → всегда во всю ширину, не подтаивает маской табов
и не зависит от того, показаны истории или нет. */
.sidebar-scroll { flex: 1; overflow-y: auto; min-height: 0; border-top: 1px solid var(--line); }
/* 🗄 АРХИВ (CLIE-372) — плашка входа как в Telegram: скрыта (высота 0), проявляется, когда
пользователь тянет список ВНИЗ у самого верха (jest на .sidebar-scroll). Тап → раздел архива.
Живёт НАД скроллом (между лентой фильтров и списком) — не мешает якорению прокрутки. */
.conv-arch-bar {
height: var(--cab-h, 0px);
overflow: hidden;
display: flex; align-items: center; gap: 9px;
padding: 0 14px; margin: 0;
color: var(--text-dim); cursor: pointer; user-select: none;
transition: height .16s cubic-bezier(.4, 0, .2, 1), background .12s;
}
.conv-arch-bar[hidden] { display: none; } /* архив пуст: убрать из потока (иначе .conv-arch-bar{display:flex} перебьёт UA [hidden]) */
.conv-arch-bar.revealed { --cab-h: 52px; border-bottom: 1px solid var(--line); }
.conv-arch-bar:hover { background: var(--hover); }
.conv-arch-bar .ic { width: 19px; height: 19px; flex: 0 0 auto; color: var(--text-dim); transition: color .12s; }
.conv-arch-bar .cab-t { font-weight: 600; font-size: 14px; color: var(--text); }
.conv-arch-bar .cab-n { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.conv-arch-bar .cab-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; }
.conv-arch-bar > .ic:last-child { margin-left: auto; width: 17px; height: 17px; opacity: .5; }
/* Порог оттяжки достигнут — подсветка «отпусти/тапни, чтобы открыть». */
.conv-arch-bar.ready { color: var(--accent); }
.conv-arch-bar.ready .cab-t { color: var(--accent); }
.conv-arch-bar.ready .ic { color: var(--accent); }
/* Компактная шапка раздела «Архив» вместо ленты фильтров (стрелка назад → к чатам). */
.conv-arch-head {
display: flex; align-items: center; gap: 8px; width: 100%;
padding: 5px 12px 8px; margin: 0; background: none; border: 0; cursor: pointer;
color: var(--text); font: inherit; text-align: left; transition: color .12s;
}
.conv-arch-head:hover { color: var(--accent); }
.conv-arch-head .ic { width: 20px; height: 20px; flex: 0 0 auto; }
.conv-arch-head-t { font-weight: 700; font-size: 15px; }
.conv-arch-head-n { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.sidebar-subhead {
padding: 10px 14px 4px; font-size: 11px; color: var(--muted);
text-transform: uppercase; letter-spacing: .04em;
border-top: 1px solid var(--line); margin-top: 6px;
}
/* Подзаголовок первым в теле окна («Папки чатов» → «Ваши папки»): кромку уже даёт шапка окна
(.modal-head border-bottom), своя border-top рисовала вторую линию через 25 px (кадр: y=372 и y=397).
Разделитель нужен только между секциями тела, у первой — ни кромки, ни внешнего отступа. */
.modal-body > .sidebar-subhead:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.conv-item {
display: flex; align-items: center; gap: 11px; position: relative;
padding: 9px 11px; border-radius: 12px; cursor: pointer; margin-bottom: 2px;
border: 1px solid transparent; transition: background .12s, border-color .12s;
}
/* ── 🔴 Акцент статуса у чата задачи / «Чата с ИИ» — КОЛЬЦО-ПРОГРЕСС ВОКРУГ АВАТАРА.
Цвет статуса — `--conv-accent`, длина дуги — `--arc` (оба ставит convRowHtml).
История одной метки: полоса во всю высоту строки → точка 6px слева (CLIE-483, «слева
полоски — твой фирменный паттерн») → CLIE-538: владелец посмотрел 10 вариантов и выбрал
«В8 · кольцо-прогресс». Поэтому МЕТКИ СЛЕВА БОЛЬШЕ НЕТ ВООБЩЕ: строка чата задачи по
геометрии равна обычной (padding как у всех), а статус живёт на аватаре и несёт БОЛЬШЕ,
чем оттенок — видно, ДОКУДА задача дошла по воронке, а не «какой-то цвет, надо помнить».
🔴 Дугу считает СЕРВЕР (`task_status_progress` = место столбца в воронке проекта/личной
доски), клиент только рисует. Числа нет (личная задача без столбика зрителя) → падаем на
грубую раскладку по КАТЕГОРИИ ниже; нет и её → остаётся одна дорожка, стадию не выдумываем.
🔴 Полосы во всю высоту тут нет ни в каком виде — правило акцента (CLIE-483) соблюдено. ── */
.conv-item.tkc-conv, .conv-item.aic-item { padding-left: 11px; }
/* Раскладка по КАТЕГОРИИ — только фолбэк: инлайновый `--arc` с сервера (точная позиция в
воронке) всегда перебивает эти правила, потому что инлайн-стиль сильнее таблицы стилей. */
.conv-item[data-tkcat="backlog"] { --arc: 8%; }
.conv-item[data-tkcat="unstarted"] { --arc: 22%; }
.conv-item[data-tkcat="started"] { --arc: 62%; }
.conv-item[data-tkcat="done"] { --arc: 100%; }
.conv-item[data-tkcat="cancelled"] { --arc: 0%; }
/* Кольцо: `::before` аватара, дуга — conic-gradient, «бублик» — радиальной маской.
`:not(.has-story)` — у аватара с историей ::before уже занят её кольцом (личные чаты;
у чата задачи истории не бывает, но гейт держим, чтобы кольца не подрались). */
.conv-item.tkc-conv .conv-av:not(.has-story)::before,
.conv-item.aic-item .conv-av:not(.has-story)::before {
content: ""; position: absolute; inset: -6px; border-radius: 50%; pointer-events: none;
background: conic-gradient(from -90deg,
var(--conv-accent, #5DCAA5) 0 var(--arc, 0%),
color-mix(in srgb, var(--conv-accent, #5DCAA5) 18%, transparent) var(--arc, 0%) 100%);
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
transition: opacity .15s ease;
}
/* Открытая беседа — то же кольцо, но с мягким ореолом: строка уже выделена подложкой,
кольцу достаточно чуть «зажечься», а не менять форму. 🔴 Родную тень аватара
(`0 4px 12px -4px var(--glow)`) НЕ теряем — дописываем ореол ВТОРЫМ слоем, иначе
у открытого чата аватар «плющило» бы: тень исчезала бы вместе с объёмом. */
.conv-item.tkc-conv.active .conv-av:not(.has-story),
.conv-item.aic-item.active .conv-av:not(.has-story) {
box-shadow: 0 4px 12px -4px var(--glow),
0 0 12px -3px color-mix(in srgb, var(--conv-accent, #5DCAA5) 60%, transparent);
}
/* ── Строка ТИКЕТА (`.tk-item`, вкладка «Тикеты») — у неё акцент это ПРИОРИТЕТ, а не стадия
воронки: кольцо-прогресс там читалось бы как «выполнено на N%». Поэтому у тикета остаётся
прежняя точка 6px слева — она никогда не встречается со строками чатов в одном списке. ── */
.conv-item.tk-item[style*="--conv-accent"] { padding-left: 18px; }
.conv-item.tk-item[style*="--conv-accent"]::before {
content: ""; position: absolute; left: 6px; top: 50%; transform: translateY(-50%);
width: 6px; height: 6px; border-radius: 50%; background: var(--conv-accent, #5DCAA5);
box-shadow: 0 0 7px -1px color-mix(in srgb, var(--conv-accent, #5DCAA5) 65%, transparent);
}
.conv-av {
width: 42px; height: 42px; border-radius: 50%; flex: none;
background: var(--acc-grad); color: #fff;
display: flex; align-items: center; justify-content: center;
font-weight: 600; font-size: 15px;
box-shadow: 0 4px 12px -4px var(--glow);
}
.conv-item-body { min-width: 0; flex: 1; }
/* онлайн-статус: зелёная точка на аватаре, когда собеседник 1-на-1 «в сети» */
.conv-av { position: relative; }
.conv-item.online .conv-av::after {
content: ""; position: absolute; right: -1px; bottom: -1px;
width: 12px; height: 12px; border-radius: 50%;
background: var(--ok); border: 2px solid var(--panel);
box-shadow: 0 0 6px var(--ok);
}
/* ── CLIE-388: КРУПНЫЕ аватары в списке чатов (42→56px) — паритет с WhatsApp/Telegram
(владелец: «нужны фотки больше размера в списке чатов»). Scoped к `#convList .conv-item`,
чтобы бампнуть ТОЛЬКО строки списка (личные/группы/тикеты/чаты-задач/эфиры/поиск) и НЕ
задеть аватар в форвард-модалке (#fwdList), тостах, мини-звонке (.vmini-av) и шапке
(.thread-av) — там размер прежний. Строка тянется по высоте сама (align-items:center),
фикс-высоты нет. Инициалы и онлайн-точка масштабируются пропорционально. ── */
#convList .conv-item { gap: 13px; }
#convList .conv-item .conv-av { width: 56px; height: 56px; font-size: 20px; }
#convList .conv-item.online .conv-av::after { width: 13px; height: 13px; }
/* фото/видео-аватар беседы в списке (постер видео = .jpg) */
.conv-av.has-img { background-size: cover; background-position: center; color: transparent; }
/* 🔴🔴 CLIE-903 · ЛЕСТНИЦА КРУЖКА-АВАТАРА: буквы ЛЕЖАТ ПОД фото и остаются, если фото
не пришло. Раньше ветка «есть url» рисовала ПУСТОЙ div с `background-image` — у него нет
`onerror` в принципе, а `color: transparent` выше гасил бы буквы, даже если бы они были.
Любой 404/403/обрыв (в списке из тысяч строк браузер отменяет загрузки сам) давал
ПРОЗРАЧНЫЙ кружок без единого признака — это и есть «аватарка не отображается».
Буквы носят СВОЙ цвет (`--av-ink`), поэтому гашение `color` на `.has-img` их не трогает;
`.jpg` виден мгновенно —
без сдвигов и мерцания. Тема-нейтрально (чёрный бэк под видео на время буфера). */
.av-vid {
width: 100%; height: 100%; object-fit: cover; display: block;
border-radius: inherit; background: #000; pointer-events: none;
}
/* Контейнеры аватара с видео: позиционирование + гашение фолбэка. НЕ ставим overflow:hidden
на контейнер — иначе обрежется кольцо истории (::before с отрицательным inset). Клип по
кругу делает сам `.av-vid` через border-radius:inherit + object-fit:cover (видео —
replaced-элемент, его контент режется по скруглению без обрезки контейнера). */
.conv-av.has-video, .thread-av.has-video, .tw-av.has-video, .tp-av.has-video,
.mention-av.has-video, .cli-av.has-video, .cli-avs.has-video,
.rc-av.has-video, .gs-mem-av.has-video {
position: relative; background-image: none; color: transparent;
}
/* Реакции: базовый .rc-av — с . */
.rc-av.has-video { width: 18px; height: 18px; border-radius: 50%; }
/* ── 😴 Бейдж кастом-статуса / «Не беспокоить» на аватаре (правый-нижний угол). Сидит РЯДОМ с
онлайн-точкой (та ::after справа-снизу; бейдж чуть выше/левее, чтобы не наезжать). Обведён
цветом фона (--panel) — чёткий кружок поверх фото. Apple-grade: маленький, хэйрлайн-обводка,
мягкая тень, крепится ОТДЕЛЬНЫМ узлом (hydrateStatusBadges), не ломая точку/кольцо истории. */
.conv-av, .thread-av, .who-av { position: relative; }
.cc-stbadge {
position: absolute; right: -3px; bottom: -3px; z-index: 3;
width: 18px; height: 18px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: var(--panel); border: 2px solid var(--panel);
box-shadow: 0 1px 3px rgba(0,0,0,.35), 0 0 0 1px var(--line);
font-size: 11px; line-height: 1; pointer-events: none; overflow: hidden;
}
/* Явный цвет текста: аватар с фото имеет color:transparent — эмодзи-бейдж НЕ должен исчезать. */
.cc-stbadge-emoji { font-size: 11px; color: var(--text); }
.cc-stbadge-dnd { background: #5b6b8c; border-color: var(--panel); }
.cc-stbadge-dnd svg.ic { width: 11px; height: 11px; color: #fff; }
/* Крупные аватары списка чатов (56px) → чуть больше бейдж, чтобы читался. */
#convList .conv-item .cc-stbadge { width: 20px; height: 20px; font-size: 12px; right: -2px; bottom: -2px; }
#convList .conv-item .cc-stbadge-dnd svg.ic { width: 12px; height: 12px; }
/* Аватар профиля в шапке (26px): бейдж 18px у края закрывал инициалы — на кадре кружок x1119–1136
лёг на буквы x1115–1125, «NI» читалось как «N». Меньше и наружу: 14px со сдвигом −5 — кружок
(с кольцом r 8) отстоит от букв на 2px и остаётся на кромке аватара. */
.who .who-av .cc-stbadge { width: 14px; height: 14px; font-size: 9px; border-width: 1.5px; right: -5px; bottom: -5px; }
.who .who-av .cc-stbadge-dnd svg.ic { width: 9px; height: 9px; }
/* Если у собеседника И онлайн-точка, И бейдж — точку сдвигаем левее, чтобы не слипались. */
.conv-item.online .conv-av:has(.cc-stbadge)::after { right: 13px; }
/* Телефон: в #convList бейдж 20 px со сдвигом −2 (выше) — его край с кольцом --line в 19 px от правого
края аватара, а точка (::after, content-box: 13 + кант 2·2 = 17 px) стояла на 13 px и заходила под
бейдж на 5 px: домик срезал зелёную точку (кадр 390, «Ефакин Никита Бэк», обе темы). Точка — вплотную
к кольцу бейджа: в ряд, не друг на друге; бейдж остаётся в углу. */
@media (max-width: 720px) {
#convList .conv-item.online .conv-av:has(.cc-stbadge)::after { right: 19px; }
}
/* ── 📞 ЗВОН-696: ЖИВОЙ ЗВОНОК — не такой же значок, как статус, выставленный месяц назад.
Состояние идёт ПРЯМО СЕЙЧАС и кончится само, поэтому у него тихое зелёное кольцо и
медленное «дыхание». Без прыжков размера (соседи не должны ездить) и с уважением к
«уменьшить движение»: там остаётся ровное кольцо без анимации. */
/* 🔴 14.10.2026 «грузит сильно»: «дыхание» было анимацией box-shadow — её композитор НЕ умеет,
и одна такая метка держала ВСЮ страницу на 60 перерисовках в секунду на главном потоке
(замер на проде, аккаунт владельца: 2 метки «на звонке» в списке — главный поток 27.7%
против 12.3% без них, кадров 59.5/с против 8). Теперь кольцо — ОТДЕЛЬНЫЙ слой-псевдоэлемент,
а дышит только его opacity: это композитор делает сам, главный поток не трогается.
Вид тот же: ровное кольцо 1px всегда + внешний ореол до 3px на вдохе. */
.cc-stbadge-call {
border-color: var(--ok, #22c55e);
box-shadow: 0 1px 3px rgba(0,0,0,.35), 0 0 0 1px color-mix(in srgb, var(--ok, #22c55e) 55%, transparent);
overflow: visible; /* ореол живёт ЗА кромкой метки; эмодзи 11–12px в круге 18–20px и так влезает */
}
.cc-stbadge-call::after {
content: ""; position: absolute; inset: -2px; border-radius: 50%; pointer-events: none;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok, #22c55e) 26%, transparent);
opacity: 0;
animation: ccStBadgeCall 2.4s ease-in-out infinite;
}
@keyframes ccStBadgeCall { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cc-stbadge-call::after { animation: none; } }
/* 🔴 Человек на звонке ОЧЕВИДНО в сети — вторая зелёная точка вплотную к зелёному кольцу
читается как шум (два одинаковых кружка, замер кадром на проде). Одно пятно смысла:
пока горит «на звонке», онлайн-точку не рисуем. Во Flutter это уже так по построению —
ветки бейджа там взаимоисключающие (user_avatar.dart). */
.conv-item.online .conv-av:has(.cc-stbadge-call)::after,
.thread-av:has(.cc-stbadge-call)::after,
.who-av:has(.cc-stbadge-call)::after { display: none; }
/* ── Кольцо ИСТОРИИ вокруг любого аватара (список чатов, шапка беседы, профиль). Instagram-градиент
для непросмотренных, серое для просмотренных. Рисуем ::before (::after занят онлайн-точкой). ── */
.has-story { position: relative; }
.has-story::before {
content: ""; position: absolute; inset: -5px; border-radius: 50%; padding: 2.5px;
background: linear-gradient(135deg,#feda75,#d62976 45%,var(--cm-962fbf, #962fbf) 80%,var(--cm-4f5bd5, #4f5bd5));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude; pointer-events: none;
}
.has-story.seen::before { background: var(--line); }
.has-story.clickable { cursor: pointer; }
#convList .conv-av.has-story::before { inset: -3.5px; }
/* Компания — ЗОЛОТАЯ обводка (отличить от личной цветной). */
.has-story.company::before { background: linear-gradient(135deg,#ffd93b,#f6a821 60%,#e8850c); }
.has-story.company.seen::before { background: linear-gradient(135deg,#ffe08a,#e8a51c); }
/* ── Полоса ИСТОРИЙ вверху списка «Чаты» — ВСЕГДА на виду (Telegram/WhatsApp Status). ── */
/* Истории теперь САМЫМ ВЕРХОМ (над фильтр-табами) — разделитель-хэйрлайн больше НЕ здесь,
он опущен на низ всей «шапки» (.conv-tabs), чтобы истории и табы читались одним блоком, а
единственная линия отделяла шапку от списка чатов. */
.chat-stories { padding: 10px 12px 12px; transition: padding .18s var(--ease-standard, ease); }
.chat-stories[hidden], .chat-stories:empty { display: none; }
.chat-stories .cs-full { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; }
.chat-stories .cs-full::-webkit-scrollbar { display: none; }
/* Мини-кластер (перекрытые аватары) — виден при свёрнутом состоянии (скролл вниз). */
.chat-stories .cs-mini { display: none; align-items: center; cursor: pointer; padding: 1px 2px; }
.cs-mini-av { width: 30px; height: 30px; border-radius: 50%; padding: 2px; background: linear-gradient(135deg,#feda75,#d62976 45%,var(--cm-962fbf, #962fbf) 80%,var(--cm-4f5bd5, #4f5bd5)); display: inline-flex; flex: 0 0 auto; }
.cs-mini-av.company { background: linear-gradient(135deg,#ffd93b,#f6a821 60%,#e8850c); }
.cs-mini-av .feed-av { width: 100% !important; height: 100% !important; border: 2px solid var(--panel); border-radius: 50% !important; overflow: hidden; }
.cs-mini-lbl { font-size: 12.5px; font-weight: 600; color: var(--text); margin-left: 8px; }
.chat-stories.collapsed { padding: 6px 12px; }
.chat-stories.collapsed .cs-full { display: none; }
.chat-stories.collapsed .cs-mini { display: flex; }
.cs-item { flex: 0 0 auto; width: 62px; text-align: center; cursor: pointer; }
.cs-ring { position: relative; width: 58px; height: 58px; margin: 0 auto; border-radius: 50%; padding: 2.5px; background: var(--line); display: flex; align-items: center; justify-content: center; }
.cs-item.unseen .cs-ring { background: linear-gradient(135deg,#feda75,#d62976 45%,var(--cm-962fbf, #962fbf) 80%,var(--cm-4f5bd5, #4f5bd5)); }
.cs-item.company.unseen .cs-ring { background: linear-gradient(135deg,#ffd93b,#f6a821 60%,#e8850c); }
.cs-item.company .cs-ring { background: linear-gradient(135deg,#ffe08a,#e8a51c); }
/* Только сам аватар заполняет кольцо; «+»-бейдж (.cs-add) НЕ трогаем (иначе он раздувался на весь круг). */
.cs-ring > :not(.cs-add) { width: 100% !important; height: 100% !important; border: 2.5px solid var(--panel); border-radius: 50% !important; overflow: hidden; box-sizing: border-box; }
.cs-ring img { width: 100%; height: 100%; object-fit: cover; }
.cs-add { box-sizing: border-box; padding: 0; position: absolute; right: -3px; bottom: -3px; z-index: 3; width: 22px; height: 22px; border-radius: 50%; background: var(--acc-fill); color: #fff; border: 2.5px solid var(--panel); display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; line-height: 1; box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.cs-item .cs-add { transition: transform var(--motion-fast, 120ms) var(--ease-standard, ease); }
.cs-item .cs-add:hover { transform: scale(1.12); }
/* Насечки-сегменты поверх кольца (по числу сториз) — над аватаром, под «+». Тот же приём
в дорожке страницы «Лента» (.feed-story .ring) — паритет со списком «Чаты». */
.cs-ring .cs-seg, .feed-story .ring .cs-seg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.cs-name { margin-top: 5px; font-size: 11px; color: var(--textSecondary, var(--cm-9aa0b4, #9aa0b4)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-item.me .cs-name { color: var(--text); font-weight: 600; }
/* Телефон: своя плитка подписана в две строки, как «Ваша история» в «Ленте» (.feed-story.me .st-name,
app.js) — в одну строку в плитке 62 px было «Ваша ист…» (кадр 390, обе темы). Не больше двух
строк; высота строки 1.2 — хвост «р» под обрезкой второй строки не срезается. */
@media (max-width: 720px) {
.cs-item.me .cs-name { white-space: normal; line-height: 1.2; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
}
.conv-item:hover { background: var(--panel-2); }
.conv-item.active {
background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 22%, transparent), color-mix(in srgb, var(--primary) 16%, transparent));
border-color: var(--cm-7c74dc-35, rgba(124,116,220,.35));
box-shadow: 0 4px 14px -6px var(--glow);
}
/* 🔴 «Контрастность» 10.09.2026: имя беседы — акцентные ЧЕРНИЛА, значит --primary-2
(замер прода: --primary давал 4.23:1 на тёплом холсте при AA 4.5, стало 5.55:1). */
.conv-name { font-weight: 600; }
.conv-item.active .conv-name, .conv-item .conv-name.accent { color: var(--primary-2, var(--primary)); }
/* ── 0189 · РУЧНОЙ ПОРЯДОК ЗАКРЕПЛЁННЫХ ЧАТОВ (drag-and-drop) ─────────────────────────────
Владелец: «нужен дрег енд дроп на закреплённые чаты». Ни одного НОВОГО элемента на экране:
грип — та самая скрепка 📌, что и так стоит ровно у закреплённых. Мышью тянется вся строка
(курсор-хват появляется ТОЛЬКО на наведении и только у закреплённых — экран не отбираем).
Визуал драга — ровно как у карточек «Моих задач» (.tw-lift/.tw-reordering): один язык жеста. */
@media (hover: hover) and (pointer: fine) {
#convList .conv-item.pinned { cursor: grab; }
#convList .conv-item.pinned:active { cursor: grabbing; }
}
/* Скрепка = хваталка порядка. На тач тянут именно за неё → снимаем с неё браузерный
скролл-жест (touch-action) и расширяем область попадания невидимыми полями (HIG: цель
пальца больше иконки), не меняя визуальный размер и не сдвигая соседние метки. */
#convList .conv-item.pinned .conv-pin-ic {
cursor: grab; touch-action: none; position: relative;
padding: 8px 4px; margin: -8px -4px;
transition: opacity .14s ease, transform .14s ease;
}
#convList .conv-item.pinned .conv-pin-ic:hover { opacity: 1; transform: scale(1.12); }
#convList .conv-item.pinned .conv-pin-ic:active { cursor: grabbing; transform: scale(.96); }
/* Пока идёт перестановка: хват-курсор на всём списке, без выделения текста и без
браузерного скролла (тач ведёт строку, а не полотно). */
#convList.conv-reordering { cursor: grabbing; user-select: none; -webkit-user-select: none; touch-action: none; }
/* Тянущаяся строка — приподнята над остальными, мягкая «яблочная» тень, hover соседей погашен. */
#convList.conv-reordering .conv-item:hover { background-color: transparent; }
/* background-COLOR (а не background): у открытого чата подсветка `.active` — это
background-IMAGE (градиент), и она остаётся видна поверх заливки. Иначе тянущийся
активный чат терял бы выделение на время жеста. */
#convList .conv-item.conv-lift {
z-index: 30; background-color: var(--panel-2);
border-color: var(--line);
box-shadow: 0 14px 34px rgba(0,0,0,.34), 0 2px 8px rgba(0,0,0,.20);
}
html[data-theme="light"] #convList .conv-item.conv-lift {
background-color: #fff;
box-shadow: 0 14px 34px rgba(0,0,0,.16), 0 2px 8px rgba(0,0,0,.10);
}
#convList.conv-reordering .conv-item.conv-lift:hover { background-color: var(--panel-2); }
html[data-theme="light"] #convList.conv-reordering .conv-item.conv-lift:hover { background-color: #fff; }
@media (prefers-reduced-motion: reduce) {
#convList .conv-item.pinned .conv-pin-ic { transition: none !important; }
}
/* .logout (кнопка внизу сайдбара) удалена — «Выйти» переехала в Настройки → Профиль (pf-logout-btn) */
/* кнопка-📌 на строке чата: видна на hover/закреплённых, не мешает клику по чату */
.conv-pin-mark { margin-right: 4px; font-size: 12px; opacity: .9; }
.conv-pin-btn, .contact-pin-btn {
flex: none; border: none; background: transparent; cursor: pointer;
font-size: 14px; line-height: 1; padding: 4px; border-radius: 8px;
opacity: 0; filter: grayscale(1); transition: opacity .12s, filter .12s, background .12s;
}
.conv-item:hover .conv-pin-btn,
.contact-row:hover .contact-pin-btn { opacity: .55; }
.conv-pin-btn.on, .contact-pin-btn.on { opacity: 1; filter: none; }
.conv-pin-btn:hover, .contact-pin-btn:hover { opacity: 1; filter: none; background: var(--panel-2); }
/* булавка строки контакта — svgIcon("pin") (база `button svg.ic` дала бы 22 px — крупнее «Написать» 18 px);
закреплённый — акцентные чернила вместо красного эмодзи */
.contact-pin-btn svg.ic { width: 18px; height: 18px; }
.contact-pin-btn.on { color: var(--primary-2); }
/* ---- мои контакты (телефонная книга) ---- */
/* ---- колонка «Мои задачи» (на месте бывших контактов) ------------------- */
.tasks-col {
background: var(--panel);
border-right: 1px solid var(--line);
display: flex; flex-direction: column; min-height: 0;
position: relative; /* якорь для .col-resizer на правой кромке */
}
.tasks-head {
display: flex; align-items: center; justify-content: space-between;
height: var(--head-h); flex: none;
padding: 0 14px; border-bottom: 1px solid var(--line); font-weight: 600;
}
.tasks-head-actions { display: flex; gap: 6px; }
.tasks-list { list-style: none; margin: 0; padding: 6px; overflow-y: auto; flex: 1; min-height: 0; }
.tasks-empty { padding: 14px; line-height: 1.4; }
/* Хвост окна столбика (CLIE-685·5): окно растёт САМО при подходе к низу, эта строка — вход для
тех, кто листает рывком/клавиатурой, и честный ответ «сколько уже показано из скольких».
Не «кап» (CLIE-620): под ней ничего не спрятано, счётчики секций считают ВСЕ задачи.
Размеры кнопки — общие токены ряда (--ctl-h/--ctl-r/--ctl-fs), своих чисел не заводим. */
.tasks-more {
list-style: none; display: flex; align-items: center; gap: 10px;
padding: 10px 8px 16px; justify-content: center; flex-wrap: wrap;
}
.tasks-more-btn {
height: var(--ctl-h); border-radius: var(--ctl-r); font-size: var(--ctl-fs);
padding: 0 14px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text);
cursor: pointer; transition: background .14s ease, border-color .14s ease;
}
.tasks-more-btn:hover { background: var(--panel); }
.tasks-more-n { white-space: nowrap; }
/* 💤 Строка «Ещё N тихих чатов задач и ИИ — без движения D+ дн.» длиннее узкой колонки чатов
(замер 16.10.2026: 346 px текста в строке 267 px — начало и конец срезались): переносится и
центрируется, а не режется. */
.conv-dorm .tasks-more-n { white-space: normal; text-align: center; max-width: 100%; }
/* 🔴 Хвост окна В ТЕЛЕ СТОЛБЦА ДОСКИ (CLIE-1769). `.tw-col-body` — flex-колонка, а у flex-
элемента по умолчанию `flex-shrink: 1`: без `flex: none` хвост сжимался бы в полоску ровно
так же, как сжимались карточки под `content-visibility` (замер того же столбца: 31 566px
вместо 227 586px). Отступ сверху — чтобы строка не липла к последней карточке. */
.tw-col-body > .tasks-more.tw-col-more { flex: none; padding: 6px 2px 10px; gap: 8px; }
/* Подвал страницы канона: та же форма «Показать ещё · Показано N из M», что у задач
(одна реализация), плюс отбивка от последней карточки. Токены обеих тем — общие. */
.kn-canon-more { margin-top: 6px; border-top: 1px solid var(--line); }
/* ---- колонка «Проекты» (слева от задач): фильтр столбика «Мои задачи» по проекту ----
«Все проекты» вверху = без фильтра; выбор проекта = только его задачи; «Без проекта» =
задачи вне проектов. Счётчики — из state.tasks (renderProjectsRail), живут в реалтайме. */
.projects-col {
background: var(--panel);
border-right: 1px solid var(--line);
display: flex; flex-direction: column; min-height: 0;
position: relative; /* якорь для .col-resizer на правой кромке */
/* ⏳ CLIE-591: столбец — КОНТЕЙНЕР для запросов по ЕГО ширине (рельс тянется мышью, поэтому
медиазапрос по окну тут бесполезен). Отметка «ждёт ответа» на узком рельсе ужимается,
чтобы не съедать имя проекта (см. @container projrail ниже). */
container: projrail / inline-size;
}
.projects-head {
display: flex; align-items: center; justify-content: space-between;
height: var(--head-h); flex: none;
padding: 0 14px; border-bottom: 1px solid var(--line); font-weight: 600;
}
.projects-head-actions { display: flex; gap: 6px; }
.projects-list { list-style: none; margin: 0; padding: 6px; overflow-y: auto; flex: 1; min-height: 0; }
.projects-empty { padding: 14px 12px; line-height: 1.45; color: var(--muted); font-size: 12.5px; }
/* 🔴 CLIE-631 (правило выхода): пустой под фильтром рельс НАЗЫВАЕТ причину и даёт кнопку выхода
рядом — «сузил и забыл» не должен читаться как «всё пропало». */
.projects-empty .proj-flreset { display: block; margin-top: 9px; }
.projects-sep { height: 1px; background: var(--line); margin: 6px 8px; }
/* Заголовки секций рельса «Проекты» по этапам воронки (0176) — эталон .task-section-title
столбика «Мои задачи»: цветная точка этапа + КАПС-подпись + счётчик, клик — свернуть. */
.projects-list .proj-section-title {
list-style: none; padding: 12px 8px 5px;
font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
color: var(--muted);
display: flex; align-items: center; gap: 7px;
cursor: pointer; user-select: none; border-radius: 8px;
transition: background .12s ease;
}
.projects-list .proj-section-title:hover { background: color-mix(in srgb, var(--panel-2) 60%, transparent); }
.projects-list .proj-section-title .psec-caret {
display: inline-flex; width: 12px; height: 12px; flex: none; opacity: .55; transition: transform .14s ease;
}
.projects-list .proj-section-title .psec-caret svg { width: 12px; height: 12px; }
.projects-list .proj-section-title.collapsed .psec-caret { transform: rotate(-90deg); }
.projects-list .proj-section-title .psec-swatch {
width: 9px; height: 9px; border-radius: 50%; flex: none;
box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 16%, transparent);
}
.projects-list .proj-section-title .psec-lbl { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.projects-list .proj-section-title .psec-n { flex: none; font-variant-numeric: tabular-nums; opacity: .6; font-weight: 600; }
/* 🏢 CLIE-490 — заголовок КОМПАНИИ тянется мышью (личный порядок компаний). Хваталки-иконки нет:
тянется сам заголовок, курсор объясняет жест (как перетаскивание списков в Reminders). */
.projects-list .proj-section-title[data-co] { cursor: grab; }
.projects-list .proj-section-title[data-co]:active { cursor: grabbing; }
.projects-list .proj-section-title[data-co].dragging {
opacity: .55; background: color-mix(in srgb, var(--panel-2) 82%, transparent);
box-shadow: 0 6px 18px rgba(0, 0, 0, .18); cursor: grabbing;
}
/* Пока тащим компанию — соседние заголовки не «мигают» ховером под курсором.
🔴 pointer-events у строк НЕ гасим: dragover целится в заголовок ЧЕРЕЗ строку под курсором,
иначе длинную компанию не перепрыгнуть (над её строками цели бы не было). */
.projects-list.co-reordering .proj-section-title:not(.dragging) { background: transparent; }
.proj-item {
position: relative; /* якорь для .proj-qacts (пилюля быстрых действий справа) */
display: flex; align-items: center; gap: 10px;
padding: 8px 10px; border-radius: 11px; cursor: pointer; margin-bottom: 2px;
border: 1px solid transparent; color: var(--text);
transition: background .12s, border-color .12s, box-shadow .12s;
}
.proj-item:hover { background: var(--panel-2); }
.proj-item.active {
background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 22%, transparent), color-mix(in srgb, var(--primary) 16%, transparent));
border-color: var(--cm-7c74dc-35, rgba(124,116,220,.35));
box-shadow: 0 4px 14px -6px var(--glow);
}
/* цветная «монета» проекта (буква/иконка) */
.proj-dot {
width: 26px; height: 26px; border-radius: 8px; flex: none;
display: flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 700; color: #fff; line-height: 1;
background: var(--acc-grad);
box-shadow: 0 3px 10px -5px var(--glow);
overflow: hidden;
}
.proj-dot svg { width: 15px; height: 15px; }
.proj-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.proj-count {
flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
background: var(--panel-2); color: var(--muted);
font-size: 11px; font-weight: 700; line-height: 20px; text-align: center;
}
/* активная строка: счётчик читаемым в ОБЕИХ темах (белый на светлой теме пропадал) */
.proj-item.active .proj-count { background: var(--panel-2); color: var(--text); }
/* «Все проекты» — фирменная строка-иконка; «Без проекта» — приглушённая пунктирная */
.proj-item.all .proj-dot { background: linear-gradient(135deg, #5b8def, var(--cm-7c74dc, #7c74dc)); }
.proj-item.none .proj-dot { background: transparent; color: var(--muted); box-shadow: none; border: 1px dashed var(--line); }
/* Архивный проект в рельсе: приглушён + пометка «архив» (задачи тоже в архиве; вернуть через ✎). */
.proj-item.archived { opacity: .5; }
/* Плашка активного фильтра по проекту над списком чатов (0099) УБРАНА по требованию владельца:
проект уже подсвечен в рельсе «Проекты», дублирующий индикатор над «Историями» лишний и
создавал пустое пространство. Сужение списка по проекту работает как прежде (без плашки). */
.proj-item.archived:hover { opacity: .75; }
/* 🧩 CLIE-1050 — проект НЕ в рабочем пространстве (заведён из CRM и ещё не взят в работу).
Не прячем (невидимых записей не бывает) и не глушим до нечитаемости: приглушаем чуть
слабее архива и называем словом (подпись `.proj-ghost-in` рисует сам рельс). */
.proj-item.notwork { opacity: .68; }
.proj-item.notwork:hover, .proj-item.notwork.active { opacity: 1; }
/* Drag-перестановка проектов = ручной приоритет (position/0075). Курсор-«захват», плавный сдвиг
соседей, приподнятая полупрозрачная строка под курсором — как перетаскивание в Finder/Reminders. */
.proj-item[draggable="true"] { cursor: grab; }
.proj-item[draggable="true"]:active { cursor: grabbing; }
.projects-list.reordering .proj-item[draggable="true"] { transition: transform .14s cubic-bezier(.2,.7,.3,1), background .12s, border-color .12s, box-shadow .12s; }
.proj-item.dragging {
opacity: .6; cursor: grabbing;
background: var(--panel-2);
border-color: var(--cm-7c74dc-35, rgba(124,116,220,.35));
box-shadow: 0 10px 24px -10px var(--glow);
}
.proj-item.archived .proj-name::after { content: " · архив"; color: var(--muted); font-size: 10px; font-weight: 600; }
/* быстрые действия строки проекта: пилюля справа, всплывает по наведению (перекрывает счётчик,
как на карточках доски .tw-qacts). «Перейти в задачи» / «Новая задача» / «Изменить». */
.proj-qacts {
position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
display: flex; align-items: center; gap: 1px; padding: 2px;
border-radius: 9px; background: var(--bg); border: 1px solid var(--line);
box-shadow: 0 3px 12px rgba(0,0,0,.28);
opacity: 0; pointer-events: none; transition: opacity .12s;
}
.proj-item:hover .proj-qacts { opacity: 1; pointer-events: auto; }
/* ═══ ПОДПРОЕКТЫ в рельсе «Проекты» (0184, CLIE-412) ═══════════════════════════════════
Подпроект = часть общего дела (ЕТТИ → мобилка / сайт / 1С). Рисуем как раскрытие в
Finder/Reminders: тонкий «локоть»-хэйрлайн от родителя к ребёнку + отступ уровня, шеврон
ветки в левом жёлобе. 🔴 Жёлоб появляется ТОЛЬКО когда иерархия реально есть (класс
.has-tree ставит renderProjectsRail) — у тенанта без подпроектов рельс пиксель-в-пиксель
прежний, экран у пользователя не отбираем. Шаг уровня 14px — читаемо и не съедает имя. */
.projects-list.has-tree .proj-item { padding-left: 24px; }
.projects-list.has-tree .proj-item.sub { padding-left: calc(24px + var(--pdepth, 1) * 14px); }
/* «локоть»: вертикаль от родителя + скругление к строке ребёнка */
.projects-list .proj-item.sub::before {
content: ""; position: absolute; pointer-events: none;
left: calc(11px + (var(--pdepth, 1) - 1) * 14px);
top: -3px; height: calc(50% + 3px); width: 9px;
border-left: 1px solid var(--line); border-bottom: 1px solid var(--line);
border-bottom-left-radius: 7px; opacity: .8;
}
/* CLIE-627: у НЕ-последнего ребёнка направляющая идёт дальше вниз — линия ветки читается сплошной,
а не пунктиром из отдельных «локтей». 1px-направляющая дерева, а НЕ акцент-рейка (CLIE-483). */
.projects-list .proj-item.sub:not(.sub-last)::after {
content: ""; position: absolute; pointer-events: none;
left: calc(11px + (var(--pdepth, 1) - 1) * 14px);
top: 50%; bottom: -3px; width: 1px; background: var(--line); opacity: .8;
}
/* шеврон ветки: в жёлобе, не сдвигает содержимое строки (у соседей без детей — ровно) */
.proj-branch {
position: absolute; left: calc(3px + var(--pdepth, 0) * 14px); top: 50%; transform: translateY(-50%);
width: 18px; height: 18px; padding: 0; border: 0; border-radius: 6px;
display: flex; align-items: center; justify-content: center;
background: transparent; color: var(--muted); cursor: pointer;
transition: background .12s, color .12s, transform .14s cubic-bezier(.2,.7,.3,1);
}
.proj-branch svg { width: 12px; height: 12px; }
.proj-branch:hover { background: var(--panel-2); color: var(--text); }
.proj-branch.collapsed { transform: translateY(-50%) rotate(-90deg); }
/* ═══ ЯКОРЬ ВЕТКИ (CLIE-627) ═══════════════════════════════════════════════════════════
Родитель почти всегда лежит в ДРУГОЙ секции, чем его подпроекты (он «сейчас», они «в
бэклоге»). Раньше ребёнок оставался корнем секции с немым глифом «↳», и дети одного
родителя расползались по списку между чужими проектами — это и есть «бардак». Теперь
ветка собирается под тихой строкой-якорем: то же имя, тот же цвет монеты, но это НЕ
проект этой секции — поэтому у него нет счётчика, нет быстрых действий, он не тянется
и не принимает выделение. Читается как заголовок ветки, а не как ещё один проект.
🔴 Никаких вертикальных полос-акцентов (CLIE-483): связь несёт тот же 1px «локоть»
.proj-item.sub::before, что и у обычного дерева — второй визуальный язык не заводим. */
.proj-item.ghost { color: var(--muted); cursor: pointer; }
.proj-item.ghost .proj-name { font-weight: 500; }
.proj-item.ghost .proj-dot { opacity: .62; transform: scale(.86); transform-origin: center; }
.proj-item.ghost:hover { color: var(--text); }
.proj-item.ghost:hover .proj-dot { opacity: 1; }
/* «· в «Сейчас»» — в каком блоке живёт сам родитель. Лежит ВНУТРИ .proj-name, поэтому на узком
рельсе уезжает под то же отточие, что и имя: имя важнее подписи, огрызка «в «…»» не бывает. */
.proj-ghost-in { color: var(--muted); font-size: 11.5px; opacity: .75; font-weight: 400; }
/* сколько подпроектов спрятано под свёрнутой веткой */
.proj-subn {
flex: none; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
background: transparent; border: 1px solid var(--line); color: var(--muted);
font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
}
/* подпись-подсказка и правый суб-текст в поповерах (родитель/группа в меню строки) */
.tc-pop-hint { padding: 2px 8px 8px; color: var(--muted); font-size: 11.5px; line-height: 1.35; }
.tc-pop-sub { flex: none; max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 11px; }
/* 🔴 ЖИВОЙ ИНДИКАТОР ТАЙМЕРА — ЕДИНАЯ реализация для рельса «Проекты» (renderProjectsRail →
.proj-coin-wrap) и каталога проектов (v2ProjCoin → .v2-pc-coinwrap). Пульсирующая точка на
«монете» проекта, когда внутри есть задача с идущим ПРЯМО СЕЙЧАС учётом времени. Цвет — та же
семья, что бейдж таймера .tw-pill-timer (var(--info)); мягкое расходящееся кольцо читается как
«живое», в духе индикатора записи/присутствия у Apple. Точка — сиблинг монеты в обёртке (не её
потомок), поэтому overflow:hidden монеты её не режет, а угол не обрезается строкой/карточкой. */
.proj-coin-wrap, .v2-pc-coinwrap { position: relative; display: inline-flex; flex: none; }
.cc-timer-pip {
position: absolute; right: -3px; bottom: -3px; z-index: 1;
width: 11px; height: 11px; border-radius: 50%;
background: var(--info);
border: 2px solid var(--panel); /* «вырез» вокруг точки — отделяет её от монеты и фона */
box-shadow: 0 0 0 0 color-mix(in srgb, var(--info) 55%, transparent);
pointer-events: none; /* тултип берёт обёртка; клик проходит к строке/карточке */
animation: ccTimerPip 1.8s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes ccTimerPip {
0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--info) 55%, transparent); }
70% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--info) 0%, transparent); }
100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--info) 0%, transparent); }
}
/* ═══ ⏳ CLIE-591 → CLIE-631 — «ЖДЁТ ОТВЕТА» НА СТРОКЕ ПРОЕКТА ═══════════════════════════
Владелец: «если в проектах есть задачи, которые ждут ответа, нужно тут это отобразить
дизайном». Витрину из пяти скинов показали, вариант выбрали — и переключатель УБРАН
(CLIE-631: «а там первый вариант у всех и выбор не нужен»). Вид ОДИН: янтарная пилюля
⏳N у счётчика. Разметка — .proj-item.is-await + .proj-await. Второго вида не заводить:
вернувшийся data-awstyle ловит сторож design_lint (блок LISTCFG_MECH).
Цвет — семейство «внимание» (--warning), как у пилюли «⏳ ИИ ждёт ответа» на карточке
задачи: рельс и карточка говорят одним языком.
🔴 Левых полосок-реек тут нет и не будет (правило CLIE-483): акцент несут иконка+число. */
/* Отрицательный margin съедает половину общего gap:10px строки: отметка стоит ВПЛОТНУЮ к
счётчику (это одна информационная группа «справа»), а не отбирает ещё 10px у имени. */
.proj-await {
flex: none; font-variant-numeric: tabular-nums; margin-right: -4px;
display: inline-flex; align-items: center; gap: 3px;
height: 20px; padding: 0 7px 0 5px; border-radius: 10px;
background: var(--warning-soft); color: var(--warning-ink, var(--warning));
border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent);
font-size: 11px; font-weight: 700; line-height: 1;
}
.proj-await .ic { width: 11px; height: 11px; }
/* 🔴 УЗКИЙ РЕЛЬС (дефолтная ширина 200px, а с деревом подпроектов ещё -14px): имя проекта
ВАЖНЕЕ иконки. Пруф на живом проде показал «Курьерское приложение» ужатым до «К.» — поэтому
на узком рельсе в отметке остаётся ТОЛЬКО число (смысл несут янтарь и подсказка строки),
а на широком возвращается иконка-часы. Запрос по ширине СТОЛБЦА, а не окна: рельс тянется
мышью, и окно про его ширину ничего не знает. */
@container projrail (max-width: 268px) {
.proj-await .ic { display: none; }
.proj-await { padding: 0 6px; }
/* CLIE-627: на узком рельсе подпись «в каком блоке родитель» УХОДИТ ЦЕЛИКОМ, а не превращается
в огрызок «· Се…». Имя родителя важнее подписи; полное «ЛюблюЕду · Сейчас» вернётся, как
только рельс растянут мышью. Тот же контейнер, что у отметки «ждёт ответа» — второго
механизма «узкий рельс» не заводим. */
.proj-ghost-in { display: none; }
}
@media (prefers-reduced-motion: reduce) { .cc-timer-pip { animation: none; } }
.proj-qa {
width: 26px; height: 26px; flex: none; padding: 0;
display: inline-flex; align-items: center; justify-content: center;
border: none; background: transparent; border-radius: 7px;
color: var(--muted); cursor: pointer; transition: background .12s, color .12s;
}
.proj-qa:hover { background: var(--panel-2); color: var(--text); }
.proj-qa .ic { width: 15px; height: 15px; }
/* секции: этапы (Бэклог/К выполнению/В работе/На проверке/Готово) · срок · проект */
.tasks-list .task-section-title {
list-style: none; padding: 12px 10px 5px;
font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
color: var(--muted);
display: flex; align-items: center; gap: 7px;
}
.tasks-list .task-section-title[data-group] { cursor: pointer; user-select: none; border-radius: 8px; transition: background .12s ease; }
.tasks-list .task-section-title[data-group]:hover { background: color-mix(in srgb, var(--panel-2) 60%, transparent); }
.tasks-list .task-section-title .ic { width: 14px; height: 14px; flex: none; }
.tasks-list .task-section-title .tsec-lbl { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tasks-list .task-section-title .tsec-n { flex: none; font-variant-numeric: tabular-nums; }
/* каретка сворачивания: вниз = раскрыто, вправо (−90°) = свёрнуто */
.tasks-list .task-section-title .tsec-caret { display: inline-flex; width: 12px; height: 12px; flex: none; opacity: .6; transition: transform .14s ease; }
.tasks-list .task-section-title .tsec-caret .ic { width: 12px; height: 12px; }
.tasks-list .task-section-title.collapsed .tsec-caret { transform: rotate(-90deg); }
.tasks-list .task-section-title .tsec-swatch { width: 9px; height: 9px; border-radius: 50%; flex: none; box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 18%, transparent); }
.tasks-list .task-section-title:first-child { padding-top: 6px; }
/* «Идёт таймер» — одна семья с бейджем таймера (.task-chip.wip / .tw-pill-timer): тот же
var(--info) и тот же мягкий пульс на иконке. Заливки строки НЕТ — только цвет и хэйрлайн. */
.tasks-list .tst-running { color: var(--info); }
.tasks-list .tst-running svg.ic { animation: wipPulse 1.8s ease-in-out infinite; }
.tasks-list .tst-backlog { color: #8b93a3; }
.tasks-list .tst-todo { color: var(--primary-2); }
.tasks-list .tst-wip { color: var(--info); }
.tasks-list .tst-test { color: #d08b1f; }
.tasks-list .tst-project { color: var(--text); }
.tasks-list .tst-overdue { color: var(--urg-overdue-ink); }
.tasks-list .tst-today { color: var(--urg-today); }
.tasks-list .tst-soon { color: var(--primary-2); }
.tasks-list .tst-none { color: #6B7280; }
.tasks-list .tst-done { color: var(--urg-done); }
.tasks-list .tst-cancelled { color: #8b93a3; }
/* ── Панель управления столбиком «Мои задачи» (группировка · сортировка · этапы) ── */
.tasks-list .task-ctrlbar { list-style: none; display: flex; align-items: center; gap: 6px; padding: 2px 4px 8px; }
.tasks-list .tcol-btn {
display: inline-flex; align-items: center; gap: 5px; min-width: 0;
padding: 5px 8px; border: 1px solid var(--line); border-radius: 9px;
background: var(--panel); color: var(--text-2, var(--text)); font-size: 12px; font-weight: 600;
cursor: pointer; transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.tasks-list .tcol-btn:first-child { flex: 1 1 auto; }
.tasks-list .tcol-btn:hover { background: var(--panel-2); border-color: color-mix(in srgb, var(--primary) 40%, var(--line)); }
.tasks-list .tcol-btn .ic { width: 14px; height: 14px; flex: none; opacity: .75; }
.tasks-list .tcol-btn .ic:last-child { width: 12px; height: 12px; opacity: .5; margin-left: auto; }
.tasks-list .tcol-btn-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tasks-list .tcol-sortglyph { font-size: 13px; font-weight: 800; opacity: .7; line-height: 1; }
.tasks-list .tcol-gear {
flex: none; display: inline-flex; align-items: center; justify-content: center;
width: 30px; height: 28px; border: 1px solid var(--line); border-radius: 9px;
background: var(--panel); color: var(--muted); cursor: pointer; transition: all .12s ease;
}
.tasks-list .tcol-gear:hover { background: var(--panel-2); color: var(--primary-2); border-color: color-mix(in srgb, var(--primary) 40%, var(--line)); }
.tasks-list .tcol-gear .ic { width: 15px; height: 15px; }
/* ── Панель управления рельсом «Проекты» (0176): группировка · сортировка — эталон .tcol-btn
столбика «Мои задачи», но в контексте .projects-list. Обе темы наследуются от переменных. ── */
/* 🎚 CLIE-631: кнопок в панели стало три (группировка · ⏱ · ⚙ сортировка-фильтры) — отступы
ужаты ровно настолько, чтобы САМАЯ ДЛИННАЯ подпись группировки («По воронке») влезала целиком
при дефолтной ширине рельса 200px. Замер стенда: было 68/62 (обрезка), стало влезает. */
.projects-list .task-ctrlbar { list-style: none; display: flex; align-items: center; gap: 4px; padding: 2px 2px 8px; }
.projects-list .tcol-btn {
display: inline-flex; align-items: center; gap: 4px; min-width: 0;
padding: 5px 7px; border: 1px solid var(--line); border-radius: 9px;
background: var(--panel); color: var(--text-2, var(--text)); font-size: 12px; font-weight: 600;
cursor: pointer; transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.projects-list .tcol-btn:first-child { flex: 1 1 auto; }
.projects-list .tcol-btn:hover { background: var(--panel-2); border-color: color-mix(in srgb, var(--primary) 40%, var(--line)); }
.projects-list .tcol-btn .ic { width: 13px; height: 13px; flex: none; opacity: .75; }
.projects-list .tcol-btn .ic:last-child { width: 12px; height: 12px; opacity: .5; margin-left: auto; }
.projects-list .tcol-btn-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.projects-list .tcol-sortglyph { font-size: 13px; font-weight: 800; opacity: .7; line-height: 1; }
/* Компактные кнопки рельса (↕ сортировка, ⚙️ этапы воронки): узкий столбик → группировка на всю
ширину, вторичные — иконками (как компактный gear у «Мои задачи»). */
.projects-list .projrail-sort, .projects-list .projrail-cfg {
flex: none; display: inline-flex; align-items: center; justify-content: center;
width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 9px;
background: var(--panel); color: var(--muted); cursor: pointer; transition: all .12s ease;
}
.projects-list .projrail-sort:hover, .projects-list .projrail-cfg:hover { background: var(--panel-2); color: var(--primary-2); border-color: color-mix(in srgb, var(--primary) 40%, var(--line)); }
/* ⏱ CLIE-462 (раунд 3): фильтр «Идёт таймер» — тумблер той же семьи, что ↕/⚙️. Включён —
«таймерный» var(--info) (одна семья с бейджем таймера и пульсом .cc-timer-pip), а не акцент
приложения: цвет сам подсказывает, ЧТО отфильтровано. Кнопки нет, пока таймеров нет. */
.projects-list .projrail-run {
flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 3px;
min-width: 30px; height: 30px; padding: 0 5px; border: 1px solid var(--line); border-radius: 9px;
background: var(--panel); color: var(--muted); cursor: pointer; transition: all .12s ease;
}
.projects-list .projrail-run .ic { width: 15px; height: 15px; }
.projects-list .projrail-run .prrailrun-n { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; opacity: .75; }
.projects-list .projrail-run:hover { background: var(--panel-2); color: var(--info); border-color: color-mix(in srgb, var(--info) 40%, var(--line)); }
.projects-list .projrail-run.on {
color: var(--info); border-color: color-mix(in srgb, var(--info) 55%, var(--line));
background: color-mix(in srgb, var(--info) 14%, transparent);
}
.projects-list .projrail-run.on .prrailrun-n { opacity: 1; }
.projects-list .projrail-sort .tcol-sortglyph { opacity: .85; }
.projects-list .projrail-cfg .ic { width: 15px; height: 15px; }
/* 🎚 CLIE-631: сколько фильтров сейчас включено — числом прямо на кнопке. Иначе сузивший список
человек назавтра видит «пустой рельс» и считает это поломкой (правило «состояние видно там,
где его встречают»). Включённый фильтр красим акцентом приложения — как #pcatFilter в каталоге. */
.projects-list .projrail-cfg { position: relative; }
.projects-list .projrail-cfg.on {
color: var(--primary-2); border-color: color-mix(in srgb, var(--primary) 55%, var(--line));
background: color-mix(in srgb, var(--primary) 14%, transparent);
}
.projects-list .prrail-fbadge {
position: absolute; right: -4px; top: -4px; min-width: 15px; height: 15px; padding: 0 3px;
display: inline-flex; align-items: center; justify-content: center; border-radius: 8px;
background: var(--acc-fill); color: #fff; border: 2px solid var(--panel);
font-size: 9.5px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; pointer-events: none;
}
/* Цветная точка этапа в строках ⚙️-конфига «Этапы воронки» (popover .tc-pop вне .projects-list). */
.tc-pop .tcol-cfg-ic .psec-swatch { width: 10px; height: 10px; border-radius: 50%; display: inline-block; box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 14%, transparent); }
/* Секция-цель при переносе проекта между этапами: тонкий акцент (не заливка на всю строку). */
.projects-list .proj-section-title.drop-target {
background: color-mix(in srgb, var(--primary) 14%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 42%, transparent);
}
/* мягкая строка «скрыто N задач» */
.tasks-list .task-hidden-note { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 10px; margin-top: 4px; color: var(--muted); font-size: 11.5px; }
.tasks-list .task-hidden-note .thn-txt { display: inline-flex; align-items: center; gap: 6px; }
.tasks-list .task-hidden-note .ic { width: 13px; height: 13px; opacity: .7; }
.tasks-list .task-hidden-note .thn-cfg { background: none; border: none; color: var(--primary-2); font-size: 11.5px; font-weight: 600; cursor: pointer; padding: 2px 4px; border-radius: 6px; }
.tasks-list .task-hidden-note .thn-cfg:hover { background: color-mix(in srgb, var(--primary) 14%, transparent); }
/* ── Поповер «Настроить этапы» ── */
.tc-pop .tcol-cfg-head { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); padding: 2px 4px 6px; }
.tc-pop .tcol-cfg-hint { font-size: 11.5px; line-height: 1.45; color: var(--muted); padding: 0 4px 10px; }
.tc-pop .tcol-cfg-list { display: flex; flex-direction: column; gap: 3px; }
.tc-pop .tcol-cfg-row {
display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 9px;
background: var(--panel); border: 1px solid transparent; cursor: grab; transition: background .12s ease, opacity .12s ease, border-color .12s ease;
}
.tc-pop .tcol-cfg-row:hover { background: var(--panel-2); }
.tc-pop .tcol-cfg-row.dragging { opacity: .55; border-color: color-mix(in srgb, var(--primary) 55%, var(--line)); cursor: grabbing; }
.tc-pop .tcol-cfg-row.off { opacity: .5; }
.tc-pop .tcol-cfg-row.off .tcol-cfg-lbl { text-decoration: line-through; }
.tc-pop .tcol-drag { display: inline-flex; color: var(--muted); flex: none; }
.tc-pop .tcol-drag .ic { width: 15px; height: 15px; }
.tc-pop .tcol-cfg-ic { display: inline-flex; flex: none; }
.tc-pop .tcol-cfg-ic .ic { width: 15px; height: 15px; }
.tc-pop .tcol-cfg-lbl { flex: 1 1 auto; font-size: 13px; font-weight: 600; color: var(--text); }
.tc-pop .tcol-eye { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: none; background: none; color: var(--muted); border-radius: 7px; cursor: pointer; transition: all .12s ease; }
.tc-pop .tcol-eye .ic { width: 15px; height: 15px; }
.tc-pop .tcol-eye.on { color: var(--primary-2); }
.tc-pop .tcol-eye:hover { background: color-mix(in srgb, var(--primary) 14%, transparent); }
.tc-pop .tcol-cfg-foot { display: flex; justify-content: flex-end; padding-top: 8px; }
/* CLIE-599 (В1): левый акцент-бордюр по приоритету снят и здесь. Разметка `.task-row`
(taskRowHtml) сейчас не рендерится — столбик у чатов давно на `.tw-card`, — но правило
жило и вернуло бы запрещённую рейку любому, кто оживит строку. Приоритет = точка. */
.tasks-list .task-row {
position: relative; /* якорь для .task-hover-acts (плавают top-right) */
padding: 8px 8px; border-radius: 10px; cursor: pointer;
}
/* Верх карточки: круглешок-чекбокс + заголовок на ВСЮ ширину (заголовок больше не ужимается
аватарами справа — они уехали в нижнюю полосу причастных .tr-ppl). */
.tasks-list .tr-top { display: flex; align-items: flex-start; gap: 9px; }
.tasks-list .task-row:hover { background: var(--panel-2); }
.tasks-list .task-row:hover .task-del { opacity: .65; }
.tasks-list .task-check {
flex: none; margin-top: 1px;
width: 19px; height: 19px; border-radius: 50%;
border: 2px solid var(--line); background: transparent;
display: flex; align-items: center; justify-content: center;
cursor: pointer; color: transparent; padding: 0;
transition: background .12s, border-color .12s, color .12s;
}
.tasks-list .task-check:hover { border-color: var(--primary); }
.tasks-list .task-check svg { width: 12px; height: 12px; }
.tasks-list .task-row.done .task-check {
background: var(--acc-grad); border-color: transparent; color: #fff;
}
/* Отменённая задача: приглушена + серый «×» (НЕ зелёная галка — это не «выполнено»,
а «отменено»; кружок-кнопка = «вернуть в работу»). Заголовок зачёркнут ниже. */
.tasks-list .task-row.cancelled { opacity: .6; }
.tasks-list .task-row.cancelled .task-check {
background: transparent; border-color: var(--muted); color: var(--muted);
}
.tasks-list .task-row.cancelled .task-check:hover { border-color: var(--primary); color: var(--primary); }
.tasks-list .task-main { min-width: 0; flex: 1; }
.tasks-list .task-title {
flex: 1; min-width: 0; /* заголовок занимает всю ширину строки .tr-top */
font-size: 13.5px; line-height: 1.3; color: var(--text);
word-break: break-word;
}
.tasks-list .task-row.done .task-title { color: var(--muted); text-decoration: line-through; }
.tasks-list .task-row.cancelled .task-title { color: var(--muted); text-decoration: line-through; }
/* Мета и полоса причастных выровнены под ЗАГОЛОВОК (28px = 19px чекбокс + 9px gap). */
.tasks-list .task-meta {
display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
margin-top: 3px; margin-left: 28px; font-size: 11px;
}
.tasks-list .task-chip {
display: inline-flex; align-items: center; gap: 3px;
padding: 1px 6px; border-radius: 6px;
background: var(--panel-2); color: var(--muted); white-space: nowrap;
}
.tasks-list .task-chip.due-overdue { background: var(--urg-overdue-soft); color: var(--urg-overdue-ink); }
.tasks-list .task-chip.due-today { background: var(--urg-today-soft); color: var(--urg-today); }
.tasks-list .task-chip.conv { max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
/* CLIE-481: чип «Проект · Чат» в строке задачи — flex, чтобы усекались ОБЕ половины
(у голого текстового узла text-overflow не работает: анонимный flex-item). */
.tasks-list .task-chip.conv { display: inline-flex; align-items: center; gap: 4px; }
.tasks-list .task-chip.conv .tw-pill-main { flex: 0 0 auto; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tasks-list .task-chip.conv .tw-pill-sub { flex: 0 1 auto; min-width: 0; }
.tasks-list .task-chip.chat.unread { background: color-mix(in srgb, var(--primary) 22%, transparent); color: var(--primary-2); position: relative; }
.tasks-list .task-chip .task-chip-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--urg-overdue); display: inline-block; margin-left: 1px; }
.tasks-list .task-chip.sub, .tasks-list .task-chip.link { color: var(--primary-2); }
.tasks-list .task-chip.parent { color: var(--muted); font-weight: 700; padding-inline: 6px; }
.tasks-list .task-chip.rel { cursor: pointer; }
.tasks-list .task-chip.rel:hover { background: color-mix(in srgb, var(--primary) 24%, transparent); color: var(--primary-2); }
/* Задача «В работе» (status=in_progress): синий чип + мягкая заливка строки — чтобы с
одного взгляда было видно, что по задаче идёт работа/учёт времени (левый акцент строки
не трогаем — там приоритет). */
.tasks-list .task-row.in-progress { background: color-mix(in srgb, #3B82F6 8%, transparent); }
.tasks-list .task-row.in-progress:hover { background: color-mix(in srgb, #3B82F6 13%, transparent); }
.tasks-list .task-chip.wip { background: var(--info-soft); color: var(--info); font-weight: 600; font-variant-numeric: tabular-nums; }
.tasks-list .task-chip.wip .ic { animation: wipPulse 1.8s ease-in-out infinite; }
@keyframes wipPulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
html[data-theme="light"] .tasks-list .task-chip.wip { color: var(--cm-1d4ed8, #1d4ed8); }
/* Бейдж «в работе» (живой таймер учёта времени) — доска/плитки/список/таймлайн. Иконка пульсирует
как у .task-chip.wip; tabular-nums чтобы секундомер не дёргал ширину. Не путать со статусом (колонкой). */
.tw-pill.tw-pill-timer { background: var(--info-soft); color: var(--info); font-weight: 600; font-variant-numeric: tabular-nums; }
/* ── Поиск задач (CLIE-469) ──────────────────────────────────────────────────
Пилюля «почему задача в выдаче»: рисуется ТОЛЬКО когда совпало не в названии
(в описании / чек-листе / комментарии / файле) — название и так подсвечено. */
.tw-pill.tw-pill-match { background: color-mix(in srgb, var(--accent) 13%, transparent); color: var(--accent); font-weight: 600; }
.tw-pill.tw-pill-match svg.ic { width: 11px; height: 11px; }
/* Сегмент «Название | Везде» = КАНОНИЧЕСКИЙ сегмент продукта `.cc-seg` в размере строки
тулбара (`.cc-seg-md`) — см. блок CLIE-249/CLIE-505 ниже. Своего вида у него БОЛЬШЕ НЕТ.
🔴 CLIE-505: раньше здесь жила рукописная копия (дорожка color-mix 13%, радиус 7, кегль
11.5) — она была на 5.5px ниже соседних «Все задачи ▾»/поля поиска и с другим радиусом,
т.е. ровно то, на что жаловался владелец («дизайн везде разный»). Осталась ТОЛЬКО
раскладка (где стоит), вид берётся из канона. */
.tq-seg { display: inline-flex; }
.tq-seg button:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--glow); }
/* Тулбар доски: поле поиска и сегмент — один блок, сегмент прижат к правому краю поля.
align-items:stretch — чтобы сегмент физически не мог оказаться ниже поля (CLIE-505). */
/* 🔴 CLIE-805: базис 220px + shrink — обёртка поля поиска ПЕРЕНОСИТСЯ вместе с сегментом
«Название | Везде», а не схлопывается в ноль, оставляя сам (список — ).
Верх карточки = чекбокс «Готово» + заголовок (флекс), как раньше в .tr-top у строки. */
.tasks-list .tw-card-li { list-style: none; margin: 0 0 7px 0; }
.tasks-list .tw-card-li:last-child { margin-bottom: 0; }
/* Перетаскивание порядка (ручной приоритет внутри секции) — ПЛАВНЫЙ pointer-движок ccStartRowDrag:
тянущаяся карточка приподнимается и едет за курсором (transform ставит движок инлайном на ),
соседи мягко расступаются (их transition тоже ставит движок), на отпускании — мягкая посадка. */
.tasks-list .tw-card-li.tw-drag .tw-card { cursor: grab; transition: box-shadow .14s ease; }
.tasks-list .tw-card-li.tw-drag .tw-card:active { cursor: grabbing; }
/* Во время перетаскивания: курсор-хват, без выделения текста и без мигания hover-кнопок карточек. */
.tasks-list.tw-reordering { cursor: grabbing; user-select: none; -webkit-user-select: none; touch-action: none; }
.tasks-list.tw-reordering .tw-card-acts { opacity: 0 !important; }
/* Невидимые (до наведения) быстрые кнопки НЕ должны перехватывать хват карточки: иначе верх-право
карточки = «мёртвая зона» для драга (особенно на тач, где наведения нет). На наведении — кликабельны. */
.tasks-list .tw-card-acts { pointer-events: none; }
.tasks-list .tw-card:hover .tw-card-acts { pointer-events: auto; }
/* Приподнятая (тянущаяся) карточка: над остальными + мягкая, «яблочная» тень. */
.tasks-list .tw-card-li.tw-lift { z-index: 30; position: relative; }
.tasks-list .tw-card-li.tw-lift .tw-card { cursor: grabbing; box-shadow: 0 14px 34px rgba(0,0,0,.30), 0 2px 8px rgba(0,0,0,.18); }
html[data-theme="light"] .tasks-list .tw-card-li.tw-lift .tw-card { box-shadow: 0 14px 34px rgba(0,0,0,.16), 0 2px 8px rgba(0,0,0,.10); }
@media (prefers-reduced-motion: reduce) { .tasks-list .tw-card-li.tw-drag .tw-card, .tasks-list .tw-card-li { transition: none !important; } }
.tw-card-head { display: flex; align-items: flex-start; gap: 9px; }
.tw-card-head .tw-card-title { flex: 1; min-width: 0; }
.tw-card-head .task-check { flex: none; }
.tasks-list .tw-card.done .task-check { background: var(--acc-grad); border-color: transparent; color: #fff; }
.tasks-list .tw-card.cancelled .task-check { background: transparent; border-color: var(--muted); color: var(--muted); }
.tasks-list .tw-card.cancelled .task-check:hover { border-color: var(--primary); color: var(--primary); }
@media (hover: none) { .tw-card-grip, .tw-card-acts { opacity: 1; } }
/* Тач (оба шаблона): навести нельзя — быстрые кнопки карточки задачи видны всегда (строка выше),
а абсолютом в правом верхнем углу плашка в 167 px ложилась НА заголовок: на телефоне от
«Товары в продаже» оставалось «Товары в пр». Здесь плашка — своя строка над заголовком, на
том же месте угла (6 px от кромки): ничего не накрывает. Мышь — как прежде, по наведению. */
@media (hover: none) { .tw-card > .tw-card-acts.tw-qacts { position: static; width: fit-content; max-width: 100%; margin: -5px -6px 6px auto; } }
/* …и нажимаема: в «Моих задачах» плашка ждёт наведения (`pointer-events` ниже), а на таче его
нет — видимые кнопки пропускали палец сквозь себя и открывали задачу. Своей строкой она
хват карточки больше не накрывает. */
@media (hover: none) { .tasks-list .tw-card > .tw-card-acts.tw-qacts { pointer-events: auto; } }
/* tasks-hover-toolbar-1 · телефон (тач, ≤760): плашка из шести быстрых кнопок шла своей строкой над
заголовком КАЖДОЙ карточки (+30 px на карточку, цели 26 px). На карточке остаётся одна «⋯» 32 px в
углу; плей/пауза таймера, исполнитель, метка, срок, приоритет и ценность — верхними строками того же
меню «⋯» (cardQuickRows → taskMore, app.js). Мышь и тач шире 760 — как прежде. */
@media (hover: none) and (max-width: 760px) {
.tw-card > .tw-card-acts.tw-qacts { position: absolute; top: 3px; right: 3px; width: auto; max-width: none; margin: 0; padding: 0; gap: 0; background: transparent; border-color: transparent; box-shadow: none; }
.tw-card > .tw-card-acts.tw-qacts > :is([data-qstart], [data-qpause], [data-qassign], [data-qlabel], [data-qdate], [data-qprio], [data-tbval], .tw-qa-ai) { display: none; }
.tw-card > .tw-card-acts.tw-qacts > .tw-card-more { width: 32px; height: 32px; border-radius: 9px; }
.tasks-list .tw-card > .tw-card-acts.tw-qacts ~ .tw-card-title,
.tasks-list .tw-card > .tw-card-acts.tw-qacts ~ .tw-card-head > .tw-card-title { padding-right: 30px; }
}
/* CLIE-599: полоса причастных больше не отдельный «подвал» с разделителем на всю ширину —
это просто последняя строка карточки (−17px высоты на каждой карточке). Разделитель и
прежние отступы возвращает сравнение ?card=0. */
/* 🔴 CLIE-892: полосу причастных теперь показывает и строка панели «Сегодня» (когда в
задаче есть кто-то КРОМЕ меня). Второй копии аватаров не заводим — тот же блок,
просто в списке селекторов появилась вторая поверхность.
🔴 CLIE-1058: и ТРЕТЬЯ — строка вида «Очередь ИИ» (`.wsq-row`). Она такая же плотная, как
строка дня, поэтому берёт и общий блок, и его компактный размер ниже. Добавить поверхность
= дописать селектор сюда, а не завести четвёртую копию тех же аватаров. */
:is(.wsq-row, .ctp-row) .tr-ppl, .tw-card .tr-ppl, .tdy-row .tr-ppl { display: flex; align-items: center; gap: 7px; margin-top: 8px; padding-top: 0; border-top: none; min-height: 26px; }
/* Карточка столбика «Мои задачи»: строка .tasks-list .tr-ppl даёт полю слева 28 px (под кружок строки),
а у карточки кружок свёрнут (см. .tasks-list .tw-card-head) — аватары стояли на 27 px правее заголовка и чипов. */
.tasks-list .tw-card .tr-ppl { margin-left: 0; }
:is(.wsq-row, .ctp-row) .tr-ppl .tp-clu, .tw-card .tr-ppl .tp-clu, .tdy-row .tr-ppl .tp-clu { display: inline-flex; align-items: center; }
:is(.wsq-row, .ctp-row) .tr-ppl .tp-av, .tw-card .tr-ppl .tp-av, .tdy-row .tr-ppl .tp-av { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--panel); background-size: cover; background-position: center; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; color: #fff; position: relative; }
:is(.wsq-row, .ctp-row) .tr-ppl .tp-av + .tp-av, :is(.wsq-row, .ctp-row) .tr-ppl .tp-me + .tp-av, .tw-card .tr-ppl .tp-av + .tp-av, .tw-card .tr-ppl .tp-me + .tp-av, .tdy-row .tr-ppl .tp-av + .tp-av, .tdy-row .tr-ppl .tp-me + .tp-av { margin-left: -8px; }
:is(.wsq-row, .ctp-row) .tr-ppl .tp-av.tp-resp, .tw-card .tr-ppl .tp-av.tp-resp, .tdy-row .tr-ppl .tp-av.tp-resp { box-shadow: 0 0 0 2px var(--urg-today); z-index: 2; }
:is(.wsq-row, .ctp-row) .tr-ppl .tp-av.tp-more, .tw-card .tr-ppl .tp-av.tp-more, .tdy-row .tr-ppl .tp-av.tp-more { background: var(--panel-2); color: var(--muted); }
:is(.wsq-row, .ctp-row) .tr-ppl .tp-watch, .tw-card .tr-ppl .tp-watch, .tdy-row .tr-ppl .tp-watch { margin-left: 6px; padding-left: 8px; border-left: 1px solid var(--line); display: inline-flex; align-items: center; }
:is(.wsq-row, .ctp-row) .tr-ppl .tp-watch > .ic, .tw-card .tr-ppl .tp-watch > .ic, .tdy-row .tr-ppl .tp-watch > .ic { width: 13px; height: 13px; color: var(--muted); margin-right: 4px; }
:is(.wsq-row, .ctp-row) .tr-ppl .tp-watch .tp-av, .tw-card .tr-ppl .tp-watch .tp-av, .tdy-row .tr-ppl .tp-watch .tp-av { width: 22px; height: 22px; }
:is(.wsq-row, .ctp-row, .tw-card, .tdy-row) .tr-ppl .tp-watch .tp-av:is(:empty, .has-video) { opacity: .82; } /* только фото — см. .tasks-list выше */
:is(.wsq-row, .ctp-row) .tr-ppl .tp-me, .tw-card .tr-ppl .tp-me, .tdy-row .tr-ppl .tp-me { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px 0 3px; border-radius: 12px; font-size: 10px; font-weight: 700; background: var(--acc-fill); color: #fff; }
:is(.wsq-row, .ctp-row) .tr-ppl .tp-me .ic, .tw-card .tr-ppl .tp-me .ic, .tdy-row .tr-ppl .tp-me .ic { width: 11px; height: 11px; }
:is(.wsq-row, .ctp-row) .tr-ppl .tp-me-dot, .tw-card .tr-ppl .tp-me-dot, .tdy-row .tr-ppl .tp-me-dot { width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,.22); background-size: cover; background-position: center; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; color: #fff; }
:is(.wsq-row, .ctp-row) .tr-ppl .tp-me-resp, .tw-card .tr-ppl .tp-me-resp, .tdy-row .tr-ppl .tp-me-resp { background: var(--urg-today); color: #20242c; }
:is(.wsq-row, .ctp-row) .tr-ppl .tp-me-resp .tp-me-dot, .tw-card .tr-ppl .tp-me-resp .tp-me-dot, .tdy-row .tr-ppl .tp-me-resp .tp-me-dot { background: rgba(0,0,0,.18); color: #20242c; }
:is(.wsq-row, .ctp-row) .tr-ppl .tp-me-watch, .tw-card .tr-ppl .tp-me-watch, .tdy-row .tr-ppl .tp-me-watch { height: 24px; background: var(--panel-2); color: var(--primary-2); border: 1.5px solid var(--accent); }
:is(.wsq-row, .ctp-row).done .tr-ppl, .tw-card.done .tr-ppl, .tdy-row.done .tr-ppl { opacity: .5; }
/* 🔴 CLIE-892: строка панели «Сегодня» ПЛОТНЕЕ карточки доски — там же список на весь день,
а не отдельная карточка. Поэтому у полосы причастных здесь свой РАЗМЕР (тот же блок, тот
же язык, просто компактнее), а не своя вторая отрисовка. */
:is(.wsq-row, .ctp-row) .tr-ppl, .tdy-row .tr-ppl { margin-top: 6px; min-height: 22px; gap: 6px; }
:is(.wsq-row, .ctp-row) .tr-ppl .tp-av, .tdy-row .tr-ppl .tp-av { width: 20px; height: 20px; font-size: 9px; border-width: 1.5px; }
:is(.wsq-row, .ctp-row) .tr-ppl .tp-watch .tp-av, .tdy-row .tr-ppl .tp-watch .tp-av { width: 18px; height: 18px; }
:is(.wsq-row, .ctp-row) .tr-ppl .tp-me, .tdy-row .tr-ppl .tp-me { height: 20px; font-size: 9px; }
:is(.wsq-row, .ctp-row) .tr-ppl .tp-me-dot, .tdy-row .tr-ppl .tp-me-dot { width: 15px; height: 15px; font-size: 8px; }
/* Заголовок оставляем место под ручку/действия слева-справа. */
.tw-card .tw-card-title { padding-right: 30px; }
/* ── Звезда-бейдж ответственного + ЕДИНЫЙ вид полосы причастных (список = доска) ──────
Ответственного показываем ОДИНАКОВО везде: реальный аватар (фото) в золотом кольце + звезда.
Никаких пилюль «отв.»/«соисп.» и опоры на state.me — только данные задачи. */
.tp-star { position: absolute; right: -3px; bottom: -3px; width: 14px; height: 14px; border-radius: 50%; background: var(--urg-today); color: #20242c; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--panel); z-index: 3; }
.tp-star .ic { width: 9px; height: 9px; }
/* Звезда/кольцо не должны обрезаться контейнером полосы. */
.tasks-list .tr-ppl { overflow: visible; }
/* Единый размер аватаров причастных на доске = как в списке (26px / наблюдатели 22px). */
.tw-card .tr-ppl .tp-av { width: 26px; height: 26px; }
.tw-card .tr-ppl .tp-watch .tp-av { width: 22px; height: 22px; }
/* линза ролей: Мне / Я поставил / Наблюдаю */
.tasks-list .task-lens { list-style: none; display: flex; gap: 5px; padding: 8px 6px 10px;
/* Sticky-бар фильтра ролей: фон = фон КОЛОНКИ (--panel), а не --bg (тот темнее панели →
читался «тёмной полосой» над списком). Совпадает с .tasks-col → полоса не выделяется. */
position: sticky; top: 0; background: var(--panel); z-index: 2;
overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap; scrollbar-width: none; -ms-overflow-style: none; }
.tasks-list .task-lens::-webkit-scrollbar { height: 0; display: none; }
.tasks-list .task-lens-btn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 4px;
padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line); background: transparent;
color: var(--muted); cursor: pointer; font-size: 11px; white-space: nowrap; }
.tasks-list .task-lens-btn svg.ic { width: 14px; height: 14px; flex: none; }
.tasks-list .task-lens-btn .tl-label { white-space: nowrap; }
.tasks-list .task-lens-btn.active { background: var(--panel-2); color: var(--text); border-color: var(--primary); }
/* Двойной счётчик чипа: [К выполнению] · [В работе и тестирование]. Первый — приглушён
(очередь), второй — акцент/жирный (активная работа). Разделены тонким хэйрлайном. */
.tasks-list .task-lens-n { flex: none; display: inline-flex; align-items: center; gap: 5px;
background: var(--panel); border-radius: 6px; padding: 1px 6px; font-size: 10px; line-height: 1.4; }
.tasks-list .task-lens-n .tln-todo { color: var(--muted); }
.tasks-list .task-lens-n .tln-work { color: var(--primary); font-weight: 600; }
.tasks-list .task-lens-n .tln-sep { width: 1px; height: 9px; border-radius: 1px; background: var(--line); }
/* Число внутри выбранной «линзы» лежит на заливке вида (§2C: --acc-grad) под БЕЛЫМИ цифрами: подложка числа
ТЕМНИТ заливку, а не белит её (белая 18 % давала 2.57/3.47 в тёмном «Штиле», свип волны 3, 20.10.2026);
то же решение, что в светлой теме базы и в «Глубине» — одно на все шаблоны. */
.tasks-list .task-lens-btn.active .task-lens-n { background: var(--cm-0b1020-24, rgba(11,16,32,.24)); }
.tasks-list .task-lens-btn.active .task-lens-n .tln-todo { color: rgba(255,255,255,.86); }
.tasks-list .task-lens-btn.active .task-lens-n .tln-work { color: #fff; }
.tasks-list .task-lens-btn.active .task-lens-n .tln-sep { background: rgba(255,255,255,.38); }
/* Поиск по столбику «Мои задачи» */
.tasks-list .task-searchbar { list-style: none; display: flex; align-items: center; gap: 7px; margin: 0 6px 8px; padding: 7px 10px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); }
.tasks-list .task-searchbar .tsb-ic { display: inline-flex; color: var(--muted); }
.tasks-list .task-searchbar .tsb-ic svg.ic { width: 15px; height: 15px; }
/* min-width НЕ 0: поле обязано вмещать читаемый запрос, иначе сегмент «Название|Везде»
ужимал его до «вы…» в узком столбике (CLIE-469). Не влезли вместе — сегмент переносится. */
.tasks-list .task-search-input { flex: 1; min-width: 96px; border: none; background: transparent; color: var(--text); font-size: 13px; outline: none; padding: 0; }
.tasks-list .task-search-input::placeholder { color: var(--muted); }
.tasks-list .task-searchbar .tsb-clr { flex: none; display: inline-flex; padding: 0; border: none; background: transparent; color: var(--muted); cursor: pointer; }
.tasks-list .task-searchbar .tsb-clr:hover { color: var(--text); }
.tasks-list .task-searchbar .tsb-clr svg.ic { width: 13px; height: 13px; }
/* Поиск по рельсу «Проекты» (0286) — тот же вид, что поиск столбика задач */
.projects-list .proj-searchbar { list-style: none; display: flex; align-items: center; gap: 7px; margin: 0 6px 8px; padding: 7px 10px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); }
.projects-list .proj-searchbar .tsb-ic { display: inline-flex; color: var(--muted); }
.projects-list .proj-searchbar .tsb-ic svg.ic { width: 15px; height: 15px; }
.projects-list .proj-search-input { flex: 1; min-width: 0; border: none; background: transparent; color: var(--text); font-size: 13px; outline: none; padding: 0; }
.projects-list .proj-search-input::placeholder { color: var(--muted); }
.projects-list .proj-searchbar .tsb-clr { flex: none; display: inline-flex; padding: 0; border: none; background: transparent; color: var(--muted); cursor: pointer; }
.projects-list .proj-searchbar .tsb-clr:hover { color: var(--text); }
.projects-list .proj-searchbar .tsb-clr svg.ic { width: 13px; height: 13px; }
/* Свой аккуратный крестик × вместо нативного webkit-сброса type=search — один чистый affordance */
.tasks-list .task-search-input::-webkit-search-cancel-button,
.projects-list .proj-search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
/* Плашка «скрыто фильтром компании» (вариант A): объясняет пустой столбик и снимает фильтр одним кликом. */
.tasks-list .task-company-hidden { list-style: none; display: flex; align-items: center; gap: 8px; margin: 0 6px 8px; padding: 8px 10px; border-radius: 10px; background: var(--panel-2); border: 1px dashed var(--line); font-size: 12px; color: var(--muted); }
.tasks-list .task-company-hidden .tch-txt { flex: 1 1 auto; display: inline-flex; align-items: center; gap: 6px; line-height: 1.3; min-width: 0; }
.tasks-list .task-company-hidden .tch-txt svg.ic { width: 14px; height: 14px; flex: none; }
.tasks-list .task-company-hidden .tch-txt b { color: var(--text); font-weight: 600; }
.tasks-list .task-company-hidden .tch-showall { flex: none; background: transparent; border: none; color: var(--primary); font-weight: 600; font-size: 12px; cursor: pointer; padding: 2px 4px; white-space: nowrap; }
.tasks-list .task-company-hidden .tch-showall:hover { text-decoration: underline; }
/* Та же плашка «скрыто фильтром компании», но в пространстве задач (доска/список/плитки/таймлайн). */
.tw-company-hidden { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; background: var(--panel-2); border: 1px dashed var(--line); font-size: 12px; color: var(--muted); }
.tw-company-hidden .tch-txt { flex: 1 1 auto; display: inline-flex; align-items: center; gap: 6px; line-height: 1.3; min-width: 0; }
.tw-company-hidden .tch-txt svg.ic { width: 14px; height: 14px; flex: none; }
.tw-company-hidden .tch-txt b { color: var(--text); font-weight: 600; }
.tw-company-hidden .tch-showall { flex: none; background: transparent; border: none; color: var(--primary); font-weight: 600; font-size: 12px; cursor: pointer; padding: 2px 4px; white-space: nowrap; }
.tw-company-hidden .tch-showall:hover { text-decoration: underline; }
/* списки в модалках (контакты/задачи) не должны растягиваться на весь экран */
.contacts-list.in-modal,
.tasks-list.in-modal { flex: none; max-height: 62vh; padding: 2px; }
/* contacts-clip-1 · «Мои контакты»: список (max-height 62vh) срезался жёсткой горизонталью посередине
строки, под срезом — пустой нижний отступ тела окна (18 px в «Глубине», 14 в «Штиле»). Тот же приём,
что у тела окна «Компания» (.co-body, app.js companyEnsureStyles): затухание 18 px у кромки и такой же
запас внизу прокрутки, тело окна без нижнего отступа — затухание доходит до края окна. */
@media (min-width: 761px) {
.contacts-list.in-modal {
padding-bottom: 18px;
-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent);
mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent);
}
#contactsModal .modal-body { padding-bottom: 0; }
}
/* contacts-list-clipped-empty-band · телефон: окно во весь экран, а список держал max-height 62vh (523 из 844 px)
и срезался по y≈678, под срезом пусто до низа экрана. Список берёт всю высоту тела окна и остаётся
прокручиваемым сам (ленивая дорисовка слушает scroll #contactsList), низ тает тем же затуханием 18 px. */
@media (max-width: 760px) {
#contactsModal .modal-body { display: flex; flex-direction: column; min-height: 0; padding-bottom: 0; }
.contacts-list.in-modal {
flex: 1 1 auto; min-height: 0; max-height: none; padding-bottom: 18px;
-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent);
mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent);
}
}
/* поля модалки задачи */
.task-fields-row { display: flex; gap: 10px; }
.task-fields-row .field { flex: 1; min-width: 0; }
.task-conv-row {
display: flex; align-items: center; gap: 8px; margin-top: 10px;
font-size: 13px; color: var(--muted); cursor: pointer;
}
.task-conv-row input { width: auto; margin: 0; }
/* подвал модалки задачи — две кнопки в ряд (общий .modal-foot .primary тянет на 100%) */
#taskModal .modal-foot { display: flex; gap: 10px; }
#taskModal .modal-foot .primary { width: auto; flex: 1; }
#taskModal .modal-foot .ghost { flex: none; }
/* ---- перетаскиваемые границы колонок ------------------------------------
Ничего лишнего «на виду»: зона захвата прозрачна и сидит ровно на шве
между колонками. Тонкая акцентная линия проявляется ТОЛЬКО при наведении
на шов (или во время перетаскивания). Двойной клик — сброс ширины. */
.col-resizer {
position: absolute; top: 0; bottom: 0; right: -4px;
width: 9px; /* удобная зона захвата, перекрывает шов */
z-index: 15; cursor: col-resize;
touch-action: none; /* чтобы pointermove не превращался в скролл/жест */
-webkit-user-select: none; user-select: none;
}
.col-resizer::after { /* и есть та самая линия, что показываем у шва */
content: ""; position: absolute; top: 0; bottom: 0; left: 50%;
width: 2px; transform: translateX(-50%);
background: var(--primary); border-radius: 2px;
box-shadow: 0 0 8px -1px var(--glow);
opacity: 0; transition: opacity .15s ease;
}
.col-resizer:hover::after,
.col-resizer.dragging::after { opacity: 1; }
/* 🔴 CLIE-1150: шов упёрся в потолок — линия ЖЕЛТЕЕТ прямо в жесте, а не молчит. Молчащий
упор человек читает как «ширина не меняется, функция пропала»; слова и выход прилетают
тостом на отпускании (winCapExit в app.js), но ответ обязан быть УЖЕ под курсором. */
.col-resizer.at-cap::after { background: var(--warn); box-shadow: none; opacity: 1; }
body.col-resizing .col-resizer.at-cap { cursor: not-allowed; }
/* во время перетаскивания курсор/без-выделения на весь экран */
body.col-resizing { cursor: col-resize; -webkit-user-select: none; user-select: none; }
/* ══ Раздвижные окна (initWindowResize в app.js) — ширина модалок, шторок и внутренних
колонок. Вид/курсор/скрытие на мобиле наследуем от .col-resizer выше: язык у всех
«швов» продукта ОДИН. Здесь только посадка:
• .cc-wgrip — хваталка на кромке ДИАЛОГА или на шве КОЛОНКИ: её left/top/height ставит
JS по реальной геометрии окна, поэтому гасим right/bottom из базового правила. Живёт
она в оверлее (а не внутри окна) — иначе легла бы на полосу прокрутки содержимого;
• .cc-wgrip-in — хваталка боковой ШТОРКИ: сидит на её внутренней (левой) кромке, где
полосы прокрутки нет, поэтому обычная посадка через CSS. ══ */
.cc-wgrip { right: auto; bottom: auto; width: 11px; z-index: 40; }
/* 🔴 Сенсорный ввод: медиазапрос ниже прячет хваталки только на ≤720px, а планшет — 1024+.
Прозрачная полоса с `touch-action:none` вдоль кромки окна съедала бы там свайп-прокрутку,
начатую пальцем у края карточки. Тянуть окно пальцем всё равно незачем — прячем. */
@media (pointer: coarse) { .cc-wgrip { display: none; } }
.cc-wgrip-in { left: 0; top: 0; bottom: 0; height: auto; width: 12px; }
/* • .cc-wgrip-ir — та же внутренняя хваталка, но у ПРАВОЙ кромки: так тянутся плавающие
окна, прибитые к своему left/top (PiP созвона комнаты) — они растут вправо. */
.cc-wgrip-ir { left: auto; right: 0; }
/* линия шва у окон чуть короче кромки — так рама читается как рама, а не как «разрез» */
.cc-wgrip::after { top: 10px; bottom: 10px; }
.contacts-head-actions { display: flex; gap: 6px; }
/* статус формы «Новый контакт» */
.addcontact-status { margin: 4px 0 0; }
.contacts-list { list-style: none; margin: 0; padding: 6px; overflow-y: auto; flex: 1; min-height: 0; }
.contacts-empty { padding: 14px; line-height: 1.4; }
/* заголовки секций: «В ПРИЛОЖЕНИИ · N» (зелёный), «ИЗ ТЕЛЕФОННОЙ КНИГИ» (серый), «📌 ЗАКРЕПЛЁННЫЕ» */
.contacts-list .contact-section-title {
list-style: none; padding: 12px 10px 5px;
font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
}
.contacts-list .contact-section-title:first-child { padding-top: 6px; }
/* contacts-caption-icon-1 · у каждой подписи секции — значок из набора (sectionHtml, app.js) в строку
с текстом: «Закреплённые» — pin, «Уже в ClientsChat» — checkCircle, «Из телефонной книги» — contact.
Цвет — у всей подписи, значок берёт его через currentColor; зелёный «уже здесь» остаётся смысловым. */
.contacts-list .contact-section-title:has(> svg.ic) { display: flex; align-items: center; gap: 5px; }
.contacts-list .contact-section-title > svg.ic { flex: none; width: 12px; height: 12px; }
.contacts-list .contact-section-title:has(> .cst-inapp) { color: var(--urg-done); }
.contacts-list .contact-section-title:has(> .cst-book) { color: #6B7280; }
.contacts-list .contact-section-title:has(> .cst-pin) { color: var(--primary-2); }
/* строка контакта */
.contacts-list .contact-row {
display: flex; align-items: center; gap: 11px;
padding: 7px 10px; border-radius: 12px; margin-bottom: 1px;
border: 1px solid transparent; transition: background .12s;
}
.contacts-list .contact-row.matched { cursor: pointer; }
.contacts-list .contact-row:hover { background: var(--panel-2); }
/* плоский цветной аватар-инициалы (цвет задаётся inline по имени) */
.contacts-list .contact-avatar {
position: relative;
width: 38px; height: 38px; border-radius: 50%; flex: none;
color: #fff; font-weight: 600; font-size: 14px;
display: flex; align-items: center; justify-content: center;
background-size: cover; background-position: center;
}
.contacts-list .contact-row.unmatched .contact-avatar { opacity: .92; }
.contacts-list .contact-avatar.has-img { color: transparent; }
/* зелёная точка-индикатор (правый-нижний угол) у matched */
.contacts-list .contact-online-dot {
position: absolute; right: -1px; bottom: -1px;
width: 11px; height: 11px; border-radius: 50%;
background: var(--urg-done); border: 2px solid var(--panel);
box-shadow: 0 0 0 1px rgba(0,0,0,.15);
}
.contacts-list .contact-body { min-width: 0; flex: 1; }
.contacts-list .contact-name {
font-weight: 600; font-size: 14px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* «Пригласить» — лёгкая ссылка-текст (без рамки/фона) */
.contacts-list .contact-invite-link {
flex: none; cursor: pointer;
color: var(--cm-818cf8, #818CF8); font-weight: 600; font-size: 13px;
padding: 4px 4px; border: none; background: none; border-radius: 6px;
transition: color .12s, background .12s;
}
.contacts-list .contact-invite-link:hover { color: var(--cm-a5b0fa, #a5b0fa); text-decoration: underline; }
.contacts-list .contact-invite-link:focus-visible { outline: none; background: var(--panel-2); }
/* 👋 CLIE-961: уже звали — слово «Позвать ещё» спокойнее (состояние, а не призыв),
а под именем стоит честная строка «Приглашён <когда>». */
.contacts-list .contact-invite-link.done { color: var(--muted); font-weight: 500; }
.contacts-list .contact-sub { margin-top: 1px; font-size: 11.5px; line-height: 1.25; }
/* иконка «сообщение» (accent) у matched-строк */
.contacts-list .contact-msg-btn {
flex: none; border: none; background: transparent; cursor: pointer;
color: var(--primary-2); padding: 5px; border-radius: 9px; line-height: 0;
opacity: .85; transition: opacity .12s, background .12s, color .12s;
}
.contacts-list .contact-msg-btn:hover { opacity: 1; color: #fff; background: var(--acc-grad); }
/* ── имя на ВСЮ ширину; действия (Пригласить/написать/пин) скрыты и появляются ПРИ
НАВЕДЕНИИ поверх правого края (плавное затемнение фона), чтобы имя не обрезалось ── */
.contacts-list .contact-row { position: relative; }
.contacts-list .contact-body { flex: 1; min-width: 0; }
.contacts-list .contact-actions {
position: absolute; right: 6px; top: 0; bottom: 0;
display: flex; align-items: center; gap: 2px;
padding-left: 34px; opacity: 0; pointer-events: none;
background: linear-gradient(90deg, transparent, var(--panel-2) 44%);
transition: opacity .12s;
}
.contacts-list .contact-row:hover .contact-actions { opacity: 1; pointer-events: auto; }
/* ── Скроллбары: СКРЫТЫ по умолчанию, ПОЯВЛЯЮТСЯ при наведении на блок (владелец, 2026-07-15).
Ширину на :hover НЕ меняем (иначе контент дёргается) — держим ПОСТОЯННЫЙ прозрачный жёлоб, а
видимость даём ЦВЕТОМ бегунка: прозрачный → видимый. :hover поднимается по предкам, поэтому
бегунок показывается у скролл-блока под курсором. Цвета через токены → адаптивно к теме.
(border+padding-box = бегунок с отступом, визуально тоньше жёлоба.) ── */
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: transparent; border-radius: 8px; border: 3px solid transparent; background-clip: padding-box; transition: background .15s; }
*:hover::-webkit-scrollbar-thumb { background: var(--text-dim); background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: padding-box; }
*::-webkit-scrollbar-corner { background: transparent; }
/* Firefox: тот же приём (Safari 18+ идёт по ::-webkit- выше). Жёлоб постоянный (thin), цвет
бегунка прозрачный → видимый на hover блока. */
@supports (-moz-appearance: none) {
* { scrollbar-width: thin; scrollbar-color: transparent transparent; }
*:hover { scrollbar-color: var(--text-dim) transparent; }
}
/* Рельс (96px) — ИСКЛЮЧЕНИЕ из правила выше: жёлоб скрыт ПОЛНОСТЬЮ, без резервирования места.
Постоянный 11px-жёлоб на узкой иконочной навигации сдвигал иконки влево, а справа зияла
пустая полоса (жалоба владельца «справа лишнее пространство»). Рельс скролл не показывает
вовсе (Telegram/macOS-sidebar): иконки центрируются во всю ширину — ровно. Прокрутка
колёсиком/тачпадом сохраняется. */
.chat-rail, .rail-scroll { scrollbar-width: none; -ms-overflow-style: none; }
.chat-rail::-webkit-scrollbar, .rail-scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* ── 🔴🔴 CLIE-620 · ВЛОЖЕННЫЙ СКРОЛЛ ОБЯЗАН СЕБЯ ПОКАЗАТЬ (.cc-scroll-in) ─────────────
Правило продукта, не стиль одного списка. Бегунок у нас ПРОЗРАЧНЫЙ до наведения (см.
блок «Скроллбары» выше — решение владельца, не трогаем). Значит любой список, зажатый
в max-height ВНУТРИ уже скроллящейся панели, для человека выглядит как «обрезано и
не достать»: ровно на этом владелец обжигался дважды — чипы разделов уезжали за правый
край при скрытой полосе (лечили масками .more-l/.more-r, см. convTabsEdges в app.js) и
участники группы резались пополам (CLIE-620).
Доктрина:
1) список внутри скроллящейся панели НЕ капим — он растёт, скроллит внешняя панель;
2) кап оправдан ТОЛЬКО у каталога/поисковой выдачи, которая иначе растянет панель на
тысячи пикселей. Тогда вешаем .cc-scroll-in — вертикальный брат .more-l/.more-r:
бегунок виден ВСЕГДА (не только под курсором), а край мягко тает, пока за ним
реально есть строки. Классы .more-t/.more-b ставит ccScrollInEdges() в app.js. */
.cc-scroll-in { overflow-y: auto; overscroll-behavior: contain; }
.cc-scroll-in::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--muted) 40%, transparent); background-clip: padding-box; }
.cc-scroll-in::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: padding-box; }
@supports (-moz-appearance: none) {
.cc-scroll-in { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--muted) 40%, transparent) transparent; }
}
/* 🔴🔴 CLIE-1116 · КРАЙ ТАЕТ КРАСКОЙ, А НЕ МАСКОЙ — маска на САМОМ прокручиваемом блоке
съедала строки. Замер пикселей скрина владельца («проблема в вёрстке… когда выбираю кому
напомнить»): в списке людей провал ЧИСТО ЧЁРНЫЙ (0,0,0) ровно в высоту списка — 170 CSS px
при `max-height:172px` — с растушёвкой ровно по 26px с обоих концов, то есть формой
один-в-один `mask-image` этого правила; три человека (Вика · Александр · Алёна) просто
исчезали, а верхняя строка была наполовину затемнена. `mask-image` вместе с `overflow:auto`
уводит блок в отдельный слой композитора, и там, где маска непрозрачна, слой у владельца
рисуется чёрным. У нас в headless (программный растеризатор) того же слоя не возникает —
поэтому «по коду» и на нашем скрине дефекта не видно, а у человека список чёрный.
Лечение КЛАССА: ничего не «выключать» маской. Край тает обычным градиентом-накладкой на
липких псевдоэлементах: это простая КРАСКА в 26px у самой кромки — она не может съесть
содержимое ни в одном движке, и даже если цвет подложки угадан неточно, это лёгкий оттенок,
а не провал. Цвет берётся ЗАМЕРОМ фактической подложки (`ccScrollInFade` → `--cc-fade`),
а не догадкой про `--panel`: списки живут и в модалке, и в поповере, и в шторке.
🔴 Псевдоэлементы не занимают места (отрицательное поле гасит их высоту) — раскладка
списков остаётся прежней, а `pointer-events:none` оставляет строки под ними кликабельными. */
.cc-scroll-in.more-t::before, .cc-scroll-in.more-b::after {
content: ""; display: block; position: sticky; left: 0; right: 0; z-index: 3;
height: 26px; flex: none; pointer-events: none; }
.cc-scroll-in.more-t::before { top: 0; margin-bottom: -26px;
background: linear-gradient(to bottom, var(--cc-fade, var(--panel)) 18%, transparent); }
.cc-scroll-in.more-b::after { bottom: 0; margin-top: -26px;
background: linear-gradient(to top, var(--cc-fade, var(--panel)) 18%, transparent); }
/* 🔴 13.10.2026 · ГОРИЗОНТАЛЬНЫЙ БРАТ: прокручиваемый РЯД (вкладки канала, шапка на ступени tb-fit-7)
срезал слово краем посреди буквы («Автоответ|», «Заявка на токен|») и ничем не говорил, что листается.
Классы more-l/more-r ставит ccRowFadeEdges (реестр ROW_FADE_SEL в app.js), цвет — замер подложки
(`--cc-fade`). Псевдоэлемент НЕ занимает места: поле гасит его ширину и зазор ряда (`--cc-row-gap`),
поэтому ряд не прыгает, когда край появляется или гаснет. Маской нельзя: у шапки фон, радиус и тень —
сама плита, маска съела бы её край (урок CLIE-1116). */
:root :is(.cc-rowfade, .topbar.tb-fit-7.cc-rowfade).more-l::before,
:root :is(.cc-rowfade, .topbar.tb-fit-7.cc-rowfade).more-r::after {
content: ""; display: block; position: sticky; z-index: 3; flex: none; align-self: stretch;
top: auto; bottom: auto; width: 26px; height: auto; inset-block: auto; border-radius: 0; box-shadow: none;
pointer-events: none;
}
:root :is(.cc-rowfade, .topbar.tb-fit-7.cc-rowfade).more-l::before {
left: calc(-1 * var(--cc-row-pad-l, 0px)); right: auto; order: -1; margin: 0 calc(-26px - var(--cc-row-gap, 0px)) 0 0;
background: linear-gradient(to right, var(--cc-fade, var(--panel)) 18%, transparent);
}
:root :is(.cc-rowfade, .topbar.tb-fit-7.cc-rowfade).more-r::after {
right: calc(-1 * var(--cc-row-pad-r, 0px)); left: auto; order: 99; margin: 0 0 0 calc(-26px - var(--cc-row-gap, 0px));
background: linear-gradient(to left, var(--cc-fade, var(--panel)) 18%, transparent);
}
/* ---- тост (напр. «Ссылка скопирована») ---- */
.cc-toast {
/* 🔔🔔 CLIE-1146·2 · КРОМКА У ТОСТА — НИЖНЯЯ (владелец 15.09: «Уведомления которые были
внизу теперь переехали вверх… Верни их положение как было. Те что наверху которые там
всегда и так были, их не трогай»). Верх занят и занят давно: там живут heads-up
плашки `.cc-inapp-wrap` — «пришло событие». Тост отвечает на ДЕЙСТВИЕ человека и
годами стоял у нижней кромки, рядом с рукой. Точное место всё так же считает
`ccToastPlace` (обход поля, в которое печатают) — ему и принадлежит `style.bottom`. */
position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 26px); top: auto; transform: translateX(-50%) translateY(12px);
/* 🔴 CRMC-30/1: был z-index 90 — НИЖЕ шторки сделки (.deal-backdrop 120 / .deal-drawer 121),
поэтому каждый toast(...) из карточки сделки («Не удалось сохранить», ошибки Интеллекта)
рисовался ПОД шторкой и человек видел «кнопка мёртвая». Тост — самый верхний слой.
🔴🔴 CLIE-692: тост стоит НАД полосой динамических слоёв (CC_Z_BASE=300000 в app.js, растёт
по порядку открытия). Он говорит о том, ЧТО ТОЛЬКО ЧТО ПРОИЗОШЛО, — прятать его под тем,
что это вызвало, нельзя; поэтому у него не «число побольше», а свой ярус НАД полосой. */
/* 🔴 CLIE-1146·4: ширина по СОДЕРЖИМОМУ с потолком. Без `max-content` флекс с бейджем
схлопывал текстовую колонку до самого узкого слова, и «Задача отправлена в ИИ»
печаталось лесенкой в три строки с разрывом посреди слова. */
z-index: 2000000000; width: max-content; max-width: min(86vw, 460px);
background: var(--panel-2); color: var(--text);
border: 1px solid var(--line); border-radius: 12px;
padding: 11px 12px; font-size: 13px; line-height: 1.35;
box-shadow: 0 12px 32px -10px rgba(0,0,0,.6);
opacity: 0; pointer-events: none;
transition: opacity .18s, transform .18s;
overflow-wrap: break-word; text-align: left;
/* 🔴 ЗВОН-32: тост смахивается ВБОК (см. ccToastSwipe в app.js). `pan-y` отдаёт браузеру
вертикальную прокрутку, а горизонталь забираем себе — иначе на iOS свайп вбок уходит в
системное «назад», а не в жест плашки. Выделение текста на время перетаскивания только
мешает: тост живёт 2 секунды и не для копирования. */
touch-action: pan-y; -webkit-user-select: none; user-select: none;
}
/* 🔔🔔 CLIE-1146·4 · АНАТОМИЯ ТОСТА — ТА ЖЕ, ЧТО У ПЛАШЕК ПРОДУКТА (владелец 16.09: «ну
вот это не наш дизайн»). Бейдж · заголовок · крестик — ровно как у heads-up `.cc-inapp`
рядом и как у `CcPlateRow` в приложении. Голая центрированная строка 13px выглядела
системным алертом чужой ОС, а не нашим уведомлением. */
/* 🔴 CLIE-1146·4·2 (владелец: «не ровно текст стоит»): середина строки совпадает с
серединой бейджа — у плашки продукта это ИЗМЕРЯЕТСЯ (прибор сверяет центры), а не
ставится на глаз. */
.cc-toast { display: flex; align-items: center; gap: 12px; }
.cc-toast-badge {
flex: none; width: 32px; height: 32px; border-radius: 10px;
display: flex; align-items: center; justify-content: center;
font-size: 17px; line-height: 1;
background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent);
}
.cc-toast-badge svg { width: 18px; height: 18px; }
.cc-toast-text { min-width: 0; flex: 1 1 auto; overflow-wrap: break-word;
font-size: 15px; font-weight: 600; letter-spacing: -.3px; line-height: 1.2; color: var(--text); }
.cc-toast-close { flex: none; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 20px; line-height: 1; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; }
.cc-toast-close:hover { background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text); }
.cc-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
/* Тост с ДЕЙСТВИЕМ («Таймер на паузе → Снять „В работе“»). Не отдельный компонент, а второй
слот того же тоста: класс вешает toast() при наличии action. Центровка текста уступает
место флексу, иначе подпись и кнопка слипаются. Цвет — через --accent, поэтому светлая
тема (там --accent переопределён) подхватывается сама, без отдельного правила. */
.cc-toast.has-act { gap: 10px; padding-right: 6px; }
.cc-toast-act {
flex: none; appearance: none; border: 0; background: transparent;
/* 🔴 На тёмной панели тоста чистый --accent (#667eea на #262b36) даёт контраст 3.87 —
ниже порога WCAG AA 4.5 для текста 13px (послабление 3:1 действует только от 18.66px
bold). Осветляем акцент к белому; светлая тема ниже возвращает чистый --accent, там
на белом фоне он и так даёт 5.78. Измерено в браузере, а не на глаз. */
color: color-mix(in srgb, var(--accent) 62%, #fff);
font: inherit; font-weight: 600; cursor: pointer;
padding: 5px 10px; border-radius: 8px; white-space: nowrap;
transition: background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.cc-toast-act:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.cc-toast-act:active { transform: scale(.97); }
.cc-toast-act:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Длинное слово с действиями (класс ставит toast(), когда текст рядом с кнопками длиннее двух
строк): первая строка — бейдж · текст · крестик, ниже — кнопки под текстом. Разрыв строки
делает `::after` во всю ширину; первая кнопка встаёт под начало текста (бейдж 32 + зазор 10
− свой отступ 10). */
.cc-toast.stack { flex-wrap: wrap; align-items: flex-start; row-gap: 4px; }
/* первая строка текста — на середине бейджа: (32 − 18) / 2 */
.cc-toast.stack .cc-toast-text { flex: 1 1 0; padding-top: 7px; }
.cc-toast.stack .cc-toast-close { order: 1; }
.cc-toast.stack::after { content: ""; order: 1; flex-basis: 100%; height: 0; }
.cc-toast.stack .cc-toast-act { order: 2; }
.cc-toast.stack .cc-toast-act:first-of-type { margin-left: 32px; }
/* ---- thread ---- */
/* position:relative — система координат для плавающей даты (#dateFloat) поверх ленты */
/* min-width:0 — тред это грид-элемент трека minmax(--thread-min,1fr): без него
его min-content (широкие пузыри/пиннед-бар/шапка) не давал бы треку усохнуть до
трека и распирал сетку в overflow (см. --thread-min в .chat, CLIE-265). */
.thread { display: flex; flex-direction: column; min-height: 0; min-width: 0; position: relative; }
.thread-head {
display: flex; align-items: center; justify-content: space-between;
height: var(--head-h); flex: none;
/* шапка чата = белая (--panel), как остальные шапки столбцов; лента ниже остаётся
на градиенте .thread. Иначе тред-шапка показывала бы фон .thread (в светлой —
голубоватый градиент) и отличалась от «Проекты/Мои задачи/Чаты». */
background: var(--panel);
padding: 0 18px; border-bottom: 1px solid var(--line);
}
.thread-title { font-weight: 700; font-size: 16px; }
/* шапка кликабельна (cursor/title ставятся в openConversation) → лёгкая подсветка имени */
.thread-title[style*="pointer"]:hover { text-decoration: underline; text-underline-offset: 3px; }
.thread-av[style*="pointer"]:hover { filter: brightness(1.08); }
/* аватар беседы в шапке чата (группа — своя аватарка/постер видео, личка — собеседник) */
.thread-av {
width: 38px; height: 38px; border-radius: 50%; flex: none;
background: var(--acc-grad); color: #fff;
display: flex; align-items: center; justify-content: center;
font-weight: 600; font-size: 14px;
}
.thread-av.has-img { background-size: cover; background-position: center; color: transparent; }
.thread-av.hidden { display: none; }
/* Заголовок беседы: имя на всю ширину (первая строка), а МЕТКА ПРОЕКТА (к какому проекту
относится чат) — ОТДЕЛЬНОЙ строкой ниже, в одну строку с подписью (.thread-meta-row), чтобы
длинное имя не резалось чипом. Видна только при фильтре «Все проекты» (ставит openConversation). */
.thread-titlewrap { min-width: 0; }
.thread-title-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.thread-title-row #threadTitle { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-meta-row { display: flex; align-items: center; gap: 8px; min-width: 0; margin-top: 2px; }
.thread-meta-row #threadSub { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-proj { flex: none; max-width: 60%; display: inline-flex; align-items: center; gap: 6px;
padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; line-height: 1.35;
letter-spacing: .01em; color: var(--muted); background: var(--panel-2); border: 1px solid var(--line); }
.thread-proj.hidden { display: none; }
.thread-proj .pj-dot { flex: none; width: 7px; height: 7px; border-radius: 50%;
background: var(--cpj, var(--primary));
box-shadow: 0 0 0 2px color-mix(in srgb, var(--cpj, var(--primary)) 20%, transparent); }
.thread-proj .pj-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* кнопки действий в шапке (звонки + настройки группы) — держим рядом справа */
.head-actions { display: flex; align-items: center; gap: 8px; flex: none; }
/* ── «Умная шапка» (вариант C): кнопка, которой не хватило ширины, уезжает в «⋯» ──
Класс ставит замер fitChatHeader() — он НЕ конфликтует с собственным .hidden кнопки
(прогрессивное раскрытие: «Что я пропустил» появляется только при непрочитанных). */
.head-actions .hdr-fold { display: none !important; }
/* Крупные ПОДПИСАННЫЕ кнопки в карточке беседы (паритет с карточкой чата в приложении):
ничего не надо угадывать по значку, действие = та же кнопка шапки. */
.cc-cardacts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 14px 0 18px; }
.cc-cardact { display: inline-flex; flex-direction: column; align-items: center; gap: 6px;
width: 88px; padding: 10px 4px 8px; background: var(--panel-2); color: var(--text);
border: 1px solid var(--line); border-radius: 12px; cursor: pointer;
transition: background .14s ease, border-color .14s ease, transform .12s ease; }
.cc-cardact:hover { background: var(--hover); border-color: var(--line-strong, var(--line)); }
.cc-cardact:active { transform: scale(.97); }
.cc-cardact .cc-cardact-ic { display: inline-flex; align-items: center; justify-content: center;
width: 24px; height: 24px; color: var(--text); }
.cc-cardact .cc-cardact-ic .ic, .cc-cardact .cc-cardact-ic svg { width: 20px; height: 20px; }
.cc-cardact .cc-cardact-lb { font-size: 11px; line-height: 1.15; color: var(--muted);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* Строка меню «⋯»: иконка · слово · значение (вкл/выкл) · скрепка «в шапке». */
.tc-pop .hdr-row { gap: 10px; padding: 9px 10px; }
.tc-pop .hdr-row .hdr-ic { display: inline-flex; align-items: center; justify-content: center;
width: 18px; flex: none; color: var(--muted); }
.tc-pop .hdr-row .hdr-ic .ic, .tc-pop .hdr-row .hdr-ic svg { width: 17px; height: 17px; }
.tc-pop .hdr-row .tc-pop-name { flex: 1 1 auto; min-width: 0; overflow: hidden;
text-overflow: ellipsis; white-space: nowrap; }
.tc-pop .hdr-row .hdr-val { flex: none; font-size: 11.5px; color: var(--muted); }
/* Значение ВКЛЮЧЁННОГО режима — акцентом (паритет с приложением: `color: cc.accent`).
«Исчезающие сообщения · 1 час» обязано бросаться в глаза: это режим, который физически
уничтожает написанное у обоих участников. Выключенное остаётся тихим «выкл». */
.tc-pop .hdr-row .hdr-val.on { color: var(--primary-2); font-weight: 700; }
/* Скрепка: закреплённое — акцентом, остальное — еле заметный контур (подсказка «сюда можно
закрепить», но экран она не отбирает). Появляется чётче на hover строки. */
.tc-pop .hdr-row .hdr-pin { flex: none; display: inline-flex; align-items: center; justify-content: center;
width: 20px; height: 20px; border-radius: 6px; color: var(--muted); opacity: .3;
transition: opacity .14s ease, color .14s ease, background .14s ease; }
.tc-pop .hdr-row .hdr-pin .ic, .tc-pop .hdr-row .hdr-pin svg { width: 13px; height: 13px; }
.tc-pop .hdr-row:hover .hdr-pin { opacity: .7; }
.tc-pop .hdr-row .hdr-pin:hover { opacity: 1; background: var(--hover); color: var(--text); }
.tc-pop .hdr-row .hdr-pin.on { opacity: 1; color: var(--primary); }
/* Тихая строка («Уже в CRM · нет доступа»): действие не моё, но строка НАЖИМАЕТСЯ и говорит
причину тостом — слово приглушено токеном, а не прозрачностью (контраст обеих тем держит --muted). */
.tc-pop .hdr-row.dim .tc-pop-name { color: var(--muted); }
.call-btn {
background: var(--acc-grad);
border-color: transparent; color: #fff; font-weight: 600;
box-shadow: 0 5px 14px -5px var(--glow);
}
.messages { flex: 1; min-width: 0; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 8px; }
/* Ширина пузыря: 70% узкого треда, но НЕ шире --msg-max (иначе на широком мониторе/десктопе
и в «Чате с ИИ» длинные сообщения растягивались во всю ширину — строки по 120+ символов
не читаются, а «свои» (справа) уезжали к дальнему краю). Кап = комфортная мера ~85 символов,
как в iMessage/Telegram. На узком экране min() отдаёт 70% — прежнее поведение не меняется. */
.msg { display: flex; flex-direction: column; min-width: 0; max-width: min(70%, var(--msg-max, 680px)); }
.msg.mine { align-self: flex-end; align-items: flex-end; }
.msg.theirs { align-self: flex-start; align-items: flex-start; }
.msg.system { align-self: center; align-items: center; max-width: min(80%, var(--msg-max, 680px)); }
.msg.system .meta { justify-content: center; text-align: center; }
/* 📄 СООБЩЕНИЕ-ДОКУМЕНТ (таблица или блок кода) БЕРЁТ ЛЕНТУ ЦЕЛИКОМ, а не долю.
70% — мера ЧТЕНИЯ сплошного текста (~85 знаков в строке), и для неё правило остаётся.
Но отчёт ИИ с таблицей покрытия — не текст: в 240px из 379px он превращается в лестницу
по одному слову в ячейке. Потолок при этом никуда не девается (`--msg-max-doc`), чтобы на
широком мониторе таблица не растягивалась бесконечно, — он просто считается ОТ ЛЕНТЫ. */
.msg:has(.md-tablewrap), .msg:has(.md-pre) { max-width: min(100%, var(--msg-max-doc, 1100px)); }
.bubble {
padding: 9px 13px; border-radius: 14px; line-height: 1.35; position: relative;
/* 📖 ЧИТАЕМОСТЬ ТЕКСТА ПЕРЕПИСКИ (жалоба владельца «сложно читается, давай как в телеге»).
Тело сообщения читают дольше всего остального в продукте, поэтому оно НЕ живёт на
глобальных 14px body: кегль 15px + межстрочный 1.45 (≈21.8px) — метрики Telegram
Web/Desktop; трекинг слегка отрицательный, как любит SF Pro (-apple-system).
Паритет с Flutter: там те же метрики в одном месте — CcMsgText (client/lib/theme/cc_theme.dart). */
font-size: 15px; letter-spacing: -.01em;
/* overflow-wrap:anywhere (не word-break:break-word) — рвёт длинные ссылки/пути
И уменьшает min-content, чтобы длинный URL не раздувал грид-трек треда в overflow. */
overflow-wrap: anywhere; word-break: break-word; min-width: 0;
/* 🔴 Потолок ленты действует и на ПУЗЫРЬ, а не только на `.msg`: без него широкое
содержимое (таблица, код) вытягивало пузырь наружу ленты — см. `.md-pre` выше. */
max-width: 100%;
}
/* ⇄ Смена раскладки на сообщении (CLIE-288): аккуратная иконочная кнопка СНАРУЖИ пузыря
(как swipe-reply) — НЕ перекрывает текст и не двигает ленту. Видна при наведении на
сообщение; в состоянии .on (показана правильная раскладка) — залита и видна всегда.
На тач-устройствах hover нет → показываем всегда (плюс есть пункт контекст-меню).
🔴🔴 ДО КОНТРОЛА, ВИДИМОГО ПО НАВЕДЕНИЮ, ДОЛЖНА ВЕСТИ СПЛОШНАЯ ДОРОГА (жалоба владельца
16.09.2026: «между ними есть пространство, и когда веду мышку, она слетает»).
Замер на проде ДО правки (tools/laytoggle_hover_prod.js, настоящая мышь по 1px):
из 25 шагов от пузыря к кнопке 17 приходились на `div.messages` — между пузырём и
кнопкой было 5px ПУСТОТЫ (кнопка 26px при left:-31px), а пустота эта не принадлежит
`.msg`. Как только курсор в неё входил, `.msg:hover` гас, кнопка получала
`pointer-events:none` — и в точке, где она НАРИСОВАНА, под курсором уже был
`div.messages` (opacity=0, pointer-events=none): кнопка убегала из-под руки и нажать
её можно было только рывком мыши. Поэтому:
1. Коробка кнопки ПРИМЫКАЕТ к пузырю (width 31px = круг 26 + 5 «моста»), а КРУГ
рисует `::before` у дальнего края. Дорога сплошная, текст пузыря не перекрыт —
мост кончается ровно на его кромке.
2. `pointer-events` ВСЕГДА `auto`: доступность контрола не имеет права зависеть от
`:hover` предка, который гаснет и от пересборки ленты (renderMessages рисует
`#messages` целиком через innerHTML, после чего `:hover` не встаёт, пока мышь не
двинется). Кнопка сама показывает себя по `:hover`/`:focus-visible`, а после
пересборки под неподвижным курсором — по классу `.lay-hot` (app.js, layRehot). */
.lay-toggle {
position: absolute; top: 3px; z-index: 4;
display: inline-flex; align-items: center; justify-content: center;
width: 31px; height: 26px; padding: 0;
background: none; border: 0; box-shadow: none;
color: var(--primary-2, var(--primary));
cursor: pointer; opacity: 0; transform: scale(.78);
pointer-events: auto;
transition: opacity .14s ease, transform .14s cubic-bezier(.34,1.56,.64,1), color .12s ease;
}
/* сам круг — псевдоэлемент у дальнего от пузыря края; остаток коробки = мост к пузырю */
.lay-toggle::before {
content: ""; position: absolute; top: 0; width: 26px; height: 26px; border-radius: 50%;
background: color-mix(in srgb, var(--primary) 16%, var(--panel-2));
border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--line));
box-shadow: 0 3px 10px -4px rgba(0,0,0,.4);
transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.lay-toggle > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* подпись только для тултипа/скринридера — кнопка иконочная */
.lay-toggle svg { width: 14px; height: 14px; flex: none; position: relative; }
.msg.theirs .lay-toggle { right: -31px; padding-left: 5px; }
.msg.theirs .lay-toggle::before { right: 0; }
.msg.mine .lay-toggle { left: -31px; padding-right: 5px; }
.msg.mine .lay-toggle::before { left: 0; }
.msg:hover .lay-toggle, .lay-toggle:hover, .lay-toggle:focus-visible, .lay-toggle.lay-hot, .lay-toggle.on { opacity: 1; transform: none; }
.lay-toggle:hover::before { background: color-mix(in srgb, var(--primary) 30%, var(--panel-2)); border-color: var(--primary); }
.lay-toggle:hover { color: var(--text); }
.lay-toggle.on::before { background: var(--primary); border-color: var(--primary); box-shadow: 0 3px 12px -3px color-mix(in srgb, var(--primary) 60%, transparent); }
.lay-toggle.on { color: #fff; }
@media (hover: none) { .lay-toggle { opacity: 1; transform: none; } }
/* 🔴🔴 ПУЗЫРЬ ОБЪЯВЛЯЕТ СВОИ ЧЕРНИЛА (задача «Контрастность», 10.09.2026).
Пузырь СВОЕГО сообщения — это ЗАЛИТАЯ АКЦЕНТОМ поверхность внутри светлого/тёмного
холста. Всё, что кладут в него потом (чип «Одноразовый», кнопка «разобрать речь»,
цитата, превью ссылки, упоминание), по умолчанию красится токенами ХОЛСТА — и
проваливается: замер живого прода дал `--muted` на индиго = 1.45:1 (светлая) и
1.40:1 (тёмная) при норме AA 4.5. Ровно этот чип владелец и прислал скрином.
Лечится это НЕ подкраской каждого нового элемента, а тем же приёмом, что у окна
(канон contrast-runtime-audit: «поверхность взяла у темы фон — обязана взять и color»):
поверхность объявляет НАБОР своих чернил, а вложенное берёт ИХ.
--bub-ink — основные чернила пузыря
--bub-ink-dim — приглушённые (подписи, вторая строка)
--bub-tint — подложка вложенного блока/чипа. 🔴 ВНУТРИ ЗАЛИВКИ ОНА ИДЁТ ТЕМНЕЕ
САМОЙ ЗАЛИВКИ (канон contrast-runtime-audit, CLIE-888·3):
осветляющая rgba(255,255,255,.14…26) поднимает подложку под белыми
чернилами и рушит контраст (замер: цитата 3.59:1 светлая / 2.70:1 тёмная).
--bub-line — кант вложенного блока (он и делает границу видимой, WCAG 1.4.11) */
.msg .bubble {
--bub-ink: var(--text);
--bub-ink-dim: var(--muted);
--bub-tint: color-mix(in srgb, var(--text) 7%, transparent);
--bub-line: color-mix(in srgb, var(--text) 18%, transparent);
}
.msg.mine .bubble:not(.has-media) {
--bub-ink: #fff;
--bub-ink-dim: rgba(255,255,255,.94);
--bub-tint: rgba(11,16,32,.22);
--bub-line: rgba(255,255,255,.42);
}
/* 🔴 ПУЗЫРЬ БЕЗ ЗАЛИВКИ ВОЗВРАЩАЕТ ЧЕРНИЛА ХОЛСТА. `.bubble.has-media` снимает фон
(`background: transparent !important`), а `color:#fff` от `.msg.mine .bubble` оставался —
белым по светлой ленте. Точечно это уже лечили у `.att-cap`; правило класса лечит все
остальные подписи разом (дубляж, расшифровка, строка файла). */
.msg.mine .bubble.has-media { color: var(--text); }
/* 🔴 ЗАЛИВКА СВОЕГО ПУЗЫРЯ — СВОЙ ТОКЕН, а не общий --grad: --grad носят ещё кнопки,
аватары и чипы, где рядом с ним живут ДРУГИЕ кегли и своя проверка. Замер белых чернил
на прежней заливке: светлая 4.16:1 (верхний стоп) · тёмная 3.21:1 — то есть КАЖДОЕ своё
слово в тёмной теме было ниже AA. Значение живёт в концепте (concept-6.css). */
.msg.mine .bubble { background: var(--bub-fill, var(--grad)); color: #fff; border-bottom-right-radius: 4px; box-shadow: 0 4px 14px -5px var(--glow); }
.msg.theirs .bubble { background: var(--theirs); border: 1px solid rgba(255,255,255,.05); border-bottom-left-radius: 4px; }
.msg.system .bubble { background: var(--system); color: #f0d9a0; font-size: 12px; }
/* 0151: сообщение ИИ в «Чате с ИИ» — тот же .theirs слева, но с мягкой акцентной подложкой и
ровной акцентной рамкой, чтобы сразу отличать ответ ИИ от сообщения человека. Через
--accent → светлая/тёмная темы подхватываются сами. Идёт ПОСЛЕ .theirs (та же специфичность). */
/* CLIE-483: рейку сняли — акцент подложкой и равномерной рамкой 1px, без левой полосы */
.msg.ai .bubble {
background: color-mix(in srgb, var(--accent) 13%, var(--theirs));
border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
border-bottom-left-radius: 4px;
}
.meta { display: flex; gap: 6px; align-items: center; font-size: 10px; color: var(--muted); margin-top: 2px; }
.seq { opacity: .7; }
/* время сообщения (HH:MM) вместо служебного #seq (Task 7) */
.msg-time { opacity: .65; font-variant-numeric: tabular-nums; letter-spacing: .2px; }
/* CLIE-1946 · светлая: приглушение прозрачностью роняло время и «изменено» до 2.6–2.9:1. Пометка
«изменено» глушится ИНЛАЙН-стилем app.js (opacity .6), поэтому там !important — только в светлой. */
html[data-theme="light"] .msg-time { opacity: .9; }
html[data-theme="light"] .msg-edited { opacity: .9 !important; }
.status.sending { color: var(--muted); }
.status.queued { color: var(--muted); cursor: pointer; } /* «ждёт сети» (офлайн-очередь) — тап переотправит вручную; авто-уйдёт при сети */
/* 📥 CLIE-1847·Н2 (S2.13): ответ посетителю ждёт выбранные секунды — «отправится через N с» и
«Отменить» (текст вернётся в поле). Отсчёт ведёт wcDeskHoldTicker. */
.status.held { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.msg-hold-t { font-variant-numeric: tabular-nums; }
.msg-hold-x { border: 0; padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; transition: background .12s ease; }
.msg-hold-x:hover { background: color-mix(in srgb, var(--primary) 24%, transparent); }
.status.failed { color: var(--danger); cursor: pointer; } /* «ошибка ⟳» кликабельна → переотправить */
.status.sent { color: var(--ok); }
.status.read { color: var(--primary-2); } /* двойная галка — прочитано собеседником (индиго) */
/* 0195 «Чат с ИИ»: третье состояние — ИИ не просто прочитал, а УЧЁЛ (написал ответ / завершил
проход после прочтения). Те же две галки, но насыщенным акцентом — «прочитал» остаётся
спокойным индиго, чтобы состояния читались рядом, а не сливались. */
.status.read.acted { color: var(--primary); }
/* Галки доставки рисуются SVG-иконкой (svgIcon check/checkAll), а НЕ текстом «✓»/«✓✓».
Прежний хак (letter-spacing:-.34em чтобы стянуть текстовые галки) слипался в нечитаемую
кашу на части устройств/браузеров — постоянно «возвращался». SVG стабилен везде. */
.status.sent, .status.read { display: inline-flex; align-items: center; line-height: 1; }
.status.sent svg.ic, .status.read svg.ic { width: 16px; height: 16px; display: block; }
/* .uploading/.sending — текстовые состояния («загрузка 40%»), их не центрируем как иконку */
/* разделитель-дата по центру (Сегодня / Вчера / «5 июн») — Task 7 */
.day-divider { align-self: center; margin: 10px 0 4px; }
.day-divider span {
display: inline-block; padding: 3px 12px; border-radius: 12px;
background: var(--system, rgba(255,255,255,.06)); color: var(--muted);
font-size: 11px; font-weight: 600; letter-spacing: .2px;
}
/* 📜 строка истории вверх над первым сообщением: «Загружаю более ранние…» / «Не удалось…
Повторить» / «Начало переписки». Шрифт и цвет — как у разделителя-даты (лента не получает
нового «языка»); высота одна во всех состояниях, чтобы смена надписи не двигала ленту. */
.msg-hist {
align-self: center; display: flex; align-items: center; justify-content: center; gap: 8px;
min-height: 30px; margin: 2px 0 6px; color: var(--muted);
font-size: 11px; font-weight: 600; letter-spacing: .2px; text-align: center;
}
.msg-hist-spin {
width: 12px; height: 12px; flex: 0 0 auto; border-radius: 50%;
border: 1.6px solid currentColor; border-right-color: transparent;
animation: msgHistSpin .8s linear infinite;
}
@keyframes msgHistSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .msg-hist-spin { animation: none; } }
/* разделитель «Непрочитанные сообщения» — тонкая линия во всю ширину с подписью-пилюлей
по центру, лёгкий акцент. Аналог Telegram/WhatsApp: точка «где я остановился». */
.unread-divider {
align-self: stretch; display: flex; align-items: center; gap: 10px;
margin: 12px 2px 6px; color: var(--primary-2, var(--primary, var(--cm-6c5ce7, #6c5ce7)));
}
.unread-divider::before, .unread-divider::after {
content: ""; flex: 1 1 auto; height: 1px;
background: linear-gradient(to var(--_d, right),
color-mix(in srgb, var(--primary, var(--cm-6c5ce7, #6c5ce7)) 42%, transparent), transparent);
}
.unread-divider::after { --_d: left; }
.unread-divider span {
flex: none; padding: 3px 12px; border-radius: 999px;
background: color-mix(in srgb, var(--primary, var(--cm-6c5ce7, #6c5ce7)) 14%, transparent);
color: var(--primary-2, var(--primary, var(--cm-6c5ce7, #6c5ce7)));
font-size: 11px; font-weight: 700; letter-spacing: .2px; white-space: nowrap;
}
/* крестик отмены загрузки рядом с «загрузка N%» */
.upload-cancel { display: inline-block; margin-left: 4px; padding: 0 3px; cursor: pointer; color: var(--muted); font-weight: 700; line-height: 1; }
.upload-cancel:hover { color: var(--danger); }
/* ---- поиск по чату (панель под шапкой) ---- */
.chat-search-bar {
display: flex; align-items: center; gap: 8px;
padding: 8px 14px; border-bottom: 1px solid var(--line);
background: var(--panel, rgba(255,255,255,.02));
}
.chat-search-bar.hidden { display: none; }
.chat-search-input {
flex: 1; min-width: 0; padding: 7px 12px; border-radius: 10px;
background: var(--input-bg, rgba(255,255,255,.05)); color: inherit;
border: 1px solid var(--line); font-size: 14px;
}
.chat-search-input:focus { outline: none; border-color: var(--primary, var(--cm-6c5ce7, #6c5ce7)); }
/* 🔴 Счётчик «N из M» — подпись, а не число в две цифры: не сжимаем его ниже
собственной ширины (правило СРЕД-33), иначе «12 из 340» напечатается поверх соседа. */
.chat-search-count { flex: none; min-width: max-content; text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* ---- 🔎 CLIE-899 · СПИСОК НАЙДЕННОГО в чате («Показать списком», эталон Telegram) ----
Живёт под баром поиска и НАД лентой: состояние видно там, где его встретят. */
.chat-search-list {
border-bottom: 1px solid var(--line);
background: var(--panel, rgba(255,255,255,.02));
max-height: 42vh; overflow-y: auto;
}
.chat-search-list.hidden { display: none; }
.chat-search-say { padding: 10px 14px; }
.chat-search-say:empty { display: none; }
.chat-search-rows:empty { display: none; }
.csr-row {
padding: 9px 14px; cursor: pointer;
border-top: 1px solid var(--line);
transition: background .12s ease;
}
.csr-row:first-child { border-top: 0; }
.csr-row:hover { background: var(--hover, rgba(127,127,127,.08)); }
/* 🔴 Текущее совпадение помечено ПОДЛОЖКОЙ, а не полосой слева (правило CLIE-483). */
.csr-row.cur { background: color-mix(in srgb, var(--primary) 12%, transparent); }
.csr-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.csr-who { font-weight: 600; font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csr-when { flex: none; margin-left: auto; }
.csr-snip { font-size: 13px; line-height: 1.35; color: var(--muted); overflow-wrap: anywhere; }
/* 🔎 CLIE-899 · «Найдено N · по релевантности» в столбике «Мои задачи»: под поиском
выдача плоская, и это сказано СЛОВАМИ, а не молча (иначе «где моя группировка?»). */
.task-found { padding: 6px 12px 4px; list-style: none; }
/* ---- плавающая дата поверх ленты (Telegram-style) ---- */
.date-float {
position: absolute; left: 50%; transform: translateX(-50%);
z-index: 6; pointer-events: none; opacity: 0; transition: opacity .25s ease;
}
.date-float.show { opacity: 1; }
.date-float span {
display: inline-block; padding: 3px 12px; border-radius: 12px;
background: var(--system, rgba(28,28,34,.92)); color: var(--muted);
font-size: 11px; font-weight: 600; letter-spacing: .2px;
box-shadow: 0 4px 12px -4px rgba(0,0,0,.5);
}
/* Кнопка «в конец чата» — появляется при прокрутке вверх от низа ленты (как в Telegram).
Позиционируется относительно .thread (position: relative), над композером. */
.jump-down {
position: absolute; right: 20px; bottom: 90px; z-index: 6;
width: 44px; height: 44px; border-radius: 50%; padding: 0;
display: flex; align-items: center; justify-content: center;
background: var(--panel-2); color: var(--text);
border: 1px solid var(--line); cursor: pointer;
box-shadow: 0 4px 14px rgba(0,0,0,.45);
opacity: 0; transform: translateY(8px) scale(.92); pointer-events: none;
transition: opacity .18s ease, transform .18s ease, border-color .12s, background .12s;
}
.jump-down svg { width: 22px; height: 22px; display: block; }
.jump-down .jd-ic { display: flex; align-items: center; justify-content: center; }
.jump-down.show { opacity: 1; transform: none; pointer-events: auto; }
.jump-down:hover { border-color: var(--primary); background: var(--panel); }
/* 🔙 CLIE-1241 · «вернуться к сообщению, с которого перешёл»: пока жив обратный билет, у
кнопки ДРУГОЕ дело — значит и вид другой (акцентный контур + значок возврата ⤶), иначе
один и тот же кружок молча делает два разных перехода. Подпись меняет updateJumpDown. */
.jump-down .jd-ic-back { display: none; }
.jump-down.to-msg .jd-ic-end { display: none; }
.jump-down.to-msg .jd-ic-back { display: flex; }
.jump-down.to-msg { color: var(--primary); border-color: var(--primary); }
/* Подсветка ТЕКУЩЕГО совпадения поиска (стойкая, живёт дольше кратковременного .flash).
CLIE-520: кольцо ОДНО на продукт — та же формула, что у цели перехода (см. `.msg.flash`
ниже): 2px зазор цветом панели + контур `--primary-2`. Читается на любом пузыре.
`!important` — не украшение: в СВЕТЛОЙ теме `html[data-theme="light"] .msg.mine .bubble`
(0,4,1) перебивал `.msg.search-current.mine .bubble` (0,3,1), и у СВОИХ пузырей кольца
текущего совпадения не было ВООБЩЕ (проверено на проде computed-стилем). */
.msg.search-current .bubble,
.msg.search-current.theirs .bubble,
.msg.search-current.mine .bubble,
.msg.search-current .bubble.has-media {
box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--primary-2) !important;
}
/* Подсветка САМОГО искомого текста при поиске по чату (find-in-page).
Все совпадения — мягкая заливка (текст остаётся читаемым), ТЕКУЩЕЕ (навигация ▲▼) —
насыщенный чип с мягким свечением, чтобы сразу выделить, где ты сейчас. Обе темы. */
mark.search-hit {
background: color-mix(in srgb, var(--primary) 30%, transparent);
color: inherit;
border-radius: 4px;
padding: 0 1.5px;
margin: 0 -0.5px;
box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 26%, transparent) inset;
transition: background .14s ease, box-shadow .14s ease, color .14s ease;
}
mark.search-hit.search-hit-current {
background: var(--acc-fill);
color: #fff;
box-shadow: 0 0 0 1px var(--primary), 0 0 10px 1px var(--glow);
}
/* На СВОЁМ пузыре (индиго-градиент, текст белый) индиго-заливка слилась бы —
как и у чипов на своём пузыре (.msg-mention), берём белую плашку: мягкая —
полупрозрачная белая, текущая — плотная белая с индиго-текстом (инверсия, пик контраста). */
.msg.mine .bubble mark.search-hit {
background: rgba(255, 255, 255, .28);
color: #fff;
box-shadow: 0 0 0 1px rgba(255, 255, 255, .26) inset;
}
.msg.mine .bubble mark.search-hit.search-hit-current {
background: #fff;
color: var(--primary);
box-shadow: 0 0 0 1px rgba(255, 255, 255, .9), 0 0 10px 1px rgba(255, 255, 255, .4);
}
/* 🔴 CLIE-592 (паритет с Flutter): полоса «печатает…» больше НЕ резервирует высоту,
когда никто не печатает. Раньше `height:16px` держались всегда — над композером
(и над строкой инструментов .comp-tools, которая всплывает при наборе) висела мёртвая
полоса 20px. Прыжка нет и без резерва: высота едет тем же 140ms-переходом, что и
раскрытие .comp-tools. `:empty` срабатывает ровно там, где код чистит подпись
(`el.typing.textContent = ""`). */
.typing { padding: 0 18px 4px; height: 16px; overflow: hidden; transition: height .14s cubic-bezier(.2,.8,.2,1), padding .14s cubic-bezier(.2,.8,.2,1); }
.typing:empty { height: 0; padding-top: 0; padding-bottom: 0; }
/* Композер — вертикальный стек из 2 строк: .comp-tools (инструменты, всплывают) над .comp-main
(скрепка · поле · правый столбик). См. блок «Композер: 2 строки» ниже. */
.composer { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 10px 16px 12px; border-top: 1px solid var(--line); }
/* 🔴🔴 CLIE-1049 — ПОЛЕ ВВОДА ЧАТА: ЖИВОЕ, НЕ `