/* 销售管家 · 一比一照抄《销售管家-前端方案小样V1-2026-10-07》
   来源：项目文档/04-设计规范/销售管家-前端方案小样V1-2026-10-07.html 的 <style>
   处理：去掉小样里"左侧导航 / 顶栏 / 页面外壳"那几段（真实页面已有自己的外壳），
        其余逐条原样搬入；每条选择器加 #hxSales 前缀，避免影响线索池 / 互动执行 / 其他板块。 */

#hxSales {
  --font-display: "Space Grotesk", "Noto Sans SC", system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", "Noto Sans SC", system-ui, -apple-system, sans-serif;
  --blue: oklch(64% 0.17 258); --blue-soft: oklch(64% 0.17 258 / .14); --blue-line: oklch(64% 0.17 258 / .34);
  --green: oklch(76% 0.14 158); --green-soft: oklch(76% 0.14 158 / .12);
  --amber: oklch(78% 0.11 80); --amber-soft: oklch(78% 0.11 80 / .14);
  --red: oklch(68% 0.16 26); --red-soft: oklch(68% 0.16 26 / .12);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --content: 2012px;
  --fs-body: 13.5px; --fs-small: 13px; --fs-cap: 12px;
  font-family: var(--font-body);
  color: var(--txt);
  line-height: 1.55;
  font-size: var(--fs-body);
  min-width: 0;
  /* 小样里 .pgs 是撑满高度的弹性列：抬头/页签之外，会话三栏吃掉剩余高度。
     真实外壳是 .scroll（滚动容器）+ 中间一层 .page，故下面把整条弹性链补齐。 */
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
#hxSales > * { flex: none; }
/* 让销售管家这一页的 .scroll 变成弹性列，等效小样的 .pgs */
.scroll:has(> #page-sales.on) { display: flex; flex-direction: column; }
.scroll:has(> #page-sales.on) > #page-sales { display: flex; flex-direction: column; flex: 1; min-height: 0; }
[data-theme="dark"] #hxSales {
  --bg: oklch(11% 0.01 258);
  --canvas: oklch(17% 0.012 258); --sunken: oklch(14% 0.011 258);
  --surface: oklch(20.5% 0.013 258); --raised: oklch(25% 0.015 258);
  --line: oklch(82% 0.04 258 / .10); --line-2: oklch(82% 0.04 258 / .18);
  --txt: oklch(95% 0.006 258); --txt-2: oklch(73% 0.01 258); --txt-3: oklch(55% 0.012 258);
  --shadow: 0 30px 80px -50px rgb(0 0 0 / .9);
  --cover-1: oklch(30% .04 258); --cover-2: oklch(21% .03 258);
}
[data-theme="light"] #hxSales {
  /* ★ 2026-10-13 波哥报「浅色下各区域卡片分不清、全是一片白」，根因与修法：
     机制：小样是**独立整页**、body 底色取 --bg(93%)，面板放 96% 自然浮出来；
           真实页面 body 底色是全局 --canvas(96%)，而这里把面板也定成 96%
           ⇒ **面板与页面底色完全相同**。浏览器实测：左栏/会话区/右栏档案/今日卡片/输入框
           全是 oklch(.96)，与 body 一字不差，只剩 12%~22% 透明度的描边 ⇒ 就是「一片白」。
           深色模式没这毛病，是因为深色下 body 底 17%、左栏面板 14%，差 3% 看得见。
     修法：浅色这几个令牌**回到全局 main.css 的同一组值**（面板 92% 浅灰、卡片 99% 白），
           与线索池 / 互动执行 / 工作台等其他板块完全一致，且与深色的层次关系同构。
           只动本文件、只动浅色这一块，深色与其它板块零影响。 */
  --bg: oklch(93% 0.008 258);
  --sunken: oklch(92% 0.008 258); --canvas: oklch(96% 0.006 258);
  --surface: oklch(99% 0.004 258); --raised: #fff;
  --line: oklch(30% 0.04 258 / .12); --line-2: oklch(30% 0.04 258 / .22);
  --txt: oklch(22% 0.03 258); --txt-2: oklch(42% 0.025 258); --txt-3: oklch(58% 0.02 258);
  --shadow: 0 30px 70px -45px rgba(40, 55, 90, .28);
  --cover-1: oklch(92% .02 258); --cover-2: oklch(96% .015 258);
}
#hxSales * { box-sizing: border-box; }
#hxSales .num { font-variant-numeric: tabular-nums lining-nums; }
#hxSales svg { display: block; }
#hxSales ::-webkit-scrollbar { width: 6px; height: 6px; }
#hxSales ::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 7px; }
#hxSales ::-webkit-scrollbar-track { background: transparent; }

