/* ============================================================
   护企盾 · 设计系统（theme.css）
   ============================================================
   全站唯一的 token 源。四端共用：
     访客端 index.html / 工作台 admin.html /
     平台后台 platform.html / 开通页 register.html

   三条硬规则：
   1. 颜色 / 圆角 / 阴影 / 间距 / 字号 / 动效 一律走变量，页面不再写死色值
   2. 旧变量名全部保留为 alias → 指向新 token，历史内联样式零改动即可用上新配色
   3. 组件层**不使用 !important**：
      - 通用增强用「可叠加的类名」（.hqy-card / .hqy-btn / .hqy-pill …）
      - 必须覆盖既有类名时，用更高特异性（body .x / .x.y）而不是 !important
   ============================================================ */

:root {
  /* ---------------- 品牌色阶 ---------------- */
  --brand-25:   #F2F7FF;
  --brand-50:   #E4EEFF;
  --brand-100:  #C7DBFF;
  --brand-200:  #9DC0FB;
  --brand-300:  #6B9CF5;
  --brand-400:  #3D82E8;
  --brand-500:  #0F5BD6;   /* 主色 */
  --brand-600:  #0B48A9;
  --brand-700:  #093A88;

  /* ---------------- 辅色（CTA / 高亮 / 高意向标签） ---------------- */
  --accent:     #FF7A2F;
  --accent-50:  #FFF2E9;
  --accent-200: #FFC7A3;
  --accent-600: #E8651B;

  /* accent 在深色底（--nav-bg #0B1B33）上的变体
     浅橙底压深底会「挖洞」，所以改成透明橙底 + 提亮一档的橙字 */
  --accent-dark:      #FF9559;              /* 文字：比 --accent 提亮，保证深色底对比度 ≥ 4.5:1 */
  --accent-dark-bg:   rgba(255, 122, 47, .16);
  --accent-dark-line: rgba(255, 122, 47, .40);

  /* ---------------- 语义色（各带 50 底色） ---------------- */
  --success:      #18A058;
  --success-400:  #2ECC71;
  --success-500:  #0E8A47;
  --success-50:   #E9F9F0;

  --warn:         #E8873A;   /* 琥珀：提示 / 演示条 */
  --warn-400:     #F39C12;
  --warn-500:     #C4701C;
  --warn-50:      #FFF6E8;

  --danger:       #E5484D;
  --danger-400:   #F0656A;
  --danger-500:   #C0392B;
  --danger-50:    #FFF1F0;

  --info:         #3498DB;
  --info-500:     #1F6FB2;
  --info-50:      #EAF4FD;

  /* 超时未回告警底（琥珀）—— 语义：橙/琥珀 = 待处理超时，红 = 事故。
     曾经与 --danger-50 同值 #FFF1F0，导致「待办」和「事故」长得一模一样，无法区分。 */
  --warn-bg:        #FFF6E8;   /* 与 --warn-50 同值 */
  --warn-bg-line:   #FBE0BE;
  --warn-bg-hover:  #FDEFD8;   /* 列表项 hover（admin.html:1485 已改用本 token） */

  /* ---------------- 中性色阶 ----------------
     300→900 必须由浅到深单调递进，任意两级不得同值（曾经 400 与 600 撞成 #6B7A8F，已修）。 */
  --ink-900: #0F1B2D;   /* 白底 17.28:1 */
  --ink-800: #24344A;   /* 白底 12.61:1 */
  --ink-700: #4A5A70;   /* 白底  7.03:1 */
  --ink-600: #55647A;   /* 白底  6.02:1 —— 图标按钮 / 禁用态 */
  --ink-500: #5A6A80;   /* 白底  5.51:1 —— 次级正文 */
  --ink-400: #647388;   /* 白底  4.83:1 / --bg 4.53:1 / --surface-2 4.61:1 —— 三级正文 / 小字
                           说明。这是「可用于正文的最浅一档」：取值已在白底与两种浅灰底上同时
                           满足 AA 4.5，再浅就会在 .alt 浅灰区块上掉出 4.5。 */
  --ink-300: #8A97A8;   /* 白底  2.97:1 —— 仅占位符 / 禁用态 / 空态，禁止用于正文 */

  /* 面与线 */
  --bg:        #F5F8FC;
  --surface:   #FFFFFF;
  --surface-2: #F8FAFD;
  --surface-3: #EFF4FA;
  --border:    #E3E9F2;
  --border-2:  #D6DFEC;
  --border-3:  #C6D0DE;

  /* ---------------- 导航（深色） ---------------- */
  --nav-bg:        #0B1B33;
  --nav-bg-2:      #122742;
  --nav-bg-soft:   rgba(255, 255, 255, .08);
  --nav-bg-active: rgba(255, 255, 255, .14);
  --nav-text:      #A9B7CB;
  --nav-text-hi:   #FFFFFF;

  /* ---------------- 圆角 ---------------- */
  --r-sm:  6px;
  --r-md:  8px;
  --r-lg:  12px;
  --r-xl:  16px;
  --r-pill: 999px;

  /* ---------------- 阴影 ---------------- */
  --shadow-1: 0 1px 2px rgba(15, 27, 45, .06);
  --shadow-2: 0 4px 14px rgba(15, 27, 45, .08);
  --shadow-3: 0 12px 32px rgba(15, 27, 45, .14);

  /* ---------------- 间距 scale ---------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* ---------------- 字号 scale ---------------- */
  --fs-xs:  12px;
  --fs-sm:  13px;
  --fs-md:  14px;
  --fs-lg:  16px;
  --fs-xl:  20px;
  --fs-2xl: 26px;

  /* ---------------- 动效 ---------------- */
  --ease:       .16s cubic-bezier(.4, 0, .2, 1);
  --ease-out:   .2s cubic-bezier(.16, 1, .3, 1);
  --dur-fast:   120ms;
  --dur-base:   160ms;
  --dur-slow:   240ms;

  /* ---------------- 焦点环（2px 主色 + 14% 透明外圈） ---------------- */
  --ring:        0 0 0 2px rgba(15, 91, 214, .14);
  --ring-strong: 0 0 0 3px rgba(15, 91, 214, .18);

  /* ============================================================
     旧变量名 alias —— 兼容历史内联样式，不要删
     ============================================================ */
  --brand:       var(--brand-500);
  --brand-light: var(--brand-50);
  --accent-soft: var(--accent-50);
}

