/* 
 * sidebar.css - 包含 Claude 风格侧边栏的样式设计
 */

:root {
  --sidebar-width-expanded: 260px;
  --sidebar-width-collapsed: 64px;
  --sidebar-bg-light: #ece7de; /* 稍深于主背景 #f4efe7，形成对比层级 */
  --sidebar-bg-dark: #161412;  /* 稍深于深色主背景 #1a1714 */
  --sidebar-border-light: rgba(0, 0, 0, 0.05);
  --sidebar-border-dark: rgba(255, 255, 255, 0.05);
  --sidebar-text-muted-light: rgba(0, 0, 0, 0.6);
  --sidebar-text-muted-dark: rgba(255, 255, 255, 0.6);
  --sidebar-hover-light: rgba(0, 0, 0, 0.04);
  --sidebar-hover-dark: rgba(255, 255, 255, 0.04);
  --sidebar-active-bg-light: rgba(0, 0, 0, 0.08);
  --sidebar-active-bg-dark: rgba(255, 255, 255, 0.08);
}

/* Base Sidebar Container */
.sidebar {
  width: var(--sidebar-width-expanded);
  background-color: var(--sidebar-bg-light);
  border-right: 1px solid var(--sidebar-border-light);
  display: flex;
  flex-direction: column;
  transition: width 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 1.5s ease, border-color 1.5s ease;
  position: relative;
  z-index: 100;
  flex-shrink: 0;
}

[data-theme="dark"] .sidebar {
  background-color: var(--sidebar-bg-dark);
  border-right: 1px solid var(--sidebar-border-dark);
}

/* Reader session override: saved theme (icon) ≠ current shell theme */
.user-popover .theme-label-text.theme-mismatch {
  color: var(--sidebar-text-muted-light);
  text-decoration: line-through;
}
[data-theme="dark"] .user-popover .theme-label-text.theme-mismatch {
  color: var(--sidebar-text-muted-dark);
}

/* Collapsed State */
.sidebar.collapsed {
  width: var(--sidebar-width-collapsed);
}

/* Auth route overrides */
body.auth-route .sidebar {
  display: none !important;
}

/* 1. Header (Logo & Toggle) */
.sidebar-header {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  flex-shrink: 0;
}
.sidebar.collapsed .sidebar-header {
  justify-content: center;
  padding: 0;
}

.sidebar-brand {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s;
}
.sidebar.collapsed .sidebar-brand {
  display: none;
}

.btn-sidebar-toggle {
  background: transparent;
  border: none;
  color: var(--sidebar-text-muted-light);
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s, color 0.2s;
  font-size: 1.1rem;
}
[data-theme="dark"] .btn-sidebar-toggle { color: var(--sidebar-text-muted-dark); }
.btn-sidebar-toggle:hover {
  background-color: var(--sidebar-hover-light);
  color: inherit;
}
[data-theme="dark"] .btn-sidebar-toggle:hover { background-color: var(--sidebar-hover-dark); }

/* 2. Middle Navigation (Scrollable) */
.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* Collapsed: tooltips use position:absolute; left:100% — must not clip inside .sidebar-nav */
.sidebar.collapsed .sidebar-nav {
  overflow: visible;
}
/* Invisible scrollbar for a cleaner look */
.sidebar-nav::-webkit-scrollbar { width: 0; background: transparent; }

.nav-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
  font-size: 0.95rem;
  transition: background-color 0.2s;
  cursor: pointer;
  white-space: nowrap;
  border: none;
  background: transparent;
  text-align: left;
  width: 100%;
}
.nav-item:hover {
  background-color: var(--sidebar-hover-light);
}
[data-theme="dark"] .nav-item:hover { background-color: var(--sidebar-hover-dark); }

.nav-item.active {
  background-color: var(--sidebar-active-bg-light);
  font-weight: 500;
}
[data-theme="dark"] .nav-item.active { background-color: var(--sidebar-active-bg-dark); }