/* ================= 板块大抬头 ================= */
#hxSales .hero { margin-bottom: 13px; }
#hxSales .heroTop { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
#hxSales .heroTop .eyebrow { font-size: 11px; line-height: 1.5; letter-spacing: .2em; text-transform: uppercase; color: var(--txt-3); font-weight: 600; flex: 1; min-width: 0; margin-bottom: 0; }
#hxSales .hero h1 { font-family: var(--font-display); font-size: clamp(22px, 2.8vw, 32px); font-weight: 600; line-height: 1.1; letter-spacing: -.5px; }
#hxSales .hero h1 .ac { color: var(--blue); }
#hxSales .hero .sub { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--txt-2); max-width: 600px; }

/* ================= 控件 ================= */
#hxSales .btn { font-family: inherit; font-size: var(--fs-small); border: 1px solid var(--line-2); border-radius: 9px; background: transparent; color: var(--txt-2); cursor: pointer; padding: 7px 13px; white-space: nowrap; transition: .15s var(--ease); }
#hxSales .btn:hover { border-color: var(--txt-3); color: var(--txt); background: var(--surface); }
#hxSales .btn.primary { border-color: var(--blue); background: var(--blue); color: #fff; font-weight: 600; box-shadow: 0 8px 20px -8px var(--blue); }
#hxSales .btn.primary:hover { filter: brightness(1.12); background: var(--blue); color: #fff; }
#hxSales .btn.sm { padding: 5px 11px; font-size: var(--fs-cap); }
/* 危险操作按钮（删除客户）—— 口径与线索池的 .hxw-btn.danger 逐字一致（红字 + 淡红底 + 淡红边），
   同一功能在不同页面必须长一样。这里挂在销售管家自己的 .btn 上。
   ⚠️ hover 里必须再写一遍 color/border-color：上面 #hxSales .btn:hover 会把它们改回灰字灰边，
   只写 background 的话悬停时会“红底 + 灰字”（特异性虽然够，但没声明的属性会被继承下来的规则接管）。 */
#hxSales .btn.danger { color: var(--red); border-color: oklch(68% 0.16 26 / .34); background: oklch(68% 0.16 26 / .10); }
#hxSales .btn.danger:hover { background: oklch(68% 0.16 26 / .20); border-color: oklch(68% 0.16 26 / .34); color: var(--red); }
#hxSales .btn.ghost { border-color: transparent; color: var(--txt-3); }
#hxSales .btn.ghost:hover { color: var(--txt); background: var(--surface); }
#hxSales .btn:disabled { opacity: .5; cursor: not-allowed; }
#hxSales select { font-family: inherit; font-size: var(--fs-small); border: 1px solid var(--line-2); border-radius: 9px; background: var(--sunken); color: var(--txt); padding: 7px 10px; }
#hxSales input[type=text] { font-family: inherit; font-size: var(--fs-small); border: 1px solid var(--line-2); border-radius: 9px; background: var(--sunken); color: var(--txt); padding: 7px 11px; width: 100%; }
#hxSales input[type=text]::placeholder { color: var(--txt-3); }
#hxSales .ic { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#hxSales .ic.s { width: 12px; height: 12px; }

#hxSales .badge { display: inline-block; border-radius: 6px; background: var(--canvas); color: var(--txt-2); font-size: var(--fs-cap); font-weight: 600; padding: 3px 8px; white-space: nowrap; }
#hxSales .badge.blue { color: var(--blue); background: var(--blue-soft); }
#hxSales .badge.green { color: var(--green); background: var(--green-soft); }
#hxSales .badge.amber { color: var(--amber); background: var(--amber-soft); }
#hxSales .badge.red { color: var(--red); background: var(--red-soft); }
#hxSales .tag { display: inline-block; font-size: var(--fs-cap); font-weight: 500; border-radius: 6px; padding: 3px 8px; background: var(--canvas); color: var(--txt-3); }

/* ================= 页签 ================= */
#hxSales .tabbar { display: flex; align-items: center; gap: 4px; margin-bottom: 14px; }
#hxSales .tabbar .rside { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; padding-left: 14px; }
#hxSales .aidot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: middle; background: var(--txt-3); }
#hxSales .aidot.half { background: var(--amber); } #hxSales .aidot.on { background: var(--green); } #hxSales .aidot.off { background: var(--txt-3); }
#hxSales .conv > header .more > .btn { display: inline-flex; align-items: center; }
#hxSales .tabbar .psel { flex: none; font-weight: 600; color: var(--txt); background: var(--sunken); border-color: var(--line-2); }
#hxSales .tabbar .tsep { width: 1px; height: 20px; background: var(--line-2); margin: 0 8px; flex: none; }
#hxSales .tabbar .tab { font-family: inherit; font-size: var(--fs-small); font-weight: 500; color: var(--txt-3); background: transparent; border: 0; border-radius: 9px; padding: 8px 15px; cursor: pointer; transition: .15s var(--ease); }
#hxSales .tabbar .tab:hover { color: var(--txt-2); background: var(--surface); }
#hxSales .tabbar .tab.on { color: var(--txt); background: var(--blue-soft); }
#hxSales .tabbar .tab .n { margin-left: 7px; font-size: var(--fs-cap); color: var(--txt-3); background: var(--canvas); border-radius: 6px; padding: 1px 6px; }
#hxSales .tabbar .tab.on .n { color: var(--blue); background: transparent; padding: 0; font-weight: 600; }

