/* ═══════════════════════════════════════════════════════════
   im.css  —  微信风格移动端 IM 样式
   复用 docs.css 的 CSS 变量体系，仅覆盖 IM 专属变量
   ═══════════════════════════════════════════════════════════ */

/* ── CSS 变量（继承 docs 体系，扩展 IM 专属） ── */
:root {
  --bg:           #ffffff;
  --bg-muted:     #f4f4f5;
  --bg-hover:     #f0f0f0;
  --border:       #e4e4e7;
  --text:         #09090b;
  --text-muted:   #71717a;
  --text-dimmed:  #a1a1aa;
  --shadow:       0 1px 3px rgba(0,0,0,.08);

  /* IM 专属 */
  --im-green:       #07c160;
  --im-green-dark:  #06ad56;
  --im-bg:          #ededed;
  --im-navbar-bg:   #f7f7f7;
  --im-navbar-h:    44px;
  --im-tabbar-h:    56px;
  --im-bubble-me:   #95ec69;
  --im-bubble-other:#ffffff;
  --im-bubble-me-text:   #000;
  --im-bubble-other-text:#000;
  --im-input-bg:    #f5f5f5;
  --im-avatar-radius: 6px;
  --im-safe-bottom: env(safe-area-inset-bottom, 0px);
  --im-safe-top:    env(safe-area-inset-top, 0px);
}
html.dark {
  --bg:           #1c1c1e;
  --bg-muted:     #2c2c2e;
  --bg-hover:     #3a3a3c;
  --border:       #3a3a3c;
  --text:         #f2f2f7;
  --text-muted:   #98989d;
  --text-dimmed:  #636366;
  --shadow:       0 1px 3px rgba(0,0,0,.4);

  --im-green:       #30d158;
  --im-green-dark:  #25a244;
  --im-bg:          #000000;
  --im-navbar-bg:   #1c1c1e;
  --im-bubble-me:   #3c8f3c;
  --im-bubble-other:#2c2c2e;
  --im-bubble-me-text:   #fff;
  --im-bubble-other-text:#f2f2f7;
  --im-input-bg:    #2c2c2e;

  /* 评论区 dark */
  --im-comment-bg:        #2c2c2e;
  --im-comment-border:    #3a3a3c;
  --im-comment-hover:     #3a3a3c;
  --im-comment-name:      #7da5d8;
  --im-comment-del-color: #ff6b6b;
  --im-comment-bar-bg:    #1c1c1e;
  --im-comment-bar-border:#3a3a3c;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
html {
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue",
               "Hiragino Sans GB", sans-serif;
  background: var(--bg);
  color: var(--text);
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
a { text-decoration: none; color: inherit; }
button { border: none; background: none; cursor: pointer; font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
input, textarea { font: inherit; outline: none; border: none; background: none; }
svg { display: block; flex-shrink: 0; }
img { display: block; max-width: 100%; }
::-webkit-scrollbar { width: 0; height: 0; }

/* ════════════════════════════════════
   PC 端拦截遮罩
   ════════════════════════════════════ */
#pc-block {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--bg);
  align-items: center;
  justify-content: center;
}
#pc-block.show { display: flex; }
.pc-block-inner {
  text-align: center;
  padding: 40px 24px;
  max-width: 360px;
}
.pc-qr-icon {
  font-size: 72px;
  line-height: 1;
  margin-bottom: 20px;
}
.pc-block-inner h2 {
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--text);
}
.pc-block-inner p {
  font-size: .9rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 16px;
}
.pc-url {
  font-size: .78rem;
  color: var(--text-dimmed);
  background: var(--bg-muted);
  padding: 8px 12px;
  border-radius: 8px;
  word-break: break-all;
  margin-bottom: 10px;
}
.pc-hint {
  font-size: .78rem;
  color: var(--text-dimmed);
}

/* ════════════════════════════════════
   IM 主应用容器
   ════════════════════════════════════ */
#im-app {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--im-bg);
  overflow: hidden;
}
/* PWA 桌面图标启动（standalone）时，顶部状态栏不再由浏览器占据，
   需要手动留出安全区，否则内容顶到刘海/灵动岛 */
@media (display-mode: standalone) {
  #im-app {
    padding-top: var(--im-safe-top);
    background-color: var(--im-navbar-bg); /* 顶部留白和 navbar 同色，更自然 */
  }
}



/* ════════════════════════════════════
   底部 Tabbar（仿微信）
   ════════════════════════════════════ */
#im-tabbar {
  display: flex;
  align-items: stretch;
  height: calc(var(--im-tabbar-h) + var(--im-safe-bottom));
  padding-bottom: var(--im-safe-bottom);
  background: var(--im-navbar-bg);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  order: 2;
}
.im-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  position: relative;
  color: var(--text-dimmed);
  padding: 6px 0 4px;
  transition: color .15s;
}
.im-tab.active { color: var(--im-green); }
.im-tab-icon { display: flex; align-items: center; justify-content: center; position: relative; }
.im-tab-label { font-size: .65rem; font-weight: 500; line-height: 1; }
.im-tab-badge {
position: absolute;
top: -4px;
right: -6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: #fa5151;
  color: #fff;
  font-size: .65rem;
  font-weight: 600;
  border-radius: 99px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.im-tab-badge:empty { display: none; }

/* ════════════════════════════════════
   页面容器
   ════════════════════════════════════ */
#im-pages {
  flex: 1;
  position: relative;
  overflow: hidden;
  order: 1;
}
.im-page {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--im-bg);
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s;
}
.im-page.active {
  opacity: 1;
  pointer-events: auto;
}

/* ── 导航栏 ── */
.im-navbar {
  height: var(--im-navbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  background: var(--im-navbar-bg);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  position: relative;
}
.im-navbar-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.im-navbar-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--text);
  transition: background .12s;
}
.im-navbar-btn:active { background: var(--bg-hover); }

/* ── 搜索框 ── */
.im-search-bar {
  padding: 6px 12px 8px;
  background: var(--im-navbar-bg);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.im-search-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--im-input-bg);
  border-radius: 8px;
  padding: 7px 10px;
  color: var(--text-dimmed);
}
.im-search-inner input {
  flex: 1;
  font-size: .9rem;
  color: var(--text);
  background: transparent;
  min-width: 0;
}
.im-search-inner input::placeholder { color: var(--text-dimmed); }


/* ════════════════════════════════════
   会话列表
   ════════════════════════════════════ */
/* ── 下拉刷新指示器 ── */
#im-ptr-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 0;
  overflow: hidden;
  font-size: 13px;
  color: var(--text-dimmed, #999);
  opacity: 0;
  pointer-events: none;
  user-select: none;
  transition: height 0.15s, opacity 0.15s;
}
#im-ptr-indicator[data-state="pulling"],
#im-ptr-indicator[data-state="loading"] {
  height: 40px;
}
#im-ptr-indicator[data-state="loading"] {
  transition: none;
}
.im-ptr-arrow {
  display: inline-block;
  font-size: 16px;
  line-height: 1;
  transition: transform 0.2s;
}
.im-ptr-text {
  font-size: 13px;
}
.im-conv-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--bg);
}
.im-conv-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  position: relative;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .1s;
}
.im-conv-item:active { background: var(--bg-hover); }
.im-conv-avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--im-avatar-radius);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 600;
}
.im-conv-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
inset: 0;
z-index: 1;
}
/* 群头像九宫格 */
.im-conv-avatar.group-avatar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2px;
  padding: 3px;
  background: #e8e8e8;
}
html.dark .im-conv-avatar.group-avatar { background: #444; }
.im-conv-avatar.group-avatar .ga-cell {
  border-radius: 2px;
  overflow: hidden;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .5rem;
  color: #fff;
  font-weight: 700;
  position: relative;
  aspect-ratio: 1;
  min-width: 0;
  min-height: 0;
}
.im-conv-avatar.group-avatar .ga-cell img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  border-radius: inherit;
}
.im-conv-avatar.group-avatar .ga-cell .im-avatar-letter {
  position: relative;
  z-index: 0;
}
.im-conv-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.im-conv-row1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.im-conv-name {
  font-size: .94rem;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.im-conv-time {
  font-size: .72rem;
  color: var(--text-dimmed);
  flex-shrink: 0;
}
.im-conv-row2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.im-conv-preview {
  font-size: .84rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.im-conv-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: #fa5151;
  color: #fff;
  font-size: .68rem;
  font-weight: 600;
  border-radius: 99px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.im-conv-badge:empty { display: none; }
/* 静音会话 */
.im-conv-item.muted .im-conv-badge { background: var(--text-dimmed); }
.im-conv-item.muted .im-conv-name::after {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 4px;
  vertical-align: middle;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3Cpath d='M9 9v3a3 3 0 0 0 5.12 2.12M15 9.34V4a3 3 0 0 0-5.94-.6'/%3E%3Cpath d='M17 16.95A7 7 0 0 1 5 12v-2m14 0v2a7 7 0 0 1-.11 1.23'/%3E%3Cline x1='12' y1='19' x2='12' y2='23'/%3E%3Cline x1='8' y1='23' x2='16' y2='23'/%3E%3C/svg%3E") no-repeat center;
}

/* 加载占位 */
.im-list-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 60px 20px;
  color: var(--text-dimmed);
  font-size: .88rem;
}
.im-spinner,
.im-loading-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border);
  border-top-color: var(--im-green);
  border-radius: 50%;
  animation: im-spin .7s linear infinite;
  flex-shrink: 0;
}
@keyframes im-spin { to { transform: rotate(360deg); } }
.im-loading-placeholder {
  flex-direction: row;
  gap: 8px;
  padding: 48px 20px;
}


/* ════════════════════════════════════
   通讯录
   ════════════════════════════════════ */
.im-cell-group {
  margin: 0 0 8px;
  background: var(--bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.im-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  transition: background .1s;
}
.im-cell:last-child { border-bottom: none; }
.im-cell:active { background: var(--bg-hover); }
.im-cell-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--im-green);
}
.im-cell-label {
  flex: 1;
  font-size: .94rem;
  color: var(--text);
}
.im-cell-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: #fa5151;
  color: #fff;
  font-size: .68rem;
  font-weight: 600;
  border-radius: 99px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.im-cell-badge:empty { display: none; }
.im-cell-arrow { color: var(--text-dimmed); flex-shrink: 0; }
.im-cell-value { font-size: .88rem; color: var(--text-muted); }

