/* Keep the web workspace header visible while the page content scrolls. */
html body .app-content > .premium-topbar{position:sticky!important;top:0!important;z-index:1040!important}
html[data-theme="dark"] body .app-content > .premium-topbar{background:rgba(18,29,24,.94)!important}
/* The sidebar itself stays fixed in the viewport; only its menu is scrollable. */
html body .app-shell > .app-sidebar{
  position:sticky!important;
  top:0!important;
  align-self:flex-start;
  height:100vh!important;
  max-height:100vh!important;
  min-height:0!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
}

html body .app-shell > .app-sidebar > .app-sidebar-header{
  flex:0 0 auto!important;
  position:relative!important;
  z-index:3!important;
}

/* Keep the decorative header divider out of the scrolling layer. */
html body .app-shell > .app-sidebar > .sidebar-header-divider{
  position:relative!important;
  z-index:3!important;
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
  width:calc(100% - 28px)!important;
  height:14px!important;
  min-height:14px!important;
  margin:0 14px!important;
  flex:0 0 14px!important;
}
html body .app-shell > .app-sidebar > .sidebar-header-divider span{
  display:block!important;
  height:1px!important;
  flex:1 1 auto!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,transparent,rgba(151,181,161,.28) 20%,rgba(246,214,108,.64))!important;
}
html body .app-shell > .app-sidebar > .sidebar-header-divider span:last-child{
  background:linear-gradient(90deg,rgba(246,214,108,.64),rgba(151,181,161,.28) 80%,transparent)!important;
}
html body .app-shell > .app-sidebar > .sidebar-header-divider b{
  position:relative!important;
  flex:0 0 7px!important;
  width:7px!important;
  height:7px!important;
  transform:rotate(45deg)!important;
  background:#f6d66c!important;
  border:1px solid rgba(255,239,157,.9)!important;
  box-shadow:0 0 0 2px #24332b,0 0 9px rgba(246,214,108,.35)!important;
}

html body .app-shell > .app-sidebar > .app-sidebar-menu{
  min-height:0!important;
  flex:1 1 auto!important;
  /* Extend beneath the sidebar's 1px border so the native scrollbar reaches the edge. */
  width:calc(100% + 1px)!important;
  margin-right:-1px!important;
  box-sizing:border-box!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  scrollbar-gutter:auto!important;
}
/* Slim, quiet scrollbar for the scrollable sidebar menu. */
html body .app-shell > .app-sidebar > .app-sidebar-menu{
  scrollbar-width:thin;
  scrollbar-color:rgba(151,181,161,.58) transparent;
}
html body .app-shell > .app-sidebar > .app-sidebar-menu::-webkit-scrollbar{
  width:4px;
}
html body .app-shell > .app-sidebar > .app-sidebar-menu::-webkit-scrollbar-track{
  background:transparent;
  margin:6px 0;
}
html body .app-shell > .app-sidebar > .app-sidebar-menu::-webkit-scrollbar-thumb{
  min-height:36px;
  border:0;
  border-radius:999px;
  background-clip:padding-box;
  background-color:rgba(151,181,161,.62);
}
html body .app-shell > .app-sidebar > .app-sidebar-menu::-webkit-scrollbar-thumb:hover{
  background-color:rgba(246,214,108,.78);
}
html body .app-shell > .app-sidebar > .app-sidebar-menu::before,
html body .app-shell > .app-sidebar > .app-sidebar-menu::after{
  display:none!important;
}

/* Collapsed mode keeps its compact, centered divider treatment. */
html body.sidebar-collapsed .app-shell > .app-sidebar > .sidebar-header-divider{
  position:absolute!important;
  top:69px!important;
  left:50%!important;
  width:50px!important;
  height:18px!important;
  min-height:18px!important;
  margin:0!important;
  transform:translateX(-50%)!important;
  flex:0 0 18px!important;
}