/* Левый сайдбар (каналы, личка, люди) и правая колонка присутствия */

#sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  /* Направление A: рельс каналов стоит на подложке, лента - на белом.
     Зоны каркаса читаются границами, а не отступами */
  background: var(--rail-bg);
  border-right: 1px solid var(--border);
  padding: 0 0 var(--s3);
}

.sb-org {
  padding: var(--s4) var(--s3) var(--s3);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--s2);
}

.sb-org-name {
  font-weight: 600;
  font-size: var(--fs-body);
  color: var(--text);
}

.sb-section {
  padding: var(--s3) var(--s3) var(--s1);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Заголовок раздела со счётчиком каналов: число прижато вправо, как в
   Zulip, и набрано тем же кеглем, чтобы не спорить с названием */
.sb-section-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2);
}

.sb-section-count {
  font-variant-numeric: tabular-nums;
  color: var(--text-faint);
  letter-spacing: 0;
}

#sidebar ul { list-style: none; margin: 0; padding: 0; }

#sidebar li a {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s1) var(--s3);
  color: var(--text);
  border-radius: var(--radius-control);
  margin: 0 var(--s2);
}

#sidebar li a:hover {
  background: var(--rail-active);
  text-decoration: none;
}

/* Активный канал: подсветка фоном, без жирного начертания */
/* Активный канал (направление A): подложка рельса плюс акцентная полоса
   слева. Заливка акцентом читалась как «выбранная ссылка», а полоса
   показывает место в списке, не перекрашивая всю строку */
#sidebar li a.is-active {
  background: var(--rail-active);
  color: var(--text);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--accent);
}

/* Решётка канала: значок канала, а не часть подписи. Цвет выбирается по
   имени (app/channels/colors.py), поэтому один канал всегда одного цвета.
   Ширина фиксирована: имена начинаются на одной вертикали */
.ch-hash {
  flex-shrink: 0;
  width: 14px;
  text-align: center;
  font-weight: 700;
  font-size: var(--fs-body);
  line-height: 1;
}

.ch-c0 { color: var(--ch-0); }
.ch-c1 { color: var(--ch-1); }
.ch-c2 { color: var(--ch-2); }
.ch-c3 { color: var(--ch-3); }
.ch-c4 { color: var(--ch-4); }
.ch-c5 { color: var(--ch-5); }

.sb-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Дерево тем: вертикальная линия слева, как в Zulip. Линия начинается под
   значком канала и обрывается на уровне середины последней строки, чтобы
   не тянуться в пустоту под списком. Отступ считается от края сайдбара:
   значок канала стоит на 12 + 8 = 20px, его центр - 20 + 7 = 27px */
.sb-topics {
  position: relative;
  margin: var(--s1) 0 var(--s1);
}

.sb-topics::before {
  content: "";
  position: absolute;
  left: 27px;
  top: 0;
  bottom: calc(var(--s4) + 4px);
  width: 1px;
  /* Цвет заметнее, чем --border: линия проходит по --surface, и на этом
     фоне --border-strong сливалась с соседними строками */
  background: var(--text-faint);
  opacity: 0.55;
}

/* Тема: тише канала. Отступ слева выравнивает имена тем по именам каналов
   (значок 14px + зазор), линия при этом остаётся видна в зазоре */
#sidebar .sb-topics a {
  padding: var(--s1) var(--s2) var(--s1) var(--s2);
  margin: 0 var(--s2) 0 calc(var(--s4) + var(--s3));
  font-size: var(--fs-meta);
  color: var(--text-muted);
}

#sidebar .sb-topics a:hover {
  background: var(--rail-active);
  color: var(--text);
}

/* Активная тема: белая подложка на подложке рельса - единственный
   элемент дерева, который «поднят» над строкой канала (направление A).
   Рамка вместо одной тени: на тёплой подложке белый прямоугольник без
   границы выглядел бледным пятном, и открытая тема терялась */
