/* ============================================================
   客服工作台 — 独立设计系统（不再依赖 shared/base.css）

   风格方向：深色专业控制台 + 薄荷绿强调。
   深色是为了长时间盯屏不刺眼；薄荷绿替代原来的宝蓝，
   让"在线/成功/主操作"有清楚的视觉签名，也比蓝色更耐看。

   为什么自带一套令牌而不是继续用 base.css：
   · 站长要求工作台有自己的风格，不要被访客端的样式底座绑住；
   · base.css 是给访客聊天页（浅色）用的，工作台是深色高密度界面，
     两者只是碰巧共用变量名，耦合久了改一边就崩另一边。
   下面这套令牌是工作台**唯一**的来源，删掉 base.css 后照样完整。
   ============================================================ */

/* ============================================================ 设计令牌 */

:root {
  /* ---- 主区：浅色（与总后台同一套观感） ---- */
  --bg: #f4f5f7;
  --panel: #ffffff;
  --panel-2: #fafbfc;
  --text: #17212b;
  --text-2: #4d5d6b;
  --text-3: #66757f;
  --line: #e4e8ec;
  --line-2: #d3dae0;

  /* ---- 强调/主操作：深墨（admin 的按钮就是它） ---- */
  --brand-50: #eef1f4;
  --brand-100: #e2e7ec;
  --brand-200: #cad3db;
  --brand-300: #a9b7c4;
  --brand-400: #46586a;
  --brand-500: #24384a;
  --brand-600: #1b2c3d;
  --brand-700: #101a24;
  --brand-800: #0d151d;
  --brand-900: #0a1116;

  /* ---- 次强调：靛蓝（"我的会话"这类标记） ---- */
  --accent-100: #eef1fd;
  --accent-300: #b9c5f2;
  --accent-500: #3b5bdb;
  --accent-600: #2f4bc0;
  --accent-700: #253c9e;

  /* ---- 语义色（取 admin 的同名色值，保证两处观感一致） ---- */
  --ok: #15803d;
  --ok-soft: #e8f5ec;
  --warn: #b45309;
  --warn-soft: #fef3e2;
  --danger: #c0362c;
  --danger-soft: #fdecea;

  /* ---- 中性色阶：浅色界面下 ink-50 最浅、ink-900 最深 ---- */
  --ink-50: #f7f9fa;
  --ink-100: #eef1f4;
  --ink-200: #dde3e8;
  --ink-300: #c3ccd4;
  --ink-400: #66757f;
  --ink-500: #5a6b7a;
  --ink-600: #566876;
  --ink-700: #3d4d5a;
  --ink-800: #26333d;
  --ink-900: #17212b;

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(16, 26, 36, .06);
  --shadow: 0 1px 3px rgba(16, 26, 36, .07), 0 12px 28px rgba(16, 26, 36, .06);
  --shadow-lg: 0 18px 44px rgba(16, 26, 36, .14);
  --shadow-brand: 0 6px 18px rgba(16, 26, 36, .18);

  --font-ui: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC",
    -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "SF Mono", "JetBrains Mono", "Cascadia Code", Consolas, monospace;

  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

/* ============================================================ 基础重置
   （原来由 base.css 提供，现在工作台自带）
*/

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

button,
input,
textarea {
  font: inherit;
  color: inherit;
}

button {
  border: 0;
  background: none;
  cursor: pointer;
}

/*
 * hidden 必须绝对生效。
 * 浏览器默认 [hidden]{display:none}，但只要某个类写了 display:grid/flex，
 * 类选择器就会盖掉它——JS 明明设了 hidden=true，元素却还占着位置。
 */
[hidden] {
  display: none !important;
}

/* ============================================================ 基础组件
   （同样从 base.css 搬过来，改成本套色系）
*/

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 20px;
  border-radius: var(--radius-pill);
  background: var(--ink-600);
  color: var(--ink-100);
  font-weight: 600;
  font-size: 14px;
  transition: transform 0.12s ease, background 0.18s ease, opacity 0.18s ease;
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn[disabled] { opacity: 0.45; pointer-events: none; }
.btn-primary {
  background: linear-gradient(135deg, var(--brand-400), var(--brand-700));
  color: #04231f;
  font-weight: 700;
  box-shadow: var(--shadow-brand);
}
.btn-danger { background: var(--danger); color: #ffffff; }
.btn-ghost {
  background: transparent;
  border: 1px solid var(--ink-500);
}
.btn-sm { padding: 6px 13px; font-size: 13px; }

.field {
  width: 100%;
  padding: 13px 15px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--ink-600);
  background: rgba(7, 15, 20, 0.7);
  color: var(--ink-50);
  outline: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.field:focus {
  border-color: var(--brand-400);
  box-shadow: 0 0 0 3px rgba(59, 91, 219, .16);
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--danger);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-300);
  flex: none;
}
.dot.online {
  background: var(--ok);
  box-shadow: 0 0 0 3px rgba(47, 211, 154, 0.2);
}

/* 吐司提示 */
.toast-wrap {
  position: fixed;
  left: 50%;
  top: calc(14px + var(--safe-t));
  transform: translateX(-50%);
  z-index: 9000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
}
.toast {
  padding: 10px 18px;
  border-radius: var(--radius);
  background: rgba(12, 26, 34, 0.94);
  color: var(--ink-50);
  font-size: 13.5px;
  box-shadow: var(--shadow-lg);
  animation: toast-in 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2);
  backdrop-filter: blur(8px);
  max-width: 86vw;
  text-align: center;
}
.toast.warn { background: var(--warn); color: #7a3d06; }
.toast.err { background: var(--danger); color: #ffffff; }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(-10px) scale(0.96); }
}

/* 头像 */
.avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 15px;
  color: #fff;
  flex: none;
  user-select: none;
}
.avatar.agent { background: linear-gradient(135deg, var(--brand-400), var(--brand-700)); }
.avatar.visitor { background: linear-gradient(135deg, var(--ink-400), var(--ink-600)); }

