/* ============================================================
   DualStar · 微信 app
   4 tab 完整模拟微信：聊天 / 通讯录 / 发现 / 我
   ============================================================ */

.wechat-view {
  position: fixed;
  inset: 0;
  height: 100vh;
  height: 100lvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}

.wechat-shell {
  position: relative;
  width: var(--phone-w);
  height: var(--phone-h);
  max-height: 100vh;
  background: var(--bg);
  border-radius: var(--phone-radius);
  box-shadow:
    0 0 0 12px var(--bg-elevated),
    0 0 0 13px var(--border-strong),
    var(--shadow-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

@media (max-width: 768px) {
  .wechat-shell {
    width: 100vw;
    height: 100vh;
    height: 100lvh;
    border-radius: 0;
    box-shadow: none;
  }
}

/* —— 全屏模式 —— */
/* 基础样式已由 base.css 统一处理（窗口化） */

/* 平板/桌面端全屏模式：双栏布局 */
@media (min-width: 769px) {
  [data-display-mode="fullscreen"] .wechat-dual {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: row;
  }

  [data-display-mode="fullscreen"] .wechat-sidebar {
    width: 320px;
    min-width: 280px;
    max-width: 360px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border);
    background: var(--bg-elevated);
    overflow: hidden;
  }

  [data-display-mode="fullscreen"] .wechat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    background: var(--bg);
  }

  [data-display-mode="fullscreen"] .wechat-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 16px;
    color: var(--text-tertiary);
    background: var(--bg);
  }

  [data-display-mode="fullscreen"] .wechat-empty-icon {
    width: 80px;
    height: 80px;
    opacity: 0.3;
  }

  [data-display-mode="fullscreen"] .wechat-empty-text {
    font-size: 15px;
  }

  /* 侧栏头部 */
  [data-display-mode="fullscreen"] .wechat-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px 12px;
    padding-top: calc(16px + var(--safe-area-top, env(safe-area-inset-top, 0px)));
    border-bottom: 1px solid var(--border);
    background: var(--bg-glass);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    flex-shrink: 0;
  }

  [data-display-mode="fullscreen"] .wechat-sidebar-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
  }

  [data-display-mode="fullscreen"] .wechat-sidebar-left {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  [data-display-mode="fullscreen"] .wechat-sidebar-actions {
    display: flex;
    gap: 4px;
  }

  /* 侧栏 tab（底部导航） */
  [data-display-mode="fullscreen"] .wechat-sidebar-tabs {
    display: flex;
    gap: 2px;
    padding: 6px 8px;
    padding-bottom: calc(6px + var(--safe-area-bottom, env(safe-area-inset-bottom, 0px)));
    border-top: 1px solid var(--border);
    border-bottom: none;
    flex-shrink: 0;
    background: var(--bg-glass);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
  }

  [data-display-mode="fullscreen"] .wechat-sidebar-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px 4px;
    border-radius: var(--r-sm);
    font-size: 11px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--dur-fast);
  }

  [data-display-mode="fullscreen"] .wechat-sidebar-tab:hover {
    background: var(--surface);
  }

  [data-display-mode="fullscreen"] .wechat-sidebar-tab.active {
    background: var(--accent-soft);
    color: var(--accent-deep);
    font-weight: 500;
  }

  [data-display-mode="fullscreen"] .wechat-sidebar-tab svg {
    width: 20px;
    height: 20px;
  }

  /* 侧栏搜索 */
  [data-display-mode="fullscreen"] .wechat-sidebar-search {
    padding: 10px 12px;
    flex-shrink: 0;
  }

  /* 聊天列表 */
  [data-display-mode="fullscreen"] .wechat-sidebar-list {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
  }

  [data-display-mode="fullscreen"] .wx-chat-item {
    padding: 12px 16px;
  }

  [data-display-mode="fullscreen"] .wx-chat-item:hover {
    background: var(--surface);
  }

  [data-display-mode="fullscreen"] .wx-chat-item.active {
    background: var(--accent-soft);
  }

  [data-display-mode="fullscreen"] .wx-chat-item.active .wx-chat-name {
    color: var(--accent-deep);
  }

  /* 聊天区域最大宽度限制，保持可读性 */
  [data-display-mode="fullscreen"] .chat-messages {
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
  }

  [data-display-mode="fullscreen"] .chat-input-area {
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
  }

  [data-display-mode="fullscreen"] .chat-header {
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
    left: 0;
    right: 0;
  }
}

/* 桌面端更宽的侧栏 */
@media (min-width: 1200px) {
  [data-display-mode="fullscreen"] .wechat-sidebar {
    width: 360px;
    max-width: 400px;
  }
}

/* —— 顶部标题栏 —— */
.wx-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 8px;
  background: var(--bg-glass);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid var(--border);
  padding-top: calc(12px + var(--safe-area-top, env(safe-area-inset-top, 0px)));
  flex-shrink: 0;
}

.wx-header-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.5px;
}

.wx-header-actions {
  display: flex;
  gap: 4px;
}

.wx-header-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  cursor: pointer;
  transition: background var(--dur-fast);
}
.wx-header-btn:hover { background: var(--surface); }
.wx-header-btn:active { background: var(--surface-hover); }

/* —— 主体 —— */
.wx-body {
  flex: 1;
  overflow-y: auto;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* —— 搜索框 —— */
.wx-search {
  padding: 8px 16px;
  background: var(--bg);
  flex-shrink: 0;
}

.wx-search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--bg-soft);
  border-radius: var(--r-sm);
  color: var(--text-tertiary);
}

.wx-search-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  color: var(--text);
  font-family: var(--font-body);
}
.wx-search-input::placeholder {
  color: var(--text-tertiary);
}

/* —— 底部 tab 栏 —— */
.wx-tabbar {
  display: flex;
  background: var(--bg-glass);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border-top: 1px solid var(--border);
  padding: 6px 0 calc(6px + var(--safe-area-bottom, env(safe-area-inset-bottom, 0px)));
  flex-shrink: 0;
}

.wx-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 0;
  cursor: pointer;
  color: var(--text-tertiary);
  transition: color var(--dur-fast);
  position: relative;
}
.wx-tab.active {
  color: var(--accent-deep);
}
.wx-tab:active { transform: scale(0.95); }

.wx-tab-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  filter: saturate(0.85);
}
.wx-tab.active .wx-tab-icon {
  filter: saturate(1);
}

.wx-tab-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.3px;
}

.wx-tab-badge {
  position: absolute;
  top: 0;
  right: calc(50% - 24px);
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 1.5px solid var(--bg);
}
.wx-tab-badge.hidden { display: none; }

/* —— 空状态 —— */
.wx-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 24px;
  text-align: center;
  color: var(--text-tertiary);
}
.wx-empty-icon {
  width: 56px;
  height: 56px;
  margin-bottom: 16px;
  opacity: 0.3;
}
.wx-empty p {
  font-size: 14px;
  margin: 0 0 4px;
}
.wx-empty .micro {
  font-size: 12px;
  opacity: 0.7;
}

/* ============================================================
   Tab 1: 聊天列表
   ============================================================ */
.wx-chat-list {
  flex: 1;
  overflow-y: auto;
  background: var(--bg);
}

.wx-chat-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  transition: background var(--dur-fast);
}
.wx-chat-item:hover { background: var(--bg-soft); }
.wx-chat-item:active { background: var(--surface); }

.wx-chat-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--accent-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 500;
  flex-shrink: 0;
  overflow: hidden;
  filter: saturate(0.85);
}
.wx-chat-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wx-chat-info {
  flex: 1;
  min-width: 0;
}

.wx-chat-name {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0.3px;
}

.wx-chat-last {
  font-size: 12px;
  color: var(--text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wx-chat-last.is-draft {
  color: var(--danger);
}

.wx-chat-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

.wx-chat-time {
  font-size: 10px;
  color: var(--text-tertiary);
  letter-spacing: 0.2px;
}

.wx-chat-badge {
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}
.wx-chat-badge.plus {
  font-size: 9px;
}

.wx-chat-dot-mute {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-tertiary);
  opacity: 0.4;
}
.wx-chat-item.is-pinned {
  background: var(--wx-bg-soft, #f5f5f5);
}
.wx-chat-item.is-pinned:active {
  background: var(--wx-bg-soft-active, #e8e8e8);
}

/* —— 聊天列表长按菜单（底部弹窗） —— */
.wx-chat-sheet-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 200;
  transition: background 0.25s var(--ease-out);
  pointer-events: auto;
}
.wx-chat-sheet-overlay.active {
  background: rgba(0, 0, 0, 0.45);
}
.wx-chat-sheet-card {
  width: 100%;
  background: var(--bg-elevated);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: 8px 0 calc(12px + var(--safe-area-bottom, env(safe-area-inset-bottom, 0px)));
  transform: translateY(100%);
  transition: transform 0.25s var(--ease-out);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
}
.wx-chat-sheet-overlay.active .wx-chat-sheet-card {
  transform: translateY(0);
}
.wx-chat-sheet-title {
  text-align: center;
  font-size: 12px;
  color: var(--text-tertiary);
  padding: 8px 16px 12px;
  border-bottom: 1px solid var(--border);
  letter-spacing: 0.3px;
}
.wx-chat-sheet-list {
  padding: 4px 0;
}
.wx-chat-sheet-item {
  padding: 14px 20px;
  font-size: 16px;
  color: var(--text);
  text-align: center;
  cursor: pointer;
  letter-spacing: 0.3px;
  transition: background var(--dur-fast);
}
.wx-chat-sheet-item:hover { background: var(--bg-soft); }
.wx-chat-sheet-item:active { background: var(--surface); }
.wx-chat-sheet-item.danger { color: var(--danger); }
.wx-chat-sheet-cancel {
  margin: 8px 12px 0;
  padding: 14px;
  text-align: center;
  font-size: 16px;
  color: var(--text);
  background: var(--bg);
  border-radius: var(--r-md);
  cursor: pointer;
  letter-spacing: 0.3px;
  transition: background var(--dur-fast);
  font-weight: 500;
}
.wx-chat-sheet-cancel:hover { background: var(--bg-soft); }
.wx-chat-sheet-cancel:active { background: var(--surface); }

/* ============================================================
   Tab 2: 通讯录
   ============================================================ */
.wx-contact-scroll {
  flex: 1;
  overflow-y: auto;
  background: var(--bg);
}

.wx-contact-quick {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 8px 0;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
}

/* 新的朋友横条 */
.wx-contact-new-friend-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-elevated);
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background var(--dur-fast);
}
.wx-contact-new-friend-bar:active { background: var(--bg-soft); }
.wx-contact-new-friend-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  background: #888;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  filter: saturate(0.85);
  flex-shrink: 0;
}
.wx-contact-new-friend-text {
  font-size: 15px;
  color: var(--text);
}
/* —— 聊天列表状态标签（非好友 / 已拉黑）—— */
.wx-chat-status-tag {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: var(--r-xs, 4px);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.5;
  vertical-align: middle;
  white-space: nowrap;
}
.wx-chat-status-tag.tag-notfriend {
  background: rgba(250, 81, 81, 0.1);
  color: #fa5151;
  border: 1px solid rgba(250, 81, 81, 0.3);
}
.wx-chat-status-tag.tag-blocked {
  background: rgba(153, 153, 153, 0.15);
  color: var(--text-secondary, #999);
  border: 1px solid var(--border, #e5e5e5);
}
.wx-contact-badge {
  background: #fa5151;
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  margin-left: auto;
}

/* 通讯录三标签 */
.wx-contact-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
}
.wx-contact-tab {
  flex: 1;
  text-align: center;
  padding: 10px 0;
  font-size: 14px;
  color: var(--text-secondary);
  position: relative;
  cursor: pointer;
  transition: color var(--dur-fast);
}
.wx-contact-tab.active {
  color: var(--accent-deep);
  font-weight: 500;
}
.wx-contact-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 2px;
  background: var(--accent-deep);
  border-radius: 1px;
}

/* 好友列表平铺样式 */
.wx-contact-row-flat {
  padding: 10px 16px;
}
.wx-contact-row-info {
  flex: 1;
  min-width: 0;
}
.wx-contact-sig {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wx-quick-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 4px;
  cursor: pointer;
  transition: background var(--dur-fast);
}
.wx-quick-item:hover { background: var(--bg-soft); }

.wx-quick-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  filter: saturate(0.85);
}
.wx-quick-new { background: #888888; }
.wx-quick-group { background: #999999; }
.wx-quick-tag { background: #777777; }
.wx-quick-mp { background: #AAAAAA; }

.wx-quick-label {
  font-size: 11px;
  color: var(--text);
  letter-spacing: 0.2px;
}

.wx-contact-total {
  padding: 8px 16px;
  font-size: 11px;
  color: var(--text-tertiary);
  background: var(--bg);
  letter-spacing: 0.3px;
  border-bottom: 1px solid var(--border);
}

.wx-contact-group {
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
}

.wx-contact-letter {
  padding: 4px 16px;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-deep);
  background: var(--bg-soft);
  letter-spacing: 0.5px;
}

.wx-contact-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background var(--dur-fast);
  border-bottom: 1px solid var(--border);
}
.wx-contact-row:last-child { border-bottom: none; }
.wx-contact-row:hover { background: var(--bg-soft); }

.wx-contact-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--accent-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 500;
  flex-shrink: 0;
  overflow: hidden;
  filter: saturate(0.85);
}
.wx-contact-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wx-contact-name {
  font-size: 15px;
  color: var(--text);
  letter-spacing: 0.3px;
}

/* —— 联系人分组标题 —— */
.wx-contact-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-tertiary);
  letter-spacing: 0.5px;
  background: var(--bg);
}

.wx-contact-group-add {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: var(--r-sm);
  transition: background var(--dur-fast);
  line-height: 1;
}
.wx-contact-group-add:hover { background: var(--surface); color: var(--text); }
.wx-contact-group-add:active { background: var(--surface-hover); }

/* —— 联系人/群聊分组文件夹 —— */
.wx-contact-folder {
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
}
.wx-contact-folder:last-child { border-bottom: none; }

.wx-contact-folder-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background var(--dur-fast);
  user-select: none;
}
.wx-contact-folder-header:hover { background: var(--bg-soft); }

.wx-contact-folder-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  transition: transform 0.2s var(--ease-out);
  flex-shrink: 0;
}
.wx-contact-folder[data-collapsed="true"] .wx-contact-folder-arrow {
  transform: rotate(-90deg);
}

.wx-contact-folder-name {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0.3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wx-contact-folder-count {
  font-size: 12px;
  color: var(--text-tertiary);
  flex-shrink: 0;
}

.wx-contact-folder-manage {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--text-tertiary);
  cursor: pointer;
  border-radius: var(--r-sm);
  transition: background var(--dur-fast);
  flex-shrink: 0;
  line-height: 1;
}
.wx-contact-folder-manage:hover { background: var(--surface); color: var(--text); }

.wx-contact-folder-body {
  overflow: hidden;
}
.wx-contact-folder[data-collapsed="true"] .wx-contact-folder-body {
  display: none;
}
.wx-contact-folder-body .wx-contact-row {
  padding-left: 36px;
}

.wx-empty-mini {
  padding: 16px;
  text-align: center;
  font-size: 13px;
  color: var(--text-tertiary);
  background: var(--bg-elevated);
}

/* ============================================================
   Tab 3: 发现
   ============================================================ */
.wx-discover {
  padding: 8px 0 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  gap: 8px;
}

.wx-discover-group {
  background: var(--bg-elevated);
  border-radius: var(--r-md);
  margin: 0 12px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.wx-discover-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  position: relative;
  transition: background var(--dur-fast);
}
.wx-discover-row:hover { background: var(--bg-soft); }
.wx-discover-row:active { background: var(--surface); }

.wx-discover-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  filter: saturate(0.95);
}

.wx-discover-label {
  flex: 1;
  font-size: 15px;
  color: var(--text);
  letter-spacing: 0.3px;
}

.wx-discover-arrow {
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
}

.wx-discover-moments-avatar {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  position: relative;
  margin-left: auto;
  margin-right: -6px;
}
.wx-discover-moments-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--r-sm);
  display: block;
}
.wx-discover-moments-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--danger);
  border: 1.5px solid var(--bg-elevated);
  z-index: 2;
}

.wx-row-sep {
  height: 1px;
  background: var(--border);
  margin-left: 52px;
}

/* —— 朋友圈 feed：已迁移到 css/moments.css + js/moments.js，本节死代码已删除 —— */

/* —— 扫一扫 —— */
.wx-scan-viewer {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  max-width: 280px;
  margin: 0 auto;
  background: #1a1a1a;
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wx-scan-viewer video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wx-scan-frame {
  position: relative;
  width: 70%;
  height: 70%;
}
.wx-scan-corner {
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2px solid #fff;
}
.wx-scan-corner-tl { top: 0; left: 0; border-right: none; border-bottom: none; }
.wx-scan-corner-tr { top: 0; right: 0; border-left: none; border-bottom: none; }
.wx-scan-corner-bl { bottom: 0; left: 0; border-right: none; border-top: none; }
.wx-scan-corner-br { bottom: 0; right: 0; border-left: none; border-top: none; }
.wx-scan-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #5a7363, transparent);
  animation: wx-scan-move 2s ease-in-out infinite;
}
@keyframes wx-scan-move {
  0%, 100% { top: 0; }
  50% { top: calc(100% - 2px); }
}
.wx-scan-hint {
  position: absolute;
  bottom: 12px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}

/* —— 摇一摇 —— */
.wx-shake-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-deep);
  cursor: pointer;
  transition: background var(--dur-fast);
  filter: saturate(0.85);
}
.wx-shake-icon:hover { background: var(--surface-hover); }
.wx-shake-icon:active { transform: scale(0.95); }
@keyframes wx-shake-anim {
  0%, 100% { transform: translateX(0) rotate(0); }
  20% { transform: translateX(-8px) rotate(-8deg); }
  40% { transform: translateX(8px) rotate(8deg); }
  60% { transform: translateX(-6px) rotate(-6deg); }
  80% { transform: translateX(6px) rotate(6deg); }
}

/* —— 搜一搜 —— */
.wx-search-section-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  letter-spacing: 0.5px;
  padding: 8px 0 6px;
  text-transform: uppercase;
}
.wx-search-row {
  padding: 10px 12px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--dur-fast);
}
.wx-search-row:hover { background: var(--bg-soft); }
.wx-search-row:active { background: var(--surface); }
.wx-search-row-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 2px;
}
.wx-search-row-desc {
  font-size: 12px;
  color: var(--text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================
   Tab 4: 我
   ============================================================ */
.wx-me {
  flex: 1;
  overflow-y: auto;
  background: var(--bg-soft);
  padding-bottom: 32px;
}

/* —— 用户资料卡 —— */
.wx-me-profile {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 28px 20px 24px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--dur-fast);
  position: relative;
}
.wx-me-profile:hover { background: var(--bg-soft); }
.wx-me-profile:active { background: var(--surface); }

.wx-me-avatar {
  width: 64px;
  height: 64px;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--accent-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 500;
  flex-shrink: 0;
  overflow: hidden;
  filter: saturate(0.85);
}
.wx-me-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wx-me-info {
  flex: 1;
  min-width: 0;
}

.wx-me-nickname {
  font-size: 19px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
  letter-spacing: 0.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wx-me-id {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.wx-me-region {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-bottom: 6px;
}

.wx-me-status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-secondary);
}

.wx-me-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.wx-me-profile-arrow {
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
}

.wx-me-qr {
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
}

/* —— 服务卡片 —— */
.wx-me-card {
  padding: 8px 12px;
}

.wx-me-services {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wx-service-group {
  background: var(--bg-elevated);
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--border);
}

.wx-service-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  cursor: pointer;
  position: relative;
  transition: background var(--dur-fast);
}
.wx-service-row:hover { background: var(--bg-soft); }
.wx-service-row:active { background: var(--surface); }

.wx-service-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  filter: saturate(0.9);
}
.wx-service-pay { color: var(--text-secondary); }
.wx-service-star { color: var(--text-secondary); }
.wx-service-moments { color: var(--text-secondary); }
.wx-service-video { color: var(--text-secondary); }
.wx-service-card { color: var(--text-secondary); }
.wx-service-emoji { color: var(--text-secondary); }
.wx-service-settings { color: var(--text-secondary); }

.wx-service-label {
  flex: 1;
  font-size: 15px;
  color: var(--text);
  letter-spacing: 0.3px;
}

.wx-service-arrow {
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
}

.wx-service-mask { color: var(--text-secondary); }

.wx-service-value {
  font-size: 13px;
  color: var(--text-tertiary);
  margin-right: 4px;
}

.wx-me-mask-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  color: var(--accent);
  vertical-align: middle;
}
.wx-me-mask-badge svg { width: 13px; height: 13px; }

/* 面具快速切换器 */
.mask-switch-row {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background var(--dur-fast);
}
.mask-switch-row:hover { background: var(--bg-soft); }
.mask-switch-row:active { background: var(--surface); }

.mask-switch-avatar {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  overflow: hidden;
}
.mask-switch-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mask-switch-body {
  flex: 1;
  min-width: 0;
}
.mask-switch-name {
  font-size: 15px;
  color: var(--text);
  letter-spacing: 0.3px;
}
.mask-switch-fullname {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-left: 8px;
}
.mask-switch-desc {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mask-switch-action {
  flex-shrink: 0;
}
.mask-switch-on {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  color: var(--accent);
}
.mask-switch-on svg { width: 13px; height: 13px; }
.mask-switch-off {
  font-size: 13px;
  color: var(--text-tertiary);
  padding: 4px 12px;
  border-radius: 14px;
  background: var(--bg-soft);
}

/* ============================================================
   个人信息编辑浮层
   ============================================================ */
.wx-profile-editor {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}
.wx-profile-editor.active {
  opacity: 1;
  pointer-events: auto;
}

.wx-profile-sheet {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 420px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--dur-base) var(--ease-out);
}
.wx-profile-editor.active .wx-profile-sheet {
  transform: translateX(0);
}

.wx-profile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  background: var(--bg-glass);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid var(--border);
  padding-top: calc(14px + var(--safe-area-top, env(safe-area-inset-top, 0px)));
  flex-shrink: 0;
}

.wx-profile-back {
  width: 36px;
  height: 36px;
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  cursor: pointer;
}
.wx-profile-back:hover { background: var(--surface); }

.wx-profile-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.5px;
}

.wx-profile-save {
  font-size: 15px;
  color: var(--accent-deep);
  padding: 6px 12px;
  cursor: pointer;
  font-weight: 500;
}
.wx-profile-save:hover { opacity: 0.7; }

.wx-profile-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 16px 32px;
}

/* ============================================================
   群聊信息页（group-header-* / group-member-* / gm-*-tag）
   点击群聊右上角"更多"进入的群信息页面
   韩式黑白灰莫兰迪色系
   ============================================================ */

/* 群头部卡片：头像 + 名称 + 成员数 + 箭头 */
.group-header-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-elevated);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.group-header-card:hover {
  background: var(--bg-soft);
}
.group-header-avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--accent-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 600;
  flex-shrink: 0;
  overflow: hidden;
}
.group-header-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.group-header-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.group-header-meta {
  font-size: 12px;
  color: var(--text-tertiary);
  letter-spacing: 0.2px;
}
.group-header-arrow {
  color: var(--text-tertiary);
  font-size: 18px;
  flex-shrink: 0;
  font-family: Georgia, serif;
}

/* —— 群聊设置页通用样式 —— */
.gs-section-title {
  font-size: 13px;
  color: var(--text-tertiary);
  padding: 16px 16px 6px;
  font-weight: 500;
  letter-spacing: 0.3px;
}
.gs-section-card {
  background: var(--bg-elevated);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  overflow: hidden;
  margin: 0 12px;
}
.gs-hint {
  padding: 6px 16px 12px;
  font-size: 11px;
  color: var(--text-tertiary);
  line-height: 1.5;
}
.gs-disabled-hint {
  font-size: 11px;
  color: var(--text-tertiary);
  line-height: 1.5;
}

/* —— NPC 发言频率选择按钮 —— */
.gs-freq-options {
  display: flex;
  gap: 0;
  padding: 8px 16px 4px;
}
.gs-freq-btn {
  flex: 1;
  text-align: center;
  padding: 8px 4px;
  font-size: 13px;
  color: var(--text-secondary);
  background: var(--bg-soft);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
  border: 1px solid var(--border);
}
.gs-freq-btn:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.gs-freq-btn:last-child { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.gs-freq-btn + .gs-freq-btn { border-left: none; }
.gs-freq-btn:hover { background: var(--surface); }
.gs-freq-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  font-weight: 500;
}

/* —— 群聊设置滑块行 —— */
.gm-slider-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 16px 10px;
}
.gm-slider-label {
  font-size: 11px;
  color: var(--text-tertiary);
  flex-shrink: 0;
  min-width: 16px;
  text-align: center;
}
.gm-slider-value {
  font-size: 12px;
  color: var(--accent-deep);
  font-weight: 500;
  min-width: 40px;
  text-align: right;
  flex-shrink: 0;
}
.gm-range-input {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 2px;
  background: var(--border-strong);
  outline: none;
  cursor: pointer;
}
.gm-range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: transform var(--dur-fast);
}
.gm-range-input::-webkit-slider-thumb:active { transform: scale(1.2); }
.gm-range-input::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* —— 群聊快捷操作按钮 —— */
.gh-quick-actions {
  display: flex;
  gap: 8px;
}
.gh-quick-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 8px;
  background: var(--bg-elevated);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  cursor: pointer;
  font-size: 12px;
  color: var(--text-secondary);
  transition: all var(--dur-fast) var(--ease-out);
}
.gh-quick-btn:active { transform: scale(0.96); }
.gh-quick-btn:hover { background: var(--surface); }
.gh-quick-add { color: var(--accent-deep); }
.gh-quick-remove { color: #fa5151; }

/* 成员列表头像（全成员页） */
.am-member-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--accent-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 500;
  overflow: hidden;
  flex-shrink: 0;
  filter: saturate(0.85);
}
.am-member-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 成员角色徽章 */
.member-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: var(--r-xs);
  font-size: 10px;
  font-weight: 500;
  margin-left: 6px;
  vertical-align: middle;
  letter-spacing: 0.3px;
}
.member-badge.muted { background: #fff0f0; color: #fa5151; }

/* 颜色预设圆点 */
.mnc-preset:hover { transform: scale(1.1); }
.mnc-preset:active { transform: scale(0.95); }

/* 全成员页搜索栏 */
.all-members-search {
  padding: 10px 16px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
}
.all-members-search input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  outline: none;
  transition: border-color var(--dur-fast);
}
.all-members-search input:focus { border-color: var(--accent); }
.all-members-list {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* 群成员网格 */
.group-member-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-elevated);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
}
/* 单个成员项 */
.group-member-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out);
}
.group-member-item:active {
  transform: scale(0.95);
}
.group-member-avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--accent-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 500;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
}
.group-member-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.group-member-name {
  font-size: 11px;
  color: var(--text-secondary);
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0.2px;
}
.group-member-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3px;
  margin-top: -2px;
}

