/* ═══════════════════════════════════════════════════════
   反熵引擎 — Anti-entropy Engine
   visionOS Glass · Twitter Dim
   ═══════════════════════════════════════════════════════ */

:root {
  --ae-header-h: 56px;
  --ae-sidebar-w: 260px;
  --ae-right-w: 260px;
  --ae-radius-s: 10px;
  --ae-radius-m: 14px;
  --ae-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ae-transition: 0.3s var(--ae-ease);
  --ae-blur: 40px;
  --ae-blur-s: 24px;
  --ae-handle-w: 2px;
  --ae-sidebar-min: 200px;
  --ae-sidebar-max: 400px;
  --ae-toggle-size: 36px;
  --ae-collapsed-w: 52px;
}

/* ── DIM — Twitter Dim (deep blue) ── */
[data-theme="dim"] {
  /* rgb triplet bases: any alpha can be derived via rgb(var(--ae-X-rgb) / A) */
  --ae-fg-rgb: 255 255 255;
  --ae-shadow-rgb: 0 0 0;
  --ae-accent-rgb: 66 133 244;
  --ae-green-rgb: 0 186 124;
  --ae-yellow-rgb: 255 173 31;
  --ae-red-rgb: 244 93 93;
  --ae-link: #1D9BF0;          /* Twitter 蓝 (深主题) */

  --ae-bg-base: #15202B;
  --ae-glass-bg: rgb(var(--ae-fg-rgb) / .04);
  --ae-glass-bg-hover: rgb(var(--ae-fg-rgb) / .07);
  --ae-glass-bg-active: rgb(var(--ae-fg-rgb) / .10);
  --ae-glass-border: rgb(var(--ae-fg-rgb) / .08);
  --ae-glass-border-hover: rgb(var(--ae-fg-rgb) / .16);
  --ae-glass-shine: linear-gradient(135deg, rgb(var(--ae-fg-rgb) / .05) 0%, transparent 50%);
  --ae-sidebar-bg: #15202B;
  --ae-sidebar-border: rgb(var(--ae-fg-rgb) / .08);
  --ae-header-bg: rgba(21, 32, 43, 0.55);
  --ae-text-1: rgb(var(--ae-fg-rgb) / .93);
  --ae-text-2: rgb(var(--ae-fg-rgb) / .55);
  --ae-text-3: rgb(var(--ae-fg-rgb) / .30);
  --ae-accent: rgb(var(--ae-accent-rgb));
  --ae-accent-soft: rgb(var(--ae-accent-rgb) / .12);
  --ae-accent-glow: rgb(var(--ae-accent-rgb) / .25);
  --ae-green: rgb(var(--ae-green-rgb));
  --ae-yellow: rgb(var(--ae-yellow-rgb));
  --ae-red: rgb(var(--ae-red-rgb));
  --ae-shadow-card: 0 2px 16px rgb(var(--ae-shadow-rgb) / .25), inset 0 .5px 0 rgb(var(--ae-fg-rgb) / .04);
  --ae-shadow-card-hover: 0 4px 24px rgb(var(--ae-shadow-rgb) / .30), inset 0 .5px 0 rgb(var(--ae-fg-rgb) / .06);
  --ae-handle-idle: rgb(var(--ae-fg-rgb) / .05);
  --ae-handle-hover: rgb(var(--ae-accent-rgb) / .30);
  --ae-handle-drag: rgb(var(--ae-accent-rgb) / .60);
}

/* ── DARK — Google Dark (warm charcoal) ── */
[data-theme="dark"] {
  --ae-fg-rgb: 255 255 255;
  --ae-shadow-rgb: 0 0 0;
  --ae-accent-rgb: 138 180 248;
  --ae-green-rgb: 129 201 149;
  --ae-yellow-rgb: 253 214 99;
  --ae-red-rgb: 244 93 93;
  --ae-link: #1D9BF0;          /* Twitter 蓝 (深主题) */

  --ae-bg-base: #1f1f1f;
  --ae-glass-bg: rgb(var(--ae-fg-rgb) / .05);
  --ae-glass-bg-hover: rgb(var(--ae-fg-rgb) / .08);
  --ae-glass-bg-active: rgb(var(--ae-fg-rgb) / .11);
  --ae-glass-border: rgb(var(--ae-fg-rgb) / .10);
  --ae-glass-border-hover: rgb(var(--ae-fg-rgb) / .18);
  --ae-glass-shine: linear-gradient(135deg, rgb(var(--ae-fg-rgb) / .04) 0%, transparent 50%);
  --ae-sidebar-bg: #1f1f1f;
  --ae-sidebar-border: rgb(var(--ae-fg-rgb) / .08);
  --ae-header-bg: rgba(31, 31, 31, 0.55);
  --ae-text-1: #e8eaed;
  --ae-text-2: #9aa0a6;
  --ae-text-3: rgb(var(--ae-fg-rgb) / .30);
  --ae-accent: rgb(var(--ae-accent-rgb));
  --ae-accent-soft: rgb(var(--ae-accent-rgb) / .12);
  --ae-accent-glow: rgb(var(--ae-accent-rgb) / .20);
  --ae-green: rgb(var(--ae-green-rgb));
  --ae-yellow: rgb(var(--ae-yellow-rgb));
  --ae-red: rgb(var(--ae-red-rgb));
  --ae-shadow-card: 0 2px 16px rgb(var(--ae-shadow-rgb) / .35), inset 0 .5px 0 rgb(var(--ae-fg-rgb) / .04);
  --ae-shadow-card-hover: 0 4px 24px rgb(var(--ae-shadow-rgb) / .40), inset 0 .5px 0 rgb(var(--ae-fg-rgb) / .06);
  --ae-handle-idle: rgb(var(--ae-fg-rgb) / .06);
  --ae-handle-hover: rgb(var(--ae-accent-rgb) / .30);
  --ae-handle-drag: rgb(var(--ae-accent-rgb) / .60);
}

/* ── LIGHT — Default ── */
[data-theme="light"] {
  --ae-fg-rgb: 0 0 0;
  --ae-shadow-rgb: 0 0 0;
  --ae-accent-rgb: 66 133 244;
  --ae-green-rgb: 0 186 124;
  --ae-yellow-rgb: 255 173 31;
  --ae-red-rgb: 244 93 93;
  --ae-link: #576B95;          /* 微信暗蓝 (浅主题) */

  --ae-bg-base: #F7F9FA;
  --ae-glass-bg: rgb(255 255 255 / .72);
  --ae-glass-bg-hover: rgb(255 255 255 / .88);
  --ae-glass-bg-active: rgb(255 255 255 / .95);
  --ae-glass-border: rgb(var(--ae-fg-rgb) / .06);
  --ae-glass-border-hover: rgb(var(--ae-fg-rgb) / .12);
  --ae-glass-shine: linear-gradient(135deg, rgb(255 255 255 / .9) 0%, transparent 50%);
  --ae-sidebar-bg: #F7F9FA;
  --ae-sidebar-border: rgb(var(--ae-fg-rgb) / .06);
  --ae-header-bg: rgba(247, 249, 250, 0.55);
  --ae-text-1: rgb(var(--ae-fg-rgb) / .88);
  --ae-text-2: rgb(var(--ae-fg-rgb) / .50);
  --ae-text-3: rgb(var(--ae-fg-rgb) / .25);
  --ae-accent: rgb(var(--ae-accent-rgb));
  --ae-accent-soft: rgb(var(--ae-accent-rgb) / .08);
  --ae-accent-glow: rgb(var(--ae-accent-rgb) / .15);
  --ae-green: rgb(var(--ae-green-rgb));
  --ae-yellow: rgb(var(--ae-yellow-rgb));
  --ae-red: rgb(var(--ae-red-rgb));
  --ae-shadow-card: 0 1px 6px rgb(var(--ae-shadow-rgb) / .05), inset 0 .5px 0 rgb(255 255 255 / .6);
  --ae-shadow-card-hover: 0 2px 12px rgb(var(--ae-shadow-rgb) / .08), inset 0 .5px 0 rgb(255 255 255 / .8);
  --ae-handle-idle: rgb(var(--ae-fg-rgb) / .04);
  --ae-handle-hover: rgb(var(--ae-accent-rgb) / .20);
  --ae-handle-drag: rgb(var(--ae-accent-rgb) / .50);
}

/* ── EYECARE — Warm dark ── */
[data-theme="eyecare"] {
  --ae-fg-rgb: 255 245 220;
  --ae-shadow-rgb: 0 0 0;
  --ae-accent-rgb: 201 169 110;
  --ae-green-rgb: 129 201 149;
  --ae-yellow-rgb: 253 214 99;
  --ae-red-rgb: 244 93 93;
  --ae-link: #1D9BF0;          /* Twitter 蓝 (深主题, 暖底也用同色保持收敛) */

  --ae-bg-base: #262624;
  --ae-glass-bg: rgb(var(--ae-fg-rgb) / .04);
  --ae-glass-bg-hover: rgb(var(--ae-fg-rgb) / .07);
  --ae-glass-bg-active: rgb(var(--ae-fg-rgb) / .10);
  --ae-glass-border: rgb(var(--ae-fg-rgb) / .08);
  --ae-glass-border-hover: rgb(var(--ae-fg-rgb) / .15);
  --ae-glass-shine: linear-gradient(135deg, rgb(var(--ae-fg-rgb) / .03) 0%, transparent 50%);
  --ae-sidebar-bg: #262624;
  --ae-sidebar-border: rgb(var(--ae-fg-rgb) / .06);
  --ae-header-bg: #262624;
  --ae-text-1: #e0dcd4;
  --ae-text-2: #9e9a90;
  --ae-text-3: rgb(var(--ae-fg-rgb) / .28);
  --ae-accent: rgb(var(--ae-accent-rgb));
  --ae-accent-soft: rgb(var(--ae-accent-rgb) / .12);
  --ae-accent-glow: rgb(var(--ae-accent-rgb) / .20);
  --ae-green: rgb(var(--ae-green-rgb));
  --ae-yellow: rgb(var(--ae-yellow-rgb));
  --ae-red: rgb(var(--ae-red-rgb));
  --ae-shadow-card: 0 2px 16px rgb(var(--ae-shadow-rgb) / .35), inset 0 .5px 0 rgb(var(--ae-fg-rgb) / .03);
  --ae-shadow-card-hover: 0 4px 24px rgb(var(--ae-shadow-rgb) / .40), inset 0 .5px 0 rgb(var(--ae-fg-rgb) / .05);
  --ae-handle-idle: rgb(var(--ae-fg-rgb) / .05);
  --ae-handle-hover: rgb(var(--ae-accent-rgb) / .30);
  --ae-handle-drag: rgb(var(--ae-accent-rgb) / .60);
}