#hxSales .more { position: relative; display: inline-block; }
#hxSales .menu { display: none; position: absolute; right: 0; top: calc(100% + 7px); z-index: 40; background: var(--raised); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: var(--shadow); padding: 7px; min-width: 236px; text-align: left; }
#hxSales .menu.on { display: block; }
#hxSales .menu .grp { font-size: var(--fs-cap); color: var(--txt-3); padding: 8px 11px 4px; font-weight: 600; letter-spacing: .4px; }
#hxSales .menu button { display: block; width: 100%; text-align: left; border: 0; background: transparent; color: var(--txt-2); font-family: inherit; font-size: var(--fs-cap); padding: 9px 11px; border-radius: 8px; cursor: pointer; }
#hxSales .menu button:hover { background: var(--sunken); color: var(--txt); }
#hxSales .menu .sep { height: 1px; background: var(--line); margin: 6px 3px; }

/* ================= 今天要干的活 ================= */
#hxSales .today { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 12px; }
#hxSales .td { display: flex; align-items: center; gap: 12px; background: var(--sunken); border: 1px solid transparent; border-radius: 13px; padding: 11px 15px; cursor: pointer; transition: .15s var(--ease); text-align: left; font-family: inherit; color: inherit; width: 100%; }
#hxSales .td:hover { background: var(--raised); border-color: var(--line-2); }
#hxSales .td .tic { width: 30px; height: 30px; flex: none; border-radius: 9px; display: grid; place-items: center; }
#hxSales .td .tic svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
#hxSales .td.b .tic { background: var(--blue-soft); color: var(--blue); }
#hxSales .td.a .tic { background: var(--amber-soft); color: var(--amber); }
#hxSales .td.r .tic { background: var(--red-soft); color: var(--red); }
#hxSales .td .tt { flex: 1; min-width: 0; }
#hxSales .td .tt strong { display: block; font-size: var(--fs-small); font-weight: 500; color: var(--txt-2); }
#hxSales .td .tt small { display: block; font-size: var(--fs-cap); color: var(--txt-3); margin-top: 1px; }
#hxSales .td .tn { font-family: var(--font-display); font-size: 22px; font-weight: 600; line-height: 1; }
#hxSales .td.b .tn { color: var(--blue); } #hxSales .td.a .tn { color: var(--amber); } #hxSales .td.r .tn { color: var(--red); }
#hxSales .td .tn i { font-style: normal; font-size: var(--fs-cap); font-weight: 400; color: var(--txt-3); margin-left: 3px; }

/* ================= 会话三栏 ================= */
#hxSales #v-chat { display: flex; flex-direction: column; flex: 1; min-height: 0; }
#hxSales #v-chat.hidden { display: none; }
#hxSales #v-chat .today { flex: none; }
#hxSales .chat { display: grid; grid-template-columns: 308px minmax(0, 1fr) 330px; gap: 14px; flex: 1; min-height: 0; }
#hxSales .pane { background: var(--sunken); border-radius: 15px; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
#hxSales .pane > header { flex: none; padding: 15px 16px 11px; }
#hxSales .pane > header .ph { display: flex; align-items: center; gap: 9px; }
#hxSales .pane > header h2 { font-size: 14px; font-weight: 600; }
#hxSales .pane > header .cnt { font-size: var(--fs-cap); font-weight: 600; color: var(--txt-3); background: var(--surface); border-radius: 6px; padding: 2px 8px; }
#hxSales .pane > header .sub { font-size: var(--fs-cap); color: var(--txt-3); margin-top: 3px; }
#hxSales .pf { display: flex; gap: 5px; margin-top: 10px; }
#hxSales .pf button { font-family: inherit; font-size: var(--fs-cap); font-weight: 500; color: var(--txt-3); background: var(--surface); border: 1px solid transparent; border-radius: 8px; padding: 5px 10px; cursor: pointer; transition: .13s var(--ease); }
#hxSales .pf button:hover { color: var(--txt-2); }
#hxSales .pf button.on { color: var(--txt); background: var(--blue-soft); border-color: var(--blue-line); }
#hxSales .pf button .n { margin-left: 5px; opacity: .75; }
#hxSales .plat { font-size: var(--fs-cap); flex: none; font-weight: 500; }
#hxSales .plat.dy { color: var(--txt-3); }
#hxSales .plat.wx { color: var(--green); }

