/* =============================================================================
   Spider-fire · 业务询盘系统 (v1.57.0) —— 独立页面样式
   风格: WhatsApp Web(浅色) —— 左「工作内容窗口」+ 右「工作组聊天操作窗」
   独立文件, 不参与主系统 style.css 的段管理(避免互相截断)
   ---------------------------------------------------------------------------
   对比度自检(文字一律 ≥4.5:1, 图标/边框 ≥3:1):
     #54656F on #FFFFFF = 5.7:1   · #008069 on #FFFFFF = 4.6:1
     #FFFFFF on #008069 = 4.6:1   · #111B21 on #D9FDD3 = 15.2:1
   ========================================================================== */

:root {
  --wa-teal: #008069;          /* WhatsApp 主色(头部/主按钮) */
  --wa-teal-d: #006E5A;        /* hover 加深 */
  --wa-green: #00A884;         /* 强调绿(发送/成功) */
  --wa-ink: #111B21;           /* 主文本 */
  --wa-sub: #54656F;           /* 次级文本(AA 5.7:1) */
  --wa-line: #E3E8EB;          /* 分隔线 */
  --wa-panel: #FFFFFF;
  --wa-soft: #F0F2F5;          /* 面板底/输入栏 */
  --wa-chat: #EFEAE2;          /* 聊天纸底 */
  --wa-out: #D9FDD3;           /* 自己发出的气泡 */
  --wa-in: #FFFFFF;            /* 对方气泡 */
  --wa-tick: #53BDEB;          /* 已读双勾 */
  --wa-warn: #C0392B;
  --wa-warn-bg: #FDECEA;
  --brand: #4D6BFE;            /* 品牌蓝(仅 LOGO) */
  --brand-2: #3B4FE0;
  --r-sm: 8px; --r-md: 12px; --r-lg: 18px;
  --sh-1: 0 1px 2px rgba(11, 20, 26, .08);
  --sh-2: 0 8px 28px -10px rgba(11, 20, 26, .28);
  --fs: 14px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* 带 hidden 的元素不能被 display:flex 盖掉 */
html, body { height: 100%; }
body {
  margin: 0; color: var(--wa-ink); font: var(--fs)/1.6 "Segoe UI", -apple-system, "Microsoft YaHei", Roboto, sans-serif;
  background: var(--wa-soft); -webkit-font-smoothing: antialiased;
}
a { color: var(--wa-teal); }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--wa-teal); outline-offset: 2px; border-radius: 4px; }

/* ============================ 一、独立登录界面 ============================ */
#iqLogin {
  position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center;
  padding: 28px 18px; overflow: auto;
  background: #F7F9FA;
  background-image:
    radial-gradient(920px 520px at 6% -10%, rgba(0, 168, 132, .16), transparent 62%),
    radial-gradient(860px 480px at 98% 4%, rgba(0, 128, 105, .14), transparent 60%),
    linear-gradient(180deg, #F7F9FA, #EEF3F1);
}
.lg-wrap { width: 100%; max-width: 1040px; }
.lg-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.lg-brand { display: flex; align-items: center; gap: 12px; }
.lg-brand b { font-size: 19px; letter-spacing: -.3px; display: block; }
.lg-brand em { font-style: normal; font-size: 12px; color: var(--wa-sub); display: block; }
.lg-ver { font-size: 12px; color: var(--wa-sub); }
.lg-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 24px; align-items: stretch; }

