/* 楚云升客服系统 - 公共样式（impeccable 设计系统） */

/* ============================================================
   设计系统 Token（Impeccable 体系）
   - sky 湖心蓝品牌色 + 带品牌蓝 hue 的中性色（tinted neutrals）
   - 4pt 间距系统 + 5 级字号 scale + 指数缓动
   - 避免纯黑/纯白/死灰
   ============================================================ */
:root {
  /* 品牌色 - 科技蓝 */
  --primary: #1677ff;
  --primary-hover: #0f5fd6;
  --primary-active: #0a4eb8;
  --primary-light: #eaf1ff;
  --primary-bg: #d6e4ff;
  --gray-50: #FAFAFA;
  --gray-100: #F5F5F5;
  --gray-200: #EEEEEE;
  --primary-ring: rgba(22, 119, 255, 0.16);

  /* 中性色 - 蓝灰系（白底深蓝字） */
  --bg: #ffffff;
  --bg-card: #f0f4ff;
  --bg-hover: #e6edf9;

  /* 深色侧边栏 - 深蓝黑（非纯黑） */
  --bg-sidebar: #0a1a3a;
  --bg-sidebar-hover: #12305e;
  --bg-sidebar-active: #1677ff;

  /* 文本 - 蓝灰系 */
  --text-main: #1a2b4a;
  --text-regular: #33415c;
  --text-secondary: #6b7a99;
  --text-placeholder: #8a98b8;
  --text-white: #FFFFFF;

  /* 右侧访客面板文字 */
  --side-title: #1a2b4a;
  --side-label: #6b7a99;
  --side-value: #33415c;

  /* 边框 - 蓝灰 */
  --border: #d6e0f0;
  --border-light: #e3e9f5;

  /* 页面/第三层级（dark 主题会覆盖） */
  --bg-page: #ffffff;
  --text-tertiary: #8a98b8;

  /* 语义色 */
  --success: #10B981;
  --success-bg: #E8F8F1;
  --warning: #D97706;
  --warning-bg: #FCF3E3;
  --danger: #DC2626;
  --danger-bg: #FCEDED;
  --info: #6B6B6B;

  /* 阴影 - 带蓝调，subtle */
  --shadow-sm: 0 1px 2px rgba(16, 32, 48, 0.05), 0 1px 3px rgba(16, 32, 48, 0.04);
  --shadow-md: 0 2px 6px rgba(16, 32, 48, 0.06), 0 8px 24px rgba(16, 32, 48, 0.07);
  --shadow-lg: 0 4px 12px rgba(16, 32, 48, 0.08), 0 16px 40px rgba(16, 32, 48, 0.1);

  /* 圆角 */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 999px;

  /* 排版 token - 5 级字号（1.25 major third） */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei UI', 'Microsoft YaHei', system-ui, sans-serif;
  --text-xs: 0.75rem;    /* 12px 辅助/标签 */
  --text-sm: 0.875rem;   /* 14px 次要 UI */
  --text-base: 1rem;     /* 16px 正文 */
  --text-lg: 1.25rem;    /* 20px 子标题 */
  --text-xl: 1.5rem;     /* 24px 区块标题 */
  --text-2xl: 2rem;      /* 32px 大标题 */
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* 间距 token - 4pt 体系 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* 缓动 - 指数缓动，避免生硬 */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);

  /* 过渡 - 统一节奏 */
  --transition-fast: all 0.15s var(--ease-out);
  --transition-base: all 0.25s var(--ease-out);
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", system-ui, sans-serif;
  color: var(--text-main);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: normal;
}
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-hover); }

/* ============================================================
   登录页
   ============================================================ */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  position: relative;
  overflow: hidden;
  /* 多层径向渐变营造有层次感的 teal 氛围，而非简单线性渐变 */
  background:
    radial-gradient(ellipse 80% 60% at 15% 10%, rgba(2, 132, 199, 0.12), transparent 60%),
    radial-gradient(ellipse 70% 50% at 90% 90%, rgba(2, 132, 199, 0.10), transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 20%, rgba(2, 132, 199, 0.06), transparent 55%),
    var(--bg);
}
/* 背景装饰圆点，增强设计意图 */
.login-page::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(2, 132, 199, 0.14) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 0.35;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 30%, transparent 75%);
}

.login-card {
  width: 420px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: 40px 44px 32px;
  box-shadow: var(--shadow-lg);
  position: relative;
  z-index: 1;
  transition: transform 0.3s var(--ease-out-quart);
}
.login-card:hover { transform: translateY(-2px); }

.login-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  margin-bottom: 32px;
}
.login-logo {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #1677ff 0%, #0f5fd6 100%);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 26px;
  box-shadow: 0 6px 16px rgba(2, 132, 199, 0.3);
}
.login-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.3;
  letter-spacing: 0.5px;
}
.login-subtitle {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: -4px;
}

.login-form-item { margin-bottom: 18px; }
.login-form-label { display: block; font-size: 13px; color: var(--text-regular); margin-bottom: 6px; font-weight: 500; }
.login-form-label .required { color: var(--danger); margin-right: 4px; }

.login-input {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--text-main);
  outline: none;
  background: var(--bg-card);
  transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.login-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-ring);
}

.login-segment {
  display: flex;
  background: var(--bg);
  border-radius: var(--radius);
  padding: 4px;
}
.login-segment-item {
  flex: 1;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--text-regular);
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.2s var(--ease-out);
}
.login-segment-item.active {
  background: var(--primary);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.3);
}

.login-checkbox-row {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: var(--text-regular);
  margin: 16px 0 20px;
  cursor: pointer;
}
.login-checkbox { margin-right: 6px; accent-color: var(--primary); }

.login-btn {
  width: 100%;
  height: 46px;
  background: linear-gradient(135deg, #1677ff 0%, #0f5fd6 100%);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 2px;
  transition: all 0.25s var(--ease-out-quart);
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.28);
}
.login-btn:hover {
  box-shadow: 0 6px 18px rgba(2, 132, 199, 0.4);
  transform: translateY(-1px);
}
.login-btn:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(2, 132, 199, 0.3); }