/* 滚动条 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb {
  background: rgba(147, 169, 182, 0.28);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(147, 169, 182, 0.46); }
::-webkit-scrollbar-track { background: transparent; }

/* 连接状态条 */
.conn-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12.5px;
  padding: 6px 12px;
  background: var(--warn);
  color: #3a2b06;
  font-weight: 600;
}
.conn-bar.err { background: var(--danger); color: #ffffff; }

.spin {
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-top-color: rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ============================================================ 工作台
   深色高密度三栏：会话队列 / 对话 / 访客详情
   窄屏自动收成单栏 + 抽屉
   ============================================================ */

/*
 * 全局字体与底色。
 * 这些以前由 base.css 的 `body { font-family: ...; background: ... }` 提供，
 * 摘掉 base.css 后必须在这里补回来，否则字体掉回浏览器默认（宋体/Time），
 * 整个界面的观感会突然垮掉。
 */
body {
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-100);
  background: var(--ink-900);
  overscroll-behavior-y: none;
  -webkit-font-smoothing: antialiased;
}

/* ============================================================ 全局 */

html,
body.workbench {
  height: 100%;
  margin: 0;
  background: var(--ink-900);
  color: var(--ink-100);
  overflow: hidden;
}

body.workbench {
  font-family: var(--font-ui);
}

/* ---------------------------------------------------- 头像
   两端统一使用品牌图标（站点根目录下那张图）。

   这里必须用 !important：后面几处头像规则用了 `background:` 简写
   （.me-row .avatar / .conv-avat .avatar / .row .avatar …），
   简写会把 background-image 一起重置，且它们的特异性不低于 .avatar.agent，
   所以不加 !important 时图片在任何位置都显示不出来。

   图片 URL 带版本号：否则换了图但文件名没变时浏览器会一直用旧缓存。 */
.avatar.agent {
  background-image: url('/AlipayHK_AppIcon_round.png?v=26') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
  color: transparent;
  /* 文字仍在 DOM 里（读屏可用），视觉上藏掉 */
  font-size: 0;
  text-indent: -9999px;
  border: 0;
}

/* 访客头像：暂时没有素材，用品牌色渐变配首字，和客服头像并列时不违和 */
.avatar.visitor {
  background: linear-gradient(135deg, #7d94a8, #4a6274);
  color: #fff;
}

/* hidden 属性一律生效（本文件顶部已有全局兜底，这里是双保险） */
#loginPage[hidden],
#wbPanel[hidden],
#chatHead[hidden],
#chatEmpty[hidden],
#composer[hidden],
#stream[hidden],
#callScreen[hidden],
#lightbox[hidden],
#moreModal[hidden],
#quickModal[hidden] {
  display: none !important;
}

/* ============================================================ 登录页 */

body.login-page {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 20px;
  background:
    radial-gradient(1100px 600px at 12% -10%, rgba(20, 184, 166, 0.26), transparent 60%),
    radial-gradient(900px 520px at 92% 108%, rgba(13, 132, 120, 0.18), transparent 62%),
    linear-gradient(160deg, #071522 0%, #0a2133 55%, #06121d 100%);
}

.login-card {
  width: 100%;
  max-width: 404px;
  padding: 40px 34px 32px;
  border-radius: var(--radius-xl);
  background: rgba(16, 36, 51, 0.86);
  border: 1px solid rgba(59, 91, 219, .16);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(14px);
  animation: card-in 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.05);
}
@keyframes card-in {
  from { opacity: 0; transform: translateY(22px) scale(0.985); }
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 28px;
}
.login-logo {
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  font-size: 23px;
  color: #fff;
  background: linear-gradient(135deg, var(--brand-400), var(--brand-700));
  box-shadow: 0 8px 26px rgba(20, 184, 166, 0.42);
}
.login-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}
.login-sub {
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--ink-400);
}

.login-field {
  display: block;
  margin-bottom: 15px;
}
.login-field span {
  display: block;
  margin-bottom: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-400);
}
.login-field input {
  width: 100%;
  padding: 13px 15px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(147, 169, 182, 0.22);
  background: rgba(255, 255, 255, .96);
  color: var(--ink-50);
  font-size: 16px; /* 至少 16px，避免 iOS 聚焦时放大页面 */
  outline: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.login-field input:focus {
  border-color: var(--brand-400);
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.16);
}

.login-submit {
  width: 100%;
  margin-top: 11px;
  padding: 14px;
  border: 0;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--brand-400), var(--brand-700));
  box-shadow: var(--shadow-brand);
  cursor: pointer;
  transition: transform 0.12s ease, filter 0.16s ease;
}
.login-submit:hover { filter: brightness(1.08); }
.login-submit:active { transform: scale(0.985); }
.login-submit:disabled { opacity: 0.6; cursor: not-allowed; }

.login-error {
  min-height: 18px;
  margin-top: 13px;
  font-size: 13px;
  color: #ff9a86;
  text-align: center;
}
.login-foot {
  margin-top: 22px;
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--ink-500);
  text-align: center;
}

/* ============================================================ 工作台骨架 */

.wb {
  display: grid;
  /*
   * 宽屏默认两栏，右侧详情收起。
   * 之前这里是常显三栏，导致「详情」按钮点了只多一个类名、界面毫无变化——
   * 按钮形同虚设。改成默认收起、点开才占一列，按钮才有意义。
   */
  grid-template-columns: 292px minmax(0, 1fr);
  height: 100vh;
  height: 100dvh;
  position: relative;
  overflow: hidden;
}
.wb.show-detail { grid-template-columns: 292px minmax(0, 1fr) 282px; }
.wb.show-detail .detail { display: flex; }
/* 详情收起时不占位、也不出现滚动条 */
.wb:not(.show-detail) .detail { display: none; }

/* ============================================================ 左栏：会话队列 */

.side {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--ink-800);
  border-right: 1px solid rgba(16, 26, 36, .06);
}

