/* A single geometry and glass material for the public and console navigation.
   Keep the native React controls, menus, keyboard shortcuts and routing. */
html:has(header.pointer-events-none),
html:has([data-slot="sidebar-wrapper"]) {
  scrollbar-gutter: stable;
  --ad-nav-height: 56px;
  --ad-nav-space: 84px;
  --ad-nav-glass: rgba(255, 255, 255, .64);
  --ad-nav-border: rgba(255, 255, 255, .78);
  --ad-nav-shadow: 0 6px 24px rgba(20, 25, 30, .045), 0 0 0 .5px rgba(20, 25, 30, .04), inset 0 1px 0 rgba(255, 255, 255, .9);
}
html.dark:has(header.pointer-events-none),
html.dark:has([data-slot="sidebar-wrapper"]) {
  --ad-nav-glass: rgba(30, 31, 33, .70);
  --ad-nav-border: rgba(255, 255, 255, .10);
  --ad-nav-shadow: 0 6px 24px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .08);
}

/* Shared expanded navigation. Native public scroll state controls contraction. */
header.pointer-events-none > div {
  width: 100%;
  max-width: 1280px;
  padding: 16px 24px 12px;
  transition: none;
}
header.pointer-events-none > div > nav,
[data-slot="sidebar-wrapper"] > header > div {
  box-sizing: border-box;
  height: var(--ad-nav-height);
  min-height: var(--ad-nav-height);
  padding: 8px 16px;
  gap: 6px;
  border: 1px solid var(--ad-nav-border);
  border-radius: 999px;
  background: var(--ad-nav-glass);
  box-shadow: var(--ad-nav-shadow);
  --tw-ring-shadow: 0 0 #0000;
  --tw-ring-offset-shadow: 0 0 #0000;
  -webkit-backdrop-filter: blur(28px);
  backdrop-filter: blur(28px);
  transition: background-color .2s, box-shadow .2s;
}

/* The console reserves the same top space; sidebar and viewport calculations
   inherit it, so neither the page nor its fixed sidebar sits under the pill. */