.nav-icon {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.sidebar.collapsed .nav-icon {
  margin-right: 0;
}
.sidebar.collapsed .nav-label {
  display: none;
}

/* Recents Section */
.nav-section-title {
  margin: 16px 0 8px 12px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
  color: var(--sidebar-text-muted-light);
  white-space: nowrap;
}
[data-theme="dark"] .nav-section-title { color: var(--sidebar-text-muted-dark); }
.sidebar.collapsed .nav-section-recents-wrap { display: none; }

.nav-section-recents-wrap {
  position: relative;
}

.nav-section-header-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 16px 8px 8px 12px;
  position: relative;
}

.nav-section-title--inline {
  margin: 0;
  flex: 1;
  min-width: 0;
}

.btn-recents-settings {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.15s, background-color 0.15s;
}
.btn-recents-settings:hover {
  opacity: 1;
  background-color: var(--sidebar-hover-light);
}
[data-theme="dark"] .btn-recents-settings:hover {
  background-color: var(--sidebar-hover-dark);
}

.recents-settings-popover {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  min-width: 120px;
  padding: 4px 0;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  background: var(--sidebar-bg-light, #fff);
  border: 1px solid var(--sidebar-border-light);
  z-index: 50;
}
[data-theme="dark"] .recents-settings-popover {
  background: var(--sidebar-bg-dark, #1a1816);
  border-color: var(--sidebar-border-dark);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
}

.recents-settings-opt {
  display: block;
  width: 100%;
  padding: 8px 14px;
  border: none;
  background: transparent;
  text-align: left;
  font-size: 0.85rem;
  cursor: pointer;
  color: inherit;
}
.recents-settings-opt:hover {
  background-color: var(--sidebar-hover-light);
}
[data-theme="dark"] .recents-settings-opt:hover {
  background-color: var(--sidebar-hover-dark);
}
.recents-settings-opt.is-selected {
  font-weight: 600;
  color: var(--accent, #8b6914);
}

.sidebar-recents-list {
  padding-bottom: 4px;
  transition: opacity 0.15s ease;
}
.sidebar-recents-list.is-refreshing {
  opacity: 0.55;
  pointer-events: none;
}

.recent-empty {
  padding: 8px 12px;
  font-size: 0.8rem;
  opacity: 0.65;
  font-style: italic;
}
.recent-empty--muted {
  opacity: 0.45;
}

.recent-row {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 8px 4px 12px;
  border-radius: 8px;
  transition: background-color 0.2s;
}
.recent-row:hover {
  background-color: var(--sidebar-hover-light);
}
[data-theme="dark"] .recent-row:hover {
  background-color: var(--sidebar-hover-dark);
}

.recent-row-link {
  flex: 1;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  padding: 4px 0;
}

.recent-title--ellipsis {
  display: block;
  font-size: 0.85rem;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recent-row-tools {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 0;
}

.recent-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 0.15s, background-color 0.15s;
}
.recent-row:hover .recent-tool {
  opacity: 0.75;
}
.recent-tool:hover {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.06);
}
[data-theme="dark"] .recent-tool:hover {
  background-color: rgba(255, 255, 255, 0.06);
}

.recent-row-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  min-width: 198px;
  max-width: min(240px, calc(100vw - 24px));
  padding: 6px 0;
  border-radius: 10px;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.04),
    0 8px 24px rgba(0, 0, 0, 0.1);
  background: var(--sidebar-bg-light, #fff);
  border: 1px solid var(--sidebar-border-light);
  z-index: 60;
}
[data-theme="dark"] .recent-row-menu {
  background: var(--sidebar-bg-dark, #1a1816);
  border-color: var(--sidebar-border-dark);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.35),
    0 10px 28px rgba(0, 0, 0, 0.45);
}

.recent-row-menu[hidden] {
  display: none !important;
}

.recent-menu-rule {
  height: 0;
  margin: 4px 10px;
  border: none;
  border-top: 1px solid var(--sidebar-border-light);
  opacity: 0.85;
}
[data-theme="dark"] .recent-menu-rule {
  border-top-color: var(--sidebar-border-dark);
}

.recent-menu-item {
  display: block;
  width: 100%;
  padding: 6px 12px;
  border: none;
  background: transparent;
  text-align: left;
  font-size: 0.75rem;
  line-height: 1.3;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  color: inherit;
}
.recent-menu-item:hover,
.recent-menu-item:focus-visible {
  background-color: var(--sidebar-hover-light);
  outline: none;
}
[data-theme="dark"] .recent-menu-item:hover,
[data-theme="dark"] .recent-menu-item:focus-visible {
  background-color: var(--sidebar-hover-dark);
}

.recent-menu-item--danger {
  color: #b85c5c;
}
[data-theme="dark"] .recent-menu-item--danger {
  color: #e57373;
}
.recent-menu-item--danger:hover,
.recent-menu-item--danger:focus-visible {
  background-color: rgba(183, 92, 92, 0.12);
}
[data-theme="dark"] .recent-menu-item--danger:hover,
[data-theme="dark"] .recent-menu-item--danger:focus-visible {
  background-color: rgba(229, 115, 115, 0.12);
}

.recent-item {
  display: flex;
  align-items: flex-start;
  padding: 8px 12px;
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
  transition: background-color 0.2s;
  cursor: pointer;
}
.recent-item:hover { background-color: var(--sidebar-hover-light); }
[data-theme="dark"] .recent-item:hover { background-color: var(--sidebar-hover-dark); }

.sidebar.collapsed .recent-item { display: none; } /* legacy */

.recent-icon {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  flex-shrink: 0;
  font-size: 1rem;
  opacity: 0.7;
}

.recent-title {
  font-size: 0.85rem;
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}

/* 3. Bottom Footer (User Card & Settings) */
.sidebar-footer {
  padding: 12px;
  flex-shrink: 0;
  border-top: 1px solid var(--sidebar-border-light);
  position: relative;
}
[data-theme="dark"] .sidebar-footer { border-top-color: var(--sidebar-border-dark); }

.user-profile-btn {
  display: flex;
  align-items: center;
  width: 100%;
  background: transparent;
  border: none;
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s;
  color: inherit;
}
.user-profile-btn:hover { background-color: var(--sidebar-hover-light); }
[data-theme="dark"] .user-profile-btn:hover { background-color: var(--sidebar-hover-dark); }

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--sidebar-active-bg-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  flex-shrink: 0;
}
[data-theme="dark"] .user-avatar { background-color: var(--sidebar-active-bg-dark); }