/* ── DOTGRID — Pure black + dot matrix ── */
[data-theme="dotgrid"] {
  --ae-fg-rgb: 255 255 255;
  --ae-shadow-rgb: 0 0 0;
  --ae-accent-rgb: 138 180 248;
  --ae-green-rgb: 129 201 149;
  --ae-yellow-rgb: 253 214 99;
  --ae-red-rgb: 244 93 93;
  --ae-link: #1D9BF0;          /* Twitter 蓝 (深主题) */

  --ae-bg-base: #000000;
  --ae-glass-bg: rgb(var(--ae-fg-rgb) / .04);
  --ae-glass-bg-hover: rgb(var(--ae-fg-rgb) / .07);
  --ae-glass-bg-active: rgb(var(--ae-fg-rgb) / .10);
  --ae-glass-border: rgb(var(--ae-fg-rgb) / .08);
  --ae-glass-border-hover: rgb(var(--ae-fg-rgb) / .15);
  --ae-glass-shine: linear-gradient(135deg, rgb(var(--ae-fg-rgb) / .03) 0%, transparent 50%);
  --ae-sidebar-bg: #000000;
  --ae-sidebar-border: rgb(var(--ae-fg-rgb) / .06);
  --ae-header-bg: #000000;
  --ae-text-1: #e8eaed;
  --ae-text-2: #9aa0a6;
  --ae-text-3: rgb(var(--ae-fg-rgb) / .28);
  --ae-accent: rgb(var(--ae-accent-rgb));
  --ae-accent-soft: rgb(var(--ae-accent-rgb) / .12);
  --ae-accent-glow: rgb(var(--ae-accent-rgb) / .20);
  --ae-green: rgb(var(--ae-green-rgb));
  --ae-yellow: rgb(var(--ae-yellow-rgb));
  --ae-red: rgb(var(--ae-red-rgb));
  --ae-shadow-card: 0 2px 16px rgb(var(--ae-shadow-rgb) / .5), inset 0 .5px 0 rgb(var(--ae-fg-rgb) / .03);
  --ae-shadow-card-hover: 0 4px 24px rgb(var(--ae-shadow-rgb) / .55), inset 0 .5px 0 rgb(var(--ae-fg-rgb) / .05);
  --ae-handle-idle: rgb(var(--ae-fg-rgb) / .05);
  --ae-handle-hover: rgb(var(--ae-accent-rgb) / .30);
  --ae-handle-drag: rgb(var(--ae-accent-rgb) / .60);
}
[data-theme="dotgrid"] body {
  background-image: radial-gradient(circle, rgb(var(--ae-fg-rgb) / .08) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* ── CUSTOM — User uploaded background ── */
[data-theme="custom"] {
  --ae-fg-rgb: 255 255 255;
  --ae-shadow-rgb: 0 0 0;
  --ae-accent-rgb: 138 180 248;
  --ae-green-rgb: 129 201 149;
  --ae-yellow-rgb: 253 214 99;
  --ae-red-rgb: 244 93 93;
  --ae-link: #1D9BF0;          /* Twitter 蓝 (深主题) */

  --ae-bg-base: #1a1a1a;
  --ae-glass-bg: rgb(var(--ae-shadow-rgb) / .45);
  --ae-glass-bg-hover: rgb(var(--ae-shadow-rgb) / .55);
  --ae-glass-bg-active: rgb(var(--ae-shadow-rgb) / .60);
  --ae-glass-border: rgb(var(--ae-fg-rgb) / .10);
  --ae-glass-border-hover: rgb(var(--ae-fg-rgb) / .18);
  --ae-glass-shine: linear-gradient(135deg, rgb(var(--ae-fg-rgb) / .03) 0%, transparent 50%);
  --ae-sidebar-bg: rgb(var(--ae-shadow-rgb) / .70);
  --ae-sidebar-border: rgb(var(--ae-fg-rgb) / .08);
  --ae-header-bg: rgb(var(--ae-shadow-rgb) / .65);
  --ae-text-1: #ffffff;
  --ae-text-2: rgb(var(--ae-fg-rgb) / .65);
  --ae-text-3: rgb(var(--ae-fg-rgb) / .35);
  --ae-accent: rgb(var(--ae-accent-rgb));
  --ae-accent-soft: rgb(var(--ae-accent-rgb) / .12);
  --ae-accent-glow: rgb(var(--ae-accent-rgb) / .20);
  --ae-green: rgb(var(--ae-green-rgb));
  --ae-yellow: rgb(var(--ae-yellow-rgb));
  --ae-red: rgb(var(--ae-red-rgb));
  --ae-shadow-card: 0 2px 16px rgb(var(--ae-shadow-rgb) / .5);
  --ae-shadow-card-hover: 0 4px 24px rgb(var(--ae-shadow-rgb) / .6);
  --ae-handle-idle: rgb(var(--ae-fg-rgb) / .06);
  --ae-handle-hover: rgb(var(--ae-accent-rgb) / .30);
  --ae-handle-drag: rgb(var(--ae-accent-rgb) / .60);
}
[data-theme="custom"] body {
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* ═══ RESET ═══ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { overflow: hidden; height: 100%; }
body {
  font-family: -apple-system,'SF Pro Display','Noto Sans SC','Noto Sans TC','Noto Sans JP','Helvetica Neue',sans-serif;
  background: var(--ae-bg-base); color: var(--ae-text-1);
  overflow: hidden; -webkit-font-smoothing: antialiased;
}


/* ═══ GLOBAL: hide all scrollbars, keep scrollable ═══ */
* {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
*::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
  background: transparent !important;
}

/* ═══ GRID ═══ */
.app-shell {
  position: relative; display: grid;
  overflow: hidden;
  grid-template-columns:
    var(--ae-sidebar-w) var(--ae-handle-w) 1fr var(--ae-handle-w) var(--ae-right-w);
  grid-template-rows: var(--ae-header-h) 1fr;
  height: 100vh; width: 100vw;
  transition: grid-template-columns 0.4s var(--ae-ease);
}
.app-shell.left-collapsed {
  grid-template-columns:
    var(--ae-collapsed-w) 0px 1fr var(--ae-handle-w) var(--ae-right-w);
}
.app-shell.right-collapsed {
  grid-template-columns:
    var(--ae-sidebar-w) var(--ae-handle-w) 1fr 0px 88px;
}
.app-shell.left-collapsed.right-collapsed {
  grid-template-columns:
    var(--ae-collapsed-w) 0px 1fr 0px 88px;
}

/* ═══════════════════════════════════
   HEADER
   ═══════════════════════════════════ */

.header-brand {
  grid-column: 1; grid-row: 1;
  z-index: 100;  /* v9: 跟 sidebar 同层 浮在 main 之上 */
  display: flex; align-items: center; gap: 12px;
  padding: 0 8px;
  background: var(--ae-header-bg);
  backdrop-filter: blur(var(--ae-blur)); -webkit-backdrop-filter: blur(var(--ae-blur));
  border-bottom: none;
  overflow: hidden; white-space: nowrap;
  min-width: var(--ae-collapsed-w);
}

.brand-content {
  display: flex; align-items: center; gap: 12px;
  cursor: pointer;
  overflow: hidden;
  transition: opacity .3s var(--ae-ease), max-width .4s var(--ae-ease);
  max-width: 300px;
}
.left-collapsed .brand-content {
  opacity: 0; max-width: 0; pointer-events: none;
}

.brand-icon {
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--ae-accent);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  box-shadow: 0 2px 8px var(--ae-accent-glow);
}
.brand-icon i { font-size: 0.8125rem; color: #fff; }
.brand-name { font-size: 0.875rem; font-weight: 600; color: var(--ae-text-1); letter-spacing: .5px; }
.brand-tag { font-size: 0.625rem; color: var(--ae-text-3); letter-spacing: .3px; margin-top: 1px; }

/* — Center — */
.header-center {
  grid-column: 2 / 5; grid-row: 1;
  display: flex; align-items: center;
  padding: 0 24px; min-width: 0;
  background: var(--ae-header-bg);
  backdrop-filter: blur(var(--ae-blur)); -webkit-backdrop-filter: blur(var(--ae-blur));
  border-bottom: none;
}

.breadcrumb-trail { display: flex; align-items: center; gap: 6px; font-size: 0.8125rem; color: var(--ae-text-3); }
.breadcrumb-trail .sep { font-size: 0.625rem; }
.breadcrumb-trail .current { color: var(--ae-text-2); font-weight: 500; }

/* — Right zone — */
.header-right-zone {
  position: relative;       /* v3.0.0-alpha.4: 让 .logged-out .login-btn absolute 锚定它 */
  grid-column: 5; grid-row: 1;
  display: flex; align-items: center; justify-content: flex-end;
  padding: 0 8px; gap: 6px;
  background: var(--ae-header-bg);
  min-width: 88px;
}

/* ═══════════════════════════════════
   TOGGLE BUTTONS
   ═══════════════════════════════════ */
.sidebar-toggle {
  width: var(--ae-toggle-size); height: var(--ae-toggle-size);
  border: none; border-radius: 8px;
  background: transparent; color: var(--ae-text-2);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all var(--ae-transition);
}
.sidebar-toggle:hover {
  background: var(--ae-glass-bg-hover); color: var(--ae-text-1);
}
.sidebar-toggle:active {
  background: var(--ae-glass-bg-active);
}

.sidebar-toggle svg {
  display: block;
  flex-shrink: 0;
}
.sidebar-toggle .ico-close {
  width: 14px; height: 14px;
}
.sidebar-toggle .ico-panels {
  width: 16px; height: 16px;
  display: none;
}
.sidebar-toggle.is-collapsed .ico-close { display: none; }
.sidebar-toggle.is-collapsed .ico-panels { display: block; }

/* Logo toggle */
.logo-toggle .ico-logo { display: block; border-radius: 6px; transition: opacity .15s; }
.logo-toggle .ico-close { display: none !important; }
.logo-toggle .ico-panels { display: none !important; }
.logo-toggle:hover .ico-logo { display: none !important; }
.logo-toggle:hover .ico-close { display: block !important; }
.logo-toggle.is-collapsed .ico-logo { display: none !important; }
.logo-toggle.is-collapsed .ico-close { display: none !important; }
.logo-toggle.is-collapsed .ico-panels { display: block !important; }
.logo-toggle.is-collapsed:hover .ico-panels { display: block !important; }
.logo-toggle.is-collapsed:hover .ico-close { display: none !important; }

/* Avatar button */
.avatar-wrap {
  position: relative;
}
.avatar-btn {
  width: var(--ae-toggle-size);
  height: var(--ae-toggle-size);
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--ae-transition);
}
.avatar-btn:hover {
  background: var(--ae-glass-bg-hover);
}
.avatar-img {
  width: var(--ae-toggle-size);
  height: var(--ae-toggle-size);
  border-radius: 8px;
  display: block;
}

/* ═══ NOTIFICATION BELL ═══ */
.notif-btn {
  position: relative;
  width: var(--ae-toggle-size);
  height: var(--ae-toggle-size);
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--ae-text-2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
  transition: all var(--ae-transition);
}
.notif-btn:hover {
  background: var(--ae-glass-bg-hover);
  color: var(--ae-text-1);
}
.notif-btn:active {
  background: var(--ae-glass-bg-active);
}
.notif-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ae-red, #F45D5D);
  pointer-events: none;
  animation: notifPulse 2s ease-in-out infinite;
}
.notif-dot.hidden {
  display: none;
}
@keyframes notifPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .6; transform: scale(.85); }
}

/* Notification dropdown panel */
.notif-dropdown {
  position: fixed;
  width: 320px;
  max-height: 440px;
  background: var(--ae-sidebar-bg);
  backdrop-filter: blur(var(--ae-blur));
  -webkit-backdrop-filter: blur(var(--ae-blur));
  border: 1px solid var(--ae-glass-border);
  border-radius: 14px;
  box-shadow: 0 12px 48px rgb(0 0 0 / .35), 0 2px 8px rgb(0 0 0 / .2);
  z-index: 500;
  display: none;
  flex-direction: column;
  overflow: hidden;
  user-select: none;
}
.notif-dropdown.visible {
  display: flex;
}
.notif-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--ae-glass-border);
  flex-shrink: 0;
}
.notif-header-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ae-text-1);
}
.notif-header-action {
  font-size: 0.75rem;
  color: var(--ae-accent);
  cursor: pointer;
  font-weight: 500;
  border: none;
  background: transparent;
  font-family: inherit;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background .15s;
}
.notif-header-action:hover {
  background: var(--ae-accent-soft);
}
.notif-body {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}
.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  cursor: pointer;
  transition: background var(--ae-transition);
  position: relative;
}
.notif-item:hover {
  background: var(--ae-glass-bg-hover);
}
.notif-item.unread::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ae-accent);
}
.notif-item-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--ae-glass-bg-active);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  color: var(--ae-text-2);
  flex-shrink: 0;
}
.notif-item-content {
  flex: 1;
  min-width: 0;
}
.notif-item-text {
  font-size: 0.8125rem;
  color: var(--ae-text-1);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.notif-item-time {
  font-size: 0.6875rem;
  color: var(--ae-text-3);
  margin-top: 3px;
}
.notif-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;
  color: var(--ae-text-3);
  font-size: 0.8125rem;
}
.notif-empty i {
  font-size: 1.75rem;
  margin-bottom: 12px;
  opacity: .3;
}
.notif-footer {
  border-top: 1px solid var(--ae-glass-border);
  padding: 10px 18px;
  text-align: center;
  flex-shrink: 0;
}
.notif-footer-link {
  font-size: 0.75rem;
  color: var(--ae-accent);
  cursor: pointer;
  font-weight: 500;
  border: none;
  background: transparent;
  font-family: inherit;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background .15s;
}
.notif-footer-link:hover {
  background: var(--ae-accent-soft);
}

/* ═══ MESSAGE BUBBLE ═══ */
.msg-btn {
  position: relative;
  width: var(--ae-toggle-size);
  height: var(--ae-toggle-size);
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--ae-text-2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
  transition: all var(--ae-transition);
}
.msg-btn:hover {
  background: var(--ae-glass-bg-hover);
  color: var(--ae-text-1);
}
.msg-btn:active {
  background: var(--ae-glass-bg-active);
}
.msg-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ae-red, #F45D5D);
  pointer-events: none;
  animation: notifPulse 2s ease-in-out infinite;
}
.msg-dot.hidden {
  display: none;
}

/* Message dropdown panel */
.msg-dropdown {
  position: fixed;
  width: 320px;
  max-height: 440px;
  background: var(--ae-sidebar-bg);
  backdrop-filter: blur(var(--ae-blur));
  -webkit-backdrop-filter: blur(var(--ae-blur));
  border: 1px solid var(--ae-glass-border);
  border-radius: 14px;
  box-shadow: 0 12px 48px rgb(0 0 0 / .35), 0 2px 8px rgb(0 0 0 / .2);
  z-index: 500;
  display: none;
  flex-direction: column;
  overflow: hidden;
  user-select: none;
}
.msg-dropdown.visible {
  display: flex;
}
.msg-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--ae-glass-border);
  flex-shrink: 0;
}
.msg-header-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ae-text-1);
}
.msg-header-action {
  font-size: 0.75rem;
  color: var(--ae-accent);
  cursor: pointer;
  font-weight: 500;
  border: none;
  background: transparent;
  font-family: inherit;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background .15s;
}
.msg-header-action:hover {
  background: var(--ae-accent-soft);
}
.msg-body {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}
.msg-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  cursor: pointer;
  transition: background var(--ae-transition);
  position: relative;
}
.msg-item:hover {
  background: var(--ae-glass-bg-hover);
}
.msg-item.unread::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ae-accent);
}
.msg-item-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ae-glass-bg-active);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ae-text-2);
  flex-shrink: 0;
}
.msg-item-content {
  flex: 1;
  min-width: 0;
}
.msg-item-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ae-text-1);
  margin-bottom: 2px;
}
.msg-item-text {
  font-size: 0.75rem;
  color: var(--ae-text-3);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.msg-item-time {
  font-size: 0.6875rem;
  color: var(--ae-text-3);
  flex-shrink: 0;
  white-space: nowrap;
  margin-top: 2px;
}
.msg-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;
  color: var(--ae-text-3);
  font-size: 0.8125rem;
}
.msg-empty i {
  font-size: 1.75rem;
  margin-bottom: 12px;
  opacity: .3;
}
.msg-footer {
  border-top: 1px solid var(--ae-glass-border);
  padding: 10px 18px;
  text-align: center;
  flex-shrink: 0;
}
.msg-footer-link {
  font-size: 0.75rem;
  color: var(--ae-accent);
  cursor: pointer;
  font-weight: 500;
  border: none;
  background: transparent;
  font-family: inherit;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background .15s;
}
.msg-footer-link:hover {
  background: var(--ae-accent-soft);
}

/* ═══ LOGIN BUTTON (logged-out state) ═══ */
.login-btn {
  display: none;
  align-items: center;
  gap: 4px;
  padding: 7px 18px;
  border-radius: 20px;
  border: none;
  background: var(--ae-accent);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--ae-transition);
  text-decoration: none;
  flex-shrink: 0;
}
.login-btn:hover {
  opacity: .85;
  box-shadow: 0 2px 12px var(--ae-accent-glow);
}


.app-shell.logged-out .notif-btn,
.app-shell.logged-out .msg-btn,
.app-shell.logged-out .avatar-wrap,
.app-shell.logged-out #toggleRight {
  display: none !important;
}
.app-shell.logged-out .login-btn {
  display: flex;
}
.app-shell.logged-out .brand-content {
  opacity: 0;
  max-width: 0;
  pointer-events: none;
}

/* v2.1.21: 未登录首页 logo/输入框居中修复 (最终方案 — 复用登录后 grid)
   
   前 3 次失败的方案, 本版全部作废:
     v2.1.20  padding-right: var(--ae-right-w)=260  → 过补 (实际右侧只 ~80)
     v2.1.21a padding-left: sidebar-80            → 反方向也错
     v2.1.21b position: fixed + translateX(-50%)   → 脱离文档流, 兄弟元素错位
   
   DeGao 的正解: 登录后 Logo/输入框位置是对的, 未登录直接**复用登录后 grid**.
   差异只在第 5 列: 登录后 right-collapsed=88px, 未登录=auto (login-btn 自适应宽).
   把未登录的 auto 也改成 88px, grid 完全对齐, login-btn 在 88px 列内靠右摆即可.
   
   v2.1.21 补丁 (同版内修): 88px 装不下登录按钮 (padding 18px*2 + '登录/注册'文字 ~80 = ~116px),
   按钮溢出被 sidebar 遮住. 改用 120px 即可装下, 视觉对称仍保持. */
/* v3.0.0-alpha.4 居中宪法 v3 (数学家级修复):
   ─────────────────────────────────────────────────────────────────
   废除 v2.1.21 hack — "未登录时 grid 第 5 列改 120" 是污染,
   把 header 元素 (登录按钮) 塞进 grid 列, 破坏三屏宪法.
   
   真宪法:
     - 三屏 grid 永远是 [左屏, handle, 中屏, handle, 右屏]
     - 右屏只有两态: 88 (折叠) 或 ae-right-w (展开)
     - 登录/注册按钮属于顶部栏 (header), absolute 浮起, 不占 grid 列
     - 所有居中算法基于 grid 列宽, 不被按钮污染
   
   未登录态默认: 强制右栏折叠 (.right-collapsed 已在 HTML 加上),
   grid = [260, 2, 1fr, 0, 88], 完全等同登录态右栏折叠.
   登录按钮浮在 header-right-zone 区, 不影响 grid.
   ─────────────────────────────────────────────────────────────── */
