/* Мобильная версия (телефон). Всё — под html.mob: класс ставит js/мобильная.js на узком экране
   (до 700 px) или по ?mob=1. Компьютерный вид этим файлом не меняется вовсе.

   Устройство: тот же app.js, те же сущности и настройки канбана, но другая оболочка —
   сверху «+», название и вид, под ними поиск; снизу капсула «дом · сущности · ещё».
   Лента — это канбан, сложенный столбцами друг под друга (как настроили на компьютере,
   так и показывается); вторая картинка — таблица, она листается пальцем в обе стороны.
   Макет: Figma «Все фиксациии», 393 × 852. */

html.mob{--mob-r:min(22px,calc(14px * var(--el,1)));--mob-bar:97px;--mob-cap:var(--chip-bg);--mob-line:var(--stroke,#D1D1D6);--mob-gray:#8E8E93}
html.mob body{zoom:1;--ui:1;font-size:15px;-webkit-text-size-adjust:100%;overscroll-behavior:none}
html.mob .app{flex-direction:column;height:100%}
html.mob .side{display:none}
html.mob .main{border-left:0;width:100%;max-width:100%;min-height:0}

/* ---------- верхняя полоса ---------- */
html.mob .top{display:grid;grid-template-columns:37px minmax(0,1fr) 37px;
  grid-template-areas:"cr tt vm" "sr sr sr" "tb tb tb";align-items:center;gap:0 10px;
  padding:calc(10px + env(safe-area-inset-top)) 13px 0;position:relative;z-index:5;
  background:var(--panel);box-shadow:none}
html.mob .top h1{grid-area:tt;margin:0;text-align:center;
  font:600 22px/26px var(--font-h2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.mob .top h1::after{display:none}
html.mob .bar,html.mob .bar-side,html.mob .bar-mid{display:contents}
html.mob #pagehere,html.mob #fbtn,html.mob #rbtn,html.mob #pbtn,html.mob #shareBtn,html.mob #lookBtn,
html.mob #setBtn,html.mob #moreBtn,html.mob #modePill,html.mob #plMode,html.mob #vmode{display:none!important}

/* «+» — создать запись */
html.mob #createBtn{grid-area:cr;width:37px;height:37px;min-width:0;padding:0;border-radius:13px;
  display:flex;align-items:center;justify-content:center;background:var(--accent);color:#fff;box-shadow:none}
html.mob #createBtn:active{background:var(--accent-d)}   /* основной цвет системы из «Оформления», а не серый */
html.mob #createBtn span{display:none}
html.mob #createBtn .i{display:block;width:16px;height:16px;opacity:1;margin:0}
/* Кнопка вида (#mVm) на телефоне не показывается: она хранит состояние вида, а нажать на неё предлагает шторка «Действия» (мобильная.js, шторкаЕщё) */
html.mob #mVm{display:none!important}

/* Поиск — как в Телеграме: виден вверху, схлопывается, когда лента пошла вниз,
   и возвращается, как только её потянули обратно. */
html.mob .search{grid-area:sr;display:flex;align-items:center;justify-content:center;gap:6px;
  height:36px;margin:10px 0 10px;padding:0 12px;border-radius:13px;background:var(--mob-cap);
  flex:none;width:auto;max-width:none;overflow:hidden;
  transition:height .22s var(--ez,ease),margin .22s var(--ez,ease),opacity .18s ease}
html.mob .search input{flex:1 1 auto;min-width:0;font-size:16px;text-align:center;background:none;border:0;padding:0}
html.mob .search input:focus{text-align:left}

/* ---------- содержимое ---------- */
html.mob .wrap{border-top:0;-webkit-overflow-scrolling:touch}
html.mob #wrap,html.mob #altWrap,html.mob #listPane{padding-bottom:calc(var(--mob-bar) + 10px)}

/* Лента = канбан столбцами друг под другом. Пустые столбцы не показываем: тащить карточки здесь некуда. */
html.mob .kan{display:block;height:auto;min-height:100%;padding:0;overflow:visible}
html.mob .kcol{flex:none;width:100%;max-height:none;border-radius:0;box-shadow:none;margin:0;border:0;overflow:visible}
html.mob .kcol.cut{max-height:none;margin-bottom:0}
html.mob .kcol:has(.kempty){display:none}
html.mob .khead{position:sticky;top:0;z-index:3;padding:10px 13px;min-height:38px}
html.mob .khead .kt{font:700 15px/18px var(--font-h2)}
html.mob .klist{overflow:visible}
html.mob .kcard{padding:10px 13px}
html.mob #altWrap{overflow-y:auto}

/* ---------- нижняя капсула ---------- */
html.mob #mNav{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;gap:10px;
  padding:20px 13px calc(14px + env(safe-area-inset-bottom));pointer-events:none;
  background:linear-gradient(rgba(255,255,255,0),var(--panel) 55%)}
html.mob #mNav > *{pointer-events:auto}
/* Капсула прячется вниз при прокрутке ленты вниз и возвращается при прокрутке вверх (мобильная.js, барСдвиг). Только transform:
   раскладка и высота не меняются, лента под ней не прыгает. Возврат мягкий и чуть длиннее ухода — глаз ловит появление. */
html.mob #mNav{transition:transform .26s cubic-bezier(.22,1,.36,1);will-change:transform}
html.mob #mNav.mn-hide{transform:translateY(calc(100% + 12px));transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}
html.mob #mNav.mn-hide > *{pointer-events:none}
@media (prefers-reduced-motion:reduce){html.mob #mNav,html.mob #mNav.mn-hide{transition:none}}
html.mob .mn-b{flex:0 0 37px;width:37px;height:37px;border-radius:13px;border:var(--stroke-w,.5px) solid var(--mob-line);
  background:rgba(240,240,240,.8);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  display:flex;align-items:center;justify-content:center;padding:0;color:#565656}
html.mob .mn-b.home{color:#32ADE6}
html.mob .mn-b svg{width:17px;height:17px;fill:currentColor}
html.mob .mn-cap{flex:1 1 auto;min-width:0;height:36px;border-radius:13px;border:var(--stroke-w,.5px) solid var(--mob-line);
  background:rgba(240,240,240,.8);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  display:flex;align-items:center;gap:5px;padding:2px;overflow:hidden}
html.mob .mn-p{flex:0 0 auto;border:0;background:none;border-radius:9px;padding:7px 10px;height:31px;
  font:400 14px/17px var(--font-body);color:#5A5A5E;white-space:nowrap}
html.mob .mn-p.on{background:#F1F1F1;color:#000;box-shadow:0 0 0 .5px rgba(0,0,0,.04)}

/* ---------- шторки «Дом» и «Ещё» ---------- */
/* Шторка всегда в DOM, закрытая — visibility:hidden (после ухода окна, поэтому задержка): так transform и фон доигрывают анимацию и на
   открытие, и на закрытие. Выезд снизу быстрый (0,32 с, мягкое торможение), уход ещё быстрее (0,24 с). Тянуть вниз и закрывать
   по тапу вне окна умеет мобильная.js (шторкаЖест): во время жеста transform и opacity пишутся inline. */
html.mob #mSheet{position:fixed;inset:0;z-index:60;display:block;visibility:hidden;pointer-events:none;transition:visibility 0s linear .26s}
html.mob #mSheet.on{visibility:visible;pointer-events:auto;transition-delay:0s}
html.mob .ms-back{position:absolute;inset:0;background:rgba(0,0,0,.28);opacity:0;transition:opacity .24s ease}
html.mob #mSheet.on .ms-back{opacity:1}
html.mob .ms-box{position:absolute;left:0;right:0;bottom:0;max-height:82%;overflow:auto;background:var(--panel);
  border-radius:20px 20px 0 0;padding:8px 13px calc(20px + env(safe-area-inset-bottom));
  box-shadow:0 -8px 30px rgba(0,0,0,.18);overscroll-behavior:contain;
  transform:translateY(100%);transition:transform .24s cubic-bezier(.4,0,.2,1);will-change:transform}
html.mob #mSheet.on .ms-box{transform:translateY(0);transition:transform .32s cubic-bezier(.22,1,.36,1)}
@media (prefers-reduced-motion:reduce){html.mob #mSheet,html.mob .ms-back,html.mob .ms-box,html.mob #mSheet.on .ms-box{transition:none}}
html.mob .ms-grab{width:36px;height:5px;border-radius:3px;background:#D1D1D6;margin:4px auto 12px}
html.mob .ms-h{font:600 13px/16px var(--font-body);color:var(--mob-gray);margin:14px 6px 6px;text-transform:none}
html.mob .ms-row{display:flex;align-items:center;gap:12px;width:100%;border:0;background:none;text-align:left;
  padding:11px 6px;border-radius:12px;font:400 16px/20px var(--font-body);color:#000}
html.mob .ms-row:active{background:var(--mob-cap)}
html.mob .ms-row .ms-i{flex:0 0 28px;width:28px;height:28px;border-radius:9px;display:flex;align-items:center;justify-content:center}
html.mob .ms-row .ms-i svg{width:18px;height:18px}
html.mob .ms-row.on{color:var(--accent-d)}
html.mob .ms-row.ms-out{margin-top:6px;border-top:1px solid var(--stroke);border-radius:0;color:#E5413A}      /* «Выйти» — отдельной строкой внизу шторки «Дом», красным */
html.mob .ms-who{display:flex;align-items:center;gap:12px;padding:6px 6px 10px}
html.mob .ms-who .ava{flex:0 0 40px;width:40px;height:40px}
html.mob .ms-who b{display:block;font:600 16px/19px var(--font-body)}
html.mob .ms-who span{display:block;font:400 13px/16px var(--font-body);color:var(--mob-gray)}

/* ---------- карточка записи: на весь экран, без чата (чат — отдельная кнопка) ---------- */
/* Выезд как «вглубь» в iOS: карточка идёт справа мягкой кривой (--sheet-ez: быстрый старт, долгое торможение) 0,38 с, уходит за 0,28 с; на левой
   кромке у неё тень, а страница под ней темнеет (#mCardDim, ниже). Закрытая — без тени, иначе её край торчал бы у правой границы экрана. */
html.mob{--sheet-ez:cubic-bezier(.32,.72,0,1)}
html.mob .drawer,html.mob .drawer.linked{left:0;right:0;width:100%;max-width:none;box-shadow:none;
  transform:translateX(100%);transition:transform .28s var(--sheet-ez),box-shadow .28s ease;z-index:55}
html.mob .drawer.on,html.mob .drawer.linked.on{transform:none;box-shadow:-14px 0 40px rgba(0,0,0,.2);transition:transform .38s var(--sheet-ez),box-shadow .38s ease}
html.mob #mCardDim{position:fixed;inset:0;z-index:54;background:#000;opacity:0;pointer-events:none;transition:opacity .38s var(--sheet-ez)}
html.mob:has(#drawer.on) #mCardDim,html.mob:has(#drawer2.on) #mCardDim{opacity:.22}
@media (prefers-reduced-motion:reduce){html.mob .drawer,html.mob .drawer.on,html.mob #mCardDim{transition:none}}
html.mob .dh{padding-top:env(safe-area-inset-top)}
html.mob .dsplit{display:block;position:relative;overflow:hidden}
html.mob .dsplit > .db{width:100%;height:100%;max-width:none;overflow:auto;-webkit-overflow-scrolling:touch;padding-bottom:calc(30px + env(safe-area-inset-bottom))}
html.mob .dgrip,html.mob .grip,html.mob #stripGrip{display:none!important}
html.mob .drawer .dside{display:none}
html.mob .drawer.mob-chat .dside{display:flex;flex-direction:column;position:absolute;inset:0;width:100%;border-left:0;z-index:2;background:var(--chat-surface)}
html.mob .dsbar{padding-bottom:calc(10px + env(safe-area-inset-bottom))}
html.mob .drawer.mob-chat .dsplit > .db{visibility:hidden}
html.mob .drawer.linked .dsplit > .db,html.mob .drawer .dsplit > .db{flex:1 1 auto;width:100%}
html.mob #dback1,html.mob #dback1[hidden]{display:flex}
html.mob #dclose{display:none}
html.mob .mchat{display:flex;align-items:center;justify-content:center;color:var(--mob-gray)}
html.mob .mchat svg{width:20px;height:20px}
html.mob .mchat.on{color:var(--accent-d)}

/* Разделы карточки — друг под другом, а не в ряд: на телефоне рядом они не помещаются. Подпись поля уже,
   чтобы значению осталось место. */
html.mob .fsecrow{flex-direction:column;align-items:stretch;gap:20px;flex-wrap:nowrap}
html.mob .fsecrow > .fsec,html.mob .fsec{flex:1 1 auto!important;width:100%!important;max-width:none;min-width:0}
html.mob .db{padding-left:13px;padding-right:13px}
html.mob .fk{flex:0 1 38%;min-width:0;max-width:44%}
html.mob .secgrip{display:none!important}

/* Панель фильтров лежит в потоке полосы: на всю ширину под поиском, листается сама. */
html.mob .top > .fpanel{grid-column:1 / -1;margin-inline:-13px;max-height:62vh;overflow:auto}
html.mob .fpanel .fbody{padding:14px 13px}

/* Новая запись — тот же экран на всю высоту, а не окно: внизу «Отменить / Создать». */
html.mob body.cardnew #drawer:not(.linked),html.mob body.cardnew2 #drawer2{position:fixed;left:0;top:0;right:0;bottom:0;
  width:100%;max-height:none;height:100%;border-radius:0;box-shadow:none;transform:translateX(100%);opacity:1;
  transition:transform .28s var(--sheet-ez),box-shadow .28s ease}
html.mob body.cardnew #drawer:not(.linked).on,html.mob body.cardnew2 #drawer2.on{transform:none;box-shadow:-14px 0 40px rgba(0,0,0,.2);transition:transform .38s var(--sheet-ez),box-shadow .38s ease}
html.mob #drawer .dnew,html.mob #drawer2 .dnew{padding-bottom:calc(14px + env(safe-area-inset-bottom))}
html.mob body.cardnew .scrim{display:none}
html.mob body.cardnew #mChat,html.mob body.cardnew2 #mChat2{display:none}

/* ======================= этап 2 ======================= */
/* ---------- главный календарь: «Расписание» (список) или «Месяц» (сетка), кнопка вида переключает ---------- */
html.mob body.calpage .top{padding-left:13px}
html.mob .cal{padding-left:0;display:block;height:100%;overflow:hidden;position:relative}
html.mob .cal .calside{position:static;left:auto;width:100%;height:100%;border-right:0;display:flex;z-index:auto}
html.mob .cal .calmain{display:none;height:100%}
html.mob.mob-cal-grid body.calpage .cal .calside,html.mob .cal.mcal-ent .calside{display:none}
html.mob.mob-cal-grid body.calpage .cal .calmain,html.mob .cal.mcal-ent .calmain{display:flex}
html.mob .calsubs{max-height:34%;padding:8px 13px}
html.mob .calsubs .cs-k{display:none}
html.mob .cs-row{padding:6px 0}
html.mob .aghead{padding:0 13px}
html.mob .agit{padding:12px 13px}
html.mob .calagenda{padding-bottom:calc(var(--mob-bar) + 10px)}
/* Месяц как в Google Календаре: клетка на день, в ней плашки с названием (обрезаются), сверху — полоса месяцев.
   Подробности дня — по нажатию (шторка). Своя полоса (#mcal) собирается мобильная.js, родная полоса компьютера скрыта. */
html.mob .cal .calbar{display:none}
html.mob .calhead div{padding:8px 0 6px;text-align:center;font-size:12px}
html.mob .calgrid{grid-auto-rows:minmax(92px,1fr);overflow-x:hidden;padding-bottom:calc(var(--mob-bar) + 10px)}
html.mob .calday{padding:3px 2px;gap:2px;align-items:stretch}
html.mob .calday .dn{align-self:center;font-size:13px;margin-bottom:1px}
html.mob .calday .calev{padding:1px 3px;border-radius:4px;font-size:10.5px;line-height:15px;gap:2px;pointer-events:none}
html.mob .calday .calev > :not(.calev-t){display:none}
html.mob .calday .calmore{font-size:10px;line-height:13px;padding:0;text-align:center;pointer-events:none}
html.mob .ms-dot{flex:0 0 10px;width:10px;height:10px;border-radius:50%;margin:0 9px 0 4px}
html.mob .ms-add{color:var(--accent-d);font-weight:500}

html.mob #dclose2,html.mob #dclose2[hidden]{display:flex}

/* Вкладки страницы (Пользователи: список / оргструктура / сводка / права / активность; Отчёты и планы: дашборды / отчёты / планы):
   в полосе компьютера это значки и переключатель, которые на телефоне спрятаны, — здесь они плашками под поиском. */
html.mob #mTabs{grid-area:tb;display:flex;gap:6px;overflow-x:auto;padding:0 0 10px;margin:0 -13px;padding-inline:13px;scrollbar-width:none}
html.mob #mTabs::-webkit-scrollbar{display:none}
html.mob #mTabs[hidden]{display:none}
html.mob .mt-b{flex:0 0 auto;border:0;border-radius:10px;padding:7px 13px;background:var(--mob-cap);color:#5A5A5E;
  font:400 14px/17px var(--font-body);white-space:nowrap}
html.mob .mt-b.on{background:#E3E3E8;color:#000}

/* ---------- окна отчёта, настройки плана и списка планов — на весь экран ---------- */
html.mob .rwin,html.mob .plwin,html.mob .pwin{left:0!important;top:0!important;width:100%!important;height:100%!important;
  max-width:none;transform:none!important;border-radius:0;box-shadow:none;z-index:62}
html.mob .rwin-rs,html.mob .rwin-grip{display:none!important}
html.mob .rwin-head{padding:calc(12px + env(safe-area-inset-top)) 13px 10px;gap:10px}
html.mob .rwin-saved{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -13px;padding:0 13px}
html.mob .rwin-saved::-webkit-scrollbar{display:none}
html.mob .rwin-saved .r-pill{flex:0 0 auto}
html.mob .rwin-body{flex-direction:column;overflow:auto;-webkit-overflow-scrolling:touch}
html.mob #rwin .rwin-side,html.mob #pwin .rwin-side,html.mob .rwin-side{flex:0 0 auto!important;width:100%;border-right:0;
  border-bottom:var(--stroke-w) solid var(--line);overflow:visible;padding:14px 13px}
html.mob .r-result{flex:0 0 auto;overflow:visible;padding:14px 13px}
html.mob .rwin-body > .r-zoom{position:static;align-self:flex-end;margin:10px 13px 0;order:1}
html.mob .rwin-body > .r-result{order:2}
html.mob .rwin-foot{padding:10px 13px calc(10px + env(safe-area-inset-bottom));flex-wrap:wrap;gap:8px}
html.mob .rwin-foot .r-hint{display:none}
html.mob .rwin-foot-act{width:100%;justify-content:space-between;gap:8px}
html.mob .rwin-foot-act .btn{flex:1 1 auto}
html.mob .plwin-body{padding:14px 13px}
html.mob .r-form .fk{flex:0 1 40%}
html.mob.mob-modal #mNav{display:none}

/* ---------- настройка сущности: на весь экран, меню разделов — плашками сверху, образец справа скрыт ---------- */
html.mob .eset{left:0;inset:0;z-index:62}
html.mob .eset-h{padding:calc(10px + env(safe-area-inset-top)) 13px 10px;gap:8px;flex-wrap:wrap}
html.mob .eset-t{flex:1 1 100%;font-size:19px;line-height:23px}
html.mob .eset-h .lnk,html.mob .eset-h .btn{flex:0 0 auto}
html.mob .eset-h .btn{margin-left:auto}
html.mob .eset-b{flex-direction:column;overflow:hidden}
html.mob .eset-m{flex:0 0 auto;flex-direction:row;overflow-x:auto;padding:8px 13px;gap:6px;border-right:0;
  border-bottom:var(--stroke-w) solid var(--line);scrollbar-width:none}
html.mob .eset-m::-webkit-scrollbar{display:none}
html.mob .eset-m button{flex:0 0 auto;padding:7px 12px;gap:8px}
html.mob .eset-m .eset-del{margin-top:0;margin-left:auto}
html.mob .eset-work{flex:1 1 auto;min-width:0;width:100%}
html.mob .eset-work .db{padding:14px 13px}
html.mob .eset-prev,html.mob .eset-grip{display:none!important}
html.mob .fe-cell{min-width:0}
html.mob .frow.fedit{flex-wrap:wrap}
html.mob .frow.fedit > .fe-cell{flex:1 1 40%}
html.mob .fe-line{flex-wrap:wrap}
html.mob .fe-line > .fe-name{flex:1 1 100%}
html.mob .fe-line > .fe-cell:not(.fe-name){flex:1 1 45%;min-width:120px}
html.mob .frow.fedit > .fe-cell{flex:0 0 auto}
html.mob .frow.fedit > .fe-body{flex:1 1 100%;min-width:0}

/* ---------- выпадающие списки и меню — снизу, как шторка (подсказки под полем, дата и время остаются у поля) ---------- */
html.mob .picker:not(.sugbox):not(.daypick):not(.timepick){left:0!important;right:0!important;top:auto!important;bottom:0!important;
  width:100%!important;max-width:none!important;max-height:68%;border-radius:20px 20px 0 0;
  padding:6px 6px calc(14px + env(safe-area-inset-bottom));box-shadow:0 -8px 30px rgba(0,0,0,.2);z-index:96;display:flex;flex-direction:column}
html.mob .picker:not(.sugbox):not(.daypick):not(.timepick) .pk-list{max-height:none;flex:1 1 auto}
html.mob .pk-item{padding:12px 12px;font-size:16px;line-height:20px}
html.mob .pk-q{padding:12px 14px;font-size:16px}
/* Переключатель «Время» у даты — отдельной строкой под значением: рядом с диапазоном дат ему не хватает места. */
html.mob .frow:has(> .dtog){flex-wrap:wrap}
html.mob .frow > .dtog{flex:1 1 100%;justify-content:space-between;border-top:var(--stroke-w) solid var(--line2)}

/* ======================= правки по телефону Руслана (22.10.2026): масштаб как в Телеграме ======================= */
/* Экран не прыгает, когда браузер прячет и показывает свои панели: вся страница — один неподвижный лист по высоте
   видимой области, листаются только внутренние списки. */
html.mob{height:100%;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
html.mob body{position:fixed;inset:0;width:100%;height:100dvh;overflow:hidden}
html.mob .app{height:100dvh}
html.mob{--mob-btn:46px;--mob-bar:112px;--fs:16px;--cfs:16px;--row:14px}
/* Подсказки по наведению на телефоне не нужны: они съедают первое нажатие (iOS показывает «наведение» и ждёт второго). */
html.mob [data-tip]::after,html.mob [data-tip]::before{display:none!important}
html.mob input,html.mob textarea,html.mob select{font-size:16px}

/* верхняя полоса */
html.mob .top{grid-template-columns:var(--mob-btn) minmax(0,1fr) var(--mob-btn);gap:0 12px;
  padding:calc(env(safe-area-inset-top) + 16px) 14px 0}
html.mob .top h1{font:700 26px/30px var(--font-h1)}   /* было 20 px: название раздела терялось рядом с поиском */
html.mob #createBtn{width:var(--mob-btn);height:var(--mob-btn);border-radius:var(--mob-r)}      /* скругление — общая настройка (--mob-r из --el), как у поиска и капсулы */
html.mob #createBtn .i{width:20px;height:20px}
/* Скругление поиска — из общей настройки «Скругление элементов» (--el) через --mob-r (одно на поиск и нижнюю капсулу; на компьютере у поиска calc(13px * var(--el))); не больше половины высоты. */
html.mob .search{height:44px;margin:12px 0 10px;border-radius:var(--mob-r);padding:0 14px}
html.mob .search input{font-size:17px}
html.mob .search .sico{width:18px;height:18px}
/* Лупа уменьшается пропорционально плашке при прокрутке (переменные ставит поискСдвиг) и остаётся в середине видимой части. */
html.mob .search .sico{transform:translateY(var(--my,0px)) scale(var(--mk,1));transform-origin:center;will-change:transform}
html.mob:has(#altWrap .kan:not(.kan-flat)) .search .sico,html.mob:has(#wrap:not([hidden])) .search .sico{transform:scale(var(--mk2,1))}
html.mob .mt-b{padding:0 16px;height:40px;border-radius:12px;font-size:16px;line-height:40px}
html.mob #mTabs{padding-bottom:12px}

/* лента */
html.mob .khead{padding:12px 14px;min-height:44px}
html.mob .khead .kt{font:700 17px/22px var(--font-h2)}
html.mob .khead .kn{font-size:15px}
html.mob .kcard{padding:12px 14px;gap:12px}
html.mob .kc-ava{flex:0 0 52px;width:52px;height:52px;border-radius:16px}
html.mob .kc-body{gap:8px}
html.mob .kc-par{gap:4px}
html.mob .kc-title{font:600 17px/22px var(--font-body)}
html.mob .kc-p{font:400 16px/21px var(--font-body)}
html.mob .kc-p.chip{font-size:14px;line-height:19px;padding:1px 10px}
html.mob .kc-badge{min-width:20px;height:20px;font-size:13px;line-height:20px}

/* нижняя капсула: листается пальцем, кнопки крупнее */
html.mob #mNav{gap:10px;padding:14px 14px calc(8px + env(safe-area-inset-bottom))}   /* низ — 8 px над безопасной зоной (как в календаре): больше места странице */
html.mob .mn-b{flex:0 0 var(--mob-btn);width:var(--mob-btn);height:var(--mob-btn);border-radius:23px}
html.mob .mn-b svg{width:23px;height:23px}
html.mob .mn-cap{height:var(--mob-btn);border-radius:23px;padding:4px;gap:4px;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch}
html.mob .mn-cap::-webkit-scrollbar{display:none}
html.mob .mn-p{height:38px;padding:0 16px;border-radius:19px;font:500 16px/38px var(--font-body);
  scroll-snap-align:center}

/* шторки */
html.mob .ms-row{padding:14px 8px;font-size:17px;gap:14px}
html.mob .ms-row .ms-i{flex:0 0 32px;width:32px;height:32px;border-radius:10px}
html.mob .ms-row .ms-i svg{width:20px;height:20px}
html.mob .ms-h{font-size:14px;margin:16px 8px 6px}
html.mob .ms-who b{font-size:18px;line-height:22px}
html.mob .pk-item{padding:14px 12px;font-size:17px}

/* карточка записи */
html.mob .dh-top{gap:6px;padding-top:12px}
html.mob .dh h2{font-size:22px;line-height:27px}
html.mob .dh-top .x,html.mob .dback1,html.mob .dback2{width:44px;height:44px;flex:0 0 44px;border-radius:22px;display:flex;align-items:center;justify-content:center}
html.mob .dh-top .x svg,html.mob .dback1 svg,html.mob .dback2 svg{width:20px;height:20px}
html.mob .mchat svg{width:24px;height:24px}
html.mob #dgear,html.mob #dgear2{display:none!important}
html.mob .fk{font-size:15px;line-height:20px}
html.mob .fv{font-size:17px;line-height:22px}
html.mob .dnew{padding:12px 14px calc(12px + env(safe-area-inset-bottom));gap:12px}
html.mob .dnew .btn,html.mob .dnew .lnk{height:46px;padding:0 22px;font-size:17px;border-radius:14px}
html.mob .dstages .dstg{font-size:15px;padding:8px 14px}
html.mob .dside{--cfs:16px}

/* таблица */
html.mob .wrap table{font-size:15px}
html.mob .wrap th{font-size:13px}
html.mob .wrap td,html.mob .wrap th{padding-top:12px;padding-bottom:12px}

/* чат — размеры как в Телеграме: текст 17, время 13, облачко с большим скруглением, поле ввода 46 */
html.mob .dside{--cfs:17px}
html.mob .fd-b{--fdr:20px;--fdpy:8px;--fdpx:14px;max-width:86%}      /* облачко на телефоне: радиус и поля — переменные, снимки внутри считают от них свои углы */
html.mob .fd-t{font:400 17px/22px var(--font-body)}
html.mob .fd-line{--tw:64px}
html.mob .fd-time{font-size:13px;line-height:18px}
html.mob .fd-who{font:600 15px/20px var(--font-body);margin:0 0 2px}
html.mob .fd-who span{font-size:13px}
html.mob .fd-av{width:36px;height:36px}
html.mob .fd-row{gap:8px;margin-top:6px}
html.mob .fd-row.fd-re-out{column-gap:8px;grid-template-columns:auto fit-content(86%)}
html.mob .fd-row.fd-re-out:not(:has(> .fd-av)),html.mob .fd-row.my.fd-re-out{grid-template-columns:fit-content(86%)}
html.mob .fd-chain:has(> .fd-chain-l > .fd-row.fd-re-out:last-child) > .fd-av{margin-bottom:34px}      /* телефон: капсула 28 + зазор 2 + отступ 4 */
html.mob .fd-day span{padding:5px 14px;font-size:14px;line-height:19px}
html.mob .fd-gpill{font-size:14px;line-height:19px;padding:5px 14px}
html.mob .fd-gpill .fd-arr{font-size:14px;line-height:19px}
html.mob .fd-sys{font-size:14px}
/* Нижний отступ — запас под панель ввода, которая лежит поверх ленты «стеклом» (`--стек`, см. style.css): общее правило `.dsbody` его задаёт, но это правило, как более
   частное, перебивало его — последнее сообщение уходило под строку ввода. */
html.mob .dsbody{padding:10px 10px calc(var(--стек, 0px) + 12px)}
html.mob .dsbar{align-items:center;gap:10px;padding:10px 14px calc(20px + env(safe-area-inset-bottom))}
html.mob .dsplus{width:46px;height:46px;flex:0 0 46px;border-radius:var(--mob-r);font-size:24px}
html.mob .dsin{height:46px;min-height:46px;border-radius:var(--mob-r);padding:0 18px;font-size:17px;line-height:22px}
html.mob .dsin.task{height:46px;min-height:46px;max-height:46px;font-size:16px}
html.mob textarea.dsin{padding:11px 18px;line-height:22px}
html.mob .popscrim{display:none!important}
/* «Добавить задачу…» — кнопкой-значком: полоса ввода как в Телеграме — «+», широкое поле сообщения, одна кнопка справа */
html.mob .dsin.task{flex:0 0 46px;width:46px;min-width:46px;padding:0;font-size:0;color:transparent;
  background:var(--card-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233B7D5E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='4'/%3E%3Cpath d='m8.5 12.3 2.4 2.4 4.6-5'/%3E%3C/svg%3E") center/24px no-repeat}

/* вкладки ленты в карточке (капсула): текст по центру, поиск и значок настройки крупнее */
html.mob .dstabs button{display:flex;align-items:center;justify-content:center;padding:9px 14px;font-size:16px;line-height:20px}
html.mob .dstabs-r button{width:42px;height:38px;padding:0}
html.mob .dstabs-r button svg{width:24px;height:24px}
html.mob .dstabs-l,html.mob .dstabs-r{padding:5px}
/* обе капсулы вкладок ленты — одной высоты */
html.mob .dstabs-l,html.mob .dstabs-r{height:50px;box-sizing:border-box;align-items:center}
html.mob .dstabs-l button{height:40px}
html.mob .dstabs-r button{height:40px}
/* Фон страницы за краями — тот же, что у самой страницы: зона у «острова» и под ним не серая, а сплошная */
html.mob,html.mob body{background:var(--panel)}

/* Капсулы, меню и плашки — без прозрачности и размытия: сплошные. Капсулы дат и групп изменений в ленте остаются полупрозрачными, как были. */
html.mob .mn-b,html.mob .mn-cap{background:var(--chip-bg)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html.mob #mNav{background:var(--panel)}
html.mob .dnav-cap,html.mob .dstabs-l,html.mob .dstabs-r,html.mob .ac-cap,html.mob .ac-btn,html.mob .ac-ent,html.mob .dstabs{
  background:var(--card-bg)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html.mob .dstabs{background:transparent!important}

/* Стрелка «назад» у соседней карточки есть всегда: на первом уровне закрывает, глубже — ведёт на уровень выше */
html.mob #dback2,html.mob #dback2[hidden]{display:flex}
html.mob body.cardnew2 #dback2{display:none}

/* Меню сообщения (долгое нажатие) — шторка снизу, реакции крупно */
html.mob .fdmenu{position:fixed!important;left:0!important;right:0!important;top:auto!important;bottom:0!important;
  width:100%!important;min-width:0;max-height:78%;overflow:auto;border-radius:20px 20px 0 0;
  padding:10px 8px calc(14px + env(safe-area-inset-bottom));box-shadow:0 -8px 30px rgba(0,0,0,.22);z-index:97}
/* Шторка выезжает снизу и уезжает вниз — как «Ещё» и действия на главном экране; кривая та же, что у #mSheet. */
@keyframes fdm-in{from{transform:translateY(100%)}to{transform:none}}
@keyframes fdm-out{from{transform:none}to{transform:translateY(100%)}}
html.mob .fdmenu{animation:fdm-in .32s cubic-bezier(.22,1,.36,1) both}
html.mob .fdmenu.fdm-out{animation:fdm-out .2s cubic-bezier(.4,0,1,1) both;pointer-events:none}
@media (prefers-reduced-motion:reduce){html.mob .fdmenu,html.mob .fdmenu.fdm-out{animation:none}}
html.mob .fdmenu > button,html.mob .fdmenu .dstabm button[data-a]{padding:14px 12px;font-size:17px;line-height:22px}
html.mob .fdmenu .fdq{padding:4px 0 10px;gap:2px;justify-content:space-around}
html.mob .fdmenu .fdq-e,html.mob .fdmenu .fdq-more{font-size:26px;width:40px;height:40px;flex:0 0 40px;box-sizing:border-box;padding:0;border-radius:50%}
html.mob .fdmenu .fdq-extra.on{display:flex;flex-wrap:wrap}
/* iOS: без своей рамки с «Скопировать/Поделиться» на облачке и без выделения при удержании — меню наше */
html.mob .fd-row,html.mob .fd-sys,html.mob .kcard,html.mob .agit,html.mob .wrap td{-webkit-touch-callout:none}
html.mob .fd-row,html.mob .fd-b,html.mob .fd-b *,html.mob .fd-sys{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

/* лица в плашке «N изменений»: мелкие, как на компьютере — крупными они разрывали плашку */
html.mob .fd-gpill .fd-av,html.mob .fd-gpill .fd-av-more,html.mob .fd-sys .fd-av{width:24px;height:24px;font-size:10px}
html.mob .fd-gpill .fd-avs{gap:0}
html.mob .fd-gpill .fd-avs .fd-av + .fd-av{margin-left:-8px}
html.mob .fd-gpill{padding:5px 12px}

/* Залипшая подпись дня в ленте задач встаёт под заголовком столбца, а не на него (высота заголовка 12+22+12) */
html.mob .klist .fd-day{top:46px}


/* ======================= виды телефона: список (по умолчанию), канбан со свайпом, таблица ======================= */
/* Список: карточки подряд, без столбцов этапов */
html.mob .kan.kan-flat .kcol.kflat{margin:0}
html.mob .kflat .klist{overflow:visible}
/* Канбан: столбец — экран, листается пальцем; заголовок столбца держится вверху своего списка */
html.mob .kan:not(.kan-flat){display:flex;flex-direction:row;height:100%;min-height:0;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:0;gap:0}
html.mob .kan:not(.kan-flat) .kcol,html.mob .kan:not(.kan-flat) .kcol:has(.kempty){flex:0 0 100%;width:100%;height:100%;
  display:flex;flex-direction:column;scroll-snap-align:start;scroll-snap-stop:always}
html.mob .kan:not(.kan-flat) .khead{position:static;flex:0 0 auto}
html.mob .kan:not(.kan-flat) .klist{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding-bottom:calc(var(--mob-bar) + 10px)}
html.mob .kan:not(.kan-flat) .kempty{visibility:hidden}
html.mob #altWrap:has(.kan:not(.kan-flat)){overflow:hidden;padding-bottom:0}
html.mob .mn-b.home{color:var(--accent)}
html.mob .ms-ok{margin-left:auto;color:var(--accent-d)}
/* выбранная плашка в нижней капсуле — белая */
html.mob .mn-p.on{background:var(--card-bg);box-shadow:0 0 0 .5px rgba(0,0,0,.05),0 1px 3px rgba(0,0,0,.08)}
/* стрелка «назад» в карточке — крупнее (flex-basis из style.css держал 12px) */
html.mob .dback1,html.mob .dback2{width:40px;height:44px;flex:0 0 40px;padding:0}
html.mob .dback1 svg,html.mob .dback2 svg{width:20px;height:20px;flex:0 0 20px;stroke-width:1.7}
/* поле сообщения: пока пишут — вместо значка задачи стрелка «Отправить» */
html.mob .dssend{flex:0 0 46px;width:46px;height:46px}
html.mob .dssend svg{width:26px;height:26px}
html.mob .dsbar.печатают>.dsin.task{display:none}
/* экранная клавиатура открыта: отступ под полем не нужен — нижняя «безопасная зона» закрыта клавиатурой */
html.mob.mob-kbpad .dsbar{padding-bottom:8px;transition:none}      /* при открытии клавиатуры отступ меняется сразу (окно ужимается мгновенно, и плавный отступ «оседал» панелью на 36 px за 0,2 с); при закрытии — плавно, переходом из базового правила ниже */              /* `mob-kbpad` ставится/снимается вместе с появлением/уходом клавиатуры (мобильная.js), в отличие от `mob-kb`, который держится ещё 0,3 с */
/* Поиск лежит поверх начала ленты (у ленты сверху «подушка» ровно под него) и стоит на месте: лента, поднимаясь, закрывает его снизу
   (обрезка clip-path на --mp px; --mp и --mf ставит мобильная.js по прокрутке). Лента идёт ровно за пальцем, поиск не уезжает выше своей точки.
   Размеры: 12 + 44 + 10 = 66 px (ПОИСК_В в js). Верх, ушедший под полосу, обрезается clip-path. */
html.mob .search{--mf:0;--mp:0px;grid-area:auto;position:absolute;left:13px;right:13px;top:100%;width:auto;height:44px;margin:12px 0 0;z-index:1;
  transform:none;clip-path:inset(0 0 max(0px, calc(var(--mp) - 10px)) 0 round var(--mob-r));
  opacity:1;transition:none}
html.mob .search:focus-within{--mf:0;--mp:0px;opacity:1;clip-path:none}
html.mob #wrap,html.mob #altWrap,html.mob #listPane{padding-top:66px}
/* Канбан со свайпом: столбцы листаются каждый сам по себе, общей ленты, под которую можно подложить поиск, нет —
   поиск здесь стоит в потоке и схлопывается по высоте (лента подтягивается следом). */
html.mob:has(#altWrap .kan:not(.kan-flat)) #altWrap{padding-top:0}
html.mob:has(#altWrap .kan:not(.kan-flat)) .search{grid-area:sr;position:static;transform:none;clip-path:none;
  margin:calc(12px * (1 - var(--mf))) 0 calc(10px * (1 - var(--mf)));height:calc(44px * (1 - var(--mf)))}
html.mob:has(#altWrap .kan:not(.kan-flat)) .search:focus-within{clip-path:none}
/* Боковые панели (поделиться, оформление, настройки) стоят за правым краем экрана, и их тень (-6px 28px) заходила на ленту полосой вдоль края. */
html.mob .setpanel{box-shadow:none}

/* карточка: ничего не гуляет вбок — шапка-капсула вкладок выходила за экран на 5 px (отрицательные поля компьютера -18, у телефона поле 13) */
html.mob .dnav{margin:-16px -13px 0;width:auto}
html.mob .db,html.mob .drawer{overflow-x:hidden;overscroll-behavior-x:none}
html.mob .db{touch-action:pan-y pinch-zoom}
/* капсулы с кнопками листаются только вправо-влево: они не страница */
html.mob .dnav-track,html.mob .dstabs-l,html.mob #mTabs,html.mob .mn-cap{overflow-y:hidden;overscroll-behavior:contain;touch-action:pan-x}

/* Фильтры — шторкой снизу с кнопкой «Готово»; на телефоне их можно закрыть тем же нажатием, что открыло, но кнопки на экране нет */
html.mob:has(.fpanel.open) .top{z-index:80}
html.mob .top > .fpanel.open{position:fixed;left:0;right:0;bottom:0;top:auto;margin:0;max-height:80%;overflow:auto;z-index:2;
  background:var(--card-bg);border-radius:20px 20px 0 0;border-top:0;box-shadow:0 0 0 100vmax rgba(0,0,0,.28);
  padding-bottom:calc(14px + env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch}
html.mob .fpanel .fgroup{position:relative;padding-right:92px}
html.mob .fpanel .ftitle2{font-size:22px;line-height:28px;margin:4px 0 12px}
html.mob .fpanel .mf-done{position:absolute;right:0;top:0;height:40px;padding:0 16px;border:0;border-radius:20px;background:var(--accent);color:#fff;
  font:600 16px/20px var(--font-body)}
html.mob .fpanel .filters{max-width:100%}
html.mob .fpanel .meta{padding:0 13px 6px}
/* условия фильтра — карточкой в столбик: «х и» сверху, потом поле, условие и значение на всю ширину */
html.mob .fpanel .fviews:empty{display:none}
html.mob .fpanel .filters{align-items:stretch;overflow-x:visible;gap:10px}
html.mob .fpanel .frule{height:auto;flex-wrap:wrap;width:100%;border-radius:16px}
html.mob .fpanel .frule .fseg{min-height:46px;padding:0 14px;font-size:16px;line-height:20px;border-left:0}
html.mob .fpanel .frule .fseg.fdel{flex:0 0 46px;justify-content:center}
html.mob .fpanel .frule .fseg.join{flex:1 1 0;width:auto}
html.mob .fpanel .frule .fseg.fld,html.mob .fpanel .frule .fseg.op,html.mob .fpanel .frule .fseg.val,
html.mob .fpanel .frule .fseg.num,html.mob .fpanel .frule .fseg.chips{flex:1 0 100%;border-top:var(--stroke-w) solid var(--stroke);white-space:normal}
html.mob .fpanel .frule .fseg.chips{flex-wrap:wrap;padding:8px 14px}
html.mob .fpanel .fsel{font-size:16px}
html.mob .fpanel .fbtns{margin-top:6px;gap:14px;flex-wrap:wrap}
html.mob .fpanel .faddbtn{height:44px;padding:0 16px;font-size:16px}
html.mob .fpanel .fsave{width:44px;height:44px}
/* плашки статусов (поля-списки) крупнее: в карточке записи и на карточках ленты */
html.mob .echip{font-size:16px;line-height:20px;padding:5px 13px;border-radius:11px}
html.mob .kc-p.chip{font-size:15px;line-height:19px;padding:4px 12px;border-radius:11px}

/* полоса над календарём: «Календари» · месяц · «Сегодня» и ряд месяцев */
html.mob .mcal-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 13px 8px;flex:0 0 auto}
html.mob .mcal-bar b{font:600 17px/22px var(--font-h2);text-align:center;flex:1 1 auto}
html.mob .mcal-bar button{flex:0 0 auto;height:34px;padding:0 13px;border:0;border-radius:17px;background:var(--mob-cap);color:#3A3A3C;
  font:500 14px/18px var(--font-body)}
html.mob.mob-subs .mcal-bar [data-subs]{background:var(--accent-soft);color:var(--accent-d)}
/* Название месяца — кнопка выбора месяца: со стрелкой справа от текста. */
/* Название месяца стоит строго на центральной оси экрана (а не посередине между кнопками по краям — те разной ширины, и название уезжало
   влево): вынесено из потока и поставлено в середину полосы; стрелка справа уравновешена пустым местом слева (::before), чтобы на оси стоял
   сам текст «Месяц Год». */
html.mob .mcal-bar{position:relative}
html.mob .mcal-bar b{position:absolute;left:50%;top:calc(50% - 3px);transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;
  cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none}
html.mob .mcal-bar b::before{content:"";flex:0 0 11px}
html.mob .mcal-bar b svg{flex:0 0 11px;width:11px;height:7px;fill:none;stroke:var(--icon-fg2);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
html.mob .mcal-bar b:active{opacity:.6}
/* шторка выбора месяца */
html.mob .ms-yr{display:flex;align-items:center;justify-content:space-between;padding:2px 4px 12px}
html.mob .ms-yr b{font:600 20px/24px var(--font-h2)}
html.mob .ms-yr button{width:40px;height:40px;border:0;border-radius:var(--mob-r);background:var(--mob-cap);color:var(--tx);font:500 22px/1 var(--font-body)}
html.mob .ms-mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 2px 4px}
html.mob .ms-m{height:48px;border:0;border-radius:var(--mob-r);background:var(--mob-cap);color:var(--tx);font:500 16px/20px var(--font-body)}
html.mob .ms-m.on{background:var(--accent);color:#fff}
html.mob .ms-m.now:not(.on){box-shadow:inset 0 0 0 1.5px var(--accent)}
html.mob .ms-m:active,html.mob .ms-yr button:active{filter:brightness(.93)}
/* список календарей (какие показывать) — выпадающей панелью по кнопке «Календари», а не на экране постоянно */
html.mob .calsubs{display:none}
html.mob.mob-subs .calsubs{display:block;position:absolute;left:10px;right:10px;top:52px;z-index:6;max-height:60%;overflow:auto;
  background:var(--card-bg);border-radius:16px;box-shadow:0 8px 30px rgba(0,0,0,.2);padding:10px 14px}
html.mob.mob-cal-grid body.calpage .cal .calside,html.mob .cal.mcal-ent .calside{display:contents}
html.mob.mob-cal-grid body.calpage .cal .calside > :not(.calsubs),html.mob .cal.mcal-ent .calside > :not(.calsubs){display:none}
/* в списке «Расписание» тоже нужна кнопка «Календари»: своя маленькая полоса над расписанием */
html.mob .calside > .mcal-bar{justify-content:flex-start;padding-top:6px}
html.mob.mob-cal-grid .calside > .mcal-bar{display:none}
/* меню по долгому нажатию: пока палец, которым вызвали, не поднят, пункты не реагируют (и не подсвечиваются) */
html.mob.mob-lp .fdmenu{pointer-events:none}
/* настройка ленты (шестерня у вкладок чата) — только на компьютере */
html.mob .dscog{display:none!important}
/* время события в шторке дня */
html.mob .ms-time{flex:0 0 auto;min-width:52px;margin-right:10px;font:600 16px/20px var(--font-body);color:#3A3A3C;font-variant-numeric:tabular-nums}
html.mob .ms-txt{min-width:0;flex:1 1 auto}

/* клавиатура открыта: окно — по видимой части экрана (--vvh/--vvt ставит мобильная.js), карточка и чат остаются над клавиатурой */
html.mob.mob-kb body{height:var(--vvh,100dvh)!important;top:var(--vvt,0px)!important;bottom:auto!important}
html.mob.mob-kb .drawer{height:var(--vvh,100%)!important;top:var(--vvt,0px)!important;bottom:auto!important}
/* Пока клавиатура уезжает, видимая область растёт быстрее, чем карточка догоняет её по высоте (`--vvh` обновляется редкими событиями, высота идёт
   переходом 0,26 с): снизу на миг открывалась страница под карточкой — «мелькал» список сущностей. Подкладка того же цвета, что и карточка, — тень
   со сдвигом и разливом на экран (форма тени равна карточке, поэтому одного сдвига мало): закрывает всё, что оказалось ниже карточки, пока она не дотянулась (переход тени отключён, см. ниже). */
html.mob.mob-kb .drawer.on{box-shadow:-14px 0 40px rgba(0,0,0,.2),0 100vh 0 100vh var(--card-bg);transition:height .26s cubic-bezier(.22,1,.36,1),transform .22s cubic-bezier(.22,1,.36,1)}

/* Таблица: шапка залипает у края своей прокрутки, поэтому «подушку» под поиск ей давать нельзя (шапка уезжала вниз) —
   поиск стоит в потоке и схлопывается по высоте, как в канбане. */
html.mob:has(#wrap:not([hidden])) #wrap{padding-top:0}
html.mob:has(#wrap:not([hidden])) .search{grid-area:sr;position:static;transform:none;clip-path:none;
  margin:calc(12px * (1 - var(--mf))) 0 calc(10px * (1 - var(--mf)));height:calc(44px * (1 - var(--mf)))}
/* Закрепление колонок: кнопка видна всегда (на телефоне нет наведения) и достаточно крупная для пальца */
html.mob .pinbtn{opacity:.55;width:30px;height:30px;right:6px}
html.mob .pinbtn.on{opacity:1}
html.mob .pini{width:17px;height:17px}
/* соседняя карточка (из календаря, связей) — всегда на весь экран, что бы ни писали ей в ширину и положение */
html.mob #drawer2,html.mob .drawer.linked{left:0!important;right:0!important;width:100%!important;min-width:100%!important;max-width:100%!important}

/* Подсказки к полю (значения, записи для связи, «Завести…») — листом прямо над клавиатурой, во всю ширину:
   вместо узкого окошка рядом с ячейкой, которое уходило за край и накладывалось на клавиатуру.
   Положение, что выставляет placePicker, перебиваем: на телефоне важнее место над клавиатурой, чем у ячейки. */
html.mob .picker.sugbox{left:10px!important;right:10px!important;top:auto!important;bottom:calc(var(--kbb,0px) + 10px)!important;
  width:auto!important;min-width:0!important;max-width:none!important;visibility:visible!important;border-radius:16px;
  box-shadow:0 8px 30px rgba(0,0,0,.22);z-index:96}
html.mob .picker.sugbox .pk-list{max-height:34vh}
/* Поле, в которое пишут, подводится не в середину, а в верхнюю часть видимого места — внизу встаёт подсказка */
html.mob input,html.mob textarea,html.mob [contenteditable="true"]{scroll-margin-top:130px}
/* пока в карточке печатают, нижняя полоса «Отменить / Создать» не нужна — не отнимает место над клавиатурой (вернётся, когда клавиатура уйдёт) */
html.mob.mob-kb .dnew{display:none!important}
/* то же для основной карточки в режиме «сбоку» (body.asaside: карточка записи из календаря раздела) — с компьютера у неё ширина 88% и сдвиг вправо */
html.mob #drawer{left:0!important;right:0!important;width:100%!important;max-width:100%!important}
html.mob body.asaside .scrim{display:none}

/* ======================= карточка записи на телефоне: сгруппированный список (по мотивам настроек Телеграма) =======================
   Цвета, шрифты, рамки, тени и скругления — из темы оформления (как на компьютере); меняется только раскладка: подпись над значением, фото крупно сверху. */
html.mob .drawer .db{padding:12px 14px calc(30px + env(safe-area-inset-bottom))}
html.mob .drawer .fsecrow{gap:0;margin-bottom:0}
html.mob .drawer .fsec{margin-bottom:6px;gap:0}
html.mob .drawer .fhead{padding:14px 18px 8px;min-height:0}
html.mob .drawer .ftitle{font-size:16px;line-height:21px}
html.mob .drawer .fadd{font-size:15px;color:var(--accent-d)}
/* строка: подпись над значением */
html.mob .drawer .frow:not(.fedit){display:block;position:relative;padding:10px 18px;border:0}      /* вертикальные отступы строки поля — 10 сверху и снизу (макет Figma); боковые 18 */
html.mob .drawer .frow:not(:first-child)::before{content:'';position:absolute;left:18px;right:0;top:0;border-top:var(--stroke-w) solid var(--stroke);pointer-events:none}
html.mob .drawer .frow:not(.fedit) > .fk{display:block;width:auto;max-width:none;min-width:0;flex:none;padding:0;border:0;
  margin:0 0 3px;font-size:13px;line-height:17px}
html.mob .drawer .frow:not(.fedit) > .fv{display:block;width:auto;min-width:0;padding:0;
  font-size:17px;line-height:23px}
/* правка поля: выделяется вся строка — и подпись, и значение — обводкой системного цвета и лёгкой прозрачной заливкой */
html.mob .drawer .frow > .fv.fvedit{margin:0;padding:0;border-radius:0;box-shadow:none;background:transparent}
html.mob .drawer .frow:has(> .fv.fvedit){border-radius:0;
  box-shadow:inset 0 0 0 2px var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
/* скругление — как у контейнера: сверху у первой строки, снизу у последней, у остальных углы прямые (как и в таблице на компьютере) */
html.mob .drawer .frow:first-child:has(> .fv.fvedit){border-top-left-radius:calc(var(--radius) - 1px);border-top-right-radius:calc(var(--radius) - 1px)}
html.mob .drawer .frow:last-child:has(> .fv.fvedit){border-bottom-left-radius:calc(var(--radius) - 1px);border-bottom-right-radius:calc(var(--radius) - 1px)}
html.mob .drawer .frow:has(> .fv.fvedit)::before,html.mob .drawer .frow:has(> .fv.fvedit) + .frow::before{display:none}
html.mob .drawer .frow > .fv.fvedit input,html.mob .drawer .frow > .fv.fvedit textarea{background:transparent}
/* фото: крупно сверху раздела, как у контакта в Телефоне или Телеграме; поля — отдельной плашкой ниже */
html.mob .drawer .fsec-b.withphoto{display:flex;flex-direction:column;align-items:stretch;gap:12px;background:none;border:0;border-radius:0;box-shadow:none;overflow:visible}
html.mob .drawer .fsec-b.withphoto > .fphoto:not(.setmode){border:0;padding:6px 0 2px;align-self:center}
html.mob .drawer .fsec-b.withphoto .fphoto:not(.setmode) .fpic{width:124px;height:124px;flex:0 0 124px;border-radius:50%;background:var(--field-bg);overflow:hidden}
html.mob .drawer .fsec-b.withphoto > .fcard{background:var(--field-bg);border:var(--stroke-w) solid var(--stroke);border-radius:var(--radius);box-shadow:var(--shadow-sec)}
/* раздел с фото: сначала фото, под ним заголовок раздела, под ним плашка полей */
html.mob .drawer .fsec:has(> .fsec-b.withphoto) > .fsec-b.withphoto{display:contents}
html.mob .drawer .fsec:has(> .fsec-b.withphoto) > .fsec-b.withphoto > .fphoto{order:0;align-self:center;padding:6px 0 0}
html.mob .drawer .fsec:has(> .fsec-b.withphoto) > .fhead{order:1;padding-top:12px}
html.mob .drawer .fsec:has(> .fsec-b.withphoto) > .fsec-b.withphoto > .fcard{order:2}

/* слайд карточка ↔ чат: пока идёт анимация, карточка под чатом видна (обычно при открытом чате она скрыта) */
html.mob .drawer.mob-chat.mob-chat-anim .dsplit > .db{visibility:visible}

/* кнопка «Заполнить» вверху листа вариантов */
html.mob .picker.sugbox .pk-fill{color:var(--accent-d);font-weight:600;border-bottom:var(--stroke-w) solid var(--stroke);border-radius:0;margin-bottom:2px}
/* фон карточки записи и чата — цвет фона чата из темы (как переписка на компьютере) */
html.mob .drawer,html.mob .drawer .dh,html.mob .drawer .dsplit > .db{background:var(--chat-bg)}

/* «шапка» записи: первое поле крупно по центру, второе мелко под ним (поля перенесены из плашки мобильная.js) */
html.mob .drawer .fsec:has(> .mhero) > .mhero{order:1;display:flex;flex-direction:column;align-items:stretch;gap:2px;padding:4px 0 6px;text-align:center}
html.mob .drawer .fsec:has(> .mhero) > .fhead{order:2}
html.mob .drawer .fsec:has(> .mhero) > .fsec-b:not(.withphoto){order:3}
html.mob .drawer .fsec:has(> .mhero) > .fsec-b.withphoto > .fcard{order:3}
html.mob .drawer .mhero .frow{display:block;padding:2px 12px;border:0;border-radius:14px}
html.mob .drawer .mhero .frow::before{display:none}
html.mob .drawer .mhero .frow > .fk{display:none}
html.mob .drawer .mhero .frow > .fv{display:block;padding:0;text-align:center}
html.mob .drawer .mhero .frow:first-child > .fv{font-family:var(--font-h1);font-size:28px;line-height:34px;font-weight:600;color:var(--tx)}
html.mob .drawer .mhero .frow:nth-child(2) > .fv{font-size:16px;line-height:21px;color:var(--tx2)}
/* пока поле правится, в «шапке» видна его подпись и обычное выделение строки */
html.mob .drawer .mhero .frow:has(> .fv.fvedit){border-radius:14px;padding:6px 14px;text-align:left}
html.mob .drawer .mhero .frow:has(> .fv.fvedit) > .fk{display:block}
html.mob .drawer .mhero .frow > .fv.fvedit{text-align:left;font-size:17px;line-height:23px;font-weight:400;color:var(--tx)}
html.mob .drawer .fcard.mhero-empty{display:none}

/* нижняя капсула — дом и значок разделов; значок открывает список разделов (название раздела — в шапке) */
html.mob .mn-cap{padding:0;gap:0;overflow:hidden;touch-action:manipulation}
html.mob .mn-cur{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border:0;background:none;padding:0;color:var(--tx)}
html.mob .mn-cur svg{flex:none;width:22px;height:22px;fill:currentColor;stroke:none}
html.mob .ms-row.on{color:var(--accent-d)}
/* полоса-«дымка» за капсулой навигации карточки (градиент темы) на телефоне не нужна — под капсулой ровный фон */
html.mob .drawer .dnav{background:transparent}
/* вместо блока с фоном — «туман» цвета фона: плотный сверху и сходящий на нет к середине капсулы; прокручиваемое под ним уходит плавно */
html.mob .drawer .dnav::before{content:'';display:block;position:absolute;inset:0 0 50% 0;height:auto;width:auto;pointer-events:none;
  background:linear-gradient(var(--chat-bg) 0%,var(--chat-bg) 40%,color-mix(in srgb,var(--chat-bg) 0%,transparent) 100%)}      /* туман над лентой чата — фон страницы карточки, а не чата */
html.mob .drawer .dnav-cap{z-index:1}
/* «шапка» записи: только значения, без названий полей, и плотнее друг к другу */
html.mob .drawer .mhero .frow:has(> .fv.fvedit) > .fk{display:none}
html.mob .drawer .fsec:has(> .mhero) > .mhero{gap:0;padding:2px 0 2px}
html.mob .drawer .mhero .frow{padding:0 12px}
html.mob .drawer .mhero .frow:first-child > .fv{line-height:32px}
html.mob .drawer .mhero .frow:nth-child(2) > .fv{line-height:20px}
html.mob .drawer .mhero .frow > .fk,html.mob .drawer .mhero .frow:has(> .fv.fvedit) > .fk{display:none!important}
/* «шапка» записи: заголовок и подпись вплотную (отступы строки перебивали правило выше — задаём без права обжалования) */
html.mob .drawer .mhero .frow:not(.fedit){padding:0 12px!important}
html.mob .drawer .mhero .frow:nth-child(2){margin-top:3px}
html.mob .drawer .mhero .frow:has(> .fv.fvedit){padding:6px 14px!important;margin-top:0}
html.mob .drawer .fsec:has(> .mhero) > .mhero{padding-top:12px;padding-bottom:6px}

/* переключатель «Время» в карточке на телефоне не показываем: дата, а рядом время, если оно есть */
html.mob .drawer .dtog{display:none!important}
html.mob .drawer .fsec:has(> .mhero) > .mhero{flex-flow:row wrap;justify-content:center;align-items:baseline;column-gap:0}
html.mob .drawer .mhero .frow:first-child{flex:1 0 100%}
html.mob .drawer .mhero .frow.mclone{flex:1 0 100%}


/* дата и время в «шапке» — на одной оси: обе копии строкой, по базовой линии */
html.mob .drawer .mhero .frow.mclone{display:block!important;margin-top:1px}
html.mob .drawer .mhero .frow.mclone > .fv{display:block!important}

html.mob .picker:not(.sugbox) .pk-q{display:block}

/* время в «шапке» — такого же вида и размера, как дата (и диапазон «с — до» тоже) */
html.mob .drawer .mhero .frow.mclone > .fv,html.mob .drawer .mhero .frow.mclone > .fv *{font-size:16px!important;line-height:21px!important;color:var(--tx2)!important;font-weight:400}
html.mob .drawer .mhero .frow.mclone:nth-child(2){margin-top:3px}
html.mob .drawer .mhero .frow.mclone,html.mob .drawer .mhero .frow.mclone > .fv{text-align:center!important}
html.mob .drawer .mhero .frow.mclone > .fv{width:100%;justify-content:center}
/* диапазон времени в «шапке»: дефис ближе к цифрам, всё по центру */
html.mob .drawer .mhero .frow.mclone .dpair{display:inline-flex;align-items:baseline;justify-content:center;gap:5px;padding:0;margin:0}
html.mob .drawer .mhero .frow.mclone .dash{margin:0;padding:0;width:auto}
/* время в «шапке» — тот же шрифт, размер и цвет, что у даты (наследует от строки), а промежуток вокруг тире у диапазона меньше */
html.mob .drawer .mhero .frow.mclone > .fv *{font:inherit!important;color:inherit!important;letter-spacing:inherit}
html.mob .drawer .rng,html.mob .drawer .mhero .fv .rng{gap:2px!important;padding:0!important;justify-content:center}
html.mob .drawer .rng.dted{gap:2px!important}
/* дата и время (или диапазон) в «шапке» — одной строкой по центру */
html.mob .drawer .fsec:has(> .mhero) > .mhero{flex-flow:row wrap;justify-content:center;align-items:baseline;column-gap:10px}
html.mob .drawer .mhero .frow.mclone{flex:0 0 auto!important;margin-top:3px}
html.mob .drawer .mhero .frow.mclone > .fv{width:auto!important}

/* затемняющий слой не нужен: карточка на весь экран. Если он застревал включённым, страница оставалась тёмной и глухой к нажатиям */
html.mob .scrim{display:none!important}
/* чат виден только когда явно открыт (или едет слайд) — иначе скрыт, что бы ни случилось с состоянием */
html.mob .drawer:not(.mob-chat):not(.mob-chat-anim) .dside{display:none!important}
html.mob .drawer:not(.on) .dside{display:none!important}
html.mob .ms-row .ms-i svg{fill:none}

/* высота окна под клавиатуру меняется плавно, а не скачком — и при появлении клавиатуры, и когда она уходит */
html.mob .drawer,html.mob body{transition:height .26s cubic-bezier(.22,1,.36,1),transform .22s cubic-bezier(.22,1,.36,1)}
html.mob.mob-kb .drawer{transition:height .26s cubic-bezier(.22,1,.36,1),transform .22s cubic-bezier(.22,1,.36,1)}
/* капсула разделов карточки — по размерам вкладок Телеграма: шрифт 17, пункт ~34 pt, капсула ~44 pt (цвета и шрифт — из темы) */
html.mob .dnav{--navp:5px;--pill-fs:17px;--pill-lh:22px;--pill-px:15px;--pill-py:6px}
html.mob .dnav-track{gap:4px}
html.mob .dnav button,html.mob .dnav-hl{border-radius:calc(17px * var(--el))}
/* в шапке карточки название записи не повторяем (оно крупно в самой карточке): остаются звезда, название воронки и номер */
html.mob .drawer .dh-top h2{font-size:0;line-height:0;display:flex;align-items:center;gap:8px;min-width:0}
html.mob .drawer .dh-top h2 > .dent{font-size:17px;line-height:22px}
html.mob .drawer .dh-top h2 > .dlike{font-size:17px}
/* вкладки «История и чат / Документы / Медиа…» и поиск — один в один как капсула разделов карточки: размеры, шрифт, рамка, тень, цвета, подсветка выбранного */
html.mob .dstabs{border-bottom:0;padding:12px 14px 6px;gap:10px;align-items:center}
html.mob .dstabs-l,html.mob .dstabs-r{height:auto;box-sizing:border-box;padding:5px!important;align-items:center;gap:4px;
  border-radius:calc((9px + 5px + var(--stroke-w)) * var(--el));
  background:var(--card-bg)!important;border:var(--stroke-w) solid color-mix(in srgb,var(--card-bg) 70%,var(--stroke));box-shadow:var(--pill-shadow)}
html.mob .dstabs-l button{display:flex;align-items:center;height:auto;padding:6px 15px;border:var(--stroke-w) solid transparent;border-radius:calc(17px * var(--el));
  font:400 17px/22px var(--cff,var(--font-body));color:var(--tx2);background:transparent}
html.mob .dstabs-l button.on{background:color-mix(in srgb,var(--accent) 8%,transparent)!important;color:var(--tx)}
html.mob .dstabs button.on::after{display:none}
html.mob .dstabs-r button{display:flex;align-items:center;justify-content:center;width:44px;height:34px;padding:0;border:var(--stroke-w) solid transparent;border-radius:calc(17px * var(--el));background:transparent;color:var(--tx2)}
html.mob .dstabs-r button svg{width:22px;height:22px}
/* шапка карточки: слева стрелка и название воронки («назад на Проекты»), справа чат, звезда, колокольчик */
html.mob .drawer .dh-top{display:flex;align-items:center}
html.mob .drawer .dh-top h2{display:contents}
html.mob .drawer .dh-top > *{order:5}
html.mob .drawer .dh-top > .dback1,html.mob .drawer .dh-top > .dback2{order:0}
html.mob .drawer .dh-top h2 > .dent{order:1;flex:1 1 auto;min-width:0;margin:0 0 0 2px;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:17px;line-height:22px}
html.mob .drawer .dh-top > .mchat{order:2}
html.mob .drawer .dh-top h2 > .dlike{order:3;font-size:17px}
html.mob .drawer .dh-top > #dbell,html.mob .drawer .dh-top > #dbell2{order:4}

/* стрелка «назад» и название воронки рядом, без лишнего расстояния */
html.mob .drawer .dh-top{gap:2px}
html.mob .dback1,html.mob .dback2{width:30px;flex:0 0 30px}
html.mob .drawer .dh-top h2 > .dent{margin-left:-6px}
html.mob .drawer .dh-top > .mchat{margin-left:auto}

/* название воронки — системным цветом, как стрелка; вместе со стрелкой — одна нажимаемая зона «назад» */
html.mob .drawer .dh-top h2 > .dent{color:var(--accent);cursor:pointer}
/* звезда и колокольчик в выключенном состоянии — один цвет и одна прозрачность; во включённом — системный цвет */
html.mob .drawer .dh-top .dlike:not(.on),html.mob .drawer .dh-top .dbell:not(.on){color:var(--icon-fg2);opacity:.75}
html.mob .drawer .dh-top .dlike.on,html.mob .drawer .dh-top .dbell.on{color:var(--accent);opacity:1}
/* пункты капсулы разделов карточки: в режиме «капсула» у компьютера они 12 px — на телефоне те же 17/22, что у вкладок чата */
html.mob:is(.navbar,.navcap) .dnav button{font-size:17px;line-height:22px;padding:6px 15px;border:var(--stroke-w) solid transparent}
html.mob:is(.navbar,.navcap) .dnav-track{gap:4px;padding:5px}
html.mob .dnav-hl{top:5px;bottom:5px}
/* поиск справа от вкладок чата — та же капсула, что и слева: пункт того же роста (35 px), значок крупнее */
html.mob .dstabs .dstabs-r .dsfind-b,html.mob .dstabs .dstabs-r button{width:44px!important;height:35px!important;min-height:35px;padding:0!important;display:flex;align-items:center;justify-content:center;
  border:var(--stroke-w) solid transparent;border-radius:calc(17px * var(--el));color:var(--tx2)}
html.mob .dstabs .dstabs-r button svg{width:22px!important;height:22px!important}
html.mob .dstabs-r{gap:0}
/* лист выбора (поиск, «Создать», список) стоит над клавиатурой, а не под ней, и умещается в видимую часть: сжался список — лист остаётся на виду */
html.mob .picker:not(.sugbox):not(.daypick):not(.timepick){bottom:var(--kbb,0px)!important;max-height:calc(var(--vvh,100dvh) - 72px)!important;
  padding-bottom:8px}
html.mob:not(.mob-kb) .picker:not(.sugbox):not(.daypick):not(.timepick){padding-bottom:calc(14px + env(safe-area-inset-bottom))}

/* скругления пропорциональны: внешний радиус капсулы = радиус плашки внутри (17) + отступ до края (5) + рамка */
html.mob .dnav-cap,html.mob .dstabs-l,html.mob .dstabs-r{border-radius:calc((17px + 5px + var(--stroke-w)) * var(--el))!important}
html.mob .dnav button,html.mob .dnav-hl,html.mob .dstabs-l button,html.mob .dstabs .dstabs-r button{border-radius:calc(17px * var(--el))}
/* шапка: стрелка, название воронки, сразу за ним номер-ссылка; справа чат, звезда, колокольчик */
html.mob .drawer .dh-top h2 > .dent{flex:0 1 auto}
html.mob .drawer .dh-top h2 > .rt-num{order:2;margin-left:8px;font-size:15px;line-height:20px;color:var(--tx2)}
html.mob .drawer .dh-top h2 > .nt-cnt-card{order:2}
/* ширина капсулы навигации = ширина блоков с информацией (поля карточки по 14 px); короткие списки пунктов — капсула по содержимому */
html.mob .drawer .dnav{padding:10px 13px}
html.mob .drawer .dstabs{padding-left:14px;padding-right:14px}
html.mob .drawer .dstabs-l{flex:0 1 auto;min-width:0}
html.mob .drawer .dstabs-r{margin-left:auto}
/* вкладки чата: отступы от шапки и от краёв — как у капсулы разделов в карточке (6 px сверху, 14 по бокам) */
html.mob .drawer .dstabs{margin:0!important;padding:6px 14px 6px!important}

/* подпись под названием переносится по строкам, а не уезжает за экран; дата и время рядом — по содержимому, длинный текст — на всю ширину */
html.mob .drawer .mhero .frow.mclone{flex:0 1 auto!important;min-width:0;max-width:100%}
html.mob .drawer .mhero .frow.mclone > .fv{white-space:normal!important;overflow-wrap:anywhere;word-break:normal;max-width:100%}

/* пустые поля в «шапке»: подпись под названием не показываем; пустое название — серая подсказка с именем поля вместо крупного «Не заполнено» */
html.mob .drawer .mhero .frow.mclone.mblank{display:none!important}
html.mob .drawer .mhero .frow:first-child > .fv.blank:not(.fvedit){font-size:0!important;font-style:normal}
html.mob .drawer .mhero .frow:first-child > .fv.blank:not(.fvedit)::before{content:attr(data-ph);font-size:28px;line-height:34px;font-weight:600;color:var(--tx2);opacity:.55;font-style:normal;font-family:var(--font-h1)}

/* Карточка перерисовывается при каждой правке (сначала без «шапки», затем «шапка» достраивается): встроенная привязка прокрутки браузера
   на этих двух шагах по-разному выбирала опорный блок и сдвигала ленту на несколько точек. Привязку выключаем — лента стоит на месте. */
html.mob .drawer .db{overflow-anchor:none}

/* ---------- «Создать» — плавающая кнопка внизу справа, как «Написать» в Gmail ----------
   Развёрнутая («＋ Создать») — над капсулой, пока лента стоит или идёт вверх. Лента пошла вниз — капсула уезжает, кнопка
   сворачивается в «＋» у нижнего края: заливка сжимается к правому краю, значок уезжает за ней, подпись гаснет, кнопка опускается.
   Класс mob-barhide на <html> ставит барПереключить (мобильная.js) вместе с mn-hide у капсулы.
   Заливка — отдельный элемент .fab-glass (мобильная.js; имя осталось от стеклянного варианта): сплошной --accent и одна мягкая
   тень. Сначала кнопка была «жидким стеклом» (градиент, кромка, размытие, цветная тень) — на светлой ленте выглядело
   громоздко и дёшево рядом с плоской капсулой, поэтому оставлена простая плоская. Двигаются только transform (положение, значок)
   и ширина заливки; --fab-shift (ширина кнопки − 56) считает мобильная.js по реальной ширине: подпись разная («Создать», «Новый сотрудник»).
   Скругление — правило системы (--el, как у остальных кнопок), не больше половины высоты (--fab-r).
   Прячется под клавиатурой (по фокусу в поле) и в полноэкранных окнах (mob-modal). */
html.mob #createBtn{--fab-r:min(28px,calc(20px * var(--el,1)));--fab-shift:83px;--fab-d:.26s;--fab-e:cubic-bezier(.2,0,0,1);
  position:fixed;grid-area:auto;right:16px;bottom:calc(env(safe-area-inset-bottom) + 8px);z-index:39;
  height:56px;min-width:56px;width:auto;max-width:none;overflow:visible;padding:0 22px 0 16px;gap:0;border:0;border-radius:0;
  background:none;box-shadow:none;display:flex;align-items:center;justify-content:flex-start;color:#fff;isolation:isolate;
  -webkit-tap-highlight-color:transparent;
  opacity:1;transform:translateY(-60px);transition:transform var(--fab-d) var(--fab-e),opacity .18s ease;will-change:transform}
html.mob #createBtn .fab-glass{position:absolute;right:0;top:0;width:100%;height:56px;z-index:-1;pointer-events:none;
  border-radius:var(--fab-r);background:var(--accent);box-shadow:0 4px 14px rgba(0,0,0,.18);
  transition:width var(--fab-d) var(--fab-e),background-color .15s ease}
/* Сама кнопка — прозрачный прямоугольник без скругления (всё рисует .fab-glass). Старые правила :active (выше) и .btn:hover красили её
   целиком — при нажатии под заливкой вспыхивал квадрат. Перебиваем заливку у самой кнопки во всех состояниях. */
html.mob #createBtn:hover,html.mob #createBtn:active,html.mob #createBtn:focus,html.mob #createBtn:focus-visible{background:none;box-shadow:none;outline:0}
html.mob #createBtn:active .fab-glass{background:var(--accent-d)}
html.mob #createBtn .i{position:relative;z-index:1;display:block;flex:0 0 24px;width:24px;height:24px;margin:0;opacity:1;
  transition:transform var(--fab-d) var(--fab-e)}
/* max-width:none — у компьютерного .bar-mid .btn span на узком окне max-width:0 (подпись уступает место плюсу), здесь она нужна всегда */
html.mob #createBtn span{position:relative;z-index:1;display:block;max-width:none;margin-left:12px;white-space:nowrap;opacity:1;
  font:500 16px/20px var(--font-body);transition:opacity .14s ease .06s}
html.mob.mob-barhide #createBtn{--fab-d:.2s;--fab-e:cubic-bezier(.4,0,.2,1);transform:translateY(0);pointer-events:none}
html.mob.mob-barhide #createBtn .fab-glass{width:56px;pointer-events:auto}
html.mob.mob-barhide #createBtn .i{transform:translateX(var(--fab-shift))}
html.mob.mob-barhide #createBtn span{opacity:0;transition:opacity .08s ease}
/* Под клавиатурой — по настоящему фокусу в поле, а не по классу mob-kb: тот мог залипнуть (фокус ушёл без focusout, окно создания закрыли
   при открытой клавиатуре) — и кнопка пропадала насовсем, хотя клавиатуры уже нет. Фокус залипнуть не может: правило перестаёт работать само. */
/* Поверх страницы открыто своё окно (панель фильтров, шторка, меню, карточка) — «Создать» уходит, а не торчит поверх него и не откликается
   на жесты в нём. Перечень тот же, что у ЗАНЯТО в мобильная.js. Плавно (opacity), без display. */
html.mob:has(.fpanel.open,#mSheet.on,.fdmenu,.drawer.on,.rwin.on,.pwin.on,.plwin.on) #createBtn{opacity:0;visibility:hidden;pointer-events:none;
  transition:transform var(--fab-d) var(--fab-e),opacity .18s ease,visibility 0s linear .18s}
/* Карточку тянут свайпом назад — «Создать» возвращается вместе с ней (мобильная.js, кнопкаПуть): прозрачность задаёт жест (--cb), а не пауза до закрытия. */
html.mob.mob-card-pull #createBtn{opacity:var(--cb,0)!important;visibility:visible!important;transition:opacity var(--cb-t,0s) ease,transform var(--fab-d) var(--fab-e)!important}
html.mob #createBtn[hidden],html.mob.mob-modal #createBtn{display:none}
html.mob:has(input:focus:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=button]),textarea:focus,[contenteditable="true"]:focus) #createBtn{display:none}
/* Кнопка не должна закрывать последние карточки: запас под ней в конце ленты. */
html.mob #wrap,html.mob #altWrap,html.mob #listPane,html.mob .calagenda,html.mob .calgrid{padding-bottom:calc(var(--mob-bar) + 80px)}
/* Календарь — на всю высоту страницы: нижний отступ #altWrap под ним убран (раньше под сеткой оставалась пустая полоса высотой с капсулу),
   запас под капсулу и «Создать» лежит внутри самой сетки (.calgrid, строка выше) — последние недели прокручиваются выше них. */
html.mob #altWrap:has(> .cal){padding-bottom:0}
@media (prefers-reduced-motion:reduce){html.mob #createBtn,html.mob #createBtn .fab-glass,html.mob #createBtn .i,html.mob #createBtn span{transition:none}}

/* ---------- нижняя панель: плоские кнопки и «туман» под лентой ----------
   Фон панели, как и у шапки: верх прозрачный и за 43 px (до середины кнопок) переходит в сплошной цвет страницы — лента, уходя вниз, растворяется
   в тумане над кнопками, а не упирается в жёсткий край. Кнопки (дом, раздел, «…») — одна плоская капсула цвета поля
   поиска (--mob-cap) с обводкой (--mob-line, толщина --stroke-w), без градиента, размытия, стекла и тени; подпись --tx весом 500, значок дома цвета системы.
   Ниже по файлу стоит правило «капсулы без прозрачности и размытия» (!important) — его здесь переопределяем сознательно.
   «Создать» лежит выше (translateY −60 px) — на 14 px над капсулой, в туман почти не заходит. */
html.mob #mNav{padding-top:20px;
  background:linear-gradient(to bottom,transparent 0,
    color-mix(in srgb,var(--panel) 8%,transparent) 5px,color-mix(in srgb,var(--panel) 28%,transparent) 11px,
    color-mix(in srgb,var(--panel) 55%,transparent) 19px,color-mix(in srgb,var(--panel) 80%,transparent) 27px,
    color-mix(in srgb,var(--panel) 94%,transparent) 35px,var(--panel) 43px)}   /* туман тянется до середины кнопок: 20 px над ними + 23 px (полкнопки) */
/* Одна капсула на три кнопки (дом — раздел — «…»): фон и обводку рисует ::before панели, сами кнопки прозрачны и разделены тонкими
   чертами. Так панель читается одним предметом, как поле поиска над лентой. Зазоры панели (20 px сверху — туман, 14 px по бокам,
   18 px + нижний отступ экрана снизу) — капсула стоит чуть выше прежнего, «Создать» ближе к ней (зазор 14 px). */
html.mob #mNav{gap:0;padding-left:14px;padding-right:14px}
html.mob #mNav::before{content:"";position:absolute;z-index:0;left:14px;right:14px;top:20px;bottom:calc(8px + env(safe-area-inset-bottom));
  border-radius:var(--mob-r);border:var(--stroke-w,.5px) solid var(--mob-line);pointer-events:none;
  /* Стекло, как у нижней панели чата: фон на 80% и размытие того, что проходит под капсулой при прокрутке (31.10.2026). */
  background:color-mix(in srgb,var(--mob-cap) 80%,transparent);-webkit-backdrop-filter:blur(var(--стекло-блюр,28px)) saturate(1.2);backdrop-filter:blur(var(--стекло-блюр,28px)) saturate(1.2)}
html.lite.mob #mNav::before,html.mob.lite #mNav::before{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--mob-cap)}
html.mob #mNav > *{position:relative;z-index:1}
html.mob .mn-b,html.mob .mn-cap{border:0!important;border-radius:0!important;background:transparent!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important;
  color:var(--tx)!important;-webkit-tap-highlight-color:transparent;transition:background-color .15s ease}
html.mob .mn-b{border-radius:var(--mob-r)!important}
html.mob .mn-cap{flex:0 0 var(--mob-btn);width:var(--mob-btn);margin:0;max-width:none}
html.mob .mn-b.home{color:var(--accent)!important}
html.mob .mn-cap::before,html.mob .mn-cap::after{content:"";position:absolute;top:11px;bottom:11px;width:var(--stroke-w,.5px);background:var(--mob-line);pointer-events:none}
html.mob .mn-cap::before{left:0}
html.mob .mn-cap::after{right:0}
html.mob .mn-b:active,html.mob .mn-cap:active{background:color-mix(in srgb,var(--mob-cap) 88%,#000)!important}

/* ---------- туман под шапкой ----------
   Лента, поднимаясь, не обрезается жёстким краем под названием, а уходит в «туман» цвета страницы: сначала прячется поиск, дальше
   карточки растворяются под шапкой. Туман лежит поверх первых 48 px ленты (сама лента стоит на месте, обрезки нет) — плотный у
   шапки, к низу прозрачный, с плавными ступенями (линейный градиент даёт видимую границу). Только там, где лента идёт под
   шапку: список и лента задач; в таблице, календаре и канбане по столбцам у верха свои липкие строки, туман смыл бы их. */
html.mob .top::after{content:"";position:absolute;left:0;right:0;top:100%;height:48px;pointer-events:none;display:none;
  background:linear-gradient(to bottom,var(--panel) 0%,
    color-mix(in srgb,var(--panel) 92%,transparent) 16%,color-mix(in srgb,var(--panel) 72%,transparent) 36%,
    color-mix(in srgb,var(--panel) 40%,transparent) 58%,color-mix(in srgb,var(--panel) 14%,transparent) 80%,transparent 100%)}
html.mob:has(#altWrap:not([hidden]) .kan-flat) .top::after,
html.mob:has(#altWrap:not([hidden]) .feed-list) .top::after{display:block}

/* ---------- свайп между разделами: два снимка едут за пальцем (мобильная.js, свайпСущности) ----------
   Снимки лежат в окнах .sw-pane размером с видимую часть ленты и клипуются сами (overflow:hidden). Окно непрозрачное: закрывает настоящую
   ленту, которая на время жеста скрыта. Горизонтальная прокрутка у #altWrap гасится, иначе окно за краем растянуло бы её вбок. */
html.mob #altWrap > .sw-pane{position:absolute;box-sizing:border-box;overflow:hidden;background:var(--panel);
  pointer-events:none;will-change:transform;contain:layout paint}
html.mob.mob-swipe #altWrap{overflow-x:hidden}
html.mob.mob-swipe #altWrap > .kan,html.mob.mob-swipe #altWrap > .cal{visibility:hidden}
html.mob.mob-mswipe #altWrap > .cal .calgrid{visibility:hidden}
html.mob.mob-mswipe #altWrap{overflow-x:hidden}
html.mob #altWrap .kan-flat,html.mob #altWrap .cal{touch-action:pan-y}
/* Раздела, где ещё не были, снимка нет — серые строки с названием: форма списка без данных. */
html.mob .sw-ph{padding:18px 16px}
html.mob .sw-ph b{display:block;margin-bottom:16px;font:600 17px/22px var(--font-body);color:var(--mob-gray)}
html.mob .sw-ph i{display:block;height:64px;margin-bottom:12px;border-radius:12px;background:var(--mob-cap);opacity:.7}
/* Названия при свайпе (мобильная.js, титыНачать): настоящие надписи на время жеста прячем (visibility — место остаётся), вместо них едут
   клоны .sw-t в окнах .sw-tw поверх настоящих. Селектор с «>» — чтобы не задеть самих клонов, они тоже h1. */
html.mob.mob-swipe .top > h1{visibility:hidden}

/* ---------- непрерывная лента месяцев (тест; мобильная.js, лентаНастроить) ----------
   .calgrid.rb — те же клетки .calday, но на много месяцев подряд, без заголовков внутри. Строки по содержимому (не 1fr): лента длиннее экрана, растягивать нечего. */
html.mob .calgrid.rb{position:relative;grid-auto-rows:auto;align-content:start}
html.mob .calgrid.rb .calday{min-height:92px}
/* Внутри ленты заголовков месяцев нет — название только в полосе над сеткой. «Главный» месяц — тот, у которого на экране больше всего площади
   (.am ставит мобильная.js, лентаНастроить): его клетки белые, остальные серые. */
html.mob .calgrid.rb .calday{background-color:color-mix(in srgb,var(--mob-cap) 70%,var(--panel));transition:background-color .28s ease}
html.mob .calgrid.rb .calday.am{background-color:var(--panel)}
/* Клетка сегодняшнего дня подсвечена цветом темы, как в компьютерной версии (там `.calday.today` — 10 % --accent): здесь слоем поверх фона месяца, а не
   вместо него, иначе месяц (белый / серый) и подсветка перебивали бы друг друга — первая правка выше задаёт фон целиком. */
html.mob .calgrid.rb .calday.today{background-image:linear-gradient(color-mix(in srgb,var(--accent) 12%,transparent),color-mix(in srgb,var(--accent) 12%,transparent))}
html.mob .calgrid.rb.nt .calday{transition:none}
/* переключатель в шторке выбора месяца */
html.mob .ms-tog{margin-top:10px;justify-content:space-between}
html.mob .ms-tog i{font:500 12px/16px var(--font-body);font-style:normal;color:var(--mob-gray);margin-left:6px;margin-right:auto}
html.mob .ms-sw{position:relative;flex:0 0 46px;width:46px;height:28px;border-radius:14px;background:var(--mob-cap);transition:background-color .2s ease}
html.mob .ms-sw::after{content:"";position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s cubic-bezier(.32,.72,0,1)}
html.mob .ms-sw.on{background:var(--accent)}
html.mob .ms-sw.on::after{transform:translateX(18px)}

/* Название месяца проступает в середине самого месяца и прокручивается вместе с сеткой (мобильная.js, вспышка): появляется за 0,4 с, гаснет за 0,9 с.
   Плашка лежит внутри .calgrid.rb (position:relative), поэтому top считается в координатах сетки. */
html.mob .rb-mon{position:absolute;left:0;right:0;z-index:3;display:flex;justify-content:center;pointer-events:none;opacity:0;
  transform:translateY(-50%) scale(.96);transition:opacity .9s ease,transform .9s ease}
/* Проступает плавно, без рывка в начале (мягкая кривая вместо «быстрый старт — долгое торможение»), но быстрее, чем гаснет: 0,4 с против 0,9 с. */
html.mob .rb-mon.on{opacity:1;transform:translateY(-50%) scale(1);transition:opacity .4s cubic-bezier(.35,0,.25,1),transform .4s cubic-bezier(.35,0,.25,1)}
/* Скругление плашки — из общей настройки «Скругление элементов» (--el), как у остальных элементов; потолок — половина её высоты (около 34 px). */
html.mob .rb-mon > span{display:flex;flex-direction:column;align-items:center;gap:0;padding:10px 24px 8px;border-radius:min(34px,calc(18px * var(--el,1)));
  background:color-mix(in srgb,var(--panel) 82%,transparent);box-shadow:0 6px 24px rgba(0,0,0,.10)}
html.mob .rb-mon b{font:700 24px/28px var(--font-h1);color:var(--tx)}
html.mob .rb-mon i{font:500 14px/18px var(--font-body);font-style:normal;color:var(--mob-gray)}
@media (prefers-reduced-motion:reduce){html.mob .rb-mon,html.mob .rb-mon.on{transition:none}}

/* ---------- нижний ряд: капсула и «Создать» в одну линию (везде), «…» — третья кнопка капсулы ----------
   Капсула — «дом», значок разделов и «…» (#mMore). «Создать» стоит справа в той же строке: высота
   и скругление те же, что у капсулы (46 px, --mob-r); коробка кнопки остаётся 56 px (от неё считается сжатие), стекло 46 px по её центру
   (top:5px), значок при сжатии сдвинут к середине стекла (--fab-shift + 5 px). Ширину капсулы задаёт --nav-r (мобильная.js, мерка): 14 + ширина
   развёрнутой кнопки + зазор 10. Логика прокрутки прежняя: вниз — капсула уходит, кнопка сжимается к «＋» в углу (на той же
   линии), вверх — возвращаются. Подпись кнопки длиннее 150 px обрезается многоточием. */
/* Туман панели — полоса только над капсулой и под ней самой: прозрачный сверху, плотный на уровне верха капсулы, снова прозрачный к её низу (дальше капсула
   его закрывает). Раньше туман был плотным до самого низа экрана — под капсулой лежал белый «квадрат», закрывавший последние строки ленты и календаря, а справа
   (где кнопка, туман вырезали) сетка была видна: получалась ступенька. Теперь ниже капсулы ничего не закрашено, лента видна до самого края. Шапка (.top)
   поднята над панелью по слою (41 против 40), чтобы «Создать», лежащая в её стеке, не уходила под туман — вырезать правую часть панели больше не нужно. */
html.mob #mNav{padding-right:var(--nav-r,163px);clip-path:none;background:none}   /* тумана нет: капсула узкая и плавает над лентой, полоса тумана по всей ширине читалась как лишний белый след */
html.mob .top{z-index:41}
/* Капсула — ровно три кнопки (дом, значок разделов, «…»); справа до «Создать» пусто. */
html.mob #mNav{justify-content:flex-start}
html.mob #mNav::before{right:auto;width:calc(var(--mob-btn) * 3);box-shadow:0 2px 5px rgba(0,0,0,.2),0 0 0 .5px rgba(0,0,0,.12)}   /* чёткая тень: короткое размытие и тонкий тёмный контур */
html.mob .mn-cap::after{display:none}
html.mob .mn-b.more{position:relative}
html.mob .mn-b.more::before{content:"";position:absolute;left:0;top:11px;bottom:11px;width:var(--stroke-w,.5px);background:var(--mob-line);pointer-events:none}
html.mob #createBtn{bottom:calc(env(safe-area-inset-bottom) + 3px);transform:translateY(0);max-width:150px}
html.mob #createBtn .fab-glass{height:46px;top:5px;border-radius:var(--mob-r)}
html.mob #createBtn span{overflow:hidden;text-overflow:ellipsis;max-width:100%}
html.mob.mob-barhide #createBtn .fab-glass{width:46px}
html.mob.mob-barhide #createBtn .i{transform:translateX(calc(var(--fab-shift) + 5px))}
/* «…» (#mMore) — третья кнопка капсулы: значок темнее дома (цвет текста), ширина та же. */
html.mob #mMore svg{fill:currentColor}

/* ---------- режим календаря: «Создать» всегда свёрнута, при прокрутке ничего не прячется и не меняется ----------
   Календарь — любая страница, где в #altWrap лежит .cal (сетка месяца, лента месяцев, расписание). Кнопка свёрнута (стекло 46 px, подпись скрыта), капсула
   шире — места справа нужно только под свёрнутую кнопку: --nav-r = 70 px. Прокрутку календаря капсула не слушает (мобильная.js, прокрутка). */
html.mob:has(#altWrap > .cal) #mNav{--nav-r:70px;transition:transform .26s cubic-bezier(.22,1,.36,1),padding-right .25s ease}
html.mob:has(#altWrap > .cal) .calgrid,html.mob:has(#altWrap > .cal) .calagenda{padding-bottom:calc(66px + env(safe-area-inset-bottom))}
html.mob:has(#altWrap > .cal) #createBtn{--fab-d:.2s;--fab-e:cubic-bezier(.4,0,.2,1);pointer-events:none}
html.mob:has(#altWrap > .cal) #createBtn .fab-glass{width:46px;pointer-events:auto}
html.mob:has(#altWrap > .cal) #createBtn .i{transform:translateX(calc(var(--fab-shift) + 5px))}
html.mob:has(#altWrap > .cal) #createBtn span{opacity:0}

/* Обязательное поле на телефоне помечено только звёздочкой у названия: красная полоса слева и красная подпись у пустого обязательного поля (компьютерные
   `.frow.need`) в шапке карточки давали «скобку» у названия и даты и не объясняли, что от человека хотят. */
html.mob .frow.need{box-shadow:none}
html.mob .frow.need .fk{color:inherit}
html.mob .mhero .fv textarea::placeholder,html.mob .mhero .fv input::placeholder{color:var(--tx2);opacity:.6;font-style:normal}

/* Остальные записи дня (после трёх видимых) лежат в клетке скрытыми — их читает шторка дня (мобильная.js, шторкаДень). */
html.mob .calev-x{display:none}


/* ---------- шапка: название раздела и стрелки соседних разделов ----------
   Название — крупно по центру (контейнер в тумане, ниже), нажатие открывает список разделов (мобильная.js, шторкаРазделов). По бокам вплотную к тексту — маленькие серые стрелки
   на предыдущий и следующий раздел (#mPrev, #mNext); у крайнего раздела стрелки с этой стороны нет (невидима и не нажимается). Стрелки — отдельные
   кнопки в той же ячейке сетки, а не часть h1: при свайпе h1 едет клонами, а стрелки стоят на месте. */
html.mob .top h1{padding:0 16px;cursor:pointer;-webkit-tap-highlight-color:transparent}
/* Название — «контейнер в тумане»: ширина по надписи (2·--ta − 12 px: от стрелки до стрелки без их значков), по краям по 14 px рассеивающего тумана — название
   возникает из него и уходит в него, а не наезжает на стрелки. Контейнер подстраивается под длину названия (ширина едет за --ta той же кривой, что стрелки). Поля 16 px
   по бокам оставляют надписи чистую середину: туман её не затрагивает. Окно клонов при свайпе (.sw-tw) — тот же контейнер, свой туман; у самих клонов (.sw-t) тумана нет. */
html.mob .top > h1,html.mob .top > .sw-tw{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%)}
html.mob .top > h1{width:calc(2 * var(--ta,140px) - 12px);justify-self:center;box-sizing:border-box}
html.mob.mt-ready .top > h1{transition:width .3s cubic-bezier(.22,1,.36,1)}
html.mob.mob-swipe .top > h1{transition:none}
html.mob .top .sw-t{-webkit-mask-image:none;mask-image:none}
/* Высота строки с названием закреплена: раньше межстрочный интервал шёл от размера шрифта (1,35 ×), и при уменьшении шрифта у длинного названия шапка
   становилась ниже (35 → 22 px), а вся страница под ней «подпрыгивала». Теперь строка всегда 35 px (интервал 30 px, как у шрифта по умолчанию — вид прежний). Клоны названий (при свайпе) берут тот же интервал. */
/* Кнопок по бокам названия больше нет («…» ушла в капсулу, вид — в действия): боковые колонки нулевые, название занимает всю ширину шапки между полями. */
html.mob .top{grid-template-columns:0 minmax(0,1fr) 0;column-gap:0}
html.mob .top h1{line-height:30px}
html.mob .top > h1{height:35px}
html.mob .mt-arr{grid-area:tt;align-self:stretch;z-index:2;width:34px;padding:0;border:0;background:none;display:flex;align-items:center;
  color:var(--mob-gray);-webkit-tap-highlight-color:transparent;transition:opacity .15s ease}
html.mob .mt-arr svg{width:8px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html.mob .mt-arr{justify-self:center;justify-content:center}
html.mob #mPrev{transform:translate(calc(-1 * var(--ta,90px)),var(--tay,0px))}
html.mob #mNext{transform:translate(var(--ta,90px),var(--tay,0px))}
html.mob .mt-arr:active{color:var(--tx)}
html.mob .mt-arr.off{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s ease,visibility 0s linear .15s}
/* Стрелки подъезжают к новому названию плавно (длина надписи меняется — меняется --ta), а не прыгают; на первой раскладке плавности нет (mt-ready ставит мобильная.js). */
html.mob.mt-ready .mt-arr{transition:opacity .15s ease,transform .3s cubic-bezier(.22,1,.36,1)}
/* Пока название едет за пальцем, стрелки идут за ним без плавности (мобильная.js, титыДвиг ведёт --ta сам); на отпускании (.mt-pr) доезжают пружиной. */
html.mob.mob-swipe .top:not(.mt-pr) .mt-arr{transition:opacity .15s ease,visibility 0s linear .15s}
html.mob.mt-ready .mt-arr.off{transition:opacity .15s ease,visibility 0s linear .15s,transform .3s cubic-bezier(.22,1,.36,1)}

/* Кнопка «вниз» в ленте чата — крупнее для пальца */
html.mob .fd-down{width:42px;height:42px;right:12px}

/* Шторка сообщения: у кнопок нет перехода — иначе iOS первое касание по реакции считает наведением (см. style.css, @media (hover:hover)) */
html.mob .fdmenu button{transition:none}
html.mob .fdmenu button:hover{transform:none}

/* Капсулы навигации (вкладки чата «История и чат / Документы…» с лупой, разделы карточки «Основное / Контакты…») — 31.10.2026: шрифт на 2 px меньше
   (17 → 15), сама капсула подогнана под него (кнопки 30 px вместо 34, поле 4 вместо 5, скругления пересчитаны по той же формуле: радиус плашки + поле +
   рамка), фон 80% цвета карточки и размытие, как у стекла нижней панели чата: лента видна сквозь капсулу. Размытие оставлено и в лёгком режиме. */
html.mob .dstabs-l,html.mob .dstabs-r,html.mob .dnav-cap{
  background:color-mix(in srgb,var(--card-bg) 80%,transparent)!important;
  -webkit-backdrop-filter:blur(14px) saturate(1.2)!important;backdrop-filter:blur(14px) saturate(1.2)!important}
html.mob .dstabs-l,html.mob .dstabs-r{padding:4px!important;border-radius:calc((15px + 4px + var(--stroke-w)) * var(--el))!important}
html.mob .dstabs-l button{padding:5px 13px;font-size:15px;line-height:20px;border-radius:calc(15px * var(--el))}
html.mob .dstabs .dstabs-r .dsfind-b,html.mob .dstabs .dstabs-r button{width:40px!important;height:31px!important;min-height:31px;border-radius:calc(15px * var(--el))}
html.mob .dstabs .dstabs-r button svg{width:20px!important;height:20px!important}
html.mob:is(.navbar,.navcap) .dnav button{font-size:15px;line-height:20px;padding:5px 13px;border-radius:calc(15px * var(--el))}
html.mob:is(.navbar,.navcap) .dnav-track{padding:4px}
html.mob .dnav-hl{top:4px;bottom:4px;border-radius:calc(15px * var(--el))}
html.mob .dnav-cap{border-radius:calc((15px + 4px + var(--stroke-w)) * var(--el))!important}

/* Лента чата заходит под капсулы вкладок ровно на их высоту (`--табы-в` меряет app.js): прежние 48 px были рассчитаны под старую высоту капсул,
   и после шапки карточки оставался зазор, из-за которого лента не доходила вплотную к шапке. Отступ сверху — высота шапки + 10 px. */
html.mob .drawer .dstabs + .dsbody{margin-top:calc(-1 * var(--табы-в, 52px));padding-top:calc(var(--табы-в, 52px) + 10px)}

/* Нижний блок ввода в чате (31.10.2026): поля от краёв экрана — 20 px (были 14), и блок ниже — отступ под строкой 6 px над безопасной зоной (был 20),
   сверху 8 (был 10): высота блока (а с ней и стекло под ним, `--стек`) уменьшилась на ~16 px. Лоток вложений, строка ответа и поле приёма файлов
   получили те же боковые 20 px, чтобы стоять в одну линию с кнопкой «+» и полем. С открытой клавиатурой нижний отступ прежний — 8 px (правило выше). */
html.mob .dsbar{padding:8px 20px calc(6px + env(safe-area-inset-bottom))}
/* Нижний отступ панели ввода меняется между «клавиатура открыта» (8 px) и «закрыта» (6 px + безопасная зона ≈ 34 px) — теперь через 0,2 с после ухода клавиатуры (класс снимается с задержкой), и этот скачок на ~32 px плавный. */
html.mob .dsbar{transition:padding-bottom .2s ease}
html.mob .dstray,html.mob .dsreply,html.mob .dsdrop{padding-left:20px;padding-right:20px}

/* Лупа поиска в шапке чата (31.10.2026): постоянное состояние «поиск открыт» — левая капсула (вкладки) скрыта, правая занимает всю ширину; сам ход
   (раскрытие и сворачивание) ведёт WAAPI в `paintChat` (`мобЗапустить`). Пока идёт ход, у гаснущей левой капсулы размытие выключено — иначе на
   каждом кадре перерисовывается размытие под сжимающейся капсулой, и ход дёргается; цвет подложки подобран так, чтобы смены не было видно. */
html.mob .dstabs.ищет-м .dstabs-l{display:none}
html.mob .dstabs.ищет-м .dstabs-r{flex:1 1 0;min-width:0;margin-left:0}
html.mob .dstabs.анимМ .dstabs-l{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:color-mix(in srgb,var(--card-bg) 90%,transparent)!important}
html.mob .dstabs.анимМ .dstabs-r{min-width:0;overflow:hidden}
html.mob .dsfind{height:31px;transition:opacity .2s ease .08s}
html.mob .dsfind input{font-size:16px}

/* Плашка сохранения файла (`плашкаСохранения` в app.js): «Загружаю…» и «Файл готов» с кнопкой — над галереей (z-index выше её 5000) */
.mob-save{position:fixed;left:14px;right:14px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:6000;display:flex;align-items:center;gap:8px;
  padding:10px 12px 10px 16px;border-radius:calc(20px * var(--el,1));background:rgba(28,28,30,.92);color:#fff;font:400 15px/20px var(--cff,var(--font-body));
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 8px 28px rgba(0,0,0,.35);
  opacity:0;transform:translateY(14px);transition:opacity .2s ease,transform .26s cubic-bezier(.2,.9,.3,1)}
.mob-save.on{opacity:1;transform:none}
.mob-save .ms-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mob-save button{flex:0 0 auto;border:0;border-radius:calc(14px * var(--el,1));padding:8px 14px;font:500 15px/20px var(--cff,var(--font-body));background:rgba(255,255,255,.16);color:#fff;cursor:pointer}
.mob-save button:first-of-type{background:#fff;color:#1c1c1e}
/* Ход загрузки на плашке сохранения: полоса под текстом (доля) или бегущая, если размер файла неизвестен */
.mob-save{flex-wrap:wrap}
.mob-save .ms-bar{order:5;flex:1 0 100%;height:3px;margin-top:6px;border-radius:2px;background:rgba(255,255,255,.2);overflow:hidden;position:relative}
.mob-save .ms-bar b{display:block;height:100%;width:0;border-radius:2px;background:#fff;transition:width .18s ease-out}
.mob-save .ms-bar.нет b{width:35%;position:absolute;left:0;animation:ms-бег 1.1s ease-in-out infinite}
@keyframes ms-бег{0%{left:-35%}100%{left:100%}}
@media (prefers-reduced-motion:reduce){.mob-save .ms-bar.нет b{animation:none;width:100%;opacity:.5}}

/* Эффект удержания на сообщении (`эфНачать` в мобильная.js): размытие и затемнение фона вокруг облачка и лёгкое увеличение самого облачка (его копия над размытием) */
.lp-back{position:fixed;inset:0;z-index:95;pointer-events:none;background:rgba(0,0,0,.24);-webkit-backdrop-filter:blur(18px) saturate(1.1);backdrop-filter:blur(18px) saturate(1.1);
  opacity:0;transition:opacity .44s cubic-bezier(.4,0,.2,1)}                 /* размытие постоянное, меняется только прозрачность слоя: анимация самого blur() на iOS мигает при создании и удалении слоя */
.lp-back.on{opacity:1}
.lp-row{position:fixed!important;z-index:96;margin:0!important;pointer-events:none;container-type:inline-size;opacity:0;transition:transform .5s cubic-bezier(.2,.8,.3,1),opacity .16s ease}
.lp-row.vis{opacity:1}
/* Облачко заранее на своём композитном слое и с явным начальным `scale(1)`: текстовые облачки (без картинок, которые и так слои) увеличивались «в один кадр» —
   WebKit перерисовывал текст на каждом кадре, да ещё и с большой тенью. Тень — отдельный слой (`.lp-sh`), меняются только прозрачность и масштаб. */
.lp-row .fd-b{transform:scale(1);will-change:transform;transition:transform .44s cubic-bezier(.25,.7,.3,1)}
.lp-sh{position:absolute;pointer-events:none;opacity:0;box-shadow:0 12px 34px rgba(0,0,0,.3);will-change:transform,opacity;transition:opacity .44s ease,transform .44s cubic-bezier(.25,.7,.3,1)}
.lp-row.on .lp-sh{opacity:1;transform:scale(1.05)}
.lp-row.on.pin .lp-sh{transform:none}
.lp-row.on .fd-b{transform:scale(1.05)}
.lp-row.on.pin .fd-b{transform:none}             /* облачко уже подхвачено шторкой — увеличение берёт на себя transform самой строки */
/* Панель «ответить / реакция» над облачком (`.fd-act`) — для мыши (проявляется через 2 с наведения). На телефоне `:hover` залипает после касания, панель всплывала
   над облачком и принимала касания: она заходит на нижний край предыдущего облачка, и удержание «в облачко» попадало в панель следующего (выбиралось нижнее
   сообщение), а накопившиеся панели «сдвигали интерфейс». Здесь всё делает долгое нажатие, поэтому панели нет вовсе. */
html.mob .fd-act,.lp-row .fd-act{display:none!important}
@media (prefers-reduced-motion:reduce){.lp-back,.lp-row .fd-b{transition:none}}

/* Шторка сообщения на телефоне лежит вне панели чата (на уровне карточки) — шрифт панели ей нужно задать самой */
.fdmenu{--cff:var(--font-body);--cfs:14px}

/* Эффект удержания: стекло нижней панели чата гаснет на время эффекта (см. `эфНачать`) — иначе два размытия друг над другом мигают на iOS. Слои эффекта
   заранее вынесены в свои композитные слои (will-change), чтобы они не создавались на лету в момент анимации. */
html.mob .dside::after{transition:opacity .44s cubic-bezier(.4,0,.2,1)}
html.mob .drawer.lp-on .dside::after{opacity:0}
.lp-back{will-change:opacity;transform:translateZ(0)}
.lp-row{will-change:transform,opacity}

/* Ответ прямо в шторке (`режимОтвета` в app.js): «Ответить» превращается в поле ввода сверху шторки; шторка идёт к итоговой высоте = поле + место под клавиатуру
   (`--rp-kb`: предсказано по прошлому разу, затем настоящая; белый фон идёт до самой клавиатуры — под её панель «вверх/вниз/✓» тоже) */
.fdmenu .rp-box{display:flex;align-items:flex-end;gap:8px}
.fdmenu:not(.rp) .rp-box{position:absolute;left:0;right:0;bottom:0;opacity:0;pointer-events:none}      /* до превращения поле уже в шторке (для фокуса и клавиатуры), но не видно и высоту не меняет */
html.mob .fdmenu.rp{bottom:0!important;max-height:none;overflow:hidden;padding:10px 8px calc(var(--rp-kb,0px) + 10px);transition:padding-bottom .25s cubic-bezier(.2,.8,.3,1)}
.fdmenu.rp:not(.rp-done) .rp-box{position:absolute;left:12px;right:12px;top:10px}       /* пока пункты гаснут, поле лежит поверх первой строки */
.fdmenu.rp.rp-done > :not(.rp-box){display:none}
.fdmenu.rp.rp-done .rp-box{position:static;margin:0 4px}
.rp-ta{flex:1;min-width:0;resize:none;border:0;outline:none;border-radius:calc(20px * var(--el,1));padding:10px 14px;background:rgba(120,120,128,.12);color:var(--tx);
  font:400 17px/22px var(--cff,var(--font-body));-webkit-appearance:none;appearance:none;max-height:none}
.rp-send{flex:0 0 40px;width:40px;height:40px;border:0;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;
  transition:opacity .16s ease,transform .16s ease}
.rp-send svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.rp-send:disabled{opacity:.35;transform:scale(.92)}

/* Пока палец держит облачко (класс `lp-hold`, мобильная.js): выделение и системное меню «Скопировать / Найти / Перевести» выключены на всей странице */
html.mob.lp-hold,html.mob.lp-hold *{-webkit-user-select:none!important;user-select:none!important;-webkit-touch-callout:none!important}

/* Копия облачка на уровне карточки: запасные значения переменных шрифта панели чата (точные копируются с настоящей строки в `эфНачать`) */
.lp-row{--cff:var(--font-body);--cfs:17px}

/* Режим ответа: облачко едет вместе с верхом шторки в одном темпе — своего перехода у строки нет (см. `ЛПэффектСинхр`) */
.lp-row.rp-sync{transition:none}


/* Режим «клавиатура толкает» (опция, мобильная.js: `kbpush-mode`). Шапка на время движения выше слоя чата и прячет всё, что уехало под неё; в момент подмены раскладки
   (`kb-swap`) у окна, `body`, слоя чата и вкладок нет переходов, нижний отступ панели ввода идёт теми же 0,5 с, что и слой. */
.drawer.kbpush .dh{z-index:6}
/* Пока слой чата едет вверх (или обратно), снизу открывается фон самой карточки — он серый (`--chat-bg`), и за клавиатурой сперва виден серый, а потом, когда
   ужатая раскладка получает белую подложку, — белый. На время хода фон карточки — тот же сплошной белый, что у подложки: цвет не меняется. */
html.mob .drawer.kbpush{background:var(--card-bg);transition:none}
.drawer.kbpush .dsbar textarea,.drawer.kbpush .dsbar input{caret-color:transparent}      /* курсор рисует iOS: он не едет вместе с нашей анимацией слоя и «съезжал» вверх — на время движения прячем */
html.kb-swap .drawer,html.kb-swap body,html.kb-swap .dside,html.kb-swap .dstabs{transition:none!important}
html.kbpush-mode.mob.mob-kbpad .dsbar{padding-bottom:calc(6px + env(safe-area-inset-bottom));transition:none}      /* в режиме «толкает» размер панели ввода не меняется */
html.kbpush-mode.mob .dsbar,html.kbpush-mode.mob.mob-kbpad .dsbar{padding-bottom:calc(6px + env(safe-area-inset-bottom) * .3);transition:none}     /* в режиме «толкает» нижний отступ плашки постоянный и небольшой (≈16 px на iPhone): одинаковый без клавиатуры и с ней — плашка не меняет размер, верхний и нижний отступы ровные */


/* Чат карточки, открытой боком из календаря или списка (`body.asaside`, `body.split`). Настольное правило с идентификатором (`body.asaside #drawer .dside{position:relative;flex:1 1 0…}`, style.css) сильнее
   мобильного `.drawer.mob-chat .dside{position:absolute;inset:0}` и клало чат в поток ПОД скрытое, но занимающее место тело карточки — чат уезжал за нижний край экрана, экран оставался пустым
   («чата нет»; мероприятие из календаря, свайп влево). Тут то же правило с большей силой, только для режима чата. */
html.mob body.asaside #drawer.mob-chat .dside,html.mob body.split #drawer.mob-chat .dside{position:absolute;inset:0;width:100%;flex:none;border-left:0;box-shadow:none;z-index:2}


/* Подкладка под клавиатурой (владелец: «фон за клавиатурой — на нём виден календарь сущности»). Клавиатура и панель «вверх/вниз/✓» полупрозрачны, а карточка, ужатая под клавиатуру,
   заканчивается над ней — снизу просвечивала страница позади (календарь, список). Раньше это закрывала тень карточки с большим разливом (`mob-kb .drawer.on`), но у карточки, открытой боком
   (`body.asaside #drawer`), её перебивало настольное правило с идентификатором — и подкладки не было. Теперь отдельный слой на `html`: от нижнего края окна (`--vvh`) до низа экрана,
   то же «стекло», что у нижнего блока чата (80% цвета карточки + размытие), между страницей (z 54 — вровень с затемнением) и карточкой (z 55). Без клавиатуры `--vvh` = высоте экрана, слой нулевой. */
html.mob.mob-kb::after{content:"";position:fixed;left:0;right:0;top:var(--vvh,100%);bottom:0;z-index:54;pointer-events:none;
  background:var(--card-bg)}      /* сплошной цвет карточки, как у нижней панели чата: без прозрачности и размытия */

/* ===== Карточка записи на телефоне: короткая шапка, капсула «Основное | Чат и история», меню (5.11.2026) =====
   Шапка — строка в 50 px (макет Figma: 15 сверху и снизу при тексте 20); кнопка чата ушла в капсулу (в шапке остаётся скрытой — её
   нажатия ведут слайд). Капсула с кнопкой стоит между шапкой и телом карточки и не двигается: прокручивается только тело. */
html.mob .drawer .dh-top{padding-top:0;height:50px;box-sizing:border-box;align-items:center}
html.mob .drawer .dh-top > .mchat{display:none!important}
/* Прежняя плавающая навигация по разделам и вкладки чата на телефоне заменены меню (кнопка справа в капсуле): их кнопки остаются в
   разметке и выполняют выбор (нажатие по скрытой кнопке — тот же путь, что и раньше), но не видны и места не занимают. */
html.mob .drawer .dnav{display:none!important}
html.mob .drawer .dside .dstabs{position:absolute;left:0;right:0;top:0;height:0;margin:0!important;padding:0!important;overflow:visible;opacity:0;pointer-events:none}
html.mob .drawer .dside{position:relative}

html.mob .drawer .mcap-row{display:flex;align-items:center;justify-content:center;gap:10px;height:46px;padding:6px 14px 0;box-sizing:border-box;flex:0 0 auto;margin-bottom:-46px;pointer-events:none;position:relative;z-index:6}
html.mob .mcap{position:relative;display:flex;align-items:center;gap:5px;height:40px;padding:5px;box-sizing:border-box;border-radius:calc(13px * var(--el));background:color-mix(in srgb,var(--card-bg) 80%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.8);backdrop-filter:blur(14px) saturate(1.8);box-shadow:var(--pill-shadow)}
html.mob .mcap-b{position:relative;z-index:1;display:flex;align-items:center;gap:5px;height:30px;padding:0 10px;border:0;background:none;border-radius:calc(9px * var(--el));font:400 15px/18px var(--font-body);color:#5A5A5E;white-space:nowrap;transition:color .25s ease;-webkit-tap-highlight-color:transparent}
html.mob .mcap-b.on{color:var(--tx)}
html.mob .mcap-ch{display:block;width:0;height:7px;margin-left:-5px;overflow:hidden;opacity:0;color:#454545;transition:width .3s var(--openc),margin-left .3s var(--openc),opacity .2s ease}
html.mob .mcap-b.on .mcap-ch{width:11px;margin-left:0;opacity:.55}
html.mob .mcap-ch svg{display:block;width:11px;height:7px}
/* Ползунок — подложка активного пункта; едет и меняет ширину (у «Основного» шеврон то появляется, то уходит). */
html.mob .mcap-hl{position:absolute;left:0;top:5px;height:30px;width:0;border-radius:calc(9px * var(--el));background:var(--chip-bg);transition:transform .36s cubic-bezier(.33,.7,.3,1),width .3s cubic-bezier(.33,.7,.3,1);will-change:transform}
/* Кнопка справа: лупа на карточке, три точки в чате — лупа поворачивается и гаснет, точки проявляются с обратным поворотом. */
html.mob body.cardnew #drawer .mcap-b[data-p="chat"],html.mob body.cardnew2 #drawer2 .mcap-b[data-p="chat"]{display:none}
/* Меню капсулы: лежит в <body> (см. мобильная.js), выпадает под капсулой; на карточке — слева, в чате — справа от кнопки. */
html.mob #mCapMenu{position:fixed;inset:0;z-index:70;visibility:hidden;pointer-events:none}
html.mob #mCapMenu.on{visibility:visible;pointer-events:auto}
html.mob .mcm-back{position:absolute;inset:0}
html.mob .mcm-box{position:absolute;left:14px;width:min(330px,calc(100vw - 28px));max-height:min(62vh,calc(var(--vvh,100vh) - 200px));display:flex;flex-direction:column;background:var(--card-bg);border-radius:18px;box-shadow:0 10px 36px rgba(0,0,0,.2),0 0 0 .5px rgba(0,0,0,.06);overflow:hidden}
html.mob .mcm-s{display:flex;align-items:center;gap:8px;flex:0 0 auto;margin:8px;padding:0 12px;height:40px;border-radius:12px;background:var(--chip-bg)}
html.mob .mcm-si{flex:none;width:15px;height:15px;color:#A9A8AF}
html.mob .mcm-s input{flex:1 1 auto;min-width:0;border:0;outline:none;background:none;font:400 17px/22px var(--font-body);color:var(--tx);-webkit-appearance:none}
html.mob .mcm-l{overflow-y:auto;overscroll-behavior:contain;padding:6px}
html.mob .mcm-r{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:0 12px;border:0;background:none;border-radius:11px;font:400 17px/22px var(--font-body);color:var(--tx);text-align:left;-webkit-tap-highlight-color:transparent}
html.mob .mcm-r:active{background:var(--chip-bg)}
html.mob .mcm-r.on{background:color-mix(in srgb,var(--accent) 8%,transparent);font-weight:500}
html.mob .mcm-f{flex-direction:column;align-items:flex-start;gap:1px;padding:7px 12px}
html.mob .mcm-k{font-size:13px;line-height:17px;color:var(--tx2)}
html.mob .mcm-v{max-width:100%;font-size:16px;line-height:21px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.mob .mcm-h{padding:8px 12px 4px;font-size:13px;line-height:17px;color:var(--tx2)}
html.mob .mcm-n{margin-left:auto;min-width:20px;padding:0 6px;border-radius:10px;background:var(--accent);color:#fff;font:600 12px/20px var(--font-body);font-style:normal;text-align:center}
html.mob .mcm-sep{height:.5px;margin:4px 12px;background:var(--stroke)}
html.mob .mcm-ic{flex:none;width:18px;height:18px;color:#A9A8AF}
html.mob .mcm-e{padding:14px 12px;font-size:15px;color:var(--tx2)}
html.mob .drawer .dh-top h2 > .dlike{margin-left:auto}
html.mob .mcm-ic{fill:currentColor}
/* Полоса капсулы не должна выделяться плашкой: на карточке её фон — фон тела карточки, в чате — фон ленты (смена идёт вместе со слайдом). */

/* Капсула и поиск (5.11.2026, вторая редакция). Внутренняя полоса .mcap-in держит капсулу и кнопку-лупу; лупа (.mcap-sf) растягивается в строку
   поиска, капсула сжимается в ноль и гаснет (ход ведёт WAAPI, см. мобильная.js `ход`); в покое кнопка 40×40. */
html.mob .mcap-in{position:relative;z-index:1;display:flex;align-items:center;gap:10px;pointer-events:auto;max-width:100%;min-width:0}
html.mob .mcap-row.ищет:not(.идёт) .mcap-in{width:100%}
html.mob .mcap-row.ищет:not(.идёт) .mcap{display:none}
html.mob .mcap{flex:0 0 auto;overflow:hidden}
html.mob .mcap-sf{position:relative;flex:0 0 40px;width:40px;min-width:40px;height:40px;box-sizing:border-box;border-radius:calc(13px * var(--el));background:color-mix(in srgb,var(--card-bg) 80%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.8);backdrop-filter:blur(14px) saturate(1.8);box-shadow:var(--pill-shadow);color:#A9A8AF;overflow:hidden;-webkit-tap-highlight-color:transparent;cursor:pointer}
html.mob .mcap-row.ищет .mcap-sf,html.mob .mcap-row.идёт .mcap-sf{flex:1 1 0;width:auto}
html.mob .mcap-sf input::-webkit-search-cancel-button{display:none}
html.mob .mcap-b.open .mcap-ch svg{transform:rotate(180deg)}
html.mob .mcap-ch svg{transition:transform .25s ease}

/* Полоса капсулы фона не имеет: капсула и кнопка — стекло (фон 80 % + размытие), лента и тело карточки идут под ними. Ряд наложен на верх
   содержимого (отрицательный нижний отступ), поэтому у тела и ленты верхний отступ больше на высоту ряда (46 px), а переход к разделу
   останавливается ниже капсулы. */
html.mob .drawer .dsplit > .db{padding-top:58px}
html.mob .drawer .dsbody{padding-top:58px!important;margin-top:0!important}
html.mob .drawer .db .fsec{scroll-margin-top:60px}
/* Нижний отступ шапки карточки: было 18 px (общий отступ .dh), стало 4 — строка шапки (50 px) и граница почти вплотную, как в макете. */
html.mob .drawer .dh{padding-bottom:4px}

/* Поиск по ленте: нижняя панель ввода гаснет (мобильная.js `панельПрятать`), место за ней остаётся — лента не двигается. */
html.mob .drawer.mob-find .dsbar{opacity:0;pointer-events:none}

/* Строка поиска (flex): лупа, поле, справа счётчик «3 из 50», стрелки по совпадениям и «×». Закрытая — кнопка 40×40: поле и правая часть
   схлопнуты и прозрачны. Стрелки и счётчик только у поиска по ленте (data-sm="chat"). */
html.mob .mcap-sf{display:flex;align-items:center;padding-left:12.5px}
html.mob .mcap-sf .mcap-i{position:static;flex:none;width:15px;height:15px;margin:0}
html.mob .mcap-sf input{flex:1 1 0;min-width:0;width:auto;margin:0 0 0 11px;padding:0;border:0;outline:none;background:none;font:400 17px/22px var(--font-body);color:var(--tx);-webkit-appearance:none;opacity:0;pointer-events:none;transition:opacity .08s ease}
html.mob .mcap-row.ищет .mcap-sf input{opacity:1;pointer-events:auto;transition:opacity .15s ease .1s}
html.mob .mcap-sr{flex:none;display:flex;align-items:center;gap:0;margin-right:2px;opacity:0;pointer-events:none;transition:opacity .08s ease}
html.mob .mcap-row.ищет .mcap-sr{opacity:1;pointer-events:auto;transition:opacity .15s ease .1s}
html.mob .mcap-sn{font:400 13px/18px var(--font-body);font-style:normal;color:var(--tx2);white-space:nowrap;margin-right:2px}
html.mob .mcap-su,html.mob .mcap-sd,html.mob .mcap-sx{display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;background:none;color:#A9A8AF;-webkit-tap-highlight-color:transparent}
html.mob .mcap-su svg,html.mob .mcap-sd svg{display:block;width:12px;height:8px}
html.mob .mcap-su svg{transform:rotate(180deg)}
html.mob .mcap-sx{font:400 24px/32px var(--font-body)}
html.mob .mcap-row:not([data-sm="chat"]) .mcap-sn,html.mob .mcap-row:not([data-sm="chat"]) .mcap-su,html.mob .mcap-row:not([data-sm="chat"]) .mcap-sd{display:none}
html.mob .mcap-row:not(.есть-совп) .mcap-su,html.mob .mcap-row:not(.есть-совп) .mcap-sd{opacity:.3;pointer-events:none}
/* Текущее совпадение при листании стрелками. */
html.mob .drawer .dsbody [data-msg].mob-find-cur .fd-b,html.mob .drawer .dsbody .fd-sys[data-msg].mob-find-cur{outline:2.5px solid var(--accent);outline-offset:2px}
/* Под клавиатурой в поиске по ленте — цвет ленты, а не белая подкладка (нижней панели ввода в этом режиме нет). */
html.mob .drawer.mob-find,html.mob .drawer.kbpush.mob-find{background:var(--chat-surface)}
html.mob .drawer.mob-find .dside::after{background:var(--chat-surface)!important}
/* Чипы людей в поле «Ответственный» стоят в строке как inline-flex и выравнивались по базовой линии: у чипа с аватаркой она — по низу картинки,
   у чипа без неё — по тексту, и «Сергей» оказывался на несколько пикселей ниже «Руслана Антонова» (5.11.2026). Центрируем по вертикали. */
/* Safari считал ширину полосы капсулы по содержимому закрытой кнопки (лупа + поле + правая часть ≈ 220 px), а не по её 40 px, и полоса получалась шире
   ряда: группа вставала у левого края вместо центра (скриншоты 5.11, 22:48–22:52). Ширина кнопки теперь задана явно (width:40px) — вклад в
   размер полосы ровно 40; в открытом поиске и во время хода ширину ведёт flex (width:auto). */
/* Чипы людей в поле «Ответственный» стоят в строке как inline-flex и выравнивались по базовой линии: у чипа с аватаркой она — по низу картинки,
   у чипа без неё — по тексту, и «Сергей» оказывался на ~3 px ниже «Руслана Антонова». Центрируем по вертикали (замер: 593,2 → 590,2). */
html.mob .fv .refchip{vertical-align:middle}
/* Лента не должна тянуться вбок (на iPhone при поиске её можно было сдвинуть пальцем влево и вправо). */
html.mob .drawer .dsbody{overflow-x:hidden;overscroll-behavior-x:none}

/* Пока открыт поиск (`mob-finding` на <html>), раскладка карточки НЕ реагирует на клавиатуру: ни ужатия окна по visualViewport (mob-kb), ни «толкания» слоя чата
   (kbpush) — лента чата и тело карточки стоят на месте, клавиатура просто закрывает низ. Для поля ввода комментария всё работает как раньше. */
html.mob.mob-finding body{height:100dvh!important;top:0!important;bottom:auto!important}
html.mob.mob-finding .drawer{height:auto!important;top:0!important;bottom:0!important}
html.mob.mob-finding .drawer .dside,html.mob.mob-finding .drawer .dsplit > .db{transform:none!important}
html.mob.mob-finding .drawer.kbpush{background:var(--chat-surface)}
html.mob.mob-finding::after{display:none!important}