:root{
  --bg-0:#050e26;
  --bg-1:#0a1f4e;
  --bg-2:#123a8a;
  --panel:rgba(18,52,120,.38);
  --panel-border:rgba(120,180,255,.38);
  --card:linear-gradient(165deg, rgba(42,96,200,.42), rgba(10,30,80,.55));
  --card-border:rgba(130,185,255,.35);
  --text:#ffffff;
  --text-dim:#bcd3f5;
  --accent:#ffd54a;
  --mic-1:#3f8cff;
  --mic-2:#7db6ff;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
  color:var(--text);
  overflow-x:hidden;
  background:
    radial-gradient(90rem 40rem at 80% -10%, rgba(64,140,255,.28), transparent 60%),
    radial-gradient(70rem 36rem at 10% 30%, rgba(30,90,220,.22), transparent 60%),
    radial-gradient(60rem 30rem at 90% 80%, rgba(20,70,180,.25), transparent 65%),
    linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 55%, #071638 100%);
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:url("bg.png") center/cover no-repeat;
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:linear-gradient(180deg, rgba(4,10,30,.35), rgba(4,10,30,.06) 30%, rgba(4,10,30,.06) 62%, rgba(4,10,30,.40));
}

.skip-link{position:absolute;left:-999px;top:8px;z-index:99;background:#fff;color:#0a2a6b;padding:10px 16px;border-radius:8px;font-weight:700}
.skip-link:focus{left:8px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.app{
  position:relative;z-index:1;
  max-width:480px;margin:0 auto;
  height:100vh;height:100dvh;
  display:flex;flex-direction:column;
  padding:calc(env(safe-area-inset-top, 0px) + 8px) 16px calc(env(safe-area-inset-bottom, 0px) + 8px);
}
#main{flex:1;min-height:0;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}

:is(button,a,input):focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:10px}

/* ---------- 顶栏 ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:0}
.brand{display:flex;align-items:center;gap:9px;min-width:0}
.brand .logo{flex:none;width:32px;height:22px;object-fit:contain;margin-left:-12px}
.brand h1{font-size:15.5px;line-height:1.25;font-weight:700;letter-spacing:.5px;text-wrap:balance}
.brand .slogan{margin-top:2px;font-size:10px;font-weight:600;letter-spacing:2.5px;color:#ff8585}
.top-actions{flex:none;display:flex;gap:8px;align-items:center}
.pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 12px;border-radius:999px;font-size:13px;font-weight:600;color:var(--text);
  background:rgba(40,90,190,.35);border:1px solid var(--panel-border);
  backdrop-filter:blur(6px);cursor:pointer;
}
.pill[aria-pressed="true"]{background:rgba(63,140,255,.55)}
.pill:active{transform:scale(.97)}
.pill svg{flex:none}

body.lang-ug{font-family:"Microsoft Uighur","UKIJ Tuz Tom","Noto Naskh Arabic","PingFang SC","Microsoft YaHei",sans-serif}
.lang-ug :is(.brand h1,.brand .slogan,.panel h2,.qq,.hint,.ctrl .lbl,#textInput,.skip-link,.chip-row .lbl){direction:rtl;text-align:right}

/* ---------- 数字人舞台：真人立绘 + 侧边问候气泡 + 地面光晕 ---------- */
.stage{position:relative;flex:1;min-height:230px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;margin-top:2px}
.avatar{position:relative;height:100%;width:100%;display:flex;justify-content:center;align-items:flex-end}
.avatar .halo{
  position:absolute;left:50%;bottom:6%;transform:translateX(-50%);
  width:290px;height:290px;max-width:120vw;border-radius:50%;
  background:radial-gradient(circle, rgba(80,150,255,.24) 0%, rgba(40,100,220,.10) 45%, transparent 70%);
}
.avatar .person-img{
  position:relative;z-index:1;height:100%;max-height:min(50vh,480px);width:auto;object-fit:contain;
  aspect-ratio:694/1100;
  filter:drop-shadow(0 18px 22px rgba(0,10,40,.5)) drop-shadow(0 0 22px rgba(90,160,255,.28));
  animation:float 5s ease-in-out infinite;
  -webkit-box-reflect:below 2px linear-gradient(transparent 86%, rgba(140,190,255,.16));
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.avatar.talking .person-img{animation-duration:2.2s}
.speaking .avatar .halo{animation:haloPulse 1.5s ease-in-out infinite}
@keyframes haloPulse{0%,100%{opacity:.7}50%{opacity:1}}
.avatar .floor{
  position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);
  width:250px;height:38px;border-radius:50%;
  background:radial-gradient(ellipse, rgba(110,175,255,.38) 0%, rgba(60,120,230,.15) 45%, transparent 72%);
  filter:blur(2px);
}

/* ---------- 星云数字人层：SDK 画布挂载，接管立绘视觉 ---------- */
.avatar .xy-layer{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  /* 2:3 + cover：裁掉 9:16 场景上下的大厅留白，让人物更饱满；不出舞台边界 */
  height:100%;aspect-ratio:2/3;overflow:hidden;
  z-index:1;display:flex;align-items:flex-end;justify-content:center;
  pointer-events:none;
}
/* 内层挂载容器：SDK 会往 container 写 position/overflow 等 inline 样式，主动给足 */
.avatar .xy-layer .xy-mount{position:relative;width:100%;height:100%;overflow:hidden}
/* 覆盖 SDK 的内联缩放/偏移（其在非 9:16 容器里会放大溢出导致人物被裁半）：
   画布等比 cover 铺满挂载层 */
.avatar .xy-layer canvas{
  position:static !important;inset:auto !important;margin:0 !important;
  transform:none !important;width:100% !important;height:100% !important;
  object-fit:cover;object-position:center bottom; /* 裁上留白保脚部 */
  z-index:auto !important;max-width:none;
}
.avatar.xy-on .person-img{visibility:hidden} /* 保留占位，问候气泡贴位不受影响 */
body.chat-mode .avatar .xy-layer{height:100%;max-height:none}

@keyframes wave{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}

/* ---------- 常用问题面板：上移叠加在人物腿部，毛玻璃透出人形 ---------- */
.panel{
  position:relative;z-index:3;
  margin-top:-96px;background:var(--panel);border:1px solid var(--panel-border);
  border-radius:20px;padding:10px 10px;backdrop-filter:blur(10px);
  box-shadow:0 12px 34px rgba(0,10,40,.4);
}
.panel h2{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:700;margin-bottom:8px;padding-left:2px}
.panel h2 svg{flex:none}
/* 猜你想问：竖排问题列表 */
.qlist{display:flex;flex-direction:column;gap:8px}
.qq{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:12px 12px;border-radius:13px;cursor:pointer;text-align:left;
  background:var(--card);border:1px solid var(--card-border);color:var(--text);
  font-size:14px;line-height:1.5;
  transition:border-color .15s ease, transform .15s ease;
}
.qq:hover{border-color:rgba(160,205,255,.7)}
.qq:active{transform:scale(.985)}
.qq .qmark{
  flex:none;width:24px;height:24px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:800;color:#0a2a6b;
  background:linear-gradient(160deg,#9cc4ff,#5f9bff);
}
.qq .t{flex:1;min-width:0}
.qq .chev{flex:none;color:rgba(190,220,255,.75)}

/* 文本输入模式 */
body.text-mode .ctrl,body.text-mode .hint,body.text-mode .mic-hint{display:none}
body.text-mode .controls{display:flex;align-items:center;gap:8px}
.input-bar{display:flex;align-items:center;gap:8px;width:100%;animation:barUp .18s ease-out}
.input-bar[hidden]{display:none}
@keyframes barUp{from{transform:translateY(14px);opacity:0}}
.input-bar input{
  flex:1;min-width:0;padding:12px 14px;border-radius:12px;font-size:15px;
  color:var(--text);background:rgba(10,30,80,.6);border:1px solid var(--panel-border);
}
.input-bar input::placeholder{color:#8aa8d8}
.input-bar .icon-btn{
  flex:none;width:46px;height:46px;border-radius:12px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:rgba(40,90,190,.35);border:1px solid var(--card-border);color:#dceaff;
}
.input-bar .send{
  flex:none;padding:12px 16px;border-radius:12px;border:1px solid var(--card-border);
  background:linear-gradient(160deg,#2f6fe0,#1c4aa8);
  color:#fff;font-size:15px;font-weight:600;cursor:pointer;
}
.lang-ug .input-bar{direction:rtl}

/* ---------- 对话模式：人物保持首页大图，消息面板与宫格一样叠在人物腿上 ---------- */
body.chat-mode .panel{display:none}
body.chat-mode .bubble-card{display:none}
body.chat-mode .chat{flex:none;margin-top:-96px;position:relative;z-index:3}
body.chat-mode .msgs{max-height:42vh}
.chat{display:flex;flex-direction:column;margin-top:10px}
.chat[hidden]{display:none}
.chat-head{
  display:flex;align-items:center;gap:10px;margin-bottom:8px;
  background:var(--panel);border:1px solid var(--panel-border);
  border-radius:999px;padding:5px 8px;backdrop-filter:blur(8px);
}
.chat-head .back{
  display:inline-flex;align-items:center;gap:5px;cursor:pointer;
  background:rgba(40,90,190,.35);border:1px solid var(--card-border);
  color:var(--text);padding:6px 13px;border-radius:999px;font-size:13px;font-weight:600;
}
.chat-head .back:active{transform:scale(.97)}
.chat-head .topic{font-size:15px;font-weight:700;color:#cfe2ff;flex:1;min-width:0}
.chat-head .restart{
  display:inline-flex;align-items:center;gap:5px;cursor:pointer;
  background:rgba(40,90,190,.35);border:1px solid var(--card-border);
  color:var(--text);padding:6px 13px;border-radius:999px;font-size:13px;font-weight:600;
}
.msgs{
  display:flex;flex-direction:column;gap:8px;
  max-height:216px;min-height:120px;overflow-y:auto;
  background:var(--panel);border:1px solid var(--panel-border);
  border-radius:16px;padding:12px;backdrop-filter:blur(10px);
}
.msg{max-width:86%;padding:9px 12px;border-radius:12px;font-size:14px;line-height:1.6;word-break:break-word}
.msg.ai{
  align-self:flex-start;
  background:linear-gradient(160deg, rgba(30,75,165,.72), rgba(12,34,88,.78));
  border:1px solid var(--panel-border);
  border-bottom-left-radius:4px;
}
.msg.user{
  align-self:flex-end;
  background:linear-gradient(160deg,#2f6fe0,#1c4aa8);
  border:1px solid var(--card-border);
  border-bottom-right-radius:4px;
}
.msg.ai .body p{margin:0 0 6px}
.msg.ai .body p:last-child{margin:0}
.msg.ai .body strong{color:#ffe9a8}

/* 气泡内等待态：typing 动画 + 状态文字 */
.msg.ai .pending{display:flex;align-items:center;gap:8px;color:#bcd3f5;font-size:13.5px;min-height:16px}

/* marked 渲染的 Markdown 元素 */
.msg.ai .body h1,.msg.ai .body h2,.msg.ai .body h3,.msg.ai .body h4,.msg.ai .body h5{
  margin:10px 0 5px;font-size:14.5px;font-weight:700;color:#ffe9a8;line-height:1.45;
}
.msg.ai .body h1:first-child,.msg.ai .body h2:first-child,.msg.ai .body h3:first-child{margin-top:2px}
.msg.ai .body ul,.msg.ai .body ol{margin:2px 0 6px;padding-left:18px}
.msg.ai .body li{margin:3px 0}
.msg.ai .body li::marker{color:#9cc4ff}
.msg.ai .body code{
  background:rgba(4,14,40,.55);padding:1px 5px;border-radius:4px;
  font-size:12.5px;font-family:Consolas,Menlo,monospace;
}
.msg.ai .body pre{
  background:rgba(4,14,40,.55);padding:9px 11px;border-radius:8px;
  overflow-x:auto;margin:4px 0 8px;
}
.msg.ai .body pre code{background:none;padding:0}
.msg.ai .body table{border-collapse:collapse;margin:4px 0 8px;font-size:13px;max-width:100%;display:block;overflow-x:auto}
.msg.ai .body th,.msg.ai .body td{border:1px solid rgba(130,185,255,.35);padding:4px 9px;text-align:left}
.msg.ai .body th{background:rgba(30,75,165,.5);color:#e3efff}
.msg.ai .body hr{border:none;border-top:1px solid rgba(130,185,255,.3);margin:8px 0}
.msg.ai .body blockquote{
  border-left:3px solid rgba(130,185,255,.5);padding-left:10px;margin:4px 0 8px;color:#cfe2ff;
}
.lang-ug .msgs{direction:rtl}
.lang-ug .msg.ai{align-self:flex-end}
.lang-ug .msg.user{align-self:flex-start}

/* AI 气泡：播报按钮 */
.msg.ai .tools{display:flex;gap:6px;margin-top:6px;opacity:.85}
.msg.ai .tools button{
  display:inline-flex;align-items:center;gap:4px;cursor:pointer;
  padding:3px 9px;border-radius:999px;font-size:12px;font-weight:600;
  background:rgba(20,60,150,.5);border:1px solid var(--card-border);color:#cfe2ff;
}
.msg.ai .tools button:active{transform:scale(.95)}

/* 输入中的打字指示 */
.typing{display:inline-flex;align-items:flex-end;gap:3px;height:14px}
.typing i{width:4px;border-radius:2px;background:#9cc4ff;animation:wave 1s ease-in-out infinite}
.typing i:nth-child(2){animation-delay:.15s}
.typing i:nth-child(3){animation-delay:.3s}

/* 猜你想问 */
.chip-row{display:flex;flex-direction:column;gap:6px;align-self:flex-start;max-width:92%;margin-top:2px}
.chip-row .lbl{font-size:12px;color:var(--text-dim);display:flex;align-items:center;gap:4px}
.chip-row .chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{
  cursor:pointer;padding:6px 12px;border-radius:999px;font-size:13px;line-height:1.4;
  background:rgba(63,140,255,.22);border:1px solid rgba(130,185,255,.45);color:#e3efff;
  transition:border-color .15s ease,transform .15s ease;
}
.chip:hover{border-color:rgba(160,205,255,.8)}
.chip:active{transform:scale(.97)}

/* ---------- 底部控制区 ---------- */
.controls{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;padding:8px 8px 0}
.ctrl{display:flex;flex-direction:column;align-items:center;gap:5px}
#kbCol{justify-self:start}
#stopCol{justify-self:end;visibility:hidden}
body.busy #stopCol{visibility:visible}
body.busy .chat-head .back,body.busy .chat-head .restart{opacity:.45}
.ctrl .lbl{font-size:12px;color:var(--text-dim)}
.mic-hint{grid-column:1 / -1;text-align:center;font-size:12px;color:var(--text-dim)}
.round{
  width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(30,70,160,.45);border:1px solid var(--card-border);color:#dceaff;cursor:pointer;
}
.round:active{transform:scale(.95)}
.mic-wrap{position:relative;width:74px;height:74px;display:flex;align-items:center;justify-content:center}
.mic{
  position:relative;z-index:2;width:62px;height:62px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 30% 25%, var(--mic-2), var(--mic-1) 60%);
  border:2px solid rgba(190,220,255,.65);
  box-shadow:0 0 26px rgba(64,140,255,.65), inset 0 0 14px rgba(255,255,255,.25);
  color:#fff;
}
.mic:active{transform:scale(.96)}
.mic-wrap::before,.mic-wrap::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:1px solid rgba(110,175,255,.5);animation:pulse 2.4s ease-out infinite;
}
.mic-wrap::after{animation-delay:1.2s}
@keyframes pulse{0%{transform:scale(.72);opacity:.9}100%{transform:scale(1.25);opacity:0}}
body.listening .mic{background:radial-gradient(circle at 30% 25%, #ff8f8f, #e04848 60%);border-color:#ffb3b3}
body.listening .mic-wrap::before{border-color:rgba(255,120,120,.6)}
body.listening .mic-wrap::after{border-color:rgba(255,120,120,.6)}
.hint{grid-column:1 / -1;text-align:center;font-size:14px;color:#cfe2ff;padding-top:2px}

@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}

/* 被新问题取代的旧回答：淡色中断标记 */
.msg.ai .body .superseded{margin-top:6px;font-size:12px;color:#8aa8d8}