/* 成员标签（角色/头衔/禁言/NPC） */
.gm-role-tag,
.gm-title-tag,
.gm-muted-tag,
.gm-npc-tag {
  display: inline-flex;
  align-items: center;
  padding: 1px 5px;
  border-radius: var(--r-sm);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.3px;
  line-height: 1.4;
  white-space: nowrap;
}
/* 群主标签：深色徽章 */
.gm-role-tag.owner {
  background: var(--accent-deep);
  color: var(--bg-elevated);
}
/* 管理员标签：中灰徽章 */
.gm-role-tag.admin {
  background: var(--surface);
  color: var(--text);
}
/* 自定义头衔：边框样式 */
.gm-title-tag {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-strong);
}
/* 禁言标签：危险色弱化 */
.gm-muted-tag {
  background: var(--danger);
  color: var(--bg-elevated);
  opacity: 0.85;
}
/* NPC 标签：中性灰 */
.gm-npc-tag {
  background: var(--bg-soft);
  color: var(--text-tertiary);
}

.wx-profile-avatar-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  background: var(--bg-elevated);
  border-radius: var(--r-md);
  margin-bottom: 16px;
  border: 1px solid var(--border);
}

.wx-profile-avatar-label {
  flex: 1;
  font-size: 15px;
  color: var(--text);
}

.wx-profile-avatar-upload {
  width: 56px;
  height: 56px;
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  overflow: hidden;
  filter: saturate(0.85);
  transition: all var(--dur-fast);
}
.wx-profile-avatar-upload:hover {
  filter: saturate(1);
  transform: scale(1.02);
}
.wx-profile-avatar-upload.has-image {
  background: transparent;
}
.wx-profile-avatar-upload img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wx-profile-group {
  background: var(--bg-elevated);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  overflow: hidden;
}

.wx-profile-field {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.wx-profile-field:last-child { border-bottom: none; }

.wx-profile-field-label {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-bottom: 6px;
  letter-spacing: 0.5px;
}

.wx-profile-input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-size: 15px;
  color: var(--text);
  font-family: var(--font-body);
  padding: 0;
}
.wx-profile-input::placeholder {
  color: var(--text-tertiary);
}
.wx-profile-textarea {
  resize: vertical;
  min-height: 36px;
  line-height: 1.5;
}

.wx-profile-tip {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 16px;
  text-align: center;
  letter-spacing: 0.3px;
  line-height: 1.6;
}

/* ============================================================
   聊天界面
   ============================================================ */
.wechat-chat {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  /* position: relative 让悬浮球（.chat-float-ball）和面板（.chat-float-panel）
     以此为定位上下文，便于面板跟随悬浮球位置 */
  position: relative;
  overflow: hidden;
}

/* ============================================================
   聊天顶部状态横幅（chat-block-banner）
   非好友 / 拉黑 / 好友申请等待 等场景的提示横幅
   韩式黑白灰莫兰迪色系：低饱和度、左侧色条、柔和背景
   ============================================================ */

/* 横幅容器：flex 行，左侧色条强调 */
.chat-block-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 10px 16px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
  position: relative;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
  flex-shrink: 0;
  /* 左侧色条：莫兰迪柔和强调 */
}
.chat-block-banner::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--accent);
}

/* 感叹号图标：圆形 18px，背景填充 */
.banner-excl {
  width: 18px;
  height: 18px;
  border-radius: var(--r-full);
  background: var(--accent);
  color: var(--bg-elevated);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  font-family: Georgia, 'Times New Roman', serif;
  line-height: 1;
}

/* 横幅中的操作按钮（申请添加好友 / 取消拉黑） */
.banner-action {
  margin-left: auto;
  padding: 5px 12px;
  border: none;
  border-radius: var(--r-full);
  background: var(--accent-deep);
  color: var(--bg-elevated);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.3px;
  cursor: pointer;
  flex-shrink: 0;
  font-family: inherit;
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}
.banner-action:hover {
  background: var(--accent);
  transform: translateY(-1px);
}
.banner-action:active {
  transform: translateY(0);
  opacity: 0.85;
}

/* —— 横幅变体：不同场景的色彩区分（莫兰迪低饱和） —— */

/* 非好友横幅：中性灰，弱提示 */
.not-friend-banner {
  background: var(--bg-soft);
  color: var(--text-secondary);
}
.not-friend-banner::before {
  background: var(--text-tertiary);
}
.not-friend-banner .banner-excl {
  background: var(--text-tertiary);
  color: var(--bg-elevated);
}

/* 对方拉黑用户：暖灰偏冷，温和警示 */
.char-blocked-user {
  background: var(--surface);
  color: var(--text-secondary);
}
.char-blocked-user::before {
  background: var(--text-secondary);
}
.char-blocked-user .banner-excl {
  background: var(--text-secondary);
  color: var(--bg-elevated);
}

/* 用户拉黑对方：稍带暖意，区分主动行为 */
.user-blocked-char {
  background: var(--bg-soft);
  color: var(--text-secondary);
}
.user-blocked-char::before {
  background: var(--accent-deep);
}
.user-blocked-char .banner-excl {
  background: var(--accent-deep);
  color: var(--bg-elevated);
}

/* ============================================================
   系统消息（msg-system / msg-system-block）
   居中显示的小型系统提示，如"XX 撤回了一条消息"、
   "消息发送失败"等。莫兰迪柔和、低对比
   ============================================================ */

/* 群聊中的普通系统消息（message-system） */
.message-system {
  align-self: center;
  font-size: 11px;
  color: var(--text-tertiary);
  background: var(--bg-soft);
  padding: 4px 10px;
  border-radius: var(--r-sm);
  margin: 6px 0;
  letter-spacing: 0.3px;
  text-align: center;
  max-width: 80%;
  word-break: break-word;
  line-height: 1.4;
}

/* 单聊中的系统消息块（msg-system-block） */
.msg-system-block {
  display: flex;
  justify-content: center;
  margin: 6px 0;
}
.msg-system-block-inner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-tertiary);
  background: var(--bg-soft);
  padding: 4px 10px;
  border-radius: var(--r-sm);
  letter-spacing: 0.3px;
  text-align: center;
  max-width: 80%;
  word-break: break-word;
  line-height: 1.4;
}

/* 系统消息中的感叹号图标（错误提示用） */
.msg-system-block-inner .excl-icon {
  width: 14px;
  height: 14px;
  border-radius: var(--r-full);
  background: var(--danger);
  color: var(--bg-elevated);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
  font-family: Georgia, 'Times New Roman', serif;
  line-height: 1;
}

/* 错误系统消息：轻微强调，但仍保持莫兰迪柔和 */
.msg-system-block-inner.has-error {
  background: var(--surface);
  color: var(--text-secondary);
}

.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  background: var(--bg-glass);
  backdrop-filter: blur(20px) saturate(1.4);
  position: relative;
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid var(--border);
  /* iOS < 11.2 旧语法回退 */
  padding-top: calc(10px + constant(safe-area-inset-top, 0px));
  /* 标准 env() + JS 注入的 --safe-area-top 变量兜底（部分 iOS Safari env() 返回 0 → 名字/状态顶到屏幕最顶 = 用户反馈"怎么这么高"） */
  padding-top: calc(10px + var(--safe-area-top, env(safe-area-inset-top, 0px)));
  flex-shrink: 0;
}

.chat-header-name {
  flex: 1;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  text-align: center;
  letter-spacing: 0.3px;
}

.chat-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 10px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--bg);
  -webkit-overflow-scrolling: touch;
}

.message-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  position: relative;
  animation: msgIn 0.3s var(--ease-out);
  transition: transform 0.25s var(--ease-out);
}
.message-row.swipe-reply::after {
  content: '';
  position: absolute;
  left: -40px;
  top: 4px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 17 4 12 9 7'/%3E%3Cpath d='M20 18v-2a4 4 0 0 0-4-4H4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px;
  opacity: 0.85;
  pointer-events: none;
}

@keyframes msgIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.message-row.sent {
  flex-direction: row-reverse;
}

.message-avatar {
  width: 38px;
  height: 38px;
  border-radius: var(--wx-avatar-radius, var(--r-sm));
  background: var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-deep);
  font-size: 14px;
  font-weight: 500;
  flex-shrink: 0;
  overflow: hidden;
  filter: saturate(0.85);
}

.message-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.message-bubble {
  max-width: 70%;
  padding: 9px 14px;
  border-radius: 16px;
  font-size: calc(15px * var(--wx-font-scale, 1));
  line-height: 1.5;
  color: var(--text);
  word-wrap: break-word;
  white-space: pre-wrap;
  position: relative;
  transition: background 0.2s var(--ease-out), transform 0.15s var(--ease-out);
  letter-spacing: 0.1px;
}

.message-row.received .message-bubble {
  background: var(--wx-received-color, var(--wechat-received));
  color: var(--wx-received-font-color, var(--text));
  border-top-left-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.message-row.sent .message-bubble {
  background: var(--wx-sent-color, var(--wechat-sent));
  color: var(--wx-sent-font-color, #1A1A1A);
  border-top-right-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

:root[data-theme="dark"] .message-row.sent .message-bubble {
  color: var(--wx-sent-font-color, #F0F0F0);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .message-row.sent .message-bubble {
    color: var(--wx-sent-font-color, #F0F0F0);
  }
}

/* 连续消息收窄间距 */
.message-row + .message-row.sent,
.message-row + .message-row.received {
  margin-top: -4px;
}

/* 流式光标 */
.message-bubble.streaming::after {
  content: '▍';
  display: inline-block;
  animation: cursorBlink 0.8s steps(2) infinite;
  color: var(--text-secondary);
  margin-left: 2px;
}

@keyframes cursorBlink {
  50% { opacity: 0; }
}

.message-time {
  font-size: 10px;
  color: var(--text-tertiary);
  text-align: center;
  margin: 8px 0;
  letter-spacing: 0.3px;
}

/* 撤回消息提示 */
.message-recalled {
  text-align: center;
  font-size: 12px;
  color: var(--text-tertiary);
  margin: 8px 0;
  letter-spacing: 0.3px;
}

/* 时间胶囊（消息间隔 > 5 分钟时显示） */
.message-time-capsule {
  display: none;
  align-self: center;
  font-size: 11px;
  color: var(--text-tertiary);
  background: var(--bg-soft);
  padding: 3px 10px;
  border-radius: 4px;
  margin: 8px 0;
  letter-spacing: 0.3px;
}

/* 分页加载提示 */
.message-load-more {
  text-align: center;
  font-size: 11px;
  color: var(--text-tertiary);
  padding: 8px 0 4px;
  letter-spacing: 0.3px;
  opacity: 0.7;
}

/* 内联时间戳（气泡下方） */
.message-time-inline {
  display: none;
  font-size: 10px;
  color: var(--text-tertiary);
  margin-top: 2px;
  padding: 0 4px;
  letter-spacing: 0.2px;
}

/* 消息状态图标（仅 sent 消息） */
.message-status {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 4px;
  margin-top: 2px;
  color: var(--text-tertiary);
  opacity: 0.7;
}
.message-status-failed {
  color: var(--danger);
  opacity: 1;
  cursor: pointer;
}
.message-status-sending {
  opacity: 0.5;
  animation: msgStatusPulse 1.2s ease-in-out infinite;
}
@keyframes msgStatusPulse {
  50% { opacity: 0.3; }
}

/* ============================================================
   消息相关补充样式（修复线上聊天掉格式问题）
   以下类在 JS 中使用但之前缺失 CSS 定义，导致部分消息
   类型/状态显示异常。统一采用韩式黑白灰莫兰迪色系。
   ============================================================ */

/* —— 发送失败标记（被拉黑时显示红色感叹号） —— */
.msg-fail-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: var(--r-full);
  color: var(--danger);
  flex-shrink: 0;
  cursor: pointer;
  align-self: center;
  transition: transform var(--dur-fast) var(--ease-out);
}
.msg-fail-mark:hover {
  transform: scale(1.1);
}
.msg-fail-mark:active {
  transform: scale(0.95);
}

/* —— 撤回消息可点击查看详情 —— */
.message-recalled.clickable-recalled,
.clickable-recalled {
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}
.clickable-recalled:hover {
  color: var(--text-secondary);
}

/* —— 群聊发言人名字（message-speaker 的群聊变体） —— */
.group-msg-speaker {
  font-size: 12px;
  color: var(--text);
  font-weight: 500;
  margin-bottom: 2px;
  letter-spacing: 0.2px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
}

/* —— 群聊成员头衔徽章（群主/管理员/自定义） —— */
.msg-member-title {
  display: inline-flex;
  align-items: center;
  padding: 1px 5px;
  border-radius: var(--r-sm);
  font-size: 10px;
  font-weight: 600;
  margin-left: 5px;
  vertical-align: middle;
  letter-spacing: 0.3px;
  line-height: 1.4;
}
/* 群主：深色徽章 */
.msg-member-title.owner {
  background: var(--accent-deep);
  color: var(--bg-elevated);
}
/* 管理员：中灰徽章 */
.msg-member-title.admin {
  background: var(--surface);
  color: var(--text);
}
/* 普通成员：浅灰徽章 */
.msg-member-title.normal {
  background: var(--bg-soft);
  color: var(--text-tertiary);
}
/* 自定义头衔：边框样式 */
.msg-member-title.custom {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-strong);
}

/* ============================================================
   聊天回复引用条（chat-reply-bar）
   点击消息"回复"时，输入框上方显示的引用预览条
   ============================================================ */
.chat-reply-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  /* 左侧色条强调引用上下文 */
  position: relative;
}
.chat-reply-bar::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--accent);
}
.chat-reply-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-left: 8px;
}
.chat-reply-speaker {
  font-size: 11px;
  color: var(--accent-deep);
  font-weight: 600;
  letter-spacing: 0.3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-reply-preview {
  font-size: 12px;
  color: var(--text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.4;
}
.chat-reply-close {
  width: 24px;
  height: 24px;
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  cursor: pointer;
  font-size: 12px;
  background: transparent;
  border: none;
  flex-shrink: 0;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.chat-reply-close:hover {
  background: var(--surface);
  color: var(--text);
}

/* ============================================================
   消息气泡内引用回复（msg-reply-quote）
   与 .msg-quote 不同：此为回复某条消息时在气泡顶部显示的引用
   ============================================================ */
.msg-reply-quote {
  display: block;
  padding: 6px 8px;
  margin-bottom: 6px;
  border-left: 2px solid var(--border-strong);
  background: var(--bg-soft);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.msg-reply-speaker {
  color: var(--accent-deep);
  font-weight: 500;
}
.msg-reply-preview {
  color: var(--text-tertiary);
}

/* ============================================================
   群投票卡片（msg-vote-*）
   ============================================================ */
.msg-vote-card {
  min-width: 220px;
  max-width: 280px;
  padding: 12px 14px;
  background: var(--bg-soft);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
}
.msg-vote-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 10px;
  letter-spacing: 0.2px;
  line-height: 1.4;
  word-break: break-word;
}
.msg-vote-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.msg-vote-option {
  position: relative;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.msg-vote-option:hover {
  border-color: var(--border-strong);
}
.msg-vote-option-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--accent-soft);
  border-radius: var(--r-sm) 0 0 var(--r-sm);
  transition: width var(--dur-base) var(--ease-out);
  z-index: 0;
}
.msg-vote-option-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.msg-vote-option-text {
  font-size: 13px;
  color: var(--text);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.msg-vote-option-count {
  font-size: 11px;
  color: var(--text-tertiary);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2px;
}
.msg-vote-footer {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-tertiary);
  letter-spacing: 0.2px;
  line-height: 1.4;
}

/* ============================================================
   合并转发卡片（msg-merged-forward-*）
   ============================================================ */
.msg-merged-forward {
  min-width: 200px;
  max-width: 260px;
  padding: 12px 14px;
  background: var(--bg-soft);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
}
.msg-merged-forward-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
  letter-spacing: 0.3px;
}
.msg-merged-forward-summary {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.msg-merged-forward-meta {
  font-size: 11px;
  color: var(--text-tertiary);
  letter-spacing: 0.2px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}

/* —— 群转账/拼运气红包修饰类（继承基础卡片样式，微调色调） —— */
.msg-group-transfer {
  /* 与普通转账同色，仅作标识，可在此扩展群转账特有样式 */
}
.msg-lucky-red-packet {
  /* 拼运气红包：与普通红包同色系，保持视觉一致 */
}

/* —— 群转账子元素：问候语（与 msg-transfer-note 一致） —— */
.msg-transfer-greeting {
  font-size: 12px;
  color: var(--text-secondary);
  letter-spacing: 0.2px;
  line-height: 1.4;
  word-break: break-word;
}
/* —— 群转账信息容器 —— */
.msg-transfer-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

/* 消息内容列（气泡 + 内联时间） */
.message-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  max-width: 70%;
}
.message-content .message-bubble {
  max-width: 100%;
}
.message-row.sent .message-content { align-items: flex-end; }
.message-row.received .message-content { align-items: flex-start; }

/* ============================================================
   微信外观变体（由 data-wx-* 属性驱动，applyWechatAppearance 设置）
   ============================================================ */

/* —— 气泡样式变体 —— */
/* tail（默认）：小尾巴效果（sent 右上 / received 左上 收窄圆角 + CSS 三角形） */
[data-wx-bubble="tail"] .message-row.sent .message-bubble {
  border-top-right-radius: 4px;
}
[data-wx-bubble="tail"] .message-row.received .message-bubble {
  border-top-left-radius: 4px;
}
/* square：全部直角 */
[data-wx-bubble="square"] .message-bubble {
  border-radius: 2px !important;
}

/* rounded：保持大圆角（使用 --wx-bubble-radius） */
[data-wx-bubble="rounded"] .message-bubble {
  border-radius: var(--wx-bubble-radius, 18px);
}

/* —— 时间戳变体 —— */
/* hide: 隐藏所有时间元素 */
[data-wx-time="hide"] .message-time,
[data-wx-time="hide"] .message-time-capsule,
[data-wx-time="hide"] .message-time-inline { display: none !important; }
/* center: 显示时间胶囊，不显示内联时间 */
[data-wx-time="center"] .message-time-capsule { display: block; }
[data-wx-time="center"] .message-time-inline { display: none; }
/* inline: 显示内联时间，不显示时间胶囊 */
[data-wx-time="inline"] .message-time-inline { display: block; }
[data-wx-time="inline"] .message-time-capsule { display: none; }

/* —— 输入栏（旧样式已被新版 .chat-input-area 取代，保留 .chat-tool-btn 等子元素样式） —— */
.chat-input-bar {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 8px 10px 4px;
  flex-shrink: 0;
}

.chat-tool-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--dur-fast);
}
.chat-tool-btn:hover {
  background: var(--surface);
  color: var(--text);
}

.chat-input {
  flex: 1;
  padding: 8px 12px;
  background: var(--bg-soft);
  border-radius: var(--r-sm);
  font-size: 15px;
  color: var(--text);
  border: 1px solid transparent;
  resize: none;
  max-height: 100px;
  min-height: 36px;
  line-height: 1.4;
  font-family: var(--font-body);
}
.chat-input:focus { border-color: var(--accent); }

.chat-send-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  background: var(--accent);
  color: var(--text-inverse, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--dur-fast);
  border: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.chat-send-btn:hover:not(:disabled) {
  background: var(--accent-deep);
  transform: scale(1.05);
}
.chat-send-btn:active:not(:disabled) { transform: scale(0.92); }
.chat-send-btn:disabled {
  background: var(--surface);
  color: var(--text-tertiary);
  cursor: not-allowed;
  box-shadow: none;
  opacity: 0.6;
}

/* —— 通用导航按钮（聊天界面用） —— */
.wechat-nav-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  cursor: pointer;
  transition: background var(--dur-fast);
  flex-shrink: 0;
}
.wechat-nav-btn:hover { background: var(--surface); }
.wechat-nav-btn:active { background: var(--surface-hover); }

/* —— header 左侧返回按钮 —— */
.wx-header-left {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 36px;
}

/* —— header 中间区域（聊天标题 + 副标题） —— */
.chat-header-center {
  position: absolute;
  left: 50%;
  /* 名字/状态相对「内容区」垂直居中，而不是整个 header（含顶部安全区 44px）——
     否则名字贴 safe-area 上缘显得"太靠上"。safe-area/2 补偿使中心点下移到内容区中央 */
  top: calc(50% + var(--safe-area-top, env(safe-area-inset-top, 0px)) / 2);
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  max-width: 60%;
  cursor: pointer;
  text-align: center;
}
.chat-header-sub {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 2px;
  letter-spacing: 0.2px;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* —— 群聊头部子标题中的成员状态（inline 显示） —— */
/* 用于群聊顶部展示多名成员的在线状态摘要 */
.group-status-name {
  color: var(--text-secondary);
  font-weight: 500;
}
.group-status-online {
  color: var(--text-tertiary);
}
/* 成员状态之间的分隔符（· 或空格） */
.group-status-sep {
  color: var(--text-tertiary);
  margin: 0 2px;
}

/* —— 聊天内搜索栏 —— */
.chat-search-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--bg-glass);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  animation: panelUp 0.2s var(--ease-out);
}
@keyframes panelUp {
  from { transform: translateY(-100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.chat-search-input {
  flex: 1;
  border: none;
  outline: none;
  background: var(--bg-soft);
  border-radius: var(--r-sm);
  padding: 6px 12px;
  font-size: 14px;
  color: var(--text);
  font-family: var(--font-body);
  min-width: 0;
}
.chat-search-input::placeholder { color: var(--text-tertiary); }
.chat-search-count {
  font-size: 12px;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  min-width: 32px;
  text-align: center;
}
.chat-search-nav {
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  border: none;
  transition: background var(--dur-fast);
}
.chat-search-nav:hover { background: var(--surface); color: var(--accent-deep); }
.chat-search-nav:active { transform: scale(0.92); }
.chat-search-close {
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  border: none;
  transition: background var(--dur-fast);
}
.chat-search-close:hover { background: var(--surface); color: var(--danger); }

/* 搜索高亮 */
.message-search-highlight {
  background: rgba(250, 200, 80, 0.5);
  border-radius: 2px;
  padding: 0 1px;
}
.message-row.search-current .message-search-highlight {
  background: rgba(250, 160, 40, 0.8);
  color: #fff;
}

/* "对方正在输入" 动画省略号 */
.typing-dots::after {
  content: '...';
  display: inline-block;
  animation: typingBlink 1.2s ease-in-out infinite;
}
@keyframes typingBlink {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

/* ============================================================
   加号弹出菜单（顶部 + 与更多按钮共用）
   ============================================================ */
.wx-add-menu {
  position: absolute;
  z-index: 1000;
  background: var(--bg-elevated);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--border);
  padding: 6px 0;
  min-width: 168px;
  opacity: 0;
  transform: scale(0.92) translateY(-4px);
  transform-origin: top right;
  transition: opacity var(--dur-fast), transform var(--dur-fast);
  pointer-events: none;
  top: calc(var(--safe-area-top, env(safe-area-inset-top, 0px)) + 56px);
  right: 12px;
}
.wx-add-menu.show {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}
.wx-add-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
  color: var(--text);
  font-size: 14px;
  transition: background var(--dur-fast);
  letter-spacing: 0.3px;
}
.wx-add-menu-item:hover { background: var(--bg-soft); }
.wx-add-menu-item:active { background: var(--surface); }
.wx-add-menu-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
}

/* ============================================================
   聊天 + 面板（相册、拍摄、文件、位置等）
   ============================================================ */
.chat-plus-panel {
  flex-shrink: 0;
  background: var(--bg-glass);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-top: 1px solid var(--border);
  padding: 18px 16px calc(18px + var(--safe-area-bottom, env(safe-area-inset-bottom, 0px)));
  max-height: 220px;
  overflow-y: auto;
  animation: panelUp 0.22s var(--ease-out);
}
@keyframes panelUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.chat-plus-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px 12px;
}
.chat-plus-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 11px;
  color: var(--text-secondary);
  letter-spacing: 0.2px;
  transition: transform var(--dur-fast);
}
.chat-plus-item:active { transform: scale(0.94); }
.chat-plus-icon {
  width: 54px;
  height: 54px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  filter: saturate(0.9);
  box-shadow: var(--shadow-sm);
  transition: filter var(--dur-fast);
}
.chat-plus-item:hover .chat-plus-icon { filter: saturate(1.05); }

/* ============================================================
   表情面板
   ============================================================ */
.chat-emoji-panel {
  flex-shrink: 0;
  background: var(--bg-glass);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-top: 1px solid var(--border);
  padding: 12px 12px calc(12px + var(--safe-area-bottom, env(safe-area-inset-bottom, 0px)));
  max-height: 220px;
  overflow-y: auto;
  animation: panelUp 0.22s var(--ease-out);
}
.chat-emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
}
.chat-emoji-item {
  font-size: 22px;
  text-align: center;
  padding: 6px 0;
  cursor: pointer;
  border-radius: var(--r-sm);
  transition: background var(--dur-fast);
  user-select: none;
}
.chat-emoji-item:hover { background: var(--surface); }
.chat-emoji-item:active { background: var(--surface-hover); transform: scale(0.9); }

/* ============================================================
   消息中的图片
   ============================================================ */
.msg-image {
  display: block;
  width: auto;
  max-width: 200px;
  max-height: 260px;
  border-radius: 10px;
  object-fit: cover;
  cursor: zoom-in;
}
.msg-image.msg-sticker {
  max-width: 108px !important;
  max-height: 108px !important;
  width: auto !important;
  object-fit: contain;
  border-radius: 8px;
}
.message-image-only .msg-image.msg-sticker,
.message-row.sent .message-image-only .msg-image.msg-sticker,
.message-row.received .message-image-only .msg-image.msg-sticker {
  max-width: 108px !important;
  max-height: 108px !important;
  width: auto !important;
}

/* 纯图片消息：不使用气泡包裹，直接显示图片 */
.message-image-only {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 12px;
  box-shadow: none !important;
  max-width: 100%;
  overflow: hidden;
}
.message-image-only .msg-image {
  display: block;
  width: auto;
  max-width: 200px;
  max-height: 300px;
  border-radius: 12px;
  object-fit: cover;
  cursor: pointer;
}
.message-row.sent .message-image-only .msg-image {
  border-top-right-radius: 4px;
}
.message-row.received .message-image-only .msg-image {
  border-top-left-radius: 4px;
}

/* 文字语音气泡（无语音API时的降级显示） */
.msg-voice-text-bubble {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}
.msg-voice-text-icon {
  flex-shrink: 0;
  color: var(--wx-text-secondary);
  opacity: 0.8;
}
.msg-voice-text-content {
  font-size: 14px;
  line-height: 1.5;
}

/* 图片文字描述卡片 */
.msg-image-text-card .msg-photo-desc {
  font-style: italic;
  color: var(--wx-text-secondary);
}

/* ============================================================
   群聊头像（多成员缩略）
   ============================================================ */
.wx-chat-avatar-group {
  display: grid;
  gap: 1px;
  padding: 2px;
  background: var(--bg);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  align-items: center;
  justify-items: center;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}
