/* Workspace navigation. Tokens stay local to the shell and its navigation. */
#appShell { --rail-width: 60px; --sidebar-width: 272px; }
#sidebar, #appShell > .navigation-rail {
  --nav-surface: var(--bg-sidebar);
  --nav-text: var(--text-primary);
  --nav-muted: var(--text-secondary);
  --nav-hover: var(--bg-hover);
  --nav-active: var(--accent-soft);
  --nav-accent: var(--accent);
  --nav-border: var(--border-subtle);
  background: var(--nav-surface);
  color: var(--nav-text);
  border-color: var(--nav-border);
  box-shadow: none;
}
:where([data-theme="dark"], html.dark) #sidebar,
:where([data-theme="dark"], html.dark) #appShell > .navigation-rail {
  --nav-surface: #10131b;
  --nav-text: #e8eaf0;
  --nav-muted: #9299ab;
  --nav-hover: #1c2331;
  --nav-active: #252e42;
  --nav-accent: #7899f5;
  --nav-border: #272d3a;
}
#sidebar { padding: 16px 12px 12px; height: 100dvh; overflow: hidden; }
#sidebar .sidebar-content { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; }
#sidebar .sidebar-top { padding: 0 4px 20px; flex-shrink: 0; }
#sidebar .brand-wordmark { color: var(--nav-text); }
#sidebar .sidebar-mode-switch { display: grid; height: 40px; padding: 4px; border: 0; border-radius: 12px; background: var(--nav-hover); margin-bottom: 20px; flex-shrink: 0; }
#sidebar .sidebar-mode-option { border-radius: 8px; color: var(--nav-muted); font-size: 13px; box-shadow: none; }
#sidebar .sidebar-mode-option.is-active { background: var(--nav-active); color: var(--nav-text); box-shadow: none; }
#sidebar .primary-nav { gap: 4px; flex-shrink: 0; }
#sidebar .nav-item { position: relative; height: 40px; min-height: 40px; padding: 0 12px; border-radius: 8px; color: var(--nav-muted); font-size: 13px; font-weight: 500; box-shadow: none; }
#sidebar .nav-item > span:first-of-type { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#sidebar .nav-item .nav-svg { color: inherit; width: 19px; height: 19px; flex-shrink: 0; }
#sidebar .nav-item:hover, #sidebar .recent-item:hover, #sidebar .sidebar-footer:hover,
#sidebar .recent-collapse-toggle:hover, #sidebar .sidebar-search-btn:hover, #sidebar .sidebar-close:hover { background: var(--nav-hover); color: var(--nav-text); box-shadow: none; }
#sidebar .nav-item.is-active, #sidebar .recent-item.is-active { background: var(--nav-active); color: var(--nav-text); box-shadow: none; }
#sidebar .nav-item.is-active::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 2px; border-radius: 2px; background: var(--nav-accent); }
#sidebar .nav-count, #sidebar .whats-new-badge { background: transparent; color: var(--nav-muted); font-size: 11px; }
#sidebar .recent-section { position: relative; margin-top: 24px; min-height: 0; overflow: visible; padding-bottom: 16px; }
#sidebar .recent-collapse-toggle { width: auto; max-width: 60%; padding: 8px 12px; color: var(--nav-muted); font-size: 10px; letter-spacing: .06em; }
#sidebar .recent-view-all { position: absolute; right: 8px; top: 0; padding: 8px 4px; border: 0; background: transparent; color: var(--nav-muted); font-size: 11px; cursor: pointer; }
#sidebar .recent-view-all:hover { color: var(--nav-accent); }
#sidebar .recent-list { max-height: none; overflow: visible; padding: 4px 0 0; }
#sidebar .recent-item { min-height: 48px; padding: 8px 12px; border-radius: 8px; }
#sidebar .recent-title { color: var(--nav-text); font-size: 13px; }
#sidebar .recent-date { color: var(--nav-muted); font-size: 11px; }
#sidebar .recent-empty { border: 0; background: transparent; padding: 8px; color: var(--nav-muted); }
#sidebar .recent-empty strong { color: var(--nav-muted); }
#sidebar .sidebar-footer { min-height: 56px; padding: 8px; margin-top: auto; border: 0; border-radius: 10px; background: transparent; box-shadow: none; flex-shrink: 0; }
#sidebar .workspace-avatar { width: 36px; height: 36px; background: var(--nav-active); color: var(--nav-accent); box-shadow: none; }
#sidebar .sidebar-footer strong { color: var(--nav-text); font-size: 13px; font-weight: 500; }
#sidebar .sidebar-footer span, #sidebar .account-chevron { color: var(--nav-muted); }
/* Legal and shortcuts remain available in the existing account menu. */
#sidebar .sidebar-legal { display: none; }
#appShell > .navigation-rail .rail-button { color: var(--nav-muted); border-radius: 8px; }
#appShell > .navigation-rail .rail-button:hover { background: var(--nav-hover); color: var(--nav-text); }
#appShell > .navigation-rail .rail-button.is-active { background: var(--nav-active); color: var(--nav-accent); box-shadow: none; }
#sidebar :is(button, a):focus-visible, #appShell > .navigation-rail button:focus-visible, #navigationRestore:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#sidebar button:disabled { opacity: .45; cursor: not-allowed; }
#navigationRestore { position: fixed; display: grid; place-items: center; padding: 0; left: 12px; top: max(24px, env(safe-area-inset-top)); z-index: 46; width: 40px; height: 40px; border: 1px solid var(--border-subtle); border-radius: 10px; background: var(--bg-sidebar); color: var(--text-primary); cursor: pointer; }
#navigationRestore[hidden] { display: none; }
#appShell > .navigation-rail .rail-button:not([data-tooltip])::after { content: none; }
#appShell.navigation-hidden { --rail-width: 0px; }
#appShell.navigation-hidden > .navigation-rail { visibility: hidden; pointer-events: none; transform: translateX(-100%); }
@media (min-width: 821px) {
  #appShell > .app-main { transition: margin-left 220ms ease; }
}
@media (max-width: 820px) {
  #sidebar { width: min(88vw, 360px); z-index: 90; padding-bottom: max(12px, env(safe-area-inset-bottom)); transition: transform 220ms ease, visibility 0s linear 220ms; }
  #sidebar.is-open { transition: transform 220ms ease; }
  #sidebar :is(.nav-item, .sidebar-mode-option, .sidebar-search-btn, .sidebar-close, .recent-collapse-toggle, .recent-view-all) { min-height: 44px; }
  #sidebar :is(.sidebar-search-btn, .sidebar-close) { width: 44px; }
  #sidebar .sidebar-mode-switch { height: 52px; }
  #sidebar .recent-delete-btn { width: 44px; height: 44px; opacity: 1; }
  #sidebar .recent-section { margin-top: 16px; }
  #sidebar .recent-view-all { padding-top: 12px; }
  #appShell > #mobileOverlay { background: rgba(8, 12, 22, .32); backdrop-filter: none; }
  body.sidebar-open { overflow: hidden; }
  #navigationHide, #navigationRestore { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  #sidebar, #sidebar *, #appShell > .navigation-rail, #appShell > .app-main { transition: none; animation: none; }
}