/* ══════════════════════════════════════════════════════════════
   v2 UI —— 顶栏 / 公告铃铛 / 设置弹层 / 按钮体系 / 容器 / 卡片 / 空状态
   加载顺序：legacy 拆分 CSS 之后、15-redesign.css 之前。
   ══════════════════════════════════════════════════════════════ */

/* ───────────────────────── 1. 顶栏 ───────────────────────── */
.v2-topbar {
  flex-shrink: 0;
  height: var(--topbar-h);
  margin: 12px 14px 0;              /* 与浏览器上缘留出间隙（用户要求） */
  padding: 0 var(--sp-4) 0 var(--sp-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  /* 性能：常驻全宽顶栏的大半径 blur 每帧重算，已移除 */
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.045);
  position: relative;
  z-index: var(--z-sticky);
}
.v2-topbar-left { display: flex; align-items: baseline; gap: var(--sp-3); min-width: 0; }
.v2-topbar-title {
  font-size: 17px;
  font-weight: 750;
  letter-spacing: -0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v2-topbar-actions { display: flex; align-items: center; gap: 5px; }

/* 图标按钮（顶栏通用） */
.v2-icon-btn {
  position: relative;
  min-width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--text2);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.v2-icon-btn:hover { background: var(--surface2); color: var(--text); border-color: var(--hairline); }
.v2-icon-btn:active { transform: scale(.96); }
.v2-icon-btn.active { color: var(--primary-hover); background: var(--primary-a12); }
.v2-icon-btn svg { width: 17.5px; height: 17.5px; }
.v2-icon-btn .v2-mode-label { font-size: 11px; font-weight: 700; letter-spacing: .2px; }

/* 未读角标 */
.v2-badge {
  position: absolute;
  top: 1px; right: 0;
  min-width: 15px; height: 15px;
  padding: 0 4px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f26d6d, #e05252);
  color: #fff;
  font-size: 9.5px; font-weight: 700; line-height: 15px;
  text-align: center;
  pointer-events: none;
  box-shadow: 0 0 0 2px var(--surface);
}

/* ───────────────────────── 2. 弹层（铃铛 / 设置共用） ───────────────────────── */
.v2-popover {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 380px;
  max-width: calc(100vw - 24px);
  max-height: min(560px, calc(100vh - 90px));
  display: flex;
  flex-direction: column;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  backdrop-filter: blur(24px) saturate(1.2);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.05);
  z-index: var(--z-dropdown);
  overflow: hidden;
  animation: v2PopIn .18s cubic-bezier(.22,.8,.32,1);
}
@keyframes v2PopIn {
  from { opacity: 0; transform: translateY(-8px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.v2-popover-head {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px var(--sp-4);
  border-bottom: 1px solid var(--hairline);
}
.v2-popover-title { font-size: var(--fs-md); font-weight: 750; letter-spacing: -0.1px; }
.v2-popover-body { flex: 1; overflow-y: auto; padding: var(--sp-3) var(--sp-4); }
.v2-popover-foot {
  flex-shrink: 0;
  padding: var(--sp-2) var(--sp-4);
  border-top: 1px solid var(--hairline);
  display: flex; justify-content: flex-end; gap: var(--sp-2);
}

/* 公告列表项（弹层内） */
.v2-ann-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--sp-3);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--surface2) 70%, transparent);
  color: var(--text);
  cursor: pointer;
  margin-bottom: var(--sp-2);
  transition: border-color .15s ease, transform .15s ease, background .15s ease;
}
.v2-ann-item:hover { border-color: var(--primary-a35); transform: translateY(-1px); background: var(--surface2); }
.v2-ann-item.unread { border-left: 3px solid var(--primary); }
.v2-ann-item-title { font-size: var(--fs-sm); font-weight: 650; display: flex; align-items: center; gap: 6px; }
.v2-ann-item-time { font-size: var(--fs-xs); color: var(--text2); margin-top: 4px; }
.v2-ann-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); flex-shrink: 0; box-shadow: 0 0 8px var(--primary); }

/* ───────────────────────── 3. 设置弹层 ───────────────────────── */
.v2-settings { width: 420px; }
.v2-settings-section { margin-bottom: var(--sp-5); }
.v2-settings-section:last-child { margin-bottom: 0; }
.v2-settings-label {
  font-size: 11px; font-weight: 700;
  color: var(--text2); text-transform: uppercase; letter-spacing: 1px;
  margin-bottom: var(--sp-2);
}

/* 主题色板卡 */
.v2-theme-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.v2-theme-card {
  border: 1.5px solid var(--hairline);
  border-radius: var(--r-md);
  padding: var(--sp-2);
  cursor: pointer;
  background: color-mix(in srgb, var(--surface2) 70%, transparent);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
  text-align: center;
}
.v2-theme-card:hover { transform: translateY(-1px); border-color: var(--border-strong); }
.v2-theme-card.active { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary), var(--shadow-glow); }
.v2-theme-preview {
  height: 40px; border-radius: var(--r-sm); margin-bottom: 6px;
  border: 1px solid var(--hairline);
  display: flex; align-items: flex-end; padding: 4px; gap: 3px;
}
.v2-theme-preview i { display: block; height: 8px; border-radius: 3px; flex: 1; }
.v2-theme-name { font-size: 11px; color: var(--text2); font-weight: 600; }
.v2-theme-card.active .v2-theme-name { color: var(--text); }

