/* Окно нот тянется вверх (rollsize.js): заметная ручка-таблетка на верхнем краю и весь край как зона захвата */

/* весь верхний край окна: при наведении подсвечивается, курсор «вверх-вниз» */
.roll-edge {
  position: absolute; z-index: 2; left: 12px; right: 12px; top: -6px; height: 12px;
  cursor: ns-resize; touch-action: none;
}
.roll-edge::after {
  content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 2px; border-radius: 2px;
  background: var(--accent); opacity: 0; transition: opacity .15s;
}
.roll-edge:hover::after, .roll-wrap.roll-sizing .roll-edge::after,
.roll-wrap:has(> .roll-grip:hover) .roll-edge::after { opacity: .7; }

/* ручка-таблетка со стрелками посередине края */
.roll-grip {
  position: absolute; z-index: 3; top: -13px; left: 50%; transform: translateX(-50%);
  display: grid; place-items: center; width: 52px; height: 24px; border-radius: 999px;
  background: var(--surface-3, #303036); border: 1px solid rgba(255, 255, 255, .28); color: var(--text);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .45); cursor: ns-resize; touch-action: none;
  transition: color .15s, background .15s, border-color .15s, transform .15s;
}
.roll-grip:hover, .roll-wrap.roll-sizing .roll-grip {
  color: var(--text); background: #3a3a41; border-color: var(--accent);
  transform: translateX(-50%) scale(1.08);
}
.roll-grip svg { display: block; }

/* пока ни разу не тянули: ручка мягко «зовёт», рядом подсказка */
.roll-grip.hinting { color: var(--text); border-color: var(--accent); animation: roll-grip-call 1.4s ease-in-out 3; }
@keyframes roll-grip-call {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  40% { transform: translateX(-50%) translateY(-5px); }
}
.roll-grip-tip {
  position: absolute; z-index: 4; bottom: calc(100% + 16px); left: 50%; transform: translateX(-50%);
  padding: 7px 12px; border-radius: 10px; white-space: nowrap; pointer-events: none;
  background: var(--accent); color: #1a0d09; font-weight: 600; font-size: 13px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .5); animation: roll-grip-tip-in .25s ease-out;
}
.roll-grip-tip::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--accent);
}
@keyframes roll-grip-tip-in { from { opacity: 0; transform: translateX(-50%) translateY(4px); } }

.dock.min-roll .roll-grip, .dock.min-roll .roll-edge, .dock.min-roll .roll-grip-tip { display: none; }
@media (prefers-reduced-motion: reduce) {
  .roll-grip.hinting, .roll-grip-tip { animation: none; }
}

/* человек уже тянул окно (rollsize.js ставит .learned): вместо таблетки — маленькая аккуратная полоска.
   Зона захвата остаётся прежней величины, меняется только вид */
.roll-grip.learned {
  top: -9px; width: 72px; height: 16px; background: transparent; border-color: transparent; box-shadow: none;
  transition: transform .25s, background .25s, border-color .25s, box-shadow .25s;
}
.roll-grip.learned svg { display: none; }
.roll-grip.learned::before {
  content: ""; position: absolute; left: 50%; top: 6px; transform: translateX(-50%);
  width: 40px; height: 4px; border-radius: 999px; background: var(--border-2);
  transition: background .15s, width .15s;
}
.roll-grip.learned:hover, .roll-wrap.roll-sizing .roll-grip.learned { background: transparent; border-color: transparent; transform: translateX(-50%); }
.roll-grip.learned:hover::before, .roll-wrap.roll-sizing .roll-grip.learned::before { background: var(--muted); width: 56px; }
@media (hover: none) { .roll-grip.learned::before { background: var(--muted); } }