.side-top {
  position: relative;
  flex: none;
  padding: 13px 15px;
  border-bottom: 1px solid rgba(16, 26, 36, .06);
}
/* 顶部品牌色条 */
.side-top::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-500), var(--accent-500) 70%, var(--brand-400));
}

.me-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 13px;
}
.me-meta { flex: 1 1 auto; min-width: 0; }
.me-name {
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.me-role {
  display: inline-block;
  margin-top: 3px;
  padding: 1px 6px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  line-height: 1.6;
  color: var(--brand-700);
  background: rgba(20, 184, 166, 0.12);
  border: 1px solid rgba(20, 184, 166, 0.28);
}
.me-status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--ink-400);
}
.me-row .avatar {
  width: 37px;
  height: 37px;
  background: linear-gradient(135deg, var(--brand-400), var(--brand-700));
  color: #fff;
}

.icon-plain {
  width: 33px;
  height: 33px;
  border: 0;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  color: var(--ink-300);
  background: transparent;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.icon-plain:hover {
  background: rgba(16, 26, 36, .07);
  color: var(--brand-300);
}

.tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--radius-sm);
  background: rgba(250, 251, 252, .9);
}
.tab {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 6px;
  border: 0;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-400);
  background: transparent;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease;
}
.tab:hover { color: var(--ink-200); }
.tab.active {
  background: rgba(59, 91, 219, .16);
  color: #3b5bdb;
}

.queue-search {
  flex: none;
  padding: 11px 15px 0;
}
.queue-search input {
  width: 100%;
  padding: 10px 13px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(16, 26, 36, .08);
  background: rgba(244, 245, 247, .95);
  color: var(--ink-100);
  font-size: 13px;
  outline: none;
  transition: border-color 0.16s ease;
}
.queue-search input:focus { border-color: rgba(20, 184, 166, 0.5); }

/* 队列滚动区 */
.queue {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px 8px 20px;
}

/* 会话条目 */
.conv {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  margin-bottom: 2px;
  padding: 11px;
  border: 0;
  border-radius: var(--radius);
  text-align: left;
  color: inherit;
  background: transparent;
  cursor: pointer;
  transition: background 0.14s ease;
}
.conv:hover { background: rgba(147, 169, 182, 0.08); }
.conv.active { background: rgba(59, 91, 219, .12); }
.conv.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--brand-400);
}

.conv-avat { position: relative; }
.conv-avat .avatar {
  width: 40px;
  height: 40px;
  font-size: 15px;
  background: linear-gradient(135deg, var(--ink-500), var(--ink-700));
}
.conv-avat .dot {
  position: absolute;
  right: 0;
  bottom: 1px;
  border: 2px solid var(--ink-800);
}

.conv-body { min-width: 0; }
.conv-line1 {
  display: flex;
  align-items: center;
  gap: 6px;
}
.conv-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-50);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tag {
  flex: none;
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
}
.tag.wait { background: rgba(180, 83, 9, .16); color: #f8c471; }
.tag.mine { background: rgba(59, 91, 219, .16); color: #3b5bdb; }
.tag.peer { background: rgba(16, 26, 36, .09); color: var(--ink-300); }
.tag.closed { background: rgba(16, 26, 36, .07); color: var(--ink-400); }

.conv-preview {
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--ink-400);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.conv-preview.typing {
  color: #3b5bdb;
  font-style: italic;
}

.conv-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  flex: none;
}
.conv-time {
  font-size: 11px;
  color: var(--ink-500);
  white-space: nowrap;
}

/* 会话条目上的操作按钮（删除等），悬停才出现 */
.conv-tools {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.14s ease;
}
.conv:hover .conv-tools,
.conv.active .conv-tools {
  opacity: 1;
}
.conv-tool {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 6px;
  display: grid;
  place-items: center;
  color: var(--ink-400);
  background: rgba(16, 26, 36, .06);
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}
.conv-tool:hover {
  background: rgba(244, 68, 46, 0.22);
  color: #ff9a86;
}

.empty-hint {
  padding: 44px 22px;
  font-size: 13px;
  line-height: 1.85;
  color: var(--ink-500);
  text-align: center;
}

/* ============================================================ 中栏：对话 */

.chat {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: linear-gradient(180deg, #0c1c2a 0%, #0a1520 100%);
}

.chat-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 20px;
  border-bottom: 1px solid rgba(16, 26, 36, .06);
  background: rgba(12, 28, 42, 0.9);
}
.chat-head-main { flex: 1 1 auto; min-width: 0; }
.chat-head-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
}
.chat-head-sub {
  margin-top: 2px;
  font-size: 12px;
  color: var(--ink-400);
}
.chat-head-actions {
  display: flex;
  gap: 6px;
  flex: none;
}

.act-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 0;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--ink-200);
  background: rgba(16, 26, 36, .06);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease;
}
.act-btn:hover { background: rgba(16, 26, 36, .1); }
.act-btn:active { transform: scale(0.97); }
.act-btn.primary {
  color: #fff;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  box-shadow: var(--shadow-brand);
}
.act-btn.primary:hover { filter: brightness(1.08); }
.act-btn.danger { background: rgba(244, 68, 46, 0.16); color: #ff9a86; }
.act-btn.danger:hover { background: rgba(244, 68, 46, 0.26); }
.act-btn[disabled] { opacity: 0.45; pointer-events: none; }

/* 消息流：滚动交给 .conv-stream */
.stream {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
  overflow: hidden;
}
.stream-inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  max-width: 980px;
  margin: 0 auto;
}

/* 每个会话一个独立容器：各自滚动，切换时互不影响 */
.conv-stream {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: 20px 22px 10px;
}

.day-sep {
  align-self: center;
  margin: 18px 0 9px;
  padding: 4px 13px;
  border-radius: var(--radius-pill);
  background: rgba(16, 26, 36, .06);
  color: var(--ink-400);
  font-size: 11.5px;
  font-weight: 600;
}

