/* ==========================================================================
   口袋大智 · 应用样式
   视觉基线沿用已验证的 v0.2 原型：深空底 + 玻璃质感 + 克制动效
   ========================================================================== */

:root {
  --bg: #070C18;
  --glass: rgba(255,255,255,.045);
  --glass-2: rgba(255,255,255,.07);
  --hair: rgba(255,255,255,.10);
  --hair-2: rgba(255,255,255,.16);
  --text: #F2F6FC;
  --text-2: #A9BCD8;
  --text-3: #7689A8;
  --blue: #5AA6FF;
  --blue-deep: #2C6AD1;
  --teal: #45D6C2;
  --gold: #F0C070;
  --danger: #FF7A7A;
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem; --s6:2rem;
  --fs-xs:.75rem; --fs-sm:.875rem; --fs-md:1.0625rem; --fs-lg:1.25rem; --fs-xl:1.5rem;
  --r-sm:.5rem; --r-md:.875rem; --r-lg:1.25rem; --r-pill:999px;
  --ease: cubic-bezier(.22,.61,.36,1);
}
html[data-elder="on"] {
  --fs-xs:.95rem; --fs-sm:1.1rem; --fs-md:1.3rem; --fs-lg:1.5rem; --fs-xl:1.75rem;
}
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { height:100%; }
body {
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Segoe UI",sans-serif;
  background:var(--bg); color:var(--text); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overscroll-behavior:none;
}
button, input, textarea { font-family:inherit; font-size:inherit; color:inherit; }

