/* Полоса прокрутки, которую рисует оболочка (site-shell.js).
   Отдельным файлом, потому что нужна и отчётам SurgayGPT, и своим
   страницам раздела: своя страница не подключает report-overrides,
   он рассчитан на разметку генератора. Без этих стилей полоса
   создавалась, но выглядела обычным блоком в конце документа. */

/* ------------------------------------------------------------------ */
/* 9. Полоса прокрутки внутри отчёта                                   */
/* ------------------------------------------------------------------ */
/* Жалоба Дмитрия 11.08.2026: не работает перетаскивание ползунка.
   Колесо и клавиши работали, ползунок нет. Причина: содержимое лежит
   в Radix ScrollArea, а этот компонент ПРЯЧЕТ нативную полосу
   (`scrollbar-width: none` плюс `::-webkit-scrollbar {display:none}`
   инлайном в самой странице) и рисует свою силами JavaScript. React-бандл
   вырезан, поэтому своя полоса не создавалась: проверено, элементов
   data-radix-scroll-area-scrollbar и -thumb нет НИ ОДНОГО во всех восьми
   разделах. Тянуть было физически нечего.

   Полосу рисует site-shell.js, он же обрабатывает перетаскивание и клик
   по дорожке. Нативную при этом возвращаем видимой: если скрипт по любой
   причине не отработает, читатель останется с нативной полосой, а не
   без полосы вовсе. Как только своя построена, скрипт ставит на страницу
   класс shell-has-scrollbar, и нативная снова прячется, чтобы полос не
   стало две. Инлайновые стили страницы идут в каскаде позже нашего файла,
   поэтому !important обязателен. */

[data-radix-scroll-area-viewport] {
  scrollbar-width: auto !important;
  -ms-overflow-style: auto !important;
}

[data-radix-scroll-area-viewport]::-webkit-scrollbar {
  display: block !important;
  width: 14px;
}

[data-radix-scroll-area-viewport]::-webkit-scrollbar-thumb {
  border: 4px solid transparent;
  border-radius: 8px;
  background: hsl(215 16% 62%);
  background-clip: content-box;
}

/* Как только своя полоса построена, нативные прячем ВСЕ, иначе их станет
   две. В «Концепте первого экрана» и в КП прокручивается сам документ
   отчёта, а не контейнер Radix, и там рядом с нашей оставалась вторая,
   родная полоса документа. */
html.shell-has-scrollbar,
html.shell-has-scrollbar body,
html.shell-has-scrollbar [data-radix-scroll-area-viewport] {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

html.shell-has-scrollbar::-webkit-scrollbar,
html.shell-has-scrollbar body::-webkit-scrollbar,
html.shell-has-scrollbar [data-radix-scroll-area-viewport]::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
}

.shell-scrollbar {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 2147483000;
  width: 14px;
  height: 100%;
  background: transparent;
  cursor: default;
}

.shell-scrollbar-thumb {
  width: 8px;
  margin: 0 3px;
  border-radius: 8px;
  background: hsl(215 16% 62%);
  cursor: grab;
  transition: background-color .15s ease, width .12s ease;
}

.shell-scrollbar:hover .shell-scrollbar-thumb,
.shell-scrollbar[data-dragging] .shell-scrollbar-thumb {
  width: 10px;
  margin: 0 2px;
  background: hsl(215 22% 46%);
}

.shell-scrollbar[data-dragging] .shell-scrollbar-thumb {
  cursor: grabbing;
}

html.dark .shell-scrollbar-thumb {
  background: hsl(215 14% 42%);
}

html.dark .shell-scrollbar:hover .shell-scrollbar-thumb,
html.dark .shell-scrollbar[data-dragging] .shell-scrollbar-thumb {
  background: hsl(215 16% 60%);
}

/* На телефоне полосу не рисуем: там прокрутка пальцем, а лишние 14px
   съедают ширину и мешают попадать по краю карточек. */
@media (max-width: 900px) {
  .shell-scrollbar { display: none !important }
}