/* ============================================================
   小觅AI 品牌 IP —— 液态玻璃统一形象
   设计基准：球体直径 126px（与参考稿 1:1），所有内部尺寸用 --u 缩放。
   --xmip-size 只填「球体直径」，外圈光环、环境光会自动等比外扩，不会溢出容器。
   用法：
     <div class="xmip-figure">
       <div class="xmip" style="--xmip-size:150px" data-xmip-auto="6500">
         <span class="xmip-ring xmip-ring-1"></span>
         <span class="xmip-ring xmip-ring-2"></span>
         <button class="xmip-core" type="button" aria-label="和小觅打个招呼">
           <span class="xmip-face">
             <span class="xmip-eyes"><i></i><i></i></span>
             <span class="xmip-brow"><i></i><i></i></span>
             <span class="xmip-mouth"></span>
             <span class="xmip-cheek xmip-cheek-l"></span>
             <span class="xmip-cheek xmip-cheek-r"></span>
           </span>
           <span class="xmip-sparkles" aria-hidden="true"><i>✦</i><i>·</i><i>✦</i></span>
         </button>
       </div>
       <span class="xmip-caption">今天的小觅 · 很开心见到你</span>
     </div>
   ============================================================ */

.xmip,.xmip *{box-sizing:border-box}

.xmip-figure{display:flex;flex-direction:column;align-items:center}
.xmip-caption{
  margin-top:calc(7 * var(--u,1px));
  min-height:1.4em;
  font-size:.82rem;font-weight:500;letter-spacing:.02em;
  color:var(--ym-text-sub,#9c98a2);text-align:center;
  transition:opacity .25s;
}

/* 外框 = 球体 + 两道光环的呼吸空间（126 -> 182） */
.xmip{
  --xmip-size:126px;
  --xmip-ball:min(var(--xmip-size),56vw);
  --u:calc(var(--xmip-ball) / 126);
  position:relative;
  width:calc(var(--xmip-ball) * 1.45);
  height:calc(var(--xmip-ball) * 1.45);
  display:grid;place-items:center;
  flex:none;margin:0 auto;
}

/* 环境光（参考稿 .glow） */
.xmip::before{
  content:"";
  position:absolute;left:50%;top:50%;
  width:calc(260 * var(--u));height:calc(260 * var(--u));
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:
    radial-gradient(circle at 38% 40%,rgba(150,117,255,.17),transparent 30%),
    radial-gradient(circle at 65% 55%,rgba(255,107,145,.11),transparent 28%),
    radial-gradient(circle at 48% 70%,rgba(91,159,255,.10),transparent 30%);
  filter:blur(calc(22 * var(--u)));
  animation:xmipGlow 6s ease-in-out infinite;
  pointer-events:none;z-index:0;
}

/* 空间受限的容器里可以关掉环境光：data-xmip-glow="off" */
.xmip[data-xmip-glow="off"]::before{display:none}

/* 两道环绕光环 */
.xmip-ring{
  position:absolute;left:50%;top:50%;
  border-radius:50%;pointer-events:none;z-index:1;
  border:max(1px,calc(1 * var(--u))) solid rgba(255,255,255,.72);
}
.xmip-ring-1{
  width:calc(var(--xmip-ball) + 34 * var(--u));
  height:calc(var(--xmip-ball) + 34 * var(--u));
  border-top-color:rgba(150,117,255,.35);
  border-right-color:rgba(91,159,255,.25);
  animation:xmipOrbitA 17s linear infinite;
}
.xmip-ring-2{
  width:calc(var(--xmip-ball) + 56 * var(--u));
  height:calc(var(--xmip-ball) + 56 * var(--u));
  border-color:rgba(255,255,255,.48);
  border-bottom-color:rgba(255,107,145,.30);
  border-left-color:rgba(255,157,92,.20);
  animation:xmipOrbitB 25s linear infinite;
}

/* 本体：液态玻璃球 */
.xmip-core{
  position:relative;z-index:2;
  width:var(--xmip-ball);height:var(--xmip-ball);
  padding:0;margin:0;
  appearance:none;-webkit-appearance:none;
  border:max(1px,calc(5 * var(--u))) solid rgba(255,255,255,.48);
  border-radius:50%;
  background:linear-gradient(125deg,#a86cff 3%,#ff6b91 35%,#ff9d5c 63%,#5b9fff 93%);
  background-size:165% 165%;
  box-shadow:
    0 calc(22 * var(--u)) calc(45 * var(--u)) rgba(111,86,177,.18),
    inset 0 1px 2px rgba(255,255,255,.75),
    inset 0 calc(var(--u) * -10) calc(20 * var(--u)) rgba(255,255,255,.08);
  display:grid;place-items:center;
  cursor:pointer;outline:none;
  animation:xmipFlow 11s ease-in-out infinite, xmipBreath 5.5s ease-in-out infinite;
}
.xmip-core:hover{filter:brightness(1.04)}
.xmip-core:focus-visible{
  outline:max(2px,calc(3 * var(--u))) solid rgba(168,108,255,.55);
  outline-offset:calc(6 * var(--u));
}

/* 玻璃高光 */
.xmip-core::before{
  content:"";
  position:absolute;inset:calc(4 * var(--u));
  border-radius:50%;
  background:linear-gradient(135deg,rgba(255,255,255,.22),transparent 38%,rgba(255,255,255,.08));
  pointer-events:none;
}

/* ===== 五官（直接落在玻璃球上，无底板） ===== */
.xmip-face{
  position:relative;
  width:calc(59 * var(--u));height:calc(51 * var(--u));
  color:#fff;
  transition:transform .55s cubic-bezier(.2,.8,.2,1);
}
.xmip-eyes,.xmip-brow{
  position:absolute;display:flex;justify-content:space-between;
  transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .3s ease;
}
.xmip-eyes{left:calc(6 * var(--u));right:calc(6 * var(--u));top:calc(5 * var(--u))}
.xmip-eyes i{
  display:block;
  width:calc(8 * var(--u));height:calc(12 * var(--u));
  border-radius:calc(5 * var(--u));
  background:rgba(255,255,255,.95);
  transition:all .35s cubic-bezier(.2,.8,.2,1);
  animation:xmipBlink 5.2s ease-in-out infinite;
}
.xmip-eyes i:last-child{animation-delay:.1s}

.xmip-brow{left:calc(5 * var(--u));right:calc(5 * var(--u));top:calc(-1 * var(--u));opacity:0}
.xmip-brow i{
  display:block;
  width:calc(14 * var(--u));height:calc(6 * var(--u));
  border-top:max(1px,calc(2 * var(--u))) solid rgba(255,255,255,.9);
  border-radius:50%;
}

.xmip-mouth{
  position:absolute;left:50%;top:calc(29 * var(--u));
  width:calc(21 * var(--u));height:calc(9 * var(--u));
  transform:translateX(-50%);
  border:max(1px,calc(2 * var(--u))) solid #fff;border-top:0;
  border-radius:0 0 calc(20 * var(--u)) calc(20 * var(--u));
  transition:all .45s cubic-bezier(.2,.8,.2,1);
}

.xmip-cheek{
  position:absolute;top:calc(25 * var(--u));
  width:calc(8 * var(--u));height:calc(4 * var(--u));
  border-radius:50%;background:rgba(255,255,255,.28);
  opacity:0;transition:opacity .3s ease;
}
.xmip-cheek-l{left:calc(-2 * var(--u))}
.xmip-cheek-r{right:calc(-2 * var(--u))}

.xmip-sparkles{
  position:absolute;inset:0;pointer-events:none;
  color:rgba(255,255,255,.82);opacity:0;transition:opacity .4s;
}
.xmip-sparkles i{position:absolute;font-style:normal;line-height:1}
.xmip-sparkles i:nth-child(1){top:calc(5 * var(--u));right:calc(17 * var(--u));font-size:calc(10 * var(--u))}
.xmip-sparkles i:nth-child(2){bottom:calc(21 * var(--u));left:calc(8 * var(--u));font-size:calc(9 * var(--u))}
.xmip-sparkles i:nth-child(3){top:calc(27 * var(--u));left:calc(1 * var(--u));font-size:calc(7 * var(--u))}

/* ===== 动画 ===== */
@keyframes xmipFlow{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}
@keyframes xmipBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
@keyframes xmipGlow{0%,100%{transform:translate(-50%,-50%) scale(.92);opacity:.65}50%{transform:translate(-50%,-50%) scale(1.06);opacity:1}}
@keyframes xmipOrbitA{from{transform:translate(-50%,-50%) rotate(20deg)}to{transform:translate(-50%,-50%) rotate(380deg)}}
@keyframes xmipOrbitB{from{transform:translate(-50%,-50%) rotate(-20deg)}to{transform:translate(-50%,-50%) rotate(-380deg)}}
@keyframes xmipBlink{0%,89%,100%{transform:scaleY(1)}93%{transform:scaleY(.08)}}
@keyframes xmipPop{0%{transform:scale(1)}45%{transform:scale(1.075)}100%{transform:scale(1)}}
@keyframes xmipExcited{0%,100%{transform:scale(1)}50%{transform:scale(1.04) translateY(calc(var(--u) * -1))}}
@keyframes xmipTwinkle{0%,100%{opacity:.35;transform:scale(.9)}50%{opacity:1;transform:scale(1.08)}}

/* ===== 八种心情 ===== */
/* 开心 */
.xmip.emotion-happy .xmip-mouth{width:calc(22 * var(--u));height:calc(10 * var(--u))}
.xmip.emotion-happy .xmip-cheek{opacity:.5}

/* 好奇 */
.xmip.emotion-curious .xmip-face{transform:translateX(calc(1 * var(--u))) rotate(-1deg)}
.xmip.emotion-curious .xmip-eyes i{height:calc(14 * var(--u))}
.xmip.emotion-curious .xmip-mouth{width:calc(10 * var(--u));height:calc(10 * var(--u));border-radius:50%}
.xmip.emotion-curious .xmip-brow{opacity:.8}

/* 思考 */
.xmip.emotion-thinking .xmip-face{transform:translateY(calc(-2 * var(--u)))}
.xmip.emotion-thinking .xmip-eyes{transform:translate(calc(-3 * var(--u)),calc(-2 * var(--u)))}
.xmip.emotion-thinking .xmip-mouth{
  width:calc(12 * var(--u));height:calc(5 * var(--u));
  border:0;border-bottom:max(1px,calc(2 * var(--u))) solid #fff;border-radius:50%;
}
.xmip.emotion-thinking .xmip-brow{opacity:.55;transform:translateY(calc(-2 * var(--u)))}
.xmip.emotion-thinking .xmip-sparkles{opacity:.35}

/* 惊喜 */
.xmip.emotion-surprise .xmip-eyes i{width:calc(11 * var(--u));height:calc(15 * var(--u));border-radius:50%}
.xmip.emotion-surprise .xmip-mouth{width:calc(13 * var(--u));height:calc(13 * var(--u));border-radius:50%}
.xmip.emotion-surprise .xmip-sparkles{opacity:.8}
.xmip.emotion-surprise .xmip-core{
  animation:xmipFlow 7s ease-in-out infinite, xmipBreath 3.5s ease-in-out infinite, xmipExcited 1.4s ease-in-out infinite;
}

/* 温柔 */
.xmip.emotion-soft .xmip-face{transform:translateY(calc(2 * var(--u)))}
.xmip.emotion-soft .xmip-eyes i{height:calc(5 * var(--u));border-radius:50%;transform:scaleX(1.25)}
.xmip.emotion-soft .xmip-mouth{width:calc(20 * var(--u));height:calc(7 * var(--u))}
.xmip.emotion-soft .xmip-cheek{opacity:.42}

/* 调皮 */
.xmip.emotion-playful .xmip-face{transform:rotate(2deg)}
.xmip.emotion-playful .xmip-mouth{
  width:calc(17 * var(--u));height:calc(8 * var(--u));
  transform:translateX(-50%) rotate(-5deg);
}
.xmip.emotion-playful .xmip-sparkles{opacity:.5}

/* 安慰 */
.xmip.emotion-comfort .xmip-face{transform:translateY(calc(2 * var(--u)))}
.xmip.emotion-comfort .xmip-eyes{transform:translateY(calc(2 * var(--u)))}
.xmip.emotion-comfort .xmip-eyes i{height:calc(8 * var(--u));border-radius:calc(8 * var(--u)) calc(8 * var(--u)) calc(3 * var(--u)) calc(3 * var(--u))}
.xmip.emotion-comfort .xmip-mouth{
  width:calc(13 * var(--u));height:calc(4 * var(--u));
  border:0;border-bottom:max(1px,calc(2 * var(--u))) solid #fff;border-radius:50%;
}
.xmip.emotion-comfort .xmip-cheek{opacity:.25}

/* 灵感 */
.xmip.emotion-idea .xmip-face{transform:translateY(calc(-2 * var(--u)))}
.xmip.emotion-idea .xmip-eyes{transform:translateY(calc(-2 * var(--u)))}
.xmip.emotion-idea .xmip-mouth{width:calc(12 * var(--u));height:calc(9 * var(--u));border-radius:50%}
.xmip.emotion-idea .xmip-sparkles{opacity:1;animation:xmipTwinkle 1.5s ease-in-out infinite}

/* 切换心情时的弹一下 */
.xmip .xmip-core.emotion-pop{animation:xmipPop .55s cubic-bezier(.2,1.4,.4,1)}

@media(prefers-reduced-motion:reduce){
  .xmip::before,.xmip-ring,.xmip-core,.xmip-eyes i,.xmip-sparkles{animation:none!important}
  .xmip-face,.xmip-eyes,.xmip-brow,.xmip-mouth{transition:none!important}
}