/* 联系人列表 */
.im-contacts-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--bg);
}
.im-contact-group-label {
  padding: 6px 16px 4px;
  font-size: .72rem;
  font-weight: 600;
  color: var(--text-dimmed);
  background: var(--im-bg);
  letter-spacing: .04em;
}
.im-contact-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .1s;
}
.im-contact-item:active { background: var(--bg-hover); }
.im-contact-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--im-avatar-radius);
  flex-shrink: 0;
  overflow: hidden;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: .95rem;
  font-weight: 600;
  position: relative;
}
.im-contact-avatar img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 1;
  object-fit: cover;
}
.im-contact-name {
  flex: 1;
  font-size: .94rem;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 功能入口（通讯录顶部） */
.im-contacts-entries {
  background: var(--bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}
.im-contact-entry {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .1s;
  font-size: .94rem;
  color: var(--text);
}
.im-contact-entry:last-child { border-bottom: none; }
.im-contact-entry:active { background: var(--bg-hover); }
.im-entry-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.im-entry-icon-green { background: linear-gradient(135deg,#4cd964,#34c759); }
.im-entry-icon-blue  { background: linear-gradient(135deg,#5ac8fa,#007aff); }
.im-entry-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: #fa5151;
  color: #fff;
  font-size: .68rem;
  font-weight: 600;
  border-radius: 99px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
}
.im-entry-badge:empty { display: none; }

/* 右侧字母索引 */
.im-alpha-index {
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 1px;
  z-index: 10;
}
.im-alpha-key {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .6rem;
  font-weight: 600;
  color: var(--im-green);
  cursor: pointer;
  border-radius: 4px;
  -webkit-tap-highlight-color: transparent;
}
.im-alpha-key:active { background: var(--im-green); color: #fff; }

/* ════════════════════════════════════
   发现页
   ════════════════════════════════════ */
#page-discover .im-cell-group:first-of-type { margin-top: 10px; }

/* ════════════════════════════════════
   我页
   ════════════════════════════════════ */
#page-me { background: var(--im-bg); }
.im-profile-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 16px 20px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.im-profile-card:active { background: var(--bg-hover); }
.im-profile-avatar {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
  position: relative;
}
.im-profile-avatar img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
}
/* fallback 字母：z-index:0，被 img(z-index:1) 压在下方；img 移除后自动显示 */
.im-profile-avatar span {
position: relative;
z-index: 0;
}
/* 头像外层包裹（不裁切，供按钮绝对定位用） */
.im-profile-avatar-wrap {
position: relative;
width: 64px;
height: 64px;
flex-shrink: 0;
}
/* 头像右下角相机修改按钮 */
.im-avatar-edit-btn {
position: absolute;
right: -4px;
bottom: -4px;
width: 26px;
height: 26px;
border-radius: 50%;
background: #07c160;
border: 2px solid #fff;
box-shadow: 0 2px 8px rgba(0,0,0,.2);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 999;
padding: 0;
line-height: 1;
transition: transform .2s;
}
.im-avatar-edit-btn:hover { transform: scale(1.1); }
.im-avatar-edit-btn:active { transform: scale(.95); }
/* 上传中状态：旋转动画 */
.im-avatar-edit-btn.uploading svg { animation: im-spin 1s linear infinite; }
@keyframes im-spin { to { transform: rotate(360deg); } }
.im-profile-info { flex: 1; min-width: 0; }
.im-profile-name {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.im-profile-id {
  font-size: .8rem;
  color: var(--text-muted);
}

/* ════════════════════════════════════
   覆盖层（从右侧滑入）
   ════════════════════════════════════ */
.im-slide-view {
  position: absolute;  /* 相对于 #im-app（fixed inset:0），等效于覆盖全屏 */
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  z-index: 1000;
  will-change: transform;
  pointer-events: none;
  overflow: hidden;
}
.im-slide-view.open {
  transform: translateX(0);
  pointer-events: auto;
}
/* 聊天窗口层级 */
#im-chat-view {
  z-index: 2000;
  /* 永远 inset:0 撑满全屏，不靠 JS 改 top/height。
     键盘高度通过 JS 动态设置 padding-bottom 把输入框顶上去。
     这样彻底消除 iOS viewport 偏移时的透视缝隙。 */
  background: var(--im-bg);
}
/* 联系人详情、群详情叠在聊天界面上方，低于 toast */
#im-contact-view { z-index: 9100; }
/* 个人朋友圈叠在联系人详情上方 */
#im-user-moments-view { z-index: 9150; }
#im-group-detail-view,
#im-create-group-modal,
#im-rename-group-modal,
#im-invite-group-modal { z-index: 9100; }
/* 群聊总结叠在群详情上方 */
#im-group-summary-view { z-index: 9200; }


/* ════════════════════════════════════
   聊天界面
   ════════════════════════════════════ */
.im-chat-navbar {
  position: absolute;       /* 脱离文档流，独立定位在 #im-chat-view 内 */
  top: 0;
  left: 0;
  right: 0;
  height: var(--im-navbar-h);
  display: flex;
  align-items: center;
  padding: 0 4px;
  background: var(--im-navbar-bg);
  border-bottom: 1px solid var(--border);
  z-index: 10;
  gap: 0;
}
.im-chat-back {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  border-radius: 8px;
  -webkit-tap-highlight-color: transparent;
  transition: background .1s;
}
.im-chat-back:active { background: var(--bg-hover); }
.im-chat-navbar-title {
  flex: 1;
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  overflow: hidden;
}
.im-chat-navbar-title span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.im-chat-online {
  font-size: .72rem;
  font-weight: 400;
  color: var(--im-green);
  flex-shrink: 0;
}
.im-online-status {
  font-size: .7rem;
  font-weight: 400;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-dimmed, #999);
}
.im-online-status::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ccc;
}
.im-online-status.online { color: var(--im-green, #52c41a); }
.im-online-status.online::before { background: var(--im-green, #52c41a); }
.im-online-status.offline { color: var(--text-dimmed, #999); }
.im-online-status.offline::before { background: #ccc; }
.im-chat-more {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  border-radius: 8px;
  -webkit-tap-highlight-color: transparent;
  transition: background .1s;
}
.im-chat-more:active { background: var(--bg-hover); }

/* ── 消息列表 ── */
/* overflow 设为 visible，让内容撑开父容器 #im-chat-body（真正的滚动容器）*/
.im-msg-list {
  flex: 1;
  overflow: visible;
  padding: 16px 14px 20px;
  background: var(--im-bg);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 聊天加载中 */
.im-chat-loading {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 时间分隔 */
.im-msg-time-sep {
  text-align: center;
  font-size: .7rem;
  color: var(--text-dimmed);
  padding: 8px 0 4px;
  user-select: none;
}

/* 消息行 */
.im-msg-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 100%;
}
.im-msg-row.me {
  flex-direction: row-reverse;
}
/* 新消息追加时淡入（JS 触发 transition） */
.im-msg-row.im-msg-new,
.im-msg-time-sep.im-msg-new {
  opacity: 0;
  transition: opacity .25s ease-out;
}

/* 头像 */
.im-msg-avatar {
width: 38px;
height: 38px;
border-radius: var(--im-avatar-radius);
-webkit-user-select: none;
user-select: none;
-webkit-touch-callout: none;
  flex-shrink: 0;
  overflow: hidden;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: .8rem;
  font-weight: 600;
  position: relative;
  align-self: flex-start;
}
.im-msg-avatar img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 1;
  object-fit: cover;
}

/* 消息内容列 */
.im-msg-col {
  display: flex;
  flex-direction: column;
  max-width: calc(100% - 54px);
  gap: 2px;
}
/* 发送者名字（群聊显示） */
.im-msg-sender-name {
  font-size: .72rem;
  color: var(--text-dimmed);
  padding: 0 12px;
  margin-bottom: 1px;
}
.im-msg-row.me .im-msg-sender-name {
  text-align: right;
}

/* 气泡 */
.im-bubble {
  display: inline-block;
  padding: 10px 12px;
  border-radius: 4px;
  font-size: .94rem;
  line-height: 1.55;
  word-break: break-word;
  white-space: pre-wrap;
  position: relative;
  max-width: 100%;
  -webkit-touch-callout: none; /* 禁止 iOS Safari 长按弹原生菜单 */
  -webkit-user-select: none;
  user-select: none;
}
/* 对方气泡 */
.im-msg-row:not(.me) .im-bubble {
  background: var(--im-bubble-other);
  color: var(--im-bubble-other-text);
  border-top-left-radius: 0;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
  align-self: flex-start;
}
/* 自己气泡 */
.im-msg-row.me .im-bubble {
  background: var(--im-bubble-me);
  color: var(--im-bubble-me-text);
  border-top-right-radius: 0;
  align-self: flex-end;
}
/* 气泡尖角 */
.im-msg-row:not(.me) .im-bubble::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 12px;
  border: 6px solid transparent;
  border-right-color: var(--im-bubble-other);
  border-left: 0;
}
.im-msg-row.me .im-bubble::after {
  content: '';
  position: absolute;
  right: -6px;
  top: 12px;
  border: 6px solid transparent;
  border-left-color: var(--im-bubble-me);
  border-right: 0;
}

/* 消息元信息：加密标记 + 发送状态 */
.im-msg-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 2px;
}
.im-msg-col-img .im-msg-meta {
  margin-top: 0;
}
.im-msg-meta:empty {
  display: none;
}
/* 自己的消息：右对齐 */
.im-msg-row.me .im-msg-meta {
  justify-content: flex-end;
}

/* E2EE 加密标记 */
.im-e2ee-tag {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: .62rem;
  color: #07c160;
  font-weight: 500;
  line-height: 1;
  opacity: .85;
  user-select: none;
}
.im-e2ee-tag svg {
  flex-shrink: 0;
  stroke: #07c160;
}
html.dark .im-e2ee-tag {
  color: #4cd964;
}
html.dark .im-e2ee-tag svg {
  stroke: #4cd964;
}

/* 消息发送状态文字 */
.im-msg-status {
  font-size: .65rem;
  color: var(--text-dimmed, #999);
  align-self: flex-end;
  flex-shrink: 0;
  line-height: 1;
}
.im-msg-status.sending { color: var(--text-dimmed, #999); }
.im-msg-status.sent { color: var(--text-dimmed, #999); }
.im-msg-status.read { color: var(--im-green, #07c160); }
.im-msg-status.failed { color: #fa5151; }
.im-typing-active { color: var(--im-green, #07c160) !important; font-size: .72rem; }

/* 发送失败气泡 */
.im-bubble.im-bubble-failed {
  opacity: .6;
}
.im-send-fail-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #f53f3f;
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  flex-shrink: 0;
  align-self: flex-end;
  margin-bottom: 2px;
  cursor: pointer;
}

/* 图片消息 */
.im-bubble.im-bubble-img {
  padding: 0;
  line-height: 0;
  font-size: 0;
  box-shadow: none !important;
  border-radius: 8px;
  background: transparent !important;
  overflow: hidden;
}
@keyframes im-img-shimmer {
  0%   { background-position: -200px 0; }
  100% { background-position: 200px 0; }
}
.im-bubble.im-bubble-img:not(:has(.im-img-loaded)) {
  min-width: 80px;
  min-height: 60px;
  background: linear-gradient(90deg, var(--bg-card,#e9e9e9) 25%, var(--bg-hover,#f5f5f5) 50%, var(--bg-card,#e9e9e9) 75%) !important;
  background-size: 400px 100% !important;
  animation: im-img-shimmer 1.4s ease infinite;
}
.im-bubble.im-bubble-img::before,
.im-bubble.im-bubble-img::after { display: none; }
/* 图片气泡无内边距，名字 padding 对齐图片左边缘 */
.im-msg-col:has(.im-bubble-img) .im-msg-sender-name,
.im-msg-col-img .im-msg-sender-name {
  padding-left: 0;
}
.im-bubble.im-bubble-img img {
  border-radius: 8px;
  max-width: 180px;
  max-height: 240px;
  object-fit: cover;
  display: block;
  cursor: zoom-in;
  opacity: 0;
  transition: opacity .3s ease;
}
.im-bubble.im-bubble-img img.im-img-loaded {
  opacity: 1;
}

/* 语音消息 */
.im-bubble.im-bubble-voice {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 80px;
  cursor: pointer;
}
.im-voice-wave {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 18px;
}
.im-voice-wave span {
  display: block;
  width: 3px;
  background: currentColor;
  border-radius: 2px;
  opacity: .8;
}
.im-voice-wave span:nth-child(1) { height: 6px; }
.im-voice-wave span:nth-child(2) { height: 12px; }
.im-voice-wave span:nth-child(3) { height: 18px; }
.im-voice-wave span:nth-child(4) { height: 12px; }
.im-voice-wave span:nth-child(5) { height: 6px; }
.im-bubble.im-bubble-voice.playing .im-voice-wave span {
  animation: voice-wave .8s ease-in-out infinite alternate;
}
.im-voice-wave span:nth-child(2) { animation-delay: .1s; }
.im-voice-wave span:nth-child(3) { animation-delay: .2s; }
.im-voice-wave span:nth-child(4) { animation-delay: .1s; }
@keyframes voice-wave {
  from { transform: scaleY(1); }
  to   { transform: scaleY(.3); }
}

/* 语音时长标签 */
.im-voice-dur {
  font-size: .8rem;
  opacity: .75;
  min-width: 24px;
}

/* 语音转录文字 */
.im-voice-transcript {
  font-size: .85rem;
  color: var(--text-muted);
  margin-top: 4px;
  padding: 4px 8px;
  background: var(--bg-hover);
  border-radius: 6px;
  line-height: 1.4;
  word-break: break-all;
  max-width: 220px;
  align-self: flex-start; /* 收缩到内容宽，避免拉伸导致文字左边有空白 */
}
.me .im-voice-transcript {
  text-align: left;        /* 自己的消息也左对齐，换行时文字齐左 */
  align-self: flex-end;   /* 整体靠右（跟气泡对齐） */
}

/* 语音切换按钮激活态 */
#btn-chat-voice.active {
  color: var(--im-primary, #07c160);
}
#btn-chat-voice.active svg {
  stroke: var(--im-primary, #07c160);
}

/* 语音输入模式：隐藏文字输入相关元素，显示录音按钮 */
#im-input-bar.voice-mode .im-input-wrap,
#im-input-bar.voice-mode #btn-chat-emoji,
#im-input-bar.voice-mode #btn-chat-extra,
#im-input-bar.voice-mode #btn-chat-send {
display: none !important;
}
#im-input-bar.voice-mode #im-voice-record-btn {
display: flex !important;
}
#im-input-bar.voice-mode #im-voice-asr-toggle {
  display: flex !important;
}

/* 语音转文字切换按钮 */
.im-voice-asr-toggle {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1.5px solid var(--border-color, #e0e0e0);
  border-radius: 50%;
  background: transparent;
  color: var(--text-secondary, #888);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.im-voice-asr-toggle:active,
.im-voice-asr-toggle.active {
  background: var(--primary-color, #07c160);
  border-color: var(--primary-color, #07c160);
  color: #fff;
}

/* 转写模式：录音按钮文字改变 */
#im-voice-record-btn.asr-mode {
  border-color: var(--primary-color, #07c160);
  color: var(--primary-color, #07c160);
}
#im-voice-record-btn.asr-mode.recording {
  background: rgba(7, 193, 96, .1);
  border-color: var(--primary-color, #07c160);
  color: var(--primary-color, #07c160);
}

/* 转写中 loading 提示 */
.im-asr-loading {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .85rem;
  color: var(--text-secondary, #888);
  padding: 4px 0;
}
/* 语音模式下：增加底部内边距，避免录音按钮太靠近 iPhone 底部横线 */
#im-input-bar.voice-mode {
padding-bottom: calc(env(safe-area-inset-bottom, 0px) - 16px) !important;
}

/* 录音按钮（语音模式下替代输入框） */
.im-voice-record-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px;
  border: 1.5px solid var(--border-color, #e0e0e0);
  border-radius: 20px;
  background: transparent;
  color: var(--text-color, #333);
  font-size: .92rem;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  transition: background .15s, border-color .15s;
}
.im-voice-record-btn:active {
  background: var(--bg-hover);
}
.im-voice-record-btn.recording {
  background: rgba(250, 81, 81, .1);
  border-color: #fa5151;
  color: #fa5151;
}
.im-voice-rec-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.im-voice-record-btn.recording .im-voice-rec-icon svg {
  animation: rec-pulse .8s ease-in-out infinite alternate;
}
@keyframes rec-pulse {
  from { transform: scale(1);   opacity: 1; }
  to   { transform: scale(1.2); opacity: .6; }
}
.im-voice-rec-text {
  font-size: .9rem;
}
.im-voice-rec-timer {
  font-size: .8rem;
  min-width: 38px;
  text-align: right;
  opacity: .65;
  font-variant-numeric: tabular-nums;
}

/* 消息状态 */
.im-msg-row.me .im-msg-col {
  align-items: flex-end;
}
.im-msg-status {
  font-size: .65rem;
  color: var(--text-dimmed);
  padding: 0 2px;
}
.im-msg-status.failed {
  color: #fa5151;
}

/* 加载中骨架 */
.im-msg-skeleton {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 4px 0;
}
.im-skeleton-avatar {
  width: 38px;
  height: 38px;
  border-radius: var(--im-avatar-radius);
  background: var(--bg-muted);
  flex-shrink: 0;
  animation: im-shimmer 1.2s ease-in-out infinite;
}
.im-skeleton-bubble {
  border-radius: 8px;
  background: var(--bg-muted);
  animation: im-shimmer 1.2s ease-in-out infinite;
}
@keyframes im-shimmer {
  0%, 100% { opacity: .7; }
  50%       { opacity: .3; }
}

/* ── 输入栏 ── */
.im-input-bar {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding: 4px 8px calc(env(safe-area-inset-bottom, 0px) - 16px);
  background: var(--im-navbar-bg);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.im-input-bar::after {
  content: '· Grove IM ·';
  position: absolute;
  bottom: 1px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 10px;
  color: var(--text-dimmed, #bbb);
  letter-spacing: .06em;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.im-input-btn {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  border-radius: 8px;
  flex-shrink: 0;
  transition: background .1s;
  -webkit-tap-highlight-color: transparent;
}
.im-input-btn:active { background: var(--bg-hover); }
.im-textarea-wrap {
  flex: 1;
  background: var(--bg);
  border-radius: 6px;
  border: 1px solid var(--border);
  padding: 8px 10px;
  min-height: 38px;
  max-height: 120px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.im-textarea-wrap textarea {
  width: 100%;
  display: block;
  font-size: .94rem;
  color: var(--text);
  line-height: 1.45;
  resize: none;
  min-height: 20px;
  max-height: 100px;
  overflow-y: auto;
  background: transparent;
}
.im-textarea-wrap textarea::placeholder { color: var(--text-dimmed); }
.im-send-btn {
height: 34px;
padding: 0 14px;
background: var(--im-green);
color: #fff;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
  font-size: .88rem;
  font-weight: 600;
  flex-shrink: 0;
  transition: background .12s;
  -webkit-tap-highlight-color: transparent;
}
.im-send-btn:active { background: var(--im-green-dark); }

/* ── 表情面板 ── */
.im-emoji-panel {
  background: var(--im-navbar-bg);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  height: 260px;
  display: flex;
  flex-direction: column;
}
#im-emoji-tab-emoji { padding: 8px 6px; }
.im-emoji-grid {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 4px;
}
.im-emoji-btn {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  border-radius: 8px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .1s;
}
.im-emoji-btn:active { background: var(--bg-hover); }

/* ── 表情面板 Tab ── */
.im-emoji-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  padding: 0 4px;
  flex-shrink: 0;
}
.im-emoji-tab {
  flex: 1;
  padding: 8px 0;
  font-size: .82rem;
  color: var(--text-muted);
  text-align: center;
  cursor: pointer;
  border: none;
  background: transparent;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
  -webkit-tap-highlight-color: transparent;
}
.im-emoji-tab.active {
  color: var(--im-green);
  border-bottom-color: var(--im-green);
  font-weight: 600;
}
.im-emoji-tab-content { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* ── 表情包面板 ── */
.im-sticker-container { padding: 8px 6px; overflow: hidden; }
.im-sticker-pack { padding-bottom: 12px; border-bottom: 1px solid var(--border, #eee); margin-bottom: 12px; }
.im-sticker-pack:last-child { border-bottom: none; margin-bottom: 0; }
.im-sticker-pack-name {
  font-size: .78rem;
  color: var(--text-muted);
  padding: 4px 4px 6px;
  font-weight: 600;
}
.im-sticker-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  max-width: 100%;
  overflow: hidden;
}
.im-sticker-item {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  cursor: pointer;
  border: none;
  background: var(--bg-muted);
  padding: 4px;
  transition: background .1s, transform .1s;
  -webkit-tap-highlight-color: transparent;
  min-width: 0;
  overflow: hidden;
  box-sizing: border-box;
}
.im-sticker-item:active { background: var(--bg-hover); transform: scale(.92); }
.im-sticker-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 4px;
}
.im-sticker-emoji { font-size: 1.8rem; background: transparent; }

/* ── 表情消息气泡 ── */
.im-bubble-sticker {
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  max-width: 120px;
  line-height: 0;
  font-size: 0;
  white-space: normal;
}
.im-bubble-sticker::before,
.im-bubble-sticker::after { display: none !important; }
.im-bubble-sticker-emoji {
  font-size: 3.5rem;
  line-height: 1.2;
}
.im-sticker-msg-img {
  width: 120px;
  height: 120px;
  object-fit: contain;
  border-radius: 8px;
  display: block;
}

/* ── 更多功能面板 ── */
.im-extra-panel {
  background: var(--im-navbar-bg);
  border-top: 1px solid var(--border);
  padding: 16px 12px;
  flex-shrink: 0;
  min-height: 120px;
}
.im-extra-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px 8px;
}
.im-extra-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.im-extra-item:active .im-extra-icon { opacity: .7; }
.im-extra-icon {
  width: 56px;
  height: 56px;
  background: var(--bg);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: opacity .1s;
}
.im-extra-item span {
  font-size: .72rem;
  color: var(--text-muted);
  text-align: center;
}

/* ════════════════════════════════════
   通用聊天窗口 #im-chat-view
   ════════════════════════════════════ */

/* 聊天窗口 Navbar 右侧静音按钮 */
.im-chat-call-btn {
  width: 32px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.im-chat-call-btn:active { opacity: .6; }
.im-chat-mute-btn {
  width: 32px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.im-chat-mute-btn:active { opacity: .6; }

/* 会话列表免打扰图标 */
.im-conv-mute-icon {
  color: var(--text-dimmed);
  flex-shrink: 0;
  margin-left: 2px;
}

/* 聊天窗口 Navbar 右侧更多按钮 */
.im-chat-more-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--text);
  transition: background .12s;
  flex-shrink: 0;
  margin-left: auto;            /* 推到最右端 */
  -webkit-tap-highlight-color: transparent;
}
.im-chat-more-btn:active { background: var(--bg-hover); }

/* Navbar 标题区（支持副标题） */
#im-chat-title-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  max-width: 55%;
}
#im-chat-title {
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
#im-chat-subtitle {
  font-size: .68rem;
  color: var(--text-dimmed);
  white-space: nowrap;
}
#im-chat-subtitle:empty { display: none; }

/* 消息列表主体容器 */
/* 非好友提示横幅 */
.im-not-friend-banner {
  position: absolute;
  top: var(--im-navbar-h);
  left: 0;
  right: 0;
  z-index: 9;
  background: #ff4d4f;
  color: #fff;
  font-size: .8rem;
  text-align: center;
  padding: 7px 12px;
  letter-spacing: .02em;
}
html.dark .im-not-friend-banner {
  background: #a61d24;
}

#im-chat-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--im-bg);
  position: relative;
  /* navbar 脱离文档流后用 padding-top 撑开，避免内容被遮住 */
  padding-top: var(--im-navbar-h);
}

/* 顶部加载更多指示器 */
#im-chat-load-more {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 0;
  gap: 6px;
  font-size: .82rem;
  color: var(--text-dimmed);
}

/* 搜索跳转后"↓ 跳到最新消息"悬浮按钮 */
.im-jump-to-latest {
  position: sticky;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: fit-content;
  padding: 6px 16px;
  border-radius: 20px;
  background: var(--primary, #6366f1);
  color: #fff;
  font-size: .82rem;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
  z-index: 10;
  user-select: none;
  white-space: nowrap;
  margin: 0 auto;
  display: block;
}

/* ── 底部输入区域容器 ── */
.im-input-area {
  flex-shrink: 0;
  background: var(--im-navbar-bg);
}

/* ── 输入框 wrap（新版） ── */
.im-input-wrap {
  flex: 1;
  background: var(--bg);
  border-radius: 6px;
  border: 1px solid var(--border);
  padding: 8px 10px;
  min-height: 38px;
  max-height: 120px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.im-chat-input {
  width: 100%;
  display: block;
  font-size: .94rem;
  color: var(--text);
  line-height: 1.45;
  resize: none;
  min-height: 20px;
  max-height: 106px;
  overflow-y: auto;
  background: transparent;
  -webkit-overflow-scrolling: touch;
}
.im-chat-input::placeholder { color: var(--text-dimmed); }

/* 发送按钮（停止状态） */
.im-send-btn.im-send-btn-abort {
  background: #fa5151;
}
.im-send-btn.im-send-btn-abort:active { background: #e04040; }

/* ── Bot 操作菜单 ActionSheet ── */
#im-bot-action-sheet {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
#im-bot-action-mask {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
}
#im-bot-action-body {
  position: relative;
  background: var(--bg-card, #fff);
  border-radius: 14px 14px 0 0;
  padding: 8px 0 calc(12px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
}
#im-bot-action-body button {
  width: 100%;
  padding: 15px 0;
  font-size: 1rem;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  color: var(--text);
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}
#im-bot-action-body button:last-child { border-bottom: none; }
#im-bot-action-body button:active { background: var(--bg-hover); }
#im-bot-action-clear { color: #fa5151 !important; font-weight: 500; }
#im-bot-action-cancel { color: var(--text-muted) !important; margin-top: 8px; }

/* ── 频道操作 ActionSheet（复用 bot-action-sheet 结构） ── */
#im-channel-action-sheet {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
#im-channel-action-mask {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
}
#im-channel-action-body {
  position: relative;
  background: var(--bg-card, #fff);
  border-radius: 14px 14px 0 0;
  padding: 8px 0 calc(12px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
}
#im-channel-action-body .im-action-sheet-title {
  padding: 12px 16px 10px;
  font-size: .85rem;
  color: var(--text-muted);
  text-align: center;
  border-bottom: 1px solid var(--border);
}
#im-channel-action-body button {
  width: 100%;
  padding: 15px 0;
  font-size: 1rem;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  color: var(--text);
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}
#im-channel-action-body button:last-child { border-bottom: none; }
#im-channel-action-body button:active { background: var(--bg-hover); }
#im-channel-action-cancel { color: var(--text-muted) !important; margin-top: 8px; }
.im-action-sheet-danger { color: #fa5151 !important; font-weight: 500; }

/* ── 暗色模式：频道 & Bot ActionSheet ── */
html.dark #im-channel-action-body,
html.dark #im-bot-action-body {
  background: #1c1c1e;
  color: #f2f2f7;
}
html.dark #im-channel-action-body .im-action-sheet-title {
  color: #8e8e93;
  border-bottom-color: rgba(255,255,255,.08);
}
html.dark #im-channel-action-body button,
html.dark #im-bot-action-body button {
  color: #f2f2f7;
  border-bottom-color: rgba(255,255,255,.08);
}
html.dark #im-channel-action-body button:active,
html.dark #im-bot-action-body button:active {
  background: rgba(255,255,255,.08);
}
html.dark #im-channel-action-cancel,
html.dark #im-bot-action-cancel,
html.dark #im-official-action-cancel {
  color: #8e8e93 !important;
}

/* ── 公众号操作 ActionSheet（复用频道结构） ── */
#im-official-action-sheet {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}
#im-official-action-mask {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
}
#im-official-action-body {
  position: relative;
  background: var(--bg-card, #fff);
  border-radius: 14px 14px 0 0;
  width: 100%;
  max-width: 480px;
  padding-bottom: env(safe-area-inset-bottom, 0);
  overflow: hidden;
}
#im-official-action-body .im-action-sheet-title {
  padding: 12px 16px 10px;
  font-size: .85rem;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
#im-official-action-body button {
  width: 100%;
  padding: 15px 0;
  font-size: .95rem;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#im-official-action-body button:last-child { border-bottom: none; }
#im-official-action-body button:active { background: var(--bg-hover); }
#im-official-action-cancel { color: var(--text-muted) !important; margin-top: 8px; }
html.dark #im-official-action-body {
  background: #1c1c1e;
  color: #f2f2f7;
}
html.dark #im-official-action-body .im-action-sheet-title {
  color: #8e8e93;
  border-bottom-color: rgba(255,255,255,.08);
}
html.dark #im-official-action-body button {
  color: #f2f2f7;
  border-bottom-color: rgba(255,255,255,.08);
}
html.dark #im-official-action-body button:active {
  background: rgba(255,255,255,.08);
}

/* ── 新建聊天聚合 ActionSheet ── */
#im-new-chat-sheet {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}
#im-new-chat-mask {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
}
#im-new-chat-body {
  position: relative;
  background: var(--bg-card, #fff);
  border-radius: 14px 14px 0 0;
  padding: 8px 0 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#im-new-chat-body button {
  width: 100%;
  padding: 15px 0;
  font-size: 1rem;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  color: var(--text);
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}
#im-new-chat-body button:last-child { border-bottom: none; }
#im-new-chat-body button:active { background: var(--bg-hover); }
#im-new-chat-cancel { color: var(--text-muted) !important; }
html.dark #im-new-chat-body {
  background: #1c1c1e;
  color: #f2f2f7;
}
html.dark #im-new-chat-body button {
  color: #f2f2f7;
  border-bottom-color: rgba(255,255,255,.08);
}
html.dark #im-new-chat-body button:active { background: rgba(255,255,255,.08); }
html.dark #im-new-chat-cancel {
  color: #8e8e93 !important;
}


/* ── 刷视频：全屏竖划播放器 ── */
.im-video-feed {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 8000;
  background: #000;
  overflow: hidden;
}
.im-video-feed.active { display: block; }

/* 返回按钮 */
.im-video-feed-back {
  position: absolute;
  top: calc(12px + env(safe-area-inset-top, 0px));
  left: 12px;
  z-index: 20;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0,0,0,.45);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.im-video-feed-back:active { background: rgba(0,0,0,.7); }

/* 滑动容器：竖向排列，overflow hidden，靠 JS transform 切换 */
.im-video-swiper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}

/* 每个 slide 占满全屏 */
.im-video-slide {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
}
.im-video-slide video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* 标题遮罩 */
.im-video-slide-info {
  position: absolute;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  left: 16px;
  right: 60px;
  color: #fff;
  font-size: .9rem;
  line-height: 1.5;
  text-shadow: 0 1px 4px rgba(0,0,0,.8);
  pointer-events: none;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 加载提示 */
.im-video-feed-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.7);
  font-size: .95rem;
  pointer-events: none;
}

/* ── Emoji 面板删除行 ── */
.im-emoji-del-row {
  display: flex;
  justify-content: flex-end;
  padding: 4px 4px 0;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}
.im-emoji-del-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  border-radius: 8px;
  -webkit-tap-highlight-color: transparent;
  transition: background .1s;
}
.im-emoji-del-btn:active { background: var(--bg-hover); }

/* ── Bot 打字光标 ── */
.im-bot-cursor {
  display: inline-block;
  font-size: .75em;
  opacity: .8;
  animation: im-bot-blink .7s ease-in-out infinite;
  vertical-align: middle;
}
@keyframes im-bot-blink {
  0%, 100% { opacity: .8; }
  50%       { opacity: 0; }
}

/* ── 气泡失败状态 ── */
.im-bubble.im-bubble-failed {
  opacity: .6;
  border: 1px solid #fa5151;
}
.im-bubble.im-bubble-failed::after {
  content: ' ✕';
  color: #fa5151;
  font-size: .7em;
}

/* ── 链接卡片 ── */
.im-bubble.im-bubble-link {
  padding: 8px 10px !important;
  max-width: 220px !important;
  line-height: 1.3 !important;
  white-space: normal !important;
}
.im-bubble.im-bubble-link .im-link-card {
  display: block;
  text-decoration: none !important;
  color: inherit !important;
}
.im-bubble.im-bubble-link .im-link-title {
  font-size: .85rem;
  font-weight: 500;
  line-height: 1.3;
  word-break: break-word;
  margin: 0 0 2px;
}
.im-bubble.im-bubble-link .im-link-url {
  font-size: .7rem;
  line-height: 1.2;
  opacity: .6;
  display: flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}
.im-bubble.im-bubble-link .im-link-url svg {
  flex-shrink: 0;
}
.im-bubble.im-bubble-link::before,
.im-bubble.im-bubble-link::after { display: none !important; }

/* ── 文件消息 ── */
.im-bubble.im-bubble-file {
  padding: 10px 12px !important;
  max-width: 240px !important;
  white-space: normal !important;
}
.im-bubble.im-bubble-file .im-file-link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none !important;
  color: inherit !important;
}
.im-bubble.im-bubble-file .im-file-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}
.im-bubble.im-bubble-file .im-file-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.im-bubble.im-bubble-file .im-file-name {
  font-size: .88rem;
  font-weight: 500;
  word-break: break-all;
  line-height: 1.3;
}
.im-bubble.im-bubble-file .im-file-size {
  font-size: .72rem;
  opacity: .6;
}
.im-bubble.im-bubble-file::before,
.im-bubble.im-bubble-file::after { display: none !important; }

/* 上传进度条 */
.im-file-progress {
  width: 100%;
  height: 4px;
  background: rgba(0,0,0,.08);
  border-radius: 2px;
  margin-top: 8px;
  overflow: hidden;
}
html.dark .im-file-progress {
  background: rgba(255,255,255,.1);
}
.im-file-progress-fill {
  height: 100%;
  background: var(--im-green, #07c160);
  border-radius: 2px;
  transition: width .3s ease;
  min-width: 0;
}
.im-file-progress-pct {
  display: block;
  font-size: .68rem;
  color: var(--text-dimmed);
  text-align: right;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.im-bubble-file.im-file-uploading .im-file-link {
  pointer-events: none;
  opacity: .7;
}
.im-bubble-file.im-bubble-failed .im-file-progress-pct {
  color: #fa5151;
}

/* ══════════════════════════════════════════════
   多选模式
   ══════════════════════════════════════════════ */
.im-multiselect-mode .im-msg-row { cursor: pointer; }
.im-ms-check {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--border, #ccc); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  margin-right: 4px; margin-top: 8px; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.im-ms-check.checked {
  background: var(--im-green, #07c160); border-color: var(--im-green, #07c160);
}
.im-ms-check.checked::after {
  content: ''; width: 6px; height: 10px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg); margin-top: -2px;
}
.im-ms-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; background: var(--bg-card, #fff);
  border-top: 1px solid var(--border, #eee);
  position: sticky; bottom: 0; z-index: 100;
}
.im-ms-count { font-size: .85rem; color: var(--text-dimmed); }
.im-ms-cancel-btn, .im-ms-forward-btn {
  padding: 6px 18px; border-radius: 6px; border: none;
  font-size: .85rem; cursor: pointer;
}
.im-ms-cancel-btn { background: var(--bg-muted, #f0f0f0); color: var(--text); }
.im-ms-forward-btn { background: var(--im-green, #07c160); color: #fff; }
.im-ms-forward-btn:disabled { opacity: .4; cursor: not-allowed; }

/* ══════════════════════════════════════════════
   转发目标选择器
   ══════════════════════════════════════════════ */
.im-forward-picker-overlay {
  position: fixed; inset: 0; z-index: 9500;
  background: rgba(0,0,0,.45); display: flex;
  align-items: flex-end; justify-content: center;
}
.im-forward-picker-panel {
  background: var(--bg-card, #fff); border-radius: 12px 12px 0 0;
  width: 100%; max-width: 420px; max-height: 70vh;
  display: flex; flex-direction: column;
}
.im-forward-picker-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; font-weight: 600; font-size: .95rem;
  border-bottom: 1px solid var(--border, #eee);
}
.im-forward-picker-close {
  background: none; border: none; font-size: 1.3rem;
  color: var(--text-dimmed); cursor: pointer;
}
.im-forward-picker-list {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.im-forward-picker-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; cursor: pointer;
  transition: background .1s;
}
.im-forward-picker-item:active { background: var(--bg-hover, #f5f5f5); }
.im-forward-picker-avatar {
  width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
}
.im-forward-picker-name { font-size: .9rem; }

/* ══════════════════════════════════════════════
   转发卡片气泡
   ══════════════════════════════════════════════ */
.im-bubble-forward {
  padding: 10px 12px !important;
  max-width: 240px !important;
  cursor: pointer;
  white-space: normal !important;
}
.im-bubble-forward::before,
.im-bubble-forward::after { display: none !important; }
.im-fwd-title {
  font-size: .82rem; font-weight: 600;
  margin-bottom: 6px; line-height: 1.3;
}
.im-fwd-preview {
  font-size: .75rem; color: var(--text-dimmed, #888);
  line-height: 1.5; margin-bottom: 6px;
}
.im-fwd-preview-line {
  overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.im-fwd-preview-name { font-weight: 500; color: var(--text, #333); }
.im-fwd-footer {
  font-size: .7rem; color: var(--accent, #07c160);
  border-top: 1px solid var(--border, #eee);
  padding-top: 6px;
}

/* ══════════════════════════════════════════════
   转发详情 overlay
   ══════════════════════════════════════════════ */
.im-forward-detail-overlay {
  position: fixed; inset: 0; z-index: 9600;
  background: rgba(0,0,0,.5); display: flex;
  align-items: center; justify-content: center;
}
.im-forward-detail-panel {
  background: var(--bg-card, #fff); border-radius: 12px;
  width: 90%; max-width: 400px; max-height: 75vh;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.im-forward-detail-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; font-weight: 600; font-size: .95rem;
  border-bottom: 1px solid var(--border, #eee);
  flex-shrink: 0;
}
.im-forward-detail-close {
  background: none; border: none; font-size: 1.3rem;
  color: var(--text-dimmed); cursor: pointer;
}
.im-forward-detail-body {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 12px 16px;
}
.im-fwd-detail-msg { margin-bottom: 12px; }
.im-fwd-detail-meta {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 2px;
}
.im-fwd-detail-name { font-size: .8rem; font-weight: 600; color: var(--text); }
.im-fwd-detail-time { font-size: .7rem; color: var(--text-dimmed); }
.im-fwd-detail-content {
  font-size: .85rem; line-height: 1.5;
  color: var(--text); word-break: break-word;
}

/* ── 暗色模式：多选 + 转发 ── */
html.dark .im-ms-check { border-color: #555; }
html.dark .im-ms-toolbar {
  background: #1c1c1e; border-top-color: rgba(255,255,255,.08);
}
html.dark .im-ms-cancel-btn { background: #2c2c2e; color: #f2f2f7; }
html.dark .im-ms-count { color: #8e8e93; }
html.dark .im-forward-picker-panel {
  background: #1c1c1e; color: #f2f2f7;
}
html.dark .im-forward-picker-header { border-bottom-color: rgba(255,255,255,.08); }
html.dark .im-forward-picker-close { color: #8e8e93; }
html.dark .im-forward-picker-item:active { background: rgba(255,255,255,.08); }
html.dark .im-fwd-title { color: #f2f2f7; }
html.dark .im-fwd-preview { color: #8e8e93; }
html.dark .im-fwd-preview-name { color: #ccc; }
html.dark .im-fwd-footer { color: #4cd964; border-top-color: rgba(255,255,255,.1); }
html.dark .im-forward-detail-panel {
  background: #1c1c1e; color: #f2f2f7;
}
html.dark .im-forward-detail-header { border-bottom-color: rgba(255,255,255,.08); }
html.dark .im-forward-detail-close { color: #8e8e93; }
html.dark .im-fwd-detail-name { color: #ccc; }
html.dark .im-fwd-detail-time { color: #666; }
html.dark .im-fwd-detail-content { color: #e0e0e0; }


/* ════════════════════════════════════
   联系人详情
   ════════════════════════════════════ */
.im-contact-detail {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--im-bg);
  /* navbar 是 position:absolute 脱离文档流，需要 padding-top 撑开，避免内容被遮住 */
  padding-top: var(--im-navbar-h);
}
.im-contact-hero {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: 24px 16px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.im-contact-big-avatar {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
  flex-shrink: 0;
  position: relative;
}
.im-contact-big-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.im-contact-hero-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.im-contact-hero-id {
  font-size: .8rem;
  color: var(--text-muted);
}
/* 联系人详情：机器人标签（独立于通用的 .im-contact-bot-tag） */
.im-contact-detail-bot-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  padding: 2px 8px;
  font-size: .72rem;
  font-weight: 600;
  color: #5b87f5;
  background: rgba(91,135,245,.12);
  border: 1px solid rgba(91,135,245,.3);
  border-radius: 20px;
}
html.dark .im-contact-detail-bot-tag {
  color: #7ba7ff;
  background: rgba(91,135,245,.18);
  border-color: rgba(91,135,245,.4);
}
/* 消息头像：有 data-openid 时显示手型光标（可点击跳转） */
.im-msg-avatar[data-openid] {
  cursor: pointer;
}
.im-msg-avatar[data-openid]:active {
  opacity: 0.7;
}

/* 头像外层包装（用于放角标） */
.im-msg-avatar-wrap {
  position: relative;
  flex-shrink: 0;
  align-self: flex-start;
}

/* 用户角色角标 */
.im-role-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1.5px solid var(--bg, #fff);
  font-size: 8px;
  font-weight: 700;
  line-height: 12px;
  text-align: center;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.im-role-verified {
  background: #3b82f6;
  color: #fff;
}
.im-role-admin {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
}

/* ── 管理员用户列表 ── */
.im-admin-user-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.im-admin-user-info { flex: 1; min-width: 0; }
.im-admin-user-name {
  font-size: .9rem;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.im-admin-user-id {
  font-size: .75rem;
  color: var(--text-dimmed);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.im-admin-user-role {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.im-admin-role-label {
  font-size: .72rem;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--bg-muted);
  color: var(--text-muted);
  white-space: nowrap;
}
.im-role-verified-tag {
  background: rgba(59,130,246,.12);
  color: #3b82f6;
}
.im-role-admin-tag {
  background: rgba(245,158,11,.12);
  color: #d97706;
}
.im-admin-edit-btn {
  padding: 4px 10px;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  font-size: .78rem;
  cursor: pointer;
}
.im-admin-edit-btn:active { background: var(--bg-hover); }
.im-admin-status-disabled {
  display: inline-block;
  font-size: .68rem;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(231,76,60,.12);
  color: #e74c3c;
  margin-left: 6px;
  vertical-align: middle;
}
.im-admin-pager-btn {
  padding: 6px 16px;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font-size: .82rem;
  cursor: pointer;
}
.im-admin-pager-btn:active { background: var(--bg-hover); }

/* ── 管理员 Tab 切换 ── */
.im-admin-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--im-navbar-bg);
}
.im-admin-tab {
  flex: 1;
  padding: 10px 0;
  font-size: .88rem;
  font-weight: 500;
  color: var(--text-dimmed);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.im-admin-tab.active {
  color: var(--primary, #07c160);
  border-bottom-color: var(--primary, #07c160);
}
.im-admin-tab-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  padding-top: var(--im-navbar-h);
}

/* ── 配置管理列表 ── */
.im-admin-config-item {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.im-admin-config-key {
  font-size: .85rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.im-admin-config-val {
  font-size: .8rem;
  color: var(--text-dimmed);
  font-family: monospace;
  word-break: break-all;
  line-height: 1.4;
}
.im-admin-config-time {
  font-size: .7rem;
  color: var(--text-dimmed);
  margin-top: 4px;
}
.im-admin-config-edit-btn {
  position: absolute;
  top: 12px;
  right: 0;
}
.im-admin-config-action-btn {
  width: 100%;
  padding: 10px;
  border: 1.5px dashed var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--primary, #07c160);
  font-size: .88rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .12s;
}
.im-admin-config-action-btn:active {
  background: var(--bg-hover);
}

/* ════════════════════════════════════
   Toast 提示
   ════════════════════════════════════ */
#im-toast {
  position: fixed;
  bottom: calc(var(--im-tabbar-h) + var(--im-safe-bottom) + 20px);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  z-index: 9999;
  padding: 9px 18px;
  border-radius: 8px;
  background: rgba(0,0,0,.75);
  color: #fff;
  font-size: .84rem;
  font-weight: 500;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s, transform .2s;
  white-space: nowrap;
  max-width: calc(100vw - 40px);
  text-align: center;
}
#im-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ════════════════════════════════════
   自定义确认弹窗
   ════════════════════════════════════ */
#im-confirm-overlay,
#im-dismiss-alert-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0,0,0,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s;
}
#im-confirm-overlay.show,
#im-dismiss-alert-overlay.show {
  opacity: 1;
  pointer-events: auto;
}
.im-confirm-box {
  background: var(--im-bg);
  border-radius: 14px;
  width: 270px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,.22);
  transform: scale(.92);
  transition: transform .18s;
}
#im-confirm-overlay.show .im-confirm-box,
#im-dismiss-alert-overlay.show .im-confirm-box {
  transform: scale(1);
}
.im-confirm-msg {
  padding: 22px 20px 16px;
  text-align: center;
  font-size: .95rem;
  color: var(--text);
  line-height: 1.5;
  font-weight: 500;
}
.im-confirm-btns {
  display: flex;
  border-top: .5px solid var(--border);
}
.im-confirm-btns button {
  flex: 1;
  padding: 13px 0;
  background: none;
  border: none;
  font-size: .95rem;
  cursor: pointer;
  transition: background .1s;
}
.im-confirm-btns button:active { background: var(--hover); }
.im-confirm-cancel {
  color: var(--text-dimmed);
  border-right: .5px solid var(--border) !important;
}
.im-confirm-ok {
  color: #f04040;
  font-weight: 600;
}

/* ════════════════════════════════════
   聊天气泡长按菜单
   ════════════════════════════════════ */
.im-bubble-menu {
  position: fixed;
  z-index: 9200;
  background: rgba(50,50,50,.92);
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,.3);
  overflow: hidden;
  display: flex;
  flex-direction: column;  /* 外层竖排，每行内部横排 */
  pointer-events: auto;
}
.im-bubble-menu-item {
  padding: 8px 14px;
  font-size: .78rem;
  color: #fff;
  display: flex;
  align-items: center;
  cursor: pointer;
  white-space: nowrap;
  border-right: 1px solid rgba(255,255,255,.15);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
.im-bubble-menu-item:last-child { border-right: none; }
.im-bubble-menu-item:active { background: rgba(255,255,255,.15); }
.im-bubble-menu-item.danger { color: #ff6b6b; }
/* AI ✨ 按钮激活态（展开子菜单时高亮） */
.im-bubble-menu-item-active {
  background: rgba(255,255,255,.18);
  color: #7dd3fc;
}

/* 二级菜单行 */
.im-bubble-menu-row {
  display: flex;
  flex-direction: row;
}
.im-bubble-menu-ai {
  border-top: 1px solid rgba(255,255,255,.12);
}
.im-bubble-menu-ai .im-bubble-menu-item {
  color: #7dd3fc;   /* AI 子菜单用浅蓝色区分 */
  font-size: .75rem;
}

/* ════════════════════════════════════
   气泡长按菜单 — 表情快捷栏（Reaction）
   ════════════════════════════════════ */

/* 表情快捷栏容器（菜单顶部） */
.im-bubble-menu-reaction-bar {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 2px;
  padding: 6px 8px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  max-width: 280px;
}

/* 快捷表情按钮 */
.im-reaction-quick-btn {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .12s, transform .1s;
  line-height: 1;
}
.im-reaction-quick-btn:active {
  background: rgba(255,255,255,.18);
  transform: scale(.9);
}
/* 已标记（自己选过）的快捷表情高亮 */
.im-reaction-quick-btn.active {
  background: rgba(255,255,255,.22);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.5);
}

/* ════════════════════════════════════
   消息气泡下方 — Reaction 展示条
   ════════════════════════════════════ */

/* Reaction 条（插在 .im-msg-col 内） */
.im-reaction-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 1px;
  align-self: flex-start;
}
.im-msg-row.me .im-reaction-bar {
  /* 自己消息右对齐 */
  align-self: flex-end;
}

/* 单个 reaction chip */
.im-reaction-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: .82rem;
  line-height: 1.4;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .12s, border-color .12s, transform .1s;
  user-select: none;
  -webkit-user-select: none;
}
.im-reaction-chip:active {
  transform: scale(.92);
}

/* 自己标记过的 chip：高亮边框 + 淡绿背景 */
.im-reaction-chip-self {
  background: #e6f9ee;
  border-color: #07c160;
  color: #07c160;
}
html.dark .im-reaction-chip-self {
  background: rgba(48, 209, 88, .15);
  border-color: #30d158;
  color: #30d158;
}

/* reaction 数量 */
.im-reaction-count {
  font-size: .72rem;
  font-weight: 600;
  color: var(--text-muted);
  min-width: 10px;
  text-align: center;
}
.im-reaction-chip-self .im-reaction-count {
  color: #07c160;
}
html.dark .im-reaction-chip-self .im-reaction-count {
  color: #30d158;
}

/* ════════════════════════════════════
   消息翻译结果（微信风格）
   ════════════════════════════════════ */
.im-translate-result {
  position: relative;
  margin-top: 4px;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: .88rem;
  line-height: 1.55;
  word-break: break-word;
  white-space: pre-wrap;
  max-width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  animation: im-translate-in .2s ease-out;
}
@keyframes im-translate-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* 隐藏态（再次点击翻译时切换） */
.im-translate-result.im-translate-hidden {
  display: none;
}

/* 他人消息的翻译结果 — 挂在左侧气泡下 */
.im-msg-row:not(.me) .im-translate-result {
  background: #f0f0f0;
  color: #555;
  border-top-left-radius: 0;
  align-self: flex-start;
}
.im-msg-row:not(.me) .im-translate-result::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 10px;
  border: 5px solid transparent;
  border-right-color: #f0f0f0;
  border-left: 0;
}

/* 自己消息的翻译结果 — 挂在右侧气泡下 */
.im-msg-row.me .im-translate-result {
  background: #d5f7ae;
  color: #333;
  border-top-right-radius: 0;
  align-self: flex-end;
}
.im-msg-row.me .im-translate-result::after {
  content: '';
  position: absolute;
  right: -5px;
  top: 10px;
  border: 5px solid transparent;
  border-left-color: #d5f7ae;
  border-right: 0;
}

/* dark mode */
html.dark .im-msg-row:not(.me) .im-translate-result {
  background: #3a3a3c;
  color: #c8c8cc;
}
html.dark .im-msg-row:not(.me) .im-translate-result::before {
  border-right-color: #3a3a3c;
}
html.dark .im-msg-row.me .im-translate-result {
  background: #2e5a2e;
  color: #d0f0d0;
}
html.dark .im-msg-row.me .im-translate-result::after {
  border-left-color: #2e5a2e;
}

.im-translate-text {
  flex: 1;
  min-width: 0;
}
.im-translate-text::before {
  content: '译 ';
  font-size: .72rem;
  font-weight: 600;
  opacity: .55;
  letter-spacing: .02em;
}
.im-translate-error {
  color: #f04040;
}
html.dark .im-translate-error {
  color: #ff6b6b;
}

/* 翻译加载中三点动画 */
.im-translate-loading {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 0;
}
.im-translate-loading span {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: .5;
  animation: im-translate-dot .9s ease-in-out infinite;
}
.im-translate-loading span:nth-child(2) { animation-delay: .18s; }
.im-translate-loading span:nth-child(3) { animation-delay: .36s; }
@keyframes im-translate-dot {
  0%, 80%, 100% { transform: scale(.6); opacity: .35; }
  40%           { transform: scale(1);  opacity: 1;   }
}

/* ════════════════════════════════════
   回复建议卡片
   ════════════════════════════════════ */
/* 回复建议容器：竖向排列三条建议 */
.im-reply-suggest-wrap {
  flex-direction: column !important;
  gap: 0 !important;
  padding: 0 !important;
  overflow: hidden;
}
.im-reply-suggest-item {
  display: block;
  width: 100%;
  padding: 9px 12px;
  text-align: left;
  font-size: .88rem;
  line-height: 1.45;
  color: inherit;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(0,0,0,.06);
  cursor: pointer;
  word-break: break-word;
  white-space: normal;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s;
}
.im-reply-suggest-item:last-child { border-bottom: none; }
.im-reply-suggest-item:active,
.im-reply-suggest-item:hover { background: rgba(0,0,0,.05); }

/* 自己消息侧的回复建议（绿色系背景）*/
.im-msg-row.me .im-reply-suggest-item:active,
.im-msg-row.me .im-reply-suggest-item:hover { background: rgba(0,0,0,.06); }

/* 深色模式 */
html.dark .im-reply-suggest-item {
  border-bottom-color: rgba(255,255,255,.06);
}
html.dark .im-reply-suggest-item:active,
html.dark .im-reply-suggest-item:hover { background: rgba(255,255,255,.07); }

/* 润色结果标签前缀颜色区分 */
.im-translate-result[data-label="润"] .im-translate-text::before { content: '润 '; color: #059669; }
.im-translate-result[data-label="译"] .im-translate-text::before { content: '译 '; }
html.dark .im-translate-result[data-label="润"] .im-translate-text::before { color: #34d399; }

/* ════════════════════════════════════
   滑动删除（左滑显示删除按钮）
   ════════════════════════════════════ */
.im-conv-item-wrap {
  position: relative;
  overflow: hidden;
}
.im-conv-action {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: stretch;
  transform: translateX(100%);
  transition: transform .2s;
}
.im-conv-item-wrap.swiped .im-conv-action {
  transform: translateX(0);
}
.im-conv-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  font-size: .88rem;
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.im-conv-action-btn.delete { background: #fa5151; color: #fff; }
.im-conv-action-btn.mute   { background: var(--text-dimmed); color: #fff; }

/* ════════════════════════════════════
   "我" 页面导航栏特殊处理（背景与页面一致）
   ════════════════════════════════════ */
#page-me .im-navbar {
  background: var(--im-bg);
  border-bottom: none;
}

/* ════════════════════════════════════
   过渡动画
   ════════════════════════════════════ */
.im-page { transition: opacity .18s; }

/* ════════════════════════════════════
   全局遮罩（用于关闭面板）
   ════════════════════════════════════ */
#im-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: transparent;
  display: none;
}
#im-overlay.show { display: block; }

/* ════════════════════════════════════
   响应式：PC 端直接隐藏 im-app，只显示拦截遮罩
   ════════════════════════════════════ */
@media (min-width: 481px) {
  #im-app    { display: none !important; }
  #pc-block  { display: flex !important; }
}
@media (max-width: 480px) {
  #pc-block  { display: none !important; }
  #im-app    { display: flex !important; }
}

/* ════════════════════════════════════
   机器人列表视图
   ════════════════════════════════════ */
.im-bot-list-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--bg);
  /* navbar 是 position:absolute 脱离文档流，padding-top 撑开避免内容被遮住 */
  padding-top: var(--im-navbar-h);
}
.im-bot-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .1s;
}
.im-bot-list-item:active { background: var(--bg-hover); }
.im-bot-list-info {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
}
.im-bot-list-info .im-contact-name {
  flex-shrink: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.im-bot-list-info .im-contact-bot-tag {
  flex-shrink: 0;
}

/* ════════════════════════════════════
   机器人标记
   ════════════════════════════════════ */
.im-contact-bot-tag {
  display: inline-block;
  margin-left: 5px;
  padding: 1px 5px;
  font-size: .62rem;
  font-weight: 600;
  line-height: 1.5;
  color: #fff;
  background: #6366f1;
  border-radius: 4px;
  vertical-align: middle;
  letter-spacing: .02em;
}

/* ════════════════════════════════════
   头像通用：字母 fallback
   图片用 position:absolute 覆盖在字母上方；
   onerror 时 this.remove() 移除图片，字母自动显示
   ════════════════════════════════════ */
.im-avatar-letter {
  position: relative;
  z-index: 0;   /* img z-index:1 会盖在上方 */
  pointer-events: none;
  user-select: none;
  line-height: 1;
}

/* ════════════════════════════════════
   "我" 页面 — 个人信息扩展
   ════════════════════════════════════ */
.im-profile-intro {
  font-size: .78rem;
  color: var(--text-dimmed);
  margin-top: 3px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}
.im-cell-value {
  flex: 1;
  font-size: .85rem;
  color: var(--text-dimmed);
  text-align: right;
  margin-right: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ════════════════════════════════════
   新消息提示条
   ════════════════════════════════════ */
#im-new-msg-hint {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 10;
  background: var(--im-green);
  color: #fff;
  font-size: .82rem;
  font-weight: 500;
  padding: 7px 16px;
  border-radius: 99px;
  display: flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 2px 12px rgba(0,0,0,.18);
  cursor: pointer;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 200;
  -webkit-tap-highlight-color: transparent;
}
#im-new-msg-hint.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.im-new-msg-arrow {
  font-size: .9rem;
  line-height: 1;
}

/* ════════════════════════════════════
   水印层
   ════════════════════════════════════ */

/* ════════════════════════════════════
   朋友圈 — 整体容器
   ════════════════════════════════════ */
#im-moments-view {
  display: flex;
  flex-direction: column;
}
/* 可滚动主体，充满剩余高度 */
.im-moments-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background: var(--im-bg);
}

/* ── 悬浮导航栏（覆盖在封面上） ── */
.im-moments-navbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 10;
  height: 48px;
  display: flex;
  align-items: center;
  padding: 0 4px;
  /* 初始透明，滚动后 JS 加 .scrolled 变实色 */
  background: transparent;
  transition: background .25s, box-shadow .25s;
}
.im-moments-navbar.scrolled {
  background: var(--im-bg);
  box-shadow: 0 1px 0 var(--border);
}
.im-moments-navbar.scrolled .im-moments-navbar-title { opacity: 1; }
.im-moments-back-btn,
.im-moments-cam-btn {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  color: #fff;
  flex-shrink: 0;
}
.im-moments-navbar.scrolled .im-moments-back-btn,
.im-moments-navbar.scrolled .im-moments-cam-btn { color: var(--text); }
.im-moments-navbar-title {
  flex: 1;
  text-align: center;
  font-size: .95rem;
  font-weight: 600;
  color: var(--text);
  opacity: 0;
  transition: opacity .2s;
}

/* ── 封面区 ── */
.im-moments-cover {
  position: relative;
  width: 100%;
  height: 220px;
  background: #1a1a1a;
  overflow: hidden;
  flex-shrink: 0;
}
.im-moments-cover-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #1a2a3a 0%, #2d4a5a 50%, #1a3a2a 100%);
  /* 有封面图时 JS 替换 background-image */
}
/* 封面底部遮罩 */
.im-moments-cover::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(transparent, rgba(0,0,0,.35));
}
/* 右下角自己头像+名字 */
.im-moments-cover-self {
  position: absolute;
  bottom: 14px; right: 16px;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  gap: 10px;
}
.im-moments-self-name {
  font-size: .88rem;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,.5);
  margin-bottom: 4px;
}
.im-moments-self-avatar {
  width: 60px; height: 60px;
  border-radius: 8px;
  border: 3px solid rgba(255,255,255,.85);
  overflow: hidden;
  position: relative;
  background: #666;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.im-moments-self-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.im-moments-self-avatar span {
  position: absolute;
  color: #fff;
  font-size: 1.4rem;
  font-weight: 700;
}

/* ── 每条动态 ── */
.im-moments-list {
  background: var(--im-bg);
  padding-bottom: 20px;
}
.im-moment-item {
  display: flex;
  gap: 10px;
  padding: 14px 12px 14px 16px;
  border-bottom: .5px solid var(--border);
  background: var(--im-bg);
}
.im-moment-avatar {
  width: 42px;
  height: 42px;
  border-radius: 6px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  overflow: hidden;
}
.im-moment-avatar img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.im-moment-body {
  flex: 1;
  min-width: 0;
}
.im-moment-name {
  font-size: .88rem;
  font-weight: 600;
  color: #5a8fe0;
  margin-bottom: 5px;
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 5px;
}
.im-moment-bot-badge {
  display: inline-flex;
  align-items: center;
  font-size: .68rem;
  font-weight: 500;
  color: #fff;
  background: #7c8cff;
  border-radius: 3px;
  padding: 1px 5px;
  line-height: 1.4;
  flex-shrink: 0;
}
.im-moment-text {
  font-size: .93rem;
  color: var(--text);
  line-height: 1.6;
  margin-bottom: 8px;
  white-space: pre-wrap;
  word-break: break-all;
}

/* ── 图片九宫格 ── */
.im-moment-imgs {
  margin-bottom: 8px;
}
/* 单张图：最大宽度200px */
.im-moment-imgs-1 {
  display: block;
}
.im-moment-imgs-1 .im-moment-img {
  max-width: 200px;
  max-height: 200px;
  width: auto;
  height: auto;
  object-fit: cover;
  border-radius: 4px;
  display: block;
  cursor: pointer;
}
/* 多张：三列等宽网格 */
.im-moment-imgs-n {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  max-width: 246px;
}
.im-moment-imgs-n .im-moment-img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 4px;
  display: block;
  cursor: pointer;
}
/* 两张时用2列 */
.im-moment-imgs-n:has(> :nth-child(2):last-child) {
  grid-template-columns: repeat(2, 1fr);
  max-width: 166px;
}
/* 四张用2列 */
.im-moment-imgs-n:has(> :nth-child(4):last-child) {
  grid-template-columns: repeat(2, 1fr);
  max-width: 166px;
}

/* ── 底部元信息 ── */
.im-moment-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}
.im-moment-time {
  font-size: .72rem;
  color: var(--text-dimmed);
}
.im-moment-del {
  background: none;
  border: none;
  font-size: .72rem;
  color: var(--text-dimmed);
  padding: 2px 6px;
  cursor: pointer;
  border-radius: 4px;
}
.im-moment-del:active { background: var(--hover); }

/* 没有更多 */
.im-moments-end {
  text-align: center;
  padding: 20px 0 30px;
  font-size: .78rem;
  color: var(--text-dimmed);
}
/* 追加条目淡入 */
@keyframes im-moment-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.im-moment-fadein {
  animation: im-moment-in .3s ease both;
}

/* ════════════════════════════════════
   动态卡片 — 操作栏 & 评论
   ════════════════════════════════════ */
.im-moment-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.im-moment-like-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: .78rem;
  padding: 2px 0;
  line-height: 1;
  transition: color .15s;
}
.im-moment-like-btn:hover { color: #e53935; }
.im-moment-like-btn.liked { color: #e53935; }
.im-moment-like-btn.liked svg { fill: currentColor; }
.im-moment-like-count { font-size: .78rem; }

.im-moment-comment-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: .78rem;
  padding: 2px 0;
  line-height: 1;
}
.im-moment-comment-btn:hover { color: var(--text); }
.im-moment-comment-count { font-size: .78rem; }

/* 点赞用户头像列表 */
.im-moment-like-users {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.im-moment-like-users:empty { display: none; }
.im-like-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.im-like-avatar-fb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .6rem;
  font-weight: 600;
  color: #fff;
}

/* 评论列表 */
:root {
  --im-comment-bg:        #f7f7f7;
  --im-comment-border:    #efefef;
  --im-comment-hover:     #eeeeee;
  --im-comment-name:      #576b95;
  --im-comment-del-color: #c0392b;
  --im-comment-bar-bg:    #fff;
  --im-comment-bar-border:var(--border);
}
.im-moment-comments {
  margin-top: 6px;
  background: var(--im-comment-bg);
  border-radius: 6px;
  overflow: hidden;
}
.im-moment-comments:empty { display: none; }
.im-comment-item {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 4px;
  padding: 5px 10px;
  font-size: .82rem;
  line-height: 1.5;
  cursor: pointer;
  transition: background .15s;
}
.im-comment-item:not(:last-child) {
  border-bottom: 1px solid var(--im-comment-border);
}
.im-comment-item:hover { background: var(--im-comment-hover); }
.im-comment-name {
  color: var(--im-comment-name);
  font-weight: 500;
  flex-shrink: 0;
}
.im-comment-name::after { content: '：'; }
.im-comment-reply {
  color: var(--text-muted);
  font-size: .78rem;
}
.im-comment-reply em {
  color: #576b95;
  font-style: normal;
}
.im-comment-content {
  color: var(--text);
  word-break: break-all;
}
.im-comment-del {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--im-comment-del-color);
  font-size: .72rem;
  cursor: pointer;
  padding: 1px 4px;
  border-radius: 3px;
  opacity: 0;
  transition: opacity .2s;
}
.im-comment-item:hover .im-comment-del { opacity: 1; }

@keyframes im-comment-in {
  from { opacity: 0; transform: translateX(6px); }
  to   { opacity: 1; transform: translateX(0); }
}
.im-comment-fadein { animation: im-comment-in .22s ease both; }

/* ════════════════════════════════════
   评论输入浮层（底部 fixed）
   ════════════════════════════════════ */

#im-comment-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9000;
  background: var(--im-comment-bar-bg);
  border-top: 1px solid var(--im-comment-bar-border);
  padding: 8px 12px;
  transform: translateY(100%);
  transition: transform .22s cubic-bezier(.4,0,.2,1);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#im-comment-bar.visible { transform: translateY(0); }

#im-comment-bar-preview {
  font-size: .8rem;
  color: var(--text-muted);
  padding: 6px 12px;
  background: var(--bg-hover, rgba(0,0,0,.04));
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: none;
}
.im-comment-preview-label {
  font-weight: 500;
  color: var(--text-dimmed);
  margin-right: 2px;
}
.im-comment-preview-text {
  color: var(--text-muted);
}
#im-comment-bar-hint {
  font-size: .76rem;
  color: var(--text-muted);
  padding: 0 2px;
}

#im-comment-bar-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
#im-comment-input {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: .9rem;
  resize: none;
  outline: none;
  line-height: 1.5;
  max-height: 100px;
  overflow-y: auto;
  background: var(--im-input-bg);
  color: var(--text);
}
#im-comment-input:focus {
  border-color: var(--im-green);
}
#im-comment-send {
  display: none;
}

/* ════════════════════════════════════
   发布动态页
   ════════════════════════════════════ */
.im-publish-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  /* navbar 是 position:absolute 脱离文档流，padding-top 撑开避免内容被遮住 */
  padding: calc(var(--im-navbar-h) + 16px) 16px 16px;
  gap: 12px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--bg);
}
#im-publish-text {
  width: 100%;
  min-height: 120px;
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  font-size: 1rem;
  color: var(--text);
  line-height: 1.6;
  font-family: inherit;
}
#im-publish-text::placeholder { color: var(--text-dimmed); }
.im-publish-images {
  display: grid;
  grid-template-columns: repeat(3, 80px);
  gap: 8px;
}
.im-publish-img-thumb {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}
.im-publish-img-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.im-publish-img-del {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  background: rgba(0,0,0,.55);
  color: #fff;
  border-radius: 50%;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
/* 上传状态徽标 */
.im-publish-img-status {
  position: absolute;
  bottom: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.im-publish-img-status.uploading {
  background: rgba(0,0,0,.45);
  pointer-events: none;
}
.im-publish-img-status.done {
  background: rgba(40,180,80,.85);
  color: #fff;
}
.im-publish-img-status.error {
  background: rgba(220,50,50,.9);
  color: #fff;
  cursor: pointer;
  pointer-events: auto;
}
/* 上传旋转圈 */
.im-publish-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: im-spin .7s linear infinite;
}
@keyframes im-spin { to { transform: rotate(360deg); } }

.im-publish-add-img {
  width: 80px;
  height: 80px;
  border-radius: 6px;
  border: 1.5px dashed var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--text-dimmed);
  font-size: .75rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color .15s;
}
.im-publish-add-img:active { border-color: var(--im-green); color: var(--im-green); }
.im-publish-send-btn {
  padding: 0 14px;
  height: 32px;
  background: var(--im-green);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.im-publish-send-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

#im-watermark {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  /* background-image 由 JS 用 canvas 动态生成并注入 */
}

/* ════════════════════════════════════
   通知中心
   ════════════════════════════════════ */

/* ── 通知视图容器 ── */
#im-notify-view {
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

/* ── 全部已读按钮 ── */
.im-notify-read-all-btn {
  padding: 0 12px;
  height: 32px;
  font-size: .82rem;
  color: var(--im-green);
  font-weight: 500;
  white-space: nowrap;
}
.im-notify-read-all-btn:active { opacity: .7; }

/* ── 通知列表滚动容器 ── */
.im-notify-list {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--im-bg);
  /* navbar 是 position:absolute 脱离文档流，padding-top 撑开避免内容被遮住 */
  padding-top: var(--im-navbar-h);
}

/* ── 单条通知 ── */
.im-notify-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .15s;
  position: relative;
}
.im-notify-item:active { background: var(--bg-hover); }

/* 未读左侧橙色指示线 */
.im-notify-item-unread::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #ff6b00;
  border-radius: 0 2px 2px 0;
}

/* ── 通知头像 ── */
.im-notify-avatar {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: var(--im-avatar-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  overflow: hidden;
  position: relative;
}
.im-notify-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: inherit;
  position: absolute;
  inset: 0;
}

/* ── 通知正文 ── */
.im-notify-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.im-notify-row1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.im-notify-from {
  font-size: .88rem;
  font-weight: 600;
  color: #5a8fe0;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.im-notify-time {
  font-size: .72rem;
  color: var(--text-dimmed);
  flex-shrink: 0;
}
.im-notify-row2 {
  display: flex;
  align-items: center;
}
.im-notify-type {
  font-size: .78rem;
  color: var(--text-muted);
}
.im-notify-content {
  font-size: .88rem;
  color: var(--text);
  line-height: 1.5;
  word-break: break-all;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── 动态缩略图 ── */
.im-notify-thumb {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--bg-muted);
}
.im-notify-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.im-notify-thumb-text {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  font-size: .68rem;
  color: var(--text-muted);
  line-height: 1.3;
  text-align: center;
  word-break: break-all;
  overflow: hidden;
}

/* ── 通知淡入动画 ── */
@keyframes im-notify-in {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}
.im-notify-fadein { animation: im-notify-in .25s ease both; }

/* ── 发现页通知入口角标 ── */
.im-cell-badge {
  flex-shrink: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: #ff3b30;
  color: #fff;
  border-radius: 9px;
  font-size: .72rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 4px;
  line-height: 1;
}
.im-cell-badge:empty { display: none; }

/* ── 发现 tab 角标（若启用） ── */
#tab-badge-discover {
  /* 复用 im-tab-badge 基础样式，仅在有内容时显示 */
}

/* ════════════════════════════════════
   评论通知横幅（顶部弹出）
   ════════════════════════════════════ */
#im-notify-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  padding: 0 12px;
  /* safe area inset top */
  padding-top: calc(env(safe-area-inset-top, 0px) + 8px);
  pointer-events: none;
  transform: translateY(-120%);
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}
#im-notify-banner.show {
  transform: translateY(0);
  pointer-events: auto;
}
.im-notify-banner-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg);
  border-radius: 14px;
  padding: 10px 14px;
  box-shadow: 0 4px 20px rgba(0,0,0,.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
}
html.dark .im-notify-banner-inner {
  background: #2c2c2e;
  box-shadow: 0 4px 20px rgba(0,0,0,.5);
}
.im-notify-banner-avatar {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
  font-weight: 700;
  color: #fff;
  overflow: hidden;
}
.im-notify-banner-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.im-notify-banner-title {
  font-size: .82rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.im-notify-banner-title strong {
  font-weight: 600;
}
.im-notify-banner-text {
  font-size: .78rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ════════════════════════════════════
   图片灯箱
   ════════════════════════════════════ */
#im-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10001;
  background: rgba(0,0,0,.92);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
#im-lightbox.show {
  opacity: 1;
  pointer-events: auto;
}
/* 图片居中包裹 */
.im-lb-img-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 90vw;
  max-height: 82vh;
}
#im-lightbox-img {
  max-width: 90vw;
  max-height: 82vh;
  object-fit: contain;
  border-radius: 4px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pinch-zoom;
  display: block;
}
/* 通用按钮基础样式 */
.im-lb-btn {
  position: absolute;
  background: rgba(255,255,255,.18);
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background .15s;
}
.im-lb-btn:active { background: rgba(255,255,255,.32); }
/* 关闭按钮 */
.im-lb-close {
  top: 16px; right: 16px;
  width: 36px; height: 36px;
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
}
/* 左右箭头 */
.im-lb-prev, .im-lb-next {
  top: 50%; transform: translateY(-50%);
  width: 40px; height: 56px;
  font-size: 32px;
  line-height: 1;
}
.im-lb-prev { left: 8px;  border-radius: 0 6px 6px 0; }
.im-lb-next { right: 8px; border-radius: 6px 0 0 6px; }
/* 计数器 */
.im-lb-counter {
  position: absolute;
  bottom: 20px; left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,.75);
  font-size: .82rem;
  pointer-events: none;
  white-space: nowrap;
}

/* ════════════════════════════════════
   动态详情页
   ════════════════════════════════════ */

/* 详情页专属变量（深浅色自动适配） */
:root {
  --im-detail-card-bg:    #ffffff;
  --im-detail-list-bg:    #f5f5f5;
  --im-detail-item-bg:    #ffffff;
  --im-detail-hd-bg:      #f5f5f5;
  --im-detail-bar-bg:     #ffffff;
  --im-detail-input-bg:   #efefef;
  --im-detail-name-color: #5a8fe0;
  --im-detail-divider:    8px solid #efefef;
}
html.dark {
  --im-detail-card-bg:    #1c1c1e;
  --im-detail-list-bg:    #000000;
  --im-detail-item-bg:    #1c1c1e;
  --im-detail-hd-bg:      #111111;
  --im-detail-bar-bg:     #1c1c1e;
  --im-detail-input-bg:   #2c2c2e;
  --im-detail-name-color: #7da5d8;
  --im-detail-divider:    8px solid #000000;
}

#im-moment-detail-view {
  display: flex;
  flex-direction: column;
  background: var(--im-detail-list-bg);
}
.im-moment-detail-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* navbar 是 position:absolute 脱离文档流，padding-top 撑开避免内容被遮住 */
  padding-top: var(--im-navbar-h);
  padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
  background: var(--im-detail-list-bg);
}
/* 动态主体卡片：白/深色卡片，下方粗分割线 */
.im-moment-detail-card {
  display: flex;
  gap: 10px;
  padding: 16px 16px 14px;
  border-bottom: var(--im-detail-divider);
  background: var(--im-detail-card-bg);
}
/* 评论区标题行 */
.im-moment-detail-comment-hd {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px 8px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--im-detail-hd-bg);
  border-bottom: .5px solid var(--border);
  letter-spacing: .02em;
}
.im-moment-detail-comment-count {
  font-size: .76rem;
  color: var(--text-dimmed);
  font-weight: 400;
}
/* 评论列表容器 */
.im-moment-detail-comment-list {
  background: var(--im-detail-list-bg);
}
/* 单条评论 */
.im-detail-comment-item {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: .5px solid var(--border);
  background: var(--im-detail-item-bg);
  cursor: pointer;
  transition: background .12s;
  position: relative;
}
.im-detail-comment-item:active { background: var(--bg-hover); }
.im-detail-comment-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .88rem;
  font-weight: 700;
  color: #fff;
  overflow: hidden;
}
.im-detail-comment-avatar img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.im-detail-comment-body { flex: 1; min-width: 0; }
.im-detail-comment-name {
  font-size: .82rem;
  font-weight: 600;
  color: var(--im-detail-name-color);
  margin-bottom: 3px;
}
.im-detail-comment-text {
  font-size: .9rem;
  color: var(--text);
  line-height: 1.55;
  word-break: break-all;
}
.im-detail-comment-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 5px;
}
.im-detail-comment-time {
  font-size: .72rem;
  color: var(--text-dimmed);
}
/* 高亮目标评论 */
@keyframes im-comment-hl {
  0%   { background: rgba(255,107,0,.22); }
  60%  { background: rgba(255,107,0,.12); }
  100% { background: var(--im-detail-item-bg); }
}
.im-comment-highlight {
  animation: im-comment-hl 2.2s ease forwards;
}
/* 底部写评论触发栏 */
.im-moment-detail-bar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 8px 14px calc(8px + env(safe-area-inset-bottom, 0px));
  background: var(--im-detail-bar-bg);
  border-top: .5px solid var(--border);
  z-index: 10;
}
.im-moment-detail-comment-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: var(--im-detail-input-bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 8px 14px;
  font-size: .88rem;
  color: var(--text-muted);
  cursor: pointer;
}
.im-moment-detail-comment-trigger:active { background: var(--bg-hover); }

