/* MiiMochi Golden Master chat renderer v2
   Classes belong on the head root. Child primitives follow.
   Layout is scoped to assistant rows only. */

.message.assistant{position:relative}
.message.assistant .miimochi-row{display:flex;align-items:flex-start;gap:10px}
.message.assistant .miimochi-row>.bubble{min-width:0;flex:1}

.miimochi-head{
  --mm-ink:#111;
  --mm-skin:#f4f1ea;
  --mm-intensity:.22;
  position:relative;
  display:inline-block;
  flex:0 0 40px;
  width:40px;
  height:40px;
  pointer-events:none;
  user-select:none;
  contain:layout paint style;
}

.miimochi-head .mm-body{
  position:absolute;
  left:3px;right:3px;top:6px;bottom:4px;
  background:var(--mm-skin);
  border:1px solid rgba(28,24,20,.12);
  border-radius:48% 52% 46% 50% / 58% 56% 42% 40%;
  box-shadow:0 1px 2px rgba(20,16,12,.08), inset 0 1px 1px rgba(255,255,255,.7);
  transform-origin:50% 72%;
}

.miimochi-head .face-brow,
.miimochi-head .face-eye,
.miimochi-head .face-nose,
.miimochi-head .face-mouth{
  position:absolute;
  display:block;
  box-sizing:border-box;
}

/* ---- Brows 1–8 (root class) ---- */
.miimochi-head .face-brow{
  top:7px;width:8px;height:2px;background:var(--mm-ink);border-radius:2px;
}
.miimochi-head .face-brow.a{left:6px}
.miimochi-head .face-brow.b{right:6px}
.miimochi-head.brow-1 .face-brow{top:7px;transform:none;opacity:1}
.miimochi-head.brow-2 .face-brow.a{transform:rotate(18deg);top:8px}
.miimochi-head.brow-2 .face-brow.b{transform:rotate(-18deg);top:8px}
.miimochi-head.brow-3 .face-brow.a{transform:rotate(-28deg);top:6px;left:7px}
.miimochi-head.brow-3 .face-brow.b{transform:rotate(28deg);top:6px;right:7px}
.miimochi-head.brow-4 .face-brow{top:5px;height:2px;width:7px}
.miimochi-head.brow-4 .face-brow.a{transform:rotate(-12deg)}
.miimochi-head.brow-4 .face-brow.b{transform:rotate(12deg)}
.miimochi-head.brow-5 .face-brow{width:9px;height:2px;top:6px}
.miimochi-head.brow-5 .face-brow.a{transform:rotate(-16deg);left:5px}
.miimochi-head.brow-5 .face-brow.b{transform:rotate(16deg);right:5px}
.miimochi-head.brow-6 .face-brow.a{top:5px;transform:rotate(-22deg);width:8px}
.miimochi-head.brow-6 .face-brow.b{top:8px;transform:none;height:1.5px;opacity:.85}
.miimochi-head.brow-7 .face-brow{top:9px;height:1.5px;opacity:.55;width:7px}
.miimochi-head.brow-8 .face-brow{top:4px;width:9px;height:2.5px}
.miimochi-head.brow-8 .face-brow.a{transform:rotate(-34deg);left:5px}
.miimochi-head.brow-8 .face-brow.b{transform:rotate(34deg);right:5px}

