/* wave-scrollbar.css — стили «волны».
   Цвет задаётся токеном --wavebar-color (по умолчанию изумрудный Qural);
   подключая в кабинет — переопределить из base.css. */

:root {
  --wavebar-color: #10b981;
  --wavebar-bubble-bg: #17171a;
  --wavebar-bubble-fg: #fff;
}

/* Прячем нативный скроллбар ТОЛЬКО у контейнеров, где включена волна. */
.wavebar-host { scrollbar-width: none; }
.wavebar-host::-webkit-scrollbar { width: 0; height: 0; }

.wavebar {
  position: absolute;
  top: 0;
  right: 0;                  /* капля прижата к краю плоской стороной */
  width: 16px;               /* видимая часть узкая, но цель касания ≥ 44px */
  height: 64px;
  padding: 6px 0 6px 30px;   /* расширяет зону касания влево */
  margin: 0;
  box-sizing: content-box;
  z-index: 30;
  cursor: grab;
  touch-action: none;        /* перетаскивание, а не прокрутка страницы */
  opacity: 0.15;             /* в покое — едва заметный след */
  transition: opacity 0.35s ease;
  will-change: transform;
}
.wavebar--page { position: fixed; }
.wavebar--off { display: none; }
.wavebar--awake { opacity: 1; }
.wavebar--drag { cursor: grabbing; opacity: 1; }

/* Рост: маленькая в покое → полная при прокрутке → чуть больше в руке.
   Размер живёт на svg, направление — на внутренней группе: не конфликтуют. */
.wavebar svg {
  transform: scale(0.4);      /* в покое — маленькая */
  transform-origin: 100% 50%; /* растёт от края, не отрываясь от него */
  transition: transform 0.25s ease;
}
.wavebar--awake svg { transform: scale(1.12); } /* при скролле — крупная */
.wavebar--drag svg { transform: scale(1.25); }

.wavebar:focus-visible {
  outline: 2px solid var(--wavebar-color);
  outline-offset: 2px;
  border-radius: 10px;
  opacity: 1;
}

.wavebar svg {
  display: block;
  width: 16px;
  height: 64px;
  overflow: visible;
  filter: drop-shadow(-2px 2px 5px rgba(0, 0, 0, 0.2));
}
.wavebar svg path {
  fill: var(--wavebar-color);
}
.wavebar svg .wavebar__shine {
  fill: #fff;
  opacity: 0.3;
}

/* Капля не переворачивается — вода перетекает. Форму в движении ведёт
   физический цикл в JS (скорость → вытяжение хвоста, остановка → желе);
   здесь — нейтральное состояние покоя и точки крепления. */
.wavebar__tail { transition: transform 0.3s ease; }
.wavebar__tail--t { transform-origin: 16px 28px; transform: scaleY(0.4); }
.wavebar__tail--b { transform-origin: 16px 36px; transform: scaleY(0.4); }
.wavebar__body { transform-origin: 16px 32px; transition: transform 0.3s ease; }
.wavebar__shine { transition: transform 0.3s ease; }

@keyframes wavebar-breathe {
  0%, 100% { transform: scale(1, 1); }
  50%      { transform: scale(1.06, 0.97); }
}
.wavebar__drop { transform-origin: 16px 32px; }
.wavebar:not(.wavebar--down):not(.wavebar--up) .wavebar__drop {
  animation: wavebar-breathe 3s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .wavebar__drop { animation: none !important; }
  .wavebar__tail, .wavebar__body, .wavebar, .wavebar svg { transition: none; }
}

/* Пузырёк с подписью при перетаскивании («34%» или название секции). */
.wavebar__bubble {
  position: absolute;
  right: 42px;
  top: 50%;
  transform: translateY(-50%) scale(0.9);
  background: var(--wavebar-bubble-bg);
  color: var(--wavebar-bubble-fg);
  font: 700 12px/1 -apple-system, 'Segoe UI', Roboto, sans-serif;
  padding: 7px 10px;
  border-radius: 9px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.wavebar__bubble:empty { display: none; }
.wavebar--drag .wavebar__bubble {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

/* Во время перетаскивания не выделять текст страницы. */
.wavebar-noselect, .wavebar-noselect * { user-select: none !important; }