@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500&display=swap');
*{margin:0;padding:0;box-sizing:border-box}

/* ============================================================
   小精灵形象 v2 —— 蓝紫梦幻配色，圆润萌系，动画克制舒缓
   尺寸保持与原版一致（舞台 84×96），仅重做视觉与节奏
   ============================================================ */

/* ====== 浮动容器 ====== */
.sprite-widget{position:fixed;bottom:30px;right:30px;z-index:99999;transition:transform .5s cubic-bezier(.23,1,.32,1);font-family:'Noto Sans SC', sans-serif}
.sprite-widget.edge-hide-left{transform:translateX(calc(100% - 14px))}
.sprite-widget.edge-hide-right{transform:translateX(calc(-100% + 14px))}
.sprite-stage{perspective:450px;width:84px;height:96px;position:relative;cursor:pointer;transition:filter .35s ease}
.sprite-wrap{width:100%;height:100%;transform-style:preserve-3d;position:relative;transition:transform .5s cubic-bezier(.23,1,.32,1)}

/* ====== 头顶 AI 天线：细杆 + 暖金发光球（不改变舞台尺寸） ====== */
.sprite-stage::before{content:'';position:absolute;top:4px;left:50%;width:1.5px;height:6px;background:linear-gradient(180deg,#fbbf24,rgba(99,102,241,.5));transform:translateX(-50%);z-index:3;border-radius:1px;pointer-events:none}
.sprite-stage::after{content:'';position:absolute;top:0;left:50%;width:4px;height:4px;background:radial-gradient(circle at 35% 30%,#fef9c3,#fbbf24 50%,#d97706);border-radius:50%;transform:translateX(-50%);box-shadow:0 0 5px rgba(251,191,36,.85),0 0 11px rgba(251,191,36,.35);z-index:4;pointer-events:none;animation:antennaGlow 4s ease-in-out infinite}
/* 天线脉冲：4秒一个周期，缓慢柔和 */
@keyframes antennaGlow{0%,100%{opacity:.7;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.3)}}

/* ====== 身体 (36×39px) —— 蓝紫梦幻渐变，更圆润饱满 ====== */
.sprite-body{width:36px;height:39px;background:linear-gradient(160deg,#c7d2fe 0%,#a5b4fc 20%,#818cf8 50%,#6366f1 100%);border-radius:50% 50% 46% 46%/44% 44% 56% 56%;position:absolute;bottom:18px;left:50%;transform:translateX(-50%);border:.75px solid rgba(79,70,229,.4);box-shadow:inset -3px -4px 8px rgba(55,48,163,.3),inset 2px 2px 6px rgba(255,255,255,.45),0 4px 14px rgba(99,102,241,.4);transform-style:preserve-3d;z-index:2;overflow:visible}
/* 顶部柔和高光 */
.sprite-body::before{content:'';position:absolute;width:21px;height:10.5px;background:radial-gradient(ellipse at 50% 40%,rgba(255,255,255,.55),rgba(255,255,255,0) 70%);top:3px;left:50%;transform:translateX(-50%);border-radius:50%;pointer-events:none}
/* 右下反光，增强立体感 */
.sprite-body::after{content:'';position:absolute;width:7.5px;height:10.5px;background:radial-gradient(ellipse at 30% 30%,rgba(199,210,254,.5),transparent 70%);bottom:5px;right:3px;border-radius:50%;pointer-events:none}

/* ====== 脸部 (27×24px) ====== */
.sprite-face{position:absolute;top:6px;left:50%;transform:translateX(-50%);width:27px;height:24px}
.sprite-eyes{display:flex;justify-content:center;gap:6px;margin-top:2.5px}
/* 眼睛：更大更圆更萌 */
.sprite-eye{width:8px;height:8px;background:radial-gradient(circle at 50% 40%,#fff,#f0f0ff);border-radius:50%;position:relative;box-shadow:inset 0 1px 1.5px rgba(55,48,163,.15),0 0 1px rgba(255,255,255,.5);overflow:hidden}
.sprite-pupil{width:4.5px;height:4.5px;background:radial-gradient(circle at 38% 32%,#4c1d95 0%,#1e1b4b 75%);border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);transition:transform .3s ease}
/* 瞳孔双高光：主高光(左上) + 副高光(右下小点) */
.sprite-pupil::after{content:'';width:2px;height:2px;background:#fff;border-radius:50%;position:absolute;top:.5px;left:.5px}
.sprite-eye-lid{position:absolute;top:-1.5px;left:-1.5px;right:-1.5px;height:0;background:linear-gradient(180deg,#818cf8,#6366f1);border-radius:50% 50% 0 0;transition:height .08s ease;z-index:1}
.sprite-blink .sprite-eye-lid{height:9px}
.sprite-mouth{width:4.5px;height:3px;border-bottom:1.5px solid #4c1d95;border-radius:0 0 50% 50%;margin:3px auto 0;transition:all .3s ease}
.sprite-blush{display:flex;justify-content:space-between;padding:0 1.5px;margin-top:1.5px}
.sprite-blush-dot{width:4.5px;height:3px;background:radial-gradient(ellipse,rgba(244,114,182,.4),rgba(244,114,182,0) 75%);border-radius:50%}

/* ====== 手臂 (7.5×15px) ====== */
.sprite-arm{position:absolute;width:7.5px;height:15px;background:linear-gradient(180deg,#a5b4fc,#818cf8 70%,#6366f1);border-radius:4.5px;top:12px;z-index:-1;transform-origin:top center;transition:transform .4s cubic-bezier(.23,1,.32,1);box-shadow:inset -1.5px 0 3px rgba(55,48,163,.15)}
.sprite-arm::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:6px;height:6px;background:radial-gradient(circle at 35% 30%,#a5b4fc,#818cf8);border-radius:50%}
.sprite-arm-left{left:-4.5px;transform:rotate(5deg)}
.sprite-arm-right{right:-4.5px;transform:rotate(-5deg)}

/* ====== 腿 (7.5×10.5px) ====== */
.sprite-legs{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:4.5px;z-index:1}
.sprite-leg{width:7.5px;height:10.5px;background:linear-gradient(180deg,#818cf8,#6366f1);border-radius:3px 3px 4.5px 4.5px}
.sprite-leg::after{content:'';position:absolute;bottom:-1.5px;left:50%;transform:translateX(-50%);width:9px;height:3px;background:#4f46e5;border-radius:50%}

/* ====== 地面阴影 (30×4.5px) —— 更柔和 ====== */
.sprite-shadow{width:30px;height:4.5px;background:radial-gradient(ellipse,rgba(55,48,163,.22),rgba(55,48,163,0) 70%);border-radius:50%;position:absolute;bottom:15px;left:50%;transform:translateX(-50%);z-index:0;transition:all .4s ease;filter:blur(.5px)}

/* ====== 光晕 (42×9px) —— 紫色梦幻光环，5秒缓慢脉冲 ====== */
.sprite-glow{position:absolute;bottom:9px;left:50%;transform:translateX(-50%);width:42px;height:9px;border-radius:50%;background:radial-gradient(ellipse,rgba(129,140,248,.28),rgba(129,140,248,0) 70%);z-index:0;filter:blur(3px);animation:glowPulse 5s ease-in-out infinite}
@keyframes glowPulse{0%,100%{opacity:.6;transform:translateX(-50%) scale(1)}50%{opacity:.95;transform:translateX(-50%) scale(1.08)}}

/* ====== 闪光粒子（减少使用频率，仅切换状态时少量出现） ====== */
.sprite-sparkles{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:10}
.sprite-sparkle{position:absolute;width:2px;height:2px;background:#fde68a;border-radius:50%;opacity:0;box-shadow:0 0 3px #fde68a,0 0 6px rgba(253,230,138,.4)}

/* ====== 思考气泡 ====== */
.sprite-thought{position:absolute;top:-3px;left:-21px;opacity:0;transition:opacity .4s ease;pointer-events:none;z-index:5}
.sprite-thought.show{opacity:1}
.sprite-thought-dot{width:3px;height:3px;background:rgba(255,255,255,.65);border-radius:50%;position:absolute;bottom:0;right:0}
.sprite-thought-dot:nth-child(2){width:4.5px;height:4.5px;bottom:4.5px;right:4.5px}
.sprite-thought-cloud{width:18px;height:15px;background:rgba(255,255,255,.88);border-radius:50%;position:absolute;bottom:7.5px;right:7.5px;display:flex;align-items:center;justify-content:center;font-size:7.5px;box-shadow:0 2px 6px rgba(0,0,0,.12)}

/* ====== 喜欢爱心 ====== */
.sprite-like-hearts{position:absolute;top:-12px;left:50%;transform:translateX(-50%);z-index:10;pointer-events:none}
.sprite-heart{position:absolute;color:#f472b6;font-size:9px;opacity:0;animation:none}
.sprite-heart.pop{animation:heartPop 1s ease-out forwards}
@keyframes heartPop{0%{opacity:1;transform:translateY(0) scale(0)}30%{transform:translateY(-12px) scale(1.2)}100%{opacity:0;transform:translateY(-36px) scale(.6)}}

/* ====== IDLE 待机：纯呼吸 + 轻浮动（去掉摇摆，更安静） ======
   呼吸 5s / 浮动 6s —— 舒缓不频繁                            */
@keyframes breathe{0%,100%{transform:translateX(-50%) scaleY(1)}50%{transform:translateX(-50%) scaleY(1.035)}}
@keyframes shadowPulse{0%,100%{transform:translateX(-50%) scaleX(1)}50%{transform:translateX(-50%) scaleX(.92)}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.5px)}}
@keyframes blinkAnim{0%,42%,46%,100%{height:0}44%{height:6px}}
.sprite-idle .sprite-body{animation:breathe 5s ease-in-out infinite}
.sprite-idle .sprite-shadow{animation:shadowPulse 5s ease-in-out infinite}
.sprite-idle .sprite-wrap{animation:floatY 6s ease-in-out infinite}
.sprite-idle .sprite-eye-lid{animation:blinkAnim 6s ease-in-out infinite}

/* ====== GREET 打招呼：挥手 + 轻跳（适度，不过度夸张） ====== */
@keyframes wave{0%,100%{transform:rotate(-3deg)}15%{transform:rotate(-65deg)}30%{transform:rotate(-40deg)}45%{transform:rotate(-65deg)}60%{transform:rotate(-40deg)}75%{transform:rotate(-65deg)}90%{transform:rotate(-40deg)}}
@keyframes greetJump{0%,100%{transform:translateY(0)}20%{transform:translateY(-9px)}40%{transform:translateY(0)}55%{transform:translateY(-5px)}70%{transform:translateY(0)}}
@keyframes greetBounce{0%,100%{transform:translateX(-50%) scaleX(1) scaleY(1)}20%{transform:translateX(-50%) scaleX(.94) scaleY(1.08)}40%{transform:translateX(-50%) scaleX(1.02) scaleY(.95)}55%{transform:translateX(-50%) scaleX(.97) scaleY(1.04)}70%{transform:translateX(-50%) scaleX(1) scaleY(1)}}
.sprite-greet .sprite-arm-right{animation:wave 1.5s ease-in-out infinite}
.sprite-greet .sprite-wrap{animation:greetJump 1.5s ease-in-out infinite}
.sprite-greet .sprite-body{animation:greetBounce 1.5s ease-in-out infinite}
.sprite-greet .sprite-mouth{width:6px;height:4.5px;border-radius:0 0 50% 50%}
.sprite-greet .sprite-eye-lid{animation:blinkAnim 6s ease-in-out infinite}

/* ====== LIKE 喜欢：点赞 + 柔和弹跳 ====== */
@keyframes thumbsUp{0%,100%{transform:rotate(-3deg)}20%{transform:rotate(-130deg) translateY(-4.5px)}40%,80%{transform:rotate(-130deg) translateY(-4.5px)}60%{transform:rotate(-140deg) translateY(-7.5px)}}
@keyframes likeBounce{0%,100%{transform:translateY(0) scaleY(1)}30%{transform:translateY(-7px) scaleY(1.05)}45%{transform:translateY(0) scaleY(.97)}60%{transform:translateY(-3px) scaleY(1.02)}}
.sprite-like .sprite-arm-right{animation:thumbsUp 2s ease-in-out infinite}
.sprite-like .sprite-wrap{animation:likeBounce 1.2s ease-in-out infinite}
.sprite-like .sprite-mouth{width:6px;height:4.5px;border-radius:0 0 50% 50%}
.sprite-like .sprite-blush-dot{background:radial-gradient(ellipse,rgba(244,114,182,.55),rgba(244,114,182,0) 75%)}
.sprite-like .sprite-eye-lid{animation:blinkAnim 5s ease-in-out infinite}

/* ====== THINK 思考：摸下巴 + 微倾 + 眼神上飘 ====== */
@keyframes thinkTilt{0%,100%{transform:translateX(-50%) rotate(0)}50%{transform:translateX(-50%) rotate(-5deg)}}
@keyframes thinkArm{0%,100%{transform:rotate(3deg)}30%,70%{transform:rotate(25deg) translateY(-3px)}}
@keyframes thinkPupil{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,-72%)}}
@keyframes thoughtFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-3px) scale(1.06)}}
.sprite-think .sprite-body{animation:thinkTilt 3s ease-in-out infinite}
.sprite-think .sprite-arm-left{animation:thinkArm 3s ease-in-out infinite}
.sprite-think .sprite-pupil{animation:thinkPupil 2.5s ease-in-out infinite}
.sprite-think .sprite-mouth{width:2px;height:2px;border:1px solid #4c1d95;border-radius:50%;background:transparent}
.sprite-think .sprite-thought{opacity:1}
.sprite-think .sprite-thought-cloud{animation:thoughtFloat 2s ease-in-out infinite}
.sprite-think .sprite-eye-lid{animation:blinkAnim 7s ease-in-out infinite}

/* ====== 边界半隐藏：保持安静呼吸浮动 ====== */
.edge-hide-left .sprite-body,.edge-hide-right .sprite-body{animation:breathe 5s ease-in-out infinite}
.edge-hide-left .sprite-eye-lid,.edge-hide-right .sprite-eye-lid{animation:blinkAnim 7s ease-in-out infinite}
.edge-hide-left .sprite-wrap,.edge-hide-right .sprite-wrap{animation:floatY 6s ease-in-out infinite}

/* ====== HOVER 悬停：轻微提亮发光 + 笑脸（克制，不蹦跳） ====== */
.sprite-stage:hover{filter:brightness(1.08) drop-shadow(0 0 6px rgba(129,140,248,.5))}
.sprite-stage:hover .sprite-mouth{width:6px;height:4.5px;border-radius:0 0 50% 50%}
.sprite-stage:hover .sprite-blush-dot{background:radial-gradient(ellipse,rgba(244,114,182,.5),rgba(244,114,182,0) 75%)}

/* ====== 聊天对话框（玻璃质感） ====== */
.sprite-dialog{position:absolute;bottom:calc(100% + 10px);right:0;width:480px;background:rgba(30,27,75,.94);backdrop-filter:blur(14px);border:1px solid rgba(129,140,248,.18);border-radius:16px;box-shadow:0 8px 32px rgba(0,0,0,.5),0 0 0 1px rgba(129,140,248,.1);opacity:0;transform:translateY(6px) scale(.95);transition:all .3s cubic-bezier(.23,1,.32,1);pointer-events:none;display:flex;flex-direction:column;max-height:600px}
.sprite-dialog.show{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.sprite-dialog::after{content:'';position:absolute;bottom:-5px;right:18px;width:10px;height:10px;background:rgba(30,27,75,.94);border-right:1px solid rgba(129,140,248,.18);border-bottom:1px solid rgba(129,140,248,.18);transform:rotate(45deg)}
.sprite-dialog-header{color:#e0e7ff;font-size:12px;font-weight:600;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.06);display:flex;justify-content:space-between;align-items:center;background:linear-gradient(90deg,rgba(129,140,248,.15),transparent)}
.sprite-dialog-close{background:none;border:none;color:rgba(255,255,255,.6);cursor:pointer;font-size:14px;padding:0 4px;border-radius:4px;transition:all .2s ease}
.sprite-dialog-close:hover{color:#fff;background:rgba(255,255,255,.1)}
.sprite-dialog-messages{padding:12px;flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px;min-height:300px;max-height:450px}
.sprite-msg{font-size:14px;line-height:1.6;padding:10px 14px;border-radius:12px;max-width:85%}
.sprite-msg-user{align-self:flex-end;background:rgba(129,140,248,.22);color:#e0e7ff;border-bottom-right-radius:4px}
.sprite-msg-bot{align-self:flex-start;background:rgba(255,255,255,.1);color:#e2e8f0;border-bottom-left-radius:4px}
.sprite-msg-loading{color:rgba(255,255,255,.5);font-style:italic;align-self:flex-start}

/* 富文本样式 */
.sprite-msg h1,
.sprite-msg h2,
.sprite-msg h3,
.sprite-msg h4 {
  margin: 8px 0;
  font-weight: 600;
  color: #a5b4fc;
}
.sprite-msg h1 { font-size: 18px; }
.sprite-msg h2 { font-size: 17px; }
.sprite-msg h3 { font-size: 16px; }
.sprite-msg h4 { font-size: 15px; }

.sprite-msg strong {
  font-weight: 600;
  color: #fde68a;
}

.sprite-msg em {
  font-style: italic;
  color: #c4b5fd;
}

.sprite-msg code {
  background: rgba(0,0,0,.3);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: monospace;
  color: #6ee7b7;
  font-size: 13px;
}

.sprite-msg pre {
  background: rgba(0,0,0,.3);
  padding: 10px;
  border-radius: 8px;
  overflow-x: auto;
  margin: 8px 0;
  border-left: 3px solid #818cf8;
}

.sprite-msg pre code {
  background: none;
  padding: 0;
  border-radius: 0;
}

.sprite-msg ul,
.sprite-msg ol {
  margin: 8px 0;
  padding-left: 20px;
  text-align: left;
}
.sprite-msg li {
  margin: 4px 0;
}

.sprite-msg img {
  max-width: 100%;
  border-radius: 8px;
  margin: 8px 0;
  border: 1px solid rgba(255,255,255,.1);
}

.sprite-msg a {
  color: #a5b4fc;
  text-decoration: underline;
}

.sprite-msg .red-text { color: #f87171; }
.sprite-msg .green-text { color: #4ade80; }
.sprite-msg .blue-text { color: #60a5fa; }
.sprite-msg .yellow-text { color: #facc15; }
.sprite-msg .purple-text { color: #c084fc; }
.sprite-msg .orange-text { color: #fb923c; }
.sprite-dialog-input{display:flex;gap:6px;padding:10px;border-top:1px solid rgba(255,255,255,.06)}
.sprite-dialog-input input{flex:1;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:6px 10px;color:#fff;font-size:12px;outline:none;transition:border .2s ease}
.sprite-dialog-input input:focus{border-color:#818cf8}
.sprite-dialog-input button{background:#818cf8;border:none;border-radius:8px;padding:6px 12px;color:#fff;font-size:12px;cursor:pointer;transition:background .2s ease}
.sprite-dialog-input button:hover{background:#6366f1}
.sprite-dialog-input button:disabled{background:#4f46e5;opacity:.6;cursor:not-allowed}

/* 自定义滚动条 */
.sprite-dialog-messages::-webkit-scrollbar {
  width: 6px;
}
.sprite-dialog-messages::-webkit-scrollbar-track {
  background: rgba(30,27,75,.94);
  border-radius: 3px;
}
.sprite-dialog-messages::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.15);
  border-radius: 3px;
  transition: background .2s ease;
}
.sprite-dialog-messages::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,.25);
}
.sprite-dialog-messages::-webkit-scrollbar-corner {
  background: rgba(30,27,75,.94);
}

/* ====== 移动端适配：浮动元素避开底部导航栏 ====== */
@media (max-width: 768px) {
  /* 小精灵：缩小并上移至底部导航栏上方 */
  .sprite-widget {
    bottom: 64px;
    right: 12px;
    transform: scale(0.72);
    transform-origin: bottom right;
    z-index: 998;
  }
  /* 边界隐藏时同样缩放 */
  .sprite-widget.edge-hide-left { transform: scale(0.72) translateX(calc(100% - 14px)); }
  .sprite-widget.edge-hide-right { transform: scale(0.72) translateX(calc(-100% + 14px)); }
  /* 对话框：全宽适配 */
  .sprite-dialog {
    width: calc(100vw - 24px);
    right: -8px;
    max-height: 60vh;
  }
  .sprite-dialog-messages { min-height: 200px; max-height: 40vh; }
}