.login-footer {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border-light);
  text-align: center;
  font-size: 13px;
  color: var(--text-secondary);
}
.login-footer-tip { margin-bottom: 12px; }
.login-footer-tip a { color: var(--primary); margin-left: 12px; font-weight: 500; }
.login-footer-brand { color: var(--text-placeholder); font-size: 12px; }

/* ============================================================
   后台布局
   ============================================================ */
.app-layout { display: flex; height: 100vh; overflow: hidden; }

.app-sidebar {
  width: 92px;
  background: linear-gradient(180deg, #0a1a3a 0%, #091626 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 0;
  flex-shrink: 0;
}
.app-sidebar-avatar {
  width: 42px;
  height: 42px;
  background: linear-gradient(135deg, #1677ff 0%, #0f5fd6 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 19px;
  cursor: pointer;
  margin-bottom: 14px;
  box-shadow: 0 3px 10px rgba(2, 132, 199, 0.4);
  transition: transform 0.2s var(--ease-out-quart);
}
.app-sidebar-avatar:hover { transform: scale(1.08); }

.app-sidebar-menu { flex: 1; width: 100%; overflow-y: auto; padding: 4px 0; }
.app-sidebar-menu::-webkit-scrollbar { width: 0; }

.app-sidebar-item {
  width: 80px;
  min-height: 50px;
  margin: 3px auto;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: #9DB8B5;
  cursor: pointer;
  transition: all 0.22s var(--ease-out-quart);
  position: relative;
  padding: 4px 2px;
}
.app-sidebar-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #EAF5F4;
}
.app-sidebar-item.active {
  background: var(--bg-sidebar-active);
  color: #fff;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.4);
}
.app-sidebar-item .side-icon { font-size: 20px; line-height: 1; transition: transform 0.2s var(--ease-out-quart); }
.app-sidebar-item:hover .side-icon { transform: translateY(-1px); }
.app-sidebar-item .side-label {
  font-size: 11px;
  line-height: 1.2;
  text-align: center;
  color: inherit;
  word-break: break-all;
}
.app-sidebar-bottom { padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.08); width: 100%; display: flex; flex-direction: column; align-items: center; }

/* ============================================================
   工作台三栏
   ============================================================ */
.workbench { flex: 1; display: flex; }

.workbench-session {
  width: 280px;
  background: var(--bg-card);
  border-right: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
}
.workbench-status {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-light);
}
.workbench-status-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  background: var(--success-bg);
  color: var(--success);
  border-radius: 16px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s var(--ease-out);
}
.workbench-status-row:hover { filter: brightness(0.97); }
.workbench-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px rgba(39, 164, 105, 0.15); }

.workbench-tabs {
  display: flex;
  padding: 0 16px;
  border-bottom: 1px solid var(--border-light);
  font-size: 13px;
}
.workbench-tabs-item {
  padding: 12px 12px;
  color: var(--text-regular);
  cursor: pointer;
  position: relative;
  margin-right: 16px;
  transition: color 0.2s var(--ease-out);
}
.workbench-tabs-item:hover { color: var(--text-main); }
.workbench-tabs-item.active { color: var(--primary); font-weight: 600; }
.workbench-tabs-item.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--primary);
  border-radius: 2px 2px 0 0;
}

.workbench-search { padding: 12px 16px; }
.workbench-search input {
  width: 100%;
  height: 34px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 0 12px;
  font-size: 13px;
  outline: none;
  background: var(--bg);
  transition: all 0.2s var(--ease-out);
}
.workbench-search input:focus { border-color: var(--primary); background: #fff; box-shadow: 0 0 0 3px var(--primary-ring); }

.workbench-session-list { flex: 1; overflow-y: auto; padding: 8px 0; }
.workbench-empty {
  padding: 60px 16px;
  text-align: center;
  color: var(--text-placeholder);
  font-size: 13px;
}
.workbench-empty-icon { font-size: 48px; color: var(--border); margin-bottom: 8px; }

/* 工作台聊天区 */
.workbench-chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
}
.workbench-chat-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-placeholder);
  font-size: 14px;
}
.workbench-chat-empty-icon {
  width: 80px;
  height: 80px;
  background: var(--bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  color: var(--border);
  margin-bottom: 16px;
}

/* 工作台右侧 */
.workbench-side {
  width: 280px;
  background: var(--bg-card);
  border-left: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
}
.workbench-side-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-light);
}
.workbench-side-tabs-item {
  flex: 1;
  padding: 12px 0;
  text-align: center;
  font-size: 14px;
  color: var(--text-regular);
  cursor: pointer;
  position: relative;
  transition: color 0.2s var(--ease-out);
}
.workbench-side-tabs-item:hover { color: var(--text-main); }
.workbench-side-tabs-item.active { color: var(--primary); font-weight: 600; }
.workbench-side-tabs-item.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 20%;
  right: 20%;
  height: 2px;
  background: var(--primary);
  border-radius: 2px 2px 0 0;
}
.workbench-side-content { flex: 1; padding: 24px; overflow-y: auto; }
.workbench-side-empty { text-align: center; color: var(--text-placeholder); font-size: 13px; padding: 60px 16px; }

/* ============================================================
   通用模块页面
   ============================================================ */
.module-page {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: var(--bg);
}
.module-header {
  padding: 16px 24px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.module-title { font-size: 18px; font-weight: 700; color: var(--text-main); letter-spacing: 0.3px; }
.module-body {
  flex: 1;
  padding: 16px 24px;
  overflow-y: auto;
}
.module-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.25s var(--ease-out);
}
.module-card:hover { box-shadow: var(--shadow-md); }
.module-card-title { font-size: 15px; font-weight: 700; margin-bottom: 16px; color: var(--text-main); }

/* 数据面板 */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}
.kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.25s var(--ease-out), transform 0.25s var(--ease-out-quart);
}
.kpi-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.kpi-label { font-size: 13px; color: var(--text-secondary); margin-bottom: 8px; }
.kpi-value { font-size: 28px; font-weight: 700; color: var(--text-main); font-variant-numeric: tabular-nums; }
.kpi-delta { font-size: 12px; margin-top: 4px; }
.kpi-delta.up { color: var(--success); }
.kpi-delta.down { color: var(--danger); }
.kpi-sub { font-size: 12px; color: var(--text-tertiary); margin-top: 4px; }

