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

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

  --mouth-width: 20px;
}

/* =========================
   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 5px 30px rgba(0,0,0,.3);

  transform-origin: 50% 80%;
}

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

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

  display: block;
}

:root{
  /* ===== サイズ ===== */
  --avatar-size: 180px;
  --avatar-radius: 3px;

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

  --mouth-width: 16px;
}

/* =========================
   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 5px 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:5px;

  transform:translate(-50%,-50%);
  border-radius:999px;
  transition:.06s linear;

  /* 1) 唇っぽい輪郭（左右が細くなる）＋ 2) 中央のふくらみ（口の中） */
  background:
    /* 口の中：中央が濃く、外へ抜ける */
    radial-gradient(ellipse at 50% 55%,
      rgba(120, 0, 10, .95) 0%,
      rgba(150, 10, 20, .85) 35%,
      rgba(170, 20, 35, .55) 60%,
      rgba(170, 20, 35, 0) 100%),
    /* 唇の輪郭：中央が濃く、両端へ行くほど薄く */
    linear-gradient(90deg,
      rgba(170,20,35,0) 0%,
      rgba(170,20,35,.65) 40%,
      rgba(170,20,35,.92) 50%,
      rgba(170,20,35,.65) 60%,
      rgba(170,20,35,0) 100%);

  /* ほんの少し立体感 */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    inset 0 -2px 4px rgba(0,0,0,.25);
}

/* 口角（両端をさらに細く・自然に） */
#mouth::before,
#mouth::after{
  width:14%
  content:"";
  position:absolute;
  top:50%;
  width:22%;
  height:10%;
  transform:translateY(-50%);
  border-radius:999px;
  background: radial-gradient(ellipse at center,
    rgba(0,0,0,.18) 0%,
    rgba(0,0,0,0) 70%);
  opacity:.55;
  pointer-events:none;
}
#mouth::before{ left:-6%; }
#mouth::after { right:-6%; }

/* idle（閉じ気味のときも“中央ふくらみ”が残るように少し調整） */
#receptionDock.isIdle #mouth{
  height:5px;
  transform:translate(-50%,-50%) scaleY(.55);
}

/* =========================
   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;
  }
}


/* =========================
   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;
  }
}