/* 分段选择器（密度/字号/圆角） */
.v2-seg { display: flex; gap: 3px; background: color-mix(in srgb, var(--bg) 45%, transparent); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 3px; }
.v2-seg-btn {
  flex: 1;
  padding: 6px 8px;
  border: none; border-radius: calc(var(--r-md) - 3px);
  background: transparent; color: var(--text2);
  font-size: var(--fs-xs); font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.v2-seg-btn:hover { color: var(--text); }
.v2-seg-btn.active { background: var(--surface3); color: var(--text); box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.06); }

/* ───────────────────────── 4. 按钮体系（新 UI 使用） ───────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 15px;
  border-radius: var(--r-md);
  border: 1px solid var(--hairline);
  background: var(--surface2);
  color: var(--text);
  font-size: var(--fs-sm); font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .15s ease, opacity .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.btn:active { transform: none; }
.btn-primary {
  background: var(--grad-primary); border-color: transparent; color: #fff;
  box-shadow: 0 4px 16px -3px color-mix(in srgb, var(--primary) 50%, transparent),
              inset 0 1px 0 rgba(255,255,255,0.2);
}
.btn-primary:hover { filter: brightness(1.09); border-color: transparent; box-shadow: 0 8px 24px -4px color-mix(in srgb, var(--primary) 62%, transparent), inset 0 1px 0 rgba(255,255,255,0.2); }
.btn-ghost { background: transparent; }
.btn-ghost:hover { background: var(--surface2); }
.btn-danger { background: transparent; border-color: color-mix(in srgb, var(--red) 50%, transparent); color: var(--red); }
.btn-danger:hover { background: color-mix(in srgb, var(--red) 12%, transparent); }
.btn-sm { padding: 4px 10px; font-size: var(--fs-xs); }

/* ───────────────────────── 5. 容器与滚动层统一 ───────────────────────── */
/* 统一滚动容器（新结构使用；legacy 滚动类保留原样以免回归） */
.panel-scroll { flex: 1; overflow-y: auto; min-height: 0; padding: var(--sp-5); }
.v2-container { width: 100%; margin: 0 auto; }
.v2-container-wide { max-width: 1400px; }
.v2-container-read { max-width: 960px; }

/* 宽屏下收敛 legacy 全宽滚动区（内容居中，不再无限拉宽） */
.dashboard-shell { max-width: 1400px; margin-left: auto; margin-right: auto; }
.notif-panel > #notif-list { max-width: 960px; margin-left: auto; margin-right: auto; }
.api-usage-body > * { max-width: 1400px; margin-left: auto; margin-right: auto; }
.wft-list { max-width: 1400px; margin-left: auto; margin-right: auto; }

/* ───────────────────────── 10. 导航 SVG 图标 ───────────────────────── */
.nav-icon { width: 20px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.nav-icon svg { width: 17px; height: 17px; }

/* ───────────────────────── 11. chatroom 头部对齐 .ph 风格 ───────────────────────── */
.chatroom-header {
  min-height: 56px;
  padding: 0 var(--sp-5);
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  /* 性能：吸顶头嵌套在面板内，blur 成本叠加且透视收益低，已移除 */
  border-bottom: 1px solid var(--hairline);
}
.chatroom-header h3 { font-size: 17px; font-weight: 750; letter-spacing: -0.2px; }


.chatroom-body { overflow: hidden; }

/* ───────────────────────── 13. 密度设置挂载（留白随偏好档位变化） ───────────────────────── */
.ph { padding-left: var(--sp-5); padding-right: var(--sp-5); }
.dashboard, .notif-panel { padding: var(--sp-5); }
.api-usage-body, .announcements-panel { padding: var(--sp-4) var(--sp-5) var(--sp-6); }
.chat-messages { padding: var(--sp-4); }

/* ───────────────────────── 6. 卡片系统统一（覆盖 legacy 三代混乱） ───────────────────────── */
.stat-card, .member-card, .node-card, .notif-card, .partner-card,
.kanban-card, .wft-card, .mc-card, .api-usage-kpi, .api-usage-section,
.account-card {
  border-radius: var(--r-lg);
  border: 1px solid var(--hairline);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.member-card:hover, .node-card:hover, .partner-card:hover,
.kanban-card:hover, .wft-card:hover, .mc-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary-a35);
}
/* dashboard "营销页"世代收敛：hero 24px 大圆角/重渐变 → 统一 18px 弱阴影 */
.dashboard-hero {
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
}
.dashboard-card, .dashboard-glance-card, .business-line-card {
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

/* ───────────────────────── 7. 空状态组件 ───────────────────────── */
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-6) var(--sp-4);
  text-align: center;
  color: var(--text2);
}
.empty-state svg { width: 40px; height: 40px; opacity: .4; margin-bottom: var(--sp-1); }
.empty-state-title { font-size: var(--fs-md); font-weight: 650; color: var(--text); }
.empty-state-desc { font-size: var(--fs-xs); max-width: 320px; line-height: 1.6; }

/* ───────────────────────── 9. 桌面布局收尾 ───────────────────────── */