.row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 10px;
  animation: msg-in 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.05);
}
.row.out { flex-direction: row-reverse; }
@keyframes msg-in {
  from { opacity: 0; transform: translateY(7px); }
}
.row .avatar {
  width: 32px;
  height: 32px;
  margin-top: 1px;
  font-size: 12px;
}
.row.out .avatar {
  background: linear-gradient(135deg, var(--brand-400), var(--brand-700));
  color: #fff;
}
.row.in .avatar {
  background: linear-gradient(135deg, var(--ink-500), var(--ink-700));
}

.bubble-col {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-width: min(70%, 640px);
}
.row.out .bubble-col { align-items: flex-end; }

/* 气泡上方的说话人昵称（访客消息显示客户名，备注优先） */
.who-line {
  font-size: 11px;
  line-height: 1.4;
  color: var(--ink-400);
  padding: 0 2px 1px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bubble {
  padding: 10px 15px;
  border-radius: var(--radius);
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--ink-50);
  background: var(--ink-700);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
}
.row.in .bubble { border-bottom-left-radius: 6px; }
.row.out .bubble {
  border-bottom-right-radius: 6px;
  font-weight: 500;
  color: #fff;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  box-shadow: var(--shadow-brand);
}

.meta-line {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 4px;
  font-size: 11px;
  color: var(--ink-500);
}
.meta-line .tick.read {
  color: var(--brand-300);
  font-weight: 700;
}

.sys-row {
  align-self: center;
  max-width: 80%;
  margin: 11px 0;
  text-align: center;
}
.sys-pill {
  display: inline-block;
  padding: 6px 13px;
  border-radius: var(--radius-pill);
  background: rgba(16, 26, 36, .05);
  color: var(--ink-400);
  font-size: 12px;
}
.sys-pill.call {
  background: rgba(20, 184, 166, 0.13);
  color: #3b5bdb;
  font-weight: 600;
}

.media-img {
  max-width: min(40vw, 340px);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: zoom-in;
  background: var(--ink-700);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.media-img img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 400px;
  object-fit: cover;
}

.voice {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 104px;
  padding: 10px 15px;
  border-radius: var(--radius);
  cursor: pointer;
  user-select: none;
  color: var(--ink-50);
  background: var(--ink-700);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
}
.row.out .voice {
  color: #fff;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
}
.voice-play { width: 19px; height: 19px; flex: none; }
.voice-wave {
  display: flex;
  align-items: center;
  gap: 2.5px;
  height: 19px;
}
.voice-wave i {
  display: block;
  width: 2.5px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.5;
}
.voice.playing .voice-wave i {
  animation: wave 0.9s ease-in-out infinite;
  opacity: 0.95;
}
@keyframes wave {
  0%, 100% { transform: scaleY(0.45); }
  50% { transform: scaleY(1); }
}
.voice-secs { font-size: 11.5px; opacity: 0.75; flex: none; }

.file-card {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 270px;
  padding: 11px 14px;
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
  background: var(--ink-700);
}
.file-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  font-size: 10.5px;
  font-weight: 700;
  color: #3b5bdb;
  background: rgba(20, 184, 166, 0.16);
  flex: none;
}
.file-info { min-width: 0; }
.file-name {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.file-size { font-size: 11px; color: var(--ink-400); }

.typing-row .bubble { padding: 12px 16px; }
.typing-row .avatar { margin-top: 1px; }
.typing-dots {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 0;
}
.typing-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-300);
  animation: bounce 1.2s infinite;
}
.typing-dots i:nth-child(2) { animation-delay: 0.15s; }
.typing-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-5px); opacity: 1; }
}

/* 空态 */
.chat-empty {
  flex: 1 1 auto;
  display: grid;
  place-items: center;
  padding: 40px;
}
.chat-empty-inner { max-width: 360px; text-align: center; }
.chat-empty-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 22px;
  border-radius: var(--radius-xl);
  display: grid;
  place-items: center;
  color: var(--brand-300);
  background: rgba(59, 91, 219, .08);
  border: 1px solid rgba(59, 91, 219, .2);
}
.chat-empty h2 {
  margin: 0 0 9px;
  font-size: 17.5px;
  color: var(--ink-100);
}
.chat-empty p {
  margin: 0;
  font-size: 13px;
  line-height: 1.85;
  color: var(--ink-400);
}

/* 同事接待中的提示 */
.foreign-notice {
  flex: 1 1 auto;
  display: grid;
  place-content: center;
  justify-items: center;
  min-height: 100%;
  padding: 50px 28px;
  text-align: center;
}
.foreign-notice .fn-icon {
  width: 68px;
  height: 68px;
  margin-bottom: 18px;
  border-radius: var(--radius-lg);
  display: grid;
  place-items: center;
  color: #f8c471;
  background: rgba(180, 83, 9, .1);
  border: 1px solid rgba(180, 83, 9, .22);
}
.foreign-notice h3 {
  margin: 0 0 9px;
  font-size: 16.5px;
}
.foreign-notice p {
  max-width: 340px;
  margin: 0;
  font-size: 13px;
  line-height: 1.85;
  color: var(--ink-400);
}

/* ============================================================ 输入区 */

.composer {
  flex: none;
  padding: 11px 20px 15px;
  border-top: 1px solid rgba(16, 26, 36, .06);
  background: rgba(12, 28, 42, 0.95);
}
.composer-inner { max-width: 980px; margin: 0 auto; }

.quick-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 9px;
  padding-bottom: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}
.quick-row::-webkit-scrollbar { display: none; }
.quick-chip {
  flex: none;
  padding: 6px 12px;
  border: 0;
  border-radius: var(--radius-pill);
  font-size: 12px;
  white-space: nowrap;
  color: var(--ink-200);
  background: rgba(16, 26, 36, .06);
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}
.quick-chip:hover {
  background: rgba(59, 91, 219, .16);
  color: #3b5bdb;
}
.quick-chip.add {
  background: transparent;
  border: 1px dashed rgba(147, 169, 182, 0.3);
  color: var(--ink-400);
}