/* ============================================================
   全局基础
   ============================================================ */
html, body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body, input, textarea, select, button {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Microsoft YaHei", "Hiragino Sans GB", Roboto, Arial, sans-serif;
}

/* 数字统一等宽，避免抖动 */
b, strong, .num, .hqy-num,
[class*="count"], [class*="kpi"], [class*="-val"], [class*="-value"] {
  font-variant-numeric: tabular-nums;
}

/* ---------------- 滚动条 ---------------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(120, 140, 160, .28);
  border-radius: var(--r-pill);
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(120, 140, 160, .45); background-clip: content-box; }
* { scrollbar-width: thin; scrollbar-color: rgba(120, 140, 160, .3) transparent; }

/* ---------------- 焦点环 ---------------- */
/* :where() 特异性为 0，页面自有 :focus 规则仍然优先，不打架 */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 1px;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--brand-400);
  box-shadow: var(--ring);
}
input::placeholder, textarea::placeholder { color: var(--ink-400); }

/* ---------------- 按钮三态 ---------------- */
button {
  transition: background var(--ease), color var(--ease), border-color var(--ease),
              box-shadow var(--ease), transform var(--ease), opacity var(--ease);
}
button:not(:disabled):active { transform: translateY(.5px); }
button:disabled { cursor: not-allowed; opacity: .55; }

a { transition: color var(--ease); }
a { color: var(--brand-500); }
a:hover { color: var(--brand-600); }

/* ---------------- 表单 ---------------- */
input, textarea, select {
  transition: border-color var(--ease), box-shadow var(--ease), background var(--ease);
}
select { cursor: pointer; }

/* ---------------- 表格 ---------------- */
table { border-collapse: separate; border-spacing: 0; }
th {
  font-weight: 500;
  letter-spacing: .2px;
  color: var(--ink-700);
  background: var(--surface-2);
}
td { color: var(--ink-800); }
tbody tr:hover td { background: var(--brand-25); }

/* ============================================================
   可叠加的增强类（挂到元素上才生效，不侵入既有类名）
   ============================================================ */

/* 卡片 ---------------------------------------------------- */
.hqy-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  padding: var(--sp-4);
}
.hqy-card--flat { box-shadow: none; }
.hqy-card--pad0 { padding: 0; }
.hqy-card__title {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-800);
  margin: 0 0 var(--sp-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}