/* ---- Eyes 1–8: both .face-eye.a/.b follow the root ---- */
.miimochi-head .face-eye{
  top:11px;width:7px;height:8px;background:#000;border-radius:50%;overflow:hidden;
}
.miimochi-head .face-eye.a{left:7px}
.miimochi-head .face-eye.b{right:7px}
.miimochi-head.eye-1 .face-eye{width:7px;height:8px;background:#000}
.miimochi-head .face-eye i{
  position:absolute;top:1px;left:1px;width:2px;height:2px;border-radius:50%;background:#fff;display:block;
}
.miimochi-head .face-eye.b i{left:auto;right:1px}

.miimochi-head.eye-2 .face-eye{
  height:4px;width:8px;top:13px;background:transparent;border:0;border-bottom:2px solid #000;
  border-radius:0 0 50% 50%;overflow:visible;
}
.miimochi-head.eye-2 .face-eye i{display:none}

.miimochi-head.eye-3 .face-eye{width:8px;height:11px;top:9px;background:#000}
.miimochi-head.eye-3 .face-eye i{width:2px;height:2px;top:4px;left:3px}

.miimochi-head.eye-4 .face-eye{width:7px;height:7px;top:10px;background:#000}
.miimochi-head.eye-4 .face-eye i{top:0;left:2px;width:3px;height:2px}

.miimochi-head.eye-5 .face-eye{
  width:8px;height:8px;top:11px;background:transparent;border:2px solid #000;border-radius:50%;overflow:visible;
}
.miimochi-head.eye-5 .face-eye i{
  inset:1px;width:auto;height:auto;background:transparent;border:1px solid #000;border-right-color:transparent;top:1px;left:1px;
}

.miimochi-head.eye-6 .face-eye{width:8px;height:8px;top:11px;background:transparent;overflow:visible;border-radius:0}
.miimochi-head.eye-6 .face-eye i{display:none}
.miimochi-head.eye-6 .face-eye::before,
.miimochi-head.eye-6 .face-eye::after{
  content:"";position:absolute;left:3px;top:0;width:2px;height:8px;background:#000;border-radius:1px;
}
.miimochi-head.eye-6 .face-eye::before{transform:rotate(45deg)}
.miimochi-head.eye-6 .face-eye::after{transform:rotate(-45deg)}

.miimochi-head.eye-7 .face-eye{width:3px;height:3px;top:15px;background:#000;border-radius:50%}
.miimochi-head.eye-7 .face-eye.a{left:10px}
.miimochi-head.eye-7 .face-eye.b{right:10px}
.miimochi-head.eye-7 .face-eye i{display:none}

.miimochi-head.eye-8 .face-eye{
  width:8px;height:9px;top:10px;background:#000;border-radius:0;
  clip-path:polygon(50% 0,62% 28%,100% 20%,72% 52%,92% 100%,50% 74%,8% 100%,28% 52%,0 20%,38% 28%);
}
.miimochi-head.eye-8 .face-eye i{display:none}

/* ---- Noses 1–8 ---- */
.miimochi-head .face-nose{
  left:50%;top:17px;width:3px;height:3px;margin-left:-1.5px;background:var(--mm-ink);border-radius:50%;
}
.miimochi-head.nose-1 .face-nose{width:3px;height:3px;opacity:1}
.miimochi-head.nose-2 .face-nose{
  width:0;height:0;background:transparent;border-left:2px solid transparent;border-right:2px solid transparent;
  border-bottom:4px solid var(--mm-ink);border-radius:0;margin-left:-2px;
}
.miimochi-head.nose-3 .face-nose{width:4px;height:4px;margin-left:-2px;border-radius:50%}
.miimochi-head.nose-4 .face-nose{
  width:4px;height:5px;border-radius:0 70% 40% 70%;margin-left:-1px;top:16px;
}
.miimochi-head.nose-5 .face-nose{opacity:.18;width:2px;height:2px;margin-left:-1px}
.miimochi-head.nose-6 .face-nose{width:5px;height:4px;margin-left:0;left:54%;border-radius:46%}
.miimochi-head.nose-7 .face-nose{
  width:0;height:0;background:transparent;border-left:2px solid transparent;border-right:2px solid transparent;
  border-top:4px solid var(--mm-ink);border-radius:0;margin-left:-2px;top:18px;
}
.miimochi-head.nose-8 .face-nose{width:2px;height:7px;border-radius:2px;top:15px;margin-left:-1px}

/* ---- Mouths 1–8 ---- */
.miimochi-head .face-mouth{
  left:50%;bottom:6px;width:10px;height:2px;margin-left:-5px;background:var(--mm-ink);border-radius:2px;
}
.miimochi-head.mouth-1 .face-mouth{width:10px;height:2px;transform:none}
.miimochi-head.mouth-2 .face-mouth{
  height:5px;background:transparent;border:0;border-bottom:2px solid var(--mm-ink);
  border-radius:0 0 50% 50%;width:11px;margin-left:-5.5px;
}
.miimochi-head.mouth-3 .face-mouth{
  width:8px;height:5px;margin-left:-4px;border-radius:0 0 6px 6px;background:var(--mm-ink);
}
.miimochi-head.mouth-3 .face-mouth::after{
  content:"";position:absolute;left:1px;right:1px;top:1px;height:1px;background:rgba(244,241,234,.85);
}
.miimochi-head.mouth-4 .face-mouth{
  height:5px;background:transparent;border:0;border-top:2px solid var(--mm-ink);
  border-radius:50% 50% 0 0;width:11px;margin-left:-5.5px;bottom:5px;
}
.miimochi-head.mouth-5 .face-mouth{width:6px;height:3px;margin-left:-3px;border-radius:1px}
.miimochi-head.mouth-6 .face-mouth{
  width:6px;height:6px;margin-left:-3px;border-radius:50%;background:transparent;border:2px solid var(--mm-ink);bottom:4px;
}
.miimochi-head.mouth-7 .face-mouth{width:9px;transform:rotate(-12deg);margin-left:-3px;height:2px}
.miimochi-head.mouth-8 .face-mouth{
  height:4px;width:12px;margin-left:-6px;background:transparent;
  border:0;border-bottom:2px solid var(--mm-ink);border-radius:40% 0 50% 50%;
}

/* base_state only tints posture, never replaces parts */
.miimochi-head.state-sad .mm-body{top:8px;bottom:3px}
.miimochi-head.state-anger .mm-body{transform:scaleX(.98)}
.miimochi-head.state-joy .mm-body,
.miimochi-head.state-happy .mm-body{top:5px}

/* ---- Motion on body only. Face classes stay. ---- */
@keyframes mmIdle{0%,100%{transform:translateY(0)}50%{transform:translateY(.3px)}}
@keyframes mmListen{0%,100%{transform:rotate(3deg)}50%{transform:rotate(5deg)}}
@keyframes mmThink{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes mmSpeak{0%,100%{transform:translateY(0)}40%{transform:translateY(.6px)}}
@keyframes mmNod{0%,100%{transform:rotate(0)}40%{transform:rotate(4deg) translateY(.5px)}}
@keyframes mmConcern{0%,100%{transform:translateY(.4px) rotate(.6deg)}50%{transform:translateY(.7px)}}
@keyframes mmTense{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.97)}}
@keyframes mmLift{0%,100%{transform:translateY(0)}50%{transform:translateY(-1px)}}
@keyframes mmHesitate{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@keyframes mmBlink{
  0%,92%,100%{transform:scaleY(1)}
  96%{transform:scaleY(.08)}
}

.miimochi-head.gesture-idle .mm-body{animation:mmIdle 5.6s ease-in-out infinite}
.miimochi-head.gesture-listening .mm-body{animation:mmListen 3.8s ease-in-out infinite}
.miimochi-head.gesture-thinking .mm-body{animation:mmThink 2.8s ease-in-out infinite}
.miimochi-head.gesture-speaking .mm-body{animation:mmSpeak .9s ease-in-out 2}
.miimochi-head.gesture-nodding .mm-body,
.miimochi-head.gesture-agreeing .mm-body{animation:mmNod 1.2s ease-in-out 2}
.miimochi-head.gesture-concerned .mm-body{animation:mmConcern 4.4s ease-in-out infinite}
.miimochi-head.gesture-tense .mm-body{animation:mmTense 2.4s ease-in-out infinite}
.miimochi-head.gesture-celebrating .mm-body{animation:mmLift 1.5s ease-in-out 2}
.miimochi-head.gesture-hesitating .mm-body{animation:mmHesitate 2.6s ease-in-out infinite}
.miimochi-head.gesture-surprised .mm-body{transform:translateY(-1px)}
.miimochi-head.gesture-recovering .mm-body{animation:mmIdle 6.2s ease-in-out infinite}

.miimochi-head.gesture-idle .face-eye,
.miimochi-head.gesture-listening .face-eye{
  animation:mmBlink 5.8s ease-in-out infinite;
  transform-origin:center;
}

.miimochi-head.motion-still .mm-body,
.miimochi-head.motion-still .face-eye{animation:none!important}
.miimochi-head.motion-slow .mm-body{animation-duration:6.4s}
.miimochi-head.motion-quick .mm-body{animation-duration:2.2s}

/* Final black-eye lock. White is highlight-only. */
.miimochi-head .face-eye{
  background-color:#000;
  border-color:#000;
}
.miimochi-head.eye-1 .face-eye,
.miimochi-head.eye-3 .face-eye,
.miimochi-head.eye-4 .face-eye,
.miimochi-head.eye-7 .face-eye,
.miimochi-head.eye-8 .face-eye{
  background:#000!important;
  border-color:#000!important;
}
.miimochi-head.eye-2 .face-eye,
.miimochi-head.eye-5 .face-eye,
.miimochi-head.eye-6 .face-eye{
  background:transparent!important;
}
.miimochi-head .face-eye i{background:#fff!important}
.miimochi-head.eye-5 .face-eye i{background:transparent!important}

@media (max-width:390px){
  .message.assistant .miimochi-row{gap:8px}
  .miimochi-head{flex-basis:36px;width:36px;height:36px}
}

@media (prefers-reduced-motion: reduce){
  .miimochi-head .mm-body,
  .miimochi-head .face-eye,
  .miimochi-head .face-brow{
    animation:none!important;
    transition:none!important;
    transform:none!important;
  }
}