/* ═══════════ ④ AI 数字人页 ═══════════
   左右分栏：左边窄（数字人），右边宽（对话）。深色皮肤，和首页/科目页同一套。

   布局要点：
     两张卡片并排，左边固定比例、右边吃掉剩余空间。
     数字人放在左卡里、用"宽度驱动"定尺寸（width + aspect-ratio），
     不要用 height:100%——那样在窄卡里会横向溢出。 */

#view-ai{
  padding:var(--sb-h) 0 .9rem;
  background:none;
}
/* 数字人身后那团紫色辉光，位置跟着左卡走 */
#view-ai::before{
  content:"";position:absolute;left:10%;top:calc(var(--sb-h) + 2rem);
  width:26rem;height:26rem;z-index:0;pointer-events:none;
  background:radial-gradient(closest-side,rgba(124,92,255,.28),rgba(124,92,255,.07) 62%,transparent 80%);
}
#ai-fx{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.5;}

/* ── 分栏容器 ── */
.ai-split{
  position:relative;z-index:2;flex:1;min-height:0;
  display:flex;gap:.85rem;padding:0 var(--page-pad);
}

/* ── 左：数字人（窄） ── */
.ai-left{
  position:relative;flex:0 0 29%;min-width:0;
  display:flex;flex-direction:column;align-items:center;
  padding:.85rem .85rem .7rem;
  border-radius:1.15rem;
  background:linear-gradient(168deg,#1b2438,#121a2b);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 .8rem 2rem rgba(0,0,0,.45),var(--card-ring),var(--card-top);
}
.ai-badge{
  position:absolute;right:.7rem;top:.7rem;z-index:4;
  display:flex;align-items:center;gap:.3rem;
  padding:.22rem .6rem;border-radius:999px;
  font-size:.7rem;font-weight:700;color:#8ff0c8;
  background:rgba(34,176,122,.16);border:1px solid rgba(34,176,122,.38);
}
.ai-badge i{width:.4rem;height:.4rem;border-radius:50%;background:#39e39b;
  box-shadow:0 0 0 0 rgba(57,227,155,.6);animation:badgePulse 2s infinite;}
@keyframes badgePulse{0%,100%{box-shadow:0 0 0 0 rgba(57,227,155,.5);}70%{box-shadow:0 0 0 .45rem rgba(57,227,155,0);}}

.ai-left .ai-stage{
  position:relative;flex:1;min-height:0;width:100%;
  display:grid;place-items:center;overflow:hidden;
}
/* 用宽度定尺寸：窄卡里也不会横向溢出。
   注意光环 r3 是 -14%（直径 = 头像框 × 1.28），左卡内宽约 315px，
   所以头像框放到 15rem（240px）时外环 307px 刚好不被裁——再大就会被 overflow 切掉。 */
.ai-left .avatar{
  position:relative;width:min(100%,15rem);aspect-ratio:1/1;
  display:grid;place-items:center;
  transition:transform .45s cubic-bezier(.22,.9,.28,1);
}
#view-ai.compact .ai-left .avatar{transform:scale(.92);}

/* 数字人本体：现在是 AI 插画（圆形裁切）。手绘版的内联 SVG 已被替换，
   眼睛/嘴部的 keyframes 暂时用不上，但保留着——换回手绘版就又能用。 */
.av-body{position:relative;z-index:3;width:90%;height:90%;
  animation:breathe 4.6s ease-in-out infinite;}
.av-body svg{width:100%;height:100%;}
.av-body img{
  width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;
  box-shadow:0 .6rem 1.6rem rgba(0,0,0,.5),0 0 0 2px rgba(255,255,255,.14);
  -webkit-user-drag:none;user-select:none;
}
@keyframes breathe{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-2.2%) scale(1.012);}}
/* 深底上光环要暗，否则整块发白。
   间距别放大：左卡内宽约 320px（1280 视口下根字号还会 ×1.05），
   头像框 15rem≈252px，r3 的 -11% → 307px，刚好不被 overflow 裁掉。 */
.av-ring{
  position:absolute;inset:2%;border-radius:50%;
  border:1.5px solid rgba(154,151,238,.22);
  background:radial-gradient(circle,rgba(124,92,255,.12),transparent 68%);
  animation:ringPulse 4.2s ease-in-out infinite;
}
.av-ring.r2{inset:-5%;border-color:rgba(124,119,221,.16);animation-delay:.7s;}
.av-ring.r3{inset:-11%;border-style:dashed;border-color:rgba(18,160,182,.18);animation-delay:1.4s;}
@keyframes ringPulse{0%,100%{transform:scale(1);opacity:.7;}50%{transform:scale(1.055);opacity:1;}}
.avatar.speaking .av-ring{border-color:rgba(94,240,192,.5);animation-duration:1.1s;}
.avatar.thinking .av-ring{border-color:rgba(255,209,102,.45);animation-duration:2s;}

