/* ═══════════════════════════════════════════════════════════════
   客服主页皮肤 v1.0 · 1:1 复刻 client-v2.html 的客服页（#p-messages）
   ───────────────────────────────────────────────────────────────
   性质：纯追加覆盖层。回滚：删除本文件 + 删除 index.html 中 1 行 link。
   机制：加载于既有样式之后，靠"同权重后者生效"覆盖；严禁 !important。
   ⚠ 本文件所有选择器一律加 `#msgListView ` 前缀（必需，不是为了好看）：
      `#page-messages` 内同时装着主页（#msgListView）与 4 个子视图
      （#chatView / #chatInfoView / 商品浮窗 #goodsOverlay / 转发浮窗 #forwardOverlay）。
      下列类名被子视图共用，不加前缀会误伤子页：
        .msg-search-input → #goodsOverlay（index.html:479）商品搜索框
        .msg-empty        → #forwardOverlay（messages.js:1065）转发空态
        .online-dot       → #chatView 聊天窗口顶栏（messages.js:77）
      加 `#msgListView ` 后：主页覆盖到位、4 个子视图零污染。
      （唯一例外：`.identity-badge.official` 按用户拍板覆盖全客服页，
        故用 `#page-messages ` 前缀 —— 见 §5 末注释）
   依赖：复用 skin-nearby.css 已声明的 :root 令牌。
   前缀策略（v2.0 起扩展为全页）：本文件现在覆盖客服页 **全部 5 个子视图 + 全部浮层**，
     按目标层级选用前缀，越内层越过：
       `#msgListView ` → 会话列表主页（错误 .msg-search-input / .online-dot 污染子页）
       `#chatView `     → 聊天窗口子视图
       `#chatInfoView ` → 聊天信息子视图
       `#historySearchView ` → 聊天记录搜索子视图
       `#goodsSearchBar ` → 商品面板内搜索框（与主页搜索栏共用 .msg-search-input，必须锁定）
       `#page-messages ` → 全客服页生效的通用规则（主题色替换 / 浮层 / .identity-badge）
     跨页共用组件（商品卡 / 帖子行）单独放在 `skin-blocks.css`，不在本文件重写。
   ⚠ 请勿把本文件任何规则写成无前缀（会外溢到其他页面）。
   保留的原类名/DOM（不得改名、不得重排，JS 依赖）：
     #msgListView / #msgTitleBar / #msgSearchBar / #msgScroll / #msgAnnounceBanner
     / #msgListSection / #msgEmpty / #msgLoginBtn / #msgUserAvatar / #msgUserName
     / #msgSearchBtn / .msg-swipe / .msg-swipe.pinned / .msg-swipe-action / .msg-swipe-action.pin-style
     / .msg-swipe-action-label / .msg-list-item[data-contact-id] / .msg-unread
     / .identity-badge.official / .online-dot / .msg-mute-icon
   实现说明：会话项沿用原 DOM 顺序，仅用 CSS 重绘外观；
     在线绿点借 .msg-avatar::after 绘制，原 .online-dot 以 display:none 隐去
     （DOM 保留 → 零 JS 改动、功能与逻辑链路完全不变）。
     ⚠ 2026-09-30：每行外层新增 `.msg-swipe`（左滑置顶滑轨，见 §17）——
       行内 DOM（.msg-avatar / .msg-info / .msg-meta）与类名全部未变，
       仅去掉已废弃的 `.delete-action` 与 `.no-swipe`；
       「已置顶」标记由 `.msg-list-item.pinned` 外移到 **`.msg-swipe.pinned`**（单一真相源）。
   ═══════════════════════════════════════════════════════════════ */

/* 主题色：本页为青绿（v2 客服页主题，与底导 [data-theme="messages"] 同色）。
   注：全站原 CSS（base/layout/nearby/circle/messages）从未使用 var(--theme)，
   故此处声明不会外溢到子视图 */
#page-messages{
  --theme:#0E9F94;
  --theme-active:#0A7C73;   /* ⚠ 值不可改：未读徽章 .msg-unread 取此色 */
  --theme-soft:#E6F7F5;
  /* 板块级内容色（商品 / 公示两个模块）——2026-09-27 二次整改：由蒂芙尼蓝改为「官方徽章」绿族。
     --blk-* = 徽章底色（淡绿）、--blk-*-ink = 徽章文字色（主题绿），
     与官方徽章 .identity-badge.official（--theme-soft 底 + --theme 字）逐值相同。
     保留令牌而不直接写字面值，是为了将来能一键改回蒂芙尼蓝：只改这 4 行，下方规则一行不动。
     改因：蒂芙尼蓝 #81D8D0 在白底上对比度仅 1.66:1，拿它做价格文字观感「发虚」。 */
  --blk-goods:var(--theme-soft);    --blk-goods-ink:var(--theme);
  --blk-notice:var(--theme-soft);   --blk-notice-ink:var(--theme);
  background:var(--canvas);
}

/* ───────────── §1 顶栏（54px，照 v2 .hd） ───────────── */
#msgListView .msg-title-bar{
  height:calc(54px + env(safe-area-inset-top,0px));
  padding:env(safe-area-inset-top,0px) 16px 0;
  border-bottom:none;                 /* v2 顶栏与内容连成一片，无发丝线 */
  background:var(--canvas);
  align-items:center;
}
#msgListView .msg-title-text{
  font-size:var(--t-title);           /* 24 → 20px */
  font-weight:700;
  letter-spacing:-.3px;
  line-height:1.3;
  color:var(--ink);
}
#msgListView .msg-title-actions{ gap:8px; }

/* 未登录：墨黑描边胶囊（v2 .btn-login；与已复刻的回收页/公示页同规格） */
#msgListView .msg-login-btn{
  width:auto; min-width:0; height:32px; padding:0 15px;
  background:none;
  border:1px solid var(--ink);
  border-radius:var(--r-full);
  color:var(--ink);
  font-size:var(--t-caption);
  font-weight:600;
  display:flex; align-items:center; justify-content:center;
  transition:transform 100ms ease-out;
}
#msgListView .msg-login-btn:active{ transform:scale(.95); }
/* 优先级需高于上方 display:flex，否则已登录时不隐藏 */
#msgListView .msg-login-btn.hidden{ display:none; }

/* 已登录（普通）：顶栏只保留搜索图标（见下方 .msg-search-btn）；
   用户名胶囊与头像一律不进顶栏。
   注：`#msgListView .msg-user-name` 的胶囊样式已删除（2026-09-27）——
   顶栏改为两态后 JS 恒写 `msgUserName.style.display='none'`（内联优先级高于 CSS），
   该规则永远不会生效，属死代码。DOM 元素与 id 仍保留（messages.js 会写 textContent）。 */
#msgListView .msg-user-avatar{ display:none; }   /* JS 亦已置 none，双保险 */

/* 官方登录：搜索图标（照 v2 .hd-icon） */
#msgListView .msg-search-btn{
  width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
#msgListView .msg-search-btn:active{ background:var(--surface-soft); }
#msgListView .msg-search-btn svg{
  width:21px; height:21px;
  fill:none; stroke:var(--ink); stroke-width:2;
}