.wx-chat-avatar-group.wx-chat-avatar-2 { grid-template-rows: 1fr; }
.wx-chat-avatar-group.wx-chat-avatar-1 { grid-template-columns: 1fr; grid-template-rows: 1fr; font-size: 16px; }
.wx-chat-avatar-group.wx-chat-avatar-3 span:nth-child(1) { grid-row: 1 / span 2; }

/* ============================================================
   群聊创建器
   ============================================================ */
.wx-group-create-list {
  background: var(--bg-elevated);
  padding: 0;
  display: block;
}
.wx-group-create-list .chat-messages { padding: 0; }

.wx-group-create-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background var(--dur-fast);
}
.wx-group-create-item:hover { background: var(--bg-soft); }
.wx-group-create-item.selected { background: var(--accent-soft); }

.wx-group-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--dur-fast);
}
.wx-group-check.checked {
  background: var(--accent);
  border-color: var(--accent);
}
.wx-group-check.checked::after {
  content: '';
  width: 6px;
  height: 10px;
  border: 2px solid #fff;
  border-top: 0;
  border-left: 0;
  transform: rotate(45deg) translate(-1px, -1px);
}

/* 群聊创建器 - 容器与搜索 */
.wx-group-create-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.wx-group-create-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  color: var(--text-tertiary);
  flex-shrink: 0;
}
.wx-group-create-search input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  outline: none;
}
.wx-group-create-section-label {
  padding: 10px 16px 6px;
  font-size: 12px;
  color: var(--text-tertiary);
  background: var(--bg);
  flex-shrink: 0;
}

/* 群聊创建器 - 已选预览栏 */
.wx-group-create-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  flex-shrink: 0;
  -webkit-overflow-scrolling: touch;
}
.wx-group-create-preview::-webkit-scrollbar { display: none; }

.wx-group-preview-chip {
  position: relative;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
}
.wx-group-preview-avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--accent-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 500;
  overflow: hidden;
  flex-shrink: 0;
  filter: saturate(0.85);
}
.wx-group-preview-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wx-group-preview-remove {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--text);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.wx-group-preview-remove svg {
  width: 12px;
  height: 12px;
}

/* 群聊创建器 - 列表项头像约束 */
.wx-group-create-item .wx-contact-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  overflow: hidden;
  flex-shrink: 0;
}

/* ============================================================
   角色资料浮层
   ============================================================ */
.wx-char-info-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 16px;
  margin-bottom: 16px;
  background: var(--bg-soft);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
}
.wx-char-info-avatar {
  width: 80px;
  height: 80px;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  color: var(--accent-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  font-weight: 500;
  overflow: hidden;
  filter: saturate(0.85);
}
.wx-char-info-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wx-char-info-meta {
  text-align: center;
}
.wx-char-info-name {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
  letter-spacing: 0.5px;
}
.wx-char-info-persona {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 280px;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================================
   群聊消息：发言人名 + 气泡
   ============================================================ */
.message-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  max-width: 70%;
}
.message-speaker {
  font-size: 11px;
  color: var(--text-tertiary);
  letter-spacing: 0.3px;
  padding: 0 4px;
}
.message-row.sent .message-col { align-items: flex-end; }
.message-row.received .message-col { align-items: flex-start; }
.group-msg .message-bubble { max-width: 100%; }

/* ============================================================
   聊天输入栏（新版 · 两行式）
   ============================================================ */
.chat-input-area {
  flex-shrink: 0;
  background: var(--bg-glass);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-top: 1px solid var(--border);
}
.chat-input-bar {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 8px 10px 4px;
}
.chat-tool-row {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 4px;
  padding: 4px 10px calc(8px + var(--safe-area-bottom, env(safe-area-inset-bottom, 0px)));
}
.chat-tool-mini {
  width: 38px;
  height: 32px;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--dur-fast);
  border: none;
}
.chat-tool-mini:hover {
  background: var(--surface);
  color: var(--accent-deep);
}
.chat-tool-mini:active { transform: scale(0.92); }

.chat-ai-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--accent-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--dur-fast);
  border: 1px solid var(--border);
}
.chat-ai-btn:hover {
  background: var(--accent);
  color: var(--text-inverse, #fff);
  border-color: var(--accent);
  transform: scale(1.05);
}
.chat-ai-btn:active { transform: scale(0.92); }

/* —— 按住说话按钮 —— */
.chat-voice-hold {
  flex: 1;
  height: 36px;
  border-radius: var(--r-sm);
  background: var(--bg-soft);
  color: var(--text);
  border: 1px solid var(--border);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background var(--dur-fast), transform var(--dur-fast);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
}
.chat-voice-hold.pressing {
  background: var(--accent-soft);
  color: var(--accent-deep);
  transform: scale(0.98);
}

/* —— 长按录音浮层 —— */
.wx-rec-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  opacity: 0;
  transition: opacity 0.2s var(--ease-out);
  pointer-events: none;
}
.wx-rec-overlay.active {
  opacity: 1;
  pointer-events: auto;
}
.wx-rec-card {
  background: rgba(20, 20, 20, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--r-md);
  padding: 20px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 140px;
  color: #fff;
  animation: recPop 0.2s var(--ease-out);
}
@keyframes recPop {
  from { transform: scale(0.85); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.wx-rec-mic {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: background 0.2s var(--dur-fast);
  animation: recPulse 1.4s ease-in-out infinite;
}
@keyframes recPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 80, 80, 0.5); }
  50% { box-shadow: 0 0 0 10px rgba(255, 80, 80, 0); }
}
.wx-rec-mic.cancelled {
  background: rgba(255, 80, 80, 0.25);
  color: #ff8585;
  animation: none;
}
.wx-rec-duration {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
}
.wx-rec-hint {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 0.3px;
  text-align: center;
}
.wx-rec-hint.cancel {
  color: #ff8585;
}
/* —— 录音实时转写（Web Speech API，边录边出字） —— */
.wx-rec-live {
  display: none;
  max-width: 240px;
  margin: 6px 0 2px;
  padding: 6px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wx-rec-live.has-text { display: block; }

.hidden { display: none !important; }

/* —— 引用预览条 —— */
.chat-quote-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-soft);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  animation: panelUp 0.2s var(--ease-out);
}
.chat-quote-bar-content {
  flex: 1;
  min-width: 0;
  border-left: 3px solid var(--accent);
  padding-left: 8px;
}
.chat-quote-bar-author {
  font-size: 11px;
  color: var(--accent-deep);
  font-weight: 500;
  margin-bottom: 2px;
}
.chat-quote-bar-text {
  font-size: 12px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-quote-bar-close {
  width: 24px;
  height: 24px;
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  cursor: pointer;
  font-size: 14px;
}
.chat-quote-bar-close:hover { background: var(--surface); }

/* —— 面板容器（表情 / 更多） —— */
.chat-panel {
  flex-shrink: 0;
  background: var(--bg-glass);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-top: 1px solid var(--border);
  padding: 12px;
  padding-bottom: calc(12px + var(--safe-area-bottom, env(safe-area-inset-bottom, 0px)));
  max-height: 240px;
  overflow-y: auto;
  animation: panelUp 0.22s var(--ease-out);
}

/* —— 表情面板 tab —— */
.emoji-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
  margin-bottom: 12px;
}
.emoji-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 14px;
  font-size: 11px;
  color: var(--text-tertiary);
  cursor: pointer;
  border-radius: var(--r-sm);
  transition: all var(--dur-fast);
  user-select: none;
  letter-spacing: 0.3px;
  position: relative;
}
.emoji-tab svg { opacity: 0.7; transition: opacity var(--dur-fast); }
.emoji-tab:hover { background: var(--surface); }
.emoji-tab:hover svg { opacity: 1; }
.emoji-tab.active {
  color: var(--accent-deep);
  background: var(--accent-soft);
}
.emoji-tab.active svg { opacity: 1; }
.emoji-tab.active::after {
  content: '';
  position: absolute;
  bottom: -9px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 3px;
  border-radius: 2px;
  background: var(--accent);
}
.emoji-content { min-height: 120px; }

.chat-emoji-grid.kaomoji-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.kaomoji-item {
  font-size: 14px !important;
  text-align: center;
  padding: 8px 4px !important;
  font-family: var(--font-body);
}

/* —— 表情包分组 —— */
.sticker-group {
  margin-bottom: 12px;
}
.sticker-group-name {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-bottom: 6px;
  letter-spacing: 0.3px;
}
.sticker-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.sticker-item {
  aspect-ratio: 1;
  background: var(--bg-soft);
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  cursor: pointer;
  transition: all var(--dur-fast);
}
.sticker-item:hover { background: var(--surface); }
.sticker-item:active { transform: scale(0.9); }
.sticker-empty-text {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--text-tertiary);
  font-size: 12px;
  padding: 16px 0;
}

/* —— 图片表情包卡片（带描述词输入） —— */
.sticker-image-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.sticker-image-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sticker-image-thumb {
  aspect-ratio: 1;
  background: var(--bg-soft);
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  cursor: pointer;
  overflow: hidden;
  transition: all var(--dur-fast);
}
.sticker-image-thumb:hover { background: var(--surface); }
.sticker-image-thumb:active { transform: scale(0.9); }
.sticker-image-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sticker-image-desc {
  width: 100%;
  padding: 6px 8px;
  font-size: 12px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text);
  outline: none;
  box-sizing: border-box;
  font-family: inherit;
}
.sticker-image-desc:focus {
  border-color: var(--accent);
  background: var(--bg-elevated);
}
.sticker-image-desc::placeholder {
  color: var(--text-tertiary);
}

/* —— 表情包管理器（新） —— */
.stk-manager { padding: 0; }
.stk-section-switch {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
}
.stk-section-tab {
  flex: 1;
  text-align: center;
  padding: 10px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-tertiary);
  cursor: pointer;
  position: relative;
  transition: color 0.2s;
}
.stk-section-tab.active {
  color: var(--accent);
}
.stk-section-tab.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 2px;
  background: var(--accent);
  border-radius: 1px;
}
.stk-section-count {
  font-size: 11px;
  opacity: 0.7;
  margin-left: 2px;
}
.stk-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-tertiary);
}
.stk-empty-icon { margin-bottom: 12px; opacity: 0.4; }
.stk-empty-icon svg { width: 48px; height: 48px; }
.stk-empty-title { font-size: 16px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }
.stk-empty-desc { font-size: 13px; line-height: 1.6; }

.stk-group-pills {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 8px 12px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.stk-group-pills::-webkit-scrollbar { display: none; }
.stk-group-pill {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 16px;
  background: var(--bg-soft);
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--dur-fast);
  white-space: nowrap;
}
.stk-group-pill.active {
  background: var(--accent);
  color: #fff;
}
.stk-group-pill-count {
  font-size: 11px;
  opacity: 0.7;
  padding: 1px 5px;
  border-radius: 8px;
  background: rgba(0,0,0,0.08);
}
.stk-group-pill.active .stk-group-pill-count {
  background: rgba(255,255,255,0.25);
  opacity: 1;
}

.stk-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 4px;
}
.stk-group-name { font-size: 15px; font-weight: 600; color: var(--text); }
.stk-group-scope { font-size: 11px; color: var(--text-tertiary); padding: 2px 6px; border-radius: 4px; background: var(--bg-soft); }
.stk-group-del { margin-left: auto; color: var(--danger); cursor: pointer; opacity: 0.6; transition: opacity var(--dur-fast); padding: 4px; }
.stk-group-del:active { opacity: 1; }
.stk-group-del svg { width: 16px; height: 16px; }

.stk-tabs {
  display: flex;
  gap: 0;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}
.stk-tab {
  flex: 1;
  text-align: center;
  padding: 10px 0;
  font-size: 14px;
  color: var(--text-tertiary);
  cursor: pointer;
  position: relative;
  transition: color var(--dur-fast);
}
.stk-tab.active { color: var(--accent); font-weight: 600; }
.stk-tab.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 2px;
  border-radius: 1px;
  background: var(--accent);
}
.stk-tab-count { font-size: 11px; opacity: 0.6; margin-left: 2px; }

.stk-content { padding: 0 16px; min-height: 80px; }
.stk-content-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--text-tertiary);
  font-size: 13px;
}

.stk-emoji-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.stk-emoji-item {
  position: relative;
  aspect-ratio: 1;
  background: var(--bg-soft);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
}
.stk-emoji-item:hover { background: var(--surface); }

.stk-kaomoji-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.stk-kaomoji-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  background: var(--bg-soft);
  border-radius: 10px;
  font-size: 14px;
}
.stk-kaomoji-text { color: var(--text); }

.stk-item-del {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--danger);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--dur-fast);
  z-index: 2;
}
.stk-emoji-item:hover .stk-item-del,
.stk-kaomoji-item:hover .stk-item-del,
.stk-image-card:hover .stk-item-del {
  opacity: 1;
}
.stk-item-del svg { width: 10px; height: 10px; }

.stk-image-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.stk-image-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stk-img-thumb {
  aspect-ratio: 1;
  background: var(--bg-soft);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  overflow: hidden;
}
.stk-img-thumb img { width: 100%; height: 100%; object-fit: cover; }
.stk-img-name {
  font-size: 11px;
  color: var(--text-tertiary);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stk-img-desc {
  width: 100%;
  padding: 6px 8px;
  font-size: 12px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  outline: none;
  box-sizing: border-box;
  font-family: inherit;
}
.stk-img-desc:focus { border-color: var(--accent); }
.stk-img-desc::placeholder { color: var(--text-tertiary); }
.stk-img-del { top: 4px; right: 4px; opacity: 0.7; }
.stk-image-card:hover .stk-img-del { opacity: 1; }

.stk-add-area {
  padding: 16px;
  margin-top: 12px;
  border-top: 1px solid var(--border);
}
.stk-add-row {
  display: flex;
  gap: 8px;
}
.stk-add-input { flex: 1; }
.stk-add-btn { flex-shrink: 0; padding: 0 16px; }
.stk-quick-toggle {
  text-align: center;
  font-size: 13px;
  color: var(--accent);
  cursor: pointer;
  padding: 8px 0;
  margin-top: 4px;
}
.stk-quick-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  margin-top: 8px;
  max-height: 200px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.stk-quick-item {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-soft);
  border-radius: 8px;
  font-size: 20px;
  cursor: pointer;
  transition: all var(--dur-fast);
}
.stk-quick-item:active { transform: scale(0.9); background: var(--surface); }
.stk-quick-kaomoji {
  grid-template-columns: repeat(3, 1fr);
}
.stk-quick-kaomoji .stk-quick-item {
  aspect-ratio: auto;
  padding: 8px 4px;
  font-size: 13px;
  white-space: nowrap;
}
.stk-add-hint {
  text-align: center;
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 8px;
  line-height: 1.5;
}

.emoji-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--text-tertiary);
}
.emoji-empty p { margin: 4px 0; }
.emoji-empty-hint { font-size: 12px; }

/* —— 语音录制弹窗 —— */
.voice-sheet { max-width: 360px; }
.voice-mode-tabs {
  display: flex;
  gap: 4px;
  background: var(--bg-soft);
  border-radius: var(--r-sm);
  padding: 3px;
  margin-bottom: 20px;
}
.voice-mode-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text-tertiary);
  cursor: pointer;
  border-radius: var(--r-xs);
  transition: all var(--dur-fast);
  user-select: none;
  letter-spacing: 0.3px;
}
.voice-mode-tab:hover { color: var(--text-secondary); }
.voice-mode-tab.active {
  background: var(--bg-elevated);
  color: var(--accent-deep);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.voice-record-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 12px 0 8px;
}
.voice-mic-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.voice-mic-btn {
  width: 72px;
  height: 72px;
  border-radius: var(--r-full);
  background: var(--accent-soft);
  color: var(--accent-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--dur-base);
  position: relative;
  border: 2px solid transparent;
}
.voice-mic-btn:hover {
  background: var(--accent);
  color: var(--text-inverse, #fff);
  transform: scale(1.05);
}
.voice-mic-btn:active { transform: scale(0.95); }
.voice-mic-btn.recording {
  background: var(--danger);
  color: #fff;
  border-color: rgba(255,255,255,0.3);
  animation: voicePulse 1.5s ease-out infinite;
}
@keyframes voicePulse {
  0% { box-shadow: 0 0 0 0 rgba(220,38,38,0.4); }
  100% { box-shadow: 0 0 0 16px rgba(220,38,38,0); }
}
.voice-mic-hint {
  font-size: 13px;
  color: var(--text-secondary);
  letter-spacing: 0.3px;
}
.voice-mic-duration {
  font-size: 22px;
  font-weight: 600;
  color: var(--accent-deep);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
}
.voice-mic-actions {
  display: flex;
  gap: 12px;
  width: 100%;
  justify-content: center;
}
.voice-mic-actions .btn { min-width: 100px; }

.voice-text-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.voice-text-input {
  width: 100%;
  min-height: 80px;
  resize: vertical;
  font-family: var(--font-body);
}
.voice-text-hint {
  font-size: 12px;
  color: var(--text-tertiary);
  letter-spacing: 0.2px;
  line-height: 1.5;
}

/* ============================================================
   通用弹窗（modal sheet）
   ============================================================ */
.wx-modal-overlay {
  position: absolute;
  inset: 0;
  z-index: 700;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}
.wx-modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}
.wx-modal-sheet {
  width: 100%;
  max-width: 420px;
  max-height: 80vh;
  background: var(--bg-elevated);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform var(--dur-base) var(--ease-out);
  box-shadow: var(--shadow-xl);
}
.wx-modal-overlay.active .wx-modal-sheet {
  transform: translateY(0);
}
.wx-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.wx-modal-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.5px;
}
.wx-modal-close {
  width: 28px;
  height: 28px;
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  cursor: pointer;
  font-size: 16px;
}
.wx-modal-close:hover { background: var(--surface); color: var(--text); }
.wx-modal-body {
  padding: 16px;
  overflow-y: auto;
  flex: 1;
}

/* —— 聊天背景预设 —— */
.cb-presets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 8px;
}
.cb-preset {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  padding: 4px;
  border-radius: var(--r-sm);
  transition: background var(--dur-fast);
}
.cb-preset:hover { background: var(--bg-soft); }
.cb-preset:active { background: var(--surface); }
.cb-preset-swatch {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--r-sm);
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.cb-preset span {
  font-size: 11px;
  color: var(--text-secondary);
  letter-spacing: 0.2px;
}
.cb-section-title {
  font-size: 13px;
  color: var(--text-tertiary);
  margin-top: 12px;
  letter-spacing: 0.3px;
}
.wx-modal-hint {
  font-size: 12px;
  color: var(--text-tertiary);
  text-align: center;
  padding: 16px 0;
  line-height: 1.6;
}

/* —— 选项选择器 —— */
.wx-option-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--text);
  font-size: 14px;
  transition: background var(--dur-fast);
  margin-bottom: 4px;
}
.wx-option-item:hover { background: var(--bg-soft); }
.wx-option-item.active {
  background: var(--accent-soft);
  color: var(--accent-deep);
}
.wx-option-check { color: var(--accent); font-weight: 600; }
.wx-option-title {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 2px;
}
.wx-option-sub {
  font-size: 12px;
  color: var(--text-secondary);
}

/* —— 转发列表 —— */
.wx-forward-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--dur-fast);
}
.wx-forward-item:hover { background: var(--bg-soft); }
.wx-forward-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--accent-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  flex-shrink: 0;
}
.wx-forward-name {
  font-size: 14px;
  color: var(--text);
}

/* ============================================================
   转账弹窗 + 消息
   ============================================================ */
.transfer-sheet .transfer-amount-display {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  padding: 24px 0 12px;
}
.transfer-currency {
  font-size: 22px;
  color: var(--text);
  font-weight: 500;
}
.transfer-amount-input {
  flex: 1;
  max-width: 200px;
  font-size: 32px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  text-align: center;
  padding: 4px 0;
  font-family: var(--font-body);
}
.transfer-amount-input:focus {
  outline: none;
  border-bottom-color: var(--accent);
}
.transfer-note {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: 14px;
  font-family: var(--font-body);
}

/* —— 卡片消息基础样式（无气泡） —— */
.message-card {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  max-width: 240px;
}