.lg-hero { padding: 30px 28px; border-radius: var(--r-lg); background: #FFFFFF; border: 1px solid var(--wa-line); box-shadow: var(--sh-1); }
.lg-badge {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px;
  background: rgba(0, 168, 132, .12); color: #04604E; font-size: 12px; font-weight: 700; margin-bottom: 14px;
}
.lg-badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--wa-green); display: inline-block; }
.lg-hero h2 { margin: 0 0 8px; font-size: 26px; line-height: 1.35; letter-spacing: -.5px; }
.lg-hero h2 .grad { background: linear-gradient(96deg, #00A884, #008069 60%, #0B7A66); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lg-hero p { margin: 0 0 16px; color: var(--wa-sub); font-size: 14px; }
.lg-flow { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 9px; }
.lg-flow li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--wa-ink); }
.lg-flow li b { display: inline-flex; min-width: 22px; height: 22px; border-radius: 50%; background: rgba(0, 168, 132, .14); color: #04604E; font-size: 12px; align-items: center; justify-content: center; }
.lg-flow li span { color: var(--wa-sub); }
.lg-pills { display: flex; flex-wrap: wrap; gap: 7px; }
.lg-pills span { font-size: 12px; color: #04604E; background: rgba(0, 168, 132, .10); border: 1px solid rgba(0, 168, 132, .22); border-radius: 999px; padding: 3px 10px; font-weight: 600; }

.lg-card { background: #FFFFFF; border: 1px solid var(--wa-line); border-radius: var(--r-lg); box-shadow: var(--sh-2); padding: 26px 26px 22px; display: flex; flex-direction: column; }
.lg-head { display: flex; gap: 12px; align-items: center; margin-bottom: 18px; }
.lg-avatar { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(160deg, #E7F8F3, #D2F0E8); display: flex; align-items: center; justify-content: center; font-size: 20px; }
.lg-head strong { display: block; font-size: 17px; }
.lg-head small { display: block; color: var(--wa-sub); font-size: 12.5px; }
.lg-f { margin-bottom: 14px; }
.lg-f label { display: block; font-size: 12.5px; font-weight: 700; color: var(--wa-sub); margin-bottom: 6px; }
.lg-f input {
  width: 100%; padding: 11px 13px; border: 1px solid var(--wa-line); border-radius: 10px;
  background: #FBFCFC; color: var(--wa-ink); font-size: 14px; transition: border-color .16s, box-shadow .16s, background .16s;
}
.lg-f input::placeholder { color: #8696A0; }
.lg-f input:focus { outline: none; border-color: var(--wa-teal); background: #fff; box-shadow: 0 0 0 3px rgba(0, 128, 105, .14); }
.lg-f .lg-inp { position: relative; }
.lg-f .lg-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: none; font-size: 15px; padding: 6px 8px; border-radius: 8px; color: var(--wa-sub); }
.lg-f .lg-eye:hover { background: var(--wa-soft); }
.lg-btn {
  width: 100%; padding: 12px 16px; border: 0; border-radius: 10px; color: #fff; font-weight: 700; font-size: 15px;
  background: linear-gradient(170deg, #00A884, #008069); box-shadow: 0 6px 18px -8px rgba(0, 128, 105, .8);
}
.lg-btn:hover { background: linear-gradient(170deg, #00997A, var(--wa-teal-d)); }
.lg-btn[disabled] { opacity: .6; cursor: default; }
.lg-err { margin: 0 0 12px; padding: 9px 12px; border-radius: 9px; background: var(--wa-warn-bg); color: var(--wa-warn); font-size: 13px; }
.lg-note { margin: 14px 0 0; font-size: 12.5px; color: var(--wa-sub); text-align: center; }
.lg-rows { display: flex; gap: 8px; justify-content: space-between; font-size: 12.5px; color: var(--wa-sub); margin-top: 12px; }

/* ============================ 二、工作台骨架 ============================ */
#iqApp { display: flex; flex-direction: column; height: 100vh; min-height: 100vh; }
.wa-top {
  display: flex; align-items: center; gap: 12px; padding: 0 14px; height: 56px; flex: 0 0 auto;
  background: var(--wa-teal); color: #fff; box-shadow: var(--sh-1); position: relative; z-index: 4;
}
.wa-logo { display: flex; align-items: center; }
.wa-top b { font-size: 15.5px; letter-spacing: -.2px; }
.wa-top em { font-style: normal; font-size: 12px; opacity: .85; }
.wa-top .sp { flex: 1; }
.wa-top .wa-me { font-size: 13px; opacity: .95; }
.wa-top button, .wa-top a.wa-back {
  border: 1px solid rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .12); color: #fff;
  padding: 6px 12px; border-radius: 999px; font-size: 12.5px; text-decoration: none; font-weight: 600;
}
.wa-top button:hover, .wa-top a.wa-back:hover { background: rgba(255, 255, 255, .24); }

.wa-body { flex: 1 1 auto; display: flex; min-height: 0; }

/* ---- 左: 工作内容窗口 ---- */
/* v1.76: 席位已移到右侧, 内容窗按**比例**占剩余宽度（原 58% 是「席位在左」时的配比）。
   ⛔ 必须 basis 0 + grow 比例，不能用 basis auto —— auto 会按**内容宽**抢空间：
      1024px 下它抢到 786px，把右侧手机窗压到 149px，而手机壳最小 332px → 横向溢出 95px（实测）。 */
.wa-work { flex: 1.2 1 0%; min-width: 0; display: flex; flex-direction: column; background: var(--wa-panel); }
.wk-tabs { display: flex; gap: 2px; padding: 8px 10px 0; border-bottom: 1px solid var(--wa-line); background: #FBFCFC; overflow-x: auto; }
.wk-tabs button {
  border: 0; background: none; color: var(--wa-sub); font-size: 13px; font-weight: 600; padding: 9px 12px;
  border-bottom: 3px solid transparent; border-radius: 6px 6px 0 0; white-space: nowrap;
}
.wk-tabs button:hover { color: var(--wa-teal); background: rgba(0, 168, 132, .07); }
.wk-tabs button.on { color: var(--wa-teal); border-bottom-color: var(--wa-teal); }
.wk-tabs button .badge { display: inline-block; min-width: 17px; padding: 0 5px; border-radius: 999px; background: var(--wa-warn); color: #fff; font-size: 11px; margin-left: 5px; font-weight: 700; }
.wk-panes { flex: 1 1 auto; overflow: auto; padding: 14px; background: #FCFDFD; }
.wk-pane { display: none; }
.wk-pane.on { display: block; }

.card { background: #fff; border: 1px solid var(--wa-line); border-radius: var(--r-md); padding: 13px 14px; margin-bottom: 12px; box-shadow: var(--sh-1); }
.card h3 { margin: 0 0 10px; font-size: 14.5px; display: flex; align-items: center; gap: 7px; }
.card h3 .muted { font-weight: 400; color: var(--wa-sub); font-size: 12px; }
.f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.f1 { margin-bottom: 10px; }
.f1 label, .f2 label { display: block; font-size: 12.5px; font-weight: 700; color: var(--wa-sub); margin-bottom: 5px; }
input[type=text], input[type=password], input[type=search], select, textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--wa-line); border-radius: 9px;
  background: #fff; color: var(--wa-ink); font: inherit;
}
textarea { resize: vertical; min-height: 74px; line-height: 1.6; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--wa-teal); box-shadow: 0 0 0 3px rgba(0, 128, 105, .13); }
.btn {
  border: 1px solid var(--wa-line); background: #fff; color: var(--wa-ink); padding: 8px 14px; border-radius: 9px;
  font-weight: 600; font-size: 13px;
}
.btn:hover { border-color: rgba(0, 128, 105, .5); color: var(--wa-teal); }
.btn.primary { background: linear-gradient(170deg, #00A884, #008069); border-color: transparent; color: #fff; }
.btn.primary:hover { background: linear-gradient(170deg, #00997A, var(--wa-teal-d)); color: #fff; }
.btn.sm { padding: 5px 10px; font-size: 12px; }
.btn.danger { color: var(--wa-warn); border-color: #EED5D1; }
.btn.danger:hover { background: var(--wa-warn-bg); }
.btn[disabled] { opacity: .55; cursor: default; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row.end { justify-content: flex-end; }
.muted { color: var(--wa-sub); }
.sm { font-size: 12.5px; }
.hint { font-size: 12.5px; color: var(--wa-sub); margin: 6px 0 0; }

.chip { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; border: 1px solid transparent; }
.chip.gray { background: #EEF1F2; color: #4A5A63; }
.chip.amber { background: #FFF4E0; color: #8A5A00; border-color: #F3D9A8; }
.chip.green { background: #E4F7EE; color: #04604E; border-color: #B8E6D5; }
.chip.red { background: var(--wa-warn-bg); color: var(--wa-warn); border-color: #F0C9C3; }
.chip.blue { background: #EAF0FF; color: #2C3ECF; border-color: #C9D6FF; }

.agent-pick { display: flex; flex-wrap: wrap; gap: 7px; }
.agent-pick label {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border: 1px solid var(--wa-line);
  border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--wa-sub); background: #fff; cursor: pointer;
}
.agent-pick label:hover { border-color: rgba(0, 128, 105, .45); }
.agent-pick input { margin: 0; accent-color: var(--wa-green); }
.agent-pick label.on { background: rgba(0, 168, 132, .10); border-color: rgba(0, 128, 105, .5); color: #04604E; }

.list { display: grid; gap: 9px; }
.item { border: 1px solid var(--wa-line); border-radius: var(--r-md); padding: 11px 12px; background: #fff; }
.item.sel { border-color: var(--wa-teal); box-shadow: 0 0 0 2px rgba(0, 128, 105, .12); }
.item .it-top { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; flex-wrap: wrap; }
.item .it-top b { font-size: 13.5px; }
.item .it-top .sp { flex: 1; }
.item .it-body { font-size: 12.8px; color: var(--wa-sub); white-space: pre-wrap; word-break: break-word; }
.item .it-act { display: flex; gap: 7px; margin-top: 9px; flex-wrap: wrap; }
.empty { text-align: center; color: var(--wa-sub); font-size: 13px; padding: 26px 10px; }

.kb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: 12px; }
.kb-tile { border: 1px solid var(--wa-line); border-radius: var(--r-md); padding: 12px; background: #fff; cursor: pointer; text-align: left; }
.kb-tile:hover { border-color: rgba(0, 128, 105, .45); }
.kb-tile.on { border-color: var(--wa-teal); box-shadow: 0 0 0 2px rgba(0, 128, 105, .12); }
.kb-tile b { display: block; font-size: 14px; margin-bottom: 3px; }
.kb-tile span { font-size: 12.3px; color: var(--wa-sub); display: block; }
.kb-tile .kb-n { font-size: 11.5px; color: #04604E; font-weight: 700; margin-top: 6px; display: block; }
.lockbar { display: flex; gap: 9px; align-items: center; background: #FFF8E8; border: 1px solid #F0DDB0; border-radius: var(--r-md); padding: 10px 12px; margin-bottom: 12px; }
.lockbar .sp { flex: 1; }
.lockbar b { color: #7A5200; font-size: 13px; }

.trace { border-left: 2px solid rgba(0, 128, 105, .35); margin: 8px 0 0 6px; padding-left: 12px; display: grid; gap: 10px; }
.trace div { position: relative; font-size: 12.8px; }
.trace div::before { content: ''; position: absolute; left: -18px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--wa-green); }
.trace b { display: block; color: var(--wa-ink); }
.trace em { font-style: normal; color: var(--wa-sub); }

.evi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.evi { border: 1px solid var(--wa-line); border-radius: var(--r-md); padding: 8px; background: #fff; }
.evi img { width: 100%; height: 96px; object-fit: cover; border-radius: 7px; background: var(--wa-soft); display: block; }
.evi .ev-no { height: 96px; border-radius: 7px; background: var(--wa-soft); display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--wa-sub); font-size: 13px; }
.evi .ev-n { font-size: 12px; margin-top: 6px; word-break: break-all; }
.evi .ev-s { font-size: 11.5px; color: var(--wa-sub); }

/* ---- 右: 工作组聊天操作窗 ---- */
.wa-chat { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; background: var(--wa-chat); position: relative; }
.wa-chead { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #F0F2F5; border-bottom: 1px solid var(--wa-line); }
.wa-chead .g-av { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(160deg, #00A884, #008069); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 17px; flex: 0 0 auto; }
.wa-chead .g-info { min-width: 0; flex: 1; }
.wa-chead .g-info b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-chead .g-info span { display: block; font-size: 12px; color: var(--wa-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-chead .g-act { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.wa-chead .g-act button { border: 0; background: none; color: var(--wa-sub); padding: 6px 8px; border-radius: 8px; font-size: 15px; }
.wa-chead .g-act button:hover { background: rgba(11, 20, 26, .06); color: var(--wa-teal); }
.wa-chead .g-act button[disabled] { opacity: .4; }

.wa-msgs { flex: 1 1 auto; overflow: auto; padding: 16px 14px 10px; scroll-behavior: smooth; }
.wa-day { text-align: center; margin: 12px 0; }
.wa-day span { display: inline-block; background: #FFFFFF; color: var(--wa-sub); font-size: 11.5px; padding: 4px 11px; border-radius: 8px; box-shadow: var(--sh-1); }
.wa-sys { text-align: center; margin: 10px 0; }
.wa-sys span { display: inline-block; background: #FFF7E2; color: #6B4E00; font-size: 12px; padding: 5px 12px; border-radius: 8px; box-shadow: var(--sh-1); max-width: 84%; }
.wa-sys.warn span { background: #FDECEA; color: #8A2B1E; }
.wa-line { display: flex; gap: 8px; margin-bottom: 9px; align-items: flex-end; }
.wa-line.out { flex-direction: row-reverse; }
.wa-line .av { width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-size: 15px; color: #fff; background: #8696A0; }
.wa-bub { max-width: 74%; padding: 7px 10px 6px; border-radius: 10px; background: var(--wa-in); box-shadow: var(--sh-1); position: relative; }
.wa-line.out .wa-bub { background: var(--wa-out); }
.wa-bub .who { font-size: 12px; font-weight: 700; margin-bottom: 2px; }
.wa-bub .tx { font-size: 13.8px; white-space: pre-wrap; word-break: break-word; }
.wa-bub .mt { font-size: 11px; color: var(--wa-sub); text-align: right; margin-top: 3px; display: flex; gap: 4px; justify-content: flex-end; align-items: center; }
.wa-bub .mt .tick { color: var(--wa-tick); letter-spacing: -2px; }
.wa-bub .src { font-size: 11px; color: #04604E; background: rgba(0, 168, 132, .12); border-radius: 6px; padding: 1px 6px; display: inline-block; margin-top: 4px; }
.wa-bub .att { margin-top: 7px; }
.wa-bub .att a { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; background: rgba(11, 20, 26, .05); padding: 6px 9px; border-radius: 7px; text-decoration: none; color: var(--wa-teal); font-weight: 600; }
.wa-bub .snap { position: absolute; right: 6px; bottom: 4px; border: 0; background: none; font-size: 12px; opacity: 0; padding: 2px 4px; border-radius: 6px; }
.wa-line:hover .snap { opacity: .85; }
.wa-bub .snap:hover { background: rgba(11, 20, 26, .08); opacity: 1; }
.wa-bub.pick { box-shadow: 0 0 0 2px var(--wa-teal), var(--sh-1); }

.wa-selbar { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #E7F5F0; border-top: 1px solid #CBE8DD; }
.wa-selbar .sp { flex: 1; }
.wa-selbar b { color: #04604E; font-size: 12.8px; }

.wa-input { flex: 0 0 auto; display: flex; align-items: flex-end; gap: 8px; padding: 9px 12px; background: #F0F2F5; border-top: 1px solid var(--wa-line); }
.wa-input .in-wrap { flex: 1; display: flex; align-items: flex-end; background: #fff; border-radius: 12px; padding: 4px 6px 4px 12px; box-shadow: var(--sh-1); }
.wa-input textarea { border: 0; box-shadow: none !important; min-height: 38px; max-height: 130px; padding: 8px 4px; background: transparent; }
.wa-input .send { width: 44px; height: 44px; border-radius: 50%; border: 0; background: linear-gradient(170deg, #00A884, #008069); color: #fff; font-size: 18px; flex: 0 0 auto; }
.wa-input .send:hover { background: linear-gradient(170deg, #00997A, var(--wa-teal-d)); }
.wa-input .send[disabled] { opacity: .5; }
.wa-input .fx { display: flex; gap: 4px; align-items: center; }
.wa-input .fx button { border: 0; background: none; color: var(--wa-sub); font-size: 17px; padding: 8px; border-radius: 9px; }
.wa-input .fx button:hover { background: rgba(11, 20, 26, .06); color: var(--wa-teal); }

/* ---- 弹窗/浮层 ---- */
.wa-modal { position: fixed; inset: 0; z-index: 80; background: rgba(11, 20, 26, .5); display: flex; align-items: center; justify-content: center; padding: 20px; }
.wa-modal .box { background: #fff; border-radius: var(--r-lg); padding: 20px 22px; width: 100%; max-width: 460px; box-shadow: var(--sh-2); max-height: 88vh; overflow: auto; }
.wa-modal h3 { margin: 0 0 6px; font-size: 16px; }
.wa-modal .wa-err { margin: 10px 0 0; padding: 8px 11px; border-radius: 8px; background: var(--wa-warn-bg); color: var(--wa-warn); font-size: 12.8px; }
.menu { position: absolute; z-index: 70; background: #fff; border: 1px solid var(--wa-line); border-radius: 10px; box-shadow: var(--sh-2); padding: 6px; min-width: 190px; }
.menu button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 7px; font-size: 13px; color: var(--wa-ink); }
.menu button:hover { background: var(--wa-soft); }

.toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 200; background: #111B21; color: #fff; padding: 10px 16px; border-radius: 999px; font-size: 13px; box-shadow: var(--sh-2); }

/* ---- 窄屏: 上下分栏(工作在上, 聊天在下) ---- */
@media (max-width: 980px) {
  .lg-grid { grid-template-columns: 1fr; }
  .lg-hero { display: none; }
  .wa-body { flex-direction: column; }
  .wa-work { flex: 0 0 auto; max-height: 46vh; border-right: 0; border-bottom: 1px solid var(--wa-line); }
  .wa-chat { flex: 1 1 auto; }
  .wa-bub { max-width: 84%; }
  .f2 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* =============================================================================
   v1.58.0 第一段 · 工作组聊天窗改为「手机 16:9 机身」
   ⛔ 追加在文件末尾, 不截断任何既有段（历史段有 ID 级/双类级规则会盖掉追加层）
   ---------------------------------------------------------------------------
   --phone-ratio 就是手机屏比例：竖屏＝宽:高 = 9:16（俗称"手机 16:9 屏"）。
   若要改成**横屏 16:9**（宽:高 = 16:9），只需把 --phone-ratio 改成 16 / 9。
   ========================================================================== */
:root {
  --phone-w: 372px;              /* 机身宽度(不含边框) */
  --phone-ratio: 9 / 16;         /* 手机 16:9 屏 · 竖屏 */
  --phone-bezel: 9px;
}
.wa-chat { align-items: center; justify-content: center; padding: 0; }
.phone {
  position: relative; display: flex; flex-direction: column;
  width: 100%; height: 100%; min-height: 0; overflow: hidden;
  background: var(--wa-chat);
}
.phone-notch, .phone-bar { display: none; }

@media (min-width: 1100px) {
  /* 桌面: 左侧工作窗吃掉剩余宽度, 右侧只是一个手机 */
  .wa-work { flex: 1 1 auto; }
  .wa-chat {
    flex: 0 0 calc(var(--phone-w) + var(--phone-bezel) * 2 + 28px);
    padding: 14px; background: linear-gradient(170deg, #E9EDEB, #DAE4E0);
  }
  .phone {
    flex: 0 0 auto; width: min(var(--phone-w), 100%); height: auto;
    aspect-ratio: var(--phone-ratio); max-height: calc(100vh - 88px);
    border: var(--phone-bezel) solid #0E1519; border-radius: 38px;
    box-shadow: 0 26px 60px -22px rgba(11, 20, 26, .55), 0 0 0 1px rgba(11, 20, 26, .3);
  }
  .phone-notch {
    display: block; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 88px; height: 17px; background: #0E1519; border-radius: 0 0 13px 13px; z-index: 6;
  }
  .phone-bar {
    display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto;
    padding: 5px 16px 2px; background: #F0F2F5;
    font-size: 11.5px; font-weight: 700; color: var(--wa-sub);
  }
}
.ph-right { display: inline-flex; align-items: center; gap: 5px; }
.ph-sig {
  width: 15px; height: 10px; border-radius: 1px; background:
    linear-gradient(90deg, var(--wa-sub) 0 20%, transparent 20% 27%, var(--wa-sub) 27% 47%,
      transparent 47% 54%, var(--wa-sub) 54% 74%, transparent 74% 81%, var(--wa-sub) 81% 100%);
}
.ph-bat { width: 21px; height: 11px; border: 1.5px solid var(--wa-sub); border-radius: 3px; position: relative; }
.ph-bat::after { content: ''; position: absolute; inset: 2px 8px 2px 2px; background: var(--wa-green); border-radius: 1px; }

/* 机身宽度下的紧凑配比(信息密度按手机屏幕调) */
@media (min-width: 1100px) {
  .wa-chead { padding: 6px 10px; gap: 8px; }
  .wa-chead .g-av { width: 32px; height: 32px; font-size: 15px; }
  .wa-chead .g-info b { font-size: 13px; }
  .wa-chead .g-info span { font-size: 11.5px; }
  .wa-chead .g-act button { font-size: 14px; padding: 5px 6px; }
  .wa-msgs { padding: 11px 10px 8px; }
  .wa-line { margin-bottom: 8px; }
  .wa-line .av { width: 25px; height: 25px; font-size: 12.5px; }
  .wa-bub { max-width: 83%; }
  .wa-bub .tx { font-size: 13.3px; }
  .wa-bub .who { font-size: 11.5px; }
  .wa-sys span { font-size: 11.5px; max-width: 88%; }
  .wa-input { padding: 6px 8px; }
  .wa-input .send { width: 38px; height: 38px; font-size: 16px; }
  .wa-input textarea { min-height: 32px; font-size: 13.4px; }
  .wa-selbar { padding: 6px 10px; }
}

/* =============================================================================
   v1.58.0 第二段 · 融合主系统「业务询盘档案」
   ========================================================================== */
.src-inq {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 12px; padding: 9px 12px; border-radius: var(--r-md);
  background: #EEF7F3; border: 1px solid #CBE8DD;
}
.src-inq b { color: #04604E; }
.src-inq em { font-style: normal; color: var(--wa-sub); font-size: 12.5px; }
.src-inq button { margin-left: auto; }

.inq-meta { display: flex; flex-wrap: wrap; gap: 5px 14px; font-size: 12.5px; color: var(--wa-sub); margin-top: 6px; }
.inq-meta b { color: var(--wa-ink); font-weight: 600; }
.inq-demo { font-size: 12.8px; color: var(--wa-sub); white-space: pre-wrap; word-break: break-word; margin-top: 6px; }
.inq-note { border-left: 3px solid #E0B44A; background: #FFFBF0; }
.inq-note .who-line { font-size: 12px; color: #7A5200; font-weight: 700; margin-bottom: 3px; }
.inq-note.pub { border-left-color: var(--wa-green); background: #F3FBF8; }
.inq-note.pub .who-line { color: #04604E; }
.inq-day { font-size: 11.5px; color: var(--wa-sub); font-weight: 700; margin: 4px 0 2px; }
.inq-link {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700;
  color: #04604E; background: rgba(0, 168, 132, .10); border: 1px solid rgba(0, 168, 132, .24);
  border-radius: 999px; padding: 2px 9px;
}
/* =============================================================================
   v1.59.0 第一段 · 浮层与 WhatsApp 化
   ⛔ 一律追加到文件末尾, 不截断任何既有段（历史段有 ID 级/双类级规则会盖掉追加层）
   ---------------------------------------------------------------------------
   ① 所有浮层改为「顶栏之下」定位 —— 原生 prompt/confirm 会贴在窗口顶部压住上栏,
      应用内浮层也一并下移, 保证上栏（品牌/用户/退出）任何时候都看得见。
   ② 右侧询盘窗按 WhatsApp 真实细节打磨: 气泡尾巴 / 加密提示 / 日期胶囊 / 已读双勾 /
      情侣化输入条 / 聊天壁纸 / 常用短语。
   ========================================================================== */
:root { --iq-top: 56px; }

/* ---- ① 浮层: 顶栏之下, 不覆盖上栏 ---- */
.wa-modal {
  top: var(--iq-top); bottom: 0; left: 0; right: 0;
  align-items: flex-start; padding: 26px 20px 20px;
}
.wa-modal .box { margin-top: 0; max-height: 100%; }
.wa-modal .box.wide { max-width: 660px; }
.wa-modal .box h3 { display: flex; align-items: center; gap: 8px; }

/* 通用输入浮层 */
#prFields .f1 + .f1, #prFields .f2 + .f1, #prFields .f1 + .f2 { margin-top: 10px; }
#prFields textarea { min-height: 92px; }
.pr-hint { font-size: 12.2px; color: var(--wa-sub); margin: 6px 0 0; }

/* 三列 / 一行多列表单 */
.f3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 720px) { .f3 { grid-template-columns: 1fr; } }

/* 负责人多选（询盘档案） */
.owner-pick { display: flex; flex-wrap: wrap; gap: 6px; max-height: 132px; overflow: auto;
  border: 1px solid var(--wa-line); border-radius: var(--r-md); padding: 8px; background: #FCFDFD; }
.owner-pick label {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12.6px; cursor: pointer;
  border: 1px solid var(--wa-line); background: #fff; border-radius: 999px; padding: 4px 10px;
}
.owner-pick label:hover { border-color: rgba(0, 168, 132, .45); }
.owner-pick label.on { background: #E7F5F0; border-color: #9FD6C4; color: #04604E; font-weight: 600; }
.owner-pick label input { margin: 0; }
.owner-pick .op-empty { color: var(--wa-sub); font-size: 12.5px; padding: 4px; }

/* ---- ② 询盘档案: 列表项新增来源/状态标记 ---- */
.inq-src { font-size: 11.5px; font-weight: 700; color: #3A3F8F; background: #EEF0FF;
  border: 1px solid #D5DAFF; border-radius: 999px; padding: 1px 7px; }
.inq-src.main { color: #61656E; background: #F1F2F4; border-color: #E2E4E8; }
.inq-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.inq-tools select { max-width: 140px; }

/* ---- ③ WhatsApp 化 ---- */
/* 聊天壁纸（极淡圆点纹, 不影响正文对比度） */
.wa-msgs {
  background-color: var(--wa-chat);
  background-image:
    radial-gradient(rgba(11, 20, 26, .045) 1px, transparent 1.4px),
    radial-gradient(rgba(11, 20, 26, .03) 1px, transparent 1.4px);
  background-position: 0 0, 9px 9px;
  background-size: 18px 18px, 18px 18px;
}
/* 加密提示条 */
.wa-e2e { flex: 0 0 auto; display: flex; justify-content: center; padding: 7px 12px 0; background: var(--wa-chat); }
.wa-e2e span {
  background: #FDF3D3; color: #6B5A2E; font-size: 11.4px; line-height: 1.5;
  padding: 5px 11px; border-radius: 8px; text-align: center; max-width: 92%;
}

/* 头部：更像 WhatsApp（绿色？不 —— 保持浅灰头部 + 圆形工具按钮） */
.wa-chead { padding: 8px 10px; gap: 9px; }
.wa-chead .g-av { width: 40px; height: 40px; font-size: 18px; }
.wa-chead .g-act { gap: 2px; }
.wa-chead .g-act button {
  width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border-radius: 50%; font-size: 15px;
}
.wa-chead .g-act button:not([disabled]):hover { background: rgba(11, 20, 26, .08); }

/* 气泡：尾巴 + 时间/双勾 */
.wa-bub { border-radius: 8px; padding: 6px 9px 5px; }
.wa-line:not(.out) .wa-bub { border-bottom-left-radius: 0; }
.wa-line.out .wa-bub { border-bottom-right-radius: 0; }
.wa-bub::after {
  content: ''; position: absolute; bottom: 0; width: 10px; height: 10px; background: inherit;
}
.wa-line:not(.out) .wa-bub::after { left: -5px; border-bottom-left-radius: 13px; }
.wa-line.out .wa-bub::after { right: -5px; border-bottom-right-radius: 13px; }
.wa-bub .mt { font-size: 10.8px; margin-top: 4px; padding-left: 6px; }
.wa-bub .mt .tick { color: var(--wa-tick); font-size: 11.5px; }
.wa-line.out .wa-bub .mt { justify-content: flex-end; }
.wa-bub .who { font-size: 12.2px; }

/* 输入条：常用短语 + 内嵌转述键 + 圆形发送（空文本时显示麦克风） */
.wa-input { padding: 8px 10px; gap: 6px; }
.wa-input .fxbtn {
  border: 0; background: none; color: var(--wa-sub); font-size: 21px; line-height: 1;
  width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto;
}
.wa-input .fxbtn:hover { background: rgba(11, 20, 26, .07); }
.wa-input .in-wrap { border-radius: 22px; padding: 3px 4px 3px 14px; }
.wa-input textarea { min-height: 36px; }
.wa-input .inbtn {
  border: 0; background: none; color: var(--wa-sub); font-size: 16px; line-height: 1;
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto; align-self: flex-end;
}
.wa-input .inbtn:hover { background: rgba(11, 20, 26, .07); color: var(--wa-teal); }
.wa-input .send { width: 42px; height: 42px; font-size: 17px; }
.wa-input .send.mic { background: #00A884; }

/* 常用短语浮层（😊 按钮） */
.phrase-pop {
  position: fixed; z-index: 90; background: #fff; border: 1px solid var(--wa-line);
  border-radius: 12px; box-shadow: var(--sh-2); padding: 6px; max-height: 46vh; overflow: auto;
  width: min(330px, calc(100vw - 28px));
}
.phrase-pop button {
  display: block; width: 100%; text-align: left; border: 0; background: none;
  padding: 8px 10px; border-radius: 8px; font-size: 13px; color: var(--wa-ink); line-height: 1.5;
}
.phrase-pop button:hover { background: var(--wa-soft); }

/* 待业务员回答的问题条 */
.wa-qbar { flex: 0 0 auto; background: #FFF7E2; border-bottom: 1px solid #F0DDB0; padding: 7px 12px; }
.wa-qbar .qline { display: flex; align-items: center; gap: 8px; font-size: 12.4px; color: #6B4E00; }
.wa-qbar .qline + .qline { margin-top: 5px; }
.wa-qbar b { flex: 0 0 auto; }
.wa-qbar .qtext { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-qbar button { flex: 0 0 auto; }

/* 可提问题清单 */
.wa-sug { flex: 0 0 auto; background: #F6FAF8; border-top: 1px solid var(--wa-line); }
.wa-sug .sug-t {
  display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: none;
  padding: 7px 12px; font-size: 12.4px; color: #04604E; font-weight: 700; text-align: left;
}
.wa-sug .sug-t em { margin-left: auto; font-style: normal; color: var(--wa-sub); font-weight: 600; }
.wa-sug .sug-t:hover { background: rgba(0, 168, 132, .07); }
.wa-sug .sug-list { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 10px; max-height: 118px; overflow: auto; }
.wa-sug.fold .sug-list { display: none; }
.wa-sug .sugq {
  border: 1px solid #CBE8DD; background: #fff; color: #04604E; border-radius: 999px;
  padding: 5px 11px; font-size: 12.3px; max-width: 100%; text-align: left; line-height: 1.4;
}
.wa-sug .sugq:hover { background: #E7F5F0; border-color: #9FD6C4; }
.wa-sug .sugq i { font-style: normal; margin-right: 4px; }
.wa-sug .sugq.related { border-color: #9FD6C4; background: #EFF8F5; font-weight: 600; }

/* 窄屏：浮层贴顶栏下方 + 紧凑 */
@media (max-width: 720px) {
  .wa-modal { padding: 14px 12px; }
  .wa-modal .box { padding: 16px 15px; }
  .wa-sug .sug-list { max-height: 96px; }
}
/* =============================================================================
   v1.60.0 · 浮层让开整条「上栏区」（应用顶栏 + 左窗页签栏）
   ⛔ 一律追加到文件末尾, 不截断任何既有段
   ---------------------------------------------------------------------------
   用户反馈「点 Agent 知识库弹窗挡住上栏」。用 elementFromPoint 逐点体检后确认：
     · 应用顶栏 .wa-top 在 v1.59 已不再被遮（65 个状态 × 5 种视口全绿）
     · 但浮层从顶栏下沿（56px）就开始 → **压住了左窗页签栏 .wk-tabs**（29px）
   于是把浮层上边界下移到「顶栏 + 页签栏」之下，两条栏在任何浮层状态下都完整可见。
   --iq-top 由 syncModalTop() 实测写入；下面给的是「JS 未执行」时的兜底值，
   兜底值本身就落在两条栏之下（56 + 41），所以即使脚本没跑也不会遮上栏。
   ========================================================================== */
:root {
  --iq-top-bar: 56px;      /* 应用顶栏高度（实测覆盖） */
  --iq-sub-bar: 41px;      /* 左窗页签栏高度（实测覆盖；兜底 41px） */
  --iq-top: calc(var(--iq-top-bar) + var(--iq-sub-bar));
}
/* min(..., 60vh) 兜住「屏幕特别矮」的情况，避免浮层可用高度为负 */
.wa-modal { top: min(var(--iq-top), 60vh); }
/* 上边界下移后收紧内边距，把省下的空间还给内容 */
.wa-modal { padding: 18px 20px 20px; }
@media (max-width: 720px) {
  .wa-modal { padding: 12px 12px 14px; }
  .wa-modal .box { padding: 15px 15px; }
}
/* 常用短语浮层：向上弹出时不许越过聊天窗标题（手机上会顶到刘海/状态栏） */
.phrase-pop { overflow: auto; }
/* =============================================================================
   v1.62.0 · 左侧树工作栏（平时收起, 鼠标靠过去才展开）
   ⛔ 一律追加到文件末尾, 不截断任何既有段
   ---------------------------------------------------------------------------
   六个栏目（业务询盘 / 需求工作单 / 业务订单 / Agent 知识库 / 物流溯源 / 聊天依据）
   从「左窗顶部横排页签」移到「左侧树栏」，并分「业务 / 支撑」两组。

   · ≤980px（窄屏，上下分栏）：**横向常显** —— 窄屏多为触屏，没有悬停能力，
     收起就等于功能不可达，所以这里的「隐藏」只对桌面生效。
   · ≥981px 且有精确指针：**竖向 + 收起 15px**（只露当前页图标 + 待办红点），
     鼠标靠过去 / 键盘聚焦 / 点 📌 钉住 → 展开 192px。左边缘固定、向右扩展，
     所以鼠标不会因为展开而被"甩出"热区（不抖动）。
   · ≥981px 但触屏（hover:none）：竖向常显展开。

   ② 上栏只剩「应用顶栏」一条 → 浮层不再需要叠加页签栏高度（iq.js 同步改）。
   ========================================================================== */

/* ---------- 基础：横向常显（窄屏 / 触屏 / ≤980px） ---------- */
.wk-rail { flex: 0 0 auto; position: relative; background: #FBFCFC; border-bottom: 1px solid var(--wa-line); }
.wk-rail-hot { display: none; }                          /* 常显形态不需要「收起态提示」 */
.wk-rail-in { display: flex; align-items: center; overflow-x: auto; padding: 8px 10px 0; }
.wk-rail-head, .wk-grp { display: none; }                /* 横向形态下标题与分组标题多余 */
.wk-rail-list { display: flex; align-items: center; gap: 2px; }
.wk-rail-list button {
  border: 0; background: none; color: var(--wa-sub); font: inherit; font-size: 13px; font-weight: 600;
  padding: 9px 12px; border-bottom: 3px solid transparent; border-radius: 6px 6px 0 0;
  white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
}
.wk-rail-list button:hover { color: var(--wa-teal); background: rgba(0, 168, 132, .07); }
.wk-rail-list button.on { color: var(--wa-teal); border-bottom-color: var(--wa-teal); }
.wk-rail-list button .badge {
  display: inline-block; min-width: 17px; padding: 0 5px; border-radius: 999px;
  background: var(--wa-warn); color: #fff; font-size: 11px; font-weight: 700;
}
.wk-ico { font-size: 15px; line-height: 1; }

/* ---------- ≥981px：竖向几何（鼠标与触屏共用） ---------- */
@media (min-width: 981px) {
  .wk-rail {
    flex-direction: column; border-bottom: 0; border-right: 1px solid var(--wa-line);
    overflow: hidden; z-index: 30;
    transition: flex-basis .19s cubic-bezier(.2, .8, .2, 1), width .19s cubic-bezier(.2, .8, .2, 1), box-shadow .19s;
  }
  .wk-rail-in {
    position: relative; z-index: 1; flex-direction: column; align-items: stretch; gap: 3px;
    width: 192px; min-width: 192px; padding: 10px 9px 16px; overflow-x: hidden; overflow-y: auto;
  }
  .wk-rail-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 2px 4px 8px; margin-bottom: 3px; border-bottom: 1px solid var(--wa-line);
  }
  .wk-rail-ttl { font-size: 12px; font-weight: 700; color: var(--wa-sub); letter-spacing: .4px; }
  .wk-pin {
    border: 0; background: none; cursor: pointer; font-size: 13px; line-height: 1;
    padding: 4px 6px; border-radius: 7px; opacity: .4;
  }
  .wk-pin:hover { background: var(--wa-soft); opacity: 1; }
  .wk-rail[data-pin="1"] .wk-pin { opacity: 1; background: rgba(0, 168, 132, .13); }
  .wk-grp { display: block; font-size: 11px; font-weight: 700; color: #95A29D; padding: 9px 7px 3px; letter-spacing: .3px; }
  .wk-rail-list { flex-direction: column; align-items: stretch; gap: 2px; }
  .wk-rail-list button {
    border-bottom: 0; border-radius: 8px; padding: 9px 10px;
    justify-content: flex-start; position: relative; overflow: hidden;
  }
  .wk-rail-list button.on { background: rgba(0, 168, 132, .10); }
  .wk-rail-list button.on::before {
    content: ''; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px;
    border-radius: 0 3px 3px 0; background: var(--wa-teal);
  }
  .wk-rail-list button .badge { margin-left: auto; }
  .wk-ico { flex: 0 0 18px; text-align: center; }
  .wk-txt { flex: 1 1 auto; white-space: nowrap; }

  /* ---------- v1.76: 手动收起（📌）—— 鼠标与触屏都要能用 ----------
     ⛔ 这条规则**必须**放在 min-width 通用块里，不能只写在 (hover:hover) 块里：
        headless / 触屏环境不匹配 hover:hover，规则会整体失效，
        表现为「点了 📌 宽度纹丝不动」（这是真机验证第一次跑就撞上的坑）。
     收起后显示竖排提示条（当前栏目图标 + 待办红点），点提示条或再点 📌 展开。 */
  .wk-rail[data-fold="1"] { flex: 0 0 15px; width: 15px; overflow: hidden; }
  .wk-rail[data-fold="1"]:has(:focus-visible) { flex-basis: 192px; width: 192px; }
  .wk-rail[data-fold="1"] .wk-rail-hot {
    display: flex; flex-direction: column; align-items: center; gap: 7px;
    position: absolute; top: 0; left: 0; width: 15px; padding-top: 13px;
    /* ⛔ 必须高于 .wk-rail-in（它 z-index:1）—— 否则收起态下提示条被工具条盖住，
       点它展开会点不动（而收起态唯一的展开入口就是它）。 */
    z-index: 2;
  }
  .wk-rail-now { font-size: 13px; line-height: 1; opacity: .75; }
  .wk-rail-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--wa-warn); }
}

/* ---------- ≥981px + 精确指针：v1.76 起**常显**（取消「鼠标靠过去才展开」） ----------
   原设计收成 15px、悬停展开。但值班业务要在同一屏里同时看「工作栏 / 手机窗口 / 双席位」，
   入口忽隐忽现反而让人找不到栏目 —— 故改为常显 192px；📌 变成「手动收起」开关，
   窄窗口下用户仍可主动腾出宽度（收起态保留提示条，点一下展开）。
   ⛔ 展开条件仍用 :has(:focus-visible) 而非 :focus-within —— 鼠标点页签也会让按钮获焦，
      用 :focus-within 会出现「点完移开鼠标也不收起」。 */
@media (min-width: 981px) and (hover: hover) and (pointer: fine) {
  .wk-rail { flex: 0 0 192px; width: 192px; }
  .wk-rail[data-fold="1"] { flex: 0 0 15px; width: 15px; }
  /* ⛔ 刻意**不用** :hover 临时展开：点 📌 收起后鼠标仍停在栏上，
     若 hover 又把它展开，用户看到的就是「点了没反应」（真机验证实测到的）。
     展开入口 = 点左侧提示条，或再点一次 📌；键盘用户仍可用 :focus-visible。 */
  .wk-rail[data-fold="1"]:has(:focus-visible) {
    flex-basis: 192px; width: 192px; box-shadow: 6px 0 18px -12px rgba(16, 24, 40, .35);
  }
  .wk-rail[data-fold="1"] .wk-rail-hot {
    display: flex; flex-direction: column; align-items: center; gap: 7px;
    position: absolute; top: 0; left: 0; width: 15px; padding-top: 13px;
    /* ⛔ 必须高于 .wk-rail-in（它 z-index:1）—— 否则收起态下提示条被工具条盖住，
       点它展开会点不动（而收起态唯一的展开入口就是它）。 */
    z-index: 2;
  }
  .wk-rail:not([data-fold="1"]) .wk-rail-hot { display: none; }
  .wk-rail[data-fold="1"]:has(:focus-visible) .wk-rail-hot { opacity: 0; pointer-events: none; }
  .wk-rail-now { font-size: 13px; line-height: 1; opacity: .75; }
  .wk-rail-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--wa-warn); }
}
/* ---------- ≥981px + 触屏：竖向常显（无悬停能力不能收起） ---------- */
@media (min-width: 981px) and (hover: none) {
  .wk-rail { flex: 0 0 192px; width: 192px; overflow: visible; }
  .wk-rail-hot { display: none; }
}

/* ---------- ≤980px：六栏改两行网格 ----------
   ⛔ 原来 6 个中文栏目单行横排 + overflow-x:auto，在 390px 宽的手机上
   后 3 个会被裁到看不见、必须横向滚动才能点到（实测 elementFromPoint 只命中前 3 个）。
   改 flex-wrap 两行网格，6 个栏目全部可见可点。 */
@media (max-width: 980px) {
  .wk-rail-in { flex-wrap: wrap; padding: 8px 8px 7px; overflow-x: visible; }
  .wk-rail-list { flex-wrap: wrap; gap: 5px; width: 100%; align-items: flex-start; }
  .wk-rail-list button {
    padding: 7px 10px; border-bottom: 0; border-radius: 8px;
    background: #F0F3F2; font-size: 12.5px; row-gap: 0;
  }
  .wk-rail-list button:hover { background: rgba(0, 168, 132, .10); }
  .wk-rail-list button.on { background: rgba(0, 168, 132, .15); }
  .wk-rail-list button .badge { margin-left: 1px; }
  .wk-grp { display: block; width: 100%; font-size: 10.5px; font-weight: 700; color: #95A29D; padding: 3px 2px 0; }
  .wk-ico { font-size: 14px; }
  .wk-txt { font-size: 12.5px; }
}
/* =============================================================================
   v1.62.0 · 资金单证（收款账户 / 付款登记+水单 / 应付款清单 / 合同签回）+ 知识库导出导入
   ⛔ 一律追加到文件末尾, 不截断任何既有段
   ---------------------------------------------------------------------------
   对应真实业务流：合同发出 → 条款核对 → 签章回传 → 给多个收款账户（按金额分账）
                → 分批打款 → 发水单 → 逐笔核销 → 应付款清单对账
   ========================================================================== */

/* ---------- KPI 概览条 ---------- */
.fin-kpi { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.fin-kpi .k {
  flex: 1 1 132px; min-width: 118px; background: var(--wa-soft); border: 1px solid var(--wa-line);
  border-radius: 10px; padding: 9px 11px;
}
.fin-kpi .k b { display: block; font-size: 15px; line-height: 1.35; color: var(--wa-ink); font-variant-numeric: tabular-nums; }
.fin-kpi .k span { font-size: 11.5px; color: var(--wa-sub); }
.fin-kpi .k.warn b { color: #C0392B; }
.fin-kpi .k.ok b { color: #008069; }
.fin-kpi .k.amber b { color: #B4690E; }

/* ---------- 资金明细条目 ---------- */
.fin-it { display: flex; align-items: flex-start; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--wa-line); }
.fin-it:last-child { border-bottom: 0; }
.fin-it .fi-ic { flex: 0 0 30px; height: 30px; border-radius: 9px; background: var(--wa-soft); display: flex; align-items: center; justify-content: center; font-size: 15px; }
.fin-it .fi-bd { flex: 1 1 auto; min-width: 0; }
.fin-it .fi-bd b { font-size: 13.5px; font-weight: 700; color: var(--wa-ink); }
.fin-it .fi-bd .amt { font-variant-numeric: tabular-nums; font-weight: 700; }
.fin-it .fi-bd .meta { font-size: 11.5px; color: var(--wa-sub); margin-top: 2px; word-break: break-all; }
.fin-it .fi-act { flex: 0 0 auto; display: flex; gap: 6px; align-items: center; }
.fin-it .fi-act .btn.sm { padding: 4px 9px; font-size: 11.5px; }

/* 状态胶囊 */
.pay-st { display: inline-block; border-radius: 999px; padding: 1px 9px; font-size: 11px; font-weight: 700; }
.pay-st.pending { background: #FFF4E5; color: #B4690E; border: 1px solid rgba(180, 105, 14, .22); }
.pay-st.verified { background: #E7F7F0; color: #008069; border: 1px solid rgba(0, 128, 105, .22); }
.pay-st.disputed { background: #FDECEA; color: #C0392B; border: 1px solid rgba(192, 57, 43, .22); }
.pay-st.open { background: #EEF1F6; color: #4A5568; border: 1px solid rgba(74, 85, 104, .18); }
.pay-st.paid { background: #E7F7F0; color: #008069; border: 1px solid rgba(0, 128, 105, .22); }

/* ---------- 资金类消息气泡（与普通聊天区分） ---------- */
.wa-bub.fin { box-shadow: inset 0 0 0 1.5px rgba(0, 128, 105, .22); }
.wa-bub .fin-tag {
  display: inline-block; margin-bottom: 4px; border-radius: 6px; padding: 1px 7px;
  background: rgba(0, 128, 105, .12); color: #00695F; font-size: 10.5px; font-weight: 700; letter-spacing: .2px;
}

/* ---------- 知识库导出 / 导入 ---------- */
#kbIoBox { margin-top: 10px; }
#kbIoBox textarea {
  width: 100%; border: 1px solid var(--wa-line); border-radius: 10px; padding: 10px 12px;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; font-size: 12px;
  line-height: 1.55; color: var(--wa-ink); background: #FCFDFD; resize: vertical;
}
#kbIoBox textarea:focus { outline: none; border-color: var(--wa-teal); box-shadow: 0 0 0 3px rgba(0, 168, 132, .12); }

/* ---------- 窄屏: KPI 两列 ---------- */
@media (max-width: 720px) {
  .fin-kpi .k { flex: 1 1 46%; min-width: 0; }
  .fin-it { flex-wrap: wrap; }
  .fin-it .fi-act { width: 100%; justify-content: flex-end; }
}
/* =============================================================================
   v1.62.0 修正 · 浮层遮罩不再盖住左侧树工作栏
   ---------------------------------------------------------------------------
   浮层遮罩是 position:fixed; inset(顶栏以下) → 横向铺满视口, 连左侧树栏一起盖住,
   于是「打开浮层后鼠标靠过去也展不开工作栏」= 开着浮层就没法切栏目。
   把树栏的层级提到遮罩(80)之上, 让它始终可见、可悬停、可点击。
   ⛔ 这是把页签从「顶部横排」搬到「左侧竖向」后**才会出现**的问题:
      横排时它在顶栏之内(浮层已让开顶栏), 竖向时它就落在遮罩覆盖区里。
   ========================================================================== */
.wk-rail { z-index: 85; }

/* =============================================================================
   v1.63.0 Uwhats 开放接口对接
   ---------------------------------------------------------------------------
   两处界面：① 管理员配置页（左侧栏「Uwhats 对接」）② 询盘问答板上方的接入选情条。
   设计约束：
     · 一次性登录链接「用一次即废」→ 链接行必须醒目, 且旁边就是「换新链接」;
     · 密钥永不回显 → 输入框只显示 placeholder 提示已保存的掩码;
     · 沿用 WhatsApp 令牌(--wa-*), 不引入新色相, 与既有面板同一家族。
   ========================================================================== */
.uw-flow {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 10px 0 2px; font-size: 12px; color: var(--wa-sub);
}
.uw-flow span {
  background: var(--wa-soft); border: 1px solid var(--wa-line);
  border-radius: 999px; padding: 3px 10px; white-space: nowrap;
}
.uw-flow i { font-style: normal; color: #9AA6AE; }

.uw-kv { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 6px; }
.uw-kv span {
  font-size: 12px; color: var(--wa-sub); background: var(--wa-soft);
  border: 1px solid var(--wa-line); border-radius: 8px; padding: 2px 8px;
}
.uw-switches { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; }
.uw-switches label { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--wa-ink); cursor: pointer; }
.uw-switches input { width: 15px; height: 15px; accent-color: var(--wa-green); }

/* 询盘问答板上方的接入条 */
.uw-box {
  border: 1px solid var(--wa-line); border-radius: var(--r-md);
  background: var(--wa-soft); padding: 10px 12px; margin: 4px 0 10px;
}
.uw-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.uw-tag {
  font-size: 12px; font-weight: 600; border-radius: 999px; padding: 2px 10px; white-space: nowrap;
}
.uw-tag.on { background: #E3F6EF; color: #0B6B4F; border: 1px solid #B7E3D2; }
.uw-tag.off { background: #F0F2F5; color: var(--wa-sub); border: 1px solid var(--wa-line); }
.uw-note { font-size: 12px; color: var(--wa-sub); }
.uw-link-line { display: flex; gap: 8px; margin-top: 9px; flex-wrap: wrap; }
.uw-link-line input {
  flex: 1; min-width: 200px; font-size: 12px; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  padding: 7px 9px; border: 1px solid var(--wa-line); border-radius: 8px; background: var(--wa-panel); color: var(--wa-ink);
}
.uw-link-line input:read-only { color: var(--wa-sub); }
.uw-box .hint { margin: 8px 0 0; }

/* v1.64 · 客户固定入口：两条链接要**一眼能分清**谁给客户长期用、谁只能当场发一次 */
.uw-line { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.uw-line label {
  display: flex; flex-direction: column; gap: 1px; min-width: 128px;
  font-size: 12px; font-weight: 600; color: var(--wa-ink);
}
.uw-line .uw-mut { font-weight: 400; font-size: 11px; color: var(--wa-sub); }
.uw-line input {
  flex: 1; min-width: 200px; font-size: 12px; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  padding: 7px 9px; border: 1px solid var(--wa-line); border-radius: 8px; background: var(--wa-panel); color: var(--wa-sub);
}
.uw-act { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* ==================== v1.65 数据同步 / 工作组口令 / 通话 ==================== */
.sy-chk { display: flex; align-items: center; gap: 7px; padding: 7px 2px; font-size: 13px; cursor: pointer; }
.sy-chk input { width: 16px; height: 16px; accent-color: var(--wa-green, #008069); }
.sy-secret {
  margin-top: 10px; padding: 10px 12px; border: 1px dashed var(--wa-green, #008069);
  border-radius: 10px; background: rgba(0, 128, 105, .06);
}
.sy-secret-t { font-size: 12px; color: var(--wa-sub); margin-bottom: 6px; }
.sy-secret code {
  display: block; word-break: break-all; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 12.5px; color: var(--wa-ink); background: var(--wa-panel); border-radius: 6px;
  padding: 7px 9px; border: 1px solid var(--wa-line); margin-bottom: 8px;
}

/* ==================== v1.67 询盘档案「贸易背景要素」（与主工作台同一批字段） ====================
   对比度自检: --wa-ink #111B21 on #FFF = 18:1 · --wa-sub #54656F on #F0F2F5 = 5.2:1 · 边框 #E3E8EB 仅装饰 */
/* 编辑弹层里的折叠区：折起来也要让人知道里面填了多少项 */
.if-trade {
  margin: 4px 0 10px; padding: 8px 10px; border: 1px solid var(--wa-line);
  border-radius: 10px; background: var(--wa-soft);
}
.if-trade > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--wa-ink); }
.if-trade > summary .muted { font-weight: 400; font-size: 12px; color: var(--wa-sub); }
.if-trade[open] > summary { margin-bottom: 8px; }
.if-trade label { display: block; margin-bottom: 4px; font-size: 12px; color: var(--wa-sub); }
.if-trade .hint { margin: 8px 0 0; }

/* .sp 原先只在 .wa-top/.it-top 等父级下定义, 卡片标题里也要用得着 */
.card h3 .sp { flex: 1; }

/* 档案要素只读概览：成对「标签 / 值」，值可选中复制（报价、HS 编码常要粘到别处） */
.inq-trade-view {
  margin-bottom: 10px; padding: 9px 11px; border: 1px solid var(--wa-line);
  border-radius: 10px; background: var(--wa-panel);
}
.itv-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--wa-ink); }
.itv-head b { font-size: 13.5px; }
.itv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 6px 12px; margin-top: 8px; }
.itv {
  display: flex; justify-content: space-between; gap: 8px;
  padding-bottom: 3px; border-bottom: 1px dashed var(--wa-line);
}
.itv span { font-size: 12px; color: var(--wa-sub); }
.itv b {
  font-size: 12.5px; font-weight: 600; color: var(--wa-ink); text-align: right;
  word-break: break-all; user-select: all;
}

/* ==================== v1.70 握手值班台 ==================== */

/* 状态灯：左侧色条 + 文字表达等级（不靠颜色单独传达信息，色盲也能读） */
.duty-light { display: flex; gap: 10px; align-items: stretch; margin-top: 4px; }
.duty-lamp { width: 5px; flex: 0 0 5px; border-radius: 3px; background: var(--wa-sub); }
.duty-lamp.lv-ok { background: var(--wa-teal); }
.duty-lamp.lv-info { background: #7A8CA0; }
.duty-lamp.lv-warn { background: #B26A00; }
.duty-lamp.lv-critical { background: var(--wa-warn); }
.duty-lamp.lv-skip { background: #B9C2C9; }
.duty-vd { min-width: 0; flex: 1; }
.duty-vd b { display: block; font-size: 14px; color: var(--wa-ink); }
.duty-act { color: #8A4B00; margin-top: 3px; }

.duty-item {
  border: 1px solid var(--wa-line); border-left-width: 4px; border-radius: 10px;
  padding: 9px 11px; margin-bottom: 8px; background: var(--wa-panel);
}
.duty-item.lv-ok { border-left-color: var(--wa-teal); }
.duty-item.lv-info { border-left-color: #7A8CA0; }
.duty-item.lv-warn { border-left-color: #B26A00; background: #FFFCF6; }
.duty-item.lv-critical { border-left-color: var(--wa-warn); background: var(--wa-warn-bg); }
.duty-item.lv-skip { border-left-color: #B9C2C9; background: var(--wa-soft); }
.di-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
.di-top b { font-size: 13.5px; color: var(--wa-ink); }
.di-chip {
  font-size: 11px; padding: 2px 7px; border-radius: 999px; white-space: nowrap;
  background: var(--wa-soft); color: var(--wa-sub); border: 1px solid var(--wa-line);
}
.di-chip.lv-ok { background: #E4F6EF; color: #00604E; border-color: #B7E4D5; }
.di-chip.lv-info { background: #EEF1F4; color: #46596B; border-color: #D8DFE5; }
.di-chip.lv-warn { background: #FFF1DC; color: #8A4B00; border-color: #F2D6A8; }
.di-chip.lv-critical { background: #FCE3E0; color: #93241A; border-color: #F1C0BA; }
.di-chip.lv-skip { background: #F0F2F5; color: #5C6B78; border-color: #DDE2E7; }
.duty-act-line { color: #8A4B00; }
.duty-hint { color: var(--wa-sub); }

.duty-hs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 6px 14px;
  margin: 10px 0 6px; padding: 9px 11px; border: 1px dashed var(--wa-line); border-radius: 10px; background: var(--wa-soft);
}
.duty-hs > div { display: flex; gap: 8px; align-items: baseline; }
.duty-hs span { color: var(--wa-sub); font-size: 12px; flex: 0 0 auto; }
.duty-hs b { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12.5px; color: var(--wa-ink); user-select: all; word-break: break-all; }
.duty-cmd-t { font-size: 12.5px; color: var(--wa-sub); margin-top: 8px; }
.duty-cmd {
  margin: 6px 0 0; padding: 10px 11px; background: #0F1A1F; color: #D7E3E8;
  border-radius: 10px; font-size: 11.5px; line-height: 1.6; white-space: pre-wrap; word-break: break-all;
  max-height: 220px; overflow: auto; user-select: all;
}
.duty-notes-t { font-size: 12.5px; font-weight: 600; color: var(--wa-ink); margin: 10px 0 4px; }
.duty-note { color: var(--wa-sub); }
.duty-log-t { font-size: 12.5px; font-weight: 600; color: var(--wa-ink); margin: 12px 0 6px; display: flex; gap: 8px; align-items: baseline; }
.duty-log-i { border-left: 3px solid var(--wa-line); }
.duty-log-i .di-chip { flex: 0 0 auto; }
/* ==================== v1.71 客户账号 / 保存同步回执 / 询盘资料·往来截图 ==================== */

/* --- 弹层里的「给客户开通账号」区块 --- */
.if-acc { margin-top: 12px; padding: 10px 11px; border: 1px solid var(--wa-line); border-radius: 10px; background: var(--wa-soft); }
.if-acc:empty { display: none; }
.acc-head { font-size: 13px; font-weight: 700; color: var(--wa-ink); margin-bottom: 8px; }
.acc-info { font-size: 12.5px; line-height: 1.9; color: var(--wa-ink); }
.acc-info b { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }
.acc-ok { color: var(--wa-teal); font-weight: 600; }
.acc-bad { color: var(--wa-warn); font-weight: 600; }
.acc-warn { color: #8A6100; font-weight: 600; }
.acc-send { display: flex; align-items: center; gap: 7px; font-weight: 400; margin: 8px 0; font-size: 12.5px; color: var(--wa-ink); }
.acc-send input { width: 15px; height: 15px; }
.acc-sync-box { margin-top: 4px; }
.acc-sync { margin-top: 8px; padding: 8px 10px; border: 1px dashed var(--wa-line); border-radius: 8px; background: var(--wa-panel); }
.acc-sync.bad { border-color: rgba(192, 57, 43, .4); }
.acc-sync .as-t { font-size: 12px; font-weight: 600; color: var(--wa-sub); margin-bottom: 6px; }
.acc-cred { margin-top: 7px; font-size: 12px; color: var(--wa-ink); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.acc-cred code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; background: var(--wa-soft); padding: 2px 6px; border-radius: 6px; word-break: break-all; user-select: all; }

/* --- 三件事的回执行（身份 / 心跳 / 握手），弹层与回执条共用 --- */
.sync-rows { display: flex; flex-direction: column; gap: 4px; }
.sync-row { display: flex; gap: 8px; align-items: baseline; padding: 4px 8px; border-radius: 7px; font-size: 12.5px; }
.sync-row .sr-k { flex: 0 0 84px; color: var(--wa-sub); }
.sync-row .sr-v { color: var(--wa-ink); word-break: break-word; }
.sync-row.ok { background: rgba(0, 128, 105, .07); }
.sync-row.ok .sr-v { color: #005E4E; }
.sync-row.wait { background: rgba(138, 97, 0, .09); }
.sync-row.wait .sr-v { color: #8A6100; }
.sync-row.bad { background: rgba(192, 57, 43, .07); }
.sync-row.bad .sr-v { color: var(--wa-warn); }
.sync-row.skip { background: rgba(84, 101, 111, .07); }
.sync-row.skip .sr-v { color: var(--wa-sub); }

/* --- 「保存资料」的同步回执条（列表上方） --- */
.inq-sync-bar { border-left: 3px solid var(--wa-teal); }
.inq-sync-bar .syb-head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--wa-ink); margin-bottom: 7px; }
.inq-sync-bar .syb-head .sp { flex: 1; }

/* --- 询盘资料 · 往来截图（问答板卡片内） --- */
.inq-ev-box { margin-bottom: 10px; padding: 9px 11px; border: 1px solid var(--wa-line); border-radius: 10px; background: var(--wa-panel); }
.ev-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; font-weight: 600; color: var(--wa-ink); margin-bottom: 8px; }
.ev-head .muted { font-weight: 400; }
.ev-head .sp { flex: 1; }
.ev-head input[type=text] { flex: 1 1 200px; min-width: 160px; padding: 5px 8px; border: 1px solid var(--wa-line); border-radius: 7px; font-size: 12.5px; color: var(--wa-ink); }
.ev-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; }
.ev-i { border: 1px solid var(--wa-line); border-radius: 9px; overflow: hidden; background: var(--wa-panel); display: flex; flex-direction: column; }
.ev-i img { width: 100%; height: 96px; object-fit: cover; display: block; background: var(--wa-soft); cursor: zoom-in; }
.ev-doc { height: 96px; display: grid; place-items: center; background: var(--wa-soft); color: var(--wa-sub); font-size: 12px; font-weight: 600; }
.ev-n { padding: 5px 7px 2px; font-size: 12px; color: var(--wa-ink); word-break: break-word; }
.ev-a { display: flex; align-items: center; gap: 5px; padding: 4px 6px 6px; }
.ev-a .sm { margin-right: auto; }

/* ==================== v1.72 官网 AI 咨询 + 产品库 ==================== */
.ai-draft { margin: 4px 0 10px; padding: 9px 11px; border: 1px solid var(--wa-line); border-radius: 10px; background: var(--wa-panel); }
.ai-draft .itv-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--wa-ink); margin-bottom: 6px; }
/* AI 会话里的「来源」标注：让业务一眼看出这句是产品库答的、还是问答库答的 */
#wkAi .inq-note .who-line { color: var(--wa-sub); }

/* =============================================================================
   v1.73.0 · iPhone 18 Pro Max 手机窗 + 微信界面
   ---------------------------------------------------------------------------
   ① 机身：按实机参数 —— 屏幕 2868×1320(6.9") · 机身 78×163.4mm · 灵动岛更小 ·
      铝金属一体中框 · 侧键(Action Button/音量/电源/相机控制) · Home 指示条。
   ② 界面：微信会话 —— 自己发 #95EC69 / 对方白底 / 圆角方形头像 / 聊天底 #EDEDED /
      气泡尖角在**第一行**(微信与 WhatsApp 最明显的差别) / 自己发不显示头像。
   ③ 本段**纯追加**：不动任何既有段。对 .wa-* 的调整一律用 `.phone.ip18` 前缀
      (特异性更高)，既覆盖到位，也不会影响未套手机壳的旧渲染路径。
   ========================================================================== */
:root {
  --ip-w: 372px;                 /* 机身宽(不含侧键) */
  --ip-frame: 10px;              /* 中框厚度 */
  --ip-radius: 48px;             /* 外机圆角 ≈ 机宽 12%(实机 78mm → 约 9.4mm) */
  --ip-screen-radius: 38px;
  --ip-island-w: 96px;           /* 灵动岛 —— 比上代小，纯胶囊 */
  --ip-island-h: 27px;
  --wx-green: #95EC69;           /* 微信「自己发」气泡 */
  --wx-green-btn: #07C160;       /* 微信发送键 */
  --wx-chat: #EDEDED;            /* 微信聊天底 */
  --wx-nav: #EDEDED;
  --wx-line: #DCDCDC;
  --wx-ink: #191919;
  /* v1.81 补：--wx-soft 被 .wx-cand button:hover 引用却从未定义 ——
     var() 未定义不会报错，只会让整条声明在计算期失效（hover 背景静默无效）。
     （同族问题见技能 §8.4「CSS 变量未定义自检」）*/
  --wx-soft: #F2F2F2;
}

/* ---------- ① 机身 ---------- */
.phone.ip18 {
  position: relative; display: block;
  /* 同时约束宽与高: 屏幕矮的时候按高度反推宽度, 否则 aspect-ratio 与 max-height 打架会把机身压扁 */
  /* v1.76: 加第三个上限 100% —— 机身宽随视口高变化（公式见下），
     容器比机身窄时若不加这一条就会**溢出容器**（1440×900 下实测溢出 19px）。 */
  width: min(var(--ip-w), calc((100vh - 104px) * 0.4774), 100%);
  aspect-ratio: 78 / 163.4;
  height: auto; max-height: calc(100vh - 104px);
  border: 0; padding: 0; overflow: visible;
  border-radius: var(--ip-radius);
  background: linear-gradient(115deg, #6E7278 0%, #C9CDD2 12%, #8A8F96 28%, #E4E7EA 45%, #9BA1A8 62%, #D2D6DA 78%, #70747A 100%);
  box-shadow:
    0 34px 74px -28px rgba(9, 15, 21, .62),
    0 2px 6px rgba(9, 15, 21, .28),
    inset 0 0 0 1px rgba(255, 255, 255, .42);
}
/* 冰川蓝 Glacier（默认型号配色之一） */
.phone.ip18.ip-glacier {
  background: linear-gradient(115deg, #7C8C99 0%, #C6D6E0 12%, #93A6B3 28%, #E6EFF4 45%, #A2B5C1 62%, #D3E0E7 78%, #7B8A96 100%);
}
/* 屏幕层：负责裁剪与圆角 —— 机身本身不裁剪, 否则侧键(在机身外沿)会被切掉 */
.phone.ip18 .ip-screen {
  position: absolute; inset: var(--ip-frame);
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
  border-radius: var(--ip-screen-radius);
  background: var(--wx-chat);
}
/* 侧键：左侧 Action Button + 音量上/下, 右侧 电源 + 相机控制 */
.phone.ip18 .ip-btn {
  position: absolute; z-index: 40; border-radius: 2px;
  background: linear-gradient(180deg, #C3C8CD, #767B82 46%, #A8ADB3);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
}
.phone.ip18 .ip-btn-l { left: -3px; width: 3.5px; }
.phone.ip18 .ip-btn-r { right: -3px; width: 3.5px; }
.phone.ip18 .ip-act { top: 17%;  height: 26px; }     /* Action Button */
.phone.ip18 .ip-vup { top: 25%;  height: 46px; }     /* 音量 + */
.phone.ip18 .ip-vdn { top: 34%;  height: 46px; }     /* 音量 − */
.phone.ip18 .ip-pwr { top: 27%;  height: 62px; }     /* 电源 */
.phone.ip18 .ip-cam { top: 39%;  height: 30px; }     /* 相机控制键 */
/* 灵动岛（更小、纯胶囊；右侧一枚前摄） */
.phone.ip18 .ip-island {
  position: absolute; z-index: 30; top: calc(var(--ip-frame) + 8px); left: 50%; transform: translateX(-50%);
  width: var(--ip-island-w); height: var(--ip-island-h);
  background: #05070A; border-radius: 999px;
  box-shadow: inset 0 0 3px rgba(255, 255, 255, .13);
}
.phone.ip18 .ip-island::after {
  content: ''; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #2A3B4C, #0A0F14 72%);
  box-shadow: inset 0 0 2px rgba(120, 180, 255, .45);
}
/* Home 指示条 */
.phone.ip18 .ip-home {
  position: absolute; z-index: 30; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--ip-frame) + 6px);
  width: 122px; height: 4px; border-radius: 999px; background: rgba(0, 0, 0, .34);
}

/* ---------- iOS 状态栏（时间在左、信号/WiFi/电池在右, 灵动岛浮在中间） ---------- */
.phone.ip18 .phone-bar {
  display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto;
  padding: 11px 24px 3px; background: var(--wx-nav);
  font-size: 12.5px; font-weight: 700; color: var(--wx-ink); letter-spacing: .2px;
}
.phone.ip18 .ph-right { display: inline-flex; align-items: center; gap: 5px; }
.phone.ip18 .ph-sig {
  width: 16px; height: 11px; border-radius: 1px; background:
    linear-gradient(90deg, #191919 0 20%, transparent 20% 27%, #191919 27% 47%, transparent 47% 54%, #191919 54% 74%, transparent 74% 81%, #191919 81% 100%);
}
.phone.ip18 .ph-bat { width: 22px; height: 11.5px; border: 1.5px solid rgba(25, 25, 25, .5); border-radius: 3.5px; position: relative; }
.phone.ip18 .ph-bat::after { content: ''; position: absolute; inset: 1.6px 6px 1.6px 1.6px; background: var(--wx-green-btn); border-radius: 1.5px; }

/* ---------- ② 微信导航栏 ---------- */
.phone.ip18 .wa-chead {
  padding: 4px 10px 8px; gap: 8px;
  background: var(--wx-nav); border-bottom: 1px solid var(--wx-line);
}
.phone.ip18 .wa-chead .g-av {
  width: 34px; height: 34px; border-radius: 7px; font-size: 16px;
  background: linear-gradient(160deg, #5A5F66, #34383D); color: #fff;
}
.phone.ip18 .wa-chead .g-info b { font-size: 16px; font-weight: 600; color: var(--wx-ink); }
.phone.ip18 .wa-chead .g-info span { font-size: 11.5px; color: #7C7C7C; }
.phone.ip18 .wa-chead .g-act { gap: 4px; }
.phone.ip18 .wa-chead .g-act button {
  width: 30px; height: 30px; padding: 0; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .05); color: #4A4A4A; font-size: 14px;
}
.phone.ip18 .wa-chead .g-act button:hover { background: rgba(0, 0, 0, .09); }
/* 微信的「‹ 返回」是导航栏左侧的独立按钮 */
.wx-back {
  border: 0; background: none; color: #191919; font-size: 20px; line-height: 1;
  padding: 4px 2px 4px 0; cursor: pointer; flex: 0 0 auto;
}
.wx-back:hover { opacity: .6; }

/* ---------- ③ 聊天区 ---------- */
.phone.ip18 .wa-msgs {
  flex: 1 1 auto; overflow: auto; padding: 12px 10px 10px;
  background-color: var(--wx-chat); background-image: none;   /* 微信是干净的灰底, 没有 WhatsApp 的壁纸点阵 */
  scroll-behavior: smooth;
}
.phone.ip18 .wa-day { margin: 8px 0 10px; }
.phone.ip18 .wa-day span,
.phone.ip18 .wa-sys span {
  background: #DADADA; color: #6B6B6B; font-size: 11.5px;
  padding: 3px 8px; border-radius: 4px; box-shadow: none;
}
.phone.ip18 .wa-sys.warn span { background: #FDECEA; color: #8A2B1E; }
.phone.ip18 .wa-line { display: flex; gap: 8px; margin-bottom: 15px; align-items: flex-start; }
.phone.ip18 .wa-line.out { flex-direction: row-reverse; }
.phone.ip18 .wa-line .av { width: 38px; height: 38px; border-radius: 6px; flex: 0 0 auto; font-size: 17px; }
/* 微信里自己发的不显示头像(右侧只有气泡) */
.phone.ip18 .wa-line.out .av { display: none; }
.phone.ip18 .wa-bub {
  position: relative; max-width: 78%; padding: 8px 11px 6px;
  background: #FFFFFF; border-radius: 6px; box-shadow: none;
}
.phone.ip18 .wa-line.out .wa-bub { background: var(--wx-green); }
.phone.ip18 .wa-bub::after { display: none; }   /* 关掉旧段挂在底部的尾巴 */
/* 微信气泡的尖角在**第一行**左侧/右侧 —— 位置与 WhatsApp 明显不同 */
.phone.ip18 .wa-bub::before {
  content: ''; position: absolute; top: 12px; width: 0; height: 0; border: 5px solid transparent;
}
.phone.ip18 .wa-line:not(.out) .wa-bub::before { left: -9px; border-right-color: #FFFFFF; }
.phone.ip18 .wa-line.out .wa-bub::before { right: -9px; border-left-color: var(--wx-green); }
.phone.ip18 .wa-bub .who { font-size: 12px; font-weight: 400; color: #9A9A9A !important; margin-bottom: 3px; }
.phone.ip18 .wa-bub .tx { font-size: 15px; line-height: 1.46; color: var(--wx-ink); }
.phone.ip18 .wa-bub .mt { font-size: 10.5px; color: rgba(0, 0, 0, .32); margin-top: 2px; }
.phone.ip18 .wa-bub .mt .tick { color: rgba(0, 0, 0, .3); }
.phone.ip18 .wa-bub .src {
  font-size: 11px; color: #576B95; background: rgba(87, 107, 149, .10);
  border-radius: 3px; padding: 1px 5px; display: inline-block; margin-top: 4px;
}
/* 内部备注：微信没有这个概念, 用灰底 + 🔒 区分, 避免业务员误当成"客户能看到的话" */
.phone.ip18 .wa-bub.wx-internal { background: #E2E2E2; }
.phone.ip18 .wa-bub.wx-internal::before { border-left-color: #E2E2E2; }
.phone.ip18 .wa-bub.wx-internal .tx { color: #5E5E5E; }
.phone.ip18 .wa-bub .snap { opacity: .0; transition: opacity .15s; }
.phone.ip18 .wa-bub:hover .snap { opacity: .75; }

/* ---------- ④ 输入栏（微信：语音 · 输入框 · 表情 · ＋ · 绿色发送） ---------- */
.phone.ip18 .wa-input {
  flex: 0 0 auto; display: flex; align-items: flex-end; gap: 7px;
  padding: 7px 8px 9px; background: #F7F7F7; border-top: 1px solid var(--wx-line);
}
.phone.ip18 .wa-input .in-wrap {
  flex: 1; display: flex; align-items: flex-end; gap: 4px;
  background: #fff; border: 1px solid #E2E2E2; border-radius: 6px;
  padding: 3px 6px 3px 10px; box-shadow: none;
}
.phone.ip18 .wa-input textarea {
  border: 0; box-shadow: none !important; background: transparent;
  min-height: 30px; max-height: 108px; padding: 7px 0; font-size: 14px;
}
.phone.ip18 .wa-input .fxbtn { border: 0; background: none; color: #5A5A5A; font-size: 21px; line-height: 1; padding: 0 2px; }
.phone.ip18 .wa-input .inbtn { border: 0; background: none; color: #8A8A8A; font-size: 17px; padding: 4px; }
.phone.ip18 .wa-input .inbtn[aria-pressed="true"] { color: #C8651C; }
.phone.ip18 .wa-input .send {
  width: 40px; height: 40px; border-radius: 6px; border: 0; flex: 0 0 auto;
  background: var(--wx-green-btn); color: #fff; font-size: 17px;
}
.phone.ip18 .wa-input .send:hover { background: #06AD56; }
.phone.ip18 .wa-input .send[disabled] { opacity: .45; }

/* 选段工具条 / 建议条在新配色下的可读性 */
.phone.ip18 .wa-selbar { background: #F7F7F7; border-top: 1px solid var(--wx-line); }
.phone.ip18 .wa-e2e span { color: #7C7C7C; }

/* ---------- ⑤ 档案会话手机窗（卡片内嵌, 比工作群窄一档） ---------- */
.inq-chat {
  display: flex; justify-content: center; padding: 14px 8px 10px;
  margin: 8px 0 6px; border-radius: 14px;
  background: linear-gradient(170deg, #EEF2F0, #DCE5E1);
}
.inq-chat .phone.ip18 { width: min(348px, 100%); }
.inq-chat .wa-msgs { min-height: 300px; }
/* 手机窗之外的旁注（贸易要素/截图/Uwhats 状态）不挤占机身宽度 */
.inq-chat-note { font-size: 12.5px; color: var(--wa-sub); text-align: center; margin-top: 6px; }

/* ---------- ⑥ /iq「对话归档」栏目 ---------- */
.chatlib-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-bottom: 1px solid var(--wa-line); }
.chatlib-row:last-child { border-bottom: 0; }
.chatlib-row .cl-main { flex: 1; min-width: 0; }
.chatlib-row .cl-q { font-weight: 700; font-size: 13.5px; color: var(--wa-ink); margin-bottom: 3px; }
.chatlib-row .cl-a { font-size: 13px; color: #3C4A44; white-space: pre-wrap; word-break: break-word; }
.chatlib-row .cl-meta { font-size: 11.5px; color: var(--wa-sub); margin-top: 5px; display: flex; gap: 10px; flex-wrap: wrap; }
.chatlib-row .cl-act { display: flex; flex-direction: column; gap: 5px; flex: 0 0 auto; }
.chatlib-row.pub { background: #F3FBF8; }

/* =============================================================================
   v1.73.0 修正 #1（真机验证抓到）
   ---------------------------------------------------------------------------
   问题：内部备注(.wa-bub.wx-internal)的灰底被「自己发=绿」压掉。
         `.phone.ip18 .wa-line.out .wa-bub` 特异性 (0,5,0) 高于
         `.phone.ip18 .wa-bub.wx-internal` (0,4,0) —— 实测内部备注渲染成绿气泡,
         与对客可见消息**外观完全一样**。这在业务上是危险的：业务员会以为
         "发出去的话客户都看得见", 或者反过来把内部话当对客话发。
   修法：把内部备注规则的特异性提到 (0,6,0) 覆盖。
   ========================================================================== */
.phone.ip18 .wa-line .wa-bub.wx-internal,
.phone.ip18 .wa-line.out .wa-bub.wx-internal { background: #E2E2E2; }
.phone.ip18 .wa-line:not(.out) .wa-bub.wx-internal::before { border-right-color: #E2E2E2; }
.phone.ip18 .wa-line.out .wa-bub.wx-internal::before { border-left-color: #E2E2E2; }
.phone.ip18 .wa-line .wa-bub.wx-internal .tx { color: #5E5E5E; }

/* v1.73 修正 #2（真机/门禁抓到）
   问题：档案手机窗的提示条原本也叫 .wa-e2e —— 与工作群那条**撞名**，
         于是「取页面上第一个 .wa-e2e」的代码/断言会选中隐藏的那个（宽 0 / 文案不同）。
         同类撞名在本版出现过两次（.wa-chat / .wa-e2e），所以档案侧统一改成 wx- 前缀。
   修法：给 .wx-e2e 补上与 .wa-e2e 一致的外观（原段不动, 只追加）。 */
.wx-e2e { flex: 0 0 auto; display: flex; justify-content: center; padding: 7px 10px 0; background: var(--wx-chat); }
.wx-e2e span {
  background: #FDF3D3; color: #6B5A2E; font-size: 11px; line-height: 1.45;
  padding: 4px 9px; border-radius: 6px; text-align: center; max-width: 94%;
}
/* ==================== v1.75 同台双席（业务席 / 客服席） ====================
   位置：wa-body 内最左一列（工作栏之右、工作内容窗之左）。
   比例：上下**严格 3:3** —— 两席都 flex:1 1 0，各占一半高度（真机专项按几何比值守）。
   ⛔ 只追加，不改既有段。窄屏（<1280px）默认折叠成一条竖条，点一下展开。 */
.seat-col {
  flex: 0 0 336px; min-width: 0; display: flex; flex-direction: column;
  /* v1.76: 席位从内容窗左侧移到右侧 —— 分隔线随之改到左边 */
  background: #F5F7F8; border-left: 1px solid var(--wa-line); position: relative;
}
.seat-foldbar {
  display: none; flex-direction: column; align-items: center; gap: 8px;
  padding: 10px 0; cursor: pointer; height: 100%; background: #F0F3F4;
}
.seat-foldbar b { writing-mode: vertical-rl; letter-spacing: 3px; font-size: 12px; color: var(--wa-sub); font-weight: 600; }
.seat-foldbar i { font-style: normal; font-size: 14px; }
.seat-col.folded { flex-basis: 34px; }
.seat-col.folded .seat, .seat-col.folded .seat-split { display: none; }
.seat-col.folded .seat-foldbar { display: flex; }

.seat { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; background: #fff; }
.seat-split {
  flex: 0 0 auto; height: 7px; background: #EDF0F1;
  border-top: 1px solid var(--wa-line); border-bottom: 1px solid var(--wa-line);
  display: flex; align-items: center; justify-content: center;
}
.seat-split::after { content: ''; width: 34px; height: 3px; border-radius: 2px; background: #C9D2D6; }

.seat-head { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: #FBFCFC; border-bottom: 1px solid var(--wa-line); }
.seat-ttl { font-size: 12.5px; font-weight: 700; white-space: nowrap; color: var(--wa-ink); }
.seat-biz .seat-ttl { color: #3D57E0; }
.seat-svc .seat-ttl { color: var(--wa-teal); }
.seat-head select { flex: 1 1 auto; min-width: 0; font-size: 12px; padding: 3px 5px; border-radius: 7px; border: 1px solid var(--wa-line); background: #fff; color: var(--wa-ink); }
.seat-head .seat-who { flex: 1 1 auto; min-width: 0; font-size: 12px; color: var(--wa-sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat-head button {
  flex: 0 0 auto; border: 1px solid var(--wa-line); background: #fff; border-radius: 7px;
  padding: 3px 7px; font-size: 12px; color: var(--wa-sub); cursor: pointer; line-height: 1.3;
}
.seat-head button:hover { border-color: var(--wa-teal); color: var(--wa-teal); }
.seat-head button[aria-pressed="true"] { background: #FFF6DC; border-color: #E8C97A; color: #8A6A18; }

.seat-as { flex: 0 0 auto; padding: 4px 9px; font-size: 11px; color: var(--wa-sub); background: #F8FAFB; border-bottom: 1px solid var(--wa-line); line-height: 1.5; }
.seat-as b { color: var(--wa-ink); }
.seat-as.warn { background: #FFF6DC; color: #7A5C10; }

.seat-msgs { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 9px 8px; background: #EDEDED; }
.seat-msgs .empty { color: var(--wa-sub); font-size: 12px; text-align: center; padding: 18px 8px; line-height: 1.65; }
/* 窄容器里的气泡收紧：特异性(0,2,0) 高于全局 (0,1,0)，不会被压掉 */
.seat-msgs .wa-line { margin-bottom: 7px; gap: 6px; }
.seat-msgs .wa-line .av { width: 22px; height: 22px; font-size: 11px; }
.seat-msgs .wa-line .wa-bub { max-width: 86%; }
.seat-msgs .wa-bub .tx { font-size: 12.4px; line-height: 1.5; }
.seat-msgs .wa-bub .who { font-size: 10.5px; }
.seat-msgs .wa-day { margin: 6px 0; }
.seat-msgs .wa-sys span { font-size: 11px; }
.seat-tag { display: inline-block; font-size: 10px; padding: 0 5px; border-radius: 999px; margin-right: 4px; font-weight: 700; }
.seat-tag.biz { background: rgba(77, 107, 254, .15); color: #3448C6; }
.seat-tag.svc { background: rgba(0, 128, 105, .15); color: #00614F; }
.seat-tag.act { background: rgba(138, 106, 24, .18); color: #7A5C10; }

.seat-input { flex: 0 0 auto; display: flex; align-items: flex-end; gap: 6px; padding: 6px 7px; background: #F7F9FA; border-top: 1px solid var(--wa-line); }
.seat-input textarea {
  flex: 1 1 auto; min-width: 0; resize: none; max-height: 84px; min-height: 30px;
  font-size: 12.4px; line-height: 1.45; padding: 6px 8px; border-radius: 9px;
  border: 1px solid var(--wa-line); background: #fff; color: var(--wa-ink);
}
.seat-input .seat-send {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; border: 0;
  color: #fff; background: var(--wa-teal); cursor: pointer; font-size: 14px;
}
.seat-biz .seat-input .seat-send { background: #3D57E0; }
.seat-input .seat-send[disabled] { opacity: .5; cursor: default; }

/* 发言回执：三处落地**逐项**显示（thread / 工作群 / 客户侧），禁统一报"成功" */
.seat-receipt { flex: 0 0 auto; padding: 5px 9px; font-size: 11px; line-height: 1.6; border-top: 1px solid var(--wa-line); background: #F8FAFB; }
.seat-receipt .r-ok { color: #0A7A5A; }
.seat-receipt .r-skip { color: var(--wa-sub); }
.seat-receipt .r-bad { color: #C0392B; font-weight: 600; }

@media (max-width: 1279px) {
  .seat-col { flex-basis: 34px; }
  .seat-col .seat, .seat-col .seat-split { display: none; }
  .seat-col .seat-foldbar { display: flex; }
  .seat-col.open { flex-basis: 336px; }
  .seat-col.open .seat { display: flex; }
  .seat-col.open .seat-split { display: flex; }
  .seat-col.open .seat-foldbar { display: none; }
}

/* ==================== v1.76 手机窗口 · 三方同台 ==================== */

/* ---------- ① 手机窗口在宽屏下固定成右列 ----------
   原来手机窗口排在档案列表**下方**，值班人得先滚过整张列表才看得到客户在说什么 ——
   这才是「不方便聊」的真因。这里改成「左列表 / 右手机窗口」两栏，滚动只发生在列表里。
   :has() 用于「还没选档案时右栏完全让位」，否则会白占半屏。 */
@media (min-width: 1140px) {
  .wk-pane#wkInq.on { display: flex; gap: 12px; align-items: flex-start; }
  .inq-left { flex: 1 1 46%; min-width: 0; }
  .inq-right { flex: 1 1 54%; min-width: 0; position: sticky; top: 0; }
  .inq-right:not(:has(> :not([hidden]))) { display: none; }
}

/* ---------- ② 状态栏：阶梯信号格 + 5G ----------
   原 .ph-sig 是一条等宽渐变块，只表达「有信号」而不表达「信号强弱」；
   换成四根递增高度的柱子（真实手机的观感），并在左侧补 5G 文案。 */
.phone.ip18 .ph-5g {
  font-size: 10px; font-weight: 700; color: #191919; letter-spacing: .2px; line-height: 1;
}
.phone.ip18 .ph-sig {
  width: 17px; height: 11px; border-radius: 0; background:
    linear-gradient(#191919, #191919) 0 7px / 3px 4px no-repeat,
    linear-gradient(#191919, #191919) 4.6px 5px / 3px 6px no-repeat,
    linear-gradient(#191919, #191919) 9.2px 3px / 3px 8px no-repeat,
    linear-gradient(#191919, #191919) 13.8px 0 / 3px 11px no-repeat;
}

/* ---------- ③ 「输入客户名称 → 同步显示」接入条 ----------
   客户用我们下发的密码登录 Uwhats 后，他说的第一句我们并不知道 ——
   这条接入条就是「把他在对端的真实会话拉过来显示」的入口。 */
.wx-sync {
  flex: 0 0 auto; display: flex; gap: 6px; align-items: center;
  padding: 7px 9px; background: var(--wx-chat); border-bottom: 1px solid var(--wx-line);
}
.wx-sync input {
  flex: 1 1 auto; min-width: 0; border: 1px solid var(--wx-line); border-radius: 8px;
  padding: 6px 9px; font-size: 12.5px; background: #fff; color: var(--wx-ink);
}
.wx-sync button {
  flex: 0 0 auto; border: 0; border-radius: 8px; padding: 6px 10px; font-size: 12.5px;
  font-weight: 600; color: #fff; background: var(--wx-green-btn); cursor: pointer; white-space: nowrap;
}
.wx-sync button[disabled] { opacity: .55; cursor: default; }
.wx-cand {
  flex: 0 0 auto; max-height: 132px; overflow: auto;
  background: #fff; border-bottom: 1px solid var(--wx-line);
}
.wx-cand button {
  display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left;
  border: 0; background: none; padding: 7px 11px; border-bottom: 1px solid var(--wx-line);
  cursor: pointer; font-size: 12.5px;
}
.wx-cand button:last-child { border-bottom: 0; }
.wx-cand button:hover { background: var(--wx-soft); }
.wx-cand b { font-weight: 600; color: var(--wx-ink); }
.wx-cand span { color: var(--wa-sub); font-size: 11.5px; }
.wx-cand .wx-cand-tip { padding: 8px 11px; color: var(--wa-sub); font-size: 11.5px; }

/* 来自 Uwhats 的客户消息在手机窗口里的来源标注（与内部记录一眼区分开） */
.wx-src { display: block; margin-top: 3px; font-size: 10.5px; opacity: .62; }

/* ==================== v1.76 修正：中宽屏工作栏收成「图标栏」 ====================
   为什么：工作栏由「15px 悬停展开」改成「常显 192px」后，1024px 视口横向溢出 90px
   （实测：192 + 34(折叠的席位) + 两窗最小 888 = 1114 > 1024）。
   修法不是把工作栏藏回去（那正是本版要取消的行为），而是中宽屏下只显示图标：
   仍然常显、随时可点，只是不占 192px 的文字宽度。
   断点取 1279px：与席位折叠（max-width:1279px）对齐，两者同时收窄。 */
@media (min-width: 981px) and (max-width: 1279px) {
  .wk-rail { flex: 0 0 56px; width: 56px; }
  .wk-rail-in { width: 56px; min-width: 56px; padding: 8px 6px 12px; align-items: center; }
  .wk-rail .wk-txt { display: none; }
  .wk-rail .wk-grp { display: none; }
  .wk-rail-list { align-items: center; }
  .wk-rail-list button { justify-content: center; padding: 9px 0; }
  .wk-rail-list button .badge { position: absolute; top: 4px; right: 5px; margin-left: 0; }
}

/* v1.76 修正：手机窗保底宽 —— 防止内容窗（basis auto 时）把它压到装不下手机壳。
   ⛔ 只在 ≥981px 生效：手机上 .wa-body 是纵向列，320px 保底反而会把 390px 屏幕撑破。 */
@media (min-width: 981px) {
  /* basis 0：与内容窗**公平按比例**分（若保持 basis auto，它会先按内容宽占掉 ~332px，
     1280/1024 下反而比内容窗还宽 —— 实测 wa-work 334 vs wa-chat 418）。
     min-width 保底：机身实测需要 --ip-w(372px) + 两侧侧键各约 3px —— 保底给小了会溢出
     （340 时 1440×900 下溢出 19px；且**视口高 900 时机身会被撑到 372**，见 .phone.ip18 的 100vh 公式）。 */
  .wa-chat { flex: 1 1 0%; min-width: 384px; }
}

/* ==================== v1.77 UWhats 登录端（最右手机窗的默认视图） ====================
   为什么要有视图切换：对端真实客户端内嵌进来后，原来这个窗里的「工作群」功能不能丢，
   两者共用一个机身 —— 切换条放状态栏下面，默认停在登录端（用户要求「最右窗改为登录端」）。 */
.wa-switch { flex: 0 0 auto; display: flex; gap: 6px; padding: 6px 8px; background: #F0F2F5; border-bottom: 1px solid var(--wa-line); }
.wa-sw-btn { flex: 1 1 0; min-width: 0; border: 0; background: rgba(11, 20, 26, .06); color: var(--wa-sub); font-size: 12px; padding: 6px 4px; border-radius: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-sw-btn.on { background: #fff; color: var(--wa-ink); font-weight: 600; box-shadow: 0 1px 2px rgba(16, 24, 40, .10); }
/* 视图容器：与 .ip-screen 同向的列 flex，包一层不影响原工作群的布局 */
.wa-view { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
/* ⛔ hidden 必须显式压过上面的 display:flex —— 否则 .wa-view[hidden] 依然显示（本项目踩过） */
.wa-view[hidden], .uw-term-idle[hidden], .uw-frame[hidden] { display: none; }
.uw-term { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.uw-term-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 7px 9px; background: #fff; border-bottom: 1px solid var(--wa-line); }
.uw-term-bar b { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uw-dot { width: 8px; height: 8px; border-radius: 50%; background: #c3c8cd; flex: 0 0 auto; }
.uw-dot.on { background: #16A902; }
.uw-term-tip { flex: 0 0 auto; font-size: 11px; line-height: 1.5; color: #6B5A2E; padding: 5px 9px; background: #FDF3D3; }
.uw-term-idle { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 14px 12px; display: flex; flex-direction: column; gap: 10px; background: var(--wx-chat); }
.uw-idle-t { font-size: 13px; font-weight: 600; }
.uw-idle-row { display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--wa-sub); }
.uw-idle-row select, .uw-idle-row input { flex: 1 1 auto; min-width: 0; border: 1px solid var(--wa-line); border-radius: 8px; padding: 6px 8px; font-size: 12px; background: #fff; color: var(--wa-ink); }
.uw-idle-hint { font-size: 11.5px; line-height: 1.55; color: var(--wa-sub); white-space: pre-wrap; }
.uw-frame { flex: 1 1 auto; width: 100%; min-height: 0; border: 0; background: #fff; }
@media (max-width: 480px) { .wa-switch { padding: 5px 6px; } .wa-sw-btn { font-size: 11px; } }

/* ===== v1.78 Uwhats 同步：警示条 / 同步动作行 / 逐项回执 =====
   为什么要有警示条：会话"幽灵化"时，界面原本一切正常、按钮照样回「已发送」，
   客户却一条都收不到。把「客户到底收得到收不到」放在接入条最上面，是这条链路的止血点。 */
.uw-warn { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 6px 0 2px; padding: 8px 10px;
  font-size: 12.5px; line-height: 1.6; border-radius: 10px; background: #FDECEC; color: #96322B; border: 1px solid #F3C6C1; }
.uw-warn.soft { background: #FFF6E2; color: #7A5310; border-color: #EBD5A6; }
.uw-warn b { font-weight: 700; }
.uw-sync-act { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--wa-line); }
.uw-rcpt { margin-top: 8px; }
.uw-hg { padding: 9px 11px; border-radius: 10px; font-size: 12.5px; line-height: 1.65; background: #F3F7F5; border: 1px solid #D9E6E0; color: var(--wa-ink); }
.uw-hg b { font-weight: 700; }
.uw-hg.good { background: #E9F7F1; border-color: #B9E2D2; color: #0B6B4F; }
.uw-hg.bad { background: #FDECEC; border-color: #F3C6C1; color: #96322B; }
.uw-err { padding: 8px 10px; border-radius: 10px; font-size: 12.5px; background: #FDECEC; color: #96322B; border: 1px solid #F3C6C1; }
.uw-mut { color: var(--wa-sub); }
/* v1.78 工作群顶部的「客户侧送达」警示条（空 = 隐藏，不制造常驻噪音） */
.wa-uw-warn { flex: 0 0 auto; font-size: 11.5px; line-height: 1.55; padding: 6px 9px; background: #FDECEC;
  color: #96322B; border-bottom: 1px solid #F3C6C1; }
.wa-uw-warn .uw-mut { color: #A9706A; }
/* v1.79 接入条里的长说明默认折叠 —— ⛔ 不是美观问题：
   这些字平铺时把接入条顶到 800px 高，而**手机窗口就挂在接入条下面**，
   于是客户会话被挤出首屏（真机量过：手机窗 top=1059，视口 1060）。 */
.uw-more { margin: 6px 0 2px; font-size: 12.5px; }
.uw-more > summary { cursor: pointer; color: var(--wa-sub); padding: 3px 0; user-select: none; }
.uw-more > summary:hover { color: var(--wa-ink); }
.uw-more .hint { margin: 4px 0 0; }

/* ============================================================================
   v1.81.0 · Liquid Glass 主题层（Apple iOS 27 / macOS 27「Golden Gate」风格）
   ---------------------------------------------------------------------------
   ⛔ 这一层**只改观感**：颜色 / 圆角 / 材质 / 阴影 / 字体 / 动效。
      绝不动 display / position / 栅格 / 宽高 —— 布局尺寸被 v1.57 与 v1.76 的
      几何断言钉住了（.wa-top 必须 56px、.wk-rail 中宽屏必须 ≈56px 图标栏、
      浮层必须让开 --iq-top、手机窗必须在首屏内）。改尺寸 = 回归必红。

   设计依据 —— WWDC 2026 对 Liquid Glass 的更新（iOS 27 / macOS 27），逐条落地：
     ① 材质更有效地漫射背后的复杂内容 → 提高模糊半径 + 抬高不透明度下限
     ② 新增「加深边缘」+ 更亮的镜面高光 → 1px 冷色描边 + inset 顶部高光
     ③ 设置里的**透明度滑块**（超透明 ↔ 全着色）→ --lg-alpha 令牌，
        由顶栏「外观」滑块控制（见 §12）
     ④ 侧边栏折射背后内容；侧栏图标使用**应用强调色**
     ⑤ 窗口采用**更紧凑的统一圆角**
     ⑥ 内容滚到悬浮栏下时出现统一工具栏（滚动边缘效果），**取代硬分隔线**
     ⑦ 控件统一 capsule（圆角 = 高度的一半）；嵌套用 concentric（父圆角 − 内边距）

   三条硬约束（改这一层时必须遵守）：
     ⛔ 对比度：正文一律 ≥4.5:1。每个新色值都在文件里注明实测比值，
        并由 qa/tools/ui_audit.js 按 WCAG 公式在**真实渲染**上复算。
     ⛔ 令牌命名：新增 --sf-* / --lg-*；历史 --wa-* 变量名**保留**只换值
        （285 处引用，改名零收益、风险高）。
     ⛔ 客户镜像不动：.phone.ip18 内部的 .wx-* / .wa-bub / .wa-input 是
        「客户在自己客户端里看到的样子」，必须保持忠实 —— 只升级**设备外观**
        （机身 / 灵动岛 / 状态栏 / Home 指示条）。
   ========================================================================== */

/* ---------------------------------------------------------------- §0 令牌 */
:root {
  /* ---- 应用强调色（Apple 系统蓝族；白字对比按渐变**最浅端**反推，全段 ≥4.83:1）---- */
  --sf-accent: #0A63E6;        /* 白字 4.83:1 ✓ */
  --sf-accent-d: #0050C8;      /* 白字 6.46:1 ✓ */
  --sf-accent-ink: #0A4FA8;    /* 用在浅蓝底上的文字：对 #EAF1FE = 6.86:1 ✓ */
  --sf-accent-weak: #EAF1FE;
  --sf-accent-line: #CFE0FB;
  --sf-accent-grad: linear-gradient(180deg, #0A63E6 0%, #0050C8 100%);
  --sf-accent-glow: 0 6px 18px -8px rgba(10, 99, 230, .70);

  /* ---- 语义色（文字色与背景色**分离**：亮色当文字会不达标，见技能 §4 陷阱②）---- */
  --sf-green: #2E9E4F;         /* 成功/已送达 —— 只用于背景与图标 */
  --sf-green-bg: #34C759;      /* 系统绿（指示灯 / 纯背景，不当文字）*/
  --sf-green-ink: #1E6E38;     /* 绿底上的文字：#EAF7EE = 5.72:1 ✓ */
  --sf-green-weak: #EAF7EE;
  --sf-green-line: #C7E8D2;
  --sf-red: #D70015;           /* 危险文字（白底 5.9:1 ✓）*/
  --sf-red-bg: #FF3B30;        /* 系统红（指示灯 / 纯背景，不当文字）*/
  --sf-red-ink: #B3261E;
  --sf-red-weak: #FFECEB;
  --sf-red-line: #FFD3D0;
  --sf-amber: #B25000;         /* 白底 5.0:1 ✓ */
  --sf-amber-ink: #7A5200;
  --sf-amber-weak: #FFF6E6;
  --sf-amber-line: #F2DCB4;
  --sf-violet: #5E5CE6;
  --sf-violet-weak: #EEEEFD;
  --sf-violet-line: #D5D5F8;

  /* ---- 中性阶（**冷灰**。暖棕灰压在冷色品牌上会发黄显脏，见技能 §9.2）---- */
  --sf-ink: #1D1D1F;           /* 主文本（白底 ≈16:1）*/
  --sf-ink-2: #5F5F64;         /* 次级文本（白底 6.35:1 ✓ 比改造前的 6.05:1 更好）*/
  --sf-ink-3: #8E8E93;         /* ⛔ 仅图标 / 分隔线（3.26:1，**不做正文**）*/
  --sf-line: #E3E3E8;
  --sf-line-2: rgba(60, 60, 67, .16);
  --sf-line-3: rgba(60, 60, 67, .09);
  --sf-bg: #F2F2F7;
  --sf-bg-2: #E9E9EF;
  --sf-surface: #FFFFFF;

  /* ---- 玻璃材质（② 漫射 + 加深边缘 + 镜面高光）----
     --lg-alpha / --lg-blur 由顶栏「外观」滑块实时改写（③ 透明度滑块）。 */
  --lg-alpha: .80;
  --lg-blur: 26px;
  --lg-sat: 180%;
  --lg-bg: rgba(255, 255, 255, var(--lg-alpha));
  --lg-bg-quiet: rgba(252, 252, 254, var(--lg-alpha));
  --lg-edge: rgba(17, 17, 22, .10);      /* 加深边缘（亮底上用深描边）*/
  --lg-edge-2: rgba(17, 17, 22, .055);
  --lg-hi: rgba(255, 255, 255, .90);     /* 顶部镜面高光 */
  --lg-hi-2: rgba(255, 255, 255, .46);
  --lg-shadow: 0 1px 1px rgba(16, 18, 27, .04), 0 10px 30px -16px rgba(16, 18, 27, .22);
  --lg-shadow-2: 0 1px 2px rgba(16, 18, 27, .05), 0 26px 60px -24px rgba(16, 18, 27, .34);
  --lg-blur-css: blur(var(--lg-blur)) saturate(var(--lg-sat));

  /* ---- 形状：capsule 控件 + concentric 嵌套（⑦）---- */
  --r-cap: 999px;
  --r-xl: 26px;                /* 面板 / 浮层 */
  --r-lg: 20px;                /* 卡片 */
  --r-md: 14px;                /* 输入 / 小卡 */
  --r-sm: 10px;                /* 标签 / 内嵌块 */

  /* ---- 动效 ---- */
  --e-out: cubic-bezier(.22, 1, .36, 1);
  --t-fast: 120ms;
  --t-base: 240ms;

  /* ---- 外观面板（③）---- */
  --iq-look-fill: 60%;         /* 滑块已填充比例，由 qa/iq.js 实时写入 */

  /* ---- 触摸目标（技能 §0：WCAG 2.5.5 / iOS HIG 下限 44）---- */
  --tap: 44px;
  --tap-dense: 36px;           /* 桌面密集区（列表行内操作）下限 */

  /* ==== 覆写历史令牌：只换值，不改名 ==== */
  --wa-teal: var(--sf-accent);
  --wa-teal-d: var(--sf-accent-d);
  --wa-green: var(--sf-green);
  --wa-ink: var(--sf-ink);
  --wa-sub: var(--sf-ink-2);
  --wa-line: var(--sf-line-2);
  --wa-panel: var(--sf-surface);
  --wa-soft: var(--sf-bg);
  --wa-warn: #C0392B;
  --wa-warn-bg: var(--sf-red-weak);
  --brand: var(--sf-accent);
  --brand-2: var(--sf-accent-d);
  --r-md: 14px; --r-lg: 20px; --r-sm: 10px;
  --sh-1: 0 1px 2px rgba(16, 18, 27, .06);
  --sh-2: var(--lg-shadow-2);
}

/* ② 玻璃配方。写成一个可复用的声明块，各组件用 @extend 语义手工展开
   （原生 CSS 无 @extend，所以下面逐处写全，便于单独覆盖）。 */
@property --lg-alpha { syntax: '<number>'; inherits: true; initial-value: .80; }

/* ---------------------------------------------------------- §1 基座与排版 */
#iqLogin, #iqApp { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "PingFang SC", "Helvetica Neue", "Microsoft YaHei", system-ui, sans-serif; }
body {
  color: var(--sf-ink);
  letter-spacing: -.005em;
  /* 极光底：**同色相家族**（蓝→靛→青），低透明。多色斑是「脏」的头号来源。 */
  background:
    radial-gradient(1120px 640px at 10% -14%, rgba(10, 99, 230, .10), transparent 62%),
    radial-gradient(900px 520px at 102% -2%, rgba(94, 92, 230, .09), transparent 60%),
    radial-gradient(780px 520px at 74% 110%, rgba(48, 176, 199, .07), transparent 62%),
    linear-gradient(180deg, #F8F9FD 0%, #F1F2F8 100%);
  background-attachment: fixed;
}
#iqLogin { background: transparent; }
a { color: var(--sf-accent); }
/* 焦点环：键盘可达（保留可见性，但**不改变元素圆角** —— 聚焦即变形是坑） */
:focus-visible { outline: 2px solid var(--sf-accent); outline-offset: 2px; border-radius: inherit; }
/* 滚动条：macOS 风格细条，不抢视线 */
#iqApp *, #iqLogin * { scrollbar-width: thin; scrollbar-color: rgba(60, 60, 67, .28) transparent; }
#iqApp ::-webkit-scrollbar, #iqLogin ::-webkit-scrollbar { width: 10px; height: 10px; }
#iqApp ::-webkit-scrollbar-thumb, #iqLogin ::-webkit-scrollbar-thumb {
  background: rgba(60, 60, 67, .26); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box;
}
#iqApp ::-webkit-scrollbar-thumb:hover, #iqLogin ::-webkit-scrollbar-thumb:hover { background: rgba(60, 60, 67, .42); background-clip: padding-box; }
#iqApp ::-webkit-scrollbar-track, #iqLogin ::-webkit-scrollbar-track { background: transparent; }

/* 按下回弹 —— 「好用」的第一感知；全站按钮自动生效 */
#iqApp button, #iqLogin button, #iqApp a.wa-back {
  transition: transform var(--t-fast) var(--e-out), box-shadow var(--t-base) var(--e-out),
              background-color var(--t-base) var(--e-out), border-color var(--t-base) var(--e-out), color var(--t-fast) linear;
}
#iqApp button:active, #iqLogin button:active { transform: scale(.965); }
#iqApp button:disabled, #iqLogin button:disabled { opacity: .45; pointer-events: none; }

/* ------------------------------------------------------------ §2 登录界面 */
#iqLogin {
  background-image:
    radial-gradient(900px 520px at 8% -10%, rgba(10, 99, 230, .14), transparent 62%),
    radial-gradient(820px 460px at 100% 6%, rgba(94, 92, 230, .12), transparent 60%),
    linear-gradient(180deg, #F8F9FD, #EFF1F9);
}
#iqLogin .lg-brand b { font-weight: 700; letter-spacing: -.4px; }
#iqLogin .lg-hero, #iqLogin .lg-card {
  background: var(--lg-bg); border: 1px solid var(--lg-edge); border-radius: var(--r-xl);
  -webkit-backdrop-filter: var(--lg-blur-css); backdrop-filter: var(--lg-blur-css);
  box-shadow: inset 0 1px 0 var(--lg-hi), var(--lg-shadow-2);
}
#iqLogin .lg-hero h2 { letter-spacing: -.7px; font-weight: 700; }
#iqLogin .lg-hero h2 .grad { background: var(--sf-accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
#iqLogin .lg-badge { background: var(--sf-accent-weak); color: var(--sf-accent-ink); font-weight: 600; }
#iqLogin .lg-badge i { background: var(--sf-accent); }
#iqLogin .lg-pills span, #iqLogin .lg-flow li {
  background: rgba(255, 255, 255, .72); border: 1px solid var(--lg-edge-2); border-radius: var(--r-cap);
  box-shadow: inset 0 1px 0 var(--lg-hi-2);
}
#iqLogin .lg-flow li b { color: var(--sf-accent-ink); }
#iqLogin .lg-f input, #iqLogin .lg-f .lg-inp {
  background: rgba(255, 255, 255, .82); border: 1px solid var(--lg-edge); border-radius: var(--r-md);
  box-shadow: inset 0 1px 2px rgba(16, 18, 27, .05);
}
#iqLogin .lg-f input:focus { border-color: var(--sf-accent); box-shadow: 0 0 0 4px rgba(10, 99, 230, .16); }
/* ⛔ 登录主按钮**不能**并进 §4 那条分组规则：同特异性、后置的分组规则会把它
   自己的强调渐变覆盖成中性玻璃底色（audit 实测 backgroundImage = none）。
   所以这里自成一个完整规则，且不与后面任何 `#iqLogin .lg-btn` 分组共存。 */
#iqLogin .lg-btn {
  border-radius: var(--r-cap); min-height: var(--tap-dense);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 0; color: #fff; background: var(--sf-accent-grad);
  font-weight: 600; letter-spacing: -.2px; box-shadow: var(--sf-accent-glow);
}
#iqLogin .lg-btn:hover { background: linear-gradient(180deg, #0B58D0, #0046B4); }
#iqLogin .lg-head .lg-avatar, #iqLogin .lg-avatar { border-radius: 999px; }
#iqLogin .lg-err { border-radius: var(--r-md); background: var(--sf-red-weak); color: var(--sf-red-ink); border: 1px solid var(--sf-red-line); }
#iqLogin .lg-note, #iqLogin .lg-rows { border-radius: var(--r-md); }
/* 登录页的返回链接也是**可点目标**：实测 91×20，鼠标都要瞄，手指根本按不到。
   撑到 36px 热区、胶囊外观（视觉上仍是一行小字）。 */
#iqLogin .lg-rows a {
  display: inline-flex; align-items: center; min-height: var(--tap-dense); padding: 0 12px;
  border-radius: var(--r-cap); color: var(--sf-accent); text-decoration: none; font-weight: 600;
}
#iqLogin .lg-rows a:hover { background: var(--sf-accent-weak); color: var(--sf-accent-ink); }
/* v1.82.0：「用 Uwhats 账号登录」—— 次级按钮，**不能**抢主操作「进入询盘工作台」的视觉。
   ⛔ 必须写在 `#iqLogin .lg-btn` 之后（同特异性 + 后置才生效；并进 §4 分组会被吃回去）。 */
#iqLogin .lg-btn-uw {
  margin-top: 10px; background: rgba(255, 255, 255, .78); color: var(--sf-ink);
  border: 1px solid var(--lg-edge); box-shadow: inset 0 1px 0 var(--lg-hi-2); text-decoration: none;
}
#iqLogin .lg-btn-uw:hover { background: #fff; color: var(--sf-accent-ink); }

/* ------------------------------------------------- §3 顶栏 + 滚动边缘效果 */
/* ⑥ 悬浮玻璃栏取代实色条；内容滚到它下面时用**渐变遮罩**过渡，不画硬分隔线。 */
#iqApp .wa-top {
  height: 56px;                                  /* ⛔ 不许改：--iq-top / 浮层定位依赖它 */
  color: var(--sf-ink);
  background: var(--lg-bg);
  border-bottom: 1px solid var(--lg-edge-2);
  -webkit-backdrop-filter: var(--lg-blur-css); backdrop-filter: var(--lg-blur-css);
  box-shadow: inset 0 1px 0 var(--lg-hi), 0 1px 3px rgba(16, 18, 27, .06);
}
/* 滚动边缘效果：一条向下渐隐的柔光，替代原来的 3px 实色投影 */
#iqApp .wa-top::after {
  content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 18px; pointer-events: none;
  background: linear-gradient(180deg, rgba(16, 18, 27, .055), transparent);
}
#iqApp .wa-top b { font-weight: 600; letter-spacing: -.3px; }
#iqApp .wa-top em { color: var(--sf-ink-2); opacity: 1; font-variant-numeric: tabular-nums; }
#iqApp .wa-top .wa-me { color: var(--sf-ink-2); }
#iqApp .wa-top button, #iqApp .wa-top a.wa-back {
  color: var(--sf-ink); background: rgba(255, 255, 255, .62); border: 1px solid var(--lg-edge);
  border-radius: var(--r-cap); font-weight: 600; min-height: var(--tap-dense);
  box-shadow: inset 0 1px 0 var(--lg-hi-2);
}
#iqApp .wa-top button:hover, #iqApp .wa-top a.wa-back:hover { background: rgba(255, 255, 255, .92); border-color: var(--lg-edge); color: var(--sf-accent-ink); }
#iqApp .wa-top a.wa-back { text-decoration: none; display: inline-flex; align-items: center; }

/* --------------------------------------------- §4 左侧工作栏（侧边玻璃栏）*/
#iqApp .wk-rail {
  background: var(--lg-bg-quiet);
  border-right: 1px solid var(--lg-edge-2);
  -webkit-backdrop-filter: var(--lg-blur-css); backdrop-filter: var(--lg-blur-css);
  box-shadow: inset -1px 0 0 var(--lg-hi-2);
}
#iqApp .wk-rail-ttl { color: var(--sf-ink-2); letter-spacing: .04em; }
/* ⛔ 组标签是**文字**（11px 小字），必须 ≥4.5:1。这里是 --sf-ink-2（6.35:1）。
   第一版误用了 --sf-ink-3（3.26:1，只配给图标/分隔线）—— 被 ui_audit 的对比度扫描当场逮到。 */
#iqApp .wk-grp { color: var(--sf-ink-2); letter-spacing: .06em; }
#iqApp .wk-rail-list button { border-radius: var(--r-cap); color: var(--sf-ink); font-weight: 500; }
#iqApp .wk-rail-list button:hover { background: rgba(17, 17, 22, .05); }
/* ④ 侧栏图标/选中态用**应用强调色** */
#iqApp .wk-rail-list button.on {
  background: var(--sf-accent-weak); color: var(--sf-accent-ink); font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--sf-accent-line);
}
#iqApp .wk-rail-list button.on::before { background: var(--sf-accent); }
#iqApp .wk-rail-list button .badge { background: var(--sf-red); color: #fff; border-radius: var(--r-cap); }
#iqApp .wk-pin { border-radius: var(--r-cap); color: var(--sf-ink-2); }
#iqApp .wk-pin:hover { background: rgba(17, 17, 22, .05); color: var(--sf-ink); }
#iqApp .wk-rail[data-pin="1"] .wk-pin { background: var(--sf-accent-weak); color: var(--sf-accent-ink); }
#iqApp .wk-rail-hot { background: rgba(255, 255, 255, .6); border: 1px solid var(--lg-edge-2); border-radius: 0 var(--r-md) var(--r-md) 0; }
#iqApp .wk-rail-dot { background: var(--sf-red-bg, #FF3B30); }

/* --------------------------------- §5 内容窗 / 卡片 / 列表 / 按钮 / 表单 */
#iqApp .wa-body { background: transparent; }
#iqApp .wa-work, #iqApp .wa-chat { background: rgba(255, 255, 255, .56); }
#iqApp .wa-work { border-right: 1px solid var(--lg-edge-2); }
#iqApp .wk-pane { background: transparent; }
#iqApp .wk-tabs { background: transparent; border-bottom: 1px solid var(--sf-line-2); }
#iqApp .wk-tabs button { border-radius: var(--r-cap) var(--r-cap) 0 0; color: var(--sf-ink-2); }
#iqApp .wk-tabs button.on { color: var(--sf-accent-ink); border-bottom-color: var(--sf-accent); }

/* 卡片：玻璃 + concentric 圆角（⑦）*/
#iqApp .card {
  background: var(--lg-bg); border: 1px solid var(--lg-edge); border-radius: var(--r-lg);
  -webkit-backdrop-filter: var(--lg-blur-css); backdrop-filter: var(--lg-blur-css);
  box-shadow: inset 0 1px 0 var(--lg-hi), var(--lg-shadow);
}
#iqApp .card h3 { font-weight: 600; letter-spacing: -.25px; }
#iqApp .card h3 .muted { color: var(--sf-ink-2); }
#iqApp .f1 label, #iqApp .f2 label, #iqApp .f3 label { color: var(--sf-ink-2); font-weight: 600; }

/* 列表项：玻璃小卡；选中态 = 浅蓝底 + 左侧强调条（concentric）*/
#iqApp .item {
  background: var(--lg-bg); border: 1px solid var(--lg-edge-2); border-radius: var(--r-md);
  box-shadow: inset 0 1px 0 var(--lg-hi-2);
}
#iqApp .item:hover { border-color: var(--lg-edge); background: rgba(255, 255, 255, .94); }
#iqApp .item.sel {
  background: var(--sf-accent-weak); border-color: var(--sf-accent-line);
  box-shadow: inset 3px 0 0 var(--sf-accent), inset 0 1px 0 var(--lg-hi-2);
}
#iqApp .item .it-body { color: var(--sf-ink-2); }
#iqApp .empty { color: var(--sf-ink-2); }
#iqApp .lockbar { border-radius: var(--r-md); background: var(--sf-amber-weak); border: 1px solid var(--sf-amber-line); }
#iqApp .lockbar b { color: var(--sf-amber-ink); }
#iqApp .trace { border-left-color: var(--sf-accent-line); }
#iqApp .trace div::before { background: var(--sf-accent); }
#iqApp .evi, #iqApp .kb-tile {
  background: var(--lg-bg); border: 1px solid var(--lg-edge-2); border-radius: var(--r-md);
  box-shadow: inset 0 1px 0 var(--lg-hi-2);
}
#iqApp .kb-tile:hover { border-color: var(--sf-accent-line); }
#iqApp .kb-tile.on { background: var(--sf-accent-weak); border-color: var(--sf-accent-line); box-shadow: inset 0 0 0 1px var(--sf-accent-line); }
#iqApp .kb-tile .kb-n { color: var(--sf-accent-ink); }
#iqApp .evi img, #iqApp .evi .ev-no { border-radius: var(--r-sm); background: var(--sf-bg); }

/* 按钮体系：统一 capsule（⑦）。一级=强调渐变；次级=玻璃胶囊；危险=浅红胶囊
   ⛔ 这里**不要**再把 `#iqLogin .lg-btn` 并进来 —— 同特异性 + 后置会把登录主按钮的
      强调渐变覆盖成中性玻璃底（audit 实测 backgroundImage 变成 none）。登录按钮在 §2 自成规则。 */
#iqApp .btn, #iqApp .lg-btn {
  border-radius: var(--r-cap); min-height: var(--tap-dense);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--lg-edge); background: rgba(255, 255, 255, .76); color: var(--sf-ink);
  font-weight: 600; box-shadow: inset 0 1px 0 var(--lg-hi-2);
}
#iqApp .btn:hover { background: #fff; border-color: var(--lg-edge); color: var(--sf-accent-ink); }
#iqApp .btn.primary {
  background: var(--sf-accent-grad); border-color: transparent; color: #fff; box-shadow: var(--sf-accent-glow);
}
#iqApp .btn.primary:hover { background: linear-gradient(180deg, #0B58D0, #0046B4); color: #fff; }
#iqApp .btn.danger { color: var(--sf-red); border-color: var(--sf-red-line); background: rgba(255, 236, 235, .8); }
#iqApp .btn.danger:hover { background: var(--sf-red-weak); color: var(--sf-red-ink); }
#iqApp .btn.sm { padding: 5px 12px; font-size: 12.5px; min-height: 32px; }

/* 表单控件：concentric 圆角 + Apple 焦点环（4px 柔光，不是硬描边）*/
#iqApp input[type=text], #iqApp input[type=password], #iqApp input[type=search],
#iqApp input[type=email], #iqApp input[type=number], #iqApp select, #iqApp textarea,
#iqLogin input[type=text], #iqLogin input[type=password] {
  background: rgba(255, 255, 255, .86); border: 1px solid var(--lg-edge); border-radius: var(--r-md);
  color: var(--sf-ink); box-shadow: inset 0 1px 2px rgba(16, 18, 27, .05);
}
#iqApp input:focus, #iqApp select:focus, #iqApp textarea:focus,
#iqLogin input:focus {
  outline: none; border-color: var(--sf-accent); box-shadow: 0 0 0 4px rgba(10, 99, 230, .16);
}
#iqApp input::placeholder, #iqApp textarea::placeholder { color: var(--sf-ink-2); opacity: .78; }
/* ↑ 占位符也是**文字**，同样受 ≥4.5:1 约束（--sf-ink-3 只有 3.26:1，故不用）。 */

/* 标签（chip）：capsule + Apple 语义色（文字色与底色**分开**定，保证 ≥4.5:1）*/
#iqApp .chip { border-radius: var(--r-cap); font-weight: 600; }
#iqApp .chip.gray { background: var(--sf-bg-2); color: var(--sf-ink-2); }
#iqApp .chip.amber { background: var(--sf-amber-weak); color: var(--sf-amber-ink); border-color: var(--sf-amber-line); }
#iqApp .chip.green { background: var(--sf-green-weak); color: var(--sf-green-ink); border-color: var(--sf-green-line); }
#iqApp .chip.red { background: var(--sf-red-weak); color: var(--sf-red-ink); border-color: var(--sf-red-line); }
#iqApp .chip.blue { background: var(--sf-accent-weak); color: var(--sf-accent-ink); border-color: var(--sf-accent-line); }
#iqApp .muted, #iqApp .hint, #iqApp .inq-meta, #iqApp .em { color: var(--sf-ink-2); }
/* 语义文字色类 —— 取代 JS 里的内联 style（技能 §1 ③：内联色是重设计漏色的头号来源）*/
#iqApp .warn-ink { color: var(--sf-amber); }
#iqApp .ok-ink { color: var(--sf-green-ink); }
#iqApp .bad-ink { color: var(--sf-red-ink); }
#iqApp .owner-pick label em, #iqApp .agent-pick label em { font-style: normal; }
/* 「以客户口吻转述」按下态 —— 原先靠 JS 内联 style 上色，现在靠 data-on（v1.59 已在写）*/
#iqApp #waAsCustomer[data-on="1"] { background: var(--sf-accent-weak); border-color: var(--sf-accent-line); color: var(--sf-accent-ink); }

#iqApp .owner-pick { border-radius: var(--r-md); background: rgba(255, 255, 255, .7); border-color: var(--lg-edge-2); }
#iqApp .owner-pick label, #iqApp .agent-pick label {
  border-radius: var(--r-cap); background: rgba(255, 255, 255, .8); border-color: var(--lg-edge-2); color: var(--sf-ink-2);
}
#iqApp .owner-pick label.on, #iqApp .agent-pick label.on {
  background: var(--sf-accent-weak); border-color: var(--sf-accent-line); color: var(--sf-accent-ink);
}
#iqApp .src-inq { border-radius: var(--r-md); background: var(--sf-accent-weak); border-color: var(--sf-accent-line); }
#iqApp .src-inq b { color: var(--sf-accent-ink); }
#iqApp .inq-link { border-radius: var(--r-md); }

/* ------------------------------------- §6 会话（**只改席位面板**；镜像一律冻结）*/
/* ⛔⛔ 边界（v1.81 实测踩过）：`.wa-chead / .wa-msgs / .wa-input / .wa-bub /
   .wa-switch / .wa-sug / .wa-qbar / .wa-e2e` **全部 100% 存在于 `.phone.ip18` 内部**
   （两个手机窗：询盘档案窗 #inqPhone、工作组窗 #waPhone）—— 那是
   「客户在自己 Uwhats 客户端里看到的样子」，必须保持忠实。
   第一版我把它们当成"我方界面"重绘了，被 v1.57 的 J3 断言当场逮住
   （微信聊天底 #EDEDED 被我改成 transparent）。
   ⇒ 这一节只覆盖**席位面板**（.seat-*，我们自己的工作台；经探针确认在镜像之外）。
   ⇒ 触屏下限（§9b/§10）同样**排除镜像**：放大镜像里的按钮会改变客户界面的还原度。 */
#iqApp .seat-msgs { background: transparent; }
#iqApp .seat-msgs .wa-line .av { border-radius: 999px; background: var(--sf-ink-3); }
#iqApp .seat-msgs .wa-bub {
  border-radius: 18px; background: rgba(255, 255, 255, .92); border: 1px solid var(--lg-edge-2);
  box-shadow: inset 0 1px 0 var(--lg-hi-2), 0 1px 2px rgba(16, 18, 27, .05);
}
#iqApp .seat-msgs .wa-line.out .wa-bub {
  background: var(--sf-accent-grad); border-color: transparent; box-shadow: var(--sf-accent-glow);
}
#iqApp .seat-msgs .wa-line.out .wa-bub .tx,
#iqApp .seat-msgs .wa-line.out .wa-bub .who,
#iqApp .seat-msgs .wa-line.out .wa-bub .mt,
#iqApp .seat-msgs .wa-line.out .wa-bub .mt .tick { color: #fff; }
#iqApp .seat-msgs .wa-bub .who { color: var(--sf-accent-ink); font-weight: 600; }
#iqApp .seat-msgs .wa-bub .mt { color: var(--sf-ink-2); }
#iqApp .seat-msgs .wa-bub .mt .tick { color: var(--sf-accent); }
#iqApp .seat-msgs .wa-bub .src { background: var(--sf-accent-weak); color: var(--sf-accent-ink); border-radius: var(--r-sm); }
#iqApp .seat-msgs .wa-bub .att a { border-radius: var(--r-sm); background: rgba(17, 17, 22, .05); color: var(--sf-accent-ink); }
#iqApp .seat-msgs .wa-bub.pick { box-shadow: 0 0 0 2px var(--sf-accent), var(--lg-shadow); }
#iqApp .seat-msgs .wa-day span {
  background: rgba(255, 255, 255, .72); color: var(--sf-ink-2); border-radius: var(--r-cap);
  box-shadow: inset 0 1px 0 var(--lg-hi-2);
}
#iqApp .seat-msgs .wa-sys span { background: var(--sf-amber-weak); color: var(--sf-amber-ink); border-radius: var(--r-md); box-shadow: none; }
#iqApp .seat-msgs .wa-sys.warn span { background: var(--sf-red-weak); color: var(--sf-red-ink); }
#iqApp .phrase-pop {
  background: var(--lg-bg); border: 1px solid var(--lg-edge); border-radius: var(--r-md);
  -webkit-backdrop-filter: var(--lg-blur-css); backdrop-filter: var(--lg-blur-css);
  box-shadow: inset 0 1px 0 var(--lg-hi), var(--lg-shadow-2);
}
#iqApp .phrase-pop button:hover { background: var(--sf-accent-weak); color: var(--sf-accent-ink); }

/* 双席位（我方界面）*/
#iqApp .seat-col { background: rgba(255, 255, 255, .5); border-left: 1px solid var(--lg-edge-2); }
#iqApp .seat-split::after { background: var(--sf-line-2); }
#iqApp .seat-head { background: transparent; border-bottom: 1px solid var(--lg-edge-2); }
#iqApp .seat-ttl { font-weight: 600; letter-spacing: -.2px; }
#iqApp .seat-head select { border-radius: var(--r-cap); }
#iqApp .seat-head button { border-radius: var(--r-cap); color: var(--sf-ink-2); }
#iqApp .seat-head button:hover { background: rgba(17, 17, 22, .05); color: var(--sf-ink); }
#iqApp .seat-head button[aria-pressed="true"] { background: var(--sf-accent-weak); color: var(--sf-accent-ink); }
#iqApp .seat-tag { border-radius: var(--r-cap); }
#iqApp .seat-tag.biz { background: var(--sf-accent-weak); color: var(--sf-accent-ink); }
#iqApp .seat-tag.svc { background: var(--sf-violet-weak); color: #3B39B8; }
#iqApp .seat-as { background: var(--sf-amber-weak); color: var(--sf-amber-ink); border-radius: var(--r-sm); }
#iqApp .seat-as.warn { background: var(--sf-red-weak); color: var(--sf-red-ink); }
#iqApp .seat-as b { color: inherit; }
#iqApp .seat-msgs { background: transparent; }
#iqApp .seat-input { background: rgba(255, 255, 255, .62); border-top: 1px solid var(--lg-edge-2); }
#iqApp .seat-input textarea { border-radius: var(--r-md); }
#iqApp .seat-input .seat-send { background: var(--sf-accent-grad); border-radius: var(--r-cap); box-shadow: var(--sf-accent-glow); }
#iqApp .seat-biz .seat-input .seat-send { background: var(--sf-accent-grad); }
#iqApp .seat-receipt { border-radius: var(--r-md); background: rgba(255, 255, 255, .8); border: 1px solid var(--lg-edge-2); }
#iqApp .seat-receipt .r-ok { color: var(--sf-green-ink); }
#iqApp .seat-receipt .r-skip { color: var(--sf-amber-ink); }
#iqApp .seat-receipt .r-bad { color: var(--sf-red-ink); }
#iqApp .seat-foldbar { background: rgba(255, 255, 255, .7); border-color: var(--lg-edge-2); }

/* ------------------------------------------------------- §7 浮层 / 菜单 / Toast */
#iqApp .wa-modal { background: rgba(20, 22, 30, .34); }
#iqApp .wa-modal .box, #iqApp .wa-modal .box.wide {
  background: var(--lg-bg); border: 1px solid var(--lg-edge); border-radius: var(--r-xl);
  -webkit-backdrop-filter: var(--lg-blur-css); backdrop-filter: var(--lg-blur-css);
  box-shadow: inset 0 1px 0 var(--lg-hi), var(--lg-shadow-2);
}
#iqApp .wa-modal h3, #iqApp .wa-modal .box h3 { font-weight: 600; letter-spacing: -.3px; }
#iqApp .wa-modal .wa-err { border-radius: var(--r-md); background: var(--sf-red-weak); color: var(--sf-red-ink); border: 1px solid var(--sf-red-line); }
#iqApp .menu {
  background: var(--lg-bg); border: 1px solid var(--lg-edge); border-radius: var(--r-md);
  -webkit-backdrop-filter: var(--lg-blur-css); backdrop-filter: var(--lg-blur-css);
  box-shadow: inset 0 1px 0 var(--lg-hi), var(--lg-shadow-2); padding: 6px;
}
#iqApp .menu button { border-radius: var(--r-sm); color: var(--sf-ink); font-weight: 500; }
#iqApp .menu button:hover { background: var(--sf-accent-weak); color: var(--sf-accent-ink); }
#iqApp .toast {
  background: rgba(28, 28, 32, .88); color: #fff; border-radius: var(--r-cap); font-weight: 500;
  -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%);
  box-shadow: 0 18px 42px -18px rgba(0, 0, 0, .5);
}

/* ----------------------------------- §8 设备外观（只改机身，**不动**客户镜像内容）*/
/* ⑤ macOS 27「窗口统一更紧凑的圆角」+ 更内敛的钛金属质感 */
:root { --ip-radius: 42px; }
#iqApp .phone.ip18 {
  background: linear-gradient(118deg, #5C6067 0%, #B9BEC4 11%, #7A7F86 27%, #DDDFE3 44%, #8E939A 61%, #C6CAD0 77%, #63676D 100%);
  box-shadow:
    0 32px 70px -30px rgba(9, 15, 21, .58),
    0 2px 6px rgba(9, 15, 21, .24),
    inset 0 0 0 1px rgba(255, 255, 255, .38);
}
#iqApp .phone.ip18 .ip-island { background: #05070A; }
#iqApp .phone.ip18 .ip-home { background: rgba(17, 17, 22, .28); border-radius: var(--r-cap); }
#iqApp .phone.ip18 .phone-bar { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; font-weight: 600; letter-spacing: -.2px; }
#iqApp .phone.ip18 .ph-sig, #iqApp .phone.ip18 .ph-5g { font-variant-numeric: tabular-nums; }
/* 机身侧键：更细、更内敛 */
#iqApp .phone.ip18 .ip-btn { background: linear-gradient(180deg, #8A8F96, #5F646B); border-radius: 3px; }

/* --------------------------------- §9 其余栏目的通用容器（fin / duty / uw / sy / sync / kb / evi）*/
#iqApp .fin-kpi { background: var(--lg-bg); border: 1px solid var(--lg-edge-2); border-radius: var(--r-md); box-shadow: inset 0 1px 0 var(--lg-hi-2); }
#iqApp .fin-kpi .k b { color: var(--sf-ink); }
#iqApp .fin-kpi .k span { color: var(--sf-ink-2); }
#iqApp .fin-kpi .k.ok b { color: var(--sf-green-ink); }
#iqApp .fin-kpi .k.warn b { color: var(--sf-amber); }
#iqApp .fin-kpi .k.amber b { color: var(--sf-amber); }
#iqApp .fin-it { background: var(--lg-bg); border: 1px solid var(--lg-edge-2); border-radius: var(--r-md); box-shadow: inset 0 1px 0 var(--lg-hi-2); }
#iqApp .fin-it .fi-ic { border-radius: var(--r-sm); background: var(--sf-accent-weak); color: var(--sf-accent-ink); }
#iqApp .pay-st { border-radius: var(--r-cap); }
#iqApp .pay-st.pending { background: var(--sf-amber-weak); color: var(--sf-amber-ink); }
#iqApp .pay-st.verified, #iqApp .pay-st.paid { background: var(--sf-green-weak); color: var(--sf-green-ink); }
#iqApp .pay-st.disputed { background: var(--sf-red-weak); color: var(--sf-red-ink); }
#iqApp .pay-st.open { background: var(--sf-accent-weak); color: var(--sf-accent-ink); }
#iqApp .acc-head, #iqApp .acc-sync-box, #iqApp .acc-cred, #iqApp .sync-rows, #iqApp .duty-cmd, #iqApp .duty-hs,
#iqApp .duty-item, #iqApp .chatlib-row, #iqApp .itv, #iqApp .inq-note, #iqApp .uw-box, #iqApp .inq-sync-bar, #iqApp .inq-ev-box {
  border-radius: var(--r-md);
}
#iqApp .duty-item { background: var(--lg-bg); border: 1px solid var(--lg-edge-2); box-shadow: inset 0 1px 0 var(--lg-hi-2); }
#iqApp .di-chip, #iqApp .duty-lamp { border-radius: var(--r-cap); }
#iqApp .duty-lamp.lv-ok { background: var(--sf-green-bg, #34C759); }
#iqApp .duty-lamp.lv-info { background: var(--sf-accent); }
#iqApp .duty-lamp.lv-warn { background: #F0A000; }
#iqApp .duty-lamp.lv-critical { background: #FF3B30; }
#iqApp .di-chip.lv-ok { background: var(--sf-green-weak); color: var(--sf-green-ink); }
#iqApp .di-chip.lv-info { background: var(--sf-accent-weak); color: var(--sf-accent-ink); }
#iqApp .di-chip.lv-warn { background: var(--sf-amber-weak); color: var(--sf-amber-ink); }
#iqApp .di-chip.lv-critical { background: var(--sf-red-weak); color: var(--sf-red-ink); }
#iqApp .di-chip.lv-skip { background: var(--sf-bg-2); color: var(--sf-ink-2); }
#iqApp .sync-row { border-radius: var(--r-sm); }
#iqApp .sync-row.ok .sr-v { color: var(--sf-green-ink); }
#iqApp .sync-row.bad .sr-v { color: var(--sf-red-ink); }
#iqApp .sync-row.wait .sr-v { color: var(--sf-amber-ink); }
#iqApp .sync-row.skip .sr-v { color: var(--sf-ink-2); }
#iqApp .uw-box { background: var(--lg-bg); border: 1px solid var(--lg-edge-2); box-shadow: inset 0 1px 0 var(--lg-hi-2); }
#iqApp .uw-flow span, #iqApp .uw-tag, #iqApp .sy-chk { border-radius: var(--r-cap); }
#iqApp .uw-tag.on { background: var(--sf-green-weak); color: var(--sf-green-ink); border-color: var(--sf-green-line); }
#iqApp .uw-tag.off { background: var(--sf-bg-2); color: var(--sf-ink-2); }
#iqApp .uw-kv span, #iqApp .uw-note, #iqApp .uw-line input, #iqApp .uw-link-line input { border-radius: var(--r-sm); }
#iqApp .uw-hg { border-radius: var(--r-sm); background: rgba(255, 255, 255, .8); border-color: var(--lg-edge-2); }
#iqApp .uw-hg.good { background: var(--sf-green-weak); border-color: var(--sf-green-line); color: var(--sf-green-ink); }
#iqApp .uw-hg.bad, #iqApp .uw-err { background: var(--sf-red-weak); border-color: var(--sf-red-line); color: var(--sf-red-ink); }
#iqApp .uw-warn { border-radius: var(--r-md); background: var(--sf-red-weak); color: var(--sf-red-ink); border: 1px solid var(--sf-red-line); }
#iqApp .uw-warn.soft { background: var(--sf-accent-weak); color: var(--sf-accent-ink); border-color: var(--sf-accent-line); }
#iqApp .uw-warn .uw-mut { color: inherit; opacity: .82; }
#iqApp .uw-mut { color: var(--sf-ink-2); }
#iqApp .sy-secret { border-radius: var(--r-md); background: var(--sf-accent-weak); border: 1px solid var(--sf-accent-line); }
#iqApp .sy-secret code { border-radius: var(--r-sm); background: rgba(255, 255, 255, .9); color: var(--sf-accent-ink); }
#iqApp .wa-uw-warn { background: var(--sf-red-weak); color: var(--sf-red-ink); border-bottom-color: var(--sf-red-line); }
#iqApp .wa-uw-warn .uw-mut { color: var(--sf-red-ink); opacity: .8; }
#iqApp .if-trade, #iqApp .inq-trade-view, #iqApp .ai-draft, #iqApp .inq-chat-note { border-radius: var(--r-md); }
#iqApp .itv { background: rgba(255, 255, 255, .72); border: 1px solid var(--lg-edge-2); }
#iqApp .itv b { color: var(--sf-ink); }
#iqApp .itv span { color: var(--sf-ink-2); }
#iqApp .if-trade > summary, #iqApp .acc-head { border-radius: var(--r-md); }
#iqApp .uw-term-bar, #iqApp .uw-term { background: rgba(255, 255, 255, .8); border-color: var(--lg-edge-2); border-radius: var(--r-md); }
#iqApp .uw-dot { border-radius: var(--r-cap); background: var(--sf-ink-3); }
#iqApp .uw-dot.on { background: var(--sf-green); }
#iqApp .chatlib-row.pub { background: var(--sf-accent-weak); }
#iqApp .chatlib-row .cl-q { color: var(--sf-ink); }
#iqApp .chatlib-row .cl-a, #iqApp .chatlib-row .cl-meta { color: var(--sf-ink-2); }

/* ---- v1.82.0：与 Uwhats 的对齐体检条目（每条给「标题 + 结论 + 下一步」三级信息）----
   颜色都取了浅底 + 深字，保证白字/深字都 ≥4.5:1（--sf-green-ink 6.28:1 · --sf-amber-ink 6.92:1
   · --sf-accent-ink 7.79:1）。 */
#iqApp .uw-align { display: grid; gap: 8px; margin: 8px 0 10px; }
#iqApp .uw-ai { border: 1px solid var(--lg-edge-2); border-radius: var(--r-md); padding: 9px 11px; background: rgba(255, 255, 255, .74); }
#iqApp .uw-ai.lv-ok { border-color: var(--sf-green-line); background: var(--sf-green-weak); }
#iqApp .uw-ai.lv-warn { border-color: var(--sf-amber-line); background: var(--sf-amber-weak); }
#iqApp .uw-ai.lv-info { border-color: var(--sf-accent-line); background: var(--sf-accent-weak); }
#iqApp .uw-ai-top { display: flex; align-items: center; gap: 8px; }
#iqApp .uw-ai-top b { font-size: 13px; }
#iqApp .uw-ai-st { font-size: 11.5px; font-weight: 700; padding: 1px 8px; border-radius: var(--r-cap); flex: 0 0 auto; }
#iqApp .uw-ai.lv-ok .uw-ai-st { background: var(--sf-green-ink); color: #fff; }
#iqApp .uw-ai.lv-warn .uw-ai-st { background: var(--sf-amber-ink); color: #fff; }
#iqApp .uw-ai.lv-info .uw-ai-st { background: var(--sf-accent-ink); color: #fff; }
#iqApp .uw-ai-v { color: var(--sf-ink-2); margin-top: 3px; }
#iqApp .uw-ai-n { color: var(--sf-ink); margin-top: 4px; }

/* ---------------- §9b 触摸目标：桌面密集区下限 36px（WCAG 2.5.5 的桌面口径）*//* ⛔ 这不是审美问题：实测 43 个可见交互控件里有 26 个不足 36px，
   最小的「工作栏固定键」只有 30×21 —— 鼠标都要瞄准，触屏根本按不到。
   ⛔ 边界（与 §6 一致，措辞精确化）：
      · **冻结**——客户会看到的那部分：会话头 / 消息区 / 气泡 / 输入栏（含其中的图标按钮）。
        操作员看到的必须等于客户看到的，放大它就改变了"客户界面"的还原度。
      · **可调**——我们自己叠加在机身内的导航与开关：‹ 返回(.wx-back)、
        视图切换(.wa-switch .wa-sw-btn)。它们不属于客户端 UI，按我们的下限走。 */
#iqApp .btn.sm { min-height: var(--tap-dense); }
#iqApp .wk-pin {
  min-width: var(--tap-dense); min-height: var(--tap-dense);
  display: inline-flex; align-items: center; justify-content: center;
}
#iqApp .wk-rail-list button { min-height: var(--tap-dense); }
#iqApp .menu button { min-height: var(--tap-dense); }
#iqApp .seat-head button, #iqApp .seat-foldbar { min-height: var(--tap-dense); }
#iqApp .wk-tabs button { min-height: var(--tap-dense); }
#iqApp .uw-tag, #iqApp .sy-chk { min-height: var(--tap-dense); display: inline-flex; align-items: center; }
#iqApp .seat-head select, #iqApp .seat-input textarea, #iqApp .wa-switch .wa-sw-btn,
#iqApp .uw-idle-row select, #iqApp .uw-idle-row input, #iqApp .ev-head input[type=text] { min-height: var(--tap-dense); }
#iqApp .seat-input .seat-send { min-width: var(--tap-dense); min-height: var(--tap-dense); }
/* 机身内的「‹ 返回」是我们的导航键（不是客户端 UI），按我们的下限撑到 36。 */
#iqApp .phone.ip18 .wx-back {
  min-width: var(--tap-dense); min-height: var(--tap-dense);
  display: inline-flex; align-items: center; justify-content: flex-start;
}

/* ------------------------------- §10 触摸目标：按**指针类型**兜底（不只看视口宽）*/
/* ⛔ 1024px 恰好是 iPad mini 横屏：宽度过了断点但仍是手指操作。
   同样**排除镜像**。 */
@media (hover: none), (pointer: coarse) {
  #iqApp .btn, #iqApp .btn.sm, #iqLogin .lg-btn { min-height: var(--tap); }
  #iqApp .wk-pin, #iqApp .seat-head button, #iqApp .menu button, #iqApp .kb-tile, #iqApp .evi { min-height: var(--tap); }
  #iqApp .seat-input .seat-send { width: var(--tap); height: var(--tap); }
  #iqApp .wa-top button, #iqApp .wa-top a.wa-back, #iqApp .wk-rail-list button,
  #iqApp .wk-tabs button, #iqApp .seat-head select, #iqApp .seat-input textarea,
  #iqApp .uw-idle-row select, #iqApp .uw-idle-row input, #iqApp .uw-tag, #iqApp .sy-chk { min-height: var(--tap); }
}
/* 超窄屏才让步（320px 放不下三组 44px 控件）*/
@media (max-width: 340px) {
  #iqApp .btn, #iqApp .btn.sm { min-height: 36px; }
}

/* ------------------------------------------------ §11 外观：玻璃浓度滑块（③）*/
.iq-look { position: relative; }
#iqLook {
  min-width: 34px; padding: 0 10px;
}
#iqLook.on { background: var(--sf-accent-weak); border-color: var(--sf-accent-line); color: var(--sf-accent-ink); }
.iq-look-pop {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 90; width: 268px; padding: 14px 15px 12px;
  background: var(--lg-bg); border: 1px solid var(--lg-edge); border-radius: var(--r-lg);
  -webkit-backdrop-filter: var(--lg-blur-css); backdrop-filter: var(--lg-blur-css);
  box-shadow: inset 0 1px 0 var(--lg-hi), var(--lg-shadow-2);
  text-align: left;
}
.iq-look-pop h4 { margin: 0 0 4px; font-size: 13.5px; font-weight: 600; letter-spacing: -.2px; color: var(--sf-ink); }
.iq-look-pop p { margin: 0 0 12px; font-size: 12px; line-height: 1.6; color: var(--sf-ink-2); }
.iq-look-row { display: flex; align-items: center; gap: 10px; }
.iq-look-row span { font-size: 11.5px; color: var(--sf-ink-2); flex: 0 0 auto; }
/* 滑块本体：Apple 风格（轨道 capsule + 44px 热区 + 白色圆钮带投影）*/
#iqLookRange {
  -webkit-appearance: none; appearance: none; flex: 1 1 auto; min-width: 0;
  height: var(--tap); margin: 0; background: transparent; cursor: pointer;
}
#iqLookRange::-webkit-slider-runnable-track {
  height: 6px; border-radius: var(--r-cap);
  background: linear-gradient(90deg, rgba(10, 99, 230, .22) 0%, var(--sf-accent) var(--iq-look-fill, 60%), rgba(60, 60, 67, .18) var(--iq-look-fill, 60%));
}
#iqLookRange::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 26px; height: 26px; border-radius: 50%;
  background: #fff; border: .5px solid rgba(17, 17, 22, .12); margin-top: -10px;
  box-shadow: 0 2px 6px rgba(16, 18, 27, .26), 0 1px 1px rgba(16, 18, 27, .16);
}
#iqLookRange::-moz-range-track { height: 6px; border-radius: var(--r-cap); background: rgba(60, 60, 67, .18); }
#iqLookRange::-moz-range-progress { height: 6px; border-radius: var(--r-cap); background: var(--sf-accent); }
#iqLookRange::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: #fff; border: .5px solid rgba(17, 17, 22, .12); box-shadow: 0 2px 6px rgba(16, 18, 27, .26); }
#iqLookRange:focus-visible { outline: 2px solid var(--sf-accent); outline-offset: 4px; border-radius: var(--r-cap); }
.iq-look-act { display: flex; gap: 8px; margin-top: 10px; }
.iq-look-act button { flex: 1 1 0; min-height: 34px; font-size: 12.5px; }
/* 窄屏：顶栏放不下就藏起入口（手机仍可用默认玻璃浓度）*/
@media (max-width: 900px) { .iq-look { display: none; } }

/* --------------------------------------------------------- §12 减弱动效 */
/* ⛔ 必须写在文件最后：否则会被上面的动画/过渡声明盖掉。 */
@media (prefers-reduced-motion: reduce) {
  #iqApp *, #iqLogin *, #iqApp *::before, #iqApp *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  #iqApp button:active, #iqLogin button:active { transform: none; }
}

/* =============================================================================
   v1.83.0 询盘档案会话：聊天内容要能「上下移动」（真机量测后的修复）
   ---------------------------------------------------------------------------
   实测（1440×900）：手机窗只有 217×455，`.ip-screen` 可用高度 435px。
   而 `.inq-chat .wa-msgs { min-height: 300px }`（当年为了让空会话不塌）
   会让聊天区**撑破**容器 —— 300(聊天区) + 56(会话头) + 加密条 + 同步条 + 63(输入栏) > 435：

     · 聊天区被裁掉 68px（rect 521..821 vs 屏幕底 753）
     · ★ **输入栏整条跑出手机屏**（821..885）：用户根本看不到输入框
     · 滚轮落在被裁区域时会命中别的元素（elementFromPoint 实测命中 P.hint）

   ⇒ 改 min-height:0，让 flex 按剩余空间分配。
      `.wa-input` 是 `flex: 0 0 auto`，不会被压扁，输入栏必然回到屏幕内。

   同时把聊天区的 scroll-behavior 由 smooth 改回 auto：
     · IM 聊天要"跟手"；平滑滚动在翻历史时是拖累；
     · ★ 更关键：smooth 会把 `el.scrollTop = el.scrollHeight` 变成**动画起点**，
       同步读回仍是 0 ⇒「打开档案停在最新消息」会静默失效
       （实测 initialScrollTop 恒为 0，而 scroll-behavior:auto 的席位面板是 1728/1728，对照鲜明）。

   ⛔ 只改这两个「能力」属性，不动配色 / 圆角 / 尺寸 —— 镜像冻结 7 条断言继续成立。
   ========================================================================== */
#iqApp .phone.ip18 .wa-msgs {
  /* 所有「客户镜像」手机窗的聊天区统一跟手滚动。
     ⛔ smooth 会把 `el.scrollTop = el.scrollHeight` 变成**动画起点**，同步读回仍是 0
        ⇒「打开就停在最新消息」会静默失效（实测 archive 会话 initialScrollTop 恒为 0，
           而同页 scroll-behavior:auto 的席位面板是 1818/1818 —— 对照鲜明）。
     ★ 滚动跟手度不是"镜像外观"：客户在真 Uwhats 客户端里就是原生瞬时滚动，
       所以 auto 反而更忠实。镜像冻结 7 条断言（配色/圆角/尺寸）不受影响。 */
  scroll-behavior: auto;
}
#iqApp .inq-chat .wa-msgs {
  min-height: 0;              /* 不许撑破机身（矮机身会把输入栏挤出屏幕） */
}

/* ==================== v1.94.0 值班席位增强 ====================
   ① 发言身份「可选可输」：下拉选账号 + 旁边一个手填框（两者互斥，见 iq.js seatBindIdentityInputs）
   ② 气泡操作：✎ 改字 / ↑ ↓ 调序
   ③ 协同二维码弹窗（给 Uwhats 同事扫码进来支援） */
.seat-head .seat-name {
  flex: 1 1 92px; min-width: 78px; font-size: 12px; padding: 3px 6px;
  border-radius: 7px; border: 1px dashed var(--wa-line); background: #FFFEF7; color: var(--wa-ink);
}
.seat-head .seat-name::placeholder { color: #9AA7AE; }
.seat-tag.collab { background: rgba(14, 165, 233, .16); color: #075985; }
.seat-tag.edit { background: rgba(245, 158, 11, .18); color: #8A5A08; }
.seat-tag.move { background: rgba(100, 116, 139, .16); color: #44515C; }
.msg-ops { display: inline-flex; gap: 3px; margin-right: 6px; vertical-align: middle; }
.msg-ops .op {
  width: 20px; height: 20px; padding: 0; line-height: 1; cursor: pointer; font-size: 11px;
  border: 1px solid var(--wa-line); border-radius: 5px; background: #fff; color: var(--wa-sub);
}
.msg-ops .op:hover { border-color: var(--wa-teal); color: var(--wa-teal); }
.sf-mask { position: fixed; inset: 0; z-index: 60; background: rgba(15, 27, 34, .55); display: flex; align-items: center; justify-content: center; }
.sf-mask[hidden] { display: none; }
.sf-card { width: min(600px, calc(100vw - 32px)); background: #fff; color: var(--wa-ink); border-radius: 14px; box-shadow: 0 18px 50px rgba(10, 25, 35, .28); overflow: hidden; }
.sf-head { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; border-bottom: 1px solid var(--wa-line); }
.sf-head b { font-size: 14px; }
.sf-head button { border: 0; background: none; font-size: 20px; line-height: 1; cursor: pointer; color: var(--wa-sub); }
.sf-body { display: flex; gap: 14px; padding: 14px; }
.sf-qr { background: #fff; border: 1px solid var(--wa-line); border-radius: 10px; flex: 0 0 auto; }
.sf-side { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.sf-t { font-weight: 700; font-size: 13px; }
.sf-s { font-size: 12px; color: var(--wa-sub); line-height: 1.55; }
.sf-side input, .sf-side textarea {
  width: 100%; font-size: 12.5px; padding: 6px 8px; border-radius: 7px;
  border: 1px solid var(--wa-line); background: #fff; color: var(--wa-ink);
}
.sf-side textarea { min-height: 64px; resize: vertical; }
.sf-row { display: flex; gap: 6px; align-items: center; }
.sf-row input { flex: 1 1 auto; min-width: 0; font-size: 11px; }
.sf-tip { font-size: 11.5px; line-height: 1.55; color: var(--wa-sub); background: #F8FAFB; border: 1px solid var(--wa-line); border-radius: 8px; padding: 7px 9px; }
.sf-tip b { color: #8A5A08; }
@media (max-width: 620px) { .sf-body { flex-direction: column; align-items: center; } .sf-side { width: 100%; } }