.sidebar.collapsed .user-avatar { margin: 0 auto; }

.user-info {
  margin-left: 12px;
  text-align: left;
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
}
.sidebar.collapsed .user-info { display: none; }

.user-name {
  font-size: 0.9rem;
  font-weight: 600;
  display: block;
  text-overflow: ellipsis;
  overflow: hidden;
}

.user-meta {
  font-size: 0.75rem;
  color: var(--sidebar-text-muted-light);
  display: block;
  text-overflow: ellipsis;
  overflow: hidden;
}
[data-theme="dark"] .user-meta { color: var(--sidebar-text-muted-dark); }

.user-caret {
  font-size: 0.8rem;
  color: var(--sidebar-text-muted-light);
  margin-left: 8px;
}
[data-theme="dark"] .user-caret { color: var(--sidebar-text-muted-dark); }
.sidebar.collapsed .user-caret { display: none; }

/* Popover Menu */
.user-popover {
  position: absolute;
  bottom: 100%;
  left: 12px;
  width: calc(100% - 24px);
  background-color: var(--sidebar-bg-light);
  border: 1px solid var(--sidebar-border-light);
  border-radius: 8px;
  padding: 8px;
  margin-bottom: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  display: none;
  flex-direction: column;
  gap: 4px;
  z-index: 200;
  min-width: 200px;
}
[data-theme="dark"] .user-popover {
  background-color: #22201e;
  border-color: var(--sidebar-border-dark);
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

.user-popover.is-open {
  display: flex;
}

.popover-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 6px;
  color: inherit;
  text-decoration: none;
  font-size: 0.9rem;
  transition: background-color 0.2s;
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
}
.popover-item:hover { background-color: var(--sidebar-hover-light); }
[data-theme="dark"] .popover-item:hover { background-color: var(--sidebar-hover-dark); }

.popover-item .icon {
  width: 20px;
  margin-right: 12px;
  text-align: center;
  opacity: 0.8;
}