.app { height:100dvh; display:flex; flex-direction:column; overflow:hidden; }
.safe-top { flex:none; padding-top:env(safe-area-inset-top); background:var(--bg); }
.views { flex:1; overflow:hidden; position:relative; }
.view { position:absolute; inset:0; display:none; flex-direction:column; }
.view.active { display:flex; }
.scroll { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
.pad { padding:0 var(--s4); }
.pad-bottom { height:var(--s7); }

/* ------------------------------------------------------------ 顶部品牌 */
.brand { display:flex; align-items:center; justify-content:space-between; padding:var(--s2) var(--s5) 0; flex:none; }
.brand .mark { display:flex; align-items:center; gap:var(--s2); font-size:var(--fs-sm);
  letter-spacing:.18em; color:var(--text-2); font-weight:600; }
.brand .mark::before { content:""; width:1.25rem; height:1.25rem; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--blue), var(--blue-deep)); box-shadow:0 0 12px rgba(90,166,255,.5); }
.brand .right { display:flex; gap:var(--s2); }
.icon-btn { width:2.5rem; height:2.5rem; border-radius:var(--r-pill); border:1px solid var(--hair);
  background:var(--glass); color:var(--text-2); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.icon-btn:active { background:var(--glass-2); }

/* ------------------------------------------------------------ 形象舞台 */
/* 装饰层一律不接收点击：absolute 元素绘制在流式内容之上，
   不设 pointer-events:none 会盖住字幕条/取消按钮（真机点不到） */
.stage-area .aura, .stage-area .floor, .stage-area .horizon, .stage-area .avatar-ring { pointer-events:none; }
.stage-area { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  position:relative; padding:var(--s2) var(--s5); overflow:hidden; }
.aura { position:absolute; width:20rem; height:20rem; border-radius:50%;
  background:radial-gradient(circle, rgba(90,166,255,.20), rgba(90,166,255,.06) 45%, transparent 70%);
  filter:blur(6px); transition:all .6s var(--ease); pointer-events:none; }
.stage-area.speaking .aura { width:24rem; height:24rem;
  background:radial-gradient(circle, rgba(90,166,255,.34), rgba(69,214,194,.12) 45%, transparent 70%); }
.stage-area.thinking .aura { width:21rem; height:21rem;
  background:radial-gradient(circle, rgba(240,192,112,.18), rgba(90,166,255,.06) 45%, transparent 70%); }
.floor { position:absolute; bottom:1.2rem; width:11rem; height:2.5rem; border-radius:50%;
  background:radial-gradient(ellipse, rgba(90,166,255,.22), transparent 70%); filter:blur(5px); }
.horizon { position:absolute; bottom:2rem; width:15rem; height:3px;
  background:linear-gradient(90deg, transparent, rgba(90,166,255,.5), transparent); filter:blur(1px); }
.avatar-slot { position:relative; width:13rem; height:13rem; display:flex; align-items:center; justify-content:center; }
.avatar-slot canvas { width:11.5rem; height:11.5rem; }
.avatar-ring { position:absolute; inset:0; border-radius:50%; border:1px solid rgba(90,166,255,.28); }
.avatar-ring::after { content:""; position:absolute; inset:-8px; border-radius:50%; border:1px solid rgba(255,255,255,.06); }
.stage-area.speaking .avatar-ring { animation:pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%,100% { transform:scale(1); border-color:rgba(90,166,255,.28) } 50% { transform:scale(1.05); border-color:rgba(69,214,194,.55) } }
.ava-photo-wrap { width:9.5rem; height:9.5rem; position:relative; }
.ava-photo-wrap.tap { animation:ava-tap .5s var(--ease); }
@keyframes ava-tap { 0% { transform:scale(1) } 40% { transform:scale(1.07) } 100% { transform:scale(1) } }
.ava-photo { width:100%; height:100%; border-radius:50%; object-fit:cover; display:block;
  border:1px solid var(--hair-2); box-shadow:0 0 40px rgba(90,166,255,.35); background:#16243D;
  animation:ava-float 4.5s ease-in-out infinite, ava-sway 7s ease-in-out infinite; }
.stage-area.speaking .ava-photo {
  animation:ava-float 4.5s ease-in-out infinite, ava-sway 7s ease-in-out infinite, ava-bob .85s ease-in-out infinite; }
/* 幅度由工坊配置写成 CSS 变量；调 0 即关闭该动作（动画照跑但不动） */
@keyframes ava-float { 0%,100% { transform:translateY(calc(var(--float-amp,6px) * -1)) } 50% { transform:translateY(var(--float-amp,6px)) } }
@keyframes ava-sway { 0%,100% { rotate:calc(var(--sway-amp,3deg) * -1) } 50% { rotate:var(--sway-amp,3deg) } }
@keyframes ava-bob { 0%,100% { transform:translateY(calc(var(--bob-amp,5px) * -1)) scale(1) } 50% { transform:translateY(var(--bob-amp,5px)) scale(1.035) } }
.subtitle { margin-top:var(--s4); text-align:center; max-width:20rem; min-height:4.5rem;
  font-size:var(--fs-md); letter-spacing:.01em; }
.subtitle .caret { display:inline-block; width:2px; height:1.05em; background:var(--teal);
  vertical-align:-2px; margin-left:2px; animation:caret 1s steps(2) infinite; }
@keyframes caret { 0%,49% { opacity:1 } 50%,100% { opacity:0 } }
.state-line { margin-top:var(--s2); font-size:var(--fs-sm); color:var(--text-3); min-height:1.4em; text-align:center; }

/* ------------------------------------------------------------ 语音识别字幕（形象下方） */
/* 文档流布局：作为 .view 的直接子元素，不被 stage-area 的 overflow:hidden 裁剪，
   任何时刻取消按钮都可点；动画只做透明度，不做位移，点击命中区恒定 */
.asr-live { display:flex; align-items:center; gap:var(--s2); flex:none; align-self:center; max-width:22rem; width:calc(100% - var(--s6));
  margin:0 var(--s3) var(--s2); padding:var(--s2) var(--s3);
  border-radius:var(--r-pill); border:1px solid rgba(69,214,194,.35); background:rgba(69,214,194,.08);
  font-size:var(--fs-sm); animation:asr-in .25s var(--ease); }
@keyframes asr-in { from { opacity:0 } to { opacity:1 } }
.asr-live[hidden] { display:none; }
.asr-live .dot { width:.5rem; height:.5rem; flex:none; border-radius:50%; background:var(--teal); animation:blink 1s infinite; }
@keyframes blink { 0%,100% { opacity:1 } 50% { opacity:.25 } }
.asr-live .asr-tag { color:var(--teal); font-weight:700; flex:none; }
.asr-live .asr-text { color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; flex:1; text-align:left; }
.asr-live .asr-cancel { flex:none; border:1px solid var(--hair-2); background:transparent; color:var(--text-3);
  font-size:var(--fs-xs); border-radius:var(--r-pill); padding:2px var(--s2); cursor:pointer; min-height:1.75rem; }
.asr-live .asr-cancel:active { background:var(--glass-2); }

/* ------------------------------------------------------------ 输入区 */
.dock { flex:none; padding:var(--s3) var(--s4) calc(var(--s4) + env(safe-area-inset-bottom));
  border-top:1px solid var(--hair); background:linear-gradient(to top, rgba(11,18,34,.96), rgba(11,18,34,.55)); }
.chips { display:flex; gap:var(--s2); overflow-x:auto; scrollbar-width:none; margin-bottom:var(--s3); }
.chips::-webkit-scrollbar { display:none; }
.chip { flex:none; border:1px solid var(--hair); background:var(--glass); color:var(--text);
  font-size:var(--fs-sm); padding:var(--s2) var(--s3); border-radius:var(--r-pill); cursor:pointer; min-height:2.5rem; }
.mode-voice { display:flex; align-items:center; gap:var(--s4); }
.mode-text { display:flex; align-items:center; gap:var(--s2); }
.dock[data-mode="text"] .mode-voice { display:none; }
.dock[data-mode="voice"] .mode-text { display:none; }
.mic { flex:1; min-height:4.25rem; border-radius:var(--r-pill); border:1px solid rgba(90,166,255,.35);
  background:linear-gradient(135deg, rgba(90,166,255,.16), rgba(44,106,209,.10)); color:var(--text);
  display:flex; align-items:center; justify-content:center; gap:var(--s2); font-size:var(--fs-md);
  font-weight:600; cursor:pointer; position:relative; overflow:hidden; touch-action:none; }
.mic::after { content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 50% 50%, rgba(90,166,255,.25), transparent 60%); opacity:0; }
.mic:active { transform:scale(.985); }
.mic.listening { background:linear-gradient(135deg, rgba(69,214,194,.28), rgba(90,166,255,.14)); border-color:rgba(69,214,194,.6); }
.mic.listening::after { opacity:1; animation:rip 1.3s ease-out infinite; }
@keyframes rip { 0% { transform:scale(.9); opacity:.9 } 100% { transform:scale(1.9); opacity:0 } }
.mic .wave { display:inline-flex; align-items:center; gap:3px; height:1.25rem; }
.mic .wave i { width:3px; border-radius:2px; background:var(--teal); height:6px; }
.mic.listening .wave i { animation:eq .9s ease-in-out infinite; }
.mic.listening .wave i:nth-child(2){ animation-delay:.15s } .mic.listening .wave i:nth-child(3){ animation-delay:.3s }
.mic.listening .wave i:nth-child(4){ animation-delay:.45s } .mic.listening .wave i:nth-child(5){ animation-delay:.6s }
@keyframes eq { 0%,100% { height:6px } 50% { height:20px } }
.dock-btn { width:3.25rem; height:3.25rem; flex:none; border-radius:var(--r-pill); border:1px solid var(--hair);
  background:var(--glass); color:var(--text-2); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.dock-btn.primary { border-color:rgba(90,166,255,.4);
  background:linear-gradient(135deg, rgba(90,166,255,.2), rgba(44,106,209,.12)); color:var(--blue); }
.text-field { flex:1; min-height:3.25rem; border-radius:var(--r-pill); border:1px solid var(--hair-2);
  background:rgba(255,255,255,.05); padding:0 var(--s4); }
.text-field:focus { outline:none; border-color:rgba(90,166,255,.55); }
.send-btn { flex:none; min-width:3.25rem; min-height:3.25rem; border-radius:var(--r-pill); border:none;
  background:linear-gradient(135deg, var(--blue), var(--blue-deep)); color:#04101F; font-size:var(--fs-sm); font-weight:700; cursor:pointer; }

/* ------------------------------------------------------------ 通用页面头 */
.page-head { flex:none; padding:var(--s5) var(--s4) var(--s3);
  display:flex; align-items:flex-start; gap:var(--s3); }
.page-head > .icon-btn { flex:none; margin-top:2px; }
.page-head > div { flex:1; min-width:0; }
.page-head h1 { font-size:var(--fs-xl); font-weight:700; letter-spacing:-.01em; }
.page-head p { font-size:var(--fs-sm); color:var(--text-2); margin-top:var(--s1); }
.foot-note { font-size:var(--fs-xs); color:var(--text-3); text-align:center; margin:var(--s4) var(--s4) 0; }

/* ------------------------------------------------------------ 文件工作台 */
.drop-zone { margin:var(--s2) 0 var(--s4); border:1px dashed var(--hair-2); border-radius:var(--r-lg);
  background:var(--glass); padding:var(--s6) var(--s4); text-align:center; cursor:pointer; }
.drop-zone.dragging { border-color:var(--blue); background:rgba(90,166,255,.10); }
.dz-icon { font-size:2.25rem; }
.dz-main { font-size:var(--fs-md); font-weight:600; margin-top:var(--s2); }
.dz-sub { font-size:var(--fs-sm); color:var(--text-2); margin-top:2px; }
.dz-note { font-size:var(--fs-xs); color:var(--text-3); margin-top:var(--s3); }

.file-item { display:flex; align-items:center; gap:var(--s3); background:var(--glass);
  border:1px solid var(--hair); border-radius:var(--r-md); padding:var(--s3); margin-bottom:var(--s2); }
.file-item .ftype { width:2.75rem; height:2.75rem; flex:none; border-radius:var(--r-sm); display:flex;
  align-items:center; justify-content:center; font-size:.7rem; font-weight:800; background:var(--glass-2); color:var(--teal); }
.file-item .fmeta { flex:1; min-width:0; }
.file-item .fmeta .fn { font-size:var(--fs-sm); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.file-item .fmeta .fs { font-size:var(--fs-xs); color:var(--text-3); }
.file-item .fmeta .fs.bad { color:var(--gold); }
.file-item .fdel { width:2.25rem; height:2.25rem; flex:none; border:none; background:transparent;
  color:var(--text-3); font-size:var(--fs-lg); cursor:pointer; border-radius:var(--r-sm); }

.action-block { margin-top:var(--s5); }
.blk-title { font-size:var(--fs-md); font-weight:700; margin-bottom:var(--s3); }
.act-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--s2); }
.act { border:1px solid var(--hair); background:var(--glass); border-radius:var(--r-md);
  padding:var(--s3); text-align:left; cursor:pointer; min-height:4rem; }
.act .an { font-size:var(--fs-sm); font-weight:700; display:block; }
.act .ad { font-size:var(--fs-xs); color:var(--text-3); display:block; margin-top:2px; }
.act.on { border-color:var(--blue); background:rgba(90,166,255,.14); }
.extra { display:block; margin-top:var(--s3); }
.extra > span { font-size:var(--fs-sm); color:var(--text-2); }
.extra textarea { width:100%; margin-top:var(--s2); border-radius:var(--r-md); border:1px solid var(--hair);
  background:rgba(255,255,255,.04); padding:var(--s3); resize:vertical; font-size:var(--fs-sm); }

.run-bar { display:flex; gap:var(--s2); margin-top:var(--s4); }
.primary-btn { flex:1; min-height:3.5rem; border:none; border-radius:var(--r-pill);
  background:linear-gradient(135deg, var(--blue), var(--blue-deep)); color:#04101F;
  font-size:var(--fs-md); font-weight:700; cursor:pointer; }
.primary-btn:disabled { opacity:.5; cursor:not-allowed; }
.ghost-btn { min-height:3.5rem; padding:0 var(--s4); border-radius:var(--r-pill); border:1px solid var(--hair);
  background:var(--glass); color:var(--text-2); font-size:var(--fs-sm); cursor:pointer; }

.result { margin-top:var(--s5); border:1px solid var(--hair); border-radius:var(--r-lg); overflow:hidden; background:var(--glass); }
.result .rhead { display:flex; justify-content:space-between; align-items:baseline; padding:var(--s3); border-bottom:1px solid var(--hair); }
.result .rhead b { font-size:var(--fs-sm); }
.result .rhead span { font-size:var(--fs-xs); color:var(--text-3); }
.result .rbody { padding:var(--s4); font-size:var(--fs-sm); white-space:pre-wrap; max-height:40vh; overflow-y:auto; line-height:1.7; }
.result .rfoot { display:flex; gap:var(--s2); padding:var(--s3); border-top:1px solid var(--hair); }
.result .rfoot button { flex:1; min-height:2.75rem; border-radius:var(--r-pill); border:1px solid rgba(90,166,255,.4);
  background:rgba(90,166,255,.12); color:var(--blue); font-size:var(--fs-sm); font-weight:600; cursor:pointer; }
.result .rfoot .gold { border-color:rgba(240,192,112,.45); background:rgba(240,192,112,.12); color:var(--gold); }

/* ------------------------------------------------------------ 形象库 */
.current { margin:0 var(--s4) var(--s2); display:flex; align-items:center; gap:var(--s4); padding:var(--s4);
  border-radius:var(--r-lg); border:1px solid rgba(90,166,255,.3);
  background:linear-gradient(135deg, rgba(90,166,255,.14), rgba(69,214,194,.06)); }
.current .thumb { width:4.5rem; height:4.5rem; border-radius:50%; flex:none; overflow:hidden;
  background:radial-gradient(circle at 40% 35%, #2C6AD1, #0B1222); display:flex; align-items:center; justify-content:center;
  border:1px solid var(--hair-2); font-size:1.75rem; }
.current .thumb img { width:100%; height:100%; object-fit:cover; }
.current .info { flex:1; min-width:0; }
.current .info .n { font-size:var(--fs-lg); font-weight:700; }
.current .info .d { font-size:var(--fs-sm); color:var(--text-2); }
.pill { font-size:var(--fs-xs); font-weight:700; color:var(--teal); border:1px solid rgba(69,214,194,.4);
  border-radius:var(--r-pill); padding:2px var(--s2); }
.pill.gold { color:var(--gold); border-color:rgba(240,192,112,.45); }
.grp-head { display:flex; align-items:baseline; justify-content:space-between; padding:var(--s4) var(--s4) var(--s2); }
.grp-head h2 { font-size:var(--fs-md); font-weight:700; }
.grp-head span { font-size:var(--fs-xs); color:var(--text-3); }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); padding:0 var(--s4); }
.tile { border:1px solid var(--hair); background:var(--glass); border-radius:var(--r-lg); padding:var(--s3);
  cursor:pointer; text-align:left; color:var(--text); position:relative; overflow:hidden; min-height:9rem;
  display:flex; flex-direction:column; justify-content:space-between; }
