/* ============================================================
   mdqp v4.23 redesign — 隔离样式层（在 style.css 之后加载，级联覆盖）
   仅做：① 主色改明亮靛蓝 #4F46E5  ② 顶部品牌栏 + 左侧图标栏  ③ 浅灰画布白卡
   组件内部样式仍由 style.css 提供（自动继承新 --primary）。
   ============================================================ */

/* ---------- ① 主色：明亮靛蓝 ---------- */
:root,
[data-theme='light'] {
  --primary: #4F46E5;
  --primary-hover: #4338CA;
  --primary-soft: #EEF0FF;
  --primary-gradient: linear-gradient(135deg, #4F46E5 0%, #6366F1 100%);
  --ring: rgba(79, 70, 229, .28);
  --bg: #f4f5f8;
  --surface-2: #eef0f4;
}
[data-theme='dark'] {
  --primary: #818CF8;
  --primary-hover: #A5B4FC;
  --primary-soft: #1E1B3A;
  --primary-gradient: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
  --ring: rgba(129, 140, 248, .35);
  --bg: #0f1115;
  --surface-2: #1b1f27;
}

/* ---------- ② 左侧图标栏（icon rail） ---------- */
.sidebar {
  width: 76px;
  padding: 14px 12px;
  gap: 6px;
  align-items: stretch;
  overflow: visible; /* 允许 hover 提示气泡溢出 */
}
/* 品牌位移到顶栏，rail 顶部只留一个 logo 锚点 */
.brand { display: none; }
.rail-logo {
  display: flex; align-items: center; justify-content: center;
  margin: 2px auto 14px; width: 46px; height: 46px; border-radius: 13px;
  background: var(--primary-soft); transition: .15s;
}
.rail-logo:hover { background: color-mix(in srgb, var(--primary) 18%, transparent); text-decoration: none; }
.rail-logo img { width: 30px; height: 30px; border-radius: 8px; display: block; }

.nav { align-items: stretch; }
.nav-bottom { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.nav-item { justify-content: center; gap: 0; padding: 11px 0; border-radius: 12px; }
.nav-ico { width: auto; display: flex; align-items: center; justify-content: center; }
.nav-ico .nav-svg { width: 23px; height: 23px; display: block; }
.nav-label { display: none; }
.nav-item-primary { margin: 2px 0 6px; justify-content: center; }

/* hover 提示气泡（替代被隐藏的文字标签） */
.nav-item[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%);
  background: #111827; color: #fff; font-size: 12px; font-weight: 500;
  padding: 5px 9px; border-radius: 8px; white-space: nowrap; pointer-events: none;
  z-index: 200; box-shadow: var(--shadow-md);
}
[data-theme='dark'] .nav-item[data-tip]:hover::after { background: #e5e7eb; color: #111827; }

.sidebar-toggle { justify-content: center; gap: 0; margin-top: auto; }
.sidebar-toggle .nav-label { display: none; }

/* 折叠/悬浮态：保持图标栏宽度，不展开成大侧栏 */
body.sidebar-collapsed .sidebar,
body.sidebar-collapsed.sidebar-peek .sidebar {
  width: 76px; padding-left: 12px; padding-right: 12px;
}
body.sidebar-collapsed .main-col,
body.sidebar-collapsed.sidebar-peek .main-col { margin-left: 76px; }
body.sidebar-collapsed .nav-label,
body.sidebar-collapsed.sidebar-peek .nav-label { display: none; }
body.sidebar-collapsed .brand,
body.sidebar-collapsed.sidebar-peek .brand { display: none; }
body.sidebar-collapsed .sidebar-toggle .st-ico { transform: none; }

/* ---------- ② 顶部品牌栏 ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px;
  padding: 10px 20px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar-center { display: flex; justify-content: center; min-width: 0; }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.menu-toggle { display: none; }

.brand { display: flex; align-items: center; gap: 10px; padding: 0; color: var(--text); }
.brand:hover { text-decoration: none; }
.brand-logo { width: 28px; height: 28px; border-radius: 7px; display: block; flex: 0 0 auto; }
.brand-text { display: flex; flex-direction: column; font-weight: 700; font-size: 16px; letter-spacing: -.2px; line-height: 1.15; }
.brand-text em { font-style: normal; font-weight: 400; font-size: 10px; color: var(--muted); letter-spacing: .3px; }

.search-trigger {
  display: flex; align-items: center; gap: 8px; width: min(460px, 100%);
  padding: 8px 12px; border-radius: 11px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--muted); cursor: pointer;
  font: inherit; font-size: 13.5px; transition: .15s;
}
.search-trigger:hover { border-color: var(--primary); color: var(--text-2); }
.search-trigger .st-ico { font-size: 15px; line-height: 1; }
.search-trigger .st-text { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-trigger .st-kbd {
  font-size: 11px; padding: 2px 6px; border-radius: 6px;
  background: var(--surface); border: 1px solid var(--border); color: var(--muted);
}

/* 主内容区让出图标栏宽度 */
.main-col { margin-left: 76px; }

/* 聊天页是高度敏感的 flex 链，去掉 #app 留白避免撑破 */
body.chat-page #app { padding: 0; }

/* ---------- ③ 浅灰画布 + 内容留白 ---------- */
body { background: var(--bg); }
#app { padding: 22px 26px 8px; }
.view.active { animation: fade .26s cubic-bezier(.22, .61, .36, 1); }

/* ---------- 移动端：图标栏转抽屉 ---------- */
@media (max-width: 860px) {
  .sidebar {
    width: 244px; padding: 16px 14px; gap: 4px;
    transform: translateX(-100%); background: var(--surface);
    box-shadow: var(--shadow-md); transition: transform .22s ease;
  }
  body.nav-open .sidebar { transform: translateX(0); }
  .main-col { margin-left: 0; }
  .menu-toggle { display: inline-flex; }
  .topbar-center { display: none; }
  .rail-logo { display: none; }
  .brand { display: flex; }
  .nav-item { justify-content: flex-start; gap: 11px; padding: 11px 12px; }
  .nav-label { display: inline; }
  .nav-item[data-tip]:hover::after { display: none; }
  #app { padding: 16px 14px 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .topbar { backdrop-filter: none; }
}