#sidebar .sb-topics a.is-active {
  background: var(--bg);
  color: var(--text);
  font-weight: 600;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-panel);
}

/* Ссылка "показать все темы": служебная строка, не тема. Прописными и
   без маркера непрочитанного, чтобы не читалась как ещё одна тема */
#sidebar .sb-more {
  margin-left: calc(var(--s4) + var(--s3));
  padding-left: var(--s2);
  font-size: var(--fs-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}

#sidebar .sb-more:hover { background: none; text-decoration: underline; }

/* Метка упоминаний: тише бейджа непрочитанного, но на виду */
.sb-at {
  flex-shrink: 0;
  font-size: var(--fs-meta);
  color: var(--text-muted);
  font-weight: 600;
}

/* Бейдж непрочитанного (направление A): плашка-счётчик. Голая цифра
   сливалась с именем канала при беглом взгляде, а плашка читается как
   счётчик и не требует поиска глазами */
.badge {
  flex-shrink: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--accent);
  color: var(--bg);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  font-variant-numeric: tabular-nums;
  font-weight: 650;
}

/* Тихое непрочитанное (без упоминаний): плашка нейтральная, чтобы
   акцентный цвет оставался за упоминаниями */
.badge.is-quiet {
  background: var(--border-strong);
  color: var(--text);
}

/* Отдельная метка для админки: "временный пароль" - это предупреждение,
   а не счётчик, и общий бейдж для него больше не подходит */
.note-warn {
  display: inline-block;
  padding: var(--s1) var(--s2);
  border-radius: var(--radius-control);
  background: var(--accent-soft);
  color: var(--danger);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  font-weight: 600;
}

.sb-mentions { padding: var(--s2) var(--s3); }
.sb-mentions a { color: var(--text-muted); font-size: var(--fs-meta); }

.sb-bottom {
  margin-top: auto;
  padding: var(--s2) var(--s3) 0;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--s0);
}

.sb-bottom a,
.sb-bottom .linklike {
  color: var(--text-muted);
  padding: var(--s1) 0;
  text-align: left;
  /* Кнопка Выход - type=submit: сбрасываем общий синий стиль submit */
  background: none;
  border: 0;
  width: 100%;
  font-size: var(--fs-meta);
  cursor: pointer;
}

.sb-bottom a:hover,
.sb-bottom .linklike:hover {
  color: var(--text);
  text-decoration: none;
}

.sb-bottom form { margin: 0; }

.linklike {
  background: none;
  border: 0;
  font: inherit;
  cursor: pointer;
}

/* Поиск в сайдбаре: без рамки, подсветка при фокусе */
.sb-search { padding: var(--s2) var(--s2) var(--s1); }

.sb-search input {
  width: 100%;
  padding: var(--s1) var(--s2);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--bg);
  color: var(--text);
  font-size: var(--fs-meta);
}

.sb-search input::placeholder { color: var(--text-faint); }

/* Правая колонка присутствия: без фона и рамки, только отступ */
#users {
  width: var(--users-w);
  flex-shrink: 0;
  overflow-y: auto;
  padding: var(--s3) 0;
  /* Колонка людей - та же подложка, что у рельса: они парные */
  background: var(--rail-bg);
  border-left: 1px solid var(--border);
}

/* Заголовки обоих разделов одинаковы: раздел агентов - такая же группа,
   а не отдельный вид блока. Без #agents h3 заголовок оставался браузерным
   h3 (18.7px, без капса, с полями), и колонка выглядела рассинхронизированной */
#users h3,
#agents h3 {
  margin: 0;
  padding: 0 var(--s3) var(--s2);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

#users ul,
#agents ul { list-style: none; margin: 0; padding: 0; }

/* Строка человека: отступы переехали с li на кнопку/спан - содержимое
   обёрнуто в форму начала лички, и паддинг на li оставил бы «мёртвую»
   зону вне клика */
#users li,
#agents li { padding: 0; }

