:root{
  --brand:#FF8A00;
  --brand-d:#EE7200;
  --brand-l:#FFB14D;
  --coral:#FF7043;
  --yellow:#FFC93C;
  --mint:#3FBF7F;
  --ink:#4A3423;
  --ink2:#8A7260;
  --ink3:#B4A292;
  --card:#FFFFFF;
  --line:#F2E4D4;
  --nav-h:64px;
  --r:22px;
  --sh-s:0 2px 8px rgba(150,95,40,.08);
  --sh-m:0 6px 18px rgba(150,95,40,.11);
  --sh-l:0 14px 34px rgba(150,95,40,.16);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0;
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:16px;
  line-height:1.6;
  overscroll-behavior-y:none;
  background:#FFF3E6;
}

/* ---------- 动态背景：几团柔光慢慢飘 ---------- */
.bg{
  position:fixed;inset:0;z-index:0;overflow:hidden;
  background:linear-gradient(170deg,#FFF6EA 0%,#FFEAD8 45%,#FFE3CE 100%);
}
.bg i{
  position:absolute;display:block;border-radius:50%;
  filter:blur(48px);opacity:.5;
  will-change:transform;
}
.bg i:nth-child(1){width:280px;height:280px;background:#FFC078;top:-70px;left:-70px;animation:float1 19s ease-in-out infinite}
.bg i:nth-child(2){width:230px;height:230px;background:#FFA8A8;top:38%;right:-80px;animation:float2 23s ease-in-out infinite}
.bg i:nth-child(3){width:320px;height:320px;background:#FFD98A;bottom:-110px;left:12%;animation:float3 27s ease-in-out infinite}
.bg i:nth-child(4){width:190px;height:190px;background:#A8E0C4;bottom:16%;right:6%;animation:float1 21s ease-in-out infinite reverse}
@keyframes float1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(28px,34px) scale(1.1)}}
@keyframes float2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-34px,26px) scale(1.13)}}
@keyframes float3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(24px,-28px) scale(1.08)}}

/* ---------- 顶部 ---------- */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:60;
  height:calc(54px + env(safe-area-inset-top));
  padding:env(safe-area-inset-top) 16px 0;
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(255,246,234,.72);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,.6);
}
.brand{display:flex;align-items:center;gap:9px}
.logo{
  width:28px;height:28px;border-radius:10px;
  background:linear-gradient(145deg,#FFB14D,#FF8A00);
  color:#fff;font-size:15px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 8px rgba(255,138,0,.38), inset 0 1px 0 rgba(255,255,255,.5);
}
.title{font-size:17px;font-weight:800;letter-spacing:.6px}
.linkbtn{
  border:0;background:transparent;color:var(--brand);
  font-size:15px;font-weight:700;padding:7px 5px;cursor:pointer;font-family:inherit;
}
.linkbtn.sm{
  font-size:13px;font-weight:600;color:var(--ink3);
  padding:8px 0 4px;text-align:left;
}

/* ---------- 舞台 ---------- */
.stage{
  position:fixed;top:0;left:0;right:0;bottom:0;z-index:10;
  padding-top:calc(54px + env(safe-area-inset-top));
  padding-bottom:calc(var(--nav-h) + 26px + env(safe-area-inset-bottom));
}
.view{display:none;height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:14px 14px 8px}
.view.on{display:block}
.view.on>*{animation:rise .34s cubic-bezier(.22,.9,.3,1) both}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---------- 卡片 ---------- */
.card{
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.9);
  border-radius:var(--r);
  padding:15px;
  margin-bottom:12px;
  box-shadow:var(--sh-m);
}
.card-title{font-size:15px;font-weight:800;margin-bottom:11px;letter-spacing:.3px}
.sub{font-size:13px;color:var(--ink2);margin-bottom:9px}
.tip{font-size:12.5px;color:var(--ink3);line-height:1.7;margin-top:9px}
.hidden{display:none!important}
.two-col{display:flex;gap:10px}
.two-col>div{flex:1;min-width:0}