.tile.on { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue) inset; }
.tile .art { height:4.25rem; border-radius:var(--r-md); display:flex; align-items:center; justify-content:center;
  margin-bottom:var(--s2); border:1px solid var(--hair); font-size:1.75rem; overflow:hidden; background:var(--bg-2,#0B1222); }
.tile .art img { width:100%; height:100%; object-fit:cover; }
.tile .n { font-size:var(--fs-sm); font-weight:700; display:block; }
.tile .d { font-size:var(--fs-xs); color:var(--text-3); margin-top:2px; display:block; }
.tile.up { border-style:dashed; align-items:center; justify-content:center; }
.tile.up .plus { font-size:1.75rem; color:var(--blue); }
.tile .tile-edit { position:absolute; top:var(--s2); right:var(--s2); z-index:2; min-height:2rem;
  padding:2px var(--s2); border-radius:var(--r-pill); border:1px solid var(--hair-2);
  background:rgba(6,14,26,.85); color:var(--text-2); font-size:var(--fs-xs); cursor:pointer; }
.tile .tile-edit:active { background:var(--glass-2); }

/* ------------------------------------------------------------ 形象工坊浮层 */
.workshop { position:absolute; inset:0; z-index:30; background:var(--bg); display:flex; flex-direction:column;
  animation:ws-in .3s var(--ease); }
.workshop[hidden] { display:none; }
@keyframes ws-in { from { transform:translateY(28px); opacity:0 } to { transform:none; opacity:1 } }
.ws-head { display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  padding:var(--s3) var(--s4); border-bottom:1px solid var(--hair); flex:none; }
.ws-head h1 { font-size:var(--fs-md); font-weight:700; }
.primary-btn.ws-save { flex:none; min-height:2.5rem; padding:0 var(--s5); font-size:var(--fs-sm); }
.ws-body { flex:1; overflow-y:auto; padding:var(--s4); min-height:0; }
.ws-stage { border-radius:var(--r-lg); border:1px solid var(--hair);
  background:linear-gradient(180deg, rgba(90,166,255,.07), transparent 70%); padding:var(--s5) var(--s4) var(--s4); }
.ws-stage .stage-area { padding:0; min-height:14rem; }
.ws-stage-foot { display:flex; align-items:center; justify-content:space-between; gap:var(--s3); margin-top:var(--s3); }
.ws-hint { font-size:var(--fs-xs); color:var(--text-3); }
.ws-ctrl { margin-top:var(--s5); display:flex; flex-direction:column; gap:var(--s4); }
.ws-row { display:flex; align-items:center; gap:var(--s3); }
.ws-row > label { width:5.5rem; flex:none; font-size:var(--fs-sm); color:var(--text-2); }
.ws-row input[type="range"] { flex:1; accent-color:var(--blue); }
.ws-row .val { width:2.5rem; flex:none; text-align:right; font-size:var(--fs-sm); color:var(--teal); }
.ws-row .text-field { flex:1; }
.ws-btns { display:flex; align-items:center; gap:var(--s3); margin-top:var(--s2); }
.ws-btns .ghost-btn { flex:1; }
.ws-btns .danger-link { flex:1; margin-top:0; text-align:center; }

/* ------------------------------------------------------------ 声音面板 */
.vs-title { font-size:var(--fs-sm); color:var(--text-2); margin:var(--s5) 0 var(--s2); font-weight:700; }
.vs-title .vs-sub { color:var(--teal); font-weight:600; }
.voice-cur { padding:var(--s3) var(--s4); border-radius:var(--r-md); border:1px solid rgba(90,166,255,.3);
  background:linear-gradient(135deg, rgba(90,166,255,.12), rgba(69,214,194,.05)); font-size:var(--fs-sm); }
.voice-row { display:flex; align-items:center; gap:var(--s3); padding:var(--s3); border:1px solid var(--hair);
  border-radius:var(--r-md); margin-bottom:var(--s2); background:var(--glass); }
.voice-row.on { border-color:var(--blue); background:rgba(90,166,255,.10); }
/* 服务端探测判定「这个账号没开通」的音色：灰显 + 禁用，别让用户点了才吃报错 */
.voice-row.dim { opacity:.45; }
.voice-row.dim .vn .t { color:var(--text-3); }
.voice-row.dim .mini-btn[disabled] { opacity:.6; cursor:not-allowed; }
.voice-row .vn { flex:1; min-width:0; }
.voice-row .vn .t { font-size:var(--fs-sm); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.voice-row .vn .d { font-size:var(--fs-xs); color:var(--text-3); }
.voice-row .mini-btn { flex:none; min-height:2.25rem; padding:0 var(--s3); border-radius:var(--r-pill);
  border:1px solid rgba(90,166,255,.4); background:rgba(90,166,255,.10); color:var(--blue);
  font-size:var(--fs-xs); font-weight:600; cursor:pointer; }
.voice-row .mini-btn.ghost { border-color:var(--hair); background:transparent; color:var(--text-3); }
.rate-range { width:100%; accent-color:var(--blue); }
.vs-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--s2) var(--s4); }
.vs-cell { min-width:0; }
.vs-cell .vs-title { margin-top:var(--s4); }
.vs-cell input[type="range"] { width:100%; accent-color:var(--blue); }
.vs-sub .lock { font-size:.9em; }
.lock { color:var(--gold); }
.voice-group-head { display:flex; align-items:baseline; gap:var(--s2); margin:var(--s3) 0 var(--s1); }
.voice-group-head .g { font-size:var(--fs-xs); color:var(--text-3); font-weight:700; }
.voice-group-head .line { flex:1; height:1px; background:var(--hair); }
.seg { display:flex; gap:var(--s2); }
.seg-btn { flex:1; min-height:2.75rem; border-radius:var(--r-pill); border:1px solid var(--hair);
  background:var(--glass); color:var(--text-2); font-size:var(--fs-sm); font-weight:600; cursor:pointer; }
.seg-btn.on { border-color:var(--blue); background:rgba(90,166,255,.14); color:var(--blue); }
.cloud-tag { display:inline-block; font-size:var(--fs-xs); font-weight:700; color:var(--gold);
  border:1px solid rgba(240,192,112,.4); border-radius:var(--r-pill); padding:1px var(--s2); margin-left:var(--s2); }
.empty-note { font-size:var(--fs-sm); color:var(--text-3); padding:var(--s3); border:1px dashed var(--hair);
  border-radius:var(--r-md); text-align:center; }

/* ------------------------------------------------------------ 录音面板 */
.rec-sample { border:1px solid var(--hair); border-radius:var(--r-md); background:var(--glass);
  padding:var(--s4); margin-bottom:var(--s3); }
.rec-sample.done { border-color:rgba(69,214,194,.4); }
.rec-sample.recording { border-color:var(--danger); }
.rec-sample .rs-top { display:flex; align-items:center; justify-content:space-between; gap:var(--s2); }
.rec-sample .rs-idx { font-size:var(--fs-xs); color:var(--text-3); }
.rec-sample .rs-text { font-size:var(--fs-md); line-height:1.8; margin:var(--s2) 0; }
.rec-sample .rs-foot { display:flex; align-items:center; gap:var(--s3); }
.rec-sample .rs-timer { font-size:var(--fs-sm); color:var(--danger); font-variant-numeric:tabular-nums; }
.rec-sample .rs-ok { font-size:var(--fs-sm); color:var(--teal); }
.rec-btns { display:flex; gap:var(--s2); margin-top:var(--s4); }
.rec-btns .primary-btn { flex:1; }
.rec-dots { display:flex; gap:var(--s2); justify-content:center; margin:var(--s3) 0; }
.rec-dots i { width:.5rem; height:.5rem; border-radius:50%; background:var(--hair-2); }
.rec-dots i.on { background:var(--teal); }

/* ------------------------------------------------------------ 能做啥 */
.cap { display:block; width:calc(100% - 2rem); text-align:left; background:var(--glass); border:1px solid var(--hair);
  border-radius:var(--r-lg); padding:var(--s4); cursor:pointer; color:var(--text); margin:0 var(--s4) var(--s3); }
.cap .cap-top { display:flex; align-items:center; gap:var(--s3); }
.cap .glyph { width:2.75rem; height:2.75rem; border-radius:var(--r-md); display:flex; align-items:center;
  justify-content:center; font-size:1.25rem; flex:none; background:var(--glass-2); border:1px solid var(--hair); }
.cap h2 { font-size:var(--fs-md); font-weight:700; }
.cap .cap-sub { font-size:var(--fs-sm); color:var(--text-2); }
.cap ul { margin:var(--s3) 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:2px; }
.cap li { font-size:var(--fs-sm); color:var(--text-2); display:flex; gap:var(--s2); align-items:baseline; }
.cap li::before { content:"·"; color:var(--blue); font-weight:700; }
.cap .try { margin-top:var(--s3); display:block; font-size:var(--fs-sm); color:var(--blue); font-weight:600; }
.cap.hero { border-color:rgba(90,166,255,.35); background:linear-gradient(135deg, rgba(90,166,255,.14), rgba(69,214,194,.05)); }
.cap.well { border-color:rgba(69,214,194,.32); background:linear-gradient(135deg, rgba(69,214,194,.12), rgba(90,166,255,.04)); }

/* ------------------------------------------------------------ 我的 */
.prof { display:flex; align-items:center; gap:var(--s4); padding:var(--s2) 0 var(--s5); }
.prof .ava { width:4rem; height:4rem; border-radius:50%; background:var(--glass-2); border:1px solid var(--hair-2);
  display:flex; align-items:center; justify-content:center; font-size:1.5rem; }
.prof .name { font-size:var(--fs-lg); font-weight:700; }
.prof .sub { font-size:var(--fs-sm); color:var(--text-2); }
.row { display:flex; align-items:center; gap:var(--s3); width:100%; background:var(--glass); border:1px solid var(--hair);
  border-radius:var(--r-md); padding:var(--s3) var(--s4); margin-bottom:var(--s2); min-height:3.5rem; text-align:left; color:var(--text); }
button.row { cursor:pointer; }
button.row:active { background:var(--glass-2); }
.row .lab { flex:1; }
.row .lab .t { font-size:var(--fs-md); font-weight:600; }
.row .lab .d { font-size:var(--fs-sm); color:var(--text-2); }
.row .val { font-size:var(--fs-sm); color:var(--text-2); }
.switch { position:relative; width:3.25rem; height:1.875rem; border-radius:var(--r-pill); border:1px solid var(--hair-2);
  background:rgba(255,255,255,.06); cursor:pointer; flex:none; }
.switch::after { content:""; position:absolute; top:3px; left:3px; width:1.375rem; height:1.375rem; border-radius:50%;
  background:var(--text-2); transition:all .2s var(--ease); }
.switch[aria-checked="true"] { background:linear-gradient(135deg, var(--blue), var(--blue-deep)); border-color:var(--blue); }
.switch[aria-checked="true"]::after { left:calc(100% - 1.375rem - 3px); background:#fff; }
.danger-link { display:block; width:100%; min-height:3rem; border:none; background:transparent;
  color:var(--danger); font-size:var(--fs-sm); cursor:pointer; margin-top:var(--s2); }

/* ------------------------------------------------------------ 浮层 */
.mask { position:absolute; inset:0; background:rgba(3,6,12,.66); z-index:20; animation:fade .25s; }
@keyframes fade { from { opacity:0 } to { opacity:1 } }
.sheet { position:absolute; left:0; right:0; bottom:0; max-height:88%; background:linear-gradient(to bottom,#0C1526,#080D1A);
  border-top:1px solid var(--hair-2); border-radius:var(--r-lg) var(--r-lg) 0 0; z-index:21;
  display:flex; flex-direction:column; box-shadow:0 -20px 60px rgba(0,0,0,.5); animation:rise .32s var(--ease); }
/* hidden 必须真的隐藏：否则 display:flex 会盖住整屏、吞掉所有点击 */
.sheet[hidden], .mask[hidden] { display:none; }
@keyframes rise { from { transform:translateY(100%) } to { transform:translateY(0) } }
.sheet-head { display:flex; align-items:center; justify-content:space-between; padding:var(--s3) var(--s4);
  border-bottom:1px solid var(--hair); flex:none; }
.sheet-head h2 { font-size:var(--fs-md); font-weight:700; }
.sheet-close { border:none; background:transparent; color:var(--text-2); font-size:var(--fs-lg); cursor:pointer;
  padding:var(--s1) var(--s2); border-radius:var(--r-sm); }
.sheet-body { flex:1; overflow-y:auto; padding:var(--s4); min-height:0; }
.msg { max-width:88%; display:flex; flex-direction:column; gap:var(--s1); margin-bottom:var(--s3); }
.msg.user { align-self:flex-end; align-items:flex-end; }
.msg .body { padding:var(--s3) var(--s4); border-radius:var(--r-lg); font-size:var(--fs-md); white-space:pre-wrap; word-break:break-word; }
.msg.dazhi .body { background:var(--glass); border:1px solid var(--hair); border-bottom-left-radius:6px; }
.msg.user .body { background:linear-gradient(135deg, var(--blue), var(--blue-deep)); color:#04101F;
  border-bottom-right-radius:6px; font-weight:500; }
.msg .time { font-size:var(--fs-xs); color:var(--text-3); padding:0 var(--s1); }

.form-row { margin-bottom:var(--s4); }
.form-row label { display:block; font-size:var(--fs-sm); color:var(--text-2); margin-bottom:var(--s2); }
.form-row input, .form-row textarea, .form-row select {
  width:100%; border-radius:var(--r-md); border:1px solid var(--hair-2); background:rgba(255,255,255,.04);
  padding:var(--s3); font-size:var(--fs-md); }
.form-row input:focus, .form-row textarea:focus { outline:none; border-color:var(--blue); }
.form-hint { font-size:var(--fs-xs); color:var(--text-3); margin-top:var(--s2); }
.form-msg { font-size:var(--fs-sm); margin-bottom:var(--s3); }
.form-msg.err { color:var(--danger); }
.form-msg.ok { color:var(--teal); }

.toast { position:absolute; left:50%; bottom:7rem; transform:translateX(-50%); background:rgba(16,26,45,.96);
  border:1px solid var(--hair-2); border-radius:var(--r-pill); padding:var(--s2) var(--s4); font-size:var(--fs-sm);
  opacity:0; pointer-events:none; transition:opacity .25s; z-index:40; white-space:nowrap; max-width:90vw;
  overflow:hidden; text-overflow:ellipsis; }
.toast.show { opacity:1; }

/* ------------------------------------------------------------ 底部导航 */
.tabbar { flex:none; display:flex; border-top:1px solid var(--hair); background:rgba(11,18,34,.97);
  padding-bottom:env(safe-area-inset-bottom); }
.tab { flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:var(--s2) 0 calc(var(--s2) + 4px);
  border:none; background:transparent; color:var(--text-3); font-size:.6875rem; cursor:pointer; min-height:3.25rem; }
.tab svg { width:1.375rem; height:1.375rem; }
.tab[aria-current="true"] { color:var(--blue); }
.tab .ind { width:1rem; height:3px; border-radius:2px; margin-top:2px; }
.tab[aria-current="true"] .ind { background:var(--blue); }

/* ------------------------------------------------------------ 长辈模式 */
html[data-elder="on"] .chips { display:none; }
html[data-elder="on"] .mic { min-height:5rem; }
html[data-elder="on"] .subtitle { font-size:var(--fs-lg); }
html[data-elder="on"] .msg .body { font-size:var(--fs-lg); }
html[data-elder="on"] .cap li { display:none; }
html[data-elder="on"] .act-grid { grid-template-columns:1fr; }

@media (prefers-reduced-motion: reduce) {
  * { animation:none !important; transition:none !important; }
}
/* ==========================================================================
   v2 情感陪伴版：我们的（关系页）+ 第一次见面
   ========================================================================== */

/* ------------------------------------------------------------ 关系概览卡 */
.us-card {
  margin: var(--s2) 0 var(--s5);
  padding: var(--s5) var(--s4);
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, rgba(90,166,255,.14), rgba(69,214,194,.06) 60%, var(--glass));
  border: 1px solid var(--hair);
  text-align: center;
}
.us-big { font-size: var(--fs-xl); font-weight: 700; letter-spacing: .01em; }
.us-meta { margin-top: var(--s2); font-size: var(--fs-sm); color: var(--text-2); }

/* ------------------------------------------------------------ 未闭环的事 */
.us-item {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4);
  margin-bottom: var(--s2);
  border-radius: var(--r-md);
  background: rgba(240,192,112,.07);
  border: 1px solid rgba(240,192,112,.22);
}
.us-item .txt { flex: 1; min-width: 0; }
.us-item .t { font-size: var(--fs-md); font-weight: 600; }
.us-item .d { font-size: var(--fs-xs); color: var(--text-2); margin-top: 2px; }
.us-item .when { flex: none; font-size: var(--fs-xs); color: var(--gold); }
.us-item .mini {
  flex: none; border: 1px solid var(--hair-2); background: transparent;
  border-radius: var(--r-pill); padding: 4px 10px; font-size: var(--fs-xs); color: var(--text-2);
}
.us-item .mini:active { background: var(--glass-2); }
.us-item.done { opacity: .45; }

/* ------------------------------------------------------------ 时间线 */
.us-line {
  position: relative;
  padding: 0 0 var(--s4) var(--s5);
  border-left: 1px solid var(--hair-2);
  margin-left: 6px;
}
.us-line:last-child { border-left-color: transparent; padding-bottom: 0; }
.us-line::before {
  content: ""; position: absolute; left: -4.5px; top: 6px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--blue); box-shadow: 0 0 0 3px rgba(90,166,255,.15);
}
.us-line .date { font-size: var(--fs-xs); color: var(--text-3); letter-spacing: .04em; }
.us-line .what { font-size: var(--fs-sm); color: var(--text); margin-top: 2px; }
.us-line .emo { color: var(--gold); }
.us-empty { font-size: var(--fs-sm); color: var(--text-3); padding: var(--s4) 0; line-height: 1.8; }