/* ───────────── §2 搜索栏（v2 无此元素，按同族"搜索胶囊"规范化） ───────────── */
#msgListView .msg-search-bar{
  padding:8px 16px;
  border-bottom:1px solid var(--hairline-soft);
  background:var(--canvas);
}
#msgListView .msg-search-input{
  height:42px; padding:0 16px; gap:10px;
  border-radius:var(--r-full);
  background:var(--surface-soft);
}
#msgListView .msg-search-input svg{
  width:18px; height:18px; flex-shrink:0;
  fill:none; stroke:var(--muted); stroke-width:2;
}
#msgListView .msg-search-input input{ font-size:var(--t-body); color:var(--ink); }
#msgListView .msg-search-input input::placeholder{ color:var(--muted-soft); }
#msgListView .msg-search-cancel{ font-size:var(--t-body); color:var(--theme); }

/* ───────────── §3 滚动容器 ───────────── */
#msgListView .msg-scroll{ padding:12px 0 0; background:var(--canvas); }

/* ─── §4 业务公告卡（照 v2 .ann；class 与 data-ann-role 全保留，后台填充依赖） ─── */
#msgListView .msg-announce-banner{
  margin:0 16px 22px;
  padding:18px;
  border:none;
  border-radius:var(--r-lg);
  background:var(--theme-soft);
}
#msgListView .msg-announce-header{ gap:6px; margin-bottom:10px; }
/* 内联 fill="none" stroke="#FF5C39" 属表现属性，优先级低于任何 CSS 声明 → 可覆盖 */
#msgListView .msg-announce-header svg{
  width:15px; height:15px;
  fill:var(--theme);
  stroke:none;
}
#msgListView .msg-announce-title{
  font-size:var(--t-micro); font-weight:600; letter-spacing:.3px; color:var(--theme);
}
#msgListView .msg-announce-highlight{
  margin-bottom:0;
  font-size:17px; font-weight:600; line-height:1.4;
  letter-spacing:-.2px; color:var(--ink);
}
#msgListView .msg-announce-detail{
  margin:8px 0 0;
  font-size:var(--t-caption); line-height:1.62; color:var(--body);
}
#msgListView .msg-announce-cta{
  margin-top:12px;
  font-size:var(--t-caption); font-weight:600; line-height:1.6; color:var(--theme);
}

/* ───────────── §5 会话列表（照 v2 .conv） ───────────── */
#msgListView .msg-list-section{ padding-bottom:30px; }   /* 末项到页底 30px */

#msgListView .msg-list-item{
  height:72px;
  padding:0 16px;
  border-bottom:none;                 /* 满宽线 → 下面改用左缩进发丝线 */
  background:var(--canvas);
}
#msgListView .msg-list-item:active{ background:var(--surface-soft); }
/* 置顶标识：2026-09-30 三次改版 —— **取消\"右上角折角三角\"**。
   现改为「三层错位」自然长出标志（配色层右上直角 + 卡片右上圆角 → 露出带圆弧的三角），
   详见 §17。故此处不再需要任何 pinned 相关的背景/伪元素规则。
   ⚠ 行是否已置顶改由**外层** `.msg-swipe.pinned` 标记（单一真相源，§17 消费）。 */
/* 发丝线左缩进到头像右侧（v2 .conv-wrap + ::before 的等价实现）。
   ⚠ 分隔线是列表项自身的伪元素，左滑时随项左移会产生错位短线 → 滑开瞬间隐藏。
   ⚠ 2026-09-30：每行外层新增 `.msg-swipe`（见 §17）后，
     「相邻兄弟」关系由 `.msg-list-item` 改到 `.msg-swipe` —— 不改则**分隔线全部消失**（纯 CSS 静默失效）。 */
#msgListView .msg-swipe + .msg-swipe .msg-list-item::before{
  content:''; position:absolute; top:0; left:76px; right:0; height:1px;
  background:var(--hairline-soft);
}
#msgListView .msg-swipe.swiping .msg-list-item::before{ display:none; }

/* 头像：方形 6px → 圆形；放开 overflow 供右下角绿点不被圆裁掉 */
#msgListView .msg-avatar{
  position:relative;
  width:48px; height:48px;
  border-radius:50%;
  background:var(--surface-strong);
  margin-right:12px;
  overflow:visible;
}
#msgListView .msg-avatar img{ width:100%; height:100%; border-radius:50%; object-fit:cover; }
/* 在线点：挪到头像右下角（11px + 2px 白环）。
   ★2026-10-15（用户拍板）：**在线=绿 / 离线=灰**，位置与尺寸**永不变**（离线也占位）。
   改前这里是"恒显绿点"（注释原文：忽略 online 字段）→ 网页端那颗绿点一直是**假的**。
   JS 依据 `peerOnline` 给 `.msg-avatar` 加 / 去 `is-online`。
   ★2026-10-25（用户拍板）：必须显式 `z-index:2` —— 头像占位层 `::before` 是 0、
   图片 `img` 是 1，绿点不站最高层就会被白底头像盖住。 */
#msgListView .msg-avatar::after{
  content:''; position:absolute; right:1px; bottom:1px; z-index:2;
  width:11px; height:11px; border-radius:50%;
  background:#8E96A3; border:2px solid var(--canvas);
}
#msgListView .msg-avatar.is-online::after{ background:#34C759; }
/* 隐去名字后那颗原绿点（DOM 保留，零 JS 改动） */
#msgListView .msg-nickname .online-dot{ display:none; }

#msgListView .msg-info{ flex:1; min-width:0; overflow:hidden; }
#msgListView .msg-nickname{
  gap:5px;                            /* 徽章/静音图标间距改由 gap 统一控制 */
  margin-bottom:4px;
  font-size:var(--t-body);            /* 16 → 14px */
  font-weight:600;                    /* 500 → 600 */
  color:var(--ink);
}
#msgListView .msg-name-text{ font-size:var(--t-body); font-weight:600; }
#msgListView .msg-mute-icon{ margin-left:0; stroke:var(--muted-soft); }
#msgListView .msg-last{ font-size:var(--t-caption); color:var(--muted); }
/* ★2026-10-16：客服**列表页搜索**的「聊天记录命中片段」行 ——
   `.msg-last` 同字号/同色，前面带一枚小放大镜（与"最后一条消息"预览可辨），
   单行省略（片段可能很长，不能撑破 72 高的行）。 */
#msgListView .msg-hit-snippet{ display:flex; align-items:center; gap:4px; }
#msgListView .msg-hit-snippet svg{ flex:0 0 auto; }
#msgListView .msg-hit-snippet span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#msgListView .msg-meta{ gap:7px; }
#msgListView .msg-time{ margin-bottom:0; font-size:var(--t-tiny); color:var(--muted-soft); }
#msgListView .msg-unread{
  min-width:18px; height:18px; padding:0 5px;
  border-radius:var(--r-full);
  background:var(--theme-active); color:var(--on-theme);
  font-size:var(--t-tiny); font-weight:600; line-height:1;
  display:flex; align-items:center; justify-content:center;
}

/* 官方徽章：金色镂空 → 淡青绿底 + 青绿字（照 v2 .badge-of）
   ⚠ 作用范围：用 `#page-messages `（含聊天窗口顶栏 / 聊天信息页）——
   避免出现"列表青绿、点进聊天变金色"的同页两色。
   注：v2 该徽章为 17px 高 / 8px 圆角 / 无边框 / 10.5px 字，与生产差异最大 */
#page-messages .identity-badge.official{
  height:17px; padding:0 6px; margin-left:0;
  border:none;
  border-radius:var(--r-sm);
  background:var(--theme-soft); color:var(--theme);
  font-size:10.5px; font-weight:600;
  display:inline-flex; align-items:center; flex-shrink:0;
}

/* ───────────── §6 空态 ───────────── */
#msgListView .msg-empty{ padding:60px 0; color:var(--muted-soft); font-size:var(--t-body); }

