/* ────────────────────────────────────────────────────────────────────
   CustomScroll — fixed-оверлей, прижат вправо, без фонового трека
   Стрелки → два маленьких кругляша цвета «пилюли»
   ──────────────────────────────────────────────────────────────────── */

:root{
  /* Геометрия */
  --cs-width: 8px;                 /* толщина столбика/пилюли */
  --cs-radius: 9999px;
  --cs-edge-gap: 2px;              /* зазор от правого края (учитывает JS) */

  /* Кружочки вместо стрелок */
  --cs-dot-size: 8px;              /* диаметр круглых меток сверху/снизу */

  /* Цвета (Light) */
  --cs-thumb:       rgba(148,163,184,.72);  /* slate-400/72 */
  --cs-thumb-hover: rgba(59,130,246,.87);   /* blue-500/87 */

  /* Прозрачность точек как % от цвета пилюли */
  --cs-dot-alpha: 60%;
  --cs-dot-color:        color-mix(in srgb, var(--cs-thumb)       var(--cs-dot-alpha), transparent);
  --cs-dot-color-hover:  color-mix(in srgb, var(--cs-thumb-hover) var(--cs-dot-alpha), transparent);

  /* мягкий кант для контраста на пёстрых фонах (опц.) */
  --cs-thumb-shadow: 0 0 0 1px rgba(15,23,42,.08) inset;
}

html.dark{
  --cs-thumb:       rgba(148,163,184,.65);
  --cs-thumb-hover: rgba(191,219,254,.95);  /* light-blue-200/95 */
  --cs-thumb-shadow: 0 0 0 1px rgba(255,255,255,.10) inset;
}

/* Контейнер, который реально скроллится */
.cs-container,
.custom-scroll{
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  min-height: 0;

  /* drag без инерции */
  scroll-behavior: auto !important;

  /* скрываем нативный скролл */
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* Edge/IE старый */
}
.cs-container::-webkit-scrollbar,
.custom-scroll::-webkit-scrollbar{
  width: 0;
  height: 0;
}

/* FIXED-бар: якорится к viewport; координаты задаёт JS (left/top/height) */
.cs-scrollbar{
  position: fixed;
  width: var(--cs-width);
  z-index: 2147483646;
  opacity: 0;
  transition: opacity .18s ease;
  /* правым краем чётко к рассчитанному left */
  transform: translateX(-100%);
  pointer-events: auto;         /* клики разрешены внутри бара */
}
.cs-scrollbar.cs--on{ opacity: 1; }

/* Внутри — колонка: кружочек — трек — кружочек
   + небольшой вертикальный отступ, РАВНЫЙ правому зазору */
.cs-scrollbar-inner{
  box-sizing: border-box;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;       /* верх/низ закреплены */
  pointer-events: auto;
  padding-block: var(--cs-edge-gap);    /* ⬅️ тот самый «микро-отступ» */
}

/* Кружочки-метки (декоративные, не кликабельные) */
.cs-arrow{
  pointer-events: none;
  width:  var(--cs-dot-size);
  height: var(--cs-dot-size);
  flex: 0 0 auto;                       /* фикс. размер, не тянем */
  border-radius: 50%;
  background: var(--cs-dot-color);      /* ТОТ ЖЕ цвет, что и у пилюли, но с альфой */
  /* скрываем текст ▲/▼, который подставляет JS — чтобы ничего не мигало */
  font-size: 0;
  line-height: 0;
  transform: translateZ(0);             /* аккуратнее на ретине */
}
/* Подсветка кружочков на hover/drag — как у пилюли */
.cs-scrollbar:hover .cs-arrow,
.cs-scrollbar.cs--dragging .cs-arrow{
  background: var(--cs-dot-color-hover);
}

/* Трек — без подложки; клики по треку отключены (тянем только «пилюлю») */
.cs-track{
  width: var(--cs-width);
  flex: 1 1 auto;
  position: relative;
  overflow: hidden;
  pointer-events: none;
}

/* Ползунок («пилюля») */
.cs-thumb{
  position: absolute;
  left: 0; right: 0;
  border-radius: var(--cs-radius);
  background: var(--cs-thumb);
  min-height: 28px;                 /* синхрон с JS-клэмпом */
  transform: translateY(0);
  touch-action: none;
  cursor: default;
  will-change: transform;
  pointer-events: auto;             /* тянем именно за пилюлю */
  box-shadow: var(--cs-thumb-shadow);
}
.cs-thumb:hover{ background: var(--cs-thumb-hover); }
.cs-scrollbar.cs--dragging .cs-thumb{ background: var(--cs-thumb-hover); }

/* Когда прокрутку забираем у body (корневой #page-scroll) */
.cs-lock-body{
  overflow: hidden;
  overscroll-behavior: none;
}

/* мгновенное скрытие бара, чтобы не оставались «призраки» при быстром скролле */
.cs-scrollbar.cs--gone{
  display: none !important;
  opacity: 0 !important;   /* на всякий случай */
  pointer-events: none !important;
}