/* Chrome: make the complete left column scrollable so every section remains
   reachable on short desktop and mobile viewports. */
.sidebar {
  height: 100vh;
  height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
  scrollbar-color: rgba(168, 67, 255, 0.6) transparent;
  scrollbar-width: thin;
}

.sidebar .brand,
.sidebar .sync-card,
.sidebar .profile {
  flex-shrink: 0;
}

.sidebar .nav {
  flex: 0 0 auto;
  min-height: auto;
  overflow: visible;
}

.sidebar::-webkit-scrollbar {
  width: 6px;
}

.sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(168, 67, 255, 0.52);
}

.sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(188, 50, 242, 0.78);
}