/* ══════════════════════════════════════════════════════════════════
   SIDEBARS — полосы разделов и панель сайдбара
   Сайдбар перестаёт держать все ветки разом: он показывает только
   тот раздел, который выбран в полосе. Пилюли режима больше не нужны.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --rail-w: 52px;
  /* Зазор между панелями — полосой, сайдбаром, контентом и полосой чатов.
     Ужат на треть, с 10px: колонки по-прежнему читаются раздельно, а места
     между ними уходит меньше. От него же считается отбивка крошек */
  --rail-gap: 7px;
  /* Дефолт ширины левых колонок (панель управления, чат сущности, vibe-чат):
     треть ширины страницы без полосы разделов и полей окна */
  --left-col-def: calc((100vw - var(--rail-w) - var(--rail-gap) - 20px) / 3);
}
/* Тот же зазор держит и сетка body — задаём одним числом */
body.lb { gap: var(--rail-gap); }
/* Топбар и области стоят теснее: прежние 6px под шапкой давали лишний воздух */
body.lb:has(> #mainTopbar) > #mainTopbar { padding-bottom: 2px; }

/* ─────────────────────────────────────────────────────────────────
   Раскладка: топбар поднят в body, дальше идёт грид — добавляем
   полосе собственную колонку перед сайдбаром
   ───────────────────────────────────────────────────────────────── */

/* Хвостовой колонки правой полосы чатов больше нет — её auto оставлял бы
   лишний зазор сетки у правого края */
body.lb:has(> #mainTopbar) { grid-template-columns: auto auto minmax(0, 1fr); }
body.lb:has(> #mainTopbar) > .lb-rail     { grid-column: 1; grid-row: 2; }
body.lb:has(> #mainTopbar) > .sidebar-col { grid-column: 2; grid-row: 2; }
body.lb:has(> #mainTopbar) > .content-col { grid-column: 3; grid-row: 2; }

/* Колонка чата сущности вклинивается между сайдбаром и контентом —
   слева от панели, как чат на vibe-страницах */
body.lb.chat-col-open:has(> #mainTopbar) { grid-template-columns: auto auto auto minmax(0, 1fr); }
body.lb.chat-col-open:has(> #mainTopbar) > #chat-panel  { grid-column: 3; grid-row: 2; }
body.lb.chat-col-open:has(> #mainTopbar) > .content-col { grid-column: 4; grid-row: 2; }
/* На страницах без сайдбара зазоры сетки нулевые — их правило специфичнее,
   поэтому сетке с чатом нужна своя запись; поле панели держит зазор до контента */
body.lb.chat-col-open:is([data-rail="start"], [data-rail="mywork"], [data-rail="work"], [data-rail="people"]):has(> #mainTopbar) {
  grid-template-columns: auto 0 auto minmax(0, 1fr);
}
body.lb.chat-col-open:is([data-rail="start"], [data-rail="mywork"], [data-rail="work"], [data-rail="people"]) > #chat-panel {
  margin-right: var(--rail-gap);
}
/* «Начало»: чат из полосы занимает всю область контента — панель управления
   за ним прячется, чату отдана вся ширина до правого края */
body.entity-chat-full.lb.chat-col-open:has(> #mainTopbar) {
  grid-template-columns: auto 0 minmax(0, 1fr) 0;
}
body.entity-chat-full.chat-col-open > .content-col { display: none; }
body.entity-chat-full.lb.chat-col-open > #chat-panel { width: auto; margin-right: 0; }

/* «Начало», «Мои работы», «Работы» и «Исполнители» — страницы без своего
   дерева: сайдбар там пустой, поэтому колонку убираем совсем и контент
   занимает её место */
body.lb:is([data-rail="start"], [data-rail="mywork"], [data-rail="work"], [data-rail="people"]) > .sidebar-col { display: none; }
body.lb:is([data-rail="start"], [data-rail="mywork"], [data-rail="work"], [data-rail="people"]):has(> #mainTopbar) {
  grid-template-columns: auto 0 minmax(0, 1fr);
  column-gap: 0;
}
/* Зазоры сетки обнулены — возвращаем их полосе вручную */
body.lb:is([data-rail="start"], [data-rail="mywork"], [data-rail="work"], [data-rail="people"]) > .lb-rail { margin-right: var(--rail-gap); }
/* Крошки и плитки пространств прижимаются к полосе: сайдбара, от которого
   они отмерялись, на этих страницах нет */
body.lb:is([data-rail="start"], [data-rail="mywork"], [data-rail="work"]) #mainTopbar > .ws-pills-flat {
  width: auto;
}

/* Свёрнутый сайдбар обнуляет свою колонку — полоса остаётся на месте */
body.lb.sb-hidden:has(> #mainTopbar) { grid-template-columns: auto 0 minmax(0, 1fr); column-gap: 0; }
body.lb.sb-hidden.chat-col-open:has(> #mainTopbar) { grid-template-columns: auto 0 auto minmax(0, 1fr); }
body.lb.sb-hidden.chat-col-right.chat-col-open:has(> #mainTopbar) {
  grid-template-columns: auto 0 minmax(0, 1fr) var(--chat-col-w, var(--left-col-def, 460px));
}
/* Полоса не должна прилипать к контенту, когда зазоры грида обнулены */
body.lb.sb-hidden > .lb-rail { margin-right: var(--rail-gap); }
/* Всплывающую панель отодвигает от полосы sidebars.js: app.js считает её
   положение по бутерброду инлайновым style, и CSS тут не помог бы */

/* ─────────────────────────────────────────────────────────────────
   Правая полоса — разделы-страницы у правого края экрана.
   Ставится в первую неявную колонку за последней явной (grid-column: -1):
   так одно правило работает во всех вариантах сетки выше
   ───────────────────────────────────────────────────────────────── */

body.lb:has(> #mainTopbar) > .rb-rail { grid-column: -1; grid-row: 2; }
.rb-rail {
  flex-shrink: 0; position: relative;
  width: var(--rail-w);
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; padding: 8px 0;
  background: #fff; border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08), 0 0 0 1px rgba(0, 0, 0, .04);
  z-index: 120;
}
/* Подписи кнопок выпадают влево — справа от полосы края экрана нет */
.rb-rail .lb-btn::after { left: auto; right: calc(100% + 8px); }
/* Та же кнопка в шапке стоит у самого правого края окна — подсказку справа
   от неё было бы не видно, показываем слева */
#mainTopbar .rb-toggle::after { left: auto; right: calc(100% + 8px); }
/* Зазоры сетки на этих страницах обнулены — отбиваем полосу вручную */
body.lb:is([data-rail="start"], [data-rail="mywork"], [data-rail="work"], [data-rail="people"]) > .rb-rail,
body.lb.sb-hidden > .rb-rail { margin-left: var(--rail-gap); }
/* Топбар занимает только явные колонки сетки, а полоса живёт в неявной —
   дотягиваем его правый край до края полосы, иначе справа от кнопки
   «В работу» остаётся пустой отступ */
body.lb:has(> #mainTopbar) > #mainTopbar {
  margin-right: calc(-1 * (var(--rb-w, var(--rail-w)) + var(--rail-gap)));
}
/* Полоса распахнулась — топбар тянем до её нового края, иначе поиск,
   «В работу» и кнопка полосы съезжали влево вместе с ним */
body.lb:has(.rb-rail.open) { --rb-w: var(--rb-rail-w, 232px); }
/* Кнопка полосы разделов стоит ровно над самой полосой. Правый край шапки уже
   доведён до края полосы (margin-right выше), поэтому остаётся отступить
   столько же, сколько полоса оставляет по бокам своих кнопок: (52 − 38) / 2 */
body.lb:has(> #mainTopbar) > #mainTopbar .topbar-tools > .rb-toggle {
  margin-right: calc((var(--rail-w) - 38px) / 2);
}

/* ─────────────────────────────────────────────────────────────────
   Сама полоса
   ───────────────────────────────────────────────────────────────── */

.lb-rail {
  flex-shrink: 0;
  /* Опора для карточки учётки и её меню: оба выкладываются вправо от полосы */
  position: relative;
  width: var(--rail-w);
  display: flex; flex-direction: column; align-items: center;
  gap: 4px;
  padding: 8px 0;
  background: #fff; border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08), 0 0 0 1px rgba(0, 0, 0, .04);
  /* Выше всплывающей панели (80): полоса создаёт свой контекст наложения,
     и подсказка не может подняться над панелью сама по себе. Ниже модалок */
  z-index: 120;
}

.lb-btn {
  position: relative;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 8px;
  background: transparent; color: var(--text-secondary);
  cursor: pointer; transition: background .13s, color .13s;
}
.lb-btn:hover { background: rgba(15, 30, 60, .06); color: var(--text-primary); }
.lb-btn.on { background: var(--purple); color: #fff; }
/* Раздел открыт в правой области: кнопка подсвечена тише, чем выбранный
   раздел полосы — это состояние области, а не текущей страницы */
.rb-rail .lb-btn.open-here { background: rgba(5, 28, 59, .09); color: var(--purple); }

/* Полоса узкая — названия появляются по наведению */
.lb-btn::after {
  content: attr(data-title);
  position: absolute; left: calc(100% + 8px); top: 50%;
  transform: translateY(-50%);
  padding: 4px 9px; border-radius: 6px;
  background: var(--purple); color: #fff;
  font-size: 11px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .12s;
  z-index: 90;
}
.lb-btn:hover::after { opacity: 1; }

.lb-sep { width: 22px; height: 1px; margin: 4px 0; background: var(--border); }

/* Плашка-тултип чатов свёрнутой полосы — как подпись кнопки раздела,
   только фиксированная: список чатов скроллится и ::after обрезался бы */
.lb-tip {
  position: fixed; z-index: 4000; display: none;
  padding: 4px 9px; border-radius: 6px;
  background: var(--purple); color: #fff;
  font-size: 11px; white-space: nowrap; pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────────
   Чаты в полосе — список переписок из сайдбара живёт между
   «Страницами» и «Настройкой» (на месте бывшего блока направлений)
   ───────────────────────────────────────────────────────────────── */

/* «Мои работы» переехали кнопкой в полосу — пункт в сайдбаре скрыт,
   но остаётся в разметке: его счётчик читает бейдж кнопки полосы */
.sidebar .nav-item[data-page="assignments"] { display: none; }

.lb-chats { width: 100%; flex: 0 1 auto; min-height: 0; overflow-y: auto; }
.lb-chats::-webkit-scrollbar { width: 5px; }
.lb-chats::-webkit-scrollbar-thumb { background: #d4d2e8; border-radius: 10px; }
/* Пустая стрелка дерева даёт строкам лишний левый отступ — здесь её нет */
.lb-chats .tree-arrow { display: none; }
/* Непрочитанное во всём интерфейсе бирюзовое — счётчики чатов в полосе
   держатся того же цвета, а не тревожного красного */
.lb-chats .nav-badge.count { background: var(--teal); color: #fff; }
/* Подзаголовок блока виден только в распахнутой полосе */
.lb-chats-cap { display: none; }

/* ── Свёрнутая полоса: от строки чата остаётся иконка со счётчиком ──
   Список тот же самый, просто без имён: непрочитанные видно, не разворачивая
   полосу, а клик по иконке открывает переписку так же, как из списка */
.lb-rail:not(.open) .lb-chats .chat-list { align-items: center; gap: 2px; }
.lb-rail:not(.open) .lb-chats .chat-name { display: none; }
.lb-rail:not(.open) .lb-chats .tree-item {
  position: relative;
  width: 38px; height: 38px; padding: 0; gap: 0;
  justify-content: center; border-radius: 8px;
}
.lb-rail:not(.open) .lb-chats .tree-ico svg { width: 16px; height: 16px; }
/* Счётчик — тот же кружок, что у кнопок полосы (.lb-dot): цифра в углу иконки */
.lb-rail:not(.open) .lb-chats .nav-badge.count {
  position: absolute; top: 1px; right: 1px;
  box-sizing: border-box; min-width: 16px; height: 16px; margin: 0; padding: 0 3px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 9px; border: 2px solid #fff;
  font-size: 9px; font-weight: 700; line-height: 1;
}

/* ─────────────────────────────────────────────────────────────────
   Распахнутая полоса — сайдбар: у разделов появляются подписи,
   у чатов — имена. Механика прежней правой полосы чатов
   ───────────────────────────────────────────────────────────────── */

.lb-rail { transition: width .18s ease; }
.lb-rail.open { width: var(--lb-rail-w, 232px); align-items: stretch; padding: 8px 12px; }

/* Ручка ширины на правой грани распахнутой полосы — та же механика,
   что была у сайдбара: горячая зона 8px, линия по центру на наведении */
.lb-resizer {
  display: none; position: absolute; top: 0; right: -4px; width: 8px; height: 100%;
  cursor: col-resize; z-index: 30; touch-action: none;
}
.lb-rail.open .lb-resizer { display: block; }
.lb-resizer::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px;
  background: transparent; transition: background .12s;
}
.lb-resizer:hover::before,
body.sidebar-resizing .lb-resizer::before { background: #b9c2d0; }
/* Пока тянем — полоса не анимирует ширину вслед за курсором */
body.sidebar-resizing .lb-rail { transition: none; }

/* Кнопка раздела становится строкой: иконка, подпись из data-title (её же
   показывал тултип — в строке он превращается в обычный текст), счётчик
   уезжает к правому краю */
.lb-rail.open > .lb-btn {
  width: auto; justify-content: flex-start; gap: 10px; padding: 0 10px; height: 36px;
}
.lb-rail.open > .lb-btn::after {
  position: static; transform: none; opacity: 1; pointer-events: none;
  background: none; color: inherit; padding: 0;
  font-size: 12.5px; font-weight: 500;
}
.lb-rail.open > .lb-btn > .lb-dot {
  position: static; order: 1; margin-left: auto;
  border: none; width: auto; min-width: 16px; padding: 0 4px; border-radius: 9px;
}
.lb-rail.open .lb-sep { width: auto; align-self: stretch; }

/* Бургер в шапке страницы: ширина полосы, иконка по центру над её кнопками.
   Подложка наведения — квадрат по иконке, а не пилюля на всю ширину кнопки */
body.lb #mainTopbar > .ws-pills-flat > .lb-toggle {
  width: var(--rail-w); height: 32px; flex-shrink: 0; position: relative;
}
body.lb #mainTopbar > .ws-pills-flat > .lb-toggle:hover { background: transparent; }
body.lb #mainTopbar > .ws-pills-flat > .lb-toggle::before {
  content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 32px; height: 32px; border-radius: 8px; transition: background .12s;
}
body.lb #mainTopbar > .ws-pills-flat > .lb-toggle:hover::before { background: rgba(15, 30, 60, .06); }
body.lb #mainTopbar > .ws-pills-flat > .lb-toggle svg { position: relative; z-index: 1; }

.lb-rail.open .lb-chats-cap {
  display: block; padding: 2px 8px 4px;
  font-size: 11px; font-weight: 600; letter-spacing: .3px;
  text-transform: uppercase; color: var(--text-muted);
}

/* ─────────────────────────────────────────────────────────────────
   Учётная запись внизу полосы
   ───────────────────────────────────────────────────────────────── */

/* Распорка прижимает кнопку учётки к низу полосы */
.lb-grow { flex: 1; }

/* Подпись по наведению у учётки своя — сама карточка, поэтому пилюлю с
   именем раздела гасим: без data-title от неё осталась бы пустая плашка */
.lb-acc::after { display: none; }
.lb-acc > .user-avatar { width: 28px; height: 28px; font-size: 10px; }

/* Опору кнопке снимаем: своего значка-счётчика и подсказки у неё нет, зато
   карточка внутри отсчитывается от полосы и встаёт ровно по колонке сайдбара,
   а не по кнопке — та уже отбита от краёв полосы */
.lb-acc { position: static; }

/* Карточка лежит внутри кнопки — так наведение на неё саму держит её
   раскрытой, без отдельного обработчика */
.lb-acc > .sidebar-user {
  display: none;
  position: absolute; left: calc(100% + var(--rail-gap)); bottom: 0;
  width: var(--sidebar-w, 265px); box-sizing: border-box;
  margin-top: 0; text-align: left; z-index: 90;
}
.lb-acc:hover > .sidebar-user { display: flex; }
/* Мостик через зазор до полосы: без него мышь по дороге к карточке теряет
   наведение на кнопку и карточка захлопывается перед самым курсором */
.lb-acc > .sidebar-user::before {
  content: ''; position: absolute; top: 0; bottom: 0;
  right: 100%; width: var(--rail-gap);
}
/* Открытое меню учётки показывает то же самое — карточка поверх него лишняя
   (в распахнутой полосе карточка встроена в панель, её меню не перекрывает) */
body:has(.user-menu.open) .lb-rail:not(.open) .lb-acc > .sidebar-user { display: none; }

/* Распахнутая полоса показывает содержимое карточки прямо в панели, а не
   выпадашкой сбоку: свой аватар кнопки прячем (у карточки он собственный),
   карточное оформление снимаем — только содержимое в строке учётки */
.lb-rail.open .lb-acc { height: auto; padding: 0 6px; }
.lb-rail.open .lb-acc > .user-avatar { display: none; }
.lb-rail.open .lb-acc > .sidebar-user {
  display: flex; position: static; width: 100%; min-width: 0;
  /* min-height 64px — из карточного оформления, встроенной строке он велик */
  min-height: 0;
  padding: 2px 4px; margin: 0; background: transparent;
  box-shadow: none; border-radius: 0; text-align: left;
}
/* Аватар карточки ужат до размера иконок полосы */
.lb-rail.open .lb-acc > .sidebar-user > .user-avatar {
  width: 28px; height: 28px; font-size: 10px; flex-shrink: 0;
}
/* Почта — своей строкой под именем, целиком; карточка от этого выше */
.lb-rail.open .lb-acc > .sidebar-user { padding: 8px 4px; }
.lb-rail.open .lb-acc .user-name-row {
  flex-direction: column; align-items: flex-start; gap: 2px;
}
.lb-rail.open .lb-acc .user-email { min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* Меню занимает столько же, сколько занимал бы сайдбар, и прижато к левому
   краю окна: открываясь справа от полосы, оно наезжало на область страницы */
.lb-rail > .user-menu {
  inset: 0 auto 0 0;
  width: var(--sidebar-w, 265px);
}

/* Пока смотрят учётку, всплывшая панель разделов только мешает: она встаёт
   ровно под карточку. Полоса и колонка — соседи, поэтому достаём её через ~ */
body.sb-hidden > .lb-rail:has(> .lb-acc:hover) ~ .sidebar-col.peek { display: none; }

/* Счётчик — всегда круг одного размера: одна цифра в него помещается, больше
   девяти растянуло бы его в овал, поэтому там кружок остаётся пустым */
.lb-dot {
  position: absolute; top: 3px; right: 3px;
  box-sizing: border-box;
  width: 16px; height: 16px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 2px solid #fff;
  background: var(--red); color: #fff;
  font-size: 9px; font-weight: 700; line-height: 1;
  /* Цифра садится по оптическому центру: у шрифта свои надстрочные поля,
     из-за них она визуально висит чуть выше середины кружка */
  padding-top: 1px;
}
.lb-dot.calm { background: var(--teal); }
/* Пустой кружок — того же размера, что и с цифрой; снимаем только отбивку,
   которая сажала цифру по оптическому центру */
.lb-dot.plain { padding-top: 0; }
.lb-btn.on .lb-dot { border-color: var(--purple); }

/* ─────────────────────────────────────────────────────────────────
   Сайдбар показывает только выбранный раздел
   Видимым блокам display не задаём: у .nav-item он flex, и block
   разложил бы счётчик по строке
   ───────────────────────────────────────────────────────────────── */

body[data-rail="start"]     .sidebar [data-rail]:not([data-rail~="start"]),
body[data-rail="work"]      .sidebar [data-rail]:not([data-rail~="work"]),
body[data-rail="knowledge"] .sidebar [data-rail]:not([data-rail~="knowledge"]),
body[data-rail="pages"]     .sidebar [data-rail]:not([data-rail~="pages"]),
body[data-rail="people"]    .sidebar [data-rail]:not([data-rail~="people"]),
body[data-rail="chats"]     .sidebar [data-rail]:not([data-rail~="chats"]),
body[data-rail="setup"]     .sidebar [data-rail]:not([data-rail~="setup"]) { display: none; }

/* Пилюли режима убраны: их работу забрала полоса.
   !important — потому что всплывающая панель возвращает их своим правилом
   body.sb-hidden > .sidebar-col.peek > .mode-pills, оно специфичнее */
body.lb .mode-pills { display: none !important; }

/* Заголовок раздела вместо подписи «Рабочее пространство» */
body.lb .logo-sub { font-weight: 600; color: var(--text-secondary); }

/* ─────────────────────────────────────────────────────────────────
   Топбар: бутерброд по центру полосы, пространства — от сайдбара
   ───────────────────────────────────────────────────────────────── */

body.lb #mainTopbar > .ws-pills-flat > .sb-burger {
  width: var(--rail-w); flex-shrink: 0;
  /* Свой отступ справа бутерброду больше не нужен: расстояние до плиток
     задаёт зазор между колонками, иначе плитки уезжают за край сайдбара */
  margin-right: 0;
}
body.lb #mainTopbar > .ws-pills-flat > .ws-pills { margin-left: var(--rail-gap); }

/* Крошки начинаются от левого края контента, а не сразу за плитками:
   левая зона топбара занимает ровно полосу с сайдбаром. Из ширины вычитаем
   зазор самого топбара (12px) — он идёт следующим и добивает до края контента.
   Минимум, а не жёсткая ширина: имя пространства у активной пилюли может
   быть шире полосы — тогда крошки уезжают правее, а не под пилюли */
body.lb:not(.sb-hidden) #mainTopbar > .ws-pills-flat {
  flex-shrink: 0;
  min-width: calc(var(--rail-w) + var(--rail-gap) + var(--sidebar-w, 265px) + var(--rail-gap) - 12px);
  width: auto;
}

/* ─────────────────────────────────────────────────────────────────
   Вкладки — пилюли вместо подчёркивания
   ───────────────────────────────────────────────────────────────── */

/* Высота пилюли одна на все страницы: в шапке и в контенте вкладки лежат
   в разных обвязках, поэтому задаём её не полями, а min-height */
.tab {
  box-sizing: border-box;
  min-height: 30px;
  padding: 0 12px;
  align-items: center;
  border-radius: 8px;
  border-bottom: none;
  margin-bottom: 0;
}
/* Счётчик внутри вкладки задавал ей высоту своими полями — ужимаем и его */
.tab > .nav-badge.count { padding: 1px 6px; line-height: 1.4; }
.tab:hover:not(.active) { background: rgba(15, 30, 60, .05); }
.tab.active {
  background: rgba(15, 30, 60, .08);
  color: var(--text-primary);
  border-bottom-color: transparent;
  box-shadow: none;
}
/* Линия-основание держала подчёркивание — с пилюлями она уже разделитель,
   поэтому таб-бар отбиваем от неё воздухом, а не прижимаем вплотную */
/* align-items: center — иначе вкладки тянутся до высоты самого высокого
   элемента бара (кнопка «ещё», закладка чата) и перерастают свои 30px */
.tab-bar {
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px; gap: 4px;
  align-items: center;
}

/* ─────────────────────────────────────────────────────────────────
   Прокрутка «Работ»
   Список «Все» скроллится внутри себя, поэтому область над ним переводят
   в overflow: hidden правилом .content:has(> .body-area > #wt-all).
   Ловит оно #wt-all по наличию в разметке, а он лежит там всегда — и на
   «Моих» с «Историей» область оставалась без прокрутки. Пока список
   скрыт, возвращаем ей обычное поведение.
   ───────────────────────────────────────────────────────────────── */

/* Скрывают панель и разметка («display:none»), и app.js («display: none») —
   ловим оба написания */
/* :not(.gantt-scroll) — на «Потоках работ» прокрутку берёт на себя сама
   диаграмма, и подменять раскладку области там нельзя */
.content:not(.gantt-scroll):has(> .body-area > #wt-all[style*="display:none"]),
.content:not(.gantt-scroll):has(> .body-area > #wt-all[style*="display: none"]) {
  overflow-y: auto;
  display: block;
}
.content:not(.gantt-scroll):has(> .body-area > #wt-all[style*="display:none"]) > .body-area,
.content:not(.gantt-scroll):has(> .body-area > #wt-all[style*="display: none"]) > .body-area {
  flex: none; display: block;
}

/* Правая группа таб-бара («Добавить», «⋮»). Отрицательное поле здесь стояло,
   пока у шапки было 20px по краям: тогда группа висела далеко от рамки.
   Сейчас поле карточки 10px — вычет прижимал кнопки вплотную к краю кадра */
.tab-bar > .tab-bar-actions { margin-right: 0; }

/* Вкладки в заголовке страницы тянулись на всю высоту шапки с полем снизу
   в 13px — так подчёркивание ложилось ровно на линию карточки. Пилюле это
   не нужно: она встаёт по центру строки и держит свою высоту */
/* Линии под шапкой нет вовсе: она держала подчёркивание вкладок, а с пилюлями
   опора не нужна — заголовок и так отделён от содержимого воздухом.
   border-bottom гасим явно: базовое правило в styles.css его ещё ставит */
body .head-card:has(.proj-header > .tab-bar) { border-bottom: none; position: relative; }

body .head-card .proj-header > .tab-bar { align-self: center; padding-bottom: 0; }
body .head-card .proj-header > .tab-bar > .tab {
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
}

/* Кнопка бутерброда шире полосы, чтобы иконка стояла по центру рейки, но
   подложка при наведении — квадрат 28×28, как у плиток пространств */
body.lb #mainTopbar > .ws-pills-flat > .sb-burger { position: relative; background: transparent; }
body.lb #mainTopbar > .ws-pills-flat > .sb-burger::before {
  content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 28px; height: 28px; border-radius: 7px; transition: background .12s;
}
body.lb #mainTopbar > .ws-pills-flat > .sb-burger:hover::before { background: #e6eaf2; }
body.lb #mainTopbar > .ws-pills-flat > .sb-burger svg { position: relative; z-index: 1; }

/* Панель управления в «восстановленном» размере — своей колонкой между
   сайдбаром и правым окном, как колонка чата */
body.lb.page-split:has(> #mainTopbar) { grid-template-columns: auto auto auto minmax(0, 1fr); }
/* На страницах с нулевыми зазорами сетки панель не липнет к контенту */
body.lb.page-split:is([data-rail="mywork"], [data-rail="work"], [data-rail="people"]) > #dashPane {
  margin-right: var(--rail-gap);
}
body.lb.page-split:has(> #mainTopbar) > #dashPane    { grid-column: 3; grid-row: 2; }
body.lb.page-split:has(> #mainTopbar) > .content-col { grid-column: 4; grid-row: 2; }
body.lb.sb-hidden.page-split:has(> #mainTopbar) { grid-template-columns: auto 0 auto minmax(0, 1fr); }
/* Панель управления справа от контента (page-split-right) */
body.lb.page-split-right.page-split:has(> #mainTopbar) {
  grid-template-columns: auto auto minmax(0, 1fr) var(--dash-col-w, 520px);
}
body.lb.page-split-right.page-split:has(> #mainTopbar) > .content-col { grid-column: 3; }
body.lb.page-split-right.page-split:has(> #mainTopbar) > #dashPane    { grid-column: 4; }
body.lb.sb-hidden.page-split-right.page-split:has(> #mainTopbar) {
  grid-template-columns: auto 0 minmax(0, 1fr) var(--dash-col-w, 520px);
}
/* Потянули левый край правого окна — его ширина фиксируется, панель берёт остаток */
body.lb.page-split.main-col-sized:has(> #mainTopbar) {
  grid-template-columns: auto auto minmax(320px, 1fr) var(--main-col-w, 720px);
}
body.lb.sb-hidden.page-split.main-col-sized:has(> #mainTopbar) {
  grid-template-columns: auto 0 minmax(320px, 1fr) var(--main-col-w, 720px);
}
body.lb.page-split.main-col-sized > #dashPane { width: auto; }

/* Зеркальная кнопка справа: та же клетка, что у бургера, только у правого
   края — над полосой разделов. Распахнутая правая полоса ведёт себя как
   левая: у кнопок появляются подписи вместо всплывающих */
body.lb #mainTopbar > .rb-toggle {
  width: var(--rail-w); height: 32px; flex-shrink: 0; position: relative;
}
body.lb #mainTopbar > .rb-toggle:hover { background: transparent; }
body.lb #mainTopbar > .rb-toggle::before {
  content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 32px; height: 32px; border-radius: 8px; transition: background .12s;
}
body.lb #mainTopbar > .rb-toggle:hover::before { background: rgba(15, 30, 60, .06); }
body.lb #mainTopbar > .rb-toggle svg { position: relative; z-index: 1; }
.rb-rail { transition: width .18s ease; }
.rb-rail.open { width: var(--rb-rail-w, 232px); align-items: stretch; padding: 8px 12px; }
.rb-rail.open > .lb-btn { width: auto; justify-content: flex-start; gap: 10px; padding: 0 10px; height: 36px; }
.rb-rail.open > .lb-btn::after {
  position: static; left: auto; right: auto; transform: none; opacity: 1; pointer-events: none;
  background: none; color: inherit; padding: 0; font-size: 12.5px; font-weight: 500;
}

/* Счётчик в распахнутой полосе — кружок 18×18 у правого края строки и по
   центру по вертикали: в свёрнутой он висит в углу иконки */
.rb-rail.open > .lb-btn > .lb-dot {
  position: static; order: 1; margin-left: auto; align-self: center;
  width: 18px; height: 18px; min-width: 18px; padding: 0; padding-top: 1px;
  border: none; border-radius: 50%;
  /* Кружок крупнее, чем в свёрнутой полосе, — цифре тесно при 9px */
  font-size: 11px;
}
/* Подсказка кнопки-переключателя выпадает влево: справа от неё край экрана */
body.lb #mainTopbar > .rb-toggle::after { left: auto; right: calc(100% + 8px); }
/* Ручка ширины — на левой грани правой полосы, зеркало левой */
.rb-resizer {
  display: none; position: absolute; top: 0; left: -4px; width: 8px; height: 100%;
  cursor: col-resize; z-index: 30; touch-action: none;
}
.rb-rail.open .rb-resizer { display: block; }
.rb-resizer::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px;
  background: transparent; transition: background .12s;
}
.rb-resizer:hover::before,
body.sidebar-resizing .rb-resizer::before { background: #b9c2d0; }
body.sidebar-resizing .rb-rail { transition: none; }

/* В распахнутой полосе учётка читается как шапка меню аккаунта: имя, под ним
   почта, тариф — пилюлей справа. Дата продления уходит в подсказку, чтобы
   строка не разъезжалась на три уровня */
.lb-rail.open .lb-acc > .sidebar-user { align-items: center; gap: 10px; }
.lb-rail.open .lb-acc .user-body { display: contents; }
.lb-rail.open .lb-acc .user-name-row { flex: 1 1 auto; min-width: 0; }
.lb-rail.open .lb-acc .user-name {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lb-rail.open .lb-acc .user-plan-row { margin: 0 0 0 auto; }
.lb-rail.open .lb-acc .user-plan-note { display: none; }
.lb-rail.open .lb-acc .user-plan-chip {
  font-size: 10px; font-weight: 700; letter-spacing: 0;
  color: var(--purple); background: var(--purple-light);
  padding: 2px 8px; border-radius: 10px;
}
/* Шеврон в распахнутой полосе не нужен — место уходит имени и почте */
.lb-rail.open .lb-acc > .sidebar-user > svg { display: none; }
.lb-rail.open .lb-acc > .sidebar-user { gap: 8px; padding: 8px 2px; }

/* Аватар человека в списке переписок: тот же слот, что у значка сущности,
   поэтому строки стоят ровно — 20px в круг, инициалы белым */
.lb-chats .chat-ava {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: #eef1f6; color: var(--text-secondary);
  font-size: 8.5px; font-weight: 700; letter-spacing: .2px;
}
/* Строка под курсором и открытая переписка — кружок темнеет вместе с ней */
.lb-chats .tree-item:hover .chat-ava,
.lb-chats .tree-item.active .chat-ava { background: #e2e7f0; color: var(--text-primary); }
.lb-chats .tree-item > .tree-ico:has(> .chat-ava) { width: 20px; height: 20px; }