/* —— 转账消息卡片（Morandi 琥珀色调） —— */
.msg-transfer-card {
  width: 230px;
  background: linear-gradient(135deg, #f5ede0 0%, #ebe0cc 100%);
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(180, 150, 100, 0.2);
  box-shadow: 0 2px 8px rgba(140, 110, 60, 0.08);
}
.msg-transfer-top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px 6px;
}
.msg-transfer-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #d4b896 0%, #b89968 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.msg-transfer-icon svg {
  width: 16px;
  height: 16px;
}
.msg-transfer-title {
  font-size: 13px;
  font-weight: 600;
  color: #8a6d3b;
  letter-spacing: 0.3px;
  flex: 1;
}
.msg-transfer-status {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 8px;
  background: rgba(160, 136, 85, 0.15);
  color: #a08855;
}
.msg-transfer-card[data-status="received"] .msg-transfer-status {
  background: rgba(122, 154, 126, 0.18);
  color: #7a9a7e;
}
.msg-transfer-amount {
  font-size: 24px;
  font-weight: 700;
  color: #6b4f1d;
  letter-spacing: 0.5px;
  line-height: 1.3;
  padding: 0 14px;
}
.msg-transfer-note {
  font-size: 12px;
  color: #a08855;
  margin-top: 4px;
  padding: 0 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.msg-transfer-footer {
  margin-top: 10px;
  padding: 8px 14px;
  border-top: 1px solid rgba(180, 150, 100, 0.15);
  font-size: 11px;
  color: #a08855;
  letter-spacing: 0.3px;
}
.msg-transfer-card[data-status="received"] .msg-transfer-footer {
  color: #7a9a7e;
}
:root[data-theme="dark"] .msg-transfer-card {
  background: linear-gradient(135deg, #3a3228 0%, #2d2620 100%);
  border-color: rgba(180, 150, 100, 0.15);
}
:root[data-theme="dark"] .msg-transfer-title { color: #d8c4a0; }
:root[data-theme="dark"] .msg-transfer-amount { color: #e8d9c0; }
:root[data-theme="dark"] .msg-transfer-note,
:root[data-theme="dark"] .msg-transfer-footer { color: #b09870; }
:root[data-theme="dark"] .msg-transfer-status {
  background: rgba(180, 150, 100, 0.2);
  color: #b09870;
}
.msg-transfer-actions {
  display: flex;
  gap: 8px;
  padding: 10px 16px 12px;
}
.msg-transfer-btn {
  flex: 1;
  padding: 8px 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-soft);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--dur-fast);
  letter-spacing: 0.3px;
}
.msg-transfer-btn.accept {
  background: #5a7363;
  color: #fff;
  border-color: #5a7363;
}
.msg-transfer-btn.accept:hover { background: #4a6353; }
.msg-transfer-btn.accept:active { transform: scale(0.97); }
.msg-transfer-btn.return {
  color: var(--text-secondary);
}
.msg-transfer-btn.return:hover { background: var(--surface); }
.msg-transfer-btn.return:active { transform: scale(0.97); }
.msg-transfer-card[data-status="returned"] .msg-transfer-footer {
  color: #b08070;
}
:root[data-theme="dark"] .msg-transfer-btn {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.1);
  color: #ccc;
}
:root[data-theme="dark"] .msg-transfer-btn.accept {
  background: #5a7363;
  color: #fff;
  border-color: #5a7363;
}

/* —— 红包消息卡片（莫兰迪红设计） —— */
.msg-red-packet-card {
  width: 240px;
  background: var(--bg-elevated);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.msg-red-packet-top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: linear-gradient(135deg, #E8C4B8 0%, #D4A59A 100%);
}
.msg-red-packet-icon {
  font-size: 28px;
  flex-shrink: 0;
}
.msg-red-packet-info {
  flex: 1;
  min-width: 0;
}
.msg-red-packet-title {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 2px;
}
.msg-red-packet-greeting {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.msg-red-packet-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--text-secondary);
  border-top: 1px solid var(--border);
}
.msg-red-packet-bottom .msg-red-packet-amount {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

/* —— 位置消息卡片 —— */
.msg-location {
  min-width: 220px;
  max-width: 260px;
  background: var(--bg-elevated);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.msg-location-map {
  position: relative;
  width: 100%;
  height: 100px;
  overflow: hidden;
}
.msg-location-map-bg {
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, 
    #E8E4DC 0%, 
    #D8D0C4 30%,
    #C5D4C0 60%,
    #B8C9B9 100%);
  position: relative;
}
.msg-location-map-bg::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(255,255,255,0.4);
  transform: translateY(-50%);
}
.msg-location-map-bg::after {
  content: '';
  position: absolute;
  top: 30%;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255,255,255,0.3);
}
.msg-location-pin {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -100%);
  color: #C97B6E;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}
.msg-location-tag {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
}
.msg-location-info {
  padding: 10px 12px;
}
.msg-location-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.msg-location-addr {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* —— 照片描述消息卡片 —— */
.msg-photo-card {
  width: 200px;
  background: var(--bg-elevated);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.msg-photo-image {
  width: 100%;
  aspect-ratio: 1;
  background: var(--bg-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}
.msg-photo-placeholder {
  color: var(--text-tertiary);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.msg-photo-placeholder::after {
  content: '照片';
  font-size: 12px;
  color: var(--text-tertiary);
}
.msg-photo-desc {
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  border-top: 1px solid var(--border);
}

/* 带实际图片的照片卡片 */
.msg-photo-card-image {
  background: var(--bg-elevated);
}
.msg-photo-img {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: cover;
  cursor: pointer;
  transition: opacity var(--dur-fast);
}
.msg-photo-img:hover {
  opacity: 0.92;
}
.msg-photo-card-image .msg-photo-desc {
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-secondary);
}

/* ============================================================
   来电浮层（AI 主动呼叫用户）
   ============================================================ */
.incoming-call-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  z-index: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 80px 24px calc(60px + var(--safe-area-bottom, env(safe-area-inset-bottom, 0px)));
  opacity: 0;
  transition: opacity 0.3s;
  color: #fff;
}
.incoming-call-overlay.active { opacity: 1; }
.incoming-call-label {
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  letter-spacing: 1px;
}
.incoming-call-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.incoming-call-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  font-weight: 600;
  overflow: hidden;
  margin-bottom: 12px;
  animation: callPulse 2s ease-in-out infinite;
}
.incoming-call-avatar img { width: 100%; height: 100%; object-fit: cover; }
@keyframes callPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,255,255,0.2); }
  50% { transform: scale(1.03); box-shadow: 0 0 0 20px rgba(255,255,255,0); }
}
.incoming-call-name { font-size: 24px; font-weight: 600; }
.incoming-call-status { font-size: 14px; color: rgba(255,255,255,0.6); }
.incoming-call-actions {
  display: flex;
  gap: 80px;
}
.incoming-call-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.incoming-call-btn {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s;
}
.incoming-call-btn:active { transform: scale(0.9); }
.incoming-call-btn.accept { background: #07C160; color: #fff; }
.incoming-call-btn.decline { background: #ff3b30; color: #fff; }
.incoming-call-action-label { font-size: 12px; color: rgba(255,255,255,0.7); }

/* ============================================================
   通话记录消息卡片
   ============================================================ */
.msg-call-log {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--surface);
  border-radius: var(--r-sm);
  color: var(--text-secondary);
  font-size: 13px;
  min-width: 180px;
}
.msg-call-log-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(124, 145, 103, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7c9167;
  flex-shrink: 0;
}
.msg-call-log-icon svg { width: 16px; height: 16px; }
.msg-call-log-text { letter-spacing: 0.3px; }

/* ============================================================
   亲密关系弹窗 + 消息
   ============================================================ */
.rel-current {
  padding: 10px 12px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  border-radius: var(--r-sm);
  font-size: 13px;
  margin-bottom: 12px;
}
.msg-relationship {
  display: flex;
  flex-direction: column;
  min-width: 220px;
  max-width: 260px;
  background: linear-gradient(135deg, #f0e0e8, #e8d4e0);
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid rgba(180, 140, 160, 0.15);
}
:root[data-theme="dark"] .msg-relationship {
  background: linear-gradient(135deg, #4a3a44, #3d2f38);
  border-color: rgba(200, 160, 180, 0.15);
}
.msg-relationship-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(212, 184, 214, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9b6b8a;
  margin: 14px auto 8px;
}
:root[data-theme="dark"] .msg-relationship-icon {
  background: rgba(200, 160, 180, 0.15);
  color: #d4b8c8;
}
.msg-relationship-icon svg { width: 24px; height: 24px; }
.msg-relationship-body {
  padding: 0 16px 12px;
  text-align: center;
}
.msg-relationship-text {
  font-size: 14px;
  font-weight: 500;
  color: #6b4a5a;
  line-height: 1.4;
}
:root[data-theme="dark"] .msg-relationship-text { color: #e8d4dc; }
.msg-relationship-note {
  font-size: 12px;
  color: #9b7a8a;
  margin-top: 4px;
}
:root[data-theme="dark"] .msg-relationship-note { color: #b8a0b0; }
.msg-relationship-actions {
  display: flex;
  gap: 8px;
  padding: 0 16px 14px;
}
.rel-btn {
  flex: 1;
  padding: 8px 0;
  border: none;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: opacity var(--dur-fast);
}
.rel-btn:active { opacity: 0.7; }
.rel-btn-accept {
  background: #9b6b8a;
  color: #fff;
}
.rel-btn-reject {
  background: rgba(155, 107, 138, 0.12);
  color: #6b4a5a;
}
:root[data-theme="dark"] .rel-btn-reject {
  background: rgba(200, 160, 180, 0.15);
  color: #d4b8c8;
}
.msg-relationship-result {
  padding: 8px 16px 14px;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  color: #9b7a8a;
}
.msg-relationship[data-status="accepted"] .msg-relationship-result { color: #7a9b6b; }
.msg-relationship[data-status="rejected"] .msg-relationship-result { color: #b88a8a; }

/* ============================================================
   位置消息
   ============================================================ */
.msg-location {
  min-width: 200px;
  max-width: 240px;
}
.msg-location-map {
  width: 100%;
  height: 56px;
  overflow: hidden;
  background: #e8e4d8;
}
.msg-location-name {
  padding: 8px 10px 2px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}
.msg-location-addr {
  padding: 0 10px 8px;
  font-size: 11px;
  color: var(--text-tertiary);
}

/* ============================================================
   语音消息气泡
   ============================================================ */
.voice-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 85%;
}
.voice-inline {
  display: flex;
  align-items: center;
  gap: 6px;
}
.message-row.sent .voice-inline { flex-direction: row-reverse; }

.msg-type-voice .message-bubble {
  padding: 10px 14px;
  flex-shrink: 0;
}

/* —— 语音气泡内容（播放行） —— */
.msg-voice {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  position: relative;
}
.message-row.sent .msg-voice { flex-direction: row-reverse; }

.msg-voice-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0.85;
  transition: opacity var(--dur-fast);
}
.msg-voice:hover .msg-voice-icon { opacity: 1; }

/* —— 波浪线 —— */
.msg-voice-wave-wrap {
  flex: 1;
  min-width: 20px;
  height: 22px;
  overflow: hidden;
  display: block;
  position: relative;
}
.msg-voice-wave {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.msg-voice-wave path {
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.5;
  transition: opacity var(--dur-fast);
  vector-effect: non-scaling-stroke;
}
.message-bubble.playing .msg-voice-wave path {
  opacity: 0.9;
  animation: voiceWaveFlow 1s linear infinite;
}
@keyframes voiceWaveFlow {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-1 * var(--wave-shift, 30px))); }
}

.msg-voice-dur {
  font-size: 12px;
  opacity: 0.7;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.3px;
}

/* —— 转文字按钮（气泡后方，紧凑胶囊） —— */
.msg-voice-to-text {
  display: inline-flex;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  padding: 4px 10px;
  font-size: 11px;
  color: var(--text-secondary);
  cursor: pointer;
  letter-spacing: 0.3px;
  transition: all var(--dur-fast);
  user-select: none;
  line-height: 1.4;
  flex-shrink: 0;
  white-space: nowrap;
}
.msg-voice-to-text:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-deep);
}
.msg-voice-to-text.expanded {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-deep);
}
.msg-voice-to-text:active { transform: scale(0.95); }

/* —— 语音转文字展示（按钮下方） —— */
.msg-voice-text {
  padding: 8px 12px;
  background: var(--bg-soft);
  border-radius: var(--r-sm);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  border-left: 3px solid var(--accent);
  max-width: 240px;
  word-wrap: break-word;
  animation: panelUp 0.2s var(--ease-out);
}
.msg-voice-text-content {
  white-space: pre-wrap;
}

/* —— 纯文字语音气泡标记 —— */
.msg-voice-text-tag {
  font-size: 9px;
  color: var(--accent);
  font-weight: 600;
  margin-left: 1px;
}
.msg-voice-inline-text {
  margin-top: 6px;
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: var(--r-sm);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  white-space: pre-wrap;
  word-wrap: break-word;
  width: 100% !important;
  animation: panelUp 0.2s var(--ease-out);
}
:root[data-theme="dark"] .msg-voice-inline-text {
  background: rgba(255, 255, 255, 0.06);
}

/* ============================================================
   引用消息 + 翻译
   ============================================================ */
.msg-quote {
  border-left: 3px solid var(--accent);
  padding: 4px 8px;
  margin-bottom: 6px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
:root[data-theme="dark"] .msg-quote {
  background: rgba(255, 255, 255, 0.05);
}
.msg-quote-author { color: var(--accent-deep); font-weight: 500; }
.msg-quote-text {
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}
.msg-translation {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--border);
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.msg-translation.loading {
  color: var(--text-tertiary);
}
.msg-translation-label {
  display: inline-block;
  font-size: 10px;
  color: var(--accent-deep);
  background: var(--accent-soft);
  padding: 1px 6px;
  border-radius: var(--r-sm);
  margin-right: 6px;
  letter-spacing: 0.3px;
}

/* —— 图片预览 —— */
.wx-image-viewer {
  position: absolute;
  inset: 0;
  z-index: 900;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base);
}
.wx-image-viewer.active {
  opacity: 1;
  pointer-events: auto;
}
.wx-image-viewer img {
  max-width: 92vw;
  max-height: 88vh;
  object-fit: contain;
  border-radius: var(--r-sm);
}
.wx-image-viewer-close {
  position: absolute;
  top: calc(16px + var(--safe-area-top, env(safe-area-inset-top, 0px)));
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
}
.wx-image-viewer-save {
  position: absolute;
  bottom: calc(28px + var(--safe-area-bottom, env(safe-area-inset-bottom, 0px)));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 13px;
  cursor: pointer;
  z-index: 2;
}

/* ============================================================
   消息长按操作菜单（气泡上方气泡式弹出）
   ============================================================ */
.wx-msg-action-sheet {
  position: absolute;
  z-index: 1000;
  background: rgba(45, 45, 50, 0.92);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  padding: 4px;
  display: flex;
  align-items: center;
  gap: 0;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.9);
  transform-origin: bottom center;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.wx-msg-action-sheet.show {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.wx-msg-action-sheet.below {
  transform-origin: top center;
}
.wx-msg-action-item {
  padding: 7px 10px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.92);
  cursor: pointer;
  text-align: center;
  transition: background 0.12s ease;
  letter-spacing: 0.3px;
  white-space: nowrap;
  border-radius: 7px;
  position: relative;
}
.wx-msg-action-item + .wx-msg-action-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 25%;
  bottom: 25%;
  width: 1px;
  background: rgba(255, 255, 255, 0.12);
}
.wx-msg-action-item:hover { background: rgba(255, 255, 255, 0.12); }
.wx-msg-action-item.danger { color: #ff6b6b; }

.wx-msg-action-arrow {
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background: rgba(45, 45, 50, 0.92);
  border-radius: 2px;
}
.wx-msg-action-sheet.below .wx-msg-action-arrow {
  bottom: auto;
  top: -5px;
}

/* ============================================================
   多选模式
   ============================================================ */
.wx-multiselect-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 800;
  background: var(--bg-elevated);
  border-top: 1px solid var(--border);
  padding: 12px 16px calc(12px + var(--safe-area-bottom, env(safe-area-inset-bottom, 0px)));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  transform: translateY(100%);
  transition: transform var(--dur-base) var(--ease-out);
  box-shadow: var(--shadow-lg);
}
.wx-multiselect-bar.active { transform: translateY(0); }

/* 多选模式：消息右移，圆圈按钮 */
.message-row.ms-mode {
  padding-left: 36px;
  transition: padding-left 0.2s var(--ease-out);
}
.ms-circle {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  background: var(--bg-elevated);
  flex-shrink: 0;
  z-index: 5;
  transition: all 0.15s var(--ease-out);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ms-circle::after {
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  transform: scale(0);
  transition: transform 0.15s var(--ease-spring);
}
.message-row.ms-selected .ms-circle {
  border-color: var(--accent);
  background: var(--accent);
}
.message-row.ms-selected .ms-circle::after {
  transform: scale(1);
  background: #fff;
}
.message-row.ms-selected {
  background: var(--accent-soft);
}

.wx-ms-count {
  font-size: 13px;
  color: var(--text);
  letter-spacing: 0.3px;
}
.wx-ms-count span { color: var(--accent-deep); font-weight: 600; }
.wx-ms-actions {
  display: flex;
  gap: 8px;
}
.wx-ms-btn {
  padding: 6px 14px;
  border-radius: var(--r-sm);
  background: var(--bg-soft);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  border: 1px solid var(--border);
  transition: all var(--dur-fast);
}
.wx-ms-btn:hover:not(:disabled) { background: var(--surface); }
.wx-ms-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.wx-ms-btn.danger { color: var(--danger); }

.message-row.ms-mode {
  cursor: pointer;
  position: relative;
}
.message-row.ms-selected {
  opacity: 0.7;
}

/* ============================================================
   Char 主页 + 设置面板（新）
   ============================================================ */
.wx-profile-actions {
  min-width: 36px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
}
.wx-profile-set-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  cursor: pointer;
  transition: background var(--dur-fast);
}
.wx-profile-set-btn:hover { background: var(--surface); }

.wx-char-info-alias,
.wx-char-info-wxid,
.wx-char-info-region {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 4px;
  letter-spacing: 0.3px;
}

.wx-profile-section-title {
  font-size: 12px;
  color: var(--text-tertiary);
  letter-spacing: 0.5px;
  padding: 16px 16px 6px;
  text-transform: uppercase;
}

.wx-profile-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--dur-fast);
}
.wx-profile-row:last-child { border-bottom: none; }
.wx-profile-row:hover { background: var(--bg-soft); }
.wx-profile-row-label {
  flex: 1;
  font-size: 14px;
  color: var(--text);
  letter-spacing: 0.3px;
}
.wx-profile-row-body {
  flex: 1;
  min-width: 0;
}
.wx-profile-row-desc {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-top: 2px;
}
.wx-profile-row-value {
  font-size: 13px;
  color: var(--text-secondary);
}
.wx-profile-row-value .muted { color: var(--text-tertiary); }
.wx-profile-row-arrow {
  color: var(--text-tertiary);
  font-size: 18px;
  font-weight: 300;
}

/* —— 角色资料页（通讯录入口） —— */
.ci-header-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  cursor: pointer;
  transition: background var(--dur-fast);
}
.ci-header-btn:hover { background: var(--surface); }
.ci-header-btn:active { background: var(--bg-soft); }

.ci-archive-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.ci-info-body {
  padding: 0 !important;
  background: var(--bg);
}

.ci-info-avatar {
  border-radius: 50%;
  cursor: pointer;
  transition: opacity var(--dur-fast);
}
.ci-info-avatar:active { opacity: 0.7; }

.ci-info-group {
  background: var(--bg-elevated);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  overflow: hidden;
  margin: 0 16px 12px;
}

.ci-info-tip {
  padding: 12px 16px;
  color: var(--text-tertiary);
  font-size: 12px;
  line-height: 1.5;
}

/* —— 存档列表页 —— */
.ci-archive-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 24px;
  text-align: center;
  color: var(--text-tertiary);
  font-size: 15px;
}

.ci-archive-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-elevated);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  margin-bottom: 10px;
}

.ci-archive-item-info {
  flex: 1;
  min-width: 0;
}

.ci-archive-item-name {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ci-archive-item-date {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 3px;
}

.ci-archive-item-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.ci-archive-btn {
  padding: 5px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  transition: all var(--dur-fast);
  white-space: nowrap;
}
.ci-archive-btn:hover { background: var(--bg-soft); }
.ci-archive-btn:active { transform: scale(0.96); }

.ci-archive-import {
  color: var(--accent-deep);
  border-color: var(--accent-deep);
}
.ci-archive-import:hover {
  background: var(--accent-soft);
}

.ci-archive-delete {
  color: var(--danger);
  border-color: var(--danger);
}
.ci-archive-delete:hover {
  background: rgba(250, 81, 81, 0.08);
}

/* —— 微信风格开关 —— */
.wx-toggle {
  width: 44px;
  height: 26px;
  border-radius: var(--r-full);
  background: var(--surface);
  position: relative;
  cursor: pointer;
  transition: background var(--dur-fast);
  flex-shrink: 0;
}
.wx-toggle.on {
  background: var(--accent);
}
.wx-toggle-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: var(--r-full);
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform var(--dur-fast);
}
.wx-toggle.on .wx-toggle-knob {
  transform: translateX(18px);
}

/* —— 通用按钮 —— */
.btn {
  padding: 8px 14px;
  border-radius: var(--r-sm);
  font-size: 14px;
  cursor: pointer;
  border: none;
  transition: all var(--dur-fast);
  font-family: var(--font-body);
  letter-spacing: 0.3px;
}
.btn-primary {
  background: var(--accent);
  color: var(--text-inverse, #fff);
}
.btn-primary:hover { background: var(--accent-deep); }
.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-ghost:hover { background: var(--bg-soft); }
.btn-lg { padding: 12px 18px; font-size: 15px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.input {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: 14px;
  font-family: var(--font-body);
}
.input:focus { outline: none; border-color: var(--accent); }

/* ============================================================
   新增页面通用样式
   ============================================================ */
.wx-moments-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg);
}

/* ============================================================
   亲密空间页面
   ============================================================ */
.intimate-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 24px;
  text-align: center;
}
.intimate-empty-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFE0EC 0%, #FFD1DC 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FF6B9D;
  margin-bottom: 20px;
}
.intimate-empty-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}
.intimate-empty-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.intimate-section {
  margin-bottom: 24px;
}
.intimate-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 0 16px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.3px;
}
.intimate-type-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.intimate-card-list {
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.intimate-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.intimate-card:active {
  transform: scale(0.97);
}
.intimate-card-bg {
  position: absolute;
  inset: 0;
  opacity: 0.15;
}
.intimate-card-content {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
}
.intimate-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-soft) 0%, var(--accent) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 600;
  flex-shrink: 0;
  overflow: hidden;
}
.intimate-avatar.has-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.intimate-info {
  flex: 1;
  min-width: 0;
}
.intimate-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.intimate-type-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-size: 11px;
  font-weight: 500;
}
.intimate-card-footer {
  position: relative;
  padding: 0 16px 14px;
  font-size: 11px;
  color: var(--text-tertiary);
  background: var(--surface);
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-radius: 0 0 16px 16px;
  margin-top: -1px;
}

/* ============================================================
   亲密空间 — 新版（排行榜 + 详情页）
   ============================================================ */
.is-body { padding: 0 16px 40px; }

.is-ranking-header {
  text-align: center;
  padding: 20px 0 16px;
}
.is-ranking-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}
.is-ranking-sub {
  font-size: 13px;
  color: var(--text-tertiary);
  margin-top: 4px;
}

.is-ranking-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.is-rank-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--surface);
  border-radius: 16px;
  cursor: pointer;
  transition: transform var(--dur-fast), box-shadow var(--dur-fast);
  border: 1px solid var(--border);
}
.is-rank-item:active { transform: scale(0.98); }
.is-rank-item.is-rank-1 { border-color: rgba(255, 107, 157, 0.3); box-shadow: 0 2px 12px rgba(255, 107, 157, 0.08); }
.is-rank-item.is-rank-2 { border-color: rgba(255, 169, 77, 0.2); }
.is-rank-item.is-rank-3 { border-color: rgba(255, 212, 59, 0.2); }
.is-rank-num {
  width: 28px;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-tertiary);
  flex-shrink: 0;
}
.is-rank-1 .is-rank-num { color: #FF6B9D; }
.is-rank-2 .is-rank-num { color: #FFA94D; }
.is-rank-3 .is-rank-num { color: #FFD43B; }
.is-rank-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  flex-shrink: 0;
  overflow: hidden;
}
.is-rank-avatar.has-image img { width: 100%; height: 100%; object-fit: cover; }
.is-rank-avatar:not(.has-image) { background: linear-gradient(135deg, #FF6B9D 0%, #FF8E53 100%); }
.is-rank-info {
  flex: 1;
  min-width: 0;
}
.is-rank-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.is-rank-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.is-rel-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 8px;
  font-weight: 500;
}
.is-rank-days {
  font-size: 12px;
  color: var(--text-tertiary);
}
.is-rank-rounds {
  text-align: center;
  flex-shrink: 0;
  padding-left: 8px;
}
.is-rank-rounds-num {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}
.is-rank-rounds-label {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

.is-detail-hero {
  position: relative;
  padding: 50px 20px 28px;
  text-align: center;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.is-detail-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.15) 100%);
}
.is-detail-nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.is-detail-back, .is-switch-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  background: rgba(255,255,255,0.15);
  transition: background var(--dur-fast);
}
.is-detail-back:active, .is-switch-btn:active { background: rgba(255,255,255,0.3); }
.is-detail-switch {
  display: flex;
  align-items: center;
  gap: 4px;
}
.is-detail-title {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 8px;
}
.is-detail-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.is-nav-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  background: rgba(255,255,255,0.15);
  transition: background var(--dur-fast);
}
.is-nav-btn:active { background: rgba(255,255,255,0.3); }
.is-hero-bg-hint {
  position: relative;
  font-size: 11px;
  color: rgba(255,255,255,0.6);
  margin-top: 10px;
  pointer-events: none;
}
.is-detail-hero { cursor: pointer; }
.is-detail-avatar {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 28px;
  font-weight: 600;
  background: rgba(255,255,255,0.2);
  border: 3px solid rgba(255,255,255,0.4);
  overflow: hidden;
}
.is-detail-avatar.has-image img { width: 100%; height: 100%; object-fit: cover; }
.is-detail-name {
  position: relative;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.is-detail-rel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
}
.is-rel-badge-light {
  font-size: 12px;
  padding: 3px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,0.25);
  color: #fff;
  font-weight: 500;
}
.is-rel-note {
  font-size: 12px;
  color: rgba(255,255,255,0.8);
}

.is-detail-body { padding: 16px 16px 40px; }

.is-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 20px;
}
.is-stat-card {
  text-align: center;
  padding: 14px 4px;
  background: var(--surface);
  border-radius: 14px;
  border: 1px solid var(--border);
}
.is-stat-num {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}
.is-stat-label {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 4px;
}

.is-section {
  margin-bottom: 20px;
}
.is-section-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 10px;
}
.is-section-title svg { color: var(--text-tertiary); }
.is-section-action {
  margin-left: auto;
  font-size: 13px;
  color: var(--accent);
  cursor: pointer;
  font-weight: 500;
}

.is-token-bar {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 16px;
  background: var(--surface);
  border-radius: 14px;
  border: 1px solid var(--border);
}
.is-token-num {
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
}
.is-token-desc {
  font-size: 12px;
  color: var(--text-tertiary);
}

.is-topics {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  background: var(--surface);
  border-radius: 14px;
  border: 1px solid var(--border);
}
.is-topic-item {
  display: flex;
  align-items: center;
  gap: 10px;
}
.is-topic-word {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  min-width: 60px;
  max-width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.is-topic-bar-bg {
  flex: 1;
  height: 8px;
  background: var(--bg-soft);
  border-radius: 4px;
  overflow: hidden;
}
.is-topic-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}
.is-topic-count {
  font-size: 12px;
  color: var(--text-tertiary);
  min-width: 24px;
  text-align: right;
}

.is-anniv-empty {
  padding: 20px;
  text-align: center;
  font-size: 13px;
  color: var(--text-tertiary);
  background: var(--surface);
  border-radius: 14px;
  border: 1px solid var(--border);
}
.is-anniv-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.is-anniv-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface);
  border-radius: 12px;
  border: 1px solid var(--border);
}
.is-anniv-date {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  min-width: 80px;
  text-align: center;
  padding: 4px 8px;
  background: var(--bg-soft);
  border-radius: 8px;
}
.is-anniv-info {
  flex: 1;
  min-width: 0;
}
.is-anniv-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
}
.is-anniv-char-tag {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(255, 107, 157, 0.1);
  color: #FF6B9D;
  font-weight: 500;
}
.is-anniv-days {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 2px;
}
.is-anniv-del {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  cursor: pointer;
  border-radius: 8px;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.is-anniv-del:active { background: var(--bg-soft); color: var(--danger); }

.is-rel-actions {
  padding: 8px 0;
}
.is-rel-btn {
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: background var(--dur-fast);
}
.is-rel-unbind {
  background: var(--surface);
  color: var(--danger);
  border: 1px solid var(--border);
}
.is-rel-unbind:active { background: var(--bg-soft); }

/* ============================================================
   相机页面
   ============================================================ */
.camera-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #000;
  color: #fff;
}
.camera-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  padding-top: calc(12px + var(--safe-area-top, env(safe-area-inset-top, 0px)));
  background: rgba(0,0,0,0.5);
  flex-shrink: 0;
}
.camera-back {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.camera-title {
  font-size: 16px;
  font-weight: 600;
}
.camera-tabs {
  display: flex;
  justify-content: center;
  gap: 24px;
  padding: 12px 0;
  background: rgba(0,0,0,0.5);
  flex-shrink: 0;
}
.camera-tab {
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  padding: 6px 16px;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s;
}
.camera-tab.active {
  color: #fff;
  background: rgba(255,255,255,0.2);
}
.camera-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 16px;
  overflow-y: auto;
}
.camera-describe {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
}
.camera-describe-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.7);
  margin-bottom: 20px;
}
.camera-describe-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
}
.camera-describe-desc {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  text-align: center;
  margin-bottom: 24px;
  line-height: 1.5;
}
.camera-textarea {
  width: 100%;
  padding: 12px 14px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 12px;
  color: #fff;
  font-size: 14px;
  font-family: inherit;
  resize: none;
  margin-bottom: 16px;
}
.camera-textarea:focus {
  outline: none;
  border-color: rgba(255,255,255,0.5);
}
.camera-textarea::placeholder {
  color: rgba(255,255,255,0.4);
}
.camera-send-btn {
  background: #07C160 !important;
  border: none !important;
  color: #fff !important;
}

.camera-photo {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.camera-upload-area {
  flex: 1;
  min-height: 200px;
  border: 2px dashed rgba(255,255,255,0.3);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-bottom: 16px;
  background: rgba(255,255,255,0.05);
  position: relative;
  transition: background 0.2s;
}
.camera-upload-area:hover {
  background: rgba(255,255,255,0.1);
}
.camera-upload-icon {
  color: rgba(255,255,255,0.5);
  margin-bottom: 12px;
}
.camera-upload-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 6px;
}
.camera-upload-desc {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
}
.camera-preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
}
.camera-retake {
  position: absolute;
  bottom: 12px;
  right: 12px;
  padding: 8px 16px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  border-radius: 20px;
  font-size: 13px;
  cursor: pointer;
}
.camera-photo-desc-input {
  margin-bottom: 16px;
}

/* ============================================================
   位置发送页面
   ============================================================ */
.location-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg);
}
.location-body {
  flex: 1;
  overflow-y: auto;
}
.location-map {
  position: relative;
  height: 200px;
  background: linear-gradient(135deg, var(--accent-soft) 0%, var(--bg-soft) 100%);
  overflow: hidden;
}
.location-map-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px);
  background-size: 30px 30px;
}
.location-map-pin {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -100%);
  color: var(--accent-deep);
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15));
}
.location-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
}
.location-search-icon {
  color: var(--text-tertiary);
  flex-shrink: 0;
}
.location-search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 15px;
}
.location-search-input::placeholder {
  color: var(--text-tertiary);
}
.location-gps-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 16px;
  color: var(--accent-deep);
  font-size: 14px;
  font-weight: 500;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.2s;
}
.location-gps-btn:active {
  background: var(--surface);
}
.location-section-title {
  padding: 16px 16px 8px;
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
}
.location-list {
  background: var(--bg-elevated);
}
.location-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.2s;
}
.location-item:last-child {
  border-bottom: none;
}
.location-item:active {
  background: var(--surface);
}
.location-item.selected {
  background: var(--accent-soft);
}
.location-item-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-deep);
  flex-shrink: 0;
}
.location-item.selected .location-item-icon {
  background: var(--accent);
  color: var(--text-inverse);
}
.location-item-body {
  flex: 1;
  min-width: 0;
}
.location-item-name {
  font-size: 15px;
  color: var(--text);
  font-weight: 500;
  margin-bottom: 2px;
}
.location-item-addr {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.location-item-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  flex-shrink: 0;
  position: relative;
}
.location-item.selected .location-item-check {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
}
.location-item.selected .location-item-check::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 6px;
  width: 5px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.location-virtual-tip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 20px 16px;
  font-size: 12px;
  color: var(--text-tertiary);
}

/* ============================================================
   建立关系页面
   ============================================================ */