.app-shell.logged-out {
  /* grid 不再 override, 走默认右栏宽度. 登录按钮 absolute 浮起 */
}
.app-shell.logged-out.left-collapsed {
  /* 同上, 不 override */
}
.app-shell.logged-out .login-btn {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  z-index: 100;
}
/* ═══════════════════════════════════════════════════════════════════
   v3.0.0-alpha.5 居中宪法 v7 (彻底反转 — 自然 main 区居中)
   ───────────────────────────────────────────────────────────────────
   之前 v3-v6 的错误前提:
     "把内容居中到 viewport 中心"
   
   正确前提:
     "把内容居中到 main 区 (sidebar 之间) 的中心"
     这是 grid + max-width 的天然行为, 不需要任何补偿
   
   .app-main 在 grid-column:3 (sidebar 之间), padding 28 32 对称
   .home-wrap / .chat-messages 等占满 main, padding 对称
   .search-box / 内容 max-width:800 + align-items:center → 自然居中 main 区
   
   → 不需要任何 --ae-center-padding-* 补偿
   → 拖动 sidebar 宽度 → main 区跟着变 → 内容自然跟着居中
   
   v7 = 把所有 v3-v6 的 padding 补偿全部移除, 恢复自然
   ═══════════════════════════════════════════════════════════════════ */

/* v7: 不再设置 --ae-center-padding-* 变量, 内容自然在 main 区居中 */

/* Avatar dropdown */
.avatar-dropdown {
  position: fixed;
  width: 240px;
  background: var(--ae-sidebar-bg);
  backdrop-filter: blur(var(--ae-blur));
  -webkit-backdrop-filter: blur(var(--ae-blur));
  border: 1px solid var(--ae-glass-border);
  border-radius: 14px;
  padding: 6px 0;
  box-shadow: 0 12px 48px rgb(0 0 0 / .35), 0 2px 8px rgb(0 0 0 / .2);
  z-index: 500;
  display: none;
  user-select: none;
}
.avatar-dropdown.visible { display: block; }

/* User info */
.av-user {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px 10px;
}
.av-user-avatar img {
  width: 40px; height: 40px;
  border-radius: 10px; display: block;
}
.av-user-name {
  font-size: 0.875rem; font-weight: 600;
  color: var(--ae-text-1);
}
.av-user-email {
  font-size: 0.75rem;
  color: var(--ae-text-3);
  margin-top: 1px;
  font-weight: 400;
  font-family: inherit;
  direction: ltr;
  unicode-bidi: plaintext;
}

.av-divider {
  height: 1px;
  background: var(--ae-glass-border);
  margin: 6px 12px;
}

/* Plan & Points card */
.av-plan-card {
  margin: 6px 12px;
  background: linear-gradient(135deg, rgb(255 255 255 / .06) 0%, rgb(255 255 255 / .03) 100%);
  border: 1px solid rgb(255 255 255 / .12);
  border-radius: 12px;
  overflow: hidden;
}
[data-theme="light"] .av-plan-card {
  background: linear-gradient(135deg, rgb(0 0 0 / .03) 0%, rgb(0 0 0 / .01) 100%);
  border-color: rgb(0 0 0 / .08);
}
.av-plan-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 16px 14px;
}
.av-plan-label {
  font-size: 1rem; font-weight: 700; color: var(--ae-text-1);
  letter-spacing: -.2px;
}
.av-upgrade-btn {
  padding: 5px 18px; border-radius: 20px;
  border: 1.5px solid var(--ae-text-3);
  background: transparent; color: var(--ae-text-1);
  font-size: 0.75rem; font-weight: 600; font-family: inherit;
  cursor: pointer; transition: all var(--ae-transition);
  letter-spacing: .3px;
}
.av-upgrade-btn:hover {
  background: var(--ae-text-1); color: var(--ae-bg-base);
  border-color: var(--ae-text-1);
}
.av-plan-sep {
  height: 1px;
  background: rgb(255 255 255 / .06);
  margin: 0;
}
[data-theme="light"] .av-plan-sep { background: rgb(0 0 0 / .05); }
.av-points-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 16px;
  cursor: pointer; transition: background .15s;
}
.av-points-row:hover { background: rgb(255 255 255 / .04); }
[data-theme="light"] .av-points-row:hover { background: rgb(0 0 0 / .03); }
.av-points-left {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.875rem; font-weight: 700; color: var(--ae-text-1);
}
.av-points-icon {
  width: 14px; height: 14px; flex-shrink: 0;
  color: var(--ae-text-3); display: block;
}
.av-points-val {
  font-size: 1rem; font-weight: 700; color: var(--ae-text-1);
  display: flex; align-items: center;
  letter-spacing: .2px;
}
.av-points-arrow {
  font-size: 0.5625rem; margin-left: 8px; color: var(--ae-text-3);
}

/* Menu item */
.av-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  font-size: 0.875rem;
  color: var(--ae-text-2);
  cursor: pointer;
  transition: background var(--ae-transition), color var(--ae-transition);
}
.av-item:hover {
  background: var(--ae-glass-bg-hover);
  color: var(--ae-text-1);
}
.av-item i {
  width: 18px; text-align: center;
  font-size: 0.875rem;
  color: var(--ae-text-3);
  flex-shrink: 0;
}
.av-item:hover i { color: var(--ae-text-2); }

.av-item-badge {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--ae-text-3);
}
.av-chevron {
  font-size: 0.625rem !important;
  width: auto !important;
  margin-left: 4px;
}

/* Language sub-menu */
.av-lang-sub {
  display: none;
  padding: 2px 0;
  background: var(--ae-glass-bg);
  margin: 0 8px;
  border-radius: 8px;
}
.av-lang-sub.visible { display: block; }
.av-lang-opt {
  padding: 9px 16px;
  font-size: 0.8125rem;
  color: var(--ae-text-2);
  cursor: pointer;
  transition: background var(--ae-transition);
  border-radius: 6px;
  margin: 0 4px;
}
.av-lang-opt:hover {
  background: var(--ae-glass-bg-hover);
  color: var(--ae-text-1);
}

/* ═══ RESIZE HANDLES ═══ */
.resize-handle {
  grid-row: 1 / -1; width: var(--ae-handle-w);
  cursor: col-resize; position: relative; z-index: 50;
  transition: opacity .3s;
}
.resize-handle::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 50%;
  transform: translateX(-50%); width: 1px;
  background: var(--ae-sidebar-border); transition: all var(--ae-transition);
}
.resize-handle::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%); width: 2px; height: 24px; border-radius: 2px;
  background: var(--ae-handle-idle); transition: all var(--ae-transition);
}
.resize-handle:hover::after { background: var(--ae-handle-hover); height: 36px; }
.resize-handle.dragging::after { background: var(--ae-handle-drag); height: 48px; width: 2px; }
.handle-left { grid-column: 2; }
.handle-right { grid-column: 4; }
.left-collapsed .handle-left { opacity: 0; pointer-events: none; }
.right-collapsed .handle-right { opacity: 0; pointer-events: none; }

/* ═══ LEFT SIDEBAR ═══ */
.app-sidebar {
  grid-column: 1; grid-row: 2;
  z-index: 100;  /* v9: main 跨 grid 1/-1, sidebar 必须浮起避免被覆盖 */
  min-height: 0;
  background: var(--ae-sidebar-bg);
  backdrop-filter: blur(var(--ae-blur)); -webkit-backdrop-filter: blur(var(--ae-blur));
  padding: 12px 6px; overflow-y: auto; overflow-x: hidden;
  transition: opacity .3s var(--ae-ease);
}
.left-collapsed .app-sidebar { opacity: 0; pointer-events: none; overflow: hidden; }

.nav-section-label { font-size: 0.625rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ae-text-3); padding: 16px 14px 8px; }
.nav-item {
  display: flex; align-items: center; gap: 10px; padding: 0.625rem 0.875rem;
  border-radius: var(--ae-radius-s); cursor: pointer;
  transition: all var(--ae-transition); font-size: 0.875rem; font-weight: 400;
  color: var(--ae-text-2); position: relative; margin-bottom: 1px;
}
.nav-item:hover:not(.active) { background: var(--ae-glass-bg-hover); color: var(--ae-text-1); }
.nav-item.active { background: var(--ae-accent-soft); color: var(--ae-text-1); font-weight: 500; }
.nav-item.active:hover { background: var(--ae-accent-soft); }
/* v3.0.0-alpha.4: 全栈禁令 — .nav-item.active 不再渲染左竖蓝线
   (原 ::before 蓝色指示器已删, DeGao 全栈视觉宪法). 其他 active 样式保留. */
.nav-item .nav-icon { width: 20px; text-align: center; font-size: 0.8125rem; opacity: .6; flex-shrink: 0; }
.nav-item.active .nav-icon { opacity: 1; color: var(--ae-accent); }
.nav-item .nav-count { margin-left: auto; font-size: 0.6875rem; color: var(--ae-text-3); font-weight: 500; }

/* ═══ RIGHT SIDEBAR ═══ */
.app-right {
  grid-column: 5; grid-row: 1 / -1;
  min-height: 0;
  background: var(--ae-sidebar-bg);
  padding: 0;
  overflow: hidden;
  z-index: 200;
  display: flex; flex-direction: column;
  transition: opacity .3s var(--ae-ease);
}
.right-collapsed .app-right { opacity: 0; pointer-events: none; }

.right-header {
  height: var(--ae-header-h);
  display: flex; align-items: center; justify-content: flex-end;
  padding: 0 8px;
  flex-shrink: 0;
  gap: 4px;
}
/* v3.0.0-alpha.4: 右栏顶部搜索 input (像素级对齐 right-body 14px 左缩进) */
.right-search-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 36px;
  padding: 0 12px 0 14px;
  background: transparent;
  border: none;
  outline: none;
  color: var(--ae-text-1);
  font-size: 14px;
  font-family: inherit;
}
.right-search-input::placeholder { color: var(--ae-text-3); }

/* ═══════════════════════════════════════════════════════════════
   v3.0.0-alpha.4: 产品页右栏 (/t/{id}) 7 块体系
   严格遵宪: 0 inline 几何, 全部用 token (ae-text-1/2/3 / ae-glass-bg* / ae-radius-*)
   ═══════════════════════════════════════════════════════════════ */

.topic-sb-section {
  margin-bottom: 24px;
}
.topic-sb-section:last-child {
  margin-bottom: 0;
}

.topic-sb-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ae-text-1);
  margin: 0 0 10px 0;
  line-height: 1.3;
}

/* 排名卡片 (今日发布 N #1 + 切换 + 赞按钮) */
.topic-sb-rank-card {
  background: var(--ae-glass-bg);
  border-radius: var(--ae-radius-m);
  padding: 14px;
}
.topic-sb-rank-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 14px;
}
.topic-sb-rank-num {
  font-size: 24px;
  font-weight: 700;
  color: var(--ae-text-1);
  line-height: 1;
}
.topic-sb-rank-hash {
  color: var(--ae-text-3);
  font-weight: 400;
  margin-right: 4px;
}
.topic-sb-rank-label {
  font-size: 12px;
  color: var(--ae-text-3);
  font-weight: 400;
  margin-top: 4px;
}
.topic-sb-rank-nav {
  display: flex;
  gap: 6px;
}
.topic-sb-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  background: var(--ae-glass-bg-hover);
  color: var(--ae-text-2);
  cursor: pointer;
  border-radius: 50%;
  font-size: 11px;
  transition: background var(--ae-transition);
}
.topic-sb-nav-btn:hover {
  background: var(--ae-glass-bg-active);
  color: var(--ae-text-1);
}
.topic-sb-like-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 18px;
  background: var(--ae-glass-bg-hover);
  border: none;
  border-radius: 999px;
  color: var(--ae-text-1);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--ae-transition);
}
.topic-sb-like-btn:hover {
  background: var(--ae-glass-bg-active);
}

/* 行项 (收藏/分享 + 公司信息 + 创建者 + 数据统计) */
.topic-sb-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  color: var(--ae-text-1);
  text-decoration: none;
  font-size: 13px;
  line-height: 1.4;
  transition: color var(--ae-transition);
}
.topic-sb-row > i {
  width: 18px;
  color: var(--ae-text-2);
  font-size: 13px;
  flex-shrink: 0;
  text-align: center;
}
a.topic-sb-row:hover {
  color: var(--ae-text-1);
}
a.topic-sb-row:hover > i {
  color: var(--ae-text-1);
}
.topic-sb-row-static {
  cursor: default;
}
.topic-sb-empty {
  font-size: 12px;
  color: var(--ae-text-3);
  padding: 6px 0;
}

/* 类似产品行 */
.topic-sb-related {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  text-decoration: none;
  border-bottom: 1px solid var(--ae-glass-border);
  transition: opacity var(--ae-transition);
}
.topic-sb-related:last-child {
  border-bottom: none;
}
.topic-sb-related:hover {
  opacity: 0.85;
}
.topic-sb-related-logo {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--ae-glass-bg);
}
.topic-sb-related-logo-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ae-text-3);
  font-size: 12px;
}
.topic-sb-related-text {
  flex: 1;
  min-width: 0;
}
.topic-sb-related-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ae-text-1);
  line-height: 1.3;
  margin-bottom: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topic-sb-related-summary {
  font-size: 12px;
  color: var(--ae-text-3);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.right-body {
  padding: 0 14px 16px;
  overflow-y: auto; overflow-x: hidden;
  flex: 1;
}

.right-section-label { font-size: 0.625rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ae-text-3); padding: 4px 0 12px; }
.right-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--ae-radius-s); margin-bottom: 2px; font-size: 0.8125rem; color: var(--ae-text-2); transition: background var(--ae-transition); cursor: default; }
.right-item:hover { background: var(--ae-glass-bg); }
.ri-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; animation: breathe 3s ease-in-out infinite; }
.ri-label { flex: 1; }
.ri-val { font-size: 0.6875rem; color: var(--ae-text-3); font-variant-numeric: tabular-nums; }
.right-divider { height: 1px; background: var(--ae-glass-border); margin: 12px 0; }

/* ═══ MAIN ═══ */
/* v3.0.0-alpha.5 居中宪法 v10 (终极正确理解):
   ────────────────────────────────────────────
   "从展开的 sidebar 开始到对面的居中"
   
   核心: 真展开的 sidebar 才算占位 (推内容), 折叠的不算
   - 左展 (260) 算占位 → 内容左起点 = 260
   - 左折 (52, 只有 logo 浮起) 不算 → 内容左起点 = 0
   - 右展 (260) 算占位 → 内容右终点 = vp - 260
   - 右折 (88, 只有登录按钮浮起) 不算 → 内容右终点 = vp
   
   四态:
   左展+右展: [260, vp-260], 中心 = vp/2  ✓ (左右对称)
   左展+右折: [260, vp],     中心 = vp/2 + 130 (内容区中心)
   左折+右展: [0, vp-260],   中心 = vp/2 - 130
   左折+右折: [0, vp],       中心 = vp/2  ✓ (= viewport 中心)
   ────────────────────────────────────────────
   实现: main 跨整个 grid, padding 仅在 sidebar 真展开时补 sidebar 宽度
        左折时 padding-left = 0, 右折时 padding-right = 0
   ════════════════════════════════════════════ */
