/* Адаптив кабинета. Файл РУЧНОЙ - в отличие от portal.css, который
 * генерируется из бандла и перезаписывается конвертером.
 *
 * Эталон отрисован под десктоп: раскладки заданы инлайновыми стилями с
 * фиксированными колонками, и на узком экране список диалогов вытесняет чат.
 * Классов в разметке нет, поэтому цепляемся за подстроку инлайнового стиля -
 * приём не изящный, но он не требует править сгенерированный файл и переживает
 * его перегенерацию.
 *
 * Порог 860px: ниже него две колонки карточек уже не помещаются по ширине
 * эталонных отступов.
 */

@media (max-width: 860px) {
  /* Карточки агентов, баланса, тикетов, профиля - в одну колонку. */
  [style*="grid-template-columns:minmax(0,1fr) minmax(0,1fr)"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns:360px 1fr"],
  [style*="grid-template-columns:1fr 1.4fr"],
  [style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* Чат: список диалогов уезжает наверх, чату остаётся вся ширина.
   * :has() выбирает именно контейнер чата, не трогая остальные экраны. */
  div:has(> aside) {
    flex-direction: column !important;
  }
  aside {
    width: 100% !important;
    max-height: 34vh;
    border-right: 0 !important;
    border-bottom: 1px solid var(--line);
  }

  /* Таблица сотрудников не схлопывается в колонку - она перестала бы читаться.
   * Вместо этого держит минимальную ширину и прокручивается по горизонтали. */
  [style*="grid-template-columns:1.9fr 1.1fr .95fr .8fr 150px"] {
    min-width: 720px;
  }
  main {
    overflow-x: auto;
  }

  /* Эталонные отступы разделов рассчитаны на широкий экран. */
  [style*="padding:34px 40px 60px"] {
    padding: 22px 16px 40px !important;
  }
  [style*="padding:30px 40px 60px"] {
    padding: 22px 16px 40px !important;
  }
}

/* Анимации входа из бандла проигрываются только по делу.
 *
 * `render()` заменяет #root целиком, поэтому инлайновые animation:viewin (весь
 * раздел) и animation:msgin (пузырь вопроса) стартуют заново на КАЖДОЙ
 * перерисовке: на дельте потока, на смене стадии, на переключении диалога, на
 * любом ответе сервера. Замеры на живом стенде: 25 перезапусков viewin за один
 * поточный ответ и 5 viewin + 13 msgin за пять переключений диалога - раздел
 * гас и проявлялся каждый раз.
 *
 * Разрешение выдаётся кадру, а не элементу: класс на body ставит render()
 * (app/static/portal.js) - `anim-view` при смене раздела, `anim-msg` на кадре
 * с новым сообщением. Кадр без разрешения анимаций входа не проигрывает. */
body:not(.anim-view) [style*="animation:viewin"] {
  animation: none !important;
}
body:not(.anim-msg) [style*="animation:msgin"] {
  animation: none !important;
}