/* ===== 设计 tokens — ⭐Genie 美学·全中性极简（2026-06-21 全站重做）：颜色/圆角/分割线统一出口，换肤只动这里 =====
   方向A：丁香紫/紫色一族【全部废弃】→ 中性黑白灰；token 名全部保留（免动引用），只换值。
   颜色只来自内容照片；强调/选中不靠色，靠留白+抬起浅灰。语义色(红/警告/成功)保留。 */
:root{
  --wx-green:#141414; --wx-green-press:#000; --wx-bubble-me:#ececee;   /* Genie：主操作/发送气泡＝中性黑；发出气泡＝浅灰(配深字,见组件覆盖) */
  --wx-bg:#f4f4f6; --wx-card:#fff;   /* Genie：画布冷调极浅灰、卡白(靠柔投影分层) */
  --wx-line:rgba(0,0,0,.05); --wx-line-strong:rgba(0,0,0,.07);   /* Genie：分割线极弱(列表行分割线另在覆盖层隐藏) */
  --wx-t1:#141414; --wx-t2:#8a8a90; --wx-t3:#b6b6bc;
  --wx-red:#fa5151; --wx-blue:#888;   /* 链接/次级色：丁香→中灰(方案A)；红保留作语义/未读 */
  --wx-r-av:13px; --wx-r-av-sm:9px; --wx-r-card:18px; --wx-r-btn:999px;   /* Genie：头像方形圆角(squircle,对齐设计 13-14px)；卡更软、按钮全胶囊 */
  --wx-press:rgba(0,0,0,.04);
  /* A0 手机壳·桌面（home）tokens：Genie 中性化(去丁香浮雕色，墨色线条转中性) */
  --hm-bg:#f4f4f6;                                                      /* 桌面/向导/状态栏/横条统一画布：中性极浅灰 */
  --hm-ink:#141414; --hm-ink2:rgba(20,20,20,.6); --hm-ink3:rgba(20,20,20,.4);
  --hm-glyph:#141414;                                                   /* 图标墨色线条＝中性近黑 */
  --hm-dk:rgba(150,150,160,.4); --hm-lt:rgba(255,255,255,.95);          /* 浮雕双影中性化(右下暗/左上亮)；Genie 偏"漂浮"，软投影 */
  /* ===== 强调（方案A 全中性：丁香紫废弃，强调＝中性黑；选中/心动靠留白+抬起浅灰，里程碑靠衬线大字） ===== */
  --wx-accent:#141414; --wx-accent-soft:rgba(20,20,20,.05); --wx-accent-deep:#000; --wx-accent-press:#000;
  /* 字号台阶 */
  --fs-caption:11px; --fs-sm:12.5px; --fs-body:14px; --fs-strong:15px; --fs-title:17px; --fs-h:20px; --fs-display:24px;
  /* 间距台阶 */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-6:24px; --sp-8:32px;
  /* 圆角台阶（Genie 软糖感，向上一档） */
  --wx-r-sm:8px; --wx-r-md:12px; --wx-r-lg:18px; --wx-r-xl:24px;
  /* 阴影台阶：Genie 柔、大扩散、低透明度——"漂浮"不是"压印"（去丁香色投影） */
  --sh-sm:0 2px 10px rgba(0,0,0,.05); --sh-md:0 8px 30px rgba(0,0,0,.10); --sh-lg:0 16px 48px rgba(0,0,0,.14);
  /* 动效统一出口 */
  --ease:cubic-bezier(.22,1,.36,1); --dur-fast:.15s; --dur:.26s;
  /* 字体：衬线点睛 / 无衬线功能（Genie；中文衬线只用于品牌时刻/大标题） */
  --font-serif:"Newsreader","Songti SC",Georgia,serif;   /* Genie 衬线点睛：Newsreader(设计同款)优先，离线回退宋体 */
  --font-sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Inter","Söhne",system-ui,sans-serif;
  /* 玻璃/光晕（深色档招牌，浅色档退化为极淡） */
  --wx-glass-blur:20px; --wx-glass-fill:rgba(255,255,255,.6); --wx-glow:0 0 0 1px rgba(255,255,255,.5); --wx-glow-color:rgba(150,180,255,0);
  /* 补色彩缺口·语义色（向导/状态用，保留） */
  --wx-warn-bg:#fff7e6; --wx-warn-border:#f0e0c0; --wx-warn-text:#8a6d3b; --wx-warn-btn:#fa9d3b;
  --wx-ok-bg:#f1f8f3; --wx-ok-border:#d7ecdd; --wx-ok-text:#2e9e5b;
  --wx-err-bg:#fff3f0; --wx-err-border:#ffd9cf; --wx-err-text:#e8654f;
  --wx-t-soft:#a6a6ac; --wx-line-faint:rgba(0,0,0,.035);
  --wx-energy-warn:#e8a13a;   /* 电量低电琥珀（落地方案-37：≤20% 状态栏电池/面板用；非荧光、区别于 err 红） */
}

/* ===== 微信模拟器 App 浮层 ===== */
#wx-launch{ position:fixed; right:16px; bottom:78px; width:52px; height:52px; border-radius:50%; background:var(--wx-green); color:#fff; display:flex; align-items:center; justify-content:center; font-size:27px; box-shadow:0 3px 12px rgba(0,0,0,.35); z-index:9998; cursor:pointer; user-select:none; }
#wx-launch:active{ transform:scale(.94); }

#wx-app{ position:fixed; top:0; left:0; right:0; height:100dvh; background:var(--wx-bg); z-index:9999; display:none; flex-direction:column; max-width:480px; margin:0 auto; box-shadow:0 0 50px rgba(0,0,0,.4); overflow:hidden; }
#wx-app.open{ display:flex; }
#wx-app *{ box-sizing:border-box; }
/* 手机外壳：常驻状态栏 + 屏幕容器（内容只渲染进 #wx-screen）*/
#wx-screen{ flex:1; min-height:0; display:flex; flex-direction:column; overflow:hidden; position:relative; }
#wx-statusbar{ height:calc(30px + env(safe-area-inset-top,0px)); min-height:calc(30px + env(safe-area-inset-top,0px)); display:flex; align-items:center; justify-content:space-between; padding:env(safe-area-inset-top,0px) 15px 0 20px; font-size:13px; font-weight:600; background:var(--wx-bg); color:#111; user-select:none; letter-spacing:.2px; flex:0 0 auto; }   /* 刘海屏/PWA standalone：机壳吃掉顶部安全区（viewport-fit=cover 后 env 才非 0，桌面恒 0 无影响） */
#wx-app[data-theme=dark] #wx-statusbar{ background:#000; color:#fff; }
/* 📱 装到主屏幕（PWA standalone）·陪伴档：假状态栏收成 0 高——真手机状态栏就浮在正上方（theme-color 已把它的底色
   染成游戏底=无缝），故事钟=现实钟时假栏是纯冗余。story 档走瘦身版内容（paintStatusBar 智能隐显），不吃这条。 */
#wx-app.wx-sa-hide #wx-statusbar{ height:0; min-height:0; padding:0; overflow:hidden; }
.wx-sb-time{ font-variant-numeric:tabular-nums; }
.wx-sb-icons{ display:flex; align-items:center; gap:6px; }
.wx-sb-sig{ display:inline-flex; align-items:flex-end; gap:1.5px; height:11px; }
.wx-sb-sig i{ width:3px; background:currentColor; border-radius:1px; }
.wx-sb-sig i:nth-child(1){ height:4px } .wx-sb-sig i:nth-child(2){ height:6px } .wx-sb-sig i:nth-child(3){ height:8px } .wx-sb-sig i:nth-child(4){ height:11px }
.wx-sb-net{ font-size:11px; font-weight:600; }
.wx-sb-batt{ position:relative; width:23px; height:12px; border:1px solid currentColor; border-radius:3px; padding:1.5px; opacity:.92; cursor:pointer; }
.wx-sb-batt::after{ content:''; position:absolute; right:-3px; top:3.5px; width:2px; height:4px; background:currentColor; border-radius:0 1px 1px 0; }
.wx-sb-batt b{ display:block; height:100%; background:currentColor; border-radius:1px; transition:width .3s var(--ease); }
/* 电量真身（落地方案-37 批2·D1）：≤20% 琥珀 / ≤5% 红，只变色不打扰；充电宝有余额 → ⚡小圆标 */
.wx-sb-batt.lv-warn{ color:var(--wx-energy-warn); opacity:1; }
.wx-sb-batt.lv-low{ color:var(--wx-red); opacity:1; }
.wx-sb-pb{ position:absolute; right:-6px; bottom:-5px; width:11px; height:11px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); color:#c8871a; font-size:8px; line-height:11px; text-align:center; font-style:normal; font-weight:800; pointer-events:none; }
#wx-app[data-theme=dark] .wx-sb-pb{ background:#2a2a2e; }
/* ———— 电量面板（B1 顶部下拉小卡）———— */
#wx-en-mask{ position:absolute; inset:0; background:rgba(0,0,0,.28); z-index:58; opacity:0; transition:opacity var(--dur) var(--ease); }
#wx-en-mask.on{ opacity:1; }
#wx-en-panel{ position:absolute; top:36px; right:10px; width:248px; background:var(--wx-card); border-radius:var(--wx-r-lg); box-shadow:var(--sh-lg); padding:15px 16px 13px; z-index:59; transform:translateY(-14px) scale(.96); transform-origin:top right; opacity:0; transition:all var(--dur) var(--ease); }
#wx-en-panel.on{ transform:none; opacity:1; }
.wx-en-top{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.wx-en-batt{ width:44px; height:22px; border:1.5px solid var(--wx-t1); border-radius:6px; padding:2.5px; position:relative; flex:0 0 auto; }
.wx-en-batt::after{ content:''; position:absolute; right:-5px; top:6px; width:3px; height:8px; background:var(--wx-t1); border-radius:0 2px 2px 0; }
.wx-en-batt b{ display:block; height:100%; background:var(--wx-t1); border-radius:2.5px; transition:width .3s var(--ease); }
.wx-en-batt.lv-warn b{ background:var(--wx-energy-warn); }
.wx-en-batt.lv-low b{ background:var(--wx-red); }
.wx-en-num{ font-size:19px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--wx-t1); }
.wx-en-num small{ font-size:11.5px; color:var(--wx-t2); font-weight:500; margin-left:3px; }
.wx-en-row{ display:flex; justify-content:space-between; align-items:center; font-size:12.5px; color:var(--wx-t2); padding:8px 0; border-top:1px solid var(--wx-line); }
.wx-en-row b{ color:var(--wx-t1); font-variant-numeric:tabular-nums; }
.wx-en-btn{ margin-top:10px; height:34px; border-radius:999px; background:var(--wx-accent); color:#fff; font-size:13px; font-weight:600; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.wx-en-btn:active{ opacity:.85; }
.wx-en-redeem{ display:flex; gap:7px; margin-top:10px; }
.wx-en-redeem input{ flex:1; min-width:0; height:34px; border:1.5px solid var(--wx-line-strong); border-radius:999px; padding:0 13px; font-size:13px; font-family:inherit; outline:none; letter-spacing:1px; background:var(--wx-card); color:var(--wx-t1); }
.wx-en-redeem input:focus{ border-color:var(--wx-accent); }
.wx-en-redeem button{ height:34px; padding:0 15px; border:none; border-radius:999px; background:var(--wx-accent); color:#fff; font-size:13px; font-weight:600; font-family:inherit; cursor:pointer; flex:0 0 auto; }
.wx-en-redeem button:disabled{ opacity:.6; }
.wx-en-err{ font-size:11.5px; color:var(--wx-err-text); margin-top:6px; min-height:0; line-height:1.5; }
.wx-en-err:empty{ display:none; }
.wx-en-note{ font-size:11px; color:var(--wx-t3); text-align:center; margin-top:8px; }

.wx-topbar{ height:54px; min-height:54px; background:var(--wx-bg); border-bottom:.5px solid var(--wx-line-strong); display:flex; align-items:center; justify-content:center; position:relative; font-size:17px; font-weight:600; color:#111; }
.wx-back{ position:absolute; left:8px; font-size:26px; line-height:1; padding:6px 10px; cursor:pointer; color:#111; }
.wx-reset{ position:absolute; left:14px; font-size:13px; cursor:pointer; color:var(--wx-red); }

/* 列表页（⭐Genie frame01：浅灰底 + 透明行 + 去分割线 + 留白；置顶最近一条抬起成白卡） */
.wx-rows{ flex:1; overflow-y:auto; background:var(--wx-bg); padding:8px 12px 16px; }
.wx-row{ display:flex; align-items:center; gap:13px; padding:13px 12px; cursor:pointer; position:relative; background:transparent; border-radius:18px; transition:background .15s; }
.wx-row:active{ background:rgba(0,0,0,.05); }
.wx-row::after{ display:none; }   /* Genie：去 hairline 分割线，靠留白分隔 */
.wx-rows > .wx-row:first-child{ background:rgba(255,255,255,.9); box-shadow:0 6px 18px rgba(20,20,30,.07); }   /* 置顶抬起白卡 */
.wx-row-av{ width:50px; height:50px; min-width:50px; border-radius:var(--wx-r-av); display:flex; align-items:center; justify-content:center; color:#fff; font-size:20px; font-weight:600; position:relative; overflow:hidden; }
.wx-row-mid{ flex:1; min-width:0; }
.wx-row-name{ font-size:15.5px; font-weight:500; color:var(--wx-t1); line-height:1.25; }
.wx-row-last{ font-size:13px; color:#8a8a90; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:3px; }
.wx-row-time{ font-size:11.5px; color:var(--wx-t3); align-self:flex-start; margin-top:2px; }
.wx-badge{ position:absolute; top:-4px; right:-4px; background:#141414; color:#fff; font-size:11px; min-width:18px; height:18px; border-radius:9px; display:flex; align-items:center; justify-content:center; padding:0 5px; }   /* Genie：未读角标中性黑(非红) */
/* 群头像九宫格（仿微信）：灰底 + 成员脸瓷砖拼贴 */
.wx-gridav{ display:grid; gap:1px; padding:2px; background:#c5c6c8; align-content:center; justify-content:center; }
.wx-gridav.cols1{ grid-template-columns:1fr } .wx-gridav.cols2{ grid-template-columns:1fr 1fr } .wx-gridav.cols3{ grid-template-columns:1fr 1fr 1fr }
.wx-gcell{ aspect-ratio:1/1; min-width:0; background-size:cover; background-position:center; background-color:#b8b8b8; display:flex; align-items:center; justify-content:center; color:#fff; font-size:8px; font-weight:600; overflow:hidden; }

/* 会话页 */
.wx-msgs{ flex:1; overflow-y:auto; background:var(--wx-bg); padding:10px 12px; }
/* 会话内时间分隔（仿微信：居中灰字）*/
.wx-timesep{ text-align:center; margin:14px 0 8px; font-size:12px; color:#a6a6a6; }
.wx-timesep:first-child{ margin-top:4px; }
/* 输入栏上方·待赴约定条（推进到下一幕） */
.wx-nextscene{ display:flex; align-items:center; gap:8px; background:#fff7e6; border-top:1px solid #f0e0c0; padding:8px 12px; font-size:13px; color:#8a6d3b; animation:wxin .25s ease both; }
.wx-ns-ic{ font-size:15px; flex:0 0 auto; }
.wx-ns-tx{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wx-ns-go{ background:#fa9d3b; color:#fff; border:none; border-radius:13px; padding:5px 12px; font-size:13px; cursor:pointer; flex:0 0 auto; }
.wx-ns-x{ background:none; border:none; color:#b08a4a; font-size:15px; cursor:pointer; padding:2px 4px; flex:0 0 auto; line-height:1; }
/* ⭐输入栏一体成型（2026-07-05 方案A，替代 P0-02 三件套）：发送键(30px)长进输入胶囊、有字才转黑；整栏 76→64px */
.wx-inputbar{ background:var(--wx-bg); border-top:none; display:flex; align-items:flex-end; gap:9px; padding:10px 14px 12px; }
.wx-inpill{ flex:1; min-width:0; display:flex; align-items:flex-end; background:rgba(120,120,130,.1); border-radius:999px; min-height:42px; }
#wx-input{ flex:1; min-width:0; border:none; padding:11px 6px 11px 16px; font-size:15px; resize:none; max-height:96px; background:transparent; font-family:inherit; line-height:20px; outline:none; color:var(--wx-t1); }
#wx-send{ width:30px; height:30px; min-width:30px; margin:6px 6px 6px 0; background:rgba(20,20,20,.08); color:var(--wx-t3); border:none; border-radius:50%; padding:0; cursor:pointer; flex:0 0 auto; display:flex; align-items:center; justify-content:center; transition:background .18s, color .18s; }
#wx-send svg{ display:block; }
#wx-send .wx-send-arrow{ display:flex; }
#wx-send.on{ background:var(--wx-green); color:#fff; }
#wx-send:disabled{ opacity:.45; cursor:default; }
/* 发送键 armed 态（⚙️「发完手动让TA回」）：黑底静态双星(sparkles)＝点我让TA回，全静零动画——三点跳动像「正在输入」、脉冲光环一并去掉（用户拍板 2026-07-05）；有字时 .on 箭头优先（armed 只在空输入框出现，见 syncSendBtn） */
#wx-send .wx-send-star{ display:none; }
#wx-send.armed{ background:var(--wx-green); color:#fff; }
#wx-send.armed .wx-send-arrow{ display:none; }
#wx-send.armed .wx-send-star{ display:flex; }

/* 用户气泡（面板内，非 ST 消息流）*/
.wxm-u{ display:flex; flex-direction:row-reverse; align-items:flex-start; gap:8px; margin:7px 0; }
.wxm-ua{ width:38px; height:38px; min-width:38px; border-radius:var(--wx-r-av-sm); background:linear-gradient(135deg,#3a3a40,#000000); color:#fff; display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:600; }
.wxm-ub{ background:rgba(20,20,20,.07); color:#1c1c20; padding:11px 15px; border-radius:20px 20px 7px 20px; max-width:74%; font-size:14.5px; line-height:1.45; word-break:break-word; box-shadow:none; }   /* ⭐Genie frame02：发出气泡＝更浅中性灰+深字、无投影、尾角右下 */

/* 设定页 */
.wx-setup{ flex:1; overflow-y:auto; padding:16px 20px 28px; background:#fafafb; }
.wx-setup h3{ margin:8px 0 2px; font-size:21px; font-weight:700; letter-spacing:.2px; color:#1a1a1c; }
.wx-setup p.tip{ font-size:13px; color:var(--wx-t-soft); margin:4px 0 10px; line-height:1.5; }
.wx-setup label{ display:block; font-size:13px; color:var(--wx-blue); margin:16px 0 6px; font-weight:600; }
.wx-setup input, .wx-setup textarea{ width:100%; border:1px solid #e6e6e9; border-radius:10px; padding:11px 12px; font-size:14px; font-family:inherit; background:#fff; box-sizing:border-box; transition:border-color .15s, box-shadow .15s; }
.wx-setup input:focus, .wx-setup textarea:focus{ outline:none; border-color:var(--wx-green); box-shadow:0 0 0 3px rgba(0,0,0,.12); }
.wx-setup textarea{ min-height:74px; resize:vertical; line-height:1.55; }
.wx-btn{ width:100%; margin-top:22px; background:linear-gradient(135deg,var(--wx-green),#3a3a40); color:#fff; border:none; border-radius:12px; padding:14px; font-size:16px; font-weight:600; cursor:pointer; box-shadow:0 6px 16px rgba(0,0,0,.26); transition:transform .12s, box-shadow .12s, opacity .15s; }
.wx-btn:active{ transform:translateY(1px); box-shadow:0 3px 9px rgba(0,0,0,.2); }
.wx-btn:disabled{ opacity:.5; box-shadow:none; }
.wx-btn.ghost{ background:#eef0f2; color:var(--wx-blue); box-shadow:none; }
.wx-btn.ghost:active{ transform:translateY(1px); }
/* 两步进度条 */
.wx-su-progress{ display:flex; align-items:center; margin:4px 0 16px; }
.wx-su-pstep{ display:flex; align-items:center; gap:7px; }
.wx-su-pdot{ width:24px; height:24px; min-width:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; background:#e7e7ea; color:#a6a6ab; transition:.25s; }
.wx-su-plabel{ font-size:13px; color:#a6a6ab; font-weight:600; transition:.25s; }
.wx-su-pstep.on .wx-su-pdot{ background:linear-gradient(135deg,var(--wx-green),#3a3a40); color:#fff; box-shadow:0 2px 7px rgba(0,0,0,.3); }
.wx-su-pstep.on .wx-su-plabel{ color:#1a1a1c; }
.wx-su-pstep.done .wx-su-pdot{ background:var(--wx-green); color:#fff; }
.wx-su-pstep.done .wx-su-plabel{ color:var(--wx-green); }
.wx-su-pline{ flex:1; height:2px; background:#e7e7ea; margin:0 10px; border-radius:1px; }
/* 入场向导 */
.wx-su-intro{ font-size:14px; color:#444; line-height:1.7; margin:6px 0 4px; }
.wx-su-intro p{ margin:8px 0; }
.wx-su-intro ul{ margin:6px 0; padding-left:4px; list-style:none; }
.wx-su-intro li{ margin:5px 0; }
.wx-su-intro b{ color:var(--wx-green); }
/* 开局生成进度反馈（最长的等待，别让玩家以为卡死） */
.wx-su-status{ display:none; margin-top:18px; padding:15px 16px; background:#f1f8f3; border:1px solid #d7ecdd; border-radius:10px; text-align:center; animation:wxin .25s ease; }
.wx-su-status.on{ display:block; }
.wx-su-status.err{ background:#fff3f0; border-color:#ffd9cf; }
.wx-su-st-row{ font-size:15px; font-weight:600; color:#2e9e5b; display:flex; align-items:center; justify-content:center; gap:7px; }
.wx-su-status.err .wx-su-st-row{ color:#e8654f; }
.wx-su-st-note{ font-size:12.5px; color:#8a9a8e; margin-top:7px; line-height:1.6; }
.wx-su-status.err .wx-su-st-note{ color:#b0857c; }
/* 开局加载器：进度条 + 阶段步进 + 轮播文案 */
.wx-su-ld{ text-align:left; }
.wx-su-ld-head{ font-size:15px; font-weight:600; color:#1f9b53; margin-bottom:11px; line-height:1.45; }
.wx-su-ld-steps{ display:flex; align-items:center; gap:5px; font-size:11px; margin-bottom:10px; flex-wrap:wrap; }
.wx-su-step{ color:#aebdb3; }
.wx-su-step.on{ color:var(--wx-green); font-weight:600; }
.wx-su-step.done{ color:#6cbb91; }
.wx-su-step-sep{ color:#cfd8d2; }
.wx-su-ld-bar{ height:7px; border-radius:4px; background:#dcebe1; overflow:hidden; }
.wx-su-ld-bar b{ display:block; height:100%; width:4%; border-radius:4px; background:linear-gradient(90deg,#3a3a40,#8a8a90); transition:width .35s ease; }
.wx-su-ld-sub{ display:flex; align-items:center; gap:7px; font-size:13px; color:#3f8c63; margin-top:11px; }
.wx-su-ld-note{ font-size:11px; color:#9aac9f; margin-top:8px; line-height:1.6; }
.wx-su-assist{ display:flex; gap:8px; flex-wrap:wrap; margin:8px 0 4px; }
.wx-su-chip{ border:1px solid #e0e0e3; background:#fff; color:#333; border-radius:16px; padding:7px 14px; font-size:13px; cursor:pointer; font-family:inherit; transition:transform .12s, border-color .15s, background .15s; }
.wx-su-chip:active{ transform:scale(.96); }
.wx-su-chip.on{ border-color:var(--wx-green); background:rgba(0,0,0,.08); color:var(--wx-green); font-weight:600; }
.wx-su-chip.act{ border-color:#d6d2e8; color:var(--wx-blue); background:rgba(20,20,20,.05); }
.wx-su-chip:disabled{ opacity:.5; }
/* 题材图标磁贴（2 列）*/
.wx-su-gtiles{ display:grid; grid-template-columns:1fr 1fr; gap:9px; margin:4px 0 2px; }
.wx-su-gtile{ display:flex; align-items:center; gap:10px; padding:12px 13px; border:1.5px solid #ececef; background:#fff; border-radius:13px; cursor:pointer; font-family:inherit; text-align:left; transition:transform .12s, border-color .15s, box-shadow .2s, background .2s; }
.wx-su-gtile:active{ transform:scale(.97); }
.wx-su-gemo{ font-size:22px; line-height:1; }
.wx-su-gname{ font-size:14px; font-weight:600; color:#333; transition:color .2s; }
.wx-su-gtile.on{ border-color:transparent; background:linear-gradient(135deg,var(--wx-green),#3a3a40); box-shadow:0 6px 16px rgba(0,0,0,.28); }
.wx-su-gtile.on .wx-su-gname{ color:#fff; }
/* 开场场景标题行 + "帮我想一个"按钮 */
.wx-su-scenehead{ display:flex; align-items:flex-end; justify-content:space-between; }
.wx-su-scenehead label{ margin-bottom:6px; }
.wx-su-magic{ border:none; background:none; color:var(--wx-blue); font-size:12.5px; font-weight:600; cursor:pointer; font-family:inherit; padding:4px 2px; transition:opacity .15s; }
.wx-su-magic:active{ opacity:.55; }
.wx-su-magic:disabled{ opacity:.5; }
.wx-su-nav{ display:flex; gap:10px; }
.wx-su-nav .wx-btn{ flex:1; }
.wx-su-nav .wx-btn.ghost{ flex:0 0 38%; }

/* ===== 入场向导：沉浸式深色 / 电影感（仅作用于 .su-screen，其余页面仍是仿微信白底）===== */
.su-screen{ background:#0a0b0f; }
.su-screen .wx-topbar{ background:transparent; border-bottom:1px solid rgba(255,255,255,.07); color:#f1f2f5; }
.su-screen .wx-topbar .wx-reset{ color:#5fa0ff; }
.su-screen .wx-setup{ background:radial-gradient(128% 80% at 50% -14%, #1b1b1f 0%, #111114 46%, #08090a 100%); color:#e8eaed; }   /* ⭐Genie：去绿调，纯中性深色 */
.su-screen .wx-setup h3{ color:#f6f7f9; }
.su-screen .wx-setup p.tip{ color:#878d97; }
.su-screen .wx-setup label{ color:#90a6c9; }
.su-screen .wx-setup input, .su-screen .wx-setup textarea{ background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.1); color:#eef0f3; }
.su-screen .wx-setup input::placeholder, .su-screen .wx-setup textarea::placeholder{ color:#697079; }
.su-screen .wx-setup input:focus, .su-screen .wx-setup textarea:focus{ border-color:#3a3a40; box-shadow:0 0 0 3px rgba(43,212,126,.18); background:rgba(255,255,255,.06); }
/* 进度条 */
.su-screen .wx-su-pdot{ background:rgba(255,255,255,.13); color:#979da7; }
.su-screen .wx-su-plabel{ color:#979da7; }
.su-screen .wx-su-pstep.on .wx-su-plabel{ color:#f6f7f9; }
.su-screen .wx-su-pline{ background:rgba(255,255,255,.13); }
/* 题材磁贴：暗玻璃，选中绿光 */
.su-screen .wx-su-gtile{ background:rgba(255,255,255,.05); border:1.5px solid rgba(255,255,255,.09); box-shadow:0 2px 10px rgba(0,0,0,.28); }
.su-screen .wx-su-gname{ color:#dfe2e7; }
.su-screen .wx-su-gtile.on{ border-color:transparent; background:linear-gradient(135deg,var(--wx-green),#3a3a40); box-shadow:0 8px 24px rgba(0,0,0,.42); }
.su-screen .wx-su-gtile.on .wx-su-gname{ color:#fff; }
/* 按钮 / 胶囊 */
.su-screen .wx-btn{ box-shadow:0 8px 24px rgba(0,0,0,.36); }
.su-screen .wx-btn.ghost{ background:rgba(255,255,255,.08); color:#ccd2dc; box-shadow:none; }
.su-screen .wx-su-chip{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12); color:#dfe2e7; }
.su-screen .wx-su-chip.act{ background:rgba(95,160,255,.12); border-color:rgba(95,160,255,.3); color:#9cc0ff; }
.su-screen .wx-su-magic{ color:#8fb6ff; }
/* 玩法介绍（步0） */
.su-screen .wx-su-intro{ color:#c6ccd4; }
.su-screen .wx-su-intro b{ color:#3a3a40; }
/* 生成加载卡：暗玻璃 */
.su-screen .wx-su-status{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09); }
.su-screen .wx-su-status.err{ background:rgba(232,101,79,.1); border-color:rgba(232,101,79,.32); }
.su-screen .wx-su-ld-head{ color:#5fe0a0; }
.su-screen .wx-su-ld-bar{ background:rgba(255,255,255,.1); }
.su-screen .wx-su-ld-sub{ color:#7fcfa3; }
.su-screen .wx-su-ld-note{ color:#787f8a; }
.su-screen .wx-su-step{ color:#697079; }
.su-screen .wx-su-step.done{ color:#5cbb91; }
.su-screen .wx-su-st-note{ color:#979da7; }
/* 导航吸底：步1 表单长，「上一步/下一步」滚到哪都在手边（羽化渐变垫底，不挡内容） */
.su-screen .wx-su-nav{ position:sticky; bottom:0; z-index:3; margin:18px -20px -28px; padding:16px 20px calc(30px + env(safe-area-inset-bottom,0px)); background:linear-gradient(180deg, rgba(8,9,13,0) 0%, rgba(8,9,13,.94) 26%, #08090d 58%); }
/* 步骤滑动转场（前进从右滑入 / 后退从左滑入）*/
@keyframes suSlideFwd{ from{ opacity:0; transform:translateX(38px); } to{ opacity:1; transform:none; } }
@keyframes suSlideBack{ from{ opacity:0; transform:translateX(-38px); } to{ opacity:1; transform:none; } }
.su-screen .wx-setup.su-fwd{ animation:suSlideFwd .34s cubic-bezier(.22,.61,.36,1); }
.su-screen .wx-setup.su-back{ animation:suSlideBack .34s cubic-bezier(.22,.61,.36,1); }

.wx-empty{ text-align:center; color:#9a9aa0; font-family:var(--font-serif); font-size:16px; padding:52px 26px; line-height:1.65; letter-spacing:.2px; }   /* ⭐Genie：空状态衬线金句 + 留白 */
/* 好友申请「新的朋友」 */
.wx-friendreq-row .wx-row-av{ font-size:18px; color:#fff; }
.wx-req-badge{ min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--wx-red); color:#fff; font-size:12px; line-height:18px; text-align:center; }
.wx-tab-dot{ position:absolute; top:7px; margin-left:3px; width:7px; height:7px; border-radius:50%; background:var(--wx-red); }
.wx-reqs{ flex:1; overflow-y:auto; background:var(--wx-bg); padding:8px 10px 14px; }
.wx-req{ display:flex; align-items:center; gap:12px; padding:14px; background:var(--wx-card); border-radius:var(--wx-r-lg); margin-bottom:8px; box-shadow:var(--sh-sm); }
.wx-req-av{ width:44px; height:44px; border-radius:10px; flex:none; display:flex; align-items:center; justify-content:center; color:#fff; font-size:18px; background-size:cover; background-position:center; }
.wx-req-mid{ flex:1; min-width:0; }
.wx-req-name{ font-size:15px; color:#111; font-weight:600; }   /* 方案A：真名为主、略加重 */
.wx-req-verify{ font-size:12.5px; color:var(--wx-t-soft); margin-top:3px; line-height:1.4; word-break:break-word; }
.wx-req-realname{ font-size:12px; color:var(--wx-t-soft); margin-top:3px; }
.wx-req-nick{ font-size:12.5px; color:var(--wx-t-soft); margin-top:3px; line-height:1.4; }   /* 方案A：「微信名 X」副行 */
.wx-req-src{ font-size:12px; color:#a7acb5; margin-top:4px; }                        /* 方案A：「来自 X群」来源行 */
.wx-req-remark{ display:block; width:100%; box-sizing:border-box; margin-top:7px; padding:6px 9px; border:1px solid #e3e3e3; border-radius:7px; font-size:13px; background:#fafafa; color:#111; }
.wx-req-ops{ display:flex; gap:7px; flex:none; }
.wx-req-ok,.wx-req-no{ border:none; border-radius:var(--wx-r-btn); padding:7px 15px; font-size:13.5px; font-weight:500; cursor:pointer; transition:transform .1s; }
.wx-req-ok:active,.wx-req-no:active{ transform:scale(.96); }
.wx-req-ok{ background:var(--wx-green); color:#fff; }
.wx-req-no{ background:var(--wx-line-faint); color:var(--wx-t2); }
.wx-req-wait{ font-size:12.5px; color:var(--wx-t3); flex:none; }
.wx-req-sect{ font-size:12.5px; font-weight:500; color:var(--wx-t2); padding:14px 6px 6px; }
.wx-addf{ background:var(--wx-card); border-radius:var(--wx-r-card); margin-bottom:8px; padding:12px 14px; }
.wx-addf-h{ font-size:13px; color:var(--wx-blue); margin-bottom:8px; }
.wx-addf input{ width:100%; box-sizing:border-box; border:1px solid #eee; border-radius:6px; padding:8px 10px; font-size:13px; margin-bottom:7px; background:#fafafa; }
.wx-addf button{ border:none; border-radius:6px; background:var(--wx-green); color:#fff; font-size:13px; padding:7px 16px; cursor:pointer; }

/* ===== 登录 / 切换账号页（仿微信「轻触头像以切换账号」，深空渐变 + 暗玻璃卡，与入场向导同视觉语言）===== */
.wx-login{ flex:1; overflow-y:auto; background:radial-gradient(130% 74% at 50% -16%, #142a20 0%, #0b0e13 52%, #060709 100%); color:#fff; display:flex; flex-direction:column; padding:0 0 30px; }
.wx-login-bar{ height:54px; min-height:54px; display:flex; align-items:center; justify-content:space-between; padding:0 16px; }
.wx-login-sp{ min-width:30px; }
.wx-login-manage{ color:#cdd1d7; font-size:15px; cursor:pointer; min-width:30px; text-align:right; transition:color .15s; }
.wx-login-manage.on{ color:var(--wx-green); }
/* 品牌头部：app icon 式 logo + 标题 + 副题 */
.wx-login-hero{ text-align:center; padding:4px 24px 22px; }
.wx-login-appicon{ width:62px; height:62px; margin:0 auto 14px; border-radius:15px; display:flex; align-items:center; justify-content:center; font-size:29px; background:linear-gradient(145deg,#3a3a40,#141414); box-shadow:0 10px 28px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.28); }
.wx-login-hd{ text-align:center; font-size:21px; font-weight:700; color:#f2f3f5; letter-spacing:1px; }
.wx-login-hd2{ text-align:center; font-size:13px; color:#8b9099; margin-top:7px; padding:0 8px; line-height:1.5; }
.wx-acc-list{ display:flex; flex-direction:column; gap:11px; padding:0 14px; }
.wx-acc{ display:flex; align-items:center; gap:13px; background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.075); border-radius:13px; padding:13px 14px; cursor:pointer; transition:background .15s, border-color .15s, transform .12s; }
.wx-acc:active{ background:rgba(255,255,255,.095); transform:scale(.985); }
/* 当前档：绿光描边 + 「继续 ›」徽标——最高频动作一眼可见 */
.wx-acc.cur{ border-color:rgba(0,0,0,.42); background:linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.035)); box-shadow:0 6px 22px rgba(0,0,0,.12); }
.wx-acc-resume{ flex:0 0 auto; font-size:13px; font-weight:600; color:#fff; background:linear-gradient(135deg,var(--wx-green),#3a3a40); border-radius:14px; padding:6px 12px; box-shadow:0 4px 13px rgba(0,0,0,.34); }
.wx-acc-av{ width:48px; height:48px; min-width:48px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:600; color:#fff; background-size:cover; background-position:center; overflow:hidden; }
.wx-acc-av.add{ background:transparent; border:1.5px solid rgba(255,255,255,.18); color:#8a8f96; font-size:26px; font-weight:300; }
.wx-acc-mid{ flex:1; min-width:0; }
.wx-acc-name{ font-size:16.5px; color:#fff; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wx-acc-name.dim{ color:#bdc1c7; font-weight:400; }
.wx-acc-sub{ font-size:13px; color:#8b9099; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wx-acc-cur{ font-size:13px; color:var(--wx-green); flex:0 0 auto; }
.wx-acc-tag{ font-size:11px; color:#a99bd6; background:#2a2640; border:1px solid #3a3458; padding:2px 8px; border-radius:8px; flex:0 0 auto; }
.wx-acc-del{ flex:0 0 auto; background:#3a2a2a; border:none; color:#ff6b6b; width:24px; height:24px; border-radius:50%; font-size:12px; cursor:pointer; line-height:1; padding:0; }
.wx-acc-sech{ font-size:12.5px; color:#787d86; padding:15px 4px 1px; }
/* 存档卡·富信息 + 一键开局 + 备份 + 单档动作面板 */
.wx-acc-prev{ font-size:12px; color:#737880; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wx-acc-more{ flex:0 0 auto; color:#8b9099; font-size:20px; line-height:1; padding:0 4px; letter-spacing:1px; }
.wx-acc.managing{ background:rgba(255,255,255,.07); }
.wx-acc-go{ font-size:13px; color:var(--wx-green); flex:0 0 auto; }
.wx-acc-av.start{ background:rgba(255,255,255,.06); border:1.5px solid rgba(255,255,255,.13); font-size:22px; }
.wx-acc.start .wx-acc-name{ color:#fff; font-weight:500; }
.wx-login-backup{ display:flex; gap:18px; justify-content:center; flex-wrap:wrap; padding:22px 4px 6px; }
.wx-backup-btn{ font-size:12.5px; color:#8b9099; cursor:pointer; transition:color .15s; }
.wx-backup-btn:active{ color:#c4c8ce; }
/* 进场编排：整屏 wxView 让位给逐卡 stagger（hero 先现身，卡片依次浮起；原地刷新如管理模式切换不播） */
#wx-screen.wx-vtrans > .wx-login{ animation:none; }
.wx-vtrans .wx-login-hero{ animation:wxAccIn .42s cubic-bezier(.22,1,.36,1) both; }
.wx-vtrans .wx-acc-list > *{ animation:wxAccIn .38s cubic-bezier(.22,1,.36,1) both; }
.wx-vtrans .wx-acc-list > :nth-child(1){ animation-delay:.05s }
.wx-vtrans .wx-acc-list > :nth-child(2){ animation-delay:.09s }
.wx-vtrans .wx-acc-list > :nth-child(3){ animation-delay:.13s }
.wx-vtrans .wx-acc-list > :nth-child(4){ animation-delay:.17s }
.wx-vtrans .wx-acc-list > :nth-child(5){ animation-delay:.21s }
.wx-vtrans .wx-acc-list > :nth-child(6){ animation-delay:.25s }
.wx-vtrans .wx-acc-list > :nth-child(7){ animation-delay:.29s }
.wx-vtrans .wx-acc-list > :nth-child(8){ animation-delay:.33s }
.wx-vtrans .wx-acc-list > :nth-child(n+9){ animation-delay:.37s }
@keyframes wxAccIn{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
.wx-sheet-acts{ display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.wx-sheet-act{ width:100%; text-align:center; background:#fff; border:1px solid #e6e6e6; border-radius:11px; padding:13px; font-size:15px; color:#333; cursor:pointer; font-family:inherit; }
.wx-sheet-act:active{ background:var(--wx-bg); }
.wx-sheet-act.primary{ background:var(--wx-green); border-color:var(--wx-green); color:#fff; font-weight:600; }
.wx-sheet-act.danger{ color:var(--wx-red); }
.wx-sheet-rename{ display:flex; gap:8px; margin-top:10px; }
.wx-sheet-rename input{ flex:1; border:1px solid #ddd; border-radius:9px; padding:11px 12px; font-size:15px; font-family:inherit; }
.wx-sheet-rename button{ flex:0 0 auto; border:none; background:var(--wx-green); color:#fff; border-radius:9px; padding:0 18px; font-size:15px; cursor:pointer; }

/* 连发气泡（同一组多条 wx-l）的间距：收紧成一串"快速连发"，别像几条隔很远的独立消息 */
#wx-app .wx{ gap:4px; }

/* ===== 逐条弹出：正在输入指示 + 三点动画 ===== */
.wx-typing{ text-align:center; color:var(--wx-t-soft); font-size:13px; padding:8px 8px 4px; }
.wx-typing-who{ color:#6a6a6a; }
.wx-typing-scene{ color:#8a7fb0; font-style:italic; }
/* 「对方正在输入」浮在标题栏正下方（绝对定位、不挤压消息区，:empty 时自动隐藏） */
.wx-typing-top{ position:absolute; top:54px; left:0; right:0; z-index:6; padding:6px 14px; font-size:12.5px; color:#8a8a8a; background:var(--wx-bg); border-bottom:1px solid #e2e2e2; display:flex; align-items:center; box-shadow:0 3px 7px rgba(0,0,0,.045); }
.wx-typing-top:empty{ display:none; }
/* 回复失败红点（2026-07-21 原型）：状态附着在最后一条我方消息，36px 触区内只露 20px 圆点。 */
.wx-reply-fail-anchor{ position:relative; }
.wx-reply-fail-badge{ position:relative; flex:0 0 20px; width:20px; height:20px; align-self:center; display:flex; align-items:center; justify-content:center; padding:0; border:0; border-radius:50%; background:var(--wx-red); color:#fff; cursor:pointer; box-shadow:0 1px 3px rgba(250,81,81,.35); }
.wx-reply-fail-badge::before{ content:''; position:absolute; inset:-8px; border-radius:50%; }
.wx-reply-fail-badge > span{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; color:#fff; font-family:var(--font-sans,inherit); font-size:12px; font-weight:700; line-height:1; }
.wx-reply-fail-badge.wx-reply-fail-model{ background:var(--wx-t2); box-shadow:0 1px 3px rgba(120,120,130,.35); }
.wx-reply-fail-badge.wx-reply-fail-model svg{ width:12px; height:12px; display:block; }
.wx-reply-fail-badge.busy{ cursor:default; }
.wx-reply-fail-badge.busy{ background:#c7c7cc; box-shadow:none; }
.wx-reply-fail-badge.busy > span{ width:18px; height:18px; box-sizing:border-box; border:2px solid rgba(255,255,255,.42); border-top-color:#fff; border-radius:50%; animation:wxRfSpin .72s linear infinite; }
.wx-reply-fail-caption{ display:flex; flex-direction:column; align-items:center; width:auto; max-width:86%; margin:5px auto 6px; padding:0 4px; border:0; background:transparent; color:#929299; font-family:var(--font-sans,inherit); font-size:11px; line-height:1.55; text-align:center; cursor:pointer; }
.wx-reply-fail-title{ color:#68686f; }
.wx-reply-fail-sub{ margin-top:1px; color:#73737a; }
.wx-reply-fail-detail{ display:none; width:100%; margin-top:5px; color:#73737a; font-size:10px; line-height:1.45; overflow-wrap:anywhere; }
.wx-reply-fail-caption.open .wx-reply-fail-detail{ display:block; }
.wx-scene-mine > .wx-reply-fail-badge,.wx-tfx > .wx-reply-fail-badge{ position:absolute; left:-10px; top:8px; }
.wx-scene-mine + .wx-reply-fail-caption{ width:88%; margin:-2px auto 10px; }
.wx-reply-fail-out{ opacity:0!important; transform:scale(.92); transition:opacity .18s,transform .18s; pointer-events:none; }
.wx-reply-fail-badge:focus-visible,.wx-gen-fail:focus-visible,.wx-vd-fail:focus-visible{ outline:2px solid rgba(20,20,20,.36); outline-offset:2px; }
.wx-img .wx-gen-fail:focus-visible{ outline-color:rgba(255,255,255,.86); outline-offset:-4px; }
@keyframes wxRfSpin{ to{ transform:rotate(360deg); } }
/* ———— 电量 C1「没电了」系统条（落地方案-37 批2）：IM 原生灰药丸语感，不用报错红 ———— */
.wx-fail{ display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; margin:10px auto; max-width:86%; font-size:12.5px; }
.wx-fail.wx-nopow{ flex-direction:column; gap:8px; background:transparent; border:none; padding:2px 0; }
.wx-np-pill{ font-size:11.5px; color:var(--wx-t2); background:rgba(0,0,0,.045); border-radius:999px; padding:5px 13px; text-align:center; line-height:1.5; }
.wx-np-btn{ border:none; font-family:inherit; font-size:12px; font-weight:600; color:#fff; background:var(--wx-accent); border-radius:999px; padding:6px 16px; cursor:pointer; }
.wx-np-btn:active{ opacity:.85; }
.wx-dots{ display:inline-flex; gap:3px; margin-left:5px; vertical-align:middle; color:inherit; }
.wx-dots i{ width:4px; height:4px; border-radius:50%; background:currentColor; opacity:.3; animation:wxdot 1s infinite; }
.wx-dots i:nth-child(2){ animation-delay:.15s; }
.wx-dots i:nth-child(3){ animation-delay:.3s; }
@keyframes wxdot{ 0%,60%,100%{ opacity:.25; transform:translateY(0); } 30%{ opacity:.9; transform:translateY(-2px); } }
@media(prefers-reduced-motion:reduce){ .wx-reply-fail-badge.busy > span,.wx-gen-fail.retrying .wx-gen-fail-dot{ animation:none; } .wx-reply-fail-out{ transition:none; } }
/* ⭐Genie 点簇 加载/AI 指示器（思考/正在输入/加载）：box-shadow 一次画 8 点环 + 中心点；旋转+呼吸 */
.genie-dots{ position:relative; display:inline-block; width:1em; height:1em; font-size:17px; color:currentColor; vertical-align:middle; animation:genieDotsSpin 7s linear infinite; }
.genie-dots--sm{ font-size:14px; }
.genie-dots::after{ content:""; position:absolute; top:50%; left:50%; width:.14em; height:.14em; margin:-.07em 0 0 -.07em; border-radius:50%; background:currentColor;
  box-shadow:0 -.3em currentColor,.21em -.21em currentColor,.3em 0 currentColor,.21em .21em currentColor,0 .3em currentColor,-.21em .21em currentColor,-.3em 0 currentColor,-.21em -.21em currentColor;
  animation:genieDotsBreathe 1.6s var(--ease) infinite; }
.genie-dots::before{ content:""; position:absolute; top:50%; left:50%; width:.16em; height:.16em; margin:-.08em 0 0 -.08em; border-radius:50%; background:currentColor; animation:genieDotsBreathe 1.6s var(--ease) infinite .3s; }
@keyframes genieDotsSpin{ to{ transform:rotate(360deg); } }
@keyframes genieDotsBreathe{ 0%,100%{ opacity:.5; transform:scale(.9); } 50%{ opacity:1; transform:scale(1.08); } }

/* 新冒出的条目弹入（#2：对方从左、我方从右，带轻微缩放回弹，更像真微信冒泡）*/
#wx-app .wx-msgs > .wx{ animation:wxinL .3s cubic-bezier(.22,1.18,.36,1) both; transform-origin:left bottom; }
/* 揭示态·连发续接：同一轮后续气泡被塞进同一个 .wx(复刻定稿结构、当场吃到 4px 紧凑 gap)，但 .wx 整块入场动画只命中其直接子 → 给内部新冒出的气泡单独补一份逐条冒泡 */
#wx-app .wx-msgs .wx > .wx-revealing{ animation:wxinL .3s cubic-bezier(.22,1.18,.36,1) both; transform-origin:left bottom; }
#wx-app .wx-msgs > .wxm-u{ animation:wxinR .3s cubic-bezier(.22,1.18,.36,1) both; transform-origin:right bottom; }
#wx-app .wx-msgs > .wxm-act{ animation:wxin .3s ease both; }
@keyframes wxin{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
@keyframes wxinL{ from{ opacity:0; transform:translate(-9px,7px) scale(.96); } to{ opacity:1; transform:none; } }
@keyframes wxinR{ from{ opacity:0; transform:translate(9px,7px) scale(.96); } to{ opacity:1; transform:none; } }

/* ===== 画面 / 场景叙述（Genie 02g 脱离气泡 → 2026-07-11 用户拍板 A「书页」版：淡纸底细边卡，一页剧本嵌进对话；
   页眉两侧渐隐细线用双 background-image 画（文字仍是 ::before，「◇ 场景/身边」都是符号+2字、定宽 → 线可用 calc 定位）===== */
#wx-app .wx-scene{
    position:relative; align-self:center; width:96%; margin:16px auto 8px; padding:15px 18px 13px;
    background-color:#fafafc; border:1px solid rgba(0,0,0,.055); border-radius:16px; box-shadow:0 1px 0 rgba(0,0,0,.02);
    background-image:linear-gradient(90deg,transparent,#d9d9de),linear-gradient(90deg,#d9d9de,transparent);
    background-repeat:no-repeat; background-size:26px 1px,26px 1px;
    background-position:calc(50% - 60px) 21px, calc(50% + 60px) 21px;
    color:#3a3a40; font-family:var(--font-serif); font-style:normal;
    font-size:16px; line-height:1.78; letter-spacing:.1px; white-space:pre-wrap; word-break:break-word; text-align:left; text-wrap:pretty;
}
#wx-app .wx-scene::before{
    content:"\25c7  \573a\666f"; display:block; text-align:center; font-family:var(--font-sans,inherit); font-style:normal;
    font-size:10px; font-weight:600; letter-spacing:3px; color:#a2a2a8; margin-bottom:10px;
}
/* E1 长画面截断：旁白超 3 行收起 + 底部渐隐 + 居中「⌄ 展开」（展开态按 data-gid 记住）*/
#wx-app .wx-scene-tx{ display:block; }
#wx-app .wx-scene-trunc .wx-scene-tx{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
    -webkit-mask-image:linear-gradient(180deg,#000 58%,transparent); mask-image:linear-gradient(180deg,#000 58%,transparent); }
#wx-app .wx-scene-more{ margin-top:8px; text-align:center; font-size:12px; color:#9a9aa0; cursor:pointer; font-style:normal; letter-spacing:1px; }
/* 召唤画面虚线槽（02h）：旁白下挂——点簇 +「把这一刻画出来?」+ 生成画面（点整块即生图） */
/* P0 动作贴（动作与场景分层 2026-07-11 拍板）：玩家短动作=右侧衬线小灰字，不再起 ◇ 场景大块；与场景块同族(衬线=叙事)不同级(小、轻、无框) */
#wx-app .wxm-u.wxm-u-act{ margin:10px 0 0; }
#wx-app .wx-act-mine{ font-family:var(--font-serif); font-style:normal; font-size:13px; line-height:1.6; color:#8d8d95; letter-spacing:.2px; text-align:right; max-width:78%; word-break:break-word; text-wrap:pretty; }

/* 生图动线三态（2026-07-11 用户拍板）：句末小标(态〇·安静) → 点开一行胶囊(态一) → 再点胶囊才生成(态二)；「点整块即生图」退役。
   小标对齐：inline-flex 圆钮在 16px/1.78 衬线行内用 middle 基准 + 微调，白实底防「半截」观感；动画只有 180ms 高度/透明滑入，无光效。 */
#wx-app .wx-scene-dot{ display:inline-flex; align-items:center; justify-content:center; width:17px; height:17px; margin-left:7px; border-radius:50%; border:1px solid rgba(0,0,0,.18); background:#fff; color:#8f8f96; font-size:9px; font-style:normal; font-family:var(--font-sans); line-height:1; vertical-align:middle; transform:translateY(-1px); cursor:pointer; user-select:none; -webkit-user-select:none; }
#wx-app .wx-scene-dot.on{ border-color:#141414; background:#141414; color:#fff; }
#wx-app .wx-summon{ display:flex; justify-content:center; height:0; opacity:0; margin-top:0; overflow:hidden; transition:height .18s ease, opacity .18s ease, margin-top .18s ease; }
#wx-app .wx-summon.on{ height:30px; margin-top:10px; opacity:1; }
#wx-app .wx-summon-btn{ display:inline-flex; align-items:center; gap:5px; padding:5px 14px; border-radius:999px; border:1px dashed rgba(0,0,0,.20); background:rgba(120,120,130,.04); color:#76767d; font-family:var(--font-sans,inherit); font-style:normal; font-size:12px; font-weight:500; line-height:1.4; cursor:pointer; }
#wx-app .wx-summon-btn:active{ border-color:rgba(0,0,0,.4); color:#3a3a40; }
/* 画面里的「生成中」在浅底上要用深色（旧白色是给深色面板的） */
#wx-app .wx-scene .wx-gen-stage{ color:#76767d; }
#wx-app .wx-scene .wx-gen-dots i{ background:#76767d; }
/* 已生成画面下方·原位操作行（02i：重新生成 / 保存） */
#wx-app .wx-gen-acts{ display:flex; align-items:center; gap:8px; margin:11px auto 2px; max-width:280px; }
#wx-app .wx-vwrap .wx-gen-acts{ max-width:none; width:100%; margin:9px 0 0; }   /* 行收进 wrap：宽度=图宽，两端与图边缘对齐（2026-07-18 修整） */
#wx-app .wx-gen-act{ display:inline-flex; align-items:center; justify-content:center; gap:6px; flex:1 1 0; min-width:0; height:38px; padding:0 4px; border:none; border-radius:999px; background:rgba(120,120,130,.12); color:#33333a; font-family:var(--font-sans,inherit); font-style:normal; font-size:12.5px; font-weight:600; cursor:pointer; transition:transform .12s; white-space:nowrap; }
/* （2026-07-18 修整）保存钮不再紧凑特例——行内按钮一律 flex 等宽；成片态由上方 2×2 覆盖，width 仍不钉死（07-02 教训） */
#wx-app .wx-gen-act:active{ transform:scale(.95); }
#wx-app .wx-gen-act:disabled{ opacity:.48; cursor:default; transform:none; }
#wx-app .wx-gen-acts-compact .wx-vd-main{ flex:1 1 auto; background:#141414; color:#fff; }
#wx-app .wx-gen-more{ flex:0 0 38px; width:38px; height:38px; padding:0 0 4px; border:1px solid rgba(20,20,30,.08); border-radius:50%; background:rgba(120,120,130,.10); color:#3a3a40; font-family:inherit; font-size:14px; font-weight:700; letter-spacing:1px; line-height:1; cursor:pointer; }
#wx-app .wx-gen-more:active{ transform:scale(.94); }

/* 用户自己的动作块（居中，偏"我方"绿）*/
.wxm-act{
    position:relative; width:94%; margin:12px auto 6px; padding:15px 16px 12px; border-radius:13px;
    background:linear-gradient(165deg,#2a2a30,#202024); color:#e8e8ea; border:1px solid rgba(255,255,255,.12);   /* ⭐Genie 收尾：导演指令卡 深靛+浅丁香→中性深灰 */
    box-shadow:0 5px 18px rgba(0,0,0,.22); font-family:Georgia,"Songti SC",serif; font-style:italic;
    font-size:14px; line-height:1.8; white-space:pre-wrap; word-break:break-word;
}
.wxm-act-tag{
    position:absolute; top:-10px; left:14px; background:var(--wx-green); color:#fff; font-style:normal;
    font-size:11px; font-weight:600; padding:2px 9px; border-radius:9px; box-shadow:0 2px 7px rgba(0,0,0,.45);
}
.wxm-act-b{ margin-top:2px; }

/* ===== 搜索栏（微信 tab）：实时过滤聊天列表 ===== */
.wx-searchwrap{ background:var(--wx-bg); padding:0 16px 8px; flex:0 0 auto; }
.wx-searchwrap.open{ animation:wxin .18s ease both; }
.wx-searchbar{ height:38px; background:rgba(120,120,130,.1); border-radius:999px; display:flex; align-items:center; gap:8px; padding:0 14px; }   /* ⭐Genie：搜索胶囊化、去白底方框 */
.wx-search-mag{ width:17px; height:17px; color:var(--wx-t3); flex:0 0 auto; display:flex; }
.wx-search-mag svg{ width:17px; height:17px; }
.wx-search-in{ flex:1; min-width:0; border:none; background:transparent; outline:none; font-size:15px; color:var(--wx-t1); font-family:inherit; text-align:left; padding:0; }
.wx-search-in::placeholder{ color:var(--wx-t3); opacity:1; }
.wx-search-x{ color:var(--wx-t3); font-size:13px; cursor:pointer; padding:0 2px; flex:0 0 auto; }
/* ⭐Genie frame01：会话列表头 = 衬线标题左 + 🔍/＋ 图标右（去常驻搜索栏、去居中标题） */
.wx-topbar-chat{ justify-content:space-between; padding:0 18px; border-bottom:none; height:58px; min-height:58px; }
.wx-tb-left{ display:flex; align-items:baseline; gap:9px; min-width:0; }
.wx-tb-title{ font-family:var(--font-serif); font-size:27px; font-weight:400; color:var(--wx-t1); letter-spacing:-.3px; }
.wx-tb-acts{ display:flex; align-items:center; gap:17px; flex:0 0 auto; }
.wx-tb-ic{ width:24px; height:24px; color:var(--wx-t1); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.wx-tb-ic svg{ width:21px; height:21px; }
.wx-tb-ic.on{ color:var(--wx-green); }
/* ⭐Genie frame02：单聊浮动胶囊头（‹ + 圆头像 + 名 + ⋯）替代全宽 topbar */
.wx-chat-cap-wrap{ flex:0 0 auto; display:flex; justify-content:center; padding:8px 12px 12px; background:var(--wx-bg); }
.wx-chat-cap{ display:inline-flex; align-items:center; gap:10px; max-width:100%; background:#fff; border-radius:999px; padding:7px 16px 7px 10px; box-shadow:0 8px 24px rgba(20,20,30,.1); }
.wx-chat-cap .wx-back{ position:static; left:auto; font-size:22px; line-height:1; color:#56565d; cursor:pointer; padding:0 2px; }
.wx-chat-cap-person{ display:flex; align-items:center; gap:9px; cursor:pointer; min-width:0; }
.wx-chat-cap-av{ width:30px; height:30px; min-width:30px; border-radius:50%; background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center; color:#fff; font-size:14px; font-weight:600; overflow:hidden; }
.wx-chat-cap-nm{ font-size:15px; font-weight:500; color:#161618; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wx-chat-cap .wx-chat-actions{ position:static; right:auto; top:auto; height:auto; gap:0; }
.wx-chat-cap .wx-dots-btn{ color:#9a9aa0; font-size:20px; padding:0 0 0 2px; }
#wx-chat-menu{ top:62px; right:auto; left:50%; transform:translateX(-20px); }
#wx-chat-menu::before{ display:none; }
/* 线下见面 · 胶囊内状态缝：返回 / 人物状态 / 常显道别 / 更多。地点先缩，关键出口永不被长名字挤掉。 */
#wx-app.wx-meeting .wx-chat-cap-wrap{ padding:8px 10px 10px; }
#wx-app.wx-meeting .wx-chat-cap--meet{ width:min(100%,370px); min-height:52px; padding:4px 6px 4px 8px; gap:4px; }
#wx-app.wx-meeting .wx-chat-cap--meet .wx-back{ width:44px; height:44px; padding:0; border:0; background:transparent; font-family:inherit; font-size:22px; line-height:1; display:flex; align-items:center; justify-content:center; flex:0 0 44px; }
#wx-app.wx-meeting .wx-chat-cap-person{ flex:1 1 auto; min-width:0; overflow:hidden; gap:8px; }
#wx-app.wx-meeting button.wx-chat-cap-person{ min-height:44px; border:0; background:transparent; padding:0; color:inherit; font:inherit; text-align:left; }
#wx-app.wx-meeting .wx-chat-cap-av{ width:34px; height:34px; min-width:34px; }
#wx-app.wx-meeting .wx-chat-actions{ flex:0 0 auto; }
#wx-app.wx-meeting .wx-dots-btn{ width:44px; height:44px; padding:0; border:0; background:transparent; font-family:inherit; font-size:20px; line-height:1; display:flex; align-items:center; justify-content:center; flex:0 0 44px; }
#wx-app.wx-meeting #wx-chat-menu{ left:auto; right:14px; transform:none; top:66px; }   /* 旧 left:50% 会被 show 动画抹 transform，小屏菜单向右裁掉 */
.wx-meet-farewell{ flex:0 0 48px; width:48px; height:44px; border:1px solid rgba(139,112,70,.09); border-radius:999px; background:#f1eadf; color:#6d5b40; font:600 12px/1 var(--font-sans); letter-spacing:.2px; white-space:nowrap; cursor:pointer; transition:transform .16s var(--ease),background-color .16s var(--ease),opacity .16s; }
.wx-meet-farewell:hover{ background:#e9decd; }
.wx-meet-farewell:active{ transform:scale(.96); }
.wx-meet-farewell:disabled{ color:#9c8f7d; opacity:.72; cursor:default; transform:none; }
.wx-meet-farewell:focus-visible,#wx-app.wx-meeting .wx-chat-cap-person:focus-visible,#wx-app.wx-meeting .wx-dots-btn:focus-visible,#wx-app.wx-meeting .wx-back:focus-visible{ outline:2px solid #9b7c4d; outline-offset:2px; }
@media(max-width:350px){
  #wx-app.wx-meeting .wx-chat-cap-wrap{ padding-left:6px; padding-right:6px; }
  #wx-app.wx-meeting .wx-chat-cap--meet{ gap:2px; padding-left:3px; padding-right:3px; }
  #wx-app.wx-meeting .wx-chat-cap-av{ width:32px; height:32px; min-width:32px; }
  .wx-meet-farewell{ width:48px; flex-basis:48px; }
}

/* ===== 底部 TabBar（微信/通讯录/发现/我）+ home 指示条 ===== */
.wx-tabbar{ flex:0 0 auto; background:rgba(244,244,246,.9); display:flex; padding-top:6px; position:relative; }   /* ⭐Genie：tab 栏融入画布、去硬白底 */
.wx-tabbar::before{ content:""; position:absolute; top:0; left:0; right:0; height:.5px; background:rgba(0,0,0,.05); }
.wx-tabbar-tab{ flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; color:#b6b6bc; cursor:pointer; height:52px; user-select:none; }   /* ⭐Genie：未选 tab 用更淡的灰、收敛 */
.wx-tabbar-tab.active{ color:var(--wx-green); }
.wx-tabbar-tab.active .wx-tabbar-lb{ font-weight:600; }
.wx-tabbar-ic{ width:24px; height:24px; position:relative; }
.wx-tabbar-ic svg{ width:100%; height:100%; display:block; }
.wx-tabbar-lb{ font-size:10px; line-height:1; }
.wx-tabbar-badge{ position:absolute; top:-4px; left:17px; min-width:16px; height:16px; padding:0 4px; border-radius:8px; background:var(--wx-red); color:#fff; font-size:11px; line-height:16px; text-align:center; font-weight:400; }
.wx-tabbar-dot{ position:absolute; top:-1px; right:2px; width:8px; height:8px; border-radius:50%; background:var(--wx-red); }
/* 旧的页内装饰 .wx-homebar 已升级为全局可点的 #wx-homebar-g（chrome 层，规则见文件尾「A0 手机壳」段） */

/* 「发现」中间菜单页 CSS（.wx-discover/.wx-dz-*）已随该页删除一并移除——Discover tab 直接进 feed（FRAME13），样式见 .wx-discover-feed */

/* ===== 输入栏 💡 建议回复按钮 ===== */

/* ===== 主页「＋」→ 推进剧情·导演（底部滑出面板，取代常驻导演栏）===== */
.wx-list-plus{ position:absolute; right:14px; font-size:25px; line-height:1; color:#111; cursor:pointer; padding:2px 6px; user-select:none; }
.wx-dir-mask{ position:absolute; inset:0; z-index:90; background:rgba(0,0,0,.4); display:flex; align-items:flex-end; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .22s, visibility 0s linear .22s; }
.wx-dir-mask.show{ opacity:1; visibility:visible; pointer-events:auto; transition:opacity .22s; }
.wx-dir-panel{ width:100%; background:#f7f7f7; border-radius:16px 16px 0 0; padding:15px 15px calc(15px + env(safe-area-inset-bottom)); transform:translateY(100%); transition:transform .28s cubic-bezier(.2,1,.3,1); box-shadow:0 -6px 24px rgba(0,0,0,.18); }
.wx-dir-mask.show .wx-dir-panel{ transform:none; }
.wx-dir-head{ display:flex; align-items:center; justify-content:space-between; font-size:16px; font-weight:600; color:#222; }
.wx-dir-close{ font-size:17px; color:#999; cursor:pointer; padding:2px 6px; }
.wx-dir-hint{ font-size:12px; color:var(--wx-t-soft); line-height:1.55; margin:5px 0 11px; }
.wx-dir-quick{ display:flex; gap:6px; margin-bottom:9px; flex-wrap:wrap; }
.wx-dir-q{ background:#fff; border:1px solid #e2e2e2; border-radius:14px; padding:5px 12px; font-size:12.5px; color:var(--wx-blue); cursor:pointer; }
.wx-dir-q:active{ background:var(--wx-bg); }
.wx-dir-row{ display:flex; gap:8px; align-items:flex-end; }
#wx-dir-input{ flex:1; border:1px solid #e3c98a; background:#fffdf5; border-radius:6px; padding:8px 10px; font-size:14px; resize:none; max-height:80px; font-family:inherit; line-height:1.4; outline:none; }
#wx-dir-go{ background:#141414; color:#fff; border:none; border-radius:6px; padding:0 16px; height:38px; cursor:pointer; font-size:14px; flex:0 0 auto; }
#wx-dir-go:disabled{ opacity:.5; cursor:default; }

/* ===== 启动按钮上的总未读红点 ===== */
.wx-launch-badge{ position:absolute; top:-3px; right:-3px; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--wx-red); color:#fff; font-size:11px; font-weight:600; display:flex; align-items:center; justify-content:center; border:2px solid #fff; box-sizing:border-box; }
/* 未读红点：只显示点、不带数字（覆盖上面各 badge 的尺寸；放在最后保证源序胜出） */
.wx-badge-dot{ min-width:0; width:9px; height:9px; padding:0; border-radius:50%; font-size:0; }

/* ===== 会话顶栏右侧操作组（⋯ 菜单 / 管理）===== */
.wx-chat-actions{ position:absolute; right:12px; top:0; height:54px; display:flex; align-items:center; gap:15px; }
.wx-chat-actions .wx-info{ position:static; right:auto; }
.wx-manage{ font-size:13px; cursor:pointer; color:var(--wx-blue); }
.wx-manage.on{ color:var(--wx-red); font-weight:600; }
/* ⋯ 更多按钮 + 仿微信深色下拉菜单 */
.wx-dots-btn{ font-size:23px; line-height:1; cursor:pointer; color:#111; padding:2px 4px; user-select:none; }
/* ⭐Genie 02c：白色弹出菜单(图标+文字)，小箭头指向 ⋯，圆角软投影；scrim 压暗聊天、头部胶囊保持高亮 */
.wx-menu-scrim{ position:absolute; inset:0; z-index:18; background:rgba(20,20,26,.16); -webkit-backdrop-filter:blur(1.5px); backdrop-filter:blur(1.5px); display:none; }
.wx-menu-scrim.show{ display:block; }
.wx-chat-cap-wrap{ position:relative; z-index:25; }
.wx-menu{ position:absolute; right:24px; top:62px; z-index:80; background:#fff; color:#1c1c20; border-radius:20px; padding:7px; min-width:204px; box-shadow:0 22px 54px rgba(20,20,30,.24); display:none; }
.wx-menu.show{ display:block; animation:wxin .14s ease both; }
.wx-menu::before{ content:''; position:absolute; right:24px; top:-7px; width:14px; height:14px; background:#fff; transform:rotate(45deg); box-shadow:-3px -3px 8px rgba(20,20,30,.05); }
.wx-menu-item{ position:relative; z-index:1; display:flex; align-items:center; gap:13px; padding:12px 14px; border-radius:14px; font-size:14.5px; font-weight:500; color:#1c1c20; cursor:pointer; white-space:nowrap; }
.wx-menu-item:not(:last-child)::after{ content:''; position:absolute; left:14px; right:14px; bottom:0; height:1px; background:rgba(0,0,0,.06); }
.wx-menu-item:active{ background:rgba(120,120,130,.08); }
.wx-mi-ic{ display:flex; flex:0 0 auto; }
.wx-mi-ic svg{ width:20px; height:20px; display:block; }
/* 多选删除模式（2026-07-10 重做，旧🗑逐条按钮/粉色提示条退役）：每条消息套勾选行，整行点击切换；选中＝中性黑圈白勾+浅灰抬起（Genie：强调靠留白与抬起，不靠色） */
.wx-selrow{ display:flex; align-items:flex-start; gap:10px; padding:3px 6px 3px 10px; border-radius:var(--wx-r-md); cursor:pointer; transition:background var(--dur-fast) var(--ease); }
.wx-selrow.on{ background:var(--wx-press); }
.wx-selrow-in{ flex:1; min-width:0; pointer-events:none; }   /* 行内消息不再各自响应点击（看图/跳资料/收款全让位），整行只做勾选 */
.wx-selc{ flex:0 0 auto; width:21px; height:21px; margin-top:13px; border-radius:50%; border:1.5px solid var(--wx-t3); color:transparent; display:flex; align-items:center; justify-content:center; background:var(--wx-card); transition:background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.wx-selrow.on .wx-selc{ background:var(--wx-accent); border-color:var(--wx-accent); color:#fff; }
.wx-selc svg{ width:12px; height:12px; display:block; }
/* 底部批量操作栏（多选模式替换输入栏）：全选靠左、删除胶囊靠右（危险语义红，未选中时哑灰禁用） */
.wx-selbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--wx-card); border-top:1px solid var(--wx-line); padding:10px 16px 12px; }
.wx-selbar-all{ border:none; background:none; font-size:14.5px; font-weight:500; color:var(--wx-t1); padding:8px 6px; cursor:pointer; font-family:inherit; }
.wx-selbar-all:active{ opacity:.6; }
.wx-selbar-del{ border:none; border-radius:var(--wx-r-btn); background:var(--wx-red); color:#fff; font-size:14.5px; font-weight:600; padding:9px 24px; cursor:pointer; font-family:inherit; transition:background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.wx-selbar-del:active{ transform:scale(.96); }
.wx-selbar-del:disabled{ background:var(--wx-press); color:var(--wx-t3); cursor:default; transform:none; }
/* 确认卡（底部滑出，替代原生 confirm）：删除等危险动作的游戏内确认——标题+说明+按钮列+取消 */
.wx-cfm-mask{ position:absolute; inset:0; z-index:110; background:rgba(20,20,26,.32); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); display:flex; align-items:flex-end; opacity:0; transition:opacity var(--dur) var(--ease); }
.wx-cfm-mask.show{ opacity:1; }
.wx-cfm{ width:100%; background:var(--wx-bg); border-radius:22px 22px 0 0; padding:20px 14px calc(14px + env(safe-area-inset-bottom,0px)); transform:translateY(28px); transition:transform var(--dur) var(--ease); }
.wx-cfm-mask.show .wx-cfm{ transform:none; }
.wx-cfm-t{ font-size:15.5px; font-weight:700; color:var(--wx-t1); text-align:center; }
.wx-cfm-d{ font-size:13px; color:var(--wx-t2); text-align:center; line-height:1.55; margin:7px 6px 0; white-space:pre-line; }
.wx-cfm-acts{ display:flex; flex-direction:column; gap:8px; margin-top:16px; }
.wx-cfm-btn{ width:100%; border:none; background:var(--wx-card); border-radius:13px; padding:13px; font-size:15px; font-weight:500; color:var(--wx-t1); cursor:pointer; font-family:inherit; transition:background var(--dur-fast) var(--ease); }
.wx-cfm-btn:active{ background:var(--wx-press); }
.wx-cfm-btn.danger{ color:var(--wx-red); font-weight:600; }
.wx-cfm-btn.cancel{ background:none; color:var(--wx-t2); font-weight:500; margin-top:2px; }
.wx-cfm.split .wx-cfm-acts{ flex-direction:row; gap:10px; }
.wx-cfm.split .wx-cfm-btn{ flex:1 1 0; border-radius:999px; }
.wx-cfm.split .wx-cfm-btn.cancel{ margin:0; background:rgba(120,120,130,.10); }
.wx-cfm-btn.primary{ background:#141414; color:#fff; font-weight:650; }
.wx-cfm-btn.primary:active{ background:#000; }
.wx-cfm-btn.solid-danger{ background:var(--wx-red); color:#fff; font-weight:650; }
.wx-cfm-btn.solid-danger:active{ background:#dc3f3f; }
.wx-cfm-btn:disabled{ opacity:.45; cursor:default; }
.wx-cfm-mask.menu .wx-cfm-t,.wx-cfm-mask.menu .wx-cfm-d{ text-align:left; margin-left:6px; margin-right:6px; }
.wx-cfm-mask.menu .wx-cfm-acts{ gap:6px; }
.wx-cfm-mask.menu .wx-cfm-btn:not(.cancel){ display:grid; grid-template-columns:24px 1fr auto; align-items:center; gap:10px; text-align:left; }
.wx-cfm-ic{ display:flex; align-items:center; justify-content:center; color:var(--wx-t2); }
.wx-cfm-ic svg{ width:20px; height:20px; display:block; }
.wx-cfm-btn small{ color:var(--wx-t3); font-size:11.5px; font-weight:500; }
.wx-cfm-btn:focus-visible{ outline:2px solid rgba(20,20,20,.35); outline-offset:2px; }
@media(prefers-reduced-motion:reduce){ .wx-cfm-mask,.wx-cfm{ transition:none; } }

/* ===== 好感/状态：聊天顶栏数值条 ===== */
.wx-info{ position:absolute; right:14px; font-size:13px; cursor:pointer; color:var(--wx-blue); }
.wx-statbar{ display:flex; align-items:center; gap:12px; padding:6px 14px; background:#f3f3f3; border-bottom:.5px solid var(--wx-line-strong); cursor:pointer; min-height:32px; flex-wrap:wrap; }
.wx-stat{ display:flex; align-items:center; gap:4px; font-size:11px; color:var(--wx-t2); }
.wx-stat i{ font-style:normal; font-size:12px; }
.wx-stat-track{ width:42px; height:5px; border-radius:3px; background:#dcdcdc; overflow:hidden; }
.wx-stat-track b{ display:block; height:100%; border-radius:3px; transition:width .5s ease; }
.wx-stat em{ font-style:normal; color:#555; min-width:14px; }
.wx-stage{ margin-left:auto; font-size:11px; color:#fff; background:var(--wx-accent); padding:1px 8px; border-radius:8px; }

/* 会话内：状态变化飘字 */
.wx-fx{ align-self:center; text-align:center; margin:6px auto; font-size:12px; color:#c2799a; background:rgba(250,81,129,.08); border:1px solid rgba(250,81,129,.18); border-radius:11px; padding:3px 12px; width:fit-content; max-width:88%; animation:wxin .3s ease both; }

/* ===== 朋友圈 ===== */
/* 封面头/刷新条已随聊天驱动改版移除（FRAME13 无封面）；发圈入口＝Discover 顶栏相机 → 全屏发布页（方案A「这一刻」，样式见 .wx-mcp-* 段）。feed 样式见 .wx-discover-feed */
/* 旧发布 sheet（.wx-mo-compose 弹层/.wx-mo-ta/#wx-mo-input/#wx-mo-send）已随方案A全屏发布页退役（2026-07-05）——
   id 选择器会盖掉新页面 .wx-mcp-ta/.wx-mcp-send 的类样式（特异性碾压），故整段删除；新样式见「发布页（方案A）」段。 */
.wx-mo{ display:flex; gap:10px; padding:14px; border-bottom:.5px solid var(--wx-line); }
.wx-mo-av{ width:40px; height:40px; min-width:40px; border-radius:var(--wx-r-av-sm); color:#fff; display:flex; align-items:center; justify-content:center; font-size:17px; font-weight:600; overflow:hidden; }
.wx-mo-body{ flex:1; min-width:0; }
.wx-mo-name{ font-size:15px; color:var(--wx-blue); font-weight:600; }
.wx-mo-text{ font-size:15px; color:#1a1a1a; line-height:1.5; margin:3px 0 6px; word-break:break-word; white-space:pre-wrap; }
.wx-mo-img{ width:150px; background:#f4f4f4; border-radius:10px; overflow:hidden; margin-bottom:6px; }
.wx-mo-img-ph{ height:96px; background:linear-gradient(135deg,#cfd9df,#9fb0bd); display:flex; align-items:center; justify-content:center; font-size:28px; }
.wx-mo-img-cap{ padding:5px 8px; font-size:12px; color:#666; line-height:1.4; }
.wx-mo-photo{ max-width:200px; border-radius:10px; overflow:hidden; margin-bottom:6px; }
.wx-mo-photo img{ display:block; width:100%; height:auto; }
/* P11 朋友圈组图(同场景多角度)→ 九宫格 */
.wx-mo-photos{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; max-width:240px; margin-bottom:6px; border-radius:10px; overflow:hidden; }
.wx-mo-ph9{ position:relative; aspect-ratio:1/1; overflow:hidden; background:#eee; }
.wx-mo-ph9 img{ display:block; width:100%; height:100%; object-fit:cover; cursor:zoom-in; }
.wx-mo-genable{ cursor:pointer; transition:filter .15s; } /* 朋友圈「点击生成」块 */
.wx-mo-genable:hover{ filter:brightness(1.04); }
.wx-mo-genable .wx-mo-img-cap{ color:var(--wx-green); }
.wx-mo-meta{ display:flex; align-items:center; justify-content:space-between; }
.wx-mo-time{ font-size:12px; color:#bbb; }
.wx-mo-ops{ display:flex; gap:14px; }
.wx-mo-ops b{ font-size:13px; color:var(--wx-blue); cursor:pointer; font-weight:400; }
.wx-mo-like.on{ color:var(--wx-red); }
.wx-mo-foot{ background:#f7f7f8; border-radius:10px; padding:8px 10px; margin-top:7px; }
.wx-mo-likes{ font-size:13px; color:var(--wx-blue); padding-bottom:4px; border-bottom:1px solid #ececec; margin-bottom:4px; }
.wx-mo-cm{ font-size:13px; color:#333; line-height:1.6; }
.wx-mo-cm b{ color:var(--wx-blue); font-weight:400; }
.wx-mo-cmtbox{ display:flex; gap:6px; margin-top:6px; }
#wx-mo-cmt-input{ flex:1; border:1px solid #ddd; border-radius:5px; padding:6px 9px; font-size:13px; outline:none; }
.wx-mo-cmt-send{ background:var(--wx-green); color:#fff; border:none; border-radius:5px; padding:0 12px; cursor:pointer; font-size:13px; }

/* ===== 朋友圈发布器配图 + 互动 SVG 图标（落地方案-36 批3：零 emoji 红线）===== */
/* 弹层挂载层说明：朋友圈三个弹层（compose/mc-sheet/mc-album）由 bindAppEvents 搬到 #wx-app 直下——
   手机上 focus 弹键盘时 iOS 会强滚 overflow:hidden 的 #wx-screen，挂 screen 内的 absolute 弹层会被滚出视口顶（面板头被裁+遮罩失踪）。
   挂 app 直下 = absolute inset:0 直接贴壳、几何天然对齐、滚动污染绝缘（同 showGenCeremony 先例）。 */
.wx-mo-ops b{ display:inline-flex; align-items:center; gap:4px; }
.wx-mo-ops b svg{ width:15px; height:15px; }
.wx-mo-likes{ display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.wx-mo-lkic{ display:inline-flex; color:var(--wx-red); flex:0 0 auto; }
.wx-mo-lkic svg{ width:13px; height:13px; }
.wx-mo-img-ph svg{ width:26px; height:26px; color:#fff; opacity:.85; }
.wx-mc-imgs{ display:flex; flex-wrap:wrap; gap:7px; }
.wx-mc-im{ position:relative; width:70px; height:70px; border-radius:12px; background-size:cover; background-position:center; background-color:#ececee; }
.wx-mc-x{ position:absolute; top:-6px; right:-6px; width:20px; height:20px; border-radius:50%; background:#2c2c30; color:#fff; font-size:11px; font-style:normal; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,.25); }
.wx-mc-add{ width:70px; height:70px; border-radius:12px; border:1.5px dashed #c9c9cf; color:#a6a6ac; display:flex; align-items:center; justify-content:center; cursor:pointer; background:#fafafa; }
.wx-mc-add svg{ width:22px; height:22px; }
.wx-mc-add:active{ background:var(--wx-press); }
.wx-mc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:5px; max-height:300px; overflow-y:auto; margin:10px 0 12px; border-radius:12px; }
.wx-mc-cell{ position:relative; aspect-ratio:1/1; border-radius:10px; background-size:cover; background-position:center; background-color:#ececee; cursor:pointer; }
.wx-mc-cell .wx-mc-tick{ position:absolute; top:5px; right:5px; width:20px; height:20px; border-radius:50%; background:rgba(255,255,255,.85); border:1.5px solid rgba(0,0,0,.15); color:transparent; font-size:12px; font-style:normal; display:flex; align-items:center; justify-content:center; }
.wx-mc-cell.sel{ outline:2.5px solid var(--wx-accent); outline-offset:-2.5px; }
.wx-mc-cell.sel .wx-mc-tick{ background:var(--wx-accent); color:#fff; border-color:var(--wx-accent); }
#wx-mc-sheet .wx-sheet-act{ margin-top:9px; }

/* ===== 发布页（落地方案-36 · 方案A「这一刻」整页，2026-07-05 拍板）：衬线页眉+无边框书写+九宫格 ===== */
.wx-mcp{ flex:1; min-height:0; display:flex; flex-direction:column; background:var(--wx-card); }
.wx-mcp-top{ display:flex; align-items:center; justify-content:space-between; padding:12px 18px 4px; }
.wx-mcp-cancel{ color:var(--wx-t2); font-size:15px; padding:8px 4px; cursor:pointer; user-select:none; }
.wx-mcp-cancel:active{ opacity:.6; }
.wx-mcp-send{ border:none; border-radius:999px; padding:9px 22px; font-size:14.5px; font-weight:600; font-family:inherit; background:#ececee; color:var(--wx-t3); pointer-events:none; cursor:pointer; transition:background .2s,color .2s; }
.wx-mcp-send.ready{ background:var(--wx-green); color:#fff; pointer-events:auto; }
.wx-mcp-send.ready:active{ background:var(--wx-green-press); }
.wx-mcp-hero{ padding:16px 24px 0; }
.wx-mcp-title{ font-family:var(--font-serif); font-size:25px; color:var(--wx-t1); letter-spacing:.3px; }
.wx-mcp-date{ font-size:12px; color:var(--wx-t3); margin-top:6px; letter-spacing:.4px; }
.wx-mcp-date i{ font-style:normal; margin:0 6px; opacity:.7; }
.wx-mcp-body{ flex:1; min-height:0; overflow-y:auto; padding:12px 24px 20px; display:flex; flex-direction:column; gap:18px; }
.wx-mcp-ta{ border:none; outline:none; resize:none; width:100%; min-height:132px; font-size:17px; line-height:1.7; color:#1a1a1a; font-family:inherit; background:transparent; caret-color:var(--wx-green); padding:0; }
.wx-mcp-ta::placeholder{ font-family:var(--font-serif); font-style:italic; color:#c2c2c8; font-size:16.5px; letter-spacing:.3px; }
.wx-mcp-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:5px; }
.wx-mcp-grid.one{ grid-template-columns:62% 1fr 1fr; }   /* 单图放大占位 */
.wx-mcp-ph{ position:relative; aspect-ratio:1/1; border-radius:11px; background-size:cover; background-position:center; background-color:#ececee; overflow:hidden; cursor:pointer; }
.wx-mcp-ph::after{ content:''; position:absolute; inset:0; border-radius:11px; box-shadow:inset 0 0 0 .5px rgba(0,0,0,.06); pointer-events:none; }
.wx-mcp-ph .wx-mc-x{ top:5px; right:5px; background:rgba(20,20,24,.55); }   /* 复用删除圆钮；格子 overflow:hidden，原 -6px 外挂位会被裁 → 收进角内 */
.wx-mcp-add{ aspect-ratio:1/1; border-radius:11px; border:1.5px dashed #d5d5da; background:#fbfbfc; display:flex; flex-direction:column; gap:6px; align-items:center; justify-content:center; color:#b0b0b8; cursor:pointer; transition:background .18s,color .18s,border-color .18s; }
.wx-mcp-add svg{ width:20px; height:20px; }
.wx-mcp-add span{ font-size:10.5px; letter-spacing:.5px; }
.wx-mcp-add:active{ transform:scale(.97); background:#f5f5f7; color:#8a8a92; }
.wx-mcp-foot{ border-top:.5px solid var(--wx-line-strong); padding:2px 24px 14px; }
.wx-mcp-opt{ display:flex; align-items:center; gap:10px; padding:13px 0 0; font-size:14px; color:#3a3a40; }
.wx-mcp-opt svg{ width:17px; height:17px; color:var(--wx-t2); flex:0 0 auto; }
.wx-mcp-opt .v{ margin-left:auto; color:var(--wx-t3); font-size:13px; }

/* ===== 朋友圈互动通知（落地方案-36 批2：feed 顶胶囊 + 聚合页 + 跳帖高亮）===== */
.wx-mo-nbwrap{ display:flex; justify-content:center; padding:12px 0 2px; background:var(--wx-bg); }
.wx-mo-notifbar{ display:flex; align-items:center; gap:8px; background:#2c2c30; color:#fff; border-radius:999px; padding:7px 16px 7px 8px; font-size:13.5px; cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.18); user-select:none; }
.wx-mo-notifbar:active{ transform:scale(.97); }
.wx-mo-nb-av{ width:24px; height:24px; min-width:24px; border-radius:7px; background-size:cover; background-position:center; background-color:#55555a; }
.wx-mn-list{ flex:1; overflow-y:auto; background:var(--wx-bg); padding:10px 12px 20px; }
.wx-mn-row{ display:flex; align-items:center; gap:11px; background:var(--wx-card); border-radius:var(--wx-r-card); padding:12px 13px; margin-bottom:8px; cursor:pointer; box-shadow:var(--sh-sm); }
.wx-mn-row:active{ background:var(--wx-press); }
.wx-mn-row.fresh{ background:var(--wx-accent-soft); }
.wx-mn-av{ width:42px; height:42px; min-width:42px; border-radius:var(--wx-r-av-sm); color:#fff; display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:600; overflow:hidden; }
.wx-mn-main{ flex:1; min-width:0; }
.wx-mn-name{ font-size:14.5px; font-weight:600; color:var(--wx-t1); }
.wx-mn-what{ display:flex; align-items:center; gap:5px; font-size:13px; color:var(--wx-t2); margin-top:2px; line-height:1.45; }
.wx-mn-what .wx-mn-heart{ display:inline-flex; color:var(--wx-red); flex:0 0 auto; }
.wx-mn-what .wx-mn-heart svg{ width:14px; height:14px; }
.wx-mn-cmtx{ overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; color:#3a3a40; }
.wx-mn-time{ font-size:11.5px; color:var(--wx-t3); margin-top:3px; }
.wx-mn-thumb{ width:44px; height:44px; min-width:44px; border-radius:10px; background-size:cover; background-position:center; background-color:#ececee; }
.wx-mn-thumb-txt{ display:flex; align-items:center; justify-content:center; font-size:10px; color:#8a8a90; padding:3px; text-align:center; line-height:1.35; overflow:hidden; background:#f1f1f3; }
.wx-mn-flash{ animation:wx-mn-flash 1.5s ease; }
@keyframes wx-mn-flash{ 0%{ background:var(--wx-accent-soft); } 100%{ background:transparent; } }

/* ===== 联系人资料页（拟真微信，关系档案折叠）===== */
.wx-profile{ flex:1; overflow-y:auto; background:var(--wx-bg); }
.wx-pf-head{ display:flex; align-items:center; gap:14px; background:var(--wx-accent-soft); padding:22px 16px 20px; margin:10px 10px 0; border-radius:var(--wx-r-xl); box-shadow:var(--sh-sm); }
.wx-pf-av{ width:64px; height:64px; min-width:64px; border-radius:var(--wx-r-lg); color:#fff; display:flex; align-items:center; justify-content:center; font-size:27px; font-weight:600; border:3px solid #fff; box-shadow:var(--sh-sm); }
.wx-pf-id{ min-width:0; }
.wx-pf-name{ font-family:var(--font-serif); font-size:25px; color:#141414; font-weight:400; display:flex; align-items:center; gap:7px; letter-spacing:-.2px; }   /* ⭐Genie：衬线人物名 */
.wx-pf-gender{ font-size:11px; width:16px; height:16px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:#fff; }
.wx-pf-gender.female{ background:#9a9aa0; }
.wx-pf-gender.male{ background:#8a8a90; }
.wx-pf-line{ font-size:13px; color:var(--wx-t-soft); margin-top:5px; }
.wx-pf-relchip{ display:inline-block; margin-top:8px; font-size:12px; font-weight:500; color:var(--wx-accent-deep); background:rgba(255,255,255,.72); border-radius:99px; padding:3px 12px; }
/* ⭐Genie frame03 沉浸式资料页（仅当有真照；无照走上面的常规头，不破相） */
.wx-pf-immersive{ position:relative; }
.wx-pf-hero{ position:absolute; top:0; left:0; right:0; height:300px; background-size:cover; background-position:center 28%; z-index:0; }
.wx-pf-hero::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.2) 0%,rgba(0,0,0,0) 32%,rgba(0,0,0,.5) 100%); }
.wx-pf-immersive .wx-pf-head{ position:relative; z-index:1; margin-top:214px; background:rgba(18,18,22,.42); -webkit-backdrop-filter:blur(22px) saturate(1.3); backdrop-filter:blur(22px) saturate(1.3); border:1px solid rgba(255,255,255,.14); box-shadow:0 16px 44px rgba(0,0,0,.4); }
.wx-pf-immersive .wx-pf-name{ color:#fff; }
.wx-pf-immersive .wx-pf-line{ color:rgba(255,255,255,.72); }
.wx-pf-immersive .wx-pf-relchip{ background:rgba(255,255,255,.18); color:#fff; }
.wx-pf-immersive .wx-pf-av{ border-color:rgba(255,255,255,.5); }
.wx-pf-glance{ display:flex; align-items:center; gap:10px; margin:10px 10px 0; padding:12px 16px; background:var(--wx-card); border-radius:var(--wx-r-lg); box-shadow:var(--sh-sm); }
.wx-pf-glance-k{ font-size:12.5px; color:var(--wx-t2); display:flex; align-items:center; gap:5px; flex:0 0 auto; }
.wx-pf-glance-heart{ color:var(--wx-accent); font-style:normal; font-size:14px; }
.wx-pf-glance-bar{ flex:1; height:7px; border-radius:99px; background:var(--wx-line-faint); overflow:hidden; }
.wx-pf-glance-bar b{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--wx-accent),var(--wx-accent-press)); transition:width .5s var(--ease); }
.wx-pf-block{ background:#fff; margin:10px 10px 0; padding:0 16px; border-radius:16px; }
.wx-pf-block-h{ font-size:12px; color:var(--wx-t-soft); padding:12px 0 6px; }
.wx-pf-sec-h{ display:flex; align-items:center; justify-content:space-between; padding:15px 0; font-size:15px; color:#222; cursor:pointer; user-select:none; }
.wx-pf-chev{ font-size:13px; color:#999; }
.wx-pf-chev::after{ content:' ›'; }
.wx-pf-chev.open::after{ content:' ⌄'; }
.wx-pf-sec-body{ padding:4px 0 14px; border-top:1px solid var(--wx-line-faint); }
.wx-pf-stage{ font-size:13px; color:var(--wx-t2); margin:12px 0 10px; }
.wx-pf-stage b{ color:var(--wx-accent-deep); }
.wx-pf-stats{ display:flex; flex-direction:column; gap:11px; }
.wx-pf-stat-h{ display:flex; align-items:center; gap:6px; font-size:13px; color:#555; margin-bottom:5px; }
.wx-pf-stat-h i{ font-style:normal; }
.wx-pf-stat-h em{ margin-left:auto; font-style:normal; font-weight:600; color:#333; }
.wx-pf-track{ display:block; height:7px; border-radius:4px; background:#ececec; overflow:hidden; }
.wx-pf-track b{ display:block; height:100%; border-radius:4px; transition:width .5s ease; }
.wx-pf-card{ margin-top:8px; }
.wx-pf-row{ display:flex; gap:12px; padding:11px 0; border-bottom:1px solid #f5f5f5; font-size:14px; }
.wx-pf-row:last-child{ border-bottom:none; }
.wx-pf-k{ color:#999; min-width:74px; flex:0 0 auto; }
.wx-pf-v{ color:#222; flex:1; line-height:1.55; word-break:break-word; }
.wx-pf-row.locked .wx-pf-v{ color:#c0b8a8; font-style:italic; }
.wx-pf-flags{ padding-top:10px; }
.wx-pf-flags .wx-pf-k{ display:block; margin-bottom:8px; }
.wx-pf-flag{ display:inline-block; background:#f0eaf7; color:#8a6db0; font-size:12px; padding:3px 9px; border-radius:9px; margin:0 6px 6px 0; }
.wx-pf-life{ padding:2px 0 14px; }
.wx-pf-life-row{ display:flex; align-items:flex-start; gap:8px; padding:8px 0; border-bottom:1px solid #f5f5f5; font-size:14px; }
.wx-pf-life-row:last-child{ border-bottom:none; }
.wx-pf-life-row i{ font-style:normal; font-size:15px; line-height:1.55; }
.wx-pf-life-k{ color:#999; min-width:40px; flex:0 0 auto; }
.wx-pf-life-v{ color:#222; flex:1; line-height:1.55; word-break:break-word; }
.wx-pf-mo{ display:flex; align-items:center; gap:6px; padding:2px 0 14px; cursor:pointer; }
.wx-pf-mo-t{ width:54px; height:54px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:18px; color:#999; overflow:hidden; }
.wx-pf-mo.empty{ font-size:13px; color:#bbb; padding:6px 0 16px; cursor:default; }
.wx-pf-go{ margin-left:auto; color:#ccc; font-size:18px; }
.wx-pf-msg{ display:block; width:calc(100% - 20px); margin:14px auto 24px; background:var(--wx-green); color:#fff; border:none; border-radius:12px; padding:12px; font-size:16px; cursor:pointer; transition:transform .12s, opacity .15s; }
.wx-pf-msg:active{ transform:scale(.985); opacity:.9; }
/* 落地方案-16-3：资料页删除联系人（文字款红字，低调放发消息下面） */
.wx-pf-del{ display:block; width:calc(100% - 20px); margin:-10px auto 24px; background:none; color:var(--wx-red); border:none; padding:8px; font-size:14px; cursor:pointer; }
.wx-pf-del:active{ opacity:.55; }

/* ===== 资料页·记忆库（#5：可查看/编辑 TA 记得的事）===== */
.wx-pf-mem-h{ font-size:13px; color:var(--wx-blue); font-weight:600; padding:10px 0 9px; display:flex; align-items:center; gap:8px; }
.wx-pf-mem-tip{ font-size:11px; color:#b3b3b3; font-weight:400; }
.wx-pf-mem-flags{ display:flex; flex-wrap:wrap; gap:7px; }
.wx-pf-mem-flag{ display:inline-flex; align-items:center; gap:5px; background:#f0eaf7; color:#7a5ba8; font-size:12.5px; line-height:1.4; padding:5px 7px 5px 11px; border-radius:13px; }
.wx-pf-mem-del{ cursor:pointer; width:16px; height:16px; min-width:16px; border-radius:50%; background:rgba(122,91,168,.16); color:#7a5ba8; font-size:12px; line-height:16px; text-align:center; font-weight:700; }
.wx-pf-mem-del:active{ background:rgba(122,91,168,.42); transform:scale(.9); }
.wx-pf-mem-empty{ font-size:13px; color:#bbb; }
.wx-pf-mem-add{ display:flex; gap:8px; margin-top:11px; }
.wx-pf-mem-add input{ flex:1; min-width:0; border:1px solid #ddd; border-radius:6px; padding:8px 10px; font-size:13px; outline:none; font-family:inherit; }
.wx-pf-mem-add button{ flex:0 0 auto; width:40px; background:var(--wx-green); color:#fff; border:none; border-radius:6px; font-size:19px; line-height:1; cursor:pointer; }
.wx-pf-mem-add button:active{ background:var(--wx-green-press); }
#wx-pf-mem-summary{ width:100%; border:1px solid #ddd; border-radius:6px; padding:9px 10px; font-size:13px; line-height:1.6; min-height:82px; resize:vertical; font-family:inherit; outline:none; box-sizing:border-box; }
.wx-pf-mem-savebtn{ margin-top:9px; background:var(--wx-line-faint); color:var(--wx-blue); border:none; border-radius:6px; padding:8px 15px; font-size:13px; cursor:pointer; }
.wx-pf-mem-savebtn:active{ background:#e6e6e6; }

/* 换头像相机角标 + 「我」入口（#3 自定义头像）*/
.wx-pf-av-wrap{ position:relative; flex:0 0 auto; }
.wx-pf-av-cam{ position:absolute; right:-5px; bottom:-5px; width:24px; height:24px; border-radius:50%; background:var(--wx-green); color:#fff; font-size:12px; display:flex; align-items:center; justify-content:center; cursor:pointer; border:2px solid #fff; box-shadow:0 1px 5px rgba(0,0,0,.28); }
.wx-pf-av-cam:active{ transform:scale(.88); }
.wx-me-tag{ font-size:11px; color:var(--wx-green); background:rgba(0,0,0,.1); border-radius:4px; padding:1px 6px; vertical-align:middle; }

/* ===== ⭐V11 资料页（Genie 设计稿 Frame 11/12）：整图沉浸 hero + 好感度 / 关系档案 / 记忆库 / Moments 四卡 ===== */
/* 沉浸资料页/时间线：状态栏【浮在 hero 大图上】(透明渐隐·白字)→照片铺到最顶、无缝(治"顶部多出一条分割线"——旧的钉死 #26303b 配旧渐变占位，真照片顶部亮就露馅)。滚过大图后切实底深字(免白字糊在白卡上看不清) */
#wx-app.wx-pf-imm #wx-statusbar{ position:absolute; top:0; left:0; right:0; z-index:6; pointer-events:none; background:linear-gradient(180deg,rgba(0,0,0,.42),rgba(0,0,0,0)); color:#fff; transition:background .2s ease, color .2s ease; }
#wx-app.wx-pf-imm.wx-pf-scrolled #wx-statusbar{ background:var(--wx-bg); color:#111; }
.wx-pf2{ flex:1; min-height:0; overflow-y:auto; background:var(--wx-bg); -webkit-overflow-scrolling:touch; }
/* —— 顶部整图 hero —— */
.wx-pf2-hero{ position:relative; display:flex; flex-direction:column; height:56dvh; min-height:448px; max-height:580px; padding-bottom:26px; background-size:cover; background-position:center 28%;
  background-color:#26303b; background-image:linear-gradient(180deg,#26303b 0%,#3a3531 42%,#6a5247 74%,#9a6a4a 100%); }
.wx-pf2-hero.has-photo{ background-image:none; }   /* 有真照：只铺照片（照片由 inline style 给）*/
.wx-pf2-hero::before{ content:''; position:absolute; inset:0; background:radial-gradient(52% 34% at 50% 32%,rgba(244,214,182,.32),transparent 66%),radial-gradient(120% 70% at 50% 6%,rgba(120,140,160,.26),transparent 60%); pointer-events:none; }
.wx-pf2-hero.has-photo::before{ background:none; }   /* 有真照时去掉这层暖色光晕——它本是给渐变占位提气的，盖在真照上会把脸糊成一层光、降对比（用户反馈「打了层光、很模糊」）*/
.wx-pf2-hero::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.34) 0%,transparent 22%,transparent 44%,rgba(18,18,22,.66) 100%); pointer-events:none; }
.wx-pf2-top{ position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; padding:40px 18px 0; }   /* 40 = 状态栏 30 + 原 10：状态栏现浮在大图上，按钮要让开它 */
.wx-pf2-cbtn{ width:44px; height:44px; padding:0; border:0; color:inherit; font:inherit; border-radius:50%; background:rgba(255,255,255,.16); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:transform .12s, background .15s; }
.wx-pf2-cbtn:active{ transform:scale(.9); background:rgba(255,255,255,.26); }
.wx-pf2-cbtn:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.wx-pf2-cbtn svg{ width:18px; height:18px; display:block; }
.wx-pf2-idwrap{ position:relative; z-index:2; margin:auto 22px 0; }   /* margin-top:auto 把 名字+信息行+好感槽 一起顶到 hero 底部 */
/* 名字行「一条基线」（2026-07-14 排版甲）：名字·年龄·性别 flex baseline 对齐——性别别再用 vertical-align 硬抬（旧版浮在年龄上方的病根） */
.wx-pf2-name{ display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; }
.wx-pf2-nm-t{ font-family:var(--font-serif); font-size:34px; color:#fff; line-height:1.04; letter-spacing:-.3px; word-break:break-word; min-width:0; }
.wx-pf2-age{ font-size:15px; color:rgba(255,255,255,.62); letter-spacing:.4px; }
.wx-pf2-g{ font-style:normal; font-size:14px; text-shadow:0 1px 8px rgba(0,0,0,.45); }
.wx-pf2-g.f{ color:rgba(255,182,193,.9); }
.wx-pf2-g.m{ color:rgba(150,196,232,.85); }
/* 信息行（2026-07-14 方案一）：备注药丸 + 33-D 模糊状态 + 右端好感药丸，一行放平——收起态零空行 */
.wx-pf2-inforow{ display:flex; align-items:center; gap:10px; margin-top:10px; }
.wx-pf2-vague{ font-size:12px; color:rgba(255,255,255,.72); letter-spacing:.2px; white-space:nowrap; }
.wx-pf2-rm-pill{ display:inline-flex; align-items:center; gap:6px; max-width:46%; padding:4px 11px; border-radius:999px; border:1px solid rgba(255,255,255,.32); background:rgba(255,255,255,.08); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); cursor:pointer; transition:background .15s, transform .12s; }
.wx-pf2-rm-pill:active{ background:rgba(255,255,255,.22); transform:scale(.97); }
.wx-pf2-rm-pill span{ font-size:12.5px; color:rgba(255,255,255,.92); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wx-pf2-rm-pill.empty span{ color:rgba(255,255,255,.66); font-weight:400; }
.wx-pf2-rm-pill svg{ width:11.5px; height:11.5px; flex:0 0 auto; opacity:.8; }
/* —— 内容区 —— */
.wx-pf2-body{ position:relative; z-index:3; background:var(--wx-bg); border-radius:28px 28px 0 0; margin-top:-18px; padding:26px 16px 30px; }   /* 灰底卷起，承接照片（设计稿）*/
.wx-pf2-card{ background:#fff; border-radius:20px; box-shadow:0 6px 20px rgba(20,20,30,.06); padding:18px 18px 16px; margin-bottom:14px; }
.wx-pf2-ch{ display:flex; align-items:center; gap:9px; }
.wx-pf2-ch svg{ width:17px; height:17px; flex:0 0 auto; }
.wx-pf2-ch .genie-dots{ font-size:17px; color:#141414; flex:0 0 auto; }
.wx-pf2-ch-t{ font-size:14px; font-weight:600; color:#1c1c20; }
.wx-pf2-ch-x{ margin-left:auto; font-size:12px; color:#b6b6bc; display:flex; align-items:center; gap:2px; }
/* 好感 · 药丸+窄条（2026-07-14 方案一，替代原「清透大卡」）：收起=信息行右端 ♥数字 小药丸（零占行）；
   点开=下方长出窄条（♥ 好感度 + 进度条 + 数字 + 档位）。爱心颜色/心跳（wxAffDot）沿用落地方案-31。 */
@keyframes wxAffBeat{ 0%,30%,72%,100%{ transform:scale(1) } 12%{ transform:scale(1.14) } 40%{ transform:scale(1.05) } }
@keyframes wxAffDot{ 0%,30%,72%,100%{ transform:scale(1) } 12%{ transform:scale(1.35) } 40%{ transform:scale(1.08) } }
@keyframes wxAffGlow{ 0%,100%{ opacity:.42; transform:translate(-50%,-50%) scale(.9) } 50%{ opacity:.92; transform:translate(-50%,-50%) scale(1.12) } }
.wx-affp{ margin-left:auto; display:inline-flex; align-items:center; gap:5px; padding:4px 11px; border-radius:999px; cursor:pointer; flex:0 0 auto; background:linear-gradient(180deg,rgba(18,9,13,.42),rgba(18,9,13,.66)); border:1px solid rgba(255,255,255,.2); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); transition:opacity .2s, transform .15s; }
.wx-affp:active{ transform:scale(.94); }
.wx-affp.gone{ opacity:0; pointer-events:none; }
.wx-affp b{ font-family:var(--font-serif); font-style:italic; font-size:13.5px; color:rgba(255,255,255,.95); font-weight:500; line-height:1; }
.wx-affp-h{ width:13px; height:13px; flex:0 0 auto; transform-origin:center; }
.wx-aff-slot{ overflow:hidden; height:0; transition:height .38s cubic-bezier(.32,.72,.28,1); }   /* 展开才有这一行——收起态零占位（治「空一排」） */
.wx-aff-slot.open{ height:58px; }   /* 46 条 + 12 上间距 */
.wx-affs{ position:relative; display:flex; align-items:center; gap:10px; height:46px; margin-top:12px; padding:0 15px; border-radius:14px; cursor:pointer; overflow:hidden; background:linear-gradient(180deg,rgba(18,9,13,.36) 0%,rgba(18,9,13,.6) 100%); border:1px solid rgba(255,255,255,.16); box-shadow:0 10px 28px rgba(0,0,0,.32); }
.wx-affs-glow{ position:absolute; left:84%; top:0; width:110px; height:110px; border-radius:50%; transform:translate(-50%,-50%); animation:wxAffGlow 3.6s ease-in-out infinite; pointer-events:none; transition:background .4s ease; }
.wx-affs-h{ width:14px; height:14px; flex:0 0 auto; transform-origin:center; }
.wx-affs-lb{ font-size:12.5px; font-weight:600; color:#fff; letter-spacing:.3px; text-shadow:0 1px 6px rgba(0,0,0,.5); flex:0 0 auto; }
.wx-affs-bar{ flex:1; height:4px; border-radius:2px; background:rgba(255,255,255,.2); overflow:hidden; position:relative; min-width:40px; }
.wx-affs-fill{ position:absolute; left:0; top:0; height:4px; border-radius:2px; transition:width .35s cubic-bezier(.4,0,.2,1),background .5s,box-shadow .5s; }
.wx-affs-val{ font-family:var(--font-serif); font-style:italic; font-size:21px; line-height:1; color:#fff; flex:0 0 auto; }
.wx-affs-tier{ font-size:10px; letter-spacing:1.8px; font-weight:600; flex:0 0 auto; white-space:nowrap; text-shadow:0 1px 6px rgba(0,0,0,.5); }
/* 关系档案 */
.wx-pf2-grid{ display:grid; grid-template-columns:1fr 1fr; gap:11px; margin-top:16px; }
.wx-pf2-cell{ background:rgba(120,120,130,.07); border-radius:15px; padding:13px 14px; min-width:0; }
.wx-pf2-cell.wide{ grid-column:1 / -1; }
.wx-pf2-cell-k{ font-size:11px; color:#9a9aa0; margin-bottom:5px; }
.wx-pf2-cell-v{ font-size:14.5px; color:#1c1c20; font-weight:500; word-break:break-word; }
/* 子标题（她是谁 / 她吃这套）*/
.wx-pf2-sub-k{ font-size:11px; color:#9a9aa0; margin:16px 0 8px; }
.wx-pf2-who{ font-size:14px; line-height:1.5; color:#33333a; word-break:break-word; }
.wx-pf2-likeline{ font-size:14px; line-height:1.5; color:#33333a; word-break:break-word; }
/* 她吃这套 · 加分 chips */
.wx-pf2-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.wx-pf2-chip{ padding:6px 12px; border-radius:999px; background:rgba(120,120,130,.1); color:#44443f; font-size:12.5px; line-height:1.3; }
/* 越相处越懂她 · 切面地图版（2026-07-04 方案A）：维度名+首句收起、点开单条、锁定短钩子、已懂计数 */
.wx-pf2-disc-h{ font-size:13px; font-weight:600; color:#1c1c20; margin:18px 0 2px; padding-top:16px; border-top:1px solid rgba(120,120,130,.12); }
.wx-pf2-ddot{ width:7px; height:7px; border-radius:50%; flex:none; }
.wx-pf2-ddot.on{ background:#33333a; }
.wx-pf2-ddot.off{ width:6px; height:6px; border:1.5px solid #cfcfd4; }
.wx-pf2-dai{ border-bottom:1px solid rgba(120,120,130,.09); }
.wx-pf2-dai:last-child{ border-bottom:none; }
.wx-pf2-dai-h{ display:flex; align-items:center; gap:10px; padding:12px 2px; }
.wx-pf2-dai-h[data-dai]{ cursor:pointer; -webkit-tap-highlight-color:transparent; }
.wx-pf2-dk{ flex:none; font-size:12.5px; font-weight:600; color:#1c1c20; }
.wx-pf2-dk.off{ color:#bcbcc2; font-weight:500; }
.wx-pf2-dlead{ flex:1; min-width:0; font-size:12px; color:#b6b6bc; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wx-pf2-dhook{ flex:1; font-size:12px; font-style:italic; color:#bcbcc2; }
.wx-pf2-darr{ flex:none; font-size:9px; color:#c9c9cf; transition:transform .18s; }
.wx-pf2-dai.open .wx-pf2-darr{ transform:rotate(90deg); }
.wx-pf2-dai.open .wx-pf2-dlead{ opacity:0; }
.wx-pf2-dx{ max-height:0; overflow:hidden; transition:max-height .22s ease; }
.wx-pf2-dai.open .wx-pf2-dx{ max-height:640px; }   /* persona+attachment 拼接可达 ~350字≈19行，400 会裁尾 */
.wx-pf2-dx p{ margin:0; padding:0 2px 14px 17px; font-size:13.5px; line-height:1.7; color:#33333a; word-break:break-word; }
@media (prefers-reduced-motion:reduce){ .wx-pf2-dx, .wx-pf2-darr{ transition:none; } }
/* 记忆库时间线 */
.wx-pf2-mem{ margin-top:7px; }
.wx-pf2-mem-it{ display:flex; gap:12px; padding:13px 0 0; }
.wx-pf2-mem-bar{ width:2px; flex:none; border-radius:2px; background:rgba(120,120,130,.2); margin-top:5px; align-self:stretch; }
.wx-pf2-mem-tx{ font-size:14px; line-height:1.5; color:#33333a; }
.wx-pf2-mem-sub{ font-size:11px; color:#b6b6bc; margin-top:5px; }
.wx-pf2-mem-empty{ font-size:13px; color:#b6b6bc; padding:10px 0 2px; }
.wx-pf2-mem-card{ cursor:pointer; }
.wx-pf2-mem-card:focus-visible{ outline:2px solid rgba(52,68,102,.42); outline-offset:2px; }
.wx-pf2-narr{ position:relative; margin-top:12px; padding:13px 14px 13px 23px; border:1px solid rgba(122,147,201,.14); border-radius:16px; background:#f7f8fb; overflow:hidden; }
.wx-pf2-narr::before{ content:''; position:absolute; left:10px; top:17px; bottom:16px; width:1.5px; border-radius:2px; background:rgba(122,147,201,.33); }
.wx-pf2-narr::after{ content:''; position:absolute; left:7px; top:17px; width:7px; height:7px; border-radius:50%; background:#7a93c9; box-shadow:0 0 0 3px #f7f8fb; }
.wx-pf2-narr-k{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; color:#5d6576; font-size:11px; line-height:1.35; }
.wx-pf2-narr-k span{ font-weight:650; letter-spacing:.04em; }
.wx-pf2-narr-k i{ color:#717785; font-style:normal; font-size:10px; white-space:nowrap; }
.wx-pf2-narr-t{ margin-top:7px; color:#252830; font-family:var(--font-serif); font-size:16px; line-height:1.35; }
.wx-pf2-narr-a{ margin-top:4px; color:#424752; font-size:12.5px; line-height:1.52; }
.wx-pf2-narr-note{ margin-top:7px; color:#666d7c; font-size:10.5px; line-height:1.4; }
.wx-pf2-mem-label{ margin-top:15px; color:#65656d; font-size:11px; font-weight:650; }
/* 落地方案-39「TA 眼中的你」belief 卡：柔和引号排布，克制、无光晕特效 */
.wx-pf2-bel{ margin-top:9px; display:flex; flex-direction:column; gap:11px; }
.wx-pf2-bel-it{ display:flex; gap:9px; align-items:flex-start; }
.wx-pf2-bel-q{ width:3px; flex:none; align-self:stretch; border-radius:3px; background:linear-gradient(#e7d7c4,#ecd0cf); margin-top:3px; }
.wx-pf2-bel-tx{ font-size:14px; line-height:1.56; color:#3a3238; letter-spacing:.1px; }
.wx-pf2-bel-empty{ font-size:13px; color:#b6b6bc; padding:11px 2px 3px; line-height:1.5; }
/* Moments */
.wx-pf2-moh{ display:flex; align-items:center; justify-content:space-between; padding:4px 4px 13px; }
.wx-pf2-moh-t{ font-size:14px; font-weight:600; color:#1c1c20; }
.wx-pf2-moh-x{ font-size:12px; color:#9a9aa0; }
.wx-pf2-mlist{ display:flex; flex-direction:column; gap:14px; }
.wx-pf2-mc{ background:#fff; border-radius:22px; box-shadow:0 6px 20px rgba(20,20,30,.06); overflow:hidden; cursor:pointer; }
.wx-pf2-mc-imgs{ display:flex; gap:4px; }
.wx-pf2-mc-img{ flex:1; min-width:0; background-size:cover; background-position:center; background-color:#e7e7ea; }
.wx-pf2-mc-img.solo{ height:186px; }
.wx-pf2-mc-img.duo{ height:140px; }
.wx-pf2-mc-bd{ padding:13px 15px 15px; }
.wx-pf2-mc-cap{ font-size:14px; line-height:1.5; color:#1c1c20; word-break:break-word; }
.wx-pf2-mc-meta{ display:flex; align-items:center; gap:12px; margin-top:11px; }
.wx-pf2-mc-meta .t{ font-size:11.5px; color:#b6b6bc; }
.wx-pf2-mc-meta .m{ display:flex; align-items:center; gap:5px; font-size:11.5px; color:#9a9aa0; }
.wx-pf2-mc-meta .m svg{ width:13px; height:13px; }
.wx-pf2-mo-empty{ background:#fff; border-radius:20px; box-shadow:0 6px 20px rgba(20,20,30,.06); padding:22px 18px; font-size:13px; color:#b6b6bc; text-align:center; }

/* ===== ⭐FRAME13 · Discover 动态 feed（浮起白卡）===== */
.wx-discover-top .wx-tb-title{ letter-spacing:-.3px; }   /* "Discover" 标题已是衬线（.wx-tb-title），这里只微调字距 */
.wx-discover-feed{ flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; background:var(--wx-bg); padding:4px 16px 18px; display:flex; flex-direction:column; gap:14px; }
.wx-discover-feed .wx-mo{ background:rgba(255,255,255,.72); border-radius:24px; box-shadow:0 6px 20px rgba(20,20,30,.06); padding:16px; border-bottom:none; }   /* 浮起卡（覆盖默认 .wx-mo 的描边/无阴影）*/
.wx-discover-feed .wx-mo-foot{ background:rgba(120,120,130,.08); border-radius:15px; padding:11px 13px; margin-top:11px; }
.wx-discover-feed .wx-mo-photo,.wx-discover-feed .wx-mo-img,.wx-discover-feed .wx-mo-photos{ max-width:none; width:100%; }   /* feed 配图铺满卡片 */
.wx-discover-feed .wx-empty{ background:none; }

/* 朋友圈配图（gid 生图块）：复用单聊 Genie 视觉（wx-ph- 遮罩 / wx-gen-spin 生成中 / 点簇 wx-gd / wx-gen-prog 进度），容器换成朋友圈全宽卡（不再用 📷 土占位）*/
.wx-mo-gph{ position:relative; width:100%; height:196px; border-radius:16px; overflow:hidden; background:#969aa0; box-shadow:0 4px 16px rgba(20,20,30,.08); cursor:pointer; margin-bottom:6px; }
.wx-mo-gph-sk{ position:absolute; inset:0; background:linear-gradient(162deg,#c7c7cf 0%,#a7a1a8 55%,#b6a085 100%); }
.wx-mo-gph.wx-gen-loading .wx-mo-gph-sk::after{ content:''; position:absolute; inset:0; background:linear-gradient(110deg,transparent 28%,rgba(255,255,255,.5) 50%,transparent 72%); transform:translateX(-100%); animation:wxShimmer 1.3s infinite; }   /* 02a2 骨架微光横扫 */
.wx-mo-gph.wx-gen-done{ height:auto; background:transparent; box-shadow:0 6px 20px rgba(20,20,30,.1); }
.wx-mo-gph .wx-gen-img{ display:block; width:100%; height:auto; border-radius:16px; }

/* ===== ⭐FRAME14 · 角色 Moments 时间线 ===== */
.wx-ml{ flex:1; min-height:0; display:flex; flex-direction:column; position:relative; background:var(--wx-bg); }
.wx-ml-scroll{ flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.wx-ml-hero{ position:relative; height:300px; background-size:cover; background-position:center 26%; background-color:#26303b; background-image:linear-gradient(180deg,#26303b 0%,#3a3531 44%,#7c4a37 78%,#b0734c 100%); }
.wx-ml-hero.has-photo{ background-image:none; }   /* 有图：inline 给背景图 */
.wx-ml-hero::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.3) 0%,transparent 30%,transparent 44%,rgba(0,0,0,.62) 100%); pointer-events:none; }
.wx-ml-top{ position:relative; z-index:2; padding:40px 18px 0; }   /* 同 .wx-pf2-top：让开浮在大图上的状态栏 */
.wx-ml-heroname{ position:absolute; left:22px; right:22px; bottom:18px; z-index:2; }
.wx-ml-name{ font-family:var(--font-serif); font-size:33px; color:#fff; line-height:1.02; letter-spacing:-.3px; word-break:break-word; }
.wx-ml-bio{ font-size:13px; color:rgba(255,255,255,.82); margin-top:9px; line-height:1.5; word-break:break-word; }
.wx-ml-body{ padding:20px 18px 120px; }
.wx-ml-h{ font-family:var(--font-serif); font-size:19px; color:#141414; letter-spacing:-.2px; margin:0 2px 16px; }
.wx-ml-rail{ position:relative; padding-left:26px; }
.wx-ml-axis{ position:absolute; left:5px; top:6px; bottom:6px; width:1.5px; background:rgba(0,0,0,.08); }
.wx-ml-item{ position:relative; margin-bottom:22px; }
.wx-ml-item:last-child{ margin-bottom:0; }
.wx-ml-dot{ position:absolute; left:-24px; top:5px; width:9px; height:9px; border-radius:50%; background:#c2c2c8; box-shadow:0 0 0 4px var(--wx-bg); }
.wx-ml-item:first-child .wx-ml-dot{ background:#141414; }
.wx-ml-time{ font-size:11.5px; color:#9a9aa0; margin-bottom:8px; }
.wx-ml-text{ font-size:14px; line-height:1.55; color:#2a2a30; margin-bottom:10px; word-break:break-word; white-space:pre-wrap; }
/* .wx-ml-mood（纯文字衬线斜体 18px 大字）已退役——2026-07-04 用户反馈：无图动态字体突兀地大，统一与正文一致 */
.wx-ml-item .wx-mo-photo,.wx-ml-item .wx-mo-img,.wx-ml-item .wx-mo-photos{ max-width:none; width:100%; border-radius:16px; margin-bottom:0; }
.wx-ml-likes{ display:flex; align-items:center; gap:6px; margin-top:9px; color:#8a8a90; font-size:12px; }
.wx-ml-likes svg{ width:13px; height:13px; }
.wx-ml-cta{ position:absolute; left:0; right:0; bottom:0; z-index:5; padding:14px 20px 26px; background:linear-gradient(180deg,rgba(244,244,246,0),var(--wx-bg) 36%); }
.wx-ml-msg{ width:100%; height:50px; border:none; border-radius:999px; background:#141414; color:#fff; font-size:15px; font-weight:600; cursor:pointer; transition:transform .12s; }
.wx-ml-msg:active{ transform:scale(.985); }

/* ===== Frame 12 · 改备注底部弹层 ===== */
.wx-rm-mask{ position:absolute; inset:0; z-index:100003; display:flex; align-items:flex-end; background:rgba(12,12,16,.46); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .24s var(--ease), visibility 0s linear .24s; }
.wx-rm-mask.show{ opacity:1; visibility:visible; pointer-events:auto; transition:opacity .24s var(--ease); }
.wx-rm-sheet{ width:100%; background:#f4f4f6; border-radius:30px 30px 0 0; padding:14px 22px calc(28px + env(safe-area-inset-bottom,0px)); box-shadow:0 -16px 50px rgba(0,0,0,.32); transform:translateY(102%); transition:transform .32s var(--ease); }
.wx-rm-mask.show .wx-rm-sheet{ transform:none; }
.wx-rm-grab{ width:42px; height:5px; border-radius:3px; background:rgba(0,0,0,.14); margin:0 auto 16px; }
.wx-rm-titlerow{ display:flex; align-items:center; justify-content:space-between; margin-bottom:5px; }
.wx-rm-cancel{ font-size:14.5px; color:#9a9aa0; cursor:pointer; }
.wx-rm-title{ font-size:15.5px; font-weight:600; color:#1c1c20; }
.wx-rm-save-tx{ font-size:14.5px; color:#141414; font-weight:600; cursor:pointer; }
.wx-rm-note{ font-size:12px; color:#a6a6ac; text-align:center; margin-bottom:21px; }
.wx-rm-who{ display:flex; align-items:center; gap:13px; margin-bottom:20px; }
.wx-rm-av{ width:50px; height:50px; border-radius:15px; flex:none; background-size:cover; background-position:center; color:#fff; display:flex; align-items:center; justify-content:center; font-size:21px; font-weight:600; }
.wx-rm-who-n{ font-family:var(--font-serif); font-size:21px; color:#161618; line-height:1.05; }
.wx-rm-who-s{ font-size:12px; color:#9a9aa0; margin-top:3px; }
.wx-rm-field{ background:#fff; border-radius:16px; box-shadow:0 2px 10px rgba(20,20,30,.05); padding:15px 16px; display:flex; align-items:center; gap:12px; border:1.5px solid #141414; }
.wx-rm-field input{ flex:1; min-width:0; border:none; outline:none; background:none; font-size:16px; color:#161618; font-weight:500; font-family:inherit; padding:2px 0; }
.wx-rm-clear{ width:20px; height:20px; border-radius:50%; flex:none; background:rgba(120,120,130,.18); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.wx-rm-clear svg{ width:11px; height:11px; }
.wx-rm-count{ display:flex; justify-content:flex-end; margin-top:8px; font-size:11.5px; color:#b6b6bc; }
.wx-rm-sgh{ font-size:11px; letter-spacing:1.2px; text-transform:uppercase; color:#9a9aa0; font-weight:600; margin:16px 0 11px; }
.wx-rm-sgs{ display:flex; flex-wrap:wrap; gap:9px; }
.wx-rm-sg{ padding:8px 14px; border-radius:999px; background:rgba(120,120,130,.12); color:#56565d; font-size:13px; cursor:pointer; transition:background .15s, transform .12s; }
.wx-rm-sg:active{ background:rgba(120,120,130,.22); transform:scale(.96); }
.wx-rm-cta{ height:54px; border-radius:999px; background:#141414; display:flex; align-items:center; justify-content:center; font-size:15.5px; font-weight:600; color:#fff; margin-top:24px; cursor:pointer; box-shadow:0 12px 28px rgba(20,20,30,.2); transition:transform .12s, opacity .15s; }
.wx-rm-cta:active{ transform:scale(.985); opacity:.92; }

/* ===== 资料页 ⋯ 动作菜单（底部 action sheet）===== */
.wx-pfm-mask{ position:absolute; inset:0; z-index:100003; display:flex; align-items:flex-end; background:rgba(12,12,16,.4); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .22s var(--ease), visibility 0s linear .22s; }
.wx-pfm-mask.show{ opacity:1; visibility:visible; pointer-events:auto; transition:opacity .22s var(--ease); }
.wx-pfm-sheet{ width:100%; padding:8px 12px calc(14px + env(safe-area-inset-bottom,0px)); transform:translateY(20px); opacity:0; transition:transform .26s var(--ease), opacity .26s var(--ease); }
.wx-pfm-mask.show .wx-pfm-sheet{ transform:none; opacity:1; }
.wx-pfm-grp{ background:rgba(250,250,252,.96); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); border-radius:16px; overflow:hidden; margin-bottom:8px; }
.wx-pfm-act{ padding:15px; text-align:center; font-size:16px; color:#141414; cursor:pointer; border-bottom:1px solid rgba(0,0,0,.06); }
.wx-pfm-act:last-child{ border-bottom:none; }
.wx-pfm-act:active{ background:rgba(0,0,0,.05); }
.wx-pfm-act.danger{ color:var(--wx-red); }
.wx-pfm-cancel{ background:#fff; border-radius:16px; padding:15px; text-align:center; font-size:16px; font-weight:600; color:#141414; cursor:pointer; }
.wx-pfm-cancel:active{ background:rgba(0,0,0,.05); }

/* ===== 记忆中枢·某人页：从资料页迁来的记忆编辑器 ===== */
.wx-mp-ed{ margin-top:4px; }
.wx-mp-h{ font-size:13px; color:#56565d; font-weight:600; padding:14px 0 9px; display:flex; align-items:center; gap:8px; }
.wx-mp-tip{ font-size:11px; color:#b6b6bc; font-weight:400; }
.wx-mp-flags{ display:flex; flex-wrap:wrap; gap:7px; }
.wx-mp-flag{ display:inline-flex; align-items:center; gap:5px; background:rgba(120,120,130,.1); color:#56565d; font-size:12.5px; line-height:1.4; padding:5px 7px 5px 11px; border-radius:13px; }
.wx-mp-fdel{ cursor:pointer; width:16px; height:16px; min-width:16px; border-radius:50%; background:rgba(120,120,130,.18); color:#56565d; font-size:12px; line-height:16px; text-align:center; font-weight:700; }
.wx-mp-fdel:active{ background:rgba(120,120,130,.4); transform:scale(.9); }
.wx-mp-empty{ font-size:13px; color:#b6b6bc; }
.wx-mp-add{ display:flex; gap:8px; margin-top:11px; }
.wx-mp-add input{ flex:1; min-width:0; border:1px solid var(--wx-line-strong); border-radius:10px; padding:9px 11px; font-size:13px; outline:none; font-family:inherit; background:#fff; }
.wx-mp-add button{ flex:0 0 auto; width:42px; background:#141414; color:#fff; border:none; border-radius:10px; font-size:19px; line-height:1; cursor:pointer; }
.wx-mp-add button:active{ background:#000; }
.wx-mp-ta{ width:100%; box-sizing:border-box; border:1px solid var(--wx-line-strong); border-radius:12px; padding:10px 12px; font-size:13px; line-height:1.6; min-height:80px; resize:vertical; font-family:inherit; outline:none; background:#fff; }
.wx-mp-savebtn{ margin-top:9px; background:rgba(120,120,130,.12); color:#56565d; border:none; border-radius:10px; padding:9px 16px; font-size:13px; cursor:pointer; }
.wx-mp-savebtn:active{ background:rgba(120,120,130,.22); }
.wx-mp-prune{ display:flex; align-items:center; gap:8px; margin-top:16px; font-size:12px; color:#9a9aa0; cursor:pointer; }

/* 「我」页·零钱 */
/* 落地方案-41 · 「我」页零钱行金额 + 零钱内页（wallet）：改余额从我页平铺降级进内页 */
.wx-me-amt{ font-size:15.5px; font-weight:700; color:var(--wx-t1); font-variant-numeric:tabular-nums; flex:0 0 auto; }
.wx-wallet-hero{ text-align:center; padding:28px 14px !important; }
.wx-wallet-big{ font-size:30px; font-weight:700; color:var(--wx-t1); letter-spacing:.5px; font-variant-numeric:tabular-nums; }
.wx-me-wallet-row{ display:flex; gap:8px; }
.wx-me-wallet-row input{ flex:1; min-width:0; border:1px solid #ddd; border-radius:6px; padding:9px 11px; font-size:14px; outline:none; font-family:inherit; }
.wx-me-wallet-row button{ flex:0 0 auto; background:var(--wx-green); color:#fff; border:none; border-radius:6px; padding:0 18px; font-size:14px; cursor:pointer; }
.wx-me-wallet-row button:active{ background:var(--wx-green-press); transform:scale(.96); }
/* 「我」页·设置（模型/Key）：取代浮动 ⚙️ 的原生 prompt */
.wx-set-lb{ display:block; font-size:12px; color:var(--wx-t2); margin:12px 0 5px; }
.wx-set-in{ width:100%; box-sizing:border-box; border:1px solid #ddd; border-radius:6px; padding:9px 11px; font-size:14px; outline:none; font-family:inherit; background:#fafafa; }
.wx-set-in:focus{ border-color:var(--wx-green); background:#fff; }
/* 隐藏 index.html 注入的浮动 ⚙️（设置已搬进「我」页，浮动齿轮太出戏）*/
#wx-fab-gear{ display:none !important; }

/* AI 消息：隐藏 ST 头像（头像由 wx HTML 提供）*/
/* 用户消息：绿气泡靠右 + 头像最右 */
/* ===== 模型 HTML（class 自动加  前缀）===== */
.wx { display:flex; flex-direction:column; gap:11px; padding:4px 0; }
.wx-sys { align-self:center; background:rgba(0,0,0,.07); color:#7a7a7a; font-size:12px; padding:3px 11px; border-radius:99px; max-width:80%; text-align:center; }
.wx-l { display:flex; align-items:flex-start; gap:8px; max-width:85%; flex-wrap:nowrap; }
.wx-av { width:38px; height:38px; min-width:38px; flex:0 0 38px; border-radius:var(--wx-r-av-sm); background:#b0b0b0; color:#fff; display:flex; align-items:center; justify-content:center; font-size:17px; font-weight:600; overflow:hidden; }
.wx-c { display:flex; flex-direction:column; gap:3px; min-width:0; flex:1 1 auto; }
/* #4 抗塌缩兜底：万一模型 HTML 仍有畸形，富媒体不挤压、文字气泡也不至于塌成一字一列 */
#wx-app .wx-img, #wx-app .wx-rp, #wx-app .wx-tf, #wx-app .wx-loc, #wx-app .wx-voice{ flex:0 0 auto; max-width:100%; }
.wx-nm { font-size:12px; color:var(--wx-t-soft); margin-left:3px; }
.wx-b { background:rgba(120,120,130,.12); color:#1c1c20; padding:11px 15px; border-radius:20px 20px 20px 7px; font-size:14.5px; line-height:1.45; width:fit-content; max-width:100%; word-break:break-word; box-shadow:none; }   /* ⭐Genie P0-02：收到气泡＝中性灰、无投影、尾角在左下(贴底部头像) */
.wx-at { color:var(--wx-blue); }
/* 气泡方向感改由不对称圆角表达（贴头像那角收小），旧三角尾巴退役 → 轮廓更干净 */
.wx-l .wx-b{ position:relative; }
/* 气声款：带词的喘/呻吟（细斜体小气泡，和正经对白区分开）*/
.wx-l .wx-b.wx-breath{ background:#f1f1f3; color:#9a9aa0; font-style:italic; font-size:13px; padding:6px 11px; }
/* 「对方正在输入」气泡款：消息流里对方那侧的小气泡，三个跳点；揭示时 setTyping(false) 移除、真消息原地接上 */
.wx-l .wx-b.wx-b-typing{ color:var(--wx-t-soft); padding:12px 16px; line-height:1; display:flex; align-items:center; gap:9px; }   /* ⭐Genie P0-02：三个跳点 + 输入中（非 genie-dots 呼吸圈） */
.wx-typing-dots{ display:inline-flex; align-items:center; gap:4px; color:#8a8a90; }
.wx-typing-dots i{ width:6px; height:6px; border-radius:50%; background:currentColor; animation:genie-typing 1.2s ease-in-out infinite; }
.wx-typing-dots i:nth-child(2){ animation-delay:.2s; }
.wx-typing-dots i:nth-child(3){ animation-delay:.4s; }
@keyframes genie-typing{ 0%,60%,100%{ transform:translateY(0); opacity:.4; } 30%{ transform:translateY(-4px); opacity:1; } }
.wx-typing-tx{ font-size:13px; color:#8a8a90; font-style:italic; }
.wxm-ub{ position:relative; }
/* 头像配色 c1~c8 */
/* ⭐Genie：头像兜底色块全中性灰（无真照时的字母块；颜色只来自真实照片） */
.c1{background:#6e6e76 } .c2{background:#7c7c84 } .c3{background:#8a8a90 } .c4{background:#5f5f67 }
.c5{background:#74747c } .c6{background:#86868e } .c7{background:#666670 } .c8{background:#7a7a82 }
/* 图片卡 */
.wx-img{ width:170px; background:#fff; border-radius:6px; overflow:hidden; box-shadow:0 1px 1px rgba(0,0,0,.05); }
.wx-img-ph{ height:108px; background:linear-gradient(135deg,#cfd9df,#9fb0bd); display:flex;align-items:center;justify-content:center; font-size:30px; }
.wx-img-cap{ display:none; }   /* 照片卡的"画面描述"只作【内部生图提示 + 历史/摘要记录】(stripWx/requestChatImage 仍读 textContent)，不再显示给玩家——发自拍无需配文字(用户反馈) */

/* ⭐Genie P0-02a 收图遮罩态：scrim + PHOTO 角标 + 眼睛「轻点查看」；点开走 requestChatImage(生成/取图)→02b 展开 */
.wx-img.wx-ph-masked, .wx-img.wx-gen-loading, .wx-img.wx-gen-failed{ position:relative; width:194px; max-width:74%; height:236px; border-radius:18px 18px 18px 7px; overflow:hidden; background:#969aa0; box-shadow:0 6px 18px rgba(20,20,30,.1); }   /* 遮罩 / 接收中 / 失败 共用卡片几何 */
.wx-img.wx-ph-masked .wx-img-ph{ position:absolute; inset:0; height:100%; font-size:0; background:linear-gradient(162deg,#c7c7cf 0%,#a7a1a8 55%,#b6a085 100%); }
.wx-ph-overlay{ position:absolute; inset:0; }
.wx-ph-overlay::after{ content:''; position:absolute; inset:0; background:linear-gradient(rgba(244,244,246,.16),rgba(120,120,130,.22)); }
.wx-ph-tag{ position:absolute; left:11px; top:11px; z-index:2; display:inline-flex; align-items:center; gap:5px; padding:4px 9px; border-radius:999px; background:rgba(20,20,26,.32); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:#fff; font-size:10px; font-weight:600; letter-spacing:.5px; }
.wx-ph-tag svg{ display:block; }
.wx-ph-mid{ position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; }
.wx-ph-eye{ width:48px; height:48px; border-radius:50%; background:rgba(255,255,255,.66); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(0,0,0,.12); }
.wx-ph-eye svg{ display:block; }
.wx-ph-cta{ font-size:12.5px; color:#33333a; font-weight:600; letter-spacing:.3px; }

/* 聊天「按需生图」：照片/画面 点击生成本人照片 */
.wx-img.wx-genable, .wx-scene.wx-genable{ cursor:pointer; }
.wx-img .wx-genhint{ padding:6px 9px; font-size:11px; color:var(--wx-blue); border-top:1px solid #eee; background:#fafafa; text-align:center; }
.wx-scene .wx-genhint{ display:inline-block; margin-top:11px; padding:4px 12px; font-style:normal; font-size:12px; color:rgba(255,255,255,.7); background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.20); border-radius:20px; }
.wx-img.wx-gen-done{ width:194px; max-width:74%; background:transparent; border-radius:18px 18px 18px 7px; box-shadow:0 8px 22px rgba(20,20,30,.16); }   /* ⭐Genie P0-02b 收图展开态：干净图+左下尾角 */
.wx-img .wx-gen-img{ display:block; width:100%; border-radius:18px 18px 18px 7px; }
.wx-scene .wx-gen-img{ display:block; width:100%; max-width:260px; margin:12px auto 2px; border-radius:11px; box-shadow:0 4px 16px rgba(0,0,0,.3); }
.wx-gen-loading{ position:relative; }
.wx-img.wx-gen-loading .wx-img-ph{ position:absolute; inset:0; height:100%; font-size:0; background:linear-gradient(162deg,#c7c7cf 0%,#a7a1a8 55%,#b6a085 100%); }   /* 生成中(02a2)：藏掉 📷 占位、换中性骨架底（扫光在 ::after，点簇/进度在 wx-gen-spin） */
.wx-gen-spin{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; background:rgba(0,0,0,.42); border-radius:inherit; }
.wx-scene .wx-gen-spin{ position:static; background:transparent; margin-top:11px; }
.wx-gen-fail{ border:0; font-family:var(--font-sans,inherit); cursor:pointer; }
.wx-img .wx-gen-fail{ position:absolute; inset:0; z-index:3; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; padding:22px; background:rgba(24,24,30,.48); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); color:#fff; text-align:center; }
.wx-gen-fail > span:last-child{ display:flex; flex-direction:column; align-items:center; }
.wx-gen-fail b{ font-size:13px; font-weight:650; line-height:1.4; }
.wx-gen-fail small{ margin-top:3px; color:#96969d; font-size:10.5px; line-height:1.45; }
.wx-img .wx-gen-fail b{ color:#fff; font-size:11.5px; letter-spacing:.3px; }
.wx-img .wx-gen-fail small{ color:rgba(255,255,255,.66); font-size:10px; letter-spacing:.3px; }
.wx-gen-fail-dot{ display:flex; align-items:center; justify-content:center; width:24px; height:24px; flex:0 0 24px; border-radius:50%; background:var(--wx-red); color:#fff; font-size:12px; font-weight:700; }
.wx-gen-fail.retrying{ cursor:default; }
.wx-gen-fail.retrying .wx-gen-fail-dot{ box-sizing:border-box; border:2px solid rgba(120,120,128,.22); border-top-color:#8e8e95; background:transparent; animation:wxRfSpin .72s linear infinite; }
.wx-gen-fail.uncertain{ cursor:default; }
.wx-gen-fail.uncertain.recoverable{ cursor:pointer; }
.wx-gen-fail.uncertain .wx-gen-fail-dot{ background:#b3b3b9; }
.wx-gen-fail.uncertain .wx-gen-fail-dot::after{ content:'…'; transform:translateY(-2px); }
.wx-scene .wx-gen-fail-scene{ position:static; display:flex; align-items:center; justify-content:center; gap:9px; width:100%; margin:12px 0 0; padding:10px 12px; border:1px solid rgba(20,20,30,.07); border-radius:13px; background:rgba(120,120,130,.055); color:#4a4a50; font-style:normal; text-align:left; }
.wx-scene .wx-gen-fail-scene > span:last-child{ align-items:flex-start; }
.wx-gen-dots{ display:inline-flex; gap:5px; }
.wx-gen-dots i{ width:7px; height:7px; border-radius:50%; background:#fff; animation:wxGenBlink 1s infinite ease-in-out both; }
.wx-gen-dots i:nth-child(2){ animation-delay:.16s; }
.wx-gen-dots i:nth-child(3){ animation-delay:.32s; }
.wx-gen-stage{ font-size:11px; color:#fff; opacity:.93; letter-spacing:.3px; text-align:center; padding:0 6px; line-height:1.3; }
.wx-scene .wx-gen-stage{ color:rgba(255,255,255,.72); }
@keyframes wxGenBlink{ 0%,80%,100%{ transform:scale(.5); opacity:.4; } 40%{ transform:scale(1); opacity:1; } }
/* Genie 02a2 生成中：九点呼吸点簇(慢旋) + 进度条扫光（替代旧三点 blink）*/
@keyframes genie-spin{ to{ transform:rotate(360deg); } }
@keyframes genie-spin-rev{ to{ transform:rotate(-360deg); } }
@keyframes genie-breathe{ 0%,100%{ transform:scale(.55); opacity:.4; } 50%{ transform:scale(1); opacity:1; } }
@keyframes genie-float{ 0%{ transform:translateX(-115%); } 100%{ transform:translateX(330%); } }
@keyframes genie-glow{ 0%,100%{ opacity:.5; transform:translate(-50%,-50%) scale(.9); } 50%{ opacity:1; transform:translate(-50%,-50%) scale(1.08); } }

/* ===== ⭐捏人定形等待层 · 星云凝聚（星尘就是进度；白/淡粉/淡紫，无黄色）===== */
.wx-gc-mask{ position:absolute; inset:0; z-index:300; overflow:hidden; isolation:isolate; background:#08080a; color:#fff; opacity:0; outline:0; transition:opacity .5s ease; }
.wx-gc-mask.show{ opacity:1; }
.wx-gc-cv{ position:absolute; inset:0; display:block; width:100%; height:100%; pointer-events:none; }
.wx-gc-info{ position:absolute; z-index:2; left:0; right:0; bottom:max(108px,calc(74px + env(safe-area-inset-bottom,0px))); display:flex; flex-direction:column; align-items:center; padding:0 24px; text-align:center; pointer-events:none; }
.wx-gc-name{ font-family:"Songti SC","Noto Serif SC",Georgia,var(--font-serif),serif; font-size:21px; font-weight:400; line-height:1.25; letter-spacing:3px; color:rgba(255,255,255,.92); }
.wx-gc-status{ margin-top:9px; min-height:19px; font-size:12.5px; line-height:1.5; letter-spacing:.5px; color:rgba(255,255,255,.52); opacity:1; transition:opacity .18s ease; }
.wx-gc-status.swap{ opacity:0; }
.wx-gc-prog{ display:flex; align-items:center; gap:9px; width:196px; max-width:70vw; margin-top:20px; }
.wx-gc-bar{ position:relative; flex:1; height:2px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.12); }
.wx-gc-fill{ position:absolute; inset:0 auto 0 0; display:block; width:0; border-radius:inherit; background:linear-gradient(90deg,rgba(198,178,238,.85),rgba(252,204,226,.9),rgba(255,255,255,.95)); transition:width .2s linear; }
.wx-gc-pct{ min-width:30px; color:rgba(255,255,255,.50); font-family:ui-monospace,Menlo,Monaco,monospace; font-size:10.5px; line-height:1; text-align:right; font-variant-numeric:tabular-nums; }
.wx-gc-note{ position:absolute; z-index:2; left:0; right:0; bottom:max(32px,calc(22px + env(safe-area-inset-bottom,0px))); padding:0 24px; color:rgba(255,255,255,.48); font-size:10.5px; line-height:1.5; letter-spacing:.8px; text-align:center; pointer-events:none; }
@media(max-height:560px){
  .wx-gc-info{ bottom:max(78px,calc(60px + env(safe-area-inset-bottom,0px))); }
  .wx-gc-prog{ margin-top:14px; }
  .wx-gc-note{ bottom:max(18px,calc(12px + env(safe-area-inset-bottom,0px))); }
}
@media(prefers-reduced-motion:reduce){
  .wx-gc-mask,.wx-gc-status,.wx-gc-fill{ transition:none!important; }
}
.wx-gd{ position:relative; display:inline-block; color:#fff; animation:genie-spin 7s linear infinite; }
.wx-gd i{ position:absolute; border-radius:50%; background:currentColor; animation:genie-breathe 1.6s ease-in-out infinite both; }
.wx-gen-prog{ width:96px; height:3px; border-radius:999px; background:rgba(255,255,255,.34); overflow:hidden; }
.wx-gen-prog > i{ display:block; width:44%; height:100%; border-radius:999px; background:rgba(255,255,255,.92); animation:genie-float 1.5s ease-in-out infinite; }
/* 画面(scene)在浅底上：点簇 / 进度条转深色 */
#wx-app .wx-scene .wx-gd{ color:#9a9aa0; }
#wx-app .wx-scene .wx-gen-prog{ background:rgba(120,120,130,.2); }
#wx-app .wx-scene .wx-gen-prog > i{ background:#9a9aa0; }
/* 红包 */
.wx-rp{ display:flex; align-items:center; gap:10px; width:200px; background:linear-gradient(135deg,#f6b352,#ee7d3a); color:#fff; padding:11px 13px; border-radius:6px; }
.wx-rp-i{ font-size:26px; }
.wx-rp-b{ font-size:14px; line-height:1.3; }
.wx-rp-s{ font-size:11px; opacity:.85; border-top:1px solid rgba(255,255,255,.3); margin-top:6px; padding-top:4px; }
/* 转账（对方发来 · 旧卡，点开领取仍用它） */
.wx-tf{ display:flex; align-items:center; gap:10px; width:190px; background:#f5a623; color:#fff; padding:11px 13px; border-radius:6px; }
.wx-tf-i{ font-size:24px; line-height:1; }
.wx-tf-a{ font-size:16px; font-weight:600; }
.wx-tf-s{ font-size:11px; opacity:.85; margin-top:2px; }

/* ===== 转账 v2（02·t 设计稿 · 我发出 · 暖金状态机卡：待收款/已收下/已退回）===== */
.wx-tfx{ display:flex; flex-direction:column; align-items:flex-end; gap:5px; margin:8px 0; }
.wx-tfx-note{ background:rgba(20,20,20,.07); color:#45454a; padding:10px 15px; border-radius:20px 20px 7px 20px; font-size:13.5px; line-height:1.4; max-width:74%; font-style:italic; word-break:break-word; }
.wx-tfc{ width:232px; max-width:80%; border-radius:20px 20px 7px 20px; overflow:hidden; position:relative; color:#fff; }
.wx-tfc-pending{ background:linear-gradient(155deg,#caa253,#a3742c); box-shadow:0 12px 28px rgba(150,110,40,.28); }
.wx-tfc-received{ background:linear-gradient(155deg,#c4a358,#9f7330); box-shadow:0 8px 22px rgba(150,110,40,.20); }
.wx-tfc-returned{ background:rgba(120,120,130,.10); border:1px solid rgba(120,120,130,.18); box-shadow:none; color:#8a8a90; }
.wx-tfc-shine{ position:absolute; top:0; left:0; width:120px; height:100%; background:linear-gradient(105deg,transparent,rgba(255,255,255,.32),transparent); filter:blur(2px); animation:wxTfShine 3s ease-in-out infinite; pointer-events:none; }
@keyframes wxTfShine{ 0%{ transform:translateX(-100%); } 100%{ transform:translateX(220%); } }
.wx-tfc-row{ display:flex; align-items:center; gap:13px; padding:15px 16px 13px; position:relative; }
.wx-tfc-ic{ width:42px; height:42px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.18); }
.wx-tfc-returned .wx-tfc-ic{ background:rgba(120,120,130,.14); }
.wx-tfc-main{ flex:1; min-width:0; }
.wx-tfc-amt{ font-family:var(--font-serif); font-size:25px; line-height:1; letter-spacing:-.3px; }
.wx-tfc-returned .wx-tfc-amt{ color:#8a8a90; }
.wx-tfc-st{ font-size:12px; margin-top:7px; display:flex; align-items:center; gap:6px; color:rgba(255,255,255,.84); }
.wx-tfc-returned .wx-tfc-st{ color:#a0a0a6; }
.wx-tfc-dot{ width:5px; height:5px; border-radius:50%; flex:none; background:rgba(255,255,255,.75); animation:wxTfDot 1.4s ease-in-out infinite; }
@keyframes wxTfDot{ 0%,100%{ opacity:.45; transform:scale(.9); } 50%{ opacity:1; transform:scale(1.08); } }
.wx-tfc-div{ height:1px; background:rgba(255,255,255,.16); }
.wx-tfc-returned .wx-tfc-div{ background:rgba(0,0,0,.05); }
.wx-tfc-foot{ padding:8px 16px; font-size:11px; letter-spacing:.3px; color:rgba(255,255,255,.72); position:relative; }
.wx-tfc-returned .wx-tfc-foot{ color:#b0b0b6; }
/* 转账事件的居中系统提示（已收款/退回；多行用 <br>） */
.wx-sys-tf{ line-height:1.45; }
.wx-sys-rp{ line-height:1.5; max-width:230px; }

/* ===== 红包·接收情景（用户设计稿：暖金价值卡·不走大红 · 未拆→拆开抉择→收下/退还）===== */
/* 收款卡三态（左气泡）。元素仍带 .wx-rp 供点击命中；decorateRedPacket 重建 innerHTML+态类 */
.wx-rpc{ display:block; padding:0; width:236px; max-width:80%; border-radius:20px 20px 20px 7px; overflow:hidden; position:relative; color:#fff; }
.wx-rpc-pending{ background:linear-gradient(155deg,#caa253,#a3742c); box-shadow:0 12px 28px rgba(150,110,40,.28); cursor:pointer; }
.wx-rpc-received{ background:linear-gradient(155deg,#c4a358,#9f7330); box-shadow:0 8px 22px rgba(150,110,40,.2); cursor:pointer; }
.wx-rpc-returned{ background:rgba(120,120,130,.10); border:1px solid rgba(120,120,130,.18); color:#8a8a90; }
.wx-rpc-shine{ position:absolute; top:0; left:0; width:120px; height:100%; background:linear-gradient(105deg,transparent,rgba(255,255,255,.34),transparent); filter:blur(2px); animation:wxTfShine 3s ease-in-out infinite; pointer-events:none; }
.wx-rpc-top{ position:relative; padding:20px 18px 0; display:flex; flex-direction:column; align-items:center; gap:12px; }
.wx-rpc-gift{ width:54px; height:54px; border-radius:50%; background:rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; animation:wxRpPulse 2.4s ease-in-out infinite; }
.wx-rpc-bless{ font-size:15px; color:#fff; font-weight:500; letter-spacing:.4px; text-align:center; word-break:break-word; }
.wx-rpc-from{ font-size:11px; color:rgba(255,255,255,.8); margin-top:5px; text-align:center; }
.wx-rpc-div{ height:1px; background:rgba(255,255,255,.16); margin:16px 16px 0; }
.wx-rpc-open{ padding:9px 16px 11px; display:flex; align-items:center; justify-content:center; gap:6px; color:#fff; font-size:11px; letter-spacing:.3px; font-weight:600; }
.wx-rpc-row{ display:flex; align-items:center; gap:13px; padding:15px 16px 13px; }
.wx-rpc-ic{ width:44px; height:44px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.2); }
.wx-rpc-returned .wx-rpc-ic{ background:rgba(120,120,130,.14); }
.wx-rpc-main{ flex:1; min-width:0; }
.wx-rpc-amt{ font-family:var(--font-serif); font-size:24px; line-height:1; letter-spacing:-.3px; }
.wx-rpc-returned .wx-rpc-amt{ color:#8a8a90; }
.wx-rpc-sub{ font-size:11.5px; color:rgba(255,255,255,.84); margin-top:6px; }
.wx-rpc-returned .wx-rpc-sub{ color:#a0a0a6; }
.wx-rpc-rdiv{ height:1px; background:rgba(255,255,255,.16); }
.wx-rpc-returned .wx-rpc-rdiv{ background:rgba(0,0,0,.05); }
.wx-rpc-foot{ padding:8px 16px; font-size:11px; color:rgba(255,255,255,.72); letter-spacing:.3px; }
.wx-rpc-returned .wx-rpc-foot{ color:#b0b0b6; }
/* 拆开·抉择浮层（聊天压暗 → 正中暖金大卡 + 金额跳出 + 收下/退还） */
.wx-rpo-mask{ position:absolute; inset:0; z-index:80; display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .25s, visibility 0s linear .25s; }
.wx-rpo-mask.show{ opacity:1; visibility:visible; pointer-events:auto; transition:opacity .25s; }
.wx-rpo-bg{ position:absolute; inset:0; background:rgba(22,17,12,.5); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.wx-rpo-card{ position:relative; width:300px; max-width:84%; border-radius:28px; overflow:hidden; background:linear-gradient(162deg,#cda659,#9a6c30); box-shadow:0 28px 64px rgba(60,40,10,.5); transform:scale(.86); }
.wx-rpo-mask.show .wx-rpo-card{ animation:wxRpPop .42s cubic-bezier(.2,1.1,.35,1) forwards; }
.wx-rpo-burst{ position:absolute; left:50%; top:30%; width:300px; height:300px; transform:translateX(-50%); background:radial-gradient(circle,rgba(255,255,255,.62),transparent 60%); pointer-events:none; opacity:0; }
.wx-rpo-mask.show .wx-rpo-burst{ animation:wxRpBurst 1s ease-out .15s; }
.wx-rpo-top{ position:relative; padding:30px 26px 0; display:flex; flex-direction:column; align-items:center; gap:15px; }
.wx-rpo-gift{ width:66px; height:66px; border-radius:50%; background:rgba(255,255,255,.22); display:flex; align-items:center; justify-content:center; }
.wx-rpo-mask.show .wx-rpo-gift{ animation:wxRpSpin .7s ease-out both; }
.wx-rpo-ic{ width:66px; height:66px; border-radius:50%; background:rgba(255,255,255,.22); display:flex; align-items:center; justify-content:center; }   /* 转账浮层图标：同礼物圈但不旋转（转账不"拆开"）*/
.wx-rpo-from{ font-size:12px; color:rgba(255,255,255,.82); letter-spacing:.3px; text-align:center; }
.wx-rpo-bless{ font-size:16px; color:#fff; font-weight:500; margin-top:5px; text-align:center; word-break:break-word; }
.wx-rpo-amt{ position:relative; padding:18px 0 2px; text-align:center; color:#fff; text-shadow:0 2px 18px rgba(90,60,15,.5); }
.wx-rpo-amt .y{ font-family:var(--font-serif); font-size:26px; }
.wx-rpo-amt .n{ font-family:var(--font-serif); font-size:58px; letter-spacing:-1.5px; display:inline-block; font-variant-numeric:tabular-nums; }
.wx-rpo-mask.show .wx-rpo-amt .n{ animation:wxRpAmt .6s cubic-bezier(.2,.9,.25,1) both; }
.wx-rpo-acts{ position:relative; padding:14px 24px 26px; display:flex; flex-direction:column; align-items:center; gap:15px; }
.wx-rpo-take{ width:100%; height:50px; border-radius:999px; background:#fffaf0; box-shadow:0 10px 24px rgba(90,60,15,.35); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:transform .12s; }
.wx-rpo-take:active{ transform:scale(.97); }
.wx-rpo-take span{ font-size:16px; color:#9a6c30; font-weight:700; letter-spacing:6px; padding-left:6px; }
.wx-rpo-ret{ display:flex; align-items:center; gap:6px; cursor:pointer; opacity:.92; transition:opacity .15s; }
.wx-rpo-ret:active{ opacity:.7; }
.wx-rpo-ret span{ font-size:13px; color:rgba(255,255,255,.86); letter-spacing:.4px; }
@keyframes wxRpPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.06); } }
@keyframes wxRpPop{ to{ transform:scale(1); } }
@keyframes wxRpBurst{ 0%{ opacity:0; transform:translateX(-50%) scale(.4); } 35%{ opacity:1; } 100%{ opacity:0; transform:translateX(-50%) scale(1.3); } }
@keyframes wxRpSpin{ 0%{ transform:rotateY(0); } 60%{ transform:rotateY(200deg); } 100%{ transform:rotateY(360deg); } }
@keyframes wxRpAmt{ 0%{ opacity:0; transform:translateY(10px) scale(.9); } 100%{ opacity:1; transform:none; } }

/* ===== 转账编辑卡（02·t1 · 底部白卡 + 数字键盘 + 暖金确认）===== */
.wx-tfe-mask{ position:absolute; inset:0; z-index:60; background:rgba(20,20,26,.34); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .26s, visibility 0s linear .26s; }
.wx-tfe-mask.show{ opacity:1; visibility:visible; pointer-events:auto; transition:opacity .26s; }
.wx-tfe{ position:absolute; left:0; right:0; bottom:0; background:#fff; border-radius:30px 30px 0 0; box-shadow:0 -18px 50px rgba(20,20,30,.22); padding:14px 22px calc(26px + env(safe-area-inset-bottom,0px)); transform:translateY(100%); transition:transform .3s cubic-bezier(.22,1,.36,1); }
.wx-tfe-mask.show .wx-tfe{ transform:none; }
.wx-tfe-grip{ width:38px; height:4px; border-radius:999px; background:rgba(0,0,0,.14); margin:0 auto 16px; }
.wx-tfe-hd{ display:flex; align-items:center; justify-content:space-between; margin-bottom:2px; }
.wx-tfe-title{ font-family:var(--font-serif); font-size:23px; color:#141414; letter-spacing:-.3px; line-height:1; }
.wx-tfe-to{ display:flex; align-items:center; gap:7px; }
.wx-tfe-to > span:first-child{ font-size:12.5px; color:#9a9aa0; }
.wx-tfe-av{ width:22px; height:22px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; font-size:11px; color:#fff; overflow:hidden; }
.wx-tfe-nm{ font-size:13px; color:#45454a; font-weight:500; }
.wx-tfe-amt{ display:flex; align-items:baseline; justify-content:center; gap:5px; padding:16px 0 8px; color:#9c6f33; }
.wx-tfe-amt .y{ font-family:var(--font-serif); font-size:27px; }
.wx-tfe-amt .n{ font-family:var(--font-serif); font-size:60px; line-height:1; letter-spacing:-1.5px; max-width:230px; overflow:hidden; text-overflow:ellipsis; }
.wx-tfe-cursor{ display:inline-block; width:2px; height:44px; flex:none; background:#c79a4e; align-self:center; margin-left:1px; animation:wxTfDot 1.1s ease-in-out infinite; }
.wx-tfe-note{ display:flex; align-items:center; gap:7px; justify-content:center; margin-bottom:16px; }
.wx-tfe-note svg{ flex:none; }
.wx-tfe-note input{ border:none; outline:none; background:none; font-size:13px; color:#56565d; text-align:center; max-width:220px; font-family:inherit; padding:0; }
.wx-tfe-note input::placeholder{ color:#b0b0b6; }
.wx-tfe-div{ height:1px; background:rgba(0,0,0,.06); margin:0 -22px 14px; }
.wx-tfe-pad{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:9px; }
.wx-tfe-key{ height:50px; border-radius:14px; background:rgba(120,120,130,.10); display:flex; align-items:center; justify-content:center; font-size:22px; color:#1c1c20; font-weight:500; cursor:pointer; user-select:none; transition:transform .1s, background .12s; }
.wx-tfe-key:active{ transform:scale(.95); background:rgba(120,120,130,.18); }
.wx-tfe-go{ height:52px; border-radius:999px; background:linear-gradient(150deg,#c89b4d,#9a6c30); box-shadow:0 12px 26px rgba(150,110,40,.30); display:flex; align-items:center; justify-content:center; gap:9px; margin-top:14px; cursor:pointer; transition:transform .1s, opacity .18s; }
.wx-tfe-go:active{ transform:scale(.99); }
.wx-tfe-go.dim{ opacity:.4; pointer-events:none; }
.wx-tfe-go span{ font-size:15px; color:#fff; font-weight:600; letter-spacing:.3px; }
/* 语音 */
.wx-voice{ display:flex; align-items:center; gap:8px; min-width:78px; flex-wrap:wrap; }
.wx-vd{ color:#333; }
.wx-vt{ flex-basis:100%; margin-top:4px; padding-top:4px; border-top:1px solid #eee; font-size:13px; color:var(--wx-t2); }
/* 位置 */
.wx-loc{ width:200px; background:#fff; border-radius:6px; overflow:hidden; box-shadow:0 1px 1px rgba(0,0,0,.05); }
.wx-loc-m{ height:70px; background:linear-gradient(135deg,#bfe3a0,#8fd0e8); display:flex;align-items:center;justify-content:center;font-size:26px; }
.wx-loc-t{ padding:7px 9px; }
.wx-loc-n{ font-size:14px; color:#000; }
.wx-loc-a{ font-size:11px; color:#999; margin-top:2px; }


/* ===== 独立版 · 页面外壳（手机框）===== */
html,body{ margin:0; height:100%; overflow:hidden; }
body{ box-sizing:border-box; background:linear-gradient(135deg,#15171e,#23222d 60%,#2b2533); display:flex; align-items:center; justify-content:center; font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; }
#wx-launch{ display:none; }
#wx-app{ position:relative; height:100dvh; width:100%; max-width:460px; }
#wx-app.open{ display:flex; }
@media(min-width:540px){
  body{ padding:22px; }
  #wx-app{ height:min(calc(100dvh - 44px), 920px); max-width:390px; border-radius:22px; overflow:hidden; box-shadow:0 26px 80px rgba(0,0,0,.6); border:1px solid rgba(255,255,255,.07); }   /* 桌面手机框收窄到真机宽(390，原 460 偏宽致卡片/整页在显示器上发肥)；手机端(<540)仍按 460 满屏不变 */
}
/* toast */
#wx-toast{ position:absolute; top:calc(92px + env(safe-area-inset-top,0px)); left:50%; transform:translateX(-50%); z-index:140; display:flex; flex-direction:column; gap:7px; width:max-content; max-width:calc(100% - 28px); align-items:center; pointer-events:none; }
#wx-app.wx-sa-hide #wx-toast{ top:calc(62px + env(safe-area-inset-top,0px)); }
#wx-toast.wx-toast-body{ position:fixed; top:calc(14px + env(safe-area-inset-top,0px)); max-width:calc(100vw - 28px); }
.wx-toast-i{ display:flex; align-items:center; gap:9px; max-width:100%; box-sizing:border-box; padding:9px 14px 9px 10px; border:1px solid rgba(255,255,255,.10); border-radius:999px; background:rgba(24,24,28,.88); -webkit-backdrop-filter:blur(16px) saturate(1.15); backdrop-filter:blur(16px) saturate(1.15); box-shadow:0 9px 26px rgba(0,0,0,.24); color:#fff; font-size:12.5px; line-height:1.35; opacity:0; transform:translateY(-7px) scale(.98); transition:opacity .22s,transform .22s; }
.wx-toast-i.show{ opacity:1; transform:none; }
.wx-toast-i.out{ opacity:0; transform:translateY(-5px) scale(.98); }
.wx-toast-icon{ display:flex; align-items:center; justify-content:center; flex:0 0 19px; width:19px; height:19px; border-radius:50%; background:#9b9ba2; color:#fff; font-size:11px; font-weight:800; }
.wx-toast-i.err .wx-toast-icon{ background:var(--wx-red); }
.wx-toast-i.warn .wx-toast-icon{ background:#c99b48; }
.wx-toast-i.ok .wx-toast-icon{ background:#65b88b; }
.wx-toast-text{ min-width:0; overflow-wrap:anywhere; }
@media(prefers-reduced-motion:reduce){ .wx-toast-i{ transition:none; } }
/* 设置齿轮（存档页右上） */
#wx-gear{ position:absolute; right:46px; top:18px; cursor:pointer; font-size:15px; color:var(--wx-blue); }

/* ===== 图片放大查看（lightbox）：点头像/照片全屏放大 ===== */
/* ⚠️ 关闭后必须 visibility:hidden + pointer-events:none：否则这层全屏 fixed 盖板虽 opacity:0 看不见，
   却仍拦截所有点击、且顶着 cursor:zoom-out 放大镜光标 → 关掉大图后点哪都没反应（#4 踩过的坑）。
   visibility 用 0s .18s 延迟，等 opacity 淡出动画跑完再隐藏，保留淡出观感。 */
#wx-lightbox{ position:fixed; inset:0; z-index:100001; background:rgba(0,0,0,.93); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .18s, visibility 0s linear .18s; cursor:zoom-out; }
#wx-lightbox.show{ opacity:1; visibility:visible; pointer-events:auto; transition:opacity .18s; }
#wx-lightbox .wx-lb-stage{ position:absolute; inset:max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom)); display:flex; align-items:center; justify-content:center; pointer-events:none; }
#wx-lightbox.gallery .wx-lb-stage{ bottom:calc(88px + env(safe-area-inset-bottom)); }
#wx-lightbox .wx-lb-media{ display:block; width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; border-radius:2px; box-shadow:0 8px 40px rgba(0,0,0,.6); pointer-events:auto; cursor:zoom-out; touch-action:pan-y; }
#wx-lightbox .wx-lb-close{ position:absolute; top:calc(12px + env(safe-area-inset-top)); right:14px; z-index:5; width:44px; height:44px; border:1px solid rgba(255,255,255,.14); border-radius:50%; color:#fff; background:rgba(255,255,255,.12); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); font-size:15px; cursor:pointer; }
#wx-lightbox .wx-lb-arrow{ position:absolute; top:50%; z-index:5; width:44px; height:44px; margin-top:-22px; border:1px solid rgba(255,255,255,.12); border-radius:50%; color:#fff; background:rgba(255,255,255,.10); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); font-size:24px; font-weight:300; cursor:pointer; }
#wx-lightbox .wx-lb-arrow.prev{ left:10px; } #wx-lightbox .wx-lb-arrow.next{ right:10px; }
#wx-lightbox .wx-lb-count{ position:absolute; top:calc(23px + env(safe-area-inset-top)); left:18px; color:rgba(255,255,255,.58); font-size:12px; letter-spacing:1px; font-variant-numeric:tabular-nums; cursor:default; }
#wx-lightbox .wx-lb-foot{ position:absolute; left:0; right:0; bottom:0; z-index:4; min-height:76px; padding:12px 18px calc(14px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:10px; background:linear-gradient(transparent,rgba(5,5,7,.78)); cursor:default; }
#wx-lightbox .wx-lb-dots{ display:flex; gap:6px; min-height:5px; }
#wx-lightbox .wx-lb-dots i{ width:5px; height:5px; border-radius:99px; background:rgba(255,255,255,.32); transition:width .2s,background .2s; }
#wx-lightbox .wx-lb-dots i.on{ width:15px; background:#fff; }
#wx-lightbox .wx-lb-pick{ min-width:132px; height:44px; padding:0 22px; border-radius:999px; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.13); color:#fff; font-size:13.5px; font-weight:500; cursor:pointer; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); transition:transform .18s,background .18s,color .18s; }
#wx-lightbox .wx-lb-pick.on{ background:#fff; color:#141414; border-color:#fff; font-weight:600; animation:wxlb-check .18s cubic-bezier(.34,1.56,.64,1); }
@keyframes wxlb-check{ 50%{ transform:scale(1.07) } }
#wx-lightbox .wx-lb-media.switch{ animation:wxlb-switch .18s ease both; }
@keyframes wxlb-switch{ from{ opacity:0; transform:translateX(22px) } to{ opacity:1; transform:none } }
.wx-lb-fly{ position:fixed; z-index:100002; object-fit:cover; object-position:center top; pointer-events:none; box-shadow:0 8px 40px rgba(0,0,0,.55); }
#wx-lightbox button:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
/* 生成照片的「重新生成 / 删除」操作条：悬浮在底部居中 */
#wx-lightbox .wx-lb-actions{ position:absolute; left:0; right:0; bottom:max(24px, env(safe-area-inset-bottom)); display:flex; gap:12px; justify-content:center; cursor:default; z-index:2; }
#wx-lightbox .wx-lb-btn{ -webkit-appearance:none; appearance:none; border:none; cursor:pointer; font-size:14px; color:#fff; background:rgba(255,255,255,.18); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); padding:10px 18px; border-radius:22px; transition:transform .12s, background .15s; display:inline-flex; align-items:center; gap:6px; }
#wx-lightbox .wx-lb-btn:active{ transform:scale(.92); }
#wx-lightbox .wx-lb-btn:hover{ background:rgba(255,255,255,.28); }
#wx-lightbox .wx-lb-del{ background:rgba(250,82,82,.28); }
#wx-lightbox .wx-lb-del:hover{ background:rgba(250,82,82,.46); }
/* 可放大的真实照片给出 zoom 光标提示 */
.wx-pf-av, .wx-mo-photo img, .wx-mo-av{ cursor:zoom-in; }

/* ===== #2 拟真动效合集 ===== */
/* 按钮按压回弹（发送 / 💡 / ＋ / 发表 / 导演执行）*/
#wx-send, .wx-plus-btn, #wx-mo-send, #wx-dir-go{ transition:transform .12s ease, opacity .2s, background .15s; }
#wx-send:not(:disabled):active, .wx-plus-btn:active, #wx-mo-send:active, #wx-dir-go:not(:disabled):active{ transform:scale(.9); }
/* 页面切换过渡（仅真正切视图时整页轻滑入）*/
#wx-screen.wx-vtrans > *{ animation:wxView .26s cubic-bezier(.22,1,.36,1) both; }
/* 底部 TabBar 切 tab 时保持不动（只让内容区滑入；home 横条已是 chrome 层、天然不在动画范围内）*/
#wx-screen.wx-vtrans > .wx-tabbar{ animation:none; }
@keyframes wxView{ from{ opacity:0; transform:translateX(10px); } to{ opacity:1; transform:none; } }
/* 放大图弹入 */
#wx-lightbox:not(.gallery) .wx-lb-media{ animation:wxLbZoom .24s cubic-bezier(.22,1,.36,1); }
@keyframes wxLbZoom{ from{ opacity:.3; transform:scale(.85); } to{ opacity:1; transform:none; } }
/* 朋友圈点赞心跳 + 操作按压 */
.wx-mo-like.wx-pop{ animation:wxHeart .45s ease; }
@keyframes wxHeart{ 0%{ transform:scale(1); } 28%{ transform:scale(1.45); } 50%{ transform:scale(.88); } 72%{ transform:scale(1.18); } 100%{ transform:scale(1); } }
.wx-mo-ops b{ transition:transform .12s; } .wx-mo-ops b:active{ transform:scale(.86); }
/* 语音条均衡器小跳条 */
.wx-eq{ display:inline-flex; align-items:flex-end; gap:2px; height:13px; margin-right:6px; vertical-align:middle; }
.wx-eq i{ width:3px; height:4px; background:#6aa0e0; border-radius:1.5px; animation:wxEq .9s ease-in-out infinite; }
.wx-eq i:nth-child(2){ animation-delay:.18s; } .wx-eq i:nth-child(3){ animation-delay:.36s; } .wx-eq i:nth-child(4){ animation-delay:.54s; }
@keyframes wxEq{ 0%,100%{ height:4px; } 50%{ height:12px; } }
/* 生图加载：骨架微光扫光 */
.wx-gen-loading .wx-img-ph{ position:relative; overflow:hidden; }
.wx-gen-loading .wx-img-ph::after{ content:''; position:absolute; inset:0; background:linear-gradient(110deg,transparent 28%,rgba(255,255,255,.5) 50%,transparent 72%); transform:translateX(-100%); animation:wxShimmer 1.3s infinite; }
@keyframes wxShimmer{ to{ transform:translateX(100%); } }

/* ===== #1 红包 / 转账：发送面板 + 输入弹层 + 收款回执 ===== */
/* 输入栏 ＋ 按钮（02g：输入栏左侧幽灵 ＋；托盘/回复建议浮层开着时变深色 ✕ 圆钮）*/
.wx-plus-btn{ background:rgba(120,120,130,.08); border:none; border-radius:50%; width:36px; height:36px; min-width:36px; cursor:pointer; flex:0 0 auto; padding:0; color:#55555c; display:flex; align-items:center; justify-content:center; margin-bottom:3px; transition:transform .2s ease, background .18s, color .18s; }   /* 一体成型：36px浅灰圆+细线SVG与输入胶囊同质感；margin-bottom=光学对中42px胶囊；开面板时沿用下行 rotate45(SVG十字转✕) */
#wx-app .wx-plus-panel.show ~ .wx-inputbar .wx-plus-btn,
#wx-app .wx-suggest-pop ~ .wx-inputbar .wx-plus-btn{ transform:rotate(45deg); background:#161618; color:#fff; opacity:1; }   /* ＋ 旋 45°＝✕、填成深色圆钮（对齐 02g / 02g→ 关闭态）*/
/* ＋ 工具托盘（02g · 加号 · 工具托盘）：浮于输入栏上方的白卡，四瓷砖 转账 / 图片 / 场景描述 / 回复建议（回复建议深色高亮·点簇）*/
.wx-plus-panel{ display:none; gap:2px; margin:0 14px 10px; padding:10px 4px; background:#fff; border:none; border-radius:26px; box-shadow:0 14px 38px rgba(20,20,30,.16); justify-content:space-around; }
.wx-plus-panel.show{ display:flex; animation:wxin .2s ease both; }
.wx-plus-item{ display:flex; flex-direction:column; align-items:center; gap:9px; cursor:pointer; flex:1; max-width:80px; padding:8px 0; }
.wx-plus-ic{ width:48px; height:48px; border-radius:16px; background:rgba(120,120,130,.09); color:#26262b; display:flex; align-items:center; justify-content:center; transition:transform .12s; }
.wx-plus-ic svg{ width:23px; height:23px; display:block; }
.wx-plus-item:active .wx-plus-ic{ transform:scale(.92); }
.wx-plus-lb{ font-size:12px; color:#56565d; }
.wx-plus-hl .wx-plus-ic{ background:#161618; color:#fff; box-shadow:0 8px 20px rgba(20,20,30,.22); }   /* 回复建议：深色高亮瓷砖 */
.wx-plus-hl .wx-plus-ic .genie-dots{ font-size:22px; }
.wx-plus-hl .wx-plus-lb{ color:#161618; font-weight:600; }
/* 我方红包/转账气泡靠右（沿用 wx-rp/wx-tf 配色）*/
.wxm-u-rich{ align-items:flex-start; }
/* 我发出的「真实照片」（文字表述）→ 靠右照片卡：灰头 + 描述（对方当真照接收） */
#wx-app .wx-sent-photo{ display:flex; flex-direction:column; max-width:74%; border-radius:16px 16px 7px 16px; overflow:hidden; background:#fff; box-shadow:0 4px 14px rgba(20,20,30,.12); }
#wx-app .wx-sent-photo-ic{ display:flex; align-items:center; gap:6px; padding:9px 13px; background:linear-gradient(135deg,#9aa0a8,#6f6f78); color:#fff; font-size:12px; font-weight:600; letter-spacing:.5px; }
#wx-app .wx-sent-photo-ic svg{ flex:none; }
#wx-app .wx-sent-photo-tx{ padding:10px 13px 12px; font-size:13.5px; line-height:1.5; color:#33333a; }
/* 落地方案-22：玩家发出的真·上传照片（靠右真图气泡，点击放大） */
#wx-app .wx-sent-img{ max-width:62%; border-radius:16px 16px 7px 16px; overflow:hidden; background:#fff; box-shadow:0 4px 14px rgba(20,20,30,.12); }
#wx-app .wx-sent-img img{ display:block; width:100%; max-height:360px; object-fit:cover; cursor:zoom-in; }
#wx-app .wx-sent-img-cap{ padding:8px 12px 10px; font-size:13px; line-height:1.5; color:#33333a; }
/* 可点的红包/转账 + 已领取置灰角标 */
.wx-rp, .wx-tf{ position:relative; }
.wx-money-clickable{ cursor:pointer; }
.wx-money-got{ opacity:.62; }
.wx-money-tag{ position:absolute; right:8px; bottom:6px; font-size:10px; color:#fff; background:rgba(0,0,0,.22); padding:1px 6px; border-radius:7px; }
/* 遮罩（收款回执 / 发钱弹层共用）*/
.wx-money-mask{ position:absolute; inset:0; z-index:100002; background:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .2s, visibility 0s linear .2s; padding:24px; }   /* absolute+挂 #wx-app（原 fixed 挂 body）：桌面手机框下遮罩/弹层留在框内 */
.wx-money-mask.show{ opacity:1; visibility:visible; pointer-events:auto; transition:opacity .2s; }
/* 收款回执卡（开包动画）*/
.wx-money-card{ width:280px; max-width:86vw; border-radius:16px; padding:30px 22px 22px; text-align:center; color:#fff; background:linear-gradient(170deg,#f6b352,#ee7d3a); box-shadow:0 18px 50px rgba(0,0,0,.4); transform:scale(.82); opacity:0; }
.wx-money-card.tf{ background:linear-gradient(170deg,#f7b53b,#f5912a); }
.wx-money-mask.show .wx-money-card{ animation:wxMoneyPop .44s cubic-bezier(.2,1.25,.4,1) forwards; }
@keyframes wxMoneyPop{ 0%{ transform:scale(.82) rotateX(34deg); opacity:0; } 62%{ transform:scale(1.04) rotateX(0); opacity:1; } 100%{ transform:scale(1); opacity:1; } }
.wx-money-av{ width:48px; height:48px; border-radius:8px; margin:0 auto 10px; display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:600; color:#fff; background-size:cover; background-position:center; box-shadow:0 2px 8px rgba(0,0,0,.22); }
.wx-money-from{ font-size:15px; opacity:.95; }
.wx-money-note{ font-size:13px; opacity:.86; margin-top:8px; }
.wx-money-amt{ font-size:38px; font-weight:700; margin:14px 0 6px; letter-spacing:1px; }
.wx-money-tip{ font-size:12px; opacity:.82; }
.wx-money-close{ font-size:11px; opacity:.6; margin-top:16px; }
/* 发钱输入弹层 */
.wx-sheet{ width:300px; max-width:88vw; background:#fff; border-radius:14px; padding:20px; transform:translateY(16px) scale(.97); opacity:0; }
.wx-money-mask.show .wx-sheet{ animation:wxSheetIn .26s ease forwards; }
@keyframes wxSheetIn{ to{ transform:none; opacity:1; } }
.wx-sheet-hd{ font-size:17px; font-weight:600; color:#222; text-align:center; margin-bottom:4px; }
.wx-sheet-lb{ display:block; font-size:12px; color:#999; margin:13px 0 5px; }
.wx-sheet-in{ width:100%; border:1px solid #ddd; border-radius:8px; padding:10px 12px; font-size:15px; outline:none; font-family:inherit; box-sizing:border-box; }
.wx-sheet-in:focus{ border-color:#f5a623; }
.wx-sheet-bal{ font-size:12px; color:#b07d2a; margin-top:13px; }
.wx-sheet-btns{ display:flex; gap:10px; margin-top:16px; }
.wx-sheet-cancel, .wx-sheet-go{ flex:1; border:none; border-radius:8px; padding:11px; font-size:15px; cursor:pointer; transition:transform .12s; }
.wx-sheet-cancel{ background:var(--wx-line-faint); color:var(--wx-blue); }
.wx-sheet-go{ background:linear-gradient(135deg,#f6b352,#ee7d3a); color:#fff; font-weight:600; }
.wx-sheet-go:active, .wx-sheet-cancel:active{ transform:scale(.97); }

/* ＋ 面板·场景描述 / 照片 编辑卡（Genie 02g/02h）—— 底部弹层，复用 wx-money-mask 的 .show 显隐 */
.wx-cps-mask{ align-items:flex-end; justify-content:center; padding:0; }
.wx-cps{ width:100%; max-width:520px; background:#fff; border-radius:30px 30px 0 0; box-shadow:0 -18px 50px rgba(20,20,30,.22); padding:14px 22px calc(26px + env(safe-area-inset-bottom,0px)); transform:translateY(100%); transition:transform .28s cubic-bezier(.22,1,.36,1); }
.wx-cps-mask.show .wx-cps{ transform:none; }
.wx-cps-grip{ width:38px; height:4px; border-radius:999px; background:rgba(0,0,0,.14); margin:0 auto 16px; }
.wx-cps-hd{ font-family:var(--font-serif); font-size:23px; color:#141414; letter-spacing:-.3px; line-height:1; margin-bottom:14px; }
.wx-cps-tx{ width:100%; box-sizing:border-box; min-height:120px; resize:none; border:none; outline:none; background:rgba(120,120,130,.08); border-radius:20px; padding:15px 16px; font-size:15px; line-height:1.6; color:#1c1c20; font-family:inherit; }
.wx-cps-tx::placeholder{ color:#a6a6ac; }
.wx-cps-album{ display:flex; align-items:center; gap:9px; margin-top:12px; padding:12px 15px; border-radius:16px; border:1px dashed rgba(0,0,0,.16); color:#76767d; font-size:13px; cursor:pointer; }
.wx-cps-album svg{ flex:none; color:#9a9aa0; }
.wx-cps-soon{ margin-left:auto; font-size:11px; color:#b6b6bc; }
/* 落地方案-22：照片卡内已选图预览 */
.wx-cps-thumb{ position:relative; margin-top:10px; border-radius:14px; overflow:hidden; max-width:200px; }
.wx-cps-thumb img{ display:block; width:100%; max-height:220px; object-fit:cover; }
.wx-cps-thumb-x{ position:absolute; top:6px; right:6px; width:24px; height:24px; border:none; border-radius:50%; background:rgba(0,0,0,.5); color:#fff; font-size:13px; line-height:1; cursor:pointer; }
.wx-cps-btns{ display:flex; align-items:center; gap:12px; margin-top:18px; }
.wx-cps-genimg{ flex:none; display:flex; align-items:center; gap:7px; height:50px; padding:0 18px; border:none; border-radius:999px; background:rgba(120,120,130,.1); color:#45454a; font-size:13.5px; font-weight:500; cursor:pointer; font-family:inherit; transition:transform .12s; }
.wx-cps-go{ flex:1; height:50px; border:none; border-radius:999px; background:#141414; color:#fff; font-size:14.5px; font-weight:600; cursor:pointer; font-family:inherit; transition:transform .12s; }
.wx-cps-genimg:active, .wx-cps-go:active{ transform:scale(.97); }
/* 落地方案-22 P2：发图一次性同意层文案 + 上传关闭时的占位行 + 同意层次按钮 */
.wx-imgcs-tx{ margin-top:6px; font-size:13.5px; line-height:1.6; color:#55555c; }
.wx-imgcs-tx b{ color:#222; }
.wx-cps-go.ghost{ flex:none; padding:0 22px; background:rgba(120,120,130,.1); color:#45454a; font-weight:500; }
.wx-cps-album-off{ cursor:default; opacity:.7; border-style:dashed; }

/* ===== #1 AI 照片相册（聊天页顶栏「相册」进入）===== */
.wx-album{ flex:1; overflow-y:auto; background:var(--wx-bg); padding:3px; }
.wx-album-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:3px; }
.wx-album-cell{ position:relative; aspect-ratio:1/1; background:#dcdcdc; overflow:hidden; cursor:zoom-in; border-radius:var(--wx-r-md); animation:wxin .26s ease both; }
.wx-album-cell img{ width:100%; height:100%; object-fit:cover; display:block; }
.wx-album-cell:active{ opacity:.82; }
/* ⭐Genie 02d 聊天相册：衬线标题头 + 日期分组 3 列网格(gap4/radius7) */
.wx-alb-head{ display:flex; align-items:center; gap:14px; padding:8px 22px 14px; background:var(--wx-bg); }
.wx-alb-back{ width:38px; height:38px; min-width:38px; border-radius:50%; background:rgba(120,120,130,.12); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.wx-alb-back svg{ display:block; }
.wx-alb-ttl{ flex:1; min-width:0; }
.wx-alb-name{ font-family:var(--font-serif); font-size:24px; color:#141414; letter-spacing:-.3px; line-height:1; }
.wx-alb-sub{ font-size:12px; color:#9a9aa0; margin-top:3px; }
.wx-alb-sel{ font-size:13.5px; color:#56565d; font-weight:500; cursor:pointer; flex:0 0 auto; }
.wx-album.wx-alb-body{ padding:0 16px 16px; }
.wx-alb-sec{ font-size:11.5px; letter-spacing:.6px; color:#8a8a90; font-weight:600; padding:16px 4px 8px; }
.wx-alb-body .wx-alb-sec:first-child{ padding-top:4px; }
.wx-alb-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:4px; }
.wx-alb-grid .wx-album-cell{ border-radius:7px; }

/* ===== 后台来消息·顶部横幅通知（切走后回复送达即提醒，点开进会话）===== */
/* ⭐Genie 通知下拉卡：纯白圆角卡 + 圆头像 + 深字 + 柔下沉（去深灰毛玻璃，简报§11） */
#wx-notif{ position:absolute; top:16px; left:14px; right:14px; z-index:100003; display:flex; align-items:center; gap:12px; background:#fff; color:var(--wx-t1); border-radius:26px; padding:13px 16px; box-shadow:0 16px 44px rgba(0,0,0,.16); cursor:pointer; transform:translateY(-165%); opacity:0; transition:transform .42s var(--ease), opacity .32s; }   /* ⭐Genie frame04：距顶/左右留更足气、纯白柔投影、从顶柔和下沉 */
#wx-notif.show{ transform:none; opacity:1; }
#wx-notif:active{ transform:scale(.98); }
.wx-notif-av{ width:42px; height:42px; min-width:42px; border-radius:50%; background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center; color:#fff; font-size:17px; font-weight:600; overflow:hidden; }
.wx-notif-tx{ min-width:0; flex:1; }
.wx-notif-nm{ font-size:15px; font-weight:600; line-height:1.2; color:var(--wx-t1); }
.wx-notif-ms{ font-size:13px; color:var(--wx-t2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:3px; }

/* ===== 群聊信息 / 成员页（点群 ⋯→群聊信息）===== */
.wx-gi{ flex:1; overflow-y:auto; background:var(--wx-bg); }
.wx-gi-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:15px 8px; background:#fff; padding:18px 14px 16px; margin:10px 10px 0; border-radius:16px; }
.wx-gi-cell{ display:flex; flex-direction:column; align-items:center; gap:5px; cursor:pointer; }
.wx-gi-av{ width:46px; height:46px; border-radius:10px; background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center; color:#fff; font-size:18px; font-weight:600; overflow:hidden; }
.wx-gi-cell:active .wx-gi-av{ opacity:.8; }
.wx-gi-nm{ font-size:11px; color:var(--wx-t2); max-width:56px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:center; }
.wx-gi-block{ background:#fff; margin:10px 10px 0; padding:0 16px; border-radius:16px; }
.wx-gi-row{ display:flex; justify-content:space-between; gap:12px; padding:14px 0; border-bottom:1px solid var(--wx-line-faint); font-size:15px; }
.wx-gi-row:last-child{ border-bottom:none; }
.wx-gi-k{ color:#222; flex:0 0 auto; }
.wx-gi-v{ color:var(--wx-t-soft); text-align:right; word-break:break-word; }

/* 长按消息菜单（复制/引用/多选/删除）：Genie 白卡（旧暗色 tooltip 退役）——横排图标+短标签，删除项语义红 */
.wx-msgmenu{ position:fixed; z-index:9999; background:var(--wx-card); border-radius:16px; box-shadow:0 18px 48px rgba(20,20,30,.22); display:flex; gap:2px; padding:6px; opacity:0; transform:scale(.92); transform-origin:center bottom; transition:opacity .14s var(--ease), transform .14s var(--ease); }
.wx-msgmenu.show{ opacity:1; transform:scale(1); }
.wx-msgmenu-item{ display:flex; flex-direction:column; align-items:center; gap:5px; min-width:54px; padding:9px 10px 8px; border-radius:11px; color:var(--wx-t1); font-size:11px; white-space:nowrap; cursor:pointer; user-select:none; transition:background var(--dur-fast) var(--ease); }
.wx-msgmenu-item:active{ background:var(--wx-press); }
.wx-msgmenu-item.danger{ color:var(--wx-red); }
.wx-mm-ic{ display:flex; }
.wx-mm-ic svg{ width:20px; height:20px; display:block; }
.wx-mm-t{ line-height:1; }
/* 输入区上方的引用条 */
.wx-quotebar{ display:flex; align-items:center; gap:8px; padding:7px 12px; background:var(--wx-bg); border-top:1px solid #e2e2e2; }
.wx-quotebar-tx{ flex:1; min-width:0; font-size:12.5px; color:#666; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; border-left:2px solid #b3b3b3; padding-left:8px; }
.wx-quotebar-x{ flex:none; width:22px; height:22px; line-height:22px; text-align:center; color:#999; cursor:pointer; font-size:13px; }
/* 输入区上方的「建议回复」候选（速赢2）：点 💡 弹出 3 条不同语气 */
.wx-suggest{ background:var(--wx-bg); border-top:1px solid #e2e2e2; padding:8px 10px; display:flex; flex-direction:column; gap:7px; }
.wx-suggest-head{ font-size:12.5px; color:var(--wx-t2); display:flex; align-items:center; }
.wx-suggest-empty{ color:#b06a3a; }
.wx-suggest-list{ display:flex; flex-direction:column; gap:7px; }
.wx-sug{ display:flex; align-items:center; gap:8px; width:100%; text-align:left; background:#fff; border:1px solid #e0e0e0; border-radius:9px; padding:9px 11px; font-size:14px; line-height:1.45; color:#1a1a1a; cursor:pointer; transition:transform .1s ease, background .15s, border-color .15s; }
.wx-sug:active{ transform:scale(.985); background:#f4f4f6; }
.wx-sug-tone{ flex:0 0 auto; font-size:11px; color:var(--wx-blue); background:#eeebf8; border-radius:5px; padding:2px 6px; line-height:1.3; white-space:nowrap; }
.wx-sug-tx{ flex:1; min-width:0; }
/* 回复建议浮层（02g→ · 点回复建议 · 三句浮层）：白卡悬浮于输入栏上方 —— .wx-suggest-pop 把上面那条灰条样式清掉，卡片走 .wx-sgc */
.wx-suggest-pop{ background:transparent; border-top:none; padding:0 14px 10px; gap:0; }
.wx-sgc{ background:#fff; border-radius:26px; box-shadow:0 16px 44px rgba(20,20,30,.18); overflow:hidden; }
.wx-sgc-hd{ display:flex; align-items:center; justify-content:space-between; padding:15px 18px 12px; }
.wx-sgc-hd-l{ display:flex; align-items:center; gap:10px; }
.wx-sgc-hd-l .genie-dots{ font-size:18px; color:#161618; }
.wx-sgc-hd-tt{ font-size:12.5px; color:#9a9aa0; letter-spacing:.3px; }
.wx-sgc-refresh{ display:flex; align-items:center; gap:6px; background:none; border:none; cursor:pointer; font-size:12.5px; color:#76767d; padding:2px; transition:opacity .15s; }
.wx-sgc-refresh svg{ width:14px; height:14px; }
.wx-sgc-refresh:active{ opacity:.55; }
.wx-sgc-list{ display:flex; flex-direction:column; }
.wx-sgc-row{ display:flex; align-items:center; gap:13px; width:100%; text-align:left; background:none; border:none; border-top:1px solid rgba(0,0,0,.06); padding:15px 18px; cursor:pointer; transition:background .15s; }
.wx-sgc-row:active{ background:rgba(0,0,0,.035); }
.wx-sgc-tone{ flex:0 0 auto; width:30px; text-align:center; font-family:var(--font-serif); font-style:italic; font-size:13px; color:#9a9aa0; }
.wx-sgc-tx{ flex:1; min-width:0; font-size:14px; line-height:1.4; color:#1c1c20; }
.wx-sgc-chev{ flex:0 0 auto; width:16px; height:16px; }
.wx-sgc-loading, .wx-sgc-empty{ padding:4px 18px 16px; font-size:13px; color:#9a9aa0; }
.wx-sgc-empty{ color:#b06a3a; }
/* 推进到下一幕 · 模型建议条（复用 .wx-sug 容器，右侧加可关 ✕） */
.wx-jump-row{ display:flex; align-items:stretch; gap:7px; }
.wx-jump-row .wx-jump-go{ flex:1; }
.wx-jump-go .wx-sug-tone{ color:#9a6a2f; background:#f6ecd9; }   /* 跳转用暖色调，与"语气"蓝标区分：这是动作不是回复候选 */
.wx-jump-x{ flex:0 0 auto; width:38px; background:#fff; border:1px solid #e0e0e0; border-radius:9px; color:var(--wx-t-soft); font-size:14px; line-height:1; cursor:pointer; padding:0; transition:transform .1s ease, background .15s; }
.wx-jump-x:active{ transform:scale(.92); background:#f4f4f6; }
/* 用户气泡内的引用块：发出气泡是浅灰底，引用文字要用【深灰】才看得清(原来是白字=灰底上糊掉) */
.wxm-ub-quote{ font-size:12px; color:#56565d; border-left:2px solid #9c9ca4; padding-left:7px; margin-bottom:4px; line-height:1.35; white-space:normal; word-break:break-word; }

/* ============ 里程碑仪式（轴2：关系跨阶分级演出）============ */
/* 轻 · 绸光气泡（inline，2C-2）：像 wx-sys 一条，但有一道柔光扫过 */
.wx-mi-chip{ align-self:center; margin:9px auto; max-width:86%; text-align:center; }
.wx-mi-chip-in{ position:relative; display:inline-block; overflow:hidden; font-size:12.5px; letter-spacing:.6px; color:var(--wx-t2);
  background:rgba(120,120,130,.10); border:1px solid rgba(0,0,0,.05); border-radius:6px; padding:5px 15px; }   /* ⭐Genie 收尾：daily 里程碑印记 chip 玫粉→中性灰 */
.wx-mi-chip-in::after{ content:''; position:absolute; top:0; left:-70%; width:55%; height:100%; transform:skewX(-22deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent); animation:wxMiSweep 1.05s ease .3s both; }
@keyframes wxMiSweep{ from{left:-70%} to{left:160%} }

/* 中/重 · 覆盖屏仪式卡 */
.wx-mi-ov{ position:absolute; inset:0; z-index:200; display:flex; flex-direction:column; align-items:center; justify-content:center;
  overflow:hidden; cursor:pointer; animation:wxMiFade .5s ease both; }
.wx-mi-ov.wx-mi-out{ animation:wxMiFadeOut .46s ease both; }
@keyframes wxMiFade{ from{opacity:0} to{opacity:1} }
@keyframes wxMiFadeOut{ from{opacity:1} to{opacity:0; visibility:hidden} }
@keyframes wxMiUp{ from{opacity:0; transform:translateY(13px)} to{opacity:1; transform:none} }
@keyframes wxMiDraw{ from{transform:scaleX(0)} to{transform:scaleX(1)} }
.wx-mi-ov .wx-mi-stage{ font-weight:300; letter-spacing:10px; padding-left:10px; font-size:37px; line-height:1.25; }
.wx-mi-ov .wx-mi-lead{ font-size:11px; letter-spacing:6px; }
.wx-mi-ov .wx-mi-sub{ font-size:13px; letter-spacing:1.5px; margin-top:16px; }
.wx-mi-ov .wx-mi-ln{ width:44px; height:1px; margin:0 auto; }

/* M1 弥散柔光（情愫暗生 / 莫逆之交） */
.wx-mi-M1{ background:#241d33; }
.wx-mi-M1 .wx-mi-mesh{ position:absolute; inset:-25%; filter:blur(48px);
  background:radial-gradient(38% 38% at 28% 30%,#ff8fb4,transparent 70%),radial-gradient(42% 42% at 74% 36%,#b49cff,transparent 70%),radial-gradient(52% 52% at 50% 82%,#ffc59e,transparent 72%),#2c2444;
  animation:wxMiMesh 15s ease-in-out infinite; }
@keyframes wxMiMesh{ 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(2%,-2%) scale(1.08)} }
.wx-mi-M1 .wx-mi-c{ position:relative; z-index:2; text-align:center; color:#fff; padding:0 26px; }
.wx-mi-M1 .wx-mi-lead{ opacity:.82; animation:wxMiUp .8s ease .25s both; }
.wx-mi-M1 .wx-mi-stage{ margin:16px 0; text-shadow:0 3px 30px rgba(0,0,0,.28); animation:wxMiUp .9s ease .4s both; }
.wx-mi-M1 .wx-mi-ln{ background:rgba(255,255,255,.75); animation:wxMiDraw .8s ease .7s both; }
.wx-mi-M1 .wx-mi-sub{ opacity:.86; animation:wxMiUp .9s ease .85s both; }

/* T2 磁极 · 想靠近又退半步（暗潮涌动） */
.wx-mi-T2{ background:radial-gradient(120% 92% at 50% 42%,#2a1320,#110a12); }
.wx-mi-T2 .wx-mi-mp{ position:absolute; top:37%; left:50%; width:84px; height:84px; border-radius:50%; margin-left:-42px; filter:blur(12px); mix-blend-mode:screen; }
.wx-mi-T2 .wx-mi-mp.wx-a{ background:#ff6e8e; animation:wxMiMagA 2.6s ease-in-out infinite; }
.wx-mi-T2 .wx-mi-mp.wx-b{ background:#ffb06b; animation:wxMiMagB 2.6s ease-in-out infinite; }
.wx-mi-T2 .wx-mi-arc{ position:absolute; top:37%; left:50%; width:50px; height:2px; margin-left:-25px; margin-top:40px; filter:blur(.4px);
  background:linear-gradient(90deg,transparent,#ffd9b0,transparent); animation:wxMiArc 2.6s ease-in-out infinite; }
.wx-mi-T2 .wx-mi-c2{ position:absolute; top:57%; left:0; right:0; text-align:center; color:#f6e6ec; animation:wxMiUp 1s ease .4s both; }
.wx-mi-T2 .wx-mi-sub{ color:#caa0b0; }
@keyframes wxMiMagA{ 0%,100%{transform:translateX(-52px)} 42%{transform:translateX(-17px)} 58%{transform:translateX(-29px)} }
@keyframes wxMiMagB{ 0%,100%{transform:translateX(52px)} 42%{transform:translateX(17px)} 58%{transform:translateX(29px)} }
@keyframes wxMiArc{ 0%,38%,66%,100%{opacity:0} 44%,54%{opacity:.95} }

/* M4 双生光点 · 交叠成一（情根深种 / 情难自禁）—— 沿用 M1 光色，深一档 */
.wx-mi-M4{ background:radial-gradient(120% 90% at 50% 40%,#2a1f3e,#141019); }
.wx-mi-M4 .wx-mi-orb{ position:absolute; top:33%; left:50%; width:90px; height:90px; border-radius:50%; margin-left:-45px; filter:blur(12px); mix-blend-mode:screen; }
.wx-mi-M4 .wx-mi-orb.wx-a{ background:#ff8fb4; animation:wxMiOrbA 1.8s cubic-bezier(.4,0,.2,1) both; }
.wx-mi-M4 .wx-mi-orb.wx-b{ background:#ffcf8f; animation:wxMiOrbB 1.8s cubic-bezier(.4,0,.2,1) both; }
.wx-mi-M4 .wx-mi-bloom{ position:absolute; top:33%; left:50%; width:140px; height:140px; border-radius:50%; margin-left:-70px; margin-top:-25px;
  background:radial-gradient(circle,rgba(255,240,235,.95),transparent 68%); transform:scale(0); animation:wxMiBloom 1s ease 1.6s both; }
.wx-mi-M4 .wx-mi-c3{ position:absolute; top:56%; left:0; right:0; text-align:center; color:#f4eef3; padding:0 26px; animation:wxMiUp 1s ease 1.8s both; }
.wx-mi-M4 .wx-mi-sub{ color:#e7c2cf; }
@keyframes wxMiOrbA{ 0%{transform:translateX(-58px); opacity:.5} 60%{opacity:1} 100%{transform:translateX(-13px); opacity:.95} }
@keyframes wxMiOrbB{ 0%{transform:translateX(58px); opacity:.5} 60%{opacity:1} 100%{transform:translateX(13px); opacity:.95} }
@keyframes wxMiBloom{ 0%{transform:scale(0); opacity:0} 40%{opacity:1} 100%{transform:scale(1.1); opacity:.75} }

/* ============ 轴1 · 氛围旁白（好感变化时的极淡 in-world 微反馈，无数字）============ */
.wx-fx-narr{ align-self:center; text-align:center; max-width:90%; margin:5px auto; font-size:12px; font-style:italic;
  color:#a98ba0; letter-spacing:.3px; line-height:1.5; animation:wxFxNarrIn 1s ease both; }
@keyframes wxFxNarrIn{ from{opacity:0; transform:translateY(5px)} to{opacity:1; transform:none} }

/* ============ 轴3 · 资料页「关系历程」时间线 ============ */
.wx-pf-journey{ margin:16px 0 6px; }
.wx-pf-jr-h{ font-size:13px; color:var(--wx-t2); margin-bottom:12px; }
.wx-pf-jr-row{ display:flex; align-items:center; gap:10px; font-size:13px; color:#9aa0a8; margin-bottom:11px; position:relative; }
.wx-pf-jr-row:not(:last-child)::after{ content:''; position:absolute; left:5px; top:15px; width:1px; height:13px; background:#e4e6ea; }
.wx-pf-jr-dot{ width:11px; height:11px; border-radius:50%; background:#d2d6dc; flex:0 0 11px; box-sizing:border-box; border:2px solid #fff; box-shadow:0 0 0 1px #d2d6dc; }
.wx-pf-jr-st{ flex:1; }
.wx-pf-jr-when{ font-size:11px; color:#b6bbc2; }
.wx-pf-jr-row.now{ color:#9c4f6e; font-weight:600; }
.wx-pf-jr-row.now .wx-pf-jr-dot{ background:#d98aa0; box-shadow:0 0 0 1px #d98aa0, 0 0 0 4px rgba(217,138,160,.2); }
.wx-pf-jr-sub{ display:block; font-size:11px; color:#b6bbc2; margin-top:2px; letter-spacing:.2px; font-style:italic; }
.wx-pf-jr-row.now .wx-pf-jr-sub{ color:#bd8497; }

/* ============ 开场好友申请 · 到达感 & 里程碑级动效（spec3）============ */
/* 好友申请到达横幅：复用 #wx-notif 结构，沿用里程碑 wx-mi-M1 深紫调 + 一道极淡柔光扫过（签名元素，对齐 wxMiSweep 手法）*/
#wx-notif.wx-notif-friend{ background:#fff; }   /* ⭐Genie：去深紫，统一纯白卡，仅留「好友申请·」前缀区分 */
#wx-notif.wx-notif-friend .wx-notif-nm::before{ content:'好友申请 · '; opacity:.5; font-weight:400; }
#wx-notif.wx-notif-friend::after{ content:''; position:absolute; inset:0; border-radius:26px; overflow:hidden; pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(0,0,0,.04),transparent); transform:translateX(-100%);
  animation:wxFrSweep 1.1s var(--ease) .25s both; }
@keyframes wxFrSweep{ to{ transform:translateX(100%); } }

/* 新的朋友 红点脉冲（通讯录 tab dot + 新的朋友行 badge）— 慢呼吸、非闪烁 */
.wx-tabbar-dot, .wx-req-badge{ animation:wxReqPulse 2.4s ease-in-out infinite; }
@keyframes wxReqPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(250,81,81,.45); } 55%{ box-shadow:0 0 0 5px rgba(250,81,81,0); } }

/* 进入『新的朋友』页：申请条逐条上浮（沿用 wxMiUp 节奏）*/
.wx-req{ animation:wxMiUp .55s cubic-bezier(.2,1,.3,1) both; }
.wx-req:nth-child(2){ animation-delay:.06s; } .wx-req:nth-child(3){ animation-delay:.12s; }

/* 可选增强：通过时绿色 hairline 自左向右描出（沿用 wxMiDraw scaleX）— 需 acceptFriend 先给行加 class、延迟 ~600ms 再 renderApp，否则立即重渲吃掉动效；不做这层可不触发 */
.wx-req.wx-req-accepted{ position:relative; }
.wx-req.wx-req-accepted::after{ content:''; position:absolute; left:15px; right:15px; bottom:0; height:1.5px; transform-origin:left;
  background:linear-gradient(90deg,var(--wx-green),rgba(0,0,0,0)); transform:scaleX(0); animation:wxMiDraw .6s cubic-bezier(.2,1,.3,1) both; }

/* 首次开局轻引导条：克制、留白、中性 hairline、可点（不复用 wx-fail/wx-sys）；⭐Genie 收尾：玫瑰金→中性灰 */
.wx-onb-tip{ align-self:center; margin:12px auto; max-width:88%; text-align:center; cursor:pointer;
  font-size:12.5px; letter-spacing:.4px; color:var(--wx-t2); background:rgba(120,120,130,.10); border:1px solid rgba(0,0,0,.05); border-radius:8px;
  padding:8px 16px; animation:wxMiUp .7s cubic-bezier(.2,1,.3,1) .2s both; transition:background .2s; }
.wx-onb-tip:active{ background:rgba(120,120,130,.16); }

/* ============ 资料页·备注名编辑(Bug2：可改任意联系人备注名，displayName 优先用它) ============ */
.wx-pf-remark{ padding:11px 15px; }
.wx-pf-rm-row{ display:flex; align-items:center; gap:9px; }
.wx-pf-rm-k{ flex:0 0 auto; font-size:13px; color:#7a818c; }
.wx-pf-rm-input{ flex:1; min-width:0; border:none; background:#f4f5f7; border-radius:7px; padding:7px 10px; font-size:14px; color:#1a1a1a; }
.wx-pf-rm-input:focus{ outline:1px solid #d7c0c9; background:#fff; }
.wx-pf-rm-save{ flex:0 0 auto; border:none; background:var(--wx-green); color:#fff; border-radius:7px; padding:7px 15px; font-size:13px; cursor:pointer; transition:opacity .15s; }
.wx-pf-rm-save:active{ opacity:.8; }

/* 1对1私聊不显示对方昵称标签(仅群聊保留以区分发言人)(Bug3) */
.wx-msgs-dm .wx-nm{ display:none; }
/* ⭐对话页气泡头像改圆形（NPC .wx-av + 我 .wxm-ua）；会话列表 .wx-row-av 仍方圆，不受影响 */
#wx-app .wx-msgs .wx-av, #wx-app .wx-msgs .wxm-ua{ border-radius:50%; }
/* 私聊也不显示对方头像：两人对话靠左右对齐就分得清谁说话，每条挂头像太冗余(进资料走右上 ⋯ →「资料」，不靠点头像)；群聊保留头像区分发言人。打字气泡同在 dm 流里、一并去头像保持一致 */
.wx-msgs-dm .wx-av{ display:none; }
/* 对方头像基础显示；「同一发送者连续消息只【末条】带头像(组尾挂头像·Telegram 式；时间分隔截断连发段、其余 visibility:hidden 留空占位对齐)」由 JS groupDmAvatars 按发送者分组精调——纯 CSS 相邻选择器 .wx+.wx 跨不过中间插入的 .wx-timesep（隔一阵会冒时间标签，否则每段都重新出头像） */
.wx-msgs-dm .wx .wx-av{ display:flex; }

/* ⭐Genie P0-02 单聊：消息区留白对齐稿子(8/22)、对方头像缩到 28 贴气泡底、同组气泡 4px 堆叠、隐藏我方头像(右对齐自明) */
.wx-msgs-dm{ padding:8px 22px; }
.wx-msgs-dm > .wx, .wx-msgs-dm > .wxm-u{ margin:14px 0 0; }
.wx-msgs-dm > .wxm-u + .wxm-u{ margin-top:4px; }   /* 我方连发聚拢：相邻我方消息 4px 堆叠，与对方同组气泡(.wx 内 gap:4px)对称；时间分隔/对方消息插入即自然断组回 14px(2026-07-04 用户反馈"我方连发散得开") */
.wx-msgs-dm .wx{ display:flex; flex-direction:column; gap:4px; }
.wx-msgs-dm .wx-l{ align-items:flex-end; gap:10px; }
.wx-msgs-dm .wx .wx-av{ width:28px; height:28px; min-width:28px; flex:0 0 28px; font-size:13px; }
.wx-msgs-dm .wxm-ua{ display:none; }

/* ============ 时间跳转「快进」过场遮罩(jumpScene：盖聊天页 + 拦输入 + 时间流逝动效) ============ */
#wx-jump-overlay{ position:absolute; inset:0; z-index:60; display:flex; align-items:center; justify-content:center;
  background:rgba(20,16,28,.5); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  animation:wxJumpIn .45s cubic-bezier(.2,1,.3,1) both; }
@keyframes wxJumpIn{ from{ opacity:0 } to{ opacity:1 } }
#wx-jump-overlay.out{ animation:wxJumpOut .35s ease both; }
@keyframes wxJumpOut{ from{ opacity:1 } to{ opacity:0 } }
.wx-jump-card{ display:flex; flex-direction:column; align-items:center; gap:17px; color:#fff; padding:28px 40px; }
.wx-jump-clock{ position:relative; width:52px; height:52px; border-radius:50%; border:1.5px solid rgba(255,255,255,.65);
  animation:wxJumpClockIn .5s cubic-bezier(.2,1,.3,1) both; }
@keyframes wxJumpClockIn{ from{ transform:scale(.82); opacity:0 } to{ transform:scale(1); opacity:1 } }
.wx-jump-h,.wx-jump-m{ position:absolute; left:50%; bottom:50%; transform-origin:50% 100%; background:#fff; border-radius:2px; }
.wx-jump-h{ width:2.5px; height:13px; margin-left:-1.25px; opacity:.95; animation:wxJumpSpin 2.6s linear infinite; }
.wx-jump-m{ width:1.8px; height:19px; margin-left:-.9px; opacity:.8; animation:wxJumpSpin .85s linear infinite; }
.wx-jump-dot{ position:absolute; left:50%; top:50%; width:5px; height:5px; margin:-2.5px 0 0 -2.5px; background:#fff; border-radius:50%; }
@keyframes wxJumpSpin{ to{ transform:rotate(360deg) } }
.wx-jump-title{ font-size:15px; letter-spacing:2.5px; font-weight:500; animation:wxJumpFade .6s ease .15s both; }
.wx-jump-sub{ font-size:12.5px; opacity:.72; letter-spacing:.6px; max-width:230px; text-align:center; line-height:1.5; animation:wxJumpFade .6s ease .28s both; }
@keyframes wxJumpFade{ from{ opacity:0; transform:translateY(4px) } to{ opacity:1; transform:translateY(0) } }

/* ===== 故事进展（view='story'）：events/plans/关系历程 抬成玩家可见的全局故事页 ===== */
.wx-story-chip{ position:absolute; right:96px; top:50%; transform:translateY(-50%); font-size:12px; font-weight:500; color:var(--wx-blue); background:rgba(20,20,20,.08); border:1px solid rgba(20,20,20,.16); border-radius:99px; padding:3px 10px; cursor:pointer; user-select:none; line-height:1.3; }   /* right:96px=让开右侧两枚图标(搜索+＋共占~83px)；原 46px 是单图标时代的值，会盖住搜索图标并吃掉它的点击 */
.wx-story-chip:active{ background:rgba(20,20,20,.16); }
.wx-story-now{ position:absolute; right:14px; top:50%; transform:translateY(-50%); font-size:12px; font-weight:500; color:var(--wx-t2); background:var(--wx-line-faint); border-radius:99px; padding:3px 10px; line-height:1.3; }
.wx-story{ flex:1; min-height:0; overflow-y:auto; background:var(--wx-bg); padding:10px 12px 24px; }
.wx-story-sec{ background:#fff; border-radius:var(--wx-r-card); padding:12px 14px; margin-bottom:10px; }
.wx-story-sech{ font-size:13px; color:var(--wx-t2); margin-bottom:8px; display:flex; align-items:center; }
.wx-story-done{ margin-left:auto; font-size:11px; color:var(--wx-t3); font-weight:400; }
.wx-story-plan{ display:flex; align-items:center; gap:8px; font-size:13px; color:#333; padding:6px 0; cursor:pointer; }
.wx-story-plan-dot{ width:7px; height:7px; border-radius:50%; background:var(--wx-blue); flex:0 0 7px; }
.wx-story-plan-t{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wx-story-plan-who{ font-size:11px; color:var(--wx-t3); flex:none; max-width:40%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wx-story-more{ font-size:11px; color:var(--wx-t3); padding:4px 0 0 15px; }
.wx-story-day{ font-size:12px; font-weight:600; color:#999; margin:13px 0 3px; display:flex; align-items:center; gap:8px; }
.wx-story-sech + .wx-story-day{ margin-top:2px; }
.wx-story-day::after{ content:''; flex:1; border-top:1px solid #f0f0f0; }
.wx-story-it{ display:flex; align-items:flex-start; gap:8px; font-size:13px; line-height:1.55; color:#333; padding:5px 0; }
.wx-story-dot{ width:7px; height:7px; border-radius:50%; background:#c7c7c7; flex:0 0 7px; margin-top:6px; }
.wx-story-it.k-milestone .wx-story-dot{ background:#d98aa0; box-shadow:0 0 0 3px rgba(217,138,160,.16); }
.wx-story-it.k-milestone .wx-story-t{ color:#9c4f6e; }
.wx-story-it.k-plan .wx-story-dot{ background:var(--wx-blue); }
.wx-story-it.k-world .wx-story-dot{ background:#fa9d3b; }
.wx-story-it.k-friend .wx-story-dot{ background:var(--wx-green); }
.wx-story-it.heard{ opacity:.6; }
.wx-story-t{ flex:1; min-width:0; }
.wx-story-ph{ font-size:11px; color:#b6bbc2; flex:none; margin-top:3px; }
.wx-story-empty{ font-size:13px; color:var(--wx-t3); text-align:center; padding:18px 0; line-height:1.8; }
.wx-story-rel{ display:flex; align-items:center; gap:10px; padding:7px 0; cursor:pointer; }
.wx-story-rel .wx-row-av{ width:34px; height:34px; min-width:34px; font-size:15px; border-radius:6px; }
.wx-story-rel-n{ font-size:14px; color:#111; width:72px; flex:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wx-story-stage{ font-size:11px; padding:2px 8px; border-radius:99px; flex:none; }
.wx-story-bar{ flex:1; height:4px; border-radius:2px; background:#f0f0f0; overflow:hidden; }
.wx-story-bar b{ display:block; height:100%; border-radius:2px; }
/* ⭐Genie：关系带不用色，用灰度递进表深浅(冷=浅 → 热=深) */
.wx-story-rel.b-cold .wx-story-stage{ background:var(--wx-line-faint); color:#9a9aa0; }
.wx-story-rel.b-cold .wx-story-bar b{ background:#c2c2c8; }
.wx-story-rel.b-warm .wx-story-stage{ background:rgba(20,20,20,.06); color:#6a6a70; }
.wx-story-rel.b-warm .wx-story-bar b{ background:#8a8a90; }
.wx-story-rel.b-aff .wx-story-stage{ background:rgba(20,20,20,.08); color:#45454a; }
.wx-story-rel.b-aff .wx-story-bar b{ background:#56565d; }
.wx-story-rel.b-hot .wx-story-stage{ background:rgba(20,20,20,.1); color:#1c1c20; }
.wx-story-rel.b-hot .wx-story-bar b{ background:#141414; }

/* ===== 卡导入预览面板（落地方案-14）===== */
.wx-card-mask{ position:absolute; inset:0; background:rgba(0,0,0,.45); z-index:60; display:flex; align-items:flex-end; opacity:0; transition:opacity .2s ease; }
.wx-card-mask.show{ opacity:1; }
.wx-card-sheet{ width:100%; background:#fff; border-radius:16px 16px 0 0; padding:16px 16px calc(22px + env(safe-area-inset-bottom,0px)); transform:translateY(24px); transition:transform .22s cubic-bezier(.22,1,.36,1); }
.wx-card-mask.show .wx-card-sheet{ transform:translateY(0); }
.wx-card-head{ display:flex; align-items:flex-start; gap:12px; }
.wx-card-cover{ width:56px; height:56px; border-radius:10px; background-size:cover; background-position:center; flex:none; }
.wx-card-tt{ flex:1; min-width:0; }
.wx-card-tt b{ font-size:17px; }
.wx-card-spec{ font-size:10.5px; color:var(--wx-blue); background:rgba(20,20,20,.1); border-radius:4px; padding:1px 5px; margin-left:7px; vertical-align:2px; }
.wx-card-tags{ margin-top:4px; }
.wx-card-tags i{ font-style:normal; font-size:11px; color:var(--wx-t2); background:var(--wx-line-faint); border-radius:99px; padding:2px 8px; margin-right:5px; }
.wx-card-x{ color:var(--wx-t3); font-size:16px; padding:2px 6px; cursor:pointer; flex:none; }
.wx-card-desc{ font-size:13px; color:#555; line-height:1.6; margin:10px 0 6px; }
.wx-card-meta{ font-size:11px; color:#999; margin-bottom:12px; }
.wx-card-warn{ color:#d8862c; font-weight:500; }
.wx-card-row{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.wx-card-row label{ font-size:13px; color:#555; flex:none; min-width:64px; }
.wx-card-row input[type=text], .wx-card-row input:not([type]), .wx-card-row select{ flex:1; min-width:0; height:36px; border:1px solid #e3e3e3; border-radius:8px; padding:0 10px; font-size:13px; background:#fafafa; }
.wx-card-chk label{ display:flex; align-items:center; gap:7px; font-size:12.5px; color:#666; min-width:0; }
.wx-card-acts{ display:flex; gap:10px; margin-top:14px; }
.wx-card-acts button{ flex:1; height:42px; border:none; border-radius:10px; font-size:14px; background:var(--wx-line-faint); color:#333; cursor:pointer; }
.wx-card-acts button.primary{ background:var(--wx-green); color:#fff; font-weight:600; }
.wx-card-acts button:disabled{ opacity:.6; }

/* ===== A0 手机壳（落地方案-15）：全局 home 横条 + 桌面 + 设置 app ===== */
/* home 横条：chrome 第三层（状态栏/屏幕/横条），flex 兄弟不悬浮 → 和各页底栏零冲突。
   亮色页 #f7f7f7 与 tabbar/输入栏同色无缝；深色页（桌面）贴壁纸收尾色。.nohb=存档页/向导隐藏 */
#wx-homebar-g{ flex:0 0 auto; height:calc(22px + env(safe-area-inset-bottom,0px)); padding-bottom:env(safe-area-inset-bottom,0px); display:flex; align-items:center; justify-content:center; background:#f7f7f7; cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent; }   /* 全面屏：机壳吃掉底部安全区，真机 home 指示条不压 tabbar/输入栏 */
#wx-homebar-g i{ width:134px; height:5px; border-radius:3px; background:#111; transition:transform .16s, opacity .16s; }
#wx-homebar-g:active i{ transform:scaleX(.88); opacity:.7; }
#wx-app.nohb #wx-homebar-g{ display:none; }
/* glass 主题（桌面）：状态栏/横条贴壁纸首尾色，墨色前景——手机 chrome 与壁纸融为一体 */
#wx-app[data-theme=glass] #wx-statusbar{ background:var(--hm-bg); color:var(--hm-ink); }
#wx-app[data-theme=glass] #wx-homebar-g{ background:var(--hm-bg); }
#wx-app[data-theme=glass] #wx-homebar-g i{ background:rgba(20,20,20,.5); }

/* 桌面：方案E 新拟态——素色淡紫纯色画布（浮雕明暗双影需要纯色底），与状态栏/横条同色无缝 */
.wx-home{ flex:1; min-height:0; overflow:hidden; position:relative; display:flex; flex-direction:column; padding:26px 22px 14px; background:var(--hm-bg); }
.wx-home-clock{ margin-top:22px; text-align:center; position:relative; z-index:1; }
.wx-home-date{ font-size:11.5px; letter-spacing:1.5px; color:var(--hm-ink3); font-weight:600; margin-bottom:7px; }   /* ⭐Genie frame05：日期副标 */
.wx-home-time{ font-family:var(--font-serif); font-size:62px; font-weight:400; line-height:1; letter-spacing:0; color:var(--hm-ink); font-variant-numeric:tabular-nums; }   /* ⭐Genie：衬线大时钟(设计 frame05) */
.wx-home-owner{ margin-top:9px; font-size:12px; letter-spacing:.5px; color:var(--hm-ink3); }
/* 浮雕 widget：同色凸起卡（右下暗影+左上亮影），时段小砖同款小一号 */
.wx-home-widget{ margin:26px 2px 0; display:flex; align-items:center; gap:12px; padding:14px 17px; border-radius:22px; position:relative; z-index:1;
  background:var(--hm-bg);
  box-shadow:9px 9px 18px var(--hm-dk), -9px -9px 18px var(--hm-lt); }
.wx-hw-ic{ width:42px; height:42px; border-radius:13px; display:flex; align-items:center; justify-content:center; flex:0 0 auto;
  background:var(--hm-bg); box-shadow:4px 4px 8px var(--hm-dk), -4px -4px 8px var(--hm-lt); }
.wx-hw-ic svg{ width:24px; height:24px; display:block; }
.wx-hw-t b{ display:block; font-size:15px; font-weight:600; color:var(--hm-ink); letter-spacing:.3px; }
.wx-hw-t span{ display:block; font-size:12px; color:var(--hm-ink3); margin-top:2px; }
.wx-hw-r{ margin-left:auto; font-size:12px; line-height:1.7; color:var(--hm-ink2); letter-spacing:.3px; text-align:right; }
.wx-home-grid{ margin-top:40px; display:grid; grid-template-columns:repeat(4,1fr); gap:24px 8px; justify-items:center; position:relative; z-index:1; }
.wx-home-app{ width:100%; display:flex; flex-direction:column; align-items:center; gap:8px; cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent; }
/* 新拟态图标砖：同色凸起 + 墨色 currentColor 图形（出口 --hm-glyph）；按下翻成 inset 凹陷＝物理按钮手感 */
.wx-home-ic{ width:59px; height:59px; border-radius:17px; position:relative; display:flex; align-items:center; justify-content:center;
  background:var(--hm-bg); color:var(--hm-glyph);
  box-shadow:7px 7px 14px var(--hm-dk), -7px -7px 14px var(--hm-lt);
  transition:transform .14s, box-shadow .14s; }
.wx-home-app:active .wx-home-ic{ transform:scale(.97); box-shadow:inset 5px 5px 10px var(--hm-dk), inset -5px -5px 10px var(--hm-lt); }
.wx-home-ic svg{ width:32px; height:32px; display:block; position:relative; z-index:1; }
/* 全局美化阶段3：4 个系统 app 从单色浮雕砖→各自色调的精致图标（白 glyph + 同色软投影），与「世界 app=自身内容」区分 */
/* ⭐Genie：桌面 App 图标统一为中性磨砂软糖块 + 黑色单色字形（去紫/橙/灰渐变，颜色只来自内容） */
.wx-home-ic.ic-wechat,
.wx-home-ic.ic-photos,
.wx-home-ic.ic-story,
.wx-home-ic.ic-settings{ background:rgba(255,255,255,.72); color:var(--hm-glyph); box-shadow:0 6px 18px rgba(0,0,0,.08), inset 0 0 0 1px rgba(255,255,255,.55); }
.wx-home-app:active .wx-home-ic[class*=ic-]{ transform:scale(.95); box-shadow:0 4px 10px rgba(0,0,0,.16); filter:brightness(.97); }
.wx-home-lb{ font-size:11px; font-weight:500; color:var(--hm-glyph); opacity:.9; letter-spacing:.4px; }
.wx-home-bdg{ position:absolute; top:-7px; right:-8px; min-width:19px; height:19px; padding:0 5px; border-radius:10px; background:var(--wx-red); color:#fff; z-index:2;
  font-size:11px; font-weight:600; font-style:normal; display:flex; align-items:center; justify-content:center; border:1.5px solid rgba(255,255,255,.95); box-shadow:0 3px 8px rgba(229,57,80,.35); }
/* 落地方案-16/16.5：桌面「世界 app」图标混合链（封面/群像拼贴/她的脸+关系带环/题材封面/精修字块）+「＋新世界」入口；融入新拟态桌面 */
/* ⚠️ 不给 .wx-home-wic 加 overflow:hidden——会把未读角标 wx-home-bdg(外缘 top:-7px) 与关系带环 wx-wic-ring(外缘 inset:-3.5px) 裁掉；各「脸」靠自身 border-radius:inherit + overflow:hidden 裁圆角 */
.wx-home-wic .wx-wic-img{ position:absolute; inset:0; border-radius:inherit; background-size:cover; background-position:center; z-index:1; }
.wx-home-wic .wx-wic-col{ position:absolute; inset:0; border-radius:inherit; overflow:hidden; display:grid; gap:1.5px; background:rgba(255,255,255,.65); z-index:1; }
.wx-wic-col.n4{ grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; }
.wx-wic-col.n3{ grid-template-columns:1.45fr 1fr; grid-template-rows:1fr 1fr; }
.wx-wic-col.n3 i:first-child{ grid-row:1/3; }
.wx-wic-col i{ display:block; background-size:cover; background-position:center; }
.wx-wic-ring{ position:absolute; inset:-3.5px; border-radius:20.5px; border:2px solid; z-index:1; pointer-events:none; }
.wx-home-wic .wx-wic-svg{ position:absolute; inset:0; border-radius:inherit; overflow:hidden; z-index:1; }
.wx-wic-svg svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.wx-home-wic .wx-wic-glyph{ position:absolute; inset:0; border-radius:inherit; display:flex; align-items:center; justify-content:center; z-index:1;
  font-family:'Songti SC','STSong','Noto Serif SC',serif; font-size:24px; color:rgba(255,255,255,.93);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), inset 0 -10px 16px rgba(0,0,0,.2); }
.wx-home-sub{ font-size:11px; color:var(--hm-ink3); letter-spacing:.3px; margin-top:-4px; }
.wx-home-add .wx-home-ic{ opacity:.66; }
.wx-home-add .wx-home-lb{ opacity:.62; }
/* ⭐Genie 首页骨架（图二·宫格内容卡）：聊天大卡 + 软糖块 tile + 黑胶囊造人入口。两层结构保留（点聊天大卡才进微信） */
.wx-ghome{ flex:1; min-height:0; overflow-y:auto; position:relative; display:flex; flex-direction:column; padding:46px 24px 24px; background:var(--hm-bg); }
.wx-gh-head{ padding:0 4px 2px; }
.wx-gh-date{ font-size:11.5px; letter-spacing:1.6px; color:var(--hm-ink3); font-weight:600; }
.wx-gh-clock{ font-family:var(--font-serif); font-size:44px; font-weight:400; line-height:1.04; color:var(--hm-ink); margin-top:4px; font-variant-numeric:tabular-nums; }
.wx-gh-ampm{ font-family:var(--font-serif); font-size:18px; font-style:italic; color:var(--hm-ink3); margin-left:7px; letter-spacing:0; }
.wx-gh-grid{ margin-top:24px; display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.wx-gh-chat{ grid-row:1 / span 2; min-height:212px; border-radius:24px; background:rgba(120,120,130,.09); padding:18px; display:flex; flex-direction:column; justify-content:space-between; cursor:pointer; box-shadow:0 2px 12px rgba(0,0,0,.04); transition:transform .14s; }
.wx-gh-chat:active{ transform:scale(.97); }
.wx-gh-chat-top{ display:flex; align-items:flex-start; justify-content:space-between; }
.wx-gh-ic{ display:flex; align-items:center; justify-content:center; color:var(--hm-glyph); }
.wx-gh-chat .wx-gh-ic svg{ width:28px; height:28px; }
.wx-gh-chat-ttl{ font-family:var(--font-serif); font-size:22px; color:var(--wx-t1); line-height:1; }
.wx-gh-chat-prev{ font-size:12.5px; color:var(--wx-t2); margin-top:7px; line-height:1.4; max-height:2.8em; overflow:hidden; }
.wx-gh-chat-cap{ font-size:11px; color:var(--wx-t3); margin-top:8px; letter-spacing:.3px; }
.wx-gh-bdg{ min-width:20px; height:20px; padding:0 6px; border-radius:10px; background:var(--wx-t1); color:#fff; font-size:11.5px; font-weight:600; font-style:normal; display:flex; align-items:center; justify-content:center; }
.wx-gh-tile{ min-height:98px; border-radius:24px; background:rgba(120,120,130,.09); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; cursor:pointer; box-shadow:0 2px 12px rgba(0,0,0,.04); transition:transform .14s; }
.wx-gh-tile:active{ transform:scale(.96); }
.wx-gh-tile .wx-gh-ic svg{ width:25px; height:25px; }
.wx-gh-lb{ font-size:12.5px; color:var(--wx-t2); letter-spacing:.3px; }
/* 「新世界」未开放态（STORY_ENABLED=false）：整格降透明度设灰 + 敬请期待小签；点击只弹提示（app.js 门控） */
.wx-gh-tile.wx-gh-soon{ gap:6px; }
.wx-gh-tile.wx-gh-soon:active{ transform:none; }
.wx-gh-tile.wx-gh-soon .wx-gh-ic, .wx-gh-tile.wx-gh-soon .wx-gh-lb{ opacity:.38; }
.wx-gh-soon-tag{ font-size:10px; color:var(--wx-t3); background:rgba(120,120,130,.13); border-radius:99px; padding:2.5px 9px; letter-spacing:.5px; }
/* ⭐Phase2 记忆中枢：hub 三按钮 / 人列表 / 某人记忆，沿用 Genie 软糖块 */
.wx-mem{ flex:1; overflow-y:auto; background:var(--wx-bg); padding:8px 18px 26px; }
.wx-mem-hero{ padding:14px 4px 18px; }
.wx-mem-kicker{ font-size:10.5px; letter-spacing:2px; color:var(--wx-t3); font-weight:600; }
.wx-mem-title{ font-family:var(--font-serif); font-size:34px; color:var(--wx-t1); line-height:1; margin-top:6px; }
.wx-mem-big{ background:rgba(120,120,130,.10); border-radius:24px; padding:18px; margin-bottom:13px; box-shadow:0 2px 12px rgba(0,0,0,.04); cursor:pointer; transition:transform .14s; }
.wx-mem-big:active{ transform:scale(.98); }
.wx-mem-big-top{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:14px; }
.wx-mem-ic{ display:flex; align-items:center; color:var(--wx-t1); }
.wx-mem-ic svg{ width:25px; height:25px; }
.wx-mem-go{ font-size:11.5px; color:var(--wx-t3); white-space:nowrap; }
.wx-mem-big-ttl{ font-family:var(--font-serif); font-size:21px; color:var(--wx-t1); }
.wx-mem-big-sub{ font-size:12px; color:var(--wx-t2); margin-top:6px; line-height:1.5; }
.wx-mem-row2{ display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.wx-mem-tile{ background:rgba(120,120,130,.10); border-radius:24px; padding:18px 16px; min-height:128px; display:flex; flex-direction:column; justify-content:space-between; box-shadow:0 2px 12px rgba(0,0,0,.04); cursor:pointer; transition:transform .14s; }
.wx-mem-tile:active{ transform:scale(.96); }
.wx-mem-tile-top{ display:flex; align-items:flex-start; justify-content:space-between; }
.wx-mem-tile-ttl{ font-family:var(--font-serif); font-size:18px; color:var(--wx-t1); }
.wx-mem-tile-sub{ font-size:11.5px; color:var(--wx-t2); margin-top:6px; line-height:1.45; }
.wx-mem-folks{ display:flex; align-items:center; gap:6px; }
.wx-mem-mav{ width:18px; height:18px; border-radius:6px; display:inline-block; border:1.5px solid var(--wx-bg); background-size:cover; background-position:center; }
.wx-mem-mav + .wx-mem-mav{ margin-left:-6px; }
.wx-mem-folkn{ font-size:11.5px; color:var(--wx-t2); white-space:nowrap; }
.wx-mem-list{ padding-top:6px; }
.wx-mem-prow{ display:flex; align-items:center; gap:13px; padding:12px; border-radius:18px; cursor:pointer; transition:background .15s; }
.wx-mem-prow:active{ background:rgba(0,0,0,.04); }
.wx-mem-pmid{ flex:1; min-width:0; }
.wx-mem-pname{ font-size:15.5px; font-weight:500; color:var(--wx-t1); }
.wx-mem-pcnt{ font-size:12.5px; color:var(--wx-t2); margin-top:3px; }
.wx-mem-sec{ margin-top:18px; }
.wx-mem-sech{ font-size:11px; letter-spacing:1.4px; color:var(--wx-t2); font-weight:600; margin:0 4px 9px; }
/* ===== 某人的记忆页 · 2026-07-03 重构（wx-mp2-*，落地方案-25 四轨的脸；新命名不碰旧类） ===== */
.wx-mp2-ov{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:6px 4px 2px; }
.wx-mp2-ov b{ font-size:16px; font-weight:700; color:var(--wx-t1); letter-spacing:.2px; }
.wx-mp2-ov span{ font-size:11.5px; color:var(--wx-t3); flex:none; }
.wx-mp2-sec{ background:#fff; border-radius:16px; padding:14px 15px 12px; }
.wx-mp2-h{ display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:700; color:var(--wx-t1); margin-bottom:10px; }
.wx-mp2-hint{ font-size:10.5px; font-weight:400; color:var(--wx-t3); flex:1; min-width:0; }
.wx-mp2-addbtn{ flex:none; border:none; background:rgba(120,120,130,.1); color:#3a3a40; width:26px; height:26px; border-radius:50%; font-size:15px; line-height:1; cursor:pointer; }
.wx-mp2-row{ display:flex; align-items:flex-start; gap:9px; padding:7px 2px; }
.wx-mp2-row + .wx-mp2-row{ border-top:1px solid rgba(0,0,0,.04); }
.wx-mp2-dot{ width:5px; height:5px; border-radius:50%; background:#c4c4ca; margin-top:7.5px; flex:none; }
.wx-mp2-dot.warm{ background:#e8905a; box-shadow:0 0 5px rgba(232,144,90,.45); }
.wx-mp2-dot.cool{ background:#7a93c9; box-shadow:0 0 5px rgba(122,147,201,.4); }
.wx-mp2-t{ flex:1; min-width:0; font-size:13.5px; color:var(--wx-t1); line-height:1.5; word-break:break-word; }
.wx-mp2-meta{ font-size:10.5px; color:var(--wx-t3); flex:none; margin-top:3px; }
.wx-mp2-del{ flex:none; font-weight:400; font-style:normal; color:#c0c0c6; font-size:14px; line-height:1; padding:4px 2px 4px 8px; cursor:pointer; }
.wx-mp2-key .wx-mp2-t{ font-weight:600; }
.wx-mp2-key .wx-mp2-dot{ background:#1c1c20; }
.wx-mp2-faded .wx-mp2-t{ color:var(--wx-t3); }
.wx-mp2-empty{ font-size:12.5px; color:var(--wx-t3); line-height:1.6; padding:4px 2px 6px; }
.wx-mp2-add{ display:none; gap:8px; margin-top:10px; }
.wx-mp2-add.open{ display:flex; }
.wx-mp2-add input{ flex:1; min-width:0; border:1px solid var(--wx-line-strong); border-radius:999px; padding:8px 14px; font-size:13px; outline:none; background:#fff; font-family:inherit; }
.wx-mp2-add button{ flex:none; border:none; background:#1c1c20; color:#fff; border-radius:999px; padding:0 16px; font-size:12.5px; cursor:pointer; }
.wx-mp2-fold{ display:flex; align-items:center; justify-content:space-between; cursor:pointer; font-size:13px; color:var(--wx-t2); padding:2px 2px; }
.wx-mp2-fold i{ font-style:normal; color:var(--wx-t3); transition:transform .18s; }
.wx-mp2-foldsec.open .wx-mp2-fold i{ transform:rotate(90deg); }
.wx-mp2-foldbody{ display:none; margin-top:10px; }
.wx-mp2-foldsec.open .wx-mp2-foldbody{ display:block; }
.wx-mp2-sh{ display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:var(--wx-t1); margin-bottom:8px; }
/* ===== 记忆书 · 变体C（2026-07-12 拍板·原型 docs/原型/记忆书-原型-2026-07-12.html）：高光横滑带 + 钉住分区 + 行内操作 ===== */
.wx-mp2-hl{ display:flex; gap:10px; overflow-x:auto; padding:4px 2px 2px; scrollbar-width:none; }
.wx-mp2-hl::-webkit-scrollbar{ display:none; }
.wx-mp2-hlc{ flex:0 0 124px; height:148px; border-radius:16px; padding:12px 12px 11px; display:flex; flex-direction:column; justify-content:flex-end; position:relative; color:#fff; overflow:hidden; background:linear-gradient(160deg,#a8b6c6,#75879c); }
.wx-mp2-hlc.warm{ background:linear-gradient(160deg,#d3b98a,#a98d5f); }
.wx-mp2-hlc.rose{ background:linear-gradient(160deg,#c9a5a9,#987078); }
.wx-mp2-hlbm{ position:absolute; top:0; right:12px; width:12px; height:18px; background:rgba(255,255,255,.92); clip-path:polygon(0 0,100% 0,100% 100%,50% 76%,0 100%); }
.wx-mp2-hld{ font-size:10.5px; opacity:.85; letter-spacing:.4px; }
.wx-mp2-hlt{ font-size:13px; font-weight:600; line-height:1.45; margin-top:3px; word-break:break-word; }
.wx-mp2-hpin{ display:flex; color:#c8a86b; flex:none; }
.wx-mp2-hpin svg{ width:14px; height:14px; }
.wx-mp2-dot.pin{ background:#c8a86b; box-shadow:0 0 5px rgba(200,168,107,.5); }
.wx-mp2-pinned .wx-mp2-t{ font-weight:600; }
.wx-mp2-when{ display:block; font-size:10.5px; color:var(--wx-t3); margin-top:2px; font-weight:400; }
.wx-mp2-op{ flex:none; font-weight:400; font-style:normal; color:#c0c0c6; font-size:13px; line-height:1; padding:5px 2px 4px 7px; cursor:pointer; display:flex; align-items:center; }
.wx-mp2-op svg{ width:13px; height:13px; }
.wx-mp2-op:active{ color:#8a8a90; }
.wx-mp2-editrow{ gap:8px; align-items:center; }
.wx-mp2-editrow input{ flex:1; min-width:0; border:1px solid var(--wx-line-strong); border-radius:10px; padding:7px 10px; font-size:13px; outline:none; font-family:inherit; background:#fff; }
.wx-mp2-editrow button{ flex:none; border:none; background:#1c1c20; color:#fff; border-radius:999px; width:30px; height:30px; font-size:13px; cursor:pointer; }
.wx-mp2-editrow b{ flex:none; color:#c0c0c6; font-weight:400; font-size:16px; padding:5px 6px; cursor:pointer; }
.wx-mp2-hlc.more{ background:#fdfcf8; border:1px solid #efe9db; color:#a08b5f; justify-content:flex-end; }
.wx-mp2-hlc.more .wx-mp2-hld{ color:#c3b28c; opacity:1; letter-spacing:.12em; }
/* ===== 长期关系脉络：一根时间线串周段；generated 与玩家校准同卡分层，不借纪念册的高权威暖纸语义 ===== */
.wx-narr-sec{ padding:15px 15px 14px; overflow:hidden; }
.wx-narr-list{ position:relative; padding:1px 0 1px 22px; }
.wx-narr-list::before{ content:''; position:absolute; left:5px; top:13px; bottom:14px; width:1.5px; border-radius:2px; background:linear-gradient(180deg,rgba(122,147,201,.55),rgba(122,147,201,.12)); }
.wx-narr-card{ position:relative; margin:0 0 12px; padding:13px 13px 11px; border:1px solid rgba(104,120,153,.13); border-radius:15px; background:#f7f8fb; box-shadow:0 2px 10px rgba(36,48,70,.035); }
.wx-narr-card:last-child{ margin-bottom:0; }
.wx-narr-node{ position:absolute; left:-21px; top:18px; width:9px; height:9px; border-radius:50%; background:#7a93c9; box-shadow:0 0 0 4px #fff; }
.wx-narr-card.pinned .wx-narr-node{ background:#c8a86b; }
.wx-narr-card.is-hidden{ background:#fafafa; border-style:dashed; }
.wx-narr-card.is-hidden h3{ color:#555861; }.wx-narr-card.is-hidden .wx-narr-arc{ color:#676b74; }
.wx-narr-card.is-pending{ border-style:dashed; }
.wx-narr-card.is-stale{ border-style:dashed; background:#f9fafc; }
.wx-narr-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.wx-narr-period{ min-width:0; font-size:11px; line-height:1.35; color:#656a76; letter-spacing:.02em; }
.wx-narr-badges{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:4px; }
.wx-narr-badge{ display:inline-flex; align-items:center; min-height:20px; padding:2px 7px; border-radius:999px; background:rgba(122,147,201,.12); color:#5e719b; font-size:9.5px; white-space:nowrap; }
.wx-narr-badge.pin{ background:rgba(200,168,107,.14); color:#8a7040; }
.wx-narr-badge.hidden{ background:rgba(120,120,130,.10); color:#696970; }
.wx-narr-badge.pending{ border:1px dashed rgba(122,147,201,.35); background:transparent; }
.wx-narr-badge.stale{ background:rgba(153,126,82,.10); color:#806c4d; }
.wx-narr-card h3{ margin:8px 0 0; color:#1c1c20; font-family:var(--font-serif); font-size:17px; line-height:1.35; font-weight:600; }
.wx-narr-arc{ margin:5px 0 0; color:#3f434d; font-size:13px; line-height:1.58; word-break:break-word; }
.wx-narr-fold{ display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; min-height:40px; margin-top:7px; padding:5px 1px 0; border:0; border-top:1px solid rgba(104,120,153,.10); background:none; color:#565e70; font:inherit; font-size:11.5px; text-align:left; cursor:pointer; }
.wx-narr-fold i{ color:#8a90a0; font-style:normal; transition:transform .18s ease; }
.wx-narr-fold.open i{ transform:rotate(90deg); }
.wx-narr-evidence[hidden]{ display:none!important; }
.wx-narr-evidence{ padding:2px 0 6px; }
.wx-narr-evi-row{ width:100%; display:grid; grid-template-columns:48px minmax(0,1fr) 14px; gap:8px; align-items:start; padding:7px 0; border:0; border-top:1px solid rgba(104,120,153,.08); background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.wx-narr-evi-row>span{ padding-top:1px; color:#727886; font-size:10.5px; }
.wx-narr-evi-row p{ margin:0; color:#343841; font-size:12px; line-height:1.55; word-break:break-word; }
.wx-narr-evi-row>i{ padding-top:1px; color:#9ca3b0; font-size:15px; font-style:normal; }
.wx-narr-evi-note{ color:#747986; font-size:10.5px; line-height:1.5; padding-top:4px; }
.wx-narr-actions{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin-top:8px; }
.wx-narr-actions button{ min-width:0; min-height:44px; padding:7px 9px; border:1px solid rgba(70,76,90,.10); border-radius:11px; background:#fff; color:#4b505c; font:inherit; font-size:11.5px; cursor:pointer; }
.wx-narr-actions button:disabled{ opacity:.44; cursor:default; }
.wx-narr-editor{ display:none; margin-top:10px; padding-top:11px; border-top:1px solid rgba(104,120,153,.12); }
.wx-narr-card.editing .wx-narr-editor{ display:block; }
.wx-narr-editor label{ display:block; margin-bottom:9px; }
.wx-narr-editor label>span{ display:block; margin-bottom:5px; color:#555b68; font-size:11px; }
.wx-narr-editor input,.wx-narr-editor textarea{ display:block; box-sizing:border-box; width:100%; border:1px solid rgba(75,84,105,.19); border-radius:10px; outline:none; background:#fff; color:#252830; font:inherit; font-size:13px; line-height:1.5; padding:9px 10px; resize:none; }
.wx-narr-editor input:focus,.wx-narr-editor textarea:focus{ border-color:rgba(88,108,151,.55); box-shadow:0 0 0 3px rgba(122,147,201,.10); }
.wx-narr-editnote{ color:#676d7a; font-size:10.5px; line-height:1.55; }
.wx-narr-editops{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; margin-top:10px; }
.wx-narr-editops button{ min-height:40px; border:0; border-radius:999px; padding:8px 12px; background:rgba(100,108,125,.09); color:#555b68; font:inherit; font-size:11.5px; cursor:pointer; }
.wx-narr-editops button.primary{ background:#1c1c20; color:#fff; }
.wx-narr-actions button:focus-visible,.wx-narr-fold:focus-visible,.wx-narr-editops button:focus-visible{ outline:2px solid rgba(52,68,102,.42); outline-offset:2px; }
.wx-narr-more{ display:block; width:calc(100% - 22px); min-height:44px; margin:9px 0 0 22px; border:1px solid rgba(104,120,153,.13); border-radius:12px; background:#fafbfc; color:#535b6d; font:inherit; font-size:11.5px; cursor:pointer; }
.wx-narr-more span{ color:#8a8f9a; }
.wx-narr-more:focus-visible{ outline:2px solid rgba(52,68,102,.42); outline-offset:2px; }
.wx-narr-foot{ margin:11px 2px 0 22px; color:#666c78; font-size:10.5px; line-height:1.55; }
.wx-narr-empty{ display:flex; align-items:flex-start; gap:12px; padding:8px 2px 4px; }
.wx-narr-empty>i{ position:relative; width:12px; height:12px; margin-top:3px; border:1.5px solid rgba(122,147,201,.55); border-radius:50%; flex:none; }
.wx-narr-empty>i::after{ content:''; position:absolute; left:50%; top:12px; width:1px; height:29px; background:rgba(122,147,201,.22); }
.wx-narr-empty b,.wx-narr-empty span{ display:block; }
.wx-narr-empty b{ color:#343841; font-size:13px; }
.wx-narr-empty span{ margin-top:4px; color:#676d7a; font-size:11.5px; line-height:1.55; }
@media(max-width:400px){ .wx-narr-card{ padding:12px 11px 10px; }.wx-narr-editops{ justify-content:stretch; }.wx-narr-editops button{ flex:1 1 auto; } }
@media(prefers-reduced-motion:reduce){ .wx-narr-fold i{ transition:none; } }
/* ===== 长期记忆治理·节奏与依据（2026-07-22 原型已确认） =====
   签名语言=对话珠折成一页记忆；其余保持记忆书现有灰蓝、白卡与弱边界。 */
.wx-mpace,.wx-mpace-entry,.wx-mevi{
  --wx-mg-blue:#7a93c9;
  --wx-mg-blue-deep:#52678f;
  --wx-mg-blue-soft:#eef2f9;
  --wx-mg-blue-line:rgba(104,126,174,.18);
  --wx-mg-danger:#a5514d;
  --wx-mg-danger-soft:#fbefee;
}
.wx-mpace-help{ position:absolute; right:12px; display:grid; place-items:center; width:28px; height:28px; padding:0; border:1px solid rgba(72,80,98,.12); border-radius:50%; background:rgba(255,255,255,.62); color:#686f7e; font:600 12px/1 var(--font-sans); cursor:pointer; }
.wx-mpace,.wx-mevi{ flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; background:var(--wx-bg); padding:14px 16px calc(30px + env(safe-area-inset-bottom,0px)); scrollbar-width:none; }
.wx-mpace::-webkit-scrollbar,.wx-mevi::-webkit-scrollbar{ display:none; }
.wx-mpace-intro,.wx-mevi-intro{ margin:1px 3px 14px; }
.wx-mpace-intro h2,.wx-mevi-intro h2{ margin:0; color:var(--wx-t1); font-family:var(--font-serif); font-size:22px; font-weight:600; line-height:1.22; letter-spacing:-.02em; }
.wx-mpace-intro p,.wx-mevi-intro p{ margin:6px 0 0; color:#747a87; font-size:11.5px; line-height:1.6; }
.wx-mpace-card,.wx-mevi-card{ border:1px solid rgba(55,61,75,.055); border-radius:17px; background:#fff; box-shadow:0 2px 12px rgba(35,42,58,.035); }
.wx-mpace-card + .wx-mpace-card,.wx-mevi-card + .wx-mevi-card{ margin-top:11px; }
.wx-mpace-card{ padding:15px; }
.wx-mpace-head,.wx-mevi-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:12px; }
.wx-mpace-head b,.wx-mevi-head b{ color:var(--wx-t1); font-size:13px; }
.wx-mpace-head small,.wx-mevi-head small{ color:#747a87; font-size:10px; font-weight:400; line-height:1.4; }
.wx-mpace-badge,.wx-mevi-badge{ display:inline-flex; align-items:center; min-height:21px; padding:3px 8px; border-radius:999px; background:var(--wx-mg-blue-soft); color:var(--wx-mg-blue-deep); font-size:9.5px; font-weight:500; white-space:nowrap; }
.wx-mpace-badge.is-wait,.wx-mevi-badge.is-wait{ border:1px dashed rgba(112,136,184,.5); background:transparent; }
.wx-mevi-badge.is-changed{ background:#f5efe6; color:#806847; }

/* 人物记忆页的轻入口：小尺寸仍保留珠→页签名。 */
.wx-mpace-entry{ width:100%; display:grid; grid-template-columns:48px minmax(0,1fr) auto; gap:11px; align-items:center; margin:12px 0 0; padding:12px 13px; border:1px solid var(--wx-mg-blue-line); border-radius:16px; background:linear-gradient(135deg,#f8f9fc,#f3f6fb); color:inherit; font:inherit; text-align:left; cursor:pointer; box-shadow:0 2px 10px rgba(36,48,70,.035); }
.wx-mpace-entry-sign{ position:relative; width:46px; height:38px; }
.wx-mpace-entry-sign::before{ content:''; position:absolute; left:1px; top:17px; width:22px; height:1px; background:#d3dbea; box-shadow:6px -7px 0 -2px var(--wx-mg-blue),12px 7px 0 -2px var(--wx-mg-blue); }
.wx-mpace-entry-sign::after{ content:''; position:absolute; right:1px; top:2px; width:23px; height:30px; border:1px solid rgba(112,136,184,.34); border-radius:5px 5px 7px 7px; background:linear-gradient(#fff 0 36%,#d4dcea 36% 40%,#fff 40% 55%,#d4dcea 55% 59%,#fff 59%); box-shadow:0 4px 9px rgba(61,77,111,.08); }
.wx-mpace-entry-copy{ min-width:0; }
.wx-mpace-entry-copy b,.wx-mpace-entry-copy span{ display:block; }
.wx-mpace-entry-copy b{ color:#343841; font-size:13px; line-height:1.35; }
.wx-mpace-entry-copy span{ margin-top:3px; color:#747a87; font-size:10.5px; line-height:1.45; }
.wx-mpace-entry-go{ color:#9ca3b0; font-size:18px; font-style:normal; }
.wx-mpace-entry:active{ background:#f0f3f8; }

/* 对话珠→记忆页：页面唯一的强识别元素。 */
.wx-mpace-fold{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) 62px; align-items:center; gap:13px; min-height:72px; margin:2px 0 7px; padding:11px 12px; overflow:hidden; border:1px solid rgba(112,136,184,.13); border-radius:14px; background:#f7f9fc; }
.wx-mpace-beads{ position:relative; display:grid; grid-template-columns:repeat(8,minmax(7px,1fr)); gap:8px 6px; padding-right:4px; }
.wx-mpace-beads::before{ content:''; position:absolute; left:4px; right:-8px; top:50%; height:1px; background:#d9dfeb; }
.wx-mpace-bead{ position:relative; z-index:1; width:7px; height:7px; justify-self:center; border:1.5px solid var(--wx-mg-blue); border-radius:50%; background:#fff; }
.wx-mpace-bead.is-done,.wx-mpace-bead.done{ background:var(--wx-mg-blue); }
.wx-mpace-page{ position:relative; height:48px; border:1px solid rgba(112,136,184,.27); border-radius:8px 8px 10px 10px; background:linear-gradient(#fff 0 30%,#c9d2e3 30% 34%,#fff 34% 46%,#c9d2e3 46% 50%,#fff 50% 62%,#c9d2e3 62% 66%,#fff 66%); box-shadow:0 4px 10px rgba(61,77,111,.08); }
.wx-mpace-page::before{ content:''; position:absolute; right:-1px; top:-1px; width:15px; height:15px; border-left:1px solid rgba(112,136,184,.25); border-bottom:1px solid rgba(112,136,184,.25); background:var(--wx-mg-blue-soft); clip-path:polygon(0 0,100% 100%,0 100%); }
.wx-mpace-page-label{ position:absolute; right:7px; bottom:2px; color:#8591aa; font-size:8.5px; white-space:nowrap; }
.wx-mpace-state{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:9px 1px 12px; }
.wx-mpace-state b{ color:var(--wx-t1); font-family:var(--font-serif); font-size:17px; font-weight:600; }
.wx-mpace-state span{ color:#747a87; font-size:10.5px; text-align:right; }
.wx-mpace-primary{ width:100%; min-height:45px; border:0; border-radius:12px; background:#202227; color:#fff; font:inherit; font-size:12px; font-weight:600; cursor:pointer; transition:transform var(--dur-fast) var(--ease),opacity var(--dur-fast) var(--ease); }
.wx-mpace-primary:active{ transform:translateY(1px); }
.wx-mpace-primary:disabled{ opacity:.58; cursor:default; transform:none; }
.wx-mpace-status{ display:none; align-items:flex-start; gap:8px; margin-top:10px; padding:9px 10px; border-radius:10px; background:var(--wx-mg-blue-soft); color:#556786; font-size:10.5px; line-height:1.5; }
.wx-mpace-status.show,.wx-mpace-status.is-visible{ display:flex; }
.wx-mpace-status.is-done,.wx-mpace-status.done{ background:var(--wx-ok-bg); color:#4f745e; }
.wx-mpace-status.is-error{ background:#f7f3ee; color:#786557; }
.wx-mpace-spin{ flex:0 0 auto; width:12px; height:12px; margin-top:1px; border:1.5px solid rgba(79,99,144,.24); border-top-color:var(--wx-mg-blue-deep); border-radius:50%; animation:wx-mpace-spin .75s linear infinite; }
.wx-mpace-status.is-done .wx-mpace-spin,.wx-mpace-status.done .wx-mpace-spin{ border:0; animation:none; }
.wx-mpace-status.is-error .wx-mpace-spin{ border:0; animation:none; }
.wx-mpace-status.is-done .wx-mpace-spin::after,.wx-mpace-status.done .wx-mpace-spin::after{ content:'✓'; font-weight:800; }
.wx-mpace-status.is-error .wx-mpace-spin::after{ content:'!'; font-weight:800; }
@keyframes wx-mpace-spin{ to{ transform:rotate(360deg); } }

.wx-mpace-presets{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; padding:4px; border-radius:12px; background:#f1f2f5; }
.wx-mpace-preset{ min-width:0; min-height:36px; border:0; border-radius:9px; background:transparent; color:#707681; font:inherit; font-size:10.5px; cursor:pointer; }
.wx-mpace-preset.on,.wx-mpace-preset.is-active,.wx-mpace-preset[aria-pressed=true]{ background:#fff; color:#25272c; font-weight:650; box-shadow:0 1px 5px rgba(33,39,52,.08); }
.wx-mpace-preset-copy{ min-height:32px; margin:10px 2px 4px; color:#5f6571; font-size:10.5px; line-height:1.55; }
.wx-mpace-custom{ display:none; margin-top:12px; padding-top:12px; border-top:1px solid #e4e7ed; }
.wx-mpace-custom.show,.wx-mpace-custom.is-visible{ display:block; }
.wx-mpace-control + .wx-mpace-control{ margin-top:13px; }
.wx-mpace-control-label{ display:flex; justify-content:space-between; gap:10px; margin:0 1px 7px; }
.wx-mpace-control-label b{ color:#343841; font-size:11px; }
.wx-mpace-control-label span{ color:#747a87; font-size:9.5px; text-align:right; }
.wx-mpace-choices{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
.wx-mpace-choice{ min-width:0; min-height:36px; padding:4px 2px; border:1px solid #e4e7ed; border-radius:10px; background:#fff; color:#666c78; font:inherit; font-size:10px; cursor:pointer; }
.wx-mpace-choice.on,.wx-mpace-choice.is-active,.wx-mpace-choice[aria-pressed=true]{ border-color:rgba(112,136,184,.46); background:var(--wx-mg-blue-soft); color:var(--wx-mg-blue-deep); font-weight:650; }
.wx-mpace-toggle-row{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; margin-top:13px; padding-top:12px; border-top:1px solid #e4e7ed; }
.wx-mpace-toggle-row b,.wx-mpace-toggle-row small{ display:block; }
.wx-mpace-toggle-row b{ color:#343841; font-size:11px; }
.wx-mpace-toggle-row small{ margin-top:3px; color:#747a87; font-size:9.5px; line-height:1.45; }
.wx-mpace-switch{ position:relative; flex:none; width:38px; height:23px; border:0; border-radius:999px; background:#d8dbe1; cursor:pointer; transition:background var(--dur-fast) var(--ease); }
.wx-mpace-switch::after{ content:''; position:absolute; left:3px; top:3px; width:17px; height:17px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.18); transition:transform .18s ease; }
.wx-mpace-switch.on,.wx-mpace-switch[aria-checked=true]{ background:var(--wx-mg-blue); }
.wx-mpace-switch.on::after,.wx-mpace-switch[aria-checked=true]::after{ transform:translateX(15px); }
.wx-mpace-switch:disabled{ opacity:.48; cursor:default; }
.wx-mpace-cost{ margin:12px 1px 0; color:#7d828d; font-size:9.5px; line-height:1.55; }
.wx-mpace-meaning{ padding:14px 15px 13px; }
.wx-mpace-meaning-title{ color:#343841; font-size:12px; font-weight:700; }
.wx-mpace-meaning-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-top:10px; }
.wx-mpace-meaning-grid>div{ padding-left:9px; border-left:2px solid #d9deea; }
.wx-mpace-meaning-grid>div:last-child{ border-color:#dbc9c7; }
.wx-mpace-meaning-grid b,.wx-mpace-meaning-grid span{ display:block; }
.wx-mpace-meaning-grid b{ color:#343841; font-size:10.5px; }
.wx-mpace-meaning-grid span{ margin-top:3px; color:#747a87; font-size:9.5px; line-height:1.45; }
.wx-mpace-link{ width:100%; min-height:40px; margin-top:9px; border:0; border-top:1px solid #e4e7ed; background:none; color:var(--wx-mg-blue-deep); font:inherit; font-size:10.5px; cursor:pointer; }

/* 记忆依据页：时间线只说“如何得到”，行级动作保持可回溯状态。 */
.wx-mevi-narr{ position:relative; margin:1px 0 0 21px; padding:14px 14px 12px; border:1px solid rgba(112,136,184,.15); border-radius:15px; background:#f8f9fc; }
.wx-mevi-narr::before{ content:''; position:absolute; left:-17px; top:0; bottom:-18px; width:1.5px; background:#d5ddeb; }
.wx-mevi-narr::after{ content:''; position:absolute; left:-21px; top:18px; width:9px; height:9px; border-radius:50%; background:var(--wx-mg-blue); box-shadow:0 0 0 4px var(--wx-bg); }
.wx-mevi-narr-meta{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; color:#747a87; font-size:10px; line-height:1.4; }
.wx-mevi-narr h3{ margin:8px 0 4px; color:var(--wx-t1); font-family:var(--font-serif); font-size:18px; font-weight:600; line-height:1.35; }
.wx-mevi-narr p{ margin:0; color:#484d58; font-size:11.5px; line-height:1.6; word-break:break-word; }
.wx-mevi-note{ margin:10px 3px 11px 24px; color:#747a87; font-size:10px; line-height:1.5; }
.wx-mevi-card{ padding:13px 14px 10px; }
.wx-mevi-head{ align-items:center; margin-bottom:5px; }
.wx-mevi-list{ margin:0; padding:0; list-style:none; }
.wx-mevi-row{ width:100%; display:grid; grid-template-columns:48px minmax(0,1fr) 18px; gap:8px; align-items:start; min-height:58px; padding:11px 0; border:0; border-top:1px solid #edf0f4; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.wx-mevi-row:first-child{ border-top:0; }
.wx-mevi-row time,.wx-mevi-when{ color:#777e8b; font-size:9.5px; line-height:1.4; font-variant-numeric:tabular-nums; }
.wx-mevi-copy{ min-width:0; }
.wx-mevi-copy p,.wx-mevi-copy b{ display:block; margin:0; color:#343841; font-size:11.5px; font-weight:400; line-height:1.55; word-break:break-word; }
.wx-mevi-copy small{ display:block; margin-top:4px; color:#747a87; font-size:9px; line-height:1.45; }
.wx-mevi-go{ color:#a2a7b1; font-size:16px; font-style:normal; transform:translateY(6px); }
.wx-mevi-row.is-withdrawn,.wx-mevi-row.withdrawn,.wx-mevi-row[aria-disabled=true]{ cursor:default; }
.wx-mevi-row.is-withdrawn .wx-mevi-copy p,.wx-mevi-row.withdrawn .wx-mevi-copy p{ color:#8d929c; font-style:italic; }
.wx-mevi-row.is-withdrawn .wx-mevi-copy small,.wx-mevi-row.withdrawn .wx-mevi-copy small{ color:var(--wx-mg-blue-deep); }
.wx-mevi-row.is-withdrawn .wx-mevi-go,.wx-mevi-row.withdrawn .wx-mevi-go,.wx-mevi-row[aria-disabled=true] .wx-mevi-go{ display:none; }
.wx-mevi-row.is-unbound{ opacity:.64; cursor:default; }
.wx-mevi-foot{ margin:4px 0 2px; color:#747a87; font-size:9.5px; line-height:1.5; }
.wx-mevi-actions{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin-top:10px; }
.wx-mevi-action{ min-height:42px; border:1px solid #e4e7ed; border-radius:11px; background:#fff; color:#565c68; font:inherit; font-size:10.5px; cursor:pointer; }
.wx-mevi-action.primary{ border-color:#202227; background:#202227; color:#fff; font-weight:600; }
.wx-mevi-action:disabled{ opacity:.46; cursor:default; }
.wx-mevi-status{ display:none; margin-top:11px; padding:12px 13px; border:1px dashed rgba(112,136,184,.42); border-radius:14px; background:#f7f9fc; }
.wx-mevi-status.show,.wx-mevi-status.is-visible{ display:block; }
.wx-mevi-status b{ display:flex; align-items:center; gap:7px; color:#4f5f7c; font-size:11px; }
.wx-mevi-status p{ margin:5px 0 0 19px; color:#747a87; font-size:9.5px; line-height:1.5; }

/* 依据动作使用既有 confirmSheet；bodyHtml 只使用这组受控类。 */
.wx-cfm-body{ margin:12px 2px 0; color:#555b68; font-size:11.5px; line-height:1.6; text-align:left; }
.wx-cfm-body p{ margin:0; }
.wx-cfm-body p + p{ margin-top:8px; }
.wx-cfm-body label>span{ display:block; margin-top:11px; color:#4c5260; font-size:10.5px; font-weight:650; }
.wx-cfm-quote{ margin:0 0 11px; padding:10px 11px; border-left:3px solid #ced7e8; border-radius:0 9px 9px 0; background:#f7f8fb; color:#343842; font-size:11px; line-height:1.6; word-break:break-word; }
.wx-cfm-impact{ display:flex; flex-wrap:wrap; gap:5px; margin:0 0 11px; }
.wx-cfm-impact span{ padding:4px 7px; border-radius:999px; background:#f1f3f7; color:#666d7b; font-size:9px; }
.wx-cfm-textarea{ display:block; box-sizing:border-box; width:100%; min-height:88px; margin:8px 0 0; padding:10px 11px; resize:vertical; border:1px solid #dfe2e8; border-radius:12px; outline:none; background:#fff; color:var(--wx-t1); font:inherit; font-size:12px; line-height:1.6; }
.wx-cfm-textarea:focus{ border-color:rgba(88,108,151,.55); box-shadow:0 0 0 3px rgba(122,147,201,.10); }
.wx-cfm-warn{ margin:10px 0 0; padding:10px 11px; border-radius:11px; background:#f7f3ee; color:#6f6253; font-size:9.5px; line-height:1.55; }
.wx-cfm-warn b{ display:block; margin-bottom:3px; color:#5d5145; font-size:10px; }
.wx-cfm-warn.danger{ background:#fbefee; color:#82514e; }

.wx-mpace-help:focus-visible,.wx-mpace-entry:focus-visible,.wx-mpace-primary:focus-visible,.wx-mpace-preset:focus-visible,.wx-mpace-choice:focus-visible,.wx-mpace-switch:focus-visible,.wx-mpace-link:focus-visible,.wx-mevi-row:focus-visible,.wx-mevi-action:focus-visible,.wx-narr-evi-row:focus-visible,.wx-cfm-textarea:focus-visible{ outline:2px solid rgba(52,68,102,.42); outline-offset:2px; }
@media(max-width:370px){
  .wx-mpace,.wx-mevi{ padding-left:13px; padding-right:13px; }
  .wx-mpace-card{ padding-left:13px; padding-right:13px; }
  .wx-mpace-presets{ gap:3px; }
  .wx-mpace-choices{ gap:4px; }
  .wx-mpace-control-label{ display:block; }
  .wx-mpace-control-label span{ display:block; margin-top:3px; text-align:left; }
  .wx-mpace-state{ align-items:flex-start; flex-direction:column; gap:3px; }
  .wx-mpace-state span{ text-align:left; }
  .wx-mevi-row{ grid-template-columns:43px minmax(0,1fr) 14px; gap:6px; }
}
@media(prefers-reduced-motion:reduce){
  .wx-mpace-primary,.wx-mpace-switch,.wx-mpace-switch::after{ transition:none; }
  .wx-mpace-spin{ animation:none; }
}
/* ===== 纪念册（2026-07-12·变体B书页语言整页化，只读；入口=记忆书高光带尾卡） ===== */
.wx-moir-cover{ background:#fdfcf8; border:1px solid #efe9db; border-radius:16px; padding:18px 16px 16px; margin:6px 0 4px; }
.wx-moir-kicker{ font-size:11px; letter-spacing:.14em; color:#b3a281; }
.wx-moir-title{ font-size:19px; font-weight:600; color:#40382a; margin-top:6px; }
.wx-moir-meta{ font-size:12px; color:#9d937e; margin-top:8px; line-height:1.7; }
.wx-moir-ch{ margin:18px 2px 10px; display:flex; align-items:center; gap:10px; }
.wx-moir-ch i{ width:6px; height:6px; border-radius:50%; background:#c8a86b; flex:none; }
.wx-moir-ch span{ font-size:13px; color:#6d6352; font-weight:600; }
.wx-moir-ch b{ flex:1; height:1px; background:linear-gradient(90deg,#e8e2d2,transparent); }
.wx-moir-card{ background:#fffefb; border:1px solid #efe9db; border-radius:14px; padding:13px 15px 12px; margin-bottom:10px; position:relative; }
.wx-moir-card.ep .wx-moir-t{ color:#988d75; font-size:12.5px; padding-left:9px; border-left:2px solid #e9e0c9; }
.wx-moir-bm{ position:absolute; top:-1px; right:16px; width:14px; height:20px; background:#c8a86b; clip-path:polygon(0 0,100% 0,100% 100%,50% 76%,0 100%); opacity:.92; }
.wx-moir-d{ font-size:11px; color:#b3a888; letter-spacing:.04em; }
.wx-moir-t{ font-size:14px; color:#3c3527; line-height:1.65; margin-top:4px; word-break:break-word; }
.wx-moir-foot{ text-align:center; font-size:11px; color:#b9b099; margin:16px 0 8px; line-height:1.7; }
/* ===== 角色档案页（角色档案·批1 变体A「档案卷宗」，2026-07-12，原型 docs/原型/角色档案页-原型-2026-07-12.html）===== */
.wx-dos-hero{ display:flex; align-items:center; gap:13px; padding:10px 2px 16px; }
.wx-dos-av{ width:56px; height:56px; border-radius:38%; flex:0 0 auto; color:#fff; display:flex; align-items:center; justify-content:center; font-size:22px; background-image:linear-gradient(135deg,#b9c3cf,#8fa0b3); background-size:cover; background-position:center; }
.wx-dos-nm{ font-size:19px; font-weight:600; color:#1c1c1e; }
.wx-dos-who{ font-size:12px; color:#8a8a90; margin-top:3px; }
.wx-dos-day{ font-size:11px; color:#b0a68d; margin-top:5px; letter-spacing:.03em; }
.wx-dos-card{ background:#fff; border:1px solid #ececef; border-radius:14px; padding:13px 14px; margin-bottom:11px; }
.wx-dos-ch{ font-size:12px; color:#8a8a90; letter-spacing:.05em; margin-bottom:9px; }
.wx-dos-line{ font-size:13.5px; color:#2a2a2e; line-height:1.65; }
.wx-dos-line.dim{ color:#a2a2a8; font-size:12.5px; }
.wx-dos-line + .wx-dos-line{ margin-top:5px; }
.wx-dos-mile{ display:flex; gap:9px; align-items:flex-start; padding:5px 0; }
.wx-dos-mile i{ width:6px; height:6px; border-radius:50%; background:#c8a86b; margin-top:7px; flex:0 0 auto; }
.wx-dos-mt{ font-size:13px; color:#3a3a3e; line-height:1.55; }
.wx-dos-md{ font-size:11px; color:#adadb3; margin-top:2px; }
.wx-dos-anniv{ margin-top:8px; padding:9px 11px; background:#fbf8f1; border-radius:10px; font-size:12px; color:#8d7c58; line-height:1.6; }
.wx-dos-row{ display:flex; align-items:center; gap:10px; padding:10px 2px; border-top:1px solid #f2f2f4; font-size:13.5px; color:#2a2a2e; cursor:pointer; }
.wx-dos-ch + .wx-dos-row{ border-top:none; }
.wx-dos-ric{ width:22px; text-align:center; flex:0 0 auto; }
.wx-dos-rt{ flex:0 0 auto; }
.wx-dos-rct{ margin-left:auto; font-size:11.5px; color:#a2a2a8; text-align:right; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wx-dos-safe{ margin-top:4px; padding:12px 6px 8px; text-align:center; font-size:11.5px; color:#9a9aa0; line-height:1.8; }
.wx-dos-btn{ display:inline-block; margin-top:9px; padding:8px 22px; border-radius:999px; border:1px solid #e2e2e6; color:#b6b6bc; font-size:12.5px; }
/* 批2「带TA走」：按钮点亮 + 导出弹层（借 wx-pfm 面板骨架）+ 导入只读预览页 */
.wx-dos-btn.live{ border-color:#e0d3b4; color:#8d7c58; background:#fdfbf6; font-weight:500; cursor:pointer; }
.wx-dos-btn.live:active{ background:#f7f0e2; }
.wx-take-hd{ padding:14px 16px 11px; text-align:center; font-size:12px; color:#9a9aa0; line-height:1.7; border-bottom:1px solid #f2f2f4; }
.wx-take-sub{ display:block; font-size:11.5px; color:#a2a2a8; margin-top:3px; font-weight:400; }
/* 落地方案-42 + 2026-07-19 可控更新：实心=好友、灰虚线=L1 可认识、浅点线=L0 刚听到；卡常驻并承载扫描状态。 */
.wx-cir-card .wx-pf2-ch{ min-height:34px; }
.wx-cir-update{ min-width:54px; min-height:44px; margin:-5px -8px -5px auto; padding:0 8px; border:0; border-radius:12px; background:transparent; color:#8e8e96; font:inherit; font-size:12px; display:flex; align-items:center; justify-content:flex-end; gap:5px; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.wx-cir-update:active{ background:#f6f6f8; }
.wx-cir-update:disabled{ color:#aaaab1; cursor:default; }
.wx-cir-refresh{ width:13px!important; height:13px!important; }
.wx-cir-update.busy .wx-cir-refresh{ animation:wxCirTurn .75s linear infinite; }
@keyframes wxCirTurn{ to{ transform:rotate(360deg); } }
.wx-cir-wrap{ display:flex; flex-wrap:wrap; gap:8px; padding:10px 0 2px; min-height:42px; }
.wx-cir-chip{ max-width:100%; min-height:44px; display:flex; align-items:center; gap:7px; box-sizing:border-box; background:#f7f7f9; color:#1c1c20; border:0; border-radius:999px; padding:7px 13px 7px 7px; font:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.wx-cir-chip:active{ background:#efeff2; }
.wx-cir-copy{ min-width:0; display:flex; align-items:center; gap:6px; }
.wx-cir-av{ width:24px; height:24px; border-radius:999px; color:#fff; font-size:11px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; overflow:hidden; }
.wx-cir-nm{ min-width:0; max-width:88px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; color:#1c1c20; }
.wx-cir-rel{ min-width:0; max-width:78px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; color:#8a8a92; }
.wx-cir-chip.ghost{ background:#fbfbfc; border:1px dashed #dcdce2; }
.wx-cir-chip.ghost .wx-cir-nm{ color:#66666e; }
.wx-cir-av.ghost{ background:#f1f1f4; color:#73737b; border:1px dashed #c7c7ce; }
.wx-cir-chip.fresh{ background:#fdfdfd; border:1px dotted #bcbcc4; color:#5f5f67; }
.wx-cir-chip.fresh .wx-cir-nm{ color:#5f5f67; }
.wx-cir-chip.fresh .wx-cir-rel{ color:#777780; }
.wx-cir-av.fresh{ background:#fafafa; color:#73737b; border:1px dotted #c5c5cc; }
.wx-cir-foot{ font-size:11px; line-height:1.45; color:#777780; padding-top:9px; }
.wx-cir-receipt{ min-height:28px; margin-top:10px; padding:7px 9px; border-radius:10px; display:flex; align-items:flex-start; gap:7px; color:#777780; background:#f8f8fa; font-size:11.5px; line-height:1.45; }
.wx-cir-rdot{ width:6px; height:6px; margin-top:5px; border-radius:50%; background:#a8a8b0; flex:0 0 auto; }
.wx-cir-receipt.busy .wx-cir-rdot{ background:#8f8f97; box-shadow:0 0 0 3px rgba(143,143,151,.12); animation:wxCirPulse 1s ease-in-out infinite; }
.wx-cir-receipt.found .wx-cir-rdot{ background:#b3a281; }
.wx-cir-receipt.none .wx-cir-rdot,.wx-cir-receipt.idle .wx-cir-rdot{ background:#9ea5a0; }
.wx-cir-receipt.pending{ color:#645d50; background:#fbf8f1; }
.wx-cir-receipt.pending .wx-cir-rdot{ background:#b3a281; }
.wx-cir-receipt.error{ color:#986a6a; background:#fbf6f6; }
.wx-cir-receipt.error .wx-cir-rdot{ background:#b98080; }
@keyframes wxCirPulse{ 50%{ opacity:.3; transform:scale(.72); } }
.wx-cir-empty{ padding:14px 6px 5px; text-align:center; }
.wx-cir-orbit{ width:44px; height:32px; margin:0 auto 8px; position:relative; }
.wx-cir-orbit::before,.wx-cir-orbit::after{ content:""; position:absolute; border-radius:50%; border:1px solid #d8d8de; background:#fafafa; }
.wx-cir-orbit::before{ width:25px; height:25px; left:3px; top:3px; }
.wx-cir-orbit::after{ width:17px; height:17px; right:2px; top:8px; }
.wx-cir-empty-t{ color:#77777f; font-size:12.5px; }
.wx-cir-empty-s{ margin-top:4px; color:#b0b0b7; font-size:11px; line-height:1.5; }
.wx-cir-empty-btn{ min-height:44px; margin-top:9px; padding:0 17px; border:0; border-radius:999px; color:#606068; background:#f1f1f4; font:600 12px/1 -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif; cursor:pointer; }
.wx-cir-card:focus-visible,.wx-cir-update:focus-visible,.wx-cir-chip:focus-visible,.wx-cir-empty-btn:focus-visible{ outline:2px solid rgba(28,28,32,.55); outline-offset:2px; }
.wx-cir-hd-rel{ margin-left:7px; font-size:11px; color:#b3a281; }
.wx-cir-hd-sub{ font-size:11.5px; color:#a2a2a8; font-weight:400; }
.wx-cir-hint{ padding:9px 16px 0; font-size:12.5px; color:#6d6d74; line-height:1.6; }
.wx-cir-hint:last-of-type{ padding-bottom:11px; }
.wx-cir-fresh-note{ padding:12px 17px 15px; color:#6d6d74; font-size:12.5px; line-height:1.7; text-align:left; }
button.wx-pfm-act,button.wx-pfm-cancel{ width:100%; border-left:0; border-right:0; border-top:0; font-family:inherit; }
button.wx-pfm-act{ background:transparent; }
button.wx-pfm-cancel{ border:0; }
@media (prefers-reduced-motion:reduce){ .wx-cir-update.busy .wx-cir-refresh,.wx-cir-receipt.busy .wx-cir-rdot{ animation:none; } }
/* 落地方案-46 批5（UI-04～11/13 已批）：人物引进使用克制中性卡 + 一条暖金“来时路线”。
   全部用 wx-rel-* 隔离，UI-01/02/03/12 的 wx-cir-* 视觉保持冻结。 */
.wx-rel-grip{ width:38px; height:4px; margin:0 auto 17px; border-radius:999px; background:rgba(30,30,34,.14); }
.wx-rel-sheet{ box-sizing:border-box; width:100%; padding:13px 18px calc(24px + env(safe-area-inset-bottom,0px)); border-radius:28px 28px 0 0; background:#f4f4f6; box-shadow:0 -18px 48px rgba(20,20,30,.2); }
.wx-pfm-mask.show .wx-rel-sheet{ transform:none; }
.wx-rel-candidate{ display:flex; align-items:center; gap:13px; padding:1px 2px 13px; }
.wx-rel-candidate-av,.wx-rel-avatar,.wx-rel-mini-avatar,.wx-rel-thread-av,.wx-rel-origin-av{ display:flex; align-items:center; justify-content:center; overflow:hidden; flex:0 0 auto; color:#fff; background:#a8a8ae; background-size:cover; background-position:center; }
.wx-rel-candidate-av{ width:52px; height:52px; border-radius:17px; font:600 19px/1 var(--font-sans); }
.wx-rel-candidate>div{ min-width:0; }
.wx-rel-candidate b{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#1c1c20; font-size:19px; line-height:1.25; }
.wx-rel-candidate span+div span,.wx-rel-candidate>div>span{ display:block; margin-top:4px; color:#8c8c94; font-size:12.5px; line-height:1.45; }
.wx-rel-known-label{ margin:3px 2px 8px; color:#aaa394; font-size:10.5px; font-weight:600; letter-spacing:.1em; }
.wx-rel-known{ margin:0 0 13px; padding:11px 15px 11px 31px; border:1px solid #ebe8e1; border-radius:16px; color:#66666e; background:#fff; font-size:12.5px; line-height:1.65; }
.wx-rel-known li+li{ margin-top:4px; }
.wx-rel-known-empty{ margin-bottom:13px; padding:12px 14px; border-radius:15px; color:#9b9ba2; background:#fff; font-size:12.5px; }
.wx-rel-choice-stack{ overflow:hidden; border-radius:18px; background:#fff; box-shadow:0 4px 16px rgba(24,24,30,.05); }
.wx-rel-choice{ box-sizing:border-box; width:100%; min-height:62px; padding:11px 14px; border:0; border-bottom:1px solid rgba(20,20,24,.055); background:#fff; color:#1e1e22; display:flex; align-items:center; gap:12px; text-align:left; font:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.wx-rel-choice:last-child{ border-bottom:0; }
.wx-rel-choice:active{ background:#f8f8f9; }
.wx-rel-choice>span{ min-width:0; flex:1; }
.wx-rel-choice b{ display:block; overflow:hidden; text-overflow:ellipsis; color:#232326; font-size:14px; font-weight:600; }
.wx-rel-choice small{ display:block; margin-top:3px; color:#85858d; font-size:11.5px; line-height:1.45; font-weight:400; }
.wx-rel-choice i{ color:#b0a17f; font-size:24px; font-style:normal; font-weight:300; }
.wx-rel-choice.danger b{ color:#b45555; }
.wx-rel-sheet-cancel{ box-sizing:border-box; width:100%; min-height:48px; margin-top:9px; border:0; border-radius:17px; color:#626268; background:#fff; font:600 14px/1 var(--font-sans); cursor:pointer; }
.wx-rel-unavailable{ padding:14px 15px; border:1px solid #ece8df; border-radius:17px; color:#6e695e; background:#fffdf9; }
.wx-rel-unavailable b,.wx-rel-unavailable span{ display:block; }
.wx-rel-unavailable b{ color:#36332d; font-size:14px; }
.wx-rel-unavailable span{ margin-top:5px; font-size:12px; line-height:1.6; }
.wx-rel-unavailable button{ min-height:44px; margin-top:10px; padding:0 16px; border:0; border-radius:999px; color:#fff; background:#282725; font:600 12.5px/1 var(--font-sans); cursor:pointer; }
.wx-rel-confirm-copy{ padding:3px 3px 15px; }
.wx-rel-confirm-copy b,.wx-rel-confirm-copy span{ display:block; }
.wx-rel-confirm-copy b{ color:#242428; font-size:18px; }
.wx-rel-confirm-copy span{ margin-top:7px; color:#77777f; font-size:12.5px; line-height:1.65; }
.wx-rel-actions{ display:flex; gap:9px; margin-top:13px; }
.wx-rel-main,.wx-rel-ghost{ min-height:44px; flex:1; padding:0 14px; border:0; border-radius:999px; font:600 13px/1 var(--font-sans); cursor:pointer; }
.wx-rel-main{ color:#fff; background:#202024; }
.wx-rel-ghost{ color:#66666d; background:#eeeeF1; }
.wx-rel-error-card.compact{ margin:2px 0 0; }

.wx-rel-circle-task{ box-sizing:border-box; width:100%; min-height:58px; margin-top:11px; padding:8px 10px; border:1px solid #eee8dc; border-radius:17px; display:flex; align-items:center; gap:10px; color:#2c2b28; background:#fffdf9; text-align:left; font:inherit; cursor:pointer; }
.wx-rel-circle-task:active{ background:#faf6ed; }
.wx-rel-circle-task.needs-attention{ border-color:#eadada; background:#fffafa; }
.wx-rel-mini-avatar{ width:34px; height:34px; border-radius:12px; background:#b3a281; font-size:13px; }
.wx-rel-circle-copy{ min-width:0; flex:1; }
.wx-rel-circle-copy b,.wx-rel-circle-copy span{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wx-rel-circle-copy b{ color:#36332c; font-size:13px; }
.wx-rel-circle-copy span{ margin-top:3px; color:#8f8777; font-size:11px; }
.wx-rel-circle-task>i{ width:7px; height:7px; margin-right:4px; border-radius:50%; background:#b49361; box-shadow:0 0 0 4px rgba(180,147,97,.12); }
.wx-rel-circle-task.needs-attention>i{ background:#b87878; box-shadow:0 0 0 4px rgba(184,120,120,.11); }
.wx-rel-circle-foot{ padding-top:8px; color:#9b9383; font-size:10.5px; line-height:1.5; }

.wx-rel-reqs{ padding:8px 13px 24px; }
.wx-rel-section-label{ padding:15px 4px 7px; color:#77777f; font-size:12px; font-weight:600; }
.wx-rel-section-label.attention{ color:#9b7373; }
.wx-rel-resume{ margin-bottom:9px; padding:9px 12px; border-radius:13px; color:#827761; background:#fbf8f1; font-size:11.5px; line-height:1.5; }
.wx-rel-task-card,.wx-rel-error-card{ margin-bottom:10px; padding:16px; border-radius:20px; background:#fff; box-shadow:0 6px 20px rgba(22,22,30,.055); }
.wx-rel-thread{ display:flex; align-items:center; gap:9px; margin-bottom:14px; }
.wx-rel-thread>i{ height:1px; flex:1; position:relative; background:linear-gradient(90deg,#b49361 0 46%,#e6e1d8 46% 100%); }
.wx-rel-thread>i::after{ content:""; position:absolute; left:44%; top:50%; width:6px; height:6px; border-radius:50%; background:#b49361; transform:translate(-50%,-50%); }
.wx-rel-thread-person{ width:56px; min-width:0; display:flex; flex-direction:column; align-items:center; gap:4px; }
.wx-rel-thread-person small{ width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#85858d; font-size:10.5px; text-align:center; }
.wx-rel-thread-av{ width:34px; height:34px; border-radius:12px; background:#b3a281; font-size:12px; }
.wx-rel-thread-av.ghost{ color:#8b8b92; border:1px dashed #ceced4; background:#f0f0f3; }
.wx-rel-task-title{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#252529; font-size:15px; font-weight:600; }
.wx-rel-task-copy{ margin-top:5px; color:#7d7d85; font-size:12px; line-height:1.55; }
.wx-rel-steps{ display:flex; align-items:center; gap:6px; margin-top:13px; overflow-x:auto; scrollbar-width:none; }
.wx-rel-steps::-webkit-scrollbar{ display:none; }
.wx-rel-step{ flex:0 0 auto; padding:5px 9px; border-radius:999px; color:#aaaab1; background:#f3f3f5; font-size:10.5px; }
.wx-rel-step.done{ color:#8b7b5b; background:#f8f3e9; }
.wx-rel-step.current{ color:#fff; background:#b49361; }
.wx-rel-task-foot{ display:flex; align-items:flex-end; gap:10px; margin-top:14px; padding-top:12px; border-top:1px solid #f0f0f2; }
.wx-rel-task-foot>span{ min-width:0; flex:1; color:#aaaab0; font-size:10.5px; line-height:1.45; }
.wx-rel-text-action{ min-height:44px; padding:0 5px 0 14px; border:0; color:#8b7856; background:transparent; font:600 12px/1 var(--font-sans); cursor:pointer; }
.wx-rel-request-row{ display:flex; align-items:center; gap:12px; padding:14px; margin-bottom:8px; border-radius:19px; background:#fff; box-shadow:0 5px 18px rgba(22,22,30,.05); }
.wx-rel-avatar{ width:44px; height:44px; border-radius:13px; font-size:17px; }
.wx-rel-request-mid{ min-width:0; flex:1; }
.wx-rel-request-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#202024; font-size:15px; font-weight:600; }
.wx-rel-request-msg{ margin-top:3px; color:#74747c; font-size:12px; line-height:1.45; word-break:break-word; }
.wx-rel-direction{ display:inline-block; max-width:100%; margin-top:5px; padding:3px 8px; border-radius:999px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#8c7a58; background:#f8f3e9; font-size:10.5px; }
.wx-rel-direction.incoming{ color:#777780; background:#f1f1f3; }
.wx-rel-request-ops{ display:flex; flex:0 0 auto; gap:6px; }
.wx-rel-request-ops button{ min-height:40px; padding:0 13px; border:0; border-radius:999px; font:600 12.5px/1 var(--font-sans); cursor:pointer; }
.wx-rel-request-ops .wx-req-ok{ color:#fff; background:#1f1f22; }
.wx-rel-reject{ color:#6e6e75; background:#eeeef1; }
.wx-rel-wait{ flex:0 0 auto; color:#9b9ba2; font-size:11.5px; }
.wx-rel-error-head{ display:flex; align-items:flex-start; gap:12px; }
.wx-rel-error-icon{ width:34px; height:34px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; color:#8e7751; background:#f8f3e9; font-size:15px; font-style:normal; }
.wx-rel-error-card.face .wx-rel-error-icon{ color:#8e6f6f; background:#faf0f0; }
.wx-rel-error-head>div{ min-width:0; }
.wx-rel-error-head b,.wx-rel-error-head span,.wx-rel-error-card.compact>div>div b,.wx-rel-error-card.compact>div>div span{ display:block; }
.wx-rel-error-head b,.wx-rel-error-card.compact b{ color:#29292d; font-size:14px; }
.wx-rel-error-head span,.wx-rel-error-card.compact span{ margin-top:5px; color:#7c7c84; font-size:12px; line-height:1.55; }
.wx-rel-empty{ min-height:280px; padding:38px 22px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.wx-rel-empty>span{ color:#c4b898; font:300 29px/1 var(--font-sans); }
.wx-rel-empty b{ margin-top:10px; color:#525258; font-size:14px; }
.wx-rel-empty p{ max-width:240px; margin:7px 0 0; color:#a0a0a7; font-size:12px; line-height:1.6; }

.wx-rel-origin-card{ margin-bottom:14px; padding:18px; border-radius:20px; background:#fff; box-shadow:0 6px 20px rgba(20,20,30,.06); }
.wx-rel-origin-label{ color:#aa956a; font-size:10.5px; font-weight:600; letter-spacing:.12em; }
.wx-rel-origin-route{ display:flex; align-items:center; gap:10px; margin-top:12px; }
.wx-rel-origin-route>span{ width:58px; min-width:0; display:flex; flex-direction:column; align-items:center; gap:5px; }
.wx-rel-origin-route>span b{ width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#5d574b; font-size:11px; text-align:center; }
.wx-rel-origin-route>i{ height:1px; flex:1; position:relative; background:#d7c49b; font-style:normal; }
.wx-rel-origin-route>i small{ position:absolute; left:50%; bottom:5px; padding:0 6px; color:#9b875e; background:#fff; transform:translateX(-50%); white-space:nowrap; font-size:9.5px; }
.wx-rel-origin-av{ width:36px; height:36px; border-radius:13px; background:#b3a281; font-size:13px; }
.wx-rel-origin-copy{ margin-top:12px; color:#746c5e; font-size:12px; line-height:1.6; }
.wx-rel-origin-copy>span{ display:block; margin-top:3px; color:#aaa08c; font-size:10.5px; }
.wx-rel-avatar-state{ margin-bottom:14px; padding:13px 14px; border:1px solid #ececf0; border-radius:18px; display:flex; align-items:center; gap:11px; background:#fff; box-shadow:0 5px 18px rgba(22,22,30,.04); }
.wx-rel-avatar-state-av{ width:40px; height:40px; border-radius:13px; position:relative; display:flex; align-items:center; justify-content:center; overflow:visible; flex:0 0 auto; color:#fff; background:#aaaab1; background-size:cover; background-position:center; font-size:15px; }
.wx-rel-avatar-state.pending .wx-rel-avatar-state-av::after{ content:""; position:absolute; right:-2px; bottom:-2px; width:8px; height:8px; border:2px solid #fff; border-radius:50%; background:#b49361; animation:wxRelAvatarPulse 1.3s ease-in-out infinite; }
.wx-rel-avatar-state>div{ min-width:0; flex:1; }
.wx-rel-avatar-state b,.wx-rel-avatar-state span{ display:block; }
.wx-rel-avatar-state b{ color:#303034; font-size:13.5px; }
.wx-rel-avatar-state span{ margin-top:4px; color:#85858d; font-size:11.5px; line-height:1.5; }
.wx-rel-avatar-state button{ min-height:44px; padding:0 13px; border:0; border-radius:999px; flex:0 0 auto; color:#fff; background:#202024; font:600 12px/1 var(--font-sans); cursor:pointer; }
.wx-rel-avatar-state.failed{ border-color:#eee2e2; background:#fffafa; }
@keyframes wxRelAvatarPulse{ 50%{ opacity:.38; transform:scale(.72); } }
.wx-ct-newfr.wx-rel-attention .wx-ct-newfr-ic{ background:#7f7160; }
#wx-notif.wx-notif-relation{ background:#fff; border:1px solid rgba(180,147,97,.24); }
#wx-notif.wx-notif-relation .wx-notif-nm{ color:#34312c; }

.wx-rel-choice:focus-visible,.wx-rel-sheet-cancel:focus-visible,.wx-rel-unavailable button:focus-visible,.wx-rel-main:focus-visible,.wx-rel-ghost:focus-visible,.wx-rel-circle-task:focus-visible,.wx-rel-text-action:focus-visible,.wx-rel-request-ops button:focus-visible,.wx-rel-avatar-state button:focus-visible{ outline:2px solid rgba(86,74,51,.65); outline-offset:2px; }
@media(max-width:350px){
  .wx-rel-sheet{ padding-left:14px; padding-right:14px; }
  .wx-rel-request-row{ align-items:flex-start; flex-wrap:wrap; }
  .wx-rel-request-mid{ flex-basis:calc(100% - 58px); }
  .wx-rel-request-ops{ width:100%; padding-left:56px; }
  .wx-rel-request-ops button{ flex:1; min-height:44px; }
  .wx-rel-wait{ margin-left:56px; }
  .wx-rel-actions{ flex-wrap:wrap; }
  .wx-rel-actions button{ flex:1 0 100%; }
  .wx-rel-task-title{ white-space:normal; }
  .wx-rel-avatar-state{ align-items:flex-start; flex-wrap:wrap; }
  .wx-rel-avatar-state>div{ flex-basis:calc(100% - 53px); }
  .wx-rel-avatar-state button{ width:100%; }
}
@media(prefers-reduced-motion:reduce){
  .wx-rel-sheet,.wx-rel-circle-task,.wx-rel-choice,.wx-rel-main,.wx-rel-ghost{ transition:none!important; animation:none!important; }
  .wx-rel-circle-task>i{ box-shadow:none; }
  .wx-rel-avatar-state.pending .wx-rel-avatar-state-av::after{ animation:none; }
}
.wx-cpv-banner{ background:#fbf8f1; border:1px solid #efe6d2; border-radius:14px; padding:12px 14px; margin:8px 0 11px; }
.wx-cpv-k{ font-size:11px; letter-spacing:.14em; color:#b3a281; }
.wx-cpv-t{ font-size:13px; color:#6d6352; margin-top:5px; line-height:1.7; }
.wx-cpv-ok{ display:inline-block; margin-top:10px; padding:9px 34px; border-radius:999px; background:#1c1c1e; color:#fff; font-size:13px; cursor:pointer; }
/* 落地方案-41 · 关于我重画：①TA 们眼里的你（beliefs 聚合）②人设底稿折叠头 */
.wx-am-bel{ display:flex; gap:10px; padding:12px 0; border-top:.5px solid rgba(0,0,0,.06); }
.wx-am-bel:first-of-type{ border-top:none; }
.wx-am-bel-av{ width:30px; height:30px; border-radius:9px; flex:0 0 auto; background-color:#d6d6da; background-size:cover; background-position:center; }
.wx-am-bel-bx{ flex:1; min-width:0; }
.wx-am-bel-who{ font-size:12px; color:var(--wx-t2); margin-bottom:3px; }
.wx-am-bel-imp{ font-size:13.5px; color:var(--wx-t1); line-height:1.6; word-break:break-word; }
.wx-am-bel-dim{ color:var(--wx-t3); }
.wx-am-draft-h{ display:flex; align-items:center; gap:8px; cursor:pointer; padding:2px 0; }
.wx-am-draft-h b{ font-size:15px; font-weight:600; color:var(--wx-t1); flex:0 0 auto; }
.wx-am-draft-hint{ flex:1; min-width:0; font-size:12px; color:var(--wx-t2); text-align:right; }
/* 折叠行的箭头（2026-07-17 收敛）：收起态就转成【向下】⌄、展开态转【向上】⌃。
   原本收起态是 ›，与全站「进下一页」的导航箭头同形，玩家会预期跳转、结果原地展开——符号跟交互走。 */
.wx-am-draft-h .wx-setapp-go{ transition:transform .18s; transform:rotate(90deg); }
.wx-mp2-foldsec.open .wx-am-draft-h .wx-setapp-go{ transform:rotate(-90deg); }
.wx-am-pform .wx-mp2-foldbody > *{ margin-bottom:8px; }
/* 关于我·冷启动空态：没有任何 beliefs 时占住「TA 们眼里的你」这一组，别让页面塌回填表页观感 */
.wx-am-bel-empty{ font-size:13px; color:var(--wx-t2); line-height:1.75; padding:10px 2px 4px; }
.wx-mem-it{ display:flex; align-items:flex-start; gap:9px; padding:10px 14px; background:rgba(120,120,130,.07); border-radius:14px; margin-bottom:7px; }
.wx-mem-dot{ width:5px; height:5px; border-radius:50%; background:var(--wx-t3); margin-top:7px; flex:none; }
.wx-mem-t{ flex:1; font-size:13.5px; color:var(--wx-t1); line-height:1.45; }
.wx-mem-ph{ font-size:11px; color:var(--wx-t3); flex:none; margin-top:1px; }
.wx-mem-summary{ font-size:13px; color:var(--wx-t2); line-height:1.6; padding:12px 14px; background:rgba(120,120,130,.07); border-radius:14px; }
.wx-mem-memo{ width:100%; box-sizing:border-box; border:none; border-radius:14px; padding:12px 14px; font-size:13.5px; background:rgba(120,120,130,.10); color:var(--wx-t1); font-family:inherit; line-height:1.5; resize:vertical; min-height:64px; outline:none; }
.wx-mem-savebtn{ margin-top:10px; border:none; background:var(--wx-t1); color:#fff; border-radius:999px; padding:9px 22px; font-size:13px; font-family:inherit; cursor:pointer; }
.wx-mem-empty{ text-align:center; color:var(--wx-t3); font-family:var(--font-serif); font-size:15px; padding:48px 26px; line-height:1.7; }
/* 关于我 · 人设块 */
.wx-am-sech{ font-size:11px; letter-spacing:1.4px; color:var(--wx-t2); font-weight:600; margin:2px 2px 11px; }
.wx-am-pform .wx-set-in{ margin-bottom:9px; }
.wx-am-ta{ width:100%; box-sizing:border-box; border:none; border-radius:12px; padding:11px 13px; font-size:14px; background:rgba(120,120,130,.10); color:var(--wx-t1); font-family:inherit; line-height:1.5; resize:vertical; min-height:54px; outline:none; margin-bottom:9px; }
/* ⭐Genie frame09：通讯录=关系中心。三张同权重创造卡 + 我的Ta/好友/群聊 分组 */
.wx-ct{ flex:1; overflow-y:auto; background:var(--wx-bg); padding:4px 16px 20px; }
.wx-ct-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:8px 0 4px; }
.wx-ct-card{ background:var(--wx-card); border-radius:22px; padding:22px 6px 16px; display:flex; flex-direction:column; align-items:center; gap:14px; cursor:pointer; box-shadow:0 5px 18px rgba(20,20,30,.06); transition:transform .14s; }
.wx-ct-card:active{ transform:scale(.96); }
.wx-ct-card-ic{ width:30px; height:30px; display:flex; align-items:center; justify-content:center; color:var(--wx-t1); }
.wx-ct-card-ic svg{ width:27px; height:27px; }
.wx-ct-card-ic .genie-dots{ font-size:24px; color:var(--wx-t1); }
.wx-ct-card-lb{ font-size:15px; font-weight:500; color:var(--wx-t1); letter-spacing:.5px; }
.wx-ct-newfr{ display:flex; align-items:center; gap:12px; padding:12px 14px; margin:8px 0 2px; background:var(--wx-card); border-radius:18px; cursor:pointer; box-shadow:0 3px 12px rgba(20,20,30,.05); }
.wx-ct-newfr:active{ background:rgba(0,0,0,.03); }
.wx-ct-newfr-ic{ width:40px; height:40px; min-width:40px; border-radius:50%; background:#141414; color:#fff; display:flex; align-items:center; justify-content:center; }
.wx-ct-newfr-ic svg{ width:22px; height:22px; }
.wx-ct-newfr-tx{ flex:1; min-width:0; }
.wx-ct-newfr-tx b{ display:block; font-size:15px; font-weight:500; color:var(--wx-t1); }
.wx-ct-newfr-tx span{ font-size:12.5px; color:var(--wx-t2); }
.wx-ct-sec{ margin-top:16px; }
.wx-ct-sech{ display:flex; align-items:baseline; justify-content:space-between; padding:0 4px 5px; }
.wx-ct-sech > span:first-child{ font-size:13px; font-weight:600; color:var(--wx-t1); letter-spacing:.3px; }
.wx-ct-sec-n{ font-size:12.5px; color:var(--wx-t3); }
.wx-ct-avwrap{ position:relative; flex:none; display:flex; }
.wx-ct-mine-dot{ position:absolute; bottom:-3px; right:-3px; width:17px; height:17px; border-radius:50%; background:#141414; border:2px solid var(--wx-bg); display:flex; align-items:center; justify-content:center; }
/* 换机页 / 新增世界页：返回桌面（深空页用，浅色） */
.wx-login-home{ color:#cdd1d7; font-size:14px; cursor:pointer; padding:4px 2px; min-width:30px; }
.wx-login-home:active{ color:#fff; }

/* 设置 app：iOS 分组列表风（白圆角卡浮在 --wx-bg 上），控件类沿用「我·设置」的 wx-set-* 让既有绑定零改动 */
.wx-setapp{ flex:1; min-height:0; overflow-y:auto; background:var(--wx-bg); padding:12px 12px 20px; }
.wx-setapp-group{ background:var(--wx-card); border-radius:var(--wx-r-card); padding:2px 14px; margin-bottom:12px; }
.wx-setapp-row{ display:flex; align-items:center; gap:11px; padding:12px 0; cursor:pointer; }
.wx-setapp-row:active{ background:var(--wx-press); margin:0 -14px; padding-left:14px; padding-right:14px; border-radius:var(--wx-r-card); }
.wx-setapp-ic{ width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:15px; color:#fff; flex:0 0 auto; }
.wx-setapp-t{ flex:1; min-width:0; }
.wx-setapp-t b{ display:block; font-size:15px; font-weight:500; color:var(--wx-t1); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wx-setapp-t span{ display:block; font-size:12px; color:var(--wx-t2); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wx-setapp-go{ color:var(--wx-t3); font-size:17px; flex:0 0 auto; }
.wx-setapp-pad{ padding:13px 0 15px; }
/* 页底危险区（2026-07-17 收敛）：删除账号与常规账号操作拉开距离，别和绑邮箱/导出/退出挤同一张卡 */
.wx-setapp-group.wx-setapp-danger{ margin-top:22px; }
.wx-setapp-note{ font-size:12px; color:var(--wx-t2); line-height:1.55; margin-top:8px; }
/* 设置·开关行（落地方案-18 P0 现实时钟，可复用为通用 toggle）：原生 checkbox 隐藏、用 .wx-set-tgsw 画 iOS 风滑块 */
.wx-set-tgrow{ display:flex; align-items:flex-start; gap:12px; cursor:pointer; }
/* 落地方案-41 · 开关作用域徽标：所有世界(全局 cfg)=浅灰 / 本世界(存档级 S)=描边——影响面一眼可见，不再藏进圈叹号小字 */
.wx-set-scope{ flex:0 0 auto; font-size:10.5px; padding:2px 7px; border-radius:999px; background:rgba(0,0,0,.035); color:var(--wx-t-soft); letter-spacing:.3px; margin-top:3px; }
.wx-set-scope.w{ background:var(--wx-accent-soft); color:var(--wx-t1); border:1px solid rgba(20,20,20,.14); padding:1px 6px; }
/* 落地方案-41 · 聊天模型三档（均衡/深度/极速）：档位=写 chatProfile 的快捷方式，手选收进「高级」 */
.wx-tier{ display:flex; gap:8px; margin:6px 0 4px; }
.wx-tier-t{ flex:1; border:1.3px solid var(--wx-line-strong); border-radius:14px; padding:10px 6px 9px; text-align:center; cursor:pointer; transition:border-color .15s, background .15s; }
.wx-tier-t b{ display:block; font-size:13.5px; font-weight:600; color:var(--wx-t1); }
.wx-tier-t span{ display:block; font-size:10.5px; color:var(--wx-t2); margin-top:3px; }
.wx-tier-t.on{ border-color:var(--wx-t1); background:var(--wx-accent-soft); }
.wx-tier-t:active{ background:var(--wx-press); }
/* 落地方案-41 · 组内行分割（账号组：用量块/导出/删号 相邻行） */
.wx-setapp-group .wx-setapp-pad + .wx-setapp-row, .wx-setapp-group .wx-setapp-row + .wx-setapp-row{ border-top:1px solid var(--wx-line); }
.wx-setapp-group .wx-setapp-pad + .wx-setapp-row:active, .wx-setapp-group .wx-setapp-row + .wx-setapp-row:active{ border-top-color:transparent; }
/* 落地方案-29：主动频率三档 pill（安静/自然/热络），只在「对面主动找我」开着时显示 */
.wx-set-plrow{ cursor:default; align-items:center; }
.wx-set-pl{ flex:0 0 auto; display:inline-flex; gap:4px; background:rgba(120,120,130,.1); border-radius:999px; padding:3px; }
.wx-set-plb{ border:none; background:transparent; border-radius:999px; padding:4px 11px; font-size:12px; color:#6a6a70; cursor:pointer; font-family:inherit; transition:background .15s,color .15s; }
.wx-set-plb.on{ background:#fff; color:#1c1c20; font-weight:600; box-shadow:0 1px 4px rgba(0,0,0,.08); }
.wx-set-tgt{ flex:1; min-width:0; }
.wx-set-tgt b{ display:block; font-size:15px; font-weight:500; color:var(--wx-t1); }
.wx-set-tgt span{ display:block; font-size:12px; color:var(--wx-t2); line-height:1.55; margin-top:3px; }
/* 开关行「隐藏式说明」(2026-07-04)：说明默认藏，标题旁灰色圈叹号点开才显示 */
.wx-set-info{ display:inline-flex; vertical-align:-2px; margin-left:6px; color:#b4b4ba; cursor:pointer; padding:3px; margin-top:-3px; margin-bottom:-3px; }   /* padding 撑大点击热区，负 margin 抵掉不占行高 */
.wx-set-info:active{ color:#7a7a82; }
.wx-set-info:focus-visible{ outline:2px solid rgba(28,28,32,.5); outline-offset:2px; border-radius:999px; }
.wx-set-tgt .wx-set-tgnote{ display:none; }
.wx-set-tgt.noteon .wx-set-tgnote{ display:block; animation:wxin .18s ease both; }
.wx-set-tg{ position:absolute; opacity:0; width:1px; height:1px; }
.wx-set-tgsw{ flex:0 0 auto; width:44px; height:26px; border-radius:13px; background:#d8d8da; position:relative; transition:background .2s; margin-top:2px; }
.wx-set-tgsw::after{ content:''; position:absolute; top:2px; left:2px; width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .2s; }
.wx-set-tg:checked + .wx-set-tgsw{ background:var(--wx-green); }
.wx-set-tg:checked + .wx-set-tgsw::after{ transform:translateX(18px); }
.wx-set-tg:focus-visible + .wx-set-tgsw{ outline:2px solid rgba(28,28,32,.55); outline-offset:3px; }
/* ⚙️ 模型测速 / 中转站目录（一键测速 + 拉取模型） */
.wx-mp-out{ margin-top:10px; }
.wx-mp-out:empty{ display:none; }
.wx-mp-sum{ font-size:12px; color:var(--wx-t2); margin:2px 0 6px; }
.wx-mp-list{ display:flex; flex-direction:column; border:1px solid var(--wx-line); border-radius:var(--wx-r-md); overflow:hidden; background:var(--wx-card); }
.wx-mp-row{ display:flex; align-items:center; gap:9px; padding:9px 11px; border-top:.5px solid var(--wx-line); cursor:pointer; }
.wx-mp-row:first-child{ border-top:none; }
.wx-mp-row:active{ background:var(--wx-press); }
.wx-mp-row.cur{ background:var(--wx-accent-soft); }
.wx-mp-row.bad{ opacity:.72; }
.wx-mp-dot{ flex:0 0 auto; font-size:11px; }
.wx-mp-name{ flex:1; min-width:0; font-size:13.5px; color:var(--wx-t1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wx-mp-row.cur .wx-mp-name::after{ content:' ·当前'; color:var(--wx-accent-deep); font-size:11px; }
.wx-mp-ms{ flex:0 0 auto; font-size:12px; font-variant-numeric:tabular-nums; }
.wx-mp-ms.good{ color:var(--wx-ok-text); }
.wx-mp-ms.err{ color:var(--wx-err-text); }
.wx-mp-hint{ font-size:11.5px; color:var(--wx-t3); line-height:1.5; margin-top:6px; }
.wx-mp-hint.err{ color:var(--wx-err-text); }
.wx-mp-relay{ margin-top:10px; }
.wx-mp-relay:first-child{ margin-top:0; }
.wx-mp-relay-h{ font-size:13px; font-weight:600; color:var(--wx-t1); }
.wx-mp-cnt{ font-weight:400; color:var(--wx-t3); }
.wx-mp-cnt.err{ color:var(--wx-err-text); }
.wx-mp-models{ max-height:220px; overflow-y:auto; border:1px solid var(--wx-line); border-radius:var(--wx-r-md); background:var(--wx-card); }
.wx-mp-mrow{ display:flex; align-items:center; gap:8px; padding:7px 10px; border-top:.5px solid var(--wx-line); }
.wx-mp-mrow:first-child{ border-top:none; }
.wx-mp-mname{ flex:1; min-width:0; font-size:12.5px; color:var(--wx-t2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wx-mp-testbtn{ flex:0 0 auto; border:none; background:var(--wx-line-faint); color:var(--wx-blue); border-radius:var(--wx-r-sm); padding:4px 10px; font-size:12px; cursor:pointer; font-variant-numeric:tabular-nums; }
.wx-mp-testbtn:active{ background:var(--wx-press); }
.wx-mp-testbtn.good{ background:var(--wx-ok-bg); color:var(--wx-ok-text); }
.wx-mp-testbtn.err{ background:var(--wx-err-bg); color:var(--wx-err-text); }
.wx-mp-testbtn:disabled{ opacity:.6; }
/* 关于我（落地方案-18 P3 玩家画像透明视图） */
.wx-am-list{ display:flex; flex-direction:column; margin-top:4px; }
.wx-am-row{ display:flex; align-items:center; gap:10px; padding:11px 1px; border-top:.5px solid rgba(0,0,0,.06); }
.wx-am-row:first-child{ border-top:none; }
.wx-am-t{ flex:1; min-width:0; font-size:14px; color:var(--wx-t1); line-height:1.45; }
.wx-am-src{ font-size:11px; color:var(--wx-t3); flex:0 0 auto; }
.wx-am-del{ flex:0 0 auto; width:24px; height:24px; border-radius:50%; text-align:center; line-height:24px; font-size:12px; color:var(--wx-t3); cursor:pointer; }
.wx-am-del:active{ background:rgba(220,60,60,.14); color:#e54d42; }
/* 32-B 关于我·私密锁：👥可传开（淡）/ 🔒私密（实） */
.wx-cf-knows{ margin-top:16px; }

/* ===== B 模式分流（落地方案-15）：陪伴档轻向导（与桌面同套新拟态视觉）===== */
.wx-daily{ flex:1; min-height:0; display:flex; flex-direction:column; overflow:hidden; position:relative; background:var(--hm-bg); }
.wx-dl-top{ display:flex; align-items:center; gap:6px; padding:10px 16px 2px; color:var(--hm-ink); }
.wx-dl-top b{ font-size:17px; letter-spacing:.5px; }
.wx-dl-top .wx-back{ color:var(--hm-ink); font-size:26px; line-height:1; padding:0 6px 2px 0; cursor:pointer; }
.wx-dl-step{ margin-left:auto; font-size:12.5px; color:var(--hm-ink3); font-variant-numeric:tabular-nums; }
.wx-dl-hint{ padding:6px 18px 10px; font-size:12.5px; line-height:1.6; color:var(--hm-ink2); }
/* 手动发起群聊·选人 picker：与加好友页同一套标准顶栏 + iOS 分组卡语言（2026-07-22 拍板 A） */
.wx-newgroup{ display:flex; flex-direction:column; height:100%; min-height:0; background:var(--wx-bg); }
.wx-ng-top b{ max-width:calc(100% - 176px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wx-ng-done{ position:absolute; right:16px; top:50%; transform:translateY(-50%); height:30px; border:0; border-radius:999px; padding:0 14px; font:600 13px/30px inherit; color:#fff; background:#141414; cursor:pointer; white-space:nowrap; }
.wx-ng-done.off,.wx-ng-done:disabled{ color:#b6b6bc; background:#eaeaee; cursor:default; }
.wx-ng-hint{ padding:4px 22px 12px; font-size:12.5px; line-height:1.6; color:var(--wx-t2); }
.wx-ng-hint b{ color:var(--wx-t1); font-weight:600; }
.wx-pick-scroll{ flex:1; min-height:0; overflow-y:auto; padding:2px 0 16px; }
.wx-pick-card{ margin:2px 16px 0; background:var(--wx-card); border-radius:22px; box-shadow:0 6px 20px rgba(20,20,30,.07); overflow:hidden; }
.wx-pick-row{ position:relative; display:flex; align-items:center; gap:12px; padding:9px 14px 9px 16px; cursor:pointer; transition:background .12s; }
.wx-pick-row + .wx-pick-row::before{ content:''; position:absolute; left:90px; right:14px; top:0; height:1px; background:rgba(20,20,30,.055); }
.wx-pick-row:active{ background:rgba(0,0,0,.03); }
.wx-pick-row .wx-row-av{ width:46px; height:46px; min-width:46px; border-radius:14px; font-size:19px; }
.wx-pick-row .wx-row-name{ font-size:15.5px; color:var(--wx-t1); }
.wx-pick-row.on .wx-row-name{ font-weight:600; }
.wx-pick-box{ flex:0 0 auto; width:22px; height:22px; border-radius:50%; border:1.5px solid #cfcfd6; display:flex; align-items:center; justify-content:center; font-size:12px; color:transparent; background:#fff; transition:background .15s,border-color .15s,color .15s; }
.wx-pick-row.on .wx-pick-box{ color:#fff; background:#141414; border-color:#141414; }
.wx-ng-done:focus-visible,.wx-pick-row:focus-visible{ outline:2px solid rgba(28,28,32,.55); outline-offset:-3px; }
.wx-dl-body{ flex:1; min-height:0; overflow-y:auto; padding:2px 14px 12px; }
.wx-dl-name{ width:100%; height:44px; border-radius:14px; border:none; padding:0 15px; font-size:14px; color:var(--hm-ink); outline:none;
  background:var(--hm-bg);
  box-shadow:inset 4px 4px 9px var(--hm-dk), inset -4px -4px 9px var(--hm-lt); }
.wx-dl-name::placeholder{ color:var(--hm-ink3); }
/* 32-B 建档性别轻选（新拟态，与输入框同语言；选中=内凹） */
.wx-dl-grow{ display:flex; align-items:center; gap:8px; margin-top:10px; padding:0 3px; }
.wx-dl-glb{ font-size:12.5px; color:var(--hm-ink2); flex:0 0 auto; }
.wx-dl-gbtn{ border:none; border-radius:999px; padding:6px 15px; font-size:13px; color:var(--hm-ink2); cursor:pointer; font-family:inherit;
  background:var(--hm-bg);
  box-shadow:4px 4px 8px var(--hm-dk), -4px -4px 8px var(--hm-lt); transition:box-shadow .15s,color .15s; }
.wx-dl-gbtn.on{ color:var(--hm-ink); font-weight:600;
  box-shadow:inset 3px 3px 7px var(--hm-dk), inset -3px -3px 7px var(--hm-lt); }
.wx-dl-gnote{ font-size:11px; color:var(--hm-ink3); flex:1; min-width:0; text-align:right; }
.wx-dl-picked{ margin-top:10px; border-radius:18px; padding:3px 13px; border:none;
  background:var(--hm-bg);
  box-shadow:7px 7px 14px var(--hm-dk), -7px -7px 14px var(--hm-lt); }
.wx-dl-row{ display:flex; align-items:center; gap:10px; padding:9px 0; }
.wx-dl-row + .wx-dl-row{ border-top:.5px solid rgba(50,45,82,.08); }
.wx-dl-row-av{ width:38px; height:38px; border-radius:11px; background-size:cover; background-position:center top; flex:0 0 auto; box-shadow:0 2px 8px rgba(126,104,190,.2); }
.wx-dl-row-t{ flex:1; min-width:0; }
.wx-dl-row-t b{ display:block; font-size:14px; color:var(--hm-ink); }
.wx-dl-row-t span{ display:block; font-size:11px; color:var(--hm-ink3); margin-top:1px; }
.wx-dl-rel{ height:32px; border-radius:9px; border:none; background:var(--hm-bg); color:var(--hm-ink); font-size:12.5px; padding:0 6px; outline:none; box-shadow:3px 3px 6px var(--hm-dk), -3px -3px 6px var(--hm-lt); }
.wx-dl-rm{ color:var(--hm-ink3); font-size:14px; padding:6px; cursor:pointer; }
.wx-dl-grid{ margin-top:12px; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.wx-dl-card{ position:relative; border-radius:16px; overflow:hidden; cursor:pointer; border:2.5px solid transparent;
  box-shadow:6px 6px 12px var(--hm-dk), -6px -6px 12px var(--hm-lt); transition:transform .13s, border-color .13s; background:var(--hm-bg); }
.wx-dl-card:active{ transform:scale(.96); }
.wx-dl-card.on{ border-color:#000000; }
.wx-dl-card-img{ aspect-ratio:3/3.6; background-size:cover; background-position:center top; }
.wx-dl-card-cap{ position:absolute; left:0; right:0; bottom:0; padding:14px 8px 6px; font-size:10.5px; line-height:1.45; color:#fff;
  background:linear-gradient(180deg, rgba(20,16,40,0), rgba(20,16,40,.72)); text-shadow:0 1px 2px rgba(0,0,0,.4); }
.wx-dl-card-cap b{ display:block; font-weight:600; font-size:10px; opacity:.85; }
.wx-dl-badge{ position:absolute; top:7px; left:7px; z-index:1; font-size:11px; font-weight:600; color:#fff; padding:3px 9px; border-radius:99px;
  background:linear-gradient(135deg,#141414,#141414); box-shadow:0 3px 10px rgba(0,0,0,.45); }
.wx-dl-loading{ grid-column:1/-1; text-align:center; padding:30px 0; font-size:13px; color:var(--hm-ink3); }
.wx-dl-foot{ padding:10px 14px 12px; }
#wx-dl-go{ width:100%; height:48px; border:none; border-radius:16px; font-size:16px; font-weight:600; color:#fff; cursor:pointer;
  background:linear-gradient(135deg,#141414,#000000); box-shadow:0 10px 26px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.35); }
#wx-dl-go:disabled{ opacity:.45; box-shadow:none; }
#wx-dl-go:active{ transform:scale(.98); }

/* ===== 捏人系统（落地方案-18 P1）：入口卡 + 表单（复用 glass 拟态） ===== */
.wx-dl-craft .wx-dl-craft-img{ aspect-ratio:3/3.6; display:flex; align-items:center; justify-content:center; font-size:34px; font-weight:300; color:var(--hm-ink2);
  background:repeating-linear-gradient(45deg, rgba(0,0,0,.07), rgba(0,0,0,.07) 8px, transparent 8px, transparent 16px); }
.wx-dl-craft .wx-dl-card-cap{ background:linear-gradient(180deg, rgba(20,16,40,0), rgba(20,16,40,.5)); }
.wx-cf-body{ display:flex; flex-direction:column; }
.wx-cf-head{ display:flex; gap:13px; align-items:center; margin:6px 0 2px; }
.wx-cf-av{ width:64px; height:64px; border-radius:18px; flex:0 0 auto; background-size:cover; background-position:center top; cursor:pointer; position:relative;
  display:flex; align-items:center; justify-content:center; font-size:26px; color:#fff; box-shadow:5px 5px 11px var(--hm-dk), -5px -5px 11px var(--hm-lt); }
.wx-cf-av-empty{ font-weight:600; }
.wx-cf-av-cam{ position:absolute; right:-3px; bottom:-3px; width:22px; height:22px; border-radius:50%; background:linear-gradient(135deg,#141414,#000000); color:#fff; font-size:13px; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(0,0,0,.5); }
.wx-cf-headr{ flex:1; min-width:0; display:flex; flex-direction:column; gap:8px; }
.wx-cf-row2{ display:flex; gap:8px; align-items:center; }
.wx-cf-in{ width:100%; border:none; border-radius:13px; padding:0 14px; font-size:14px; color:var(--hm-ink); outline:none; background:var(--hm-bg); box-shadow:inset 4px 4px 9px var(--hm-dk), inset -4px -4px 9px var(--hm-lt); }
.wx-cf-in::placeholder{ color:var(--hm-ink3); }
.wx-cf-name{ height:42px; font-size:15px; }
.wx-cf-age{ height:36px; width:76px; flex:0 0 auto; padding:0 10px; }
.wx-cf-gd{ height:36px; min-width:42px; padding:0 14px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:15px; cursor:pointer; color:var(--hm-ink3); background:var(--hm-bg); box-shadow:inset 3px 3px 7px var(--hm-dk), inset -3px -3px 7px var(--hm-lt); }
.wx-cf-gd[data-on]{ color:#fff; background:linear-gradient(135deg,#141414,#000000); box-shadow:0 4px 10px rgba(0,0,0,.4); }
select.wx-cf-in{ height:42px; -webkit-appearance:none; appearance:none; cursor:pointer; }
textarea.wx-cf-ta{ padding:10px 14px; line-height:1.5; resize:none; font-family:inherit; margin-bottom:8px; }
.wx-cf-lb{ display:block; font-size:12.5px; font-weight:600; color:var(--hm-ink2); margin:14px 2px 7px; }
.wx-cf-opt{ font-weight:400; color:var(--hm-ink3); }
.wx-cf-blurb{ font-size:12px; color:var(--hm-ink2); line-height:1.5; padding:8px 2px 2px; font-style:italic; }
#wx-cf-go{ width:100%; height:48px; border:none; border-radius:16px; font-size:16px; font-weight:600; color:#fff; cursor:pointer;
  background:linear-gradient(135deg,#141414,#000000); box-shadow:0 10px 26px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.35); }
#wx-cf-go:disabled{ opacity:.55; box-shadow:none; }
#wx-cf-go:active{ transform:scale(.98); }
/* 我的角色库（P2）：捏过的人卡（带色块占位 + 删除 ✕） */
.wx-dl-mine{ border-color:rgba(0,0,0,.5); }
.wx-dl-mine-blank{ aspect-ratio:3/3.6; display:flex; align-items:center; justify-content:center; font-size:40px; font-weight:600; color:#fff; }
.wx-dl-del{ position:absolute; top:6px; right:6px; z-index:2; width:22px; height:22px; border-radius:50%; background:rgba(20,16,40,.5); color:#fff; font-size:12px; line-height:22px; text-align:center; cursor:pointer; }
.wx-dl-del:active{ background:rgba(220,60,60,.85); }

/* ===== Stage A（造人切片）：空态 CTA + 添加朋友页捏人 hero + 分区标签 ===== */
.wx-empty-cta{ margin:54px 22px 0; padding:20px 18px; border-radius:18px; display:flex; align-items:center; gap:14px; cursor:pointer; text-align:left;
  background:var(--wx-card); box-shadow:0 1px 0 var(--wx-line) inset, 0 8px 24px rgba(0,0,0,.08); transition:transform .13s; animation:wxin .26s ease both; }
.wx-empty-cta:active{ transform:scale(.985); }
.wx-empty-cta-ic{ flex:0 0 auto; width:46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:26px; font-weight:300; color:#fff;
  background:linear-gradient(135deg,var(--wx-green),#3a3a40); box-shadow:0 6px 16px rgba(0,0,0,.35); }
.wx-empty-cta-tx{ min-width:0; display:flex; flex-direction:column; gap:3px; }
.wx-empty-cta-tx b{ font-size:15px; color:var(--wx-t1); }
.wx-empty-cta-tx span{ font-size:12.5px; color:var(--wx-t2); }
.wx-craft-hero{ margin:4px 0 6px; padding:16px 16px; border-radius:18px; display:flex; align-items:center; gap:13px; cursor:pointer; position:relative; overflow:hidden;
  background:linear-gradient(135deg,#141414,#000000); box-shadow:0 12px 28px rgba(0,0,0,.4); transition:transform .13s; animation:wxin .26s ease both; }
.wx-craft-hero:active{ transform:scale(.985); }
.wx-craft-hero-ic{ flex:0 0 auto; width:44px; height:44px; border-radius:13px; display:flex; align-items:center; justify-content:center; font-size:24px; background:rgba(255,255,255,.18); }
.wx-craft-hero-tx{ min-width:0; display:flex; flex-direction:column; gap:3px; color:#fff; }
.wx-craft-hero-tx b{ font-size:16px; font-weight:600; }
.wx-craft-hero-tx span{ font-size:12.5px; opacity:.9; line-height:1.4; }
.wx-dl-sec{ font-size:12.5px; font-weight:600; color:var(--hm-ink2); margin:18px 2px 2px; }

/* ⭐Genie III-09A 加好友·选预设角色：衬线 hero + 分类 chips + 大照片卡 + 末尾「去捏人」虚线卡 */
.wx-pp{ flex:1; min-height:0; display:flex; flex-direction:column; background:var(--wx-bg); }
.wx-pp-top{ flex:0 0 auto; height:48px; display:flex; align-items:center; justify-content:center; position:relative; }
.wx-pp-top .wx-back{ position:absolute; left:14px; font-size:24px; color:#1c1c20; }
.wx-pp-top b{ font-size:16px; font-weight:600; color:#1c1c20; }
.wx-pp-hero{ flex:0 0 auto; padding:14px 26px 4px; }
.wx-pp-h1{ font-family:var(--font-serif); font-style:italic; font-size:24px; line-height:1.25; color:#15151a; letter-spacing:-.2px; }
.wx-pp-h2{ font-size:12.5px; line-height:1.55; color:#86868d; margin-top:10px; max-width:19em; }
.wx-pp-chips{ flex:0 0 auto; display:flex; gap:8px; overflow-x:auto; padding:14px 22px 6px; scrollbar-width:none; }
.wx-pp-chips::-webkit-scrollbar{ display:none; }
.wx-pp-chip{ flex:0 0 auto; padding:7px 15px; border-radius:999px; font-size:12px; font-weight:500; color:#56565d; background:#fff; box-shadow:0 2px 8px rgba(20,20,30,.05); cursor:pointer; }
.wx-pp-chip.on{ background:#141414; color:#fff; font-weight:600; box-shadow:none; }
/* 32-B 首跑性别轻问（persona.gender 空时才出现，选完即隐） */
.wx-pp-gask{ margin:12px 18px 0; padding:12px 15px; border-radius:20px; background:rgba(255,255,255,.66); box-shadow:0 2px 10px rgba(20,20,30,.05); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.wx-pp-gask-lb{ font-size:12.5px; color:#56565d; flex:0 0 auto; }
.wx-pp-gbtn{ border:none; border-radius:999px; padding:6px 15px; font-size:12.5px; color:#56565d; background:#fff; box-shadow:0 2px 8px rgba(20,20,30,.07); cursor:pointer; font-family:inherit; }
.wx-pp-gbtn:active{ background:#141414; color:#fff; }
.wx-pp-gask-note{ flex:1 0 100%; font-size:11px; color:#a0a0a8; }
.wx-pp-list{ flex:1; min-height:0; overflow-y:auto; padding:10px 18px 28px; display:flex; flex-direction:column; gap:16px; }
.wx-pp-card{ flex:0 0 auto; background:#fff; border-radius:26px; box-shadow:0 6px 20px rgba(20,20,30,.07); overflow:hidden; animation:wxin .26s ease both; }
.wx-pp-cover{ position:relative; height:206px; background-size:cover; background-position:center top; }
.wx-pp-cover::after{ content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(15,15,20,.5), transparent 52%); }
.wx-pp-tag{ position:absolute; top:13px; left:13px; z-index:1; padding:5px 11px; border-radius:999px; background:rgba(255,255,255,.22); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); color:#fff; font-size:10.5px; font-weight:600; letter-spacing:.4px; }
.wx-pp-del{ position:absolute; top:11px; right:11px; z-index:2; width:26px; height:26px; border-radius:50%; background:rgba(20,20,26,.34); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:#fff; font-size:13px; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.wx-pp-id{ position:absolute; left:18px; bottom:14px; z-index:1; color:#fff; }
.wx-pp-name{ font-family:var(--font-serif); font-size:27px; line-height:1; letter-spacing:-.3px; }
.wx-pp-sub{ font-size:12.5px; opacity:.92; margin-top:4px; }
.wx-pp-cbody{ padding:15px 17px 16px; }
.wx-pp-quote{ font-size:13.5px; line-height:1.5; color:#3a3a40; }
.wx-pp-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:14px; }
.wx-pp-traits{ display:flex; gap:7px; flex-wrap:wrap; min-width:0; }
.wx-pp-traits span{ font-size:11px; color:#76767d; background:#f1f1f3; padding:4px 10px; border-radius:8px; white-space:nowrap; }
.wx-pp-add{ flex:0 0 auto; border:none; background:#141414; color:#fff; font-size:13px; font-weight:600; padding:9px 20px; border-radius:999px; cursor:pointer; transition:transform .12s; }
.wx-pp-add:active{ transform:scale(.94); }
.wx-pp-craft{ flex:0 0 auto; display:flex; align-items:center; gap:12px; cursor:pointer; }
.wx-pp-craft:active{ background:rgba(0,0,0,.03); }
.wx-pp-craft-ic{ flex:0 0 auto; width:38px; height:38px; border-radius:12px; background:#f1f1f4; display:flex; align-items:center; justify-content:center; font-size:19px; font-weight:300; color:#1c1c20; }
.wx-pp-craft-tx{ flex:1; min-width:0; }
.wx-pp-craft-tx b{ display:block; font-size:14px; font-weight:600; color:#1c1c20; }
.wx-pp-craft-tx span{ font-size:11.5px; color:#86868d; margin-top:2px; display:block; }
.wx-pp-craft-go{ flex:0 0 auto; font-size:18px; color:#b6b6bc; }

/* ⭐捏人头像上传·方形裁切器（竖图拖动选脸 + 缩放） */
.wx-crop-mask{ position:absolute; inset:0; z-index:200; background:rgba(20,20,26,.62); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; animation:wxin .18s ease both; }
.wx-crop-card{ width:min(86vw,360px); background:#fff; border-radius:24px; padding:20px 18px 16px; box-shadow:0 20px 60px rgba(20,20,30,.4); display:flex; flex-direction:column; align-items:center; }
.wx-crop-ttl{ font-size:16px; font-weight:600; color:#1c1c20; }
.wx-crop-sub{ font-size:12px; color:#9a9aa0; margin:3px 0 14px; text-align:center; }
.wx-crop-stage{ position:relative; overflow:hidden; border-radius:18px; background:#0c0c0e; touch-action:none; cursor:grab; }
.wx-crop-stage:active{ cursor:grabbing; }
.wx-crop-stage::after{ content:''; position:absolute; inset:0; border-radius:18px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.25); pointer-events:none; }
.wx-crop-img{ position:absolute; left:0; top:0; max-width:none; user-select:none; -webkit-user-drag:none; }
.wx-crop-zoom{ width:78%; margin:16px 0 2px; accent-color:#141414; }
.wx-crop-bar{ display:flex; gap:10px; width:100%; margin-top:10px; }
.wx-crop-bar button{ flex:1; height:44px; border:none; border-radius:999px; font-size:15px; font-weight:600; cursor:pointer; transition:transform .12s; }
.wx-crop-bar button:active{ transform:scale(.96); }
.wx-crop-cancel{ background:rgba(120,120,130,.12); color:#56565d; }
.wx-crop-ok{ background:#141414; color:#fff; }

/* ===== Stage B/C/D（造人切片）：分步沉浸向导 + 性格卡牌 + 人物卡 + 对话试演 ===== */
/* 步进指示 + 进场动画（沿用 suSlideFwd/Back） */
.wx-cf-dots{ position:absolute; right:14px; display:flex; gap:6px; align-items:center; }
.wx-cf-dot{ width:6px; height:6px; border-radius:50%; background:var(--hm-ink3); opacity:.5; transition:all .2s; }
.wx-cf-dot.done{ opacity:.8; background:var(--hm-ink2); }
.wx-cf-dot.on{ width:18px; border-radius:3px; opacity:1; background:linear-gradient(135deg,#141414,#000000); }
.wx-cf-anim-fwd{ animation:suSlideFwd .32s cubic-bezier(.22,.61,.36,1); }
.wx-cf-anim-back{ animation:suSlideBack .32s cubic-bezier(.22,.61,.36,1); }
.wx-cf-lead{ font-size:13px; color:var(--hm-ink2); line-height:1.6; padding:4px 2px 12px; }
/* 步骤1：性格底子横滑卡牌 */
.wx-ar-deck{ display:flex; gap:13px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 2px 16px; margin:0 -2px; scrollbar-width:none; }
.wx-ar-deck::-webkit-scrollbar{ display:none; }
.wx-ar-card{ scroll-snap-align:center; flex:0 0 80%; max-width:80%; border-radius:20px; padding:20px 18px; cursor:pointer; position:relative;
  background:var(--hm-bg); box-shadow:7px 7px 15px var(--hm-dk), -7px -7px 15px var(--hm-lt); border:2.5px solid transparent; transition:border-color .15s, transform .15s; }
.wx-ar-card:active{ transform:scale(.98); }
.wx-ar-card.on{ border-color:#141414; box-shadow:0 10px 28px rgba(0,0,0,.32); }
.wx-ar-card.on::after{ content:'✓'; position:absolute; top:14px; right:16px; width:22px; height:22px; border-radius:50%; font-size:13px; color:#fff; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#141414,#000000); }
.wx-ar-label{ font-size:19px; font-weight:700; color:var(--hm-ink); margin-bottom:8px; }
.wx-ar-blurb{ font-size:13px; color:var(--hm-ink2); line-height:1.7; min-height:46px; }
.wx-ar-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
.wx-ar-chip{ font-size:11px; color:#141414; background:rgba(0,0,0,.13); border-radius:99px; padding:3px 10px; }
/* 步骤2：一键生成头像按钮 */
.wx-cf-genbtn{ width:100%; height:42px; margin-top:14px; border:none; border-radius:13px; font-size:13px; font-weight:600; color:#141414; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px;
  background:rgba(0,0,0,.12); transition:transform .12s; }
.wx-cf-genbtn:active{ transform:scale(.98); }
.wx-cf-genbtn:disabled{ opacity:.7; cursor:default; }
.wx-cf-genhint{ font-size:11px; color:var(--hm-ink3); text-align:center; margin-top:7px; }
.wx-cf-spin{ display:inline-block; width:13px; height:13px; border:2px solid rgba(0,0,0,.3); border-top-color:#141414; border-radius:50%; animation:wxSpin .7s linear infinite; }
.wx-cf-spin.big{ width:26px; height:26px; border-width:3px; }
@keyframes wxSpin{ to{ transform:rotate(360deg); } }
/* 底部双按钮（上一步/下一步） */
.wx-cf-foot2{ display:flex; gap:10px; }
.wx-cf-primary{ width:100%; height:48px; border:none; border-radius:16px; font-size:16px; font-weight:600; color:#fff; cursor:pointer;
  background:linear-gradient(135deg,#141414,#000000); box-shadow:0 10px 26px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.35); }
.wx-cf-foot2 .wx-cf-primary{ flex:1; width:auto; }
.wx-cf-primary:disabled{ opacity:.5; box-shadow:none; }
.wx-cf-primary:active{ transform:scale(.98); }
.wx-cf-ghost{ flex:0 0 auto; min-width:96px; height:48px; border:none; border-radius:16px; font-size:14px; color:var(--hm-ink2); cursor:pointer;
  background:var(--hm-bg); box-shadow:5px 5px 11px var(--hm-dk), -5px -5px 11px var(--hm-lt); }
.wx-cf-ghost:active{ transform:scale(.98); }
.wx-cf-ghost:disabled{ opacity:.5; }
/* 步骤4：起草中 */
.wx-cf-drafting{ display:flex; flex-direction:column; align-items:center; gap:14px; padding:54px 0; color:var(--hm-ink2); font-size:14px; }
/* 成品人物卡 */
.wx-cc-card{ border-radius:20px; padding:18px 18px 16px; background:var(--hm-bg); box-shadow:7px 7px 16px var(--hm-dk), -7px -7px 16px var(--hm-lt); animation:wxin .3s ease both; }
.wx-cc-head{ display:flex; align-items:center; gap:13px; }
.wx-cc-av{ width:60px; height:60px; border-radius:18px; flex:0 0 auto; background-size:cover; background-position:center top; display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:600; color:#fff; box-shadow:4px 4px 10px var(--hm-dk), -4px -4px 10px var(--hm-lt); }
.wx-cc-av-empty{ font-weight:600; }
.wx-cc-headr{ min-width:0; display:flex; flex-direction:column; gap:3px; }
.wx-cc-headr b{ font-size:18px; font-weight:700; color:var(--hm-ink); }
.wx-cc-headr span{ font-size:12.5px; color:var(--hm-ink3); }
.wx-cc-imp{ font-size:13px; color:var(--hm-ink2); line-height:1.65; margin-top:13px; padding:12px 14px; border-radius:13px; background:rgba(0,0,0,.08); }
.wx-cc-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.wx-cc-chip{ font-size:11px; color:#141414; background:rgba(0,0,0,.13); border-radius:99px; padding:3px 11px; }
.wx-cc-rows{ margin-top:6px; }
.wx-cc-row{ display:flex; gap:10px; padding:11px 2px; border-bottom:1px solid rgba(0,0,0,.12); }
.wx-cc-row:last-child{ border-bottom:none; }
.wx-cc-k{ flex:0 0 42px; font-size:12.5px; font-weight:600; color:var(--hm-ink3); }
.wx-cc-v{ flex:1; min-width:0; font-size:13px; color:var(--hm-ink); line-height:1.6; }
/* 对话试演 */
.wx-cf-pv-sec{ margin-top:18px; }
.wx-cf-pv-lb{ font-size:12.5px; font-weight:600; color:var(--hm-ink2); margin:0 2px 10px; }
.wx-cf-pv-go, .wx-cf-pv-redo{ width:100%; height:42px; border:none; border-radius:13px; font-size:13px; color:#141414; cursor:pointer; background:rgba(0,0,0,.12); }
.wx-cf-pv-go:active, .wx-cf-pv-redo:active{ transform:scale(.98); }
.wx-cf-pv-redo{ margin-top:10px; color:var(--hm-ink2); background:var(--hm-bg); box-shadow:4px 4px 9px var(--hm-dk), -4px -4px 9px var(--hm-lt); }
.wx-cf-pv-load{ display:flex; align-items:center; justify-content:center; gap:8px; padding:24px 0; color:var(--hm-ink3); font-size:13px; }
.wx-cf-pv-chat{ display:flex; flex-direction:column; gap:8px; }
.wx-cf-pv-b{ align-self:flex-start; max-width:82%; font-size:14px; line-height:1.55; color:#1a1a1a; background:#fff; border-radius:4px 14px 14px 14px; padding:9px 13px; box-shadow:0 2px 8px rgba(0,0,0,.12); animation:wxinL .3s cubic-bezier(.22,1.18,.36,1) both; }

/* ===== 单页角色档案（落地方案-21）：分层折叠捏人——白卡+软投影 Genie 风，box-sizing 防溢出 ===== */
.wx-cs-body{ padding-bottom:18px; }
.wx-cs-tophint{ margin-left:auto; font-size:11px; color:var(--hm-ink3); }
.wx-cs-id{ display:flex; gap:13px; align-items:center; background:var(--wx-card); border-radius:18px; padding:12px; box-shadow:var(--sh-sm); margin-top:4px; }
.wx-cs-idr{ flex:1; min-width:0; display:flex; flex-direction:column; gap:9px; }
.wx-cs-name{ width:100%; box-sizing:border-box; border:none; border-bottom:1px solid rgba(0,0,0,.08); background:transparent; font-size:16px; color:var(--hm-ink); padding:4px 2px; outline:none; }
.wx-cs-name::placeholder{ color:var(--hm-ink3); }
.wx-cs-idrow{ display:flex; gap:7px; align-items:center; }
.wx-cs-gd{ font-size:13px; padding:6px 14px; border-radius:999px; cursor:pointer; color:var(--hm-ink3); background:#f0f0f2; }
.wx-cs-gd.on{ color:#fff; background:#141414; }
.wx-cs-age{ box-sizing:border-box; width:78px; height:32px; border:none; border-radius:999px; background:#f0f0f2; color:var(--hm-ink); font-size:13px; padding:0 12px; outline:none; }
.wx-cs-age::placeholder{ color:var(--hm-ink3); }
.wx-cs-lbl{ font-size:11px; color:var(--hm-ink3); margin:16px 4px 7px; }
.wx-cs-chiprow{ display:flex; flex-wrap:wrap; gap:7px; }
.wx-cs-chip{ font-size:12.5px; padding:6px 13px; border-radius:999px; cursor:pointer; color:var(--hm-ink2); background:var(--wx-card); box-shadow:var(--sh-sm); transition:transform .1s; }
.wx-cs-chip:active{ transform:scale(.95); }
.wx-cs-chip.on{ color:#fff; background:#141414; box-shadow:0 4px 12px rgba(0,0,0,.22); }
.wx-cs-chip.lg{ font-size:13px; padding:7px 14px; }
.wx-cs-sec{ background:var(--wx-card); border-radius:16px; margin-top:9px; box-shadow:var(--sh-sm); overflow:hidden; }
.wx-cs-sec.open{ box-shadow:var(--sh-md); }
.wx-cs-hd{ display:flex; align-items:center; gap:8px; padding:14px; cursor:pointer; }
.wx-cs-hd b{ font-size:14px; font-weight:500; color:var(--hm-ink); }
.wx-cs-tag{ font-size:10px; padding:2px 8px; border-radius:999px; background:#f0f0f2; color:var(--hm-ink3); }
.wx-cs-tag.base{ background:#eef0ff; color:#4a4ab0; }
.wx-cs-sum{ margin-left:auto; font-size:12px; color:var(--hm-ink3); max-width:44%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wx-cs-arr{ margin-left:6px; font-size:13px; color:var(--hm-ink3); }
.wx-cs-sum + .wx-cs-arr{ margin-left:6px; }
.wx-cs-bd{ padding:0 14px 14px; }
.wx-cs-more{ width:100%; box-sizing:border-box; border:none; border-radius:12px; background:var(--hm-bg); color:var(--hm-ink); font-size:13.5px; line-height:1.5; padding:10px 12px; outline:none; resize:none; font-family:inherit; margin-top:8px; }
.wx-cs-more::placeholder{ color:var(--hm-ink3); }
.wx-cs-note{ font-size:11px; color:var(--hm-ink3); margin-top:8px; line-height:1.5; }
.wx-cs-lb{ display:block; font-size:12px; font-weight:500; color:var(--hm-ink2); margin:12px 2px 0; }
.wx-cs-pv{ margin-top:16px; }
.wx-cs-foot{ padding:10px 14px 14px; }
.wx-cs-foothint{ text-align:center; font-size:11px; color:var(--hm-ink3); margin-bottom:8px; }

/* ===== 单页角色档案 v2（落地方案-22 · 对齐设计稿第10页：自由文本+预设/续写）===== */
.wx-cs2-body{ padding:6px 22px 18px; }
.wx-topbar .wx-cs-reset{ position:absolute; right:14px; font-size:13px; color:var(--hm-ink3); cursor:pointer; }
.wx-cs-avwrap{ display:flex; flex-direction:column; align-items:center; gap:11px; padding:8px 0 4px; }
.wx-cs-av2{ position:relative; width:104px; height:104px; border-radius:30px; background:linear-gradient(160deg,#5a5f6b,#8a7a6e); background-size:cover; background-position:center top; box-shadow:0 10px 28px rgba(20,20,30,.18); cursor:pointer; }
.wx-cs-av2-empty{ background:linear-gradient(160deg,#cfd0d6,#b9bac1); }
.wx-cs-av2-cam{ position:absolute; right:-4px; bottom:-4px; width:32px; height:32px; border-radius:50%; background:#141414; border:3px solid var(--hm-bg); color:#fff; display:flex; align-items:center; justify-content:center; font-size:15px; }
.wx-cs-avbtns{ display:flex; gap:9px; flex-wrap:wrap; justify-content:center; }   /* 三按钮(导入卡后多「用卡里的形象」)挤不下→整颗按钮下行居中，绝不在按钮内断字 */
.wx-cs-avbtn{ display:inline-flex; align-items:center; gap:7px; padding:9px 15px; border-radius:999px; background:rgba(120,120,130,.12); color:#56565d; font-size:12.5px; font-weight:500; cursor:pointer; white-space:nowrap; flex:0 0 auto; }
.wx-cs-avbtn svg{ display:block; flex:0 0 auto; }
.wx-cs-avbtn.dark{ background:#141414; color:#fff; }
.wx-cs-avbtn.dark .genie-dots{ color:#fff; }
.wx-cs-avbtn.busy{ opacity:.65; }
.wx-cs-avbtn:active{ transform:scale(.96); }
.wx-cs-avhint{ font-size:11px; color:var(--hm-ink3); }
/* 画风三档（拍板 2026-07-05）：ⓘ隐藏注释——默认藏、点圈叹号展开（沿用设置页 INFO_I 交互语言） */
.wx-cs-info{ display:inline-flex; vertical-align:-2px; margin-left:5px; color:var(--hm-ink3); cursor:pointer; padding:2px; }
.wx-cs-info:active{ color:var(--hm-ink2); }
.wx-cs-stylenote{ display:none; }
.wx-cs-stylenote.on{ display:block; font-size:11px; line-height:1.6; color:var(--hm-ink3); margin-top:7px; animation:wxin .18s ease both; }
.wx-cs-fld{ margin-top:16px; }
.wx-cs-fldlb{ font-size:11px; letter-spacing:1.4px; color:var(--hm-ink3); font-weight:600; margin-bottom:8px; text-transform:uppercase; }
.wx-cs-namein{ width:100%; box-sizing:border-box; border:none; border-radius:16px; background:rgba(120,120,130,.09); color:var(--hm-ink); font-size:15.5px; font-weight:500; padding:13px 16px; outline:none; }
.wx-cs-namein::placeholder{ color:var(--hm-ink3); font-weight:400; }
.wx-cs-seg-wrap{ display:flex; gap:6px; background:rgba(120,120,130,.1); border-radius:14px; padding:4px; }
.wx-cs-seg{ flex:1; text-align:center; padding:9px 0; border-radius:11px; font-size:14px; color:var(--hm-ink3); cursor:pointer; transition:background .12s; }
.wx-cs-seg.on{ background:#fff; box-shadow:0 2px 8px rgba(20,20,30,.08); color:var(--hm-ink); font-weight:600; }
.wx-cs-agehd{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:10px; }
.wx-cs-ageval{ font-family:var(--font-serif); font-size:24px; color:var(--hm-ink); line-height:1; }
.wx-cs-slider{ -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:3px; background:linear-gradient(90deg,#141414 var(--pct,40%),rgba(120,120,130,.18) var(--pct,40%)); outline:none; }
.wx-cs-slider::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:0 3px 10px rgba(20,20,30,.22); cursor:pointer; }
.wx-cs-slider::-moz-range-thumb{ width:22px; height:22px; border:none; border-radius:50%; background:#fff; box-shadow:0 3px 10px rgba(20,20,30,.22); cursor:pointer; }
.wx-cs-agescale{ display:flex; justify-content:space-between; margin-top:9px; font-size:11px; color:var(--hm-ink3); }
.wx-cs-fldbox{ position:relative; }
.wx-cs-fldta{ width:100%; box-sizing:border-box; border:none; border-radius:16px; background:rgba(120,120,130,.09); color:var(--hm-ink); font-size:14px; line-height:1.55; padding:13px 16px 40px; outline:none; resize:none; font-family:inherit; }
.wx-cs-fldta::placeholder{ color:var(--hm-ink3); }
.wx-cs-fldacts{ position:absolute; right:10px; bottom:9px; display:flex; gap:7px; }
.wx-cs-mini{ display:inline-flex; align-items:center; gap:5px; padding:5px 11px; border-radius:999px; background:rgba(20,20,20,.06); color:#56565d; font-size:11.5px; font-weight:500; cursor:pointer; }
.wx-cs-mini.on{ background:#141414; color:#fff; }
.wx-cs-mini.busy{ opacity:.7; }
.wx-cs-preset{ margin-top:10px; background:#fff; border-radius:18px; box-shadow:0 8px 26px rgba(20,20,30,.09); padding:14px 16px; }
.wx-cs-phint{ font-size:10.5px; letter-spacing:.8px; color:var(--hm-ink3); font-weight:600; margin:12px 0 8px; }
.wx-cs-phint:first-child{ margin-top:0; }
.wx-cs-pchips{ display:flex; flex-wrap:wrap; gap:8px; }
.wx-cs-pchip{ padding:7px 13px; border-radius:999px; background:rgba(120,120,130,.12); color:#56565d; font-size:12.5px; cursor:pointer; }
.wx-cs-pchip:active{ transform:scale(.95); }
.wx-cs-pchip.on{ background:#141414; color:#fff; font-weight:500; }
.wx-cs-foot .wx-cf-primary .genie-dots, .wx-cf-primary .genie-dots{ color:#fff; }

/* ===== 落地方案-34：捏人素材池 + 卡文导入 + 🎲随机 + 定妆独占画面 ===== */
/* 顶栏工具组（导入/随机/重置并排；.wx-cs-reset 原 absolute 定位改由容器接管） */
.wx-topbar .wx-cs-tools{ position:absolute; right:14px; display:flex; align-items:center; gap:14px; }
.wx-topbar .wx-cs-tools .wx-cs-reset{ position:static; }
.wx-cs-tool{ font-size:13px; color:var(--hm-ink2); cursor:pointer; display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }   /* 图标化(B方案双星/素纸)：svg+字垂直居中、不折行 */
.wx-cs-tool svg{ display:block; flex:0 0 auto; }
.wx-cs-tool:active{ opacity:.6; }
/* 分区重排（2026-07-16）：面板内「快速标签」区头 + 「范文参考」区（标题横陈→点开全文卡→卡内选用） */
.wx-cs-zonehd{ display:flex; align-items:baseline; gap:7px; font-size:11.5px; font-weight:700; color:var(--hm-ink); margin:16px 0 8px; }
.wx-cs-zonehd:first-child{ margin-top:0; }
.wx-cs-zonehd span{ font-size:10px; font-weight:500; letter-spacing:.3px; color:var(--hm-ink3); }
/* 范文标题 chip：虚线框示意「参考件」，与实心快速标签区分两类供给；展开中=实线加深 */
.wx-cs-pttl{ padding:6px 12px; border-radius:999px; border:1px dashed rgba(120,120,130,.5); color:var(--hm-ink2); font-size:12px; cursor:pointer; }
.wx-cs-pttl:active{ transform:scale(.95); }
.wx-cs-pttl.on{ border:1px solid #141414; color:var(--hm-ink); background:rgba(20,20,20,.05); font-weight:500; }
/* 范文全文卡（仅展开态渲染）：t=条目名 x=全文；「用这段」是唯一替换入口 */
.wx-cs-poolcard{ margin-top:9px; background:rgba(120,120,130,.08); border-radius:14px; padding:12px 14px; }
.wx-cs-pc-t{ font-size:12.5px; font-weight:600; color:var(--hm-ink); margin-bottom:4px; display:flex; align-items:center; gap:6px; }
.wx-cs-pc-x{ font-size:12px; line-height:1.55; color:var(--hm-ink2); }
.wx-cs-pc-use{ margin-top:10px; display:inline-block; padding:6px 18px; border-radius:999px; background:#141414; color:#fff; font-size:12px; font-weight:500; cursor:pointer; }
.wx-cs-pc-use:active{ transform:scale(.96); }
/* -34细化：钩子卡关系徽标 + 面板「换一批」行 + 姓名行骰子 */
.wx-cs-pc-k{ font-size:10px; font-weight:600; letter-spacing:.4px; color:#56565d; background:rgba(20,20,20,.07); border-radius:999px; padding:2px 8px; flex:0 0 auto; }
.wx-cs-phead{ display:flex; align-items:center; justify-content:space-between; margin-bottom:2px; }
.wx-cs-phead-t{ font-size:10.5px; letter-spacing:.8px; color:var(--hm-ink3); font-weight:600; }
.wx-cs-reroll{ display:inline-flex; align-items:center; gap:4px; padding:5px 12px; border-radius:999px; background:rgba(20,20,20,.06); color:#56565d; font-size:11.5px; font-weight:500; cursor:pointer; }
.wx-cs-reroll:active{ transform:scale(.96); }
.wx-cs-namerow{ display:flex; align-items:center; gap:8px; }
.wx-cs-namerow .wx-cs-namein{ flex:1; min-width:0; }
.wx-cs-namedice{ flex:0 0 auto; width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:16px; background:rgba(120,120,130,.09); font-size:17px; cursor:pointer; }
.wx-cs-namedice:active{ transform:scale(.94); }
/* 导入卡文面板（居中弹层；textarea 大粘贴区） */
.wx-cs-imp-mask{ position:absolute; inset:0; z-index:60; background:rgba(20,20,25,.45); display:flex; align-items:center; justify-content:center; padding:20px; }
.wx-cs-imp{ width:100%; max-width:340px; background:#fff; border-radius:22px; padding:16px 16px 14px; box-shadow:0 18px 50px rgba(20,20,30,.25); }
.wx-cs-imp-hd{ display:flex; align-items:center; justify-content:space-between; font-size:15.5px; color:var(--hm-ink); margin-bottom:8px; }
.wx-cs-imp-x{ font-size:15px; color:var(--hm-ink3); cursor:pointer; padding:4px 6px; }
.wx-cs-imp-hint{ font-size:12px; line-height:1.55; color:var(--hm-ink2); margin-bottom:10px; }
.wx-cs-imp-ta{ width:100%; box-sizing:border-box; border:none; border-radius:14px; background:rgba(120,120,130,.09); color:var(--hm-ink); font-size:13px; line-height:1.5; padding:12px 13px; outline:none; resize:none; font-family:inherit; }
.wx-cs-imp-ta::placeholder{ color:var(--hm-ink3); }
.wx-cs-imp-acts{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:11px; }
.wx-cs-imp-go{ flex:1; width:auto; height:42px; border-radius:14px; font-size:14.5px; }
/* 定妆生成确认卡：复用导入卡白卡语言，只给本弹窗补入场与张数控件。 */
.wx-fgc-mask{ animation:wxfgc-maskin .18s ease both; }
.wx-fgc-card{ animation:wxfgc-cardin .26s cubic-bezier(.34,1.3,.4,1) both; }
@keyframes wxfgc-maskin{ from{ background:rgba(20,20,25,0) } to{ background:rgba(20,20,25,.45) } }
@keyframes wxfgc-cardin{ from{ opacity:0; transform:translateY(10px) scale(.94) } to{ opacity:1; transform:none } }
.wx-fgc-x{ border:0; background:transparent; font-family:inherit; min-width:44px; min-height:44px; margin:-10px -8px -10px 0; display:flex; align-items:center; justify-content:center; }
.wx-fgc-lb{ margin:13px 1px 7px; color:rgba(20,20,20,.66); font-size:11px; font-weight:600; letter-spacing:.7px; }
.wx-fgc-segs .wx-cs-seg{ border:0; background:transparent; color:rgba(20,20,20,.66); font-family:inherit; min-height:44px; }
.wx-fgc-segs .wx-cs-seg.on{ background:#fff; }
.wx-fgc-cancel{ border:0; font-family:inherit; justify-content:center; min-height:44px; }
.wx-fgc-card .wx-cs-imp-go{ height:44px; min-height:44px; }
.wx-fgc-card button:focus-visible{ outline:2px solid #141414; outline-offset:2px; }
/* 「故事开场」栏（2026-07-08 钩子拆栏）：标签旁「可选」小标——轻量栏的视觉降权 */
.wx-cs-fldopt{ font-size:10px; letter-spacing:.6px; color:var(--hm-ink3); font-weight:500; margin-left:7px; text-transform:none; opacity:.75; }
/* 捏成确认卡：复用导入面板的 mask/白卡基骨（.wx-cs-imp-mask/.wx-cs-imp），素面速览行+发丝分隔——不做任何光效 */
.wx-cs-cfm{ padding:18px 18px 16px; }
.wx-cs-cfm-hd{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.wx-cs-cfm-av{ width:52px; height:52px; border-radius:16px; background-size:cover; background-position:center; flex:0 0 auto; background-color:rgba(120,120,130,.12); }
.wx-cs-cfm-av.empty{ display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:600; color:var(--hm-ink2); }
.wx-cs-cfm-who{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.wx-cs-cfm-who b{ font-size:16.5px; color:var(--hm-ink); font-weight:600; }
.wx-cs-cfm-who span{ font-size:12px; color:var(--hm-ink3); }
.wx-cs-cfm-rows{ display:flex; flex-direction:column; gap:8px; padding:12px 0; border-top:1px solid rgba(20,20,30,.06); border-bottom:1px solid rgba(20,20,30,.06); }
.wx-cs-cfm-row{ display:flex; align-items:baseline; gap:10px; }
.wx-cs-cfm-k{ flex:0 0 30px; font-size:11px; letter-spacing:1px; color:var(--hm-ink3); font-weight:600; }
.wx-cs-cfm-v{ flex:1; min-width:0; font-size:12.5px; line-height:1.5; color:var(--hm-ink); overflow:hidden; }
.wx-cs-cfm-v.blank{ color:var(--hm-ink3); }
.wx-cs-cfm-tag{ display:inline-block; font-style:normal; font-size:10px; font-weight:600; letter-spacing:.4px; color:#56565d; background:rgba(20,20,20,.07); border-radius:999px; padding:1.5px 8px; margin-left:5px; vertical-align:1px; }
.wx-cs-cfm-pick{ flex:none; font-size:12px; color:var(--hm-ink2); cursor:pointer; white-space:nowrap; padding:2px 0 2px 6px; }   /* 捏人语音适配：确认卡「声音」行的挑选入口 */
.wx-cs-cfm-pick:active{ opacity:.6; }
.wx-cs-cfm-note{ font-size:11.5px; line-height:1.6; color:var(--hm-ink2); margin:11px 0 12px; }
.wx-cs-cfm-acts{ display:flex; align-items:center; gap:10px; }
.wx-cs-cfm-acts .wx-cs-avbtn{ flex:0 0 auto; }
.wx-cs-cfm-go{ flex:1; width:auto; height:44px; border-radius:14px; font-size:14.5px; display:inline-flex; align-items:center; justify-content:center; gap:7px; }
/* 批II-C(2026-07-17)·说话习惯表：确认卡第二层——试读(TA自己的样张)+我来定文本域+文风参考。素面同基骨、零风格名零分类学 */
.wx-sp-mask{ z-index:65; }
.wx-sp-card{ padding:16px 16px 14px; max-height:82%; overflow-y:auto; }
.wx-sp-card::-webkit-scrollbar{ width:0; }
.wx-sp-hd{ font-size:15.5px; font-weight:600; color:var(--hm-ink); }
.wx-sp-sub{ font-size:11.5px; line-height:1.6; color:var(--hm-ink2); margin:5px 0 10px; }
.wx-sp-now{ font-size:12px; line-height:1.6; color:var(--hm-ink); background:rgba(20,20,30,.045); border-radius:10px; padding:9px 11px; margin-bottom:10px; }
.wx-sp-now b{ display:block; font-size:10.5px; letter-spacing:1px; color:var(--hm-ink3); font-weight:600; margin-bottom:3px; }
.wx-sp-k{ font-size:11px; letter-spacing:.6px; color:var(--hm-ink3); font-weight:600; margin:10px 2px 6px; }
.wx-sp-demo{ display:flex; flex-direction:column; gap:5px; margin-bottom:2px; }
.wx-sp-bb{ align-self:flex-start; max-width:88%; background:#fff; border:1px solid rgba(20,20,30,.08); border-radius:11px 11px 11px 4px; padding:6px 10px; font-size:12.5px; line-height:1.5; color:var(--hm-ink); }
.wx-sp-ta{ width:100%; min-height:64px; resize:vertical; border:1px solid rgba(20,20,30,.12); border-radius:11px; padding:9px 11px; font-size:12.5px; line-height:1.6; color:var(--hm-ink); background:#fff; font-family:inherit; box-sizing:border-box; }
.wx-sp-ta:focus{ outline:none; border-color:rgba(20,20,30,.28); }
.wx-sp-refhd{ display:flex; align-items:center; justify-content:space-between; }
.wx-sp-roll{ display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-weight:400; color:var(--hm-ink2); cursor:pointer; }
.wx-sp-roll:active{ opacity:.6; }
.wx-sp-ref{ position:relative; background:#fff; border:1px solid rgba(20,20,30,.08); border-radius:11px; padding:9px 11px 9px; margin-bottom:7px; }
.wx-sp-ref-t{ font-size:12px; font-weight:600; color:var(--hm-ink); margin-bottom:3px; padding-right:52px; }
.wx-sp-ref-x{ font-size:11.5px; line-height:1.55; color:var(--hm-ink2); }
.wx-sp-use{ position:absolute; top:8px; right:9px; font-size:11px; color:var(--hm-ink2); border:1px solid rgba(20,20,30,.14); border-radius:999px; padding:2px 9px; cursor:pointer; }
.wx-sp-use:active{ opacity:.6; }
.wx-sp-empty{ font-size:11.5px; color:var(--hm-ink3); padding:6px 2px; }
.wx-sp-acts{ margin-top:12px; }
.wx-sp-ok{ width:100%; height:40px; border-radius:12px; font-size:13.5px; }
/* 定妆独占画面：全屏遮罩锁表单；大图 + 三按钮 */
.wx-fs-mask{ position:absolute; inset:0; z-index:70; background:rgba(18,18,22,.92); display:flex; align-items:flex-start; justify-content:center; padding:24px 20px calc(24px + env(safe-area-inset-bottom)); overflow-y:auto; box-sizing:border-box; }
.wx-fs-card{ width:100%; max-width:320px; margin:auto; display:flex; flex-direction:column; gap:14px; min-height:0; }
.wx-fs-img{ width:100%; aspect-ratio:1; border-radius:26px; background-color:#26262b; background-size:cover; background-position:center top; box-shadow:0 16px 48px rgba(0,0,0,.5); position:relative; overflow:hidden; }
.wx-fs-img.dim::after{ content:''; position:absolute; inset:0; background:rgba(18,18,22,.55); }
.wx-fs-img.empty{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:rgba(255,255,255,.85); font-size:14px; }
.wx-fs-genload{ position:absolute; inset:0; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:#fff; font-size:14px; }
.wx-fs-err{ text-align:center; font-size:13.5px; line-height:1.7; color:rgba(255,255,255,.85); padding:0 18px; }
.wx-fs-acts{ display:flex; flex-direction:column; gap:9px; }
.wx-fs-btn{ width:100%; }
.wx-fs-slots{ position:absolute; left:0; right:0; bottom:17px; z-index:3; display:flex; align-items:center; justify-content:center; gap:7px; }
.wx-fs-slot{ width:40px; height:40px; border:1px dashed rgba(255,255,255,.38); border-radius:11px; background:rgba(255,255,255,.055); overflow:hidden; display:flex; align-items:center; justify-content:center; }
.wx-fs-slot.loading{ animation:wxfs-slotpulse 1.25s ease-in-out infinite; }
@keyframes wxfs-slotpulse{ 50%{ border-color:rgba(255,255,255,.72); background:rgba(255,255,255,.1) } }
.wx-fs-slot.done{ border-style:solid; border-color:rgba(255,255,255,.48); animation:wxfs-slotpop .5s cubic-bezier(.34,1.45,.4,1) both; }
@keyframes wxfs-slotpop{ from{ opacity:0; transform:scale(.65) } to{ opacity:1; transform:none } }
.wx-fs-slot-photo{ width:100%; height:100%; background-size:cover; background-position:center top; display:block; }
.wx-fs-slot.error{ opacity:.42; }
.wx-fs-slot-err{ color:#fff; font-size:17px; font-weight:300; }
.wx-fsb.multi .wx-fsw{ bottom:70px; }
/* 多张候选墙：暗场双列方裁切，选择只写临时态；底部确认后才进入单张揭晓。 */
.wx-fs-pick{ background:rgba(18,18,22,.96); }
/* 墙是全高布局（对齐原型 .wall）：标题贴顶、网格随内容、操作组压底——不做整簇垂直居中（居中会上下各留一截尴尬空白，看着像浮岛错位） */
.wx-fs-pick .wx-fs-card{ min-height:100%; margin:0 auto; }
.wx-fs-pick .wx-fs-acts{ margin-top:auto; padding-top:6px; }
.wx-fs-pick-hd{ text-align:center; margin-bottom:2px; animation:wxfsw-in .45s ease both; }
.wx-fs-pick-hd b{ display:block; font-family:var(--font-serif); font-size:19px; font-weight:400; letter-spacing:1px; color:#fff; }
.wx-fs-pick-hd span{ display:block; margin-top:5px; font-size:11.5px; color:rgba(255,255,255,.55); letter-spacing:.3px; }
.wx-fs-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; width:100%; transition:opacity .16s,transform .16s; }
.wx-fs-grid.out{ opacity:0; transform:scale(.9); }
.wx-fs-cand{ position:relative; aspect-ratio:1; border-radius:20px; background:#26262b; opacity:0; transform:scale(.8); animation:wxfs-candpop .5s cubic-bezier(.34,1.45,.4,1) calc(var(--i) * 60ms) forwards; transition:box-shadow .18s; }
@keyframes wxfs-candpop{ to{ opacity:1; transform:scale(1) } }
.wx-fs-cand.sel{ box-shadow:0 0 0 2.5px #fff,0 12px 30px rgba(0,0,0,.5); }
.wx-fs-cand-photo{ position:absolute; inset:0; width:100%; height:100%; border:0; border-radius:20px; background-color:#26262b; background-size:cover; background-position:center top; cursor:zoom-in; }
.wx-fs-check{ position:absolute; top:-2px; right:-2px; z-index:3; width:44px; height:44px; border:0; background:transparent; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.wx-fs-check span{ width:24px; height:24px; border:2px solid rgba(255,255,255,.95); border-radius:50%; color:transparent; background:rgba(12,12,16,.25); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; font-size:13px; transition:background .15s,color .18s,transform .18s cubic-bezier(.34,1.56,.64,1); }
.wx-fs-cand.sel .wx-fs-check span{ color:#fff; background:#141414; border-color:#141414; transform:scale(1.04); }
.wx-fs-pick-acts{ display:flex; gap:9px; }
.wx-fs-pick-acts .wx-fs-btn{ flex:1; min-width:0; }
.wx-fs-pick-note{ text-align:center; font-size:11.5px; color:rgba(255,255,255,.62); margin-top:0; }
.wx-fs-cand button:focus-visible,.wx-fs-acts button:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
/* 定妆暗底按钮（2026-07-05 修复 V2）：基类 .wx-cf-ghost 的新拟态双阴影是给浅色底的，泄漏到暗遮罩=偏移白雾（用户报「浮光错位」）——
   覆盖成玻璃质感：暗投影一层(与 .wx-fs-img 大图投影同语言)+1px 细描边+不折行；done 揭晓态三颗按钮同享。svg(重新生成的星)与字居中。 */
.wx-fs-acts .wx-cf-ghost{ background:rgba(255,255,255,.13); color:rgba(255,255,255,.92); min-width:0;
  box-shadow:0 8px 22px rgba(0,0,0,.38); border:1px solid rgba(255,255,255,.10); white-space:nowrap;
  display:inline-flex; align-items:center; justify-content:center; gap:6px; }
.wx-fs-acts .wx-cf-ghost svg{ display:block; flex:0 0 auto; }
/* ⭐定妆动效终稿（2026-07-05 落地）：B流光聚形 + V2流光渐变环。设计稿 docs/原型/定妆画面-动效设计.html + 定妆进度环-样式对比.html(V2)。
   gen=三团柔光缠绕(纯transform,GPU合成)+旋转渐变环(SMIL)+时间驱动伪进度；done首渲一次性播揭晓序列；fail=环冻结褪灰。blur 只在 320px 小图区（性能红线：别搬到全屏遮罩）。 */
.wx-fs-img.wx-fsb{ background:#141419; }
.wx-fsb .wx-fsa{ position:absolute; inset:0; opacity:.75; pointer-events:none; }
.wx-fsb .wx-fsa i{ position:absolute; width:46%; aspect-ratio:1; border-radius:50%; filter:blur(46px); display:block; }
.wx-fsb .wx-fsa .b1{ background:#ffb38a; left:8%; top:14%; }
.wx-fsb .wx-fsa .b2{ background:#c9b8ff; right:6%; top:34%; }
.wx-fsb .wx-fsa .b3{ background:#9fc4ff; left:24%; bottom:8%; }
.wx-fsb.gen .b1{ animation:wxfsb1 11s ease-in-out infinite alternate; }
.wx-fsb.gen .b2{ animation:wxfsb2 14s ease-in-out infinite alternate; }
.wx-fsb.gen .b3{ animation:wxfsb3 17s ease-in-out infinite alternate; }
@keyframes wxfsb1{ 0%{ transform:translate(0,0) scale(1) } 100%{ transform:translate(34%,26%) scale(1.35) } }
@keyframes wxfsb2{ 0%{ transform:translate(0,0) scale(1.2) } 100%{ transform:translate(-30%,18%) scale(.85) } }
@keyframes wxfsb3{ 0%{ transform:translate(0,0) scale(.9) } 100%{ transform:translate(18%,-30%) scale(1.28) } }
.wx-fsb .wx-fsr{ position:absolute; left:50%; top:50%; width:64%; aspect-ratio:1; transform:translate(-50%,-50%); pointer-events:none; }
.wx-fsb.gen .wx-fsr{ animation:wxfsr-sway 4.5s ease-in-out infinite; }
@keyframes wxfsr-sway{ 0%,100%{ opacity:.92 } 50%{ opacity:1 } }
.wx-fsb .wx-fsr svg{ width:100%; height:100%; overflow:visible; display:block; }
.wx-fsb .wx-fsr .tr{ fill:none; stroke:rgba(255,255,255,.10); stroke-width:1.5; }
.wx-fsb .wx-fsr .soft{ fill:none; stroke:url(#wxfsg); stroke-width:6; stroke-linecap:round; opacity:.28; filter:blur(4px); }
.wx-fsb .wx-fsr .bar{ fill:none; stroke:url(#wxfsg); stroke-width:3; stroke-linecap:round; }
.wx-fsb .wx-fsr .head{ fill:#fff; filter:drop-shadow(0 0 7px rgba(255,255,255,.95)); }
.wx-fsb .wx-fsr-pct{ position:absolute; left:50%; top:50%; transform:translate(-50%,-54%); text-align:center; color:#fff; pointer-events:none; z-index:2; }
.wx-fsb .wx-fsr-pct b{ font-family:var(--font-serif); font-size:34px; font-weight:400; letter-spacing:1px; font-variant-numeric:tabular-nums; }
.wx-fsb .wx-fsr-pct i{ font-style:normal; font-size:12px; opacity:.55; margin-left:2px; }
.wx-fsb.gen .wx-fsr-pct b{ animation:wxfsr-num 4.5s ease-in-out infinite; }
@keyframes wxfsr-num{ 0%,100%{ opacity:.85 } 50%{ opacity:1 } }
.wx-fsb .wx-fsw{ position:absolute; left:0; right:0; bottom:18px; text-align:center; color:rgba(255,255,255,.88); font-size:13px; letter-spacing:.5px; z-index:2; }
.wx-fsb .wx-fsw .w{ display:none; }
.wx-fsb .wx-fsw .w.on{ display:block; animation:wxfsw-in .45s ease both; }
@keyframes wxfsw-in{ 0%{ opacity:0; transform:translateY(9px) } 100%{ opacity:1; transform:translateY(0) } }
/* 揭晓（done 首渲一次性播完，重渲即重播——done 里别做多余 rerender）：光晕收拢→环绽开→百分比升散→照片弹入→名签→按钮接力 */
.wx-fsb.reveal .wx-fsa{ animation:wxfs-gather .6s ease-in both; }
@keyframes wxfs-gather{ 0%{ opacity:.75; transform:scale(1) } 100%{ opacity:0; transform:scale(.25) } }
.wx-fsb.reveal .wx-fsr{ animation:wxfs-burst .75s cubic-bezier(.2,.7,.3,1) .3s both; }
@keyframes wxfs-burst{ 0%{ opacity:1; transform:translate(-50%,-50%) scale(1) } 100%{ opacity:0; transform:translate(-50%,-50%) scale(1.45) } }
.wx-fsb.reveal .wx-fsr-pct{ animation:wxfs-pctout .4s ease .3s both; }
@keyframes wxfs-pctout{ 100%{ opacity:0; transform:translate(-50%,-76%) } }
.wx-fs-photo{ position:absolute; inset:0; width:100%; height:100%; border:0; padding:0; background-size:cover; background-position:center top; cursor:zoom-in; }
.wx-fsb.reveal .wx-fs-photo{ animation:wxfs-popin .85s cubic-bezier(.34,1.45,.4,1) .5s both; }
@keyframes wxfs-popin{ 0%{ opacity:0; transform:scale(.86) } 100%{ opacity:1; transform:scale(1) } }
.wx-fs-tag{ position:absolute; left:14px; bottom:12px; padding:7px 13px; border-radius:999px; background:rgba(12,12,16,.55); backdrop-filter:blur(8px); color:#fff; font-size:12.5px; letter-spacing:.4px; z-index:3; }
.wx-fs-tag i{ font-style:normal; opacity:.6; margin-left:6px; font-size:11px; }
.wx-fsb.reveal .wx-fs-tag{ animation:wxfsw-in .5s ease .75s both; }
.wx-fs-acts .wx-fs-btn.s1{ animation:wxfs-btnup .5s cubic-bezier(.2,.8,.3,1) .95s both; }
.wx-fs-acts .wx-fs-btn.s2{ animation:wxfs-btnup .5s cubic-bezier(.2,.8,.3,1) 1.04s both; }
.wx-fs-acts .wx-fs-btn.s3{ animation:wxfs-btnup .5s cubic-bezier(.2,.8,.3,1) 1.13s both; }
@keyframes wxfs-btnup{ 0%{ opacity:0; transform:translateY(18px) } 100%{ opacity:1; transform:translateY(0) } }
/* 失败：环冻在断掉的进度褪灰（「走到 61% 断了」比凭空报错可信）+ 整卡轻抖一下 */
.wx-fsb.fail{ animation:wxfs-shake .42s ease both; }
@keyframes wxfs-shake{ 0%,100%{ transform:translateX(0) } 20%{ transform:translateX(-7px) } 40%{ transform:translateX(6px) } 60%{ transform:translateX(-4px) } 80%{ transform:translateX(3px) } }
.wx-fsb.fail .wx-fsr,.wx-fsb.fail .wx-fsr-pct{ opacity:.35; filter:grayscale(1); }
.wx-fsb.fail .wx-fsa{ opacity:.25; filter:grayscale(.7); }
.wx-fsb .wx-fs-err{ position:absolute; left:0; right:0; bottom:22px; z-index:2; }

@media (max-height:620px){
  .wx-fs-mask{ padding-top:16px; padding-bottom:calc(16px + env(safe-area-inset-bottom)); }
  .wx-fs-card{ max-width:min(300px,calc(100vh - 190px)); gap:10px; }
  .wx-fs-pick .wx-fs-card{ max-width:300px; }
  .wx-fs-acts{ gap:7px; }
  .wx-fs-acts .wx-cf-primary,.wx-fs-acts .wx-cf-ghost{ height:44px; }
}
@media (max-width:340px){
  .wx-fs-mask{ padding-left:16px; padding-right:16px; }
  .wx-fs-cand{ border-radius:17px; }
  .wx-fs-cand-photo{ border-radius:17px; }
  #wx-lightbox .wx-lb-arrow.prev{ left:4px; } #wx-lightbox .wx-lb-arrow.next{ right:4px; }
}
@media (prefers-reduced-motion:reduce){
  .wx-fgc-mask,.wx-fgc-card,.wx-fs-slot,.wx-fs-cand,.wx-fs-grid,.wx-fs-pick-hd,.wx-fsb.reveal .wx-fsa,.wx-fsb.reveal .wx-fsr,.wx-fsb.reveal .wx-fsr-pct,.wx-fsb.reveal .wx-fs-photo,.wx-fsb.reveal .wx-fs-tag,.wx-fsb.fail,.wx-fsb .wx-fsw .w.on,.wx-fs-acts .wx-fs-btn,.wx-fs-check span,#wx-lightbox,#wx-lightbox .wx-lb-media,#wx-lightbox .wx-lb-pick,#wx-lightbox .wx-lb-dots i{ animation:none !important; transition:none !important; }
  .wx-fs-cand{ opacity:1; transform:none; }
  .wx-fsb.reveal .wx-fsa,.wx-fsb.reveal .wx-fsr,.wx-fsb.reveal .wx-fsr-pct{ opacity:0 !important; }
  .wx-fsb.gen .b1,.wx-fsb.gen .b2,.wx-fsb.gen .b3,.wx-fsb.gen .wx-fsr,.wx-fsb.gen .wx-fsr-pct b{ animation:none !important; }
}

/* ===== A1（落地方案-15）：手账双 tab + 相册 app ===== */
.wx-story-tabs{ display:flex; gap:8px; margin:10px 12px 0; }
.wx-story-tabs span{ flex:1; text-align:center; padding:8px 0; border-radius:99px; font-size:13px; color:var(--wx-t2); background:var(--wx-card); border:.5px solid var(--wx-line-strong); cursor:pointer; transition:background .12s, color .12s; }
.wx-story-tabs span.on{ background:#26262b; border-color:#26262b; color:#fff; font-weight:500; }
.wx-story-clockcard{ margin:12px 12px 0; background:var(--wx-card); border-radius:var(--wx-r-card); padding:14px 16px; display:flex; align-items:baseline; gap:9px; }
.wx-story-clockcard b{ font-size:20px; color:var(--wx-t1); }
.wx-story-clockcard span{ font-size:13px; color:var(--wx-t2); }
.wx-story-clockcard i{ margin-left:auto; font-style:normal; font-size:11px; color:var(--wx-t3); }
.wx-story-plan.done{ opacity:.55; }
.wx-story-plan.done .wx-story-plan-dot{ background:#b9bec6; }
.wx-photos{ padding:0 12px 22px; }
.wx-ph-sech{ display:flex; align-items:baseline; padding:16px 4px 9px; font-size:14px; font-weight:600; color:var(--wx-t1); }
.wx-ph-sech span{ margin-left:auto; font-size:11px; font-weight:400; color:var(--wx-t3); }
/* 落地方案-16-2：相册顶部「本机/各世界」筛选 chip（横向滚动，跨档只读切换） */
.wx-ph-chips{ display:flex; gap:8px; padding:12px 2px 2px; overflow-x:auto; scrollbar-width:none; }
.wx-ph-chips::-webkit-scrollbar{ display:none; }
.wx-ph-chip{ flex:0 0 auto; font-size:13px; color:var(--wx-t2); background:var(--wx-card); border-radius:15px; padding:6px 14px; cursor:pointer; white-space:nowrap; transition:background .15s,color .15s; }
.wx-ph-chip.on{ color:#fff; background:var(--wx-green); }
/* 2026-07-22 相册堆叠展开：真照片背卡 + 局部 FLIP/hero；滚动容器不重建，开合不回弹 */
.wx-ph-stacks{ display:grid; grid-template-columns:1fr 1fr; gap:20px 14px; padding:8px 2px 26px; }
.wx-ph-stack{ min-width:0; cursor:pointer; animation:wxin .26s ease both; }
.wx-ph-stkcards{ position:relative; margin-top:16px; aspect-ratio:1/1; }
.wx-ph-bk{ position:absolute; left:50%; aspect-ratio:1/1; background-size:cover; background-position:center; border-radius:12px; box-shadow:0 2px 8px rgba(20,20,30,.08); transition:transform .3s var(--ease); }
.wx-ph-bk.b1{ top:-7px; width:88%; transform:translateX(-50%); filter:brightness(.94); }
.wx-ph-bk.b2{ top:-13px; width:78%; transform:translateX(-50%); filter:brightness(.88); }
.wx-ph-stkcover{ position:absolute; inset:0; z-index:2; display:block; border-radius:16px; overflow:hidden; box-shadow:0 2px 6px rgba(20,20,30,.05),0 12px 28px rgba(20,20,30,.14); background:#e4e4e8; transition:transform .3s var(--ease); }
.wx-ph-stkcover img{ width:100%; height:100%; object-fit:cover; display:block; }
.wx-ph-bdg{ position:absolute; right:7px; top:7px; z-index:3; padding:3px 9px; border-radius:99px; background:rgba(20,20,26,.45); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:#fff; font-size:11px; font-weight:600; font-style:normal; }
.wx-ph-stack:active .wx-ph-stkcover{ transform:scale(.965); }
.wx-ph-stack:focus-visible,.wx-ph-stkhead:focus-visible{ outline:2px solid rgba(28,28,32,.55); outline-offset:3px; }
.wx-ph-stknm{ margin-top:8px; font-size:13.5px; font-weight:600; color:var(--wx-t1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wx-ph-stack .wx-ph-stkct{ margin-top:1px; font-size:11.5px; color:var(--wx-t3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wx-ph-stack.open{ grid-column:1/-1; cursor:default; padding:6px 12px 14px; border-radius:20px; background:var(--wx-card); box-shadow:var(--sh-sm); }
.wx-ph-stkhead{ position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:11px; padding:10px 2px; border-radius:14px; background:rgba(255,255,255,.92); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); cursor:pointer; }
.wx-ph-stkth{ width:44px; height:44px; flex:0 0 auto; border-radius:12px; overflow:hidden; box-shadow:var(--sh-sm); }
.wx-ph-stkth img{ width:100%; height:100%; object-fit:cover; display:block; }
.wx-ph-stkhead .wx-ph-stknm{ min-width:0; margin-top:0; font-size:14px; }
.wx-ph-stkhead .wx-ph-stkct{ min-width:0; margin-top:0; }
.wx-ph-stkfold{ margin-left:auto; flex:0 0 auto; padding:4px 11px; border-radius:99px; background:var(--wx-line-faint); color:var(--wx-t2); font-size:12px; }
.wx-cin{ animation:wxcin .5s var(--ease) both; animation-delay:var(--d,0ms); }
@keyframes wxcin{ from{ opacity:0; transform:translateY(18px) scale(.88); } to{ opacity:1; transform:none; } }
.wx-pop{ animation:wxpop .45s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes wxpop{ from{ opacity:0; transform:scale(.55); } to{ opacity:1; transform:none; } }
.wx-ph-fly{ position:absolute; z-index:60; object-fit:cover; border-radius:14px; pointer-events:none; box-shadow:0 8px 24px rgba(20,20,30,.2); }
.wx-ph-flybg{ position:absolute; z-index:59; background-size:cover; background-position:center; border-radius:12px; pointer-events:none; box-shadow:0 6px 18px rgba(20,20,30,.16); }
.wx-album-loading::after{ content:''; position:absolute; inset:0; z-index:4; background:rgba(28,28,32,.28); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
.wx-album-loading::before{ content:''; position:absolute; left:50%; top:50%; z-index:5; width:18px; height:18px; margin:-10px 0 0 -10px; border:2px solid rgba(255,255,255,.45); border-top-color:#fff; border-radius:50%; animation:wxalbumspin .8s linear infinite; }
@keyframes wxalbumspin{ to{ transform:rotate(360deg); } }
.wx-ph-refreshing .wx-album-cell:not(.wx-pop):not(.wx-cin){ animation:none; }
@media (prefers-reduced-motion:reduce){ .wx-cin,.wx-pop,.wx-album-loading::before{ animation:none; } .wx-ph-bk,.wx-ph-stkcover{ transition:none; } }

/* C 日记轨：手账「日记」tab */
.wx-story-it.k-diary .wx-story-dot{ background:#141414; box-shadow:0 0 0 3px rgba(0,0,0,.14); }

/* ============ 用户系统：邀请码门（灰度登录全屏） ============ */
#wx-authgate{ position:fixed; inset:0; z-index:9000; background:var(--wx-bg); display:flex; align-items:center; justify-content:center; padding:24px; }
.wx-ag-card{ width:100%; max-width:340px; background:var(--wx-card); border-radius:22px; box-shadow:0 10px 40px rgba(0,0,0,.10); padding:34px 26px 22px; text-align:center; }
.wx-ag-logo{ font-size:42px; line-height:1; margin-bottom:14px; }
.wx-ag-title{ font-size:19px; font-weight:600; color:#141414; }
.wx-ag-sub{ font-size:13px; color:var(--wx-t2); line-height:1.6; margin:8px 0 18px; }
.wx-ag-input{ width:100%; box-sizing:border-box; text-align:center; letter-spacing:3px; font-size:18px; text-transform:uppercase; padding:13px 12px; margin-bottom:9px; border:1.5px solid var(--wx-line-strong); border-radius:12px; outline:none; background:var(--wx-bg); color:#141414; }
.wx-ag-input:focus{ border-color:var(--wx-accent); }
/* 邮箱/密码输入：别大写、别字距、左对齐正常字号（只有邀请码那格要大写+字距） */
.wx-ag-input[type="email"], .wx-ag-input[type="password"]{ text-transform:none; letter-spacing:normal; text-align:left; font-size:15px; }
/* 注册‖登录 tab */
.wx-ag-tabs{ display:flex; gap:6px; background:var(--wx-bg); border-radius:12px; padding:4px; margin-bottom:16px; }
.wx-ag-tab{ flex:1; border:none; background:transparent; color:var(--wx-t2); font-size:14.5px; font-weight:600; padding:9px 0; border-radius:9px; cursor:pointer; }
.wx-ag-tab.on{ background:var(--wx-card); color:#141414; box-shadow:0 1px 4px rgba(0,0,0,.08); }
.wx-ag-alt{ margin-top:12px; }
.wx-ag-alt a{ font-size:11.5px; color:var(--wx-t2); text-decoration:underline; cursor:pointer; }
.wx-ag-err{ min-height:17px; font-size:12.5px; color:#c0392b; margin:8px 0 0; }
.wx-ag-go{ width:100%; margin-top:4px; background:var(--wx-accent); color:#fff; border:none; border-radius:12px; padding:13px; font-size:15px; font-weight:600; cursor:pointer; }
.wx-ag-go:active{ background:var(--wx-accent-press); }
.wx-ag-consent{ font-size:11px; color:var(--wx-t2); line-height:1.55; margin-top:16px; opacity:.85; }

/* ============ 用户系统：设置页「账号·套餐」面板 ============ */
.wx-acct-panel{ font-size:13px; }
.wx-acct-loading{ color:var(--wx-t2); padding:6px 0; }
.wx-acct-tier{ font-size:15px; color:#141414; }
.wx-acct-tier b{ font-weight:600; }
.wx-acct-anon{ font-size:11px; color:var(--wx-t2); background:var(--wx-press); border-radius:8px; padding:2px 7px; vertical-align:middle; }
.wx-acct-blurb{ font-size:12px; color:var(--wx-t2); margin:3px 0 12px; }
.wx-acct-qs{ display:flex; flex-direction:column; gap:8px; }
.wx-acct-q{ display:flex; align-items:center; gap:9px; }
.wx-acct-qk{ flex:0 0 34px; color:var(--wx-t2); font-size:12px; }
.wx-acct-qbar{ flex:1; height:7px; border-radius:4px; background:var(--wx-press); overflow:hidden; }
.wx-acct-qbar i{ display:block; height:100%; background:var(--wx-accent); border-radius:4px; transition:width .3s; }
.wx-acct-qv{ flex:0 0 auto; font-size:11.5px; color:var(--wx-t2); min-width:56px; text-align:right; }
/* 波A 账号面板新件：到期日/封禁提示/邀请码回看/云同步健康态（沿用 .wx-acct-* 体系与中性灰语汇） */
.wx-acct-exp{ font-size:11px; color:var(--wx-t2); margin-left:6px; }
.wx-acct-banned{ margin:4px 0 10px; padding:8px 10px; border-radius:10px; background:var(--wx-press); color:var(--wx-red); font-size:12.5px; }
.wx-acct-code{ margin-top:13px; padding-top:12px; border-top:1px solid var(--wx-line); display:flex; align-items:center; gap:8px; }
.wx-acct-codek{ font-size:12px; color:var(--wx-t2); flex:0 0 auto; }
.wx-acct-code b{ font-size:15px; font-weight:600; letter-spacing:2px; color:var(--wx-t1); cursor:pointer; padding:2px 8px; border-radius:8px; background:var(--wx-press); user-select:all; -webkit-user-select:all; }
.wx-acct-codehint{ font-size:11.5px; color:var(--wx-t2); margin-top:6px; }
.wx-acct-sync{ margin-top:10px; font-size:11.5px; color:var(--wx-t2); }
.wx-acct-sync.bad{ color:#b8860b; }
/* 账号面板·邮箱绑定 */
.wx-acct-email{ margin-top:12px; font-size:12.5px; color:#141414; }
.wx-acct-emhint{ color:var(--wx-t2); font-size:11px; margin-left:4px; }
.wx-acct-bind{ margin-top:13px; padding-top:12px; border-top:1px solid var(--wx-line); }
/* 落地方案-41 · 绑邮箱折叠：默认一行入口，点开才展开表单（原三行常驻太占地） */
.wx-acct-bindrow{ display:flex; align-items:center; gap:8px; cursor:pointer; }
.wx-acct-bindrow b{ font-size:14px; font-weight:600; color:var(--wx-t1); flex:0 0 auto; }
.wx-acct-bindrow .wx-acct-bindhint{ flex:1; min-width:0; margin:0; text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wx-acct-bindrow .wx-setapp-go{ transition:transform .18s; }
.wx-acct-bind.open .wx-acct-bindrow .wx-setapp-go{ transform:rotate(90deg); }
.wx-acct-bindbody{ display:none; margin-top:10px; }
.wx-acct-bind.open .wx-acct-bindbody{ display:block; }
.wx-acct-bindhint{ font-size:11.5px; color:var(--wx-t2); margin-bottom:8px; }
.wx-acct-bind .wx-set-in{ margin-bottom:7px; }
.wx-acct-bindbtn{ width:100%; background:var(--wx-press); color:#141414; border:1px solid var(--wx-line-strong); border-radius:10px; padding:9px; font-size:13px; font-weight:600; cursor:pointer; }
.wx-acct-bindbtn:active{ background:var(--wx-line); }
.wx-acct-bindbtn:disabled{ opacity:.6; }

/* ===== 首次登录引导（开机剧本·2026-07-06）：仅首跑专属新屏，不覆盖任何现有组件 ===== */
/* ① 开机动画：纯黑全屏浮层（盖状态栏/横条），衬线字标呼吸淡入 + 底部进度细线（72% 顿挫）。守设计红线：无光晕/无粒子/无渐变。 */
#wx-boot{ position:absolute; inset:0; z-index:30; background:#000; display:flex; align-items:center; justify-content:center; }
#wx-boot .wx-boot-logo{ font-family:var(--font-serif); font-size:30px; letter-spacing:.06em; color:#e8e8ea; opacity:0; animation:wxBootBreathe 1.4s var(--ease) .3s forwards; }
#wx-boot .wx-boot-logo .wx-boot-sl{ color:rgba(232,232,234,.5); }   /* ovv 重塑：品牌字「ovv/」的斜杠淡一档（用户拍板写法 1） */
@keyframes wxBootBreathe{ 0%{ opacity:0; transform:scale(.985); } 60%{ opacity:1; } 100%{ opacity:1; transform:scale(1); } }
#wx-boot .wx-boot-pl{ position:absolute; bottom:120px; width:150px; height:1.5px; background:rgba(255,255,255,.12); border-radius:2px; overflow:hidden; }
#wx-boot .wx-boot-pl i{ display:block; height:100%; background:#e8e8ea; width:0; animation:wxBootPl 2.2s .5s forwards; }
@keyframes wxBootPl{ 0%{ width:0; } 50%{ width:72%; } 68%{ width:72%; } 100%{ width:100%; } }
/* ②③④⑤ 建档仪式：light 底、衬线大标、单必填、点击即进 */
.wx-onb-screen{ background:#fbfbfc; }
.wx-onb{ min-height:100%; display:flex; flex-direction:column; padding:34px 32px 40px; background:#fbfbfc; }
.wx-onb-crumb{ font-size:11px; color:var(--wx-t3); letter-spacing:.12em; margin-bottom:44px; }
.wx-onb-h1{ font-family:var(--font-serif); font-size:27px; font-weight:600; line-height:1.35; color:var(--wx-t1); }
.wx-onb-sub{ font-size:13.5px; color:var(--wx-t2); margin-top:10px; line-height:1.7; }
.wx-onb-body{ flex:1; padding-top:38px; }
.wx-onb-in{ width:100%; border:none; border-bottom:1.5px solid var(--wx-line-strong); background:transparent; font-size:19px; padding:10px 2px; outline:none; font-family:var(--font-sans); color:var(--wx-t1); }
.wx-onb-in::placeholder{ color:var(--wx-t3); }
.wx-onb-gbtns{ display:flex; gap:10px; }
.wx-onb-gbtn{ flex:1; padding:15px 0; border:1px solid var(--wx-line-strong); border-radius:var(--wx-r-lg); background:#fff; font-size:15px; cursor:pointer; color:var(--wx-t1); transition:all .15s var(--ease); }
.wx-onb-gbtn.sel{ background:var(--wx-accent); color:#fff; border-color:var(--wx-accent); }
.wx-onb-avwrap{ display:flex; flex-direction:column; align-items:center; gap:18px; padding-top:8px; }
.wx-onb-avph{ width:104px; height:104px; border-radius:32px; background:var(--wx-accent-soft); display:flex; align-items:center; justify-content:center; font-size:36px; color:var(--wx-t3); font-family:var(--font-serif); background-size:cover; background-position:center; }
.wx-onb-cta{ border:none; background:var(--wx-accent); color:#fff; font-size:15px; padding:15px; border-radius:999px; cursor:pointer; width:100%; }
.wx-onb-cta-sm{ width:200px; }
.wx-onb-ghost{ background:transparent; border:none; color:var(--wx-t3); font-size:13px; padding:10px; cursor:pointer; }
.wx-onb.wx-onb-done{ align-items:center; justify-content:center; gap:12px; animation:wxOnbFade .5s var(--ease); }
@keyframes wxOnbFade{ from{ opacity:0; } to{ opacity:1; } }
.wx-onb-done b{ font-family:var(--font-serif); font-size:26px; font-weight:600; color:var(--wx-t1); }
.wx-onb-done span{ font-size:13.5px; color:var(--wx-t2); }
/* ⑦⑧ 官方号：文字气泡走正常单聊渲染（带头像·聚拢），卡片与系统提示行居中 */
/* 卡片（会话内·零 LLM·居中系统卡）：类名避开 normalizeWxHtml 正则 → 原样上屏；margin:auto 居中(flex/block 都成立)，且是 groupDmAvatars 的 break 段 */
.wx-ofcard{ align-self:center; background:var(--wx-card); border-radius:var(--wx-r-md); box-shadow:var(--sh-sm); overflow:hidden; width:238px; max-width:78%; margin:6px auto; }
.wx-ofcard-b{ padding:11px 13px; }
.wx-ofcard-b b{ font-size:14px; display:block; margin-bottom:3px; color:var(--wx-t1); }
.wx-ofcard-b p{ font-size:12.5px; color:var(--wx-t2); line-height:1.55; margin:0; }
.wx-ofcard-a{ border-top:1px solid var(--wx-line); padding:9px; text-align:center; font-size:13px; font-weight:500; cursor:pointer; color:var(--wx-t1); }
.wx-ofcard-a:active{ background:var(--wx-press); }
/* 列表行「官方」灰字小标 */
.wx-of-badge{ display:inline-block; font-size:10px; color:var(--wx-t2); border:1px solid var(--wx-line-strong); border-radius:4px; padding:0 4px; margin-left:5px; vertical-align:1px; }

/* ============ 线下见面「身边模式」（落地方案-40）：换皮=色温+减壳+旁白升主体，零光效零粒子 ============ */
#wx-app{ transition:background-color .24s var(--ease); }
#wx-app.wx-meeting{ --wx-bg:#f6f3ee; }   /* 冷灰→暖纸：这一层色温差承担「此刻不在线上」的全部感知 */
#wx-app.wx-meeting .wx-inputbar{ transition:background-color .24s var(--ease); }
#wx-app.wx-meeting .wx-b{ border-radius:20px; box-shadow:none; background:rgba(120,120,130,.10); }      /* 对白去尾角减壳：面对面说话的「轻」，不是网络气泡 */
#wx-app.wx-meeting .wxm-ub{ border-radius:20px; background:rgba(20,20,20,.06); }
#wx-app.wx-meeting .wx-scene::before{ content:"\25c7  \8eab\8fb9"; color:#a89e8a; }                      /* 旁白块标签：◇ 场景 → ◇ 身边（A 书页版：页眉染暖） */
#wx-app.wx-meeting .wx-scene{ background-color:#fbf9f5; border-color:rgba(60,50,30,.07); background-image:linear-gradient(90deg,transparent,#d5ccba),linear-gradient(90deg,#d5ccba,transparent); }   /* A 书页版：纸卡随见面态转暖（普通档冷调 #fafafc） */
#wx-app.wx-meeting .wx-scene-trunc .wx-scene-tx{ -webkit-line-clamp:6; }                                  /* 旁白是主体：6 行再折叠（JS 阈值同步放宽） */
/* 顶栏胶囊副行：单一金点 + 身边 · 地点 · 紧凑时长。暖纸已表达线下，删除重复的 ◇ 装饰。 */
.wx-cap-col{ display:flex; flex:1 1 auto; flex-direction:column; min-width:0; line-height:1.18; overflow:hidden; }
.wx-cap-col .wx-chat-cap-nm{ display:block; min-width:0; }
.wx-chat-cap-sub{ display:flex; align-items:center; min-width:0; font-size:10.5px; color:#79684f; white-space:nowrap; overflow:hidden; }
.wx-cap-live,.wx-cap-time{ flex:0 0 auto; }
.wx-cap-place{ min-width:0; overflow:hidden; text-overflow:ellipsis; }
/* 见面呼吸金点：唯一状态符号，2.6s 缓律动；reduced-motion 下静止。 */
.wx-mb-dot{ display:inline-block; flex:0 0 auto; width:5px; height:5px; border-radius:50%; background:#c2a166; margin-right:5px; vertical-align:middle; transform:translateY(-1px); animation:wxMbBreathe 2.6s ease-in-out infinite; }
@keyframes wxMbBreathe{ 0%,100%{ opacity:.45; transform:scale(.8); } 50%{ opacity:1; transform:scale(1); } }
.wx-cap-mdur{ font-style:normal; font-variant-numeric:tabular-nums; }
.wx-meet-ending-note{ flex:0 0 auto; align-self:center; margin:-3px 0 5px; padding:5px 11px; border:1px solid rgba(121,104,79,.09); border-radius:999px; background:rgba(255,254,250,.78); box-shadow:0 4px 16px rgba(76,59,34,.06); color:#79684f; font-size:10.5px; letter-spacing:.2px; animation:wxJumpIn .18s ease both; }
#wx-app.wx-meet-ending .wx-inputbar{ opacity:.5; pointer-events:none; filter:saturate(.65); }
/* 待赴条的「出发」（meet 变体）：出发为主按钮，⏭ 快进降为次按钮 */
.wx-ns-meet{ background:#141414; color:#fff; border:none; border-radius:999px; padding:6px 13px; font-size:12.5px; font-weight:600; font-family:inherit; cursor:pointer; flex:0 0 auto; }
.wx-ns-meet:active{ opacity:.85; }
.wx-ns-go2{ padding:6px 9px; font-size:12px; }

/* ============ 呼吸色盘（2026-07-11 拍板 · cfg.chatBg）：底色+双光斑极缓漂移(呼吸)+玻璃高光+细噪点(玻璃)；
   renderApp 只在聊天视图挂 #wx-app[data-chatbg]，默认档(冷雾)不挂=零变化。材质在 #wx-screen 伪元素（不滚动容器·transform 纯合成层），
   见面态=同色的手工暖变体整组切换（非公式叠膜，冷调不发脏·用户确认）。 ============ */
#wx-app[data-chatbg] #wx-screen{ z-index:0; }   /* 强制层叠上下文：让 z-index:-1 的材质钉在内容之下 */
#wx-app[data-chatbg] #wx-screen::before{
    content:""; position:absolute; inset:-30%; z-index:-1;
    background:
        radial-gradient(46% 40% at 22% 20%, var(--cbg1), transparent 70%),
        radial-gradient(54% 48% at 80% 80%, var(--cbg2), transparent 72%),
        var(--cbg0);
    animation:wxCbgDrift 20s ease-in-out infinite alternate;
}
#wx-app[data-chatbg] #wx-screen::after{
    content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
    background-image:linear-gradient(178deg, rgba(255,255,255,.30), rgba(255,255,255,0) 32%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
}
#wx-app[data-chatbg] .wx-msgs, #wx-app[data-chatbg] .wx-chat-cap-wrap{ background:transparent; }   /* 顶栏区+消息区透出同一张呼吸底 */
@keyframes wxCbgDrift{ from{ transform:translate(-2.2%,-1.8%) scale(1); } to{ transform:translate(2.2%,1.8%) scale(1.05); } }
@media (prefers-reduced-motion:reduce){ #wx-app[data-chatbg] #wx-screen::before{ animation:none; } }
/* 7 色变量组（日常 / .wx-meeting 见面暖变体） */
#wx-app[data-chatbg="paper"]{ --cbg0:#f6f3ee; --cbg1:#ecdcc3; --cbg2:#fffdf8; }
#wx-app.wx-meeting[data-chatbg="paper"]{ --cbg0:#f7f1e7; --cbg1:#eddbb9; --cbg2:#fffcf4; }
#wx-app[data-chatbg="moon"]{ --cbg0:#eef1f5; --cbg1:#d5e1ee; --cbg2:#fbfdff; }
#wx-app.wx-meeting[data-chatbg="moon"]{ --cbg0:#f2f2ec; --cbg1:#e0ddd0; --cbg2:#fdfcf6; }
#wx-app[data-chatbg="bean"]{ --cbg0:#f5eeee; --cbg1:#ecd6d6; --cbg2:#fdf7f6; }
#wx-app.wx-meeting[data-chatbg="bean"]{ --cbg0:#f6eee8; --cbg1:#eed6c8; --cbg2:#fdf6ef; }
#wx-app[data-chatbg="pine"]{ --cbg0:#eef2ed; --cbg1:#d7e5d8; --cbg2:#f8fbf7; }
#wx-app.wx-meeting[data-chatbg="pine"]{ --cbg0:#f1f1e8; --cbg1:#dde0ca; --cbg2:#fbfaf1; }
#wx-app[data-chatbg="lotus"]{ --cbg0:#f1eff5; --cbg1:#ddd6ec; --cbg2:#faf8fe; }
#wx-app.wx-meeting[data-chatbg="lotus"]{ --cbg0:#f4efee; --cbg1:#e5d5dc; --cbg2:#fcf7f6; }
#wx-app[data-chatbg="oat"]{ --cbg0:#f5f1e8; --cbg1:#e9dcc0; --cbg2:#fcf9f1; }
#wx-app.wx-meeting[data-chatbg="oat"]{ --cbg0:#f6f0e1; --cbg1:#ead8b6; --cbg2:#fdf8ec; }
#wx-app[data-chatbg="dusk"]{ --cbg0:#efecea; --cbg1:#dcd0c5; --cbg2:#f9f6f3; }
#wx-app.wx-meeting[data-chatbg="dusk"]{ --cbg0:#f0eae1; --cbg1:#ddcbb9; --cbg2:#faf4eb; }
/* 设置页 · 色球排（第一行=标题+徽标照 tg 结构，球排 width:100% 换行铺下面） */
/* 2026-07-17：色盘搬进「外观」二级页后，原来包着它的 .wx-set-cbgrow 容器已不存在，这条规则随之删除（.wx-set-cbg 自带 width:100%+flex-wrap，不依赖它） */
.wx-set-cbg{ display:flex; flex-wrap:wrap; gap:10px 6px; width:100%; margin-top:10px; }
.wx-set-cbgb{ border:none; background:none; padding:2px; width:calc(25% - 5px); display:flex; flex-direction:column; align-items:center; gap:5px; cursor:pointer; font-family:inherit; }
.wx-set-cbgc{ width:34px; height:34px; border-radius:50%; border:1px solid rgba(0,0,0,.07); position:relative; display:block; }
.wx-set-cbgb.on .wx-set-cbgc::after{ content:""; position:absolute; inset:-5px; border:2px solid #141414; border-radius:50%; }
.wx-set-cbgn{ font-size:10.5px; color:var(--wx-t2); letter-spacing:.5px; }
.wx-set-cbgb.on .wx-set-cbgn{ color:var(--wx-t1); font-weight:600; }
/* 见面界碑（居中系统条的 meet 变体）*/
.wx-sys-meet{ color:#8a7a5e; }
/* ◇ 动作括号快捷钮（输入栏左侧，仅见面态渲染）*/
.wx-act-btn{ width:34px; height:34px; min-width:34px; border-radius:50%; background:rgba(20,20,20,.06); color:#8a7a5e; border:none; display:flex; align-items:center; justify-content:center; font-size:14px; font-family:var(--font-serif); cursor:pointer; }
.wx-act-btn:active{ background:rgba(20,20,20,.12); }
/* 峰值「瞬间」卡：排版升格＝仪式（上下细线+衬线大字），揭示前 JS 停 800ms——顿挫即仪式 */
#wx-app .wx-peak{ margin:20px 10px 6px; padding:14px 6px 16px; border-top:1px solid #ddd3c2; border-bottom:1px solid #ddd3c2; text-align:center; }
#wx-app .wx-peak-k{ font-size:10px; letter-spacing:3px; color:#b0a692; margin-bottom:9px; font-weight:600; }
#wx-app .wx-peak-t{ font-family:var(--font-serif); font-size:16.5px; line-height:1.85; color:#3d3a34; text-wrap:pretty; }
/* 出发过场：沿用 #wx-jump-overlay 全套，只加一行「点一下先看屏幕」小字 */
.wx-jump-skip{ font-size:11px; color:rgba(255,255,255,.42); letter-spacing:1px; margin-top:2px; animation:wxJumpFade .6s ease .5s both; }
/* 道别确认：两条等权选择，不用成功绿暗示“正确答案”；取消本身就是继续待会。面板挂 #wx-app，避开 iOS 键盘滚动 #wx-screen。 */
.wx-meet-endmask{ position:absolute; inset:0; z-index:96; background:rgba(28,28,32,.38); display:flex; align-items:flex-end; animation:wxJumpIn .2s ease both; -webkit-backdrop-filter:blur(1.5px); backdrop-filter:blur(1.5px); }
.wx-meet-endcard{ background:#fffefa; width:100%; max-height:calc(100% - 12px); overflow-y:auto; overscroll-behavior:contain; border-radius:26px 26px 0 0; padding:8px 16px calc(16px + env(safe-area-inset-bottom,0px)); box-shadow:0 -18px 56px rgba(30,25,20,.17); animation:wxMeetSheetIn .3s var(--ease) both; }
@keyframes wxMeetSheetIn{ from{ transform:translateY(24px); opacity:.6; } to{ transform:none; opacity:1; } }
.wx-me-handle{ width:34px; height:4px; margin:0 auto 8px; border-radius:999px; background:rgba(80,72,62,.15); }
.wx-me-meta{ text-align:center; color:#6f6961; font-size:10.5px; letter-spacing:.6px; }
.wx-me-t{ margin-top:7px; font-size:19px; line-height:1.2; font-weight:650; letter-spacing:-.02em; text-align:center; color:#1c1c20; }
.wx-me-sub{ max-width:300px; margin:5px auto 15px; font-size:11.5px; line-height:1.6; color:#706b64; text-align:center; }
.wx-me-options{ display:flex; flex-direction:column; gap:8px; }
.wx-me-option{ width:100%; min-height:59px; border:1px solid rgba(55,48,40,.08); background:#fff; border-radius:16px; padding:10px 12px; display:grid; grid-template-columns:36px minmax(0,1fr) 20px; align-items:center; gap:10px; text-align:left; color:#1c1c20; font-family:inherit; cursor:pointer; transition:background-color .16s var(--ease),border-color .16s var(--ease),transform .16s var(--ease); }
.wx-me-option:hover{ background:#fbf7f1; border-color:rgba(139,112,70,.18); }
.wx-me-option:active{ transform:scale(.985); }
.wx-me-option-ic{ width:36px; height:36px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:#f3ede3; color:#79684f; }
.wx-me-option-ic svg{ width:20px; height:20px; display:block; }
.wx-me-option-copy{ min-width:0; display:flex; flex-direction:column; gap:4px; }
.wx-me-option-copy b{ font-size:13.5px; line-height:1.1; font-weight:620; }
.wx-me-option-copy small{ color:#746f68; font-size:10.5px; line-height:1.25; }
.wx-me-chev{ color:#b0aaa1; font-size:22px; line-height:1; text-align:center; }
.wx-me-cancel{ display:block; width:100%; min-height:44px; margin-top:8px; border:0; border-radius:14px; background:transparent; color:#6f6860; font:500 12px/1 var(--font-sans); cursor:pointer; }
.wx-me-cancel:active{ background:rgba(50,45,40,.04); }
.wx-me-option:focus-visible,.wx-me-cancel:focus-visible{ outline:2px solid #9b7c4d; outline-offset:2px; }
/* 出发面板仍复用旧双按钮容器；道别面板已改列表，不互相污染。 */
.wx-me-btns{ display:flex; gap:10px; margin-top:16px; }
.wx-me-btns button{ flex:1; border:none; border-radius:999px; padding:12px 0; font-size:14px; font-family:inherit; cursor:pointer; }
#wx-mg-cancel{ background:rgba(20,20,20,.06); color:var(--wx-t1); }
#wx-mg-go{ background:var(--wx-green); color:#fff; font-weight:600; }
@media(prefers-reduced-motion:reduce){
  .wx-mb-dot,.wx-meet-ending-note,.wx-meet-endmask,.wx-meet-endcard{ animation:none; }
  .wx-meet-farewell,.wx-me-option{ transition:none; }
}
/* P0.1 「见面」出发面板：约定行 + 地点输入（复用结束确认卡的底部面板语言） */
.wx-mg-plan{ display:flex; align-items:center; gap:9px; width:100%; margin-top:16px; background:#fff7e6; border:1px solid #f0e0c0; border-radius:14px; padding:11px 13px; font-family:inherit; font-size:13px; color:#8a6d3b; cursor:pointer; text-align:left; }
.wx-mg-plan-tx{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wx-mg-plan-go{ font-weight:600; color:#5c431c; flex:0 0 auto; }
.wx-mg-or{ text-align:center; font-size:11px; color:var(--wx-t3); margin-top:12px; }
.wx-mg-where{ display:block; width:100%; margin-top:12px; border:1px solid var(--wx-line-strong); border-radius:999px; padding:11px 16px; font-size:13.5px; font-family:inherit; color:var(--wx-t1); background:#fff; outline:none; }
.wx-mg-where:focus{ border-color:rgba(20,20,20,.25); }

/* ============ 合照 · 玩家形象照（批1 2026-07-13·原型变体A 打磨版）============ */
/* 关于我 · 我的形象卡 */
.wx-gp-row{ display:flex; gap:12px; align-items:flex-start; padding:12px 0 15px; }
.wx-gp-por{ width:84px; height:112px; border-radius:14px; flex:0 0 auto; background-size:cover; background-position:center; background-color:var(--wx-accent-soft); box-shadow:0 4px 14px rgba(0,0,0,.07), inset 0 0 0 1px rgba(0,0,0,.05); }
.wx-gp-por.empty{ display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--wx-t3); box-shadow:none; }
.wx-gp-meta{ flex:1; min-width:0; padding-top:2px; }
.wx-gp-meta b{ font-size:15px; font-weight:600; letter-spacing:.2px; display:flex; align-items:center; gap:7px; color:var(--wx-t1); }
.wx-gp-st{ font-size:10.5px; padding:2.5px 8px; border-radius:999px; background:var(--wx-accent-soft); color:var(--wx-t2); font-weight:500; font-style:normal; letter-spacing:.4px; }
.wx-gp-meta span{ display:block; font-size:12.5px; color:var(--wx-t2); margin-top:7px; line-height:1.7; }
.wx-gp-acts{ display:flex; gap:8px; margin-top:13px; }
.wx-gp-btn{ font-size:13px; padding:8px 16px; border-radius:999px; border:1.1px solid rgba(20,20,20,.13); background:#fff; color:var(--wx-t1); font-weight:500; letter-spacing:.3px; line-height:1; font-family:inherit; cursor:pointer; }
.wx-gp-btn.pri{ background:var(--wx-accent); color:#fff; border-color:var(--wx-accent); }
/* 引导弹层（复用 wx-cps 底部弹层体系）：两个方式选项 + 线性图标 */
.wx-gp-ops{ display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.wx-gp-op{ display:flex; align-items:center; gap:13px; border:1.1px solid rgba(0,0,0,.07); border-radius:16px; padding:14px 15px; cursor:pointer; }
.wx-gp-op:active{ background:var(--wx-accent-soft); }
.wx-gp-op > div{ flex:1; min-width:0; }
.wx-gp-op b{ font-size:14.5px; font-weight:600; display:block; letter-spacing:.2px; color:var(--wx-t1); }
.wx-gp-oph{ display:block; font-size:12px; color:var(--wx-t2); margin-top:3.5px; line-height:1.55; }
.wx-gp-ic{ width:40px; height:40px; border-radius:13px; background:var(--wx-accent-soft); display:flex; align-items:center; justify-content:center; flex:0 0 auto; color:var(--wx-t1); }
.wx-gp-ic svg{ width:19px; height:19px; }
.wx-gp-fine{ font-size:11px; color:var(--wx-t3); line-height:1.7; margin-top:13px; }
.wx-gp-cancel{ text-align:center; font-size:13.5px; color:var(--wx-t2); padding:15px 0 1px; cursor:pointer; }
/* 生成中骨架微光 + 结果预览（复用现有骨架语系，无新特效） */
.wx-gp-load{ width:150px; height:200px; border-radius:18px; margin:14px auto 6px; background:var(--wx-accent-soft); position:relative; overflow:hidden; }
.wx-gp-load::before{ content:''; position:absolute; inset:0; background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,.7) 50%, transparent 70%); background-size:220% 100%; animation:wxGpShine 1.6s linear infinite; }
@keyframes wxGpShine{ from{ background-position:180% 0; } to{ background-position:-80% 0; } }
.wx-gp-preview{ width:150px; height:200px; border-radius:18px; margin:14px auto 6px; background-size:cover; background-position:center; box-shadow:0 10px 30px rgba(0,0,0,.12); }

/* 合照·批3D 纪念册「镜头里的我们」：三列影像墙（复用 moir 章节语系，无新特效） */
.wx-moir-shots{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:2px 0 14px; }
.wx-moir-shot{ aspect-ratio:3/4; border-radius:12px; background-size:cover; background-position:center; box-shadow:0 3px 12px rgba(0,0,0,.08), inset 0 0 0 1px rgba(0,0,0,.04); cursor:pointer; }

/* ===== ⭐加好友页·角色广场（B 封面流修订版 2026-07-15·原型 docs/原型/加好友页重设计-原型-2026-07-15.html）：
   双列 3:4 封面卡（压暗scrim+题材tag+名字·一句重点）/ 列表切换 / 我玩过的抽屉 / 预览弹卡（坑#21 挂 #wx-app+absolute） ===== */
.wx-plz-scroll{ flex:1; min-height:0; overflow-y:auto; }   /* 页面滚动容器（顶栏外全部内容；旧 .wx-pp-list 退役后滚动职责在这——2026-07-15 修「卡片无法滑动」） */
.wx-plz-chipsrow{ display:flex; align-items:stretch; }
.wx-plz-chips{ flex:1 1 auto; min-width:0; padding-right:8px; }
.wx-plz-ctls{ position:relative; display:flex; gap:7px; align-items:center; padding:12px 18px 4px 10px; flex:0 0 auto; }
.wx-plz-ctls::before{ content:''; position:absolute; left:0; top:16px; bottom:8px; width:1px; background:rgba(20,20,30,.1); }
.wx-plz-ctl{ height:30px; border:1.2px solid #dcdce1; border-radius:999px; background:#fff; font-size:12px; font-weight:500; color:#56565d; padding:0 12px; cursor:pointer; font-family:inherit; }
.wx-plz-ctl.on{ background:#141414; border-color:#141414; color:#fff; font-weight:600; }
.wx-plz-ico{ width:32px; padding:0; display:flex; align-items:center; justify-content:center; }
.wx-plz-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 12px; padding:10px 18px 0; }
.wx-plz-card{ min-width:0; cursor:pointer; animation:wxin .26s ease both; }
.wx-plz-card:active{ transform:scale(.97); }
.wx-plz-cov{ position:relative; aspect-ratio:3/4; border-radius:18px; overflow:hidden; box-shadow:0 6px 20px rgba(20,20,30,.07); display:flex; align-items:center; justify-content:center; background-size:cover; background-position:center; }
.wx-plz-cov::after{ content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(15,15,20,.62), transparent 50%); }
.wx-plz-init{ font-size:54px; font-weight:600; color:rgba(255,255,255,.82); font-family:var(--font-serif); }
.wx-plz-tag{ position:absolute; top:10px; left:10px; z-index:1; padding:4px 10px; border-radius:999px; background:rgba(20,20,26,.38); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:#fff; font-size:10.5px; font-weight:600; letter-spacing:.4px; }
.wx-plz-id{ position:absolute; left:13px; right:10px; bottom:11px; z-index:1; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.35); }
.wx-plz-nm{ font-size:15px; font-weight:600; display:flex; align-items:baseline; gap:6px; }
.wx-plz-nm span{ font-size:11.5px; font-weight:400; opacity:.85; }
.wx-plz-ht{ margin-top:3px; font-size:11px; opacity:.82; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wx-plz-none{ grid-column:1/-1; text-align:center; color:#b6b6bc; font-size:12.5px; padding:34px 0 20px; }
/* 列表视图（A 行式版式·交互统一为点行开预览，行内无加按钮） */
.wx-plz-rows{ margin:10px 18px 0; background:#fff; border-radius:22px; box-shadow:0 6px 20px rgba(20,20,30,.07); overflow:hidden; }
.wx-plz-row{ position:relative; display:flex; align-items:center; gap:12px; padding:10px 14px 10px 16px; cursor:pointer; }
.wx-plz-row + .wx-plz-row::before{ content:''; position:absolute; left:80px; right:14px; top:0; height:1px; background:rgba(20,20,30,.055); }
.wx-plz-row:active{ background:rgba(0,0,0,.04); }
.wx-plz-rav{ flex:0 0 auto; width:52px; height:52px; border-radius:15px; display:flex; align-items:center; justify-content:center; font-size:20px; color:rgba(255,255,255,.9); font-weight:600; background-size:cover; background-position:center; }
.wx-plz-rtx{ flex:1; min-width:0; }
.wx-plz-rnm{ font-size:15px; font-weight:600; color:var(--wx-t1); display:flex; align-items:baseline; gap:7px; }
.wx-plz-rnm span{ font-size:11.5px; font-weight:400; color:var(--wx-t3); }
.wx-plz-rht{ margin-top:2px; font-size:12.5px; color:var(--wx-t2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wx-plz-rgo{ flex:0 0 auto; font-size:14px; color:var(--wx-t3); }
/* 我玩过的 + 捏人入口：合并为一张分组卡（2026-07-22 拍板 A）；红点与抽屉逻辑原样保留 */
.wx-plz-grouped{ margin:16px 18px 0; background:var(--wx-card); border-radius:22px; box-shadow:0 6px 20px rgba(20,20,30,.07); overflow:hidden; }
.wx-plz-grouped > *{ position:relative; margin:0; border:0; border-radius:0; box-shadow:none; padding:13px 16px; background:transparent; }
.wx-plz-grouped > * + *::before{ content:''; position:absolute; left:76px; right:16px; top:0; height:1px; background:rgba(20,20,30,.055); }
.wx-plz-mrow{ display:flex; align-items:center; gap:10px; cursor:pointer; }
.wx-plz-mrow:active{ background:rgba(0,0,0,.03); }
.wx-plz-stack{ display:flex; align-items:center; }
.wx-plz-stk{ width:28px; height:28px; border-radius:50%; border:2px solid #fff; background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center; font-size:12px; color:rgba(255,255,255,.9); margin-left:-8px; box-sizing:content-box; }
.wx-plz-stk:first-child{ margin-left:0; }
.wx-plz-mtx{ flex:1; font-size:13.5px; color:var(--wx-t1); font-weight:500; display:flex; align-items:center; gap:6px; }
.wx-plz-dot{ width:6px; height:6px; border-radius:50%; background:var(--wx-red); flex:0 0 auto; }
.wx-plz-mgo{ font-size:14px; color:var(--wx-t3); }
/* 预览弹卡 / 抽屉弹层（坑#21：#wx-app+absolute；贴底吃安全区） */
.wx-plz-mask{ position:absolute; inset:0; z-index:70; background:rgba(15,15,20,.34); display:flex; align-items:flex-end; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .22s var(--ease), visibility 0s linear .22s; }
.wx-plz-mask.show{ opacity:1; visibility:visible; pointer-events:auto; transition:opacity .22s var(--ease); }
.wx-plz-sheet{ width:100%; max-height:88%; overflow:auto; background:#fff; border-radius:30px 30px 0 0; box-shadow:0 -18px 50px rgba(20,20,30,.22); padding:0 0 calc(24px + env(safe-area-inset-bottom,0px)); transform:translateY(100%); transition:transform .28s cubic-bezier(.22,1,.36,1); }
.wx-plz-mask.show .wx-plz-sheet{ transform:none; }
.wx-plz-grip{ width:38px; height:4px; border-radius:999px; background:rgba(0,0,0,.14); margin:12px auto 6px; }
.wx-plz-pbody{ padding:6px 22px 8px; }
.wx-plz-idrow{ display:flex; align-items:center; gap:14px; }
.wx-plz-pav{ flex:0 0 auto; width:60px; height:60px; border-radius:18px; display:flex; align-items:center; justify-content:center; font-size:25px; color:rgba(255,255,255,.9); font-weight:600; }
.wx-plz-who{ flex:1; min-width:0; }
.wx-plz-pnm{ font-family:var(--font-serif); font-style:italic; font-size:21px; font-weight:500; color:var(--wx-t1); }
.wx-plz-pnm span{ font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; font-style:normal; font-size:12px; color:var(--wx-t3); margin-left:7px; }
.wx-plz-pchips{ margin-top:6px; display:flex; gap:6px; flex-wrap:wrap; }
.wx-plz-pchips i{ font-style:normal; font-size:11px; color:#76767d; background:#f1f1f3; padding:4px 10px; border-radius:8px; }
.wx-plz-moms{ display:flex; gap:8px; margin:14px 0 0; }
.wx-plz-moms span{ width:68px; height:68px; border-radius:14px; background-size:cover; background-position:center; background-color:#f1f1f3; }
.wx-plz-pq{ margin:16px 0 0; border-left:2px solid #e2e2e6; padding-left:12px; font-family:var(--font-serif); font-style:italic; font-size:14.5px; line-height:1.6; color:#3a3a40; }
.wx-plz-sh{ margin:18px 0 6px; font-size:11.5px; font-weight:600; color:var(--wx-t3); letter-spacing:.4px; }
.wx-plz-ptx{ font-size:13.5px; line-height:1.7; color:#3a3a40; }
.wx-plz-hide{ display:none; }
.wx-plz-fold{ color:var(--wx-t3); font-size:12.5px; margin-left:4px; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.wx-plz-pfoot{ padding:14px 22px 0; }
.wx-plz-main{ display:block; width:100%; background:#141414; color:#fff; border:none; border-radius:999px; font-size:14.5px; font-weight:600; padding:14px 0; cursor:pointer; font-family:inherit; }
.wx-plz-main:active{ transform:scale(.97); }
.wx-plz-note{ text-align:center; font-size:11px; color:var(--wx-t3); margin-top:7px; }
.wx-plz-ghost{ display:block; width:100%; margin-top:9px; background:#fff; color:var(--wx-t1); border:1.2px solid #d4d4d9; border-radius:999px; font-size:13.5px; font-weight:500; padding:12px 0; cursor:pointer; font-family:inherit; }
.wx-plz-txtbtn{ display:block; width:100%; margin-top:8px; background:none; border:none; color:#c56b6b; font-size:12.5px; padding:8px 0; cursor:pointer; font-family:inherit; }
/* 我玩过的·抽屉列表 */
.wx-plz-dhd{ font-family:var(--font-serif); font-style:italic; font-size:20px; color:var(--wx-t1); padding:6px 22px 0; }
.wx-plz-dsub{ font-size:12px; color:var(--wx-t3); padding:4px 22px 8px; }
.wx-plz-dlist{ padding:0 22px; }
.wx-plz-mnrow{ position:relative; display:flex; align-items:center; gap:12px; padding:11px 0; cursor:pointer; }
.wx-plz-mnrow + .wx-plz-mnrow::before{ content:''; position:absolute; left:58px; right:0; top:0; height:1px; background:rgba(20,20,30,.055); }
.wx-plz-mnav{ flex:0 0 auto; width:46px; height:46px; border-radius:50%; background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center; font-size:17px; color:rgba(255,255,255,.9); }
.wx-plz-mntx{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.wx-plz-mntx b{ font-size:14.5px; font-weight:600; color:var(--wx-t1); }
.wx-plz-mntx i{ font-style:normal; font-size:11.5px; color:var(--wx-t3); }
.wx-plz-mnbtn{ flex:0 0 auto; border:1.2px solid #d4d4d9; background:#fff; border-radius:999px; font-size:12px; font-weight:600; color:var(--wx-t1); padding:5px 13px; cursor:pointer; font-family:inherit; }

/* ===== ⭐场景视频「让这一刻动起来」（落地方案-43·变体A 快门·2026-07-16）===== */
/* 图上播放层：wrap 只包生成图，overlay 绝不盖到叙述文字 */
/* wrap=block+fit-content 贴住图片自身盒（inline-block 会把图从「margin:auto 居中」拽去左贴边）；
   图的外边距上移到 wrap，overlay 的 inset:0 才与图完全重合 */
.wx-vwrap{ position:relative; display:block; width:fit-content; max-width:100%; margin:12px auto 2px; }
.wx-vmedia{ position:relative; }   /* 图+浮层的锚层（2026-07-18）：播放键/拍摄中角标只盖图，不压下方按钮行 */
.wx-vmedia .wx-gen-img{ display:block; margin:0; }
/* 拍摄中且图还没上屏（懒加载中/加载失败·img 0×0）：wrap 兜一个占位盒，角标绝不塌成竖条压到叙述正文 */
.wx-vmedia.wx-vd-wait{ min-width:min(230px,100%); min-height:44px; }   /* 占位底盒挪到 media（结构调整 2026-07-18），坑#21 角标防塌语义不变 */
.wx-vplay{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; cursor:pointer; border-radius:inherit; }
.wx-vplay-pk{ width:50px; height:50px; border-radius:50%; background:rgba(18,18,24,.55); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; }
.wx-vplay-pk::after{ content:""; margin-left:4px; border-style:solid; border-width:9px 0 9px 15px; border-color:transparent transparent transparent #fff; }
.wx-vplay-dur{ position:absolute; right:9px; bottom:9px; background:rgba(18,18,24,.62); color:#fff; font-size:11px; border-radius:7px; padding:3px 8px; font-variant-numeric:tabular-nums; }
/* 拍摄中角标（安静·不打断聊天） */
.wx-vd-badge{ position:absolute; left:9px; bottom:9px; display:flex; align-items:center; gap:7px; background:rgba(18,18,24,.62); backdrop-filter:blur(6px); color:#fff; font-size:11px; border-radius:999px; padding:5px 11px; pointer-events:none; white-space:nowrap; max-width:calc(100% - 18px); overflow:hidden; }
.wx-vd-dots i{ display:inline-block; width:4px; height:4px; margin-right:3px; border-radius:50%; background:#fff; opacity:.35; animation:wxvd 1.3s infinite; }
.wx-vd-dots i:nth-child(2){ animation-delay:.22s; } .wx-vd-dots i:nth-child(3){ animation-delay:.44s; margin-right:0; }
@keyframes wxvd{ 0%,70%,100%{opacity:.35} 30%{opacity:1} }
@media (prefers-reduced-motion: reduce){ .wx-vd-dots i{ animation:none; opacity:.8; } }
.wx-vd-fail{ position:absolute; left:8px; right:auto; bottom:8px; z-index:4; display:flex; align-items:center; gap:7px; width:auto; max-width:calc(100% - 16px); padding:6px 11px; border:0; border-radius:14px; background:rgba(255,255,255,.94); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:0 2px 8px rgba(0,0,0,.18); color:#1c1c20; font-family:inherit; text-align:left; cursor:pointer; }
.wx-vd-fail > span:last-child{ display:flex; flex-direction:column; min-width:0; }
.wx-vd-fail b{ font-size:10.5px; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wx-vd-fail small{ margin-top:1px; color:#8a8a90; font-size:9.5px; line-height:1.3; white-space:nowrap; }
.wx-vd-fail-dot{ display:block; flex:0 0 7px; width:7px; height:7px; border-radius:50%; background:var(--wx-red); color:transparent; font-size:0; }
.wx-vd-fail.uncertain{ cursor:default; }
.wx-vd-fail.uncertain .wx-vd-fail-dot{ background:#b3b3b9; }
/* 「动起来」按钮：黑底小胶囊（操作条里的主动作） */
.wx-gen-act.wx-vd-go{ color:#fff; background:#141414; border-color:#141414; }
/* 底部确认卡（坑#21：挂 #wx-app + absolute；贴底吃安全区） */
.wx-vid-mask{ position:absolute; inset:0; background:rgba(15,15,20,.32); z-index:70; opacity:0; transition:.22s; }
.wx-vid-mask.show{ opacity:1; }
.wx-vid-sheet{ --wx-vid-gold:#b98636; position:absolute; left:0; right:0; bottom:0; box-sizing:border-box; max-height:calc(100% - 18px - env(safe-area-inset-top,0px)); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none; background:var(--wx-card,#fbfbfd); border-radius:29px 29px 0 0; padding:10px 18px calc(15px + env(safe-area-inset-bottom)); box-shadow:0 -18px 54px rgba(15,15,22,.18); transform:translateY(102%); transition:.32s cubic-bezier(.22,1,.36,1); }
.wx-vid-sheet::-webkit-scrollbar{ display:none; }
.wx-vid-mask.show .wx-vid-sheet{ transform:none; }
.wx-vid-grab{ width:38px; height:4px; border-radius:99px; background:#d5d5da; margin:0 auto 13px; }
.wx-vid-head{ display:grid; grid-template-columns:56px 1fr; align-items:center; gap:12px; }
.wx-vid-head img{ width:56px; height:70px; border-radius:13px; object-fit:cover; background:#ddd; box-shadow:inset 0 0 0 1px rgba(20,20,24,.06); }
.wx-vid-head > div{ min-width:0; }
.wx-vid-eyebrow{ margin-bottom:3px; color:var(--wx-vid-gold); font-size:10px; font-weight:750; letter-spacing:1.35px; }
.wx-vid-h{ font-size:19px; line-height:1.2; font-weight:680; letter-spacing:-.35px; }
.wx-vid-sub{ margin-top:5px; color:#92929a; font-size:11.5px; line-height:1.4; }
.wx-vid-rail{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; margin:14px 0 3px; color:#ababaf; font-family:ui-monospace,"SFMono-Regular",Menlo,monospace; font-size:8.5px; letter-spacing:.5px; }
.wx-vid-rail i{ position:relative; height:12px; background:repeating-linear-gradient(90deg,rgba(24,24,30,.2) 0 1px,transparent 1px 18px) center/100% 6px no-repeat; }
.wx-vid-rail i::after{ content:""; position:absolute; left:0; top:4px; width:42%; height:4px; border-radius:99px; background:linear-gradient(90deg,#17171b,var(--wx-vid-gold)); box-shadow:0 0 0 3px rgba(185,134,54,.10); }
.wx-vid-section{ padding:14px 0; border-top:1px solid rgba(25,25,32,.075); }
.wx-vid-section-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:9px; }
.wx-vid-section-head b{ font-size:12.5px; font-weight:680; }
.wx-vid-section-head span{ color:#92929a; font-size:10.5px; text-align:right; }
.wx-vid-options{ display:grid; gap:7px; }
.wx-vid-duration{ grid-template-columns:repeat(3,1fr); }
.wx-vid-quality{ grid-template-columns:repeat(2,1fr); }
.wx-vid-choice{ position:relative; min-width:0; border:1px solid transparent; border-radius:14px; padding:9px 8px 8px; background:#efeff2; color:#4e4e56; font-family:inherit; text-align:left; cursor:pointer; transition:transform .12s ease,background .16s ease,border-color .16s ease; }
.wx-vid-choice:active{ transform:scale(.97); }
.wx-vid-choice b{ display:block; color:inherit; font-size:13px; font-weight:680; }
.wx-vid-choice small{ display:block; margin-top:2px; overflow:hidden; color:#9999a0; font-size:9.5px; text-overflow:ellipsis; white-space:nowrap; }
.wx-vid-choice.on{ border-color:#19191d; background:#19191d; color:#fff; box-shadow:0 7px 16px rgba(16,16,20,.14); }
.wx-vid-choice.on small{ color:rgba(255,255,255,.57); }
.wx-vid-choice.recommended::after{ content:"更清晰"; position:absolute; right:7px; top:7px; color:var(--wx-vid-gold); font-size:8px; font-weight:760; }
.wx-vid-sound{ display:grid; grid-template-columns:36px 1fr auto; align-items:center; gap:10px; min-height:50px; padding:7px 9px; border-radius:15px; background:#efeff2; }
.wx-vid-sound-icon{ display:grid; place-items:center; width:36px; height:36px; border-radius:11px; background:#fff; color:#777780; box-shadow:0 2px 8px rgba(20,20,28,.06); }
.wx-vid-sound-copy b{ display:block; font-size:12.5px; font-weight:680; }
.wx-vid-sound-copy small{ display:block; margin-top:3px; color:#92929a; font-size:9.5px; line-height:1.3; }
.wx-vid-switch{ position:relative; width:43px; height:25px; border:0; border-radius:99px; background:#c9c9cf; cursor:pointer; transition:background .18s ease; }
.wx-vid-switch::after{ content:""; position:absolute; left:2px; top:2px; width:21px; height:21px; border-radius:50%; background:#fff; box-shadow:0 2px 7px rgba(0,0,0,.2); transition:transform .2s cubic-bezier(.2,.8,.3,1.2); }
.wx-vid-switch.on{ background:var(--wx-vid-gold); }
.wx-vid-switch.on::after{ transform:translateX(18px); }
.wx-vid-sheet input[type=text]{ box-sizing:border-box; width:100%; min-height:42px; border:1px solid transparent; border-radius:13px; outline:none; padding:11px 12px; background:#efeff2; color:inherit; font-family:inherit; font-size:12px; }
.wx-vid-sheet input[type=text]::placeholder{ color:#a0a0a7; }
.wx-vid-sheet input[type=text]:focus{ border-color:rgba(23,23,27,.2); background:#fff; outline:none; }
.wx-vid-cost{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:1px; padding:10px 12px; border:1px solid rgba(185,134,54,.13); border-radius:14px; background:rgba(185,134,54,.08); }
.wx-vid-cost > span > small{ display:block; color:#8b7757; font-size:9.5px; }
.wx-vid-cost > span > b{ display:block; margin-top:2px; color:#17171b; font-size:11.5px; font-weight:650; }
.wx-vid-points{ flex:none; text-align:right; }
.wx-vid-points #wx-vid-pts{ display:block; color:#9b6d29; font-size:15px; font-variant-numeric:tabular-nums; }
.wx-vid-points small{ display:block; margin-top:1px; color:#aa9676; font-size:8.5px; }
.wx-vid-go{ width:100%; height:47px; border:none; cursor:pointer; font-family:inherit; margin-top:10px; background:#17171b; color:#fff; font-size:14px; font-weight:680; border-radius:16px; box-shadow:0 9px 22px rgba(17,17,21,.18); }
.wx-vid-go:active{ opacity:.85; }
.wx-vid-go.needs-charge{ background:var(--wx-vid-gold); box-shadow:0 9px 22px rgba(155,109,41,.22); }
.wx-vid-balance{ min-height:15px; margin-top:5px; color:var(--wx-red); font-size:10.5px; text-align:center; }
.wx-vid-note{ margin:3px 4px 0; color:#aaaab1; text-align:center; font-size:9px; line-height:1.45; }
.wx-vid-sheet button:focus-visible,.wx-vid-sheet input:focus-visible{ outline:2px solid var(--wx-vid-gold); outline-offset:2px; }
@media(max-height:760px){
  .wx-vid-sheet{ padding-top:8px; }
  .wx-vid-sub,.wx-vid-rail,.wx-vid-note{ display:none; }
  .wx-vid-section{ padding:10px 0; }
  .wx-vid-head{ grid-template-columns:48px 1fr; }
  .wx-vid-head img{ width:48px; height:58px; }
  .wx-vid-sheet input[type=text]{ min-height:38px; padding-block:9px; }
}
@media(max-width:340px){ .wx-vid-sheet{ padding-left:15px; padding-right:15px; } .wx-vid-section-head span{ max-width:58%; } }
@media(prefers-reduced-motion:reduce){ .wx-vid-mask,.wx-vid-sheet,.wx-vid-choice,.wx-vid-switch,.wx-vid-switch::after{ transition:none; } }
/* 成片播放浮层（坑#21 合规） */
#wx-vidbox{ position:absolute; inset:0; z-index:75; background:rgba(10,10,14,.92); display:none; align-items:center; justify-content:center; box-sizing:border-box; padding:calc(52px + env(safe-area-inset-top)) 12px calc(72px + env(safe-area-inset-bottom)); }
#wx-vidbox.show{ display:flex; }
#wx-vidbox video{ max-width:100%; max-height:100%; border-radius:12px; background:#000; }
.wx-vb-x{ position:absolute; top:calc(10px + env(safe-area-inset-top)); right:14px; width:34px; height:34px; border:none; border-radius:50%; background:rgba(255,255,255,.14); color:#fff; font-size:15px; cursor:pointer; }
.wx-vb-actions{ position:absolute; left:50%; transform:translateX(-50%); bottom:calc(14px + env(safe-area-inset-bottom)); display:flex; align-items:center; gap:9px; width:calc(100% - 24px); max-width:260px; white-space:nowrap; }   /* 看完即可就同一张首帧重拍；贴底吃 env=坑#21 */
.wx-vb-action{ display:inline-flex; align-items:center; justify-content:center; gap:7px; flex:1 1 0; min-width:0; height:44px; padding:0 12px; border:1px solid rgba(255,255,255,.12); border-radius:999px; background:rgba(255,255,255,.16); backdrop-filter:blur(6px); color:#fff; font-family:inherit; font-size:13px; font-weight:600; cursor:pointer; }
.wx-vb-redo{ background:rgba(255,255,255,.94); color:#17171b; }
.wx-vb-action:active{ transform:scale(.95); }
.wx-vb-action:disabled{ opacity:.48; cursor:default; transform:none; }

/* 🧊 批4 冷库「查看更早」（2026-07-17 数据丢失审计）：顶部入口胶囊 + 归档冷区（只读·无 data-idx） */
.wx-arc-more{ text-align:center; margin:10px 0 4px; }
.wx-arc-more span{ display:inline-block; padding:5px 14px; font-size:12px; color:#7a7a7a; background:#efefef; border-radius:14px; cursor:pointer; }
.wx-arc-more.busy span{ opacity:.5; pointer-events:none; }
.wx-arc-sep{ text-align:center; margin:10px 0; font-size:11px; color:#b9b9b9; }

/* 🔒 雷① 多 tab 互斥锁定页（门类盖层·同 #wx-authgate 全局先例，故意 body+fixed） */
#wx-tablock{ position:fixed; inset:0; z-index:99999; background:rgba(246,246,246,.98); display:flex; align-items:center; justify-content:center; }
.wx-tl-card{ text-align:center; padding:32px; max-width:300px; }
.wx-tl-t{ font-size:17px; font-weight:600; color:#111; margin-bottom:10px; }
.wx-tl-d{ font-size:13px; color:#8a8a8a; line-height:1.6; margin-bottom:20px; }
#wx-tl-take{ padding:10px 22px; border:none; border-radius:10px; background:#111; color:#fff; font-size:14px; cursor:pointer; }

/* ===== 📱「装到主屏幕」首访引导卡（2026-07-17 用户拍板：首访弹一次·可关不再弹；坑#21 框内浮层挂 #wx-app+absolute）===== */
#wx-a2hs{ position:absolute; left:10px; right:10px; bottom:calc(14px + env(safe-area-inset-bottom,0px)); z-index:60; transform:translateY(130%); opacity:0; transition:transform .3s cubic-bezier(.2,.8,.25,1), opacity .3s; pointer-events:none; }
#wx-a2hs.show{ transform:none; opacity:1; pointer-events:auto; }
.wx-a2hs-card{ position:relative; display:flex; align-items:center; gap:11px; background:#fff; border:1px solid rgba(20,20,30,.07); border-radius:18px; padding:12px 13px; box-shadow:0 12px 36px rgba(20,20,30,.16); }
.wx-a2hs-ic{ width:40px; height:40px; border-radius:10px; flex:0 0 40px; }
.wx-a2hs-tx{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.wx-a2hs-tx b{ font-size:13.5px; color:var(--wx-t1); }
.wx-a2hs-tx span{ font-size:11.5px; line-height:1.5; color:var(--wx-t2); }
.wx-a2hs-go{ flex:0 0 auto; border:none; background:#141414; color:#fff; border-radius:999px; padding:8px 15px; font-size:12.5px; font-weight:600; font-family:inherit; cursor:pointer; }
.wx-a2hs-go:active{ opacity:.85; }
.wx-a2hs-x{ position:absolute; top:-7px; right:-3px; width:22px; height:22px; display:flex; align-items:center; justify-content:center; background:#fff; border:1px solid rgba(20,20,30,.1); border-radius:50%; font-size:11px; color:var(--wx-t3); cursor:pointer; box-shadow:0 2px 8px rgba(20,20,30,.12); }