.popover-separator {
  height: 1px;
  background-color: var(--sidebar-border-light);
  margin: 4px 0;
}
[data-theme="dark"] .popover-separator { background-color: var(--sidebar-border-dark); }

/* Reader FAB Overrides */
.reader-fab-container {
  position: absolute;
  top: 16px;
  right: 24px;
  display: flex;
  gap: 8px;
  z-index: 1000;
  opacity: 0.6;
  transition: opacity 0.2s;
  background: var(--sidebar-bg-light); /* Fallback */
  background: rgba(236, 231, 222, 0.85); /* Slightly transparent */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 32px;
  padding: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
[data-theme="dark"] .reader-fab-container {
  background: rgba(34, 32, 30, 0.85);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.reader-fab-container:hover { opacity: 1; }

.fab-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  transition: background-color 0.2s;
}
.fab-btn:hover { background-color: var(--sidebar-hover-light); }
[data-theme="dark"] .fab-btn:hover { background-color: var(--sidebar-hover-dark); }

/* Top row: title pill (back + title) + optional fork capsule with gap. */
.reader-top-bar {
  position: absolute;
  top: 16px;
  left: 24px;
  right: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(30px, 3.5vw, 50px);
  width: fit-content;
  max-width: calc(100% - 48px);
  z-index: 1000;
  pointer-events: none;
}
.reader-top-bar > * {
  pointer-events: auto;
}

.reader-back-container {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  max-width: 100%;
  opacity: 0.8;
  /* Theme crossfade durations live in layout.css (#app .reader-back-container). */
  background: rgba(236, 231, 222, 0.85); /* Slightly transparent */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 32px;
  padding: 4px 14px 4px 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
[data-theme="dark"] .reader-back-container {
  background: rgba(34, 32, 30, 0.85);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.reader-back-container:hover { opacity: 1; background: rgba(236, 231, 222, 0.95); }
[data-theme="dark"] .reader-back-container:hover { background: rgba(34, 32, 30, 0.95); }

/* Only back + title trigger TOC — not the fork control. */
.reader-toc-zone {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 0 1 auto;
}

/* Fork: separate glass capsule after title pill (spacing via .reader-top-bar gap). */
.reader-top-bar .reader-fork-btn.reader-fork-capsule {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  min-height: 36px;
  padding: 4px 18px;
  background: rgba(236, 231, 222, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 32px;
  border: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  color: inherit;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
[data-theme="dark"] .reader-top-bar .reader-fork-btn.reader-fork-capsule {
  background: rgba(34, 32, 30, 0.85);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.reader-top-bar .reader-fork-btn.reader-fork-capsule:hover:not(:disabled) {
  opacity: 1;
  background: rgba(236, 231, 222, 0.95);
}
[data-theme="dark"] .reader-top-bar .reader-fork-btn.reader-fork-capsule:hover:not(:disabled) {
  background: rgba(34, 32, 30, 0.95);
}
.reader-top-bar .reader-fork-btn.reader-fork-btn--disabled,
.reader-top-bar .reader-fork-btn.reader-fork-capsule:disabled {
  cursor: default;
  opacity: 0.85;
}

.fab-back {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

/* Reader bottom bar is appended to document.body (not #app); keep theme crossfade here. */
body .reader-statusbar .statusbar-btn {
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  outline: none;
  transition-property: background-color, color;
  transition-duration: var(--theme-xfade-duration);
  transition-timing-function: var(--theme-xfade-ease);
}
body .reader-statusbar .statusbar-btn:hover {
  transition-duration: var(--theme-tap-duration);
  background: rgba(255,255,255,0.1);
}
[data-theme="light"] body .reader-statusbar .statusbar-btn:hover {
  background: rgba(0,0,0,0.05);
}

.reader-title-hint {
  min-width: 0;
  font-family: 'EB Garamond', serif;
  font-size: 1.1rem;
  font-style: italic;
  opacity: 0.8;
  white-space: normal;
}

/* Tooltips when folded */
.sidebar.collapsed .nav-item, 
.sidebar.collapsed .recent-item, 
.sidebar.collapsed .btn-sidebar-toggle, 
.sidebar.collapsed .user-profile-btn {
  position: relative;
}

.sidebar-tooltip {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 16px;
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.8rem;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  z-index: 1000;
  transition: opacity 0.15s;
  transition-delay: 0s;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  gap: 8px;
}
[data-theme="dark"] .sidebar-tooltip {
  background: rgba(255, 255, 255, 0.9);
  color: #000;
}
.sidebar-tooltip .shortcut {
  color: rgba(255,255,255,0.5);
  font-size: 0.75rem;
}
[data-theme="dark"] .sidebar-tooltip .shortcut {
  color: rgba(0,0,0,0.5);
}

.sidebar:not(.collapsed) .sidebar-tooltip {
  display: none !important;
}

.sidebar.collapsed .btn-sidebar-toggle:hover .sidebar-tooltip,
.sidebar.collapsed .nav-item:hover .sidebar-tooltip,
.sidebar.collapsed .recent-item:hover .sidebar-tooltip {
  opacity: 1;
  transition-delay: 0.5s;
}

/* Submenu */
.popover-submenu {
  display: none;
  position: absolute;
  left: calc(100% + 4px);
  bottom: 0;
  background-color: var(--sidebar-bg-light);
  border: 1px solid var(--sidebar-border-light);
  border-radius: 8px;
  padding: 8px;
  width: 140px;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  z-index: 201;
}
[data-theme="dark"] .popover-submenu {
  background-color: #22201e;
  border-color: var(--sidebar-border-dark);
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
/* Visibility controlled by .submenu-open (see sidebar.js safe-triangle hover) */
.popover-item.has-submenu.submenu-open .popover-submenu {
  display: flex;
}


/* Responsive Drawer (Mobile) */
@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    transform: translateX(-100%);
    box-shadow: 4px 0 24px rgba(0,0,0,0.1);
  }
  .sidebar.is-mobile-open {
    transform: translateX(0);
  }
  .sidebar-mobile-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 99;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
  }
  .sidebar-mobile-overlay.is-active {
    opacity: 1;
    pointer-events: auto;
  }
  /* Hide the toggle button when in mobile drawer mode */
  .btn-sidebar-toggle { display: none; }
}

/*
 * Theme ink: override layout.css :where(#app) * global 1.5s color crossfade on shell chrome.
 * Specificity #sidebar … beats #app * (100). Omit `color` from transition-property so inherited
 * ink does not interpolate on a parent (e.g. .recent-row was missing and children kept wrong color).
 */
#sidebar :is(
  .sidebar-header,
  .sidebar-nav,
  .sidebar-footer,
  .sidebar-brand,
  .btn-sidebar-toggle,
  .nav-item,
  .nav-label,
  .nav-icon,
  .nav-section-title,
  .nav-section-recents-wrap,
  .sidebar-recents-list,
  .recent-row,
  .btn-recents-settings,
  .recents-settings-opt,
  .recent-title,
  .recent-empty,
  .recent-row-link,
  .recent-tool,
  .recent-menu-item,
  .user-profile-btn,
  .user-info,
  .user-avatar,
  .user-name,
  .user-meta,
  .user-caret,
  .user-popover,
  .popover-submenu,
  .popover-item,
  .theme-label-text,
  .sidebar-tooltip
),
#sidebar :is(.nav-icon, .popover-item, .recent-tool, .btn-recents-settings) :is(svg, path, circle, line, polyline) {
  transition-property: background-color, border-color, outline-color, fill, stroke, opacity, transform, box-shadow, filter, backdrop-filter;
  transition-duration: var(--theme-tap-duration);
  transition-timing-function: var(--theme-xfade-ease);
}

/* Pin foreground to theme tokens (inherit was following parents mid-transition). Inline colors (e.g. Log out) still win. */
#sidebar .sidebar-brand,
#sidebar .nav-item,
#sidebar .nav-label,
#sidebar .user-name,
#sidebar .user-avatar,
#sidebar .recent-row,
#sidebar .recent-row-link,
#sidebar .recent-title,
#sidebar .popover-item,
#sidebar .theme-label-text:not(.theme-mismatch) {
  color: var(--text);
}