/* Десктопная раскладка: категории — вертикальным сайдбаром слева, весь
 * остальной контент — справа. Полностью аддитивный файл: ничего не меняет
 * в существующих .tsx/.css, только переопределяет расположение через
 * position:fixed + :has(), находя нужные блоки по их УЖЕ существующим
 * Tailwind-классам (без завязки на порядок детей — Hero и т.п. рендерятся
 * условно, порядок nth-child не был бы надёжным).
 *
 * Категории (CategoryBar.tsx и его скелетон) — единственные во всём проекте
 * элементы с сочетанием классов "no-scrollbar flex gap-2 overflow-x-auto py-3"
 * (см. StickerPackRow/Collections — там gap-4 и pb-2, а не gap-2/py-3),
 * поэтому селектор ниже безопасно ловит именно их и ничего больше.
 *
 * data-tg-platform="desktop"|"mobile" — считает platform.js (см. там же,
 * почему не завязано на конкретные строки WebApp.platform напрямую).
 *
 * ПОЧЕМУ position:fixed, а не CSS Grid: первая версия сажала сайдбар в
 * grid-column:1 рядом с шапкой в grid-column:2 — обе делят ПЕРВУЮ строку
 * грида, и раз сайдбар (13 пилюль) на порядок выше шапки, вся первая строка
 * раздувалась под его высоту и утаскивала весь остальной контент вниз на
 * сотни пикселей (см. историю бага). Единственный надёжный способ —
 * полностью вынуть сайдбар из потока/грида (position:fixed относительно
 * вьюпорта), а остальному контенту просто зарезервировать место слева
 * через padding-left.
 *
 * Порог ширины — 480px: сама платформа уже сигнал "это десктоп", ширина
 * только чтобы не сломать совсем крошечное окно.
 */

@media (min-width: 480px) {
  html[data-tg-platform="desktop"] #root > div.min-h-full:has(> div.no-scrollbar.flex.gap-2.overflow-x-auto.py-3) {
    padding-left: 236px;
    box-sizing: border-box;
  }

  html[data-tg-platform="desktop"] #root > div.min-h-full > div.no-scrollbar.flex.gap-2.overflow-x-auto.py-3 {
    position: fixed;
    top: 1rem;
    left: 1rem;
    width: 204px;
    max-height: calc(100vh - 2rem);
    overflow-x: hidden;
    overflow-y: auto;
    flex-direction: column;
    z-index: 10;
  }

  /* пилюли категорий — на всю ширину сайдбара, текст слева, а не по центру */
  html[data-tg-platform="desktop"] #root > div.min-h-full > div.no-scrollbar.flex.gap-2.overflow-x-auto.py-3 > button {
    width: 100%;
    justify-content: flex-start;
  }
}