/* Каркас: три колонки, сворачивание правой, мобильный off-canvas */

#shell {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

#main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.chat-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  /* Направление A: шапка служебная и низкая - место отдано ленте */
  padding: var(--s2) var(--s4);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.chat-header h2 {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: var(--lh-meta);
}

.crumb-sep { color: var(--text-faint); font-weight: 400; }

.header-form { margin: 0; }

/* Кнопка сворачивания живёт у правого края: без auto-отступа форма
   "Отметить всё прочитанным" вставала бы в середину шапки (space-between
   распределяет свободное место между тремя элементами) */
.chat-header .header-form { margin-left: auto; }

/* Кнопка "Отметить всё прочитанным" в шапке канала: тихая, не акцентная.
   Специфичность (0,2,1) нужна по двум причинам: это button[type=submit]
   (правило 0,1,1 в forms.css), и forms.css подключён ПОСЛЕ layout.css,
   поэтому при равной специфичности победило бы правило submit. */
.header-form button.header-act {
  font-size: var(--fs-meta);
  color: var(--text-muted);
  padding: var(--s1) var(--s2);
  border: 1px solid transparent;
  background: none;
  border-radius: var(--radius-control);
  font-weight: 400;
  cursor: pointer;
}

.header-form button.header-act:hover {
  background: var(--surface-hover);
  color: var(--text);
}

/* Кнопка сворачивания правой колонки: остаётся на месте в обоих состояниях */
.collapse-users {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--bg);
  color: var(--text-muted);
  cursor: pointer;
}

.collapse-users:hover {
  background: var(--surface-hover);
  color: var(--text);
}

/* Правый сайдбар свёрнут: лента забирает освободившееся место */
#shell.users-collapsed #users { display: none; }

/* Мобильная версия: оба сайдбара в off-canvas */
#menu-btn {
  display: none;
  position: fixed;
  top: var(--s2);
  left: var(--s2);
  z-index: 40;
  flex-direction: column;
  gap: var(--s1);
  padding: var(--s2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  cursor: pointer;
}

#menu-btn span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--text);
}

/* Средняя ширина: три колонки не помещаются.

   Замер на 901x700: 240px сайдбар + 200px люди + 147px агенты оставляли
   ленте 314px, а с резервом 120px под действия тексту доставалось 178px.
   Правая колонка уходит раньше мобильного режима: её содержимое есть в
   левом сайдбаре, а лента важнее. Сайдбар и шапка остаются десктопными. */
@media (max-width: 1080px) {
  #users,
  #agents { display: none; }
  .collapse-users { display: none; }
}

/* Узкий экран: одна колонка.

   Что было не так (замеры на 390x844, до правки):
   - прятался только #users, а #agents оставался колонкой 147px, и ленте
     оставалось 243px из 390;
   - шапка канала занимала 115px и три строки: заголовок переносился, рядом
     стояли две текстовые кнопки;
   - гамбургер был position: fixed поверх всего и в открытом ящике ложился
     на название организации, а шапку лечил padding-left: 56px.

   Теперь: правая колонка уходит целиком (люди и агенты есть в ящике),
   шапка в две строки с заголовком в одну строку, ящик с затемнением и
   собственной кнопкой закрытия. */
@media (max-width: 900px) {
  /* Правая колонка целиком: её содержимое дублирует разделы ящика */
  #users,
  #agents { display: none; }

  /* Гамбургер остаётся фиксированным (шапка прокручивается вместе с
     лентой), но уходит ПОД затемнение: раньше он висел поверх ящика и
     перекрывал название организации. Закрытие - затемнение и кнопка в
     ящике. Размер 40px - тач-цель */
  #menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    width: 40px;
    height: 40px;
    padding: 0;
    background: var(--bg);
  }

  /* Шапка: две строки, но обе начинаются ПОСЛЕ кнопки меню. Раньше отступ
     был только у заголовка, и вторая строка ("Отметить всё прочитанным")
     заезжала под гамбургер: замер показывал кнопку 40px на x=8 и текст на
     x=12, то есть кнопка накрывала первые три буквы */
  .chat-header {
    flex-wrap: wrap;
    row-gap: var(--s1);
    padding: var(--s2) var(--s3) var(--s2) 56px;
    min-height: 48px;
  }

  .chat-header h2 {
    flex: 1 0 100%;
    /* Одна строка: перенос "канал > тема" на три строки съедал 68px */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  /* Действия шапки в одну строку и слева: свободное место справа не
     разъезжается на два края, как при space-between */
  .chat-header .header-form { margin-left: 0; }

  /* Действия шапки: та же тихая кнопка, но мельче и плотнее - на телефоне
     они второстепенны и не должны спорить с названием канала */
  .header-form button.header-act {
    padding: var(--s1) 0;
    font-size: var(--fs-label);
  }

  .chat-header .header-form + .header-form { margin-left: var(--s3); }

  /* Ящик: 86% ширины, но не шире 320px. На 390px это 335 -> 320, и лента
     остаётся видна справа - видно, что ящик можно закрыть */
  #sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 30;
    /* Ширина задаётся в sidebar.css рядом с остальными правилами ящика:
       здесь она проигрывала базовому #sidebar по порядку подключения */
    transform: translateX(-100%);
    transition: transform 0.15s ease;
  }

  body.sidebar-open #sidebar { transform: translateX(0); }

  /* Затемнение: перекрывает ленту и кнопку меню, тап по нему закрывает
     (обработчик клика вне #sidebar уже есть в ui.js). Псевдоэлемент на
     body, а не отдельный div: разметку не трогаем, слой живёт вместе с
     классом состояния */
  body.sidebar-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 25;
    background: var(--scrim);
  }

  /* Фон под ящиком не должен прокручиваться: иначе лента уезжает под
     пальцем, пока открыто меню */
  body.sidebar-open { overflow: hidden; }

  .collapse-users { display: none; }
}