#hxSales .list { overflow-y: auto; padding: 0 9px 10px; display: flex; flex-direction: column; gap: 5px; }
#hxSales .ct { display: flex; gap: 11px; align-items: flex-start; background: transparent; border: 1px solid transparent; border-radius: 12px; padding: 10px 11px; cursor: pointer; transition: .13s var(--ease); text-align: left; font-family: inherit; font-size: var(--fs-body); color: inherit; width: 100%; }
#hxSales .ct:hover { background: var(--surface); }
#hxSales .ct.on { background: var(--blue-soft); border-color: var(--blue-line); }
#hxSales .av { width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--blue-soft); color: var(--blue); display: grid; place-items: center; font-size: var(--fs-small); font-weight: 600; }
#hxSales .ct.on .av { background: var(--blue); color: #fff; }
#hxSales .ct .cm { flex: 1; min-width: 0; }
#hxSales .ct .cm .r1 { display: flex; align-items: center; gap: 7px; }
#hxSales .ct .cm strong { font-size: var(--fs-small); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#hxSales .ct .cm .tm { margin-left: auto; font-size: var(--fs-cap); color: var(--txt-3); flex: none; }
#hxSales .ct .cm .r2 { display: flex; align-items: center; gap: 7px; margin-top: 2px; }
#hxSales .ct .cm p { font-size: var(--fs-cap); color: var(--txt-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
#hxSales .ct .cm .plat { font-size: var(--fs-cap); flex: none; }
/* ★ 2026-10-12 波哥定：红点改**纯圆点**（去掉里面那个感叹号），跟微信/抖音的未读提示一致；
   判定同时改成"真已读"（见 smUnread：存在客户消息 seq>read_seq）。 */
#hxSales .ct .dot { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--red); }

#hxSales .conv { background: var(--sunken); border-radius: 15px; display: flex; flex-direction: column; min-height: 0; }
#hxSales .conv > header { flex: none; display: flex; align-items: center; gap: 11px; padding: 13px 18px; background: var(--canvas); border-radius: 15px 15px 0 0; }
#hxSales .conv > header .hwho { flex: 1; min-width: 0; }
#hxSales .conv > header .hwho .l1 { display: flex; align-items: center; gap: 9px; }
#hxSales .conv > header .hwho strong { font-size: 14px; font-weight: 600; }
#hxSales .conv > header .hwho .l2 { font-size: var(--fs-cap); color: var(--txt-3); margin-top: 2px; }
#hxSales .msgs { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 22px; display: flex; flex-direction: column; gap: 14px; background: var(--canvas); }
#hxSales .msgs > :first-child { margin-top: auto; }
#hxSales .msg { display: flex; gap: 9px; max-width: 74%; }
#hxSales .msg.out { align-self: flex-end; flex-direction: row-reverse; }
/* ★ 2026-10-13 波哥报「有的气泡正好包住字、有的后面空一大截，要统一成按文字撑满」。
   根因（浏览器实测，非估算）：气泡外面那层 div 的宽度 ＝ 它下面那行**时间戳**的宽度。
   实测「测试」两个字实宽 27px，气泡内容宽却 83px（多出 56px），而那层外框正好 111px ＝ 时间戳 111px。
   气泡是块级元素、默认占满外框 ⇒ 文字比时间戳短时就被撑出一截空白；
   文字比时间戳长时（实测「理理人家好不好」95 vs 97）刚好贴住，所以看着「有的正常有的不正常」。
   修法：气泡改成**按内容宽度收缩**（fit-content）⇒ 永远只包住自己的字；出站再加 margin-left:auto
   让它靠右、与时间戳右缘对齐（跟微信一致）。文字长于可用宽度时行为完全不变（照旧在该处换行）。 */
#hxSales .msg .bub { border-radius: 13px; padding: 10px 14px; font-size: var(--fs-body); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; width: fit-content; max-width: 100%; }
#hxSales .msg.out .bub { margin-left: auto; }
#hxSales .msg.in .bub { background: var(--raised); color: var(--txt); border: 1px solid var(--line); border-top-left-radius: 4px; }
#hxSales .msg.out .bub { background: var(--blue); color: #fff; border-top-right-radius: 4px; }
#hxSales .msg .meta { font-size: var(--fs-cap); color: var(--txt-3); margin-top: 5px; }
/* 消息下面只在"真出问题"时才说话，且说人话（2026-10-10 波哥定：不要"待核对"这类内部词，要像正常聊天框）。 */
#hxSales .msgs .msg .meta .sm-bad { color: var(--red); font-weight: 600; }
#hxSales .msg.out .meta { text-align: right; }
#hxSales .msg .who { width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--blue-soft); color: var(--blue); display: grid; place-items: center; font-size: var(--fs-cap); font-weight: 600; }

