/* ============================================================
   侧边栏 · ChatGPT 风格 · 极简白底
   ============================================================ */

.app-shell { display: flex; height: 100vh; width: 100vw; overflow: hidden; position: relative; z-index: 1; }

.sidebar {
  width: var(--sidebar-w); flex-shrink: 0; height: 100%; display: flex; flex-direction: column;
  background: #f7f7f7;
  border-right: 1px solid var(--border-subtle);
  transition: width var(--dur-base) var(--ease-out); position: relative; z-index: var(--z-sidebar);
}
[data-theme="dark"] .sidebar { background: var(--bg-base); }
.sidebar.collapsed { width: var(--sidebar-w-collapsed); }

/* ---- Logo 区 ---- */
.side-logo { display: flex; align-items: center; gap: 10px; padding: var(--space-4) var(--space-5) var(--space-3); height: var(--topbar-h); }
.side-logo img { width: 32px; height: 32px; flex-shrink: 0; border-radius: 8px; }
.side-logo:hover img { transform: none; }
.side-logo .brand { display: flex; flex-direction: column; line-height: 1.15; }
.side-logo .brand b { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--text-strong); }
.side-logo .brand span { font-size: 11px; color: var(--text-muted); }
.sidebar.collapsed .side-logo { justify-content: center; padding: var(--space-4) 0 var(--space-3); }
.sidebar.collapsed .side-logo .brand { display: none; }

/* ---- 折叠按钮 ---- */
.side-collapse {
  position: absolute; top: 18px; right: -12px; width: 24px; height: 24px; border-radius: 6px;
  background: var(--surface-solid); border: 1px solid var(--border-subtle);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); box-shadow: var(--shadow-sm);
  transition: all var(--dur-fast); z-index: 2;
}
.side-collapse svg { width: 12px; height: 12px; }
.side-collapse:hover { color: var(--text-primary); border-color: var(--border-strong); }
.sidebar.collapsed .side-collapse { transform: rotate(180deg); }

/* ---- 新对话按钮 ---- */
.side-newchat { padding: 0 var(--space-3) var(--space-3); }
.side-newchat .btn {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--radius-sm);
  font-size: var(--fs-sm); font-weight: 500; border: 1px solid var(--border-subtle);
  color: var(--text-primary); background: var(--surface-solid);
  transition: all var(--dur-fast);
}
.side-newchat .btn svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--text-secondary); }
.side-newchat .btn:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.sidebar.collapsed .side-newchat .btn { justify-content: center; }
.sidebar.collapsed .side-newchat .btn span { display: none; }

/* ---- 导航 ---- */
.side-nav { padding: 0 var(--space-3); display: flex; flex-direction: column; gap: 2px; }
.side-section-label { font-size: 11px; font-weight: 500; color: var(--text-muted); padding: var(--space-4) var(--space-3) var(--space-2); letter-spacing: 0.5px; text-transform: uppercase; }
.sidebar.collapsed .side-section-label { display: none; }

.nav-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-sm);
  color: var(--text-secondary); font-weight: 500; font-size: var(--fs-sm);
  transition: all var(--dur-fast); cursor: pointer;
}
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
.nav-item:hover { background: var(--surface-hover); color: var(--text-primary); }
.nav-item.active { background: var(--surface-2); color: var(--text-strong); }
.nav-item.active::before {
  content: ""; position: absolute; left: -1px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 16px; border-radius: var(--radius-pill);
  background: var(--text-strong);
}
.sidebar.collapsed .nav-item { justify-content: center; padding: 9px; }
.sidebar.collapsed .nav-item .label { display: none; }

/* ---- 历史对话 ---- */
.side-history { flex: 1; overflow-y: auto; padding: 0 var(--space-3) var(--space-3); margin-top: 2px; }
.history-group-title { font-size: 11px; color: var(--text-muted); padding: 10px 12px 4px; font-weight: 500; }
.history-item {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--radius-xs);
  cursor: pointer; color: var(--text-secondary); font-size: var(--fs-sm); transition: all var(--dur-fast);
}
.history-item:hover { background: var(--surface-hover); color: var(--text-primary); }
.history-item .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--text-muted); flex-shrink: 0; }
.history-item .title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-empty { padding: 8px 12px; line-height: 1.5; font-size: var(--fs-xs); color: var(--text-muted); }
.sidebar.collapsed .history-item { justify-content: center; }
.sidebar.collapsed .history-item .title, .sidebar.collapsed .history-group-title { display: none; }

/* ---- 底部个人设置 ---- */
.side-account { margin-top: auto; padding: var(--space-2) var(--space-4) var(--space-3); border-top: 1px solid var(--border-subtle); }
.account-card {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-radius: var(--radius-sm); cursor: pointer; transition: all var(--dur-fast);
}
.account-card:hover { background: var(--surface-hover); }
.account-card .avatar-sm {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-xs); font-weight: 600; color: #fff;
  background: #5436da;
}
.account-card .meta { display: flex; flex-direction: column; line-height: 1.25; overflow: hidden; flex: 1; }
.account-card .meta b { font-size: var(--fs-xs); color: var(--text-strong); font-weight: 500; }
.account-card .meta span { font-size: 11px; color: var(--text-muted); }
.account-card > svg:last-child { width: 16px; height: 16px; flex-shrink: 0; color: var(--text-muted); }
.account-card:hover > svg:last-child { color: var(--text-primary); }
.sidebar.collapsed .account-card { justify-content: center; }
.sidebar.collapsed .account-card .meta, .sidebar.collapsed .account-card > svg:last-child { display: none; }
.side-guest-note { margin: 18px 20px; font-size: 12px; line-height: 1.55; color: var(--text-muted); }
.account-card { width: 100%; text-align: left; }
.account-logo { width: 28px; height: 28px; color: #111; }