/* Оболочка: шапка 52, левое меню 70 → 220 по наведению, область содержимого. */

/* ============ Шапка ============ */
.cl-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  display: flex;
  align-items: flex-start;
  height: var(--header-height);
  border-bottom: 1px solid var(--border-primary-default);
  background: var(--background-primary-default);
}

/* Плитка логотипа: 70×52 и линия справа; высота во всю шапку, включая её нижнюю линию */
.cl-header__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: calc(var(--nav-width) + 1px);
  height: var(--header-height);
  border-right: 1px solid var(--border-primary-default);
  background: var(--brand-500);
  color: var(--text-white);
  cursor: pointer;
  transition: background-color var(--duration-button);
}
.cl-header__logo:hover { background: var(--brand-480); }
.cl-logo {
  font-size: 15px;
  font-weight: var(--font-weight-semibold);
  line-height: 17px;
  letter-spacing: -.01em;
  white-space: nowrap;
  user-select: none;
}
.cl-logo--color { font-size: 25px; line-height: 26px; color: var(--brand-500); }

.cl-header__title {
  flex: 0 1 auto;
  min-width: 0;
  margin-left: 21px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--font-size-title);
  font-weight: var(--font-weight-medium);
  line-height: var(--header-height);
  color: var(--text-primary);
}

/* Полоса «нет связи с сервером» — между заголовком и блоком проекта */
.cl-header__offline {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 1 auto;
  min-width: 0;
  height: 32px;
  margin: 9px 0 0 24px;
  padding: 0 12px;
  border-radius: var(--radius-6);
  background: var(--danger-background);
  font-size: 13px;
  line-height: 18px;
  color: var(--danger-text);
}
.cl-header__offline[hidden] { display: none; }
.cl-header__offline > .cl-icon { flex: none; }
.cl-header__offline > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cl-header__right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  height: calc(var(--header-height) - 1px);
  margin-left: auto;
  padding: 0 20px;
}

/* Блок текущего проекта: название и шеврон, по щелчку — меню */
.cl-header__project {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 360px;
  height: calc(var(--header-height) - 1px);
  padding: 0 15px;
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  line-height: 19px;
  color: var(--text-primary);
  cursor: pointer;
  transition: background-color var(--duration-menu-item) ease-in;
}
.cl-header__project:hover, .cl-header__project.is-open { background: var(--grey-50); }
.cl-header__project-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-header__project .cl-icon { color: var(--icon-primary-default); transition: transform var(--duration-nav); }
.cl-header__project.is-open .cl-icon { transform: rotate(180deg); }

/* Блок вошедшего: значок, имя и шеврон, по щелчку — меню («Доступ», «Выйти») */
.cl-header__user {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 300px;
  height: calc(var(--header-height) - 1px);
  padding: 0 12px;
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  line-height: 19px;
  color: var(--text-primary);
  cursor: pointer;
  transition: background-color var(--duration-menu-item) ease-in;
}
.cl-header__user:hover, .cl-header__user.is-open { background: var(--grey-50); }
.cl-header__user-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-header__user .cl-icon { color: var(--icon-primary-default); transition: transform var(--duration-nav); }
.cl-header__user.is-open .cl-icon:last-child { transform: rotate(180deg); }
/* Вход с сервера: вместо имени — пометка приглушённым цветом */
.cl-header__user.is-local .cl-header__user-name { color: var(--text-caption); }
/* Первая строка меню — кто вошёл: имя пишется как есть, не прописными */
.cl-menu--user .cl-menu__title {
  padding: 8px 16px 6px 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
}

/* Меню блока проекта (вид меню пользователя образца) */
.cl-menu--user { width: 253px; padding: 4px 0; border: 0; }
.cl-menu--user .cl-menu__item {
  gap: 12px;
  height: 36px;
  min-height: 36px;
  padding: 6px 16px 6px 12px;
  line-height: 18px;
  color: var(--text-secondary);
}
.cl-menu--user .cl-menu__item:hover,
.cl-menu--user .cl-menu__item:focus { background: linear-gradient(90deg, var(--brand-alpha-06), transparent); }