#hxSales .compose { flex: none; padding: 10px 18px 14px; }
#hxSales .compose .aihint { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
#hxSales .compose .aihint .grow { flex: 1; }
#hxSales .chip { font-family: inherit; font-size: var(--fs-cap); color: var(--txt-3); background: var(--surface); border: 1px solid transparent; border-radius: 7px; padding: 4px 9px; cursor: pointer; transition: .13s var(--ease); }
#hxSales .chip:hover { color: var(--txt-2); }
#hxSales .chip.on { color: var(--txt); background: var(--blue-soft); border-color: var(--blue-line); }
#hxSales .compose .field { display: flex; align-items: flex-end; gap: 10px; background: var(--canvas); border: 1px solid var(--line-2); border-radius: 12px; padding: 9px 9px 9px 14px; transition: border-color .15s var(--ease); }
#hxSales .compose .field:focus-within { border-color: var(--blue-line); }
#hxSales .compose .field .btn { flex: none; margin-bottom: 1px; }
#hxSales .compose textarea { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--txt); font-family: inherit; font-size: var(--fs-body); resize: none; outline: none; height: 64px; line-height: 1.6; padding: 0; }
#hxSales .compose textarea::placeholder { color: var(--txt-3); }

/* AI 拟稿正文（真机有 AI 批次时才出现；照 .prof .quote 的卡片口径，避免裸文本） */
#hxSales .compose .ai-preview { background: var(--surface); border-radius: 11px; padding: 10px 12px; margin-bottom: 8px; font-size: var(--fs-cap); color: var(--txt-2); line-height: 1.65; white-space: pre-wrap; word-break: break-word; }
/* 已保存、待发送的回复：折叠卡片（同 .prof .quote 口径） */
#hxSales .compose .pending-replies { background: var(--surface); border-radius: 11px; padding: 4px 12px; margin-bottom: 8px; }
#hxSales .compose .pending-replies summary { cursor: pointer; font-size: var(--fs-cap); color: var(--txt-3); padding: 7px 0; list-style: none; }
#hxSales .compose .pending-replies summary::-webkit-details-marker { display: none; }
#hxSales .compose .pending-replies .pr { padding: 9px 0; border-top: 1px solid var(--line); }
#hxSales .compose .pending-replies .pr p { font-size: var(--fs-cap); color: var(--txt-2); line-height: 1.6; margin-bottom: 6px; white-space: pre-wrap; word-break: break-word; }

#hxSales .prof { display: flex; flex-direction: column; overflow-y: auto; background: var(--sunken); border-radius: 15px; padding: 14px 15px; }
#hxSales .prof > * { flex: none; }
#hxSales .prof .quote { background: var(--surface); border-radius: 11px; padding: 10px 12px; font-size: var(--fs-cap); color: var(--txt-2); line-height: 1.65; }
#hxSales .prof .quote small { display: block; color: var(--txt-3); margin-top: 6px; }
#hxSales .prof .notes { flex: none; display: flex; flex-direction: column; background: var(--surface); border-radius: 11px; padding: 12px 13px; font-size: var(--fs-cap); color: var(--txt-2); line-height: 1.7; }
#hxSales .prof .notes p { margin-bottom: 8px; }
#hxSales .prof .notes p:last-of-type { margin-bottom: 0; }
#hxSales .prof .notes small { display: block; margin-top: auto; padding-top: 9px; border-top: 1px solid var(--line); color: var(--txt-3); }
#hxSales .prof .who2 { display: flex; align-items: center; gap: 11px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
#hxSales .prof .who2 .av { width: 40px; height: 40px; font-size: 14px; }
#hxSales .prof .who2 strong { display: block; font-size: 14px; font-weight: 600; }
#hxSales .prof .who2 small { font-size: var(--fs-cap); color: var(--txt-3); }
#hxSales .prof h3 { font-size: var(--fs-cap); font-weight: 600; color: var(--txt-3); letter-spacing: .4px; margin: 13px 0 7px; }
#hxSales .dl { display: flex; flex-direction: column; gap: 6px; }
#hxSales .prof .dl { background: var(--surface); border-radius: 11px; padding: 11px 13px; flex: 1 1 auto; justify-content: space-between; }
#hxSales .dl .dr { display: flex; gap: 10px; font-size: var(--fs-cap); align-items: baseline; padding: 3px 0; }
#hxSales .dl .dr dt { color: var(--txt-3); width: 62px; flex: none; }
#hxSales .dl .dr dd { color: var(--txt-2); flex: 1; min-width: 0; word-break: break-all; }
#hxSales .dl .dr dd strong { color: var(--txt); font-weight: 500; }
#hxSales .prof .acts { display: flex; gap: 8px; margin-top: 14px; }
#hxSales .prof .acts .btn { flex: 1; text-align: center; }

