/* ═══ 消息页专属样式 ═══ */
#page-messages { background: #FFFFFF; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; }
.msg-list-view { display: flex; flex-direction: column; height: 100%; background: #fff; }
.msg-title-bar { display: flex; align-items: center; justify-content: space-between; padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 12px; background: #FFFFFF; border-bottom: 1px solid #F0F1F3; flex-shrink: 0; }
.msg-title-text { font-size: 24px; font-weight: 700; line-height: 32px; color: #1A1C1E; }
.msg-title-actions { display: flex; align-items: center; gap: 8px; }
.msg-search-btn { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 50%; }
.msg-search-btn:active { background: #F0F1F3; }
#page-messages .msg-login-btn { width: 70px; height: 32px; background: #FF5C39; color: #fff; border-radius: 6px; font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center; cursor: pointer; border: none; flex-shrink: 0; }
#page-messages .msg-login-btn:active { transform: scale(0.95); }
#page-messages .msg-user-avatar { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; background: #E8EAED; flex-shrink: 0; }
#page-messages .msg-user-avatar img { width: 100%; height: 100%; object-fit: cover; }
#page-messages .msg-user-name { font-size: 14px; font-weight: 600; color: #1A1C1E; max-width: 88px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 0; }
.msg-search-bar { padding: 8px 12px; background: #FFFFFF; border-bottom: 1px solid #F0F1F3; flex-shrink: 0; }
.msg-search-input { display: flex; align-items: center; background: #F0F1F3; border-radius: 10px; padding: 6px 10px; gap: 6px; }
.msg-search-input input { border: none; outline: none; flex: 1; font-size: 14px; background: transparent; color: #1A1C1E; }
.msg-search-input input::placeholder { color: #B0B3B8; }
.msg-search-cancel { font-size: 14px; color: #4F8CFF; cursor: pointer; white-space: nowrap; padding: 0 4px; }
.msg-scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.msg-list-item { display: flex; align-items: center; padding: 12px 16px; border-bottom: 1px solid #F0F1F3; position: relative; overflow: hidden; transition: transform 0.2s; background: #fff; }
.msg-list-item:active { background: #F8F9FA; }
.msg-list-item.pinned { background: #F5F7FA; }
.msg-list-item .delete-action { position: absolute; right: 0; top: 0; bottom: 0; width: 72px; background: #FF3B30; color: #fff; font-size: 14px; font-weight: 600; display: flex; align-items: center; justify-content: center; transform: translateX(72px); transition: transform 0.2s; cursor: pointer; }
.msg-list-item.swiped .delete-action { transform: translateX(0); }
.msg-list-item.swiped { transform: translateX(-72px); }
.msg-avatar { width: 48px; height: 48px; border-radius: 6px; background: #E8EAED; flex-shrink: 0; overflow: hidden; margin-right: 12px; }
.msg-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ═══ ★2026-10-25（用户拍板）：头像「加载中 / 无头像 = 灰底白色人物」→「加载完成 = 白底 + 头像」═══
   背景（两条用户报障）：
     ① 上传的头像常是**透明底 PNG**（官方客服那张 1024² 四角 alpha=0），
        容器底色是浅灰 `--surface-strong` → 透明区域露出灰色圆盘；
     ② 上版用 `::before` 画图标但**没设层级**：绝对定位的伪元素会画在
        非定位的 `img` **之上** → 头像加载完成后灰色人物图标仍压在头像上。
   做法：
     · `::before` 铺**站内默认头像素材**（`pingtai/avatar_default.png` = 灰底 + 白色人物，
       即用户要"恢复"的那张），`z-index:0` 压在图片**下面**；
     · `img` 默认 `opacity:0` → **加载中 = 灰底 + 白色人物**；
     · 图片 `load` 后由 JS 加 `.is-loaded` → `opacity:1` + `z-index:1` + **纯白底**
       → 白底盖住占位层，透明区域显示白色，圆盘边界消失；
     · 加载失败（`onerror`）永远不加类 → 保持灰底 + 白色人物（=「无头像」观感）。
   四类头像同一口径：会话列表 / 聊天气泡 / 聊天信息页 / 转发浮层。
   ⚠️ 在线绿点 `::after` 必须显式 `z-index:2`（见 skin-messages.css），否则会被白底 img 盖住。
   ⚠️ `img` 上的 `onerror="this.style.background='#E8EAED'"` 保留不动（opacity:0 时不可见，无副作用）。 */
.msg-avatar, .chat-msg-avatar, .info-avatar, .forward-contact-avatar { position: relative; }
.msg-avatar::before, .chat-msg-avatar::before,
.info-avatar::before, .forward-contact-avatar::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  border-radius: inherit; pointer-events: none;
  background: #E8EAED url("../../pingtai/avatar_default.png") center / cover no-repeat;
}
.msg-avatar img, .chat-msg-avatar img,
.info-avatar img, .forward-contact-avatar img {
  position: relative; z-index: 1; opacity: 0;
}
.msg-avatar img.is-loaded, .chat-msg-avatar img.is-loaded,
.info-avatar img.is-loaded, .forward-contact-avatar img.is-loaded {
  opacity: 1;
  background: var(--canvas, #FFFFFF);
}
.msg-info { flex: 1; overflow: hidden; }
.msg-nickname { font-size: 16px; font-weight: 500; color: #1A1C1E; margin-bottom: 3px; display: flex; align-items: center; }
.msg-name-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-mute-icon, .chat-mute-icon { flex-shrink: 0; margin-left: 4px; }
/* 在线点（★2026-10-15 用户拍板）：**在线=绿 / 离线=灰**，位置与尺寸**永不变**（离线也占位，
   区别更明显）。数据来自服务端 `peerOnline`（会话粒度）+ WS `chat_presence` 实时变更。 */
.online-dot { width: 8px; height: 8px; border-radius: 50%; background: #34C759; margin-left: 4px; flex-shrink: 0; box-shadow: 0 0 0 1px #fff; }
.online-dot.is-off { background: #8E96A3; }
.msg-last { font-size: 13px; color: #8E96A3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-meta { text-align: right; min-width: 50px; display: flex; flex-direction: column; align-items: flex-end; }
.msg-time { font-size: 11px; color: #B0B3B8; margin-bottom: 4px; white-space: nowrap; }
.msg-unread { background: #FF3B30; color: #fff; font-size: 11px; min-width: 18px; height: 18px; border-radius: 9px; text-align: center; line-height: 18px; display: inline-block; padding: 0 5px; font-weight: 600; }
.msg-empty { text-align: center; padding: 60px 20px; color: #A0A4A8; font-size: 14px; }
/* 面板内轻量空态（商品/公告面板空内容提示，保持面板高度不撑高） */
.goods-empty { text-align: center; padding: 24px 20px; color: #A0A4A8; font-size: 14px; }

/* 客服列表官方账号业务公告（仅普通视角/未登录可见） */
.msg-announce-banner {
  margin: 12px 12px 12px;
  padding: 14px 14px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,92,57,0.18);
  border-left: 3px solid #FF5C39;
  background: linear-gradient(135deg, rgba(255,92,57,0.06), rgba(79,140,255,0.05));
}
.msg-announce-header { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.msg-announce-title { font-size: 13px; font-weight: 700; color: #FF5C39; letter-spacing: 0.5px; }
.msg-announce-highlight { font-size: 15px; font-weight: 700; color: #1A1C1E; line-height: 1.4; margin-bottom: 4px; }
.msg-announce-detail { font-size: 12.5px; color: #6A6E74; line-height: 1.5; margin-bottom: 8px; }
.msg-announce-cta { font-size: 13px; font-weight: 600; color: #FF5C39; line-height: 1.5; }

/* 官方徽章：金色镂空线框 */
.identity-badge.official {
  display: inline-flex; align-items: center; justify-content: center;
  height: 16px; padding: 0 4px; margin-left: 5px; border-radius: 3px;   /* 4 → 5px：全站徽章间距统一 5px（评论详情页 / 转发面板两处无皮肤覆盖，靠此处生效） */
  font-size: 10px; font-weight: 600; line-height: 1; flex-shrink: 0;
  color: #C9A227; border: 1px solid #C9A227; background: transparent;
}

/* 聊天窗口 */
.chat-view { display: none; flex-direction: column; height: 100%; background: #F0F1F3; }
.chat-view.show { display: flex; }
.chat-header { display: flex; align-items: center; padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px; background: #FFFFFF; border-bottom: 1px solid rgba(0,0,0,0.06); position: relative; flex-shrink: 0; z-index: 6; }
.chat-back-btn { flex-shrink: 0; width: 32px; height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.chat-back-btn svg { stroke: #1A1C1E; stroke-width: 2.5; fill: none; }
.chat-nickname-center { flex: 1; min-width: 0; margin-left: 8px; display: flex; align-items: center; justify-content: flex-start; font-size: 17px; font-weight: 600; color: #1A1C1E; line-height: 44px; padding-right: 118px; }
.chat-name-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-ext-btn { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 50%; overflow: hidden; }
.chat-ext-btn img { width: 22px; height: 22px; object-fit: contain; }
.chat-ext-btn:active { background: #F0F1F3; }
.chat-header-actions { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 4px; z-index: 1; }
.chat-more-btn { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 50%; }
.chat-more-btn:active { background: #F0F1F3; }
.chat-messages-scroll { flex: 1; overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; }
.chat-message { display: flex; margin-bottom: 16px; width: 100%; align-items: flex-start; }
.chat-message.other { justify-content: flex-start; }
.chat-message.self { justify-content: flex-end; }
.chat-msg-avatar { width: 36px; height: 36px; border-radius: 4px; background: #E8EAED; flex-shrink: 0; overflow: hidden; }
.chat-msg-avatar img { width: 100%; height: 100%; object-fit: cover; }
.chat-message.other .chat-msg-avatar { margin-right: 8px; }
.chat-message.self .chat-msg-avatar { margin-left: 8px; }
.chat-bubble { max-width: calc(100% - 88px); padding: 10px 14px; border-radius: 8px; font-size: 15px; line-height: 1.5; word-break: break-word; position: relative; user-select: none; -webkit-user-select: none; white-space: pre-wrap; }
.chat-message.other .chat-bubble { background: #FFFFFF; color: #1A1C1E; border-top-left-radius: 2px; }
.chat-message.self .chat-bubble { background: #81D8D0; color: #000; border-top-right-radius: 2px; }
.chat-message.time-stamp { justify-content: center; margin: 8px 0 16px; }
.chat-time-badge { background: #E8EAED; color: #B0B3B8; font-size: 11px; padding: 3px 8px; border-radius: 4px; }
.chat-img-bubble { max-width: 60%; border-radius: 8px; overflow: hidden; cursor: pointer; }
.chat-img-bubble img { width: 100%; height: auto; display: block; }
.chat-img-bubble.video-bubble { max-width: 60%; }

/* ═══ ★2026-10-16：语音气泡（网页端**只能播、不能发** —— App 发来的语音在这里展示）═══
   结构：波形（5 根柱）+ 时长 + 播放态图标；点击整块播放/暂停（同一时刻只播一条）。
   ⚠️ 配色与 App `_VoiceBubble` 同口径：对方 = 白底 + 墨黑字；我方 = 主题色气泡。 */
.chat-voice-bubble { display: flex; align-items: center; gap: 8px; min-width: 110px; max-width: 200px; padding: 10px 14px; border-radius: 8px; cursor: pointer; }
.chat-message.other .chat-voice-bubble { background: #FFFFFF; color: #1A1C1E; border-top-left-radius: 2px; }
.chat-message.self .chat-voice-bubble { background: #81D8D0; color: #000; border-top-right-radius: 2px; }
.chat-voice-wave { display: flex; align-items: center; gap: 3px; height: 16px; }
.chat-voice-wave i { width: 3px; border-radius: 2px; background: currentColor; opacity: .55; }
.chat-voice-wave i:nth-child(1) { height: 6px; }
.chat-voice-wave i:nth-child(2) { height: 11px; }
.chat-voice-wave i:nth-child(3) { height: 16px; }
.chat-voice-wave i:nth-child(4) { height: 9px; }
.chat-voice-wave i:nth-child(5) { height: 5px; }
.chat-voice-bubble.playing .chat-voice-wave i { animation: chatVoiceWave 800ms ease-in-out infinite alternate; }
.chat-voice-bubble.playing .chat-voice-wave i:nth-child(2) { animation-delay: 120ms; }
.chat-voice-bubble.playing .chat-voice-wave i:nth-child(3) { animation-delay: 240ms; }
.chat-voice-bubble.playing .chat-voice-wave i:nth-child(4) { animation-delay: 360ms; }
.chat-voice-bubble.playing .chat-voice-wave i:nth-child(5) { animation-delay: 480ms; }
@keyframes chatVoiceWave { from { transform: scaleY(.6); } to { transform: scaleY(1.25); } }
.chat-voice-dur { font-size: 13px; line-height: 1; margin-left: auto; }
.chat-voice-state { font-size: 11px; line-height: 1; opacity: .7; }

/* ═══ ★2026-10-16：位置卡（App 端「发送我的位置」；网页端展示 + 点击用系统地图打开）═══
   与普通文本/链接消息**样式明确区分**：白卡 + 发丝边 + 主题色图标块 + 右侧「打开地图」胶囊。
   ⚠️ 与 App `demo_bubble.dart::_locationCard` **逐值对齐**（本项目双端样式同源的硬要求）。 */
.chat-location-card { display: flex; align-items: center; gap: 10px; max-width: calc(100% - 88px); padding: 12px; background: #FFFFFF; border: 1px solid var(--hairline-soft, #EBEBEB); border-radius: var(--r-md, 14px); cursor: pointer; }
.chat-location-icon { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 8px; background: var(--theme, #0E9F94); display: flex; align-items: center; justify-content: center; }
.chat-location-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.chat-location-title { font-size: 14px; line-height: 1.3; font-weight: 600; color: #1A1C1E; }
.chat-location-coord { font-size: 11px; line-height: 1.3; color: #8E96A3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-location-action { flex: 0 0 auto; margin-left: auto; padding: 6px 10px; border: 1px solid var(--theme, #0E9F94); border-radius: 999px; font-size: 11px; line-height: 1.2; font-weight: 600; color: var(--theme, #0E9F94); white-space: nowrap; }
.chat-input-bar { display: flex; align-items: flex-end; padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); background: #FFFFFF; border-top: 1px solid rgba(0,0,0,0.06); gap: 8px; flex-shrink: 0; position: relative; z-index: 6; }
.chat-emoji-btn { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; border-radius: 50%; transition: background 0.15s; margin-bottom: 2px; }
.chat-emoji-btn:active { background: #F0F1F3; }
.chat-emoji-btn svg { stroke: #8E96A3; fill: none; stroke-width: 2; }
.chat-input-field { flex: 1; min-height: 38px; max-height: 120px; background: #F0F1F3; border-radius: 8px; border: none; padding: 10px 12px; font-size: 15px; outline: none; color: #1A1C1E; resize: none; line-height: 1.4; font-family: inherit; }
.chat-input-field:focus { background: #fff; box-shadow: 0 0 0 1.5px #81D8D0; }
.chat-send-btn { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; font-size: 24px; color: #8E96A3; background: #F0F1F3; transition: all 0.25s ease; overflow: hidden; white-space: nowrap; margin-bottom: 2px; }
.chat-send-btn.active { width: 56px; border-radius: 8px; background: #81D8D0; color: #fff; font-size: 14px; font-weight: 600; }
.chat-send-btn .plus-icon { display: flex; }
.chat-send-btn .send-text { display: none; }
.chat-send-btn.active .plus-icon { display: none; }
.chat-send-btn.active .send-text { display: inline; }

/* 聊天窗口 emoji 透明点击层（盖住记录区，头部/输入栏在其上保持可点） */
.chat-dock-mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: transparent; z-index: 5; display: none; }
.chat-dock-mask.show { display: block; }

/* 加号下拉板块（与 emoji 板块同高同行为） */
.dock-shell { height: var(--dock-h, 0px); width: 100%; flex-shrink: 0; position: relative; overflow: hidden; }
.dock-shell.dock-anim { transition: height 0.2s ease; }
.dock-shell > .emoji-dock,
.dock-shell > .plus-dock { position: absolute; left: 0; right: 0; top: 0; height: 0; }
.dock-shell > .emoji-dock.show,
.dock-shell > .plus-dock.show { height: 100%; }
/* ⚠️ 底盘壳高度是键盘 / emoji / 加号**三态唯一来源**（shared/input-dock.js 写 --dock-h）。
   面板态取「最近一次测得的键盘高」（未测到则 300）→ 与键盘态同高，故三态互切时输入栏位置不变。
   面板本体不再写死 300px（原 `.emoji-dock.show{height:300px}` / `.plus-dock.show{height:300px}`
   已并入上方 `.dock-shell > ... .show{height:100%}`）。 */
.plus-dock { overflow: hidden; background: #F7F8FA; border-radius: 16px 16px 0 0; box-shadow: 0 -4px 16px rgba(0,0,0,0.1); z-index: 80; }
.plus-dock .plus-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 8px; padding: 20px 12px; box-sizing: border-box; }

/* 引用条 */
.reply-bar { display: none; align-items: center; padding: 8px 12px; background: #fff; border-top: 1px solid #F0F1F3; font-size: 13px; position: relative; z-index: 6; }
.reply-bar.show { display: flex; }
.reply-bar-content { flex: 1; overflow: hidden; }
.reply-bar-title { color: #8E96A3; margin-bottom: 2px; }
.reply-bar-text { color: #1A1C1E; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reply-bar-close { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #8E96A3; font-size: 16px; }

/* 聊天信息视图 */
.chat-info-view { display: none; flex-direction: column; height: 100%; background: #F0F1F3; }
.chat-info-view.show { display: flex; }
.info-header { display: flex; align-items: center; padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px; background: transparent; border-bottom: none; position: relative; flex-shrink: 0; }
.info-back-btn { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.info-back-btn svg { stroke: #1A1C1E; stroke-width: 2.5; fill: none; }
.info-title { flex: 1; text-align: center; font-size: 17px; font-weight: 600; color: #1A1C1E; margin-right: 32px; }
.info-scroll { flex: 1; overflow-y: auto; padding: 0; }
.info-user-card { display: flex; align-items: center; padding: 20px 16px; background: #fff; margin-bottom: 8px; border-radius: 0; }
.info-avatar { width: 64px; height: 64px; border-radius: 8px; background: #E8EAED; overflow: hidden; flex-shrink: 0; margin-right: 16px; }
.info-avatar img { width: 100%; height: 100%; object-fit: cover; }
.info-user-detail { display: flex; flex-direction: column; }
.info-user-name-row { display: flex; align-items: center; margin-bottom: 4px; }
.info-nickname { font-size: 18px; font-weight: 600; color: #1A1C1E; margin-right: 6px; }
.info-user-region { font-size: 13px; color: #8E96A3; }
.info-section { background: #fff; margin-bottom: 8px; overflow: hidden; border-radius: 0; }
.info-item { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid #F0F1F3; font-size: 16px; color: #1A1C1E; cursor: pointer; }
.info-item:last-child { border-bottom: none; }
.info-item:active { background: #F8F9FA; }
.danger-item { color: #FF3B30; justify-content: center; }
.switch-item { cursor: default; }
.switch-item:active { background: transparent; }
.switch { position: relative; display: inline-block; width: 50px; height: 30px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: #E8EAED; border-radius: 30px; transition: 0.2s; }
.slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 2px; bottom: 2px; background: #fff; border-radius: 50%; transition: 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.15); }
input:checked + .slider { background: #81D8D0; }
input:checked + .slider:before { transform: translateX(20px); }

/* 聊天记录搜索 */
.history-search-view { display: none; flex-direction: column; height: 100%; background: #fff; }
.history-search-view.show { display: flex; }
.history-search-bar { padding: 8px 12px; background: #FFFFFF; border-bottom: 1px solid #F0F1F3; flex-shrink: 0; }
.history-search-input-wrap { display: flex; align-items: center; background: #F0F1F3; border-radius: 10px; padding: 6px 10px; gap: 6px; }
.history-search-input { flex: 1; border: none; outline: none; font-size: 14px; background: transparent; color: #1A1C1E; }
.history-search-input::placeholder { color: #B0B3B8; }
.history-search-cancel { font-size: 14px; color: #4F8CFF; cursor: pointer; white-space: nowrap; padding: 0 4px; }
.history-results { flex: 1; overflow-y: auto; padding: 8px 16px; }
.history-result-item { padding: 12px 0; border-bottom: 1px solid #F0F1F3; font-size: 14px; color: #1A1C1E; cursor: pointer; }
.history-result-item span.highlight { color: #4F8CFF; }
.history-empty { text-align: center; padding: 40px; color: #8E96A3; }

/* 自定义确认弹窗 */
.confirm-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 300; align-items: center; justify-content: center; }
.confirm-overlay.show { display: flex; }
.confirm-dialog { width: 75%; max-width: 300px; background: #fff; border-radius: 12px; overflow: hidden; }
.confirm-title { font-size: 17px; font-weight: 600; color: #1A1C1E; text-align: center; padding: 20px 16px 8px; }
.confirm-body { font-size: 14px; color: #8E96A3; text-align: center; padding: 0 16px 20px; }
.confirm-actions { display: flex; border-top: 1px solid #F0F1F3; }
.confirm-btn { flex: 1; height: 44px; border: none; background: #fff; font-size: 16px; cursor: pointer; }
.confirm-btn.cancel { color: #1A1C1E; border-right: 1px solid #F0F1F3; }
.confirm-btn.danger { color: #FF3B30; font-weight: 600; }
.confirm-btn:active { background: #F8F9FA; }

/* 备注名称栏 */
.remark-item { cursor: pointer; }
.remark-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.remark-edit-hint { color: #FF3B30; font-size: 13px; flex-shrink: 0; margin-right: 6px; }

/* 微信联系浮窗 */
.wechat-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 310; align-items: center; justify-content: center; }
.wechat-overlay.show { display: flex; }
.wechat-panel { width: 86%; max-width: 300px; background: #fff; border-radius: 16px; padding: 20px 16px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.wechat-header { width: 100%; display: flex; align-items: center; justify-content: center; position: relative; }
.wechat-title { font-size: 16px; font-weight: 600; color: #1A1C1E; }
.wechat-close { position: absolute; right: 0; top: -8px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #8E96A3; font-size: 18px; }
.wechat-qr-wrap { background: #fff; border: 1px solid #F0F1F3; border-radius: 8px; padding: 8px; }
.wechat-qr-wrap canvas { display: block; width: 180px; height: 180px; }
.wechat-tip { font-size: 13px; color: #8E96A3; }
.wechat-account-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: #F7F8FA; border-radius: 8px; padding: 8px 12px; width: 100%; box-sizing: border-box; }
.wechat-account { font-size: 14px; color: #1A1C1E; }
.wechat-copy-btn { border: 1px solid #81D8D0; background: #fff; color: #2BB3A8; font-size: 13px; padding: 4px 12px; border-radius: 6px; cursor: pointer; }
.wechat-copy-btn:active { background: #F0FBFA; }
.wechat-download-btn { width: 100%; height: 40px; background: #81D8D0; color: #fff; border: none; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; }
.wechat-download-btn:active { background: #6cc7bf; }

/* 备注名称浮窗 */
.remark-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 310; align-items: center; justify-content: center; }
.remark-overlay.show { display: flex; }
.remark-dialog { width: 75%; max-width: 300px; background: #fff; border-radius: 12px; padding: 20px 16px 0; display: flex; flex-direction: column; gap: 14px; }
.remark-title { font-size: 17px; font-weight: 600; color: #1A1C1E; text-align: center; }
.remark-input-wrap { position: relative; }
.remark-input { width: 100%; box-sizing: border-box; height: 42px; border: 1px solid #E0E3E8; border-radius: 8px; padding: 0 52px 0 12px; font-size: 15px; outline: none; background: #F7F8FA; color: #1A1C1E; }
.remark-count { position: absolute; right: 8px; bottom: 8px; font-size: 11px; color: #B0B3B8; pointer-events: none; }
.remark-input:focus { background: #fff; border-color: #81D8D0; }
.remark-actions { display: flex; border-top: 1px solid #F0F1F3; margin: 0 -16px; }
.remark-btn { flex: 1; height: 44px; border: none; background: #fff; font-size: 16px; cursor: pointer; }
.remark-btn.cancel { color: #1A1C1E; border-right: 1px solid #F0F1F3; border-radius: 0 0 0 12px; }
.remark-btn.ok { color: #2BB3A8; font-weight: 600; border-radius: 0 0 12px 0; }
.remark-btn:active { background: #F8F9FA; }

/* 加号下拉板块 */
.plus-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 8px; }
.plus-item { display: flex; flex-direction: column; align-items: center; cursor: pointer; gap: 8px; }
.plus-item span { font-size: 12px; color: #666; }
.plus-icon-wrap { width: 56px; height: 56px; border-radius: 12px; background: #fff; display: flex; align-items: center; justify-content: center; }
.plus-item:active .plus-icon-wrap { background: #E8EAED; }

/* 长按菜单 */
.longpress-menu { display: none; position: fixed; z-index: 250; background: #fff; border-radius: 8px; box-shadow: 0 2px 16px rgba(0,0,0,0.18); padding: 4px 0; flex-wrap: nowrap; flex-direction: row; align-items: center; gap: 0; }
.longpress-menu.show { display: flex; }
.lp-item { display: flex; flex-direction: column; align-items: center; padding: 10px 14px; cursor: pointer; min-width: 56px; }
.lp-item:active { background: #F5F5F5; }
.lp-item svg { fill: none; stroke: #333; stroke-width: 1.8; margin-bottom: 6px; }
.lp-item span { font-size: 11px; color: #666; }

.longpress-mask {
  display: none;
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  z-index: 249; background: transparent;
}
.longpress-mask.show { display: block; }

/* 转发面板 */
.forward-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); z-index: 300; align-items: flex-end; justify-content: center; }
.forward-overlay.show { display: flex; }
.forward-panel { width: 100%; max-width: 430px; background: #fff; border-radius: 16px 16px 0 0; max-height: 70vh; display: flex; flex-direction: column; }
.forward-header { display: flex; align-items: center; justify-content: space-between; padding: 16px; border-bottom: 1px solid #F0F1F3; }
.forward-title { font-size: 17px; font-weight: 600; }
.forward-close { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 20px; color: #8E96A3; }
.forward-list { flex: 1; overflow-y: auto; }
.forward-contact { display: flex; align-items: center; padding: 12px 16px; border-bottom: 1px solid #F0F1F3; cursor: pointer; }
.forward-contact:active { background: #F5F5F5; }
.forward-contact-avatar { width: 40px; height: 40px; border-radius: 6px; background: #E8EAED; margin-right: 12px; overflow: hidden; }
.forward-contact-avatar img { width: 100%; height: 100%; object-fit: cover; }
.forward-contact-name { font-size: 15px; color: #1A1C1E; }

/* 多选模式 */
.chat-messages.multi-select .chat-message { position: relative; padding-left: 34px; }
.chat-messages.multi-select .chat-message.time-stamp { padding-left: 0; }
.select-checkbox { position: absolute; left: 0; top: 7px; width: 22px; height: 22px; border: 2px solid #D0D3D8; border-radius: 50%; margin-right: 0; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: #fff; }
.chat-message.selected .select-checkbox { background: #81D8D0; border-color: #81D8D0; }
.chat-message.selected .select-checkbox::after { content: '✓'; color: #fff; font-size: 14px; }
.multi-action-bar { display: none; justify-content: space-around; align-items: center; padding: 12px 8px calc(12px + env(safe-area-inset-bottom, 0px)); background: #fff; border-top: 1px solid #F0F1F3; position: relative; z-index: 6; }
.multi-action-bar.show { display: flex; }
.multi-item { display: flex; flex-direction: column; align-items: center; padding: 8px 16px; cursor: pointer; min-width: 48px; }
.multi-item:active { background: #F5F5F5; border-radius: 8px; }
.multi-item svg { fill: none; stroke: #333; stroke-width: 1.8; margin-bottom: 6px; }
.multi-item span { font-size: 11px; color: #666; }

/* ========== 商品板块完整样式 ========== */
#page-messages .product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
#page-messages .product-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  transition: transform 0.1s;
  cursor: pointer;
}
#page-messages .product-card:active {
  transform: scale(0.96);
}
#page-messages .product-image {
  width: 100%;
  aspect-ratio: 1;
  background: #E8EAED;
  position: relative;
  overflow: hidden;
}
#page-messages .product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#page-messages .product-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: #FF5C39;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
}
#page-messages .product-info {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#page-messages .product-title {
  font-size: 14px;
  color: #1A1C1E;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#page-messages .product-price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
#page-messages .price {
  font-size: 18px;
  font-weight: 700;
  color: #FF5C39;
}
#page-messages .price-symbol {
  font-size: 14px;
}
#page-messages .meta-text {
  font-size: 12px;
  color: #A0A4A8;
}

/* --- 商品浮窗 --- */
.goods-overlay {
  position: fixed; top:0; left:0; width:100%; height:100%;
  background: rgba(0,0,0,0.4); z-index:300;
  display: none; align-items: flex-end; justify-content: center;
}
.goods-overlay.show { display: flex; }
.goods-panel {
  width:100%; max-width:430px; background:#fff;
  border-radius: 16px 16px 0 0; max-height:70vh; min-height:268px;
  display: flex; flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom);
}
.goods-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px; border-bottom: 1px solid #F0F1F3;
}
.goods-title { font-size: 17px; font-weight: 600; }
.goods-close { width:32px; height:32px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:20px; color:#8E96A3; }
.goods-scroll { flex:1; overflow-y: auto; padding: 12px; }

/* 商品/公告面板标签栏 */
.goods-tabs { display: flex; padding: 0 16px; border-bottom: 1px solid #F0F1F3; gap: 28px; flex-shrink: 0; }
.goods-tab { position: relative; padding: 10px 0 8px; font-size: 14px; color: #8E96A3; cursor: pointer; white-space: nowrap; }
.goods-tab.active { color: #1A1C1E; font-weight: 600; }
.goods-tab.active::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); bottom: -1px; width: 28px; height: 2px; background: #FF5C39; border-radius: 1px; }
.goods-search-bar { padding: 10px 16px; flex-shrink: 0; }

/* 商品浮窗搜索框 */
.goods-search-bar .msg-search-input { border-radius: 8px; padding: 4px 8px; }
.goods-search-bar input { border:none; outline:none; flex:1; font-size:14px; background:transparent; color:#1A1C1E; }
.goods-search-bar input::placeholder { color:#B0B3B8; }

/* 聊天中商品卡片消息 */
.chat-product-card {
  width: 240px; max-width: 100%;
  background: #fff; border-radius: 8px; overflow: hidden;
  box-shadow: 0 1px 6px rgba(0,0,0,0.06);
  cursor: pointer;
}
.chat-message.self .chat-product-card { background: #fff; }
.chat-product-img {
  width:100%; aspect-ratio: 4/3; background:#E8EAED; overflow: hidden;
}
.chat-product-img img { width:100%; height:100%; object-fit: cover; }
.chat-product-info { padding: 8px 10px; }
.chat-product-title { font-size:13px; color:#1A1C1E; line-height:1.3; margin-bottom:4px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.chat-product-meta { display:flex; align-items:baseline; justify-content:space-between; }
.chat-product-price { font-size:16px; font-weight:700; color:#FF5C39; }
.chat-product-sold { font-size:11px; color:#A0A4A8; }

/* ── 规格行（2026-10-05 新增，双端统一）──
   分割线 + 「规格名 + 规格价格」成一组**靠左** + 库存单独**靠右**。
   规格名纯文字、**最多 2 行**（与 `.chat-product-title` 同限制）；
   规格价格**不彩色**（与规格名同为内容色）；库存靠 `margin-left:auto` 推到最右。
   `align-items:flex-end` → 规格名折两行时，价格/库存与其**最后一行**底边对齐。
   ⚠️ `.chat-product-spec-main` **绝不能加 `flex:1`** —— 加了价格会被顶到库存旁边（已踩）。 */
.chat-product-spec-row {
  display: flex; align-items: flex-end; gap: 8px;
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid #F0F1F3;
}
.chat-product-spec-main {
  /* ⚠️ `gap: 0` 是刻意的：「规格：」标签与规格名之间**不得有间隙**，
     要连成正常文本「规格：6寸」（用户 2026-10-05）。
     规格名 ↔ 价格之间那 8px 改由 `.chat-product-spec-price{margin-left}` 承担。 */
  display: flex; align-items: flex-end; gap: 0;
  min-width: 0;
}
.chat-product-spec {
  min-width: 0;
  font-size: 11px; line-height: 1.3; color: #6A6E74;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* 「规格：」通用标题（`messages.spec_label`，5 语言齐备）—— 颜色与字重**与 `.chat-product-title`
   逐值相同**（用户 2026-10-05：「"规格："的字体颜色和粗细要和卡片中商品名称文字一样，
   字号大小保持现在的不变」），字号保持 11px。 */
.chat-product-spec-label { flex-shrink: 0; font-size: 11px; line-height: 1.3; color: #1A1C1E; }
.chat-product-spec-price { flex-shrink: 0; margin-left: 8px; font-size: 11px; line-height: 1.3; color: #6A6E74; }
.chat-product-stock { margin-left: auto; flex-shrink: 0; font-size: 11px; line-height: 1.3; color: #A0A4A8; white-space: nowrap; }

/* 商品气泡缩窄 */
.chat-bubble.product-bubble { padding: 6px 8px; }

/* 订单浮窗 */
.order-overlay {
  position: fixed; top:0; left:0; width:100%; height:100%;
  background: rgba(0,0,0,0.4); z-index:300;
  display: none; align-items: flex-end; justify-content: center;
}
.order-overlay.show { display: flex; }

/* 温馨提示浮窗（回收页/客服列表进入官方客服时展示：先进聊天后延时弹出，渐显渐隐，仅"我已知晓"关闭） */
.service-guide-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.42); z-index: 320;
  display: flex; align-items: center; justify-content: center; padding: 20px 16px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}
.service-guide-overlay.show { opacity: 1; visibility: visible; pointer-events: auto; }
.service-guide-dialog {
  width: 100%; max-width: 360px; background: #fff; border-radius: 16px;
  padding: 18px 16px 16px; box-shadow: 0 16px 40px rgba(0,0,0,0.2);
  transform: translateY(8px); transition: transform 0.22s ease;
}
.service-guide-overlay.show .service-guide-dialog { transform: translateY(0); }
.service-guide-title { font-size: 17px; font-weight: 700; color: #1A1C1E; margin-bottom: 12px; text-align: center; }
.service-guide-body { font-size: 14px; color: #4F5560; line-height: 1.72; white-space: pre-line; }
.service-guide-check { display: flex; align-items: center; gap: 8px; margin-top: 14px; color: #6A6E74; font-size: 13px; }
.service-guide-check input { width: 16px; height: 16px; accent-color: #2F6BFF; flex-shrink: 0; }
.service-guide-actions { margin-top: 16px; }
.service-guide-btn { width: 100%; height: 44px; border: none; border-radius: 10px; background: #81D8D0; color: #1A1C1E; font-size: 15px; font-weight: 600; cursor: pointer; }
.service-guide-btn:active { opacity: 0.85; }

/* 商品发送确认浮窗（商品详情入口：先进聊天后延时弹出，无动画） */
.product-send-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.36); z-index: 320;
  display: none; align-items: center; justify-content: center; padding: 20px 16px;
}
.product-send-overlay.show { display: flex; }
.product-send-dialog {
  width: 100%; max-width: 320px; background: #fff; border-radius: 14px;
  padding: 12px; box-shadow: 0 16px 40px rgba(0,0,0,0.2);
}
.product-send-card { margin-bottom: 12px; }
.product-send-card .chat-product-card { width: 100%; box-shadow: none; border: 1px solid #F0F1F3; }
.product-send-actions { display: flex; gap: 10px; }
.product-send-btn { flex: 1; height: 40px; border-radius: 10px; font-size: 14px; font-weight: 600; border: none; cursor: pointer; }
.product-send-btn.cancel { background: #F0F1F3; color: #4F5560; }
.product-send-btn.ok { background: #FF5C39; color: #fff; }
.product-send-btn:active { opacity: 0.85; }

.order-list-item {
  display: flex; align-items: center; padding: 12px 16px;
  background: #fff; border-bottom: 1px solid #F0F1F3;
  cursor: pointer;
}
.order-list-item:active { background: #F8F9FA; }
.order-list-img {
  width: 60px; height: 60px; border-radius: 8px;
  background: #E8EAED; flex-shrink: 0; overflow: hidden; margin-right: 12px;
}
.order-list-img img { width:100%; height:100%; object-fit: cover; }
.order-list-info { flex:1; overflow: hidden; }
.order-list-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.order-list-status {
  font-size: 11px; padding: 2px 6px; border-radius: 4px; color: #fff; font-weight: 500;
  flex-shrink: 0; white-space: nowrap;
}
.order-list-title { font-size:14px; font-weight:600; color:#1A1C1E; margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.order-list-body { font-size:13px; color:#6A6E74; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* 聊天中订单卡片 */
.chat-order-card {
  display: flex; align-items: center;
  width: 100%; border-radius: 8px; overflow: hidden;
  background: #fff; box-shadow: 0 1px 6px rgba(0,0,0,0.04);
  position: relative;
}
.chat-order-img {
  width: 80px; height: 80px; flex-shrink: 0;
  background: #E8EAED; overflow: hidden;
}
.chat-order-img img { width:100%; height:100%; object-fit: cover; }
.chat-order-info {
  flex: 1; padding: 8px 10px; display: flex; flex-direction: column;
  justify-content: center; gap: 2px; min-width: 0;
}
.chat-order-header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.chat-order-title {
  flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: #1A1C1E;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-order-body {
  font-size: 12px; color: #6A6E74; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.chat-order-status {
  flex-shrink: 0; font-size: 10px; padding: 2px 6px; border-radius: 4px; color: #fff;
  white-space: nowrap;
}

@media (orientation: landscape) {
  .chat-product-card { max-width: 280px; }
  .forward-panel, .goods-panel { max-width: 430px; }
}