/* Строка-кнопка. Селектор с id обязателен: forms.css грузится ПОСЛЕ
   sidebar.css и содержит button[type="submit"] (специфичность 0,1,1),
   который перебивал этот сброс. Строки людей и агентов заливались
   акцентным синим, а подпись состояния сливалась с фоном */
#users .user-row,
#agents .user-row {
  display: flex;
  align-items: center;
  gap: var(--s2);
  width: 100%;
  padding: var(--s0) var(--s3);
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

#users li:hover,
#agents li:hover { background: var(--surface-hover); }

.user-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-meta);
}

.user.is-self .user-name { font-weight: 600; }

/* Список личек в левом сайдбаре: имя занимает остаток строки */
#sidebar .sb-dm .sb-name { flex: 1; }

/* Люди в левом сайдбаре: строка - кнопка начала лички (как в правой
   колонке), отступы на кнопке */
#sidebar li.sb-person {
  margin: 0 var(--s2);
  font-size: var(--fs-meta);
  color: var(--text-muted);
}

#sidebar li.sb-person:hover { background: var(--surface-hover); }

/* То же, что у #users .user-row: id в селекторе нужен, чтобы перебить
   button[type="submit"] из forms.css */
#sidebar .sb-person-btn {
  display: flex;
  align-items: center;
  gap: var(--s2);
  width: 100%;
  padding: var(--s1) var(--s3);
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

#sidebar .sb-person-btn .sb-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Стили вкладок админки переехали в admin.css: это не часть сайдбара, и
   держать их здесь значило искать оформление админки в двух файлах */

/* Кнопка закрытия ящика на десктопе не нужна: ящика там нет. Правило
   стоит ПЕРЕД медиазапросом: при обратном порядке display: none
   перебивал бы показ кнопки на узком экране (одинаковая специфичность) */
.sb-close { display: none; }

/* Узкий экран: ящик получает собственную кнопку закрытия.

   Раньше единственным способом закрыть меню был тап мимо него, а кнопка-
   гамбургер оказывалась под затемнением и в ящике перекрывала название
   организации. Теперь в шапке ящика стоит явный "Закрыть" - он же
   первая тач-цель для пальца и первый элемент в tab-порядке ящика. */
@media (max-width: 900px) {
  /* Ширина с id: базовое правило #sidebar задаёт --sidebar-w (240px) с той
     же специфичностью, и медиазапрос без id проигрывал ему по порядку */
  #sidebar {
    padding-top: 0;
    width: min(86vw, 320px);
  }

  .sb-org {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s2);
    padding: var(--s3);
    /* Липкая шапка: при прокрутке длинного списка каналов кнопка закрытия
       остаётся под рукой */
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--surface);
  }

  .sb-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    background: var(--bg);
    color: var(--text-muted);
    font-size: var(--fs-meta);
    cursor: pointer;
  }

  .sb-close:hover { background: var(--surface-hover); color: var(--text); }

  /* Строки списков: тач-цель не меньше 36px. На десктопе плотность важнее,
     на телефоне - попадание пальцем */
  #sidebar li a,
  #sidebar .sb-person-btn { min-height: 36px; }

  /* Агенты и люди в ящике идут обычными строками: правая колонка скрыта,
     и это единственное место, где они видны */
  .sb-section { padding-top: var(--s4); }
}

/* Правая колонка: один список людей и агентов, как USERS в Zulip.

   Раньше блоков было два (#users и #agents) с разными заголовками, и они
   же дублировались в левом сайдбаре. Теперь один список, а роль строки
   видна по точке и подписи справа. */
.user-flag {
  flex-shrink: 0;
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  color: var(--text-faint);
  white-space: nowrap;
}

/* Агент в общем списке: имя не жирнее людей, но строка отделена от них
   воздухом сверху - агенты идут по алфавиту, и без разделителя граница
   между "люди" и "боты" терялась */
#users li.is-agent .user-name { color: var(--text-muted); }