/* ================= 列表页 ================= */
#hxSales .ops { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
#hxSales .ops .grow { flex: 1; }
#hxSales .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
#hxSales .st { background: var(--surface); border-radius: 13px; padding: 14px 16px; }
#hxSales .st b { display: block; font-family: var(--font-display); font-size: 24px; font-weight: 600; line-height: 1.2; }
#hxSales .st small { font-size: var(--fs-cap); color: var(--txt-3); }
#hxSales .st.g b { color: var(--green); } #hxSales .st.a b { color: var(--amber); } #hxSales .st.bl b { color: var(--blue); }

#hxSales .panel { background: var(--sunken); border-radius: 15px; padding: 6px; }
#hxSales .thead { display: grid; gap: 14px; padding: 9px 15px 8px; font-size: var(--fs-cap); color: var(--txt-3); font-weight: 600; letter-spacing: .3px; }
#hxSales .row { display: grid; align-items: center; gap: 14px; background: var(--surface); border-radius: 12px; padding: 11px 15px; margin-bottom: 5px; min-height: 62px; transition: .13s var(--ease); }
#hxSales .row:hover { background: var(--raised); }
#hxSales .row .ttl { min-width: 0; }
#hxSales .row .ttl strong { display: block; font-size: var(--fs-small); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#hxSales .row .ttl small { display: block; font-size: var(--fs-cap); color: var(--txt-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
#hxSales .row .c { font-size: var(--fs-cap); color: var(--txt-2); min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#hxSales .row .c.dim { color: var(--txt-3); }
#hxSales .row .rt { text-align: right; white-space: nowrap; }
#hxSales .prog { height: 4px; border-radius: 3px; background: var(--canvas); overflow: hidden; margin-top: 7px; }
#hxSales .prog i { display: block; height: 100%; background: var(--blue); border-radius: 3px; }
#hxSales .prog.g i { background: var(--green); }

/* ================= 卡片网格 ================= */
#hxSales .grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 13px; }
#hxSales .card { background: var(--surface); border-radius: 14px; overflow: hidden; transition: .15s var(--ease); cursor: pointer; text-align: left; font-family: inherit; color: inherit; border: 0; padding: 0; }
#hxSales .card:hover { background: var(--raised); }
#hxSales .card .cover { height: 214px; background: linear-gradient(135deg, var(--cover-1), var(--cover-2)); display: grid; place-items: center; color: var(--txt-3); position: relative; }
#hxSales .card .cover svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 1.6; }
#hxSales .card .cover .corner { position: absolute; top: 9px; right: 9px; }
#hxSales .card .cbody { padding: 12px 13px 14px; }
#hxSales .card .cbody strong { display: block; font-size: var(--fs-small); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#hxSales .card .cbody p { font-size: var(--fs-cap); color: var(--txt-3); margin-top: 4px; line-height: 1.6; height: 38px; overflow: hidden; }
#hxSales .card .cbody .cf { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line); }
#hxSales .card .cbody .cf small { font-size: var(--fs-cap); color: var(--txt-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#hxSales .card .cbody .cf .cp { margin-left: auto; flex: none; }

#hxSales .hidden { display: none; }
#hxSales .note { font-size: var(--fs-cap); color: var(--txt-3); padding: 10px 4px 0; }

/* ===== 真实数据下才用得到的少量补充（小样没有空态，真数据为空时显示） ===== */
#hxSales .msg-status { font-size: var(--fs-cap); color: var(--txt-3); text-align: center; line-height: 1.7; margin: auto; }
#hxSales .sm-empty { background: var(--sunken); border-radius: 15px; padding: 54px 28px; text-align: center; }
#hxSales .sm-empty h3 { font-size: 15px; font-weight: 600; }
#hxSales .sm-empty p { font-size: var(--fs-cap); color: var(--txt-3); margin-top: 8px; line-height: 1.7; }
#hxSales .sm-err { background: var(--red-soft); color: var(--red); border-radius: 10px; padding: 10px 13px; font-size: var(--fs-cap); margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }

/* ================= 2026-10-08 修复：小样搬进真实页后被“系统全局同名样式”污染 + 下拉打不开 =================
   背景：main.css 里有一批**全局**通用类样式（.msg/.conv/.quote/.field/.av，见 main.css 第 109、275-365、1925 行，
   是工作台聊天等页面在用的），会把“小样没写、它却写了”的属性漏进本板块 —— #hxSales 前缀只挡得住“同名属性被覆盖”。
   这里只在本板块内把漏进来的属性显式写回小样的值，**不改 main.css、不动 JS**。
   另：本页下拉改用浏览器原生 <details>，原来的 .menu{display:none} 会让它永远打不开，这里补上“展开态”。 */
