/* voice.css — 游戏内语音条（落地方案-24 · 按「VOICE · TRANSCRIBE」设计稿还原）
 * 中性灰玻璃气泡 · 深色圆播放键 + 灰波形 + 时长 · 转文字默认折叠（语音开→长按展开；语音关→默认显示）。
 * index.html 在 style.css 之后引入；__voiceDecorate(voice_play.js) 把模型输出的语音条重绘成下面这套结构。
 */

/* 气泡：全中性灰玻璃（盖掉按联系人配色的气泡底色，语音条始终中性） */
#wx-app .wx-b.wx-voice{
  display:flex; align-items:center; gap:10px;
  padding:9px 15px 9px 9px !important;
  background:rgba(120,120,130,.12) !important;
  cursor:pointer; flex-wrap:wrap; min-width:0;
}

/* 深色圆播放键 + 白三角 */
.wx-voice .wx-vpb{
  width:32px; height:32px; border-radius:50%; flex:none;
  background:#1c1c20; display:flex; align-items:center; justify-content:center;
  transition:transform .12s ease, opacity .15s ease;
}
.wx-voice .wx-vpb:active{ transform:scale(.92); }
.wx-voice .wx-vpb svg{ display:block; }
/* 载入中：三角【不再转】(转圈像 bug)，只是变淡；改由波形做安静的「载入呼吸」(区别于播放时的律动) */
.wx-voice.wx-v-loading .wx-vpb{ opacity:.55; }
.wx-voice.wx-v-loading .wx-wf i{ background:#9a9aa0; animation:wx-wf-load 1.15s ease-in-out infinite; }
.wx-voice.wx-v-loading .wx-wf i:nth-child(3n+1){ animation-delay:.13s; }
.wx-voice.wx-v-loading .wx-wf i:nth-child(3n+2){ animation-delay:.26s; }
@keyframes wx-wf-load{ 0%,100%{ opacity:.3; transform:scaleY(.55); } 50%{ opacity:.65; transform:scaleY(.82); } }

/* 灰波形：一排不同高度的竖条 */
.wx-voice .wx-wf{ display:flex; align-items:center; gap:2.5px; height:26px; flex:1 1 auto; min-width:0; overflow:hidden; }
.wx-voice .wx-wf i{ width:2.5px; border-radius:2px; background:#6a6a70; flex:none; }
.wx-voice.wx-v-playing .wx-wf i{ background:#1c1c20; animation:wx-wf-pulse 1.05s ease-in-out infinite; }
.wx-voice.wx-v-playing .wx-wf i:nth-child(3n){ animation-delay:.18s; }
.wx-voice.wx-v-playing .wx-wf i:nth-child(3n+1){ animation-delay:.34s; }
@keyframes wx-wf-pulse{ 0%,100%{ opacity:.5; transform:scaleY(.82); } 50%{ opacity:1; transform:scaleY(1.12); } }
/* 播放中：圆键里的三角 → 暂停(两竖条)，一眼可辨"正在播、点=暂停"；同时波形律动 */
.wx-voice.wx-v-playing .wx-vpb svg{ display:none; }
.wx-voice.wx-v-playing .wx-vpb::before,
.wx-voice.wx-v-playing .wx-vpb::after{ content:''; width:3px; height:11px; border-radius:1.5px; background:#fff; }
.wx-voice.wx-v-playing .wx-vpb::before{ margin-right:3px; }

/* 时长 + 未播放小圆点 */
.wx-voice .wx-vd2{ font-size:12.5px; color:#6a6a70; flex:none; font-variant-numeric:tabular-nums; }
.wx-voice .wx-vdot{ width:6px; height:6px; border-radius:50%; background:#3a76f0; flex:none; }
.wx-voice.wx-v-heard .wx-vdot{ display:none; }   /* 听过/展开过 → 去掉未读点 */

/* 转文字：默认折叠；wx-v-txshow(语音关·常显) 或 wx-v-txopen(长按展开) 才显示 */
.wx-voice .wx-vtx{
  flex-basis:100%; display:none; margin-top:7px; padding-top:8px;
  border-top:1px solid rgba(0,0,0,.06);
  font-size:13px; line-height:1.55; color:#56565d; white-space:pre-wrap; word-break:break-word;
}
.wx-voice.wx-v-txshow .wx-vtx,
.wx-voice.wx-v-txopen .wx-vtx{ display:block; animation:wx-tx-in .28s cubic-bezier(.22,1,.36,1) both; }
@keyframes wx-tx-in{ from{ opacity:0; transform:translateY(-3px); } to{ opacity:1; transform:none; } }

/* 「逐行书写」转写指示器（合成/转写中，安静克制；对齐设计稿 tx-write） */
.wx-voice .wx-txwrite{ flex-basis:100%; display:none; flex-direction:column; gap:3.4px; margin-top:8px; width:60%; }
.wx-voice.wx-v-txwriting .wx-txwrite{ display:flex; }
.wx-voice.wx-v-txwriting .wx-vtx{ display:none; }
.wx-voice .wx-txwrite i{ height:2.4px; border-radius:2px; background:#9a9aa0; transform-origin:left center; animation:wx-txwrite 2.1s ease-in-out infinite; }
.wx-voice .wx-txwrite i:nth-child(1){ width:100%; }
.wx-voice .wx-txwrite i:nth-child(2){ width:74%; animation-delay:.26s; }
.wx-voice .wx-txwrite i:nth-child(3){ width:90%; animation-delay:.52s; }
@keyframes wx-txwrite{ 0%{ transform:scaleX(.06); opacity:.5; } 40%{ transform:scaleX(1); opacity:1; } 80%{ transform:scaleX(1); opacity:1; } 100%{ transform:scaleX(.06); opacity:.5; } }

.wx-voice.wx-v-error .wx-vpb{ opacity:.5; }
.wx-voice.wx-v-error .wx-vd2::after{ content:" · 点重试"; opacity:.7; }

/* ============================================================
 * voice_picker（「TA 的声音」全屏选择器 · 捏人语音适配 2026-07-12）
 * 结构由 voice_picker.js 渲染；原型底稿 docs/原型/捏人语音-原型-2026-07-12.html 变体A
 * ============================================================ */
#wx-vp-overlay{ position:fixed; inset:0; z-index:100004; }   /* 压过资料页/⋯菜单(100003)与齿轮(100000)；入口在菜单里，打开时菜单已关 */
#wx-app #wx-vp-overlay{ position:absolute; }   /* 现挂 #wx-app 内（voice_picker.js open()）：桌面手机框(>=540px)下整页选择器留在框内；fixed 仅作 body 兜底 */
#wx-vp-overlay .wx-vp-page{ position:absolute; inset:0; background:var(--wx-bg,#f4f4f6); display:flex; flex-direction:column; animation:wx-vp-in .26s cubic-bezier(.22,1,.36,1) both; }
@keyframes wx-vp-in{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
#wx-vp-overlay .wx-vp-page.noanim{ animation:none; }   /* 同视图重渲（点选音色等）不重播入场动画——治「点不同试听音色闪一下」 */
.wx-vp-nav{ display:flex; align-items:center; gap:8px; padding:18px 16px 8px; flex:none; }
.wx-vp-bk{ width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:19px; color:var(--wx-t1,#141414); cursor:pointer; }
.wx-vp-tt{ font-size:17px; font-weight:600; flex:1; }
.wx-vp-sk{ font-size:13px; color:var(--wx-t2,#8a8a90); cursor:pointer; padding:6px 4px; }
.wx-vp-who{ display:flex; align-items:center; gap:12px; padding:4px 20px 14px; flex:none; }
.wx-vp-av{ width:46px; height:46px; border-radius:var(--wx-r-av,13px); background:var(--wx-t1,#141414); color:#fff; display:flex; align-items:center; justify-content:center; font-size:20px; font-family:var(--font-serif,"Songti SC",serif); flex:none; box-shadow:var(--sh-sm,0 2px 10px rgba(0,0,0,.05)); }
.wx-vp-nm{ font-size:15px; font-weight:600; }
.wx-vp-ln{ font-size:12.5px; color:var(--wx-t2,#8a8a90); margin-top:2.5px; }
.wx-vp-body{ flex:1; overflow-y:auto; overscroll-behavior:contain; padding-bottom:10px; }
.wx-vp-body::-webkit-scrollbar{ display:none; }
.wx-vp-sec{ font-size:11px; color:var(--wx-t3,#b6b6bc); letter-spacing:.08em; padding:14px 20px 9px; display:flex; align-items:center; gap:10px; }
.wx-vp-sec::after{ content:''; flex:1; height:1px; background:var(--wx-line,rgba(0,0,0,.05)); }
.wx-vp-chips{ display:flex; gap:8px; overflow-x:auto; padding:2px 20px 10px; }
.wx-vp-chips::-webkit-scrollbar{ display:none; }
.wx-vp-chip{ flex:none; font-size:12.5px; color:var(--wx-t2,#8a8a90); background:var(--wx-card,#fff); border:1px solid var(--wx-line-strong,rgba(0,0,0,.07)); border-radius:999px; padding:5.5px 14px; cursor:pointer; }
.wx-vp-chip:active{ transform:scale(.95); }
.wx-vp-chip.on{ background:var(--wx-t1,#141414); color:#fff; border-color:var(--wx-t1,#141414); font-weight:500; }
.wx-vp-recs{ display:flex; gap:10px; padding:0 20px; }
.wx-vp-card{ flex:1; background:var(--wx-card,#fff); border-radius:var(--wx-r-card,18px); padding:13px 12px 12px; box-shadow:var(--sh-sm,0 2px 10px rgba(0,0,0,.05)); border:1.5px solid var(--wx-line,rgba(0,0,0,.05)); cursor:pointer; position:relative; transition:border-color .15s, transform .12s; min-width:0; }
.wx-vp-card:active{ transform:scale(.97); }
.wx-vp-card.sel{ border-color:var(--wx-t1,#141414); }
.wx-vp-card .wx-vp-pb{ margin-bottom:10px; }
.wx-vp-card .wx-vp-vn{ font-size:13.5px; font-weight:600; }
.wx-vp-card .wx-vp-vt{ font-size:11px; color:var(--wx-t3,#b6b6bc); margin-top:3px; }
.wx-vp-ck{ position:absolute; top:10px; right:10px; width:17px; height:17px; border-radius:50%; background:var(--wx-t1,#141414); color:#fff; font-size:10px; display:none; align-items:center; justify-content:center; }
.wx-vp-card.sel .wx-vp-ck{ display:flex; }
.wx-vp-list{ padding:0 20px; display:flex; flex-direction:column; gap:8px; }
.wx-vp-row{ background:var(--wx-card,#fff); border-radius:14px; padding:10px 13px; display:flex; align-items:center; gap:11px; box-shadow:var(--sh-sm,0 2px 10px rgba(0,0,0,.05)); border:1.5px solid var(--wx-line,rgba(0,0,0,.05)); cursor:pointer; transition:border-color .15s, transform .12s; }
.wx-vp-row:active{ transform:scale(.985); }
.wx-vp-row.sel{ border-color:var(--wx-t1,#141414); }
.wx-vp-meta{ min-width:0; }
.wx-vp-row .wx-vp-vn{ font-size:13.5px; font-weight:600; }
.wx-vp-row .wx-vp-vt{ font-size:11px; color:var(--wx-t3,#b6b6bc); margin-top:2.5px; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wx-vp-rd{ margin-left:auto; width:18px; height:18px; border-radius:50%; border:1.5px solid var(--wx-t3,#b6b6bc); flex:none; display:flex; align-items:center; justify-content:center; }
.wx-vp-row.sel .wx-vp-rd{ border-color:var(--wx-t1,#141414); background:var(--wx-t1,#141414); }
.wx-vp-row.sel .wx-vp-rd::after{ content:''; width:6px; height:6px; border-radius:50%; background:#fff; }
.wx-vp-hint{ padding:20px; font-size:12.5px; color:var(--wx-t3,#b6b6bc); text-align:center; }
.wx-vp-pb{ width:32px; height:32px; border-radius:50%; background:#1c1c20; display:flex; align-items:center; justify-content:center; flex:none; cursor:pointer; transition:transform .12s ease, opacity .15s ease; }
.wx-vp-pb:active{ transform:scale(.92); }
.wx-vp-pb.sm{ width:28px; height:28px; }
.wx-vp-pb.loading{ opacity:.45; animation:wx-vp-pbl 1.1s ease-in-out infinite; }
@keyframes wx-vp-pbl{ 0%,100%{ opacity:.45; } 50%{ opacity:.75; } }
.wx-vp-pb.playing svg{ display:none; }
.wx-vp-pb.playing::before,.wx-vp-pb.playing::after{ content:''; width:3px; height:11px; border-radius:1.5px; background:#fff; }
.wx-vp-pb.playing::before{ margin-right:3px; }
.wx-vp-wf{ display:flex; align-items:center; gap:2.5px; height:24px; overflow:hidden; margin-left:auto; }
.wx-vp-wf i{ width:2.5px; border-radius:2px; background:#6a6a70; flex:none; }
.wx-vp-wf.playing i{ background:#1c1c20; animation:wx-wf-pulse 1.05s ease-in-out infinite; }
.wx-vp-wf.playing i:nth-child(3n){ animation-delay:.18s; }
.wx-vp-sheet{ flex:none; background:rgba(255,255,255,.94); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-top:1px solid var(--wx-line,rgba(0,0,0,.05)); padding:13px 20px calc(16px + env(safe-area-inset-bottom,0px)); box-shadow:0 -8px 30px rgba(0,0,0,.05); }
.wx-vp-cur{ display:flex; align-items:center; gap:10px; margin-bottom:11px; }
.wx-vp-cur .wx-vp-vn{ font-size:14px; font-weight:600; }
.wx-vp-cur .wx-vp-vt{ font-size:11px; color:var(--wx-t3,#b6b6bc); margin-top:1.5px; }
.wx-vp-fine{ font-size:12.5px; color:var(--wx-t2,#8a8a90); cursor:pointer; user-select:none; padding:4px 0 4px 10px; flex:none; }
.wx-vp-fine::after{ content:'▾'; margin-left:4px; font-size:10px; }
.wx-vp-fine.open::after{ content:'▴'; }
.wx-vp-finebox{ display:none; padding:2px 0 4px; }
.wx-vp-finebox.open{ display:block; }
.wx-vp-sl{ margin:9px 0 3px; }
.wx-vp-lb{ display:flex; justify-content:space-between; font-size:11px; color:var(--wx-t3,#b6b6bc); margin-bottom:2px; }
.wx-vp-lb b{ color:var(--wx-t2,#8a8a90); font-weight:500; letter-spacing:.06em; }
.wx-vp-sl input[type=range]{ width:100%; -webkit-appearance:none; appearance:none; height:3px; border-radius:2px; background:rgba(0,0,0,.12); cursor:pointer; margin:10px 0; }
.wx-vp-sl input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:19px; height:19px; border-radius:50%; background:#fff; box-shadow:0 1.5px 5px rgba(0,0,0,.28), 0 0 0 .5px rgba(0,0,0,.08); }
.wx-vp-ops{ display:flex; gap:10px; align-items:center; margin:10px 0 2px; }
.wx-vp-try{ display:flex; align-items:center; gap:10px; background:rgba(120,120,130,.12); border-radius:12px; padding:8px 12px 8px 8px; flex:1; min-width:0; }
.wx-vp-tx{ font-size:12.5px; color:#56565d; flex:1; min-width:0; outline:none; line-height:1.5; }
.wx-vp-tx:focus{ color:var(--wx-t1,#141414); }
.wx-vp-rst{ font-size:12px; color:var(--wx-t2,#8a8a90); cursor:pointer; white-space:nowrap; flex:none; }
.wx-vp-cta{ display:block; width:100%; border:0; background:var(--wx-t1,#141414); color:#fff; font-size:15px; font-weight:600; font-family:inherit; padding:13.5px; border-radius:999px; cursor:pointer; letter-spacing:.02em; }
.wx-vp-cta:active{ background:#000; }
.wx-vp-cta.ghost{ background:transparent; color:var(--wx-t1,#141414); border:1.5px solid var(--wx-line-strong,rgba(0,0,0,.07)); font-weight:500; }
.wx-vp-cap{ font-size:11px; color:var(--wx-t3,#b6b6bc); text-align:center; margin-top:9px; }

/* —— 定嗓（Voice Design）模式 —— */
.wx-vp-dsglink{ margin:10px 20px 0; padding:10px 14px; background:var(--wx-card,#fff); border:1px dashed var(--wx-line-strong,rgba(0,0,0,.07)); border-radius:14px; font-size:12.5px; color:var(--wx-t2,#8a8a90); cursor:pointer; text-align:center; }
.wx-vp-dsglink b{ color:var(--wx-t1,#141414); font-weight:600; margin-left:4px; }
.wx-vp-dsglink:active{ transform:scale(.985); }
.wx-vp-dsg{ background:var(--wx-card,#fff); border-radius:var(--wx-r-card,18px); box-shadow:var(--sh-sm,0 2px 10px rgba(0,0,0,.05)); border:1px solid var(--wx-line,rgba(0,0,0,.05)); margin:4px 16px 12px; padding:16px; }
.wx-vp-dsg-lb{ font-size:11px; color:var(--wx-t3,#b6b6bc); letter-spacing:.08em; margin-bottom:10px; }
.wx-vp-dsg-desc{ font-family:var(--font-serif,"Songti SC",serif); font-size:16px; line-height:1.75; color:var(--wx-t1,#141414); min-height:82px; outline:none; border:0; width:100%; resize:none; background:transparent; }
.wx-vp-dsg-rw{ font-size:12.5px; color:var(--wx-t2,#8a8a90); cursor:pointer; margin-top:8px; display:inline-block; }
.wx-vp-dsg-wrap{ margin:0 16px; }
.wx-vp-dsg-gen{ display:flex; align-items:center; gap:12px; background:var(--wx-card,#fff); border-radius:var(--wx-r-card,18px); box-shadow:var(--sh-sm,0 2px 10px rgba(0,0,0,.05)); border:1px solid var(--wx-line,rgba(0,0,0,.05)); margin:12px 16px; padding:18px 16px; }
.wx-vp-dsg-gen .wx-vp-wf.loading i{ background:#9a9aa0; animation:wx-wf-load 1.15s ease-in-out infinite; }
.wx-vp-dsg-gen .wx-vp-wf.loading i:nth-child(3n+1){ animation-delay:.13s; }
.wx-vp-dsg-tx{ font-size:13px; color:var(--wx-t2,#8a8a90); flex:none; }
.wx-vp-dsg-res{ background:var(--wx-card,#fff); border-radius:var(--wx-r-card,18px); box-shadow:var(--sh-sm,0 2px 10px rgba(0,0,0,.05)); border:1px solid var(--wx-line,rgba(0,0,0,.05)); margin:12px 16px; padding:16px; }
.wx-vp-dsg-ops{ display:flex; gap:10px; margin-top:14px; }
.wx-vp-dsg-ops .wx-vp-cta{ flex:1.5; }
.wx-vp-dsg-ops .wx-vp-cta.ghost{ flex:1; }