.hqy-card__hint { font-size: var(--fs-xs); color: var(--ink-500); }

/* 按钮 ---------------------------------------------------- */
.hqy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1;
  color: var(--ink-800);
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  cursor: pointer;
  white-space: nowrap;
}
.hqy-btn:hover { background: var(--surface-3); border-color: var(--border-3); }
.hqy-btn:active { transform: translateY(.5px); }

.hqy-btn--primary {
  color: #fff;
  background: var(--brand-500);
  border-color: var(--brand-500);
  box-shadow: var(--shadow-1);
}
.hqy-btn--primary:hover { background: var(--brand-600); border-color: var(--brand-600); }

.hqy-btn--accent {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}
.hqy-btn--accent:hover { background: var(--accent-600); border-color: var(--accent-600); }

.hqy-btn--danger { color: var(--danger); border-color: #F5C6C4; background: var(--danger-50); }
.hqy-btn--danger:hover { background: #FFE3E1; border-color: var(--danger-400); }

.hqy-btn--ghost { background: transparent; border-color: transparent; color: var(--ink-700); }
.hqy-btn--ghost:hover { background: var(--surface-3); border-color: transparent; }

.hqy-btn--sm { height: 26px; padding: 0 var(--sp-2); font-size: var(--fs-xs); }
.hqy-btn--lg { height: 40px; padding: 0 var(--sp-5); font-size: var(--fs-md); }
.hqy-btn--block { width: 100%; }

/* 纯图标按钮（24px 网格） */
.hqy-icon-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--ink-700);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
}
.hqy-icon-btn:hover { background: var(--surface-3); color: var(--brand-500); }
.hqy-icon-btn.is-on { background: var(--brand-50); color: var(--brand-500); }
.hqy-icon-btn:disabled { opacity: .45; cursor: not-allowed; }
.hqy-icon-btn:disabled:hover { background: transparent; color: var(--ink-700); }