/* ───────────── §7 修复（本批） ─────────────
   上批把 .identity-badge.official 的 margin-left 归零，而聊天窗口顶栏 .chat-nickname-center
   无 gap → 名称与官方徽章间距变 0px（原始 4px）。按全站统一值改为 5px。 */
#page-messages .chat-nickname-center{ gap:5px; }

/* ═══════════════════════════════════════════════════
   §8 聊天窗口（#chatView）：对齐各主页规范
   ═══════════════════════════════════════════════════ */
/* 顶栏：原为 padding 8+8 + line-height 44px + 1px 底边 = 实测 60.8px，比全站 .hd 的 54px 高 6.8px
   （进聊天时顶栏会跳高）→ 统一 54px + 发丝线。
   ⚠ 2026-09-27 二改：删除原 ::after 40px 占位块（上轮为「标题居中」所加）。
     它位于最后一个 flex 子项，会把右侧动作区整体往里挤：实测三点按钮右缘距窗口右缘 56px
     （= 40 占位块 + 16 右内边距），规范值应为 16px。删除后返回键左缘 16px ↔
     三点按钮右缘 414px(=430−16)，左右真正对称。
     注：聊天信息页(#chatInfoView)的同名占位块必须保留 —— 那页右侧无内容，靠它居中标题。 */
#chatView .chat-header{
  height:calc(54px + env(safe-area-inset-top,0px));
  padding:env(safe-area-inset-top,0px) 16px 0;
  background:var(--canvas);
  border-bottom:1px solid var(--hairline-soft);
  gap:0;
}
/* 返回键：40px 圆形（触控目标，与评论详情页一致） */
#chatView .chat-back-btn{ width:40px; height:40px; flex-shrink:0; border-radius:var(--r-full); }
#chatView .chat-back-btn:active{ background:var(--surface-soft); }
#chatView .chat-back-btn svg{ width:22px; height:22px; stroke:var(--ink); stroke-width:2.25; }
/* 标题：左侧贴返回键 12px；右侧给动作区留 8px 呼吸位；中间自适应省略 */
#chatView .chat-nickname-center{
  flex:1; min-width:0; margin-left:12px; margin-right:8px; padding-right:0;
  font-size:var(--t-title); font-weight:700; letter-spacing:-.3px;
  line-height:1; color:var(--ink);
}
/* 右侧动作区：参与 flex 排布的尾项（margin-left:auto 顶到最右），
   三个按钮与返回键统一 40px（原 36px），图标同尺寸 22px */
#chatView .chat-header-actions{ position:static; transform:none; margin-left:auto; gap:2px; }
#chatView .chat-ext-btn,
#chatView .chat-more-btn{ width:40px; height:40px; }
#chatView .chat-ext-btn:active,
#chatView .chat-more-btn:active{ background:var(--surface-soft); }
#chatView .chat-more-btn svg{ width:22px; height:22px; fill:var(--ink); }
/* 记录区：灰底 → 白底（对齐公示页 / 评论详情页 / 我的页） */
#chatView{ background:var(--canvas); }
#chatView .chat-messages-scroll{ padding:16px; }
/* 气泡：贴角方向保留（结构性），大圆角走令牌 */
#chatView .chat-bubble{ border-radius:var(--r-sm); font-size:15px; }
/* 对方泡泡：由「白底 + 发丝描边」改为**浅灰实底 + 无边框**
   （底色 = 原系统时间徽章的 --surface-sunken，用户 2026-09-30 要求「改成现在的时间徽章颜色」）。
   ⚠ 卡片类气泡（.product-bubble：商品/公示卡）由 §16 置为 background:none，不受本行影响。 */
#chatView .chat-message.other .chat-bubble{
  background:var(--surface-sunken);
  color:var(--ink);
  border:none;
  border-top-left-radius:0;                  /* 贴角方向保留 */
}
#chatView .chat-message.self .chat-bubble{ border-top-right-radius:0; }   /* 小圆角 → 纯直角 */
/* ★2026-10-16：语音气泡补皮肤令牌。
   `messages.css` 里语音气泡只有**旧主题色字面值**（self `#81D8D0`，皮肤层无覆盖），
   而文字气泡由本文上面两行覆盖为 `--theme` / `--surface-sunken`
   → 同一侧两种气泡不同色（识别性差）。此处与文字气泡、App `_VoiceBubble` 同口径。
   ⚠️ 只加皮肤层覆盖，不动 `messages.css` 基色（分层约定）。 */
#chatView .chat-message.self .chat-voice-bubble{ background:var(--theme); color:var(--on-theme); }
#chatView .chat-message.other .chat-voice-bubble{ background:var(--surface-sunken); color:var(--ink); }
/* 头像：4px 方 → 圆形（与列表 48px 圆形头像统一） */
#chatView .chat-msg-avatar{
  width:36px; height:36px; border-radius:var(--r-full); background:var(--surface-strong);
}
/* 系统提示（聊天记录中间的时间条）：2026-09-30 取消底色胶囊 → **纯文字**（墨黑）
   原为 --surface-sunken 底 + --muted 字（现该底色已移到对方泡泡上）；
   仅左右内缩由容器（.chat-message.time-stamp）提供，本身不再占背景。 */
#chatView .chat-time-badge{
  background:none; padding:0; border-radius:0;
  color:var(--ink);
  font-size:var(--t-tiny); font-weight:500;
}
#chatView .chat-img-bubble{ border-radius:var(--r-md); }

/* ★2026-10-17（用户拍板「上传中显示转圈、失败可重试」）：媒体气泡的上传状态层。
   ⚠️ `position:relative` 是**新增**的（原 `.chat-img-bubble` 没有定位上下文）——
      否则 `inset:0` 的覆盖层会跑到最近的定位祖先（.chat-message 之类）上去。 */
#chatView .chat-img-bubble{ position:relative; }
#chatView .chat-media-layer{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
}
#chatView .chat-media-layer.uploading{ background:rgba(0,0,0,.40); }
#chatView .chat-media-layer.failed{ background:rgba(0,0,0,.45); cursor:pointer; }
#chatView .chat-media-spin{
  width:24px; height:24px; border-radius:50%;
  border:3px solid rgba(255,255,255,.28); border-top-color:rgba(255,255,255,.85);
  animation:chat-media-spin .8s linear infinite;
}
@keyframes chat-media-spin{ to{ transform:rotate(360deg); } }
#chatView .chat-media-retry{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  color:#fff; font-size:12px; font-weight:600; line-height:1.1;
}
#chatView .chat-media-retry svg{ width:24px; height:24px; }
/* 占位气泡的视频格：不 autoplay（还没传完），只显示首帧 */
#chatView .chat-bubble.media-pending .chat-img-bubble video{ width:100%; height:auto; display:block; }

/* ═══════════════════════════════════════════════════
   §9 聊天信息（#chatInfoView）：去灰底 + 去卡面 + 顶栏 54px
   ═══════════════════════════════════════════════════ */
