/* ============================================================
   私域工作台 · 网页版（PC 端）
   配色沿用小程序端：浅底 #f2f3f5 / 白卡 #fff / 主色 #2b7de9
   ============================================================ */

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font: 14px/1.6 -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #1f2329; background: #f2f3f5;
}
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }
a { color: #2b7de9; }
.hidden { display: none !important; }
.muted { color: #8a8f99; }
.small { font-size: 12px; }
.green { color: #1a9c5b; }
.amber { color: #c27b00; }
.red { color: #ef4444; }

/* ============ 连接诊断条 ============ */
#diag {
  position: fixed; left: 0; right: 0; top: 0; z-index: 99;
  background: #1f2329; color: #d5d8dc; font-size: 12px;
  padding: 7px 14px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
#diag .step { display: inline-flex; align-items: center; gap: 5px; }
#diag .dot { width: 8px; height: 8px; border-radius: 50%; background: #6b7280; }
#diag .dot.ok { background: #22c55e; }
#diag .dot.err { background: #ef4444; }
#diag .dot.run { background: #eab308; }
#diag .dot.warn { background: #f59e0b; }
#diag .close {
  margin-left: auto; background: none; border: 1px solid #4b5563; color: #d5d8dc;
  border-radius: 4px; padding: 1px 8px;
}

/* ============ 登录 ============ */
#login { height: 100%; display: flex; align-items: center; justify-content: center; padding-top: 40px; }
.login-card {
  width: 380px; background: #fff; border-radius: 12px; padding: 34px 32px;
  box-shadow: 0 8px 30px rgba(0,0,0,.08);
}
.login-card h1 { margin: 0 0 6px; font-size: 20px; }
.login-card .sub { color: #8a9099; font-size: 13px; margin-bottom: 22px; }
.login-card label { display: block; font-size: 13px; color: #4a5058; margin: 14px 0 6px; }
.login-card input {
  width: 100%; height: 40px; border: 1px solid #dcdfe6; border-radius: 8px;
  padding: 0 12px; font-size: 14px; outline: none;
}
.login-card input:focus { border-color: #2b7de9; }
.login-card .go {
  width: 100%; height: 42px; margin-top: 22px; border: none; border-radius: 8px;
  background: #2b7de9; color: #fff; font-size: 15px;
}
.login-card .go:disabled { opacity: .6; cursor: not-allowed; }
.login-card .err {
  color: #ef4444; font-size: 13px; margin-top: 12px; min-height: 18px;
  white-space: pre-wrap; word-break: break-all; line-height: 1.6;
}
.login-card .boot-hint {
  margin-top: 14px; background: #fff8e6; border: 1px solid #ffe0a3; border-radius: 8px;
  padding: 12px 14px; font-size: 12.5px; color: #6b5a1e; line-height: 1.9;
}
.login-card .boot-hint .bh-t { font-weight: 700; color: #8a6d00; margin-bottom: 6px; }
.login-card .boot-hint .bh-i b { color: #2b7de9; }
.login-card .boot-hint .bh-x { color: #8a9099; font-size: 12px; padding-left: 4px; }

/* 演示模式提示条 */
.login-card .mock-tip {
  margin-top: 14px; padding: 10px 12px; border-radius: 8px;
  background: #fff7e6; border: 1px solid #ffe0a3;
  color: #8a6d00; font-size: 12.5px; line-height: 1.75; text-align: left;
}
.login-card .mock-tip .mt-t { font-weight: 700; margin-bottom: 4px; }
.login-card .mock-tip code {
  background: #fff; border: 1px solid #ffe0a3; border-radius: 4px;
  padding: 1px 5px; font-size: 12px; color: #8a6d00;
}
/* 顶栏演示模式徽标 */
#tagMock {
  display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 10px;
  background: #fff7e6; border: 1px solid #ffe0a3; color: #8a6d00;
  font-size: 11px; font-weight: 700; vertical-align: middle;
}
.login-card .boot-hint code {
  background: #fff; border: 1px solid #eee; border-radius: 4px; padding: 0 4px;
  font-size: 12px; color: #c0392b;
}
.login-card .go.ghost {
  margin-top: 10px; height: 34px; background: #fff; color: #2b7de9;
  border: 1px solid #2b7de9; font-size: 13.5px;
}
.login-card .go.ghost:disabled { opacity: .5; }
.login-card .tip {
  color: #8a9099; font-size: 12px; margin-top: 16px; line-height: 1.7;
  border-top: 1px dashed #e6e8eb; padding-top: 12px;
}

/* ============ 主框架 ============ */
#app { height: 100%; padding-top: 33px; display: flex; }
#side {
  width: 210px; flex: none; background: #fff; border-right: 1px solid #e6e8eb;
  display: flex; flex-direction: column;
}
.side-brand { padding: 15px 18px 12px; font-weight: 600; font-size: 15px; border-bottom: 1px solid #f0f1f3; position: relative; }
#btnFold {
  position: absolute; right: 8px; top: 12px; width: 22px; height: 22px;
  border: 1px solid #e6e8eb; background: #fff; border-radius: 6px; cursor: pointer;
  color: #8a8f99; font-size: 12px; line-height: 1; padding: 0;
}
#btnFold:hover { color: #2b7de9; border-color: #2b7de9; }
.side-brand small { display: block; font-weight: 400; color: #8a8f99; font-size: 12px; margin-top: 2px; }
/* 040：左上角版本号徽章 —— 一眼看到现在跑的是哪一版 */
.ver-chip { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 8px; background: #eef4fd; border: 1px solid #cfe0f7; color: #2b7de9; font-size: 10px; font-weight: 500; vertical-align: 2px; line-height: 14px; }
#side.mini .ver-chip { display: none; }
#nav { flex: 1; padding: 10px; overflow-y: auto; }
.nav-item {
  display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 8px;
  color: #4a5058; font-size: 14px; cursor: pointer; margin-bottom: 2px; user-select: none;
}
.nav-item:hover { background: #f7f8fa; }
.nav-item.on { background: #eaf2fd; color: #2b7de9; font-weight: 500; }
.nav-item .ico { width: 18px; text-align: center; }
.nav-item .dot {
  margin-left: auto; background: #ef4444; color: #fff; font-size: 11px;
  border-radius: 9px; padding: 0 6px; min-width: 18px; text-align: center; line-height: 17px;
}
.side-me { padding: 12px 14px; border-top: 1px solid #f0f1f3; color: #8a8f99; font-size: 12px; line-height: 1.5; }
.side-me b { display: block; color: #1f2329; font-size: 13px; font-weight: 500; }

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar {
  height: 52px; background: #fff; border-bottom: 1px solid #e6e8eb;
  display: flex; align-items: center; padding: 0 18px; gap: 12px; flex: none;
}
.topbar h2 { margin: 0; font-size: 15px; font-weight: 600; }
.topbar .sub { color: #8a8f99; font-size: 12px; }
.topbar .spacer { margin-left: auto; }

/* 108：移交 / 转回滚动提醒条（顶栏正下方，红字从右往左滚）——
   客服把客户移交给你、你还没回 → 一直滚；回了 → 这一条自动消失。 */
.notice-bar { height: 30px; flex: none; overflow: hidden; background: #fff5f5;
              border-bottom: 1px solid #ffdfdf; display: flex; align-items: center;
              cursor: pointer; }
/* 152：hover 时给个底色，一眼看得出「这条能点」 */
.notice-bar:hover { background: #ffe9e9; }
/* 151（老邱 2026-10-22）：多条提醒改成「一条完整滚完再滚下一条」。
   时长由 JS 按文本长度算好写进 --notice-dur（约 70px/s），每条都能看全整句，
   不再是固定 24s —— 长句子会一晃而过、多条拼成一长串也看不清是谁。 */
.notice-bar .notice-txt { display: inline-block; white-space: nowrap; padding-left: 100%;
                          color: #e03131; font-size: 13px; font-weight: 600;
                          animation: noticeScroll var(--notice-dur, 24s) linear 1; }
.notice-bar .notice-txt:hover { animation-play-state: paused; }
@keyframes noticeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

.btn {
  border: 1px solid #dcdfe6; background: #fff; border-radius: 6px;
  padding: 5px 12px; font-size: 13px; color: #4a5058;
}
.btn:hover { border-color: #c8ccd2; }
.btn.on { background: #eaf2fd; border-color: #2b7de9; color: #2b7de9; }
.btn.primary { background: #2b7de9; border-color: #2b7de9; color: #fff; }
.btn.primary:hover { background: #1f6fd4; }
.btn.danger { color: #ef4444; border-color: #f5c2c2; }
.btn.sm { padding: 3px 9px; font-size: 12px; border-radius: 5px; }
.btn:disabled { opacity: .6; cursor: not-allowed; }

/* ============ 视图容器 ============ */
.view { flex: 1; overflow-y: auto; padding: 16px 18px 20px; }
.view.fill { display: flex; flex-direction: column; overflow: hidden; }
.view::-webkit-scrollbar, .scroll::-webkit-scrollbar { width: 8px; }
.view::-webkit-scrollbar-thumb, .scroll::-webkit-scrollbar-thumb { background: #dcdfe6; border-radius: 4px; }

.card { background: #fff; border: 1px solid #eaecf0; border-radius: 10px; padding: 14px 16px; margin-bottom: 12px; }
.card.tight { padding: 10px 12px; }
.card.pad0 { padding: 0; overflow: hidden; }
.sec-t { font-weight: 600; font-size: 14px; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.sec-t .more { margin-left: auto; font-weight: 400; font-size: 12px; color: #8a8f99; }
.sec-t.bar { margin-top: 4px; }

.grid { display: flex; gap: 12px; flex-wrap: wrap; }
.kpi { flex: 1; min-width: 110px; background: #fff; border: 1px solid #eaecf0; border-radius: 10px; padding: 13px 16px; }
.kpi .n { font-size: 24px; font-weight: 600; line-height: 1.2; }
.kpi .t { font-size: 12px; color: #8a8f99; margin-top: 2px; }
.kpi.hot .n { color: #ef4444; }
.kpis { display: flex; gap: 12px; flex: none; }

/* ============ 两栏布局 ============ */
.pane { display: flex; gap: 12px; flex: 1; min-height: 0; margin-top: 12px; }
.pane.nomargin { margin-top: 0; }
.col {
  background: #fff; border: 1px solid #eaecf0; border-radius: 10px;
  display: flex; flex-direction: column; min-height: 0; min-width: 0;
}
.col-hd {
  height: 46px; flex: none; display: flex; align-items: center; padding: 0 14px;
  border-bottom: 1px solid #eef0f3; font-weight: 600; font-size: 14px; gap: 8px;
}
.col-hd .cnt { color: #8a8f99; font-weight: 400; font-size: 12px; }
.col-hd .acts { margin-left: auto; display: flex; gap: 6px; font-weight: 400; }
/* 068：会话列表头缩小版 —— 只给左栏列表用，别影响右栏聊天头 */
.col-hd.slim { height: 34px; padding: 0 12px; font-size: 12px; gap: 6px; }
/* 068：筛选板块 —— 类别/归属地/项目收进来，默认收起 */
.fltr-bar { flex: none; display: flex; align-items: center; gap: 8px; padding: 6px 12px 2px; }
.fltr-btn { border: 1px solid var(--line, #e5e7eb); background: #fff; color: #6b7280;
            border-radius: 8px; font-size: 12px; padding: 3px 10px; cursor: pointer; }
.fltr-btn:hover { color: var(--primary, #2563eb); border-color: var(--primary, #2563eb); }
.fltr-btn.open { color: var(--primary, #2563eb); border-color: var(--primary, #2563eb); background: #f0f6ff; }
.fltr-btn.on { color: #b45309; border-color: #f5d7a3; background: #fff7e8; }
.fltr-n { font-weight: 600; }
.fltr-clr { border: 0; background: none; color: #9aa1ab; font-size: 12px; cursor: pointer; padding: 2px 4px; }
.fltr-clr:hover { color: #d64541; }
.fltr { flex: none; padding: 4px 12px 8px; border-bottom: 1px solid #eef0f3; }
.fltr .chip-bar { padding: 2px 0; }
/* 068：草稿标记 —— 会话行右上角橙标 + 第二行草稿预览 */
.badge.draft-b { background: #fff7e8; border: 1px solid #f5d7a3; color: #b45309; }
/* 070：未读条数（客户发了、客服还没点开看） */
.badge.unread-b { background: #e8f0fe; border: 1px solid #b7d0f8; color: #1a56c4; font-weight: 600; }
/* 070：最后一条客服消息下方的「客户已读 / 客户未读」 */
.read-tag { text-align: right; font-size: 12px; color: #9a9a9a; margin: 2px 4px 6px 0; }
.read-tag.done { color: #2b7de9; }
.dft-line { color: #b45309; }
.dft-line .dft-t { opacity: .85; }
.scroll { flex: 1; overflow-y: auto; }
.empty { color: #a0a6ad; text-align: center; padding: 46px 20px; font-size: 13px; line-height: 1.9; }

/* ============ 列表项 ============ */
.item { padding: 11px 14px; border-bottom: 1px solid #f5f6f8; cursor: pointer; }
.item:hover { background: #fafbfc; }
.item.active { background: #eaf2fd; }
.item .r1 { display: flex; align-items: center; gap: 8px; }
.item .nm { font-weight: 500; }
/* 072：会话列表里的客户头像（授权抓到的那张）；没有头像时用名字首字占位 */
.item .av-mini { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: 0 0 28px; background: #eceef1; }
.item .av-mini.av-none { display: inline-flex; align-items: center; justify-content: center;
  color: #8a8f99; font-size: 12px; font-weight: 600; }
.item .last {
  color: #8a8f99; font-size: 12px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; margin-top: 3px;
}
.item .r1 .badge { margin-left: auto; background: #ef4444; color: #fff; font-size: 11px; border-radius: 9px; padding: 1px 7px; }
.avatar {
  width: 36px; height: 36px; border-radius: 8px; background: #2b7de9; color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 600; flex: none;
}
.srow { display: flex; gap: 10px; align-items: center; padding: 11px 14px; border-bottom: 1px solid #f5f6f8; cursor: pointer; }
.srow:hover { background: #fafbfc; }
.srow.active { background: #eaf2fd; }
.srow .smain { flex: 1; min-width: 0; }
.srow .sname { font-weight: 500; }
.srow .slast { color: #8a8f99; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ============ 标签 / 徽标 ============ */
.tag {
  display: inline-block; font-size: 11.5px; border-radius: 4px; padding: 1px 7px;
  background: #f2f3f5; color: #6b7280; vertical-align: middle;
}
.st-sent { background: #fff7e6; color: #c27b00; }
.st-filled { background: #eaf2fd; color: #2b7de9; }
.st-confirmed { background: #e8f7ee; color: #1a9c5b; }
.st-rejected { background: #fdecec; color: #d9534f; }
.st-new { background: #fdecec; color: #d9534f; }
.st-replied { background: #eaf2fd; color: #2b7de9; }
.st-closed { background: #f2f3f5; color: #8a8f99; }
.kf-chip { font-size: 11px; color: #8a8f99; background: #f2f3f5; border-radius: 4px; padding: 1px 6px; }
.kf-chip.none { color: #c27b00; background: #fff7e6; }
.flag { font-size: 11px; color: #fff; background: #ef4444; border-radius: 9px; padding: 1px 7px; }
.auth-chip { font-size: 11px; border-radius: 4px; padding: 1px 6px; }
.auth-chip.on { color: #1a9c5b; background: #e8f7ee; }
.auth-chip.off { color: #c27b00; background: #fff7e6; }

/* 043：授权明细（头像 / 昵称 / 手机号 / 城市，逐项打勾）+ 会话表头的客户头像 */
.auth-detail { display: inline-flex; gap: 4px; align-items: center; margin-right: 2px; }
.auth-i { font-size: 11px; border-radius: 10px; padding: 1px 7px; border: 1px solid transparent; white-space: nowrap; cursor: default; }
.auth-i i { font-style: normal; font-weight: 700; margin-right: 3px; }
.auth-i.ok { color: #17784a; background: #e8f7ee; border-color: #bfe8d2; }
.auth-i.no { color: #9aa0a6; background: #f5f6f7; border-color: #e5e7eb; }
.ci-av { width: 30px; height: 30px; border-radius: 50%; background: #e9f0fb; color: #2b7de9;
  display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
  margin-right: 8px; flex: 0 0 30px; position: relative; cursor: pointer; }
.ci-av i { font-style: normal; font-weight: 700; font-size: 13px; }
.ci-av .av-img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; background: #fff; }

/* ============ 筛选 ============ */
.chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.chip {
  border: 1px solid #e2e4e8; background: #fff; border-radius: 16px; padding: 3px 12px;
  font-size: 12.5px; color: #4a5058; cursor: pointer; user-select: none;
}
.chip:hover { border-color: #c8ccd2; }
.chip.on { background: #eaf2fd; border-color: #2b7de9; color: #2b7de9; }
.inp {
  border: 1px solid #dcdfe6; border-radius: 8px; padding: 7px 11px; font-size: 13.5px;
  outline: none; width: 100%;
}
.inp:focus { border-color: #2b7de9; }
select.inp { height: 34px; padding: 0 8px; }
.filter-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.filter-row .lb { color: #8a8f99; font-size: 12.5px; width: 52px; flex: none; }

/* ============ 表格 ============ */
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tbl th {
  text-align: left; font-weight: 500; color: #8a8f99; font-size: 12px;
  padding: 7px 10px; border-bottom: 1px solid #eef0f3; white-space: nowrap;
}
table.tbl td { padding: 8px 10px; border-bottom: 1px solid #f5f6f8; }
table.tbl tbody tr:last-child td { border-bottom: none; }
table.tbl tbody tr:hover { background: #fafbfc; }

/* ============ 聊天 ============ */
.msgs { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
/* ===== 066：引用 / 撤回（按钮平时藏着，鼠标移到那条消息上才出来，不吵） ===== */
.msg { position: relative; }
.qbtn, .rbtn { position: absolute; bottom: -6px; opacity: 0; transition: opacity .12s;
               border: 1px solid #dfe3e8; background: #fff; color: #8a8f99;
               border-radius: 10px; font-size: 11px; padding: 1px 7px; cursor: pointer; z-index: 2; }
.qbtn { right: -46px; }
.rbtn { left: -46px; }
.msg:hover .qbtn, .msg:hover .rbtn { opacity: 1; }
.qbtn:hover, .rbtn:hover { color: #2b7de9; border-color: #2b7de9; }
.quote-bar { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; padding: 6px 10px;
             background: #f4f6f9; border-left: 3px solid #2b7de9; border-radius: 6px; font-size: 12px; }
.qb-t { color: #2b7de9; flex: none; }
.qb-x { color: #8a8f99; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qb-c { border: 0; background: none; color: #8a8f99; cursor: pointer; font-size: 13px; flex: none; }
.qu-in { display: block; border-left: 3px solid rgba(255,255,255,.55); padding: 2px 0 2px 8px; margin-bottom: 4px; }
.qu-t { display: block; opacity: .85; font-size: 12px; }
.qu-b { display: block; }
.msg.kf .qu-in { border-left-color: rgba(255,255,255,.6); }

.msg { display: flex; flex-direction: column; max-width: 68%; }
.msg.kf { align-self: flex-end; align-items: flex-end; }
.msg.me { align-self: flex-start; align-items: flex-start; }
.msg.ask { align-self: center; align-items: center; max-width: 84%; }
.msg .bubble { padding: 9px 13px; border-radius: 10px; white-space: pre-wrap; word-break: break-word; }
.msg.me .bubble { background: #f2f3f5; color: #1f2329; }
.msg.kf .bubble { background: #2b7de9; color: #fff; }
.msg.ask .bubble { background: #fff8e6; color: #8a6d00; border: 1px solid #ffe0a3; font-size: 13px; }
.msg .bubble.link { word-break: break-all; text-decoration: underline; }
.msg img { max-width: 240px; border-radius: 8px; display: block; cursor: zoom-in; }
.msg video { max-width: 320px; border-radius: 8px; display: block; background: #000; }
.msg .tm { font-size: 11px; color: #a0a6ad; margin-top: 3px; }

/* 每条消息自带的「复制」按钮：默认淡淡地显示，鼠标移到这条消息上时变清晰 */
.msg .cp {
  margin-top: 4px; font-size: 11px; line-height: 1.6; color: #9aa1a9;
  background: #fff; border: 1px solid #e6e8eb; border-radius: 6px;
  padding: 1px 8px; cursor: pointer; opacity: .45; transition: opacity .15s, color .15s;
}
.msg:hover .cp { opacity: 1; }
.msg .cp:hover { color: #2b7de9; border-color: #b8d5f8; background: #eaf2fd; }
.msg .cp.on { opacity: 1; color: #1a9c5b; border-color: #b7e6cd; background: #eafaf1; }

.composer {
  flex: none; border-top: 1px solid #eef0f3; padding: 10px 12px;
  display: flex; gap: 8px; align-items: flex-end;
}
.composer textarea {
  flex: 1; height: 62px; resize: none; border: 1px solid #dcdfe6; border-radius: 8px;
  padding: 8px 12px; font: inherit; outline: none;
}
.composer textarea:focus { border-color: #2b7de9; }
.composer .acts { display: flex; flex-direction: column; gap: 6px; }
.composer button { border: none; border-radius: 8px; padding: 0 18px; height: 34px; font-size: 14px; }
.composer .send { background: #2b7de9; color: #fff; height: 62px; }
.composer .send:disabled { opacity: .5; cursor: not-allowed; }
.composer .pic { background: #fff; border: 1px solid #dcdfe6; color: #4a5058; }

/* ============ 详情面板（键值行） ============ */
.kv { display: flex; align-items: center; padding: 6px 0; font-size: 13px; border-bottom: 1px dashed #f2f3f5; }
.kv:last-child { border-bottom: none; }
.kv .k { width: 92px; flex: none; color: #8a8f99; font-size: 12.5px; }
.kv .v { flex: 1; min-width: 0; word-break: break-all; }
.log-line { font-size: 13px; }
.log-sub { font-size: 12px; color: #8a8f99; }
.log { padding: 7px 0; border-bottom: 1px dashed #f2f3f5; }
.log:last-child { border-bottom: none; }

/* ============ 弹窗 ============ */
.mask {
  position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 300;
  background: rgba(31,35,41,.45); display: flex; align-items: center; justify-content: center;
}
.dlg {
  background: #fff; border-radius: 12px; width: 520px; max-width: 92vw; max-height: 84vh;
  display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,.18);
}
.dlg-hd { padding: 14px 18px; border-bottom: 1px solid #eef0f3; font-weight: 600; display: flex; align-items: center; }
.dlg-hd .x { margin-left: auto; color: #8a8f99; cursor: pointer; font-size: 16px; }
.dlg-bd { padding: 16px 18px; overflow: auto; font-size: 13.5px; }
.dlg-ft { padding: 12px 18px; border-top: 1px solid #eef0f3; display: flex; gap: 8px; justify-content: flex-end; }
/* 162v：半模态（登记线索 / 填反馈这类表单）—— 遮罩只压暗提示，不接鼠标事件，
   后面的会话框照样能点、能选字复制、能滚动。弹窗本体仍然正常接收点击。 */
.mask.light { background: rgba(31,35,41,.16); pointer-events: none; }
.mask.light .dlg { pointer-events: auto; box-shadow: 0 16px 48px rgba(0,0,0,.28); }
/* 162v：弹窗标题栏的「收起」按钮 —— 点一下弹窗缩成一条挪到右上角，会话界面整个露出来 */
.dlg-hd .fold { margin-left: auto; color: #8a8f99; cursor: pointer; font-size: 16px; padding: 0 4px; user-select: none; }
.dlg-hd .fold:hover { color: #2f7cf6; }
.mask.light .dlg-hd .x { margin-left: 8px; }          /* 有「收起」之后，✕ 就不用再撑到最右了 */
.dlg.mini .dlg-bd, .dlg.mini .dlg-ft { display: none; }
.dlg.mini { width: 300px !important; }
/* 162v：把桌面文件拖到会话区上方时的高亮提示（松手即发送） */
.drop-on { outline: 2px dashed #2f7cf6; outline-offset: -4px; background: rgba(47,124,246,.06); border-radius: 8px; }
.pick-list { display: flex; flex-wrap: wrap; gap: 8px; }

/* ============ Toast ============ */
.toast {
  position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%);
  background: rgba(31,35,41,.9); color: #fff; padding: 9px 18px; border-radius: 8px;
  font-size: 13px; z-index: 999; opacity: 0; transition: opacity .2s; pointer-events: none;
}
.toast.show { opacity: 1; }

/* ============ 提醒设置面板 ============ */
.alert-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 4px; border-bottom: 1px solid #f0f2f5; cursor: pointer;
}
.alert-row:last-of-type { border-bottom: 0; }
.alert-row:hover { background: #fafbfc; }
.ar-txt { flex: 1; min-width: 0; }
.ar-txt b { font-size: 13.5px; color: #1f2329; }
.ar-sub { font-size: 12px; color: #8a8f99; margin-top: 3px; line-height: 1.5; }
.sw {
  flex: none; min-width: 40px; text-align: center; font-size: 12px;
  padding: 3px 10px; border-radius: 20px;
  background: #f2f3f5; color: #8a8f99; border: 1px solid #e5e7eb;
}
.sw.on { background: #eaf2fd; color: #2b7de9; border-color: #b9d4f7; }
.alert-hint {
  margin-top: 12px; padding: 10px 12px; border-radius: 8px;
  background: #f7f9fc; border: 1px solid #e8eef7;
  font-size: 12px; color: #6b7280; line-height: 1.7;
}
.alert-hint b { color: #2b7de9; }

/* ---------- 通用表单弹窗（成员 / 部门 / 话术共用） ---------- */
.fd-row { margin-bottom: 12px; }
.fd-lb { display: block; font-size: 12px; color: #4a5058; margin-bottom: 5px; }
.fd-lb .req { color: #ef4444; font-weight: 400; }
.fd-inp { width: 100%; box-sizing: border-box; border: 1px solid #dcdfe3; border-radius: 6px;
          padding: 7px 9px; font-size: 13px; color: #1f2329; background: #fff; }
.fd-inp:focus { border-color: #2b7de9; outline: none; }
textarea.fd-inp { resize: vertical; line-height: 1.6; }
.fd-note { font-size: 11px; color: #8a8f99; margin-top: 4px; line-height: 1.6; }
/* 162x：字段级提醒 —— 黄字（一般提示）/ 红字（不合作这类要紧的）。只有传了 warn 的字段才有 */
.fd-warn { font-size: 12px; margin-top: 5px; line-height: 1.5; color: #a2650a;
           background: #fff8e6; border: 1px solid #f5dfa8; border-radius: 6px; padding: 6px 9px; }
.fd-warn.bad { color: #b4232a; background: #fdecec; border-color: #f6cfcf; font-weight: 600; }
.fd-checks { max-height: 180px; overflow-y: auto; border: 1px solid #e8eaed; border-radius: 6px; padding: 6px; }
.fd-ck { display: inline-flex; align-items: center; gap: 5px; margin: 3px 6px 3px 0; padding: 4px 10px;
         border: 1px solid #e3e6ea; border-radius: 999px; font-size: 12px; cursor: pointer; color: #4a5058; }
.fd-ck.on { background: #eaf2fd; border-color: #2b7de9; color: #2b7de9; }
.fd-ck input { margin: 0; }

/* ---------- 成员管理表格 ---------- */
.mrow { display: grid; grid-template-columns: 1.1fr .7fr .9fr .9fr 1fr .7fr .6fr 1.6fr;
        gap: 8px; padding: 9px 10px; border-bottom: 1px solid #f0f1f3; font-size: 13px; align-items: center; }
.mrow-hd { font-weight: 600; color: #8a8f99; font-size: 12px; background: #fafbfc; border-radius: 6px 6px 0 0; }
.mrow .nm { font-weight: 500; }
.mrow .mono { font-family: ui-monospace, Consolas, monospace; font-size: 12px; color: #6b7280; }
.card-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 14px; }
/* 071：转介绍页可点的分享人名字（点开他自己的会话核对） */
.card-hd .lk { cursor: pointer; }
.card-hd .lk:hover { text-decoration: underline; color: var(--primary, #2563eb); }
.card-hd .ops, .col-hd .ops { margin-left: auto; display: flex; gap: 5px; flex-wrap: wrap; font-weight: 400; }
.card-bd { font-size: 13px; color: #4a5058; line-height: 1.7; white-space: pre-wrap; }
.qtxt { color: #4a5058; word-break: break-all; }

/* ---------- 客户类别 ---------- */
.tag-chip { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 4px;
            font-size: 11px; font-weight: 400; vertical-align: middle; }
.tag-chip.good { background: #e8f7ee; color: #1a9c5b; border: 1px solid #c6ecd7; }
.tag-chip.bad { background: #fdecec; color: #b4232a; border: 1px solid #f6cfcf; }
.chip-bar { display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
            padding: 8px 12px; border-bottom: 1px solid #f0f1f3; }
.chip-bar .chip { cursor: pointer; }

/* ---------- 列表行（转介绍 / 订阅 / 台账 / 模板字段） ---------- */
.log-row, .ref-row, .tp-row { display: grid; gap: 8px; padding: 7px 0;
                              border-bottom: 1px solid #f4f5f7; font-size: 13px; align-items: center; }
.log-row { grid-template-columns: 130px 1.4fr .7fr 1.2fr 1.4fr; }
.ref-row, .tp-row { grid-template-columns: 1.6fr 1fr .9fr; }
.log-row:last-child, .ref-row:last-child, .tp-row:last-child { border-bottom: 0; }
.log-row .mono { font-family: ui-monospace, Consolas, monospace; font-size: 12px; color: #6b7280; }

/* ---------- 转介绍明细（038）：合作状态徽章 / 已合作行淡显 / 表头合作 chip ---------- */
.amber-t { color: #c27b00; }
.coop-tag { display: inline-block; border-radius: 999px; padding: 2px 10px; font-size: 12px; white-space: nowrap; }
.coop-tag.yes { background: #e7f6ee; color: #1a9c5b; }
.coop-tag.no { background: #fdf3e3; color: #c27b00; }
.ref-row.done { color: #9aa3ad; }
.ref-row.done > span:first-child { text-decoration: line-through; text-decoration-color: #cdd3d9; }
/* 070：转介绍行改造 —— 摘要更宽、按钮区更宽；划线兼容新的 div 结构 */
.ref-row[data-open] { grid-template-columns: 1.9fr .8fr 1.4fr; align-items: center; }
.ref-row[data-open]:hover { background: #f7f9fb; border-radius: 8px; }
.ref-row.done > div:first-child > div:first-child { text-decoration: line-through; text-decoration-color: #cdd3d9; }
.coop-chip { display: inline-block; background: #e7f6ee; color: #1a9c5b; border-radius: 999px;
             padding: 3px 12px; font-size: 12px; white-space: nowrap; }

/* ---------- 聊天框快捷回复条 ---------- */
.quick-bar { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding: 0 0 8px; }
.qb-chip { border: 1px solid #dcdfe3; background: #fff; border-radius: 999px; padding: 4px 12px;
           font-size: 12px; cursor: pointer; color: #4a5058; max-width: 160px;
           overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qb-chip:hover { border-color: #2b7de9; color: #2b7de9; background: #f5f9ff; }
.qb-chip.c { background: #eaf2fd; border-color: #cfe1fa; color: #2b7de9; }
.qb-tip { font-size: 12px; color: #a0a6ad; }
/* 快捷回复下拉：话术再多也只占一行 */
.qb-sel {
  height: 26px; max-width: 240px; min-width: 150px;
  border: 1px solid #dcdfe3; background: #fff; border-radius: 999px;
  padding: 0 10px; font-size: 12px; color: #303133; outline: none; cursor: pointer;
}
.qb-sel:hover { border-color: #2b7de9; color: #2b7de9; }
.qk-no { font-size: 12px; color: #909399; }


/* ---------- 侧栏折叠态：窄条只显图标 ---------- */
#side.mini { width: 56px; }
#side.mini .side-brand { font-size: 0; padding: 15px 0 12px; text-align: center; }
#side.mini .side-brand small { display: none; }
#side.mini #btnFold { position: static; margin: 0 auto; display: block; font-size: 0; }
#side.mini #btnFold::after { content: '⟩'; font-size: 12px; }
#side.mini .nav-item { justify-content: center; padding: 10px 0; position: relative; }
#side.mini .nav-item .lbl { display: none; }
#side.mini .nav-item .dot { position: absolute; margin: 0; transform: translate(10px, -8px); }
#side.mini .side-me { text-align: center; font-size: 0; padding: 12px 4px; }
#side.mini .side-me b { font-size: 11px; }


/* ---------- 我的名片 ---------- */
.qr-row { display: flex; gap: 14px; flex-wrap: wrap; }
.qr-box {
  flex: 1; min-width: 220px; border: 1px dashed #dfe2e6; border-radius: 10px;
  padding: 12px; text-align: center; background: #fafbfc;
}
.qr-t { font-weight: 600; margin-bottom: 8px; color: #4a5058; }
.qr-img { max-width: 160px; max-height: 160px; border-radius: 6px; border: 1px solid #e6e8eb; background: #fff; }
.qr-empty { color: #a0a6ad; font-size: 12px; padding: 30px 0; }
.fd-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.fd-row label { width: 160px; flex: none; color: #4a5058; font-size: 13px; }
.fd-row .inp { flex: 1; }


/* 咨询接待「待分配」红 chip（仅主管 / 管理员可见） */
.warn-chip { background: #fdecec !important; border: 1px solid #f3c1c1 !important; color: #d64541 !important; cursor: pointer; }
.warn-chip:hover { background: #fadcdc !important; }


/* ---------- 项目 ---------- */
.proj-sel {
  height: 26px; max-width: 150px; border: 1px solid #dcdfe3; background: #fff;
  border-radius: 13px; padding: 0 8px; font-size: 12px; color: #303133; outline: none; cursor: pointer;
}
.proj-sel:hover { border-color: #2b7de9; }
.tag.pj { background: #eef7ee; border: 1px solid #cde8cd; color: #2e7d32; }
.proj-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.proj-nm { width: 110px; flex: none; font-size: 13px; color: #303133; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-bar { flex: 1; height: 10px; background: #f0f1f3; border-radius: 5px; overflow: hidden; }
.proj-bar i { display: block; height: 100%; background: #2b7de9; border-radius: 5px; transition: width .3s; }
.proj-n { width: 34px; text-align: right; font-weight: 600; color: #2b7de9; }
.proj-card { border: 1px solid #eef0f2; border-radius: 8px; padding: 10px 12px; margin-top: 8px; cursor: pointer; }
.proj-card:hover { border-color: #bcd6f5; background: #f8fbff; }
.proj-card.on { border-color: #2b7de9; background: #f3f8fe; }
.proj-line { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.proj-line b { flex: none; }
.proj-line .ops { margin-left: auto; }


/* ---------- 聊天表头信息条（参考原型版式） ---------- */
#wbHd { display: block; line-height: 1.7; }
.hd-l1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hd-name { font-size: 14px; }
.hd-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 4px; }
.hm { font-size: 12px; color: #6b7280; display: inline-flex; align-items: center; gap: 4px; }
.hm b { font-weight: 500; color: #9aa0a6; }
.hm.ops-hm { color: #b45309; }
.hd-note {
  display: flex; align-items: center; gap: 8px; margin-top: 6px;
}
.hd-note .nb { flex: none; font-size: 12px; color: #6b7280; }
.hd-note .inp { flex: 1; min-width: 120px; height: 26px; font-size: 12px; }
.lock-bar {
  margin-top: 8px; padding: 7px 10px; border-radius: 8px; font-size: 12px;
  background: #fff7e6; border: 1px solid #ffe0a3; color: #b45309;
}
.composer.dim { opacity: .55; }
.warn-btn { border-color: #f3c1c1 !important; color: #d64541 !important; }
.warn-btn:hover { background: #fdecec !important; }

/* ---------- 客户资料：姓名 / 手机号（客服手填） ---------- */
.wb-hd2 .ci-inp { width: 130px; }
.wb-hd2 .ci-inp:focus { border-color: #2b7de9; background: #fff; }
/* 「手填」小标记：区分客户自己授权的 / 客服填的，避免以后扯不清 */
.hand-tip {
  flex: none; font-size: 11px; line-height: 16px; padding: 0 5px; border-radius: 4px;
  background: #eef2f7; color: #6b7280; border: 1px solid #e2e6ea;
}
/* 识别提示条：从聊天文字里扫到手机号 / 姓名 → 浮在输入框上方，点一下填入 */
.pick-bar {
  flex: none; display: flex; align-items: center; gap: 8px;
  padding: 7px 14px; font-size: 12px;
  background: #eaf2fd; border-top: 1px solid #d9e8fb; color: #303133;
}
.pick-bar.hidden { display: none; }
.pick-bar .pk-ico { flex: none; }
.pick-bar .pk-tx { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-bar .pk-tx b { color: #2b7de9; font-weight: 600; }

/* ---------- 搜索：会话列表 / 客户列表共用（搜客户名、手机号、**聊天记录**） ---------- */
.srch { flex: none; position: relative; padding: 10px 12px 6px; }
.srch .inp { width: 100%; box-sizing: border-box; padding-right: 26px; }
.srch-x { position: absolute; right: 18px; top: 50%; transform: translateY(-40%);
          border: 0; background: transparent; color: #9aa0a8; font-size: 16px; line-height: 1;
          cursor: pointer; padding: 2px 4px; }
.srch-x:hover { color: #d64541; }
.srch-x.hidden { display: none; }
/* 命中片段里的关键词高亮（聊天记录、客户名都会用） */
mark { background: #fff3bf; color: #8a5a00; border-radius: 2px; padding: 0 1px; }
mark.hit-n { background: #e8f0fe; color: #1a5fd0; font-size: 11px; padding: 0 4px;
             border-radius: 4px; margin-right: 2px; }

/* ---------- 聊天区：命中定位条 + 命中消息高亮 ---------- */
.find-bar { flex: none; display: flex; align-items: center; gap: 8px;
            padding: 6px 14px; font-size: 12px; background: #fffbe6;
            border-bottom: 1px solid #f3e6b3; color: #6b5b1f; }
.find-bar.hidden { display: none; }
.find-bar .fb-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.find-bar .fb-n { flex: none; color: #9a8654; }
.msg.hit .bubble { background: #fff6d6 !important; border-color: #f0dca0 !important; color: #303133 !important; }
.msg.hit-cur { border-radius: 8px; box-shadow: 0 0 0 2px #f5c96b; }
/* 客户归属地（IP 反查 / 位置授权）：跟表头其它小标签同排 */
.geo-chip { flex: none; font-size: 11px; line-height: 16px; padding: 0 6px; border-radius: 4px;
            background: #eef7f0; color: #1a7f4b; border: 1px solid #cfe9d8; }
.tag-chip.normal { background: #f2f3f5; color: #6b7280; border: 1px solid #e6e8eb; }
.tag-chip.src { background: #eef2fb; color: #4a6fa5; border: 1px solid #dbe4f2; }
.tag-chip.wait { background: #fdf0e4; color: #b26a12; border: 1px solid #f5dcc0; }
/* 归属地 chip（036）：客服手选/手填的省份，会话列表 / 客户管理里显示 */
.tag-chip.geo { background: #eef7f0; color: #1a7f4b; border: 1px solid #cfe9d8; }
.pick-bar .btn { flex: none; }

/* ---------- 公司内部群 ---------- */
.tm { max-width: 72%; margin-bottom: 10px; }
.tm.mine { margin-left: auto; text-align: right; }
.tm-hd { font-size: 12px; color: #8a8f99; margin-bottom: 3px; display: flex; gap: 6px; align-items: center; }
.tm.mine .tm-hd { justify-content: flex-end; }
.tm-hd b { color: #303133; }
.tm-role { font-size: 11px; border-radius: 4px; padding: 0 5px; line-height: 16px; }
.r-kf { background: #eaf2fd; color: #2b7de9; }
.r-ops { background: #eef7ee; color: #2e7d32; }
.r-mgr { background: #fff3e0; color: #b45309; }
.r-admin { background: #f3e8fd; color: #7c3aed; }
.tm-at { font-size: 11px; color: #b8bdc4; }
.tm-tx {
  display: inline-block; text-align: left; background: #fff; border: 1px solid #eef0f2;
  border-radius: 10px; padding: 8px 12px; font-size: 13px; color: #303133; word-break: break-all;
}
.tm.mine .tm-tx { background: #eaf2fd; border-color: #d8e8fb; }
.tm-t { font-size: 12px; color: #8a8f99; margin-bottom: 8px; }
.tm-m { font-size: 13px; color: #303133; padding: 5px 4px; display: flex; align-items: center; gap: 6px; }
.tm-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; flex: none; }
.tm-dot.off { background: #c8ccd2; }
.tm-m .tm-r { font-style: normal; font-size: 11px; color: #8a8f99; margin-left: auto; }
.tm-m .tm-r.tm-on { color: #1a9c5b; }
.tm-m .tm-r.tm-off { color: #a0a6ad; }
/* 152 内部群 @ 某人：成员可点、@ 高亮、被 @ 的整条描红 */
.tm-m.at-able { cursor: pointer; border-radius: 6px; }
.tm-m.at-able:hover { background: #eef4ff; }
.at-hl { font-style: normal; color: #2b7de9; font-weight: 600; }
.tm.at-me .tm-tx { border-color: #f3b0b0; background: #fff6f6; box-shadow: 0 0 0 2px #ffe9e9; }
.at-tag { font-size: 11px; color: #c0392b; background: #ffe9e9; border: 1px solid #f5c2c2;
          border-radius: 8px; padding: 0 6px; margin-left: 6px; }
.at-pop { position: absolute; left: 12px; right: 90px; bottom: 52px; max-height: 200px; overflow-y: auto;
          background: #fff; border: 1px solid #e5e7eb; border-radius: 8px;
          box-shadow: 0 6px 18px rgba(0,0,0,.12); z-index: 50; }
.at-i { display: flex; align-items: center; gap: 8px; padding: 7px 10px; cursor: pointer; font-size: 13px; }
.at-i:hover { background: #f2f6fd; }
/* 152 移交情况看板：明细行（点整行跳会话） */
.tr-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-bottom: 1px solid #f2f3f5;
          cursor: pointer; font-size: 13px; }
.tr-row:hover { background: #f7f9fc; }
.tr-k { flex: none; font-size: 11px; border-radius: 8px; padding: 1px 7px; border: 1px solid transparent; }
.tr-k.k-ops { background: #fff3e0; border-color: #f5d7a3; color: #b45309; }
.tr-k.k-back { background: #eef7ee; border-color: #cde8cd; color: #2e7d32; }
.tr-c { flex: none; min-width: 170px; color: #303133; }
.tr-n { flex: none; min-width: 140px; color: #2b7de9; font-weight: 600; }
.tr-r { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-go { flex: none; color: #8a8f99; font-size: 12px; }
/* 当天汇总表头 */
.hd-row { display: flex; gap: 10px; font-size: 12px; color: #8a8f99; padding: 4px 6px; border-bottom: 1px solid #f0f1f3; }
.hd-row span { flex: 1; }
.hd-row span:first-child { flex: none; min-width: 92px; }
/* 156 移交数据情况：六列表格（项目/客服/运营文案/移交/合格/不合格） */
.hd-row.hd-head { color: #5b6470; font-weight: 600; background: #fafbfc; border: 1px solid #eef0f3; border-radius: 6px 6px 0 0; }
.hd-row.hd-foot { color: #5b6470; font-weight: 600; border-top: 1px solid #eef0f3; border-bottom: none; }
.hd-row.hd-head span:nth-child(4), .hd-row.hd-head span:nth-child(5), .hd-row.hd-head span:nth-child(6),
.hd-row span:nth-child(4), .hd-row span:nth-child(5), .hd-row span:nth-child(6) { flex: none; width: 62px; text-align: center; }
.hd-row .ok-n { color: #2e7d32; font-weight: 600; }
.hd-row .bad-n { color: #c62828; font-weight: 600; }
.qual-tag { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 11px; }
.qual-tag.ok { background: #eef7ee; color: #2e7d32; }
.qual-tag.no { background: #fdecea; color: #c62828; }
.okbtn { background: #2e7d32; border-color: #2e7d32; color: #fff; }
.okbtn:disabled { opacity: .6; }



/* 客户接管状态 */
.back-bar { background: #eef7ee; border-color: #cde8cd; color: #2e7d32; }
/* 157c：聊天界面运营/文案「确认可用」横条（复用 lock-bar 视觉） */
.qual-bar { background:#e8f0fe; border-color:#bcd4fb; color:#1a4fb0; }
.qual-bar.ok { background:#e8f5e9; border-color:#a5d6a7; color:#2e7d32; }
.qual-bar .okbtn { margin-left:8px; }
/* 162p：「不可用」按钮 + 已标不可用状态条 / 移交页明细红标（只加不改） */
.qual-bar.bad { background:#fdecec; border-color:#f5b5b5; color:#c0392b; }
.badbtn { margin-left:6px; background:#fff; border:1px solid #e3a2a2; color:#c0392b; }
.badbtn:hover { background:#fdecec; }
.badbtn:disabled { opacity:.6; }
.qual-tag.bad { background:#fdecec; border-color:#f5b5b5; color:#c0392b; }
.badge.ops-b { background: #fff3e0; border: 1px solid #f5d7a3; color: #b45309; }
.badge.done-b { background: #eef7ee; border: 1px solid #cde8cd; color: #2e7d32; }
/* 040：主管 / 管理员视角的「未分配」角标 —— 琥珀色，和客服端的红色「待回复」区分开 */
.badge.warn-b { background: #fef3c7; border: 1px solid #fcd34d; color: #92400e; }
/* 040：会话表头的订阅状态小标（独立类名，避免混进 geo-chip 系列被探针/筛选误抓） */
.sub-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 11px;
  background: #eef7ee; border: 1px solid #cde8cd; color: #2e7d32; font-size: 11.5px; cursor: default; }
.sub-chip.dim { background: #f3f4f6; border-color: #e5e7eb; color: #8a8f99; }


/* 客户详情弹窗 */
.dt-grid { display: grid; grid-template-columns: 84px 1fr; gap: 7px 12px; font-size: 13px; }
.dt-k { color: #8a8f99; }
.dt-v { color: #303133; }
.dt-row { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; }
.dt-row label { width: 130px; flex: none; font-size: 13px; color: #4a5058; padding-top: 6px; }
.dt-row .inp, .dt-row textarea { flex: 1; font-size: 13px; }
.dt-row select.proj-sel { height: 30px; max-width: none; }


/* 会话存档：表头两行（标题 + 客户信息条） */
#sesHd.two-row { height: auto; min-height: 46px; flex-direction: column; align-items: stretch; padding: 8px 14px; gap: 6px; }
.ses-hd-top { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
.ses-hd-top .acts { margin-left: auto; display: flex; gap: 6px; font-weight: 400; }
.ses-hd-info { display: flex; flex-wrap: wrap; gap: 4px 18px; font-weight: 400; font-size: 12px; }
.ses-hd-info .hi { display: inline-flex; gap: 5px; align-items: baseline; white-space: nowrap; }
.ses-hd-info .hk { color: #8a8f99; }


/* ---- 会话工作台：KPI 行缩小（只作用本页，不影响数据看板等） ---- */
.wb-view .kpi { min-width: 80px; padding: 6px 12px; border-radius: 8px; }
.wb-view .kpi .n { font-size: 17px; }
.wb-view .kpi .t { font-size: 11px; margin-top: 0; }

/* ---- 会话工作台：聊天表头第二行（备注 / 所属项目 / 手机号） ---- */
#wbHd.two-row { height: auto; min-height: 46px; flex-direction: column; align-items: stretch; padding: 7px 14px; gap: 6px; }
#wbHd.two-row .hd-l1 { display: flex; align-items: center; gap: 8px; }
/* 079：授权 / 订阅 / 手机型号上移到标题行后的适配 —— 标签弱化 + 空间不够时换行 */
#wbHd.two-row .hd-l1 { flex-wrap: wrap; }
#wbHd.two-row .hd-l1 .hk { color: #8a8f99; font-weight: 400; font-size: 12px; flex: none; }
#wbHd.two-row .hd-l1 .auth-detail { flex: none; }
#wbHd.two-row .hd-l1 .acts { margin-left: auto; }
.wb-hd2 { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-weight: 400; font-size: 12px; }
.wb-hd2 .hk { color: #8a8f99; flex: none; }
.wb-hd2 .inp { width: 220px; height: 26px; font-size: 12px; padding: 2px 8px; }
.wb-hd2 select.proj-sel { height: 26px; max-width: 150px; font-size: 12px; }


/* 系统小字提示（移交运营 / 交回客服等）：居中一行小灰字 */
.msg.sys { align-self: center; max-width: 88%; margin: 4px 0; }
.msg.sys .sys-tx { display: inline-block; font-size: 11.5px; line-height: 1.6; color: #9aa0a8;
                 background: #f5f6f8; border-radius: 8px; padding: 3px 10px; text-align: center; }

/* ===== 收款码缩略图（客户详情 / 会话详情，027）===== */
img.payqr { width: 92px; height: 92px; object-fit: cover; border-radius: 8px;
            border: 1px solid var(--line); cursor: zoom-in; vertical-align: middle; }

/* ===== 资源池 / 运营任务（027）===== */
/* 162x：资源池里的「优质 / 不合作」颜色标记（标记本身在会话 / 客户档案上，这里关联显示出来） */
.pool-tag { display: inline-block; font-size: 11px; line-height: 1.5; padding: 1px 7px;
            border-radius: 999px; margin-left: 4px; vertical-align: middle; font-weight: 600; }
.pool-tag.good { background: #e8f7ee; color: #1a9c5b; border: 1px solid #b7e6cb; }
.pool-tag.bad { background: #fdecec; color: #b4232a; border: 1px solid #f2c4c4; }
.pool-kpis { display: flex; gap: 12px; margin-bottom: 12px; }
.pool-kpis .kpi { flex: 1; text-align: center; padding: 14px 8px; margin-bottom: 0; }
.pool-kpis .kpi b { display: block; font-size: 22px; color: var(--primary); }
.pool-kpis .kpi span { font-size: 12px; color: var(--muted); }
.pool-hd { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.pool-hd .inp { flex: 1; }
img.pool-shot { width: 56px; height: 56px; object-fit: cover; border-radius: 6px;
                border: 1px solid var(--line); cursor: zoom-in; }
.pool-link { color: var(--primary); text-decoration: none; }
.pool-link:hover { text-decoration: underline; }
.task-card.done { opacity: .72; }
.task-l1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.task-no { background: var(--primary); color: #fff; border-radius: 6px; font-size: 12px; padding: 2px 8px; }
.task-name { font-size: 15px; }
.task-acts { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }

/* ===== 收款码卡片（030）：客服发的「请上传收款码」===== */
.bubble.payqr-card { background: #fff; border: 1px solid var(--primary); max-width: 320px; }
.payqr-card .pq-t { font-weight: 600; color: var(--primary); margin-bottom: 6px; }
.payqr-card .pq-d { font-size: 12px; color: var(--muted); line-height: 1.6; }
.payqr-card .pq-wait { display: inline-block; margin-top: 8px; font-size: 12px; color: #b6bcc6; }
.payqr-card img.media { max-width: 180px; margin-top: 8px; }

/* ===== 099：结算四件套（会话表头按钮 + 结算弹窗）===== */
.btn.stl-go { background: #fdf4e6; border: 1px solid #e6c68d; color: #95640f; }
.btn.stl-go:hover { background: #fbe9cf; }
.btn.stl-done { background: #e9f7ee; border: 1px solid #a5d8b8; color: #2c7a45; }
.btn.stl-done:hover { background: #dcf2e5; }
.stl-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.stl-badge { display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: 13px; font-weight: 600;
             background: #fbeecd; color: #8a5a10; border: 1px solid #e6c68d; }
.stl-amt { font-size: 18px; font-weight: 600; color: #2c7a45; }
/* 101：结算流水（同一位客户可以付多次，一笔一行） */
.stl-sum { font-size: 13px; color: #2c7a45; font-weight: 600; }
.stl-list { max-height: 220px; overflow: auto; border: 1px solid #e6e8eb; border-radius: 8px; margin-bottom: 12px; }
.stl-list-t { padding: 6px 10px; font-size: 12px; color: #6b7280; background: #fafbfc; border-bottom: 1px solid #f0f2f4; }
.stl-li { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-bottom: 1px solid #f0f2f4; font-size: 13px; }
.stl-li:last-child { border-bottom: 0; }
.stl-li-t { min-width: 118px; color: #6b7280; font-variant-numeric: tabular-nums; }
.stl-li-a { min-width: 96px; font-weight: 700; color: #2c7a45; font-variant-numeric: tabular-nums; }
.stl-li-b { flex: 1; color: #374151; }
.stl-del { padding: 2px 8px; font-size: 12px; }

/* ===== 大图预览浮层（033）：点图片看大图，保存走层里的按钮，不再直接下载 ===== */
.ivm-mask { position: fixed; inset: 0; z-index: 9998; background: rgba(20,24,32,.82);
            display: flex; align-items: center; justify-content: center; padding: 60px 40px 40px; }
.ivm-img { max-width: 92vw; max-height: 82vh; border-radius: 10px; box-shadow: 0 12px 40px rgba(0,0,0,.5); background: #fff; }
.ivm-bar { position: absolute; top: 16px; right: 20px; display: flex; gap: 10px; }
.ivm-btn { border: 0; border-radius: 8px; padding: 8px 16px; font-size: 13px; cursor: pointer;
           background: var(--primary); color: #fff; }
.ivm-btn.ghost { background: rgba(255,255,255,.16); color: #fff; }
.ivm-btn:hover { filter: brightness(1.08); }
/* 066：大图支持放大缩小 —— 拖动时不要动画（跟手），按钮缩放时才带一点过渡 */
.ivm-img { transform-origin: center center; will-change: transform; }
.ivm-zoom { display: inline-flex; align-items: center; gap: 6px; background: rgba(0,0,0,.28);
            border-radius: 8px; padding: 4px 6px; }
.ivm-zoom .ivm-btn { padding: 6px 12px; }
.ivm-pct { color: #fff; font-size: 12px; min-width: 44px; text-align: center; font-variant-numeric: tabular-nums; }

/* ===== 表单图片字段（035）：登记线索的主页截图直接传图 ===== */
.fd-img { display: flex; flex-direction: column; gap: 8px; }
.fd-img-prev { max-width: 220px; max-height: 130px; object-fit: cover;
               border-radius: 8px; border: 1px solid var(--line, #e3e6ec); background: #fff; }

/* ---------- 038：会话表头「操作」下拉菜单 ---------- */
.menu-wrap { position: relative; display: inline-block; }
.ops-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 80;
  min-width: 200px; padding: 6px; display: flex; flex-direction: column; gap: 2px;
  background: #fff; border: 1px solid #e6e8eb; border-radius: 10px;
  box-shadow: 0 10px 28px rgba(30, 40, 60, .16);
}
.om-it {
  text-align: left; padding: 8px 10px; border: 0; background: none; border-radius: 8px;
  cursor: pointer; font-size: 13px; color: #333; white-space: nowrap;
}
.om-it:hover { background: #f2f6fd; }
.om-it.danger { color: #d64541; }
.om-it.warn { color: #b26a12; }

/* ---------- 038：客户管理选中行加深（好区分当前看的是哪个客户） ---------- */
.srow.active { background: #cfe1fb; box-shadow: inset 3px 0 0 #2b7de9; }

/* ---------- 038：看板日期筛选（资源池 / 账号登记 / 反馈看板 共用） ---------- */
.date-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.date-bar .chip { padding: 3px 10px; font-size: 12px; }
.date-bar .d-inp { width: 132px; height: 26px; font-size: 12px; padding: 0 6px; }
.payqr-big { display: block; }

/* ============ 响应式适配（040）============
   PC 为主，但平板 / 小屏笔记本也能用：
   ≤1180px 侧栏自动收成窄条（同 #side.mini 的效果）、KPI 换行；
   ≤780px 双栏改上下堆叠、弹窗贴边、卡片单列。 */
@media (max-width: 1180px) {
  #side { width: 56px; }
  .side-brand { font-size: 0; padding: 15px 0 12px; text-align: center; }
  .side-brand small { display: none; }
  .side-brand .ver-chip { display: none; }
  .nav-item { justify-content: center; padding: 10px 0; position: relative; }
  .nav-item .lbl { display: none; }
  .nav-item .dot { position: absolute; margin: 0; transform: translate(10px, -8px); }
  .side-me { text-align: center; font-size: 0; padding: 12px 4px; }
  .side-me b { font-size: 11px; }
  .kpis { flex-wrap: wrap; }
  .kpis .kpi { flex: 1 1 30%; min-width: 150px; }
  .view { padding: 12px 12px 16px; }
  /* 宽表格允许横向滚动，不撑破布局 */
  .view:not(.fill) { overflow-x: auto; }
}
@media (max-width: 780px) {
  .kpis .kpi { flex: 1 1 46%; min-width: 0; }
  .pane { flex-direction: column; overflow-y: auto; }
  .pane .col { flex: none !important; max-height: 46%; }
  .pane .col[style*="width:160px"] { width: auto !important; max-height: 40%; }
  .dlg { width: 94vw !important; max-width: 94vw !important; max-height: 88vh; overflow-y: auto; }
  .dlg-bd { max-height: 60vh; }
  .hd-l1 { flex-wrap: wrap; }
  .wb-hd2 .ci-inp { width: 100px; }
  /* 弹窗里的表单两列改单列 */
  .fd-grid { grid-template-columns: 1fr !important; }
  .mrow { font-size: 12px; }
}

/* ===== 054：气泡右下角的发送时间（微信同款：灰色小字，不抢内容） ===== */
.msg-tm { font-size: 11px; color: #9a9a9a; margin: 4px 2px 0; text-align: right; letter-spacing: .3px; }

/* ===== 062：消息里的网址可点（微信同款，点一下就在新标签页打开） =====
   ⚠️ 客服气泡是蓝底，链接必须反白，否则蓝底蓝字看不见。 */
.msg .bubble a.msg-lnk { color: #2b7de9; text-decoration: underline; word-break: break-all; }
.msg .bubble a.msg-lnk:hover { text-decoration: none; }
.msg .bubble a.msg-lnk:active { opacity: .7; }
.msg.kf .bubble a.msg-lnk { color: #fff; }
.msg.ask .bubble a.msg-lnk { color: #a06800; }

/* ============ 079b：会话列表可拖拽分隔条 ============ */
.splitter { width: 7px; flex: none; cursor: col-resize; border-radius: 4px; background: transparent; position: relative; }
.splitter::after {
  content: ''; position: absolute; left: 2px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 28px; border-radius: 2px; background: #dfe3e8;
}
.splitter:hover::after, .splitter.on::after { background: #2b7de9; }
body.resizing { cursor: col-resize; user-select: none; }

/* ============ 079c：表情面板 ============ */
.emoji-pop {
  position: fixed; z-index: 9999; background: #fff; border: 1px solid #e6e8eb;
  border-radius: 10px; box-shadow: 0 8px 30px rgba(0,0,0,.14);
  padding: 10px 12px; width: 330px; max-width: 92vw; max-height: 330px; overflow-y: auto;
}
.ep-sec { font-size: 12px; color: #8a8f99; margin: 4px 0 6px; }
.ep-grid { display: flex; flex-wrap: wrap; gap: 2px; }
.ep-grid span {
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  font-size: 20px; cursor: pointer; border-radius: 6px; white-space: nowrap;
}
.ep-grid span:hover { background: #f0f6ff; }
.ep-grid .ep-line { width: auto; font-size: 12.5px; color: #ff7eb3; padding: 0 8px; }

/* 088：ICP 备案号（管局要求，登录页与侧栏底部展示） */
.beian { text-align:center; font-size:12px; color:#9aa3ad; padding:8px 4px 2px; line-height:1.4; }
.beian a { color:#9aa3ad; text-decoration:none; }
.beian a:hover { color:#2b7de9; }

/* 157 全公司通讯录 + 员工私聊（网页端） */
.allgrp { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 12px;
  border: 1px solid #dbe4f0; border-radius: 10px; background: #f7faff; }
.allgrp-l { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.allgrp-ic { font-size: 20px; }
.allgrp-t { display: flex; flex-direction: column; line-height: 1.4; }
.dept-card { margin-bottom: 12px; border: 1px solid #f0f1f3; border-radius: 10px; overflow: hidden; }
.dept-hd { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px;
  background: #fafbfc; border-bottom: 1px solid #f0f1f3; }
.dept-list { padding: 4px 8px; }
.emp-row { display: flex; align-items: center; gap: 10px; padding: 7px 6px; border-bottom: 1px solid #f6f7f9; }
.emp-row:last-child { border-bottom: none; }
.emp-av { flex: none; width: 28px; height: 28px; border-radius: 50%; background: #e6f1fb; color: #185fa5;
  display: flex; align-items: center; justify-content: center; font-size: 13px; }
.emp-n { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.4; }
.emp-go { flex: none; }
.im-side { width: 260px; flex: none; border-right: 1px solid #f0f1f3; display: flex; flex-direction: column; min-height: 0; }
.im-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; cursor: pointer; border-bottom: 1px solid #f6f7f9; }
.im-row.on { background: #f2f7ff; }
.im-av { flex: none; width: 26px; height: 26px; border-radius: 50%; background: #e6f1fb; color: #185fa5;
  display: flex; align-items: center; justify-content: center; font-size: 12px; }
.im-body { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.im-last { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.im-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #e24b4a; }
/* 162c：私聊/外部群列表未读条数（红底白字胶囊，替代纯红点） */
.im-n { flex: none; min-width: 18px; height: 18px; line-height: 18px; padding: 0 5px; border-radius: 9px; background: #e24b4a; color: #fff; font-size: 11px; font-weight: 600; text-align: center; }
/* 162c：通讯录「公司全员群」卡片未读条数 */
.dir-unread { flex: none; min-width: 18px; height: 18px; line-height: 18px; padding: 0 5px; border-radius: 9px; background: #e24b4a; color: #fff; font-size: 11px; font-weight: 600; text-align: center; }
.dir-unread.hidden { display: none; }
/* ============ 162s（2026-10-24 老邱定） ============ */
/* 私聊 / 客户群 真·左右布局：会话列表在左、会话框在右。
   （之前外层用的 .row 类在样式表里没有定义 → 一直是上下堆叠，这就是老邱截图里的样子） */
.chat-row { display: flex; gap: 12px; flex: 1; min-height: 0; }
/* 通讯录：部门标题可点折叠（默认收起）+ 每行第二缀「在线状态 · 项目」 */
.dept-toggle { cursor: pointer; user-select: none; }
.emp-chat:hover { background: #f7faff; }
/* 162t：通讯录里每个人名下的「负责项目」（第二行小字，太长截断，悬停看全的） */
.emp-prj { display: block; max-width: 100%; margin-top: 1px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-size: 12px; color: #185fa5; background: #f2f7fc;
  border-radius: 4px; padding: 0 5px; line-height: 1.6; }
/* 162u：通讯录复用内部群的在线点 / 在线离线小字 —— 原来的配色只挂在 .tm-m 下，补一份全局的 */
.tm-r.tm-on { color: #1a9c5b; font-style: normal; }
.tm-r.tm-off { color: #a0a6ad; font-style: normal; }
.dir-nm { display: flex; align-items: center; gap: 6px; }
.dir-nm b { font-weight: 600; }
.dir-nm .tm-r { margin-left: auto; font-size: 11px; }
/* 转介绍：每个分享人一张卡，默认收起，点头部展开 */
.card-hd.tgl { cursor: pointer; user-select: none; }
.card-hd.tgl .rf-arw { display: inline-block; margin-right: 6px; color: #98a1ad; font-size: 12px; }
.im-msg { margin-bottom: 10px; }
.im-msg.mine { text-align: right; }
.im-bub { display: inline-block; max-width: 72%; padding: 7px 11px; border-radius: 10px; background: #f2f3f5;
  font-size: 13px; line-height: 1.6; text-align: left; word-break: break-all; }
.im-msg.mine .im-bub { background: #2b7de9; color: #fff; }
.im-meta { margin-top: 3px; font-size: 11px; }
.im-fail { color: #c62828; font-size: 11px; }
.pick { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: #5b6470; margin-right: 8px; }
.pick-bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-top: 1px solid #eef0f3; background: #fafbfc; }
.pick-bar span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== 157c：拖文件进会话框 ===== */
.drop-ov {
  position: absolute; inset: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  background: rgba(64,120,255,.08); border: 2px dashed #4078ff; border-radius: 8px;
  color: #2b5cff; font-size: 13px; font-weight: 600; pointer-events: none;
}
.im-img, .tm-img { max-width: 220px; max-height: 240px; border-radius: 8px; display: block; margin: 2px 0; cursor: zoom-in; }
.im-vid, .tm-vid { max-width: 260px; border-radius: 8px; display: block; margin: 2px 0; background: #000; }
.im-bub .im-img, .im-bub .im-vid, .tm-tx .tm-img, .tm-tx .tm-vid { margin-top: 4px; }

/* ===== 157c：客户外部群 新建弹层 ===== */
.btn.small { padding: 3px 10px; font-size: 12px; height: auto; line-height: 1.6; }
.eg-modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.4); }
.eg-modal.hidden { display: none; }
.eg-card { width: 420px; max-width: 92vw; max-height: 84vh; display: flex; flex-direction: column;
  background: #fff; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,.18); overflow: hidden; }
.eg-card-hd { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; font-weight: 600; border-bottom: 1px solid #f0f1f3; }
.eg-close { cursor: pointer; color: #8a8f99; font-size: 16px; padding: 0 6px; }
.eg-field { display: flex; align-items: center; gap: 8px; padding: 12px 16px 4px; }
.eg-field .lbl { width: 56px; color: #5b6470; font-size: 13px; flex: none; }
.eg-tip { padding: 4px 16px; color: #8a8f99; font-size: 12px; }
#egCustList { padding: 4px 16px 8px; }
.eg-cust { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid #f6f7f9; cursor: pointer; font-size: 13px; }
.eg-cust input { flex: none; }
.eg-cust .muted { margin-left: auto; }
/* 162t：新建客户群里的「按部门分组」同事列表（默认折叠，点部门名展开） */
.eg-dept { border-bottom: 1px solid #f0f1f3; }
.eg-dept-hd { display: flex; align-items: center; gap: 6px; padding: 7px 16px; cursor: pointer; user-select: none; background: #fafbfc; }
.eg-dept-hd:hover { background: #f2f6fb; }
.eg-dept-hd b { font-size: 13px; }
.eg-arw { flex: none; width: 12px; color: #98a0aa; font-size: 11px; }
.eg-dept-bd { padding: 2px 16px 6px 30px; }
.eg-acts { display: flex; gap: 10px; padding: 12px 16px; border-top: 1px solid #f0f1f3; }
.eg-acts .btn { flex: 1; }