/* ---------- 输入 ---------- */
.tinput{
  border:1.5px solid var(--line);
  background:#fff;
  border-radius:15px;
  padding:11px 14px;
  font-size:16px;
  color:var(--ink);
  outline:none;
  width:100%;
  font-family:inherit;
  box-shadow:inset 0 1px 3px rgba(150,95,40,.05);
  transition:border-color .18s, box-shadow .18s;
}
.tinput:focus{border-color:var(--brand);box-shadow:inset 0 1px 3px rgba(255,138,0,.08), 0 0 0 3px rgba(255,138,0,.1)}
.tinput.wide{width:100%;display:block;margin-bottom:11px}
.sel{
  width:100%;
  border:1.5px solid var(--line);
  background:#fff;
  border-radius:15px;
  padding:11px 14px;
  font-size:15px;color:var(--ink);
  outline:none;font-family:inherit;
  margin-bottom:11px;
  appearance:none;-webkit-appearance:none;
  box-shadow:inset 0 1px 3px rgba(150,95,40,.05);
}
.range{flex:1;accent-color:var(--brand)}
.hint{font-size:13px;color:var(--ink3);width:46px;text-align:right}

/* ---------- 3D 按钮 ---------- */
.bigbtn{
  display:block;width:100%;
  border:0;border-radius:17px;
  background:linear-gradient(180deg,var(--brand-l),var(--brand));
  color:#fff;
  font-size:16px;font-weight:800;
  padding:14px;cursor:pointer;
  font-family:inherit;
  box-shadow:0 5px 0 var(--brand-d), 0 10px 20px rgba(255,138,0,.3), inset 0 1px 0 rgba(255,255,255,.45);
  transition:transform .09s, box-shadow .09s;
}
.bigbtn:active{
  transform:translateY(4px);
  box-shadow:0 1px 0 var(--brand-d), 0 4px 10px rgba(255,138,0,.26), inset 0 1px 0 rgba(255,255,255,.35);
}
.bigbtn.ghost{
  background:#fff;color:var(--brand);
  border:1.5px solid var(--brand);
  box-shadow:var(--sh-s);
}
.bigbtn.ghost:active{transform:translateY(2px);background:#FFF6EC}
.bigbtn:disabled{opacity:.5}

/* ---------- 角色选择 ---------- */
.picker{
  display:flex;gap:9px;
  overflow-x:auto;
  padding:3px 0 13px;
  scrollbar-width:none;
}
.picker::-webkit-scrollbar{display:none}
.rchip{
  flex:0 0 auto;
  border:0;
  border-radius:18px;
  padding:7px 15px 7px 7px;
  font-size:14px;font-weight:700;
  color:var(--ink2);
  cursor:pointer;
  display:flex;align-items:center;gap:8px;
  background:#fff;
  box-shadow:var(--sh-s);
  font-family:inherit;
  transition:transform .16s, box-shadow .16s;
}
.rchip:active{transform:scale(.96)}
.rchip .av{
  width:28px;height:28px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:13px;font-weight:800;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45);
}
.rchip.on{
  color:#fff;
  box-shadow:0 6px 16px rgba(150,95,40,.24);
}
.rchip.on .av{background:rgba(255,255,255,.26)!important}

/* ---------- 大形象 ---------- */
.hero{
  display:flex;flex-direction:column;align-items:center;
  padding:6px 0 14px;
}
.hero .pet{
  width:132px;height:132px;
  filter:drop-shadow(0 12px 20px rgba(150,95,40,.24));
  animation:breathe 3.4s ease-in-out infinite;
  will-change:transform;
}
@keyframes breathe{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-6px) scale(1.035)}
}
.hero .pet .eyes{animation:blink 5.2s infinite;transform-origin:60px 66px}
@keyframes blink{0%,94%,100%{transform:scaleY(1)}96%,98%{transform:scaleY(.1)}}
.hero .pet.talking .mouth{animation:talk .34s ease-in-out infinite}
@keyframes talk{0%,100%{transform:scaleY(1)}50%{transform:scaleY(2.1)}}
.hero .pet .mouth{transform-origin:60px 81px}
.hero .nm{font-size:19px;font-weight:800;margin-top:2px;letter-spacing:.5px}
.hero .kd{font-size:12.5px;color:var(--ink3);margin-top:3px}
.hero .say{
  margin-top:12px;max-width:100%;
  background:#fff;border-radius:18px;
  padding:12px 15px;font-size:15.5px;line-height:1.75;
  box-shadow:var(--sh-m);
  border-bottom-left-radius:6px;
  white-space:pre-wrap;
}