.relationship-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg);
}
.relationship-body {
  flex: 1;
  padding: 24px 16px;
  overflow-y: auto;
}
.relationship-char {
  text-align: center;
  margin-bottom: 28px;
}
.relationship-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent) 0%, var(--highlight) 100%);
  color: var(--text-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 600;
  margin: 0 auto 12px;
  font-family: var(--font-display);
}
.relationship-name {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.relationship-desc {
  font-size: 13px;
  color: var(--text-secondary);
}
.relationship-types {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.relationship-type-card {
  position: relative;
  padding: 20px 16px;
  background: var(--bg-elevated);
  border-radius: var(--r-md);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s var(--ease-out);
  text-align: center;
}
.relationship-type-card:active {
  transform: scale(0.98);
}
.relationship-type-card.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.relationship-type-icon {
  width: 44px;
  height: 44px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s var(--ease-out);
}
.relationship-type-icon svg {
  width: 26px;
  height: 26px;
  stroke: var(--accent-deep);
  transition: all 0.2s var(--ease-out);
}
.relationship-type-card.selected .relationship-type-icon {
  background: var(--accent-deep);
}
.relationship-type-card.selected .relationship-type-icon svg {
  stroke: #fff;
}
.relationship-type-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.relationship-type-desc {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.4;
}
.relationship-type-check {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  opacity: 0;
  transition: opacity 0.2s;
}
.relationship-type-card.selected .relationship-type-check {
  opacity: 1;
  background: var(--accent-deep);
  border-color: var(--accent-deep);
}
.relationship-type-card.selected .relationship-type-check::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 6px;
  width: 5px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.rel-remove-btn {
  margin-top: 16px;
  color: var(--danger);
  border: 1px solid var(--danger);
}
.rel-confirm-btn {
  margin-top: 24px;
}

.field-group {
  margin-bottom: 16px;
}
.field-label {
  display: block;
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 8px;
  font-weight: 500;
}
.input {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: 15px;
  font-family: inherit;
  transition: border-color 0.2s;
}
.input:focus {
  outline: none;
  border-color: var(--accent);
}
.input::placeholder {
  color: var(--text-tertiary);
}

/* ============================================================
   转账页面
   ============================================================ */
.transfer-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg);
}
.transfer-body {
  flex: 1;
  padding: 24px 16px;
  overflow-y: auto;
}
.transfer-to {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 24px;
}
.transfer-name {
  font-weight: 600;
  color: var(--text);
}
.transfer-amount-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
}
.transfer-currency {
  font-size: 28px;
  font-weight: 500;
  color: var(--text);
  margin-right: 8px;
}
.transfer-amount-input {
  font-size: 48px;
  font-weight: 500;
  color: var(--text);
  background: transparent;
  border: none;
  outline: none;
  width: 200px;
  text-align: center;
  font-family: inherit;
}
.transfer-amount-input::placeholder {
  color: var(--text-tertiary);
}
.transfer-remark {
  margin-bottom: 24px;
}
.transfer-remark-input {
  width: 100%;
  padding: 12px 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  text-align: center;
}
.transfer-remark-input:focus {
  outline: none;
  border-bottom-color: var(--accent);
}
.transfer-remark-input::placeholder {
  color: var(--text-tertiary);
}
.transfer-balance {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  background: var(--bg-soft);
  border-radius: 12px;
  margin-bottom: 24px;
  font-size: 13px;
  color: var(--text-secondary);
}
.transfer-balance-amount {
  font-weight: 600;
  color: var(--text);
}
.transfer-btn {
  background: linear-gradient(135deg, #07C160, #06A857) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 600;
  border-radius: 14px !important;
  height: 52px !important;
  font-size: 15px !important;
  box-shadow: 0 4px 12px rgba(7, 193, 96, 0.28);
  transition: transform 0.1s, box-shadow 0.15s, filter 0.15s;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.transfer-btn:active {
  transform: scale(0.98);
  filter: brightness(0.96);
  box-shadow: 0 2px 6px rgba(7, 193, 96, 0.22);
}
.transfer-tip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 20px;
  font-size: 12px;
  color: var(--text-tertiary);
}

/* ============================================================
   红包页面
   ============================================================ */
.redpacket-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #D34035;
}
.redpacket-body {
  flex: 1;
  padding: 24px 16px;
  overflow-y: auto;
}
.redpacket-card {
  background: linear-gradient(180deg, #FA3C2F 0%, #D34035 100%);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 24px;
  box-shadow: 0 8px 24px rgba(211, 64, 53, 0.3);
}
.redpacket-top {
  padding: 20px 16px 12px;
  text-align: center;
}
.redpacket-type {
  font-size: 14px;
  color: rgba(255,255,255,0.8);
  font-weight: 500;
}
.redpacket-middle {
  padding: 24px 20px;
}
.redpacket-amount-label {
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  margin-bottom: 8px;
}
.redpacket-amount-row {
  display: flex;
  align-items: flex-end;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.2);
  margin-bottom: 16px;
}
.redpacket-currency {
  font-size: 24px;
  color: #FFD700;
  margin-right: 6px;
  margin-bottom: 8px;
}
.redpacket-amount-input {
  font-size: 40px;
  font-weight: 600;
  color: #FFD700;
  background: transparent;
  border: none;
  outline: none;
  width: 180px;
  font-family: inherit;
}
.redpacket-amount-input::placeholder {
  color: rgba(255, 215, 0, 0.4);
}
.redpacket-divider {
  height: 1px;
  background: rgba(255,255,255,0.15);
  margin: 12px 0;
}
.redpacket-greeting-row {
  padding: 10px 0;
}
.redpacket-greeting-input {
  width: 100%;
  padding: 10px 12px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  font-family: inherit;
  text-align: center;
}
.redpacket-greeting-input:focus {
  outline: none;
  border-color: rgba(255, 215, 0, 0.5);
}
.redpacket-greeting-input::placeholder {
  color: rgba(255,255,255,0.4);
}
.redpacket-bottom {
  padding: 16px 20px;
  background: rgba(0,0,0,0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.redpacket-total {
  font-size: 13px;
  color: rgba(255,255,255,0.8);
}
.redpacket-total-amount {
  font-size: 16px;
  font-weight: 600;
  color: #FFD700;
}
.redpacket-btn {
  background: #FFD700 !important;
  border: none !important;
  color: #D34035 !important;
  font-weight: 600;
}

/* ============================================================
   语音通话页面
   ============================================================ */
.voicecall-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.voicecall-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}
.voicecall-overlay {
  position: absolute;
  inset: 0;
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
}
.voicecall-content {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 80px;
  padding-top: calc(80px + var(--safe-area-top, env(safe-area-inset-top, 0px)));
  color: #fff;
  z-index: 1;
}
.voicecall-avatar-area {
  margin-bottom: 24px;
}
.voicecall-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  font-weight: 600;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
.voicecall-avatar.has-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.voicecall-name {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 8px;
}
.voicecall-status {
  font-size: 14px;
  color: rgba(255,255,255,0.7);
  margin-bottom: 40px;
}
.voicecall-message-input {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 24px;
  width: 100%;
  max-width: 400px;
  margin-bottom: 24px;
}
.voicecall-input {
  flex: 1;
  padding: 10px 16px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 24px;
  color: #fff;
  font-size: 14px;
  font-family: inherit;
}
.voicecall-input:focus {
  outline: none;
  border-color: rgba(255,255,255,0.4);
}
.voicecall-input::placeholder {
  color: rgba(255,255,255,0.4);
}
.voicecall-send {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #07C160;
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.voicecall-actions {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: 40px;
  padding: 32px 24px;
  padding-bottom: calc(32px + var(--safe-area-bottom, env(safe-area-inset-bottom, 0px)));
}
.voicecall-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s;
  background: rgba(255,255,255,0.15);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
}
.voicecall-btn:active {
  transform: scale(0.9);
}
.voicecall-btn-hangup {
  background: #FF3B30;
  border-color: #FF3B30;
}
.voicecall-btn-answer {
  background: #07C160;
  border-color: #07C160;
}
.voicecall-tip {
  position: relative;
  z-index: 1;
  text-align: center;
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  padding-bottom: 20px;
}

/* 通话中消息列表 */
.voicecall-msg-list {
  flex: 1;
  width: 100%;
  max-width: 400px;
  padding: 0 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.voicecall-msg {
  max-width: 80%;
  padding: 8px 14px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.4;
  word-break: break-word;
}
.voicecall-msg-user {
  align-self: flex-end;
  background: #07C160;
  color: #fff;
  border-bottom-right-radius: 4px;
}
.voicecall-msg-char {
  align-self: flex-start;
  background: rgba(255,255,255,0.15);
  color: #fff;
  border-bottom-left-radius: 4px;
}
.voicecall-msg.streaming { opacity: 0.7; }
.voicecall-btn-back {
  background: rgba(255,255,255,0.15);
  color: #fff;
}
.voicecall-btn.muted {
  background: rgba(239, 68, 68, 0.85);
  border-color: rgba(239, 68, 68, 0.9);
  opacity: 1;
}
.voicecall-btn-minimize {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
}
.voicecall-btn-minimize:hover {
  background: rgba(255, 255, 255, 0.25);
}
.voicecall-btn-minimize svg {
  width: 22px;
  height: 22px;
}

/* —— 通话悬浮窗（全局，挂载到 body） —— */
.voicecall-float-global {
  position: fixed;
  width: 160px;
  height: 60px;
  background: rgba(20, 20, 28, 0.92);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-radius: 30px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  padding: 0 8px 0 10px;
  gap: 8px;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  z-index: 9999;
  transition: box-shadow 0.2s;
}
.voicecall-float-global:active {
  cursor: grabbing;
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.15);
}
.voicecall-float-drag {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.voicecall-float-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
  overflow: hidden;
  filter: saturate(0.9);
}
.voicecall-float-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.voicecall-float-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.voicecall-float-name {
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0.2px;
}
.voicecall-float-time {
  font-size: 11px;
  color: #4ade80;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.3px;
}
.voicecall-float-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.voicecall-float-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  cursor: pointer;
  transition: background var(--dur-fast), transform var(--dur-fast);
}
.voicecall-float-btn:hover {
  background: rgba(255, 255, 255, 0.28);
}
.voicecall-float-btn:active {
  transform: scale(0.88);
}
.voicecall-float-btn.muted {
  background: rgba(239, 68, 68, 0.9);
}
.voicecall-float-btn.hangup {
  background: #ef4444;
}
.voicecall-float-btn svg {
  width: 16px;
  height: 16px;
}

/* ============================================================
   消息卡片重做
   ============================================================ */

/* 红包卡片 */
.msg-card-redpacket {
  max-width: 240px;
  background: linear-gradient(180deg, #FA3C2F 0%, #D34035 100%);
  border-radius: 14px;
  padding: 16px;
  color: #fff;
  box-shadow: 0 4px 12px rgba(211, 64, 53, 0.3);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.msg-card-redpacket .redpacket-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #FFD700;
  color: #D34035;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  font-weight: 700;
  font-size: 18px;
}
.msg-card-redpacket .redpacket-greeting {
  font-size: 14px;
  margin-bottom: 6px;
  font-weight: 500;
}
.msg-card-redpacket .redpacket-from {
  font-size: 12px;
  opacity: 0.8;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.2);
}

/* 照片描述卡片 */
.msg-card-photo {
  max-width: 280px;
  background: var(--surface);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.msg-card-photo .photo-img {
  width: 100%;
  height: 180px;
  background: linear-gradient(135deg, #e0e0e0 0%, #f5f5f5 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  font-size: 13px;
  overflow: hidden;
}
.msg-card-photo .photo-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.msg-card-photo .photo-desc {
  padding: 12px;
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
}

/* 位置消息卡片 */
.msg-card-location {
  max-width: 260px;
  background: var(--surface);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  cursor: pointer;
}
.msg-card-location .location-map {
  height: 120px;
  background: linear-gradient(135deg, #a8e6cf 0%, #dcedc1 100%);
  position: relative;
}
.msg-card-location .location-pin {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -100%);
  color: #FF3B30;
}
.msg-card-location .location-info {
  padding: 12px;
}
.msg-card-location .location-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.msg-card-location .location-address {
  font-size: 12px;
  color: var(--text-secondary);
}

/* 语音消息卡片 */
.msg-card-voice {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 120px;
  max-width: 200px;
  padding: 10px 14px;
  background: var(--surface);
  border-radius: 14px;
  cursor: pointer;
}
.msg-card-voice .voice-play {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.msg-card-voice .voice-wave {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 24px;
}
.msg-card-voice .voice-wave-bar {
  width: 3px;
  background: var(--accent);
  border-radius: 2px;
  animation: wave 1s ease-in-out infinite;
}
.msg-card-voice .voice-wave-bar:nth-child(1) { height: 40%; animation-delay: 0s; }
.msg-card-voice .voice-wave-bar:nth-child(2) { height: 70%; animation-delay: 0.1s; }
.msg-card-voice .voice-wave-bar:nth-child(3) { height: 100%; animation-delay: 0.2s; }
.msg-card-voice .voice-wave-bar:nth-child(4) { height: 60%; animation-delay: 0.3s; }
.msg-card-voice .voice-wave-bar:nth-child(5) { height: 80%; animation-delay: 0.4s; }
.msg-card-voice .voice-wave-bar:nth-child(6) { height: 50%; animation-delay: 0.5s; }
.msg-card-voice .voice-duration {
  font-size: 12px;
  color: var(--text-secondary);
  flex-shrink: 0;
}
@keyframes wave {
  0%, 100% { transform: scaleY(0.5); }
  50% { transform: scaleY(1); }
}

/* 引用消息卡片 */
.msg-card-quote {
  max-width: 280px;
  padding: 10px 14px;
  background: var(--surface);
  border-radius: 14px;
  border-left: 3px solid var(--accent);
}
.msg-card-quote .quote-author {
  font-size: 12px;
  color: var(--accent-deep);
  font-weight: 600;
  margin-bottom: 4px;
}
.msg-card-quote .quote-text {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.msg-card-quote .quote-content {
  font-size: 14px;
  color: var(--text);
  line-height: 1.5;
}

/* ============================================================
   表情面板优化
   ============================================================ */
.chat-panel {
  max-height: 280px;
}
.chat-emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
}
.chat-emoji-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  font-size: 22px;
  cursor: pointer;
  border-radius: var(--r-sm);
  transition: background 0.15s;
  user-select: none;
}

/* 表情包发送按钮 */
.sticker-send-btn {
  margin-top: 8px;
  padding: 8px 16px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--r-sm);
  font-size: 13px;
  cursor: pointer;
  width: 100%;
  font-weight: 500;
}

/* ============================================================
   记忆系统 UI
   ============================================================ */

/* —— 居中卡片弹窗（区别于底部 sheet） —— */
.wx-modal-card {
  width: 88%;
  max-width: 340px;
  background: var(--bg-elevated);
  border-radius: var(--r-lg);
  padding: 20px 16px 12px;
  box-shadow: var(--shadow-xl);
  transform: scale(0.92);
  opacity: 0;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.wx-modal-overlay.active .wx-modal-card {
  transform: scale(1);
  opacity: 1;
}
.wx-modal-overlay:has(.wx-modal-card) {
  align-items: center;
}

.wx-modal-card .wx-modal-title {
  text-align: center;
  margin-bottom: 14px;
}

.wx-modal-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}
.wx-modal-btn {
  flex: 1;
  padding: 9px 0;
  border: none;
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  background: var(--surface);
  color: var(--text);
  transition: background var(--dur-fast);
}
.wx-modal-btn:active { background: var(--surface-hover); }
.wx-modal-cancel { background: var(--surface); color: var(--text-secondary); }
.wx-modal-confirm { background: var(--accent); color: #fff; }
.wx-modal-confirm:active { opacity: 0.85; }
.wx-modal-delete { background: var(--surface); color: #e74c3c; }
.wx-modal-reset { background: var(--surface); color: var(--text-secondary); flex: 0 0 auto; padding: 9px 14px; }

/* —— Token 估算条 —— */
.mem-token-bar {
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
}
.mem-token-progress {
  height: 4px;
  background: var(--surface);
  border-radius: 2px;
  overflow: hidden;
}
.mem-token-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width var(--dur-base) var(--ease-out);
}

/* —— 记忆类型徽章 —— */
.mem-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 3px;
  flex-shrink: 0;
  line-height: 1.4;
}
.mem-badge-important { background: rgba(231, 76, 60, 0.15); color: #e74c3c; }
.mem-badge-auto { background: rgba(52, 152, 219, 0.15); color: #3498db; }
.mem-badge-manual { background: var(--surface); color: var(--text-tertiary); }

/* —— 记忆列表项 —— */
.mem-item {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 10px 14px;
}
.mem-item-content {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  font-size: 13px;
  line-height: 1.5;
}
.mem-item-text {
  flex: 1;
  color: var(--text);
  word-break: break-word;
}
.mem-item-time {
  font-size: 11px;
  color: var(--text-tertiary);
  flex-shrink: 0;
  margin-top: 1px;
}
.mem-item-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  font-size: 12px;
}
.mem-edit { color: var(--accent); cursor: pointer; }
.mem-edit:active { opacity: 0.6; }
.mem-delete { color: #e74c3c; cursor: pointer; }
.mem-delete:active { opacity: 0.6; }

/* —— 空状态 —— */
.mem-empty {
  padding: 40px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--text-tertiary);
  line-height: 1.6;
}

/* char 重要记忆页 */
.mem-important-intro {
  padding: 12px 16px 4px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.6;
}
.mem-importance-label {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-left: 4px;
}

/* —— 记忆编辑器 —— */
.mem-editor-textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  font-size: 14px;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  resize: vertical;
  outline: none;
  transition: border-color var(--dur-fast);
  box-sizing: border-box;
}
.mem-editor-textarea:focus { border-color: var(--accent); }
.mem-editor-type {
  display: flex;
  gap: 16px;
  margin-top: 10px;
  font-size: 13px;
  color: var(--text-secondary);
}
.mem-editor-type label {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

/* —— 提示词编辑器 —— */
.mem-prompt-modal { max-width: 360px; }
.mem-prompt-hint {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-bottom: 8px;
  line-height: 1.5;
}
.mem-prompt-textarea {
  font-size: 12px;
  font-family: var(--font-mono, monospace);
  line-height: 1.6;
  resize: vertical;
}

/* —— 滑块行 —— */
.wx-profile-row-slider {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 10px 14px;
}
.wx-profile-row-slider .wx-profile-row-label {
  font-size: 14px;
  color: var(--text);
}
.mem-slider-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.mem-slider-wrap.mem-slider-mini {
  gap: 8px;
}
.mem-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 2px;
  background: var(--surface);
  outline: none;
  cursor: pointer;
}
.mem-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  transition: transform var(--dur-fast);
}
.mem-slider::-webkit-slider-thumb:active {
  transform: scale(1.2);
}
.mem-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.mem-slider-value {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  min-width: 52px;
  text-align: right;
  flex-shrink: 0;
}
.mem-slider-mini .mem-slider-value {
  min-width: 40px;
  font-size: 11px;
}

/* —— Token 信息行 —— */
.mem-token-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--text-secondary);
}
.mem-token-info span:last-child {
  font-weight: 600;
  color: var(--text);
}

/* —— 总结提示行 —— */
.mem-summary-hint-row {
  padding: 4px 14px 6px !important;
  min-height: auto !important;
}
.mem-summary-hint {
  font-size: 12px;
  color: var(--text-secondary);
  padding-left: 4px;
}
.mem-summary-hint b {
  color: var(--accent);
  font-weight: 700;
}

/* —— 重要程度星标 —— */
.mem-star {
  font-size: 12px;
  color: var(--text-tertiary);
  line-height: 1;
}
.mem-star-filled {
  color: #f5a623;
}
.mem-importance-display {
  display: inline-flex;
  gap: 1px;
  margin-left: auto;
}
.mem-stars-input {
  display: flex;
  gap: 6px;
}
.mem-star-input {
  font-size: 22px;
  color: var(--text-tertiary);
  cursor: pointer;
  line-height: 1;
  transition: color var(--dur-fast), transform var(--dur-fast);
  user-select: none;
}
.mem-star-input:active {
  transform: scale(1.2);
}
.mem-star-input.mem-star-filled {
  color: #f5a623;
}

/* —— 分组徽章 —— */
.mem-badge-category {
  background: rgba(120, 100, 80, 0.12);
  color: #8b7355;
  font-size: 10px;
}

/* —— 记忆分组头 —— */
.mem-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 6px;
  gap: 8px;
}
.mem-group-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.3px;
}
.mem-group-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}
.mem-group-sort, .mem-group-rename, .mem-group-summarize, .mem-group-delete {
  cursor: pointer;
  color: var(--text-tertiary);
  transition: color var(--dur-fast);
  padding: 2px 4px;
}
.mem-group-sort:hover { color: var(--accent); }
.mem-group-rename:hover { color: var(--accent); }
.mem-group-summarize:hover { color: var(--accent); }
.mem-group-delete:hover { color: #e74c3c; }

/* —— Token 容量条 —— */
.mem-token-bar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 16px;
}
.mem-token-info {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--text-secondary);
}
.mem-token-progress {
  height: 4px;
  background: var(--surface);
  border-radius: var(--r-full);
  overflow: hidden;
}
.mem-token-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-deep) 100%);
  border-radius: var(--r-full);
  transition: width var(--dur-base) var(--ease-out);
}

/* —— 滑块 —— */
.mem-slider-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.mem-slider-wrap.mem-slider-mini { width: 100%; }
.mem-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 120px;
  height: 4px;
  background: var(--surface);
  border-radius: var(--r-full);
  outline: none;
  cursor: pointer;
}
.mem-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: 2px solid var(--bg);
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.mem-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: 2px solid var(--bg);
}
.mem-slider-value {
  font-size: 12px;
  color: var(--text-secondary);
  min-width: 40px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* —— 工具栏（搜索+筛选） —— */
.mem-toolbar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 16px 12px;
}
.mem-toolbar-search input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  padding: 8px 14px;
  font-size: 13px;
  background: var(--surface);
  color: var(--text);
  outline: none;
  box-sizing: border-box;
  transition: border-color var(--dur-fast);
}
.mem-toolbar-search input:focus { border-color: var(--accent); }
.mem-toolbar-filters {
  display: flex;
  gap: 8px;
}
.mem-toolbar-select {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 6px 10px;
  font-size: 12px;
  background: var(--surface);
  color: var(--text);
  outline: none;
  cursor: pointer;
}

/* —— 总结提示 —— */
.mem-summary-hint-row { padding: 4px 16px 8px; }
.mem-summary-hint {
  font-size: 12px;
  color: var(--text-tertiary);
  padding: 6px 12px;
  background: var(--surface);
  border-radius: var(--r-sm);
}
.mem-summary-hint b { color: var(--accent); }

/* —— 筛选提示 —— */
.mem-filtered-hint {
  font-size: 12px;
  color: var(--text-tertiary);
  padding: 6px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.mem-batch-del-link {
  color: #e74c3c;
  cursor: pointer;
  margin-left: auto;
}

/* —— 合并栏 —— */
.mem-merge-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: var(--surface);
  border-radius: var(--r-sm);
  margin: 8px 16px;
  font-size: 13px;
}
.mem-merge-actions { display: flex; gap: 8px; }
.mem-merge-cancel-btn, .mem-merge-do-btn {
  border: none;
  border-radius: var(--r-full);
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--dur-fast);
}
.mem-merge-cancel-btn {
  background: var(--surface-hover);
  color: var(--text-secondary);
}
.mem-merge-do-btn {
  background: var(--accent);
  color: #fff;
}
.mem-merge-do-btn:active { transform: scale(0.96); }

/* —— 重要度星星 —— */
.mem-star {
  font-size: 12px;
  color: var(--border-strong);
  line-height: 1;
}
.mem-star-filled { color: #f5a623; }

/* —— 记忆项布局修复 —— */
.mem-item .mem-item-body {
  flex: 1;
  min-width: 0;
  width: 100%;
}
.mem-item-text {
  flex: 1;
  color: var(--text);
  word-break: break-word;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  min-height: 20px;
}

/* —— 记忆项新布局 —— */
.mem-item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mem-item-header {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.mem-item-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mem-item-merge {
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
}
.mem-checkbox {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  cursor: pointer;
  accent-color: var(--accent);
  flex-shrink: 0;
}

/* —— 合并操作栏 —— */
.mem-merge-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--accent-soft, rgba(0,0,0,0.04));
  border-radius: var(--r-sm);
  margin: 0 14px 8px;
  font-size: 13px;
  color: var(--text);
  position: sticky;
  top: 0;
  z-index: 5;
}
.mem-merge-actions {
  display: flex;
  gap: 8px;
}
.mem-merge-cancel-btn,
.mem-merge-do-btn {
  padding: 6px 14px;
  border: none;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity var(--dur-fast);
}
.mem-merge-cancel-btn {
  background: var(--surface);
  color: var(--text-secondary);
}
.mem-merge-do-btn {
  background: var(--accent);
  color: #fff;
}
.mem-merge-cancel-btn:active,
.mem-merge-do-btn:active {
  opacity: 0.8;
}

/* —— 记忆编辑器增强 —— */
.mem-editor-card {
  max-width: 360px;
}
.mem-editor-field {
  margin-top: 12px;
}
.mem-editor-field-label {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.mem-editor-type {
  display: flex;
  gap: 14px;
  font-size: 13px;
  color: var(--text-secondary);
}
.mem-editor-type label {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.mem-editor-category {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 8px 10px;
  font-size: 13px;
  background: var(--bg);
  color: var(--text);
  outline: none;
  box-sizing: border-box;
  transition: border-color var(--dur-fast);
}
.mem-editor-category:focus {
  border-color: var(--accent);
}

/* ============================================================
   人际关系页面 · Relationships Page
   ============================================================ */

/* —— 顶部统计卡片网格 —— */
.rel-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  padding: 16px 16px 8px;
}
.rel-stat-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px 8px;
  text-align: center;
  cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
}
.rel-stat-card:hover {
  background: var(--bg-soft);
  border-color: var(--accent);
}
.rel-stat-card:active {
  transform: scale(0.97);
}
.rel-stat-num {
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.5px;
  line-height: 1.2;
}
.rel-stat-label {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 4px;
  letter-spacing: 0.5px;
}

/* —— Tab 切换 —— */
.rel-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  padding: 0 16px;
  margin: 8px 0 0;
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 5;
}
.rel-tab {
  flex: 1;
  padding: 12px 4px;
  text-align: center;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  position: relative;
  transition: color var(--dur-fast);
}
.rel-tab:hover {
  color: var(--text);
}
.rel-tab.active {
  color: var(--text);
  font-weight: 500;
}
.rel-tab.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 30%;
  right: 30%;
  height: 2px;
  background: var(--text);
  border-radius: 2px 2px 0 0;
}

/* —— 关系卡片网格 —— */
.relation-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 8px 16px 80px;
}
@media (min-width: 480px) {
  .relation-cards-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* —— 关系卡片 —— */
.relation-card-v2 {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.relation-card-v2:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* —— 卡片头部：头像 + 连线 + 头像 —— */
.relation-card-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.relation-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--text-secondary);
  overflow: hidden;
  flex-shrink: 0;
}
.relation-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.relation-link-v2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 60px;
}
.relation-type-badge-v2 {
  font-size: 10px;
  color: var(--text-secondary);
  background: var(--bg-soft);
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid var(--border);
  letter-spacing: 0.3px;
  white-space: nowrap;
}

/* —— 卡片主体 —— */
.relation-card-body {
  text-align: center;
  padding: 0 4px;
}
.relation-names-v2 {
  font-size: 13px;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}
.relation-arrow {
  color: var(--text-tertiary);
  font-size: 12px;
}
.relation-desc-v2 {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 4px;
  line-height: 1.5;
  word-break: break-word;
}