#chatInfoView{ background:var(--canvas); }
#chatInfoView .info-header{
  height:calc(54px + env(safe-area-inset-top,0px));
  padding:env(safe-area-inset-top,0px) 16px 0;
  border-bottom:1px solid var(--hairline-soft);   /* 原 border-bottom:none → 补上，与其余子页统一 */
}
#chatInfoView .info-header::after{ content:''; width:40px; height:40px; flex-shrink:0; }
#chatInfoView .info-back-btn{ width:40px; height:40px; border-radius:var(--r-full); }
#chatInfoView .info-back-btn:active{ background:var(--surface-soft); }
#chatInfoView .info-back-btn svg{ width:22px; height:22px; stroke:var(--ink); stroke-width:2.25; }
/* 标题：原 margin-right:32px 让位写法 → 改 ::after 占位后精确居中 */
#chatInfoView .info-title{
  font-size:var(--t-title); font-weight:700; letter-spacing:-.3px;
  color:var(--ink); margin-right:0;
}
/* 用户卡 + 各分区：去卡面（白底通栏 + 发丝线），与公示页 / 评论详情页做法一致 */
#chatInfoView .info-user-card{
  background:none; margin:0; padding:20px 16px;
  border-bottom:1px solid var(--hairline-soft);
}
#chatInfoView .info-avatar{
  width:64px; height:64px; border-radius:var(--r-full); background:var(--surface-strong);
  /* ★2026-10-22（用户拍板）：头像可点开大图 → 手指光标 */
  cursor:pointer;
}
#chatInfoView .info-nickname{ font-size:var(--t-subtitle); font-weight:600; margin-right:0; }
/* 用户名 ↔ 官方徽章 间距：**全站统一 5px**（规范，用户 2026-10-01 明确）。
   ⚠ 本处原为 **0px**：历史层 `.info-nickname{margin-right:6px}` 被上一行归零，
     而徽章自身 `margin-left` 也被 §5 末的 `#page-messages .identity-badge.official` 归零
     → 两者完全贴合。与 §7「聊天窗口顶栏」是同一类问题（那处上批已修，本处当时漏改）。
   ⚠ 必须把 gap 加在 **`.info-nickname` 自己**身上、而不是外层 `.info-user-name-row`：
     徽章是写在 `#infoNickname` **内部**的（`messages.js:665` 的
     `infoNickname.innerHTML = contactNameHtml(c)`，生成的是**裸文本 + 徽章**，
     没有把名字包成 span）→ 外层 row 的 gap 管不到它。 */
#chatInfoView .info-nickname{
  font-size:var(--t-subtitle); font-weight:600; margin-right:0;
  display:inline-flex; align-items:center; gap:5px;
}
#chatInfoView .info-user-region{ font-size:var(--t-micro); color:var(--muted-soft); }
#chatInfoView .info-section{ background:none; margin:0; }
#chatInfoView .info-item{
  padding:16px;
  border-bottom:1px solid var(--hairline-soft);
  font-size:var(--t-body);
  color:var(--ink);
}
#chatInfoView .info-item:active{ background:var(--surface-soft); }
/* 箭头图标（内联 stroke：#B0B3B8 属表现属性，优先级低于任何 CSS 声明 → 可覆盖） */
#chatInfoView .info-item svg{ stroke:var(--muted-soft); }
/* 「（点击修改）」提示：原危险红 #FF3B30 → 主题绿（提示语不该用危险色） */
#chatInfoView .remark-edit-hint{ color:var(--theme); font-size:var(--t-micro); }
/* 要求 2（2026-09-27 二改）：删除对话列表由「全宽菜单行」改造为独立按钮。
   原实现实测 408×52 全宽白底行、无描边无圆角、绿字居中 → 观感是菜单项而非按钮。
   新实现：白底 + 1px 主题绿描边 + 主题绿字 + 46px 高 + 8px 圆角，左右各留 16px，
           并单独成块（下方补安全区），与「我的页 退出登录」的按钮语言一致。
   注：本元素类名 .danger-item 全站仅此一处使用（已核查），改动不外溢。 */
#chatInfoView #deleteContactSection{
  background:none; margin:0;
  padding:20px 16px calc(24px + env(safe-area-inset-bottom,0px));
}
#chatInfoView #deleteContactSection .info-item{
  height:46px; padding:0;
  border:1px solid var(--theme);
  border-radius:var(--r-sm);
  background:var(--canvas);
  color:var(--theme);
  font-size:var(--t-body); font-weight:600;
  display:flex; align-items:center; justify-content:center;
}
#chatInfoView #deleteContactSection .info-item:active{ background:var(--theme-soft); }
/* 开关轨道（未勾选态）：原 #E8EAED → 下沉面令牌；勾选态由 §11 改主题绿 */
#chatInfoView .slider{ background:var(--surface-sunken); }

/* ═══════════════════════════════════════════════════
   §10 聊天记录搜索（#historySearchView）
   ═══════════════════════════════════════════════════ */
#historySearchView{ background:var(--canvas); }
#historySearchView .history-search-bar{
  padding:8px 16px; border-bottom:1px solid var(--hairline-soft);
}
#historySearchView .history-search-input-wrap{
  height:42px; padding:0 16px; gap:10px;
  background:var(--surface-soft); border-radius:var(--r-full);
}
#historySearchView .history-search-input{ font-size:var(--t-body); color:var(--ink); }
#historySearchView .history-search-input::placeholder{ color:var(--muted-soft); }
#historySearchView .history-search-cancel{ color:var(--theme); font-size:var(--t-body); }
#historySearchView .history-results{ padding:8px 16px; }
#historySearchView .history-result-item{
  padding:14px 0; font-size:var(--t-body); color:var(--ink);
  border-bottom:1px solid var(--hairline-soft);
}
#historySearchView .history-result-item span.highlight{ color:var(--theme); font-weight:600; }
#historySearchView .history-empty{ color:var(--muted-soft); font-size:var(--t-body); }

/* ═══════════════════════════════════════════════════
   §11 原有「蒂芙尼蓝」→ 客服导航绿（用户要求 2）
   ─────────────────────────────────────────────
   ⚠ 三枚主题令牌的值一律不动：--theme-active 同时供未读徽章与置顶折角三角使用，
     用户明确要求「用当前徽章实际颜色、不可改变」。
     本节只把历史层硬编码的 #81D8D0 / #2BB3A8 / #6cc7bf / #F0FBFA 换成 var(--theme) 族。
   ⚠ 保留不动的语义色（未授权改动）：二次确认危险键 .confirm-btn.danger、
     在线绿点 .online-dot / .msg-avatar::after。
     注：原「左滑删除红底 .delete-action」已于 2026-09-30 被「左滑置顶」（§17）取代，
       该类的历史层规则保留在 messages.css（回滚锚点），皮肤层已不再生成/引用。
   ═══════════════════════════════════════════════════ */
/* 要求 1（五改）：自己泡泡 → 与「温馨提示浮窗·我已知晓」按钮**完全一致**。
   实测该按钮 = background:#0E9F94(=--theme) + color:#FFFFFF(=--on-theme) + 圆角 8px + 无阴影无渐变。
   故本行取同一对令牌，两处从此同源同色（今后改 --theme 两处一起变）。
   ⚠ --theme / --theme-soft 令牌值一律不动：商品角标、公示状态徽章、官方徽章
     三处「淡绿底 + 绿字」与泡泡共用同一组令牌，改令牌会连带改掉它们。
   ⚠ 对比度说明：白字 on --theme = 3.28:1（低于 4.5:1）——但「我已知晓」按钮本身即此比值
     （用户明确要求与之完全一致），故按要求执行；如需达标，把本行 color 改 var(--ink)(6.41:1) 即可。
   ⚠ 卡片类气泡（.product-bubble）已由 §16 置为透明，不受本行底色影响。 */