.app-main {
  grid-column: 1 / -1; grid-row: 2;
  min-height: 0;
  padding: 28px var(--ae-pad-right, 260px) 28px var(--ae-pad-left, 260px);
  overflow-y: auto;
}

/* main 左右 padding (= 真展开 sidebar 宽度, 折叠时为 0) */
.app-shell {
  --ae-pad-left: var(--ae-sidebar-w, 260px);
  --ae-pad-right: var(--ae-right-w, 260px);
}
.app-shell.left-collapsed {
  --ae-pad-left: 0px;
}
.app-shell.right-collapsed {
  --ae-pad-right: 0px;
}

.app-main.no-scroll { overflow: hidden; }

.page-head { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
.page-head-icon { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.125rem; background: var(--ae-accent-soft); color: var(--ae-accent); flex-shrink: 0; }
.page-head-text h2 { font-size: 1.25rem; font-weight: 600; color: var(--ae-text-1); line-height: 1.2; }
.page-head-text p { font-size: 0.8125rem; color: var(--ae-text-3); margin-top: 2px; }

.stats-row { display: flex; gap: 12px; margin-bottom: 28px; flex-wrap: wrap; }
.stat-glass { background: var(--ae-glass-bg); border: 1px solid var(--ae-glass-border); border-radius: var(--ae-radius-m); padding: 14px 20px; display: flex; align-items: center; gap: 12px; backdrop-filter: blur(var(--ae-blur-s)); position: relative; overflow: hidden; }
.stat-glass::before { content: ''; position: absolute; inset: 0; background: var(--ae-glass-shine); pointer-events: none; }
.stat-glass .stat-val { font-size: 1.25rem; font-weight: 600; color: var(--ae-text-1); font-variant-numeric: tabular-nums; }
.stat-glass .stat-lbl { font-size: 0.75rem; color: var(--ae-text-3); }

.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.card-grid.overview { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.glass-card { background: var(--ae-glass-bg); border: 1px solid var(--ae-glass-border); border-radius: var(--ae-radius-m); padding: 20px; cursor: pointer; position: relative; overflow: hidden; backdrop-filter: blur(var(--ae-blur-s)); box-shadow: var(--ae-shadow-card); transition: background var(--ae-transition), border-color var(--ae-transition), box-shadow var(--ae-transition); }
.glass-card::before { content: ''; position: absolute; inset: 0; background: var(--ae-glass-shine); pointer-events: none; }
.glass-card:hover { border-color: var(--ae-glass-border-hover); box-shadow: var(--ae-shadow-card-hover); background: var(--ae-glass-bg-hover); }
.glass-card .card-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; }
.glass-card .card-ico { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1rem; }
.glass-card .card-badge { display: flex; align-items: center; gap: 5px; font-size: 0.625rem; color: var(--ae-green); font-weight: 500; }
.glass-card .card-badge .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ae-green); animation: breathe 3s ease-in-out infinite; }
.glass-card .card-name { font-size: 0.875rem; font-weight: 600; color: var(--ae-text-1); margin-bottom: 3px; }
.glass-card .card-id { font-size: 0.6875rem; color: var(--ae-text-3); font-variant-numeric: tabular-nums; }
.glass-card .card-count { font-size: 0.6875rem; color: var(--ae-text-3); margin-top: 8px; }

@keyframes breathe { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.85)} }