/* ============ Левое меню ============ */
.cl-nav {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: var(--z-nav);
  display: none;
  flex-direction: column;
  width: var(--nav-width);
  overflow: hidden;
  background: var(--background-primary-default);
  box-shadow: var(--shadow-nav-line);
  /* слой опускается под шапку только после того, как меню свернулось */
  transition: width var(--duration-nav), box-shadow var(--duration-nav), z-index 0s var(--duration-nav);
}
body.has-nav .cl-nav { display: flex; }
.cl-nav:hover, .cl-nav:has(a:focus-visible) {
  width: var(--nav-width-open);
  z-index: var(--z-nav-open);
  box-shadow: var(--shadow-nav-open);
  transition: width var(--duration-nav), box-shadow var(--duration-nav), z-index 0s;
}

/* Белая плашка с цветным знаком поверх зоны шапки — видна только у развёрнутого меню */
.cl-nav__logo {
  display: flex;
  align-items: center;
  flex: none;
  width: var(--nav-width-open);
  height: var(--header-height);
  padding-left: 20px;
  border-bottom: 1px solid var(--border-primary-default);
  opacity: 0;
  transition: opacity var(--duration-nav-label);
}
.cl-nav:hover .cl-nav__logo, .cl-nav:has(a:focus-visible) .cl-nav__logo { opacity: 1; }

.cl-nav__list {
  flex: 1 1 auto;
  min-height: 0;
  padding-bottom: 16px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
}
.cl-nav__list::-webkit-scrollbar { width: 0; height: 0; }
.cl-nav:hover .cl-nav__list { scrollbar-width: thin; }
.cl-nav:hover .cl-nav__list::-webkit-scrollbar { width: 6px; }
.cl-nav:hover .cl-nav__list::-webkit-scrollbar-track { margin: 0; }
.cl-nav:hover .cl-nav__list::-webkit-scrollbar-thumb { background: var(--grey-300); border: 0; border-radius: 3px; }

.cl-nav__item {
  position: relative;
  display: block;
  width: 100%;
  height: 40px;
  color: var(--text-secondary);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--duration-menu-item) ease-in;
}
/* Обводки фокуса у пунктов нет; чтобы с клавиатуры было видно, где фокус, пункт подсвечивается как при наведении */
.cl-nav__item:hover, .cl-nav__item:focus-visible { background-color: var(--background-primary-hover); }
.cl-nav__icon {
  position: absolute;
  top: 8px;
  left: 23px;
  display: flex;
  width: 24px;
  height: 24px;
  color: var(--menu-items-icon-default);
}
/* Ширина подписи постоянная (как у развёрнутого меню): пока колонка раскрывается, текст не «прыгает» */
.cl-nav__label {
  display: block;
  width: var(--nav-width-open);
  padding: 0 12px 0 67px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  line-height: 40px;
  opacity: 0;
  transition: opacity var(--duration-nav-label);
}
.cl-nav:hover .cl-nav__label, .cl-nav:has(a:focus-visible) .cl-nav__label { opacity: 1; }

/* Активный пункт: фирменный текст и иконка, градиент и «капля» у левого края */
.cl-nav__item.is-active { color: var(--menu-items-text-active); background-image: linear-gradient(90deg, var(--brand-alpha-06), transparent); }
.cl-nav__item.is-active .cl-nav__icon { color: var(--menu-items-text-active); }
.cl-nav__item.is-active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 36px;
  border-radius: 0 20px 20px 0;
  background: var(--brand-500);
}

/* Счётчик ждущих диалогов: свёрнуто — в углу пункта, развёрнуто — справа по центру */
.cl-nav__badge {
  position: absolute;
  top: 4px;
  right: 8px;
  min-width: 16px;
  height: 16px;
  padding: 2px 5px;
  border-radius: 50px;
  background: var(--brand-500);
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  line-height: 12px;
  text-align: center;
  color: var(--text-white);
  font-variant-numeric: tabular-nums;
  transition: top var(--duration-nav), right var(--duration-nav);
}
.cl-nav:hover .cl-nav__badge, .cl-nav:has(a:focus-visible) .cl-nav__badge { top: 12px; right: 12px; }

