/* =========================================================
 * wechat.css — 微信（仿真版）样式
 * 全部类名使用 .wx- 前缀命名空间，不覆盖通用组件类
 * 复用 tokens.css 的色板与 components.css 的 .row / .list / .btn 等
 * ========================================================= */

/* ---------------------------------------------------------
 * 0. 通用
 * ------------------------------------------------------- */
.wx-bg { background: var(--group); }
html.dark .wx-bg { background: #000; }

/* ===== 微信主题统一驱动：毛玻璃 + 可爱风（全主题通用） =====
 * wxtheme.js 设置 html[data-theme] + 内联 --wx-* 变量
 * 颜色 / 纹理 / 半透明全部来自 themes.js 的 --wx-*，单套规则覆盖全部主题
 */
.app-wechat[data-theme] { color: var(--wx-text); }

/* 顶栏：毛玻璃 */
.app-wechat[data-theme] .navbar {
  background: var(--wx-nav-bg);
  color: var(--wx-nav-text);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
}
.app-wechat[data-theme] .navbar::after { background: var(--wx-sep); }

/* 标签栏：毛玻璃 */
.app-wechat[data-theme] .tabbar {
  background: var(--wx-tabbar-bg);
  border-top-color: var(--wx-sep);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
}
.app-wechat[data-theme] .tabbar .tab-item { color: var(--wx-text2); }
.app-wechat[data-theme] .tabbar .tab-item.active { color: var(--wx); }

/* 页面底：背景纹理图（上层，可见）+ 渐变（下层）
 * 注意：纹理必须在渐变之上，否则不透明渐变会把背景图完全盖住 */
.app-wechat[data-theme] .wx-bg {
  background-color: var(--wx-chat-bg);
  background-image: var(--wx-bg-texture), var(--wx-page-bg);
  background-repeat: repeat, no-repeat;
  background-size: var(--wx-texture-size, 46px 46px), auto;
  background-position: 0 0, center;
}

/* 会话背景：背景纹理图（上层）+ 渐变（下层） */
.app-wechat[data-theme] .wx-msgs {
  background-color: var(--wx-chat-bg);
  background-image: var(--wx-bg-texture), var(--wx-msgs-grad);
  background-repeat: repeat, no-repeat;
  background-size: var(--wx-texture-size, 46px 46px), auto;
  background-position: 0 0, center;
}

/* 聊天列表 → 悬浮毛玻璃圆卡 */
.app-wechat[data-theme] .wx-chatlist {
  background: var(--wx-card-bg);
  margin: 8px 10px 4px;
  border-radius: 18px;
  overflow: hidden;
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  box-shadow: var(--wx-shadow);
}
.app-wechat[data-theme] .wx-swrow,
.app-wechat[data-theme] .wx-swinner,
.app-wechat[data-theme] .wx-top .wx-swinner { background: transparent; }
/* 前景层改为透明后必须隐藏左滑按钮，否则会透出（左滑用内联 transform，无状态类，故用 :has 判定） */
.app-wechat[data-theme] .wx-swact { opacity: 0; pointer-events: none; transition: opacity .12s ease; }
.app-wechat[data-theme] .wx-swrow:has(.wx-swinner[style*="translateX(-"]) .wx-swact { opacity: 1; pointer-events: auto; }
.app-wechat[data-theme] .wx-charow::after { background: var(--wx-sep); }
.app-wechat[data-theme] .wx-charow:active,
.app-wechat[data-theme] .wx-swinner:active { background: var(--wx-tint); }
.app-wechat[data-theme] .wx-avabadge { border-color: rgba(255,255,255,.9); }

/* 通用列表（通讯录 / 发现 / 我）→ 毛玻璃圆卡 */
.app-wechat[data-theme] .wx-list {
  background: var(--wx-card-bg);
  margin: 8px 10px;
  border-radius: 16px;
  overflow: hidden;
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  box-shadow: var(--wx-shadow);
}
.app-wechat[data-theme] .wx-list .row::after { background: var(--wx-sep); }

/* 搜索栏：透明底 + 磨砂输入框 */
.app-wechat[data-theme] .wx-searchbar { background: transparent; }
.app-wechat[data-theme] .wx-searchfield {
  background: var(--wx-card-bg);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
  box-shadow: var(--wx-shadow);
}
.app-wechat[data-theme] .wx-searchfield input { color: var(--wx-text); }
.app-wechat[data-theme] .wx-searchfield input::placeholder { color: var(--wx-text2); }

/* 列表文案配色 */
.app-wechat[data-theme] .wx-chatname { color: var(--wx-text); }
.app-wechat[data-theme] .wx-chatlast,
.app-wechat[data-theme] .wx-chattime { color: var(--wx-text2); }

/* 气泡：糖果圆角 + 毛玻璃 + 柔阴影（全主题半透明） */
.app-wechat[data-theme] .wx-bubble { border-radius: 20px; }
.app-wechat[data-theme] .wx-b-text,
.app-wechat[data-theme] .wx-b-voice {
  border-radius: 20px;
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  box-shadow: var(--wx-shadow);
}
.app-wechat[data-theme] .wx-msg.them .wx-b-text,
.app-wechat[data-theme] .wx-msg.them .wx-b-voice {
  background: var(--wx-bubble-them);
  color: var(--wx-text);
}
.app-wechat[data-theme] .wx-msg.me .wx-b-text,
.app-wechat[data-theme] .wx-msg.me .wx-b-voice {
  background: var(--wx-bubble-me);
  color: var(--wx-bubble-text);
}
.app-wechat[data-theme] .wx-msg.them .wx-bubble { --tail-bg: var(--wx-tail-them); }
.app-wechat[data-theme] .wx-msg.me .wx-bubble { --tail-bg: var(--wx-tail-me); }

/* 输入区：毛玻璃 */
.app-wechat[data-theme] .wx-inputwrap {
  background: var(--wx-card-bg);
  border-top-color: var(--wx-sep);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
}
.app-wechat[data-theme] .wx-inbox textarea {
  background: var(--wx-input-bg);
  border-color: var(--wx-sep);
  color: var(--wx-text);
}

/* 输入栏图标：圆点可爱风（颜色取自主题） */
.app-wechat[data-theme] .wx-inico {
  width: 34px; height: 34px; padding: 0; border-radius: 50%;
  background: var(--wx-tint); color: var(--wx);
  align-items: center; justify-content: center; align-self: center;
  box-shadow: 0 2px 6px var(--wx-tint);
}
.app-wechat[data-theme] .wx-inico:active { opacity: 1; background: var(--wx); color: #fff; }
.app-wechat[data-theme] .wx-inico svg { stroke-width: 2.2; }

/* 强调图标 */
.app-wechat[data-theme] .wx-fileico,
.app-wechat[data-theme] .wx-favico { background: var(--wx-tint); color: var(--wx); }
.app-wechat[data-theme] .wx-chip.on { background: var(--wx-tint); box-shadow: inset 0 0 0 1px var(--wx); }

/* 标签栏图标：圆角药丸 + 加粗圆头（可爱风，颜色取自主题） */
.app-wechat[data-theme] .tab-ico::before {
  content: ''; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 32px; height: 32px; border-radius: 12px;
  background: var(--wx-tint);
  box-shadow: 0 2px 7px var(--wx-tint);
  z-index: 0;
}
.app-wechat[data-theme] .tab-item.active .tab-ico::before {
  background: linear-gradient(160deg, var(--wx-light), var(--wx));
  box-shadow: 0 4px 12px var(--wx-tint);
}
.app-wechat[data-theme] .tab-ico svg { position: relative; z-index: 1; stroke-width: 2.4; stroke: var(--wx-text2); }
.app-wechat[data-theme] .tab-item.active .tab-ico svg { stroke: #fff; }

/* "我"页 / 二维码卡片：毛玻璃 */
.app-wechat[data-theme] .wx-mecard,
.app-wechat[data-theme] .wx-qrcard { background: var(--wx-card-bg); }

/* 子页底部操作条（转账/红包/建群等）：随主题毛玻璃半透明 */
.app-wechat[data-theme] .wx-bottombar {
  background: var(--wx-card-bg);
  border-top: .5px solid var(--wx-sep);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
}

/* 注：樱花粉(sakura) 的全部视觉由上方「全主题通用规则 + themes.js 变量」驱动，
   无需主题专属 CSS 区块；气泡渐变/爱心纹理/粉调均已写入 --wx-* 变量。 */

.wx-grouptitle {
  font-size: 13px; color: var(--text2);
  padding: 16px 16px 7px;
}
.wx-list { background: var(--card); }
html.dark .wx-list { background: #1c1c1e; }
.wx-list .row:last-child::after { display: none; }
.wx-list.mt12 { margin-top: 12px; }
.wx-list.plain { margin: 0; }

.wx-minitip {
  font-size: 13px; color: var(--text2);
  padding: 14px 16px; line-height: 1.5;
}
.wx-paneltext { font-size: 15px; color: var(--text2); padding: 14px 16px; line-height: 1.6; }
.mt12 { margin-top: 12px; } .mt16 { margin-top: 16px; }

.wx-bottombar {
  flex: none; padding: 10px 16px 14px;
  background: var(--bg);
  border-top: .5px solid var(--sep);
}

/* ---------------------------------------------------------
 * 1. 聊天列表
 * ------------------------------------------------------- */
.wx-searchbar {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: var(--group);
  position: sticky; top: 0; z-index: 3;
}
html.dark .wx-searchbar { background: #000; }
.wx-searchfield {
  flex: 1; height: 36px; border-radius: 10px;
  background: rgba(118, 118, 128, .12);
  display: flex; align-items: center; gap: 6px;
  padding: 0 10px; color: var(--text2);
}
html.dark .wx-searchfield { background: #1c1c1e; }
.wx-searchfield input {
  flex: 1; font-size: 17px; color: var(--text);
  background: none; border: none; min-width: 0;
}
.wx-searchfield input::placeholder { color: var(--text2); }
.wx-addbtn { font-size: 16px; color: var(--wx); flex: none; padding-left: 2px; }

.wx-chatlist { background: var(--card); }
html.dark .wx-chatlist { background: #1c1c1e; }

.wx-swrow { position: relative; overflow: hidden; background: var(--card); }
html.dark .wx-swrow { background: #1c1c1e; }
.wx-swacts { position: absolute; top: 0; right: 0; bottom: 0; display: flex; }
.wx-swact {
  width: 76px; color: #fff; font-size: 15px;
  background: #C7C7CC;
  display: flex; align-items: center; justify-content: center;
}
.wx-swact.del { background: var(--red); }
.wx-swinner {
  position: relative; background: var(--card);
  transition: transform 200ms var(--ease);
  touch-action: pan-y;
}
html.dark .wx-swinner { background: #1c1c1e; }
.wx-top .wx-swinner { background: #EFEFF0; }
html.dark .wx-top .wx-swinner { background: #26262a; }

.wx-charow { display: flex; align-items: center; padding: 11px 12px; position: relative; }
.wx-charow::after {
  content: ''; position: absolute; left: 66px; right: 0; bottom: 0;
  height: .5px; background: var(--sep);
}
.wx-swrow:last-child .wx-charow::after { display: none; }
.wx-chatava { position: relative; margin-right: 12px; flex: none; display: flex; }
.wx-avabadge {
  position: absolute; top: -5px; right: -6px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--red); color: #fff;
  font-size: 11px; display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--card);
}
html.dark .wx-avabadge { border-color: #1c1c1e; }
.wx-chatmain { flex: 1; min-width: 0; }
.wx-chatrow1 { display: flex; align-items: center; gap: 8px; }
.wx-chatname { flex: 1; font-size: 17px; min-width: 0; }
.wx-chattime { font-size: 12px; color: var(--text2); flex: none; }
.wx-chatrow2 { display: flex; align-items: center; gap: 5px; margin-top: 3px; min-height: 20px; }
.wx-chatlast { flex: 1; font-size: 15px; color: var(--text2); min-width: 0; }
.wx-muteico { color: var(--text2); display: flex; flex: none; }
.wx-mutedot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--red); flex: none;
}

/* ---------------------------------------------------------
 * 2. 会话页
 * ------------------------------------------------------- */
.wx-msgs {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  background: var(--wx-chat-bg);
  padding: 10px 0 4px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.wx-msgs::-webkit-scrollbar { width: 0; }
.app-wechat[data-theme="aqua"] .wx-msgs {
  background: var(--wx-chat-bg) var(--wx-bg-texture);
  background-size: 60px 60px;
}

.wx-time { text-align: center; margin: 12px 0 6px; }
.wx-time span { font-size: 12px; color: var(--text2); }

.wx-sys { text-align: center; margin: 10px 24px; }
.wx-sys span {
  font-size: 13px; color: var(--text2);
  background: rgba(118, 118, 128, .12);
  padding: 4px 10px; border-radius: 6px; line-height: 1.5;
  display: inline-block;
}

.wx-msg { display: flex; align-items: flex-start; gap: 10px; padding: 6px 12px; }
.wx-msg.me { flex-direction: row-reverse; }
.wx-mava { flex: none; display: flex; padding-top: 2px; }
.wx-mbody { display: flex; flex-direction: column; max-width: 280px; min-width: 0; }
.wx-msg.them .wx-mbody { align-items: flex-start; }
.wx-msg.me .wx-mbody { align-items: flex-end; }
.wx-mname { font-size: 12px; color: var(--text2); margin: 0 2px 4px; }
.wx-mline { display: flex; align-items: flex-end; gap: 6px; max-width: 100%; }
.wx-msg.me .wx-mline { flex-direction: row-reverse; }

.wx-mstat { color: var(--text2); display: flex; align-items: center; padding-bottom: 3px; }
.wx-mstat.spin {
  width: 13px; height: 13px; border-radius: 50%;
  border: 1.5px solid rgba(120, 120, 128, .35); border-top-color: var(--text2);
  animation: wxSpin 700ms linear infinite;
}
@keyframes wxSpin { to { transform: rotate(360deg); } }
.wx-mread { font-size: 12px; color: var(--text2); padding-bottom: 3px; flex: none; }

.wx-bubble {
  position: relative; border-radius: var(--wx-radius);
  font-size: 17px; line-height: 1.45;
  word-break: break-word; min-width: 0;
  --tail-bg: var(--wx-bubble-them);
}
.app-wechat[data-theme="aqua"] .wx-bubble {
  box-shadow: var(--wx-shadow);
}
.wx-msg.me .wx-bubble { --tail-bg: var(--wx-bubble-me); }

/* 文本 */
.wx-b-text { background: var(--wx-bubble-them); color: var(--wx-text); padding: 9px 12px; }
.wx-msg.me .wx-b-text { background: var(--wx-bubble-me); color: var(--wx-bubble-text); }
.wx-txt { white-space: pre-wrap; }

/* 尾巴：仅文本与语音气泡 */
.wx-msg.them .wx-b-text::before,
.wx-msg.them .wx-b-voice::before {
  content: ''; position: absolute; left: -5px; top: 13px;
  width: 0; height: 0; border: 5px solid transparent;
  border-right-color: var(--tail-bg); border-left: 0;
}
.wx-msg.me .wx-b-text::after,
.wx-msg.me .wx-b-voice::after {
  content: ''; position: absolute; right: -5px; top: 13px;
  width: 0; height: 0; border: 5px solid transparent;
  border-left-color: var(--tail-bg); border-right: 0;
}

/* 图片 / 视频 */
.wx-b-img, .wx-b-video { background: none; padding: 0; overflow: hidden; border-radius: 8px; }
.wx-imgbox {
  display: block; width: 168px; height: 168px;
  border-radius: 8px; overflow: hidden; position: relative;
  background: var(--group);
}
.wx-b-video .wx-imgbox { width: 200px; height: 132px; }
.wx-playbtn {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(0, 0, 0, .42); color: #fff;
  display: flex; align-items: center; justify-content: center;
  padding-left: 3px;
}
.wx-vtime {
  position: absolute; right: 8px; bottom: 8px;
  font-size: 11px; color: #fff;
  background: rgba(0, 0, 0, .45);
  padding: 1px 6px; border-radius: 8px;
}

/* 语音 */
.wx-b-voice {
  background: var(--wx-bubble-them); color: var(--wx-text);
  height: 40px; padding: 0 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.wx-msg.me .wx-b-voice { background: var(--wx-bubble-me); color: var(--wx-bubble-text); }
.wx-msg.me .wx-b-voice { flex-direction: row-reverse; }
.wx-vico { display: flex; flex: none; }
.wx-vdur { font-size: 15px; }
.wx-vdot {
  position: absolute; right: -4px; top: -3px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--red);
}
.wx-msg.them .wx-b-voice .wx-vdot { right: -4px; }
.wx-b-voice.playing .wx-vico { animation: wxVoicePulse 700ms ease-in-out infinite; }
@keyframes wxVoicePulse {
  0%, 100% { opacity: .55; transform: scale(.92); }
  50% { opacity: 1; transform: scale(1.08); }
}

/* 位置 */
.wx-b-loc { background: var(--wx-bubble-them); padding: 0; overflow: hidden; width: 240px; }
.wx-loctx { padding: 10px 12px 8px; }
.wx-loctitle { font-size: 16px; color: var(--text); }
.wx-locsub { font-size: 12px; color: var(--text2); margin-top: 3px; }
.wx-locmap { display: block; height: 96px; position: relative; }
.wx-locpin {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -60%);
  color: var(--red);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .3));
}

/* 名片 / 文件 */
.wx-b-card, .wx-b-file {
  background: var(--wx-bubble-them); width: 220px; padding: 12px;
  display: flex; align-items: center; gap: 10px;
}
.wx-cardava { flex: none; display: flex; }
.wx-cardmain { min-width: 0; flex: 1; }
.wx-cardname { font-size: 16px; color: var(--text); }
.wx-cardsub { font-size: 12px; color: var(--text2); margin-top: 3px; }
.wx-fileico {
  width: 42px; height: 42px; border-radius: 8px;
  background: rgba(7, 193, 96, .12); color: var(--wx);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.app-wechat[data-theme="aqua"] .wx-fileico {
  background: rgba(91, 184, 214, .12);
}

/* 转账卡 */
.wx-b-tf {
  width: 230px; padding: 14px 14px 12px; color: #fff;
  background: linear-gradient(135deg, #F7A02E, #E8760F);
  display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap;
}
.wx-b-tf.mine { background: linear-gradient(135deg, var(--wx-grad-start), var(--wx-grad-end)); }
.wx-tfico { flex: none; opacity: .95; }
.wx-tfmain { flex: 1; min-width: 0; }
.wx-tfamt { font-size: 22px; font-weight: 700; letter-spacing: -.4px; }
.wx-tfnote { font-size: 12px; opacity: .85; margin-top: 3px; }
.wx-tfstate {
  width: 100%; font-size: 11px; opacity: .8;
  padding-top: 9px; border-top: .5px solid rgba(255, 255, 255, .35);
}

/* 红包卡 */
.wx-b-rp {
  width: 230px; padding: 14px; color: #fff;
  background: linear-gradient(135deg, #F26A4B, #D63A32);
  display: flex; align-items: center; gap: 10px;
}
.wx-rpico { flex: none; opacity: .95; }
.wx-rpmain { min-width: 0; }
.wx-rpnote { font-size: 15px; }
.wx-rpsub { font-size: 11px; opacity: .82; margin-top: 4px; }

/* 群公告 */
.wx-b-notice { background: var(--wx-bubble-them); width: 250px; padding: 10px 12px; }
.wx-noticetitle { font-size: 13px; color: var(--wx); font-weight: 600; }
.wx-noticetext { font-size: 15px; color: var(--text); margin-top: 5px; line-height: 1.5; }

/* 引用 */
.wx-quote {
  background: rgba(118, 118, 128, .14);
  border-radius: 6px; padding: 5px 8px; margin-bottom: 6px;
  font-size: 13px; color: var(--text2); line-height: 1.4;
}
.wx-msg.me .wx-quote { background: rgba(255, 255, 255, .2); color: rgba(255, 255, 255, .9); }
.wx-quotename { display: block; font-size: 12px; opacity: .8; }
.wx-quotetext { display: block; }

/* 输入区 */
.wx-inputwrap {
  flex: none; background: var(--bg);
  border-top: .5px solid var(--sep);
  padding-top: 2px;
}
html.dark .wx-inputwrap { background: #1c1c1e; }
.wx-quotebar { display: none; align-items: center; gap: 6px; padding: 6px 12px 0; color: var(--text2); }
.wx-quotebar.on { display: flex; }
.wx-quoteico { display: flex; flex: none; }
.wx-quotetx { flex: 1; font-size: 13px; min-width: 0; }
.wx-quoteclose { color: var(--text2); display: flex; flex: none; }

.wx-inbar { display: flex; align-items: flex-end; gap: 8px; padding: 8px 10px; }
.wx-inico { color: #2C2C2E; flex: none; padding-bottom: 8px; display: flex; }
html.dark .wx-inico { color: #d1d1d6; }
.wx-inico:active { opacity: .5; }
.wx-inbox { flex: 1; min-width: 0; }
.wx-inbox textarea {
  width: 100%; min-height: 38px; max-height: 96px;
  border-radius: 6px; background: var(--bg);
  border: .5px solid var(--sep);
  padding: 8px 10px; font-size: 17px; line-height: 1.35;
  resize: none; overflow-y: auto; display: block;
}
html.dark .wx-inbox textarea { background: #2c2c2e; border-color: #3a3a3c; color: #fff; }
.wx-voicebtn {
  display: none; flex: 1; height: 38px; border-radius: 6px;
  background: var(--bg); border: .5px solid var(--sep);
  font-size: 16px; color: var(--text);
  align-items: center; justify-content: center;
}
html.dark .wx-voicebtn { background: #2c2c2e; border-color: #3a3a3c; }
.wx-voicebtn.rec { background: #d5d5d8; }
.wx-inbar.voice .wx-inbox { display: none; }
.wx-inbar.voice .wx-voicebtn { display: flex; }
.wx-sendbtn {
  display: none; flex: none; height: 38px; padding: 0 14px;
  border-radius: 6px; background: var(--wx); color: #fff;
  font-size: 15px; font-weight: 600;
}
.wx-sendbtn.on { display: flex; align-items: center; }

/* 加号面板 */
.wx-plus {
  display: none; flex: none;
  background: var(--group); border-top: .5px solid var(--sep);
  padding: 16px 8px calc(16px + 6px);
}
html.dark .wx-plus { background: #1c1c1e; }
.wx-plus.on { display: block; }
.wx-plusgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 4px; }
.wx-plusitem { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.wx-plusitem:active { opacity: .6; }
.wx-plusico {
  width: 56px; height: 56px; border-radius: 14px;
  background: #fff; color: #3a3a3c;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}
html.dark .wx-plusico { background: #2c2c2e; color: #e5e5ea; }
.wx-pluslabel { font-size: 12px; color: var(--text2); }

/* 表情面板 */
.wx-emojis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 14px 16px 20px; }
.wx-emojibtn {
  height: 44px; border-radius: 8px; background: var(--group);
  font-size: 14px; color: var(--text);
}
.wx-emojibtn:active { background: rgba(118, 118, 128, .2); }

/* ---------------------------------------------------------
 * 3. 浮层：图片 / 视频 / 位置
 * ------------------------------------------------------- */
.wx-viewer {
  position: absolute; inset: 0; background: #000;
  display: flex; align-items: center; justify-content: center;
}
.wx-viewerimg {
  display: block; width: 88%; height: 62%;
  border-radius: 10px; overflow: hidden;
  animation: wxZoomIn 260ms var(--ease);
}
@keyframes wxZoomIn { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
.wx-viewerhint {
  position: absolute; bottom: 44px; left: 0; right: 0;
  text-align: center; color: rgba(255, 255, 255, .6); font-size: 13px;
}

.wx-vplayer {
  position: absolute; inset: 0; background: #000;
  display: flex; flex-direction: column;
}
.wx-vpstage {
  position: relative; flex: 1; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.wx-vpstage > .thumb { position: absolute; inset: 0; }
.wx-vpplay {
  position: relative; z-index: 2;
  width: 66px; height: 66px; border-radius: 50%;
  background: rgba(0, 0, 0, .42); color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 200ms linear;
}
.wx-vpplay.playing { opacity: 0; }
.wx-vpstage:active .wx-vpplay { opacity: 1; }
.wx-vpprog {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px; background: rgba(255, 255, 255, .22); z-index: 3;
}
.wx-vpprog i { display: block; height: 100%; width: 0; background: var(--wx); }
.wx-vpmeta { flex: none; padding: 16px 20px 34px; color: #fff; }
.wx-vptitle { font-size: 17px; font-weight: 600; }
.wx-vpsub { font-size: 13px; color: rgba(255, 255, 255, .6); margin-top: 6px; }
.wx-vpclose {
  position: absolute; right: 14px; top: 58px;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(0, 0, 0, .45); color: #fff;
  display: flex; align-items: center; justify-content: center; z-index: 4;
}

.wx-locview {
  position: absolute; left: 24px; right: 24px; top: 50%;
  transform: translateY(-50%);
  background: var(--card); border-radius: 14px; overflow: hidden;
}
.wx-locmapbig { display: block; height: 180px; position: relative; }
.wx-locname { font-size: 16px; padding: 12px 14px; color: var(--text); }
.wx-locclose {
  width: 100%; height: 46px; border-top: .5px solid var(--sep);
  color: var(--blue); font-size: 16px;
  display: flex; align-items: center; justify-content: center; gap: 5px;
}

/* ---------------------------------------------------------
 * 4. 选择器 / 网格
 * ------------------------------------------------------- */
.wx-pickgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px; }
.wx-pickcell {
  position: relative; width: 100%; padding-top: 100%;
  border-radius: 8px; overflow: hidden;
}
.wx-pickcell > .thumb { position: absolute; inset: 0; }
.wx-pickrow { border-bottom: .5px solid var(--sep); }
.wx-pickrow:last-child { border-bottom: none; }

.wx-chips { display: flex; flex-wrap: wrap; gap: 10px; padding: 6px 16px 16px; }
.wx-chip {
  padding: 8px 16px; border-radius: 8px;
  background: var(--group); color: var(--text); font-size: 15px;
}
.wx-chip.on { background: rgba(7, 193, 96, .12); color: var(--wx); box-shadow: inset 0 0 0 1px var(--wx); }
.app-wechat[data-theme="aqua"] .wx-chip.on { background: rgba(91, 184, 214, .12); }

.wx-form { padding: 14px 16px 4px; }
.wx-form label { font-size: 13px; color: var(--text2); display: block; margin-bottom: 8px; }
.wx-postarea {
  width: 100%; min-height: 96px; border-radius: 8px;
  background: var(--group); padding: 12px; font-size: 16px;
  line-height: 1.5; resize: none; color: var(--text); display: block;
}
html.dark .wx-postarea { background: #2c2c2e; }

/* ---------------------------------------------------------
 * 5. 通讯录
 * ------------------------------------------------------- */
.wx-cttop { margin-top: 12px; }
.wx-ctlist { background: var(--card); }
html.dark .wx-ctlist { background: #1c1c1e; }
.wx-lettermark {
  font-size: 13px; color: var(--text2);
  background: var(--group); padding: 4px 16px;
  position: sticky; top: 0; z-index: 2;
}
html.dark .wx-lettermark { background: #000; }
.wx-ctrow {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 16px; position: relative;
}
.wx-ctrow:active { background: rgba(0, 0, 0, .05); }
.wx-ctrow::after {
  content: ''; position: absolute; left: 66px; right: 0; bottom: 0;
  height: .5px; background: var(--sep);
}
.wx-ctrow:last-child::after { display: none; }
.wx-ctava { flex: none; display: flex; }
.wx-ctname { flex: 1; font-size: 17px; min-width: 0; color: var(--text); }
.wx-ctsub { font-size: 13px; color: var(--text2); }
.wx-ctcount { font-size: 13px; color: var(--text2); text-align: center; padding: 18px 0 30px; }

.wx-idx {
  position: absolute; right: 3px; top: 190px; bottom: 130px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; z-index: 6;
}
.wx-idxitem { font-size: 10px; color: var(--text2); width: 18px; line-height: 1.2; }
.wx-idxup { color: var(--text2); display: flex; margin-bottom: 2px; }

.wx-fr-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; position: relative;
}
.wx-fr-row::after {
  content: ''; position: absolute; left: 72px; right: 0; bottom: 0;
  height: .5px; background: var(--sep);
}
.wx-fr-row:last-child::after { display: none; }
.wx-frmain { flex: 1; min-width: 0; }
.wx-frname { font-size: 17px; color: var(--text); }
.wx-frmsg { font-size: 13px; color: var(--text2); margin-top: 3px; }
.wx-fr-accept {
  flex: none; padding: 6px 14px; border-radius: 6px;
  background: var(--wx); color: #fff; font-size: 15px;
}
.wx-frdone { font-size: 15px; color: var(--text2); flex: none; }

.wx-selrow {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 16px; position: relative;
}
.wx-selrow::after {
  content: ''; position: absolute; left: 76px; right: 0; bottom: 0;
  height: .5px; background: var(--sep);
}
.wx-check {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  border: 1.5px solid var(--sep); position: relative;
}
.wx-selrow.on .wx-check { background: var(--wx); border-color: var(--wx); }
.wx-selrow.on .wx-check::after {
  content: ''; position: absolute; left: 7px; top: 3px;
  width: 5px; height: 10px;
  border: 2px solid #fff; border-top: 0; border-left: 0;
  transform: rotate(42deg);
}

/* 联系人资料 */
.wx-ctcard { background: var(--card); padding: 22px 16px 20px; }
html.dark .wx-ctcard { background: #1c1c1e; }
.wx-ctcardtop { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.wx-ctcardname { font-size: 22px; font-weight: 600; margin-top: 6px; color: var(--text); }
.wx-ctcardid { font-size: 13px; color: var(--text2); }
.wx-ctbtns { display: flex; gap: 10px; padding: 18px 16px 30px; }
.wx-ctbtn {
  flex: 1; height: 52px; border-radius: 10px;
  background: var(--card); color: var(--wx);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; font-size: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}
html.dark .wx-ctbtn { background: #1c1c1e; }
.wx-ctbtn:active { background: rgba(7, 193, 96, .08); }

/* ---------------------------------------------------------
 * 6. 朋友圈
 * ------------------------------------------------------- */
.wx-mocover { position: relative; height: 240px; }
.wx-mocoverbg { position: absolute; inset: 0; }
.wx-moowner {
  position: absolute; right: 14px; bottom: -22px;
  display: flex; align-items: flex-end; gap: 10px;
}
.wx-moownername {
  color: #fff; font-size: 17px; font-weight: 600;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .35);
  padding-bottom: 40px;
}
.wx-molist { background: var(--group); padding-top: 34px; }
html.dark .wx-molist { background: #000; }
.wx-moend { text-align: center; font-size: 12px; color: var(--text3); padding: 18px 0 30px; }
html.dark .wx-moend { background: #000; }

.wx-mo {
  display: flex; gap: 10px; padding: 14px 14px 10px;
  background: var(--card); position: relative;
}
html.dark .wx-mo { background: #1c1c1e; }
.wx-mo + .wx-mo { border-top: .5px solid var(--sep); }
.wx-moava { flex: none; display: flex; }
.wx-mobody { flex: 1; min-width: 0; }
.wx-moname { font-size: 16px; font-weight: 600; color: #576B95; }
html.dark .wx-moname { color: #7D90A9; }
.wx-motext {
  font-size: 17px; color: var(--text); line-height: 1.45;
  margin-top: 5px; word-break: break-word;
}
.wx-motext > span { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.wx-motext.open > span { -webkit-line-clamp: unset; display: block; }
.wx-momore { font-size: 16px; color: #576B95; margin-top: 2px; }
.wx-mgrid { display: grid; gap: 4px; margin-top: 8px; max-width: 240px; }
.wx-mgrid.grid { grid-template-columns: repeat(3, 1fr); }
.wx-mgrid.four { grid-template-columns: repeat(2, 1fr); max-width: 160px; }
.wx-mgrid.two { grid-template-columns: repeat(2, 1fr); }
.wx-mgrid.one { grid-template-columns: 1fr; max-width: 180px; }
.wx-mcell {
  position: relative; padding-top: 100%; border-radius: 4px; overflow: hidden;
}
.wx-mcell > .thumb { position: absolute; inset: 0; }
.wx-moloc {
  display: flex; align-items: center; gap: 4px;
  font-size: 13px; color: #576B95; margin-top: 8px;
}
.wx-motop {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 8px;
}
.wx-motime { font-size: 13px; color: var(--text2); }
.wx-momorebtn { color: #576B95; display: flex; padding: 0 2px 2px; }

.wx-mointer {
  background: rgba(118, 118, 128, .1);
  border-radius: 6px; margin-top: 8px; padding: 6px 0;
  font-size: 15px; color: var(--text);
}
.wx-mlikes { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; padding: 3px 10px; }
.wx-mlikeico { color: #576B95; display: flex; }
.wx-mlikename { color: #576B95; font-size: 15px; }
.wx-mcomments { padding: 2px 10px 5px; }
.wx-mcomment { font-size: 15px; line-height: 1.5; word-break: break-word; }
.wx-cname { color: #576B95; }

.wx-moacts {
  display: flex; justify-content: flex-end; gap: 4px;
  margin-top: 6px;
}
.wx-moact { color: #576B95; padding: 2px 6px; display: flex; align-items: center; }
.wx-moact.on { color: #E64340; }
html.dark .wx-moact { color: #7D90A9; }

/* 发表页 */
.wx-postbox { background: var(--card); padding: 4px 14px 14px; }
html.dark .wx-postbox { background: #1c1c1e; }
.wx-postbox .wx-postarea { min-height: 120px; background: none; padding: 12px 0; font-size: 17px; }
.wx-postgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 6px; }
.wx-postcell { position: relative; padding-top: 100%; border-radius: 6px; overflow: hidden; }
.wx-postcell.add {
  background: var(--group); color: var(--text2);
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
}
.wx-postcell.add { padding-top: 0; height: 0; padding-bottom: 100%; }
.wx-postcell.add > svg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.wx-postthumb { position: absolute; inset: 0; }
.wx-postdel {
  position: absolute; right: 3px; top: 3px; z-index: 2;
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(0, 0, 0, .55); color: #fff;
  display: flex; align-items: center; justify-content: center;
}

/* ---------------------------------------------------------
 * 7. 我 / 个人信息
 * ------------------------------------------------------- */
.wx-mecard { position: relative; margin: 12px 0 0; background: var(--card); }
html.dark .wx-mecard { background: #1c1c1e; }
.wx-mehead { height: 150px; }
.wx-mebody {
  display: flex; align-items: center; gap: 14px;
  padding: 0 16px 18px; margin-top: -30px;
}
.wx-memain { flex: 1; min-width: 0; padding-top: 34px; }
.wx-mename { font-size: 22px; font-weight: 600; color: var(--text); }
.wx-meid { font-size: 14px; color: var(--text2); margin-top: 6px; }
.wx-mearrow { color: var(--text3); display: flex; align-self: flex-end; margin-bottom: 4px; }
.wx-mebody .wx-disarrow { align-self: flex-end; margin-bottom: 4px; }
.wx-version {
  text-align: center; font-size: 13px; color: var(--text3);
  padding: 26px 0 40px;
}

.wx-qrcard {
  background: var(--card); margin: 16px; border-radius: 12px;
  padding: 26px 16px 22px; text-align: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
}
html.dark .wx-qrcard { background: #1c1c1e; }
.wx-qrname { font-size: 17px; font-weight: 600; color: var(--text); }
.wx-qrbox {
  display: flex; align-items: center; justify-content: center;
  padding: 20px 0 14px; color: #111;
}
html.dark .wx-qrbox { color: #fff; }
.wx-qrtip { font-size: 13px; color: var(--text2); }
.wx-qrbtns { display: flex; gap: 10px; padding: 0 16px 30px; }

/* 收藏 / 表情 */
.wx-favrow {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; background: var(--card); position: relative;
}
html.dark .wx-favrow { background: #1c1c1e; }
.wx-favrow::after {
  content: ''; position: absolute; left: 48px; right: 0; bottom: 0;
  height: .5px; background: var(--sep);
}
.wx-favico {
  width: 30px; height: 30px; border-radius: 8px; flex: none;
  background: rgba(7, 193, 96, .12); color: var(--wx);
  display: flex; align-items: center; justify-content: center;
}
.wx-favmain { flex: 1; min-width: 0; }
.wx-favtext { font-size: 16px; color: var(--text); }
.wx-favsub { font-size: 12px; color: var(--text2); margin-top: 4px; }
.wx-favdel { color: var(--text3); display: flex; flex: none; padding: 4px; }

.wx-stickgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 4px 16px 30px; }
.wx-sticker { position: relative; padding-top: 100%; border-radius: 8px; overflow: hidden; }
.wx-sticker > .thumb { position: absolute; inset: 0; }

/* ---------------------------------------------------------
 * 8. 发现页
 * ------------------------------------------------------- */
.wx-disrow {
  display: flex; align-items: center; gap: 12px;
  padding: 0 16px; min-height: 54px;
  background: var(--card); position: relative;
}
html.dark .wx-disrow { background: #1c1c1e; }
.wx-disrow::after {
  content: ''; position: absolute; left: 60px; right: 0; bottom: 0;
  height: .5px; background: var(--sep);
}
.wx-disrow:last-child::after { display: none; }
.wx-disrow:active { background: rgba(0, 0, 0, .05); }
.wx-disico {
  width: 30px; height: 30px; border-radius: 8px; flex: none;
  color: #fff; display: flex; align-items: center; justify-content: center;
}
.wx-distitle { flex: 1; font-size: 17px; color: var(--text); }
.wx-disbadge { display: flex; margin-right: 6px; position: relative; }
.wx-disarrow { color: var(--text3); display: flex; flex: none; }
/* 朋友圈新动态红点 */
.wx-mobadge {
  position: absolute; top: -6px; right: -8px; min-width: 16px; height: 16px;
  padding: 0 4px; border-radius: 8px; background: #FA5151; color: #fff;
  font-size: 11px; line-height: 16px; text-align: center; font-weight: 600;
  box-shadow: 0 0 0 1.5px var(--card);
}

.wx-chcard { background: var(--card); }
html.dark .wx-chcard { background: #1c1c1e; }
.wx-chcard + .wx-chcard { border-top: .5px solid var(--sep); }
.wx-chcard:active { background: rgba(0, 0, 0, .05); }
.wx-chcard { display: flex; gap: 12px; padding: 12px 14px; }
.wx-chthumb {
  position: relative; width: 138px; height: 82px; flex: none;
  border-radius: 8px; overflow: hidden; background: var(--group);
}
.wx-chthumb > .thumb { position: absolute; inset: 0; }
.wx-chplay {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(0, 0, 0, .4); color: #fff;
  display: flex; align-items: center; justify-content: center; padding-left: 2px;
}
.wx-chmain { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; }
.wx-chtitle { font-size: 16px; line-height: 1.35; color: var(--text); }
.wx-chmeta { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text2); }
.wx-livehost2 { color: var(--text2); margin-right: 8px; }
.wx-livetag {
  position: absolute; left: 6px; top: 6px;
  background: #E64340; color: #fff; font-size: 11px;
  padding: 1px 6px; border-radius: 8px;
}

/* 直播房间 */
.wx-liveroom { position: absolute; inset: 0; background: #000; overflow: hidden; }
.wx-livebg { position: absolute; inset: 0; opacity: .75; }
.wx-livetop {
  position: absolute; left: 14px; top: 60px; right: 14px;
  display: flex; align-items: center; justify-content: space-between; color: #fff;
}
.wx-livehost { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.wx-liveview { font-size: 12px; background: rgba(0, 0, 0, .4); padding: 3px 9px; border-radius: 10px; }
.wx-livebar {
  position: absolute; left: 14px; bottom: 120px;
  display: flex; align-items: center; gap: 6px;
  background: rgba(0, 0, 0, .45); color: #fff;
  padding: 4px 10px; border-radius: 12px; font-size: 12px;
}
.wx-danmu {
  position: absolute; left: 14px; right: 80px; bottom: 164px;
  display: flex; flex-direction: column; gap: 6px;
}
.wx-dm {
  align-self: flex-start; max-width: 100%;
  background: rgba(0, 0, 0, .4); color: #fff;
  font-size: 13px; padding: 4px 10px; border-radius: 12px;
  animation: wxDmIn 300ms var(--ease);
}
@keyframes wxDmIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.wx-liveclose {
  position: absolute; right: 14px; bottom: 60px;
  display: flex; align-items: center; gap: 5px;
  background: rgba(255, 255, 255, .18); color: #fff;
  padding: 9px 16px; border-radius: 20px; font-size: 15px;
}

/* 搜一搜 */
.wx-searchnav { flex: 1; padding: 0 8px; }
.wx-hotwords { display: flex; flex-wrap: wrap; gap: 10px; padding: 6px 16px 30px; }
.wx-hotitem {
  padding: 8px 14px; border-radius: 16px;
  background: var(--card); color: var(--text); font-size: 14px;
}
html.dark .wx-hotitem { background: #1c1c1e; }
.wx-findrow {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; position: relative;
}
.wx-findrow::after {
  content: ''; position: absolute; left: 16px; right: 0; bottom: 0;
  height: .5px; background: var(--sep);
}
.wx-findname { font-size: 16px; color: var(--text); flex: none; max-width: 120px; }
.wx-findtext { font-size: 15px; color: var(--text2); flex: 1; min-width: 0; }

/* ---------------------------------------------------------
 * 9. 钱包
 * ------------------------------------------------------- */
.wx-wcard { background: var(--card); padding: 12px 14px 0; margin-top: 12px; }
html.dark .wx-wcard { background: #1c1c1e; }
.wx-wpay {
  width: 100%; display: flex; align-items: center; gap: 12px;
  background: linear-gradient(135deg, var(--wx-grad-start), var(--wx-grad-end));
  border-radius: 12px; padding: 16px; color: #fff; text-align: left;
}
.wx-wpayico {
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(255, 255, 255, .22);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.wx-wpaytx { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.wx-wpaytx b { font-size: 18px; }
.wx-wpaytx em { font-size: 12px; opacity: .85; font-style: normal; }
.wx-wpay .wx-disarrow { color: rgba(255, 255, 255, .8); }
.wx-wbal {
  display: flex; align-items: baseline; gap: 10px;
  padding: 16px 4px 18px;
}
.wx-wballabel { font-size: 15px; color: var(--text2); }
.wx-wbal b { font-size: 24px; font-weight: 600; color: var(--text); }

.wx-grid9 {
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--card);
}
html.dark .wx-grid9 { background: #1c1c1e; }
.wx-gitem {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 18px 0;
}
.wx-gitem:active { background: rgba(0, 0, 0, .04); }
.wx-gico {
  width: 42px; height: 42px; border-radius: 12px;
  background: rgba(118, 118, 128, .1);
  display: flex; align-items: center; justify-content: center;
}
.wx-glabel { font-size: 13px; color: var(--text); }

.wx-licai { padding: 18px 16px 8px; }
.wx-licai-num { font-size: 30px; font-weight: 700; color: var(--text); }
.wx-licai-sub { font-size: 13px; color: var(--text2); margin-top: 6px; }
.wx-licai-bar {
  height: 6px; border-radius: 3px; margin-top: 16px;
  background: rgba(118, 118, 128, .16); overflow: hidden;
}
.wx-licai-bar i { display: block; height: 100%; background: var(--wx); border-radius: 3px; }

/* 收付款 */
.wx-paytabs { padding: 14px 16px 4px; }
.wx-paycard {
  background: var(--card); margin: 12px 16px 0; border-radius: 12px;
  padding: 22px 16px 24px; text-align: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
}
html.dark .wx-paycard { background: #1c1c1e; }
.wx-paytitle { font-size: 17px; font-weight: 600; color: var(--text); }
.wx-paysub { font-size: 13px; color: var(--text2); margin-top: 6px; }
.wx-qrbox {
  display: flex; align-items: center; justify-content: center;
  padding: 18px 0 10px; color: #111;
}
html.dark .wx-qrbox { color: #fff; }
.wx-barcode { display: flex; justify-content: center; padding-bottom: 8px; color: #111; }
html.dark .wx-barcode { color: #fff; }
.wx-paynum { font-size: 13px; letter-spacing: 2px; color: var(--text2); margin-bottom: 16px; }
.wx-paypause {
  padding: 10px 22px; border-radius: 20px;
  background: var(--group); color: var(--text); font-size: 15px;
}
.wx-paypaused {
  padding: 40px 0 24px; color: var(--text2);
  display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 16px;
}
.wx-paypausedsub { font-size: 13px; }
.wx-paytip { font-size: 12px; color: var(--text2); text-align: center; padding: 16px 30px 30px; }

/* 零钱 / 账单 */
.wx-balcard {
  background: var(--card); margin: 12px 16px; border-radius: 12px;
  padding: 24px 16px 18px; text-align: center;
}
html.dark .wx-balcard { background: #1c1c1e; }
.wx-balnum { font-size: 34px; font-weight: 700; color: var(--text); letter-spacing: -.6px; }
.wx-ballabel { font-size: 13px; color: var(--text2); margin-top: 6px; }
.wx-balbtns { display: flex; gap: 12px; margin-top: 18px; }
.wx-balbtn {
  flex: 1; height: 40px; border-radius: 8px;
  background: rgba(7, 193, 96, .1); color: var(--wx); font-size: 16px;
}
.wx-filters { padding: 4px 16px 12px; }

.wx-billrow {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; position: relative;
}
.wx-billrow::after {
  content: ''; position: absolute; left: 58px; right: 0; bottom: 0;
  height: .5px; background: var(--sep);
}
.wx-billrow:last-child::after { display: none; }
.wx-billico {
  width: 32px; height: 32px; border-radius: 8px; flex: none;
  background: rgba(118, 118, 128, .1); color: var(--text2);
  display: flex; align-items: center; justify-content: center;
}
.wx-billmain { flex: 1; min-width: 0; }
.wx-billtitle { font-size: 16px; color: var(--text); }
.wx-billsub { font-size: 12px; color: var(--text2); margin-top: 4px; }
.wx-billamt { font-size: 17px; font-variant-numeric: tabular-nums; }
.wx-billamt.in { color: var(--wx); }
.wx-billamt.out { color: var(--text); }
.wx-monthhead {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 18px 16px 8px;
}
.wx-monthhead > span:first-child { font-size: 15px; color: var(--text); font-weight: 600; }
.wx-monthsum { font-size: 12px; color: var(--text2); }

/* 银行卡 */
.wx-bcards { padding: 14px 16px 0; }
.wx-bcard {
  border-radius: 12px; padding: 18px; color: #fff;
  margin-bottom: 12px; min-height: 96px;
  display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}
.wx-bcard:active { transform: scale(.99); }
.wx-bcardtop { display: flex; align-items: center; justify-content: space-between; }
.wx-bcardname { font-size: 16px; font-weight: 600; }
.wx-bcardtype { opacity: .8; display: flex; }
.wx-bcardtail { font-size: 13px; letter-spacing: 1px; opacity: .9; }

/* ---------------------------------------------------------
 * 10. 确认 / 结果 / 转账
 * ------------------------------------------------------- */
.wx-tfpage { padding: 30px 20px 0; }
.wx-tfrecv { font-size: 15px; color: var(--text2); }
.wx-tfamount {
  display: flex; align-items: baseline; gap: 4px;
  padding: 10px 0 6px; color: var(--text);
}
.wx-tfamount span { font-size: 26px; font-weight: 600; }
.wx-tfamount b { font-size: 44px; font-weight: 700; letter-spacing: -1px; }
.wx-tfinput {
  width: 100%; height: 48px; border-bottom: 2px solid var(--wx);
  font-size: 30px; font-weight: 600; color: var(--text);
  padding: 4px 0;
}
.wx-tfinput::placeholder { color: var(--text3); font-size: 20px; font-weight: 400; }
.wx-tfrow {
  display: flex; align-items: center; gap: 12px;
  margin-top: 22px; padding-bottom: 12px;
  border-bottom: .5px solid var(--sep);
}
.wx-tfrow span { font-size: 16px; color: var(--text); flex: none; }
.wx-tfrow input { flex: 1; font-size: 16px; color: var(--text); text-align: right; }
.wx-tfbal { font-size: 13px; color: var(--text2); padding: 16px 0 30px; }

.wx-confirmcard {
  background: var(--card); margin-top: 12px;
  padding: 26px 16px; text-align: center;
}
html.dark .wx-confirmcard { background: #1c1c1e; }
.wx-confirmava { display: flex; justify-content: center; }
.wx-confirname { font-size: 15px; color: var(--text2); margin-top: 10px; }
.wx-confirmamt { font-size: 34px; font-weight: 700; color: var(--text); margin-top: 8px; letter-spacing: -.6px; }
.wx-confirmnote { font-size: 14px; color: var(--text2); margin-top: 8px; }
.wx-confirmstate { font-size: 14px; color: var(--wx); margin-top: 10px; }

.wx-sucbox {
  background: var(--card); margin-top: 12px;
  padding: 44px 20px 40px; text-align: center;
}
html.dark .wx-sucbox { background: #1c1c1e; }
.wx-sucico {
  width: 78px; height: 78px; border-radius: 50%; margin: 0 auto;
  background: var(--wx); color: #fff;
  display: flex; align-items: center; justify-content: center;
  animation: wxPop 420ms var(--ease);
}
@keyframes wxPop {
  0% { transform: scale(.4); opacity: 0; }
  60% { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}
.wx-suctitle { font-size: 18px; color: var(--text); margin-top: 20px; }
.wx-sucamt { font-size: 34px; font-weight: 700; color: var(--text); margin-top: 10px; letter-spacing: -.6px; }
.wx-sucsub { font-size: 13px; color: var(--text2); margin-top: 12px; line-height: 1.6; }

.wx-paybigamt { font-size: 28px; font-weight: 700; color: var(--price); margin: 8px 0 4px; }
.wx-rpsmall { font-size: 12px; color: #8E8E93; }

/* ---------------------------------------------------------
 * 11. 红包
 * ------------------------------------------------------- */
.wx-rpsend { padding: 16px 16px 0; }
.wx-rpseg { padding-bottom: 14px; }
.wx-rpform { padding: 10px 0; }
.wx-rpform label { font-size: 13px; color: var(--text2); display: block; margin-bottom: 8px; }
.wx-rpbal { font-size: 13px; color: var(--text2); padding: 14px 0 30px; }

.wx-rpwrap {
  flex: 1; background: linear-gradient(180deg, #E5544A 0%, #C7302A 100%);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 20px;
}
.wx-rpbig {
  width: 300px; background: #F5C64B; border-radius: 14px;
  padding: 26px 20px 22px; text-align: center;
  position: relative; box-shadow: 0 14px 36px rgba(0, 0, 0, .28);
  animation: wxZoomIn 320ms var(--ease);
}
.wx-rpbig::after {
  content: ''; position: absolute; left: 0; right: 0; top: 88px;
  height: 1px; background: rgba(0, 0, 0, .06);
}
.wx-rpavatar { display: flex; justify-content: center; }
.wx-rpfrom { font-size: 14px; color: #7A5A16; margin-top: 10px; }
.wx-rpbless { font-size: 19px; font-weight: 600; color: #6A4B10; margin-top: 8px; }
.wx-rpopenbtn {
  width: 82px; height: 82px; border-radius: 50%; margin: 20px auto 16px;
  background: radial-gradient(circle at 40% 32%, #FFF3C9, #E9B33E);
  color: #8A5A0B; font-size: 34px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
  animation: wxRpPulse 1.6s ease-in-out infinite;
}
@keyframes wxRpPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
.wx-rptip { font-size: 12px; color: #8A6A20; }
.wx-rpback { color: #fff; display: flex; align-items: center; }

.wx-rpresult {
  background: linear-gradient(180deg, #F26A4B, #D63A32);
  color: #fff; text-align: center;
  padding: 26px 16px 24px; font-size: 14px;
}
.wx-rpresultamt { font-size: 36px; font-weight: 700; margin: 10px 0 6px; letter-spacing: -.6px; }
.wx-rpresultsub { font-size: 12px; opacity: .85; }
.wx-rpgroup { background: var(--card); margin-top: 12px; padding: 14px 0 6px; }
html.dark .wx-rpgroup { background: #1c1c1e; }
.wx-rpgrouptitle { font-size: 15px; color: var(--text); padding: 0 16px; }
.wx-rpmeta { font-size: 13px; color: var(--text2); padding: 6px 16px 12px; }
.wx-rpclaims { padding: 0 0 6px; }
.wx-rpclaim {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; position: relative;
}
.wx-rpclaim::after {
  content: ''; position: absolute; left: 56px; right: 16px; bottom: 0;
  height: .5px; background: var(--sep);
}
.wx-rpclaim:last-child::after { display: none; }
.wx-rpclaimava { display: flex; flex: none; }
.wx-rpclaimname { flex: 1; font-size: 15px; color: var(--text); min-width: 0; }
.wx-rpbest {
  font-size: 11px; color: #B07A18;
  background: rgba(245, 198, 75, .22);
  padding: 2px 6px; border-radius: 4px; flex: none;
}
.wx-rpclaimamt { font-size: 16px; color: var(--text); flex: none; font-variant-numeric: tabular-nums; }
.wx-rpempty { font-size: 14px; color: var(--text2); text-align: center; padding: 24px 16px; }
.wx-rpfoot { font-size: 12px; color: var(--text3); text-align: center; padding: 26px 0 40px; }

.wx-rpcover {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #E5544A, #C7302A);
  display: flex; align-items: center; justify-content: center;
}
.wx-rpcard2 { text-align: center; color: #F8D98A; }
.wx-rpcoin {
  width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 18px;
  background: radial-gradient(circle at 38% 30%, #FFF3C9, #E9B33E);
  color: #8A5A0B;
  display: flex; align-items: center; justify-content: center;
  animation: wxCoinSpin 900ms linear infinite;
}
@keyframes wxCoinSpin {
  0% { transform: rotateY(0deg) scale(1); }
  50% { transform: rotateY(180deg) scale(1.06); }
  100% { transform: rotateY(360deg) scale(1); }
}
.wx-rptitle { font-size: 22px; font-weight: 700; }
.wx-rpsub2 { font-size: 13px; margin-top: 10px; opacity: .85; }

.wx-rpopen {
  position: absolute; inset: 0; overflow: hidden;
  background: radial-gradient(circle at 50% 42%, rgba(255, 220, 150, .22), transparent 62%);
  display: flex; align-items: center; justify-content: center;
}
.wx-rpamt-wrap { text-align: center; animation: wxPop 420ms var(--ease); }
.wx-rpamt-label { font-size: 14px; color: #F8D98A; }
.wx-rpamt { font-size: 46px; font-weight: 700; color: #FFE9A8; margin-top: 8px; letter-spacing: -1px; }
.wx-coin {
  position: absolute; top: -40px; color: #F5C64B;
  animation: wxCoinFall 1100ms cubic-bezier(.3, .6, .6, 1) forwards;
}
@keyframes wxCoinFall {
  0% { transform: translateY(-40px) rotate(0deg); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateY(760px) rotate(420deg); opacity: 0; }
}

/* ---------------------------------------------------------
 * 12. 小程序
 * ------------------------------------------------------- */
.wx-minigrid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--card); padding: 6px 0 14px;
}
html.dark .wx-minigrid { background: #1c1c1e; }
.wx-miniitem {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 12px 4px;
}
.wx-miniico {
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--group); color: var(--wx);
  display: flex; align-items: center; justify-content: center;
}
html.dark .wx-miniico { background: #2c2c2e; }
.wx-mininame { font-size: 12px; color: var(--text); max-width: 72px; }

.wx-minihead {
  flex: none; display: flex; align-items: center; gap: 10px;
  padding: 10px 14px 12px;
  background: var(--bg);
}
html.dark .wx-minihead { background: #1c1c1e; }
.wx-miniheadeico {
  width: 34px; height: 34px; border-radius: 10px;
  background: rgba(7, 193, 96, .12); color: var(--wx);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.wx-miniheadname { flex: 1; font-size: 16px; font-weight: 600; color: var(--text); }
.wx-minicap {
  display: flex; align-items: center; gap: 0;
  background: rgba(118, 118, 128, .12);
  border-radius: 16px; padding: 2px;
}
.wx-capbtn {
  width: 40px; height: 28px; border-radius: 14px;
  color: var(--text); display: flex; align-items: center; justify-content: center;
}
.wx-capbtn:active { background: rgba(0, 0, 0, .06); }
.wx-minibody { padding-bottom: 30px; background: var(--group); }
html.dark .wx-minibody { background: #000; }

.wx-miniform { background: var(--card); margin-top: 12px; }
html.dark .wx-miniform { background: #1c1c1e; }
.wx-minifield {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; min-height: 54px; position: relative;
}
.wx-minifield::after {
  content: ''; position: absolute; left: 16px; right: 0; bottom: 0;
  height: .5px; background: var(--sep);
}
.wx-minifield:last-child::after { display: none; }
.wx-minifield > span:first-child { font-size: 15px; color: var(--text2); flex: none; }
.wx-minifield > b { flex: 1; font-size: 16px; font-weight: 400; text-align: right; color: var(--text); }
.wx-minifield input {
  flex: 1; font-size: 16px; text-align: right; color: var(--text);
  background: none; border: none; min-width: 0;
}
.wx-minisvc { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.wx-minisvc b { font-size: 16px; font-weight: 400; color: var(--text); }
.wx-minisvc em { font-size: 12px; color: var(--text2); font-style: normal; }
.wx-minibody .btn { margin: 20px 16px 0; width: calc(100% - 32px); }

.wx-codecard {
  background: var(--card); margin: 12px 16px; border-radius: 12px;
  padding: 26px 16px 24px; text-align: center;
}
html.dark .wx-codecard { background: #1c1c1e; }
.wx-codetitle { font-size: 16px; color: var(--text2); }
.wx-codeqr {
  display: flex; align-items: center; justify-content: center;
  padding: 20px 0 12px; color: #111; transition: opacity 200ms linear;
}
html.dark .wx-codeqr { color: #fff; }
.wx-codename { font-size: 16px; color: var(--text); }
.wx-codetime { font-size: 12px; color: var(--text2); margin-top: 6px; }

.wx-exphead { font-size: 14px; color: var(--text2); padding: 18px 16px 8px; }
.wx-exp { background: var(--card); padding: 6px 0 10px; }
html.dark .wx-exp { background: #1c1c1e; }
.wx-expnode {
  display: flex; gap: 12px; padding: 12px 16px 12px 22px;
  position: relative;
}
.wx-expnode::before {
  content: ''; position: absolute; left: 27px; top: 0; bottom: 0;
  width: 1px; background: var(--sep);
}
.wx-expnode:first-child::before { top: 22px; }
.wx-expnode:last-child::before { bottom: auto; height: 22px; }
.wx-expdot {
  width: 11px; height: 11px; border-radius: 50%; flex: none;
  background: var(--sep); margin-top: 5px; position: relative; z-index: 2;
  box-shadow: 0 0 0 3px var(--card);
}
html.dark .wx-expdot { box-shadow: 0 0 0 3px #1c1c1e; }
.wx-expnode.on .wx-expdot { background: var(--wx); }
.wx-exptx { flex: 1; min-width: 0; }
.wx-exptitle { font-size: 15px; color: var(--text); }
.wx-expnode.on .wx-exptitle { color: var(--wx); }
.wx-expsub { font-size: 12px; color: var(--text2); margin-top: 4px; }

/* ---------------------------------------------------------
 * 13. 公众号 / 文章
 * ------------------------------------------------------- */
.wx-acrow {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; background: var(--card); position: relative;
}
html.dark .wx-acrow { background: #1c1c1e; }
.wx-acrow::after {
  content: ''; position: absolute; left: 72px; right: 0; bottom: 0;
  height: .5px; background: var(--sep);
}
.wx-acrow:last-child::after { display: none; }
.wx-acmain { flex: 1; min-width: 0; }
.wx-acname { font-size: 17px; color: var(--text); }
.wx-acdesc { font-size: 13px; color: var(--text2); margin-top: 4px; }
.wx-artrow {
  display: flex; gap: 12px; padding: 12px 16px;
  background: var(--card); position: relative;
}
html.dark .wx-artrow { background: #1c1c1e; }
.wx-artrow::after {
  content: ''; position: absolute; left: 16px; right: 0; bottom: 0;
  height: .5px; background: var(--sep);
}
.wx-artthumb {
  width: 84px; height: 62px; border-radius: 6px; overflow: hidden;
  flex: none; position: relative; background: var(--group);
}
.wx-artthumb > .thumb { position: absolute; inset: 0; }
.wx-artmain { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; }
.wx-arttitle { font-size: 16px; line-height: 1.35; color: var(--text); }
.wx-artmeta { font-size: 12px; color: var(--text2); }

.wx-article {
  background: var(--card); padding: 22px 18px 30px; margin-top: 0;
}
html.dark .wx-article { background: #1c1c1e; }
.wx-art-h { font-size: 22px; font-weight: 700; line-height: 1.4; margin: 0 0 10px; color: var(--text); }
.wx-art-meta { font-size: 13px; color: var(--text2); margin-bottom: 20px; }
.wx-art-p { font-size: 17px; line-height: 1.75; color: var(--text); margin: 0 0 16px; }
.wx-art-fig { position: relative; padding-top: 56%; border-radius: 8px; overflow: hidden; margin: 6px 0 18px; }
.wx-art-fig > .thumb { position: absolute; inset: 0; }
.wx-art-stat { font-size: 13px; color: var(--text2); text-align: center; padding: 8px 0 16px; }
.wx-art-acts { display: flex; justify-content: center; gap: 40px; padding-bottom: 20px; }
.wx-art-act {
  display: flex; align-items: center; gap: 6px;
  font-size: 15px; color: var(--text2);
}
.wx-art-act.on { color: #E64340; }
.wx-art-cms { padding: 4px 0 12px; }
.wx-art-cm { display: flex; gap: 10px; padding: 10px 0; }
.wx-art-cmava { display: flex; flex: none; }
.wx-art-cmmain { flex: 1; min-width: 0; }
.wx-art-cmname { font-size: 13px; color: #576B95; }
.wx-art-cmtext { font-size: 16px; color: var(--text); margin-top: 4px; line-height: 1.5; }
.wx-art-cmbar {
  display: flex; align-items: center; gap: 10px;
  border-top: .5px solid var(--sep); padding-top: 14px;
}
.wx-art-cmbar input {
  flex: 1; height: 38px; border-radius: 8px;
  background: var(--group); padding: 0 12px;
  font-size: 16px; color: var(--text); border: none;
}
.wx-art-cmbar button {
  flex: none; padding: 0 16px; height: 38px; border-radius: 8px;
  background: var(--wx); color: #fff; font-size: 15px;
}

/* ---------------------------------------------------------
 * 14. 设置 / 帮助 / 登录
 * ------------------------------------------------------- */
.wx-fsblock { padding: 16px; }
.wx-fsrow { display: flex; align-items: center; gap: 14px; }
.wx-fssmall { font-size: 15px; color: var(--text2); }
.wx-fsbig { font-size: 21px; color: var(--text2); }
.wx-range {
  flex: 1; -webkit-appearance: none; appearance: none;
  height: 4px; border-radius: 2px; background: rgba(118, 118, 128, .22);
}
.wx-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
  border: .5px solid rgba(0, 0, 0, .06);
}
.wx-fspreview {
  font-size: 17px; color: var(--text); margin-top: 16px;
  line-height: 1.5; transition: font-size 120ms linear;
}

.wx-storage { padding: 24px 16px 10px; text-align: center; }
.wx-storage-num { font-size: 30px; font-weight: 700; color: var(--text); }
.wx-storage-bar {
  height: 6px; border-radius: 3px; margin: 16px 0 12px;
  background: rgba(118, 118, 128, .16); overflow: hidden;
}
.wx-storage-bar i {
  display: block; height: 100%; border-radius: 3px;
  background: var(--wx); transition: width 600ms var(--ease);
}
.wx-storage-bar.busy i { animation: wxBarBusy 700ms ease-in-out infinite alternate; }
@keyframes wxBarBusy { from { opacity: .4; } to { opacity: 1; } }
.wx-storage-sub { font-size: 12px; color: var(--text2); line-height: 1.6; }

.wx-faq { position: relative; }
.wx-faq::after {
  content: ''; position: absolute; left: 16px; right: 0; bottom: 0;
  height: .5px; background: var(--sep);
}
.wx-faq:last-child::after { display: none; }
.wx-faqq {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 15px 16px; font-size: 16px; color: var(--text);
}
.wx-faqq svg { transition: transform 220ms var(--ease); color: var(--text2); flex: none; }
.wx-faq.open .wx-faqq svg { transform: rotate(180deg); }
.wx-faqa {
  display: none; padding: 0 16px 16px;
  font-size: 15px; color: var(--text2); line-height: 1.65;
}
.wx-faq.open .wx-faqa { display: block; }

.wx-chatmocl { padding: 18px 16px; background: var(--group); }
html.dark .wx-chatmocl { background: #000; }
.wx-msgmoc {
  max-width: 260px; font-size: 15px; line-height: 1.5;
  padding: 9px 12px; border-radius: 16px; margin-bottom: 12px;
}
.wx-msgmoc.them { background: #fff; color: #000; }
html.dark .wx-msgmoc.them { background: #2C2C2E; color: #fff; }
.wx-msgmoc.me { background: var(--wx); color: #fff; margin-left: auto; }

.wx-login {
  background: var(--group);
  display: flex; flex-direction: column; align-items: center;
  padding-top: 90px;
}
html.dark .wx-login { background: #000; }
.wx-logobox {
  width: 96px; height: 96px; border-radius: 26px;
  background: linear-gradient(160deg, var(--wx-grad-end), var(--wx));
  color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 26px rgba(7, 193, 96, .28);
}
.wx-loginname { font-size: 26px; font-weight: 700; color: var(--text); margin-top: 20px; }
.wx-logintip { font-size: 13px; color: var(--text2); margin-top: 12px; padding: 0 40px; text-align: center; line-height: 1.6; }
.wx-loginbtn { width: 260px; margin-top: 42px; }
.wx-loginother { font-size: 15px; color: var(--blue); margin-top: 22px; }
.wx-loginver { position: absolute; bottom: 60px; font-size: 12px; color: var(--text3); }

/* ---------------------------------------------------------
 * 15. 通话
 * ------------------------------------------------------- */
.wx-call { position: absolute; inset: 0; overflow: hidden; }
.wx-callbg { position: absolute; inset: 0; }
.wx-call.video .wx-callbg { opacity: .5; }
.wx-call.video { background: linear-gradient(180deg, #12603C 0%, #05271A 100%); }
.wx-call.voice { background: linear-gradient(180deg, #23262B 0%, #0B0C0E 100%); }
.wx-call.video .wx-callbg { display: none; }
.wx-callinfo {
  position: absolute; left: 0; right: 0; top: 118px;
  text-align: center; color: #fff;
}
.wx-callava {
  display: flex; justify-content: center;
  animation: wxCallIn 420ms var(--ease);
}
@keyframes wxCallIn { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: none; } }
.wx-callname { font-size: 28px; font-weight: 600; margin-top: 22px; }
.wx-callstat { font-size: 15px; color: rgba(255, 255, 255, .72); margin-top: 12px; font-variant-numeric: tabular-nums; }
.wx-local {
  position: absolute; right: 16px; top: 130px;
  width: 108px; height: 152px; border-radius: 12px; overflow: hidden;
  background: #000; opacity: 0; pointer-events: none;
  transition: opacity 260ms var(--ease), transform 120ms linear;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
  touch-action: none;
}
.wx-local.on { opacity: 1; pointer-events: auto; }
.wx-local.drag { transform: scale(1.03); }
.wx-local > span { position: absolute; inset: 0; }
.wx-local em {
  position: absolute; left: 8px; bottom: 6px;
  font-size: 11px; color: #fff; font-style: normal;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
.wx-callbtns {
  position: absolute; left: 0; right: 0; bottom: 96px;
  display: flex; align-items: center; justify-content: center; gap: 84px;
}
.wx-cbtn {
  width: 68px; height: 68px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; transition: transform 140ms var(--ease), opacity 240ms linear;
}
.wx-cbtn:active { transform: scale(.94); }
.wx-cbtn.hang { background: #E64340; }
.wx-cbtn.acc { background: var(--wx); }
.wx-callmini {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 40px;
  display: flex; align-items: center; gap: 6px;
  color: #fff; font-size: 15px;
  background: rgba(255, 255, 255, .14);
  padding: 10px 20px; border-radius: 22px;
}
.wx-callmini.on { background: rgba(255, 255, 255, .3); }

/* ---------------------------------------------------------
 * 16. 扫一扫
 * ------------------------------------------------------- */
.wx-scan { position: absolute; inset: 0; background: #000; }
.wx-scanview { position: absolute; inset: 0; }
.wx-scanview > .thumb { position: absolute; inset: 0; opacity: .5; }
.wx-scanview.lit > .thumb { opacity: .85; }
.wx-scanframe {
  position: absolute; left: 50%; top: 44%;
  transform: translate(-50%, -50%);
  width: 230px; height: 230px;
  border-radius: 12px;
  box-shadow: 0 0 0 2000px rgba(0, 0, 0, .35);
}
.wx-scanframe::before {
  content: ''; position: absolute; inset: 0;
  border: 2px solid var(--wx); border-radius: 12px;
}
.wx-scanline {
  position: absolute; left: 6px; right: 6px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--wx), transparent);
  animation: wxScanMove 2.2s ease-in-out infinite;
}
@keyframes wxScanMove {
  0%, 100% { top: 8px; opacity: .5; }
  50% { top: 216px; opacity: 1; }
}
.wx-scantip {
  position: absolute; left: 0; right: 0; top: 60%;
  text-align: center; color: rgba(255, 255, 255, .75); font-size: 14px;
}
.wx-scanbtns {
  position: absolute; left: 0; right: 0; bottom: 110px;
  display: flex; justify-content: center; gap: 60px;
}
.wx-scanbtn {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: #fff; font-size: 12px;
  background: rgba(255, 255, 255, .12);
  padding: 14px 22px; border-radius: 16px;
}
.wx-scanbtn.on { background: rgba(7, 193, 96, .3); }

/* ---------------------------------------------------------
 * 9. 主题选择页
 * ------------------------------------------------------- */
.wx-theme-list { padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.wx-theme-card {
  position: relative; border-radius: 16px; overflow: hidden;
  background: var(--wx-card-bg); border: 2px solid transparent;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
}
.wx-theme-card.active { border-color: var(--wx); }
.wx-theme-preview {
  height: 120px; padding: 12px; display: flex; flex-direction: column; gap: 8px;
}
.wx-theme-nav { height: 24px; border-radius: 4px; }
.wx-theme-bubbles { display: flex; flex-direction: column; gap: 6px; }
.wx-theme-bubble {
  max-width: 70%; padding: 6px 10px; border-radius: 10px;
  font-size: 13px; line-height: 1.4;
}
.wx-theme-bubble.them { align-self: flex-start; }
.wx-theme-bubble.me { align-self: flex-end; }
.wx-theme-info { padding: 12px 16px; }
.wx-theme-name { font-size: 16px; font-weight: 600; color: var(--wx-text); }
.wx-theme-desc { font-size: 13px; color: var(--wx-text2); margin-top: 2px; }
.wx-theme-check {
  position: absolute; top: 10px; right: 10px;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--wx); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.wx-theme-tip {
  text-align: center; font-size: 13px; color: var(--wx-text2);
  padding: 0 16px 30px;
}

/* =========================================================
 * 五位角色克隆音色语音（js/wechat/wxroleVoice.js）
 * 语音来自 MiMo 克隆音色（服务端按角色绑定音色包，禁止跨角色串用）。
 * 默认试听版语音包（浏览器 TTS）已移除；无音色包的角色按钮不可用。
 * 获得书面授权并注册逐条资源后，仍支持切换到授权原作录音。
 * ========================================================= */
.wx-role-voice-btn {
  position: absolute; right: 5px; bottom: 3px;
  width: 26px; height: 20px; padding: 0; border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 7px; background: transparent;
  color: var(--wx-text2, #8a8a8e); opacity: .68;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.wx-b-text:has(.wx-role-voice-btn) { padding-bottom: 26px; }
.wx-role-voice-btn:active { opacity: 1; transform: scale(.94); }
.wx-role-voice-btn.is-unavailable { opacity: .45; }
.wx-role-voice-btn.is-loading { color: #ff9f0a; opacity: 1; }
.wx-role-voice-btn.is-playing { color: #0a84ff; opacity: 1; }
.wx-role-voice-btn.is-paused { color: #0a84ff; opacity: .9; }
.wx-role-voice-btn.is-error { color: #ff3b30; opacity: 1; }
.wx-role-voice-icon { display: inline-flex; align-items: center; justify-content: center; }
.wx-role-voice-mark { display: none; width: 11px; height: 11px; border: 1.5px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: wxRoleVoiceSpin 700ms linear infinite; }
.wx-role-voice-btn.is-loading .wx-role-voice-icon { display: none; }
.wx-role-voice-btn.is-loading .wx-role-voice-mark { display: block; }
.wx-role-voice-btn.is-playing .wx-role-voice-icon svg { display: none; }
.wx-role-voice-btn.is-playing .wx-role-voice-mark { display: block; border-width: 0; border-radius: 0; width: 12px; height: 12px; background: linear-gradient(90deg, currentColor 0 2px, transparent 2px 4px, currentColor 4px 6px, transparent 6px 8px, currentColor 8px 10px); animation: wxRoleVoicePulse 800ms ease-in-out infinite; }
@keyframes wxRoleVoiceSpin { to { transform: rotate(360deg); } }
@keyframes wxRoleVoicePulse { 0%, 100% { transform: scaleY(.62); opacity: .6; } 50% { transform: scaleY(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .wx-role-voice-mark { animation: none; }
}

/* =========================================================
 * 祁煜有声语言包（js/wechat/qiyuVoice.js）
 *  - 文本气泡右下角小喇叭：点击播放/停止
 *  - 朗读中：喇叭切换为声波条动画（.tts-speaking）
 *  - 顶部导航语音开关 .wx-vtsw（.on = 开启）
 * ========================================================= */
.wx-b-text:has(.wx-tts) { padding-bottom: 26px; }
.wx-tts {
  position: absolute; right: 5px; bottom: 3px;
  width: 26px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--wx-text2, #8a8a8e); opacity: .75;
  background: none; border: 0; padding: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.wx-tts:active { opacity: 1; }
.wx-tts .wx-tts-ico { display: inline-flex; }
/* 声波条：默认隐藏，朗读中显示 */
.wx-tts .wx-tts-wave { display: none; align-items: flex-end; gap: 2px; height: 12px; }
.wx-tts .wx-tts-wave i {
  width: 2.5px; height: 4px; border-radius: 2px;
  background: currentColor;
  animation: wxTtsWave 900ms ease-in-out infinite;
}
.wx-tts .wx-tts-wave i:nth-child(2) { animation-delay: 150ms; }
.wx-tts .wx-tts-wave i:nth-child(3) { animation-delay: 300ms; }
.wx-bubble.tts-speaking .wx-tts { color: #0a84ff; opacity: 1; }
.wx-bubble.tts-speaking .wx-tts .wx-tts-ico { display: none; }
.wx-bubble.tts-speaking .wx-tts .wx-tts-wave { display: inline-flex; }
@keyframes wxTtsWave {
  0%, 100% { height: 4px; }
  50% { height: 12px; }
}

/* 顶部导航「语音」开关：亮 = 开启 */
.wx-vtsw { display: inline-flex; color: var(--wx-text2, #8a8a8e); opacity: .45; }
.wx-vtsw.on { color: #0a84ff; opacity: 1; }

/* =========================================================
 * 无感刷新：自动回复增量插入的新气泡（js/wechat/wxsmooth.js）
 * 只做淡入 + 轻微上移，不重绘整页，避免闪烁与滚动跳动
 * ========================================================= */
.wx-msg.wx-fresh { animation: wxBubbleIn .24s cubic-bezier(.22, .9, .3, 1) both; }
.wx-msg.wx-fresh .wx-bubble { animation: wxBubblePop .24s cubic-bezier(.22, .9, .3, 1) both; }
@keyframes wxBubbleIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes wxBubblePop {
  from { transform: scale(.96); }
  to { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wx-msg.wx-fresh, .wx-msg.wx-fresh .wx-bubble { animation: none; }
}

/* =========================================================
 * 好感度增加 → 小爱心往上飞升后淡出（js/wechat/wxhearts.js）
 * 挂在 fixed 层、pointer-events:none，不挡操作也不参与消息重绘
 * ========================================================= */
.wx-hearts {
  position: fixed; left: 0; right: 0; bottom: 0; height: 72%;
  pointer-events: none; overflow: hidden; z-index: 55;
}
.wx-heart {
  position: absolute; left: 50%; bottom: 88px;   /* 从输入栏上方冒出 */
  width: var(--size, 18px); height: var(--size, 18px);
  line-height: 0; will-change: transform, opacity;
  animation: wxHeartUp var(--dur, 1500ms) cubic-bezier(.22, .68, .32, 1) var(--delay, 0ms) both;
}
.wx-heart > i {
  display: block; width: 100%; height: 100%;
  animation: wxHeartSway var(--dur, 1500ms) ease-in-out var(--delay, 0ms) both;
}
.wx-heart svg {
  width: 100%; height: 100%; display: block;
  filter: drop-shadow(0 1px 2px rgba(255, 75, 130, .38));
}
@keyframes wxHeartUp {
  0% {
    opacity: 0;
    transform: translate3d(calc(-50% + var(--x0, 0px)), 12px, 0) scale(.45);
  }
  14% {
    opacity: 1;
    transform: translate3d(calc(-50% + var(--x0, 0px)), -14px, 0) scale(1.08);
  }
  26% {
    opacity: 1;
    transform: translate3d(calc(-50% + var(--x0, 0px)), -22px, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate3d(calc(-50% + var(--dx, 0px)), calc(-1 * var(--rise, 150px)), 0) scale(1.18);
  }
}
@keyframes wxHeartSway {
  0% { transform: translateX(0) rotate(-6deg); }
  35% { transform: translateX(var(--sw, 8px)) rotate(9deg); }
  70% { transform: translateX(calc(-1 * var(--sw, 8px))) rotate(-5deg); }
  100% { transform: translateX(0) rotate(4deg); }
}
@media (prefers-reduced-motion: reduce) {
  .wx-heart { animation-duration: 900ms; }
  .wx-heart > i { animation: none; }
}