.ico-traffic{background:rgb(66 133 244 / .10);color:#4285F4}
.ico-finance{background:rgb(66 133 244 / .10);color:#4285F4}
.ico-currency{background:rgb(56 132 244 / .10);color:#3884F4}
.ico-commodity{background:rgb(255 173 31 / .10);color:#FFAD1F}
.ico-energy{background:rgb(0 186 124 / .10);color:#00BA7C}
.ico-macro{background:rgb(244 93 93 / .10);color:#F45D5D}
.ico-industry{background:rgb(96 165 250 / .10);color:#60A5FA}
.ico-geo{background:rgb(239 83 80 / .10);color:#EF5350}
.ico-society{background:rgb(79 170 255 / .10);color:#4FAAFF}
.ico-tech{background:rgb(0 186 124 / .10);color:#00BA7C}
.ico-nature{background:rgb(74 222 128 / .10);color:#4ADE80}

body,.header-brand,.header-center,.header-right-zone,.app-sidebar,.app-right,.glass-card,.stat-glass,.nav-item { transition: background var(--ae-transition), color var(--ae-transition), border-color var(--ae-transition), box-shadow var(--ae-transition); }
.app-main { animation: fadeIn .25s ease; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.drag-overlay { display:none; position:fixed; inset:0; z-index:9999; cursor:col-resize; }
.drag-overlay.active { display:block; }

/* ═══════════════════════════════════
   HOMEPAGE
   ═══════════════════════════════════ */
.home-wrap {
  display: flex;
  flex-direction: column;     /* v3.0.0-alpha.5: 列方向, 让 search-box 后能接 .home-feed (评论流) */
  align-items: center;        /* 列方向 align-items 控制水平居中, search-box / home-feed 都居中 */
  /* v3.0.0-alpha.5 居中宪法 v4: padding-left/right 由 .app-shell 的 --ae-center-padding-* 变量驱动
     这里只设 padding-top, 不再覆盖 padding shorthand (避免压死居中变量) */
  padding-top: 18vh;          /* 22vh → 18vh: 给评论流让空间, 搜索框稍微上移 */
}

.search-box {
  width: 100%;
  max-width: 800px;            /* v3.0.0-alpha.4: 640 → 800, 跟 chat-input / topic-page 视觉宪法对齐 (跳页时不跳动) */
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.home-logo {
  font-family: 'Inter', 'Product Sans', -apple-system, 'Helvetica Neue', sans-serif;
  font-size: 2.625rem;
  font-weight: 700;
  color: var(--ae-text-1);
  letter-spacing: -0.5px;
  margin-bottom: 28px;
  text-align: center;
  user-select: none;
  /* v2.1.25.2: 固定行高, 防止中英文切换时高度跳动 (e.g. ChatDLM ↔ 无痕对话) */
  line-height: 1.2;
  min-height: calc(2.625rem * 1.2);
}

.search-box-inner {
  position: relative;
  width: 100%;
}

.search-input-wrap {
  position: relative;
  width: 100%;
  background: var(--ae-glass-bg);
  border: 1px solid transparent;       /* v3.0.0-alpha.5: 默认透明, focus 才显示线 */
  border-radius: 16px;
  backdrop-filter: blur(var(--ae-blur-s));
  -webkit-backdrop-filter: blur(var(--ae-blur-s));
  transition: border-color var(--ae-transition);
}
/* v3.0.0-alpha.5: 键入时才显示 1px 边框 (用户聚焦反馈, 平时无线感) */
.search-input-wrap:focus-within {
  border-color: var(--ae-glass-border);
}
.search-input-wrap.has-dropdown {
  border-radius: 16px 16px 0 0;
}

.search-input {
  width: 100%;
  padding: 18px 20px 4px;
  background: transparent;
  border: none;
  outline: none;
  font-size: 1rem;
  font-family: inherit;
  color: var(--ae-text-1);
  resize: none;
  overflow: hidden;
  min-height: 48px;
  max-height: 120px;
  line-height: 1.5;
}
.search-input::placeholder {
  color: var(--ae-text-3);
}

.search-toolbar {
  display: flex;
  align-items: center;
  height: 50px;
  padding: 0 10px 0;
  gap: 6px;
}
.search-toolbar-btn {
  width: 34px; height: 34px;
  border: 1px solid var(--ae-glass-border);
  border-radius: 50%;
  background: transparent;
  color: var(--ae-text-3);
  cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.875rem;
  transition: all var(--ae-transition);
}
.search-toolbar-btn:hover {
  border-color: var(--ae-glass-border-hover);
  color: var(--ae-text-2);
  background: var(--ae-glass-bg-hover);
}
.search-toolbar-btn.borderless {
  border: none;
}
.search-toolbar-btn.borderless:hover {
  background: var(--ae-glass-bg-hover);
}
.search-toolbar-right {
  margin-left: auto;
  display: flex; align-items: center; gap: 4px; height: 34px;
}

/* Circle icon buttons */
.search-circle {
  border: none !important;
  background: transparent;
  color: var(--ae-text-3);
  font-size: 1rem;
  transition: all var(--ae-transition);
}
.search-circle:hover {
  background: var(--ae-glass-bg-active);
  color: var(--ae-text-1);
}
button.search-circle.active {
  background: #e8eaed !important;
  color: #1f1f1f !important;
  box-shadow: 0 0 0 0 transparent;
}
[data-theme="dim"] button.search-circle.active {
  background: rgb(255 255 255 / .93) !important;
  color: #15202B !important;
}
[data-theme="light"] button.search-circle.active {
  background: rgb(0 0 0 / .88) !important;
  color: #fff !important;
}
button.search-circle.active:hover {
  opacity: .85;
}

/* Search expand button */
.search-expand-btn {
  position: absolute; top: 8px; right: 10px; z-index: 2;
  width: 28px; height: 28px; border-radius: 8px;
  border: none; background: transparent;
  color: var(--ae-text-3); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; transition: all .15s;
  opacity: 0; pointer-events: none;
}
.search-expand-btn.visible { opacity: 1; pointer-events: auto; }
.search-expand-btn:hover { background: var(--ae-glass-bg-hover); color: var(--ae-text-2); }

/* Search fullscreen mode */
.home-wrap.fullscreen-mode {
  align-items: stretch !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  height: 100% !important;
  overflow: hidden !important;
}
.home-wrap.fullscreen-mode .search-box {
  max-width: 100% !important;
  width: 100% !important;
  height: 100% !important;
  display: flex; flex-direction: column;
}
.home-wrap.fullscreen-mode .search-box .home-logo {
  display: none;
}
.home-wrap.fullscreen-mode .search-box-inner {
  flex: 1; display: flex; flex-direction: column;
  min-height: 0;
}
.home-wrap.fullscreen-mode .search-input-wrap {
  flex: 1; display: flex; flex-direction: column;
  min-height: 0;
}
.home-wrap.fullscreen-mode .search-input {
  flex: 1 !important;
  max-height: none !important;
  overflow-y: auto !important;
  min-height: 0 !important;
  padding-right: 44px;
}
.home-wrap.fullscreen-mode .search-toolbar {
  flex-shrink: 0;
}

/* Dropdown */
.search-dropdown {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  background: var(--ae-glass-bg);
  border: 1px solid var(--ae-glass-border);
  border-top: 1px solid var(--ae-glass-border);
  border-radius: 0 0 16px 16px;
  backdrop-filter: blur(var(--ae-blur-s));
  -webkit-backdrop-filter: blur(var(--ae-blur-s));
  overflow: hidden;
  z-index: 10;
  display: none;
}
.search-dropdown.visible { display: block; }

.dropdown-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px;
  font-size: 0.875rem;
  color: var(--ae-text-2);
  cursor: pointer;
  transition: background var(--ae-transition);
}
.dropdown-item:hover {
  background: var(--ae-glass-bg-hover);
  color: var(--ae-text-1);
}
.dropdown-item i {
  font-size: 0.8125rem;
  color: var(--ae-text-3);
  width: 18px; text-align: center;
  flex-shrink: 0;
}
.dropdown-item strong {
  font-weight: 600;
  color: var(--ae-text-1);
}
.dropdown-item:last-child {
  border-radius: 0 0 16px 16px;
}

/* ═══ SIDEBAR DIVIDER ═══ */
.nav-divider {
  height: 1px;
  background: var(--ae-glass-border);
  margin: 8px 14px;
}
.sb-action {
  color: var(--ae-text-1) !important;
  font-weight: 500;
}

/* ═══ SETTINGS MODAL ═══ */
.settings-modal-bg { display:none;position:fixed;inset:0;z-index:600;background:rgb(0 0 0 / .55);backdrop-filter:blur(8px);align-items:center;justify-content:center }
.settings-modal-bg.visible { display:flex }
.settings-modal { width:90%;max-width:820px;height:75vh;background:var(--ae-sidebar-bg);border:1px solid var(--ae-glass-border);border-radius:16px;display:flex;overflow:hidden;box-shadow:0 24px 80px rgb(0 0 0 / .5) }

/* Settings sidebar */
.settings-sidebar { width:220px;flex-shrink:0;padding:24px 12px;border-right:1px solid var(--ae-glass-border);display:flex;flex-direction:column;gap:2px }
.settings-sidebar-title { font-size:0.875rem;font-weight:700;color:var(--ae-text-1);padding:0 12px 16px }
.settings-nav-item { display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;font-size:0.875rem;color:var(--ae-text-2);cursor:pointer;transition:all .15s;font-weight:500 }
.settings-nav-item:hover { background:var(--ae-glass-bg-hover);color:var(--ae-text-1) }
.settings-nav-item.active { background:var(--ae-glass-bg-active);color:var(--ae-text-1) }
.settings-nav-item i { width:18px;text-align:center;font-size:0.875rem;color:var(--ae-text-3);flex-shrink:0 }
.settings-nav-item.active i { color:var(--ae-text-1) }

/* Settings content */
.settings-content { flex:1;display:flex;flex-direction:column;min-width:0 }
.settings-content-head { display:flex;align-items:center;justify-content:space-between;padding:24px 28px 0;flex-shrink:0 }
.settings-content-head h2 { font-size:1.25rem;font-weight:700;color:var(--ae-text-1) }
.settings-content-body { flex:1;overflow-y:auto;padding:20px 28px 28px }

/* Sections */
.set-section { margin-bottom:28px }
.set-section h3 { font-size:1rem;font-weight:700;color:var(--ae-text-1);margin-bottom:16px }

/* Theme cards */
.set-theme-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:16px }
.set-theme-card { cursor:pointer;border-radius:14px;border:2px solid transparent;padding:4px;transition:all .2s }
.set-theme-card:hover { border-color:var(--ae-glass-border-hover) }
.set-theme-card.active { border-color:var(--ae-accent) }
.set-theme-preview { height:90px;border-radius:10px;position:relative;overflow:hidden;padding:14px }
.set-theme-preview.light { background:#f5f5f5 }
.set-theme-preview.dim { background:#15202B }
.set-theme-preview.dark { background:#1f1f1f }
.set-theme-preview.eyecare { background:#262624 }
.set-theme-preview.dotgrid { background:#000;background-image:radial-gradient(circle,rgb(255 255 255 / .12) 1px,transparent 1px);background-size:12px 12px }
.set-theme-preview.custom { background:linear-gradient(135deg,#2a2a3a 0%,#1a2a2a 50%,#2a1a2a 100%) }
.stp-bar { height:8px;width:60%;border-radius:4px;margin-bottom:8px }
.stp-line { height:6px;width:80%;border-radius:3px }
.light .stp-bar { background:#ddd }
.light .stp-line { background:#e8e8e8 }
.dim .stp-bar { background:#253341 }
.dim .stp-line { background:#1e2d3d }
.dark .stp-bar { background:#333 }
.dark .stp-line { background:#2a2a2a }
.eyecare .stp-bar { background:#3a3832 }
.eyecare .stp-line { background:#32302c }
.dotgrid .stp-bar { background:#222 }
.dotgrid .stp-line { background:#1a1a1a }
.custom .stp-bar { background:rgb(255 255 255 / .15) }
.custom .stp-line { background:rgb(255 255 255 / .10) }
.stp-foot { position:absolute;bottom:8px;left:14px;right:14px;display:flex;align-items:center;justify-content:space-between }
.stp-dot { width:10px;height:10px;border-radius:50%;background:var(--ae-text-3);opacity:.4 }
.stp-btn { font-size:0.5rem;font-weight:700;padding:3px 8px;border-radius:4px;letter-spacing:.3px }
.light .stp-btn { background:#222;color:#fff }
.dark .stp-btn { background:#fff;color:#222 }
.dim .stp-btn { background:#fff;color:#15202B }
.eyecare .stp-btn { background:#e0dcd4;color:#262624 }
.dotgrid .stp-btn { background:#fff;color:#000 }
.custom .stp-btn { background:rgb(255 255 255 / .8);color:#222 }
.stp-upload-icon { font-size:1.375rem;color:rgb(255 255 255 / .25) }
.set-theme-label { text-align:center;padding:10px 0 4px;font-size:0.75rem;color:var(--ae-text-3);display:flex;align-items:center;justify-content:center;gap:6px }
.set-theme-card.active .set-theme-label { color:var(--ae-accent) }

/* Font size slider */
.set-fontsize-row { display:flex;align-items:center;gap:14px;padding:4px 0 }
.set-fs-label { font-weight:700;color:var(--ae-text-3);flex-shrink:0 }
.set-fs-sm { font-size:0.8125rem }
.set-fs-lg { font-size:1.375rem }
.set-fs-slider {
  flex:1;-webkit-appearance:none;appearance:none;height:4px;
  background:var(--ae-accent);border-radius:2px;outline:none;cursor:pointer;
}
.set-fs-slider::-webkit-slider-thumb {
  -webkit-appearance:none;width:18px;height:18px;border-radius:50%;
  background:var(--ae-accent);border:3px solid var(--ae-bg-base);
  box-shadow:0 0 0 2px var(--ae-accent);cursor:pointer;
}
.set-fs-slider::-moz-range-thumb {
  width:18px;height:18px;border-radius:50%;
  background:var(--ae-accent);border:3px solid var(--ae-bg-base);
  box-shadow:0 0 0 2px var(--ae-accent);cursor:pointer;
}

/* Color dots */
.set-color-row { display:flex;gap:16px;padding:4px 0 }
.set-color-dot {
  width:40px;height:40px;border-radius:50%;border:none;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all .2s;position:relative;
}
.set-color-dot i { color:#fff;font-size:0.875rem;opacity:0;transition:opacity .2s }
.set-color-dot.active i { opacity:1 }
.set-color-dot:hover { transform:scale(1.1) }
.set-color-dot.active { box-shadow:0 0 0 3px var(--ae-bg-base),0 0 0 5px currentColor }

/* Font family cards */
.set-font-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:12px }
.set-font-card {
  cursor:pointer;border-radius:14px;
  border:2px solid var(--ae-glass-border);
  padding:2px;transition:all .2s;
  text-align:center;
}
.set-font-card:hover { border-color:var(--ae-glass-border-hover) }
.set-font-card.active { border-color:var(--ae-accent) }
.set-font-preview {
  height:80px;border-radius:10px;
  background:var(--ae-glass-bg);
  display:flex;align-items:center;justify-content:center;
  font-size:2rem;font-weight:400;color:var(--ae-text-1);
}
.set-font-label {
  text-align:center;padding:8px 0 4px;
  font-size:0.6875rem;color:var(--ae-text-3);
}
.set-font-card.active .set-font-label { color:var(--ae-accent) }

/* Rows & fields */
.set-row { display:flex;align-items:center;justify-content:space-between;gap:16px;padding:4px 0 }
.set-row-text { font-size:0.8125rem;color:var(--ae-text-2);line-height:1.5;flex:1 }
.set-link { color:var(--ae-accent);text-decoration:none }
.set-link:hover { text-decoration:underline }
.set-field-row { display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--ae-glass-border) }
.set-field-label { font-size:0.8125rem;color:var(--ae-text-3);width:80px;flex-shrink:0 }
.set-field-val { font-size:0.875rem;color:var(--ae-text-1);flex:1 }
.set-field-btn { border:none;background:transparent;color:var(--ae-accent);font-size:0.8125rem;font-family:inherit;cursor:pointer;font-weight:500;padding:4px 8px;border-radius:6px;transition:background .15s }
.set-field-btn:hover { background:var(--ae-accent-soft) }

/* Danger zone */
.set-danger { border:1px solid rgb(244 93 93 / .2);border-radius:12px;padding:16px !important;background:rgb(244 93 93 / .03) }
.set-danger h3 { color:var(--ae-red) !important;margin-bottom:8px }
.set-danger-btn { border:1px solid var(--ae-red);background:transparent;color:var(--ae-red);font-size:0.75rem;font-weight:600;font-family:inherit;padding:6px 16px;border-radius:8px;cursor:pointer;transition:all .15s;flex-shrink:0 }
.set-danger-btn:hover { background:var(--ae-red);color:#fff }

/* Points balance */
.set-pts-balance { display:flex;align-items:baseline;gap:8px;padding:20px 0 }
.set-pts-num { font-size:2.25rem;font-weight:800;color:var(--ae-text-1);letter-spacing:-.5px }
.set-pts-unit { font-size:0.875rem;color:var(--ae-text-3);font-weight:500 }

/* Empty state */
.set-empty { text-align:center;color:var(--ae-text-3);font-size:0.8125rem;padding:32px 0;display:flex;flex-direction:column;align-items:center;gap:4px }

/* Cron button */
.set-cron-btn { display:flex;align-items:center;padding:10px 20px;border-radius:10px;border:1px solid var(--ae-glass-border);background:transparent;color:var(--ae-text-1);font-size:0.8125rem;font-weight:500;cursor:pointer;font-family:inherit;transition:all .15s;margin-top:12px }
.set-cron-btn:hover { background:var(--ae-glass-bg-hover);border-color:var(--ae-glass-border-hover) }

/* ═══ ADD MENU POPOVER ═══ */
.add-popover{
  position:absolute;z-index:200;
  display:none;flex-direction:row;
  background:var(--ae-sidebar-bg);
  border:1px solid var(--ae-glass-border);
  border-radius:12px;box-shadow:0 12px 48px rgb(0 0 0 / .4);
  min-width:220px;padding:6px 0;
}
.add-popover.visible{display:flex}
.add-menu-main{display:flex;flex-direction:column;min-width:220px}
.add-item{
  display:flex;align-items:center;gap:12px;
  padding:9px 16px;font-size:0.8125rem;color:var(--ae-text-1);
  cursor:pointer;transition:background .12s;white-space:nowrap;
}
.add-item:hover{background:var(--ae-glass-bg-hover)}
.add-item i:first-child{width:18px;text-align:center;font-size:0.875rem;color:var(--ae-text-3)}
.add-item .av-chevron{margin-left:auto;font-size:0.625rem;color:var(--ae-text-3)}
.add-item .add-check{margin-left:auto;font-size:0.6875rem;color:var(--ae-accent)}
.add-active{color:var(--ae-accent) !important}
#addWebIcon.active{color:var(--ae-accent)}

/* Add sub menus */
.add-sub{
  display:none;flex-direction:column;
  min-width:180px;padding:6px 0;
  border-left:1px solid var(--ae-glass-border);
}
.add-sub.visible{display:flex}
.add-sub-item{
  display:flex;align-items:center;gap:8px;
  padding:9px 16px;font-size:0.8125rem;color:var(--ae-text-1);
  cursor:pointer;transition:background .12s;white-space:nowrap;
}
.add-sub-item:hover{background:var(--ae-glass-bg-hover)}

/* Style options */
.add-style-opt .add-style-check{margin-left:auto;font-size:0.6875rem;color:var(--ae-accent);display:none}
.add-style-opt.active .add-style-check{display:inline}
.add-style-opt.active span{color:var(--ae-accent)}

/* ═══ CONNECTOR MODAL ═══ */
.conn-modal-bg { display:none;position:fixed;inset:0;z-index:600;background:rgb(0 0 0 / .55);backdrop-filter:blur(8px);align-items:center;justify-content:center }
.conn-modal-bg.visible { display:flex }
.conn-modal { width:90%;max-width:720px;height:80vh;background:var(--ae-sidebar-bg);border:1px solid var(--ae-glass-border);border-radius:16px;display:flex;flex-direction:column;box-shadow:0 24px 80px rgb(0 0 0 / .5);overflow:hidden }
.conn-modal-head { display:flex;align-items:center;justify-content:space-between;padding:20px 24px 0;flex-shrink:0 }
.conn-modal-head h3 { font-size:1.125rem;font-weight:700;color:var(--ae-text-1) }
.conn-modal-close { width:28px;height:28px;border-radius:8px;border:none;background:transparent;color:var(--ae-text-3);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1rem;transition:all var(--ae-transition) }
.conn-modal-close:hover { background:var(--ae-glass-bg-hover);color:var(--ae-text-1) }
.conn-tabs { display:flex;align-items:center;padding:16px 24px 0;gap:0;border-bottom:1px solid var(--ae-glass-border);flex-shrink:0 }
.conn-tab { padding:10px 16px;border:none;background:transparent;color:var(--ae-text-3);font-size:0.8125rem;font-weight:500;cursor:pointer;font-family:inherit;border-bottom:2px solid transparent;transition:all var(--ae-transition);margin-bottom:-1px }
.conn-tab.active { color:var(--ae-text-1);border-bottom-color:var(--ae-text-1) }
.conn-tab:hover:not(.active) { color:var(--ae-text-2) }
.conn-search { margin-left:auto;display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:8px;background:var(--ae-glass-bg);border:1px solid var(--ae-glass-border);margin-bottom:4px;flex-shrink:0 }
.conn-search i { font-size:0.75rem;color:var(--ae-text-3) }
.conn-search input { border:none;background:transparent;outline:none;font-size:0.75rem;font-family:inherit;color:var(--ae-text-1);width:80px }
.conn-search input::placeholder { color:var(--ae-text-3) }
.conn-modal-body { flex:1;overflow-y:auto;padding:8px 0 16px }

/* Section labels */
.conn-section-label { font-size:0.75rem;font-weight:500;color:var(--ae-text-3);padding:16px 24px 10px }

/* Apps tab */
.conn-row { display:flex;align-items:center;gap:12px;padding:12px 24px;cursor:pointer;transition:background .15s }
.conn-row:hover { background:var(--ae-glass-bg-hover) }
.conn-ico { width:32px;height:32px;border-radius:8px;background:var(--ae-glass-bg-active);display:flex;align-items:center;justify-content:center;font-size:1rem;color:var(--ae-text-2);flex-shrink:0 }
.conn-name { flex:1;font-size:0.875rem;color:var(--ae-text-1);font-weight:500 }
.conn-badge { font-size:0.5625rem;padding:2px 6px;border-radius:4px;background:var(--ae-glass-bg-active);color:var(--ae-text-3);font-weight:600;margin-left:6px;vertical-align:middle }
.conn-action { border:none;background:transparent;color:var(--ae-text-3);font-size:0.8125rem;font-family:inherit;cursor:pointer;padding:4px 8px;border-radius:6px;transition:all var(--ae-transition) }
.conn-action:hover { color:var(--ae-text-1);background:var(--ae-glass-bg-hover) }

/* API tab */
.conn-hint { padding:12px 24px;font-size:0.75rem;color:var(--ae-text-3);background:var(--ae-glass-bg);margin:12px 20px;border-radius:10px }
.conn-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:0 20px 16px }
.conn-card { display:flex;align-items:center;gap:12px;padding:16px;border-radius:12px;background:var(--ae-glass-bg);border:1px solid var(--ae-glass-border);cursor:pointer;transition:all var(--ae-transition) }
.conn-card:hover { border-color:var(--ae-glass-border-hover);background:var(--ae-glass-bg-hover) }
.conn-card-add { justify-content:center;color:var(--ae-text-2);font-size:0.8125rem;font-weight:500;border-style:dashed }
.conn-card-ico { width:36px;height:36px;border-radius:10px;background:var(--ae-glass-bg-active);display:flex;align-items:center;justify-content:center;font-size:1rem;color:var(--ae-text-2);flex-shrink:0 }
.conn-card-info { flex:1;min-width:0 }
.conn-card-name { font-size:0.8125rem;font-weight:600;color:var(--ae-text-1) }
.conn-card-desc { font-size:0.625rem;color:var(--ae-text-3);margin-top:2px;line-height:1.4;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical }

/* MCP tab */
.conn-empty { display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 20px;color:var(--ae-text-3) }
.conn-empty-icon { font-size:2.25rem;margin-bottom:12px;opacity:.4 }
.conn-empty p { font-size:0.8125rem;margin-bottom:16px }
.conn-empty-btn { display:flex;align-items:center;padding:10px 20px;border-radius:10px;border:1px solid var(--ae-glass-border);background:transparent;color:var(--ae-text-1);font-size:0.8125rem;font-weight:500;cursor:pointer;font-family:inherit;transition:all var(--ae-transition) }
.conn-empty-btn:hover { background:var(--ae-glass-bg-hover);border-color:var(--ae-glass-border-hover) }

.agent-popover {
  position: fixed;
  width: 240px;
  background: var(--ae-sidebar-bg);
  backdrop-filter: blur(var(--ae-blur));
  -webkit-backdrop-filter: blur(var(--ae-blur));
  border: 1px solid var(--ae-glass-border);
  border-radius: 14px;
  padding: 6px 0;
  box-shadow: 0 12px 48px rgb(0 0 0 / .35), 0 2px 8px rgb(0 0 0 / .2);
  z-index: 500;
  display: none;
}
.agent-popover.visible { display: block; }

.agent-sub-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--ae-text-3);
  letter-spacing: 0.5px;
  padding: 8px 16px 4px;
}

.agent-back i { font-size: 0.75rem !important; }

/* Toggle row */
.agent-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 16px;
  font-size: 0.875rem;
  color: var(--ae-text-2);
}

/* Toggle switch */
.toggle-switch {
  position: relative;
  width: 40px; height: 22px;
  display: inline-block;
  flex-shrink: 0;
}
.toggle-switch input {
  opacity: 0; width: 0; height: 0;
}
.toggle-slider {
  position: absolute; inset: 0;
  background: var(--ae-glass-bg-active);
  border-radius: 22px;
  cursor: pointer;
  transition: background var(--ae-transition);
}
.toggle-slider::before {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: transform var(--ae-transition);
}
.toggle-switch input:checked + .toggle-slider {
  background: var(--ae-accent);
}
.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(18px);
}

@media(max-width:960px) {
  .app-shell { grid-template-columns: var(--ae-collapsed-w) 0px 1fr 0px var(--ae-collapsed-w) !important; }
  .app-sidebar,.app-right,.resize-handle { display:none!important; }
  .brand-content { display:none!important; }
  .header-center { padding: 0 16px; }
  .app-main { padding: 20px 16px; }
}

/* Incognito button */
.incognito-btn svg { display: block; }
.incognito-btn { position: relative; }
.incognito-btn.on::after {
  content: '';
  position: absolute;
  top: 6px; right: 6px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ae-red);
}

/* AIGC expandable icon buttons */
.aigc-expand {
  position: relative;
  width: 34px; height: 34px;
  justify-content: flex-start !important;
  padding-left: 9px !important;
  border-radius: 17px !important;
  overflow: hidden;
  transition: width .3s cubic-bezier(.25,.1,.25,1), background .15s;
}
.aigc-expand svg { display: block; flex-shrink: 0; }
.aigc-label {
  opacity: 0;
  font-size: 0.6875rem; font-weight: 600; font-family: inherit;
  white-space: nowrap;
  margin-left: 6px;
  color: var(--ae-text-2);
  transition: opacity .2s .1s;
  pointer-events: none;
}
.aigc-expand:hover {
  width: 102px;
  background: var(--ae-glass-bg-hover) !important;
}
.aigc-expand:hover .aigc-label {
  opacity: 1;
}
/* Active dot */
.aigc-expand.on::after {
  content: '';
  position: absolute;
  top: 4px; right: 4px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ae-accent);
  pointer-events: none;
}

/* Site pill buttons */
.site-pill { cursor: pointer; }
.site-pill-ico {
  width: 16px; height: 16px; border-radius: 3px;
  display: block; flex-shrink: 0;
  object-fit: contain;
}
.site-pill-fallback {
  width: 16px; height: 16px; border-radius: 3px;
  background: var(--ae-glass-bg-active);
  font-size: 0.625rem; font-weight: 800;
  color: var(--ae-text-2);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.site-pill:hover .site-pill-ico,
.site-pill:hover .site-pill-fallback { opacity: .9; }
#sitePills { display: contents; }

/* Site pill close button */
.site-pill-close {
  display: flex; align-items: center; justify-content: center;
  width: 0; opacity: 0; overflow: hidden;
  margin-left: 0;
  color: var(--ae-text-3);
  transition: width .2s, opacity .15s .05s, margin .2s;
  flex-shrink: 0; cursor: pointer;
}
.site-pill-close:hover { color: var(--ae-text-1); }
.site-pill:hover .site-pill-close {
  width: 14px; opacity: 1; margin-left: auto;
}
.site-pill:hover { width: 120px; padding-right: 8px !important; }

/* ═══ RIGHT PANEL FULLSCREEN ═══ */
.app-shell.right-fullscreen {
  grid-template-columns: 0px 0px 0px 0px 1fr !important;
}
.app-shell.right-fullscreen .header-brand,
.app-shell.right-fullscreen .header-center,
.app-shell.right-fullscreen .header-right-zone,
.app-shell.right-fullscreen .app-sidebar,
.app-shell.right-fullscreen .handle-left,
.app-shell.right-fullscreen .handle-right,
.app-shell.right-fullscreen .app-main {
  display: none !important;
}
.app-shell.right-fullscreen .app-right {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  opacity: 1 !important;
  pointer-events: auto !important;
}
/* GEO Tag Bar */
.geo-tag-bar{display:none;align-items:center;flex-wrap:wrap;gap:6px;padding:0 20px 8px;min-height:36px;max-height:90px;overflow-y:auto}
.geo-tag-bar.visible{display:flex}
.geo-tag{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:8px;background:var(--ae-glass-bg-active);color:var(--ae-text-1);font-size:0.75rem;font-weight:500;flex-shrink:0;max-width:200px}
.geo-tag-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.geo-tag-close{display:flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:50%;background:transparent;color:var(--ae-text-3);cursor:pointer;font-size:0.5rem;transition:all .15s;border:none;padding:0;line-height:1}
.geo-tag-close:hover{background:var(--ae-glass-bg-hover);color:var(--ae-text-1)}
.geo-tag-input{flex:1;min-width:120px;border:none;background:transparent;outline:none;font-size:0.75rem;font-family:inherit;color:var(--ae-text-1);padding:5px 0}
.geo-tag-input::placeholder{color:var(--ae-text-3)}

/* ═══ COMPUTER BUTTON ═══ */
#computerBtn { position: relative; }
#computerBtn.active {
  background: transparent !important;
  color: var(--ae-text-1) !important;
  box-shadow: none !important;
  opacity: 1 !important;
}
#computerBtn.active::after {
  content: '';
  position: absolute;
  top: 4px; right: 4px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ae-accent);
  pointer-events: none;
}
#computerBtn.active:hover {
  background: var(--ae-glass-bg-active) !important;
  opacity: 1 !important;
}

/* ═══ NAV SHORTCUT HINT ═══ */
.nav-shortcut {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--ae-text-3);
  font-family: inherit;
  letter-spacing: .5px;
  opacity: 0;
  transition: opacity .15s var(--ae-ease);
  flex-shrink: 0;
}
.nav-item.sb-action:hover .nav-shortcut {
  opacity: 1;
}

/* ═══ NEW TASK BUTTON — always-on hover look ═══ */
.nav-item.sb-action {
  background: var(--ae-glass-bg-hover);
  color: var(--ae-text-1);
}
.nav-item.sb-action:hover {
  background: var(--ae-glass-bg-active);
}
.nav-item.sb-action .nav-icon {
  opacity: 1;
  color: var(--ae-text-1);
}

/* ═══ SIDEBAR NAV ALIGNMENT — 图标与 Logo 对齐，文字起点统一 ═══ */
.nav-item {
  padding-left: 10px;
  padding-right: 14px;
  gap: 20px;
}
.nav-divider {
  margin-left: 10px;
  margin-right: 14px;
}

/* ═══ NAV EXPANDABLE —— 导航 / 历史
   保留 .nav-item 基础样式不动（padding / gap / font / hover bg 与其他项一致），
   hover 整行时图标切换为 chevron + 方块 bg（叠加在整行 hover bg 之上）。
   ═══ */

/* 图标槽位：尺寸和占位与普通 .nav-icon 完全一致（width:20px），
   这样文字起点不变，与其他 nav-item 精确对齐。 */
.nav-item.nav-exp .nav-exp-ico-slot {
  width: 20px;
  height: 20px;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 圆角方块 bg —— 绝对定位居中，严格 28×28，不影响布局。
   由 "整行 hover" 或 "已展开" 触发。 */
.nav-item.nav-exp .nav-exp-ico-slot::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: transparent;
  transform: translate(-50%, -50%);
  transition: background .15s;
  pointer-events: none;
  z-index: 0;
}
.nav-item.nav-exp:hover .nav-exp-ico-slot::before {
  background: var(--ae-glass-bg-active);
}

/* 两个图标叠在同一位置，互斥显示 */
.nav-item.nav-exp .nav-exp-ico-main,
.nav-item.nav-exp .nav-exp-ico-chev {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: opacity .15s, transform .25s var(--ae-ease);
  z-index: 1;
}
.nav-item.nav-exp .nav-exp-ico-main {
  font-size: 0.8125rem;
  opacity: .6;
  color: inherit;
}
.nav-item.nav-exp .nav-exp-ico-chev {
  font-size: 0.6875rem;
  opacity: 0;
  color: inherit;
}

/* 默认态：只显示原图标。
   hover 整行（包括文字和图标）：原图标消失，chevron 出现。 */
.nav-item.nav-exp:hover .nav-exp-ico-main {
  opacity: 0;
}
.nav-item.nav-exp:hover .nav-exp-ico-chev {
  opacity: 1;
}

/* 展开状态：chevron 常驻（旋转 90° 变 v），原图标消失，方块 bg 常驻。 */
.nav-item.nav-exp.is-open .nav-exp-ico-main {
  opacity: 0;
}
.nav-item.nav-exp.is-open .nav-exp-ico-chev {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(90deg);
}

/* 文字标签：继承 .nav-item 的 font / color，仅保留 flex 占位 */
.nav-item.nav-exp .nav-exp-label-text {
  flex: 1;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 展开容器 */
.nav-expandable-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s var(--ae-ease), opacity .25s;
  opacity: 0;
}
.nav-expandable-body.open {
  max-height: 2000px;
  opacity: 1;
  padding: 2px 0 4px 0;
}

/* v2.1.21: 历史子项视觉对齐 ChatDLM chat-history-item 风格
   - 字号 0.8125rem (从 0.75 提升, 对齐参照源码 chat-history-item)
   - 颜色 --ae-text-2 (从 text-3 提升, 不再像 disabled)
   - hover/active 走 glass + text-1 + accent
   padding-left = nav-item padding-left(10) + icon(20) + gap(20) = 50px
   这样子项文字起点与父项（"历史" / "导航"）文字起点精确对齐。 */
.nav-history-sub {
  display: block;
  padding: 7px 14px 7px 50px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ae-text-2);
  cursor: pointer;
  border-radius: var(--ae-radius-s);
  margin: 0 0 1px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
  transition: background .15s var(--ae-ease), color .15s var(--ae-ease);
}
.nav-history-sub:hover {
  background: var(--ae-glass-bg-hover);
  color: var(--ae-text-1);
}
.nav-history-sub.active {
  background: var(--ae-glass-bg-active);
  color: var(--ae-accent);
}
/* v2.1.21 hotfix: HTML hidden 必须优先于 .nav-item display:flex */
#sidebar-history-nav[hidden],
#sidebar-history-body[hidden] {
  display: none !important;
}

/* ═══════════════════════════════════════════════
   v2.1.23: 历史项 hover 三点菜单 + popover (面性扁平)
   v2.1.23.1 修正: 整条是唯一视觉块, 三点在 a 内部右侧, 不切两块.
   v2.1.23.2 修正: 三点 hover 浮起方框 (类左栏折叠箭头按钮感) + 修 baseline 漂移 bug
   v2.1.23.3 修正: padding-right 14px → 7px (= padding-top), 三点方框上下右四边视觉对称
   v2.1.23.4 修正: popover/toast 背景/边框/圆角/阴影全部复用 .add-popover 样板 (修泛蓝)
   - 复用 token: --ae-bg-base / --ae-glass-border / --ae-glass-bg-active / --ae-text-1/2/3 / --ae-red
   - 复用样板: .nav-exp-ico-slot::before 28x28 / radius 7px (三点方框)
              .add-popover (popover/toast 背景/边框/圆角/阴影)
   - 两段 hover: hover 整条→三点出现(无方框); hover 三点本身→方框浮起
   ═══════════════════════════════════════════════ */

/* a.nav-history-sub 现在是 flex 容器 (整条一块视觉)
   注: .nav-history-sub 基础样式(padding/border-radius/hover bg)在原 sidebar 段已定义,
       这里只补 flex 布局让 title 撑开 + 三点贴右.
   v2.1.23.3: 覆盖基础段的 padding-right 14px → 7px, 让三点方框右边距 = 上下边距,
              四边视觉对称 (上 7 / 下 7 / 右 7), 左侧 50px 是为了文字跟"历史"对齐保持. */
.nav-history-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 7px;
}
.nav-history-title {
  flex: 1 1 auto;
  min-width: 0;  /* 允许 text-ellipsis */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 三点 span: 默认透明; hover 整条 a 时显示 (无方框)
   v2.1.23.2: hover 三点本身时浮起方框 (类左栏折叠箭头方框, 28x28 / radius 7px)
   方框尺寸 + 圆角 + 底色完全复用 .nav-exp-ico-slot::before 样板, 不自创. */
.history-more {
  flex-shrink: 0;
  position: relative;          /* 给 ::before 方框做定位锚点 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--ae-text-2);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--ae-transition), color var(--ae-transition);
  font-size: 0.8125rem;
  line-height: 1;              /* 关键: 修字体图标 baseline 漂移 bug */
}
/* 修字体图标 baseline 漂移: i 自身用 block + line-height:1, flex 居中才稳 */
.history-more > i {
  display: block;
  line-height: 1;
}

/* 浮起方框 (类 .nav-exp-ico-slot::before) — 默认透明, hover 三点本身才浅灰 */
.history-more::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: transparent;
  transform: translate(-50%, -50%);
  transition: background .15s;
  pointer-events: none;
  z-index: 0;
}
/* i 图标在方框上层, 不被方框遮 */
.history-more > i {
  position: relative;
  z-index: 1;
}

/* hover 整条 a → 三点出现 (无方框) */
.nav-history-sub:hover .history-more,
.nav-history-sub.active .history-more,
.history-more:focus-visible {
  opacity: 1;
}
/* hover 三点本身 → 方框浮起 (类左栏折叠箭头那种按钮感) */
.history-more:hover::before {
  background: var(--ae-glass-bg-active);
}
.history-more:hover {
  color: var(--ae-text-1);
}
/* 三点被键盘聚焦时给一个细描边, 无障碍可访问 */
.history-more:focus-visible {
  outline: 1px dashed var(--ae-text-3);
  outline-offset: 1px;
  border-radius: 7px;
}

/* popover 主体 (完全复用 .add-popover 样板, 不自创) */
.history-popover {
  position: fixed;
  z-index: 10000;
  min-width: 200px;
  padding: 6px;
  /* v2.1.23.4: 背景/边框/圆角/阴影 全部复用 .add-popover 样板, 不再自创 */
  background: var(--ae-bg-base, #15202B);
  border: 1px solid var(--ae-glass-border);
  border-radius: 12px;
  box-shadow: 0 16px 48px rgb(0 0 0 / .4);
  backdrop-filter: blur(var(--ae-blur, 40px));
  -webkit-backdrop-filter: blur(var(--ae-blur, 40px));
  font-size: 0.875rem;
  color: var(--ae-text-1);
  user-select: none;
}
.history-popover-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--ae-text-1);
  transition: background var(--ae-transition);
}
.history-popover-item:hover {
  background: var(--ae-glass-bg-hover);
}
.history-popover-item > i:first-child {
  width: 16px;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--ae-text-2);
  flex-shrink: 0;
}
.history-popover-item:hover > i:first-child {
  color: var(--ae-text-1);
}
.history-popover-item > span {
  flex: 1 1 auto;
}
.history-popover-chevron {
  color: var(--ae-text-3);
  font-size: 0.625rem;
}
.history-popover-divider {
  height: 1px;
  margin: 4px 4px;
  background: rgb(255 255 255 / 0.08);
}
.history-popover-item.is-danger {
  color: var(--ae-red);
}
.history-popover-item.is-danger > i:first-child {
  color: var(--ae-red);
}
.history-popover-item.is-danger:hover {
  background: rgb(244 93 93 / 0.12);
}

/* toast 迷你版 (背景跟 popover 一致, 用 --ae-bg-base) */
.history-toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%) translateY(8px);
  padding: 10px 16px;
  background: var(--ae-bg-base, #15202B);
  color: var(--ae-text-1);
  border-radius: 8px;
  font-size: 0.8125rem;
  border: 1px solid var(--ae-glass-border);
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s;
  z-index: 10001;
  pointer-events: none;
}
.history-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ═══════════════════════════════════════════════════════════════════════════
   v2.2.7.3 hotfix v16 — 边栏「搜索」按钮弹层 (DeGao 反馈: 真扁平 + 真复用)
   ─────────────────────────────────────────────────────────────────────────
   v5 核心修正:
     ▸ 配色不再蓝 → 弹层背景从 rgb(.. /.92)+blur 改 var(--ae-bg-base) 实色
                   不再 backdrop-filter (避免后景模糊渗透混色)
     ▸ 真扁平 → 删 .search-modal-input-wrap 边框 / .search-modal-icon-btn 边框 /
                   .search-modal-detail-title border-bottom / actions border-top
     ▸ 真复用 → 右上角图标按钮**用 .sidebar-toggle 类** (跟 .right-close-btn 同款)
                   尺寸 36×36 / 圆角 8px / 无边框 / inline SVG (不再 Font Awesome)
                   .search-modal-icon-btn 仅作为补充选择器 (语义化), 不再覆盖几何
     ▸ 反跳动 → 给 .search-modal-row-actions 加 z-index 防被日期文字遮挡

   设计哲学:
     - 复用 token > 自创
     - 用 background 区分层级, 不用 border
     - hover opacity 渐显 + 绝对定位浮起, 不动 layout
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 遮罩层 (无变化) ─── */
.search-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9990;
  background: rgb(var(--ae-shadow-rgb) / .55);     /* v16: 半透明遮罩 + blur 一起做"安全模式" — 跟登录页 .page.focus 同款思路 */
  backdrop-filter: blur(12px);                     /* v16: blur 为主, 让后景元素真正模糊 (跟登录页 filter:blur(4-6px) 视觉一致) */
  -webkit-backdrop-filter: blur(12px);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
  animation: searchModalFadeIn 0.18s var(--ae-ease);
}
.search-modal-overlay.is-open { display: flex; }
@keyframes searchModalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ─── 弹层主卡 (实色, 不再 backdrop-blur) ─── */
.search-modal {
  width: min(720px, calc(100vw - 32px));
  max-height: 76vh;
  background: var(--ae-bg-base);
  border-radius: var(--ae-radius-m);
  box-shadow: 0 24px 60px rgb(var(--ae-shadow-rgb) / .60);     /* v15: shadow 加深 .45→.60, 后景压暗后阴影需要更明显才能"浮起" */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: searchModalSlideIn 0.22s var(--ae-ease);
}
@keyframes searchModalSlideIn {
  from { opacity: 0; transform: translateY(-12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ─── 头部 (扁平, 无 border, 微弱背景区分) ─── */
.search-modal-header {
  position: relative;
  padding: 12px 14px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgb(var(--ae-fg-rgb) / .025);     /* v13: 加回微亮叠加, 跟 tabs 区一起组成"搜索区", 跟 body 区分 */
}

/* 搜索框 — glass-bg 背景 + 圆角 16px, 无边框 (扁平) */
.search-modal-input-wrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;     /* v8: 去背景, 跟弹层底色融为一体 (DeGao 反馈) */
  border-radius: var(--ae-radius-s);     /* v8: 去胶囊 18px, 改普通圆角 (10px token) */
  display: flex;
  align-items: center;
  height: 36px;
  transition: background var(--ae-transition);
}
.search-modal-input-wrap:focus-within {
  background: transparent;     /* v8: focus 也不变色 */
}
.search-modal-input {
  flex: 1 1 auto;
  background: transparent;
  border: none;
  padding: 0 4px;     /* v8: 无图标后, 减小左右 padding */
  font-size: 14px;
  color: var(--ae-text-1);
  font-family: inherit;
  outline: none;
  height: 100%;
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
}
.search-modal-input::placeholder { color: var(--ae-text-3); }

/* 右上角图标按钮 — **跟 .right-close-btn 100% 同款** (sidebar-toggle 那套) */
.search-modal-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
/* 注意: HTML 里 <button class="sidebar-toggle search-modal-icon-btn">,
   sidebar-toggle 提供 36×36 / 圆角 8 / 无边框 / hover 背景, 我们不覆盖.
   .search-modal-icon-btn 当前不写任何几何样式 — 仅占位语义化, 留未来精调用. */

/* ─── Tabs (v10, 类似 Google 搜索 全部/图片/视频, 项目极简风) ─── */
.search-modal-tabs {
  display: flex;
  align-items: center;
  padding: 4px 14px 0;     /* v13: 底部 padding=0, 让 tab 自己的 padding 完全决定底线位置 */
  flex-shrink: 0;
  overflow-x: auto;
  background: rgb(var(--ae-fg-rgb) / .025);     /* v13: 跟 header 同色, 一起组成"搜索区" */
}
.search-modal-tab {
  background: transparent;
  border: none;
  color: var(--ae-text-3);
  font-family: inherit;
  font-size: 13px;
  padding: 8px 0;     /* v13: 横向 padding=0, 让 ::after 底线跟字同宽 (Google 风) */
  margin-right: 24px;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition: color var(--ae-transition);
}
.search-modal-tab:hover {
  color: var(--ae-text-2);
}
.search-modal-tab.is-active {
  color: var(--ae-text-1);
  font-weight: 500;
}
/* v14: 激活态粗白底线 — 跟字同宽 + 方头 (Google 标准) */
.search-modal-tab.is-active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--ae-text-1);
  /* v14: 删 border-radius, 改方头 (DeGao "不要圆头, 要方的, 像 Google") */
}

/* ─── 主体 ─── */
.search-modal-main {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
  overflow: hidden;
}
.search-modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 4px 8px 12px;     /* v14: 横向 padding=8 让 row hover 圆角矩形不贴弹层左边缘 */
  min-width: 0;
}

/* v14: body 内部子元素 left padding=6 (跟 body padding-left:8 加起来 =14, 跟 header/tabs 对齐) */

/* ─── 分组标题 ─── */
.search-modal-section {
  margin-top: 10px;
  padding: 6px 14px 4px 6px;     /* v14: left=6, body 容器 padding-left:8, 总左缘=14 跟 header 对齐 */
  font-size: 11px;
  color: var(--ae-text-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  letter-spacing: 0.2px;
}
.search-modal-section:first-child { margin-top: 4px; }
.search-modal-section-action {
  font-size: 11px;
  color: var(--ae-text-3);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  transition: color var(--ae-transition);
}
.search-modal-section-action:hover { color: var(--ae-text-2); }

/* ─── 操作行 ─── */
.search-modal-action {
  display: flex;
  align-items: center;
  gap: 8px;     /* v9: 跟 .search-modal-row gap 一致 */
  padding: 9px 14px 9px 6px;     /* v14: left=6, 总左缘=14 跟 header 对齐 */
  min-height: 38px;     /* v9: 跟 .search-modal-row min-height 一致 */
  border-radius: var(--ae-radius-s);
  cursor: pointer;
  color: var(--ae-text-1);
  font-size: 13px;
  background: transparent;     /* v9: 默认无底色, hover 才出现, 跟 row 一致 */
  border: none;
  font-family: inherit;
  width: 100%;
  text-align: left;
  transition: background var(--ae-transition);
}
.search-modal-action:hover { background: var(--ae-glass-bg-hover); }
.search-modal-action i {
  font-size: 13px;
  color: var(--ae-text-2);
  width: 16px;
  text-align: center;
}

/* ─── 聊天历史行 ─── */
.search-modal-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px 9px 6px;     /* v14: left=6, 总左缘=14 跟 header 对齐 */
  border-radius: var(--ae-radius-s);
  cursor: pointer;
  color: var(--ae-text-1);
  font-size: 13px;
  position: relative;
  transition: background var(--ae-transition);
  min-height: 38px;
}
.search-modal-row:hover { background: var(--ae-glass-bg-hover); }
.search-modal-row.is-active { background: var(--ae-glass-bg-active); }
.search-modal-row.is-current { background: var(--ae-accent-soft); }
.search-modal-row.is-deleting { opacity: 0.5; pointer-events: none; }
.search-modal-row-title {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.search-modal-row-date {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--ae-text-3);
  margin-left: 8px;
  transition: opacity var(--ae-transition);
  min-width: 56px;
  text-align: right;
}
.search-modal-row:hover .search-modal-row-date { opacity: 0; }

/* hover 三按钮 — z-index: 2 强制盖在日期文字上 (修 v4 截图 bug) */
.search-modal-row-actions {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 2px;     /* v13: 紧凑 2px, 像 Google 悬浮 toolbar */
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ae-transition);
  z-index: 2;
  /* v13: 容器实色铺底, 跟 row hover bg 一致, 自然延伸不突兀 */
  background: var(--ae-bg-base);
  padding: 2px;
  border-radius: 8px;
}
.search-modal-row:hover .search-modal-row-actions,
.search-modal-row.is-active .search-modal-row-actions {
  opacity: 1;
  pointer-events: auto;
}
.search-modal-row-btn {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;     /* v13: 按钮透明, 容器铺底 */
  color: var(--ae-text-2);
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
  transition: background var(--ae-transition), color var(--ae-transition);
}
.search-modal-row-btn:hover {
  background: var(--ae-glass-bg-hover);
  color: var(--ae-text-1);
}
.search-modal-row-btn.is-danger:hover {
  background: rgb(var(--ae-red-rgb) / .14);
  color: var(--ae-red);
}

.search-modal-row-current-tag {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--ae-text-2);
  padding: 2px 8px;
  background: var(--ae-glass-bg);
  border-radius: 10px;
}

/* 编辑 / 删除确认态 */
.search-modal-row-edit {
  flex: 1 1 auto;
  background: var(--ae-glass-bg-active);
  border: 1px solid var(--ae-accent);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 13px;
  color: var(--ae-text-1);
  font-family: inherit;
  outline: none;
  min-width: 0;
}
.search-modal-row-confirm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ae-text-2);
}
.search-modal-row-confirm-yes,
.search-modal-row-confirm-no {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 4px;
  transition: background var(--ae-transition);
}
.search-modal-row-confirm-yes { color: var(--ae-red); }
.search-modal-row-confirm-yes:hover { background: rgb(var(--ae-red-rgb) / .14); }
.search-modal-row-confirm-no { color: var(--ae-text-2); }
.search-modal-row-confirm-no:hover { background: var(--ae-glass-bg-hover); }

.search-modal-empty {
  padding: 32px 14px;
  text-align: center;
  color: var(--ae-text-3);
  font-size: 13px;
}

/* ─── 底部 (扁平, 无 border) ─── */
.search-modal-footer {
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  font-size: 11px;
  color: var(--ae-text-3);
  flex-shrink: 0;
  /* v12: 删 background 微白叠加, 跟弹层底色完全一致 */
}
.search-modal-kbd {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  background: var(--ae-glass-bg);
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 10px;
  color: var(--ae-text-2);
  margin-left: 4px;
}

/* ─── 全屏模式 ─── */
.search-modal-overlay.is-fullscreen {
  padding-top: 0;
  align-items: stretch;
  justify-content: stretch;
}
.search-modal-overlay.is-fullscreen .search-modal {
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  border-radius: 0;
  box-shadow: none;
}
.search-modal-overlay.is-fullscreen .search-modal-main {
  flex-direction: row;
}
.search-modal-overlay.is-fullscreen .search-modal-body {
  flex: 0 0 380px;
  /* v14: 不再加 .025 微亮 — 让 body 跟 header/tabs 区色差结构跟小窗完全一致.
          右侧详情区单独压暗以区分两栏 (见下方 .search-modal-detail) */
}
.search-modal-detail {
  display: none;
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 24px 32px;
  min-width: 0;
  background: rgb(var(--ae-shadow-rgb) / .15);     /* v14: 右侧详情区比左侧 body 暗一点点, 区分两栏 (无 border) */
}
.search-modal-overlay.is-fullscreen .search-modal-detail {
  display: block;
}
.search-modal-detail-empty {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ae-text-3);
  font-size: 13px;
}
.search-modal-detail-loading {
  padding: 24px;
  text-align: center;
  color: var(--ae-text-3);
  font-size: 13px;
}
.search-modal-detail-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--ae-text-1);
  margin-bottom: 18px;
  /* 删 padding-bottom + border-bottom (扁平) */
}
.search-modal-detail-msg {
  margin-bottom: 18px;
  font-size: 13px;
  line-height: 1.7;
}
.search-modal-detail-msg-role {
  display: inline-block;
  font-size: 11px;
  color: var(--ae-text-3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.search-modal-detail-msg.is-user .search-modal-detail-msg-content {
  background: var(--ae-glass-bg);
  padding: 10px 14px;
  border-radius: var(--ae-radius-s);
  display: inline-block;
  max-width: 100%;
  color: var(--ae-text-1);
}
.search-modal-detail-msg.is-assistant .search-modal-detail-msg-content {
  color: var(--ae-text-1);
  white-space: pre-wrap;
}
.search-modal-detail-msg.is-tool .search-modal-detail-msg-content,
.search-modal-detail-msg.is-system .search-modal-detail-msg-content {
  color: var(--ae-text-2);
  font-size: 12px;
  font-style: italic;
}
.search-modal-detail-actions {
  margin-top: 24px;
  /* 删 padding-top + border-top (扁平) */
  display: flex;
  gap: 8px;
}
.search-modal-detail-action-btn {
  background: var(--ae-glass-bg);
  border: none;
  color: var(--ae-text-1);
  padding: 8px 16px;
  border-radius: var(--ae-radius-s);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  transition: background var(--ae-transition);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.search-modal-detail-action-btn:hover { background: var(--ae-glass-bg-hover); }
.search-modal-detail-action-btn.is-primary {
  background: var(--ae-accent-soft);
  color: var(--ae-accent);
}
.search-modal-detail-action-btn.is-primary:hover {
  background: rgb(var(--ae-accent-rgb) / .20);
}

/* ─── 移动端 ─── */
@media (max-width: 640px) {
  .search-modal-overlay {
    padding-top: 0;
    align-items: stretch;
    justify-content: stretch;
  }
  .search-modal {
    width: 100vw; max-width: 100vw;
    height: 100vh; max-height: 100vh;
    border-radius: 0;
  }
  .search-modal-header { padding: 10px 12px; gap: 6px; }
  .search-modal-input-wrap { height: 36px; border-radius: var(--ae-radius-s); }
  .search-modal-input {
    font-size: 16px;     /* 防 iOS 自动放大 */
    padding: 0 6px;
  }
  .search-modal-row { padding: 11px 14px; min-height: 44px; }
  .search-modal-row-actions { right: 8px; gap: 4px; }
  .search-modal-row-btn { width: 32px; height: 32px; }
  .search-modal-section { padding: 8px 14px 4px; }
  .search-modal-action { padding: 12px 14px; }
  .search-modal-footer { padding: 8px 12px; gap: 12px; font-size: 10px; }

  .search-modal-overlay.is-fullscreen .search-modal-main {
    flex-direction: column;
  }
  .search-modal-overlay.is-fullscreen .search-modal-body {
    flex: 1 1 auto;
    background: transparent;
  }
  .search-modal-overlay.is-fullscreen .search-modal-detail { display: none; }
}

/* ─── button.nav-item reset ─── */
button.nav-item {
  border: none;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
  width: 100%;
  text-align: left;
}

/* ═══════════════════════════════════════════════════════════════════════════
   v2.2.8 — MDMS .md 统一管理中心 (/notes/ 重写)
   ─────────────────────────────────────────────────────────────────────────
   设计原则 (沿用搜索 modal 打磨出来的纪律):
     - 左对齐 14px (header / tabs / 列表行)
     - 圆角 8/16 (--ae-radius-s/m), 不引新数值
     - 面性扁平 (减少边线, 用 --ae-glass-bg 微亮区分层级)
     - Google 风 Tab (字色加粗 + 3px 方头粗白底线)
     - Font Awesome 图标 (项目标准)
     - 反跳动 (hover opacity 渐显, 不切 display)

   对应 JS class 列表:
     .mdms-page / .mdms-page-header / .mdms-page-actions / .mdms-action-group
     .mdms-btn-primary / .mdms-btn-ghost / .mdms-icon-btn
     .mdms-toolbar / .mdms-tabs / .mdms-tab / .mdms-toolbar-right
     .mdms-view-toggle / .mdms-view-btn
     .mdms-settings-panel / .mdms-settings-item
     .mdms-data / .mdms-loading / .mdms-empty / .mdms-empty-state
     .mdms-list-view / .mdms-list-header / .mdms-list-row
     .col-type / .col-title / .col-owner / .col-time / .col-words
     .sortable / .sort-ico / .row-title / .row-tag
     .mdms-grid-view / .mdms-grid-card / .card-icon / .card-title / .card-desc / .card-meta / .card-type
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 页面容器 ─── */
.mdms-page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 32px;
}

/* ─── 顶部页头 ─── */
.mdms-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.mdms-page-header h1 {
  margin: 0 0 4px 0;
  font-size: 24px;
  font-weight: 600;
  color: var(--ae-text-1);
}
.mdms-page-header .page-sub {
  font-size: 13px;
  color: var(--ae-text-3);
}
.mdms-page-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.mdms-action-group { display: flex; align-items: center; }

/* ─── 主按钮 (新建) ─── */
.mdms-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--ae-accent);
  color: #fff;
  border: none;
  border-radius: var(--ae-radius-s);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  transition: filter var(--ae-transition);
}
.mdms-btn-primary:hover { filter: brightness(1.1); }

/* ─── 次按钮 (导入/导出/API Key) ─── */
.mdms-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: transparent;
  color: var(--ae-text-2);
  border: none;
  border-radius: var(--ae-radius-s);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  transition: background var(--ae-transition), color var(--ae-transition);
}
.mdms-btn-ghost:hover {
  background: var(--ae-glass-bg-hover);
  color: var(--ae-text-1);
}

/* ─── 圆形图标按钮 (设置) ─── */
.mdms-icon-btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--ae-text-2);
  border-radius: var(--ae-radius-s);
  cursor: pointer;
  transition: background var(--ae-transition), color var(--ae-transition);
}
.mdms-icon-btn:hover {
  background: var(--ae-glass-bg-hover);
  color: var(--ae-text-1);
}
.mdms-icon-btn.is-active {
  background: var(--ae-glass-bg-active);
  color: var(--ae-text-1);
}

/* ─── Toolbar (Tabs + 视图切换) ─── */
.mdms-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--ae-glass-border);
}
.mdms-tabs {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  overflow-x: auto;
}
.mdms-tab {
  background: transparent;
  border: none;
  color: var(--ae-text-3);
  font-family: inherit;
  font-size: 14px;
  padding: 12px 0;
  margin-right: 28px;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition: color var(--ae-transition);
}
.mdms-tab:hover { color: var(--ae-text-2); }
.mdms-tab.is-active {
  color: var(--ae-text-1);
  font-weight: 500;
}
.mdms-tab.is-active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: var(--ae-text-1);
}
.mdms-tab.is-disabled { opacity: 0.4; cursor: not-allowed; }
.mdms-tab.is-disabled:hover { color: var(--ae-text-3); }

.mdms-toolbar-right {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* 视图切换 */
.mdms-view-toggle {
  display: inline-flex;
  align-items: center;
  background: var(--ae-glass-bg);
  border-radius: var(--ae-radius-s);
  padding: 2px;
}
.mdms-view-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--ae-text-3);
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  transition: background var(--ae-transition), color var(--ae-transition);
}
.mdms-view-btn:hover { color: var(--ae-text-1); }
.mdms-view-btn.is-active {
  background: var(--ae-bg-base);
  color: var(--ae-text-1);
}

/* ─── 显示设置面板 ─── */
.mdms-settings-panel {
  display: none;
  background: var(--ae-glass-bg);
  border-radius: var(--ae-radius-m);
  padding: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 16px;
}
.mdms-settings-panel.is-open { display: flex; }
.mdms-settings-title {
  width: 100%;
  font-size: 12px;
  font-weight: 600;
  color: var(--ae-text-2);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.mdms-settings-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ae-text-1);
  cursor: pointer;
  user-select: none;
}
.mdms-settings-item input[type="checkbox"] {
  cursor: pointer;
  accent-color: var(--ae-accent);
}