[data-slot="sidebar-wrapper"] {
  --app-header-height: var(--ad-nav-space);
}
[data-slot="sidebar-wrapper"] > header {
  height: var(--ad-nav-space);
  min-height: var(--ad-nav-space);
  z-index: 50;
  background: transparent;
  border: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
[data-slot="sidebar-wrapper"] > header > div {
  width: calc(100% - 48px);
  max-width: 1232px;
  margin: 16px auto 12px;
}

/* Match brand size and weight across the two native component trees. */
[data-slot="sidebar-wrapper"] > header [class*="system-brand"] {
  order: 0;
  flex: 1 1 auto;
  min-width: 0;
}
[data-slot="sidebar-wrapper"] > header [class*="system-brand"] > button[aria-haspopup="dialog"] {
  display: none;
}
[data-slot="sidebar-wrapper"] > header a[aria-label="返回主页"] {
  height: auto;
  padding: 0;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
}
[data-slot="sidebar-wrapper"] > header a[aria-label="返回主页"] > div {
  width: 28px;
  height: 28px;
  border-radius: 0;
  overflow: visible;
}
[data-slot="sidebar-wrapper"] > header a[aria-label="返回主页"] img {
  object-fit: contain;
  border-radius: 0;
}

/* Flatten only layout wrappers; keep every native menu trigger operational. */
[data-slot="sidebar-wrapper"] > header > div > div:last-child {
  display: contents;
}
[data-slot="sidebar-wrapper"] > header > div > div:last-child > div:first-child {
  display: block;
  order: 1;
  margin: 0 6px 0 0;
}
[data-slot="sidebar-wrapper"] > header nav {
  gap: 2px;
}
[data-slot="sidebar-wrapper"] > header nav > a {
  margin: 0;
  padding: 6px 12px;
  border-radius: 8px;
  color: var(--muted-foreground);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}
[data-slot="sidebar-wrapper"] > header nav > a:is(:hover, [aria-current="page"]) {
  color: var(--foreground);
}
[data-slot="sidebar-wrapper"] > header nav > a[aria-current="page"] {
  font-weight: 600;
}
[data-slot="sidebar-wrapper"] > header [data-slot="sidebar-trigger"] { order: 2; }
[data-slot="sidebar-wrapper"] > header button[aria-label="搜索"] { order: 3; }
[data-slot="sidebar-wrapper"] > header button:has(.lucide-languages) { order: 4; }
[data-slot="sidebar-wrapper"] > header button[aria-label="打开主题设置"] { order: 5; }
[data-slot="sidebar-wrapper"] > header button[aria-label="通知"] { order: 6; }
[data-slot="sidebar-wrapper"] > header button:has([data-slot="avatar"]) { order: 7; }
[data-slot="sidebar-wrapper"] > header > div > button,
[data-slot="sidebar-wrapper"] > header > div > div:last-child > button {
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 0;
  border-radius: 10px;
}
[data-slot="sidebar-wrapper"] > header button[aria-label="搜索"] {
  justify-content: center;
  border-color: transparent;
  background: transparent;
  color: var(--foreground);
}
[data-slot="sidebar-wrapper"] > header button[aria-label="搜索"] > :is(span, kbd) {
  display: none;
}
[data-slot="sidebar-wrapper"] > header button[aria-label="搜索"] > svg {
  position: static;
  transform: none;
  translate: none;
  inset: auto;
  width: 19.2px;
  height: 19.2px;
}
:is(header.pointer-events-none, [data-slot="sidebar-wrapper"] > header) [data-slot="avatar"] {
  width: 28px;
  height: 28px;
}

@media (max-width: 767px) {
  html:has(header.pointer-events-none),
  html:has([data-slot="sidebar-wrapper"]) { --ad-nav-space: 80px; }
  header.pointer-events-none > div { padding: 12px 12px; }
  [data-slot="sidebar-wrapper"] > header > div {
    width: calc(100% - 24px);
    margin: 12px auto;
  }
  header.pointer-events-none > div > nav,
  [data-slot="sidebar-wrapper"] > header > div { padding: 8px 10px; gap: 2px; }
  [data-slot="sidebar-wrapper"] > header > div > button,
  [data-slot="sidebar-wrapper"] > header > div > div:last-child > button {
    width: 32px;
    min-width: 32px;
  }
}
@media (max-width: 480px) {
  [data-slot="sidebar-wrapper"] > header a[aria-label="返回主页"] > span,
  header.pointer-events-none nav > [class*="system-brand"] > a > span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  header.pointer-events-none > div > nav,
  [data-slot="sidebar-wrapper"] > header > div { transition: none; }
}

/* Restore the public header's native expanded/compact animation, and use the
   same geometry for the console's independent content scroller. */
header.pointer-events-none > div {
  transition: max-width .7s cubic-bezier(.16, 1, .3, 1), padding .7s cubic-bezier(.16, 1, .3, 1);
}
header.pointer-events-none > div > nav,
[data-slot="sidebar-wrapper"] > header > div {
  transition: height .7s cubic-bezier(.16, 1, .3, 1), min-height .7s cubic-bezier(.16, 1, .3, 1),
    max-width .7s cubic-bezier(.16, 1, .3, 1), width .7s cubic-bezier(.16, 1, .3, 1),
    margin .7s cubic-bezier(.16, 1, .3, 1), padding .7s cubic-bezier(.16, 1, .3, 1),
    background-color .2s, box-shadow .2s;
}
header.pointer-events-none > div:has(> nav.h-12) {
  max-width: 832px;
  padding: 12px;
}
header.pointer-events-none > div > nav.h-12,
[data-slot="sidebar-wrapper"][data-ad-nav-compact] > header > div {
  height: 48px;
  min-height: 48px;
  padding-top: 4px;
  padding-bottom: 4px;
}
[data-slot="sidebar-wrapper"][data-ad-nav-compact] > header > div {
  width: calc(100% - 24px);
  max-width: 808px;
  margin: 12px auto 24px;
}
@media (prefers-reduced-motion: reduce) {
  header.pointer-events-none > div,
  header.pointer-events-none > div > nav,
  [data-slot="sidebar-wrapper"] > header > div { transition: none; }
}
