/* styles-im.css — IM 富媒体消息样式（表情/图片/语音/文件 + 7天有效期角标 + 过期态）
   r15 2026-09-15：随 IM 迭代新增；仅聊天相关选择器，不影响其他模块。 */

/* ── 文本消息（含表情内联渲染） ── */
.chat-text { word-break: break-word; white-space: pre-wrap; font-size: 14px; line-height: 1.55; }

/* 内联表情（文本 [emoji:ID] 正则渲染 / emoji 消息整贴） */
.chat-emoji { width: 64px; height: 64px; max-width: 100%; vertical-align: -6px; display: inline-block; object-fit: contain; background: transparent; }
.chat-bubble .chat-emoji { margin: 2px; }

/* ── 裸消息（Sven 2026-09-15）：图片/文件/表情不套背景气泡，直接展示缩略图/卡片 ──
   仅文本与语音条保留 chat-bubble 原始背景；本类须置于 styles.css 的 .chat-bubble 之后加载以覆盖 */
.chat-bubble.chat-bubble-bare { background: transparent; border: none; padding: 0; border-radius: 0; box-shadow: none; }
.chat-row.me .chat-bubble.chat-bubble-bare { background: transparent; color: inherit; border-color: transparent; }
.chat-row.me .chat-bubble-bare .chat-file-card { color: #1f2937; }
.chat-row.me .chat-bubble-bare .chat-file-state { color: #9ca3af; }
.chat-row.me .chat-bubble-bare .chat-voice { color: #1f2937; }

/* ── 图片消息 ── */
.chat-imgs { display: flex; flex-wrap: wrap; gap: 6px; max-width: 320px; }
.chat-img-wrap { position: relative; display: flex; flex-direction: column; gap: 3px; }
.chat-img { max-width: 180px; max-height: 180px; object-fit: contain; border-radius: 8px; display: block; cursor: zoom-in; background: rgba(0,0,0,.04);
  /* 缩略图边缘边框：防止与聊天背景色融为一体（图片/视频统一） */
  border: 1px solid rgba(0,0,0,.12); box-sizing: border-box; }
/* Sven 2026-09-16（需求②）：过期附件不再做占位展示，原过期虚线占位框样式已废弃移除。
   2026-09-16 追加：附件有效期角标也不再展示，对应角标样式一并移除。 */

/* ── 语音消息（r27 电磁波动效） ── */
/* Sven 2026-09-16 r27：语音条重做为电磁波样式 —— 左 RGB 圆环播放钮 + 中部波形 canvas + 右时长。
   暗色玻璃药丸承托三原色弧线（红→绿→蓝沿弧线方向过渡）；总高 41.7px，延续与文本气泡单行的高度对齐。
   波形由 Web Audio AnalyserNode 实时驱动（见 core/im-message.js）；静止时为 initVoiceWaves 画的静态预览帧。 */
.chat-voice { display: flex; align-items: center; gap: 7px; min-width: 150px; height: 41.7px; box-sizing: border-box;
  margin: 0; padding: 4px 12px 4px 5px; border-radius: 21px; cursor: pointer; user-select: none; line-height: 1.5;
  background: linear-gradient(135deg, rgba(30,41,59,.97), rgba(15,23,42,.97));
  border: 1px solid rgba(255,255,255,.10); box-shadow: 0 1px 3px rgba(0,0,0,.18); color: #e5e7eb; }
/* 需求⑥：不要悬停浅色小气泡 —— 特意不设 :hover 背景变化 */
/* 播放钮：细 RGB 渐变圆环 + 暗色圆心，与波形三原色呼应；图标为白色三角/双竖条（随播放态切换 innerHTML） */
.chat-voice-play { position: relative; width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; color: #fff;
  background: conic-gradient(from 210deg, #ff4d4f, #22c55e, #3b82f6, #ff4d4f); }
.chat-voice-play::before { content: ''; position: absolute; inset: 2.5px; border-radius: 50%; background: rgba(15,23,42,.95); }
.chat-voice-play svg { position: relative; z-index: 1; }
.chat-voice-wave { width: 120px; height: 30px; flex: 0 0 auto; display: block; }
/* r66：播放时这里显示**剩余秒数**（倒数）→ 位宽会从 2 位掉到 1 位，
   给个固定下限 + 右对齐，免得整颗药丸跟着抖（tabular-nums 已保证数字等宽）。 */
.chat-voice-dur { font-size: 14px; line-height: 1.5; color: #e5e7eb; font-variant-numeric: tabular-nums; flex: 0 0 auto;
  min-width: 2.4em; text-align: right; }
/* 播放中：微微提亮描边 + 一点绿色辉光（替代旧蓝色高亮；配合 playVoice 的 playing 类） */
.chat-voice.playing { border-color: rgba(255,255,255,.24); box-shadow: 0 0 0 1px rgba(255,255,255,.05), 0 2px 12px rgba(34,197,94,.22); }
/* 语音条位于裸气泡（去 padding）时，自行补足 9px/13px 内边距 + 1px 边框，保持与文本气泡同高 */
.chat-bubble-bare .chat-voice { padding: 9px 13px; border: 1px solid transparent; }

/* ── 上传中占位（缩略图 + 三原色渐变旋转圆圈）── */
/* Sven 2026-09-16：大文件上传慢时先出缩略图，正中叠一个红绿蓝三原色渐变旋转圆环表示上传中；
   上传完成由正常渲染替换。圆环用 conic-gradient 造出 红→绿→蓝 的连续渐变，外层 rotate 动画。 */
.chat-upload-ph { position: relative; display: flex; align-items: center; justify-content: center;
  overflow: hidden; border-radius: 8px; background: rgba(0,0,0,.05);
  border: 1px solid rgba(0,0,0,.12); box-sizing: border-box; }
.chat-upload-ph.chat-upload-img { width: 160px; height: 120px; }
.chat-upload-ph.chat-upload-file { width: 240px; height: 56px; }
.chat-upload-ph.chat-upload-video { width: 190px; height: 190px; max-width: 62vw; max-height: 42vh; }
.chat-upload-thumb { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .55; }
.chat-upload-fileico { font-size: 22px; margin-right: 8px; opacity: .5; }
.chat-upload-fname { font-size: 13px; font-weight: 600; color: #6b7280; max-width: 150px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-upload-ph .chat-upload-ico { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
/* 文件卡片没有「缩略图」，圆环居中会压住文件名 → 放到右侧，不遮文字 */
.chat-upload-ph.chat-upload-file .chat-upload-ico { left: auto; right: 12px; transform: translateY(-50%); }
/* 裸气泡里的上传占位不需要再留气泡内边距 */
.chat-bubble-bare .chat-upload-ph { margin: 0; }
/* 三原色渐变旋转圆环：内圈遮罩 + 外圈 conic-gradient 旋转 */
.chat-upload-ico { position: relative; width: 30px; height: 30px; pointer-events: none; }
.chat-upload-ico::before { content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, #ff0000, #ff7f00, #ffff00, #00ff00, #00ffff, #0000ff, #8b00ff, #ff0000);
  animation: chatUploadSpin .9s linear infinite; box-sizing: border-box; }
.chat-upload-ico::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: #fff; }
.chat-upload-ph.on-dark .chat-upload-ico::after { background: #2b2f36; }
@keyframes chatUploadSpin { to { transform: rotate(360deg); } }

/* ── 文件附件 ── */
.chat-files { display: flex; flex-direction: column; gap: 6px; min-width: 220px; max-width: 320px; }
.chat-file-card { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid rgba(0,0,0,.08);
  border-radius: 8px; text-decoration: none; color: inherit; background: rgba(255,255,255,.6); }
.chat-file-card:hover { background: rgba(0,0,0,.04); text-decoration: none; }
.chat-file-ico { font-size: 22px; flex: 0 0 auto; }
.chat-file-info { min-width: 0; flex: 1; }
.chat-file-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-file-size { font-size: 11px; color: #6b7280; }
/* Sven 2026-09-16（需求②）：过期文件卡片不再展示，.chat-file-card.expired / .chat-file-state /
   .chat-file-expired 三处过期态样式已随之废弃移除。 */

/* ── 表情选择浮层（r55 双轨：系统表情 / 我的贴纸 + 右上角「自定义」上传入口） ── */
/* r58：面板加宽到 520px，每排由 4 个增至 7 个（64px 缩略图不变）；max-width 保证窄屏（手机浏览器）不溢出。 */
.emoji-panel { position: fixed; z-index: 3200; width: 520px; max-width: calc(100vw - 16px); max-height: 360px;
  background: #fff; border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.06); display: flex; flex-direction: column; overflow: hidden; }
.emoji-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px;
  font-size: 13px; font-weight: 600; border-bottom: 1px solid rgba(0,0,0,.06); }
.emoji-panel-title { font-size: 13px; font-weight: 600; color: #111827; }
.emoji-panel-ops { display: flex; align-items: center; gap: 10px; }
.emoji-panel-custom { font-size: 12px; font-weight: 400; color: #2563eb; text-decoration: none; cursor: pointer;
  border: 1px solid #dbeafe; background: #eff6ff; border-radius: 999px; padding: 2px 10px; line-height: 1.6; }
.emoji-panel-custom:hover { background: #dbeafe; }
.emoji-panel-custom.active { color: #fff; background: #2563eb; border-color: #2563eb; }
.emoji-panel-close { cursor: pointer; color: #6b7280; font-size: 16px; line-height: 1; text-decoration: none; padding: 2px 6px; }
.emoji-panel-close:hover { color: #111; }
.emoji-panel-tabs { display: flex; gap: 4px; padding: 6px 12px 0; border-bottom: 1px solid rgba(0,0,0,.06); }
.emoji-ptab { flex: 1; background: none; border: 0; border-bottom: 2px solid transparent; padding: 6px 0 7px;
  font-size: 13px; color: #6b7280; cursor: pointer; }
.emoji-ptab:hover { color: #374151; }
.emoji-ptab.active { color: #111827; font-weight: 600; border-bottom-color: #2563eb; }
/* r58：列数改为自适应（按容器宽度自动排），面板宽时每排 7 个、窄屏自动降到 5~6 个，缩略图恒为 64×64 */
.emoji-grid { overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 4px; padding: 10px; }
/* 需求②：表情面板预览 64×64 缩略图 */
.emoji-thumb { width: 64px; height: 64px; object-fit: contain; cursor: pointer; border-radius: 8px; padding: 4px; justify-self: center; }
.emoji-thumb:hover { background: rgba(37,99,235,.1); }
.emoji-panel-empty { grid-column: 1 / -1; text-align: center; color: #9ca3af; font-size: 12px; line-height: 1.8; padding: 26px 12px; }
.emoji-mine-bar { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.emoji-mine-count { font-size: 12px; color: #6b7280; }
.emoji-mine-add { font-size: 12px; color: #2563eb; background: #eff6ff; border: 1px solid #dbeafe;
  border-radius: 8px; padding: 3px 10px; cursor: pointer; }
.emoji-mine-add:hover { background: #dbeafe; }
.emoji-mine-grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
.emoji-mine-item { position: relative; display: inline-flex; }
.emoji-mine-del { position: absolute; top: -2px; right: -2px; width: 18px; height: 18px; line-height: 17px; text-align: center;
  border-radius: 50%; background: #ef4444; color: #fff; font-size: 12px; text-decoration: none; display: none; }
.emoji-mine-item:hover .emoji-mine-del { display: block; }
/* 需求②：聊天框内自定义贴纸最大渲染宽度 180px */
.chat-sticker { display: block; max-width: 180px; max-height: 180px; width: auto; height: auto; border-radius: 8px; }
/* 系统预制表情：客户端本地缓存渲染，气泡内固定展示尺寸 */
.chat-emoji-preset { width: 96px; height: 96px; object-fit: contain; }

/* ── 录音按钮态 ── */
.im-voice-btn { position: relative; }
.im-voice-btn.recording { color: #dc2626; animation: imVoicePulse 1.2s ease-in-out infinite; }
@keyframes imVoicePulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
/* r67：录音中在按钮上方常驻「已录秒数/上限」小气泡（原来只有一句会消失的 toast，
   用户无从判断还剩多久）。倒计时跳动用 tabular-nums 防抖；pointer-events:none 不挡点击。 */
.im-voice-sec {
  position: absolute; top: -20px; left: 50%; transform: translateX(-50%);
  padding: 1px 6px; border-radius: 9px; white-space: nowrap;
  font-size: 11px; line-height: 1.5; font-variant-numeric: tabular-nums;
  color: #fff; background: rgba(220, 38, 38, .92); box-shadow: 0 1px 4px rgba(0,0,0,.25);
  pointer-events: none; z-index: 5;
}

/* ── 表情包管理页（超管） ── */
.emoji-mg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.emoji-mg-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px;
  border: 1px solid rgba(0,0,0,.08); border-radius: 10px; text-align: center; }
.emoji-mg-img { width: 72px; height: 72px; object-fit: contain; background: rgba(0,0,0,.03); border-radius: 8px; }
.emoji-mg-name { font-size: 12px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* r54：空态 `.empty` 是 grid 单元，会被 minmax(120px,1fr) 的列压成「4 字一行」竖排 → 强制横跨整行并居中 */
.emoji-mg-grid > .empty { grid-column: 1 / -1; width: 100%; text-align: center; color: #9ca3af; padding: 40px 16px; }

/* ── 视频缩略图（微信风格：圆角 + 边缘边框 + 居中圆形播放按钮 + 文件名） ── */
.chat-videos { display: flex; flex-direction: column; gap: 3px; max-width: 320px; }
.chat-video-thumb { position: relative; width: 190px; height: 190px; max-width: 62vw; max-height: 42vh;
  border-radius: 8px; overflow: hidden; cursor: pointer; display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(0,0,0,.12); box-sizing: border-box;
  background: linear-gradient(135deg, #2b2f36, #4b5563); }
.chat-video-thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chat-video-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; pointer-events: none; }
.chat-video-play-svg { filter: drop-shadow(0 1px 3px rgba(0,0,0,.45)); }
.chat-video-name { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 7px; font-size: 12px; color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,.6)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── 媒体预览器（图片看图器 + 视频播放器）── */
.im-viewer-mask { position: fixed; inset: 0; z-index: 4000; background: rgba(0,0,0,.82);
  display: none; flex-direction: column; align-items: center; justify-content: center; }
.im-viewer-bar { position: absolute; top: 0; left: 0; right: 0; height: 48px; display: flex; align-items: center;
  gap: 8px; padding: 0 12px; background: rgba(0,0,0,.38); color: #fff; z-index: 2; }
.im-viewer-btn { background: rgba(255,255,255,.14); color: #fff; border: none; border-radius: 6px;
  min-width: 34px; height: 32px; padding: 0 10px; font-size: 16px; cursor: pointer; line-height: 1; }
.im-viewer-btn:hover { background: rgba(255,255,255,.3); }
.im-viewer-close { font-size: 22px; font-weight: 700; }
.im-viewer-spacer { flex: 1; }
.im-viewer-scale { font-size: 13px; min-width: 48px; text-align: center; }
.im-viewer-stage { flex: 1; width: 100%; display: flex; align-items: center; justify-content: center;
  overflow: auto; padding: 56px 12px 12px; }
.im-viewer-img { max-width: 92vw; max-height: 86vh; border-radius: 6px; box-shadow: 0 8px 40px rgba(0,0,0,.5);
  transform-origin: center center; transition: transform .12s ease; background: #fff; }
.im-viewer-video { border-radius: 6px; box-shadow: 0 8px 40px rgba(0,0,0,.5); transform-origin: center center;
  background: #000; max-width: 92vw; max-height: 86vh; }

/* 聊天气泡容器需为定位上下文，使「新消息」提示气泡可绝对定位其中 */
.chat-content-card { position: relative; }

/* 新消息提示气泡：上翻浏览历史时收到新消息，不打断浏览，点击平滑回到底部 */
.im-newmsg-pill {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 30;
  border: none;
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 13px;
  line-height: 1;
  color: #fff;
  background: #2563eb;
  box-shadow: 0 4px 14px rgba(37, 99, 235, .4);
  cursor: pointer;
  display: none;
}
.im-newmsg-pill:hover { background: #1d4ed8; }


/* ============ IM 输入框附件区（2026-09-17）============
   设计铁律：一切高度/显隐由 attachList.length 状态驱动（.im-attach-on / .im-attach-mode），
   绝不依赖 DOM 原生自动回弹 —— 杜绝「删完附件/切会话后输入框高度卡住」的 PC 微信同款 bug。 */

/* 输入栏改为可换行：附件区独占一行，不会挤走按钮 */
.chat-content-inputbar { flex-wrap: wrap; align-content: flex-start; }

/* 多行输入框：随内容增高但有硬上限 */
.chat-input-area {
  flex: 1 1 auto;
  min-height: 38px;
  max-height: 120px;
  height: 38px;
  overflow-y: auto;
  resize: none;
  line-height: 1.5;
  padding: 9px 12px;
  font-family: inherit;
  box-sizing: border-box;
}
/* 有附件 → 输入框加高布局；附件清空后本类被移除，高度立刻回落 */
.chat-content-inputbar.im-attach-mode .chat-input-area { min-height: 56px; height: 56px; }

/* 附件预览容器：作为「一个框」的一部分，无独立边框/底色；多行时内部滚动，
   整体向上升高一个固定高度（不再是两个上下框框） */
.im-attach-box {
  flex: 0 0 100%;
  width: 100%;
  box-sizing: border-box;
  max-height: 224px;
  overflow-y: auto;
  overflow-x: hidden;
  border: none;
  background: transparent;
  border-radius: 0;
  padding: 4px 2px 6px;
  margin: 0;
}
.im-attach-box.im-attach-on { display: block; }
.im-attach-grid { display: flex; flex-wrap: wrap; gap: 8px; }

.im-attach-item {
  position: relative;
  width: 76px;
  flex: 0 0 auto;
}
.im-attach-thumb {
  width: 76px; height: 64px;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e5e7eb;
  box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
}
.im-attach-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.im-attach-icon { font-size: 24px; line-height: 1; }
.im-attach-ext {
  font-size: 11px; font-weight: 700; color: #475569;
  background: #eef2ff; border-radius: 4px; padding: 4px 6px; max-width: 66px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.im-attach-name {
  margin-top: 3px; font-size: 11px; color: #6b7280; line-height: 1.3;
  max-width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.im-attach-del {
  position: absolute; top: 3px; right: 3px;
  width: 18px; height: 18px; line-height: 16px;
  border: none; border-radius: 50%;
  background: #374151; color: #fff;
  font-size: 13px; cursor: pointer; padding: 0;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.im-attach-del:hover { background: #dc2626; }
.im-attach-item.sending { opacity: .62; }
.im-attach-mask {
  position: absolute; left: 0; top: 0; width: 76px; height: 64px;
  border-radius: 6px; background: rgba(17,24,39,.45); color: #fff;
  font-size: 11px; display: flex; align-items: center; justify-content: center;
}

/* 拖拽悬停高亮 */
.chat-content-inputbar.im-attach-drag { background: #eff6ff; outline: 2px dashed #2563eb; outline-offset: -3px; }


/* ============ IM 输入区分层布局（2026-09-17 r35）============
   结构：.chat-content-inputbar.im-editor
           ├─ .im-attach-box（附件预览，由 attachList 状态驱动，JS 自动插入最前）
           ├─ .im-editor-body   → 大面积多行 textarea
           └─ .im-editor-toolbar → 固定功能按钮栏（左侧图标组 / 右侧发送）
   ⚠️ 只改布局：附件区、attachList 状态、高度复位逻辑与 r33/r34 完全一致，未做任何改动。 */

.chat-content-inputbar.im-editor {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: stretch;
  gap: 8px;
  padding: 10px 12px 9px;
  /* r37：整个输入区 = 一个框（边框/圆角/白底集中在此容器），
     内部文本框与附件区不再各自带边框 → 杜绝「两个上下框框」 */
  border: 1px solid #d1d5db;
  border-radius: 12px;
  background: #fff;
}
/* r37：文本框去掉自带边框/底色，融入「一个框」 */
.im-editor .chat-input-area { border: none; background: transparent; }

/* 上：大面积多行文本区 */
.im-editor-body { flex: 1 1 100%; width: 100%; display: flex; }
.chat-input-area {
  flex: 1 1 auto;
  width: 100%;
  min-height: 112px;
  max-height: 220px;
  height: 112px;
  overflow-y: auto;
  resize: none;
  line-height: 1.65;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 14px;
  box-sizing: border-box;
  border-radius: 8px;
}
/* 有附件 → 文本区适度收窄给预览区让位；附件清空后本类被移除，高度立刻回落（状态驱动） */
.chat-content-inputbar.im-attach-mode .chat-input-area { min-height: 78px; height: 78px; }

/* 下：固定功能按钮栏 */
.im-editor-toolbar {
  flex: 0 0 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.im-tool-group { display: flex; align-items: center; gap: 4px; }
.im-tool-right { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.im-editor-hint { font-size: 12px; color: #9ca3af; white-space: nowrap; user-select: none; }

/* 矢量图标按钮：SVG 随 currentColor 着色，任意缩放不模糊 */
.icon-btn.im-ico-btn {
  width: 34px; height: 34px;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: #64748b;
  border-color: #e5e7eb;
  background: #fff;
}
.icon-btn.im-ico-btn svg { display: block; width: 19px; height: 19px; }
.icon-btn.im-ico-btn:hover { color: #2563eb; border-color: #bfdbfe; background: #eff6ff; }
.icon-btn.im-voice-btn.recording svg { color: #dc2626; }

/* ── r62：会话顶栏（.chat-content-head）图标统一为线性 SVG ──
   与输入区工具栏同一套线条语言（24 视框 / stroke 2 / currentColor / 圆头圆角）；
   图标直接内联显示即可，不另套 .icon-btn 图标按钮。 */
.chat-content-head h3 svg { width: 19px; height: 19px; vertical-align: -3px; margin-right: .4em; }
.chat-content-head .btn svg { width: 15px; height: 15px; vertical-align: -2.5px; margin-right: .35em; }
.chat-content-head .btn svg:only-child { margin-right: 0; }
/* 顶栏仍在用 app-ico 的两个（查找聊天记录 / 群成员）对齐到与 SVG 同尺寸，避免一大一小 */
.chat-content-head .btn .app-ico { width: 15px; height: 15px; }
@media (max-width: 640px) { .im-editor-hint { display: none; } }

/* ── 位置消息（r325 / r325h）── */
/* 形态对齐微信：上方静态地图缩略图 + 下方「名称 / 地址」两行，整块可点（跳网页版高德）。
   🔴 r325h：整块**不透明白底** + 标题固定深色 —— 之前是半透明白底 + 文字色 inherit，
      自己发的消息（父链给白字）会变成「白字叠白底」，用户实测无法分辨。
      微信里自己发的位置气泡也是白底黑字（归属由头像位置表达，不靠底色）。
   🔴 缩略图加载失败时 onerror 会把 img 整块隐藏 —— 只剩下面两行文字，
      绝不能留一个裂图方块（位置的核心信息是名称+地址，地图只是辅助）。 */
.chat-loc { display: block; width: 232px; text-decoration: none;
  border-radius: 8px; overflow: hidden; background: #fff;
  border: 1px solid rgba(0,0,0,.08); }
.chat-loc:hover { background: #fff; text-decoration: none; }
.chat-loc-map { display: block; width: 232px; height: 120px; object-fit: cover; background: #efefef; }
.chat-loc-txt { padding: 8px 10px 9px;
  /* r325l：图与文字区之间加一条淡分隔线 —— 高德静态图本身发白，和白色文字区
     连成一片时用户「分不清哪里是图哪里是字」；一条细线做出色差（对齐微信的层次感）。 */
  border-top: 1px solid rgba(0,0,0,.06); }
.chat-loc-name { font-size: 14px; font-weight: 600; line-height: 1.25; color: #1f2329;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-loc-addr { font-size: 12px; color: #9a9a9a; margin-top: 2px; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }