/* Stage 1 Home / Chats port. Values and component names come from chatsFrame-DECODED.html and zametki-chats.css. */ .chats-root.chats-stage1-active .phone-shell[data-unified-shell] { position:relative; margin:0; } .chats-root.chats-stage1-active .phone-shell[data-unified-shell] > .unified-shell-flow { overflow:hidden; } .chats-root.chats-stage1-active .phone-shell[data-unified-shell] > .unified-shell-flow > .unified-screen-title { display:none; } .chats-root.chats-stage1-active .phone-shell[data-unified-shell] > .unified-hotbar { display:none; } .chats-root.chats-stage1-active .phone-shell[data-unified-shell] .unified-screen { flex:1; min-height:0; overflow:hidden; padding:0; } .chats-final-stage { --ink:#23262B; --ink-soft:#66707B; --ink-faint:#98A1AB; --line:rgba(140,155,150,.18); --glass:rgba(255,255,255,.55); --accent:#3E9B5F; --accent-soft:rgba(62,155,95,.10); --accent-line:rgba(62,155,95,.35); --overdue:#E5484D; --overdue-soft:rgba(229,72,77,.09); --prio-high:#E5484D; --prio-mid:#E3873C; --divider-black:var(--ink); --divider-yellow:var(--prio-mid); --divider-green:var(--accent); --r-lg:20px; --r-md:14px; --bg:#F2F6F4; position:relative; display:flex; flex:1; min-height:0; height:100%; color:var(--ink); font-family:var(--font-text); } .chats-final-stage * { box-sizing:border-box; -webkit-tap-highlight-color:transparent; } .chats-final-stage button, .chats-final-stage textarea, .chats-final-stage input { font:inherit; } .chats-final-stage button { color:inherit; } .chats-final-stage .content { flex:1; min-height:0; overflow-y:auto; padding:8px 16px var(--app-section-content-bottom); scrollbar-width:thin; } /* This greeting lives inside .content — the actual scroll container — so it scrolls fully off, unlike the shared .unified-screen-title, which is hidden on this screen. */ .chats-final-stage .greeting-row { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin:6px 2px 14px; } .chats-final-stage .greeting h1 { margin:0; font-family:var(--font-display); font-size:26.5px; font-weight:700; letter-spacing:-.02em; line-height:1.1; } .chats-final-stage .greeting h1 span { color:var(--accent); text-transform:uppercase; } .chats-final-stage .greeting .date { font-size:13px; font-weight:500; color:var(--ink-faint); margin-top:6px; text-transform:capitalize; } .chats-final-stage .section-head { display:flex; align-items:center; justify-content:space-between; margin:20px 2px 6px; } .chats-final-stage .section-head h2 { margin:0; font-size:12.5px; font-weight:600; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.06em; } .chats-final-stage .section-head .right { display:flex; align-items:center; gap:12px; } .chats-final-stage .pin-count { font-size:12px; color:var(--ink-faint); font-weight:500; } .chats-final-stage .section-collapse { border:0; padding:0; background:transparent; font-size:11.5px; color:var(--ink-faint); cursor:pointer; } /* Круглый «+» в заголовке секции экрана категории — одинаковый для «Чатов» и «Подкатегорий». Заменил две пунктирные плашки .create-chat-btn: они занимали половину экрана и разрывали список, из-за чего кнопка создания читалась как элемент списка, а не как действие секции. */ .chats-final-stage .cat-sec-head { margin:18px 2px 8px; } .chats-final-stage .section-add { width:32px; height:32px; padding:0; border:1.5px solid var(--accent-line); border-radius:50%; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none; transition:background .15s, color .15s, transform .1s; } .chats-final-stage .section-add svg { width:18px; height:18px; } .chats-final-stage .section-add:active { background:var(--accent); color:#fff; transform:scale(.94); } /* Путь категории. Базовые правила лежат в app.css (общие с Заметками) и рисуют путь обычным текстом, хотя каждый его элемент — рабочая кнопка навигации. Здесь путь становится набором чипов с откликом на тап; текущий уровень намеренно приглушён. */ .chats-final-stage .chats-category-breadcrumb { padding:2px 0 12px; gap:2px; } .chats-final-stage .chats-category-breadcrumb button { padding:5px 10px; border-radius:11px; background:var(--accent-soft); color:var(--accent); font-size:12.5px; font-weight:600; white-space:nowrap; } .chats-final-stage .chats-category-breadcrumb button:active { background:var(--accent); color:#fff; } .chats-final-stage .chats-category-breadcrumb [aria-current="page"] { background:transparent; color:var(--ink-soft); font-weight:700; } .chats-final-stage .chats-category-breadcrumb [aria-current="page"]:active { background:rgba(140,155,150,.15); color:var(--ink-soft); } .chats-final-stage .chats-category-breadcrumb > span { color:var(--ink-faint); display:flex; align-items:center; flex:none; } .chats-final-stage .chats-category-breadcrumb > span svg { width:14px; height:14px; } /* Кнопка настройки блока — значения один в один из .gear-btn вкладки «Заметки». */ .chats-final-stage .gear-btn { width:26px; height:26px; padding:0; border:none; border-radius:8px; background:transparent; color:var(--ink-faint); display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none; } .chats-final-stage .gear-btn svg { width:16px; height:16px; } .chats-final-stage .gear-btn:active { background:rgba(140,155,150,.15); color:var(--ink-soft); } /* Ползунок настройки — значения из блока «Настройка недавних» вкладки «Заметки». */ .chats-final-stage .slider-row { padding:12px 4px; } .chats-final-stage .slider-row .lbl { display:flex; justify-content:space-between; font-size:13.5px; margin-bottom:8px; } .chats-final-stage .slider-row .lbl b { color:var(--accent); } .chats-final-stage .slider-row input[type=range] { width:100%; -webkit-appearance:none; appearance:none; height:5px; border-radius:3px; background:rgba(140,155,150,.2); outline:none; } .chats-final-stage .slider-row input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:20px; height:20px; border-radius:50%; background:#fff; border:2px solid var(--accent); box-shadow:0 2px 6px rgba(60,80,70,.2); cursor:pointer; } /* Inline two-row QuickCaptureComposer. */ .chats-final-stage .qc { margin:0 0 14px; background:rgba(255,255,255,.42); backdrop-filter:blur(11px); -webkit-backdrop-filter:blur(11px); border:1px solid rgba(255,255,255,.55); border-radius:20px; padding:10px 14px 8px; box-shadow:0 1px 5px rgba(60,80,70,.045); } /* min-height здесь обязателен: глобальное `textarea { min-height: 96px }` из app.css протекало в это поле и давало 96px пустоты при одной строке текста. Глобальное правило не трогаем — на него опираются другие legacy-экраны. max-height:110px сохраняем, длинный текст растит поле. */ .chats-final-stage .qc-field { width:100%; border:none; background:transparent; font-family:inherit; font-size:14.5px; color:var(--ink); resize:none; min-height:40px; max-height:110px; overflow-y:auto; outline:none; line-height:1.4; padding:2px 0 8px; } .chats-final-stage .qc-field::placeholder { color:var(--ink-faint); } .chats-final-stage .qc-actions { display:flex; align-items:center; gap:6px; padding-top:8px; border-top:1px solid var(--line); } .chats-final-stage .qc-ico { width:34px; height:34px; padding:0; border-radius:10px; border:none; background:transparent; color:var(--ink-soft); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:13px; font-weight:700; } .chats-final-stage .qc-ico:active { background:rgba(140,155,150,.12); } .chats-final-stage .qc-ico svg { width:19px; height:19px; } .chats-final-stage .qc-dest { display:flex; align-items:center; gap:4px; border:none; background:var(--accent-soft); color:var(--accent); font-size:12.5px; font-weight:600; padding:7px 11px; border-radius:12px; cursor:pointer; max-width:150px; overflow:hidden; } .chats-final-stage .qc-dest span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .chats-final-stage .qc-dest svg { width:12px; height:12px; flex:none; } .chats-final-stage .qc-mic { margin-left:auto; width:38px; height:38px; padding:0; border-radius:50%; border:none; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none; } .chats-final-stage .qc-mic svg { width:18px; height:18px; } /* chatLine + themeHeaderRow primitives. */ .chats-final-stage .chat-line { display:flex; gap:13px; padding:9px 0; cursor:pointer; align-items:center; transition:opacity .12s; } .chats-final-stage .chat-line:active { opacity:.55; } .chats-final-stage .chat-line, .chats-final-stage .rj-row, .chats-final-stage .other-row, .chats-final-stage .full-chat { -webkit-tap-highlight-color:transparent; } .chats-final-stage .chat-line:focus-visible, .chats-final-stage .rj-row:focus-visible, .chats-final-stage .other-row:focus-visible, .chats-final-stage .full-chat:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:12px; } .chats-final-stage .cl-ava { width:56px; height:56px; border-radius:18px; flex:none; display:flex; align-items:center; justify-content:center; font-size:25px; color:#fff; border:1.5px solid rgba(255,255,255,.72); box-shadow:0 1px 6px rgba(60,80,70,.13); } .chats-final-stage .cl-ava.big, .chats-final-stage .rj-ava.big { width:60px; height:60px; border-radius:19px; font-size:26px; } .chats-final-stage .cl-body { flex:1; min-width:0; } .chats-final-stage .cl-top { display:flex; align-items:center; gap:7px; } .chats-final-stage .cl-title { font-size:16px; font-weight:600; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .chats-final-stage .cl-title.bold { font-weight:700; } .chats-final-stage .cl-time { font-size:12px; font-weight:500; color:var(--ink-faint); flex:none; } .chats-final-stage .cl-unread { min-width:19px; height:19px; padding:0 6px; border-radius:10px; background:var(--accent); color:#fff; font-size:11.5px; font-weight:700; display:flex; align-items:center; justify-content:center; flex:none; } .chats-final-stage .cl-last { font-size:14.5px; font-weight:400; line-height:1.4; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; } .chats-final-stage .cl-path { font-size:12px; font-weight:500; color:var(--ink-faint); margin-top:3px; } .chats-final-stage .draft-label { color:var(--accent); font-weight:600; } .chats-final-stage .closed-tag { font-size:10.5px; color:var(--overdue); font-weight:700; background:var(--overdue-soft); padding:1px 6px; border-radius:8px; } .chats-final-stage .pin-ico { width:13px; height:13px; color:var(--accent); flex:none; display:flex; } .chats-final-stage .pin-ico svg { width:13px; height:13px; } /* Kebab по системе Notes (.note-plate__menu): 44×44 зона нажатия, радиус 12, иконка 23px, тот же фон при нажатии. Отрицательные margin компенсируют рост с 30 до 44, чтобы высота строк не менялась. */ .chats-final-stage .row-dots { width:44px; height:44px; padding:0; border:none; background:transparent; color:var(--ink-faint); border-radius:12px; display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none; margin:-11px -13px -11px 0; } .chats-final-stage .row-dots:active { background:rgba(140,155,150,.15); } .chats-final-stage .row-dots svg { width:23px; height:23px; } /* Половина аватара нужна, чтобы центрировать kebab категории по «основной строке» без магических чисел: значение меняется вместе с брейкпоинтом ниже. */ .chats-final-stage { --ava-big:60px; } /* Kebab строки чата — по вертикальному центру всей строки. Абсолютное позиционирование задаётся явно (right/top/transform), общий отрицательный margin при этом снимается. */ .chats-final-stage .chat-line, .chats-final-stage .other-row, .chats-final-stage .rj-row { position:relative; } .chats-final-stage .chat-line .row-dots, .chats-final-stage .other-row .row-dots, .chats-final-stage .rj-row .row-dots { position:absolute; right:0; top:50%; transform:translateY(-50%); margin:0; } /* Колонка под кнопку: длинное название упирается в неё и не сдвигает кнопку. В «Прочем» колонку резервирует margin-right у шеврона, поэтому там отступ не нужен — иначе место под кнопку вычиталось бы дважды и текст сжимался зря. */ .chats-final-stage .chat-line .cl-body, .chats-final-stage .rj-row .rj-body { padding-right:46px; } /* Kebab категории — по вертикальному центру аватара, а не строки целиком: строка темы выше из-за пилюль подтем, и центр строки уходил бы под них. */ .chats-final-stage .theme-row .row-dots { top:calc(9px + var(--ava-big) / 2); transform:translateY(-50%); } .chats-final-stage .pinned-wrap { background:linear-gradient(180deg,rgba(62,155,95,.06),rgba(62,155,95,.03)); border:1px solid rgba(62,155,95,.14); border-radius:20px; padding:4px 14px 8px; margin-bottom:4px; } .chats-final-stage .pinned-wrap .chat-line { padding:10px 0; } .chats-final-stage .pin-pager { display:flex; align-items:center; justify-content:center; gap:14px; margin:2px 0 8px; } /* Видимый кружок остаётся 30px, зона нажатия доводится до 44 через прозрачную рамку: при 30×30 промах пальцем читался как «кнопка не сработала», а повторный тап срабатывал. Логика пагинации при этом детерминирована и не менялась. */ .chats-final-stage .pin-arrow { width:30px; height:30px; padding:0; border-radius:50%; border:1px solid var(--line); background:var(--glass); background-clip:padding-box; color:var(--ink-soft); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:15px; position:relative; } .chats-final-stage .pin-arrow::after { content:''; position:absolute; top:50%; left:50%; width:44px; height:44px; transform:translate(-50%,-50%); } .chats-final-stage .pin-arrow:active { background:var(--accent-soft); color:var(--accent); } .chats-final-stage .pin-dots { display:flex; gap:6px; align-items:center; } .chats-final-stage .pin-dot { width:6px; height:6px; border-radius:50%; background:rgba(140,155,150,.35); transition:all .2s; } .chats-final-stage .pin-dot.on { width:16px; border-radius:3px; background:var(--accent); } .chats-final-stage .recent-journal { padding:0; background:none; border:none; box-shadow:none; } .chats-final-stage .rj-row { display:flex; align-items:center; gap:13px; padding:9px 0; cursor:pointer; transition:opacity .12s; } .chats-final-stage .rj-row:active { opacity:.55; } .chats-final-stage .rj-row.div { border-top:1px solid var(--line); } .chats-final-stage .rj-ava { width:56px; height:56px; border-radius:18px; flex:none; display:flex; align-items:center; justify-content:center; font-size:25px; color:#fff; border:1.5px solid rgba(255,255,255,.72); box-shadow:0 1px 6px rgba(60,80,70,.13); } .chats-final-stage .rj-body { flex:1; min-width:0; } .chats-final-stage .rj-top { display:flex; align-items:center; gap:8px; } .chats-final-stage .rj-title { font-size:16px; font-weight:600; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .chats-final-stage .rj-time { font-size:12px; font-weight:500; color:var(--ink-faint); flex:none; } .chats-final-stage .rj-path { font-size:12px; font-weight:500; color:var(--ink-faint); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .chats-final-stage .rj-msg { font-size:14.5px; font-weight:400; line-height:1.4; color:var(--ink-soft); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .chats-final-stage .rj-msg svg { vertical-align:-1px; opacity:.6; } .chats-final-stage .recent-dots { align-self:center; } /* Граница «недавняя активность → категории». Волосяная линия здесь не работала: она повторяла приём разделителей внутри самой ленты недавних (.rj-row.div, тот же var(--line) на всю ширину), поэтому не читалась как граница блоков. Теперь границу держат сами карточки категорий: у каждой своя рамка по периметру и зазор сетки. */ .chats-final-stage .section-head.cats-head { margin-top:22px; } .chats-final-stage .cats-wrap { display:grid; grid-template-columns:1fr 1fr; gap:8px; } /* Открытая скобка категории по системе .sub-sec: линия 2px слева на всю высоту, короткий верхний сегмент, стык радиусом 6px, прозрачный фон, без правой и нижней рамки. Рисуется одним псевдоэлементом, поэтому закрытый контейнер не образуется; pointer-events:none — чтобы скобка не перехватывала нажатия по строке. */ .chats-final-stage .theme-cat { position:relative; padding:6px 12px 8px 12px; margin-bottom:0; background:rgba(255,255,255,.42); backdrop-filter:blur(11px); -webkit-backdrop-filter:blur(11px); border:1px solid var(--tc-line); border-radius:var(--r-lg); box-shadow:0 1px 5px rgba(60,80,70,.045); overflow:hidden; } /* Вид карточки задаётся в настройках блока и хранится в localStorage. «Широкая» — на всю ширину сетки, как .cat-card.wide в Заметках. */ .chats-final-stage .theme-cat.wide { grid-column:1 / -1; } /* «Имя» — только аватар, название и кебаб: остальное скрыто, чтобы карточка встала в одну колонку. Значок закрепления остаётся видимым, иначе непонятно, почему категория наверху. */ .chats-final-stage .theme-cat.compact { padding:9px 10px; } .chats-final-stage .theme-cat.compact .cl-last, .chats-final-stage .theme-cat.compact .sub-pills, .chats-final-stage .theme-cat.compact .cl-time, .chats-final-stage .theme-cat.compact .cl-unread { display:none; } .chats-final-stage .theme-cat.compact .cl-ava.big { width:28px; height:28px; font-size:15px; } .chats-final-stage .theme-cat.compact .chat-line { gap:9px; align-items:center; } .chats-final-stage .theme-cat.compact .cl-title { font-size:13px; } .chats-final-stage .theme-cat.compact .theme-row .row-dots { top:50%; } .chats-final-stage .theme-row { align-items:flex-start; } .chats-final-stage .theme-row .cl-top { align-items:flex-start; } .chats-final-stage .theme-row .cl-title { white-space:normal; overflow:visible; text-overflow:clip; overflow-wrap:anywhere; line-height:1.25; } .chats-final-stage .sub-pills { display:flex; flex-wrap:wrap; gap:7px; margin-top:8px; } .chats-final-stage .sub-pill { font-size:13px; font-weight:600; color:var(--ink-soft); background:var(--glass); backdrop-filter:blur(10px); border:1.5px solid var(--line); padding:7px 12px; border-radius:16px; cursor:pointer; white-space:nowrap; } .chats-final-stage .sub-pill b { color:var(--accent); font-weight:700; margin-left:2px; } .chats-final-stage .sub-pill.more { color:var(--ink-faint); font-weight:700; } .chats-final-stage .sub-pill:active { background:var(--accent-soft); } .chats-final-stage .other-row { display:flex; gap:13px; align-items:center; padding:9px 0; margin-top:4px; cursor:pointer; } /* Шеврон уходит левее kebab: при абсолютном kebab у правого края он оказывался целиком внутри его прямоугольника, и тап по стрелке открывал меню вместо перехода в «Прочее». */ .chats-final-stage .other-row .row-chev { width:18px; height:18px; color:var(--ink-faint); flex:none; margin-right:44px; } .chats-final-stage .other-row .row-chev svg { width:18px; height:18px; } /* Focused Topic page: decoded screen-topic / renderTopicPage primitives. */ .chats-root.chats-topic-active .phone-shell[data-unified-shell] > .unified-header, .chats-root.chats-topic-active .phone-shell[data-unified-shell] > .unified-tabs { display:none; } .chats-final-stage.topic-stage { flex-direction:column; } .chats-final-stage .page-head { display:flex; align-items:center; gap:11px; padding:calc(env(safe-area-inset-top) + 10px) 14px 10px; position:relative; z-index:5; } .chats-final-stage .ph-back { width:38px; height:38px; padding:0; border:none; background:transparent; color:var(--ink); border-radius:11px; display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none; } .chats-final-stage .ph-back:active { background:rgba(140,155,150,.14); } .chats-final-stage .ph-back svg { width:22px; height:22px; } .chats-final-stage .ph-ava { width:46px; height:46px; border-radius:15px; display:flex; align-items:center; justify-content:center; font-size:23px; flex:none; box-shadow:0 4px 12px rgba(40,60,50,.12); } .chats-final-stage .ph-ava.circle { border-radius:50%; } .chats-final-stage .ph-txt { flex:1; min-width:0; } .chats-final-stage .ph-txt h2 { margin:0; font-family:var(--font-display); font-size:21px; font-weight:700; line-height:1.2; letter-spacing:-.01em; overflow-wrap:anywhere; } .chats-final-stage .ph-stat { font-size:12.5px; font-weight:500; color:var(--ink-faint); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .chats-final-stage .ph-stat b { color:var(--ink-soft); font-weight:600; } .chats-final-stage .ph-btn { width:38px; height:38px; padding:0; border:none; background:transparent; color:var(--ink-soft); border-radius:11px; display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none; } .chats-final-stage .ph-btn:active { background:rgba(140,155,150,.14); } .chats-final-stage .ph-btn svg { width:21px; height:21px; } .chats-final-stage .gen-row { display:flex; align-items:center; gap:12px; padding:11px 12px; margin:2px 0 4px; border-radius:16px; background:var(--glass); border:1px solid var(--line); cursor:pointer; transition:background .15s; } .chats-final-stage .gen-row:active { background:var(--accent-soft); } .chats-final-stage .gen-ava { width:46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:22px; color:#fff; flex:none; } .chats-final-stage .gen-body { flex:1; min-width:0; } .chats-final-stage .gen-body h4 { margin:0; font-size:16px; font-weight:600; display:flex; align-items:center; gap:8px; min-width:0; } /* Чип-маркер ленты: сама карточка названа именем категории, а «Лента» отличает её от обычных чатов той же категории, не занимая место в заголовке. */ .chats-final-stage .gen-tag { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--accent); background:var(--accent-soft); border-radius:7px; padding:2px 7px; flex:none; } /* Приглашение завести ленту — показывается только у подкатегорий, у которых её ещё нет. Круглая «+»-аватарка держит ту же строку, что и будущая карточка ленты, поэтому появление ленты не сдвигает остальной экран. */ .chats-final-stage .gen-create { width:100%; display:flex; align-items:center; gap:12px; padding:11px 12px; margin:2px 0 4px; border-radius:16px; border:1.5px dashed var(--accent-line); background:transparent; cursor:pointer; text-align:left; transition:background .15s; } .chats-final-stage .gen-create:active { background:var(--accent-soft); } .chats-final-stage .gen-create-ava { width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--accent-soft); color:var(--accent); flex:none; } .chats-final-stage .gen-create-ava svg { width:22px; height:22px; } .chats-final-stage .gen-create-body { display:flex; flex-direction:column; min-width:0; } .chats-final-stage .gen-create-title { font-size:15.5px; font-weight:600; color:var(--accent); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .chats-final-stage .gen-create-note { font-size:12.5px; color:var(--ink-faint); margin-top:1px; } .chats-final-stage .gen-body .gen-last { font-size:14.5px; font-weight:400; line-height:1.4; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; } .chats-final-stage .gen-meta { display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex:none; } .chats-final-stage .gen-meta .gt { font-size:12px; font-weight:500; color:var(--ink-faint); } .chats-final-stage .gen-meta .gu { background:var(--accent); color:#fff; font-size:10.5px; font-weight:700; min-width:18px; height:18px; padding:0 5px; border-radius:9px; display:flex; align-items:center; justify-content:center; } .chats-final-stage .gen-chev { color:var(--ink-faint); width:18px; height:18px; flex:none; } .chats-final-stage .gen-chev svg { width:18px; height:18px; } .chats-final-stage .qa-head { font-size:12px; font-weight:700; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.04em; margin:12px 4px 8px; } .chats-final-stage .qa-tabs-wrap { position:sticky; top:0; z-index:4; background:linear-gradient(180deg,var(--bg) 70%,transparent); padding:4px 14px 6px; } .chats-final-stage .qa-tabs { display:flex; gap:6px; background:rgba(140,155,150,.1); border-radius:14px; padding:4px; } .chats-final-stage .qa-tab { flex:1; border:0; background:transparent; text-align:center; font-size:13.5px; font-weight:600; color:var(--ink-soft); padding:8px 4px; border-radius:11px; cursor:pointer; transition:all .15s; } .chats-final-stage .qa-tab.on { background:#fff; color:var(--accent); box-shadow:0 2px 8px rgba(40,60,50,.1); } /* Категорийная скобка: верх + лево одной непрерывной линией, без низа. Раньше форма собиралась из трёх несвязанных фрагментов — плавающего ::before на 30% ширины, прямой левой границы и нижней границы со скруглением 14px, которые не сходились в одну фигуру. Теперь это настоящий угол, как у скобки категории в заметке (.note-plate::before). */ .chats-final-stage .sub-sec { position:relative; margin:12px 2px 4px; padding:10px 12px 12px 14px; border-left:2px solid var(--sc-line); border-top:2px solid var(--sc-line); border-top-left-radius:6px; } .chats-final-stage .sub-sec-head { display:flex; align-items:center; gap:9px; cursor:pointer; padding-bottom:4px; } .chats-final-stage .sub-sec-head .sh-em { width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:16px; flex:none; background:var(--sc-soft); } .chats-final-stage .sub-sec-head h4 { margin:0; font-size:16px; font-weight:700; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .chats-final-stage .sub-sec-head .sh-cnt { font-size:12px; color:var(--ink-faint); font-weight:500; } .chats-final-stage .mini-chat { display:flex; align-items:center; gap:11px; padding:8px 2px; cursor:pointer; } .chats-final-stage .mini-chat .mc-ava { width:42px; height:42px; border-radius:13px; display:flex; align-items:center; justify-content:center; font-size:19px; color:#fff; flex:none; } .chats-final-stage .mini-chat .mc-body { flex:1; min-width:0; } .chats-final-stage .mini-chat .mc-body h5 { margin:0; font-size:15.5px; font-weight:600; display:flex; align-items:center; gap:5px; } .chats-final-stage .mini-chat .mc-body .mc-last { font-size:14px; font-weight:400; line-height:1.4; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; } .chats-final-stage .mini-chat .mc-time { font-size:12px; font-weight:500; color:var(--ink-faint); flex:none; } .chats-final-stage .all-chats-row { display:flex; align-items:center; gap:6px; font-size:13.5px; color:var(--accent); font-weight:600; padding:8px 2px 2px; cursor:pointer; } .chats-final-stage .all-chats-row svg { width:15px; height:15px; } .chats-final-stage .sub-empty { font-size:13.5px; color:var(--ink-faint); padding:6px 2px 4px; } .chats-final-stage .sub-empty .se-btn { margin-top:8px; } .chats-final-stage .pill-btn { border:none; background:var(--accent); color:#fff; font-size:13.5px; font-weight:600; padding:11px 22px; border-radius:22px; cursor:pointer; } .chats-final-stage .pill-btn.ghost { background:transparent; color:var(--accent); border:1.5px dashed var(--accent-line); } .chats-final-stage .feed-group-label { font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); margin:14px 4px 6px; } .chats-final-stage .feed-row { display:flex; gap:11px; padding:9px 2px; cursor:pointer; border-bottom:1px solid var(--line); } .chats-final-stage .feed-ico { width:34px; height:34px; border-radius:10px; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; flex:none; } .chats-final-stage .feed-ico svg { width:17px; height:17px; } .chats-final-stage .feed-body { flex:1; min-width:0; } .chats-final-stage .feed-body h5 { margin:0; font-size:15.5px; font-weight:600; } .chats-final-stage .feed-body .fp { font-size:11.5px; color:var(--accent); margin-top:1px; cursor:pointer; } .chats-final-stage .feed-body .fx { font-size:14px; font-weight:400; line-height:1.4; color:var(--ink-soft); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .chats-final-stage .feed-time { font-size:12px; font-weight:500; color:var(--ink-faint); flex:none; } .chats-final-stage .task-check { width:22px; height:22px; padding:0; border-radius:7px; border:2px solid var(--line); background:transparent; flex:none; cursor:pointer; display:flex; align-items:center; justify-content:center; margin-top:5px; } .chats-final-stage .task-check.done { background:var(--accent); border-color:var(--accent); } .chats-final-stage .task-check svg { width:13px; height:13px; color:#fff; } .chats-final-stage .task-row.done h5 { text-decoration:line-through; color:var(--ink-faint); } .chats-final-stage .expand-btn { width:100%; border:0; background:transparent; text-align:center; font-size:13.5px; font-weight:600; color:var(--accent); padding:12px; cursor:pointer; } .chats-final-stage .tab-empty { text-align:center; padding:32px 20px; color:var(--ink-faint); font-size:13.5px; line-height:1.5; } .chats-final-stage .create-chat-btn { width:100%; margin:16px 0 8px; padding:13px; border:1.5px dashed var(--accent-line); background:transparent; color:var(--accent); font-size:14px; font-weight:600; border-radius:15px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:7px; transition:background .15s; } .chats-final-stage .create-chat-btn:active { background:var(--accent-soft); } .chats-final-stage .create-chat-btn svg { width:18px; height:18px; } /* Decoded screen-subtopic / renderSubtopicPage / fullChatRow primitives. */ .chats-final-stage.subtopic-stage { flex-direction:column; } .chats-final-stage .full-chat { display:flex; gap:13px; padding:10px 2px 10px 0; cursor:pointer; align-items:center; position:relative; } .chats-final-stage .full-chat .fc-ava { width:58px; height:58px; border-radius:18px; display:flex; align-items:center; justify-content:center; font-size:25px; color:#fff; flex:none; } .chats-final-stage .full-chat .fc-body { flex:1; min-width:0; border-bottom:1px solid var(--line); padding-bottom:10px; margin-bottom:-10px; display:flex; flex-direction:column; justify-content:center; min-height:58px; } .chats-final-stage .full-chat:last-of-type .fc-body { border-bottom:none; } .chats-final-stage .full-chat .fc-top { display:flex; align-items:center; gap:6px; } .chats-final-stage .full-chat .fc-title { font-size:16px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; min-width:0; } .chats-final-stage .full-chat .fc-title.pinnedt { font-weight:700; } .chats-final-stage .full-chat .fc-time { font-size:12px; font-weight:500; color:var(--ink-faint); flex:none; } .chats-final-stage .full-chat .fc-last { font-size:14.5px; font-weight:400; line-height:1.4; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; } .chats-final-stage .full-chat.closed { opacity:.62; } .chats-final-stage .fc-unread { background:var(--accent); color:#fff; font-size:10.5px; font-weight:700; min-width:18px; height:18px; padding:0 5px; border-radius:9px; display:flex; align-items:center; justify-content:center; } .chats-final-stage .closed-block-head { width:100%; display:flex; align-items:center; gap:8px; padding:12px 2px 8px; margin-top:8px; cursor:pointer; color:var(--ink-soft); font-size:13px; font-weight:600; border:0; border-top:1px solid var(--line); background:transparent; text-align:left; } .chats-final-stage .closed-block-head .cbh-chev { margin-left:auto; transition:transform .2s; } .chats-final-stage .closed-block-head.open .cbh-chev { transform:rotate(180deg); } .chats-final-stage .closed-block-head svg { width:16px; height:16px; } .chats-final-stage .subtopic-empty { padding-top:48px; } .chats-final-stage .subtopic-empty .empty-emoji { font-size:34px; margin-bottom:10px; } .chats-final-stage .sub-empty.no-active { padding:14px 2px; } .chats-final-stage .loc-btn.selected-location { color:var(--accent); border-color:var(--accent-line); opacity:1; cursor:default; } /* Decoded screen-chat / renderChat / renderRow primitives. */ .chats-final-stage.chat-stage { flex-direction:column; position:relative; overflow:hidden; background-color:#E6EBE8; background-image:radial-gradient(rgba(35,38,43,.06) 1px, transparent 1px); background-size:20px 20px; } .chats-final-stage .chat-top-solid { position:relative; z-index:6; flex:none; background:rgba(255,255,255,.55); box-shadow:0 1px 0 rgba(35,38,43,.05); backdrop-filter:blur(20px) saturate(1.4); -webkit-backdrop-filter:blur(20px) saturate(1.4); } .chats-final-stage .chat-header { display:flex; align-items:center; gap:9px; padding:calc(env(safe-area-inset-top) + 10px) 12px 10px; flex:none; position:relative; z-index:6; } .chats-final-stage .hbtn { width:38px; height:38px; padding:0; border-radius:50%; border:1px solid rgba(255,255,255,.8); background:var(--glass); backdrop-filter:blur(14px); color:var(--ink); display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none; transition:background .15s,transform .15s; } .chats-final-stage .hbtn:active { background:rgba(140,155,150,.16); transform:scale(.94); } .chats-final-stage .hbtn svg { width:19px; height:19px; } .chats-final-stage .chat-plate { flex:1; min-width:0; display:flex; align-items:center; gap:9px; background:var(--glass); border:1px solid rgba(255,255,255,.8); backdrop-filter:blur(14px); border-radius:20px; padding:6px 10px 6px 6px; cursor:pointer; text-align:left; transition:background .15s; } .chats-final-stage .chat-plate:active { background:rgba(140,155,150,.1); } .chats-final-stage .chat-plate .ce { width:36px; height:36px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:16px; color:#fff; flex:none; } .chats-final-stage .chat-plate .info { flex:1; min-width:0; display:block; } .chats-final-stage .chat-plate .info h3 { margin:0; font-size:16px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .chats-final-stage .chat-plate .info .crumb { display:block; font-size:12px; font-weight:500; color:var(--ink-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .chats-final-stage .chat-header-actions { display:flex; gap:8px; flex:none; } .chats-final-stage .pinned-block { display:flex; align-items:stretch; gap:10px; margin:6px 12px 4px; padding:9px 12px 9px 13px; background:var(--glass); border:1px solid rgba(255,255,255,.85); backdrop-filter:blur(14px); border-radius:16px; cursor:pointer; position:relative; flex:none; } .chats-final-stage .pinned-block::before { content:''; position:absolute; left:4px; top:8px; bottom:8px; width:2.5px; background:var(--accent); border-radius:2px; } .chats-final-stage .pinned-block .pb-body { flex:1; min-width:0; margin-left:6px; padding:0; border:0; background:transparent; display:flex; flex-direction:column; align-items:flex-start; text-align:left; cursor:pointer; } .chats-final-stage .pinned-block .pb-label { font-size:11px; font-weight:700; color:var(--accent); letter-spacing:.05em; margin-bottom:2px; } .chats-final-stage .pinned-block .pb-text { max-width:100%; font-size:13.5px; font-weight:500; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .chats-final-stage .pinned-block .pb-side { display:flex; flex-direction:column; align-items:flex-end; justify-content:space-between; flex:none; gap:6px; } .chats-final-stage .pinned-block .pb-count { font-size:11.5px; color:var(--ink-faint); font-weight:600; } .chats-final-stage .pinned-block .pb-close { width:22px; height:22px; padding:0; border-radius:50%; border:none; background:rgba(140,155,150,.14); color:var(--ink-faint); display:flex; align-items:center; justify-content:center; cursor:pointer; } .chats-final-stage .chat-feed { flex:1; min-height:0; overflow-y:auto; overscroll-behavior-y:contain; padding:14px 10px calc(78px + var(--app-safe-bottom)); display:flex; flex-direction:column; position:relative; background:transparent; } .chats-final-stage.chat-stage:has(.composer-quick-panel.show) .chat-feed { padding-bottom:calc(150px + var(--app-safe-bottom)); } .chats-final-stage .chat-feed-inner { display:flex; flex-direction:column; gap:11px; margin-top:auto; } .chats-final-stage .history-loading { text-align:center; font-size:11px; color:var(--ink-faint); padding:6px 0 2px; align-items:center; justify-content:center; gap:6px; } .chats-final-stage .history-loading[hidden] { display:none; } .chats-final-stage .chat-empty { margin:auto 0; } .chats-final-stage .chat-empty .eico { font-size:34px; margin-bottom:10px; } .chats-final-stage .chat-empty span { font-size:13.5px; } .chats-final-stage .date-pill-row { display:flex; justify-content:center; margin:4px 0; } .chats-final-stage .date-pill { font-size:12.5px; font-weight:600; color:var(--ink-soft); background:rgba(255,255,255,.3); border:1px solid var(--line); padding:5px 14.5px; border-radius:13px; } .chats-final-stage .row-wrap { position:relative; display:flex; padding:3px 4px; border-radius:12px; transition:background .15s; } .chats-final-stage .row-wrap.flash { animation:chat-row-flash 1.3s ease; } @keyframes chat-row-flash { 0% { background:rgba(62,155,95,.35); } 100% { background:transparent; } } .chats-final-stage .row-dot { width:36px; height:36px; padding:0; border-radius:10px; border:none; background:transparent; color:var(--ink-faint); display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none; margin:-8px -3px; } .chats-final-stage .row-dot:active { background:rgba(140,155,150,.16); } .chats-final-stage .row-dot svg { width:18px; height:18px; } .chats-final-stage .irr-divider-row { display:flex; align-items:center; gap:8px; margin:6px 0; font-size:11.5px; color:var(--ink-faint); font-weight:600; } .chats-final-stage .irr-divider-row .idl-line { flex:1; height:1px; background:var(--line); } .chats-final-stage .irr-divider-row .idot { width:24px; height:24px; padding:0; border-radius:8px; border:none; background:transparent; color:var(--ink-faint); display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none; } .chats-final-stage .irr-divider-row .idot svg { width:14px; height:14px; } .chats-final-stage .divider-row { display:flex; align-items:center; gap:8px; margin:6px 0; font-size:11.5px; color:var(--accent); font-weight:600; } .chats-final-stage .divider-row::before,.chats-final-stage .divider-row::after { content:''; flex:1; height:1px; background:var(--accent-line); } .chats-final-stage .divider-line-row { display:flex; align-items:center; gap:0; width:100%; padding:14px 0; margin:0; cursor:pointer; } .chats-final-stage .divider-line-row .dl-ring { width:var(--divider-ring-size); height:var(--divider-ring-size); box-sizing:border-box; border:var(--divider-ring-border) solid var(--divider-color); border-radius:50%; background:transparent; flex:none; } .chats-final-stage .divider-line-row .dl-seg { flex:1; display:flex; align-items:center; min-width:0; } .chats-final-stage .divider-line-row .dl-line { display:block; width:100%; height:0; } .chats-final-stage .divider-line-row .dl-wave { display:block; width:100%; height:10px; } .chats-final-stage .divider-line-row .dl-title { flex:none; max-width:60%; margin:0 10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--divider-color); font-size:12.5px; font-weight:700; } .chats-final-stage .chat-block { position:relative; margin:12px 0; border-radius:18px; padding:8px; overflow:hidden; background:color-mix(in srgb, var(--block-color) 9%, transparent); } .chats-final-stage .block-created-date { display:block; margin:0 0 7px; color:var(--ink-faint); font-size:9px; line-height:1; text-align:center; font-variant-numeric:tabular-nums; } .chats-final-stage .block-top-line,.chats-final-stage .block-bottom-line { display:flex; align-items:center; gap:6px; min-width:0; } .chats-final-stage .block-line-seg { flex:1; display:flex; align-items:center; min-width:0; } .chats-final-stage .block-line-title { flex:none; max-width:48%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:color-mix(in srgb,var(--block-color) 72%,var(--ink)); font-size:17.5px; font-weight:600; line-height:1; } .chats-final-stage .block-top-line,.chats-final-stage .block-bottom-line { border-radius:14px; overflow:hidden; } .chats-final-stage .block-border-line { border-radius:999px; } /* 9px владелец попросил «трошки увеличить» — на телефоне счётчик читался с трудом. */ .chats-final-stage .block-count { flex:none; color:var(--ink-faint); font-size:11px; line-height:1; white-space:nowrap; } .chats-final-stage .block-border-line { display:block; width:100%; height:0; } .chats-final-stage .block-border-wave { display:block; width:100%; height:8px; } .chats-final-stage .block-head-action { width:31px; height:31px; flex:none; padding:0; border:0; border-radius:50%; background:var(--block-color); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; } .chats-final-stage .block-head-action svg { width:21px; height:21px; } .chats-final-stage .chat-block-items { display:flex; flex-direction:column; gap:4px; } .chats-final-stage .chat-block .row-wrap { margin:0; } .chats-final-stage .chat-block.collapsed .chat-block-items { margin-bottom:2px; } .chats-final-stage .block-bottom-line { padding-top:8px; } .chats-final-stage .block-bottom-short { width:22px; flex:none; display:flex; align-items:center; } .chats-final-stage .chat-block .block-collapse { display:flex; flex:none; margin:0; padding:0; border:0; background:transparent; color:var(--block-color); font:500 9.5px/1 Inter,Arial,sans-serif; cursor:pointer; } .chats-final-stage .chat-block .block-collapse-label { display:flex; align-items:center; gap:3px; } .chats-final-stage .chat-block .block-collapse-chevron { display:block; width:9px; height:9px; fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; } .chats-final-stage .block-collapse-chevron.up { transform:rotate(180deg); } .chats-final-stage .block-settings-sheet,.chats-final-stage .block-delete-sheet { padding:18px 18px calc(18px + env(safe-area-inset-bottom)); } .chats-final-stage .block-delete-sheet h3 { margin:8px 0 14px; } .chats-final-stage .sheet-back { display:flex; align-items:center; gap:5px; padding:0; border:0; background:transparent; color:var(--ink-soft); font:500 13px/1 inherit; } .chats-final-stage .sheet-back svg { width:16px; height:16px; } .chats-final-stage .message-menu-controls { display:flex; align-items:center; gap:1px; } .chats-final-stage .row-block-dot { opacity:.72; } .chats-final-stage .row-block-dot svg { width:18px; height:18px; display:block; } .chats-final-stage .block-original-time { display:block; align-self:flex-end; margin-top:4px; font-size:11px; color:var(--ink-faint); text-align:right; } .chats-final-stage .sheet-option { display:block; width:100%; padding:14px; border:0; border-top:1px solid var(--line); background:transparent; text-align:left; font:inherit; color:var(--ink); } .chats-final-stage .sheet-option.danger { color:#b43b3b; } .chats-final-stage .msg-row { display:flex; align-items:center; gap:8px; max-width:100%; flex:1; } .chats-final-stage .msg-row.right { align-self:flex-end; flex-direction:row-reverse; } .chats-final-stage .msg-col-wrap { display:flex; align-items:center; gap:3px; min-width:0; max-width:96%; } .chats-final-stage .msg-row.right .msg-col-wrap { flex-direction:row-reverse; } .chats-final-stage .msg-row .m-ava { width:22px; height:22px; border-radius:50%; flex:none; color:#fff; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; margin-top:2px; } .chats-final-stage .msg-row.right .m-ava { display:none; } .chats-final-stage .msg-col { display:flex; flex-direction:column; gap:3px; min-width:0; } .chats-final-stage .msg-meta { font-size:12px; font-weight:500; color:var(--ink-faint); display:flex; gap:6px; align-items:center; } .chats-final-stage .msg-row.right .msg-meta { flex-direction:row-reverse; } .chats-final-stage .bubble { display:flex; flex-direction:column; padding:9px 12px; border-radius:16px; font-size:15px; line-height:1.4; position:relative; word-break:break-word; } .chats-final-stage .msg-row.left .bubble { background:rgba(255,255,255,.75); border:1px solid var(--line); border-top-left-radius:5px; } .chats-final-stage .msg-row.right .bubble { background:linear-gradient(135deg,var(--accent),#4EAF6E); color:#fff; border-top-right-radius:5px; } .chats-final-stage .bubble.failed { background:var(--overdue-soft); border:1px solid rgba(229,72,77,.4); color:var(--ink); } .chats-final-stage .bubble-author { font-size:12.5px; font-weight:700; color:var(--accent); margin-bottom:2px; } .chats-final-stage .bubble-time { align-self:flex-end; font-size:11px; font-weight:500; color:var(--ink-faint); opacity:.85; margin-top:2px; } .chats-final-stage .msg-row.right .bubble-time { color:rgba(255,255,255,.8); } .chats-final-stage .row-wrap:has(.task-item-toggle) .msg-row { padding-left:25px; } .chats-final-stage .task-item-toggle { position:absolute; left:1px; top:50%; z-index:1; width:21px; height:21px; padding:0; border:2px solid var(--accent); border-radius:50%; background:rgba(255,255,255,.42); color:#fff; box-shadow:0 2px 7px rgba(46,155,104,.22); transform:translateY(-50%); cursor:pointer; } .chats-final-stage .task-item-toggle.done { border-color:var(--accent); background:var(--accent); box-shadow:0 2px 8px rgba(46,155,104,.32); } .chats-final-stage .task-item-toggle svg { width:13px; height:13px; display:block; margin:auto; stroke-width:3; } .chats-final-stage .bubble.task-item:not(.task-item-done) { box-shadow:0 0 16px 4px rgba(46,155,104,.58); } /* Владелец решил оставить зачёркивание — держим его вместе с новыми сигналами (притухание строки + подпись времени ниже), а не вместо них. opacity — на саму .bubble, а не только на текст, чтобы притухла целиком строка (аватар/цитата/время внутри неё), а не только подпись. */ .chats-final-stage .bubble.task-item.task-item-done { box-shadow:0 0 16px 4px rgba(111,124,117,.46); opacity:.6; } .chats-final-stage .task-item-text.task-item-done { color:var(--ink-soft); text-decoration:line-through; text-decoration-thickness:1px; text-decoration-color:#fff; } .chats-final-stage .msg-row.right .task-item-text.task-item-done { color:#fff; text-decoration-color:#fff; } /* Когда выполнено — дополнительно показываем когда именно: своя строка под текстом дела. */ .chats-final-stage .task-item-done-caption { display:block; font-size:11px; color:var(--ink-faint); margin-top:2px; } .chats-final-stage .msg-row.right .task-item-done-caption { color:rgba(255,255,255,.8); } /* Было inline: подзадача могла стоять посреди предложения на одной строке с остальным текстом. Теперь у выполненной подзадачи под ней появляется подпись времени (.message-subtask-done-caption) — ей нужна собственная строка, поэтому подзадача стала блоком. На практике подзадачи и раньше писали по одной на строку (чек-лист внутри сообщения), так что для типичного случая ничего не меняется — меняется только для маркера посреди предложения, что не был основным сценарием. */ .chats-final-stage .message-subtask { display:block; margin:2px 0; } .chats-final-stage .message-subtask-toggle { display:inline-flex; width:14.5px; height:14.5px; margin:0 3px 1px 2px; padding:0; border:1.5px solid var(--accent); border-radius:50%; background:rgba(255,255,255,.46); color:#fff; vertical-align:middle; align-items:center; justify-content:center; cursor:pointer; } .chats-final-stage .message-subtask-toggle.done { background:var(--accent); } .chats-final-stage .message-subtask-toggle svg { width:9px; height:9px; stroke-width:3; } .chats-final-stage .message-subtask-text.done { color:var(--ink-soft); text-decoration:line-through; text-decoration-thickness:1px; text-decoration-color:#fff; } .chats-final-stage .msg-row.right .message-subtask-text.done { color:rgba(35,38,43,.56); } /* Отступ слева — под текстом поддела, а не под кружком-тумблером: 2px margin + 14.5px ширина + 3px margin у .message-subtask-toggle = 19.5px до начала текста. */ .chats-final-stage .message-subtask-done-caption { display:block; font-size:11px; color:var(--ink-faint); margin:1px 0 0 19.5px; } .chats-final-stage .msg-row.right .message-subtask-done-caption { color:rgba(35,38,43,.5); } .chats-final-stage .edited-tag { display:inline-flex; align-items:center; gap:2px; margin-right:4px; color:inherit; font-size:10px; font-weight:500; line-height:1; opacity:.72; white-space:nowrap; } .chats-final-stage .edited-tag svg { width:10px; height:10px; flex:none; } .chats-final-stage .bubble code { font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace; font-size:13px; background:rgba(35,38,43,.08); padding:1px 5px; border-radius:5px; } .chats-final-stage .msg-row.right .bubble code { background:rgba(255,255,255,.22); } .chats-final-stage .bubble ul, .chats-final-stage .bubble ol { margin:2px 0; padding-left:20px; } .chats-final-stage .bubble li { margin:2px 0; } .chats-final-stage .send-status { padding:0; border:0; background:transparent; font-size:11px; color:var(--ink-faint); margin-top:2px; display:flex; align-items:center; gap:3px; } .chats-final-stage .send-status.failed { color:var(--overdue); cursor:pointer; font-weight:600; } .chats-final-stage .send-status.failed svg { width:11px; height:11px; } .chats-final-stage .reply-quote { width:100%; border:0; font-size:12.5px; padding:5px 8px; border-left:2.5px solid var(--accent-line); border-radius:6px; background:rgba(140,155,150,.10); margin-bottom:5px; cursor:pointer; text-align:left; } .chats-final-stage .reply-quote b { display:block; color:var(--accent); font-weight:700; margin-bottom:1px; } .chats-final-stage .msg-row.right .reply-quote { background:rgba(255,255,255,.18); border-left-color:rgba(255,255,255,.6); color:#fff; } .chats-final-stage .msg-row.right .reply-quote b { color:#fff; } .chats-final-stage .card-row { display:flex; align-items:center; gap:3px; max-width:88%; } .chats-final-stage .entity-card { align-self:flex-start; background:var(--glass); border:1.5px solid var(--accent-line); border-radius:var(--r-md); padding:10px 12px 10px 15px; cursor:pointer; position:relative; flex:1; min-width:0; text-align:left; } .chats-final-stage .entity-card::before { content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); height:44%; width:9px; border:1.6px solid var(--accent); border-right:none; border-radius:8px 0 0 8px; } .chats-final-stage .entity-card .elabel { display:block; font-size:11px; font-weight:700; color:var(--accent); letter-spacing:.04em; margin-bottom:3px; } .chats-final-stage .entity-card h4 { margin:0 0 4px; font-size:15px; font-weight:700; display:flex; align-items:center; } .chats-final-stage .entity-card .emeta { font-size:12px; font-weight:500; color:var(--ink-soft); display:flex; flex-wrap:wrap; gap:6px; align-items:center; } .chats-final-stage .entity-card .entity-path { margin-top:4px; color:var(--ink-faint); } .chats-final-stage .entity-card .prio { font-weight:700; } .chats-final-stage .entity-card .prio.high { color:var(--prio-high); } .chats-final-stage .entity-card .prio.mid { color:var(--prio-mid); } .chats-final-stage .entity-card .ecircle { width:14px; height:14px; border-radius:50%; border:2px solid var(--accent-line); flex:none; margin-right:6px; } .chats-final-stage .sys-update { align-self:flex-start; background:transparent; border:1px dashed var(--line); border-radius:var(--r-md); padding:8px 12px; cursor:pointer; flex:1; min-width:0; text-align:left; } .chats-final-stage .sys-update .slabel { display:block; font-size:11px; font-weight:700; color:var(--ink-faint); letter-spacing:.04em; margin-bottom:3px; } .chats-final-stage .sys-update h5 { margin:0 0 3px; font-size:14px; font-weight:600; } .chats-final-stage .sys-update ul { margin:0; padding:0; list-style:none; font-size:13px; color:var(--ink-soft); } .chats-final-stage .sys-update ul li { padding:1px 0; } .chats-final-stage .voice-bubble { display:flex; align-items:center; gap:8px; min-width:150px; } .chats-final-stage .voice-bubble .vplay { width:26px; height:26px; padding:0; border:0; border-radius:50%; background:rgba(255,255,255,.3); flex:none; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:11px; } .chats-final-stage .msg-row.left .voice-bubble .vplay { background:var(--accent-soft); color:var(--accent); } .chats-final-stage .voice-bubble .wave { flex:1; height:18px; background:repeating-linear-gradient(90deg,currentColor 0 2px,transparent 2px 5px); opacity:.5; border-radius:4px; } .chats-final-stage .voice-bubble .vdur { font-size:11.5px; flex:none; opacity:.85; } .chats-final-stage .file-bubble { display:flex; align-items:center; gap:8px; border:0; background:transparent; padding:0; margin:0; font:inherit; color:inherit; text-align:left; cursor:pointer; } .chats-final-stage .file-bubble .fico { width:32px; height:32px; border-radius:9px; background:rgba(255,255,255,.3); flex:none; display:flex; align-items:center; justify-content:center; } .chats-final-stage .file-bubble .fico svg { width:16px; height:16px; } .chats-final-stage .file-bubble .fmeta { min-width:0; display:flex; flex-direction:column; } .chats-final-stage .file-bubble .fname { font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:150px; } .chats-final-stage .file-bubble .fsize { font-size:11px; opacity:.8; } .chats-final-stage .file-caption,.chats-final-stage .photo-caption { font-size:13px; margin-top:4px; color:var(--ink); } /* object-fit:cover раньше кадрировало любое фото под квадрат 260x260 — длинный портрет терял верх и низ. contain показывает фото целиком, вписанным и отцентрованным в тот же квадрат; background — под пустые поля по бокам/сверху-снизу, которые остаются у не-квадратных фото (и тот же фон служит плейсхолдером, пока фото ещё грузится). */ .chats-final-stage .photo-bubble { border:0; border-radius:16px; overflow:hidden; position:relative; width:260px; height:260px; display:flex; align-items:flex-end; justify-content:flex-end; cursor:pointer; background:rgba(140,155,150,.12); } .chats-final-stage .photo-bubble .photo-img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block; } .chats-final-stage .photo-bubble.load-failed { background:linear-gradient(135deg,#B8C6D6,#8FA3B8); } .chats-final-stage .msg-row.right .photo-bubble:not(.in-bubble) { box-shadow:0 0 0 3px #fff, 0 0 0 5px var(--accent); } .chats-final-stage .msg-row.left .photo-bubble:not(.in-bubble) { box-shadow:0 0 0 3px #fff, 0 0 0 5px rgba(140,155,150,.55); } .chats-final-stage .bubble.photo-message { padding:4px; } .chats-final-stage .bubble.photo-message .bubble-author { padding:4px 6px 2px; margin-bottom:0; } .chats-final-stage .bubble.photo-message .photo-bubble.in-bubble { width:260px; height:260px; border-radius:12px; } .chats-final-stage .bubble.photo-message .photo-caption { display:flex; flex-direction:column; margin-top:0; padding:6px 6px 2px; color:inherit; } .chats-final-stage .bubble .file-caption { color:inherit; } .chats-final-stage .photo-bubble .ph-time { font-size:10px; color:#fff; background:rgba(0,0,0,.35); padding:2px 7px; border-radius:8px; margin:8px; } .chats-final-stage .photo-group { padding:0; border:0; display:grid; grid-template-columns:1fr 1fr; gap:3px; width:180px; border-radius:16px; overflow:hidden; cursor:pointer; } /* Кладка через CSS-колонки: высота ячейки диктуется самой картинкой, поэтому скриншоты не режутся в квадрат, а пустых слотов (и цветных «дырок» от них) не бывает в принципе. min-height держит место, пока blob-URL ещё грузится — иначе колонки схлопываются в ноль и лента прыгает при подгрузке. Обводка живёт на ячейке, а не на контейнере: между колонками фон контейнера просвечивал бы сплошными полосами. */ .chats-final-stage .media-group { columns:2; column-gap:6px; width:260px; } .chats-final-stage .mg-cell { position:relative; display:block; width:100%; min-height:78px; margin:0 0 6px; padding:0; border:0; border-radius:10px; overflow:hidden; cursor:pointer; background:rgba(140,155,150,.15); break-inside:avoid; } .chats-final-stage .mg-cell .photo-img,.chats-final-stage .mg-cell .video-thumb { width:100%; height:auto; display:block; } .chats-final-stage .mg-more { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(20,26,23,.55); color:#fff; font-size:19px; font-weight:700; } .chats-final-stage .mg-cell .vb-play { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.9); display:flex; align-items:center; justify-content:center; color:var(--accent); font-size:11px; } .chats-final-stage .photo-group .pg-cell { height:86px; position:relative; } .chats-final-stage .photo-group .pg-cell:first-child { grid-row:span 2; height:175px; } .chats-final-stage .photo-group .pg-more { position:absolute; inset:0; background:rgba(20,30,25,.45); color:#fff; font-size:15px; font-weight:700; display:flex; align-items:center; justify-content:center; } .chats-final-stage .video-bubble { width:260px; height:260px; padding:0; border:0; border-radius:16px; overflow:hidden; position:relative; cursor:pointer; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#7C8A9A,#4E5D6E); } .chats-final-stage .video-bubble .video-thumb { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .chats-final-stage .video-bubble.load-failed .video-thumb { display:none; } .chats-final-stage .msg-row.right .video-bubble { box-shadow:0 0 0 3px #fff, 0 0 0 5px var(--accent); } .chats-final-stage .msg-row.left .video-bubble { box-shadow:0 0 0 3px #fff, 0 0 0 5px rgba(140,155,150,.55); } .chats-final-stage .msg-row.right .mg-cell { box-shadow:0 0 0 1.5px var(--accent); } .chats-final-stage .msg-row.left .mg-cell { box-shadow:0 0 0 1.5px rgba(140,155,150,.55); } .chats-final-stage .video-bubble .vb-play { position:relative; z-index:1; width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.9); display:flex; align-items:center; justify-content:center; color:var(--accent); } .chats-final-stage .video-bubble .vb-dur { position:absolute; right:8px; bottom:8px; font-size:10px; color:#fff; background:rgba(0,0,0,.4); padding:2px 7px; border-radius:8px; } .chats-final-stage .link-card { width:220px; padding:0; border-radius:16px; overflow:hidden; background:rgba(255,255,255,.6); border:1px solid var(--line); cursor:pointer; text-align:left; } .chats-final-stage .msg-row.right .link-card { background:rgba(255,255,255,.22); border-color:rgba(255,255,255,.4); } .chats-final-stage .link-card .lc-img { height:96px; background:linear-gradient(135deg,#B8C6D6,#8FA3B8); display:flex; align-items:center; justify-content:center; color:#fff; } .chats-final-stage .link-card .lc-img svg { width:26px; height:26px; } .chats-final-stage .link-card .lc-body { display:flex; flex-direction:column; padding:8px 10px; } .chats-final-stage .link-card .lc-title { font-size:14px; font-weight:700; margin-bottom:2px; } .chats-final-stage .link-card .lc-desc { font-size:13px; color:var(--ink-soft); line-height:1.3; margin-bottom:4px; } .chats-final-stage .link-card .lc-domain { font-size:11px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.03em; } .chats-final-stage .link-plain { padding:9px 12px; border-radius:16px; background:rgba(255,255,255,.75); border:1px solid var(--line); font-size:14px; color:var(--accent); cursor:pointer; } .chats-final-stage .msg-links { display:flex; flex-direction:column; gap:5px; margin-top:5px; align-items:flex-start; } .chats-final-stage .msg-row.right .msg-links { align-items:flex-end; } .chats-final-stage .relation-label { max-width:220px; padding:0; border:0; background:transparent; font-size:11.5px; color:var(--ink-faint); display:flex; align-items:center; gap:4px; cursor:pointer; text-align:left; } .chats-final-stage .relation-label svg { width:11px; height:11px; flex:none; } .chats-final-stage .down-jump { position:absolute; right:14px; bottom:calc(86px + var(--app-safe-bottom)); width:36px; height:36px; padding:0; border-radius:50%; background:rgba(255,255,255,.92); border:1px solid var(--line); box-shadow:0 3px 10px rgba(60,80,70,.15); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--accent); flex-direction:column; z-index:20; opacity:0; pointer-events:none; transform:translateY(8px); transition:opacity .18s,transform .18s; } .chats-final-stage .down-jump.show { opacity:1; pointer-events:auto; transform:none; } .chats-final-stage .down-jump svg { width:16px; height:16px; } .chats-final-stage .down-jump .dj-count { font-size:9px; font-weight:700; line-height:1; } .chats-final-stage .composer-wrap { position:absolute; left:0; right:0; bottom:0; z-index:5; flex:none; padding:8px 12px calc(12px + var(--app-safe-bottom)); background:transparent; pointer-events:none; } .chats-final-stage .composer-wrap > * { pointer-events:auto; } .chats-final-stage .composer-bar { display:flex; align-items:flex-end; gap:5px; background:rgba(255,255,255,.82); border:1px solid rgba(255,255,255,.85); border-radius:22px; padding:5px 5px 5px 6px; box-shadow:0 4px 18px rgba(60,80,70,.10); backdrop-filter:blur(18px) saturate(1.3); -webkit-backdrop-filter:blur(18px) saturate(1.3); } .chats-final-stage .composer-bar .cbtn { width:32px; height:32px; padding:0; border-radius:50%; border:none; background:transparent; color:var(--ink-soft); flex:none; align-self:center; cursor:pointer; display:flex; align-items:center; justify-content:center; } .chats-final-stage .composer-bar .cbtn:active { background:rgba(140,155,150,.14); } .chats-final-stage .composer-bar .cbtn svg { width:17.5px; height:17.5px; } .chats-final-stage .composer-bar .chat-aa { font-size:13px; } /* Зелёная капсула-триггер есть теперь в двух композерах: нижнем в чате (.composer-bar) и в «Быстрой мысли» на главной (.qc-actions). Геометрия одна, поэтому селектор общий. */ .chats-final-stage .composer-bar .qtrigger, .chats-final-stage .qc-actions .qtrigger { width:26px; height:26px; padding:0; border-radius:50%; border:none; background:var(--accent-soft); color:var(--accent); flex:none; align-self:center; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s,color .15s; } .chats-final-stage .composer-bar .qtrigger svg, .chats-final-stage .qc-actions .qtrigger svg { width:13px; height:13px; } .chats-final-stage .composer-bar .qtrigger.open, .chats-final-stage .qc-actions .qtrigger.open { background:var(--accent); color:#fff; } /* Чип выбранного чекбокса подсвечивается, чтобы было видно, что мысль уйдёт не просто в чат. */ .chats-final-stage .qp-item.on { border-color:var(--accent-line); background:var(--accent-soft); color:var(--accent); } .chats-final-stage .composer-bar textarea { flex:1; border:none !important; background:transparent !important; font-family:inherit; font-size:15px; resize:none; min-height:40px; max-height:200px; outline:none; padding:8px 2px; line-height:1.35; min-width:0; } .chats-final-stage .composer-bar .send-btn { width:34px; height:34px; padding:0; border-radius:50%; border:none; background:var(--accent); color:#fff; flex:none; display:flex; align-items:center; justify-content:center; cursor:pointer; } .chats-final-stage .composer-bar .send-btn svg { width:15px; height:15px; } .chats-final-stage .composer-quick-panel { display:flex; gap:6px; max-height:0; opacity:0; overflow:hidden; margin-top:0; transition:max-height .22s ease, opacity .18s ease, margin-top .22s ease; } .chats-final-stage .composer-quick-panel.show { max-height:64px; opacity:1; margin-top:8px; } /* var(--glass) — 55% прозрачности, сквозь пилюлю просвечивал цвет сообщения под ней. Как и .format-bar ниже, делаем непрозрачным белым — тем же паттерном, что .reply-preview/.edit-preview. */ .chats-final-stage .qp-item { display:flex; align-items:center; gap:6px; flex:1; min-width:0; border:1px solid rgba(255,255,255,.8); border-radius:14px; background:#fff; color:var(--ink-soft); padding:8px 10px; cursor:pointer; } .chats-final-stage .qp-item:active { background:rgba(140,155,150,.14); } .chats-final-stage .qp-item .qp-ico { display:flex; flex:none; } .chats-final-stage .qp-item .qp-ico svg { width:16px; height:16px; } .chats-final-stage .qp-item .qp-label { overflow:hidden; font-size:12.5px; font-weight:600; white-space:nowrap; text-overflow:ellipsis; } .chats-final-stage .closed-composer { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; background:var(--overdue-soft); border-radius:16px; margin:0 12px 12px; flex:none; } .chats-final-stage .closed-composer span { font-size:13.5px; color:var(--ink-soft); font-weight:600; } .chats-final-stage .closed-composer button { border:none; background:var(--accent); color:#fff; font-size:13px; font-weight:700; padding:8px 12px; border-radius:12px; cursor:pointer; } .chats-final-stage .reply-preview,.chats-final-stage .edit-preview { display:flex; align-items:center; gap:8px; padding:7px 10px; background:#fff; border-radius:12px; margin:0 2px 6px; font-size:12.5px; box-shadow:0 2px 10px rgba(60,80,70,.08); } .chats-final-stage .attach-preview { display:flex; flex-direction:column; gap:6px; padding:2px; margin:0 2px 6px; font-size:12.5px; } .chats-final-stage .attach-preview .ap-count { font-size:11.5px; font-weight:700; color:var(--ink-soft); } .chats-final-stage .attach-preview .ap-grid { display:flex; flex-wrap:wrap; gap:6px; max-height:124px; overflow-y:auto; } .chats-final-stage .reply-preview[hidden],.chats-final-stage .edit-preview[hidden],.chats-final-stage .attach-preview[hidden] { display:none; } .chats-final-stage .attach-preview .ap-thumb { position:relative; width:56px; height:56px; border-radius:12px; flex:none; display:flex; align-items:center; justify-content:center; background:#fff; border:1px solid rgba(255,255,255,.9); box-shadow:0 2px 8px rgba(60,80,70,.08); color:var(--ink-soft); overflow:hidden; } .chats-final-stage .attach-preview .ap-thumb svg { width:20px; height:20px; } .chats-final-stage .attach-preview .ap-thumb img { width:100%; height:100%; object-fit:cover; display:block; } .chats-final-stage .attach-preview .ap-remove { position:absolute; top:-5px; right:-5px; width:19px; height:19px; padding:0; border:1.5px solid #fff; border-radius:50%; background:rgba(35,38,43,.72); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; } .chats-final-stage .attach-preview .ap-remove svg { width:10px; height:10px; } .chats-final-stage .pop-group-label { padding:7px 10px 3px; font-size:11px; font-weight:700; color:var(--ink-faint); letter-spacing:.04em; text-transform:uppercase; } /* Exact decoded speed dial: fixed 96px above the bottom, no hotbar. */ .chats-final-stage .fab-dial { position:fixed; right:18px; bottom:var(--app-floating-action-bottom); z-index:22; display:flex; flex-direction:column-reverse; align-items:flex-end; gap:12px; pointer-events:none; } .chats-final-stage .fab-main { width:56px; height:56px; padding:0; border-radius:18px; background:rgba(62,155,95,.94); backdrop-filter:blur(8px); color:#fff; border:1px solid rgba(255,255,255,.5); cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 22px rgba(62,155,95,.35); transition:transform .22s cubic-bezier(.3,.9,.3,1); pointer-events:auto; } .chats-final-stage .fab-main svg { width:24px; height:24px; transition:transform .22s; } .chats-final-stage .fab-dial.open .fab-main { background:rgba(255,255,255,.9); color:var(--ink-soft); box-shadow:0 8px 22px rgba(60,80,70,.2); } .chats-final-stage .fab-dial.open .fab-main svg { transform:rotate(135deg); } .chats-final-stage .dial-items { display:flex; flex-direction:column; align-items:flex-end; gap:10px; margin-bottom:2px; opacity:0; transform:translateY(10px) scale(.96); pointer-events:none; transition:opacity .2s,transform .2s; } .chats-final-stage .fab-dial.open .dial-items { opacity:1; transform:none; pointer-events:auto; } .chats-final-stage .dial-pill { display:flex; align-items:center; gap:10px; padding:11px 16px; border-radius:22px; background:rgba(255,255,255,.92); backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,.8); box-shadow:0 6px 18px rgba(60,80,70,.14); font-size:14.5px; font-weight:600; color:var(--ink); cursor:pointer; white-space:nowrap; } .chats-final-stage .dial-pill:active { transform:scale(.94); } .chats-final-stage .dial-pill .dp-ico { width:30px; height:30px; border-radius:10px; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; flex:none; } .chats-final-stage .dial-pill .dp-ico svg { width:17px; height:17px; } /* Sheets, floating menus and placeholder forms use decoded primitives. */ /* Единый скрим на все оверлеи: шторки, контекстное меню, каскад, попап плюса. z-index 30 держит его ниже любого из них. Плотность фона переключается классом .strong, поэтому шторки и меню выглядят так же, как раньше при двух отдельных слоях. */ .chats-final-stage .overlay-scrim { position:fixed; inset:0; background:rgba(20,28,24,.10); opacity:0; pointer-events:none; transition:opacity .18s; z-index:30; } .chats-final-stage .overlay-scrim.strong { background:rgba(35,38,43,.28); backdrop-filter:blur(2px); transition:opacity .25s; } .chats-final-stage .overlay-scrim.show { opacity:1; pointer-events:auto; } .chats-final-stage .sheet { font-family:var(--font-popup); position:fixed; left:0; right:0; bottom:0; width:100%; max-width:400px; margin:0 auto; background:rgba(255,255,255,.94); backdrop-filter:blur(24px); border-radius:20px 20px 0 0; padding:12px 20px calc(24px + var(--app-safe-bottom)); transform:translateY(105%); transition:transform .3s cubic-bezier(.3,.9,.3,1); z-index:31; max-height:82dvh; overflow-y:auto; } .chats-final-stage .sheet.show { transform:translateY(0); } .chats-final-stage .sheet .grip { width:38px; height:4px; border-radius:2px; background:rgba(140,155,150,.3); margin:0 auto 14px; } .chats-final-stage .sheet h3 { font-size:16px; font-weight:700; margin:0 0 12px; } .chats-final-stage .catlist .crow { width:100%; display:flex; align-items:center; gap:13px; padding:12px 8px; border:0; border-radius:14px; background:transparent; cursor:pointer; text-align:left; } .chats-final-stage .catlist .crow:active { background:var(--accent-soft); } .chats-final-stage .catlist .ci { width:40px; height:40px; border-radius:13px; display:flex; align-items:center; justify-content:center; flex:none; color:#fff; font-size:18px; } .chats-final-stage .catlist .cn { font-weight:600; font-size:16px; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .chats-final-stage .catlist .cc { font-size:12px; color:var(--ink-faint); font-weight:500; max-width:110px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .chats-final-stage .catlist .cchev { width:16px; height:16px; opacity:.4; flex:none; } .chats-final-stage .catlist .cchev svg { width:16px; height:16px; } .chats-final-stage .catlist .backrow { display:flex; align-items:center; gap:8px; border:0; background:transparent; color:var(--ink-soft); font-weight:600; font-size:14px; margin-bottom:8px; cursor:pointer; } .chats-final-stage .catlist .backrow svg { width:17px; height:17px; } /* Строка категории + колонка стрелок порядка справа. Стрелки вынесены из .crow, потому что .crow сама кнопка (открывает уровень), а вложенная кнопка в кнопку — невалидная разметка. */ .chats-final-stage .catlist .crow-wrap { display:flex; align-items:center; gap:2px; } .chats-final-stage .catlist .crow-wrap .crow { flex:1; min-width:0; } .chats-final-stage .catlist .dest-ord-col { display:flex; flex-direction:column; gap:2px; flex:none; } .chats-final-stage .catlist .dest-ord { display:flex; align-items:center; justify-content:center; width:26px; height:22px; border-radius:7px; color:var(--ink-faint); cursor:pointer; } .chats-final-stage .catlist .dest-ord:active { background:rgba(140,155,150,.16); color:var(--accent); } .chats-final-stage .catlist .dest-ord svg { width:14px; height:14px; } /* Поиск по чатам и категориям в шторке выбора. */ .chats-final-stage .catlist .dest-search { display:flex; align-items:center; gap:8px; height:42px; padding:0 12px; margin-bottom:8px; border:1.5px solid var(--line); border-radius:14px; background:rgba(255,255,255,.6); } .chats-final-stage .catlist .dest-search-ico { display:flex; flex:none; color:var(--ink-faint); } .chats-final-stage .catlist .dest-search-ico svg { width:16px; height:16px; } .chats-final-stage .catlist .dest-search input { flex:1; min-width:0; border:0; background:transparent; outline:none; font-family:inherit; font-size:14px; color:var(--ink); } /* «До этого: <чат>, <время>» живёт подписью под кнопкой получателя, а не отдельной строкой над полем ввода: там она перехватывала внимание в момент, когда мысль надо успеть записать. Отдельной кнопкой (а не текстом внутри .qc-dest), потому что действия разные: сама кнопка открывает выбор получателя, подпись — открывает тот чат. */ .chats-final-stage .qc-actions .qc-dest-col { display:flex; flex-direction:column; align-items:flex-end; gap:1px; margin-left:auto; min-width:0; } /* margin-left:auto перенесён с .qc-mic на колонку: два auto-отступа в одном ряду поделили бы свободное место пополам и получатель уехал бы в середину. */ .chats-final-stage .qc-actions .qc-dest-col + .qc-mic { margin-left:8px; } .chats-final-stage .qc-last { max-width:100%; padding:2px 2px 1px; border:0; background:transparent; color:var(--ink-faint); font-family:inherit; font-size:10px; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; } .chats-final-stage .qc-last:active { color:var(--accent); } .chats-final-stage .empty-state { text-align:center; padding:20px; color:var(--ink-faint); font-size:13.5px; } .chats-final-stage .ctx-menu, .chats-final-stage .plus-pop { font-family:var(--font-popup); position:fixed; z-index:38; background:rgba(255,255,255,.97); backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,.8); border-radius:16px; box-shadow:0 12px 30px rgba(20,30,25,.2); padding:6px; min-width:206px; max-width:260px; display:none; } .chats-final-stage .plus-pop { width:230px; max-width:calc(100% - 24px); } .chats-final-stage .ctx-menu.show, .chats-final-stage .plus-pop.show { display:block; } .chats-final-stage .ctx-item { width:100%; display:flex; align-items:center; gap:11px; padding:10px; border:0; background:transparent; font-size:14px; border-radius:10px; cursor:pointer; color:var(--ink); text-align:left; } .chats-final-stage .ctx-item:active { background:rgba(140,155,150,.12); } .chats-final-stage .ctx-item.danger { color:var(--overdue); } .chats-final-stage .ctx-item.disabled { color:var(--ink-faint); cursor:default; opacity:.68; } .chats-final-stage .ctx-item.danger .ci-svg { color:var(--overdue); } .chats-final-stage .ctx-item .ci-svg { width:18px; height:18px; flex:none; color:var(--ink-soft); display:flex; } .chats-final-stage .ctx-item .ci-svg svg { width:18px; height:18px; } .chats-final-stage .ctx-item .ci-txt { flex:1; display:flex; flex-direction:column; line-height:1.2; } .chats-final-stage .ctx-item .ci-hint { font-size:11.5px; font-weight:500; color:var(--ink-faint); margin-top:2px; } .chats-final-stage .modal-back { position:fixed; inset:0; background:rgba(35,38,43,.34); backdrop-filter:blur(3px); z-index:44; display:none; align-items:center; justify-content:center; padding:20px; } .chats-final-stage .modal-back.show { display:flex; } .chats-final-stage .modal-card { font-family:var(--font-popup); width:100%; max-width:340px; background:rgba(255,255,255,.97); backdrop-filter:blur(24px); border-radius:20px; padding:20px; box-shadow:0 24px 60px rgba(20,30,25,.28); max-height:82dvh; overflow-y:auto; } .chats-final-stage .modal-card h3 { font-size:16px; font-weight:700; margin:0 0 14px; } .chats-final-stage .field-row { display:flex; gap:10px; align-items:center; margin-bottom:14px; } .chats-final-stage .emoji-btn { width:52px; height:52px; border-radius:16px; border:1.5px solid var(--line); background:var(--glass); font-size:24px; cursor:pointer; flex:none; display:flex; align-items:center; justify-content:center; } /* .emoji-btn задуман под