#hxSales .msgs .msg { margin-bottom: 0; }              /* main.css .msg 漏进 24px → 消息被撑稀（14→38px） */
#hxSales .conv { padding-top: 0; }                     /* main.css .conv 漏进 4px */
#hxSales .prof .quote { border-left: 0; }              /* main.css .quote 漏进 2px 蓝竖线 */
#hxSales .compose .field { margin-bottom: 0; }         /* main.css .field 漏进 18px */
#hxSales .av { font-family: inherit; }                 /* main.css .av 漏进标题字体 */
#hxSales .conv > header .tools { display: flex; align-items: center; gap: 11px; flex: none; } /* 头部按钮组按小样给 11px 间距（真实页包了一层 .tools） */
#hxSales details.more > .menu { display: none; }       /* 收起态（<details> 未 open） */
#hxSales details.more[open] > .menu { display: block; }/* 展开态：小样靠 .menu.on，真实页用 <details> */
#hxSales summary { list-style: none; }                 /* 去掉 <summary> 自带的小三角（小样用的是自定义箭头） */
#hxSales summary::-webkit-details-marker { display: none; }

/* ================= 2026-10-08 追加（波哥要求） ================= */
/* ③ 底色统一（第二轮修正：上版改黑太黑、且没做浅色方案）——
   聊天区 / 对话框 + 项目下拉 + 三张长卡片，全部改成「右侧客户资料板块」的底色 var(--sunken)。
   深浅主题自动适配（本文件已为 #hxSales 定义 --sunken：深=oklch(14%)，浅=oklch(96%)）。
   注：页面最外层底保持原样（比这些块略亮，卡片边界还在），如需连外底一起同色再说。 */
#hxSales .conv, #hxSales .conv > header, #hxSales .msgs, #hxSales .compose .field { background: var(--sunken); }
/* ② 客户备注卡高度对齐小样（小样 112px；真数据备注较短会矮一截，给个下限撑齐） */
#hxSales .prof .notes { min-height: 112px; }

/* ================= 2026-10-08 追加（第四轮：流畅度） ================= */
/* 销售管家不参与系统统一的整页淡入（main.css 的 .page{animation:fade .6s}）。
   小样本就没有这个淡入；它会让「切到销售管家」时有约半秒"从全透明浮出来"的糊感。
   只关本页，不动系统的 .page，其他板块不受影响。 */
#page-sales { animation: none; }

/* ================= 2026-10-10 追加（朋友圈弹窗 · 配图选材） ================= */
/* 选材卡片**直接复用「AI 项目中心」素材库那套** .mat-card / .mc-th / .mc-nm / .mc-meta
   （main.css 里的全局类，所以这里一个字都不重复定义），只补它没有的两样：
     ① 选中态 —— 视觉**照抄**视频中心「智能混剪」的 .mx-mat.on（蓝边 + 蓝光晕 + 右上蓝圆白勾），
        保证同一套"能勾选的素材卡"在全站长得一样；
     ② 网格列宽收一档，弹窗里一屏能多看几张。
   （2026-10-10 波哥定：朋友圈发不了视频 ⇒ 选材区只列图片，所以没有"视频卡"这一态 —— 见 smMatCard。）
   ⚠️ 弹窗挂在 body 上（不在 #hxSales 里），所以这里按弹窗 id 限定作用域，不影响别处；
      弹窗的滚动条样式统一在 acquisition-workspace.css 里跟 #hxSales 共用一套，不在这里重复写。 */
#hxWorkspaceDialog .sm-mats { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; margin: 2px 0 6px; }
/* 卡片本体是 <button>（本页点击处理只认 button），所以把浏览器默认的按钮样式抹平，
   让它和「AI 项目中心」素材库里的 .mat-card 长得一模一样 —— 只动盒模型，不动任何颜色/圆角。 */
#hxWorkspaceDialog .sm-mat { cursor: pointer; padding: 0; width: 100%; font: inherit; text-align: left; color: inherit; }
#hxWorkspaceDialog .sm-mat.on { border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue-soft); }
#hxWorkspaceDialog .sm-mat .sm-ck { position: absolute; right: 6px; top: 6px; width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.62); background: oklch(14% .011 258/.5); display: grid; place-items: center;
  color: #fff; z-index: 2; transition: .22s var(--ease); }
#hxWorkspaceDialog .sm-mat .sm-ck svg { width: 10px; height: 10px; opacity: 0; transform: scale(.5); transition: .22s var(--ease); }
#hxWorkspaceDialog .sm-mat.on .sm-ck { background: var(--blue); border-color: var(--blue); }
#hxWorkspaceDialog .sm-mat.on .sm-ck svg { opacity: 1; transform: none; }
/* 文件名给**两行**：素材名普遍很长（如「朋友圈｜朋友圈调性：松弛生活感，暖光胶片质感，像.jpg」），
   项目中心那边只给一行 ⇒ 截成一个词，十几张图根本分不清哪张是哪张。这里放到两行、并留出两行的高度，
   让一行名和两行名的卡片看起来一样整齐（字号/颜色沿用 .mc-nm，没改）。 */