.text-row {
  display: flex;
  align-items: flex-end;
  gap: 9px;
}
.tools { display: flex; gap: 2px; flex: none; }
.tool-btn {
  width: 37px;
  height: 37px;
  border: 0;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  color: var(--ink-300);
  background: transparent;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}
.tool-btn:hover {
  background: rgba(16, 26, 36, .07);
  color: var(--brand-300);
}
.input {
  flex: 1 1 auto;
  min-height: 44px;
  max-height: 160px;
  padding: 11px 15px;
  border-radius: var(--radius);
  border: 1px solid rgba(16, 26, 36, .08);
  background: rgba(255, 255, 255, .94);
  color: var(--ink-50);
  font-size: 16px;
  line-height: 1.5;
  resize: none;
  outline: none;
  transition: border-color 0.16s ease;
}
.input:focus { border-color: rgba(59, 91, 219, .5); }

.send-btn {
  flex: none;
  height: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--brand-400), var(--brand-700));
  box-shadow: var(--shadow-brand);
  cursor: pointer;
  transition: transform 0.12s ease, opacity 0.16s ease, filter 0.16s ease;
}
.send-btn:hover:not(:disabled) { filter: brightness(1.08); }
.send-btn:active:not(:disabled) { transform: scale(0.98); }
.send-btn:disabled {
  color: var(--ink-500);
  background: rgba(16, 26, 36, .09);
  box-shadow: none;
  cursor: not-allowed;
}

/* ============================================================ 右栏：访客详情 */

.detail {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--ink-800);
  border-left: 1px solid rgba(16, 26, 36, .06);
}
.detail-sec {
  padding: 17px;
  border-bottom: 1px solid rgba(16, 26, 36, .05);
}
.detail-sec h3 {
  margin: 0 0 13px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.detail-kv {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 8px 10px;
  font-size: 12.5px;
}
.detail-kv dt { color: var(--ink-500); }
.detail-kv dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-100);
  word-break: break-all;
}

.visitor-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 17px;
  border-bottom: 1px solid rgba(16, 26, 36, .05);
}
.visitor-card .avatar {
  width: 50px;
  height: 50px;
  font-size: 18px;
  background: linear-gradient(135deg, var(--ink-500), var(--ink-700));
}
.visitor-card-info { min-width: 0; }
.visitor-card-name {
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.visitor-card-sub {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
  font-size: 12px;
  color: var(--ink-400);
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

/* ---------------------------------------------------- 客户备注 */

.note-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(16, 26, 36, .1);
  background: rgba(244, 245, 247, .95);
  color: var(--ink-50);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.6;
  resize: vertical;
  min-height: 66px;
  outline: none;
  transition: border-color 0.16s ease;
}
.note-input:focus {
  border-color: var(--brand-400);
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.12);
}
.note-input::placeholder {
  color: var(--ink-500);
}
.note-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
}
.note-meta {
  font-size: 11.5px;
  color: var(--ink-500);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.note-meta.saved {
  color: var(--brand-300);
}

/* 列表里显示的备目标记 */
.note-badge {
  flex: none;
  padding: 1px 6px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 700;
  color: #f8c471;
  background: rgba(180, 83, 9, .16);
}

/* 详情面板顶部的备注摘要 */
.visitor-note-line {
  margin-top: 6px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  line-height: 1.6;
  color: #f8c471;
  background: rgba(245, 166, 35, 0.1);
  border: 1px solid rgba(245, 166, 35, 0.2);
  word-break: break-word;
}
.stat-box {
  padding: 11px 13px;
  border-radius: var(--radius-sm);
  background: rgba(250, 251, 252, .88);
}
.stat-num {
  font-size: 19px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #3b5bdb;
}
.stat-label {
  margin-top: 2px;
  font-size: 11px;
  color: var(--ink-400);
}

.detail-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 17px;
}

/* ============================================================ 弹窗 */

.modal-mask {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(16, 26, 36, .45);
  backdrop-filter: blur(4px);
  animation: fade-in 0.16s ease;
}
@keyframes fade-in {
  from { opacity: 0; }
}
.modal {
  width: 100%;
  max-width: 440px;
  max-height: 86vh;
  overflow-y: auto;
  padding: 24px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(16, 26, 36, .09);
  background: var(--ink-700);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
  animation: modal-in 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.08);
}
@keyframes modal-in {
  from { transform: translateY(14px) scale(0.97); opacity: 0; }
}
.modal h3 { margin: 0 0 17px; font-size: 16px; }
.modal-field { margin-bottom: 13px; }
.modal-field span {
  display: block;
  margin-bottom: 7px;
  font-size: 12.5px;
  color: var(--ink-400);
}
.modal-field input,
.modal-field textarea {
  width: 100%;
  padding: 11px 13px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(16, 26, 36, .1);
  background: rgba(244, 245, 247, .95);
  color: var(--ink-50);
  font-size: 16px;
  font-family: inherit;
  outline: none;
}
.modal-field input:focus,
.modal-field textarea:focus { border-color: var(--brand-400); }

/* 只读字段（站点品牌名 / 访客欢迎语对普通客服只读） */
.readonly-field {
  opacity: 0.62;
  cursor: not-allowed;
}
.ro-hint {
  margin-top: 5px;
  font-size: 11px;
  color: var(--ink-400);
}
/* 当前身份说明：解释为什么有些功能看不到 */
.role-note {
  margin: 4px 0 14px;
  padding: 9px 11px;
  border-radius: 9px;
  background: rgba(20, 184, 166, 0.10);
  border: 1px solid rgba(20, 184, 166, 0.22);
  font-size: 12px;
  line-height: 1.6;
  color: #cdd6f7;
}
.modal-foot {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 19px;
}
.modal-foot .act-btn { padding: 10px 20px; }
/* 退出登录靠左、与保存类操作拉开距离，避免误点 */
.modal-foot #btnLogout { margin-right: auto; }