/* ─── 数据容器 ─── */
.mdms-data { min-height: 200px; }
.mdms-loading,
.mdms-empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--ae-text-3);
  font-size: 14px;
}
.mdms-loading i { margin-right: 8px; }
.mdms-empty-state i {
  font-size: 36px;
  margin-bottom: 12px;
  display: block;
  color: var(--ae-text-3);
  opacity: 0.6;
}

/* ─── 列表视图 ─── */
.mdms-list-view {
  display: flex;
  flex-direction: column;
}
.mdms-list-header,
.mdms-list-row {
  display: grid;
  grid-template-columns: minmax(0, 2.5fr) repeat(auto-fit, minmax(0, 1fr));
  align-items: center;
  gap: 16px;
  padding: 12px 14px;
}
.mdms-list-header {
  font-size: 11px;
  font-weight: 500;
  color: var(--ae-text-3);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border-bottom: 1px solid var(--ae-glass-border);
  padding-bottom: 10px;
  user-select: none;
}
.mdms-list-header .col-type { display: none; }    /* 表头 type 列空, 不占位 */

.mdms-list-header .sortable {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color var(--ae-transition);
}
.mdms-list-header .sortable:hover { color: var(--ae-text-2); }
.mdms-list-header .sortable .sort-ico {
  font-size: 9px;
  opacity: 0;
  transition: opacity var(--ae-transition);
}
.mdms-list-header .sortable.is-active {
  color: var(--ae-text-1);
}
.mdms-list-header .sortable.is-active .sort-ico { opacity: 1; }