/* 通知里评论已删除 */
.im-notify-content-deleted {
  color: var(--text-dimmed);
  font-style: italic;
  font-size: .8rem;
}
/* 详情页评论已删除提示条 */
.im-detail-deleted-tip {
  padding: 10px 16px;
  font-size: .82rem;
  color: var(--text-dimmed);
  font-style: italic;
  background: var(--im-detail-hd-bg);
  border-bottom: .5px solid var(--border);
  text-align: center;
}


/* ═══════════════════════════════════════
   Bot 聊天专属样式
   ═══════════════════════════════════════ */

/* 清除对话按钮（navbar 右侧） */
.im-bot-clear-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.im-bot-clear-btn:active { opacity: .6; }

/* Bot 消息列表背景复用 im-bg */
.im-bot-msg-list {
  background: var(--im-bg);
}

/* Bot 输入栏：只有文本框和发送按钮 */
.im-bot-input-bar {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 8px 12px;
  padding-bottom: calc(8px + var(--im-safe-bottom));
  background: var(--im-navbar-bg);
  border-top: .5px solid var(--border);
}
.im-bot-input-bar .im-textarea-wrap {
  flex: 1;
}
.im-bot-input-bar .im-send-btn {
  display: flex !important;  /* 始终显示 */
  flex-shrink: 0;
}

