/* === たま PWA スタイル（マシュマロねこ） === */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  overflow: hidden;
}

body {
  background: linear-gradient(180deg, #FFF0F5 0%, #FFF8F0 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: "Hiragino Maru Gothic ProN", "Rounded Mplus 1c", sans-serif;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* === メインレイアウト === */
#app {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  height: 100%;
  padding: 20px 20px 80px;
  gap: 8px;
}

/* === たまコンテナ === */
#tama-container {
  flex: 1 1 auto;
  width: 85vw;
  max-width: 360px;
  min-height: 0;
  max-height: 55vh;
}

#tama-container svg {
  width: 100%;
  height: 100%;
}

/* === 会話エリア === */
#conversation {
  flex: 0 0 auto;
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

/* 義母の発話（右寄せ・小さめ・グレー） */
.user-message {
  align-self: flex-end;
  background: #E8E8E8;
  color: #555;
  border-radius: 16px 16px 4px 16px;
  padding: 10px 16px;
  font-size: 16px;
  line-height: 1.5;
  max-width: 80%;
  opacity: 0;
  animation: fadeIn 0.3s ease forwards;
}

/* たまの吹き出し（左寄せ・大きめ） */
.tama-message {
  align-self: flex-start;
  background: #FFF;
  color: #333;
  border-radius: 16px 16px 16px 4px;
  padding: 14px 20px;
  font-size: 20px;
  line-height: 1.6;
  max-width: 85%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  opacity: 0;
  animation: fadeIn 0.3s ease forwards;
  position: relative;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* === マイクインジケーター === */
#mic-indicator {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #FF8C94;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.3;
  transition: opacity 0.3s ease, transform 0.3s ease;
  cursor: pointer;
}

#mic-indicator.active {
  opacity: 1;
  animation: mic-pulse 1.5s ease-in-out infinite;
}

#mic-indicator svg {
  width: 26px;
  height: 26px;
  fill: #FFF;
}

@keyframes mic-pulse {
  0%, 100% { transform: translateX(-50%) scale(1); box-shadow: 0 0 0 0 rgba(255, 140, 148, 0.4); }
  50% { transform: translateX(-50%) scale(1.08); box-shadow: 0 0 0 18px rgba(255, 140, 148, 0); }
}

/* ==============================================
   横向き（landscape）レイアウト
   ============================================== */
@media (orientation: landscape) {
  #app {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 24px;
    padding: 16px 40px;
  }

  #tama-container {
    width: auto;
    height: 70vh;
    max-width: 300px;
    flex: 0 0 auto;
  }

  #conversation {
    max-width: 300px;
    max-height: 100%;
    overflow-y: auto;
  }

  #mic-indicator {
    bottom: 16px;
    right: 20px;
    left: auto;
    transform: none;
  }

  #mic-indicator.active {
    animation: mic-pulse-land 1.5s ease-in-out infinite;
  }

  @keyframes mic-pulse-land {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 140, 148, 0.4); }
    50% { transform: scale(1.08); box-shadow: 0 0 0 18px rgba(255, 140, 148, 0); }
  }
}

/* ==============================================
   iPad向け調整
   ============================================== */
@media (min-width: 768px) and (orientation: portrait) {
  #tama-container {
    max-width: 420px;
  }

  .tama-message {
    font-size: 26px;
  }

  .user-message {
    font-size: 22px;
  }

  #conversation {
    max-width: 500px;
  }
}

@media (min-width: 768px) and (orientation: landscape) {
  #tama-container {
    height: 75vh;
    max-width: 380px;
  }

  .tama-message {
    font-size: 22px;
  }

  .user-message {
    font-size: 18px;
  }

  #conversation {
    max-width: 400px;
  }
}

/* ==============================================
   アニメーション — 10パターン
   ============================================== */

/* --- 1. 待機（idle）--- */
@keyframes blink {
  0%, 90%, 100% { opacity: 0; }
  95% { opacity: 1; }
}

.state-idle #eyelids {
  animation: blink 4s ease-in-out infinite;
}

@keyframes tail-sway {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(8deg); }
}

.state-idle #tail {
  transform-origin: 65px 50px;
  animation: tail-sway 3s ease-in-out infinite;
}

@keyframes body-breathe {
  0%, 100% { transform: translate(200px, 260px); }
  50% { transform: translate(200px, 258px); }
}

.state-idle #tama-body-group {
  animation: body-breathe 4s ease-in-out infinite;
}

/* --- 2. 聞いてる（listening）--- */
@keyframes ear-perk {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.15); }
}

.state-listening #ear-left,
.state-listening #ear-right {
  transform-origin: center bottom;
  animation: ear-perk 0.8s ease-in-out infinite;
}

@keyframes eye-widen {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

.state-listening #eye-left,
.state-listening #eye-right {
  transform-origin: center;
  animation: eye-widen 1s ease-in-out infinite;
}

.state-listening #tama-body-group {
  animation: body-breathe 3s ease-in-out infinite;
}

/* --- 3. 喜び（joy）--- */
@keyframes jump {
  0%, 100% { transform: translate(200px, 260px); }
  30% { transform: translate(200px, 228px); }
  50% { transform: translate(200px, 233px); }
  70% { transform: translate(200px, 230px); }
}

.state-joy #tama-body-group {
  animation: jump 0.8s ease-in-out;
}

.state-joy #sparkles { opacity: 1; }

@keyframes sparkle-twinkle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.5); }
}

.state-joy #sparkles circle { animation: sparkle-twinkle 0.6s ease-in-out infinite; }
.state-joy #sparkles circle:nth-child(2) { animation-delay: 0.1s; }
.state-joy #sparkles circle:nth-child(3) { animation-delay: 0.2s; }
.state-joy #sparkles circle:nth-child(4) { animation-delay: 0.3s; }
.state-joy #sparkles circle:nth-child(5) { animation-delay: 0.4s; }