/* ---------- 消息 ---------- */
.msgs{padding-bottom:6px}
.msg{margin-bottom:14px;display:flex;flex-direction:column;animation:pop .3s cubic-bezier(.22,.9,.3,1) both}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.msg.me{align-items:flex-end}
.msg .who{font-size:12px;color:var(--ink3);margin-bottom:6px;padding:0 5px;font-weight:700}
.bubble{
  max-width:82%;
  padding:12px 16px;
  border-radius:19px;
  font-size:16px;
  line-height:1.78;
  white-space:pre-wrap;
  word-break:break-word;
}
.msg.you .bubble{
  background:#fff;
  border-top-left-radius:6px;
  box-shadow:var(--sh-m);
}
.msg.me .bubble{
  background:linear-gradient(180deg,var(--brand-l),var(--brand));
  color:#fff;
  border-top-right-radius:6px;
  box-shadow:0 6px 16px rgba(255,138,0,.28);
}

.typing{display:flex;gap:5px;padding:15px 17px}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--ink3);animation:tp 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}
.typing i:nth-child(3){animation-delay:.4s}
@keyframes tp{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-5px)}}

.empty{
  text-align:center;color:var(--ink3);
  font-size:14px;padding:40px 20px;line-height:2;
}

/* ---------- 输入条 ---------- */
.composer{
  position:sticky;bottom:0;
  display:flex;flex-direction:column;gap:8px;
  padding:11px 0 4px;
  background:linear-gradient(180deg,rgba(255,243,230,0),#FFF3E6 42%);
}
.composer.inline{position:static;background:none;padding:0;margin-top:11px;flex-direction:row;align-items:center}
.composer.inline .tinput{flex:1;min-width:0}
.inputrow{display:flex;gap:8px;align-items:center}
.inputrow .tinput{flex:1;min-width:0}
.voicerow{display:flex;gap:8px}
.voicebtn{
  flex:1;
  border:1.5px solid var(--brand);
  background:#fff;color:var(--brand);
  border-radius:14px;
  height:44px;
  font-size:14.5px;font-weight:800;
  cursor:pointer;font-family:inherit;
  user-select:none;
  transition:transform .12s, background .16s, color .16s;
}
.voicebtn:active{transform:scale(.97)}
.voicebtn.on{
  background:linear-gradient(180deg,#FFB347,var(--brand));
  border-color:transparent;color:#fff;
}
.voicebtn.talk{
  background:linear-gradient(180deg,var(--brand-l),var(--brand));
  border-color:transparent;color:#fff;
  box-shadow:0 3px 0 var(--brand-d), 0 6px 12px rgba(255,138,0,.24);
}
.voicebtn.talk.on{
  background:linear-gradient(180deg,#FF7A6B,#F5503C);
  box-shadow:0 3px 0 #D8402F, 0 6px 12px rgba(245,80,60,.3);
}
.voicebtn.rec{
  background:linear-gradient(180deg,#FF7A6B,#F5503C);
  border-color:transparent;color:#fff;
  animation:mcp 1s ease-in-out infinite;
}
.sendbtn{
  flex:0 0 auto;
  border:0;border-radius:15px;
  background:linear-gradient(180deg,var(--brand-l),var(--brand));
  color:#fff;font-size:15px;font-weight:800;
  padding:12px 17px;cursor:pointer;font-family:inherit;
  box-shadow:0 4px 0 var(--brand-d), 0 7px 14px rgba(255,138,0,.26);
  transition:transform .09s, box-shadow .09s;
}
.sendbtn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--brand-d)}

/* 麦克风：一键说话，带一圈呼吸光 */
.micbtn{
  flex:0 0 auto;position:relative;
  width:52px;height:46px;
  border:1.5px solid var(--brand);
  background:#fff;color:var(--brand);
  border-radius:15px;font-size:13px;font-weight:800;
  cursor:pointer;font-family:inherit;
  user-select:none;
  transition:transform .12s;
}
.micbtn:active{transform:scale(.94)}
.micbtn.rec{
  background:linear-gradient(180deg,var(--brand-l),var(--brand));
  color:#fff;border-color:transparent;
  animation:recpulse 1.1s ease-in-out infinite;
}
@keyframes recpulse{
  0%,100%{box-shadow:0 0 0 0 rgba(255,138,0,.5)}
  70%{box-shadow:0 0 0 12px rgba(255,138,0,0)}
}

/* ---------- 标签 ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:11px}
.chip{
  border:0;
  background:rgba(255,255,255,.9);
  color:var(--ink2);
  border-radius:13px;padding:9px 13px;
  font-size:13.5px;font-weight:600;cursor:pointer;
  font-family:inherit;
  box-shadow:var(--sh-s);
  transition:transform .14s, background .18s, color .18s;
}
.chip:active{transform:scale(.95)}
.chip.on{
  background:linear-gradient(180deg,var(--brand-l),var(--brand));
  color:#fff;
  box-shadow:0 4px 10px rgba(255,138,0,.3);
}

/* 分组题库：一组一个小标题，比挤成一团好找 */
.chiplib{margin-bottom:4px}
.chipgroup{margin-bottom:12px}
.groupname{
  font-size:12px;font-weight:800;color:var(--ink3);
  letter-spacing:.4px;margin-bottom:7px;padding-left:2px;
}
.chipgroup .chips{margin-bottom:0}

/* 聊天空状态：给几个现成的问题，点一下就开始 */
.starter{padding:14px 4px 4px;text-align:center;animation:fadeUp .45s ease both}
.starter-hello{font-size:19px;font-weight:900;color:var(--ink);margin-bottom:6px}
.starter-desc{font-size:13.5px;color:var(--ink3);line-height:1.6;margin-bottom:18px}
.starter-label{
  font-size:12px;font-weight:800;color:var(--ink3);
  letter-spacing:.4px;margin-bottom:8px;text-align:left;padding-left:2px;
}
.starter-daily{
  background:linear-gradient(135deg,rgba(255,183,77,.16),rgba(255,138,0,.09));
  border:1px solid rgba(255,138,0,.2);
  border-radius:15px;padding:13px 15px;
  font-size:14px;font-weight:600;color:var(--ink2);
  line-height:1.6;text-align:left;margin-bottom:16px;
  box-shadow:var(--sh-s);
}
.starter .chips{justify-content:center;margin-bottom:6px}

/* 设置页底部的版本号，方便一眼看出装的是哪一版 */
.verline{
  text-align:center;font-size:11.5px;color:var(--ink3);
  opacity:.62;padding:6px 0 2px;letter-spacing:.3px;
}

/* 闯关选项：点一下就填进答案。
   做得紧凑一些 —— 选项是配角，题目才是主角，不能让它把题目挤没了。 */
.quizopts{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}
.optbtn{
  flex:1 1 calc(50% - 3px);
  min-width:0;
  border:0;
  background:rgba(255,255,255,.92);
  color:var(--ink2);
  border-radius:11px;
  padding:7px 9px;
  font-size:13px;font-weight:700;line-height:1.35;
  cursor:pointer;
  font-family:inherit;
  box-shadow:var(--sh-s);
  transition:transform .12s, background .16s, color .16s, box-shadow .16s;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.optbtn:active{transform:scale(.96)}
.optbtn.on{
  background:linear-gradient(180deg,var(--brand-l),var(--brand));
  color:#fff;
  box-shadow:0 4px 10px rgba(255,138,0,.3);
}

/* ---------- 辩论场 ---------- */
.arena{margin-bottom:12px}
.round{margin-bottom:16px}
.round-tag{
  font-size:12px;color:var(--ink3);font-weight:800;
  text-align:center;margin:15px 0 11px;
  position:relative;letter-spacing:1px;
}
.round-tag::before,.round-tag::after{
  content:"";position:absolute;top:50%;width:20%;height:1px;background:var(--line);
}
.round-tag::before{left:0}
.round-tag::after{right:0}

.side{margin-bottom:11px;display:flex;flex-direction:column;animation:pop .32s cubic-bezier(.22,.9,.3,1) both}
.side.left{align-items:flex-start}
.side.right{align-items:flex-end}
.side .who{font-size:12px;font-weight:800;margin-bottom:6px;padding:0 5px}
.side .bubble{max-width:88%;font-size:15.5px;border-radius:19px;padding:12px 16px;line-height:1.78;white-space:pre-wrap}
.side.left .bubble{background:#fff;border-top-left-radius:6px;box-shadow:var(--sh-m)}
.side.right .bubble{background:rgba(255,233,213,.95);border-top-right-radius:6px;box-shadow:var(--sh-s)}

.verdict{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  border-radius:var(--r);
  padding:15px;margin-top:10px;
  box-shadow:var(--sh-m);
  border-left:4px solid var(--yellow);
  animation:pop .4s cubic-bezier(.22,.9,.3,1) both;
}
.verdict .who{font-size:12px;color:var(--ink3);font-weight:800;margin-bottom:7px;letter-spacing:.5px}

/* ---------- 故事 ---------- */
.storybox{
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(10px);
  border-radius:var(--r);
  padding:17px;margin-bottom:12px;
  box-shadow:var(--sh-m);
  font-size:16.5px;line-height:2;
  white-space:pre-wrap;
}
.choices{display:flex;flex-direction:column;gap:10px}
.choice{
  border:1.5px solid var(--line);
  background:#fff;border-radius:17px;
  padding:14px 16px;font-size:15.5px;
  text-align:left;cursor:pointer;
  font-family:inherit;color:var(--ink);
  line-height:1.65;
  box-shadow:var(--sh-s);
  transition:transform .13s, border-color .18s, background .18s;
}
.choice:active{transform:scale(.98);border-color:var(--brand);background:#FFF6EC}
.choice.mine{border-style:dashed;color:var(--ink2);background:rgba(255,255,255,.6)}

/* ---------- 闯关 ---------- */
.quizbox{
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(10px);
  border-radius:var(--r);
  padding:17px;
  box-shadow:var(--sh-m);
}
.qtext{font-size:17px;line-height:1.85;margin-bottom:4px;white-space:pre-wrap}
.feedback{
  margin-top:13px;padding:14px;
  border-radius:16px;font-size:15.5px;line-height:1.8;
  white-space:pre-wrap;
  animation:pop .3s cubic-bezier(.22,.9,.3,1) both;
}
.feedback.right{background:#E9F8F0;color:#1C7A4A}
.feedback.wrong{background:#FFF0EC;color:#C4452F}
#btnQuizNext{margin-top:13px}

/* ---------- 成长 ---------- */
.stats{display:flex;gap:9px;margin-bottom:12px}
.stat{
  flex:1;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(10px);
  border-radius:18px;
  padding:14px 8px;text-align:center;
  box-shadow:var(--sh-m);
}
.stat .n{font-size:23px;font-weight:800;color:var(--brand);line-height:1.3}
.stat .l{font-size:11.5px;color:var(--ink3);margin-top:2px}

.bars{display:flex;flex-direction:column;gap:10px}
.bar{display:flex;align-items:center;gap:9px;font-size:13.5px}
.bar .k{width:62px;flex:0 0 auto;color:var(--ink2)}
.bar .track{flex:1;height:10px;background:var(--line);border-radius:6px;overflow:hidden}
.bar .fill{
  height:100%;border-radius:6px;
  background:linear-gradient(90deg,var(--yellow),var(--brand));
  animation:grow .6s cubic-bezier(.22,.9,.3,1) both;
}
@keyframes grow{from{width:0!important}}
.bar .v{width:30px;text-align:right;color:var(--ink3);font-size:12px}

.hist{font-size:13.5px;color:var(--ink2);line-height:1.9}
.hist .item{padding:8px 0;border-bottom:1px solid var(--line)}
.hist .item:last-child{border-bottom:0}

/* ---------- 气泡导航 ---------- */
.bubble-nav{
  position:fixed;
  left:14px;right:14px;
  bottom:calc(14px + env(safe-area-inset-bottom));
  height:var(--nav-h);
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.9);
  border-radius:32px;
  box-shadow:0 12px 32px rgba(150,95,40,.2), inset 0 1px 0 rgba(255,255,255,.8);
  display:flex;align-items:center;
  padding:6px;gap:2px;
  z-index:70;
}
.nav-item{
  flex:1;height:100%;
  border:0;background:transparent;
  border-radius:26px;
  font-size:14px;font-weight:700;
  color:var(--ink3);
  cursor:pointer;font-family:inherit;
  transition:background .2s, color .2s, box-shadow .2s;
}
.nav-item.on{
  background:linear-gradient(180deg,var(--brand-l),var(--brand));
  color:#fff;
  box-shadow:0 5px 0 var(--brand-d), 0 8px 16px rgba(255,138,0,.3), inset 0 1px 0 rgba(255,255,255,.45);
}

/* ---------- 设置 ---------- */
.sheet{
  position:fixed;inset:0;z-index:100;
  background:rgba(60,35,10,.34);
  backdrop-filter:blur(3px);
  display:none;
}
.sheet.on{display:block;animation:fade .22s both}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet-box{
  position:absolute;left:0;right:0;bottom:0;top:7%;
  background:#FFF6EA;
  border-radius:26px 26px 0 0;
  display:flex;flex-direction:column;
  box-shadow:0 -8px 30px rgba(120,70,20,.2);
  animation:up .28s cubic-bezier(.22,.9,.3,1) both;
}
@keyframes up{from{transform:translateY(30px);opacity:.4}to{transform:none;opacity:1}}
.sheet-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 17px;
  border-bottom:1px solid var(--line);
}
.sheet-title{font-size:17px;font-weight:800}
.sheet-body{
  flex:1;overflow-y:auto;
  padding:14px 14px calc(32px + env(safe-area-inset-bottom));
  -webkit-overflow-scrolling:touch;
}
.grp{
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.9);
  border-radius:var(--r);
  padding:15px;margin-bottom:12px;
  box-shadow:var(--sh-m);
}
.grp-title{font-size:15px;font-weight:800;margin-bottom:11px}
.fld{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.fld>span:first-child{width:98px;flex:0 0 auto;font-size:13.5px;color:var(--ink2)}
.fld .tinput{flex:1;min-width:0}
.switchrow{justify-content:space-between}
.switchrow input{width:22px;height:22px;accent-color:var(--brand)}

/* ---------- 说话中的小提示 ---------- */
.speaking{
  display:inline-flex;align-items:center;gap:4px;
  font-size:12px;color:var(--brand);font-weight:700;
}
.speaking i{
  width:3px;height:11px;border-radius:2px;background:var(--brand);
  animation:sb .8s ease-in-out infinite;
}
.speaking i:nth-child(2){animation-delay:.15s}
.speaking i:nth-child(3){animation-delay:.3s}
@keyframes sb{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1)}}

/* ---------- 一直聊（连续对话） ---------- */
.talkfab{
  flex:0 0 auto;
  border:none;cursor:pointer;
  padding:0 14px;height:42px;border-radius:21px;
  background:linear-gradient(180deg,#FFB347,var(--brand));
  color:#fff;font-size:14px;font-weight:800;
  box-shadow:0 4px 12px rgba(255,138,0,.35),inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .12s;
}
.talkfab:active{transform:translateY(2px) scale(.97)}
.talkfab.on{
  background:linear-gradient(180deg,#FF7A6B,#F5503C);
  box-shadow:0 4px 12px rgba(245,80,60,.4),inset 0 1px 0 rgba(255,255,255,.4);
}

.convbar{
  display:flex;align-items:center;gap:10px;
  margin:0 14px 8px;padding:11px 14px;
  border-radius:20px;
  background:rgba(255,255,255,.82);
  box-shadow:0 6px 18px rgba(120,80,30,.14);
  backdrop-filter:blur(8px);
}
.convbar.hidden{display:none}
.convwave{display:flex;align-items:center;gap:3px;height:26px;flex:0 0 auto}
.convwave i{
  width:3px;height:5px;border-radius:2px;background:var(--brand);
  transition:height .1s ease-out;
}
.convstate{
  flex:1;min-width:0;font-size:14px;font-weight:700;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.convclose{
  flex:0 0 auto;border:none;cursor:pointer;
  padding:0 12px;height:30px;border-radius:15px;
  background:rgba(0,0,0,.06);color:var(--ink2);font-size:13px;font-weight:700;
}
.convbar.listening .convwave i{animation:cvw .7s ease-in-out infinite}
.convbar.listening .convwave i:nth-child(2){animation-delay:.08s}
.convbar.listening .convwave i:nth-child(3){animation-delay:.16s}
.convbar.listening .convwave i:nth-child(4){animation-delay:.24s}
.convbar.listening .convwave i:nth-child(5){animation-delay:.32s}
.convbar.listening .convwave i:nth-child(6){animation-delay:.4s}
.convbar.listening .convwave i:nth-child(7){animation-delay:.48s}
@keyframes cvw{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1.6)}}
.convbar.thinking .convstate{color:var(--brand)}
.convbar.speaking .convstate{color:#3FBF7F}

/* ---------- 版本与更新 ---------- */
.vercard{
  display:flex;flex-direction:column;gap:10px;
  padding:13px;border-radius:16px;
  background:rgba(255,255,255,.6);
  border:1px solid rgba(0,0,0,.05);
}
.vernow{display:flex;align-items:baseline;gap:9px}
.vernow b{font-size:19px;font-weight:900;color:var(--brand)}
.vernow span{font-size:12.5px;color:var(--ink3)}
.vermsg{font-size:13px;line-height:1.55;color:var(--ink2)}
.upbar{
  height:6px;border-radius:3px;overflow:hidden;
  background:rgba(0,0,0,.08);
}
.upbar.hidden{display:none}
.upbar i{
  display:block;height:100%;width:0%;border-radius:3px;
  background:linear-gradient(90deg,var(--brand),#FFC36B);
  transition:width .25s;
}

/* ---------- 语音输入中 ---------- */
.micbtn.rec{
  background:linear-gradient(180deg,#FF7A6B,#F5503C);
  animation:mcp 1s ease-in-out infinite;
}
@keyframes mcp{0%,100%{box-shadow:0 2px 6px rgba(245,80,60,.3)}50%{box-shadow:0 2px 14px rgba(245,80,60,.6)}}

/* ---------- 轻提示 ---------- */
.toastbox{
  position:fixed;left:50%;bottom:118px;
  transform:translate(-50%,10px);
  max-width:76vw;padding:11px 18px;border-radius:22px;
  background:rgba(40,30,20,.88);color:#fff;
  font-size:14px;font-weight:700;line-height:1.4;text-align:center;
  opacity:0;pointer-events:none;
  transition:opacity .22s,transform .22s;
  z-index:999;
  box-shadow:0 8px 22px rgba(0,0,0,.22);
}
.toastbox.on{opacity:1;transform:translate(-50%,0)}



/* ---------- 选完之后收起来的提示条 ---------- */
.running{
  display:flex;align-items:center;gap:10px;
  margin:0 0 12px;padding:10px 14px;
  border-radius:15px;
  background:rgba(255,255,255,.72);
  box-shadow:var(--sh-s);
  font-size:13.5px;font-weight:700;color:var(--ink2);
}
.running.hidden{display:none}
.running span{
  flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.running .linkbtn.sm{padding:0;flex:0 0 auto}

/* ---------- 清空密码 ---------- */
.pwdmask{
  position:absolute;inset:0;z-index:60;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  background:rgba(40,30,20,.45);
  backdrop-filter:blur(3px);
}
.pwdmask.hidden{display:none}
.pwdbox{
  width:100%;max-width:300px;
  background:#fff;border-radius:22px;
  padding:22px 20px 18px;
  box-shadow:0 18px 40px rgba(80,50,20,.28);
  animation:pop .24s cubic-bezier(.22,.9,.3,1) both;
}
.pwdtitle{font-size:17px;font-weight:900;color:var(--ink);margin-bottom:6px}
.pwdbox .tinput{margin-top:14px;text-align:center;letter-spacing:4px;font-size:17px}
.pwdmsg{
  min-height:18px;margin-top:8px;
  font-size:12.5px;color:#E24A3A;font-weight:700;text-align:center;
}
.pwdrow{display:flex;gap:9px;margin-top:6px}
.pwdrow .voicebtn{height:42px}

/* ---------- 聊天空状态引导 ---------- */
.hero{position:relative}