/* ── 重新生成按钮 ── */
.im-bot-regen-wrap {
display: flex;
justify-content: flex-start;
padding: 4px 0 2px;
}
.im-bot-regen-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid var(--border-color, #e0e0e0);
  border-radius: 14px;
  background: transparent;
  color: var(--text-muted, #999);
  font-size: .75rem;
  cursor: pointer;
  transition: background .15s, color .15s;
  line-height: 1.4;
}
.im-bot-regen-btn:hover {
  background: var(--hover-bg, rgba(0,0,0,.05));
  color: var(--text-color, #333);
  border-color: var(--text-muted, #999);
}
.im-bot-regen-btn:active { opacity: .7; }
.im-bot-regen-btn svg {
  flex-shrink: 0;
  vertical-align: middle;
}

/* 加载更多历史按钮 */
.im-bot-load-more {
  text-align: center;
  padding: 8px 0;
  font-size: .82rem;
  color: var(--text-muted);
  cursor: pointer;
}
.im-bot-load-more:active { opacity: .6; }

/* ── Bot Markdown 渲染样式 ── */
.im-bubble .im-bot-p       { margin: 0 0 6px; line-height: 1.65; }
.im-bubble .im-bot-p:last-child { margin-bottom: 0; }

.im-bubble .im-bot-h1,
.im-bubble .im-bot-h2,
.im-bubble .im-bot-h3,
.im-bubble .im-bot-h4 {
  font-weight: 700;
  line-height: 1.4;
  margin: 10px 0 4px;
}
.im-bubble .im-bot-h1 { font-size: 1.15em; }
.im-bubble .im-bot-h2 { font-size: 1.08em; }
.im-bubble .im-bot-h3 { font-size: 1.02em; }
.im-bubble .im-bot-h4 { font-size: .97em; }

.im-bubble .im-bot-code-inline {
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: .85em;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(0,0,0,.08);
}
html.dark .im-bubble .im-bot-code-inline {
  background: rgba(255,255,255,.12);
}

.im-bubble .im-bot-code-block {
  margin: 8px 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: #1e1e1e;
  color: #d4d4d4;
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: .82em;
  line-height: 1.55;
  overflow-x: auto;
  white-space: pre;
}

.im-bubble .im-bot-table-wrap {
  overflow-x: auto;
  margin: 8px 0;
}
.im-bubble .im-bot-table {
  border-collapse: collapse;
  font-size: .88em;
  min-width: 100%;
}
.im-bubble .im-bot-table th,
.im-bubble .im-bot-table td {
  border: 1px solid var(--border);
  padding: 5px 10px;
  text-align: left;
  white-space: nowrap;
}
.im-bubble .im-bot-table th {
  background: var(--bg-muted);
  font-weight: 600;
}

.im-bubble .im-bot-ul,
.im-bubble .im-bot-ol {
  margin: 4px 0 6px 18px;
  padding: 0;
  line-height: 1.65;
}
.im-bubble .im-bot-ul { list-style: disc; }
.im-bubble .im-bot-ol { list-style: decimal; }

.im-bubble .im-bot-quote {
  margin: 6px 0;
  padding: 4px 10px;
  border-left: 3px solid var(--im-green);
  color: var(--text-muted);
  font-style: italic;
}

.im-bubble .im-bot-hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 8px 0;
}

.im-bubble .im-bot-md-img {
  max-width: 100%;
  border-radius: 6px;
  display: block;
  margin: 4px 0;
}

.im-bubble a {
  color: var(--im-green);
  text-decoration: none;
}
.im-bubble a:active { opacity: .7; }

/* 打字机光标 */
.im-bot-cursor {
  display: inline-block;
  font-size: .85em;
  color: inherit;
  opacity: .8;
  animation: im-bot-blink .6s step-end infinite;
  vertical-align: middle;
  margin-left: 2px;
}
@keyframes im-bot-blink {
  0%, 100% { opacity: .8; }
  50%       { opacity: 0; }
}

/* ════════════════════════════════════
   新建群聊 / 群聊列表
   ════════════════════════════════════ */

/* 弹窗主体滚动区 */
.im-create-group-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--im-bg);
  /* navbar 是 position:absolute 脱离文档流，padding-top 撑开避免内容被遮住 */
  padding-top: var(--im-navbar-h);
}