.state-joy #happy-eyes { opacity: 1; }
.state-joy #eye-left,
.state-joy #eye-right { opacity: 0; }

/* --- 4. 笑顔（smile）--- */
.state-smile #happy-eyes { opacity: 1; }
.state-smile #eye-left,
.state-smile #eye-right { opacity: 0; }

@keyframes gentle-sway {
  0%, 100% { transform: translate(200px, 260px) rotate(0deg); }
  25% { transform: translate(200px, 259px) rotate(-2deg); }
  75% { transform: translate(200px, 259px) rotate(2deg); }
}

.state-smile #tama-body-group {
  animation: gentle-sway 3s ease-in-out infinite;
}

.state-smile #tail {
  transform-origin: 65px 50px;
  animation: tail-sway 1.5s ease-in-out infinite;
}

/* --- 5. 甘え（cuddle）--- */
@keyframes head-tilt {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-8deg); }
}

.state-cuddle #head {
  transform-origin: 0 -10px;
  animation: head-tilt 2s ease-in-out infinite;
}

.state-cuddle #blush { opacity: 1; }
.state-cuddle #blush-default { opacity: 0; }

.state-cuddle #eye-left,
.state-cuddle #eye-right {
  transform-origin: center;
  transform: translateY(4px);
}

.state-cuddle #tama-body-group {
  animation: body-breathe 3s ease-in-out infinite;
}

/* --- 6. そわそわ（restless）--- */
@keyframes wiggle {
  0%, 100% { transform: translate(200px, 260px); }
  20% { transform: translate(196px, 260px); }
  40% { transform: translate(204px, 260px); }
  60% { transform: translate(197px, 260px); }
  80% { transform: translate(203px, 260px); }
}

.state-restless #tama-body-group {
  animation: wiggle 1.2s ease-in-out infinite;
}

.state-restless #medicine-mark { opacity: 1; }

@keyframes float-mark {
  0%, 100% { transform: translateY(0); opacity: 0.8; }
  50% { transform: translateY(-8px); opacity: 1; }
}

.state-restless #medicine-mark {
  animation: float-mark 1.5s ease-in-out infinite;
}

/* --- 7. しょんぼり（sad）--- */
.state-sad #ear-left {
  transform-origin: -20px -105px;
  transform: rotate(-15deg);
}

.state-sad #ear-right {
  transform-origin: 20px -105px;
  transform: rotate(15deg);
}

.state-sad #eye-left,
.state-sad #eye-right {
  transform-origin: center;
  transform: scaleY(0.6) translateY(4px);
}

@keyframes sad-breathe {
  0%, 100% { transform: translate(200px, 262px); }
  50% { transform: translate(200px, 264px); }
}

.state-sad #tama-body-group {
  animation: sad-breathe 5s ease-in-out infinite;
}

/* --- 8. 眠い（sleepy）--- */
@keyframes sleepy-sway {
  0%, 100% { transform: translate(200px, 260px) rotate(0deg); }
  50% { transform: translate(200px, 262px) rotate(3deg); }
}

.state-sleepy #tama-body-group {
  animation: sleepy-sway 4s ease-in-out infinite;
}

.state-sleepy #eyelids { opacity: 0.7; }
.state-sleepy #zzz { opacity: 1; }

@keyframes zzz-float {
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-20px); opacity: 0; }
}

.state-sleepy #zzz text { animation: zzz-float 2.5s ease-in-out infinite; }
.state-sleepy #zzz text:nth-child(2) { animation-delay: 0.5s; }
.state-sleepy #zzz text:nth-child(3) { animation-delay: 1s; }

/* --- 9. 考え中（thinking）--- */
@keyframes head-think {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(10deg); }
}

.state-thinking #head {
  transform-origin: 0 -10px;
  animation: head-think 2s ease-in-out infinite;
}

.state-thinking #thinking-dots { opacity: 1; }

@keyframes dot-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.state-thinking #thinking-dots circle:nth-child(1) { animation: dot-bounce 0.8s ease-in-out infinite; }
.state-thinking #thinking-dots circle:nth-child(2) { animation: dot-bounce 0.8s ease-in-out 0.2s infinite; }
.state-thinking #thinking-dots circle:nth-child(3) { animation: dot-bounce 0.8s ease-in-out 0.4s infinite; }

.state-thinking #tama-body-group {
  animation: body-breathe 4s ease-in-out infinite;
}

/* --- 10. 驚き（surprise）--- */
@keyframes surprise-jump {
  0% { transform: translate(200px, 260px); }
  20% { transform: translate(200px, 240px); }
  40% { transform: translate(200px, 260px); }
  100% { transform: translate(200px, 260px); }
}

.state-surprise #tama-body-group {
  animation: surprise-jump 0.6s ease-out;
}

.state-surprise #eye-left,
.state-surprise #eye-right {
  transform-origin: center;
  transform: scale(1.4);
}

.state-surprise #ear-left,
.state-surprise #ear-right {
  transform-origin: center bottom;
  transform: scaleY(1.2);
}

.state-surprise #surprise-mark { opacity: 1; }

@keyframes mark-pop {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.state-surprise #surprise-mark {
  animation: mark-pop 0.4s ease-out;
}

.state-surprise #tail {
  transform-origin: 65px 50px;
  transform: rotate(-10deg);
}

/* === 口の切り替え === */
.speaking #mouth-normal { opacity: 0; }
.speaking #mouth-open { opacity: 1; }

@keyframes mouth-move {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.6); }
}

.speaking #mouth-open {
  transform-origin: center;
  animation: mouth-move 0.3s ease-in-out infinite;
}