/* —— 卡片操作按钮 —— */
.relation-card-actions {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}
.relation-card-actions .btn-mini {
  font-size: 11px;
  padding: 4px 8px;
}

/* —— 底部操作栏 —— */
.rel-bottom-actions {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px 16px;
  background: var(--bg-glass);
  border-top: 1px solid var(--border);
  z-index: 5;
}
.rel-bottom-row {
  display: flex;
  gap: 8px;
}

/* —— 次按钮 —— */
.btn-secondary {
  background: var(--bg-soft);
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-secondary:hover {
  background: var(--bg-elevated);
  border-color: var(--accent);
}

/* —— NPC 标签 —— */
.fr-npc-tag {
  display: inline-block;
  font-size: 10px;
  color: var(--text-tertiary);
  background: var(--bg-soft);
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid var(--border);
  vertical-align: middle;
  letter-spacing: 0.3px;
}

/* —— 好友请求页面 —— */
.wx-profile-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.ci-header-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-secondary);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.ci-header-btn:hover {
  background: var(--bg-soft);
  color: var(--text);
}
.ci-header-btn:active {
  transform: scale(0.94);
}

/* —— 批量操作底部栏 —— */
.fr-batch-bar {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 16px;
  background: var(--bg-glass);
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
  align-items: center;
  z-index: 5;
}
.fr-batch-info {
  flex: 1;
  font-size: 13px;
  color: var(--text-secondary);
}

/* ============================================================
   好友请求页面 · Friend Requests Page
   ============================================================ */

/* —— 搜索栏 —— */
.fr-search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 5;
}
.fr-search-box {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-soft);
  border-radius: var(--r-sm);
  padding: 6px 10px;
  color: var(--text-tertiary);
}
.fr-search-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 13px;
  color: var(--text);
  outline: none;
}
.fr-search-input::placeholder {
  color: var(--text-tertiary);
}
.fr-batch-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 12px;
  padding: 5px 10px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.fr-batch-btn:hover {
  background: var(--bg-soft);
  color: var(--text);
}

/* —— 批量操作按钮 —— */
.fr-batch-actions {
  display: flex;
  gap: 4px;
}
.fr-batch-action {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 12px;
  padding: 5px 10px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.fr-batch-action:hover {
  background: var(--bg-elevated);
  color: var(--text);
}
.fr-batch-action.accept:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.fr-batch-action.reject:hover {
  border-color: #c05050;
  color: #c05050;
}

/* —— 好友请求项 —— */
.fr-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  transition: background var(--dur-fast);
  cursor: default;
}
.fr-item:hover {
  background: var(--bg-soft);
}
.fr-item.selected {
  background: var(--bg-soft);
}

/* —— 复选框 —— */
.fr-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  flex-shrink: 0;
  cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast);
  position: relative;
}
.fr-check.checked {
  background: var(--accent);
  border-color: var(--accent);
}
.fr-check.checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%) rotate(45deg);
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
}

/* —— 头像 —— */
.fr-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: var(--text-secondary);
  overflow: hidden;
  flex-shrink: 0;
}
.fr-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* —— 信息区 —— */
.fr-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fr-name {
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.fr-source {
  font-size: 11px;
  color: var(--text-tertiary);
}
.fr-message {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
  word-break: break-word;
  margin-top: 2px;
  padding: 4px 8px;
  background: var(--bg-soft);
  border-radius: var(--r-xs);
  border-left: 2px solid var(--border);
}
.fr-time {
  font-size: 10px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

/* —— 操作区 —— */
.fr-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* —— 状态文字 —— */
.fr-status {
  font-size: 12px;
  color: var(--text-tertiary);
}
.fr-status.accepted {
  color: var(--accent);
}
.fr-status.rejected {
  color: var(--text-tertiary);
}

/* —— 接受/拒绝按钮 —— */
.fr-btn {
  font-size: 12px;
  padding: 5px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
  cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.fr-btn:hover {
  background: var(--bg-soft);
}
.fr-btn.fr-accept {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.fr-btn.fr-accept:hover {
  background: var(--accent-deep);
}
.fr-btn.fr-reject {
  background: transparent;
  color: var(--text-secondary);
}
.fr-btn.fr-reject:hover {
  background: var(--bg-soft);
  color: #c05050;
  border-color: #c05050;
}

/* ============================================================
   关系图谱页面 · Relation Graph Page（.rg- 前缀）
   韩式黑白灰低饱和度风格 · 无 backdrop-filter
   ============================================================ */

/* —— 页面容器：占据整个 shell —— */
.rg-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg);
}

/* —— 顶部栏（sticky）—— */
.rg-header {
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 6px 0 4px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
  flex-shrink: 0;
}
.rg-back {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  cursor: pointer;
  border-radius: 50%;
  transition: background var(--dur-fast), transform var(--dur-fast);
}
.rg-back:hover {
  background: var(--bg-soft);
}
.rg-back:active {
  transform: scale(0.92);
}
.rg-title {
  flex: 1;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0.5px;
}
.rg-view-toggle {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 50%;
  transition: background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
}
.rg-view-toggle:hover {
  background: var(--bg-soft);
  color: var(--text);
}
.rg-view-toggle:active {
  transform: scale(0.92);
}

/* —— 分组筛选标签条 —— */
.rg-filters {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  overflow-x: auto;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  scrollbar-width: none;
}
.rg-filters::-webkit-scrollbar {
  display: none;
}
.rg-filter-tab {
  flex-shrink: 0;
  padding: 5px 12px;
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.rg-filter-tab:hover {
  background: var(--bg-elevated);
  color: var(--text);
}
.rg-filter-tab.active {
  background: var(--accent);
  color: var(--text-inverse);
  border-color: var(--accent);
}

/* —— 主区域：SVG 画布 —— */
.rg-canvas-wrap {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: var(--bg-soft);
  /* 极淡的网格背景，增强空间感 */
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.018) 1px, transparent 1px);
  background-size: 24px 24px;
}
.rg-svg {
  user-select: none;
  -webkit-user-select: none;
}
.rg-node circle {
  transition: stroke-width var(--dur-fast);
}
.rg-edge {
  transition: opacity var(--dur-fast);
}

/* —— 空状态 —— */
.rg-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  pointer-events: none;
}
.rg-empty svg {
  opacity: 0.3;
  margin-bottom: 12px;
}
.rg-empty p {
  font-size: 14px;
  margin: 0;
}

/* —— 底部信息栏 —— */
.rg-info-bar {
  flex-shrink: 0;
  padding: 8px 14px 10px;
  background: var(--bg);
  border-top: 1px solid var(--border);
}
.rg-stats {
  font-size: 11px;
  color: var(--text-tertiary);
  letter-spacing: 0.4px;
  margin-bottom: 6px;
}
.rg-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
}
.rg-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: var(--text-secondary);
  letter-spacing: 0.3px;
}
.rg-legend-color {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}

/* —— 节点/连线信息浮层 —— */
.rg-tooltip {
  position: absolute;
  transform: translate(-50%, 0);
  z-index: 20;
  min-width: 140px;
  max-width: 240px;
  padding: 10px 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  font-size: 12px;
  color: var(--text);
  opacity: 0;
  transform-origin: top center;
  transform: translate(-50%, 4px) scale(0.96);
  transition: opacity var(--dur-fast), transform var(--dur-fast);
  pointer-events: none;
}
.rg-tooltip.show {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}
.rg-tooltip-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.3px;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.rg-tooltip-tag {
  display: inline-block;
  font-size: 9px;
  font-weight: 500;
  color: var(--text-tertiary);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 4px;
  letter-spacing: 0.3px;
}
.rg-tooltip-meta {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-bottom: 6px;
}
.rg-tooltip-desc {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-top: 4px;
  word-break: break-word;
}
.rg-tooltip-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 2px;
}
.rg-tooltip-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}
.rg-tooltip-rel {
  font-weight: 500;
  flex-shrink: 0;
}
.rg-tooltip-arrow {
  color: var(--text-tertiary);
  flex-shrink: 0;
}
.rg-tooltip-name {
  color: var(--text-secondary);
  word-break: break-word;
}

/* —— 关系链列表视图 —— */
.rg-chain-list {
  height: 100%;
  overflow-y: auto;
  padding: 12px 12px 24px;
  background: var(--bg);
  -webkit-overflow-scrolling: touch;
}
.rg-chain-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px 12px 10px;
  margin-bottom: 10px;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.rg-chain-card:hover {
  border-color: var(--border-strong);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.rg-chain-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}
.rg-chain-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.3px;
}
.rg-chain-meta {
  font-size: 11px;
  color: var(--text-tertiary);
  letter-spacing: 0.3px;
}
.rg-chain-avatars {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.rg-chain-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--text-secondary);
  overflow: hidden;
  flex-shrink: 0;
  transition: transform var(--dur-fast);
}
.rg-chain-avatar:hover {
  transform: scale(1.08);
}
.rg-chain-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rg-chain-relations {
  padding: 8px 0 4px;
  border-top: 1px dashed var(--border);
  margin-top: 4px;
}
.rg-chain-relation {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font-size: 12px;
  color: var(--text);
}
.rg-chain-relation-name {
  font-weight: 500;
}
.rg-chain-relation-link {
  font-size: 11px;
  padding: 1px 8px;
  border-radius: var(--r-full);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.rg-chain-relation-desc {
  font-size: 11px;
  color: var(--text-tertiary);
  line-height: 1.5;
  padding: 0 0 6px;
  word-break: break-word;
}
.rg-chain-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 0 2px;
  font-size: 11px;
  color: var(--text-secondary);
  cursor: pointer;
  letter-spacing: 0.3px;
  transition: color var(--dur-fast);
}
.rg-chain-toggle:hover {
  color: var(--text);
}
.rg-chain-toggle svg {
  transition: transform var(--dur-base);
}
.rg-chain-toggle.expanded svg {
  transform: rotate(180deg);
}

/* ============================================================
   角色状态栏弹窗（cs-sheet）
   点击聊天页顶部名字弹出，底部 sheet 样式
   与 .wx-modal-overlay / .wx-modal-sheet 组合使用，
   此处补充状态栏特有的内部结构样式
   韩式黑白灰莫兰迪色系：低饱和度、柔和阴影、舒适间距
   ============================================================ */

/* 弹窗容器：底部弹出，圆角，最大高度 80vh，可滚动 */
.cs-sheet {
  max-width: 420px;
  max-height: 82vh;
  overflow: hidden;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  /* 更柔和的阴影：莫兰迪风格的扩散感 */
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.06),
              0 -2px 8px rgba(0, 0, 0, 0.04);
}

/* 群聊状态栏：宽度稍宽，留出导航按钮空间 */
.cs-group-sheet {
  max-width: 440px;
}

/* 修改状态编辑器：略宽以容纳表单 */
.cs-editor-sheet {
  max-width: 440px;
}

/* 头部：头像 + 名字/状态 + 关闭，更舒展的内边距 */
.cs-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 18px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  /* 头部背景轻微渐变，莫兰迪层次感 */
  background: linear-gradient(180deg,
    var(--bg-elevated) 0%,
    var(--bg-soft) 100%);
}

/* 头像：圆形 56px，更突出，加柔光描边 */
.cs-avatar {
  width: 56px;
  height: 56px;
  border-radius: var(--r-full);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  font-size: 22px;
  font-weight: 500;
  /* 1px 描边增加精致感（莫兰迪低对比） */
  box-shadow: 0 0 0 1px var(--border),
              0 2px 6px rgba(0, 0, 0, 0.04);
}
.cs-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 名字行：flex 列 */
.cs-name-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

/* 名字：18px 加粗，更突出 */
.cs-name {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

/* 群聊成员计数（"1/3" 样式） */
.cs-count {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-tertiary);
  letter-spacing: 0.4px;
  background: var(--bg-soft);
  padding: 1px 7px;
  border-radius: var(--r-full);
  flex-shrink: 0;
}

/* 状态徽章：圆角背景，flex 行，更精致 */
.cs-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--r-full);
  background: var(--bg-soft);
  align-self: flex-start;
  border: 1px solid var(--border);
}

/* 状态点：7px 圆点，加柔光 */
.cs-status-dot {
  width: 7px;
  height: 7px;
  border-radius: var(--r-full);
  flex-shrink: 0;
  /* 状态点的柔光晕，仅在在线状态显示 */
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6);
}
/* 莫兰迪降饱和度状态色：不刺眼 */
.cs-dot-online { background: #7BBE8A; } /* 降饱和绿 */
.cs-dot-busy { background: #E0A86E; }   /* 降饱和橙 */
.cs-dot-dnd { background: #D88A8A; }    /* 降饱和红 */
.cs-dot-offline { background: #B0B0B0; }/* 中性灰 */

/* 状态文字：12px */
.cs-status-text {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1;
  letter-spacing: 0.2px;
}

/* —— 群聊导航按钮（上一个/下一个成员） —— */
.cs-nav-spacer {
  width: 0;
  flex-shrink: 0;
}
.cs-nav-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  cursor: pointer;
  flex-shrink: 0;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.cs-nav-btn:hover {
  background: var(--surface);
  color: var(--text);
  transform: scale(1.05);
}
.cs-nav-btn:active {
  transform: scale(0.95);
}
/* 上一个成员按钮：仅作标识，继承 .cs-nav-btn 样式 */
.cs-nav-prev { /* 方向修饰类，预留扩展 */ }
/* 下一个成员按钮：仅作标识，继承 .cs-nav-btn 样式 */
.cs-nav-next { /* 方向修饰类，预留扩展 */ }

/* 关闭按钮：右上角，更精致 */
.cs-close {
  width: 30px;
  height: 30px;
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  cursor: pointer;
  font-size: 14px;
  flex-shrink: 0;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.cs-close:hover {
  background: var(--surface);
  color: var(--text);
  transform: rotate(90deg);
}

/* 内容区：更舒适的内边距与间距 */
.cs-body {
  padding: 14px 16px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  flex: 1;
  -webkit-overflow-scrolling: touch;
}

/* 卡片基础：圆角更大，背景，padding，flex 行 */
.cs-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border-radius: var(--r-md);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  /* 过渡：为 hover 效果做准备 */
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}

/* 卡片图标：flex 居中，次级色，加柔光背景 */
.cs-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  color: var(--text-secondary);
  background: var(--bg-elevated);
  border-radius: var(--r-sm);
  /* 1px 描边增加精致感 */
  box-shadow: 0 0 0 1px var(--border);
}

/* 卡片内容：flex 列 */
.cs-card-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

/* 卡片标签：11px 灰色，字间距更舒展 */
.cs-card-label {
  font-size: 11px;
  color: var(--text-tertiary);
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

/* 卡片值：14px */
.cs-card-value {
  font-size: 14px;
  color: var(--text);
  line-height: 1.5;
  word-break: break-word;
}

/* 想法卡片：左侧色条更明显 + 引号装饰 */
.cs-thoughts {
  position: relative;
  background: var(--bg-elevated);
  padding-left: 20px;
  padding-top: 16px;
  padding-bottom: 16px;
  /* 想法卡片用更柔和的边框 */
  border-color: var(--border-strong);
}
/* 左侧色条：更宽更明显，渐变柔光 */
.cs-thoughts::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 4px;
  border-radius: 0 var(--r-full) var(--r-full) 0;
  background: linear-gradient(180deg, var(--accent-deep), var(--accent));
}
/* 引号装饰：右上角大引号，莫兰迪淡灰 */
.cs-thoughts::after {
  content: '\201D'; /* 右双引号 ” */
  position: absolute;
  top: 4px;
  right: 12px;
  font-size: 40px;
  line-height: 1;
  color: var(--border-strong);
  font-family: Georgia, 'Times New Roman', serif;
  pointer-events: none;
  opacity: 0.7;
}

/* 想法文字：14px，行高 1.6，柔和 */
.cs-thoughts-text {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
  letter-spacing: 0.1px;
}

/* 网格：2 列，gap 10px，更舒适 */
.cs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

/* 小卡片：flex 行布局（图标在左，内容在右），与 .cs-card 保持一致
   Bug 3 修复：原来用 column 布局导致图标在文字上方，排版不美观 */
.cs-card-small {
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border-radius: var(--r-md);
  cursor: default;
}
/* 小卡片 hover 效果：轻微上浮 + 边框变化 */
.cs-card-small:hover {
  background: var(--bg-elevated);
  border-color: var(--border-strong);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
}
.cs-card-small .cs-card-icon {
  width: 24px;
  height: 24px;
}

/* 待办卡片：稍深的背景层次 */
.cs-todo {
  background: var(--bg-elevated);
  border-color: var(--border-strong);
}

/* 待办列表：flex 列，gap 6px，更舒展 */
.cs-todo-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}

/* 待办项：flex 行，独立浅灰圆角 pill（每项分开的视觉 = v484 样式，v352 删了背景 → 看起来"没分开"） */
.cs-todo-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--bg-soft);
  transition: background var(--dur-fast) var(--ease-out);
}
.cs-todo-item:hover {
  background: var(--accent-soft, var(--bg-soft));
}

/* 待办序号：圆形 22px，更精致 */
.cs-todo-num {
  width: 22px;
  height: 22px;
  border-radius: var(--r-full);
  background: var(--accent-deep);
  color: var(--bg-elevated);
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0;
}

/* 待办时间：胶囊样式，浅强调背景 + 时钟图标 */
.cs-todo-time {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  color: var(--accent-deep);
  font-weight: 600;
  letter-spacing: 0.3px;
  flex-shrink: 0;
  background: var(--accent-soft);
  padding: 2px 8px;
  border-radius: var(--r-full);
  font-variant-numeric: tabular-nums;
}
/* 时钟 SVG 图标：跟随 currentColor，比文字稍小 */
.cs-todo-time-icon {
  display: inline-block;
  flex-shrink: 0;
  color: var(--accent-deep);
  opacity: 0.85;
}

/* 待办文字：13px */
.cs-todo-text {
  font-size: 13px;
  color: var(--text);
  line-height: 1.4;
  word-break: break-word;
  flex: 1;
  min-width: 0;
}

/* —— Bug 4 美化：复选框、已完成状态、进度条 —— */

/* 复选框容器：flex 居中，可点击（仅展示，不切换状态） */
.cs-todo-checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--text-tertiary);
  transition: color var(--dur-fast) var(--ease-out);
}

/* 复选框 SVG 图标：未完成=空框，已完成=勾选 */
.cs-todo-checkbox-icon {
  display: block;
}

/* 已完成待办项：复选框变绿，文字加删除线 + 变灰 */
.cs-todo-done .cs-todo-checkbox {
  color: var(--accent-deep, #5a9a7a);
}
.cs-todo-done .cs-todo-text {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  color: var(--text-tertiary);
  opacity: 0.75;
}
/* 已完成的序号变浅，表示已完成 */
.cs-todo-done .cs-todo-num {
  background: var(--border-strong, #c0c0c0);
  opacity: 0.7;
}
/* 已完成的时间胶囊变浅 */
.cs-todo-done .cs-todo-time {
  opacity: 0.6;
}

/* 进度条容器：flex 列，位于标签下方、列表上方 */
.cs-todo-progress {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 6px;
  margin-bottom: 4px;
}

/* 进度条信息行：标签在左，计数在右 */
.cs-todo-progress-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 进度条标签：11px 灰色 */
.cs-todo-progress-label {
  font-size: 11px;
  color: var(--text-tertiary);
  letter-spacing: 0.4px;
}

/* 进度条计数：11px 强调色，tabular-nums */
.cs-todo-progress-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-deep);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2px;
}

/* 进度条轨道：圆角，浅背景，固定高度 5px */
.cs-todo-progress-bar {
  width: 100%;
  height: 5px;
  border-radius: var(--r-full);
  background: var(--bg-soft);
  overflow: hidden;
  /* 1px 描边增加精致感 */
  box-shadow: 0 0 0 1px var(--border);
}

/* 进度条填充：强调色渐变，圆角，过渡动画 */
.cs-todo-progress-fill {
  height: 100%;
  border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--accent-deep), var(--accent));
  transition: width var(--dur) var(--ease-out);
  min-width: 0;
}

/* ============================================================
   v370/v371：待办完成进度 + 想法截断（待办改回只读，由 char 自主管理）
   ============================================================ */
/* 进度条完成态：整条变绿 */
.cs-todo-progress-fill.cs-todo-progress-done {
  background: linear-gradient(90deg, var(--accent-deep), #67c98a);
}
/* 想法长文本截断（最多 3 行，避免撑爆弹窗） */
.cs-thoughts-text {
  -webkit-line-clamp: 3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================================
   修改状态编辑器（cse-field）
   ============================================================ */
.cse-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.cse-field label {
  font-size: 12px;
  color: var(--text-secondary);
  letter-spacing: 0.3px;
  font-weight: 500;
}
.cse-field .input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg-soft);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
  resize: vertical;
}
.cse-field .input:focus {
  border-color: var(--accent);
  background: var(--bg-elevated);
}

/* ============================================================
   聊天悬浮球（chat-float-ball）
   聊天页面右下角可拖拽悬浮按钮
   ============================================================ */
.chat-float-ball {
  position: absolute;
  right: 16px;
  bottom: 88px;
  width: 48px;
  height: 48px;
  border-radius: var(--r-full);
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-deep);
  cursor: pointer;
  z-index: 50;
  box-shadow: var(--shadow-md);
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.chat-float-ball:hover {
  box-shadow: var(--shadow-lg);
}
/* 按下状态 */
.chat-float-ball:active {
  transform: scale(0.92);
  box-shadow: var(--shadow-sm);
  background: var(--surface);
}

/* ============================================================
   悬浮球菜单 / 面板
   任务要求：.chat-float-ball-menu / .chat-float-ball-menu-item
   JS 实际渲染：.chat-float-panel 及其子元素
   为兼容两者并保证页面正常显示，以下同时为两套类名提供样式
   面板位置由 JS 动态计算（跟随悬浮球位置），CSS 仅提供
   兜底样式与方向变体（transform-origin）
   ============================================================ */

/* 菜单/面板容器：点击悬浮球弹出 */
.chat-float-ball-menu,
.chat-float-panel {
  position: absolute;
  /* 兜底位置：JS 会通过 inline style 覆盖以跟随悬浮球 */
  right: 16px;
  bottom: 144px;
  width: 264px;
  max-width: calc(100% - 32px);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  z-index: 51;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  transform-origin: bottom right;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.chat-float-ball-menu.active,
.chat-float-panel.active {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* —— 面板方向变体：根据悬浮球位置由 JS 添加 —— */
/* 悬浮球在右半边 → 面板出现在左侧，原点在右下 */
.chat-float-panel.panel-left {
  transform-origin: bottom right;
}
/* 悬浮球在左半边 → 面板出现在右侧，原点在左下 */
.chat-float-panel.panel-right {
  transform-origin: bottom left;
}
/* 面板出现在悬浮球上方，原点在底部（靠近悬浮球一侧） */
.chat-float-panel.panel-bottom {
  transform-origin: bottom center;
}

/* 菜单项 */
.chat-float-ball-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  transition: background var(--dur-fast) var(--ease-out);
}
.chat-float-ball-menu-item:hover {
  background: var(--surface);
}
.chat-float-ball-menu-item + .chat-float-ball-menu-item {
  border-top: 1px solid var(--border);
}

/* —— chat-float-panel 实际渲染结构的完整样式 —— */
.chat-float-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.3px;
}
.chat-float-panel-close {
  width: 24px;
  height: 24px;
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  cursor: pointer;
  font-size: 13px;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.chat-float-panel-close:hover {
  background: var(--surface);
  color: var(--text);
}
.chat-float-panel-body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 记忆总结进度 */
.chat-float-progress {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.chat-float-progress-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-secondary);
}
.chat-float-progress-bar {
  width: 100%;
  height: 4px;
  border-radius: var(--r-full);
  background: var(--bg-soft);
  overflow: hidden;
}
.chat-float-progress-fill {
  height: 100%;
  border-radius: var(--r-full);
  background: var(--accent);
  transition: width var(--dur-slow) var(--ease-out);
}

/* 快捷操作按钮组 */
.chat-float-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.chat-float-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 6px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
  font-size: 11px;
  cursor: pointer;
  letter-spacing: 0.2px;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.chat-float-btn:hover {
  background: var(--surface);
  border-color: var(--border-strong);
}
.chat-float-btn:active {
  transform: scale(0.96);
  background: var(--bg-soft);
}

/* —— 悬浮球「切换面具」快捷面板（mask-quick-*，对应 wechat.js 的
   openMaskSwitcherFromBall 渲染结构；此前这些类从未定义 CSS，导致面板无样式/无 UI） —— */
.mask-quick-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mask-quick-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.mask-quick-item:hover {
  background: var(--surface);
  border-color: var(--border-strong);
}
.mask-quick-item.active {
  border-color: var(--accent);
  background: var(--bg-elevated);
}
.mask-quick-avatar {
  width: 38px;
  height: 38px;
  border-radius: var(--r-full);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-elevated);
  color: var(--accent, var(--text));
  font-size: 15px;
  font-weight: 600;
  overflow: hidden;
}
.mask-quick-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--r-full);
}
.mask-quick-self {
  background: var(--bg-elevated);
  color: var(--text-tertiary);
}
.mask-quick-body {
  flex: 1;
  min-width: 0;
}
.mask-quick-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mask-quick-desc {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mask-quick-on {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--accent, var(--text-secondary));
  background: var(--surface-hover);
  padding: 2px 8px;
  border-radius: var(--r-full);
}

/* ============================================================
   一起听播放器条（Listen Together Bar）
   重新设计：顶部悬浮、横向宽矩形、韩式莫兰迪高级感
   - 作为 flex 子项置于 chat-header 下方，不遮挡名字/状态
   - 展开状态约 76px 高（宽 >> 高），收起状态约 36px
   - 顶部细线 accent 指示"正在播放"
   - 不使用 backdrop-filter，颜色全部走 CSS 变量
   ============================================================ */

/* 整体容器：flex 子项，自然占据 chat-header 下方空间 */
.lt-bar {
  position: relative;
  width: 100%;
  background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg) 100%);
  border-bottom: 0.5px solid var(--border);
  color: var(--text);
  overflow: hidden;
  flex-shrink: 0;
  z-index: 20;
  animation: lt-bar-in 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