/* 群名输入框所在的 cell */
.im-create-group-name-cell {
  padding: 0 16px;
}
.im-create-group-name-input {
  width: 100%;
  height: 44px;
  font-size: 1rem;
  color: var(--text);
  background: none;
  border: none;
  outline: none;
}
.im-create-group-name-input::placeholder { color: var(--text-dimmed); }

/* 区域标题 */
.im-create-group-section-label {
  font-size: .78rem;
  color: var(--text-muted);
  padding: 14px 16px 6px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* 已选成员横向滚动条 */
.im-create-group-selected-bar {
  display: none;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.im-create-group-tag {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-muted);
  border-radius: 20px;
  padding: 3px 8px 3px 4px;
  font-size: .8rem;
}
.im-create-group-tag-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.im-create-group-tag-name {
  max-width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}
.im-create-group-tag-del {
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}
.im-create-group-tag-del:active { color: var(--text); }

/* 联系人多选列表 */
.im-create-group-member-list {
  background: var(--bg);
}
.im-create-group-member-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .1s;
}
.im-create-group-member-item:active { background: var(--bg-hover); }

/* 勾选框 */
.im-create-group-check-wrap {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.im-create-group-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, border-color .15s;
  flex-shrink: 0;
}
.im-create-group-check.checked {
  background: var(--im-green);
  border-color: var(--im-green);
}
.im-create-group-check.checked::after {
  content: '';
  display: block;
  width: 6px;
  height: 10px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg) translateY(-1px);
}