.mdms-list-row {
  cursor: pointer;
  font-size: 14px;
  color: var(--ae-text-1);
  text-decoration: none;
  border-radius: var(--ae-radius-s);
  min-height: 42px;
  transition: background var(--ae-transition);
}
.mdms-list-row:hover { background: var(--ae-glass-bg-hover); }

/* col-type (类型图标列, 列表行用) */
.mdms-list-row .col-type {
  flex-shrink: 0;
  width: 24px;
  text-align: center;
  font-size: 16px;
}

/* col-title (含标签) */
.mdms-list-row .col-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.mdms-list-row .col-title .row-title {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mdms-list-row .col-title .row-tag {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--ae-text-3);
  background: var(--ae-glass-bg);
  padding: 2px 8px;
  border-radius: 10px;
}

/* col-owner / col-time / col-words */
.mdms-list-row .col-owner,
.mdms-list-row .col-time,
.mdms-list-row .col-words {
  font-size: 13px;
  color: var(--ae-text-3);
  white-space: nowrap;
}

/* ─── 网格视图 ─── */
.mdms-grid-view {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.mdms-grid-card {
  background: var(--ae-glass-bg);
  border-radius: var(--ae-radius-m);
  padding: 16px;
  cursor: pointer;
  text-decoration: none;
  color: var(--ae-text-1);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 140px;
  transition: background var(--ae-transition), transform var(--ae-transition);
}
.mdms-grid-card:hover {
  background: var(--ae-glass-bg-hover);
  transform: translateY(-2px);
}
.mdms-grid-card .card-icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  border-radius: var(--ae-radius-s);
  background: var(--ae-glass-bg);
}
.mdms-grid-card .card-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--ae-text-1);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.mdms-grid-card .card-desc {
  font-size: 12px;
  color: var(--ae-text-3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mdms-grid-card .card-meta {
  margin-top: auto;
  font-size: 12px;
  color: var(--ae-text-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.mdms-grid-card .card-type {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* ─── 未登录占位 ─── */
.mdms-empty {
  text-align: center;
  padding: 80px 20px;
  color: var(--ae-text-3);
}
.mdms-empty i {
  font-size: 48px;
  color: var(--ae-text-3);
  margin-bottom: 16px;
  display: block;
  opacity: 0.6;
}
.mdms-empty h3 {
  margin: 0 0 8px 0;
  font-size: 18px;
  color: var(--ae-text-1);
}
.mdms-empty p { font-size: 14px; }
.mdms-empty a { color: var(--ae-accent); text-decoration: none; }
.mdms-empty a:hover { text-decoration: underline; }

/* ─── 移动端 (<= 768px) ─── */
@media (max-width: 768px) {
  .mdms-page { padding: 16px; }
  .mdms-page-header { flex-direction: column; align-items: stretch; }
  .mdms-page-header h1 { font-size: 20px; }
  .mdms-page-actions { flex-wrap: wrap; }
  .mdms-btn-ghost span { display: none; }
  .mdms-btn-ghost { padding: 8px; }
  .mdms-list-header .col-time:not(:first-of-type),
  .mdms-list-header .col-owner,
  .mdms-list-header .col-words,
  .mdms-list-row .col-time:not(:first-of-type),
  .mdms-list-row .col-owner,
  .mdms-list-row .col-words {
    display: none;
  }
  .mdms-grid-view {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   v2.2.8.1 — USER.md 操作弹层 (沿用搜索 modal v16 安全模式)
   ─────────────────────────────────────────────────────────────────────────
   - backdrop blur(12px) + .55 黑遮罩 (跟搜索弹层完全一致)
   - 弹层主卡 var(--ae-bg-base) 实色, 不混色
   - 内部: header (标题+版本) / tabs (内容预览/版本历史) / body / footer
   - footer 横向: 后台编辑链接 + spacer + 导出 + 导入
   ═══════════════════════════════════════════════════════════════════════════ */

.mdms-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9990;
  background: rgb(var(--ae-shadow-rgb) / .55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  align-items: flex-start;
  justify-content: center;
  padding-top: 10vh;
}
.mdms-modal {
  width: min(720px, calc(100vw - 32px));
  max-height: 80vh;
  background: var(--ae-bg-base);
  border-radius: var(--ae-radius-m);
  box-shadow: 0 24px 60px rgb(var(--ae-shadow-rgb) / .60);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: mdmsModalIn 0.22s var(--ae-ease);
}
@keyframes mdmsModalIn {
  from { opacity: 0; transform: translateY(-12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Modal header */
.mdms-modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--ae-glass-border);
  flex-shrink: 0;
}
.mdms-modal-title {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  color: var(--ae-text-1);
  min-width: 0;
}
.mdms-modal-version {
  margin-left: 12px;
  font-size: 11px;
  font-weight: 500;
  color: var(--ae-text-3);
  background: var(--ae-glass-bg);
  padding: 2px 8px;
  border-radius: 10px;
}
.mdms-modal-close {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--ae-text-2);
  border-radius: var(--ae-radius-s);
  cursor: pointer;
  transition: background var(--ae-transition), color var(--ae-transition);
}
.mdms-modal-close:hover {
  background: var(--ae-glass-bg-hover);
  color: var(--ae-text-1);
}

/* Modal tabs (Google 风, 跟搜索 modal 一致) */
.mdms-modal-tabs {
  display: flex;
  align-items: center;
  padding: 0 16px;
  border-bottom: 1px solid var(--ae-glass-border);
  flex-shrink: 0;
}
.mdms-modal-tab {
  background: transparent;
  border: none;
  color: var(--ae-text-3);
  font-family: inherit;
  font-size: 13px;
  padding: 10px 0;
  margin-right: 24px;
  cursor: pointer;
  position: relative;
  transition: color var(--ae-transition);
}
.mdms-modal-tab:hover { color: var(--ae-text-2); }
.mdms-modal-tab.is-active {
  color: var(--ae-text-1);
  font-weight: 500;
}
.mdms-modal-tab.is-active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: var(--ae-text-1);
}

/* Modal body */
.mdms-modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px;
  min-height: 200px;
}
.mdms-modal-pane { display: none; }
.mdms-modal-pane.is-active { display: block; }

.mdms-modal-content {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 12px;
  color: var(--ae-text-2);
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--ae-glass-bg);
  padding: 14px;
  border-radius: var(--ae-radius-s);
  max-height: 50vh;
  overflow-y: auto;
}

/* 版本历史列表 */
.mdms-modal-versions {
  display: flex;
  flex-direction: column;
}
.mdms-version-row {
  display: grid;
  grid-template-columns: 50px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--ae-glass-border);
  font-size: 13px;
  color: var(--ae-text-1);
}
.mdms-version-row:last-child { border-bottom: none; }
.mdms-version-row .ver-num {
  font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, monospace;
  color: var(--ae-text-1);
}
.mdms-version-row .ver-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: var(--ae-text-3);
  min-width: 0;
}
.mdms-version-row .ver-op {
  color: var(--ae-text-2);
  font-weight: 500;
}
.mdms-version-row .ver-restore {
  flex-shrink: 0;
  padding: 6px 10px;
  font-size: 12px;
}

/* Modal footer */
.mdms-modal-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--ae-glass-border);
  flex-shrink: 0;
}
.mdms-modal-spacer { flex: 1 1 auto; }