#page-messages .chat-message.self .chat-bubble{ background:var(--theme); color:var(--on-theme); }
/* 引用条（回复消息泡泡顶部摘录块）——2026-09-27 五改：重新设计
   用户要求：隐藏官方徽章、把「回复对象名字」改色（绿色系）与回复正文区分；
             不要撞色板块、不要强对比；清新淡雅 + 识别性强。
   落点三条：
     ① 去掉全部底色，只留 2px 左细线 —— 无「板块」，最淡雅；
     ② 名称走绿系（白卡上用深绿 --theme-active 5.07:1），正文走中性灰（--muted 5.41:1）
        → 靠「颜色 + 字重」双重区分，而非色块，识别性足够且不吵；
     ③ 最多 2 行 + 省略号：旧实现无截断，实测一条长引用会从 36px 撑到 80px、泡泡总高 149px；
        加 -webkit-line-clamp:2 后引用条 36px、泡泡总高 85px。
   ⚠ 绿底泡泡内无法用绿色系名称（绿上绿不可读），故改走「白色系」：
     名称为纯白 600、正文白字 0.8 透明度 —— 同色系内靠「实白 vs 淡白 + 字重」分层，
     与整体清新语汇一致，也是微信等主流 IM 的统一做法。
   结构由 messages.js 提供两个 span（.chat-reply-ref-name / -text）。 */
#page-messages .chat-reply-ref{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden;
  margin:0 0 6px; padding:0 0 0 8px;
  border-left:2px solid var(--theme);
  background:none; border-radius:0;
  font-size:var(--t-micro); line-height:1.5;
}
#page-messages .chat-reply-ref-name{ color:var(--theme-active); font-weight:600; }
#page-messages .chat-reply-ref-text{ color:var(--muted); }
/* 自己泡泡（绿底）：竖线转白、名称纯白、正文淡白 */
#page-messages .chat-message.self .chat-reply-ref{ border-left-color:var(--on-theme); }
#page-messages .chat-message.self .chat-reply-ref-name{ color:var(--on-theme); }
#page-messages .chat-message.self .chat-reply-ref-text{ color:var(--on-theme); opacity:.8; }
/* 要求 2：隐藏引用条内的官方徽章（改由名称改色做区分）——纯 CSS，零 JS 改动 */
#page-messages .chat-reply-ref .identity-badge.official{ display:none; }
#page-messages .chat-input-field:focus{ box-shadow:0 0 0 1.5px var(--theme); }
#page-messages .chat-send-btn.active{ background:var(--theme); color:var(--on-theme); }
#page-messages input:checked + .slider{ background:var(--theme); }
#page-messages .wechat-copy-btn{ border-color:var(--theme); color:var(--theme); }
#page-messages .wechat-copy-btn:active{ background:var(--theme-soft); }
#page-messages .wechat-download-btn{ background:var(--theme); color:var(--on-theme); }
#page-messages .wechat-download-btn:active{ background:var(--theme-active); }
#page-messages .remark-input:focus{ border-color:var(--theme); }
#page-messages .remark-btn.ok{ color:var(--theme); }
#page-messages .chat-message.selected .select-checkbox{ background:var(--theme); border-color:var(--theme); }
#page-messages .service-guide-btn{ background:var(--theme); color:var(--on-theme); }
#page-messages .service-guide-check input{ accent-color:var(--theme); }
/* 连带：原蓝色交互色（#4F8CFF / #2F6BFF）一并归入主题绿 */
#page-messages .msg-search-cancel,
#page-messages .history-search-cancel,
#page-messages .history-result-item span.highlight{ color:var(--theme); }

/* ═══════════════════════════════════════════════════
   §12 商品 / 公示模块配色（用户要求 3、4）
   ─────────────────────────────────────────────
   普通文字（商品标题、公示标题/正文）一律用原版墨色令牌，视觉与原版一致（只去字面值）；
   彩色（价格、角标、状态徽章、Tab 下划线）一律用蒂芙尼蓝令牌。
   ═══════════════════════════════════════════════════ */
#page-messages .product-badge{
  background:var(--blk-goods); color:var(--blk-goods-ink); box-shadow:none;
}
/* 商品价格：改导航绿（原 #81D8D0 白底仅 1.66:1，观感「发虚」） */
#page-messages .price,
#page-messages .chat-product-price{ color:var(--blk-goods-ink); font-weight:700; }
#page-messages .chat-product-spec-row{ border-top-color:var(--hairline-soft); }
#page-messages .chat-product-spec,
#page-messages .chat-product-spec-price{ color:var(--muted); }
#page-messages .chat-product-stock{ color:var(--muted-soft); }
/* ★2026-10-11：聊天商品卡失效态。
   · `.is-invalid`（商品已被**彻底删除**）→ 空白板块，居中只显示「商品已失效」；
   · 价格位灰字（已下架 / 已售罄）→ 覆盖上方 `.chat-product-price` 的绿字与加粗；
   · 失效卡不可点（无 `data-product-id`，点击委托本就跳过）。 */
#page-messages .chat-product-card.is-invalid{
  min-height:72px; display:flex; align-items:center; justify-content:center;
  padding:16px 12px; cursor:default;
}
#page-messages .chat-product-invalid{ font-size:13px; color:var(--muted-soft); text-align:center; }
#page-messages .chat-product-price.is-invalid,
#page-messages .chat-product-spec-price.is-invalid{
  color:var(--muted-soft); font-weight:400;
}
/* 「规格：」标签：颜色与字重**与 `.chat-product-title` 同值**（用户 2026-10-05），
   消费 `--ink` 令牌（`.chat-product-title` 的皮肤层覆盖值同为 `--ink`）。 */
#page-messages .chat-product-spec-label{ color:var(--ink); }
/* 发送商品确认键：导航绿实心 + 白字 */
#page-messages .product-send-btn.ok{ background:var(--theme); color:var(--on-theme); }
/* Tab 下划线：商品面板与公示面板共用同一条规则，两处同时生效 */
#page-messages .goods-tab.active::after{ background:var(--theme); height:2px; border-radius:1px; }
/* 公示状态徽章：原为 JS 内联 #FF9500 / #34C759，已改类名接管（内联色 CSS 覆盖不了） */
#page-messages .order-list-status,
#page-messages .chat-order-status{
  height:22px; padding:0 9px; border-radius:var(--r-full);
  display:inline-flex; align-items:center;
  font-size:var(--t-tiny); font-weight:600; line-height:1;
}
/* 进行中：淡绿底 + 主题绿字（官方徽章同款）；已结束保持中性灰（非彩色，不参与本次改色） */
#page-messages .order-list-status.ongoing,
#page-messages .chat-order-status.ongoing{ background:var(--blk-notice); color:var(--blk-notice-ink); }
#page-messages .order-list-status.ended,
#page-messages .chat-order-status.ended{ background:var(--surface-strong); color:var(--muted-soft); }
/* 普通文字令牌化（视觉与原版一致） */
#page-messages .product-title,
#page-messages .chat-product-title,
#page-messages .order-list-title{ color:var(--ink); }
#page-messages .order-list-body{ color:var(--body); }
#page-messages .meta-text,
#page-messages .chat-product-sold{ color:var(--muted-soft); }

/* ═══════════════════════════════════════════════════
   §13 全客服页浮层统一（用户要求 7）：遮罩 / 圆角 / 令牌化
   ─────────────────────────────────────────────
   ⚠ 仅改视觉，浮层的显隐逻辑、z-index、点击关闭行为一律不动。
     含输入框或勾选框的浮层禁点遮罩关闭（AGENTS 第 10 条）—— 原实现已合规，未改。
   ═══════════════════════════════════════════════════ */