.im-create-group-member-name {
  font-size: .95rem;
  color: var(--text);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── @ 提及面板（插在 im-input-bar 内，absolute 紧贴其上方） ── */
.im-at-panel {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  max-height: 220px;
  overflow-y: auto;
  background: var(--bg);
  border-top: 1px solid var(--border);
  box-shadow: 0 -2px 8px rgba(0,0,0,.08);
  z-index: 200;
}
.im-at-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background .12s;
}
.im-at-item:active,
.im-at-item:hover { background: var(--bg-hover); }
.im-at-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--im-avatar-radius);
  flex-shrink: 0;
  color: #fff;
  font-size: .9rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.im-at-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  border-radius: inherit;
}
.im-at-avatar .im-avatar-letter {
  position: relative;
  z-index: 0;
}
.im-at-name {
  font-size: .95rem;
  color: var(--text);
}

/* 会话列表 @我 标记 */
.im-conv-preview-at {
color: #ff3b30;
font-weight: 500;
}
.im-conv-badges {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
.im-conv-at-me {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 4px;
border-radius: 9px;
background: #ff3b30;
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  margin-left: 4px;
  flex-shrink: 0;
}

/* @ 提及高亮（气泡内） */
.im-at-mention {
  color: #007aff;
  font-weight: 500;
}
.im-at-mention.im-at-me {
  color: #fff;
  background: #007aff;
  border-radius: 4px;
  padding: 1px 5px;
  line-height: 1.4;
  display: inline-block;
  vertical-align: baseline;
}
.im-msg-row.me .im-at-mention { color: #005bbf; }
.im-msg-row.me .im-at-mention.im-at-me {
  background: rgba(0,0,0,.18);
  color: #fff;
}

/* 夜间模式：@ 提及降低亮度，避免刺眼 */
.dark .im-at-mention {
  color: #5b9cf6;
}
.dark .im-at-mention.im-at-me {
  background: rgba(82, 130, 220, 0.30);
  color: #a8c8ff;
  border: 1px solid rgba(82, 130, 220, 0.45);
}
.dark .im-msg-row.me .im-at-mention {
  color: #a8c8ff;
}
.dark .im-msg-row.me .im-at-mention.im-at-me {
  background: rgba(0, 0, 0, .28);
  color: #c8dcff;
  border: 1px solid rgba(255,255,255,.12);
}

/* @ 点击弹出的用户头像气泡 */
.im-at-user-popup {
  position: fixed;
  z-index: 9999;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,.18);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 140px;
  pointer-events: none;
  opacity: 0;
  transform: scale(.92) translateY(6px);
  transition: opacity .15s ease, transform .15s ease;
}
html.dark .im-at-user-popup {
  background: #2c2c2e;
  box-shadow: 0 4px 24px rgba(0,0,0,.5);
  border: 1px solid rgba(255,255,255,.08);
}
.im-at-user-popup.show {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}
.im-at-user-popup-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: #e0e0e0;
}
html.dark .im-at-user-popup-avatar {
  background: #3a3a3c;
}
.im-at-user-popup-name {
  font-size: .88rem;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
}

/* ── 群详情视图 ── */
.im-group-detail-body {
  flex: 1;
  overflow-y: auto;
  /* navbar 是 position:absolute 脱离文档流，padding-top 撑开避免内容被遮住 */
  padding-top: var(--im-navbar-h);
  padding-bottom: calc(16px + var(--im-safe-bottom));
}
.im-group-detail-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 16px 20px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.im-group-detail-avatar {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  flex-shrink: 0;
}
.im-group-detail-avatar.group-avatar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--bg-muted);
  padding: 2px;
}
.im-group-detail-avatar.group-avatar .ga-cell {
  overflow: hidden;
  border-radius: 2px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: .55rem;
  font-weight: 700;
  position: relative;
  aspect-ratio: 1;
}
.im-group-detail-avatar.group-avatar .ga-cell img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  border-radius: inherit;
}
.im-group-detail-avatar.group-avatar .ga-cell .im-avatar-letter {
  position: relative;
  z-index: 0;
}
.im-group-detail-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.im-group-detail-id {
  font-size: .82rem;
  color: var(--text-dimmed);
}
.im-group-detail-member-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px 8px;
  padding: 14px 16px;
  background: var(--bg);
  margin-top: 1px;
}
.im-group-detail-member-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.im-group-detail-member-avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--im-avatar-radius);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.im-group-detail-member-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  border-radius: inherit;
}
.im-group-detail-member-avatar .im-avatar-letter {
  position: relative;
  z-index: 0;
}
.im-group-detail-member-name {
  font-size: .72rem;
  color: var(--text-muted);
  max-width: 54px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

/* ── 群详情成员列表：机器人 tag ── */
.im-group-member-bot-tag {
  display: inline-block;
  padding: 0px 5px;
  border-radius: 8px;
  font-size: .6rem;
  font-weight: 500;
  color: #6366f1;
  background: rgba(99,102,241,.1);
  border: 1px solid rgba(99,102,241,.25);
  white-space: nowrap;
  line-height: 1.6;
  margin-top: -2px;
}
html.dark .im-group-member-bot-tag {
  color: #a5b4fc;
  background: rgba(99,102,241,.18);
  border-color: rgba(99,102,241,.35);
}

/* ── 群详情：移除成员按钮（右上角红色 - 号） ── */
.im-group-kick-btn {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid #fff;
  background: #ef4444;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 2;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
html.dark .im-group-kick-btn { border-color: var(--bg-muted); }
.im-group-kick-btn:active { transform: scale(.9); }
.im-group-detail-member-item { position: relative; }

/* ── 消息气泡群主标签 ── */
.im-owner-tag {
  display: inline-flex;
  align-items: center;
  font-size: .62rem;
  font-weight: 600;
  color: #b45309;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border: 1px solid #f59e0b;
  border-radius: 3px;
  padding: 0 4px;
  line-height: 1.7;
  margin-right: 4px;
  vertical-align: middle;
  white-space: nowrap;
  flex-shrink: 0;
}
html.dark .im-owner-tag {
  color: #fbbf24;
  background: linear-gradient(135deg, #451a03, #78350f);
  border-color: #92400e;
}
/* ── 消息气泡发送者名字行：机器人标签 ── */
.im-msg-bot-tag {
  display: inline-flex;
  align-items: center;
  font-size: .62rem;
  font-weight: 600;
  color: #6366f1;
  background: rgba(99,102,241,.1);
  border: 1px solid rgba(99,102,241,.25);
  border-radius: 3px;
  padding: 0 4px;
  line-height: 1.7;
  margin-right: 4px;
  vertical-align: middle;
  white-space: nowrap;
  flex-shrink: 0;
}
html.dark .im-msg-bot-tag {
  color: #a5b4fc;
  background: rgba(99,102,241,.18);
  border-color: rgba(99,102,241,.35);
}

/* ── 频道消息机器人来源标签 ── */
.im-bot-source-tag {
  margin-top: 4px;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: .75rem;
  color: #6366f1;
  background: rgba(99,102,241,.08);
  border: 1px solid rgba(99,102,241,.18);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  max-width: 100%;
  line-height: 1.5;
  animation: im-translate-in .2s ease-out;
}
html.dark .im-bot-source-tag {
  color: #a5b4fc;
  background: rgba(99,102,241,.15);
  border-color: rgba(99,102,241,.3);
}

/* ── 群详情成员头像容器（支持皇冠角标） ── */
.im-group-detail-member-avatar-wrap {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}
.im-group-detail-member-avatar-wrap .im-group-detail-member-avatar {
  width: 100%;
  height: 100%;
}
.im-group-crown {
  display: inline-flex;
  align-items: center;
  font-size: .62rem;
  font-weight: 600;
  color: #c2410c;
  background: rgba(234,88,12,.1);
  border: 1px solid rgba(234,88,12,.3);
  border-radius: 3px;
  padding: 0 4px;
  line-height: 1.7;
  margin-right: 4px;
  vertical-align: middle;
  white-space: nowrap;
  flex-shrink: 0;
}
html.dark .im-group-crown {
  color: #fb923c;
  background: rgba(234,88,12,.18);
  border-color: rgba(234,88,12,.4);
}
/* 群详情成员：可点击跳转详情的成员项 */
.im-group-member-clickable {
  cursor: pointer;
}
.im-group-member-clickable:active .im-group-detail-member-avatar {
  opacity: 0.7;
}

/* ── 群名 + 编辑按钮行 ── */
.im-group-detail-name-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.im-group-rename-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--text-dimmed);
  transition: background .15s, color .15s;
  flex-shrink: 0;
}
.im-group-rename-btn:active,
.im-group-rename-btn:hover {
  background: var(--bg-hover);
  color: var(--text-muted);
}

/* ── 改名弹窗 ── */
.im-rename-group-body {
  flex: 1;
  overflow-y: auto;
  /* navbar 是 position:absolute 脱离文档流，padding-top 撑开避免内容被遮住 */
  padding-top: var(--im-navbar-h);
  padding-bottom: calc(16px + var(--im-safe-bottom));
}
.im-rename-group-hint {
  font-size: .78rem;
  color: var(--text-dimmed);
  padding: 8px 20px 0;
}

/* ── 邀请成员按钮（群详情成员行右侧） ── */
.im-group-invite-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding: 4px 10px;
  border-radius: 14px;
  font-size: .78rem;
  font-weight: 500;
  color: var(--accent);
  background: var(--bg-hover);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  flex-shrink: 0;
  line-height: 1.5;
}
.im-group-invite-btn svg {
  flex-shrink: 0;
  opacity: .85;
}
.im-group-invite-btn:hover,
.im-group-invite-btn:active {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: var(--accent);
  color: var(--accent);
}
html.dark .im-group-invite-btn {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
}
html.dark .im-group-invite-btn:hover,
html.dark .im-group-invite-btn:active {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border-color: var(--accent);
}

/* ── 邀请列表里机器人小标签 ── */
.im-invite-bot-tag {
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 10px;
  font-size: .68rem;
  font-weight: 500;
  color: #6366f1;
  background: rgba(99,102,241,.1);
  border: 1px solid rgba(99,102,241,.25);
  white-space: nowrap;
  flex-shrink: 0;
}
html.dark .im-invite-bot-tag {
  color: #a5b4fc;
  background: rgba(99,102,241,.18);
  border-color: rgba(99,102,241,.35);
}

/* ── 群详情：危险操作区（解散群聊） ── */
.im-group-detail-danger-zone {
  margin: 20px 16px 24px;
  padding-top: 16px;
  border-top: 1px solid var(--border, rgba(0,0,0,.08));
}
html.dark .im-group-detail-danger-zone {
  border-top-color: rgba(255,255,255,.08);
}

.im-group-dismiss-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1.5px solid rgba(239,68,68,.35);
  background: rgba(239,68,68,.06);
  color: #ef4444;
  font-size: .92rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, border-color .15s, opacity .15s;
}
.im-group-dismiss-btn:hover,
.im-group-dismiss-btn:active {
  background: rgba(239,68,68,.13);
  border-color: rgba(239,68,68,.6);
}
.im-group-dismiss-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}
html.dark .im-group-dismiss-btn {
  background: rgba(239,68,68,.1);
  border-color: rgba(239,68,68,.28);
}
html.dark .im-group-dismiss-btn:hover,
html.dark .im-group-dismiss-btn:active {
  background: rgba(239,68,68,.2);
  border-color: rgba(239,68,68,.5);
}

/* ════════════════════════════════════
   开屏动画 #im-splash
   ════════════════════════════════════ */
#im-splash {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  /* 进入时淡出用 */
  transition: opacity .45s ease, visibility .45s ease;
}
#im-splash.im-splash-hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
/* 深色模式用深色背景 */
html.dark #im-splash {
  background: #1a1a1a;
}

.im-splash-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  animation: im-splash-in .55s cubic-bezier(.22,1,.36,1) both;
}

/* Logo 图标轻微上浮进场 */
.im-splash-logo {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(7,193,96,.25);
}
.im-splash-logo svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* 主标题 */
.im-splash-title {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: #07c160;
  line-height: 1;
}

/* Slogan */
.im-splash-slogan {
  font-size: .95rem;
  font-weight: 400;
  color: #888;
  letter-spacing: .06em;
}
html.dark .im-splash-slogan {
  color: #aaa;
}

@keyframes im-splash-in {
  from {
    opacity: 0;
    transform: translateY(18px) scale(.92);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ════════════════════════════════════
   小程序列表页
   ════════════════════════════════════ */

/* 搜索栏（复用 .im-search-bar 风格但独立） */
.im-miniapp-search-bar {
  /* navbar 是 position:absolute 脱离文档流，margin-top 撑开避免被遮住 */
  margin-top: var(--im-navbar-h);
  padding: 8px 12px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.im-miniapp-search-bar .im-search-inner {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--im-input-bg);
  border-radius: 8px;
  padding: 7px 10px;
  color: var(--text-muted);
}
.im-miniapp-search-bar input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-size: 14px;
  color: var(--text);
}
.im-miniapp-search-bar input::placeholder {
  color: var(--text-dimmed);
}

/* 分区 */
.im-miniapp-section {
  padding: 16px 12px 8px;
}
.im-miniapp-section-title {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
  margin-bottom: 14px;
  padding-left: 4px;
}

/* 九宫格 */
.im-miniapp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px 8px;
}
.im-miniapp-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.im-miniapp-item:active .im-miniapp-icon {
  opacity: .75;
  transform: scale(.93);
}
.im-miniapp-icon {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  transition: opacity .15s, transform .15s;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.im-miniapp-name {
  font-size: 12px;
  color: var(--text);
  text-align: center;
  line-height: 1.3;
  max-width: 64px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ════════════════════════════════════
   小程序全屏运行容器
   ════════════════════════════════════ */
.im-miniapp-view {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  background: #fff;

  /* 默认隐藏 */
  pointer-events: none;
  opacity: 0;
  transform: translateY(60px) scale(.98);
  transition: opacity .28s cubic-bezier(.4,0,.2,1),
              transform .28s cubic-bezier(.4,0,.2,1);
}
.im-miniapp-view.active {
  pointer-events: auto;
}
.im-miniapp-view.in {
  opacity: 1;
  transform: translateY(0) scale(1);
}
html.dark .im-miniapp-view {
  background: #000;
}

/* 顶部导航栏 */
.im-miniapp-navbar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(var(--im-navbar-h) + var(--im-safe-top));
  padding: var(--im-safe-top) 4px 0;
  background: var(--im-navbar-bg);
  border-bottom: 1px solid var(--border);
  flex: none;
  transition: background .2s, color .2s;
  z-index: 10;
}
.im-miniapp-close-btn,
.im-miniapp-more-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text);
  cursor: pointer;
  border-radius: 8px;
  -webkit-tap-highlight-color: transparent;
  flex: none;
}
.im-miniapp-close-btn:active,
.im-miniapp-more-btn:active {
  background: var(--bg-hover);
}
.im-miniapp-title {
  flex: 1;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 4px;
}

/* iframe 填满剩余空间 */
.im-miniapp-iframe {
  flex: 1;
  width: 100%;
  border: none;
  display: block;
  background: transparent;
}

/* ════════════════════════════════════
   私聊窗口（全新设计，独立于群聊）
   #im-pc-view
   ════════════════════════════════════ */

/* ── 窗口容器：全屏固定 ── */
.im-pc-view {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;  /* 不用 inset，iOS 更可靠 */
  z-index: 9000;
  background: var(--im-bg);
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  will-change: transform;
  pointer-events: none;
  isolation: isolate;
  /* 不用 flex，子元素全用绝对定位，彻底规避 iOS flex 高度 bug */
}
.im-pc-view.open {
  transform: translateX(0);
  pointer-events: auto;
}

/* ── 顶部导航栏：绝对定位 pin 到顶部 ── */
.im-pc-navbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--im-navbar-h);
  display: flex;
  align-items: center;
  padding: 0 4px;
  background: var(--im-navbar-bg);
  border-bottom: 1px solid var(--border);
  z-index: 2;
  box-sizing: border-box;
}
.im-pc-back-btn,
.im-pc-more-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: none;
  background: none;
  color: var(--text);
  border-radius: 8px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .12s;
}
.im-pc-back-btn:active,
.im-pc-more-btn:active { background: var(--bg-hover); }

/* 中央：头像 + 名字 */
.im-pc-navbar-mid {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 8px;
  -webkit-tap-highlight-color: transparent;
  transition: background .12s;
}
.im-pc-navbar-mid:active { background: var(--bg-hover); }

/* 对方头像 */
.im-pc-navbar .im-pc-av {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #fff;
  font-size: .85rem;
  font-weight: 700;
}
.im-pc-av-letter { pointer-events: none; }

/* 名字行 */
.im-pc-navbar-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  align-items: center;
}
.im-pc-title {
  font-size: .98rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
  line-height: 1.25;
}
.im-pc-status {
  font-size: .66rem;
  color: var(--im-green);
  line-height: 1.2;
}
.im-pc-status:empty { display: none; }

/* ── 消息滚动区：绝对定位撑满 navbar 和 bar 之间 ── */
.im-pc-msgs {
  position: absolute;
  top: var(--im-navbar-h);   /* navbar 高度 */
  left: 0; right: 0;
  bottom: var(--im-pc-bar-h, 56px);  /* bar 高度（JS 动态更新或 CSS 变量） */
  overflow-y: scroll;        /* scroll 比 auto 在 iOS 更可靠 */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  padding: 12px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-sizing: border-box;
}

/* ── 消息行 ── */
.im-pc-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-bottom: 4px;
}
.im-pc-row-self  { flex-direction: row-reverse; }
.im-pc-row-other { flex-direction: row; }

/* 消息内头像（仅对方） */
.im-pc-row .im-pc-av {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #fff;
  font-size: .9rem;
  font-weight: 700;
  align-self: flex-end;
}

/* 内容区（气泡） */
.im-pc-content {
  display: flex;
  flex-direction: column;
  max-width: 68%;
}

/* 气泡通用 */
.im-pc-bubble {
  padding: 10px 13px;
  border-radius: 14px;
  font-size: .93rem;
  line-height: 1.5;
  word-break: break-word;
  white-space: pre-wrap;
  position: relative;
}