/* ------------------------------------------------------------ 第一次见面 */
.meet { padding: var(--s6) var(--s5) var(--s5); min-height: 60vh; display: flex; flex-direction: column; }
.meet-step { display: none; flex: 1; flex-direction: column; }
.meet-step.on { display: flex; }
.meet-emoji { font-size: 2.25rem; margin-bottom: var(--s4); }
.meet-q { font-size: var(--fs-lg); font-weight: 700; line-height: 1.45; }
.meet-hint { margin-top: var(--s3); font-size: var(--fs-sm); color: var(--text-2); line-height: 1.7; }
.meet-input {
  margin-top: var(--s5); width: 100%; padding: var(--s4);
  border-radius: var(--r-md); border: 1px solid var(--hair-2);
  background: var(--glass); color: var(--text); font-size: var(--fs-md);
}
.meet-input::placeholder { color: var(--text-3); }
.meet-area {
  margin-top: var(--s5); width: 100%; min-height: 5.5rem; padding: var(--s4);
  border-radius: var(--r-md); border: 1px solid var(--hair-2);
  background: var(--glass); color: var(--text); font-size: var(--fs-md); resize: none; line-height: 1.6;
}
.meet-foot { margin-top: auto; padding-top: var(--s5); display: flex; flex-direction: column; gap: var(--s3); }
.meet-foot .primary-btn { width: 100%; }
.meet-skip {
  background: none; border: none; color: var(--text-3); font-size: var(--fs-sm);
  padding: var(--s2); cursor: pointer;
}
.meet-dots { display: flex; gap: 6px; justify-content: center; margin-bottom: var(--s5); }
.meet-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--hair-2); }
.meet-dots i.on { background: var(--blue); }