/* Footer 里的 ghost button (label 形式让 input file 可点) */
.mdms-modal-footer .mdms-btn-ghost {
  text-decoration: none;
  cursor: pointer;
}

/* ─── 移动端 ─── */
@media (max-width: 640px) {
  .mdms-modal-overlay {
    padding-top: 0;
    align-items: stretch;
    justify-content: stretch;
  }
  .mdms-modal {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
  }
  .mdms-version-row {
    grid-template-columns: 40px 1fr;
  }
  .mdms-version-row .ver-restore {
    grid-column: 1 / -1;
    margin-top: 4px;
    width: fit-content;
    margin-left: 52px;
  }
}

/* v3.0.0-alpha.5: 9 大 AI Agent 频道分组容器
   首页 generator 静态生成 (IsLoggedIn 写死 false), 不能用 SSR 条件;
   改 CSS 控制: 默认 display:contents (透明容器, 子项当 sidebar 直接子项布局),
   .app-shell.logged-out 时隐藏 (= 未登录看不见 9 频道, 5 分类仍可见). */
.channels-group {
  display: contents;
}
.app-shell.logged-out .channels-group {
  display: none;
}

/* v3.0.0-alpha.5: 5 个 sidebar 项 (任务/文件/笔记/搜索/编排) 未登录隐藏
   不影响 "新建" / "技能" (公共入口, SEO 友好) */
.app-shell.logged-out .nav-only-logged-in {
  display: none !important;
}