/* Заголовок группы: развёрнуто — текст, свёрнуто — короткая линия */
.cl-nav__group {
  position: relative;
  height: 34px;
  padding: 9px 0 9px 24px;
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  line-height: 16px;
  text-transform: uppercase;
  color: var(--text-secondary);
  white-space: nowrap;
}
.cl-nav__group-label { opacity: 0; transition: opacity var(--duration-nav-label); }
.cl-nav__group::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 20px;
  width: 30px;
  height: 1px;
  background: var(--border-primary-default);
  transition: opacity var(--duration-nav-label);
}
.cl-nav:hover .cl-nav__group-label, .cl-nav:has(a:focus-visible) .cl-nav__group-label { opacity: 1; }
.cl-nav:hover .cl-nav__group::before, .cl-nav:has(a:focus-visible) .cl-nav__group::before { opacity: 0; }

/* ============ Область содержимого ============ */
.cl-view {
  position: relative;
  height: calc(100vh - var(--header-height));
  margin-top: var(--header-height);
  overflow: hidden;
  /* свои слои страницы не должны перекрывать шапку и меню */
  isolation: isolate;
}
body.has-nav .cl-view { margin-left: var(--nav-width); }

/* Корень страницы раздела: своих полей и фона нет */
.cl-page { position: relative; width: 100%; height: 100%; min-width: 0; }

/* Страница, которая прокручивается целиком (Каналы, список проектов) */
.cl-page-scroll { width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; }
.cl-page-scroll::-webkit-scrollbar { width: 8px; }
.cl-page-scroll::-webkit-scrollbar-track { margin: 0; }
.cl-page-scroll::-webkit-scrollbar-thumb { border: 0; border-radius: var(--radius-10); }

/* Экран загрузки раздела: белая заливка поверх области содержимого */
.cl-view__loader {
  position: absolute;
  inset: 0;
  z-index: var(--z-page-loader);
  background: var(--background-primary-default);
  opacity: 1;
  transition: opacity var(--duration-page-loader) ease-in-out;
}
.cl-view__loader.is-hidden { opacity: 0; pointer-events: none; }

/* Кнопки экрана «Не удалось открыть раздел» */
.cl-view__problem-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* ============ Вход и узкий экран ============ */
/* Страница входа: шапки и меню нет, область содержимого — во весь экран */
body.is-login .cl-header, body.is-login .cl-nav { display: none; }
body.is-login .cl-view { height: 100vh; height: 100dvh; margin: 0; }
/* Сеанс закрылся посреди работы: вход ложится поверх страницы во весь экран, а она остаётся на своём месте и в своих
   размерах — невидимая и неотвечающая (атрибут inert), — чтобы набранное не пропало, если войдёт тот же человек */
body.is-relogin .cl-header, body.is-relogin .cl-nav, .cl-page.is-kept { visibility: hidden; }
body.is-relogin > .cl-login { position: fixed; inset: 0; z-index: calc(var(--z-toast) - 1); height: auto; }

/* Страницы, пригодные для телефона (вход, «Доступ», список проектов): наименьшая ширина окна 1280 px снята */
body.is-fluid { min-width: 0; }
body.is-fluid:not(.is-login) .cl-view { height: calc(100dvh - var(--header-height)); }

@media (max-width: 720px) {
  .cl-header__title { margin-left: 14px; }
  .cl-header__right { gap: 0; padding: 0 4px; }
  .cl-header__project { gap: 6px; max-width: 150px; padding: 0 8px; }
  /* имя не помещается — остаётся значок; кто вошёл, написано первой строкой меню */
  .cl-header__user { gap: 2px; padding: 0 10px; }
  .cl-header__user-name { display: none; }
}