/* ===== Scroll-chevron (shared K5 component) ============================
   Voor visual cue in een scrollable container (tabs, lists, strips).
   Variant: blokje 32x32px in accent-kleur, radius 6px, lichte schaduw,
   subtiele bounce-animatie in de scroll-richting.
   Zie DESIGN_SYSTEM.md sectie 7.x Scroll-chevron.
   ====================================================================== */
.scroll-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--color-button);
  color: var(--color-text-button);
  border-radius: 6px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
  animation: scroll-chevron-bounce-r 1.4s ease-in-out infinite;
  cursor: pointer;
  pointer-events: auto;
  user-select: none;
}
.scroll-chevron:hover {
  filter: brightness(1.08);
}
.scroll-chevron--left {
  animation-name: scroll-chevron-bounce-l;
}
@keyframes scroll-chevron-bounce-r {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}
@keyframes scroll-chevron-bounce-l {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-4px); }
}