/* 眨眼 / 口型 */
.avatar .eyes ellipse{transform-origin:center;animation:blink 5.4s infinite;}
.avatar .eyes ellipse:nth-child(2){animation-delay:.04s;}
@keyframes blink{0%,92%,100%{transform:scaleY(1);}95%{transform:scaleY(.08);}}
.avatar.speaking .mouth{animation:talk .32s ease-in-out infinite alternate;}
@keyframes talk{from{transform:scaleY(1);}to{transform:scaleY(2.1);}}

.av-wave{
  position:absolute;bottom:2%;left:50%;transform:translateX(-50%);z-index:4;
  display:flex;align-items:flex-end;gap:.16rem;height:1.6rem;opacity:0;transition:opacity .25s;
}
.avatar.speaking .av-wave{opacity:1;}
.av-wave i{width:.22rem;border-radius:1rem;background:linear-gradient(180deg,#5ef0c0,#3fd8ff);
  animation:waveBar .7s ease-in-out infinite;}
.av-wave i:nth-child(1){height:32%;animation-delay:0s;}
.av-wave i:nth-child(2){height:66%;animation-delay:.1s;}
.av-wave i:nth-child(3){height:100%;animation-delay:.2s;}
.av-wave i:nth-child(4){height:52%;animation-delay:.3s;}
.av-wave i:nth-child(5){height:78%;animation-delay:.15s;}
@keyframes waveBar{0%,100%{transform:scaleY(.35);}50%{transform:scaleY(1);}}

.ai-left-foot{
  flex:none;width:100%;text-align:center;line-height:1.5;
  padding-top:.5rem;border-top:1px solid rgba(255,255,255,.08);
}
.ai-left-foot b{display:block;font-size:1.02rem;font-weight:800;letter-spacing:.02em;}
.ai-left-foot span{font-size:.76rem;color:rgba(255,255,255,.52);}
.ai-left-foot span.listening{color:#5ef0c0;}
.ai-left-foot span.thinking{color:#ffd166;}

/* ── 右：对话（宽） ── */
.ai-right{
  position:relative;flex:1;min-width:0;
  display:flex;flex-direction:column;
  border-radius:1.15rem;overflow:hidden;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 .8rem 2rem rgba(0,0,0,.4);
}
.ai-head{
  flex:none;display:flex;align-items:center;gap:.75rem;
  padding:.6rem .9rem;border-bottom:1px solid rgba(255,255,255,.07);
}
.ai-back,.ai-gear{
  width:2.1rem;height:2.1rem;border-radius:50%;display:grid;place-items:center;flex:none;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#fff;
  transition:background .18s,transform .18s;
}
.ai-gear{margin-left:auto;}
.ai-back:active,.ai-gear:active{transform:scale(.92);background:rgba(255,255,255,.16);}
.ai-back .ic{width:1.15rem;height:1.15rem;}
.ai-gear .ic{width:1.1rem;height:1.1rem;}
.ai-id{display:flex;flex-direction:column;line-height:1.3;min-width:0;}
.ai-id b{font-size:.98rem;font-weight:800;}
.ai-id span{font-size:.72rem;color:rgba(255,255,255,.45);}

/* ── 对话区 ── */
.ai-chat{
  position:relative;flex:1;min-height:0;overflow-y:auto;
  display:flex;flex-direction:column;gap:.65rem;
  padding:.85rem 1rem .3rem;scroll-behavior:smooth;
}
.msg{max-width:80%;display:flex;gap:.55rem;align-items:flex-start;animation:msgIn .32s cubic-bezier(.22,.9,.28,1);}
@keyframes msgIn{from{opacity:0;transform:translateY(.6rem);}to{opacity:1;transform:none;}}
.msg .m-av{
  width:2rem;height:2rem;border-radius:50%;flex:none;display:grid;place-items:center;
  background:linear-gradient(150deg,#9a97ee,#5b3df0);color:#fff;
  box-shadow:0 .3rem .8rem rgba(90,50,230,.4);
}
.msg .m-av .ic{width:1.1rem;height:1.1rem;}
/* 气泡：小豆老师用深色卡，和便当盒的立体感三件套一致 */
.msg .m-bub{
  padding:.7rem .95rem;border-radius:1.05rem;font-size:.94rem;line-height:1.72;
  background:linear-gradient(158deg,#1b2438,#141b2c);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 .5rem 1.4rem rgba(0,0,0,.4),var(--card-ring),var(--card-top);
  -webkit-user-select:text;user-select:text;word-break:break-word;
}
.msg.bot .m-bub{border-top-left-radius:.3rem;}
/* 孩子自己说的话：紫罗兰强调色 */
.msg.me{align-self:flex-end;flex-direction:row-reverse;}
.msg.me .m-av{background:linear-gradient(150deg,#5ef0c0,#22b07a);box-shadow:0 .3rem .8rem rgba(34,176,122,.4);}
.msg.me .m-bub{
  background:linear-gradient(150deg,rgba(154,151,238,.34),rgba(124,119,221,.22));
  border-color:rgba(154,151,238,.42);
  box-shadow:0 .5rem 1.4rem rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.16);
  border-top-left-radius:1.05rem;border-top-right-radius:.3rem;
}
.msg .m-bub b{color:#a9c6ff;}
.msg .m-bub code{background:rgba(255,255,255,.12);padding:.05rem .35rem;border-radius:.35rem;
  font-family:var(--font-num);}
.msg .m-bub .m-line{display:block;}
.m-typing{display:flex;gap:.28rem;padding:.8rem 1.05rem;}
.m-typing i{width:.42rem;height:.42rem;border-radius:50%;background:rgba(255,255,255,.55);
  animation:dotJump 1.1s infinite;}
.m-typing i:nth-child(2){animation-delay:.16s;}
.m-typing i:nth-child(3){animation-delay:.32s;}
@keyframes dotJump{0%,60%,100%{transform:translateY(0);opacity:.45;}30%{transform:translateY(-.36rem);opacity:1;}}

/* ── 快捷提问：用便当盒那套彩色，和首页/科目页呼应 ── */
.ai-quick{
  position:relative;flex:none;display:flex;gap:.45rem;overflow-x:auto;
  padding:.5rem 1rem .35rem;scrollbar-width:none;
}
.ai-quick::-webkit-scrollbar{display:none;}
.qchip{
  flex:none;padding:.45rem .9rem;border-radius:999px;font-size:.82rem;font-weight:700;
  color:rgba(255,255,255,.94);white-space:nowrap;
  border:1px solid rgba(255,255,255,.14);
  transition:transform .18s,background .18s,border-color .18s;
}
.qchip:active{transform:scale(.95);}
.qchip:nth-child(6n+1){background:rgba(13,147,168,.26);border-color:rgba(13,147,168,.6);}
.qchip:nth-child(6n+2){background:rgba(240,181,88,.24);border-color:rgba(240,181,88,.58);}
.qchip:nth-child(6n+3){background:rgba(245,148,111,.24);border-color:rgba(245,148,111,.58);}
.qchip:nth-child(6n+4){background:rgba(154,151,238,.26);border-color:rgba(154,151,238,.6);}
.qchip:nth-child(6n+5){background:rgba(18,160,182,.24);border-color:rgba(18,160,182,.58);}
.qchip:nth-child(6n+6){background:rgba(107,123,240,.26);border-color:rgba(107,123,240,.6);}

/* ── 输入栏 ── */
.ai-input{
  position:relative;flex:none;display:flex;align-items:center;gap:.55rem;
  margin:.15rem .9rem .8rem;padding:.4rem .45rem .4rem .5rem;
  border-radius:1.35rem;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 .6rem 1.6rem rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.1);
}
.aii-mic{
  width:2.4rem;height:2.4rem;border-radius:50%;flex:none;display:grid;place-items:center;color:#fff;
  background:linear-gradient(150deg,#9a97ee,#5b5bd6);box-shadow:0 .35rem .9rem rgba(110,90,255,.4);
  transition:transform .18s;
}
.aii-mic:active{transform:scale(.92);}
.aii-mic.rec{background:linear-gradient(150deg,#ff8a8a,#e0362f);animation:micPulse 1.1s infinite;}
@keyframes micPulse{0%,100%{box-shadow:0 0 0 0 rgba(224,54,47,.55);}70%{box-shadow:0 0 0 .7rem rgba(224,54,47,0);}}
.aii-mic .ic{width:1.2rem;height:1.2rem;}
#ai-text{
  flex:1;min-width:0;padding:.45rem .3rem;font-size:.94rem;color:#fff;
  -webkit-user-select:text;user-select:text;
}
#ai-text::placeholder{color:rgba(255,255,255,.32);}
.aii-send{
  flex:none;display:flex;align-items:center;gap:.3rem;padding:.6rem 1.05rem;border-radius:999px;
  font-size:.9rem;font-weight:800;color:#053a2c;
  background:linear-gradient(100deg,#63f2bb,#3fd8ff);
  box-shadow:0 .4rem 1rem rgba(63,216,255,.34);transition:transform .18s;
}
.aii-send:active{transform:scale(.95);}
.aii-send .ic{fill:currentColor;stroke:none;width:.9rem;height:.9rem;}

/* 打字机光标 */
.caret{display:inline-block;width:.5rem;height:1.05rem;background:#8ff0ff;
  vertical-align:-.16rem;margin-left:.2rem;animation:caret 1s steps(2) infinite;}
@keyframes caret{0%,50%{opacity:1;}51%,100%{opacity:0;}}

/* 远程调用失败走本地兜底时，把真实原因显示出来 */
.m-err{
  margin-top:.5rem;padding:.45rem .65rem;border-radius:.5rem;
  background:rgba(255,140,120,.12);border:1px solid rgba(255,140,120,.3);
  font-size:.74rem;line-height:1.6;color:#ffb3a3;word-break:break-all;
}

/* ── 竖屏/窄屏兜底：空间不够就退回上下排 ── */
@media (max-width:820px), (orientation:portrait){
  .ai-split{flex-direction:column;}
  .ai-left{flex:0 0 auto;flex-direction:row;align-items:center;gap:.8rem;padding:.6rem .8rem;}
  .ai-left .ai-stage{width:auto;flex:0 0 auto;}
  .ai-left .avatar{width:6.5rem;}
  .ai-left-foot{border-top:0;padding-top:0;text-align:left;width:auto;}
}