/* 小胶囊 / 标签 -------------------------------------------- */
.hqy-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 500;
  line-height: 18px;
  color: var(--ink-700);
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.hqy-pill--brand   { color: var(--brand-600); background: var(--brand-50);  border-color: var(--brand-100); }
.hqy-pill--accent  { color: var(--accent-600); background: var(--accent-50); border-color: var(--accent-200); }
.hqy-pill--success { color: var(--success-500); background: var(--success-50); border-color: #BFEBD2; }
.hqy-pill--warn    { color: var(--warn-500);   background: var(--warn-50);   border-color: #FBE0BE; }
.hqy-pill--danger  { color: var(--danger-500); background: var(--danger-50); border-color: #FBD5D3; }
.hqy-pill--timeout { color: var(--danger-500); background: var(--warn-bg);   border-color: var(--warn-bg-line); }
.hqy-pill--info    { color: var(--info-500);   background: var(--info-50);   border-color: #CBE4F7; }
.hqy-pill--muted   { color: var(--ink-500);    background: var(--surface-2); }

/* 深色底专用变体（--nav-bg #0B1B33 / Hero 深色块 / 收尾 CTA）
   浅底 pill 压在深底上会「挖洞」，这一族统一改成：透明色底 + 提亮文字 + 半透明描边，
   与深色块自己的 rgba(255,255,255,.08) 分隔体系是同一套语言。
   目前只有 accent 需要（它是全站图形母题，深色块上必然出现）。 */
.hqy-pill--accent-dark {
  color: var(--accent-dark);
  background: var(--accent-dark-bg);
  border-color: var(--accent-dark-line);
}
/* 深色块上的中性 pill：同样逻辑，给「次要 / 未就绪」状态用 */
.hqy-pill--on-dark {
  color: rgba(255, 255, 255, .82);
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .18);
}

/* 文本工具 ------------------------------------------------- */
.hqy-muted  { color: var(--ink-500); }
.hqy-subtle { color: var(--ink-400); }
.hqy-strong { color: var(--ink-900); font-weight: 600; }
.hqy-num    { font-variant-numeric: tabular-nums; }
.hqy-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hqy-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 分隔 / 区块标题 ------------------------------------------ */
.hqy-divider { height: 1px; background: var(--border); margin: var(--sp-3) 0; }
.hqy-sec-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .4px;
  color: var(--ink-400);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}

/* 骨架屏（字段还没接上时用） -------------------------------- */
.hqy-skeleton {
  height: 10px;
  border-radius: var(--r-sm);
  background: linear-gradient(90deg, var(--surface-3) 25%, #E7EEF7 37%, var(--surface-3) 63%);
  background-size: 400% 100%;
  animation: hqySk 1.4s ease infinite;
}
@keyframes hqySk { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* 空态 ----------------------------------------------------- */
.hqy-empty {
  text-align: center;
  color: var(--ink-400);
  font-size: var(--fs-sm);
  padding: var(--sp-7) var(--sp-5);
}
.hqy-empty i { display: block; font-size: 30px; opacity: .45; margin-bottom: var(--sp-2); }

/* ============================================================
   既有类名的外观升级
   —— 通过提高选择器特异性覆盖，不用 !important
   ============================================================ */

/* 卡片类：统一圆角 / 描边 / 阴影
   已从本组移除 .panel / .modal-content / .stat-card / .kpi-card / .quick-card / .kb-card
   —— 三个页面（含 JS 生成的 class 字符串）中均为 0 命中。 */
body .card, body .ticket-card, body .staff-card,
body .ss-card, body .ss-rank {
  border-radius: var(--r-lg);
  border-color: var(--border);
  box-shadow: var(--shadow-1);
}

/* 胶囊 / 标签（.chip 三页 0 命中，已移除） */
body .badge, body .pill, body .tag {
  border-radius: var(--r-pill);
  font-weight: 500;
}

/* 弹窗（.modal-content 三页 0 命中，已移除；.modal 有用，保留） */
body .modal {
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-3);
}

/* 顶栏：此处不再整体覆盖 .topbar。
   index.html 自己定义的顶栏（品牌蓝 #0A3F96 + 30px 细工具条）是正确的，
   这里曾经强行改成近黑 --nav-bg 并挂 0 4px 14px 大投影，导致细条下方一圈脏阴影。 */
/* 顶栏 brand 的 logo 统一为「主色底 + logo 图片」，不再用渐变色块 */
body .topbar .brand .logo,
body .login-card .brand .logo {
  background: var(--brand-500);
  border-radius: var(--r-md);
  box-shadow: 0 2px 8px rgba(15, 91, 214, .32);
  overflow: hidden;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
body .topbar .brand .logo img,
body .login-card .brand .logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* 侧栏搜索 */
body .sidebar-search input {
  border-radius: var(--r-md);
  background: var(--surface-2);
  border-color: var(--border);
}
body .sidebar-search input:focus { background: #fff; border-color: var(--brand-400); }

/* 会话列表项悬浮：用中性浅灰，不能用 --brand-25。
   --brand-25 已被 .visitor-item.active 占住做选中态，
   而 body .x:hover (0,2,1) 特异性压过 .visitor-item.active (0,2,0)，
   同色会导致「悬浮在选中项上」时看不出选中。 */
body .visitor-item { transition: background var(--ease); }
body .visitor-item:hover { background: #F8FAFC; }

/* 消息气泡：保留工作台的「尖角朝谁」方向感
   客服侧（默认）尖角在左上、客户侧（.user）尖角在右上。
   只作用于 .msg-row 内的气泡，裸 .bubble / .chat-bubble 不碰（widget.js / index.html 在用）。 */
body .msg-row .bubble {
  border-radius: 12px;
  border-top-left-radius: 4px;
  border-top-right-radius: 12px;
  box-shadow: var(--shadow-1);
}
body .msg-row.user .bubble {
  border-radius: 12px;
  border-top-left-radius: 12px;
  border-top-right-radius: 4px;
}
/* 系统 / 内部备注气泡是「居中」的提示块（黄色 / 紫色虚线边框、无阴影），
   不属于左右对话气泡，不能有尖角也不能有阴影，否则看起来像渲染错位的气泡。 */
body .msg-row.system .bubble, body .msg-row.internal .bubble {
  border-radius: 12px;
  box-shadow: none;
}

/* 移动端底部 Tab */
body .mobile-tabs, body .tabbar, body .mobile-tabbar {
  box-shadow: 0 -1px 0 var(--border), 0 -6px 18px rgba(15, 23, 42, .06);
}

/* 通用小标题（工作台各视图 h2）
   复核：.kb-view h2（admin.html:2057）与 .staff-view h2（admin.html:2070）确有真实元素命中，
   不属于死选择器，保留。 */
body .tickets-view h2, body .kb-view h2, body .staff-view h2 {
  color: var(--ink-900);
  font-size: var(--fs-xl);
  font-weight: 600;
}