/* 数据面板 - 天马云客风格 */
.dash-hero {
  background: linear-gradient(135deg, #1E2A3F 0%, #0F1729 100%);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  color: #fff;
  margin-bottom: 16px;
  box-shadow: 0 4px 20px rgba(15, 23, 41, 0.12);
}
.dash-hero-tag {
  display: inline-block;
  padding: 4px 12px;
  background: rgba(96, 165, 250, 0.15);
  color: #93C5FD;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}
.dash-hero-row { display: flex; align-items: center; gap: 14px; }
.dash-hero-logo {
  width: 56px; height: 56px;
  background: linear-gradient(135deg, #3B82F6, #1D4ED8);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}
.dash-hero-title { font-size: 24px; font-weight: 700; line-height: 1.2; }
.dash-hero-badge {
  display: inline-block;
  margin-top: 6px;
  padding: 3px 10px;
  background: rgba(59, 130, 246, 0.2);
  color: #93C5FD;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
}
.dash-hero-sub { font-size: 13px; color: #9CA3AF; margin-top: 12px; line-height: 1.6; }
.dash-hero-status {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 14px 20px;
  min-width: 180px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.dash-hero-state {
  display: flex; align-items: center; gap: 8px;
  color: #34D399; font-weight: 600; font-size: 15px;
}
.dash-hero-dot {
  width: 8px; height: 8px;
  background: #34D399;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(52, 211, 153, 0.6);
}

.dash-quota {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 16px;
}
.dash-quota-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 18px;
}
.dash-quota-title { font-size: 15px; font-weight: 700; color: var(--text-main); }
.dash-quota-range { font-size: 12px; color: var(--text-tertiary); }
.quota-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.quota-item { background: var(--bg-page); border-radius: 12px; padding: 16px 18px; }
.quota-item-head { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--text-secondary); margin-bottom: 12px; }
.quota-bar { height: 8px; background: #E5E7EB; border-radius: 4px; overflow: hidden; margin-bottom: 12px; }
.quota-bar-fill { height: 100%; border-radius: 4px; transition: width 0.4s var(--ease-out); }
.quota-item-desc { font-size: 12px; color: var(--text-tertiary); line-height: 1.6; }

.dash-bottom { display: grid; grid-template-columns: 1fr 1.4fr; gap: 16px; }
.dash-account, .dash-trend {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  box-shadow: var(--shadow-sm);
}
.dash-account-title, .dash-trend-title { font-size: 15px; font-weight: 700; color: var(--text-main); margin-bottom: 16px; }
.account-row { display: flex; align-items: center; padding: 9px 0; border-bottom: 1px dashed var(--border-light); font-size: 13px; }
.account-row:last-child { border-bottom: none; }
.account-label { color: var(--text-tertiary); width: 80px; flex-shrink: 0; }
.account-badge {
  background: #DBEAFE; color: #1D4ED8; padding: 3px 10px; border-radius: 6px; font-size: 12px; font-weight: 500;
}
.account-status { display: inline-flex; align-items: center; gap: 6px; color: var(--success); font-weight: 500; }
.status-dot { width: 7px; height: 7px; background: var(--success); border-radius: 50%; }
.account-value-chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  background: #1F2937;
  color: #FFFFFF;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
[data-theme="dark"] .account-value-chip {
  background: #1E3A8A;
  color: #93C5FD;
}
[data-theme="dark"] .dash-account { background: var(--bg-card) !important; color: var(--text-main) !important; border-color: var(--border-light) !important; }
[data-theme="dark"] .dash-account-title { color: var(--text-main); }
[data-theme="dark"] .account-label { color: var(--text-tertiary); }

.dash-trend-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.dash-trend-tag {
  font-size: 12px; color: var(--text-secondary);
  padding: 3px 10px; border-radius: 6px;
  background: var(--bg-page);
  transition: color 0.2s;
}
.dash-trend-tag:hover { color: var(--primary); }
.dash-trend-chart { width: 100%; height: 160px; }
.dash-trend-foot { display: flex; justify-content: space-around; padding-top: 12px; margin-top: 8px; border-top: 1px dashed var(--border-light); text-align: center; }
.dash-trend-stat { font-size: 18px; font-weight: 700; color: #3B82F6; font-variant-numeric: tabular-nums; }
.dash-trend-stat-label { font-size: 12px; color: var(--text-tertiary); margin-top: 2px; }

/* Dashboard 表格（近7天接待 / 群聊统计） */
.dash-table-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
  margin-top: 16px;
}
.dash-table-title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 14px;
  color: var(--text-main);
}
.dash-table { display: flex; flex-direction: column; }
.dash-table-head, .dash-table-row {
  display: grid;
  grid-template-columns: 1.6fr 0.7fr 0.7fr 0.7fr 0.9fr 0.7fr 0.9fr;
  padding: 11px 16px;
  align-items: center;
  font-size: 13px;
}
.dash-table-head {
  background: var(--bg-page);
  border-radius: 8px;
  color: var(--text-secondary);
  font-weight: 600;
  border-bottom: none;
}
.dash-table-row {
  color: var(--text-main);
  border-bottom: 1px solid var(--border-light);
  transition: background 0.15s;
  font-variant-numeric: tabular-nums;
}
.dash-table-row:last-child { border-bottom: none; }
.dash-table-row:hover { background: rgba(59, 130, 246, 0.08); }
.dash-table-row.active-row { background: rgba(59, 130, 246, 0.15); }
.dash-table-row > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-table-empty {
  padding: 40px 0;
  text-align: center;
  color: var(--text-tertiary);
  font-size: 13px;
}
/* 群聊表格列数不同（5 列） */
.dash-table-card + .dash-table-card .dash-table-head,
.dash-table-card + .dash-table-card .dash-table-row {
  grid-template-columns: 1.5fr 0.8fr 1fr 1fr 1fr;
}
.chart-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.chart-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}
.chart-card-title { font-size: 15px; font-weight: 700; margin-bottom: 16px; }
.chart-area { width: 100%; height: 320px; }

/* Element Plus 微调 */
.el-button--primary { background: var(--primary); border-color: var(--primary); }
.el-button--primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.el-button { transition: all 0.2s var(--ease-out); }
.el-table { font-size: 13px; --el-table-border-color: var(--border-light); }
.el-tag { font-size: 12px; }
.el-dialog { border-radius: var(--radius-lg); }
.el-dialog__title { font-weight: 700; }

/* 滚动条 */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-thumb { background: #C3CECC; border-radius: 4px; }

/* ============================================================
   暗色主题（深蓝灰 tinted neutral：#0a0f1e 主体 + #131c33 卡片 + #1a2540 高亮块）
   启用方式：<html data-theme="dark">
   ============================================================ */
[data-theme="dark"] {
  --primary: #3b82f6;
  --primary-hover: #60a5fa;
  --primary-active: #2563eb;
  --primary-light: #1a2540;
  --primary-bg: #131c33;
  --primary-ring: rgba(59, 130, 246, 0.25);
  --bg: #0a0f1e;
  --bg-card: #131c33;
  --bg-page: #0a0f1e;
  --bg-hover: #1a2540;
  --bg-sidebar: #060b17;
  --bg-sidebar-hover: #131c33;
  --bg-sidebar-active: #3b82f6;
  --text-main: #e6edf7;
  --text-regular: #c7d2e3;
  --text-secondary: #8a98b8;
  --text-tertiary: #7a88a6;
  --text-placeholder: #7a88a6;
  --text-white: #FFFFFF;
  --border: #243049;
  --border-light: #222C3A;
  --side-title: #7dd3fc;
  --side-label: #93c5fd;
  --side-value: #7dd3fc;
  --success: #4ADE80;
  --success-bg: #0F1F14;
  --warning: #FBBF24;
  --warning-bg: #241D0A;
  --danger: #F87171;
  --danger-bg: #241010;
  --info: #8a98b8;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.5), 0 16px 40px rgba(0, 0, 0, 0.4);
}
[data-theme="dark"] body { background: #0a0f1e; color: #e6edf7; }
[data-theme="dark"] .app-sidebar { background: #0A0F17 !important; }
[data-theme="dark"] .app-sidebar-item { color: #C9D4E0 !important; }
[data-theme="dark"] .app-sidebar-item:hover { background: rgba(56, 189, 248, 0.15) !important; color: #e6edf7 !important; }
[data-theme="dark"] .app-sidebar-item.active { background: rgba(56, 189, 248, 0.22) !important; color: #FFFFFF !important; }
[data-theme="dark"] .app-sidebar-avatar { background: #1a2540 !important; border-color: #243049 !important; }
[data-theme="dark"] .app-sidebar-bottom { border-top-color: #243049 !important; }
[data-theme="dark"] .module-page { background: #0a0f1e; color: #e6edf7; }
[data-theme="dark"] .module-header { background: #0a0f1e !important; border-bottom-color: #243049 !important; color: #e6edf7; }
[data-theme="dark"] .module-title { color: #e6edf7; }
[data-theme="dark"] .module-body { background: #0a0f1e; color: #e6edf7; }
[data-theme="dark"] .el-card,
[data-theme="dark"] .chart-card { background: #131c33 !important; color: #e6edf7 !important; border-color: #243049 !important; }
[data-theme="dark"] .chart-card-title { color: #c7d2e3; }
[data-theme="dark"] .el-table,
[data-theme="dark"] .el-table tr,
[data-theme="dark"] .el-table th.el-table__cell { background: #131c33 !important; color: #e6edf7 !important; border-color: #243049 !important; }
[data-theme="dark"] .el-table--striped .el-table__body tr.el-table__row--striped td { background: #1a2540 !important; }
[data-theme="dark"] .el-table td.el-table__cell { border-color: #243049 !important; }
[data-theme="dark"] .el-table__row:hover > td { background: #1a2540 !important; }
[data-theme="dark"] .el-input__wrapper,
[data-theme="dark"] .el-textarea__inner { background: #1a2540 !important; box-shadow: 0 0 0 1px #243049 inset !important; color: #e6edf7 !important; }
[data-theme="dark"] .el-input__inner { color: #e6edf7 !important; }
[data-theme="dark"] .el-input__inner::placeholder { color: #7a88a6 !important; }
[data-theme="dark"] .el-button.is-plain { background: #1a2540 !important; border-color: #243049 !important; color: #c7d2e3 !important; }
[data-theme="dark"] .el-button { background: #1a2540; border-color: #243049; color: #e6edf7; }
[data-theme="dark"] .el-button--primary { background: #3b82f6; border-color: #3b82f6; color: #0A0F17; }
[data-theme="dark"] .el-button--primary:hover { background: #60a5fa; border-color: #60a5fa; color: #FFFFFF; }
[data-theme="dark"] .el-dialog { background: #131c33 !important; }
[data-theme="dark"] .el-dialog__title { color: #e6edf7 !important; }
[data-theme="dark"] .el-dialog__body { color: #e6edf7 !important; }
[data-theme="dark"] .el-message-box { background: #131c33 !important; }
[data-theme="dark"] .el-message-box__title, [data-theme="dark"] .el-message-box__content { color: #e6edf7 !important; }
[data-theme="dark"] .workbench,
[data-theme="dark"] .workbench-session,
[data-theme="dark"] .workbench-chat,
[data-theme="dark"] .workbench-sidebar,
[data-theme="dark"] .workbench-side,
[data-theme="dark"] .workbench-context { background: #131c33 !important; color: #e6edf7 !important; border-color: #243049 !important; }
[data-theme="dark"] .workbench-status { border-bottom-color: #243049 !important; color: #e6edf7 !important; }
[data-theme="dark"] .workbench-side-tabs { border-bottom-color: #243049 !important; }
[data-theme="dark"] .workbench-side-tabs-item { color: #8a98b8; }
[data-theme="dark"] .workbench-side-content { background: transparent; }
[data-theme="dark"] .workbench-context-title { color: #c7d2e3 !important; }
[data-theme="dark"] .workbench-msg-content { background: #1a2540 !important; color: #e6edf7 !important; }
[data-theme="dark"] .workbench-msg-content .time { color: #7a88a6 !important; opacity: 1 !important; }
[data-theme="dark"] .quick-msg-item { background: #1a2540 !important; color: #c7d2e3 !important; }
[data-theme="dark"] .quick-msg-item:hover { background: #243049 !important; }
[data-theme="dark"] .stat-card { background: #131c33 !important; color: #e6edf7 !important; }
[data-theme="dark"] .stat-label { color: #8a98b8; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #243049; }
[data-theme="dark"] ::-webkit-scrollbar-track { background: #0a0f1e; }
/* dark 下强制文字对比度 */
[data-theme="dark"] div[style*="color:#909399"] { color: #8a98b8 !important; }
[data-theme="dark"] div[style*="color:#606266"] { color: #c7d2e3 !important; }
[data-theme="dark"] div[style*="color:#303133"] { color: #e6edf7 !important; }
[data-theme="dark"] div[style*="color:#C0C4CC"] { color: #7a88a6 !important; }
[data-theme="dark"] div[style*="color:#1A1A1A"] { color: #e6edf7 !important; }
[data-theme="dark"] div[style*="color:#4A4A4A"] { color: #c7d2e3 !important; }
[data-theme="dark"] div[style*="color:#6B6B6B"] { color: #8a98b8 !important; }
/* dark 下白底/浅灰底 → sky 蓝色（用户原话："改成浅蓝底"） */
[data-theme="dark"] div[style*="background:#fff"],
[data-theme="dark"] div[style*="background:#FFFFFF"],
[data-theme="dark"] div[style*="background:#F5F5F5"],
[data-theme="dark"] div[style*="background:#FAFAFA"],
[data-theme="dark"] div[style*="background:#F0F9FF"],
[data-theme="dark"] div[style*="background:#F0FDFA"],
[data-theme="dark"] div[style*="background:#E0F2FE"],
[data-theme="dark"] div[style*="background:#F4F7FA"] { background: #1E3A5F !important; color: #E0F2FE !important; }
[data-theme="dark"] div[style*="border-color:#EBEEF5"] { border-color: #243049 !important; }
[data-theme="dark"] div[style*="border-bottom:1px solid #F0F0F0"] { border-bottom-color: #243049 !important; }
[data-theme="dark"] div[style*="border-top:1px solid #EBEEF5"] { border-top-color: #243049 !important; }
[data-theme="dark"] .msg .time,
[data-theme="dark"] .workbench-msg-time { opacity: 1 !important; color: #7a88a6 !important; }

/* 内联白色背景兜底（Vue :style 编译后浏览器可能转 rgb，覆盖所有变体） */
[data-theme="dark"] *[style*="background:#fff"],
[data-theme="dark"] *[style*="background: #fff"],
[data-theme="dark"] *[style*="background:#FFF"],
[data-theme="dark"] *[style*="background: #FFF"],
[data-theme="dark"] *[style*="background: rgb(255, 255, 255)"],
[data-theme="dark"] *[style*="background: rgb(255,255,255)"],
[data-theme="dark"] *[style*="background:#FFFFFF"],
[data-theme="dark"] *[style*="background: #FFFFFF"] { background-color: #1a2540 !important; }

/* ============================================================
   全局组件打磨（Impeccable：排版节奏 / 动效 / 细节）
   ============================================================ */

/* 排版节奏：垂直 rhythm 以行高为基础单位 */
body {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  letter-spacing: 0.01em;
}
h1, h2, h3, h4 { line-height: var(--leading-tight); letter-spacing: -0.01em; }
.small, .el-table__cell, .el-form-item__label, .el-radio__label, .el-checkbox__label { font-size: var(--text-sm); }

/* 数字对齐（表格/统计用等宽数字） */
.el-table, .stat-card, .chart-card, .el-statistic { font-variant-numeric: tabular-nums; }

/* 按钮统一过渡 + 反馈 */
.el-button {
  transition: var(--transition-fast);
  border-radius: var(--radius-sm);
  font-weight: 500;
}
.el-button:not(.is-disabled):hover { transform: translateY(-1px); }
.el-button:not(.is-disabled):active { transform: translateY(0); }
.el-button--primary { box-shadow: 0 1px 3px rgba(2, 132, 199, 0.25); }

/* 卡片统一 */
.el-card, .chart-card, .stat-card {
  border-radius: var(--radius-lg) !important;
  transition: var(--transition-base);
  border-color: var(--border-light) !important;
}
.el-card:hover, .chart-card:hover, .stat-card:hover {
  box-shadow: var(--shadow-md) !important;
  border-color: var(--border) !important;
}

/* 表格行 hover 反馈 */
.el-table__body tr { transition: background 0.15s ease; }

/* 弹窗动效（淡入 + 轻微缩放，指数缓动） */
.el-dialog {
  border-radius: var(--radius-lg);
  animation: dialogIn 0.28s var(--ease-out);
}
@keyframes dialogIn {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.el-message-box { border-radius: var(--radius-lg); animation: dialogIn 0.28s var(--ease-out); }

/* 输入框 focus 更精致 */
.el-input__wrapper, .el-textarea__inner {
  border-radius: var(--radius-sm);
  transition: var(--transition-fast);
}

/* 标签/徽章统一 */
.el-tag { border-radius: var(--radius-full); font-weight: 500; }

/* 滚动条细腻化 */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #C7D2DC; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #A9B8C6; }

/* 链接 hover */
a { transition: color 0.15s ease; }

/* 焦点可见性（WCAG） */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* 模块页标题统一层级 */
.module-title {
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* 登录页卡片动效 */
.login-card { animation: dialogIn 0.4s var(--ease-out); }

/* 侧边栏菜单项过渡 */
.app-sidebar-item { transition: background 0.15s var(--ease-out), color 0.15s var(--ease-out); }

/* 工作台消息气泡入场（轻微） */
.workbench-msg, .msg { animation: msgIn 0.2s var(--ease-out); }
@keyframes msgIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 快速消息 hover */
.quick-msg-item { transition: var(--transition-fast); }

/* ===== 移动端响应式 ===== */
@media (max-width: 900px) {
  .app-sidebar { width: 56px; padding: 10px 0; }
  .app-sidebar .side-label { display: none; }
  .app-sidebar-menu { padding: 2px 0; }
  .workbench { position: relative; }
  .workbench-session {
    position: absolute; inset: 0; width: 100%; z-index: 1; border-right: none;
  }
  .workbench-chat {
    position: absolute; inset: 0; width: 100%; z-index: 2; display: none;
  }
  .workbench.mobile-chat-open .workbench-chat { display: flex; }
  .workbench.mobile-chat-open .workbench-session { display: none; }
  .workbench-side { display: none; }
  .mobile-back-btn { display: inline-block !important; }
}


/* ============================================================
   dark 主题内联样式兜底补丁（覆盖 Vue :style 硬编码颜色）
   ============================================================ */

/* --- 通用文字颜色兜底 --- */
[data-theme="dark"] *[style*="color:#909399"],
[data-theme="dark"] *[style*="color: #909399"],
[data-theme="dark"] *[style*="color:#9B9B9B"],
[data-theme="dark"] *[style*="color: #9B9B9B"],
[data-theme="dark"] *[style*="color:#A0A0A0"],
[data-theme="dark"] *[style*="color:#8a8a8a"],
[data-theme="dark"] *[style*="color:#888888"] { color: #8a98b8 !important; }

[data-theme="dark"] *[style*="color:#606266"],
[data-theme="dark"] *[style*="color: #606266"],
[data-theme="dark"] *[style*="color:#71717A"],
[data-theme="dark"] *[style*="color: #71717A"],
[data-theme="dark"] *[style*="color:#6B6B6B"],
[data-theme="dark"] *[style*="color: #6B6B6B"],
[data-theme="dark"] *[style*="color:#666666"] { color: #c7d2e3 !important; }

[data-theme="dark"] *[style*="color:#303133"],
[data-theme="dark"] *[style*="color: #303133"],
[data-theme="dark"] *[style*="color:#1A1A1A"],
[data-theme="dark"] *[style*="color: #1A1A1A"],
[data-theme="dark"] *[style*="color:#1a1a1a"],
[data-theme="dark"] *[style*="color: #1a1a1a"],
[data-theme="dark"] *[style*="color:#333333"],
[data-theme="dark"] *[style*="color:#333"] { color: #e6edf7 !important; }

[data-theme="dark"] *[style*="color:#4A4A4A"],
[data-theme="dark"] *[style*="color: #4A4A4A"],
[data-theme="dark"] *[style*="color:#475569"],
[data-theme="dark"] *[style*="color: #475569"] { color: #c7d2e3 !important; }

[data-theme="dark"] *[style*="color:#C0C4CC"],
[data-theme="dark"] *[style*="color: #C0C4CC"] { color: #7a88a6 !important; }

[data-theme="dark"] *[style*="color:#1677ff"],
[data-theme="dark"] *[style*="color: #1677ff"],
[data-theme="dark"] *[style*="color:#409EFF"],
[data-theme="dark"] *[style*="color: #409EFF"] { color: #60a5fa !important; }

[data-theme="dark"] *[style*="color:#27A469"],
[data-theme="dark"] *[style*="color: #27A469"],
[data-theme="dark"] *[style*="color:#07C160"],
[data-theme="dark"] *[style*="color: #07C160"] { color: #4ADE80 !important; }

[data-theme="dark"] *[style*="color:#DC2626"],
[data-theme="dark"] *[style*="color: #DC2626"],
[data-theme="dark"] *[style*="color:#F56C6C"],
[data-theme="dark"] *[style*="color: #F56C6C"] { color: #F87171 !important; }

/* --- 通用背景颜色兜底 --- */
[data-theme="dark"] *[style*="background:#fff"],
[data-theme="dark"] *[style*="background: #fff"],
[data-theme="dark"] *[style*="background:#FFF"],
[data-theme="dark"] *[style*="background: #FFF"],
[data-theme="dark"] *[style*="background:#FFFFFF"],
[data-theme="dark"] *[style*="background: #FFFFFF"],
[data-theme="dark"] *[style*="background:#ffffff"],
[data-theme="dark"] *[style*="background: #ffffff"],
[data-theme="dark"] *[style*="background: rgb(255, 255, 255)"],
[data-theme="dark"] *[style*="background: rgb(255,255,255)"] { background-color: #1a2540 !important; color: #e6edf7 !important; }

[data-theme="dark"] *[style*="background:#FAFAFA"],
[data-theme="dark"] *[style*="background: #FAFAFA"],
[data-theme="dark"] *[style*="background:#F5F5F5"],
[data-theme="dark"] *[style*="background: #F5F5F5"],
[data-theme="dark"] *[style*="background:#F0F9FF"],
[data-theme="dark"] *[style*="background: #F0F9FF"],
[data-theme="dark"] *[style*="background:#F0FDFA"],
[data-theme="dark"] *[style*="background: #F0FDFA"],
[data-theme="dark"] *[style*="background:#E0F2FE"],
[data-theme="dark"] *[style*="background: #E0F2FE"],
[data-theme="dark"] *[style*="background:#F4F7FA"],
[data-theme="dark"] *[style*="background: #F4F7FA"],
[data-theme="dark"] *[style*="background:#F0F0F0"],
[data-theme="dark"] *[style*="background: #F0F0F0"],
[data-theme="dark"] *[style*="background:#F4F4F5"],
[data-theme="dark"] *[style*="background: #F4F4F5"],
[data-theme="dark"] *[style*="background:#F1F5F9"],
[data-theme="dark"] *[style*="background: #F1F5F9"],
[data-theme="dark"] *[style*="background:#F5F7FA"],
[data-theme="dark"] *[style*="background: #F5F7FA"] { background-color: #1a2540 !important; color: #e6edf7 !important; }

[data-theme="dark"] *[style*="background:#EAF7F0"],
[data-theme="dark"] *[style*="background: #EAF7F0"],
[data-theme="dark"] *[style*="background:#E8F8F1"],
[data-theme="dark"] *[style*="background: #E8F8F1"] { background-color: #0F1F14 !important; color: #4ADE80 !important; }

[data-theme="dark"] *[style*="background:#FCF3E3"],
[data-theme="dark"] *[style*="background: #FCF3E3"] { background-color: #241D0A !important; color: #FBBF24 !important; }

[data-theme="dark"] *[style*="background:#FCEDED"],
[data-theme="dark"] *[style*="background: #FCEDED"],
[data-theme="dark"] *[style*="background:#FEF0F0"],
[data-theme="dark"] *[style*="background: #FEF0F0"],
[data-theme="dark"] *[style*="background:#FEE2E2"],
[data-theme="dark"] *[style*="background: #FEE2E2"] { background-color: #241010 !important; color: #F87171 !important; }

[data-theme="dark"] *[style*="background:#DBEAFE"],
[data-theme="dark"] *[style*="background: #DBEAFE"] { background-color: #1a2540 !important; color: #93C5FD !important; }

[data-theme="dark"] *[style*="background:#1F2937"],
[data-theme="dark"] *[style*="background: #1F2937"] { background-color: #131c33 !important; color: #e6edf7 !important; }

/* --- 边框颜色兜底 --- */
[data-theme="dark"] *[style*="border:1px solid #dcdfe6"],
[data-theme="dark"] *[style*="border: 1px solid #dcdfe6"],
[data-theme="dark"] *[style*="border:1.5px solid #dcdfe6"],
[data-theme="dark"] *[style*="border: 1.5px solid #dcdfe6"],
[data-theme="dark"] *[style*="border:1px solid #E4E7ED"],
[data-theme="dark"] *[style*="border: 1px solid #E4E7ED"],
[data-theme="dark"] *[style*="border:1px solid #EBEEF5"],
[data-theme="dark"] *[style*="border: 1px solid #EBEEF5"],
[data-theme="dark"] *[style*="border:1px solid #F0F0F0"],
[data-theme="dark"] *[style*="border: 1px solid #F0F0F0"] { border-color: #243049 !important; }

[data-theme="dark"] *[style*="border-bottom:1px solid #F0F0F0"],
[data-theme="dark"] *[style*="border-bottom: 1px solid #F0F0F0"],
[data-theme="dark"] *[style*="border-bottom:1px solid #EBEEF5"],
[data-theme="dark"] *[style*="border-bottom: 1px solid #EBEEF5"],
[data-theme="dark"] *[style*="border-bottom:1px solid #e4e7ed"],
[data-theme="dark"] *[style*="border-bottom: 1px solid #e4e7ed"] { border-bottom-color: #243049 !important; }

[data-theme="dark"] *[style*="border-top:1px solid #EBEEF5"],
[data-theme="dark"] *[style*="border-top: 1px solid #EBEEF5"],
[data-theme="dark"] *[style*="border-top:1px solid #F0F0F0"],
[data-theme="dark"] *[style*="border-top: 1px solid #F0F0F0"] { border-top-color: #243049 !important; }

[data-theme="dark"] *[style*="border-left:3px solid #1677ff"],
[data-theme="dark"] *[style*="border-left: 3px solid #1677ff"] { border-left-color: #3b82f6 !important; }

[data-theme="dark"] *[style*="border-color:#EBEEF5"],
[data-theme="dark"] *[style*="border-color: #EBEEF5"],
[data-theme="dark"] *[style*="border-color:#dcdfe6"],
[data-theme="dark"] *[style*="border-color: #dcdfe6"] { border-color: #243049 !important; }

/* --- 输入框/文本域兜底 --- */
[data-theme="dark"] textarea[style*="border:1px solid #dcdfe6"],
[data-theme="dark"] input[style*="border:1px solid #1677ff"] { background-color: #1a2540 !important; color: #e6edf7 !important; }

/* --- 按钮类内联样式兜底 --- */
[data-theme="dark"] button[style*="background:#fff"],
[data-theme="dark"] button[style*="background: #fff"] { background-color: #1a2540 !important; color: #e6edf7 !important; border-color: #243049 !important; }

[data-theme="dark"] button[style*="background:#1677ff"],
[data-theme="dark"] button[style*="background: #1677ff"] { background-color: #3b82f6 !important; color: #0A0F17 !important; border-color: #3b82f6 !important; }

[data-theme="dark"] button[style*="background:#FEE2E2"],
[data-theme="dark"] button[style*="background: #FEE2E2"] { background-color: #241010 !important; color: #F87171 !important; border-color: rgba(248, 113, 113, 0.3) !important; }

/* --- 弹窗/浮层面板 --- */
[data-theme="dark"] .el-popper,
[data-theme="dark"] .el-dropdown__popper,
[data-theme="dark"] .el-select-dropdown,
[data-theme="dark"] .el-autocomplete__popper,
[data-theme="dark"] .el-picker-panel,
[data-theme="dark"] .el-time-panel { background: #131c33 !important; border-color: #243049 !important; color: #e6edf7 !important; box-shadow: var(--shadow-lg) !important; }

[data-theme="dark"] .el-dropdown-menu__item { color: #c7d2e3 !important; }
[data-theme="dark"] .el-dropdown-menu__item:hover { background: #1a2540 !important; color: #e6edf7 !important; }
[data-theme="dark"] .el-select-dropdown__item { color: #c7d2e3 !important; }
[data-theme="dark"] .el-select-dropdown__item.hover, [data-theme="dark"] .el-select-dropdown__item:hover { background: #1a2540 !important; }
[data-theme="dark"] .el-select-dropdown__item.selected { color: #60a5fa !important; }

/* --- Element Plus 菜单/标签 --- */
[data-theme="dark"] .el-menu { background: transparent !important; }
[data-theme="dark"] .el-menu-item { color: #c7d2e3 !important; }
[data-theme="dark"] .el-menu-item:hover { background: #1a2540 !important; }
[data-theme="dark"] .el-menu-item.is-active { color: #60a5fa !important; background: rgba(59, 130, 246, 0.15) !important; }

[data-theme="dark"] .el-tabs__item { color: #8a98b8 !important; }
[data-theme="dark"] .el-tabs__item.is-active { color: #60a5fa !important; }
[data-theme="dark"] .el-tabs__active-bar { background: #3b82f6 !important; }
[data-theme="dark"] .el-tabs__nav-wrap::after { background: #243049 !important; }

/* --- 日期选择器 / 分页 / 消息提示 --- */
[data-theme="dark"] .el-picker-panel__icon-btn { color: #8a98b8 !important; }
[data-theme="dark"] .el-date-table td.current:not(.disabled) span { background: #3b82f6 !important; color: #0A0F17 !important; }
[data-theme="dark"] .el-date-table td.today span { color: #60a5fa !important; }
[data-theme="dark"] .el-date-table td.disabled div { background: #0a0f1e !important; color: #7a88a6 !important; }
[data-theme="dark"] .el-pagination button { background: transparent !important; color: #c7d2e3 !important; }
[data-theme="dark"] .el-pagination button:disabled { color: #7a88a6 !important; }
[data-theme="dark"] .el-pager li { background: transparent !important; color: #c7d2e3 !important; }
[data-theme="dark"] .el-pager li.active { color: #60a5fa !important; }
[data-theme="dark"] .el-message { background: #131c33 !important; border-color: #243049 !important; color: #e6edf7 !important; }
[data-theme="dark"] .el-notification { background: #131c33 !important; border-color: #243049 !important; color: #e6edf7 !important; }
[data-theme="dark"] .el-notification__title { color: #e6edf7 !important; }
[data-theme="dark"] .el-notification__content { color: #c7d2e3 !important; }

/* --- 工作台细节补漏 --- */
[data-theme="dark"] .workbench-search input { background: #0a0f1e !important; border-color: #243049 !important; color: #e6edf7 !important; }
[data-theme="dark"] .workbench-search input:focus { background: #0a0f1e !important; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important; }
[data-theme="dark"] .workbench-tabs-item { color: #8a98b8 !important; }
[data-theme="dark"] .workbench-tabs-item.active { color: #60a5fa !important; }
[data-theme="dark"] .workbench-session-list > div[style*="background:#F0F9FF"] { background-color: rgba(59, 130, 246, 0.15) !important; }

/* --- 主题切换按钮 --- */
.app-theme-toggle { color: inherit; }
[data-theme="dark"] .app-theme-toggle { color: #C9D4E0 !important; }

/* ============================================================
   会话列表 & 在线接待（学截图风格）
   ============================================================ */

/* 顶部绿色「在线接待」按钮 */
.online-reception-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  transition: all .2s ease;
  background: #EAF7F0;
  color: #27A469;
  border: 1px solid rgba(39, 164, 105, 0.25);
}
.online-reception-btn:hover {
  background: #D4F3E3;
  border-color: rgba(39, 164, 105, 0.4);
}
.online-reception-btn.offline {
  background: #F4F4F5;
  color: #71717A;
  border-color: #E4E7ED;
}
.online-reception-btn.offline:hover {
  background: #E4E7ED;
}
.online-reception-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #27A469;
  box-shadow: 0 0 0 2px rgba(39, 164, 105, 0.2);
}
.online-reception-btn.offline .online-reception-dot {
  background: #9CA3AF;
  box-shadow: none;
}
.online-reception-arrow {
  font-size: 10px;
  opacity: 0.75;
  margin-left: 2px;
}

/* WS 连接状态 */
.ws-status { font-size: 11px; white-space: nowrap; }
.ws-status.connected { color: #27A469; }
.ws-status.disconnected { color: #DC2626; }

/* 会话项 */
.session-item {
  padding: 10px 16px;
  cursor: pointer;
  border-left: 3px solid transparent;
  background: transparent;
  transition: background .15s ease;
}
.session-item:hover { background: var(--bg-hover); }
.session-item.active {
  border-left-color: var(--primary);
  background: var(--primary-light);
}

/* 头像 + 状态点 */
.session-avatar-wrap {
  position: relative;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
}
.session-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.session-status-dot {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--bg-card);
  background: #9CA3AF;
}
.session-status-dot.online { background: #22C55E; }
.session-status-dot.offline { background: #9CA3AF; }

/* 标题行：名字 + 状态标签 */
.session-title-line {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}
.session-name {
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-main);
}
.session-status-tag {
  flex-shrink: 0;
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 500;
}
.session-status-tag.online {
  background: #EAF7F0;
  color: #27A469;
}
.session-status-tag.offline {
  background: #FEF0F0;
  color: #DC2626;
}

/* 消息预览 */
.session-preview {
  font-size: 12px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
  margin-bottom: 2px;
}

/* 地区 / 运营商 */
.session-location {
  font-size: 11px;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* 时间 */
.session-time {
  font-size: 12px;
  color: var(--text-tertiary);
  white-space: nowrap;
}

/* 未读角标 */
.session-unread-badge {
  background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
  color: #fff;
  border-radius: 10px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
  line-height: 1;
}

/* ============================================================
   dark 主题：会话列表 & 在线接待
   ============================================================ */
[data-theme="dark"] .online-reception-btn {
  background: rgba(34, 197, 94, 0.12);
  color: #4ADE80;
  border-color: rgba(34, 197, 94, 0.25);
}
[data-theme="dark"] .online-reception-btn:hover {
  background: rgba(34, 197, 94, 0.2);
  border-color: rgba(34, 197, 94, 0.35);
}
[data-theme="dark"] .online-reception-btn.offline {
  background: rgba(148, 163, 184, 0.12);
  color: #94A3B8;
  border-color: rgba(148, 163, 184, 0.2);
}
[data-theme="dark"] .online-reception-btn.offline:hover {
  background: rgba(148, 163, 184, 0.2);
}
[data-theme="dark"] .online-reception-dot {
  background: #4ADE80;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.25);
}
[data-theme="dark"] .online-reception-btn.offline .online-reception-dot {
  background: #94A3B8;
  box-shadow: none;
}

[data-theme="dark"] .ws-status.connected { color: #4ADE80; }
[data-theme="dark"] .ws-status.disconnected { color: #F87171; }

[data-theme="dark"] .session-item:hover { background: var(--bg-hover); }
[data-theme="dark"] .session-item.active {
  border-left-color: var(--primary);
  background: rgba(59, 130, 246, 0.12);
}
[data-theme="dark"] .session-status-dot { border-color: var(--bg-card); }
[data-theme="dark"] .session-status-dot.online { background: #22C55E; }
[data-theme="dark"] .session-status-dot.offline { background: #64748B; }
[data-theme="dark"] .session-status-tag.online {
  background: rgba(34, 197, 94, 0.15);
  color: #4ADE80;
}
[data-theme="dark"] .session-status-tag.offline {
  background: rgba(248, 113, 113, 0.12);
  color: #F87171;
}
[data-theme="dark"] .session-preview { color: var(--text-secondary); }
[data-theme="dark"] .session-location { color: var(--text-tertiary); }
[data-theme="dark"] .session-time { color: var(--text-tertiary); }