/* 开发者选项块 */
#dev-block { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px dashed var(--hair); }

/* ==========================================================================
   v2.1 第一次见面 · 语音对话版
   —— 选声音 → 大智先开口 → 三步问答
   ========================================================================== */

.meet-vstep { display: none; flex: 1; flex-direction: column; }
.meet-vstep.on { display: flex; }

/* ------------------------------------------------------------ 选声音 */
.voice-pick { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); margin-top: var(--s5); }
.voice-card {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: var(--s5) var(--s3);
  border-radius: var(--r-lg);
  border: 1px solid var(--hair-2);
  background: var(--glass);
  color: var(--text);
  cursor: pointer;
  transition: transform .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}
.voice-card:active { transform: scale(.97); }
.voice-card .ico { font-size: 1.6rem; line-height: 1.2; }
.voice-card .t { font-size: var(--fs-lg); font-weight: 700; }
.voice-card .d { font-size: var(--fs-xs); color: var(--text-3); }
.voice-card.on {
  border-color: var(--blue);
  background: linear-gradient(160deg, rgba(90,166,255,.20), rgba(90,166,255,.05));
  box-shadow: 0 0 0 1px rgba(90,166,255,.35) inset, 0 8px 24px rgba(44,106,209,.18);
}
.voice-card.on .d { color: var(--blue); }

