/* ══════════════════════════════════════════════════════════════════
chatlog.css —— 聊天记录站（顶栏第 5 站 · 由假壳转真，2026-09-19）
设计口径：产品核心之一「消息可回看」；形态由用户 2026-09-19 拍板
「两种都要，顶部切换」= ① 会话（按会话聚合）② 流水（按时间倒排）。
数据口径：backend/app/routes/collector.py 的 `GET /collector/messages`（**只读**）
结构范式：app/css/kb.css / train.css / settings.css（站头通栏 + 内容层 + 窄窗兜底）
纪律（引前已机械核过，命令见交付回报）：
1. 本文件**不得出现字面色值**，一律 var() 令牌（四主题共用结构、只换令牌值）。
2. 类名一律 `cl-` 前缀 + 内容层 `#chatlogbody`；`.cl-` / `#chatlogbody` /
`data-cl*` 在本仓**引前 0 命中**（R58 同族：命名撞车必须提前查）。
3. `--warn` 四主题里只有 **1 处**定义（实测）⇒ 本文件**不用**它，
风险色一律 `--danger` / `--danger-text`（各 4 处，与四主题对齐）。
4. ★ **正文是用户与客户的真实聊天内容** ⇒ 渲染层必须 `esc`（XSS 面在 js 侧守）。
══════════════════════════════════════════════════════════════════ */
.chatlog{display:none;flex:1 1 auto;min-width:0;min-height:0;flex-direction:column;
background:var(--e2)}
.app.chatlogmode > .list,
.app.chatlogmode > .chat,
.app.chatlogmode > .side,
.app.chatlogmode > .spl{display:none}
.app.chatlogmode > #chatlogbody{display:flex}
/* ── 站头（44px）──────────────────────────────────────────────────── */
.cl-hd{display:flex;align-items:center;gap:9px;flex:none;height:44px;padding:0 14px;
border-bottom:1px solid var(--line);background:var(--e1)}
.cl-ttl{font-size:var(--fs-small);color:var(--t1);font-weight:500;white-space:nowrap}
.cl-sep{width:1px;height:14px;background:var(--line-strong);flex:none}
.cl-tag{font-size:var(--fs-micro);color:var(--t2);padding:1px 7px;border-radius:var(--r-full);
border:1px solid var(--line);white-space:nowrap}
.cl-tag.ro{border-color:var(--accent);color:var(--accent-text)}
.cl-sp{flex:1 1 auto;min-width:0}
.cl-read{font-size:var(--fs-micro);color:var(--t3);white-space:nowrap;
font-family:var(--font-num)}
.cl-read b{color:var(--t1);font-weight:500}
.cl-read .down{color:var(--danger-text)}
/* ── 接收暂停行（连接态的唯一落点 · 规格 §1.3/§1.4）────────────────────
★ 与对话站 `.recv-pause`（`app/css/chat.css`）**同一句话、同一形态**：`font-size` / `color` /
**上下留白**三项**逐字同值**（基准 = `.offline` = `font-size:11px; color:var(--t3)`）——
免得"同一句话在两个站长得不一样"（同族：符号不同形 ⇒ 需配图例）。
类名独立成 `.recv-pause`，**绝不复用 `.offline`** —— 对话站既有判据 `m3.send.file.offline`
按 `.offline` 计数，复用类名会污染它。形态 = 全宽一行 / **无图标、无底色、无描边、不可点**；
出现与消失都**不加动画**、不弹 toast（规格 §1.4/§2.6）。零字面色值（唯二例外之外，本单 0 新增）。
⚠ 作用域用 `#chatlogbody >` 限定：`chat.css` 在 `chatlog.css` **之前**加载，
同特异性下后加载者胜且静默（`R57`）⇒ 用 id 提高特异性，彻底避开跨文件覆盖。 */
#chatlogbody > .recv-pause{flex:none;font-size:11px;color:var(--t3);padding:0 14px 6px}
/* ── 顶部切换条（视图二选一 + 检索）───────────────────────────────── */
/* ★ 常驻、不藏二级页 —— 与「中栏筛选行」同一条产品纪律：
监督台的核心维度必须一眼可见，同时它也是本页唯一的形态开关。
⚠★ 2026-09-25 修正（LEAD-A 代行 · 视觉批）：本块与下方两处行框线原写 `--hairline`，
而该令牌 **A/B 两主题是 `transparent`**（`tokens.css` 原文「亮色专用 1px 发丝线；深色下 transparent」），
只有 C/D 有值 ⇒ **默认主题下这三处边线整片消失**，且不报错、不出图差异。
★ 同族佐证：紧邻的 `.cl-hd`（同一条站头/工具条族）本来就用 `--line` ——
**两条同族的横线一个有一个没有**，是「同族不同形」而不是设计意图。
一律改用 `--line`（四主题都不透明）。判据：本件对 `--hairline` 的 `var()` 引用数 3 → 0。 */
.cl-bar{display:flex;align-items:center;gap:10px;flex:none;height:40px;padding:0 14px;
border-bottom:1px solid var(--line);background:var(--e1)}
.cl-views{display:flex;gap:2px;flex:none;padding:2px;border-radius:var(--r-sm);
background:var(--e3)}
.cl-v{font-size:var(--fs-caption);color:var(--t2);padding:3px 12px;border-radius:var(--r-xs);
cursor:pointer;white-space:nowrap;display:flex;align-items:center;gap:6px}
.cl-v:hover{color:var(--t1)}
/* ⚠★ 2026-09-25 修正（LEAD-A 代行）：原把 `--s2` 当颜色用在 `background` 上，而 `--s2` 是**圆角半径**（`8px`），
不是颜色 —— 全仓把 `--s2` 当底色的只有本件这 2 处，其余站一律用 `--accent-wash` / `--sel` / `--face-on`。
`background:8px` 是**合法语法但语义是 background-position** ⇒ 底色留在 initial(transparent)，
**四主题下这叫"选中"的胶囊都没有底**，只靠字重/字色区分 —— 比"只坏两主题"更隐蔽。
现改 `--accent-wash` + `--accent-text`，与 `.chat-hd .hd-side.on` / `.seg3 .m.on` / `.chipbtn.on`
/ `.kb-ritem.on` / `.set-ritem.on` **同款语义色**（选中 = accent 家族，全站一致）。
★ 判据两条（都见交付件）：① 静态 —— 本件对 `--s2` 的 `var()` 调用数 2 → 0；
② 动态 —— 浏览器实测该元素 `background-color` 的 α 由 0 → 1（四主题各取一次）。 */
.cl-v.on{background:var(--accent-wash);color:var(--accent-text);font-weight:500}
.cl-v .n{font-family:var(--font-num);font-size:var(--fs-micro);color:var(--t3)}
.cl-v.on .n{color:var(--t2)}
/* 检索框：底走全仓**语义令牌** `--inputbg`（`tokens.css` 里 = `--e4`，`customers.css` 三处输入框同款）。
原把 `--s2`（半径）当底色 —— 与上面那条**同一个错因**。 */
.cl-sbox{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:7px;height:26px;
padding:0 9px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--inputbg);
color:var(--t3)}
.cl-sbox input{flex:1 1 auto;min-width:0;border:0;outline:0;background:transparent;
color:var(--t1);font-family:var(--font-ui);font-size:var(--fs-caption)}
.cl-sbox input::placeholder{color:var(--t3)}
.cl-sbox .go{flex:none;font-size:var(--fs-micro);color:var(--accent-text);cursor:pointer;
padding:2px 6px;border-radius:var(--r-xs)}
.cl-sbox .go:hover{background:var(--e3)}
.cl-hint{flex:none;font-size:var(--fs-micro);color:var(--t3);white-space:nowrap}
/* ── 内容区（**本站唯一滚动容器**）─────────────────────────────────
⚠ min-height:0 不能省：父级是 flex 列，缺了它滚动区会被内容撑高、
页面**不报错**却永远滚不到底（本仓审计项的固定检查点）。 */
.cl-body{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:10px 14px 18px;
display:flex;flex-direction:column;gap:8px}
.cl-body:focus{outline:none}
/* ── 空 / 错 / 降级 ────────────────────────────────────────────────
★ 三态必须**同形可辨**（R78）：空 ≠ 取不到 ≠ 还没请求。
全都画成"暂无数据"是本仓头号忌讳 —— 用户会以为采集坏了。 */
.cl-empty{margin:auto;text-align:center;color:var(--t3);font-size:var(--fs-caption);
display:flex;flex-direction:column;gap:6px;max-width:520px;line-height:1.6}
.cl-empty .big{font-size:var(--fs-small);color:var(--t2)}
/* ★「取数中」**独立成类**，不与 `.cl-empty` 合并（理由见 chatlog.js render()：
合并会让"还没取回来"与"取回来了但是空的"在选择器上同形，
出图/判据的"等结果元素出现"会提前放行）。视觉上两者确实不同，选择器也不该把它们并成一个。 */
.cl-busy{margin:auto;color:var(--t3);font-size:var(--fs-caption)}
.cl-note{font-size:var(--fs-micro);color:var(--t3);line-height:1.65;text-align:left}
.cl-note code{font-family:var(--font-num);font-size:var(--fs-micro);padding:0 4px;
border-radius:var(--r-xs);background:var(--e3);color:var(--t1)}
.cl-err{border:1px dashed var(--danger);border-radius:var(--r-sm);padding:10px 12px;
color:var(--danger-text);font-size:var(--fs-caption);background:var(--e1)}
.cl-snap{border:1px dashed var(--line-strong);border-radius:var(--r-sm);padding:6px 10px;
font-size:var(--fs-micro);color:var(--t3);background:var(--e1)}
/* ── 会话行（view=convs）───────────────────────────────────────────
★ 行结构统一「名字 + 一行副标题 + 右侧最多一个状态」（复杂度红线 ②）：
名字 = 会话名；副标题 = 最后一条正文；右侧 = 条数 + 最后时刻。
⚠★ 2026-09-25 修正（LEAD-A 代行）：框线原写 `--hairline`（A/B 主题下 transparent）⇒ 改用 `--line`。
不这么做时，默认主题下**每一行都没有框**，只剩一块贴背板的底色 ⇒ 列表读成"一片"，而不是"一行一行"。
同批同因两处：本块与下方 `.cl-msg`（理由与判据见顶部 `.cl-bar` 那段注释）。 */
.cl-row{display:flex;align-items:flex-start;gap:10px;padding:9px 11px;border-radius:var(--r-sm);
border:1px solid var(--line);background:var(--e1);cursor:pointer}
.cl-row:hover{border-color:var(--line-strong)}
.cl-row.on{border-color:var(--accent);background:var(--e3)}
.cl-av{flex:none;width:30px;height:30px;border-radius:var(--r-full);background:var(--e3);
color:var(--t2);font-size:var(--fs-caption);display:flex;align-items:center;justify-content:center}
.cl-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.cl-nm{display:flex;align-items:center;gap:8px;min-width:0}
.cl-nm .nm{font-size:var(--fs-small);color:var(--t1);white-space:nowrap;overflow:hidden;
text-overflow:ellipsis}
.cl-nm .ref{font-family:var(--font-num);font-size:var(--fs-micro);color:var(--t3);flex:none}
.cl-last{font-size:var(--fs-caption);color:var(--t2);white-space:nowrap;overflow:hidden;
text-overflow:ellipsis}
.cl-last .sp{color:var(--t3)}
.cl-side{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.cl-side .n{font-family:var(--font-num);font-size:var(--fs-num);color:var(--t1)}
.cl-side .t{font-family:var(--font-num);font-size:var(--fs-micro);color:var(--t3)}
/* ── 流水行（view=stream）──────────────────────────────────────────
★ 时间在最左、成列对齐 —— 流水视图的读法就是"顺着时间扫"。 */
.cl-msg{display:flex;align-items:flex-start;gap:10px;padding:8px 11px;border-radius:var(--r-sm);
border:1px solid var(--line);background:var(--e1)}
.cl-msg .tm{flex:none;width:96px;font-family:var(--font-num);font-size:var(--fs-micro);
color:var(--t3);line-height:1.6}
.cl-msg .bd{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.cl-msg .who{display:flex;align-items:center;gap:8px;min-width:0}
.cl-msg .who .nm{font-size:var(--fs-caption);color:var(--t2);white-space:nowrap;overflow:hidden;
text-overflow:ellipsis}
.cl-msg .who .kind{font-size:var(--fs-micro);color:var(--t3);border:1px solid var(--line);
border-radius:var(--r-full);padding:0 6px;flex:none}
.cl-msg .tx{font-size:var(--fs-caption);color:var(--t1);line-height:1.65;white-space:pre-wrap;
word-break:break-word}
.cl-msg .tx.empty{color:var(--t3)}
/* 分段（「点回原文」的原料）：说话人 + 时间戳都上屏，不合并成一段 */
.cl-seg{display:flex;gap:8px;font-size:var(--fs-caption);line-height:1.65}
.cl-seg .s{flex:none;color:var(--t3);font-family:var(--font-num);font-size:var(--fs-micro);
min-width:44px}
.cl-seg .x{flex:1 1 auto;min-width:0;color:var(--t1);white-space:pre-wrap;word-break:break-word}
/* 红线命中：**只标不藏** —— 本站是回看口，不是发送口；把它藏掉等于让复核看不见 */
.cl-sens{flex:none;font-size:var(--fs-micro);color:var(--danger-text);
border:1px solid var(--danger);border-radius:var(--r-full);padding:0 6px;white-space:nowrap}
/* 语音转文字标识（2026-10-15）：文字是语音**自动转出来**的，非对方手打 —— 一眼可辨。
用 accent（强调色）区别于红线（danger）与中性 `kind`；`flex:none` 紧跟正文文字不换行。 */
.cl-voice-tag{flex:none;font-size:var(--fs-micro);color:var(--accent);
border:1px solid var(--accent);border-radius:var(--r-full);padding:0 6px;
line-height:1.6;white-space:nowrap}
/* ── 图片气泡（★ 2026-09-26 新增 · 图片链路第③步）─────────────────────
★ 三条口径都写在这里，因为它们是**同一条决定**的三个面：
① **不可点**：本站是**只读回看口**，图不给点击态、不做放大、不加 hover 光标 ——
复杂度红线 ④「不加 hover 才知道能点的东西」在这里的正确形态 = **根本不给可点态**。
② **宽度用百分比上限，不用固定 px**：`.bd` 是 flex 子项（`min-width:0`），
写死 px 会在窄宽断点（≤949px）下把行撑破；写成 `min(240px,100%)` 两头都成立。
③ **高度上限 220px**：聊天图多为长截图，不设上限时**一条流水能撑满整屏**
（那正是"静默把后面几十条挤到看不见"的形态）。
⚠ 尺寸只约束**显示**：原图字节不缩（`object-fit:cover` 只裁显示框）。
⚠ 不用 `--danger`/`--ok` 之类语义色：图片框是**中性容器**，借用语义色会让它的
存在看起来像一种状态（`R20`：改语义色前先 grep 全部用法 —— 这里干脆不借）。 */
.cl-imgs{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.cl-img{display:block;max-width:min(240px,100%);max-height:220px;object-fit:cover;
border:1px solid var(--line);border-radius:var(--r-sm);background:var(--e3)}
/* 「采集机取到了、字节还没到云」—— **必须与正常图可分辨**（`R78`）：
正常图是一块面色，它是**虚线框 + 文字**，一眼分得开。 */
.cl-img-ph{font-size:var(--fs-micro);color:var(--t3);border:1px dashed var(--line);
border-radius:var(--r-sm);padding:4px 8px;line-height:1.5}
/* ★ 2026-10-01（`media.js`）：字节要经 `fetch` 取回才设 `src` ⇒ 在取回之前 `![]()
` 没有 `src`，
而**没有 `src` 的 `![]()
` 尺寸是 0** ⇒ 屏上什么都没有，用户会读成"这里本来就没图"。
给一块可见的占位（底色已是 `.cl-img` 的 `--e3`，这里只补最小尺寸）。
⚠ 只在**没有 `src`** 时命中 ⇒ 取回后这条自动失效，不会跟真实图抢尺寸。 */
.cl-img:not([src]){min-width:120px;min-height:80px}
/* ── 「存到体态三视图」角标（★ 2026-10-01 傍晚 · 用户令；只在**对话站**出现）────────
用户原话：「联系人发了三张照片，我要保存到体态三视图，**选图即可保存**上传到对应」，
入口拍板**两处都放** —— 这里是缩略图那一处（另一处是大图浮层的动作条，见 `lightbox.css`）。
⚠ 结构上必须多一层 `.cl-imw`：角标要**贴着那张图**，而 `![]()
` 是空元素、放不了子节点。
⇒ `.cl-imw` 因此得**替 `.cl-img` 承担 `max-width`** —— 否则图里那句
`max-width:100%` 的 100% 会退化成"包裹层宽度"，窄窗下把行撑破。
（两者取小 ⇒ 行为与改前一致，不是本次引入的新约束。）
⚠ 角标**常驻可见**，不是 hover 才出现：本仓明令不许"hover 一下才知道能点"。
⚠ 色值只走 `css/tokens.css`（同本文件其余部分）。
⚠ 只在 `.cl-imw` 存在时才有角标 ⇒ **聊天记录站**（`chatlog.js` 的 `imgHtml` 不加这层）
渲染结果**逐字未变**：那边结构上没有 `conversation_id`，给不出可执行的动作。 */
.cl-imw{position:relative;display:inline-flex;max-width:min(240px,100%)}
.cl-lb{position:absolute;right:4px;bottom:4px;font:inherit;font-size:var(--fs-micro);line-height:1;
padding:3px 6px;border:1px solid var(--line2);border-radius:var(--r-xs);
background:var(--panel);color:var(--t1);cursor:pointer;opacity:.92}
.cl-lb:hover{opacity:1;background:var(--face-hover)}
.cl-lb:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* ── 窄窗（≤949，与 shell.css 的窄窗兜底同断点）───────────────────
★ 本站是**单列**信息流 ⇒ 窄窗只收「时间列宽」与「来源读数」，不做两栏折叠。
⚠ 收掉的是**辅助读数**，不是正文 —— 正文在任何宽度下都必须可读（头号忌讳是静默剪裁）。 */
@media (max-width:949px){
.cl-read{display:none}
.cl-views{flex:none}
.cl-hint{display:none}
.cl-msg .tm{width:auto}
.cl-body{padding:8px 10px 16px}
}