/* «Личка» в духе Telegram для iOS 27 (жидкое стекло): три колонки на компьютере, лента-пузыри, плотный список чатов.
   Базовые контролы (кнопки, поля, таблицы, диалоги) — из tokens.css/components.css; здесь — свои цвета и каркас. */
:root { --text-body: 14px; --sidebar-width: 220px; --rail-width: 64px; --list-width: 360px; --tg-blue: #007aff; --tg-blue-tint: rgba(0,122,255,.12); --tg-bg: #ffffff; --tg-side: #f2f2f7; --tg-text: #000; --tg-grey: #8e8e93; --tg-sep: rgba(60,60,67,.14); --tg-field: #efeff4; --tg-in: #ffffff; --tg-out: #effdde; --tg-in-meta: #8d8d93; --tg-out-meta: #4fae4e; --tg-bubble-text: #000; --tg-chat-bg: linear-gradient(160deg, #d6e6f2 0%, #d9efd7 48%, #f1ead0 100%); --tg-day: rgba(0,0,0,.26); --tg-glass: rgba(247,247,247,.78); --tg-shadow: 0 1px 2px rgba(0,0,0,.08); --accent: var(--tg-blue); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --tg-bg: #000; --tg-side: #1c1c1d; --tg-text: #fff; --tg-grey: #8e8e93; --tg-sep: rgba(255,255,255,.12); --tg-field: #1c1c1e; --tg-in: #262628; --tg-out: #395a7f; --tg-in-meta: #8e8e93; --tg-out-meta: #b7d0ec; --tg-bubble-text: #fff; --tg-chat-bg: linear-gradient(160deg, #0b0f14 0%, #0e1a24 100%); --tg-day: rgba(255,255,255,.12); --tg-blue: #0a84ff; --tg-blue-tint: rgba(10,132,255,.18); }
}
:root[data-theme="dark"] { --tg-bg: #000; --tg-side: #1c1c1d; --tg-text: #fff; --tg-grey: #8e8e93; --tg-sep: rgba(255,255,255,.12); --tg-field: #1c1c1e; --tg-in: #262628; --tg-out: #395a7f; --tg-in-meta: #8e8e93; --tg-out-meta: #b7d0ec; --tg-bubble-text: #fff; --tg-chat-bg: linear-gradient(160deg, #0b0f14 0%, #0e1a24 100%); --tg-day: rgba(255,255,255,.12); --tg-blue: #0a84ff; --tg-blue-tint: rgba(10,132,255,.18); }
body { background: var(--tg-bg); color: var(--tg-text); }
mark { background: color-mix(in srgb, var(--c-yellow) 45%, transparent); color: inherit; border-radius: 2px; padding: 0 1px; }
/* ---------- Каркас ---------- */
.l-app { grid-template-rows: minmax(0, 1fr); }
.l-main { display: grid; grid-template-columns: var(--list-width) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); background: var(--tg-bg); box-shadow: none; }
.l-list, .l-feed { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.l-list { background: var(--tg-bg); box-shadow: inset -0.5px 0 0 var(--tg-sep); }
.l-list .m-toolbar, .l-feed-bar { flex: none; background: var(--tg-glass); box-shadow: 0 0.5px 0 var(--tg-sep); }
.l-feed { background: var(--tg-chat-bg); }
.l-menu { display: inline-flex; }
.l-back { display: none; flex: none; width: 32px; padding: 0; }
.l-backdrop { display: none; }
/* ---------- Боковая панель (меню Telegram Desktop, сворачивается до рейки) ---------- */
.l-sidebar { min-height: 0; background: var(--tg-side); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset -0.5px 0 0 var(--tg-sep); padding: 10px 8px; }
.l-sidebar .m-sidebar__brand { gap: 10px; padding: 6px 8px 14px; font-size: 16px; }
.l-brand { width: 30px; height: 30px; border-radius: 50%; background: var(--tg-blue); color: #fff; display: grid; place-items: center; font-weight: 700; flex: none; }
.l-sidebar .m-sidebar__section { color: var(--tg-grey); }
.l-sidebar .m-sidebar__item { height: 36px; border-radius: 10px; gap: 12px; padding: 0 10px; color: var(--tg-text); }
.l-sidebar .m-sidebar__item svg { width: 22px; height: 22px; flex: none; color: var(--icon-color); stroke-width: 1.75; }
.l-sidebar .m-sidebar__item[aria-current="page"] { background: var(--tg-blue-tint); color: var(--tg-blue); }
.l-sidebar .m-sidebar__count { color: var(--tg-grey); }
.l-chlogo { position: relative; width: 22px; height: 22px; border-radius: 50%; background: var(--badge); display: grid; place-items: center; flex: none; }
.l-chlogo__st { position: absolute; right: -3px; bottom: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--badge); box-shadow: 0 0 0 1.5px var(--tg-side); }
.l-side-bottom { margin-top: auto; display: grid; gap: 8px; padding-top: 12px; }
.l-theme { width: 100%; }
.l-theme button { flex: 1; padding: 0 4px; }
.l-who { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 4px; font-size: var(--text-callout); color: var(--tg-text); }
.l-who form { margin: 0; }
.l-who .m-btn { height: 26px; padding: 0 8px; color: var(--tg-grey); gap: 6px; }
@media (min-width: 761px) {
  html[data-sidebar="collapsed"] .l-app { grid-template-columns: var(--rail-width) minmax(0, 1fr); }
  html[data-sidebar="collapsed"] .l-sidebar { padding: 10px 6px; align-items: center; }
  html[data-sidebar="collapsed"] .l-sidebar .m-sidebar__brand { padding: 4px 0 12px; justify-content: center; }
  html[data-sidebar="collapsed"] .l-sidebar .m-sidebar__brand > span:not(.l-brand), html[data-sidebar="collapsed"] .l-sidebar .m-sidebar__section, html[data-sidebar="collapsed"] .l-sidebar .m-sidebar__item > span:not(.l-chlogo), html[data-sidebar="collapsed"] .l-sidebar .m-sidebar__count, html[data-sidebar="collapsed"] .l-theme, html[data-sidebar="collapsed"] .l-who b, html[data-sidebar="collapsed"] .l-who .m-btn span { display: none; }
  html[data-sidebar="collapsed"] .l-sidebar .m-sidebar__item { width: 44px; height: 44px; justify-content: center; padding: 0; margin: 2px auto; }
  html[data-sidebar="collapsed"] .l-who { justify-content: center; }
}
/* ---------- Список чатов ---------- */
.l-list .m-toolbar { height: auto; min-height: 52px; flex-wrap: wrap; row-gap: 6px; padding: 8px 12px; }
.l-list .m-toolbar__title { font-size: 20px; font-weight: 700; }
.l-lsearch { width: 100%; order: 10; position: relative; }
.l-lsearch input[type="search"] { height: 36px; background: var(--tg-field); color: var(--tg-text); padding-right: 96px; }
.l-lsearch svg { left: 10px; }
.l-summary { display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: center; padding: 5px 16px; font-size: var(--text-subhead); color: var(--tg-grey); text-decoration: none; box-shadow: inset 0 -0.5px 0 var(--tg-sep); }
.l-summary:hover { color: var(--tg-text); }
.l-sum__legend i, .l-sum__item i { font-style: normal; color: var(--tg-grey); }
.l-sum__item { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.l-sum__item b { color: var(--tg-text); font-variant-numeric: tabular-nums; }
.l-sum__item i::before, .l-sum__legend i::before { content: "/ "; }
.l-chats { padding: 0 0 80px; }
.l-chat { display: grid; grid-template-columns: 50px minmax(0, 1fr) auto auto; align-items: center; gap: 0 12px; padding: 8px 12px 8px 10px; color: var(--tg-text); text-decoration: none; position: relative; }
.l-chat::after { content: ""; position: absolute; left: 72px; right: 0; bottom: 0; height: 0.5px; background: var(--tg-sep); }
.l-chat:hover { background: color-mix(in srgb, var(--tg-text) 4%, transparent); }
.l-chat[aria-current="page"] { background: var(--tg-blue); color: #fff; }
.l-chat[aria-current="page"]::after { display: none; }
.l-chat[aria-current="page"] .l-chat__last, .l-chat[aria-current="page"] time, .l-chat[aria-current="page"] .l-chat__flags, .l-chat[aria-current="page"] .l-chat__sender, .l-chat[aria-current="page"] .l-kind { color: rgba(255,255,255,.8); }
.l-chat[aria-current="page"] .l-chat__new { background: #fff; color: var(--tg-blue); }
.l-chat .l-ava { width: 50px; height: 50px; font-size: 17px; }
.l-chat__main { min-width: 0; display: grid; gap: 2px; }
.l-chat__top { display: flex; align-items: baseline; gap: 5px; min-width: 0; }
.l-chat__top .l-kind { align-self: center; }
.l-chat__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 15px; }
.l-chat__flags { font-size: var(--text-caption); color: var(--tg-grey); display: inline-flex; gap: 2px; align-items: center; }
.l-chat__top time { font-size: 12px; color: var(--tg-grey); font-variant-numeric: tabular-nums; white-space: nowrap; }
.l-chat__last { font-size: 13.5px; color: var(--tg-grey); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.l-chat__sender { color: var(--tg-text); }
.l-chat__new { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--tg-blue); color: #fff; font-size: 12px; font-weight: 600; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.l-chat__new--mark { min-width: 10px; height: 10px; padding: 0; margin-right: 4px; background: var(--c-orange); }
.l-kind { display: inline-flex; color: var(--tg-grey); margin-right: 1px; }
.l-kind svg { width: 13px; height: 13px; stroke-width: 2; }
.l-kind--group { color: var(--c-indigo); }
.l-kind--channel { color: var(--c-orange); }
.l-flag { display: inline-flex; vertical-align: -2px; }
.l-flag svg { width: 12px; height: 12px; }
.l-flag--fav svg { color: var(--c-yellow); fill: var(--c-yellow); }
.l-flag--work svg { color: var(--c-brown); }
/* Аватары с мини-логотипом канала */
.l-ava { position: relative; overflow: visible; }
.l-ava img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.l-ava__ch { position: absolute; border-radius: 50%; background: var(--badge, var(--c-gray)); box-shadow: 0 0 0 2px var(--tg-bg); display: grid; place-items: center; }
.l-chat[aria-current="page"] .l-ava__ch { box-shadow: 0 0 0 2px var(--tg-blue); }
/* Нижняя стеклянная панель (телефон) */
.l-tabbar { display: none; }
/* ---------- Шапка чата ---------- */
.l-feed-bar { -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); gap: 6px; }
.l-feed-bar .l-ava { width: 36px; height: 36px; font-size: 13px; flex: none; }
.l-hbtn { margin: 0; }
.l-hbtn .m-btn { color: var(--tg-blue); background: transparent; box-shadow: none; }
.l-hbtn .m-btn.is-on { color: var(--c-yellow); }
.l-hbtn .m-btn.is-on svg { fill: currentColor; }
.l-hbtn--work .m-btn.is-on { color: var(--c-brown); }
.l-msearch { width: 180px; }
.l-msearch input { background: var(--tg-field); color: var(--tg-text); }
/* ---------- Лента: пузыри ---------- */
.l-msgs { padding: 8px 12px 10px; }
.l-more { display: flex; margin: 0 auto 8px; color: var(--tg-blue); }
.l-day { position: sticky; top: 6px; z-index: 1; display: flex; justify-content: center; margin: 6px 0 8px; pointer-events: none; }
.l-day span { font-size: 12.5px; font-weight: 600; color: #fff; background: var(--tg-day); padding: 3px 10px; border-radius: 999px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
/* служебные события («Аня вступила в группу») и начало комментариев — плашкой по центру, как дата */
.l-svc, .l-cmtmark { display: flex; justify-content: center; margin: 6px 12px; text-align: center; }
.l-svc span, .l-cmtmark span { font-size: 12.5px; font-weight: 500; line-height: 1.35; color: #fff; background: var(--tg-day); padding: 3px 10px; border-radius: 14px; max-width: 100%; overflow-wrap: anywhere; }
.l-cmtmark span { font-weight: 600; }
/* «N комментариев» под постом канала */
.l-cmt { display: flex; align-items: center; gap: 8px; margin: 4px -2px 0; padding: 7px 2px 2px; border-top: .5px solid color-mix(in srgb, currentColor 18%, transparent); color: var(--tg-blue); font-size: 14px; font-weight: 500; text-decoration: none; }
.l-cmt svg { width: 17px; height: 17px; flex: none; }
.l-cmt span { flex: 1; }
.l-cmt i { font-style: normal; font-size: 18px; opacity: .6; }
.l-msg { display: flex; align-items: flex-end; gap: 6px; margin: 1px 0; position: relative; }
.l-msg--first { margin-top: 6px; }
.l-msg--out { justify-content: flex-end; }
.l-msg__ava { width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 12px; font-weight: 600; color: #fff; background: var(--avatar, var(--c-indigo)); overflow: hidden; }
.l-msg__ava img { width: 100%; height: 100%; object-fit: cover; }
.l-msg__ava--empty { background: transparent; }
.l-bubble { position: relative; padding: 6px 10px 5px; border-radius: 17px; background: var(--tg-in); color: var(--tg-bubble-text); box-shadow: var(--tg-shadow); font-size: 15px; line-height: 1.33; word-break: normal; }
.l-msg--out .l-bubble { background: var(--tg-out); }
.l-msg--in.l-msg--last .l-bubble { border-bottom-left-radius: 5px; }
.l-msg--out.l-msg--last .l-bubble { border-bottom-right-radius: 5px; }
.l-bubble__who { font-size: 13.5px; font-weight: 600; margin-bottom: 1px; }
.l-fwd { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--tg-blue); margin-bottom: 2px; }
.l-fwd svg { width: 14px; height: 14px; stroke-width: 2; }
.l-msg--out .l-fwd { color: var(--tg-out-meta); }
.l-reply { display: grid; border-left: 2.5px solid var(--tg-blue); padding: 1px 0 1px 7px; margin: 2px 0 5px; font-size: 13px; line-height: 1.25; border-radius: 2px; }
.l-reply b { color: var(--tg-blue); font-weight: 600; }
.l-reply span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tg-bubble-text); }
.l-msg--out .l-reply { border-color: var(--tg-out-meta); }
.l-msg--out .l-reply b { color: var(--tg-out-meta); }
.l-bubble__text { white-space: pre-wrap; }
.l-bubble__text--meta { text-align: right; line-height: 1; }
.l-bubble__meta { float: right; margin: 6px -2px -2px 10px; font-size: 11.5px; color: var(--tg-in-meta); white-space: nowrap; line-height: 1; }
.l-bubble__text--meta .l-bubble__meta { float: none; margin: 2px 0 0; display: inline-block; }
.l-msg--out .l-bubble__meta { color: var(--tg-out-meta); }
.l-msg--del .l-bubble__text { text-decoration: line-through; color: var(--tg-grey); }
.l-files { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px -4px 4px; }
.l-ph img { display: block; max-width: min(300px, 100%); height: auto; border-radius: 12px; }
.l-ph--sticker img { max-width: 140px; }
.l-ph--video { position: relative; display: inline-block; }
.l-ph--video > svg { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; translate: -50% -50%; fill: #fff; color: #fff; filter: drop-shadow(0 1px 4px rgba(0,0,0,.6)); }
.l-ph__cap { position: absolute; left: 8px; top: 8px; padding: 2px 7px; border-radius: 999px; background: rgba(0,0,0,.5); color: #fff; font-size: 11.5px; }
.l-vid, .l-file { display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; background: color-mix(in srgb, var(--tg-blue) 10%, transparent); color: var(--tg-bubble-text); text-decoration: none; font-size: 13.5px; }
.l-vid svg, .l-file svg { width: 22px; height: 22px; stroke-width: 1.75; color: var(--tg-blue); flex: none; }
.l-vid svg { fill: var(--tg-blue); }
.l-media { vertical-align: 1px; --badge: var(--c-gray); }
/* Действия над сообщением: при наведении (на телефоне — по касанию) */
.l-msg__acts { display: none; position: absolute; top: -26px; right: 8px; width: max-content; white-space: nowrap; gap: 2px; padding: 3px; border-radius: 10px; background: var(--tg-glass); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 2px 10px rgba(0,0,0,.14); z-index: 2; }
.l-msg--in .l-msg__acts { right: auto; left: 46px; }
.l-msg:hover .l-msg__acts, .l-msg:focus-within .l-msg__acts, .l-msg.is-open .l-msg__acts { display: inline-flex; }
.l-msg__acts button { height: 22px; padding: 0 8px; border: 0; border-radius: 7px; background: transparent; font: 500 12px/1 var(--font-sans); color: var(--tg-text); cursor: default; }
.l-msg__acts button:hover { background: var(--tg-blue-tint); color: var(--tg-blue); }
.l-notice { flex: none; padding: 4px 14px; font-size: var(--text-callout); color: var(--tg-grey); background: var(--tg-glass); box-shadow: inset 0 0.5px 0 var(--tg-sep); }
.l-notice--err { color: var(--c-red); }
/* ---------- Поле ввода ---------- */
.l-composer { position: relative; flex: none; display: grid; gap: 4px; padding: 8px 10px; background: var(--tg-glass); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); }
.l-composer--off { text-align: center; font-size: var(--text-callout); color: var(--tg-grey); padding: 12px; }
.l-composer__row { display: flex; }
.l-composer__attach { width: 36px; height: 36px; display: grid; place-items: center; color: var(--tg-grey); flex: none; border-radius: 50%; }
.l-composer__attach:hover { color: var(--tg-blue); }
.l-composer__attach svg { width: 22px; height: 22px; stroke-width: 1.75; }
.l-composer__attach input { display: none; }
.l-composer__input { flex: 1; max-height: 160px; padding: 8px 14px; border: 0.5px solid var(--tg-sep); background: var(--tg-bg); color: var(--tg-text); font: 15px/1.3 var(--font-sans); resize: none; }
.l-composer__input:focus { outline: none; border-color: var(--tg-blue); }
.l-composer__send { width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--tg-blue); color: #fff; display: grid; place-items: center; flex: none; cursor: default; }
.l-composer__send svg { width: 20px; height: 20px; stroke-width: 2.25; }
.l-composer__send:disabled { opacity: .5; }
.l-composer__ctx { display: flex; align-items: center; gap: 8px; font-size: var(--text-callout); color: var(--tg-blue); padding-left: 44px; }
.l-composer__ctx span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.l-composer__files { font-size: var(--text-callout); padding-left: 44px; color: var(--tg-grey); }
/* ---------- Окно просмотра ---------- */
.l-viewer { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; display: grid; place-items: center; color: #fff; }
.l-viewer:not([open]) { display: none; }
.l-viewer::backdrop { background: rgba(0,0,0,.84); }
.l-viewer__box { position: relative; display: inline-flex; flex-direction: column; align-items: center; max-width: calc(100vw - 48px); max-height: calc(100vh - 48px); }
.l-viewer__body img, .l-viewer__body video { display: block; max-width: calc(100vw - 48px); max-height: calc(100vh - 88px); width: auto; height: auto; object-fit: contain; border-radius: 10px; }
.l-viewer__close { position: absolute; top: -14px; right: -14px; z-index: 2; width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(20,20,22,.9); color: #fff; font: 20px/30px var(--font-sans); cursor: default; box-shadow: 0 0 0 1.5px rgba(255,255,255,.6), 0 2px 10px rgba(0,0,0,.5); }
.l-viewer__bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 8px 0 0; color: #fff; }
.l-viewer__bar .m-btn { color: #fff; }
.l-viewer__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-callout); }
/* ---------- Окно «Переслать в…» ---------- */
.l-fwddlg { border: 0; padding: 0; width: min(440px, calc(100vw - 24px)); max-height: min(80vh, 640px); border-radius: 16px; background: var(--tg-bg); color: var(--tg-text); box-shadow: var(--shadow-sheet); }
.l-fwddlg::backdrop { background: rgba(0,0,0,.35); }
.l-fwd__form { display: flex; flex-direction: column; max-height: min(80vh, 640px); }
.l-fwd__head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 8px; }
.l-fwd__search { width: auto; margin: 0 12px 8px; }
.l-fwd__search input { background: var(--tg-field); color: var(--tg-text); }
.l-fwd__list { flex: 1; min-height: 0; overflow: auto; padding: 0 8px; }
.l-fwd__row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; cursor: default; }
.l-fwd__row:hover { background: color-mix(in srgb, var(--tg-text) 5%, transparent); }
.l-fwd__row:has(input:checked) { background: var(--tg-blue); color: #fff; }
.l-fwd__row input { margin: 0; }
.l-fwd__row .l-ava { width: 32px; height: 32px; font-size: 12px; }
.l-fwd__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.l-fwd__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 16px 12px; font-size: var(--text-subhead); }
/* ---------- Состояние сборщиков, вход ---------- */
.l-status td { white-space: normal; }
.l-err { color: var(--c-red); max-width: 420px; }
.l-how { margin-top: 16px; color: var(--label-2); max-width: 720px; }
.l-how summary { cursor: default; font-weight: 500; color: var(--label-1); }
.l-login-page { display: grid; place-items: center; padding: 16px; }
.l-login { width: min(360px, 100%); padding: 24px; display: grid; gap: 12px; }
.l-login .m-subhead { margin: -8px 0 8px; }
.l-login .m-input { height: var(--control-height-lg); }
/* ---------- Планшет: список или чат ---------- */
@media (max-width: 1000px) {
  .l-main { grid-template-columns: 1fr; }
  .l-app[data-pane="chat"] .l-list { display: none; }
  .l-app[data-pane="list"] .l-feed { display: none; }
  .l-back { display: inline-flex; color: var(--tg-blue); }
  .l-msearch { width: 150px; }
  .l-bubble { max-width: 82%; }
}
/* ---------- Телефон: как Telegram для iOS ---------- */
@media (max-width: 760px) {
  :root { --text-body: 15px; }
  .l-backdrop { position: fixed; inset: 0; z-index: 44; }
  .l-app:not([data-sidebar="open"]) .l-backdrop { display: none; }
  .l-app[data-sidebar="open"] .l-backdrop { display: block; }
  .l-list .m-toolbar { position: sticky; top: 0; -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); }
  .l-list .m-toolbar__title { font-size: 22px; }
  .l-menu { display: none; }
  .l-chat { grid-template-columns: 56px minmax(0, 1fr) auto auto; padding: 8px 14px 8px 10px; }
  .l-chat .l-ava { width: 56px; height: 56px; font-size: 19px; }
  .l-chat__title { font-size: 16px; }
  .l-chat__last { font-size: 14.5px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .l-chat::after { left: 80px; }
  .l-tabbar a, .l-tabbar button { flex: 1; display: grid; place-items: center; gap: 2px; border: 0; background: transparent; color: var(--tg-grey); text-decoration: none; font: 500 10.5px/1 var(--font-sans); }
  .l-tabbar svg { stroke-width: 1.75; }
  .l-feed-bar { justify-content: flex-start; }
  .l-msearch { display: none; }
  .l-feed-bar .l-hbtn .m-btn { width: 30px; padding: 0; flex: none; }
  .l-feed-bar .l-ava { width: 32px; height: 32px; }
  .l-bubble { max-width: 84%; font-size: 16px; }
  .l-msgs { padding: 8px 8px 10px; }
  .l-msg__acts { top: auto; bottom: -28px; }
  .l-viewer__close { top: 6px; right: 6px; }
  .l-status th:nth-child(n+6), .l-status td:nth-child(n+6) { display: none; }
}
/* ---------- Люди: карточка, переключатель каналов, объединённые строки ---------- */
[data-card] { cursor: pointer; }
.l-switch { display: flex; gap: 6px; padding: 6px 12px; background: var(--tg-glass); box-shadow: 0 0.5px 0 var(--tg-sep); flex: none; overflow-x: auto; }
.l-switch a { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px; border-radius: 999px; font-size: 13px; color: var(--tg-text); text-decoration: none; background: color-mix(in srgb, var(--tg-text) 6%, transparent); }
.l-switch a[aria-current="page"] { background: var(--tg-blue); color: #fff; }
.l-ava__ch--inline { position: static; width: 16px; height: 16px; box-shadow: none; display: inline-grid; }
.l-switch a[aria-current="page"] .l-ava__ch--inline { box-shadow: 0 0 0 1.5px rgba(255,255,255,.7); }
.l-chat__chs { display: inline-flex; gap: 2px; margin-right: 2px; }
.l-chat__chs .l-ava__ch--inline { width: 14px; height: 14px; }
.l-chat__chs svg { width: 9px; height: 9px; }
.l-carddlg { border: 0; padding: 0; width: min(420px, calc(100vw - 24px)); max-height: 88vh; border-radius: 16px; background: var(--tg-bg); color: var(--tg-text); box-shadow: var(--shadow-sheet); overflow: auto; }
.l-carddlg::backdrop { background: rgba(0,0,0,.35); }
.l-card { position: relative; padding: 20px 16px 16px; display: grid; gap: 10px; }
.l-card__close { top: 8px; right: 8px; }
.l-card__head { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
.l-card__ava { width: 64px; height: 64px; font-size: 22px; overflow: hidden; }
.l-card__ava img { width: 100%; height: 100%; object-fit: cover; }
.l-card__label { font-size: 12px; font-weight: 600; color: var(--tg-grey); text-transform: uppercase; letter-spacing: .04em; margin-top: 6px; }
.l-card__row { display: flex; align-items: center; gap: 8px; padding: 6px 0; box-shadow: inset 0 -0.5px 0 var(--tg-sep); font-size: 14px; }
.l-card__person { font-size: 14px; }
.l-card__note { color: var(--tg-grey); white-space: pre-wrap; margin-top: 4px; }
.l-card__chats { display: grid; gap: 2px; }
.l-card__chat { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; color: var(--tg-text); text-decoration: none; font-size: 14px; }
.l-card__chat:hover { background: color-mix(in srgb, var(--tg-text) 5%, transparent); }
.l-card__chat > span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.l-card__actions { display: grid; gap: 8px; margin-top: 6px; }
.l-card__act { display: flex; gap: 6px; margin: 0; }
.l-card__act .m-input { flex: 1; }
.l-people__import { margin: 0; }
.l-people__id { display: inline-flex; align-items: center; gap: 4px; margin-right: 8px; color: var(--tg-text); text-decoration: none; font-size: 13px; }
.l-icloud { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 8px 12px; margin-bottom: 12px; border-radius: 10px; background: color-mix(in srgb, var(--tg-text) 5%, transparent); font-size: 13.5px; }
.l-filters { display: flex; flex: none; }
.l-filters a { text-decoration: none; }
.l-hbtn--archive .m-btn.is-on { color: var(--c-orange); }
.l-push { justify-content: flex-start; gap: 8px; color: var(--tg-grey); height: 30px; padding: 0 8px; }
.l-push[data-on="1"] { color: var(--tg-blue); }
.l-push svg { width: 18px; height: 18px; }
@media (min-width: 761px) {
  html[data-sidebar="collapsed"] .l-push span { display: none; }
  html[data-sidebar="collapsed"] .l-push { width: 44px; justify-content: center; margin: 0 auto; }
}
.l-fetch { display: inline-block; margin: 0; }
.l-fetch button { position: relative; display: inline-flex; align-items: center; gap: 8px; border: 0; padding: 6px 8px; border-radius: 10px; background: color-mix(in srgb, var(--tg-blue) 10%, transparent); color: var(--tg-bubble-text); font: 13.5px var(--font-sans); cursor: default; }
.l-fetch--img button { padding: 0; background: transparent; }
.l-fetch--img img { display: block; max-width: min(260px, 100%); height: auto; border-radius: 12px; filter: saturate(.85); }
.l-fetch--img svg { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; translate: -50% -50%; color: #fff; stroke-width: 2; filter: drop-shadow(0 1px 4px rgba(0,0,0,.6)); }
.l-fetch:not(.l-fetch--img) svg { width: 20px; height: 20px; color: var(--tg-blue); }
.l-fetch:not(.l-fetch--img) .l-ph__cap { position: static; background: transparent; color: inherit; padding: 0; font-size: 13.5px; }
/* ---------- Настройки, статистика ---------- */
.l-settings__tabs { padding: 8px 16px 0; }
.l-settings .m-group__box { background: var(--tg-bg); box-shadow: 0 0 0 0.5px var(--tg-sep); }
.l-settings .m-group__title { color: var(--tg-grey); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.l-row { display: flex; gap: 12px; padding: 10px 14px; align-items: flex-start; }
.l-row + .l-row { box-shadow: inset 0 0.5px 0 var(--tg-sep); }
.l-row__logo { width: 32px; height: 32px; margin-top: 2px; }
.l-row__logo svg { width: 18px; height: 18px; }
.l-row__logo--plain { background: color-mix(in srgb, var(--tg-blue) 12%, transparent); color: var(--tg-blue); border-radius: 50%; display: grid; place-items: center; flex: none; }
.l-row__main { flex: 1; min-width: 0; display: grid; gap: 4px; font-size: 14.5px; }
.l-row__act { margin-top: 4px; }
.l-code { font: 12px var(--font-mono); background: color-mix(in srgb, var(--tg-text) 6%, transparent); padding: 3px 6px; border-radius: 6px; overflow-wrap: anywhere; }
.l-bars__box { padding: 12px 14px 8px; }
.l-bars { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 8px; }
.l-bars__name { width: 90px; flex: none; }
.l-bars__row { flex: 1; display: flex; align-items: flex-end; gap: 3px; height: 48px; }
.l-bars__row i { flex: 1; background: var(--badge); border-radius: 3px 3px 0 0; opacity: .85; transition: opacity var(--dur-fast); }
.l-bars__row i:hover { opacity: 1; }
.l-bars__axis { display: flex; justify-content: space-between; margin-left: 100px; font-size: 11px; color: var(--tg-grey); }
/* Потянуть, чтобы обновить */
.l-ptr { height: 0; overflow: hidden; display: grid; place-items: center; transition: height .15s var(--ease); flex: none; }
.l-ptr span { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--tg-grey); border-top-color: transparent; opacity: .5; transition: transform .2s var(--ease), opacity .2s; }
.l-ptr.is-armed span { opacity: 1; border-color: var(--tg-blue); border-top-color: transparent; transform: rotate(180deg); }
.l-ptr.is-loading span { animation: l-spin .8s linear infinite; border-color: var(--tg-blue); border-top-color: transparent; opacity: 1; }
@keyframes l-spin { to { transform: rotate(360deg); } }
/* Анимации и «жидкое стекло» */
.l-chat, .l-sidebar .m-sidebar__item, .l-filters a, .l-switch a, .l-tabbar a, .l-tabbar button, .m-btn, .l-composer__send, .l-chat__new { transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.l-composer__send:active, .l-tabbar a:active, .l-tabbar button:active, .l-hbtn .m-btn:active { transform: scale(.92); }
.l-chat:active { background: color-mix(in srgb, var(--tg-text) 8%, transparent); }
.l-viewer[open], .l-fwddlg[open], .l-carddlg[open] { animation: l-pop var(--dur-base) var(--ease); }
@keyframes l-pop { from { opacity: 0; transform: scale(.96) translateY(6px); } to { opacity: 1; transform: none; } }
.l-msg { animation: l-fade .25s var(--ease) both; }
@keyframes l-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.l-list .m-toolbar, .l-feed-bar, .l-composer, .l-filters, .l-switch, .l-tabbar { box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 0.5px 0 var(--tg-sep); }
.l-filters, .l-switch { background: var(--tg-glass); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); }
.l-composer { box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 0.5px 0 var(--tg-sep); }
:root[data-theme="dark"] .l-list .m-toolbar, :root[data-theme="dark"] .l-feed-bar, :root[data-theme="dark"] .l-composer, :root[data-theme="dark"] .l-filters, :root[data-theme="dark"] .l-switch, :root[data-theme="dark"] .l-tabbar { box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0.5px 0 var(--tg-sep); }
/* Отступы под вырез и жест «домой» на iPhone в режиме приложения */
@media (display-mode: standalone) {
  .l-list .m-toolbar, .l-feed-bar { padding-top: calc(8px + env(safe-area-inset-top)); }
  .l-feed-bar { height: auto; min-height: calc(var(--toolbar-height) + env(safe-area-inset-top)); }
  .l-composer { padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
  .l-tabbar { bottom: calc(10px + env(safe-area-inset-bottom)); }
  .l-chats { padding-bottom: calc(90px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .l-msg, .l-viewer[open], .l-fwddlg[open], .l-carddlg[open] { animation: none; }
}
/* Служебные страницы — на всю ширину, не в две колонки ленты */
.l-main > .l-page { grid-column: 1 / -1; display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.l-page .m-toolbar { flex: none; background: var(--tg-glass); }
.l-page .m-content { flex: 1; min-height: 0; overflow: auto; }
.l-page .l-filters { flex: none; }
.l-settings .m-group, .l-settings > p { max-width: 860px; }
/* ---------- Правки по замечаниям (25.10, день) ---------- */
:root { --tg-page: #f2f2f7; --tg-card: #ffffff; --toolbar-height: 56px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --tg-page: #000; --tg-card: #1c1c1e; --tg-glass: rgba(28,28,30,.62); }
}
:root[data-theme="dark"] { --tg-page: #000; --tg-card: #1c1c1e; --tg-glass: rgba(28,28,30,.62); }
/* 1. Шапки: выше, кнопки по центру, воздух до разделителя */
.l-list .m-toolbar, .l-feed-bar, .l-page .m-toolbar { min-height: 56px; padding: 8px 12px; align-items: center; }
.l-feed-bar .m-btn, .l-page .m-toolbar .m-btn, .l-list .m-toolbar .m-btn { height: 36px; min-width: 36px; }
.l-feed-bar .l-hbtn .m-btn { padding: 0 8px; }
.l-page .m-toolbar .l-back { display: inline-flex; }
@media (min-width: 1001px) {
  .l-page .m-toolbar .l-back:not(.l-back--always) { display: none; }
}
/* 5. Служебные страницы: фон страницы и карточек как в Telegram */
.l-page .m-content--padded { background: var(--tg-page); }
.l-page .m-group__box, .l-settings .m-group__box { background: var(--tg-card); box-shadow: none; }
.l-page .m-table thead th { background: var(--tg-card); }
.l-page .m-toolbar__title { font-size: 17px; }
/* 4. Нижняя панель: вплотную к краю, жидкое стекло, на всех экранах телефона */
@media (max-width: 760px) {
  .l-tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; height: auto; border-radius: 0; padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); background: var(--tg-glass); -webkit-backdrop-filter: blur(30px) saturate(190%); backdrop-filter: blur(30px) saturate(190%); box-shadow: inset 0 0.5px 0 var(--tg-sep), inset 0 1px 0 rgba(255,255,255,.35); }
  .l-tabbar svg { width: 26px; height: 26px; }
  .l-app[data-pane="chat"] .l-tabbar { display: none; }
  .l-page .m-content--padded { padding: 16px 16px calc(80px + env(safe-area-inset-bottom)); }
  /* 3. Поиск как в Telegram: во всю ширину под заголовком, прячется при прокрутке вниз */
  .l-list .m-toolbar { flex-wrap: wrap; row-gap: 8px; padding: 8px 12px 10px; transition: padding var(--dur-base) var(--ease); }
  .l-lsearch { flex: 0 0 100%; width: 100%; order: 10; transition: height var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease), margin var(--dur-base) var(--ease); height: 36px; overflow: hidden; }
  .l-list .m-toolbar.is-collapsed .l-lsearch { height: 0; opacity: 0; margin-top: -8px; }
  .l-filters { padding: 8px 12px 6px; }
}
/* ---------- Как в Telegram на iPhone (25.10, вечер): без линий-разделителей, плавающая панель, сегментные фильтры ---------- */
.l-filters { gap: 2px; margin: 6px 12px 8px; padding: 3px; border-radius: 999px; background: color-mix(in srgb, var(--tg-text) 7%, var(--tg-glass)); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); box-shadow: inset 0 0.5px 0 rgba(255,255,255,.12); }
.l-filters a { flex: 1 1 0; text-align: center; padding: 7px 10px; font-size: 15px; font-weight: 500; color: var(--tg-text); background: transparent; border-radius: 999px; white-space: nowrap; }
.l-filters a[aria-current="page"] { background: color-mix(in srgb, var(--tg-text) 14%, transparent); color: var(--tg-text); box-shadow: inset 0 0.5px 0 rgba(255,255,255,.18); }
:root[data-theme="light"] .l-filters a[aria-current="page"] { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .l-filters a[aria-current="page"] { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
}
.l-page .l-filters { margin: 10px 16px 4px; }
@media (max-width: 760px) {
  /* ни одной линии между статус-баром, шапкой, поиском, фильтрами и списком */
  .l-list .m-toolbar, .l-list .m-toolbar.is-collapsed, .l-feed-bar, .l-page .m-toolbar, .l-switch, .l-composer, :root[data-theme="dark"] .l-list .m-toolbar, :root[data-theme="dark"] .l-feed-bar, :root[data-theme="dark"] .l-composer, :root[data-theme="dark"] .l-switch { box-shadow: none; border: 0; }
  .l-list .m-toolbar { padding-bottom: 6px; }
  .l-list .m-toolbar.is-collapsed { padding-bottom: 4px; }
  .l-filters { margin-top: 2px; }
  /* нижняя панель — плавающая «таблетка» у самого края, как в Telegram iOS 26 */
  .l-tabbar, :root[data-theme="dark"] .l-tabbar { left: 12px; right: 12px; bottom: max(8px, calc(env(safe-area-inset-bottom) - 6px)); height: 62px; padding: 4px; -webkit-backdrop-filter: blur(30px) saturate(190%); backdrop-filter: blur(30px) saturate(190%); box-shadow: inset 0 0.5px 0 rgba(255,255,255,.22), 0 0 0 0.5px rgba(0,0,0,.12), 0 10px 30px rgba(0,0,0,.28); }
  .l-tabbar a, .l-tabbar button { padding: 5px 0 4px; font-size: 10.5px; }
  .l-tabbar [aria-current="page"] { color: var(--tg-blue); background: color-mix(in srgb, var(--tg-text) 12%, transparent); }
  .l-chats, .l-page .m-content { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .l-page .m-content--padded { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
}
@media (display-mode: standalone) and (max-width: 760px) {
  .l-tabbar { bottom: max(8px, calc(env(safe-area-inset-bottom) - 6px)); }
}
/* Голосовые (25.10): микрофон вместо «Отправить» при пустом поле, запись — красная кнопка и точка в строке контекста */
.l-composer__mic.is-rec { background: var(--c-red, #ff3b30); animation: l-rec-pulse 1.2s ease-in-out infinite; }
@keyframes l-rec-pulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--c-red, #ff3b30) 25%, transparent); } }
.l-rec { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c-red, #ff3b30); margin-right: 6px; vertical-align: middle; animation: l-rec-blink 1s steps(2) infinite; }
@keyframes l-rec-blink { 50% { opacity: .25; } }
/* iPhone: Safari увеличивает страницу при фокусе на поле со шрифтом меньше 16px — поэтому на телефоне поля ввода 16px */
@media (max-width: 760px) {
  .l-composer__input, .l-lsearch input[type="search"], .l-page input, .l-page textarea, .l-page select, .m-select { font-size: 16px; }
}
/* Статус исходящих (25.10): галочки как в WhatsApp — ✓ отправлено, ✓✓ доставлено, ✓✓ синие прочитано */
.l-ticks { display: inline-flex; align-items: center; vertical-align: -2px; margin-left: 3px; color: var(--tg-grey); }
.l-ticks svg { width: 14px; height: 14px; }
.l-ticks svg + svg { margin-left: -9px; }
.l-ticks--read { color: var(--tg-blue); }
.l-msg--out .l-ticks { color: var(--tg-out-meta); }
.l-msg--out .l-ticks--read { color: var(--tg-blue); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .l-msg--out .l-ticks--read { color: #fff; }
}
:root[data-theme="dark"] .l-msg--out .l-ticks--read { color: #fff; }
.l-chat__last .l-ticks { margin: 0 3px 0 0; }
/* 25.10 вечер: значки каналов крупнее и с настоящими логотипами; без белых линий и на ноутбуке; предпросмотр документов; переход по ответу */
.l-ava__ch { width: 18px; height: 18px; right: -3px; bottom: -3px; }
.l-ava__ch svg { width: 12px; height: 12px; }
.l-chat .l-ava__ch svg { width: 12px; height: 12px; }
.l-chlogo svg { width: 14px; height: 14px; }
.l-list .m-toolbar, .l-feed-bar, .l-composer, .l-switch, .l-page .m-toolbar, .l-notice, :root[data-theme="dark"] .l-list .m-toolbar, :root[data-theme="dark"] .l-feed-bar, :root[data-theme="dark"] .l-composer, :root[data-theme="dark"] .l-switch { box-shadow: none; }
.l-viewer__doc { width: min(92vw, 960px); height: 84vh; border: 0; border-radius: 10px; background: #fff; }
.l-file[data-view] { cursor: pointer; }
a.l-reply { text-decoration: none; cursor: pointer; }
a.l-reply:hover { background: color-mix(in srgb, var(--tg-blue) 10%, transparent); }
.l-msg.is-hl .l-bubble { animation: l-hl 1.6s ease-out; }
@keyframes l-hl { 0%, 40% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--tg-blue) 60%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; } }
.l-viewer__box { will-change: transform; touch-action: pan-y; }
/* ---------- ИИ: сводка в чате, дела, настройки ---------- */
.l-flag--hot { font-size: 12px; }
.l-ai { flex: none; max-height: 46vh; overflow: auto; padding: 10px 14px 12px; background: var(--tg-card); box-shadow: inset 0 -0.5px 0 var(--tg-sep); display: grid; gap: 8px; }
.l-ai__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.l-ai__head form { margin: 0; }
.l-ai__sum { margin: 0; font-size: var(--text-callout); line-height: 1.4; white-space: pre-wrap; }
.l-ai__tasks { display: grid; }
.l-ai__none { padding: 4px 0; }
.l-ai__add { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.l-ai__add .m-input { flex: 1 1 180px; }
.l-ai__date { flex: 0 0 auto; }
.l-task { display: grid; grid-template-columns: 64px 1fr auto; gap: 10px; align-items: center; padding: 7px 0; }
.l-tasks .l-task { padding: 9px 14px; }
.l-task--closed .l-task__main { text-decoration: line-through; color: var(--tg-grey); }
.l-task__main { min-width: 0; display: grid; gap: 2px; font-size: 14.5px; }
.l-task__due { font-size: 12.5px; color: var(--tg-grey); white-space: nowrap; }
.l-task__due--today { color: var(--c-orange); font-weight: 600; }
.l-task__due--over { color: var(--c-red); font-weight: 600; }
.l-task__who { padding: 0 6px; border-radius: 8px; background: var(--tg-glass); margin-right: 4px; }
.l-task__act { display: flex; gap: 2px; margin: 0; }
.l-task__act .m-btn { color: var(--tg-grey); background: transparent; box-shadow: none; }
.l-task__act .m-btn:first-child { color: var(--c-green); }
.l-ai__num { width: 84px; text-align: right; }
.l-ai__form .l-row { align-items: center; }
.l-ai__form .m-select { max-width: 260px; }
.l-tabset .l-row__main { flex: 1; min-width: 0; }
.l-tabset .m-select { flex: none; width: auto; max-width: 60%; }
.l-ai__save { padding: 4px 0 20px; }
@media (max-width: 760px) {
  .l-task { grid-template-columns: 56px 1fr auto; }
  .l-ai { max-height: 40vh; }
}
/* ---------- Телефон: без размытия (backdrop-filter в Safari дёргает прокрутку), фон почти сплошной ---------- */
@media (max-width: 760px) {
  .l-tabbar, :root[data-theme="dark"] .l-tabbar, .l-filters, .l-switch, .l-list .m-toolbar, .l-feed-bar, .l-composer, .l-page .m-toolbar, .l-ai, .l-list .m-toolbar.is-collapsed, :root[data-theme="dark"] .l-list .m-toolbar, :root[data-theme="dark"] .l-feed-bar, :root[data-theme="dark"] .l-composer { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .l-list .m-toolbar, .l-feed-bar, .l-composer, .l-page .m-toolbar, .l-switch { background: var(--tg-bg); }
  .l-tabbar, :root[data-theme="dark"] .l-tabbar { background: color-mix(in srgb, var(--tg-card) 96%, transparent); }
  .l-filters { background: color-mix(in srgb, var(--tg-text) 8%, var(--tg-bg)); }
  .l-msg { animation: none; }
  .l-chats, .l-msgs { overscroll-behavior: contain; }
}
/* ---------- Дела: карточки, доска, матрица ---------- */
.l-tasks .l-task, .l-ai .l-task { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "who acts" "text acts" "meta acts"; gap: 4px 10px; padding: 10px 14px; margin: 0; align-items: start; }
.l-task + .l-task { box-shadow: inset 0 0.5px 0 var(--tg-sep); }
.l-task__who { grid-area: who; display: inline-flex; align-items: center; gap: 8px; color: var(--tg-text); text-decoration: none; font-size: 13px; font-weight: 600; min-width: 0; }
.l-task__who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.l-task__ava { --size: 24px; width: 24px; height: 24px; font-size: 10px; }
.l-task__text { grid-area: text; font-size: 14.5px; line-height: 1.35; }
.l-task__meta { grid-area: meta; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; color: var(--tg-grey); }
.l-task__acts { grid-area: acts; display: flex; flex-direction: column; gap: 2px; }
.l-task__due input { border: 0; background: color-mix(in srgb, var(--tg-text) 7%, transparent); border-radius: 8px; padding: 3px 6px; font: inherit; font-size: 12px; color: inherit; }
.l-task__due--today input { color: var(--c-orange); font-weight: 600; }
.l-task__due--over input { color: var(--c-red); font-weight: 600; }
.l-task__q { font-size: 11px; }
.l-task__tog { border: 0; border-radius: 999px; padding: 3px 9px; font: inherit; font-size: 12px; background: color-mix(in srgb, var(--tg-text) 7%, transparent); color: var(--tg-grey); cursor: pointer; }
.l-task__tog.is-on { background: color-mix(in srgb, var(--tg-blue) 18%, transparent); color: var(--tg-blue); font-weight: 600; }
.l-task__scope { color: var(--tg-text); }
.l-task__owner { font-size: 12px; }
.l-task__acts .m-btn { color: var(--tg-grey); background: transparent; box-shadow: none; }
.l-task__acts .l-task__ok { color: var(--c-green); }
.l-task--closed .l-task__text { text-decoration: line-through; color: var(--tg-grey); }
.l-board { display: grid; grid-template-columns: repeat(3, minmax(240px, 1fr)); gap: 12px; align-items: start; }
.l-matrix { grid-template-columns: repeat(2, minmax(240px, 1fr)); }
.l-board__col { background: var(--tg-card); border-radius: 14px; padding: 10px 10px 6px; min-height: 120px; transition: box-shadow var(--dur-fast); }
.l-board__col.is-over { box-shadow: 0 0 0 2px var(--tg-blue) inset; }
.l-matrix__q { box-shadow: inset 4px 0 0 var(--badge); }
.l-board__cards { display: grid; gap: 8px; }
.l-board .l-task, .l-tasks .l-board .l-task { background: var(--tg-bg); border-radius: 12px; box-shadow: 0 0 0 0.5px var(--tg-sep); grid-template-columns: 1fr; grid-template-areas: "who" "text" "meta" "acts"; cursor: grab; }
.l-board .l-task__acts { flex-direction: row; }
.l-task.is-drag { opacity: .4; }
/* Доска и матрица: страница не прокручивается, у каждого этапа (четверти) — своя прокрутка */
.l-tasks--board, .l-page .l-tasks--board { display: flex; flex-direction: column; overflow: hidden; }
.l-tasks--board .l-board { flex: 1; min-height: 0; align-items: stretch; position: relative; }
.l-tasks--board .l-matrix { grid-template-rows: repeat(2, minmax(0, 1fr)); }
.l-tasks--board .l-board__col { display: flex; flex-direction: column; min-height: 0; padding-bottom: 0; }
.l-tasks--board .l-board__cards { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; align-content: start;
  padding: 2px 2px 10px; margin: 0 -2px; scrollbar-width: thin; }
.l-task--ghost { visibility: visible !important; }
.l-task.is-busy { opacity: .6; transition: opacity var(--dur-fast); }
@media (max-width: 760px) {
  .l-board { grid-template-columns: repeat(3, 82vw); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
  .l-matrix { grid-template-columns: repeat(2, 82vw); }
  .l-board__col { scroll-snap-align: start; }
  .l-tasks .l-task, .l-ai .l-task { grid-template-columns: 1fr; grid-template-areas: "who" "text" "meta" "acts"; }
  .l-task__acts { flex-direction: row; }
}
/* ---------- Шапка чата: пузырь с именем и фото, меню «⋯» ---------- */
.l-menu3 { position: relative; }
.l-menu3 summary { list-style: none; cursor: pointer; font-size: 20px; line-height: 1; letter-spacing: 1px; }
.l-menu3 summary::-webkit-details-marker { display: none; }
.l-menu3__list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 230px; padding: 6px; border-radius: 14px; background: var(--tg-card); box-shadow: 0 0 0 0.5px var(--tg-sep), 0 12px 36px rgba(0,0,0,.28); display: grid; }
.l-menu3__list .l-hbtn .m-btn, .l-menu3__list a.l-hbtn.m-btn { width: 100%; justify-content: flex-start; gap: 10px; padding: 8px 10px; border-radius: 10px; color: var(--tg-text); text-decoration: none; }   /* пункты-ссылки — как пункты-кнопки */
.l-menu3__list .l-hbtn .m-btn.is-on { color: var(--tg-blue); }
.l-menu3__list .l-hbtn__t { display: inline !important; }
.l-menu3__sub { padding: 8px 10px 2px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--tg-grey); }
/* правило тега дел в меню чата: ряд меток, ширину меню не раздвигает */
.l-tagrule { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 10px 8px; width: 0; min-width: 100%; box-sizing: border-box; }
.l-tagrule__opt { border: 0; background: none; padding: 0; border-radius: 999px; cursor: pointer; opacity: .55; font: inherit; }
.l-tagrule__opt.is-on { opacity: 1; box-shadow: 0 0 0 2px var(--tg-blue); }
.l-tagrule__ai { padding: 2px 9px; font-size: 12px; color: var(--tg-grey); box-shadow: inset 0 0 0 1px var(--tg-sep); }
.l-tagrule__ai.is-on { color: var(--tg-blue); }
/* ---------- Свайп по строке чата ---------- */
.l-swipe { position: relative; overflow: hidden; }
.l-swipe .l-chat { position: relative; z-index: 1; background: var(--tg-bg); transition: transform .2s var(--ease); }
.l-swipe .l-chat[aria-current="page"] { background: var(--tg-blue); }
.l-chat__tray { position: absolute; top: 0; right: 0; bottom: 0; display: flex; z-index: 0; }
.l-chat__tray button { border: 0; font: inherit; white-space: nowrap; }
@media (hover: hover) {
  .l-chat__tray { display: none; }
}
/* ---------- Папки ---------- */
.l-folder { padding: 10px 14px; display: grid; gap: 8px; }
.l-folder__form { display: grid; gap: 8px; }
.l-folder__title { max-width: 320px; }
.l-folder__row { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: 14px; }
.l-folder__chk { display: inline-flex; gap: 5px; align-items: center; }
.l-folder__chats { display: grid; gap: 4px; padding-top: 6px; box-shadow: inset 0 0.5px 0 var(--tg-sep); }
.l-folder__chat { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; }
.l-folder__add { display: flex; gap: 6px; margin: 4px 0 0; }
.l-folder__add .m-input { flex: 1; }
.l-folder__tools { display: flex; gap: 10px; justify-content: space-between; padding-top: 6px; }
.l-folder__tools form { margin: 0; display: flex; gap: 4px; }
.l-folder__intro { margin: 0 0 10px; }
.l-task__src { color: var(--tg-blue) !important; }
/* ---------- Раунд 8: круглый поиск, папки в строке фильтров, пузырьки свайпа, лист выбора, карточка страницей ---------- */
.l-lsearch input[type="search"] { border-radius: 999px; padding-left: 36px; }
.l-filters--scroll { overflow-x: auto; scrollbar-width: none; justify-content: flex-start; }
.l-filters--scroll::-webkit-scrollbar { display: none; }
.l-filters--scroll a { flex: 0 0 auto; padding-left: 14px; padding-right: 14px; }
.l-filters__n { margin-left: 6px; font-size: 11.5px; padding: 0 6px; border-radius: 999px; background: var(--tg-blue); color: #fff; vertical-align: 1px; }
.l-chat__tray { align-items: center; background: transparent; }
.l-chat__tray button { display: grid; justify-items: center; gap: 2px; padding: 0; border-radius: 50%; line-height: 1; color: #fff; background: var(--c-orange); }
.l-chat__tray button i { display: inline-flex; }
.l-swipe.is-open .l-chat__tray button:nth-child(2) { transition-delay: .04s; }
.l-swipe.is-open .l-chat__tray button:nth-child(3) { transition-delay: .08s; }
.l-sheet { border: 0; padding: 0; background: transparent; max-width: 100vw; width: 100vw; margin: auto 0 0; }
.l-sheet__box { margin: 0 10px calc(10px + env(safe-area-inset-bottom)); display: grid; }
.l-sheet__title { padding: 10px 14px 4px; text-align: center; font-size: 13px; color: var(--tg-grey); background: var(--tg-card); border-radius: 14px 14px 0 0; }
.l-sheet__btn { border: 0; padding: 14px; font: inherit; font-size: 17px; color: var(--tg-blue); background: var(--tg-card); }
.l-sheet__btn--danger { color: var(--c-red); }
.l-sheet__title + .l-sheet__btn { border-radius: 0; }
.l-sheet__box .l-sheet__btn:nth-last-child(2) { border-radius: 0 0 14px 14px; }
.l-sheet__cancel { border-radius: 14px; font-weight: 600; margin-top: 2px; }
@media (min-width: 761px) {
  .l-sheet { width: 360px; margin: auto; }
  .l-sheet__box { margin: 0; }
}
.l-contact .l-card { max-width: 640px; margin: 0 auto; }
.l-contact .l-card__close { display: none; }
.l-card__search { margin: 6px 0 4px; }
.l-card__findres { display: grid; gap: 4px; }
.l-card__find { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; padding: 6px 0; }
.l-card__findname { display: grid; min-width: 0; }
.l-card__findname small { color: var(--tg-grey); }
.l-card__none { padding: 6px 0; }
/* ---------- Раунд 9 ---------- */
.l-filters--scroll a, .l-settings__tabs a { flex: 1 0 auto; }
.l-settings__tabs { overflow-x: auto; scrollbar-width: none; justify-content: flex-start; }
.l-settings__tabs::-webkit-scrollbar { display: none; }
.l-settings__tabs a { white-space: nowrap; }
.l-chat__tray button { width: 64px; height: 64px; font-size: 10px; transform: scale(var(--p, 0)); opacity: var(--p, 0); transition: transform .12s ease-out, opacity .12s ease-out; }
.l-swipe.is-open .l-chat__tray button { transform: scale(1); opacity: 1; }
.l-swipe.is-open .l-chat__tray button:nth-child(2), .l-swipe.is-open .l-chat__tray button:nth-child(3) { transition-delay: 0s; }
.l-notice--ok { color: var(--c-green); }
/* ---------- Раунд 10: шапка, профиль и свайп как в Telegram ---------- */
.l-hbub { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; flex: none; color: var(--tg-blue); background: color-mix(in srgb, var(--tg-text) 9%, transparent); text-decoration: none; }
.l-hbub svg { width: 22px; height: 22px; }
.l-hbub--ava { overflow: hidden; padding: 0; }
.l-hbub--ava .l-ava { width: 40px; height: 40px; font-size: 14px; }
.l-hbub--ava .l-ava__ch { display: none; }
.l-feed-bar--tg { display: flex; align-items: center; gap: 8px; padding: 6px 10px; }
.l-titlepill { flex: 1 1 auto; min-width: 0; display: grid; justify-items: center; text-align: center; padding: 5px 14px; border-radius: 999px; background: color-mix(in srgb, var(--tg-text) 9%, transparent); color: var(--tg-text); text-decoration: none; line-height: 1.15; }
.l-titlepill .m-toolbar__title { margin: 0; font-size: 16px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.l-titlepill .m-subhead { font-size: 12.5px; color: var(--tg-grey); display: block !important; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.l-feed-bar--tg .l-msearch { flex: 0 0 100%; order: 10; }
.l-feed-bar--tg .l-msearch:not(.is-on) { display: none; }
.l-feed-bar--q { flex-wrap: wrap; }
.l-prof__bar { background: transparent; box-shadow: none; padding: 6px 10px; }
.l-prof { max-width: 640px; margin: 0 auto; padding: 0 12px calc(20px + env(safe-area-inset-bottom)); display: grid; gap: 12px; }
.l-prof__hero { display: grid; justify-items: center; gap: 4px; padding: 6px 0 4px; text-align: center; }
.l-prof__ava { width: 100px; height: 100px; font-size: 34px; overflow: hidden; }
.l-prof__ava img { width: 100%; height: 100%; object-fit: cover; }
.l-prof__name { margin: 8px 0 0; font-size: 26px; font-weight: 700; line-height: 1.1; }
.l-prof__sub { color: var(--tg-grey); font-size: 15px; }
.l-prof__acts { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.l-prof__btn { display: grid; justify-items: center; gap: 4px; padding: 12px 4px 10px; border: 0; border-radius: 14px; background: var(--tg-card); color: var(--tg-blue); font: inherit; font-size: 12.5px; text-decoration: none; cursor: pointer; list-style: none; }
.l-prof__btn::-webkit-details-marker { display: none; }
.l-prof__btn svg { width: 24px; height: 24px; }
.l-prof__more { position: relative; }
.l-prof__more .l-menu3__list { right: 0; left: auto; }
.l-info { background: var(--tg-card); border-radius: 14px; overflow: hidden; display: grid; }
.l-info__row { display: grid; gap: 2px; padding: 11px 14px; font-size: 16px; }
.l-info__row + .l-info__row, .l-info__row + form, form + .l-info__row { box-shadow: inset 0 0.5px 0 var(--tg-sep); }
.l-info__row small { font-size: 13px; color: var(--tg-grey); }
.l-info__row a { color: var(--tg-blue); text-decoration: none; }
.l-info__row--ch { grid-auto-flow: column; justify-content: start; align-items: center; gap: 8px; font-size: 14px; }
.l-info__chat { grid-auto-flow: column; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; color: var(--tg-text) !important; }
.l-info__chat > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.l-info__act { margin: 0; }
.l-info__act .m-btn { justify-self: start; padding-left: 0; background: transparent; box-shadow: none; }
.l-info__col { gap: 6px; }
.l-info__label { font-size: 12.5px; font-weight: 600; color: var(--tg-grey); text-transform: uppercase; letter-spacing: .04em; padding: 6px 14px 0; }
.l-card__push { display: grid; gap: 6px; padding-top: 8px; }
.l-tray__it { display: grid; justify-items: center; transform: scale(var(--p, 0)); opacity: var(--p, 0); transition: transform .12s ease-out, opacity .12s ease-out; }
.l-swipe.is-open .l-tray__it { transform: scale(1); opacity: 1; }
.l-tray__it span { color: var(--tg-grey); white-space: nowrap; }
.l-chat__tray button, .l-swipe.is-open .l-chat__tray button { transform: none; opacity: 1; transition: none; display: grid; place-items: center; }
.l-chat__tray button[data-act="hide"] { background: #d62d2d; }
.l-chat__tray button[data-act="archive"] { background: #6e7f8d; }
.l-chat__tray button[data-act="mute"] { background: #d18a1a; }
.l-prof__more summary.l-prof__btn { font-size: 12.5px; }
/* ---------- Раунд 11: ширина, свайп, шапка, значки, вкладки профиля, голосовые ---------- */
.l-msgs { overflow-x: hidden; }
.l-msg { max-width: 100%; min-width: 0; }
.l-bubble { max-width: min(86%, 520px); min-width: 0; overflow-wrap: anywhere; }
.l-bubble__text { overflow-wrap: anywhere; }
.l-vid, .l-file { max-width: 100%; }
.l-vid > span, .l-file > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.l-chat__tray { gap: 6px; padding: 0 8px; }
.l-chat__tray button, .l-swipe.is-open .l-chat__tray button { width: 62px; height: 50px; border-radius: 16px; }
.l-chat__tray button svg { width: 22px; height: 22px; }
.l-tray__it { gap: 2px; }
.l-tray__it span { font-size: 10px; }
.l-hmenu { position: relative; flex: none; }
.l-hmenu summary { list-style: none; font-size: 20px; letter-spacing: 1px; cursor: pointer; }
.l-hmenu summary::-webkit-details-marker { display: none; }
.l-hmenu .l-menu3__list { right: 0; }
.l-titlepill--one { padding: 10px 14px; }
.l-ava__ch--title { position: static; display: inline-grid; width: 16px; height: 16px; vertical-align: -3px; margin-left: 2px; box-shadow: none; }
.l-ava__ch, .l-chlogo, .l-ava__ch--inline { background: transparent !important; }
.l-ava__ch svg, .l-chlogo svg, .l-ava__ch--inline svg { width: 100%; height: 100%; }
.l-prof__tabs { margin: 2px 0 8px; }
.l-prof__none { padding: 10px 14px; }
.l-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.l-grid__it { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 4px; background: var(--tg-card); }
.l-grid__it img { width: 100%; height: 100%; object-fit: cover; display: block; }
.l-grid__it svg { position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; translate: -50% -50%; fill: #fff; color: #fff; filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)); }
.l-vm { display: flex; align-items: center; gap: 10px; }
.l-vm__play { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--tg-blue); color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; }
.l-vm__play svg { width: 20px; height: 20px; fill: #fff; color: #fff; margin-left: 2px; }
.l-vm.is-playing .l-vm__play svg { margin-left: 0; }
.l-vm__body { flex: 1; min-width: 0; display: grid; gap: 3px; }
.l-vm__bars { --pos: 0%; display: flex; align-items: center; cursor: pointer; }
.l-vm__bars i { border-radius: 2px; }
.l-vm__t { font-size: 12.5px; color: var(--tg-grey); }
.l-vm__name { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.l-msg--out .l-vm__play { background: #fff; color: var(--tg-blue); }
.l-msg--out .l-vm__play svg { fill: var(--tg-blue); color: var(--tg-blue); }
.l-msg--out .l-vm__bars i { background: rgba(255,255,255,.65); }
.l-msg--out .l-vm__t { color: rgba(255,255,255,.8); }
.l-call { display: flex; align-items: center; gap: 10px; padding: 4px 2px; }
.l-call svg { width: 26px; height: 26px; color: var(--c-green); flex: none; }
.l-call--missed svg { color: var(--c-red); }
.l-call span { display: grid; line-height: 1.2; }
.l-call small { color: var(--tg-grey); }
.l-info__chat, .l-info__chat span, .l-grid__it { text-decoration: none; }
/* ---------- Раунд 12: фон чата на весь экран, панели поверх, реакции, меню сообщения ---------- */
.l-feed { position: relative; background-color: var(--tg-chat-bg); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260' fill='none' stroke='%23ffffff' stroke-opacity='.07' stroke-width='1.6' stroke-linecap='round'><circle cx='40' cy='40' r='12'/><path d='M120 30l4 9 10 1-7 7 2 10-9-5-9 5 2-10-7-7 10-1z'/><path d='M200 50c-8-10-22 0-10 10l10 9 10-9c12-10-2-20-10-10z'/><path d='M50 130h30M65 115v30'/><circle cx='150' cy='140' r='18'/><path d='M140 140h20M150 130v20'/><path d='M220 130l-12 20h24z'/><path d='M30 220c10-12 30-12 40 0'/><path d='M120 200l6 12 12 2-9 8 2 12-11-6-11 6 2-12-9-8 12-2z'/><circle cx='210' cy='215' r='9'/><path d='M190 240q20-18 40 0'/></svg>"); background-size: 260px 260px; }
:root[data-theme="light"] .l-feed { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260' fill='none' stroke='%23000000' stroke-opacity='.06' stroke-width='1.6' stroke-linecap='round'><circle cx='40' cy='40' r='12'/><path d='M120 30l4 9 10 1-7 7 2 10-9-5-9 5 2-10-7-7 10-1z'/><path d='M200 50c-8-10-22 0-10 10l10 9 10-9c12-10-2-20-10-10z'/><path d='M50 130h30M65 115v30'/><circle cx='150' cy='140' r='18'/><path d='M140 140h20M150 130v20'/><path d='M220 130l-12 20h24z'/><path d='M30 220c10-12 30-12 40 0'/><path d='M120 200l6 12 12 2-9 8 2 12-11-6-11 6 2-12-9-8 12-2z'/><circle cx='210' cy='215' r='9'/><path d='M190 240q20-18 40 0'/></svg>"); }
.l-feed-bar--tg, .l-composer, .l-switch { background: color-mix(in srgb, var(--tg-bg) 72%, transparent); }
.l-feed-bar--tg .l-hbub, .l-feed-bar--tg .l-titlepill { background: color-mix(in srgb, var(--tg-card) 92%, transparent); box-shadow: 0 1px 6px rgba(0,0,0,.25); }
@media (max-width: 760px) {
  .l-feed-bar--tg { position: absolute; top: 0; left: 0; right: 0; z-index: 6; background: transparent; padding-top: calc(6px + env(safe-area-inset-top)); }
  .l-switch { position: absolute; left: 0; right: 0; z-index: 6; background: transparent; justify-content: center; }
  .l-switch a { background: color-mix(in srgb, var(--tg-card) 92%, transparent); box-shadow: 0 1px 6px rgba(0,0,0,.25); }
  .l-composer { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; background: transparent; }
  .l-composer > * { background: transparent; }
  .l-composer__input, .l-composer .m-btn, .l-composer__send, .l-composer__mic, .l-composer__attach { background: color-mix(in srgb, var(--tg-card) 94%, transparent); box-shadow: 0 1px 6px rgba(0,0,0,.25); }
  .l-feed:has(.l-ai) .l-msgs { padding-top: 8px; }
  .l-feed:has(.l-ai) .l-feed-bar--tg, .l-feed:has(.l-ai) .l-switch { position: static; background: var(--tg-bg); }
  .l-notice { position: relative; z-index: 5; }
}
.l-react { display: flex; flex-wrap: wrap; gap: 4px; padding: 2px 0 4px; }
.l-react__it { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border: 0; border-radius: 999px; font: inherit; font-size: 13px; background: color-mix(in srgb, var(--tg-blue) 16%, transparent); color: var(--tg-text); cursor: pointer; }
.l-react__it.is-me { background: var(--tg-blue); color: #fff; }
.l-msg--out .l-react__it { background: rgba(255,255,255,.22); color: #fff; }
.l-msg--out .l-react__it.is-me { background: #fff; color: var(--tg-blue); }
.l-react__it span { font-size: 12px; }
.l-msheet__re { display: flex; justify-content: space-between; gap: 2px; padding: 8px 10px; background: var(--tg-card); margin-bottom: 6px; }
.l-msheet__re button { border: 0; background: transparent; font-size: 26px; line-height: 1; padding: 4px; border-radius: 50%; cursor: pointer; }
.l-msheet__re button.is-me { background: color-mix(in srgb, var(--tg-blue) 25%, transparent); }
.l-msheet__list { display: grid; background: var(--tg-card); border-radius: 14px; overflow: hidden; }
.l-msheet__list .l-sheet__btn { text-align: left; padding: 13px 16px; font-size: 16px; color: var(--tg-text); }
.l-msheet__list .l-sheet__btn:first-child { box-shadow: none; }
.l-msheet__list .l-sheet__btn--danger { color: var(--c-red); }
.l-grid__it--lazy { display: grid; place-items: center; gap: 2px; color: var(--tg-grey); font-size: 11px; }
.l-grid__it--lazy svg { position: static; translate: none; width: 22px; height: 22px; filter: none; fill: none; color: var(--tg-grey); }
/* ---------- Раунд 13: цветные бейджи у аватаров, вкладки как в Telegram, композер, без меню по тапу ---------- */
.l-ava > .l-ava__ch, .l-ava__ch--b, .l-msg__ava .l-ava__ch { background: var(--badge, var(--c-gray)) !important; border-radius: 50%; }
.l-ava > .l-ava__ch svg, .l-ava__ch--b svg { width: 100%; height: 100%; padding: 1px; }
@media (hover: none) {
  .l-msg__acts { display: none !important; }
}
.l-prof__count { padding: 4px 14px 8px; font-size: 13px; color: var(--tg-grey); text-align: center; }
.l-grid__dur { position: absolute; right: 6px; bottom: 5px; font-size: 12px; font-weight: 600; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.l-fl { display: flex; align-items: center; gap: 12px; padding: 9px 12px; color: var(--tg-text); text-decoration: none; }
.l-fl + .l-fl { box-shadow: inset 0 0.5px 0 var(--tg-sep); }
.l-fl__thumb { flex: none; width: 48px; height: 48px; border-radius: 10px; background: color-mix(in srgb, var(--tg-text) 10%, transparent); display: grid; place-items: center; overflow: hidden; color: var(--tg-blue); }
.l-fl__thumb img { width: 100%; height: 100%; object-fit: cover; }
.l-fl__thumb svg { width: 24px; height: 24px; }
.l-fl__main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.l-fl__main b { font-weight: 600; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.l-fl__main small { color: var(--tg-grey); font-size: 14px; }
.l-vm--row { min-width: 0; max-width: none; gap: 12px; }
.l-vm--row .l-vm__play { width: 48px; height: 48px; background-size: cover; background-position: center; position: relative; }
.l-vm--row .l-vm__play[style] { background-color: transparent; }
.l-vm--row .l-vm__play[style]::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(0,0,0,.35); }
.l-vm--row .l-vm__play svg { position: relative; }
.l-vm--row .l-vm__t { color: var(--tg-grey); font-size: 14px; }
.l-link__tile { flex: none; width: 48px; height: 48px; border-radius: 12px; background: #ff9f0a; color: #fff; font-weight: 700; font-size: 22px; display: grid; place-items: center; }
.l-link__url { color: var(--tg-blue); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.l-fl.l-link .l-fl__main small { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.l-composer { overflow: hidden; }
.l-composer__row { align-items: center; gap: 10px; min-width: 0; }
.l-composer__row > * { min-width: 0; }
.l-composer__attach, .l-composer__send { width: 40px; height: 40px; }
.l-composer__input { min-height: 40px; height: 40px; border-radius: 20px; }
.l-composer__recbar { flex: 1; min-width: 0; height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 6px 0 12px; border-radius: 20px; background: color-mix(in srgb, var(--tg-card) 94%, transparent); font-size: 15px; }
.l-composer__recbar #recT { font-variant-numeric: tabular-nums; min-width: 40px; }
.l-composer__rechint { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tg-grey); font-size: 13px; }
.l-composer__rectext { flex: none; border: 0; border-radius: 14px; padding: 5px 11px; background: var(--tg-blue); color: #fff; font: inherit; font-size: 14px; font-weight: 600; }
.l-composer__reccancel { border: 0; background: transparent; color: var(--tg-grey); font-size: 22px; line-height: 1; padding: 0 6px; }
/* ---------- Раунд 14: голосовые в пузыре, ссылки, закреплённые/избранные/темы, кнопка вниз, панели как в Telegram ---------- */
.l-vm { min-width: 0; width: 300px; max-width: 100%; }
.l-vm__bars { background: none; -webkit-mask: none; overflow: hidden; }
.l-vm__bars i.is-on, .l-vm.is-playing .l-vm__bars i.is-on { background: var(--tg-blue); }
.l-msg--out .l-vm__bars i.is-on, .l-msg--out.is-playing .l-vm__bars i.is-on { background: #fff; }
.l-files:has(> .l-vm) { display: block; }
.l-bubble__text a { color: var(--tg-blue); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.l-msg--out .l-bubble__text a { color: #fff; }
.l-mark { font-style: normal; display: inline-grid; place-items: center; }
.l-mark svg { width: 12px; height: 12px; }
.l-mark--star { color: #f5a623; font-size: 11px; }
.l-pinbar { display: flex; align-items: center; gap: 6px; margin: 6px 10px 0; padding: 5px 6px 5px 12px; border-radius: 14px; background: var(--tg-pill); box-shadow: 0 1px 6px rgba(0,0,0,.18); }
.l-pinbar__msg { flex: 1; min-width: 0; display: grid; line-height: 1.25; text-decoration: none; color: var(--tg-text); border-left: 2px solid var(--tg-blue); padding-left: 8px; }
.l-pinbar__msg b { font-size: 13px; font-weight: 600; color: var(--tg-blue); }
.l-pinbar__msg small { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.l-pinbar__all { flex: none; width: 34px; height: 34px; display: grid; place-items: center; color: var(--tg-blue); text-decoration: none; font-size: 22px; line-height: 1; }
.l-pinbar__all svg { width: 20px; height: 20px; }
.l-pinbar--view .l-pinbar__msg { border-color: #f5a623; }
.l-down { position: absolute; right: 14px; bottom: 72px; z-index: 6; width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--tg-pill); color: var(--tg-blue); display: grid; place-items: center; box-shadow: 0 1px 6px rgba(0,0,0,.25); cursor: pointer; }
.l-down svg { width: 22px; height: 22px; }
.l-topicmark { display: flex; justify-content: center; margin: 8px 0 4px; }
.l-topicmark a { font-size: 12.5px; font-weight: 600; color: #fff; background: var(--tg-day); padding: 3px 10px; border-radius: 999px; text-decoration: none; }
.l-topic__dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.l-link__tile--star { background: #f5a623; }
.l-feed-bar--tg .l-hbub, .l-feed-bar--tg .l-titlepill, .l-switch a, .l-pinbar, .l-down { -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); }
@media (max-width: 760px) {
  /* Пузыри шапки: 36 px, вплотную под строкой состояния, отступ от краёв 14 px; снизу — 44 px, как в Telegram */
  .l-feed-bar--tg { padding: calc(3px + env(safe-area-inset-top)) 14px 6px; gap: 6px; min-height: 0; }
  .l-feed-bar--tg .l-hbub, .l-feed-bar--tg .l-titlepill, .l-switch a, .l-pinbar, .l-down { background: var(--tg-pill); box-shadow: 0 1px 4px rgba(0,0,0,.18); }
  .l-feed-bar--tg .l-hbub, .l-hbub--ava .l-ava { width: 36px; height: 36px; }
  .l-feed-bar--tg .l-hbub svg { width: 20px; height: 20px; }
  .l-titlepill { padding: 2px 12px; min-height: 36px; align-content: center; }
  .l-titlepill--one { padding: 7px 14px; }
  .l-titlepill .m-toolbar__title { font-size: 15.5px; }
  .l-titlepill .m-subhead { font-size: 12px; }
  .l-hmenu summary { font-size: 18px; }
  .l-switch { top: calc(45px + env(safe-area-inset-top)); padding: 4px 14px; }
  .l-pinbar { position: absolute; top: calc(47px + env(safe-area-inset-top)); left: 0; right: 0; z-index: 6; margin: 0 14px; }
  .l-feed:has(.l-switch) .l-pinbar { top: calc(85px + env(safe-area-inset-top)); }
  .l-msgs { padding-top: calc(54px + env(safe-area-inset-top)); }
  .l-feed:has(.l-switch) .l-msgs { padding-top: calc(92px + env(safe-area-inset-top)); }
  .l-feed:has(.l-pinbar) .l-msgs { padding-top: calc(104px + env(safe-area-inset-top)); }
  .l-feed:has(.l-switch):has(.l-pinbar) .l-msgs { padding-top: calc(142px + env(safe-area-inset-top)); }
  .l-composer { padding: 6px 14px max(10px, calc(env(safe-area-inset-bottom) - 12px)); }
  .l-composer__row { gap: 6px; }
  .l-composer__attach, .l-composer__send, .l-composer__mic { width: 44px; height: 44px; }
  .l-composer__attach svg { width: 24px; height: 24px; }
  .l-composer__send svg { width: 22px; height: 22px; }
  .l-composer__input, .l-composer__recbar { min-height: 44px; height: 44px; border-radius: 22px; border: 0; padding-left: 16px; }
  .l-composer__input, .l-composer__recbar, .l-composer__attach, .l-composer__send, .l-composer__mic { background: var(--tg-pill); box-shadow: 0 1px 4px rgba(0,0,0,.18); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); }
  .l-composer__send:not(.l-composer__mic) { color: #fff; }
  .l-msgs { padding-bottom: calc(66px + max(10px, calc(env(safe-area-inset-bottom) - 12px))); }
  .l-down { bottom: calc(66px + max(10px, calc(env(safe-area-inset-bottom) - 12px))); }
}
@media (max-width: 760px) {
  .l-feed-bar--tg { height: auto; }
}
.l-topics { justify-content: safe center; overflow-x: auto; scrollbar-width: none; }
.l-topics::-webkit-scrollbar { display: none; }
.l-topics a { white-space: nowrap; flex: none; }
@media (max-width: 760px) {
  .l-composer__attach, .l-composer__mic:not(.is-rec) { color: var(--tg-text); }
}
/* ---------- Раунд 15: голосовые внутри пузыря, список тем, без выделения текста, пузыри панелей видимые ---------- */
.l-files:has(> .l-vm) { margin: 2px 0 0; }
.l-vm { padding: 3px 4px 0 0; }
.l-vm__bars { gap: 2px; height: 28px; }
.l-vm__bars i { flex: 1 1 0; min-width: 2px; max-width: 4px; background: color-mix(in srgb, var(--tg-blue) 32%, transparent); }
.l-vm.is-playing .l-vm__bars i, .l-vm__bars:hover i { background: color-mix(in srgb, var(--tg-blue) 32%, transparent); }
.l-vm__bars i.is-on, .l-vm.is-playing .l-vm__bars i.is-on, .l-vm__bars:hover i.is-on { background: var(--tg-blue); }
.l-msg--out .l-vm__bars i, .l-msg--out .l-vm.is-playing .l-vm__bars i { background: rgba(255,255,255,.38); }
.l-msg--out .l-vm__bars i.is-on, .l-msg--out .l-vm.is-playing .l-vm__bars i.is-on { background: #fff; }
.l-bubble:has(.l-vm) { min-width: min(300px, 86%); }
@media (hover: none) {
  .l-bubble, .l-bubble * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
}
.l-topic { color: var(--tg-text); }
.l-topic__tile { flex: none; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 20px; }
.l-topic .l-fl__main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.l-topic__who { color: var(--tg-text); }
.l-topic__end { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; align-self: flex-start; }
.l-topic__end time { align-self: auto; }
.l-topic time { flex: none; font-size: 13px; color: var(--tg-grey); align-self: flex-start; padding-top: 2px; }
.l-topics-list .l-more { margin: 10px auto; }
:root { --tg-pill: rgba(255,255,255,.93); --tg-pill-line: rgba(0,0,0,.09); --tg-pill-hi: rgba(255,255,255,.9); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --tg-pill: rgba(66,66,70,.93); --tg-pill-line: rgba(255,255,255,.17); --tg-pill-hi: rgba(255,255,255,.14); }
}
:root[data-theme="dark"] { --tg-pill: rgba(66,66,70,.93); --tg-pill-line: rgba(255,255,255,.17); --tg-pill-hi: rgba(255,255,255,.14); }
.l-feed-bar--tg .l-hbub, .l-feed-bar--tg .l-titlepill, .l-switch a, .l-pinbar, .l-down, .l-composer__input, .l-composer__recbar, .l-composer__attach, .l-composer__mic { border: 0.5px solid var(--tg-pill-line); box-shadow: inset 0 1px 0 var(--tg-pill-hi), 0 2px 10px rgba(0,0,0,.28); }
.l-titlepill .m-toolbar__title { color: var(--tg-text); }
@media (max-width: 760px) {
  /* Safari на iPhone: без размытия (контент пузырей тускнеет), свой слой — чтобы лента не рисовалась поверх шапки */
  .l-feed-bar--tg .l-hbub, .l-feed-bar--tg .l-titlepill, .l-switch a, .l-pinbar, .l-down, .l-composer__input, .l-composer__recbar, .l-composer__attach, .l-composer__send, .l-composer__mic { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--tg-pill); }
  .l-composer__send:not(.l-composer__mic) { border-color: transparent; }
  .l-composer__mic.is-rec { border-color: transparent; }
  .l-feed-bar--tg, .l-switch, .l-pinbar, .l-down, .l-composer { transform: translateZ(0); }
}
/* ---------- Раунд 15б: iPhone рисовал ленту поверх шапки — лента в своём слое ниже панелей, без -webkit-overflow-scrolling ---------- */
.l-msgs { position: relative; z-index: 0; isolation: isolate; }
@media (max-width: 760px) {
  .l-chats, .l-msgs { -webkit-overflow-scrolling: auto; }
  .l-feed-bar--tg, .l-switch, .l-pinbar, .l-down, .l-composer { z-index: 10; }
  .l-feed-bar--tg, .l-switch, .l-pinbar, .l-down, .l-composer { will-change: auto; }
}
/* шапка/темы/закреплённое идут в разметке после ленты (iPhone), наверх — flex-порядком */
.l-feed-bar--tg { order: -3; }
.l-switch { order: -2; }
.l-pinbar { order: -1; }
.l-feed-bar--tg { flex-wrap: nowrap; }
.l-feed-bar--tg.l-feed-bar--q { flex-wrap: wrap; }
/* ---------- 15д: iPhone — пузыри шапки, темы и закреплённое поверх ленты, под ними размытая полоса (как в Telegram), снизу такая же; плашка даты сплошная ---------- */
@media (max-width: 760px) {
  .l-feed::before, .l-feed::after { content: ""; position: absolute; left: 0; right: 0; z-index: 9; pointer-events: none; background: color-mix(in srgb, var(--tg-bg) 72%, transparent); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); }
  .l-feed::before { top: 0; height: calc(54px + env(safe-area-inset-top)); }
  .l-feed:has(.l-switch)::before { height: calc(92px + env(safe-area-inset-top)); }
  .l-feed:has(.l-pinbar)::before { height: calc(104px + env(safe-area-inset-top)); }
  .l-feed:has(.l-switch):has(.l-pinbar)::before { height: calc(142px + env(safe-area-inset-top)); }
  .l-feed:has(.l-ai)::before { display: none; }
  .l-feed::after { bottom: 0; height: calc(60px + max(10px, calc(env(safe-area-inset-bottom) - 12px))); }
  .l-day span, .l-svc span, .l-cmtmark span { background: color-mix(in srgb, var(--tg-text) 42%, var(--tg-bg)); -webkit-backdrop-filter: none; backdrop-filter: none; }
  :root[data-theme="dark"] .l-day span, :root[data-theme="dark"] .l-svc span, :root[data-theme="dark"] .l-cmtmark span { background: color-mix(in srgb, var(--tg-text) 14%, var(--tg-bg)); }
}
@media (max-width: 760px) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .l-day span, :root:not([data-theme="light"]) .l-svc span, :root:not([data-theme="light"]) .l-cmtmark span { background: color-mix(in srgb, var(--tg-text) 14%, var(--tg-bg)); }
}
/* ---------- 15ж: веб-приложение с экрана «Домой» (iOS 26 размывает верх экрана системным стеклом, название и аватар тускнели);
   стекло отключается, если у верхнего края стоит position: fixed с фоном — шапка сама становится размытой полосой ---------- */
@media (display-mode: standalone) and (max-width: 760px) {
  .l-feed::before { display: none; }
  .l-feed .l-feed-bar--tg { position: fixed; top: 0; left: 0; right: 0; transform: none; will-change: auto; align-items: flex-start; box-sizing: border-box; min-height: calc(54px + env(safe-area-inset-top)); }
  .l-feed:has(.l-switch) .l-feed-bar--tg { min-height: calc(92px + env(safe-area-inset-top)); }
  .l-feed:has(.l-pinbar) .l-feed-bar--tg { min-height: calc(104px + env(safe-area-inset-top)); }
  .l-feed:has(.l-switch):has(.l-pinbar) .l-feed-bar--tg { min-height: calc(142px + env(safe-area-inset-top)); }
  .l-feed:has(.l-ai) .l-feed-bar--tg { position: static; min-height: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* ---------- 16: панели чата как в списке чатов — сверху сплошная полоса цвета страницы (как шапка списка), снизу без полосы,
   пузыри — стекло как у нижней «таблетки» списка; нижнее меню от боков на столько же, на сколько поле ввода от низа экрана ---------- */
@media (max-width: 760px) {
  .l-feed::before { background: var(--tg-bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .l-feed::after { display: none; }
  /* пузыри шапки на сплошной полосе — как сегменты фильтра в списке */
  .l-feed-bar--tg .l-hbub, .l-feed-bar--tg .l-titlepill, .l-switch a, .l-pinbar { -webkit-backdrop-filter: none; backdrop-filter: none; }
  /* нижние пузыри и кнопка «вниз» — стекло как у нижней панели списка */
  .l-composer__input, .l-composer__recbar, .l-composer__attach, .l-composer__mic, .l-down { background: var(--tg-glass); border: 0; -webkit-backdrop-filter: blur(30px) saturate(190%); backdrop-filter: blur(30px) saturate(190%); box-shadow: inset 0 0.5px 0 rgba(255,255,255,.22), 0 0 0 0.5px rgba(0,0,0,.12), 0 10px 30px rgba(0,0,0,.28); }
  .l-composer__send:not(.l-composer__mic) { background: var(--tg-blue); }
  .l-composer__mic.is-rec { background: var(--c-red, #ff3b30); }
  .l-composer { padding-left: max(10px, calc(env(safe-area-inset-bottom) - 12px)); padding-right: max(10px, calc(env(safe-area-inset-bottom) - 12px)); }
  .l-down { right: max(10px, calc(env(safe-area-inset-bottom) - 12px)); }
}
@media (display-mode: standalone) and (max-width: 760px) {
  .l-feed .l-feed-bar--tg { background: var(--tg-bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* ========== Жидкое стекло, этап 1: единые токены стекла и движения (TZ-lichka-steklo.md) ========== */
:root { --lg-tint: 250 250 252; --lg-alpha: .66; --lg-blur: 28px; --lg-sat: 180%; --lg-bg: rgb(var(--lg-tint) / var(--lg-alpha)); --lg-edge: rgba(0,0,0,.10); --lg-hi: rgba(255,255,255,.75); --lg-hi-soft: rgba(255,255,255,.35); --lg-shadow: 0 0 0 .5px var(--lg-edge), 0 10px 32px rgba(0,0,0,.14), 0 2px 6px rgba(0,0,0,.05); --lg-shadow-sm: 0 0 0 .5px var(--lg-edge), 0 2px 8px rgba(0,0,0,.10); --lg-r-capsule: 999px; --lg-r-panel: 26px; --lg-r-card: 18px; --lg-r-item: 12px; --lg-spring: cubic-bezier(.34,1.35,.5,1); --lg-out: cubic-bezier(.2,.8,.2,1); --lg-t-press: 120ms; --lg-t-move: 260ms; --lg-t-sheet: 380ms; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --lg-tint: 36 36 40; --lg-alpha: .7; --lg-edge: rgba(0,0,0,.55); --lg-hi: rgba(255,255,255,.16); --lg-hi-soft: rgba(255,255,255,.07); --lg-shadow: 0 0 0 .5px var(--lg-edge), 0 12px 40px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.3); --lg-shadow-sm: 0 0 0 .5px var(--lg-edge), 0 2px 8px rgba(0,0,0,.35); }
}
:root[data-theme="dark"] { --lg-tint: 36 36 40; --lg-alpha: .7; --lg-edge: rgba(0,0,0,.55); --lg-hi: rgba(255,255,255,.16); --lg-hi-soft: rgba(255,255,255,.07); --lg-shadow: 0 0 0 .5px var(--lg-edge), 0 12px 40px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.3); --lg-shadow-sm: 0 0 0 .5px var(--lg-edge), 0 2px 8px rgba(0,0,0,.35); }
@media (prefers-reduced-transparency: reduce) {
  :root { --lg-alpha: .96; --lg-blur: 0px; }
}
@media (prefers-reduced-motion: reduce) {
  :root { --lg-t-press: 0ms; --lg-t-move: 0ms; --lg-t-sheet: 0ms; }
}
@media (max-width: 760px) {
  /* рецептура стекла: тонированный фон + размытие + кромка + блик + мягкая тень */
  .l-tabbar, :root[data-theme="dark"] .l-tabbar, .l-composer__input, .l-composer__recbar, .l-composer__attach, .l-composer__mic, .l-down { background: var(--lg-bg); border: 0; -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)); backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)); box-shadow: inset 0 .5px 0 var(--lg-hi), var(--lg-shadow); }
  .l-tabbar, :root[data-theme="dark"] .l-tabbar { border-radius: var(--lg-r-panel); }
  .l-tabbar a, .l-tabbar button { border-radius: calc(var(--lg-r-panel) - 4px); }
  .l-tabbar [aria-current="page"] { box-shadow: inset 0 .5px 0 var(--lg-hi-soft); }
  /* список: поиск и фильтр — на сплошной шапке, без размытия, с кромкой и бликом */
  .l-lsearch input[type="search"], .l-filters { background: color-mix(in srgb, var(--tg-text) 7%, var(--tg-bg)); box-shadow: inset 0 0 0 .5px var(--lg-edge); }
  .l-filters a[aria-current="page"], :root[data-theme="light"] .l-filters a[aria-current="page"] { box-shadow: inset 0 .5px 0 var(--lg-hi), var(--lg-shadow-sm); }
  .l-chat__new { box-shadow: inset 0 .5px 0 var(--lg-hi-soft); }
  /* отклик на нажатие: быстрое сжатие, отпускание — пружина */
  .l-tabbar a, .l-tabbar button, .l-filters a, .l-composer__attach, .l-composer__mic, .l-composer__send, .l-down, .l-hbub, .l-titlepill, .l-switch a { transition: transform var(--lg-t-move) var(--lg-spring), background var(--lg-t-move) var(--lg-out), color var(--lg-t-move) var(--lg-out), box-shadow var(--lg-t-move) var(--lg-out); }
  .l-tabbar a:active, .l-tabbar button:active, .l-composer__attach:active, .l-composer__mic:active, .l-composer__send:active, .l-down:active, .l-hbub:active { transform: scale(.9); transition-duration: var(--lg-t-press); transition-timing-function: var(--lg-out); }
  .l-filters a:active, .l-titlepill:active, .l-switch a:active { transform: scale(.96); transition-duration: var(--lg-t-press); transition-timing-function: var(--lg-out); }
  .l-chat { transition: background var(--lg-t-press) var(--lg-out); }
  .l-chat:active { background: color-mix(in srgb, var(--tg-text) 9%, transparent); }
}
/* ========== Жидкое стекло, этап 2: чат (TZ-lichka-steklo.md) ========== */
@media (max-width: 760px) {
  /* шапка, темы, закреплённое — пузыри на сплошной полосе: тон, кромка, блик, без размытия */
  .l-feed-bar--tg .l-hbub, .l-feed-bar--tg .l-titlepill, .l-switch a, .l-pinbar { background: color-mix(in srgb, var(--tg-text) 7%, var(--tg-bg)); border: 0; box-shadow: inset 0 .5px 0 var(--lg-hi-soft), inset 0 0 0 .5px var(--lg-edge); }
  .l-pinbar { border-radius: var(--lg-r-card); transition: transform var(--lg-t-move) var(--lg-spring); }
  .l-pinbar:active { transform: scale(.985); transition-duration: var(--lg-t-press); transition-timing-function: var(--lg-out); }
  /* плашки дат и тем, «Показать раньше», реакции */
  .l-day span, .l-topicmark a { box-shadow: inset 0 .5px 0 var(--lg-hi-soft); }
  .l-more { padding: 7px 16px; border-radius: var(--lg-r-capsule); background: color-mix(in srgb, var(--tg-text) 7%, var(--tg-bg)); box-shadow: inset 0 .5px 0 var(--lg-hi-soft), inset 0 0 0 .5px var(--lg-edge); font-weight: 500; text-decoration: none; }
  .l-react__it, .l-vm__play { transition: transform var(--lg-t-move) var(--lg-spring), background var(--lg-t-move) var(--lg-out); }
  .l-react__it:active, .l-vm__play:active { transform: scale(.9); transition-duration: var(--lg-t-press); transition-timing-function: var(--lg-out); }
  .l-react__it { box-shadow: inset 0 .5px 0 var(--lg-hi-soft); }
}
/* лист снизу (меню сообщения, варианты) — один стеклянный блок, реакции и «Отмена» отдельно; пружина, фон затемняется */
.l-sheet::backdrop { background: rgba(0,0,0,.32); }
.l-sheet__box { gap: 8px; }
.l-msheet__list, .l-msheet__re, .l-sheet__cancel { background: var(--lg-bg); -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)); backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)); box-shadow: inset 0 .5px 0 var(--lg-hi), var(--lg-shadow); margin: 0; }
.l-msheet__list, .l-sheet__cancel { border-radius: var(--lg-r-panel); overflow: hidden; }
.l-msheet__re { border-radius: var(--lg-r-capsule); }
.l-msheet__list .l-sheet__title { background: transparent; border-radius: 0; }
.l-msheet__list .l-sheet__btn { background: transparent; border-radius: 0; box-shadow: inset 0 .5px 0 var(--tg-sep); }
.l-msheet__list > :first-child { box-shadow: none; }
.l-sheet__btn { transition: background var(--lg-t-press) var(--lg-out); }
.l-sheet__btn:active { background: color-mix(in srgb, var(--tg-text) 10%, transparent); }
.l-msheet__re button { transition: transform var(--lg-t-move) var(--lg-spring); }
.l-msheet__re button:active { transform: scale(.85); transition-duration: var(--lg-t-press); transition-timing-function: var(--lg-out); }
@keyframes lg-sheet-in { from { transform: translateY(48px) scale(.98); opacity: 0; } }
@keyframes lg-dim-in { from { opacity: 0; } }
.l-sheet[open] .l-sheet__box { animation: lg-sheet-in var(--lg-t-sheet) var(--lg-spring); }
.l-sheet[open]::backdrop, .l-fwddlg[open]::backdrop, .l-carddlg[open]::backdrop { animation: lg-dim-in var(--lg-t-move) var(--lg-out); }
/* «Переслать» и карточка контакта на телефоне — лист снизу на сплошном фоне (внутри списки), пружина */
@media (max-width: 760px) {
  .l-fwddlg, .l-carddlg { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: var(--lg-r-panel) var(--lg-r-panel) 0 0; box-shadow: 0 0 0 .5px var(--lg-edge), inset 0 .5px 0 var(--lg-hi-soft), 0 -10px 40px rgba(0,0,0,.18); }
  .l-fwddlg { max-height: 82vh; }
  .l-fwd__form { max-height: 82vh; }
  .l-fwd__foot { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .l-carddlg { max-height: 88vh; padding-bottom: env(safe-area-inset-bottom); }
  .l-fwddlg::backdrop, .l-carddlg::backdrop { background: rgba(0,0,0,.32); }
  .l-fwddlg[open], .l-carddlg[open] { animation: lg-sheet-in var(--lg-t-sheet) var(--lg-spring); }
  .l-fwd__row { border-radius: var(--lg-r-item); }
  .l-fwd__search input { border-radius: var(--lg-r-capsule); box-shadow: inset 0 0 0 .5px var(--lg-edge); }
}
/* ========== Жидкое стекло, этап 3: служебные экраны (TZ-lichka-steklo.md) ========== */
@media (max-width: 760px) {
  /* страницы: шапка — сплошная полоса без линий, содержимое на сером, карточки с кромкой вместо тени */
  .l-page .m-toolbar, .l-prof__bar, :root[data-theme="dark"] .l-page .m-toolbar { background: var(--tg-page); box-shadow: none; }
  .l-page .m-toolbar__title { font-size: 20px; font-weight: 700; }
  .l-page .m-content, .l-contact, .l-page .m-content--padded { background: var(--tg-page); }
  .l-page .m-group__box, .l-settings .m-group__box, .l-info, .l-prof__btn, .l-board .l-task, .l-tasks .l-board .l-task { background: var(--tg-card); border-radius: var(--lg-r-card); box-shadow: inset 0 0 0 .5px var(--lg-edge), inset 0 .5px 0 var(--lg-hi-soft); }
  .l-page .m-group__title, .l-settings .m-group__title, .l-info__label { padding-left: 16px; }
  /* кнопки действий профиля — пузыри с пружиной */
  .l-prof__btn { transition: transform var(--lg-t-move) var(--lg-spring), background var(--lg-t-move) var(--lg-out); }
  .l-prof__btn:active { transform: scale(.94); transition-duration: var(--lg-t-press); transition-timing-function: var(--lg-out); }
  .l-info__chat, .l-fl { transition: background var(--lg-t-press) var(--lg-out); }
  .l-info__chat:active, .l-fl:active { background: color-mix(in srgb, var(--tg-text) 9%, transparent); }
  /* «Меню» — стеклянная панель слева со скруглённым краем, выезжает пружиной */
  .l-sidebar { background: var(--lg-bg); -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)); backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)); border-radius: 0 var(--lg-r-panel) var(--lg-r-panel) 0; box-shadow: inset 0 .5px 0 var(--lg-hi), var(--lg-shadow); transition: transform var(--lg-t-sheet) var(--lg-spring); }
  .l-app:not([data-sidebar="open"]) .l-sidebar { transition-timing-function: var(--lg-out); transition-duration: var(--lg-t-move); }
  .l-app[data-sidebar="open"] .l-sidebar { box-shadow: inset 0 .5px 0 var(--lg-hi), var(--lg-shadow); }
  .l-backdrop { background: rgba(0,0,0,.32); animation: lg-dim-in var(--lg-t-move) var(--lg-out); }
  .l-sidebar .m-sidebar__item { border-radius: var(--lg-r-item); transition: transform var(--lg-t-move) var(--lg-spring), background var(--lg-t-move) var(--lg-out), color var(--lg-t-move) var(--lg-out); }
  .l-sidebar .m-sidebar__item:active { transform: scale(.97); transition-duration: var(--lg-t-press); transition-timing-function: var(--lg-out); }
  .l-theme { border-radius: var(--lg-r-capsule); background: color-mix(in srgb, var(--tg-text) 7%, transparent); box-shadow: inset 0 0 0 .5px var(--lg-edge); }
  /* уведомление в чате — плавающая капсула над строкой ввода, не под ней */
  .l-feed .l-notice { position: absolute; left: 14px; right: 14px; bottom: calc(74px + max(10px, calc(env(safe-area-inset-bottom) - 12px))); z-index: 7; text-align: center; padding: 8px 14px; border-radius: var(--lg-r-capsule); background: var(--lg-bg); -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)); backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)); box-shadow: inset 0 .5px 0 var(--lg-hi), var(--lg-shadow-sm); animation: lg-sheet-in var(--lg-t-sheet) var(--lg-spring); }
  .l-feed .l-notice + .l-notice { bottom: calc(118px + max(10px, calc(env(safe-area-inset-bottom) - 12px))); }
  /* вход — стеклянная карточка на фоне чата */
  .l-login-page { background: var(--tg-chat-bg); min-height: 100dvh; margin: 0; }
  .l-login { border-radius: var(--lg-r-panel); background: var(--lg-bg); -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)); backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)); box-shadow: inset 0 .5px 0 var(--lg-hi), var(--lg-shadow); }
  .l-login .m-input { border-radius: var(--lg-r-item); }
  .l-login .m-btn--primary { border-radius: var(--lg-r-item); transition: transform var(--lg-t-move) var(--lg-spring); }
  .l-login .m-btn--primary:active { transform: scale(.97); transition-duration: var(--lg-t-press); transition-timing-function: var(--lg-out); }
}
@media (max-width: 760px) {
  .l-main > .l-page, .l-main:has(> .l-page) { background: var(--tg-page); }
  .l-page .l-filters { margin-top: 2px; }
}
/* ========== Жидкое стекло, этап 4: движение (TZ-lichka-steklo.md) ========== */
/* переходы между слоями (View Transitions, Safari 26+): вперёд — новый слой въезжает справа, назад — уезжает вправо, вкладки — растворение */
@keyframes lg-in-right { from { transform: translateX(100%); } }
@keyframes lg-out-left { to { transform: translateX(-28%); filter: brightness(.85); } }
@keyframes lg-in-left { from { transform: translateX(-28%); filter: brightness(.85); } }
@keyframes lg-out-right { to { transform: translateX(100%); } }
@keyframes lg-fade-out { to { opacity: 0; } }
@keyframes lg-fade-in { from { opacity: 0; } }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--lg-t-move); animation-timing-function: var(--lg-out); mix-blend-mode: normal; }
html[data-vt="fwd"]::view-transition-old(root) { animation-name: lg-out-left; }
html[data-vt="fwd"]::view-transition-new(root) { animation-name: lg-in-right; box-shadow: -12px 0 30px rgba(0,0,0,.18); }
html[data-vt="back"]::view-transition-old(root) { animation-name: lg-out-right; z-index: 1; box-shadow: -12px 0 30px rgba(0,0,0,.18); }
html[data-vt="back"]::view-transition-new(root) { animation-name: lg-in-left; }
html[data-vt="fade"]::view-transition-old(root) { animation-name: lg-fade-out; animation-duration: var(--lg-t-press); }
html[data-vt="fade"]::view-transition-new(root) { animation-name: lg-fade-in; animation-duration: var(--lg-t-move); }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}
@media (max-width: 760px) {
  /* новое сообщение при живом обновлении всплывает снизу */
  @keyframes lg-msg-in { from { opacity: 0; transform: translateY(14px) scale(.97); } }
  .l-msg.is-new { animation: lg-msg-in var(--lg-t-sheet) var(--lg-spring) both; }
  /* кнопка «вниз» появляется и исчезает плавно, а не выскакивает */
  .l-down { transition: transform var(--lg-t-sheet) var(--lg-spring), opacity var(--lg-t-move) var(--lg-out), background var(--lg-t-move) var(--lg-out); }
  .l-down[hidden] { display: grid !important; opacity: 0; transform: scale(.6) translateY(10px); pointer-events: none; transition-timing-function: var(--lg-out), var(--lg-out); }
  /* листы снизу: содержимое тянется пальцем (transform ставит сценарий), фон под ним — без дёрганья */
  .l-sheet__box, .l-fwddlg, .l-carddlg { will-change: transform; touch-action: pan-y; }
}

/* ---------- Карточка дела (27.10.2026): важность и теги, название, описание, срок/проект, контакт, создано ---------- */
.l-tasks form.l-task, .l-tasks .l-board form.l-task { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 12px 14px; }
.l-task__head { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 24px; }
.l-task__open { margin-left: auto; flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: var(--tg-grey);
  background: color-mix(in srgb, var(--tg-text) 6%, transparent); }
.l-task__open svg { width: 15px; height: 15px; }
.l-task__pri { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px 2px 7px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
  color: var(--badge); background: color-mix(in srgb, var(--badge) 14%, transparent); }
.l-task__pri i { width: 7px; height: 7px; border-radius: 50%; background: var(--badge); }
.l-tag { padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; color: var(--badge);
  background: color-mix(in srgb, var(--badge) 8%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--badge) 40%, transparent); }
.l-task__title { font-size: 15.5px; font-weight: 600; line-height: 1.3; color: var(--tg-text); text-decoration: none; }
.l-task__note { font-size: 13px; line-height: 1.35; color: var(--tg-grey); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.l-tasks form .l-task__meta { gap: 12px; font-size: 12.5px; }
.l-task__meta svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; stroke-width: 2; }
.l-tasks form .l-task__due { font-size: 12.5px; }
.l-task__due.is-today { color: var(--c-orange); font-weight: 600; }
.l-task__due.is-over { color: var(--c-red); font-weight: 600; }
.l-task__foot { display: flex; align-items: center; gap: 8px; padding-top: 7px; margin-top: 2px; box-shadow: inset 0 0.5px 0 var(--tg-sep); }
.l-task__foot .l-task__who { flex: 1; min-width: 0; font-weight: 500; font-size: 13px; background: none; padding: 0; margin: 0; }
.l-task__foot .l-task__ava { --size: 28px; width: 28px; height: 28px; }
.l-task__created { margin-left: auto; }
.l-task__foot .l-task__acts { flex-direction: row; flex: none; }
.l-tasks form.l-task--closed .l-task__title { text-decoration: line-through; color: var(--tg-grey); }
.l-tasks form.l-task[data-task] { cursor: pointer; }
.l-tasks .l-board form.l-task[data-task] { cursor: grab; }
.l-tagpick { position: relative; }
.l-tagpick summary { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; cursor: pointer; }
.l-tagpick summary::-webkit-details-marker { display: none; }
.l-tag--add { --badge: var(--tg-grey); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tg-grey) 50%, transparent); background: none; font-weight: 500; }
.l-tagpick__menu { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; display: grid; gap: 2px; padding: 6px; min-width: 150px; border-radius: 12px;
  background: var(--tg-bg); box-shadow: 0 8px 28px rgba(0,0,0,.2), 0 0 0 0.5px var(--tg-sep); }
.l-tagpick__opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 0; background: none; padding: 5px 6px; border-radius: 8px; cursor: pointer; color: var(--tg-blue); }
.l-tagpick__opt:hover { background: color-mix(in srgb, var(--tg-text) 6%, transparent); }
.l-tagpick__opt svg { width: 15px; height: 15px; }

/* Подробная карточка */
.l-tform__box { padding: 10px 14px; display: grid; gap: 10px; }
.l-tform__in { width: 100%; box-sizing: border-box; border: 0; border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 15px; color: var(--tg-text);
  background: color-mix(in srgb, var(--tg-text) 6%, transparent); }
textarea.l-tform__in { resize: vertical; min-height: 72px; line-height: 1.4; }
.l-tform__row { display: flex; gap: 8px; }
.l-tform__row > * { flex: 1; min-width: 0; }
.l-tform__pills { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.l-pill { position: relative; cursor: pointer; }
.l-pill input { position: absolute; opacity: 0; pointer-events: none; }
.l-pill span { display: inline-block; padding: 7px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--badge);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--badge) 45%, transparent); transition: background var(--dur-fast), color var(--dur-fast); }
.l-pill input:checked + span { background: var(--badge); color: #fff; box-shadow: none; }
.l-pill input:focus-visible + span { outline: 2px solid var(--tg-blue); outline-offset: 2px; }
.l-tform__tag { width: 120px; flex: none; padding: 7px 12px; border-radius: 999px; font-size: 14px; }
.l-tform__contact { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.l-tform__save { display: block; width: 100%; margin: 6px 0 24px; padding: 13px; border-radius: 14px; font-size: 16px; }
.l-tform__ok { color: var(--tg-blue) !important; }
.l-tform__row--stack { flex-direction: column; }
select.l-tform__in { min-height: 44px; }
.l-tform .l-pill span { padding: 6px 10px; font-size: 13.5px; }
.l-tform .l-tform__pills { gap: 6px; }
.l-tform__save.m-btn { height: auto; min-height: 48px; line-height: 1.2; }
.l-tasks__search { flex-basis: 100%; order: 0; margin: 2px 0 2px; }

/* Список задач внутри дела (28.10.2026) */
.l-items { display: grid; gap: 2px; }
.l-item { display: flex; align-items: center; gap: 10px; min-height: 36px; }
.l-item input[type="checkbox"] { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--c-green); }
.l-item__text { flex: 1; min-width: 0; border: 0; background: none; padding: 6px 0; font: inherit; font-size: 15px; color: var(--tg-text); }
.l-item.is-done .l-item__text { text-decoration: line-through; color: var(--tg-grey); }
.l-item__del { flex: none; width: 28px; height: 28px; border: 0; border-radius: 50%; background: none; color: var(--tg-grey); display: grid; place-items: center; cursor: pointer; }
.l-item__del:hover { background: color-mix(in srgb, var(--tg-text) 6%, transparent); color: var(--c-red); }
.l-item__del svg { width: 14px; height: 14px; }
.l-item--new { gap: 8px; }
.l-item--new .l-tform__in { flex: 1; }
.l-item--new .m-btn { flex: none; }
.l-tform__merged { margin: 0 0 12px; }

/* Компактная подробная карточка (28.10.2026): стадии как в Битрикс24, название, важность и теги, описание */
.l-tcard { display: grid; gap: 12px; max-width: 760px; }
.l-stages { display: flex; gap: 3px; }
.l-stage { flex: 1; min-width: 0; position: relative; cursor: pointer; }
.l-stage input { position: absolute; opacity: 0; pointer-events: none; }
.l-stage span { display: block; height: 34px; line-height: 34px; padding: 0 10px 0 18px; text-align: center; font-size: 13px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--tg-grey); background: color-mix(in srgb, var(--tg-text) 7%, transparent);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%); transition: background var(--dur-fast), color var(--dur-fast); }
.l-stage:first-child span { clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%); border-radius: 8px 0 0 8px; padding-left: 10px; }
.l-stage:last-child span { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 10px 50%); border-radius: 0 8px 8px 0; }
.l-stage.is-past span { background: color-mix(in srgb, var(--stage) 45%, transparent); color: #fff; }
.l-stage.is-on span { background: var(--stage); color: #fff; }
.l-stage:hover span { filter: brightness(1.1); }
.l-stage input:focus-visible + span { outline: 2px solid var(--tg-blue); outline-offset: -2px; }
.l-tcard__main { padding: 12px 14px; display: grid; gap: 10px; }
.l-tcard__title, .l-tcard__note { width: 100%; box-sizing: border-box; border: 0; background: none; padding: 0; resize: none; font: inherit; color: var(--tg-text); field-sizing: content; }
.l-tcard__title { font-size: 19px; font-weight: 700; line-height: 1.3; min-height: 1.3em; }
.l-tcard__note { font-size: 14.5px; line-height: 1.4; color: var(--tg-grey); min-height: 2.8em; }
.l-tcard__title:focus, .l-tcard__note:focus { outline: none; }
.l-tcard__note:focus { color: var(--tg-text); }
.l-tcard__chips { gap: 6px; }
.l-tcard__sep { width: 1px; height: 20px; background: var(--tg-sep); margin: 0 2px; }
.l-tcard .l-pill span { padding: 4px 10px; font-size: 12.5px; }
.l-tcard .l-tform__tag { width: 90px; padding: 4px 10px; font-size: 12.5px; }
.l-tcard__h { margin: 4px 0 -6px; }
.l-tcard .l-tform__box { padding: 6px 14px 10px; }
.l-tcard__props { padding: 2px 14px; }
.l-prop { display: flex; align-items: center; gap: 12px; min-height: 48px; }
.l-prop + .l-prop { box-shadow: inset 0 0.5px 0 var(--tg-sep); }
.l-prop__k { flex: none; width: 96px; font-size: 13.5px; color: var(--tg-grey); }
.l-prop__v { flex: 1; min-width: 0; }
.l-prop .l-tform__in { padding: 7px 10px; font-size: 14px; }
.l-prop .l-tform__contact { justify-content: space-between; }
.l-tcard__created { padding: 0 4px; }
.l-tcard .l-tform__save { margin-top: 0; }
@media (max-width: 600px) { .l-stage span { font-size: 12px; padding: 0 6px 0 14px; } .l-prop__k { width: 78px; } }
/* Перетаскивание карточки на карточку — объединение */
.l-task.is-merge { box-shadow: 0 0 0 2px var(--tg-blue) !important; background: color-mix(in srgb, var(--tg-blue) 10%, var(--tg-bg)) !important; }
.l-prop .l-tform__row { gap: 6px; }
.l-prop .l-tform__row > [type="date"] { flex: 1.6; }
.l-prop .l-tform__row > [type="time"] { flex: 1; }
.l-prop .l-tform__contact .l-task__who { min-width: 0; flex: 1; }
.l-prop .l-tform__contact .l-task__who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Ширина карточек (28.10.2026): карточка не шире колонки, текст переносится внутри неё */
.l-board__cards { grid-template-columns: minmax(0, 1fr); }
.l-board__col { min-width: 0; }
.l-task { min-width: 0; max-width: 100%; box-sizing: border-box; }
.l-task__title, .l-task__note, .l-tcard__title, .l-tcard__note, .l-item__text { overflow-wrap: anywhere; }
.l-task__head, .l-task__meta, .l-task__foot { min-width: 0; }
.l-task__foot .l-task__who span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.l-tcard, .l-tcard__main, .l-tcard__props, .l-prop__v { min-width: 0; }
.l-task__head { flex-wrap: nowrap; align-items: flex-start; }
.l-task__head .l-tagpick { flex: 0 1 auto; min-width: 0; }
.l-task__head .l-task__pri { flex: none; }
/* Долгое нажатие на телефоне поднимает карточку дела: без выделения текста и меню ссылки iOS */
@media (hover: none) {
  [data-tasks] form.l-task { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  [data-tasks] form.l-task a { -webkit-touch-callout: none; }
}
.l-task--lift { background: var(--tg-card) !important; border-radius: 14px; transform: scale(1.03) rotate(-1deg); box-shadow: 0 18px 36px rgba(0,0,0,.35) !important; opacity: .95; }
/* ========== Альбом: 2+ фото/видео одной сеткой, как в Telegram ========== */
.l-album { display: grid; gap: 2px; width: 100%; border-radius: 14px; overflow: hidden; }
.l-album__row { display: flex; gap: 2px; min-width: 0; }
.l-album__cell { flex-basis: 0; flex-shrink: 1; min-width: 0; position: relative; overflow: hidden; background: color-mix(in srgb, var(--tg-text) 8%, transparent); }
.l-album__cell > *, .l-album__cell .l-ph, .l-album__cell .l-fetch button { display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
.l-album__cell img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 0; }
.l-album__cell .l-ph__cap { display: none; }
.l-album__cell .l-ph--video > svg { width: 36px; height: 36px; }
.l-album__cell > .m-badge { display: grid; place-items: center; padding: 6px; font-size: 11px; white-space: normal; text-align: center; color: var(--tg-grey); background: transparent; }
.l-album__cell a { transition: filter var(--lg-t-press, 120ms) ease; }
.l-album__cell a:active { filter: brightness(.85); }
/* пузырь с альбомом: сетка почти до края, подпись и имя — с отступом, время без подписи — поверх фото */
.l-bubble:has(> .l-album) { padding: 3px; width: min(336px, 76vw); max-width: none; box-sizing: border-box; }   /* пузырь по ширине альбома, подпись переносится */
.l-bubble:has(> .l-album) > .l-bubble__who, .l-bubble:has(> .l-album) > .l-fwd, .l-bubble:has(> .l-album) > .l-reply { margin: 3px 7px 5px; }
.l-bubble:has(> .l-album) > .l-bubble__text:not(.l-bubble__text--meta), .l-bubble:has(> .l-album) > .l-files, .l-bubble:has(> .l-album) > .l-react { margin: 4px 7px 4px; }
.l-bubble:has(> .l-album):not(:has(> .l-react)) > .l-bubble__text--meta { position: absolute; right: 9px; bottom: 9px; margin: 0; padding: 2px 7px; border-radius: 999px; background: rgba(0,0,0,.45); }
.l-bubble:has(> .l-album):not(:has(> .l-react)) > .l-bubble__text--meta .l-bubble__meta, .l-bubble:has(> .l-album):not(:has(> .l-react)) > .l-bubble__text--meta .l-bubble__meta * { color: #fff; margin: 0; }
.l-anchor { display: block; height: 0; }
/* окно просмотра: листание альбома */
.l-viewer__nav { position: absolute; top: 50%; z-index: 2; width: 44px; height: 44px; margin-top: -22px; border: 0; border-radius: 50%; display: grid; place-items: center;
  font-size: 30px; line-height: 1; padding-bottom: 4px; color: #fff; background: rgba(40,40,44,.55); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); cursor: pointer;
  box-shadow: inset 0 .5px 0 rgba(255,255,255,.18), 0 2px 10px rgba(0,0,0,.3); transition: opacity .15s ease, transform .25s cubic-bezier(.34,1.35,.5,1); }
.l-viewer__nav--prev { left: 8px; } .l-viewer__nav--next { right: 8px; }
.l-viewer__nav:disabled { opacity: 0; pointer-events: none; }
.l-viewer__nav:active { transform: scale(.9); }
@media (hover: none) { .l-viewer__nav { width: 36px; height: 36px; margin-top: -18px; font-size: 24px; opacity: .8; } }
@media (min-width: 761px) { .l-bubble:has(> .l-album) { width: min(420px, 62%); } }
/* ========== «Избранное» и закреплённые чаты ========== */
.l-ava--saved { background: linear-gradient(160deg, #5ab8ff 0%, #007aff 100%) !important; color: #fff; display: grid; place-items: center; overflow: hidden; }
.l-ava--saved svg { width: 50%; height: 50%; fill: #fff; stroke: #fff; stroke-width: 1.5; }
.l-hbub--ava .l-ava--saved { width: 100%; height: 100%; }
.l-swipe--pinned .l-chat:not([aria-current="page"]) { background: color-mix(in srgb, var(--tg-text) 4%, var(--tg-bg)); }
.l-chat__pin { display: grid; place-items: center; width: 22px; height: 22px; color: var(--tg-grey); }
.l-chat__pin svg { width: 16px; height: 16px; transform: rotate(45deg); stroke-width: 1.9; }
.l-chat[aria-current="page"] .l-chat__pin { color: rgba(255,255,255,.8); }
.l-chat__tray button[data-act="pin_chat"] { background: #34c759; }
.l-swipe--pinned .l-chat__tray button[data-act="pin_chat"] svg { opacity: .65; }
/* ========== «В сети» и «Новое сообщение» ========== */
.l-ava--on::after { content: ""; position: absolute; right: -1px; top: -1px; width: 12px; height: 12px; border-radius: 50%; background: #34c759; box-shadow: 0 0 0 2px var(--tg-bg); }
.l-chat[aria-current="page"] .l-ava--on::after { box-shadow: 0 0 0 2px var(--tg-blue); }
.l-titlepill--on .m-subhead { color: var(--tg-blue); }
.l-compose { color: var(--tg-blue); }
.l-compose svg { width: 22px; height: 22px; }
.l-new { display: grid; align-content: start; gap: 8px; padding: 12px 16px calc(24px + env(safe-area-inset-bottom)); max-width: 640px; margin: 0 auto; width: 100%; box-sizing: border-box; }
.l-new__search input[type="search"] { height: 38px; border-radius: 999px; padding-left: 36px; background: color-mix(in srgb, var(--tg-text) 7%, var(--tg-bg)); color: var(--tg-text); }
.l-new__h { margin: 10px 14px 0; }
.l-new__hint { margin: 0 14px; font-size: 13px; }
.l-new__row { display: flex; align-items: center; gap: 12px; padding: 8px 14px; color: var(--tg-text); text-decoration: none; }
.l-new__row + .l-new__row { box-shadow: inset 0 .5px 0 var(--tg-sep, color-mix(in srgb, var(--tg-text) 12%, transparent)); }
.l-new__row .l-ava { width: 40px; height: 40px; font-size: 14px; flex: none; }
.l-new__t { flex: 1; min-width: 0; display: grid; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.l-new__t small { color: var(--tg-grey); font-size: 13px; }
.l-new__btn { all: unset; display: flex; align-items: center; gap: 12px; flex: 1; cursor: pointer; color: var(--tg-blue); }
.l-new__row:active, .l-new__row:has(.l-new__btn:active) { background: color-mix(in srgb, var(--tg-text) 9%, transparent); }
@media (hover: hover) { .l-new__row:hover { background: color-mix(in srgb, var(--tg-text) 5%, transparent); } }
.l-new__logo { position: static; width: 40px; height: 40px; flex: none; box-shadow: none; color: #fff; background: var(--badge) !important; border-radius: 50%; }
.l-new__logo svg { width: 22px !important; height: 22px !important; }

/* Карточка дела: «Влить в это дело другие» (возвращено 29.10.2026) и «Похожие» на странице дел */
.l-merge { padding-top: 8px; box-shadow: inset 0 0.5px 0 var(--tg-sep); }
.l-merge summary { cursor: pointer; color: var(--tg-blue); font-weight: 500; padding: 4px 0; }
.l-merge__find { margin-top: 8px; width: 100%; box-sizing: border-box; }
.l-merge__list { display: grid; max-height: 320px; overflow: auto; margin: 8px 0; }
.l-merge__row { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; box-shadow: inset 0 -0.5px 0 var(--tg-sep); cursor: pointer; }
.l-merge__row[hidden] { display: none; }
.l-merge__row input { margin-top: 3px; flex: none; }
.l-merge__row span { display: grid; gap: 2px; font-size: 14.5px; }
.l-merge__row small { color: var(--tg-grey); font-size: 12px; }
.l-merge .m-btn { color: var(--tg-blue); font-weight: 600; padding-left: 0; }
.l-merge .m-secondary { margin-top: 6px; }
.l-dup__acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 8px 14px 12px; }
.l-dup__acts .m-tertiary { margin-left: auto; }
.l-task__due.is-none { color: var(--tg-grey); opacity: .75; }   /* «без срока» (30.10.2026) */

/* «Дела», 31.10.2026: вид — выпадающим списком в шапке, поиск по лупе, фильтры — лентой как в списке чатов */
.l-viewpick summary { gap: 2px; font-weight: 500; padding: 0 8px; }
.l-viewpick summary svg { width: 16px; height: 16px; }
.l-viewpick .l-tagpick__menu { left: auto; right: 0; min-width: 170px; }
.l-viewpick .l-tagpick__opt { display: flex; justify-content: space-between; align-items: center; text-decoration: none; color: var(--tg-text); padding: 8px 10px; border-radius: 8px; }
.l-viewpick .l-tagpick__opt svg { width: 16px; height: 16px; color: var(--tg-blue); }
[data-tsearch].is-on { color: var(--tg-blue); }
.l-tasks__search { margin: 8px 16px 0; flex: none; }
.l-tasks__search[hidden] { display: none; }
.l-tasks__chips { justify-content: flex-start; }
.l-tasks__chips a { flex: 0 0 auto; }
.l-tasks__chips .m-tertiary { font-size: 12px; margin-left: 2px; }
.l-tasks__sep { flex: none; width: 1px; height: 18px; align-self: center; margin: 0 4px; background: var(--tg-sep); }

/* Карточки дел — отдельными плашками, а не сплошным полотном */
.l-tasks .l-tasks__box { background: none; box-shadow: none; overflow: visible; display: grid; gap: 8px; }
.l-tasks .l-tasks__box > form.l-task { background: var(--surface-group); border-radius: 14px; box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 0 0 0.5px var(--tg-sep); }
.l-tasks .l-board__cards { gap: 10px; }
.l-tasks .l-board form.l-task { background: var(--tg-bg); border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.10), 0 0 0 0.5px var(--tg-sep); }
.l-tasks .l-board form.l-task:hover { box-shadow: 0 2px 8px rgba(0,0,0,.12), 0 0 0 0.5px var(--tg-sep); }

/* Срок: кнопка в карточке и свой календарь (31.10.2026) */
.l-task__duebtn { border: 0; background: color-mix(in srgb, var(--tg-text) 6%, transparent); border-radius: 999px; padding: 2px 9px; font: inherit; font-size: 12.5px;
  color: var(--tg-grey); cursor: pointer; display: inline-flex; align-items: center; gap: 2px; }
.l-task__duebtn:hover { background: color-mix(in srgb, var(--tg-text) 11%, transparent); }
.l-task__duebtn.is-over { color: var(--c-red); background: color-mix(in srgb, var(--c-red) 10%, transparent); }
.l-task__duebtn.is-today { color: var(--c-orange); background: color-mix(in srgb, var(--c-orange) 10%, transparent); }
.l-task__duebtn.is-none { opacity: 1; font-style: normal; }
.l-tform__row .l-task__duebtn { font-size: 15px; padding: 7px 12px; border-radius: 10px; }
.l-duepop { position: fixed; z-index: 1000; width: 272px; padding: 10px; border-radius: 16px; background: var(--tg-card);
  box-shadow: 0 12px 40px rgba(0,0,0,.22), 0 0 0 0.5px var(--tg-sep); font-size: 14px; color: var(--tg-text); }
.l-duepop button { border: 0; background: none; font: inherit; color: inherit; cursor: pointer; border-radius: 8px; }
.l-duepop__quick { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 8px; margin-bottom: 6px; box-shadow: inset 0 -0.5px 0 var(--tg-sep); }
.l-duepop__quick button { padding: 5px 10px; border-radius: 999px; background: color-mix(in srgb, var(--tg-text) 7%, transparent); font-size: 13px; }
.l-duepop__quick button:hover { background: color-mix(in srgb, var(--tg-blue) 16%, transparent); }
.l-duepop__head { display: flex; align-items: center; justify-content: space-between; padding: 2px 0 6px; }
.l-duepop__head button { width: 32px; height: 32px; font-size: 20px; line-height: 1; }
.l-duepop__head button:hover, .l-duepop__grid button:hover { background: color-mix(in srgb, var(--tg-text) 8%, transparent); }
.l-duepop__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.l-duepop__grid i { font-style: normal; font-size: 11px; color: var(--tg-grey); padding: 2px 0 4px; }
.l-duepop__grid button { height: 34px; font-variant-numeric: tabular-nums; }
.l-duepop__grid button.is-today { color: var(--tg-blue); font-weight: 700; }
.l-duepop__grid button.is-on { background: var(--tg-blue); color: #fff; font-weight: 600; }
.l-task__duebtn svg { width: 14px; height: 14px; flex: none; margin-right: 4px; stroke-width: 2; vertical-align: -2px; }
.l-tform__row .l-task__duebtn { flex: 0 0 auto; width: auto; }
.l-tform__row .l-task__duebtn svg { width: 16px; height: 16px; }
@media (max-width: 760px) {      /* доска на телефоне: пустая колонка узкая — сразу видно колонку с делами (31.10.2026) */
  .l-board:not(.l-matrix) { display: flex; }
  .l-board:not(.l-matrix) > .l-board__col { flex: 0 0 82vw; }
  .l-board:not(.l-matrix) > .l-board__col:has(.l-board__cards:empty) { flex-basis: 40vw; }
}
@media (max-width: 760px) {      /* 31.10.2026: пустые «Новые» на телефоне не показываем; колонки доски уходят под нижнее меню, как список чатов */
  .l-board:not(.l-matrix) > .l-board__col[data-drop="status=open"]:has(.l-board__cards:empty) { display: none; }
  .l-page .l-tasks--board { padding-bottom: 0; }
  .l-tasks--board .l-board:not(.l-matrix) { padding-bottom: 0; }
  .l-tasks--board .l-board:not(.l-matrix) > .l-board__col { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
  .l-tasks--board .l-board:not(.l-matrix) .l-board__cards { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
}

/* Темы форума (31.10.2026): «Непрочитанные сообщения» — граница, с которой открывается тема */
.l-unreadmark { display: flex; justify-content: center; margin: 10px 0 6px; padding: 4px 0; background: color-mix(in srgb, var(--tg-text) 6%, transparent); }
.l-unreadmark span { font-size: 12.5px; font-weight: 600; color: var(--tg-grey); }
.l-topics .l-filters__n { margin-left: 5px; }
/* ========== Нижнее меню как в Telegram iOS 26 и поле ввода у клавиатуры (31.10.2026) ========== */
:root { --lg-tab-alpha: .42; }
@media (prefers-reduced-transparency: reduce) { :root { --lg-tab-alpha: .96; } }
@media (max-width: 760px) {
  /* капсула, концентричная скруглению экрана iPhone: ниже, уже по бокам, прозрачнее; значки и подписи яркие */
  .l-tabbar, :root[data-theme="dark"] .l-tabbar { left: 20px; right: 20px; bottom: max(8px, calc(env(safe-area-inset-bottom) - 13px)); border-radius: 999px;
    background: rgb(var(--lg-tint) / var(--lg-tab-alpha)); -webkit-backdrop-filter: blur(18px) saturate(200%); backdrop-filter: blur(18px) saturate(200%); }
  .l-tabbar a, .l-tabbar button { border-radius: 999px; color: var(--tg-text); font-weight: 600; }
  .l-tabbar svg { stroke-width: 2; }
  .l-tabbar [aria-current="page"] { color: var(--tg-blue); }
  /* клавиатура открыта: без отступа под полоску «домой» */
  html.is-kb .l-composer { padding-bottom: 6px; }
  html.is-kb .l-msgs { padding-bottom: 72px; }
  html.is-kb .l-down { bottom: 72px; }
  html.is-kb .l-feed::after { height: 66px; }
}
@media (display-mode: standalone) and (max-width: 760px) {
  .l-tabbar { bottom: max(8px, calc(env(safe-area-inset-bottom) - 13px)); }
}
/* ========== 31.10.2026 (2): доска «Дел» в ширину экрана, темы чата — капсулой как фильтр списка ========== */
@media (max-width: 760px) {
  /* доска: колонка = ширина окна, листаются по одной (с защёлкой); пустая колонка остаётся узкой */
  .l-board:not(.l-matrix) { gap: 10px; margin-left: -12px; margin-right: -12px; padding-left: 4px; padding-right: 4px; scroll-padding: 0 4px; }
  .l-board:not(.l-matrix) > .l-board__col { flex: 0 0 100%; padding-left: 4px; padding-right: 4px; scroll-snap-stop: always; }
  .l-board:not(.l-matrix) > .l-board__col:has(.l-board__cards:empty) { flex-basis: 40vw; }
}
/* темы форума: одна капсула с сегментами, выбранная — приподнята (как «Все · Новые · Неотвеченные» над списком) */
.l-feed .l-switch.l-topics { gap: 2px; padding: 3px; margin: 0 12px; border-radius: 999px; justify-content: flex-start;
  background: color-mix(in srgb, var(--tg-text) 7%, var(--tg-bg)); box-shadow: inset 0 0 0 .5px var(--lg-edge, var(--tg-sep)); }
.l-feed .l-switch.l-topics a { flex: 0 0 auto; padding: 7px 14px; font-size: 15px; font-weight: 500; color: var(--tg-text); background: transparent; border: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; }
.l-feed .l-switch.l-topics a[aria-current="page"] { background: color-mix(in srgb, var(--tg-text) 14%, transparent); color: var(--tg-text);
  box-shadow: inset 0 .5px 0 var(--lg-hi, rgba(255,255,255,.18)), var(--lg-shadow-sm, 0 1px 3px rgba(0,0,0,.12)); }
:root[data-theme="light"] .l-feed .l-switch.l-topics a[aria-current="page"] { background: #fff; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .l-feed .l-switch.l-topics a[aria-current="page"] { background: #fff; } }
@media (max-width: 760px) { .l-feed .l-switch.l-topics { left: 12px; right: 12px; margin: 0; padding: 3px; } }
/* ---------- Умный поиск в чате (01.11.2026): режим и отправитель — рядом с полем, после первого поиска ---------- */
.l-msearch.is-on { display: flex; gap: 6px; align-items: center; width: min(560px, 100%); }
.l-msearch.is-on input { flex: 1 1 auto; min-width: 0; }
.l-msearch__opt { flex: 0 1 auto; max-width: 26%; height: var(--control-height); border: 0; border-radius: var(--radius-capsule); padding: 0 10px;
  background: var(--tg-field); color: var(--tg-text); font: var(--text-body)/1 var(--font-sans); text-overflow: ellipsis; }
.l-msearch:not(.is-on) .l-msearch__opt { display: none; }
/* ---------- «Объединить с…» (01.11.2026) ---------- */
.l-chmerge { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; }
.l-chmerge__hint { padding: 4px 16px 0; margin: 0; font-size: 14px; }
.l-chmerge .l-filters { overflow-x: auto; }
.l-chmerge__search { width: auto; margin: 4px 12px 10px; }
.l-chmerge__row { margin: 0; }
.l-chmerge__list { flex: none; margin: 0 12px 16px; }   /* в колонке с прокруткой список не сжимается */
.l-chmerge > * { flex: none; }
.l-chmerge__row button.l-fl { width: 100%; border: 0; background: none; text-align: left; font: inherit; cursor: pointer; }
.l-chmerge__row button.l-fl:hover { background: color-mix(in srgb, var(--tg-text) 5%, transparent); }
/* ---------- Фото объединённого контакта: какое показывать (01.11.2026) ---------- */
.l-avpick { align-items: center; }
.l-avpick__opts { display: flex; gap: 10px; flex-wrap: wrap; }
.l-avpick form { margin: 0; }
.l-avpick__opt { position: relative; width: 52px; height: 52px; padding: 0; border: 2px solid transparent; border-radius: 50%; background: none; cursor: pointer; }
.l-avpick__opt img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.l-avpick__opt.is-on { border-color: var(--tg-blue); }
.l-avpick__ch { position: absolute; right: -4px; bottom: -4px; width: 20px; height: 20px; display: block; }
.l-avpick__ch svg { width: 100%; height: 100%; display: block; }
.l-prof__photos, .l-prof__photos a { display: contents; }   /* альбом для окна просмотра — без своих размеров */
.l-chmerge__row + .l-chmerge__row { box-shadow: inset 0 0.5px 0 var(--tg-sep); }
.l-chmerge__row .m-avatar { width: 42px; height: 42px; flex: none; }
/* ---------- Кружок Telegram — кругом, без пузыря (01.11.2026) ---------- */
.l-msg--round .l-bubble { background: none !important; box-shadow: none !important; padding: 0 !important; }
.l-msg--round .l-bubble::before, .l-msg--round .l-bubble::after { display: none !important; }
.l-round { position: relative; display: block; width: 220px; height: 220px; border-radius: 50%; overflow: hidden; cursor: pointer; background: color-mix(in srgb, var(--tg-text) 10%, transparent); }
.l-round img, .l-round video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.l-round.is-playing img, .l-round.is-playing > svg { display: none; }
.l-round::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;     /* кольцо хода */
  background: conic-gradient(rgba(255,255,255,.9) calc(var(--p, 0) * 1turn), transparent 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px)); }
.l-round__open { position: absolute; right: 14px; top: 14px; z-index: 2; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(0,0,0,.45); color: #fff; font-size: 17px; line-height: 1; text-decoration: none; opacity: .85; }
.l-round__open:hover { opacity: 1; }
.l-round svg { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; translate: -50% -50%; fill: #fff; color: #fff; filter: drop-shadow(0 1px 4px rgba(0,0,0,.6)); }
.l-msg--round .l-bubble__text--meta { margin-top: 4px; }
.l-msg--round .l-bubble__meta { padding: 2px 7px; border-radius: 999px; background: rgba(0,0,0,.35); color: #fff; }
/* документ в окне просмотра — в своих цветах и в тёмной теме (01.11.2026: был чёрный фон) */
.l-viewer__doc { color-scheme: light; background: #fff; }
.l-viewer__body video.is-round { width: min(72vmin, 440px); height: min(72vmin, 440px); border-radius: 50%; object-fit: cover; }
/* ---------- Разметка в сообщениях (01.11.2026) ---------- */
.l-bubble__text code { font: 0.92em/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; padding: 1px 5px; border-radius: 5px; background: color-mix(in srgb, currentColor 12%, transparent); }
.l-md-pre { margin: 4px 0; padding: 8px 10px; border-radius: 8px; white-space: pre-wrap; font: 0.9em/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; background: color-mix(in srgb, currentColor 10%, transparent); }
.l-md-h { font-size: 1.08em; }
.l-md-q { display: inline-block; padding-left: 8px; border-left: 3px solid color-mix(in srgb, var(--tg-blue) 70%, transparent); }
.l-md-table { border-collapse: collapse; margin: 4px 0; font-size: 0.95em; display: inline-table; }
.l-md-table th, .l-md-table td { border: 1px solid color-mix(in srgb, currentColor 22%, transparent); padding: 3px 8px; text-align: left; vertical-align: top; white-space: normal; }
.l-md-table th { font-weight: 600; background: color-mix(in srgb, currentColor 8%, transparent); }

/* Настройки → Почта (этап 0 ТЗ почты, 02.11.2026) */
.l-mailform { display: grid; gap: 10px; padding: 12px 14px; }
.l-mailform label { display: grid; grid-template-columns: 110px 1fr; gap: 10px; align-items: center; }
.l-mailform label > span:first-child { color: var(--tg-grey); font-size: 14px; }
.l-mailform__pair { display: grid; grid-template-columns: 1fr 90px; gap: 8px; }
.l-mailform label.l-mailform__chk { display: flex; gap: 8px; color: var(--tg-text); }
.l-mailform__more summary, .l-mailfolders summary { cursor: pointer; color: var(--tg-blue); font-size: 14px; padding: 4px 0; }
.l-mailform__more[open] { display: grid; gap: 10px; }
.l-mailform .m-btn--primary { justify-self: start; }
.l-mailacc { align-items: flex-start; }
.l-mailacc__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; margin: 7px 4px 0 2px; }
.l-mailacc__acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.l-mailacc__edit { flex-basis: 100%; }
.l-mailacc__edit > summary { list-style: none; display: inline-flex; }
.l-mailacc__edit > summary::-webkit-details-marker { display: none; }
.l-mailacc__edit[open] { display: grid; gap: 8px; }
.l-mailacc__edit .l-mailform { padding: 8px 0; }
.l-mailacc__all { padding: 8px 14px 0; }
.l-mailfolders ul { margin: 4px 0 0; padding-left: 18px; font-size: 13.5px; columns: 2; }
.l-mailhints { margin: 0 0 8px; padding-left: 18px; font-size: 14px; line-height: 1.5; }
@media (max-width: 600px) { .l-mailform label { grid-template-columns: 1fr; gap: 4px; } .l-mailfolders ul { columns: 1; } }
.l-mailacc__more { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 4px; }
.l-mailfolders .l-mailform { padding: 8px 0; gap: 6px; }

/* Почта (этап 2 ТЗ почты, 02.11.2026): переключатель «Сообщения / Почта», список как в Spark, цепочка писем */
.l-modes { margin-bottom: 4px; }
.l-modes a { flex: 1 1 0; }
.l-mfilters { margin-top: 0; }
.l-mfilters a { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; }
.l-mdot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.l-mgroup { margin: 0; }
.l-mgroup > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 10px 16px 6px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: var(--tg-grey); }
.l-mgroup > summary::-webkit-details-marker { display: none; }
.l-mgroup > summary::after { content: "›"; font-size: 18px; transform: rotate(90deg); transition: transform var(--dur-fast); }
.l-mgroup:not([open]) > summary::after { transform: rotate(0deg); }
.l-mgroup__t { display: inline-flex; align-items: center; gap: 7px; color: var(--tg-text); }
.l-mgroup__t i { width: 8px; height: 8px; border-radius: 50%; background: var(--badge); }
.l-mgroup > summary .m-tertiary { margin-left: auto; text-transform: none; font-weight: 500; }
.l-mrow .l-chat__title { font-weight: 500; }
.l-mrow.is-unread .l-chat__title, .l-mrow.is-unread .l-mrow__subj { font-weight: 700; }
.l-mrow__subj { display: block; font-size: 14.5px; color: var(--tg-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.l-mrow .l-chat__last { -webkit-line-clamp: 1; }
.l-mrow__n { font-size: 12px; color: var(--tg-grey); padding: 0 6px; border-radius: 999px; background: color-mix(in srgb, var(--tg-text) 8%, transparent); }
.l-mrow__clip svg { width: 14px; height: 14px; color: var(--tg-grey); }
.l-mrow__new { --badge: var(--c-teal); font-size: 10.5px; }
.l-mrow__acc svg { width: 9px; height: 9px; }
.l-mthread { padding: 12px 16px 24px; display: grid; gap: 12px; align-content: start; }
.l-mletter { background: var(--tg-card); border-radius: 16px; padding: 12px 14px; display: grid; gap: 10px; box-shadow: 0 0 0 0.5px var(--tg-sep); }
.l-mletter__head { display: flex; gap: 10px; align-items: flex-start; }
.l-mletter__who { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.l-mletter__who .m-secondary { font-size: 13px; }
.l-mletter__meta { text-align: right; font-size: 12.5px; color: var(--tg-grey); display: grid; justify-items: end; gap: 3px; }
.l-mletter__acc { font-size: 11px; }
.l-mletter__frame { width: 100%; border: 0; border-radius: 10px; background: #fff; min-height: 60px; display: block; }
.l-mletter__text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; line-height: 1.45; }
.l-mletter__pics { font-size: 13px; color: var(--tg-grey); background: color-mix(in srgb, var(--c-orange) 10%, transparent); padding: 8px 10px; border-radius: 10px; }
.l-mletter__pics a { color: var(--tg-blue); font-weight: 600; }
.l-mletter__atts { display: flex; flex-wrap: wrap; gap: 8px; }
.l-mletter__att { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; font-size: 13.5px;
  background: color-mix(in srgb, var(--tg-text) 6%, transparent); max-width: 100%; }
.l-mletter__att svg { width: 16px; height: 16px; flex: none; }
.l-mletter__att span:first-of-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.l-mthread__bar .m-toolbar__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.l-mthread__bar { z-index: 10; }      /* над затемнением строки состояния (.l-feed::before/::after, z 9), как шапка чатов */
.l-mact { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; position: sticky; top: 0; z-index: 3; padding: 2px 0 6px; background: var(--tg-page, transparent); }
.l-mact__f { display: inline; margin: 0; }
.l-mact .m-btn { height: 32px; padding: 0 12px; font-size: 14px; }
.l-mact__menu .l-tagpick__menu { min-width: 220px; max-height: 60vh; overflow: auto; }
.l-mact__menu .l-tagpick__menu form { display: block; }
.l-mact__menu .l-tagpick__opt { width: 100%; text-align: left; border: 0; background: none; font: inherit; color: var(--tg-text); padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.l-mact__menu .l-tagpick__opt:hover { background: color-mix(in srgb, var(--tg-text) 8%, transparent); }
.l-mact__danger, .l-mact .l-mact__danger { color: var(--c-red); }
a.l-mletter__att { color: var(--tg-text); text-decoration: none; }
a.l-mletter__att:hover { background: color-mix(in srgb, var(--tg-blue) 14%, transparent); }
.l-mletter__pics form { display: inline; }
.l-mletter__pics .m-btn { height: auto; padding: 0; color: var(--tg-blue); font-weight: 600; font-size: 13px; }
.l-mletter__reply { display: flex; flex-wrap: wrap; gap: 6px; border-top: 0.5px solid var(--tg-sep); padding-top: 8px; }
.l-mletter__reply .m-btn { height: 30px; padding: 0 10px; font-size: 13.5px; }
.l-mcompose { gap: 10px; }
.l-mcompose label { display: grid; grid-template-columns: 90px 1fr; gap: 10px; align-items: center; }
.l-mcompose label > span { color: var(--tg-grey); font-size: 14px; }
.l-mcompose__body { width: 100%; box-sizing: border-box; min-height: 260px; resize: vertical; font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.l-mcompose__acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.l-mout { font-size: 13.5px; padding: 8px 12px; border-radius: 12px; background: color-mix(in srgb, var(--c-blue) 12%, transparent); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.l-mout--ok { background: color-mix(in srgb, var(--c-green) 12%, transparent); }
.l-mout--err { background: color-mix(in srgb, var(--c-red) 12%, transparent); }
.l-mout form { display: inline; }
.l-mout .m-btn { height: 26px; padding: 0 10px; font-size: 13px; }
@media (max-width: 600px) { .l-mcompose label { grid-template-columns: 1fr; gap: 4px; } }
/* Почта: настраиваемый вид (02.11.2026) */
.l-mday { padding: 10px 16px 4px; font-size: 12.5px; font-weight: 600; color: var(--tg-grey); }
.l-mlist .l-mrow .l-chat__last { -webkit-line-clamp: var(--mlines, 1); line-clamp: var(--mlines, 1); white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.l-mlist[style*="--mlines:0"] .l-mrow .l-chat__last { display: none; }
.l-mlist--noava .l-mrow { padding-left: 16px; }
.l-mrow[style*="--mstripe"] { box-shadow: inset 3px 0 0 var(--mstripe); }
.l-mletter--fold { padding: 0; }
.l-mletter--fold > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto auto 1fr; gap: 10px; align-items: baseline; padding: 10px 14px; }
.l-mletter--fold > summary::-webkit-details-marker { display: none; }
.l-mletter--fold[open] > summary { box-shadow: inset 0 -0.5px 0 var(--tg-sep); }
.l-mletter--fold > .l-mletter { box-shadow: none; border-radius: 0 0 16px 16px; }
.l-mletter__snip { color: var(--tg-grey); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
@media (min-width: 761px) {
  .l-main:has(> .l-list--mfull) { grid-template-columns: minmax(0, 1fr); }
  .l-list--mfull { display: none; }
}
.l-mview label { grid-template-columns: minmax(0, 260px) 1fr; }
.l-mview__h { font-size: 13px; font-weight: 600; color: var(--tg-grey); padding-top: 6px; }
.l-mailform__sig { width: 100%; box-sizing: border-box; resize: vertical; font: inherit; }
.l-mcompose label.l-mcompose__follow { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--tg-grey); }

/* Отметить человека через @ и вложения с ходом загрузки (04.11.2026) */
.l-composer:has(.l-mentions:not([hidden])) { overflow: visible; }
.l-mentions { position: absolute; left: 10px; right: 10px; bottom: 100%; margin-bottom: 6px; max-height: 240px; overflow-y: auto; padding: 4px; background: var(--tg-bg); border: 0.5px solid var(--tg-sep); border-radius: 14px; box-shadow: 0 4px 24px rgba(0,0,0,.18); z-index: 30; }
.l-mentions[hidden] { display: none; }
.l-mentions__row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 5px 8px; border: 0; border-radius: 10px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.l-mentions__row.is-on, .l-mentions__row:hover { background: rgba(127,127,127,.16); }
.l-mentions__ava { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(127,127,127,.3) center/cover; font-size: 13px; font-weight: 600; }
.l-mentions__row b { font-weight: 500; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.l-mentions__row small { opacity: .6; white-space: nowrap; }
.l-pendfile { justify-content: flex-end; }
.l-pendfile .l-bubble { min-width: 220px; }
.l-pendfile__item { display: grid; gap: 4px; margin-bottom: 6px; }
.l-pendfile__item img, .l-pendfile__item video { display: block; max-width: 280px; max-height: 240px; border-radius: 10px; object-fit: cover; }
.l-pendfile__name { font-size: 13px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 280px; }
.l-pendfile__bar { height: 3px; margin: 6px 0 4px; border-radius: 2px; background: rgba(127,127,127,.3); overflow: hidden; }
.l-pendfile__bar i { display: block; height: 100%; background: currentColor; transition: width .2s linear; }
.l-pendfile__bar[hidden] { display: none; }
.l-pendfile__st { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; opacity: .85; }
.l-pendfile__acts { display: flex; gap: 10px; flex: none; }
.l-pendfile__acts button { padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
.l-pendfile.is-bad .l-bubble { outline: 1.5px solid #e5484d; }
.l-pendfile.is-bad .l-pendfile__st { color: #e5484d; opacity: 1; }
.l-msg--out.l-pendfile.is-bad .l-pendfile__st { color: inherit; font-weight: 500; }
.l-chat__last > svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 3px; fill: none; stroke: currentColor; stroke-width: 2; }

/* Значки из спрайта (06.11.2026): обводка здесь, а не в 1000 копиях атрибутов; viewBox задан у <symbol> */
.l-i { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* «Настройки → Сотрудники» (поручения, 07.11.2026): карточка как у контакта — шапка, поля, тумблеры */
.l-staff { max-width: 560px; margin: 0 auto; padding-bottom: 24px; }
.l-staff__back { display: inline-flex; align-items: center; gap: 4px; color: var(--tg-blue); text-decoration: none; margin: 4px 0 8px; }
.l-staff__back svg { width: 18px; height: 18px; }
.l-staff__h { font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: .02em; color: var(--tg-grey); margin: 18px 16px 6px; }
.l-staff__hint { font-size: 12px; margin: 6px 16px 0; }
.l-staff__field { flex-direction: column; align-items: stretch; gap: 2px; }
.l-staff__in { border: 0; background: transparent; color: inherit; font: inherit; padding: 2px 0; resize: vertical; outline: none; width: 100%; }
.l-staff__sw { cursor: default; }
.l-staff__lab { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.l-staff__t { display: flex; align-items: center; gap: 8px; min-width: 0; }
.l-staff__t .m-badge { flex: none; }
.l-staff__t > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.l-staff__btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; margin: 20px 4px 0; }
.l-staff__del { color: var(--c-red); }
.l-staff__list, .l-staff__add { max-width: 560px; }
.l-staff__item { text-decoration: none; color: inherit; gap: 12px; }
.l-staff__item.is-off { opacity: .55; }
.l-staff__add .l-info__row { gap: 10px; }
.l-staff__add .m-select { flex: 1; min-width: 0; }
.l-staff__sw, .l-staff__item, .l-staff__add .l-info__row { display: flex; align-items: center; gap: 12px; }
.l-staff .l-info + .l-info, .l-staff__list + .l-staff__add { margin-top: 14px; }
.l-staff__field { display: flex; }
.l-staff__send { display: flex; gap: 8px; margin-top: 4px; }
.l-staff__send .m-select:first-child { flex: 0 0 140px; width: 140px; }
.l-staff__send .m-select:last-child { flex: 1 1 0; width: 0; min-width: 0; }
/* «Поручить» в карточке дела (поручения, этап 2): строки рядом с «Кто делает» */
.l-deleg__row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.l-deleg__row .m-select { flex: 1 1 220px; min-width: 0; }
.l-deleg__msg { width: 100%; margin-top: 8px; resize: vertical; font: inherit; font-size: 15px; }
/* «Распределить» (поручения, этап 3) */
.l-dist__row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.l-dist__t { flex: 1 1 260px; min-width: 0; display: grid; gap: 2px; }
.l-dist__row .m-select { flex: 0 1 300px; min-width: 0; }
.l-dist__foot { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 4px 0; }
.l-deleg__over { color: var(--c-red); font-weight: 600; }
a.l-dist__row { text-decoration: none; color: inherit; }
.l-staff__add + .l-staff__list { margin-top: 14px; }
.l-deleg__btns2 { display: flex; gap: 8px; }

/* кадр фото или видео в строке списка чатов, как в Telegram (07.11.2026) */
.l-chat__th{display:inline-block;position:relative;width:1.3em;height:1.3em;border-radius:3px;overflow:hidden;vertical-align:-.28em;margin-right:4px;background:var(--fill-tertiary,#8883)}
.l-chat__th img{display:block;width:100%;height:100%;object-fit:cover}
.l-chat__th.is-video::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-35%,-50%);border-left:6px solid #fff;border-top:4px solid transparent;border-bottom:4px solid transparent;filter:drop-shadow(0 0 1px rgba(0,0,0,.7))}

/* ПРАВИЛО НАВСЕГДА (владелец, 07.11.2026): зазор от низа последнего сообщения до верха поля ввода = зазор от низа поля до низа экрана
   (с клавиатурой — до клавиатуры). Исключение — чат с непрочитанными (лента стоит на первом непрочитанном).
   Нижний отступ ленты = поле 44 + 2 × отступ под полем − 1 (поле .l-msg). Меняете высоту или отступы поля — меняйте и это. */
@media (max-width: 760px) {
  .l-msgs { padding-bottom: calc(43px + 2 * max(10px, calc(env(safe-area-inset-bottom) - 12px))); }
  html.is-kb .l-msgs { padding-bottom: 55px; }
}
.m-btn.is-saved { background: var(--c-green, #34c759); border-color: transparent; color: #fff; }
.l-chat__draft { color: var(--c-red, #ff3b30); }