/* 遮罩统一 0.4（原 0.36 / 0.42 / 0.5 三种并存） */
#page-messages .confirm-overlay,
#page-messages .wechat-overlay,
#page-messages .remark-overlay,
#page-messages .service-guide-overlay,
#page-messages .product-send-overlay{ background:rgba(0,0,0,.4); }
/* 卡片圆角统一（原 12 / 14 / 16px 混用） */
#page-messages .confirm-dialog,
#page-messages .remark-dialog,
#page-messages .wechat-panel,
#page-messages .forward-panel,
#page-messages .service-guide-dialog,
#page-messages .product-send-dialog{ border-radius:var(--r-lg); }
/* 要求 2：共用二次确认浮窗重新设计
   ⚠ 本组件被「清空聊天记录」与「删除对话列表」两处共用 → 确认键改绿对两者同时生效
     （同一 DOM 组件，无法只改其一；两者都是破坏性操作，口径一致）
   改进：补唯一阴影层 --elev（原无阴影，浮在白底上不够「浮起」）
        宽度 75%/300 → 78%/312（略宽，正文换行更少）
        标题 padding 20/16/8 → 24/20/8；正文加行高 1.55 与下内边距 24
        按钮 46 → 50px；确认键 危险红 #FF3B30 → 主题绿（与删除按钮同色） */
#page-messages .confirm-dialog{
  width:78%; max-width:312px;
  box-shadow:var(--elev);
  overflow:hidden;
}
#page-messages .confirm-title{
  font-size:var(--t-subtitle); font-weight:600; color:var(--ink);
  padding:24px 20px 8px;
}
#page-messages .confirm-body{
  font-size:var(--t-body); line-height:1.55; color:var(--body);
  padding:0 20px 24px;
}
#page-messages .confirm-actions,
#page-messages .confirm-btn.cancel{ border-color:var(--hairline-soft); }
#page-messages .confirm-btn{
  height:50px; background:var(--canvas);
  font-size:var(--t-subtitle); color:var(--ink);
}
#page-messages .confirm-btn:active{ background:var(--surface-soft); }
/* 确认键：与删除对话列表按钮同色的主题绿 */
#page-messages .confirm-btn.danger{ color:var(--theme); font-weight:600; }
/* 微信浮窗 */
#page-messages .wechat-title{ font-size:var(--t-subtitle); font-weight:600; color:var(--ink); }
#page-messages .wechat-close,
#page-messages .goods-close,
#page-messages .forward-close{ color:var(--muted-soft); }
#page-messages .wechat-qr-wrap{ border:1px solid var(--hairline); border-radius:var(--r-sm); }
/* 真实二维码图（2026-10-08 新增）：与模拟二维码 canvas **同尺寸互斥显示**（180×180）。
   ⚠️ 历史层 `messages.css:200` 只给了 canvas 尺寸 → 这里必须补 img 的，
      否则真图会按原图 663×663 撑破浮窗。 */
#page-messages .wechat-qr-img{ display:block; width:180px; height:180px; object-fit:contain; }
#page-messages .wechat-tip{ font-size:var(--t-micro); color:var(--muted-soft); }
#page-messages .wechat-account-row{ background:var(--surface-soft); border-radius:var(--r-sm); }
#page-messages .wechat-account{ font-size:var(--t-body); color:var(--ink); }
#page-messages .wechat-copy-btn{ font-size:var(--t-micro); border-radius:var(--r-xs); }
#page-messages .wechat-download-btn{ border-radius:var(--r-sm); font-size:var(--t-body); }
/* 备注浮窗（含输入框：禁点遮罩关闭，保持原样） */
#page-messages .remark-title{ font-size:var(--t-subtitle); font-weight:600; color:var(--ink); }
#page-messages .remark-input{
  height:42px; border:1px solid var(--hairline); border-radius:var(--r-sm);
  background:var(--surface-soft); color:var(--ink); font-size:var(--t-body);
}
#page-messages .remark-count{ font-size:var(--t-tiny); color:var(--muted-soft); }
#page-messages .remark-actions,
#page-messages .remark-btn.cancel{ border-color:var(--hairline-soft); }
#page-messages .remark-btn{ height:46px; font-size:var(--t-subtitle); color:var(--ink); }
#page-messages .remark-btn:active{ background:var(--surface-soft); }
/* 转发浮窗 */
#page-messages .forward-header{ border-bottom:1px solid var(--hairline-soft); }
#page-messages .forward-title{ font-size:var(--t-subtitle); font-weight:600; color:var(--ink); }
#page-messages .forward-contact{ border-bottom:1px solid var(--hairline-soft); }
#page-messages .forward-contact:active{ background:var(--surface-soft); }
#page-messages .forward-contact-avatar{
  width:44px; height:44px; border-radius:var(--r-full); background:var(--surface-strong);
}
#page-messages .forward-contact-name{ font-size:var(--t-body); color:var(--ink); }
/* 温馨提示浮窗（含勾选框，仅「我已知晓」关闭） */
#page-messages .service-guide-dialog{ padding:20px 16px 16px; }
#page-messages .service-guide-title{ font-size:var(--t-subtitle); font-weight:700; color:var(--ink); }
#page-messages .service-guide-body{ font-size:var(--t-body); line-height:1.7; color:var(--body); }
#page-messages .service-guide-check{ font-size:var(--t-micro); color:var(--muted); }
#page-messages .service-guide-btn{ border-radius:var(--r-sm); font-size:var(--t-body); }
/* 发送商品确认浮窗（含商品卡） */
#page-messages .product-send-card .chat-product-card{ border:1px solid var(--hairline-soft); }
/* 要求 2 + Q2：发送商品浮窗安全网
   商品卡图片改正方形后浮窗高度由 356px 增至 430px（竖屏安全）。
   但本浮窗原无最大高度限制 → 极小横屏（视口高 < 470px）会超出屏幕。
   此处补 max-height + 内部滚动作为安全网，仅极小屏生效，正常竖屏无影响。 */
#page-messages .product-send-dialog{ max-height:90vh; overflow-y:auto; }
/* 要求 2：商品卡图片框由 4:3 改正方形 1:1
   根因：商品素材原图为 375×375 正方形，而图片框是 4:3 + object-fit:cover
        → 正方形图被横向裁掉上下各约 30px（「显示不完整」）。
   改后：图框变正方形，图片无需裁切即完整显示；卡片高度随之增加
        （聊天卡 241→301px、发送浮窗 356→430px），下方商品信息同步完整。
   作用范围：.chat-product-img 全站仅客服页两处使用（聊天记录商品卡 messages.js:187、
            发送商品浮窗 renderProductSendCard messages.js:825），改一处两处同时生效。
   ⚠ 公示卡 .chat-order-img 是另一套类名（原就是 80×80 正方形），不在本次范围。 */
#page-messages .chat-product-img{ aspect-ratio:1/1; }
#page-messages .product-send-btn{ border-radius:var(--r-sm); font-size:var(--t-body); }
#page-messages .product-send-btn.cancel{ background:var(--surface-strong); color:var(--body); }
#page-messages .product-send-btn.ok{ color:var(--on-theme); }
/* 商品 / 公示面板：头部、Tab 与滚动区 */
#page-messages .goods-header{ padding:16px; border-bottom:1px solid var(--hairline-soft); }
#page-messages .goods-title{ font-size:var(--t-subtitle); font-weight:600; color:var(--ink); }
#page-messages .goods-tabs{ padding:0 16px; border-bottom:1px solid var(--hairline-soft); gap:24px; }
#page-messages .goods-tab{ font-size:var(--t-body); color:var(--muted-soft); }
#page-messages .goods-tab.active{ color:var(--ink); font-weight:600; }
#page-messages .goods-scroll{ padding:16px; }
#page-messages .goods-empty{ font-size:var(--t-body); color:var(--muted-soft); }
/* 商品面板内搜索框：胶囊化（原方角 + 内联硬色，内联已从 index.html 移除）。
   用 #goodsSearchBar 前缀锁范围，避免误伤主页搜索栏 #msgSearchBar（两者共用 .msg-search-input） */