#hxWorkspaceDialog .sm-mat .mc-nm { white-space: normal; line-height: 1.45; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 46px; }

/* ================= 2026-10-10 追加（朋友圈卡片：真实封面 + 删记录） ================= */
/* 封面图铺满整个 .cover（原占位图标照旧铺在底下，图加载好再盖上去）；状态角标 / 张数浮在图上。 */
#hxSales .card .cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#hxSales .card .cover .mcount { position: absolute; left: 9px; bottom: 9px; z-index: 2; font-size: var(--fs-cap);
  font-weight: 600; color: #fff; background: oklch(14% .011 258/.72); border-radius: 5px; padding: 1px 7px; }
/* ★ 2026-10-10 波哥定：删除按钮**挪到卡片右边** —— 原来压在预览图左上角，既挡图又容易误点。
   做法：标题行 `.chd` 改成两端对齐的 flex，标题占满（可省略），删除按钮钉在右端、不被压缩。 */
#hxSales .card .cbody .chd { display: flex; align-items: flex-start; gap: 8px; }
#hxSales .card .cbody .chd strong { flex: 1 1 auto; min-width: 0; }
/* 删除按钮的视觉**照抄系统统一删除按钮**（项目中心 .pmod-del2：素底 + 细边 + 灰图标、悬停转红），
   只是这里不带文字，做成 26px 方形图标按钮；垃圾桶图标与项目中心完全同一段 SVG。 */
#hxSales .card .cbody .chd .card-del { flex: none; width: 26px; height: 26px; margin-top: -2px; padding: 0; cursor: pointer;
  border: 1px solid var(--line-2); border-radius: 8px; background: var(--sunken); color: var(--txt-3);
  display: grid; place-items: center; transition: .18s var(--ease); }
#hxSales .card .cbody .chd .card-del svg { width: 14px; height: 14px; }
#hxSales .card .cbody .chd .card-del:hover { border-color: #e5484d; color: var(--red); background: var(--red-soft); }

/* ── 「陌生人来信」清单弹窗（2026-10-14 · 波哥反馈「点转为客户那一下的页面丑」）────────────
   ★ 根因不是排版，是**样式根本没生效**：这个弹窗由 openDialog 造在 <body> 下、**在 #hxSales 之外**，
     而 `.btn` / `.badge` 都是 `#hxSales .btn` 带前缀的 ⇒ 一个都够不到，按钮退回浏览器默认白方块、
     渠道和手机名退化成一坨纯文字。修法＝组件一律改用**全局件** `hxw-btn` / `hxw-badge`，
     再补这几条**只做间距**的规则（颜色/圆角/字号全部沿用现成 token，不新造视觉）。
   ⚠️ 这也是本项目的老坑：「外挂弹窗不吃 #hxSales 作用域」—— 以后往弹窗里放东西，先看样式有没有前缀。 */
.hxw-stranger-list > * + * { margin-top: 16px; }
.hxw-stranger-list .hxw-detail > * + * { margin-top: 14px; }

/* ── 工作台「陌生人来信」提醒条：把它从"一句灰字"调成"一眼看得见的提醒"（2026-10-14 · 波哥要求更显眼）──
   基底仍是现成的 .hxw-note，只把语气从"中性"调到"待办"：蓝框 + 蓝底 + 图标 + 数字放大。 */
#hxSales .sm-stranger-bar { align-items: flex-start; gap: 12px; padding: 14px 16px; border-color: var(--blue-line); background: var(--blue-soft); }
#hxSales .sm-stranger-bar .ic { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--blue); color: #fff; }
#hxSales .sm-stranger-bar .ic svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#hxSales .sm-stranger-bar .tt { min-width: 0; font-size: 13px; font-weight: 600; color: var(--txt); line-height: 1.55; }
#hxSales .sm-stranger-bar .tt b { font-size: 15px; }
#hxSales .sm-stranger-bar .tt small { display: block; margin-top: 3px; font-size: 12px; font-weight: 400; color: var(--txt-2); }
#hxSales .sm-stranger-bar .rt { margin-left: auto; flex: none; align-self: center; }
/* 小屏适配（2026-10-22 第 1 批）：聊天三栏在 ≤1536 / ≤1280 收窄，
   把宽度还给中间对话区；原 308/1fr/330 在 1280 下中间只剩 302px，头部会竖排。 */
@media (max-width: 1536px) {
  #hxSales .chat { grid-template-columns: 260px minmax(0, 1fr) 300px; gap: 12px; }
}
@media (max-width: 1280px) {
  #hxSales .chat { grid-template-columns: 240px minmax(0, 1fr) 280px; gap: 10px; }
}