/* 危险操作确认弹窗 */
.modal.confirm { max-width: 380px; }
.modal.confirm p {
  margin: 0 0 6px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-200);
}
.modal.confirm .warn {
  color: #ff9a86;
  font-size: 12.5px;
}

/* ============================================================ 客服账号管理 */

/* 通用输入 / 确认弹窗 */
#inputModal .modal-field {
  margin: 4px 0 0;
}

.modal.admin {
  max-width: 560px;
}

.admin-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 320px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.admin-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  background: rgba(250, 251, 252, .88);
}
.admin-row.disabled {
  opacity: 0.55;
}
.admin-avat .avatar {
  width: 34px;
  height: 34px;
  font-size: 13px;
  background: linear-gradient(135deg, var(--brand-400), var(--brand-700));
  color: #fff;
}
.admin-info {
  min-width: 0;
}
.admin-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-50);
}
.admin-sub {
  margin-top: 2px;
  font-size: 11.5px;
  font-family: var(--font-mono);
  color: var(--ink-400);
}
.admin-tools {
  display: flex;
  gap: 4px;
  flex: none;
}
.admin-tool {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 7px;
  display: grid;
  place-items: center;
  color: var(--ink-300);
  background: rgba(16, 26, 36, .06);
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}
.admin-tool:hover {
  background: rgba(59, 91, 219, .2);
  color: #3b5bdb;
}
.admin-tool.danger:hover {
  background: rgba(244, 68, 46, 0.22);
  color: #ff9a86;
}

.admin-add {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.admin-add input {
  width: 100%;
  padding: 10px 13px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(16, 26, 36, .1);
  background: rgba(244, 245, 247, .95);
  color: var(--ink-50);
  font-size: 14px;
  outline: none;
}
.admin-add input:focus {
  border-color: var(--brand-400);
}
.admin-add-row {
  display: flex;
  gap: 8px;
}
.admin-add-row input {
  flex: 1 1 auto;
}
.admin-add-row .act-btn {
  flex: none;
}
.admin-hint {
  margin: 12px 0 0;
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--ink-500);
}

.pw-box {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 4px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .96);
  border: 1px solid rgba(20, 184, 166, 0.24);
}
.pw-box code {
  flex: 1 1 auto;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  color: #3b5bdb;
  word-break: break-all;
}

/* ============================================================ 通话浮层 */

.call-screen {
  position: fixed;
  inset: 0;
  z-index: 600;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 56px 24px 52px;
  color: #fff;
  animation: fade-in 0.2s ease;
}
.call-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(120% 80% at 50% 0%, #0a7fb8 0%, #052c42 46%, #ffffff 100%);
}
.video-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #ffffff;
}
.remote-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #ffffff;
}
.call-screen.video .call-bg { display: none; }
.call-screen.video .call-body {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-top: auto;
  margin-bottom: 8px;
  padding: 40px 24px 12px;
  background: linear-gradient(to top, rgba(16, 26, 36, .5), transparent);
}
.call-screen.video .call-avatar,
.call-screen.video .call-note { display: none; }

.call-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 8vh;
  text-align: center;
}
.call-avatar {
  width: 94px;
  height: 94px;
  margin-bottom: 12px;
  font-size: 33px;
  background: rgba(16, 26, 36, .1);
  border: 1px solid rgba(16, 26, 36, .16);
}
.call-name { font-size: 22px; font-weight: 700; }
.call-status { font-size: 14px; opacity: 0.75; }
.call-timer {
  margin-top: 6px;
  font-size: 30px;
  font-weight: 300;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}
.call-note {
  margin-top: 14vh;
  font-size: 12px;
  opacity: 0.55;
  text-align: center;
}

.call-actions {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 26px;
}
.call-btn {
  width: 64px;
  height: 64px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  transition: transform 0.14s ease, filter 0.16s ease;
}
.call-btn:active { transform: scale(0.93); }
.call-btn.accept { background: linear-gradient(135deg, #33dd94, #00d084); }
.call-btn.reject { background: linear-gradient(135deg, #ff6b52, #d93a22); }
.call-btn.mute {
  width: 54px;
  height: 54px;
  background: rgba(16, 26, 36, .12);
}
.call-btn.mute.on {
  background: rgba(23, 33, 43, .92);
  color: var(--ink-800);
}
.call-btn-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.call-btn-label {
  margin-top: 8px;
  font-size: 11.5px;
  opacity: 0.7;
}

/* ============================================================ 图片预览 */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 700;
  display: grid;
  place-items: center;
  background: rgba(16, 26, 36, .92);
}
.lightbox img {
  max-width: 94vw;
  max-height: 90vh;
  border-radius: var(--radius);
  object-fit: contain;
}
.lb-close {
  position: absolute;
  top: 18px;
  right: 22px;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  font-size: 26px;
  line-height: 1;
  background: rgba(16, 26, 36, .1);
  cursor: pointer;
}

/* ============================================================ 响应式 */

/* 详情栏收起（1160 以下） */
@media (max-width: 1160px) {
  .wb { grid-template-columns: 272px minmax(0, 1fr); }
  .detail { display: none; }
  .wb.show-detail { grid-template-columns: 0 minmax(0, 1fr) 272px; }
  .wb.show-detail .side { display: none; }
  .wb.show-detail .detail { display: flex; }
}

/* 队列改为抽屉（900 以下） */
@media (max-width: 900px) {
  .wb { grid-template-columns: minmax(0, 1fr); }
  .side {
    position: absolute;
    inset: 0 auto 0 0;
    width: 300px;
    z-index: 40;
    transform: translateX(-102%);
    transition: transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1);
    box-shadow: 12px 0 40px rgba(0, 0, 0, 0.5);
  }
  .wb.side-open .side { transform: none; }

  /*
   * 窄屏下详情面板也要能真正打开。
   * 以前这里写的是 `.wb.show-detail .detail { display: none; }`，
   * 叠加 `.side` 被隐藏之后等于「两个面板一起藏起来」——
   * 点「详情」屏幕上看不到任何变化，像按钮坏了。
   * 现在改成从右侧滑出的覆盖层，并且和队列抽屉互斥，不会两层叠在一起。
   */
  .wb.show-detail .side { transform: translateX(-102%); }
  .detail {
    position: absolute;
    inset: 0 0 0 auto;
    width: 86%;
    max-width: 340px;
    z-index: 45;
    transform: translateX(102%);
    transition: transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1);
    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.5);
  }
  .wb.show-detail .detail { display: flex; transform: none; }

  .chat-head-sub { display: none; }
  .composer { padding: 9px 13px 13px; }
  .conv-stream { padding: 15px 14px 8px; }
  .bubble-col { max-width: 86%; }
  .menu-btn { display: grid !important; }
}

