/*
 * Sidebar flat-group labels (e.g. 平台使用 / Platform / 编程 Agent).
 * Keep non-collapsible flat groups; strengthen the category-header look.
 */

:root {
  --website-docs-header-height: 64px;
  --website-docs-tabs-height: 50px;
  --website-docs-content-top: calc(
    var(--website-docs-header-height) + var(--website-docs-tabs-height)
  );
}

/* Website owns the global page shell; Scalar only owns docs navigation and content. */
header.t-header {
  display: none !important;
}

nav.tabs.tabs-header {
  top: var(--website-docs-header-height) !important;
  z-index: 30;
}

main.content.content-tabs-header {
  padding-top: var(--website-docs-content-top) !important;
}

aside.sidebar.sidebar-tabs-header,
aside.toc.sidebar-tabs-header {
  top: var(--website-docs-content-top) !important;
  height: calc(100dvh - var(--website-docs-content-top)) !important;
}

.agent-chat-panel.agent-chat-panel--tabs-header {
  top: var(--website-docs-content-top) !important;
  height: calc(100dvh - var(--website-docs-content-top)) !important;
}

/* The Website header is the only theme authority. Scalar's own footer toggle
 * writes a different storage contract and would allow the two surfaces to
 * drift apart again. */
aside.sidebar button.group\/toggle {
  display: none !important;
}

@media (max-width: 1000px) {
  /*
   * Scalar's mobile menu trigger originally lives in its removed header.
   * Keep only that content-navigation control beside the section tabs.
   */
  header.t-header {
    display: block !important;
    width: 0 !important;
    height: 0 !important;
  }

  header.t-header > :not(.header-left),
  header.t-header .header-left > :not(.menu-button) {
    display: none !important;
  }

  header.t-header .menu-button {
    position: fixed !important;
    top: calc(var(--website-docs-header-height) + 7px) !important;
    left: 8px !important;
    z-index: 35 !important;
    display: inline-flex !important;
    width: 36px !important;
    height: 36px !important;
    border: 1px solid var(--scalar-border-color) !important;
    border-radius: 8px !important;
    background: var(--scalar-background-1) !important;
  }

  nav.tabs.tabs-header {
    padding-left: 52px !important;
    overflow-x: auto;
  }
}

aside.sidebar li.group\/sidebar-section > .group\/spacer-before {
  height: 1.15rem !important;
}

aside.sidebar li.group\/sidebar-section > .group\/button {
  margin: 0.2rem 0 0.5rem;
  padding: 0.35rem 0.75rem 0.6rem !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  /* Stronger than page muted text so the label reads as a category header */
  color: #3f3f46 !important;
  cursor: default !important;
  pointer-events: none !important;
  border-bottom: 1px solid #d4d4d8;
}

aside.sidebar.dark-mode li.group\/sidebar-section > .group\/button,
.dark-mode aside.sidebar li.group\/sidebar-section > .group\/button {
  color: #d4d4d8 !important;
  border-bottom-color: #3f3f46;
}

aside.sidebar li.group\/sidebar-section > .group\/button .group\/button-label {
  font-size: 0.8rem !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  color: inherit !important;
  opacity: 1;
}

/* Legacy API method pill tweaks */
aside.sidebar a:has(.method-nav-pill),
#sidebar a:has(.method-nav-pill) {
  display: grid;
  grid-template-columns: 2.9rem minmax(0, 1fr);
  align-items: center;
  column-gap: 0.72rem;
  min-height: 2.4rem;
  margin: 0.14rem 0;
  padding: 0.34rem 0.88rem 0.34rem 0.56rem !important;
  border-radius: 1rem;
}

aside.sidebar a:has(.method-nav-pill) .method-nav-pill > span,
#sidebar a:has(.method-nav-pill) .method-nav-pill > span {
  min-width: 2.42rem;
  padding: 0.3rem 0.5rem !important;
  border-radius: 999px !important;
  font-size: 0.64rem !important;
  font-weight: 800 !important;
}