:root{
  /* ===== サイズ ===== */
  --avatar-size: 220px;
  --avatar-radius: 18px;

  /* ===== 口位置（正方形前提なので固定化できる） ===== */
  --mouth-left: 50%;
  --mouth-top: 51%;

  --mouth-width: 28px;
}

/* =========================
   Dock
========================= */
#receptionDock{
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: var(--avatar-size);
  z-index: 99999;
}

/* =========================
   ★ 正方形固定
========================= */
.avatarCard{
  position: relative;

  width: 100%;
  aspect-ratio: 1 / 1;   /* ← ここが神 */

  overflow: hidden;
  border-radius: var(--avatar-radius);
  box-shadow: 0 10px 30px rgba(0,0,0,.3);

  transform-origin: 50% 80%;
}

/* =========================
   画像（正方形にフィット）
========================= */
.avatarCard img{
  width: 100%;
  height: 100%;

  object-fit: cover;     /* 正方形を埋める */
  object-position: center;

  display: block;
}

/* =========================
   Mouth
========================= */
#mouth{
  position:absolute;
  left:var(--mouth-left);
  top:var(--mouth-top);

  width:var(--mouth-width);
  height:14px;

  transform:translate(-50%,-50%);

  background:
    radial-gradient(ellipse at center,
      rgba(170,20,35,.95) 0%,
      rgba(170,20,35,.7) 55%,
      rgba(170,20,35,0) 100%);

  border-radius:999px;
  transition:.06s linear;
}

/* idle */
#receptionDock.isIdle #mouth{
  height:10px;
  transform:translate(-50%,-50%) scaleY(.6);
}

/* =========================
   idle animation
========================= */
#receptionDock.isIdle .avatarCard{
  animation:
    breath 3.5s ease-in-out infinite,
    sway 5s ease-in-out infinite;
}

@keyframes breath{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.01);}
}
@keyframes sway{
  0%,100%{rotate:0deg;}
  50%{rotate:-0.5deg;}
}

/* =========================
   Mobile
========================= */
@media(max-width:600px){
  :root{
    --avatar-size:160px;
  }
}