/* 表情画框：圆头像会把手势裁掉，改成圆角方框并放大，老人才看得清是在夸他还是在讲解 */
/* 画框类可以直接落在 img 上，也可以落在外层容器上；
   两种写法都要显式带上 img，否则会被页面里的 `.xxx img` 规则按更高特异性覆盖 */
.mood-frame,img.mood-frame{
  box-sizing:border-box;
  width:96px;
  height:96px;
  flex:0 0 auto;
  overflow:hidden;
  border:2px solid #fff;
  border-radius:24px;
  background:#fff;
  box-shadow:0 8px 20px rgba(35,79,64,.13);
}
.mood-frame>img,img.mood-frame{display:block;object-fit:cover;object-position:center top}
.mood-frame>img{width:100%;height:100%;border-radius:0}
html[data-elder-font-size="large"] .mood-frame,html[data-elder-font-size="large"] img.mood-frame{width:110px;height:110px}
html[data-elder-font-size="xlarge"] .mood-frame,html[data-elder-font-size="xlarge"] img.mood-frame{width:124px;height:124px;border-radius:28px}
@media(max-width:860px){
  .mood-frame,img.mood-frame{width:86px;height:86px;border-radius:21px}
  html[data-elder-font-size="large"] .mood-frame,html[data-elder-font-size="large"] img.mood-frame{width:98px;height:98px}
  html[data-elder-font-size="xlarge"] .mood-frame,html[data-elder-font-size="xlarge"] img.mood-frame{width:110px;height:110px}
}

/* 艾莉表情切换：仅交叉淡入，不缩放或位移 */
[data-alice-mood]{transition:opacity .26s ease}
[data-alice-mood].mood-out{opacity:0}
[data-alice-mood].mood-cheer{animation:aliceMoodCheer .62s ease both}
@keyframes aliceMoodCheer{
  0%{opacity:.45}
  100%{opacity:1}
}
@media(prefers-reduced-motion:reduce){
  [data-alice-mood]{transition:none}
  [data-alice-mood].mood-out{opacity:1;transform:none}
  [data-alice-mood].mood-cheer{animation:none}
}