#goodsSearchBar{ padding:8px 16px; }
#goodsSearchBar .msg-search-input{ height:42px; padding:0 16px; gap:10px; border-radius:var(--r-full); background:var(--surface-soft); }
#goodsSearchBar .msg-search-input svg{ width:18px; height:18px; fill:none; stroke:var(--muted); stroke-width:2; }
#goodsSearchBar .msg-search-input input{ font-size:var(--t-body); color:var(--ink); }
#goodsSearchBar .msg-search-input input::placeholder{ color:var(--muted-soft); }

/* ═══════════════════════════════════════════════════
   §14 聊天辅助组件（引用条 / 加号面板 / 长按菜单 / 多选栏）
   ⚠ 加号面板与表情面板高度 300px 与 messages.js 的 dockScrollLifted 硬联动，不可改高度
   ═══════════════════════════════════════════════════ */
/* 要求 3：回复提示条（输入框上方「回复 XX」）——与引用条同一套语汇
   原来标题是 --muted-soft 灰、无任何强调色，与聊天记录里的引用条（绿系名称 + 竖线）语言不统一。
   现改为：左侧 2px 主题绿竖线呼应引用条；标题（含被回复人名字）走深绿 600；
          正文（被引用内容）走中性灰 —— 与白卡上的引用条**逐值相同**，两处观感一致。 */
#page-messages .reply-bar{
  padding:8px 16px; background:var(--canvas); border-top:1px solid var(--hairline-soft);
}
#page-messages .reply-bar-content{ border-left:2px solid var(--theme); padding-left:8px; }
#page-messages .reply-bar-title{ color:var(--theme-active); font-size:var(--t-micro); font-weight:600; }
/* 回复对象名 ↔ 官方徽章 间距：**全站统一 5px**（规范）。
   `#replyTargetName` 的 innerHTML 由 `contactDisplayNameHtml()` 生成
   = `<span>名字</span><span class="identity-badge official">官方</span>`（两个 inline 元素，
   HTML 里无空格 → 原本 0px）。改用 inline-flex 后 gap 生效，且它本身仍是行内级
   → 与前面的「回复」二字保持同行、不影响那处原有空格间距。 */
#page-messages #replyTargetName{ display:inline-flex; align-items:center; gap:5px; }
#page-messages .reply-bar-text{ color:var(--muted); font-size:var(--t-micro); }
#page-messages .reply-bar-close{ color:var(--muted-soft); }
#page-messages .plus-dock{ background:var(--surface-soft); }
#page-messages .plus-item span{ color:var(--muted); font-size:var(--t-micro); }
#page-messages .plus-icon-wrap{ background:var(--canvas); border-radius:var(--r-md); }
#page-messages .plus-item:active .plus-icon-wrap{ background:var(--surface-strong); }
#page-messages .longpress-menu{ border-radius:var(--r-md); box-shadow:var(--elev); }
#page-messages .lp-item svg{ stroke:var(--ink); }
#page-messages .lp-item span{ color:var(--muted); font-size:var(--t-tiny); }
#page-messages .lp-item:active{ background:var(--surface-soft); }
#page-messages .multi-action-bar{ background:var(--canvas); border-top:1px solid var(--hairline-soft); }
#page-messages .multi-item svg{ stroke:var(--ink); }
#page-messages .multi-item span{ color:var(--muted); font-size:var(--t-tiny); }
#page-messages .multi-item:active{ background:var(--surface-soft); border-radius:var(--r-sm); }
#page-messages .select-checkbox{ border-color:var(--hairline); background:var(--canvas); }

/* ═══════════════════════════════════════════════════
   §15 输入栏图标键族（表情 / 加号 / 发送）——2026-09-27「六改」：整套重新设计
   ─────────────────────────────────────────────
   设计依据（项目设计规范 + Material/HIG 触控规范）：
     · 触控目标 40×40（与顶栏 3 键、返回键同一档）
     · 图标 22×22 ≈ 目标的 55%（规范区间 50%~60%）。上一轮把图标做成与按钮等大（40×40），
       内圆 r=10/24 → 墨迹外径 36.7px，几乎顶满按钮（余量 1.7px），观感成了「大饼」，本轮回到 22px。
     · 形状：两个图标键为圆形（微信同款）；发送键与输入框同为圆角矩形（--r-sm 8px）
       —— 用户明确要求「这两个板块的输入框和按钮必须是圆角矩形，不能用胶囊」
     · 底色表达层级：表情=透明（次要入口）/ 加号=--surface-strong（主要动作）/ 发送=--theme（提交）
     · 色值一律走令牌；历史层遗留的 #F0F1F3 / #8E96A3 一并令牌化
     · 图标色 --muted-soft → --muted：前者在白底 3.07:1、灰底 2.72:1，低于 WCAG 非文字 UI 的 3:1；
       后者 5.25:1 / 4.65:1，达标。
   ═══════════════════════════════════════════════════ */
/* ── ① 表情键（圆形；次要入口：透明底）── */
#page-messages .chat-emoji-btn{
  width:40px; height:40px; flex-shrink:0;
  border-radius:var(--r-full);
  background:none;
}
#page-messages .chat-emoji-btn:active{ background:var(--surface-strong); }
/* ⚠ 必须补 stroke-linecap:round —— 该 SVG 的两只「眼睛」是零长度线段
   （<line x1="9" y1="9" x2="9.01" y2="9"/>，24 单位 viewBox 里长 0.01），
   butt 端点渲染不出任何像素（像素实测：眼睛区域 0 像素、包围盒 0×0），
   导致图标只有圆框 + 嘴（用户看到的「只有嘴、很诡异」）；加 round 后每只眼睛 60 像素。
   圆端点也是本项目一贯写法（skin-nearby.css 3 处 / client-v2.html 5 处 / 后台 2 处均有）。 */
#page-messages .chat-emoji-btn svg{
  width:22px; height:22px;
  fill:none; stroke:var(--muted); stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
}
/* ── ② 加号 / 发送键：两态同尺寸（不再 40→56 变宽）──
   历史层 .chat-send-btn.active{width:56px} 会让输入框在开始打字时缩窄 16px（310→294）；
   现两态固定 40×40 → 输入框宽度恒定，满足「输入框可适应性伸缩」。
   ⚠ .chat-send-btn.active 在历史层里同时管 width / border-radius / font-size 三样，
     新规则必须三样都覆盖，否则「发送」态会变成 40px 宽的圆角方块。 */