/* ------------------------------------------------------------ 对话气泡 */
.meet-bubble {
  margin: var(--s4) 0 0;
  padding: var(--s4) var(--s4);
  border-radius: var(--r-lg);
  border-bottom-left-radius: 6px;
  background: var(--glass-2);
  border: 1px solid var(--hair);
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: 1.5;
  min-height: 3.4rem;
}
.meet-caption {
  margin-top: var(--s3);
  min-height: 1.5rem;
  font-size: var(--fs-sm);
  color: var(--gold);
  line-height: 1.6;
}

/* ------------------------------------------------------------ 醒来屏（v3）
 * 屏暗下去 1.2 秒，只剩一个缓慢呼吸的光点。
 * dark 状态只在醒来瞬间加：整屏压暗、文字退场；呼吸节奏刻意放慢（2.4s），
 * 不跟说话节奏同步——节奏永远一样会暴露成"假呼吸"。 */
.meet-dot {
  width: 14px; height: 14px;
  margin: var(--s5) auto 0;
  border-radius: 50%;
  background: var(--blue, #5aa6ff);
  box-shadow: 0 0 18px 4px rgba(90,166,255,.5);
  animation: meet-breathe 2.4s ease-in-out infinite;
}
@keyframes meet-breathe {
  0%, 100% { transform: scale(.72); opacity: .45; box-shadow: 0 0 10px 2px rgba(90,166,255,.3); }
  50%      { transform: scale(1.15); opacity: 1;  box-shadow: 0 0 26px 8px rgba(90,166,255,.65); }
}
.meet-wake.dark .meet-bubble,
.meet-wake.dark .meet-caption,
.meet-wake.dark .meet-mic-hint,
.meet-wake.dark .meet-type-box,
.meet-wake.dark .meet-foot { opacity: 0; }
.meet-wake .meet-bubble,
.meet-wake .meet-caption,
.meet-wake .meet-mic-hint,
.meet-wake .meet-foot { transition: opacity .5s ease; }
.meet-wake { position: relative; }
.meet-wake.dark { background: rgba(0,0,0,.35); border-radius: var(--r-lg, 14px); }

/* ------------------------------------------------------------ 大麦克风 */
.meet-mic {
  margin: var(--s5) auto 0;
  width: 5.5rem; height: 5.5rem;
  border-radius: 50%;
  border: 1px solid rgba(90,166,255,.45);
  background: radial-gradient(circle at 50% 35%, rgba(90,166,255,.35), rgba(44,106,209,.18));
  color: var(--text);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .25s var(--ease);
}
.meet-mic svg { width: 2.2rem; height: 2.2rem; }
.meet-mic:active { transform: scale(.94); }
.meet-mic.listening {
  border-color: var(--danger);
  background: radial-gradient(circle at 50% 35%, rgba(255,122,122,.35), rgba(255,122,122,.10));
  animation: micPulse 1.35s ease-out infinite;
}
@keyframes micPulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,122,122,.42); }
  70%  { box-shadow: 0 0 0 1.4rem rgba(255,122,122,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,122,122,0); }
}
.meet-mic-hint {
  margin-top: var(--s3);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-3);
}

/* ------------------------------------------------------------ 打字兜底 */
.meet-type-box { margin-top: var(--s4); display: flex; flex-direction: column; gap: var(--s3); }
.meet-type-box .meet-input { margin-top: 0; }
.meet-foot-row { flex-direction: row; gap: var(--s4); align-items: center; justify-content: center; }