/* 顶部细线 accent：now playing 指示器 */
.lt-bar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--accent) 20%,
    var(--accent-deep) 50%,
    var(--accent) 80%,
    transparent 100%);
  z-index: 3;
  opacity: 0.85;
}
/* 入场动画：从顶部滑入 + 淡入 */
@keyframes lt-bar-in {
  from { transform: translateY(-12px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

/* —— 展开状态：横向紧凑布局 —— */
.lt-expanded {
  position: relative;
  padding: 9px 14px 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: 200px;
  opacity: 1;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              padding 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
/* 收起状态：高度归零 */
.lt-expanded.lt-hide {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
}

/* 顶部行：头像 + 歌曲信息 + 退出按钮（横向排列） */
.lt-top-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

/* 退出按钮：圆形，hover 变红 */
.lt-exit-btn {
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s, transform 0.15s;
  position: relative;
  z-index: 10;
}
.lt-exit-btn:hover { background: rgba(224, 72, 72, 0.1); color: var(--danger); }
.lt-exit-btn:active { transform: scale(0.9); }

/* —— 两人头像组：重叠 -10px，28px 小头像 —— */
.lt-avatars-row {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.lt-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-deep);
  border: 2.5px solid var(--bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
  position: relative;
  z-index: 1;
}
.lt-avatar + .lt-avatar {
  margin-left: -12px;
}
/* 用户头像从左侧切入 */
.lt-avatar-user {
  animation: lt-avatar-left-in 0.5s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
}
/* char 头像从右侧切入 */
.lt-avatar-char {
  animation: lt-avatar-right-in 0.5s 0.08s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
}
@keyframes lt-avatar-left-in {
  from { transform: translateX(-20px) scale(0.6); opacity: 0; }
  to   { transform: translateX(0) scale(1);     opacity: 1; }
}
@keyframes lt-avatar-right-in {
  from { transform: translateX(20px) scale(0.6); opacity: 0; }
  to   { transform: translateX(0) scale(1);     opacity: 1; }
}

/* —— 歌曲信息：左对齐，flex:1 占据中间空间 —— */
.lt-song-info {
  flex: 1;
  min-width: 0;
  text-align: left;
}
.lt-song-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.lt-song-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
/* 时长徽章：accent-soft 背景，小圆角 */
.lt-status-duration {
  font-size: 10px;
  color: var(--accent-deep, var(--accent));
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.3px;
  padding: 1px 7px;
  background: var(--accent-soft);
  border-radius: 8px;
  flex-shrink: 0;
  line-height: 1.4;
}
.lt-status-duration::before {
  content: '';
  display: none;
}
.lt-song-artist {
  font-size: 10px;
  color: var(--text-tertiary);
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0.1px;
}

/* —— 当前歌词：左对齐，斜体，与歌曲信息对齐 —— */
.lt-lyric {
  width: 100%;
  font-size: 10px;
  font-style: italic;
  color: var(--text-tertiary);
  opacity: 0.7;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-height: 12px;
  padding-left: 46px; /* 与歌曲信息对齐：头像 36px + gap 10px */
  transition: opacity var(--dur-base, 0.25s) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
  animation: lt-lyric-fade 0.4s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
  letter-spacing: 0.1px;
}
@keyframes lt-lyric-fade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 0.7; transform: translateY(0); }
}
.lt-lyric.lt-lyric-empty { opacity: 0.3; }

/* —— 进度条行：时间 + 进度条 + 时间（横向） —— */
.lt-progress-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.lt-progress {
  flex: 1;
  height: 12px;
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  touch-action: none;
}
.lt-progress::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 3px;
  background: var(--lt-border);
  border-radius: 50%;
}
.lt-progress-fill {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 3px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-deep) 100%);
  border-radius: 50%;
  width: 0%;
  transition: width 0.15s linear;
}
.lt-progress-thumb {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2), 0 0 0 2px var(--accent);
  left: 0%;
  transition: left 0.15s linear, transform var(--dur-fast, 0.15s) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
  pointer-events: none;
}
.lt-progress:hover .lt-progress-thumb,
.lt-progress:active .lt-progress-thumb {
  transform: translate(-50%, -50%) scale(1.3);
}

/* —— 时间标签：小号、等宽 —— */
.lt-time {
  font-size: 9px;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2px;
  flex-shrink: 0;
  min-width: 28px;
}
.lt-time:last-child { text-align: right; }

/* —— 控制按钮行：上一首 / 播放 / 下一首 居中，收起按钮右侧 —— */
.lt-controls-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  position: relative;
}
/* prev / play / next 组：居中 */
.lt-controls-row .lt-ctrl-btn,
.lt-controls-row .lt-play-btn {
  /* 保持原有样式 */
}
/* 收起按钮：绝对定位右侧，不参与居中计算 */
.lt-controls-row .lt-collapse-btn {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 0;
}
.lt-ctrl-btn {
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: var(--text);
  border-radius: var(--r-full, 50%);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  z-index: 10;
  transition: background var(--dur-fast, 0.15s) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
              transform var(--dur-fast, 0.15s) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}
.lt-ctrl-btn:hover { background: var(--lt-overlay); }
.lt-ctrl-btn:active { transform: scale(0.9); }
.lt-play-btn {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
  color: var(--text-inverse);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
}
.lt-play-btn:hover { transform: scale(1.05); background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%); }