#page-messages .chat-send-btn,
#page-messages .chat-send-btn.active{
  width:40px; height:40px; min-width:0; padding:0;
  border-radius:var(--r-sm);            /* 圆角矩形（与输入框同语言；不用胶囊） */
  flex-shrink:0;
  font-size:var(--t-micro); font-weight:600;
}
/* 加号态（空闲）：浅灰实心圆角方块 + 图标（底/字令牌化，替换历史层字面值） */
#page-messages .chat-send-btn{ background:var(--surface-strong); color:var(--muted); }
#page-messages .chat-send-btn:active{ background:var(--surface-sunken); }
/* 加号图标：与表情图标同尺寸、同描边（已由文字「+」改为 SVG，见 index.html）
   ⚠ 用 :not(.active) 限定空闲态（特异度 1,3,0）。若写成无 :not() 的 (1,2,0)，
     会因 id 权重高于历史层 .chat-send-btn.active .plus-icon(0,3,0) 而强行 display:flex，
     导致「发送」态下「+」和「发送」同时显示。 */
#page-messages .chat-send-btn:not(.active) .plus-icon{
  display:flex; align-items:center; justify-content:center;
}
#page-messages .chat-send-btn .plus-icon svg{
  width:22px; height:22px;
  fill:none; stroke:var(--muted); stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
}
/* 发送态（激活）：主题绿实心 + 白字（底色/字色仍由 §11 的 .active 规则提供，此处只补按下态。
   ⚠ 必须用 .active:active(1,3,0) 高于上面的 :active(1,2,0)，否则按下「发送」会变成浅灰） */
#page-messages .chat-send-btn.active:active{ background:var(--theme-active); }

/* ═══════════════════════════════════════════════════
   §16 卡片类气泡去外框（要求 5）
   ─────────────────────────────────────────────
   商品卡 / 公示卡放在 .chat-bubble.product-bubble 里，会继承「自己泡泡」的实心底色，
   于是卡片外面套了一圈 8px 厚的实心色框（上一轮改实心绿后变成深绿粗框，观感突兀；
   本轮自己泡泡改淡绿底后仍会留一圈淡绿框，同样多余）。
   现改为透明无内边距，卡片靠自身的圆角 + 发丝描边独立浮起。
   ⚠ 选择器用 .chat-message.self/.other 两层类名（1 id + 4 class），
     权重高于 §11 的 #page-messages .chat-message.self .chat-bubble（1 id + 3 class），
     不受文件顺序影响。
   ═══════════════════════════════════════════════════ */
#page-messages .chat-message.self .chat-bubble.product-bubble,
#page-messages .chat-message.other .chat-bubble.product-bubble{
  background:none; padding:0; border:none; border-radius:0;
}
/* 卡片在白底上补一道发丝描边，替代原先被气泡底色提供的边界 */
#page-messages .chat-message .chat-product-card,
#page-messages .chat-message .chat-order-card{
  border:1px solid var(--hairline-soft);
  border-radius:var(--r-md);
}

/* ═══════════════════════════════════════════════════
   §17 左滑置顶（三层错位式滑轨；2026-09-30 三次改版）
   ─────────────────────────────────────────────────
   DOM（`messages.js renderMessageList()` 生成）：
     .msg-swipe                       ← ① 白底层（容器自带 background:--canvas）
       ├ .msg-swipe-action            ← ② 颜色层（配色 + 右上直角）
       └ .msg-list-item               ← ③ 滑动层（白卡，右两角**恒定**圆角）

   「置顶标志」不另外画，靠**层错位**自然长出：
     ②右上直角 + ③右上圆角 → 卡片圆角之外那一块露出②层 = 带圆弧的三角（= 标志）
     ②右上圆角（与③同形同心）→ 完全被盖住，静止看不出任何东西

   配色与角形只由一个布尔量决定（JS `applyActionStyle`）：
     显示置顶风格 = (已置顶) ≠ (已过半)
       未置顶·静止/未过半 → 墨黑（被卡片盖住）
       未置顶·过半        → 绿 + 右上直角（黑→绿：即将置顶）
       已置顶·静止        → 绿 + 右上直角（**常驻标志**）
       已置顶·过半        → 墨黑（绿→黑：即将取消置顶）

   交互（JS `bindMessageListEvents`）：
     · 仅左滑；位移夹在 [-行宽, 0]；纵向意图交还页面滚动（touch-action:pan-y + 轴判定）
     · 未过半松手 → 还原配色 + 回弹（240ms，与改造前一致）
     · ≥ 过半松手 → ①卡片滑出(160ms) → ②数据变更与重排 → ③从最左弹回(240ms)
     · 触摸被系统中断（touchcancel）→ 一律回弹，不具备提交语义
   ⚠ 原 .delete-action / .swiped 的历史层规则**保留在 messages.css 不动**（回滚锚点）。 */
#msgListView .msg-swipe{
  position:relative;
  overflow:hidden;
  background:var(--canvas);                     /* ① 白底层 */
  touch-action:pan-y;                           /* 纵向滚动仍由页面接管 */
}
/* ② 颜色层：默认 = 未置顶风格（墨黑 + 右两角圆角 → 与卡片同形，被完全盖住）
   ⚠ 圆角必须**比卡片大 8px**（`--r-lg + 8px`）：
     差 1.5px 时两条弧几乎重合 → 抗锯齿在弧线上留下**一条发灰的圆弧**
     （2026-10-01 逐像素实测：卡片右缘最外几列出现 228/232/236/242/244 等灰点并连成弧线，
       纯白底上肉眼可见 = 用户报的「聊天列表有圆角边框」）。
     差 8px 后颜色层轮廓完全收进卡片内 → 逐像素实测右侧 6 列全 255（零灰点）。
     注：「右上直角」由 `.pin-style` 单独给出 → 与这个内缩量无关，置顶标志大小形状不变。 */
#msgListView .msg-swipe-action{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:flex-end;
  padding-right:20px;
  background:var(--ink);                        /* 墨黑 = 未置顶 */
  color:var(--on-theme);
  border-radius:0 calc(var(--r-lg) + 8px) calc(var(--r-lg) + 8px) 0;
  transition:background-color 140ms ease, border-radius 140ms ease;
}
/* 置顶风格：绿 + **右上直角**（右下仍圆角内缩，与卡片吻合）→ 右上角露出圆弧三角 = 标志 */
#msgListView .msg-swipe-action.pin-style{
  background:var(--theme);
  border-radius:0 0 calc(var(--r-lg) + 8px) 0;
}
/* 图标 + 文字：**墨迹等高** + 水平间距 8px
   ⚠ 用户 2026-09-30 要求「图标和文字高度一样高，左右分布间距要合理」。
     两个图标（置顶 / 取消置顶）**共用同一段图钉本体路径**，渲染尺寸由 JS 统一给出
     （`PIN_ICON_SIZE = 21.7`，按「本体墨迹 = 14px = 文字高度」反算）；
     **本处严禁覆盖 width/height**（覆盖会破坏等高关系）。 */
#msgListView .msg-swipe-action-label{
  display:flex; align-items:center; gap:8px;
  font-size:var(--t-body); font-weight:600; line-height:1;
  white-space:nowrap;
}
#msgListView .msg-swipe-action-label svg{ flex-shrink:0; display:block; }
/* ③ 滑动层：白卡，右两角**恒定圆角**（不再只在滑动时才圆角 —— 标志靠它的圆角"抠"出来） */
#msgListView .msg-swipe .msg-list-item{
  position:relative;
  border-radius:0 var(--r-lg) var(--r-lg) 0;
  touch-action:pan-y;
  transition:transform 240ms cubic-bezier(.22,.61,.36,1);   /* 与「未过半回弹」同值 */
}
/* 已置顶行：分隔线右端内缩，避免发丝线压在绿色标志上（分隔线是卡片的 ::before） */
#msgListView .msg-swipe.pinned .msg-list-item::before{ right:var(--r-lg); }