/* 自己的气泡：绿色 */
.im-pc-bubble-self {
  background: var(--im-green);
  color: #fff;
  border-bottom-right-radius: 4px;
}

/* 对方气泡：白/深背景 */
.im-pc-bubble-other {
  background: var(--bg-card, #fff);
  color: var(--text);
  border-bottom-left-radius: 4px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.dark .im-pc-bubble-other {
  background: #2c2c2e;
}

/* 图片消息 */
.im-pc-img {
  max-width: 220px;
  max-height: 280px;
  border-radius: 10px;
  display: block;
  object-fit: cover;
  cursor: zoom-in;
}
.im-pc-bubble-failed { opacity: .5; }

/* ── 时间分割线 ── */
.im-pc-time-sep {
  text-align: center;
  font-size: .72rem;
  color: var(--text-dimmed, #aaa);
  margin: 10px 0 6px;
  user-select: none;
}

/* ── 占位 / 加载 ── */
.im-pc-empty {
  text-align: center;
  color: var(--text-muted);
  font-size: .88rem;
  padding: 40px 0;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.im-pc-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 36px 0;
  color: var(--text-muted);
  font-size: .86rem;
}
.im-pc-top-loader {
  display: flex;
  justify-content: center;
  padding: 10px 0 4px;
}
.im-pc-no-more {
  text-align: center;
  font-size: .72rem;
  color: var(--text-dimmed, #bbb);
  padding: 8px 0 4px;
}

/* 加载 spinner */
.im-pc-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid var(--border);
  border-top-color: var(--im-green);
  border-radius: 50%;
  animation: im-pc-spin .7s linear infinite;
}
@keyframes im-pc-spin { to { transform: rotate(360deg); } }

/* ── 底部区域：绝对定位 pin 到底部，flex 列方向：面板在上，输入行在下 ── */
.im-pc-bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;   /* 面板在输入行上方自然展开 */
  background: var(--im-navbar-bg);
  border-top: 1px solid var(--border);
  z-index: 2;
  box-sizing: border-box;
}
/* 输入行 */
.im-pc-bar-row {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding: 8px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
}
.im-pc-textarea-wrap {
  flex: 1;
  background: var(--bg-muted, #f2f2f7);
  border-radius: 20px;
  padding: 8px 14px;
  min-height: 36px;
  display: flex;
  align-items: center;
}
.dark .im-pc-textarea-wrap {
  background: #2c2c2e;
}
.im-pc-input {
  width: 100%;
  border: none;
  background: transparent;
  resize: none;
  font-size: .94rem;
  color: var(--text);
  line-height: 1.45;
  outline: none;
  max-height: 120px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.im-pc-input::placeholder { color: var(--text-dimmed, #aaa); }
.im-pc-bar-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: none;
  background: none;
  color: var(--text-muted);
  border-radius: 50%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .12s, color .12s;
}
.im-pc-bar-btn:active { background: var(--bg-hover); }
.im-pc-send-btn {
  width: auto;
  padding: 0 14px;
  border-radius: 18px;
  height: 36px;
  background: var(--im-green);
  color: #fff;
  font-size: .9rem;
  font-weight: 600;
}
.im-pc-send-btn:active { background: #06ad56; }

/* ── 新消息提示条：在 bar 上方 12px ── */
#im-pc-new-hint {
position: absolute;
bottom: calc(var(--im-pc-bar-h, 56px) + 12px);
left: 50%;
transform: translateX(-50%) translateY(8px);
  background: var(--im-green);
  color: #fff;
  border-radius: 20px;
  padding: 6px 16px;
  font-size: .82rem;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  white-space: nowrap;
  z-index: 10;
  box-shadow: 0 2px 10px rgba(0,0,0,.2);
}
#im-pc-new-hint.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* ── 图片预览遮罩 ── */
#im-pc-img-preview {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(0,0,0,.92);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
#im-pc-img-preview.show {
  opacity: 1;
  pointer-events: auto;
}
#im-pc-img-preview-img {
  max-width: 96vw;
  max-height: 90vh;
  border-radius: 8px;
  object-fit: contain;
}

/* ── 私聊内的表情/更多面板：在 bar 内流式布局，不用绝对定位 ── */
#im-pc-view .im-pc-panel {
  position: static;    /* 流式布局，自然把 bar 高度擐起 */
  border-bottom: 1px solid var(--border);
}

/* PWA standalone 模式：输入行底部加安全区 */
@media (display-mode: standalone) {
  .im-pc-bar-row {
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }
}

/* ══════════════════════════════════════════════
   群详情 AI 工具区
   ══════════════════════════════════════════════ */
.im-group-ai-tools {
  margin: 16px 0 0;
  background: var(--bg-card, #fff);
  border-radius: 12px;
  overflow: hidden;
}
.dark .im-group-ai-tools {
  background: var(--bg-card, #1e1e1e);
}
.im-group-ai-tool-btn {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 14px 16px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: .95rem;
  color: var(--text-primary, #111);
  gap: 10px;
  text-align: left;
  border-bottom: 1px solid var(--border-light, rgba(0,0,0,.06));
  transition: background .15s;
}
.im-group-ai-tool-btn:last-child {
  border-bottom: none;
}
.im-group-ai-tool-btn:active {
  background: var(--bg-hover, rgba(0,0,0,.05));
}
.dark .im-group-ai-tool-btn {
  color: var(--text-primary, #eee);
  border-bottom-color: rgba(255,255,255,.06);
}
.dark .im-group-ai-tool-btn:active {
  background: rgba(255,255,255,.06);
}
.im-group-ai-tool-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
}
.im-group-ai-tool-label {
  flex: 1;
  font-weight: 500;
}
.im-group-ai-tool-arrow {
  color: var(--text-dimmed, #aaa);
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════
   群聊总结结果页
   ══════════════════════════════════════════════ */
.im-group-summary-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  padding-top: calc(var(--im-navbar-h) + 16px);
  -webkit-overflow-scrolling: touch;
}

/* 加载中 */
.im-group-summary-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 60px 0;
  color: var(--text-dimmed, #999);
  font-size: .9rem;
}

/* 元信息（基于N条消息） */
.im-group-summary-meta {
  font-size: .78rem;
  color: var(--text-dimmed, #999);
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-light, rgba(0,0,0,.06));
}
.dark .im-group-summary-meta {
  border-bottom-color: rgba(255,255,255,.07);
}

/* 总结正文 */
.im-group-summary-text {
  font-size: .93rem;
  line-height: 1.75;
  color: var(--text-primary, #222);
  white-space: pre-wrap;
  word-break: break-word;
}
.dark .im-group-summary-text {
  color: var(--text-primary, #e0e0e0);
}
.im-group-summary-text strong {
  color: var(--primary, #07c160);
  font-weight: 600;
}
.im-summary-bullet {
  color: var(--primary, #07c160);
  font-weight: 700;
  margin-right: 2px;
}
.im-summary-meta-inline {
  display: block;
  font-size: .75rem;
  color: var(--text-dimmed, #999);
  margin-top: 28px;
  padding-top: 12px;
  border-top: 1px solid var(--border-light, rgba(0,0,0,.06));
  text-align: left;
}
.dark .im-summary-meta-inline {
  border-top-color: rgba(255,255,255,.07);
}

/* 错误状态 */
.im-group-summary-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 60px 0;
  color: var(--text-dimmed, #999);
}
.im-group-summary-error svg {
  color: var(--text-dimmed, #bbb);
}
.im-group-summary-error p {
  font-size: .9rem;
  margin: 0;
}
.im-group-summary-retry {
  margin-top: 4px;
  padding: 7px 20px;
  border-radius: 20px;
  border: 1px solid var(--primary, #07c160);
  background: none;
  color: var(--primary, #07c160);
  font-size: .85rem;
  cursor: pointer;
}
.im-group-summary-retry:active {
  background: rgba(7,193,96,.08);
}

/* ══════════════════════════════════════════════
   好友申请页 z-index
   ══════════════════════════════════════════════ */
#im-friend-request-view { z-index: 9100; }

/* 好友申请页主体 */
.im-freq-body-wrap {
  flex: 1;
  overflow-y: auto;
  padding-top: var(--im-navbar-h);
  -webkit-overflow-scrolling: touch;
}
.im-freq-list {
  padding: 8px 0;
}

/* 申请条目 */
.im-freq-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-light, rgba(0,0,0,.05));
}
.dark .im-freq-item {
  border-bottom-color: rgba(255,255,255,.05);
}
.im-freq-avatar {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.im-freq-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.im-freq-body {
  flex: 1;
  min-width: 0;
}
.im-freq-name {
  font-size: .95rem;
  font-weight: 500;
  color: var(--text-primary, #111);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dark .im-freq-name {
  color: var(--text-primary, #eee);
}
.im-freq-remark {
  font-size: .8rem;
  color: var(--text-dimmed, #999);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.im-freq-time {
  font-size: .72rem;
  color: var(--text-dimmed, #bbb);
  margin-top: 3px;
}
.im-freq-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.im-freq-btn {
  padding: 6px 14px;
  border-radius: 18px;
  border: none;
  font-size: .82rem;
  cursor: pointer;
  font-weight: 500;
  transition: opacity .15s;
}
.im-freq-btn:disabled { opacity: .5; cursor: default; }
.im-freq-reject {
  background: var(--bg-hover, #f0f0f0);
  color: var(--text-secondary, #555);
}
.dark .im-freq-reject {
  background: rgba(255,255,255,.1);
  color: #ccc;
}
.im-freq-accept {
  background: var(--primary, #07c160);
  color: #fff;
}
.im-freq-accept:active { opacity: .8; }

/* ══════════════════════════════════════════════
   好友申请弹窗 (im-modal-mask / im-modal-box)
   ══════════════════════════════════════════════ */
.im-modal-mask {
  position: fixed;
  inset: 0;
  z-index: 99000;
  background: rgba(0,0,0,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
.im-modal-mask.open {
  opacity: 1;
  pointer-events: auto;
}
.im-modal-box {
  background: var(--bg-card, #fff);
  border-radius: 14px;
  padding: 24px 20px 18px;
  width: 100%;
  max-width: 320px;
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
}
.dark .im-modal-box {
  background: var(--bg-card, #1e1e1e);
}
.im-modal-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary, #111);
  margin-bottom: 6px;
}
.dark .im-modal-title { color: #eee; }
.im-modal-desc {
  font-size: .85rem;
  color: var(--text-dimmed, #888);
  margin-bottom: 14px;
}
.im-apply-remark-input {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  border: 1.5px solid var(--border, #e4e4e7);
  border-radius: 8px;
  font-size: .88rem;
  background: var(--bg-muted, #f4f4f5);
  color: var(--text-primary, #111);
  outline: none;
  resize: none;
  font-family: inherit;
  line-height: 1.5;
}
.dark .im-apply-remark-input {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  color: #eee;
}
.im-modal-btns {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.im-modal-btn {
  flex: 1;
  padding: 10px;
  border-radius: 8px;
  border: none;
  font-size: .92rem;
  font-weight: 500;
  cursor: pointer;
}
.im-modal-btn-cancel {
  background: var(--bg-hover, #f0f0f0);
  color: var(--text-secondary, #555);
}
.dark .im-modal-btn-cancel {
  background: rgba(255,255,255,.08);
  color: #ccc;
}
.im-modal-btn-confirm {
  background: var(--primary, #07c160);
  color: #fff;
}
.im-modal-btn-confirm:disabled { opacity: .6; cursor: default; }


/* ══════════════════════════════════════════════
   添加好友搜索页
   ══════════════════════════════════════════════ */

.im-add-friend-body {
  flex: 1;
  overflow-y: auto;
  /* navbar 是 position:absolute 脱离文档流，padding-top 撑开避免内容被遮住 */
  padding: calc(var(--im-navbar-h) + 12px) 16px 24px;
}

/* 搜索框行 */
.im-add-friend-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.im-add-friend-search-inner {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-secondary, #f4f4f4);
  border-radius: 10px;
  padding: 0 12px;
  height: 40px;
}
.dark .im-add-friend-search-inner {
  background: rgba(255,255,255,.08);
}
.im-add-friend-search-inner svg {
  flex-shrink: 0;
  opacity: .45;
}
#im-add-friend-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: .93rem;
  color: var(--text-primary, #111);
  outline: none;
  min-width: 0;
}
.dark #im-add-friend-input { color: #eee; }
#im-add-friend-input::placeholder { color: var(--text-tertiary, #aaa); }

.im-add-friend-search-btn {
  flex-shrink: 0;
  height: 40px;
  padding: 0 16px;
  background: var(--primary, #07c160);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: .92rem;
  font-weight: 500;
  cursor: pointer;
  transition: opacity .15s;
}
.im-add-friend-search-btn:disabled { opacity: .55; cursor: default; }

/* 提示文字 */
.im-add-friend-tip {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 40px 0;
  font-size: .9rem;
  color: var(--text-tertiary, #aaa);
}
.im-add-friend-tip--error { color: #ef4444; }

/* 用户卡片 */
.im-add-friend-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-color, #f0f0f0);
}
.dark .im-add-friend-card { border-color: rgba(255,255,255,.08); }

.im-add-friend-card-avatar {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  font-weight: 600;
  color: #fff;
  position: relative;
}
.im-add-friend-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}

.im-add-friend-card-info {
  flex: 1;
  min-width: 0;
}
.im-add-friend-card-name {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-primary, #111);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dark .im-add-friend-card-name { color: #eee; }
.im-add-friend-card-id {
  font-size: .8rem;
  color: var(--text-tertiary, #aaa);
  margin-top: 2px;
}

/* 操作按钮 */
.im-add-friend-card-action { flex-shrink: 0; }
.im-add-friend-action-btn {
  padding: 7px 16px;
  border-radius: 20px;
  border: none;
  font-size: .88rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity .15s;
}
.im-add-friend-action-btn--primary {
  background: var(--primary, #07c160);
  color: #fff;
}
.im-add-friend-action-btn--pending {
  background: var(--bg-hover, #e8e8e8);
  color: var(--text-secondary, #888);
}
.dark .im-add-friend-action-btn--pending {
  background: rgba(255,255,255,.1);
  color: #999;
}
.im-add-friend-action-btn--done {
  background: var(--bg-hover, #e8e8e8);
  color: var(--text-secondary, #888);
}
.dark .im-add-friend-action-btn--done {
  background: rgba(255,255,255,.1);
  color: #999;
}
.im-add-friend-action-btn:disabled { cursor: default; opacity: .8; }

/* ══════════════════════════════════════════
   个人信息编辑页（#im-profile-edit-view）
   ══════════════════════════════════════════ */
.im-profile-edit-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* navbar 是 position:absolute 脱离文档流，padding-top 撑开避免内容被遮住 */
  padding-top: var(--im-navbar-h);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* 头像区域 */
.im-profile-edit-avatar-section {
  display: flex;
  justify-content: center;
  padding: 28px 0 20px;
  background: var(--bg, #fff);
}
.dark .im-profile-edit-avatar-section { background: var(--bg-dark, #1c1c1e); }

.im-profile-edit-avatar-wrap {
  position: relative;
  display: inline-block;
}
.im-profile-edit-avatar {
  width: 80px;
  height: 80px;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 600;
  color: #fff;
  flex-shrink: 0;
}
.im-profile-edit-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* 表单分组间距 */
.im-profile-edit-group {
  margin-top: 12px;
}

/* 只读行 */
.im-profile-edit-cell-readonly {
  cursor: default;
}
.im-profile-edit-cell-readonly .im-cell-value.im-pe-readonly {
  font-size: .88rem;
  color: var(--text-tertiary, #aaa);
  text-align: right;
}

/* 可编辑行 */
.im-profile-edit-cell {
  align-items: center;
}
.im-profile-edit-cell .im-cell-label {
  flex-shrink: 0;
  width: 72px;
  color: var(--text-primary, #111);
  font-size: .92rem;
}
.dark .im-profile-edit-cell .im-cell-label { color: #e5e5e5; }

/* 行内 input */
.im-pe-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-size: .92rem;
  color: var(--text-primary, #111);
  text-align: right;
  padding: 0;
  line-height: 1.5;
  caret-color: var(--primary, #07c160);
}
.im-pe-input::placeholder {
  color: var(--text-tertiary, #c0c0c0);
  font-size: .85rem;
}
.dark .im-pe-input {
  color: #e5e5e5;
}
.dark .im-pe-input::placeholder {
  color: #555;
}

/* 保存按钮 */
.im-profile-edit-save-wrap {
  padding: 24px 16px 12px;
}
.im-profile-edit-save-btn {
  display: block;
  width: 100%;
  padding: 14px 0;
  background: var(--primary, #07c160);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: opacity .15s;
}
.im-profile-edit-save-btn:active { opacity: .8; }
.im-profile-edit-save-btn:disabled {
  opacity: .5;
  cursor: default;
}

/* ══════════════════════════════════════════════
   公开频道样式
   ══════════════════════════════════════════════ */

/* 频道会话列表头像 */
.im-conv-avatar.channel-avatar {
  background: linear-gradient(135deg, #ff9500, #ff6b00);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  flex-shrink: 0;
}
html.dark .im-conv-avatar.channel-avatar { background: linear-gradient(135deg, #cc7700, #bb5500); }

/* 公众号会话列表头像 */
.im-conv-avatar.official-avatar {
  background: linear-gradient(135deg, #10b981, #059669);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  flex-shrink: 0;
}
html.dark .im-conv-avatar.official-avatar { background: linear-gradient(135deg, #0d9668, #047857); }

/* 系统公众号会话列表头像（蓝色盾牌） */
.im-conv-avatar.system-official-avatar {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  flex-shrink: 0;
}
html.dark .im-conv-avatar.system-official-avatar { background: linear-gradient(135deg, #2563eb, #1d4ed8); }

/* 系统公众号与普通会话的分割线 */
.im-sys-divider {
  position: relative;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2px 0;
}
.im-sys-divider::before {
  content: '';
  position: absolute;
  left: 16px;
  right: 16px;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
}

/* 频道列表页主体 */
.im-channel-list-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-top: var(--im-navbar-h);
}

/* 单个频道列表项 */
.im-channel-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border, #f0f0f0);
  background: var(--bg-card, #fff);
}
html.dark .im-channel-item { border-color: rgba(255,255,255,.06); background: var(--bg-card, #1c1c1e); }
.im-channel-item:active { background: var(--bg-hover, #f5f5f5); }

.im-channel-item-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: linear-gradient(135deg, #ff9500, #ff6b00);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.im-channel-item-info {
  flex: 1;
  min-width: 0;
}
.im-channel-item-name {
  font-size: .95rem;
  font-weight: 600;
  color: var(--text-primary, #111);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 5px;
}
html.dark .im-channel-item-name { color: #eee; }
.im-channel-item-desc {
  font-size: .78rem;
  color: var(--text-tertiary, #999);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.im-channel-item-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.im-channel-item-actions button {
  padding: 5px 10px;
  border-radius: 16px;
  border: 1.5px solid;
  font-size: .78rem;
  font-weight: 500;
  cursor: pointer;
  transition: opacity .15s;
  white-space: nowrap;
}
.im-channel-item-actions button:active { opacity: .7; }
.im-channel-item-sub-btn {
  border-color: var(--primary, #07c160);
  color: var(--primary, #07c160);
  background: transparent;
}
.im-channel-item-unsub-btn {
  border-color: var(--border, #ddd);
  color: var(--text-secondary, #555);
  background: transparent;
}
html.dark .im-channel-item-unsub-btn { border-color: #555; color: #aaa; }
.im-channel-item-del-btn {
  border-color: #ef4444;
  color: #ef4444;
  background: transparent;
}
.im-channel-item-open-btn {
  border-color: var(--primary, #07c160);
  background: var(--primary, #07c160);
  color: #fff;
}

/* 频道消息行：无头像，左对齐 */
.im-channel-msg-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 4px 12px;
  gap: 0;
}
.im-channel-msg-row .im-msg-avatar-hidden {
  display: none;
}
.im-channel-msg-row .im-msg-col {
  max-width: 92%;
}
.im-channel-msg-row .im-bubble {
  border-radius: 4px 14px 14px 14px;
}

/* 频道创建弹层 */
.im-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 99000;
  background: rgba(0,0,0,.5);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.im-modal-sheet {
  background: var(--bg-card, #fff);
  border-radius: 18px 18px 0 0;
  width: 100%;
  max-width: 480px;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -4px 24px rgba(0,0,0,.12);
  animation: imSheetIn .25s cubic-bezier(.34,1.56,.64,1) both;
}
html.dark .im-modal-sheet { background: var(--bg-card, #1c1c1e); }
@keyframes imSheetIn {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.im-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--border, #f0f0f0);
}
html.dark .im-modal-header { border-color: rgba(255,255,255,.08); }
.im-modal-close {
  background: none;
  border: none;
  font-size: 1rem;
  color: var(--text-secondary, #888);
  cursor: pointer;
  padding: 4px 6px;
}
.im-modal-body { padding: 16px 18px; }
.im-modal-footer { padding: 8px 18px 16px; }

/* 表单行 */
.im-form-row { margin-bottom: 14px; }
.im-form-label {
  display: block;
  font-size: .82rem;
  color: var(--text-secondary, #666);
  margin-bottom: 5px;
}
html.dark .im-form-label { color: #aaa; }
.im-form-input,
.im-form-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1.5px solid var(--border, #e4e4e7);
  border-radius: 9px;
  font-size: .9rem;
  background: var(--bg-muted, #f8f8f8);
  color: var(--text-primary, #111);
  outline: none;
  font-family: inherit;
  transition: border-color .15s;
  resize: none;
}
.im-form-input:focus,
.im-form-textarea:focus { border-color: var(--primary, #07c160); }
html.dark .im-form-input,
html.dark .im-form-textarea {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  color: #eee;
}
.im-modal-btn-primary {
  display: block;
  width: 100%;
  padding: 13px 0;
  background: var(--primary, #07c160);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: .98rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: opacity .15s;
}
.im-modal-btn-primary:active { opacity: .8; }
.im-modal-btn-primary:disabled { opacity: .5; cursor: default; }

/* ── 引用回复 ── */
.im-reply-quote {
  border-left: 3px solid var(--primary, #07c160);
  background: rgba(0,0,0,.04);
  border-radius: 4px;
  padding: 4px 8px;
  margin-bottom: 4px;
  font-size: .8rem;
  line-height: 1.35;
  cursor: pointer;
  max-width: 100%;
  overflow: hidden;
}
html.dark .im-reply-quote { background: rgba(255,255,255,.06); }
.im-reply-name {
  color: var(--primary, #07c160);
  font-weight: 600;
  margin-right: 4px;
}
.im-reply-text {
  color: #888;
  word-break: break-all;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
html.dark .im-reply-text { color: #aaa; }

.im-reply-bar {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  background: rgba(0,0,0,.03);
  border-left: 3px solid var(--primary, #07c160);
  margin: 0 8px 2px;
  border-radius: 6px;
  gap: 8px;
}
html.dark .im-reply-bar { background: rgba(255,255,255,.06); }
.im-reply-bar-body {
  flex: 1;
  min-width: 0;
  font-size: .82rem;
  line-height: 1.3;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.im-reply-bar-name {
  color: var(--primary, #07c160);
  font-weight: 600;
  margin-right: 4px;
}
.im-reply-bar-text { color: #888; }
html.dark .im-reply-bar-text { color: #aaa; }
.im-reply-bar-close {
  flex-shrink: 0;
  background: none;
  border: none;
  font-size: 1.2rem;
  color: #999;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
}

.im-msg-highlight {
  animation: im-quote-flash .3s ease-in-out 2;
}
@keyframes im-quote-flash {
  0%, 100% { background: transparent; }
  50% { background: rgba(7,193,96,.12); }
}

/* ══ 语音 / 视频通话 ══ */
.im-rtc-overlay {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.im-rtc-overlay.im-rtc-video-mode {
  background: #000;
  backdrop-filter: none;
}
.im-rtc-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: #fff;
  text-align: center;
  padding: 40px 20px;
  position: relative;
  z-index: 2;
}
.im-rtc-video-mode .im-rtc-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px 20px 40px;
  background: linear-gradient(transparent, rgba(0,0,0,.6));
}
.im-rtc-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255,255,255,.1);
}
.im-rtc-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.im-rtc-name {
  font-size: 1.3rem;
  font-weight: 600;
}
.im-rtc-status {
  font-size: .9rem;
  color: rgba(255,255,255,.6);
}
.im-rtc-timer {
  font-size: 1.6rem;
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  letter-spacing: 2px;
}
.im-rtc-video-mode .im-rtc-timer {
  font-size: 1rem;
}
.im-rtc-actions {
  display: flex;
  gap: 32px;
  margin-top: 40px;
}
.im-rtc-video-mode .im-rtc-actions {
  margin-top: 20px;
}
.rtc-btn {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: none;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: opacity .15s;
}
.rtc-btn:active { opacity: .7; }
.rtc-btn-hangup { background: #e53935; }
.rtc-btn-reject { background: #e53935; }
.rtc-btn-accept { background: #43a047; }
.rtc-btn-mute   { background: rgba(255,255,255,.15); }
.rtc-btn-mute.rtc-btn-active { background: rgba(255,255,255,.35); }
.rtc-btn-cam    { background: rgba(255,255,255,.15); }
.rtc-btn-cam.rtc-btn-active { background: rgba(255,255,255,.35); }
.rtc-btn-flip   { background: rgba(255,255,255,.15); }
.rtc-btn-flip.rtc-btn-active { background: rgba(255,255,255,.35); }

@keyframes rtc-pulse {
  0% { box-shadow: 0 0 0 0 rgba(67,160,71,.5); }
  70% { box-shadow: 0 0 0 20px rgba(67,160,71,0); }
  100% { box-shadow: 0 0 0 0 rgba(67,160,71,0); }
}
.rtc-btn-accept { animation: rtc-pulse 1.5s infinite; }

/* 左上角最小化按钮（微信风格） */
.im-rtc-btn-minimize {
  position: absolute;
  top: max(env(safe-area-inset-top, 12px), 12px);
  left: 12px;
  z-index: 10;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.15);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background .15s;
}
.im-rtc-btn-minimize:active { background: rgba(255,255,255,.3); }

/* 视频区域 */
.im-rtc-video-area {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #000;
}
.im-rtc-remote-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.im-rtc-local-video {
  position: absolute;
  top: max(env(safe-area-inset-top, 12px), 12px);
  right: 12px;
  width: 100px;
  height: 140px;
  border-radius: 10px;
  object-fit: cover;
  background: #222;
  z-index: 5;
  box-shadow: 0 2px 12px rgba(0,0,0,.5);
  transform: scaleX(-1);
}

/* ── 通话小浮窗 ── */
.im-rtc-mini {
  position: fixed;
  right: 12px;
  bottom: 100px;
  z-index: 9600;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 22px;
  background: rgba(30,30,30,.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(0,0,0,.35);
  color: #fff;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  transition: box-shadow .2s;
}
.im-rtc-mini:active { box-shadow: 0 2px 8px rgba(0,0,0,.4); }

/* 视频模式浮窗 */
.im-rtc-mini.im-rtc-mini-video {
  padding: 0;
  border-radius: 10px;
  width: 90px;
  height: 130px;
  overflow: hidden;
  flex-direction: column;
  gap: 0;
}
.im-rtc-mini-remote-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.im-rtc-mini-video .im-rtc-mini-timer {
  position: absolute;
  bottom: 6px;
  left: 0;
  right: 0;
  text-align: center;
  text-shadow: 0 1px 4px rgba(0,0,0,.7);
}

/* 语音模式浮窗 */
.im-rtc-mini-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid #43a047;
  animation: rtc-mini-ring 2s ease-in-out infinite;
}
@keyframes rtc-mini-ring {
  0%, 100% { border-color: #43a047; }
  50%      { border-color: #81c784; }
}
.im-rtc-mini-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.im-rtc-mini-name {
  font-size: .8rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
}
.im-rtc-mini-timer {
  font-size: .7rem;
  color: #81c784;
  font-variant-numeric: tabular-nums;
  letter-spacing: 1px;
}

/* ════════════════════════════════════
   全局消息搜索
   ════════════════════════════════════ */
#im-msg-search-overlay {
  z-index: 200;
  flex-direction: column;
  background: var(--bg);
}
.im-msg-search-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 8px 4px;
  background: var(--im-navbar-bg);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  padding-top: max(env(safe-area-inset-top, 0px), 8px);
}
.im-msg-search-input-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--im-input-bg);
  border-radius: 8px;
  padding: 7px 10px;
  color: var(--text-dimmed);
}
.im-msg-search-input-wrap input {
  flex: 1;
  font-size: .9rem;
  color: var(--text);
  background: transparent;
  min-width: 0;
}
.im-msg-search-input-wrap input::placeholder { color: var(--text-dimmed); }
.im-msg-search-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.im-msg-search-hint {
  text-align: center;
  color: var(--text-dimmed);
  font-size: .85rem;
  padding: 48px 20px;
}
.im-msg-search-loading {
  display: flex;
  justify-content: center;
  padding: 24px 0;
}
.im-search-group {
  margin-bottom: 4px;
}
.im-search-group-title {
  padding: 10px 16px 4px;
  font-size: .75rem;
  font-weight: 600;
  color: var(--text-dimmed);
  display: flex;
  align-items: center;
  gap: 6px;
}
.im-search-type-tag {
  font-size: .65rem;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--im-input-bg);
  color: var(--text-dimmed);
  font-weight: 400;
}
.im-search-result-item {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .12s;
}
.im-search-result-item:active {
  background: var(--bg-hover);
}
.im-search-result-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.im-search-result-sender {
  font-size: .8rem;
  font-weight: 500;
  color: var(--text);
}
.im-search-result-time {
  font-size: .7rem;
  color: var(--text-dimmed);
  flex-shrink: 0;
}
.im-search-result-content {
  font-size: .85rem;
  color: var(--text-secondary, var(--text-dimmed));
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.im-search-highlight {
  background: #ffe082;
  color: #333;
  border-radius: 2px;
  padding: 0 1px;
}
:root.dark .im-search-highlight {
  background: #5c4813;
  color: #ffd54f;
}
@keyframes im-search-flash-anim {
  0%, 100% { background: transparent; }
  25%, 75% { background: rgba(7,193,96,.12); }
}
:root.dark .im-search-flash {
  animation: im-search-flash-anim-dark 2s ease;
}
@keyframes im-search-flash-anim-dark {
  0%, 100% { background: transparent; }
  25%, 75% { background: rgba(7,193,96,.15); }
}
.im-search-flash {
  animation: im-search-flash-anim 2s ease;
}
.im-conv-search-msg-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  font-size: .85rem;
  color: var(--primary, #07c160);
  cursor: pointer;
  border-top: 1px solid var(--border);
  transition: background .12s;
}
.im-conv-search-msg-link:active {
  background: var(--bg-hover);
}
.im-conv-search-msg-link svg {
  stroke: var(--primary, #07c160);
  flex-shrink: 0;
}

/* ════════════════════════════════════
   云盘（群晖 NAS）视图
   ════════════════════════════════════ */
.im-nas-view {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 7500;
  background: var(--im-bg);
  flex-direction: column;
  overflow: hidden;
}
.im-nas-view.active { display: flex; }

/* 顶部导航栏 */
.im-nas-navbar {
  display: flex;
  align-items: center;
  min-height: calc(var(--im-navbar-h, 44px) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) 4px 0;
  background: var(--im-navbar-bg);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  gap: 4px;
}
.im-nas-back-btn,
.im-nas-setting-btn {
  width: 40px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  border-radius: 8px;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.im-nas-back-btn:active,
.im-nas-setting-btn:active { background: var(--im-hover); }
.im-nas-navbar-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}
.im-nas-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
}
.im-nas-breadcrumb {
  font-size: .72rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  line-height: 1.3;
}

/* ── 登录界面 ── */
.im-nas-login {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 28px;
  overflow-y: auto;
  gap: 16px;
}
.im-nas-login-logo {
  width: 80px;
  height: 80px;
  border-radius: 20px;
  background: linear-gradient(135deg, #3a7bd5, #00d2ff);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.im-nas-login-title {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text);
}
.im-nas-login-form {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.im-nas-form-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.im-nas-form-item label {
  font-size: .8rem;
  font-weight: 500;
  color: var(--text-muted);
}
.im-nas-form-item input {
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--im-input-bg, var(--im-bg));
  color: var(--text);
  font-size: .95rem;
  outline: none;
  transition: border-color .15s;
  width: 100%;
  box-sizing: border-box;
}
.im-nas-form-item input:focus { border-color: #3a7bd5; }

/* QuickConnect ID 输入框 + 自动补全后缀 */
.im-nas-host-wrap {
  display: flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--im-input-bg, var(--im-bg));
  overflow: hidden;
  transition: border-color .15s;
}
.im-nas-host-wrap:focus-within { border-color: #3a7bd5; }
.im-nas-host-wrap input {
  flex: 1;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding-right: 4px;
}
.im-nas-host-suffix {
  font-size: .82rem;
  color: var(--text-muted);
  padding: 0 10px 0 2px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity .15s;
}
.im-nas-host-suffix.hidden { display: none; }
.im-nas-host-hint {
  font-size: .75rem;
  color: var(--text-dimmed);
  line-height: 1.4;
}

.im-nas-login-btn {
  height: 46px;
  border-radius: 12px;
  background: linear-gradient(135deg, #3a7bd5, #00d2ff);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .5px;
  margin-top: 4px;
  transition: opacity .15s;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
.im-nas-login-btn:active { opacity: .8; }
.im-nas-login-btn:disabled { opacity: .5; cursor: not-allowed; }
.im-nas-login-tip {
  font-size: .82rem;
  color: #fa5151;
  text-align: center;
  min-height: 18px;
}

/* ── 文件列表区 ── */
.im-nas-files {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.im-nas-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--im-navbar-bg);
}
.im-nas-sort-btns { display: flex; gap: 4px; }
.im-nas-sort-btn {
  padding: 4px 10px;
  border-radius: 8px;
  font-size: .8rem;
  color: var(--text-muted);
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.im-nas-sort-btn.active {
  background: rgba(58,123,213,.12);
  color: #3a7bd5;
  font-weight: 600;
}
.im-nas-view-btns { display: flex; gap: 2px; }
.im-nas-view-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.im-nas-view-btn.active {
  background: rgba(58,123,213,.12);
  color: #3a7bd5;
}

/* 文件列表滚动容器 */
.im-nas-file-list {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* 列表模式 */
.im-nas-file-list.list-mode .im-nas-file-item {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  gap: 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .1s;
  -webkit-tap-highlight-color: transparent;
}
.im-nas-file-list.list-mode .im-nas-file-item:active { background: var(--im-hover); }
.im-nas-file-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  line-height: 1;
}
.im-nas-file-icon img {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
}
.im-nas-file-info { flex: 1; min-width: 0; }
.im-nas-file-name {
  font-size: .9rem;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.im-nas-file-meta {
  font-size: .75rem;
  color: var(--text-muted);
  margin-top: 2px;
}
.im-nas-file-arrow { color: var(--text-dimmed); flex-shrink: 0; }

/* 网格模式 */
.im-nas-file-list.grid-mode {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  padding: 2px;
  align-content: start;
}
.im-nas-file-list.grid-mode .im-nas-file-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 4px 8px;
  gap: 6px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .1s;
  -webkit-tap-highlight-color: transparent;
}
.im-nas-file-list.grid-mode .im-nas-file-item:active { background: var(--im-hover); }
.im-nas-file-list.grid-mode .im-nas-file-icon { width: 56px; height: 56px; font-size: 2.2rem; }
.im-nas-file-list.grid-mode .im-nas-file-icon img { width: 56px; height: 56px; }
.im-nas-file-list.grid-mode .im-nas-file-name {
  font-size: .72rem;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
.im-nas-file-list.grid-mode .im-nas-file-meta,
.im-nas-file-list.grid-mode .im-nas-file-arrow { display: none; }

/* 空目录 / 加载中 */
.im-nas-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: var(--text-muted);
  font-size: .9rem;
  gap: 12px;
}
.im-nas-empty svg { opacity: .35; }

/* ── 设置弹层 ── */
.im-nas-setting-panel {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 10;
  display: flex;
  align-items: flex-end;
}
.im-nas-setting-inner {
  width: 100%;
  background: var(--im-bg);
  border-radius: 20px 20px 0 0;
  padding: 20px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.im-nas-setting-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  text-align: center;
}
.im-nas-setting-info {
  font-size: .85rem;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.6;
}
.im-nas-logout-btn {
  height: 46px;
  border-radius: 12px;
  background: #fa5151;
  color: #fff;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
}
.im-nas-setting-close {
  height: 46px;
  border-radius: 12px;
  background: var(--im-hover);
  color: var(--text);
  font-size: .95rem;
  font-weight: 500;
  cursor: pointer;
}

/* ── 图片/视频预览层 ── */
.im-nas-preview {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.im-nas-preview-close {
  position: absolute;
  top: calc(12px + env(safe-area-inset-top, 0px));
  right: 14px;
  z-index: 5;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0,0,0,.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.im-nas-preview-content {
  max-width: 100%;
  max-height: calc(100% - 80px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.im-nas-preview-content img,
.im-nas-preview-content video {
  max-width: 100vw;
  max-height: calc(100vh - 80px);
  object-fit: contain;
}
.im-nas-preview-name {
  position: absolute;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  left: 0; right: 0;
  text-align: center;
  color: rgba(255,255,255,.8);
  font-size: .82rem;
  padding: 0 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}