.menu-btn { display: none; }

/* 超宽屏限制对话区行长 */
@media (min-width: 1800px) {
  .wb { grid-template-columns: 320px minmax(0, 1fr) 300px; }
  .stream-inner,
  .composer-inner { max-width: 1100px; }
}


/* ===== 浅色主题校正 + 移动端打磨（自动生成，勿手改） ===== */
/* ============================================================
   浅色主题校正 + 移动端打磨
   ------------------------------------------------------------
   上面的规则是从"深色控制台"直接改令牌 + 换字面值得到的，
   骨架/间距仍可复用；但有几处深色时代的选择必须显式改写，
   否则观感会半深半浅：

   · 登录页背景是三团深色径向渐变
   · 队列/详情面板原本靠"更深的底色"制造层次，浅色下要用边框
   · 三个抽屉的投影是黑色重影，浅色底上会像脏边
   · 聊天气泡原本是半透明白，浅底上会糊成一团

   另外把移动端的目标尺寸补足：手机上按钮/搜索框/头像都要够大，
   否则容易点错——这是移动端最实际的体验问题，不是审美问题。
   ============================================================ */

/* ============================================================ 登录页 */

body.login-page {
  background:
    radial-gradient(1100px 620px at 12% -12%, rgba(16, 26, 36, .06), transparent 60%),
    radial-gradient(900px 540px at 92% 110%, rgba(59, 91, 219, .07), transparent 62%),
    linear-gradient(165deg, #ffffff 0%, #f4f5f7 58%, #eef1f4 100%);
}

.login-card {
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 20px 60px rgba(16, 26, 36, .1);
}

.login-logo {
  background: var(--brand-700);
  color: #fff;
  box-shadow: none;
}

.login-title { color: var(--text); }

.login-field input {
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  color: var(--text);
}
.login-field input:focus {
  background: #fff;
  border-color: var(--brand-700);
  box-shadow: 0 0 0 3px rgba(16, 26, 36, .07);
}

.login-submit {
  background: var(--brand-700);
  color: #fff;
  box-shadow: none;
}
.login-submit:hover { filter: brightness(1.12); }

/* 错误/提示在浅底上要够深才看得清 */
.login-error { color: var(--danger); }

/* ============================================================ 骨架与三栏 */

/*
 * body 必须显式改写，而且要用**同等具体性**的选择器。
 *
 * 原文件里有两处把"浅字配深底"写死成一对：
 *     body            { color: var(--ink-100); background: var(--ink-900); }   // 第 96 行
 *     body.workbench  { background: var(--ink-900); color: var(--ink-100); }   // 第 297 行
 * 只换令牌会让它们变成"近白字 + 近白底"，整站正文直接看不见；
 * 而 `body` 选择器(0,0,1) 又压不过 `body.workbench`(0,1,1)——
 * 所以这里必须以同等或更高具体性改写，否则规则写了也不赢。
 */
body,
body.workbench {
  color: var(--text);
  background: var(--bg);
}

.wb { background: var(--bg); }

/* <main class="chat"> 原来是深底（--ink-800），浅色主题下要给浅灰 */
.chat { background: var(--bg); }

.side,
.detail {
  background: var(--panel);
  border-color: var(--line);
}

/* 空状态标题原本是浅字（深色主题下才好看） */
.chat-empty h2 { color: var(--text); }
.chat-empty p { color: var(--text-2); }
.side-head,
.detail-head,
.chat-head {
  background: var(--panel);
  border-color: var(--line);
}

/* 层次靠边框与浅灰，不再靠"更深" */
.queue-search input {
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  color: var(--text);
}
.queue-search input:focus {
  background: #fff;
  border-color: var(--brand-700);
  box-shadow: 0 0 0 3px rgba(16, 26, 36, .07);
}

/* 会话列表项 */
.row, .conv {
  background: transparent;
  border-bottom: 1px solid var(--line);
}
.row:hover, .conv:hover { background: var(--panel-2); }
.row.active, .conv.active {
  background: var(--accent-100);
  border-left-color: var(--accent-500);
}

/* 聊天气泡：浅色底上必须是实色 */
.bubble {
  background: #fff;
  border: 1px solid var(--line);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}
.bubble.mine, .bubble.agent {
  background: var(--accent-100);
  border-color: var(--accent-300);
  color: var(--text);
}
.bubble.sys { background: var(--panel-2); color: var(--text-3); }
.bubble-time, .bubble-meta { color: var(--text-3); }

/* 输入区 */
.composer {
  background: var(--panel);
  border-top: 1px solid var(--line);
}
.composer textarea,
.composer .input {
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  color: var(--text);
}
.composer textarea:focus { background: #fff; border-color: var(--brand-700); }

/* 弹窗与浮层 */
.modal {
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}
.modal-mask { background: rgba(16, 26, 36, .42); backdrop-filter: blur(2px); }
.modal-head { border-color: var(--line); }
.modal-foot { border-color: var(--line); }
.modal input, .modal textarea, .modal select {
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  color: var(--text);
}
.lightbox { background: rgba(16, 26, 36, .88); }
.lb-close { background: rgba(255, 255, 255, .16); }

/* 详情抽屉里的字段 */
.detail-sec { border-color: var(--line); }
.detail-key, .dv-key { color: var(--text-3); }
.detail-val, .dv-val { color: var(--text); }

/* 标签 */
.tag {
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  color: var(--text-2);
}
.tag.mine { background: var(--accent-100); border-color: var(--accent-300); color: var(--accent-600); }

/* 抽屉投影：浅色底上要轻 */
@media (max-width: 900px) {
  .side { box-shadow: 8px 0 32px rgba(16, 26, 36, .16); }
  .detail { box-shadow: -8px 0 32px rgba(16, 26, 36, .16); }
}

/* ============================================================ 手机端专属顶栏

   .chat-mobile-bar 是"打开会话列表"的常驻入口。
   桌面（≥901）隐藏它——那边队列栏是常驻的，不需要。
   .menu-btn 原来是为"贴在 chatHead 里"设计的（absolute 定位），
   挪到这里之后要改成跟随流式布局，否则会和标题叠在一起。
*/

.chat-mobile-bar { display: none; }

@media (max-width: 900px) {
  .chat-mobile-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: calc(8px + var(--safe-t)) 12px 8px;
    background: var(--panel);
    border-bottom: 1px solid var(--line);
    flex: 0 0 auto;
  }
  .chat-mobile-bar .menu-btn {
    position: static;
    top: auto;
    left: auto;
    transform: none;
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: var(--radius-sm);
    color: var(--text-2);
    background: transparent;
    border: 1px solid var(--line-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
  }
  .chat-mobile-bar .menu-btn:active { background: var(--panel-2); }
  .chat-mobile-bar .cmb-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ============================================================ 移动端打磨

   目标不是"能看"，而是"手指点得准、内容不顶着安全区"。
   iPhone 底部有 home indicator，输入区必须留出 safe-area，
   否则最后一行的发送按钮会被系统手势条压住。
*/

@media (max-width: 900px) {
  /* 头部：给状态栏留位置（刘海屏） */
  .chat-head {
    padding-top: calc(10px + var(--safe-t));
    min-height: 54px;
  }
  .side-head { padding-top: calc(12px + var(--safe-t)); }
  .detail-head { padding-top: calc(12px + var(--safe-t)); }

  /* 触摸目标 ≥ 40px：图标按钮最容易点错 */
  .icon-btn, .act-btn, .chat-actions .act-btn {
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .queue-search input {
    height: 42px;
    font-size: 16px;   /* ≥16px 避免 iOS 聚焦时自动放大 */
  }
  .composer textarea, .composer .input {
    font-size: 16px;
    min-height: 44px;
  }
  .composer .send-btn, .composer button[type="submit"] { min-width: 72px; min-height: 44px; }

  /* 气泡与留白：手机上两侧都省一点，正文更宽 */
  .bubble-col { max-width: 88%; }
  .stream-inner { padding-left: 2px; padding-right: 2px; }

  /* 弹窗：小屏上占满宽，按钮更容易点 */
  .modal-mask { padding: 10px; align-items: flex-end; }
  .modal {
    max-height: 92vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: 18px 16px calc(18px + var(--safe-b));
    width: 100%;
  }
  .modal-foot { gap: 10px; }
  .modal-foot .btn { flex: 1 1 auto; min-height: 44px; }

  /* 抽屉里内容多时能滚（否则小屏看不到底部字段） */
  .side, .detail {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 详情字段在窄屏竖排，避免标签被挤成两行 */
  .detail-row, .dv-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
}

/* 超小屏（≤380）：进一步压缩 */
@media (max-width: 380px) {
  .chat-name { font-size: 13.5px; }
  .bubble-col { max-width: 92%; }
  .chat-head { padding-left: 10px; padding-right: 10px; }
}
/* ===== 覆盖块结束 ===== */
/* @bottom-nav-css */
/* ============================================================ 手机底部导航

   窄屏（≤900）上把最常用的入口平铺到拇指区：消息 / 待接入 / 设置 /（客户）。
   桌面隐藏——那边左栏常驻，不需要第二套导航。

   布局要点：导航是 fixed，所以内容区、输入区、抽屉都要让出这一段高度，
   否则最后一条消息和发送按钮会被压在导航下面（手机上很难点）。
*/

:root {
  --bn-h: 58px;
  --bn-total: calc(var(--bn-h) + var(--safe-b));
}

.bottom-nav { display: none; }

@media (max-width: 900px) {
  .bottom-nav {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: center;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--bn-total);
    padding-bottom: var(--safe-b);
    background: var(--panel);
    border-top: 1px solid var(--line);
    z-index: 90;
    box-shadow: 0 -2px 12px rgba(16, 26, 36, .06);
  }

  .bn-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: var(--bn-h);
    color: var(--text-3);
    background: none;
    border: 0;
    font-size: 11px;
    transition: color .16s ease;
  }
  .bn-item:active { background: var(--panel-2); }
  .bn-item.active { color: var(--brand-700); font-weight: 600; }
  .bn-item.active svg { transform: translateY(-1px); }
  .bn-label { line-height: 1; }

  /* 未读/待接入数量角标 */
  .bn-badge {
    position: absolute;
    top: 5px;
    left: 50%;
    margin-left: 6px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
  }
  .bn-badge.warn { background: var(--warn); }

  /* 内容让出导航高度 */
  .chat { padding-bottom: var(--bn-total); }
  .composer { margin-bottom: 0; }
  .side,
  .detail { padding-bottom: var(--bn-total); }

  /* 设置入口已经到底部导航上，抽屉顶部那个齿轮在手机上就多余了 */
  .side-top .icon-plain { display: none; }

  /* 没有选中会话时，顶部那个"打开列表"按钮也多余（底部有"消息"） */
  .chat-mobile-bar.has-session .menu-btn { display: none; }
}
/* @bottom-nav-css */