/* —— 收起按钮：右侧胶囊 —— */
.lt-collapse-btn {
  border: none;
  background: var(--lt-overlay);
  color: var(--text-secondary);
  border-radius: var(--r-full, 50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 12px;
  font-size: 10px;
  font-weight: 500;
  cursor: pointer;
  margin-left: 4px;
  min-height: 32px;
  position: relative;
  z-index: 10;
  transition: background var(--dur-fast, 0.15s) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
              transform var(--dur-fast, 0.15s) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}
.lt-collapse-btn:hover { background: var(--lt-overlay-hover); }
.lt-collapse-btn:active { transform: scale(0.94); }
.lt-btn-label {
  font-size: 9px;
  font-weight: 500;
  white-space: nowrap;
}

/* —— 收起状态：单行横向布局，宽矩形 —— */
.lt-collapsed {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 14px;
  min-height: 32px;
  max-height: 50px;
  opacity: 1;
  overflow: hidden;
  transition: max-height 0.3s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
              opacity 0.2s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
              padding 0.3s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}
/* 展开状态：高度归零 */
.lt-collapsed.lt-hide {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
}

/* 收起态左侧：头像 + 歌名 */
.lt-mini-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.lt-mini-avatars {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.lt-avatar-mini {
  width: 24px; height: 24px;
  border-radius: var(--r-full, 50%);
  background: var(--accent-soft);
  color: var(--accent-deep);
  border: 2px solid var(--bg-elevated);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600;
  flex-shrink: 0; overflow: hidden;
  background-size: cover; background-position: center;
}
.lt-avatar-mini + .lt-avatar-mini { margin-left: -8px; }
.lt-mini-info {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.lt-mini-name {
  font-size: 11px;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lt-mini-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.lt-play-mini-btn {
  width: 36px; height: 36px;
  border: none;
  background: var(--lt-overlay);
  color: var(--text);
  border-radius: var(--r-full, 50%);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  position: relative; z-index: 10;
  transition: background var(--dur-fast, 0.15s) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
              transform var(--dur-fast, 0.15s) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}
.lt-play-mini-btn:hover { background: var(--lt-overlay-hover); }
.lt-play-mini-btn:active { transform: scale(0.9); }
.lt-expand-btn {
  border: none;
  background: var(--lt-overlay);
  color: var(--text-secondary);
  border-radius: var(--r-full, 50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  cursor: pointer;
  position: relative;
  z-index: 10;
  transition: background var(--dur-fast, 0.15s) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}
.lt-expand-btn:hover { background: var(--lt-overlay-hover); }

/* 收起态退出按钮 */
.lt-exit-btn-mini {
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  z-index: 10;
  transition: background 0.15s, color 0.15s, transform 0.15s;
}
.lt-exit-btn-mini:hover { background: rgba(224, 72, 72, 0.1); color: var(--danger); }
.lt-exit-btn-mini:active { transform: scale(0.9); }

/* —— 全屏模式：保持 100% 宽度 —— */
[data-display-mode="fullscreen"] .lt-bar {
  width: 100%;
  max-width: 100%;
  margin: 0;
}

/* —— 响应式：窄屏微调 —— */
@media (max-width: 360px) {
  .lt-expanded { padding: 8px 12px 6px; gap: 4px; }
  .lt-avatar { width: 32px; height: 32px; font-size: 12px; }
  .lt-ctrl-btn { width: 24px; height: 24px; }
  .lt-play-btn { width: 30px; height: 30px; }
  .lt-lyric { padding-left: 42px; }
}

/* ============================================================
   树桩记忆可视化
   树形布局：中央主干 + 分支左右展开 + 连接线
   ============================================================ */
.wx-modal-tree-memory {
  max-width: 420px;
  display: flex;
  flex-direction: column;
  max-height: 85vh;
}
.tree-stats-bar {
  display: flex;
  gap: 12px;
  padding: 8px 16px;
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.tree-view-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.tree-view-tab {
  flex: 1;
  padding: 10px;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-tertiary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all var(--dur-fast);
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
}
.tree-view-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.tree-view-content {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
  -webkit-overflow-scrolling: touch;
}
.wx-tree-content { min-height: 200px; }

/* 树形分区 */
.tree-section { margin-bottom: 20px; }
.tree-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
  padding: 4px 8px;
  letter-spacing: 0.5px;
}

/* 树节点 */
.tree-node {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  margin-bottom: 6px;
  position: relative;
  transition: background var(--dur-fast);
  cursor: pointer;
}
.tree-node:hover { background: var(--surface); }
.tree-node-trunk {
  border-left: 3px solid #d4a843;
  background: rgba(212, 168, 67, 0.06);
}
.tree-node-linked {
  border-left: 3px solid #2eb89e;
  background: rgba(46, 184, 158, 0.05);
}
.tree-node-branch {
  border-left: 3px solid var(--border-strong);
  opacity: 0.95;
}
.tree-node.faded {
  opacity: 0.45;
}
.tree-node-icon {
  font-size: 16px;
  flex-shrink: 0;
  width: 24px;
  text-align: center;
  line-height: 1.4;
}
.tree-node-trunk .tree-node-icon { color: #d4a843; }
.tree-node-linked .tree-node-icon { color: #2eb89e; }
.tree-node-branch .tree-node-icon { color: var(--text-tertiary); }

.tree-node-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tree-node-head {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.tree-node-type {
  font-size: 11px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: var(--r-full);
}
.tree-node-type.type-trunk { background: rgba(212, 168, 67, 0.15); color: #d4a843; }
.tree-node-type.type-linked { background: rgba(46, 184, 158, 0.15); color: #2eb89e; }
.tree-node-type.type-branch { background: var(--surface); color: var(--text-tertiary); }
.tree-node-scene {
  font-size: 10px;
  color: var(--text-tertiary);
  padding: 1px 5px;
  background: var(--surface);
  border-radius: var(--r-full);
}
.tree-node-date {
  font-size: 11px;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
.tree-node-faded-tag {
  font-size: 10px;
  color: var(--text-tertiary);
  padding: 1px 5px;
  background: rgba(0,0,0,0.06);
  border-radius: var(--r-full);
}
.tree-node-conn-count {
  font-size: 10px;
  color: #2eb89e;
  font-weight: 600;
  padding: 1px 5px;
  background: rgba(46, 184, 158, 0.1);
  border-radius: var(--r-full);
}
.tree-node-content {
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
  word-break: break-word;
  white-space: pre-wrap;
}
.tree-node-connections {
  margin-top: 6px;
  padding-left: 8px;
  border-left: 2px dashed rgba(46, 184, 158, 0.3);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tree-node-conn {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  font-size: 11px;
  color: var(--text-secondary);
}
.tree-node-conn-arrow { color: #2eb89e; flex-shrink: 0; }
.tree-node-conn-target {
  color: var(--text);
  flex: 1;
  min-width: 0;
}
.tree-node-conn-reason {
  color: var(--text-tertiary);
  font-style: italic;
}
.tree-node-actions {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}
.tree-node-btn {
  font-size: 11px;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  background: var(--bg);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--dur-fast);
}
.tree-node-btn:hover { border-color: var(--accent); color: var(--accent); }
.tree-node-btn.danger:hover { border-color: #e74c3c; color: #e74c3c; }

/* 空状态 */
.tree-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-tertiary);
}
.tree-empty-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text-secondary);
}
.tree-empty-desc { font-size: 13px; }

/* 时间线视图 */
.tree-timeline {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* 图例 */
.tree-legend {
  display: flex;
  gap: 14px;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-tertiary);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.tree-legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
}
.tree-legend-icon {
  font-size: 14px;
  font-weight: 600;
}
.tree-legend-icon.type-trunk { color: #d4a843; }
.tree-legend-icon.type-linked { color: #2eb89e; }
.tree-legend-icon.type-branch { color: var(--text-tertiary); }

/* 添加按钮 */
.wx-modal-tree-add {
  font-size: 12px;
  padding: 4px 10px;
  border: 1px solid var(--accent);
  border-radius: var(--r-full);
  background: none;
  color: var(--accent);
  cursor: pointer;
  transition: all var(--dur-fast);
}
.wx-modal-tree-add:active { transform: scale(0.96); }
/* ============================================================
   v357: 线上正则（regex）页面 UI —— 从 v484 线移植（v352 线重写 wechat.css 时整块丢失
   → 正则页面全是纯文本）。变量全部通用，无新增依赖。
   ============================================================ */
.rx-section {
  margin-bottom: 16px;
  padding: 0 16px;
}
.rx-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
  padding-left: 4px;
}
.rx-section-desc {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-bottom: 10px;
  padding-left: 4px;
  line-height: 1.5;
}

/* —— 规则列表 —— */
.rx-rule-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.rx-rule-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: var(--bg-elevated);
  gap: 10px;
  transition: background var(--dur-fast);
}
.rx-rule-item:active { background: var(--surface); }

.rx-rule-info {
  flex: 1;
  min-width: 0;
}
.rx-rule-name {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 2px;
}
.rx-rule-note {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-bottom: 4px;
  line-height: 1.4;
}
.rx-rule-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.rx-tag {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: var(--r-full);
  background: var(--surface);
  color: var(--text-secondary);
  line-height: 1.4;
}
.rx-tag-replace { background: rgba(90, 115, 99, 0.12); color: #5A7363; }
.rx-tag-delete { background: rgba(168, 92, 92, 0.12); color: #A85C5C; }
.rx-tag-wrap { background: rgba(92, 108, 168, 0.12); color: #5C6CA8; }
.rx-tag-scope { background: var(--surface); }
.rx-tag-preset { background: rgba(180, 160, 120, 0.15); color: #8a7a5a; }

.rx-rule-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.rx-rule-edit,
.rx-rule-delete {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-full);
  color: var(--text-tertiary);
  cursor: pointer;
  transition: all var(--dur-fast);
}
.rx-rule-edit:hover { background: var(--surface); color: var(--text); }
.rx-rule-delete:hover { background: rgba(168, 92, 92, 0.1); color: #A85C5C; }
.rx-rule-edit:active,
.rx-rule-delete:active { transform: scale(0.9); }

/* —— 开关 —— */
.rx-toggle {
  width: 44px;
  height: 26px;
  border-radius: var(--r-full);
  background: var(--surface);
  position: relative;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out);
  flex-shrink: 0;
}
.rx-toggle.active {
  background: var(--accent);
}
.rx-toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  transition: transform var(--dur-base) var(--ease-spring);
}
.rx-toggle.active .rx-toggle-knob {
  transform: translateX(18px);
}

/* —— 测试区 —— */
.rx-test-section {
  padding-bottom: 40px;
}
.rx-test-area {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rx-test-input {
  width: 100%;
  padding: 10px 12px;
  border: 0.5px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-elevated);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  outline: none;
}
.rx-test-input:focus { border-color: var(--accent); }
.rx-test-btn {
  align-self: flex-start;
  padding: 6px 16px;
  border: none;
  border-radius: var(--r-full);
  background: var(--accent);
  color: var(--text-inverse);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: transform var(--dur-fast);
}
.rx-test-btn:active { transform: scale(0.95); }
.rx-test-output {
  min-height: 20px;
}
.rx-test-empty {
  font-size: 13px;
  color: var(--text-tertiary);
  padding: 8px 0;
}
.rx-test-result {
  background: var(--surface);
  border-radius: var(--r-md);
  padding: 10px 12px;
}
.rx-test-result-label {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-bottom: 4px;
}
.rx-test-result-text {
  font-size: 14px;
  color: var(--text);
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

/* —— 规则编辑器 —— */
.rx-editor-card {
  max-width: 420px;
}
.rx-editor-body {
  max-height: 60vh;
  overflow-y: auto;
}
.rx-field {
  margin-bottom: 16px;
}
.rx-field > label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.rx-field input[type="text"],
.rx-field textarea {
  width: 100%;
  padding: 8px 10px;
  border: 0.5px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  font-family: 'SF Mono', 'Menlo', monospace;
  outline: none;
  resize: vertical;
}
.rx-field input[type="text"]:focus,
.rx-field textarea:focus {
  border-color: var(--accent);
}

/* —— 分段选择器 —— */
.rx-segmented {
  display: flex;
  background: var(--surface);
  border-radius: var(--r-md);
  padding: 2px;
  gap: 2px;
}
.rx-seg {
  flex: 1;
  text-align: center;
  padding: 6px 8px;
  font-size: 13px;
  color: var(--text-secondary);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all var(--dur-fast);
}
.rx-seg.active {
  background: var(--bg-elevated);
  color: var(--text);
  font-weight: 500;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

/* —— 复选框行 —— */
.rx-checkbox-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.rx-checkbox {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-secondary);
}
.rx-checkbox input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

/* ============================================================
/* ============================================================
   v360: 恢复 v352 线删掉的子页面样式（服务/钱包/收藏/视频通话/语音通话/
   储蓄罐/心愿单/共同账本/每日打卡/福气红包/收支统计/状态栏历史/头像弹窗等 116 块）
   从 v484 线整体提取（仅 v352 完全不存在的类，不覆盖 v352 保留的组件）
   ============================================================ */
.msg-image-caption {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  margin-bottom: 6px;
  word-break: break-word;
  white-space: pre-wrap;
}

.msg-image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 90px;
  border-radius: 10px;
  background: var(--bg-hover, #f0f0f0);
  color: var(--text-tertiary, #999);
  font-size: 12px;
  text-align: center;
  padding: 0 8px;
}

.message-sticker-only {
  overflow: visible !important;
  display: inline-block !important;
  line-height: 0 !important;
  max-width: 108px !important;
}

.img-src-sheet {
  padding: 0 !important;
}

.img-src-list {
  padding: 8px 0;
}

.img-src-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 18px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}

.img-src-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--bg-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-deep);
  flex-shrink: 0;
}

.img-src-text {
  flex: 1;
  min-width: 0;
}

.img-src-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0.2px;
}

.img-src-desc {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

.img-src-cancel {
  text-align: center;
  padding: 14px;
  font-size: 15px;
  color: var(--text-secondary);
  border-top: 0.5px solid var(--border);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}

.voicecall-video {
  position: relative;
  width: 100%;
  max-width: 400px;
  height: 180px;
  flex: none;
  border-radius: 16px;
  margin-bottom: 20px;
  background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

.voicecall-video-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 12px;
  padding: 3px 9px;
  border-radius: 10px;
  background: rgba(0,0,0,0.4);
  color: #fff;
  letter-spacing: 0.5px;
  z-index: 3;
}

.vc-user-video {
  position: absolute;
  top:0;right:0;bottom:0;left:0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
  background: transparent;
}

.voicecall-video-avatar {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  font-weight: 600;
  color: #fff;
  overflow: hidden;
  z-index: 1;
}

.vc-video-wrap {
  position: relative;
  width: 100%;
  max-width: 360px;
  height: 260px;
  margin-bottom: 20px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

.vc-main, .vc-pip {
  position: absolute;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: all .35s cubic-bezier(.4,0,.2,1);
}

.vc-main {
  top:0;right:0;bottom:0;left:0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.vc-pip {
  right: 12px;
  bottom: 12px;
  width: 104px;
  height: 144px;
  z-index: 3;
  border: 2px solid rgba(255,255,255,0.75);
  box-shadow: 0 4px 16px rgba(0,0,0,0.45);
}

.vc-char-stage {
  position: absolute;
  top:0;right:0;bottom:0;left:0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
}

.vc-pip-tag {
  position: absolute;
  top: 6px;
  left: 6px;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 8px;
  background: rgba(0,0,0,0.45);
  color: #fff;
  z-index: 4;
  pointer-events: none;
}

.vc-stage-hint {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 11px;
  color: rgba(255,255,255,0.6);
  z-index: 4;
  pointer-events: none;
}

.vc-speaking-ring {
  position: absolute;
  top:-8px;right:-8px;bottom:-8px;left:-8px;
  border-radius: 50%;
  border: 3px solid rgba(7, 193, 96, 0.0);
  pointer-events: none;
  opacity: 0;
}

.voicecall-snapshot-btn {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.18);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.voicecall-vision-hint.ok { color: #7ee0a0; }
.voicecall-vision-hint.warn { color: #ffcf66; }
.voicecall-name {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 8px;
}

.voicecall-msg-action {
  font-size: 12px;
  color: rgba(255,255,255,0.65);
  font-style: italic;
  padding: 0 2px;
  letter-spacing: 0.3px;
}

.voicecall-msg-snapshot {
  display: block;
  width: 140px;
  max-width: 60%;
  height: auto;
  border-radius: 10px;
  margin-bottom: 6px;
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  background: rgba(0,0,0,0.2);
}

.voicecall-topbar {
  position: absolute;
  top: calc(12px + var(--safe-area-top, env(safe-area-inset-top, 0px)));
  right: 16px;
  z-index: 5;
  display: flex;
  gap: 10px;
}

.voicecall-flip-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(0,0,0,0.3);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s;
}

.vc-bg-sheet {
  width: 100%;
  max-width: 480px;
  background: var(--bg, #fff);
  border-radius: 18px 18px 0 0;
  padding: 18px 16px calc(18px + var(--safe-area-bottom, env(safe-area-inset-bottom, 0px)));
  box-shadow: 0 -8px 32px rgba(0,0,0,0.3);
  animation: vc-bg-up 0.25s ease;
}

.vc-bg-title {
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 14px;
  color: var(--text, #111);
}

.vc-bg-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.vc-bg-opt {
  position: relative;
  height: 64px;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transition: transform 0.12s;
}

.vc-bg-upload {
  background: rgba(128,128,128,0.18);
  border: 2px dashed rgba(128,128,128,0.5);
}

.vc-bg-reset, .vc-bg-close {
  flex: 1;
  padding: 12px;
  border-radius: 12px;
  border: none;
  font-size: 15px;
  cursor: pointer;
  font-family: inherit;
}

.vc-bg-reset {
  background: rgba(128,128,128,0.18);
  color: var(--text, #111);
}

.vc-bg-close {
  background: #07C160;
  color: #fff;
}

.cs-todo-node {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: var(--r-full);
  background: var(--accent-deep);
  color: var(--bg-elevated);
  border: none;
  box-shadow: none;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.cs-todo-node-icon {
  display: block;
  color: currentColor;
}

.cs-todo-time-empty {
  background: transparent;
  color: transparent;
}

.status-history-panel {
  max-height: 420px;
}

.status-history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 340px;
  overflow-y: auto;
}

.status-history-item {
  padding: 10px 12px;
  background: var(--bg-soft);
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  transition: background var(--dur-fast);
}

.status-history-time {
  font-size: 11px;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  margin-bottom: 4px;
  font-weight: 500;
}

.status-history-content {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.6;
  word-break: break-word;
}

.status-history-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  gap: 8px;
  color: var(--text-tertiary);
  font-size: 13px;
  text-align: center;
}

.mask-switch-panel {
  max-height: 420px;
}

.vc-avatar-wrap {
  position: relative;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vc-avatar.has-image { padding: 0; }
.vc-avatar.has-image img { width: 100%; height: 100%; object-fit: cover; }

/* 虚拟形象表情 SVG（仅无头像时显示完整脸；有头像时隐藏脸、仅保留腮红/星光点缀） */
.vc-face {
  position: absolute;
  top:0;right:0;bottom:0;left:0;
  width: 120px;
  height: 120px;
  z-index: 3;
  pointer-events: none;
}

.vc-bubble {
  max-width: 86%;
  text-align: center;
  font-size: 15px;
  line-height: 1.45;
  color: #fff;
  padding: 10px 16px;
  border-radius: 16px;
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  transition: opacity 0.25s, transform 0.25s;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.vc-bubble.show { opacity: 1; transform: translateY(0) scale(1); }
.vc-bubble-action { display: block; font-size: 12px; opacity: 0.8; font-style: italic; margin-bottom: 3px; }
.vc-bubble-text { display: block; }
/* 气泡样式：简约（纯半透明） */
.vc-center-bubbles.style-plain .vc-bubble { background: rgba(0, 0, 0, 0.35); }
/* 气泡样式：描边 */
.vc-center-bubbles.style-outline .vc-bubble { background: rgba(0, 0, 0, 0.2); border: 1.5px solid rgba(255, 255, 255, 0.7); }
/* 气泡样式：毛玻璃（已移除 backdrop-filter） */
.vc-center-bubbles.style-glass .vc-bubble {
  background: rgba(255, 255, 255, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.voicecall-bottom {
  width: 100%;
  max-width: 460px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px 14px;
  box-sizing: border-box;
}

.vc-bottom-input {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.voicecall-bottom-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.voicecall-btn-cam, .voicecall-btn-voice {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s, background 0.15s;
}

.vc-bubble-set-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 2px;
  font-size: 14px;
  color: var(--text, #111);
}

.vc-toggle {
  min-width: 52px;
  padding: 6px 14px;
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: rgba(0, 0, 0, 0.06);
  color: var(--text-secondary, #888);
  font-size: 14px;
  cursor: pointer;
}

.vc-toggle.on { background: #07C160; color: #fff; border-color: #07C160; }
.vc-style-btns { display: flex; gap: 8px; }
.vc-style-btn {
  padding: 6px 14px;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: rgba(0, 0, 0, 0.04);
  color: var(--text, #111);
  font-size: 13px;
  cursor: pointer;
}

.vc-style-btn.active { background: #07C160; color: #fff; border-color: #07C160; }


/* ============================================================
   v376 视频/语音通话重设计（微信风格：满屏长方形 + 自定义会动 char 形象 + 悬浮小窗 + 底栏左输入/右挂断）
   ============================================================ */

/* 通话页铺满整个屏幕 */
.voicecall-page {
  position: fixed;   /* 改：fixed 全屏覆盖，脱离双栏/任何父级布局（absolute 会被 iPad 全屏双栏
                        .wechat-main 挤压 → 元素叠在一起） */
  top:0;right:0;bottom:0;left:0;
  z-index: 300;      /* 高于普通页面元素，确保覆盖 */
  overflow: hidden;
  background: #000;
  color: #fff;
}

.vc-stage {
  position: absolute;
  top:0;right:0;bottom:0;left:0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #1b2735 0%, #090a0f 100%);
  overflow: hidden;
}

.vc-char-figure {
  position: relative;
  width: min(74vw, 360px);
  height: min(74vw, 360px);
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: center bottom;
  animation: vcIdle 4.2s ease-in-out infinite;
  filter: drop-shadow(0 14px 34px rgba(0, 0, 0, 0.55));
  transition: filter 0.3s;
}

.vc-char-photo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.04);
}

.vc-char-initial {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 62px;
  font-weight: 600;
  color: #fff;
}

.vc-center-bubbles {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  width: min(82vw, 420px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  pointer-events: none;
  z-index: 20;
}

.vc-bubble {
  max-width: 100%;
  padding: 9px 14px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.45;
  color: #fff;
  text-align: center;
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  transition: opacity 0.25s, transform 0.25s;
  background: rgba(0, 0, 0, 0.7);
}

.vc-bubble.show { opacity: 1; transform: translateY(0) scale(1); }
.vc-bubble-action { display: block; font-size: 12px; opacity: 0.85; font-style: italic; margin-bottom: 3px; }
.vc-bubble-text { display: block; }
.vc-center-bubbles.style-plain .vc-bubble { background: rgba(0, 0, 0, 0.45); }
.vc-center-bubbles.style-outline .vc-bubble { background: rgba(0, 0, 0, 0.22); border: 1.5px solid rgba(255, 255, 255, 0.75); }
.vc-center-bubbles.style-glass .vc-bubble { background: rgba(255, 255, 255, 0.28); border: 1px solid rgba(255, 255, 255, 0.25); }

/* 悬浮小窗（user 摄像头，可拖拽 / 可关闭） */
.vc-pip {
  position: absolute;
  top: 64px;
  right: 14px;
  width: 108px;
  height: 148px;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.55);
  background: #111;
  z-index: 30;
  touch-action: none;
  transition: box-shadow 0.2s;
}

.vc-pip.hidden { display: none; }
.vc-user-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1); /* 镜像，像微信自拍预览 */
}

.vc-pip-tag {
  position: absolute;
  left: 6px;
  bottom: 6px;
  font-size: 11px;
  background: rgba(0, 0, 0, 0.45);
  padding: 1px 7px;
  border-radius: 8px;
  color: #fff;
}

.vc-pip-camoff {
  position: absolute;
  top:0;right:0;bottom:0;left:0;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  background: #1c1c1e;
  color: #ccc;
}

.vc-top-left, .vc-top-right { display: flex; align-items: center; gap: 10px; }
.vc-top-name { font-weight: 600; font-size: 15px; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
.vc-top-time { font-size: 13px; opacity: 0.85; }
.voicecall-top-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.32);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, transform 0.15s;
}

.voicecall-msg-sheet {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(78px + var(--safe-area-bottom, env(safe-area-inset-bottom, 0px)));
  max-height: 40vh;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.85);
  transform: translateY(115%);
  transition: transform 0.25s ease;
  z-index: 35;
  padding: 10px 14px;
}

.voicecall-msg-sheet.open { transform: translateY(0); }
.voicecall-msg-sheet .voicecall-msg-list { max-height: 36vh; }

/* 视频设置面板：char 形象区 */
.vc-char-preview {
  width: 100%;
  height: 120px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px dashed rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 8px;
  color: #aaa;
  font-size: 13px;
}

.vc-char-preview.has { border-style: solid; border-color: rgba(7, 193, 96, 0.6); }
.vc-char-preview img { width: 100%; height: 100%; object-fit: contain; }
.vc-char-actions { display: flex; gap: 10px; margin-bottom: 6px; }
.vc-char-upload { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.vc-char-actions .vc-bg-reset { flex: 1; }
.vc-char-actions .vc-bg-reset:disabled { opacity: 0.4; cursor: not-allowed; }




/* ============================================================
   v384 语音通话全新设计（仅作用于 .voice-call-page，不影响视频通话）
   微信式布局：圆形头像 + 名字/状态居中，底部输入条 + 三键操作区，
   消息记录为圆角抽屉，气泡与聊天页一致
   ============================================================ */

/* —— 舞台：垂直居中堆叠（头像 → 名字 → 状态 → 类型） —— */
.voice-call-page .vc-stage,
.video-call-page .vc-stage {
  flex-direction: column;
  justify-content: center;
  gap: 0;
  padding-bottom: 120px; /* 给底部控制区让位，视觉重心略上移 */
}

.uah-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 14px 0 10px;
}

.uah-current {
  width: 120px;
  height: 120px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg-soft);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.uah-avatar-empty {
  font-size: 12px;
  color: var(--text-tertiary);
  text-align: center;
  padding: 20px;
}

.uah-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.uah-item {
  text-align: center;
  cursor: pointer;
}

.uah-item-avatar {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-soft);
  margin: 0 auto 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.uah-item-label {
  font-size: 11px;
  color: var(--text-tertiary);
}

.uah-empty {
  font-size: 12px;
  color: var(--text-tertiary);
  text-align: center;
  padding: 16px 0 8px;
}

.camera-send-btn.is-disabled {
  opacity: 0.5;
  pointer-events: auto;
}

.services-page {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg-soft);
}

.wx-services-head { background: var(--bg-glass); }
.svc-scroll {
  flex: 1;
  padding: 14px 14px 0;
}

.wallet-card {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(135deg, #2c2c2c 0%, #1a1a1a 100%);
  color: #fff;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  margin-bottom: 14px;
}

.wallet-card-bg {
  position: absolute;
  top:0;right:0;bottom:0;left:0;
  background: radial-gradient(circle at 80% 0%, rgba(255,255,255,0.18), transparent 60%);
  opacity: 1;
  pointer-events: none;
}

.wallet-card-content { position: relative; padding: 18px 18px 16px; }
.wallet-card-top { display: flex; justify-content: space-between; align-items: flex-start; }
.wallet-card-label { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wallet-card-mask-name { font-size: 13px; opacity: 0.85; }
.wallet-card-sub { font-size: 12px; opacity: 0.55; }
.wallet-card-balance { display: flex; align-items: baseline; gap: 2px; margin-top: 14px; }
.wallet-currency { font-size: 18px; font-weight: 600; }
.wallet-amount { font-size: 30px; font-weight: 700; letter-spacing: 0.5px; }
.wallet-card-stats {
  display: flex;
  align-items: center;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.12);
}

.wallet-stat { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.wallet-stat-label { font-size: 12px; opacity: 0.6; }
.wallet-stat-val { font-size: 15px; font-weight: 600; }
.wallet-stat-val.in { color: #7ee08a; }
.wallet-stat-val.out { color: #ff9a9a; }
.wallet-stat-divider { width: 1px; height: 28px; background: rgba(255,255,255,0.12); margin: 0 16px; }

/* —— 快捷操作 —— */
.svc-quick-actions {
  display: flex;
  background: var(--bg-elevated);
  border-radius: var(--r-md);
  padding: 16px 8px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
}

.svc-quick-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  cursor: pointer;
}

.svc-icon-in { background: rgba(82,196,26,0.12); color: #4caf50; }
.svc-icon-out { background: rgba(224,72,72,0.12); color: #e04848; }
.svc-icon-card { background: rgba(127,127,127,0.10); color: var(--text-secondary); }
.svc-icon-bill { background: rgba(127,127,127,0.10); color: var(--text-secondary); }
.svc-badge {
  position: absolute;
  top: -2px;
  left: 50%;
  margin-left: 4px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: var(--r-full);
  background: var(--danger);
  color: #fff;
  font-size: 10px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}

.svc-section {
  background: var(--bg-elevated);
  border-radius: var(--r-md);
  padding: 4px 14px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
}

.svc-section-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 0 8px; }
.svc-section-title { font-size: 14px; font-weight: 600; color: var(--text); }
.svc-section-more { font-size: 12px; color: var(--text-tertiary); cursor: pointer; }
.svc-section-summary { font-size: 12px; color: var(--text-tertiary); }

/* —— 交易列表 —— */
.svc-tx-list { display: flex; flex-direction: column; }
.svc-tx-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border); }
.svc-tx-icon { width: 36px; height: 36px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.svc-tx-icon.in { background: rgba(82,196,26,0.12); color: #4caf50; }
.svc-tx-icon.out { background: rgba(224,72,72,0.12); color: #e04848; }
.svc-tx-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.svc-tx-title { font-size: 14px; color: var(--text); }
.svc-tx-meta { font-size: 12px; color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svc-tx-amount { font-size: 15px; font-weight: 600; flex-shrink: 0; }
.svc-tx-amount.in { color: #4caf50; }
.svc-tx-amount.out { color: var(--text); }

/* —— 亲属卡预览 —— */
.svc-fc-preview { display: flex; flex-direction: column; }
.svc-fc-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border); }
.svc-fc-dir { width: 28px; height: 28px; border-radius: var(--r-full); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; background: var(--accent-soft); color: var(--accent-deep); }
.svc-fc-dir.give { color: #4caf50; }
.svc-fc-dir.receive { color: #e04848; }
.svc-fc-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.svc-fc-name { font-size: 14px; color: var(--text); }
.svc-fc-amt { font-size: 12px; color: var(--text-tertiary); }
.svc-fc-status { font-size: 12px; padding: 2px 8px; border-radius: var(--r-full); flex-shrink: 0; }
.svc-fc-status.active { background: rgba(82,196,26,0.12); color: #4caf50; }
.svc-fc-status.paused { background: var(--accent-soft); color: var(--text-tertiary); }

/* —— 九宫格 —— */
.svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 6px 0 10px; }
.svc-grid-item { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 4px; cursor: pointer; border-radius: var(--r-sm); transition: background var(--dur-fast); }
.svc-grid-item:active { background: var(--surface); }
.svc-grid-icon { width: 48px; height: 48px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent-deep); }
.svc-grid-item span { font-size: 12px; color: var(--text-secondary); text-align: center; }
.svc-grid-savings { background: rgba(245,166,35,0.14); color: #d99000; }
.svc-grid-wish { background: rgba(224,72,72,0.12); color: #e04848; }
.svc-grid-ledger { background: rgba(64,120,242,0.12); color: #4078f2; }
.svc-grid-checkin { background: rgba(82,196,26,0.12); color: #4caf50; }
.svc-grid-lucky { background: rgba(224,72,72,0.14); color: #e04848; }
.svc-grid-stats { background: rgba(140,90,230,0.12); color: #8c5ae6; }
.svc-grid-char-tx { background: rgba(82,196,26,0.12); color: #4caf50; }
.svc-grid-mask { background: var(--accent-soft); color: var(--accent-deep); }
.svc-grid-couple { background: rgba(224, 72, 120, 0.12); color: #e04878; }

/* —— 空态 —— */
.svc-empty-tx { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px 20px; color: var(--text-tertiary); background: var(--bg-elevated); border-radius: var(--r-md); box-shadow: var(--shadow-sm); }
.svc-empty-tx span { font-size: 13px; }
.svc-empty-hint { font-size: 12px; opacity: 0.8; }

/* ============================================================
   收藏页（"我" → 收藏）  v442 — 补回缺失样式
   ============================================================ */
.fav-sheet {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 100%;
  max-width: 420px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateX(100%);
  transition: transform var(--dur-base) var(--ease-out);
}

.fav-head-btn { width: 32px; height: 32px; border-radius: var(--r-full); display: flex; align-items: center; justify-content: center; color: var(--text); cursor: pointer; }
.fav-head-btn:hover { background: var(--surface); }
.fav-head-title { font-size: 16px; font-weight: 600; color: var(--text); }
.fav-head.select-mode { background: var(--bg-glass); }

.fav-search-bar { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--bg); border-bottom: 1px solid var(--border); flex-shrink: 0; }
.fav-search-icon { color: var(--text-tertiary); flex-shrink: 0; }
.fav-search-bar input { flex: 1; border: none; outline: none; background: var(--bg-soft); border-radius: var(--r-full); padding: 8px 14px; font-size: 14px; color: var(--text); }
.fav-search-clear { color: var(--text-tertiary); cursor: pointer; display: flex; }

.fav-tabs { display: flex; gap: 6px; padding: 10px 14px; overflow-x: auto; background: var(--bg); border-bottom: 1px solid var(--border); flex-shrink: 0; scrollbar-width: none; }
.fav-tabs::-webkit-scrollbar { display: none; }
.fav-tab { display: flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: var(--r-full); background: var(--bg-soft); color: var(--text-secondary); font-size: 13px; cursor: pointer; white-space: nowrap; transition: all var(--dur-fast); }
.fav-tab.active { background: var(--accent-deep); color: var(--text-inverse); }
.fav-tab-count { font-size: 11px; opacity: 0.7; }

.fav-body { flex: 1; overflow-y: auto; padding: 12px 14px 20px; -webkit-overflow-scrolling: touch; }
.fav-list { display: flex; flex-direction: column; gap: 10px; }
.fav-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }

.fav-item {
  position: relative;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background var(--dur-fast), border-color var(--dur-fast);
}

.fav-check.checked { background: var(--accent-deep); border-color: var(--accent-deep); }

.fav-item-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fav-item-type { display: flex; align-items: center; gap: 5px; color: var(--text-tertiary); }
.fav-type-icon { display: flex; color: var(--text-tertiary); }
.fav-type-label { font-size: 12px; }
.fav-item-time { font-size: 12px; color: var(--text-tertiary); flex-shrink: 0; }
.fav-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.fav-item-text { font-size: 14px; color: var(--text); line-height: 1.5; white-space: pre-wrap; word-break: break-word; }

.fav-item-image { width: 100%; aspect-ratio: 1 / 1; border-radius: var(--r-sm); overflow: hidden; background: var(--bg-soft); position: relative; }
.fav-item-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fav-img-fallback { position: absolute; top:0;right:0;bottom:0;left:0; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--text-tertiary); }

.fav-item-voice { display: flex; align-items: center; gap: 10px; }
.fav-voice-icon { width: 40px; height: 40px; border-radius: var(--r-full); background: var(--accent-soft); color: var(--accent-deep); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fav-voice-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fav-voice-text { font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fav-voice-dur { font-size: 12px; color: var(--text-tertiary); }

/* 卡片型收藏 */
.fav-item-card { border-radius: var(--r-sm); padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.fav-card-top { display: flex; align-items: center; gap: 8px; }
.fav-card-icon { width: 32px; height: 32px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.fav-card-label { font-size: 14px; font-weight: 600; }
.fav-card-amount { font-size: 20px; font-weight: 700; }
.fav-card-note { font-size: 12px; opacity: 0.8; }

.fav-card-transfer { background: rgba(82,196,26,0.08); }
.fav-card-transfer .fav-card-icon { background: rgba(82,196,26,0.15); color: #4caf50; }
.fav-card-transfer .fav-card-amount { color: #4caf50; }
.fav-card-redpacket { background: rgba(224,72,72,0.08); }
.fav-card-redpacket .fav-card-icon { background: rgba(224,72,72,0.15); }
.fav-card-redpacket .fav-card-amount { color: #e04848; }
.fav-card-call { background: rgba(127,127,127,0.08); }
.fav-card-call .fav-card-icon { background: rgba(127,127,127,0.12); color: var(--text-secondary); }
.fav-call-text { font-size: 14px; color: var(--text); }
.fav-card-location { background: rgba(127,127,127,0.08); }
.fav-loc-icon { width: 32px; height: 32px; border-radius: var(--r-sm); background: rgba(127,127,127,0.12); color: var(--text-secondary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fav-loc-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fav-loc-name { font-size: 14px; color: var(--text); }
.fav-loc-addr { font-size: 12px; color: var(--text-tertiary); }
.fav-item-source { font-size: 12px; color: var(--text-tertiary); margin-top: 2px; }

/* 空态 */
.fav-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 60px 20px; color: var(--text-tertiary); }
.fav-empty-icon { opacity: 0.35; }
.fav-empty-text { font-size: 15px; color: var(--text-secondary); }
.fav-empty-hint { font-size: 13px; color: var(--text-tertiary); }

/* 底部多选操作栏 */
.fav-bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--bg-glass);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  padding-bottom: calc(12px + var(--safe-area-bottom, env(safe-area-inset-bottom, 0px)));
}

.fav-bottom-info { font-size: 13px; color: var(--text-secondary); }
.fav-bottom-actions { display: flex; gap: 10px; }
.fav-bottom-btn { font-size: 14px; padding: 8px 16px; border-radius: var(--r-full); cursor: pointer; color: var(--text-secondary); }
.fav-bottom-btn.danger { background: var(--danger); color: #fff; }

/* —— 深色模式：钱包卡提亮以与深色页面区分 —— */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wallet-card { background: linear-gradient(135deg, #3a3a3a 0%, #2a2a2a 100%); }
}

.wallet-detail-card {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(135deg, #2c2c2c 0%, #1a1a1a 100%);
  color: #fff;
  box-shadow: var(--shadow-md);
  margin-bottom: 14px;
}

.wallet-detail-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.12);
}

.wallet-btn {
  flex: 1;
  height: 38px;
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.wallet-btn[data-act="in"] {
  background: linear-gradient(135deg, rgba(7, 193, 96, 0.95), rgba(7, 161, 96, 0.85));
  border-color: rgba(255, 255, 255, 0.32);
  box-shadow: 0 2px 6px rgba(7, 193, 96, 0.25);
}
.wallet-btn[data-act="out"] {
  background: linear-gradient(135deg, rgba(255, 106, 88, 0.95), rgba(232, 80, 64, 0.85));
  border-color: rgba(255, 255, 255, 0.32);
  box-shadow: 0 2px 6px rgba(232, 80, 64, 0.25);
}
.wallet-btn[data-act="cards"] {
  background: linear-gradient(135deg, rgba(74, 144, 226, 0.95), rgba(60, 120, 200, 0.85));
  border-color: rgba(255, 255, 255, 0.32);
  box-shadow: 0 2px 6px rgba(74, 144, 226, 0.25);
}
.wallet-btn:active { transform: scale(0.96); }

.quick-amt-btn {
  flex: 1 0 calc(33.333% - 6px);
  min-width: 0;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.fc-intro-icon {
  width: 40px; height: 40px;
  flex-shrink: 0;
  border-radius: var(--r-md);
  background: var(--bg-soft);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary);
}

.fc-intro-text { flex: 1; min-width: 0; }
.fc-intro-title { font-size: 15px; font-weight: 600; margin-bottom: 2px; }
.fc-intro-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.4; }

.fc-list { display: flex; flex-direction: column; gap: 10px; }
.fc-card {
  background: var(--bg-elevated);
  border-radius: var(--r-md);
  padding: 14px;
  box-shadow: var(--shadow-sm);
  border-left: 3px solid var(--text-secondary);
}

.fc-card.give { border-left-color: var(--success, #4caf50); }
.fc-card.receive { border-left-color: var(--danger, #e04848); }
.fc-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.fc-card-dir {
  display: flex; align-items: center; gap: 4px;
  font-size: 13px; font-weight: 500;
  color: var(--text-primary);
}

.fc-card-status.active { background: rgba(76,175,80,0.12); color: #4caf50; }
.fc-card-status.paused { background: rgba(127,127,127,0.12); color: var(--text-secondary); }
.fc-card-name { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.fc-card-amount { font-size: 22px; font-weight: 700; margin-bottom: 12px; }
.fc-card-amount span { font-size: 13px; font-weight: 400; color: var(--text-secondary); }
.fc-card-actions { display: flex; gap: 8px; }
.fc-card-btn {
  flex: 1;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg-soft);
  color: var(--text-primary);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s;
}

.fc-add-icon.give { background: rgba(76,175,80,0.12); color: #4caf50; }
.fc-add-icon.receive { background: rgba(224,72,72,0.12); color: #e04848; }
.fc-add-text { flex: 1; min-width: 0; }
.fc-add-title { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.fc-add-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.4; }

/* —— 账单页每天汇总（renderWalletTransactionsPage svc-section-summary） —— */
.svc-section-summary {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 400;
}

.savings-visual { display: flex; justify-content: center; padding: 8px 0 14px; }
.savings-jar {
  position: relative;
  width: 150px; height: 190px;
  border-radius: 0 0 26px 26px;
  background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.04));
  border: 1px solid var(--border);
  overflow: hidden;
  display: flex; align-items: flex-end; justify-content: center;
}

.savings-jar-fill {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, #ffd54d, #ff9800);
  transition: height 0.6s ease;
}

.savings-jar-text {
  position: relative; z-index: 1;
  text-align: center; padding-bottom: 14px;
  display: flex; flex-direction: column; gap: 2px;
}

.savings-amount { font-size: 20px; font-weight: 700; color: var(--text-primary); }
.savings-goal { font-size: 11px; color: var(--text-secondary); }
.savings-progress-text { text-align: center; font-size: 12px; color: var(--text-secondary); margin-bottom: 12px; }
.savings-actions { display: flex; gap: 8px; margin-bottom: 10px; }
.savings-btn {
  flex: 1; height: 34px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--bg-elevated); color: var(--text-primary);
  font-size: 13px; cursor: pointer;
}

.wish-item.done { opacity: 0.55; }
.wish-check {
  width: 22px; height: 22px; flex-shrink: 0;
  border: 1.5px solid var(--border); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: #fff;
  cursor: pointer;
}

.ledger-stat { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.ledger-stat-label { font-size: 11px; color: var(--text-secondary); }
.ledger-stat-val { font-size: 15px; font-weight: 600; }
.ledger-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; margin-bottom: 8px;
  background: var(--bg-elevated); border-radius: var(--r-md);
}

.ledger-item-icon {
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600;
}

.ledger-item-icon.user { background: rgba(76,175,80,0.12); color: #4caf50; }
.ledger-item-icon.char { background: rgba(66,133,244,0.12); color: #4285f4; }
.ledger-item-body { flex: 1; min-width: 0; }
.ledger-item-desc { font-size: 14px; font-weight: 500; }
.ledger-item-meta { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
.ledger-item-amount { font-size: 14px; font-weight: 600; }

/* —— 每日打卡 —— */
.checkin-visual { display: flex; justify-content: center; padding: 10px 0 16px; }
.checkin-circle {
  width: 110px; height: 110px; border-radius: 50%;
  border: 2px dashed var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600; color: var(--text-secondary);
  cursor: pointer; transition: all 0.2s;
  text-align: center; padding: 0 14px;
}

.checkin-circle.done { border: none; background: linear-gradient(135deg, #ffd54d, #ff9800); color: #fff; }
.checkin-stats { display: flex; gap: 8px; margin-bottom: 12px; }
.checkin-stat {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 10px 0; background: var(--bg-soft); border-radius: var(--r-md);
}

.ck-num { font-size: 17px; font-weight: 700; color: var(--text-primary); }
.ck-label { font-size: 11px; color: var(--text-secondary); }
.checkin-hint { text-align: center; font-size: 11px; color: var(--text-secondary); }

/* —— 福气红包 —— */
.lucky-visual { display: flex; justify-content: center; padding: 8px 0 14px; }
.lucky-envelope {
  width: 90px; height: 90px; border-radius: var(--r-lg);
  background: linear-gradient(135deg, #ff5f5f, #e53935);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md);
}

.lucky-info { text-align: center; margin-bottom: 14px; }
.lucky-chances { font-size: 13px; color: var(--text-secondary); margin-bottom: 4px; }
.lucky-chances span { font-weight: 700; color: var(--text-primary); font-size: 16px; }
.lucky-total { font-size: 13px; color: var(--text-secondary); }
.lucky-total span { font-weight: 700; color: #e53935; font-size: 16px; }
.lucky-hint { text-align: center; font-size: 11px; color: var(--text-secondary); margin-top: 10px; }

/* —— 收支统计 —— */
.stats-month-summary { display: flex; gap: 8px; margin-bottom: 14px; }
.stats-ms-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 10px 4px; background: var(--bg-soft); border-radius: var(--r-md);
}

.stats-ms-label { font-size: 11px; color: var(--text-secondary); }
.stats-ms-val { font-size: 14px; font-weight: 600; }
.stats-ms-val.in { color: #4caf50; }
.stats-ms-val.out { color: #e04848; }
.stats-section { margin-bottom: 14px; }
.stats-section-title { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.stats-chart { display: flex; align-items: flex-end; gap: 6px; height: 110px; padding: 4px 2px 0; }
.stats-chart-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; }
.stats-chart-bars { display: flex; align-items: flex-end; gap: 3px; height: 100%; width: 100%; }
.stats-bar { flex: 1; min-width: 6px; border-radius: 3px 3px 0 0; transition: height 0.4s; }
.stats-bar.in { background: #4caf50; opacity: 0.85; }
.stats-bar.out { background: #e04848; opacity: 0.85; }
.stats-chart-label { font-size: 10px; color: var(--text-secondary); margin-top: 5px; }
.stats-legend { display: flex; gap: 14px; justify-content: center; margin-top: 8px; }
.stats-legend-item { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-secondary); }
.stats-dot { width: 8px; height: 8px; border-radius: 50%; }
.stats-dot.in { background: #4caf50; }
.stats-dot.out { background: #e04848; }
.stats-cat-item { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.stats-cat-name { flex-shrink: 0; width: 64px; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stats-cat-bar-wrap { flex: 1; height: 12px; background: var(--bg-soft); border-radius: 6px; overflow: hidden; }
.stats-cat-bar { height: 100%; border-radius: 6px; background: linear-gradient(90deg, #ffd54d, #ff9800); }
.stats-cat-amt { flex-shrink: 0; font-size: 12px; font-weight: 600; }

/* —— 给角色转账 —— */
.ct-balance {
  font-size: 13px; color: var(--text-secondary);
  margin-bottom: 10px; text-align: center;
}

/* ============================================================
   v375 微信转账卡片 + 转账详情（点开收款）
   ============================================================ */
.msg-transfer-card.wx-tf {
  background: #fff;
  border-radius: 10px;
  padding: 12px 14px;
  min-width: 208px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.wx-tf-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wx-tf-title { font-size: 14px; font-weight: 700; color: #FA9D3B; }
.wx-tf-status { font-size: 12px; color: #B0B0B0; }
.wx-tf-amount { font-size: 26px; font-weight: 700; color: #222; margin: 8px 0 2px; }
.wx-tf-note { font-size: 13px; color: #888; margin-top: 4px; }
.wx-tf-people {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #F0F0F0;
}
.wx-tf-ava {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #B2B2B2;
  color: #fff;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.wx-tf-name { font-size: 13px; color: #555; }

/* —— 转账详情（微信样式：头像 + 转账金额 + 收款按钮）—— */
.wx-tf-detail {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0 16px;
  text-align: center;
}
.wx-tf-detail-ava {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #B2B2B2;
  color: #fff;
  font-size: 22px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wx-tf-detail-name { font-size: 16px; font-weight: 600; margin-top: 10px; color: #222; }
.wx-tf-detail-label { font-size: 12px; color: #999; margin-top: 18px; }
.wx-tf-detail-amount { font-size: 34px; font-weight: 700; color: #FA9D3B; margin-top: 6px; }
.wx-tf-detail-note { font-size: 13px; color: #666; margin-top: 8px; }
.wx-tf-detail-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.wx-tf-accept {
  height: 44px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(180deg, #FFB73D, #FF9A00);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.wx-tf-accept:active { opacity: 0.9; }
.wx-tf-return {
  height: 40px;
  border-radius: 10px;
  border: none;
  background: #F5F5F5;
  color: #666;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.wx-tf-return:active { background: #EAEAEA; }

[data-theme="dark"] .msg-transfer-card.wx-tf { background: #2A2A2A; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }
[data-theme="dark"] .wx-tf-amount { color: #EEE; }
[data-theme="dark"] .wx-tf-note { color: #999; }
[data-theme="dark"] .wx-tf-people { border-top-color: #3A3A3A; }
[data-theme="dark"] .wx-tf-name { color: #BBB; }
[data-theme="dark"] .wx-tf-detail-name { color: #EEE; }
[data-theme="dark"] .wx-tf-detail-note { color: #AAA; }
[data-theme="dark"] .wx-tf-return { background: #3A3A3A; color: #BBB; }
[data-theme="dark"] .wx-tf-return:active { background: #444; }