/* characters.css — キャラクターの見た目の土台と状態アニメーション(idle/listening/thinking/speaking) */

.char-stage {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 340px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-user-select: none;
  user-select: none;
}

.char-stage .char-svg {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  /* 会話画面のように親要素の高さが決まっている場合はそこに収め、
     ギャラリーのように高さが不定の場合(max-height:100%がnoneになる)は
     幅基準の自然なサイズに戻る。 */
  max-height: 100%;
  overflow: visible;
}

/* --- 呼吸(idle常時) --- */
.char-stage .breathe {
  transform-origin: 100px 140px;
  animation: char-breathe 3.6s ease-in-out infinite;
}
@keyframes char-breathe {
  0%,
  100% {
    transform: scale(1) translateY(0);
  }
  50% {
    transform: scale(1.018) translateY(-1.5px);
  }
}

/* --- まばたき --- */
.char-stage .eyelid {
  transition: opacity 0.07s ease;
}
.char-stage.blink .eyelid {
  opacity: 1;
}

/* --- 目の位置合わせ(全キャラ共通レイアウト) --- */
.char-stage .eye-left {
  transform-origin: 79px 88px;
}
.char-stage .eye-right {
  transform-origin: 121px 88px;
}
.char-stage .eye {
  transition: transform 0.2s ease;
}

/* --- 聞いている(listening): 少し前傾 + 目を大きく + 耳ぴくっ --- */
.char-stage .lean {
  transition: transform 0.25s ease;
  transform: translateY(0) rotate(0deg);
}
.char-stage[data-state="listening"] .lean {
  transform: translateY(3px) rotate(-1.5deg);
}
.char-stage[data-state="listening"] .eye {
  transform: scale(1.14);
}
.char-stage .ear-left,
.char-stage .ear-right {
  transition: transform 0.2s ease;
  transform: rotate(0deg);
}
.char-stage[data-state="listening"] .ear-left {
  transform: rotate(-12deg);
}
.char-stage[data-state="listening"] .ear-right {
  transform: rotate(12deg);
}

/* --- 考えている(thinking): 目線を上に + 吹き出し表示 --- */
.char-stage[data-state="thinking"] .eye {
  transform: translateY(-4px);
}
.char-stage .thought-bubble {
  opacity: 0;
  transition: opacity 0.25s ease;
}
.char-stage[data-state="thinking"] .thought-bubble {
  opacity: 1;
}
.char-stage .thought-bubble .dot {
  animation: char-dot-pulse 1.2s ease-in-out infinite;
  transform-origin: center;
}
.char-stage .thought-bubble .dot2 {
  animation-delay: 0.2s;
}
.char-stage .thought-bubble .dot3 {
  animation-delay: 0.4s;
}
@keyframes char-dot-pulse {
  0%,
  60%,
  100% {
    opacity: 0.25;
  }
  30% {
    opacity: 1;
  }
}

/* --- 話している(speaking): 口はJSがdを直接書き換える。見た目の強調のみここで足す --- */
.char-stage .mouth {
  transition: d 0.05s linear;
}
.char-stage[data-state="speaking"] .eye {
  transform: scale(1.04);
}

/* --- 名前バッジ・キャラ切替ボタン(共通の小さいUI部品) --- */
.char-name-badge {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  color: #7a4a2a;
  margin-top: 2px;
}

.char-switch-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #3a2b22;
  background: #fffaf0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 0 2px 0 rgba(58, 43, 34, 0.25);
}
.char-switch-btn svg {
  width: 22px;
  height: 22px;
}
.char-switch-btn:active {
  transform: translateY(1px);
  box-shadow: none;
}